/* PULSE shared look: faces, colour tokens (true black and light), type roles,
   scoreboard digits, and the shell every page shares (top bar, tab bar,
   buttons, footer). Pages add their own layout on top.

   Theme: the phone or computer setting decides, unless the toggle saved a
   choice (localStorage pulse_theme -> html[data-theme]). A rule that differs
   by theme is written for both ways in: :root[data-theme="dark"] X and
   @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) X }.
   The stage pieces (name sign wall, LED boards, share card) stay dark in both.

   Faces, all SIL OFL 1.1 (licenses in fonts/):
     Anybody             display: headings, answers, card titles (wdth 62-125, wght 600-900)
     Anybody Black It.   records and trophies
     Atkinson Hyperlegible Next   body, labels, captions (wght 400-700)
     Pulse Scoreboard    big numbers, 7-segment digits with the unlit segments drawn */

@font-face { font-family: "Anybody"; src: url("/static/47af62dca64a/fonts/anybody.woff2") format("woff2-variations"), url("/static/47af62dca64a/fonts/anybody.woff2") format("woff2");
  font-weight: 600 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Anybody"; src: url("/static/997cbd1fbf63/fonts/anybody-black-italic.woff2") format("woff2");
  font-weight: 900; font-stretch: 100%; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/static/f42e0d5b36cb/fonts/atkinson-next.woff2") format("woff2-variations"), url("/static/f42e0d5b36cb/fonts/atkinson-next.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Pulse Scoreboard"; src: url("/static/7309c29ed27f/fonts/pulse-scoreboard.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block; }
/* Pinned widths of the one Anybody file for the trading cards and tickets,
   so canvas measuring matches what gets drawn. */
@font-face { font-family: "Anybody Cond"; src: url("/static/47af62dca64a/fonts/anybody.woff2") format("woff2");
  font-weight: 600 900; font-stretch: 72%; font-display: block; }
@font-face { font-family: "Anybody Semi"; src: url("/static/47af62dca64a/fonts/anybody.woff2") format("woff2");
  font-weight: 600 900; font-stretch: 84%; font-display: block; }

/* Unlit segments, tinted like the lens of a lit module. */
@font-palette-values --sb-amber  { font-family: "Pulse Scoreboard"; override-colors: 0 rgb(255 178 28 / .06); }
@font-palette-values --sb-red    { font-family: "Pulse Scoreboard"; override-colors: 0 rgb(255 59 31 / .11); }
@font-palette-values --sb-orange { font-family: "Pulse Scoreboard"; override-colors: 0 rgb(255 155 94 / .06); }
@font-palette-values --sb-cyan   { font-family: "Pulse Scoreboard"; override-colors: 0 rgb(79 216 245 / .09); }
@font-palette-values --sb-gold   { font-family: "Pulse Scoreboard"; override-colors: 0 rgb(255 210 94 / .06); }
@font-palette-values --sb-violet { font-family: "Pulse Scoreboard"; override-colors: 0 rgb(196 181 253 / .06); }
@font-palette-values --sb-pink   { font-family: "Pulse Scoreboard"; override-colors: 0 rgb(255 122 184 / .10); }
@font-palette-values --sb-white  { font-family: "Pulse Scoreboard"; override-colors: 0 rgb(255 255 255 / .08); }
@font-palette-values --sb-lcd    { font-family: "Pulse Scoreboard"; override-colors: 0 rgb(27 16 54 / .075); }
@font-palette-values --sb-led    { font-family: "Pulse Scoreboard"; override-colors: 0 rgb(255 190 80 / .055); }

