.main-menu{display:flex;flex-direction:column;gap:35px;align-items:center;padding:0;min-width:800px;max-width:1400px;margin:80px auto 0}.main-menu h1{color:#fff;font-size:3rem;margin-bottom:2rem;text-shadow:2px 2px 4px rgba(0,0,0,.3);background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-create,.btn-join,.btn-matchmaking,.btn-how-to-play,.btn-encyclopedia,.btn-load-level,.btn-level-editor,.btn-skirmish{width:300px;height:80px;font-size:28px;font-weight:700;border:none;border-radius:12px;cursor:pointer;transition:all .3s;text-transform:uppercase;letter-spacing:1px}.btn-create{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 5px 15px #667eea66}.btn-create:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 20px #667eea80}.btn-join{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;box-shadow:0 5px 15px #f093fb66}.btn-join:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 20px #f093fb80}.btn-matchmaking{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;box-shadow:0 5px 15px #4facfe66}.btn-matchmaking:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 20px #4facfe80}.btn-how-to-play{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 5px 15px #10b98166}.btn-how-to-play:hover{transform:translateY(-2px);box-shadow:0 7px 20px #10b98180}.btn-encyclopedia{background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;box-shadow:0 5px 15px #8b5cf666}.btn-encyclopedia:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 20px #8b5cf680}.btn-load-level{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;box-shadow:0 5px 15px #fbbf2466}.btn-load-level:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 20px #fbbf2499}.btn-skirmish{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 5px 15px #10b98166}.btn-skirmish:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 20px #10b98180}.btn-level-editor{background:linear-gradient(135deg,#f97316,#dc2626);color:#fff;box-shadow:0 5px 15px #f9731666}.btn-level-editor:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 20px #f9731680}.btn-create:disabled,.btn-join:disabled,.btn-matchmaking:disabled,.btn-encyclopedia:disabled,.btn-load-level:disabled,.btn-level-editor:disabled,.btn-skirmish:disabled{opacity:.5;cursor:not-allowed;transform:none}.back-button{background:#ffffff1a;color:#9ca3af;border:1px solid rgba(255,255,255,.2);padding:10px 20px;border-radius:6px;cursor:pointer;margin-bottom:20px;font-size:16px;transition:all .2s}.no-games{text-align:center;color:#9ca3af;padding:40px;font-size:18px}.games-container{display:flex;flex-direction:column;gap:15px;width:100%}.game-item{border:2px solid rgba(255,255,255,.1);border-radius:10px;padding:20px;background:#ffffff0d;transition:all .3s;display:flex;justify-content:space-between;align-items:center}.game-item:hover{border-color:#60a5fa;box-shadow:0 4px 12px #60a5fa33;background:#ffffff14}.game-info{display:flex;flex-direction:column;gap:5px}.game-info h3{color:#e5e7eb;margin:0}.player-count{color:#9ca3af;font-size:14px}.team-counts{display:flex;gap:10px;font-size:14px;color:#9ca3af}.game-age{font-size:12px;color:#6b7280;font-style:italic}.view-game-btn{padding:10px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700;transition:all .3s}.view-game-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.view-game-btn:disabled{opacity:.5;cursor:not-allowed}.social-links{display:flex;gap:20px;justify-content:center;align-items:center;margin-top:10px}.social-button{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;cursor:pointer;text-decoration:none;box-shadow:0 2px 8px #0000004d}.social-button svg{width:24px;height:24px}.social-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0006}.social-button.discord{background:linear-gradient(135deg,#5865f2,#4752c4);color:#fff}.social-button.discord:hover{box-shadow:0 4px 12px #5865f280}.social-button.twitter{background:linear-gradient(135deg,#1da1f2,#0d8bd9);color:#fff}.social-button.twitter:hover{box-shadow:0 4px 12px #1da1f280}.social-button.bluesky{background:linear-gradient(135deg,#0085ff,#06c);color:#fff}.social-button.bluesky:hover{box-shadow:0 4px 12px #0085ff80}.social-button.reddit{background:linear-gradient(135deg,#ff4500,#cc3700);color:#fff}.social-button.reddit:hover{box-shadow:0 4px 12px #ff450080}.preload-progress-fixed{position:fixed;bottom:20px;left:50%;transform:translate(-50%);width:90%;max-width:600px;background:#000c;padding:16px 24px;border-radius:12px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #00000080;z-index:9999}.preload-bar-container{width:100%;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;margin-bottom:8px}.preload-bar-fill{height:100%;background:linear-gradient(90deg,#60a5fa,#a78bfa);transition:width .3s ease;border-radius:4px}.preload-text{color:#9ca3af;font-size:14px;text-align:center}@media (orientation: portrait) and (max-width: 768px){.main-menu{transform:rotate(90deg);transform-origin:center center;position:absolute;top:50%;left:50%;margin-left:-50vh;margin-top:-50vw;width:100vh;height:100vw;min-width:unset;max-width:unset;padding:40px 20px;gap:20px}.main-menu h1{font-size:2rem;margin-bottom:1rem}.main-menu h1:after{content:" - Please rotate your device";font-size:1rem;display:block;margin-top:10px;opacity:.8}.btn-create,.btn-join,.btn-matchmaking,.btn-how-to-play,.btn-encyclopedia,.btn-load-level,.btn-level-editor{width:100%;max-width:400px;height:60px;font-size:20px}.games-container{max-height:40vh;overflow-y:auto}}@media (orientation: landscape) and (max-height: 500px){.main-menu{min-width:unset;max-width:100%;width:100%;padding:5px 15px 0;margin:0;gap:8px}.main-menu h1{display:none}.btn-create,.btn-join,.btn-matchmaking,.btn-how-to-play,.btn-encyclopedia,.btn-load-level,.btn-level-editor{width:100%;max-width:300px;height:42px;font-size:16px}.social-links{margin-top:0;gap:12px}.social-button{width:32px;height:32px}.social-button svg{width:16px;height:16px}}.matchmaking-container{max-width:1200px;margin:0 auto;padding:2rem;color:#fff}.matchmaking-container h1{text-align:center;font-size:2.5rem;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.matchmaking-description{text-align:center;font-size:1.2rem;margin-bottom:2rem;color:#ccc}.game-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.game-mode-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;padding:2rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px #0000001a}.game-mode-button:hover{transform:translateY(-4px);box-shadow:0 8px 12px #0003}.game-mode-button:disabled{opacity:.5;cursor:not-allowed}.mode-title{font-size:2rem;font-weight:700;margin-bottom:.5rem;color:#fff}.mode-description{font-size:1rem;color:#ffffffe6}.ready-check-banner{background:linear-gradient(135deg,#f093fb,#f5576c);border-radius:12px;padding:2rem;margin-bottom:2rem;text-align:center;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.ready-check-banner h2{font-size:2rem;margin-bottom:1rem}.ready-timer{font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:#fff}.ready-button{background:#4caf50;color:#fff;border:none;border-radius:8px;padding:1rem 2rem;font-size:1.2rem;font-weight:700;cursor:pointer;transition:background .3s;box-shadow:0 4px 6px #0003}.ready-button:hover{background:#45a049}.ready-status{font-size:1.2rem;color:#4caf50;font-weight:700}.queue-status{text-align:center;margin-bottom:2rem;padding:1.5rem;background:#ffffff1a;border-radius:8px}.queue-status p{font-size:1.3rem;margin-bottom:.5rem}.queue-progress{font-size:1.5rem;font-weight:700;color:#4caf50}.player-slots{margin-bottom:2rem}.teams-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.team{background:#ffffff0d;border-radius:12px;padding:1.5rem}.team h3{text-align:center;margin-bottom:1rem;font-size:1.5rem;color:#fff}.player-slot{background:#ffffff1a;border-radius:8px;padding:1rem;margin-bottom:.5rem;display:flex;justify-content:space-between;align-items:center;transition:background .3s}.player-slot.filled{background:#4caf5033;border:1px solid rgba(76,175,80,.5)}.player-slot.empty{background:#ffffff0d;border:1px dashed rgba(255,255,255,.2)}.player-name{font-weight:700;color:#fff}.empty-slot{color:#ffffff80;font-style:italic}.ready-indicator{font-size:1.2rem;font-weight:700}.ready-indicator.ready{color:#4caf50}.ready-indicator.waiting{color:#ffffff80}.leave-queue-button{display:block;margin:0 auto;background:#f44336;color:#fff;border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;cursor:pointer;transition:background .3s}.leave-queue-button:hover{background:#d32f2f}.starting-message{text-align:center;font-size:1.5rem;font-weight:700;color:#4caf50;animation:fadeInOut 1.5s infinite}@keyframes fadeInOut{0%,to{opacity:.5}50%{opacity:1}}.back-button{display:block;margin:2rem auto 0;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;cursor:pointer;transition:all .3s}.back-button:hover{background:#fff3;transform:translateY(-2px)}.error-message{background:#f4433633;border:1px solid #f44336;border-radius:8px;padding:1rem;margin-bottom:1rem;text-align:center;color:#ff6b6b}.settings-modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000}.settings-modal-content{background:linear-gradient(135deg,#2a2a3e,#1a1a2e);border:2px solid #4a4a6a;border-radius:12px;width:90%;max-width:500px;max-height:80vh;overflow:auto;box-shadow:0 10px 40px #00000080}.settings-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #4a4a6a}.settings-modal-header h2{margin:0;font-size:24px;color:#fff}.settings-tabs{display:flex;border-bottom:1px solid #4a4a6a;background:#1a1a2e}.settings-tab{flex:1;padding:16px 24px;background:none;border:none;color:#888;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;position:relative}.settings-tab:hover{color:#aaa;background:#4a4a6a33}.settings-tab.active{color:#4a9eff}.settings-tab.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#4a9eff,#3a7ed8)}.settings-close-button{background:none;border:none;font-size:32px;color:#888;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s}.settings-close-button:hover{color:#fff}.settings-modal-body{padding:24px}.settings-section{margin-bottom:24px}.settings-section h3{margin:0 0 16px;font-size:18px;color:#aaa;text-transform:uppercase;letter-spacing:1px}.volume-control{margin-bottom:20px}.volume-control label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:#fff;font-size:14px;font-weight:500}.volume-label{flex:1}.volume-value{color:#4a9eff;font-weight:700;min-width:50px;text-align:right}.volume-slider{width:100%;height:6px;border-radius:3px;background:#3a3a4a;outline:none;-webkit-appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#4a9eff;cursor:pointer;transition:all .2s}.volume-slider::-webkit-slider-thumb:hover{background:#6ab5ff;transform:scale(1.1)}.volume-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#4a9eff;cursor:pointer;border:none;transition:all .2s}.volume-slider::-moz-range-thumb:hover{background:#6ab5ff;transform:scale(1.1)}.volume-info{margin-top:4px;font-size:12px;color:#888;font-style:italic}.settings-modal-footer{padding:16px 24px;border-top:1px solid #4a4a6a;display:flex;justify-content:space-between;gap:12px}.settings-done-button{padding:10px 24px;background:linear-gradient(135deg,#4a9eff,#3a7ed8);color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.settings-done-button:hover{background:linear-gradient(135deg,#6ab5ff,#4a9eff);transform:translateY(-1px);box-shadow:0 4px 12px #4a9eff66}.settings-done-button:active{transform:translateY(0)}.settings-leave-button{padding:10px 24px;background:linear-gradient(135deg,#e53e3e,#c53030);color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.settings-leave-button:hover{background:linear-gradient(135deg,#fc8181,#e53e3e);transform:translateY(-1px);box-shadow:0 4px 12px #e53e3e66}.settings-leave-button:active{transform:translateY(0)}.particle-quality-control{margin-bottom:20px}.particle-quality-control label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#fff;font-size:14px;font-weight:500}.quality-label{flex:1}.quality-value{color:#4a9eff;font-weight:700;min-width:200px;text-align:right}.particle-quality-buttons{display:flex;gap:8px;margin-bottom:12px}.quality-button{flex:1;padding:10px 16px;background:#2a2a3e;border:2px solid #4a4a6a;border-radius:6px;color:#aaa;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.quality-button:hover{background:#3a3a4e;border-color:#6a6a8a;color:#ccc}.quality-button.active{background:linear-gradient(135deg,#4a9eff,#3a7ed8);border-color:#4a9eff;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #4a9eff66}.particle-quality-description{padding:12px;background:#4a4a6a33;border-radius:6px;border-left:3px solid #4a9eff}.quality-info{margin:0;font-size:13px;color:#bbb;font-style:italic;line-height:1.5}.wave-preview-panel{background:#000000b3;border:2px solid rgba(255,255,255,.2);border-radius:8px;padding:12px;min-width:200px;max-width:300px}.wave-preview-panel h3{margin:0 0 12px;font-size:16px;color:#fff;text-align:center;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:8px}.no-minions{color:#888;font-size:14px;text-align:center;padding:16px 0}.wave-minions{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto}.wave-minion-group{display:flex;align-items:center;gap:10px;background:#ffffff0d;padding:6px 8px;border-radius:4px;transition:background .2s}.wave-minion-group:hover{background:#ffffff1a}.wave-minion-group .minion-icon{width:32px;height:32px;background-size:cover;background-position:center;border:2px solid;border-radius:4px;flex-shrink:0}.minion-info{flex:1;display:flex;flex-direction:column;gap:2px}.minion-name{color:#fff;font-size:13px;font-weight:500}.minion-details{display:flex;gap:8px;font-size:12px}.minion-level{color:gold;font-weight:500}.minion-count{color:#aaa}.wave-minions::-webkit-scrollbar{width:6px}.wave-minions::-webkit-scrollbar-track{background:#0003;border-radius:3px}.wave-minions::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.wave-minions::-webkit-scrollbar-thumb:hover{background:#ffffff80}.corner-indicator{position:absolute;z-index:120;pointer-events:auto;display:flex;gap:8px;align-items:center}.corner-indicator.top-left{top:10px;left:10px;flex-direction:column;align-items:flex-start}.corner-indicator.top-right{top:10px;right:10px;flex-direction:row;align-items:flex-start}.gold-display-corner{background:#000000d9;border:2px solid rgba(255,204,0,.5);border-radius:8px;padding:8px 16px;font-size:20px;font-weight:700;color:#fc0;text-shadow:0 0 10px rgba(255,204,0,.5),2px 2px 4px rgba(0,0,0,.8);backdrop-filter:blur(5px);min-width:100px;text-align:center;box-shadow:0 4px 12px #0000004d}.level-up-button-corner{background:#374151e6;border:2px solid rgba(55,65,81,.5);border-radius:8px;padding:8px 16px;font-size:16px;font-weight:700;color:#6b7280;cursor:not-allowed;backdrop-filter:blur(5px);transition:all .3s ease;display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px #0000004d;opacity:.7}.level-up-button-corner:disabled{opacity:.7}.level-up-button-corner.ready{background:linear-gradient(135deg,#10b981e6,#059669e6);border-color:#10b98180;color:#10f981;cursor:pointer;opacity:1;animation:pulse-glow 2s ease-in-out infinite}.level-up-button-corner.ready:hover{background:linear-gradient(135deg,#10b981,#059669);border-color:#10b981cc;color:#3bff9f;transform:scale(1.05);box-shadow:0 4px 20px #10b98166,0 0 30px #10b98133}.level-up-button-corner.ready:active{transform:scale(.98)}.level-up-icon{font-size:20px}.level-up-cost-small{font-size:12px;color:#a7f3d0}@keyframes pulse-glow{0%,to{box-shadow:0 4px 12px #10b98133,0 0 20px #10b9811a}50%{box-shadow:0 4px 16px #10b9814d,0 0 30px #10b98133}}.wave-display-corner{background:#000000d9;border:2px solid rgba(255,255,255,.2);border-radius:8px;padding:8px 16px;backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 4px 12px #0000004d;min-width:120px}.wave-number-corner{font-size:18px;font-weight:700;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.wave-timer-corner{font-size:14px;color:#4ade80;text-shadow:0 0 10px rgba(74,222,128,.5);font-weight:600}.tab-menu-button{background:#000000d9;border:2px solid rgba(255,255,255,.2);border-radius:8px;padding:10px 14px;font-size:20px;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(5px);box-shadow:0 4px 12px #0000004d;display:flex;align-items:center;justify-content:center}.tab-menu-button:hover{background:#000000f2;border-color:#fff6;transform:scale(1.05);box-shadow:0 6px 16px #0006}.tab-menu-button:active{transform:scale(.98)}.tab-menu-button.active{background:#4a9eff4d;border-color:#4a9eff99;box-shadow:0 0 20px #4a9eff66}@media (max-width: 768px){.corner-indicator.top-left{top:8px;left:8px;gap:6px}.corner-indicator.top-right{top:8px;right:8px;gap:6px}.gold-display-corner{padding:6px 12px;font-size:16px;min-width:80px}.level-up-button-corner{padding:6px 12px;font-size:14px;gap:4px}.level-up-icon{font-size:16px}.level-up-cost-small{font-size:10px}.wave-display-corner{padding:6px 12px;min-width:100px}.wave-number-corner{font-size:14px}.wave-timer-corner{font-size:12px}.tab-menu-button{padding:8px 10px;font-size:16px}}@media (max-height: 600px) and (orientation: landscape){.corner-indicator.top-left{top:6px;left:6px;gap:4px}.corner-indicator.top-right{top:6px;right:6px;gap:4px}.gold-display-corner{padding:4px 10px;font-size:14px;min-width:70px;border-width:1px}.level-up-button-corner{padding:4px 10px;font-size:12px;gap:3px;border-width:1px}.level-up-icon{font-size:14px}.level-up-cost-small{font-size:9px}.wave-display-corner{padding:4px 10px;min-width:80px;border-width:1px}.wave-number-corner{font-size:12px}.wave-timer-corner{font-size:10px}.tab-menu-button{padding:6px 8px;font-size:14px;border-width:1px}}.tab-menu-backdrop{position:fixed;inset:0;background:transparent;z-index:999;pointer-events:none}.tab-menu-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#000000b3,#0009);border:2px solid rgba(74,158,255,.4);border-radius:12px;box-shadow:0 0 60px #4a9eff4d,0 0 30px #a855f733,0 10px 40px #00000080,inset 0 1px #ffffff0d;z-index:1000;pointer-events:none;max-width:90vw;max-height:80vh;min-width:600px;display:flex;flex-direction:column;animation:slide-in .15s ease-out}@keyframes slide-in{0%{opacity:0;transform:translate(-50%,-45%)}to{opacity:1;transform:translate(-50%,-50%)}}.tab-menu-header{display:flex;justify-content:center;align-items:center;padding:16px 20px;border-bottom:2px solid rgba(255,255,255,.15);background:linear-gradient(to bottom,rgba(0,0,0,.4),transparent)}.tab-menu-header h2{margin:0;font-size:24px;color:#fff;text-shadow:0 0 20px rgba(74,158,255,.6),0 0 10px rgba(168,85,247,.4),2px 2px 4px rgba(0,0,0,.8);text-transform:uppercase;letter-spacing:2px;font-weight:700}.tab-menu-close{display:none}.tab-menu-content{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px;overflow-y:auto;max-height:calc(80vh - 80px)}.team-column{display:flex;flex-direction:column;gap:16px}.team-section{display:flex;flex-direction:column;gap:10px}.team-section-header{display:flex;flex-direction:column;gap:4px;padding-bottom:8px;border-bottom:2px solid rgba(255,255,255,.1)}.team-section-header h3{margin:0;font-size:18px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.team-income-tab{font-size:13px;color:#4ade80;font-weight:600}.player-cards{display:flex;flex-direction:column;gap:10px}.no-players{text-align:center;padding:20px;color:#999;font-style:italic}.player-card{background:#0006;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px;transition:all .2s ease}.player-card:hover{background:#00000080;border-color:#ffffff40;transform:scale(1.02)}.player-card.current-player-card{background:#4ade801f;border-color:#4ade8099;box-shadow:0 0 20px #4ade8066,inset 0 1px #4ade801a}.player-card.disconnected{opacity:.5;background:#0000004d;border-color:#ff6b6b66}.player-card-header{display:flex;justify-content:space-between;align-items:center;gap:8px}.player-name{font-size:16px;font-weight:600;color:#fff;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.disconnect-badge{background:#ff6b6b4d;border:1px solid rgba(255,107,107,.6);border-radius:4px;padding:2px 6px;font-size:10px;color:#ff6b6b;font-weight:700;white-space:nowrap}.player-card-stats{display:flex;gap:16px}.stat-row{display:flex;align-items:center;gap:6px}.stat-label{font-size:13px;color:#bbb}.stat-value{font-size:14px;font-weight:700}.gold-value{color:#fc0}.level-value{color:#60a5fa}.player-card-units{display:flex;gap:12px}.units-column{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}.units-section{display:flex;flex-direction:column;gap:4px}.units-label{font-size:11px;color:#999;font-weight:600;text-transform:uppercase}.units-icons{display:flex;flex-wrap:wrap;gap:4px}.unit-icon-small{width:24px;height:24px;background-size:20px 20px;background-position:center;background-repeat:no-repeat;background-color:#0009;border:2px solid;border-radius:3px;display:flex;align-items:center;justify-content:center;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;flex-shrink:0;box-sizing:border-box}.tower-icon-small{border-radius:3px}.minion-icon-small{border-radius:50%}.skill-icon-small{border-radius:3px;background-color:#000c}.skill-emoji{font-size:14px;line-height:1}.no-units-text{font-size:11px;color:#666;font-style:italic}@media (max-width: 768px){.tab-menu-container{min-width:90vw;max-width:95vw;max-height:85vh}.tab-menu-content{grid-template-columns:1fr;gap:16px}.tab-menu-header h2{font-size:20px}.player-card{padding:10px}.player-name{font-size:14px}}@media (max-height: 600px) and (orientation: landscape){.tab-menu-container{max-height:90vh}.tab-menu-header{padding:12px 16px}.tab-menu-header h2{font-size:18px}.tab-menu-content{padding:12px;gap:12px}.player-card{padding:8px;gap:6px}.team-column-header{padding-bottom:6px}}.game-hud{position:fixed;inset:0;pointer-events:none;z-index:100;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;user-select:none;-webkit-user-select:none}.game-hud>*{pointer-events:auto}.hud-top-bar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:stretch;background:linear-gradient(to bottom,#000000f2,#000000d9);border-bottom:2px solid #333;padding:0;min-height:120px;height:auto}.team-panel-top{flex:2;padding:10px 20px;color:#fff;display:flex;flex-direction:column;gap:8px}.team-panel-top.team-a{background:linear-gradient(135deg,rgba(239,68,68,.2),transparent);border-right:1px solid rgba(239,68,68,.3)}.team-panel-top.team-b{background:linear-gradient(-135deg,rgba(74,158,255,.2),transparent);border-left:1px solid rgba(74,158,255,.3)}.team-panel-top.player-team{box-shadow:inset 0 0 20px #ffffff1a}.team-panel-top h3{margin:0;font-size:18px;text-align:center;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.team-panel-top.team-a h3{color:#ef4444}.team-panel-top.team-b h3{color:#4a9eff}.team-income{text-align:center;color:#4ade80;font-size:12px;font-weight:600;margin:-4px 0 4px;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.team-resources{display:flex;flex-direction:column;gap:6px;flex:1}.team-resources.players-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.team-resources.players-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.team-resources.players-4{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:8px}.team-resources.players-1{display:flex;flex-direction:column;gap:6px}.player-resources{position:relative;padding:4px 8px;background:#ffffff0d;border-radius:4px;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:4px;min-width:0}.player-resources.current-player{background:#4ade8040;border-color:#4ade80bf;box-shadow:0 0 12px #4ade8080}.player-disconnected-overlay{position:absolute;inset:0;background:#808080b3;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:10}.disconnect-icon{font-size:48px;color:#ff6b6b;text-shadow:0 0 10px rgba(255,107,107,.8),2px 2px 4px rgba(0,0,0,.8);animation:pulse-disconnect 2s ease-in-out infinite}@keyframes pulse-disconnect{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@keyframes pulse-green{0%,to{box-shadow:0 0 12px #4ade8080;border-color:#4ade80bf}50%{box-shadow:0 0 20px #4ade80b3;border-color:#4ade80e6}}.player-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}.player-addr{font-size:11px;color:#bbb;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-level{color:#60a5fa;font-size:11px;font-weight:700;text-align:center}.player-stats{display:flex;gap:6px;align-items:center;justify-content:flex-end;font-size:11px}.player-stats .gold{color:#fc0;font-weight:700}.resource-row{display:flex;gap:8px;align-items:center;font-size:13px}.player-units{display:flex;flex-wrap:nowrap;gap:3px;min-height:24px;max-height:24px;overflow-x:hidden;overflow-y:hidden;cursor:pointer;position:relative;width:100%}.player-units:hover{overflow-x:auto}.player-units::-webkit-scrollbar{height:2px}.player-units::-webkit-scrollbar-track{background:#ffffff0d}.player-units::-webkit-scrollbar-thumb{background:#fff3;border-radius:1px}.player-units .unit-icon{width:24px;height:24px;background-size:20px 20px;background-position:center;background-repeat:no-repeat;border:1px solid;image-rendering:-moz-crisp-edges;image-rendering:-webkit-crisp-edges;image-rendering:crisp-edges;flex-shrink:0;box-sizing:border-box;cursor:pointer;will-change:auto;transform:translateZ(0);backface-visibility:hidden}.player-units .unit-icon.tower-icon{border-radius:2px}.player-units .unit-icon.minion-icon{border-radius:50%}.team-resources.players-2 .player-stats,.team-resources.players-3 .player-stats,.team-resources.players-4 .player-stats{gap:4px;font-size:10px}.team-resources.players-3 .player-resources{padding:3px 6px}.team-resources.players-3 .player-addr{font-size:11px}.team-resources.players-3 .player-stats{gap:4px;font-size:11px}.team-resources.players-3 .player-units .unit-icon{width:20px;height:20px}.resource-row .gold{color:#fc0;font-weight:700}.resource-row .level{color:#60a5fa;font-size:11px}.game-info-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 20px;background:none}.dev-mode-badge{background:linear-gradient(135deg,#ff6b00,orange);color:#fff;padding:6px 12px;border-radius:6px;font-size:14px;font-weight:700;text-transform:uppercase;box-shadow:0 2px 8px #ff6b0066;border:2px solid #ff8c00;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:help}.wave-info{text-align:center;color:#fff}.wave-number{font-size:24px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.next-wave{font-size:14px;color:#ccc;margin-top:4px}.view-indicator{background:#ffffff1a;padding:6px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.2)}.view-indicator.clickable{cursor:pointer;transition:all .2s ease}.view-indicator.clickable:hover{background:#ffffff26;border-color:#ffffff4d;transform:scale(1.05)}.view-indicator.clickable:active{transform:scale(.98)}.view-indicator span{font-size:14px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.8);pointer-events:none}.view-indicator .view-a{color:#4a9eff}.view-indicator .view-b{color:#a855f7}.level-up-dropdown{position:absolute;top:-100px;left:50%;transform:translate(-50%);transition:top .4s cubic-bezier(.68,-.55,.265,1.55),opacity .3s ease;z-index:200;opacity:0;pointer-events:none}.level-up-dropdown.show{top:120px;opacity:1;pointer-events:auto}.level-up-dropdown.hide{top:-100px;opacity:0;pointer-events:none}.level-up-button-large{background:linear-gradient(135deg,#10b981e6,#059669e6);backdrop-filter:blur(10px);color:#10f981;border:1px solid rgba(16,185,129,.5);padding:10px 24px;font-size:14px;font-weight:700;border-radius:8px;cursor:pointer;transition:all .3s ease;box-shadow:inset 0 1px #ffffff1a,0 4px 12px #10b98133,0 0 20px #10b9811a;display:flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:1px;animation:glow 2s ease-in-out infinite}.level-up-button-large:hover:not(:disabled){background:linear-gradient(135deg,#10b981,#059669);border-color:#10b981cc;box-shadow:inset 0 1px #fff3,0 4px 20px #10b98166,0 0 30px #10b98133;transform:translateY(-2px);color:#3bff9f}.level-up-button-large:active:not(:disabled){transform:translateY(0)}.level-up-button-large:disabled{background:linear-gradient(135deg,#374151e6,#1f2937e6);border-color:#37415180;color:#6b7280;cursor:not-allowed;opacity:.7;animation:none;box-shadow:none}.level-up-text{font-size:14px;font-weight:700;text-shadow:0 0 10px rgba(16,185,129,.5)}.level-up-cost{font-size:12px;opacity:.9;color:#a7f3d0}@keyframes glow{0%,to{box-shadow:inset 0 1px #ffffff1a,0 4px 12px #10b98133,0 0 20px #10b9811a}50%{box-shadow:inset 0 1px #ffffff1a,0 4px 16px #10b9814d,0 0 30px #10b98133}}.hud-bottom{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#000000d9;padding:10px 20px;border-radius:10px;color:#fff;border:1px solid #333}.action-bar{display:flex;gap:15px;align-items:center}.action-item{display:flex;align-items:center;gap:8px;padding:5px 10px;background:#ffffff1a;border-radius:5px}.action-item .action-type{color:#4a9eff;font-weight:700;font-size:14px}.action-item .action-id{color:#ccc;font-size:12px}.processing-indicator{display:flex;align-items:center;gap:8px}.processing-spinner{width:16px;height:16px;border:2px solid rgba(74,158,255,.3);border-top-color:#4a9eff;border-radius:50%;animation:spin 1s linear infinite}.castle-status{margin-bottom:10px}.castle-label{font-size:12px;color:#ccc;margin-bottom:3px}.health-bar{height:20px;background:#ffffff1a;border-radius:10px;overflow:hidden;position:relative}.health-fill{height:100%;transition:width .3s ease}.health-fill.team-a{background:linear-gradient(90deg,#ef4444,#dc2626)}.health-fill.team-b{background:linear-gradient(90deg,#4a9eff,#2563eb)}.health-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:700;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.castle-status.destroyed{opacity:.5}.castle-status.destroyed .health-fill{background:#dc2626}.game-over-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .5s ease-in}.game-over-content{text-align:center;padding:40px;background:linear-gradient(135deg,#1a1a2e,#0f0f23);border-radius:20px;border:3px solid #4a9eff;box-shadow:0 0 50px #4a9eff80}.game-over-content h1{font-size:48px;margin:0 0 20px;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.game-over-content p{font-size:24px;color:#ccc;margin:0}.game-over-buttons{display:flex;flex-direction:column;gap:15px;margin-top:30px;justify-content:center;align-items:center}.restart-button,.return-home-button,.next-level-button,.replay-button{width:280px;padding:16px 40px;font-size:18px;font-weight:600;color:#fff;border:2px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.next-level-button{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 15px #10b9814d}.next-level-button:hover{background:linear-gradient(135deg,#34d399,#10b981);box-shadow:0 6px 20px #10b98180;transform:translateY(-2px);border-color:#ffffff4d}.next-level-button:active{transform:translateY(0);box-shadow:0 2px 10px #10b98166}.replay-button{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 15px #f59e0b4d}.replay-button:hover{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 6px 20px #f59e0b80;transform:translateY(-2px);border-color:#ffffff4d}.replay-button:active{transform:translateY(0);box-shadow:0 2px 10px #f59e0b66}.restart-button{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 15px #f59e0b4d}.restart-button:hover{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 6px 20px #f59e0b80;transform:translateY(-2px);border-color:#ffffff4d}.restart-button:active{transform:translateY(0);box-shadow:0 2px 10px #f59e0b66}.return-home-button{background:linear-gradient(135deg,#dc2626,#991b1b);box-shadow:0 4px 15px #dc26264d}.return-home-button:hover{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 6px 20px #dc262680;transform:translateY(-2px);border-color:#ffffff4d}.return-home-button:active{transform:translateY(0);box-shadow:0 2px 10px #dc262666}.campaign-complete-message{width:100%;text-align:center;margin:10px 0}.campaign-complete-message p{font-size:28px;font-weight:700;color:#fbbf24;text-shadow:2px 2px 4px rgba(0,0,0,.8);margin:0}@media (max-width: 1200px){.team-panel-top{max-width:350px}.resource-row{font-size:12px}}@media (max-width: 900px){.hud-top-bar{flex-direction:column;min-height:auto}.team-panel-top{max-width:none}.game-info-center{order:-1;padding:10px;width:100%;flex-direction:row;justify-content:space-around}}@media (max-width: 768px){.hud-top-bar{min-height:80px;padding:0}.team-panel-top{padding:6px 12px;gap:4px}.team-panel-top h3{font-size:14px}.team-income{font-size:10px;margin:-2px 0 2px}.team-resources,.team-resources.players-2,.team-resources.players-3,.team-resources.players-4{gap:4px}.player-resources{padding:3px 6px;gap:3px}.player-addr,.player-level{font-size:9px}.player-stats{gap:4px;font-size:9px}.resource-row{font-size:11px;gap:6px}.player-units{min-height:20px;max-height:20px;gap:2px}.player-units .unit-icon{width:20px;height:20px;background-size:16px 16px}.team-resources.players-3 .player-resources{padding:2px 4px}.team-resources.players-3 .player-addr,.team-resources.players-3 .player-stats{font-size:9px}.team-resources.players-3 .player-units .unit-icon{width:18px;height:18px}.disconnect-icon{font-size:32px}.game-info-center{gap:6px;padding:6px 12px}.wave-number{font-size:18px}.next-wave{font-size:12px}.view-indicator{padding:4px 10px}.view-indicator span{font-size:12px}.level-up-dropdown.show{top:80px}.level-up-button-large{padding:8px 16px;font-size:12px;gap:8px}.level-up-text{font-size:12px}.level-up-cost{font-size:10px}}@media (max-height: 600px) and (orientation: landscape){.hud-top-bar:not(.hidden-campaign){display:flex!important;flex-direction:row!important;min-height:60px;padding:0;justify-content:flex-end!important;background:transparent!important;border-bottom:none!important}.team-panel-top,.view-indicator{display:none!important}.game-info-center{order:0!important;flex:0 0 auto!important;flex-direction:column!important;width:auto!important;padding:8px 12px!important;background:#000000e6!important;border-radius:8px;margin:4px 4px 0 0}.team-panel-top h3{font-size:12px}.team-income{font-size:9px;margin:-2px 0 2px}.team-resources,.team-resources.players-2,.team-resources.players-3,.team-resources.players-4{gap:3px}.player-resources{padding:2px 4px;gap:2px}.player-addr,.player-level{font-size:8px}.player-stats{gap:3px;font-size:8px}.resource-row{font-size:10px;gap:4px}.player-units{min-height:16px;max-height:16px;gap:2px}.player-units .unit-icon{width:16px;height:16px;background-size:14px 14px;border-width:1px}.team-resources.players-3 .player-resources{padding:2px 3px}.team-resources.players-3 .player-addr,.team-resources.players-3 .player-stats{font-size:8px}.team-resources.players-3 .player-units .unit-icon{width:14px;height:14px}.disconnect-icon{font-size:24px}.game-info-center{gap:4px;padding:4px 8px}.wave-number{font-size:16px}.next-wave{font-size:10px}.view-indicator{padding:3px 8px}.view-indicator span{font-size:11px}.level-up-dropdown.show{top:60px}.level-up-button-large{padding:6px 12px;font-size:11px;gap:6px}.level-up-text{font-size:11px}.level-up-cost{font-size:9px}}.campaign-minimal-hud{position:absolute;top:10px;right:70px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:110}.wave-countdown{background:#000000d9;border:2px solid rgba(255,255,255,.3);border-radius:8px;padding:8px 16px;font-size:18px;font-weight:700;color:#4ade80;text-shadow:0 0 10px rgba(74,222,128,.5);min-width:60px;text-align:center;backdrop-filter:blur(5px)}.next-wave-compact{background:#000000d9;border:2px solid rgba(255,255,255,.2);border-radius:8px;padding:8px 12px;backdrop-filter:blur(5px);display:flex;flex-direction:column;gap:6px;max-width:200px}.next-wave-title{font-size:12px;font-weight:600;color:#aaa;text-align:center;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:4px}.minion-preview-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 0}.minion-preview-icon-container{position:relative;display:flex;align-items:center}.minion-preview-icon{width:24px;height:24px;background-size:cover;background-position:center;border:2px solid;border-radius:4px;flex-shrink:0;image-rendering:-moz-crisp-edges;image-rendering:-webkit-crisp-edges;image-rendering:crisp-edges}.level-stars{display:flex;gap:1px;margin-left:2px}.level-star{font-size:10px;line-height:1;text-shadow:0 0 2px rgba(0,0,0,.8)}.level-star.small{color:gold;text-shadow:0 0 2px rgba(255,215,0,.6)}.level-star.big{font-size:14px;margin-left:2px}.level-star.gold{color:gold;text-shadow:0 0 3px rgba(255,215,0,.8)}.level-star.red{color:red;text-shadow:0 0 3px rgba(255,0,0,.8)}.minion-preview-count{font-size:14px;font-weight:600;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.hud-top-bar.hidden-campaign,.hud-top-bar.hidden-new-hud{display:none}.settings-button-hud{position:absolute;top:10px;right:10px;background:#000000b3;border:2px solid rgba(255,255,255,.2);border-radius:50%;width:48px;height:48px;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:1100;backdrop-filter:blur(5px);pointer-events:auto}.settings-button-hud:hover{background:#000000d9;border-color:#fff6;transform:scale(1.1) rotate(30deg);box-shadow:0 4px 12px #00000080}.settings-button-hud:active{transform:scale(1.05) rotate(30deg)}.team-eliminated-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9000;pointer-events:none;animation:fadeIn .3s ease-in}.team-eliminated-content{text-align:center;padding:30px 60px;background:linear-gradient(135deg,#1a1a2ef2,#0f0f23f2);border-radius:16px;border:3px solid #ef4444;box-shadow:0 0 40px #ef444480;animation:eliminatedPulse .5s ease-out}.team-eliminated-content h1{font-size:42px;margin:0;color:#ef4444;text-shadow:2px 2px 4px rgba(0,0,0,.8),0 0 20px rgba(239,68,68,.5);text-transform:uppercase;letter-spacing:2px}@keyframes eliminatedPulse{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.bottom-bar{position:fixed;bottom:0;left:0;right:0;background:transparent;border-top:none;z-index:100;pointer-events:none;user-select:none;-webkit-user-select:none}.bottom-bar .unit-icon,.bottom-bar button,.bottom-bar .gold-display,.bottom-bar .level-up-button-bottom,.bottom-bar .skill-tree-button-bottom{pointer-events:auto}.mobile-deselect-btn{display:none;position:absolute;bottom:12px;left:12px;width:50px;height:50px;background:#ef4444e6;color:#fff;border:2px solid #ef4444;border-radius:8px;font-size:24px;font-weight:700;cursor:pointer;transition:all .2s;z-index:101;padding:0;line-height:1;pointer-events:auto}.mobile-deselect-btn:hover{background:#ef4444;transform:scale(1.05)}.mobile-deselect-btn:active{transform:scale(.95)}.mobile-switch-view-btn{display:none;position:absolute;bottom:12px;right:12px;width:50px;height:50px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:8px;font-size:24px;font-weight:700;cursor:pointer;transition:all .2s;z-index:101;padding:0;line-height:1;pointer-events:auto}.mobile-switch-view-btn.view-a{color:#4a9eff;border-color:#4a9eff;background:#4a9eff26}.mobile-switch-view-btn.view-b{color:#a855f7;border-color:#a855f7;background:#a855f726}.mobile-switch-view-btn:hover{background:#fff3;transform:scale(1.05)}.mobile-switch-view-btn:active{transform:scale(.95)}.bottom-bar.spectator-mode{background:transparent;border-top:none}.spectator-message{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;width:100%}.spectator-label{font-size:20px;font-weight:700;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8);letter-spacing:2px}.spectator-hint{font-size:14px;color:#aaa;font-style:italic}.bottom-bar.eliminated-mode{background:transparent;border-top:none}.eliminated-message{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;width:100%}.eliminated-label{font-size:20px;font-weight:700;color:#ef4444;text-shadow:2px 2px 4px rgba(0,0,0,.8);letter-spacing:2px}.eliminated-hint{font-size:14px;color:#aaa;font-style:italic}.bottom-bar-content{display:flex;justify-content:center;align-items:stretch;padding:10px 20px;gap:20px;min-height:80px}.minion-section,.tower-section{flex:0 0 auto;display:flex}.minion-section{justify-content:flex-end;flex:1;max-width:800px;min-width:0}.tower-section{justify-content:flex-start;flex:1;max-width:800px;min-width:0}.unit-group{border-radius:8px;padding:8px 12px;display:flex;flex-direction:column;gap:8px;height:100%;min-width:0}.section-title{display:none;font-size:12px;font-weight:700;color:#888;letter-spacing:1px;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.section-title.team-a{color:#ef4444}.section-title.team-b{color:#4a9eff}.unit-icons{display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-height:200px;overflow-y:auto;padding:4px 0}.minion-section .unit-icons{justify-content:flex-end}.tower-section .unit-icons{justify-content:flex-start}@media (max-width: 767px){.unit-icons{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;max-height:none;gap:6px}}.unit-icons::-webkit-scrollbar{height:4px;width:4px}.unit-icons::-webkit-scrollbar-track{background:#ffffff0d;border-radius:2px}.unit-icons::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.bottom-bar .unit-icon{position:relative;width:64px;height:64px;padding:0;background:#000;border:2px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;flex-shrink:0;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.bottom-bar .unit-icon.minion{border-radius:50%}.unit-icons .unit-icon:hover{background:#000;border-color:#fff6;box-shadow:0 4px 8px #0006}.unit-icons .unit-icon.selected:before{content:"";position:absolute;inset:0;background:#ffd70080;border-radius:inherit;z-index:0;overflow:hidden}.unit-icons .unit-icon.selected{border-color:gold;box-shadow:0 0 12px #ffd70066;background:transparent}.unit-icons .unit-icon.selected img{position:relative;z-index:1}.unit-icons .unit-icon.disabled{opacity:.4;cursor:pointer}.unit-icons .unit-icon.waiting{filter:grayscale(100%);opacity:.5;cursor:not-allowed;pointer-events:none}.unit-icons .unit-icon.waiting img{filter:grayscale(100%)}.unit-icons .unit-icon.waiting .unit-cost{filter:grayscale(100%);opacity:.7}.unit-icons .unit-icon img{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;width:56px;height:56px}.unit-cost{position:absolute;bottom:-2px;right:-2px;background:#000000e6;color:gold;font-size:10px;font-weight:700;padding:2px 4px;border-radius:4px;border:1px solid rgba(255,215,0,.5);min-width:18px;text-align:center;z-index:1}.no-units{color:#666;font-style:italic;font-size:12px;padding:10px}.center-section{flex:0 0 300px;width:300px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;padding:8px 20px}.gold-display{font-size:28px;font-weight:700;color:gold;text-shadow:0 0 10px rgba(255,215,0,.5),2px 2px 4px rgba(0,0,0,.8);letter-spacing:1px}.level-up-button-bottom{background:#4ade8040;color:#4ade80;border:2px solid rgba(74,222,128,.75);padding:8px 20px;font-size:14px;font-weight:400;border-radius:6px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 0 12px #4ade8080}.level-up-button-bottom:not(:disabled){animation:pulse-level-up 2s ease-in-out infinite}.level-up-button-bottom:hover:not(:disabled){background:#4ade8059;border-color:#4ade80e6;transform:translateY(-1px);box-shadow:0 0 20px #4ade80b3}.level-up-button-bottom:disabled{background:linear-gradient(135deg,#4b5563e6,#374151e6);border-color:#4b556399;color:#9ca3af;cursor:not-allowed;opacity:.6}@keyframes pulse-level-up{0%,to{box-shadow:0 0 12px #4ade8080;border-color:#4ade80bf}50%{box-shadow:0 0 20px #4ade80b3;border-color:#4ade80e6}}.center-buttons{display:flex;gap:8px;align-items:center;justify-content:center}.skill-tree-button-bottom{background:#3b82f640;color:#60a5fa;border:2px solid rgba(59,130,246,.75);padding:8px 20px;font-size:14px;font-weight:400;border-radius:6px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 0 12px #3b82f680}.skill-tree-button-bottom:hover{background:#3b82f659;border-color:#3b82f6e6;transform:translateY(-1px);box-shadow:0 0 20px #3b82f6b3}.skill-tree-button-bottom.has-points{animation:pulse-skill-tree 2s ease-in-out infinite}@keyframes pulse-skill-tree{0%,to{box-shadow:0 0 12px #3b82f680;border-color:#3b82f6bf}50%{box-shadow:0 0 20px #3b82f6b3;border-color:#3b82f6e6}}.action-queue-section{display:none}.action-queue-section .section-title{color:gold;text-align:center}.action-queue-display{position:relative;flex:1;display:flex;align-items:center;justify-content:center}.queue-empty{color:#666;font-size:11px;font-style:italic}.queue-items{display:flex;gap:6px;align-items:center}.queue-item{width:28px;height:28px;background:#0009;border:1px solid rgba(255,255,255,.2);border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative;font-size:12px;transition:all .2s ease}.queue-item.processing{border-color:gold;background:#ffd7001a;animation:pulse 1s infinite}.queue-item.complete{border-color:#4ade80;background:#4ade801a;color:#4ade80}.queue-item.failed{border-color:#ef4444;background:#ef44441a;color:#ef4444}.queue-number{font-size:10px;color:#888;position:absolute;top:-6px;left:50%;transform:translate(-50%);background:#000c;padding:0 3px;border-radius:2px}.queue-status{font-size:14px}.queue-status.hidden{display:none}.queue-icon{width:20px;height:20px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.queue-more{color:#666;font-size:11px;padding:0 4px}.processing-indicator{position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,#ffd700,transparent);animation:slide 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (max-width: 1200px){.bottom-bar-content{padding:8px 12px}.unit-icon{width:40px;height:40px}.unit-icon img{width:28px;height:28px}}@media (max-width: 768px){.bottom-bar-content{padding:6px 10px;gap:12px;min-height:60px}.spectator-message{padding:12px}.spectator-label{font-size:16px}.spectator-hint{font-size:12px}.eliminated-message{padding:12px}.eliminated-label{font-size:16px}.eliminated-hint{font-size:12px}.minion-section,.tower-section{max-width:400px}.unit-group{padding:6px 8px;gap:6px}.section-title{font-size:10px}.unit-icons{gap:6px;padding:3px 0}.unit-icon{width:36px;height:36px;border-width:1.5px}.unit-icon img{width:24px;height:24px}.unit-cost{font-size:9px;padding:1px 3px;bottom:-1px;right:-1px;min-width:16px}.center-section{flex:0 0 200px;width:200px;gap:8px;padding:6px 12px}.gold-display{font-size:22px}.level-up-button-bottom,.skill-tree-button-bottom{padding:6px 16px;font-size:12px}.no-units{font-size:10px;padding:6px}}@media (max-width: 480px){.bottom-bar-content{padding:4px 8px;gap:8px;min-height:50px}.unit-icon{width:32px;height:32px}.unit-icon img{width:20px;height:20px}.unit-cost{font-size:8px;padding:1px 2px;min-width:14px}.center-section{flex:0 0 150px;width:150px;gap:6px;padding:4px 8px}.gold-display{font-size:18px}.level-up-button-bottom,.skill-tree-button-bottom{padding:5px 12px;font-size:11px}}@media (max-height: 600px) and (orientation: landscape){.bottom-bar{background:transparent!important;border-top:none!important}.mobile-deselect-btn{display:block;width:40px;height:40px;font-size:24px;bottom:auto;top:0;left:22px}.mobile-switch-view-btn{display:block;width:40px;height:40px;font-size:24px;bottom:auto;top:0;right:22px}.bottom-bar-content{padding:2px 6px;gap:8px;min-height:40px}.spectator-message{padding:8px}.spectator-label{font-size:12px}.spectator-hint{font-size:10px}.eliminated-message{padding:8px}.eliminated-label{font-size:12px}.eliminated-hint{font-size:10px}.minion-section,.tower-section{max-width:350px}.unit-group{padding:0;gap:0;background:none}.section-title{display:none}.unit-icons{gap:4px;padding:0}.bottom-bar .unit-icon{width:40px;height:40px;border-width:1.5px;border-radius:4px}.bottom-bar .unit-icon img{width:32px;height:32px}.unit-cost{font-size:8px;padding:1px 2px;bottom:-1px;right:-1px;min-width:14px}.center-section{flex:0 0 120px;width:120px;gap:2px;padding:2px 4px}.gold-display{font-size:16px}.level-up-button-bottom{padding:3px 8px;font-size:9px;background:#1a4d2cb3!important;border-color:#4ade80e6!important}.skill-tree-button-bottom{padding:3px 8px;font-size:9px;background:#1e40afb3!important;border-color:#3b82f6e6!important}.no-units{font-size:9px;padding:4px}}.info-panel{position:fixed;bottom:120px;left:20px;width:320px;background:linear-gradient(to bottom,#000000f2,#000000e6);border:2px solid #333;border-radius:8px;color:#fff;z-index:99;box-shadow:0 4px 12px #00000080;animation:slideIn .2s ease-out}@keyframes slideIn{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}.info-content{padding:12px}.info-header{display:flex;gap:12px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.2)}.info-icon{width:48px;height:48px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;border:2px solid rgba(255,255,255,.2);border-radius:4px;background:#00000080;padding:4px}.info-title{flex:1}.info-title h3{margin:0 0 4px;font-size:18px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.info-title h3.team-a,.info-tag.team-a{color:#ef4444}.info-title h3.team-b,.info-tag.team-b{color:#4a9eff}.info-title h3.team-c,.info-tag.team-c{color:#4ade80}.info-title h3.team-d,.info-tag.team-d{color:#eab308}.info-title h3.team-e,.info-tag.team-e{color:#06b6d4}.info-title h3.team-f,.info-tag.team-f{color:#a855f7}.info-title h3.team-g,.info-tag.team-g{color:#f97316}.info-title h3.team-h,.info-tag.team-h{color:#ec4899}.info-tags{display:flex;flex-direction:column;gap:4px;align-items:flex-end;margin-left:auto}.info-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.info-tag.team-tag{background:#ffffff1a;border:1px solid currentColor}.info-tag.owner-tag{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#ccc;text-transform:none;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-type{margin:0;font-size:12px;color:#888;text-transform:uppercase;letter-spacing:1px}.info-stats{display:flex;flex-direction:column;gap:6px}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;font-size:13px}.stat-label{color:#aaa;font-weight:500}.stat-value{color:#fff;font-weight:700;text-align:right;white-space:nowrap;min-width:120px}.stat-value.ready{color:#4ade80;text-shadow:0 0 4px rgba(74,222,128,.5)}.stat-value.cooldown{color:#fbbf24;font-size:11px}.stat-divider{height:1px;background:#ffffff1a;margin:8px 0}.info-description{margin:8px 0 0;padding:8px;background:#ffffff08;border-radius:4px;font-size:12px;line-height:1.4;color:#bbb;font-style:italic;border-left:2px solid rgba(255,255,255,.2)}.health-bar-container{margin-top:8px;padding:4px 8px;background:#0000004d;border-radius:4px}.health-bar-label{font-size:11px;color:#888;margin-bottom:4px}.health-bar{height:8px;background:#f003;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.health-bar-fill{height:100%;background:linear-gradient(90deg,#dc2626,#ef4444);transition:width .3s ease;box-shadow:0 0 4px #ef444480}.health-text{text-align:center;font-size:10px;color:#ccc;margin-top:2px}.upgrade-button{width:100%;padding:10px;margin-top:8px;background:linear-gradient(135deg,#28a745,#20c997);border:2px solid #20c997;border-radius:4px;color:#fff;font-weight:700;font-size:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:none}@media (hover: hover) and (pointer: fine){.upgrade-button:hover:not(.disabled){background:linear-gradient(135deg,#34ce57,#2dd4aa);border-color:#2dd4aa;transform:translateY(-1px);box-shadow:0 4px 8px #20c9974d}.upgrade-button:active:not(.disabled){transform:translateY(0)}}.upgrade-button.disabled{background:linear-gradient(135deg,#6c757d,#5a6268);border-color:#5a6268;cursor:not-allowed;opacity:.7}.upgrade-text{font-size:14px;text-transform:uppercase;letter-spacing:.5px}.upgrade-cost{font-size:12px;color:gold;font-weight:400}.sell-button{width:100%;padding:10px;margin-top:8px;background:linear-gradient(135deg,#dc3545,#c82333);border:2px solid #bd2130;border-radius:4px;color:#fff;font-weight:700;font-size:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:none}@media (hover: hover) and (pointer: fine){.sell-button:hover{background:linear-gradient(135deg,#e74c3c,#d32535);border-color:#d32535;transform:translateY(-1px);box-shadow:0 4px 8px #dc35454d}.sell-button:active{transform:translateY(0)}}.sell-text{font-size:14px;text-transform:uppercase;letter-spacing:.5px}.sell-value{font-size:12px;color:gold;font-weight:700}@media (max-width: 1400px){.info-panel{width:280px}.info-icon{width:40px;height:40px}.info-title h3{font-size:16px}.stat-row{font-size:12px}}@media (max-height: 500px){.info-panel{inset:auto 4px 48px auto;width:240px;max-width:240px;height:auto;max-height:calc((100vh - 108px) / .7);overflow-y:auto;zoom:.7;z-index:102}.info-content{padding:4px 0}.info-header{gap:4px;margin-bottom:4px;padding-bottom:4px}.info-icon{width:24px;height:24px;padding:2px}.info-title h3{font-size:12px;margin:0 0 2px}.info-type{font-size:9px}.info-stats{gap:1px}.info-panel .stat-row{padding:2px 3px!important;font-size:10px!important}.info-panel .stat-label{font-size:9px!important}.info-panel .stat-value{font-size:10px!important;min-width:60px!important}.stat-divider{margin:3px 0}.info-description{margin:3px 0 0;padding:3px;font-size:9;line-height:1.2}.health-bar-container{margin-top:3px;padding:2px 3px}.health-bar-label{font-size:8px;margin-bottom:2px}.health-bar{height:5px}.health-text{font-size:7px;margin-top:1px}.upgrade-button{padding:4px;margin-top:3px;gap:1px}.upgrade-text{font-size:10px}.upgrade-cost{font-size:9px}.sell-button{padding:4px;margin-top:3px;gap:1px}.sell-text{font-size:10px}.sell-value{font-size:9px}}.level-up-modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out}.level-up-modal{background:linear-gradient(135deg,#1e1e2dfa,#141423fa);border:2px solid rgba(74,158,255,.4);border-radius:16px;padding:24px;width:min(1200px,95vw);max-width:1200px;height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 60px #4a9eff4d;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.level-up-header{text-align:center;margin-bottom:24px;border-bottom:1px solid rgba(74,158,255,.3);padding-bottom:16px;position:relative;flex-shrink:0}.level-up-header .header-close-button{position:absolute;top:8px;right:8px;padding:8px 20px;background:linear-gradient(135deg,#e04545,#b33030);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.level-up-header .header-close-button:hover:not(:disabled){background:linear-gradient(135deg,#f05555,#c34040);box-shadow:0 4px 12px #e0454566}.level-up-header .header-close-button:disabled{background:#444;color:#888;cursor:not-allowed;opacity:.5}.level-up-header h2{color:#4a9eff;font-size:28px;margin:0 0 8px;text-shadow:0 0 20px rgba(74,158,255,.5)}.team-indicator{color:#888;font-size:14px;text-transform:uppercase;letter-spacing:2px}.level-up-content{display:flex;gap:24px;flex:1;min-height:0;overflow:hidden}.selection-area{flex:1;display:flex;flex-direction:column;gap:24px;min-height:0;overflow:hidden}.unit-selection-section{background:#0000004d;border-radius:8px;padding:16px;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}.unit-selection-section h3{color:#fff;font-size:18px;margin:0 0 16px}.unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;align-content:start}.unit-card{background:#000;border:2px solid rgba(255,255,255,.1);border-radius:8px;padding:8px;cursor:pointer;transition:all .2s ease;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}.minion-card{border-radius:50%;padding:12px;aspect-ratio:1 / 1;justify-content:center}.stage-indicator{position:absolute;top:4px;right:4px;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;z-index:1}.stage-early .stage-indicator{background:#4caf50cc;color:#fff}.stage-mid .stage-indicator{background:#ff9800cc;color:#fff}.stage-late .stage-indicator{background:#f44336cc;color:#fff}.unit-card:hover{background:#ffffff1a;border-color:#ffffff4d;transform:translateY(-2px)}.unit-card.selected{background:#4a9eff80;border-color:#4a9eff;box-shadow:0 0 20px #4a9eff99}.unit-card.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.unit-card.darkened{opacity:.25;filter:grayscale(.9) brightness(.6);background:#0006!important}.unit-card.darkened:hover{opacity:.4;filter:grayscale(.7) brightness(.7)}.tower-card.selected{background:#4a9eff80;border-color:#4a9eff;box-shadow:0 0 25px #4a9effb3}.minion-card.selected{background:#a855f780;border-color:#a855f7;box-shadow:0 0 25px #a855f7b3}.unit-card .unit-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#0000;border:0}.unit-icon img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.minion-card .unit-icon{width:60%;height:60%;max-width:64px;max-height:64px}.minion-card .unit-name{position:relative;font-size:10px;margin-top:-4px}.unit-name{color:#fff;font-weight:700;font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.detail-card{width:320px;background:#00000080;border:2px solid rgba(74,158,255,.3);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;flex-shrink:0;align-self:stretch}.detail-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;min-height:300px;color:#888}.detail-placeholder h3{color:#4a9eff;font-size:18px;margin:0 0 12px}.detail-placeholder p{margin:0;font-size:14px;line-height:1.5}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.detail-header{display:flex;align-items:center;gap:16px;padding-bottom:12px;border-bottom:1px solid rgba(74,158,255,.2);margin:0}.detail-icon{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;margin:0}.detail-header h3{color:#4a9eff;font-size:20px;margin:0;flex:1;line-height:1}.detail-card .detail-description{color:#ccc;font-size:11px;line-height:1.5;padding:4px;background:#0000004d;border-radius:6px}.detail-card .detail-stats{display:flex;flex-direction:column;gap:8px;padding:10px;margin:0}.stat-row{display:flex;justify-content:space-between;padding:8px 12px;background:#ffffff05;border-radius:4px;font-size:14px}.stat-label{color:#888;font-weight:500}.stat-value{color:#fff;font-weight:700}.level-up-footer{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid rgba(74,158,255,.3);flex-shrink:0;gap:16px}.selection-status{display:flex;gap:12px;color:#aaa;font-size:14px;align-items:center;justify-content:center;flex:1}.selection-status span{padding:4px 12px;background:#0000004d;border-radius:4px}.selected-units-icons{display:flex;gap:6px;align-items:center}.selected-unit-icon{width:32px;height:32px;background:#000;border:2px solid rgba(255,255,255,.3);border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}.selected-unit-icon.minion{border-radius:50%}.selected-unit-icon img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}.level-up-footer .back-button{position:static;padding:12px 32px;background:#667eea33;color:#fff;border:1px solid rgba(102,126,234,.4);border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px;flex-shrink:0}.level-up-footer .back-button:hover:not(:disabled){background:#667eea66;border-color:#667eea99;transform:translateY(-2px)}.level-up-footer .back-button:disabled{background:#444;color:#888;cursor:not-allowed;opacity:.5;border-color:#444}.confirm-button{padding:12px 32px;background:#444;color:#888;border:none;border-radius:6px;font-size:16px;font-weight:400;cursor:not-allowed;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;flex-shrink:0;opacity:.5}.confirm-button:not(:disabled){background:linear-gradient(135deg,#4a9eff,#3d7dd4);color:#fff;font-weight:700;cursor:pointer;opacity:1;box-shadow:0 4px 15px #4a9eff66;animation:readyPulse 2s ease-in-out infinite}@keyframes readyPulse{0%,to{box-shadow:0 4px 15px #4a9eff66}50%{box-shadow:0 4px 25px #4a9effb3}}.confirm-button:hover:not(:disabled){background:linear-gradient(135deg,#5aa5ff,#4a8ae0);transform:translateY(-2px);box-shadow:0 10px 20px #4a9eff80;animation:none}.no-units-available{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;grid-column:1 / -1;padding:20px}.no-units-available span{color:#aaa;font-size:16px}.skip-button{padding:12px 32px;background:linear-gradient(135deg,#6b5be0,#5045b0);color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px}.skip-button:hover{background:linear-gradient(135deg,#7b6bf0,#6055c0);transform:translateY(-2px);box-shadow:0 10px 20px #6b5be04d}.level-up-modal::-webkit-scrollbar{width:8px}.level-up-modal::-webkit-scrollbar-track{background:#0000004d;border-radius:4px}.level-up-modal::-webkit-scrollbar-thumb{background:#4a9eff80;border-radius:4px}.level-up-modal::-webkit-scrollbar-thumb:hover{background:#4a9effb3}.color-filter-section{display:flex;align-items:center;gap:16px;padding:16px;background:#0000004d;border-radius:8px;margin-bottom:20px}.filter-label{font-size:16px;font-weight:600;color:#fff}.color-filter-buttons{display:flex;gap:8px}.color-filter-btn{width:40px;height:40px;border:2px solid;border-radius:8px;cursor:pointer;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .2s;position:relative}.color-filter-btn.none{background:linear-gradient(135deg,#4a4a4a,#2a2a2a);border-color:#666;color:#fff;font-size:12px;padding:0 8px;width:auto;min-width:50px}.color-filter-btn:hover{transform:scale(1.1);box-shadow:0 4px 12px #0000004d}.color-filter-btn.active{transform:scale(1.15);box-shadow:0 0 20px #4a9eff99;border-width:3px}.color-filter-btn.active:after{content:"✓";position:absolute;top:-8px;right:-8px;background:#4a9eff;color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.countdown-timer-container{position:relative;width:100%;height:40px;background:#00000080;border:2px solid rgba(74,158,255,.3);border-radius:8px;margin-bottom:20px;overflow:hidden;flex-shrink:0}.countdown-timer-bar{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#f44336cc,#ff9800cc,#ffc107cc 60%,#4caf50cc);box-shadow:0 0 20px #4a9eff4d}.countdown-timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.8);z-index:1;letter-spacing:1px}.bonus-choice-section{margin:24px 0;padding:20px;background:#0000004d;border-radius:8px;border:1px solid rgba(74,158,255,.3)}.bonus-choice-section h3{text-align:center;margin-bottom:16px;color:#4a9eff;font-size:1.2em}.bonus-choice-buttons{display:flex;gap:16px;justify-content:center}.bonus-choice-btn{flex:1;max-width:200px;padding:20px;background:linear-gradient(135deg,#2a2a3e,#1e1e2e);border:2px solid #4a4a6e;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:8px}.bonus-choice-btn:hover:not(:disabled){border-color:#4a9eff;transform:translateY(-2px);box-shadow:0 4px 12px #4a9eff4d}.bonus-choice-btn.selected{border-color:#4a9eff;background:linear-gradient(135deg,#3a3a5e,#2e2e4e);box-shadow:0 0 20px #4a9eff66}.bonus-choice-btn:disabled{opacity:.5;cursor:not-allowed}.bonus-title{font-size:1.1em;font-weight:700;color:#fff}.bonus-value{font-size:1.5em;font-weight:700;color:#4a9eff}.bonus-description{font-size:.9em;color:#aaa}@media (max-width: 1100px){.unit-grid{grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:10px}.unit-card .unit-icon{width:40px;height:40px}.minion-card .unit-icon{max-width:52px;max-height:52px}.unit-name{font-size:11px}.detail-card{width:280px;padding:16px}}@media (max-width: 900px){.unit-grid{grid-template-columns:repeat(auto-fill,minmax(75px,1fr));gap:8px}.unit-card .unit-icon{width:36px;height:36px}.minion-card .unit-icon{max-width:44px;max-height:44px}.unit-name{font-size:10px}.detail-card{width:240px;padding:12px;gap:12px}.detail-icon{width:48px;height:48px}.detail-header h3{font-size:16px}.stat-row{padding:6px 10px;font-size:12px}}@media (max-width: 768px){.level-up-modal{padding:12px;width:95%;max-width:100%;max-height:90vh;border-radius:8px;overflow-y:visible}.level-up-header h2{font-size:20px}.team-indicator{font-size:12px}.level-up-content{flex-direction:column;gap:16px}.color-filter-section{padding:12px;gap:12px}.filter-label{font-size:14px}.color-filter-btn{width:32px;height:32px;font-size:14px}.color-filter-btn.none{font-size:10px;min-width:40px}.selection-area{max-height:45vh;overflow-y:auto}.unit-selection-section{padding:12px}.unit-selection-section h3{font-size:16px;margin-bottom:12px}.unit-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px}.unit-card{padding:6px}.stage-indicator{font-size:8px;padding:2px 4px}.unit-icon{width:36px;height:36px}.minion-card .unit-icon{width:50%;height:50%;max-width:48px;max-height:48px}.unit-name{font-size:10px}.minion-card .unit-name{font-size:8px}.detail-card{width:100%;padding:12px}.detail-header{gap:12px}.detail-icon{width:48px;height:48px}.detail-header h3{font-size:16px}.detail-description{font-size:12px;padding:8px}.detail-stats{padding:8px;gap:6px}.stat-row{padding:6px 8px;font-size:12px}.bonus-choice-section{padding:12px;margin:16px 0}.bonus-choice-section h3{font-size:16px;margin-bottom:12px}.bonus-choice-buttons{flex-direction:column;gap:10px}.bonus-choice-btn{max-width:100%;padding:14px}.bonus-title{font-size:1em}.bonus-value{font-size:1.3em}.bonus-description{font-size:.85em}.level-up-footer{flex-wrap:wrap;gap:12px;margin-top:16px;padding-top:12px}.selection-status{width:100%;justify-content:center;flex-wrap:wrap;gap:8px;font-size:12px;order:-1}.back-button{flex:1;padding:10px 24px;font-size:14px}.confirm-button{flex:1}.selected-unit-icon{width:28px;height:28px}.selected-unit-icon img{width:20px;height:20px}.confirm-button{width:100%;padding:10px 24px;font-size:14px}.countdown-timer-container{height:32px}.countdown-timer-text{font-size:14px}}@media (max-height: 600px) and (orientation: landscape){.stat-row{display:grid!important}.level-up-modal{padding:4px;max-height:98vh;height:98vh;overflow:hidden;display:flex;flex-direction:column}.level-up-header,.color-filter-section{display:none!important}.countdown-timer-container{height:20px;margin-bottom:4px;flex-shrink:0}.countdown-timer-text{font-size:10px}.level-up-content{gap:4px;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:row;align-items:stretch}.selection-area{flex:1;min-width:0;min-height:0;height:100%;max-height:none;overflow-y:visible;display:flex;flex-direction:column;gap:4px}.unit-selection-section{padding:4px;flex:1;min-height:0;height:100%;display:flex;flex-direction:column}.unit-selection-section .unit-grid{flex:1;overflow-y:auto;align-content:flex-start;height:100%}.unit-selection-section h3{display:none}.unit-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}.unit-card{padding:6px}.level-up-modal .unit-selection-section .unit-card .unit-icon{width:48px;height:48px}.level-up-modal .unit-selection-section .unit-card .unit-icon img{width:100%;height:100%}.unit-name{font-size:10px}.minion-card .unit-name{font-size:8px}.stage-indicator{font-size:6px;padding:1px 2px;top:2px;right:2px}.detail-card{width:190px;padding:2px;gap:2px;flex-shrink:0;overflow-y:auto;overflow-x:hidden;height:100%;align-self:stretch;box-sizing:border-box}.detail-placeholder{min-height:100px;padding:8px}.detail-placeholder h3{font-size:12px;margin-bottom:4px}.detail-placeholder p{font-size:9px}.detail-header{gap:0!important;padding:0!important;margin:0!important;border-bottom:1px solid rgba(74,158,255,.2);min-height:auto!important;justify-content:center}.detail-icon{display:none}.detail-header h3{font-size:10px;margin:0;line-height:1.2;text-align:center;width:100%}.detail-description{font-size:8px;padding:2px;margin:0;line-height:1.1}.detail-card .detail-stats{padding:0!important;gap:2px!important;margin:0!important;width:100%!important;box-sizing:border-box!important}.detail-card .detail-stats .stat-row{padding:1px!important;font-size:9px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:2px!important;width:100%!important;box-sizing:border-box!important;max-width:100%!important;align-items:center!important;margin:0!important;background:#ffffff05!important;border-radius:4px!important}.detail-card .detail-stats .stat-label{font-size:8px!important;font-weight:400!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:0 2px!important;margin:0!important}.detail-card .detail-stats .stat-value{font-size:9px!important;font-weight:400!important;text-align:right!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:0 2px!important;margin:0!important}.bonus-choice-section{padding:4px;margin:0;flex-shrink:0;width:100%}.bonus-choice-section h3{font-size:10px;margin-bottom:4px;text-align:center}.bonus-choice-buttons{gap:4px;flex-direction:row;justify-content:space-between}.bonus-choice-btn{padding:4px;gap:1px;flex:1;max-width:none}.bonus-title{font-size:.7em}.bonus-value{font-size:.9em}.bonus-description{font-size:.65em}.level-up-footer{margin-top:4px;padding-top:4px;flex-shrink:0;gap:4px}.selection-status{font-size:9px;gap:4px}.selection-status span{padding:2px 6px}.selected-units-icons{gap:3px}.confirm-button{padding:6px 16px;font-size:11px}}.skill-tree-modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.skill-tree-modal{background:linear-gradient(135deg,#1e1e2dfa,#141423fa);border:2px solid rgba(102,126,234,.4);border-radius:16px;max-width:min(1200px,95vw);max-height:95vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 60px #667eea4d}.skill-tree-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 30px;background:#0000004d;border-bottom:1px solid rgba(255,255,255,.1)}.skill-tree-modal-header h2{margin:0;font-size:24px;color:#fff;text-shadow:0 0 20px rgba(102,126,234,.5)}.skill-tree-modal-header .skill-points-display{display:flex;align-items:center;gap:10px;font-size:18px}.skill-tree-modal-header .points-label{color:#ffffffb3;font-weight:500}.skill-tree-modal-header .points-value{color:#10b981;font-weight:700;font-size:22px;text-shadow:0 0 10px rgba(16,185,129,.5)}.skill-tree-modal-header .close-button{padding:10px 24px;background:linear-gradient(135deg,#e04545,#b33030);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.skill-tree-modal-header .close-button:hover{background:linear-gradient(135deg,#f05555,#c34040);box-shadow:0 4px 12px #e0454566}.skill-tree-modal-content{display:flex;gap:30px;padding:30px;overflow:hidden;flex:1;min-height:0}.skill-tree-wheel-container{position:relative;overflow:visible}.skill-tree-wheel{position:relative;width:800px;height:700px;overflow:visible}.center-icon{font-size:14px;font-weight:700;color:#fff}.skill-node.confirmed .skill-node-inner{background:var(--skill-color);border-color:var(--skill-border);opacity:1;box-shadow:0 0 20px var(--skill-glow)}.skill-node.confirmed .skill-icon{filter:grayscale(0) brightness(1.2)}.skill-node.pending .skill-node-inner{background:var(--skill-color);border-color:var(--skill-border);opacity:.85;box-shadow:0 0 15px var(--skill-glow),0 0 0 3px #ffffff4d;animation:pulse-pending 1.5s ease-in-out infinite}.skill-node.pending .skill-icon{filter:grayscale(0) brightness(1.1)}@keyframes pulse-pending{0%,to{box-shadow:0 0 15px var(--skill-glow),0 0 0 3px #fff3}50%{box-shadow:0 0 20px var(--skill-glow),0 0 0 4px #fff6}}.skill-node.unlocked .skill-node-inner{opacity:1}.skill-tooltip{background:#14141ef2;border:2px solid var(--tooltip-border);border-radius:12px;padding:20px;animation:tooltipFadeIn .2s ease-out}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.build-summary{background:#14141ef2;border:2px solid rgba(102,126,234,.3);border-radius:12px;padding:20px;max-height:300px;overflow-y:auto}.skill-tree-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:20px 30px;background:#0000004d;border-top:1px solid rgba(255,255,255,.1)}.footer-info{font-size:14px}.points-remaining{color:#f59e0b;font-weight:600}.points-spent{color:#10b981;font-weight:600}.done-button{padding:12px 40px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px #10b9814d}.done-button:hover{background:linear-gradient(135deg,#34d399,#10b981);transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.done-button:active{transform:translateY(0);box-shadow:0 2px 10px #10b9814d}.done-button:disabled{background:linear-gradient(135deg,#4a5568,#2d3748);cursor:not-allowed;opacity:.6;box-shadow:none;transform:none}@media (max-width: 1400px){.skill-tree-modal{max-width:98vw;max-height:95vh}.skill-tree-modal-content{padding:20px;gap:20px}.skill-side-panels{width:280px}}@media (max-width: 1200px){.skill-tree-modal-content{flex-direction:column;align-items:center;padding:15px;overflow-y:auto}.skill-tree-wheel-container{flex-shrink:0}.skill-side-panels{width:100%;max-width:500px;flex-direction:row;gap:20px;flex-shrink:0}.skill-tooltip-panel,.build-summary{flex:1}}@media (max-width: 768px){.skill-tree-modal-header{flex-direction:column;gap:15px;padding:15px 20px}.skill-tree-modal-content{padding:10px}.skill-side-panels{flex-direction:column}.build-summary{max-height:200px}}@media (max-height: 800px){.skill-tree-modal{max-height:98vh}}@media (max-height: 700px){.skill-side-panels{flex-direction:row}.build-summary{max-height:150px}}.minimap-container{position:fixed;bottom:130px;right:20px;width:360px;height:240px;background:#000c;border:2px solid rgba(255,255,255,.3);border-radius:8px;z-index:99;cursor:pointer;transition:all .2s ease;overflow:hidden;box-shadow:0 4px 12px #00000080}.minimap-container:hover{border-color:#fff9;box-shadow:0 6px 16px #000000b3;transform:scale(1.02)}.minimap-container canvas{display:block;width:100%;height:100%}@media (max-width: 768px){.minimap-container{width:270px;height:180px;bottom:95px;right:10px}}@media (max-width: 480px){.minimap-container{width:216px;height:135px;bottom:85px;right:8px}}@media (max-height: 600px) and (orientation: landscape){.minimap-container{width:252px;height:158px;bottom:75px;right:8px}}.debug-panel-button{position:fixed;top:20px;right:140px;background:#ff6400cc;border:2px solid rgba(255,100,0,1);color:#fff;font-size:20px;width:40px;height:40px;border-radius:8px;cursor:pointer;z-index:10000;display:flex;align-items:center;justify-content:center;transition:all .2s}.debug-panel-button:hover{background:#ff6400;transform:scale(1.05)}.debug-panel{position:fixed;top:70px;right:20px;width:280px;background:#000000f2;border:2px solid rgba(255,100,0,.8);border-radius:8px;padding:0;z-index:10000;box-shadow:0 4px 12px #00000080}.debug-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#ff640033;border-bottom:1px solid rgba(255,100,0,.5)}.debug-panel-header h3{margin:0;color:#ff6400;font-size:16px;font-weight:600}.debug-panel-header button{background:none;border:none;color:#ff6400;font-size:24px;cursor:pointer;padding:0;width:24px;height:24px;line-height:24px;transition:color .2s}.debug-panel-header button:hover{color:#fff}.debug-panel-content{padding:16px;display:flex;flex-direction:column;gap:12px}.debug-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;color:#fff;font-size:14px;transition:color .2s}.debug-checkbox:hover{color:#ff6400}.debug-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#ff6400}.debug-checkbox span{flex:1}.view-type-toggle{display:flex;gap:8px;align-items:center}.view-type-button{padding:8px 16px;background:#0009;border:2px solid rgba(255,255,255,.2);border-radius:6px;color:#ffffffb3;font-family:"Press Start 2P",monospace;font-size:10px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px}.view-type-button:hover{background:#000c;border-color:#fff6;color:#ffffffe6;transform:translateY(-1px)}.view-type-button.active{background:#4a9eff4d;border-color:#4a9eff;color:#fff;box-shadow:0 0 10px #4a9eff80}.view-type-button.active:hover{background:#4a9eff66;border-color:#4a9eff;transform:translateY(-1px)}.survival-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10000;animation:fadeIn .3s ease-in}.survival-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #4a90e2;border-radius:12px;padding:40px;max-width:500px;width:90%;box-shadow:0 10px 40px #00000080;animation:slideUp .3s ease-out}.survival-title{font-size:36px;font-weight:700;text-align:center;margin:0 0 30px;color:#e74c3c;text-shadow:0 2px 10px rgba(231,76,60,.5)}.survival-content{display:flex;flex-direction:column;gap:24px;margin-bottom:30px}.survival-stat{text-align:center}.survival-label{font-size:16px;color:#aaa;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}.survival-value{font-size:48px;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(255,255,255,.3)}.survival-button{width:100%;padding:16px 24px;font-size:18px;font-weight:700;color:#fff;background:linear-gradient(135deg,#4a90e2,#357abd);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #4a90e24d}.survival-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4a90e266;background:linear-gradient(135deg,#5aa0f2,#4580cd)}.survival-button:active{transform:translateY(0);box-shadow:0 2px 10px #4a90e24d}.game-view{position:relative;width:100%;height:100vh;overflow:hidden;background:#000}.game-canvas-container{position:relative;width:100%;height:100%}.game-canvas{width:100%;height:100%}.loading-overlay{position:absolute;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:2000}.loading-content{text-align:center;color:#fff}.spinner{width:50px;height:50px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}.loading-content p{font-size:18px;color:#ccc}.error-overlay{position:absolute;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:2000}.error-content{background:#ff00001a;border:2px solid #cc0000;border-radius:10px;padding:30px;max-width:500px;text-align:center;color:#fff}.error-content h2{color:#f66;margin:0 0 15px}.error-content p{color:#ccc;margin:0}.game-container{position:relative;width:100vw!important;height:100vh!important;max-width:none!important;padding:0!important;margin:0!important;overflow:hidden;background:#000;border:none!important;border-radius:0!important}.game-loading-overlay{position:absolute;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:2000}.game-loading-overlay .loading-content h2{font-size:32px;margin-bottom:30px;color:#fff}.game-loading-overlay .loading-content p{font-size:18px;color:#aaa;margin-top:20px}.loading-spinner-container{display:flex;justify-content:center;margin:20px 0}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.2);border-top-color:#4ade80;border-radius:50%;animation:spin 1s linear infinite}.game-ended{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;color:#fff}.game-ended h1{font-size:48px;margin:0 0 20px}.game-ended h2{font-size:36px;margin:0 0 15px;color:#4ade80}.game-ended p{font-size:24px;color:#ccc}.replay-controls{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#000000e6;border:2px solid #333;border-radius:8px;padding:15px 20px;display:flex;align-items:center;gap:20px;z-index:1000;min-width:600px}.replay-label{color:#ff6b6b;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:1px}.replay-timeline-container{display:flex;align-items:center;gap:15px;flex:1}.replay-play-button{background:#4ade80;border:none;color:#000;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .2s}.replay-play-button:hover{background:#5ee88a;transform:scale(1.1)}.replay-timeline{flex:1;height:6px;background:#333;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none}.replay-timeline::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#4ade80;border-radius:50%;cursor:pointer;transition:transform .2s}.replay-timeline::-webkit-slider-thumb:hover{transform:scale(1.2)}.replay-timeline::-moz-range-thumb{width:16px;height:16px;background:#4ade80;border-radius:50%;cursor:pointer;border:none;transition:transform .2s}.replay-timeline::-moz-range-thumb:hover{transform:scale(1.2)}.replay-time{color:#888;font-size:12px;min-width:80px;text-align:right}.replay-speed-controls{display:flex;gap:8px}.speed-button{background:#222;border:1px solid #444;color:#888;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s}.speed-button:hover{background:#333;color:#aaa}.speed-button.active{background:#4ade80;border-color:#4ade80;color:#000;font-weight:700}.game-loading-overlay .error-title{color:#ef4444;font-size:36px;margin-bottom:20px}.game-loading-overlay .error-icon{font-size:64px;margin:20px 0}.game-loading-overlay .error-message{font-size:18px;color:#fca5a5;margin:20px 0;max-width:500px;line-height:1.5}.game-loading-overlay .retry-button{margin-top:30px;padding:12px 24px;font-size:16px;font-weight:600;background:#4ade80;color:#000;border:none;border-radius:8px;cursor:pointer;transition:all .2s}.game-loading-overlay .retry-button:hover{background:#22c55e;transform:scale(1.05)}.game-loading-overlay .retry-button:active{transform:scale(.98)}.campaign-hud{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:flex-start;z-index:1000;pointer-events:none}.campaign-info{background:#000c;border:2px solid #4ade80;border-radius:8px;padding:15px 30px;text-align:center;max-width:600px}.campaign-info h3{color:#4ade80;font-size:24px;margin:0 0 5px;font-weight:700}.campaign-info p{color:#aaa;font-size:16px;margin:0}.wave-info{background:#000c;border:2px solid #6366f1;border-radius:8px;padding:15px 30px;text-align:center;min-width:200px}.wave-number{color:#818cf8;font-size:20px;font-weight:700;margin-bottom:5px}.next-wave{color:#c7d2fe;font-size:16px}.back-button{position:absolute;top:20px;right:20px;background:#ef4444e6;border:2px solid #dc2626;color:#fff;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;z-index:1000;transition:all .2s}.back-button:hover{background:#dc2626;transform:scale(1.05)}.back-button:active{transform:scale(.98)}.loading-screen{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2000}.loading-screen h2{color:#4ade80;font-size:24px;margin-bottom:20px}.error-screen{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2000;color:#fff;padding:40px;text-align:center}.error-screen h2{color:#ef4444;font-size:32px;margin-bottom:20px}.error-screen p{color:#fca5a5;font-size:18px;margin-bottom:30px;max-width:500px}.pause-overlay{position:fixed;inset:0;background:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3000;color:#fff}.pause-overlay h2{font-size:48px;margin:0 0 20px;color:#4ade80}.pause-overlay p{font-size:24px;color:#ccc}.pause-overlay button{margin-top:20px;padding:12px 32px;font-size:18px;background:linear-gradient(135deg,#4ade80,#22c55e);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:700;transition:all .2s ease}.pause-overlay button:hover{background:linear-gradient(135deg,#22c55e,#16a34a);transform:scale(1.05)}.pause-content{text-align:center}.pause-button{position:fixed;top:10px;right:10px;width:40px;height:40px;background:#0009;border:2px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;font-size:18px;cursor:pointer;z-index:100;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.pause-button:hover{background:#000c;border-color:#ffffff80}.unlock-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:10000;animation:fadeIn .3s ease-in}.unlock-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #4a90e2;border-radius:16px;padding:32px 40px;max-width:1000px;width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0009,0 0 40px #4a90e233;animation:slideUp .4s ease-out}.unlock-modal-header{text-align:center;margin-bottom:28px}.unlock-modal-title{font-size:32px;font-weight:700;color:#fff;margin:0 0 8px;text-shadow:0 2px 10px rgba(255,255,255,.2)}.unlock-modal-subtitle{font-size:16px;color:#aaa;margin:0}.unlock-modal-content{display:flex;gap:16px;justify-content:center;flex-wrap:nowrap;margin-bottom:28px}.unlock-modal-content.minion-grid{flex-wrap:wrap}.unlock-card{background:linear-gradient(145deg,#252545,#1e1e38);border:2px solid #3a3a5c;border-radius:12px;padding:16px;width:280px;min-width:200px;flex-shrink:1;cursor:pointer;transition:all .2s ease;position:relative}.unlock-card:hover{border-color:#5a90c2;transform:translateY(-4px);box-shadow:0 8px 24px #5a90c24d}.unlock-card.selected{border-color:#4ade80;background:linear-gradient(145deg,#1e3a2e,#162e24);box-shadow:0 0 20px #4ade804d}.unlock-card.minion-card{cursor:default}.unlock-card.minion-card:hover{transform:none}.unlock-card.unlock-effect{animation:unlockPulse .6s ease-out}@keyframes unlockPulse{0%{transform:scale(.9);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.unlock-card-icon{width:64px;height:64px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2a2a4a,#1a1a2e);border-radius:10px;border:1px solid #3a3a5c;overflow:hidden}.unlock-card-icon img{max-width:48px;max-height:48px;object-fit:contain;image-rendering:pixelated}.unlock-card-icon.minion-icon img{max-width:40px;max-height:40px}.unlock-card-info{text-align:center}.unlock-card-name{font-size:16px;font-weight:700;color:#fff;margin:0 0 4px}.unlock-card-description{font-size:11px;color:#999;margin:0 0 10px;line-height:1.3;min-height:28px}.minion-tier{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:3px 10px;border-radius:4px;margin-bottom:8px}.minion-tier.tier-cheap{background:#2a4a3a;color:#6ee7b7}.minion-tier.tier-mid{background:#3a3a5a;color:#a5b4fc}.minion-tier.tier-expensive{background:#4a3a2a;color:#fbbf24}.unlock-card-stats{display:flex;flex-direction:column;gap:3px}.unlock-card-stats .stat{display:flex;justify-content:space-between;align-items:center;background:#0003;border-radius:4px;padding:3px 8px}.unlock-card-stats .stat-label{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:.3px}.unlock-card-stats .stat-value{font-size:12px;font-weight:700;color:#fff}.selected-checkmark{position:absolute;top:12px;right:12px;width:28px;height:28px;background:#4ade80;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;animation:checkmarkPop .2s ease-out}@keyframes checkmarkPop{0%{transform:scale(0)}70%{transform:scale(1.2)}to{transform:scale(1)}}.unlock-modal-actions{display:flex;gap:16px;justify-content:center}.unlock-button{padding:14px 32px;font-size:16px;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.confirm-button{background:linear-gradient(135deg,#4a90e2,#357abd);color:#fff;box-shadow:0 4px 15px #4a90e24d}.confirm-button:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 6px 20px #4a90e266;background:linear-gradient(135deg,#5aa0f2,#4580cd)}.confirm-button:active:not(.disabled){transform:translateY(0)}.confirm-button.disabled{background:#3a3a5c;color:#666;cursor:not-allowed;box-shadow:none}.skip-button{background:transparent;color:#888;border:1px solid #3a3a5c}.skip-button:hover{background:#ffffff0d;border-color:#5a5a7c;color:#aaa}@media (max-width: 800px){.unlock-modal{padding:24px;max-width:95%}.unlock-card{width:100%;max-width:280px}.unlock-modal-title{font-size:26px}}.level-up-reward-overlay{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .3s ease-out}.level-up-reward-modal{background:linear-gradient(145deg,#1a1a2e,#16213e,#0f3460);border-radius:20px;padding:40px 50px;text-align:center;max-width:500px;width:90%;box-shadow:0 0 50px #6366f14d,0 20px 60px #00000080,inset 0 1px #ffffff1a;border:1px solid rgba(99,102,241,.3)}.level-up-reward-modal.level-announce{transform:scale(.9);opacity:0}.level-up-reward-modal.level-announce.animate{animation:levelUpBounce .6s ease-out forwards}@keyframes levelUpBounce{0%{transform:scale(.9);opacity:0}50%{transform:scale(1.05);opacity:1}to{transform:scale(1);opacity:1}}.level-up-header{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:30px}.level-up-stars{color:#fbbf24;font-size:24px;text-shadow:0 0 10px rgba(251,191,36,.5);animation:starPulse 1.5s ease-in-out infinite}@keyframes starPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}.level-up-title{font-size:48px;font-weight:800;color:#fff;margin:0;text-shadow:0 0 20px rgba(99,102,241,.8),0 0 40px rgba(99,102,241,.4);letter-spacing:4px;animation:titleGlow 2s ease-in-out infinite}@keyframes titleGlow{0%,to{text-shadow:0 0 20px rgba(99,102,241,.8),0 0 40px rgba(99,102,241,.4)}50%{text-shadow:0 0 30px rgba(99,102,241,1),0 0 60px rgba(99,102,241,.6)}}.level-badge-container{margin:30px 0}.level-badge-large{width:140px;height:140px;border-radius:50%;background:linear-gradient(145deg,#1a1a2e,#0a0a15);border:4px solid;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;animation:badgePulse 2s ease-in-out infinite}@keyframes badgePulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.level-number{font-size:72px;font-weight:800;line-height:1}.level-tier-name{font-size:24px;font-weight:600;text-transform:uppercase;letter-spacing:3px}.level-up-message{color:#94a3b8;font-size:16px;line-height:1.6;margin:20px 0 30px}.level-up-continue-button{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;padding:14px 40px;font-size:18px;font-weight:600;border-radius:10px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #6366f166}.level-up-continue-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f180}.level-up-continue-button:active{transform:translateY(0)}.complete-phase{animation:fadeIn .3s ease-out}.complete-header{margin-bottom:20px}.complete-icon{font-size:64px;margin-bottom:15px;animation:iconBounce 1s ease-in-out}@keyframes iconBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.complete-header h2{font-size:32px;font-weight:700;color:#22c55e;margin:0;text-shadow:0 0 20px rgba(34,197,94,.5)}.complete-message{color:#94a3b8;font-size:16px;margin:20px 0 30px}.loading-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);z-index:9999}.loading-content{text-align:center;color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.loading-content h2{font-size:2rem;margin-bottom:2rem;color:#e94560}.loading-content p{font-size:1rem;color:#a0a0a0;margin-bottom:1.5rem}.loading-content.error h2{color:#ff6b6b}.loading-content.error p{color:#ffb3b3;max-width:400px}.loading-spinner{width:50px;height:50px;border:4px solid rgba(233,69,96,.2);border-top:4px solid #e94560;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-content button{padding:12px 32px;font-size:1rem;background:linear-gradient(135deg,#e94560,#0f3460);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:transform .2s,box-shadow .2s}.loading-content button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #e9456066}.level-browser{min-height:100vh;max-height:100vh;background:linear-gradient(135deg,#0f0f23,#1a1a2e,#0f3460);padding:20px;color:#fff;display:flex;flex-direction:column;overflow:hidden}.level-browser-header{margin-bottom:20px;text-align:center;flex-shrink:0}.level-browser-header h1{margin:10px 0;font-size:48px;font-weight:900;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.back-button{padding:12px 24px;font-size:16px;font-weight:600;color:#fff;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;transition:all .3s ease}.back-button:hover{background:#ffffff26;border-color:#ffffff4d;transform:translate(-4px)}.level-browser-content{display:flex;gap:20px;flex:1;min-height:0;max-width:1400px;margin:0 auto;width:100%}.level-list-panel{width:350px;display:flex;flex-direction:column;gap:12px;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:12px;padding:16px}.difficulty-filter{display:flex;flex-direction:column;gap:8px}.difficulty-filter label{font-size:12px;font-weight:600;color:#aaa;text-transform:uppercase;letter-spacing:.5px}.difficulty-select{padding:10px 14px;font-size:14px;font-weight:600;color:#fff;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;transition:all .3s ease;outline:none}.difficulty-select:hover{background:#ffffff26;border-color:#ffffff4d}.difficulty-select:focus{border-color:#4a90e280;box-shadow:0 0 15px #4a90e24d}.difficulty-select option{background:#1a1a2e;color:#fff;padding:10px}.filter-divider{height:1px;background:#ffffff1a;margin:8px 0}.maps-heading{margin:16px 0 12px;font-size:14px;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:.5px}.maps-heading:first-child{margin-top:0}.level-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.level-list-item{padding:12px 16px;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;justify-content:space-between;align-items:center;gap:12px}.level-list-item:hover{background:#ffffff1a;border-color:#fff3;transform:translate(4px)}.level-list-item.selected{background:#4a90e233;border-color:#4a90e280;box-shadow:0 0 15px #4a90e24d}.level-list-item.level-item{background:#ffd70014;border-color:#ffd70033}.level-list-item.level-item:hover{background:#ffd70026;border-color:#ffd7004d}.level-list-item.level-item.selected{background:#ffd70033;border-color:#ffd70080;box-shadow:0 0 15px #ffd7004d}.level-list-item-name{font-size:16px;font-weight:600;color:#fff;flex:1}.level-list-item-difficulty{padding:4px 8px;border-radius:4px;font-size:10px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.load-from-file-button{padding:12px 20px;font-size:14px;font-weight:600;color:#fff;background:linear-gradient(135deg,#10b981,#059669);border:2px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.load-from-file-button:hover{background:linear-gradient(135deg,#34d399,#10b981);box-shadow:0 4px 15px #10b98166;transform:translateY(-2px)}.level-details-panel{flex:1;display:flex;flex-direction:column;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden}.level-details-content{flex:1;overflow-y:auto;padding:24px}.level-details-empty{flex:1;display:flex;align-items:center;justify-content:center;color:#888;font-size:18px}.level-info{max-width:700px;margin:0 auto}.level-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid rgba(255,255,255,.1)}.level-name{margin:0;font-size:36px;font-weight:700;color:#fff;flex:1}.level-difficulty-badge{padding:8px 16px;border-radius:6px;font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 8px #0006;white-space:nowrap}.level-description{margin:0 0 24px;font-size:16px;color:#ccc;line-height:1.6}.level-meta{display:flex;flex-direction:column;gap:16px;align-items:flex-start}.level-stat{display:flex;gap:8px;align-items:center}.stat-label{font-size:14px;color:#888;font-weight:600}.stat-value{font-size:14px;color:#fff;font-weight:600}.level-time{font-size:14px;color:#aaa}.level-tags{display:flex;gap:8px;flex-wrap:wrap}.level-tag{padding:6px 12px;font-size:12px;background:#4a90e233;color:#4a90e2;border-radius:6px;text-transform:capitalize;font-weight:600}.level-play-section{padding:24px;display:flex;justify-content:center;background:#0003;border-top:2px solid rgba(255,255,255,.1)}.level-play-button{padding:16px 64px;font-size:20px;font-weight:700;color:#fff;background:linear-gradient(135deg,#10b981,#059669);border:2px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #10b98166;text-transform:uppercase;letter-spacing:1px}.level-play-button:hover{background:linear-gradient(135deg,#34d399,#10b981);box-shadow:0 6px 20px #10b98199;transform:scale(1.05)}.level-play-button:active{transform:scale(.98)}.level-browser-loading,.level-browser-error{max-width:600px;margin:100px auto;text-align:center;padding:40px;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:12px}.level-browser-loading p,.level-browser-error p{font-size:18px;color:#ccc;margin:20px 0}.level-browser-error h2{color:#ef4444;margin:0 0 12px}.loading-spinner{margin:0 auto 20px;width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:#4a90e2;border-radius:50%;animation:spin 1s linear infinite}.no-levels{text-align:center;padding:40px 20px;color:#888}.no-levels p{font-size:14px;margin:0}.campaign-levels{margin-top:32px;padding-top:24px;border-top:2px solid rgba(255,255,255,.1)}.campaign-levels h3{margin:0 0 16px;font-size:20px;font-weight:600;color:#fff}.campaign-levels-list{display:flex;flex-direction:column;gap:8px}.campaign-level-item{display:flex;align-items:center;gap:16px;padding:12px 16px;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:8px;transition:all .3s ease}.campaign-level-item:hover{background:#ffffff14;border-color:#fff3}.campaign-level-number{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#4a90e24d;border:2px solid rgba(74,144,226,.5);border-radius:50%;font-size:14px;font-weight:700;color:#4a90e2;flex-shrink:0}.campaign-level-info{flex:1;display:flex;flex-direction:column;gap:4px}.campaign-level-name{font-size:14px;font-weight:600;color:#fff}.campaign-level-time{font-size:12px;color:#aaa}@media (max-width: 1024px) and (orientation: portrait){.level-browser-content{flex-direction:column}.level-list-panel{width:100%;max-height:300px}.level-details-panel{min-height:400px}}@media (max-width: 1024px) and (orientation: landscape) and (max-height: 600px){.level-browser{padding:8px}.level-browser-header{margin-bottom:8px}.level-browser-header h1{display:none}.back-button{padding:6px 12px;font-size:12px}.level-list-panel{width:280px;padding:12px}.maps-heading,.load-from-file-button{display:none}.level-list-item{padding:8px 10px}.level-list-item-name{font-size:13px}.level-list-item-difficulty{font-size:9px;padding:3px 6px}.level-details-content{padding:16px}.level-name{font-size:20px}.level-description{font-size:14px;margin-bottom:16px}.level-play-section{padding:12px}.level-play-button{padding:12px 32px;font-size:16px}.difficulty-filter{gap:6px}.difficulty-filter label{font-size:11px}.difficulty-select{padding:8px 10px;font-size:13px}}@media (max-width: 768px) and (orientation: portrait){.level-browser{padding:12px}.level-browser-header h1{font-size:36px}.level-browser-content{flex-direction:column}.level-list-panel{width:100%;max-height:200px}.level-name{font-size:24px}.level-play-button{padding:14px 48px;font-size:18px}.maps-heading,.load-from-file-button{display:none}.level-list-item{padding:10px 12px}.level-list-item-name{font-size:14px}.level-details-panel{flex:1;min-height:300px}}.community-toggle{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#ccc;cursor:pointer;user-select:none;transition:color .3s ease}.community-toggle:hover{color:#fff}.community-toggle input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#4a90e2}.community-level-item{flex-direction:column;align-items:flex-start}.community-level-meta{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:4px;gap:12px}.community-level-author{font-size:12px;color:#888;font-weight:500}.community-level-score{font-size:12px;color:#ff8b60;font-weight:600;white-space:nowrap}.community-level-details{display:flex;flex-direction:column;gap:0;margin-top:24px;background:#ffffff08;border:2px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden}.community-detail-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05)}.community-detail-row:last-child{border-bottom:none}.detail-label{font-size:14px;color:#888;font-weight:600}.detail-value{font-size:14px;color:#fff;font-weight:600}.connection-indicator{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;font-size:14px;transition:all .3s ease}.connection-indicator.disconnected .connection-dot{background:#6b7280;box-shadow:0 0 8px #6b728066}.connection-text{font-weight:500}.connection-indicator.disconnected .connection-text{color:#9ca3af}.play-now-button{padding:8px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:20px;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s ease}.play-now-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.skill-tree-page{background:#ffffff08;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:12px;padding:30px;max-width:1200px;margin:0 auto}.skill-tree-header{text-align:center;margin-bottom:20px}.skill-tree-header h2{margin:0 0 10px;font-size:28px;color:#fff;text-shadow:0 0 20px rgba(102,126,234,.5)}.skill-tree-description{font-size:14px;color:#ffffffb3;line-height:1.5;max-width:600px;margin:0 auto}.skill-tree-controls{display:flex;justify-content:center;align-items:center;gap:30px;margin-bottom:20px;padding:15px;background:#0000004d;border-radius:8px}.skill-points-display{display:flex;align-items:center;gap:10px;font-size:18px}.points-label{color:#ffffffb3;font-weight:500}.points-value{color:#10b981;font-weight:700;font-size:22px;text-shadow:0 0 10px rgba(16,185,129,.5)}.reset-button{padding:10px 24px;background:#ef444433;color:#ef4444;border:1px solid rgba(239,68,68,.4);border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.reset-button:hover:not(:disabled){background:#ef44444d;border-color:#ef444499}.reset-button:disabled{opacity:.5;cursor:not-allowed}.skill-tree-container{display:flex;gap:30px;justify-content:center;align-items:flex-start}.skill-tree-wheel{position:relative;width:800px;height:700px;flex-shrink:0}.skill-connections{position:absolute;top:0;left:0;pointer-events:none}.connection-active{filter:drop-shadow(0 0 4px currentColor)}.skill-tree-center{position:absolute;width:50px;height:50px;transform:translate(-50%,-50%);z-index:10}.center-inner{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);border:3px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px #667eea80,inset 0 0 10px #ffffff1a}.center-icon{font-size:24px}.skill-node{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);cursor:pointer;z-index:5;transition:transform .2s,z-index 0s}.skill-node:hover{transform:translate(-50%,-50%) scale(1.15);z-index:20}.skill-node-inner{width:100%;height:100%;border-radius:50%;background:#1e1e28e6;border:3px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:all .2s}.skill-icon{font-size:20px;filter:grayscale(.5);transition:filter .2s}.skill-node .skill-node-inner{opacity:.6}.skill-node.can-unlock .skill-node-inner{opacity:.6;border-color:#fff3;box-shadow:0 0 0 3px #ffb432cc,0 0 12px #ffb43280;animation:pulse-available 2s ease-in-out infinite}.skill-node.can-unlock .skill-icon{filter:grayscale(.5)}.skill-node.can-unlock:hover .skill-node-inner{box-shadow:0 0 0 3px #ffc850,0 0 20px #ffb432b3}.skill-node.unlocked .skill-node-inner{background:var(--skill-color);border-color:var(--skill-border);opacity:1;box-shadow:0 0 20px var(--skill-glow)}.skill-node.unlocked .skill-icon{filter:grayscale(0) brightness(1.2)}.skill-node.hovered .skill-node-inner{border-color:#fff;box-shadow:0 0 25px #fff6}@keyframes pulse-glow{0%,to{box-shadow:0 0 5px var(--skill-glow)}50%{box-shadow:0 0 15px var(--skill-glow)}}@keyframes pulse-available{0%,to{box-shadow:0 0 0 3px #ffb43299,0 0 8px #ffb4324d}50%{box-shadow:0 0 0 4px #ffc850e6,0 0 16px #ffb43299}}.branch-label-outer{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;text-shadow:0 0 10px currentColor}.branch-color{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px}.branch-type{font-size:10px;font-weight:600;opacity:.7;background:#0006;padding:2px 6px;border-radius:4px}.skill-side-panels{display:flex;flex-direction:column;gap:20px;width:320px;flex-shrink:0}.skill-tooltip-panel{min-height:200px}.skill-tooltip{background:#14141ef2;border:2px solid var(--tooltip-border);border-radius:12px;padding:20px;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.skill-tooltip-header{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.1)}.skill-tooltip-icon{font-size:36px;flex-shrink:0}.skill-tooltip-title h3{margin:0 0 5px;font-size:18px;color:#fff}.skill-tooltip-type{font-size:12px;color:var(--tooltip-color);text-transform:uppercase;letter-spacing:.5px;font-weight:600}.skill-tooltip-description{margin:0 0 15px;font-size:14px;color:#ffffffd9;line-height:1.6}.skill-tooltip-status{padding-top:10px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:600}.status-unlocked{color:#10b981}.status-available{color:#f59e0b}.status-locked{color:#fff6}.tooltip-placeholder{background:#14141e99;border:1px dashed rgba(255,255,255,.2);border-radius:12px;padding:30px 20px;text-align:center}.tooltip-placeholder p{margin:0 0 20px;color:#ffffff80;font-size:14px}.legend{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.legend-item{display:flex;align-items:center;gap:10px;font-size:13px;color:#ffffffb3}.legend-icon{font-size:10px}.legend-icon.unlocked{color:#10b981;text-shadow:0 0 5px rgba(16,185,129,.5)}.legend-icon.available{color:#f59e0b;text-shadow:0 0 5px rgba(245,158,11,.5)}.legend-icon.locked{color:#ffffff4d}.branch-legend{display:flex;flex-direction:column;gap:8px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1)}.legend-letter{width:20px;height:20px;background:#ffffff1a;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff9}@media (max-width: 1100px){.skill-tree-container{flex-direction:column;align-items:center}.skill-tree-wheel{width:100%;max-width:700px;height:600px}.skill-connections{width:100%;height:100%}.skill-tooltip-panel{width:100%;max-width:400px}}@media (max-width: 768px){.skill-tree-page{padding:15px}.skill-tree-header h2{font-size:22px}.skill-tree-wheel{height:500px;transform:scale(.85);transform-origin:top center}.skill-tree-controls{flex-direction:column;gap:15px}}@media (orientation: landscape) and (max-height: 500px){.skill-tree-page{padding:10px}.skill-tree-header{margin-bottom:10px}.skill-tree-header h2{font-size:18px;margin-bottom:5px}.skill-tree-description{font-size:12px}.skill-tree-controls{margin-bottom:10px;padding:10px}.skill-tree-container{flex-direction:row}.skill-tree-wheel{width:500px;height:400px;transform:scale(.6);transform-origin:top left}.skill-side-panels{width:250px}}.build-summary{background:#14141ef2;border:2px solid rgba(102,126,234,.3);border-radius:12px;padding:20px;max-height:400px;overflow-y:auto}.build-summary::-webkit-scrollbar{width:6px}.build-summary::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.build-summary::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.build-summary::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.build-summary h3{margin:0 0 15px;font-size:16px;color:#fff;text-transform:uppercase;letter-spacing:1px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}.build-summary.empty{border-style:dashed;border-color:#fff3;background:#14141e99}.build-summary .empty-message{color:#fff6;font-size:13px;text-align:center;margin:0}.build-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.build-item{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;background:#ffffff08;border-radius:6px;border:1px solid rgba(255,255,255,.05)}.build-icon{font-size:18px;flex-shrink:0;line-height:1.4}.build-text{font-size:13px;color:#ffffffd9;line-height:1.5}.color-word{font-weight:600}@media (max-width: 1100px){.skill-side-panels{width:100%;max-width:400px}.build-summary{max-height:300px}}@media (orientation: landscape) and (max-height: 500px){.build-summary{max-height:200px;padding:15px}.build-summary h3{font-size:14px;margin-bottom:10px}.build-item{padding:6px 8px}.build-icon{font-size:14px}.build-text{font-size:11px}}.encyclopedia{min-height:100vh;background:#0a0e1a;background-image:radial-gradient(ellipse at top,rgba(102,126,234,.1) 0%,transparent 50%),radial-gradient(ellipse at bottom,rgba(118,75,162,.1) 0%,transparent 50%);padding:20px;color:#e0e0e0}.encyclopedia-top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:0 20px}.encyclopedia-back-button{padding:10px 20px;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}.encyclopedia-back-button:hover{background:#ffffff26;transform:translate(-2px);box-shadow:0 4px 12px #0000004d}.server-connection-status{display:flex;align-items:center;gap:16px}.connection-indicator{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;font-size:14px;font-weight:600}.connection-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}.connection-indicator.connected .connection-dot{background:#10b981;box-shadow:0 0 8px #10b98199}.connection-indicator.disconnected .connection-dot{background:#ef4444;box-shadow:0 0 8px #ef444499}.connection-indicator.checking .connection-dot{background:#f59e0b;box-shadow:0 0 8px #f59e0b99;animation:pulse 1s infinite}.connection-text{color:#e0e0e0}.connection-indicator.connected .connection-text{color:#10b981}.connection-indicator.disconnected .connection-text{color:#ef4444}.connection-indicator.checking .connection-text{color:#f59e0b}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.play-now-button{padding:10px 24px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.play-now-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.encyclopedia-header{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:20px;position:relative}.encyclopedia-header .encyclopedia-back-button{display:none}.encyclopedia-header h1{color:#fff;font-size:36px;text-shadow:0 0 20px rgba(102,126,234,.5);font-weight:700;letter-spacing:2px;margin:0}.encyclopedia-layout{display:flex;gap:20px;max-width:1600px;margin:0 auto}.encyclopedia-nav{display:flex;flex-direction:column;gap:8px;min-width:140px}.nav-tab{padding:14px 20px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#ffffffb3;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;text-align:left}.nav-tab:hover{background:#ffffff1a;color:#fff;border-color:#fff3}.nav-tab.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent;box-shadow:0 0 20px #667eea66}.encyclopedia-content{flex:1;overflow-y:auto;max-height:calc(100vh - 180px)}.encyclopedia-content::-webkit-scrollbar{width:8px}.encyclopedia-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.encyclopedia-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.encyclopedia-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.encyclopedia-main{display:flex;gap:20px;flex:1}.encyclopedia-sidebar{display:flex;flex-direction:column;gap:20px;flex:1;max-width:800px}.color-filter{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:12px;padding:20px}.color-filter h3{margin:0 0 15px;font-size:14px;color:#fff9;text-transform:uppercase;letter-spacing:1px;font-weight:600}.filter-btn{padding:10px 16px;margin-right:10px;margin-bottom:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#ffffffb3;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;display:inline-block}.filter-btn:hover{background:#ffffff1a;border-color:#fff3;color:#fff}.filter-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent;box-shadow:0 0 20px #667eea4d}.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:12px;padding:20px;max-height:calc(100vh - 300px);overflow-y:auto}.items-grid::-webkit-scrollbar{width:8px}.items-grid::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.items-grid::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.items-grid::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.item-card{background:#ffffff0d;border:2px solid var(--item-border-color, rgba(255, 255, 255, .1));border-radius:8px;padding:12px;cursor:pointer;transition:all .2s;text-align:center;position:relative}.item-card:hover{transform:translateY(-2px);background:#ffffff14;box-shadow:0 8px 20px #0000004d;border-color:var(--item-border-color, rgba(255, 255, 255, .3))}.item-card.selected{background:#667eea33;border-color:#667eea;box-shadow:0 0 20px #667eea66}.item-image{width:64px;height:64px;object-fit:contain;margin:0 auto 8px;image-rendering:pixelated;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.item-card h4{margin:0;font-size:12px;color:#ffffffe6;font-weight:500}.detail-panel-empty{flex:1;display:flex;align-items:center;justify-content:center;background:#ffffff08;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:12px;min-height:400px;color:#fff6;font-size:18px}.detail-panel{flex:1;background:#ffffff08;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:12px;overflow-y:auto;max-height:calc(100vh - 200px);animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.detail-panel::-webkit-scrollbar{width:8px}.detail-panel::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.detail-panel::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.detail-header{padding:40px 30px;background:linear-gradient(135deg,#667eea26,#764ba226);border-bottom:1px solid rgba(255,255,255,.1);position:relative}.detail-header:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(102,126,234,.1) 0%,transparent 70%);pointer-events:none}.detail-image{width:120px;height:120px;object-fit:contain;margin:0 auto 20px;display:block;image-rendering:pixelated;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}.detail-title h2{margin:0 0 10px;font-size:28px;text-align:center;color:#fff;text-shadow:0 0 10px rgba(102,126,234,.5)}.detail-description{margin:0 0 15px;text-align:center;color:#ffffffb3;line-height:1.5;font-size:14px}.detail-colors{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.color-badge{padding:8px 16px;border-radius:20px;font-size:11px;font-weight:700;color:#000000e6;border:2px solid;text-transform:uppercase;letter-spacing:1.5px;backdrop-filter:brightness(1.2);box-shadow:0 2px 8px #0000004d}.detail-stats{padding:30px}.detail-stats h3{margin:0 0 20px;font-size:18px;color:#ffffffe6;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:30px}.stat-item{display:flex;flex-direction:row;align-items:baseline;gap:8px;padding:8px 12px;background:#ffffff05;border:1px solid rgba(255,255,255,.05);border-radius:6px}.stat-item.full-width{grid-column:1 / -1}.stat-label{font-size:12px;color:#fff9;font-weight:600;text-transform:uppercase;letter-spacing:.5px;min-width:90px}.stat-value{font-size:16px;color:#fff;font-weight:600;flex:1;text-align:right}.levels-container{display:flex;flex-direction:column;gap:20px}.level-section{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:20px}.level-section h4{margin:0 0 15px;font-size:16px;color:#667eea;font-weight:600;text-transform:uppercase;letter-spacing:1px}.level-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.level-stats .stat-item{background:#ffffff03;border-color:#ffffff08}@media (orientation: landscape) and (max-height: 500px){.encyclopedia{padding:5px}.encyclopedia-top-bar{display:none}.encyclopedia-header{margin-bottom:10px;padding:0 10px;justify-content:space-between}.encyclopedia-header .encyclopedia-back-button{display:flex;position:static;padding:6px 12px;font-size:14px}.encyclopedia-header h1{display:none}.tab-container{padding:2px}.tab{padding:6px 16px;font-size:14px}.encyclopedia-main{gap:10px;max-width:100%}.encyclopedia-sidebar{flex:0 0 280px;gap:10px}.color-filter{display:none}.items-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;padding:10px;height:calc(100vh - 60px);max-height:calc(100vh - 60px)}.item-card{padding:8px}.item-image{width:48px;height:48px}.item-card h4{font-size:11px}.detail-panel{height:calc(100vh - 60px);max-height:calc(100vh - 60px)}.detail-panel-empty{height:calc(100vh - 60px);min-height:unset}.detail-header{padding:15px}.detail-image{width:80px;height:80px;margin-bottom:10px}.detail-title h2{font-size:20px;margin-bottom:5px}.detail-description{font-size:12px;margin-bottom:10px}.color-badge{padding:4px 10px;font-size:10px}.detail-stats{padding:15px}.detail-stats h3{font-size:14px;margin-bottom:10px}.stats-grid,.level-stats{grid-template-columns:1fr;gap:8px;margin-bottom:15px}.stat-item{padding:6px 10px}.stat-label{font-size:11px;min-width:70px}.stat-value{font-size:13px}.level-section{padding:12px}.level-section h4{font-size:14px;margin-bottom:10px}}@media (max-width: 1200px) and (orientation: portrait){.encyclopedia-main{flex-direction:column}.encyclopedia-sidebar{max-width:100%}.items-grid{max-height:400px}.detail-panel{max-height:600px}}@media (max-width: 768px) and (orientation: portrait){.items-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.item-image{width:48px;height:48px}.stats-grid,.level-stats{grid-template-columns:1fr}}.colorwheel-panel{background:#ffffff08;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:12px;padding:40px;max-width:900px;margin:0 auto}.colorwheel-header{text-align:center;margin-bottom:40px}.colorwheel-header h2{margin:0 0 15px;font-size:32px;color:#fff;text-shadow:0 0 20px rgba(102,126,234,.5)}.colorwheel-description{font-size:16px;color:#ffffffb3;line-height:1.6;max-width:600px;margin:0 auto}.colorwheel-panel .color-diagram{margin:40px 0;display:flex;justify-content:center}.colorwheel-panel .color-wheel{position:relative;width:400px;height:400px}.colorwheel-panel .color-node{position:absolute;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.5rem;border:3px solid rgba(255,255,255,.2);transition:transform .3s ease}.colorwheel-panel .color-node:hover{transform:scale(1.1)}.colorwheel-panel .color-label{position:absolute;bottom:-25px;font-size:.9rem;color:silver;width:80px;text-align:center;left:50%;transform:translate(-50%)}.colorwheel-panel .color-node.white{background:#f0f0f0;color:#333;left:170px;top:40px}.colorwheel-panel .color-node.blue{background:#3b82f6;color:#fff;left:294px;top:130px}.colorwheel-panel .color-node.red{background:#ef4444;color:#fff;left:248px;top:280px}.colorwheel-panel .color-node.green{background:#10b981;color:#fff;left:92px;top:280px}.colorwheel-panel .color-node.black{background:#1f2937;color:#fff;left:46px;top:130px}.colorwheel-panel .arrows{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.colorwheel-panel .arrow{fill:none;stroke:#f44;stroke-width:2;opacity:.6}.colorwheel-panel .arrow-label{fill:#f44;font-size:12px;font-weight:700}.color-details{margin-top:40px;padding-top:30px;border-top:1px solid rgba(255,255,255,.1)}.color-details h3{text-align:center;margin:0 0 25px;font-size:20px;color:#ffffffe6;text-transform:uppercase;letter-spacing:1px}.matchup-list{display:flex;flex-direction:column;gap:12px;max-width:500px;margin:0 auto}.matchup-item{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 20px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:8px}.matchup-arrow{color:#f44;font-size:18px;font-weight:700}.matchup-text{color:#fff9;font-size:14px}.color-badge-small{padding:6px 14px;border-radius:16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.color-badge-small.white{background:#f0f0f0;color:#333}.color-badge-small.blue{background:#3b82f6;color:#fff}.color-badge-small.black{background:#1f2937;color:#fff}.color-badge-small.red{background:#ef4444;color:#fff}.color-badge-small.green{background:#10b981;color:#fff}.color-note{margin-top:30px;padding:20px;background:#667eea1a;border:1px solid rgba(102,126,234,.2);border-radius:8px;font-size:14px;color:#ffffffb3;line-height:1.6;text-align:center}@media (max-width: 500px){.colorwheel-panel .color-wheel{width:300px;height:300px}.colorwheel-panel .color-node{width:50px;height:50px;font-size:1.2rem}.colorwheel-panel .color-node.white{left:125px;top:30px}.colorwheel-panel .color-node.blue{left:220px;top:98px}.colorwheel-panel .color-node.red{left:186px;top:210px}.colorwheel-panel .color-node.green{left:64px;top:210px}.colorwheel-panel .color-node.black{left:30px;top:98px}.colorwheel-panel{padding:20px}.matchup-item{flex-wrap:wrap;gap:8px}}@media (orientation: landscape) and (max-height: 500px){.encyclopedia-nav{flex-direction:row;min-width:unset;width:100%;margin-bottom:10px}.nav-tab{padding:8px 16px;font-size:13px}.encyclopedia-layout{flex-direction:column}.colorwheel-panel{padding:15px}.colorwheel-panel .color-wheel{width:250px;height:250px}.colorwheel-panel .color-node{width:40px;height:40px;font-size:1rem}.colorwheel-panel .color-node.white{left:105px;top:25px}.colorwheel-panel .color-node.blue{left:185px;top:80px}.colorwheel-panel .color-node.red{left:155px;top:175px}.colorwheel-panel .color-node.green{left:55px;top:175px}.colorwheel-panel .color-node.black{left:25px;top:80px}.colorwheel-panel .color-label{font-size:.7rem;bottom:-20px}}.tutorial-overlay{position:fixed;top:0;left:0;right:0;z-index:1100;display:flex;justify-content:center;padding:20px;pointer-events:none}.tutorial-content{background:linear-gradient(180deg,#141928fa,#1e2337f2);border:2px solid #4a9eff;border-radius:12px;padding:20px 30px;max-width:600px;width:100%;box-shadow:0 8px 32px #00000080,0 0 20px #4a9eff4d;pointer-events:auto}.tutorial-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid rgba(74,158,255,.3)}.tutorial-title{margin:0;font-size:1.5rem;color:#4a9eff;text-shadow:0 0 10px rgba(74,158,255,.5)}.tutorial-progress{font-size:.85rem;color:#888;background:#0000004d;padding:4px 10px;border-radius:12px}.tutorial-message{margin-bottom:20px;line-height:1.6}.tutorial-message p{margin:0 0 8px;color:#e0e0e0;font-size:1rem}.tutorial-message p:last-child{margin-bottom:0}.tutorial-buttons{display:flex;gap:12px;justify-content:center}.tutorial-next-btn{background:linear-gradient(180deg,#4a9eff,#2a7edf);border:none;border-radius:8px;padding:12px 32px;font-size:1.1rem;font-weight:700;color:#fff;cursor:pointer;transition:all .2s ease;text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 4px 12px #4a9eff66}.tutorial-next-btn:hover{background:linear-gradient(180deg,#5aafff,#3a8eef);transform:translateY(-2px);box-shadow:0 6px 16px #4a9eff80}.tutorial-next-btn:active{transform:translateY(0);box-shadow:0 2px 8px #4a9eff66}.tutorial-keep-playing-btn{background:linear-gradient(180deg,#50c878,#3da35d);border:none;border-radius:8px;padding:12px 32px;font-size:1.1rem;font-weight:700;color:#fff;cursor:pointer;transition:all .2s ease;text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 4px 12px #50c87866}.tutorial-keep-playing-btn:hover{background:linear-gradient(180deg,#60d888,#4db36d);transform:translateY(-2px);box-shadow:0 6px 16px #50c87880}.tutorial-keep-playing-btn:active{transform:translateY(0);box-shadow:0 2px 8px #50c87866}.tutorial-hint{margin-top:15px;padding:10px 15px;background:#ffc83226;border:1px solid rgba(255,200,50,.3);border-radius:6px;text-align:center;color:#ffc832;font-size:.9rem;animation:pulse-hint 2s ease-in-out infinite}@keyframes pulse-hint{0%,to{opacity:.8}50%{opacity:1}}@media (max-width: 768px){.tutorial-overlay{padding:10px}.tutorial-content{padding:15px 20px}.tutorial-title{font-size:1.25rem}.tutorial-message p{font-size:.95rem}.tutorial-buttons{flex-direction:column}.tutorial-next-btn,.tutorial-keep-playing-btn{width:100%}}.tutorial-wave-countdown{position:fixed;top:120px;left:50%;transform:translate(-50%);z-index:100;background:linear-gradient(180deg,#ff6432e6,#c8321ee6);border:2px solid #ff6432;border-radius:8px;padding:10px 24px;font-size:1.2rem;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);box-shadow:0 4px 16px #ff643266;animation:pulse-countdown 1s ease-in-out infinite}@keyframes pulse-countdown{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.05)}}.tutorial-highlight{position:absolute;pointer-events:none;z-index:50;border:3px solid #ffcc00;border-radius:4px;background:#ffcc0026;animation:pulse-highlight 1.5s ease-in-out infinite}@keyframes pulse-highlight{0%,to{opacity:.6;box-shadow:0 0 10px #ffcc0080}50%{opacity:1;box-shadow:0 0 20px #fc0c}}.game-mode-selector{margin-bottom:1.5rem}.game-mode-selector h4{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:#e0e0e0}.game-mode-dropdown{width:100%;padding:10px 40px 10px 14px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:8px;color:#e5e7eb;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;margin-bottom:.75rem;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e5e7eb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.game-mode-dropdown:hover:not(:disabled){background:#ffffff26;border-color:#ffffff4d}.game-mode-dropdown:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa1a}.game-mode-dropdown:disabled{opacity:.6;cursor:not-allowed;background:#ffffff0d}.game-mode-dropdown option{background:#1a1a1a;color:#e5e7eb;padding:10px}.mode-description{font-size:.85rem;color:#b0b0b0;margin:0 0 .5rem;line-height:1.4}.mode-details{display:flex;gap:.75rem;font-size:.8rem;color:#888}.mode-detail{background:#ffffff0d;padding:.25rem .5rem;border-radius:4px}.game-speed-selector{margin-bottom:1.5rem}.game-speed-selector h4{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:#e0e0e0}.game-speed-dropdown{width:100%;padding:10px 40px 10px 14px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:8px;color:#e5e7eb;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;margin-bottom:.75rem;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e5e7eb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.game-speed-dropdown:hover:not(:disabled){background:#ffffff26;border-color:#ffffff4d}.game-speed-dropdown:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa1a}.game-speed-dropdown:disabled{opacity:.6;cursor:not-allowed;background:#ffffff0d}.game-speed-dropdown option{background:#1a1a1a;color:#e5e7eb;padding:10px}.speed-description{font-size:.85rem;color:#b0b0b0;margin:0 0 .5rem;line-height:1.4}.selector-container{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.selector-label{font-size:14px;font-weight:600;color:#e0e0e0}.selector-dropdown{padding:8px 12px;background:#2a2a2a;border:1px solid #404040;border-radius:4px;color:#e0e0e0;font-size:14px;cursor:pointer;transition:all .2s}.selector-dropdown:hover:not(:disabled){border-color:#667eea;background:#333}.selector-dropdown:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 2px #667eea33}.selector-dropdown:disabled{opacity:.5;cursor:not-allowed}.selector-description{font-size:12px;color:#a0a0a0;font-style:italic}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background-color:#2a2a2a;border:2px solid #444;border-radius:8px;max-width:800px;max-height:80vh;width:90%;display:flex;flex-direction:column;box-shadow:0 4px 20px #00000080}.map-choice-modal{max-width:1000px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:2px solid #444}.modal-header h2{margin:0;color:#fff;font-size:24px}.modal-close{background:none;border:none;color:#aaa;font-size:32px;cursor:pointer;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s,color .2s}.modal-close:hover{background-color:#444;color:#fff}.modal-body{padding:20px;overflow-y:auto;flex:1}.loading-message,.error-message,.no-maps-message{text-align:center;padding:40px 20px;color:#aaa;font-size:16px}.error-message{color:#ff6b6b}.maps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.map-card{background-color:#1a1a1a;border:2px solid #444;border-radius:8px;cursor:pointer;transition:border-color .2s,transform .2s;overflow:hidden}.map-card:hover{border-color:#666;transform:translateY(-2px)}.map-card-header{background-color:#2a2a2a;padding:15px;border-bottom:2px solid #444}.map-card-header h3{margin:0;color:#fff;font-size:18px;font-weight:600}.map-card-body{padding:15px}.map-description{color:#aaa;font-size:14px;margin:0 0 15px;line-height:1.5;min-height:60px}.map-info{display:flex;flex-direction:column;gap:8px}.map-info-item{display:flex;justify-content:space-between;align-items:center}.map-info-label{color:#888;font-size:13px}.map-info-value{color:#fff;font-size:13px;font-weight:600}.level-badge{display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 2px 8px #0000004d;transition:transform .2s ease}.level-badge:hover{transform:scale(1.1)}.level-badge-small{width:24px;height:24px;font-size:12px}.level-badge-medium{width:36px;height:36px;font-size:16px}.level-badge-large{width:56px;height:56px;font-size:24px}.level-badge-gray{background:linear-gradient(135deg,#6b7280,#4b5563);border:2px solid #9ca3af}.level-badge-green{background:linear-gradient(135deg,#22c55e,#16a34a);border:2px solid #4ade80}.level-badge-blue{background:linear-gradient(135deg,#3b82f6,#2563eb);border:2px solid #60a5fa}.level-badge-purple{background:linear-gradient(135deg,#a855f7,#9333ea);border:2px solid #c084fc}.level-badge-orange{background:linear-gradient(135deg,#f97316,#ea580c);border:2px solid #fb923c}.level-badge-gold{background:linear-gradient(135deg,#fbbf24,#d97706);border:2px solid #fcd34d;box-shadow:0 0 15px #fbbf2480}.level-badge-number{line-height:1}.lobby-room{position:fixed;top:20px;bottom:20px;left:50%;transform:translate(-50%);background:#000000b3;padding:30px;border-radius:16px;box-shadow:0 15px 40px #00000080;min-width:1100px;max-width:1800px;width:90%;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;overflow:hidden}.lobby-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}.lobby-header h2{color:#e5e7eb;font-size:2rem;margin:0}.header-buttons{display:flex;gap:12px;align-items:center}.leave-button{padding:10px 20px;background:#ef444433;color:#ef4444;border:1px solid #ef4444;border-radius:6px;cursor:pointer;font-weight:600;transition:all .3s}.leave-button:hover:not(:disabled){background:#ef44444d;transform:translateY(-1px)}.leave-button:disabled{opacity:.5;cursor:not-allowed}.lobby-content{display:grid;grid-template-columns:4fr 1fr;gap:30px;margin-bottom:30px;flex:1;min-height:0;overflow:hidden;align-items:stretch}.players-panel{background:#ffffff0d;border-radius:12px;padding:20px;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;min-height:0;overflow:hidden}.players-panel h3{color:#e5e7eb;margin:0 0 20px;font-size:1.2rem;flex-shrink:0}.players-list{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto}.players-header{display:grid;grid-template-columns:2fr 80px 120px 80px 60px;gap:10px;padding:10px 15px;background:#ffffff1a;border-radius:6px 6px 0 0;font-weight:600;font-size:14px;color:#9ca3af;text-transform:uppercase}.player-row{display:grid;grid-template-columns:2fr 80px 120px 80px 60px;gap:10px;padding:12px 15px;background:#0000004d;border:1px solid rgba(255,255,255,.05);transition:all .2s}.player-row:hover{background:#0006;border-color:#ffffff1a}.player-row.empty-slot{background:#ffffff05;border-style:dashed;opacity:.7}.col-player{display:flex;align-items:center;gap:0;color:#e5e7eb}.col-team,.col-playstyle,.col-ready,.col-actions{display:flex;align-items:center;justify-content:center}.player-name{font-weight:500}.player-name.bot{color:#60a5fa}.quick-add-bot-button{width:40px;height:40px;padding:0;margin-right:10px;background:#60a5fa26;border:2px solid rgba(96,165,250,.3);border-radius:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.quick-add-bot-button:hover:not(:disabled){background:#60a5fa40;border-color:#60a5fa80;transform:translateY(-2px);box-shadow:0 4px 12px #60a5fa4d}.quick-add-bot-button:active:not(:disabled){transform:translateY(0)}.quick-add-bot-button:disabled{opacity:.4;cursor:not-allowed}.quick-add-bot-button .bot-icon{font-size:18px;line-height:1}.quick-add-bot-button .plus-icon{position:absolute;bottom:2px;right:2px;font-size:12px;font-weight:700;color:#4ade80;background:#000000b3;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;line-height:1}.slot-type-selector{width:100%;padding:8px 32px 8px 12px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:6px;color:#e5e7eb;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23e5e7eb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.slot-type-selector:hover{background:#ffffff26;border-color:#ffffff4d}.slot-type-selector:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa1a}.slot-type-selector option{background:#1a1a1a;color:#e5e7eb;padding:8px}.team-button{padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-weight:600;font-size:13px;transition:all .2s;min-width:60px}.team-button.team-a{background:#ef444433;color:#ef4444;border:1px solid #ef4444}.team-button.team-a:hover:not(:disabled){background:#ef44444d}.team-button.team-b{background:#4a9eff33;color:#4a9eff;border:1px solid #4a9eff}.team-button.team-b:hover:not(:disabled){background:#4a9eff4d}.team-button:disabled{opacity:.5;cursor:not-allowed}.team-label{padding:6px 12px;border-radius:4px;font-weight:600;font-size:13px;min-width:60px;text-align:center}.team-label.team-a{background:#ef44441a;color:#ef4444}.team-label.team-b{background:#4a9eff1a;color:#4a9eff}.team-label:not(.team-a):not(.team-b){background:#ffffff0d;color:#9ca3af}.playstyle-select{width:100%;padding:8px 32px 8px 12px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:6px;color:#e5e7eb;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23e5e7eb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.playstyle-select:hover:not(:disabled){background:#ffffff26;border-color:#ffffff4d}.playstyle-select:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa1a}.playstyle-select:disabled{opacity:.6;cursor:not-allowed;background:#ffffff0d}.playstyle-select option{background:#1a1a1a;color:#e5e7eb;padding:8px}.playstyle-label{color:#9ca3af;font-size:13px}.ready-indicator{font-size:18px;font-weight:700}.ready-indicator.ready{color:#10b981}.ready-indicator.not-ready{color:#6b7280}.remove-button{width:30px;height:30px;padding:0;background:#ef444433;color:#ef4444;border:1px solid #ef4444;border-radius:4px;cursor:pointer;font-size:20px;line-height:1;transition:all .2s}.remove-button:hover:not(:disabled){background:#ef44444d}.remove-button:disabled{opacity:.5;cursor:not-allowed}.empty-slot-text{color:#6b7280;font-style:italic}.game-settings{background:#ffffff0d;border-radius:12px;padding:20px;border:1px solid rgba(255,255,255,.1);overflow-y:auto;display:flex;flex-direction:column;min-height:0}.game-settings h3{color:#e5e7eb;margin:0 0 15px;font-size:1.2rem;flex-shrink:0}.game-settings p{color:#9ca3af;margin:8px 0}.current-mode-display{margin-top:1rem}.current-mode-display h4{margin:0 0 .5rem;font-size:.9rem;font-weight:600;color:#e0e0e0}.mode-info{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:.75rem}.mode-name-display{font-weight:600;color:#fff;display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.mode-desc-display{font-size:.85rem;color:#b0b0b0;margin:0;line-height:1.4}.dev-badge{background:#ffa5004d;color:#ffb84d;font-size:.7rem;padding:.15rem .4rem;border-radius:4px;font-weight:700}.lobby-footer{text-align:center;flex-shrink:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}.footer-buttons{display:flex;gap:20px;justify-content:center;align-items:center}.join-section{margin-bottom:20px}.join-section p{color:#e5e7eb;margin-bottom:15px;font-size:16px}.team-buttons{display:flex;gap:20px;justify-content:center}.join-team-btn{padding:12px 30px;border:none;border-radius:6px;cursor:pointer;font-weight:700;font-size:16px;transition:all .3s}.join-team-btn.team-a{background:linear-gradient(135deg,#4a9eff,#2563eb);color:#fff}.join-team-btn.team-a:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #4a9eff66}.join-team-btn.team-b{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff}.join-team-btn.team-b:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #a855f766}.join-team-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.ready-button{padding:18px 50px;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-size:18px;transition:all .3s;flex:1;max-width:300px;height:58px;display:flex;align-items:center;justify-content:center;margin:0}.ready-button.not-ready{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.ready-button.ready{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff}.ready-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #10b98166}.ready-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.host-controls{margin-top:20px}.start-button{padding:18px 50px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-size:18px;transition:all .3s;flex:1;max-width:300px;height:58px;display:flex;align-items:center;justify-content:center;position:relative;margin:0}.start-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 20px #667eea80}.start-button:disabled{background:linear-gradient(135deg,#9ca3af,#6b7280);cursor:not-allowed;transform:none}.start-button:disabled:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#000000e6;color:#ef4444;padding:8px 12px;border-radius:6px;font-size:14px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s;margin-bottom:8px}.start-button:disabled:hover:after{opacity:1}.start-hint{color:#ef4444;margin:0;font-size:14px}.waiting-hint{color:#9ca3af;font-style:italic;font-size:16px;margin-top:10px}.error-message{background:#ef44441a;color:#ef4444;padding:12px 20px;border-radius:6px;border:1px solid rgba(239,68,68,.3);margin-bottom:20px;text-align:center}@media (max-height: 500px){.lobby-room{min-width:unset;max-width:100%;width:100%;padding:8px;margin:0;max-height:100vh;overflow-y:auto}.lobby-room .lobby-header{display:none}.lobby-content{grid-template-columns:3fr 1fr;gap:10px;margin-bottom:8px}.players-panel{padding:8px}.players-panel h3{font-size:.9rem;margin-bottom:8px}.players-header{grid-template-columns:2fr 65px 100px 60px 45px;gap:4px;padding:4px 6px;font-size:10px}.player-row{grid-template-columns:2fr 65px 100px 60px 45px;gap:4px;padding:6px}.col-player{font-size:12px}.player-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.team-button,.team-label{min-width:48px;padding:4px 6px;font-size:9px}.playstyle-select,.slot-type-selector{font-size:10px;padding:2px 4px}.playstyle-label{font-size:9px}.ready-indicator{font-size:12px}.remove-button{width:22px;height:22px;font-size:14px}.game-settings{padding:8px}.game-settings h3{font-size:.85rem;margin-bottom:6px}.game-settings p{font-size:11px;margin:4px 0}.waiting-hint{text-align:center;margin-bottom:8px}.lobby-footer{padding:6px 0;margin-top:8px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:10px;align-items:start}.ready-button{width:100%;padding:8px 20px;font-size:14px;margin-bottom:0;height:40px;display:flex;align-items:center;justify-content:center;grid-row:1;grid-column:1}.host-controls{margin-top:0;width:100%;display:contents}.start-button{width:100%;padding:8px 25px;font-size:14px;height:40px;display:flex;align-items:center;justify-content:center;grid-row:1;grid-column:2;margin-top:0!important}.start-hint{grid-row:2;grid-column:1 / -1}.start-hint,.waiting-hint{font-size:10px;margin-top:4px}}.settings-button-lobby{background:#000000b3;border:2px solid rgba(255,255,255,.2);border-radius:50%;width:48px;height:48px;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(5px)}.settings-button-lobby:hover{background:#000000d9;border-color:#fff6;transform:scale(1.1) rotate(30deg);box-shadow:0 4px 12px #00000080}.settings-button-lobby:active{transform:scale(1.05) rotate(30deg)}.map-settings-section{margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}.map-settings-section h4{color:#e5e7eb;font-size:1.25rem;margin:0 0 20px;font-weight:600}.celebration-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,#141428f2,#000000fa);display:flex;justify-content:center;align-items:center;z-index:10001;animation:celebrationFadeIn .4s ease-out}@keyframes celebrationFadeIn{0%{opacity:0}to{opacity:1}}.celebration-particles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.celebration-content{position:relative;z-index:2;text-align:center;opacity:0;transform:scale(.8);transition:all .5s cubic-bezier(.34,1.56,.64,1)}.celebration-content.visible{opacity:1;transform:scale(1)}.celebration-title{font-size:48px;font-weight:700;color:gold;margin:0 0 40px;text-shadow:0 0 30px rgba(255,215,0,.5),0 4px 20px rgba(0,0,0,.5);animation:titlePulse 2s ease-in-out infinite}@keyframes titlePulse{0%,to{text-shadow:0 0 30px rgba(255,215,0,.5),0 4px 20px rgba(0,0,0,.5)}50%{text-shadow:0 0 50px rgba(255,215,0,.8),0 4px 20px rgba(0,0,0,.5)}}.celebration-unit{background:linear-gradient(145deg,#282846e6,#19192de6);border:2px solid rgba(255,215,0,.3);border-radius:20px;padding:40px;max-width:400px;margin:0 auto 30px;box-shadow:0 20px 60px #00000080,0 0 40px #ffd7001a}.celebration-icon-wrapper{position:relative;width:120px;height:120px;margin:0 auto 24px}.celebration-icon{width:100%;height:100%;background:linear-gradient(135deg,#2a2a4a,#1a1a2e);border-radius:20px;border:2px solid rgba(255,215,0,.4);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;overflow:hidden}.celebration-icon img{max-width:80px;max-height:80px;object-fit:contain;image-rendering:pixelated}.celebration-icon.minion-icon img{max-width:64px;max-height:64px}.celebration-glow{position:absolute;top:50%;left:50%;width:140%;height:140%;transform:translate(-50%,-50%);border-radius:50%;z-index:1;animation:glowPulse 2s ease-in-out infinite}.tower-glow{background:radial-gradient(circle,rgba(74,144,226,.4) 0%,transparent 70%)}.minion-glow{background:radial-gradient(circle,rgba(74,222,128,.4) 0%,transparent 70%)}@keyframes glowPulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.2);opacity:1}}.celebration-unit-name{font-size:28px;font-weight:700;color:#fff;margin:0 0 8px;text-shadow:0 2px 10px rgba(0,0,0,.5)}.celebration-tier{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:4px 12px;border-radius:4px;margin-bottom:12px}.celebration-tier.tier-cheap{background:#2a4a3a;color:#6ee7b7}.celebration-tier.tier-mid{background:#3a3a5a;color:#a5b4fc}.celebration-tier.tier-expensive{background:#4a3a2a;color:#fbbf24}.celebration-unit-description{font-size:14px;color:#999;margin:0 0 24px;line-height:1.5}.celebration-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:280px;margin:0 auto}.celebration-stat{background:#0000004d;border-radius:8px;padding:12px 8px;text-align:center}.celebration-stat .stat-value{display:block;font-size:20px;font-weight:700;color:#fff;margin-bottom:4px}.celebration-stat .stat-label{display:block;font-size:10px;color:#777;text-transform:uppercase;letter-spacing:.5px}.celebration-continue{padding:16px 48px;font-size:18px;font-weight:700;color:#000;background:linear-gradient(135deg,gold,#fa0);border:none;border-radius:10px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 20px #ffd70066;animation:buttonGlow 2s ease-in-out infinite}@keyframes buttonGlow{0%,to{box-shadow:0 4px 20px #ffd70066}50%{box-shadow:0 4px 30px #ffd70099}}.celebration-continue:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 30px #ffd70080}.celebration-continue:active{transform:translateY(0) scale(1)}@media (max-width: 600px){.celebration-title{font-size:32px;margin-bottom:24px}.celebration-unit{padding:24px;margin:0 16px 24px}.celebration-icon-wrapper{width:100px;height:100px}.celebration-icon img{max-width:64px;max-height:64px}.celebration-unit-name{font-size:24px}.celebration-stat .stat-value{font-size:18px}}.onboarding-progress{background:linear-gradient(145deg,#1e1e32f2,#141423f2);border:1px solid rgba(74,144,226,.3);border-radius:12px;padding:16px 20px;max-width:600px;width:100%;box-shadow:0 4px 20px #0006}.onboarding-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.progress-label{font-size:14px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:1px}.onboarding-progress .skip-button{background:transparent;border:1px solid rgba(255,255,255,.2);color:#888;padding:6px 14px;font-size:12px;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease}.onboarding-progress .skip-button:hover{background:#ffffff1a;border-color:#ffffff4d;color:#bbb}.progress-bar-container{position:relative;margin-bottom:12px}.progress-bar{height:6px;background:#ffffff1a;border-radius:3px;margin-bottom:8px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#4a90e2,#6bb5ff);border-radius:3px;transition:width .5s ease-out}.progress-milestones{display:flex;justify-content:space-between;position:relative}.milestone{display:flex;flex-direction:column;align-items:center;flex:1}.milestone-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;transition:all .3s ease;margin-bottom:4px}.milestone.past .milestone-dot{background:#4a90e2;color:#fff}.milestone.current .milestone-dot{background:#4ade80;color:#000;box-shadow:0 0 12px #4ade8080;animation:currentPulse 2s ease-in-out infinite}@keyframes currentPulse{0%,to{box-shadow:0 0 12px #4ade8080}50%{box-shadow:0 0 20px #4ade80cc}}.milestone.future .milestone-dot{background:#ffffff1a;color:#555;border:1px solid rgba(255,255,255,.2)}.milestone-label{font-size:9px;color:#666;text-align:center;white-space:nowrap;transition:color .3s ease}.milestone.past .milestone-label{color:#4a90e2}.milestone.current .milestone-label{color:#4ade80;font-weight:600}.progress-description{font-size:13px;color:#aaa;text-align:center;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.onboarding-progress-compact{position:fixed;top:12px;right:12px;display:flex;align-items:center;gap:12px;background:#141423e6;border:1px solid rgba(74,144,226,.3);border-radius:8px;padding:8px 12px;z-index:100}.compact-progress{display:flex;flex-direction:column;align-items:flex-start}.compact-label{font-size:10px;color:#666;text-transform:uppercase;letter-spacing:.5px}.compact-step{font-size:14px;font-weight:700;color:#4ade80}.compact-skip{background:transparent;border:1px solid rgba(255,255,255,.2);color:#777;padding:4px 10px;font-size:11px;border-radius:4px;cursor:pointer;transition:all .2s ease}.compact-skip:hover{background:#ffffff1a;color:#aaa}@media (max-width: 600px){.onboarding-progress{padding:12px 16px}.milestone-label{font-size:8px}.milestone-dot{width:20px;height:20px;font-size:10px}.progress-description{font-size:12px}}@media (max-width: 400px){.milestone-label{display:none}}.skip-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10002;animation:fadeIn .2s ease-out}.skip-dialog{background:linear-gradient(145deg,#252545,#1a1a2e);border:2px solid #4a4a6a;border-radius:16px;padding:32px;max-width:420px;width:90%;box-shadow:0 20px 60px #0009;animation:slideUp .3s ease-out}.skip-dialog h2{font-size:24px;color:#fff;margin:0 0 16px;text-align:center}.skip-dialog p{font-size:14px;color:#aaa;margin:0 0 16px;line-height:1.5}.skip-rewards{list-style:none;margin:0 0 16px;background:#0003;border-radius:8px;padding:16px 20px}.skip-rewards li{font-size:15px;color:#4ade80;padding:6px 0;display:flex;align-items:center}.skip-rewards li:before{content:"✓";margin-right:12px;font-weight:700}.skip-note{font-size:13px;color:#777;font-style:italic;margin-bottom:24px}.skip-dialog-actions{display:flex;gap:12px;justify-content:center}.skip-dialog-actions button{padding:12px 24px;font-size:14px;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.cancel-button{background:linear-gradient(135deg,#4a90e2,#357abd);color:#fff}.cancel-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #4a90e266}.confirm-button{background:transparent;color:#aaa;border:1px solid #4a4a6a!important}.confirm-button:hover{background:#ffffff0d;color:#fff}@media (max-width: 480px){.skip-dialog{padding:24px}.skip-dialog-actions{flex-direction:column}.skip-dialog-actions button{width:100%}}.onboarding-skirmish{width:100%;height:100vh;position:relative}.onboarding-skirmish-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0a0a1a);color:#fff}.onboarding-skirmish-loading h2{font-size:24px;margin-bottom:24px}.onboarding-skirmish-loading .loading-spinner{width:48px;height:48px;border:4px solid rgba(74,144,226,.3);border-top-color:#4a90e2;border-radius:50%;animation:spin 1s linear infinite}.onboarding-skirmish-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0a0a1a);color:#fff;padding:20px;text-align:center}.onboarding-skirmish-error h2{font-size:28px;color:#e74c3c;margin-bottom:16px}.onboarding-skirmish-error p{font-size:16px;color:#aaa;margin-bottom:24px}.onboarding-skirmish-error button{padding:12px 32px;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(135deg,#4a90e2,#357abd);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.onboarding-skirmish-error button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #4a90e266}.onboarding-flow{min-height:100vh;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0a0a1a);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;position:relative}.onboarding-progress-container{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:100;width:90%;max-width:600px}.onboarding-loading{text-align:center;color:#fff}.onboarding-loading h2{font-size:24px;margin-bottom:16px}.pre-skirmish-screen{text-align:center;max-width:500px;padding:40px;background:linear-gradient(145deg,#282846e6,#19192de6);border:2px solid rgba(74,144,226,.3);border-radius:20px;box-shadow:0 20px 60px #00000080;animation:slideUp .4s ease-out}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.pre-skirmish-screen h1{font-size:36px;color:#fff;margin:0 0 16px;text-shadow:0 2px 10px rgba(255,255,255,.2)}.pre-skirmish-screen p{font-size:16px;color:#aaa;margin:0 0 32px;line-height:1.5}.pre-skirmish-units{display:flex;gap:32px;justify-content:center;margin-bottom:32px}.unit-count{display:flex;flex-direction:column;align-items:center;background:#0000004d;padding:16px 24px;border-radius:12px}.unit-count .count{font-size:36px;font-weight:700;color:#4ade80}.unit-count .label{font-size:14px;color:#888;text-transform:uppercase;letter-spacing:1px}.start-skirmish-button{padding:16px 48px;font-size:18px;font-weight:700;color:#fff;background:linear-gradient(135deg,#4a90e2,#357abd);border:none;border-radius:10px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 20px #4a90e266;margin-bottom:16px}.start-skirmish-button:hover{transform:translateY(-3px);box-shadow:0 8px 30px #4a90e280;background:linear-gradient(135deg,#5aa0f2,#4580cd)}.start-skirmish-button:active{transform:translateY(0)}.skip-link{background:transparent;border:none;color:#666;font-size:14px;cursor:pointer;padding:8px 16px;transition:color .2s ease}.skip-link:hover{color:#999}.pre-skirmish-modal{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.pre-skirmish-content{text-align:center;max-width:500px;padding:40px;background:linear-gradient(145deg,#282846f2,#19192df2);border:2px solid rgba(74,144,226,.3);border-radius:20px;box-shadow:0 20px 60px #00000080;animation:slideUp .4s ease-out}.pre-skirmish-title{font-size:32px;color:#fff;margin:0 0 20px;text-shadow:0 2px 10px rgba(255,255,255,.2)}.pre-skirmish-message{font-size:16px;color:#ccc;margin:0 0 32px;line-height:1.6}.pre-skirmish-buttons{display:flex;flex-direction:column;gap:12px;align-items:center}.pre-skirmish-continue-btn{padding:16px 48px;font-size:18px;font-weight:700;color:#fff;background:linear-gradient(135deg,#4a90e2,#357abd);border:none;border-radius:10px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 20px #4a90e266;min-width:200px}.pre-skirmish-continue-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px #4a90e280;background:linear-gradient(135deg,#5aa0f2,#4580cd)}.pre-skirmish-continue-btn:active{transform:translateY(0)}.pre-skirmish-menu-btn{padding:12px 32px;font-size:14px;font-weight:500;color:#fff;background:linear-gradient(135deg,#c0392b,#a93226);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #c0392b4d;min-width:200px}.pre-skirmish-menu-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #c0392b66;background:linear-gradient(135deg,#d04437,#b93d30)}.pre-skirmish-menu-btn:active{transform:translateY(0)}@media (max-width: 600px){.pre-skirmish-screen{padding:24px;margin:0 16px}.pre-skirmish-screen h1{font-size:28px}.pre-skirmish-units{gap:16px}.unit-count .count{font-size:28px}.start-skirmish-button{padding:14px 32px;font-size:16px}.pre-skirmish-content{padding:24px;margin:0 16px}.pre-skirmish-title{font-size:24px}.pre-skirmish-continue-btn,.pre-skirmish-menu-btn{min-width:180px}}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.login-card{background:#fffffff2;border-radius:12px;padding:40px;box-shadow:0 20px 60px #0000004d;max-width:400px;width:100%;text-align:center}.login-card h1{margin:0 0 8px;font-size:32px;color:#333;font-weight:700}.login-card .subtitle{color:#666;margin:0 0 32px;font-size:14px}.login-card .step-title{color:#333;margin:0 0 16px;font-size:16px;font-weight:500}.login-card .email-display{color:#667eea;margin:0 0 20px;font-size:14px;font-weight:600}.login-card .form-group{margin-bottom:20px}.login-card .auth-input{width:100%;padding:12px 16px;font-size:16px;border:2px solid #e0e0e0;border-radius:8px;transition:border-color .2s;box-sizing:border-box}.login-card .code-input{text-align:center;font-size:24px;letter-spacing:8px;font-weight:600}.login-card .auth-input:focus{outline:none;border-color:#667eea}.login-card .auth-input:disabled{background:#f5f5f5;cursor:not-allowed}.login-card .error-message{color:#e53e3e;font-size:14px;margin-bottom:16px;padding:8px;background:#fed7d7;border-radius:4px}.login-card .login-button{width:100%;padding:12px 24px;font-size:16px;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;cursor:pointer;transition:transform .2s,opacity .2s}.login-card .login-button:hover:not(:disabled){transform:translateY(-2px)}.login-card .login-button:disabled{opacity:.6;cursor:not-allowed}.login-card .back-button{width:100%;margin-top:12px;padding:10px 24px;font-size:14px;font-weight:500;color:#667eea;background:#fff;border:2px solid #667eea;border-radius:8px;cursor:pointer;transition:all .2s}.login-card .back-button:hover{background:#f7f7f7}.login-card .info-text-small{color:#666;margin:0 0 20px;font-size:13px}.homepage{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0a0a1a);position:relative;overflow:hidden}.homepage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(74,144,226,.1) 0%,transparent 40%),radial-gradient(circle at 80% 70%,rgba(168,85,247,.1) 0%,transparent 40%);animation:backgroundPulse 8s ease-in-out infinite}@keyframes backgroundPulse{0%,to{opacity:.5}50%{opacity:1}}.homepage-loading{display:flex;align-items:center;justify-content:center}.homepage-loading .loading-spinner{width:48px;height:48px;border:4px solid rgba(74,144,226,.3);border-top-color:#4a90e2;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.homepage-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px}.homepage-logo{margin-bottom:40px}.homepage-title{font-size:72px;font-weight:700;color:#fff;margin:0;text-shadow:0 0 20px rgba(74,144,226,.5),0 4px 20px rgba(0,0,0,.5);letter-spacing:4px}.homepage-subtitle{font-size:18px;color:#88a;margin:12px 0 0;letter-spacing:2px;text-transform:uppercase}.homepage-player-info{display:flex;align-items:center;gap:12px;margin-bottom:32px;padding:12px 24px;background:#ffffff0d;border-radius:50px;border:1px solid rgba(255,255,255,.1)}.homepage-player-level{font-size:18px;color:#ccc;font-weight:500}.homepage-play-button{display:flex;align-items:center;justify-content:center;gap:16px;padding:24px 64px;font-size:32px;font-weight:700;color:#fff;background:linear-gradient(135deg,#4a90e2,#357abd);border:none;border-radius:16px;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 32px #4a90e266,inset 0 1px #fff3;text-transform:uppercase;letter-spacing:4px}.homepage-play-button:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 48px #4a90e280,inset 0 1px #fff3}.homepage-play-button:active{transform:translateY(-2px) scale(1.01)}.play-icon{font-size:28px}.homepage-hint{margin-top:24px;font-size:14px;color:#666;max-width:300px}@media (max-width: 600px){.homepage-title{font-size:48px;letter-spacing:2px}.homepage-subtitle{font-size:14px}.homepage-play-button{padding:20px 48px;font-size:24px;letter-spacing:2px}.homepage-content{padding:20px}}.menu-guard-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:10000;animation:fadeIn .3s ease-out}.menu-guard-dialog{background:linear-gradient(145deg,#252545,#1a1a2e);border:2px solid #4a4a6a;border-radius:16px;padding:32px 40px;max-width:480px;width:90%;text-align:center;box-shadow:0 20px 60px #0009;animation:slideUp .3s ease-out}.menu-guard-dialog h2{font-size:28px;color:#fff;margin:0 0 16px}.menu-guard-dialog p{font-size:16px;color:#aaa;margin:0 0 24px;line-height:1.5}.menu-guard-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.menu-guard-actions button{padding:14px 24px;font-size:16px;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.menu-guard-continue{background:linear-gradient(135deg,#4a90e2,#357abd);color:#fff}.menu-guard-continue:hover{transform:translateY(-2px);box-shadow:0 4px 15px #4a90e266}.menu-guard-skip{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}.menu-guard-skip:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #22c55e66}.menu-guard-skip:disabled{opacity:.6;cursor:not-allowed}.menu-guard-view{background:transparent;color:#888;border:1px solid #4a4a6a}.menu-guard-view:hover{background:#ffffff0d;color:#ccc}.menu-guard-note{font-size:13px;color:#666;font-style:italic;margin:0}@media (max-width: 480px){.menu-guard-dialog{padding:24px}.menu-guard-dialog h2{font-size:24px}.menu-guard-actions button{padding:12px 20px;font-size:14px}}.registration-modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.registration-modal{background:#fff;border-radius:12px;padding:40px;max-width:450px;width:90%;position:relative;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.registration-modal .close-button{position:absolute;top:15px;right:15px;background:none;border:none;font-size:32px;color:#999;cursor:pointer;line-height:1;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s}.registration-modal .close-button:hover{color:#333}.registration-modal h2{margin:0 0 8px;font-size:28px;color:#333;font-weight:700}.modal-subtitle{color:#666;margin:0 0 30px;font-size:14px}.step-description{color:#333;margin:0 0 20px;font-size:16px;font-weight:500}.email-display{color:#667eea;margin:0 0 20px;font-size:14px;font-weight:600;text-align:center}.form-group{margin-bottom:20px}.modal-input{width:100%;padding:12px 16px;font-size:16px;border:2px solid #e0e0e0;border-radius:8px;transition:border-color .2s;box-sizing:border-box}.modal-input:focus{outline:none;border-color:#667eea}.modal-input:disabled{background:#f5f5f5;cursor:not-allowed}.code-input{text-align:center;font-size:24px;letter-spacing:8px;font-weight:600}.modal-error{color:#e53e3e;font-size:14px;margin-bottom:16px;padding:8px;background:#fed7d7;border-radius:4px}.modal-button{width:100%;padding:12px 24px;font-size:16px;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;cursor:pointer;transition:transform .2s,opacity .2s}.modal-button:hover:not(:disabled){transform:translateY(-2px)}.modal-button:disabled{opacity:.6;cursor:not-allowed}.modal-back-button{width:100%;margin-top:12px;padding:10px 24px;font-size:14px;font-weight:500;color:#667eea;background:#fff;border:2px solid #667eea;border-radius:8px;cursor:pointer;transition:all .2s}.modal-back-button:hover{background:#f7f7f7}.success-message{text-align:center;padding:20px 0}.success-icon{width:80px;height:80px;margin:0 auto 20px;background:#48bb78;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:700;animation:scaleIn .5s ease-out}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.success-message h3{color:#333;margin:0 0 16px;font-size:24px}.success-message p{color:#666;margin:0 0 8px;font-size:14px}.success-message .modal-button{margin-top:24px}.xp-display{padding:8px 16px;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;border-radius:4px;font-weight:700;font-size:16px;text-shadow:1px 1px 2px rgba(0,0,0,.3);box-shadow:0 2px 8px #fbbf244d}.mazing-test-container{position:relative;width:100vw;height:100vh;overflow:hidden;background:#1a1a2e}.mazing-test-canvas{width:100%;height:100%}.mazing-test-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:20px;padding:15px 20px;background:linear-gradient(180deg,#000c,#0000);pointer-events:none}.mazing-test-header h1{margin:0;color:#fff;font-size:24px;font-weight:600}.back-button{pointer-events:auto;padding:8px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:14px;cursor:pointer;transition:all .2s ease}.back-button:hover{background:#fff3}.mazing-test-controls{position:absolute;top:70px;right:20px;width:280px;background:#000000d9;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.control-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}.control-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.control-section h3{margin:0 0 8px;font-size:14px;font-weight:600;color:orange;text-transform:uppercase;letter-spacing:.5px}.pattern-description{margin:0;font-size:12px;color:#ffffffb3;line-height:1.4}.stats{display:flex;flex-direction:column;gap:6px}.stat{display:flex;justify-content:space-between;font-size:13px}.stat-label{color:#ffffffb3}.stat-value{color:#fff;font-weight:600}.next-position{font-size:20px;font-weight:700;color:#0f0;font-family:Monaco,Consolas,monospace}.maze-complete{font-size:16px;font-weight:600;color:orange}.control-section.buttons{display:flex;flex-wrap:wrap;gap:8px}.control-button{flex:1 1 calc(50% - 4px);padding:10px 12px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.control-button:hover:not(:disabled){background:#fff3;transform:translateY(-1px)}.control-button:disabled{opacity:.4;cursor:not-allowed}.control-button.primary{flex:1 1 100%;background:linear-gradient(180deg,#4caf50,#388e3c);border-color:#4caf50;font-size:15px;font-weight:600}.control-button.primary:hover:not(:disabled){background:linear-gradient(180deg,#5cc760,#43a047)}.control-button.secondary{background:linear-gradient(180deg,#ff9800,#f57c00);border-color:#ff9800}.control-button.secondary:hover{background:linear-gradient(180deg,#ffb74d,#ff9800)}.control-button.danger{background:linear-gradient(180deg,#f44336,#c62828);border-color:#f44336}.control-button.danger:hover{background:linear-gradient(180deg,#ef5350,#e53935)}.legend{display:flex;flex-direction:column;gap:8px}.legend-item{display:flex;align-items:center;gap:10px;font-size:12px}.legend-color{width:20px;height:20px;border-radius:4px;border:1px solid rgba(255,255,255,.2)}.control-button.active{background:linear-gradient(180deg,#2196f3,#1976d2);border-color:#2196f3}.control-button.active:hover{background:linear-gradient(180deg,#42a5f5,#2196f3)}.placement-mode-buttons{display:flex;gap:8px}.placement-mode-buttons .control-button{flex:1}.controls-help{font-size:12px;color:#ffffffb3;line-height:1.6}.controls-help p{margin:0 0 4px}.controls-help p:last-child{margin-bottom:0}.app{min-height:100vh;background:linear-gradient(135deg,#1e3c72,#2a5298);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px}.game-loading-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:9999}.game-loading-overlay .loading-content{text-align:center;color:#fff}.game-loading-overlay h2{font-size:32px;margin-bottom:10px}.game-loading-overlay p{font-size:16px;opacity:.8}.title{font-size:48px;font-weight:700;color:#fff;margin-bottom:40px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.wallet-connect{background:#fff;padding:40px;border-radius:12px;box-shadow:0 10px 30px #0003;text-align:center}.wallet-connect h2{margin-bottom:20px;color:#333}.connect-button{background:#4a9eff;color:#fff;border:none;padding:15px 30px;font-size:18px;border-radius:8px;cursor:pointer;transition:background .3s}.connect-button:hover:not(:disabled){background:#2563eb}.connect-button:disabled{background:#ccc;cursor:not-allowed}.wallet-info{background:#fff;padding:20px;border-radius:12px;box-shadow:0 5px 15px #0000001a;position:fixed;top:20px;right:20px}.address{font-family:monospace;color:#666;margin-bottom:10px}.disconnect-button{background:#ef4444;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;transition:background .3s}.disconnect-button:hover{background:#dc2626}.upgrade-button{background:#4a9eff;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;transition:background .3s}.upgrade-button:hover{background:#2563eb}.switch-network-button{background:#ff9800;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;transition:background .3s;margin-right:10px}.switch-network-button:hover{background:#f57c00}.initializing{text-align:center;padding:40px}.initializing h2{color:#60a5fa;margin:0 0 10px;font-size:28px}.initializing p{color:#9ca3af;margin:0;font-size:16px}.games-list{background:#000000b3;padding:30px;border-radius:16px;box-shadow:0 15px 40px #00000080;min-width:600px;max-width:800px;border:1px solid rgba(255,255,255,.1)}.games-list h2{color:#e5e7eb;margin-bottom:20px}.app-header{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px 40px;background:#ffffff1a;backdrop-filter:blur(10px)}.server-status-center{display:flex;justify-content:center;align-items:center}.app-header .title{margin:0;font-size:32px;transition:transform .2s,text-shadow .2s}.app-header .title:hover{transform:scale(1.05);text-shadow:2px 2px 8px rgba(0,0,0,.5)}.user-info{display:flex;align-items:center;justify-content:flex-end;gap:20px;color:#fff;font-size:16px}.register-button{padding:8px 16px;background:#48bb78;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:background .3s}.register-button:hover{background:#38a169}.logout-button{padding:8px 16px;background:#e53e3e;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:background .3s}.logout-button:hover{background:#c53030}.guest-badge{color:#fbbf24;font-size:14px;font-weight:600}@media (max-height: 500px){body:has(.lobby-room) .app-header{display:none}body:has(.main-menu) .app-header{display:none}}.connecting-message,.loading-message{color:#fff;font-size:1.5rem;text-align:center;padding:2rem;background:#ffffff1a;border-radius:12px;animation:pulse 1.5s infinite}.server-error-banner{position:fixed;top:0;left:0;right:0;background:#ef4444f2;color:#fff;padding:12px 20px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:16px;z-index:1000;box-shadow:0 2px 10px #0000004d;animation:slideDown .3s ease-out}.server-error-banner .error-icon{font-size:20px}.server-error-banner .error-message{display:flex;align-items:center;gap:8px}.server-error-banner .status-link{color:#fff;font-weight:600;text-decoration:underline;margin-left:4px;transition:opacity .2s}.server-error-banner .status-link:hover{opacity:.8}.connecting-banner{position:fixed;top:0;left:0;right:0;background:#3b82f6f2;color:#fff;padding:8px 20px;display:flex;align-items:center;justify-content:center;font-size:14px;z-index:1000;animation:slideDown .3s ease-out}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.level-loader{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0f0f23,#1a1a2e,#0f3460)}.level-loader-content,.level-loader-error{text-align:center;padding:40px;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:12px;max-width:500px}.level-loader-content p{font-size:18px;color:#ccc;margin:20px 0 0}.level-loader-error h2{color:#ef4444;margin:0 0 12px}.level-loader-error p{font-size:16px;color:#aaa;margin:12px 0 24px}.level-loader-error .back-button{padding:12px 24px;font-size:16px;font-weight:600;color:#fff;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;transition:all .3s ease}.level-loader-error .back-button:hover{background:#ffffff26;border-color:#ffffff4d}*{margin:0;padding:0;box-sizing:border-box}.app{width:100%;height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#0a0a0a,#1a1a2e);color:#fff}.app-header{padding:20px;text-align:center;border-bottom:1px solid rgba(255,255,255,.1)}.app-header h1{font-size:2.5rem;margin-bottom:8px;background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-header p{color:#9ca3af;font-size:1.1rem}.connect-button{margin-top:20px;padding:12px 24px;font-size:1rem;background:linear-gradient(90deg,#60a5fa,#a78bfa);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:transform .2s,box-shadow .2s}.connect-button:hover{transform:translateY(-2px);box-shadow:0 8px 16px #60a5fa4d}.connected-status{margin-top:20px;color:#10b981}.app-main{flex:1;display:flex;justify-content:center;align-items:center;padding:20px}.wallet-connect,.wallet-connected{display:flex;align-items:center;gap:12px}.wallet-connected .address{color:#10b981;font-family:monospace;font-size:.9rem}.disconnect-button{padding:8px 16px;background:#ef444433;color:#ef4444;border:1px solid #ef4444;border-radius:6px;cursor:pointer;transition:all .2s}.disconnect-button:hover{background:#ef44444d}.upgrade-button{padding:8px 16px;background:#4a9eff33;color:#4a9eff;border:1px solid #4a9eff;border-radius:6px;cursor:pointer;transition:all .2s}.upgrade-button:hover{background:#4a9eff4d}.create-lobby,.join-lobby{padding:20px;background:#ffffff05;border-radius:8px;border:1px solid rgba(255,255,255,.05)}.divider{display:flex;align-items:center;color:#4b5563;font-weight:700}.match-input{width:100%;padding:10px;margin:10px 0;background:#00000080;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-family:monospace}.team-select{display:flex;gap:20px;margin:15px 0}.team-select label{display:flex;align-items:center;gap:8px;cursor:pointer}.create-button,.join-button{width:100%;padding:12px;margin-top:15px;background:linear-gradient(90deg,#60a5fa,#a78bfa);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .2s}.create-button:hover,.join-button:hover{transform:translateY(-2px);box-shadow:0 8px 16px #60a5fa4d}.create-button:disabled,.join-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.teams{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:30px 0}.team{padding:20px;background:#ffffff05;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.team-a{border-color:#60a5fa}.team-b{border-color:#f87171}.team h3{margin-bottom:15px;color:#e5e7eb}.player-list{display:flex;flex-direction:column;gap:8px}.player{padding:8px 12px;background:#ffffff0d;border-radius:4px;font-family:monospace;font-size:.9rem}.no-players{color:#6b7280;font-style:italic}.match-info{margin:20px 0;padding:15px;background:#00000080;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.match-info code{color:#60a5fa;font-family:monospace;font-size:.85rem}.connect-prompt{text-align:center;color:#9ca3af}.connect-prompt h2{color:#e5e7eb;margin-bottom:15px}.back-button{margin-top:20px;padding:10px 20px;background:#ffffff1a;color:#9ca3af;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s}.back-button:hover{background:#ffffff26;color:#e5e7eb}