@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');
:root{--red:#e03030;--green:#00ff88;--yellow:#ffd700;--orange:#ff6600;--blue:#00aaff;--purple:#aa44ff;--dark:#0a0a0f;--darker:#050508;--panel:rgba(0,0,0,0.82);--border:rgba(0,255,136,0.3);--text:#c8e8c8;--font-hud:'Share Tech Mono',monospace;--font-title:'Orbitron',monospace;}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--text);font-family:var(--font-hud);}
.screen{position:fixed;inset:0;display:none;}.screen.active{display:flex;}
#menuScreen{align-items:center;justify-content:center;flex-direction:column;}
.menu-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at center,#1a0808 0%,#000 70%);animation:bgPulse 4s ease-in-out infinite alternate;}
@keyframes bgPulse{from{background:radial-gradient(ellipse at center,#1a0808 0%,#000 70%)}to{background:radial-gradient(ellipse at center,#250d0d 0%,#080000 70%)}}
.scanlines{position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.08) 2px,rgba(0,0,0,0.08) 4px);}
.menu-content{position:relative;z-index:2;text-align:center;padding:2rem;width:100%;max-width:820px;}
.game-title{font-family:var(--font-title);line-height:1;margin-bottom:0.2rem;}
.title-dead{font-size:clamp(4rem,12vw,9rem);font-weight:900;color:var(--red);text-shadow:0 0 40px #ff0000,0 0 80px #ff000066;letter-spacing:0.1em;}
.title-zone{font-size:clamp(4rem,12vw,9rem);font-weight:900;color:#fff;text-shadow:0 0 20px #ffffff88;letter-spacing:0.15em;margin-left:0.15em;}
.title-sub{font-size:0.9rem;letter-spacing:0.5em;color:#888;margin-bottom:3rem;text-transform:uppercase;}
.menu-panels{display:flex;gap:2rem;align-items:center;justify-content:center;flex-wrap:wrap;}
.menu-panel{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:2rem;min-width:260px;display:flex;flex-direction:column;gap:1rem;}
.menu-panel h3{font-family:var(--font-title);font-size:0.85rem;letter-spacing:0.3em;color:var(--green);}
.divider{font-family:var(--font-title);font-size:1.2rem;color:#555;padding:1rem;}
input[type=text]{background:rgba(255,255,255,0.05);border:1px solid var(--border);color:#fff;font-family:var(--font-hud);font-size:1rem;padding:0.75rem 1rem;border-radius:3px;outline:none;width:100%;transition:border-color 0.2s;}
input[type=text]:focus{border-color:var(--green);}input[type=text]::placeholder{color:#555;}
.btn{font-family:var(--font-title);font-size:0.8rem;letter-spacing:0.2em;padding:0.85rem 2rem;border:none;border-radius:3px;cursor:pointer;transition:all 0.2s;text-transform:uppercase;}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 0 20px #ff000055;}.btn-primary:hover{background:#ff4040;box-shadow:0 0 30px #ff000099;transform:translateY(-1px);}
.btn-secondary{background:transparent;color:var(--green);border:1px solid var(--green);}.btn-secondary:hover{background:rgba(0,255,136,0.1);}
.error-msg{color:var(--red);margin-top:1rem;font-size:0.9rem;min-height:1.5em;}
#lobbyScreen{flex-direction:column;align-items:center;justify-content:center;background:var(--darker);}
.lobby-content{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:2.5rem;min-width:400px;text-align:center;}
.lobby-content h2{font-family:var(--font-title);color:var(--green);font-size:1.4rem;margin-bottom:0.5rem;}
.lobby-hint{color:#666;font-size:0.85rem;margin-bottom:2rem;}
.player-list{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:2rem;}
.player-entry{background:rgba(0,255,136,0.08);border:1px solid rgba(0,255,136,0.2);border-radius:3px;padding:0.7rem 1rem;display:flex;align-items:center;gap:0.8rem;}
.player-entry .player-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);}
.lobby-actions{display:flex;gap:1rem;justify-content:center;margin-bottom:1rem;}
.lobby-tip{color:#555;font-size:0.8rem;}
#gameScreen{display:flex;}
#gameCanvas{position:absolute;inset:0;width:100%;height:100%;}
#hud{position:absolute;inset:0;pointer-events:none;}
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:linear-gradient(to bottom,rgba(0,0,0,0.7),transparent);}
.hud-round{font-family:var(--font-title);font-size:1.1rem;color:var(--red);text-shadow:0 0 10px var(--red);letter-spacing:0.2em;}
.hud-score{font-family:var(--font-title);font-size:0.9rem;color:var(--yellow);}
.hud-center-msg{font-family:var(--font-title);font-size:1.4rem;color:#fff;text-align:center;text-shadow:0 0 20px #fff;transition:opacity 0.5s;}
.hud-bottom-left{position:absolute;bottom:1.5rem;left:1.5rem;}
.hud-health{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.4rem;}
.hud-label{font-size:0.75rem;color:#888;letter-spacing:0.2em;width:2.5rem;}
.health-bar-bg{width:180px;height:8px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden;}
.health-bar{height:100%;background:linear-gradient(90deg,var(--red),#ff6666);border-radius:4px;transition:width 0.3s;box-shadow:0 0 8px var(--red);}
.health-num{font-size:1rem;color:#fff;font-weight:700;min-width:4rem;}
.hud-overshield{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.3rem;}
.overshield-bar{height:100%;background:linear-gradient(90deg,#4488ff,#88ccff);border-radius:4px;transition:width 0.4s;box-shadow:0 0 8px #4488ff;}

/* Powerup badges */
#powerupBar{display:flex;gap:0.3rem;flex-wrap:wrap;margin-top:0.3rem;}
.pu-badge{background:rgba(255,200,0,0.18);border:1px solid rgba(255,200,0,0.4);border-radius:3px;padding:0.1rem 0.4rem;font-size:0.7rem;color:var(--yellow);}
.pu-badge.dmg{background:rgba(255,80,0,0.18);border-color:rgba(255,80,0,0.4);color:var(--orange);}
.pu-badge.key{background:rgba(255,200,0,0.25);border-color:rgba(255,200,0,0.6);color:#ffdd44;}
.hud-bottom-right{position:absolute;bottom:1.5rem;right:1.5rem;}
.weapon-slots{display:flex;gap:0.5rem;}
.weapon-slot{background:rgba(0,0,0,0.75);border:1px solid rgba(255,255,255,0.15);border-radius:4px;padding:0.45rem 0.65rem;min-width:95px;transition:border-color 0.15s,background 0.15s;}
.weapon-slot.active{border-color:var(--green);background:rgba(0,255,136,0.12);box-shadow:0 0 12px rgba(0,255,136,0.3);}
.weapon-slot.empty{opacity:0.3;}
.ws-num{font-size:0.6rem;color:#888;letter-spacing:0.15em;margin-bottom:0.12rem;}.weapon-slot.active .ws-num{color:var(--green);}
.ws-name{font-family:var(--font-title);font-size:0.72rem;color:#eee;margin-bottom:0.18rem;white-space:nowrap;}.weapon-slot.active .ws-name{color:#fff;}
.ws-ammo{font-size:0.82rem;color:#aaa;}.weapon-slot.active .ws-ammo{color:var(--yellow);}
.ws-empty{font-size:0.82rem;color:#555;}.ws-atts{display:flex;gap:0.2rem;margin-top:0.2rem;}.att-dot{font-size:0.5rem;color:var(--blue);}
.hud-money{position:absolute;top:4rem;right:1.5rem;font-family:var(--font-title);font-size:1.1rem;color:var(--yellow);text-shadow:0 0 10px var(--yellow);}.money-sign{opacity:0.7;}
.minimap-container{position:absolute;top:4rem;left:1.5rem;}
#minimapCanvas{border:1px solid var(--border);border-radius:3px;background:rgba(0,0,0,0.6);display:block;}
.minimap-label{font-size:0.6rem;color:#555;text-align:center;margin-top:2px;letter-spacing:0.3em;}
.player-cards{position:absolute;top:50%;transform:translateY(-50%);left:1rem;display:flex;flex-direction:column;gap:0.4rem;}
.p-card{background:rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.15);border-radius:4px;padding:0.4rem 0.6rem;min-width:140px;transition:opacity 0.3s;}
.p-card.dead{opacity:0.4;border-color:var(--red);}
.p-card.downed{border-color:#ff4400;background:rgba(255,68,0,0.12);animation:downedPulse 1.5s ease-in-out infinite alternate;}
@keyframes downedPulse{from{border-color:#ff4400}to{border-color:#ff8844}}
.p-name{font-size:0.72rem;color:#fff;margin-bottom:0.22rem;display:flex;align-items:center;gap:0.3rem;flex-wrap:wrap;}
.p-armor{font-size:0.65rem;color:var(--blue);}
.p-hpbar{height:4px;background:#333;border-radius:2px;overflow:hidden;}
.p-hpfill{height:100%;background:var(--green);border-radius:2px;transition:width 0.3s;}
.p-revive-bar{height:3px;background:#333;border-radius:2px;overflow:hidden;margin-top:0.18rem;}
.p-revive-fill{height:100%;background:var(--green);border-radius:2px;transition:width 0.2s;}
.p-money{font-size:0.62rem;color:var(--yellow);margin-top:0.2rem;}
.crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;user-select:none;}
.crosshair-dot{width:4px;height:4px;background:rgba(255,255,255,0.9);border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.9);}
.crosshair-line{position:absolute;background:rgba(255,255,255,0.7);}
.ch-top{width:1px;height:8px;top:-12px;left:50%;transform:translateX(-50%);}
.ch-bot{width:1px;height:8px;bottom:-12px;left:50%;transform:translateX(-50%);}
.ch-lft{height:1px;width:8px;left:-12px;top:50%;transform:translateY(-50%);}
.ch-rgt{height:1px;width:8px;right:-12px;top:50%;transform:translateY(-50%);}
#adsIndicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity 0.2s;}
.ads-dot{width:6px;height:6px;background:#fff;border-radius:50%;box-shadow:0 0 6px #fff;}
#shieldIndicator{position:absolute;bottom:6rem;left:50%;transform:translateX(-50%);background:rgba(30,60,100,0.8);border:1px solid var(--blue);border-radius:4px;padding:0.4rem 1rem;font-size:0.85rem;color:var(--blue);display:none;align-items:center;gap:0.5rem;}
/* Ammo pickup flash */
#ammoFlash{position:absolute;inset:0;pointer-events:none;background:rgba(0,200,255,0.15);opacity:0;transition:opacity 0.3s;z-index:150;}
.killfeed{position:absolute;top:5rem;right:1.5rem;display:flex;flex-direction:column;gap:0.25rem;align-items:flex-end;}
.kf-entry{background:rgba(0,0,0,0.7);border-radius:3px;padding:0.25rem 0.6rem;font-size:0.8rem;animation:kfFade 4s forwards;}
.kf-kill{color:var(--red);border-left:2px solid var(--red);}.kf-round{color:var(--yellow);border-left:2px solid var(--yellow);}.kf-revive{color:var(--blue);border-left:2px solid var(--blue);}
@keyframes kfFade{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
.zombie-counter{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);border:1px solid rgba(255,0,0,0.3);border-radius:3px;padding:0.4rem 1rem;font-size:1rem;color:var(--red);}
.controls-hint{position:absolute;bottom:0.5rem;left:50%;transform:translateX(-50%);font-size:0.62rem;color:#444;text-align:center;pointer-events:none;}
.lock-prompt{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);font-family:var(--font-title);font-size:1.5rem;color:#fff;letter-spacing:0.3em;cursor:pointer;transition:opacity 0.3s;pointer-events:all;z-index:50;}.lock-prompt.hidden{display:none;}.lock-prompt.visible{display:flex;}
.shop-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;pointer-events:all;z-index:100;}.shop-overlay.hidden{display:none;}
.shop-panel{background:#0d0d14;border:1px solid var(--border);border-radius:6px;padding:2rem;width:540px;max-width:95vw;max-height:82vh;overflow-y:auto;}
.shop-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;}
.shop-header h2{font-family:var(--font-title);font-size:1.2rem;color:var(--yellow);}
.shop-close{background:none;border:1px solid #555;color:#999;padding:0.3rem 0.6rem;cursor:pointer;font-size:1rem;border-radius:3px;}.shop-close:hover{border-color:var(--red);color:var(--red);}
.shop-tabs{display:flex;gap:0.4rem;margin-bottom:1.5rem;}
.tab-btn{background:transparent;border:1px solid #333;color:#888;padding:0.45rem 0.65rem;cursor:pointer;font-family:var(--font-hud);font-size:0.75rem;border-radius:3px;flex:1;transition:all 0.2s;}
.tab-btn.active{border-color:var(--green);color:var(--green);background:rgba(0,255,136,0.08);}
.tab-content{display:none;}.tab-content.active{display:block;}
.mystery-box-visual{text-align:center;padding:1.5rem;border:1px dashed #333;border-radius:4px;margin-bottom:1rem;}
.box-icon{font-size:3.5rem;margin-bottom:0.5rem;animation:boxBob 2s ease-in-out infinite;}
@keyframes boxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.box-pool{font-size:0.72rem;color:#555;margin-top:0.5rem;}
.box-result{margin-top:1rem;padding:1rem;border:1px solid var(--green);border-radius:4px;text-align:center;color:var(--green);font-size:1rem;font-family:var(--font-title);animation:pop 0.3s;}
@keyframes pop{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}
.attachment-list,.armor-list,.powerup-list{display:flex;flex-direction:column;gap:0.7rem;}
.shop-item{background:rgba(255,255,255,0.04);border:1px solid #2a2a3a;border-radius:4px;padding:0.8rem 1rem;display:flex;justify-content:space-between;align-items:center;}.shop-item:hover{border-color:var(--border);}
.si-info{flex:1;}.si-name{font-size:0.95rem;color:#ddd;margin-bottom:0.2rem;}.si-desc{font-size:0.75rem;color:#666;}
.si-cost{color:var(--yellow);font-size:1rem;margin-right:0.8rem;}
.si-btn{background:var(--green);color:#000;border:none;padding:0.4rem 0.8rem;cursor:pointer;border-radius:3px;font-family:var(--font-hud);font-size:0.8rem;font-weight:700;}.si-btn:hover{background:#00ff99;}.si-cost.rising { color: #ff8844; animation: pricePulse 2s ease-in-out infinite; }
@keyframes pricePulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
.death-screen{position:absolute;inset:0;background:rgba(180,0,0,0.4);display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}.death-screen.hidden{display:none;}
.death-text{font-family:var(--font-title);font-size:3rem;color:var(--red);text-shadow:0 0 30px var(--red);animation:deathPulse 1.5s ease-in-out infinite alternate;}
@keyframes deathPulse{from{opacity:0.7}to{opacity:1}}
.death-sub{color:#fff;margin-top:1rem;font-size:1rem;letter-spacing:0.2em;}
.gameover-screen{position:absolute;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;pointer-events:all;}.gameover-screen.hidden{display:none;}
.go-content{text-align:center;}.go-content h1{font-family:var(--font-title);font-size:4rem;color:var(--red);text-shadow:0 0 40px var(--red);margin-bottom:1rem;}.go-round{font-size:1.2rem;color:#ccc;margin-bottom:2rem;}
.go-scores{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:2rem;}.go-score-entry{font-size:1.1rem;color:var(--yellow);}.go-score-entry:first-child{font-size:1.4rem;color:#fff;}
.damage-flash{position:absolute;inset:0;pointer-events:none;background:rgba(255,0,0,0);z-index:200;}.damage-flash.flash{animation:flashAnim 0.35s forwards;}
@keyframes flashAnim{0%{background:rgba(255,0,0,0.4)}100%{background:rgba(255,0,0,0)}}

/* Money sharing UI in player cards */
.p-give-money{display:flex;gap:4px;margin-top:4px;}
.p-give-input{width:64px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,200,0,0.3);border-radius:4px;color:#ffd700;font-size:0.72rem;padding:2px 5px;outline:none;}
.p-give-input:focus{border-color:rgba(255,200,0,0.7);}
.p-give-btn{background:rgba(255,180,0,0.15);border:1px solid rgba(255,180,0,0.4);border-radius:4px;color:#ffd700;font-size:0.68rem;padding:2px 6px;cursor:pointer;white-space:nowrap;}
.p-give-btn:hover{background:rgba(255,180,0,0.3);}