:root {
  --ink: #0A0812;
  --cream: #FFF7E8;
  --panel-bg: #1a1208;
  --panel-dots: #2a1d10;
  --accent-color: #2d6f73;
  --bubble-bg: #FFF1D2;
  --text-color: #0A0812;
}

/* ── Act Palettes ─────────────────────────────── */
/* Ch 1 Voice Beneath the Palm — soft green / dawn */
.palette-act-1 { --panel-bg:#0e2d1a; --panel-dots:#143d24; --accent-color:#4e9e6b; --bubble-bg:#e0fce8; --text-color:#0A0812; }
/* Ch 2 Call to Courage — warm desert gold */
.palette-act-2 { --panel-bg:#2d1a0e; --panel-dots:#3d2814; --accent-color:#d4a76a; --bubble-bg:#fff5e0; --text-color:#0A0812; }
/* Ch 3 River Rose — stormy blue-grey */
.palette-act-3 { --panel-bg:#0e1a22; --panel-dots:#142838; --accent-color:#6b8cae; --bubble-bg:#e0f0fc; --text-color:#0A0812; }
/* Ch 4 Song of Peace — golden victory */
.palette-act-4 { --panel-bg:#2d240e; --panel-dots:#3d3014; --accent-color:#d4b84b; --bubble-bg:#fff8e0; --text-color:#0A0812; }

/* Contextual lower surface: hills, desert, river, village */
.palette-act-1 { --surface-1:#1a4a2e; --surface-2:#2d5f3d; --surface-3:#4a8a5a; --surface-4:#143d24; }
.palette-act-2 { --surface-1:#5a4030; --surface-2:#7a5a42; --surface-3:#a07858; --surface-4:#3d2814; }
.palette-act-3 { --surface-1:#2a3a4a; --surface-2:#3d5068; --surface-3:#5a7a9a; --surface-4:#142838; }
.palette-act-4 { --surface-1:#5a5020; --surface-2:#7a6a32; --surface-3:#a09048; --surface-4:#3d3014; }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--ink);
  font-family: 'Nunito', 'Nunito Local', sans-serif;
  color: var(--cream);
}

/* ── Start Screen ─────────────────────────────── */
#startScreen {
  position: fixed; inset: 0; z-index: 100;
  background: linear-gradient(160deg, #1a2d1a, #4a6b3a 60%, #1a2d1a);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 30px; transition: opacity .5s;
}
#startScreen .comic-cover {
  width: min(90vw, 460px);
  background: #1a2d1a;
  padding: 30px;
  border: 6px solid var(--ink);
  box-shadow: 12px 12px 0px var(--ink);
  background-image: radial-gradient(#4a6b3a 15%, transparent 15%);
  background-size: 12px 12px;
}
#startScreen .issue {
  font-family: 'Space Mono', 'Space Mono Local', Tahoma, sans-serif; font-size: 12px;
  color: var(--ink); background: #4e9e6b;
  display: inline-block; padding: 4px 10px; margin-bottom: 14px;
  font-weight: 700; border: 2px solid var(--ink);
}
#startScreen h1 {
  font-family: 'Bangers', 'Bangers Local', Tahoma, sans-serif;
  font-size: clamp(54px, 14vw, 60px);
  margin: 0; color: #4e9e6b;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill; line-height: 1;
  text-shadow: 6px 6px 0 #2d6f73;
}
#startScreen .subtitle {
  font-family: 'Baloo 2', 'Baloo 2 Local', Tahoma, sans-serif; font-size: 22px;
  color: var(--cream); margin: 4px 0 16px; font-weight: 800;
  text-shadow: 2px 2px 0px var(--ink);
}
.bigtorch { font-size: 64px; margin-bottom: 10px; animation: popInAnim .8s .2s both; filter: drop-shadow(0 0 10px rgba(78,158,107,0.5)); }
#startScreen p {
  font-family: 'Press Start 2P', 'Press Start 2P Local', Tahoma, sans-serif; font-size: 12px;
  max-width: 460px; color: var(--cream); opacity: .9;
  margin: 18px 0 26px; line-height: 2;

  font-weight: 700;
}
#startBtn {
  font-family: 'Press Start 2P', 'Press Start 2P Local', Tahoma, sans-serif; font-size: 14px;
  background: #2d6f73; color: var(--ink);
  border: 4px solid var(--ink); padding: 16px 30px; cursor: pointer;
  box-shadow: 6px 6px 0 var(--ink); transition: all .1s;

  font-weight: 700;
}
#startBtn:hover { box-shadow: 4px 4px 0 var(--ink); transform: translateY(2px);}
#startScreen.hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── App Shell ────────────────────────────────── */
#app { position: fixed; inset: 0; overflow: hidden; background: var(--ink); }

#halftoneOverlay {
  position: fixed; inset: 0;
  background: radial-gradient(circle, #fff 15%, #000 85%);
  background-size: 8px 8px;
  mix-blend-mode: multiply; opacity: 0.16; pointer-events: none; z-index: 50;
}
#bgGradient { position: absolute; inset: 0; transition: background 1.1s ease; z-index: 0; }
#particles   { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ── Rain Layer ──────────────────────────────── */
#rainLayer {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
#rainLayer.active { opacity: .78; }
#rainLayer #rainStripes { display: none; }
#rainLayer .wave-container { height: 112px; }
#rainLayer .air {
  background-image: none;
  background-color: var(--surface-1, #2a3a4a);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 60C150 100 350 20 500 60s350-40 500 0v40H0z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 60C150 100 350 20 500 60s350-40 500 0v40H0z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: 1000px 100px; mask-size: 1000px 100px;
}
#rainLayer .air1 { background-color: var(--surface-1); }
#rainLayer .air2 { background-color: var(--surface-2); }
#rainLayer .air3 { background-color: var(--surface-3); }
#rainLayer .air4 { background-color: var(--surface-4); }

/* ── Sea Layer ───────────────────────────────── */
#seaLayer {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
#seaLayer.active { opacity: 1; }
#seaWalls {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 8px,
    rgba(80, 140, 200, 0.18) 8px, rgba(80, 140, 200, 0.18) 9px
  );
}
.wave-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; }
.air { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background-size: 1000px 100px; }
.air.air1 { animation: waveScroll 16s linear infinite; z-index: 4; opacity: .9; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,100 350,20 500,60 C650,100 850,20 1000,60 L1000,100 L0,100 Z' fill='%236b8cae' opacity='0.6'/%3E%3C/svg%3E"); }
.air.air2 { animation: waveScrollRev 9s linear infinite; z-index: 3; opacity: .55; bottom: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,100 350,20 500,60 C650,100 850,20 1000,60 L1000,100 L0,100 Z' fill='%231a2d1a' opacity='0.5'/%3E%3C/svg%3E"); }
.air.air3 { animation: waveScroll 20s linear infinite; z-index: 2; opacity: .35; bottom: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,100 350,20 500,60 C650,100 850,20 1000,60 L1000,100 L0,100 Z' fill='%238ab8d0' opacity='0.4'/%3E%3C/svg%3E"); }
.air.air4 { animation: waveScrollRev 6s linear infinite; z-index: 1; opacity: .6; bottom: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,100 350,20 500,60 C650,100 850,20 1000,60 L1000,100 L0,100 Z' fill='%23fff7e8' opacity='0.2'/%3E%3C/svg%3E"); }
@keyframes waveScroll { 0% { background-position-x: 0; } 100% { background-position-x: 1000px; } }
@keyframes waveScrollRev { 0% { background-position-x: 0; } 100% { background-position-x: -1000px; } }

/* ── Fire Layer ──────────────────────────────── */
#fireLayer {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
#fireLayer.active { opacity: 1; }
#fireLayer::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(255,160,60,0.25), transparent 50%);
  animation: firePulse 2.4s ease-in-out infinite;
}
#fireLayer::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 70%, rgba(255,80,40,0.18), transparent 40%);
  animation: firePulse 1.8s ease-in-out infinite reverse;
}
@keyframes firePulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

/* ── Thunder Layer ───────────────────────────── */
#thunderLayer {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.95), rgba(140,120,255,0.2) 40%, transparent 80%);
}
#thunderLayer.active { opacity: 1; animation: thunderFlash 4s ease-in-out infinite; }
@keyframes thunderFlash {
  0%, 38%, 42%, 100% { opacity: 0; }
  40% { opacity: 1; }
  70% { opacity: 0.25; }
}

/* ── Ambient Layer ───────────────────────────── */
#ambientLayer {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
#ambientLayer.active { opacity: 1; }
.bird-container { position: absolute; top: 0; left: 0; width: 100%; height: 200px; }
.bird-fly {
  position: absolute; top: -20px; font-size: 18px;
  animation: birdFloat 14s linear infinite; opacity: 0.75;
}
@keyframes birdFloat { 0% { left: -5%; top: 35%; } 100% { left: 110%; top: 18%; } }
.bird-fly:nth-child(2) { animation-duration: 18s; animation-delay: -6s; top: 12%; font-size: 14px; }
.bird-fly:nth-child(3) { animation-duration: 21s; animation-delay: -3s; top: 50%; font-size: 11px; }
.land-arc {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 200%; height: 70%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, rgba(40,120,40,0.18), rgba(40,80,40,0.45));
  opacity: 0; transition: opacity 2s ease; pointer-events: none;
}
#ambientLayer.land .land-arc { opacity: 1; }

