/* ═══════════════════════════════════════════════════════════════════
   SCOREBORN — quiet exterior, loud payoff.
   The surface whispers (9–11px letterspaced mono). Exactly one element
   screams per view. One accent — signal #FF3B00 — rationed to ≤2 small
   appearances per view. No gold. No serif. 2px corners. Withholding
   over ornament.
   Type discipline: three sizes per view — scream / whisper / ghost.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --base:#0C0C0D;           /* page — cool near-black, NOT warm */
  --surface:#111112;
  --surface2:#151516;
  --elev:#1A1A19;
  --line:#1A1A19;           /* hairlines — solid, not rgba white */
  --line-strong:#2A2A28;
  --text:#EDEBE6;           /* bone white — cool, not cream */
  --text2:#8A8884;
  --muted:#5A5A58;
  --ghost:#3B3B39;          /* faintest tier — fine print, watermarks */
  --signal:#FF3B00;         /* THE ONLY ACCENT. Rationed. */
  --rea:#FF8A5C; --pre:#7FD4FF; --mem:#B79CFF; --rcl:#6EA8FF; --spd:#FF6E9C; --log:#C6FF3E;
  --good:#C6FF3E; --bad:#FF3B00;
  --sans:'Archivo',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r-card:2px; --r-btn:2px;
  --cta:var(--text); --cta-ink:var(--base); --wm:#0F0F10; --nav-bg:rgba(12,12,13,.86);
}
/* ── THEME B: Ivory Performance — light, premium, approachable ── */
body[data-theme="ivory"]{
  --base:#F2EFE8; --surface:#FBFAF6; --surface2:#E9E5DB; --elev:#FFFFFF;
  --line:#DDD8CC; --line-strong:#C4BEB0;
  --text:#161511; --text2:#55524A; --muted:#8A857A; --ghost:#A9A499;
  --rea:#D96A1E; --pre:#4A7A96; --mem:#7C4FD8; --rcl:#2E62C8; --spd:#D8385E; --log:#3E8E4E;
  --good:#3E8E4E; --bad:#D8380E;
  --cta:#161511; --cta-ink:#F2EFE8; --wm:#E9E5DB; --nav-bg:rgba(242,239,232,.88);
}
/* ── THEME C: Electric Hybrid — deep navy lobby, bright doors ── */
body[data-theme="hybrid"]{
  --base:#0D1120; --surface:#141A2E; --surface2:#1A2138; --elev:#202A48;
  --line:#1E2740; --line-strong:#2E3A5C;
  --text:#F2F4FA; --text2:#9AA3BC; --muted:#66708E; --ghost:#454E68;
  --cta:#FF4D1F; --cta-ink:#FFFFFF; --wm:#101527; --nav-bg:rgba(13,17,32,.88);
}
/* ── THEME D: Bright Competitive Arena — cool white, playful, app-like ── */
body[data-theme="bright"]{
  --base:#F4F6FA; --surface:#FFFFFF; --surface2:#E9EEF6; --elev:#FFFFFF;
  --line:#DFE5EF; --line-strong:#C2CCDC;
  --text:#10131C; --text2:#4C5568; --muted:#7B8496; --ghost:#A2AAB8;
  --rea:#E8641E; --pre:#2E7FA8; --mem:#7C4FD8; --rcl:#2E62C8; --spd:#E0335E; --log:#2F9E50;
  --good:#2F9E50; --bad:#E03A10;
  --cta:#FF4D1F; --cta-ink:#FFFFFF; --wm:#EAEFF7; --nav-bg:rgba(244,246,250,.9);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--base);color:var(--text);font-family:var(--mono);font-size:11px;
     line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:var(--mono);cursor:pointer}
