:root {
  --ink: #101010;
  --paper: #fffdf8;
  --water: #c7f1ff;
  --deep: #1f6f8b;
  --coral: #ff7c72;
  --kelp: #226b4f;
  --sun: #ffd166;
  --shadow: rgba(9, 45, 60, 0.22);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 209, 102, 0.38), transparent 26rem),
    linear-gradient(180deg, #b6ecfb 0%, #ecfbff 44%, #f8fff0 100%);
}

.comic {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 36px);
}

.page {
  position: relative;
  min-height: min(1280px, calc(100vh - 32px));
  margin: 0 auto clamp(28px, 6vw, 72px);
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 22px 50px var(--shadow);
  isolation: isolate;
}

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(199, 241, 255, 0.34), transparent 18%, transparent 78%, rgba(31, 111, 139, 0.12)),
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(31, 111, 139, 0.035) 31px 34px);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.page-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.98;
}

.cafe .page-art {
  transform: translateY(-12%) scale(1.08);
  transform-origin: center bottom;
}

.title-block,
.caption,
.page-number,
.story-page h2,
.voice-panel {
  position: absolute;
  z-index: 6;
}

.title-block {
  left: clamp(18px, 5vw, 64px);
  right: clamp(18px, 5vw, 64px);
  top: clamp(18px, 4vw, 54px);
  padding: clamp(16px, 3vw, 30px);
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  text-align: center;
  box-shadow: 8px 8px 0 rgba(16, 16, 16, 0.12);
}

.title-block h1,
.title-block h2 {
  margin: 0;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
}

.title-block p {
  margin: 0.4rem 0 0;
  font-size: clamp(1.2rem, 2.8vw, 2.1rem);
  font-weight: 800;
}

