/* ── Film1024 homepage — "Studio Performance" (B2c-v3) ─────────────────────
   Design tokens and layout from design_handoff_studio_performance.
   Desktop-first; single breakpoint collapses to the mobile layout. */

:root {
    /* ── Colors ── */
    --cream:       #f3ead9;   /* page bg */
    --ink:         #2b2b28;   /* text / dark surfaces */
    --orange:      #d97b3f;   /* accent 1 */
    --gold:        #e8b84b;   /* accent 2 */
    --olive:       #8a9a6e;   /* accent 3 */
    --peach:       #e3b98a;   /* accent 4 — arc + logo only */
    --teal:        #8fc4bb;   /* accent 5 */
    --text-body:   #6b6355;
    --text-label:  #a89a80;
    --hairline:    #ddd0b8;
    --card-border: rgba(43, 43, 40, .14);

    /* ── Theme-dependent roles (flipped by [data-theme="dark"]) ── */
    --page-bg:        #f3ead9;   /* page background (cream) */
    --card-bg:        #ffffff;   /* card surface */
    --text-strong:    #2b2b28;   /* headings / emphasis text */
    --rank-gold:      #a8791c;
    --shadow-card:    0 14px 28px rgba(43, 43, 40, .14);
    --shadow-card-sm: 0 2px 8px rgba(43, 43, 40, .08);

    /* ── Typography ── */
    --font-logo:    'Bungee', cursive;
    --font-sans:    'Hanken Grotesk', sans-serif;
    --font-mono:    'Space Mono', monospace;
    --font-numeral: 'Anton', sans-serif;

    color-scheme: light;
}

/* ── Dark theme: "warm ink" — video store after closing ─────────────────
   Same five accents; only surfaces, text roles, and shadows flip. */
[data-theme="dark"] {
    color-scheme: dark;
    --page-bg:        #22211e;
    --card-bg:        #2e2d29;
    --text-strong:    #f3ead9;
    --text-body:      #c9c0ac;
    --text-label:     #8f8878;
    --hairline:       #45423a;
    --card-border:    rgba(243, 234, 217, .14);
    --rank-gold:      #e8b84b;
    --shadow-card:    0 14px 28px rgba(0, 0, 0, .35);
    --shadow-card-sm: 0 2px 8px rgba(0, 0, 0, .3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--page-bg);
    color: var(--text-strong);
    font-family: var(--font-sans);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* ── Rainbow arc (decorative corner element) ─────────────────────────────
   Single seamless radial-gradient — not stacked bordered circles. */
.arc {
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    height: 380px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 100% 0%,
        transparent 0 188.5px,
        var(--teal)   188.5px 216.5px,
        var(--page-bg)  216.5px 218.5px,
        var(--peach)  218.5px 246.5px,
        var(--page-bg)  246.5px 248.5px,
        var(--gold)   248.5px 276.5px,
        var(--page-bg)  276.5px 278.5px,
        var(--orange) 278.5px 306.5px,
        var(--page-bg)  306.5px 308.5px,
        var(--olive)  308.5px 336.5px,
        transparent 336.5px);
}

/* ── Rental sticker strip ────────────────────────────────────────────── */
.sticker-strip {
    position: relative;
    z-index: 2;
    background: var(--ink);
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .16em;
}

.strip-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.strip-member {
    padding: 9px 18px;
    background: var(--teal);
    color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
}

.strip-star {
    position: relative;
    top: -1px;
    margin-right: 3px;
}

.strip-dueback { padding: 9px 16px; white-space: nowrap; }

.strip-channel {
    padding: 9px 16px;
    color: var(--gold);
    white-space: nowrap;
}

.strip-counter {
    margin-left: auto;
    padding: 9px 18px;
    letter-spacing: .05em;
}

