/* Ballpark XI — this game's own rules only.
 *
 * The palette, the bar, the drawer, the footer and the whole landing are
 * shared/xi-tokens.css, xi-chrome.css and xi-landing.css. Nothing here restates
 * a token or writes a .xic- rule; the gates check both. What is left is the one
 * thing no other game in the family has: a slider that has to say how close you
 * were without saying where the answer is until you have locked.
 */

/* THE BROWSER'S DEFAULT 8px BODY MARGIN, RESET. Every other game in the family
   does this in its own stylesheet, and this one did not — so the page sat in a
   gutter and the shared chrome bar started eight pixels in, which is visible on
   every screen and was never reported because it looks like a margin somebody
   chose. HiLo had exactly this and the same reasoning about whose job it is:
   the shell does not do it, so the game must. */
/* THE FAMILY'S FACE, SAID OUT LOUD. This was `body{margin:0}` and nothing
   else, so every element that did not name a font inherited the USER AGENT's
   default — Times New Roman — while the headings, which do name var(--disp),
   came out in Barlow Condensed. The page read half condensed sans and half
   serif and nothing in the tree said why: the fonts load here, and every
   fallback chain in xi-tokens.css ends in sans-serif, so there was no failure
   to find. The cascade simply never asked.
   Measured on the live site 17 Sep 2026: getComputedStyle(document.body)
   returned "Times New Roman" for hilo, grid, whoami and ballpark, and
   "Public Sans" for the other six. aligned_test now refuses a game whose
   stylesheet does not set it, so the eleventh cannot arrive in serif. */
body{margin:0;font-family:var(--body)}

/* ---- the scoreboard ----------------------------------------------------- */

