*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;overflow:hidden;background:#000}#game-container{width:100vw;height:100vh}#ui-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none}#ui-overlay>*{pointer-events:auto}#hud{position:absolute;top:10px;left:10px;background:#000000bf;color:#fff;padding:10px 12px;border-radius:6px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;min-width:140px}#hud-top-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}#player-id{font-size:12px;opacity:.7;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}#player-money{font-size:14px;font-weight:700;color:#fbbf24}#health-bar-container{position:relative;height:18px;background:#ffffff1a;border-radius:3px;overflow:hidden;margin-bottom:6px}#health-bar{height:100%;background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:3px;transition:width .2s ease,background .3s ease;width:100%}#health-bar.low{background:linear-gradient(90deg,#f97316,#fb923c)}#health-bar.critical{background:linear-gradient(90deg,#ef4444,#f87171)}#health-bar.dead{background:#374151}#health-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.8)}#respawn-timer{font-size:12px;color:#fbbf24;text-align:center;margin-bottom:6px;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}#unit-counts{padding-top:6px;border-top:1px solid rgba(255,255,255,.15);font-size:12px}.unit-count-row{display:flex;align-items:center;gap:8px;margin-bottom:2px}.unit-count-row:last-child{margin-bottom:0}.unit-count-label{width:28px;opacity:.6;font-size:11px}.unit-count-item{display:flex;align-items:center;gap:2px;font-size:12px}#my-units .unit-count-item{color:#60a5fa}#enemy-units .unit-count-item{color:#f87171}#help-hint{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.15);font-size:10px;opacity:.5;text-align:center}#controls-overlay{position:absolute;top:10px;left:160px;background:#000000d9;color:#fff;padding:12px 16px;border-radius:6px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}#controls-overlay.hidden{display:none}#controls-content h3{font-size:13px;margin-bottom:8px;opacity:.9}.control-row{font-size:12px;margin-bottom:4px;display:flex;gap:8px}.control-row:last-child{margin-bottom:0}.control-row .key{background:#ffffff26;padding:2px 6px;border-radius:3px;font-size:11px;min-width:70px;text-align:center}#mute-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:16px;width:32px;height:32px;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0}#mute-button:hover{background:#fff3}#buy-zone-prompt{position:absolute;bottom:120px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:15px 30px;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(251,191,36,.6);animation:buyZonePulse 1.5s infinite}#buy-zone-prompt.hidden{display:none}#buy-zone-text{font-size:18px;font-weight:700;text-align:center}#buy-zone-text .key{display:inline-block;background:#fbbf244d;padding:2px 8px;border-radius:4px;border:1px solid rgba(251,191,36,.6);margin:0 4px}#buy-zone-text .pending-spawn{display:block;font-size:14px;font-weight:400;color:#fbbf24e6;margin-top:8px;animation:pendingPulse 1s infinite}@keyframes pendingPulse{0%,to{opacity:.7}50%{opacity:1}}@keyframes buyZonePulse{0%,to{border-color:#fbbf2499}50%{border-color:#fbbf24}}#buyzone-popup{position:absolute;transform:translate(-50%,-100%);background:#ef4444e6;color:#fff;padding:10px 20px;border-radius:8px;font-size:16px;font-weight:700;white-space:nowrap;pointer-events:none;z-index:100;opacity:0;transition:opacity .2s ease-out}#buyzone-popup.visible{opacity:1}#buyzone-popup.hidden{opacity:0}#buyzone-popup:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(239,68,68,.9)}#connection-status{position:absolute;top:20px;right:20px;background:#000000b3;color:#fff;padding:10px 15px;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:14px}#connection-status.connected{background:#22c55eb3}#connection-status.disconnected{background:#ef4444b3}#queue-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 20px}#queue-screen.hidden{display:none}.queue-content{text-align:center;color:#fff;width:100%;max-width:700px}.queue-content h1{font-size:48px;margin-bottom:10px;background:linear-gradient(to right,#3b82f6,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.queue-content p{font-size:18px;margin-bottom:30px;opacity:.8}#join-queue-button{background:linear-gradient(to right,#3b82f6,#2563eb);border:none;color:#fff;padding:15px 40px;font-size:18px;border-radius:8px;cursor:pointer;transition:all .2s}#join-queue-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px #3b82f64d}#join-queue-button:disabled{opacity:.5;cursor:not-allowed}#queue-status{margin-top:20px;font-size:16px;color:#fbbf24}.game-mode-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.game-mode-panel{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:24px;text-align:center}.game-mode-panel h2{font-size:20px;margin-bottom:16px;color:#fff}.game-mode-panel .panel-description{font-size:14px;color:#94a3b8;margin-bottom:20px}.multiplayer-panel{border-color:#3b82f64d}.multiplayer-panel h2{color:#60a5fa}.ai-panel{border-color:#8b5cf64d;display:flex;flex-direction:column}.ai-panel h2{color:#a78bfa}.ai-difficulty-section{margin-bottom:20px}.ai-difficulty-section label{display:block;font-size:14px;color:#94a3b8;margin-bottom:8px}#ai-difficulty{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:12px 20px;font-size:16px;border-radius:8px;cursor:pointer;width:100%}#ai-difficulty:focus{outline:none;border-color:#8b5cf6}#ai-difficulty option{background:#1e293b;color:#fff}.map-selector-section{margin-bottom:20px}.map-selector-section label{display:block;font-size:14px;color:#94a3b8;margin-bottom:8px}.map-selector-section select{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:12px 20px;font-size:16px;border-radius:8px;cursor:pointer;width:100%}.map-selector-section select:focus{outline:none;border-color:#8b5cf6}.map-selector-section select option{background:#1e293b;color:#fff}.map-vote-hint{font-size:11px;color:#64748b;margin:6px 0 0;font-style:italic}#play-vs-ai-button{background:linear-gradient(to right,#8b5cf6,#7c3aed);border:none;color:#fff;padding:15px 30px;font-size:16px;border-radius:8px;cursor:pointer;transition:all .2s;margin-top:auto}#play-vs-ai-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px #8b5cf64d}#play-vs-ai-button:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 600px){.game-mode-panels{grid-template-columns:1fr}}#game-over-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;align-items:center;justify-content:center}#game-over-screen.hidden{display:none}.game-over-content{text-align:center;color:#fff}#game-over-title{font-size:64px;margin-bottom:20px}#game-over-title.victory{color:#22c55e}#game-over-title.defeat{color:#ef4444}#game-over-message{font-size:24px;margin-bottom:20px;opacity:.8}#match-stats{margin-bottom:30px}#match-duration{font-size:18px;color:#94a3b8;margin-bottom:20px}.stats-columns{display:flex;justify-content:center;gap:40px}.stats-column{background:#ffffff0d;padding:20px;border-radius:12px;min-width:200px}.stats-column h3{font-size:18px;margin-bottom:15px;color:#94a3b8;text-transform:uppercase;letter-spacing:1px}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1)}.stat-item:last-child{border-bottom:none}.stat-label{font-size:14px;color:#94a3b8}.stat-value{font-size:18px;font-weight:700;color:#fbbf24}.stat-value.points{font-size:24px;color:#22c55e}#play-again-button{background:#fff3;border:2px solid white;color:#fff;padding:15px 40px;font-size:18px;border-radius:8px;cursor:pointer;transition:all .2s}#play-again-button:hover{background:#ffffff4d;transform:translateY(-2px)}.hidden{display:none}#leaderboard{margin-top:30px;padding:15px 20px;background:#ffffff0d;border-radius:8px}#leaderboard h3{font-size:14px;margin-bottom:12px;opacity:.8}#total-matches{display:inline-block;margin-bottom:12px;padding:4px 8px;background:#000;border:3px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 0 0 0 2px #000,inset 2px 2px 4px #000c;font-family:Courier New,monospace;font-size:18px;font-weight:700;color:#3f3;letter-spacing:2px;text-shadow:0 0 8px #33ff33}#total-matches .counter-label{display:block;font-size:9px;color:#888;letter-spacing:1px;text-shadow:none;margin-top:2px;text-transform:uppercase}#leaderboard-loading,#leaderboard-empty{color:#94a3b8;font-size:13px}#leaderboard-top3{display:flex;flex-direction:column;gap:6px}.top3-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#ffffff0d;border-radius:6px;font-size:13px}.top3-item.gold{background:#fbbf241a;border:1px solid rgba(251,191,36,.3)}.top3-item.silver{background:#94a3b81a;border:1px solid rgba(148,163,184,.2)}.top3-item.bronze{background:#cd7f321a;border:1px solid rgba(205,127,50,.2)}.top3-rank{font-size:16px;width:24px;text-align:center}.top3-name{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top3-points{color:#22c55e;font-weight:700;font-size:12px}#leaderboard-view-more{margin-top:10px;width:100%;background:transparent;border:1px solid rgba(255,255,255,.2);color:#94a3b8;padding:8px;font-size:12px;border-radius:4px;cursor:pointer;transition:all .2s}#leaderboard-view-more:hover{background:#ffffff0d;color:#fff;border-color:#ffffff4d}.leaderboard-modal{max-width:600px}.leaderboard-modal .info-modal-body{max-height:400px;overflow-y:auto}#leaderboard-table{width:100%;border-collapse:collapse;text-align:left}#leaderboard-table th{padding:12px 8px;border-bottom:2px solid rgba(255,255,255,.2);color:#94a3b8;font-size:12px;text-transform:uppercase;letter-spacing:1px}#leaderboard-table td{padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}#leaderboard-table tr:hover td{background:#ffffff0d}#leaderboard-table .rank{font-weight:700;width:40px}#leaderboard-table .rank.gold{color:#fbbf24}#leaderboard-table .rank.silver{color:#94a3b8}#leaderboard-table .rank.bronze{color:#cd7f32}#leaderboard-table .player-name{font-weight:500}#leaderboard-table .points{color:#22c55e;font-weight:700}#auth-section{margin-bottom:20px}#auth-guest,#auth-logged-in{display:flex;flex-direction:column;align-items:center;gap:10px}.multiplayer-panel #join-queue-button{width:100%}#auth-logged-in.hidden,#auth-guest.hidden{display:none}.guest-info{display:flex;align-items:center;justify-content:center;background:#ffffff1a;padding:10px 20px;border-radius:8px;margin-bottom:4px}.guest-name{font-size:18px;font-weight:600;color:#fbbf24}#auth-guest .auth-hint{margin-bottom:8px}#auth-guest .auth-buttons{gap:8px}#auth-guest .auth-button{padding:8px 16px;font-size:14px}.auth-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.auth-button{display:inline-flex;align-items:center;gap:8px;border:none;color:#fff;padding:12px 20px;font-size:15px;border-radius:8px;cursor:pointer;transition:all .2s;font-weight:500}.auth-button.github{background:#24292e}.auth-button.github:hover{background:#2f363d;transform:translateY(-2px)}.auth-button.bluesky{background:#0085ff}.auth-button.bluesky:hover{background:#0073e6;transform:translateY(-2px)}.auth-icon{flex-shrink:0}.auth-hint{font-size:14px;color:#94a3b8;margin:0}.user-info{display:flex;align-items:center;gap:12px;background:#ffffff1a;padding:10px 20px;border-radius:8px}.user-avatar{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}.user-name{font-size:16px;font-weight:500;color:#fff}.logout-button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#94a3b8;padding:6px 16px;font-size:14px;border-radius:4px;cursor:pointer;transition:all .2s}.logout-button:hover{background:#ffffff1a;color:#fff}.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center}.modal.hidden{display:none}.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c}.modal-content{position:relative;background:#1a1a2e;border-radius:12px;padding:30px;max-width:400px;width:90%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 50px #00000080}.modal-content h2{color:#fff;margin-bottom:10px;font-size:24px}.modal-description{color:#94a3b8;font-size:14px;margin-bottom:20px}.form-group{margin-bottom:16px}.form-group label{display:block;color:#e2e8f0;font-size:14px;margin-bottom:6px;font-weight:500}.form-group input{width:100%;padding:12px;border:1px solid #334155;border-radius:6px;background:#0f172a;color:#fff;font-size:16px;transition:border-color .2s}.form-group input:focus{outline:none;border-color:#0085ff}.form-group input::placeholder{color:#64748b}.form-hint{color:#64748b;font-size:12px;margin-top:6px}.form-error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#ef4444;padding:10px 12px;border-radius:6px;font-size:14px;margin-bottom:16px}.form-error.hidden{display:none}.modal-buttons{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.modal-button{padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.modal-button.cancel{background:transparent;border:1px solid #334155;color:#94a3b8}.modal-button.cancel:hover{background:#ffffff0d;color:#fff}.modal-button.submit{background:#0085ff;border:none;color:#fff}.modal-button.submit:hover{background:#0073e6}.modal-button.submit:disabled{opacity:.5;cursor:not-allowed}#lobby-status{margin-top:16px;text-align:center}#lobby-status:empty{display:none}#players-waiting{color:#fbbf24;font-size:14px;margin-bottom:12px}#active-games h3{font-size:14px;color:#94a3b8;margin-bottom:4px}.spectate-hint{font-size:12px;color:#64748b;margin:0 0 10px}.no-active-games{font-size:13px;color:#64748b;font-style:italic;margin:0;padding:8px 0}#active-games-list{display:flex;flex-direction:column;gap:8px}.active-game-item{display:flex;justify-content:space-between;align-items:center;background:#ffffff0d;padding:10px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.1)}.active-game-item:hover{background:#ffffff14}.game-players{font-size:13px;color:#e2e8f0;flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-players .vs{color:#94a3b8;margin:0 8px}.game-spectators{font-size:12px;color:#64748b;margin-right:12px}.spectate-button{background:#8b5cf64d;border:1px solid rgba(139,92,246,.5);color:#c4b5fd;padding:6px 14px;font-size:13px;border-radius:4px;cursor:pointer;transition:all .2s}.spectate-button:hover{background:#8b5cf680;color:#fff}#spectator-hud{position:absolute;top:0;left:50%;transform:translate(-50%);z-index:50}.spectator-banner{display:flex;align-items:center;gap:15px;background:#8b5cf6e6;color:#fff;padding:10px 20px;border-radius:0 0 8px 8px;font-size:14px;font-weight:700}#spectator-players{font-weight:400;opacity:.9}#stop-spectating-button{background:#0000004d;border:1px solid rgba(255,255,255,.3);color:#fff;padding:4px 12px;font-size:12px;border-radius:4px;cursor:pointer;transition:all .2s}#stop-spectating-button:hover{background:#00000080}#controls-summary{margin-top:30px;padding:15px 20px;background:#ffffff0d;border-radius:8px}#controls-summary h3{font-size:14px;margin-bottom:10px;opacity:.8}.controls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 16px;font-size:12px;opacity:.7}.controls-grid strong{color:#fbbf24}#footer-links{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:center;align-items:center;gap:12px}.footer-link{background:none;border:none;color:#64748b;font-size:14px;cursor:pointer;transition:color .2s;padding:4px 8px}.footer-link:hover{color:#94a3b8}.footer-separator{color:#334155}.info-modal{max-width:500px}.info-modal h2{margin-bottom:20px;flex-shrink:0}.info-modal-body{text-align:left;color:#e2e8f0;line-height:1.6;overflow-y:auto;flex:1;min-height:0}.info-modal .modal-buttons{flex-shrink:0}.info-modal-body p{margin-bottom:15px;font-size:14px}.info-modal-body h3{color:#fbbf24;font-size:16px;margin-top:20px;margin-bottom:10px}.info-modal-body h3:first-child{margin-top:0}.info-modal-body a{color:#3b82f6;text-decoration:none}.info-modal-body a:hover{text-decoration:underline}.credits-list{list-style:none;padding:0;margin:0 0 15px}.credits-list li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}.credits-list li:last-child{border-bottom:none}.credits-list.sounds li{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}.sound-name{color:#e2e8f0;font-weight:500}.sound-author{color:#94a3b8;font-size:13px}.sound-license{background:#3b82f633;color:#93c5fd;padding:2px 6px;border-radius:4px;font-size:11px;margin-left:auto}.credits-note{color:#94a3b8;font-size:13px;margin-bottom:10px}#mobile-controls{display:none;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}body.mobile #mobile-controls{display:block}#joystick-left{position:absolute;bottom:80px;left:30px;width:120px;height:120px;pointer-events:auto}#joystick-right{position:absolute;bottom:80px;right:30px;width:120px;height:120px;pointer-events:auto}#shoot-btn{position:absolute;bottom:290px;right:50px;width:60px;height:60px;border-radius:50%;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(239,68,68,.6);color:#ef4444;font-size:24px;font-weight:700;pointer-events:auto;display:flex;align-items:center;justify-content:center}#shoot-btn:active{background:#ef44444d;transform:scale(.95)}#interact-btn{position:absolute;bottom:220px;right:50px;width:60px;height:60px;border-radius:50%;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(251,191,36,.6);color:#fbbf24;font-size:24px;font-weight:700;pointer-events:auto;display:flex;align-items:center;justify-content:center}#interact-btn:active{background:#fbbf244d;transform:scale(.95)}body.mobile #controls-hint{display:none}body.mobile #hud{top:10px;left:10px;padding:10px 15px}body.mobile #buy-zone-prompt{bottom:220px}@supports (padding-bottom: env(safe-area-inset-bottom)){body.mobile #joystick-left{bottom:calc(80px + env(safe-area-inset-bottom));left:calc(30px + env(safe-area-inset-left))}body.mobile #joystick-right{bottom:calc(80px + env(safe-area-inset-bottom));right:calc(30px + env(safe-area-inset-right))}body.mobile #shoot-btn{bottom:calc(290px + env(safe-area-inset-bottom));right:calc(50px + env(safe-area-inset-right))}body.mobile #interact-btn{bottom:calc(220px + env(safe-area-inset-bottom));right:calc(50px + env(safe-area-inset-right))}}