/* ── Page container ──────────────────────────────────────────────────── */
.page {
    max-width: 1160px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav {
    position: relative;
    display: flex;
    align-items: center;
    padding: 24px 40px 6px;
}

.logo {
    font-family: var(--font-logo);
    font-size: 38px;
    color: var(--text-strong);
}

.logo-stripe {
    background: repeating-linear-gradient(135deg,
        var(--olive)  0 8.75px,
        var(--orange) 8.75px 17.5px,
        var(--gold)   17.5px 26.25px,
        var(--teal)   26.25px 35px);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.6px var(--text-strong);
    paint-order: stroke fill;
}

.release-badge {
    display: inline-block;
    background: var(--gold);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .18em;
    padding: 5px 11px;
    border-radius: 4px;
    font-weight: 700;
    transform: rotate(-2deg);
}

.nav-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-2deg);
}

.hero-badge { display: none; }

/* Auth widget (populated by script.js) */
.nav-auth {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-label);
    padding: 4px;
    display: flex;
    align-items: center;
    line-height: 0;
}

.theme-toggle:hover { color: var(--text-strong); }

.auth-signin-btn {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-strong);
    background: var(--page-bg);
    border: 2px solid var(--text-strong);
    padding: 11px 24px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.auth-signin-btn:hover {
    background: var(--text-strong);
    color: var(--page-bg);
}

.auth-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--text-strong);
    object-fit: cover;
}

.auth-name {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-body);
}

.auth-signout {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-label);
    background: none;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.auth-signout:hover { color: var(--text-strong); }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
    padding: 30px 40px 8px;
    position: relative;
}

.hero h1 {
    font-size: 56px;
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hero p {
    max-width: 540px;
    margin-top: 20px;
    color: var(--text-body);
    font-size: 17px;
    line-height: 1.5;
}

/* ── Shelf label ─────────────────────────────────────────────────────── */
.shelf-label {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 34px 40px 18px;
}

.shelf-rule {
    flex: 1;
    border-bottom: 2px dashed var(--hairline);
}

.shelf-count {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-label);
}

/* ── Game cards ──────────────────────────────────────────────────────── */
.game-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 0 40px;
}

.game-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
}

.card-spacer { height: 10px; }

.card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    flex: 1;
}

.preview {
    height: 110px;
    border-radius: 6px;
    background: var(--ink);
    border: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Movie Match preview — 4×4 swatch grid */
.swatch-grid {
    display: grid;
    grid-template-columns: repeat(4, 20px);
    grid-auto-rows: 20px;
    gap: 5px;
}

.swatch-grid span { border-radius: 4px; }
.sw-orange { background: var(--orange); }
.sw-olive  { background: var(--olive); }
.sw-gold   { background: var(--gold); }
.sw-cream  { background: var(--cream); }

/* Poster Guess preview — striped panel + "?" */
.preview-poster {
    position: relative;
    overflow: hidden;
}

.preview-stripes {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 16px);
    opacity: .22;
}

.big-q {
    font-family: var(--font-numeral);
    font-size: 50px;
    color: var(--cream);
    opacity: .8;
}

/* Film Battle preview — VS blocks */
.preview-battle { gap: 10px; }

.vs-block {
    width: 34px;
    height: 48px;
    border-radius: 4px;
}

.vs-block-a { background: var(--orange); }
.vs-block-b { background: var(--olive); }

.vs-label {
    font-family: var(--font-numeral);
    font-size: 20px;
    color: var(--cream);
}

.tag-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tag {
    background: var(--page-bg);
    border: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    padding: 3px 8px;
    border-radius: 3px;
}

.card-body h3 {
    font-size: 22px;
    font-weight: 800;
}

.card-body > p {
    color: var(--text-body);
    font-size: 14px;
    line-height: 1.5;
    flex: 1;
}

.card-status {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-label);
}

.cta {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 11px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
}

.cta:hover { filter: brightness(.94); }

