/* ---------- NBA 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 crests, three category cards, two boards
   under each, thirty seasons to call) or overrides one rule of it. Forking the
   kit under an nb- 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 crests — at 640 they come out four
   across and the screen becomes eight rows of scrolling. */
.nb-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 `\bnb-team\b` would match
   `class="nb-team-name"` too. A heading called nb-team-name would therefore
   report the crest grid as "rendered as button/h4" and fail the accessibility
   suite for a bug that does not exist. NFL Mode learned that twice; the eight
   pressed classes here are nb-team, nb-group, nb-puzzle, nb-rec, nb-season,
   nb-year, nb-chip and nb-pick, and nothing below begins with one of them
   followed by a hyphen. That is why the headings are nb-title and nb-diff-tag,
   and why the season screen's own furniture is the nb-sc family with no hyphen
   after the prefix. */

/* ---- the thirty --------------------------------------------------------- */
/* 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
   that holds "Timberwolves" on one line at this size — the longest of the
   thirty with nowhere to break. "Trail Blazers" is a character longer and
   takes two lines, which is what the space in it is for. */
.nb-teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:8px;margin:4px 0 18px}
.nb-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}
.nb-team:hover{border-color:var(--accent);background:var(--panel-2)}
.nb-team:active{transform:translateY(2px)}
.nb-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. */
.nb-crest{width:44px;height:44px;object-fit:contain}
.nb-crest.big{width:56px;height:56px}

/* The club's name and crest at the top of every screen under the grid, so it is
   always clear whose boards these are. */
.nb-head{display:flex;align-items:center;gap:14px;margin:2px 0 16px}
/* THE CLUB IS THE SUBJECT OF THESE SCREENS, so the line above 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 comes out at
   11px beside a 56px crest. */
.nb-title{font:900 26px/1.05 var(--display);letter-spacing:-.015em;
  color:var(--text);margin:0}
/* The club's name, under the category the screen is showing — "Points" over
   "Boston Celtics". Named for the difficulty tag it started life as in NFL
   Mode; there is no easy/hard screen here, so this only ever carries a club. */
.nb-diff-tag{font:700 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);margin-top:5px}

/* ---- the boards --------------------------------------------------------- */
/* Two of these under each category — the most of it and the fewest of it — so
   the grid is a short list rather than a wall. */
.nb-puzzles{display:grid;gap:10px;margin:6px 0 18px}
.nb-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}
.nb-puzzle:hover{border-color:var(--accent);background:var(--panel-2)}
.nb-pl{font:900 16px/1.2 var(--display)}
/* The two counts, and the personal best where there is one. Mono and tabular so
   a column of them lines up down the tiles. */
.nb-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}
.nb-pbest{margin-left:auto;font:900 13px/1 var(--display);color:var(--gold);
  letter-spacing:0;text-transform:none}

/* ---- the board ---------------------------------------------------------- */
/* TEN SPOTS DO NOT FIT ON A PHONE IN ONE COLUMN, and every board in this mode
   asks for ten. Ten .gg-slots at 46px is 460px of answer list before the prompt
   or the input, which is the whole screen — so the round pairs them up and it
   still fits without scrolling, which is the site's rule.

   THIS IS THE EVERY-ROUND CASE, NOT THE EXCEPTION. All six boards a club
   carries — the most and the fewest of points, rebounds and assists — are ten
   deep, so nb-two is on the board every time the mode is played. The class is
   still switched on `spots > 6` rather than always written, because the spot
   count travels on the payload and comes off the puzzle row: a board of five
   would be wrong in two columns, and the day one is added the layout must
   follow the data rather than the other way round. */
.gg-slots.nb-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px}
.gg-slots.nb-two .gg-slot{min-height:40px;padding:7px 10px;font-size:13.5px}
.gg-slots.nb-two .gg-slot .pts{font-size:11.5px}
/* AND THE SCOREBOARD'S OWN RULES HAVE TO GIVE WAY TO IT. .gg-slots.gg-board
   collapses the gap between rows to nothing and hangs a single hairline off the
   top of the list; both are single-column ideas, and under a two-column grid
   they draw one stray rule across the top and let the two columns run into each
   other. Stated here rather than left to the shared kit because it is this
   mode's board that needs it on every round — each row keeps its own gap and
   its own hairline, so two columns of five still read as one board rather than
   as ten loose rows. */
