html, body { margin: 0; padding: 0; background: #1a0f06; height: 100%; overflow: hidden; }
body { font-family: "Press Start 2P", "Courier New", monospace; color: #ffd070; }
#root { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
#game { image-rendering: pixelated; image-rendering: crisp-edges; background: #1a0f06; }
#auth { position: absolute; top: 8px; right: 8px; z-index: 5; display: flex; gap: 8px; align-items: center; }
#auth .who { font-size: 10px; color: #ffd070; text-shadow: 1px 1px #000; background: rgba(26,15,6,0.8); padding: 4px 6px; border: 1px solid #ffd070; }
#auth button.out { font-family: inherit; font-size: 9px; background: #1a0f06; color: #ff8060; border: 1px solid #ff8060; padding: 4px 6px; cursor: pointer; }
.touchpad { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; display: flex; justify-content: space-between; padding: 0 12px 12px; box-sizing: border-box; z-index: 4; pointer-events: none; }
.touchpad div { display: flex; gap: 10px; align-items: flex-end; pointer-events: auto; }
.touchpad button { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #ffd070; background: rgba(26,15,6,0.6); color: #ffd070; font-size: 20px; touch-action: none; user-select: none; -webkit-user-select: none; }
.touchpad button:active { background: rgba(255,208,112,0.4); }