html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
#game { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#canvas { image-rendering: pixelated; image-rendering: crisp-edges; background: #000;
          width: calc(100vmin * 320 / 240); max-width: 100vw; max-height: 100vh; aspect-ratio: 320 / 240; }
#touch { position: fixed; inset: auto 0 0 0; pointer-events: none; user-select: none; touch-action: manipulation; }
#touch .t { pointer-events: auto; border: 2px solid #555; background: #1c1c1a; color: #ddd;
            font: 16px monospace; min-width: 44px; min-height: 44px; border-radius: 8px; }
#touch .t:active { background: #3a3a36; }
.dpad { position: fixed; left: 12px; bottom: 12px; display: grid;
        grid-template-areas: ". up ." "left . right" ". down ."; gap: 2px; }
.dpad .up { grid-area: up; } .dpad .down { grid-area: down; }
.dpad .left { grid-area: left; } .dpad .right { grid-area: right; }
.ab { position: fixed; right: 12px; bottom: 16px; display: flex; gap: 10px; align-items: flex-end; }
.ab .a { width: 64px; height: 64px; }
@media (hover: hover) and (pointer: fine) { #touch { display: none; } }