:focus-visible{outline:1px solid var(--text2);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.hidden{display:none!important}

/* ── the voices: scream / speak / whisper / ghost ── */
.scream{font-family:var(--sans);font-weight:600;font-size:clamp(64px,14vw,120px);
        letter-spacing:-.03em;line-height:.95;color:var(--text);font-variant-numeric:tabular-nums}
.h1{font-family:var(--sans);font-weight:600;font-size:clamp(40px,5.4vw,72px);
    letter-spacing:-.03em;line-height:1.02;color:var(--text);text-wrap:balance}
.h2{font-family:var(--sans);font-weight:600;font-size:clamp(24px,3vw,34px);
    letter-spacing:-.02em;line-height:1.15;color:var(--text)}
.lede{font-family:var(--sans);font-size:clamp(15px,1.5vw,17px);color:var(--text2);
      line-height:1.7;text-transform:none;letter-spacing:0}
.body-t{font-family:var(--sans);font-size:14.5px;color:var(--text2);line-height:1.65;
        text-transform:none;letter-spacing:0}
.whisper{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.whisper-t{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text)}
.whisper-2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text2)}
.ghost-t{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6A6660;line-height:1.8}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--signal);
     vertical-align:middle;margin-right:10px}
.sig{color:var(--signal)}

/* ── top bar: wordmark · clear nav · record status ── */
#tbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;
      align-items:center;gap:18px;padding:0 28px;height:60px;
      background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
#tbar .wm{font-size:11px;letter-spacing:.28em;color:var(--text);cursor:pointer;text-transform:uppercase;white-space:nowrap}
#tbar nav{display:flex;gap:4px;flex:1;justify-content:center}
#tbar nav button{background:none;border:none;font-size:11px;letter-spacing:.16em;white-space:nowrap;
                 text-transform:uppercase;color:var(--muted);padding:8px 13px;border-radius:2px;transition:color .15s}
#tbar nav button:hover{color:var(--text)}
#tbar nav button.on{color:var(--text)}
#tbar .rec{font-size:10px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;
           cursor:pointer;border:1px solid var(--line-strong);border-radius:2px;padding:8px 14px;
           background:none;white-space:nowrap;transition:color .15s,border-color .15s}
#tbar .rec:hover{color:var(--text);border-color:var(--text2)}
main{padding-top:60px}

/* ── homepage ── */
#homeHero{position:relative;overflow:hidden}
#homeHero .hero2{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center;
                 min-height:calc(100vh - 60px);padding-top:56px;padding-bottom:90px;position:relative;z-index:1}
#watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
           font-family:var(--sans);font-weight:600;font-size:min(340px,52vw);color:var(--wm);
           pointer-events:none;user-select:none;line-height:1;z-index:0}
/* theme switcher — internal, for direction judging */
#themeSel{position:fixed;bottom:56px;right:18px;z-index:210;display:flex;gap:4px;
          background:var(--nav-bg);border:1px solid var(--line-strong);border-radius:2px;padding:4px}
#themeSel button{background:none;border:none;color:var(--muted);font-size:9px;letter-spacing:.1em;
                 padding:6px 10px;text-transform:uppercase}
#themeSel button.on{color:var(--text);background:var(--surface2)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-ctas .btn-lg{padding:17px 38px;font-size:12px}

/* ── ticker ── */
#ticker{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--line);
        display:flex;justify-content:center;gap:clamp(18px,2.6vw,38px);padding:13px 24px;flex-wrap:wrap;z-index:1}
#ticker span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
#ticker .live{color:var(--signal)}
#ticker .coord{color:var(--text2)}

/* micro-test (hero playable hook) */
.membercard.micro{cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.membercard.micro .mc-gpa{transition:color .15s}
.membercard.micro.armed{border-color:var(--signal)}
.micro-hint{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:10px}

/* category filter chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{background:none;border:1px solid var(--line);color:var(--text2);border-radius:2px;
      padding:8px 16px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:.15s}
.chip.on{border-color:var(--text2);color:var(--text)}
.chip:hover{color:var(--text)}

/* lobby featured cards */
.featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
          background:var(--line);border:1px solid var(--line);margin-bottom:40px}
.feat{background:var(--surface);padding:22px;display:flex;flex-direction:column;gap:10px}
.feat .f-cta{margin-top:auto}
.bests-strip{display:flex;gap:26px;flex-wrap:wrap;border:1px solid var(--line);border-radius:2px;
             background:var(--surface);padding:14px 20px;margin-bottom:40px}
.bests-strip span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bests-strip b{color:var(--text);font-weight:500}

/* nav account actions */
#navAcct{display:flex;gap:8px;align-items:center}
#navAcct .signin{background:none;border:none;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding:8px 10px;transition:color .15s}
#navAcct .signin:hover{color:var(--text)}