.cta-orange { background: var(--orange); color: #fff; }
.cta-olive  { background: var(--olive);  color: #fff; }

.cta-gold {
    background: var(--gold);
    border: 1.5px solid var(--gold);
    color: var(--ink);
    padding: 9.5px;
}

/* ── Leaderboard band ────────────────────────────────────────────────── */
.leaderboard-band {
    margin: 34px 40px 0;
    padding: 24px 28px;
    border-radius: 8px;
    background: repeating-linear-gradient(135deg,
        var(--orange) 0 15px,
        var(--gold)   15px 30px,
        var(--olive)  30px 45px);
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 20px;
}

.band-chip {
    background: var(--ink);
    color: var(--cream);
    padding: 14px 20px;
    border-radius: 8px;
}

.band-title {
    font-size: 19px;
    font-weight: 800;
}

.band-desc {
    color: #c2b9a8;
    font-size: 14px;
    margin-top: 3px;
}

.band-btn {
    margin-left: auto;
    white-space: nowrap;
    text-decoration: none;
    color: var(--cream);
    background: var(--ink);
    padding: 11px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
}

.band-btn:hover { filter: brightness(1.25); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.footer {
    margin-top: 30px;
    padding: 22px 40px;
    border-top: 2px dashed var(--hairline);
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: var(--text-label);
    font-family: var(--font-mono);
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-links a {
    color: var(--text-body);
    text-decoration: none;
}

.footer-links a:hover { text-decoration: underline; }

.footer-dot { color: var(--hairline); }

.footer-stamp-row {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.rewind-stamp {
    transform: rotate(-7deg);
    border: 2px solid var(--orange);
    color: var(--orange);
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: .06em;
}

/* ── Leaderboard page ────────────────────────────────────────────────── */
.lb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    padding: 0 40px;
}

.lb-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    padding: 18px;
}

.lb-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    margin-bottom: 10px;
}

.lb-tag-orange { background: var(--orange); color: #fff; }
.lb-tag-olive  { background: var(--olive);  color: #fff; }
.lb-tag-gold   { background: var(--gold);   color: var(--ink); }

.lb-section h2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 2px;
}

.lb-desc {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--text-label);
    margin-bottom: 12px;
}

.lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--hairline);
}

.lb-row:last-child { border-bottom: none; }

.lb-rank {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-label);
    min-width: 1.6rem;
    text-align: right;
    flex-shrink: 0;
}

.lb-rank.rank-gold   { color: var(--rank-gold); }
.lb-rank.rank-silver { color: var(--text-body); }
.lb-rank.rank-bronze { color: var(--orange); }

.lb-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--text-strong);
    flex-shrink: 0;
    object-fit: cover;
}

.lb-avatar-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--page-bg);
    border: 1px solid var(--hairline);
    flex-shrink: 0;
}

.lb-name {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-body);
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-stat {
    font-weight: 800;
    font-size: 17px;
    color: var(--text-strong);
    text-align: right;
    flex-shrink: 0;
    line-height: 1.1;
}

.lb-stat-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-label);
    display: block;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 3px;
}

.lb-empty,
.lb-loading {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-label);
    padding: 14px 0;
    text-align: center;
}

.lb-loading { animation: lb-pulse 1.4s ease-in-out infinite; }

@keyframes lb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ── Feedback modal ──────────────────────────────────────────────────── */
#feedback-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(43, 43, 40, 0.55);
    align-items: center;
    justify-content: center;
}

#feedback-modal.open { display: flex; }

.feedback-modal-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    padding: 24px;
    width: min(420px, 90vw);
    position: relative;
}

#feedback-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-label);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 4px 7px;
}

#feedback-modal-close:hover { color: var(--text-strong); }

.feedback-modal-title {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 4px;
}

.feedback-modal-hint {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .05em;
    color: var(--text-label);
    margin-bottom: 14px;
}

#feedback-modal-text {
    display: block;
    width: 100%;
    background: var(--page-bg);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    color: var(--text-strong);
    font-family: var(--font-sans);
    font-size: 14px;
    padding: 10px;
    resize: none;
    outline: none;
    margin-bottom: 12px;
}

#feedback-modal-text:focus { border-color: var(--text-strong); }

#feedback-modal-submit {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    padding: 10px 22px;
    background: var(--ink);
    color: var(--cream);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#feedback-modal-submit:hover { filter: brightness(1.25); }
#feedback-modal-submit:disabled { opacity: 0.5; cursor: default; }