/* ------------------------------------------------------------ tokens */
:root {
  --f-display: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-score: "Pulse Scoreboard", "Anybody", ui-monospace, monospace;
  --t-answer: clamp(32px, 2.2vw + 23px, 52px);
  --t-section: clamp(22px, .3vw + 21px, 26px);
  --t-card: clamp(18px, .1vw + 17.6px, 19px);
  --t-body: clamp(16px, .1vw + 15.6px, 17px);
  --t-label: 14.5px;
  --t-caption: 13px;
  --t-score-hero: clamp(56px, 3.8vw + 41px, 96px);
  --t-score-tile: clamp(34px, 1.4vw + 28px, 52px);
  /* the stage: dark in both themes */
  --stage: #08060D; --stage-ink: #FFFFFF; --stage-2: #EEEAF8; --stage-muted: #CFC8E6; --stage-line: rgba(255,255,255,.14);
  /* light */
  --bg: #FFF7EF; --card: #FFFFFF; --tile: #FFF0E3; --raise: #FBE6D4;
  --ink: #1B1036; --ink-2: #3A2C5E; --muted: #5C4F7E;
  --line: rgba(40,20,70,.12); --line-2: rgba(40,20,70,.22);
  --c-shows: #F25A00; --c-cat: #0A9BC0; --c-win: #B07800; --c-time: #7C3AED; --c-rival: #E8197A;
  --t-shows: #B8460E; --t-cat: #0B6E8A; --t-win: #8C5A00; --t-time: #6D28D9; --t-rival: #C0156A;
  --up: #0A7C43; --down: #C21845; --live: #C21845; --live-ink: #FFFFFF;
  --cta: #C2410C; --cta-ink: #FFFFFF; --cta-hover: #A9380A;
  --link: #B8460E;
  --focus: #B8460E;
  --hover: rgba(40,20,70,.05); --scrim: rgba(255,247,239,.84);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #000000; --card: #0D0C12; --tile: #18151F; --raise: #221E2B;
  --ink: #FFFFFF; --ink-2: #EEEAF8; --muted: #B6B0CC;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.22);
  --c-shows: #E25A12; --c-cat: #1297B8; --c-win: #C08600; --c-time: #8B62F0; --c-rival: #E8358A;
  --t-shows: #FF9B5E; --t-cat: #4FD8F5; --t-win: #FFD25E; --t-time: #C4B5FD; --t-rival: #FF7AB8;
  --up: #20D67B; --down: #FF5C7A; --live: #FF5C7A; --live-ink: #1A0008;
  --cta: #FF7A2E; --cta-ink: #160700; --cta-hover: #FF9455;
  --link: #FF9B5E;
  --focus: #FF9B5E;
  --hover: rgba(255,255,255,.06); --scrim: rgba(0,0,0,.82);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --card: #0D0C12; --tile: #18151F; --raise: #221E2B;
    --ink: #FFFFFF; --ink-2: #EEEAF8; --muted: #B6B0CC;
    --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.22);
    --c-shows: #E25A12; --c-cat: #1297B8; --c-win: #C08600; --c-time: #8B62F0; --c-rival: #E8358A;
    --t-shows: #FF9B5E; --t-cat: #4FD8F5; --t-win: #FFD25E; --t-time: #C4B5FD; --t-rival: #FF7AB8;
    --up: #20D67B; --down: #FF5C7A; --live: #FF5C7A; --live-ink: #1A0008;
    --cta: #FF7A2E; --cta-ink: #160700; --cta-hover: #FF9455;
    --link: #FF9B5E;
    --focus: #FF9B5E;
    --hover: rgba(255,255,255,.06); --scrim: rgba(0,0,0,.82);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------ type roles */
.t-answer  { font: 900 var(--t-answer)/1.02 var(--f-display); font-stretch: 100%; letter-spacing: -.01em; }
.t-section { font: 800 var(--t-section)/1.1 var(--f-display); font-stretch: 92%; letter-spacing: -.005em; }
.t-card    { font: 800 var(--t-card)/1.2 var(--f-display); font-stretch: 96%; }
.t-record  { font: italic 900 1em/1 var(--f-display); }
.t-fit     { font-stretch: var(--fit, 100%); }
.t-body    { font: 400 var(--t-body)/1.5 var(--f-body); }
.t-strong  { font-weight: 700; }
.t-label   { font: 600 var(--t-label)/1.35 var(--f-body); }
.t-caption { font: 500 var(--t-caption)/1.4 var(--f-body); }
.t-handle  { font-weight: 700; font-variant-ligatures: none; }
.t-num { font-family: var(--f-display); font-weight: 800; font-variant-numeric: tabular-nums lining-nums; font-stretch: 92%; }