/* action lobby — doors, not links */
.lobby-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
            background:var(--line);border:1px solid var(--line)}
.door{background:var(--surface);border:none;padding:20px 18px;text-align:left;cursor:pointer;
      display:flex;flex-direction:column;gap:8px;transition:background .15s;min-height:104px}
.door:hover{background:var(--surface2)}
.door .d-k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.door .d-t{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--text)}
.door.primary{background:var(--cta)}
.door.primary .d-k{color:color-mix(in srgb,var(--cta-ink) 62%,transparent)}
.door.primary .d-t{color:var(--cta-ink)}
.door.primary:hover{filter:brightness(1.1)}

/* live pulse */
.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--signal);
       margin-right:8px;animation:pulseDot 1.6s ease infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}

/* status pressure line */
.pressure{border:1px solid var(--line);border-left:2px solid var(--signal);border-radius:2px;
          background:var(--surface);padding:13px 18px;font-size:11px;letter-spacing:.12em;
          text-transform:uppercase;color:var(--text2)}

/* pre-reveal */
.calc{animation:calcPulse 1s ease infinite alternate}
@keyframes calcPulse{from{opacity:.4}to{opacity:1}}

/* home sections */
.sec{padding:72px 0;border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
          flex-wrap:wrap;margin-bottom:26px}
.sec-link{background:none;border:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
          color:var(--muted);padding:0;transition:color .15s}
.sec-link:hover{color:var(--text)}
.daily-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
             border:1px solid var(--line);border-radius:2px;background:var(--surface);padding:22px 24px}
.prem{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
      border:1px solid var(--line);border-radius:2px;background:var(--surface);padding:18px 22px}
#stickyCta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
           padding:12px 18px calc(12px + env(safe-area-inset-bottom));
           background:rgba(12,12,13,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
body.testing #stickyCta{display:none!important}

/* ── shared page scaffold ── */
main{animation:pageIn .3s ease both;padding-bottom:80px}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.ph{margin:64px 0 40px}
.ph .whisper{display:block;margin-bottom:10px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:26px}
.rule{height:1px;background:var(--line)}
.tag{display:inline-block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
     border:1px solid var(--line-strong);border-radius:2px;padding:3px 9px;color:var(--muted)}
.tag-rec{color:var(--good);border-color:var(--good)}
.notice{border:1px solid var(--line);border-left:2px solid var(--line-strong);border-radius:2px;
        background:var(--surface);padding:14px 18px;color:var(--text2);font-size:10px;letter-spacing:.1em;text-transform:uppercase}

/* buttons beyond the hero */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);
     font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-radius:var(--r-btn);
     padding:14px 28px;border:1px solid var(--line-strong);background:transparent;color:var(--text);
     transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn-fill{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.btn-fill:hover{filter:brightness(1.12)}
.btn-block{width:100%}
.btn-sm{padding:10px 18px;font-size:10px}

/* ── test cards ── */
.testgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.testcard{--tint:var(--pre);background:var(--base);padding:24px 22px;display:flex;flex-direction:column;
          gap:12px;cursor:pointer;transition:background .18s;min-height:190px}
.testcard:hover{background:var(--surface)}
.testcard .tc-top{display:flex;justify-content:space-between;align-items:center}
.testcard .tc-glyph{width:40px;height:40px;border-radius:2px;display:flex;align-items:center;
  justify-content:center;font-size:16px;color:var(--tint);
  background:color-mix(in srgb,var(--tint) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--tint) 26%,transparent);transition:background .15s}
.testcard:hover .tc-glyph{background:color-mix(in srgb,var(--tint) 17%,transparent)}
.testcard{border-top:2px solid transparent}
.testcard:hover{border-top-color:var(--tint)}
.testcard .tc-name{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--text);letter-spacing:0}
.testcard .tc-domain{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tint);margin-top:5px}
.testcard .tc-desc{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--text2);flex:1;
                   text-transform:none;letter-spacing:0}
.testcard .tc-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;
                   text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.testcard .tc-best{color:var(--text2)}
.testcard .tc-cta{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);
                  border:1px solid var(--line-strong);border-radius:2px;padding:9px 0;text-align:center;
                  margin-top:2px;transition:border-color .15s,color .15s}