.board{
  /* FIVE CELLS SINCE 18 SEP 2026, when the question counter joined the clock,
     the worth, the score and the substitutions. It was repeat(4,1fr) and the
     fifth dropped onto a row of its own, full width — a layout that was right
     for as long as the count of cells happened to match. Derived from the
     children instead, so a sixth would sit down beside them. */
  display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; margin:0 0 14px;
}
.bd-cell{
  background:var(--card); padding:10px 12px; display:flex; flex-direction:column;
  gap:2px; min-width:0;
}
.bd-l{
  font:600 11px/1.2 "Public Sans",system-ui,sans-serif; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint);
}
.bd-cell>b{
  font:700 26px/1 "Barlow Condensed",system-ui,sans-serif; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.secs small{font-size:13px; font-weight:600; opacity:.6}
/* The last three seconds. Colour is the second signal — the number itself is
   already counting down in front of the player. */
.secs.warn{color:var(--danger)}
.bd-sub{font:500 12px/1.3 "Public Sans",system-ui,sans-serif; color:var(--ink-faint)}
.dots{display:flex; gap:4px; margin:3px 0 1px}
.dots i{
  width:9px; height:9px; border-radius:50%; background:var(--accent);
  opacity:.85; display:block;
}
.dots i.spent{background:transparent; box-shadow:inset 0 0 0 1.5px var(--line)}

@media (max-width:560px){
  .board{grid-template-columns:repeat(2,1fr)}
  /* An odd number of cells leaves the last one orphaned beside an empty half,
     which reads as a cell that failed to load. It takes the row instead. */
  .board .bd-cell:last-child{grid-column:1 / -1}
  .bd-cell>b{font-size:22px}
}

/* ---- the eleven pips ---------------------------------------------------- */

.ladder{display:flex; gap:5px; margin:0 0 14px}
.ladder i{
  flex:1 1 0; height:5px; border-radius:3px; background:var(--line);
  display:block; transition:background .18s ease;
}
.ladder i.ok{background:var(--ok)}
.ladder i.bad{background:var(--danger)}
.ladder i.cur{background:var(--accent)}

/* ---- the question ------------------------------------------------------- */

.stage{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px 18px 16px;
}
.eyebrow{
  font:600 11px/1.2 "Public Sans",system-ui,sans-serif; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px;
}
.q{
  font:600 22px/1.28 "Public Sans",system-ui,sans-serif; color:var(--ink);
  margin:0 0 4px;
}
/* THE DETAIL LINE IS PART OF THE QUESTION, not a footnote. It is what removes
   the ambiguity a fan would otherwise argue with — which competitions, whose
   career, to the nearest thousand — so it is set quieter but not smaller than
   reading size. */
.q small{
  display:block; margin-top:6px; font:400 14px/1.45 "Public Sans",system-ui,sans-serif;
  color:var(--ink-soft);
}

.big{
  display:flex; align-items:baseline; gap:8px; justify-content:center;
  margin:16px 0 10px; min-height:44px;
}
.big span{
  font:700 40px/1 "Barlow Condensed",system-ui,sans-serif; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.big em{
  font:600 15px/1 "Public Sans",system-ui,sans-serif; font-style:normal;
  color:var(--ink-soft);
}
/* Nothing is selected until the player touches the track. A slider that opens
   showing a number is a slider that has already guessed for them. */
.big.empty span{font:500 15px/1.3 "Public Sans",system-ui,sans-serif; color:var(--ink-faint)}

/* WHAT HESITATING COSTS, WHERE THE HESITATING HAPPENS. The clock and the
   falling points were only in the scoreboard at the top — the one place a
   player is not looking while they drag. The same two numbers, from the same
   tick, repeated tight to the value being set: the drama of a per-question
   clock is watching the points fall while you decide, and that only works if
   both are in one glance. Hidden from screen readers because the scoreboard
   already announces them and saying it twice is noise, not emphasis. */
.tension{
  display:flex; gap:14px; justify-content:center; align-items:baseline;
  margin:14px 0 0; min-height:18px;
}
.tension span{
  font:700 17px/1 "Barlow Condensed",system-ui,sans-serif; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.tension i{
  font:600 10px/1 "Public Sans",system-ui,sans-serif; font-style:normal;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  margin-left:3px;
}
.tension span.warn{color:var(--danger)}

/* ---- the column --------------------------------------------------------
 *
 * A RANGE INPUT WITH NOTHING HOLDING IT STRETCHES TO THE VIEWPORT. At 1500px
 * this game's one control rendered 1,431px wide — a hairline across the whole
 * screen with Lock it in stranded at x=27, which is what the owner saw and
 * called "a line and a lock in on the far left".
 * The reason is NOT that it becomes imprecise. Measured on the board that was
 * live: a 43-unit range over 1,431px is 33 pixels per unit, which is the
 * opposite problem — over-precise, and needing an arm's sweep to move three
 * caps. It reads as imprecise only on a wide range, an attendance say. Either
 * way the answer is the same: a control you can cross with one movement, and a
 * column that holds the whole game together instead of four elements each
 * finding their own width.
 */
.game{max-width:720px; margin-left:auto; margin-right:auto}

/* ---- the track ---------------------------------------------------------- */

.track{position:relative; height:44px; margin:6px auto 2px; max-width:560px}
/* A BAR, NOT A LINE. It was a 6px rule and read as a hairline the control
   happened to sit on rather than as the thing being set. At 16px it is a
   trough: the ballpark lights up inside it, the answer's mark crosses it, and
   the thumb rides on it. The tap target is unchanged — .track is still 44px
   tall and the input still covers all of it, so what grew is what you see and
   not what you have to hit. */
.track::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:16px;
  transform:translateY(-50%); background:var(--line); border-radius:9px;
}
.track>span{position:absolute; top:50%; transform:translateY(-50%); pointer-events:none}

/* The ballpark's WIDTH, drawn around the player's own knob — how precise they
   must be. It says nothing about where the answer is. */
.ghost{
  height:16px; border-radius:9px; background:var(--accent); opacity:0;
  transition:opacity .15s ease;
}
.ghost.on{opacity:.22}

/* Both of these appear only after the lock. */
/* Filling the trough exactly, so the ballpark reads as a lit stretch OF the
   bar rather than a shape floating over it. */
.band{height:16px; border-radius:9px; background:var(--ok); opacity:0}
.band.on{opacity:.42}
/* The true value, crossing the bar so it is legible against a lit band. */
.mark{
  width:3px; height:30px; border-radius:2px; background:var(--ink);
  opacity:0; margin-left:-1.5px;
}
.mark.on{opacity:1}

.track input[type=range]{
  position:absolute; inset:0; width:100%; height:44px; margin:0;
  background:transparent; -webkit-appearance:none; appearance:none;
  touch-action:none;
}
.track input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px;
  border-radius:50%; background:var(--accent); border:3px solid var(--card);
  box-shadow:0 1px 4px rgba(0,0,0,.28); cursor:pointer;
}
.track input[type=range]::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; background:var(--accent);
  border:3px solid var(--card); box-shadow:0 1px 4px rgba(0,0,0,.28);
  cursor:pointer;
}
/* Hidden until the player commits, so the track does not show a guess they
   have not made. The knob is driven by hand — see game.js, which explains why
   a range thumb on iOS cannot be relied on to move. */
.track.untouched input[type=range]::-webkit-slider-thumb{opacity:0}
.track.untouched input[type=range]::-moz-range-thumb{opacity:0}
.track input[type=range]:focus-visible{outline:none}
.track input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--accent);
}

/* TIED TO THE TRACK, not to the edges of the screen — the two ends of the
   slider have to sit at the two ends of the slider. */
.ends{
  display:flex; justify-content:space-between; max-width:560px; margin:0 auto 12px;
  font:600 13px/1 "Public Sans",system-ui,sans-serif; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}

.verdict{
  min-height:22px; margin:0 0 12px;
  font:600 15px/1.4 "Public Sans",system-ui,sans-serif; color:var(--ink-soft);
}
.verdict.ok{color:var(--ok)}
.verdict.bad{color:var(--danger)}

/* ---- the buttons -------------------------------------------------------- */

/* Under the control rather than at the far left of whatever width the page
   happens to be, so the thing you press is where you were just looking. */
