/* ---------- Gauntlet Live: the room ----------
   THE SOLO SCREEN, WITH A ROOM AROUND IT. Every piece here is the single
   player mode's own visual language — the .gg-* bar, hud, prompt, slots,
   buttons and result table, the .gx-tile grid — drawn on the site's tokens,
   so the live game reads as the same game with other people in it. Nothing
   here borrows the arena or the duel chrome; the only new pieces are the
   ones a room has that a solo game does not (a roster, a scoreboard, a
   chat), and those are styled as .gg-how-style panels so they sit beside
   the board the way the rules panel does in solo.

   NEARLY THE WHOLE SCREEN ON A DESKTOP. The solo board caps at 1010px
   because its aside is reference text; here the aside is a live scoreboard
   and a chat and the grid earns the width, so the wrap runs to 1560px —
   and collapses to the same single readable column the solo screen keeps
   under 980px. The rules live inside the media query on purpose: outside
   it, their three classes would outrank the solo phone rule and pin two
   columns onto a phone. */
@media (min-width:981px){
  .gxl-wrap.gg-wrap.wide{max-width:min(1560px,100%);
    grid-template-columns:minmax(0,1fr) 340px}
  /* THE FINAL CARD IS ONE COLUMN and a narrow one. It is six rows of name and
     total on a screen whose job is "here is where everybody came" — given the
     room's full width the name floats away from the score with a hand's span
     of nothing between them, which reads as a table with a column missing. It
     is centred in the room instead (see the desktop block below, which stands
     it in the middle of the height as well). The reveal was one column too
     until it grew an answers panel of its own — see .gxl-rev. */
  .gxl-wrap.gg-wrap.wide.gxl-one{grid-template-columns:minmax(0,1fr);
    max-width:min(760px,100%)}
  /* The room panels stay on screen while the board scrolls, exactly as the
     solo rules panel does — and the chat log flexes inside the cap rather
     than pushing the scoreboard off the bottom. */
  .gxl-side{position:sticky;top:12px;display:flex;flex-direction:column;
    gap:12px;max-height:calc(100vh - 90px)}
  .gxl-side .gxl-chat{min-height:0;display:flex;flex-direction:column}
  /* THE LOG FLEXES UP TO A CEILING, AND THE CEILING IS NOT OPTIONAL. This read
     `max-height:none` on the argument that the side column is bounded and the
     flex would do the rest. It is not bounded, and the way it fails is a loop:
     the side is `height:100%` of a grid row that is `minmax(0,1fr)` — and a
     `1fr` row still GROWS to fit its content, so an uncapped log set the row's
     height, the row set the side's, and forty messages drew a 1,183px column
     in a 720px window with the composer somewhere below the fold. `min-height`
     and `min-height:0` cannot help, because nothing is being SHRUNK; the row is
     being grown.

     A viewport-relative ceiling keeps what the rule was for — the log is far
     more than the 190px it gets elsewhere and grows with the window — while
     making the log's intrinsic height finite, which is what breaks the loop.
     The 440px is the belt: past about a 950px window another inch of chat log
     is not worth another inch of scoreboard. */
  .gxl-side .gxl-log{flex:1;min-height:60px;max-height:min(46vh,440px)}
}

/* A GAP ON A PHONE TOO. The rule above turns the side column into a flex stack
   with 12px between its panels, and it is inside a min-width query — so on a
   phone the scoreboard and the chat under it are two plain blocks with nothing
   between them and they read as one panel with a line drawn through it. The
   margin is scoped to below the breakpoint rather than made unconditional,
   because above it the flex `gap` already owns the spacing and the two would
   add up to 24. */
@media (max-width:980px){
  .gxl-side > * + *{margin-top:12px}
}

/* ---------- Gauntlet Live: the room takes the desktop ----------
   THE ROOM IS THE ONLY MODE THAT IS A PLACE. Every other screen here is one
   person's board and is sized to be READ: the card stops at 1240px and the
   game inside it at 1010, because a line of prose wider than that is a line
   the eye loses coming back. A live room is not prose. It is a board of
   fifteen, a scoreboard of six people moving, and a chat — three things that
   are all better bigger, on a screen somebody sits in front of for seven
   rounds. Measured before this block on a 1512x950 laptop: the room drew
   1240x607, leaving 270px of desk down either side and 240px of nothing under
   it, while the fifteen tiles the whole mode is about were 161px wide and
   wrapping "North Macedonia" onto two lines.

   SO THE CARD OPENS OUT AND THE ROOM STANDS UP INSIDE IT. `body.gxl-open` is
   on while a live GAME is on screen (gxlShow puts it on, gxlLeave and the
   showHome wrapper take it off), so none of this can leak onto the daily or
   either solo Gauntlet — all three draw into the same .wrap. The door is not a
   game and does not get it: it is a title and a line about the next lobby, and
   a laptop filled with that is more wasted space rather than less.

   ONE SCREEN, NO SCROLL, which is the site's rule for a game in progress and
   the one thing this mode could not keep between rounds. --gxl-chrome is
   everything on the page the room does not own: the body's top padding, the
   account bar above the card, the footer under it and the body's bottom
   padding. Off 100vh, what is left is the room's. It is a `min-height` and not
   a `height`: a short window still scrolls rather than crushing the board. */
