:root{--neon-cyan:#00f0ff;--neon-purple:#a855f7;--neon-pink:#f472b6;--neon-green:#22c55e;--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-tertiary:#1a1a25;--bg-card:#15151f;--color-fire:#ff4444;--color-water:#00c8ff;--color-earth:#44ff44;--color-air:#cc88ff;--unit-warrior:#ff6b6b;--unit-mage:#a855f7;--unit-tank:#64748b;--unit-healer:#22c55e}.arena-bg{background-color:var(--bg-primary);background-image:linear-gradient(rgba(0,240,255,.03) 1px,transparent 0),linear-gradient(90deg,rgba(0,240,255,.03) 1px,transparent 0);background-size:40px 40px;position:relative}.arena-bg:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,transparent 0,var(--bg-primary) 70%);z-index:0}.arena-container{position:relative;z-index:1;font-family:Inter,system-ui,sans-serif;color:#ffffff}.neon-frame{border:2px solid var(--neon-cyan);border-radius:12px;background:var(--bg-secondary);box-shadow:0 0 20px rgba(0,240,255,.2),inset 0 0 20px rgba(0,240,255,.05);position:relative;overflow:hidden}.neon-frame:before{content:"";position:absolute;width:100%;height:2px;background:linear-gradient(to right,transparent,var(--neon-cyan),transparent);top:0;left:0;animation:neonScan 4s linear infinite;opacity:.5}@keyframes neonScan{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.purple-frame{border:2px solid var(--neon-purple);border-radius:12px;background:var(--bg-secondary);box-shadow:0 0 15px rgba(168,85,247,.2),inset 0 0 15px rgba(168,85,247,.05)}.neon-button{background:linear-gradient(135deg,rgba(0,240,255,.1),rgba(168,85,247,.1));border:2px solid var(--neon-cyan);border-radius:8px;color:#fff;font-weight:600;padding:.75rem 1.5rem;position:relative;box-shadow:0 0 15px rgba(0,240,255,.3);transition:all .3s ease;text-shadow:0 0 10px rgba(0,240,255,.5)}.neon-button:hover{background:linear-gradient(135deg,rgba(0,240,255,.2),rgba(168,85,247,.2));box-shadow:0 0 25px rgba(0,240,255,.5);transform:translateY(-2px)}.neon-button:active{transform:translateY(0);box-shadow:0 0 10px rgba(0,240,255,.3)}.neon-button:disabled{background:var(--bg-tertiary);border-color:#3a3a4a;color:#666;box-shadow:none;cursor:not-allowed}.neon-button-purple{border-color:var(--neon-purple);box-shadow:0 0 15px rgba(168,85,247,.3);text-shadow:0 0 10px rgba(168,85,247,.5)}.neon-button-purple:hover{box-shadow:0 0 25px rgba(168,85,247,.5)}.neon-tabs{display:flex;position:relative;z-index:1;gap:4px}.neon-tab{background:var(--bg-tertiary);border:1px solid #3a3a4a;border-bottom:none;border-radius:8px 8px 0 0;padding:10px 20px;cursor:pointer;font-weight:500;transition:all .2s ease;color:#a1a1aa}.neon-tab:hover{background:var(--bg-secondary);color:#fff}.neon-tab.active{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 10px rgba(0,240,255,.2)}.arena-grid,.neon-tab.active{background:var(--bg-secondary)}.arena-grid{border:2px solid var(--neon-cyan);padding:4px;border-radius:12px;box-shadow:0 0 30px rgba(0,240,255,.2),inset 0 0 20px rgba(0,0,0,.5)}.grid-cell{background:var(--bg-tertiary);border:1px solid #2a2a3a;transition:all .2s ease}.grid-cell:hover{border-color:rgba(0,240,255,.5)}.grid-cell.valid-move,.grid-cell:hover{box-shadow:inset 0 0 15px rgba(0,240,255,.3)}.grid-cell.valid-move{background:rgba(0,240,255,.15);border-color:var(--neon-cyan)}.grid-cell.valid-attack{background:rgba(255,68,68,.15);box-shadow:inset 0 0 15px rgba(255,68,68,.3);border-color:var(--color-fire)}.grid-cell.selected{border:2px solid var(--neon-cyan);animation:neonPulse 1.5s infinite alternate}@keyframes neonPulse{0%{box-shadow:0 0 10px var(--neon-cyan)}to{box-shadow:0 0 25px var(--neon-cyan)}}.unit{position:relative;width:100%;height:100%;flex-direction:column}.unit,.unit-element{display:flex;align-items:center;justify-content:center}.unit-element{position:absolute;top:-5px;right:-5px;width:16px;height:16px;border-radius:50%;font-size:10px;z-index:2}.unit-element.fire{background:var(--color-fire);box-shadow:0 0 10px var(--color-fire)}.unit-element.water{background:var(--color-water);box-shadow:0 0 10px var(--color-water)}.unit-element.earth{background:var(--color-earth);box-shadow:0 0 10px var(--color-earth)}.unit-element.air{background:var(--color-air);box-shadow:0 0 10px var(--color-air)}.unit-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;box-shadow:0 0 10px rgba(0,0,0,.5);position:relative}.unit-icon.warrior{background:linear-gradient(135deg,var(--unit-warrior),#cc5555);color:#fff}.unit-icon.mage{background:linear-gradient(135deg,var(--unit-mage),#7c3aed);color:#fff}.unit-icon.tank{background:linear-gradient(135deg,var(--unit-tank),#475569);color:#fff}.unit-icon.healer{background:linear-gradient(135deg,var(--unit-healer),#16a34a);color:#fff}.unit.player .unit-icon{border:2px solid var(--neon-cyan);box-shadow:0 0 12px rgba(0,240,255,.5)}.unit.opponent .unit-icon{border:2px solid var(--neon-pink);box-shadow:0 0 12px rgba(244,114,182,.5)}.unit-health-bar{width:32px;height:4px;background:#1a1a25;border-radius:2px;margin-top:4px;overflow:hidden;border:1px solid #2a2a3a}.unit-health{height:100%;transition:width .3s ease}.unit-health,.unit-health.high{background:linear-gradient(to right,var(--neon-green),#4ade80)}.unit-health.medium{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.unit-health.low{background:linear-gradient(90deg,#ef4444,#f87171)}@keyframes selectPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.unit.selected .unit-icon{animation:selectPulse 1.2s infinite}@keyframes damageFlash{0%{opacity:1;filter:brightness(1)}50%{opacity:.6;filter:brightness(2)}to{opacity:1;filter:brightness(1)}}.unit.damaged{animation:damageFlash .3s 3}.battlefield-container{background:radial-gradient(ellipse at 20% 80%,rgba(0,240,255,.1) 0,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(168,85,247,.1) 0,transparent 50%),linear-gradient(135deg,#0a0a0f,#12121a 50%,#0a0a0f);min-height:100vh;position:relative;overflow:hidden}.battlefield-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(0,240,255,.02) 1px,transparent 0),linear-gradient(90deg,rgba(0,240,255,.02) 1px,transparent 0);background-size:30px 30px;pointer-events:none;z-index:1}.battlefield-grid-wrapper{position:relative;z-index:2;background:var(--bg-secondary);border:2px solid var(--neon-cyan);border-radius:16px;box-shadow:0 0 40px rgba(0,240,255,.3),inset 0 0 30px rgba(0,0,0,.5);padding:8px}.battlefield-grid-wrapper:before{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;background:linear-gradient(45deg,var(--neon-cyan),var(--neon-purple),var(--neon-cyan));border-radius:20px;z-index:-1;opacity:.5}.battlefield-grid{background:var(--bg-tertiary);border:2px solid #2a2a3a;border-radius:12px;box-shadow:inset 0 0 30px rgba(0,0,0,.5)}.battle-cell{background:var(--bg-tertiary);border:1px solid #2a2a3a;position:relative;transition:all .2s ease}.battle-cell:hover{background:#22222e;box-shadow:inset 0 0 15px rgba(0,240,255,.2)}.has-unit{background:#1a1a25}.player-unit{background:linear-gradient(135deg,rgba(0,240,255,.1),rgba(0,200,220,.05));border-color:var(--neon-cyan);box-shadow:inset 0 0 15px rgba(0,240,255,.1),0 0 10px rgba(0,240,255,.2)}.opponent-unit{background:linear-gradient(135deg,rgba(244,114,182,.1),rgba(200,80,150,.05));border-color:var(--neon-pink);box-shadow:inset 0 0 15px rgba(244,114,182,.1),0 0 10px rgba(244,114,182,.2)}.selected{background:linear-gradient(135deg,rgba(0,240,255,.2),rgba(168,85,247,.2))!important;border:2px solid var(--neon-cyan)!important;box-shadow:0 0 25px rgba(0,240,255,.5),inset 0 0 20px rgba(0,240,255,.2)!important;transform:scale(1.02);z-index:10}.possible-move{background:rgba(0,240,255,.1)!important;border:2px dashed var(--neon-cyan)!important;animation:movePulse 2s infinite}.possible-attack{background:rgba(255,68,68,.1)!important;border:2px dashed var(--color-fire)!important;animation:attackPulse 2s infinite}.possible-heal{background:rgba(34,197,94,.1)!important;border:2px dashed var(--neon-green)!important;animation:healPulse 2s infinite}@keyframes movePulse{0%,to{box-shadow:0 0 10px rgba(0,240,255,.3)}50%{box-shadow:0 0 25px rgba(0,240,255,.6)}}@keyframes attackPulse{0%,to{box-shadow:0 0 10px rgba(255,68,68,.3)}50%{box-shadow:0 0 25px rgba(255,68,68,.6)}}@keyframes healPulse{0%,to{box-shadow:0 0 10px rgba(34,197,94,.3)}50%{box-shadow:0 0 25px rgba(34,197,94,.6)}}.attacking{animation:neonAttack .6s ease-in-out}@keyframes neonAttack{0%{transform:scale(1);filter:brightness(1)}25%{transform:scale(1.1);filter:brightness(1.3)}50%{transform:scale(1.15);filter:brightness(1.5);box-shadow:0 0 30px var(--neon-cyan)}75%{transform:scale(1.1);filter:brightness(1.3)}to{transform:scale(1);filter:brightness(1)}}.attack-effect{animation:neonExplosion 1s ease-out}@keyframes neonExplosion{0%{box-shadow:0 0 0 rgba(255,68,68,0)}25%{box-shadow:0 0 20px rgba(255,68,68,.8)}50%{box-shadow:0 0 40px rgba(255,68,68,1)}75%{box-shadow:0 0 20px rgba(255,68,68,.6)}to{box-shadow:0 0 0 rgba(255,68,68,0)}}.heal-effect{animation:neonHealing 1.2s ease-in-out}@keyframes neonHealing{0%{box-shadow:0 0 0 rgba(34,197,94,0)}25%{box-shadow:0 0 15px rgba(34,197,94,.6)}50%{box-shadow:0 0 30px rgba(34,197,94,.8)}75%{box-shadow:0 0 15px rgba(34,197,94,.4)}to{box-shadow:0 0 0 rgba(34,197,94,0)}}.battlefield-labels{position:relative;z-index:3}.opponent-label,.player-label{background:var(--bg-secondary);border:2px solid var(--neon-cyan);border-radius:8px;box-shadow:0 0 15px rgba(0,240,255,.2);font-weight:600;letter-spacing:1px;position:relative}.player-label{border-color:var(--neon-cyan);color:var(--neon-cyan)}.opponent-label{border-color:var(--neon-pink);color:var(--neon-pink)}.active-turn{animation:activeTurnGlow 2s infinite}@keyframes activeTurnGlow{0%,to{box-shadow:0 0 15px rgba(0,240,255,.3)}50%{box-shadow:0 0 30px rgba(0,240,255,.6)}}.action-panel{background:var(--bg-secondary);border:2px solid var(--neon-purple);border-radius:16px;box-shadow:0 0 30px rgba(168,85,247,.2),inset 0 0 20px rgba(0,0,0,.3);position:relative;z-index:3}.unit-info{background:var(--bg-tertiary);border:1px solid #3a3a4a;border-radius:8px}.steampunk-button{background:linear-gradient(135deg,rgba(0,240,255,.1),rgba(168,85,247,.1));border:2px solid var(--neon-cyan);border-radius:8px;color:#fff;font-weight:600;text-shadow:0 0 10px rgba(0,240,255,.5);box-shadow:0 0 15px rgba(0,240,255,.3);transition:all .3s ease;position:relative;overflow:hidden}.steampunk-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}.steampunk-button:hover{background:linear-gradient(135deg,rgba(0,240,255,.2),rgba(168,85,247,.2));box-shadow:0 0 25px rgba(0,240,255,.5);transform:translateY(-2px)}.steampunk-button:hover:before{left:100%}.steampunk-button:active{transform:translateY(0)}.steampunk-button:disabled{background:var(--bg-tertiary);border-color:#3a3a4a;color:#666;box-shadow:none;transform:none;cursor:not-allowed}.steampunk-button:disabled:before{display:none}.damage-number{font-weight:700;text-shadow:0 0 10px rgba(255,68,68,.8),0 0 20px rgba(255,68,68,.5);color:var(--color-fire)}.heal-number{font-weight:700;text-shadow:0 0 10px rgba(34,197,94,.8),0 0 20px rgba(34,197,94,.5);color:var(--neon-green)}.match-list-table{width:100%;border-collapse:separate;border-spacing:0 8px}.match-list-table thead th{color:var(--neon-cyan);font-weight:600;padding:12px;text-align:left;border-bottom:2px solid var(--neon-cyan)}.match-list-table tbody tr{background:var(--bg-tertiary);transition:all .3s ease}.match-list-table tbody tr:hover{background:var(--bg-secondary);box-shadow:0 0 15px rgba(0,240,255,.2)}.match-list-table td{padding:14px 12px;border-top:1px solid #2a2a3a;border-bottom:1px solid #2a2a3a}.match-list-table td:first-child{border-left:1px solid #2a2a3a;border-radius:8px 0 0 8px}.match-list-table td:last-child{border-right:1px solid #2a2a3a;border-radius:0 8px 8px 0}.match-status{display:inline-block;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.match-status.created{background:rgba(0,240,255,.15);color:var(--neon-cyan);border:1px solid var(--neon-cyan)}.match-status.placement{background:rgba(168,85,247,.15);color:var(--neon-purple);border:1px solid var(--neon-purple)}.match-status.battle{background:rgba(255,68,68,.15);color:var(--color-fire);border:1px solid var(--color-fire)}.arena-heading{color:var(--neon-cyan);font-weight:700;text-shadow:0 0 20px rgba(0,240,255,.5);position:relative;display:inline-block;padding-bottom:10px;margin-bottom:20px}.arena-heading:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(to right,transparent,var(--neon-cyan),transparent)}.steampunk-heading{color:var(--neon-cyan);font-weight:700;text-shadow:0 0 20px rgba(0,240,255,.5);position:relative;display:inline-block;padding-bottom:10px;margin-bottom:20px}.steampunk-heading:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(to right,transparent,var(--neon-cyan),transparent)}.neon-loading{display:flex;justify-content:center;align-items:center;gap:15px}.neon-loader{width:40px;height:40px;border:3px solid var(--bg-tertiary);border-top-color:var(--neon-cyan);border-radius:50%;animation:spin 1s linear infinite}.neon-loader:nth-child(2){width:30px;height:30px;border-top-color:var(--neon-purple);animation-direction:reverse}.neon-loader:nth-child(3){width:50px;height:50px;border-top-color:var(--neon-pink)}@keyframes spin{to{transform:rotate(1turn)}}.gear-loading{display:flex;justify-content:center;align-items:center;gap:15px}.gear{width:40px;height:40px;border:3px solid var(--bg-tertiary);border-top-color:var(--neon-cyan);border-radius:50%;animation:spin 1s linear infinite}.unit.player{border:3px solid var(--neon-cyan);box-shadow:0 0 20px rgba(0,240,255,.4);background:linear-gradient(135deg,rgba(0,240,255,.1),transparent);border-radius:8px}.unit.player:before{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;background:linear-gradient(45deg,var(--neon-cyan),transparent);border-radius:10px;z-index:-1;opacity:.3;animation:playerGlow 2s ease-in-out infinite alternate}.unit.opponent{border:3px solid var(--neon-pink);box-shadow:0 0 20px rgba(244,114,182,.4);background:linear-gradient(135deg,rgba(244,114,182,.1),transparent);border-radius:8px}.unit.opponent:before{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;background:linear-gradient(45deg,var(--neon-pink),transparent);border-radius:10px;z-index:-1;opacity:.3;animation:opponentGlow 2s ease-in-out infinite alternate}@keyframes playerGlow{0%{opacity:.2}to{opacity:.5}}@keyframes opponentGlow{0%{opacity:.2}to{opacity:.5}}.unit.player .unit-health{background:linear-gradient(to right,var(--neon-cyan),#67f7ff)}.unit.opponent .unit-health{background:linear-gradient(to right,var(--neon-pink),#f9a8d4)}.cell-coordinates,.cell-coords,.visual-coord{display:none!important}@media (max-width:768px){.battlefield-grid{grid-template-rows:repeat(8,50px);grid-template-columns:repeat(8,50px)}.battle-cell{font-size:12px}}@media (max-width:480px){.battlefield-grid{grid-template-rows:repeat(8,40px);grid-template-columns:repeat(8,40px)}.battle-cell{font-size:10px}.action-panel{padding:12px}}