/* ═══════════════════════════════════════════════════════════════
   AI QUIZ CO — PREMIUM DARK UI
   Selective glow · Clean typography · Refined retro
   ═══════════════════════════════════════════════════════════════ */

:root {
    --bg:    #050510;
    --bg2:   #0a0e24;
    --bg3:   #10163a;
    --brd:   #161a3a;
    --tx:    #e8e8f8;
    --dim:   #a8a8c8;
    --dark:  #707098;
    --cyan:  #00e8ff;
    --pink:  #ff2d8a;
    --green: #34e80e;
    --red:   #ff2850;
    --yel:   #ffd900;
    --purp:  #a855f7;
    --org:   #ff7a1a;
    --cyan-g:  rgba(0,232,255,0.06);
    --green-g: rgba(52,232,14,0.06);
    --red-g:   rgba(255,40,80,0.06);
    --pink-g:  rgba(255,45,138,0.06);
    --t1: var(--green);
    --t2: var(--cyan);
    --t3: var(--purp);
    --t4: var(--org);
    --t5: var(--red);
    --px: 'Space Grotesk', 'Share Tech Mono', sans-serif;
    --mono: 'Share Tech Mono', monospace;
    --tile: 48px;
    --gap:  14px;
    --max:  480px;
    --circ: 326.73;
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
    font-family:var(--px);
    background:var(--bg);
    background:
        radial-gradient(ellipse 80% 60% at 50% 20%,
            rgba(0,232,255,0.025) 0%,
            rgba(168,85,247,0.02) 40%,
            rgba(255,45,138,0.008) 70%,
            transparent 90%),
        linear-gradient(180deg, #0a0a20 0%, #050510 50%, #080818 100%);
    color:var(--tx);
    min-height:100dvh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:transparent;
}

/* ─── CRT SCANLINES (barely-there texture) ─── */
.crt{
    position:fixed;inset:0;
    background:repeating-linear-gradient(
        0deg,
        transparent 0px, transparent 4px,
        rgba(0,0,0,0.006) 4px, rgba(0,0,0,0.006) 5px
    );
    pointer-events:none;
    z-index:9999;
    contain:strict;
}

#app{
    width:100%;max-width:var(--max);
    padding:0 20px 40px;
    min-height:100dvh;
    display:flex;flex-direction:column;align-items:center;
    position:relative;
}

/* ═══════════════════════════════════════════════════════════════
   HUD (Header)
   ═══════════════════════════════════════════════════════════════ */
.hud{
    width:100%;display:flex;align-items:center;
    justify-content:space-between;padding:16px 0 8px;
}
.hud-logo{
    font-family:var(--px);font-size:20px;font-weight:700;
    color:var(--cyan);
    letter-spacing:-0.5px;
    text-shadow:0 0 20px rgba(0,232,255,0.25);
}
.hud-day{
    font-family:var(--mono);font-size:13px;
    color:var(--dark);letter-spacing:2px;
}
.hud-streak{
    font-family:var(--mono);font-size:14px;
    display:flex;align-items:center;gap:6px;
    color:var(--dim);
}
.fire{font-size:14px}

/* ═══════════════════════════════════════════════════════════════
   5-TILE TRACK — THE ICON
   ═══════════════════════════════════════════════════════════════ */
.tile-row{
    position:relative;width:100%;
    padding:18px 0 14px;display:flex;justify-content:center;
}
.wire{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:calc(var(--tile)*4 + var(--gap)*4);
    height:1px;
    background:linear-gradient(90deg,transparent,var(--brd) 15%,var(--brd) 85%,transparent);
}
.tiles{display:flex;gap:var(--gap);position:relative;z-index:1}

.tile{
    width:var(--tile);height:var(--tile);
    border:2px solid var(--brd);
    background:var(--bg2);
    display:flex;align-items:center;justify-content:center;
    position:relative;transition:all 0.3s;
    border-radius:4px;
}
.tn{
    font-family:var(--px);font-size:14px;font-weight:700;
    color:var(--dark);transition:all 0.3s;
}
.ti{
    position:absolute;font-family:var(--px);font-size:16px;font-weight:700;
    opacity:0;transition:all 0.3s;
}

/* Tile states */
.tile.on{
    border-color:var(--cyan);
    box-shadow:0 0 12px rgba(0,232,255,0.15);
    animation:glow 2s ease-in-out infinite;
}
.tile.on .tn{color:var(--cyan)}

.tile.ok{
    border-color:var(--green);background:var(--green-g);
    box-shadow:0 0 10px rgba(52,232,14,0.2);
    animation:pop 0.4s cubic-bezier(.34,1.56,.64,1);
}
.tile.ok .tn{opacity:0} .tile.ok .ti{opacity:1;color:var(--green)}

.tile.bad{
    border-color:var(--red);background:var(--red-g);
    box-shadow:0 0 10px rgba(255,40,80,0.2);
    animation:pop 0.4s cubic-bezier(.34,1.56,.64,1);
}
.tile.bad .tn{opacity:0} .tile.bad .ti{opacity:1;color:var(--red)}

@keyframes glow{
    0%,100%{box-shadow:0 0 8px rgba(0,232,255,0.1)}
    50%{box-shadow:0 0 16px rgba(0,232,255,0.2)}
}
@keyframes pop{
    0%{transform:scale(.85)}50%{transform:scale(1.15)}100%{transform:scale(1)}
}

/* ─── SCREENS ─── */
.scr{display:none;width:100%;flex-direction:column;align-items:center}
.scr.on{display:flex;animation:fadeIn .3s ease}
#s-start.on{flex:1;justify-content:center}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════════════════════════
   START SCREEN
   ═══════════════════════════════════════════════════════════════ */
.big-title{
    font-family:var(--px);
    font-weight:700;
    font-size:clamp(36px, 10vw, 56px);
    color:var(--cyan);
    letter-spacing:-0.5px;
    text-shadow:0 0 40px rgba(0,232,255,0.15);
    margin-top:0;line-height:1.1;
    text-align:center;
    width:100%;
}
.sub-title{
    font-family:var(--mono);font-size:13px;line-height:1.6;
    color:var(--dim);letter-spacing:4px;
    text-transform:uppercase;
    margin-top:10px;text-align:center;
}
.desc{
    font-family:var(--px);font-size:14px;font-weight:500;
    color:var(--dark);text-align:center;
    margin:20px 0 28px;line-height:1.8;
    max-width:380px;
    width:100%;
}

/* Hero icon */
.hero-icon{
    font-size:56px;
    margin-bottom:8px;
    filter:drop-shadow(0 0 20px rgba(0,232,255,0.15));
}