.title-block .kicker {
  margin: 0 0 0.45rem;
  color: var(--deep);
  font-size: clamp(0.85rem, 1.7vw, 1.1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-page h2 {
  top: clamp(18px, 3vw, 36px);
  left: clamp(18px, 4vw, 48px);
  margin: 0;
  padding: 0.45rem 0.7rem;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.94);
  font-size: clamp(1.35rem, 3.8vw, 3rem);
  line-height: 1;
  box-shadow: 6px 6px 0 rgba(16, 16, 16, 0.12);
}

.caption {
  left: clamp(16px, 4vw, 56px);
  right: clamp(16px, 4vw, 56px);
  bottom: clamp(42px, 5vw, 66px);
  padding: clamp(14px, 2.5vw, 24px);
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 8px 8px 0 rgba(16, 16, 16, 0.12);
}

.caption p {
  margin: 0;
  font-size: clamp(1rem, 2.15vw, 1.55rem);
  line-height: 1.35;
  font-weight: 700;
}

.caption p + p {
  margin-top: 0.22rem;
}

.danger-caption {
  border-color: var(--coral);
}

.village-caption {
  border-color: var(--sun);
}

.cafe-caption {
  border-color: var(--sun);
}

.cafe .caption {
  top: clamp(112px, 12vw, 156px);
  bottom: auto;
}

.rescue-caption {
  border-color: var(--deep);
}

.monster-caption {
  border-color: var(--coral);
}

.robots-caption {
  border-color: var(--deep);
}

.bunnies-caption {
  border-color: var(--kelp);
}

.back-caption {
  border-color: var(--kelp);
}

.page-number {
  right: 18px;
  bottom: 12px;
  font-size: 0.95rem;
  font-weight: 800;
}

.voice-panel {
  right: clamp(18px, 4vw, 48px);
  top: clamp(86px, 12vw, 128px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: min(28vw, 260px);
  z-index: 8;
}

.cover .voice-panel,
.back-cover .voice-panel {
  top: clamp(180px, 18vw, 250px);
}

.voice-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 rgba(16, 16, 16, 0.14);
  font: inherit;
  font-size: clamp(0.78rem, 1.3vw, 0.95rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
}

.voice-btn::before {
  content: "▶";
  width: 1.35rem;
  color: var(--deep);
  font-size: 0.9rem;
  line-height: 1;
}

.voice-btn span {
  display: block;
  grid-column: 2;
  color: var(--deep);
  font-size: 0.7em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.voice-btn.is-playing {
  border-color: var(--coral);
  background: #fff7d9;
}

.voice-btn.is-playing::before {
  content: "■";
  color: var(--coral);
}

.voice-bubble {
  position: absolute;
  z-index: 9;
  display: grid;
  place-items: center;
  width: clamp(34px, 4vw, 46px);
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--deep);
  background: rgba(255, 253, 248, 0.88);
  box-shadow: 4px 4px 0 rgba(16, 16, 16, 0.14);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.voice-bubble::before {
  content: "▶";
  margin-left: 2px;
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  line-height: 1;
}

.voice-bubble::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: 5px;
  width: 10px;
  aspect-ratio: 1;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  transform: rotate(-18deg);
}

.voice-bubble:hover,
.voice-bubble:focus-visible {
  outline: 3px solid rgba(31, 111, 139, 0.28);
  outline-offset: 2px;
  background: var(--paper);
}

.voice-bubble.is-playing {
  border-color: var(--coral);
  color: var(--coral);
  background: #fff7d9;
}

.voice-bubble.is-dragging {
  z-index: 12;
  cursor: grabbing;
  outline: 3px solid rgba(31, 111, 139, 0.28);
  outline-offset: 2px;
  background: var(--paper);
}

.voice-bubble.is-user-positioned {
  transition: box-shadow 160ms ease, outline-color 160ms ease;
}

.voice-bubble.is-playing::before {
  content: "■";
  margin-left: 0;
  font-size: 0.8rem;
}

.p1-narration { right: 8%; top: 19%; }
.p1-shark-voice { left: 9%; top: 36%; }
.p1-turtle-voice { right: 7%; top: 55%; }
.p1-eels-voice { left: 9%; bottom: 11%; }

.p2-narration { right: 8%; bottom: 150px; }
.p2-merma-voice { left: 68%; top: 36%; }
.p2-siri-voice { left: 7%; top: 42%; }

.p3-narration { right: 8%; bottom: 150px; }
.p3-shark-voice { left: 54%; top: 31%; }
.p3-merma-voice { left: 6%; bottom: 172px; }
.p3-siri-voice { left: 14%; bottom: 172px; }

.p4-narration { right: 8%; bottom: 150px; }
.p4-turtle-voice { left: 5%; top: 9%; }
.p4-fish-voice { left: 69%; top: 31%; }
.p4-shark-voice { left: 9%; top: 37%; }

.p5-narration { right: 8%; bottom: 150px; }
.p5-teacher-voice { left: 56%; top: 44%; }
.p5-merma-voice { left: 26%; top: 52%; }
.p5-siri-voice { left: 40%; bottom: 214px; }

.p6-narration { right: 8%; top: clamp(220px, 23vw, 292px); }
.p6-mermaid-voice { right: 13%; top: 52%; }
.p6-group-voice { left: 41%; top: 58%; }

.p7-narration { right: 8%; bottom: 150px; }
.p7-police-voice { left: 20%; top: 25%; }
.p7-heroes-voice { left: 55%; top: 52%; }

.p8-narration { right: 8%; bottom: 150px; }
.p8-monster-voice { left: 38%; top: 32%; }
.p8-heroes-voice { right: 9%; top: 43%; }

.p9-narration { right: 8%; bottom: 150px; }
.p9-robot-mermaid-voice { left: 5%; top: 62%; }
.p9-robot-spy-voice { left: 70%; top: 60%; }

.p10-narration { right: 8%; bottom: 150px; }
.p10-bunny-voice { left: 26%; top: 58%; }
.p10-blindfold-bunny-voice { right: 6%; top: 62%; }

.cutout,
.current,
.memory-orbit,
.alarm-lines,
.village-warning,
.worry-lines,
.spy-signal,
.battle-burst,
.robot-scan,
.helper-rays,
.bubbles {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.cutout {
  width: min(42vw, 420px);
  height: auto;
  filter: drop-shadow(2px 4px 0 rgba(31, 111, 139, 0.12));
}

.front-shark {
  left: 50%;
  top: 37%;
  width: min(28vw, 280px);
  animation: shark-drift 8.5s ease-in-out infinite;
}

.fish-school {
  left: 38%;
  top: 52%;
  width: min(20vw, 170px);
  animation: school-swerve 7s ease-in-out infinite;
}

.turtle {
  right: 7%;
  top: 64%;
  width: min(23vw, 210px);
  animation: turtle-glide 10.5s ease-in-out infinite;
}

.eel {
  transform-origin: 50% 100%;
  animation: eel-sway 3.8s ease-in-out infinite;
}

.eel-left {
  left: 7%;
  bottom: 5.8%;
  width: min(5vw, 54px);
}

.eel-right {
  left: 14.2%;
  bottom: 5.8%;
  width: min(5vw, 54px);
  animation-delay: -1.1s;
}

.p1-shark {
  left: 9%;
  top: 32%;
  width: min(36vw, 370px);
  animation: p1-shark-swim 7.5s ease-in-out infinite;
}

.p1-turtle {
  right: 12%;
  top: 58%;
  width: min(24vw, 230px);
  animation: p1-turtle-paddle 9s ease-in-out infinite;
}

.p2-character {
  left: var(--x);
  top: var(--y);
  width: var(--w);
  animation: p2-character-drift 7.5s ease-in-out infinite;
  animation-delay: var(--d);
}

.merma-siri {
  left: 3%;
  top: 23%;
  width: min(74vw, 720px);
  animation: sister-float 7.5s ease-in-out infinite;
}

.big-shark {
  left: 4%;
  top: 21%;
  width: min(84vw, 780px);
  animation: threat-pulse 5.8s ease-in-out infinite;
}

.p5-left-student {
  left: 8%;
  top: 42%;
  width: min(22vw, 235px);
  animation: p5-student-wave 6.4s ease-in-out infinite;
}

.p5-teacher {
  left: 37%;
  top: 43%;
  width: min(20vw, 215px);
  animation: p5-teacher-float 7.2s ease-in-out infinite;
}

.p5-upside-down {
  right: 13%;
  top: 50%;
  width: min(16vw, 165px);
  animation: p5-upside-down-spin 8s ease-in-out infinite;
}

.p5-bottom-sisters {
  left: 27%;
  bottom: 166px;
  width: min(52vw, 560px);
  animation: p5-sisters-glide 7.8s ease-in-out infinite;
}

.p6-cafe-mermaid {
  right: 13%;
  top: 52%;
  width: min(15vw, 165px);
  animation: p6-cafe-watch 6.6s ease-in-out infinite;
}

.p6-cafe-group {
  left: 23%;
  top: 58%;
  width: min(36vw, 405px);
  animation: p6-group-huddle 7.4s ease-in-out infinite;
}

.p6-lower-villager {
  left: 6%;
  top: 68%;
  width: min(22vw, 245px);
  animation: p6-lower-drift 6.2s ease-in-out infinite;
}

.p7-police-spy {
  left: 26%;
  top: 11%;
  width: min(24vw, 280px);
  animation: p7-spy-sway 6.4s ease-in-out infinite;
}

.p7-left-hero {
  left: -1%;
  top: 42%;
  width: min(39vw, 440px);
  animation: p7-left-hero-glide 7.8s ease-in-out infinite;
}

.p7-hero-team {
  left: 39%;
  top: 36%;
  width: min(26vw, 290px);
  animation: p7-team-ready 6.8s ease-in-out infinite;
}

.p8-monster-shark {
  left: 1%;
  top: 22%;
  width: min(40vw, 465px);
  animation: p8-monster-loom 5.6s ease-in-out infinite;
}

.p8-hero-platform {
  right: 4%;
  top: 35%;
  width: min(54vw, 620px);
  animation: p8-heroes-advance 6.8s ease-in-out infinite;
}

.p9-robot-mermaid {
  left: 9%;
  top: 52%;
  width: min(36vw, 410px);
  animation: p9-robot-glitch 5.4s steps(2, end) infinite;
}

.p9-robot-spy {
  left: 48%;
  top: 56%;
  width: min(29vw, 330px);
  animation: p9-robot-glitch 5.9s steps(2, end) infinite reverse;
}

.p10-left-bunny {
  left: 29%;
  top: 22%;
  width: min(20vw, 240px);
  animation: p10-bunny-hop 6.2s ease-in-out infinite;
}

.p10-board-bunny {
  left: 38%;
  top: 48%;
  width: min(28vw, 320px);
  animation: p10-board-glide 7.4s ease-in-out infinite;
}

.p10-flying-bunny {
  right: 6%;
  top: 36%;
  width: min(36vw, 430px);
  animation: p10-flying-bunny 6.8s ease-in-out infinite;
}

.p10-right-bunny {
  right: 9%;
  top: 62%;
  width: min(18vw, 190px);
  animation: p10-bunny-hop 5.8s ease-in-out infinite reverse;
}

.p2-shark {
  left: 7%;
  top: 24%;
  width: min(39vw, 400px);
  animation: shark-drift 8s ease-in-out infinite;
}

.reef-creatures {
  right: 6%;
  top: 39%;
  width: min(31vw, 330px);
  animation: reef-bob 6s ease-in-out infinite;
}

.current {
  left: 5%;
  right: 5%;
  width: 90%;
  fill: none;
  stroke: rgba(31, 111, 139, 0.28);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 18 22;
  animation: current-flow 14s linear infinite;
}

.current-a {
  top: 18%;
}

.current-b {
  top: 18%;
}

.memory-orbit {
  right: 8%;
  top: 18%;
  width: min(25vw, 180px);
  fill: none;
  stroke: rgba(255, 124, 114, 0.55);
  stroke-width: 5;
  animation: memory-spin 12s linear infinite;
}

.memory-orbit path {
  fill: rgba(255, 209, 102, 0.36);
}

.alarm-lines {
  right: 8%;
  top: 16%;
  width: min(34vw, 280px);
  fill: none;
  stroke: var(--coral);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 1 22;
  animation: alarm-blink 1s steps(2, end) infinite;
}

.village-warning {
  right: 8%;
  top: 30%;
  width: min(30vw, 240px);
  fill: none;
  stroke: rgba(255, 124, 114, 0.58);
  stroke-width: 8;
  stroke-linecap: round;
  animation: village-warning-drift 6.5s ease-in-out infinite;
}

.village-warning path:last-child {
  fill: rgba(255, 209, 102, 0.28);
  stroke: rgba(255, 124, 114, 0.48);
}

.worry-lines,
.spy-signal,
.battle-burst,
.robot-scan,
.helper-rays {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  z-index: 4;
}

.worry-lines {
  left: 46%;
  top: 38%;
  width: min(30vw, 240px);
  stroke: rgba(255, 124, 114, 0.5);
  stroke-dasharray: 1 18;
  animation: alarm-blink 1.2s steps(2, end) infinite;
}

.spy-signal {
  left: 30%;
  top: 18%;
  width: min(28vw, 230px);
  stroke: rgba(31, 111, 139, 0.45);
  animation: current-flow 11s linear infinite;
}

.spy-signal circle {
  fill: rgba(255, 209, 102, 0.18);
}

.battle-burst {
  left: 37%;
  top: 28%;
  width: min(26vw, 250px);
  stroke: rgba(255, 124, 114, 0.52);
  fill: rgba(255, 209, 102, 0.2);
  animation: battle-burst-pulse 1.6s ease-in-out infinite;
}

.robot-scan {
  left: 34%;
  top: 41%;
  width: min(34vw, 300px);
  stroke: rgba(31, 111, 139, 0.38);
  stroke-dasharray: 16 14;
  animation: robot-scan-slide 3.4s linear infinite;
}

.helper-rays {
  left: 40%;
  top: 28%;
  width: min(28vw, 260px);
  stroke: rgba(255, 209, 102, 0.8);
  animation: helper-rays-pulse 2.8s ease-in-out infinite;
}

.bubbles {
  inset: 0;
  z-index: 4;
}

.bubbles span {
  position: absolute;
  display: block;
  width: 14px;
  aspect-ratio: 1;
  border: 3px solid rgba(31, 111, 139, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: bubble-rise 7s ease-in infinite;
}

.bubbles span:nth-child(1) { left: 72%; bottom: 18%; animation-delay: 0s; }
.bubbles span:nth-child(2) { left: 78%; bottom: 24%; animation-delay: 1.2s; width: 20px; }
.bubbles span:nth-child(3) { left: 84%; bottom: 16%; animation-delay: 2.4s; width: 11px; }
.bubbles span:nth-child(4) { left: 66%; bottom: 21%; animation-delay: 3.4s; width: 18px; }
.bubbles span:nth-child(5) { left: 58%; bottom: 14%; animation-delay: 4.6s; width: 10px; }

.bubbles-b span:nth-child(1) { left: 22%; bottom: 27%; }
.bubbles-b span:nth-child(2) { left: 28%; bottom: 34%; }
.bubbles-b span:nth-child(3) { left: 18%; bottom: 20%; }
.bubbles-b span:nth-child(4) { left: 33%; bottom: 24%; }

@keyframes shark-drift {
  0%, 100% { transform: translate3d(-1.2%, 0, 0) rotate(-0.6deg); }
  50% { transform: translate3d(2.5%, -1%, 0) rotate(0.6deg); }
}

@keyframes school-swerve {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(5%, -3%, 0) scale(0.98); }
}

@keyframes turtle-glide {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-3%, 2%, 0) rotate(-1.5deg); }
}

@keyframes sister-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(1.2%, -1.8%, 0) rotate(0.6deg); }
}

