:root{color-scheme:dark;font-family:Inter,ui-rounded,"SF Pro Display",system-ui,sans-serif;background:#08111c}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0;overscroll-behavior:none}
body{display:grid;place-items:center;min-height:100dvh;padding:max(14px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 12%,#233e58 0,#101f30 38%,#07101a 100%);overflow:hidden}
.player-shell{width:min(94vw,calc((100dvh - 28px)*.75),510px);padding:clamp(11px,3vw,20px);border:1px solid #8197a7;border-radius:clamp(26px,7vw,46px);background:linear-gradient(145deg,#d5e0e5 0,#778c99 30%,#344b5b 65%,#1d303f 100%);box-shadow:inset 0 2px 3px #fff9,inset 0 -7px 14px #07152199,0 24px 70px #000b;position:relative}
.device-top{height:clamp(24px,6vw,38px);display:flex;align-items:center;justify-content:space-between;padding:0 5%;color:#eaf8ff;text-shadow:0 2px 2px #07121d;font-size:clamp(10px,2.8vw,15px);letter-spacing:.15em}
#connection{font-size:.72em;color:#a8e9c3;cursor:pointer}
.screen-frame{padding:clamp(8px,2vw,13px);border-radius:clamp(17px,4vw,26px);background:linear-gradient(145deg,#102333,#02080d);box-shadow:inset 0 3px 9px #000,0 2px 1px #fff5}
#screen{display:block;width:100%;height:auto;aspect-ratio:240/280;border-radius:clamp(9px,2.5vw,16px);background:#55bce8;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 0 22px #4cd8ff20}
#toast{position:fixed;z-index:5;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translate(-50%,20px);margin:0;max-width:min(90vw,430px);padding:10px 16px;border-radius:999px;background:#071522ee;color:#fff;box-shadow:0 8px 24px #0008;opacity:0;pointer-events:none;transition:.2s;text-align:center;font-weight:700;font-size:14px}
#toast.show{opacity:1;transform:translate(-50%,0)}
dialog{width:min(92vw,480px);border:1px solid #6f8798;border-radius:24px;padding:0;background:#102334;color:#edf8ff;box-shadow:0 25px 80px #000c}
dialog::backdrop{background:#02070dcc;backdrop-filter:blur(5px)}
dialog form{padding:24px}dialog h1{margin:0 0 8px;font-size:24px}dialog p{color:#bcd0dd;line-height:1.45}dialog textarea,dialog input{display:block;width:100%;margin:8px 0 14px;border:1px solid #61798c;border-radius:10px;padding:10px;background:#07131f;color:#dff7ff;font:12px ui-monospace,monospace}dialog textarea{height:74px;resize:none}dialog label{display:block;font-weight:700}dialog button{border:0;border-radius:10px;padding:10px 14px;background:#2b7891;color:#fff;font-weight:800}dialog button[value="close"]{background:#415767}.dialog-actions{display:flex;gap:8px;justify-content:flex-end}dialog hr{border:0;border-top:1px solid #405567;margin:20px 0}
@media(max-aspect-ratio:3/4){.player-shell{width:min(94vw,510px)}}
@media(prefers-reduced-motion:reduce){#toast{transition:none}}