* { box-sizing: border-box; }
html, body, #game { width: 100%; height: 100%; margin: 0; }
body { background: #1f3039; color: #f4f1e8; font: 14px system-ui, sans-serif; }
.game-view { position: relative; width: 100%; height: 100%; overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
.game-info, .game-controls { position: absolute; padding: 8px; overflow: auto; }
.game-info { background: #1f3039ee; line-height: 1.5; overflow-wrap: anywhere; }
.game-status { display: flex; flex-wrap: wrap; gap: 0 12px; }
.game-controls { display: grid; grid-template-columns: 1fr; grid-auto-rows: minmax(44px, 1fr);
  gap: 8px; background: #263c45; }
.game-controls button { min-height: 44px; flex: 1 1 100px; padding: 8px 12px; border: 1px solid #a7b8ad;
  border-radius: 4px; color: #f4f1e8; background: #405b5b; font: inherit; cursor: pointer; }
.game-controls button:focus-visible { outline: 3px solid #f3c86e; outline-offset: 2px; }

@media (orientation: portrait) {
  .game-controls[data-count="4"], .game-controls[data-count="5"], .game-controls[data-count="6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}