/* ---------- GeoGauntlet ----------
   Name 3 countries, ranked against what is LEFT. Its own screen, like Higher
   or Lower: it shares no element with the round modes, because every mode that
   has shared #qcard has ended up fighting the other one for it.

   ADMIN-ONLY AT LAUNCH, so none of this is on screen for an ordinary player —
   the card that opens it is not drawn until /api/gg/enabled says yes. */
/* THE INSET IS NOT DECORATION. This was `padding:0`, which is invisible on a
   desktop — the 640px column sits in a 1240px card with room either side — and
   is the whole problem on a phone, where the card fills the screen and every
   row ends up flush against its edge. "back to modes" sat ON the border, and
   .wrap is overflow:hidden, so anything a pixel wider was silently clipped
   rather than scrolled to. box-sizing is border-box globally, so the padding
   comes out of the 640 rather than adding to it. */
.gg-wrap{padding:0 16px;max-width:640px;margin:0 auto}
/* THE PLAY SCREEN IS TWO COLUMNS: the round on the left, how to play on the
   right. The rules panel is beside the game rather than above it because it is
   reference, not preamble — a player mid-round should be able to glance at it
   without the board moving. Below 980px the aside drops under the board, where
   it is the last thing on the screen rather than the first. */
.gg-wrap.wide{max-width:1010px;display:grid;gap:14px 30px;align-items:start;
  grid-template-columns:minmax(0,1fr) 300px}
.gg-wrap.wide > .gg-bar{grid-column:1/-1}
/* THE RULES PANEL MUST NOT SET THE CARD'S HEIGHT.

   A grid row is as tall as its tallest column, and the aside is reference text
   that grew every time the scoring needed explaining — measured at 666px
   against the game's 580. So the card was 714 tall on a screen with 720 of
   room, and the code that positions it had to choose between showing the
   question and showing Submit. Neither is acceptable and neither was the real
   problem.

   Capped to what the window actually has, and it scrolls inside itself past
   that. The game column now decides the height, which is the right way round:
   the round is the thing that has to fit, and the rules are there to be
   glanced at.

   Two columns only. Below 980px the aside sits under the board in a page that
   already scrolls, and an inner scrollbar there would be a second place to
   scroll for no reason. */
@media (min-width:981px){
  .gg-wrap.wide > .gg-how{max-height:calc(100vh - 150px);overflow-y:auto}
}
/* THE BOARDS COLUMN ON THE MENU. .gg-wrap.wide already lays out a 300px second
   column — it is the same grid the play screen puts How to play in — so this
   only has to say how tall the panel is and when it is not there at all.

   A FLOOR, NOT A HEIGHT. The three variant cards are the left column and they
   are short; without a minimum the panel would be as tall as its own three
   rows and would sit against the top of the screen looking like a stray card.
   Matching it to the games beside it makes the two read as one screen.

   NOT ON A PHONE, which is where the grid has collapsed to one column anyway —
   a box that rewrites itself every four seconds would sit between somebody and
   the game they came to press. The home screen's panel makes the same call for
   the same reason (see .leaders in theme.css). */
/* NO FLOOR OF ITS OWN. .lead-slot already carries min-height:132px, which is
   what stops a one-score board collapsing; anything on top of that here would
   only make the panel overhang the games beside it and stretch the card. */
/* THE BOARDS START WHERE THE GAMES DO, not where the heading does.

   Aligned by the GRID rather than by a margin, which is the whole point of
   doing it this way: the heading is its own row now, so the games and the
   boards are two columns of the row under it and their tops are the same top by
   construction. A margin would have had to equal the heading's height — and
   that height changes with the viewport (.gg-prompt is a clamp), with a
   translated string, and with anything an admin types into gauntlet.prompt.

   EXPLICIT ROWS, because auto-placement would not do this. The heading is one
   column wide, so the next item would flow into the empty cell BESIDE it —
   putting the boards level with the heading again, which is where they started. */
/* ROOM UNDER BOTH COLUMNS, on the wrap rather than on either one of them. The
   games and the boards now end on the same line, so a margin under just one of
   them would break the alignment that line is for; padding here moves the pair
   off the border together. */
.gg-menu-wrap{padding-bottom:22px}
.gg-menu-wrap > .gg-head{grid-column:1;grid-row:2}
.gg-menu-wrap > .gg-main{grid-column:1;grid-row:3;align-self:stretch}
.gg-menu-wrap > .gg-boards{grid-column:2;grid-row:3}
/* THE THREE GAMES SPAN THE BOARDS BESIDE THEM: the top of GeoGauntlet level
   with the top of the panel, the bottom of SportsGauntlet level with its
   bottom, and the space shared out between them.

   SPACE-BETWEEN, NOT A GAP MEASURED BY HAND. The arithmetic today is 209px of
   panel less three 52px cards, so 26.5px between each — a number that would be
   wrong the moment a board gains a row, the panel's padding changes, or a name
   wraps. Stretching the column to the row and letting flex distribute the
   slack keeps the two edges aligned without anyone maintaining a figure.

   `align-self:stretch` IS THE OTHER HALF, and without it this does nothing:
   .gg-wrap.wide sets align-items:start, so a grid item is only as tall as its
   own content and there is no slack to distribute.

   WRITTEN AS `.gg-main > .gg-menu-slots` because .gg-slots sets margin-bottom
   further down this same file — equal specificity, later wins, and a bare
   class here would have been silently ignored. */
.gg-main > .gg-menu-slots{height:100%;justify-content:space-between;margin-bottom:0}
@media (max-width:980px){
  /* NO BOARDS ON A PHONE, so there is nothing to line the games up with and
     they go back to sitting at their natural spacing — with a little room left
     under the last one, which the panel was providing on a desktop. */
  .gg-boards{display:none}
  .gg-main > .gg-menu-slots{height:auto;justify-content:flex-start;margin-bottom:28px}
  .gg-wrap.wide{grid-template-columns:minmax(0,1fr);max-width:640px}
  /* One column, so the how-to-play panel is directly under the board and is
     itself taller than the open suggestion list — the card cannot end where the
     list begins, and .gg-room would only be a hole in the middle of the page. */
  .gg-room{display:none}
}
.gg-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.gg-bar .tag{background:var(--accent);color:var(--on-accent);border-radius:999px;
  padding:3px 10px;font:900 10.5px/1.5 var(--display);letter-spacing:.08em;
  text-transform:uppercase}
.gg-back{margin-left:auto;font-size:13px;color:var(--gold);cursor:pointer;font-weight:700}
/* The pair of ways out at the end of a round. margin-left:auto above pushes a
   lone .gg-back to the right of its bar; inside this row the two links are
   centred as a pair instead, and wrap rather than squeeze on a narrow screen. */