.testcard:hover .tc-cta{border-color:var(--text);color:var(--text)}
.testcard .tc-feeds{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.testcard .tc-feeds b{font-weight:600}

/* stat-feed chips (shown after a game) */
.feeds-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:2px 0}
.feed-chip{font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid;
  border-radius:2px;padding:6px 12px;font-family:var(--mono)}

/* ── leaderboard ── */
.tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.tab{background:none;border:1px solid var(--line);color:var(--text2);border-radius:2px;
     padding:8px 18px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;transition:.15s}
.tab.on{border-color:var(--text2);color:var(--text)}
.tab:disabled{opacity:.4;cursor:default}
.lb-row{display:grid;grid-template-columns:64px 1fr 110px;gap:14px;align-items:center;
        padding:16px 18px;border-bottom:1px solid var(--line);transition:background .15s}
.lb-row.full{grid-template-columns:52px 1.5fr 110px 76px 90px}
.lb-move{font-size:10px;letter-spacing:.1em;color:var(--muted);text-align:right;text-transform:uppercase}
.lb-move .up{color:var(--good)}
.lb-row:hover{background:var(--surface)}
.lb-row.you{border-left:2px solid var(--signal);padding-left:16px}
.lb-rank{font-size:10px;letter-spacing:.14em;color:var(--muted)}
.lb-handle{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text);
           display:flex;gap:12px;align-items:center;min-width:0}
.lb-handle small{color:var(--ghost);font-size:9px;letter-spacing:.1em}
.lb-av{flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;background:#0C0C0D;
       border:1px solid var(--line-strong);display:flex;align-items:flex-end;justify-content:center}
.lb-av svg{width:34px;height:auto;margin-bottom:-4px}
.lb-gpa{font-family:var(--sans);font-weight:600;font-size:17px;color:var(--text);text-align:right;
        font-variant-numeric:tabular-nums}
.lb-str{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:right}

/* ── domain bars (earned interface — the only home of domain color) ── */
.bars{display:grid;gap:16px}
.bar-row{display:grid;grid-template-columns:120px 1fr 40px;gap:16px;align-items:center}
.bar-row .b-name{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text2)}
.bar-row .b-track{height:5px;border-radius:2px;background:var(--surface2);overflow:hidden}
.bar-row .b-fill{height:100%;border-radius:2px;width:0;transition:width .9s ease}
.bar-row .b-val{font-size:11px;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.bar-row.locked .b-name{color:var(--ghost)}
.bar-row.locked .b-val{color:var(--ghost)}
.bar-row.locked .b-track{background:var(--surface)}
.unseal .bar-row{opacity:0;animation:unseal .5s ease forwards}
.unseal .bar-row:nth-child(2){animation-delay:.06s}.unseal .bar-row:nth-child(3){animation-delay:.12s}
.unseal .bar-row:nth-child(4){animation-delay:.18s}.unseal .bar-row:nth-child(5){animation-delay:.24s}
.unseal .bar-row:nth-child(6){animation-delay:.3s}
@keyframes unseal{to{opacity:1}}

/* ── character system ── */
.char-frame{background:#0C0C0D;border:1px solid #2A2A28;border-radius:2px;padding:22px;
  display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;overflow:hidden}
.char-frame .cf-plate{display:flex;justify-content:space-between;width:100%;align-items:baseline}
.char-frame .cf-plate span{color:#8A8884}
.char-frame svg{display:block}
.creator-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:start}
.sel-group{margin-bottom:26px}
.sel-group .whisper{display:block;margin-bottom:12px}
.sel-group.muted{opacity:.4;pointer-events:none}
.settings-card{background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:20px;max-width:440px}
.face-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.face-tile{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:6px 2px 0;
  cursor:pointer;display:flex;justify-content:center;transition:border-color .15s;overflow:hidden;height:74px}
.face-tile:hover{border-color:var(--line-strong)}
.face-tile.on{border-color:var(--cta)}
.opt-row{display:flex;gap:8px;flex-wrap:wrap}
.opt{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:10px 14px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);cursor:pointer;transition:.15s}
.opt:hover{color:var(--text)}
.opt.on{border-color:var(--cta);color:var(--text)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border-radius:2px;border:1px solid var(--line-strong);cursor:pointer;
  transition:transform .12s,border-color .15s}
