/* ---------- focus ---------- */
:where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--gold);
  outline-offset:2px}
.mode-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- the widening: desktop is the wide cabinet ---------- */
@media(max-width:1100px){
  .modes{grid-template-columns:repeat(2,1fr);padding:26px 26px 10px}
  /* The rest-row follows .modes down to two columns here; only the hero's own
     padding needs bringing in to match. */
  .mode-hero{padding:26px 26px 0}
  .home-grid{grid-template-columns:1fr;padding:18px 26px 30px}
  .hero{padding:30px 26px 20px}
  .qmeta,.qtext,.qblurb,.qunit,.scale-hint,.answer-row,.reveal{padding-left:26px;padding-right:26px}
  .refbox{margin-left:26px;margin-right:26px}
}

/* ---------- the phone ---------- */
@media(max-width:700px){
  body{padding:10px 10px 40px}
  .wrap{border-radius:14px}
  /* On a phone the bar STACKS and centres: the wordmark on its own line,
     then the account row, then the nav. It used to wrap instead — brand hard
     left, account hard right — which on a narrow screen left the two ends
     jammed against the edges with a gap in the middle and the account row
     ragged as items appeared and disappeared with sign-in state.
     
     Column direction rather than flex-wrap because the order is then fixed
     and every row centres on its own; wrapping put whatever fitted on line
     one, which changed with the length of the username. The auto margins that
     do the work on desktop have to be undone, or they fight the centring. */
  .authbar{padding:12px 16px;gap:9px;flex-direction:column;align-items:center;
    text-align:center}
  .brand{margin-right:0;justify-content:center}
  .brand-name{font-size:17px}
  .brand-badge{width:32px;font-size:32px}
  .topnav{gap:18px;font-size:13px;order:3;width:100%;justify-content:center;
    border-top:1px solid var(--hair);padding-top:8px}
  .topnav a{padding:4px 0}
  .bar-right{gap:10px;font-size:12.5px;margin-left:0;width:100%;
    justify-content:center;flex-wrap:wrap}
  /* Both auth states are a row inside the centred bar, not a bare span, so
     "Profile · Friends · Sign out" sits as one balanced line. */
  #authUser,#authGuest{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    justify-content:center}
  .user-chip{padding:4px 11px 4px 4px}
  .who{font-size:12.5px}
  .hero{padding:24px 18px 20px}
  .hero-h{font-size:32px}
  .hero-live{font-size:10px;padding:8px 14px}
  /* THREE ACROSS, under the hero. Two columns left the third tile alone on a
     row of its own with a hole beside it, which read as a layout that had
     broken rather than one that meant it.
     minmax(0,1fr), not 1fr: a bare `1fr` is minmax(AUTO,1fr), so a column can
     never shrink below its widest item's min-content and "Play with friends"
     alone would push its column wider than the other two. */
  .modes{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:20px 14px 8px}
  /* The hero STACKS on a phone. Side by side, the call to action would take
     half the width off a 375px screen and leave the title in a column two
     words wide.

     THE PAIRS UNSTACK THEMSELVES HERE, and this rule is why that reasoning
     survived. The two hero rows are flex pairs on a desktop — daily beside
     Gauntlet Mode, Live beside NFL — which is the layout that was asked for and
     is right on a wide screen. At 375px it is not: measured, the daily's title
     wrapped to THREE lines in a 152px card ("Play / today's / daily"), which is
     the exact failure the paragraph above predicted. Same cards, one column. */
  .mode-pair{flex-direction:column}
  /* `flex:1 1 0` ON THE CARDS IS A WIDTH RULE, AND THIS IS A COLUMN.

     It exists so two cards SHARE THE ROW on a desktop — basis 0, grow equally,
     which in `row` direction divides the width. Turning the same container to
     `column` turns that basis into a HEIGHT: the daily and Gauntlet cards were
     handed 32px each out of the row's 98 and their content is 101, so the
     titles rendered outside their own cards and over the card below. Sizing to
     content is what a stacked card wants; the sharing was never meant to
     survive the direction change. */
  .mode-pair > *{flex:0 0 auto}
  /* AND THE ROW GAP GOES BACK TO PADDING. On a desktop the 14px between the two
     hero rows is a margin on the cards, so a second row with both cards hidden
     leaves nothing behind. Stacked, that margin lands on top of the column's
     own 14px gap and spaces row two twice — measured at 28px against row one's
     14. Padding on the row is what this always was before the pair existed. */
  .mode-hero-2.mode-pair{padding-top:14px}
  .mode-hero-2.mode-pair > *{margin-top:0}
  .mode-hero{padding:20px 18px 0}
  .mode-hero .mode-card{grid-template-columns:1fr;
    grid-template-areas:"no" "name" "desc" "cta";gap:8px;padding:16px 15px}
  .mode-hero .mode-name{font-size:20px}
  /* `.live` BELONGS IN THIS LIST AND WAS MISSING FROM IT. Without it the hero
     rule above — 44px of side padding, 14px type, nowrap — went on applying at
     phone width, and it outranks the general `.mode-go` block further down
     (0-4-0 against 0-3-0), so the longest label ("Join the lobby · 0
     waiting") drew a box wider than the card and hung off its right edge.
     Height rather than padding, matching its two neighbours, so all three
     heroes have the same button whatever their label says. */
  .mode-hero .mode-card.daily .mode-go,
  .mode-hero .mode-card.gauntlet .mode-go,
  .mode-hero .mode-card.guesser .mode-go,
  .mode-hero .mode-card.live .mode-go{padding:0 10px;height:40px;
    font-size:11.5px;white-space:normal;line-height:1.15;
    display:flex;align-items:center;justify-content:center;max-width:100%}
  /* Tighter, because a third of a phone is about 110px. */
  .mode-card{min-height:0;padding:13px 10px;gap:6px;border-radius:12px}
  /* AND THE THREE TILES GET THEIR OWN SHAPE, because the desktop block that
     styles them is not in a media query and was reaching a phone whole.

     WHAT IT DID HERE. 170px of min-height on a screen where the whole row is
     103px wide, so three tall thin boxes; 22/20/18 of padding, which leaves
     63px of a 103px card for the name and wraps "Higher or Lower" onto THREE
     lines; and the name pinned to the top by `margin:14px 0 0`, so the two
     one-word tiles sat 41px above the middle of their own box with nothing
     under them. That last one is what reads as Multiplayer being off centre —
     it is not off centre sideways, it is stranded at the top.

     WHAT IT DOES INSTEAD: shorter, the phone's own padding back, and the name
     given the space above the button to centre itself in. Every selector here
     is 0-3-0 or carries the same 0-2-0 the desktop rule does and comes later,
     which is what it takes to win — a bare `.mode-name` would not. */
  /* THE BOTTOM PADDING IS THE BUTTON'S OWN STRIP, and it is load-bearing. The
     call to action is position:absolute — bottom:10px, 34px tall, so it owns
     the last 44px — and an absolutely positioned element holds no space, so a
     name given flex:1 expands straight down behind it. "Higher or Lower"
     wraps to two lines here and overlapped its own button by 6px. Reserving
     the strip in padding gives flex:1 only the room above it, which is also
     where the name should be centring. */
  .modes-rest .mode-card{min-height:112px;padding:12px 8px 44px;gap:4px}
  .modes-rest .mode-name{flex:1;margin:0;display:flex;
    align-items:center;justify-content:center;text-align:center}
  .modes-rest .mode-go{width:88%;padding:0;bottom:10px}
  .mode-name{font-size:14.5px;line-height:1.1}
  .mode-no{font-size:10px}
  .mode-desc{display:none}
  /* One line, always, and every button the same box. "Play with friends" is
     the longest label and wrapped in a card this narrow, which made its button
     52px tall against its neighbour's 39 — so the two sat on the same baseline
     with different tops, and the row read as misaligned.
     Measured in this card: 123px of room, and the label needs 117px at 10.5.
     Fixed height rather than padding, so a future longer label cannot quietly
     make one button taller than the rest again.

     THE SELECTOR LIST IS THE POINT. A bare `.mode-go` here is specificity
     0-1-0 and the base sheet styles the same buttons through
     `.mode-card.multiplayer .mode-go` at 0-3-0, which wins inside a media
     query just as it does outside one — so this rule never actually applied.
     It went unnoticed because the column was being stretched wide enough for
     13px to fit; evening the columns out is what exposed it. */
  /* The label WRAPS here rather than staying on one line. At a third of the
     width there is about 90px of room, and "Play with friends" needs 117px at
     a readable size — so one line means either clipping it or shrinking the
     type past legibility. Two short lines is the honest answer.
     The height is FIXED so a one-line label and a two-line one still produce
     identical boxes; without it the wrapped tile's button would be taller and
     the row would sit crooked again.

     THE SELECTOR LIST IS THE POINT. A bare `.mode-go` here is specificity
     0-1-0 and the base sheet styles the same buttons through
     `.mode-card.multiplayer .mode-go` at 0-3-0, which wins inside a media
     query just as it does outside one. */
  .mode-go,
  .mode-card.daily .mode-go,
  .mode-card.gauntlet .mode-go,
  .mode-card.unlimited .mode-go,
  .mode-card.hilo .mode-go,
  .mode-card.guesser .mode-go,
  .mode-card.multiplayer .mode-go{font-size:9.5px;padding:0 4px;height:34px;
    white-space:normal;line-height:1.15;text-align:center;letter-spacing:.03em;
    display:flex;align-items:center;justify-content:center}
  .home-grid{grid-template-columns:1fr;gap:12px;padding:16px 18px 26px}
  /* Desktop only, on purpose: a self-rotating panel on a phone pushes the
     modes off the first screen for something nobody asked to watch. */
  .leaders{display:none}
  .panel{padding:15px 17px}

  .mode-banner,.hud,.hl-bar,.hl-hud{padding-left:16px;padding-right:16px}
  .hud{gap:12px}
  .score-num{font-size:21px}
  .dot{width:14px}
  .qmeta{padding:14px 18px 0}
  .qtext{font-size:calc(31px * var(--q-scale,1));padding:0 18px;margin-top:8px}
  .qblurb,.qunit{padding:0 18px}
  .scale-hint{padding:10px 18px 0}
  .qmedia.has-media{padding:14px 18px 0}
  .refbox{margin:16px 18px 0;padding:14px 16px}
  .reveal{padding:0 18px}
  .answer-row{padding:18px 18px 0}
  .answer-row input{font-size:24px;padding:16px 18px}
  .lock-wrap{padding:14px 18px 0}
  .answer-note{padding:12px 18px 0;font-size:12.5px}
  .end{padding:24px 18px 32px}
  .final{font-size:52px}
  .deck-pick{padding:20px 18px 28px}

  /* The box and the button stack, so both are full width and Lock sits
     directly under the field. That matters more now than it did: the phone's
     own keyboard covers the bottom of the screen, and `type=number` gives it
     no Go key, so Lock is the only way to commit — it has to be the next
     thing under the caret rather than off to one side. */
  .answer-row{flex-direction:column;align-items:stretch;gap:8px;padding-top:14px}
  .answer-row input{font-size:22px;padding:14px 16px}
  #lockBtn{width:100%;min-width:0;padding:16px 0}
  /* full width and thumb-sized, like everything else in this column */
  .era-toggle{width:100%;min-height:48px;font-size:13.5px;padding:14px 18px}

  .hl-bar{flex-wrap:wrap;gap:8px}
  .hl-bar .tag,.hl-deck{font-size:11.5px;padding:7px 10px}
  .hl-back{font-size:11.5px}
  .hl-hud{flex-wrap:wrap;gap:10px 16px;padding-top:12px;padding-bottom:12px}
  .hl-side{margin-left:0;width:100%;gap:14px;flex-wrap:wrap}
  .hl-metric{font-size:calc(23px * var(--q-scale,1));padding:18px 18px 0}
  .hl-stage{grid-template-columns:1fr;padding:14px 18px 0}
  .hl-vs{writing-mode:horizontal-tb;padding:6px 0;
    border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  .hl-card{padding:22px 18px}
  .hl-val{font-size:38px}
  .hl-n{font-size:24px}
  .hl-btns{flex-direction:column;padding:16px 18px 0}
  .hl-btn{padding:18px 0;width:100%}
  .hl-ask{padding:18px 18px 0;font-size:14px}
  .hl-over{padding:18px}
  .hl-over-card{padding:24px 20px}
  .hl-over-score{font-size:48px}
  /* ============================================================
     A ROUND ON A PHONE FITS ON THE PHONE.

     Measured at 375x812 before this block existed: the Lock button sat
     133px below the fold while guessing, and after locking in the Next
     button sat at y=1362 — 550px below it. Every single question cost two
     scrolls. The ordering rules that used to prevent this lived in the
     stylesheet the quiz-night redesign replaced, and went with it.

     Two mechanisms, both cheap, both mobile-only.

     ORDER. The "reveal one for reference" panel belongs above the guess box
     on a desktop — you decide whether to buy a hint, then guess — and below
     it on a phone, where it is tall enough to push the input off screen.
     Done with flex `order` rather than moving the DOM, because showQuestion
     already repositions the refbox per deck and a second mover racing the
     first is how that class of bug starts.

     `.reveal.show`, NOT `.reveal`: the panel is display:none until revealed
     and `.reveal.show{display:block}` is what shows it. A media query adds
     no specificity, so a plain `.reveal{display:flex}` here loses and the
     whole reorder silently does nothing. That is exactly how this failed
     the first time it was written, years and one redesign ago.

     WEIGHT. The reveal leads with what you need to carry on — the verdict,
     the two numbers, Next — and keeps the bar chart and the fact below for
     anyone who wants to linger. The chart is the same information as the
     numbers directly above it, so it is the block that can lose height
     without losing anything; the photo is the other.
     ============================================================ */
  .qcard{display:flex;flex-direction:column}
  .qcard > *{order:1}
  #answerRow{order:2}
  #refbox{order:3}
  #reveal{order:4}

  .reveal.show{display:flex;flex-direction:column}
  .reveal > *{order:6}
  .verdict-strip{order:1;padding-top:14px}
  #themeReveal{order:2}
  .next-wrap{order:3;padding:16px 0 4px}
  .chart{order:4}
  .fact{order:5;margin-top:16px}

  /* The picture gives up the most height for the least information. A photo
     is 50px taller than a flag, so it is what sets the worst case — sized
     here so a photo question has the same headroom a flag question does
     rather than being the one that still needs a scroll. */
  .qmedia.has-media{padding:10px 18px 0}
  .media-fig{--mw:168px;--mh:112px}

  /* the numbers read as one line, not a stack */
  .score-reveal{padding:16px 0 0}
  .sr-nums{flex-direction:row;gap:12px;align-items:flex-start}
  .sr-side.right{text-align:right;align-items:flex-end}
  .sr-val{font-size:23px}
  .sr-who{font-size:11.5px}
  .sr-score{margin-top:12px;padding:9px 18px;gap:7px}
  .sr-score #srNum{font-size:27px}
  .sr-track{margin:12px 0 6px}

  .chart{gap:22px;height:132px;padding-top:12px}
  .col{width:76px}
  .bar-val{font-size:16px}

  /* The nav row used to be hidden during a round — it was 34 of the pixels
     standing between the Lock button and the fold when the on-screen pad was
     taking 250 of them. The pad is gone and the phone's own keyboard costs
     the layout nothing, so the row is back: hiding navigation to win space
     you no longer need is a trade with nothing on the other side.
     `body.in-round` stays, because it is the honest hook for anything that
     genuinely should differ mid-round. */
  .authbar{padding:10px 14px;gap:8px 10px}
  .topnav{padding-top:4px}
  .topnav a{padding:4px 0}
  .mode-banner{padding-top:11px;padding-bottom:11px}
  .hud{padding-top:12px;padding-bottom:12px}

  /* The caption under a flag or photo repeats the subject that is already in
     the question above it — "Saudi Arabia" under a Saudi flag, under "Number
     of zoos in Saudi Arabia". Worth its 24px on a laptop, not on a phone. */
  .media-fig figcaption{display:none}
  .scale-hint{padding-top:8px}
  .scale-chip{padding:6px 13px}
}

/* The narrow end of the phone range — a 320px screen gives each of the three
   tiles 85px, and "Multiplayer" is one unbreakable word that needs 81 of them
   at the 14.5px used above. Shrinking the type here is what keeps all three on
   one row instead of dropping one onto a line of its own. Measured: 66px at
   12px against 69px of room. */
@media(max-width:360px){
  .modes{gap:6px;padding:18px 12px 8px}
  .mode-card{padding:11px 8px}
  .mode-name{font-size:12px}
  .mode-no{font-size:9px}
  .mode-go,
  .mode-card.daily .mode-go,
  .mode-card.gauntlet .mode-go,
  .mode-card.unlimited .mode-go,
  .mode-card.hilo .mode-go,
  .mode-card.multiplayer .mode-go{font-size:8.5px;height:32px}
  /* .mode-hero narrows here, so the title's lower gap has to widen to
     match its upper one. Without this it inherits the 700px value and
     sits 2px high. */
  .hero{padding:24px 18px 22px}
  .mode-hero{padding:18px 12px 0}
  .mode-hero .mode-name{font-size:18px}
}


/* ============================================================
   SHORT SCREENS — the phone people actually hold.

   Width alone is not the constraint. A 375x812 phone reports 812 only in
   full screen; in Safari with its address bar the viewport is nearer 660,
   and every measurement above passes at 812 and fails by ~94px at 660. So
   this block is keyed on HEIGHT as well, and it is the one that decides
   whether a round scrolls on a real handset.

   Everything here is a size, not a removal: the question, the category, the
   scale hint and the pad all stay: they are what you need to answer. The
   height comes out of the picture, the paddings and the vertical rhythm.
   ============================================================ */
@media(max-width:700px) and (max-height:740px){
  .authbar{padding:8px 14px}
  .brand-badge{width:28px;font-size:28px}
  .brand-name{font-size:15px}
  .mode-banner{padding-top:8px;padding-bottom:8px;font-size:12.5px}
  .hud{padding-top:8px;padding-bottom:8px}
  .qmeta{padding-top:10px}
  .qtext{font-size:calc(28px * var(--q-scale,1));margin-top:6px}
  .qmedia.has-media{padding-top:8px}
  .media-fig{--mw:126px;--mh:84px}
  .scale-hint{padding-top:7px}
  .scale-chip{padding:5px 12px;font-size:12px}
  .answer-row{padding-top:10px;gap:7px}
  .answer-row input{font-size:20px;padding:10px 14px}
  #lockBtn{padding:12px 0;font-size:14px}

  /* THE GUESS AIDS STAND DOWN AT THE REVEAL.
     The picture and the "biggest in this category" chip exist to help you
     pick a number. Once the answer is on screen they are 140px of spent
     scenery sitting between the score and the Next button — and on a short
     phone that is the whole difference. They come back with the next
     question. Taller phones keep them throughout; this is the block for the
     screens that cannot afford them.

     `:has()` reads the reveal's own `.show` class, so this follows the same
     signal the reveal itself uses rather than needing a second flag that
     could drift out of step with it. */
  .qcard:has(.reveal.show) #qMedia,
  /* "Answer in wins — decimals welcome" is an instruction for typing a
     number. Once the number is typed and scored it is the third spent thing
     between the answer and Next. Its content is set with innerHTML, not
     style, so no !important is needed here. */
  .qcard:has(.reveal.show) #qunit{display:none}
  /* `!important` earns its keep exactly once, here. showQuestion sets
     `scaleHint.style.display` inline every question — it has to, because the
     hint is absent on year questions and on the sports deck — and an inline
     style beats any stylesheet rule that does not say this. Without it the
     picture hid and the hint stayed, which is half a fix and a misleading
     comment. */
  .qcard:has(.reveal.show) #scaleHint{display:none!important}

  /* the reveal keeps the same order, just tighter */
  .verdict-strip{padding-top:10px}
  .verdict-chip{padding:9px 18px;font-size:12px}
  .score-reveal{padding-top:10px}
  .sr-val{font-size:20px}
  .sr-score{margin-top:8px;padding:7px 15px}
  .sr-score #srNum{font-size:23px}
  .sr-track{margin:9px 0 5px}
  .next-wrap{padding:12px 0 4px}
  .chart{height:112px}

  /* The picture was squeezed to 42px to fit around the pad. With the pad
     gone there is room to see it again — still smaller than a tall phone
     gets, because the reveal is what is tight on these screens, not the
     question. */
  .media-fig{--mw:144px;--mh:96px}
  .qtext{font-size:calc(27px * var(--q-scale,1));line-height:1.06}
  .qmeta{padding-top:8px}
  .mode-banner{padding-top:7px;padding-bottom:7px}
  .hud{padding-top:7px;padding-bottom:7px}
  .answer-row{padding-top:5px;gap:6px}
  .qmedia.has-media{padding-top:4px}
  .scale-hint{padding-top:3px}
  .qunit{margin-top:5px}
  /* These two were trimmed to 38px when the on-screen pad was eating the
     screen. The pad is gone and there is over 100px spare, so they go back
     to a size a thumb can hit — 44px is the floor and these clear it. */
  #lockBtn{min-height:48px}
  .era-toggle{min-height:46px}
}