.gg-finalnav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  margin-top:14px}
.gg-finalnav .gg-back{margin-left:0}
.gg-hud{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.gg-round{font:900 15px/1 var(--display);letter-spacing:.04em}
/* The running score, and ONLY the running score. It used to read "212.4 / 1000"
   — the number you have next to the number you almost certainly will not reach,
   which is a discouraging thing to stare at for ten rounds. How much a round is
   worth is in the how-to-play panel, where it reads as a rule rather than as a
   shortfall. */
.gg-total{margin-left:auto;font:900 26px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums}
/* NO CLOCK. There used to be a 60-second bar here; the mode plays untimed now,
   so the rule it needed is gone rather than left hidden.

   THE CLAMP FLOOR IS THE PHONE SIZE. `clamp(min, Nvw, max)` on a 375px screen
   resolves to the MINIMUM — 3.4vw is 12.75px there — so the middle term only
   ever does anything on a desktop and every one of these numbers was really
   "what mobile gets". The floors were tuned looking at a laptop, which is how
   the question ended up at 19px and its ranking at 15px on the device most of
   this is played on. Both floors are now the size a phone should show, and the
   ceiling is what a desktop grows to. */
/* The size is a starting point, not a rule: ggRender steps it down when the
   question is long enough to wrap past two lines. An inline font-size beats
   this, which is exactly what the fitter relies on. */
.gg-prompt{font-family:var(--display);font-weight:900;font-size:clamp(25px,5vw,30px);
  line-height:1.16;margin:10px 0 6px;overflow-wrap:anywhere}
/* The ranking half of the question, one size down from the ask and set in the
   accent — it is the half that changes every round, and a player who skims the
   category and misses "smallest first" has lost the round before typing. */
.gg-rank{font-family:var(--display);font-weight:900;
  font-size:clamp(19px,3.6vw,22px);line-height:1.25;color:var(--gold);
  margin-bottom:10px;overflow-wrap:anywhere}
/* Neon, on the theme it reads as neon on. --gold is #B8E62B against a dark
   panel here and a dark olive on white in light mode, where a glow would only
   look like a smudge — so the halo is scoped to dark rather than applied to
   both and apologised for. */
html:not([data-theme="light"]) .gg-rank{
  text-shadow:0 0 18px rgba(184,230,43,.45), 0 0 4px rgba(184,230,43,.35)}
/* The category's small print. Quieter than .gg-sub, which carries the pool
   size and is part of the question; this is a caveat about where the list came
   from and should read as a footnote rather than as an instruction. */
.gg-note-line{font-size:12.5px;line-height:1.45;color:var(--text-muted);
  margin:-4px 0 10px;max-width:60ch}
.gg-sub{font-size:13px;color:var(--text-soft);margin-bottom:16px}
.gg-sub b{color:var(--text)}
/* How to play. Reference text, so it is quiet — until the example, which is
   the part that actually explains the mode. */
.gg-how{border:1px solid var(--border);border-radius:14px;background:var(--panel);
  padding:15px 17px;font-size:13.5px;line-height:1.6;color:var(--text-soft)}
.gg-how h4{margin:0 0 8px;font:900 11px/1 var(--display);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text)}
.gg-how p{margin:0 0 10px}
.gg-how p:last-child{margin-bottom:0}
.gg-how .eg{border-top:1px solid var(--border);padding-top:10px;margin-top:2px}
.gg-how .eg q{quotes:none;display:block;font-weight:700;color:var(--text);
  margin-bottom:4px}
.gg-how b{color:var(--text)}
/* Three slots, filled as they are named. Empty ones are visible from the start
   so the shape of the round is obvious before a word is typed. */
.gg-slots{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.gg-slot{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;
  border:1px dashed var(--border);color:var(--text-soft);font-size:14px;min-height:46px}
.gg-slot .n{font:900 12px/1 var(--display);opacity:.6;min-width:14px}
.gg-slot.got{border-style:solid;border-color:var(--accent);color:var(--text);
  background:var(--panel)}
.gg-slot .nm{font-weight:700;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* THE MENU CARDS ARE NOT ANSWER ROWS. They borrow .gg-slot for the frame, but
   .nm there is one country on one line and is deliberately clipped; here it
   carries a name AND a sentence describing the game, and on a phone that
   sentence ran straight out of the box. Wrapping is right for a blurb and
   wrong for an answer, so it is scoped to the cards rather than loosened on
   the shared class. align-items:start so the arrow stays level with the title
   once the text is two or three lines tall. */
/* align-items:flex-start so the arrow stays level with the TITLE once the
   sentence under it makes the card two or three lines tall. It was briefly
   `center` with the name blown up to clamp(19px,3.4vw,25px), which was sized
   for a card carrying nothing but a name; the sentence is back (25 Aug 2026)
   and the title goes back to inheriting its weight from the row. */
.gg-slot.gg-variant{align-items:center}
/* THE NAME IS THE WHOLE CARD NOW. The sentence under it is gone, so what was
   a title over a blurb is one line — and at the old inherited weight it sat
   small in a box sized for three lines of text. Big enough to be the reason
   the card is that tall, which is what the card is for: pick a game. */
.gg-slot.gg-variant .nm{white-space:normal;overflow:visible;text-overflow:clip;
  font-family:var(--display);font-weight:900;
  font-size:clamp(19px,3.4vw,25px);line-height:1.15}
.gg-slot .pts{font:900 14px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums}
.gg-slot .val{font-size:12px;color:var(--text-soft);font-variant-numeric:tabular-nums}
/* The archive: one row per published date. Same slot geometry as a round's
   answers, because it is the same list shape and the screen only has one. */
.gg-h{font:900 11px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-soft);margin:20px 0 8px}
.gg-day .nm{font-variant-numeric:tabular-nums}
.gg-note{font-weight:400;color:var(--text-soft);font-size:12.5px;margin-left:6px}
.gg-done{font:900 9.5px/1.6 var(--display);letter-spacing:.08em;text-transform:uppercase;
  background:var(--panel-2,rgba(0,0,0,.12));color:var(--text-soft);
  border-radius:999px;padding:2px 7px;margin-left:6px;vertical-align:middle}
.gg-form{position:relative}
.gg-input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);font-size:16px;font-family:inherit}
.gg-input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.gg-row{display:flex;gap:10px;margin-top:10px;align-items:center}
.gg-go{flex:none;padding:12px 22px;border-radius:12px;border:0;background:var(--accent);
  color:var(--on-accent);font:900 14px/1 var(--display);cursor:pointer}
.gg-go:disabled{opacity:.45;cursor:default}
/* The fourth guess, and afterwards what it swapped in. Called out rather than
   left to the guess counter: "1 guess left" after three correct answers reads
   as a spare nobody needs, and the whole point is that it is free. */
.gg-bonus{border:1px solid var(--accent);border-radius:12px;padding:10px 14px;
  margin-bottom:14px;font-size:13.5px;line-height:1.5;color:var(--text-soft);
  background:var(--panel)}
.gg-bonus b{color:var(--text)}
.gg-stand{flex:none;padding:12px 18px;border-radius:12px;background:none;
  border:1px solid var(--border-strong);color:var(--text-soft);
  font:900 13px/1 var(--display);cursor:pointer}
