/* ---------- NFL Mode ----------
   The furniture the .gg-* kit does not already have, and nothing else.

   LOADED AFTER gauntlet.css, which is the cascade and is deliberate: the play
   screen IS a GeoGauntlet board — .gg-wrap, .gg-bar, .gg-hud, .gg-slot,
   .gg-input, .gg-board, all of it — and everything below either adds a screen
   that mode does not have (thirty-two crests, two level cards, three puzzle
   tiles) or overrides one rule of it. Forking the kit under an nm- prefix would
   drift the first time either was touched, and every Gauntlet on this site is
   meant to read as one game.

   NOTHING HERE HARD-CODES A COLOUR. Every value is a token out of theme.css, so
   light mode is free and a hex here would be a light-mode bug. */

/* THE PICKER IS WIDER THAN A BOARD. .gg-wrap is 640px, which is right for a
   column of answers and wrong for thirty-two crests — at 640 they come out four
   across and the screen becomes eight rows of scrolling. */
.nm-wrap{max-width:900px}

/* NO CLASS HERE MAY BE A PREFIX OF ANOTHER, and it is a test that says so
   rather than taste. tests/test_a11y.py finds every class the JS binds a click
   to and then checks what the markup builds it as, with `class="[^"]*\bNAME\b"`
   — and a hyphen is not a word character, so `\bnm-team\b` matches
   `class="nm-team-name"` too. A heading called nm-team-name therefore reported
   the tile grid as "rendered as button/h4" and failed the accessibility suite
   for a bug that did not exist. It happened twice here (nm-level-tag under
   nm-level was the first); the headings are nm-title and nm-diff-tag for that
   reason. */

/* ---- the thirty-two ----------------------------------------------------- */
/* auto-fill rather than a fixed count, so the same rule is 6 across on a
   desktop and 3 on a phone with no breakpoint of its own. 118px is the width at
   which "Buccaneers" fits on one line at this size. */
.nm-teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:8px;margin:4px 0 18px}
.nm-team{display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 8px;border-radius:12px;border:1px solid var(--border-strong);
  background:var(--panel);color:var(--text);cursor:pointer;min-height:96px;
  justify-content:center;font-family:inherit;
  transition:border-color .12s,background .12s,transform .12s}
.nm-team:hover{border-color:var(--accent);background:var(--panel-2)}
.nm-team:active{transform:translateY(2px)}
.nm-tn{font:900 12.5px/1.2 var(--display);text-align:center;
  overflow-wrap:anywhere}
/* object-fit so a crest with a different aspect ratio is letterboxed rather
   than stretched — the logos ship at several shapes. */
.nm-crest{width:44px;height:44px;object-fit:contain}
.nm-crest.big{width:56px;height:56px}

/* The team's name and crest at the top of the two screens under it, so it is
   always clear whose puzzles these are. */
.nm-head{display:flex;align-items:center;gap:14px;margin:2px 0 16px}
/* THE TEAM IS THE SUBJECT OF THESE TWO SCREENS, so it is set as a title rather
   than as a .gg-h. That class is the little uppercase mono label the Gauntlet
   screens use for "Today" and "The archive" — right for a section heading and
   wrong for the one thing the screen is about, which came out at 11px beside a
   56px crest. */
.nm-title{font:900 26px/1.05 var(--display);letter-spacing:-.015em;
  color:var(--text);margin:0}
.nm-diff-tag{font:700 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);margin-top:5px}
.nm-diff-tag.hard{color:var(--rust-text)}

/* ---- easy or hard ------------------------------------------------------- */
/* TWO CARDS, and they carry the cabinet lip every pressable thing on this site
   carries — 0 5px 0, shrinking to 0 2px 0 on :active with the button moving
   down to meet it. A blurred shadow here would read as a floating panel. */
.nm-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;margin:6px 0 20px}
.nm-level{display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  text-align:left;padding:20px 22px;border-radius:16px;border:0;cursor:pointer;
  /* --on-accent, NOT --snow. --snow is var(--ink) in dark mode — a dark value
     for a light surface — so a label written in it on a saturated card is dark
     on dark. --on-accent is white in both themes and is what every .mode-card
     on the home screen uses over exactly these backgrounds. */
  font-family:inherit;color:var(--on-accent);background:var(--m-unl);
  box-shadow:0 5px 0 var(--m-unl-sh);transition:transform .1s,box-shadow .1s}