@media (min-width:981px){
  body.gxl-open{--gxl-chrome:186px;padding-bottom:20px}
  body.gxl-open .wrap{max-width:min(1720px,100%)}
  /* Row one is the bar, row two is the room, and row two takes the rest. */
  body.gxl-open .gxl-wrap.gg-wrap{min-height:calc(100vh - var(--gxl-chrome));
    align-items:stretch;grid-template-rows:auto minmax(0,1fr)}
  body.gxl-open .gxl-wrap > .gg-main{display:flex;flex-direction:column;min-height:0}
  /* THE SIDE COLUMN STOPS BEING STICKY, because there is no longer anything for
     it to stick to: it is exactly as tall as the board beside it. The panels
     that size themselves keep their height and the chat log takes what is
     left, so the log grows with the window instead of ending at 190px with
     white space under it. */
  body.gxl-open .gxl-side{position:static;height:100%;max-height:none;min-height:0}
  body.gxl-open .gxl-side > .gxl-chat{flex:1;min-height:120px}

  /* ---- the round ----
     THE GRID IS THE PART THAT GROWS. Everything else on the play screen is one
     line — the round, the clock, the ask, the three slots, the button — and
     the fifteen tiles are the thing being looked at and clicked, so the tiles
     take the room those lines do not.

     NARROWER TRACKS THAN THE SOLO BOARD'S 148, because on this screen the cost
     of a column is a ROW: at 1024 the fifteen came out three across and FIVE
     down, and five rows of board do not fit under a two-line question with the
     slots and the button still on screen. A 122px track holds a flag and most
     country names at 16px, which is four across and four down there — and five
     across from 1200px up, pinned below, because 15 is 5x3. */
  body.gxl-open .gxl-wrap .gxl-grid{flex:1;min-height:0;margin-bottom:12px;
    grid-template-columns:repeat(auto-fill,minmax(122px,1fr));
    grid-auto-rows:minmax(46px,1fr);align-content:stretch;gap:10px}
  /* THE ROWS TAKE THE HEIGHT AND THE TILE TAKES 118 OF IT — the cap is on the
     TILE and not on the track, and that is the whole trick. A track capped at
     a length cannot give any of it back: rows of `minmax(46px,104px)` sat at
     104 whatever was left, so four of them ran off the bottom of a 1024x800
     laptop while the same rule looked correct on a desktop. `1fr` rows share
     whatever there is — a short window gets short rows — and the cap on the
     tile stops a tall window drawing a 150px box with one word in it. */
  body.gxl-open .gxl-wrap .gxl-grid .gx-tile{min-height:0;max-height:118px;
    align-self:center;height:100%;font-size:16px;padding:10px 14px;
    border-radius:13px}
  /* AND A NAME IS NOT BROKEN IN HALF. .gx-tile carries overflow-wrap:anywhere
     so that nothing can ever spill out of a tile, which is the right trade on
     a phone and the wrong one here: a 135px track leaves 67px for the name once
     the flag and the padding have had theirs, and 67px is five or six
     characters at 16px — so a desktop board dealt "Kazakhstan" and
     "Montenegro" in two pieces each, broken wherever the box happened to end.
     A country's name is the one piece of text on this screen that has to be
     read as a word.

     `normal` MAKES THE PROBLEM MEASURABLE, which is the point. Words wrap
     between themselves and never inside themselves, so a name too long for its
     tile OVERFLOWS instead of breaking — and an overflow is something
     gxlFitNames can see and step the size down until it is gone. */
  body.gxl-open .gxl-wrap .gxl-grid .gx-tile{overflow-wrap:normal;
    word-break:normal}
  /* A BIGGER TILE GETS A BIGGER FLAG. The flag is what the eye comes back to
     when it is looking for the tile it already decided about — at 22px in a
     118px row it is a stamp in a field. */
  body.gxl-open .gxl-wrap .gxl-grid .flag-mini{width:30px;height:20px;
    box-shadow:0 0 0 1px rgba(0,0,0,.35)}
  /* THE ASK, at the size of the screen it is now on. */
  body.gxl-open .gxl-wrap .gg-main > .gg-prompt{font-size:clamp(28px,2.4vw,36px)}
  /* THE THREE SLOTS GO ACROSS. Stacked, they are three near-empty bars costing
     150px of the height the grid wants; side by side they read as what they
     are — first, second, third — and cost 60. Stacked is still right on a
     phone, where three across would be three ellipses. */
  body.gxl-open .gxl-wrap .gg-main > .gg-slots{flex-direction:row;
    gap:10px;margin-bottom:12px}
  body.gxl-open .gxl-wrap .gg-main > .gg-slots > .gg-slot{flex:1;min-width:0;
    min-height:62px;font-size:15px}
  /* The last row of the board sits at the bottom of the column rather than
     floating in the middle of it. */
  body.gxl-open .gxl-wrap .gg-main > .gg-row,
  body.gxl-open .gxl-wrap .gg-main > .gxl-locked{margin-top:auto}

  /* ---- the lobby ----
     THE COUNTDOWN OWNS THE EMPTY SPACE. It is the only thing on the screen
     anybody is waiting for, so it takes the room's height and centres in it,
     and the number is sized to the space it is now standing in rather than to
     the 640px column it used to. The clamp minimum is a desktop minimum on
     purpose — this whole block is behind a 981px query, so no phone ever
     resolves it. */
  body.gxl-open .gxl-count{flex:1;display:flex;flex-direction:column;
    justify-content:center;padding:0 0 6px}
  body.gxl-open .gxl-countnum{font-size:clamp(74px,8vw,116px)}
  body.gxl-open .gxl-countlbl{font-size:12px;letter-spacing:.2em}
  body.gxl-open .gxl-countsub{font-size:14px}
  body.gxl-open .gxl-chip{padding:7px 15px 7px 7px;font-size:14.5px}
  /* How it goes is the last thing in the column, under the roster it explains,
     and it stops the lobby ending in mid-air. */
  body.gxl-open .gxl-wrap .gg-main > .gg-bonus:last-child{margin-top:auto}

  /* ---- between rounds ----
     TWO COLUMNS (see gxlReveal): the round's question and the scoreboard on the
     left, the fifteen answers and the chat on the right. The answers column is
     wider than the room's own 340px side — it is a five-column table, and at
     340 every country over eight letters was an ellipsis.

     THE ASK COMES FIRST ON A DESKTOP and the scoreboard under it. In one column
     the scoreboard leads, because it is what the screen is for and the question
     is still on the phone behind it; in two, the ask is the header of the
     column the answers are beside, and printing it under a scoreboard six rows
     tall put the round's question below the round's result. Order rather than
     markup, so the phone keeps the order it has always had. */
  body.gxl-open .gxl-rev.gg-wrap.wide{grid-template-columns:minmax(0,1fr) clamp(380px,31vw,520px)}
  body.gxl-open .gxl-rev .gg-hud{order:0}
  body.gxl-open .gxl-rev .gg-prompt{order:1;font-size:clamp(26px,2.2vw,33px);margin-bottom:2px}
  body.gxl-open .gxl-rev .gg-rank{order:2}
  body.gxl-open .gxl-rev .gxl-score{order:3}
  body.gxl-open .gxl-rev .gg-sub{order:4}
  /* THE ROWS SPREAD instead of stacking at the top: a result screen with six
     names on it should look like a result, and the space is there. They stretch
     evenly and stop at 84px, which is where a row of one name starts to look
     like a panel. */
  body.gxl-open .gxl-rev .gxl-score{flex:1;display:flex;flex-direction:column;
    gap:8px;margin:10px 0 12px;min-height:0}
  body.gxl-open .gxl-rev .gxl-srow{margin-top:0;flex:1 1 0;min-height:50px;max-height:84px}
  /* THE CHIP SITS BESIDE THE SCORE where there is width for it — "+65.4
     +10 pts bonus" is one sentence and reads as one. Under it on a phone,
     where the same line would take the width off the name. */
  body.gxl-open .gxl-rev .gxl-bonus{display:inline-block;margin:0 0 0 8px;
    vertical-align:1px}
  /* The answers are fifteen rows with the chat under them; if the window is
     too short for both, the table scrolls inside itself rather than the page. */
  body.gxl-open .gxl-rev .gxl-answers{overflow-y:auto;min-height:0}
  body.gxl-open .gxl-rev .gxl-side{display:flex;flex-direction:column;gap:12px}

  /* ---- the end, and the three-two-one ----
     A result and a countdown are both one thing in the middle of a screen, so
     they are centred in the room rather than stacked at the top of it. */
  body.gxl-open .gxl-wrap.gxl-one > .gg-main{justify-content:center}
  body.gxl-open .gxl-wrap:not(.wide){display:flex;flex-direction:column}
  body.gxl-open .gxl-pre{flex:1;display:flex;flex-direction:column;
    justify-content:center}
  /* Three seconds in the middle of a whole screen: the count is the only thing
     on it and can be read from across a room. */
  body.gxl-open .gxl-pre .big{font-size:clamp(80px,9vw,132px)}
  body.gxl-open .gxl-premetric{font-size:clamp(26px,2.4vw,34px)}
}
/* Past the point where the tiles have room for five across, they take it: at
   1200px the main column is wide enough for fifteen to sit as three clean rows
   of five, which is the shape the round is written in — "the same fifteen".
   Left to auto-fill, a wider window gives seven and then a row of one. */
