:root {
  --ink: #17233d;
  --sky: #8ed8ff;
  --blue: #1269d3;
  --blue-dark: #174a9a;
  --red: #ef3e39;
  --yellow: #ffd447;
  --green: #4db86f;
  --pink: #ff8ccf;
  --paper: #fff9e8;
  --white: #ffffff;
  --shadow: 0 24px 54px rgba(20, 42, 83, 0.28);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(142, 216, 255, 0.98), rgba(239, 249, 255, 0.98) 58%, rgba(127, 200, 128, 0.96)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0 2px, transparent 2px 56px);
  overflow-x: hidden;
}

button {
  font: inherit;
}

.reader-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: 18px clamp(14px, 3vw, 34px) 22px;
  position: relative;
}

.reader-shell::before,
.reader-shell::after {
  content: "";
  position: fixed;
  inset: auto auto 0 0;
  width: 100%;
  height: 34vh;
  pointer-events: none;
  background:
    linear-gradient(45deg, transparent 0 45%, rgba(41, 128, 75, 0.36) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 0 45%, rgba(76, 158, 89, 0.34) 45% 55%, transparent 55%);
  background-size: 72px 72px;
  opacity: 0.45;
}

.topbar,
.controls {
  width: min(1120px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.brand strong {
  display: block;
  font-family: "Bangers", Impact, sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 0.88;
  letter-spacing: 0;
  text-shadow: 2px 3px 0 rgba(255, 255, 255, 0.76);
}

.brand small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--blue-dark);
}

.logo-mark {
  width: 74px;
  height: 52px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 4px 5px 0 var(--ink);
  display: grid;
  place-items: center;
}

.logo-mark svg {
  width: 66px;
}

.logo-cloud {
  fill: #d8f5ff;
  stroke: var(--ink);
  stroke-width: 3;
}

.logo-plane {
  fill: var(--blue);
  stroke: var(--ink);
  stroke-linejoin: round;
  stroke-width: 3;
}

.logo-spark {
  fill: var(--yellow);
  stroke: var(--ink);
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.episode-tag {
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--yellow);
  box-shadow: 4px 5px 0 var(--ink);
  padding: 8px 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.comic-stage {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.comic-page {
  min-height: min(68vh, 700px);
  border: 5px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow), 8px 9px 0 var(--ink);
  overflow: hidden;
  position: relative;
  display: grid;
}

.panel-grid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity 180ms ease, transform 180ms ease;
}

.panel-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(23, 35, 61, 0.08) 0 4px, transparent 4px),
    linear-gradient(180deg, rgba(23, 35, 61, 0.08) 0 4px, transparent 4px);
  background-size: 52px 52px;
  mix-blend-mode: multiply;
  opacity: 0.44;
}

.comic-art-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.comic-art-image + .plane,
.comic-art-image ~ .kid,
.comic-art-image ~ .maya-kid,
.comic-art-image ~ .boom-block,
.comic-art-image ~ .dino,
.comic-art-image ~ .island,
.comic-art-image ~ .tnt,
.comic-art-image ~ .door,
.comic-art-image ~ .map,
.comic-art-image ~ .engine,
.comic-art-image ~ .runway {
  display: none;
}

.story-layer {
  position: relative;
  z-index: 2;
  min-height: min(68vh, 700px);
  display: grid;
  align-content: end;
  gap: 12px;
  padding: clamp(20px, 4vw, 42px);
  background: linear-gradient(180deg, transparent 0 44%, rgba(255, 249, 232, 0.8) 78%, rgba(255, 249, 232, 0.96));
}

.comic-page:has(.comic-art-image) .story-layer {
  background: linear-gradient(180deg, rgba(7, 27, 68, 0.04) 0 42%, rgba(255, 249, 232, 0.76) 78%, rgba(255, 249, 232, 0.96));
}

.comic-page.cover-art h1 {
  font-size: 0;
  text-shadow: none;
}

.comic-page.cover-art .page-kicker {
  opacity: 0;
  pointer-events: none;
}

.page-kicker {
  margin: 0;
  width: fit-content;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--red);
  color: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  max-width: 840px;
  font-family: "Bangers", Impact, sans-serif;
  font-size: clamp(46px, 8.2vw, 108px);
  line-height: 0.88;
  letter-spacing: 0;
  color: var(--ink);
  text-shadow: 4px 5px 0 var(--yellow), 7px 8px 0 rgba(23, 35, 61, 0.18);
}

.narration {
  margin: 0;
  max-width: 760px;
  font-size: clamp(18px, 2.5vw, 27px);
  line-height: 1.18;
  font-weight: 900;
}

.bubble-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.speech {
  max-width: min(440px, 100%);
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 4px 5px 0 var(--ink);
  padding: 12px 14px;
  font-size: clamp(16px, 2.1vw, 22px);
  font-weight: 1000;
  line-height: 1.08;
  position: relative;
}

.speech::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -16px;
  width: 24px;
  height: 24px;
  background: inherit;
  border-right: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  transform: rotate(45deg);
}