.gg-stand:hover{color:var(--text);border-color:var(--text-soft)}
.gg-left{font-size:12.5px;color:var(--text-soft)}
.gg-left b{color:var(--text)}
.gg-wrong{color:var(--rust,#ff5c5c);font-weight:700}
/* The suggestion list. ALL 195 COUNTRIES, always — never filtered by the
   category, because a dropdown that only offered the members would hand the
   player the answer set. spec §5.

   IT USED TO BE CUT OFF AFTER ONE ROW. .wrap is `overflow:hidden` for its
   rounded corners, the board ended a few pixels under the input, and 186 of the
   list's 230px were clipped by the card — so the player could see one
   suggestion and had to trust the rest. Two things fix it and both are needed:
   the list is sized in whole rows so a known number of them fit, and .gg-room
   below holds open exactly the height the open list needs, so the card is
   always tall enough to show it.

   --gg-row is the height of one suggestion, --gg-list is 5.5 of them: five
   whole ones, with the sixth half-showing so it is obvious the list scrolls. */
.gg-main{--gg-row:36.5px;--gg-list:calc(var(--gg-row) * 5.5)}
/* THE LIST OPENS UPWARD, IN ALL THREE GAMES.

   It started as a Mini-only rule: five answer slots put the input near the
   bottom of the screen, so a list dropping DOWN opened off the bottom edge and
   the player had to scroll to read their own suggestions. The three-slot game
   kept it below on the argument that its input sits higher and that opening
   upward would cover the answers already named.

   That argument lost to consistency, on the owner's call, and the reasoning was
   thin anyway: the same keystroke should do the same thing in all three, and a
   player moving between them should not have to relearn where their own
   suggestions appear. Upward is also the safer default — there is always room
   above an input near the foot of a card, and not always below.

   Anchored to the input's TOP, so it grows into space that exists. */
.gg-sugg{position:absolute;left:0;right:0;bottom:calc(100% + 4px);z-index:40;
  background:var(--panel);border:1px solid var(--border-strong);border-radius:12px;
  max-height:var(--gg-list,206px);overflow-y:auto;
  box-shadow:0 12px 30px rgba(0,0,0,.25)}
/* Was the room a DOWNWARD list dropped into, so the card could not end where
   the list began. Nothing opens downward any more, so it reserves nothing —
   left at its old height it padded every card out by 166px of empty space and
   pushed Submit off the bottom, which is the opposite of the point. Kept as an
   element rather than deleted: three render paths write it, and an empty rule
   is a smaller change than removing it from all of them. */
.gg-room{height:0}
/* The "no figure for this one" note. Sits over the form rather than in the
   flow, so nothing on the board moves when it appears — the player is mid-round
   and a shifting layout is worse than the message is useful. */
.gg-nodata{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:41;
  padding:8px 12px;border-radius:10px;font-size:13px;font-weight:700;
  background:var(--sheet-2,rgba(0,0,0,.06));border:1px solid var(--border);
  color:var(--text);text-align:center;
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease}
.gg-nodata.show{opacity:1;transform:none}
.gg-nodata b{font-weight:900}
@media(max-width:700px){
  /* Below the field on a phone, for the reason the suggestion list is: the
     question and the answers so far are above it and worth keeping in view. */
  .gg-nodata{top:calc(100% + 6px);bottom:auto;transform:translateY(-4px)}
  .gg-nodata.show{transform:none}
}
.gg-sugg div{padding:9px 14px;cursor:pointer;font-size:14.5px}
.gg-sugg div.on,.gg-sugg div:hover{background:var(--panel-2,rgba(0,0,0,.08))}
.gg-sugg .alias{color:var(--text-soft);font-size:12px;margin-left:6px}
/* THE BOARD AT THE END OF A ROUND. Deliberately the same table the top-ten
   answer card uses — a player has just read one, and a second list two lines
   later that ranked differently would read as a different kind of thing. */
.gl-card{margin-top:18px;border-top:1px solid var(--border);padding-top:14px;text-align:left}
.gl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.gl-head h4{margin:0;font:900 15px/1.2 var(--display);flex:1;min-width:0}
.gl-pick{font-family:var(--font);font-size:13px;padding:6px 9px;border-radius:8px;
  border:1px solid var(--border);background:var(--sheet);color:var(--text);max-width:100%}
.gl-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;
  font-size:14px}
.gl-row+.gl-row{margin-top:2px}
.gl-row .pos{width:26px;text-align:right;color:var(--text-soft);
  font-variant-numeric:tabular-nums}
.gl-row .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-row .sc{font-weight:700;font-variant-numeric:tabular-nums}
/* The player's own line, wherever it falls. */
.gl-row.mine{background:var(--panel-2,rgba(124,179,66,.14));
  outline:1px solid var(--accent-soft,rgba(124,179,66,.45))}
.gl-row.mine .pos,.gl-row.mine .who{color:var(--text)}
/* The break shown when their row is not in the ten above it. */
.gl-gap{text-align:center;color:var(--text-soft);font-size:12px;padding:3px 0}
.gl-note{color:var(--text-soft);font-size:12.5px;margin-top:9px}
/* An openable row. Only rows with a game behind them get this — the pulled-up
   "you came 34th" line has no game id when the run is not on the board. */
.gl-row.pick{cursor:pointer}
.gl-row.pick:hover{background:var(--panel-2,rgba(0,0,0,.06))}
.gl-row.pick .who::after{content:" ›";color:var(--text-soft)}
.gl-row.pick.on .who::after{content:" ⌄"}
.gl-det{margin:4px 0 8px;padding:10px 12px;border-radius:10px;
  background:var(--sheet-2,rgba(0,0,0,.05));border:1px solid var(--border)}
.gl-det .dh{display:flex;gap:10px;align-items:baseline;margin-bottom:8px}
.gl-det .dh .t{font-weight:700;font-size:13.5px;flex:1;min-width:0}
.gl-det .dh .s{font-weight:900;font-variant-numeric:tabular-nums;color:var(--gold)}
.gl-det .msg{color:var(--text-soft);font-size:13px}
.gl-det .q{font-size:12.5px;color:var(--text-soft);margin:8px 0 4px}
.gl-det .q b{color:var(--text);font-weight:700}
.gl-det .a{display:flex;gap:8px;align-items:baseline;font-size:13.5px;padding:2px 0}
.gl-det .a .n{width:16px;color:var(--text-soft);font-variant-numeric:tabular-nums}
.gl-det .a .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-det .a .v{color:var(--text-soft);font-size:12px}
.gl-det .a .p{font-variant-numeric:tabular-nums;font-weight:700}
.gl-det .a.bad .t{color:var(--text-soft);text-decoration:line-through}
.gl-det .a.bad .p{color:var(--text-soft);font-weight:400}
@media(max-width:700px){
  .gl-head h4{flex:1 1 100%}
  .gl-pick{width:100%}
}
/* The scoring note under the question. Quieter than .gg-rank, which is the
   ranking itself — this is a footnote about how points work, and it must not
   compete with the sentence it explains. */
.gg-note-sm{font:400 12.5px/1.45 var(--font);color:var(--text-soft);
  margin-top:7px;max-width:46ch}
.gg-note-sm b{color:var(--text);font-weight:700}
@media(max-width:700px){ .gg-note-sm{font-size:11.5px;margin-top:5px} }
/* THE TUTORIAL. Reading, not playing, so it is set narrower than the boards and
   left-aligned: a rule you have to re-read is a rule nobody reads. */
.gg-tut{text-align:left;max-width:60ch;margin:0 auto}
.gg-tut h4{font:900 13px/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin:26px 0 8px}
.gg-tut p{font:400 15.5px/1.62 var(--font);color:var(--text-soft);margin:0 0 10px}
.gg-tut p b{color:var(--text);font-weight:800}
.gg-tut-note{font-size:14px;padding:11px 14px;border-radius:12px;
  background:var(--sheet);color:var(--text-soft)}
/* The question, set as the board sets it, so the example is recognisable as the
   thing they will actually see. */
.gg-tut-q{font:900 19px/1.35 var(--display);color:var(--text);background:var(--sheet);
  border-radius:14px;padding:14px 16px;margin:12px 0 14px}
.gg-tut-tbl{width:100%;border-collapse:collapse;margin:10px 0 12px;
  font:400 14.5px/1.45 var(--font)}
.gg-tut-tbl th{font:900 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);text-align:left;padding:0 10px 8px 0}
.gg-tut-tbl td{padding:9px 10px 9px 0;border-top:1px solid var(--border);
  color:var(--text-soft);vertical-align:top}
