/* ---------- higher or lower ---------- */
.hl-wrap{padding:0}
.hl-bar{display:flex;align-items:center;gap:14px;padding:15px 32px;
  background:var(--bar-tint)}
.hl-deck{font:800 12.5px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;
  background:var(--m-hilo);color:var(--on-accent);padding:8px 13px;border-radius:8px}
.hl-back{margin-left:auto;font:800 12.5px/1 var(--display);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-soft);cursor:pointer}
.hl-back:hover{color:var(--text)}
.hl-hud{display:flex;align-items:center;gap:14px;padding:16px 32px;
  border-bottom:1px solid var(--hair)}
.hl-run{display:flex;align-items:center;gap:11px}
/* `font-family` is doing real work: .hl-cap and .hl-stat are listed in the
   shared mono label rule near the top of this sheet, which also dresses
   labels on every other screen. Restating it here overrides that for this
   mode only — same specificity, later in the file — and leaves the rest of
   the site exactly as it was. */
.hl-cap{font-family:var(--display);font-size:13px;letter-spacing:.05em;
  color:var(--text-soft)}
.hl-n{font:900 30px/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.hl-side{margin-left:auto;display:flex;gap:18px;align-items:center}
.hl-stat{font-family:var(--display);font-size:13px;letter-spacing:.05em;
  color:var(--text-soft)}
.hl-stat b{color:var(--text);font-weight:700}
.hl-stat.muted{color:var(--text-muted)}
.hl-prev{font-size:14.5px;color:var(--text-soft);padding:10px 32px;
  border-bottom:1px solid var(--hair)}
.hl-prev b{color:var(--text)}
.hl-prev .ok{color:var(--mint);font-weight:700}
.hl-prev .bad{color:var(--rust-text);font-weight:700}
.hl-bar .tag{font:800 12.5px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;
  background:var(--m-hilo);color:var(--on-accent);padding:8px 13px;border-radius:8px}
/* The Higher or Lower question — "Instagram followers", "career passing yards".
   It is the only statement of what is being compared, and at 20px it read as a
   caption above the two cards rather than the question it is. */
.hl-metric{font-family:var(--display);font-weight:900;
  font-size:calc(28px * var(--q-scale,1));line-height:1.2;
  color:var(--text);text-align:center;padding:22px 32px 0}
.hl-stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  gap:14px;padding:18px 32px 0}
/* The ask and the two calls live INSIDE the unknown card, so that card is a
   column with the buttons pinned to its foot and the known card matches it. */
.hl-card{padding:28px 24px;text-align:center;background:var(--sheet);
  border-radius:16px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px}
.hl-card.ok{background:rgba(87,184,148,.12)}
.hl-card.bad{background:rgba(194,90,58,.14)}
/* THE SUBJECT — "Construction of the Taj Mahal begins", "Lady Gaga". This is
   the question: the number beside it is meaningless without it. It was 11px
   mono, letter-spaced, uppercased and muted — the treatment this file gives
   FIELD LABELS, which is what it read as.
   It now takes the same face as the Unlimited question (.qtext): Archivo 900,
   natural case, tight tracking, full-strength colour. Natural case is part of
   the fix and not a side effect — "CONSTRUCTION OF THE TAJ MAHAL BEGINS" in
   caps is measurably slower to read than the same words in sentence case, and
   these run long. */
.hl-subj{font-family:var(--display);font-weight:900;font-size:21px;line-height:1.2;
  letter-spacing:-.01em;text-transform:none;
  color:var(--text);margin-bottom:10px}
