/*
 * Trivia · shared rules (2026-09-22; desktop block 2026-09-28/29).
 *
 * The trivia hub and its four game pages are static HTML outside Astro, so NONE
 * of the site's phone rules reach them — not the type floor, not the 44px hit
 * areas. Each page was carrying (or missing) its own copy, which is the
 * per-page-CSS-copy drift this repo has been bitten by before, so this is ONE
 * sheet linked from all five instead of five near-identical blocks.
 *
 * Under 720px it holds only the two objective floors. Above 720px it is the
 * five pages' share of desktop.css (which they cannot import): the flat canvas,
 * the nav band, the one column's gutter, the white hairline card, flat chips.
 * Anything about how a page LOOKS beyond that stays in the page that owns it.
 */

/* ── TYPE FLOOR, all widths ──
   The scale's smallest declared size is 9px. The header kind label, the card
   subtitle, a stray <small> and the quiz teaser's "SEC LEFT" rendered at 8
   and 8.5. This used to sit inside the phone block, so on a desktop the quiz
   page still shipped 8.5px text. */
.hkind, .cs, .qt-pring .in small { font-size: 9px !important; }

/* ── a visually-hidden heading ──
   Two of the games (Higher or Lower, Beat the Clock) had NO <h1> at any width:
   their `.ghead` block styles an h1 that was never in the markup, so a
   screen-reader user and a search engine had no page-level heading. Same
   idiom as the site's sr-only h1s. */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 720px) {
  /* ── HIT AREAS ──
     Every isolated control here measured 33-40px against the 44px both Apple
     and Google set as the minimum. An absolutely-positioned ::after centred on
     the control catches the tap without changing anything you can see; it
     belongs to the control, so it catches taps for that control only.
     Deliberately NOT applied to anything that sits in a tight vertical stack —
     a 44px box on a 36px pitch steals its neighbour's taps. */
  .lg, .spchip, .stchip, .pchip, .back, .brand, .nav-search, .mode-go {
    position: relative;
  }
  .lg::after, .spchip::after, .stchip::after, .pchip::after, .back::after,
  .brand::after, .nav-search::after, .mode-go::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }

  /* The footer links land at 43px: one pixel short, which is the least
     interesting kind of miss and still a miss. They are a tight vertical stack,
     so they take real height rather than the overlay above — a 44px box on a
     43px pitch would overlap its neighbour by the very pixel being added.
     min-height grows the box without moving the text. */
  .foot-col a { min-height: 44px; }
}

/* ── THE DESKTOP, trivia edition (2026-09-28/29) ──
   These five pages are static HTML outside Astro, so neither BaseLayout's
   .nav-band nor desktop.css reaches them; this is their share of both. */
