/* ============================================================
   HIGHER / LOWER

   Ported from the approved mockup. The tokens come from juq.css and system.css
   rather than being restated here; everything else is the mockup's, copied
   across rather than re-derived.
   ============================================================ */

/* ---------- mode, the first choice ---------- */
.hl-modes { display: flex; margin: var(--s-7) 0 var(--s-5); border: var(--bw) solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.hl-modes button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  font-size: var(--t-h3); font-weight: 700; padding: var(--s-5) var(--s-6); cursor: pointer;
  background: var(--surface); color: var(--muted); border: 0; border-right: var(--bw) solid var(--ink);
}
.hl-modes button:last-child { border-right: 0; }
.hl-modes button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }

/* ---------- the scoreboard ---------- */
.hl-bar { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-6); }
.hl-bar .spacer { flex: 1; }
.hl-score { display: flex; align-items: baseline; gap: var(--s-3); }
.hl-score b { font-family: var(--f-mono); font-size: clamp(28px, 5vw, 40px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.hl-score .hl-best { color: var(--muted); }
.hl-lives { display: flex; gap: var(--s-2); }
.hl-lives i { width: 12px; height: 12px; border-radius: 2px; background: var(--accent); }
.hl-lives i.gone { background: var(--line-strong); }

/* ---------- the board ----------
   Two panels, always the same size, so nothing reflows when a number appears.
   The question sits BETWEEN them rather than above: it is about the pair, and
   putting it over the top made you look away from the thing you are judging. */
.hl-board { display: grid; grid-template-columns: 1fr auto 1fr; border: var(--bw) solid var(--ink); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 760px) { .hl-board { grid-template-columns: 1fr; } }

/* NO `overflow: hidden` HERE. It was clipping the top of the More button:
   a centred flex column whose content is taller than min-height overflows
   BOTH ends equally, and the hidden overflow ate the top one. The art is
   `inset: 0` so it cannot escape anyway, and .hl-board already clips the
   rounded corners, so nothing needed it. */
.hl-side { position: relative; min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-5); padding: var(--s-8) var(--s-6); text-align: center; background: var(--surface); }
.hl-side .art { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.22; filter: grayscale(1); }
.hl-side > * { position: relative; z-index: 1; }
.hl-name { font-size: clamp(20px, 3vw, 30px); font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 1.05; letter-spacing: -0.01em; margin: 0; }
.hl-val { font-family: var(--f-mono); font-size: clamp(26px, 4.5vw, 38px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hl-val small { display: block; font-size: var(--t-micro); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-3); }

/* The middle column carries the question, so both faces stay in view.
   Back to the mockup's width: this was briefly widened to 380px while chasing
   what looked like a wrapping problem, and was never the cause. */
.hl-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4); padding: var(--s-7) var(--s-6); background: var(--surface-2); border-left: var(--bw) solid var(--ink); border-right: var(--bw) solid var(--ink); min-width: 230px; max-width: 280px; }
@media (max-width: 760px) { .hl-mid { border-left: 0; border-right: 0; border-top: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); max-width: none; } }

/* THE QUESTION IS THE ROUND, so it is ONE SENTENCE at one size, wrapping
   naturally. An earlier version set the lead-in and the stat at label size and
   the word "or" in big accent type, which put the loudest emphasis on the least
   important word in the sentence. Everything reads at one weight except the two
   words that decide the round.

   THIS IS THE MOCKUP'S, unchanged. A pass during the port broke it into three
   fixed lines to stop "more" stranding; it was approved as it stands and the
   stranding was a symptom of a narrower column, not of the sentence. */
.hl-q { text-align: center; font-size: clamp(16px, 2vw, 21px); line-height: 1.45; color: var(--ink); }
/* "more or less" IS A PHRASE, so it never splits. Left to itself the browser
   picked its own break points and they moved with the length of the stat: with
   "hours watched?" it broke well, with "total followers?" it stranded "more"
   alone on a line. INLINE, not block - it cannot force a break, it can only
   refuse to be broken through, so the sentence still flows and simply wraps
   around the phrase instead of through it. */
.hl-q .hl-dir { white-space: nowrap; }
.hl-q b { font-weight: 800; }
.hl-q em { font-style: normal; font-weight: 900; }
/* The period the question is asked over. On the question rather than in a
   disclaimer, because it is the difference between two of these questions:
   "total followers" is a lifetime count and "followers gained" is 30 days. */