.gg-tut-tbl td:first-child{color:var(--text);font-weight:700}
.gg-tut-tbl .n{text-align:right;white-space:nowrap;font-family:var(--mono);
  font-weight:700;color:var(--gold);padding-right:0}
/* THE MENU HEADING AND ITS ONE LINK. Text on the left, How to play on the
   right, top-aligned so the button sits level with "Rank them" rather than
   floating against the middle of a three-line block. */
.gg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.gg-head-txt{min-width:0}
/* NOT a .gg-slot. It is not a fourth thing to pick, and dressing it as one put
   a full-width card between the heading and the games that read as the first
   option on the list. A bordered link says "read this first" without competing
   with them. */
.gg-how-btn{flex:none;display:inline-flex;align-items:center;gap:8px;
  background:none;border:1px solid var(--accent);border-radius:12px;
  /* Level with the SECOND heading line rather than the first. Against "Rank
     them" it sat alone at the top of a three-line block; beside "countries, or
     the greats of a sport" it reads as part of the same header. Measured: the
     button's top is 47px above that line's centre without it. */
  margin-top:47px;
  padding:10px 15px;cursor:pointer;white-space:nowrap;
  font:900 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text);transition:border-color .12s,color .12s,background .12s}
.gg-how-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--sheet)}
.gg-how-btn .arw{font-size:14px;line-height:1}
@media(max-width:700px){
  /* The column drops it under the blurb and above the games, which is where it
     was. Full width to match the game cards, and shorter than one — it is a
     link to a page, not a game. */
  .gg-head{flex-direction:column;gap:0}
  /* The desktop nudge is meaningless in a column — it would just add 47px of
     gap above the button. */
  .gg-how-btn{width:100%;justify-content:space-between;margin-top:14px;
    padding:11px 14px;font-size:11px}
}
@media(max-width:700px){
  .gg-tut p{font-size:14.5px}
  .gg-tut-q{font-size:16px}
  .gg-tut-tbl{font-size:13px}
  .gg-tut-tbl td:first-child{max-width:15ch}
}
.gg-over{margin-top:18px;padding:16px;border-radius:14px;border:1px solid var(--border);
  background:var(--panel)}
.gg-over h3{font:900 15px/1.2 var(--display);margin:0 0 4px}
.gg-over .why{font-size:13px;color:var(--text-soft);margin-bottom:10px}
/* The ranked table on the result card. A row the player named is marked on its
   LEFT EDGE rather than by recolouring the text, so the ten read as one list
   with some rows flagged rather than as two lists interleaved. */
/* The verdict word, and the round's maximum beside the score. "391 of 500"
   is the fact the word is a summary of, and it stops a good score reading as a
   poor one just because the reader does not know the scale. */
.gg-verdict{color:var(--accent);font-weight:900}
/* Not uppercase any more. "OF 500" was a label; "OUT OF A MAXIMUM 500 POINTS"
   is a sentence, and a sentence in caps beside a score reads as shouting at
   somebody about how they did. */
.gg-outof{font:700 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--text-soft);
  margin-left:6px}
.gg-board{margin-top:14px;border:1px solid var(--border);border-radius:12px;
  overflow:hidden}
.gg-bhead{display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 12px;background:var(--panel-2,rgba(0,0,0,.06));
  font:700 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted)}
.gg-bhead .of{letter-spacing:.06em}
.gg-brow{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;
  align-items:baseline;gap:10px;padding:7px 12px;font-size:13.5px;
  border-top:1px solid var(--border);border-left:3px solid transparent}
.gg-brow .rk{font:700 11px/1.4 var(--mono);color:var(--text-soft)}
.gg-brow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gg-brow .val{font:600 12px/1.4 var(--mono);color:var(--text-soft);
  font-variant-numeric:tabular-nums}
.gg-brow .pts{font:900 12px/1.4 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums}
.gg-brow.mine{border-left-color:var(--accent);background:var(--panel)}
.gg-brow.mine .nm{font-weight:700;color:var(--text)}
/* Named, but a better answer pushed it out of the ones that counted. */
.gg-brow.mine.dropped{border-left-color:var(--text-soft)}
.gg-brow.mine.dropped .pts{color:var(--text-soft)}
.gg-bgap{padding:3px 12px;font:700 11px/1 var(--mono);color:var(--text-soft);
  border-top:1px solid var(--border);letter-spacing:.3em}
.gg-missed{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.gg-missed div{display:flex;gap:10px;font-size:13.5px}
.gg-missed .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gg-missed .val{color:var(--text-soft);font-variant-numeric:tabular-nums}
/* What was named that was not in the round. Struck through rather than red:
   the number beside it is the useful part — "Iran has more people than the one
   you did name" is the lesson — and a wall of red is not. */
.gg-wrongs{margin-bottom:12px}
.gg-wrongs .nm{text-decoration:line-through;color:var(--text-soft)}
.gg-final{text-align:center;padding:26px 18px}
.gg-final .big{font:900 clamp(44px,12vw,72px)/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums}
.gg-final .cap{font-size:13px;color:var(--text-soft);letter-spacing:.05em;
  text-transform:uppercase;font-weight:800}
.gg-rounds{margin:18px 0;display:flex;flex-direction:column;gap:6px;text-align:left}
.gg-rounds div{display:flex;gap:10px;font-size:13px;padding:6px 0;
  border-bottom:1px solid var(--border)}
.gg-rounds .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gg-rounds .pts{font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- Gauntlet Live (the code calls it Extreme; see HANDOFF) ----------
   THE TILES ARE THE INPUT. Every other Gauntlet types a name into a box and
   the box is the whole interaction; here the fifteen names are already on
   screen and the round is decided by which three of them are chosen, so the
   grid IS the form. There is no .gg-input on this screen and there should
   never be one — a text field over a list of the answers would be asking
   somebody to retype what they are looking at.

   EVERYTHING ELSE IS THE SHARED .gg-* SET, on purpose. The bar, the question,
   the slots, the result table and the buttons are the same rules GeoGauntlet
   and SportsGauntlet draw with, so the three read as one game. Only the grid
   is new, because only the grid is new.

   touch-action:none IS LOAD-BEARING on .gx-tile. Without it a touch that
   starts on a tile is claimed by the page scroller the moment it moves, the
   pointer events stop arriving, and dragging works on a mouse and silently
   not on a phone — which is the device this is played on. The cost is that a
   scroll cannot be STARTED on a tile; it can be started anywhere else, and
   the screen is built to fit without scrolling anyway. */
.gx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:8px;margin:2px 0 14px}
.gx-tile{display:flex;align-items:center;gap:9px;padding:10px 12px;
  border-radius:11px;border:1px solid var(--border-strong);background:var(--panel);
  color:var(--text);font:700 14.5px/1.25 inherit;text-align:left;min-height:46px;
  cursor:grab;touch-action:none;overflow-wrap:anywhere;
  user-select:none;-webkit-user-select:none;
  transition:border-color .12s, background .12s, transform .12s}
.gx-tile .nm{flex:1;min-width:0}
/* THE FLAG IS A HANDLE FOR THE EYE, not decoration. Fifteen country names in a
   grid is fifteen pieces of text that have to be READ before one of them can be
   found again, and this round is played by looking back and forth between the
   board and three slots. A flag is recognised without reading, so the tile a
   player has already decided about is findable at a glance.

   FIXED SIZE AND flex:none, so a name the table does not know — the pool is
   computed, and a future measure could rank something new — leaves the row
   exactly as tall and only slightly narrower, rather than reflowing a grid
   mid-round.

   NOT A DRAG TARGET OF ITS OWN: pointer-events stay with the tile, or a press
   that landed on the image would start nothing and the tile would feel dead in
   the one spot the eye goes to first. */
#gxScreen .gx-tile .flag-mini{width:24px;height:16px;flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.35)}
#gxScreen .gx-tile.taken .flag-mini{filter:grayscale(1)}
/* In a filled slot and in the wasted-picks list the flag is a flex child. */
#gxScreen .gg-slot .flag-mini{width:21px;height:14px;flex:none;
  margin-right:7px;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
#gxScreen .gg-wrongs .flag-mini{width:19px;height:13px;flex:none;
  margin-right:6px}