/* Scoreboard numbers: <span class="sb" data-c="amber">147,646</span>.
   One run of text, so copy and screen readers get the plain number. Digits,
   comma, period, colon and hyphen are in the font; #, %, x and words go in
   .sb-unit. 28px and up; below that use .t-num. The glow comes from a
   drop-shadow of the lit pixels, never from the unlit segments. */
.sb {
  font-family: var(--f-score); font-weight: 700; font-style: normal;
  font-feature-settings: "ss02"; font-variant-ligatures: none;
  line-height: 1; letter-spacing: .03em; white-space: nowrap;
  font-palette: --sb-white; color: #FFFFFF;
  filter: drop-shadow(0 0 .03em var(--sb-glow, rgba(255,255,255,.5))) drop-shadow(0 0 .14em var(--sb-glow2, rgba(255,255,255,.2)));
}
.sb[data-c="amber"]  { color: #FFB21C; font-palette: --sb-amber;  --sb-glow: rgb(255 160 20 / .6);  --sb-glow2: rgb(255 120 0 / .32); }
.sb[data-c="red"]    { color: #FF3B1F; font-palette: --sb-red;    --sb-glow: rgb(255 59 31 / .6);   --sb-glow2: rgb(255 30 60 / .32); }
.sb[data-c="orange"] { color: #FF9B5E; font-palette: --sb-orange; --sb-glow: rgb(255 120 50 / .55); --sb-glow2: rgb(255 80 20 / .3); }
.sb[data-c="cyan"]   { color: #4FD8F5; font-palette: --sb-cyan;   --sb-glow: rgb(46 211 242 / .55); --sb-glow2: rgb(20 140 255 / .3); }
.sb[data-c="gold"]   { color: #FFD25E; font-palette: --sb-gold;   --sb-glow: rgb(255 197 49 / .55); --sb-glow2: rgb(255 150 0 / .3); }
.sb[data-c="violet"] { color: #C4B5FD; font-palette: --sb-violet; --sb-glow: rgb(139 98 240 / .6);  --sb-glow2: rgb(124 58 237 / .35); }
.sb[data-c="pink"]   { color: #FF7AB8; font-palette: --sb-pink;   --sb-glow: rgb(255 79 160 / .55); --sb-glow2: rgb(232 25 122 / .3); }
.sb-unit {
  font: 800 .46em/1 var(--f-display); font-stretch: 88%; letter-spacing: 0;
  vertical-align: .82em; margin: 0 .05em 0 0; color: inherit;
}
.sb-unit.after { margin-left: .14em; }
/* The housing: a dark panel with a recessed face, dark in both themes. */
.sb-panel {
  display: inline-flex; align-items: flex-end; gap: .2em;
  background: #07060B; border-radius: 12px; padding: .16em .22em .14em;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), inset 0 .06em .25em rgb(0 0 0 / .9), 0 1px 0 rgb(255 255 255 / .04);
}
/* LED lamps, hero sizes only (56px and up). */
.sb-led { display: inline-block; filter: drop-shadow(0 0 .035em var(--led-glow, rgb(255 170 40 / .95))) drop-shadow(0 0 .18em var(--led-glow2, rgb(255 110 0 / .5))); }
.sb-led > .sb {
  display: inline-block; filter: none; font-palette: --sb-led; color: var(--led, #FFC247);
  padding-bottom: .2em; margin-bottom: -.2em;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 47%, transparent 53%) 0 0 / .068em .068em;
          mask: radial-gradient(circle at 50% 50%, #000 0 47%, transparent 53%) 0 0 / .068em .068em;
}
@media (max-width: 699px) {
  .sb-led { filter: none; }
  .sb-led > .sb { -webkit-mask: none; mask: none; font-palette: --sb-amber; filter: drop-shadow(0 0 .03em rgb(255 160 20 / .6)) drop-shadow(0 0 .14em rgb(255 120 0 / .32)); }
}
/* Daylight: a bare .sb reads as an LCD, unless it sits in a dark housing
   (.sb-panel, .sb-led, or any container marked .sb-dark). */
:root[data-theme="light"] .sb:not(:is(.sb-dark, .sb-panel, .sb-led) .sb) { color: var(--sb-ink, #1B1036); font-palette: --sb-lcd; filter: none; }
:root[data-theme="light"] .sb[data-c="amber"], :root[data-theme="light"] .sb[data-c="gold"] { --sb-ink: #8C5A00; }
:root[data-theme="light"] .sb[data-c="red"]    { --sb-ink: #C21845; }
:root[data-theme="light"] .sb[data-c="orange"] { --sb-ink: #B8460E; }
:root[data-theme="light"] .sb[data-c="cyan"]   { --sb-ink: #0B6E8A; }
:root[data-theme="light"] .sb[data-c="violet"] { --sb-ink: #6D28D9; }
:root[data-theme="light"] .sb[data-c="pink"]   { --sb-ink: #C0156A; }
@media not all and (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]) .sb:not(:is(.sb-dark, .sb-panel, .sb-led) .sb) { color: var(--sb-ink, #1B1036); font-palette: --sb-lcd; filter: none; }
  :root:not([data-theme="dark"]) .sb[data-c="amber"], :root:not([data-theme="dark"]) .sb[data-c="gold"] { --sb-ink: #8C5A00; }
  :root:not([data-theme="dark"]) .sb[data-c="red"]    { --sb-ink: #C21845; }
  :root:not([data-theme="dark"]) .sb[data-c="orange"] { --sb-ink: #B8460E; }
  :root:not([data-theme="dark"]) .sb[data-c="cyan"]   { --sb-ink: #0B6E8A; }
  :root:not([data-theme="dark"]) .sb[data-c="violet"] { --sb-ink: #6D28D9; }
  :root:not([data-theme="dark"]) .sb[data-c="pink"]   { --sb-ink: #C0156A; }
}

/* ------------------------------------------------------------ the wordmark */
.wm { display: block; width: 100%; height: auto; }
.wm .wm-pulse { fill: var(--c-shows); }
.wm .wm-word { fill: var(--ink); }
.ps-mark { display: block; flex: none; width: 118px; line-height: 0; color: var(--ink); border-radius: 6px; }
@media (max-width: 899px) { .ps-mark { width: 96px; } }
@media (max-width: 359px) { .ps-mark { width: 84px; } }

/* ------------------------------------------------------------ buttons */
.ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px;
  border-radius: 12px; font: 700 16px/1.1 var(--f-body); text-decoration: none; cursor: pointer; border: 0; white-space: nowrap; }
.ps-btn:hover { text-decoration: none; }
.ps-btn.primary { background: var(--cta); color: var(--cta-ink); }
.ps-btn.primary:hover { background: var(--cta-hover); }
.ps-btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ps-btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.ps-btn.small { min-height: 44px; padding: 0 16px; font-size: 15px; }

/* ------------------------------------------------------------ the footer */
.ps-foot { margin-top: 64px; padding: 28px 0 40px; border-top: 1px solid var(--line); display: grid; gap: 8px;
  color: var(--muted); font: 500 var(--t-caption)/1.5 var(--f-body); }
.ps-foot a { color: var(--ink-2); font: 600 15px/1.2 var(--f-body); text-decoration: none; }
.ps-foot a:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------------ focus, motion */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .neon-on svg { animation: neon-on 1.1s steps(1, end) 1 both; }
  @keyframes neon-on { 0% { opacity: .15 } 12% { opacity: 1 } 18% { opacity: .35 } 26% { opacity: 1 } 31% { opacity: .6 } 36%, 100% { opacity: 1 } }
}