:root {
    color-scheme: light;
    --ink: #fff7ed;
    --ink-dark: #24150f;
    --muted: #d8c0a3;
    --line: rgba(255, 236, 205, 0.22);
    --paper: #5a2418;
    --panel: #fffaf1;
    --panel-ink: #2b1710;
    --accent: #d9a441;
    --accent-dark: #8b4b24;
    --topbar: #21100b;
    --topbar-soft: #3b1c12;
    --danger: #b42318;
    --ok: #237a45;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        linear-gradient(90deg, rgba(32, 13, 8, 0.44) 0 2px, transparent 2px 138px),
        linear-gradient(0deg, rgba(36, 15, 9, 0.45) 0 10px, rgba(111, 49, 28, 0.18) 10px 16px, transparent 16px 172px),
        radial-gradient(circle at 24% 10%, rgba(255, 222, 166, 0.09), transparent 28%),
        linear-gradient(135deg, #71301f 0%, #4b1d15 48%, #2d120c 100%);
    background-size: 140px 100%, 100% 190px, 100% 100%, 100% 100%;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 28px;
    background: linear-gradient(90deg, var(--topbar), var(--topbar-soft));
    border-bottom: 1px solid rgba(217, 164, 65, 0.35);
    box-shadow: 0 10px 30px rgba(20, 7, 3, 0.28);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    font-size: 22px;
    font-weight: 800;
    color: #fff8e8;
    min-width: max-content;
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    flex: 1;
    justify-content: flex-end;
}

nav a {
    color: #f9ead2;
    font-weight: 700;
    font-size: 14px;
}

nav a:hover {
    color: var(--accent);
}

.langs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.langs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 23px;
    line-height: 1;
}

.langs a.active,
.langs a:hover {
    border-color: rgba(255, 248, 232, 0.72);
    background: rgba(255, 255, 255, 0.08);
}

.page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 34px 20px;
}

h1 {
    font-size: 38px;
    line-height: 1.1;
    margin: 0 0 24px;
}

h2 {
    font-size: 20px;
    margin: 0 0 12px;
}

.auth-panel,
.entry-form,
.profile-grid article,
.stats article,
.list article,
.feature-band article {
    background: var(--panel);
    border: 1px solid rgba(64, 30, 16, 0.24);
    border-radius: 8px;
    color: var(--panel-ink);
    box-shadow: 0 18px 40px rgba(27, 9, 4, 0.18);
}

.auth-panel {
    max-width: 420px;
    margin: 40px auto;
    padding: 28px;
}

.stack,
.entry-form {
    display: grid;
    gap: 14px;
}

.entry-form {
    padding: 20px;
    margin-bottom: 24px;
}

label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

input,
select,
textarea,
button {
    width: 100%;
    min-height: 42px;
    border-radius: 6px;
    border: 1px solid #d7c4a9;
    padding: 10px 12px;
    font: inherit;
}

textarea {
    resize: vertical;
}

button,
.button-link {
    cursor: pointer;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #21100b;
    font-weight: 800;
}

button:hover,
.button-link:hover {
    background: #efc46a;
}

.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 6px;
}

.button-link.secondary {
    background: transparent;
    color: #fff8e8;
    border-color: rgba(255, 248, 232, 0.45);
}

.button-link.secondary:hover {
    background: rgba(255, 248, 232, 0.1);
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
}

.checkbox input {
    width: auto;
    min-height: auto;
}

.landing {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 42px;
    align-items: center;
    min-height: calc(100vh - 220px);
    padding: 34px 0 20px;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--accent);
    font-weight: 800;
    letter-spacing: 0;
}

.lead {
    max-width: 620px;
    color: #f0d8b8;
    font-size: 19px;
    line-height: 1.6;
    margin: 0 0 26px;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.landing-shelf {
    min-height: 390px;
    position: relative;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.08), rgba(0,0,0,0.18)),
        linear-gradient(180deg, #7d3d20 0%, #562312 100%);
    border: 1px solid rgba(255, 236, 205, 0.26);
    box-shadow: inset 0 0 0 12px rgba(43, 18, 10, 0.36), 0 26px 60px rgba(17, 6, 3, 0.35);
    overflow: hidden;
}