@media (min-width:1200px){
  body.gxl-open .gxl-wrap .gxl-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* AND BELOW THAT POINT, THE NAME GETS BACK THE ROOM THE DECORATION TOOK.

   Between the breakpoint and 1200px the side column takes most of the width and
   the board is left with four tracks of about 135px. Of that, 28px is padding,
   30px is flag and 9px is the gap between them: two thirds of the tile spent
   before a letter is drawn, leaving 67px for a name that wants 90. gxlFitNames
   can shrink type but it cannot conjure width, and in a 67px box even its floor
   will not hold "Turkmenistan" — so the name breaks in half anyway, which is
   the thing all of this exists to stop.

   A smaller flag and tighter padding are worth 14px here, and 14px is the
   difference between "Kazakhstan" at 13px and "Kazakhstan" in two pieces. The
   30px flag keeps the tile it was written for: five across, from 1200px up.

   AFTER the block above and not inside it, which is not a filing preference:
   the 30px rule lives near the end of that block, and a 24px rule written above
   it loses to it at equal specificity no matter which media query wrapped
   it. */
@media (min-width:981px) and (max-width:1199px){
  body.gxl-open .gxl-wrap .gxl-grid .gx-tile{padding:10px;gap:7px}
  body.gxl-open .gxl-wrap .gxl-grid .flag-mini{width:24px;height:16px}
}

/* ---- panels: the .gg-how recipe, reused for the room's furniture ---- */
.gxl-panel{border:1px solid var(--border);border-radius:14px;
  background:var(--panel);padding:12px 14px;font-size:13px;color:var(--text)}
.gxl-ph{display:flex;align-items:baseline;gap:8px;font:900 11px/1 var(--display);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);
  margin-bottom:9px}
