* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0b0b10; color: #eee; font-family: Arial, sans-serif; overflow: hidden; }
.game-canvas { width: 100vw; height: 100vh; display: block; background: #0f0f15; }
.ui { position: absolute; top: 20px; left: 20px; width: 300px; z-index: 10; pointer-events: none; }
.panel { background: rgba(0,0,0,0.75); padding: 16px; border-radius: 8px; border: 1px solid #333; pointer-events: auto; }
.panel.right { position: absolute; top: 20px; right: 20px; width: 220px; }
h1 { margin-bottom: 12px; font-size: 18px; text-transform: uppercase; letter-spacing: 1.5px; }
.form-group { margin: 8px 0; pointer-events: auto; }
.form-group label { display: block; font-size: 12px; color: #aaa; margin-bottom: 4px; }
.form-group input { width: 100%; padding: 6px; background: #1a1a22; border: 1px solid #444; color: #fff; border-radius: 4px; box-sizing: border-box; }
button { width: 100%; padding: 8px; margin: 4px 0; background: #e74c3c; border: none; color: #fff; border-radius: 4px; cursor: pointer; font-weight: bold; }
button:hover { background: #c0392b; }
.status { margin-top: 8px; font-size: 12px; color: #f1c40f; }
.status.ok { color: #2ecc71; }
.status.err { color: #e74c3c; }
.hint { margin-top: 10px; font-size: 11px; color: #888; font-style: italic; }
.leaderboard h3 { font-size: 13px; margin-bottom: 6px; color: #bdc3c7; }
#playersList { font-size: 12px; color: #ecf0f1; line-height: 1.6; }
.hud { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 16px; color: #fff; pointer-events: none; text-shadow: 0 0 8px rgba(0,0,0,0.8); }
.hud.hidden { display: none; }
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; }
.overlay.hidden { display: none; }
.overlay h2 { color: #e74c3c; margin-bottom: 8px; }
.overlay p { color: #bdc3c7; margin-bottom: 16px; }