.speech.maya {
  background: #ffe5f4;
}

.speech.boom {
  background: #daf7d5;
}

.nav-button,
.control-button {
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 4px 5px 0 var(--ink);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.nav-button {
  width: 58px;
  height: 72px;
  display: grid;
  place-items: center;
}

.nav-button svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.nav-button:hover,
.control-button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 3px 0 var(--ink);
}

.nav-button:disabled {
  opacity: 0.42;
  cursor: default;
}

.controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}

.control-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  font-weight: 1000;
}

.control-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.dot {
  width: 13px;
  height: 13px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  cursor: pointer;
}

.dot.active {
  background: var(--red);
}

.page-count {
  min-width: 76px;
  text-align: right;
  font-weight: 1000;
}

.sky-scene {
  background:
    radial-gradient(circle at 14% 18%, #ffffff 0 6%, transparent 6.2%),
    radial-gradient(circle at 72% 24%, #ffffff 0 7%, transparent 7.2%),
    linear-gradient(180deg, #70cfff 0 55%, #67c778 55% 100%);
}

.hangar-scene {
  background:
    linear-gradient(90deg, rgba(23, 35, 61, 0.12) 0 4px, transparent 4px 80px),
    linear-gradient(180deg, #9fe0ff 0 40%, #dbe1e8 40% 72%, #80c46d 72%);
}

.secret-scene {
  background:
    linear-gradient(135deg, rgba(255, 212, 71, 0.75) 0 12%, transparent 12%),
    linear-gradient(180deg, #314464 0 58%, #213047 58% 100%);
}

.portal-scene {
  background:
    conic-gradient(from 20deg at 72% 38%, #ffe35f, #8ed8ff, #ff8ccf, #67c778, #ffe35f);
}

.dino-scene {
  background:
    radial-gradient(circle at 78% 20%, #fff7b2 0 8%, transparent 8.2%),
    linear-gradient(180deg, #78d5ff 0 48%, #56b56b 48% 100%);
}

.final-scene {
  background:
    linear-gradient(180deg, #9ee5ff 0 56%, #ffe15d 56% 60%, #68c47a 60% 100%);
}

.plane,
.kid,
.maya-kid,
.boom-block,
.dino,
.island,
.tnt,
.door,
.map,
.engine,
.runway {
  position: absolute;
  border: 4px solid var(--ink);
  box-shadow: 5px 6px 0 rgba(23, 35, 61, 0.42);
}

.plane,
.boom-block,
.dino,
.island,
.tnt,
.door,
.map,
.engine,
.runway {
  z-index: 1;
}

.plane {
  width: 42%;
  height: 19%;
  right: 9%;
  top: 20%;
  border-radius: 44% 12% 12% 44%;
  background: var(--white);
}

.plane::before {
  content: "";
  position: absolute;
  width: 34%;
  height: 64%;
  left: 34%;
  top: 52%;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--blue);
  transform: skewX(-22deg);
}

.plane::after {
  content: "";
  position: absolute;
  width: 20%;
  height: 58%;
  right: -5%;
  top: -34%;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--red);
  transform: rotate(18deg);
}

.window {
  position: absolute;
  top: 26%;
  width: 30px;
  height: 30px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #93e4ff;
}

.window.one {
  left: 18%;
}

.window.two {
  left: 32%;
}

.window.three {
  left: 46%;
}

.kid,
.maya-kid {
  width: 92px;
  height: 148px;
  bottom: 20%;
  border: 0;
  box-shadow: none;
  z-index: 2;
}

.kid {
  left: 9%;
}

.maya-kid {
  left: 21%;
}

.head,
.body,
.hair,
.hat {
  position: absolute;
  border: 4px solid var(--ink);
}

.head {
  left: 19px;
  top: 0;
  width: 54px;
  height: 58px;
  border-radius: 42% 42% 45% 45%;
  background: #ffd3a6;
  z-index: 3;
}

.hair {
  left: 15px;
  top: -4px;
  width: 60px;
  height: 28px;
  border-radius: 18px 18px 7px 7px;
  background: #c79a5c;
  z-index: 4;
}

.hat {
  left: 6px;
  top: -14px;
  width: 78px;
  height: 28px;
  border-radius: 50%;
  background: #173e8e;
  z-index: 5;
}

.body {
  left: 10px;
  top: 56px;
  width: 72px;
  height: 84px;
  border-radius: 12px 12px 8px 8px;
  background: var(--yellow);
  z-index: 2;
}

.body::after {
  content: "AA";
  position: absolute;
  right: 8px;
  top: 12px;
  width: 28px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--white);
  color: var(--blue-dark);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 1000;
}

.maya-kid .hair {
  background: #4a2b28;
  height: 52px;
  border-radius: 24px 24px 12px 12px;
}

.maya-kid .body {
  background: var(--pink);
}

.boom-block {
  width: 92px;
  height: 92px;
  right: 13%;
  bottom: 24%;
  background:
    linear-gradient(90deg, transparent 42%, rgba(23, 35, 61, 0.9) 42% 54%, transparent 54%),
    linear-gradient(180deg, transparent 34%, rgba(23, 35, 61, 0.9) 34% 46%, transparent 46%),
    #68cc59;
}

.boom-block::before,
.boom-block::after {
  content: "";
  position: absolute;
  top: 21px;
  width: 14px;
  height: 14px;
  background: var(--ink);
}

.boom-block::before {
  left: 20px;
}

.boom-block::after {
  right: 20px;
}

.dino {
  width: 158px;
  height: 84px;
  right: 14%;
  bottom: 23%;
  border-radius: 48px 62px 30px 28px;
  background: #55c6a2;
}

.dino::before {
  content: "";
  position: absolute;
  right: -32px;
  top: -28px;
  width: 58px;
  height: 58px;
  border: 4px solid var(--ink);
  border-radius: 16px;
  background: #55c6a2;
}

.dino::after {
  content: "";
  position: absolute;
  left: 20px;
  top: -18px;
  width: 86px;
  height: 22px;
  background: repeating-linear-gradient(90deg, #ffd447 0 14px, transparent 14px 22px);
  clip-path: polygon(0 100%, 9% 0, 18% 100%, 28% 0, 37% 100%, 47% 0, 56% 100%, 66% 0, 75% 100%, 85% 0, 100% 100%);
}

.island {
  width: 300px;
  height: 126px;
  right: 9%;
  top: 24%;
  border-radius: 12px 12px 70px 70px;
  background: #61bd6c;
}

.island::after {
  content: "";
  position: absolute;
  left: 48px;
  bottom: -54px;
  width: 200px;
  height: 70px;
  border: 4px solid var(--ink);
  border-top: 0;
  background: repeating-linear-gradient(90deg, #8b6a4a 0 30px, #9f7c54 30px 60px);
  clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%);
}

.tnt {
  width: 110px;
  height: 78px;
  left: 42%;
  bottom: 22%;
  background: var(--red);
}

.tnt::before {
  content: "TNT";
  position: absolute;
  inset: 22px 0;
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  background: var(--white);
  display: grid;
  place-items: center;
  font-family: "Bangers", Impact, sans-serif;
  font-size: 32px;
}

.door {
  width: 124px;
  height: 172px;
  right: 16%;
  bottom: 18%;
  border-radius: 8px 8px 0 0;
  background: #6a4fe0;
}

.door::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 34px;
  width: 54px;
  height: 54px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
}

.map {
  width: 158px;
  height: 108px;
  right: 20%;
  top: 23%;
  transform: rotate(-7deg);
  background:
    radial-gradient(circle at 22% 42%, var(--red) 0 6px, transparent 7px),
    linear-gradient(135deg, #ffe89a 0 50%, #ffe082 50%);
}

.map::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 4px dashed var(--ink);
  border-radius: 18px;
}

.engine {
  width: 160px;
  height: 116px;
  right: 14%;
  bottom: 20%;
  border-radius: 20px;
  background: #c6f1ff;
}

.engine::before {
  content: "";
  position: absolute;
  inset: 20px 40px;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: conic-gradient(var(--yellow), var(--blue), var(--pink), var(--green), var(--yellow));
}

.runway {
  width: 70%;
  height: 110px;
  left: 15%;
  bottom: 12%;
  transform: perspective(380px) rotateX(48deg);
  background:
    repeating-linear-gradient(90deg, transparent 0 55px, rgba(255, 255, 255, 0.8) 55px 82px, transparent 82px 138px),
    #303747;
}

@media (max-width: 760px) {
  .reader-shell {
    gap: 12px;
    padding: 12px;
  }

  .topbar {
    align-items: flex-start;
  }

  .brand {
    gap: 9px;
  }

  .logo-mark {
    width: 60px;
    height: 44px;
  }

  .episode-tag {
    padding: 7px 9px;
    font-size: 12px;
  }

  .comic-stage {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .comic-page {
    grid-column: 1 / -1;
    min-height: 66vh;
    order: 1;
    box-shadow: var(--shadow), 5px 6px 0 var(--ink);
  }

  .story-layer {
    min-height: 66vh;
    padding: 18px;
  }

  .nav-button {
    width: 100%;
    height: 48px;
    order: 2;
  }

  .previous {
    grid-column: 1;
  }

  .next {
    grid-column: 2;
  }

  .controls {
    grid-template-columns: auto 1fr;
  }

  .page-count {
    display: none;
  }

  .dot {
    width: 10px;
    height: 10px;
  }

  .kid {
    left: 4%;
    transform: scale(0.82);
    transform-origin: bottom left;
  }

  .maya-kid {
    left: 24%;
    transform: scale(0.82);
    transform-origin: bottom left;
  }

  .plane {
    width: 58%;
    right: 3%;
  }

  .island {
    width: 210px;
    right: 2%;
  }

  .dino {
    transform: scale(0.82);
    transform-origin: bottom right;
    right: 2%;
  }

  .boom-block {
    transform: scale(0.78);
    transform-origin: bottom right;
    right: 4%;
  }
}