body {
  background: #15151c; color: #e6e6ee; font-family: system-ui, sans-serif; margin: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
main { max-width: 520px; margin: 24px auto; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
h1 { font-size: 1.4rem; margin: 0 0 8px; }
#hud { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
button {
  min-width: 48px; min-height: 48px; padding: 0 16px; font: inherit; color: inherit;
  background: #2a2a37; border: 2px solid #33334a; border-radius: 8px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
button:disabled { opacity: 0.4; }
#secondary { display: flex; gap: 8px; margin-bottom: 8px; }
canvas {
  display: block; width: min(100%, 60vh); width: min(100%, 60svh); margin: 0 auto;
  image-rendering: pixelated; border: 2px solid #33334a; box-sizing: border-box;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#message { min-height: 1.2em; color: #f0ad4e; }
#controls {
  position: sticky; bottom: 0; display: flex; gap: 8px; background: #15151c;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}
#controls button { flex: 1; }
#log { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; color: #a0a0b8; }
.help { font-size: 0.8rem; color: #70708a; }
@media (hover: none) { .keys { display: none; } }