*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;background:#0b0f14;color:#e7f2ec;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0f1620;position:sticky;top:0;z-index:10;border-bottom:1px solid #14202b}
.topbar h1{margin:0;font-size:18px;letter-spacing:.5px}
.icon-btn{background:#14202b;border:1px solid #223243;color:#e7f2ec;border-radius:8px;padding:6px 10px}
main{flex:1;display:flex;justify-content:center;align-items:center;padding:8px}
.game-wrap{width:100%;max-width:520px;margin:auto;display:flex;flex-direction:column;gap:12px;align-items:center}
canvas{width:100%;height:auto;max-height:70vh;background:#0a0e12;border:1px solid #14202b;border-radius:12px}
.hud{width:100%;display:flex;flex-direction:column;gap:8px}
.hud-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pill{padding:10px 14px;border-radius:999px;border:1px solid #244; background:#14202b;color:#e7f2ec}
.pill.primary{background:#11a36c;border-color:#11a36c;color:#07140e}
.controls{display:grid;grid-template-rows:auto auto auto;grid-template-columns:1fr;gap:8px;align-items:center;justify-items:center;width:100%;max-width:360px;user-select:none}
.controls .middle{display:flex;gap:8px}
.dpad{font-size:18px; padding:14px 18px;border-radius:10px;border:1px solid #244;background:#16222f;color:#dff}
.footer{padding:12px;text-align:center;color:#9ab}
dialog{border:none;border-radius:16px;background:#0f1620;color:#e7f2ec;padding:16px;max-width:520px;width:92%}
dialog::backdrop{background:rgba(0,0,0,.6)}
.row{display:flex;justify-content:space-between;align-items:center;margin:10px 0;gap:12px}
.row>span{opacity:.9}
.custom.hidden{display:none}
.note{opacity:.7}
@media (min-width:600px){canvas{max-height:70vh}}


html, body { overscroll-behavior: none; overflow: hidden; height: 100dvh; }
main { overflow:hidden; }
.game-wrap { height: 100%; justify-content: space-between; }
canvas { touch-action: none; -ms-touch-action: none; }

.dpad{min-width:64px;min-height:64px;font-size:22px}
.controls{gap:12px}

.pill, .dpad, button { touch-action: manipulation; }
.game-wrap{align-items:center}

.hud, #touchControls { position: relative; z-index: 2; }
#game { position: relative; z-index: 1; display:block; }


/* v5 fixes */
html, body { height: 100svh; overflow:hidden; overscroll-behavior:none; }
#game { touch-action:none; }
.pill, .dpad, button { touch-action: manipulation; }
.hud, #touchControls { position: relative; z-index: 2; }
#game { position: relative; z-index: 1; display:block; }