.gg-slots.gg-board.nb-two{border-top:0;gap:8px 18px}
.gg-slots.gg-board.nb-two .gg-slot{border-bottom:1px solid var(--hair);
  padding:9px 4px}
.gg-slots.gg-board.nb-two .gg-slot.got{padding-left:12px}

/* ---- ten names on a desktop ---------------------------------------------
   A NAME IS WHAT THIS MODE IS PLAYED IN, and the width a name gets is the whole
   question this block answers. NFL Mode's round is two columns — a drawn field
   on the left, the answers on the right — and its ten names had to live in
   about 123 pixels each, which turned "Marquez Valdes-Scantling" into an
   abbreviation of itself and needed a paragraph of measurement to claw the
   column back to 460.

   THERE IS NO FIELD HERE, AND THE ANSWERS TAKE THE WHOLE ROUND. field.js draws
   a gridiron and knows rushes, passes and receptions; behind a board about
   rebounds it would be a picture of the wrong sport, so the round is drawn as
   a plain .gg-wrap with nothing standing beside the answers (see nbamode.js).
   That is the deliberate divergence and it is worth stating rather than
   inferring: the column NFL Mode spent a paragraph dividing is not divided
   here, it is all the board's: measured, the two columns come out at 294
   pixels each and the name inside one of them gets 210 — more than "Shai
   Gilgeous-Alexander" needs, and nearly twice what the football board could
   offer.

   SO THIS BLOCK IS THE ROW, NOT THE LAYOUT. Five rows still have to fit
   between the bar and the fold on a laptop, which is what the tighter row
   height and the narrower rank column buy; and the wrapping rule below is a
   floor that should almost never fire rather than the everyday case it is in
   NFL Mode. */