.hl-q i { display: block; margin-top: var(--s-4); font-style: normal; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* Enough gap that the offset shadow of the top button clears the bottom one. */
.hl-guess { display: flex; flex-direction: column; gap: var(--s-7); width: 100%; max-width: 260px; }
.hl-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3); cursor: pointer;
  font-family: var(--f-display); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: var(--t-h3); letter-spacing: 0.01em; padding: var(--s-5) var(--s-6);
  border: var(--bw) solid var(--ink); border-radius: var(--radius);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s;
}
.hl-btn:hover { transform: translate(5px, 5px); }
.hl-btn:disabled { opacity: 0.4; pointer-events: none; }

/* DIRECTION IS GREEN AND RED, FIXED IN EVERY SKIN.
   Up is up whatever the theme is doing, and this is the one thing on the page
   you can misread and lose a life over. Deliberately not the accent: orange is
   "this is the site's colour", green and red are "this is which way".

   THE FILLS ARE TRANSLUCENT, which is what lets fixed colours live in four
   skins: the same rgba over a dark surface gives a dark tint and over a light
   one gives a pale tint. The offset shadow is a darker tone of the button's OWN
   colour rather than --ink, which in the dark skin is near-white and read as a
   paper drop shadow. */
.hl-btn.hl-up { color: #3fbe74; border-color: #2fa360; background: rgba(47, 163, 96, 0.16); box-shadow: 5px 5px 0 #14502f; }
.hl-btn.hl-down { color: #ef6a6a; border-color: #d64545; background: rgba(214, 69, 69, 0.16); box-shadow: 5px 5px 0 #5c1d1d; }
.hl-btn.hl-up:hover { background: rgba(47, 163, 96, 0.28); box-shadow: 0 0 0 transparent; }
.hl-btn.hl-down:hover { background: rgba(214, 69, 69, 0.28); box-shadow: 0 0 0 transparent; }
.hl-q .hl-up { color: #3fbe74; }
.hl-q .hl-down { color: #ef6a6a; }

.hl-mark { position: absolute; top: var(--s-5); right: var(--s-5); font-family: var(--f-mono); font-size: var(--t-h2); font-weight: 800; }
.hl-mark.ok { color: #3fbe74; }
.hl-mark.no { color: #ef6a6a; }
.hl-side.right.win { background: rgba(47, 163, 96, 0.10); }
.hl-side.right.lose { background: rgba(214, 69, 69, 0.10); }

/* ---------- after the run ----------
   The run's whole point was the number, so the number is what it shows. */
.hl-over { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; padding: var(--s-8); margin-top: var(--s-6); border: var(--bw) solid var(--ink); border-radius: var(--radius); background: var(--surface); box-shadow: 8px 8px 0 var(--accent); }
.hl-over[hidden] { display: none; }
.hl-over .big { font-family: var(--f-mono); font-size: clamp(46px, 9vw, 80px); font-weight: 800; line-height: 0.9; font-variant-numeric: tabular-nums; letter-spacing: -0.05em; color: var(--accent); }
.hl-over .big small { display: block; font-family: var(--f-mono); font-size: var(--t-label); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-3); }
.hl-over-txt { flex: 1; min-width: 200px; }
.hl-over-txt h3 { margin: 0 0 var(--s-3); font-size: var(--t-h2); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1; }
.hl-over-txt p { margin: 0; color: var(--muted); font-size: var(--t-md); }
/* Only exists when there is something to celebrate, so it is never a label
   reading "not a personal best". */
.hl-pb { display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); padding: var(--s-2) var(--s-4); border: var(--bw) solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--btn-ink); font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.hl-over-acts { display: flex; flex-direction: column; gap: var(--s-4); }
@media (max-width: 620px) { .hl-over { gap: var(--s-6); padding: var(--s-6); } .hl-over-acts { width: 100%; } }

/* ---------- provenance ----------
   The freshness figure is the OLDEST entry in the pool, because that is a
   guarantee rather than a flattering pick, and it degrades honestly in public
   if the refresh ever stops. */
.hl-prov { margin: var(--s-6) 0 0; }

/* ---------- leaderboard ---------- */
.hl-lb { margin: var(--s-10) 0 var(--s-11); }
.hl-lb-h { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-5); }
.hl-lb-h h2 { margin: 0; font-size: var(--t-h2); letter-spacing: -0.02em; }
.hl-lb-h .spacer { flex: 1; }
.hl-rows { border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.hl-row { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.hl-row:last-child { border-bottom: 0; }
.hl-row:nth-child(even) { background: var(--surface-2); }
.hl-row .rk { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); width: 26px; font-variant-numeric: tabular-nums; }
.hl-row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-row .st { font-family: var(--f-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.hl-row.me { background: var(--accent-soft); }
.hl-row.me .who { font-weight: 800; }