:root{
    --bg:#0b1020; --bg2:#101830;
    --panel:#151f3a; --panel-2:#1c2848; --panel-3:#243156;
    --border:#2c3a63; --border-strong:#40518a;
    --text:#eef2fb; --text-muted:#94a3c7;
    --accent:#5b8cff; --gold:#B8E62B;
    --green:#3ddc84; --yellow:#ffd93d; --orange:#ff9f43; --red:#ff5c5c;
    --radius:14px;
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;font-family:var(--font);color:var(--text);
       background:radial-gradient(1200px 700px at 50% -10%, #17224a 0%, var(--bg) 55%);
       min-height:100vh;padding:22px 16px 60px}
  .wrap{max-width:640px;margin:0 auto}

  /* ---------- header ---------- */
  header{text-align:center;margin-bottom:16px}
  .logo{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:0}
  .logo .geo{color:var(--gold)}
  .logo .gauntlet{background:linear-gradient(90deg,var(--accent),#8db2ff);
    -webkit-background-clip:text;background-clip:text;color:transparent}

  /* ---------- HUD ---------- */
  .hud{background:linear-gradient(180deg,var(--panel-2),var(--panel));
       border:1px solid var(--border);border-radius:var(--radius);
       padding:14px 18px;margin-bottom:14px;
       box-shadow:0 8px 24px rgba(0,0,0,.35)}
  .hud-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .score-block{display:flex;align-items:baseline;gap:7px}
  .score-num{font-size:30px;font-weight:800;color:var(--gold);
             font-variant-numeric:tabular-nums;transition:transform .2s}
  .score-num.hit{animation:scorehit .45s ease}
  @keyframes scorehit{0%{transform:scale(1)}35%{transform:scale(1.18);color:var(--red)}100%{transform:scale(1)}}
  .score-lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}
  .health{height:9px;background:#0d1428;border-radius:5px;overflow:hidden;
          border:1px solid var(--border)}
  .health-fill{height:100%;border-radius:5px;
    background:linear-gradient(90deg,var(--red),var(--orange) 30%,var(--gold) 60%,var(--green));
    background-size:520px 100%;transition:width .6s cubic-bezier(.4,0,.2,1)}
  .dots{display:flex;gap:5px}
  .dot{width:9px;height:9px;border-radius:50%;background:var(--panel-3);
       border:1px solid var(--border);transition:all .3s}
  .dot.cur{background:var(--accent);border-color:var(--accent);
           box-shadow:0 0 8px rgba(91,140,255,.7)}
  .dot.g{background:var(--green);border-color:var(--green)}
  .dot.y{background:var(--yellow);border-color:var(--yellow)}
  .dot.o{background:var(--orange);border-color:var(--orange)}
  .dot.r{background:var(--red);border-color:var(--red)}

  /* ---------- question card ---------- */
  .qcard{background:linear-gradient(180deg,var(--panel-2),var(--panel));
         border:1px solid var(--border);border-radius:var(--radius);
         padding:22px;box-shadow:0 12px 32px rgba(0,0,0,.4);
         animation:cardin .35s ease}
  @keyframes cardin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes shakex{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}
    40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
  .qmeta{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
  .pill{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;
        padding:4px 11px;border-radius:20px}
  .pill.easy{background:rgba(61,220,132,.14);color:var(--green);border:1px solid rgba(61,220,132,.35)}
  .pill.medium{background:rgba(255,217,61,.12);color:var(--yellow);border:1px solid rgba(255,217,61,.3)}
  .pill.hard{background:rgba(255,92,92,.12);color:var(--red);border:1px solid rgba(255,92,92,.32)}
  .pill.cat{background:var(--panel-3);color:var(--text-muted);border:1px solid var(--border)}
  .qtext{font-size:21px;font-weight:700;line-height:1.35;letter-spacing:-.2px}
  .qunit{font-size:13px;color:var(--text-muted);margin-top:7px}
  .qunit b{color:var(--accent);font-weight:700}
  .scale-hint{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
  .scale-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;
    background:var(--panel-3);border:1px solid var(--border);border-radius:20px;
    padding:5px 12px;color:var(--text-muted)}
  .scale-chip b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
  .scale-chip .k{font-size:10px;text-transform:uppercase;letter-spacing:.8px;
    color:var(--accent);font-weight:800}

  /* ---------- top auth bar ---------- */
  .authbar{display:flex;justify-content:flex-end;align-items:center;gap:10px;
    margin-bottom:10px;font-size:13px;color:var(--text-muted)}
  .authbar a{color:var(--accent);cursor:pointer;font-weight:700}
  .authbar .who{font-weight:700;color:var(--text)}

  /* ---------- reveal-reference box ---------- */
  .refbox{margin-top:16px;background:rgba(91,140,255,.06);
    border:1px solid rgba(91,140,255,.2);border-radius:12px;padding:13px 15px}
  .refbox .rlbl{font-size:11px;text-transform:uppercase;letter-spacing:.8px;
    color:var(--accent);font-weight:800;margin-bottom:8px}
  .ref-input-row{display:flex;gap:8px;position:relative}
  .ref-input{flex:1;font-family:var(--font);font-size:15px;font-weight:600;
    padding:10px 13px;border-radius:10px;border:1px solid var(--border-strong);
    background:#0d1428;color:var(--text)}
  .ref-input:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(91,140,255,.18)}
  .ref-input:disabled{opacity:.5}
  .ac{position:absolute;top:46px;left:0;right:96px;z-index:20;
    background:var(--panel-2);border:1px solid var(--border-strong);
    border-radius:10px;overflow:hidden;max-height:210px;overflow-y:auto;
    box-shadow:0 12px 28px rgba(0,0,0,.5);display:none}
  .ac.show{display:block}
  .ac-item{padding:9px 13px;cursor:pointer;font-size:14px;
    border-bottom:1px solid var(--border)}
  .ac-item:last-child{border-bottom:none}
  .ac-item:hover,.ac-item.active{background:var(--accent);color:#061029;font-weight:700}
  .ref-desc{font-size:12.5px;color:var(--text-muted);line-height:1.5;margin-bottom:9px}
  .ref-desc b{color:var(--text)}
  .ac-item{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .ac-cost{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:10px;
    background:rgba(255,201,77,.15);color:var(--gold);white-space:nowrap}
  .ac-item:hover .ac-cost,.ac-item.active .ac-cost{background:rgba(6,16,41,.25);color:#061029}
  .ref-result{margin-top:10px;font-size:14px;display:none}
  .ref-result.show{display:block;animation:cardin .3s ease}
  .ref-result .rc{font-weight:800;color:var(--text)}
  .ref-result .rv{font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
  .ref-skip{font-size:12px;color:var(--text-muted);margin-top:8px;text-align:center}
  .ref-skip a{color:var(--accent);cursor:pointer;font-weight:700}

  /* ---------- modal (auth) ----------
     THREE THINGS HERE ARE LOAD-BEARING ON A PHONE, all of them harmless with the
     old two-field form and blocking with the five-field one:

     1. align-items is flex-start with overflow-y:auto, NOT center. A centred
        flex item in a scrolling container becomes unreachable at the top once it
        is taller than the viewport — which the register view is, before the
        keyboard even opens. `margin:auto 0` on .modal gives centring when it
        fits and scrolling when it does not.
     2. The input font is 16px. Safari zooms the page on focus for anything
        smaller and never zooms back out. The fix is the font size — do NOT add
        maximum-scale=1 to the viewport meta, which kills pinch-zoom for good.
     3. safe-area-inset-bottom keeps the submit button clear of the home bar. */
  .modal-bg{position:fixed;inset:0;background:rgba(5,9,20,.72);z-index:100;
    display:none;align-items:flex-start;justify-content:center;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px))}
  .modal-bg.show{display:flex}
  .modal{background:linear-gradient(180deg,var(--panel-2),var(--panel));
    border:1px solid var(--border);border-radius:16px;padding:26px;width:100%;
    max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.6);
    position:relative;margin:auto 0}
  .modal h2{margin:0 0 4px;font-size:22px}
  .modal p{margin:0 0 18px;font-size:13px;color:var(--text-muted)}
  .modal input{width:100%;font-family:var(--font);font-size:16px;
    padding:12px 14px;border-radius:10px;border:1px solid var(--border-strong);
    background:#0d1428;color:var(--text);margin-bottom:10px}
  .modal input:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--accent)}
  .modal .err{color:var(--red);font-size:13px;min-height:18px;margin-bottom:8px}
  .modal .row{display:flex;gap:8px}
  .modal .switch{text-align:center;font-size:13px;color:var(--text-muted);margin-top:14px}
  .modal .switch a{color:var(--accent);cursor:pointer;font-weight:700}
  .modal .skip{text-align:center;margin-top:12px}
  .modal .skip a{color:var(--text-muted);cursor:pointer;font-size:12px}
  /* A second line under "Continue as a guest", quieter than it: the guest
     option is a choice being offered, the policy is a reference. Same row
     would read as two equal options and make the dialog look busier than it
     is. */
  .modal .skip .skip-fine{margin-top:9px}
  .modal .skip .skip-fine a{color:var(--text-muted);font-size:11.5px}

  /* stats panel on end screen */
  .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
  .stat{background:var(--panel-3);border:1px solid var(--border);border-radius:10px;
    padding:12px 8px}
  .stat .sv{font-size:22px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
  .stat .sl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
  .bestcats{text-align:left;margin-top:8px;font-size:12.5px}
  .bestcats .bc-row{display:flex;justify-content:space-between;padding:5px 0;
    border-bottom:1px solid #1d2949}

  /* ---------- home / mode selection ---------- */
  .modes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
  .mode-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    text-align:left;padding:20px 18px;border-radius:16px;cursor:pointer;
    background:linear-gradient(180deg,var(--panel-2),var(--panel));
    border:1px solid var(--border);color:var(--text);transition:all .15s;font-family:var(--font)}
  .mode-card:hover{transform:translateY(-3px);border-color:var(--border-strong);
    box-shadow:0 14px 30px rgba(0,0,0,.4)}
  .mode-card.daily:hover{border-color:var(--gold)}
  .mode-card.unlimited:hover{border-color:var(--accent)}
  .mode-card.hilo:hover{border-color:#9b6bff}
  .mode-card.multiplayer:hover{border-color:#ff7ac2}
  .mode-card.multiplayer .mode-go{color:#ff7ac2}
  /* The second hero row is the first one without its top padding — they read
     as a pair rather than as a heading and a stray card. */
  /* Same box as the hero above it — the horizontal padding is inherited from
     .mode-hero, so both cards are the full row width. Only the space between
     the two is this rule's business. */
  .mode-hero-2{padding-top:14px}

  /* ---- two cards to a row --------------------------------------------- */
  /* FLEX, NOT GRID, because both cards in the second row are gated. See the
     comment on the markup: display:none flex children take no space, so the
     row holds two, one or none and always looks deliberate. The wrappers are
     the flex children in row two and the buttons are in row one, so both the
     child and the button inside it have to stretch. */
  .mode-pair{display:flex;gap:14px;align-items:stretch}
  .mode-pair > *{flex:1 1 0;min-width:0}
  .mode-pair > div{display:flex}
  .mode-pair > div > .mode-card{flex:1;min-width:0}
  /* The padding that separated the two rows moves onto the cards, so a second
     row with nothing drawn in it leaves no gap behind. */
  .mode-hero-2.mode-pair{padding-top:0}
  .mode-hero-2.mode-pair > *{margin-top:14px}

  /* THE BADGE MUST NOT GROW THE LINE BOX. .dd-new is inline-block with its own
     padding, so inside .mode-name it made the name's line taller than the
     text — and since the hero is a grid with a fixed 4px row gap, all of that
     extra height landed between the "02" and the title. Measured: 17px there
     against the daily card's 4px. Absolutely positioned out of the flow, so
     the title's line box is exactly the title again. */
  .mode-name .dd-new{margin-left:9px;vertical-align:middle;line-height:1}
  .mode-icon{font-size:30px;line-height:1}
  .mode-name{font-size:19px;font-weight:800;letter-spacing:-.3px}
  .mode-desc{font-size:12.5px;color:var(--text-muted);line-height:1.45;min-height:52px}
  .mode-go{font-size:13px;font-weight:800;color:var(--accent);margin-top:2px}
  .mode-card.daily .mode-go{color:var(--gold)}
  /* White, not the card's own hue: the small-tile rule this replaces painted
     it teal on an amber card, which was invisible. */
  .mode-card.gauntlet .mode-go{color:var(--on-accent)}
  .mode-card.hilo .mode-go{color:#b58cff}
  .mode-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:var(--panel-2);border:1px solid var(--border);border-radius:10px;
    padding:9px 14px;margin-bottom:12px;font-size:13px}
  .mode-banner .mb-left{font-weight:700}
  .mode-banner .mb-left .tag{font-size:10px;text-transform:uppercase;letter-spacing:1px;
    padding:2px 8px;border-radius:10px;margin-right:8px}
  .mode-banner .tag.daily{background:rgba(255,201,77,.15);color:var(--gold)}
  .mode-banner .tag.unlimited{background:rgba(91,140,255,.15);color:var(--accent)}
  .mode-banner .tag.archive{background:rgba(155,107,255,.15);color:#b58cff}
  .mode-banner a{color:var(--text-muted);cursor:pointer;font-weight:700;font-size:12px}
  .arch-item{display:flex;justify-content:space-between;align-items:center;
    padding:12px 15px;border-radius:10px;background:var(--panel-2);
    border:1px solid var(--border);margin-bottom:8px;cursor:pointer;transition:all .12s}
  .arch-item:hover{border-color:var(--border-strong);transform:translateX(3px)}
  .arch-date{font-weight:700}
  .arch-note{font-size:12px;color:var(--text-muted)}
  .arch-play{font-size:12px;font-weight:800;color:#b58cff}
  .lb-panel{margin-top:16px;background:rgba(255,201,77,.05);
    border:1px solid rgba(255,201,77,.2);border-radius:12px;padding:16px}
  .lb-panel h3{margin:0 0 4px;font-size:15px}
  .lb-you{font-size:13px;color:var(--gold);font-weight:700;margin-bottom:10px}
  .lb-scope{display:inline-flex;border:1px solid var(--border-strong);border-radius:7px;
    overflow:hidden;margin:6px 0 10px}
  .lb-tab{padding:5px 14px;border:0;background:transparent;color:var(--text-muted);
    font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer}
  .lb-tab.on{background:var(--gold);color:#1a1405}
  .lb-empty{font-size:13px;color:var(--text-muted);padding:8px 0}
  .lb-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;
    border-bottom:1px solid #1d2949}
  .lb-row.me{color:var(--gold);font-weight:800}
  .lb-rank{color:var(--text-muted);width:32px;display:inline-block}
  @keyframes pulse{50%{opacity:.55}}
  .bd-rank{font-family:var(--display);font-weight:900;color:var(--text-muted);font-size:11px}
  .bd-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bd-state{font-family:var(--display);font-size:8.5px;letter-spacing:.11em;
    text-transform:uppercase;font-weight:700;padding:2px 6px;border-radius:2px}
  .bd-state.in{background:rgba(110,146,86,.18);color:#456135}
  .bd-state.out{background:var(--panel-3);color:var(--text-muted)}
  .bd-total{font-family:var(--display);font-weight:900;font-variant-numeric:tabular-nums;
    min-width:38px;text-align:right}

  /* ---------- hall of fame ---------- */
  .hof-sub{font-size:11px;color:var(--text-muted);margin-bottom:8px}
  .hof-date{color:var(--text-muted);font-weight:400;font-size:12px}
  #hofList .lb-panel{margin-top:12px}
  .hof-btn{width:100%;margin-top:14px;padding:13px;border-radius:12px;cursor:pointer;
    background:rgba(255,201,77,.06);border:1px solid rgba(255,201,77,.3);
    color:var(--gold);font-family:var(--font);font-size:14px;font-weight:800}
  .hof-btn:hover{background:rgba(255,201,77,.12)}

  .trophy-row{display:flex;justify-content:center;gap:24px;margin:20px 0}
  .trophy{text-align:center}
  .trophy .ti{font-size:46px}
  .trophy.gold .ti{filter:drop-shadow(0 0 12px rgba(255,201,77,.6))}
  .trophy .tn{font-weight:800;margin-top:4px}
  .trophy .ts{font-size:13px;color:var(--text-muted)}
  .award-banner{background:rgba(255,201,77,.08);border:1px solid rgba(255,201,77,.3);
    border-radius:12px;padding:14px;text-align:center;margin:16px 0;font-size:14px}
  .award-banner .aw-lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--gold);font-weight:800}

  /* ---------- share card ---------- */
  .share-card{background:#0d1428;border:1px solid var(--border-strong);border-radius:12px;
    padding:18px;margin:14px 0;font-family:var(--font)}
  .share-title{font-weight:800;font-size:15px;margin-bottom:4px}
  .share-sub{font-size:12px;color:var(--text-muted);margin-bottom:12px}
  .share-grid{font-size:22px;line-height:1.5;letter-spacing:2px}
  .share-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
  .share-btn{padding:10px 18px;border-radius:9px;border:1px solid var(--accent);
    background:var(--accent);color:#061029;font-weight:800;cursor:pointer;font-family:var(--font);font-size:14px}
  .share-btn.ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}

  /* profile modal extras */
  .prof-section{margin-top:16px}
  .prof-section h4{font-size:11px;text-transform:uppercase;letter-spacing:1px;
    color:var(--text-muted);margin:0 0 6px}
  .prof-cat{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px solid #1d2949}
  .prof-cat .good{color:var(--green);font-weight:700}
  .prof-cat .bad{color:var(--red);font-weight:700}

  /* friends modal — same shape as the profile one it sits beside */
  .fr-intro{font-size:13px;color:var(--text-muted);margin:0 0 14px}
  .fr-add{display:flex;gap:8px}
  /* the autocomplete anchors to the input, not the row, or it would span the
     Send button too */
  .fr-acwrap{position:relative;flex:1;min-width:0;display:block}
  .fr-ac{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;
    max-height:230px;overflow:auto}
  .ac-none{padding:10px 12px;font-size:13px;color:var(--text-muted)}
  .fr-sec{margin-top:16px}
  .fr-sec h4{margin:0 0 6px;font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--text-muted);font-weight:800}
  .fr-sec h4 i{font-style:normal;background:var(--gold);color:#1a1405;
    border-radius:20px;padding:1px 7px;margin-left:5px;font-size:11px}
  .fr-yes{border:0;background:var(--green,#2e7d6b);color:#fff;border-radius:6px;
    padding:5px 12px;font-family:var(--font);font-size:12.5px;font-weight:800;
    cursor:pointer}
  .fr-wait{font-size:11.5px;color:var(--text-muted);letter-spacing:.06em;
    text-transform:uppercase;font-weight:700}
  /* the count beside "Friends" in the top bar */
  .fr-badge{display:inline-block;min-width:16px;margin-left:5px;padding:0 5px;
    background:var(--gold);color:#1a1405;border-radius:20px;font-size:11px;
    font-weight:900;line-height:16px;text-align:center;vertical-align:1px}
  .fr-add input{flex:1;min-width:0}
  .fr-add button{flex:0 0 auto;padding:11px 20px}
  .fr-msg{font-size:12.5px;margin-top:8px;min-height:1.1em;color:var(--text-muted)}
  .fr-msg.err{color:var(--red)}
  .fr-msg.ok{color:var(--green)}
  .fr-list{margin-top:12px;display:flex;flex-direction:column;gap:2px}
  .fr-row{display:flex;align-items:center;gap:9px;padding:7px 0;
    border-bottom:1px solid var(--border)}
  .fr-row:last-child{border-bottom:0}
  .fr-row .nm{flex:1;font-weight:700;font-size:14px}
  .fr-row .rm{border:0;background:none;color:var(--text-muted);cursor:pointer;
    font-size:19px;line-height:1;padding:0 4px}
  .fr-row .rm:hover{color:var(--red)}
  .fr-empty{font-size:13px;color:var(--text-muted);padding:6px 0}
  .answer-row{display:flex;gap:10px;margin-top:20px}
  /* CE/BCE switch, shown only on year questions. Fixed width so the row does
     not reflow when the label flips between the two. */
  .era-toggle{flex:0 0 auto;min-width:74px;font-variant-numeric:tabular-nums}
  .era-toggle[aria-pressed="true"]{background:var(--gold,#c8a24a);
    border-color:var(--gold,#c8a24a);color:#1a1405}
  input[type=number]{flex:1;font-family:var(--font);font-size:22px;font-weight:700;
    padding:13px 16px;border-radius:12px;border:1px solid var(--border-strong);
    background:#0d1428;color:var(--text);width:100%;text-align:center;
    -moz-appearance:textfield;transition:border-color .15s, box-shadow .15s}
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  input[type=number]:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(91,140,255,.18)}
  input[type=number]::placeholder{color:#4a5a85;font-weight:600}

  button{font-family:var(--font);font-size:15.5px;font-weight:700;padding:13px 26px;
         border-radius:12px;border:1px solid var(--border-strong);
         background:var(--panel-3);color:var(--text);cursor:pointer;
         transition:all .15s}
  button:hover{background:#2c3c68;transform:translateY(-1px)}
  button:active{transform:translateY(0)}
  button.primary{background:linear-gradient(180deg,#6b97ff,var(--accent));
    border-color:var(--accent);color:#061029;
    box-shadow:0 4px 14px rgba(91,140,255,.35)}
  button.primary:hover{background:linear-gradient(180deg,#7da4ff,#6b97ff)}
  button:disabled{opacity:.35;cursor:not-allowed;transform:none}

  /* ---------- reveal: bar chart ---------- */
  .reveal{margin-top:20px;display:none}
  .reveal.show{display:block;animation:cardin .3s ease}
  .chart{display:flex;justify-content:center;align-items:flex-end;gap:52px;
         height:230px;padding:14px 10px 0;position:relative}
  .col{display:flex;flex-direction:column;align-items:center;gap:8px;width:96px;height:100%;
       justify-content:flex-end}
  .bar-val{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;
           opacity:0;transition:opacity .28s;min-height:24px}
  .bar-val.show{opacity:1}
  /* .55s must match REVEAL_BAR_MS in the script — CSS cannot read the constant,
     and the reveal's later steps are timed against this one finishing. */
  .bar{width:100%;border-radius:9px 9px 0 0;position:relative;
       transition:height .55s cubic-bezier(.25,.8,.3,1), background .35s, box-shadow .35s;
       height:0}
  .bar.answer{background:linear-gradient(180deg,#6b97ff,#3f6ce0);
              box-shadow:0 0 18px rgba(91,140,255,.35)}
  .bar.guess{background:linear-gradient(180deg,#5a6b99,#43507c)}
  .bar.guess.grey{background:linear-gradient(180deg,#5a6b99,#43507c)}
  .bar.guess.green{background:linear-gradient(180deg,#4fe598,var(--green));
    box-shadow:0 0 20px rgba(61,220,132,.5)}
  .bar.guess.gold{background:linear-gradient(180deg,#ffe9a3,var(--gold));
    box-shadow:0 0 26px rgba(255,201,77,.65)}
  .bar.guess.yellow{background:linear-gradient(180deg,#ffe270,var(--yellow));
    box-shadow:0 0 20px rgba(255,217,61,.45)}
  .bar.guess.orange{background:linear-gradient(180deg,#ffb46b,var(--orange));
    box-shadow:0 0 20px rgba(255,159,67,.45)}
  .bar.guess.red{background:linear-gradient(180deg,#ff7b7b,var(--red));
    box-shadow:0 0 20px rgba(255,92,92,.5)}
  .bar-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
           color:var(--text-muted)}

  .verdict-strip{text-align:center;margin-top:14px;min-height:30px}
  .verdict-chip{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800;
    padding:7px 18px;border-radius:24px;opacity:0;transform:scale(.8);
    transition:opacity .26s, transform .26s cubic-bezier(.34,1.56,.64,1)}
  .verdict-chip.show{opacity:1;transform:scale(1)}
  .verdict-chip.gold{background:rgba(255,201,77,.18);color:var(--gold);border:1px solid rgba(255,201,77,.55);
    box-shadow:0 0 22px rgba(255,201,77,.3)}
  .verdict-chip.green{background:rgba(61,220,132,.15);color:var(--green);border:1px solid rgba(61,220,132,.4)}
  .verdict-chip.yellow{background:rgba(255,217,61,.13);color:var(--yellow);border:1px solid rgba(255,217,61,.35)}
  .verdict-chip.orange{background:rgba(255,159,67,.13);color:var(--orange);border:1px solid rgba(255,159,67,.4)}
  .verdict-chip.red{background:rgba(255,92,92,.13);color:var(--red);border:1px solid rgba(255,92,92,.4)}

  .fact{background:rgba(91,140,255,.07);border:1px solid rgba(91,140,255,.22);
        border-radius:12px;padding:13px 16px;margin-top:14px;font-size:13.5px;
        line-height:1.55;color:#c6d4f5;opacity:0;transition:opacity .4s .1s}
  .fact.show{opacity:1}
  .fact .fact-tag{font-size:10px;font-weight:800;text-transform:uppercase;
    letter-spacing:1px;color:var(--accent);display:block;margin-bottom:4px}
  .fact .src{display:block;margin-top:6px;font-size:11px;color:var(--text-muted)}

  .next-wrap{text-align:center;margin-top:16px}

  /* ---------- end screen ---------- */
  .end{background:linear-gradient(180deg,var(--panel-2),var(--panel));
       border:1px solid var(--border);border-radius:var(--radius);
       padding:28px 24px;text-align:center;display:none;
       box-shadow:0 12px 32px rgba(0,0,0,.4)}
  .end.show{display:block;animation:cardin .4s ease}
  .end .final-lbl{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted)}
  .end .final{font-size:62px;font-weight:800;font-variant-numeric:tabular-nums;
    background:linear-gradient(180deg,#ffe08a,var(--gold));
    -webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
  .end .final.zero{background:linear-gradient(180deg,#ff8a8a,var(--red));
    -webkit-background-clip:text;background-clip:text}
  .end .verdict{font-size:19px;font-weight:800;margin-top:2px}
  .end .blurb{font-size:13.5px;color:var(--text-muted);margin-top:7px;line-height:1.6}
  .recap{margin-top:20px;text-align:left;border-top:1px solid var(--border);padding-top:8px}
  .recap-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
             padding:8px 2px;font-size:12.5px;border-bottom:1px solid #1d2949}
  .recap-row:last-child{border-bottom:none}
  .recap-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
  .recap-q{flex:1;color:var(--text-muted);line-height:1.35}
  .recap-n{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
  .recap-n .cost{font-weight:800;margin-left:7px}

  /* confetti burst on great answers */
  .burst{position:fixed;pointer-events:none;z-index:60;left:0;top:0;width:100%;height:100%;overflow:hidden}
  .cf{position:absolute;width:9px;height:9px;border-radius:2px;opacity:.95;
      animation:cfall var(--dur) cubic-bezier(.2,.6,.4,1) forwards}
  @keyframes cfall{
    0%{transform:translate(var(--x0),var(--y0)) rotate(0) scale(1)}
    100%{transform:translate(var(--x1),var(--y1)) rotate(var(--rot)) scale(.6);opacity:0}}
  .sparkle{position:absolute;font-size:20px;animation:spark .9s ease forwards;pointer-events:none}
  @keyframes spark{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.25);opacity:1}
    100%{transform:scale(.8) translateY(-26px);opacity:0}}

  .msg{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
       padding:24px 28px;line-height:1.6;display:none;margin-top:40px}
  .msg.show{display:block}
  .msg h2{margin:0 0 10px;font-size:18px}
  .msg code{background:var(--panel-3);padding:2px 6px;border-radius:4px;font-size:13px}

  @media(max-width:480px){
    .chart{gap:28px}
    .col{width:80px}
    .logo{font-size:26px}
  }