.landing-shelf::before,
.landing-shelf::after,
.shelf-board {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(180deg, #9c5930, #3b170d);
    box-shadow: 0 10px 18px rgba(20, 7, 3, 0.28);
}

.landing-shelf::before {
    top: 122px;
}

.landing-shelf::after {
    top: 254px;
}

.shelf-board {
    bottom: 40px;
}

.book-row {
    position: absolute;
    left: 54px;
    top: 46px;
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.book {
    display: block;
    width: 36px;
    height: 76px;
    border-radius: 4px 4px 2px 2px;
    box-shadow: inset -8px 0 rgba(0, 0, 0, 0.16);
}

.book.tall {
    height: 94px;
}

.book.red {
    background: #9b2f21;
}

.book.gold {
    background: #c99534;
}

.book.green {
    background: #47714b;
}

.book.cream {
    background: #e6d1a4;
}

.book.blue {
    background: #315a78;
}

.game-stack {
    position: absolute;
    right: 54px;
    top: 170px;
    display: grid;
    gap: 10px;
    width: 190px;
}

.game-stack span {
    display: block;
    height: 42px;
    border-radius: 7px;
    background: #f4dfb8;
    border: 5px solid #462012;
    box-shadow: 0 8px 14px rgba(20, 7, 3, 0.18);
}

.game-stack span:nth-child(2) {
    background: #b23a2d;
    transform: translateX(-18px);
}

.game-stack span:nth-child(3) {
    background: #2f6f68;
    transform: translateX(10px);
}

.meeple {
    position: absolute;
    left: 86px;
    bottom: 72px;
    width: 76px;
    height: 92px;
    background: #d9a441;
    border-radius: 32px 32px 20px 20px;
    box-shadow: inset -10px -8px rgba(87, 44, 18, 0.22);
}

.meeple::before,
.meeple::after {
    content: "";
    position: absolute;
    background: #d9a441;
    border-radius: 20px;
}

.meeple::before {
    width: 104px;
    height: 34px;
    left: -14px;
    top: 26px;
}

.meeple::after {
    width: 38px;
    height: 38px;
    left: 19px;
    top: -18px;
}

.feature-band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 12px 0 36px;
}

.feature-band article {
    padding: 24px;
}

.feature-band p {
    color: #694a35;
    line-height: 1.55;
    margin: 0;
}

.feature-icon {
    display: inline-block;
    font-size: 32px;
    margin-bottom: 12px;
}

.stats,
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stats article,
.profile-grid article,
.list article {
    padding: 18px;
}

.stats strong {
    display: block;
    font-size: 34px;
}

.stats span,
.list span,
.profile-grid p {
    color: #76583f;
}

.list {
    display: grid;
    gap: 10px;
}

.list article {
    display: grid;
    gap: 6px;
}

.search-row,
.player-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.player-row {
    grid-template-columns: 1fr 1fr 120px 120px;
    margin-bottom: 10px;
}

.api-results {
    display: grid;
    gap: 8px;
}

.api-results button {
    text-align: left;
    background: #fffaf1;
    color: var(--panel-ink);
    border-color: #d7c4a9;
    font-weight: 400;
}

.notice {
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: 8px;
    background: #fffaf1;
    border: 1px solid rgba(64, 30, 16, 0.24);
    color: var(--panel-ink);
}

.notice.success {
    border-color: var(--ok);
    color: var(--ok);
}

.notice.error {
    border-color: var(--danger);
    color: var(--danger);
}

@media (max-width: 820px) {
    .topbar,
    nav {
        align-items: flex-start;
        flex-direction: column;
    }

    nav {
        justify-content: flex-start;
    }

    .landing,
    .feature-band {
        grid-template-columns: 1fr;
    }

    .landing {
        min-height: auto;
    }

    .landing-shelf {
        min-height: 320px;
    }

    .search-row,
    .player-row {
        grid-template-columns: 1fr;
    }
}