.swatch:hover{transform:scale(1.06)}
.swatch.on{border:2px solid var(--text);transform:scale(1.06)}

/* attribute board — THPS energy, cognitive attributes */
.attr-board{display:grid;gap:11px}
.attr-row{display:grid;grid-template-columns:150px 1fr 40px;gap:14px;align-items:center}
.attr-row .a-name{font-size:11px;letter-spacing:.16em;color:var(--text)}
.attr-row .a-name small{display:block;font-size:9px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.attr-row .a-pips{display:flex;gap:5px}
.attr-row .a-pips i{width:16px;height:9px;border-radius:2px;background:var(--surface2);
  border:1px solid var(--line);transition:background .3s}
.attr-row .a-pips i.on{border-color:transparent}
.attr-row .a-val{font-family:var(--sans);font-weight:600;font-size:14px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--text)}
.attr-row.locked .a-name,.attr-row.locked .a-val{color:var(--ghost)}
.rec-char-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:start;margin-top:8px}
@media(max-width:1000px){
  .creator-grid,.rec-char-grid{grid-template-columns:1fr;gap:28px}
  .attr-row{grid-template-columns:118px 1fr 36px}
  .attr-row .a-pips i{width:12px}
}

/* ── record / stats ── */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;
         background:var(--line);border:1px solid var(--line)}
.statbox{background:var(--base);padding:20px 16px;text-align:center}
.statbox .s-val{font-family:var(--sans);font-weight:600;font-size:22px;color:var(--text);font-variant-numeric:tabular-nums}
.statbox .s-lbl{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;
        background:var(--line);border:1px solid var(--line)}
.badge{background:var(--base);padding:16px 12px;text-align:center}
.badge .b-nm{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-top:6px}
.badge .b-ht{font-size:9px;letter-spacing:.06em;color:var(--ghost);margin-top:3px;text-transform:uppercase}
.badge .b-ic{font-size:13px;color:var(--text2)}
.badge:not(.earned){opacity:.35}
.runlist .lb-row{grid-template-columns:100px 1fr 80px 80px}

/* ── test experience ── */
#testView{position:fixed;inset:0;z-index:100;background:var(--base);display:none;flex-direction:column}
#testView.on{display:flex;animation:pageIn .25s ease}
#testTop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;
         border-bottom:1px solid var(--line)}
#testTop .t-mode{font-size:9px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
#testTop .wm{font-size:10px;letter-spacing:.28em;color:var(--text);text-transform:uppercase}
#testQuit,#tMute{background:none;border:1px solid var(--line-strong);color:var(--text2);
                 border-radius:2px;padding:8px 14px;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
#testQuit:hover,#tMute:hover{color:var(--text);border-color:var(--text2)}
#testProg{height:2px;background:var(--surface2)}
#testProg i{display:block;height:100%;width:0;background:var(--text);transition:width .45s ease}
#stage{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
       max-width:860px;width:100%;margin:0 auto;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
        text-align:center;padding:28px;gap:16px}
.g-domain{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.g-name{font-family:var(--sans);font-weight:600;font-size:clamp(28px,4.5vw,40px);letter-spacing:-.02em}
.g-desc{font-family:var(--sans);font-size:15px;color:var(--text2);max-width:440px;line-height:1.6}
.g-score-line{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ghost)}
.g-big{font-family:var(--sans);font-weight:600;font-size:clamp(54px,8vw,78px);line-height:1;
       letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.g-lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.g-pb{font-size:10px;letter-spacing:.14em;color:var(--text2);text-transform:uppercase}
.newbest{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--signal);
         animation:nbPulse 1.1s ease infinite alternate}
@keyframes nbPulse{from{opacity:.6}to{opacity:1}}
.best-flash{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 45% at 50% 45%,rgba(255,59,0,.1),transparent 70%);animation:bFlash .8s ease both}
@keyframes bFlash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.shake{animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
.pop{animation:pop .3s ease}
@keyframes pop{from{transform:scale(.9);opacity:0}}
#cdOverlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;
           background:rgba(12,12,13,.86)}
