:root {color-scheme:dark; --ink:#f6f4ed; --muted:#a7b4c8; --deep:#0b192c; --soft:#172b43; --gold:#ffd273; --size:min(73vw, 61vh, 485px); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--deep); }
body {margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 10% 8%,#1d3d59 0,transparent 35%),radial-gradient(circle at 85% 28%,#213a4c 0,transparent 32%),#0b192c;}
button {font:inherit; cursor:pointer;}
button:focus-visible {outline:3px solid #fff; outline-offset:4px;}
button:disabled {cursor:wait; opacity:.55;}
.layout {max-width:1100px; margin:auto; padding:clamp(12px,2vw,28px); min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) 275px; gap:20px; align-content:start;}
.header {grid-column:1/-1; display:flex; align-items:center; gap:15px; margin:0 0 4px;}
.brand-mark {display:grid; place-items:center; width:50px; height:50px; border-radius:14px; background:var(--gold); color:var(--deep); font-size:32px; font-weight:900; flex:none;}
.header h1 {font-size:clamp(20px,2.8vw,30px); letter-spacing:-.04em; margin:0; font-weight:850;}
.header h1 span {color:var(--gold);}
.eyebrow {margin:0 0 3px; text-transform:uppercase; letter-spacing:.16em; font-size:10px; font-weight:800; color:#c4d2e0;}
.demo-pill {margin-left:auto; border:1px solid rgba(255,210,115,.45); border-radius:100px; color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.08em; padding:10px 13px;}
.game {text-align:center; border:1px solid rgba(255,255,255,.12); background:rgba(13,30,50,.72); border-radius:22px; padding:18px clamp(10px,2vw,24px) 14px; box-shadow:0 15px 45px rgba(0,0,0,.12); min-width:0;}
.kicker {font-size:12px; text-transform:uppercase; letter-spacing:.15em; color:var(--gold); font-weight:800; margin:0 0 4px;}
.intro h2 {font-size:clamp(26px,3.9vw,42px); letter-spacing:-.045em; margin:0; line-height:1.1;}
.subtitle {color:var(--muted); margin:7px 0 10px; font-size:13px;}
.wheel-stage {width:var(--size); height:var(--size); margin:12px auto 18px; position:relative; max-width:100%;}
.wheel {height:100%;width:100%; border-radius:50%; position:relative; border:9px solid #f8e2aa; box-shadow:0 0 0 5px #27415b,0 18px 35px rgba(0,0,0,.36),inset 0 0 0 3px rgba(255,255,255,.5); background:conic-gradient(from -18deg,#f5bf57 0deg 36deg,#e7655b 36deg 72deg,#4da99d 72deg 108deg,#5f82c3 108deg 144deg,#f5bf57 144deg 180deg,#e7655b 180deg 216deg,#4da99d 216deg 252deg,#5f82c3 252deg 288deg,#f5bf57 288deg 324deg,#e7655b 324deg 360deg);}
.wheel::after {content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; background:repeating-conic-gradient(from -18deg, transparent 0deg 35.4deg,rgba(255,255,255,.8) 35.4deg 36deg);}
.pointer {position:absolute; left:50%; top:-18px; transform:translateX(-50%); width:0;height:0;border-left:17px solid transparent;border-right:17px solid transparent;border-top:38px solid #fff; z-index:5;filter:drop-shadow(0 5px 3px rgba(0,0,0,.3));}
.wheel-cap {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;background:#fff1d4;color:#12263d;box-shadow:0 2px 12px rgba(0,0,0,.2);border:5px solid #172b43;border-radius:50%;font-weight:900;font-size:28px;display:grid;place-items:center;z-index:3;}
.wlabel {position:absolute;left:50%;top:50%;width:24%;margin-left:-12%;margin-top:-9px;white-space:nowrap;text-align:center;color:#142139; font-size:clamp(8px,1.6vw,12px);font-weight:900;letter-spacing:-.02em;text-shadow:0 1px 0 rgba(255,255,255,.2);}
.p0 {transform:rotate(0deg) translateY(calc(var(--size) * -.35)) rotate(0deg);}
.p1 {transform:rotate(36deg) translateY(calc(var(--size) * -.35)) rotate(-36deg);}
.p2 {transform:rotate(72deg) translateY(calc(var(--size) * -.35)) rotate(-72deg);}
.p3 {transform:rotate(108deg) translateY(calc(var(--size) * -.35)) rotate(-108deg);}
.p4 {transform:rotate(144deg) translateY(calc(var(--size) * -.35)) rotate(-144deg);}
.p5 {transform:rotate(180deg) translateY(calc(var(--size) * -.35)) rotate(-180deg);}
.p6 {transform:rotate(216deg) translateY(calc(var(--size) * -.35)) rotate(-216deg);}
.p7 {transform:rotate(252deg) translateY(calc(var(--size) * -.35)) rotate(-252deg);}
.p8 {transform:rotate(288deg) translateY(calc(var(--size) * -.35)) rotate(-288deg);}
.p9 {transform:rotate(324deg) translateY(calc(var(--size) * -.35)) rotate(-324deg);}
.controls {display:flex;flex-direction:column;align-items:center;gap:10px;min-height:85px;}
.primary,.secondary {min-height:48px;border:0;border-radius:100px;padding:13px 30px;font-weight:900;letter-spacing:.025em;font-size:14px;max-width:100%;}
.primary {background:linear-gradient(90deg,#ffdc8c,#f5b74e);color:#16263a;box-shadow:0 6px 22px rgba(255,194,83,.25);}
.secondary {background:#fff;color:#132339;}
.result {padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.08);width:100%;max-width:390px;}
.result strong {display:block;color:var(--gold);font-size:clamp(18px,2.4vw,25px);}
.result-label {font-size:11px;letter-spacing:.12em;font-weight:800;color:#d5e1ea;margin:0 0 4px;}
.result-note {font-size:12px;color:var(--muted);margin:4px 0 0;}
.countdown {color:var(--muted);font-size:12px;margin:0;}
.notice {color:var(--gold);font-size:11px;letter-spacing:.06em;margin:15px 0 0;}
.history {padding:20px;background:rgba(15,35,56,.72);border:1px solid rgba(255,255,255,.11);border-radius:22px;align-self:start;}
.history-title {display:flex;align-items:center;justify-content:space-between;gap:8px;}
.history h2 {font-size:16px;margin:0;}
.history-title span {font-size:10px;color:var(--gold);}
.history ol {padding:0;list-style:none;margin:18px 0;display:flex;flex-direction:column;gap:10px;}
.history li {border-bottom:1px solid rgba(255,255,255,.10);padding-bottom:10px;font-size:13px;display:flex;justify-content:space-between;gap:8px;}
.history li b {color:#fff;}
.muted,.note {color:var(--muted);}
.note {line-height:1.5;font-size:12px;}
footer {grid-column:1/-1;color:#9aafc2;text-align:center;font-size:12px;padding:7px 0;}
[hidden] {display:none !important;}
@media (max-width:850px) {.layout {grid-template-columns:1fr;max-width:660px;gap:12px;} .history {padding:14px 20px;} .history ol {margin:10px 0;} .history li {padding-bottom:6px;} :root {--size:min(72vw,52vh,470px);} }
@media (max-width:500px) { :root {--size:min(82vw,43vh,390px);} .layout {padding:10px;} .brand-mark {height:40px;width:40px;font-size:25px;} .demo-pill {padding:7px 8px;font-size:8px;} .header {gap:8px;} .eyebrow {font-size:8px;letter-spacing:.1em;} .game {padding:13px 10px 10px;} .wheel-stage {margin:12px auto 14px;} .wlabel {font-size:8px;} .wheel {border-width:6px;} .subtitle {margin-bottom:4px;} .pointer {top:-14px;} }
@media (prefers-reduced-motion:reduce) { .wheel {transition-duration:.01ms !important;} }