/* Start screen upgrade teaser */
.start-upgrade{
    width:100%;max-width:340px;
    margin-top:20px;
}
.start-upgrade-btn{
    width:100%;
    display:flex;align-items:center;gap:12px;
    padding:14px 16px;
    background:rgba(168,85,247,0.04);
    border:1px solid rgba(168,85,247,0.2);
    border-radius:8px;
    cursor:pointer;
    transition:all .2s;
    text-align:left;
}
@media(hover:hover){
    .start-upgrade-btn:hover{
        background:rgba(168,85,247,0.08);
        border-color:rgba(168,85,247,0.4);
    }
}
.start-upgrade-btn:active{
    background:rgba(168,85,247,0.08);
    border-color:rgba(168,85,247,0.4);
}
.start-upgrade-badge{
    font-family:var(--px);font-size:11px;font-weight:700;
    color:var(--purp);letter-spacing:1px;
    background:rgba(168,85,247,0.1);
    padding:4px 10px;border-radius:12px;
    white-space:nowrap;flex-shrink:0;
}
.start-upgrade-text{
    font-family:var(--px);font-size:13px;font-weight:500;
    color:var(--dim);line-height:1.4;
    flex:1;
}
.start-upgrade-text strong{color:var(--tx)}
.start-upgrade-arrow{
    font-size:20px;color:var(--dark);
    flex-shrink:0;transition:color .2s;
}
.start-upgrade-btn:hover .start-upgrade-arrow{color:var(--purp)}

/* Primary action button */
.btn-go{
    font-family:var(--px);font-size:15px;font-weight:700;
    color:var(--bg);background:var(--cyan);
    border:none;padding:16px 40px;cursor:pointer;
    letter-spacing:1px;border-radius:8px;
    box-shadow:0 0 20px rgba(0,232,255,0.2),0 3px 0 #009aab;
    transition:all .15s;
    text-align:center;
    max-width:100%;
    word-break:keep-all;
}
.btn-go.btn-primary{
    font-size:16px;padding:18px 44px;letter-spacing:1px;
    box-shadow:0 0 32px rgba(0,232,255,0.28),0 3px 0 #009aab;
}
@media(hover:hover){
    .btn-go:hover{
        transform:translateY(-2px);
        box-shadow:0 0 28px rgba(0,232,255,0.3),0 6px 0 #009aab;
    }
    .btn-go.btn-primary:hover{
        box-shadow:0 0 48px rgba(0,232,255,0.4),0 6px 0 #009aab;
    }
}
.btn-go:active{
    transform:translateY(2px);
    box-shadow:0 0 10px rgba(0,232,255,0.15),0 1px 0 #009aab;
}

/* Level picker */
.level-pick{
    display:flex;gap:10px;margin-bottom:24px;
    width:100%;max-width:340px;
}
.lvl-btn{
    flex:1;
    font-family:var(--px);font-size:13px;font-weight:700;
    padding:12px 8px;border-radius:8px;
    border:1px solid var(--brd);
    background:var(--bg2);color:var(--dim);
    cursor:pointer;transition:all .2s;
    text-align:center;letter-spacing:0.5px;
}
.lvl-btn:hover{border-color:var(--dim)}
.lvl-btn.active{
    border-color:var(--cyan);color:var(--cyan);
    background:rgba(0,232,255,0.06);
    box-shadow:0 0 12px rgba(0,232,255,0.1);
}
.lvl-casual.active{border-color:var(--green);color:var(--green);background:rgba(52,232,14,0.06);box-shadow:0 0 12px rgba(52,232,14,0.1)}
.lvl-legend.active{border-color:var(--red);color:var(--red);background:rgba(255,40,80,0.06);box-shadow:0 0 12px rgba(255,40,80,0.1)}

/* ═══════════════════════════════════════════════════════════════
   QUESTION SCREEN
   ═══════════════════════════════════════════════════════════════ */
.q-bar{
    width:100%;display:flex;align-items:center;
    justify-content:space-between;padding:4px 0 14px;
}
.q-tier{
    font-family:var(--mono);font-size:11px;
    padding:4px 10px;border:1px solid var(--dim);
    color:var(--dim);letter-spacing:2px;
    border-radius:3px;
}
.q-n{font-family:var(--mono);font-size:13px;color:var(--dark)}

/* ─── COUNTDOWN CLOCK ─── */
.clock{
    position:relative;width:100px;height:100px;
    margin:0 auto 22px;
}
.clock svg{width:100%;height:100%;transform:rotate(-90deg)}
.clock-bg{fill:none;stroke:var(--brd);stroke-width:5}
.clock-ring{
    fill:none;stroke:var(--cyan);stroke-width:5;
    stroke-linecap:round;
    stroke-dasharray:var(--circ);
    stroke-dashoffset:0;
    filter:drop-shadow(0 0 6px rgba(0,232,255,0.3));
    transition:stroke .4s;
}
.clock-sec{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--px);font-size:32px;font-weight:700;
    color:var(--cyan);
    text-shadow:0 0 12px rgba(0,232,255,0.15);
}

/* Clock color states */
.clock-ring.warn{stroke:var(--yel);filter:drop-shadow(0 0 6px rgba(255,217,0,0.3))}
.clock-sec.warn{color:var(--yel);text-shadow:0 0 10px rgba(255,217,0,0.15)}
.clock-ring.crit{stroke:var(--red);filter:drop-shadow(0 0 6px rgba(255,40,80,0.3))}
.clock-sec.crit{color:var(--red);text-shadow:0 0 10px rgba(255,40,80,0.15)}
.clock-sec.blink{animation:blink .5s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

/* Question text */
.q-text{
    font-family:var(--px);font-size:22px;font-weight:500;
    line-height:1.5;text-align:left;width:100%;
    padding-bottom:24px;
}

/* Answer choices */
.opts{display:flex;flex-direction:column;gap:10px;width:100%}
.opt{
    width:100%;padding:14px 16px;
    background:var(--bg2);border:1px solid var(--brd);
    color:var(--tx);font-family:var(--px);font-size:16px;font-weight:500;
    text-align:left;cursor:pointer;
    display:flex;align-items:center;gap:12px;
    transition:all .15s;line-height:1.4;
    border-radius:6px;
}
.ok-k{
    width:28px;height:28px;
    background:var(--brd);border-radius:3px;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--px);font-size:9px;
    color:var(--dim);flex-shrink:0;
    transition:all .15s;
}
@media(hover:hover){
    .opt:hover{
        border-color:rgba(0,232,255,0.4);
        background:rgba(0,232,255,0.03);
    }
    .opt:hover .ok-k{background:var(--cyan);color:var(--bg)}
}
.opt:active{
    border-color:rgba(0,232,255,0.4);
    background:rgba(0,232,255,0.03);
}
.opt:active .ok-k{background:var(--cyan);color:var(--bg)}

/* Choice states */
.opt.lock{pointer-events:none}
.opt.yes{border-color:var(--green);background:var(--green-g)}
.opt.yes .ok-k{background:var(--green);color:var(--bg)}
.opt.no{border-color:var(--red);background:var(--red-g)}
.opt.no .ok-k{background:var(--red);color:var(--bg)}
.opt.off{opacity:.15;pointer-events:none}

