/* GauntletGuesser — the clue stack and the guess ledger.

   EVERYTHING ELSE ON THIS SCREEN IS gauntlet.css. The wrap, the bar, the HUD,
   the input, the suggestion list, the final card and the board rows are all
   `.gg-*` and are shared with GeoGauntlet, so the two modes read as one family
   and a fix to the input lands in both. Only the two things this mode has that
   nothing else does are here.

   LOADED AFTER gauntlet.css AND BEFORE responsive.css — see the tag order in
   index.html. Two of the rules below deliberately override a `.gg-*` one, and a
   <link> applies exactly where a <style> would.

   EVERY COLOUR IS A THEME TOKEN THAT ACTUALLY EXISTS. The borders here read
   `var(--border)` and not `var(--line)`: --line is not defined anywhere on this
   site, so a rule using it falls through to whatever literal is written beside
   it — and a hard-coded rgba(255,255,255,.10) is a DARK-mode value that goes
   invisible on the light theme. theme.css is the list; check a name against it
   before reaching for a fallback. */

/* ---- the clue stack ----------------------------------------------------

   IT GROWS DOWNWARD AND NOTHING ABOVE IT MOVES. The whole game is reading the
   clues you have against each other, so a new one arriving must not reflow the
   ones already read — that is why each row is a fixed-height grid rather than
   free-flowing text, and why the number column is a fixed width instead of
   sized to its content (a stack that reaches 10 would otherwise shift every row
   left by a pixel).

   The newest clue is the one that just cost a guess, so it is the one that
   catches the eye: `:last-child` gets the accent border. */
.gu-stack{
  display:flex; flex-direction:column; gap:8px;
  margin:0 0 18px;
}
.gu-clue{
  display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px;
  padding:11px 14px;
  background:var(--panel-2, rgba(255,255,255,.04));
  border:1px solid var(--border);
  border-radius:10px;
  animation:guClueIn .28s ease both;
}
/* THE ACCENT IS NOT --m-guesser, and that is deliberate. That token is the
   mode's CARD colour: it has to be dark enough to carry white text, which
   makes it (#8A5A12) almost invisible as a 1px border on the dark theme's
   panel (#182A2E). The amber below is the one already used for a "fitted"
   guess pill, so the newest clue and the guesses that satisfied it are the
   same colour — which is the association worth drawing anyway. */
/* THE NEWEST CLUE IS A BACKGROUND, NOT A RING. It was a 1px border plus a 1px
   inset shadow in the same colour — a 2px ring — sitting directly above an
   input whose focus style is another 2px ring. Nothing overlapped
   geometrically (measured: 20px between them) and they still read as
   colliding, because four heavy rings stacked down one column is more edge
   than the panel around them has. The live room marks its own current row the
   same way this does now: .gxl-brow.me is a background change and no border at
   all. */
.gu-stack .gu-clue:last-child{
  background:var(--panel-2,rgba(255,255,255,.06));
  border-color:var(--border-strong,var(--border));
}
/* On the end card every clue is equal — the run is over and there is no
   "newest" any more, so the accent would be pointing at nothing. */
.gu-stack.done .gu-clue:last-child{ border-color:var(--border); box-shadow:none; }
.gu-cn{
  font:700 13px/1 var(--mono, "IBM Plex Mono", monospace);
  color:var(--text-muted, #9aa);
  text-align:center;
}
/* LEFT, EXPLICITLY. The end card lives inside .gg-final, which centres its
   text — so without this a clue is left-aligned while you are playing and
   centred once you finish, and the same sentence reads as two different
   things. The stack is meant to look identical on both screens. */
.gu-ct{ font-size:16px; line-height:1.35; text-align:left; }
.gu-clue .gg-note-sm{ display:block; margin-top:3px; }

/* A clue the run never reached, shown on the end card only. Dimmed rather than
   hidden: "there were two more and here they are" is most of the interest in a
   run that finished in three. */
.gu-clue.unseen{ opacity:.45; }
.gu-clue.unseen .gu-ct{ font-style:italic; }

@keyframes guClueIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .gu-clue{ animation:none; }
}

/* ---- the guess ledger --------------------------------------------------

   THREE COLOURS AND THEY ARE THE GAME. Amber says the country fitted every clue
   on screen and simply was not it; red says it broke one. That difference is
   the only thing a wrong guess teaches, and putting it beside the name means a
   player can re-read their own reasoning instead of remembering it.

   It WRAPS rather than scrolling. A run of twenty is a real run and a scroll
   box would hide the early guesses, which are exactly the ones being reasoned
   from. */