@media (min-width:981px){
  .gg-slots.gg-board.nb-two .gg-slot{min-height:37px;gap:10px}
  .gg-slots.gg-board.nb-two .gg-slot .n{min-width:14px}
  /* THE LAST RESORT IS A SECOND LINE, NOT AN ELLIPSIS. Every name on these six
     boards fits the width this layout gives it, so this is insurance rather
     than a rule that runs — but the choice it settles is which way to fail, and
     the file's own rule from the phone block below is that a button a few
     pixels out of line is a blemish while a cropped answer is a bug.

     `anywhere` is the floor under a name with no space in it to break at. The
     longest single words in the answer key are "Andriuskevicius" at fifteen
     letters and "Mamukelashvili" at fourteen, and a surname has nowhere else
     to break — neither comes near this width, but without it one that did
     would overflow the row rather than wrap inside it. */
  .gg-slots.gg-board.nb-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 — "2018-26, 495 games". 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. There is no position in
   it: basketball positions are not on file, which is why the NBA answer key
   leaves that column empty. */
.nb-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-name 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. It carries real traffic in this mode: two men
   called Chris Johnson played for Boston and two called Mike James for New
   Orleans, so a bare surname and a bare full name can both be a question rather
   than an answer. Empty by default and it takes no room. */
.nb-note{font-size:13px;color:var(--amber);line-height:1.4;min-height:0}
.nb-note:empty{display:none}
.nb-note.show{margin:6px 0 2px}
/* AND IT TRAVELS WITH THE INPUT once the round is one column. gauntlet.css
   reorders the answering column below 981px so the box you type in comes before
   the answers you have already given, and it names each child it moves by
   class — so a note class it has never heard of falls to the default order and
   lands under the board, half a screen from the guess it is about. The order
   number is the shared kit's own: form, note, submit row. */
@media (max-width:980px){
  .gg-answer > .nb-note{order:2}
}

/* "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. */
.nb-quit{margin-left:auto;font-size:11.5px;padding:8px 12px;opacity:.72}
.nb-quit:hover{opacity:1}

/* ---- the result card ---------------------------------------------------- */
/* The four buttons under a finished board size to their labels rather than
   stretching. Written here rather than borrowed from another mode's stylesheet:
   this card is drawn by nbamode.js and must not depend on which other modes the
   page happens to have loaded. */
.gg-finalnav .gg-go,.gg-finalnav .gg-stand{flex:0 0 auto}
.nb-share{margin-top:12px;text-align:center;display:grid;gap:10px;
  justify-items:center}
.nb-sq{font-size:22px;letter-spacing:2px}
.nb-signup{margin-top:14px;display:grid;gap:10px}
.nb-su-t{font:900 15px/1.35 var(--display)}
.nb-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
     "Timberwolves" on two. */
  .nb-teams{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
  .nb-team{min-height:84px;padding:10px 6px}
  .nb-crest{width:36px;height:36px}
  .nb-tn{font-size:11.5px}
  .nb-title{font-size:21px}
  /* 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 in the 154px a slot gets here, "Giannis Antetokounmpo" comes out as
     "Giannis A…", 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.nb-two .gg-slot{align-items:center;min-height:46px;padding:8px 10px}
  .gg-slots.nb-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.nb-two .gg-slot .n{min-width:11px;font-size:11px}
  .gg-slots.nb-two .gg-slot .pts{font-size:11px}
}

/* ---- the three categories ------------------------------------------------ */
/* NO CLASS HERE MAY BE A PREFIX OF ANOTHER — the rule this file opens with.
   nb-group / nb-gl / nb-gb / nb-gn. */
/* THREE ACROSS, and tall enough to be worth the screen. There are exactly three
   of these — points, rebounds and assists, one card each — and with the season
   box under them they are the whole screen, so the count is fixed rather than
   fitted: `auto-fit` with a 210px floor gives two-and-a-bit on a laptop and
   orphans the third on its own row. They drop to one column on a phone. */
.nb-groups{display:grid;gap:12px;margin-top:16px;
  grid-template-columns:repeat(3,1fr)}
/* SIZED BY WHAT IS IN IT. A heading and a count is all these carry — the
   category name says what the boards are and a sentence under it would be the
   same words again (see GROUPS in services/nbamode.py, which holds a label and
   nothing else) — so the padding sets the height and nothing else does. */
.nb-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. */
.nb-group .nb-gn{margin-top:auto}
.nb-group:hover{background:var(--sheet-2);border-color:var(--gold)}
.nb-gl{font:900 23px/1.1 var(--display);letter-spacing:-.02em}
.nb-gb{font-size:13px;color:var(--text-soft);line-height:1.45}
.nb-gn{font:700 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold)}

/* ---- the phone ----------------------------------------------------------- */
@media(max-width:700px){
  .nb-groups{grid-template-columns:1fr}
  /* 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 three on screen at once. */
  .nb-group{flex-direction:row;align-items:baseline;gap:10px;padding:14px 16px}
  .nb-group .nb-gn{margin-top:0;margin-left:auto}
  /* 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. */
  .nb-wrap .gg-input, #nbScreen .gg-input{min-height:52px;font-size:16px}
  #nbScreen .gg-go, #nbScreen .gg-stand{min-height:48px;padding:12px 18px}
  /* And the suggestion rows under it — a list drawn from a pool that runs from
     two hundred names to three hundred and thirty is no use if the right row
     is a 28px target between two others. */
  #nbScreen .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 sits
   flush against the bottom edge of .wrap and reads as cut off rather than as
   finished. Scoped to this mode's screen 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. */
#nbScreen > .gg-wrap{padding-bottom:34px}
@media(max-width:700px){
  #nbScreen > .gg-wrap{padding-bottom:26px}
}

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

   IT BORROWS .nb-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.

   ALL THREE SLOTS ARE BOARDS. NFL Mode keeps one of its four for a
   quarterback, who is a different game rather than another stat board; this
   mode has no such second game, so RELATED_SLOTS is three team boards and
   there is no portrait row to style.

   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. */
.nb-next{margin-top:20px;border-top:1px solid var(--border);padding-top:16px;
  display:grid;gap:8px}
.nb-nexthead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.nb-nexthead b{font:700 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted)}
.nb-nexthead span{font-size:13px;color:var(--text-soft)}
/* Same three columns as .nb-puzzle plus the crest and the chevron. `text-align`
   is set because this is a <button> and inherits `center` otherwise. */
.nb-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}
.nb-rec:hover{border-color:var(--accent);background:var(--panel-2)}
.nb-recbody{display:flex;flex-direction:column;gap:4px;min-width:0}
.nb-rectop{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.nb-rectitle{font:900 15px/1.2 var(--display)}
/* The direction — Most or Fewest — in the accent, because it is half the
   question and the two boards a category carries differ by nothing else. */
.nb-rectitle u{text-decoration:none;color:var(--gold)}
.nb-recteam{font:700 9.5px/1 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-muted)}
.nb-recwhy{font-size:12.5px;line-height:1.42;color:var(--text-muted)}
.nb-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. */
.nb-recbest{margin-left:auto;font:900 13px/1 var(--display);color:var(--gold);
  letter-spacing:0;text-transform:none}