#cdOverlay .cd-n{font-family:var(--sans);font-weight:600;font-size:5.5rem;color:var(--text);animation:cdPop .5s ease both}
@keyframes cdPop{from{transform:scale(1.4);opacity:0}}
/* gameplay keeps generous touch targets; radii here are functional */
.grid-g{display:grid;gap:8px;touch-action:manipulation}
.cell{border-radius:6px;background:var(--surface2);border:1px solid var(--line-strong);cursor:pointer;
      display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:600;
      font-size:1.05rem;color:var(--text);transition:background .12s,transform .08s}
.cell:active{transform:scale(.93)}
.cell.lit{background:var(--text);border-color:transparent;color:var(--base)}
.cell.good{border-color:var(--good);color:var(--good)}
.cell.err{border-color:var(--bad);color:var(--bad)}
.duo{display:flex;gap:12px;width:100%;max-width:440px}
.duo .btn{flex:1;padding:18px 0;font-size:12px}
.btn-no{border-color:rgba(255,59,0,.55);color:var(--bad)}
.btn-no:hover{border-color:var(--bad)}
.choices{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.choice{min-width:76px;padding:18px;border-radius:6px;background:var(--surface2);border:1px solid var(--line-strong);
        font-size:1.6rem;color:var(--text);cursor:pointer;transition:transform .08s,border-color .15s}
.choice:hover{border-color:var(--text2)}
.choice:active{transform:scale(.95)}
#tgt{position:absolute;border-radius:50%;cursor:pointer;background:var(--text);
     box-shadow:0 0 0 1px var(--base),0 0 24px rgba(237,235,230,.25)}
.pad{display:grid;grid-template-columns:repeat(3,76px);gap:9px;justify-content:center}
.pad .cell{height:58px}
.minirow{display:grid;gap:1px;max-width:440px;width:100%;background:var(--line);border:1px solid var(--line)}
.mini{background:var(--base);padding:14px 8px;text-align:center}
.mini b{font-family:var(--sans);font-weight:600;font-size:1.3rem;display:block}
.mini span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ── results ── */
.res-wrap{text-align:center;padding-top:40px}
.res-gpa{font-family:var(--sans);font-weight:600;font-size:clamp(80px,16vw,150px);line-height:.95;
         letter-spacing:-.03em;font-variant-numeric:tabular-nums;animation:pop .5s ease both}
.res-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;text-align:left;margin-top:56px}

/* membership card (share card) — always obsidian: the iconic object in every theme */
.membercard{--text:#EDEBE6;--text2:#8A8884;--muted:#5A5A58;--ghost:#6A6660;
            --line:#1A1A19;--line-strong:#2A2A28;--surface2:#151516;
            background:#0C0C0D;border:1px solid var(--line-strong);border-radius:2px;color:var(--text);
            aspect-ratio:4/5;max-width:400px;margin:0 auto;padding:30px;position:relative;
            display:flex;flex-direction:column}
.membercard .mc-top{display:flex;justify-content:space-between;align-items:center}
.membercard .mc-gpa{font-family:var(--sans);font-weight:600;font-size:clamp(64px,9vw,92px);
                    letter-spacing:-.03em;line-height:1;margin:auto 0;font-variant-numeric:tabular-nums}
.membercard .mc-rows{display:grid;gap:8px;margin-bottom:26px}
.membercard .mc-row{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;
                    text-transform:uppercase}
.membercard .mc-row span:first-child{color:var(--muted)}
.membercard .mc-row span:last-child{color:var(--text)}
.membercard .mc-foot{display:flex;justify-content:space-between;align-items:center;
                     border-top:1px solid var(--line);padding-top:16px}
.membercard .mc-serial{font-size:9px;letter-spacing:.18em;color:var(--muted)}
.membercard .mc-wm{font-size:9px;letter-spacing:.28em;color:var(--text)}

/* ── claim ── */
.claim-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
             color:var(--muted);margin-bottom:8px}
.field input{width:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;
             color:var(--text);font-family:var(--mono);font-size:12px;letter-spacing:.08em;
             padding:14px 15px;outline:none;transition:border-color .15s}
.field input:focus{border-color:var(--text2)}
.benefits li{list-style:none;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
             color:var(--text2);padding:13px 0;border-bottom:1px solid var(--line)}