.gu-ledger{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:14px 0 0;
}
/* SHAPED LIKE GAUNTLET LIVE'S BOARD TILE, because it is the same object: a
   country with its flag, in a state. `.gx-tile` in gauntlet.css is the pattern
   — 9px gap, 10px/12px padding, an 11px radius, 700/14.5 and a min-height that
   keeps a row of them on one optical line — and matching it means a guessed
   country looks the same here as it does in the room. A 13px pill with a 20px
   flag did not: it read as a tag rather than as a country. */
.gu-g{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:10px; min-height:36px;
  border:1px solid var(--border-strong); background:var(--panel);
  color:var(--text); font:700 13px/1.25 inherit;
  text-align:left; white-space:nowrap;
  border-left-width:3px;
}
.gu-g .n{
  font:600 11px/1 var(--mono, "IBM Plex Mono", monospace);
  color:var(--text-muted, #9aa);
}
.gu-g .m{ font-size:12px; }
/* THE VERDICT IS THE LEADING EDGE AND THE MARK, NOT A WASH OVER THE CARD.
   These were a tinted background plus a tinted border plus tinted TEXT, which
   turned a country into a coloured block and made a column of them read as a
   status list rather than as a list of countries. The country is the subject;
   whether it fitted is one fact about it. So the card keeps the neutral face
   every other tile on this site has — .gx-tile in gauntlet.css, which this is
   one size down from — and the colour goes on the 3px edge and the mark. */
.gu-g.fit{ border-left-color:#c8912b }
.gu-g.fit .m{ color:#c8912b }
.gu-g.miss{ border-left-color:#a04a4a }
.gu-g.miss .m{ color:#a04a4a }
.gu-g.hit{ border-left-color:#3f8f52 }
.gu-g.hit .m{ color:#3f8f52 }

/* ---- the line that says what just happened -----------------------------

   ABSOLUTELY NOTHING ABOVE IT MOVES WHEN IT APPEARS. It is a fixed-height slot
   that is always in the layout and merely changes opacity, because the clue
   stack and the guess box are both above it and this mode's whole rule is that
   the board does not shift while somebody is typing into it. */
.gu-note{
  min-height:22px; margin-top:10px;
  font-size:14px; opacity:0;
  transition:opacity .18s ease;
}
.gu-note.show{ opacity:1; animation:guNote .18s ease both; }
.gu-note.good{ color:#8fe0a4; }
.gu-note.warn{ color:var(--text-muted, #9aa); }
.gu-note.bad{ color:#e08a8a; }
@keyframes guNote{ from{ transform:translateY(2px); } to{ transform:none; } }
@media (prefers-reduced-motion:reduce){
  .gu-note.show{ animation:none; }
}

/* The give-up link sits under the box and is deliberately quiet — it only
   appears once every clue is out, and it should read as a way out rather than
   as an option being offered. */
#guGiveUp{ display:inline-block; margin-top:14px; font-size:13px; opacity:.65; }
#guGiveUp:hover{ opacity:1; }

/* ---- phones ------------------------------------------------------------
   The ledger is the thing that grows, so it is what has to give. */
@media (max-width:560px){
  .gu-ct{ font-size:15px; }
  .gu-clue{ padding:9px 11px; }
  .gu-g{ font-size:12px; padding:4px 8px; }
}

/* The date in the bar. Its own class rather than gauntlet.css's .gg-day, which
   is that mode's archive BUTTON and has a click bound to it by class name —
   borrowing it would make this static label answer to that selector. */
.gu-date{
  font:600 12px/1 var(--mono, "IBM Plex Mono", monospace);
  color:var(--text-muted, #9aa); letter-spacing:.04em;
}

/* ---- the suggestion list opens DOWNWARD here ---------------------------

   gauntlet.css opens it UPWARD (`bottom: calc(100% + 4px)`) and is right to:
   in GeoGauntlet the input sits low on the card with the answer board beneath
   it, so a list dropping down would cover Submit.

   THIS SCREEN IS THE OTHER WAY UP. The clue stack is ABOVE the input and it is
   the thing the player is reading while they type — an upward list covers the
   clues they are trying to satisfy, which is the one thing on the page that
   must stay visible. Below the input there is only the transient note line and
   the guess ledger, and covering those costs nothing.

   This is the override the tag order exists for: gauntletguesser.css loads
   after gauntlet.css, so `top` wins and `bottom:auto` undoes the other rule
   rather than fighting it at equal specificity. */
#guScreen .gg-sugg{
  top:calc(100% + 4px);
  bottom:auto;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

/* ---- the verdict the last guess earned, clue by clue --------------------

   GREEN MET IT, RED BROKE IT, and this is the half of a wrong guess that
   teaches anything. "Mexico does not fit" is a result; a red mark on "The
   country is landlocked" with the other four green is a REASON, and it is the
   same sentence the note under the box is saying in words.

   ONLY THE LAST GUESS COLOURS THE STACK — see guLastMet. Keeping every guess's
   marks would leave six verdicts stacked on one row by the end of a long run,
   none of them about the guess just made.

   THE COLOURS ARE THE LEDGER'S, deliberately: a clue that went green and a
   guess pill that went green are the same statement about the same guess, and
   two greens that did not match would read as two different facts. */
/* THE VERDICTS KEEP THEIR COLOUR AND LOSE THEIR SECOND RING — the tint says it
   already, and the border says it again; the inset was saying it a third time. */
/* THE SAME TREATMENT THE GUESS TILES GOT, for the same reason: a full tint
   turns the row into a status block, and the row's subject is the CLUE. The
   colour goes on a 3px leading edge and the tick, so a stack of clues reads as
   a stack of clues that happen to be marked. */
.gu-clue.ok{ border-left:3px solid #4e7a16 }
.gu-clue.bad{ border-left:3px solid #b4452f }
/* The newest-clue accent is an amber border and these are a coloured one, so
   the last clue in the stack has to lose its accent while a verdict is showing
   or the two rules fight over the same edge. */
/* A verdict outranks the newest-clue tint: the row's own result is the more
   useful thing to see, and both are backgrounds now so they cannot stack. */
.gu-stack .gu-clue.ok:last-child{ border-left:3px solid #4e7a16 }
.gu-stack .gu-clue.bad:last-child{ border-left:3px solid #b4452f }
.gu-cv{
  font:700 14px/1 var(--mono, "IBM Plex Mono", monospace);
  min-width:14px; text-align:center;
}
.gu-clue.ok .gu-cv{ color:#6ea52a; }
.gu-clue.bad .gu-cv{ color:#d4674e; }

/* THE FLAG BESIDE THE NAME, the same 20px mini every other screen uses. The
   ledger is the one place on this screen a country is NAMED, so it is the one
   place a flag belongs — the clue stack is about facts, not about places. */
/* THE FLAG IS A HANDLE FOR THE EYE, the same 30x20 the live board uses and for
   the reason written on .gx-tile: a country already decided about is findable
   without reading. flex:none so a long name cannot squeeze it. */
.gu-g .flag-mini{
  width:22px; height:15px; flex:none; border-radius:2px; display:block;
  object-fit:cover;
}
.gu-g .n{ font:900 11px/1 var(--display, inherit); opacity:.7;
  font-variant-numeric:tabular-nums; }
.gu-g .m{ font-size:13px; opacity:.85; }




/* NO OVERRIDE ON THE FOCUS RING. An outline-offset was tried here and made it
   worse, not better: offsetting a 2px outline away from a 1px accent border
   draws two concentric rings with a gap between them, which is the "double
   box" this screen was reported for. The site's own .gg-input:focus is one
   ring and is what every other field wears. */
/* The clue text drops to the size the room sets its panel copy at, so a clue
   and a scoreboard row are the same voice. */
.gu-play .gu-ct{font-size:15px}
.gu-play .gg-form{margin-top:14px}

/* THE PLAY SCREEN TAKES THE ROOM THE LIVE ROOM TAKES. .gg-wrap.wide caps at
   1010px, which is right for the menu — a list of dates beside a small board —
   and leaves this screen as a narrow column in the middle of a wide window.
   These are the live room's own figures: min(1560px,100%) and a 340px right
   column, so the two modes are the same shape at the same widths. */


/* ===========================================================================
   THE PLAY SCREEN IS GeoGauntlet's ROUND, WITH CLUES WHERE THE SLOTS GO

   It was built out of Gauntlet Live's .gxl-panel furniture, which was the
   wrong reference twice over: the room is a fifteen-tile grid on a clock, and
   nothing else in single player wears a panel around its question. This screen
   is a round — a heading, a line saying how it is judged, a column of rows and
   a box to type in — so it is made of the components GeoGauntlet's round is
   made of, and inherits their spacing rather than restating it.

   NOTHING HERE SETS A WIDTH, A GAP OR A PADDING that .gg-wrap.wide, .gg-slots
   and .gg-form do not already set. That is the point: the two screens cannot
   drift apart, and "the boxes are touching" cannot come back from this file,
   because the 16px under the last row is .gg-slots's own margin.
   =========================================================================== */

/* The verdict on a clue row: the leading edge and the mark, never a wash over
   the row. A tint turns the row into a status block, and the row's subject is
   the clue. */
.gg-slot.gu-ok{border-left:3px solid #4e7a16}
.gg-slot.gu-bad{border-left:3px solid #b4452f}
.gu-mark{font:900 14px/1 var(--display);min-width:14px;text-align:center}
.gg-slot.gu-ok .gu-mark{color:#4e7a16}
.gg-slot.gu-bad .gu-mark{color:#b4452f}
/* The newest clue is the one that just cost a guess. A background, the way the
   live scoreboard marks its own row — not a fourth ring in a column of rings. */
.gu-stack .gg-slot:last-child{background:var(--panel-2,var(--panel))}

/* The aside is .gg-how, the panel GeoGauntlet puts its rules in, so the column
   beside the round is the same object on both screens. */
.gu-aside .gu-ledger{display:flex;flex-direction:column;gap:6px;margin:0}
.gu-aside .gu-none{margin:0}

/* ---- a clue is a sentence, not a country name --------------------------
   The clue stack is built out of GeoGauntlet's slot row (.gg-slot), which is
   the right shape and the right furniture — but that row's name cell is
   written for a COUNTRY: `white-space:nowrap; overflow:hidden;
   text-overflow:ellipsis`, because "Bosnia and Herzegovina" in a 340px column
   should shorten rather than reflow the board.

   A clue is a sentence and has to say all of itself. On a phone the cell is
   249px against a clue of 300-odd, so "The country has an 8-letter name" was
   arriving as "The country has an 8-lette…" — measured, scrollWidth past
   clientWidth on every row. It wraps here instead, and the row grows with it:
   .gg-slot sets a min-height rather than a height, so nothing has to be told
   how tall two lines are.

   Scoped to .gu-stack so GeoGauntlet's own board keeps its ellipsis. */
.gu-stack .gg-slot{ align-items:flex-start; }
.gu-stack .gg-slot .nm{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  line-height:1.35;}

/* ---- AND THE NUMBER BESIDE IT STAYS ON THE FIRST LINE ----------------------

   .gg-slot centres its row, which is correct while every row is one line; at
   three lines it floats the number and the tick against the MIDDLE of a
   paragraph. `align-items:flex-start` above pins them to the top instead, and
   this pads them to the cap height of the 15px text beside them so the three
   read as one line rather than as three things that happen to start together. */
.gu-stack .gg-slot .n,
.gu-stack .gg-slot .gu-mark{padding-top:3px}

/* ---- THE LEDGER IS A COLUMN ONLY WHILE IT IS A COLUMN ----------------------

   `flex-direction:column` above is a rule about the 300px rail beside the
   board, not about the ledger. Below 980px gauntlet.css collapses .gg-wrap.wide
   to ONE column, so the aside is the full width of the phone and the same rule
   turns thirteen guesses into thirteen full-width rows — measured at 540px of
   scrolling for a list whose own content is a flag and a word. Worse, `.gu-g`
   is inline-flex and a column flex parent stretches it, so each guess drew a
   375px box with a country jammed against its left edge.

   So it goes back to the wrapping row `.gu-ledger` is by default — the same
   980px this is keyed to, because the two facts are the same fact: the rail is
   gone, and the rule that dressed the rail should go with it. Thirteen guesses
   fit in four rows.

   `align-items:flex-start` because a wrapping row stretches its items to the
   tallest one in the line, and a two-word country beside a one-word country
   would grow a pill to match its neighbour. */
@media(max-width:980px){
  .gu-aside .gu-ledger{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
}