: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:#f44;--color-water:#00c8ff;--color-earth:#4f4;--color-air:#c8f;--unit-warrior:#ff6b6b;--unit-mage:#a855f7;--unit-tank:#64748b;--unit-healer:#22c55e}.arena-bg{background-color:var(--bg-primary);background-image:linear-gradient(#00f0ff08 1px,#0000 1px),linear-gradient(90deg,#00f0ff08 1px,#0000 1px);background-size:40px 40px;position:relative}.arena-bg:before{content:"";background:radial-gradient(ellipse at center,transparent 0%,var(--bg-primary)70%);z-index:0;position:absolute;inset:0}.arena-container{z-index:1;color:#fff;font-family:Inter,system-ui,sans-serif;position:relative}.neon-frame{border:2px solid var(--neon-cyan);background:var(--bg-secondary);border-radius:12px;position:relative;overflow:hidden;box-shadow:0 0 20px #00f0ff33,inset 0 0 20px #00f0ff0d}.neon-frame:before{content:"";background:linear-gradient(to right,transparent,var(--neon-cyan),transparent);opacity:.5;width:100%;height:2px;animation:4s linear infinite neonScan;position:absolute;top:0;left:0}@keyframes neonScan{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.purple-frame{border:2px solid var(--neon-purple);background:var(--bg-secondary);border-radius:12px;box-shadow:0 0 15px #a855f733,inset 0 0 15px #a855f70d}.neon-button{border:2px solid var(--neon-cyan);color:#fff;text-shadow:0 0 10px #00f0ff80;background:linear-gradient(135deg,#00f0ff1a 0%,#a855f71a 100%);border-radius:8px;padding:.75rem 1.5rem;font-weight:600;transition:all .3s;position:relative;box-shadow:0 0 15px #00f0ff4d}.neon-button:hover{background:linear-gradient(135deg,#00f0ff33 0%,#a855f733 100%);transform:translateY(-2px);box-shadow:0 0 25px #00f0ff80}.neon-button:active{transform:translateY(0);box-shadow:0 0 10px #00f0ff4d}.neon-button:disabled{background:var(--bg-tertiary);color:#666;box-shadow:none;cursor:not-allowed;border-color:#3a3a4a}.neon-button-purple{border-color:var(--neon-purple);text-shadow:0 0 10px #a855f780;box-shadow:0 0 15px #a855f74d}.neon-button-purple:hover{box-shadow:0 0 25px #a855f780}.neon-tabs{z-index:1;gap:4px;display:flex;position:relative}.neon-tab{background:var(--bg-tertiary);cursor:pointer;color:#a1a1aa;border:1px solid #3a3a4a;border-bottom:none;border-radius:8px 8px 0 0;padding:10px 20px;font-weight:500;transition:all .2s}.neon-tab:hover{background:var(--bg-secondary);color:#fff}.neon-tab.active{background:var(--bg-secondary);border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 10px #00f0ff33}.arena-grid{background:var(--bg-secondary);border:2px solid var(--neon-cyan);border-radius:12px;padding:4px;box-shadow:0 0 30px #00f0ff33,inset 0 0 20px #00000080}.grid-cell{background:var(--bg-tertiary);border:1px solid #2a2a3a;transition:all .2s}.grid-cell:hover{border-color:#00f0ff80;box-shadow:inset 0 0 15px #00f0ff4d}.grid-cell.valid-move{border-color:var(--neon-cyan);background:#00f0ff26;box-shadow:inset 0 0 15px #00f0ff4d}.grid-cell.valid-attack{border-color:var(--color-fire);background:#ff444426;box-shadow:inset 0 0 15px #ff44444d}.grid-cell.selected{border:2px solid var(--neon-cyan);animation:1.5s infinite alternate neonPulse}@keyframes neonPulse{0%{box-shadow:0 0 10px var(--neon-cyan)}to{box-shadow:0 0 25px var(--neon-cyan)}}.unit{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.unit-element{z-index:2;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:10px;display:flex;position:absolute;top:-5px;right:-5px}.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{border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;font-weight:700;display:flex;position:relative;box-shadow:0 0 10px #00000080}.unit-icon.warrior{background:linear-gradient(135deg,var(--unit-warrior),#c55);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 #00f0ff80}.unit.opponent .unit-icon{border:2px solid var(--neon-pink);box-shadow:0 0 12px #f472b680}.unit-health-bar{background:#1a1a25;border:1px solid #2a2a3a;border-radius:2px;width:32px;height:4px;margin-top:4px;overflow:hidden}.unit-health{background:linear-gradient(to right,var(--neon-green),#4ade80);height:100%;transition:width .3s}.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:1.2s infinite selectPulse}@keyframes damageFlash{0%{opacity:1;filter:brightness()}50%{opacity:.6;filter:brightness(2)}to{opacity:1;filter:brightness()}}.unit.damaged{animation:.3s 3 damageFlash}.battlefield-container{background:radial-gradient(at 20% 80%,#00f0ff1a 0%,#0000 50%),radial-gradient(at 80% 20%,#a855f71a 0%,#0000 50%),linear-gradient(135deg,#0a0a0f 0%,#12121a 50%,#0a0a0f 100%);min-height:100vh;position:relative;overflow:hidden}.battlefield-container:before{content:"";pointer-events:none;z-index:1;background-image:linear-gradient(#00f0ff05 1px,#0000 1px),linear-gradient(90deg,#00f0ff05 1px,#0000 1px);background-size:30px 30px;position:absolute;inset:0}.battlefield-grid-wrapper{z-index:2;background:var(--bg-secondary);border:2px solid var(--neon-cyan);border-radius:16px;padding:8px;position:relative;box-shadow:0 0 40px #00f0ff4d,inset 0 0 30px #00000080}.battlefield-grid-wrapper:before{content:"";background:linear-gradient(45deg,var(--neon-cyan),var(--neon-purple),var(--neon-cyan));z-index:-1;opacity:.5;border-radius:20px;position:absolute;inset:-4px}.battlefield-grid{background:var(--bg-tertiary);border:2px solid #2a2a3a;border-radius:12px;box-shadow:inset 0 0 30px #00000080}.battle-cell{background:var(--bg-tertiary);border:1px solid #2a2a3a;transition:all .2s;position:relative}.battle-cell:hover{background:#22222e;box-shadow:inset 0 0 15px #00f0ff33}.has-unit{background:#1a1a25}.player-unit{border-color:var(--neon-cyan);background:linear-gradient(135deg,#00f0ff1a,#00c8dc0d);box-shadow:inset 0 0 15px #00f0ff1a,0 0 10px #00f0ff33}.opponent-unit{border-color:var(--neon-pink);background:linear-gradient(135deg,#f472b61a,#c850960d);box-shadow:inset 0 0 15px #f472b61a,0 0 10px #f472b633}.selected{z-index:10;transform:scale(1.02);border:2px solid var(--neon-cyan)!important;background:linear-gradient(135deg,#00f0ff33,#a855f733)!important;box-shadow:0 0 25px #00f0ff80,inset 0 0 20px #00f0ff33!important}.possible-move{animation:2s infinite movePulse;border:2px dashed var(--neon-cyan)!important;background:#00f0ff1a!important}.possible-attack{animation:2s infinite attackPulse;border:2px dashed var(--color-fire)!important;background:#ff44441a!important}.possible-heal{animation:2s infinite healPulse;border:2px dashed var(--neon-green)!important;background:#22c55e1a!important}@keyframes movePulse{0%,to{box-shadow:0 0 10px #00f0ff4d}50%{box-shadow:0 0 25px #00f0ff99}}@keyframes attackPulse{0%,to{box-shadow:0 0 10px #ff44444d}50%{box-shadow:0 0 25px #f449}}@keyframes healPulse{0%,to{box-shadow:0 0 10px #22c55e4d}50%{box-shadow:0 0 25px #22c55e99}}.attacking{animation:.6s ease-in-out neonAttack}@keyframes neonAttack{0%{filter:brightness();transform:scale(1)}25%{filter:brightness(1.3);transform:scale(1.1)}50%{filter:brightness(1.5);box-shadow:0 0 30px var(--neon-cyan);transform:scale(1.15)}75%{filter:brightness(1.3);transform:scale(1.1)}to{filter:brightness();transform:scale(1)}}.attack-effect{animation:1s ease-out neonExplosion}@keyframes neonExplosion{0%{box-shadow:0 0 #f440}25%{box-shadow:0 0 20px #f44c}50%{box-shadow:0 0 40px #f44}75%{box-shadow:0 0 20px #f449}to{box-shadow:0 0 #f440}}.heal-effect{animation:1.2s ease-in-out neonHealing}@keyframes neonHealing{0%{box-shadow:0 0 #22c55e00}25%{box-shadow:0 0 15px #22c55e99}50%{box-shadow:0 0 30px #22c55ecc}75%{box-shadow:0 0 15px #22c55e66}to{box-shadow:0 0 #22c55e00}}.battlefield-labels{z-index:3;position:relative}.player-label,.opponent-label{background:var(--bg-secondary);border:2px solid var(--neon-cyan);letter-spacing:1px;border-radius:8px;font-weight:600;position:relative;box-shadow:0 0 15px #00f0ff33}.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:2s infinite activeTurnGlow}@keyframes activeTurnGlow{0%,to{box-shadow:0 0 15px #00f0ff4d}50%{box-shadow:0 0 30px #00f0ff99}}.action-panel{background:var(--bg-secondary);border:2px solid var(--neon-purple);z-index:3;border-radius:16px;position:relative;box-shadow:0 0 30px #a855f733,inset 0 0 20px #0000004d}.unit-info{background:var(--bg-tertiary);border:1px solid #3a3a4a;border-radius:8px}.steampunk-button{border:2px solid var(--neon-cyan);color:#fff;text-shadow:0 0 10px #00f0ff80;background:linear-gradient(135deg,#00f0ff1a 0%,#a855f71a 100%);border-radius:8px;font-weight:600;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 0 15px #00f0ff4d}.steampunk-button:before{content:"";background:linear-gradient(90deg,#0000,#ffffff1a,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.steampunk-button:hover{background:linear-gradient(135deg,#00f0ff33 0%,#a855f733 100%);transform:translateY(-2px);box-shadow:0 0 25px #00f0ff80}.steampunk-button:hover:before{left:100%}.steampunk-button:active{transform:translateY(0)}.steampunk-button:disabled{background:var(--bg-tertiary);color:#666;box-shadow:none;cursor:not-allowed;border-color:#3a3a4a;transform:none}.steampunk-button:disabled:before{display:none}.damage-number{text-shadow:0 0 10px #f44c,0 0 20px #ff444480;color:var(--color-fire);font-weight:700}.heal-number{text-shadow:0 0 10px #22c55ecc,0 0 20px #22c55e80;color:var(--neon-green);font-weight:700}.match-list-table{border-collapse:separate;border-spacing:0 8px;width:100%}.match-list-table thead th{color:var(--neon-cyan);text-align:left;border-bottom:2px solid var(--neon-cyan);padding:12px;font-weight:600}.match-list-table tbody tr{background:var(--bg-tertiary);transition:all .3s}.match-list-table tbody tr:hover{background:var(--bg-secondary);box-shadow:0 0 15px #00f0ff33}.match-list-table td{border-top:1px solid #2a2a3a;border-bottom:1px solid #2a2a3a;padding:14px 12px}.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{border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-block}.match-status.created{color:var(--neon-cyan);border:1px solid var(--neon-cyan);background:#00f0ff26}.match-status.placement{color:var(--neon-purple);border:1px solid var(--neon-purple);background:#a855f726}.match-status.battle{color:var(--color-fire);border:1px solid var(--color-fire);background:#ff444426}.arena-heading{color:var(--neon-cyan);text-shadow:0 0 20px #00f0ff80;margin-bottom:20px;padding-bottom:10px;font-weight:700;display:inline-block;position:relative}.arena-heading:after{content:"";background:linear-gradient(to right,transparent,var(--neon-cyan),transparent);width:100%;height:2px;position:absolute;bottom:0;left:0}.steampunk-heading{color:var(--neon-cyan);text-shadow:0 0 20px #00f0ff80;margin-bottom:20px;padding-bottom:10px;font-weight:700;display:inline-block;position:relative}.steampunk-heading:after{content:"";background:linear-gradient(to right,transparent,var(--neon-cyan),transparent);width:100%;height:2px;position:absolute;bottom:0;left:0}.neon-loading{justify-content:center;align-items:center;gap:15px;display:flex}.neon-loader{border:3px solid var(--bg-tertiary);border-top-color:var(--neon-cyan);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.neon-loader:nth-child(2){border-top-color:var(--neon-purple);width:30px;height:30px;animation-direction:reverse}.neon-loader:nth-child(3){border-top-color:var(--neon-pink);width:50px;height:50px}@keyframes spin{to{transform:rotate(360deg)}}.gear-loading{justify-content:center;align-items:center;gap:15px;display:flex}.gear{border:3px solid var(--bg-tertiary);border-top-color:var(--neon-cyan);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.unit.player{border:3px solid var(--neon-cyan);background:linear-gradient(135deg,#00f0ff1a,#0000);border-radius:8px;box-shadow:0 0 20px #00f0ff66}.unit.player:before{content:"";background:linear-gradient(45deg,var(--neon-cyan),transparent);z-index:-1;opacity:.3;border-radius:10px;animation:2s ease-in-out infinite alternate playerGlow;position:absolute;inset:-3px}.unit.opponent{border:3px solid var(--neon-pink);background:linear-gradient(135deg,#f472b61a,#0000);border-radius:8px;box-shadow:0 0 20px #f472b666}.unit.opponent:before{content:"";background:linear-gradient(45deg,var(--neon-pink),transparent);z-index:-1;opacity:.3;border-radius:10px;animation:2s ease-in-out infinite alternate opponentGlow;position:absolute;inset:-3px}@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}}