/* Screen shake */
@keyframes shake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-5px)}40%{transform:translateX(5px)}
    60%{transform:translateX(-3px)}80%{transform:translateX(3px)}
}
.shake{animation:shake .35s ease}

/* ═══════════════════════════════════════════════════════════════
   EXPLAIN SCREEN
   ═══════════════════════════════════════════════════════════════ */
.verdict{
    display:flex;align-items:center;gap:14px;
    padding:20px 0 16px;
}
.v-i{
    width:44px;height:44px;border-radius:4px;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--px);font-size:16px;border:2px solid;
}
.v-i.ok{color:var(--green);border-color:var(--green);background:var(--green-g)}
.v-i.bad{color:var(--red);border-color:var(--red);background:var(--red-g)}

.v-t{font-family:var(--px);font-size:13px;letter-spacing:2px;text-transform:uppercase}

.right-ans{
    width:100%;padding:10px 14px;border-radius:4px;
    background:var(--green-g);border:1px solid rgba(52,232,14,0.2);
    font-family:var(--mono);font-size:15px;color:var(--green);
    margin-bottom:14px;display:none;
}

.exp-card{
    width:100%;padding:20px 22px;border-radius:6px;
    background:linear-gradient(135deg, rgba(0,232,255,0.03) 0%, var(--bg2) 60%);
    border:1px solid var(--brd);border-left:3px solid var(--cyan);
    margin-bottom:28px;
    box-shadow:0 2px 16px rgba(0,0,0,0.3);
}
.exp-body{
    font-family:var(--px);font-size:15px;font-weight:500;
    line-height:1.7;color:var(--dim);
}

/* ═══════════════════════════════════════════════════════════════
   SUMMARY + DONE
   ═══════════════════════════════════════════════════════════════ */
.lbl{
    font-family:var(--mono);font-size:12px;
    color:var(--dim);letter-spacing:5px;padding-top:24px;
    text-transform:uppercase;text-align:center;
    width:100%;
}
.big-score{
    font-family:var(--px);font-size:64px;font-weight:700;
    color:var(--cyan);
    letter-spacing:-1px;
    text-shadow:0 0 20px rgba(0,232,255,0.5), 0 0 50px rgba(0,232,255,0.2);
    padding:14px 0 20px;
}
.grid{display:flex;gap:8px;justify-content:center;margin-bottom:24px}
.gp{
    width:40px;height:40px;border:2px solid;border-radius:4px;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--px);font-size:11px;
}
.gp.ok{color:var(--green);border-color:var(--green);background:var(--green-g)}
.gp.bad{color:var(--red);border-color:var(--red);background:var(--red-g)}

.str-big{
    display:flex;align-items:center;justify-content:center;
    gap:10px;margin-bottom:24px;
    font-family:var(--mono);font-size:13px;
    color:var(--yel);letter-spacing:1px;
}

/* Share — 44px min touch target */
.btn-share{
    font-family:var(--mono);font-size:13px;
    color:var(--tx);background:var(--bg2);
    border:1px solid var(--brd);padding:14px 28px;
    min-height:44px;border-radius:4px;
    cursor:pointer;letter-spacing:2px;transition:all .15s;
    text-transform:uppercase;
}
@media(hover:hover){
    .btn-share:hover{border-color:rgba(0,232,255,0.3);color:var(--cyan)}
}
.btn-share:active{border-color:rgba(0,232,255,0.3);color:var(--cyan)}
.toast{
    font-family:var(--mono);font-size:11px;
    color:var(--green);opacity:0;height:18px;
    margin-top:6px;transition:opacity .3s;
}
.toast.show{opacity:1}