.acts{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center}
.ghostBtn{
  appearance:none; background:transparent; border:1px solid var(--line);
  color:var(--ink); border-radius:10px; padding:9px 13px; cursor:pointer;
  font:600 14px/1.2 "Public Sans",system-ui,sans-serif;
  display:inline-flex; align-items:baseline; gap:7px; text-decoration:none;
}
.ghostBtn small{font:500 12px/1.2 "Public Sans",system-ui,sans-serif; color:var(--ink-faint)}
.ghostBtn:disabled{opacity:.45; cursor:default}

/* ---- what it is worth --------------------------------------------------- */

.grades{margin-top:16px; border-top:1px solid var(--line); padding-top:12px}
.gr-head{
  font:600 11px/1.2 "Public Sans",system-ui,sans-serif; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 8px;
}
.grades ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.grades li{
  display:flex; justify-content:space-between; gap:12px;
  font:500 14px/1.4 "Public Sans",system-ui,sans-serif; color:var(--ink-soft);
}
.grades li b{
  font:700 15px/1.4 "Barlow Condensed",system-ui,sans-serif; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.grades li span b{font-family:"Public Sans",system-ui,sans-serif; font-size:13px; color:var(--ink-soft)}
/* The rung this guess landed on, once it has. */
.grades li.hit{color:var(--ink)}
.grades li.hit b{color:var(--accent-ink)}

/* ---- the sheet ---------------------------------------------------------- */

.sheet{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.sheet li{
  background:var(--card); padding:8px 12px; display:grid;
  grid-template-columns:22px 1fr auto; gap:10px; align-items:baseline;
  font:500 13px/1.4 "Public Sans",system-ui,sans-serif; color:var(--ink-soft);
  min-height:34px;
}
.sheet li>b{
  font:700 13px/1.4 "Barlow Condensed",system-ui,sans-serif; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.sheet li.ok>b{color:var(--ok)}
.sheet li.bad>b{color:var(--danger)}
.sheet li em{font-style:normal; color:var(--ink-faint); font-variant-numeric:tabular-nums}

/* ---- full time ---------------------------------------------------------- */

/* FULL TIME IS THE FAMILY'S SHEET (the owner, 30 Sep 2026: the same card
   over the board in every game). The card inside is data-xft-host, drawn and
   veiled by shared/xi-fulltime.css; this box stays only as what the game
   shows and hides, and neither paints nor catches a tap -- put away, the
   board and the "Full time" button under it must both be reachable. */
.ft{
  position:fixed; inset:0; background:none; pointer-events:none; display:flex;
  align-items:center; justify-content:center; padding:20px; z-index:60;
}
/* A SOLID COLUMN over the dimmed game: the panel's own card is solid, but its
   community line, next game and way back are text, and on the see-through
   overlay they read over the question underneath. The rest of Full Time is
   the family's panel (shared/xi-fulltime.css). */
.ftCard{max-width:560px; width:100%; display:flex; flex-direction:column; gap:6px;
  background:var(--paper); border-radius:16px; padding:12px; box-sizing:border-box}
.ftBack{align-self:center; padding:10px 14px; color:var(--ink-soft); font:600 14px/1.2 "Public Sans",system-ui,sans-serif}

/* ---- previous boards ----------------------------------------------------
 *
 * These classes are each game's own, not the shared landing's — HiLo and the
 * word search both carry their own copy, and a game that renders the markup
 * without them gets a list of rows with no columns: "Wed 9 SeptTodayTo play",
 * which is what this page shipped with for one deploy. Same structure and the
 * same tokens, so the list reads identically across the family.
 */
.arch-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.arch-head .site-sec{margin:0}
.arch-sub{font-size:12px; color:var(--ink-soft)}
.arch-list{
  list-style:none; margin:8px 0 0; padding:0;
  max-height:min(52vh,420px); overflow:auto;
  border:1px solid var(--line); border-radius:8px; background:var(--card);
}
.arch-row{
  display:grid; grid-template-columns:78px 1fr auto; gap:10px; align-items:center;
  width:100%; min-height:var(--tap); padding:9px 12px;
  border:0; border-bottom:1px solid var(--line); background:none; color:var(--ink);
  text-align:left; font:inherit; cursor:pointer;
}
.arch-list li:last-child .arch-row{border-bottom:0}
.arch-row:hover{background:var(--sel-word)}
.arch-row:focus-visible{outline:none; box-shadow:var(--ring)}
.arch-day{
  font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-soft);
}
.arch-theme{font-size:14px}
.arch-state{
  font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--pitch);
}
/* PAST THE FREE WINDOW. Dimmed AND padlocked, because dimming alone is a
   colour-only signal. The server refuses these whatever the page shows. */
.arch-row.locked{opacity:.62}
.arch-row.locked .arch-state::after{content:" 
F512"}
.arch-empty{padding:12px; font-size:13px; color:var(--ink-soft)}

/* HIDDEN MEANS HIDDEN. A rule that sets `display` on an element beats the user
   agent's `[hidden]{display:none}`, because both are plain declarations and the
   author's wins — so `.ft{display:flex}` put the full-time card on screen over
   the first question of the round, before a ball had been kicked. The same trap
   waits for every button here that toggles with `hidden` and carries a class
   that sets display, so it is fixed once, for the page, rather than per rule. */
[hidden]{display:none !important}

/* ================= THE RESULT =================
   Approved 18 Sep 2026. Lighter greens for decreasing accuracy, grey for the
   band that pays nothing, and gold reserved for one thing only: the answer.
   Nothing here is drawn before the lock — the markup is hidden and the answer
   is not in the page until the server sends it. */
.result{margin:14px 0 0}
.rs-banner{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px;
  padding:12px 16px;border-left:3px solid var(--ok,#1E6B45);
  background:rgba(30,107,69,.07)}
.rs-banner b{font-family:var(--disp);font-weight:700;font-size:20px;
  letter-spacing:.02em;text-transform:uppercase}
.rs-banner span{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink-soft)}
.rs-banner.bad{border-left-color:var(--ink-faint);background:rgba(0,0,0,.05)}
.rs-banner.part{border-left-color:var(--gold)}
/* Three facts, and the distance between them. */
.rs-facts{display:flex;align-items:center;justify-content:center;gap:22px;
  flex-wrap:wrap;margin:0 0 14px;text-align:center}
.rs-fact{display:flex;flex-direction:column;gap:2px}
.rs-l{font-family:var(--disp);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint)}
.rs-fact b{font-family:var(--disp);font-weight:700;font-size:34px;line-height:1;
  color:var(--ink)}
.rs-fact b em{font-style:normal;font-size:14px;color:var(--ink-soft);margin-left:3px}
.rs-away{font-family:var(--disp);font-weight:700;font-size:13px;
  padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.06);color:var(--ink-soft)}
