/* BEAT WARS tokens — fight-night broadcast × club lighting. */

@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap;
  src: url('/shared/fonts/anton-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap;
  src: url('/shared/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap;
  src: url('/shared/fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap;
  src: url('/shared/fonts/barlow-cond-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap;
  src: url('/shared/fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap;
  src: url('/shared/fonts/plex-mono-600.woff2') format('woff2'); }

:root {
  --ink: #0B0C12;
  --haze: #171923;
  --chalk: #F2F0E9;
  --steel: #8B93A7;
  --amber: #FFB020;
  --accent: #FF3D81; /* replaced at runtime from themes.preset_json — never hardcode elsewhere */

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --ui: 'Barlow', system-ui, sans-serif;
  --ui-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --data: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; } /* keep the hidden attr winning over display:flex rules */
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.display { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.mono { font-family: var(--data); font-variant-numeric: tabular-nums; }
.cond { font-family: var(--ui-cond); text-transform: uppercase; letter-spacing: 0.08em; }
.steel { color: var(--steel); }
.amber { color: var(--amber); }

.card {
  background: var(--haze);
  border: 1px solid rgba(139, 147, 167, 0.14);
  border-radius: 10px;
  padding: 22px;
}

.btn {
  font-family: var(--ui-cond);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--chalk);
  background: transparent;
  border: 1px solid rgba(139, 147, 167, 0.5);
  border-radius: 6px;
  padding: 12px 22px;
  cursor: pointer;
}
.btn:hover { border-color: var(--chalk); }
.btn:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.btn:disabled { opacity: 0.35; cursor: default; }

.hairline { border: 0; border-top: 1px solid rgba(139, 147, 167, 0.16); margin: 16px 0; }

/* Mask sigil: the beat's gem — rendered stone above a small name tag. Sized by
   the context's font-size (image ≈ 2.7em). */
.sigil {
  display: inline-flex; flex-direction: column; align-items: center; gap: .3em;
  font-size: inherit;
  line-height: 1;
}
.sigil img { width: 2.7em; height: 2.7em; object-fit: contain; }
.sigil b {
  font-family: var(--ui-cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; font-size: .52em; color: var(--steel); white-space: nowrap;
}
.sigil.lit img { filter: drop-shadow(0 0 14px rgba(255,255,255,.35)); }
.sigil.lit b { color: var(--chalk); }
.sigil.dead { opacity: 0.4; }

input[type='text'] {
  font-family: var(--ui); font-size: 18px;
  color: var(--chalk); background: var(--ink);
  border: 1px solid var(--steel); border-radius: 4px; padding: 12px 14px; width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}