* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #0b0f19; color: #fff; display: flex; flex-direction: column; min-height: 100vh; }
header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.5rem; background: #e23636; border-bottom: 4px solid #15152e; }
h1 { font-size: 1.5rem; letter-spacing: 1px; text-transform: uppercase; }
#auth-bar button { background: #15152e; color: #fff; border: none; padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer; }
main { flex: 1; display: flex; justify-content: center; align-items: center; padding: 1rem; }
#game-container { position: relative; max-width: 100%; }
canvas { display: block; background: linear-gradient(#1a237e, #0b0f19); border: 4px solid #15152e; border-radius: 8px; max-width: 100%; height: auto; image-rendering: pixelated; }
#ui-layer { position: absolute; inset: 0; pointer-events: none; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: rgba(0,0,0,0.75); pointer-events: auto; padding: 1rem; border-radius: 8px; }
.overlay h2 { margin-bottom: 0.75rem; color: #e23636; }
.overlay p { margin-bottom: 0.5rem; line-height: 1.4; }
#hud { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: 0.5rem; background: rgba(0,0,0,0.5); font-weight: bold; pointer-events: none; }
form { background: rgba(255,255,255,0.08); padding: 1rem; border-radius: 8px; margin-top: 0.5rem; }
input { display: block; width: 220px; margin: 0.4rem 0; padding: 0.5rem; border: none; border-radius: 4px; }
button { padding: 0.6rem 1.2rem; margin-top: 0.5rem; border: none; border-radius: 4px; background: #e23636; color: #fff; font-weight: bold; cursor: pointer; }
button:hover { background: #ff4d4d; }
.toggle { font-size: 0.85rem; margin-top: 0.5rem; }
.toggle a { color: #7ec8ff; }
.message { color: #ff6b6b; min-height: 1.2rem; }
#leaderboard ol { list-style: decimal inside; text-align: left; margin: 0.5rem 0; }
#leaderboard li { padding: 0.25rem 0; }
[hidden] { display: none !important; }