@media (min-width: 721px) {
  /* the nav wears the sport: the same band, in trivia green (#1E8658 = the
     trivia green darkened until white text clears 4.5:1, measured 4.56) */
  .nav-band { position: sticky; top: 0; z-index: 50; background: var(--nav-bg, #1E8658); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
  .nav-band .nav { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
  /* the same column and the same 20px gutter as every Astro page: with
     `max-width: 1124px; padding: 0` the brand sat at x=0 in a 1,024px window
     and the search button touched the right edge (measured on all five) */
  .nav-band .nav-in { width: min(1124px, calc(100% - 40px)); max-width: 1124px; margin: 0 auto; padding-left: 0; padding-right: 0; }
  .nav-band .brand, .nav-band .brand .x, .nav-band .nav-list a, .nav-band .nav-right a, .nav-band .nav-right button { color: #FFFFFF; }
  .nav-band .nav-list a { opacity: 1; font-weight: 600; }
  .nav-band .nav-list a:hover, .nav-band .nav-list a.on, .nav-band .nav-list a[aria-current] { opacity: 1; color: #FFFFFF; font-weight: 800; }
  .nav-band .nav-search { background: transparent; border-color: rgba(255, 255, 255, .35); }
  .nav-band .nav-search:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); }

  /* the canvas: the phone's flat putty, as desktop.css sets it. Every one of
     these pages painted its own gradient wash plus a fixed radial glow and a
     grain layer (body::before / ::after); none of that exists on the rest of
     the desktop any more. */
  body { background: #EEEBE4 !important; background-image: none !important; }
  body::before, body::after { display: none !important; }

  /* the card: white, the .11 line, 14px, the soft lift. These were frosted
     glass (backdrop blur, .66 alpha, a 54px shadow) on every page. The
     selectors are each page's ONE main card: the hub's warm-up and featured
     cards, Higher or Lower's setup card and HUD, Grid Fill's and Beat the
     Clock's `.game`, Immaculate's board. */
  .wu, .hl-promo, .setup-card, .hud-r, .game, .board-wrap, .mode, .hiwc {
    background: #FFFFFF !important; border: 1px solid rgba(25, 24, 20, .11) !important; border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(25, 24, 20, .05), 0 4px 10px rgba(25, 24, 20, .05) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .setup-card::after { display: none !important; }
  /* buttons and filled chips are flat: the glow under a filled control is a
     UI-kit tell, and the chips here (league, stat, puzzle) FILTER what the
     game shows, which is the filled chip — flat, no shadow, 160ms */
  .btn-primary, .wu-next, .lg.on, .stchip.on, .stchip.all.on, .spchip.on, .pchip.on, .mode-ic, .hiwc .ic, .pwheel, .pcard, .hl-facewrap, .dcal, .dwheel { box-shadow: none !important; }
  .btn:hover, .lg:hover, .stchip:hover, .spchip:hover, .pchip:hover { box-shadow: none !important; transform: translateY(-1px) !important; }
  .btn, .lg, .stchip, .spchip, .pchip, .mode, .hiwc { transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important; }
}

/* ── THE HOME'S GRAMMAR ON THE HUB (2026-10-01; Spencer: the home's look "is not
   carried over to all aspects of the site"). The hub is the one trivia page with
   sections, so these are scoped to it by the game-modes grid it alone carries.
   The home's card: white on the putty, a crisp .24 line and no shadow, 14px
   radius, the header as the card's FIRST ROW — a 20×3 mark in the accent, the
   name in 9.5px mono caps ink, the note muted. The serif section title said
   the eyebrow again, larger, so it goes; the game modes are rows inside their
   card, hairlines between them; the hero loses its stage padding and its
   button shadows; the footer is the tab bar's job on a phone. ── */
@media (max-width: 720px) {
  body:has(.modes) .hero { padding: 16px 0 0 !important; text-align: left !important; }
  body:has(.modes) .hero .wrap, body:has(.modes) .sec .wrap { padding: 0 16px !important; }
  body:has(.modes) .hero h1 { font-size: 24px !important; line-height: 1.15 !important; margin: 6px 0 0 !important; }
  body:has(.modes) .hero-eye { font-size: 9.5px !important; letter-spacing: .14em !important; color: #191814 !important; }
  body:has(.modes) .hero-cta { justify-content: flex-start !important; gap: 8px !important; margin-top: 14px !important; }
  body:has(.modes) .btn { padding: 9px 14px !important; font-size: 13px !important; border-radius: 999px !important; box-shadow: none !important; transform: none !important; }
  body:has(.modes) .daily-live { margin-top: 18px !important; }
  body:has(.modes) .daily-live-head h2 { font-size: 20px !important; }
  body:has(.modes) .hl-promo { border: 1px solid rgba(25, 24, 20, .24) !important; border-radius: 14px !important; box-shadow: none !important; background: #FFFFFF !important; }
  body:has(.modes) .sec { padding: 16px 0 0 !important; }
  body:has(.modes) .sec > .wrap { margin: 0 16px !important; padding: 0 14px 12px !important; background: #FFFFFF; border: 1px solid rgba(25, 24, 20, .24); border-radius: 14px; overflow: hidden; }
  body:has(.modes) .sec-head { position: relative; display: flex; align-items: center; gap: 8px; text-align: left !important; margin: 0 -14px 10px !important; padding: 17px 14px 9px; border-bottom: 1px solid rgba(25, 24, 20, .11); }
  body:has(.modes) .sec-head::before { content: ''; position: absolute; left: 14px; top: 8px; width: 20px; height: 3px; border-radius: 2px; background: var(--accent); }
  body:has(.modes) .sec-eye { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .14em !important; color: #191814 !important; }
  body:has(.modes) .sec-eye::before { display: none !important; }
  body:has(.modes) .sec-title { display: none !important; }
  body:has(.modes) .sec-head .sub { margin: 0 !important; flex: 1; min-width: 0; font-family: var(--mono); font-size: 9.5px !important; color: rgba(25, 24, 20, .52) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:has(.modes) .modes { grid-template-columns: 1fr !important; gap: 0 !important; margin: 0 -14px -12px !important; }
  body:has(.modes) .mode { border: 0 !important; border-top: 1px solid rgba(25, 24, 20, .11) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
  body:has(.modes) .mode:first-child { border-top: 0 !important; }
  body:has(.modes) .foot { display: none !important; }
}

/* ── the nav wears the section's colour on phones too (2026-10-01): the band was
   painted only above 721px, so a phone saw a white bar under a green tab bar.
   The wordmark, its pip and the search button go white, as on every Astro page
   whose band is coloured. ── */
@media (max-width: 720px) {
  .nav-band { position: sticky; top: 0; z-index: 50; background: var(--nav-bg, #1E8658); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
  .nav-band .nav { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
  .nav-band .brand, .nav-band .brand .x, .nav-band .nav-right a, .nav-band .nav-right button { color: #FFFFFF !important; }
  .nav-band .brand .dot { background: #FFFFFF !important; }
  .nav-band .nav-search { background: transparent !important; border-color: rgba(255, 255, 255, .35) !important; color: #FFFFFF !important; }
  body { background: #EEEBE4 !important; background-image: none !important; }
  body::before, body::after { display: none !important; }
}

/* ── the desktop card edge is a LINE (2026-10-01): the soft lift above matched the
   old desktop; the home now draws every card with a crisp .24 line and no shadow,
   and these five pages follow it ── */
@media (min-width: 721px) {
  .mode, .hl-promo, .wu-card, .step, .how-card, .sec .wrap > .card { border: 1px solid rgba(25, 24, 20, .24) !important; box-shadow: none !important; }
  .mode:hover { transform: none !important; box-shadow: none !important; }
  .btn-primary { box-shadow: none !important; }
  .wu { border: 1px solid rgba(25, 24, 20, .24) !important; }
}

/* ── the warm-up card and the pick cards inside it were the last lifted, glassed
   things on the hub (2026-10-01 thoroughness pass): a white card with a line ── */
.wu { background: #FFFFFF !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.pcard, .pcard.hi { box-shadow: none !important; }
.hiwc:hover { transform: none !important; box-shadow: none !important; }
@media (max-width: 720px) { .wu { border: 1px solid rgba(25, 24, 20, .11) !important; } }