:root{--arena-bg-from:#0a192f;--arena-bg-to:#112240;--arena-accent:#64ffda;--arena-accent-glow:#64ffda4d;--player-side:#00bcd4;--opponent-side:#ff5252;--card-width:140px;--card-height:220px;--card-radius:12px;--font-primary:"Inter", sans-serif;--premium-shadow:0 10px 40px -10px #00000080}.battle-container{width:100%;height:100vh;font-family:var(--font-primary);perspective:1000px;background:radial-gradient(circle,#1b2735 0%,#090a0f 100%);flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.arena-background{z-index:0;background:radial-gradient(at bottom,#1b2735 0%,#090a0f 100%);width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.arena-glow{background:radial-gradient(circle, var(--arena-accent-glow) 0%, transparent 70%);filter:blur(80px);pointer-events:none;width:80%;height:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.particles-container{width:100%;height:100%;position:absolute}.particle{background:var(--arena-accent);opacity:.3;filter:blur(2px);border-radius:50%;animation:15s ease-in-out infinite float-particle;position:absolute}@keyframes float-particle{0%,to{opacity:.3;transform:translateY(0)translate(0)}50%{opacity:.6;transform:translateY(-100px)translate(20px)}}.arena-floor{z-index:1;width:100%;height:100%;transform-style:preserve-3d;background-image:linear-gradient(#64ffda0d 1px,#0000 1px),linear-gradient(90deg,#64ffda0d 1px,#0000 1px);background-size:60px 60px;flex-direction:column;display:flex;position:relative;transform:rotateX(20deg);box-shadow:inset 0 0 150px #000c}.side-opponent,.side-player{flex:1;justify-content:center;align-items:center;display:flex;position:relative}.side-divider{background:linear-gradient(90deg, transparent, var(--arena-accent), transparent);width:80%;height:2px;box-shadow:0 0 20px var(--arena-accent);opacity:.5;margin:0 auto}.card-group{perspective:1000px;gap:20px;display:flex}.character-card{width:var(--card-width);height:var(--card-height);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--card-radius);cursor:pointer;box-shadow:var(--premium-shadow);transform-style:preserve-3d;background:#ffffff0d;border:1px solid #ffffff1a;transition:all .4s cubic-bezier(.175,.885,.32,1.275);animation:4s ease-in-out infinite floating-card;position:relative}@keyframes floating-card{0%,to{transform:translateY(0)rotateX(0)rotateY(0)}50%{transform:translateY(-15px)rotateX(2deg)rotateY(1deg)}}.character-card:hover{border-color:var(--arena-accent);box-shadow:0 15px 50px -5px var(--arena-accent-glow);transform:translateY(-20px)scale(1.05)}.character-card:before{content:"";border-radius:calc(var(--card-radius) + 2px);z-index:-1;opacity:.5;background:linear-gradient(45deg,#0000,#ffffff1a,#0000);position:absolute;inset:-2px}.card-glowing-edge{border-radius:var(--card-radius);pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 10px #64ffda33}.card-aura-glow{filter:blur(25px);opacity:.3;z-index:-2;border-radius:50%;position:absolute;inset:-15px}.card-aura-glow.fire{background:#ff5252;box-shadow:0 0 50px #ff5252}.card-aura-glow.water{background:#2196f3;box-shadow:0 0 50px #2196f3}.card-aura-glow.ice{background:#00bcd4;box-shadow:0 0 50px #00bcd4}.scanline-overlay{z-index:10;pointer-events:none;opacity:.4;background:linear-gradient(#12101000 50%,#0000001a 50%) 0 0/100% 4px;position:absolute;inset:0}.card-image{border-radius:var(--card-radius);background-position:50%;background-size:cover;width:100%;height:100%;position:relative;overflow:hidden}.card-overlay{background:linear-gradient(#0000 40%,#000c 100%);width:100%;height:100%;position:absolute;top:0;left:0}.card-cost{color:#000;z-index:10;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:.9rem;font-weight:800;display:flex;position:absolute;top:-10px;left:-10px;box-shadow:0 0 10px #0000004d}.card-element{z-index:10;background:#00000080;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:flex;position:absolute;top:5px;right:5px}.card-rarity{gap:2px;display:flex;position:absolute;bottom:10px;left:10px}.star{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:gold;width:8px;height:8px}.matching-overlay{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:2000;background:#000c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.matching-box{text-align:center;color:var(--arena-accent)}.timer-display{text-shadow:0 0 20px var(--arena-accent);margin:20px 0;font-size:4rem;font-weight:900}.spin-slow{animation:8s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.selected-glow{transform:translateY(-20px)scale(1.05);border-color:var(--arena-accent)!important;box-shadow:0 0 30px var(--arena-accent)!important}.defeated-card{filter:grayscale()brightness(.5);pointer-events:none;opacity:.6}.defeated-overlay{color:#ff5252;letter-spacing:2px;text-shadow:0 0 10px #000;background:#f003;justify-content:center;align-items:center;font-size:1.2rem;font-weight:900;display:flex;position:absolute;inset:0}.ghost-slot{width:var(--card-width);height:var(--card-height);border-radius:var(--card-radius);color:#fff3;text-align:center;border:2px dashed #ffffff1a;justify-content:center;align-items:center;padding:20px;font-size:.7rem;display:flex}.battle-logs{flex-direction:column;gap:8px;width:250px;margin-top:40px;display:flex}.log-entry{border-left:2px solid var(--arena-accent);color:#fff;background:#00000080;padding:10px;font-family:monospace;font-size:.75rem;animation:.3s ease-out slideIn}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.panel-hidden{pointer-events:none;opacity:0;transform:translate(-50%,250px)!important}.picked{box-shadow:0 0 15px var(--arena-accent-glow);border-color:var(--arena-accent)!important}.atk-btn{color:#fff!important;background:#ff5252!important;border-color:#ff5252!important}.skill-btn{background:var(--arena-accent)!important;border-color:var(--arena-accent)!important;color:#000!important}.skill-cooldown-overlay{color:var(--arena-accent);z-index:1000;pointer-events:none;background:#000000b3;justify-content:center;align-items:center;font-size:3rem;font-weight:900;display:flex;position:absolute;inset:0}.card-skill-label{text-align:center;text-transform:uppercase;letter-spacing:1px;color:#fff6;width:100%;font-size:.6rem;position:absolute;bottom:-25px;left:0}.active-turn-ring{box-shadow:0 0 20px #fff, 0 0 40px var(--arena-accent)!important;border-color:#fff!important}.result-overlay{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:5000;background:#000000d9;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.result-modal{border:1px solid var(--arena-accent);text-align:center;width:400px;box-shadow:0 0 100px var(--arena-accent-glow);background:#141414f2;border-radius:20px;padding:40px}.result-content h1{letter-spacing:-2px;text-transform:uppercase;margin-bottom:20px;font-family:Inter,sans-serif;font-size:2.5rem;font-weight:900}.text-victory{color:var(--arena-accent);text-shadow:0 0 20px var(--arena-accent)}.text-defeat{color:#ff5252;text-shadow:0 0 20px #ff5252}.xp-badge{color:gold;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;justify-content:center;align-items:center;gap:15px;margin:30px 0;padding:15px;font-size:1.5rem;font-weight:800;display:flex}.glitch-text{text-shadow:2px 2px #ff00c1,-2px -2px #00fff9;letter-spacing:2px}.action-panel{z-index:100;flex-direction:column;gap:12px;display:flex;position:absolute;bottom:40px;right:40px}.btn-premium{border:1px solid var(--arena-accent);color:var(--arena-accent);cursor:pointer;text-transform:uppercase;letter-spacing:1px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#64ffda1a;border-radius:8px;padding:12px 24px;font-weight:600;transition:all .3s}.btn-premium:hover{background:var(--arena-accent);color:#000;box-shadow:0 0 20px var(--arena-accent-glow)}.energy-orb{background:radial-gradient(circle at 30% 30%, #fff, var(--arena-accent));width:50px;height:50px;box-shadow:0 0 20px var(--arena-accent);color:#000;z-index:100;border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:flex;position:relative}.opponent-hud{position:absolute;top:40px;right:40px}.player-hud{position:absolute;bottom:220px;left:40px}.turn-indicator{writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:4px;color:#fff3;z-index:100;gap:20px;font-size:.7rem;font-weight:200;display:flex;position:absolute;top:50%;left:20px;transform:translateY(-50%)}.turn-active{color:var(--arena-accent);text-shadow:0 0 10px var(--arena-accent);font-weight:800;position:relative}.turn-active:after{content:"";background:var(--arena-accent);width:2px;height:20px;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}.ui-border-top,.ui-border-bottom{pointer-events:none;z-index:1000;border:1px solid #64ffda1a;width:100%;height:40px;position:absolute;left:0}.ui-border-top{background:linear-gradient(#000c 0%,#0000 100%);border-bottom:1px solid #64ffda0d;top:0}.ui-border-bottom{background:linear-gradient(#0000 0%,#000c 100%);border-top:1px solid #64ffda0d;bottom:0}.pulse-glow{animation:2s ease-in-out infinite pulse-glow-anim}@keyframes pulse-glow-anim{0%,to{box-shadow:0 0 10px var(--arena-accent-glow)}50%{box-shadow:0 0 25px var(--arena-accent)}}.card-stats-hud{background:#ffffff1a;border-radius:2px;height:4px;position:absolute;bottom:15px;left:10px;right:10px;overflow:hidden}.hp-bar{background:#0f8;height:100%;display:block;box-shadow:0 0 5px #0f8}.card-list-panel{z-index:50;background:linear-gradient(#0000 0%,#0006 100%);justify-content:center;align-items:flex-end;gap:15px;width:70%;height:180px;padding-bottom:20px;transition:transform .3s;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.list-card{cursor:pointer;border:1px solid #ffffff1a;border-radius:8px;width:90px;height:140px;transition:all .3s;position:relative;overflow:hidden}.list-card:hover{border-color:var(--arena-accent);z-index:10;transform:translateY(-20px)scale(1.1)}@media (max-width:768px){:root{--card-width:90px;--card-height:140px}.card-list-panel{gap:8px;width:95%;height:120px}.list-card{width:60px;height:90px}.action-panel{bottom:140px;right:20px}.btn-premium{padding:8px 16px;font-size:.8rem}}