/* ===========================================================================
   NFL LIVE — the accent, the chooser, and the board's column count

   THIS SHEET IS DELIBERATELY SMALL. web/src/nfllive.js draws the same .gxl-*
   and .gx-* markup web/src/gauntletlive.js draws, so gauntletlive.css styles
   the whole room already — the scoreboard, the roster, the chat, the reveal,
   the final card, all 634 lines of it, unforked. Copying that to change a
   colour would have been the largest piece of duplication in the change and
   the first thing to drift.

   WHAT IS ACTUALLY DIFFERENT is three things: the room wears NFL Mode's green
   rather than Gauntlet Live's red, the board is not always fifteen tiles, and
   there is now a screen for choosing between two rooms. That is this file.

   IT MUST LOAD AFTER gauntletlive.css. The cascade is the override; see the
   comment on the <link> in index.html.
   =========================================================================== */

/* ---- the accent -----------------------------------------------------------
   NFL Mode's green (--m-nfl), so the two NFL screens read as one game the way
   the two Extreme screens do. Scoped to #nlvScreen so nothing here can reach
   the other room, which is drawn from the same classes in a sibling div. */
#nlvScreen .tag{background:var(--m-nfl);color:#fff}

/* TWO THINGS HERE USED TO TAKE A BACKGROUND AND NOT A FOREGROUND, and both
   came out unreadable. `.tag` above is the one that was done right: it sets a
   colour to go on the green it paints.

   `.gg-slot.got .n` is the 1/2/3 down the left of your three picks. Painting
   --m-nfl (#245C31, a dark green) behind it left the number at .gg-slot .n's
   own colour — var(--text) at .6 opacity — which is dark text on dark green,
   about 1.2:1. It read as an empty green square. It is also the ONLY state
   that broke: an unfilled slot has no .got, so the same number was perfectly
   legible right up until you picked something.

   `.gxl-leadtag` is the ROUND LEADER pill, and gauntletlive.css draws it as an
   OUTLINE — gold text, gold border, no fill. A background was added under it
   here, so the gold sat on the green and the pill lost the shape it was
   designed as.

   Both are fixed by taking the background back off rather than by inventing a
   foreground: the number then matches the empty slots beside it, and the pill
   is the outline it is everywhere else. The room is still green — that is what
   .tag, the tiles and the accent are for. */
#nlvScreen .gg-slot.got .n{background:none}
#nlvScreen .gxl-leadtag{background:none}

/* ---- THE BOARD IS NOT ALWAYS FIFTEEN --------------------------------------
   gauntletlive.css pins the desktop grid to five columns past 1200px, and it
   is right to: a Gauntlet Live pool is always the pool_size dial, so fifteen
   sits as three clean rows of five — "the same fifteen", which is what the
   round is written in.

   AN NFL POOL IS OFTEN SHORTER. A question deals at its own length when its
   answer set is smaller than the board (see nfl_gauntlet.deal_game), and real
   ones are: "teams with a bird mascot" has five answers, "one-and-done
   players" has eight, several divisional questions have twelve. Five columns
   would give those a row of five and a row of three with a hole beside it, or
   a single row of five that reads as a full board when it is the whole answer
   set.

   So the count comes back to auto-fit, bounded, and CENTRED — a short board
   sits in the middle of the column rather than hugging the left edge, which is
   what makes eight names look deliberate instead of clipped. Fifteen still
   lands as three rows of five at this width, so the common case is unchanged.
   --------------------------------------------------------------------------- */
@media (min-width:1200px){
  body.gxl-open #nlvScreen .gxl-wrap .gxl-grid{
    grid-template-columns:repeat(auto-fit,minmax(0,180px));
    justify-content:center}
}

/* A NAME IS LONGER THAN A COUNTRY'S. "Jaxon Smith-Njigba" and "Jacksonville
   Jaguars" are both longer than all but a handful of country names, and the
   tile is sized for the latter — so the type steps down a little and a name is
   allowed to break across two lines rather than being clipped. There is no
   flag to leave room for, which is where the width comes from. */
#nlvScreen .gxl-grid .gx-tile{font-size:15px;line-height:1.2;
  overflow-wrap:break-word;word-break:normal;hyphens:none}
body.gxl-open #nlvScreen .gxl-wrap .gxl-grid .gx-tile{font-size:15px}
@media (max-width:560px){
  #nlvScreen .gxl-grid .gx-tile{font-size:13.5px}
}

/* ---- THE ONE-MINUTE CALL, now that it carries two buttons -----------------
   The strip itself is social.css's and is unchanged; what is new is that
   #gxlSoonGo is a CONTAINER of buttons rather than a button. On a wide screen
   the two sit side by side; on a phone the strip is already the width of the
   screen and two full-width buttons would push the wording out, so they wrap
   underneath it instead.
   --------------------------------------------------------------------------- */
.gxl-soongos{flex:none;display:flex;align-items:center;gap:7px}
/* The count of who is already waiting, on the button. A pill rather than
   parentheses: it has to read at a glance from across a page somebody is doing
   something else on. */
.gxl-soonn{display:inline-block;min-width:16px;padding:0 5px;margin-left:5px;
  border-radius:999px;background:rgba(0,0,0,.22);font-size:11px;line-height:16px;
  vertical-align:1px}
@media(max-width:560px){
  .gxl-soon{flex-wrap:wrap}
  .gxl-soontx{flex:1 0 100%;order:1;white-space:normal}
  .gxl-soongos{order:2;flex:1;flex-wrap:wrap}
  .gxl-soonx{order:3}
  .gxl-soongos .gxl-soongo{flex:1;min-width:0;white-space:nowrap}
}

/* ---- THE CHOOSER ----------------------------------------------------------
   Two cards, each a .gg-slot — the same shape the Gauntlet menu's two buttons
   already use, so the choice reads as a menu the site has made before rather
   than a new kind of screen. The second line is the point of it: what the room
   is doing right now and how many people are waiting in it.
   --------------------------------------------------------------------------- */
.live-picks{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.live-pick{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  text-align:left;width:100%}
.live-pick-n{font-weight:800;font-size:19px}
.live-pick-s{font-weight:600;font-size:13px;color:var(--text-muted)}
/* THE ROOMS ARE COLOURED AS THEY ARE ELSEWHERE, so the card somebody presses
   is the colour of the screen it opens — the one cue that makes a two-option
   menu instant rather than read. */
.live-pick[data-live="geo"]{border-left:4px solid var(--m-live)}
.live-pick[data-live="nfl"]{border-left:4px solid var(--m-nfl)}
@media (min-width:760px){
  .live-picks{flex-direction:row}
  .live-pick{flex:1}
}