/* Tutorial / "how to play" — slots into the deck at index 1.
   Reuses the battle-screen CSS (battle-stage, sprite-host, hp-box, move-btn)
   so the tutorial *looks* identical to scene 1, then layers callouts and
   panel decorations on top. */

.tutorial-scene { padding-top: 4px; }

.tutorial-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 10px;
}

.tutorial-step-counter {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--bg-strong);
  border: 2px solid var(--rule);
  padding: 6px 10px;
  box-shadow: inset -2px -2px 0 0 #BBB6A2;
}

.tutorial-skip-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-on-box);
  background: var(--pikachu-yellow);
  border: 2px solid var(--rule);
  padding: 6px 10px;
  cursor: pointer;
  box-shadow: inset -2px -2px 0 0 #B89020;
}
.tutorial-skip-btn:hover { background: var(--charmander-orange); color: #FFF; }
.tutorial-skip-btn:active { box-shadow: inset 2px 2px 0 0 #B89020; }

.tutorial-section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  margin: 0 0 12px;
}

.tutorial-demo {
  min-height: 320px;
  margin-bottom: 14px;
}

.tutorial-dialog {
  /* poke-box styles applied by Dialog.mount() */
}

.tutorial-nav-hint {
  margin-top: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--ink-secondary);
  text-align: right;
  letter-spacing: 0.04em;
}
.tutorial-nav-hint kbd {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  background: var(--bg-strong);
  border: 2px solid var(--rule);
  padding: 2px 5px;
  color: var(--ink);
  margin: 0 2px;
}

/* ---------- Step 0 — welcome ---------- */
.tut-welcome {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: center;
  padding: 24px 16px;
  border: 4px solid var(--rule);
  background: var(--bg-strong);
  box-shadow:
    inset 0 0 0 2px var(--bg-strong),
    inset 0 0 0 4px var(--inner-highlight),
    inset 0 0 0 6px var(--bg-strong);
  color: var(--ink-on-box);
}
.tut-welcome-sprite { display: flex; justify-content: center; }
.tut-big-sprite {
  width: 192px; height: 192px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.tut-welcome-line.big {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}
.tut-welcome-line.small {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--ink-secondary);
}

/* ---------- Step 1 — battle screen with callouts ---------- */
.tut-stage { position: relative; }
.tut-callouts { position: absolute; inset: 0; pointer-events: none; }
.tut-callout {
  position: absolute;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.04em;
  background: var(--pikachu-yellow);
  color: var(--ink);
  padding: 5px 8px;
  border: 2px solid var(--rule);
  box-shadow: 2px 2px 0 0 var(--rule);
  white-space: nowrap;
}
.tut-callout.c-pika    { left: 4%;  bottom: 18%; }
.tut-callout.c-charm   { right: 4%; top: 22%; }
.tut-callout.c-pikahp  { right: 4%; bottom: 4%; }
.tut-callout.c-charmhp { left: 4%;  top: 4%; }

/* Staggered reveal — opponent sprite / HP / callouts fade in ~900 ms
   after the player's side so the student sees "you" first, then "the
   foe arrives".  Applied to .sprite-host.opponent, the opponent
   .hp-box, and the c-charm / c-charmhp callouts. */
@keyframes tut-stage-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.tut-stage-stage2 {
  opacity: 0;
  animation: tut-stage-fade-in 540ms ease-out 900ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  .tut-stage-stage2 { opacity: 1; animation: none; }
}

/* ---------- Step 2 — HP buckets (animated demo + comic strip) ---------- */
.tut-hp-demo {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 18px 18px;
  border: 4px solid var(--rule);
  background: var(--bg-strong);
  box-shadow:
    inset 0 0 0 2px var(--bg-strong),
    inset 0 0 0 4px var(--inner-highlight),
    inset 0 0 0 6px var(--bg-strong);
}

