/* base.css — reset, typography, header, layout primitives. PLAN.md 7.2, 7.5, 8.7. */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body { overflow-x: hidden; }   /* belt and braces: the page never scrolls sideways */

/* The side gutters honour the notch and the home indicator on phones that have
   them (index.html sets viewport-fit=cover, so the page runs under both).
   Everything full-bleed reads these, so the bar, the header and the action bars
   line up with the page at every width and in both orientations. --main-y is
   main's padding above and below, which a bar pinned to the foot runs over. */
:root {
  --gutter-l: max(var(--space-4), env(safe-area-inset-left));
  --gutter-r: max(var(--space-4), env(safe-area-inset-right));
  --main-y: var(--space-4);
}
@media (max-width: 600px) {
  :root {
    --gutter-l: max(var(--space-3), env(safe-area-inset-left));
    --gutter-r: max(var(--space-3), env(safe-area-inset-right));
    --main-y: var(--space-3);
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);   /* 7.2/7.4: 18-20px in Wild, 16-18px in Prime */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

[data-scene="arena"] body { background: var(--night); color: var(--spot); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 var(--space-3); }
h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(24px, 3vw, 32px); }

p { margin: 0 0 var(--space-3); }

a { color: inherit; }

button, .button {
  min-height: var(--tap);
  min-width: var(--tap);
  font: inherit;
  cursor: pointer;
}

/* Touch hygiene, so a press feels like an app and not a web page:
   no grey flash from iOS over a tapped card, no double-tap zoom on a button a
   child taps twice fast, and a press that answers instantly. */
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pressable { transition: transform .12s ease; }
.pressable:active { transform: scale(.985); }

/* 8.7: visible focus rings everywhere */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* `clip` not `hidden`: hidden would make main a scroll container and the pinned
   match bar would never stick. */
main {
  display: block;
  padding: var(--main-y) var(--gutter-r) var(--main-y) var(--gutter-l);
  max-width: var(--content-max); margin: 0 auto; overflow-x: clip;
}
main:focus { outline: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  display: inline-flex; align-items: center; min-height: var(--tap);
  background: var(--panel); padding: 0 var(--space-3);
  border: 1px solid var(--line); border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: var(--space-3); }

/* ---- header ----
   11.3: one row at every width. The wordmark, the arena's name (the way back to the
   fighters), then the tools: the Great calls count, the sound, and one ⋯ button that
   holds everything meant for the grown-up. 11.7: during a fight it is a ✕, the
   count and the sound. --header-h is its height (56px controls on a 1px rule, and
   2px more above and below on a phone), for a screen that fills the window under it. */
:root { --header-h: calc(var(--tap) + 1px); }
@media (max-width: 720px) { :root { --header-h: calc(var(--tap) + 5px); } }
.app-header {
  display: flex; align-items: center; gap: var(--space-2) var(--space-3);
  padding: 0 var(--gutter-r) 0 var(--gutter-l);
  min-height: var(--tap);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  max-width: 100%;
}
.app-header[hidden] { display: none; }
.app-header .wordmark {
  font-family: var(--font-display); font-size: 22px; text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 4px; margin-left: -4px; white-space: nowrap;
}
.app-header .arena-name {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap); padding: 0 6px;
  color: var(--muted); font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px;
  position: relative; isolation: isolate; transition: color .16s ease;
}
/* The header's icon buttons: the sound, the ⋯, and the ✕ in a fight. Owner's note,
   2026-09-28: as 56px ringed circles they filled the bar from edge to edge. Each keeps
   its 56px tap target (7.2, 11.8), but only the icon shows: no ring, no fill. A soft
   38px disc comes up behind it under the pointer, while it is pressed, and while the
   menu it opened is open, 9px clear of the bar's top and bottom; a keyboard's focus
   ring goes round that disc. The row's two ends reach --pull into the gutter, so the
   icons, not their invisible targets, line up with the page's edges. */
.app-header { --pull: 12px; }
.header-tools { margin-left: auto; margin-right: calc(var(--pull) * -1); display: flex; align-items: center; }
.header-close { text-decoration: none; margin-left: calc(var(--pull) * -1); }
.app-header .icon-toggle { position: relative; isolation: isolate; border: 0; background: none; }
.app-header .icon-toggle::before,
.app-header .icon-toggle::after {
  content: ''; position: absolute; inset: 9px; border-radius: 50%; pointer-events: none;
}
.app-header .icon-toggle::before {
  z-index: -1; background: currentColor; opacity: 0; transform: scale(.72);
  transition: opacity .16s ease, transform .16s ease;
}
.app-header .icon-toggle .icon { transition: transform .12s ease; }
.app-header .icon-toggle[aria-expanded="true"]::before { opacity: .09; transform: none; }
.app-header .icon-toggle:active::before { opacity: .16; transform: scale(.9); }
.app-header .icon-toggle:active .icon { transform: scale(.9); }
.app-header .icon-toggle:focus-visible { outline: none; }
.app-header .icon-toggle:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 2px; }
/* the arena's name answers the pointer the same way, with a pill round the word */
.app-header .arena-name::before {
  content: ''; position: absolute; inset: 11px 0; z-index: -1; border-radius: 999px;
  background: currentColor; opacity: 0; transition: opacity .16s ease; pointer-events: none;
}
.great-calls {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; color: var(--muted); white-space: nowrap;
}
.great-calls .icon { color: var(--check); }
.great-calls strong { color: var(--ink); }

/* the ⋯ panel: the grown-up layer, one tap down and never deeper (11.2 rule 5).
   It sits over the pinned match bar, which is z-index 12. */
.more { position: relative; }
/* right: --pull puts the panel's edge back on the page's, where the ⋯ reaches past it */
.more-panel {
  position: absolute; top: calc(100% + 6px); right: var(--pull, 0px); z-index: 20;
  min-width: 250px; padding: var(--space-2);
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(31, 27, 22, .14);
  display: grid; gap: 2px;
}
.more-panel[hidden] { display: none; }
.more-label {
  margin: 0; padding: 6px 12px 2px; font-size: 13px; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase;
}
.more-panel a, .more-panel button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--tap); width: 100%; padding: 0 12px;
  border: 0; border-radius: 12px; background: none; color: inherit;
  font: inherit; font-size: 17px; text-align: left; text-decoration: none;
}
.more-value { color: var(--muted); font-size: 15px; }
@media (hover: hover) {
  .more-panel a:hover, .more-panel button:hover { background: var(--cream); }
  .app-header .icon-toggle:hover::before { opacity: .09; transform: none; }
  .app-header .arena-name:hover { color: var(--ink); }
  .app-header .arena-name:hover::before { opacity: .07; }
}

/* 7.1 / 7.8: the header turns the lights down with the rest of the arena. Left
   cream, its text inherited the spotlight colour and vanished (1.25:1). */
[data-scene="arena"] .app-header {
  background: var(--night); color: var(--spot);
  border-color: rgba(243, 227, 192, .16);
}
[data-scene="arena"] .great-calls { color: rgba(243, 227, 192, .8); }
[data-scene="arena"] .great-calls strong { color: var(--spot); }
[data-scene="arena"] .icon-toggle {
  background: transparent; color: var(--spot); border-color: rgba(243, 227, 192, .38);
}
[data-scene="arena"] .icon-toggle[aria-pressed="true"] { color: var(--spot); opacity: .55; }
[data-scene="arena"] .app-header .icon-toggle:focus-visible::after { outline-color: var(--spot); }

@media (max-width: 720px) {
  .app-header { gap: 0 var(--space-2); padding-top: 2px; padding-bottom: 2px; }
  .app-header .wordmark { font-size: 19px; }
  .great-calls .gc-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
/* Under 375px the bar had no room left: it ran past a 320px screen and the page scrolled
   sideways, and it filled a 360px one to the last pixel once the Great calls count had
   two digits. The 56px targets cannot shrink, so the wordmark, the arena's name and the
   spacing do, and the ⋯ reaches the whole gutter. */
@media (max-width: 374px) {
  .app-header { --pull: var(--space-3); column-gap: 4px; }
  .app-header .wordmark { font-size: 16px; }
  .app-header .arena-name { font-size: 14px; letter-spacing: .04em; padding: 0 4px; }
  .great-calls { gap: 3px; }
}
@media (max-width: 339px) {
  .app-header .wordmark { font-size: 14px; }
}

/* 7.2 / 8.7: respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}