@keyframes threat-pulse {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(1.5%, -0.8%, 0) scale(1.018); }
}

@keyframes reef-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes eel-sway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  35% { transform: translate3d(3px, -5px, 0) rotate(4deg); }
  70% { transform: translate3d(-2px, -2px, 0) rotate(-5deg); }
}

@keyframes p1-shark-swim {
  0%, 100% { transform: translate3d(-3px, 0, 0) rotate(-0.5deg); }
  50% { transform: translate3d(14px, -7px, 0) rotate(0.8deg); }
}

@keyframes p1-turtle-paddle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-10px, 8px, 0) rotate(-2deg); }
}

@keyframes p2-character-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.4deg); }
  50% { transform: translate3d(8px, -6px, 0) rotate(0.6deg); }
}

@keyframes p5-student-wave {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(9px, -8px, 0) rotate(1.2deg); }
}

@keyframes p5-teacher-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-7px, -10px, 0) rotate(-1deg); }
}

@keyframes p5-upside-down-spin {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(10px, -5px, 0) rotate(3deg); }
}

@keyframes p5-sisters-glide {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.4deg); }
  50% { transform: translate3d(-12px, -7px, 0) rotate(0.8deg); }
}

@keyframes village-warning-drift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.65; }
  50% { transform: translate3d(-10px, -8px, 0); opacity: 0.9; }
}