/* ── HUD ─────────────────────────────────────── */
#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px; pointer-events: auto; gap: 10px;
}
#chapterSelect {
  font-family: 'Press Start 2P', 'Press Start 2P Local', monospace; font-size: 9px;
  letter-spacing: .05em; text-transform: uppercase;
  background-color: var(--accent-color); color: var(--ink);
  border: 4px solid var(--ink); padding: 10px 34px 10px 16px;
  box-shadow: 4px 4px 0px var(--ink); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%230A0812'%3E%3Cpath d='M0 3h12L6 9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: background-color 0.5s;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
}
#dots { display: flex; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); transition: .3s; flex-shrink: 0; }
.dot.on { background: var(--accent-color); transform: scale(1.3); border: 1px solid var(--ink); }

/* ── Stage / Frame ───────────────────────────── */
#stageWrap {
  position: absolute; top: 90px; left: 0; right: 0; bottom: 24vh;
  z-index: 10; display: flex; align-items: center; justify-content: center;
}
#stage {
  position: relative; width: min(94vw, 760px); height: 100%;
  perspective: 1200px; display: flex; align-items: center; justify-content: center;
}
.comic-frame {
  width: 100%; height: 100%;
  background: var(--panel-bg);
  border: 6px solid var(--ink);
  box-shadow: 12px 12px 0px var(--ink);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px;
  background-image: radial-gradient(var(--panel-dots) 20%, transparent 20%),
                    radial-gradient(var(--panel-dots) 20%, transparent 20%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  transition: background 0.5s ease-in-out;
}
#graphicContainer {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
#svgLayer {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; transition: opacity 0.5s;
}
#svgLayer svg {
  width: 85%; height: auto; max-height: 85%;
  filter: drop-shadow(6px 6px 0px var(--ink));
}

