header,main{position:relative;z-index:1}.fx-scenery,.fx-ambient,.fx-canvas,.fx-screen-glow{position:fixed;inset:0;pointer-events:none}.fx-scenery{z-index:0;overflow:hidden}.fx-ambient{width:100%;height:100%}.fx-canvas{z-index:22}.fx-screen-glow{z-index:21;opacity:0}.fx-beam{position:absolute;top:-140px;width:240px;height:650px;background:linear-gradient(180deg,#58bfff27,transparent 90%);clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);transform-origin:50% 0;filter:blur(2px);opacity:0}.beam-left{left:16%;--beam-from:-24deg;--beam-to:22deg}.beam-right{right:12%;--beam-from:28deg;--beam-to:-19deg;animation-delay:-7s!important;background:linear-gradient(180deg,#c37eff20,transparent 90%)}.fx-motion .fx-beam{opacity:1;animation:fx-spotlight 17s ease-in-out infinite alternate}.fx-glowsticks{position:absolute;inset:0;opacity:0}.fx-motion .fx-glowsticks{opacity:1}.fx-glowsticks span{position:absolute;left:var(--x);top:var(--y);width:5px;height:45px;border-radius:5px;background:#83efff;box-shadow:0 0 10px #3ecaffaa,0 0 23px #3ecaff66;opacity:.45;transform-origin:50% 110%;animation:fx-wave 2.8s ease-in-out infinite alternate;animation-delay:var(--delay)}.fx-glowsticks span:nth-child(3n){background:#dbacff;box-shadow:0 0 12px #b45dffa0}.fx-motion .cheer{animation:fx-cheer-float 4.2s ease-in-out infinite alternate}.fx-motion .cheer-two{animation-delay:-2s}.fx-motion .crown{animation:fx-crown-glow 4s ease-in-out infinite alternate}.fx-motion .slot-avatar{animation:fx-avatar-bob 3.2s ease-in-out infinite alternate}.fx-motion .rival{animation-delay:-1.3s}.fx-motion .primary:not(:disabled){background-size:180% 100%;animation:fx-button-sheen 7s ease-in-out infinite}.fx-urgent #timer{animation:fx-timer-urgent .9s ease-in-out infinite alternate}.fx-ring{position:fixed;z-index:23;pointer-events:none;width:100px;height:100px;border:2px solid;border-radius:50%;opacity:0}.fx-toast{position:fixed;left:50%;top:88px;z-index:24;pointer-events:none;opacity:0;transform:translate(-50%,-8px) scale(.96);transition:opacity .18s,transform .25s;white-space:nowrap;font:900 clamp(17px,3vw,34px) 'Space Grotesk','Noto Sans JP',sans-serif;letter-spacing:3px;text-shadow:0 3px 12px #020c2d,0 0 22px currentColor;background:linear-gradient(90deg,transparent,#061332d9,transparent);padding:9px 40px;border-bottom:1px solid #9de8ff66}.fx-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}.fx-paused .fx-scenery *,.fx-paused .arena-backdrop,.fx-paused .cheer,.fx-paused .crown,.fx-paused .slot-avatar,.fx-paused .primary{animation-play-state:paused!important}.motion-panel{position:fixed;left:18px;bottom:18px;z-index:50;font:700 12px 'Noto Sans JP',sans-serif;color:#e7f2ff}.motion-panel summary{list-style:none;cursor:pointer;border:1px solid #527fba;border-radius:30px;background:#081730ed;padding:11px 18px;box-shadow:0 4px 24px #0007;user-select:none}.motion-panel summary::-webkit-details-marker{display:none}.motion-panel[open] summary{color:#ffbdcd;border-color:#ff9eb6}.motion-options{position:absolute;left:0;bottom:52px;width:245px;border:1px solid #6585b9;background:linear-gradient(145deg,#14294bfa,#07132dfa);border-radius:17px;padding:20px;box-shadow:0 15px 50px #0009;backdrop-filter:blur(12px)}.motion-options>div{font-size:10px;letter-spacing:1.8px;color:#ffb7cc;margin-bottom:16px}.motion-options button{display:block;width:100%;margin-bottom:12px;padding:11px;border:1px solid #5879a9;background:#1e3559;border-radius:8px;color:#f1f6ff;font:700 12px 'Noto Sans JP',sans-serif;cursor:pointer}.motion-options button:hover{background:#294c78}.motion-options small{display:block;font-size:10px;line-height:1.7;color:#afc4df}.motion-panel :focus-visible{outline:2px solid #7beaff;outline-offset:4px}@keyframes fx-spotlight{from{transform:rotate(var(--beam-from));opacity:.45}to{transform:rotate(var(--beam-to));opacity:.8}}@keyframes fx-stage-breathe{from{transform:scale(1.005) translateY(0)}to{transform:scale(1.025) translateY(-3px)}}@keyframes fx-wave{from{transform:rotate(-19deg);opacity:.28}to{transform:rotate(20deg);opacity:.55}}@keyframes fx-cheer-float{from{translate:0 0}to{translate:0 -6px}}@keyframes fx-crown-glow{from{filter:drop-shadow(0 0 1px #ffe39c20)}to{filter:drop-shadow(0 0 8px #ffd07888)}}@keyframes fx-avatar-bob{from{translate:0 0}to{translate:0 -3px}}@keyframes fx-button-sheen{0%,70%,100%{background-position:0 50%}85%{background-position:100% 50%}}@keyframes fx-timer-urgent{from{text-shadow:0 0 2px #ff81954d}to{text-shadow:0 0 16px #ff8195a0;color:#ffc4c7}}@media(max-width:620px){.motion-panel{left:10px;bottom:10px;font-size:10px}.motion-panel summary{padding:10px 13px}.motion-options{width:230px;max-height:calc(100dvh - 90px);overflow-y:auto;bottom:47px;padding:17px}.fx-beam{width:140px;height:450px}.fx-glowsticks span{width:3px;height:29px}.fx-toast{top:110px;letter-spacing:1px;padding:8px 20px;font-size:17px}}@media(prefers-reduced-motion:reduce){.fx-scenery,.fx-canvas,.fx-screen-glow,.fx-ring,.fx-toast{display:none!important}.arena-backdrop,.cheer,.crown,.slot-avatar,.primary,#timer{animation:none!important;transition:none!important}}body:not(.fx-motion) .fx-glowsticks span{animation:none}body:not(.fx-motion) .fx-scenery{display:none}
html,body{overflow-x:clip}
/* Separate animated character layer; a static first frame remains when motion is off. */
.arena-backdrop{--stage-height:1000px}
.character-ready .arena-backdrop{background-image:linear-gradient(180deg,#03102a05 0%,#03102a00 35%,#040d2530 66%,#040d25 100%),url('assets/arena-animation-plate.png')}
.streamer-actor{position:absolute;left:50%;top:calc(var(--stage-height)*.095);width:calc(var(--stage-height)*.38);aspect-ratio:1333/1180;transform:translateX(-50%);pointer-events:none;isolation:isolate;z-index:1}
.streamer-react,.streamer-sprite{position:absolute;inset:0;transform-origin:50% 82%}
.streamer-sprite{background:url('assets/streamer-typing-4frames.png') 0 0/200% 200% no-repeat;filter:drop-shadow(0 0 11px #ff729b77)}
.streamer-aura{position:absolute;left:50%;top:48%;width:125%;height:116%;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,#ff759b90 0deg 12deg,#ffb38d14 12deg 25deg,#88dcff66 25deg 29deg,#ff759b00 29deg 40deg);clip-path:polygon(50% 0,57% 22%,74% 4%,73% 29%,96% 18%,84% 42%,100% 50%,82% 59%,96% 81%,73% 74%,74% 100%,56% 80%,50% 100%,42% 78%,25% 98%,27% 72%,4% 82%,16% 58%,0 50%,18% 41%,5% 19%,28% 27%,26% 4%,43% 23%);opacity:.7;z-index:-1}
.streamer-keyglow{position:absolute;left:24%;right:24%;bottom:21%;height:7%;border-radius:50%;background:#ff8aad;filter:blur(10px);opacity:.4;mix-blend-mode:screen}
.fx-motion .streamer-sprite{animation:streamer-continuous-idle 2.8s ease-in-out infinite alternate}
.fx-motion .streamer-actor{animation:streamer-shoulders 2.8s ease-in-out infinite}
.fx-motion .streamer-aura{animation:streamer-energy 2.4s ease-in-out infinite alternate}
.fx-motion .streamer-keyglow{animation:streamer-key-light .32s ease-in-out infinite alternate}
.streamer-sprite.rig-ready{animation:none!important;background-image:none;filter:none}.streamer-mesh{display:block;width:100%;height:100%;pointer-events:none}
.fx-motion.fx-typing .streamer-keyglow{opacity:.8}
.fx-motion.fx-typing #typing{box-shadow:0 0 22px #5cecff55,inset 0 0 17px #2d97c62a}
.fx-paused .streamer-actor,.fx-paused .streamer-sprite,.fx-paused .streamer-aura,.fx-paused .streamer-keyglow{animation-play-state:paused!important}
.typing-caret-mirror{position:fixed!important;left:-10000px!important;top:0!important;visibility:hidden!important;pointer-events:none!important;white-space:pre-wrap!important;overflow-wrap:break-word!important;border-style:solid!important;border-color:transparent!important;height:auto!important;min-height:0!important;margin:0!important;z-index:-100!important}
@keyframes streamer-continuous-idle{from{transform:rotate(-.45deg) translateY(0)}to{transform:rotate(.45deg) translateY(-2px)}}
@keyframes streamer-shoulders{0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes streamer-energy{from{scale:.96;opacity:.5;rotate:-3deg}to{scale:1.08;opacity:.85;rotate:3deg}}
@keyframes streamer-key-light{from{scale:.9;opacity:.25}to{scale:1.1;opacity:.65}}
@media(min-width:1600px){.arena-backdrop{--stage-height:1100px}}
@media(max-width:950px){.arena-backdrop{--stage-height:850px}}
@media(max-width:620px){.arena-backdrop{--stage-height:600px}.streamer-sprite{filter:drop-shadow(0 0 6px #ff729b77)}.streamer-aura{opacity:.55}}
@media(prefers-reduced-motion:reduce){.streamer-actor,.streamer-sprite,.streamer-aura,.streamer-keyglow{animation:none!important}.streamer-aura{opacity:.35}.streamer-keyglow{opacity:.2}}


/* Independent transparent spectators, composited over a motionless clean plate. */
.spectators-ready.character-ready .arena-backdrop{background-image:linear-gradient(180deg,#03102a05 0%,#03102a00 35%,#040d2530 66%,#040d25 100%),url('assets/arena-crowd-clean.png')}
.spectator-plane{position:absolute;left:50%;top:0;transform:translateX(-50%);pointer-events:none;overflow:visible;z-index:0}
.spectator{position:absolute;translate:-50% -100%;background-image:url('assets/spectators-atlas.png');background-size:500% 200%;background-repeat:no-repeat;transform:translateY(0);pointer-events:none}
.fx-motion .spectator{animation:spectator-hop var(--pace) linear var(--delay) infinite;will-change:transform}
.fx-paused .spectator{animation-play-state:paused!important}
@keyframes spectator-hop{0%,100%{transform:translateY(0);animation-timing-function:cubic-bezier(.18,.6,.32,1)}30%{transform:translateY(calc(var(--jump)*var(--crowd-scale)*-1));animation-timing-function:cubic-bezier(.55,0,.85,.5)}60%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.spectator{animation:none!important;transform:none!important}}


/* Scene depth: stadium < cheering spectators < front-row silhouettes < streamer < UI. */
.spectator{z-index:1}
.spectator-foreground{position:absolute;inset:0;z-index:500;mask-image:linear-gradient(180deg,#000 45%,#000c 66%,transparent 100%);background:url('assets/arena-crowd-clean.png') center top/100% 100% no-repeat;pointer-events:none;clip-path:polygon(0 37%,3% 40%,6% 44%,9% 44%,10% 42%,12% 42%,13% 40%,16% 38%,19% 39%,21% 42%,23% 41%,26% 42%,28% 40%,32% 39%,36% 42%,40% 40%,45% 39%,50% 42%,55% 40%,60% 41%,65% 40%,69% 43%,73% 40%,77% 42%,81% 41%,85% 44%,89% 43%,92% 41%,96% 39%,100% 38%,100% 100%,0 100%)}
.streamer-actor{z-index:3}

/* Keep opaque artwork as the base; add arena-colored light through its alpha. */
.spectator{background-image:none;isolation:isolate}
.spectator::before,.spectator::after{content:'';position:absolute;inset:0;pointer-events:none}
.spectator::before{background-image:url('assets/spectators-atlas.png');background-size:var(--atlas-size);background-position:var(--atlas-position);background-repeat:no-repeat;filter:brightness(.70) saturate(.78) contrast(1.04)}
.spectator::after{background:linear-gradient(var(--light-angle),#42ccffb0 0%,#1b79da40 24%,#0b3b8310 48%,#ff7f8a12 70%,#ffc5b853 100%);mask-image:url('assets/spectators-atlas.png');mask-size:var(--atlas-size);mask-position:var(--atlas-position);mask-repeat:no-repeat;mix-blend-mode:plus-lighter;opacity:.58}
@supports not (mix-blend-mode:plus-lighter){.spectator::after{mix-blend-mode:screen;opacity:.48}}