/* The track: zones behind, two labelled markers in front. */
.rs-track{position:relative;height:18px;border-radius:4px;overflow:visible;
  background:var(--line);margin:26px 0 0}
.rs-zones{position:absolute;inset:0;border-radius:4px;overflow:hidden;display:block}
/* A FLOOR ON THE WIDTH, because a true percentage can round to nothing.
   Measured 18 Sep 2026: a question with range 0-100000 and tolerance 1 puts
   every scoring band under 0.5% of the track — so a player who was BANG ON
   would have seen a grey bar, a gold line and no green anywhere, which reads
   as a miss. The floor keeps the innermost bands visible as a tight cluster at
   the answer, which is what they are.
   IT FLOORS WIDTH AND NEVER POSITION: the left edge stays exact, and the two
   markers are positioned independently, so nothing a player reads off the
   track moves. A band drawn 4px wide instead of 0.3px overstates its size on
   the most extreme ranges and that is the honest trade — invisible is wrong,
   slightly wide is legible. */
.rz{position:absolute;top:0;bottom:0;display:block;min-width:4px}
.z-1{background:#1E6B45}
.z-2{background:#4E9370}
.z-3{background:#8FBBA2}
.z-4{background:#C6DCCF}
.z-none{background:#D3D6D0}
.rs-answer,.rs-guess{position:absolute;top:-8px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px}
.rs-answer i{display:block;width:3px;height:34px;background:var(--gold)}
.rs-guess i{display:block;width:14px;height:14px;border-radius:50%;
  background:var(--card);border:3px solid var(--ink);margin-top:2px}
.rs-answer span,.rs-guess span{font-family:var(--disp);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.rs-answer span{color:var(--gold)}
.rs-guess span{color:var(--ink)}
.rs-answer{top:-30px}
.rs-guess{top:-4px}
.rs-ends{display:flex;justify-content:space-between;margin:28px 0 0;
  font-family:var(--disp);font-size:12px;color:var(--ink-faint)}
/* THE KEY, because the bands must not mean anything by colour alone. */
.rs-key{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:6px 16px;font-size:12px;color:var(--ink-soft)}
/* No fill of its own. Each row carries its band's class (.z-1 ...) for the
   chip, and .z-1 also paints a background -- so the whole row went dark green
   with dark text on it, unreadable (found in the app, 25 Sep 2026). */
.rs-key li{display:flex;align-items:center;gap:6px;background:none}
.rs-key i{width:11px;height:11px;border-radius:2px;display:block}
.rs-key .hit{color:var(--ink);font-weight:700}
.rs-key .z-1 i{background:#1E6B45}.rs-key .z-2 i{background:#4E9370}
.rs-key .z-3 i{background:#8FBBA2}.rs-key .z-4 i{background:#C6DCCF}
.rs-key .z-none i{background:#D3D6D0}
.rs-why{margin:14px 0 0;padding:11px 14px;background:rgba(0,0,0,.04);
  font-size:13px;line-height:1.5;color:var(--ink-soft)}
.rs-why b{color:var(--ink)}
/* The guide, collapsed. */
.grades summary{cursor:pointer;display:flex;flex-direction:column;gap:2px;
  padding:10px 0;list-style:none}
.grades summary::-webkit-details-marker{display:none}
.grades .gr-head{font-family:var(--disp);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint)}
.grades .gr-say{font-size:13px;color:var(--ink)}
.grades summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

@media (max-width:620px){
  .rs-facts{gap:14px}
  .rs-fact b{font-size:27px}
  .rs-key{gap:5px 12px;font-size:11.5px}
  .acts .kick,.acts .ghostBtn{width:100%}
}

/* ---- the result, closer to the approved reference ---- */
.rs-banner{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;
  padding:16px 20px;margin:0 0 18px}
.rs-icon{flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:var(--ok,#1E6B45);display:flex;align-items:center;justify-content:center}
.rs-icon::before{content:"\2197";color:#fff;font-size:20px;line-height:1}
.rs-banner.bad .rs-icon{background:var(--ink-faint)}
.rs-banner.bad .rs-icon::before{content:"\2715"}
.rs-banner.part .rs-icon{background:var(--gold)}
.rs-said{display:flex;flex-direction:column;gap:1px;min-width:0}
.rs-said b{font-family:var(--disp);font-weight:700;font-size:21px;
  letter-spacing:.03em;text-transform:uppercase;line-height:1.05}
.rs-pts{font-family:var(--disp);font-weight:700;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.rs-dist{font-size:13.5px;color:var(--ink-soft)}
/* The markers carry their value above the label. */
.rs-answer b,.rs-guess b{font-family:var(--disp);font-weight:700;font-size:19px;
  line-height:1;color:var(--ink)}
.rs-answer,.rs-guess{gap:1px}
.rs-answer{top:-52px}
.rs-guess{top:-52px}
.rs-answer i{margin-top:2px}
/* When the two are close their labels would sit on top of each other, so the
   guess drops a line. Both stay readable; neither is hidden. */
.rs-track.tight .rs-guess{top:-92px}
.rs-track.tight .rs-guess i{height:74px;width:2px;background:var(--ink);
  border-radius:0;border:0;margin-top:2px}
.rs-track.tight .rs-guess::after{content:"";position:absolute;bottom:-9px;
  left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;
  background:var(--card);border:3px solid var(--ink)}
/* Next question: the primary action, inside the card, on the right. */
.acts .kick.next{margin-left:auto;padding:14px 22px;font-size:16px}
.acts .kick.next small{font-weight:400;opacity:.85;margin:0 4px}
/* The guide reads as one row. */
.grades summary{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
.gr-left{display:flex;flex-direction:column;gap:2px;min-width:0}
.gr-more{font-size:14px;color:var(--pitch);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap}
.grades[open] .gr-more i{display:none}
/* The eleven. */
.eleven{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin:18px 0 0;background:var(--card)}
.el-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--line)}
.el-t{font-family:var(--disp);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint)}
.el-n{font-size:12px;font-weight:600;color:var(--ink-soft)}
.eleven .sheet{margin:0;padding:0;list-style:none}
.eleven .sheet li[hidden]{display:none}
.el-foot{margin:0;padding:11px 16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-faint)}
.eleven .sheet li:only-child{border-bottom:0}
@media (max-width:620px){
  .rs-banner{gap:12px;padding:14px}
  .rs-icon{width:36px;height:36px}
  .rs-said b{font-size:18px}
  .acts .kick.next{margin-left:0;width:100%}
  .grades summary{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---- THE LOCKED SCREEN ----------------------------------------------------

   The owner's ruling, 24 Sep 2026: while playing, the page is the screen and
   nothing scrolls, at every size, with the elements scaling up. body.locked
   is set by game.js checkRoom() while the game screen is up, and taken off
   when the question cannot fit (large text, a very short screen) -- then
   every rule here stands down and the page scrolls as it did.

   Under the bar: the scoreboard on one row, the pips, and the stage, which
   has the rest. In the stage the question takes the spare height and game.js
   shrinks it until it is whole; the value, the track and the buttons are
   sized in units of the stage (cqw, cqh). After the lock the result stands in
   for the value and the track, which it repeats. The eleven is a column of
   its own where there is room, and on a phone the pips carry it. */
/* The family's top bar stands in for the scoreboard (shared/xi-matchbar.css). */
#screenGame .board{display:none}
/* AND FOR THE PIPS AND THE SECONDS-AND-POINTS LINE: Progress, Clock and Worth
   are in the bar, a thumb's width above. The line was kept as "one fact,
   rendered twice" for the moment of hesitating; the owner, 26 Sep 2026:
   "Remove the duplicates". Hidden rather than unbuilt: game.js still writes
   them, harmlessly, and the Full Time card's eleven is untouched. */
#screenGame .ladder,#screenGame .tension{display:none}
body.locked{height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column}
body.locked>*{flex:none}
body.locked>footer{display:none}
body.locked>.app{flex:1 1 auto; min-height:0; width:100%; box-sizing:border-box; display:flex; flex-direction:column;
  padding:6px 10px 8px; margin:0}
body.locked .app>:not(#screenGame){display:none}
body.locked #screenGame{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
body.locked .game{flex:1 1 auto; min-height:0; width:100%; max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr);
  grid-template-areas:"board" "ladder" "stage"}

body.locked .board{grid-area:board; grid-template-columns:repeat(5,minmax(0,1fr)); margin:0 0 6px}
body.locked .board .bd-cell:last-child{grid-column:auto}
body.locked .bd-cell{padding:5px 8px; gap:1px}
body.locked .bd-l{font-size:9px; letter-spacing:.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.locked .bd-cell>b{font-size:clamp(18px,2.8vh,30px)}
body.locked .bd-sub{display:none}
body.locked .ladder{grid-area:ladder; margin:0 0 6px}
body.locked .eleven{display:none}

body.locked .stage{grid-area:stage; min-height:0; overflow:hidden; container-type:size;
  display:flex; flex-direction:column; padding:10px 14px}
body.locked .eyebrow{display:none}
body.locked .q{flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column;
  justify-content:center; margin:0; font-size:clamp(17px,min(6.2cqw,4.6cqh),40px); line-height:1.25}
body.locked .q small{font-size:max(13px,.64em)}
body.locked .tension{margin:.6cqh 0 0}
body.locked .big{margin:1cqh 0 .6cqh; min-height:0}
body.locked .big span{font-size:clamp(34px,9cqh,76px)}
body.locked .big.empty span{font-size:clamp(14px,2.4cqh,19px)}
/* FULL WIDTH, SAID. In the stage's flex column an auto side margin takes the
   free space, so the track -- whose every child is absolutely positioned --
   shrank to its content: none. The slider was 0px wide at every size from
   24 Sep 2026, 23:00 until this, and nobody could place a guess. The end
   labels collapsed the same way ("374879"). Width is stated; the 560px cap
   still holds it to one sweep of the thumb. */
body.locked .track{height:max(44px,7cqh); margin:.6cqh auto 0; width:100%; box-sizing:border-box}
body.locked .ends{width:100%; box-sizing:border-box}
body.locked .ends{margin:0 auto .8cqh}
body.locked .verdict{margin:0 0 .8cqh; min-height:0}
/* One row, not two: on a phone the buttons were full width each, stacked,
   which is 50px of a locked screen spent on a gap between two buttons. */
body.locked .acts{flex-wrap:nowrap}
body.locked .acts .kick,body.locked .acts .ghostBtn{min-height:max(44px,6.5cqh); width:auto; flex:1 1 0;
  justify-content:center; margin-left:0}
body.locked .grades{margin-top:.8cqh; padding-top:.8cqh}
/* The guide stays before the lock -- a strict question shows its harsher terms
   there, which is the point of it -- as one line: its heading and the way in. */
body.locked .grades .gr-say{display:none}
body.locked .grades summary{flex-direction:row; align-items:center}
body.locked .result{margin:.4cqh 0 0}
body.locked .rs-banner{padding:.8cqh 12px; margin:0 0 1cqh; gap:10px}
body.locked .rs-icon{width:30px; height:30px}
body.locked .rs-said b{font-size:clamp(16px,3cqh,24px)}
body.locked .rs-key{margin-top:1cqh}
body.locked .rs-facts{margin-bottom:1.2cqh}
body.locked .rs-ends{margin-top:max(12px,2cqh)}
/* THE MARKERS KEEP THEIR NAMES AND LOSE THEIR NUMBERS on a locked screen. The
   guess and the answer are printed large just above, and the numbers on the
   markers sat 52px up -- on top of those figures once the margins were
   trimmed to fit a 360x640 phone (found in the app, 25 Sep 2026). A name and
   the mark itself need 26px. */
body.locked .rs-answer b,body.locked .rs-guess b{display:none}
body.locked .rs-answer{top:-24px}
body.locked .rs-guess{top:-26px}
body.locked .rs-track.tight .rs-guess{top:-4px}
body.locked .rs-track.tight .rs-guess span{display:none}
body.locked .rs-track.tight .rs-guess i{height:14px;width:14px;border-radius:50%;border:3px solid var(--ink);background:var(--card);margin-top:2px}
body.locked .rs-track.tight .rs-guess::after{display:none}
/* The sentence under the result explains the band; on a locked screen it is
   set small rather than dropped, because it is the one line that says why
   the points are what they are. */
body.locked .rs-why{margin-top:.8cqh; font-size:12.5px; line-height:1.35}
body.locked .acts .kick.next{padding:8px 16px}

/* Room beside the stage: the eleven comes back, in a column of its own that
   scrolls inside itself if it must. */
@media (min-width:960px){
  body.locked .game{grid-template-columns:minmax(0,1fr) 300px; column-gap:16px;
    grid-template-areas:"board board" "ladder ladder" "stage eleven"}
  body.locked .eleven{display:block; grid-area:eleven; margin:0; min-height:0; overflow:auto; align-self:stretch}
}

/* Full Time is a card over the board. Its own height is capped at the screen
   and it scrolls inside itself, so the page under it never has to. */
.ftCard{max-height:100%; overflow:auto}

/* HOW TO PLAY, ON A LOCKED SCREEN. The bar's "How to play" goes to #how, and
   while the play screen is locked that section is hidden with the rest of the
   landing -- so the link did nothing mid-game (found 24 Sep 2026, the day the
   screens were locked). As its target it opens over the game instead, a panel
   the height of the screen that scrolls in itself, with the way back at the
   top; leaving the target closes it. The page under it never scrolls. */
/* Its own column, now that it is not inside the landing screen. */
.how{max-width:1080px;margin:0 auto;padding:8px 20px 40px;box-sizing:border-box}
.how-back{display:none}
body.locked #how:target{display:block!important;position:fixed;inset:0;z-index:60;margin:0;max-width:none;
  overflow:auto;overscroll-behavior:contain;background:var(--paper);padding:14px 16px 40px;box-sizing:border-box}
body.locked #how:target .how-back{display:inline-flex;align-items:center;min-height:var(--tap,44px);padding:0 16px;
  margin:0 0 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);
  font-family:var(--disp);font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}

/* ---- THICKER BARS (the owner, 27 Sep 2026, from the iPad: "I'd like this bar
   to be taller/thicker") --------------------------------------------------
   Both of them: the trough the guess is set on, 16px -> 28px, and the result
   bar the answer is shown on, 18px -> 30px. Written once, here, after every
   rule that places something on either bar, so each number that moves with
   the height moves in one place. The result bar's markers are placed from
   its TOP, so each moves down to stay on its centre (lock_test measures it:
   the ring within 3px of the bar's centre line), and the gold answer line
   grows by the full 12px to still cross it. */
.track::before{height:28px; border-radius:14px}
.ghost,.band{height:28px; border-radius:14px}
.mark{height:42px}
.track input[type=range]::-webkit-slider-thumb{width:34px; height:34px}
.track input[type=range]::-moz-range-thumb{width:34px; height:34px}
.rs-track{height:30px; border-radius:6px}
.rs-zones{border-radius:6px}
.rs-answer{top:-52px}
.rs-answer i{height:46px}
.rs-guess{top:-36px}
.rs-track.tight .rs-guess{top:-86px}
body.locked .rs-answer{top:-24px}
body.locked .rs-guess{top:-10px}
body.locked .rs-track.tight .rs-guess{top:2px}

/* A FINGER SLIDES (js/game.js), so on a touch screen the strip it can land on
   is taller than the bar: 64px to catch, the 28px bar drawn in its middle.
   The input fills the strip, whatever its height. */
.track input[type=range]{height:100%}
@media (pointer: coarse){
  .track{height:64px}
  body.locked .track{height:max(64px,7cqh)}
}
/* The track takes the pointer (js/game.js); the input under it takes none, so
   the browser's own range control cannot jump a finger's slide to where it
   landed. It is still the focusable control for the keyboard. */
.track{touch-action:none}
.track input[type=range]{pointer-events:none}

/* FULL WIDTH, as the result bar below it already is -- the owner, 27 Sep 2026:
   "make the slider full width too". The 560px cap held the track to one sweep
   of a thumb; a finger now slides the knob by as far as it moves (js/game.js),
   so a wider track is finer control rather than a longer reach. The end
   labels stay tied to the track's ends. */
.track,.ends{max-width:none}

/* ================= IN SECTIONS =================
   The owner's approved mockup of 27 Sep 2026: four cards down the stage --
   the question, your guess, the substitutions, the last answer -- instead of
   one card holding everything. Written last so each rule here states the
   section layout once rather than threading it through the rules above.
   The stage becomes the column the cards sit in; the cards carry the card
   styling the stage used to. */
.stage{background:none; border:0; border-radius:0; padding:0;
  display:flex; flex-direction:column; gap:8px}
.sec{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 16px}
.sec-h{margin:0 0 6px; font-family:var(--disp); font-weight:700; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
  display:flex; justify-content:space-between; gap:10px}
.sec-h em{font-style:normal; letter-spacing:.06em; color:var(--pitch); text-transform:none;
  font-family:var(--body); font-weight:600; font-size:12px}
.sec-q .grades{margin-top:8px; padding-top:4px}
.sec-guess .big{margin:4px 0 6px}
.sec-guess .ends{margin-bottom:6px}
.sec-guess .verdict{margin:0 0 6px; text-align:center; min-height:0}
.sec-guess .verdict:empty{display:none}
.sec-guess .acts .kick{min-width:min(100%,260px)}
/* THE SUBSTITUTIONS ARE ONE ROW: how many are left, in words, and the one
   thing they buy. The dots are in the top bar a thumb's width above, so they
   are not drawn twice (the owner, 26 Sep 2026: "Remove the duplicates"). */
.sec-subs{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px 8px 16px}
.subs-say{margin:0; font-size:14px; color:var(--ink-soft)}
.subs-say b{font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-right:6px}
.subs-say span{font-weight:600; color:var(--ink)}
.sec-subs .ghostBtn{flex:none}

/* THE LAST ANSWER, COMPACT: the verdict on one line and the bar with the
   answer and the guess on it. The two big figures, the band key and the
   sentence about the clock are the full result's, and the line above says
   the guess, the answer and the distance in words -- so they are not drawn
   here. The markers lose their labels; a legend under the bar says which is
   which, by shape as well as colour. */
.sec-last{padding:10px 16px 8px}
.sec-last .result{margin:0}
.sec-last .rs-facts,.sec-last .rs-key,.sec-last .rs-why{display:none}
.sec-last .rs-banner{margin:0 0 8px; padding:0; gap:10px; background:none; border:0; align-items:center}
.sec-last .rs-icon{width:26px; height:26px}
.sec-last .rs-icon::before{font-size:14px}
.sec-last .rs-said{flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:10px; row-gap:0; flex:1 1 auto}
.sec-last .rs-said b{font-size:16px}
.sec-last .rs-dist{font-size:13px}
.sec-last .rs-pts{order:3; margin-left:auto; font-size:15px}
.sec-last .rs-track{margin:0; height:22px; border-radius:5px}
.sec-last .rs-zones{border-radius:5px}
.sec-last .rs-answer b,.sec-last .rs-answer span,.sec-last .rs-guess b,.sec-last .rs-guess span{display:none}
.sec-last .rs-answer{top:-6px}
.sec-last .rs-answer i{height:34px; margin-top:0}
.sec-last .rs-guess,.sec-last .rs-track.tight .rs-guess{top:2px}
.sec-last .rs-guess i,.sec-last .rs-track.tight .rs-guess i{width:12px; height:12px; margin-top:0;
  border-radius:50%; border:3px solid var(--ink); background:var(--card)}
.sec-last .rs-track.tight .rs-guess::after{display:none}
.sec-last .rs-ends{margin:6px 0 0; align-items:center; font-size:11px}
.rs-legend{display:inline-flex; align-items:center; gap:5px; color:var(--ink-faint);
  font-family:var(--body); font-size:11px}
.rs-legend i{display:inline-block}
.rs-legend .la{width:3px; height:12px; background:var(--gold); margin-left:6px}
.rs-legend .lg{width:9px; height:9px; border-radius:50%; border:2px solid var(--ink); margin-left:6px}
body.locked .sec-last .rs-answer{top:-6px}
body.locked .sec-last .rs-guess,body.locked .sec-last .rs-track.tight .rs-guess{top:2px}
body.locked .sec-last .rs-ends{margin-top:6px}

/* THE SECTIONS ON A LOCKED SCREEN. The question's card takes the height the
   others leave and the question shrinks inside it (game.js fitQuestion); the
   other three are their own size. Nothing is hidden after a lock any more:
   the verdict shows in Your guess and the result in Last answer. */
body.locked .stage{padding:0; gap:6px; overflow:hidden}
body.locked .sec{padding:8px 12px}
body.locked .sec-q{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden}
body.locked .sec-q>:not(.q){flex:none}
body.locked .sec-h{margin-bottom:3px}
body.locked .sec-guess .big{margin:.4cqh 0 .2cqh}
body.locked .sec-guess .big span{font-size:clamp(30px,7cqh,64px)}
body.locked .sec-guess .track{margin-top:0}
body.locked .sec-guess .ends{margin-bottom:.6cqh}
body.locked .sec-guess .verdict{margin-bottom:.6cqh; font-size:14px}
body.locked .sec-guess .acts .kick{flex:0 1 auto; min-width:min(100%,260px)}
body.locked .sec-subs{padding:6px 8px 6px 12px}
body.locked .sec-subs .ghostBtn{min-height:40px; flex:none; width:auto}
body.locked .sec-last{padding:6px 12px}
body.locked .sec-last .rs-banner{margin-bottom:6px; padding:0}
body.locked .sec-last .rs-said b{font-size:clamp(14px,2.4cqh,17px)}
@media (max-width:420px){
  .sec-last .rs-dist{font-size:12px}
  .subs-say b{display:block; margin:0 0 1px}
}
/* The prompt before a guess is a sentence, not a figure: kept at reading size
   when the value above is scaled up. */
body.locked .sec-guess .big.empty span{font-size:clamp(14px,2.4cqh,19px)}
.rs-q{display:none}
/* A PHONE HAS NO ROOM FOR THE SECTION HEADINGS, which is how the approved
   mockup drew it: the question, the value and the buttons say what they are,
   the substitutions row says so in words, and the last answer names its
   question inside its own verdict line. What that buys is height for the
   question, which game.js otherwise has to shrink -- a 290-character question
   has to stay whole on a 360x640 screen (tools/lock_test.mjs). */
@media (max-width:620px){
  body.locked .sec-q>.sec-h,body.locked .sec-guess>.sec-h,body.locked .sec-last>.sec-h{display:none}
  body.locked .sec-last .rs-q{display:inline; font-family:var(--disp); font-weight:700; font-size:14px; color:var(--ink-faint)}
  body.locked .sec-last .rs-icon{display:none}
  body.locked .sec-q .grades{margin-top:2px; padding-top:0}
  body.locked .sec-q .grades summary{padding:3px 0}
  body.locked .sec-q .grades .gr-more{font-size:12.5px}
  body.locked .sec-subs{padding:3px 6px 3px 12px}
  body.locked .sec-subs .ghostBtn{min-height:36px; padding:6px 10px}
  body.locked .sec-guess .acts .kick{min-height:40px}
  body.locked .sec-last{padding:5px 12px}
  body.locked .sec-last .rs-banner{margin-bottom:4px}
  body.locked .sec-last .rs-ends{margin-top:4px}
  body.locked .stage{gap:5px}
}