.nb-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. */
.nb-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)}
.nb-recchip.popular{color:var(--gold)}
.nb-recchip.sibling{color:var(--mint)}
.nb-recchip.flip{color:var(--amber)}
.nb-recchip.rival{color:var(--rust-text)}

/* 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. */
  .nb-rec{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:11px 12px;
    align-items:start}
  .nb-rec .nb-crest{width:32px;height:32px}
  .nb-recgo{display:none}
}

/* ===========================================================================
   THE SEASON CHALLENGE — pick the winner of every game, in the order they were
   played. See the section of the same name in nbamode.js.

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

   NOTHING HERE HARD-CODES A COLOUR EITHER. The two verdict tints are
   color-mix() over the palette's mint and rust, which is how a wash is made
   from a token that has no --*-rgb twin — the alternative was two rgba
   literals, which is the light-mode bug the header forbids.

   AND THERE ARE ONLY TWO OF THEM. A basketball game is played until somebody
   wins it: overtime after overtime, five periods, six, as many as it takes,
   and a season file with a drawn game in it is a broken row rather than a
   result to colour. So there is no third "push" state anywhere below — no tint
   on the stage, no colour on the verdict line, no amber tick on the strip and
   no amber row in the recap. Every game in every one of the thirty seasons on
   file went one way or the other.
   =========================================================================== */
/* ---- the box on the club screen ------------------------------------------
   Under the three categories 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 how this
   site marks the card that is a different kind of thing from its neighbours.
   Nothing is drawn for a club with no season on file. */
/* THE CARD AND ITS YEARS ARE TWO ELEMENTS, not one, because the years are
   buttons and a button inside a button is not markup a browser keeps — the
   inner one is the one it drops.
   SO THE WRAPPER IS THE CARD. .nb-scbox carries the border, the wash and the
   padding, and its two children sit inside them: the years read as part of the
   card rather than as a loose strip under it, which is what they would look
   like if the heading button were the only thing with an edge. The heading
   keeps its own hover, because it is still the only part that opens the
   picker. */
.nb-scbox{margin-top:12px;padding:16px 20px;border-radius:var(--radius);
  background:rgba(var(--gold-rgb),.08);
  border:1px solid rgba(var(--gold-rgb),.45)}
.nb-scbox:hover{border-color:var(--gold)}
.nb-season{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;
  width:100%;text-align:left;padding:0;margin:0;
  border:0;background:none;border-radius:8px;cursor:pointer;color:var(--text);
  font-family:inherit}
.nb-season:hover .nb-gl{color:var(--gold)}
.nb-season .nb-gb{flex:1 1 240px}
.nb-season .nb-gn{margin-left:auto}
/* THIRTY YEARS, because the window opens in 1996-97 and every club has every
   season it existed. Measured: seven to a row over five rows in the 640px
   column, and three to a row over ten of them at 375px — about 530 pixels of
   strip on a phone, against the three rows the same rule gives a club with ten
   seasons on file. It is still the right control: thirty TILES is three screens
   of picker, this is one card with every year in it, and each chip is a tap
   straight into that season rather than a tap into a list. The picker is where
   a year gets room for its game count and your record on it, and it is one tap
   away. It is also the first thing to measure again if the window is ever
   opened further back.

   46px TALL, which is the floor this stylesheet sets for a touch target two
   blocks up and explains there. inline-flex + a min-height rather than more
   padding, so the number stays optically centred on a row of seven. */
/* Inside the card, so the rule above it is what separates the years from the
   heading rather than empty space. */
.nb-scyears{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;
  padding-top:14px;border-top:1px solid rgba(var(--gold-rgb),.25)}