/* The ranked table nests it INSIDE the name cell (see gxBoardHtml), so this one
   is aligned as inline text rather than as a flex child. */
#gxScreen .gg-brow .nm .flag-mini{width:21px;height:14px;margin-right:7px;
  vertical-align:-3px;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
/* The grip. Six dots is the one shape that reads as "this moves" without a
   word, and it is dim until the tile is being touched so fifteen of them do
   not turn the board into texture. */
.gx-tile .grip{font:700 13px/1 var(--mono);color:var(--text-muted);opacity:.5;
  letter-spacing:-1px}
.gx-tile:hover{border-color:var(--text-soft)}
.gx-tile.on{border-color:var(--accent);background:var(--panel-2);
  box-shadow:inset 0 0 0 1px var(--accent)}
.gx-tile.on .grip{opacity:.85}
/* ALREADY PICKED: dimmed and numbered, NOT removed. Taking it out of the grid
   would reflow the other fourteen under a finger that is mid-round, and the
   whole point of a fixed board is that a name stays where it was put. The
   number is which pick it was, so the grid and the slots agree without the
   player having to look between them. */
.gx-tile.taken{opacity:.42;cursor:default;border-style:dashed;
  border-color:var(--border)}
.gx-tile.taken .grip{visibility:hidden}
.gx-tile .pk{font:900 11px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums}
/* A pick that landed and was then beaten by a better one. Not an error — it
   scored, and it comes back if something above it is beaten in turn — so it is
   the muted arrow rather than anything red. */
.gx-tile .pk.out{color:var(--text-soft)}
/* The tile left behind while its copy follows the finger. */
.gx-tile.gx-lift{opacity:.22;border-style:dashed}
/* The copy. Fixed to the viewport and out of the hit-test, so
   elementFromPoint under the pointer finds the tile being dragged OVER rather
   than the one being dragged. */
.gx-ghost{position:fixed;z-index:9999;pointer-events:none;margin:0;
  cursor:grabbing;box-shadow:0 14px 34px rgba(0,0,0,.4);
  border-color:var(--accent);transform-origin:50% 50%}
.gx-hint{font-size:12.5px;color:var(--text-soft);margin:-4px 0 9px}
/* THE ROUND HAS TO FIT ON ONE SCREEN, and this mode has fifteen tiles to find
   room for that neither Gauntlet before it needed. The empty spots are the
   cheapest thing to shrink: they are a diagram of the round rather than
   something to read, and at 46px each the three of them were costing 40px of
   the height the grid wanted.

   DESKTOP ONLY. On a phone the same three rows hold the answers the player
   came back to look at, they are already competing with a two-column grid for
   a much shorter screen, and shrinking readable type to save a scroll on a
   page that is going to scroll anyway is the trade GeoGauntlet's phone rules
   explicitly refused. */
@media(min-width:701px){
  #gxScreen .gg-slots{gap:6px;margin-bottom:10px}
  #gxScreen .gg-slot{min-height:38px;padding:8px 12px;font-size:13.5px}
  #gxScreen .gg-prompt{margin:6px 0 4px}
  #gxScreen .gg-rank{margin-bottom:8px}
  #gxScreen .gx-grid{margin:0 0 12px}
}
/* The result table is the WHOLE pool, so it is longer than either Gauntlet's
   ten-row window and the rank column carries two digits. */
#gxScreen .gg-brow .rk{min-width:20px}


/* ===========================================================================
   THE ROUND AS A SCOREBOARD

   WHAT WAS WRONG WITH IT: the answer slots were three dashed outlines with a
   number, a name and a figure loose inside them. Dashes read as something
   broken or not-yet-loaded rather than as a place a name is going to go, the
   figures did not line up with each other, and a filled slot looked like an
   empty slot with words in it. Nothing on the screen registered that the round
   was being WON.

   SO THE SLOTS BECOME A BOARD. Rows on a shared rule, ranks in a fixed column,
   points right-aligned on tabular figures so the decimal points stack, and a
   filled row that is plainly a result rather than an outline with text in it.
   No new words anywhere — every glyph on this screen was already there.

   SCOPED TO .gg-board, WHICH IS THE POINT OF THAT CLASS. `.gg-slot` is also
   the archive's date rows and the menu's variant cards; they are lists of
   things to choose, not a score, and none of this belongs on them.
   =========================================================================== */

/* THE RANK COLUMN IS FIXED WIDTH, so 1, 2 and 3 sit on one axis and the names
   start on one axis. Mono because it is a label, not a word. */
.gg-slots.gg-board{gap:0;border-top:1px solid var(--hair)}
.gg-slots.gg-board .gg-slot{border:0;border-bottom:1px solid var(--hair);
  border-radius:0;padding:13px 4px;min-height:52px;gap:14px;background:none}
.gg-slots.gg-board .gg-slot .n{font:700 12px/1 var(--mono);opacity:1;
  color:var(--text-muted);min-width:18px;text-align:center;flex:none}

/* AN EMPTY ROW IS QUIET, NOT BROKEN. The em dash it carries is the only thing
   in it, and it sits where the name will — so the row does not move when the
   answer lands, it just fills. */
.gg-slots.gg-board .gg-slot:not(.got) .nm{color:var(--text-muted);opacity:.5}

/* A FILLED ROW IS A RESULT. The accent edge is 3px of colour on the left, which
   is what turns a list into a standings table at a glance — and it is on the
   ROW rather than around it, so the board keeps one continuous left margin
   instead of three floating boxes. */
