html, body {
  margin: 0; padding: 0; height: 100%; background: #0a0a0a; color: #e6e6e6; font-family: -apple-system, system-ui, ui-sans-serif, Arial;
}
#hud { position: fixed; top: env(safe-area-inset-top, 0); left: 0; right: 0; padding: 8px 12px; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); z-index: 10; }
#hud .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#hud .row.small { font-size: 12px; opacity: 0.9; }
#status { font-variant-numeric: tabular-nums; }
#game { display: block; width: 100vw; height: 100svh; image-rendering: pixelated; background: #1b1b1b; }
.touch { position: fixed; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0); padding: 8px; display: flex; justify-content: center; z-index: 20; }
.touch.hidden { display:none; }
.dpad { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 8px; width: 100%; max-width: 720px; }
.dpad button { padding: 12px 8px; font-size: 16px; background: #222; color: #eee; border: 1px solid #444; border-radius: 8px; }
.dpad button:active { transform: translateY(1px); background:#333; }