.nm-level:hover{box-shadow:0 7px 0 var(--m-unl-sh)}
.nm-level:active{transform:translateY(3px);box-shadow:0 2px 0 var(--m-unl-sh)}
.nm-level.hard{background:var(--m-hilo);box-shadow:0 5px 0 var(--m-hilo-sh)}
.nm-level.hard:hover{box-shadow:0 7px 0 var(--m-hilo-sh)}
.nm-level.hard:active{box-shadow:0 2px 0 var(--m-hilo-sh)}
.nm-lv{font:900 22px/1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.nm-ld{font-size:13.5px;line-height:1.45;opacity:.88}

/* ---- the puzzles -------------------------------------------------------- */
.nm-puzzles{display:grid;gap:10px;margin:6px 0 18px}
.nm-puzzle{display:grid;gap:5px;text-align:left;padding:14px 16px;
  border-radius:12px;border:1px solid var(--border-strong);background:var(--panel);
  color:var(--text);cursor:pointer;font-family:inherit;
  transition:border-color .12s,background .12s}
.nm-puzzle:hover{border-color:var(--accent);background:var(--panel-2)}
.nm-pl{font:900 16px/1.2 var(--display)}
.nm-pb{font-size:13px;color:var(--text-muted);line-height:1.4}
/* The two counts, and the personal best where there is one. Mono and tabular so
   a column of them lines up down the three tiles. */
.nm-pm{display:flex;align-items:baseline;gap:14px;
  font:700 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-soft);font-variant-numeric:tabular-nums;margin-top:2px}
.nm-pbest{margin-left:auto;font:900 13px/1 var(--display);color:var(--gold);
  letter-spacing:0;text-transform:none}
.nm-prog{font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:12px}

/* ---- the board ---------------------------------------------------------- */
/* TEN SPOTS DO NOT FIT ON A PHONE IN ONE COLUMN, and this mode's puzzles ask
   for ten as often as five. Ten .gg-slots at 46px is 470px of answer list
   before the prompt or the input, which is the whole screen — so a ten-spot
   round pairs them up and the board still fits without scrolling, which is the
   site's rule. Five-spot puzzles keep the single column .gg-slots gives them,
   because at five there is nothing to fix. */
.gg-slots.nm-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px}
.gg-slots.nm-two .gg-slot{min-height:40px;padding:7px 10px;font-size:13.5px}
.gg-slots.nm-two .gg-slot .pts{font-size:11.5px}

/* ---- ten names beside the field, on a desktop ---------------------------
   A NAME IS WHAT THIS MODE IS PLAYED IN, and in two columns of the shared
   340px answer column there were 56 pixels of it. "Davante Adams" came out as
   "Davan…", "Jermichael Finley" as "Jermich…", and a filled board read as ten
   abbreviations of the answers rather than the answers. The phone already has
   the rule for this a few blocks down — a name wraps rather than clipping,
   because "Rob Gr…" is the answer with the answer taken out of it — and the
   reasoning does not stop at 700px. What the desktop has that the phone does
   not is somewhere to take the width FROM.

   THE FIELD IS WHERE, AND IT WAS THE OTHER HALF OF THE REPORT. It is the one
   thing on this screen sized by preference rather than by content, and at
   608x380 it was the largest picture on the site next to the narrowest answer
   list. 450 for the answers leaves it 568x355 — about seven per cent off each
   way, still the biggest thing on the screen, and no smaller a PLAY, because every
   figure on that field is drawn in units of the field itself (see fieldDraw:
   the runner is a fixed fraction of the space between the sidelines).

   AND THE ROUND TAKES 1080 RATHER THAN .gg-wrap.wide's 1010. Not a preference
   either: the globe that cap was set for is a disc, and a field at 16/10 needs
   1.6 times the width to stand as tall beside the same column of answers. The
   page column is 1240, so this is width the round already had and was not
   using.

   THE THREE THINGS THE ROW GIVES UP are a spacer, a label and a number the eye
   goes to second — the gap either side of the name, the width of the rank, and
   four pixels of row height that the row was not using anyway (its content is
   35.5px tall against a 40px floor). None of them is information competing
   with the name.

   Ten-spot rounds only, which is what .nm-two means. A five-spot round keeps
   the single column, where a name has 236px and none of this is needed. */
