:root{
  --bg:#0c1118;
  --panel:rgba(10,15,22,.94);
  --line:rgba(255,255,255,.14);
  --text:#f4f7fb;
  --muted:#9aa7b7;
  --accent:#36a3ff;
  --danger:#c74f5d;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);font-family:Inter,Arial,sans-serif;color:var(--text)}
#renderCanvas{width:100%;height:100%;touch-action:none;display:block;outline:none}
#hud{position:fixed;inset:0;pointer-events:none}
button{pointer-events:auto;border:1px solid var(--line);background:#1b2530;color:var(--text);border-radius:12px;padding:10px 12px;font-weight:800;font-size:12px;white-space:nowrap}
button:active{transform:scale(.98)}
button.primary{background:var(--accent);border-color:#78c4ff;color:#05111c}
button.danger{background:#3a2025;border-color:#6f333c}
button.active{background:#165f96;border-color:#67baff}
button:disabled{opacity:.38}
.hidden{display:none!important}
.topbar{position:absolute;left:8px;right:8px;top:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);background:rgba(9,14,20,.88);backdrop-filter:blur(10px);border-radius:16px;pointer-events:auto}
.brand{font-weight:900;letter-spacing:.4px;font-size:13px}.brand span{color:#6cc5ff}.sub{font-size:10px;color:var(--muted);margin-top:2px}.top-actions{display:flex;gap:6px}
.panel{position:absolute;left:8px;right:8px;bottom:8px;padding:9px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(10px);border-radius:16px;pointer-events:auto;box-shadow:0 10px 35px rgba(0,0,0,.35)}
.row{display:flex;gap:6px}.scroll{overflow-x:auto;padding-bottom:5px}.scroll::-webkit-scrollbar{display:none}.actions{overflow-x:auto;border-top:1px solid var(--line);padding-top:7px}.status{font-size:11px;color:#d8e1ea;margin:7px 3px 0;line-height:1.35}
.play-panel{position:absolute;inset:0;pointer-events:none}.play-card{position:absolute;left:10px;bottom:12px;padding:9px 11px;background:rgba(8,13,19,.72);border:1px solid var(--line);border-radius:12px;max-width:55%;pointer-events:none}.play-title{font-weight:900;font-size:11px}.play-sub{font-size:10px;color:var(--muted);margin-top:2px;line-height:1.25}
.dpad{position:absolute;right:16px;bottom:18px;width:152px;height:152px;pointer-events:auto}.dpad button{position:absolute;width:50px;height:50px;padding:0;font-size:22px;background:rgba(20,31,42,.88);border-radius:14px}.dpad .up{left:51px;top:0}.dpad .left{left:0;top:51px}.dpad .right{right:0;top:51px}.dpad .down{left:51px;bottom:0}.reset-player{position:absolute;right:20px;bottom:178px;background:rgba(20,31,42,.88);pointer-events:auto}
@media (min-width:800px){.panel{left:16px;right:auto;width:min(720px,calc(100vw - 32px));bottom:16px}.topbar{left:16px;right:16px;top:16px}.play-card{left:16px;bottom:16px}.dpad{right:24px;bottom:24px}.reset-player{right:28px;bottom:188px}}