.hl-val{font:900 52px/1 var(--display);color:var(--gold);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
/* Still a label, so it keeps its caps — but on the display face at a size
   somebody can actually read, and off the muted grey. */
.hl-unit{font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.06em;color:var(--text-soft);margin-top:8px;
  text-transform:uppercase}
/* THE HIDDEN SIDE IS WHITE, and stays white through the whole roll-up.

   It used to sit at #3E5A5C — a grey barely off the card — as the "?", as it
   counted, and after it landed. Colour then said nothing at any point: the only
   thing marking right from wrong was a faint tint on the card behind it.

   It is var(--text) throughout and never anything else: white on the dark
   sheet, near-black on the light one. Only readability lives on the number.

   The verdict is carried by the things around it — the card tint and the
   "correct"/"wrong" line — deliberately. Colouring the number as well meant
   rust lettering on a rust-tinted card and mint on a mint-tinted one, which is
   the one combination guaranteed to be hard to read, on the one element the
   whole round exists to show. */
.hl-unknown .hl-val,#hlHidden{color:var(--text);letter-spacing:.06em}
/* The second scale, under the unit. Deliberately quieter than .hl-unit: it is
   the same fact said again for people who think in the other one, not a second
   number to compare. */
.hl-alt{font:700 12px/1 var(--mono);letter-spacing:.08em;color:var(--text-soft);
  margin-top:5px;opacity:.85}
.hl-vs{display:flex;align-items:center;justify-content:center;padding:0 4px;
  font:700 10px/1 var(--mono);letter-spacing:.14em;color:var(--text-muted);
  writing-mode:vertical-rl;text-transform:uppercase}
.hl-ask{text-align:center;font-size:15.5px;color:var(--text-soft);padding:18px 0 0}
.hl-ask b{color:var(--text);font-weight:700}
.hl-btns{display:flex;gap:12px;justify-content:center;padding:14px 0 0;
  width:100%;flex-wrap:wrap}
/* THE MOST IMPORTANT THING ON THIS SCREEN, and sized like it. 23px, up from
   the 16 it shipped with: these two words are the entire interaction in this
   mode, and they were reading smaller than the mono labels around them.

   Same face and weight as the question itself — 900 var(--display) — which is
   what .qtext and .hl-metric use. Deliberately NOT tied to --q-scale: that
   multiplier is for the QUESTION, and an admin pushing the question up should
   not drag the buttons along with it.

   The label is pure white in BOTH themes. It has to be: these two buttons keep
   their colour when everything around them flips, so what sits behind the text
   never changes and neither should the text. That is what --on-accent means. */
.hl-btn{font:900 23px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;
  border:0;border-radius:12px;padding:18px 30px;cursor:pointer;color:var(--on-accent);flex:1;
  min-width:130px;transition:transform .1s,box-shadow .1s}
/* Deeper than the --m-hilo / --m-unl the mode cards use, and their own tokens
   rather than a change to those. Same hues, about a tenth darker, which takes
   white-on-fill from 7.69:1 to 9.21:1 on HIGHER and 8.69:1 to 10.85:1 on
   LOWER. The mode cards on the home screen carry small descriptive print and
   stay where they were; these carry two words at 23px and can afford it. */
.hl-btn.up{background:var(--hl-up);box-shadow:0 5px 0 var(--m-hilo-sh)}
.hl-btn.down{background:var(--hl-down);box-shadow:0 5px 0 var(--m-unl-sh)}
/* Hovers re-seated on the darker bases above, so the lift stays the same
   size it always was rather than becoming a jump. */
.hl-btn.up:hover:not(:disabled){background:#8E4023}
.hl-btn.down:hover:not(:disabled){background:#1B4E7A}
.hl-btn:active:not(:disabled){transform:translateY(3px)}
.hl-btn:disabled{opacity:.45;cursor:default}
.hl-btn.chosen{outline:3px solid var(--gold);outline-offset:2px}
.hl-verdict{display:none;text-align:center;padding:16px 0 0;
  font:900 15px/1.3 var(--display)}
.hl-verdict.show{display:block}
.hl-verdict.ok{color:var(--mint)}
.hl-verdict.bad{color:var(--rust-text)}
.hl-foot{text-align:center;font:700 10.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);padding:18px 32px 30px}
/* THE GAME-OVER CARD IS AN OVERLAY, centred in the viewport.

   It used to be appended to the end of the screen and laid out in flow, which
   put it below the two cards — so the run ended and the player had to SCROLL
   to reach "Play again". Nobody should scroll to keep playing.

   Fixed rather than absolute so it centres on the viewport itself and does not
   care how tall the stage below it grew. `overflow-y:auto` with `margin:auto`
   on the card keeps it reachable on a short screen: the overlay scrolls, the
   card stays centred while it fits, and nothing is ever cut off.

   z-index 200 clears the game's own layers (the top bar is 100, the level ring
   120) and stays well under the click-to-edit bar at 10000. */
.hl-over{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:24px;overflow-y:auto;
  background:var(--scrim);
  animation:hl-over-in .18s ease-out}
@keyframes hl-over-in{from{opacity:0}}
/* --panel, not --sheet: --sheet is a translucent veil that reads as a panel
   only when it sits ON one. Over a scrim it would let the cards show through. */
.hl-over-card{background:var(--panel);border:1px solid var(--border);
  border-radius:18px;padding:30px;text-align:center;max-width:440px;
  width:100%;margin:auto;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.hl-over-t{font:900 26px/1.1 var(--display);color:var(--text)}
.hl-over-score{font:900 64px/1 var(--display);color:var(--gold);margin:12px 0;
  font-variant-numeric:tabular-nums}
.hl-over-cap{font-size:12px;letter-spacing:.12em;color:var(--text-muted);margin-bottom:16px;
  font-family:var(--mono);text-transform:uppercase}
.hl-badge{display:inline-block;background:var(--gold);color:var(--ink-2);
  font:900 11px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;
  padding:6px 13px;border-radius:99px;margin-bottom:12px}
.hl-over-rows{text-align:left;margin:0 0 18px}
.hl-over-rows div{display:flex;justify-content:space-between;padding:8px 0;
  border-bottom:1px solid var(--hair);font-size:13.5px}
.hl-over-rows div.muted{color:var(--text-muted)}
.hl-over-rows b{font-family:var(--display);color:var(--text)}
.hl-again{width:100%}
.hl-quit{display:block;margin-top:14px;font-size:13px;color:var(--gold);
  cursor:pointer;text-decoration:none;font-weight:700}