/* Live animated demo at the top. */
.tut-hp-anim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.tut-hp-anim-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
}
.tut-hp-anim-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 16px 14px;
  background: var(--bg);
  border: 3px solid var(--ink);
  min-width: 480px;
}
.tut-hp-anim-sprite {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: opacity 320ms, filter 320ms, transform 320ms;
}
.tut-hp-anim-sprite.fainted {
  opacity: 0.35;
  filter: grayscale(0.7);
  transform: rotate(-25deg);
}
.tut-hp-anim-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 280px;
}
.tut-hp-anim-track {
  width: 280px;
  height: 22px;
  background: rgba(0,0,0,0.16);
  border: 3px solid var(--ink);
  box-sizing: border-box;
  position: relative;
}
.tut-hp-anim-fill {
  height: 100%;
  width: 100%;
  background: #48C848;
  transition: width 500ms ease-out, background 200ms;
}
.tut-hp-anim-fill.b1 { background: #88D848; }
.tut-hp-anim-fill.b2 { background: #E8C828; }
.tut-hp-anim-fill.b3 { background: #E89028; }
.tut-hp-anim-fill.b4 { background: #E84828; }
.tut-hp-anim-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-on-box);
}

@keyframes tut-hp-dmg-rise {
  0%   { opacity: 0; transform: translate(-50%, 20px); }
  20%  { opacity: 1; transform: translate(-50%, 4px); }
  100% { opacity: 0; transform: translate(-50%, -56px); }
}
.tut-hp-anim-dmg {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, 20px);
  font-family: 'Press Start 2P', monospace;
  font-size: 15px;
  color: var(--pikachu-cheek, #C62828);
  pointer-events: none;
  animation: tut-hp-dmg-rise 1.05s ease-out forwards;
  text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF, 2px -2px 0 #FFF, -2px 2px 0 #FFF;
}

/* Comic-strip reference below. */
.tut-hp-strip {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 8px 0 4px;
}
.tut-hp-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px 8px;
  background: var(--bg);
  border: 2px solid var(--ink);
  min-width: 92px;
  box-shadow: inset -2px -2px 0 0 rgba(0,0,0,0.10);
}
.tut-hp-panel-sprite {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: opacity 200ms, filter 200ms, transform 200ms;
}
.tut-hp-panel.fainted .tut-hp-panel-sprite {
  opacity: 0.35;
  filter: grayscale(0.7);
  transform: rotate(-25deg);
}
.tut-hp-panel-track {
  width: 76px;
  height: 8px;
  background: rgba(0,0,0,0.16);
  border: 2px solid var(--ink);
  box-sizing: border-box;
}
.tut-hp-panel-fill {
  height: 100%;
  background: #48C848;
}
.tut-hp-panel-fill.b1 { background: #88D848; }
.tut-hp-panel-fill.b2 { background: #E8C828; }
.tut-hp-panel-fill.b3 { background: #E89028; }
.tut-hp-panel-fill.b4 { background: #E84828; }
.tut-hp-panel-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--ink-on-box);
}
.tut-hp-panel.fainted .tut-hp-panel-label {
  color: var(--cb-vermillion);
}
.tut-hp-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 2px;
  font-family: 'Press Start 2P', monospace;
}
.tut-hp-arrow-dmg {
  font-size: 7px;
  color: var(--pikachu-cheek, #C62828);
  letter-spacing: 0.04em;
}
.tut-hp-arrow-line {
  font-size: 18px;
  color: var(--ink-secondary);
  line-height: 1;
}

/* ---------- Step 4 — pick a move ----------
   Two layers stacked vertically:
     .tut-move-menu    the 3 disabled move buttons
     .tut-move-axis    a left/centre/right strip naming the gradient. */
.tut-move-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
}
.tut-move-menu {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.tut-move-menu .move-btn {
  cursor: default;
  opacity: 0.95;
}
.tut-move-axis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #585858;
  padding: 4px 6px;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
}
.tut-move-axis .ax-l { text-align: left; }
.tut-move-axis .ax-m { text-align: center; color: var(--pikachu-cheek); }
.tut-move-axis .ax-r { text-align: right; }

/* ---------- Step 4 — turn flow (animated) ---------- */

.tut-turn-demo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Mini battle stage on top of the sequence diagram. Made taller than
   220 px (the prior value squeezed sprites into the opponent HP box's
   lane during the lunge). 300 px gives the sprites room to move
   without overlapping the HP boxes at the corners. */
.tut-turn-stage {
  height: 300px !important;
  min-height: 300px;
  max-width: 760px;
  margin: 0 auto;
}
.tut-turn-stage .sprite-host img { transition: transform 240ms ease-out; }

/* PIKACHU attacks: lunges right toward CHARMANDER; CHARMANDER shakes.
   Y component is only -10 px so the lunge stays well below the
   opponent HP box at the top of the stage. */
@keyframes tut-turn-pika-lunge {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(90px, -10px); }
  60%  { transform: translate(90px, -10px); }
  100% { transform: translate(0, 0); }
}
@keyframes tut-turn-opp-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.tut-turn-stage.attack-pika .sprite-host.player img {
  animation: tut-turn-pika-lunge 1.1s ease-out;
}
.tut-turn-stage.attack-pika .sprite-host.opponent img {
  animation: tut-turn-opp-shake 0.5s ease-in-out 0.4s;
}

/* CHARMANDER counters: lunges left, PIKACHU shakes. Symmetric +10 px
   Y so Charm doesn't dive into the player HP box at the bottom. */
@keyframes tut-turn-charm-lunge {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(-90px, 10px); }
  60%  { transform: translate(-90px, 10px); }
  100% { transform: translate(0, 0); }
}
@keyframes tut-turn-player-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.tut-turn-stage.attack-charm .sprite-host.opponent img {
  animation: tut-turn-charm-lunge 1.1s ease-out;
}
.tut-turn-stage.attack-charm .sprite-host.player img {
  animation: tut-turn-player-shake 0.5s ease-in-out 0.4s;
}