@media (min-width:981px){
  /* THE FIELD IS SIZED FIRST AND THE ANSWERS TAKE WHAT IS LEFT, which is the
     opposite of how the shared rule reads and the only way this stays right
     across the desktop range. A flat 460 was tried and it is wrong at the
     bottom of that range: at 1000px of window it leaves the field 440 wide,
     which at 16/10 is 275 tall against a 354-tall column of answers, and the
     submit button finishes seventy-seven pixels below the picture.

     `100% - 598px` is the field at 568 plus the 30px column gap, so the
     picture is the same 568x355 at every width and the answers absorb the
     slack — 450 of it on a 1440 window, 351 on a 981 one. 355 is what the
     answers come to, so the two columns end level by construction rather than
     by a number that happens to work at one size. The clamp is the floor and
     the ceiling on that: never narrower than the shared 340, never so wide
     that ten short names swim in it. */
  .gg-wrap.wide:has(.nm-two){max-width:1080px;
    grid-template-columns:minmax(0,1fr) clamp(340px, 100% - 598px, 460px)}
  .gg-slots.gg-board.nm-two .gg-slot{min-height:37px;gap:10px}
  .gg-slots.gg-board.nm-two .gg-slot .n{min-width:14px}
  /* THE LAST RESORT IS A SECOND LINE, NOT AN ELLIPSIS. The 123px this leaves
     holds every name on these boards but the longest few — "Marquez
     Valdes-Scantling" is 171 — and no width this layout can offer would hold
     those, so the choice is which way to fail. A wrapped row costs nine pixels
     and the column ends a few below the field's bottom edge; a clipped one
     costs the answer. The file's own rule, from the phone block below: a
     button a few pixels out of line is a blemish, a cropped answer is a bug.

     `anywhere` is the floor under a name with no space in it to break at. It
     never fires on a real one — the surname alone is 110px against 123 — but
     without it such a name would overflow the row rather than break. */
  .gg-slots.gg-board.nm-two .gg-slot .nm{white-space:normal;overflow:visible;
    text-overflow:clip;overflow-wrap:anywhere;line-height:1.2}
}

/* The reveal's second line on a row — "QB, 2019-2020, 18 att". Dimmed and
   smaller because the name is what is being read and this is what explains it;
   at full weight the table becomes two columns of equal noise. */
.nm-det{font:600 11px/1 var(--mono);color:var(--text-muted);white-space:nowrap}

/* WHY A GUESS DID NOT COUNT, when the answer is not "it was wrong". The
   ambiguous-surname reply spends nothing, so there is no slot and no strike to
   show it in — this line is the only thing that tells somebody their guess was
   heard and needs one more word. Empty by default and it takes no room. */
.nm-note{font-size:13px;color:var(--amber);line-height:1.4;min-height:0}
.nm-note:empty{display:none}
.nm-note.show{margin:6px 0 2px}

/* "I'm done" sits beside the guess counter rather than under the board: it is
   an exit, not an answer, and a full-width button under the input reads as the
   thing you press to submit. */
.nm-quit{margin-left:auto;font-size:11.5px;padding:8px 12px;opacity:.72}
.nm-quit:hover{opacity:1}

/* ---- the result card ---------------------------------------------------- */
.gg-finalnav .gg-go,.gg-finalnav .gg-stand{flex:0 0 auto}
.nm-share{margin-top:12px;text-align:center;display:grid;gap:10px;
  justify-items:center}
.nm-sq{font-size:22px;letter-spacing:2px}
.nm-signup{margin-top:14px;display:grid;gap:10px}
.nm-su-t{font:900 15px/1.35 var(--display)}
.nm-su-b{display:flex;gap:10px;flex-wrap:wrap}

/* ---- the phone ---------------------------------------------------------- */
@media (max-width:700px){
  /* Three across on a phone rather than the desktop's six. 92px is the floor
     rather than the width — a 375px screen has about 340 of usable column, so
     the tiles land at 105 and the nickname under the crest still fits on one
     line. Dropping the floor further to force a fourth column would put
     "Buccaneers" on two. */
  .nm-teams{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
  .nm-team{min-height:84px;padding:10px 6px}
  .nm-crest{width:36px;height:36px}
  .nm-tn{font-size:11.5px}
  .nm-title{font-size:21px}
  .nm-level{padding:16px 18px}
  .nm-lv{font-size:19px}
  /* A NAME WRAPS RATHER THAN CLIPPING once a slot is half a phone wide. The
     shared .gg-slot .nm ellipses on purpose — it holds one country on one line
     — and at 161px "Rob Gronkowski" came out as "Rob Gr…", which is the answer
     with the answer taken out of it. The same scoping .gg-slot.gg-variant .nm
     uses, and for the same reason: wrapping is right here and wrong on the
     shared class. Two lines cost nothing in height, because the row is already
     at the site's 46px touch floor. */
  .gg-slots.nm-two .gg-slot{align-items:center;min-height:46px;padding:8px 10px}
  .gg-slots.nm-two .gg-slot .nm{white-space:normal;overflow:visible;
    text-overflow:clip;overflow-wrap:anywhere;line-height:1.15;font-size:12.5px}
  .gg-slots.nm-two .gg-slot .n{min-width:11px;font-size:11px}
  .gg-slots.nm-two .gg-slot .pts{font-size:11px}
}

/* ---- the three groups, and a team's quarterbacks ------------------------- */
/* NO CLASS HERE MAY BE A PREFIX OF ANOTHER — the rule this file opens with.
   nm-group / nm-gl / nm-gb / nm-gn, and nm-qbrow / nm-qn / nm-qm. */
/* THREE ACROSS, and tall enough to be worth the screen. `auto-fit` with a
   210px floor gave two-and-a-bit on a laptop and left the third card orphaned
   on its own row; there are three of these (four with the team) and they are
   the whole screen, so the count is fixed rather than fitted and they drop to
   one column on a phone. */
.nm-groups{display:grid;gap:12px;margin-top:16px;
  grid-template-columns:repeat(3,1fr)}
/* SIZED BY WHAT IS IN IT. The 172px floor was there to hold a heading, a
   sentence of blurb and a count; the blurb is gone (see GROUPS in
   services/nflmode.py) and the floor was left holding eighty points of empty
   card under three words. A heading and a count is what these are now, so the
   padding sets the height and nothing else does. */
.nm-group{display:flex;flex-direction:column;gap:8px;text-align:left;
  padding:16px 20px;border-radius:var(--radius);cursor:pointer;
  color:var(--text);background:var(--sheet);border:1px solid var(--border)}
/* The count sits on the floor of the card, so a heading that wraps to two
   lines on a narrow column still leaves all three counts on one line. */
.nm-group .nm-gn{margin-top:auto}
.nm-group:hover{background:var(--sheet-2);border-color:var(--gold)}
.nm-gl{font:900 23px/1.1 var(--display);letter-spacing:-.02em}
.nm-gb{font-size:13px;color:var(--text-soft);line-height:1.45}
.nm-gn{font:700 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold)}