/* science */
.sci-block{border-bottom:1px solid var(--line);padding:22px 0}
.sci-block h3{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--text);
              font-weight:500;margin-bottom:10px;font-family:var(--mono)}
.sci-block p{font-family:var(--sans);font-size:13px;line-height:1.65;color:var(--text2)}

/* footer */
footer{border-top:1px solid var(--line);padding:26px 0}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer span,footer button{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ghost);
                          background:none;border:none;padding:0}
footer button:hover{color:var(--muted)}

/* ── the gate: CRT terminal password screen ── */
#gate{position:fixed;inset:0;z-index:300;background:#030904;display:flex;align-items:center;
      justify-content:center;overflow:hidden}
#gate.off{display:none}
#gate::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
#gate::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(105% 88% at 50% 50%,transparent 55%,rgba(0,0,0,.72) 100%);
  animation:crtFlicker 4.2s steps(1) infinite}
@keyframes crtFlicker{0%,93%,100%{opacity:1}94%{opacity:.92}95%{opacity:1}97%{opacity:.96}}
#gateInner{position:relative;z-index:2;width:min(680px,92vw);padding:24px;
           font-family:'VT323',monospace;color:#3CFF6E;font-size:21px;line-height:1.45;
           text-shadow:0 0 6px rgba(60,255,110,.55),0 0 22px rgba(60,255,110,.22)}
#gateBoot{white-space:pre-wrap;word-break:break-word;margin:0;font-family:inherit;min-height:280px}
#gateRow{display:none;align-items:center;gap:10px;margin-top:6px}
#gateRow.on{display:flex}
#gateRow label{white-space:nowrap}
#gateInput{flex:1;background:transparent;border:none;outline:none;color:#3CFF6E;
           font-family:'VT323',monospace;font-size:21px;letter-spacing:.06em;
           caret-color:#3CFF6E;text-shadow:inherit;min-width:0}
#gateMsg{margin-top:10px;min-height:1.4em}
#gateMsg.deny{color:#FF5340;text-shadow:0 0 8px rgba(255,83,64,.5)}
#gate .cursor{display:inline-block;width:.55em;height:1em;background:#3CFF6E;
              vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#gate.grant{animation:crtOff .55s ease-in .35s forwards}
@keyframes crtOff{0%{transform:scaleY(1);filter:brightness(1)}
  60%{transform:scaleY(.006);filter:brightness(3)}
  100%{transform:scaleY(.006) scaleX(0);filter:brightness(6);opacity:0}}
/* calibration bar — plays inside the gate after ACCESS GRANTED */
#calibBar{height:2px;background:var(--surface2);margin-top:16px;display:none}
#calibBar.on{display:block}
#calibBar i{display:block;height:100%;width:0;background:#3CFF6E;transition:width .5s ease}
@media(max-width:640px){#gateInner{font-size:18px}#gateInput{font-size:18px}#gateBoot{min-height:230px}}

/* toast + lookup overlay */
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(16px);z-index:200;
       background:var(--elev);border:1px solid var(--line-strong);border-radius:2px;padding:12px 22px;
       font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);
       opacity:0;transition:.22s ease;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%)}
#lookup{position:fixed;inset:0;z-index:150;background:rgba(12,12,13,.9);display:none;
        align-items:center;justify-content:center;padding:24px}
#lookup.on{display:flex;animation:pageIn .2s ease}
#lookup .membercard{width:100%}

/* ── auth modal ── */
#authModal{position:fixed;inset:0;z-index:160;background:rgba(8,8,10,.82);backdrop-filter:blur(8px);
           display:none;align-items:center;justify-content:center;padding:22px}
#authModal.on{display:flex;animation:pageIn .2s ease}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line-strong);
           border-radius:4px;padding:30px 28px;position:relative}
.auth-card .a-x{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:18px}
.auth-tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid var(--line)}
.auth-tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);
          font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:12px 0;transition:.15s}