.gxl-blsub{font:400 11px/1 var(--font,inherit);letter-spacing:0;
  text-transform:none;color:var(--text-muted,var(--text-soft))}
.gxl-quiet{color:var(--text-soft)}

/* ---- the tiles, tap-only ----
   THE LIVE BOARD DOES NOT DRAG. Fifteen strangers on one clock is not the
   place for a scratchpad gesture — tap a tile, press Select, and that is
   the whole input. The grip dots go because they are the promise that a
   tile moves, and touch-action returns to normal so the page scrolls from
   anywhere on a phone. */
.gxl-grid .gx-tile{cursor:pointer;touch-action:auto}
.gxl-grid .gx-tile.taken{cursor:default}
.gxl-grid .gx-tile .grip{display:none}
.gxl-meta{font-size:12.5px;color:var(--text-soft)}

/* ---- the clock, where the solo total sits ---- */
.gxl-clock{margin-left:auto;font:900 26px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.gxl-clock.low{color:var(--rust,#ff5c5c)}
.gxl-clock.gxl-nextchip{font-size:17px}
.gxl-answered{margin-left:auto;font:700 10.5px/1.4 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)}
.gxl-locked{display:flex;align-items:center;justify-content:center;gap:8px;
  flex-wrap:wrap;margin-top:10px;padding:14px 14px;border:1px dashed var(--border-strong);
  border-radius:12px;color:var(--text-soft);font-size:13.5px}
.gxl-locked b{color:var(--gold);font:900 15px/1 var(--display)}
.gxl-locked .gxl-answered{flex-basis:100%;text-align:center;margin:2px 0 0}

/* ---- the live scoreboard (side panel) ---- */
.gxl-brow{display:flex;align-items:center;gap:8px;padding:6px 4px;
  border-top:1px solid var(--border);font-size:13px}
.gxl-brow:first-of-type{border-top:0}
.gxl-brow.me{background:var(--panel-2);border-radius:8px;border-top-color:transparent}
.gxl-brow.away .gxl-bname,.gxl-brow.away .gxl-paren,
.gxl-brow.away .gxl-btotal{opacity:.55}
.gxl-brow.gone{opacity:.45}
.gxl-brank{min-width:18px;text-align:center;font:900 12px/1 var(--display);
  color:var(--text-soft)}
.gxl-move{width:12px;text-align:center;font-size:10px;flex:none}
.gxl-move.up{color:#2FA463}
.gxl-move.down{color:var(--rust,#D65745)}
.gxl-bname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:700}
/* THE ROUND SCORE IS ITS OWN COLUMN, NOT PART OF THE NAME.
   It used to sit INSIDE .gxl-bname, which is the flexible cell and the one
   that ellipsises — so on a narrow panel a long name ate its own score and the
   row read "Archimedes31 (0…". The number is the thing the row is FOR, and the
   name is the part that can be abbreviated and still be recognised, so the two
   are separate cells and only the name gives way. `flex:none` is what keeps
   the number out of the shrinking, and white-space:nowrap stops "(+33.3)"
   breaking across two lines when the name has taken everything else. */
.gxl-paren{flex:none;white-space:nowrap;font-weight:400;color:var(--text-soft);
  font-size:12px;font-variant-numeric:tabular-nums}
.gxl-brow.me .gxl-paren{color:var(--accent)}
.gxl-bstate{font:700 9.5px/1.4 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-soft);min-width:52px;
  text-align:right;flex:none}
.gxl-bstate.in{color:var(--accent)}
.gxl-btotal{min-width:44px;text-align:right;font:900 14px/1 var(--display);
  color:var(--gold);font-variant-numeric:tabular-nums}

/* ---- the roster ---- */
.gxl-roster{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.gxl-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 6px;
  border:1px solid var(--border-strong);border-radius:999px;background:var(--panel);
  font-weight:700;font-size:13.5px;color:var(--text)}
.gxl-chip.you{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.av.gxl-init{font-weight:800;color:var(--text);background:var(--panel-3)}

/* ---- the lobby countdown ---- */
.gxl-count{text-align:center;padding:10px 0 4px}
.gxl-countlbl{font:900 11px/1 var(--display);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-soft)}
.gxl-countnum{font:900 clamp(46px,9vw,74px)/1.05 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums;margin-top:6px}
.gxl-countsub{font-size:12.5px;color:var(--text-soft);margin-top:4px}
/* One step quieter than the line above it: that one is about THIS game and this
   one is about the next, so it should read as a footnote to the clock rather
   than as a second fact competing with it. */
.gxl-countevery{font:700 11px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);margin-top:8px}
/* input.gxl-in, spelled with the element: the game's base sheet styles every
   input[type=number] for the guess box — flex:1, 22px, its own dark field —
   and only an equal-specificity rule later in the sheet takes a number input
   back for a small form. Same for the chat input below. */
input.gxl-in{flex:none;width:110px;padding:9px 11px;border:1px solid var(--border-strong);
  border-radius:10px;background:var(--field,var(--panel-2));color:var(--text);
  font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.gg-go.gxl-sm{padding:9px 16px;font-size:13px}

/* ---- chat ---- */
.gxl-log{max-height:190px;overflow-y:auto;display:flex;flex-direction:column;
  gap:5px;margin-bottom:8px;font-size:13px;line-height:1.4;
  overflow-wrap:anywhere}
.gxl-msg .mn{font-weight:800;color:var(--accent);margin-right:5px}
.gxl-msg.mine .mn{color:var(--gold)}
.gxl-emotes{display:flex;gap:6px;margin-bottom:8px}
.gxl-emote{flex:1;padding:6px 0;border:1px solid var(--border);border-radius:8px;
  background:var(--panel-2);color:var(--text);cursor:pointer;font-size:14px}
.gxl-emote:hover{border-color:var(--text-soft)}
.gxl-crow{display:flex;gap:8px}
.gxl-crow input{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--border-strong);
  border-radius:10px;background:var(--field,var(--panel-2));color:var(--text);
  font-size:13.5px}
.gxl-send{flex:none;padding:9px 15px;border-radius:10px;border:0;
  background:var(--accent);color:var(--on-accent);font:900 12px/1.4 var(--display);
  cursor:pointer}
.gxl-chatbar{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border:1px solid var(--border);border-radius:12px;background:var(--panel);
  cursor:pointer;font-size:13px;color:var(--text-soft)}
.gxl-chatbar .pre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.gxl-chatbar .pre b{color:var(--text)}
.gxl-chatbar .n{font:900 11px/1 var(--display);color:var(--accent)}
.gxl-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;
  max-width:86%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--panel);border:1px solid var(--accent);color:var(--text);
  border-radius:12px;padding:8px 14px;font-size:13px;
  box-shadow:0 12px 30px rgba(0,0,0,.35)}
