:root{--bg:#0a0e1a;--bg2:#111827;--card:#1a1f35;--border:#2a2f45;--text:#e2e8f0;--muted:#8892b0;--accent:#6c8cff;--accent2:#a78bfa;--danger:#ef4444;--success:#22c55e;--warn:#f59e0b;--gold:#fbbf24}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
.screen{display:none;min-height:100vh}.screen.active{display:flex}.hidden{display:none!important}
#pick-screen{flex-direction:column;align-items:center;padding:24px;background:radial-gradient(ellipse at top,#1a1040,var(--bg) 60%)}
.pick-container{max-width:960px;width:100%}
.pick-header{text-align:center;margin-bottom:16px}
.pick-header h2{font-size:32px;font-weight:900;background:linear-gradient(135deg,var(--text),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.pick-header p{color:var(--muted);font-size:14px}
.pick-selected{display:flex;gap:10px;justify-content:center;margin-bottom:16px;min-height:74px;flex-wrap:wrap}
.pick-slot{width:64px;height:64px;border-radius:14px;border:2px dashed rgba(108,140,255,.3);display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(108,140,255,.03)}
.pick-slot.filled{border:2px solid var(--accent);background:rgba(108,140,255,.1)}
.pick-mini{width:48px;height:48px;object-fit:contain}
.btn-start{display:block;width:100%;max-width:420px;margin:0 auto 24px;padding:18px;border-radius:16px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:18px;font-weight:800;cursor:pointer}
.btn-start:disabled{opacity:.35;cursor:not-allowed}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;max-height:58vh;overflow-y:auto;padding:4px}
.pick-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px;cursor:pointer;transition:.2s;text-align:center}
.pick-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.pick-card.selected{border-color:var(--accent);background:rgba(108,140,255,.1)}
.pick-anim{width:68px;height:68px;object-fit:contain;display:block;margin:0 auto}
.mon-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-level{font-size:10px;color:var(--muted);margin:2px 0}
.mon-types{display:flex;gap:3px;justify-content:center;margin-top:2px}
#battle-screen{flex-direction:column;background:linear-gradient(180deg,#080c18,#0f1a35 30%,#1a0e30 70%,#0d1117);position:relative;overflow:hidden}
.battle-field{flex:1;display:flex;position:relative;min-height:280px;z-index:1;overflow:hidden}
.battle-hud{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:rgba(0,0,0,.4);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.05);z-index:2}
.hud-left{display:flex;align-items:center;gap:10px}
.wave-badge{background:linear-gradient(135deg,var(--accent),var(--accent2));padding:6px 18px;border-radius:999px;font-weight:800;font-size:14px}
.boss-badge{background:linear-gradient(135deg,#f59e0b,#ef4444);padding:5px 14px;border-radius:999px;font-weight:800;font-size:12px;animation:pulse 1.5s infinite}
.weather-badge{background:rgba(255,255,255,.12);backdrop-filter:blur(6px);padding:5px 14px;border-radius:999px;font-weight:700;font-size:12px;border:1px solid rgba(255,255,255,.15)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.diamond-counter{font-size:20px;font-weight:800;color:var(--gold)}
.enemy-side{position:absolute;top:4%;right:12%;display:flex;gap:12px;align-items:flex-end}
.enemy-slot{text-align:center;position:relative;cursor:pointer;transition:.3s}
.enemy-slot:hover:not(.fainted){transform:translateY(-6px)}
.enemy-slot.fainted{opacity:.12;filter:grayscale(1);pointer-events:none;transform:scale(.7)}
.enemy-slot.target-selected{transform:scale(1.05)}
.enemy-slot.target-selected::after{content:'🎯';position:absolute;top:-8px;right:-8px;font-size:16px;z-index:5;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.enemy-slot .battle-sprite{max-height:120px;max-width:140px;width:auto;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.player-side{position:absolute;bottom:4%;left:10%}
.player-slot{text-align:center;position:relative}
.player-slot .battle-sprite{max-height:220px;max-width:260px;width:auto;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 8px 18px rgba(108,140,255,.2))}
.slot-name{font-size:13px;font-weight:700}.slot-name small{font-weight:500;color:var(--muted);font-size:10px}
.hp-bar{width:100px;height:7px;background:rgba(255,255,255,.06);border-radius:99px;margin:3px auto 0;overflow:hidden}
.hp-bar-lg{width:150px;height:9px}
.hp-fill{height:100%;border-radius:99px;transition:width .5s ease-out}
.hp-text{font-size:10px;color:var(--muted);margin-top:2px}
.status-tag{position:absolute;top:-4px;right:-4px;font-size:7px;padding:2px 6px;border-radius:5px;font-weight:700;text-transform:uppercase;z-index:3}
.st-poison{background:#a040a0;color:#fff}.st-burn{background:#f08030;color:#fff}.st-paralysis{background:#f8d030;color:#1a1a2e}.st-sleep{background:#705898;color:#fff}.st-freeze{background:#98d8d8;color:#1a1a2e}
.ability-tag{font-size:8px;color:rgba(255,255,255,.55);font-style:italic;margin-top:1px;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes idleBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes idleBounceSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.idle-bounce{animation:idleBounce 2s ease-in-out infinite}
.idle-bounce-slow{animation:idleBounceSlow 2.4s ease-in-out infinite .3s}

/* === STAT STAGE INDICATORS === */
.stage-icons{display:flex;gap:2px;justify-content:center;margin-top:3px;flex-wrap:wrap}
.stage-up{font-size:8px;color:#22c55e;font-weight:800;background:rgba(34,197,94,.15);padding:1px 3px;border-radius:3px}
.stage-down{font-size:8px;color:#ef4444;font-weight:800;background:rgba(239,68,68,.15);padding:1px 3px;border-radius:3px}

/* === STAT CHANGE POPUP === */
.stat-popup{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:800;pointer-events:none;z-index:15;white-space:nowrap;padding:4px 10px;border-radius:8px;animation:statPopAnim 1.1s ease-out forwards}
.stat-up{color:#22c55e;background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.3);text-shadow:0 1px 4px rgba(34,197,94,.4)}
.stat-down{color:#ef4444;background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.3);text-shadow:0 1px 4px rgba(239,68,68,.4)}
@keyframes statPopAnim{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.8)}15%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.1)}30%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-25px)}}

/* === HEAL POPUP === */
.heal-popup{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:14px;font-weight:800;color:#22c55e;pointer-events:none;z-index:15;animation:healAnim 1s ease-out forwards;text-shadow:0 2px 6px rgba(34,197,94,.5)}
@keyframes healAnim{0%{opacity:0;transform:translateX(-50%) translateY(5px)}15%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-30px)}}

/* === BATTLE ANIMATIONS === */
.pkm-flash{position:absolute;inset:0;z-index:30;pointer-events:none;animation:flashA .25s ease-out forwards}
@keyframes flashA{0%{opacity:.45}100%{opacity:0}}
.pkm-blink{animation:blinkA .6s steps(1) forwards!important}
@keyframes blinkA{0%{opacity:1}10%{opacity:0}20%{opacity:1}30%{opacity:0}40%{opacity:1}50%{opacity:0}60%{opacity:1}70%{opacity:0}80%{opacity:1}100%{opacity:1}}
.super-shake{animation:shakeA .4s ease-out}
@keyframes shakeA{0%,100%{transform:translate(0)}15%{transform:translate(-8px,-4px)}30%{transform:translate(8px,3px)}45%{transform:translate(-5px,4px)}60%{transform:translate(5px,-3px)}}

/* Attack particles */
.tp{position:absolute;border-radius:50%;pointer-events:none;z-index:20;opacity:0}
.tp-right{animation:tpR .45s ease-in forwards}
.tp-left{animation:tpL .45s ease-in forwards}
@keyframes tpR{0%{left:15%;top:calc(58% + var(--ry,0)*15px);opacity:1;transform:scale(.4)}50%{opacity:1;transform:scale(1.3)}100%{left:calc(72% + var(--rx,0)*25px);top:calc(14% + var(--ry,0)*12px);opacity:0;transform:scale(.5)}}
@keyframes tpL{0%{right:15%;top:calc(14% + var(--ry,0)*12px);opacity:1;transform:scale(.4)}50%{opacity:1;transform:scale(1.3)}100%{right:calc(72% + var(--rx,0)*25px);top:calc(58% + var(--ry,0)*15px);opacity:0;transform:scale(.5)}}

/* Move announce */
.mv-announce{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);z-index:25;pointer-events:none;display:flex;align-items:center;gap:8px;animation:mvaA 1s ease-out forwards;padding:8px 20px;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);border-radius:12px;border:1px solid rgba(255,255,255,.1);font-size:16px;font-weight:800;color:#fff}
.mva-badge{font-size:9px;padding:3px 8px;border-radius:5px;color:#fff;font-weight:800;text-transform:uppercase}
@keyframes mvaA{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}30%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) translateY(-15px)}}