.nb-chip{display:inline-flex;align-items:center;min-height:46px;
  font:900 14px/1 var(--display);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;padding:0 15px;border-radius:10px;
  cursor:pointer;color:var(--gold);background:rgba(var(--gold-rgb),.08);
  border:1px solid rgba(var(--gold-rgb),.35)}
.nb-chip:hover{background:rgba(var(--gold-rgb),.18);border-color:var(--gold)}

/* ---- the year picker ----------------------------------------------------- */
.nb-years{display:grid;gap:12px;margin-top:4px;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.nb-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}
.nb-year:hover{background:var(--sheet-2);border-color:var(--gold)}
.nb-yn{font:900 36px/1 var(--display);letter-spacing:-.03em;color:var(--gold);
  font-variant-numeric:tabular-nums}
.nb-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. */
.nb-scwrap{max-width:720px}
.nb-schud{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:2px 0 8px}
.nb-screc{display:flex;align-items:baseline;gap:10px}
.nb-scn{font:900 30px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.nb-sccap{font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)}
.nb-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, and there are up to a hundred and six of them -------
   What is done, what is next, what is left, coloured by the verdict as each is
   answered, so the shape of a season is visible at a glance long before the
   end of it.

   THE FOOTBALL RULE COULD NOT BE CARRIED OVER, and the reason is the length of
   the season. There the tick is `flex:1 1 8px` with a 22px ceiling — a GROWING
   tick, because a football season is seventeen games and twenty-one with the
   playoffs, so they all share one line and each takes a share of it wide enough
   to see. A basketball season is fifty to a hundred and six games, four to six
   times as many, and a growing tick at that count fails twice over. It cannot
   fit one line, so it wraps; and the moment it wraps, every row is asked to
   fill itself independently — fifty-seven ticks share a full row at eight
   pixels each, while a season that leaves three of them on the last row grows
   those three to the 22px ceiling. The end of such a season would be drawn in
   ticks nearly three times the size of the rest of it.

   FIXED, THEREFORE, AND WRAPPING BY DESIGN. Nine by six with a three-pixel gap
   is fifty-seven to a row inside this card's 688px, so a hundred and six games
   is two rows on a desktop and four on a 375px phone — fifteen and thirty-three
   pixels of strip, neither of which pushes the fixture off the screen or sends
   the page sideways. The strip is now as long as the season is rather than as
   wide as the card, which is the truer picture as well: a fifty-game run should
   not look like an eighty-two game one. */
.nb-scdots{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:22px}
.nb-scdots span{flex:0 0 auto;width:9px;height:6px;border-radius:3px;
  background:var(--sheet-3)}
.nb-scdots span.now{background:var(--gold)}
.nb-scdots span.ok{background:var(--mint)}
.nb-scdots span.bad{background:var(--rust)}
/* Where the game sits in the club's own season — "Game 12", or the round and
   the game of it once the playoffs start ("NBA Finals Game 7"). The class keeps
   the name the key on the wire keeps: a fixture still arrives as `week`,
   because the slot means "which one of these is this" in both sports even
   though basketball does not number its calendar in weeks. */
.nb-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. */
.nb-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)}
.nb-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. */
.nb-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}
.nb-scstage.ok{background:color-mix(in srgb,var(--mint) 16%,transparent)}
.nb-scstage.bad{background:color-mix(in srgb,var(--rust) 18%,transparent)}
.nb-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 orange with the cabinet lip every
   pressable thing on this site carries, the crest and the nickname in white.
   --m-nba is the leather of the ball and it is this mode's colour everywhere it
   appears, from the card on the home screen to these two buttons. 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. */
