/* Scene 0 — title screen + MDP-frame overlay. */

.sc0-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 24px 8px 8px;
  text-align: center;
}

.sc0-subtitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--ink);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.sc0-pika-wrap {
  margin: 12px 0;
  display: flex;
  justify-content: center;
  position: relative;
  width: 240px;
  height: 200px;
  align-items: center;
}
.sc0-pika {
  width: 144px;
  height: 144px;
  animation: pika-bob 1.2s ease-in-out infinite;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
@keyframes pika-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* Cheek-spark on click — short burst that fades.  Layered on top of
   the breathing animation via a class that re-triggers via JS. */
@keyframes sc0-pika-zap {
  0%   { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  35%  { filter: brightness(1.5) drop-shadow(0 0 18px rgba(255, 220, 80, 0.9)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}
.sc0-pika.sc0-pika-zap { animation: pika-bob 1.2s ease-in-out infinite, sc0-pika-zap 700ms ease-out; }

/* Sparkles drifting around Pikachu on the title screen. */
.sc0-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.sc0-sparkle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: 18px;
  color: var(--pikachu-yellow);
  text-shadow: 0 0 6px rgba(255, 220, 80, 0.8);
  animation: sc0-sparkle 3.0s ease-in-out infinite;
  animation-delay: var(--d);
  opacity: 0;
}
@keyframes sc0-sparkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50%      { opacity: 1; transform: scale(1.2); }
}

.sc0-start {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  padding: 12px 22px;
  background: var(--bg-strong);
  border: 4px solid var(--rule);
  color: var(--ink-on-box);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow:
    inset 0 0 0 2px var(--bg-strong),
    inset 0 0 0 4px var(--inner-highlight),
    4px 4px 0 var(--rule);
  animation: start-blink 1.0s steps(2, end) infinite;
}
.sc0-start:hover {
  background: var(--pikachu-yellow);
  animation: none;
}
.sc0-start-chevron {
  display: inline-block;
  color: var(--pikachu-cheek);
  animation: sc0-chevron-bounce 0.7s ease-in-out infinite;
}
@keyframes sc0-chevron-bounce {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
@keyframes start-blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.4; }
}

/* Per-letter drop-in for the POKEMON wordmark (first-visit only). */
.poke-title {
  display: inline-flex;
  gap: 0;
}
.poke-title-letter {
  display: inline-block;
}
.sc0-first-visit .poke-title-letter {
  animation: sc0-letter-drop 520ms cubic-bezier(.34, 1.56, .64, 1) backwards;
  animation-delay: calc(var(--i) * 90ms + 200ms);
}
@keyframes sc0-letter-drop {
  0%   { transform: translateY(-80px) rotate(-12deg); opacity: 0; }
  60%  { transform: translateY(6px)   rotate(2deg);   opacity: 1; }
  100% { transform: translateY(0)     rotate(0);      opacity: 1; }
}

/* First-visit: subtitle and sprite delay until the wordmark finishes
   dropping so the moment is staged. */
.sc0-first-visit .sc0-subtitle {
  animation: sc0-fade-in 380ms ease-out calc(var(--len, 7) * 90ms + 600ms) backwards;
}
.sc0-first-visit .sc0-pika-wrap {
  animation: sc0-fade-in 380ms ease-out calc(var(--len, 7) * 90ms + 800ms) backwards;
}
.sc0-first-visit .sc0-start {
  animation: sc0-fade-in 380ms ease-out calc(var(--len, 7) * 90ms + 1000ms) backwards,
             start-blink 1.0s steps(2, end) calc(var(--len, 7) * 90ms + 1400ms) infinite;
}
@keyframes sc0-fade-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* A thin scrolling grass strip along the bottom of the title screen
   (pixel-art style); subtle background motion to add life. */
.sc0-grass-strip {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 14px;
  margin: 18px auto 4px;
  background-image: linear-gradient(
    to right,
    var(--grass-rim) 0px, var(--grass-rim) 6px,
    transparent 6px, transparent 12px,
    var(--grass-rim) 12px, var(--grass-rim) 14px,
    transparent 14px, transparent 22px,
    var(--grass-rim) 22px, var(--grass-rim) 26px,
    transparent 26px, transparent 36px
  );
  background-size: 36px 14px;
  background-repeat: repeat-x;
  animation: sc0-grass-scroll 14s linear infinite;
  opacity: 0.55;
}
@keyframes sc0-grass-scroll {
  0%   { background-position-x: 0; }
  100% { background-position-x: -360px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc0-first-visit .poke-title-letter,
  .sc0-first-visit .sc0-subtitle,
  .sc0-first-visit .sc0-pika-wrap,
  .sc0-first-visit .sc0-start,
  .sc0-sparkle,
  .sc0-grass-strip,
  .sc0-start-chevron {
    animation: none;
  }
}

.sc0-credits {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--ink-secondary);
  letter-spacing: 1px;
  margin-top: 24px;
}
.sc0-credits.sc0-credits-by {
  margin-top: 6px;
  color: var(--pikachu-cheek, #C62828);
}

/* MDP overlay phase */
.sc0-mdp-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sc0-mdp-heading {
  text-align: center;
  margin-top: 6px;
  font-size: 14px;
}
.sc0-mdp-markov {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.7;
  color: var(--ink-secondary);
  max-width: 80ch;
  margin: 0 auto 6px;
  padding: 8px 12px;
  background: var(--bg-strong);
  border: 2px solid var(--rule);
  text-align: center;
}
.sc0-mdp-markov b  { color: var(--pikachu-cheek); }
.sc0-mdp-markov em { color: var(--cb-blue); font-style: normal; }
.sc0-mdp-sub {
  text-align: center;
  margin: 0;
}
.sc0-tuple {
  margin-top: 6px;
}

/* ---------- Side-by-side layout ----------
   Stage on the left, control column (menu + caption + step controls)
   on the right.  Total page height now fits in one viewport so the
   student can see the tag on the stage AND the caption explaining it
   without scrolling.  See the JS comment in sceneMdpOverlay.js. */
.sc0-mdp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 360px);
  gap: 18px;
  width: 100%;
  align-items: start;
}
.sc0-mdp-row .battle-stage {
  max-width: none;
  width: 100%;
  margin: 0;
}
.sc0-mdp-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  align-self: stretch;
}
.sc0-mdp-right .sc0-menu-wrap {
  margin: 0;
  max-width: none;
  width: 100%;
}
.sc0-mdp-right .sc0-mdp-ctrls {
  margin-top: auto;        /* push to bottom of the right column */
  justify-content: flex-start;
}
.sc0-mdp-right .sc0-mdp-caption {
  text-align: left;
  margin-top: 0;
  max-width: none;
}