/* ── Layered render ──────────────────────────── */
#svgLayer.svg-behind { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: block; }
#svgLayer.svg-behind svg { width: 100%; height: 100%; max-height: none; filter: none; }
#fgLayer.svg-front    { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: block; }
#fgLayer.svg-front svg { width: 100%; height: 100%; max-height: none; filter: drop-shadow(3px 3px 0 var(--ink)); }
#graphicContainer.canvas-mode { background: transparent; }
#graphicContainer > canvas    { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* ── Content Overlay ─────────────────────────── */
.content-overlay {
  position: relative; z-index: 4; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.char-container {
  width: 110px; height: 110px;
  filter: drop-shadow(4px 4px 0px var(--ink));
  animation: floatChar 3s ease-in-out infinite alternate;
  position: absolute; bottom: 20px; left: 20px;
}
.char-container.right { left: auto; right: 20px; }
@keyframes floatChar { 0% { transform: translateY(0) rotate(-1deg); } 100% { transform: translateY(-5px) rotate(2deg); } }

/* ── Caption (narrator) ─────────────────────── */
.caption {
  background-color: #E8B84B;
  background-image: radial-gradient(rgba(0,0,0,0.1) 15%, transparent 15%);
  background-size: 6px 6px;
  color: var(--ink); font-family: 'Press Start 2P', 'Press Start 2P Local', monospace;
  font-size: clamp(12px, 1.8vw, 13px); line-height: 1.6;
  font-weight: 700;
  padding: 14px 18px; border: 4px solid var(--ink);
  transform: rotate(-0.5deg); box-shadow: 6px 6px 0px var(--ink);
  width: 90%; text-align: center; hyphens: none; word-break: keep-all;
  max-width: 100%; margin-top: 10px;
}
.caption.caption-left  { width: 54%; align-self: flex-start; transform: rotate(-0.3deg); text-align: left; }
.caption.caption-center{ width: 72%; align-self: center; transform: rotate(-0.5deg); text-align: center; }
.caption.caption-right { width: 90%; align-self: flex-end; transform: rotate(0.3deg); text-align: right; }

/* ── Speech Bubbles ─────────────────────────── */
.bubble-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 10px; padding: 0 40px; }
.bubble-wrap.align-left  { align-items: flex-start; }
.bubble-wrap.align-center{ align-items: center; }
.bubble-wrap.align-right { align-items: flex-end; }
.bubble {
  position: relative; background-color: var(--bubble-bg); color: var(--text-color);
  padding: 18px 24px; border: 4px solid var(--ink);
  font-family: 'Baloo 2', 'Baloo 2 Local', sans-serif; font-weight: 800;
  font-size: clamp(16px, 2.8vw, 24px); line-height: 1.35;
  width: 100%; border-radius: 16px; box-shadow: 6px 6px 0px var(--ink);
  text-align: center; hyphens: none; word-break: keep-all; max-width: 100%;
  transition: background-color 0.5s, color 0.5s;
}
.bubble.bubble-left  { width: 54%; text-align: left; }
.bubble.bubble-center{ width: 72%; text-align: center; }
.bubble.bubble-right { width: 90%; text-align: right; }
.bubble::after {
  content: ''; position: absolute; bottom: -20px; left: 25%;
  border-width: 20px 15px 0; border-style: solid;
  border-color: var(--ink) transparent; display: block; width: 0;
}
.bubble::before {
  content: ''; position: absolute; bottom: -12px; left: 25%;
  border-width: 16px 11px 0; border-style: solid; border-color: inherit;
  display: block; width: 0; z-index: 1; margin-left: 4px;
}