@keyframes p6-cafe-watch {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-8px, -6px, 0) rotate(-1.2deg); }
}

@keyframes p6-group-huddle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.4deg); }
  50% { transform: translate3d(8px, -5px, 0) rotate(0.8deg); }
}

@keyframes p6-lower-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(10px, -8px, 0); }
}

@keyframes p7-spy-sway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(8px, -7px, 0) rotate(1.5deg); }
}

@keyframes p7-left-hero-glide {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(12px, -5px, 0) rotate(0.8deg); }
}

@keyframes p7-team-ready {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.8deg); }
  50% { transform: translate3d(-8px, -8px, 0) rotate(0.8deg); }
}

@keyframes p8-monster-loom {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(12px, -8px, 0) scale(1.02); }
}

@keyframes p8-heroes-advance {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.4deg); }
  50% { transform: translate3d(-12px, -7px, 0) rotate(0.7deg); }
}

@keyframes p9-robot-glitch {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(5px, -4px, 0) rotate(0.8deg); }
}

@keyframes p10-bunny-hop {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.8deg); }
  50% { transform: translate3d(6px, -12px, 0) rotate(1deg); }
}

@keyframes p10-board-glide {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.4deg); }
  50% { transform: translate3d(10px, -9px, 0) rotate(0.8deg); }
}

