/* 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}
}

/* Coordinate the two scrollable panels on shorter desktop displays. */
@media (min-width:781px) and (max-height:1100px) {
 #app { --rail-width:clamp(240px,20vw,286px); --rail-right:clamp(24px,2.3vw,44px); --picker-height:min(320px,max(150px,calc((100dvh - 133px)*.4))); }
 #app #musicSidebar { right:var(--rail-right); width:var(--rail-width); bottom:calc(36px + var(--picker-height)); }
 #app #worldPicker.world-picker { right:var(--rail-right); bottom:24px; width:var(--rail-width); max-height:var(--picker-height); }
 #app .start-card { right:calc(var(--rail-right) + var(--rail-width) + 32px); width:min(300px,30vw); }
 #app .floating-controls { right:calc(var(--rail-right) + var(--rail-width) + 32px); }
}
/* Keep portrait available: this suggestion is in flow and can be dismissed. */
.landscape-tip { display:none; position:relative; z-index:50; }
@media (max-width:1024px) and (orientation:portrait) and (any-pointer:coarse) {
 .landscape-tip { display:flex; align-items:center; gap:12px; padding:12px 18px; background:#0e101a; color:#f4eddf; font:13px/1.4 Arial,sans-serif; }
 .landscape-tip span { flex:1; min-width:0; }
 .landscape-tip button { flex:none; min-height:44px; padding:8px 10px; border:1px solid #ffc77380; border-radius:8px; background:#171622; }
}@media (min-width:781px) and (max-height:900px) {
 #musicSidebar .playlist-cover { width:min(100%,20dvh); margin-inline:auto; }
}/* The existing 540px scene minimum must remain reachable on a rotated phone. */
@media (max-width:1024px) and (any-pointer:coarse) {
 body { overflow-y:auto; }
}
/* A small matching marquee above the existing left-side scene copy. */
.adventure-entry { position:absolute; z-index:9; left:34px; top:103px; display:grid; gap:7px; width:250px; padding:13px 15px; color:#f4eddf; text-decoration:none; border:1px solid #72e5e299; border-left:3px solid #ffc773; border-radius:3px 14px 3px 14px; background:linear-gradient(125deg,#21313bef,#171125f2 70%); box-shadow:0 6px 24px #0008,inset 0 1px #fff2; }
.adventure-kicker { font:700 7px/1.4 Arial,sans-serif; letter-spacing:1.4px; color:#b6b9c9; }
.adventure-entry strong { display:flex; align-items:baseline; gap:6px; font:900 25px/.95 Impact,'Arial Narrow',sans-serif; letter-spacing:.7px; text-shadow:1px 2px #802259; }
.adventure-entry em { color:#ffc773; font-style:normal; }
.adventure-entry strong span { margin-left:auto; color:#72e5e2; font:20px/1 Arial,sans-serif; }
.adventure-invitation { color:#b8dcd9; font:10px/1.4 Arial,sans-serif; letter-spacing:.3px; }
.adventure-entry:hover { border-color:#ffc773; box-shadow:0 6px 24px #0008,0 0 18px #72e5e233; }
.adventure-entry:focus-visible { outline:3px solid #72e5e2; outline-offset:4px; }
.adventure-entry[aria-disabled="true"] { opacity:.7; cursor:default; }
@media (max-width:780px), (max-width:1024px) and (any-pointer:coarse) {
 .adventure-entry { position:relative; inset:auto; width:calc(100% - 28px); max-width:350px; margin:12px 14px; padding:10px 13px; }
}
body:has(#app.zen) .adventure-entry { visibility:hidden; pointer-events:none; }

/* v5.12.2 review: keep the show intact; let controls flow when a side rail cannot fit. */
#app .start-play { width:118px; height:118px; }
#app .start-play svg { width:50px; height:50px; }
#app .start-card { top:calc(31% - 8px); width:200px; }
@media (min-width:1281px) and (max-height:1100px) {
 #app .start-card { right:calc(var(--rail-right) + var(--rail-width) + 12px); }
}
#app .closebtn { min-width:44px; min-height:44px; }
#app .popup { overscroll-behavior:contain; }
.landscape-tip[hidden] { display:none; }
@media (prefers-reduced-motion:reduce) {
 #app .start-play { animation:none; }
}

/* A readable stage above a flowing control deck on phones, tablets and short
   windows. No fixed-height app or competing absolute panels in this mode. */
@media (max-width:1280px), (max-height:600px) {
 body { overflow-y:auto; overflow-x:hidden; }
 #app { --compact-stage-height:clamp(360px,56vw,620px); --compact-header-height:79px;
   height:auto; min-height:100dvh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
   gap:14px; padding:0 14px max(20px,env(safe-area-inset-bottom)); }
 #app .topbar { grid-column:1/-1; grid-row:1; height:var(--compact-header-height);
   margin:0 -14px; padding:0 max(14px,env(safe-area-inset-left)); gap:12px; }
 #app .topright { flex-shrink:0; gap:5px; }
 #app .topright .iconbtn { width:44px; height:44px; }
 #app .status { display:none; }
 #app .stage { position:relative; inset:auto; grid-column:1/-1; grid-row:2;
   height:var(--compact-stage-height); margin:-14px -14px 0; min-width:0; }
 #app #musicSidebar { position:relative; inset:auto; grid-column:1; grid-row:3;
   width:auto; min-width:0; max-height:none; overflow:visible; padding:0; align-self:start; }
 #app #musicSidebar .playlist-card { display:grid; grid-template-columns:56px minmax(0,1fr);
   gap:10px; align-items:center; padding:10px; }
 #app #musicSidebar .playlist-cover { width:56px; height:56px; margin:0; }
 #app #musicSidebar .playlist-track { margin:0; font-size:12px; }
 #app #musicSidebar .playlist-eyebrow { display:none; }
 #app .player-option-buttons { flex-wrap:wrap; }
 #app .player-option-buttons .smallbtn { min-height:44px; height:auto; font-size:10px; padding:8px; }
 #app .player-volume input { min-height:36px; }
 #app .player-signal { font-size:9px; overflow-wrap:anywhere; }
 #app #worldPicker.world-picker { position:relative; inset:auto; grid-column:2; grid-row:3;
   width:auto; min-width:0; max-height:none; overflow:visible; margin:0; align-self:start; }
 #app #worldPicker .world-btn { min-height:48px; }
 #app #worldPicker .world-btn strong { font-size:11px; overflow-wrap:anywhere; }
 #app #worldPicker .world-btn small { font-size:9px; }
 #app .start-overlay { top:var(--compact-header-height); bottom:auto; height:var(--compact-stage-height); }
 #app .start-card { top:44px; right:20px; width:170px; }
 #app .start-play { width:98px; height:98px; }
 #app .start-play svg { width:42px; height:42px; }
 #app .start-label { font-size:11px; margin-top:24px; }
 #app .start-note { font-size:10px; max-width:165px; }
 #app .floating-controls { top:calc(var(--compact-header-height) + 110px); right:18px;
   padding:8px 10px; gap:8px; }
 #app .float-skip { width:44px; height:44px; }
 #app .float-play { width:54px; height:54px; }
 #app .scene-picker { left:16px; bottom:42px; width:auto; max-width:calc(100% - 32px);
   display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; }
 #app .scene-picker .eyebrow { flex-basis:100%; margin:0; }
 #app .scene-picker .scene-btn { min-width:0; min-height:44px; font-size:9px; padding:8px 10px; }
 #app .stage-copy { top:35px; left:18px; }
 #app .stage-copy h1 { font-size:40px; }
 #app .stage-copy .tagline,#app .stage-copy .coordinates { display:none; }
 #app .stage-badge { bottom:14px; left:18px; transform:none; text-align:left; }
 #app .stage-badge small { display:none; }
 #app #acidTools { top:auto; bottom:108px; left:16px; right:auto; width:auto;
   max-width:250px; flex-wrap:nowrap; }
 #app #acidTools .iconbtn { width:44px; height:44px; flex-basis:44px; }
 #app #acidTools>div { flex:1; }
 #app .popup { position:fixed; top:auto; bottom:max(12px,env(safe-area-inset-bottom));
   right:12px; left:12px; width:auto; max-width:420px; margin-left:auto;
   max-height:calc(100dvh - 24px); transform:none; z-index:60; }
 .adventure-entry { position:relative; inset:auto; width:calc(100% - 28px); max-width:350px;
   margin:12px 14px; padding:10px 13px; }
 body:has(#app.zen) .adventure-entry,body:has(#app.zen) .landscape-tip { display:none; }
 #app.zen { display:block; padding:0; height:100dvh; min-height:0; }
 #app.zen .stage { position:fixed; inset:0; height:100dvh; width:100%; margin:0; }
 #app.zen #musicSidebar,#app.zen #worldPicker { display:none; }
 #app.zen .zen-exit { position:fixed; opacity:1; min-height:44px; }
}
@media (max-width:600px) {
 #app { --compact-header-height:68px; grid-template-columns:minmax(0,1fr); }
 #app #musicSidebar { grid-column:1; grid-row:3; }
 #app #worldPicker.world-picker { grid-column:1; grid-row:4; }
 #app .topbar .brand-art { flex:1 1 auto; gap:5px; }
 #app .topbar .brand-art .rr-emblem { width:24px; flex-basis:24px; }
 #app .topbar .brand-art .rr-wordmark { width:100px; flex:1 1 100px; }
 #app .start-card { right:6px; width:150px; top:40px; }
 #app .start-play { width:92px; height:92px; }
 #app .start-play svg { width:39px; height:39px; }
 #app .stage-copy { top:28px; left:12px; }
 #app .stage-copy h1 { font-size:clamp(24px,7vw,36px); }
 #app .stage-copy .location { max-width:140px; font-size:6px; letter-spacing:.5px; }
 #app .scene-picker { left:12px; gap:6px; max-width:calc(100% - 24px); }
 #app .scene-picker .scene-btn { flex:1; padding:7px; font-size:8px; letter-spacing:.4px; }
 #app .scene-picker .eyebrow { display:none; }
 #app .floating-controls { right:12px; top:calc(var(--compact-header-height) + 110px); }
}

/* Coordinate the desktop rail at every height, including 4K displays. */
@media (min-width:1281px) and (min-height:601px) {
 #app { --rail-width:clamp(240px,20vw,286px); --rail-right:clamp(24px,2.3vw,44px);
   --picker-height:min(420px,max(150px,calc((100dvh - 133px)*.4))); }
 #app #musicSidebar { right:var(--rail-right); width:var(--rail-width); bottom:calc(36px + var(--picker-height)); }
 #app #worldPicker.world-picker { right:var(--rail-right); bottom:24px; width:var(--rail-width); max-height:var(--picker-height); }
 #app .start-card,#app .floating-controls { right:calc(var(--rail-right) + var(--rail-width) + 12px); }
}
@media (max-width:1280px), (max-height:600px) {
 #app.zen .topbar { display:none; }
}
/* v5.12.4: the same art-space anchor at every size, not a window percentage. */
#app .start-card { width:126px; }
#app .start-play { width:var(--play-size,98px); height:var(--play-size,98px); }
#app .start-play svg { width:calc(var(--play-size,98px)*.42); height:calc(var(--play-size,98px)*.42); }
#app .start-label { margin-top:10px; font-size:10px; line-height:12px; letter-spacing:2px; white-space:nowrap; }
/* Keep connection feedback accessible without laying text over the venue sign. */
#app .start-note { position:absolute; width:1px; height:1px; min-height:0; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
#app .start-card:has(.start-play[aria-busy=true]) .start-label { letter-spacing:1px; }
#app .topright .iconbtn { min-width:44px; min-height:44px; }

/* Loading/failure messages remain visible without covering the sign. */
#app .start-overlay[data-message=true] .start-note { position:fixed; top:auto; bottom:12px; left:50%; right:auto; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); height:auto; min-height:0; clip:auto; clip-path:none; white-space:normal; margin:0; padding:10px 14px; border:1px solid #72e5e2; border-radius:9px; background:#0c0f1bf5; z-index:50; }

/* Keep a clear art-space pocket around the 780px artwork framing change. */
@media (min-width:780px) and (max-width:1280px), (min-width:780px) and (max-height:600px) {
 #app { --compact-stage-height:clamp(560px,56vw,680px); }
}

/* Extremely short cinema views keep the accessible Play button, without a
   redundant caption squeezing onto the sign. Normal layouts retain the caption. */
#app .start-card[data-anchor="button-only"] .start-label { display:none; }

/* v5.12.5: slightly larger solid Play circle inside a tighter halo. */
#app .start-label { margin-top:0; line-height:12px; }
#app .start-play:before { inset:-10px; }
#app .start-play:after { inset:-7px; }
#app .start-play:focus-visible { outline-offset:8px; }