/* ── Character bubble colours ────────────────── */
.bubble.deborah { background: #e8f4e8; color: #0A0812; }
.bubble.barak { background: #f0e8d8; color: #0A0812; }
.bubble.jael { background: #f8e0e0; color: #0A0812; }
.bubble.sisera { background: #e0e0e8; color: #0A0812; }
.bubble.jabin { background: #d8d0e0; color: #0A0812; }
.bubble.village_woman { background: #fff0e0; color: #0A0812; }
.bubble.israelite_scout { background: #e0f0e8; color: #0A0812; }
.bubble.deborah::before { border-top-color: #e8f4e8; }
.bubble.barak::before { border-top-color: #f0e8d8; }
.bubble.jael::before { border-top-color: #f8e0e0; }
.bubble.sisera::before { border-top-color: #e0e0e8; }
.bubble.jabin::before { border-top-color: #d8d0e0; }
.bubble.village_woman::before { border-top-color: #fff0e0; }
.bubble.israelite_scout::before { border-top-color: #e0f0e8; }

/* ── Game Instructions (inline in content-overlay) ─────────────────────────── */
.game-instructions {
  background-color: #E8B84B;
  background-image: radial-gradient(rgba(0,0,0,0.1) 15%, transparent 15%);
  background-size: 6px 6px;
  color: var(--ink);
  font-family: 'Press Start 2P', 'Press Start 2P Local', monospace;
  font-size: clamp(10px, 1.6vw, 12px);
  font-weight: 700;
  line-height: 1.5;
  padding: 14px 18px;
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0px var(--ink);
  width: 90%;
  max-width: 520px;
  text-align: center;
  margin: 0 auto 12px;
  transform: rotate(-0.3deg);
}
.game-instructions .game-kicker {
  display: block;
  font-family: 'Bangers', 'Bangers Local', cursive;
  font-size: clamp(14px, 2.2vw, 18px);
  letter-spacing: 0.1em;
  color: var(--accent-color);
  margin-bottom: 6px;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}
.game-instructions .game-title {
  display: block;
  font-family: 'Bangers', 'Bangers Local', cursive;
  font-size: clamp(18px, 3vw, 24px);
  margin-bottom: 8px;
  color: var(--ink);
}
.game-instructions .game-prompt {
  display: block;
  font-family: 'Press Start 2P', 'Press Start 2P Local', monospace;
  font-size: clamp(9px, 1.4vw, 11px);
  line-height: 1.5;
  margin-bottom: 8px;
  opacity: 0.85;
}
.game-instructions .game-status {
  display: block;
  font-family: 'Bangers', 'Bangers Local', cursive;
  font-size: clamp(11px, 1.8vw, 14px);
  letter-spacing: 0.06em;
  color: var(--accent-color);
}
.game-instructions .game-status.done { color: #4e9e6b; }
.game-instructions .game-status.hint { color: #c84b4b; }

/* ── SFX Text ────────────────────────────────── */
.sfx {
  font-family: 'Bangers', 'Bangers Local', cursive;
  font-size: clamp(54px, 10vw, 90px);
  color: #4e9e6b; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  text-shadow: 6px 6px 0 #2d6f73;
  transform: rotate(-6deg) scale(1.05); line-height: 1;
  position: absolute; top: 35%; z-index: 4; pointer-events: none;
}

/* ── Choices ─────────────────────────────────── */
#choices {
  position: absolute; left: 4vw; bottom: 11.5vh;
  z-index: 15; display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start;
  width: min(45vw, 420px); opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
#choices.show { opacity: 1; pointer-events: auto; }
.choiceBtn {
  font-family: 'Press Start 2P', 'Press Start 2P Local', monospace; font-size: 10px;
  background: #2d6f73; border: 4px solid var(--ink); color: var(--ink);
  padding: 12px 20px; cursor: pointer; transition: all .1s;
  box-shadow: 0 6px 0 var(--ink); text-align: center;
}
.choiceBtn:hover { box-shadow: 0 4px 0 var(--ink); transform: translateY(2px); }
.choiceBtn:active{ box-shadow: 0 0 0 var(--ink); transform: translateY(6px); }

/* ── Delay Note ──────────────────────────────── */
#delayNote {
  position: absolute; right: 4vw; bottom: 20px; transform: rotate(-0.5deg);
  z-index: 15; font-family: 'Press Start 2P', 'Press Start 2P Local', monospace; font-size: clamp(9px, 1.6vw, 12px);
  color: var(--ink); background-color: #E8B84B;
  background-image: radial-gradient(rgba(0,0,0,0.1) 15%, transparent 15%);
  background-size: 6px 6px; padding: 14px 22px; border: 4px solid var(--ink);
  box-shadow: 6px 6px 0px var(--ink); opacity: 0; pointer-events: none; transition: opacity .4s;
  text-align: center; width: min(40vw, 360px); line-height: 1.6;
}
#delayNote.show { opacity: 1; pointer-events: auto; }

/* ── Game Panel ──────────────────────────────── */
#gamePanel {
  position: absolute; left: 50%; bottom: 24vh; transform: translateX(-50%);
  z-index: 15; width: min(92vw, 760px);
  background: rgba(26, 45, 26, 0.95);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0px var(--ink);
  padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
  max-height: 0; overflow: hidden;
}
#gamePanel.open { opacity: 1; pointer-events: auto; max-height: 600px; overflow-y: auto; }
.game-heading { margin-bottom: 12px; }
.game-heading .eyebrow { font-family: 'Space Mono', 'Space Mono Local', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-color); margin: 0 0 4px; }
.game-heading h2 { font-family: 'Bangers', 'Bangers Local', cursive; font-size: clamp(22px, 4vw, 30px); margin: 0 0 8px; color: var(--cream); }
#gameInstructions { font-size: 13px; line-height: 1.5; color: var(--cream); margin: 0; opacity: .9; }
.game-area { display: flex; flex-direction: column; gap: 12px; }
.game-message { font-family: 'Press Start 2P', 'Press Start 2P Local', monospace; font-size: 11px; color: var(--accent-color); margin: 10px 0 0; min-height: 18px; }
.game-retry { margin: 10px 0 0; border: 3px solid var(--ink); padding: 9px 12px; background: #ffd84d; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font: inherit; cursor: pointer; }
.game-retry:hover { transform: translateY(1px); box-shadow: 2px 2px 0 var(--ink); }
.game-retry:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.choice-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.choice { font-family: 'Press Start 2P', 'Press Start 2P Local', monospace; font-size: 13px; background: var(--accent-color); color: var(--ink); border: 3px solid var(--ink); padding: 12px 18px; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: all .1s; }
.choice:hover { transform: translateY(2px); box-shadow: 2px 2px 0 var(--ink); }
.choice.correct { background: #4e9e6b; color: white; }
.choice.wrong { background: #c84b4b; color: white; }
.choice:disabled { cursor: not-allowed; opacity: .72; box-shadow: 1px 1px 0 var(--ink); }

.sequence-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sequence-card { font-family: 'Press Start 2P', 'Press Start 2P Local', monospace; font-size: 11px; background: var(--accent-color); color: var(--ink); border: 3px solid var(--ink); padding: 12px 18px; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: all .1s; }
.sequence-card.selected { background: #4e9e6b; color: white; transform: translateY(2px); box-shadow: 2px 2px 0 var(--ink); }

.river-game { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.river-token { font-family: 'Press Start 2P', 'Press Start 2P Local', monospace; font-size: 11px; background: #6b8cae; color: var(--ink); border: 3px solid var(--ink); padding: 12px 18px; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: all .4s ease; }
.river-token:disabled { opacity: .4; cursor: not-allowed; transform: translateY(10px); }

.song-words { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.song-word { font-family: 'Press Start 2P', 'Press Start 2P Local', monospace; font-size: 11px; background: #d4b84b; color: var(--ink); border: 3px solid var(--ink); padding: 12px 18px; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: all .1s; }
.song-word.chosen { background: #4e9e6b; color: white; transform: translateY(2px); box-shadow: 2px 2px 0 var(--ink); }

/* ── Navigation ──────────────────────────────── */
#navHints {
  position: absolute; bottom: 2.4vh; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  row-gap: 4px; gap: clamp(8px, 3vw, 22px); padding: 0 12px;
  font-family: 'Space Mono', 'Space Mono Local', monospace; font-size: clamp(8px, 2.4vw, 11px);
  letter-spacing: .05em; color: rgba(255,255,255,.5); pointer-events: none; text-align: center;
}
#nextBtn, #nextLineBtn {
  position: absolute; bottom: 6.2vh; right: 4vw; z-index: 25;
  font-family: 'Baloo 2', 'Baloo 2 Local', sans-serif; font-weight: 900;
  color: var(--ink); border: 3px solid var(--ink); padding: 12px 24px; cursor: pointer;
  box-shadow: 4px 4px 0px var(--ink); opacity: 0; transform: translateY(20px);
  transition: .4s; pointer-events: none;
}
#nextBtn     { font-size: 16px; background: #c84b4b; }
#nextLineBtn { font-size: 14px; background: #c87a30; }
#nextBtn.show, #nextLineBtn.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#nextBtn:hover, #nextLineBtn:hover { transform: translateY(-2px); box-shadow: 6px 6px 0px var(--ink); }
#nextBtn.finale { background: #E8B84B; }

/* ── Portal Transition ───────────────────────── */
#portal {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 150%, #000 150%);
}
#portal.falling { animation: fallIn .75s cubic-bezier(.7,0,.9,.4) forwards; }
@keyframes fallIn {
  0%   { background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 150%, #000 150%); }
  100% { background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 0%, #000 0%); }
}
#portal.rising  { animation: riseOut .7s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes riseOut {
  0%   { background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 0%, #000 0%); }
  100% { background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 150%, #000 150%); }
}

/* ── Frame Entry Animation ───────────────────── */
.popIn  { animation: popInAnim  .6s cubic-bezier(.2,1.4,.4,1) both; }
.popOut { animation: popOutAnim .4s ease both; }
@keyframes popInAnim  { 0% { opacity:0; transform: scale(.95) translateY(20px); } 100% { opacity:1; transform: scale(1) translateY(0); } }
@keyframes popOutAnim { 0% { opacity:1; transform: scale(1) translateY(0); } 100% { opacity:0; transform: scale(.98) translateY(-10px); } }

/* ── Text Animation Effects ──────────────────── */
.fx-fade .word   { opacity:0; transform:translateY(10px); animation: chFade .4s ease both; }
@keyframes chFade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.fx-type .word   { display:inline-block; opacity:0; transform:translateY(4px); animation: chType .2s ease both; }
@keyframes chType { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.fx-wave .word   { opacity:0; animation: chWaveIn .3s ease both, chWaveBob 1.5s ease-in-out infinite; }
@keyframes chWaveIn { from { opacity:0; } to { opacity:1; } }
@keyframes chWaveBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.fx-bounce .word { display:inline-block; opacity:0; transform:scale(.3) translateY(20px); animation: wordBounce .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes wordBounce { from { opacity:0; transform:scale(.3) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } }
.fx-shake .line-inner { display:inline-block; animation: shakeIt .4s ease-in-out infinite; }
@keyframes shakeIt { 0%,100% { transform:translate(0,0); } 20% { transform:translate(-3px,2px); } 40% { transform:translate(3px,-2px); } 60% { transform:translate(-2px,1px); } 80% { transform:translate(2px,-1px); } }

/* ── Responsive ──────────────────────────────── */
@media (max-width:600px) {
  #hud { flex-direction: column; align-items: center; padding: 14px 12px; gap: 8px; }
  #chapterSelect { order:2; font-size:8px; }
  #dots { order:1; flex-wrap:wrap; justify-content:center; max-width:90vw; }
  #gamePanel { left: 50%; transform: translateX(-50%); width: 96vw; bottom: 22vh; }
}
@media (prefers-reduced-motion: reduce) {
  .air, #thunderLayer, .bird-fly { animation: none !important; }
  .comic-frame, .popIn, .popOut { animation: none !important; transition: none !important; }
}

/* Shared layered scene sizing: keep every artwork SVG aligned to the panel. */
#graphicContainer { isolation: isolate; }
#graphicContainer > #svgLayer.svg-behind,
#graphicContainer > #midLayer.svg-middle,
#graphicContainer > #fgLayer.svg-front {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; overflow: hidden; pointer-events: none;
}
#graphicContainer > #svgLayer.svg-behind { z-index: 0; }
#graphicContainer > #midLayer.svg-middle { z-index: 1; }
#graphicContainer > canvas.three-canvas { z-index: 2; }
#graphicContainer > #fgLayer.svg-front { z-index: 3; }
#graphicContainer > #svgLayer.svg-behind svg,
#graphicContainer > #midLayer.svg-middle svg,
#graphicContainer > #fgLayer.svg-front svg {
  display: block; width: 100%; height: 100%; max-width: none; max-height: none;
}