/* Broadcast stage: depth at rest, light choreography only during a draw. */
.stage-card{isolation:isolate}
.stage-atmosphere,.celebration-canvas,.spin-progress{position:absolute;pointer-events:none}
.stage-atmosphere{inset:0;z-index:-1;overflow:hidden;opacity:0;transition:opacity .5s}
.broadcast-effects .stage-atmosphere{opacity:1;background:radial-gradient(ellipse at 20% 10%,#9682ff18,transparent 55%),radial-gradient(ellipse at 90% 85%,#d9f47809,transparent 50%)}
.stage-atmosphere::before,.stage-atmosphere::after{content:'';position:absolute;top:-10%;left:8%;width:22%;height:120%;opacity:0;background:linear-gradient(180deg,#a99cf548,transparent 85%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);transform-origin:50% 0%;transition:opacity .6s}
.stage-atmosphere::after{left:65%;background:linear-gradient(180deg,#d9f47838,transparent 85%)}
.broadcast-effects.is-spinning .stage-atmosphere::before{opacity:1;animation:stage-sweep 4s ease-in-out infinite alternate}
.broadcast-effects.is-spinning .stage-atmosphere::after{opacity:1;animation:stage-sweep 4.8s ease-in-out infinite alternate-reverse}
.celebration-canvas{inset:0;width:100%;height:100%;z-index:5}
.stage-card .result-box,.stage-card .stage-controls,.stage-card .stage-extra-actions,.stage-card .design-switch{position:relative;z-index:6}
.spin-progress{bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#a99cf5,#d9f478);transform:scaleX(0);transform-origin:left;opacity:0;z-index:7}
.broadcast-effects.is-spinning .spin-progress{opacity:1;animation:spin-progress var(--spin-duration) linear forwards}
.wheel-board{filter:none}
.broadcast-effects .wheel-board{filter:none}
.broadcast-effects .wheel-board::before{content:'';position:absolute;inset:-15px;border-radius:50%;background:conic-gradient(#e8ebfa,#6c7086 14%,#272d40 28%,#b9c0d5 42%,#f3f5fe 49%,#5b647c 68%,#292f43 80%,#cbd2e7);box-shadow:0 10px 0 #0e1220,0 13px 0 #51566e,0 0 0 2px #101625}
.broadcast-effects .wheel-disc{box-shadow:0 0 0 3px #141a2a,0 0 0 7px #272c40,0 0 0 8px #d5daf08c}
.wheel-lights{display:none;position:absolute;inset:-14px;z-index:3;pointer-events:none;border-radius:50%}
.broadcast-effects .wheel-lights{display:block}
.wheel-lights i{position:absolute;width:5px;height:5px;border-radius:50%;transform:translate(-50%,-50%);background:#f5f4d1;box-shadow:0 0 6px #f4f4a9,0 0 12px #d9f47866}
.wheel-lights i:nth-child(3n){background:#c9bcff;box-shadow:0 0 8px #a99cf5}
.broadcast-effects.is-spinning .wheel-lights{animation:marquee-orbit 8s linear infinite}
.broadcast-effects.is-settling .wheel-lights{animation-duration:16s}
.broadcast-effects .wheel-hub{background:radial-gradient(circle at 35% 24%,#43465e,#22283c 60%,#111726);border-color:#dce0f4;box-shadow:0 0 0 5px #171c2e,0 0 0 7px #8f92ad,0 12px 30px #070b2299,inset 0 2px 6px #ffffff28}
.broadcast-effects .wheel-pointer{transform-origin:50% 4px;border-top-color:#edfca8;filter:drop-shadow(0 3px 3px #070d20) drop-shadow(0 0 8px #d9f47860)}
.broadcast-effects.is-spinning .wheel-hub{border-color:#d9f478}
.broadcast-effects .reel-viewport{border-color:#848da6;box-shadow:inset 0 3px 14px #0009,0 0 0 5px #171d2d,0 0 0 6px #616a80}
.broadcast-effects .reel-card{background:linear-gradient(145deg,#f3f3e9,#c8cdcd);box-shadow:0 8px 0 #858fa0,0 16px 24px #080b1970,inset 0 2px 1px #fff}
.broadcast-effects .reel-card.winner-card{background:linear-gradient(145deg,#f0ffb8,#c4e86b);box-shadow:0 8px 0 #839e4c,0 0 35px #d9f47875}
.broadcast-effects.is-spinning .reel-caption{color:#d9f478}
.broadcast-effects.is-spinning .result-box{border-color:#837ba4;background:#181c30}
.broadcast-effects.is-revealing .result-box{animation:winner-arrival .65s cubic-bezier(.2,.85,.25,1) both;background:linear-gradient(135deg,#35452a,#202c2c);box-shadow:0 0 0 1px #d9f478,0 0 38px #d9f47820;border-color:#d9f478}
.broadcast-effects.is-revealing .wheel-hub{border-color:#d9f478;box-shadow:0 0 0 6px #222b35,0 0 0 8px #d9f47877,0 0 50px #d9f47840}
.broadcast-effects.is-revealing .wheel-board::before{box-shadow:0 10px 0 #0e1220,0 13px 0 #51566e,0 0 35px #d9f47845}
@keyframes stage-sweep{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes marquee-orbit{to{transform:rotate(360deg)}}
@keyframes spin-progress{to{transform:scaleX(1)}}
@keyframes winner-arrival{from{transform:translateY(10px) scale(.96);opacity:.5}to{transform:translateY(0) scale(1);opacity:1}}
@media(max-width:760px){
  .broadcast-effects .wheel-board::before{inset:-11px}
  .wheel-lights{inset:-10px}.wheel-lights i{width:4px;height:4px}
  .broadcast-effects .wheel-hub{box-shadow:0 0 0 3px #171c2e,0 0 0 4px #8f92ad,0 8px 15px #070b2299}
  body.stage-mode .stage-card.is-wheel .wheel-board{width:min(100%,40dvh,clamp(140px,calc(100dvh - 380px),400px))}
  .stage-extra-actions{gap:6px 8px}
}
@media(prefers-reduced-motion:reduce){
  .stage-atmosphere,.wheel-lights,.spin-progress,.celebration-canvas{display:none!important}
  .stage-card *{animation:none!important;transition:none!important}
}

/* Promote only the brief moving light layers, without filtering their parent. */
.broadcast-effects.is-spinning .stage-atmosphere::before,.broadcast-effects.is-spinning .stage-atmosphere::after,.broadcast-effects.is-spinning .wheel-lights,.broadcast-effects.is-spinning .spin-progress{will-change:transform}

/* A real WebGL model replaces the flat face, hub and pointer together. */
.wheel-three-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.wheel-board.has-3d-wheel{filter:none}
.wheel-board.has-3d-wheel::before{display:none}
.wheel-board.has-3d-wheel .wheel-disc{visibility:hidden;transform:none!important;box-shadow:none}
.wheel-board.has-3d-wheel .wheel-pointer,.wheel-board.has-3d-wheel .wheel-hub,.wheel-board.has-3d-wheel .wheel-lights{visibility:hidden}
.wheel-board.has-3d-wheel .wheel-three-canvas{visibility:visible}
.wheel-board:not(.has-3d-wheel) .wheel-three-canvas{visibility:hidden}
.stage-card.is-wheel{background:radial-gradient(ellipse at 50% 40%,#394451 0,#202b39 40%,#111c2d 90%)}
.stage-card.is-wheel .stage-atmosphere{display:none}
@media(max-width:760px){body.stage-mode .stage-card.is-wheel .wheel-board{width:min(100%,44dvh,clamp(140px,calc(100dvh - 330px),400px))}}

/* Ticket draw: a compact belt beneath a fixed selection gate. */
.stage-card:not(.is-wheel){background:radial-gradient(ellipse at 50% 35%,#334951 0,#182c37 48%,#121e2c 90%)}
.stage-card:not(.is-wheel) .stage-atmosphere{display:none}
#reelViewport{--ticket-width:220px;--ticket-height:146px;height:220px;border:1px solid #68716f;border-radius:18px;background:linear-gradient(180deg,#101c26,#263d44 48%,#101c26);box-shadow:inset 0 5px 20px #030c1660,0 2px 0 #8c92752e;contain:paint}
#reelViewport .reel-track{gap:20px;will-change:auto}
.is-spinning #reelViewport .reel-track{will-change:transform}
#reelViewport .reel-card{position:relative;width:var(--ticket-width);height:var(--ticket-height);border-radius:10px;border:1px solid #fffae1;background:linear-gradient(155deg,#fff9e9,#dfd4b9);color:#182f36;padding:18px 16px 18px 54px;box-shadow:0 4px 0 #a69d89;overflow:hidden}
#reelViewport .reel-card::after{content:'';position:absolute;left:58px;right:18px;bottom:15px;height:5px;background:repeating-linear-gradient(90deg,#52605d 0 2px,transparent 2px 5px,#52605d 5px 6px,transparent 6px 9px);opacity:.25}
#reelViewport .reel-card small{position:absolute;inset:0 auto 0 0;width:40px;display:flex;align-items:center;justify-content:center;margin:0;border-right:2px dashed #c1b596;background:#263e45;color:#efdfb5;font-size:11px;letter-spacing:.12em;writing-mode:vertical-rl;transform:rotate(180deg)}
#reelViewport .reel-card strong{font-size:clamp(19px,2.2vw,36px);line-height:1.3;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-height:3.9em}
#reelViewport .reel-card.winner-card{background:linear-gradient(145deg,#fff7d7,#ecd097);border-color:#f2d697;box-shadow:0 4px 0 #ad8d4b}
#reelViewport .center-line{top:50%;bottom:auto;left:50%;width:calc(var(--ticket-width) + 14px);height:calc(var(--ticket-height) + 16px);transform:translate(-50%,-50%);border:2px solid #e9cc8d;border-radius:15px;background:transparent;box-shadow:0 0 0 4px #f2d79712;z-index:4}
#reelViewport .center-line::before,#reelViewport .center-line::after{left:50%;transform:translateX(-50%);border-left:9px solid transparent;border-right:9px solid transparent}
#reelViewport .center-line::before{top:-20px;border-top:12px solid #e9cc8d}
#reelViewport .center-line::after{bottom:-20px;border-bottom:12px solid #e9cc8d}
#reelViewport .reel-shade{width:12%;z-index:3;pointer-events:none}
#reelViewport .reel-shade-left{background:linear-gradient(90deg,#101c26,transparent)}
#reelViewport .reel-shade-right{background:linear-gradient(-90deg,#101c26,transparent)}
.stage-card:not(.is-wheel) .reel-caption{color:#e5cf9d;letter-spacing:.22em;font-size:10px}
.stage-card:not(.is-wheel) .reel-caption span{color:#8baaa7}
.stage-card:not(.is-wheel) .reel-scale{opacity:.45}
body.stage-mode #reelViewport{--ticket-width:clamp(260px,27vw,430px);--ticket-height:min(72%,320px);height:auto}
body.stage-mode #reelViewport .reel-card strong{font-size:clamp(25px,3vw,46px)}
@media(max-width:760px){
  #reelViewport{--ticket-width:min(68vw,260px);--ticket-height:130px;height:194px;border-radius:12px}
  body.stage-mode #reelViewport{--ticket-width:min(68vw,260px);--ticket-height:min(70%,240px)}
  #reelViewport .reel-track{gap:14px}
  #reelViewport .reel-card{padding-left:43px;padding-right:10px}
  #reelViewport .reel-card small{width:32px;font-size:9px}
  #reelViewport .reel-card::after{left:44px;right:12px;bottom:10px}
  body.stage-mode #reelViewport .reel-card strong{font-size:clamp(21px,6vw,30px)}
}

/* Clear sound state, with music and volume kept in one accessible dialog. */
.sound-controls{display:inline-flex;align-items:center;gap:5px;max-width:100%}
#soundButton{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:1px solid #6c778b;background:#242d3b;color:#c3cad4;white-space:nowrap}
#soundButton[aria-pressed="true"]{background:#d9f478;color:#20331c;border-color:#d9f478;box-shadow:inset 0 0 0 1px #f5ffd099}
#soundButton[aria-pressed="false"]{background:#192230;color:#bfc6d2;border-color:#697489}
#soundButton svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#soundButton .sound-slash{display:none}
#soundButton[aria-pressed="false"] .sound-slash{display:block}
#soundButton[aria-pressed="false"] .sound-waves{display:none}
.sound-settings-button{min-height:44px;padding:7px 10px;border:1px solid #626e80;border-radius:9px;background:#202c3c;color:#f1f3f5;font-size:11px;font-weight:700;white-space:nowrap}
.audio-dialog{width:min(480px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow-y:auto}
.audio-dialog .dialog-top{align-items:center;margin-bottom:22px;letter-spacing:0}
.audio-dialog h2{margin:0;font-size:22px}
.audio-dialog label{font-size:13px;font-weight:700}
.audio-volume-title{display:flex;justify-content:space-between;align-items:center}
#volumeValue{font-weight:800;color:#d9f478;font-variant-numeric:tabular-nums}
#volumeInput{display:block;width:100%;height:44px;margin:5px 0 0;accent-color:#d9f478;cursor:pointer}
.audio-dialog .audio-state{margin:0 0 22px;font-size:12px;color:#a6aebe}
.audio-dialog .audio-state[data-enabled="true"]{color:#d9f478}
#musicSelect{display:block;width:100%;min-height:46px;margin-top:9px;border:1px solid #5d697e;border-radius:10px;padding:10px 12px;background:#182232;color:#f1f3f5;font:inherit;font-size:14px}
#musicSelect:focus-visible{outline:3px solid #d9f478;outline-offset:3px}
.audio-dialog .music-description{min-height:36px;margin:10px 0 16px;font-size:12px;line-height:1.5;color:#b8c4cf}
.audio-file-controls{display:flex;gap:8px;flex-wrap:wrap}
.audio-file-controls .button{flex:1;min-height:44px;padding:10px 12px}
.audio-dialog .music-file-name{font-size:12px;color:#d9f478;overflow-wrap:anywhere}
.audio-dialog .audio-file-help{font-size:11px;line-height:1.6;margin:15px 0;color:#adb9c8}
.audio-done{width:100%;min-height:44px;margin-top:10px}
@media(max-width:760px){
  body.stage-mode .stage-card.is-wheel .wheel-board{width:min(100%,40dvh,clamp(120px,calc(100dvh - 370px),400px))}
  .sound-controls{gap:5px}
  .sound-settings-button{padding:7px 9px}
  .audio-dialog{padding:20px}
}

/* Clean audience surface; presenter controls never enter the captured scene. */
body.stage-mode .site-header,body.stage-mode .stage-controls,body.stage-mode .stage-extra-actions,body.stage-mode .design-switch,
body.stage-mode .stage-rule,body.stage-mode .reel-caption,body.stage-mode .reel-scale,
body.stage-mode .result-detail{display:none!important}
body.stage-mode .app-shell{padding:0}
body.stage-mode .workspace{margin:0;max-width:none}
body.stage-mode .stage-card,body.stage-mode .stage-card.is-wheel{
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;
  height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden;
  padding:clamp(8px,1.2vw,16px);border:0;border-radius:0;gap:4px;
}
body.stage-mode .stage-header{flex:none;padding:0;align-items:center;gap:16px}
body.stage-mode #stage-heading{font-size:clamp(18px,2vw,28px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
body.stage-mode .stage-header>div:first-child{min-width:0}
body.stage-mode .stage-round{height:auto;min-height:0;border:0;flex-direction:row;display:flex;gap:8px;align-items:baseline;flex-shrink:0;opacity:.65;padding:4px 8px;min-width:0}
body.stage-mode .stage-round strong{font-size:20px}
body.stage-mode .stage-round span{font-size:10px}
body.stage-mode .stage-card.is-wheel .wheel-area{flex:1;min-height:0;height:auto;margin:0;display:flex;align-items:center;justify-content:center;container-type:size}
body.stage-mode .stage-card.is-wheel .wheel-board{width:min(100cqw,100cqh);max-width:100%}
body.stage-mode .stage-card.is-wheel .wheel-board:not(.has-3d-wheel){width:max(0px,min(calc(100cqw - 44px),calc(100cqh - 44px)))}
body.stage-mode #stageCard .stage-actions{display:flex;align-items:center;justify-content:center;flex:none;margin:0;min-width:0;height:clamp(48px,8dvh,72px)}
body.stage-mode #resultBox{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px 16px;max-width:calc(100% - 76px);margin:0;padding:6px 14px;min-height:0;height:auto;text-align:center;border:0;border-radius:12px;background:transparent;box-shadow:none}
body.stage-mode #resultKicker{flex:none;margin:0;font-size:10px;letter-spacing:.04em}
body.stage-mode #resultName{min-width:0;margin:0;font-size:clamp(18px,2.2vw,30px);line-height:1.15;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
body.stage-mode #resultBox.is-idle{display:none}
body.stage-mode .stage-card:not(.is-wheel) .reel-area{flex:1;min-height:0;margin:0;display:flex;flex-direction:column;justify-content:center;container-type:size}
body.stage-mode .stage-card:not(.is-wheel) .reel-viewport{flex:1;min-height:0}
body.stage-mode .stage-card:not(.is-wheel) .reel-card{width:clamp(180px,34vw,520px);height:80%}
body.stage-mode .stage-card:not(.is-wheel) .reel-card strong{font-size:clamp(24px,4vw,62px)}
.stage-remote{position:fixed;right:16px;bottom:12px;z-index:100;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:8px}
.stage-remote[hidden],.stage-remote [hidden],.output-status[hidden]{display:none!important}
#stageMenuButton{width:44px;height:44px;border:1px solid #697487;border-radius:50%;background:#131b2b;color:#fff;font-size:24px;opacity:.18;cursor:pointer}
#stageMenuButton:hover,#stageMenuButton:focus-visible,#stageMenuButton[aria-expanded="true"]{opacity:1}
#stageMenu{max-width:calc(100vw - 32px);padding:16px;border:1px solid #697487;border-radius:14px;background:#131b2bf5;box-shadow:0 8px 40px #0009;display:flex;flex-wrap:wrap;gap:8px}
#stageMenu p{flex-basis:100%;font-size:12px;color:#d5ddeb;margin:0 0 8px}
#stageMenu .button{min-height:44px}
.output-status{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100;padding:10px 20px;background:#131b2bec;color:#d5ddeb;border-radius:20px;font-size:13px;text-align:center}
body.audience-mode .stage-remote,body.audience-mode .toast{display:none!important}
body.stage-mode #reelViewport{height:100%;--ticket-width:clamp(180px,36vw,680px);--ticket-height:max(80px,calc(100cqh - 80px))}
body.stage-mode #reelViewport .reel-card strong{font-size:clamp(24px,4vw,64px)}
@media(max-width:600px){
 body.stage-mode #resultBox{max-width:calc(100% - 40px);padding:4px;gap:8px}
 body.stage-mode #resultKicker{font-size:8px;max-width:90px}
 body.stage-mode #reelViewport{--ticket-width:72vw;--ticket-height:max(80px,calc(100cqh - 64px))}
}

/* Reserve geometry while loading; reveal a complete renderer, never the flat fallback first. */
.wheel-board.is-wheel-loading>*{visibility:hidden!important}
.wheel-board.is-wheel-loading::before{display:none!important}
.wheel-board.is-wheel-loading::after{content:'';position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;border:2px solid #ffffff24;border-top-color:#d9f478;border-radius:50%;animation:wheel-loading .8s linear infinite}
@keyframes wheel-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.wheel-board.is-wheel-loading::after{animation:none}}

/* Presenter-only output controls and fitted, centered broadcast canvas. */
.motion-button{min-height:44px}
.motion-button[aria-pressed="true"]{border-color:#d9f478;color:#d9f478}
.presentation-controls{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid #ffffff18}
.presentation-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;max-width:340px}
.presentation-actions button{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.presentation-controls label,#stageMenu label{font-size:12px;color:#c3ced9}
.presentation-controls select,#stageAspectSelect{min-width:0;min-height:44px;padding:8px;border:1px solid #637587;border-radius:8px;background:#162631;color:#eef2e9;font:inherit;font-size:12px}
#aspectPreviewButton{grid-column:1/-1;justify-self:start;min-height:36px;color:#d9f478}
body.stage-mode{background:#080d14}
body.stage-mode .workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:0;place-items:center;width:100%;height:100dvh;min-height:0;overflow:hidden}
body.stage-mode #stageCard{width:var(--stage-width,100vw);height:var(--stage-height,100dvh);min-height:var(--stage-height,100dvh);max-height:var(--stage-height,100dvh);box-sizing:border-box}
body.stage-mode[data-stage-aspect="portrait"] #stageCard{padding:8px}
body.stage-mode[data-stage-aspect="portrait"] #stage-heading{font-size:clamp(14px,1.5vw,22px)}
body.stage-mode[data-stage-aspect="portrait"] #stageCard .stage-actions{height:48px}
body.stage-mode[data-stage-aspect="portrait"] #resultBox{max-width:100%;gap:8px;padding:4px}
body.stage-mode[data-stage-aspect="portrait"] #resultName{font-size:clamp(16px,1.8vw,26px)}
body.stage-mode[data-stage-aspect="portrait"] #resultKicker{font-size:8px}
body.stage-mode[data-stage-aspect="portrait"] #reelViewport{--ticket-width:72cqw}
.draw-scene[hidden]{display:none!important}
.draw-scene{position:relative;min-width:0;height:clamp(280px,32vw,420px);overflow:hidden;background:radial-gradient(ellipse at center,#44606038,transparent 70%)}
.draw-scene canvas{display:block;width:100%;height:100%}
.race-area[hidden],.race-help[hidden]{display:none!important}
.race-area{position:relative;flex:1;min-width:0;height:clamp(350px,36vw,460px);min-height:350px;margin-top:18px;overflow:hidden;border:1px solid #547574;border-radius:12px;background:#132b32}
/* Keep the backing store out of flex sizing to prevent a ResizeObserver growth loop. */
.race-area canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.race-hud{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:linear-gradient(#122833f5,#122833dc,transparent);pointer-events:none;font-size:12px;font-weight:700;color:#d9f478}
.race-status{flex:none}
.race-leader{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#ecf4e5;text-align:right}
.race-help{margin:10px 2px 0;color:#b9ccc9;font-size:11px;line-height:1.6}
.race-reveal{position:absolute;left:6%;right:6%;top:62%;bottom:5%;display:grid;align-content:center;gap:8px;padding:10px 16px;border-radius:12px;background:#102631ed;text-align:center;pointer-events:none;color:#eff7e4}
.race-reveal[hidden]{display:none!important}
.race-reveal span{font-size:11px;font-weight:800;letter-spacing:.08em;color:#d9f478}
.race-reveal strong{font-size:var(--race-name-size,24px);line-height:1.18;overflow-wrap:anywhere}
#stageCard[data-design="race"]{background:radial-gradient(ellipse at 50% 36%,#29454a,#13212c 78%)}
body.stage-mode #stageCard .race-area{flex:1;min-height:0;height:auto;margin-top:8px}
body.stage-mode .race-help{display:none}
@media(max-width:480px){.race-area{min-height:370px;margin-top:12px}.race-hud{gap:6px;padding:10px;font-size:11px}}
#stageCard[data-design="cards"]{background:radial-gradient(ellipse at 50% 36%,#31444a,#13212c 78%)}
#stageCard[data-design="balls"]{background:radial-gradient(ellipse at 50% 42%,#343955,#141e2e 78%)}
body.stage-mode #stageCard .draw-scene{flex:1;min-height:0;height:auto}

.draw-scene canvas[hidden]{display:none!important}
.draw-scene.is-scene-loading canvas,.race-area.is-scene-loading canvas{visibility:hidden}
.draw-scene.is-scene-loading::after,.race-area.is-scene-loading::after{content:'';position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;border:2px solid #ffffff24;border-top-color:#d9f478;border-radius:50%;animation:wheel-loading .8s linear infinite}
@media(prefers-reduced-motion:reduce){.draw-scene.is-scene-loading::after,.race-area.is-scene-loading::after{animation:none}}

.output-guide{margin:0 0 20px;padding:16px 20px;border:1px solid #45616c;border-radius:16px;background:#1a2a35}
.output-guide-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.output-guide h2{margin:0;font-size:16px;color:#eef3e8}
.output-guide .button{padding:8px 12px;min-height:40px;font-size:12px}
.output-guide ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 30px;padding-left:20px;margin:14px 0;font-size:13px;line-height:1.6;color:#edf0e8}
.output-guide li::marker{color:#d9f478;font-weight:800}
.output-guide p{margin:4px 0;font-size:12px;line-height:1.5;color:#b9c9d0}
body.stage-mode .output-guide{display:none}
@media(max-width:760px){.output-guide{padding:14px}.output-guide-heading{align-items:flex-start;flex-wrap:wrap}.output-guide ol{grid-template-columns:1fr;gap:8px}}

.scene-result-label{position:absolute;z-index:3;transform:translate(-50%,-50%);pointer-events:none;text-align:center;color:#17313b;font-family:Arial,sans-serif;font-weight:800;line-height:1.15;white-space:pre-wrap;overflow-wrap:anywhere}
.scene-result-label[hidden]{display:none!important}
body.stage-mode .stage-card.is-wheel .wheel-board.has-3d-wheel{width:min(100cqw,calc(100cqh * .82));aspect-ratio:.82}

.wheel-label-layer{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.wheel-board:not(.has-3d-wheel) .wheel-label-layer{display:none!important}

/* Keep output options beside the stage and use the available setup card height. */
.stage-card .presentation-controls{grid-column:1/-1;grid-template-columns:auto minmax(120px,200px) minmax(0,1fr);justify-content:start;position:relative;z-index:6;margin:18px 0 0;padding:12px 0;border-top:1px solid #ffffff18;border-bottom:1px solid #ffffff18}
.stage-card #aspectPreviewButton{grid-column:auto;min-height:44px;padding:8px 12px}
body.stage-mode .presentation-controls{display:none}
body:not(.stage-mode) .stage-card:not(.is-wheel){display:flex;flex-direction:column}
body:not(.stage-mode) .stage-card:not(.is-wheel) .stage-actions{display:block;flex:none}
body:not(.stage-mode) .stage-card:not(.is-wheel) .reel-area{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:260px}
body:not(.stage-mode) .stage-card:not(.is-wheel) .reel-viewport{height:240px}
body:not(.stage-mode) .stage-card:not(.is-wheel) .reel-card{height:166px}
body:not(.stage-mode) .draw-scene{flex:1;min-height:340px}
body:not(.stage-mode) .stage-card.is-wheel{--setup-wheel-height:clamp(340px,32vw,420px);display:flex;flex-direction:column}
body:not(.stage-mode) .stage-card.is-wheel .stage-actions{display:block;flex:none}
body:not(.stage-mode) .stage-card.is-wheel .result-box{margin-top:20px}
body:not(.stage-mode) .stage-card.is-wheel .wheel-area{flex:1 0 auto;min-height:var(--setup-wheel-height);height:var(--setup-wheel-height);margin:0}
body:not(.stage-mode) .stage-card.is-wheel .wheel-board{width:max(0px,min(calc(100% - 44px),calc(var(--setup-wheel-height) - 44px)))}
body:not(.stage-mode) .stage-card.is-wheel .wheel-board.has-3d-wheel{width:min(100%,calc(var(--setup-wheel-height) * .82));aspect-ratio:.82}
@media(max-width:1050px){
  .stage-card .presentation-controls{grid-template-columns:auto minmax(0,1fr)}
  .stage-card .presentation-actions{grid-column:1/-1;width:100%}
}
@media(max-width:760px){
  .stage-card .presentation-controls{grid-template-columns:auto minmax(0,1fr);gap:8px;margin-top:14px}
  .stage-card #aspectPreviewButton{padding:8px 0}
  body:not(.stage-mode) .stage-card:not(.is-wheel) .reel-area{min-height:220px}
  body:not(.stage-mode) .stage-card:not(.is-wheel) .reel-viewport{height:184px}
  body:not(.stage-mode) .stage-card:not(.is-wheel) .reel-card{height:122px}
  body:not(.stage-mode) .draw-scene{min-height:280px}
  body:not(.stage-mode) .stage-card.is-wheel{--setup-wheel-height:clamp(280px,32vw,420px)}
}

/* Reserve the complete race viewport before its renderer is ready. */
body:not(.stage-mode) #stageCard[data-design="race"] .race-area{--race-height:clamp(560px,65dvh,680px);flex:0 0 var(--race-height);height:var(--race-height);min-height:var(--race-height)}
.race-expand-button{display:none}
#stageCard[data-design="race"] .race-expand-button{display:block}
#stageCard[data-design="race"] #fullscreenButton{display:none}
body:not(.stage-mode) #stageCard[data-design="race"]>.stage-controls{flex:none;margin-top:16px}
@media(max-width:760px){body:not(.stage-mode) #stageCard[data-design="race"] .race-area{--race-height:clamp(480px,60dvh,560px)}}
@media(max-width:600px){
  .race-hud{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:10px 12px}
  .race-status{font-size:12px}
  .race-leader{font-size:16px;line-height:1.25;text-align:left}
}