/* v5.3: playback-control placement/color refinement only. No changes to scene/choreography/rendering functions. */
#app .stage{bottom:0}
/* Keep world visibility correct when v5 falls back to a replacement Canvas element. */
#app[data-world=cosmic] #festival{display:none}
#app[data-world=festival] #scene,#app[data-world=festival] #fx,#app[data-world=festival] #projectm-canvas{display:none}
#worldPicker{bottom:24px}
#musicSidebar{bottom:222px}
.gesture-tip{display:none}
.player-options{border:1px solid #ffc77323;border-radius:12px;padding:10px 12px;background:#0c0f1bd9;backdrop-filter:blur(9px);flex-shrink:0}
.player-volume{display:flex;gap:12px;align-items:center;padding:2px 0 11px}
.player-volume svg{width:18px;height:18px;color:#a4a8ba;flex-shrink:0}
.player-volume input{width:100%;min-width:0;height:16px;margin:0}
.player-option-buttons{display:flex;gap:7px;justify-content:space-between}
.player-option-buttons .smallbtn{padding:0 10px;height:34px;font-size:8px;flex:1}
.player-signal{font-size:7px;line-height:1.6;letter-spacing:.55px;color:#a2a6b4;margin-top:8px}
.player-signal.real{color:var(--cyan)}
.start-overlay{position:absolute;inset:0;z-index:11;display:block;pointer-events:none;opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s}
.start-overlay.dismissed{opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s .28s}
.start-card{display:flex;flex-direction:column;align-items:center;position:absolute;right:clamp(30px,8vw,150px);top:34%;width:min(300px,32vw);text-align:center;transform:none}
.start-play{position:relative;display:grid;place-items:center;width:138px;height:138px;flex-shrink:0;padding:0;border-radius:50%;border:3px solid #62f7ff;color:#120015;background:radial-gradient(circle at 34% 24%,#fff8a8 0 9%,#ffec00 25%,#ff7a00 48%,#ff00c8 72%,#6f00ff 100%);box-shadow:0 0 0 7px #00f5ff66,0 0 24px #00f5ffff,0 0 52px #ff00c8ee,0 0 90px #ffec0088,inset 0 0 24px #ffffffb0;pointer-events:auto;cursor:pointer;isolation:isolate;touch-action:manipulation;animation:start-neon-breathe 1.75s ease-in-out infinite}
.start-play:before{content:"";position:absolute;inset:-19px;border:3px solid #ff00c8;border-radius:inherit;box-shadow:0 0 25px #ff00c8,0 0 40px #00f5ff;animation:play-beacon 1.8s ease-in-out infinite;pointer-events:none;z-index:-1}
.start-play:after{content:"";position:absolute;inset:-9px;border:2px solid #fff200;border-radius:inherit;box-shadow:0 0 18px #fff200;pointer-events:none}
.start-play svg{width:58px;height:58px;transform:translateX(5px);filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #ff00c8)}
.start-play:hover{color:#05000a;border-color:#fff;background:radial-gradient(circle at 34% 24%,#ffffff 0 8%,#d8ff00 25%,#ff9c00 48%,#ff00e6 72%,#00d9ff 100%);box-shadow:0 0 0 8px #fff20077,0 0 30px #00f5ffff,0 0 68px #ff00c8ff,0 0 110px #fff200aa,inset 0 0 30px #ffffffcc;transform:scale(1.075)}
.start-play:active{transform:scale(.96)}
.start-play:focus-visible{outline:4px solid #fff200;outline-offset:18px}
.start-play:disabled{opacity:1;cursor:wait}
.start-ring{position:absolute;inset:-12px;border-radius:inherit;border:4px solid transparent;border-top-color:#00f5ff;border-right-color:#ff00c8;opacity:0;pointer-events:none}
.start-play[aria-busy=true] .start-ring{opacity:1;animation:play-wait .8s linear infinite}
.start-play[aria-busy=true]:before{animation:none}
.start-label{margin-top:31px;color:#fff200;letter-spacing:4px;font-size:13px;font-weight:900;text-shadow:0 0 7px #ff7a00,0 0 15px #ff00c8,0 0 28px #00f5ff,0 2px 5px #000}
.start-note{display:block;margin:8px auto 0;max-width:285px;min-height:32px;font-size:11px;font-weight:700;line-height:1.55;color:#8affff;letter-spacing:.35px;text-shadow:0 0 7px #00d9ff,0 0 14px #000,0 2px 4px #000;white-space:normal}
/* Playback controls live on the right side so Ruffington's face stays completely clear. */
.floating-controls{position:absolute;right:clamp(30px,8vw,150px);top:38%;z-index:11;display:flex;align-items:center;gap:14px;width:max-content;padding:11px 17px;border:2px solid #00f5ff;border-radius:100px;background:linear-gradient(115deg,rgba(10,4,28,.94),rgba(20,4,35,.94));box-shadow:0 0 0 2px #ff00c844,0 0 24px #00f5ffcc,0 0 52px #ff00c8aa,0 12px 42px #000b;backdrop-filter:blur(14px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-44%) scale(.96);transition:opacity .24s ease,transform .24s ease,visibility 0s .24s}
.floating-controls[data-visible=true]{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%) scale(1);transition:opacity .18s ease,transform .18s ease,visibility 0s}
.floating-controls button{border-radius:50%;display:grid;place-items:center;padding:0;flex-shrink:0;touch-action:manipulation;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.float-skip{height:50px;width:50px;border:2px solid #00f5ff;background:#001f2bbb;color:#9dffff;box-shadow:0 0 12px #00f5ff88,inset 0 0 14px #00e5ff25}
.float-skip svg{height:22px;width:22px;filter:drop-shadow(0 0 5px currentColor)}
#nextBtn.float-skip{border-color:#ff00c8;background:#320022bb;color:#ff8be8;box-shadow:0 0 12px #ff00c899,inset 0 0 14px #ff00c82d}
.float-play{width:66px;height:66px;color:#150014;background:radial-gradient(circle at 35% 25%,#fff8a8,#fff200 28%,#ff8a00 60%,#ff00c8 100%);border:2px solid #fff;box-shadow:0 0 17px #fff200cc,0 0 30px #ff00c899}
.float-play svg{width:27px;height:27px;filter:drop-shadow(0 0 5px #fff)}
.float-play:hover{background:radial-gradient(circle at 35% 25%,#fff,#dfff00 28%,#ff7500 58%,#ff00eb 100%);color:#000;box-shadow:0 0 22px #fff200ff,0 0 42px #ff00c8cc;transform:scale(1.08)}
.float-skip:hover{color:#fff;border-color:#fff;background:#00bcd4aa;box-shadow:0 0 18px #00f5ffff,0 0 34px #00f5ff88;transform:scale(1.08)}
#nextBtn.float-skip:hover{background:#d00087bb;box-shadow:0 0 18px #ff00c8ff,0 0 34px #ff00c888}
.float-play:disabled{cursor:wait;opacity:.65}
.floating-controls button:focus-visible{outline:3px solid #fff200;outline-offset:4px}
#app .popup{bottom:24px;max-height:calc(100dvh - 106px);overflow-y:auto}
#app .toast{z-index:40}
@keyframes play-beacon{0%,100%{opacity:.5;transform:scale(.96);filter:hue-rotate(0deg)}50%{opacity:1;transform:scale(1.07);filter:hue-rotate(30deg)}}
@keyframes start-neon-breathe{0%,100%{filter:saturate(1.05) brightness(1)}50%{filter:saturate(1.35) brightness(1.13)}}
@keyframes play-wait{to{transform:rotate(360deg)}}
@media(max-width:780px){
 #worldPicker{bottom:18px}
 #app .scene-picker{flex-direction:column;left:15px;bottom:43px;width:146px;gap:5px}
 #app .scene-picker .scene-btn{font-size:8px;padding:7px 8px;min-height:29px}
 #app .stage-badge{max-width:180px;white-space:normal}
 #app .stage-badge strong{font-size:6px;letter-spacing:1.3px}
 #musicSidebar{bottom:217px;width:min(220px,calc(100vw - 28px))}
 #musicSidebar .playlist-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:8px;align-items:center}
 #musicSidebar .playlist-eyebrow{display:none}
 #musicSidebar .playlist-cover{width:44px;height:44px;border-radius:6px}
 #musicSidebar .playlist-track{margin:0;font-size:10px;line-height:1.4}
 .player-options{padding:7px 9px}
 .player-option-buttons .smallbtn{padding:0 7px;height:30px}
 .player-signal{font-size:6px}
 .start-play{width:112px;height:112px}
 .start-play svg{width:46px;height:46px}
 .start-card{right:16px;top:20%;width:min(250px,46vw);transform:none}
 .start-label{font-size:11px;margin-top:25px}
 .floating-controls{right:16px;top:31%;padding:8px 12px;gap:10px}
 .float-skip{width:46px;height:46px}.float-play{width:58px;height:58px}
 #app .popup{right:12px;left:12px;width:auto;max-height:calc(100dvh - 86px)}
}
@media(max-height:600px){
 #worldPicker{bottom:14px}
 #musicSidebar{bottom:200px}
 .start-play{height:96px;width:96px}.start-play svg{height:40px;width:40px}
 .start-label{margin-top:22px}.start-note{font-size:10px;min-height:30px}
 .start-card{right:18px;top:16%;transform:none}
}

@media(min-width:781px) and (max-width:1180px){
 .start-card{right:24px;top:30%;width:265px}
 .floating-controls{right:24px;top:35%}
}
@media(prefers-reduced-motion:reduce){
 .start-play:before,.start-ring{animation:none!important}
 .start-overlay,.floating-controls,.start-play{transition:none!important}
}