.sc0-mdp-caption {
  margin-top: 4px;
  text-align: center;
  max-width: 70ch;
  font-size: 9px;
  line-height: 1.8;
  min-height: 4em;     /* reserve room so caption swap doesn't jump */
}

/* ---------- Progressive MDP overlay state machine ---------- */

/* Step-gated containers — fade in via the `.show` toggle. */
.sc0-menu-wrap, .sc0-reward-wrap {
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease-out;
}
.sc0-menu-wrap.show, .sc0-reward-wrap.show {
  opacity: 1;
  pointer-events: auto;
}

/* HP boxes use `display: contents` on the wrapper so the children are
   positioned by the parent .battle-stage (the original CSS expects
   them as direct children). That means `opacity` cannot live on the
   wrapper itself — it has no box. Apply opacity to the children. */
.sc0-hp-wrap { display: contents; }
.sc0-hp-wrap > .hp-box {
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease-out;
}
.sc0-hp-wrap.show > .hp-box {
  opacity: 1;
  pointer-events: auto;
}

/* Menu wrapper sizing — match the .move-menu look from scene 1, but
   constrain its width so it sits centred under the stage. */
.sc0-menu-wrap { width: 100%; max-width: 720px; margin: 12px auto 0; }
.sc0-menu-wrap .move-menu { width: 100%; }
.sc0-menu-wrap .move-btn { cursor: default; opacity: 0.92; }

/* Reward pills strip. */
.sc0-reward-wrap {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.sc0-reward-pill {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  background: var(--bg-strong);
  border: 3px solid var(--rule);
  box-shadow: 2px 2px 0 0 var(--ink);
}
.sc0-reward-pill.pos { color: var(--cb-blue); border-color: var(--cb-blue); }
.sc0-reward-pill.neg { color: var(--cb-vermillion); border-color: var(--cb-vermillion); }

/* Step control row. */
.sc0-mdp-ctrls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.sc0-mdp-step {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.sc0-mdp-step b { color: var(--pikachu-cheek); }

/* MDP tags fade in via .show, same convention as the gated wrappers. */
.mdp-overlay .mdp-tag {
  opacity: 0;
  transition: opacity 380ms ease-out;
}
.mdp-overlay .mdp-tag.show { opacity: 1; }

/* One-shot attack animation triggered when entering step 3 (TRANSITIONS).
   PIKACHU lunges forward; CHARMANDER shakes; "−1 HP" floats above the
   opponent.  Re-armed each time by toggling the .sc0-attacking class. */
@keyframes sc0-attack-pika {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(60px, -18px); }
  60%  { transform: translate(60px, -18px); }
  100% { transform: translate(0, 0); }
}
@keyframes sc0-shake-charm {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
.sc0-attacking .sprite-host.player img  { animation: sc0-attack-pika 0.9s ease-out; }
.sc0-attacking .sprite-host.opponent img { animation: sc0-shake-charm 0.5s ease-in-out 0.35s; }

@keyframes sc0-damage-rise {
  0%   { opacity: 0; transform: translate(-50%, 20px); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -40px); }
}
.sc0-damage-flash {
  position: absolute;
  right: 22%;
  top: 30%;
  transform: translate(-50%, 20px);
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--cb-vermillion);
  pointer-events: none;
  animation: sc0-damage-rise 1.05s ease-out forwards;
  text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF, 2px -2px 0 #FFF, -2px 2px 0 #FFF;
  z-index: 6;
}

/* ---------------------------------------------------------------------------
   Mobile (≤ 720px). The MDP-overlay scene puts the battle stage and the
   control column side-by-side at desktop; on a phone the 280px column
   minimum squeezes the stage into a tiny strip, so we stack them.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .sc0-mdp-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}