@font-face { font-family: "Anton"; src: url("/fonts/anton-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Marker"; src: url("/fonts/permanent-marker-latin-400-normal.woff2") format("woff2"); font-display: swap; }

:root {
  --black: #0a0807;
  --char: #1a1614;
  --char2: #26201c;
  --red: #e0261c;
  --orange: #ff7a1a;
  --yellow: #ffd23a;
  --gold: #d8a23a;
  --gold2: #f3cf72;
  --green: #8cff2a;
  --cream: #f7ead0;
  --parch: #f1dfb6;
  --ink: #fff6e6;
  --muted: #c9b79a;
  --display: "Anton", Impact, "Arial Narrow Bold", "Helvetica Neue", sans-serif;
  --marker: "Marker", "Comic Sans MS", cursive;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--black); color: var(--ink); font-family: var(--body); }
body { min-height: 100vh; }
button { font: inherit; color: inherit; cursor: pointer; }
.display { font-family: var(--display); letter-spacing: .02em; text-transform: uppercase; }
.marker { font-family: var(--marker); }

/* embers and flames used behind every screen */
.fire-bg { position: fixed; inset: 0; z-index: -2; background:
  radial-gradient(120% 70% at 50% 110%, #ff5a0f 0%, #b01a0a 28%, #3a0d08 55%, transparent 75%),
  linear-gradient(#0a0807, #140d0a 60%, #240d08); }
.fire-bg::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(40% 30% at 20% 100%, rgba(255,160,30,.55), transparent 70%),
  radial-gradient(35% 28% at 80% 100%, rgba(255,90,20,.55), transparent 70%),
  radial-gradient(30% 24% at 50% 105%, rgba(255,210,58,.5), transparent 70%);
  animation: flicker 3.2s ease-in-out infinite alternate; }
@keyframes flicker { 0% { opacity: .75; transform: translateY(0) scaleY(1); } 50% { opacity: 1; transform: translateY(-1.2%) scaleY(1.06); } 100% { opacity: .85; transform: translateY(.6%) scaleY(.98); } }
.reduce .fire-bg::after { animation: none; }

.gold-frame { border: 3px solid var(--gold); border-radius: 14px; box-shadow: 0 0 0 3px #3b2408 inset, 0 0 0 1px #000, 0 10px 30px rgba(0,0,0,.6); background: linear-gradient(#17110e, #0d0a08); }
.parchment { background: linear-gradient(#f6e6bd, #e7cf98); color: #3a1f08; border: 2px solid #8a5a1a; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.5); }

.btn { border: 0; border-radius: 12px; padding: 14px 18px; font-family: var(--display); font-size: 20px; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(#ff8a1a, #e0261c); color: #fff; box-shadow: 0 4px 0 #6d0f08, 0 8px 18px rgba(0,0,0,.45); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #6d0f08; }
.btn.gold { background: linear-gradient(#f3cf72, #c8902a); color: #2a1604; box-shadow: 0 4px 0 #6b4510, 0 8px 18px rgba(0,0,0,.45); }
.btn.ghost { background: #241c18; border: 2px solid var(--gold); box-shadow: none; color: var(--gold2); }
.btn.green { background: linear-gradient(#b9ff4a, #5fc20a); color: #10200a; box-shadow: 0 4px 0 #2d5d05, 0 8px 18px rgba(0,0,0,.45); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pill.contender { background: var(--red); color: #fff; }
.pill.spectator { background: #3a332e; color: var(--gold2); }
.pill.out { background: #000; color: #ff8a80; border: 1px solid #5a1a14; }

.heat { height: 14px; border-radius: 99px; background: #000; border: 2px solid #3b2408; overflow: hidden; }
.heat > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd23a, #ff7a1a 45%, #e0261c 80%, #8cff2a); transition: width .8s cubic-bezier(.65,0,.35,1); }

.hazard { background: repeating-linear-gradient(-45deg, #ffd23a 0 22px, #111 22px 44px); }
@media (prefers-reduced-motion: reduce) { .fire-bg::after { animation: none; } }