:root{color-scheme:dark;--bg:#080c19;--surface:#172338;--line:#40506a;--accent:#ffd565;--text:#f2f6ff;--muted:#9fb1ca}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:500 15px/1.45 system-ui,sans-serif;overscroll-behavior:none}button{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);min-height:44px;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.28;cursor:default}[hidden]{display:none!important}.remote{max-width:520px;min-height:100dvh;margin:auto;padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;gap:20px}header{text-align:center}.logo{display:block;width:clamp(150px,42vw,210px);height:clamp(100px,20dvh,160px);object-fit:contain;margin:auto}.connection{border:0;background:transparent;color:var(--muted);font-size:12px;min-height:36px;padding:4px 12px}.connection[data-online]{color:#9ce1c8}.connection::before{content:'●';margin-right:7px;font-size:9px}.dpad{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:min(84vw,340px);aspect-ratio:1;padding:26px;gap:0;border-radius:50%;background:#0d1422;border:1px solid #273247;box-shadow:inset 0 3px 8px #ffffff04,0 14px 40px #0005;touch-action:none;user-select:none;-webkit-user-select:none;margin:auto 0}.dpad::before{content:'';position:absolute;inset:12px;border:1px solid #24314855;border-radius:50%;z-index:-1}.dpad button{border:0;border-radius:0;background:#26364f;font-size:34px;color:#d7e1f0;box-shadow:inset 0 1px #ffffff0a;touch-action:none}.dpad [data-dir="up"]{border-radius:16px 16px 0 0}.dpad [data-dir="down"]{border-radius:0 0 16px 16px;box-shadow:0 6px 0 #040915}.dpad [data-dir="left"]{border-radius:16px 0 0 16px;box-shadow:0 6px 0 #040915}.dpad [data-dir="right"]{border-radius:0 16px 16px 0;box-shadow:0 6px 0 #040915}.pad-center{display:grid;place-items:center;background:#26364f;color:var(--accent);font-size:43px;text-shadow:0 0 20px #ffd56533}.dpad button[data-dir*="-"]{border-radius:50%;margin:11px;background:transparent;font-size:20px;color:#71849f;box-shadow:none}.dpad button:active:not(:disabled),.dpad button[data-held]{background:#415578;color:var(--accent);box-shadow:inset 0 3px 8px #0004}.levels{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;width:100%;margin-top:8px}.levels button{border-radius:12px;font-size:16px;min-width:0}.levels button[aria-current]{color:var(--bg);background:var(--accent);border-color:var(--accent);font-weight:800}.levels button:active:not(:disabled){background:#415578}.actions{width:100%;border:1px solid var(--line);border-radius:18px;background:#101c30;padding:18px;text-align:center}.actions h1{font-size:18px;line-height:1.3;margin:0 0 8px}.actions p{font-size:13px;color:#c6d3e6;margin:0 0 14px}.actions p:empty{display:none}#action-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}#action-buttons button{flex:1;padding:12px;min-width:90px;background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:750}#action-buttons button:last-child:not(:first-child){background:var(--surface);color:var(--text);border-color:var(--line)}@media(min-width:600px) and (max-height:600px){.remote{max-width:850px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:12px 32px;align-content:center}.dpad{grid-column:2;grid-row:1 / span 2;width:min(66dvh,280px);padding:20px;justify-self:center;margin:0}.dpad button[data-dir*="-"]{margin:6px}.levels{grid-column:1 / -1;grid-row:3}.logo{height:110px}.actions{grid-column:1}}@media(max-height:700px) and (orientation:portrait){.remote{gap:12px}.logo{height:100px}.dpad{width:min(76vw,280px);padding:20px}.dpad button[data-dir*="-"]{margin:6px}.actions{padding:12px}}