/* Damage flash that floats up over the side getting hit. */
@keyframes tut-turn-flash-rise {
  0%   { opacity: 0; transform: translate(-50%, 12px); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -44px); }
}
.tut-turn-flash {
  position: absolute;
  top: 30%;
  transform: translate(-50%, 12px);
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  pointer-events: none;
  animation: tut-turn-flash-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;
}
.tut-turn-flash.opp    { right: 18%; }
.tut-turn-flash.player { left:  30%; top: 60%; }

/* 3-row sequence diagram. */
.tut-turn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  border: 4px solid var(--rule);
  background: var(--bg-strong);
  color: var(--ink-on-box);
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.tut-turn-row {
  display: grid;
  grid-template-columns: 36px 140px 1fr;
  gap: 14px;
  align-items: center;
  padding: 8px 6px;
  border-bottom: 1px dashed var(--ink-secondary);
  border-left: 4px solid transparent;
  transition: background 220ms, border-left-color 220ms;
}
.tut-turn-row:last-child { border-bottom: none; }
.tut-turn-row.active {
  background: rgba(248, 208, 40, 0.22);
  border-left-color: var(--pikachu-cheek);
}
.tut-turn-num {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: var(--ink-secondary);
  text-align: center;
  transition: color 220ms;
}
.tut-turn-row.active .tut-turn-num { color: var(--pikachu-cheek); }
.tut-turn-who {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--ink-on-box);
}
.tut-turn-action {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 1.7;
  color: var(--ink-on-box);
}

/* ---------- Step 5 — win / lose panels ---------- */
.tut-winlose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.tut-winlose-cell {
  padding: 18px 14px;
  text-align: center;
  border: 4px solid var(--rule);
  background: var(--bg-strong);
  color: var(--ink-on-box);
}
/* Win / loss panels use the colour-blind-safe blue ↔ vermillion border,
   plus the explicit "YOU WIN!" / "YOU LOSE." text and the fainted-sprite
   tilt to carry semantic meaning. */
.tut-winlose-cell.win  { box-shadow: inset 0 0 0 3px var(--cb-blue); }
.tut-winlose-cell.loss { box-shadow: inset 0 0 0 3px var(--cb-vermillion); }
.tut-mini-sprite {
  width: 96px; height: 96px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.tut-mini-sprite.faint { opacity: 0.35; filter: grayscale(0.6); }
.tut-winlose-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  margin: 12px 0 6px;
  letter-spacing: 0.04em;
}
.tut-winlose-reward {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--pikachu-cheek);
  margin-bottom: 6px;
}
.tut-winlose-cell.win  .tut-winlose-reward { color: var(--cb-blue); }
.tut-winlose-cell.loss .tut-winlose-reward { color: var(--cb-vermillion); }
.tut-winlose-detail {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.7;
  color: var(--ink-secondary);
}

.tut-footnote {
  margin-top: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 1.7;
  color: var(--ink-secondary);
  padding: 0 4px;
}

/* ---------------------------------------------------------------------------
   Mobile (≤ 720px). The welcome step uses `grid-template-columns: 220px 1fr`
   which leaves the 1fr dialog column at ~140px on a phone — wide enough
   to clip "PIKACHU CHOOSES YOU!". Stack to a single column, shrink the
   sprite, and let the headline reflow.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .tut-welcome {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 18px 14px;
  }
  .tut-welcome-sprite { justify-content: center; }
  .tut-big-sprite { width: 144px; height: 144px; }
  .tut-welcome-line.big { font-size: 14px; }
  .tut-welcome-line.small { font-size: 9px; }
}