/* ===========================================================================
   THE TWO DOORS AT /nfl-mode — square, and NOT a matched pair.

   These were full-width rows borrowed from the Gauntlet menu. They are the
   group cards' shape now (see .nm-group above — same sheet, same border, same
   radius, same gold mono caption) squared off and grown, because two doors on
   an otherwise empty screen should look like somewhere to go rather than a
   list.

   THE LIVE ONE IS NOT STYLED LIKE THE OTHER ONE, and that is the whole idea
   rather than emphasis for its own sake: one of these is on a clock and will
   have started without you, and the other will still be there tomorrow. The
   gold wash marks the one that expires, and it carries the countdown, so a
   player landing here knows a game is forty seconds away without opening it.
   =========================================================================== */
.nm-choose{display:grid;gap:14px;margin-top:16px;
  grid-template-columns:repeat(2,1fr)}
/* One door — the live room is shut to this visitor — should not sit in half a
   screen with a hole beside it. */
.nm-choose.one{grid-template-columns:1fr}
/* SQUARE, WITH A CEILING. aspect-ratio alone makes a billboard out of a wide
   column; 290px is about the height of the crest grid's first row, which is
   what these sit above. */
/* THREE BANDS: what it is at the ceiling, the thing itself in the middle, its
   name on the floor. Both cards are built the same way, which is why they
   balance — not because they happen to hold the same amount of text. */
.nm-choice{display:flex;flex-direction:column;justify-content:space-between;
  gap:14px;text-align:left;
  aspect-ratio:1/1;max-height:290px;padding:24px;
  border-radius:var(--radius);cursor:pointer;color:var(--text);
  background:var(--sheet);border:1px solid var(--border)}
/* THE ONE STATE WITH NOTHING TO PUT IN THE MIDDLE. Off the schedule with no
   lobby there is no countdown, and a three-band card with an empty middle band
   is the hole this layout exists to close. So that state drops to two bands and
   sets them on the floor. Toggled by nmChoosePaint, which means a lobby opening
   while somebody is on this screen fills the middle back in without the card
   being rebuilt under their cursor. */
.nm-choice.nm-noclock{justify-content:flex-end;gap:9px}
.nm-choice.nm-noclock .nm-cmid{display:none}
.nm-choice:hover{background:var(--sheet-2);border-color:var(--gold)}
/* THE WASH IS BUILT FROM --gold-rgb rather than being a colour of its own, so
   it follows the accent into both themes — a lime at 10% on the dark page, a
   deep olive at 10% on the light one — instead of being a light-mode value
   that goes muddy at night. */
.nm-choice.nm-live{background:rgba(var(--gold-rgb),.10);
  border-color:rgba(var(--gold-rgb),.55)}
.nm-choice.nm-live:hover{background:rgba(var(--gold-rgb),.16);
  border-color:var(--gold)}
/* NEITHER AN AUTO MARGIN NOR position:absolute, both of which this has been.
   The absolute one collided with the clock the moment the card was short (a
   phone); the auto margin fixed that and opened a dead space in the middle of
   the square instead, which is what space-between on the card now closes by
   giving the middle something to hold. */
