:root { color-scheme:dark; font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif; background:#102026; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
#stage,.artwork { position:relative; width:100%; height:100%; background:#102026 url('fallback.png') center / contain no-repeat; }
#water { display:block; width:100%; height:100%; object-fit:contain; touch-action:pan-y; }
.control-surface { position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none; transition:opacity 180ms ease; }
.control-surface > * { pointer-events:none; }
#stage[data-controls-visible="true"] .control-surface,.control-surface:focus-within { opacity:1; }
#stage[data-controls-visible="true"] .control-surface > *,.control-surface:focus-within > * { pointer-events:auto; }
#stage button,#stage select { border:0; border-radius:4px; background:rgba(9,23,28,.76); color:#f7f7f3; font:inherit; font-size:12px; line-height:20px; cursor:pointer; }
.edge-control { position:absolute; display:grid; place-items:center; width:44px; height:44px; padding:12px; }
.edge-control svg { display:block; width:20px; height:20px; pointer-events:none; }
#play { left:max(12px,env(safe-area-inset-left)); bottom:max(12px,env(safe-area-inset-bottom)); }
#full { right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); }
.control-toggle { left:max(12px,env(safe-area-inset-left)); top:max(12px,env(safe-area-inset-top)); }
.time-control { position:absolute; right:max(12px,env(safe-area-inset-right)); top:max(12px,env(safe-area-inset-top)); }
#stage .time-control select { appearance:none; -webkit-appearance:none; min-width:78px; max-width:140px; height:44px; padding:10px 30px 10px 12px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:12px; }
.toolbar { position:absolute; left:max(12px,env(safe-area-inset-left)); top:max(64px,calc(env(safe-area-inset-top) + 52px)); width:170px; padding:6px; background:rgba(9,23,28,.92); border-radius:4px; }
.scene-settings { display:flex; flex-direction:column; align-items:stretch; gap:3px; }
.toolbar button { width:100%; min-height:40px; padding:8px 10px; text-align:left; background:transparent; }
#stage button:hover,#stage select:hover { background-color:rgba(51,74,77,.94); }
.toolbar button[aria-pressed="true"] { background:#365153; }
#stage button:focus-visible,#stage select:focus-visible { outline:2px solid #c5dcda; outline-offset:2px; }
#play[data-state="playing"] .icon-play,#play[data-state="paused"] .icon-pause,#full[data-fullscreen="false"] .icon-contract,#full[data-fullscreen="true"] .icon-expand { display:none; }
#error { position:absolute; top:50%; left:50%; width:min(90%,450px); margin:0; padding:14px; transform:translate(-50%,-50%); color:white; background:rgba(6,17,21,.88); font-size:14px; line-height:1.5; text-align:center; }
[hidden] { display:none !important; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; pointer-events:none!important; }
#water:focus-visible { outline:2px solid white; outline-offset:-3px; }
#stage:fullscreen { width:100%; height:100%; }
@media(max-width:500px) {
 #play { left:max(8px,env(safe-area-inset-left)); bottom:max(8px,env(safe-area-inset-bottom)); }
 #full { right:max(8px,env(safe-area-inset-right)); bottom:max(8px,env(safe-area-inset-bottom)); }
 .control-toggle { top:max(8px,env(safe-area-inset-top)); left:max(8px,env(safe-area-inset-left)); }
 .time-control { top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); }
 .toolbar { left:max(8px,env(safe-area-inset-left)); top:max(60px,calc(env(safe-area-inset-top) + 52px)); }
}
@media(prefers-reduced-motion:reduce) { .control-surface { transition:none; } }