/* HUD type badges */
.hud-types{display:flex;gap:3px;margin:2px 0}
.hud-types .tbadge{font-size:7px;padding:1px 5px;border-radius:4px}

/* Effect banner (center screen) */
.effect-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:35;pointer-events:none;font-size:28px;font-weight:900;padding:10px 36px;border-radius:14px;animation:ebAnim 1.5s ease-out forwards;letter-spacing:1px;text-shadow:0 3px 12px rgba(0,0,0,.7)}
.eb-super{color:#22c55e;background:linear-gradient(135deg,rgba(34,197,94,.25),rgba(34,197,94,.1));border:2px solid rgba(34,197,94,.4)}
.eb-weak{color:#f59e0b;background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.08));border:2px solid rgba(245,158,11,.3);font-size:20px}
.eb-ability{color:#c084fc;background:linear-gradient(135deg,rgba(192,132,252,.25),rgba(139,92,246,.12));border:2px solid rgba(192,132,252,.4);font-size:18px}
.eb-immune{color:#94a3b8;background:linear-gradient(135deg,rgba(148,163,184,.2),rgba(100,116,139,.1));border:2px solid rgba(148,163,184,.35);font-size:20px}
.eb-hit{color:#e2e8f0;background:linear-gradient(135deg,rgba(226,232,240,.12),rgba(148,163,184,.06));border:2px solid rgba(226,232,240,.15);font-size:18px}
@keyframes ebAnim{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}10%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}25%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) translateY(-20px) scale(.9)}}

/* Move button tooltip */
.move-btn{position:relative}
.move-btn[title]:hover::after{content:attr(title);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:rgba(0,0,0,.92);color:#e2e8f0;font-size:11px;font-weight:400;padding:6px 10px;border-radius:8px;white-space:normal;max-width:220px;z-index:40;pointer-events:none;line-height:1.4;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px rgba(0,0,0,.5)}

/* Damage popup */
.dmg-pop{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:22px;font-weight:900;pointer-events:none;animation:dmgA .9s ease-out forwards;z-index:10;text-shadow:0 2px 10px rgba(0,0,0,.9)}
@keyframes dmgA{0%{opacity:1;transform:translateX(-50%) scale(1.3)}30%{transform:translateX(-50%) translateY(-18px) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-50px) scale(.8)}}
.dmg-normal{color:#fff}.dmg-super{color:#22c55e;font-size:28px}.dmg-weak{color:#f59e0b;font-size:16px}.dmg-crit{color:#ef4444;font-size:30px}.dmg-immune{color:#666;font-size:14px}

/* Battle log */
.battle-log{max-height:80px;overflow-y:auto;padding:6px 20px;font-size:11px;color:var(--muted);line-height:1.6;background:rgba(0,0,0,.4);border-top:1px solid rgba(255,255,255,.04);z-index:2}
.log-super{color:var(--success);font-weight:600}.log-weak{color:var(--warn)}.log-status{color:var(--accent2)}
.log-stat-up{color:#22c55e;font-weight:600}.log-stat-down{color:#ef4444;font-weight:600}.log-heal{color:#22c55e}

/* Controls */
.battle-controls{padding:10px 20px 6px;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.04);z-index:2}
.move-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.move-btn{padding:11px 12px;border:1px solid var(--border);border-left:4px solid var(--mc,var(--border));border-radius:10px;background:var(--card);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:6px}
.move-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.4);border-color:var(--mc,var(--accent))}
.move-btn:active{transform:scale(.96)}
.mv-name{flex:1;text-align:left}.mv-meta{color:var(--muted);font-size:10px;min-width:22px;text-align:right}
.mv-pp{color:var(--muted);font-size:9px}.pp-low{color:var(--warn)}
.mv-no-pp{opacity:.35;cursor:not-allowed;filter:grayscale(.7)}
.move-btn:disabled{transform:none!important;box-shadow:none!important}
.control-row{display:flex;gap:8px}
.btn-auto{flex:1;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:13px;font-weight:700;cursor:pointer}
.btn-auto.active{border-color:var(--success);background:rgba(34,197,94,.12);color:var(--success)}
.btn-flee{padding:10px 20px;border-radius:10px;border:1px solid rgba(239,68,68,.3);background:rgba(239,68,68,.06);color:var(--danger);font-size:13px;font-weight:700;cursor:pointer}
.team-bar{display:flex;gap:6px;padding:10px 16px;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.4));justify-content:center;z-index:2;border-top:1px solid rgba(255,255,255,.04)}
.team-slot{width:80px;border-radius:12px;border:2px solid var(--border);background:var(--card);cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:6px 4px 4px;transition:all .2s;gap:2px}
.team-slot:hover:not(.fainted){border-color:var(--accent);transform:translateY(-3px);box-shadow:0 4px 12px rgba(108,140,255,.15)}
.team-slot.active{border-color:var(--accent);box-shadow:0 0 14px rgba(108,140,255,.25);background:rgba(108,140,255,.08)}
.team-slot.fainted{opacity:.3;border-color:var(--danger);cursor:default;filter:grayscale(.6)}
.ts-sprite-wrap{width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ts-sprite{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));transition:transform .2s}
.team-slot:hover:not(.fainted) .ts-sprite{transform:scale(1.1)}
.ts-info{width:100%;text-align:center}
.ts-name{font-size:9px;font-weight:700;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}
.ts-hp-bar{width:100%;height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin:2px 0 1px;overflow:hidden}
.ts-hp-fill{height:100%;border-radius:2px;transition:width .3s}
.ts-hp-text{font-size:8px;color:#94a3b8;font-weight:500}

/* Forced switch panel (when your Pokemon faints) */
.forced-switch-overlay{position:absolute;inset:0;z-index:50;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.forced-switch-panel{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:28px 24px;max-width:480px;width:92%;text-align:center;animation:slideUp .3s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.forced-switch-panel h3{font-size:20px;font-weight:900;margin-bottom:6px;color:var(--danger)}
.forced-switch-panel p{font-size:13px;color:var(--muted);margin-bottom:16px}
.forced-switch-grid{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.fs-card{background:var(--bg2);border:2px solid var(--border);border-radius:14px;padding:12px;cursor:pointer;transition:.2s;text-align:center;min-width:90px;flex:1;max-width:120px}
.fs-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 6px 20px rgba(108,140,255,.2)}
.fs-recommended{border-color:var(--accent);background:rgba(108,140,255,.08)}
.fs-sprite-wrap{margin-bottom:4px}.fs-sprite{width:56px;height:56px;object-fit:contain}
.fs-name{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-types{display:flex;gap:2px;justify-content:center;margin:3px 0}.fs-types .tbadge{font-size:7px;padding:1px 4px}
.fs-hp{font-size:10px;font-weight:600;margin-bottom:3px}
.fs-tag{font-size:8px;font-weight:800;color:var(--accent);text-transform:uppercase;margin-top:4px;letter-spacing:.5px}

#between-screen{align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#0f1a30,var(--bg) 70%)}
.between-card{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:44px 40px;text-align:center;max-width:520px;width:92%}
.between-card h2{font-size:30px;font-weight:900;margin-bottom:8px;background:linear-gradient(135deg,var(--success),#6ee7b7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.reward-text{color:var(--muted);font-size:16px;margin-bottom:4px}
.total-text{color:var(--gold);font-size:24px;font-weight:800;margin-bottom:24px}
.between-team{display:flex;gap:10px;justify-content:center;margin-bottom:28px;flex-wrap:wrap}
.btwn-slot{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:10px 12px;text-align:center;min-width:90px;display:flex;flex-direction:column;align-items:center}
.btwn-slot.fainted{opacity:.4;border-color:var(--danger)}.btwn-slot.needs-heal{border-color:var(--warn)}
.btwn-sprite-wrap{margin-bottom:4px}
.btwn-sprite{width:52px;height:52px;object-fit:contain;display:block}
.btwn-fainted{filter:grayscale(1) brightness(.5)}
.btwn-info{text-align:center}
.btwn-name{font-size:11px;font-weight:700;margin-bottom:2px}.btwn-hp{font-size:10px;font-weight:600}
.btwn-heal{margin-top:6px;padding:5px 10px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--success);font-size:10px;cursor:pointer;font-weight:700;display:block;width:100%}
.btwn-heal.revive{color:var(--accent2)}
.between-actions{display:flex;gap:12px;justify-content:center}
.btn-next{padding:16px 32px;border-radius:14px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:16px;font-weight:800;cursor:pointer}
.btn-flee-safe{padding:16px 32px;border-radius:14px;border:2px solid var(--gold);background:transparent;color:var(--gold);font-size:16px;font-weight:700;cursor:pointer}
#gameover-screen{align-items:center;justify-content:center}
.defeat-bg{background:radial-gradient(ellipse at center,#2a0a15,var(--bg) 70%)}
.victory-bg{background:radial-gradient(ellipse at center,#0a2a15,var(--bg) 70%)}
.gameover-card{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:52px 44px;text-align:center;max-width:440px;width:92%}
.gameover-card h2{font-size:36px;font-weight:900;margin-bottom:24px}
.go-stats{margin-bottom:28px}.go-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px}
.go-row span:first-child{color:var(--muted)}.go-row span:last-child{font-weight:700;color:var(--gold)}
.btn-restart{padding:16px 36px;border-radius:14px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:16px;font-weight:800;cursor:pointer}
.tbadge{font-size:9px;padding:2px 7px;border-radius:5px;color:#fff;font-weight:700;text-transform:uppercase}
.type-normal{background:#a8a878}.type-fire{background:#f08030}.type-water{background:#6890f0}.type-electric{background:#f8d030;color:#1a1a2e}.type-grass{background:#78c850}.type-ice{background:#98d8d8;color:#1a1a2e}.type-fighting{background:#c03028}.type-poison{background:#a040a0}.type-ground{background:#e0c068;color:#1a1a2e}.type-flying{background:#a890f0}.type-psychic{background:#f85888}.type-bug{background:#a8b820;color:#1a1a2e}.type-rock{background:#b8a038}.type-ghost{background:#705898}.type-dragon{background:#7038f8}.type-dark{background:#705848}.type-steel{background:#b8b8d0;color:#1a1a2e}.type-fairy{background:#ee99ac}

/* ===== COMBAT ANIMATIONS ===== */

/* Damage popup */
.dmg-pop{position:absolute;top:10%;left:50%;transform:translateX(-50%);font-size:22px;font-weight:900;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7);pointer-events:none;z-index:20;animation:dmgFloat 1s ease-out forwards}
.dmg-super{color:#f8d030;font-size:26px;text-shadow:0 0 10px #f8d030,0 2px 6px rgba(0,0,0,.7)}
.dmg-crit{color:#ef4444;font-size:26px;text-shadow:0 0 10px #ef4444,0 2px 6px rgba(0,0,0,.7)}
@keyframes dmgFloat{0%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}30%{transform:translateX(-50%) translateY(-20px) scale(1.3)}100%{opacity:0;transform:translateX(-50%) translateY(-50px) scale(0.8)}}

/* Stat change popup */
.stat-popup{position:absolute;top:20%;left:50%;transform:translateX(-50%);font-size:13px;font-weight:800;padding:4px 12px;border-radius:8px;pointer-events:none;z-index:22;white-space:nowrap;animation:statPop 1.2s ease-out forwards}
.stat-up{background:rgba(34,197,94,.2);color:#22c55e;border:1px solid rgba(34,197,94,.4);text-shadow:0 0 6px rgba(34,197,94,.5)}
.stat-down{background:rgba(239,68,68,.2);color:#ef4444;border:1px solid rgba(239,68,68,.4);text-shadow:0 0 6px rgba(239,68,68,.5)}
@keyframes statPop{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.8)}15%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.1)}30%{transform:translateX(-50%) translateY(-5px) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-30px)}}

/* Heal popup */
.heal-popup{position:absolute;top:15%;left:50%;transform:translateX(-50%);font-size:18px;font-weight:900;color:#22c55e;text-shadow:0 0 8px rgba(34,197,94,.5),0 2px 4px rgba(0,0,0,.5);pointer-events:none;z-index:21;animation:healFloat 1s ease-out forwards}
@keyframes healFloat{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.8)}20%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.2)}100%{opacity:0;transform:translateX(-50%) translateY(-40px) scale(1)}}

/* Move announce banner */
.mv-announce{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.75);backdrop-filter:blur(4px);padding:8px 24px;border-radius:12px;font-size:16px;font-weight:800;color:#fff;z-index:25;pointer-events:none;display:flex;align-items:center;gap:8px;animation:mvAnn 1.1s ease forwards;white-space:nowrap}
.mva-badge{padding:3px 8px;border-radius:6px;font-size:10px;font-weight:800;color:#fff}
@keyframes mvAnn{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) translateY(-15px)}}

/* Screen flash */
.pkm-flash{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:.25;animation:flashAnim .25s ease-out forwards}
@keyframes flashAnim{0%{opacity:.3}100%{opacity:0}}

/* Sprite hit blink */
.pkm-blink{animation:hitBlink .6s ease-in-out!important}
@keyframes hitBlink{0%{opacity:1}10%{opacity:.1}20%{opacity:1}30%{opacity:.1}40%{opacity:1}50%{opacity:.2}60%{opacity:1}100%{opacity:1}}

/* Super-effective screen shake */
.super-shake{animation:superShake .4s ease-in-out!important}
@keyframes superShake{0%{transform:translate(0)}10%{transform:translate(-4px,2px)}20%{transform:translate(4px,-2px)}30%{transform:translate(-3px,3px)}40%{transform:translate(3px,-3px)}50%{transform:translate(-2px,1px)}60%{transform:translate(2px,-1px)}70%{transform:translate(-1px,2px)}80%{transform:translate(1px,-2px)}90%{transform:translate(0,1px)}100%{transform:translate(0)}}

/* Type particles */
.tp{position:absolute;border-radius:50%;z-index:15;pointer-events:none;opacity:.9}
.tp-right{top:55%;left:30%;animation:tpRight .6s ease-out forwards}
.tp-left{top:35%;right:30%;animation:tpLeft .6s ease-out forwards}
@keyframes tpRight{0%{opacity:.9;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(calc(200px + var(--rx,0)*50px),calc(-60px + var(--ry,0)*40px)) scale(.3)}}
@keyframes tpLeft{0%{opacity:.9;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(calc(-200px + var(--rx,0)*50px),calc(60px + var(--ry,0)*40px)) scale(.3)}}

/* Stage icons */
.stage-icons{display:flex;gap:3px;margin-top:2px;flex-wrap:wrap;justify-content:center}
.stage-up{font-size:9px;font-weight:800;color:#22c55e;text-shadow:0 0 4px rgba(34,197,94,.4)}
.stage-down{font-size:9px;font-weight:800;color:#ef4444;text-shadow:0 0 4px rgba(239,68,68,.4)}

/* Status tags */
.status-tag{font-size:8px;font-weight:800;padding:1px 6px;border-radius:4px;text-transform:uppercase;display:inline-block;margin-bottom:2px}
.st-poison{background:#a040a0;color:#fff}.st-burn{background:#f08030;color:#fff}
.st-paralysis{background:#f8d030;color:#333}.st-sleep{background:#8892b0;color:#fff}
.st-freeze{background:#98d8d8;color:#333}.st-confusion{background:#f85888;color:#fff}

/* Battle log styles */
.log-super{color:#f8d030;font-weight:700}.log-weak{color:#8892b0;font-style:italic}
.log-stat-up{color:#22c55e}.log-stat-down{color:#ef4444}
.log-heal{color:#22c55e}.log-status{color:#a040a0}
.log-weather{color:#6ecbf5;font-weight:600}

/* Game Over — level-ups & evolutions */
.go-section{margin-top:16px;padding:12px;background:rgba(108,140,255,.08);border:1px solid rgba(108,140,255,.2);border-radius:12px}
.go-section h3{font-size:16px;margin-bottom:8px;background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.go-levelup{font-size:13px;padding:4px 0;color:#6ee7b7}
.go-evolution{font-size:14px;padding:6px 0;color:#fbbf24;animation:glow-pulse 1.5s infinite}
@keyframes glow-pulse{0%,100%{text-shadow:0 0 6px rgba(251,191,36,.3)}50%{text-shadow:0 0 18px rgba(251,191,36,.6)}}

::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* Team slot overrides — bigger, visible, with active indicator */
.team-bar{gap:8px;padding:10px 20px}
.team-slot{width:88px;padding:6px 6px 5px;flex-direction:column;gap:1px;background:rgba(15,20,35,.85);border:2px solid rgba(255,255,255,.08);position:relative}
.team-slot.active{border-color:#6c8cff;background:rgba(108,140,255,.1);box-shadow:0 0 16px rgba(108,140,255,.3)}
.ts-active-tag{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#6366f1,#818cf8);color:#fff;font-size:7px;font-weight:800;letter-spacing:.8px;padding:1px 8px;border-radius:0 0 6px 6px;z-index:2;white-space:nowrap;text-transform:uppercase}
.ts-sprite-wrap{width:52px;height:52px;display:flex;align-items:center;justify-content:center;margin:0 auto}
.ts-sprite{width:52px;height:52px;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.team-slot.fainted .ts-sprite{filter:grayscale(1) brightness(.5)}
.ts-name{font-size:9px;font-weight:700;color:#e2e8f0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:1.2}
.ts-hp-bar{width:100%;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.ts-hp-fill{height:100%;border-radius:2px;transition:width .3s}
.ts-hp-text{font-size:8px;color:#94a3b8;text-align:center;line-height:1}

/* ===== ATTACK ANIMATIONS ===== */
/* Player sprite lunge forward */
.atk-lunge-right{animation:lungeRight .5s ease forwards!important}
@keyframes lungeRight{0%{transform:translateX(0)}30%{transform:translateX(60px) scale(1.1)}60%{transform:translateX(60px) scale(1.1)}100%{transform:translateX(0) scale(1)}}
/* Enemy sprite lunge left */
.atk-lunge-left{animation:lungeLeft .5s ease forwards!important}
@keyframes lungeLeft{0%{transform:translateX(0)}30%{transform:translateX(-60px) scale(1.1)}60%{transform:translateX(-60px) scale(1.1)}100%{transform:translateX(0) scale(1)}}

/* Impact burst on target */
.atk-impact{position:absolute;top:50%;left:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;pointer-events:none;z-index:25;animation:impactBurst .6s ease-out forwards}
@keyframes impactBurst{0%{transform:scale(0);opacity:1}40%{transform:scale(1.2);opacity:.8}100%{transform:scale(2);opacity:0}}

/* Type-specific attack overlays */
.atk-overlay{position:absolute;inset:0;pointer-events:none;z-index:22;overflow:hidden}
/* Fire: rising flames */
.atk-fire .atk-particle{position:absolute;bottom:-20px;border-radius:50%;animation:fireRise .8s ease-out forwards}
@keyframes fireRise{0%{transform:translateY(0) scale(.5);opacity:1}50%{opacity:.8}100%{transform:translateY(-200px) scale(0);opacity:0}}
/* Water: splash waves */
.atk-water .atk-particle{position:absolute;border-radius:50%;animation:waterSplash .7s ease-out forwards}
@keyframes waterSplash{0%{transform:scale(.3);opacity:1}100%{transform:scale(2.5);opacity:0}}
/* Electric: zigzag bolts */
.atk-electric .atk-particle{position:absolute;width:3px;height:20px;border-radius:2px;animation:boltFlash .4s steps(2) forwards}
@keyframes boltFlash{0%{opacity:1;transform:rotate(0deg) scaleY(1)}25%{transform:rotate(15deg) scaleY(1.5)}50%{opacity:0}51%{opacity:1;transform:rotate(-20deg) scaleY(1.2)}100%{opacity:0;transform:rotate(0) scaleY(0)}}
/* Grass: leaf scatter */
.atk-grass .atk-particle{position:absolute;width:12px;height:8px;border-radius:50% 0;animation:leafScatter .9s ease-out forwards}
@keyframes leafScatter{0%{transform:rotate(0) translate(0);opacity:1}100%{transform:rotate(360deg) translate(var(--tx,50px),var(--ty,-80px));opacity:0}}
/* Ice: crystal shatter */
.atk-ice .atk-particle{position:absolute;width:8px;height:8px;clip-path:polygon(50% 0%,0% 100%,100% 100%);animation:iceShatter .7s ease-out forwards}
@keyframes iceShatter{0%{transform:scale(0) rotate(0);opacity:1}50%{transform:scale(1.5) rotate(90deg);opacity:.8}100%{transform:scale(0) rotate(180deg) translate(var(--tx,0),var(--ty,0));opacity:0}}
/* Generic: energy burst */
.atk-generic .atk-particle{position:absolute;border-radius:50%;animation:energyBurst .6s ease-out forwards}
@keyframes energyBurst{0%{transform:scale(.2);opacity:1}100%{transform:scale(3) translate(var(--tx,0),var(--ty,0));opacity:0}}

/* Slash marks for physical */
.atk-slash{position:absolute;top:50%;left:50%;width:0;height:0;z-index:24;pointer-events:none}
.slash-line{position:absolute;width:80px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff,transparent);transform-origin:center;animation:slashSwipe .35s ease-out forwards}
@keyframes slashSwipe{0%{transform:rotate(var(--r,0deg)) scaleX(0);opacity:1}60%{transform:rotate(var(--r,0deg)) scaleX(1.2);opacity:1}100%{transform:rotate(var(--r,0deg)) scaleX(0);opacity:0}}

/* ===== CAMERA SYSTEM ===== */
.battle-field{transition:transform .45s cubic-bezier(.25,.46,.45,.94);transform-origin:center center;will-change:transform}
/* Camera presets */
.cam-player-focus{transform:scale(1.06) translateX(4%) translateY(3%)}
.cam-enemy-focus{transform:scale(1.06) translateX(-4%) translateY(-2%)}
.cam-player-impact{transform:scale(1.08) translateX(-3%) translateY(2%)}
.cam-enemy-impact{transform:scale(1.08) translateX(3%) translateY(-1%)}
.cam-wide{transform:scale(1.03) translateY(1%)}
.cam-shake-zoom{transform:scale(1.06);animation:camShake .3s ease-out}
.cam-reset{transform:scale(1) translate(0,0)}
@keyframes camShake{0%{transform:scale(1.06) translate(0)}20%{transform:scale(1.06) translate(-4px,-2px)}40%{transform:scale(1.06) translate(4px,2px)}60%{transform:scale(1.06) translate(-3px,2px)}80%{transform:scale(1.06) translate(2px,-1px)}100%{transform:scale(1.06) translate(0)}}

/* Music toggle */
.bgm-toggle{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:8px;padding:4px 10px;font-size:14px;cursor:pointer;margin-left:8px;transition:all .2s}
.bgm-toggle:hover{background:rgba(255,255,255,.2);transform:scale(1.1)}