.nm-ccap{font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold)}
.nm-cmid{display:flex;flex-direction:column;gap:4px;min-width:0}
.nm-cfoot{display:flex;flex-direction:column;gap:7px;min-width:0}
.nm-cn{font:900 clamp(24px,3vw,34px)/1.03 var(--display);letter-spacing:-.03em}
.nm-csub{font-size:13.5px;color:var(--text-soft);line-height:1.45}
/* THE COUNTDOWN IS THE THING YOU SEE FIRST, at the size the lobby screen shows
   it rather than as a caption. tabular-nums so the digits do not jog the label
   sideways every second. */
.nm-cbiglab{font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)}
.nm-cbig{font:900 clamp(34px,4.4vw,46px)/1 var(--display);letter-spacing:-.035em;
  color:var(--gold);font-variant-numeric:tabular-nums}
/* SIX CRESTS, THREE ACROSS, SET AS A GRID rather than left to wrap: six in a
   flex row do not fit the card's inner width and broke 4 + 2, which reads as an
   accident. A stated 3x2 block reads as a decision. */
.nm-crests{display:grid;grid-template-columns:repeat(3,42px);gap:10px;
  justify-content:start;align-items:center}
.nm-crests img{width:42px;height:42px;object-fit:contain}

.nm-qbs{display:grid;gap:8px;margin-top:8px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.nm-qbrow{display:flex;flex-direction:column;gap:2px;text-align:left;
  padding:12px 14px;border-radius:var(--radius);cursor:pointer;color:var(--text);
  background:var(--sheet);border:1px solid var(--border)}
.nm-qbrow:hover{background:var(--sheet-2);border-color:var(--gold)}
.nm-qn{font:900 16px/1.15 var(--display);letter-spacing:-.01em}
.nm-qm{font-size:12.5px;color:var(--text-soft)}
.nm-qm b{color:var(--gold)}

/* ---- the phone ----------------------------------------------------------- */
@media(max-width:700px){
  .nm-groups{grid-template-columns:1fr}
  /* A 1:1 TILE ON A PHONE IS A SCREEN AND A HALF TALL, and there are two of
     them — so the square goes away here exactly as .nm-group's column does,
     and they become short blocks with the caption back in the flow. */
  .nm-choose{grid-template-columns:1fr;gap:10px}
  /* Sized by what is in it, the floor .nm-group's own comment argues for: a
     square is a screen and a half here, and a min-height would be padding
     under four lines that already fill the box. With no spare height there is
     nothing for space-between to distribute, so the three bands simply stack. */
  .nm-choice{aspect-ratio:auto;max-height:none;padding:17px;gap:9px}
  .nm-cn{font-size:26px}
  .nm-csub{font-size:13px}
  .nm-cbig{font-size:36px}
  /* Wide and short here, so the six go back to a single row. */
  .nm-crests{display:flex;gap:9px}
  .nm-crests img{width:31px;height:31px}
  /* One per row on a phone, so they are wide and want to be short: the heading
     and the count go side by side rather than stacked, which is a 52px row
     instead of a 78px block and puts all four on screen at once. */
  .nm-group{flex-direction:row;align-items:baseline;gap:10px;padding:14px 16px}
  .nm-group .nm-gn{margin-top:0;margin-left:auto}
  .nm-qbs{grid-template-columns:1fr}
  /* THE NAME BOX HAS TO BE HITTABLE WITH A THUMB. .gg-input is 16px text with
     14px of padding, which comes out around 45px — under the 48px this site
     uses everywhere else a finger is the input device, and it is the one
     control on the screen that every round goes through. The font size stays
     at 16px exactly: anything smaller and Safari zooms the page on focus and
     never zooms back. */
  .nm-wrap .gg-input, #nmScreen .gg-input{min-height:52px;font-size:16px}
  #nmScreen .gg-go, #nmScreen .gg-stand{min-height:48px;padding:12px 18px}
  /* And the suggestion rows under it — a 1,200-name list is no use if the
     right row is a 28px target between two others. */
  #nmScreen .gg-sugg > div{min-height:46px;display:flex;align-items:center}
}

/* ---- room at the foot of the panel --------------------------------------- */
/* .gg-wrap is `padding:0 16px` — no bottom — so the last card on a screen sat
   flush against the bottom edge of .wrap and read as cut off rather than as
   finished. Scoped to these two screens rather than added to .gg-wrap itself:
   that class is the frame for every Gauntlet on the site, and giving all of
   them a new footer to fix one screen is a change to screens nobody looked at.
   The QB board sets its own, larger, because a fixed answer bar sits over it. */
#nmScreen > .gg-wrap, #qbScreen > .gg-wrap:not(.qb-wrap){padding-bottom:34px}
@media(max-width:700px){
  #nmScreen > .gg-wrap, #qbScreen > .gg-wrap:not(.qb-wrap){padding-bottom:26px}
}

/* ---- what to play next -------------------------------------------------
   Three suggestions under the four buttons on a finished board. See nmNext in
   web/src/nflmode.js for where they come from and `related` in
   app/services/nflmode.py for how they are chosen.

   IT BORROWS .nm-puzzle'S FRAME ON PURPOSE. A suggestion should look exactly
   like the button that starts the round it is suggesting — same border, same
   panel, same hover — because it IS that button, reached from a different
   screen. What it adds is a reason: the chip saying which of the four sources
   produced it, and the line saying so in words.

   THE CHIP IS NOT DECORATION AND IS THE ONE THING HERE THAT IS LOAD-BEARING.
   "Players who finished this also played" is a claim about other people and it
   is only true of the co-played one; the other three are built from the
   catalogue. The colour and the word are what keep those apart, so a row may
   never be drawn without one. */
.nm-next{margin-top:20px;border-top:1px solid var(--border);padding-top:16px;
  display:grid;gap:8px}
.nm-nexthead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.nm-nexthead b{font:700 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted)}
.nm-nexthead span{font-size:13px;color:var(--text-soft)}
/* Same three columns as .nm-puzzle plus the crest and the chevron. `text-align`
   is set because this is a <button> and inherits `center` otherwise. */