.auth-tab.on{color:var(--text);border-bottom-color:var(--cta)}
.auth-h{font-family:var(--sans);font-weight:600;font-size:20px;color:var(--text);margin-bottom:6px;letter-spacing:-.01em}
.auth-sub{color:var(--text2);font-size:12.5px;line-height:1.5;margin-bottom:20px;font-family:var(--sans)}
.auth-field{margin-bottom:13px}
.auth-field label{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.auth-field input{width:100%;background:var(--base);border:1px solid var(--line-strong);border-radius:3px;
                  color:var(--text);font-family:var(--mono);font-size:13px;padding:12px 13px;outline:none;transition:border-color .15s}
.auth-field input:focus{border-color:var(--cta)}
.auth-field input.bad{border-color:var(--bad)}
.auth-err{color:var(--bad);font-size:11px;margin-top:6px;min-height:14px;font-family:var(--mono);letter-spacing:.04em}
.auth-hint{color:var(--muted);font-size:10px;margin-top:5px;letter-spacing:.04em}
.auth-hint.ok{color:var(--good)}
.auth-apple{width:100%;background:#fff;color:#000;border:none;border-radius:3px;padding:13px;
            font-family:var(--sans);font-weight:600;font-size:14px;display:flex;align-items:center;
            justify-content:center;gap:9px;margin-top:4px}
.auth-apple:hover{background:#eee}
.auth-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:10px;letter-spacing:.16em}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-alt{text-align:center;margin-top:16px;font-size:11px;color:var(--text2);font-family:var(--mono);letter-spacing:.04em}
.auth-alt button{background:none;border:none;color:var(--cta);font-size:11px;letter-spacing:.04em}
.auth-dev{margin-top:14px;border:1px dashed var(--line-strong);border-radius:3px;padding:10px 12px;
          font-size:10px;letter-spacing:.06em;color:var(--muted);text-align:center}
.auth-dev b{color:var(--good);font-family:var(--mono);font-size:15px;letter-spacing:.2em}
.sug-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.sug{background:var(--base);border:1px solid var(--line-strong);border-radius:3px;padding:6px 10px;
     font-size:11px;color:var(--text2);font-family:var(--mono)}
.sug:hover{border-color:var(--cta);color:var(--text)}
/* account dropdown */
.acct-wrap{position:relative}
.acct-btn{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--line-strong);
          border-radius:2px;padding:5px 10px 5px 6px;color:var(--text)}
.acct-btn .acct-av{width:26px;height:26px;border-radius:50%;overflow:hidden;background:#0C0C0D;flex:none;
                   display:flex;align-items:flex-end;justify-content:center}
.acct-btn .acct-av svg{width:26px;margin-bottom:-3px}
.acct-btn .acct-nm{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.acct-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--elev);border:1px solid var(--line-strong);
           border-radius:3px;min-width:170px;padding:6px;display:none;z-index:60;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.acct-menu.on{display:block}
.acct-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text2);
                  font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 10px;border-radius:2px}
.acct-menu button:hover{background:var(--surface2);color:var(--text)}
.verify-banner{border:1px solid var(--cta);border-radius:3px;background:color-mix(in srgb,var(--cta) 10%,transparent);
               padding:9px 12px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2)}
.verify-banner button{background:none;border:none;color:var(--cta);font-size:10px;letter-spacing:.08em;text-transform:uppercase}

/* ── responsive ── */
@media(max-width:1000px){
  .testgrid{grid-template-columns:repeat(2,1fr)}
  .res-cols,.claim-grid{grid-template-columns:1fr;gap:36px}
  #homeHero .hero2{grid-template-columns:1fr;gap:44px;min-height:0;padding-top:48px;padding-bottom:110px}
  .lb-row.full{grid-template-columns:44px 1.4fr 96px}
  .lb-row.full .lb-str,.lb-row.full .lb-move{display:none}
  #tbar nav{overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  #tbar nav::-webkit-scrollbar{display:none}
  #tbar nav button{padding:8px 9px;font-size:10px;letter-spacing:.1em}
  #tbar .rec{display:none}
}
@media(max-width:640px){
  .wrap{padding:0 18px}
  #tbar{padding:0 18px}
  #ticker{gap:22px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  #ticker::-webkit-scrollbar{display:none}
  .testgrid{grid-template-columns:1fr}
  .sec{padding:52px 0}
  #stickyCta.on{display:block}
  main{padding-bottom:76px}
  .duo .btn{padding:16px 0}
  #testTop .wm{display:none}
  .runlist .lb-row{grid-template-columns:84px 1fr 70px}
  .runlist .lb-row span:last-child{display:none}
}