body{font-family:Inter,Segoe UI,sans-serif;background-color:#0a0a14;color:#fff}.app{width:100%;height:100vh;position:relative;background-color:#0a0a14;overflow:hidden;font-family:Inter,Segoe UI,sans-serif}.auth-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#000c;padding:2rem}.auth-container h1{font-size:3rem;margin-bottom:2rem;color:#4caf50;text-shadow:0 0 10px rgba(76,175,80,.5)}.auth-form{width:100%;max-width:400px;background-color:#1e1e1e;border-radius:8px;padding:2rem;box-shadow:0 0 20px #00000080}.auth-form h2{margin-bottom:1rem;color:#4caf50}.auth-form form{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.auth-form input{padding:.75rem;border-radius:4px;border:1px solid #333;background-color:#2a2a2a;color:#fff;font-size:1rem}.auth-form button,.offline-mode-notice button,.guest-option button{padding:.75rem 1.5rem;border:none;border-radius:4px;background-color:#4caf50;color:#fff;font-size:1rem;cursor:pointer;transition:background-color .3s}.auth-form button:hover,.offline-mode-notice button:hover,.guest-option button:hover{background-color:#3e8e41}.offline-mode-notice{text-align:center;padding:1rem}.offline-mode-notice p{margin-bottom:1rem;color:#ff9800}.guest-option{text-align:center;margin-top:1rem}.game-container{width:100%;height:100%;position:relative;top:0;left:0;z-index:0}.game-ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100}.top-bar{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,#6200ffb3,#f600ff33);border-bottom:2px solid #f700ff;box-shadow:0 0 15px #f600ff80;padding:.5rem 1rem;width:100%;pointer-events:auto}.resources{font-size:1.2rem;font-weight:700;color:#00f9ff;text-shadow:0 0 8px rgba(0,249,255,.8)}.player{font-size:1.2rem;text-shadow:0 0 8px #f700ff}.offline-badge{background-color:#f0a;color:#0ff;padding:.25rem .5rem;border-radius:4px;font-size:.8rem;font-weight:700;box-shadow:0 0 10px #ff00aa80}.menu-button{padding:.5rem 1rem;border:none;border-radius:4px;background:linear-gradient(135deg,#6200ff,#f0a);color:#fff;text-shadow:0 0 5px rgba(255,255,255,.8);cursor:pointer;box-shadow:0 0 10px #f600ff80;transition:all .2s ease}.menu-button:hover{transform:translateY(-2px);box-shadow:0 0 15px #f600ffcc}.controls-info{position:absolute;bottom:1rem;left:1rem;background:#0009;border:1px solid #00f9ff;box-shadow:0 0 15px #00f9ff80;padding:1rem;border-radius:4px;font-size:.9rem;pointer-events:auto}.controls-info div{margin-bottom:.5rem;color:#00f9ff;text-shadow:0 0 5px rgba(0,249,255,.8)}.building-buttons{position:relative;display:flex;flex-direction:column;gap:.5rem;pointer-events:auto}.building-buttons button{padding:.75rem 1rem;border:none;border-radius:4px;background:linear-gradient(135deg,#306,#606);border:1px solid #9900ff;color:#fff;cursor:pointer;transition:all .3s;font-weight:700;box-shadow:0 0 10px #9900ff80}.building-buttons button:hover{background:linear-gradient(135deg,#408,#808);transform:translateY(-2px);box-shadow:0 0 15px #90fc}.building-buttons button.selected{background:linear-gradient(135deg,#0cf,#06f);border:1px solid #00f9ff;box-shadow:0 0 15px #00f9ffcc}.building-icon{font-size:22px;margin-bottom:3px;color:#fff;text-shadow:0 0 5px rgba(255,255,255,.8)}.building-name{font-size:12px;text-align:center;width:100%;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;text-shadow:0 0 5px rgba(255,255,255,.8)}.building-cost{font-size:11px;color:#00f9ff;text-shadow:0 0 5px rgba(0,249,255,.8);background-color:#0006;padding:2px 6px;border-radius:10px}.selection-panel{position:absolute;left:10px;top:10px;background-color:#000000b3;color:#fff;border-radius:4px;width:auto;min-width:180px;max-width:250px;padding:8px;z-index:100}.selection-panel .selection-count{font-size:14px;font-weight:700;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.3)}.selection-panel .selection-types{display:flex;flex-direction:column;gap:4px}.selection-panel .unit-type{display:flex;align-items:center;padding:4px 6px;background-color:#32323266;border-radius:3px}.selection-panel .unit-icon{width:20px;font-size:16px;text-align:center;margin-right:6px}.selection-panel .unit-count{display:flex;align-items:center;justify-content:center;background-color:#333;color:#fff;width:20px;height:20px;border-radius:50%;margin-right:8px;font-size:12px}.selection-panel .unit-name{flex-grow:1;font-size:13px}.selection-panel .no-selection{text-align:center;font-style:italic;opacity:.7;padding:4px 0;font-size:12px}.tab-navigation{display:flex;margin-bottom:15px}.minimap-container{width:100%;height:180px;background-color:#000;border:2px solid rgba(255,255,255,.3);border-radius:4px;margin-bottom:15px;position:relative;overflow:hidden}.minimap-canvas{width:100%;height:100%;image-rendering:pixelated}.minimap-frame{position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid rgba(255,255,255,.5);pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);background-size:10% 10%;box-shadow:inset 0 0 15px #000c}.minimap-viewport{position:absolute;border:2px solid rgba(255,255,0,.8);pointer-events:none;z-index:2}.minimap-title{position:absolute;top:5px;left:10px;font-size:12px;color:#fffc;text-shadow:1px 1px 2px rgba(0,0,0,.8);z-index:3;pointer-events:none}.resource-display{background-color:#000000b3;padding:10px;margin-bottom:15px;border-radius:4px;text-align:center;font-size:1.2rem;font-weight:700;color:gold;border:1px solid rgba(255,215,0,.3);box-shadow:0 0 10px #ffd70033}.enemy-resources{margin-top:5px;font-size:1rem;color:#f55;border-top:1px solid rgba(255,85,85,.3);padding-top:5px}.tab-button{flex:1;background-color:#282828e6;border:1px solid rgba(255,255,255,.2);border-bottom:none;color:#fff;padding:8px 12px;cursor:pointer;font-weight:700;transition:all .2s;border-top-left-radius:4px;border-top-right-radius:4px}.tab-button:hover{background-color:#3c3c3ce6}.tab-button.active{background-color:#0064c8cc;border-color:#ffffff80}.unit-menu{padding:0 5px}.unit-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.unit-buttons button{background:linear-gradient(135deg,#306,#606);border:1px solid #ff00aa;box-shadow:0 0 10px #ff00aa80;color:#fff;padding:12px 10px;display:flex;flex-direction:column;align-items:center;border-radius:4px;cursor:pointer;transition:all .3s;margin-bottom:8px;position:relative;overflow:hidden}.unit-buttons button:hover:not(:disabled){background:linear-gradient(135deg,#408,#808);transform:translateY(-2px);box-shadow:0 0 15px #f0ac}.unit-buttons button:disabled{opacity:.5;cursor:not-allowed}.unit-locked{font-size:10px;color:#f0a;text-shadow:0 0 5px rgba(255,0,170,.8);background-color:#0006;padding:2px 6px;border-radius:10px;text-align:center}.unit-icon{font-size:22px;margin-bottom:3px;color:#fff;text-shadow:0 0 5px rgba(255,255,255,.8)}.unit-name{font-size:12px;text-align:center;width:100%;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;text-shadow:0 0 5px rgba(255,255,255,.8)}.unit-cost{font-size:11px;color:#00f9ff;text-shadow:0 0 5px rgba(0,249,255,.8);background-color:#0006;padding:2px 6px;border-radius:10px}.unit-training-queue{margin-top:10px;background-color:#1a0033b3;border:1px solid #9900ff;box-shadow:0 0 10px #9900ff80;border-radius:4px;padding:8px}.unit-training-queue h4{font-size:14px;margin:0 0 8px;color:#00f9ff;text-shadow:0 0 5px rgba(0,249,255,.8)}.queue-item{display:flex;justify-content:space-between;align-items:center;background-color:#ffffff1a;padding:5px 8px;border-radius:4px;margin-bottom:5px;border:1px solid rgba(153,0,255,.3)}.queue-item-info{display:flex;align-items:center;gap:8px}.queue-item-progress{height:6px;background-color:#00000080;border-radius:3px;overflow:hidden;flex-grow:1}.queue-item-progress-bar{height:100%;background:linear-gradient(90deg,#90f,#f0a);box-shadow:0 0 5px #f0ac}.queue-cancel-button{background-color:#f0a;color:#fff;border:none;border-radius:4px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;box-shadow:0 0 5px #f0ac}.training-progress-container{position:absolute;bottom:0;left:0;width:100%;height:4px;background-color:#00000080}.training-progress-bar{height:100%;background:linear-gradient(90deg,#00f9ff,#09f);box-shadow:0 0 5px #00f9ffcc;transition:width .1s linear}.unit-buttons button.in-progress{border-color:#00f9ff;box-shadow:0 0 15px #00f9ffcc}.main-menu-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0a0a14d9;display:flex;justify-content:center;align-items:center;z-index:2500;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.main-menu-container{width:400px;padding:30px;background:linear-gradient(135deg,#1a0033e6,#330066e6);border-radius:8px;border:1px solid #ff00aa;box-shadow:0 0 25px #ff00aa80;text-align:center}.main-menu-container h1{color:#fff;font-size:32px;margin-bottom:30px;text-shadow:0 0 10px rgba(0,249,255,.8);letter-spacing:2px}.menu-buttons{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}.menu-start-button,.menu-settings-button{padding:12px 20px;font-size:18px;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease-in-out;font-weight:500;outline:none}.menu-start-button{background:linear-gradient(90deg,#90f,#f0a);color:#fff;text-shadow:0 0 5px rgba(255,255,255,.8);box-shadow:0 0 15px #9900ff80}.menu-start-button:hover{transform:translateY(-2px);box-shadow:0 0 20px #90fc}.menu-settings-button{background:linear-gradient(90deg,#306,#606);color:#fff;text-shadow:0 0 5px rgba(255,255,255,.8);box-shadow:0 0 10px #66006680}.menu-settings-button:hover{transform:translateY(-2px);box-shadow:0 0 15px #606c}.settings-panel{margin-top:20px;background-color:#1a0033cc;padding:15px;border-radius:6px;border:1px solid #9900ff;box-shadow:0 0 10px #9900ff80}.settings-panel h2{font-size:20px;color:#fff;margin-bottom:15px}.settings-panel p{color:#aaa;margin-bottom:15px;font-style:italic}.settings-panel button{background-color:#555;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;transition:background-color .2s}.settings-panel button:hover{background-color:#666}.map-selection-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:2000}.map-selection-container{background-color:#282828f2;border:2px solid rgba(100,100,100,.5);border-radius:8px;padding:30px;width:80%;max-width:900px;color:#fff;box-shadow:0 0 20px #00000080}.map-selection-container h1{text-align:center;margin-bottom:25px;font-size:28px;color:#4caf50;text-shadow:0 0 10px rgba(76,175,80,.3);border-bottom:1px solid rgba(76,175,80,.3);padding-bottom:15px}.map-selection-options{display:flex;flex-direction:column;gap:30px;margin-bottom:30px}.map-type-selection h2,.map-size-selection h2{margin-bottom:15px;font-size:20px;color:#e0e0e0}.map-type-options,.map-size-options{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.map-type-option,.map-size-option{cursor:pointer;border:2px solid rgba(80,80,80,.8);border-radius:6px;padding:8px;width:140px;text-align:center;transition:all .2s ease;background-color:#3c3c3c99}.map-type-option:hover,.map-size-option:hover{background-color:#505050cc;transform:translateY(-3px)}.map-type-option.selected,.map-size-option.selected{background-color:#4caf5033;border-color:#4caf50cc;box-shadow:0 0 10px #4caf5080}.map-type-preview,.map-size-preview{height:80px;border-radius:4px;margin-bottom:8px;background-size:cover;background-position:center}.map-type-preview.grassland{background-image:linear-gradient(to bottom right,#4caf50,#8bc34a)}.map-type-preview.desert{background-image:linear-gradient(to bottom right,#ffc107,#ff9800)}.map-type-preview.mountains{background-image:linear-gradient(to bottom right,#607d8b,#455a64)}.map-type-preview.arctic{background-image:linear-gradient(to bottom right,#b3e5fc,#e1f5fe)}.map-size-preview.small{background-image:url("data:image/svg+xml,%3Csvg width='140' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='140' height='80' fill='%23424242'/%3E%3Ccircle cx='35' cy='40' r='5' fill='%234CAF50'/%3E%3Ccircle cx='105' cy='40' r='5' fill='%23F44336'/%3E%3C/svg%3E")}.map-size-preview.medium{background-image:url("data:image/svg+xml,%3Csvg width='140' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='140' height='80' fill='%23424242'/%3E%3Ccircle cx='35' cy='20' r='4' fill='%234CAF50'/%3E%3Ccircle cx='105' cy='20' r='4' fill='%23F44336'/%3E%3Ccircle cx='35' cy='60' r='4' fill='%232196F3'/%3E%3Ccircle cx='105' cy='60' r='4' fill='%23FF9800'/%3E%3C/svg%3E")}.map-size-preview.large{background-image:url("data:image/svg+xml,%3Csvg width='140' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='140' height='80' fill='%23424242'/%3E%3Ccircle cx='26' cy='20' r='3' fill='%234CAF50'/%3E%3Ccircle cx='70' cy='20' r='3' fill='%23F44336'/%3E%3Ccircle cx='114' cy='20' r='3' fill='%232196F3'/%3E%3Ccircle cx='26' cy='40' r='3' fill='%23FF9800'/%3E%3Ccircle cx='70' cy='40' r='3' fill='%239C27B0'/%3E%3Ccircle cx='114' cy='40' r='3' fill='%23FFEB3B'/%3E%3Ccircle cx='26' cy='60' r='3' fill='%23795548'/%3E%3Ccircle cx='70' cy='60' r='3' fill='%23607D8B'/%3E%3Ccircle cx='114' cy='60' r='3' fill='%23E91E63'/%3E%3C/svg%3E")}.map-type-name,.map-size-name{font-weight:700;margin-top:5px}.map-size-info{font-size:12px;color:#aaa;margin-top:3px}.map-selection-actions{display:flex;justify-content:space-between;margin-top:30px}.map-selection-cancel,.map-selection-start{padding:10px 24px;font-size:16px;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;font-weight:700}.map-selection-cancel{background-color:#505050cc;color:#fff}.map-selection-cancel:hover{background-color:#787878cc}.map-selection-start{background-color:#4caf50;color:#fff}.map-selection-start:hover{background-color:#45a049;transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.right-panel{position:absolute;top:20px;right:20px;width:300px;background-color:#000000d9;border-radius:6px;padding:15px;color:#fff;z-index:110;pointer-events:auto}.building-menu h3{text-align:center;font-size:20px;margin-bottom:15px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.3)}.building-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.building-buttons button{background-color:#282828e6;border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;border-radius:4px;transition:all .2s;height:70px;justify-content:space-between}.building-buttons button:hover:not(:disabled){background-color:#3c3c3ce6;transform:translateY(-2px)}.building-buttons button:disabled{opacity:.5;cursor:not-allowed}.building-buttons button.selected{background-color:#0064c8e6;border-color:#fffc}.building-icon{font-size:22px;margin-bottom:3px}.building-name{font-size:12px;text-align:center;width:100%;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.building-cost{font-size:11px;color:#fc0;background-color:#0000004d;padding:2px 6px;border-radius:10px}.building-placement-controls{margin-top:10px;padding:10px;background-color:#0064c866;border-radius:4px;text-align:center}.building-placement-controls p{margin:0 0 8px;font-size:14px}.building-placement-controls button{background-color:#c33;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-weight:700}.selection-indicator{position:absolute;top:60px;left:20px;background-color:#000000b3;border-radius:5px;padding:10px;color:#fff;font-size:14px;min-width:160px;z-index:120;box-shadow:0 2px 10px #00000080;border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto}.selection-indicator .no-selection{color:#999;font-style:italic}.selection-indicator .selection-count{margin-bottom:5px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:5px}.selection-indicator .selection-types{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.selection-indicator .unit-type{display:flex;align-items:center;background-color:#ffffff1a;padding:5px 8px;border-radius:4px;margin-right:5px;font-size:14px}.selection-indicator .unit-icon{margin-right:4px;font-size:16px}.selection-indicator .unit-count{font-weight:700;margin-right:6px}.selection-indicator .unit-name{opacity:.9}.selection-indicator .infantry,.selection-indicator .basic-soldier{color:#8cd9ff;border-left:3px solid #66b8ff}.selection-indicator .heavy-trooper{color:#a3d2ff;border-left:3px solid #7b9ae8}.selection-indicator .tank,.selection-indicator .main-battle-tank{color:#ffcb47;border-left:3px solid #ffa726}.selection-indicator .light-recon{color:#ffe066;border-left:3px solid #ffd54f}.selection-indicator .artillery{color:#f96;border-left:3px solid #ff7043}.selection-indicator .mech{color:#ff6b6b;border-left:3px solid #e53935}.selection-indicator .harvester{color:#80deea;border-left:3px solid #26c6da}.selection-indicator .engineer{color:#aed581;border-left:3px solid #7cb342}.unit-selection-circle{position:absolute;border:2px solid #4CAF50;border-radius:50%;pointer-events:none;z-index:105}.health-bar-container{position:absolute;width:30px;height:4px;background-color:red;border-radius:2px;overflow:hidden;z-index:105}.health-bar{height:100%;background-color:#0f0}.building-preview{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background-color:#000c;color:#fff;padding:12px 20px;border-radius:20px;font-size:16px;z-index:115;display:flex;align-items:center;gap:15px;box-shadow:0 0 15px #00000080;pointer-events:auto}.building-preview-icon{font-size:28px;display:flex;align-items:center;justify-content:center;background-color:#0064c84d;border-radius:50%;width:45px;height:45px}.building-preview-details{display:flex;flex-direction:column}.building-preview-name{font-weight:700;margin-bottom:3px}.building-preview-instruction{font-size:14px;opacity:.8}.grid-indicator{position:absolute;border:2px dashed rgba(0,249,255,.7);background-color:#0064c833;pointer-events:none;z-index:105;transition:all .1s ease-out;box-shadow:0 0 10px #00f9ff80}.grid-indicator.valid{border-color:#00ffaab3;background-color:#00ffaa26;box-shadow:0 0 10px #0fac}.grid-indicator.invalid{border-color:#ff00aab3;background-color:#ff00aa26;box-shadow:0 0 10px #f0ac}.selection-rect{position:absolute;border:2px solid #00f9ff;background-color:#00f9ff26;z-index:105;pointer-events:none;box-shadow:0 0 10px #00f9ffcc}.debug-controls{position:absolute;top:10px;right:10px;z-index:1000;background-color:#000000b3;padding:5px;border-radius:5px}.debug-controls button{background-color:#333;color:#fff;border:1px solid #555;padding:5px 10px;border-radius:3px;cursor:pointer}.debug-controls button.active{background-color:#007bff;border-color:#0056b3}.menu-multiplayer-button{background-color:#7c3aed;color:#fff;border:none;border-radius:4px;padding:15px 30px;font-size:18px;font-weight:700;cursor:pointer;transition:background-color .2s;margin:10px 0;width:100%;text-align:center}.menu-multiplayer-button:hover{background-color:#9262e9}.multiplayer-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#1a1a1a;display:flex;flex-direction:column}.return-button{position:fixed;bottom:20px;left:20px;padding:10px 20px;background-color:#2a2a2a;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color .2s;z-index:1001}.return-button:hover{background-color:#3a3a3a}.fp-crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;pointer-events:none;z-index:1000;opacity:.8;filter:drop-shadow(0 0 5px #00f9ff);transition:transform .15s ease-out}.fp-hud{position:absolute;bottom:20px;left:20px;padding:15px;background-color:#1a0033b3;color:#00f9ff;text-shadow:0 0 5px rgba(0,249,255,.8);font-family:Inter,Segoe UI,sans-serif;border-radius:5px;border:1px solid #9900ff;box-shadow:0 0 15px #9900ff80;z-index:1000;font-size:14px;line-height:1.5;min-width:180px;transition:opacity .3s ease-in-out}.fp-health-bar{background:#00000080;height:10px;border-radius:5px;overflow:hidden;margin:5px 0 15px;border:1px solid rgba(0,249,255,.3)}.fp-health-fill{height:100%;background:linear-gradient(90deg,#00f9ff,#09f);box-shadow:0 0 5px #00f9ffcc;transition:width .3s ease-out,background-color .3s ease-out}.fp-ammo{margin-top:5px}.fp-status{margin-top:5px;font-weight:700}.fp-status.reloading{color:#ff9800}.fp-status.aiming{color:#2196f3}.fp-controls{color:#ddd;font-size:12px;margin-top:10px}.fp-weapon-flash{position:absolute;animation:flash-fadeout .05s forwards}@keyframes flash-fadeout{0%{opacity:1}to{opacity:0}}.fp-muzzle-effect{position:absolute;width:20px;height:20px;background:radial-gradient(circle,#ffff64e6,#ffc83299 40%,#ff640000 70%);border-radius:50%;pointer-events:none;animation:flash-expand .05s forwards;z-index:999;transform-origin:center;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background-color:#ffdb75;transform:translate(-50%,-50%);filter:drop-shadow(0 0 5px rgba(255,200,0,.8))}@keyframes flash-expand{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}.fp-flash-glow{position:absolute;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,#ffff64b3,#ffb4324d 40%,#ff640000 70%);pointer-events:none;z-index:998;transform:translate(-50%,-50%);animation:glow-pulse .15s ease-out forwards}@keyframes glow-pulse{0%{transform:translate(-50%,-50%) scale(.2);opacity:.9}50%{transform:translate(-50%,-50%) scale(1.5);opacity:.7}to{transform:translate(-50%,-50%) scale(2.5);opacity:0}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;gap:12px}.loading-spinner{width:40px;height:40px;border:4px solid rgba(0,0,0,.1);border-radius:50%;border-top:4px solid #3498db;animation:spin 1s linear infinite}.loading-text{font-size:16px;color:#555;margin-top:8px}.background-loading-indicator{position:sticky;top:0;left:0;right:0;padding:8px;background-color:#3498db1a;color:#3498db;text-align:center;font-size:14px;border-radius:4px;margin-bottom:10px;z-index:5;border:1px solid rgba(52,152,219,.2)}.cleanup-button{background-color:#e74c3c;color:#fff;padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s}.cleanup-button:hover{background-color:#c0392b}.cleanup-button:disabled{background-color:#ccc;cursor:not-allowed}.refresh-button{background-color:#2ecc71;color:#fff;padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s}.refresh-button:hover{background-color:#27ae60}.refresh-button:disabled{background-color:#ccc;cursor:not-allowed}.action-buttons{display:flex;gap:10px;margin-bottom:20px}.error-message{background-color:#c33;color:#fff;padding:8px 12px;margin:10px 0;border-radius:4px;text-align:center;position:relative;animation:fadeIn .3s ease-in-out}.error-content{display:flex;justify-content:center;align-items:center}.close-error{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;margin-left:10px;padding:0 5px}.close-error:hover{color:#fcc}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}button{position:relative;overflow:hidden}button:disabled{opacity:.7;cursor:not-allowed}button:disabled:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#0000001a;cursor:not-allowed}.lobby-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;justify-content:center;align-items:center}.lobby-button{padding:10px 20px;border-radius:4px;cursor:pointer;font-weight:700;transition:all .2s ease;border:none;outline:none;min-width:120px}.lobby-button:disabled{opacity:.5;cursor:not-allowed}.ready-button{background-color:#4caf50;color:#fff}.ready-button.ready-active{background-color:#d32f2f}.start-button{background-color:#2196f3;color:#fff}.force-start-button{background-color:#ff9800;color:#fff}.leave-button{background-color:#757575;color:#fff}.lobby-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 2px 5px #0003}.waiting-message{margin-top:10px;color:#f39c12;font-style:italic;text-align:center;width:100%}.color-selector{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.color-option{width:30px;height:30px;border-radius:50%;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.color-option:hover{transform:scale(1.1)}.color-option.selected{border-color:#fff;box-shadow:0 0 0 2px #000}.color-option.taken{opacity:.4;cursor:not-allowed;position:relative}.color-option.taken:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' fill='%23000'/%3E%3C/svg%3E") center no-repeat;background-size:70%}.color-option.taken:hover{transform:none}.debug-tools{position:absolute;top:10px;right:10px;z-index:100}.debug-button{background-color:#0009;color:#f0f0f0;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:6px 12px;font-size:12px;cursor:pointer;transition:all .2s}.debug-button:hover{background-color:#000c;border-color:#fff6}.connection-status{position:fixed;bottom:20px;right:20px;border-radius:8px;box-shadow:0 2px 10px #0003;z-index:1000;overflow:hidden;background-color:#0a0a0acc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .3s ease;color:#fff;font-size:14px;min-width:140px}.connection-status.connected .connection-status-indicator{background-color:#00960033}.connection-status.disconnected .connection-status-indicator{background-color:#c8000033}.connection-status-indicator{display:flex;align-items:center;padding:10px 15px;cursor:pointer;transition:background-color .3s ease}.connection-status-indicator:hover{background-color:#ffffff1a}.status-dot{width:12px;height:12px;border-radius:50%;margin-right:10px}.connected .status-dot{background-color:#4caf50;box-shadow:0 0 10px #4caf50cc}.disconnected .status-dot{background-color:#f44336;box-shadow:0 0 10px #f44336cc}.connection-details{padding:15px;border-top:1px solid rgba(255,255,255,.1);font-size:12px}.connection-info{margin-bottom:15px}.connection-info div{margin-bottom:5px;opacity:.8}.connection-actions{display:flex;gap:10px}.connection-actions button{padding:8px 12px;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s ease;outline:none;flex:1}.reconnect-button{background-color:#2196f3;color:#fff}.reconnect-button:hover:not(:disabled){background-color:#0b7dda}.reconnect-button:disabled{background-color:#90caf9;cursor:not-allowed;opacity:.7}.diagnostics-button{background-color:#607d8b;color:#fff}.diagnostics-button:hover{background-color:#455a64}.connection-debug{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:600px;max-height:80vh;background-color:#1e1e1ef2;border-radius:8px;box-shadow:0 4px 20px #00000080;color:#f0f0f0;display:flex;flex-direction:column;z-index:1100;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.connection-debug-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background-color:#0000004d;border-bottom:1px solid rgba(255,255,255,.1)}.connection-debug-header h3{margin:0;font-size:18px;font-weight:500}.close-button{background:none;border:none;color:#f0f0f0;font-size:24px;cursor:pointer;padding:0;margin:0;line-height:1;opacity:.7;transition:opacity .2s}.close-button:hover{opacity:1}.connection-debug-actions{display:flex;gap:10px;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.1)}.connection-debug-actions button{padding:8px 15px;border:none;border-radius:4px;font-size:14px;cursor:pointer;transition:all .2s;flex:1}.connection-debug-actions button:disabled{opacity:.5;cursor:not-allowed}.diagnostics-button{background-color:#2196f3;color:#fff}.diagnostics-button:hover:not(:disabled){background-color:#0b7dda}.reconnect-button{background-color:#4caf50;color:#fff}.reconnect-button:hover:not(:disabled){background-color:#3e8e41}.clear-button{background-color:#607d8b;color:#fff}.clear-button:hover{background-color:#455a64}.connection-debug-logs{flex:1;overflow-y:auto;padding:15px 20px;font-family:monospace;font-size:13px;line-height:1.5;max-height:400px}.log-entry{margin-bottom:5px;word-break:break-word}.log-entry:nth-child(odd){background-color:#ffffff0d}.log-entry:contains("ERROR"){color:#ff6b6b}.log-entry:contains("successful"){color:#69db7c}.connection-debug-advanced{padding:0 20px 15px;border-bottom:1px solid rgba(255,255,255,.1)}.connection-debug-advanced h4{margin:0 0 10px;font-size:14px;font-weight:500;color:#ff9800}.advanced-actions{display:flex;gap:10px}.advanced-actions button{padding:8px 15px;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s;flex:1}.reset-button{background-color:#ff5722;color:#fff}.reset-button:hover:not(:disabled){background-color:#e64a19}.clear-id-button{background-color:#795548;color:#fff}.clear-id-button:hover:not(:disabled){background-color:#5d4037}.game-renderer-container{width:100%;height:100%;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;background-color:#1a1a1a}.game-canvas{width:100%;height:100%;display:block;cursor:pointer;background-color:#2a2a2a}.initializing-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#1a1a1ae6;color:#e0e0e0;z-index:20}.error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#1a1a1ae6;color:#ff6b6b;text-align:center;padding:20px;z-index:20}.error-overlay button{margin-top:20px;padding:8px 16px;background-color:#444;color:#fff;border:none;border-radius:4px;cursor:pointer}.error-overlay button:hover{background-color:#555}.debug-info{position:absolute;top:10px;right:10px;background-color:#1e2832b3;border:1px solid rgba(80,100,120,.8);border-radius:4px;padding:8px;color:#e0e0e0;font-size:12px;z-index:15}.debug-info p{margin:4px 0}.game-ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.game-ui-overlay .interactive{pointer-events:auto}.mini-map{position:absolute;bottom:20px;right:20px;width:200px;height:200px;background-color:#1e2832b3;border:2px solid rgba(80,100,120,.8);border-radius:4px;overflow:hidden;pointer-events:auto}.resource-display{position:absolute;top:20px;right:20px;background-color:#1e2832b3;border:2px solid rgba(80,100,120,.8);border-radius:4px;padding:10px;color:#e0e0e0;font-weight:700}.selection-info{position:absolute;bottom:20px;left:20px;background-color:#1e2832b3;border:2px solid rgba(80,100,120,.8);border-radius:4px;padding:10px;color:#e0e0e0;width:250px}.command-buttons{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:10px;pointer-events:auto}.command-button{width:50px;height:50px;background-color:#323c46cc;border:2px solid rgba(80,100,120,.8);border-radius:4px;display:flex;justify-content:center;align-items:center;color:#e0e0e0;cursor:pointer;transition:background-color .2s}.command-button:hover{background-color:#46505ae6}.command-button:active{background-color:#5a646e}.selection-box{position:absolute;border:2px dashed #4CAF50;background-color:#4caf501a;pointer-events:none}.multiplayer-game-container{position:relative;width:100%;height:100vh;display:flex;flex-direction:column;background-color:#1a1a1a;color:#e0e0e0}.game-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:#1e2832cc;border-bottom:1px solid rgba(80,100,120,.4);height:60px}.room-info h2{margin:0;font-size:1.2rem;color:#f0f0f0}.game-controls{display:flex;gap:10px}.leave-button,.surrender-button{padding:8px 15px;border:none;border-radius:4px;font-weight:700;cursor:pointer;transition:background-color .2s}.leave-button{background-color:#3c4650cc;color:#e0e0e0}.leave-button:hover{background-color:#505a64e6}.surrender-button{background-color:#b43232cc;color:#fff}.surrender-button:hover{background-color:#dc4646e6}.game-content{display:flex;flex:1;position:relative;overflow:hidden;height:calc(100vh - 60px)}.game-canvas-container{flex:1;background-color:#1a1a1a;position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.game-canvas{width:100%;height:100%;display:block;background-color:#1a1a1a}.game-renderer-container{width:100%;height:100%;position:relative}.players-sidebar{width:250px;background-color:#1e2832cc;padding:15px;border-left:1px solid rgba(80,100,120,.4);overflow-y:auto}.players-sidebar h3{margin-top:0;margin-bottom:15px;font-size:1.1rem;color:#f0f0f0;border-bottom:1px solid rgba(80,100,120,.4);padding-bottom:8px}.player-item{display:flex;align-items:center;padding:10px;margin-bottom:8px;background-color:#28323ccc;border-radius:4px}.player-color{width:20px;height:20px;border-radius:50%;margin-right:10px;border:2px solid rgba(255,255,255,.2)}.player-info{flex:1}.player-name{display:block;font-weight:700;margin-bottom:3px}.player-faction{display:block;font-size:12px;color:#a0a0a0}.loading-screen{position:absolute;top:0;left:0;width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#141e28e6;z-index:100}.loading-spinner{width:60px;height:60px;border:6px solid rgba(0,100,200,.2);border-top:6px solid #0088ff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.loading-text{font-size:1.2rem;font-weight:700;color:#f0f0f0;text-shadow:0 0 10px rgba(0,128,255,.5)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-screen{position:absolute;top:0;left:0;width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#141e28e6;z-index:100}.error-message{font-size:1.2rem;color:#ff6b6b;margin-bottom:20px;text-align:center;max-width:80%}.error-details{font-size:.9rem;color:#aaa;margin-bottom:20px;text-align:left;max-width:80%;padding:10px;background-color:#0000004d;border-radius:4px}.error-details p{margin:5px 0}.error-button{padding:10px 20px;background-color:#506478cc;color:#fff;border:none;border-radius:4px;font-weight:700;cursor:pointer;transition:background-color .2s}.error-button:hover{background-color:#64788ce6}.same-machine-test-notice{position:fixed;top:10px;right:10px;background-color:#ffcc00e6;color:#000;padding:10px 15px;border-radius:5px;z-index:1000;max-width:300px;box-shadow:0 2px 10px #0003}.same-machine-test-notice .notice-content{font-size:12px}.same-machine-test-notice h3{margin:0 0 8px;font-size:14px}.same-machine-test-notice p{margin:5px 0}.network-status{position:fixed;bottom:10px;right:10px;padding:5px 10px;border-radius:4px;display:flex;align-items:center;font-size:12px;z-index:1000;box-shadow:0 2px 4px #0003}.network-connected{background-color:#008000e6;color:#fff}.network-disconnected{background-color:#dc0000e6;color:#fff}.network-connecting{background-color:#ffa500e6;color:#fff}.status-indicator{width:8px;height:8px;border-radius:50%;margin-right:6px}.network-connected .status-indicator{background-color:#0f0;box-shadow:0 0 5px #0f0}.network-disconnected .status-indicator{background-color:red;box-shadow:0 0 5px red}.network-connecting .status-indicator{background-color:#fc0;box-shadow:0 0 5px #fc0;animation:blink 1s infinite}@keyframes blink{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.debug-panel{position:fixed;top:10px;left:10px;background-color:#000c;color:#0f0;padding:10px;border-radius:5px;font-family:monospace;font-size:12px;z-index:1000;max-width:350px;max-height:80vh;overflow-y:auto;box-shadow:0 0 10px #00ff0080}.debug-panel h3{margin:0 0 10px;color:#fff;font-size:14px;border-bottom:1px solid #00ff00;padding-bottom:5px}.debug-info{margin-bottom:10px}.debug-item{margin-bottom:4px;display:flex}.debug-key{flex:0 0 40%;color:#aaa;padding-right:10px}.debug-value{flex:1;word-break:break-word}.debug-actions{display:flex;flex-wrap:wrap;gap:5px}.debug-button{background-color:#333;color:#0f0;border:1px solid #00ff00;padding:5px 10px;border-radius:3px;cursor:pointer;font-family:monospace;font-size:11px;transition:all .2s}.debug-button:hover{background-color:#444}.game-container{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-color:#1a1a1a;color:#e0e0e0;padding:20px}.game-container.loading{justify-content:center}.game-container.error{justify-content:center;background-color:#3c00001a}.game-content{display:flex;width:100%;max-width:1200px;margin:20px 0;gap:20px}.game-map{flex:1;background-color:#28323ccc;border-radius:8px;padding:20px;min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(80,100,120,.4)}.game-map h3{color:#4caf50;margin-bottom:20px;font-size:1.4rem}.map-info{background-color:#1e2832cc;padding:10px 15px;border-radius:4px;margin-bottom:20px;font-weight:700;border-left:4px solid #4caf50}.players-panel{width:280px;background-color:#1e2832cc;border-radius:8px;padding:20px;border:1px solid rgba(80,100,120,.4)}.players-list{list-style:none;padding:0;margin:0}.players-list li{padding:12px;margin-bottom:10px;background-color:#28323ccc;border-radius:4px;border-left:4px solid transparent}.players-list li.host-player{border-left-color:#ffc107}.players-list li.client-player{border-left-color:#2196f3}.leave-game-button{background-color:#f44336;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .3s}.leave-game-button:hover{background-color:#d32f2f}.game-info{display:flex;flex-direction:column}.game-info h2{margin:0 0 10px;color:#ffc107}.game-info p{margin:5px 0}.game-engine-fallback{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;text-align:center;background-color:#141e28f2;color:#e0e0e0}.game-engine-fallback h3{font-size:24px;margin-bottom:15px;color:#4caf50}.game-engine-fallback p{margin-bottom:10px;max-width:500px}.game-engine-fallback .loading-spinner{margin:20px 0}.fallback-actions{display:flex;flex-direction:column;align-items:center;margin:20px 0;width:100%;max-width:300px}.force-start-button{padding:12px 24px;background-color:#2196f3;color:#fff;border:none;border-radius:4px;font-weight:700;font-size:16px;cursor:pointer;transition:background-color .2s,transform .1s;box-shadow:0 2px 5px #0003}.force-start-button:hover{background-color:#0d8aee;transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.force-start-button:active{transform:translateY(0);box-shadow:0 1px 3px #0003}.fallback-note{font-size:12px;color:#aaa;margin-top:10px;font-style:italic}.player-list-sidebar{margin-top:30px;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;width:100%;max-width:300px}.player-list-sidebar h4{color:#e0e0e0;margin-bottom:15px;border-bottom:1px solid rgba(80,100,120,.4);padding-bottom:8px}.player-list-sidebar ul{list-style:none;padding:0;margin:0}.player-list-sidebar li{padding:10px;margin-bottom:8px;background-color:#28323ccc;border-radius:4px;display:flex;align-items:center;border-left:4px solid transparent}.player-list-sidebar li.host-player{border-left-color:#ffc107}.player-list-sidebar li.client-player{border-left-color:#2196f3}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{font-family:Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}#root{width:100%;height:100%}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}