.gxl-toast b{color:var(--accent)}

/* ---- "round ending in 3, 2, 1" ---- */
.gxl-closing{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:70;
  padding:10px 22px;border-radius:12px;background:var(--panel);
  border:1px solid var(--rust,#ff5c5c);color:var(--text);
  font:900 15px/1.3 var(--display);letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 14px 34px rgba(0,0,0,.35);animation:gxlpulse .9s ease-in-out infinite}
.gxl-closing b{color:var(--rust,#ff5c5c);font-size:19px;margin-left:5px;
  font-variant-numeric:tabular-nums}
.gxl-closing[hidden]{display:none}
@keyframes gxlpulse{0%,100%{opacity:1}50%{opacity:.7}}

/* ---- the reveal: the scoreboard fills the page ---- */
.gxl-score{margin:6px 0 18px}
.gxl-srow{display:flex;align-items:center;gap:12px;padding:10px 14px;
  border:1px solid var(--border);border-radius:12px;background:var(--panel);
  margin-top:8px;position:relative;will-change:transform}
.gxl-srow.me{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.gxl-srow.gone{opacity:.45}
.gxl-srank{min-width:24px;text-align:center;font:900 15px/1 var(--display);
  color:var(--text-soft)}
.gxl-smove{width:14px;text-align:center;font-size:11px;flex:none;
  opacity:0;transition:opacity .3s}
.gxl-srow.settled .gxl-smove{opacity:1}
.gxl-smove.up{color:#2FA463}
.gxl-smove.down{color:var(--rust,#D65745)}
.gxl-smove.same{color:var(--text-soft)}
.gxl-sname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:800;font-size:15px}
.gxl-leadtag{margin-left:8px;font:700 9px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);
  border-radius:4px;padding:2px 6px;vertical-align:2px;white-space:nowrap}
/* THE ROUND-WINNER'S TEN POINTS, beside the round score rather than inside it.
   Gold, because it is the one part of a live score that is about the room —
   everything else pays the same alone as it does against five people. A split
   prints its share (5.0 for two, 3.3 for three), so the chip says what was
   won as well as that something was. */
.gxl-bonus{display:block;margin-top:4px;padding:3px 7px;
  border:1px solid var(--gold);border-radius:999px;
  font:900 9.5px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Tighter on a phone, where the row has 375px for six columns and the chip is
   the widest thing in the narrowest one. */
@media (max-width:600px){
  .gxl-bonus{font-size:8.5px;padding:2px 5px;letter-spacing:.03em}
}
.gxl-won{color:var(--gold)}
/* flex:none, because the chip under the number is wider than the number and a
   shrinking column clipped the end of the word off on a phone. The name beside
   it is the one that gives, and it already ellipsises. */
.gxl-sround{flex:none;min-width:96px;text-align:right;font:900 15px/1 var(--display);
  color:var(--accent);font-variant-numeric:tabular-nums;
  opacity:0;transform:translateY(6px) scale(.9);transition:opacity .35s,transform .35s}
.gxl-srow.pts .gxl-sround,.gxl-srow.settled .gxl-sround{opacity:1;transform:none}
.gxl-stotal{width:80px;text-align:right;font:900 20px/1 var(--display);
  color:var(--gold);font-variant-numeric:tabular-nums}
/* The round's top scorer, ringed in gold wherever their face appears. */
.gxl-gold{box-shadow:0 0 0 2px var(--gold) !important}
/* The same chip as the reveal's, inline beside a name rather than under a
   score — one gold shape for "the room paid you this", wherever it appears. */
.gxl-fbonus{margin-left:9px;padding:3px 7px;border:1px solid var(--gold);
  border-radius:999px;font:900 9.5px/1 var(--display);letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap;
  font-variant-numeric:tabular-nums;vertical-align:1px}

/* ---- the answers, in the solo result table's clothes ----
   .gg-board / .gg-bhead are the shared shell; the rows are local because a
   .gg-brow is a FOUR column grid and these carry a fifth — who picked it. */
.gxl-arow{display:grid;grid-template-columns:26px minmax(0,1fr) auto minmax(24px,auto) 56px;
  align-items:center;gap:10px;padding:6px 12px;font-size:13.5px;color:var(--text);
  border-top:1px solid var(--border);border-left:3px solid transparent;
  opacity:0;animation:gxlin .4s ease forwards}
.gxl-answers.settled .gxl-arow{opacity:1;animation:none}
.gxl-arow.top .gxl-ark{color:var(--gold);font-weight:900}
.gxl-arow.mine{border-left-color:var(--accent);background:var(--panel)}
.gxl-arow.mine .gxl-anm{font-weight:800}
.gxl-arow.mine.dropped{border-left-color:var(--text-soft)}
.gxl-arow.mine.dropped .gxl-apts{color:var(--text-soft)}
.gxl-ark{font:700 11px/1.4 var(--mono);color:var(--text-soft);text-align:center}
.gxl-anm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.gxl-anm .flag-mini{width:21px;height:14px;margin-right:7px;vertical-align:-3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.gxl-aval{font:600 12px/1.4 var(--mono);color:var(--text-soft);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.gxl-apick{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.gxl-picker{display:inline-flex;border-radius:50%}
.gxl-apts{text-align:right;font:900 12px/1.4 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums}
@keyframes gxlin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---- the final table ---- */
.gxl-frow{display:flex;align-items:center;gap:10px;padding:9px 14px;
  border:1px solid var(--border);border-radius:12px;background:var(--panel);
  margin-top:8px;font-size:14px}
.gxl-frow.me{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.gxl-frow.gone{opacity:.45}
.gxl-frow .gxl-medal{min-width:30px;text-align:center;font-size:17px;
  font-variant-numeric:tabular-nums;color:var(--text-soft);font-weight:900}
.gxl-frow .gxl-fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:800}
.gxl-sq{font-size:11px;letter-spacing:-1px;white-space:nowrap;flex:none}
.gxl-ftotal{min-width:60px;text-align:right;font:900 17px/1 var(--display);
  color:var(--gold);font-variant-numeric:tabular-nums}
/* THE THREE-TWO-ONE. The measure is set at the question's own size and the
   ranking clause in the accent under the number, so the two halves of the ask
   are read in the same order they are on the board. */
.gxl-pre .cap{letter-spacing:.14em}
.gxl-premetric{font:900 clamp(26px,5vw,34px)/1.15 var(--display);margin:6px 0 2px;
  color:var(--text)}
.gxl-prerank{font:900 clamp(14px,2.4vw,17px)/1.3 var(--display);color:var(--accent);
  margin-top:4px}
.gxl-yours{font-size:13.5px;color:var(--text-soft);text-align:center;margin:4px 0 12px}
.gxl-yours b{color:var(--text)}

/* ---- the door and the admin's hand ---- */
.gxl-doorline{font-size:14px;margin-top:2px}
.gxl-doorline b{font:900 16px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums}
.gxl-adminrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.gxl-wait{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 10px;color:var(--text-soft);font-size:13.5px}
.gxl-dots i{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--text-soft);margin-right:3px;animation:gxldots 1.2s infinite}
.gxl-dots i:nth-child(2){animation-delay:.2s}
.gxl-dots i:nth-child(3){animation-delay:.4s}
@keyframes gxldots{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ---- phones: one column, the solo screen's own manners ---- */
@media (max-width:700px){
  .gxl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .gxl-clock{font-size:22px}
  .gxl-countnum{font-size:clamp(42px,14vw,58px)}
  .gxl-srow{padding:8px 10px;gap:8px}
  .gxl-sname{font-size:14px}
  .gxl-stotal{width:64px;font-size:17px}
  .gxl-sround{width:56px;font-size:13px}
  .gxl-arow{grid-template-columns:20px minmax(0,1fr) auto auto 46px;gap:7px;
    padding:6px 8px;font-size:12.5px}
  .gxl-closing{bottom:12px;font-size:13.5px;padding:8px 16px}
  .gxl-log{max-height:150px}
}

/* ---------- GeoGauntlet on a phone ----------
   THIS MODE IS ALLOWED TO SCROLL. Every other screen in the game is built to
   fit without one, and that constraint is why this one read badly on a phone:
   the type had been squeezed to keep ten rounds' worth of board above the
   fold, on the screen with the least room to squeeze it into. A round here is
   one question and three answers — scrolling past the rules panel costs
   nothing, and 19px of question was costing plenty.

   So: the question and its ranking get the room they need, the answer slots
   get taller and readable, and the board is free to run past the bottom. */
@media(max-width:700px){
  .gg-wrap{padding:0 14px}
  .gg-hud{margin-bottom:2px}
  .gg-round{font-size:14px}
  .gg-total{font-size:30px}
  .gg-prompt{margin-top:6px;letter-spacing:-.01em}
  .gg-sub{font-size:14px;margin-bottom:14px}
  /* The bar carries a pill, sometimes a date, and the way out. At this width
     the three do not sit on one line, and the way out is the one that must not
     be the thing that falls off the edge — so it wraps to its own line and
     stops being pushed right by the margin-left:auto that positions it on a
     desktop. */
  .gg-bar{gap:8px 10px}
  .gg-back{margin-left:auto;font-size:14px}
  /* THE BETWEEN-ROUNDS COUNTDOWN HAS TO SHARE ITS LINE. The hud is a wrapping
     flex row and the chip is pushed right by margin-left:auto — so the moment
     "Round 3 of 7 · results" and "Next round in 12" do not both fit, the
     countdown drops onto a line of its own and sits hard against the right
     margin with nothing beside it. Measured at 375px: 160px of label, a 14px
     gap and a 17px chip came to 324 in 325 of room, which is not a fit, it is
     a coin toss. Smaller here, and nowrap so it can never break mid-phrase and
     strand the number on its own. The round clock itself is untouched: it is
     three characters and was never the problem. */
  .gg-hud{gap:6px 10px}
  .gxl-clock.gxl-nextchip{font-size:14px;white-space:nowrap}
  /* THE NAME ROW, STACKED. On a desktop the label, the box, the fine print and
     the Change button sit on one line. At phone width the fine print wraps
     under the box and Change — which is aligned to the row's BOTTOM — drops
     with it, so the button ends up level with a sentence instead of with the
     input it acts on, and the block reads ragged.
     Reordering is what fixes it rather than more rules: the hint goes ABOVE
     the box (where it reads as a hint), which leaves the input as the last
     line of the group, which is what Change then lines up with. */
  .gxl-namebox{gap:5px 10px}
  .gxl-namebox label{flex-basis:100%;order:1}
  .gxl-namefine{flex-basis:100%;order:2}
  .gxl-namebox input{flex:1 1 140px;order:3}
  .gxl-nameerr{order:4}
  .gg-bar .gg-left{font-size:12px;width:100%;order:3}
  /* An answer is the thing you came back to read. 14px in a 46px box was the
     board being polite about space it did not need to save. */
  .gg-slot{min-height:52px;padding:12px 14px;font-size:15.5px}
  .gg-slot .nm{font-size:16px}
  .gg-slot .pts{font-size:15px}
  .gg-slot .val{font-size:13px}
  /* SPORTSGAUNTLET'S VALUES ARE SENTENCES, not numbers, and on a phone that
     turned every answer into "Tom Bra…". GeoGauntlet's value is "27,196,812" and
     fits beside a name; "2000 round 6 pick 199" does not, so on a narrow screen
     the row wraps and the value drops under the name at full width. The name
     stops being truncated because it stops competing for the space.

     Scoped to #sgScreen deliberately: .gg-slot is shared, and GeoGauntlet's rows
     have no reason to grow a second line. */
  #sgScreen .gg-slot{flex-wrap:wrap;row-gap:2px}
  #sgScreen .gg-slot .nm{flex:1 1 auto;white-space:normal;overflow:visible}
  #sgScreen .gg-slot .val{flex:1 0 100%;order:4;padding-left:24px;font-size:12.5px}
  /* The points stay on the first line, beside the name, where they are the thing
     being looked for. */
  #sgScreen .gg-slot .pts{margin-left:auto}
  .gg-input{padding:15px 16px;font-size:16px}   /* 16px or iOS zooms on focus */
  .gg-go,.gg-stand{padding:14px 20px;font-size:15px}
  /* TWO COLUMNS, NOT ONE. Fifteen tiles one per line is a screen and a half of
     scrolling to read a list that is supposed to be taken in at a glance; two
     columns puts all fifteen in eight rows, which fits under the question on a
     phone. The floor is 130px because the longest country name in the pool
     ("Bosnia and Herzegovina") has to wrap to two lines rather than be clipped
     — a name you cannot read is a name you cannot pick. */
  .gx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .gx-tile{padding:9px 10px;font-size:14px;min-height:48px;gap:6px}
  .gx-tile .grip{font-size:12px}
  .gg-row{flex-wrap:wrap}
  .gg-row{flex-wrap:wrap}
  .gg-left{font-size:13.5px}
  .gg-sugg div{padding:12px 14px;font-size:16px}
  /* THE LIST OPENS DOWNWARD ON A PHONE. Upward is right on a desktop, where the
     field sits low in a tall card with nothing under it. On a phone the field is
     what the thumb is already at, and a list opening upward covers the question
     and the answers so far — the two things worth seeing while choosing. Down
     puts it between the field and the keyboard, where a phone expects it.

     bottom:auto IS LOAD-BEARING, and this rule has to stay below the base one.
     .gg-sugg sets bottom:calc(100% + 4px); adding top without clearing bottom
     leaves an absolutely positioned box pinned at both edges, and the height
     collapses to nothing — the list was one pixel tall with 45px of countries
     inside it. Media queries add no specificity, so source order is the only
     thing making this win: keep it after the base rule, not up in an earlier
     breakpoint block. */
  .gg-sugg{top:calc(100% + 4px);bottom:auto}
  .gg-main{--gg-row:44px}                        /* taller rows, same 5.5 of them */
  .gg-h{font-size:12px;margin-top:22px}
  .gg-bonus{font-size:14.5px}
  .gg-over h3{font-size:17px}
  .gg-over .why,.gg-missed div{font-size:14.5px}
  .gg-how{font-size:14.5px;padding:16px}
  .gg-final{padding:22px 4px}
  .gg-rounds div{font-size:14px}
}