.login-container{display:flex;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#0f1419,#1a2332);padding:1rem}.login-card{background:linear-gradient(135deg,#1a2332,#0f1419);border:2px solid #4a7eff;border-radius:8px;padding:3rem;width:100%;max-width:400px;box-shadow:0 20px 60px #000c,0 0 40px #4a7eff33}.login-title{font-size:2.5rem;color:#4a7eff;text-align:center;margin-bottom:.5rem;text-shadow:0 0 20px rgba(74,126,255,.3)}.login-subtitle{text-align:center;color:#a0a0a0;font-size:.9rem;margin-bottom:2rem;letter-spacing:1px}.login-form{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:600;color:#e0e0e0;font-size:.9rem;letter-spacing:.5px}.form-group input{background:#0f1419;color:#e0e0e0;border:1px solid #2d5fb8;padding:.875rem;border-radius:4px;font-size:1rem;transition:all .2s ease}.form-group input:focus{outline:none;border-color:#4a7eff;box-shadow:0 0 0 3px #4a7eff1a;background:#1a2332}.form-group input::placeholder{color:#707070}.error-message{background:#cc2d2d;color:#fff;padding:.75rem;border-radius:4px;font-size:.9rem;border-left:4px solid #ff4a4a}.login-form button[type=submit]{background:linear-gradient(135deg,#4a7eff,#2d5fb8);color:#fff;padding:.875rem;border-radius:4px;font-weight:600;font-size:1rem;border:none;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #4a7eff4d;text-transform:uppercase;letter-spacing:.5px}.login-form button[type=submit]:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #4a7eff80;background:linear-gradient(135deg,#6a9eff,#4a7fb8)}.login-form button[type=submit]:active:not(:disabled){transform:translateY(0)}.login-form button[type=submit]:disabled{opacity:.7;cursor:not-allowed}.login-footer{text-align:center;border-top:1px solid #2d5fb8;padding-top:1.5rem}.login-footer p{color:#a0a0a0;font-size:.9rem}.login-footer .btn-link{margin-left:.5rem}@media (max-width: 480px){.login-card{padding:2rem}.login-title{font-size:2rem}.login-form{gap:1rem}}.leaderboard{display:flex;flex-direction:column;gap:1.5rem}.leaderboard h3{color:#4a7eff;font-size:1.3rem}.leaderboard-table{display:flex;flex-direction:column;border:1px solid #2d5fb8;border-radius:4px;overflow:hidden;box-shadow:0 2px 8px #0000004d}.leaderboard-header,.leaderboard-row{display:grid;grid-template-columns:60px 2fr 100px 80px 80px 60px;gap:1rem;align-items:center;padding:1rem;border-bottom:1px solid #2d5fb8}.leaderboard-header{background:linear-gradient(90deg,#1a2332,#0f1419);font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.5px;color:#4a7eff;border-bottom:2px solid #4a7eff}.leaderboard-body{max-height:600px;overflow-y:auto}.leaderboard-row{background:#0f1419;transition:all .2s ease;border-bottom:1px solid #1a2332}.leaderboard-row:hover{background:#1a2332;border-left:3px solid #4a7eff;padding-left:calc(1rem - 3px)}.leaderboard-row.highlight{background:linear-gradient(90deg,rgba(74,126,255,.1) 0%,transparent 100%);border-left:3px solid #4a7eff;padding-left:calc(1rem - 3px);font-weight:600}.rank-col{text-align:center}.rank{font-weight:700;font-size:1.1rem;color:#4a7eff}.name-col{text-align:left}.player-name{color:#e0e0e0;font-weight:500}.stats-col{text-align:center;font-weight:600}.stats-col.legendary{color:gold;text-shadow:0 0 10px rgba(255,215,0,.2)}.stats-col.diamond{color:#00d4ff;text-shadow:0 0 10px rgba(0,212,255,.2)}.stats-col.gold{color:orange;text-shadow:0 0 10px rgba(255,165,0,.2)}.stats-col.silver{color:silver}.stats-col.bronze{color:#cd7f32}.stats-col.wins{color:#4ade80}.stats-col.losses{color:#ff6b6b}.tier-col{text-align:center;font-size:1.2rem}@media (max-width: 768px){.leaderboard-header,.leaderboard-row{grid-template-columns:50px 1.5fr 70px 50px 50px 50px;gap:.5rem;padding:.75rem;font-size:.9rem}.rank{font-size:.95rem}.leaderboard-body{max-height:400px}}@media (max-width: 480px){.leaderboard-header,.leaderboard-row{grid-template-columns:40px 1fr 50px 50px 50px 40px;gap:.25rem;padding:.5rem;font-size:.8rem}.stats-col{font-size:.9rem}}.dashboard{display:flex;flex-direction:column;gap:2rem}.dashboard-header{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.player-card{background:linear-gradient(135deg,#1a2332,#0f1419);border:1px solid #2d5fb8;border-radius:8px;padding:2rem;box-shadow:0 4px 12px #00000080}.player-card h2{color:#4a7eff;margin-bottom:1.5rem;font-size:1.5rem}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.stat-box{background:#0f1419;border:1px solid #2d5fb8;border-radius:4px;padding:1rem;text-align:center}.stat-label{color:#a0a0a0;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem;display:block}.stat-value{font-size:1.8rem;font-weight:700;color:#4a7eff}.stat-value.legendary{color:gold;text-shadow:0 0 10px rgba(255,215,0,.3)}.stat-value.diamond{color:#00d4ff;text-shadow:0 0 10px rgba(0,212,255,.3)}.stat-value.gold{color:orange;text-shadow:0 0 10px rgba(255,165,0,.3)}.stat-value.silver{color:silver}.stat-value.bronze{color:#cd7f32}.dashboard-tabs{display:flex;gap:1rem;border-bottom:2px solid #2d5fb8;flex-wrap:wrap}.tab{background:none;color:#a0a0a0;border:none;padding:1rem;font-size:1rem;font-weight:600;cursor:pointer;position:relative;transition:color .2s ease}.tab:hover{color:#4a7eff}.tab.active{color:#4a7eff;border-bottom:2px solid #4a7eff;margin-bottom:-2px}.dashboard-content{background:linear-gradient(135deg,#1a2332,#0f1419);border:1px solid #2d5fb8;border-radius:8px;padding:2rem;min-height:400px}.stats-section h3,.match-history h3{color:#4a7eff;margin-bottom:1.5rem;font-size:1.3rem}.stats-details{display:flex;flex-direction:column;gap:1rem}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#0f1419;border-radius:4px;border-left:3px solid #4a7eff}.stat-name{color:#a0a0a0;font-weight:500}.stat-val{font-weight:700;color:#e0e0e0;font-size:1.1rem}.stat-val.legendary{color:gold}.stat-val.diamond{color:#00d4ff}.stat-val.gold{color:orange}.match-history{display:flex;flex-direction:column;gap:1.5rem}.no-data{color:#707070;text-align:center;padding:2rem;font-style:italic}.matches-list{display:flex;flex-direction:column;gap:.75rem}.match-item{display:grid;grid-template-columns:80px 1fr 80px;align-items:center;gap:1rem;padding:1rem;background:#0f1419;border-radius:4px;border-left:4px solid #2d5fb8;transition:all .2s ease}.match-item:hover{border-left-color:#4a7eff;transform:translate(4px)}.match-item.win{border-left-color:#4ade80}.match-item.loss{border-left-color:#ff6b6b}.match-result{text-align:center;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}.match-item.win .match-result{color:#4ade80}.match-item.loss .match-result{color:#ff6b6b}.match-details{display:flex;justify-content:space-between;align-items:center;color:#a0a0a0;font-size:.9rem}.match-opponent{font-weight:500;color:#e0e0e0}.match-date{font-size:.8rem}.match-rating{text-align:right;font-weight:700}.match-rating .positive{color:#4ade80}.match-rating .negative{color:#ff6b6b}@media (max-width: 768px){.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-tabs{gap:.5rem}.tab{padding:.75rem;font-size:.9rem}.match-item{grid-template-columns:70px 1fr 70px;gap:.75rem;padding:.75rem}}.game-board-container{display:flex;flex-direction:column;gap:1rem;background:linear-gradient(135deg,#1a2332,#0f1419);border:1px solid #2d5fb8;border-radius:4px;padding:1rem;height:100%}.game-canvas{flex:1;background:#0a0e12;border:2px solid #4a7eff;border-radius:4px;display:block;max-width:100%;height:auto;aspect-ratio:1 / 1;cursor:crosshair;image-rendering:pixelated;image-rendering:crisp-edges}.game-canvas:hover{box-shadow:0 0 20px #4a7eff4d}.canvas-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;padding:1rem;background:#0f1419;border:1px solid #2d5fb8;border-radius:4px}.legend-item{display:flex;align-items:center;gap:.75rem;color:#a0a0a0;font-size:.9rem}.legend-color{width:16px;height:16px;border-radius:2px;border:1px solid rgba(255,255,255,.2)}@media (max-width: 768px){.game-board-container{padding:.75rem}.canvas-legend{grid-template-columns:repeat(2,1fr);gap:.75rem;padding:.75rem}.legend-item{font-size:.85rem}}.game-viewer{display:flex;flex-direction:column;height:calc(100vh - 100px);gap:1rem;background:linear-gradient(135deg,#0f1419,#1a2332)}.game-header{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,#1a2332,#0f1419);border-bottom:2px solid #4a7eff;padding:1rem;border-radius:4px}.game-info h2{color:#4a7eff;margin-bottom:.5rem;font-size:1.4rem}.match-meta{display:flex;gap:1.5rem;flex-wrap:wrap}.meta-item{color:#a0a0a0;font-size:.9rem;font-weight:500}.meta-item:before{content:"• ";color:#4a7eff;margin-right:.5rem}.meta-item:first-child:before{content:"";margin-right:0}.game-container{display:grid;grid-template-columns:1fr 350px;gap:1rem;flex:1;overflow:hidden}.game-sidebar{display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding-right:.5rem}.player-panel{background:linear-gradient(135deg,#1a2332,#0f1419);border:1px solid #2d5fb8;border-radius:4px;padding:1rem;min-height:120px;display:flex;flex-direction:column}.player-panel.player1{border-top:3px solid #4a7eff}.player-panel.player2{border-top:3px solid #ff4a4a}.player-title{font-size:1.1rem;font-weight:600;margin-bottom:.75rem;text-shadow:0 0 10px rgba(0,0,0,.5)}.player-stats{display:flex;flex-direction:column;gap:.5rem}.stat{display:flex;justify-content:space-between;align-items:center;font-size:.9rem}.stat .label{color:#a0a0a0;font-weight:500}.stat .value{color:#e0e0e0;font-weight:600;font-size:1rem}.controls{background:linear-gradient(135deg,#1a2332,#0f1419);border:1px solid #2d5fb8;border-radius:4px;padding:1rem;display:flex;flex-direction:column;gap:1rem}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-group label{color:#4a7eff;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.button-group{display:flex;gap:.5rem}.btn-control{flex:1;background:#0f1419;color:#a0a0a0;border:1px solid #2d5fb8;padding:.5rem;border-radius:4px;font-size:.85rem;font-weight:600;transition:all .2s ease;cursor:pointer}.btn-control:hover:not(:disabled){background:#1a2332;border-color:#4a7eff;color:#4a7eff}.btn-control.active{background:#4a7eff;color:#fff;border-color:#4a7eff}.speed-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.btn-speed{background:#0f1419;color:#a0a0a0;border:1px solid #2d5fb8;padding:.5rem;border-radius:4px;font-size:.8rem;font-weight:600;transition:all .2s ease;cursor:pointer}.btn-speed:hover:not(:disabled){background:#1a2332;border-color:#4a7eff;color:#4a7eff}.btn-speed.active{background:#4a7eff;color:#fff;border-color:#4a7eff}.progress-slider{width:100%;height:6px;border-radius:3px;background:#0f1419;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#4a7eff;cursor:pointer;transition:all .2s ease}.progress-slider::-webkit-slider-thumb:hover{background:#6a9eff;box-shadow:0 0 0 3px #4a7eff33}.progress-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#4a7eff;cursor:pointer;border:none;transition:all .2s ease}.progress-slider::-moz-range-thumb:hover{background:#6a9eff;box-shadow:0 0 0 3px #4a7eff33}.game-footer{background:linear-gradient(90deg,#1a2332,#0f1419);border-top:2px solid #2d5fb8;padding:.75rem 1rem;border-radius:4px;display:flex;justify-content:center}.unit-count{display:flex;gap:2rem;color:#a0a0a0;font-size:.9rem}.unit-count span{display:flex;gap:.5rem}.unit-count span:before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:#4a7eff}@media (max-width: 1024px){.game-container{grid-template-columns:1fr}.game-sidebar{display:grid;grid-template-columns:1fr 1fr;max-height:200px;padding-right:0}.controls{grid-column:1 / -1}}@media (max-width: 768px){.game-viewer{height:auto}.game-container{grid-template-columns:1fr}.game-sidebar{grid-template-columns:1fr;max-height:none;padding-right:0}.match-meta{flex-direction:column;gap:.5rem}}.app{display:flex;flex-direction:column;height:100vh;background:#0f1419}.navbar{background:linear-gradient(135deg,#1a2332,#0f1419);border-bottom:2px solid #4a7eff;padding:1rem;box-shadow:0 4px 12px #00000080;position:sticky;top:0;z-index:100}.navbar-content{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.navbar-brand{display:flex;align-items:center;gap:1rem}.navbar-brand h1{font-size:1.8rem;color:#4a7eff;margin:0;text-shadow:0 0 10px rgba(74,126,255,.3)}.navbar-user{display:flex;align-items:center;gap:1.5rem}.user-info{color:#e0e0e0;font-weight:500}.btn-primary{background:linear-gradient(135deg,#4a7eff,#2d5fb8);color:#fff;padding:.75rem 1.5rem;border-radius:4px;font-weight:600;transition:all .3s ease;box-shadow:0 4px 12px #4a7eff4d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #4a7eff80;background:linear-gradient(135deg,#6a9eff,#4a7fb8)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:#2d5fb8;color:#e0e0e0;padding:.6rem 1.2rem;border-radius:4px;font-weight:500;transition:all .2s ease;border:1px solid transparent}.btn-secondary:hover:not(:disabled){background:#4a7eff;color:#fff}.btn-link{background:none;color:#4a7eff;border:none;padding:0;cursor:pointer;text-decoration:underline;font-weight:500;transition:color .2s ease}.btn-link:hover:not(:disabled){color:#6a9eff}.main-content{flex:1;overflow-y:auto;padding:2rem;max-width:1400px;margin:0 auto;width:100%}@media (max-width: 768px){.navbar-content{flex-direction:column;gap:1rem}.navbar-brand{width:100%;justify-content:space-between}.navbar-brand h1{font-size:1.4rem}.navbar-user{width:100%;justify-content:space-between}.main-content{padding:1rem}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#0f1419;color:#e0e0e0;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1a2332}::-webkit-scrollbar-thumb{background:#4a7eff;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#6a9eff}.text-center{text-align:center}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}button{cursor:pointer;font-size:inherit;border:none;border-radius:4px;transition:all .2s ease;font-weight:500}button:disabled{opacity:.6;cursor:not-allowed}.loading{display:flex;justify-content:center;align-items:center;height:100vh;font-size:1.5rem;color:#4a7eff;font-weight:700}.error-banner{background:#cc2d2d;color:#fff;padding:1rem;margin-bottom:1rem;border-radius:4px;border-left:4px solid #ff4a4a}input[type=text],input[type=password],input[type=email]{background:#1a2332;color:#e0e0e0;border:1px solid #2d5fb8;padding:.75rem;border-radius:4px;font-size:inherit;transition:all .2s ease}input[type=text]:focus,input[type=password]:focus,input[type=email]:focus{outline:none;border-color:#4a7eff;box-shadow:0 0 0 2px #4a7eff1a}input[type=range]{width:100%;height:6px;border-radius:3px;background:#1a2332;outline:none;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#4a7eff;cursor:pointer;transition:all .2s ease}input[type=range]::-webkit-slider-thumb:hover{background:#6a9eff;box-shadow:0 0 0 3px #4a7eff33}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#4a7eff;cursor:pointer;border:none;transition:all .2s ease}input[type=range]::-moz-range-thumb:hover{background:#6a9eff;box-shadow:0 0 0 3px #4a7eff33}