.nm-rec{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;
  align-items:center;text-align:left;padding:12px 14px;border-radius:12px;
  border:1px solid var(--border-strong);background:var(--panel);
  color:var(--text);cursor:pointer;font-family:inherit;
  transition:border-color .12s,background .12s}
.nm-rec:hover{border-color:var(--accent);background:var(--panel-2)}
.nm-recbody{display:flex;flex-direction:column;gap:4px;min-width:0}
.nm-rectop{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.nm-rectitle{font:900 15px/1.2 var(--display)}
/* The direction — Most or Least — in the accent, because it is half the
   question and two boards on this card differ by nothing else. */
.nm-rectitle u{text-decoration:none;color:var(--gold)}
.nm-recteam{font:700 9.5px/1 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-muted)}
.nm-recwhy{font-size:12.5px;line-height:1.42;color:var(--text-muted)}
.nm-recmeta{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;
  font:700 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);font-variant-numeric:tabular-nums}
/* Their own first score on that board, where there is one — the same number the
   picker tiles show, so a suggestion cannot disagree with the tile it links to. */
.nm-recbest{margin-left:auto;font:900 13px/1 var(--display);color:var(--gold);
  letter-spacing:0;text-transform:none}
.nm-recgo{font:900 22px/1 var(--display);color:var(--text-muted)}
/* ONE COLOUR PER SOURCE, all four out of the palette rather than invented:
   the crowd takes the accent, and the three built ones take the three hues
   theme.css already carries for "different but not wrong".

   ONE GROUND UNDER ALL FOUR, and it is --sheet-2 rather than a tint of each
   colour. A tint would need an alpha over a hex, which CSS cannot do without a
   --*-rgb token, and only the gold has one — so three of the four would have
   been literals, which is the light-mode bug this file's header forbids. The
   neutral chip is also the better read: four pale washes side by side compete,
   where one ground with four ink colours reads as one control with four
   states. --sheet-2 inverts with the theme, so both get it right. */
.nm-recchip{font:700 8.5px/1.5 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;
  white-space:nowrap;background:var(--sheet-2)}
.nm-recchip.popular{color:var(--gold)}
.nm-recchip.sibling{color:var(--mint)}
.nm-recchip.flip{color:var(--amber)}
.nm-recchip.rival{color:var(--rust-text)}
/* THE QUARTERBACK, and he takes the mode's own green rather than a fifth hue.
   The row under him is a different GAME — QB Mode, not a stat board — and the
   two chips he can carry ("Same team" from a board, "The next QB" from another
   quarterback) are the same slot saying the same thing two ways, so they share
   one colour. `qb_next` is an underscore because it is a source key off the
   wire, not a hand-written class. */
.nm-recchip.qb,
.nm-recchip.qb_next{color:var(--mint)}
/* HIS ROW IS A PORTRAIT, NOT A BOARD. The crest still identifies the team, but
   the title is a man's name and sits a size up from a category label — the one
   place this card carries a proper noun. */
.nm-rec.qb .nm-rectitle{font-size:16px}

/* A PHONE DROPS THE CHEVRON AND SHRINKS THE CREST. The whole row is the
   button, so the arrow is decoration the moment width is short — and 38px of
   crest beside a name that has to wrap is the wrong thing to spend it on. */
