/* ByteWorld — desktop OS aesthetic (FROM_SCRATCH §3). HTML5 / CSS3 custom props, Grid, Flexbox. */
:root {
  --bg-base: #0a1a14;
  --bg-surface: #0f2318;
  --bg-card: #142b1e;
  --border: #1a3a28;
  --border-strong: #2a5a3a;
  --text-primary: #c8e6c0;
  --text-secondary: #7ab890;
  --text-muted: #3a6a4a;
  --accent-gold: #e8b800;
  --accent-teal: #4aabcf;

  /* Element type colors */
  --bw-blaze-primary: #E8593C;   --bw-blaze-secondary: #F2A623;
  --bw-tide-primary: #2A7FD4;    --bw-tide-secondary: #5BB8F5;
  --bw-verdant-primary: #3E8E2F; --bw-verdant-secondary: #7BC44A;
  --bw-spark-primary: #E8B800;   --bw-spark-secondary: #FFE066;
  --bw-frost-primary: #4AABCF;   --bw-frost-secondary: #A8E4F5;
  --bw-gale-primary: #5BBFB0;    --bw-gale-secondary: #A8EDE5;
  --bw-terra-primary: #8B6914;   --bw-terra-secondary: #C4A44A;
  --bw-lumen-primary: #E8C840;   --bw-lumen-secondary: #FFF5B0;
  --bw-lunar-primary: #6644AA;   --bw-lunar-secondary: #C090FF;
  --bw-null-primary: #909090;    --bw-null-secondary: #C8C8C8;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start;
  padding: 22px; color: var(--text-primary);
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace; font-size: 14px;
  background:
    linear-gradient(0deg, #00000040 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, #00000030 1px, transparent 1px) 0 0 / 26px 100%,
    radial-gradient(1100px 520px at 50% -8%, #14342a 0%, transparent 60%), var(--bg-base);
}

/* ---- OS window frame ---- */
.os-window { width: 100%; max-width: 880px; background: var(--bg-surface);
  border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 60px #000a, inset 0 1px 0 #ffffff08; }
.os-titlebar { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: linear-gradient(180deg, #16321f, #0e2417); border-bottom: 1px solid var(--border-strong); }
.os-dots { display: flex; gap: 7px; }
.dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 1px 1px #0006; }
.dot.x { background: #e0533c; } .dot.m { background: #e8b800; } .dot.c { background: #4ab86a; }
.os-title { color: var(--text-secondary); letter-spacing: 1px; font-size: 13px; }
.os-title #os-operator { color: var(--accent-gold); }
.os-content { padding: 20px; min-height: 420px; }
.os-statusbar { padding: 8px 14px; background: #0c1f14; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px; letter-spacing: .5px; }

/* ---- generic screen ---- */
.screen h2 { margin: 0 0 12px; letter-spacing: 1px; color: var(--text-primary); }
.dim { color: var(--text-muted); font-size: 12.5px; }
code { background: #0c1f14; color: #9fd0b0; padding: 1px 6px; border-radius: 5px; }
pre { color: #ff9d9d; white-space: pre-wrap; }

/* ---- buttons ---- */
.btn { font-family: inherit; font-size: 14px; cursor: pointer; margin: 6px 8px 0 0;
  border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary);
  padding: 10px 18px; border-radius: 8px; transition: .12s; }
.btn:hover { border-color: var(--accent-teal); color: #eafff2; transform: translateY(-1px); }
.btn.primary { background: linear-gradient(180deg, #2f8f54, #1c6438); border-color: #3aa564; color: #eafff2; font-weight: 700; }
.btn.locked, .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- desktop hub ---- */
.desktop-area { position: relative; height: 250px; margin-bottom: 16px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 10px;
  background: linear-gradient(0deg, #00000035 1px, transparent 1px) 0 0 / 100% 24px,
              linear-gradient(90deg, #00000025 1px, transparent 1px) 0 0 / 24px 100%, #0b2016; }
.desktop-byte { position: absolute; left: 10%; top: 45%; text-align: center; cursor: pointer;
  animation: wander 22s ease-in-out infinite; }
.db-name { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.wander-sprite { animation: bob 1.7s ease-in-out infinite; }
.desktop-byte.poke .wander-sprite { animation: poke .42s; }
.desktop-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  color: var(--text-muted); font-size: 12px; text-align: center; }
@keyframes wander { 0%{left:8%;top:55%} 20%{left:68%;top:18%} 40%{left:38%;top:62%}
  60%{left:80%;top:48%} 80%{left:18%;top:24%} 100%{left:8%;top:55%} }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes poke { 0%{transform:scale(1)} 50%{transform:scale(1.3) rotate(-7deg)} 100%{transform:scale(1)} }
.os-menu { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---- sprites & badges ---- */
.sprite { width: 84px; height: 84px; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated; object-fit: contain; }
.sprite.sm { width: 44px; height: 44px; }
.element-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px;
  font-weight: 700; margin-right: 5px; text-shadow: 0 1px 0 #0003; }

/* ---- cards / starter ---- */
.starter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 12px; }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; text-align: center; }
.card.pickable { cursor: pointer; transition: .12s; }
.card.pickable:hover { border-color: var(--accent-teal); transform: translateY(-3px); box-shadow: 0 8px 22px #0006; }
.cname { font-weight: 700; margin-top: 6px; } .lv { color: var(--text-muted); font-weight: 400; font-size: 12px; }
.ctags { margin: 6px 0; } .cstage { color: var(--text-muted); font-size: 12px; }
.cstats { color: var(--text-secondary); font-size: 11px; margin-top: 5px; }

/* ---- team strip + bars ---- */
.team-bar { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.team-mon { display: flex; align-items: center; gap: 10px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; font-size: 12.5px; min-width: 230px; }
.team-mon.fainted { opacity: .45; }
.hpnum { font-size: 11px; color: var(--text-muted); margin-left: 6px; }
.bar { height: 7px; border-radius: 5px; background: #06120b; border: 1px solid var(--border); margin-top: 5px; overflow: hidden; }
.bar span { display: block; height: 100%; }
.bar.hp span { background: linear-gradient(90deg, #43c46a, #8be0a0); }

/* ---- battle ---- */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 14px 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; text-align: center; }
.vs-mid { color: var(--accent-gold); font-size: 12px; letter-spacing: 1px; }
.log { background: #06120b; border: 1px solid var(--border); border-radius: 9px; padding: 12px; margin: 12px 0;
  max-height: 220px; overflow: auto; font-size: 12.5px; line-height: 1.7; }
.log-line.p { color: #8be0a0; } .log-line.e { color: #ff9d9d; }
.log-line i { color: var(--text-muted); font-style: normal; }
.victory { text-align: center; margin: 14px 0; padding: 18px; border: 1px solid var(--accent-gold);
  border-radius: 10px; color: var(--accent-gold); font-size: 19px; letter-spacing: 1px;
  background: linear-gradient(180deg, #1d2a10, #14210b); }

/* ---- bytedex (evolution lines) ---- */
.dex-head { display: flex; align-items: center; justify-content: space-between; }
.dex-head h2 { margin: 0; }
.dex-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dex-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; }
.dex-cell { width: 92px; text-align: center; padding: 4px; border-radius: 8px; opacity: .55; }
.dex-cell.got { opacity: 1; background: #0e2417; box-shadow: inset 0 0 0 1px var(--border-strong); }
.dex-sprite { width: 52px; height: 52px; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated; cursor: pointer; transition: .12s; }
.dex-sprite:hover { transform: scale(1.18); filter: drop-shadow(0 3px 6px #000a); }
.dex-name { font-size: 11px; font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dex-cell .ctags { margin: 2px 0; transform: scale(.82); }
.dex-stage { font-size: 10px; color: var(--text-muted); }
.evo-arrow { color: var(--accent-teal); font-size: 18px; flex: 0 0 auto; }

/* ---- reference lightbox ---- */
.ref-modal { position: fixed; inset: 0; background: #000a; backdrop-filter: blur(3px); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.ref-card { position: relative; max-width: 380px; width: 100%; text-align: center; padding: 22px;
  background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 24px 70px #000c; }
.ref-close { position: absolute; top: 10px; right: 12px; background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 18px; }
.ref-close:hover { color: #fff; }
.ref-img { width: 280px; height: 280px; max-width: 100%; object-fit: contain; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated;
  background: #0a160f; border: 1px solid var(--border); border-radius: 10px; }
.ref-title { font-size: 18px; font-weight: 700; margin-top: 12px; letter-spacing: .5px; }
.got-tag { font-size: 12px; color: #43c46a; }
.ref-meta { color: var(--text-secondary); font-size: 12px; margin-top: 6px; }
.ref-stats { color: var(--text-primary); font-size: 12px; margin-top: 6px; }
.ref-concept { color: var(--text-muted); font-size: 12px; margin-top: 10px; line-height: 1.5; font-style: italic; }

/* ============ animated battle arena ============ */
.battle .arena { position: relative; height: 300px; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 80% 14%, #16342a 0%, transparent 55%),
    radial-gradient(120% 80% at 18% 86%, #142a40 0%, transparent 55%),
    linear-gradient(0deg, #00000030 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, #00000020 1px, transparent 1px) 0 0 / 26px 100%, #0a1a14; }
/* tsParticles burst layer — full-arena transparent canvas overlay, particles fired at the defender */
.ts-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.ts-layer canvas { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }

.combatant { position: absolute; width: 232px; }
.combatant.enemy { top: 14px; right: 16px; text-align: right; }
.combatant.player { bottom: 14px; left: 16px; }
.cb-info { display: inline-block; min-width: 168px; padding: 7px 11px; border: 1px solid var(--border);
  border-radius: 8px; background: #0c1f14cc; backdrop-filter: blur(2px); text-align: left; }
.cb-name { font-weight: 700; font-size: 13px; }
.cb-stage { position: relative; width: 124px; height: 124px; display: grid; place-items: center; }
.combatant.enemy .cb-stage { margin-left: auto; }
.cb-sprite { width: 108px; height: 108px; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated; object-fit: contain; filter: drop-shadow(0 6px 8px #0009); }
.combatant.player .cb-sprite { transform: scaleX(-1); }
.cb-info .bar { height: 8px; border-radius: 5px; background: #06120b; border: 1px solid var(--border); overflow: hidden; margin-top: 5px; }
.hpfill { display: block; height: 100%; background: linear-gradient(90deg, #43c46a, #8be0a0); transition: width .4s ease; }
.spfill { display: block; height: 100%; background: linear-gradient(90deg, #2aa7ff, #8be0ff); transition: width .3s ease; }
.cb-hpnum { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cb-pips { margin-top: 5px; }
.pip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-teal); margin: 0 2px; box-shadow: 0 0 4px var(--accent-teal); }
.pip.down { background: #36463c; box-shadow: none; opacity: .5; }
.pip.active { outline: 1px solid #ffffff66; outline-offset: 1px; }

/* swap-in */
.cb-stage.slide-in { animation: slidein .3s ease; }
@keyframes slidein { 0% { opacity: 0; transform: translateY(-18px) scale(.82); } 100% { opacity: 1; } }

/* downed pose — the faint GIF plays once (~1.26s) then locks here (src swaps to the static
   sprite, no endless re-loop). Applied instantly: the collapse GIF already supplies the motion,
   and an instant snap avoids a CSS transition that background-tab throttling can freeze. */
.cb-sprite.fainted {
  opacity: .42;
  filter: grayscale(.85) brightness(.7) drop-shadow(0 6px 8px #0009);
  transform: translateY(10px) rotate(-12deg);
}
/* player sprite is mirrored (scaleX(-1)) — keep the mirror AND droop (flip the rotate sign) */
.combatant.player .cb-sprite.fainted { transform: scaleX(-1) translateY(10px) rotate(12deg); }

/* ── BATTLE MOTION: attacker lunges + tilts TOWARD foe; defender recoils + tilts AWAY ──
   Animates .cb-stage only (NOT .cb-sprite) so the player's scaleX(-1) is preserved and
   translate/rotate read in screen space. Side-specific: player is bottom-left, enemy top-right. */
.cb-stage.lunge, .cb-stage.recoil { --pop: 1; }

/* ---- LUNGE (attacker) — player surges up-right + tilts clockwise; enemy mirrors ---- */
.combatant.player .cb-stage.lunge { animation: lunge-player 460ms cubic-bezier(.34,.5,.3,1) both; }
@keyframes lunge-player {
  0%   { transform: translate(0,0) rotate(0) scale(1); }
  35%  { transform: translate(22px,-16px) rotate(9deg) scale(var(--pop)); }
  55%  { transform: translate(26px,-19px) rotate(11deg) scale(var(--pop)); }
  100% { transform: translate(0,0) rotate(0) scale(1); }
}
.combatant.enemy .cb-stage.lunge { animation: lunge-enemy 460ms cubic-bezier(.34,.5,.3,1) both; }
@keyframes lunge-enemy {
  0%   { transform: translate(0,0) rotate(0) scale(1); }
  35%  { transform: translate(-22px,16px) rotate(-9deg) scale(var(--pop)); }
  55%  { transform: translate(-26px,19px) rotate(-11deg) scale(var(--pop)); }
  100% { transform: translate(0,0) rotate(0) scale(1); }
}
/* devastation: bigger surge + the old stage-pop scale folded in (only ONE anim runs on the stage) */
.cb-stage.lunge.heavy { --pop: 1.16; }
.combatant.player .cb-stage.lunge.heavy { animation: lunge-player-heavy 520ms cubic-bezier(.3,.55,.25,1) both; }
@keyframes lunge-player-heavy {
  0%   { transform: translate(0,0) rotate(0) scale(1); }
  40%  { transform: translate(34px,-24px) rotate(13deg) scale(1.16); }
  58%  { transform: translate(38px,-27px) rotate(14deg) scale(1.12); }
  100% { transform: translate(0,0) rotate(0) scale(1); }
}
.combatant.enemy .cb-stage.lunge.heavy { animation: lunge-enemy-heavy 520ms cubic-bezier(.3,.55,.25,1) both; }
@keyframes lunge-enemy-heavy {
  0%   { transform: translate(0,0) rotate(0) scale(1); }
  40%  { transform: translate(-34px,24px) rotate(-13deg) scale(1.16); }
  58%  { transform: translate(-38px,27px) rotate(-14deg) scale(1.12); }
  100% { transform: translate(0,0) rotate(0) scale(1); }
}

/* ---- RECOIL (defender) — knocked BACKWARD, tilts AWAY from attacker ---- */
.combatant.player .cb-stage.recoil { animation: recoil-player 440ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes recoil-player {
  0%   { transform: translate(0,0) rotate(0); }
  18%  { transform: translate(-16px,11px) rotate(-10deg); }
  40%  { transform: translate(-13px,9px) rotate(-8deg); }
  100% { transform: translate(0,0) rotate(0); }
}
.combatant.enemy .cb-stage.recoil { animation: recoil-enemy 440ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes recoil-enemy {
  0%   { transform: translate(0,0) rotate(0); }
  18%  { transform: translate(16px,-11px) rotate(10deg); }
  40%  { transform: translate(13px,-9px) rotate(8deg); }
  100% { transform: translate(0,0) rotate(0); }
}
/* devastation defender: harder/longer knockback (replaces the old non-directional defender-recoil) */
.combatant.player .cb-stage.recoil.heavy { animation: recoil-player-heavy 520ms cubic-bezier(.2,.72,.3,1) both; }
@keyframes recoil-player-heavy {
  0%   { transform: translate(0,0) rotate(0); }
  16%  { transform: translate(-26px,18px) rotate(-15deg); }
  42%  { transform: translate(-20px,14px) rotate(-11deg); }
  100% { transform: translate(0,0) rotate(0); }
}
.combatant.enemy .cb-stage.recoil.heavy { animation: recoil-enemy-heavy 520ms cubic-bezier(.2,.72,.3,1) both; }
@keyframes recoil-enemy-heavy {
  0%   { transform: translate(0,0) rotate(0); }
  16%  { transform: translate(26px,-18px) rotate(15deg); }
  42%  { transform: translate(20px,-14px) rotate(11deg); }
  100% { transform: translate(0,0) rotate(0); }
}

/* ── curated particles: FAMILY = shape/motion, ELEMENT = color (set inline by JS) ── */
.particle { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 6; }
.particle.accent { opacity: .9; }
.fx-critter   { border-radius: 50%; }
.fx-aqua      { border-radius: 40% 40% 60% 60%; width: 6px; height: 13px; }
.fx-avian     { border-radius: 2px; width: 3px; height: 15px; }
.fx-sprite    { clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); width: 11px; height: 11px; }
.fx-construct { border-radius: 2px; width: 9px; height: 9px; }
.fx-phantom   { clip-path: polygon(20% 0%,80% 10%,100% 40%,90% 80%,60% 100%,10% 90%,0% 50%,10% 20%); width: 10px; height: 10px; }
.fx-wyrm      { clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%); width: 13px; height: 13px; }
.fx-daemon    { clip-path: polygon(50% 0%,55% 45%,100% 50%,55% 55%,50% 100%,45% 55%,0% 50%,45% 45%); width: 11px; height: 11px; }
@keyframes fx-critter-move { 0% { transform: translate(0,0) scale(1); opacity: 1; } 60% { transform: translate(calc(var(--dx)*60px), calc(var(--dy)*30px)) scale(.8); opacity: .8; } 100% { transform: translate(calc(var(--dx)*80px), calc(var(--dy)*60px + 20px)) scale(.3); opacity: 0; } }
@keyframes fx-aqua-move { 0% { transform: translate(0,0) rotate(var(--angle)) scale(1); opacity: 1; } 50% { transform: translate(calc(var(--dx)*50px), calc(var(--dy)*20px)) rotate(var(--angle)) scale(.9); opacity: .9; } 100% { transform: translate(calc(var(--dx)*40px), calc(var(--dy)*20px + 40px)) rotate(var(--angle)) scale(.2); opacity: 0; } }
@keyframes fx-avian-move { 0% { transform: translate(0,0) rotate(var(--angle)) scaleY(1); opacity: 1; } 100% { transform: translate(calc(var(--dx)*100px), calc(var(--dy)*100px)) rotate(var(--angle)) scaleY(.3); opacity: 0; } }
@keyframes fx-sprite-move { 0% { transform: translate(0,0) scale(.5) rotate(0); opacity: 1; } 50% { transform: translate(calc(var(--dx)*40px), calc(var(--dy)*40px - 10px)) scale(1) rotate(180deg); opacity: .8; } 100% { transform: translate(calc(var(--dx)*60px), calc(var(--dy)*60px - 30px)) scale(.3) rotate(360deg); opacity: 0; } }
@keyframes fx-construct-move { 0% { transform: translate(0,0) scale(1); opacity: 1; } 40% { transform: translate(calc(var(--dx)*60px), calc(var(--dy)*20px)) scale(.9); opacity: 1; } 100% { transform: translate(calc(var(--dx)*60px), calc(var(--dy)*20px + 50px)) scale(.5); opacity: 0; } }
@keyframes fx-phantom-move { 0% { transform: translate(0,0) scale(1); opacity: .9; } 25% { transform: translate(calc(var(--dx)*30px), calc(var(--dy)*30px)) scale(1.1); opacity: 0; } 50% { transform: translate(calc(var(--dx)*55px), calc(var(--dy)*25px)) scale(.8); opacity: .7; } 100% { transform: translate(calc(var(--dx)*80px), calc(var(--dy)*50px)) scale(.2); opacity: 0; } }
@keyframes fx-wyrm-move { 0% { transform: translate(0,0) rotate(0) scale(1.2); opacity: 1; } 100% { transform: translate(calc(var(--dx)*70px), calc(var(--dy)*70px)) rotate(180deg) scale(.3); opacity: 0; } }
@keyframes fx-daemon-move { 0% { transform: translate(0,0) rotate(var(--angle)) scale(1); opacity: 1; } 100% { transform: translate(calc(var(--dx)*90px), calc(var(--dy)*90px)) rotate(calc(var(--angle) + 45deg)) scale(.1); opacity: 0; } }

/* ── element impact at point of contact ── */
.impact { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; border-radius: 50%; pointer-events: none; z-index: 7; }
@keyframes impact-expand { 0% { transform: translate(-50%,-50%) scale(calc(.1 * var(--iscale,1))); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(calc(2.5 * var(--iscale,1))); opacity: 0; } }
.impact-explosion { background: radial-gradient(circle, #fff 0%, var(--impact-color) 40%, transparent 70%); box-shadow: var(--impact-glow); animation: impact-expand 400ms ease-out forwards; }
.impact-splash { border: 3px solid var(--impact-color); box-shadow: var(--impact-glow); animation: impact-expand 500ms ease-out forwards; }
.impact-burst { background: radial-gradient(circle, #fff 0%, var(--impact-color) 40%, transparent 70%); animation: impact-expand 350ms ease-out forwards; }
.impact-lightning { background: radial-gradient(circle, #fff 0%, var(--impact-color) 30%, transparent 60%); clip-path: polygon(50% 0%,52% 48%,100% 45%,54% 52%,50% 100%,48% 52%,0% 55%,46% 48%); box-shadow: var(--impact-glow); animation: impact-expand 300ms ease-out forwards; }
.impact-shatter { background: radial-gradient(circle, #fff 0%, var(--impact-color) 50%, transparent 70%); clip-path: polygon(50% 0%,55% 35%,90% 10%,65% 45%,100% 50%,65% 55%,90% 90%,55% 65%,50% 100%,45% 65%,10% 90%,35% 55%,0% 50%,35% 45%,10% 10%,45% 35%); animation: impact-expand 450ms ease-out forwards; }
.impact-spiral { border: 2px solid var(--impact-color); animation: impact-expand 400ms ease-out forwards, impact-rotate 400ms linear forwards; }
@keyframes impact-rotate { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg) scale(calc(2.5 * var(--iscale,1))); } }
.impact-quake { width: 120px; height: 20px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--impact-color), transparent); animation: impact-expand 350ms ease-out forwards; }
.impact-radiance { background: radial-gradient(circle, #fff 0%, var(--impact-color) 30%, transparent 60%); box-shadow: var(--impact-glow); animation: impact-expand 500ms ease-out forwards; }
.impact-corruption { background: radial-gradient(circle, #fff 0%, var(--impact-color) 40%, transparent 70%); box-shadow: var(--impact-glow); animation: impact-expand 600ms ease-out forwards, corruption-glitch 600ms steps(3) forwards; }
@keyframes corruption-glitch { 0% { filter: hue-rotate(0); } 33% { filter: hue-rotate(90deg) saturate(2); } 66% { filter: hue-rotate(-90deg) saturate(3); } 100% { filter: hue-rotate(0); } }
.impact-static { background: radial-gradient(circle, var(--impact-color) 0%, transparent 60%); filter: grayscale(1); animation: impact-expand 300ms ease-out forwards; }

/* ── screen shake (none on resisted) ── */
@keyframes shake-super { 0%,100% { transform: translate(0,0); } 15% { transform: translate(calc(-1*var(--shake-mag)), var(--shake-mag)); } 30% { transform: translate(var(--shake-mag), calc(-1*var(--shake-mag))); } 45% { transform: translate(calc(-.7*var(--shake-mag)), 0); } 60% { transform: translate(var(--shake-mag), var(--shake-mag)); } 75% { transform: translate(0, calc(-.5*var(--shake-mag))); } }
@keyframes shake-heavy { 0%,100% { transform: translate(0,0); } 20% { transform: translate(calc(-1*var(--shake-mag)), 0); } 50% { transform: translate(var(--shake-mag), calc(-.5*var(--shake-mag))); } 80% { transform: translate(0, var(--shake-mag)); } }
@keyframes shake-normal { 0%,100% { transform: translate(0,0); } 33% { transform: translate(calc(-1*var(--shake-mag)), 0); } 66% { transform: translate(var(--shake-mag), 0); } }
.arena.shake-super { animation: shake-super 400ms ease-out; }
.arena.shake-heavy { animation: shake-heavy 300ms ease-out; }
.arena.shake-normal { animation: shake-normal 200ms ease-out; }

/* ── floating damage + type label ── */
@keyframes float-damage { 0% { transform: translate(-50%,0) scale(1); opacity: 1; } 20% { transform: translate(-50%,-8px) scale(1.2); opacity: 1; } 100% { transform: translate(-50%,-44px) scale(.8); opacity: 0; } }
.damage-float { position: absolute; left: 50%; top: 36%; font-weight: bold; pointer-events: none; z-index: 8; animation: float-damage 900ms ease-out forwards; }
.damage-float.super { font-size: 22px; color: #FFE066; text-shadow: 0 0 8px #E8B800, 1px 1px 0 #000; }
.damage-float.normal { font-size: 17px; color: #fff; text-shadow: 1px 1px 0 #000; }
.damage-float.resisted { font-size: 13px; color: #7ab890; opacity: .75; }
.type-label { position: absolute; left: 50%; top: -8px; white-space: nowrap; font-weight: 800; pointer-events: none; z-index: 8; animation: float-damage 820ms ease-out forwards; }
.type-label.super { font-size: 13px; color: #FFE066; text-shadow: 0 0 8px #E8B800, 1px 1px 0 #000; }
.type-label.resisted { font-size: 12px; color: #9fb6cf; opacity: .8; }

/* ── traveling projectile (attacker → defender) ── */
.projectile { position: absolute; width: 30px; height: 9px; border-radius: 6px; pointer-events: none; z-index: 9;
  transform: translate(-50%, -50%) rotate(var(--ang, 0deg));
  background: linear-gradient(90deg, transparent 0%, var(--c, #fff) 55%, #fff 100%); }
.projectile::after { content: ''; position: absolute; right: -3px; top: 50%; width: 12px; height: 12px; transform: translate(0, -50%);
  border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--c, #fff) 70%, transparent 100%); }

/* ── hit-tier labels (crit/super/resisted float up; devastation slams in) ── */
.hit-label { position: absolute; left: 50%; top: -10px; white-space: nowrap; font-weight: 800; pointer-events: none; z-index: 9; animation: float-damage 820ms ease-out forwards; }
.hit-label.crit { font-size: 15px; color: #FFE066; text-shadow: 0 0 8px #E8B800, 1px 1px 0 #000; }
.hit-label.super { font-size: 16px; color: #FF6060; text-shadow: 0 0 10px #FF4040, 1px 1px 0 #000; }
.hit-label.resisted { font-size: 12px; color: #9fb6cf; opacity: .85; }
.hit-label.devastation { font-size: 21px; font-weight: 900; color: #FFE066; text-shadow: 0 0 16px #E8B800, 0 0 32px #FF4040, 2px 2px 0 #000; animation: label-slam 900ms ease-out forwards; }
@keyframes label-slam { 0% { transform: translate(-50%,-34px) scale(1.4); opacity: 0; } 30% { transform: translate(-50%,4px) scale(.95); opacity: 1; } 60% { transform: translate(-50%,0) scale(1); opacity: 1; } 100% { transform: translate(-50%,-22px) scale(.9); opacity: 0; } }

/* ── tiered damage numbers ── */
.damage-float.crit { font-size: 19px; color: #FFE066; text-shadow: 0 0 8px #E8B800, 1px 1px 0 #000; }
.damage-float.devastation { font-size: 25px; font-weight: 900; color: #FFE066; text-shadow: 0 0 16px #E8B800, 0 0 32px #FF4040, 1px 1px 0 #000; animation: float-damage-slam 950ms ease-out forwards; }
@keyframes float-damage-slam { 0% { transform: translate(-50%,-16px) scale(1.5); opacity: 0; } 20% { transform: translate(-50%,5px) scale(1.1); opacity: 1; } 50% { transform: translate(-50%,0) scale(1); opacity: 1; } 100% { transform: translate(-50%,-38px) scale(.8); opacity: 0; } }

/* ── crit ring + super/devastation echo rings ── */
.impact-crit-ring { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; pointer-events: none; z-index: 7; animation: crit-ring 250ms ease-out forwards; }
@keyframes crit-ring { 0% { transform: translate(-50%,-50%) scale(.2); opacity: .9; border-width: 3px; } 100% { transform: translate(-50%,-50%) scale(2); opacity: 0; border-width: 1px; } }
.impact-echo-ring { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--impact-color, #fff); pointer-events: none; z-index: 7; animation: echo-ring 360ms ease-out forwards; }
@keyframes echo-ring { 0% { transform: translate(-50%,-50%) scale(.8); opacity: .5; } 100% { transform: translate(-50%,-50%) scale(var(--echo-scale, 2)); opacity: 0; } }

/* ── super-effective defender tint ── */
.cb-stage.super-tint::after { content: ''; position: absolute; inset: 8px; border-radius: 8px; background: var(--tint-color, #fff); pointer-events: none; z-index: 5; mix-blend-mode: screen; animation: super-tint 320ms ease-out forwards; }
@keyframes super-tint { 0% { opacity: .55; } 100% { opacity: 0; } }

/* ── crit attacker flash ── */
/* (devastation attacker-pop + defender-knockback are now carried by the directional
    .lunge.heavy / .recoil.heavy motion below — see "BATTLE MOTION") */
.cb-sprite.crit-flash { animation: crit-flash 130ms ease-out; }
@keyframes crit-flash { 0% { filter: brightness(3) saturate(0) drop-shadow(0 0 10px #fff); } 100% { filter: drop-shadow(0 6px 8px #0009); } }

/* ── extra screen shakes (crit sharp, devastation heaviest) ── */
@keyframes shake-crit { 0%,100% { transform: translate(0,0); } 20% { transform: translate(calc(-1*var(--shake-mag)),0); } 40% { transform: translate(var(--shake-mag),0); } 60% { transform: translate(calc(-.5*var(--shake-mag)),0); } }
.arena.shake-crit { animation: shake-crit 180ms ease-out; }
@keyframes shake-devastation { 0%,100% { transform: translate(0,0) rotate(0); } 10% { transform: translate(calc(-1*var(--shake-mag)),calc(-.5*var(--shake-mag))) rotate(-.5deg); } 20% { transform: translate(var(--shake-mag),var(--shake-mag)) rotate(.5deg); } 30% { transform: translate(calc(-.8*var(--shake-mag)),0) rotate(-.3deg); } 40% { transform: translate(var(--shake-mag),calc(-.8*var(--shake-mag))) rotate(.3deg); } 60% { transform: translate(calc(-.5*var(--shake-mag)),var(--shake-mag)); } 80% { transform: translate(calc(.3*var(--shake-mag)),0); } }
.arena.shake-devastation { animation: shake-devastation 500ms ease-out; }

/* ── devastation arena white flash ── */
.arena::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 30; }
.arena.devastation-flash::after { animation: devastation-flash 280ms ease-out forwards; }
@keyframes devastation-flash { 0% { opacity: 0; } 10% { opacity: .9; } 100% { opacity: 0; } }

.battle-banner { text-align: center; color: var(--text-secondary); font-size: 12px; margin: 9px 0; letter-spacing: 1px; }
.battle-log { max-height: 120px; }
.battle-result { text-align: center; margin: 6px 0; }
.battle-result.win { color: #8be0a0; } .battle-result.lose { color: #ff9d9d; }
.battle-footer { text-align: center; }

/* ── CHANGE 2: hybrid battle controls + manual action menu ── */
.battle-controls { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.mode-toggle { font-weight: 700; font-size: 12px; padding: 4px 12px; }
.mode-toggle.manual { background: var(--accent, #2bd49a); color: #06140d; }
.turn-indicator { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: var(--accent, #2bd49a); letter-spacing: 1px; min-height: 16px; }
.battle-ram { font-size: 12px; color: var(--text-secondary, #9fc4b2); }
.battle-ram b { color: #5bb8f5; }
.action-menu { border: 1px solid var(--accent, #2bd49a); border-radius: 8px; padding: 10px 12px; margin: 6px 0;
  background: linear-gradient(180deg, rgba(43,212,154,.1), rgba(0,0,0,.15)); }
.action-menu.hidden { display: none; }
.am-title { text-align: center; font-size: 13px; margin-bottom: 8px; }
.am-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.am-btn { font-size: 13px; padding: 7px 13px; }
.am-info { text-align: center; font-size: 11px; margin-top: 8px; }

/* ── CHANGE 3: sprite-driven scenes (overlay inside the OS window) ── */
.os-content { position: relative; }
.scene-overlay { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 28%, #16342a66 0%, transparent 62%),
    linear-gradient(0deg, #00000030 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, #00000020 1px, transparent 1px) 0 0 / 26px 100%, #0a1a14;
  opacity: 0; transition: opacity .22s ease; }
.scene-overlay.show { opacity: 1; }
.scene-stage { flex: 1; display: flex; align-items: flex-end; justify-content: space-around; padding: 20px 26px 10px; gap: 12px; }
.scene-actor { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.scene-actor.slot-left { margin-right: auto; } .scene-actor.slot-right { margin-left: auto; } .scene-actor.slot-center { margin: 0 auto; }
.scene-sprite { width: 128px; height: 128px; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated;
  object-fit: contain; filter: drop-shadow(0 8px 10px #0009); }
.scene-actor.slot-right .scene-sprite { transform: scaleX(-1); }
.npc-svg { width: 108px; height: 150px; filter: drop-shadow(0 8px 10px #0009); }
.scene-name { font-size: 12px; color: var(--text-secondary, #9fc4b2); font-weight: 700; }
.scene-actor.mood-happy { animation: scene-bounce 1s ease-in-out infinite; }
.scene-actor.mood-excited { animation: scene-bounce .55s ease-in-out infinite; }
.scene-actor.mood-excited .scene-sprite { filter: drop-shadow(0 0 9px #ffe16a) drop-shadow(0 8px 10px #0009); }
.scene-actor.mood-hurt { animation: scene-flinch .5s ease-out; }
.scene-actor.mood-hurt .scene-sprite { filter: brightness(1.4) saturate(.6) drop-shadow(0 8px 10px #0009); }
.scene-actor.mood-scared { opacity: .8; transform: translateY(4px); }
@keyframes scene-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes scene-flinch { 0% { transform: translateX(0); } 30% { transform: translateX(-7px); } 60% { transform: translateX(5px); } 100% { transform: translateX(0); } }
.scene-panel { border-top: 1px solid var(--accent, #2bd49a); background: #0c1f14ee; padding: 12px 16px; min-height: 60px; cursor: pointer; backdrop-filter: blur(2px); }
.scene-text { font-size: 14px; line-height: 1.5; color: var(--text, #dff0e6); min-height: 21px; }
.scene-speaker { color: var(--accent, #2bd49a); font-weight: 700; }
.scene-hint { font-size: 11px; text-align: right; margin-top: 6px; }
.scene-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.scene-choice { font-size: 13px; }

/* ── How to Play / tutorial ── */
.screen.howto h3 { margin: 0; font-size: 14px; }
.howto-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.howto-card { border: 1px solid var(--border, #1d3a2c); border-radius: 8px; padding: 12px 14px; background: rgba(255,255,255,.02); }
.howto-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.howto-icon { font-size: 22px; line-height: 1; }
.howto-body { font-size: 13px; line-height: 1.55; color: var(--text-secondary, #c3d8cc); margin: 0; }
.howto-body b { color: var(--text, #eafff2); }
.hk-wild { color: #3aa564; } .hk-elite { color: #c96b6b; } .hk-event { color: var(--accent, #2bd49a); } .hk-rest { color: #5bb8f5; }
.hk-glitch { color: #ff6ff0; } .hk-gold { color: #ffe16a; }

/* ── Variants: Glitch (cosmetic RGB-split) + Golden (+5% stats, gold glow) ── */
.sprite.v-golden { animation: golden-pulse 1.6s ease-in-out infinite; }
@keyframes golden-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px gold) saturate(1.25) brightness(1.05); }
  50% { filter: drop-shadow(0 0 10px #ffe16a) saturate(1.45) brightness(1.16); }
}
.sprite.v-glitch { animation: glitch-split 0.55s steps(2, end) infinite; }
@keyframes glitch-split {
  0%, 100% { filter: drop-shadow(1.4px 0 0 rgba(255,0,90,.75)) drop-shadow(-1.4px 0 0 rgba(0,225,255,.75)); }
  50% { filter: drop-shadow(-1.4px 0 0 rgba(255,0,90,.75)) drop-shadow(1.4px 0 0 rgba(0,225,255,.75)); }
}
.vbadge { font-size: 9px; font-weight: 700; letter-spacing: .5px; padding: 1px 5px; border-radius: 3px; vertical-align: middle; }
.vbadge.golden { background: #4a3a0e; color: #ffe16a; border: 1px solid #ffd23f; }
.vbadge.glitch { background: #2a0e2e; color: #ff6ff0; border: 1px solid #b14cff; }
.trace-line { font-size: 10px; color: #8fd6b0; margin-top: 2px; }

/* ── Bytedex tabs / variant marks / archive / logs ── */
.dex-tabs { display: flex; gap: 6px; margin: 8px 0 10px; flex-wrap: wrap; }
.dex-tab { background: var(--panel, #11271d); color: var(--text-secondary, #9fc4b2); border: 1px solid var(--border, #1d3a2c);
  padding: 5px 12px; border-radius: 5px 5px 0 0; cursor: pointer; font-size: 12px; }
.dex-tab.on { background: var(--accent, #2bd49a); color: #06140d; font-weight: 700; }
.dex-vmark { font-size: 11px; }
.dex-vmark.golden { color: #ffe16a; } .dex-vmark.glitch { color: #ff6ff0; }
.dex-cell.seen { opacity: .82; }
.dex-cell.seen .sprite { filter: grayscale(.35) brightness(.92); }
.dex-cell.mystery { opacity: .55; }
.dex-cell.mystery .dex-name { color: var(--text-secondary, #7fa893); letter-spacing: 2px; }
.dex-sprite.silhouette { filter: brightness(0) opacity(.45); cursor: default; }
.archive-card .archive-meta { font-size: 10px; color: var(--text-secondary, #7fa893); opacity: .8; margin-top: 2px; }
.dex-logs .log-head { margin: 12px 0 4px; font-size: 13px; }
.dex-logs .log-head.win { color: #8be0a0; } .dex-logs .log-head.loss { color: #ff9d9d; }
.log-list { display: flex; flex-direction: column; gap: 3px; }
.log-row { font-size: 12px; padding: 4px 8px; border-radius: 4px; background: rgba(255,255,255,.025); border-left: 2px solid transparent; }
.log-row.win { border-left-color: #5ec98a; } .log-row.loss { border-left-color: #c96b6b; } .log-row.dim { opacity: .55; }
.ref-variants { font-size: 11px; color: #c9b06a; margin: 3px 0; }

/* ── Random event nodes ── */
.event-card { background: linear-gradient(180deg, rgba(43,212,154,.08), rgba(0,0,0,.12)); border: 1px solid var(--border, #1d3a2c);
  border-radius: 8px; padding: 14px 16px; margin: 10px 0; text-align: center; }
.event-icon { font-size: 30px; line-height: 1; margin-bottom: 4px; }
.event-title { margin: 2px 0 4px; color: var(--accent, #2bd49a); }
.event-desc { margin: 0 auto 10px; max-width: 460px; }
.event-choices { display: flex; flex-direction: column; gap: 7px; align-items: stretch; max-width: 460px; margin: 0 auto; }
.event-choices .btn { width: 100%; }

/* ── Node selection (4-option branching choice) ── */
.node-prompt { margin: 12px 0 6px; letter-spacing: .04em; }
.node-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 10px; max-width: 560px; }
.node-option { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; padding: 12px 14px; height: 100%; margin: 0; white-space: normal; }
.node-opt-icon { font-size: 24px; line-height: 1; }
.node-opt-label { font-weight: 700; color: #eafff2; font-size: 14px; }
.node-opt-preview { font-size: 11px; line-height: 1.35; }
.node-option.no-wild  { border-left: 3px solid #3aa564; }
.node-option.no-elite { border-left: 3px solid #c96b6b; }
.node-option.no-event { border-left: 3px solid var(--accent, #2bd49a); }
.node-option.no-rest  { border-left: 3px solid #5bb8f5; }
.node-option:hover { transform: translateY(-2px); }
@media (max-width: 520px) { .node-grid { grid-template-columns: 1fr; } }

/* ── Achievements: awards tab + toast ── */
.awards-grid { display: flex; flex-direction: column; gap: 6px; }
.award-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px;
  background: rgba(255,255,255,.025); border: 1px solid var(--border, #1d3a2c); opacity: .5; }
.award-row.on { opacity: 1; border-color: #c9a23f; background: rgba(201,162,63,.08); }
.award-icon { font-size: 22px; }
.award-name { font-weight: 700; color: var(--text, #dff0e6); }
.award-desc { font-size: 11px; }
.bw-toast { position: fixed; right: 18px; bottom: 18px; z-index: 9999; max-width: 320px;
  background: #12251c; border: 1px solid #2bd49a; border-left: 4px solid #2bd49a; color: #dff0e6;
  padding: 10px 14px; border-radius: 7px; font-size: 13px; box-shadow: 0 8px 28px rgba(0,0,0,.5);
  transform: translateX(120%); opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .35s; }
.bw-toast.show { transform: translateX(0); opacity: 1; }
.bw-toast.achievement { border-color: #ffd23f; border-left-color: #ffd23f; }

/* ── Move system: status badges, 4-move menu, super-prompt, swap screen ── */
.cb-status { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; min-height: 15px; }
.st-badge { font-size: 11px; padding: 0 4px; border-radius: 4px; background: #00000080; border: 1px solid #ffffff22; line-height: 16px; }
.st-burn { color: #ff8a4c; } .st-poison { color: #c98aff; } .st-paralysis { color: #ffe16a; }
.st-freeze { color: #9fe6ff; } .st-fortify { color: #e8c98a; } .st-phase { color: #6fe0d0; }
.st-oc { color: #ffd23f; } .st-fw { color: #9fc4b2; }
.ap-toggle { font-size: 11px; }

.move-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; }
.move-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 11px; height: auto; }
.move-btn .mv-top { font-size: 13px; } .move-btn .mv-icon { font-size: 15px; }
.move-btn .mv-desc { font-size: 10px; color: var(--text-secondary, #9fc4b2); }
.move-btn.cd { border-color: #c9a23f; } .move-btn.cd .mv-desc { color: #e8c98a; }
.move-btn.used { opacity: .5; }
.am-sub { text-align: center; font-size: 12px; margin-bottom: 8px; }
.am-title.sp-warn { color: #ffce5a; }

.swap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.swap-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; height: auto; }
.swap-card .sprite.sm { width: 48px; height: 48px; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated; }
.swap-card .sc-name { font-size: 12px; font-weight: 700; } .swap-card .sc-hp { font-size: 11px; color: var(--text-secondary, #9fc4b2); }
.swap-card.fainted { opacity: .45; }
.type-badge-swap { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-top: 2px; }
.swap-card.strong { border: 2px solid #3E8E2F; box-shadow: 0 0 10px #3E8E2F88; }
.swap-card.strong .type-badge-swap { background: #3E8E2F; color: #EDF7E8; }
.swap-card.weak { border: 2px solid #C02828; filter: brightness(0.85); }
.swap-card.weak .type-badge-swap { background: #C02828; color: #FFE0E0; }
@media (max-width: 520px) { .move-grid, .swap-grid { grid-template-columns: 1fr; } }

/* ═══════════════════ Bespoke move VFX ═══════════════════ */
/* — Persistent status overlays (filters on the active sprite) — */
.cb-sprite.fxs-burn { animation: fxsBurn .7s steps(2, end) infinite; }
@keyframes fxsBurn { 0%,100% { filter: brightness(1.05) drop-shadow(0 0 5px #ff7a3c); } 50% { filter: brightness(1.16) drop-shadow(0 0 10px #ffae5a); } }
.cb-sprite.fxs-poison { filter: hue-rotate(55deg) saturate(1.35) brightness(.95) drop-shadow(0 0 6px #b06aff); animation: fxsPoison 1.3s ease-in-out infinite; }
@keyframes fxsPoison { 0%,100% { opacity: 1; } 50% { opacity: .82; } }
.cb-sprite.fxs-paralysis { animation: fxsPara .5s steps(2, end) infinite; }
@keyframes fxsPara { 0%,100% { filter: drop-shadow(0 0 4px #ffe16a); } 50% { filter: brightness(1.35) drop-shadow(0 0 11px #fff06a); } }
.cb-sprite.fxs-freeze { filter: saturate(.25) brightness(.82) drop-shadow(0 0 7px #9fe6ff); }
.cb-sprite.fxs-fortify { filter: drop-shadow(0 0 7px #e8c98a) brightness(1.05); }
.cb-sprite.fxs-phase { animation: fxsPhase 1s ease-in-out infinite; }
@keyframes fxsPhase { 0%,100% { opacity: 1; filter: drop-shadow(0 0 5px #6fe0d0); } 50% { opacity: .55; filter: drop-shadow(0 0 12px #6fe0d0); } }
.cb-sprite.flash-zap { filter: brightness(2.3) sepia(1) saturate(7) hue-rotate(2deg) !important; }
.cb-sprite.flash-ice { filter: brightness(1.7) saturate(0) sepia(1) hue-rotate(165deg) !important; }

/* — Expanding rings — */
.vfx-ring { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid #fff; pointer-events: none; transform: scale(.3); opacity: .9; animation: vfxRing .6s ease-out forwards; z-index: 6; }
@keyframes vfxRing { to { transform: scale(2.7); opacity: 0; } }
.vfx-ring.r-burn { border-color: #ff8a4c; box-shadow: 0 0 15px #ff8a4c; }
.vfx-ring.r-poison { border-color: #c98aff; border-style: dashed; box-shadow: 0 0 13px #c98aff; }
.vfx-ring.r-zap { border-color: #ffe16a; box-shadow: 0 0 17px #ffe16a; }
.vfx-ring.r-ice { border-color: #9fe6ff; border-style: dashed; box-shadow: 0 0 15px #9fe6ff; }
.vfx-ring.r-vortex { border-color: #c98aff; border-width: 4px; animation: vfxVortex .66s ease-in forwards; }
@keyframes vfxVortex { 0% { transform: scale(2.5) rotate(0); opacity: .9; } 100% { transform: scale(.15) rotate(230deg); opacity: 0; } }
.vfx-ring.r-debug { border-color: #6fe0d0; border-style: dotted; }
.vfx-ring.r-exploit { border-color: #ff5a5a; box-shadow: 0 0 17px #ff5a5a; }
.vfx-ring.r-sync { border-color: #fff; border-style: double; border-width: 5px; }
.vfx-ring.r-ping { border-color: #7fffd0; animation: vfxRing 1s ease-out forwards; }
.vfx-ring.r-tide { border-color: #4AABCF; box-shadow: 0 0 14px #4AABCF; animation: vfxRing .8s ease-out forwards; }

/* — Floating motes — */
.vfx-mote { position: absolute; bottom: 22%; font-size: 15px; line-height: 1; pointer-events: none; opacity: 0; animation: vfxMote 1s ease-out forwards; z-index: 6; text-shadow: 0 0 6px currentColor; }
@keyframes vfxMote { 0% { opacity: 0; transform: translate(0, 10px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -48px) scale(1.1); } }
.vfx-mote.m-burn { color: #ff8a4c; } .vfx-mote.m-poison { color: #c98aff; } .vfx-mote.m-code { color: #6fe0d0; font-family: monospace; font-weight: 700; }
.vfx-mote.m-exploit { color: #ff5a5a; } .vfx-mote.m-phase { color: #6fe0d0; } .vfx-mote.m-gold { color: #ffd23f; }
.vfx-mote.m-oc { color: #ffd23f; } .vfx-mote.m-heal { color: #7CFFA0; } .vfx-mote.m-tide { color: #4AABCF; }

/* — Data-stream (reverse drain) — */
.vfx-stream { position: absolute; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; z-index: 7; animation: vfxStream .6s ease-in forwards; }
@keyframes vfxStream { 0% { transform: translate(0,0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: .25; } }
.vfx-stream.s-drain { background: #c98aff; box-shadow: 0 0 10px #c98aff; }

/* — Revive beam — */
.vfx-beam { position: absolute; left: 50%; top: -45%; width: 40px; height: 155%; margin-left: -20px; pointer-events: none; z-index: 5; overflow: hidden; }
.vfx-beam > span { position: absolute; inset: 0; animation: vfxBeam 1s ease-out forwards; }
.vfx-beam.b-revive > span { background: linear-gradient(to bottom, transparent, rgba(255,233,168,.8) 45%, #fff 100%); box-shadow: 0 0 26px #ffd23f; }
@keyframes vfxBeam { 0% { transform: translateY(-60%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }

/* — Firewall shield — */
.vfx-shield { position: absolute; inset: -8% 6%; border-radius: 50% / 42%; border: 2px solid rgba(159,208,255,.8); background: radial-gradient(circle, rgba(111,176,255,.14), transparent 70%); box-shadow: 0 0 18px rgba(111,176,255,.55), inset 0 0 18px rgba(111,176,255,.4); pointer-events: none; z-index: 5; animation: vfxShield 1.1s ease-out forwards; }
@keyframes vfxShield { 0% { transform: scale(.6); opacity: 0; } 20% { opacity: 1; } 80% { opacity: .8; } 100% { transform: scale(1.06); opacity: 0; } }

/* — Fortify panels — */
.vfx-panels { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.vfx-panels i { position: absolute; bottom: 10%; width: 18px; height: 26px; background: linear-gradient(#e8c98a, #a9863f); border: 1px solid #6b5320; opacity: 0; animation: vfxPanel .9s ease-out forwards; }
.vfx-panels i:nth-child(1) { left: 22%; animation-delay: 0s; } .vfx-panels i:nth-child(2) { left: 46%; animation-delay: .08s; } .vfx-panels i:nth-child(3) { left: 70%; animation-delay: .16s; }
@keyframes vfxPanel { 0% { opacity: 0; transform: translateY(20px) scaleY(.4); } 30% { opacity: .95; } 100% { opacity: 0; transform: translateY(-6px) scaleY(1); } }

/* — Nullify arena pulse — */
.vfx-arena-pulse { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 3px solid #cfd6d2; box-shadow: 0 0 22px #cfd6d2; pointer-events: none; z-index: 8; animation: vfxArenaPulse .82s ease-out forwards; }
@keyframes vfxArenaPulse { 0% { transform: scale(.2); opacity: .95; } 100% { transform: scale(7.5); opacity: 0; } }

/* — Priority speed lines — */
.vfx-speedlines { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.vfx-speedlines i { position: absolute; height: 2px; width: 60%; left: -60%; background: linear-gradient(90deg, transparent, #fff, transparent); animation: vfxSpeed .5s ease-out forwards; }
.vfx-speedlines i:nth-child(1) { top: 30%; animation-delay: 0s; } .vfx-speedlines i:nth-child(2) { top: 45%; animation-delay: .06s; } .vfx-speedlines i:nth-child(3) { top: 60%; animation-delay: .12s; } .vfx-speedlines i:nth-child(4) { top: 75%; animation-delay: .18s; }
@keyframes vfxSpeed { 0% { left: -60%; opacity: 0; } 30% { opacity: 1; } 100% { left: 120%; opacity: 0; } }

/* — Phase dodge afterimage + sidestep — */
.vfx-afterimage { position: absolute; inset: 0; background: rgba(111,224,208,.22); border: 1px solid #6fe0d0; pointer-events: none; z-index: 4; animation: vfxAfter .5s ease-out forwards; }
@keyframes vfxAfter { 0% { opacity: .6; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-18px); } }
.cb-stage.vfx-sidestep { animation: vfxSidestep .5s ease-out; }
@keyframes vfxSidestep { 0% { transform: translateX(0); } 35% { transform: translateX(16px); } 100% { transform: translateX(0); } }

/* — Non-damage cast auras (no recoil on these moves, so animating the stage is safe) — */
.cb-stage.vfx-fortify-cast { animation: fxGlow .9s; --gc: #e8c98a; }
.cb-stage.vfx-phase-cast { animation: fxGlow .9s; --gc: #6fe0d0; }
.cb-stage.vfx-overclock { animation: fxGlow .9s; --gc: #ffd23f; }
.cb-stage.vfx-heal-cast { animation: fxGlow .9s; --gc: #7CFFA0; }
@keyframes fxGlow { 0%,100% { filter: none; } 45% { filter: drop-shadow(0 0 13px var(--gc, #fff)); } }

/* ═══════════════════ Compile capture VFX ═══════════════════ */
.compile-vfx { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 14px; background: radial-gradient(circle, rgba(10,26,20,.82), rgba(4,10,8,.94)); opacity: 0; transition: opacity .28s; }
.compile-vfx.show { opacity: 1; }
.cv-stage { position: relative; width: 160px; height: 160px; display: grid; place-items: center; }
.cv-sprite { width: 104px; height: 104px; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated; transform: scale(.7); opacity: .35; filter: brightness(.6); transition: transform .5s, opacity .5s, filter .5s; z-index: 2; }
.compile-vfx.captured .cv-sprite { transform: scale(1); opacity: 1; filter: brightness(1.15) drop-shadow(0 0 14px #3DDC97); }
.cv-rings { position: absolute; inset: 0; }
.cv-rings i { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 2px solid #3DDC97; border-radius: 50%; opacity: .5; animation: cvRing 1.6s linear infinite; }
.cv-rings i:nth-child(2) { animation-delay: .53s; } .cv-rings i:nth-child(3) { animation-delay: 1.06s; }
@keyframes cvRing { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(.35); opacity: 0; } }
.cv-mote { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3px; border-radius: 50%; background: #4DE6A8; box-shadow: 0 0 8px #4DE6A8; transform: translate(var(--sx), var(--sy)); opacity: 0; animation: cvMote 1.5s ease-in forwards; }
@keyframes cvMote { 0% { transform: translate(var(--sx), var(--sy)) scale(1); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(0, 0) scale(.3); opacity: .4; } }
.cv-flash { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #fff, transparent 60%); opacity: 0; z-index: 3; pointer-events: none; }
.compile-vfx.captured .cv-flash { animation: cvFlash .5s ease-out; }
@keyframes cvFlash { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .95; } 100% { opacity: 0; transform: scale(1.5); } }
.cv-label { font-weight: 800; letter-spacing: .08em; color: #BFF3DB; text-shadow: 0 0 10px #3DDC9788; font-size: 15px; text-align: center; }

/* ═══════════════════ Evolution VFX (per-element themed via --c1/--c2) ═══════════════════ */
.evo-vfx { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; align-content: center; gap: 18px; background: radial-gradient(circle, rgba(6,14,11,.86), rgba(2,6,5,.96)); opacity: 0; transition: opacity .34s; }
.evo-vfx.show { opacity: 1; }
.evo-aurora { position: absolute; inset: 0; background: radial-gradient(circle at 50% 44%, var(--c1), transparent 58%); opacity: 0; mix-blend-mode: screen; animation: evoAurora 1.7s ease-in forwards; }
@keyframes evoAurora { 0% { opacity: 0; } 100% { opacity: .5; } }
.evo-vfx.revealed .evo-aurora { animation: evoAuroraOut .9s ease-out forwards; }
@keyframes evoAuroraOut { from { opacity: .5; } to { opacity: .18; } }

.evo-stage { position: relative; width: 184px; height: 184px; display: grid; place-items: center; }
.evo-sprite { position: absolute; width: 116px; height: 116px; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated; }
.evo-sprite.from { z-index: 3; animation: evoFlicker 1.7s ease-in forwards; }
@keyframes evoFlicker {
  0%,18% { filter: none; transform: scale(1); }
  28% { filter: brightness(0) invert(1) drop-shadow(0 0 8px var(--c2)); }
  40% { filter: none; }
  54% { filter: brightness(0) invert(1) drop-shadow(0 0 10px var(--c2)); }
  64% { filter: none; }
  77% { filter: brightness(0) invert(1) drop-shadow(0 0 13px var(--c2)); }
  85% { filter: none; }
  100% { filter: brightness(0) invert(1) drop-shadow(0 0 18px var(--c2)); transform: scale(1.06); }
}
.evo-vfx.morph .evo-sprite.from { opacity: 0; transition: opacity .2s; }
.evo-sprite.to { z-index: 2; opacity: 0; filter: brightness(0) invert(1) drop-shadow(0 0 18px var(--c2)); transform: scale(1.06); }
.evo-vfx.morph .evo-sprite.to { opacity: 1; }
.evo-vfx.revealed .evo-sprite.to { opacity: 1; filter: brightness(1.12) drop-shadow(0 0 16px var(--c1)); transform: scale(1); transition: filter .5s ease-out, transform .5s ease-out; }

.evo-flash { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, #fff, transparent 62%); opacity: 0; z-index: 4; pointer-events: none; }
.evo-vfx.morph .evo-flash { animation: evoFlash .55s ease-out; }
@keyframes evoFlash { 0% { opacity: 0; transform: scale(.4); } 28% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7); } }

.evo-rings { position: absolute; inset: 0; }
.evo-rings i { position: absolute; left: 50%; top: 50%; width: 172px; height: 172px; margin: -86px 0 0 -86px; border: 2px solid var(--c2); border-radius: 50%; opacity: .45; animation: evoRing 1.7s linear infinite; }
.evo-rings i:nth-child(2) { animation-delay: .56s; } .evo-rings i:nth-child(3) { animation-delay: 1.12s; }
@keyframes evoRing { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(.32); opacity: 0; } }
.evo-vfx.revealed .evo-rings { opacity: 0; transition: opacity .4s; }

.evo-rays { position: absolute; left: 50%; top: 50%; width: 330px; height: 330px; margin: -165px 0 0 -165px; opacity: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--c2) 0deg 3deg, transparent 3deg 16deg); -webkit-mask: radial-gradient(circle, transparent 36%, #000 38%); mask: radial-gradient(circle, transparent 36%, #000 38%); }
.evo-vfx.revealed .evo-rays { animation: evoRays 1s ease-out; }
@keyframes evoRays { 0% { opacity: 0; transform: scale(.6) rotate(0); } 30% { opacity: .5; } 100% { opacity: 0; transform: scale(1.3) rotate(40deg); } }

/* element-flavoured motes converging on the new form (motion class set per element) */
.evo-mote { position: absolute; left: 50%; top: 50%; margin: -10px; font-size: 18px; line-height: 1; color: var(--c2); text-shadow: 0 0 8px var(--c1); pointer-events: none; opacity: 0; z-index: 3; }
.motion-rise .evo-mote { animation: evoMoteRise 1.7s ease-in forwards; }
@keyframes evoMoteRise { 0% { transform: translate(var(--sx), calc(var(--sy) + 40px)) scale(.7); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(0,0) scale(.4); opacity: .5; } }
.motion-fall .evo-mote { animation: evoMoteFall 1.7s ease-in forwards; }
@keyframes evoMoteFall { 0% { transform: translate(var(--sx), calc(var(--sy) - 40px)) scale(.7); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(0,0) scale(.4); opacity: .5; } }
.motion-spiral .evo-mote, .motion-orbit .evo-mote { animation: evoMoteSpiral 1.7s ease-in forwards; }
@keyframes evoMoteSpiral { 0% { transform: translate(var(--sx), var(--sy)) rotate(0) scale(.8); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(0,0) rotate(220deg) scale(.4); opacity: .5; } }
.motion-crackle .evo-mote { animation: evoMoteCrackle 1.7s steps(7,end) forwards; }
@keyframes evoMoteCrackle { 0% { transform: translate(var(--sx), var(--sy)) scale(.8); opacity: 0; } 20% { opacity: 1; } 60% { transform: translate(calc(var(--sx)*.3), calc(var(--sy)*.3)) scale(1); opacity: 1; } 100% { transform: translate(0,0) scale(.4); opacity: .4; } }
.motion-rays .evo-mote { animation: evoMoteRays 1.7s ease-out forwards; }
@keyframes evoMoteRays { 0% { transform: translate(0,0) scale(.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(var(--sx), var(--sy)) scale(.9); opacity: 0; } }
.motion-glitch .evo-mote { animation: evoMoteGlitch 1.7s steps(8,end) forwards; }
@keyframes evoMoteGlitch { 0% { transform: translate(var(--sx), var(--sy)); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(calc(var(--sx)*.4 + 6px), calc(var(--sy)*.4 - 4px)); } 100% { transform: translate(0,0); opacity: .4; } }

.evo-label { font-weight: 800; letter-spacing: .05em; color: #EAF7F0; text-shadow: 0 0 12px var(--c1); font-size: 16px; text-align: center; z-index: 5; }
.evo-label b { color: var(--c2); }

/* ═══════════════════ Team-full replacement chooser ═══════════════════ */
.replace-overlay { z-index: 62; overflow-y: auto; }
.replace-panel { margin: auto; max-width: 470px; width: 100%; padding: 16px; text-align: center; }
.replace-head { font-size: 15px; margin-bottom: 12px; }
.replace-head b { color: var(--accent, #2bd49a); }
.replace-new { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px; border: 1px solid var(--accent, #2bd49a); border-radius: 10px; background: rgba(43,212,154,.08); margin-bottom: 12px; }
.replace-new .sprite { width: 64px; height: 64px; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated; }
.replace-new .rn-meta { text-align: left; }
.rn-name { font-weight: 700; font-size: 14px; }
.rn-stats { font-size: 11px; color: var(--text-secondary, #9fc4b2); margin-top: 3px; }
.replace-sub { font-size: 12px; color: var(--text-secondary, #9fc4b2); margin-bottom: 12px; }
.replace-sub b { color: #ff9d9d; }
.replace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.replace-card { position: relative; }
.replace-card:hover, .replace-card:focus { border-color: #C02828; box-shadow: 0 0 10px #C0282877; }
.decompile-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-top: 3px; background: #C02828; color: #FFE0E0; }
.replace-box { width: 100%; }

/* ═══════════════════ Mobile: fit combat to narrow screens ═══════════════════ */
@media (max-width: 560px) {
  .os-content { padding: 12px; }
  .battle .arena { height: 246px; }
  .combatant { width: 150px; }
  .combatant.enemy { top: 8px; right: 8px; }
  .combatant.player { bottom: 8px; left: 8px; }
  .cb-info { min-width: 0; max-width: 100%; padding: 5px 7px; }
  .cb-name { font-size: 11px; }
  .cb-info .bar { height: 6px; }
  .cb-hpnum { font-size: 10px; }
  .cb-stage { width: 96px; height: 96px; }
  .cb-sprite { width: 82px; height: 82px; }
  .pip { width: 7px; height: 7px; margin: 0 1px; }
  .battle-controls { gap: 6px; flex-wrap: wrap; }
  .mode-toggle, .ap-toggle { font-size: 11px; padding: 3px 8px; }
  .battle-log { max-height: 92px; font-size: 12px; }
  .replace-grid { grid-template-columns: 1fr 1fr; }
  .replace-new { flex-direction: column; text-align: center; }
  .replace-new .rn-meta { text-align: center; }
}