@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap');

:root {
  --bg: #14061f;
  --bg2: #24093a;
  --ink: #fff8ef;
  --muted: #c9b6dc;
  --gold: #ffc94a;
  --pink: #ff4f8b;
  --panel: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .14);
  --c0: #e21b3c; --c1: #1368ce; --c2: #d89e00; --c3: #26890c;
  --c4: #864cbf; --c5: #0aa3a3; --c6: #e0558f; --c7: #5b6b7a;
  --ok: #2fd36b; --bad: #ff5b5b;
  --font: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 800px at 20% -10%, #4a0f6b 0%, transparent 60%),
              radial-gradient(900px 700px at 110% 110%, #5a0f3a 0%, transparent 60%), var(--bg);
  background-attachment: fixed;
  color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.big { font-size: clamp(28px, 6vw, 72px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }

.btn {
  border: 0; border-radius: 14px; padding: 14px 20px; font-size: 18px; font-weight: 700;
  background: var(--gold); color: #1a0a24; box-shadow: 0 4px 0 rgba(0,0,0,.35);
  transition: transform .06s ease;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn.ghost { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.sm { padding: 8px 12px; font-size: 14px; border-radius: 10px; }
.btn:disabled { opacity: .45; cursor: default; }

.opt-0 { background: var(--c0); } .opt-1 { background: var(--c1); } .opt-2 { background: var(--c2); } .opt-3 { background: var(--c3); }
.opt-4 { background: var(--c4); } .opt-5 { background: var(--c5); } .opt-6 { background: var(--c6); } .opt-7 { background: var(--c7); }
.shape { width: 1.1em; height: 1.1em; flex: none; fill: #fff; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }