/* Royal stage geometry inside the 390×446 stage host: wheel on top, 4×2 market tiles below. Art and colours come from the theme. */
.royal-stage{position:absolute;inset:0;--rs-red:var(--sr-red,#b3122e);--rs-black:var(--sr-black,#16181b);--rs-green:var(--sr-green,#0f8a4a);--rs-spin:cubic-bezier(.33,1,.68,1)}

/* wheel: bowl art, coloured pocket ring (37 pockets, 0 at the top when idle), hub, ball orbit, pointer */
.rs-wheel{position:absolute;left:50%;top:0;width:250px;height:250px;margin-left:-125px;pointer-events:none}
.rs-bowl{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.rs-ring{position:absolute;inset:35px;border-radius:50%;background:var(--rs-pockets);transform:rotate(var(--rs-rot,0deg));transition:transform var(--rs-ms,0ms) var(--rs-spin);
  -webkit-mask:radial-gradient(circle,transparent 0 64px,#000 65px);mask:radial-gradient(circle,transparent 0 64px,#000 65px);box-shadow:inset 0 0 0 2px var(--sr-accent,#ffd76a)}
/* gold frets between pockets + soft gloss */
.rs-ring-face{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from -4.865deg,var(--sr-accent,#ffd76a) 0 .7deg,transparent .7deg 9.7297deg),radial-gradient(circle,transparent 0 63%,rgba(255,255,255,.18) 66%,transparent 74%,rgba(0,0,0,.22) 100%)}
.rs-pocket{position:absolute;left:50%;top:50%;width:16px;height:12px;margin:-6px 0 0 -8px;transform:rotate(var(--a)) translateY(-80px);text-align:center;font:800 9px/12px var(--sr-font-body);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.7)}
.rs-pocket.win{color:var(--sr-accent,#ffd76a);font-size:11px;text-shadow:0 0 4px #000,0 0 8px var(--sr-glow,#fff)}
.rs-hub{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.5))}
.rs-orbit{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--rs-rot,0deg));transition:transform var(--rs-ms,0ms) var(--rs-spin);z-index:2}
.rs-ball{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;transform:translateY(-101px);
  background:radial-gradient(circle at 35% 30%,#fff 0 22%,#eef1f5 45%,#a7afba 100%);box-shadow:0 2px 3px rgba(0,0,0,.55)}
.royal-stage.dropping .rs-ball{transform:translateY(-70px);transition:transform var(--rs-drop-ms,600ms) cubic-bezier(.45,0,.6,1.35) var(--rs-drop-delay,0ms)}
.royal-stage.dropped .rs-ball{transform:translateY(-70px)}
.rs-pointer{position:absolute;left:50%;top:-4px;width:34px;height:34px;margin-left:-17px;z-index:3;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.rs-glow{position:absolute;left:50%;top:0;width:96px;height:96px;margin-left:-48px;opacity:0;z-index:1;transition:opacity .3s}
.rs-glow.on{opacity:1;animation:rs-pulse 1.1s ease-in-out infinite alternate}
@keyframes rs-pulse{from{transform:scale(.85) rotate(0)}to{transform:scale(1.1) rotate(20deg)}}
/* landed number pops over the hub */
.royal-stage.celebrate .rs-wheel::after{content:attr(data-number);position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;z-index:4;
  display:grid;place-items:center;font:900 34px/1 var(--sr-font-display);color:#fff;-webkit-text-stroke:2px var(--sr-ink,#0b2a1a);paint-order:stroke fill;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.35),transparent 60%),var(--rs-black);border:3px solid var(--sr-accent,#ffd76a);
  box-shadow:0 0 18px var(--sr-glow,#fff),0 4px 6px rgba(0,0,0,.5);animation:rs-pop .45s cubic-bezier(.3,1.6,.6,1) both}
.royal-stage.celebrate .rs-wheel[data-color=red]::after{background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.35),transparent 60%),var(--rs-red)}
.royal-stage.celebrate .rs-wheel[data-color=green]::after{background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.35),transparent 60%),var(--rs-green)}
@keyframes rs-pop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}

/* "New" badge (latest number) on the left, countdown on the right */
.rs-last{position:absolute;left:8px;top:150px;width:64px;height:72px;display:grid;place-items:center;pointer-events:none}
.rs-last-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.rs-last-label{position:absolute;top:-6px;left:50%;transform:translateX(-50%);padding:2px 6px;border-radius:7px;background:#e5322d;color:#fff;font:800 10px/1 var(--sr-font-body);white-space:nowrap}
.rs-last-number{position:relative;display:grid;place-items:center;min-width:32px;height:32px;border-radius:50%;font:900 18px/1 var(--sr-font-display);color:#fff;background:var(--rs-black);border:2px solid var(--sr-accent,#ffd76a)}
.rs-last[data-color=red] .rs-last-number{background:var(--rs-red)}
.rs-last[data-color=green] .rs-last-number{background:var(--rs-green)}
.rs-timer{position:absolute;right:8px;top:150px;width:70px;height:70px}
.rs-timer .sr-countdown-value{font-size:30px}

/* tiles: 0 + three dozens, then Red, Black, Odd, Even */
.rs-grid{position:absolute;left:10px;right:10px;top:252px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:90px;gap:6px}
.rs-tile{position:relative;width:100%;height:100%;transition:transform .12s,filter .15s}
.rs-tile .sr-market-art{position:absolute;inset:0;filter:drop-shadow(0 4px 3px rgba(0,0,0,.45))}
.rs-tile .sr-market-name{position:absolute;inset:14px 4px 28px;width:auto;height:auto;clip:auto;overflow:visible;display:grid;place-items:center;text-align:center;overflow-wrap:anywhere;
  font:900 16px/1.05 var(--sr-font-display);color:var(--sr-paper,#fff6dc);-webkit-text-stroke:3px var(--sr-ink,#0b2a1a);paint-order:stroke fill}
.rs-zero .sr-market-name{font-size:30px}
.rs-dozen-1 .sr-market-name,.rs-dozen-2 .sr-market-name,.rs-dozen-3 .sr-market-name{font-size:19px}
.rs-tile .sr-mult{bottom:7px;min-width:0;padding:0;background:none;font-size:13px;color:var(--sr-accent,#ffd76a);text-shadow:0 1px 0 #000,0 0 3px #000}
.rs-tile .sr-total{top:3px;inset-inline-end:3px}
.rs-tile .sr-mine{top:3px;inset-inline-start:3px}
.rs-tile.mine .sr-market-art{filter:drop-shadow(0 0 6px var(--sr-accent,#ffd76a))}
.royal-stage.celebrate .sr-market:not(.lit){filter:brightness(.5) saturate(.6)}
.rs-tile.lit{z-index:2;animation:rs-lit .7s ease-in-out infinite alternate}
@keyframes rs-lit{from{transform:scale(1.02);filter:brightness(1.1) drop-shadow(0 0 6px var(--sr-glow,#fff))}to{transform:scale(1.07);filter:brightness(1.4) drop-shadow(0 0 14px var(--sr-accent,#ffd76a))}}

/* number badges in the trend strip and settlement bar */
.rs-badge{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font:900 12px/1 var(--sr-font-body);color:#fff;background:var(--rs-black,#16181b);border:1.5px solid var(--sr-accent,#ffd76a);box-sizing:border-box}
.rs-badge.red{background:var(--sr-red,#b3122e)}
.rs-badge.green{background:var(--sr-green,#0f8a4a)}
.rs-badge.black{background:var(--sr-black,#16181b)}
.rs-badge-big{width:40px;height:40px;font-size:20px;border-width:2px}

/* celebration (fx box starts 30px above the stage, so the wheel centre is at top 155px) */
.rs-fx{position:absolute;inset:-30px -10px auto;height:300px;pointer-events:none;z-index:5}
.rs-firework{position:absolute;width:150px;height:150px;opacity:0;animation:rs-burst 1.1s ease-out calc(var(--i)*.28s) 2 both}
.rs-firework:nth-child(1){left:2%;top:6%}.rs-firework:nth-child(2){right:2%;top:14%}.rs-firework:nth-child(3){left:33%;top:-6%}
@keyframes rs-burst{0%{transform:scale(.2);opacity:0}25%{opacity:1}100%{transform:scale(1.15);opacity:0}}
.rs-spark{position:absolute;left:50%;top:155px;width:24px;height:24px;margin:-12px 0 0 -12px;opacity:0;animation:rs-spark 1s ease-out calc(var(--i)*.06s) both}
@keyframes rs-spark{0%{transform:rotate(calc(var(--i)*36deg)) translateY(0) scale(.4);opacity:1}100%{transform:rotate(calc(var(--i)*36deg)) translateY(-150px) scale(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .rs-ring,.rs-orbit,.royal-stage.dropping .rs-ball{transition:none}
  .rs-glow.on,.rs-tile.lit,.royal-stage.celebrate .rs-wheel::after{animation:none}
}

/* runtime tweaks for Star Royal pages: serif chip values fit the coin face; balance stays readable on light pills */
.sr-chip-label{font-size:13px;letter-spacing:-.3px}
.sr-balance-value{-webkit-text-stroke:3px var(--sr-ink,#0b2a1a);paint-order:stroke fill}