@font-face {
  font-family: Unbounded;
  src: url("/fonts/unbounded-cyrillic-500.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Unbounded;
  src: url("/fonts/unbounded-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Commissioner;
  src: url("/fonts/commissioner-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Commissioner;
  src: url("/fonts/commissioner-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #100e0c;
  --paper: #f3efe8;
  --red: #ff3b1f;
  --line: #2c2824;
  --muted: #9c948b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255, 59, 31, 0.28), transparent 46%),
    linear-gradient(180deg, #1a1613 0%, var(--ink) 42%);
  font-family: Commissioner, sans-serif;
}

.stage {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 72px;
}

.brand {
  margin: 8vh 0 0;
  font-family: Unbounded, sans-serif;
  font-size: clamp(64px, 12vw, 112px);
  line-height: 0.86;
  letter-spacing: -0.045em;
}

.lead {
  margin: 16px 0 0;
  max-width: 16em;
  font-size: 20px;
  line-height: 1.35;
  color: var(--muted);
}

.kicker {
  margin: 28px 0 10px;
  font-family: Unbounded, sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.name {
  display: grid;
  gap: 8px;
  margin-top: 36px;
  max-width: 280px;
  font-family: Unbounded, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

input {
  font: 22px Commissioner, sans-serif;
  color: var(--paper);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--line);
  padding: 8px 0;
  width: 100%;
}

input:focus { outline: none; border-bottom-color: var(--red); }

.weapons, .skills {
  display: grid;
  gap: 8px;
}

.weapons { grid-template-columns: repeat(4, 1fr); }
.skills { grid-template-columns: repeat(3, 1fr); }

.weapons button, .skills button, #start, #next {
  font-family: Unbounded, sans-serif;
  text-align: left;
  color: var(--paper);
  background: #1a1714;
  border: 1px solid var(--line);
  cursor: pointer;
}

.weapons button, .skills button { padding: 16px 14px 14px; }

.weapons button small, .skills button small {
  display: block;
  margin-top: 6px;
  font-family: Commissioner, sans-serif;
  font-size: 14px;
  color: var(--muted);
}

.weapons button[aria-pressed="true"],
.skills button[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: #1a0906;
  transform: translateY(-2px);
}

.weapons button[aria-pressed="true"] small,
.skills button[aria-pressed="true"] small { color: #3a120c; }

#start, #next {
  margin-top: 28px;
  padding: 16px 22px;
  font-size: 18px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
}

#start:disabled { opacity: 0.35; cursor: not-allowed; }

.matchup {
  margin-top: 28px;
  font-family: Unbounded, sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.04em;
}

.bars p {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 6px;
  font-family: Unbounded, sans-serif;
}

.track {
  height: 10px;
  background: #2a2521;
}

.track span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--red);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.track.foe span { background: var(--paper); }

.round {
  margin-top: 22px;
  min-height: 88px;
}

.round h2, .verdict {
  margin: 0 0 8px;
  font-family: Unbounded, sans-serif;
  font-weight: 500;
  font-size: 22px;
}

.round p { margin: 6px 0; color: var(--muted); }
.verdict { font-size: 40px; color: var(--paper); letter-spacing: -0.04em; }

@media (max-width: 720px) {
  .weapons, .skills { grid-template-columns: 1fr 1fr; }
  .brand { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .track span, .weapons button, .skills button { transition: none; transform: none; }
}