#start-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#05080ceb;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#start-screen h1{font-size:56px;margin-bottom:15px;color:#4a90e2;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 20px rgba(74,144,226,.6)}#start-screen p{font-size:18px;color:#aab;max-width:600px;text-align:center;margin-bottom:40px;line-height:1.6}.big-btn{padding:18px 50px;font-size:22px;font-weight:700;background:#4a90e2;color:#fff;border:none;border-radius:4px;cursor:pointer;box-shadow:0 0 20px #4a90e266;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.big-btn:hover{background:#357abd;transform:scale(1.05)}#multiplayer-menu{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#1a1c18,#0f0f0f);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;color:#fff;font-family:Arial,sans-serif}#multiplayer-menu h1{font-size:3.5rem;margin-bottom:.5rem;text-shadow:0 0 20px rgba(74,144,226,.5);color:#4a90e2;font-weight:700;letter-spacing:2px}#multiplayer-menu .subtitle{font-size:1.2rem;color:#888;margin-bottom:3rem;text-transform:uppercase;letter-spacing:3px}.menu-buttons{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:400px;align-items:center}.menu-btn{width:100%;padding:1rem 2rem;font-size:1.2rem;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px #0000004d}.menu-btn.primary{background:linear-gradient(135deg,#4a90e2,#357abd);color:#fff}.menu-btn.primary:hover{background:linear-gradient(135deg,#5aa0f2,#4580cd);transform:translateY(-2px);box-shadow:0 6px 20px #4a90e266}.menu-btn.primary:active{transform:translateY(0)}.menu-btn.secondary{background:linear-gradient(135deg,#666,#444);color:#fff}.menu-btn.secondary:hover{background:linear-gradient(135deg,#777,#555);transform:translateY(-2px);box-shadow:0 6px 20px #0006}.menu-btn.secondary:active{transform:translateY(0)}.menu-btn.single-player{background:linear-gradient(135deg,#888,#666);color:#fff;border:2px solid #aaa}.menu-btn.single-player:hover{background:linear-gradient(135deg,#999,#777);border-color:#bbb;transform:translateY(-2px);box-shadow:0 6px 20px #0006}.menu-btn.single-player:active{transform:translateY(0)}.join-form{width:100%;display:flex;flex-direction:column;gap:1rem;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.code-input{width:100%;padding:1rem;font-size:1.5rem;text-align:center;letter-spacing:.5rem;font-weight:700;border:2px solid #4a90e2;border-radius:8px;background:#0000004d;color:#fff;text-transform:uppercase;transition:all .3s ease}.code-input:focus{outline:none;border-color:#5aa0f2;box-shadow:0 0 20px #4a90e24d;background:#00000080}.form-buttons{display:flex;gap:1rem}.form-buttons .menu-btn{flex:1;padding:.8rem 1.5rem;font-size:1rem}.menu-footer{margin-top:3rem;text-align:center}.info-text{color:#888;font-size:.9rem;max-width:400px;line-height:1.5}#waiting-room{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#1a1c18,#0f0f0f);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;color:#fff;font-family:Arial,sans-serif}#waiting-room h1{font-size:2.5rem;margin-bottom:2rem;text-shadow:0 0 20px rgba(74,144,226,.5);color:#4a90e2;font-weight:700;letter-spacing:2px}.game-code-section{background:#0006;padding:2rem 3rem;border-radius:12px;border:2px solid rgba(74,144,226,.3);margin-bottom:3rem;text-align:center;box-shadow:0 8px 32px #0000004d}.code-label{font-size:1.1rem;color:#aaa;margin-bottom:1.5rem;text-transform:uppercase;letter-spacing:1px}.code-display{display:flex;align-items:center;gap:1rem;justify-content:center}.code-text{font-size:3rem;font-weight:700;letter-spacing:.5rem;color:#4a90e2;text-shadow:0 0 20px rgba(74,144,226,.5);font-family:Courier New,monospace;padding:1rem 2rem;background:#00000080;border-radius:8px;border:2px solid rgba(74,144,226,.5)}.copy-btn{padding:.8rem 1.5rem;font-size:1rem;font-weight:700;background:linear-gradient(135deg,#4a90e2,#357abd);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px #0000004d}.copy-btn:hover{background:linear-gradient(135deg,#5aa0f2,#4580cd);transform:translateY(-2px);box-shadow:0 6px 20px #4a90e266}.copy-btn:active{transform:translateY(0)}.waiting-indicator{display:flex;flex-direction:column;align-items:center;gap:1.5rem;margin-bottom:3rem}.spinner{width:50px;height:50px;border:4px solid rgba(74,144,226,.2);border-top:4px solid #4a90e2;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.waiting-indicator p{color:#888;font-size:1.1rem}.cancel-btn{padding:.8rem 2rem;font-size:1rem;font-weight:700;background:linear-gradient(135deg,#666,#444);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px #0000004d}.cancel-btn:hover{background:linear-gradient(135deg,#777,#555);transform:translateY(-2px);box-shadow:0 6px 20px #0006}.cancel-btn:active{transform:translateY(0)}#game-over-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#05080ceb;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#game-over-screen h1{font-size:56px;margin-bottom:15px;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 20px rgba(74,144,226,.6)}#game-over-screen p{font-size:18px;color:#aab;max-width:600px;text-align:center;margin-bottom:40px;line-height:1.6}#ui-layer{position:relative;width:100%;height:160px;background:#101419f2;border-top:2px solid var(--team-color, #4a90e2);display:flex;flex-direction:row;padding:10px;box-sizing:border-box;pointer-events:auto;box-shadow:0 -5px 20px #00000080;flex-shrink:0}#info-panel{flex:1;padding:0 20px;border-right:1px solid #333;display:flex;flex-direction:column;justify-content:center}.resource-display{font-size:28px;color:gold;margin-bottom:5px;font-weight:700;text-shadow:0 0 5px rgba(255,215,0,.3)}.unit-count{font-size:14px;color:#888}#controls{flex:3;display:flex;gap:12px;align-items:center;overflow-x:auto;padding-left:20px}.btn{width:90px;height:90px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);border:1px solid #444;border-radius:6px;color:#ddd;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;position:relative;overflow:hidden}.btn:hover{background:linear-gradient(180deg,#3a3a3a,#252525);border-color:var(--team-color, #4a90e2);color:#fff;transform:translateY(-2px)}.btn:active{transform:translateY(1px)}.btn-icon{font-size:28px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#4a90e2}.btn-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.btn-cost{font-size:11px;color:gold;margin-top:4px}.key-badge{display:inline-block;background:#333;padding:2px 6px;border-radius:4px;border:1px solid #555;font-family:monospace;color:#fff;margin:0 3px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.game-container{position:relative;width:100vw;height:100vh;overflow:hidden;background-color:#0a0a0a;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#fff;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column}#gameCanvas{display:block;cursor:default;width:100%;height:calc(100vh - 160px);flex-shrink:0}#notification-area{position:absolute;top:80px;left:50%;transform:translate(-50%);pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:50}.toast{background:#000c;border:1px solid #4a90e2;color:#fff;padding:10px 20px;border-radius:4px;font-size:16px;font-weight:700;animation:fadeOut 3s forwards;box-shadow:0 4px 10px #00000080}@keyframes fadeOut{0%{opacity:0;transform:translateY(20px)}10%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;overflow:hidden;background-color:#080808}#root{width:100vw;height:100vh}.App{width:100%;height:100%}