@keyframes p10-flying-bunny {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-14px, -10px, 0) rotate(-1.5deg); }
}

@keyframes battle-burst-pulse {
  0%, 100% { transform: scale(0.96); opacity: 0.35; }
  50% { transform: scale(1.08); opacity: 0.82; }
}

@keyframes robot-scan-slide {
  from { stroke-dashoffset: 0; transform: translateY(-6px); }
  to { stroke-dashoffset: -90; transform: translateY(10px); }
}

@keyframes helper-rays-pulse {
  0%, 100% { opacity: 0.34; transform: scale(0.96); }
  50% { opacity: 0.9; transform: scale(1.04); }
}

@keyframes current-flow {
  from { stroke-dashoffset: 0; transform: translateX(-1%); }
  to { stroke-dashoffset: -240; transform: translateX(1%); }
}

@keyframes memory-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes alarm-blink {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.9; }
}

@keyframes bubble-rise {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  15% { opacity: 0.75; }
  85% { opacity: 0.55; }
  100% { transform: translateY(-220px) scale(1.35); opacity: 0; }
}

@media (max-width: 720px) {
  .comic {
    padding: 10px;
  }

  .page {
    min-height: 780px;
    margin-bottom: 24px;
  }

  .title-block {
    left: 12px;
    right: 12px;
    padding: 14px 10px 16px;
  }

  .title-block h1,
  .title-block h2 {
    font-size: clamp(1.7rem, 7.4vw, 2.25rem);
    line-height: 1;
  }

  .title-block p {
    font-size: clamp(1rem, 5vw, 1.35rem);
  }

  .title-block .kicker {
    font-size: 0.78rem;
  }

  .caption {
    left: 12px;
    right: 12px;
    bottom: 34px;
  }

  .voice-panel {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 84px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
    gap: 6px;
  }

  .cover .voice-panel {
    top: auto;
    bottom: 76px;
  }

  .back-cover .voice-panel {
    top: auto;
    bottom: 150px;
  }

  .story-page .voice-panel {
    top: auto;
    bottom: 174px;
  }

  .voice-btn {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 0.76rem;
    box-shadow: 3px 3px 0 rgba(16, 16, 16, 0.14);
  }

  .voice-bubble {
    width: 32px;
    box-shadow: 3px 3px 0 rgba(16, 16, 16, 0.14);
  }

  .voice-bubble::after {
    right: -4px;
    bottom: 4px;
    width: 8px;
  }

  .p1-narration { right: 6%; top: 16%; }
  .p1-shark-voice { left: 7%; top: 35%; }
  .p1-turtle-voice { right: 5%; top: 56%; }
  .p1-eels-voice { left: 12%; bottom: 10%; }

  .p2-narration { right: 7%; bottom: 150px; }
  .p2-merma-voice { left: 70%; top: 35%; }
  .p2-siri-voice { left: 6%; top: 42%; }

  .p3-narration { right: 7%; bottom: 150px; }
  .p3-shark-voice { left: 53%; top: 31%; }
  .p3-merma-voice { left: 6%; bottom: 164px; }
  .p3-siri-voice { left: 17%; bottom: 164px; }

  .p4-narration { right: 7%; bottom: 142px; }
  .p4-turtle-voice { left: 5%; top: 9%; }
  .p4-fish-voice { left: 68%; top: 32%; }
  .p4-shark-voice { left: 7%; top: 37%; }

  .p5-narration { right: 7%; bottom: 142px; }
  .p5-teacher-voice { left: 57%; top: 42%; }
  .p5-merma-voice { left: 22%; top: 50%; }
  .p5-siri-voice { left: 42%; bottom: 202px; }

  .cafe .caption {
    top: 84px;
  }

  .p6-narration { right: 7%; top: 226px; }
  .p6-mermaid-voice { right: 8%; top: 50%; }
  .p6-group-voice { left: 40%; top: 57%; }

  .p7-narration { right: 7%; bottom: 142px; }
  .p7-police-voice { left: 18%; top: 24%; }
  .p7-heroes-voice { left: 56%; top: 52%; }

  .p8-narration { right: 7%; bottom: 142px; }
  .p8-monster-voice { left: 55%; top: 31%; }
  .p8-heroes-voice { right: 7%; top: 43%; }

  .p9-narration { right: 7%; bottom: 142px; }
  .p9-robot-mermaid-voice { left: 7%; top: 64%; }
  .p9-robot-spy-voice { left: 70%; top: 60%; }

  .p10-narration { right: 7%; bottom: 142px; }
  .p10-bunny-voice { left: 25%; top: 58%; }
  .p10-blindfold-bunny-voice { right: 4%; top: 58%; }

  .caption p {
    font-size: 0.98rem;
  }

  .merma-siri {
    width: 82vw;
    left: 3%;
    top: 22%;
  }

  .big-shark {
    width: 96vw;
    left: -7%;
    top: 26%;
  }

  .p5-left-student {
    left: 6%;
    top: 42%;
    width: 25vw;
  }

  .p5-teacher {
    left: 35%;
    top: 44%;
    width: 25vw;
  }

  .p5-upside-down {
    right: 6%;
    top: 51%;
    width: 22vw;
  }

  .p5-bottom-sisters {
    left: 18%;
    bottom: 156px;
    width: 66vw;
  }

  .p6-cafe-mermaid {
    right: 8%;
    top: 50%;
    width: 21vw;
  }

  .p6-cafe-group {
    left: 20%;
    top: 57%;
    width: 47vw;
  }

  .p6-lower-villager {
    left: 2%;
    top: 68%;
    width: 30vw;
  }

  .p7-police-spy {
    left: 25%;
    top: 12%;
    width: 31vw;
  }

  .p7-left-hero {
    left: -5%;
    top: 42%;
    width: 48vw;
  }

  .p7-hero-team {
    left: 39%;
    top: 36%;
    width: 32vw;
  }

  .p8-monster-shark {
    left: -5%;
    top: 24%;
    width: 52vw;
  }

  .p8-hero-platform {
    right: -6%;
    top: 36%;
    width: 66vw;
  }

  .p9-robot-mermaid {
    left: 3%;
    top: 52%;
    width: 46vw;
  }

  .p9-robot-spy {
    left: 48%;
    top: 56%;
    width: 39vw;
  }

  .p10-left-bunny {
    left: 25%;
    top: 22%;
    width: 26vw;
  }

  .p10-board-bunny {
    left: 32%;
    top: 49%;
    width: 38vw;
  }

  .p10-flying-bunny {
    right: -8%;
    top: 37%;
    width: 50vw;
  }

  .p10-right-bunny {
    right: 7%;
    top: 63%;
    width: 24vw;
  }

  .front-shark {
    width: 38vw;
    left: 45%;
    top: 38%;
  }

  .fish-school {
    width: 30vw;
    left: 39%;
    top: 52%;
  }

  .turtle {
    width: 31vw;
    right: 2%;
    top: 64%;
  }

  .eel-left {
    width: 5vw;
    left: 7%;
    bottom: 7.2%;
  }

  .eel-right {
    width: 5vw;
    left: 15%;
    bottom: 7.2%;
  }

  .p1-shark {
    left: 8%;
    top: 31%;
    width: 45vw;
  }

  .p1-turtle {
    right: 7%;
    top: 60%;
    width: 30vw;
  }

  .memory-orbit,
  .alarm-lines,
  .village-warning,
  .worry-lines,
  .spy-signal,
  .battle-burst,
  .robot-scan,
  .helper-rays {
    opacity: 0.62;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}