/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0a0a0a;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:#e0e0e0;user-select:none}
canvas{display:block;position:fixed;top:0;left:0;width:100%;height:100%;cursor:crosshair;z-index:0;background:#0d0d10}

/* ===== OVERLAYS ===== */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100;background:rgba(5,5,10,.92);backdrop-filter:blur(6px)}
.menu-content{text-align:center;max-width:420px;width:90%}
.game-title{font-size:3.4rem;font-weight:900;letter-spacing:.18em;color:#e84040;text-shadow:0 0 40px rgba(232,64,64,.5),0 2px 0 #900;margin-bottom:0}
.game-subtitle{font-size:1.5rem;font-weight:300;letter-spacing:.45em;color:#aaa;margin-bottom:1.2rem}
.menu-zombie-icon{font-size:3.5rem;margin-bottom:1.4rem;filter:drop-shadow(0 0 12px rgba(232,64,64,.4));animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ===== BUTTONS ===== */
.menu-btn{display:block;width:100%;padding:14px 0;margin:10px 0;border:none;border-radius:10px;font-size:1.1rem;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:transform .12s,box-shadow .12s}
.menu-btn:hover{transform:translateY(-2px)}
.menu-btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,#e84040,#c02020);color:#fff;box-shadow:0 4px 24px rgba(232,64,64,.35)}
.btn-primary:hover{box-shadow:0 6px 32px rgba(232,64,64,.5)}
.btn-secondary{background:rgba(255,255,255,.08);color:#ccc;border:1px solid rgba(255,255,255,.12)}
.btn-secondary:hover{background:rgba(255,255,255,.14);color:#fff}

.controls-hint{margin-top:1.6rem;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.controls-hint span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:5px 12px;font-size:.78rem;color:#888;letter-spacing:.03em}

/* ===== LEADERBOARD ===== */
.leaderboard-content{max-width:560px}
.lb-title{font-size:1.6rem;color:#f0c040;margin-bottom:1rem;letter-spacing:.06em}
#leaderboardTable{margin-bottom:1rem}
.lb-row{display:grid;grid-template-columns:36px 1fr 80px 70px 70px 60px;gap:4px;padding:8px 10px;border-radius:6px;font-size:.85rem;align-items:center}
.lb-row.lb-header{color:#888;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:6px;margin-bottom:2px}
.lb-row:not(.lb-header){background:rgba(255,255,255,.03);margin-bottom:2px}
.lb-row.lb-gold{background:rgba(240,192,64,.1);border:1px solid rgba(240,192,64,.2)}
.lb-row.lb-silver{background:rgba(192,192,192,.08)}
.lb-row.lb-bronze{background:rgba(205,127,50,.07)}
.lb-rank{font-weight:800;color:#aaa;text-align:center}
.lb-name{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lb-score{color:#f0c040;font-weight:700;text-align:right}
.lb-kills,.lb-time,.lb-wave{text-align:right;color:#999}
.lb-empty{color:#555;padding:30px;font-size:1rem}

/* ===== GAME OVER ===== */
.gameover-content{max-width:440px}
.go-title{font-size:2.8rem;font-weight:900;color:#e84040;text-shadow:0 0 30px rgba(232,64,64,.5);margin-bottom:1rem;letter-spacing:.08em}
.go-stats{margin-bottom:1.2rem}
.go-stat-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:1rem}
.go-stat-row .go-stat-label{color:#888}
.go-stat-row .go-stat-value{font-weight:700;color:#e0e0e0}
.go-stat-row .go-stat-value.highlight{color:#f0c040}
.go-name-row{margin:10px 0}
.go-name-row input{width:100%;padding:12px 16px;border-radius:8px;border:2px solid rgba(255,255,255,.15);background:rgba(0,0,0,.4);color:#fff;font-size:1rem;text-align:center;outline:none;transition:border-color .2s}
.go-name-row input:focus{border-color:#e84040}
.go-name-row input::placeholder{color:#555}

/* ===== HUD ===== */
#hud{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-start;padding:14px 20px}
#hudLeft,#hudRight{display:flex;flex-direction:column;gap:6px}
#hudRight{align-items:flex-end}
#hudCenter{flex:1;display:flex;justify-content:center;align-items:center}

.hud-hp-wrap{position:relative;width:220px;height:26px;background:rgba(0,0,0,.6);border:2px solid rgba(255,255,255,.15);border-radius:13px;overflow:hidden}
.hud-hp-bar{height:100%;width:100%;background:linear-gradient(90deg,#e84040,#40c040);border-radius:11px;transition:width .25s}
.hud-hp-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.8)}

.hud-powerups{display:flex;gap:6px;flex-wrap:wrap}
.hud-pu{padding:3px 10px;border-radius:6px;font-size:.72rem;font-weight:700;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);white-space:nowrap}

.hud-stat{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:4px 14px;text-align:right}
.hud-label{display:block;font-size:.6rem;color:#777;letter-spacing:.1em;text-transform:uppercase}
.hud-value{font-size:1.05rem;font-weight:800}

.wave-announce{color:#f0c040;font-size:1rem;font-weight:700;opacity:0;transition:opacity .3s}

/* ===== WAVE OVERLAY ===== */
.wave-overlay{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;pointer-events:none}
.wave-big-text{font-size:3.5rem;font-weight:900;color:#f0c040;text-shadow:0 0 40px rgba(240,192,64,.6);letter-spacing:.12em;animation:waveAnim 2.2s ease-out forwards}
@keyframes waveAnim{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.1)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.15)}}