/* Countdown */
.cd-box{
    display:flex;flex-direction:column;align-items:center;
    gap:8px;padding:22px;margin-top:24px;
    background:var(--bg2);border:1px solid var(--brd);width:100%;
    border-radius:4px;
}
.cd-lbl{font-family:var(--mono);font-size:11px;color:var(--dark);letter-spacing:3px;text-transform:uppercase}
.cd-val{
    font-family:var(--px);font-size:28px;font-weight:700;
    color:var(--cyan);text-shadow:0 0 15px rgba(0,232,255,0.12);
    letter-spacing:2px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media(min-width:480px){
    :root{--tile:54px}
}
/* Results divider */
.results-divider{
    width:100%;height:1px;
    background:linear-gradient(90deg,transparent,var(--brd) 20%,var(--brd) 80%,transparent);
    margin:8px 0 16px;
}
/* Short viewports (iPhone SE, landscape) — compact question screen */
@media(max-height:700px){
    .clock{width:80px;height:80px;margin-bottom:12px}
    .clock-sec{font-size:20px}
    .q-text{font-size:18px;padding-bottom:14px}
    .opt{padding:10px 14px;font-size:17px}
    .tile-row{padding:10px 0 6px}
}
@media(max-width:360px){
    :root{--tile:40px;--gap:10px}
    .big-title{font-size:32px}
    .sub-title{font-size:11px;letter-spacing:3px}
    .q-text{font-size:18px}
    .clock{width:85px;height:85px}
    .clock-sec{font-size:26px}
    .opt{font-size:17px;padding:12px 14px}
    .lvl-btn{font-size:12px;padding:10px 6px}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@supports(padding-top:env(safe-area-inset-top)){
    #app{
        padding-top:env(safe-area-inset-top);
        padding-bottom:env(safe-area-inset-bottom);
    }
}

/* ═══════════════════════════════════════════════════════════════
   RANK BADGE
   ═══════════════════════════════════════════════════════════════ */
.rank-badge{
    display:flex;flex-direction:column;align-items:center;
    gap:6px;margin:22px 0 14px;
}
.rank-pct{
    font-family:var(--px);font-size:28px;font-weight:700;
    letter-spacing:0;
    color:var(--yel);
    text-shadow:0 0 16px rgba(255,217,0,0.2);
}
.rank-lbl{
    font-family:var(--mono);font-size:11px;
    color:var(--dark);letter-spacing:3px;text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.site-footer{
    display:flex;align-items:center;justify-content:center;
    gap:10px;padding:36px 0 8px;
    font-family:var(--mono);font-size:12px;
}
.site-footer a{color:var(--dark);text-decoration:none;transition:color .15s}
.site-footer a:hover{color:var(--dim)}
.foot-dot{color:var(--brd)}
.foot-copy{color:var(--dark)}

/* ═══════════════════════════════════════════════════════════════
   AUTH BUTTON + MODAL
   ═══════════════════════════════════════════════════════════════ */
.hud-auth{
    width:30px;height:30px;border-radius:50%;
    border:1px solid var(--brd);background:var(--bg2);
    color:var(--dim);font-size:12px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .15s;flex-shrink:0;
    font-family:var(--px);font-weight:700;
}
@media(hover:hover){.hud-auth:hover{border-color:var(--cyan);color:var(--cyan)}}
.hud-auth.signed-in{border-color:var(--green);color:var(--green);background:rgba(52,232,14,0.06)}

.auth-overlay{
    position:fixed;inset:0;background:rgba(5,5,16,0.94);
    z-index:9100;display:flex;align-items:center;justify-content:center;
    padding:16px;opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.auth-overlay.on{opacity:1;pointer-events:auto}

.auth-modal{
    width:100%;max-width:360px;background:var(--bg2);
    border:1px solid var(--brd);border-radius:8px;
    padding:32px 28px 24px;display:flex;flex-direction:column;align-items:center;
    position:relative;animation:fadeIn .3s ease;
}
.auth-close{
    position:absolute;top:12px;right:14px;
    background:none;border:none;color:var(--dark);
    font-size:22px;cursor:pointer;padding:4px;
    transition:color .15s;line-height:1;
}
@media(hover:hover){.auth-close:hover{color:var(--tx)}}
.auth-icon{font-size:36px;margin-bottom:8px}
.auth-title{
    font-family:var(--px);font-size:14px;font-weight:700;
    color:var(--cyan);letter-spacing:3px;margin-bottom:8px;
}
.auth-desc{
    font-family:var(--mono);font-size:13px;color:var(--dim);
    text-align:center;line-height:1.5;margin-bottom:20px;
}
.auth-input{
    width:100%;padding:14px 16px;
    font-family:var(--mono);font-size:15px;
    background:var(--bg);border:1px solid var(--brd);
    color:var(--tx);border-radius:6px;
    margin-bottom:12px;transition:border-color .15s;
}
.auth-input:focus{outline:none;border-color:var(--cyan)}
.auth-input::placeholder{color:var(--dark)}
.auth-submit{
    width:100%;font-family:var(--px);font-size:13px;font-weight:700;
    color:var(--bg);background:var(--cyan);
    border:none;padding:14px;border-radius:6px;
    cursor:pointer;letter-spacing:1px;
    box-shadow:0 3px 0 #009aab;transition:all .15s;
}
@media(hover:hover){.auth-submit:hover{transform:translateY(-2px);box-shadow:0 6px 0 #009aab}}
.auth-submit:active{transform:translateY(2px);box-shadow:0 1px 0 #009aab}
.auth-submit:disabled{opacity:.4;cursor:default;transform:none}
.auth-status{
    font-family:var(--mono);font-size:12px;color:var(--dim);
    text-align:center;margin-top:12px;min-height:18px;letter-spacing:0.5px;
}
.auth-user-badge{
    display:flex;align-items:center;gap:10px;
    margin-bottom:12px;
}
.auth-user-icon{color:var(--green);font-size:18px}
.auth-user-email{font-family:var(--mono);font-size:14px;color:var(--tx)}
.auth-user-tier{
    font-family:var(--mono);font-size:12px;color:var(--dim);
    letter-spacing:2px;margin-bottom:18px;
    padding:4px 12px;border:1px solid var(--brd);border-radius:3px;
}
.auth-user-tier.challenger{color:var(--purp);border-color:rgba(168,85,247,0.3)}
.auth-signout{
    font-family:var(--mono);font-size:11px;color:var(--dark);
    background:none;border:1px solid var(--brd);border-radius:4px;
    padding:8px 20px;cursor:pointer;letter-spacing:2px;transition:all .15s;
}
@media(hover:hover){.auth-signout:hover{color:var(--red);border-color:rgba(255,40,80,0.3)}}

/* ═══════════════════════════════════════════════════════════════
   UPGRADE CTA + MODAL
   ═══════════════════════════════════════════════════════════════ */

/* ── CTA Banner ── */
.upgrade-cta{
    width:100%;
    font-family:var(--mono);font-size:12px;
    color:var(--purp);background:rgba(168,85,247,0.04);
    border:1px solid rgba(168,85,247,0.3);padding:14px 16px;
    cursor:pointer;letter-spacing:2px;
    margin-top:14px;border-radius:4px;
    transition:all .15s;text-transform:uppercase;
}
@media(hover:hover){
    .upgrade-cta:hover{
        background:rgba(168,85,247,0.08);
        border-color:rgba(168,85,247,0.5);
    }
}
.upgrade-cta:active{
    background:rgba(168,85,247,0.08);
    border-color:rgba(168,85,247,0.5);
}

/* ── Modal Overlay ── */
.upgrade-overlay{
    position:fixed;inset:0;
    background:rgba(5,5,16,0.94);
    z-index:9000;
    display:flex;align-items:center;justify-content:center;
    padding:16px;
    opacity:0;pointer-events:none;
    transition:opacity .25s ease;
}
.upgrade-overlay.on{opacity:1;pointer-events:auto}

/* ── Modal Card ── */
.upgrade-modal{
    width:100%;max-width:380px;
    background:var(--bg2);
    border:1px solid rgba(168,85,247,0.3);
    border-radius:8px;
    padding:32px 28px 24px;
    display:flex;flex-direction:column;align-items:center;
    animation:fadeIn .3s ease;
}
.upgrade-tier-label{
    font-family:var(--px);font-size:12px;font-weight:700;
    color:var(--purp);letter-spacing:2px;
    margin-bottom:12px;
    border:1px solid rgba(168,85,247,0.3);
    border-radius:20px;padding:6px 18px;
}
.upgrade-price{
    font-family:var(--px);font-size:36px;
    color:var(--tx);line-height:1;
    margin-bottom:4px;
}
.upgrade-per{
    font-family:var(--mono);font-size:13px;
    color:var(--dim);
}
.upgrade-hook{
    font-family:var(--mono);font-size:13px;
    color:var(--dark);margin-bottom:26px;
    padding-bottom:20px;
    border-bottom:1px solid var(--brd);
    width:100%;text-align:center;
}

/* ── Feature List ── */
.upgrade-features{
    list-style:none;width:100%;
    display:flex;flex-direction:column;gap:12px;
    margin-bottom:30px;padding:0;
}
.upgrade-features li{
    font-family:var(--px);font-size:14px;font-weight:500;
    color:var(--tx);display:flex;align-items:center;gap:12px;
    line-height:1.4;
}
.uf-i{
    width:24px;text-align:center;flex-shrink:0;
    font-size:16px;
}

/* ── Upgrade Button ── */
.upgrade-btn{
    width:100%;
    font-family:var(--px);font-size:14px;font-weight:700;
    color:var(--bg);background:var(--cyan);
    border:none;padding:16px 24px;border-radius:8px;
    cursor:pointer;letter-spacing:1px;
    box-shadow:0 3px 0 #009aab;
    transition:all .15s;
}
@media(hover:hover){
    .upgrade-btn:hover{
        transform:translateY(-2px);
        box-shadow:0 6px 0 #009aab;
    }
}
.upgrade-btn:active{
    transform:translateY(2px);
    box-shadow:0 1px 0 #009aab;
}
.upgrade-btn:disabled{
    opacity:.4;cursor:default;transform:none;
    box-shadow:0 4px 0 #009aab;
}

/* ── Waitlist message ── */
.upgrade-msg{
    display:none;
    font-family:var(--mono);font-size:11px;
    color:var(--cyan);letter-spacing:1px;
    margin-top:12px;text-align:center;
}

/* ── Dismiss ── */
.upgrade-dismiss{
    font-family:var(--mono);font-size:11px;
    color:var(--dark);background:none;border:none;
    cursor:pointer;margin-top:16px;padding:8px;
    transition:color .15s;text-transform:uppercase;
    letter-spacing:2px;
}
@media(hover:hover){
    .upgrade-dismiss:hover{color:var(--dim)}
}
.upgrade-dismiss:active{color:var(--dim)}

/* ═══════════════════════════════════════════════════════════════
   WELCOME CHALLENGER SCREEN
   ═══════════════════════════════════════════════════════════════ */
.confetti-canvas{
    position:fixed;inset:0;
    width:100%;height:100%;
    pointer-events:none;z-index:9999;
}
.welcome-card{
    display:flex;flex-direction:column;align-items:center;
    max-width:380px;margin:0 auto;
    animation:fadeIn .5s ease;
}
.welcome-badge{
    font-size:64px;
    color:var(--yel);
    filter:drop-shadow(0 0 20px rgba(255,217,0,0.4));
    animation:pulse-glow 2s ease-in-out infinite;
    margin-bottom:16px;
}
@keyframes pulse-glow{
    0%,100%{filter:drop-shadow(0 0 20px rgba(255,217,0,0.3))}
    50%{filter:drop-shadow(0 0 40px rgba(255,217,0,0.6))}
}
.welcome-title{
    font-family:var(--px);font-size:22px;font-weight:700;
    color:var(--yel);letter-spacing:3px;
    margin-bottom:8px;text-align:center;
}
.welcome-sub{
    font-family:var(--mono);font-size:14px;
    color:var(--dim);margin-bottom:28px;
}
.welcome-unlocks{
    list-style:none;width:100%;
    display:flex;flex-direction:column;gap:10px;
    margin-bottom:32px;padding:0;
}
.welcome-unlocks li{
    font-family:var(--mono);font-size:14px;
    color:var(--tx);display:flex;align-items:center;gap:12px;
}

/* ═══════════════════════════════════════════════════════════════
   UPGRADE PRICE (i18n single-line)
   ═══════════════════════════════════════════════════════════════ */
.upgrade-price-wrap{
    font-family:var(--px);font-size:20px;font-weight:700;
    color:var(--tx);line-height:1.4;
    margin-bottom:4px;padding-bottom:4px;
    text-align:center;
}

/* ═══════════════════════════════════════════════════════════════
   LANGUAGE SELECTOR
   ═══════════════════════════════════════════════════════════════ */
.hud-lang{flex-shrink:0}
.lang-selector{
    font-family:var(--mono);font-size:11px;
    color:var(--dim);background:var(--bg2);
    border:1px solid var(--brd);border-radius:3px;
    padding:4px 6px;cursor:pointer;
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238888a8'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 6px center;
    padding-right:18px;
    transition:border-color .15s;
    text-transform:uppercase;letter-spacing:1px;
}
.lang-selector:focus{outline:1px solid var(--cyan);border-color:var(--cyan)}
@media(hover:hover){.lang-selector:hover{border-color:var(--dim)}}

/* ═══════════════════════════════════════════════════════════════
   RTL SUPPORT (Arabic)
   ═══════════════════════════════════════════════════════════════ */
[dir="rtl"] .hud{flex-direction:row-reverse}
[dir="rtl"] .q-bar{flex-direction:row-reverse}
[dir="rtl"] .q-text{text-align:right;direction:rtl}
[dir="rtl"] .opt{flex-direction:row-reverse;text-align:right}
[dir="rtl"] .ok-k{order:1}
[dir="rtl"] .exp-card{border-left:none;border-right:3px solid var(--cyan)}
[dir="rtl"] .site-footer{flex-direction:row-reverse}
[dir="rtl"] .str-big{flex-direction:row-reverse}
[dir="rtl"] .rank-badge{direction:rtl}
[dir="rtl"] .cd-box{direction:rtl}
[dir="rtl"] .upgrade-features li{flex-direction:row-reverse;text-align:right}
[dir="rtl"] .uf-i{order:1}
[dir="rtl"] .lang-selector{
    background-position:left 6px center;
    padding-right:6px;padding-left:18px;
}
[dir="rtl"] .level-pick{flex-direction:row-reverse}
[dir="rtl"] .big-title{text-align:center;direction:rtl}
[dir="rtl"] .sub-title{direction:rtl}
[dir="rtl"] .desc{direction:rtl}
[dir="rtl"] .btn-go{direction:rtl}
[dir="rtl"] .tile-row{direction:ltr}
[dir="rtl"] .grid{direction:ltr}

/* ═══════════════════════════════════════════════════════════════
   CJK / NON-LATIN SCRIPT OVERRIDES
   Full coverage: titles, subtitles, buttons, tiers, labels, etc.
   ═══════════════════════════════════════════════════════════════ */
[data-script="cjk-jp"] .big-title,
[data-script="cjk-jp"] .sub-title,
[data-script="cjk-jp"] .desc,
[data-script="cjk-jp"] .btn-go,
[data-script="cjk-jp"] .lvl-btn,
[data-script="cjk-jp"] .q-text,
[data-script="cjk-jp"] .opt,
[data-script="cjk-jp"] .exp-body,
[data-script="cjk-jp"] .btn-share,
[data-script="cjk-jp"] .lbl,
[data-script="cjk-jp"] .str-big,
[data-script="cjk-jp"] .cd-lbl,
[data-script="cjk-jp"] .rank-lbl,
[data-script="cjk-jp"] .upgrade-hook,
[data-script="cjk-jp"] .upgrade-features li,
[data-script="cjk-jp"] .upgrade-btn,
[data-script="cjk-jp"] .upgrade-dismiss,
[data-script="cjk-jp"] .upgrade-price-wrap,
[data-script="cjk-jp"] .right-ans,
[data-script="cjk-jp"] .v-t,
[data-script="cjk-jp"] .q-tier{font-family:'Noto Sans JP',var(--mono),sans-serif}

[data-script="cjk-kr"] .big-title,
[data-script="cjk-kr"] .sub-title,
[data-script="cjk-kr"] .desc,
[data-script="cjk-kr"] .btn-go,
[data-script="cjk-kr"] .lvl-btn,
[data-script="cjk-kr"] .q-text,
[data-script="cjk-kr"] .opt,
[data-script="cjk-kr"] .exp-body,
[data-script="cjk-kr"] .btn-share,
[data-script="cjk-kr"] .lbl,
[data-script="cjk-kr"] .str-big,
[data-script="cjk-kr"] .cd-lbl,
[data-script="cjk-kr"] .rank-lbl,
[data-script="cjk-kr"] .upgrade-hook,
[data-script="cjk-kr"] .upgrade-features li,
[data-script="cjk-kr"] .upgrade-btn,
[data-script="cjk-kr"] .upgrade-dismiss,
[data-script="cjk-kr"] .upgrade-price-wrap,
[data-script="cjk-kr"] .right-ans,
[data-script="cjk-kr"] .v-t,
[data-script="cjk-kr"] .q-tier{font-family:'Noto Sans KR',var(--mono),sans-serif}

[data-script="cjk-sc"] .big-title,
[data-script="cjk-sc"] .sub-title,
[data-script="cjk-sc"] .desc,
[data-script="cjk-sc"] .btn-go,
[data-script="cjk-sc"] .lvl-btn,
[data-script="cjk-sc"] .q-text,
[data-script="cjk-sc"] .opt,
[data-script="cjk-sc"] .exp-body,
[data-script="cjk-sc"] .btn-share,
[data-script="cjk-sc"] .lbl,
[data-script="cjk-sc"] .str-big,
[data-script="cjk-sc"] .cd-lbl,
[data-script="cjk-sc"] .rank-lbl,
[data-script="cjk-sc"] .upgrade-hook,
[data-script="cjk-sc"] .upgrade-features li,
[data-script="cjk-sc"] .upgrade-btn,
[data-script="cjk-sc"] .upgrade-dismiss,
[data-script="cjk-sc"] .upgrade-price-wrap,
[data-script="cjk-sc"] .right-ans,
[data-script="cjk-sc"] .v-t,
[data-script="cjk-sc"] .q-tier{font-family:'Noto Sans SC',var(--mono),sans-serif}

[data-script="arabic"] .big-title,
[data-script="arabic"] .sub-title,
[data-script="arabic"] .desc,
[data-script="arabic"] .btn-go,
[data-script="arabic"] .lvl-btn,
[data-script="arabic"] .q-text,
[data-script="arabic"] .opt,
[data-script="arabic"] .exp-body,
[data-script="arabic"] .btn-share,
[data-script="arabic"] .lbl,
[data-script="arabic"] .str-big,
[data-script="arabic"] .cd-lbl,
[data-script="arabic"] .rank-lbl,
[data-script="arabic"] .upgrade-hook,
[data-script="arabic"] .upgrade-features li,
[data-script="arabic"] .upgrade-btn,
[data-script="arabic"] .upgrade-dismiss,
[data-script="arabic"] .upgrade-price-wrap,
[data-script="arabic"] .right-ans,
[data-script="arabic"] .v-t,
[data-script="arabic"] .q-tier{font-family:'Noto Sans Arabic',var(--mono),sans-serif}

[data-script="devanagari"] .big-title,
[data-script="devanagari"] .sub-title,
[data-script="devanagari"] .desc,
[data-script="devanagari"] .btn-go,
[data-script="devanagari"] .lvl-btn,
[data-script="devanagari"] .q-text,
[data-script="devanagari"] .opt,
[data-script="devanagari"] .exp-body,
[data-script="devanagari"] .btn-share,
[data-script="devanagari"] .lbl,
[data-script="devanagari"] .str-big,
[data-script="devanagari"] .cd-lbl,
[data-script="devanagari"] .rank-lbl,
[data-script="devanagari"] .upgrade-hook,
[data-script="devanagari"] .upgrade-features li,
[data-script="devanagari"] .upgrade-btn,
[data-script="devanagari"] .upgrade-dismiss,
[data-script="devanagari"] .upgrade-price-wrap,
[data-script="devanagari"] .right-ans,
[data-script="devanagari"] .v-t,
[data-script="devanagari"] .q-tier{font-family:'Noto Sans Devanagari',var(--mono),sans-serif}

/* CJK: disable uppercase transform + reduce letter-spacing */
[data-script^="cjk"] .big-title,
[data-script^="cjk"] .sub-title,
[data-script^="cjk"] .btn-go,
[data-script^="cjk"] .lvl-btn,
[data-script^="cjk"] .lbl,
[data-script^="cjk"] .cd-lbl,
[data-script^="cjk"] .rank-lbl,
[data-script^="cjk"] .btn-share,
[data-script^="cjk"] .v-t,
[data-script^="cjk"] .q-tier,
[data-script="arabic"] .big-title,
[data-script="arabic"] .sub-title,
[data-script="arabic"] .btn-go,
[data-script="arabic"] .lvl-btn,
[data-script="arabic"] .lbl,
[data-script="arabic"] .cd-lbl,
[data-script="arabic"] .rank-lbl,
[data-script="arabic"] .btn-share,
[data-script="arabic"] .v-t,
[data-script="arabic"] .q-tier,
[data-script="devanagari"] .big-title,
[data-script="devanagari"] .sub-title,
[data-script="devanagari"] .btn-go,
[data-script="devanagari"] .lvl-btn,
[data-script="devanagari"] .lbl,
[data-script="devanagari"] .cd-lbl,
[data-script="devanagari"] .rank-lbl,
[data-script="devanagari"] .btn-share,
[data-script="devanagari"] .v-t,
[data-script="devanagari"] .q-tier{text-transform:none}

/* CJK: reduce letter-spacing (CJK chars are already wide) */
[data-script^="cjk"] .sub-title{letter-spacing:2px}
[data-script^="cjk"] .btn-go{letter-spacing:0}
[data-script^="cjk"] .lvl-btn{letter-spacing:0}

/* Arabic: reduce letter-spacing */
[data-script="arabic"] .sub-title{letter-spacing:2px}
[data-script="arabic"] .btn-go{letter-spacing:1px}

/* Hindi: reduce letter-spacing */
[data-script="devanagari"] .sub-title{letter-spacing:2px}
[data-script="devanagari"] .btn-go{letter-spacing:1px}

/* ═══════════════════════════════════════════════════════════════
   GAME MODES — SHARED STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ── Modes Menu ── */
.modes-header{
    width:100%;text-align:center;padding:24px 0 20px;
}
.modes-title{
    font-family:var(--px);font-size:28px;font-weight:700;
    color:var(--tx);letter-spacing:-0.5px;margin-bottom:6px;
}
.modes-sub{
    font-family:var(--mono);font-size:13px;color:var(--dim);
    letter-spacing:3px;text-transform:uppercase;
}
.modes-xp-bar{
    display:flex;align-items:center;justify-content:center;
    gap:10px;margin-top:14px;
}
.modes-xp-label{
    font-family:var(--mono);font-size:11px;color:var(--dark);letter-spacing:2px;
}
.modes-xp-val{
    font-family:var(--px);font-size:16px;font-weight:700;color:var(--yel);
}
.modes-xp-badge{
    font-family:var(--px);font-size:11px;font-weight:700;
    color:var(--purp);letter-spacing:1px;
    background:rgba(168,85,247,0.1);padding:4px 10px;border-radius:12px;
}

.modes-grid{
    display:flex;flex-direction:column;gap:10px;
    width:100%;margin-bottom:20px;
}

/* ── Mode Card ── */
.mode-card{
    width:100%;padding:16px 18px;
    background:var(--bg2);border:1px solid var(--brd);
    display:flex;align-items:center;gap:14px;
    cursor:pointer;transition:all .2s;border-radius:8px;
    text-align:left;color:var(--tx);
    font-family:var(--px);
}
@media(hover:hover){
    .mode-card:hover{
        border-color:var(--mc,var(--cyan));
        background:rgba(0,232,255,0.03);
    }
}
.mode-card:active{
    border-color:var(--mc,var(--cyan));
    background:rgba(0,232,255,0.03);
}
.mode-card.locked{opacity:0.55}
.mode-card.locked:hover{border-color:var(--brd);background:var(--bg2)}

.mode-icon{font-size:28px;flex-shrink:0}
.mode-info{flex:1;min-width:0}
.mode-name{
    font-size:15px;font-weight:700;color:var(--tx);
    display:flex;align-items:center;gap:6px;
}
.mode-lock{font-size:12px;opacity:0.7}
.mode-desc{
    font-family:var(--mono);font-size:12px;color:var(--dim);
    margin-top:3px;
}
.mode-limit{
    font-family:var(--mono);font-size:10px;color:var(--yel);
    letter-spacing:1px;margin-top:4px;text-transform:uppercase;
}
.mode-free{
    font-family:var(--mono);font-size:10px;color:var(--green);
    letter-spacing:1px;margin-top:4px;text-transform:uppercase;
}

/* ── Modes Buttons ── */
.btn-modes{
    width:100%;max-width:340px;
    font-family:var(--px);font-size:14px;font-weight:700;
    color:var(--dim);background:var(--bg2);
    border:1px solid var(--brd);padding:14px 20px;
    cursor:pointer;letter-spacing:1px;border-radius:8px;
    transition:all .15s;margin-top:14px;
    text-align:center;
}
@media(hover:hover){
    .btn-modes:hover{
        border-color:rgba(0,232,255,0.3);color:var(--cyan);
    }
}
.btn-modes:active{border-color:rgba(0,232,255,0.3);color:var(--cyan)}

.modes-back{
    font-family:var(--mono);font-size:12px;color:var(--dark);
    background:none;border:none;cursor:pointer;
    padding:12px 20px;margin-top:16px;
    transition:color .15s;letter-spacing:1px;
}
@media(hover:hover){.modes-back:hover{color:var(--dim)}}

.modes-upgrade{
    width:100%;display:flex;align-items:center;gap:12px;
    padding:14px 16px;background:rgba(168,85,247,0.04);
    border:1px solid rgba(168,85,247,0.2);border-radius:8px;
    cursor:pointer;transition:all .2s;margin-bottom:8px;
    font-family:var(--px);color:var(--tx);
}
@media(hover:hover){
    .modes-upgrade:hover{
        background:rgba(168,85,247,0.08);border-color:rgba(168,85,247,0.4);
    }
}
.modes-upgrade-badge{
    font-family:var(--px);font-size:11px;font-weight:700;
    color:var(--purp);letter-spacing:1px;
    background:rgba(168,85,247,0.1);padding:4px 10px;border-radius:12px;
    white-space:nowrap;flex-shrink:0;
}
.modes-upgrade-text{
    font-family:var(--px);font-size:13px;font-weight:500;
    color:var(--dim);flex:1;
}

/* ═══ BLITZ MODE ═══ */
.blitz-hero-icon{
    font-size:56px;margin-bottom:8px;
    filter:drop-shadow(0 0 20px rgba(255,217,0,0.15));
}
.blitz-ring{stroke:var(--yel);filter:drop-shadow(0 0 6px rgba(255,217,0,0.3))}
.blitz-sec{color:var(--yel);text-shadow:0 0 12px rgba(255,217,0,0.15)}
.blitz-best{
    font-family:var(--mono);font-size:13px;color:var(--dim);
    margin-bottom:20px;display:none;
}
.blitz-share-grid{
    display:flex;gap:6px;justify-content:center;
    flex-wrap:wrap;margin-bottom:24px;
}
.blitz-stats{
    display:flex;gap:24px;justify-content:center;
    margin-bottom:20px;
}
.blitz-stat{
    display:flex;flex-direction:column;align-items:center;gap:4px;
}
.blitz-stat-val{
    font-family:var(--px);font-size:24px;font-weight:700;color:var(--tx);
}
.blitz-stat-lbl{
    font-family:var(--mono);font-size:10px;color:var(--dark);
    letter-spacing:2px;text-transform:uppercase;
}
.blitz-exp-hint{
    font-family:var(--px);font-size:14px;color:var(--dim);
    line-height:1.6;margin-bottom:24px;padding:0 8px;
    max-height:120px;overflow-y:auto;
}

/* ═══ PROMPT GOLF ═══ */
.golf-courses{
    display:flex;flex-direction:column;gap:10px;
    width:100%;margin:20px 0;
}
.golf-header{
    width:100%;display:flex;align-items:center;
    justify-content:space-between;padding:4px 0 18px;
}
.golf-hole-num{
    font-family:var(--mono);font-size:13px;color:var(--green);letter-spacing:2px;
}
.golf-par{
    font-family:var(--mono);font-size:13px;color:var(--dim);letter-spacing:2px;
}
.golf-target-card{
    width:100%;padding:20px 22px;border-radius:6px;
    background:linear-gradient(135deg, rgba(52,232,14,0.03) 0%, var(--bg2) 60%);
    border:1px solid var(--brd);border-left:3px solid var(--green);
    margin-bottom:14px;
}
.golf-target-label{
    font-family:var(--mono);font-size:10px;color:var(--green);
    letter-spacing:3px;margin-bottom:8px;text-transform:uppercase;
}
.golf-target-text{
    font-family:var(--px);font-size:15px;font-weight:500;
    color:var(--tx);line-height:1.6;
}
.golf-hint{
    font-family:var(--mono);font-size:12px;color:var(--dim);
    margin-bottom:16px;
}
.golf-input{
    width:100%;padding:14px 16px;
    font-family:var(--mono);font-size:14px;
    background:var(--bg);border:1px solid var(--brd);
    color:var(--tx);border-radius:6px;resize:vertical;
    margin-bottom:8px;transition:border-color .15s;
    min-height:80px;
}
.golf-input:focus{outline:none;border-color:var(--green)}
.golf-input::placeholder{color:var(--dark)}
.golf-token-count{
    font-family:var(--mono);font-size:12px;color:var(--dim);
    text-align:right;margin-bottom:18px;
}
.golf-result-card{
    display:flex;flex-direction:column;align-items:center;
    padding:30px 20px;margin:20px 0;
}
.golf-result-icon{font-size:56px;margin-bottom:12px}
.golf-result-score{
    font-family:var(--px);font-size:24px;font-weight:700;
    color:var(--tx);letter-spacing:1px;margin-bottom:6px;
}
.golf-result-tokens{
    font-family:var(--mono);font-size:14px;color:var(--dim);margin-bottom:4px;
}
.golf-result-vs-par{
    font-family:var(--px);font-size:20px;font-weight:700;
}

/* Golf Scorecard */
.golf-scorecard{
    width:100%;margin:16px 0;
}
.golf-card-row{
    display:grid;grid-template-columns:1fr 1fr 1fr 1fr;
    padding:10px 0;border-bottom:1px solid var(--brd);
    font-family:var(--mono);font-size:13px;color:var(--tx);
    text-align:center;
}
.golf-card-header{
    color:var(--dark);font-size:11px;letter-spacing:1px;
}
.golf-total{
    display:flex;align-items:center;justify-content:center;
    gap:12px;margin:16px 0 20px;
}
.golf-total-label{
    font-family:var(--mono);font-size:11px;color:var(--dark);letter-spacing:2px;
}
.golf-total-val{
    font-family:var(--px);font-size:20px;font-weight:700;color:var(--tx);
}
.golf-total-par{
    font-family:var(--px);font-size:18px;font-weight:700;
}

/* ═══ PARTY MODE ═══ */
.party-actions{
    display:flex;flex-direction:column;align-items:center;
    gap:16px;width:100%;max-width:340px;margin:24px 0;
}
.party-or{
    font-family:var(--mono);font-size:12px;color:var(--dark);letter-spacing:3px;
}
.party-join-row{
    display:flex;gap:10px;width:100%;
}
.party-code-input{
    flex:1;padding:14px 16px;
    font-family:var(--mono);font-size:18px;
    background:var(--bg);border:1px solid var(--brd);
    color:var(--tx);border-radius:6px;text-align:center;
    letter-spacing:4px;text-transform:uppercase;
    transition:border-color .15s;
}
.party-code-input:focus{outline:none;border-color:var(--pink)}
.party-code-input::placeholder{color:var(--dark);font-size:12px;letter-spacing:1px}
.party-join-btn{
    padding:14px 20px;font-size:13px;
    background:var(--pink);box-shadow:0 3px 0 #b3206a;
}

/* Room display */
.party-room-header{
    display:flex;align-items:center;justify-content:center;
    gap:12px;padding:24px 0 16px;width:100%;
}
.party-room-code{
    font-family:var(--mono);font-size:20px;font-weight:700;
    color:var(--pink);letter-spacing:4px;
    text-shadow:0 0 20px rgba(255,45,138,0.3);
}
.party-copy-btn{
    font-family:var(--mono);font-size:11px;color:var(--dim);
    background:var(--bg2);border:1px solid var(--brd);
    padding:6px 12px;border-radius:4px;cursor:pointer;
    transition:all .15s;
}
@media(hover:hover){.party-copy-btn:hover{color:var(--tx);border-color:var(--dim)}}

/* Players list */
.party-players-list{
    display:flex;flex-wrap:wrap;gap:8px;
    justify-content:center;width:100%;margin-bottom:16px;
}
.party-player{
    display:flex;align-items:center;gap:6px;
    padding:6px 12px;background:var(--bg2);
    border:1px solid var(--brd);border-radius:20px;
    font-family:var(--mono);font-size:12px;color:var(--dim);
}
.party-player-you{
    border-color:var(--pink);color:var(--pink);
    background:rgba(255,45,138,0.06);
}
.party-player-avatar{font-size:14px}
.party-player-more{
    font-family:var(--mono);font-size:11px;color:var(--dark);
    padding:6px 12px;
}
.party-player-count{
    font-family:var(--mono);font-size:12px;color:var(--dim);
    margin-bottom:20px;
}

/* Leaderboard */
.party-leaderboard{
    width:100%;max-width:380px;margin:16px auto;
}
.party-lb-row{
    display:flex;align-items:center;gap:12px;
    padding:10px 14px;border-bottom:1px solid var(--brd);
    font-family:var(--mono);font-size:13px;
}
.party-lb-you{
    background:rgba(255,45,138,0.04);
    border:1px solid rgba(255,45,138,0.2);
    border-radius:4px;
}
.party-lb-rank{
    width:36px;color:var(--dim);flex-shrink:0;
}
.party-lb-name{flex:1;color:var(--tx);min-width:0;overflow:hidden;text-overflow:ellipsis}
.party-lb-score{color:var(--dim);flex-shrink:0}

/* Podium */
.party-podium{margin:16px 0 24px;width:100%}
.party-podium-row{
    display:flex;justify-content:center;gap:16px;
}
.party-podium-entry{
    display:flex;flex-direction:column;align-items:center;
    padding:16px 14px;background:var(--bg2);
    border:1px solid var(--brd);border-radius:8px;
    min-width:90px;
}
.party-podium-you{
    border-color:rgba(255,45,138,0.3);
    background:rgba(255,45,138,0.04);
}
.party-podium-medal{font-size:32px;margin-bottom:6px}
.party-podium-name{
    font-family:var(--mono);font-size:11px;color:var(--tx);
    max-width:80px;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;
}
.party-podium-score{
    font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:4px;
}
.party-countdown{
    font-family:var(--mono);font-size:12px;color:var(--dark);
    margin-bottom:16px;
}

/* ═══ DEEP DIVE ═══ */
.dive-themes{
    display:flex;flex-direction:column;gap:10px;
    width:100%;margin:20px 0;
}

/* Narrative card */
.dive-narr-card{
    display:flex;flex-direction:column;align-items:center;
    padding:30px 24px;margin:24px 0;
    background:var(--bg2);border:1px solid var(--brd);
    border-radius:8px;width:100%;
}
.dive-narr-icon{font-size:48px;margin-bottom:12px}
.dive-narr-theme{
    font-family:var(--mono);font-size:12px;color:var(--purp);
    letter-spacing:3px;margin-bottom:16px;text-transform:uppercase;
}
.dive-narr-text{
    font-family:var(--px);font-size:15px;font-weight:500;
    color:var(--dim);line-height:1.7;text-align:center;
    max-width:360px;
}
.dive-narr-progress{
    font-family:var(--mono);font-size:11px;color:var(--dark);
    margin-top:16px;letter-spacing:1px;
}

/* Progress bar */
.dive-progress-bar{
    width:100%;height:3px;background:var(--brd);
    border-radius:2px;margin-bottom:8px;
}
.dive-progress-fill{
    height:100%;background:var(--purp);border-radius:2px;
    transition:width .3s ease;width:0%;
}

/* Summary theme */
.dive-sum-theme{
    display:flex;flex-direction:column;align-items:center;
    padding:20px 0 0;
}

/* Brain grid */
.dive-brain-grid{
    display:flex;gap:10px;justify-content:center;margin-bottom:24px;
}
.dive-brain{font-size:28px;opacity:0.2;transition:opacity .3s}
.dive-brain-lit{opacity:1}