@media (max-width:520px){
  /* align-items:start, and it is the same reasoning gauntlet.css writes down
     for .gg-slot: the crest should sit level with the TITLE, not with the
     middle of the block. On a phone the chip wraps under the name and the
     sentence runs to three lines, so a vertically centred crest ends up
     floating beside the middle of a paragraph with nothing next to the words
     it belongs to. */
  .nm-rec{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:11px 12px;
    align-items:start}
  .nm-rec .nm-crest{width:32px;height:32px}
  .nm-recgo{display:none}
}

/* ===========================================================================
   THE SEASON CHALLENGE — pick the winner of every game, one week at a time
   See the section of the same name in nflmode.js.

   NO CLASS HERE IS A PREFIX OF ANOTHER — the rule this file opens with. The
   three the JS binds a click to are nm-season, nm-year and nm-pick; nothing
   else begins with any of them followed by a hyphen. The game screen's own
   furniture is nm-sc* with no hyphen after the prefix.

   NOTHING HERE HARD-CODES A COLOUR EITHER. The three verdict tints are
   color-mix() over the palette's mint, rust and amber, which is how a wash is
   made from a token that has no --*-rgb twin — the alternative was three rgba
   literals, which is the light-mode bug the header forbids.
   =========================================================================== */
/* ---- the box on the team screen ------------------------------------------
   Under the three groups and the full width, in the accent's wash: it is the
   one card on that screen that is not a board, and the wash is what the live
   door uses for "this one is different", so it reads the same way here. */
.nm-season{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;
  width:100%;text-align:left;margin-top:12px;padding:16px 20px;
  border-radius:var(--radius);cursor:pointer;color:var(--text);
  font-family:inherit;background:rgba(var(--gold-rgb),.08);
  border:1px solid rgba(var(--gold-rgb),.45)}
.nm-season:hover{background:rgba(var(--gold-rgb),.14);border-color:var(--gold)}
.nm-season .nm-gb{flex:1 1 240px}
.nm-season .nm-gn{margin-left:auto}

/* ---- the year picker ----------------------------------------------------- */
.nm-years{display:grid;gap:12px;margin-top:4px;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.nm-year{display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  text-align:left;padding:18px 20px;border-radius:var(--radius);cursor:pointer;
  color:var(--text);background:var(--sheet);border:1px solid var(--border);
  font-family:inherit}
.nm-year:hover{background:var(--sheet-2);border-color:var(--gold)}
.nm-yn{font:900 36px/1 var(--display);letter-spacing:-.03em;color:var(--gold);
  font-variant-numeric:tabular-nums}
.nm-ym{font:700 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted)}

/* ---- the game ------------------------------------------------------------ */
/* Wider than a board's 640 and narrower than the picker's 900: two club
   buttons side by side want room, and the line above them is a headline. */
.nm-scwrap{max-width:720px}
.nm-schud{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:2px 0 8px}
.nm-screc{display:flex;align-items:baseline;gap:10px}
.nm-scn{font:900 30px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.nm-sccap{font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)}
.nm-scgame{margin-left:auto;font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-soft);font-variant-numeric:tabular-nums}
/* One tick a game along the top: what is done, what is next, what is left.
   Coloured by the verdict as each is answered, so the season's shape is
   visible at a glance by game nine. */
.nm-scdots{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:22px}
.nm-scdots span{flex:1 1 8px;max-width:22px;height:6px;border-radius:3px;
  background:var(--sheet-3)}
.nm-scdots span.now{background:var(--gold)}
.nm-scdots span.ok{background:var(--mint)}
.nm-scdots span.bad{background:var(--rust)}
.nm-scdots span.push{background:var(--amber)}
.nm-scweek{font:700 11px/1.5 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);text-align:center}
/* THE FIXTURE IS THE QUESTION, and it is set like one — the same face and
   about the same size as .gg-prompt, which is what every other round on this
   site asks with. */
.nm-scmatch{font:900 clamp(26px,5.5vw,36px)/1.1 var(--display);
  letter-spacing:-.02em;text-align:center;margin:8px 0 4px;color:var(--text)}
.nm-scask{text-align:center;font-size:15px;color:var(--text-soft);margin-bottom:16px}
/* The stage takes the verdict's tint, which is Higher or Lower's own cue — the
   card behind the number goes green or rust — so the two modes say "right"
   the same way. */
.nm-scstage{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;
  align-items:stretch;padding:16px;border-radius:16px;background:var(--sheet);
  transition:background .15s}
.nm-scstage.ok{background:color-mix(in srgb,var(--mint) 16%,transparent)}
.nm-scstage.bad{background:color-mix(in srgb,var(--rust) 18%,transparent)}
.nm-scstage.push{background:color-mix(in srgb,var(--amber) 16%,transparent)}
.nm-scvs{display:flex;align-items:center;justify-content:center;padding:0 2px;
  font:700 10px/1 var(--mono);letter-spacing:.14em;color:var(--text-muted);
  text-transform:uppercase}
