:root {
  color-scheme: dark;
  --bg: #100b22;
  --card: rgba(255,255,255,.075);
  --text: #fff9ec;
  --muted: #c9bfdc;
  --gold: #ffc84a;
  --orange: #ff7b32;
  --pink: #ef4e91;
  --purple: #7d56dc;
  --blue: #3488df;
  --cyan: #34c5c9;
  --green: #62ba69;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(238,85,142,.38), transparent 38%),
    radial-gradient(circle at 12% 40%, rgba(125,86,220,.22), transparent 30%),
    linear-gradient(160deg, #21133d 0%, var(--bg) 55%, #0d1729 100%);
}
main { width: min(100%, 520px); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom)); text-align: center; }
.preview { background: #ffe47a; color: #2b2100; font-size: 11px; font-weight: 900; letter-spacing: .08em; border-radius: 999px; padding: 7px 12px; margin: 0 auto 14px; width: fit-content; }
header .eyebrow { color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: .18em; }
h1 { margin: 4px 0 3px; font-family: Impact, Haettenschweiler, "Arial Black", sans-serif; font-size: clamp(38px, 10vw, 56px); line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: #fff8d3; text-shadow: 0 2px 0 #b55c12, 0 0 18px rgba(255,200,74,.4); }
header p { margin: 10px auto 2px; color: var(--muted); font-size: 15px; }
.wheel-stage { position: relative; width: min(84vw, 390px); aspect-ratio: 1; margin: 22px auto 16px; display: grid; place-items: center; }
.halo { position: absolute; inset: 5%; border-radius: 50%; background: rgba(255,190,50,.18); filter: blur(20px); animation: glow 2s ease-in-out infinite alternate; }
.wheel { position: relative; width: 91%; height: 91%; border-radius: 50%; background: #20183b; border: 9px solid #ffe68f; box-shadow: 0 0 0 5px #8c5410, 0 0 0 8px #edb83f, inset 0 0 28px rgba(0,0,0,.35), 0 14px 45px rgba(0,0,0,.52), 0 0 30px rgba(255,192,54,.2); transform: rotate(0deg); overflow: hidden; }
.wheel canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.wheel-ring { position: absolute; inset: 6%; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); box-shadow: inset 0 0 18px rgba(255,255,255,.16); }
.wheel-center { position: absolute; z-index: 3; width: 29%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #fff; border: 5px solid #fff1b3; box-shadow: 0 5px 18px rgba(0,0,0,.55); }
.wheel-center img { width: 90%; height: 90%; object-fit: contain; display: block; }
.pointer { position: absolute; z-index: 4; top: -1%; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 22px solid transparent; border-right: 22px solid transparent; border-top: 54px solid #fff6cc; filter: drop-shadow(0 5px 3px rgba(0,0,0,.45)); }
.status { min-height: 76px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 13px 16px; background: var(--card); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; }
.status strong { font-size: 19px; }
.status span { color: var(--muted); font-size: 14px; }
button { width: 100%; min-height: 54px; margin-top: 12px; border: 0; border-radius: 16px; font: inherit; font-weight: 900; cursor: pointer; }
.actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.spin { color: #351900; background: linear-gradient(135deg, #fff4a9, var(--gold) 45%, #ff922d); border: 2px solid #fff0a0; box-shadow: 0 5px 0 #9b4e11, 0 10px 28px rgba(255,172,38,.32), inset 0 1px 0 #fffbd8; font-family: Impact, Haettenschweiler, "Arial Black", sans-serif; font-size: 18px; text-shadow: 0 1px 0 rgba(255,255,255,.55); letter-spacing: .09em; }
.sound { width: auto; min-width: 104px; padding: 0 13px; color: var(--text); background: var(--card); border: 1px solid rgba(255,255,255,.14); font-size: 12px; }
.spin:disabled { cursor: default; opacity: .5; filter: grayscale(.4); }
.close { color: var(--text); background: var(--card); border: 1px solid rgba(255,255,255,.14); }
.prizes { margin-top: 22px; text-align: left; }
.prizes h2 { margin: 0 0 11px; font-size: 16px; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prize { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 10px; border-radius: 13px; background: var(--card); color: var(--muted); font-size: 12px; line-height: 1.25; }
.dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.terms { color: #9e93b6; font-size: 11px; line-height: 1.5; margin: 18px 8px 0; }
.winning { animation: winner .7s ease-in-out 2; }
@keyframes glow { to { transform: scale(1.05); opacity: .75; } }
@keyframes winner { 50% { transform: scale(1.015); box-shadow: 0 0 42px rgba(255,203,74,.45); } }
@media (max-width: 360px) { .legend { grid-template-columns: 1fr; } .wheel-stage { margin-top: 16px; } .actions { grid-template-columns: 1fr; } .sound { width: 100%; min-height: 42px; margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .halo, .winning { animation: none; } }