/* Sound Clash base (M13): colour tokens, fonts, reset, the canvas stack, safe areas and the touch rules (REQ-042, REQ-150).
   The look is a Jamaican dance flyer (docs/UI-PLAN.md, look A, 2026-10-30): day-glo on black, Anton for display, Archivo for
   text. Every colour is a token; text on a surface is at least 4.5:1. The fonts are OFL files served from fonts/ (REQ-194 as
   amended: same origin, no external request). js/render/theme.js holds the same palette for the canvas. */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/anton-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo-500.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/archivo-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/archivo-800.woff2") format("woff2"); }
:root {
  color-scheme: dark;
  /* the flyer palette */
  --black: #0d0b10;
  --cream: #fff6e0;
  --yellow: #ffe600;
  --red: #ff3b30;
  --green: #19e36b;
  --pink: #ff2e88;
  --blue: #2ea8ff;
  /* roles (older names kept so every screen takes the palette) */
  --ink: #0d0b10;
  --stage: #141118;
  --stage-2: #1f1a24;
  --panel: #1a1620;
  --panel-edge: #0d0b10;
  --paper: #fff6e0;
  --text: #ffffff;
  --text-dim: #d9d2c4;
  --gold: #ffe600;
  --gold-ink: #0d0b10;
  --danger: #ff9c94;
  --focus: #ffffff;
  /* flyer pieces: hard offset shadow, halftone dots, the tilt of a banner */
  --shadow-hard: 5px 5px 0 var(--black);
  --halftone: radial-gradient(rgba(255, 255, 255, 0.08) 1.1px, transparent 1.6px) 0 0 / 7px 7px;
  --tilt: -2deg;
  --display: "Anton", Impact, "Arial Narrow Bold", "Helvetica Neue", Arial, sans-serif;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hand: var(--font);
  --ui: 1;
  --gutter: 16px;
}
:root[data-large-text="true"] { --ui: 1.25; }
:root[data-contrast="high"] {
  --stage: #000000; --panel: #000000; --panel-edge: #ffffff; --text: #ffffff; --text-dim: #ffffff; --gold: #ffe14d; --danger: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%; width: 100%; overflow: hidden; background: var(--stage); color: var(--text);
  font-family: var(--font); font-size: calc(16px * var(--ui)); line-height: 1.35;
  /* no scroll, no pinch zoom, no double-tap zoom, no text selection, no iOS long-press callout, no rubber band (REQ-042) */
  touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body { position: fixed; inset: 0; height: 100dvh; }
img, canvas, button { -webkit-touch-callout: none; -webkit-user-drag: none; }
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; font: inherit; }

/* the safe-area probe M04's canvas host reads (DESIGN 11.1) */
#safe-probe {
  position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* the stack, bottom to top: canvas, HUD layer (M11, z 5), screens (10), overlays (20) */
#stage { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 0; touch-action: none; background: var(--stage); }
#screens { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#overlays { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: max(var(--gutter), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) max(var(--gutter), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}
/* a play screen is only a host: the canvas and HUD underneath take the touches */
.screen[data-route="night"], .screen[data-route="freeplay"] { pointer-events: none; overflow: hidden; touch-action: none; padding: 0; }
.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; overflow-y: auto;
  padding: max(var(--gutter), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) max(var(--gutter), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: rgba(18, 11, 34, 0.82); touch-action: pan-y; overscroll-behavior: none;
}
.hud-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the loading splash that stays until main.js has started, and the page for a browser that cannot run modules */
#boot-fallback { z-index: 30; justify-content: center; background: var(--stage); }
#boot-fallback .boot-note { opacity: 0; animation: boot-note 0.4s ease 8s forwards; color: var(--text-dim); }
@keyframes boot-note { to { opacity: 1; } }

:focus { outline: none; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
:root[data-reduced-motion="on"] *, :root[data-reduced-motion="on"] *::before, :root[data-reduced-motion="on"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
}