.gg-slots.gg-board .gg-slot.got{background:var(--panel);
  box-shadow:inset 3px 0 0 var(--accent);padding-left:14px}
.gg-slots.gg-board .gg-slot.got .n{color:var(--accent)}
.gg-slots.gg-board .gg-slot.got .nm{font-weight:800}
/* THE POINTS ARE THE COLUMN THAT MATTERS, so they are set at the size of a
   score rather than of a caption, and on tabular figures so 8.3 and 100.0 line
   their decimal points up down the board. */
.gg-slots.gg-board .gg-slot .pts{font:900 17px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums;margin-left:auto;flex:none}

/* ---- the round counter, as pips -----------------------------------------
   TEN ROUNDS IS A SHAPE, NOT A SENTENCE. "Round 3 of 10" is two numbers a
   player has to read and subtract; ten marks with three behind you is the same
   fact at a glance, and it is the one thing on this screen that shows the game
   has a length. The sentence is still there for a screen reader — see the
   aria-label ggRender writes — so nothing is lost, and no new words are added.

   THE CURRENT ONE IS WIDER, not just brighter: colour alone would be the only
   thing distinguishing it, and that fails for anybody who cannot see the
   difference between the accent and the hairline. */
.gg-pips{display:flex;align-items:center;gap:5px}
.gg-pips i{width:9px;height:4px;border-radius:2px;background:var(--hair);
  transition:background .2s, width .2s}
.gg-pips i.done{background:var(--text-muted)}
.gg-pips i.on{width:20px;background:var(--gold)}

/* ---- the score ----------------------------------------------------------
   IT IS THE BIGGEST THING ON THE SCREEN AFTER THE QUESTION, because it is what
   the player is here to move. It was 26px and shared a baseline with a line of
   15px type, which made it read as a stat in a header rather than as the score.
   `tabular-nums` so it does not jitter as it counts. */
.gg-hud .gg-total{font-size:34px;line-height:.9}

/* ---- what happens when a row lands --------------------------------------
   ONE ROW, ONCE. The slot that was just filled fades up; the two around it do
   not move, because a board that reshuffles itself every time you type is a
   board you cannot read. 180ms — long enough to notice, short enough that the
   next answer is never waiting on it.

   OPACITY ONLY, AND THAT IS THE INTERESTING PART. It was `translateY(6px)` to
   opacity, which looks better and is a trap: an animation that never advances
   holds its FIRST frame, so the row sits 6px below where the board says it is
   and overlaps its neighbour. Not hypothetical — it happened in a tab that had
   stopped compositing, where the transform stuck at translateY(6px) with the
   animation still reporting `running` a second and a half later. A stalled
   opacity fade costs a row that is 60% grey until the page paints again; a
   stalled transform costs a board that is visibly misaligned. Fading is the
   one of the two that cannot strand the layout.

   `both` so the row holds its final state rather than snapping back, and the
   whole thing is off for anybody who asked for less motion. */
@keyframes ggLand{from{opacity:0}to{opacity:1}}
.gg-slots.gg-board .gg-slot.got.gg-new{animation:ggLand .18s ease-out both}
@media (prefers-reduced-motion: reduce){
  .gg-slots.gg-board .gg-slot.got.gg-new{animation:none}
  .gg-pips i{transition:none}
}

/* NFL MODE'S TEN-ANSWER BOARD IS TWO COLUMNS, and a scoreboard rule written for
   one column has to give way to it. `.nm-two` turns .gg-slots into a grid so
   ten slots fit without the round scrolling; the rules above collapse the gap
   and hang a shared rule off the top, both of which are single-column ideas.
   Here the rows keep their own gap and each carries its own hairline, so two
   columns of five still read as a board rather than as ten loose rows. */
.gg-slots.gg-board.nm-two{border-top:0;gap:8px 18px}
.gg-slots.gg-board.nm-two .gg-slot{border-bottom:1px solid var(--hair);
  padding:9px 4px}
.gg-slots.gg-board.nm-two .gg-slot.got{padding-left:12px}


/* ===========================================================================
   THE BOARD AS A CHART

   Everything below is drawn from numbers already on the screen. No new words,
   and nothing decorative that is not carrying a value.
   =========================================================================== */

/* ---- an empty row is a recessed slot, not a dashed box -------------------
   DASHED READS AS A DROPZONE. It is the border browsers put round a file
   target and designers put round an unbuilt component, and three of them
   stacked read as a form waiting to be filled rather than as a scoreboard
   waiting to be won. A slightly recessed fill - a touch darker than the page,
   never a new colour - says "something goes here" without saying "upload". */
.gg-slots.gg-board .gg-slot{background:var(--sheet)}
.gg-slots.gg-board .gg-slot:not(.got){box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}

/* ---- a row that has been filled ------------------------------------------
   A flat panel. It used to be a bar: the row drew itself as a gradient whose
   width was the share of what that slot could have paid, so a row that took
   the best answer left filled completely and a weak one barely registered.
   The number on the row already says that, and it says it exactly. */
.gg-slots.gg-board .gg-slot.got{background:var(--panel)}

/* ---- one ramp per mode ---------------------------------------------------
   A population board and a passing-yards board are the same components and
   should not be the same object to look at. The ramp is the only colour that
   changes, it is always low alpha, and it never competes with the gold the
   points are set in. */
.gg-slots.gg-board{--ramp:rgba(120,160,90,.20)}
.gg-slots.gg-board.gg-geo{--ramp:rgba(88,150,120,.22)}
.gg-slots.gg-board.gg-nfl{--ramp:rgba(150,110,60,.22)}
.gg-slots.gg-board.gg-sports{--ramp:rgba(90,130,180,.22)}
.gg-slots.gg-board.gg-live{--ramp:rgba(170,90,100,.22)}

/* ---- one structural detail per mode, and only one -----------------------
   THE SEPARATOR IS THE THEME. Two pixels of difference that a reader in the
   domain sees instantly and everybody else reads as a plain rule: yard-line
   hatching under a football board, a graticule tick under a geography one.
   Drawn with a repeating gradient on the row's bottom edge, so it costs no
   markup and no image.

   THE TEST FOR ALL OF THIS is the one in the brief: if you can say what it
   depicts at a glance, it is too strong. These should register as the rule not
   being quite plain.

   ONE LAYER NOW. A filled row used to restate this as the second of two
   background images, under the fill; with the fill gone the rule below covers
   every row in the mode, filled or not. */
.gg-slots.gg-board.gg-nfl .gg-slot,
.gg-slots.gg-board.gg-geo .gg-slot{border-bottom-color:transparent;
  background-repeat:no-repeat;background-position:bottom left;
  background-size:100% 1px}
.gg-slots.gg-board.gg-nfl .gg-slot{
  background-image:repeating-linear-gradient(to right,
    var(--hair) 0 6px, transparent 6px 12px)}
.gg-slots.gg-board.gg-geo .gg-slot{
  background-image:repeating-linear-gradient(to right,
    var(--hair) 0 2px, transparent 2px 9px)}
/* ---- the pips take the same treatment -----------------------------------
   Short vertical ticks for a yard strip, evenly spaced meridians for
   geography. Same shapes, different rhythm. */
