* { margin: 0; padding: 0; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html, body { height: 100%; overflow: hidden; touch-action: none; }
body { background: #0a0805; font-family: 'Segoe UI', system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; }

#game-canvas { display: block; max-width: 100vw; max-height: 70vh; image-rendering: pixelated; }

.hud { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; align-items: center; z-index: 10; }
.hud-item { background: rgba(0,0,0,0.8); border: 1px solid rgba(255,215,0,0.3); border-radius: 6px; padding: 4px 12px; color: #DAA520; font-size: 13px; }
#connection-status { width: 8px; height: 8px; border-radius: 50%; background: #f44; }
#connection-status.connected { background: #4f4; }

#join-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.9); display: flex; justify-content: center; align-items: center; z-index: 100; }
#join-modal.hidden { display: none; }
.join-box { text-align: center; color: #fff; }
.join-box h2 { font-size: 28px; margin-bottom: 5px; color: #cc0000; }
.join-box p { color: #888; margin-bottom: 20px; }
.join-box input { background: #1a1a1a; border: 1px solid #333; color: #fff; padding: 10px 16px; font-size: 16px; border-radius: 6px; width: 200px; text-align: center; }
.join-box button { background: #cc0000; color: #fff; border: none; padding: 10px 30px; font-size: 16px; border-radius: 6px; cursor: pointer; margin-top: 10px; display: block; width: 200px; margin-left: auto; margin-right: auto; }

/* Mobile controls */
#mobile-controls { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 20px; pointer-events: none; z-index: 50; }

.joystick-zone { width: 140px; height: 140px; pointer-events: auto; display: flex; justify-content: center; align-items: center; }
.joystick-base { width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.2); position: relative; }
.joystick-thumb { width: 45px; height: 45px; border-radius: 50%; background: rgba(255,255,255,0.3); border: 2px solid rgba(255,255,255,0.4); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: none; }

.interact-btn { pointer-events: auto; width: 90px; height: 90px; border-radius: 50%; border: 3px solid rgba(255,215,0,0.5); background: rgba(255,215,0,0.15); color: #ffd700; font-size: 14px; font-weight: bold; letter-spacing: 1px; -webkit-tap-highlight-color: transparent; }
.interact-btn:active { background: rgba(255,215,0,0.4); }

@media (hover: hover) and (pointer: fine) { #mobile-controls { display: none !important; } }
@media (max-height: 500px) { .joystick-base { width: 90px; height: 90px; } .joystick-thumb { width: 35px; height: 35px; } .interact-btn { width: 70px; height: 70px; font-size: 12px; } }