.nb-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-nba);box-shadow:0 5px 0 var(--m-nba-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` that repaints the background
   navy and lifts the button a pixel, and it outranks a bare class — so without
   this the pressed club goes blue under the cursor and floats off its lip. It
   is the same note .theme-btn carries in theme.css. Disabled or not, the orange
   stays the orange. */
.nb-pick:hover{background:var(--m-nba);transform:none}
.nb-pick:hover:not(:disabled){box-shadow:0 7px 0 var(--m-nba-sh)}
.nb-pick:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--m-nba-sh)}
.nb-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. */
.nb-pick.chosen{opacity:1;outline:3px solid var(--gold);outline-offset:2px}
.nb-pick .nb-crest{width:52px;height:52px}
.nb-pickn{font:900 20px/1.1 var(--display);letter-spacing:-.01em;text-align:center;
  overflow-wrap:anywhere}
.nb-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. */
.nb-scverdict{min-height:24px;text-align:center;margin-top:16px;
  font:900 16px/1.35 var(--display)}
.nb-scverdict.ok{color:var(--mint)}
.nb-scverdict.bad{color:var(--rust-text)}

/* ---- the end of the season ----------------------------------------------- */
.nb-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 a short round tag
   — "F G7", "CF G1", "R1 G3" — as well as a plain game number, so it gets 40px
   rather than the table's 26. */
.nb-screcap{margin-top:20px}
.nb-screcap .gg-brow{grid-template-columns:40px minmax(0,1fr) auto auto}
.nb-screcap .gg-brow.ok .pts{color:var(--mint)}
.nb-screcap .gg-brow.bad .pts{color:var(--rust-text)}
.nb-screcap .gg-brow .val{white-space:nowrap}

/* ---- the phone ----------------------------------------------------------- */
@media(max-width:700px){
  .nb-season{padding:14px 16px}
  /* THIRTY SEASONS WILL NOT FIT ONE PHONE SCREEN AT ANY TILE SIZE, and that is
     the difference from the football picker this rule was written for: the
     window here opens in 1996-97 and a club that has been in the league
     throughout has thirty years on file, so the picker scrolls by construction
     rather than by an oversight. What a smaller tile buys is how much of a
     club's history is in each screenful — fifteen rows either way, and every
     pixel off the row is a year closer to the top of the next flick. The number
     is what the tile is for and it stays large; the padding and the 36px year
     come down. */
  .nb-years{grid-template-columns:repeat(2,1fr);gap:8px}
  .nb-year{padding:12px 14px;gap:4px}
  .nb-yn{font-size:26px}
  .nb-scmatch{font-size:26px}
  .nb-scstage{gap:10px;padding:12px}
  .nb-pick{min-height:132px;padding:16px 10px;gap:7px}
  .nb-pick .nb-crest{width:44px;height:44px}
  .nb-pickn{font-size:17px}
  .nb-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 board tiles use for
   a best score. Not `nb-ybest-…` anything: nb-year is a click-bound class and
   nothing may begin with it and a hyphen. */
.nb-ybest{font:900 15px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums;margin-top:2px}
/* The same line's other half, on the end card's "play next" tiles: a year with
   no record on it says so, in the muted weight a record is not, so the two
   read as one column rather than as a gold badge and a hole. Not nb-ynew —
   nb-yn is a class on the tile above it and no class here may extend another
   by anything but a hyphen, which is the rule this stylesheet opens with. */
.nb-yfresh{font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);margin-top:2px}
/* THE NAME THE CLUB PLAYED UNDER, on the years it did not wear the one on its
   crest: Washington's single season as the Bullets, Charlotte's ten as the
   Bobcats, Oklahoma City's twelve as the SuperSonics and New Orleans' eleven as
   the Hornets — a name Charlotte itself wore for the six seasons before the
   Bobcats and wears again today, which is exactly why a season row is resolved
   by its franchise code and never by its nickname. Four clubs, and the line is
   display only: nothing here has to work out which Hornets a row means because
   the file already carries the modern code beside every one. It sits right under the
   number in the tile's own accent, because it is part of what the year IS
   rather than a note about it. Not nb-yn-something: nb-yn is on the line above
   and no class may extend another by a hyphen. */
.nb-yera{font:900 13px/1 var(--display);letter-spacing:-.01em;
  color:var(--text-soft)}
/* 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. */
.nb-scxp{text-align:center;margin:-8px 0 16px;font-size:13px;color:var(--text-soft)}
.nb-scxp b{font:900 15px/1 var(--display);color:var(--gold)}
/* A season's share is one square a game — fifty of them at the least and a
   hundred and six at the most — so this is four or five wrapped lines rather
   than the one row a football season fits in, and the wrapping is doing real
   work here rather than guarding an edge. */
.nb-sqrun{letter-spacing:1px;overflow-wrap:anywhere;line-height:1.5}