.gg-pips.gg-nfl i{border-radius:0;height:8px;width:2px}
.gg-pips.gg-nfl i.on{width:4px}
.gg-pips.gg-geo i{border-radius:0;height:7px;width:1px}
.gg-pips.gg-geo i.on{width:3px}

/* ---- the guesses, as tokens ---------------------------------------------
   Six that get spent rather than a number that goes down. A spent one stays
   put and goes hollow, so what is left is read against what there was. */
.gg-tokens{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.gg-tokens i{width:9px;height:9px;border-radius:50%;background:var(--accent);
  transition:background .18s, transform .18s}
.gg-tokens i.spent{background:none;box-shadow:inset 0 0 0 1.5px var(--hair);
  transform:scale(.8)}

/* ---- the score, with somewhere to go ------------------------------------ */
.gg-chip{display:inline-flex;flex-direction:column;align-items:flex-end;gap:5px}
.gg-chip-n{font:900 34px/.9 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums}
.gg-chip-bar{width:96px;height:3px;border-radius:2px;background:var(--hair);
  overflow:hidden}
.gg-chip-bar i{display:block;height:100%;background:var(--gold);
  transition:width .35s ease-out}

/* ---- the theme is in the motion -----------------------------------------
   A geography row paints in left to right, the way a map layer draws. A
   football row lands the way a broadcast ticker sets. Both are off under
   prefers-reduced-motion.

   NEITHER ONE MOVES THE ROW. clip-path and opacity only - see the note on
   ggLand above, where a stalled translate left the board misaligned. */
@keyframes ggWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ggSnap{0%{opacity:0}55%{opacity:1}100%{opacity:1}}
.gg-slots.gg-board.gg-geo .gg-slot.got.gg-new{animation:ggWipe .22s ease-out both}
.gg-slots.gg-board.gg-nfl .gg-slot.got.gg-new{animation:ggSnap .18s ease-out both}
@media (prefers-reduced-motion: reduce){
  .gg-slots.gg-board.gg-geo .gg-slot.got.gg-new,
  .gg-slots.gg-board.gg-nfl .gg-slot.got.gg-new{animation:none}
  .gg-tokens i,.gg-chip-bar i{transition:none}
}

/* ---- the globe -----------------------------------------------------------
   A SQUARE THAT SHRINKS WITH THE CARD. aspect-ratio rather than a fixed
   height, because the projection is a disc and a disc in a letterbox is a disc
   with wasted card either side of it.

   THE COLOURS ARE TOKENS, read by the canvas at draw time rather than baked
   in, so the sphere follows the theme like everything else. Sea and land are
   the only two new values on the page and both are drawn from the existing
   panel family rather than from a new palette. */
:root{--globe-sea:#dfe9ec;--globe-land:#b9ccc6;--globe-edge:rgba(16,30,34,.22)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--globe-sea:#101d24;--globe-land:#24414a;
    --globe-edge:rgba(255,255,255,.16)}
}
:root[data-theme="dark"]{--globe-sea:#101d24;--globe-land:#24414a;
  --globe-edge:rgba(255,255,255,.16)}

.gg-globe-wrap{display:flex;justify-content:center;margin:6px 0 10px}
.gg-globe{width:min(100%,380px);aspect-ratio:1;display:block}
@media (max-width:700px){
  .gg-globe{width:min(100%,300px)}
}

/* ---- the round is two columns: the world, and the answering ---------------
   THE ANSWERING COLUMN IS THE ONE How to play VACATED. .gg-wrap.wide has always
   been `minmax(0,1fr) 300px` with a reference panel on the right; the panel is
   gone from a round in progress, so the question, the sphere, the score and the
   typing share the same grid and the screen stops scrolling.

   WIDER THAN THE PANEL WAS. 300px held prose; this holds three answer rows, an
   input and a button, and at 300 the rows wrapped their own scores onto a
   second line. */
@media (min-width:981px){
  .gg-wrap.wide:has(.gg-answer){grid-template-columns:minmax(0,1fr) 340px}
  .gg-answer{align-self:start;display:flex;flex-direction:column;gap:2px}
  /* THE SPHERE TAKES THE HEIGHT IT IS GIVEN rather than a fixed 380. On a
     laptop the whole round has to fit between the bar and the bottom of the
     window, and the globe is the one element that can give. */
  .gg-globe{width:min(100%,52vh);height:auto;aspect-ratio:1}
  .gg-globe-wrap{margin:2px 0 6px}
}
/* Stacked below that, in the order the eye wants: ask, show, answer.

   ON A PHONE THE BOX YOU TYPE IN COMES BEFORE THE ANSWERS YOU HAVE ALREADY
   GIVEN. On a wide screen the answer column is beside the picture and all of it
   is visible at once, so the reading order — what you have, then where you add
   to it — is the right one. Stacked on a 375-wide screen it is not: the ask,
   the globe and ten slots come to more than a screen, and the input lands below
   the fold, so every guess is scroll, type, scroll back to see what happened.
   Putting the input directly under the picture fits question, picture and input
   together, and the slots stay one flick down where they are still the record
   of the round rather than something you have to get past.

   The submit row and the note travel with the input, because a button that has
   left its field is a worse problem than the one being fixed. */
@media (max-width:980px){
  .gg-answer{display:flex;flex-direction:column}
  .gg-answer > *{order:6}
  .gg-answer > .gg-form{order:1}
  .gg-answer > .nm-note{order:2}
  .gg-answer > .gg-row{order:3}
  .gg-answer > .gg-bonus{order:4}
  .gg-answer > .gg-slots{order:5}
  .gg-answer > .gg-room{order:7}
}

/* A SHORT LAPTOP GETS A SMALLER SPHERE. 46vh fits a 900-tall window and
   overruns a 768 one by 67px — measured, with the globe at 353 of a 618px
   column. The globe is the only element on this screen that can give up height
   without losing information: the question cannot shrink, the answer rows are
   already at their minimum, and a round that scrolls is the thing the whole
   two-column layout was for. */
@media (min-width:981px) and (max-height:820px){
  .gg-globe{width:min(100%,46vh)}
  .gg-main > .gg-sub{margin-bottom:10px}
}

/* ---- the asking row, above both columns ---------------------------------
   The question, the round and the total run the full width; the globe and the
   answering column share the row beneath, so the two halves of a round start
   on the same line instead of one beginning under the other. */
.gg-wrap.wide > .gg-ask{grid-column:1/-1}
@media (min-width:981px){
  /* Both columns now begin at the same y, so neither needs pushing down. */
  .gg-wrap.wide:has(.gg-answer) > .gg-main,
  .gg-wrap.wide:has(.gg-answer) > .gg-answer{align-self:start}
  /* The globe has the row to itself and can take more of it. */
  /* SIZED BY THE COLUMN, BOUNDED BY THE WINDOW. It was sized by height with
     aspect-ratio:1, which meant the width came out of the height and the
     column's own width went unused — measured at 1366x768: a 323px sphere in a
     608px column, 53% of the space it had, 285px wasted either side. A country
     drawn at "37% of the globe" was 120px, which is why it kept reading small
     however the zoom was tuned.

     `min(100%, 52vh)` takes the column when the window is tall enough to allow
     it and the window when it is not, so the sphere is as large as the space
     genuinely permits at any size. */
  .gg-globe{width:min(100%,52vh);height:auto;aspect-ratio:1}
}
@media (min-width:981px) and (max-height:820px){
  .gg-globe{width:min(100%,46vh)}
}

