/* 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; }
/* Support the Dev — subtle footer link, sits below all hub buttons. */
.support-dev-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-family: monospace;
  font-size: 12px; text-decoration: none; cursor: pointer; touch-action: manipulation; min-height: 36px;
  transition: border-color .15s, color .15s; margin-top: 16px; }
.support-dev-btn:hover { border-color: #FFDD00; color: #FFDD00; }
.support-dev-btn:active { opacity: .8; }
@media (max-width: 600px) { .support-dev-btn { font-size: 11px; padding: 8px 14px; } }
@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; }
.battle-swap-slot { display: inline-flex; }
.swap-btn { font-weight: 700; font-size: 12px; padding: 4px 12px; background: #123; color: #7fd4ff; border-color: #2a6f8f; }
.swap-btn:disabled { opacity: .4; }

/* ═══════════════════ ByteCoin Wallet (CHANGE 2) ═══════════════════ */
.nft-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.nft-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--border); border-radius: 10px; background: #0c1f1488; }
.nft-slot.unlocked { cursor: pointer; border-color: #2bd49a55; }
.nft-slot.unlocked:hover { border-color: #2bd49a; box-shadow: 0 0 10px #2bd49a44; transform: translateY(-2px); }
.nft-slot.locked { opacity: .7; }
.nft-name { font-size: 11px; font-weight: 700; text-align: center; }
.nft-ic { width: 64px; height: 64px; display: grid; place-items: center; }
.nft-ic.nft-locked { background: #1a2a22; border: 1px dashed #3a4a42; border-radius: 6px; }
.nft-lock { font-size: 24px; filter: grayscale(1); opacity: .6; }
.nft-icon { display: block; }
.nft-icon.nft-rainbow { animation: nftHue 3s linear infinite; outline: 2px solid #fff8; outline-offset: -2px; border-radius: 4px; }
@keyframes nftHue { from { filter: hue-rotate(0); } to { filter: hue-rotate(360deg); } }
.nft-icon.nft-static .nft-bg { fill: #111; }
.nft-icon.nft-static .cs { mix-blend-mode: screen; }
.nft-static .cs.r { fill: #ff0040; animation: nftStR .22s steps(2,end) infinite; }
.nft-static .cs.g { fill: #00ff66; animation: nftStG .3s steps(2,end) infinite; }
.nft-static .cs.b { fill: #2299ff; animation: nftStB .18s steps(2,end) infinite; }
@keyframes nftStR { 0%,100% { transform: translate(0,0); opacity: .9; } 50% { transform: translate(1.5px,-1px); opacity: .5; } }
@keyframes nftStG { 0%,100% { transform: translate(0,0); opacity: .8; } 50% { transform: translate(-1.5px,1px); opacity: .6; } }
@keyframes nftStB { 0%,100% { transform: translate(0,0); opacity: .85; } 50% { transform: translate(1px,1.5px); opacity: .5; } }
.nft-card-overlay { position: absolute; inset: 0; z-index: 65; display: grid; place-items: center; background: rgba(4,10,8,.86); }
.nft-card { text-align: center; max-width: 320px; padding: 22px; border: 1px solid var(--nc, #2bd49a); border-radius: 14px; background: #0c1f14; box-shadow: 0 0 26px var(--nc, #2bd49a); }
.nft-card-ic { width: 128px; height: 128px; margin: 0 auto 12px; display: grid; place-items: center; }
.nft-card-name { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.nft-card-meta { font-size: 12px; color: var(--text-secondary, #9fc4b2); }
.nft-card-quote { font-size: 13px; font-style: italic; color: #cfe; margin: 14px 0; }
@media (max-width: 560px) { .nft-grid { grid-template-columns: repeat(2, 1fr); } }
.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); } }

/* ── Sysadmin boss intro: layered portrait (RD) + in-game sprite (PixelLab) over a themed placeholder ── */
.scene-actor.is-portrait { position: relative; width: 150px; height: 168px; }
.is-portrait .sa-placeholder, .is-portrait .scene-portrait { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 150px; height: 150px; }
.is-portrait .sa-placeholder { z-index: 1; }
.is-portrait .sa-svg { width: 150px; height: 150px; filter: drop-shadow(0 8px 12px #0009); }
.is-portrait .scene-portrait { z-index: 2; object-fit: contain; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated;
  filter: drop-shadow(0 8px 12px #000b); border-radius: 8px; }
.is-portrait .scene-sa-sprite { position: absolute; right: -6px; bottom: 22px; width: 56px; height: 56px; z-index: 3;
  image-rendering: pixelated; object-fit: contain; filter: drop-shadow(0 4px 6px #000b); background: #0a1a14cc; border: 1px solid #ffffff22; border-radius: 6px; padding: 2px; }
.is-portrait .scene-name { position: absolute; bottom: 0; left: 0; right: 0; z-index: 4; font-size: 11px; }
.scene-actor.is-portrait.mood-excited { animation: scene-bounce .9s ease-in-out infinite; }
.is-portrait.mood-excited .scene-portrait { filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 8px 12px #000b); }
/* CHANGE 1: you2.0 corrupted mirror — RGB-split + Lunar-purple glitch on the portrait/placeholder */
.is-corrupted .scene-portrait, .is-corrupted .sa-svg { animation: you2Glitch .4s steps(2, end) infinite; }
@keyframes you2Glitch {
  0%, 100% { filter: hue-rotate(255deg) saturate(1.5) drop-shadow(2px 0 0 #ff2d55) drop-shadow(-2px 0 0 #00e1ff); transform: translateX(0); }
  50% { filter: hue-rotate(285deg) saturate(1.9) drop-shadow(-2px 0 0 #ff2d55) drop-shadow(2px 0 0 #00e1ff); transform: translateX(1.5px); }
}
.you2-defeat { color: #ff6ff0; font-style: italic; font-size: 13px; }

/* ═══════════════════ Onboarding (CHANGE 5) ═══════════════════ */
.onb-title { letter-spacing: 3px; text-align: center; }
.onb-term { background: #06120b; border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin: 10px 0; min-height: 150px; }
.onb-pre { font-family: monospace; color: #7CFFA0; font-size: 14px; line-height: 1.65; white-space: pre-wrap; margin: 0; display: inline; }
.onb-cursor { color: #7CFFA0; animation: onbBlink 1s steps(2, end) infinite; font-family: monospace; }
@keyframes onbBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.onb-name-row { display: flex; gap: 8px; margin: 10px 0 6px; }
.onb-input { flex: 1; background: #06120b; border: 1px solid #2bd49a55; color: #cfe; font-family: monospace; font-size: 15px; padding: 9px 12px; border-radius: 6px; }
.onb-input:focus { outline: none; border-color: #2bd49a; box-shadow: 0 0 8px #2bd49a44; }
.onb-err { font-size: 11px; margin-bottom: 10px; font-family: ui-monospace, monospace; line-height: 1.5; }
.onb-err.bad { color: var(--accent-gold, #ffd23f); } /* CHANGE 2: amber inline validation error */
/* Avatar select */
.avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.avatar-card { padding: 10px; border: 2px solid var(--border); border-radius: 12px; cursor: pointer; text-align: center; background: #0c1f1488; transition: border-color .15s, box-shadow .15s, transform .15s; }
.avatar-card:hover { border-color: #2bd49a88; transform: translateY(-2px); }
.avatar-card.selected { border-color: #2bd49a; box-shadow: 0 0 14px #2bd49a66; }
.avatar-pair { display: flex; align-items: center; justify-content: center; gap: 8px; }
.avatar-label { margin-top: 8px; font-weight: 700; font-size: 13px; }
/* No background tile behind avatars — transparent box, no colored frame; the sprite/portrait floats on the card/desktop. */
.avatar-img { position: relative; display: inline-grid; place-items: center; border-radius: 8px; overflow: visible; background: transparent; }
.avatar-img .av-ph[hidden] { display: none; } /* hidden unless the real art fails to load */
.avatar-img .av-ph { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 30px; color: #06120b; background: var(--ac, #2bd49a); border-radius: 8px; }
.avatar-img .av-ph.sm { font-size: 20px; }
.avatar-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated; }
@media (max-width: 560px) { .avatar-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════ Desktop avatar (CHANGE 6) ═══════════════════ */
.desktop-avatar { position: absolute; left: 72%; top: 26%; text-align: center; cursor: pointer; z-index: 2; animation: wanderB 24s ease-in-out infinite; }
.desktop-avatar.wave .avatar-img { animation: avWave .6s ease; }
@keyframes wanderB { 0% { left: 72%; top: 24%; } 22% { left: 18%; top: 56%; } 44% { left: 58%; top: 18%; } 66% { left: 12%; top: 48%; } 88% { left: 66%; top: 58%; } 100% { left: 72%; top: 24%; } }
@keyframes avWave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@media (max-width: 560px) {
  .scene-actor.is-portrait { width: 116px; height: 134px; }
  .is-portrait .sa-placeholder, .is-portrait .scene-portrait, .is-portrait .sa-svg { width: 116px; height: 116px; }
  .is-portrait .scene-sa-sprite { width: 42px; height: 42px; }
}
@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; }
/* AUTO_ARCHIVE_META — run-end auto-bank summary cards */
.bank-card .bank-gain { color: #e8c840; font-weight: 600; }
.bank-card .bank-total { color: #8fd6b0; margin-top: 1px; }
.bank-card .bank-total b { color: #bff0d0; }
.bank-card .sprite.fainted { filter: grayscale(0.7) brightness(0.6); }

/* ── 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-overcharge { color: #ffd23f; } .st-thornwall { color: #2fd6c0; } .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-overcharge { animation: fxsOvercharge .8s ease-in-out infinite; } /* BUG-002 ATK-up radiant pulse */
@keyframes fxsOvercharge { 0%,100% { filter: drop-shadow(0 0 6px #ffd23f) brightness(1.06); } 50% { filter: drop-shadow(0 0 13px #fff06a) brightness(1.2); } }
.cb-sprite.fxs-thornwall { animation: fxsThornwall 1s ease-in-out infinite; } /* BUG-003 spiky teal reflect aura */
@keyframes fxsThornwall { 0%,100% { filter: drop-shadow(0 0 2px #2fd6c0); } 50% { filter: drop-shadow(0 0 11px #2fd6c0) drop-shadow(0 0 5px #1c8e80); } }
.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-thorn { border-color: #2fd6c0; border-style: dashed; box-shadow: 0 0 16px #2fd6c0; } /* Thornwall reflect */
.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-thorn { color: #2fd6c0; }
.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-overcharge-cast { animation: fxGlow .9s; --gc: #ffd23f; }
.cb-stage.vfx-thornwall-cast { animation: fxGlow .9s; --gc: #2fd6c0; }
.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; }
/* QOL-006: full stat row on recruit/replace cards — wraps to 2 lines on mobile, never hides a value. */
.byte-stats-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; font-size: 11px;
  color: var(--text-secondary, #9fc4b2); font-family: ui-monospace, monospace; line-height: 1.4; }
.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; }
  .shop-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════ EVENT_NODES_V2 — shops ═══════════════════ */
.shop-overlay { z-index: 63; overflow-y: auto; }
.shop-panel { max-width: 560px; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.shop-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 9px 11px; }
.shop-item .si-top { font-weight: 700; font-size: 13px; }
.shop-item .si-desc { font-size: 11px; color: var(--text-secondary, #9fc4b2); }
.shop-item .si-cost { margin-top: 3px; font-size: 11px; font-weight: 700; color: #5bb8f5; }
.shop-item.sold { opacity: .5; }
.shop-item.sold .si-cost { color: #C02828; }
.shop-ram { color: #5bb8f5; }

/* ═══════════════════ EVENT_NODES_V2 — special-node banners ═══════════════════ */
.event-banner { position: absolute; inset: 0; z-index: 64; display: grid; place-items: center; opacity: 0; transition: opacity .3s; pointer-events: none; }
.event-banner.show { opacity: 1; }
/* 502 Bad Gateway — red RGB-split slam */
.banner-502 { background: radial-gradient(circle, rgba(40,6,6,.85), rgba(8,2,2,.96)); }
.bn-502-card { font-family: monospace; font-weight: 800; font-size: 64px; line-height: .95; text-align: center; color: #fff;
  text-shadow: 3px 0 #ff2d55, -3px 0 #00e1ff; animation: bn502 .6s steps(2, end) 3; }
.bn-502-card span { display: block; font-size: 20px; letter-spacing: 4px; margin-top: 6px; color: #ff6b6b; text-shadow: 2px 0 #ff2d55, -2px 0 #00e1ff; }
@keyframes bn502 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-4px, 2px); } }
.banner-502.show .bn-502-card { animation: bn502in .35s ease-out, bn502 .55s steps(2, end) .35s 3; }
@keyframes bn502in { 0% { transform: scale(2.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); } }
/* Lucky / Millionth Visitor — gold + teal confetti glow */
.banner-lucky { background: radial-gradient(circle, rgba(8,30,22,.82), rgba(4,12,9,.95)); }
.bn-lucky-card { text-align: center; font-weight: 800; font-size: 30px; color: #ffe16a; text-shadow: 0 0 16px #ffd23f, 0 0 30px #2bd49a88;
  animation: bnLucky 1.4s ease-out; }
.bn-lucky-card span { display: block; font-size: 16px; letter-spacing: 2px; margin-top: 8px; color: #7fffd0; text-shadow: 0 0 12px #2bd49a; }
@keyframes bnLucky { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 45% { transform: scale(1.12) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
/* Coin Flip — spinning coin lands heads/tails */
.banner-coinflip { background: radial-gradient(circle, rgba(10,22,16,.8), rgba(4,10,8,.95)); grid-auto-flow: row; gap: 16px; }
.bn-coin { perspective: 600px; }
.bn-coin .coin { position: relative; width: 92px; height: 92px; border-radius: 50%; transform-style: preserve-3d;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #d9a521 70%); border: 3px solid #b8860b;
  display: grid; place-items: center; animation: coinSpin 1.5s cubic-bezier(.3,.7,.4,1) forwards; }
.bn-coin .coin span { position: absolute; font-weight: 800; font-size: 38px; color: #6b5320; backface-visibility: hidden; }
.bn-coin .cf-t { transform: rotateY(180deg); }
@keyframes coinSpin { 0% { transform: rotateY(0) scale(.7); } 100% { transform: rotateY(1980deg) scale(1); } }
.bn-coin.land-tails .coin { animation: coinSpinT 1.5s cubic-bezier(.3,.7,.4,1) forwards; }
@keyframes coinSpinT { 0% { transform: rotateY(0) scale(.7); } 100% { transform: rotateY(1890deg) scale(1); } }
.bn-coin-label { font-weight: 700; color: #cfe; letter-spacing: 1px; }

/* ═══════════════════ Pause menu (Escape) ═══════════════════ */
.pause-overlay { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(4, 10, 8, .82); opacity: 0; transition: opacity .16s; }
.pause-overlay.show { opacity: 1; }
.pause-panel { width: 100%; max-width: 320px; padding: 22px; border: 1px solid var(--accent, #2bd49a); border-radius: 14px;
  background: #0c1f14; box-shadow: 0 0 26px #2bd49a44; text-align: center; }
.pause-title { font-size: 18px; font-weight: 800; letter-spacing: .06em; margin-bottom: 14px; }
.pause-buttons { display: flex; flex-direction: column; gap: 8px; }
.pause-buttons .btn { width: 100%; }
.pause-buttons .btn.danger { background: #3a0e0e; color: #ff9d9d; border-color: #C02828; }
.pause-buttons .btn.danger:hover { background: #581414; }
.pause-note { font-size: 11px; margin: 6px 0 0; }
.opt-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.opt-row label { flex: 0 0 64px; text-align: left; font-size: 13px; font-weight: 700; }
.opt-row input[type=range] { flex: 1; accent-color: var(--accent, #2bd49a); }
.opt-row span { flex: 0 0 30px; text-align: right; font-size: 12px; color: var(--text-secondary, #9fc4b2); }

/* ── QOL-008 graphics toggle ── */
.opt-gfx-btns { display: inline-flex; gap: 6px; flex: 1; justify-content: flex-end; }
.gfx-opt { padding: 4px 14px; height: auto; min-width: 56px; }
.gfx-opt.gfx-on { border-color: var(--accent-teal, #36d39a); color: #eafff2; background: #194a39; }

/* ── QOL-007 Manage Party ── */
.mp-card { position: relative; }
.mp-slot { position: absolute; top: 3px; left: 5px; font-size: 11px; font-weight: 700; color: var(--accent-gold, #ffd23f); }
.swap-card.mp-sel { border: 2px solid var(--accent-gold, #ffd23f); box-shadow: 0 0 10px #ffd23f99; }
.mp-open { margin: 4px 0 10px; }

/* ── QOL-001 floating pause button + faster taps + iOS momentum scroll ── */
#pause-fab { position: fixed; top: 14px; right: 14px; z-index: 9000; width: 42px; height: 42px; display: none;
  align-items: center; justify-content: center; font-size: 19px; line-height: 1; border-radius: 10px; cursor: pointer;
  background: var(--bg-card, #12241c); color: var(--text-primary, #eafff2); border: 1px solid var(--border-strong, #2c5b46);
  box-shadow: 0 3px 10px #0007; }
#pause-fab:hover { border-color: var(--accent-teal, #36d39a); transform: translateY(-1px); }
.btn, .node-option, .swap-card, .shop-item, .gfx-opt, .am-btn, input[type=range] { touch-action: manipulation; }
.node-grid, .replace-grid, .shop-grid, #battle-log, .team-bar { -webkit-overflow-scrolling: touch; }

@media (max-width: 600px) {
  .node-grid { grid-template-columns: 1fr; }              /* node cards single column */
  .replace-grid, .shop-grid { grid-template-columns: 1fr 1fr; }
  #battle-log { max-height: 20vh; overflow-y: auto; }     /* battle log internal scroll */
  #action-menu { max-height: 45vh; overflow-y: auto; }    /* action menu scrollable */
  .team-bar { flex-wrap: nowrap; overflow-x: auto; }      /* team strip horizontal scroll */
  .btn, .node-option { min-height: 44px; }                /* tap targets */
}

/* ── Reference-art portraits (BYTEWORLD_REFERENCE_ART_CARDS.md) — uniform size across all menu/card contexts.
   object-fit:contain scales 90–256px source art to a fixed box; object-position:center bottom keeps feet grounded. ── */
.byte-portrait, .byte-portrait-sm, .byte-portrait-lg {
  object-fit: contain; object-position: center bottom; image-rendering: pixelated; display: block; background: transparent; }
.byte-portrait { width: 128px; height: 128px; }
.byte-portrait-sm { width: 80px; height: 80px; }
.byte-portrait-lg { width: 192px; height: 192px; margin: 0 auto; }
/* Dex grid cells keep their fixed box but show reference art via object-fit (keeps the evolution-line layout). */
.dex-sprite.dex-ref { object-fit: contain; object-position: center bottom; }
/* Bytes-R-Us byte items: portrait on top, then the existing label/desc/cost. */
.shop-item-byte { display: flex; flex-direction: column; align-items: center; height: auto; }
.shop-portrait { margin: 0 auto 4px; }

/* ═══════════════ ONLINE FEATURES (Surprise Swap + PVP) ═══════════════ */
.online-overlay { z-index: 8500; }
.online-panel { background: var(--bg-card, #0e2018); border: 1px solid var(--border-strong, #2c5b46); border-radius: 14px;
  padding: 16px 18px; width: min(560px, 94%); max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 14px 40px #000a; }
.online-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 16px; letter-spacing: .5px; color: var(--text-primary, #eafff2); }
.online-live { font-size: 11px; color: #36d39a; font-weight: 700; }
.online-sub { font-size: 12.5px; color: var(--text-muted, #8fb3a3); margin: 6px 0 10px; }
.online-sub2 { font-size: 12.5px; color: var(--text-secondary, #9fc4b2); margin: 8px 0; }
.online-close { margin-top: 12px; }
/* rank chips */
.elo-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 800; font-size: 12px; border: 1px solid #0006; }
.rank-bronze { color: #ffd9b0; background: #6b4423; } .rank-silver { color: #2b3640; background: #c8c8c8; }
.rank-gold { color: #3a2e00; background: #e8c840; } .rank-diamond { color: #04222b; background: linear-gradient(90deg,#7af0ff,#b98bff); }
/* ── Surprise Swap ── */
.swap-meta { font-size: 12.5px; color: var(--text-secondary, #9fc4b2); margin-bottom: 10px; }
.swap-allunlocked { padding: 18px; text-align: center; font-weight: 800; color: var(--accent-gold, #ffd23f); }
.swap-grid, .pvp-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; padding: 4px; }
.swap-send-card, .pvp-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; height: auto; padding: 8px 4px; position: relative; }
.swap-send-card.locked-stage { opacity: .4; filter: grayscale(.7); cursor: not-allowed; }
.swap-send-card .sc-name, .pvp-pick .sc-name { font-size: 11.5px; font-weight: 700; }
.swap-anim { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.swap-stage { height: 150px; display: flex; align-items: center; justify-content: center; width: 100%; }
.swap-out { transition: transform .85s cubic-bezier(.5,0,.7,1), opacity .85s; }
.swap-out.go { transform: translateX(-360px) scale(.6); opacity: 0; }
.swap-in { transform: translateX(360px) scale(.6); opacity: 0; transition: transform .85s cubic-bezier(.2,.6,.3,1), opacity .85s; }
.swap-in.arrive { transform: none; opacity: 1; filter: drop-shadow(0 0 16px var(--accent-gold, #ffd23f)); }
.swap-term { font-family: ui-monospace, monospace; font-size: 12px; color: #8fe8c0; text-align: left; line-height: 1.7; }
.swap-spinner { width: 26px; height: 26px; margin: 10px auto; border: 3px solid #2c5b46; border-top-color: #36d39a; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.swap-result-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; }
.swap-result-card .sc-name.big { font-size: 16px; font-weight: 800; }
.swap-result-text { text-align: center; font-size: 13px; margin-top: 8px; }
/* ── PVP menu / select ── */
.pvp-elo-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.pvp-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.pvp-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: auto; padding: 14px; text-align: left; }
.pvp-mode b { font-size: 15px; } .pvp-mode .dim { font-size: 11.5px; }
.pvp-pick.picked { border-color: var(--accent-teal, #36d39a); box-shadow: 0 0 10px #36d39a66; }
.pick-check { position: absolute; top: 4px; right: 6px; color: #36d39a; font-weight: 800; }
.pvp-select-actions, .pm-actions, .pvp-select-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
/* ── Matchmaking ── */
.mm-panel { text-align: center; }
.mm-status { font-size: 14px; font-weight: 700; margin: 10px 0; color: var(--text-primary, #eafff2); }
.mm-bar { height: 10px; border-radius: 6px; background: #11241b; overflow: hidden; border: 1px solid #2c5b46; }
.mm-bar > span { display: block; height: 100%; width: 20%; background: linear-gradient(90deg,#1d8f63,#36d39a); animation: mmscan 1.1s ease-in-out infinite; }
.mm-bar.full > span { width: 100%; animation: none; }
@keyframes mmscan { 0% { margin-left: -20%; } 100% { margin-left: 100%; } }
.mm-line { font-size: 12.5px; color: var(--text-muted, #8fb3a3); margin: 10px 0; }
.mm-elos { display: flex; justify-content: space-around; font-size: 12px; color: var(--text-secondary, #9fc4b2); margin: 10px 0; }
.mm-elos b { font-size: 19px; color: var(--text-primary, #eafff2); }
.mm-oppname { font-size: 13px; min-height: 18px; }
/* ── Rank-up ── */
.rankup-overlay { z-index: 9200; }
.rankup-flash { position: absolute; inset: 0; background: #fff; opacity: .8; animation: rkflash .5s ease-out forwards; }
@keyframes rkflash { to { opacity: 0; } }
.rankup-badge { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 26px; color: #04140d;
  background: var(--rc, #e8c840); border: 5px solid #fff8; box-shadow: 0 0 40px var(--rc, #e8c840); transform: scale(0); transition: transform .45s cubic-bezier(.2,1.4,.4,1); }
.rankup-badge.in { transform: scale(1); }
.rankup-badge.rainbow { background: conic-gradient(from 0deg, #ff4dd2, #7af0ff, #e8c840, #36d39a, #ff4dd2); animation: rkspin 3s linear infinite; }
@keyframes rkspin { to { transform: rotate(360deg) scale(1); } }
.rankup-text { text-align: center; font-size: 20px; margin-top: 16px; color: #fff; text-shadow: 0 2px 8px #000; line-height: 1.5; }
.rankup-particles { position: absolute; inset: 0; pointer-events: none; }
.rankup-particles i { position: absolute; left: 50%; top: 42%; width: 8px; height: 8px; border-radius: 50%;
  transform: rotate(var(--a)) translateY(0); animation: rkpart 1.6s ease-out forwards; }
@keyframes rkpart { to { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)); opacity: 0; } }
/* ── Post-match ── */
.pm-panel { text-align: center; }
.pm-result { font-size: 26px; font-weight: 900; letter-spacing: 1px; margin: 4px 0; }
.pm-result.win { color: #36d39a; } .pm-result.lose { color: #ff6b6b; }
.pm-vs { font-size: 13px; color: var(--text-secondary, #9fc4b2); }
.pm-elo { font-size: 15px; font-weight: 700; margin: 10px 0 4px; }
.pm-up { color: #36d39a; } .pm-down { color: #ff6b6b; }
.pm-rank { font-size: 12.5px; display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.pm-progbar { width: 140px; height: 8px; border-radius: 5px; background: #11241b; border: 1px solid #2c5b46; overflow: hidden; }
.pm-progbar > span { display: block; height: 100%; background: linear-gradient(90deg,#1d8f63,#36d39a); }
.pm-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; text-align: left; }
.pm-col-h { font-weight: 800; font-size: 12px; color: var(--text-secondary, #9fc4b2); margin-bottom: 4px; text-align: center; }
.pm-byte { display: flex; gap: 8px; align-items: center; padding: 4px; border-bottom: 1px solid #ffffff10; }
.pm-byte .byte-portrait-sm { width: 44px; height: 44px; }
.pm-byte-info .sc-name { font-size: 12px; font-weight: 700; }
.pm-dmg { font-size: 10.5px; color: var(--text-muted, #8fb3a3); }
@media (max-width: 600px) { .pvp-mode-grid, .pm-teams { grid-template-columns: 1fr; } }

/* ═══════════════ MINIGAMES + DESKTOP UX ═══════════════ */
/* PART 7: speech bubble above the wandering Byte */
.speech-bubble-host { position: absolute; left: 50%; bottom: 100%; width: 0; }
.speech-bubble { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: var(--bg-card, #12241c);
  border: 1px solid var(--border-strong, #2c5b46); border-radius: 10px; padding: 7px 13px; font-family: ui-monospace, monospace;
  font-size: 13px; color: var(--text-primary, #eafff2); white-space: nowrap; z-index: 50; pointer-events: none;
  opacity: 0; animation: bubble-in 200ms ease forwards; }
.speech-bubble.persist { pointer-events: auto; cursor: pointer; border-color: var(--accent-gold, #ffd23f); }
.speech-bubble.out { animation: bubble-out 500ms ease forwards; }
.speech-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--border-strong, #2c5b46); }
@keyframes bubble-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes bubble-out { to { opacity: 0; transform: translate(-50%, -6px); } }
/* poke + minigame Byte reactions */
.wander-sprite.poke { animation: mg-poke .42s ease; }
@keyframes mg-poke { 0%,100% { transform: none; } 25% { transform: translateY(-8px) rotate(-6deg); } 60% { transform: translateY(2px) rotate(4deg); } }
.mg-attack { animation: mg-attack-a .38s ease; } @keyframes mg-attack-a { 50% { transform: scale(1.25) translateY(-6px); } }
.mg-secret { animation: mg-secret-a 1.3s ease; } @keyframes mg-secret-a { 0%,100% { filter: none; } 50% { filter: brightness(1.6) drop-shadow(0 0 14px #ffd23f); transform: scale(1.2) rotate(360deg); } }
.mg-bounce { animation: mg-bounce-a .18s ease; } @keyframes mg-bounce-a { 50% { transform: translateY(-12px) scale(1.06); } }
.mg-happy { animation: mg-happy-a .5s ease; } @keyframes mg-happy-a { 30% { transform: translateY(-16px); } 60% { transform: translateY(0); } }
.mg-sad { animation: mg-sad-a .5s ease; } @keyframes mg-sad-a { 50% { transform: translateY(4px) rotate(-4deg); filter: grayscale(.4) brightness(.8); } }
/* PART 8: change-byte + play affordances in the desktop area */
.change-byte-btn { position: absolute; bottom: 14px; left: 14px; z-index: 30; min-height: 44px; font-family: ui-monospace, monospace; touch-action: manipulation; }
.mg-play-fab { position: absolute; bottom: 14px; right: 14px; z-index: 30; min-height: 44px; touch-action: manipulation; }
.mg-play-fab.locked { background: var(--bg-card,#12241c); border: 1px dashed var(--accent-gold,#ffd23f); color: var(--accent-gold,#ffd23f); padding: 10px 14px; border-radius: 8px; }
.byte-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 62vh; padding: 6px; }
.byte-select-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; background: var(--bg-card,#12241c);
  border: 1px solid var(--border-strong,#2c5b46); cursor: pointer; touch-action: manipulation; min-height: 64px; text-align: left; height: auto; }
.byte-select-card.active { border-color: var(--accent-teal, #36d39a); border-width: 2px; }
.byte-select-card .byte-portrait-sm { width: 48px; height: 48px; }
.bs-info .sc-name { font-size: 13px; font-weight: 700; } .bs-star { color: var(--accent-teal,#36d39a); }
.bs-ind { font-size: 11px; font-weight: 700; } .bs-ind.green { color: #36d39a; } .bs-ind.gold { color: var(--accent-gold,#ffd23f); } .bs-ind.grey { color: #8fb3a3; }
.cb-x { min-height: 36px; padding: 4px 12px; }
/* minigame overlays */
.minigame-overlay { z-index: 8600; }
.mg-panel { background: var(--bg-card, #0e2018); border: 1px solid var(--border-strong, #2c5b46); border-radius: 14px; padding: 18px;
  width: min(420px, 94%); max-height: 90vh; overflow-y: auto; text-align: center; box-shadow: 0 14px 40px #000a; }
.mg-head { font-weight: 800; font-size: 16px; color: var(--text-primary,#eafff2); }
.mg-sub { font-size: 12.5px; color: var(--text-muted,#8fb3a3); margin: 6px 0 12px; }
.mg-game-grid { display: flex; flex-direction: column; gap: 10px; }
.mg-game { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; padding: 12px 14px; text-align: left; min-height: 56px; touch-action: manipulation; }
.mg-game b { font-size: 14px; }
.mg-play { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mg-byte { width: 120px; height: 120px; image-rendering: pixelated; }
.mg-instr { font-size: 14px; font-weight: 700; color: var(--text-primary,#eafff2); }
.mg-input { width: 100%; min-height: 48px; font-size: 16px; padding: 10px 12px; border-radius: 8px; background: #0a1a14;
  border: 1px solid var(--border-strong,#2c5b46); color: var(--text-primary,#eafff2); font-family: ui-monospace, monospace; touch-action: manipulation; }
.mg-timer { position: sticky; top: 0; font-size: 22px; font-weight: 800; color: var(--accent-gold,#ffd23f); } /* stays visible above mobile keyboard */
.mg-timer b { font-size: 26px; }
.mg-score { font-size: 14px; color: var(--text-secondary,#9fc4b2); } .mg-score b { color: var(--text-primary,#eafff2); }
.mg-pulse-stage { position: relative; width: 240px; height: 240px; display: grid; place-items: center; margin: 6px auto; }
.mg-pulse-stage::before { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 2px dashed #ffffff3a; }
.mg-ring { position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 3px solid var(--accent-teal,#36d39a); transform: scale(.25); opacity: .85; box-shadow: 0 0 14px #36d39a66; }
.mg-ring.go { animation: mg-ring var(--pd, 1500ms) linear forwards; }
@keyframes mg-ring { from { transform: scale(.25); opacity: .7; } to { transform: scale(1); opacity: 1; } }
.mg-tap { position: relative; z-index: 2; width: 96px; height: 96px; cursor: pointer; touch-action: manipulation; }
.mg-feedback { min-height: 22px; font-weight: 800; font-size: 16px; } .mg-feedback.hit { color: #36d39a; } .mg-feedback.miss { color: #ff6b6b; }
.mg-round { font-size: 14px; color: var(--text-secondary,#9fc4b2); } .mg-round b { color: var(--text-primary,#eafff2); }
.pattern-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 280px; margin: 8px auto; }
.pattern-btn { height: 80px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; touch-action: manipulation; opacity: .5; transition: opacity .1s, transform .1s; }
.pattern-btn.active { opacity: 1; transform: scale(1.05); box-shadow: 0 0 18px #fff8; }
.mg-result-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mg-score-line { font-size: 13px; color: var(--text-secondary,#9fc4b2); }
.mg-bonus-earned { font-size: 16px; font-weight: 800; color: #36d39a; margin-top: 4px; }
.mg-bonus-label { font-size: 15px; font-weight: 700; color: var(--accent-gold,#ffd23f); }
.mg-bonus-note { font-size: 12px; }
.mg-result-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.mg-close { margin-top: 12px; }
/* PART 10: mobile accessibility */
button, .byte-select-card, .pattern-btn, .change-byte-btn, .mg-play-fab, .mg-game, .mg-tap, .swap-send-card, .pvp-pick { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
@media (max-width: 600px) {
  .byte-select-grid { grid-template-columns: 1fr; }
  .mg-byte { width: 92px; height: 92px; } .mg-pulse-stage { width: 200px; height: 200px; }
  .mg-pulse-stage::before, .mg-ring { width: 165px; height: 165px; }
}

/* ═══════════════ MOBILE QOL REWRITE ═══════════════ */
/* CHANGE 1: starter screen — scrollable + downscaled portraits on smaller screens */
.starter-grid { overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 210px); padding: 4px; }
.starter-grid .card .byte-portrait-lg { width: 120px; height: 120px; }
@media (max-width: 768px) {
  .starter-grid { grid-template-columns: repeat(2, 1fr); }
  .starter-grid .card .byte-portrait-lg { width: 96px; height: 96px; }
}
@media (max-width: 600px) {
  .starter-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: calc(100vh - 230px); }
  .starter-grid .card .byte-portrait-lg { width: 72px; height: 72px; }
  .starter-grid .card { padding: 8px; }
}
@media (max-width: 380px) {
  .starter-grid { grid-template-columns: 1fr; }
  .starter-grid .card { flex-direction: row; align-items: center; gap: 12px; text-align: left; }
  .starter-grid .card .byte-portrait-lg { width: 56px; height: 56px; flex-shrink: 0; margin: 0; }
}
/* CHANGE 5: element filter bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 2px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-btn { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border-strong,#2c5b46); background: var(--bg-card,#12241c);
  color: var(--text-secondary,#9fc4b2); font-family: ui-monospace, monospace; font-size: 12px; cursor: pointer; touch-action: manipulation;
  white-space: nowrap; min-height: 34px; flex-shrink: 0; transition: all .1s; }
.filter-btn.active { background: var(--filter-color, var(--accent-teal,#36d39a)); color: #06140d; border-color: transparent; font-weight: 700; }
.filter-btn:not(.active):hover { border-color: var(--accent-teal,#36d39a); color: var(--text-primary,#eafff2); }
.filter-empty { padding: 16px; text-align: center; font-size: 13px; }
@media (max-width: 600px) { .filter-btn { font-size: 11px; padding: 6px 10px; } }
/* CHANGE 4: Find Match at top of custom battle */
.find-match-btn { width: 100%; padding: 13px; border-radius: 8px; background: var(--accent-teal,#36d39a); color: #06140d;
  font-family: ui-monospace, monospace; font-size: 15px; font-weight: 700; border: none; cursor: pointer; touch-action: manipulation;
  min-height: 52px; margin: 4px 0 6px; transition: opacity .15s, background .15s; }
.find-match-btn.disabled { background: var(--bg-card,#12241c); color: var(--text-muted,#8fb3a3); border: 1px solid var(--border-strong,#2c5b46); cursor: not-allowed; }
.find-match-btn:not(.disabled):hover { opacity: .85; }
.team-stage-label { font-size: 12px; color: var(--text-muted,#8fb3a3); font-family: ui-monospace, monospace; text-align: center; margin-bottom: 8px; }
/* CHANGE 3: node-screen MENU + Abandon bottom row */
.node-bottom-row { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.node-menu-btn, .abandon-run-btn { min-height: 48px; padding: 12px 24px; font-family: ui-monospace, monospace; font-size: 14px; letter-spacing: .06em; touch-action: manipulation; }
.node-menu-btn:hover { border-color: var(--accent-teal,#36d39a); color: var(--text-primary,#eafff2); }
.abandon-run-btn:hover { border-color: #C02828; color: #FF8080; }
@media (max-width: 600px) { .node-bottom-row { flex-direction: column; gap: 8px; } .node-menu-btn, .abandon-run-btn { width: 100%; } }
/* minigame no-bonus warning + replay FAB */
.mg-warn { background: #2a210a; border: 1px solid var(--accent-gold,#ffd23f); border-radius: 8px; padding: 8px 12px; margin: 4px 0 10px;
  font-size: 12px; color: var(--accent-gold,#ffd23f); line-height: 1.5; }
.mg-play-fab.noreward { background: var(--bg-card,#12241c); border: 1px solid var(--accent-gold,#ffd23f); color: var(--accent-gold,#ffd23f); }
.mg-bonus-earned.nobonus { color: var(--text-secondary,#9fc4b2); }