/* Orbit stage geometry inside the 390×446 stage host. Art and pocket colours come from the theme. */
.orbit-stage{position:absolute;inset:0;--oc-step:calc(360deg/37)}
.oc-wheel{position:absolute;left:71px;top:4px;width:248px;height:248px;isolation:isolate}
.oc-body{position:absolute;inset:0;z-index:2}
.oc-rim{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}

/* pocket ring: conic colours set by orbit.js, numbers turn with it */
.oc-spin{position:absolute;left:50%;top:50%;width:calc(248px*var(--oc-disc));height:calc(248px*var(--oc-disc));border-radius:50%;
  margin:calc(-124px*var(--oc-disc)) 0 0 calc(-124px*var(--oc-disc));box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 0 10px rgba(0,0,0,.6)}
.oc-spin::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from calc(var(--oc-step)/-2),rgba(255,236,170,.75) 0 .7deg,transparent .7deg var(--oc-step))}
.oc-spin::after{content:"";position:absolute;inset:23%;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.2),rgba(0,0,0,.75));box-shadow:0 0 0 2px rgba(255,236,170,.6)}
.oc-num{position:absolute;left:50%;top:0;width:16px;height:50%;margin-left:-8px;transform-origin:50% 100%;padding-top:3px;text-align:center;
  font:900 9px/1 var(--sr-font-body);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.8)}

.oc-hub{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;display:grid;place-items:center;z-index:2}
.oc-core{position:absolute;inset:-6px;width:108px;height:108px;object-fit:contain;filter:drop-shadow(0 0 10px var(--sr-glow,#bfefff));animation:oc-float 4s ease-in-out infinite}
@keyframes oc-float{50%{transform:scale(1.04)}}
.orbit-stage.running .oc-core{animation:oc-float .9s ease-in-out infinite}
.oc-result{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;font:900 30px/1 var(--sr-font-display);color:#fff;
  border:3px solid rgba(255,236,170,.95);box-shadow:0 0 18px var(--sr-glow,#bfefff),inset 0 -4px 0 rgba(0,0,0,.3);text-shadow:0 2px 0 rgba(0,0,0,.5);animation:oc-pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes oc-pop{from{transform:scale(.2);opacity:0}}
[data-color=red]{--oc-ball:var(--sr-pocketRed,#d4213d)}[data-color=black]{--oc-ball:var(--sr-pocketBlack,#151a2c)}[data-color=green]{--oc-ball:var(--sr-pocketGreen,#0f9d58)}
.oc-result,.oc-ball{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.45),transparent 45%),var(--oc-ball)}

.oc-hit{position:absolute;left:50%;top:calc(50% - var(--oc-land));width:56px;height:56px;margin:-28px 0 0 -28px;opacity:0;mix-blend-mode:screen;z-index:3}
.oc-hit.on{opacity:.85;animation:oc-hit 1s ease-in-out infinite alternate}
@keyframes oc-hit{to{transform:scale(1.25);opacity:.55}}
.oc-pointer{position:absolute;left:50%;top:calc(50% - 124px*var(--oc-disc) - 16px);width:34px;height:34px;margin-left:-17px;z-index:5;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}

/* tilted orbit ring: back half behind the wheel, front half over it */
.oc-ring{position:absolute;left:50%;top:50%;width:380px;height:112px;margin:-56px 0 0 -190px;transform:rotate(-8deg);pointer-events:none}
.oc-ring-art{width:100%;height:100%}
.oc-ring.back{z-index:1;clip-path:inset(0 0 50% 0)}
.oc-ring.front{z-index:3;clip-path:inset(50% 0 0 0);opacity:.92}
.orbit-stage.running .oc-ring-art{animation:oc-ring 1.2s ease-in-out infinite alternate}
@keyframes oc-ring{to{filter:brightness(1.35)}}

/* comet: left/top is the wheel centre, orbit.js sets the offset */
.oc-comet{position:absolute;left:50%;top:50%;width:24px;height:24px;z-index:1;filter:drop-shadow(0 0 6px var(--sr-glow,#bfefff)) drop-shadow(0 0 12px var(--sr-accent,#7fe7ff))}
.oc-comet.front{z-index:4}
.oc-trail{opacity:0;width:20px;height:20px}
.orbit-stage.running .oc-trail{opacity:calc(.5 - var(--k)*.13)}

/* option cards: 2 rows × 4 */
.oc-grid{position:absolute;left:11px;right:11px;top:262px;display:grid;grid-template-columns:repeat(4,86px);justify-content:space-between;row-gap:8px}
.oc-card{position:relative;width:86px;height:84px;transition:transform .12s,filter .15s}
.oc-card .sr-market-art{filter:drop-shadow(0 4px 3px rgba(0,0,0,.5))}
.oc-label{position:absolute;inset:14px 8px 20px;display:grid;place-items:center;text-align:center;font:900 22px/1 var(--sr-font-display);color:#fff;
  -webkit-text-stroke:3px rgba(0,0,0,.55);paint-order:stroke fill;text-shadow:0 2px 2px rgba(0,0,0,.45)}
.oc-card[data-group=dozen] .oc-label{font-size:19px}
.oc-card[data-group=color] .oc-label,.oc-card[data-group=parity] .oc-label{font-size:15px;line-height:1.05}
.oc-card[data-size=s] .oc-label{inset-inline:4px;font-size:12px;-webkit-text-stroke-width:2.5px}
.oc-card[data-ink=dark] .oc-label{color:#3a1a00;-webkit-text-stroke-color:rgba(255,248,232,.9);text-shadow:none}
.oc-card .sr-mult{bottom:-2px;min-width:44px;font-size:12px}
.oc-card.mine .sr-market-art{filter:drop-shadow(0 0 7px var(--sr-accent,#7fe7ff))}
.orbit-stage.celebrate .oc-card:not(.lit){filter:brightness(.5) saturate(.6)}
.oc-card.lit{z-index:4;animation:oc-lit .6s ease-in-out calc(var(--k,0)*.3s) infinite alternate both}
@keyframes oc-lit{from{transform:scale(1);filter:brightness(1.1) drop-shadow(0 0 6px var(--sr-glow,#bfefff))}to{transform:scale(1.08);filter:brightness(1.45) drop-shadow(0 0 16px var(--sr-accent,#7fe7ff))}}

/* trend + settle number balls (orbit.js trendBadge / resultBadge) */
.oc-ball{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:900 12px/1 var(--sr-font-body);color:#fff;border:1.5px solid rgba(255,236,170,.9);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.oc-settle-ball{width:38px;height:38px;font-size:19px;border-width:2px}

/* chips: light labels on dark chip art where the theme asks for it */
.sr-app:has(.orbit-stage) .sr-chip-label{color:var(--sr-chipInk,var(--sr-ink));-webkit-text-stroke:3px rgba(0,0,0,.45);paint-order:stroke fill;text-shadow:none}

.oc-fx{position:absolute;inset:-20px -10px 120px;pointer-events:none;z-index:6}
.oc-firework{position:absolute;width:150px;height:150px;opacity:0;animation:oc-burst 1.1s ease-out calc(var(--i)*.28s) 2 both}
.oc-firework:nth-child(1){left:2%;top:4%}.oc-firework:nth-child(2){right:2%;top:10%}.oc-firework:nth-child(3){left:34%;top:-6%}
@keyframes oc-burst{0%{transform:scale(.2);opacity:0}25%{opacity:1}100%{transform:scale(1.15);opacity:0}}
.oc-spark{position:absolute;left:50%;top:42%;width:24px;height:24px;opacity:0;animation:oc-spark 1s ease-out calc(var(--i)*.06s) both}
@keyframes oc-spark{0%{transform:rotate(calc(var(--i)*36deg)) translateY(0) scale(.4);opacity:1}100%{transform:rotate(calc(var(--i)*36deg)) translateY(-160px) scale(1);opacity:0}}