/* ---- a short laptop -------------------------------------------------------
   ALIGNING THE COLUMNS COSTS HEIGHT, and this is where it is paid. The two
   halves now start on the same line, so the round is the question block plus
   the TALLER of the globe and the answering column — and the answering column
   is the taller one, at 413px against the globe's 323. On a 768-tall window
   that put Submit 32px below the fold.

   Everything here is proportional trimming rather than removal: the answer rows
   lose eight pixels each, the question loses a size step and some of its
   leading, and the notes under it lose their margins. Nothing goes away, and on
   a 900-tall window none of it applies. */
/* THE ANSWER COLUMN ENDS WHERE THE GLOBE ENDS.

   Both columns are cells of the same grid row, but the answer column was
   align-self:start and only as tall as its contents, so the submit button
   finished sixty pixels above the bottom of the globe and the pair read as two
   things that had been placed rather than one panel. Stretching the column and
   pushing its last row down with an auto margin lands the button on the globe's
   bottom edge exactly, whatever the globe's size works out to be on the screen
   it is on.

   The globe wrapper's bottom margin goes with it: it is what put the bottom of
   the .gg-main cell six pixels below the bottom of the globe itself, and the
   thing being aligned to is the globe, not the cell around it. .gg-room is a
   spacer for the stacked layouts and is zero here, but the column's own gap
   still applies after it, which would leave the button two pixels short. */
@media (min-width:981px){
  /* ROOM TO SCROLL THE SITE HEADER OFF. Putting the mode at the top of the
     screen is a scroll, and a scroll can only go as far as the page is tall:
     measured at 1920x870 the page came to 908, so the furthest it would move
     was 38 of the 105 pixels needed and the header stayed half on screen.
     A round's worth of viewport underneath makes the scroll reach. Nothing is
     added to the picture — the extra height sits below the fold once the round
     is at the top, which is where it was going to be anyway. */
  #ggScreen:has(.gg-wrap.wide .gg-answer){min-height:100vh}
  /* THE GLOBE KEEPS ITS OWN SIZE. It is sized from the viewport a few rules
     below and nothing here touches it.

     Sizing it off the grid row instead was a mistake: the row is sized by its
     items, so an item whose height is a percentage of that row is circular, and
     what came out the other side was a globe half the page tall. The column
     beside it is the thing that has to give, and its height is measured in
     ggFitAnswer rather than guessed at here — the two columns start at
     different heights and end at the same one, which is not something a
     stylesheet can express without knowing the globe's size.

     What is left here is only what the measured height needs: a column that
     lays its children out top to bottom with the last row pushed to the floor,
     and the spacer out of the way so nothing sits under the button. */
  .gg-answer > .gg-row{margin-top:auto}
  .gg-answer > .gg-room{display:none}
}

@media (min-width:981px) and (max-height:820px){
  .gg-slots.gg-board .gg-slot{min-height:44px;padding:9px 4px}
  .gg-ask .gg-prompt{font-size:26px;margin:6px 0 4px}
  .gg-ask .gg-rank{font-size:19px;margin-bottom:6px}
  .gg-ask .gg-note-sm{margin-top:4px}
  .gg-ask .gg-sub{margin-bottom:8px}
  .gg-form{margin-bottom:8px}
}

/* ---- the field ----------------------------------------------------------
   Shares .gg-globe's sizing so the two modes' pictures are the same object in
   the layout, and only the aspect differs: a globe is a disc and a field is a
   field, so this one is wider than it is tall. */
/* THE MARK IS NOT THEMED, because the surface it sits on is not. Turf is dark
   green in light mode and darker green in dark mode, so the colour that picks
   out the player you named has to clear dark green in both — and --gold does
   not: it is deliberately darkened to #4A6E0B on cream (theme.css:228) so it
   can carry white label text, which on turf made the ball carrier olive on
   green and the touchdown flash invisible. Same reasoning as --field-turf
   having its own name instead of borrowing a surface colour. */
:root{--field-turf:#2b6b41;--field-line:rgba(255,255,255,.34);
      --field-end:#20573a;--field-mark:#B8E62B}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--field-turf:#1c4a2d;--field-line:rgba(255,255,255,.28);
    --field-end:#143a25}
}
:root[data-theme="dark"]{--field-turf:#1c4a2d;--field-line:rgba(255,255,255,.28);
  --field-end:#143a25}
.gg-globe.gg-field{aspect-ratio:16/10;border-radius:10px}
@media (min-width:981px){
  .gg-globe.gg-field{width:100%;height:auto;max-height:46vh}
}

/* ---- the poll ------------------------------------------------------------
   TWO SCREENS WANT IT IN TWO PLACES, and it is one element in the markup: on a
   wide screen it belongs in the answering column, directly above the slots; on
   a phone, where the columns become one stack, it belongs at the very top,
   above "Round 3 of 10". A second copy of the markup would be two ids and two
   click handlers for one question, so it is placed instead.

   WIDE: the wrap is a two-column grid whose first row is the ask, spanning
   both. Putting the poll in column two of the second row, and the answering
   column in the third, is what lifts it above the slots without moving the
   globe — which keeps its own column and both rows. Scoped with :has(), so a
   round with no poll open is laid out exactly as it was before this existed.

   NARROW: one column, so all it needs is to come first — the grid respects
   `order`, and -1 puts it above the bar and the ask. */
.gg-poll{border:1px solid var(--border-strong);border-radius:12px;
  background:var(--panel);padding:11px 13px}
.gg-poll[hidden]{display:none}
.gg-poll-q{font-weight:800;font-size:14px;margin-bottom:9px;color:var(--text)}
.gg-poll-opts{display:flex;gap:8px}
.gg-poll-btn{flex:1;cursor:pointer;border:1px solid var(--border-strong);
  border-radius:10px;background:var(--sheet);color:var(--text);
  font:800 13px/1 var(--font);padding:10px 8px}
.gg-poll-btn:hover{border-color:var(--accent);color:var(--accent)}

/* WIDE: OUT OF THE FLOW, so nothing moves to make room for it.

   Putting it in the grid as a row of its own was the obvious thing and it was
   wrong: the answering column starts fourteen pixels under the question, there
   is no spare height above it, so a row for the poll pushed the guesses down
   by fifty-one pixels and dragged the globe up to fill the gap. The board
   should look the same whether or not a poll is running.

   The space it floats into is real, not a fudge: the question's own bottom
   right is empty — the small print is capped at half the width and the line
   under it is four words — so a 340px card sitting above the answering column
   overlaps nothing. It is positioned by ggPlacePoll rather than by a `top`
   here, because the height of the question above it is not a number a
   stylesheet knows.

   NARROW: back in the flow, and first, which is all it takes to put it above
   the round line when the columns become one stack. */
@media (min-width:981px){
  .gg-wrap.wide{position:relative}
  .gg-wrap.wide > .gg-poll{position:absolute;margin:0}
}
@media (max-width:980px){
  .gg-wrap.wide > .gg-poll{position:static;order:-1;width:auto}
}