:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { font-family: monospace; touch-action: none; user-select: none; -webkit-user-select: none; }
#app { position: fixed; inset: 0; display: grid; place-items: center; background: #000; }
#game { width: min(100vw, calc(100vh * 4 / 3)); height: min(100vh, calc(100vw * 3 / 4)); image-rendering: pixelated; image-rendering: crisp-edges; background: #000; }
#muteButton { position: fixed; top: 10px; right: 10px; z-index: 10; padding: 7px 10px; color: #fff; background: #000; border: 2px solid #fff; font: 700 12px monospace; cursor: pointer; }
#touchControls { display: none; position: fixed; inset: 0; z-index: 9; pointer-events: none; }
#touchControls button { pointer-events: auto; width: 54px; height: 54px; color: #fff; background: rgba(0,0,0,.62); border: 2px solid rgba(255,255,255,.7); border-radius: 8px; font: 700 20px monospace; }
#touchControls button.pressed { transform: scale(.92); background: rgba(255,255,255,.2); }
.dpad { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(2, 54px); gap: 5px; }
.dpad [data-key="up"] { grid-column: 2; }
.dpad [data-key="left"] { grid-column: 1; grid-row: 2; }
.dpad [data-key="down"] { grid-column: 2; grid-row: 2; }
.dpad [data-key="right"] { grid-column: 3; grid-row: 2; }
.actions { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: end; }
.actions .confirm { width: 68px; height: 68px; border-color: #ff0; color: #ff0; }
.actions .cancel { border-color: #f80; color: #f80; }
#rotateNotice { display: none; position: fixed; inset: 0; z-index: 50; place-items: center; padding: 32px; color: #fff; background: #000; text-align: center; font: 700 18px monospace; }
@media (pointer: coarse), (max-width: 900px) { #touchControls { display: block; } #muteButton { font-size: 10px; } }
@media (orientation: portrait) and (max-width: 700px) { #rotateNotice { display: grid; } }