/*
 * Trivia in the dark system (2026-11-05). The hub and Higher or Lower are static HTML outside Astro, so none of
 * system.css or dark.css reaches them: this sheet is their copy of the ground, the colour-edge top bar (SysNav.astro,
 * .nb in system.css), the small footer and the phone tab bar, then the hub's own sections. Aqua is the section colour,
 * as it is on the home and Games. All five trivia pages load it.
 */
:root {
  --gr: #111318; --tl: #1B1E25; --tl2: #22262E; --ed: #2A2E37; --tx: #F2F3F5; --tx2: #C7CBD3; --mu: #9AA1AD; --aq: #3DE0D2; --on-aq: #0B1214;
  --win: #22A05A; --loss: #D9534A; --bs: 'Big Shoulders Display', 'Inter', sans-serif; --sans: Inter, system-ui, sans-serif;
  --col: min(1124px, calc(100% - 40px));
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
html, body { margin: 0; background: var(--gr); color: var(--tx); }
body { font-family: var(--sans); line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--aq); outline-offset: 2px; border-radius: 8px; }
.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; }

/* the top bar */
.nb { height: 60px; border-top: 4px solid var(--aq); border-bottom: 1px solid #1F232B; background: #0B0D11; color: #FFF; position: relative; }
.nbi { width: var(--col); margin: 0 auto; height: 100%; display: flex; align-items: center; }
.wm { font: 800 30px/1 var(--bs); letter-spacing: .005em; text-transform: uppercase; color: #FFF; height: 44px; display: inline-flex; align-items: center; white-space: nowrap; flex: none; }
.wm b { font-weight: inherit; display: inline-block; position: relative; line-height: 1; }
.wm b span { display: inline-block; line-height: 1; clip-path: inset(.30em 0 0 0); }
.wm b i { position: absolute; top: .07em; left: .025em; width: .17em; height: .17em; border-radius: 50%; background: var(--aq); }
.nb .sr { margin-left: 28px; width: 188px; height: 40px; border-radius: 999px; background: #15181E; border: 1px solid transparent; display: flex; align-items: center; gap: 8px; padding: 0 14px; font: 500 13px var(--sans); color: #9AA1AD; flex: none; }
.nb .sr:hover { border-color: var(--aq); }
.nb nav { margin-left: auto; display: flex; align-items: center; height: 100%; }
.nb .g { display: flex; height: 100%; }
.nb .g a { font: 600 14px var(--sans); color: #9AA1AD; height: 100%; min-width: 44px; padding: 0 11px; display: flex; align-items: center; justify-content: center; position: relative; white-space: nowrap; }
.nb .g a:hover, .nb .g a.on { color: #FFF; }
.nb .g a.on::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--aq); }
.nb .g.sp a { font: 800 18px/1 var(--bs); letter-spacing: .05em; text-transform: uppercase; color: #AEB4BE; padding: 0 12px; }
.nb .g.sp a:hover { color: var(--c); }
.nb .rule { width: 1px; height: 20px; background: #2A2E37; margin: 0 12px; flex: none; }
.nb .g:last-child a:last-child { margin-right: -11px; }

/* the games: one column with the top bar, one selected chip, one button */
body .wrap { width: var(--col); max-width: none; padding: 0; }
body .btn { border-radius: 999px; }
body .lg-dot, body .spchip .sd, body .lg.on .lg-dot, body .spchip.on .sd { background: var(--c); box-shadow: none; }
body .lg.on, body .spchip.on, body .stchip.on { color: var(--tx); background: color-mix(in srgb, var(--c, var(--aq)) 22%, var(--tl2)); border: 1px solid var(--c, var(--aq)); box-shadow: none; }
body .lg:hover, body .spchip:hover, body .stchip:hover { transform: none; box-shadow: none; }
body .stchip.all { border: 1px solid var(--ed); color: var(--tx2); }
body .stchip.all.on { color: var(--tx); background: color-mix(in srgb, var(--aq) 18%, var(--tl2)); border-color: var(--aq); }

/* the small footer */
.lf-min { margin-top: 56px; border-top: 1px solid var(--ed); }
.lf-min > div { width: var(--col); margin: 0 auto; height: 76px; display: flex; align-items: center; justify-content: space-between; font: 500 13px var(--sans); color: var(--mu); }

/* the phone tab bar */
.ph-bar { display: none; }

/* ─── the hub ─── */
.tv-main { width: var(--col); margin: 0 auto; padding-top: 30px; }
.tv-main h1 { font: 800 44px/1 var(--bs); letter-spacing: .01em; margin: 0; }
.tv-main h2 { font: 800 26px/1 var(--bs); letter-spacing: .01em; margin: 0 0 12px; }
.tv-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 22px; align-items: stretch; }
.tv-top > section { display: flex; flex-direction: column; min-width: 0; }
.tv-card { flex: 1; background: var(--tl); border: 1px solid var(--ed); border-radius: 14px; }

/* the featured round: two clubs' colour fields under the question, the whole card is the link */
.hl-promo { display: flex; flex-direction: column; overflow: hidden; color: inherit; transition: border-color .16s ease; min-height: 430px; }
.hl-promo:hover { border-color: var(--aq); }
.hl-promo-q { padding: 20px 22px 16px; font: 800 28px/1.08 var(--bs); letter-spacing: .01em; text-wrap: balance; }
.hl-vs { position: relative; flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 250px; }
.hl-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 14px; background: linear-gradient(165deg, color-mix(in srgb, var(--tc) 72%, #000), color-mix(in srgb, var(--tc) 38%, #0B0D11)); text-align: center; }
.hl-tile .crest { position: absolute; inset: -12% -18%; background: center/contain no-repeat; opacity: .10; mix-blend-mode: luminosity; pointer-events: none; }
.hl-facewrap { position: relative; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: #2A2E37; box-shadow: 0 0 0 2px rgba(255, 255, 255, .28); }
.hl-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.hl-mono { position: absolute; inset: 0; display: grid; place-items: center; font: 800 34px var(--bs); color: #FFF; }
.hl-name { position: relative; font: 800 24px/1.05 var(--bs); letter-spacing: .01em; color: #FFF; }
.hl-team { position: relative; display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--sans); color: rgba(255, 255, 255, .78); }
.hl-tlogo { width: 18px; height: 18px; object-fit: contain; }
.hl-or { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--tl); box-shadow: 0 0 0 1px var(--ed); font: 800 16px var(--bs); color: var(--tx); z-index: 1; }
.hl-promo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; font: 500 13px var(--sans); color: var(--mu); }
.hl-promo-foot b { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: 999px; background: var(--aq); color: var(--on-aq); font: 700 14px var(--sans); }

/* warm up */
.wu { display: flex; flex-direction: column; padding: 18px 20px 20px; }
.wu-top { display: flex; align-items: center; justify-content: space-between; font: 600 12.5px var(--sans); color: var(--mu); }
.wu-tag { color: var(--tx2); }
.wu-q { margin: 12px 0 16px; font: 600 18px/1.3 var(--sans); color: var(--tx); text-wrap: pretty; }
.wu-choices { flex: 1; display: grid; grid-auto-rows: 1fr; gap: 8px; }
.wu-choice { display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%; padding: 8px 14px 8px 10px; text-align: left; background: var(--tl2); border: 1px solid transparent; border-radius: 10px; color: var(--tx); font: 500 14px/1.25 var(--sans); transition: border-color .16s ease; }
.wu-choice:hover { border-color: #4A505C; }
.wu-key { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--ed); font: 700 12px var(--sans); color: var(--tx2); }
.wu-choice.locked { cursor: default; }
.wu-choice.dim { opacity: .5; }
.wu-choice.correct { border-color: var(--win); }
.wu-choice.correct .wu-key { background: #1B7F47; color: #FFF; }
.wu-choice.wrong { border-color: var(--loss); }
.wu-choice.wrong .wu-key { background: #BF3F36; color: #FFF; }
.wu-foot { margin-top: auto; }
.wu-fact:not(:empty) { padding-top: 14px; }
.wu-fact { font: 400 13.5px/1.45 var(--sans); color: var(--tx2); }
.wu-fact b { color: var(--tx); font-weight: 600; }
.wu-next { margin-top: 12px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--tl2); color: var(--tx); font: 600 13.5px var(--sans); }
.wu-next:hover { background: var(--ed); }

/* next up */
.tv-next { margin-top: 32px; }
.tv-soon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tv-soon div { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px; background: var(--tl); border: 1px solid var(--ed); border-radius: 14px; font: 600 14.5px var(--sans); color: var(--tx2); }
.tv-soon svg { width: 20px; height: 20px; flex: none; color: var(--mu); }

@media (max-width: 1000px) {
  .nb .sr { margin-left: auto; width: 44px; padding: 0; justify-content: center; font-size: 0; }
  .tv-top { grid-template-columns: minmax(0, 1fr); }
  .hl-promo { min-height: 0; }
  .tv-soon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --col: calc(100% - 32px); }
  .nb nav { display: none; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .ph-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 250; display: flex; justify-content: space-around; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: #0B0D11; border-top: 1px solid #1F232B; }
  .ph-bar-i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1 1 0; min-width: 0; white-space: nowrap; font: 600 11px var(--sans); color: var(--mu); }
  .ph-bar-i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
  .ph-bar-i svg { width: 22px; height: 22px; display: block; }
  .ph-bar-i.is-on { color: #FFF; }
  .ph-bar-i.is-on::before { content: ''; position: absolute; top: -9px; left: 50%; width: 32px; height: 3px; border-radius: 0 0 3px 3px; transform: translateX(-50%); background: var(--aq); }
  .tv-main { padding-top: 20px; }
  .tv-main h1 { font-size: 36px; }
  .hl-promo-q { padding: 16px 16px 12px; font-size: 24px; }
  .hl-vs { min-height: 210px; }
  .hl-facewrap { width: 84px; height: 84px; }
  .hl-name { font-size: 20px; }
  .hl-promo-foot { padding: 12px 16px; }
  .wu { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }