/* Scene 1 — battle screen layout. */

.sc1-row {
  align-items: stretch;
}
.sc1-row .battle-stage {
  flex: 0 1 580px;
  max-width: 580px;
  min-width: 320px;
}
.sc1-right {
  flex: 1 1 320px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
}
.sc1-dialog {
  min-height: 80px;
}
.sc1-menu {
  /* The 4 moves take 2 rows of 2 */
}

/* ---------- Evolution animation ----------
   Gen-1 inspired: the sprite alternates between black and white
   silhouettes (slow → fast as it builds), then a stage-wide white
   wash peaks for ~0.6 s — hiding the sprite swap behind it — before
   resolving back to the new form. Driven by .sc1-evo-sprite (on the
   img) and .sc1-evo-stage (on .battle-stage). */
@keyframes sc1-evo-sprite-flash {
  /* slow alternation at the start */
  0%   { filter: none; }
  8%   { filter: brightness(0) invert(1); }    /* white silhouette */
  16%  { filter: brightness(0); }              /* black silhouette */
  /* speed up */
  24%  { filter: brightness(0) invert(1); }
  30%  { filter: brightness(0); }
  35%  { filter: brightness(0) invert(1); }
  39%  { filter: brightness(0); }
  43%  { filter: brightness(0) invert(1); }
  47%  { filter: brightness(0); }
  /* climax — stay white, this is when the swap happens behind the wash */
  50%  { filter: brightness(0) invert(1); }
  62%  { filter: brightness(0) invert(1); }
  /* resolve back, still slightly bright */
  72%  { filter: brightness(2.0); }
  85%  { filter: brightness(1.3); }
  100% { filter: none; }
}
.sc1-evo-sprite { animation: sc1-evo-sprite-flash 2.4s linear; }

/* Stage-wide white wash that peaks during the climax to mask the
   actual sprite-source swap. z-index sits below the dialog box and
   HP boxes (which have their own stacking) so messages remain
   readable through the flash. */
@keyframes sc1-evo-stage-wash {
  0%   { opacity: 0; }
  35%  { opacity: 0.20; }
  50%  { opacity: 0.95; }
  62%  { opacity: 0.95; }
  78%  { opacity: 0.20; }
  100% { opacity: 0; }
}
.sc1-evo-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  animation: sc1-evo-stage-wash 2.4s linear;
}

/* A subtle radial halo around the sprite-host that pulses with the
   flash. Adds dimensionality so the climax doesn't feel like a flat
   white square. */
@keyframes sc1-evo-host-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 0 60px 30px rgba(255,255,255,0.9); }
}
.sc1-evo-host { animation: sc1-evo-host-halo 2.4s ease-in-out; }

/* ============================================================
   Battle juice — pre-windup, screen flash, KO slow-mo, VFX
   ============================================================ */

/* Pre-attack windup — attacker leans back briefly.  Player faces
   right (windup goes left/back); opponent faces left (windup goes
   right/back).  ~220 ms, eased. */
.sprite-host.player.sc1-windup   { animation: sc1-windup-player 220ms ease-out; }
.sprite-host.opponent.sc1-windup { animation: sc1-windup-opp    220ms ease-out; }
@keyframes sc1-windup-player {
  0%   { transform: translateX(0); }
  60%  { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}
@keyframes sc1-windup-opp {
  0%   { transform: translateX(0); }
  60%  { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

/* Full-stage flash — fires on THUNDER and critical hits. */
.battle-stage.sc1-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  animation: sc1-flash-anim 220ms ease-out;
  z-index: 12;
}
@keyframes sc1-flash-anim {
  0%   { opacity: 1; }
  50%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* KO slow-mo — slight zoom + fade-to-monochrome on the stage. */
.battle-stage.sc1-slowmo {
  filter: contrast(1.05) saturate(0.7) brightness(0.92);
  transform: scale(1.015);
  transform-origin: 50% 60%;
  transition: filter 200ms, transform 200ms;
}

/* ---- Move-specific VFX overlays ---- */

/* Base — sit absolutely inside the stage, pointer-events none. */
.sc1-vfx {
  position: absolute;
  pointer-events: none;
  z-index: 11;
}

/* QUICK ATTACK — three short white speed lines streaking horizontally
   across the stage. */
.sc1-vfx-quick_attack {
  left: 0; right: 0; top: 35%;
  height: 22%;
  background:
    linear-gradient(to right, transparent 10%, rgba(255,255,255,0.85) 35%, transparent 70%) 0 0/100% 4px no-repeat,
    linear-gradient(to right, transparent 0%, rgba(255,255,255,0.65) 50%, transparent 80%) 0 50%/100% 3px no-repeat,
    linear-gradient(to right, transparent 18%, rgba(255,255,255,0.75) 60%, transparent 95%) 0 100%/100% 3px no-repeat;
  animation: sc1-vfx-streak 360ms ease-out;
}
@keyframes sc1-vfx-streak {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}

/* THUNDERBOLT — zigzag SVG drawn from player-side toward opponent. */
.sc1-vfx-thunderbolt {
  position: absolute;
  left: 18%;
  right: 8%;
  top: 28%;
  height: 30%;
  animation: sc1-bolt-fade 600ms ease-out;
}
.sc1-bolt-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px var(--vfx-bolt-glow));
}
.sc1-bolt-svg polyline:nth-child(1) { stroke: var(--vfx-bolt) !important; }
.sc1-bolt-svg polyline:nth-child(2) { stroke: var(--vfx-bolt-hl) !important; }
@keyframes sc1-bolt-fade {
  0%   { opacity: 0; transform: scaleX(0); transform-origin: left center; }
  30%  { opacity: 1; transform: scaleX(1); }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* THUNDER — full-stage darken (the white flash is on .sc1-flash). */
.sc1-vfx-thunder {
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 20, 60, 0.45) 0%, transparent 60%);
  animation: sc1-thunder-fade 700ms ease-out;
}
@keyframes sc1-thunder-fade {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* EMBER (Charmander counter) — orange particle streaks from opp side. */
.sc1-vfx-opp_charmander {
  left: 30%; right: 30%;
  top: 35%;
  height: 30%;
  background: radial-gradient(circle, var(--vfx-ember-a) 0 3px, transparent 4px) radial-gradient(circle, var(--vfx-ember-b) 0 2px, transparent 3px) radial-gradient(circle, var(--vfx-ember-c) 0 3px, transparent 4px) no-repeat, no-repeat, no-repeat 20% 30% 50% 50% 80% 70%;
  animation: sc1-ember 520ms ease-out;
}
@keyframes sc1-ember {
  0%   { opacity: 0; transform: translateX(20%) scale(0.6); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-20%) scale(1.2); }
}

/* FLAMETHROWER (Charmeleon counter) — horizontal flame stream. */
.sc1-vfx-opp_charmeleon {
  left: 18%; right: 18%;
  top: 38%;
  height: 22%;
  background: linear-gradient(to left,
    var(--vfx-flame-a)  0%,
    var(--vfx-flame-b) 25%,
    var(--vfx-flame-c) 50%,
    var(--vfx-flame-d) 100%);
  filter: blur(2px);
  animation: sc1-flame 580ms ease-out;
  transform-origin: right center;
}
@keyframes sc1-flame {
  0%   { opacity: 0; transform: scaleX(0); }
  30%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

/* OUTRAGE (Charizard counter) — red aura pulsing around the attacker. */
.sc1-vfx-opp_charizard {
  right: 6%;
  top: 22%;
  width: 30%;
  height: 50%;
  background: radial-gradient(circle, var(--vfx-rage) 10%, transparent 60%);
  filter: blur(3px);
  animation: sc1-rage 620ms ease-out;
}
@keyframes sc1-rage {
  0%   { opacity: 0; transform: scale(0.6); }
  35%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .sc1-vfx,
  .sprite-host.sc1-windup,
  .battle-stage.sc1-flash::after,
  .battle-stage.sc1-slowmo {
    animation: none;
    transform: none;
  }
}