/* THE TWO CLUBS, and they are the whole interaction, so they are sized like
   Higher or Lower's two words: the mode's own green with the cabinet lip every
   pressable thing on this site carries, the crest and the nickname in white.
   Both the same colour on purpose — the crest tells them apart, and a pair
   coloured by club would need colours the payload does not carry. */
.nm-pick{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;min-height:150px;padding:20px 14px;border-radius:14px;border:0;
  cursor:pointer;font-family:inherit;color:var(--on-accent);
  background:var(--m-nfl);box-shadow:0 5px 0 var(--m-nfl-sh);
  transition:transform .1s,box-shadow .1s,opacity .15s}
/* `background` AND `transform` RESTATED ON HOVER, and neither is redundant:
   base.css still carries a generic `button:hover{background:#2c3c68;
   transform:translateY(-1px)}` that outranks a bare class, so without this
   the pressed club went navy under the cursor and floated a pixel off its
   lip — the same note .theme-btn carries in theme.css. Disabled or not, the
   green stays the green. */
.nm-pick:hover{background:var(--m-nfl);transform:none}
.nm-pick:hover:not(:disabled){box-shadow:0 7px 0 var(--m-nfl-sh)}
.nm-pick:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--m-nfl-sh)}
.nm-pick:disabled{cursor:default;opacity:.55}
/* The one that was pressed keeps its full strength and a gold ring through the
   hold, so the verdict line reads against a visible choice. */
.nm-pick.chosen{opacity:1;outline:3px solid var(--gold);outline-offset:2px}
.nm-pick .nm-crest{width:52px;height:52px}
.nm-pickn{font:900 20px/1.1 var(--display);letter-spacing:-.01em;text-align:center;
  overflow-wrap:anywhere}
.nm-pickw{font:700 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  opacity:.8}
/* The verdict — the score, in the colour of how it went. Space is held for it
   so the buttons do not jump when it lands. */
.nm-scverdict{min-height:24px;text-align:center;margin-top:16px;
  font:900 16px/1.35 var(--display)}
.nm-scverdict.ok{color:var(--mint)}
.nm-scverdict.bad{color:var(--rust-text)}
.nm-scverdict.push{color:var(--amber)}

/* ---- the end of the season ----------------------------------------------- */
.nm-scword{text-align:center;font:900 clamp(20px,4vw,26px)/1.2 var(--display);
  color:var(--gold);margin:-6px 0 18px;letter-spacing:-.01em}
/* The recap borrows the answer table. Its first column holds "Conf" and "Div"
   as well as a week number, so it gets 40px rather than the table's 26. */
.nm-screcap{margin-top:20px}
.nm-screcap .gg-brow{grid-template-columns:40px minmax(0,1fr) auto auto}
.nm-screcap .gg-brow.ok .pts{color:var(--mint)}
.nm-screcap .gg-brow.bad .pts{color:var(--rust-text)}
.nm-screcap .gg-brow.push .pts{color:var(--amber)}
.nm-screcap .gg-brow .val{white-space:nowrap}

/* ---- the phone ----------------------------------------------------------- */
@media(max-width:700px){
  .nm-season{padding:14px 16px}
  .nm-years{grid-template-columns:repeat(2,1fr)}
  .nm-yn{font-size:30px}
  .nm-scmatch{font-size:26px}
  .nm-scstage{gap:10px;padding:12px}
  .nm-pick{min-height:132px;padding:16px 10px;gap:7px}
  .nm-pick .nm-crest{width:44px;height:44px}
  .nm-pickn{font-size:17px}
  .nm-scverdict{font-size:15px}
}

/* ---- the run is a game now: what it paid, the year tile's record --------- */
/* A player's ranked record on a year tile, in the gold the puzzle tiles use for
   a best score. Not `nm-ybest-…` anything: nm-year is a click-bound class and
   nothing may begin with it and a hyphen. */
.nm-ybest{font:900 15px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums;margin-top:2px}
/* What the season paid, under the verdict line. The amount leads; the
   arithmetic behind it is the ledger's `detail`, kept small because it is an
   audit trail rather than the headline. */
.nm-scxp{text-align:center;margin:-8px 0 16px;font-size:13px;color:var(--text-soft)}
.nm-scxp b{font:900 15px/1 var(--display);color:var(--gold)}
/* A season's share is one square a game — up to twenty-one — so the row wraps
   rather than running off a phone. */
.nm-sqrun{letter-spacing:1px;overflow-wrap:anywhere;line-height:1.5}