* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: #2e2b38; overflow: hidden; -webkit-user-select: none; user-select: none; }
#game-root { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
#game-canvas { image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
#loading-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ece7f5; font: 14px monospace; pointer-events: none; }
#loading-screen.hidden { display: none; }
/* Touch: three zones, faint rounded rectangles at 20 percent white, brighter while pressed. Hidden until a touch happens. */
#touch-controls { position: absolute; inset: 0; display: flex; pointer-events: none; }
#touch-controls.hidden { display: none; }
.zone { display: flex; align-items: flex-end; padding: 16px; gap: 10px; pointer-events: none; }
.zone.left { flex: 1; justify-content: flex-start; }
.zone.mid { flex: 1; justify-content: center; }
.zone.right { flex: 1; justify-content: flex-end; }
.touch-btn { width: 72px; height: 72px; border: none; border-radius: 12px; background: rgba(255,255,255,0.2); pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.touch-btn.small { width: 56px; height: 40px; }
.touch-btn:active { background: rgba(255,255,255,0.4); }