:root {
  --red: #e10600;
  --red-dark: #8f0400;
  --black: #0b0b0c;
  --ink: #f4f5f6;
  --muted: #9aa3ad;
  --steel: linear-gradient(135deg, #f4f6f8 0%, #9aa3ad 35%, #e9edf1 50%, #6b7480 70%, #c9ced6 100%);
  --o0: #d7141a; --o1: #e0a100; --o2: #4a5866; --o3: #c9ced6;
  --o0-ink: #fff; --o1-ink: #1a1200; --o2-ink: #fff; --o3-ink: #111;
  --good: #1fae5b; --bad: #d7141a;
  --font: 'Oswald', 'Bebas Neue', Impact, 'Arial Narrow Bold', sans-serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 700px at 50% -10%, #3a0402 0%, var(--black) 60%) fixed, var(--black);
  color: var(--ink);
  font-family: var(--text);
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, .display { font-family: var(--font); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.steel-text { background: var(--steel); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; border: 0; }
.btn {
  background: var(--red); color: #fff; font-family: var(--font); text-transform: uppercase; letter-spacing: .04em;
  padding: .7em 1.4em; border-radius: 10px; font-size: 1.15rem; box-shadow: 0 4px 0 var(--red-dark);
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--red-dark); }
.btn.ghost { background: #1d1f22; box-shadow: 0 4px 0 #000; }
.badge { display: inline-block; font-family: var(--font); padding: .15em .6em; border-radius: 6px; letter-spacing: .06em; }
.badge.double { background: var(--steel); color: #111; }
.badge.trap { background: #ffb000; color: #111; }
.opt { display: flex; align-items: center; gap: .6em; border-radius: 12px; font-weight: 700; }
.opt svg { flex: 0 0 auto; width: 1.4em; height: 1.4em; }
.opt.o0 { background: var(--o0); color: var(--o0-ink); }
.opt.o1 { background: var(--o1); color: var(--o1-ink); }
.opt.o2 { background: var(--o2); color: var(--o2-ink); }
.opt.o3 { background: var(--o3); color: var(--o3-ink); }
canvas.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }