/* 9.0: one geometry for moving and settled objects inside the optical aperture.
   Outer proportions stay the same: 4.96/4.2 ~= 4.25/3.6 from the approved glass.
   Content occupies y=14.5%..84.5%, above the photographic elliptical foot. */
body[data-room] .reels{
 --reel-height-factor:4.2;--reel-width-factor:4.96;--row-max:206;
 --row:clamp(32px,min(20.5vw,calc((100svh - 305px)/4.2)),206px);
 width:calc(var(--row)*4.96);gap:calc(var(--row)*.117)
}
body[data-room] .reels .reel{height:calc(var(--row)*4.2);padding:calc(var(--row)*.58) 0 calc(var(--row)*.62);grid-template-rows:repeat(3,var(--row))}
body[data-room] .reels .symbol,body[data-room] .reels .strip-cell{
 height:var(--row);min-height:var(--row);display:flex;align-items:center;justify-content:center;padding:0;border:0;box-sizing:border-box
}
body[data-room] .reels .symbol .symbol-art,
body[data-room] .reels .symbol.center .symbol-art,
body[data-room] .reels .symbol:last-child .symbol-art,
body[data-room] .reels .strip-cell .symbol-art{
 width:calc(var(--row)*.94);height:calc(var(--row)*.94);max-width:76%;
 transform:none;transition:none;
 /* Legacy motion CSS removed the room tint with !important, causing a color
    pop on landing. The same fixed tint is now used in both states. */
 filter:hue-rotate(var(--jewel-hue,0deg)) drop-shadow(0 3px 4px #0007)!important
}
body[data-room] .reels .reel-motion-window{
 clip-path:inset(13.7% 10% 15.1% 10% round 16% / 3%);
 -webkit-clip-path:inset(13.7% 10% 15.1% 10% round 16% / 3%);
 contain:paint
}
body[data-room] .reels .reel-motion-window>.reel-strip{will-change:transform;backface-visibility:hidden}
body[data-room] .reels .reel::before{inset:14% 11% 15.1%}
body[data-room] .reels .evolution-dots{bottom:0;height:3px;gap:4px}
body[data-room] .reels .evolution-dots i{width:3px;height:3px}
body[data-room] .reel-area>.crystal-payline{top:49.52381%}
body[data-room] .resonance-links{top:13.809524%;bottom:14.761905%;height:71.428571%}

/* Reference pill selector, including the fifth room. No tile or price-card layout. */
body[data-room] .room-switch{border-radius:999px;background:#080f13e6;border:1px solid #cbb88066}
body[data-room] .room-switch button{border-radius:999px}
body[data-room] .room-switch button[aria-pressed=true]{box-shadow:inset 0 1px 0 #fff0c533,0 0 12px #efd5910a}

/* The requested volcanic floor is permanently part of the scene. */
body[data-room=red]{--room-image:url('room-red-lava-v821.webp')}

/* Star: an astronomical observatory. Color shifts affect scenery only.
   Static tint layers crossfade using opacity, avoiding per-frame image filters. */
body[data-room=star]{--room-image:url('room-star-v900.webp');--jewel-hue:0deg;--crystal-metal:#c9e7f7;--crystal-light:#f2fbff;--crystal-aura:#7dd5ff66}
body[data-room=star] .celestial-orbits{display:none}
body[data-room=star] .world-effects::before,body[data-room=star] .world-effects::after{
 content:'';position:absolute;inset:0;pointer-events:none;
 background-image:radial-gradient(ellipse at 50% 44%,transparent 20%,#02030838 80%),var(--room-image);
 background-position:center;background-size:cover;opacity:0;
 animation:stellar-spectrum 52s ease-in-out infinite;will-change:opacity
}
body[data-room=star] .world-effects::before{filter:hue-rotate(58deg) saturate(1.12)}
body[data-room=star] .world-effects::after{filter:hue-rotate(164deg) saturate(.94);animation-delay:-26s}
@keyframes stellar-spectrum{0%,12%,68%,100%{opacity:0}35%,45%{opacity:.82}}
body[data-room=star] .orbit-console>.spin{background:linear-gradient(125deg,#f3fbff,#9cc6df 60%,#d0e8f3);border-color:#edfaff;color:#152936}
body[data-room=star] .room-switch button[aria-pressed=true]{background:#8db5d526;border-color:#b1d1e2;color:#f0faff}
body[data-room=star] #room-star::before{background:#deefff;box-shadow:0 0 8px #8acbff}
body[data-page-hidden=true] .world-effects::before,body[data-page-hidden=true] .world-effects::after,
body[data-spinning=true] .world-effects::before,body[data-spinning=true] .world-effects::after{animation-play-state:paused!important}
body[data-motion=calm] .world-effects::before,body[data-motion=calm] .world-effects::after{animation:none!important;opacity:0}
@media(prefers-reduced-motion:reduce){body[data-room=star] .world-effects::before,body[data-room=star] .world-effects::after{animation:none;opacity:0}}
@media(max-width:650px){
 body[data-room] .reels{--reel-width-factor:4.61;--row-max:146;width:calc(var(--row)*4.61);gap:calc(var(--row)*.093)}
 body[data-room=star]::before,body[data-room=star] .world-effects::before,body[data-room=star] .world-effects::after{background-size:cover;background-position:58% center}
}