#feedback-modal-thanks {
    display: none;
    font-weight: 700;
    color: var(--olive);
    text-align: center;
    padding: 8px 0;
}

/* ── Mobile (≤768px) ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .arc {
        width: 170px;
        height: 170px;
        background: radial-gradient(circle at 100% 0%,
            transparent 0 84.3px,
            var(--teal)   84.3px 97.2px,
            var(--page-bg)  97.2px 98.2px,
            var(--peach)  98.2px 110.5px,
            var(--page-bg)  110.5px 111.5px,
            var(--gold)   111.5px 124.4px,
            var(--page-bg)  124.4px 125.4px,
            var(--orange) 125.4px 137.8px,
            var(--page-bg)  137.8px 138.8px,
            var(--olive)  138.8px 151px,
            transparent 151px);
    }

    .sticker-strip {
        font-size: 10px;
        letter-spacing: .1em;
        overflow: hidden;
    }

    .strip-member { padding: 7px 12px; }
    .strip-channel { padding: 7px 10px; }
    .strip-dueback, .strip-counter { display: none; }

    .nav { padding: 18px 20px 4px; }

    .logo { font-size: 24px; }

    .logo-stripe {
        background: repeating-linear-gradient(135deg,
            var(--olive)  0 5.5px,
            var(--orange) 5.5px 11px,
            var(--gold)   11px 16.5px,
            var(--teal)   16.5px 22px);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-stroke: 0.4px var(--text-strong);
    }

    .nav-badge { display: none; }

    .hero-badge {
        display: inline-block;
        font-size: 10px;
        letter-spacing: .14em;
        padding: 4px 9px;
        margin-bottom: 12px;
    }

    .auth-signin-btn {
        font-size: 14px;
        padding: 7px 14px;
        border-radius: 7px;
    }

    .hero { padding: 18px 20px 6px; }

    .hero h1 {
        font-size: 30px;
        line-height: 1.08;
        letter-spacing: -0.01em;
    }

    .hero h1 br { display: none; }

    .hero p {
        margin-top: 12px;
        font-size: 14px;
    }

    .shelf-label {
        gap: 12px;
        padding: 20px 20px 12px;
    }

    .shelf-count { font-size: 11px; }

    .game-grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 0 20px;
    }

    .game-card { box-shadow: var(--shadow-card); }

    .card-spacer { height: 8px; }

    .card-body {
        padding: 16px;
        gap: 11px;
    }

    .preview { height: 96px; }

    .swatch-grid {
        grid-template-columns: repeat(4, 18px);
        grid-auto-rows: 18px;
        gap: 4px;
    }

    .big-q { font-size: 42px; }

    .preview-battle { gap: 9px; }

    .vs-block {
        width: 30px;
        height: 42px;
    }

    .vs-label { font-size: 18px; }

    .tag {
        font-size: 9px;
        padding: 3px 7px;
    }

    .card-body h3 { font-size: 19px; }

    .card-body > p { font-size: 13px; }

    .cta { padding: 12px; }
    .cta-gold { padding: 10.5px; }

    .lb-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0 20px;
    }

    .lb-section {
        padding: 16px;
        box-shadow: var(--shadow-card);
    }

    .lb-section h2 { font-size: 19px; }

    .leaderboard-band {
        margin: 24px 20px 0;
        padding: 18px;
        background: repeating-linear-gradient(135deg,
            var(--orange) 0 13px,
            var(--gold)   13px 26px,
            var(--olive)  26px 39px);
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .band-chip { padding: 12px 16px; }

    .band-title { font-size: 16px; }

    .band-desc {
        font-size: 13px;
        line-height: 1.4;
    }

    .band-btn {
        margin-left: 0;
        text-align: center;
        padding: 12px;
    }

    .footer {
        margin-top: 24px;
        padding: 18px 20px 22px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        font-size: 12px;
    }

    .footer-links { gap: 12px; }

    .footer-stamp-row {
        margin-left: 0;
        gap: 10px;
    }

    .rewind-stamp {
        font-size: 10px;
        padding: 3px 7px;
        letter-spacing: .05em;
    }
}