.draw-wheel{--wheel-gold:#f4d49c;display:grid;justify-items:center;align-content:center;min-width:0;color:var(--ink);text-align:center;isolation:isolate}
.draw-wheel-plate{width:min(100%,23rem);position:relative;aspect-ratio:1;container-type:inline-size;direction:ltr}
.draw-wheel-rim{position:absolute;inset:3%;border-radius:50%;box-shadow:0 10px 25px #050b1570,inset 0 0 0 1px #a5937148,inset 0 0 0 4px #22323a,inset 0 0 0 5px #74817b;background:radial-gradient(circle,#14232a 0 65%,transparent 65%),repeating-conic-gradient(from -.35deg,#d7c5a29c 0 .6deg,#27353b .6deg 6deg)}
.draw-wheel-rim::before{content:"";position:absolute;inset:4.5%;border-radius:50%;border:1px solid #f4d49c6b;box-shadow:0 0 0 2px #101b23}
.draw-wheel-aperture{position:absolute;inset:0;overflow:clip;border-radius:50%}
.draw-wheel-disk{position:absolute;inset:0;width:100%;height:100%;display:block;direction:ltr;transform-origin:50% 50%}
.draw-wheel[data-state=spinning] .draw-wheel-disk{will-change:transform}
.draw-wheel-hub{position:absolute;left:50%;top:50%;width:27%;height:27%;border-radius:50%;translate:-50% -50%;display:grid;align-content:center;justify-items:center;overflow:hidden;line-height:1.02;box-shadow:0 0 0 1px #0c1720,0 0 0 3px #b4a181,0 0 0 5px #14222b,0 2px 12px #05121ba8;background:radial-gradient(ellipse at 36% 15%,#33434b,#192831 70%);color:var(--wheel-gold);font:700 clamp(12px,7cqw,27px)/1 var(--display,Bricolage,sans-serif);direction:ltr}
.draw-wheel-ticket-label{max-width:89%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:650 clamp(7px,2.9cqw,11px)/1.3 var(--body,'DM Sans',sans-serif);color:#d7cdbb}
.draw-wheel-number{max-width:95%;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.draw-wheel-needle{position:absolute;z-index:1;left:50%;top:-2.7%;width:9%;height:12.2%;translate:-50% 0;filter:drop-shadow(0 2px 2px #04121caa)}
.draw-wheel-needle::before,.draw-wheel-needle::after{content:"";position:absolute;inset:0;clip-path:polygon(50% 100%,7% 32%,15% 10%,50% 0,85% 10%,93% 32%)}
.draw-wheel-needle::before{background:linear-gradient(90deg,#d0a76c,#ffebbb 45%,#c4a271)}
.draw-wheel-needle::after{inset:12% 22% 25%;background:#27363b;opacity:.85}
.draw-wheel-readout{display:grid;justify-items:center;align-content:start;gap:1px;max-width:100%;min-height:2.7em;font:550 .84rem/1.4 var(--body,'DM Sans',sans-serif);margin-top:.28rem}
.draw-wheel-readout-label{font-size:.72rem;color:var(--muted,#bac7ce);min-height:1.4em}
.draw-wheel-name{font:650 1rem/1.3 var(--mono,monospace);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d9e7e6}
.draw-wheel[data-state=landed] .draw-wheel-name{color:var(--wheel-gold)}
.draw-wheel[data-state=landed] .draw-wheel-hub{box-shadow:0 0 0 1px #17232a,0 0 0 3px var(--wheel-gold),0 0 0 5px #15232c,0 2px 14px #111b23a8}
.draw-wheel-compact .draw-wheel-plate{width:min(100%,11rem)}
.draw-wheel-compact .draw-wheel-readout{min-height:2.4em}
@media(max-width:500px){.draw-wheel-plate{width:min(100%,20rem)}}

/* The four allocations are independently inspectable; one verified animation
   keeps simultaneous results readable without four competing moving canvases. */
.wheel-overview{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 12px;color:var(--muted);font-size:.8rem}
.wheel-overview-label{font-weight:650;color:var(--ink)}
.wheel-follow-state{font-size:.74rem;text-align:end}
.wheel-follow-state::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;margin-inline-end:7px;background:#a9d8bb}
.wheel-lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wheel-lane-choice{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;gap:8px;text-align:start;border:1px solid #303946;border-radius:11px;padding:16px 17px;background:linear-gradient(135deg,#17202b,#111923);color:var(--ink);cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s}
.wheel-lane-choice:hover{border-color:var(--lane-color);background:#1b2631}
.wheel-lane-choice[aria-pressed=true]{border-color:var(--lane-color);box-shadow:inset 0 2px var(--lane-color);background:linear-gradient(140deg,color-mix(in srgb,var(--lane-color) 10%,#17202b),#131c26)}
.wheel-lane-choice:focus-visible{outline:2px solid var(--lane-color);outline-offset:3px}
.wheel-lane-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--lane-color)}
.wheel-lane-name{font:650 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.wheel-lane-name::before{content:'';display:inline-block;height:6px;width:6px;border:1px solid currentColor;border-radius:50%;margin-inline-end:7px}
.wheel-lane-period{font-size:.73rem;font-weight:600;white-space:nowrap}
.wheel-lane-edition{color:var(--muted);font-size:.72rem;min-height:2.8em;line-height:1.4}
.wheel-lane-value{display:block;min-height:1.5em;font:650 clamp(15px,1.65vw,21px)/1.4 var(--display);letter-spacing:-.025em;color:var(--lane-color);overflow-wrap:anywhere}
.wheel-lane-choice[data-has-result=false] .wheel-lane-value{color:var(--subtle)}
.wheel-lane-note{font-size:.7rem;line-height:1.5;color:var(--muted);min-height:3em;overflow-wrap:anywhere}
.wheel-value-caption{margin:9px 1px 16px;color:var(--muted);font-size:.72rem}
#roleta .wheel-panel{border-color:color-mix(in srgb,var(--distribution-accent,#a9d8bb) 35%,#2b3543)}
#roleta .wheel-info .eyebrow,#roleta #wheel-status{color:var(--distribution-accent,var(--gold))}
#roleta .wheel-stage{background:radial-gradient(ellipse at 48% 40%,color-mix(in srgb,var(--distribution-accent,#a9d8bb) 13%,#15222d),#101822 80%)}
.wheel-empty{display:grid;justify-items:center;align-content:center;gap:28px;text-align:center;padding:28px 12px;min-height:20rem;color:var(--muted);font-size:.84rem}
.wheel-empty-orbit{position:relative;width:180px;aspect-ratio:1;display:grid;place-content:center;border:1px solid color-mix(in srgb,var(--distribution-accent) 38%,transparent);border-radius:50%;color:var(--distribution-accent);font:600 30px/1.2 var(--display);letter-spacing:-.04em}
.wheel-empty-orbit::before,.wheel-empty-orbit::after{content:'';position:absolute;inset:13%;border:1px dashed color-mix(in srgb,var(--distribution-accent) 24%,transparent);border-radius:50%}
.wheel-empty-orbit::after{inset:-5%;border-style:solid;transform:rotate(-28deg) scaleY(.4)}
@media(max-width:980px){.wheel-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}.wheel-lane-edition{min-height:1.4em}.wheel-lane-note{min-height:1.5em}.wheel-lane-value{font-size:20px}}
@media(max-width:420px){.wheel-lanes{gap:8px}.wheel-lane-choice{padding:13px 12px;gap:7px}.wheel-lane-value{font-size:17px}.wheel-lane-name{font-size:9px}.wheel-follow-state{max-width:45%;font-size:.68rem}.wheel-overview-label{font-size:.74rem}}
@media(prefers-reduced-motion:reduce){.wheel-lane-choice{transition:none}}