* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100dvh; background: #0b0e1a; overflow: hidden; }
body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px 0; }
#controls { display: flex; gap: 8px; flex: none; }
#controls button {
  font-family: monospace; font-size: 15px; font-weight: bold;
  min-height: 40px; padding: 6px 18px; cursor: pointer;
  color: #e8ecff; background: #232842; border: 2px solid #4a5178; border-radius: 4px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#controls button:active { background: #d8c56a; color: #171b30; }
#keys { display: none; flex: none; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 8px; max-width: 100vw; }
#keys button {
  font-family: monospace; font-size: 20px; font-weight: bold;
  min-width: 40px; min-height: 48px; padding: 6px 10px;
  color: #e8ecff; background: #232842; border: 2px solid #4a5178; border-radius: 4px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#keys button:active { background: #d8c56a; color: #171b30; }
@media (pointer: coarse) { #keys { display: flex; } }
canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #10142a;
  flex: none;
  max-width: 100vw;
}