:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent}
.battle{position:relative;width:1280px;height:720px;overflow:hidden;color:#fff;background:#55cfae url("assets/pokedexbattlebg.jpg") center/cover no-repeat}
.battle:before{display:none}
.arena-glow{display:none}

.battle-intro{position:absolute;z-index:100;inset:0;display:grid;grid-template-rows:1fr 260px 1fr;color:#fff;background:#000;opacity:0;visibility:hidden;transition:opacity .28s ease}
.battle-intro.show{opacity:1;visibility:visible}
.intro-player{display:flex;flex-direction:column;justify-content:center;padding:18px 22px;overflow:hidden}
.intro-player-left{align-items:flex-start}
.intro-player-right{align-items:flex-end}
.intro-heading{display:flex;align-items:flex-end;gap:18px;width:100%;font-family:"BN Machine",Impact,"Arial Black",sans-serif;line-height:.95;white-space:nowrap}
.intro-player-right .intro-heading{justify-content:flex-end}
.intro-heading strong{min-width:0;overflow:hidden;font-size:65px;font-weight:400;text-overflow:ellipsis}
.intro-heading span{flex:none;padding-bottom:5px;color:#ffd800;font-size:26px;font-weight:400}
.intro-team{display:flex;gap:10px;margin-top:10px}
.intro-player-right .intro-team{justify-content:flex-end}
.intro-ball{position:relative;width:128px;height:128px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(#e53b42 0 44%,#202a34 44% 56%,#f3f5f6 56% 100%);border:7px solid #26323d;box-shadow:0 5px 0 #8e9aa3,inset 0 -8px 0 rgba(139,153,164,.65)}
.intro-ball:before{content:"";position:absolute;z-index:1;width:34px;height:34px;border:8px solid #26323d;border-radius:50%;background:#e9edf0}
.intro-ball img{position:relative;z-index:2;width:105px;height:105px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 2px rgba(0,0,0,.55))}
.intro-versus{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(#2479c8 0 18%,#f4f6f7 18% 82%,#2479c8 82%);border-block:5px solid #141a20}
.intro-versus:before{content:"";position:absolute;left:0;right:0;height:5px;background:#171d24;box-shadow:0 -12px 0 rgba(31,112,185,.6),0 12px 0 rgba(31,112,185,.6)}
.intro-versus span{position:relative;z-index:1;font-family:"BN Machine",Impact,"Arial Black",sans-serif;font-size:190px;line-height:1;color:#f13a25;-webkit-text-stroke:10px #202833;text-shadow:0 9px 0 #ff9e26,8px 12px 0 rgba(0,0,0,.4);transform:skew(-8deg)}

.trainer-label{position:absolute;z-index:22;top:27px;width:300px;padding:10px 15px 11px;border:2px solid rgba(99,200,255,.38);border-radius:14px;background:rgba(8,18,31,.94);box-shadow:0 8px 22px rgba(0,0,0,.32);overflow:hidden}
.trainer-label-left{left:18px;text-align:left}
.trainer-label-right{right:18px;text-align:right}
.trainer-label small{display:block;margin-bottom:2px;color:#73ceff;font-size:10px;font-weight:950;letter-spacing:1.15px}
.trainer-label strong{display:block;overflow:hidden;color:#fff;font-size:23px;line-height:1.08;text-overflow:ellipsis;white-space:nowrap}

.team-rail{position:absolute;top:105px;z-index:20;display:grid;gap:11px}
.team-rail-left{left:26px}
.team-rail-right{right:26px}
.team-slot{width:82px;height:82px;display:grid;place-items:center;border-radius:18px;border:2px solid rgba(255,255,255,.17);background:linear-gradient(145deg,rgba(31,47,69,.95),rgba(14,25,41,.95));box-shadow:0 10px 26px rgba(0,0,0,.28);transition:.3s}
.team-slot.active{border-color:#63c8ff;box-shadow:0 0 0 3px rgba(99,200,255,.14),0 0 22px rgba(99,200,255,.32);transform:scale(1.06)}
.team-slot.fainted{filter:grayscale(1);opacity:.32}
.team-slot img{width:68px;height:68px;object-fit:contain;image-rendering:pixelated}

.hp-panel{position:absolute;z-index:18;width:360px;padding:11px 17px 13px;border:2px solid rgba(255,255,255,.16);border-radius:16px;background:linear-gradient(155deg,rgba(28,42,61,.95),rgba(12,21,34,.95));box-shadow:0 13px 30px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.05)}
.hp-panel-enemy{right:132px;top:105px}
.hp-panel-player{left:132px;bottom:100px}
.hp-heading,.status-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hp-heading strong{min-width:0;overflow:hidden;font-size:25px;text-overflow:ellipsis;white-space:nowrap}
.hp-heading span{color:#bfd0e4;font-size:16px;font-weight:850}
.status-line{min-height:0;margin-top:2px}
.status-line:has(.status:not([hidden])){min-height:22px}
.status{padding:3px 9px;border-radius:7px;font-size:13px;font-weight:950;letter-spacing:.8px;background:#d06027}
.status.paralyzed{color:#251b00;background:#f3d345}
.hp-track{height:18px;margin-top:7px;overflow:hidden;border-radius:999px;border:2px solid rgba(255,255,255,.11);background:#07101c;box-shadow:inset 0 2px 5px rgba(0,0,0,.7)}
.hp-fill{height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#24b96a,#62e59b);transition:width .72s cubic-bezier(.2,.8,.2,1),background .25s}
.hp-fill.medium{background:linear-gradient(90deg,#e4a927,#f1ce46)}
.hp-fill.low{background:linear-gradient(90deg,#d53939,#f06464)}

.platform{display:none}
.platform-enemy{width:330px;right:185px;top:348px;transform:scale(.83)}
.platform-player{width:440px;left:135px;bottom:86px}
.combatant{position:absolute;z-index:8;display:grid;place-items:center;opacity:1;transition:transform .35s cubic-bezier(.2,.85,.2,1),filter .2s}
.combatant img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 18px 14px rgba(0,0,0,.42))}
.combatant-enemy{width:250px;height:250px;right:215px;top:155px}
.combatant-player{width:330px;height:330px;left:180px;bottom:95px}
.combatant.hit{filter:brightness(2.2)}
.combatant.faint{transform:translateY(100px) scale(.82);opacity:0;filter:grayscale(1)}
.combatant.attack-left,.combatant.attack-right{transform:none}

.move-effect{--effect:#fff;position:absolute;z-index:10;width:82px;height:82px;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(circle,#fff 0 10%,var(--effect) 28%,transparent 70%);filter:drop-shadow(0 0 18px var(--effect))}
.move-effect.fire{--effect:#ff662e}
.move-effect.water{--effect:#35bfff}
.move-effect.electric{--effect:#ffe347}
.move-effect.psychic{--effect:#df5cff}
.move-effect.ghost{--effect:#8a65e8}
.move-effect.ground{--effect:#c58a4c}
.move-effect.ice{--effect:#bff7ff}
.move-effect.fighting{--effect:#e95a54}
.move-effect.poison{--effect:#ba67d6}
.move-effect.rock{--effect:#b79b69}
.move-effect.normal{--effect:#ddd}
.move-effect.to-enemy{animation:effectToEnemy .55s ease-in both}
.move-effect.to-player{animation:effectToPlayer .55s ease-in both}
.damage-pop{position:absolute;z-index:30;opacity:0;font-size:38px;font-weight:1000;color:#fff;text-shadow:0 3px 3px #000,0 0 14px rgba(255,91,91,.8);pointer-events:none}
.damage-pop small{display:block;font-size:13px;letter-spacing:1px;color:#ffd45c;text-align:center}
.damage-pop.enemy{right:265px;top:225px}
.damage-pop.player{left:300px;bottom:325px}
.damage-pop.show{animation:damageFloat 1.05s both}

.turn-badge{position:absolute;z-index:19;left:50%;top:35px;transform:translateX(-50%);padding:9px 18px;border-radius:999px;color:#a8dfff;background:rgba(7,18,31,.78);border:1px solid rgba(102,200,255,.28);font-weight:950;font-size:14px;letter-spacing:1.5px}
.battle-message{position:absolute;z-index:25;left:150px;right:150px;bottom:22px;min-height:62px;display:grid;place-items:center;padding:13px 24px;border-radius:18px;background:rgba(8,17,29,.94);border:2px solid rgba(255,255,255,.14);box-shadow:0 10px 25px rgba(0,0,0,.35);font-size:22px;font-weight:760;text-align:center}
.winner{position:absolute;z-index:50;inset:0;display:grid;place-items:center;font-size:64px;font-weight:1000;text-shadow:0 5px 20px #000;background:rgba(5,12,22,.54);backdrop-filter:blur(4px)}
.winner[hidden]{display:none}
.replay{position:absolute;z-index:60;right:18px;top:18px;padding:9px 13px;color:#d9edff;background:rgba(8,18,30,.72);border:1px solid rgba(255,255,255,.18);border-radius:9px;cursor:pointer;opacity:.25}
.replay:hover{opacity:1}

@keyframes effectToEnemy{0%{left:440px;top:390px;opacity:0;transform:scale(.35)}
25%{opacity:1}
100%{left:825px;top:250px;opacity:0;transform:scale(1.25)}
}
@keyframes effectToPlayer{0%{left:825px;top:250px;opacity:0;transform:scale(.35)}
25%{opacity:1}
100%{left:395px;top:405px;opacity:0;transform:scale(1.25)}
}
@keyframes damageFloat{0%{opacity:0;transform:translateY(18px) scale(.75)}
20%{opacity:1;transform:translateY(0) scale(1.08)}
75%{opacity:1}
100%{opacity:0;transform:translateY(-45px) scale(.94)}
}