:root {
  color-scheme: light;
  font-family: Georgia, 'Times New Roman', serif;
  color: #053e58;
  background: #063d59;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #ffe3a1; outline-offset: 4px; }
.skip-link { position: fixed; z-index: 10; top: -60px; left: 18px; padding: 10px 14px; background: #fff9eb; border-radius: 9px; font: 700 16px/1.2 system-ui, sans-serif; }
.skip-link:focus { top: 14px; }

.shelf-page { min-height: 100vh; min-height: 100dvh; background: linear-gradient(#087495, #043950); }
.mobile-shelf-header { display: none; }
.shelf-region { overflow-x: clip; }
.shelf-scene {
  position: relative; width: min(100%, 1792px); min-height: 100vh; min-height: 100dvh; aspect-ratio: 1792 / 1024; margin: auto;
  overflow: hidden; background: #32a9c5 url('/public/images/mermaid-bookshelf-background.jpg') center / cover no-repeat;
}
.shelf-sign {
  position: absolute; z-index: 1; left: 50%; top: 2.6%; width: 35%; min-height: 20%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.1% 2% 1.5%;
  border: max(3px, .22vw) solid #c79c53; border-radius: 48% 48% 43% 43% / 58% 58% 36% 36%;
  color: #053a58; background: radial-gradient(ellipse at 50% 30%, #fffef5, #f4e4c7 88%);
  box-shadow: 0 8px 0 #ecf5e8 inset, 0 8px 28px #06425a7a, 0 0 0 5px #fff6d9af inset;
  text-align: center;
}
.shelf-sign::before { content: '✶'; position: absolute; top: -10%; font-size: clamp(23px, 2.9vw, 49px); color: #dd8e3c; text-shadow: 0 2px #fff5d5; }
.shelf-heading { margin: 4% 0 0; font-size: clamp(45px, 5.2vw, 91px); font-weight: 700; line-height: .92; letter-spacing: -.05em; }
.shelf-heading:focus, .reader-title:focus, .reader-text:focus { outline: none; }
.shelf-subtitle { margin: 2% 0 0; font-size: clamp(16px, 1.85vw, 32px); font-weight: 700; line-height: 1.08; }
.shelf-books { position: absolute; z-index: 2; left: 12%; right: 12%; top: 28%; height: 43%; display: flex; align-items: end; justify-content: center; gap: 1.2%; }
.shelf-book {
  position: relative; display: block; flex: none; height: 78%; width: 16%; overflow: hidden; border: max(2px, .18vw) solid #f4d78d;
  border-radius: 7px 12px 10px 6px; text-decoration: none; background: #0c5978;
  box-shadow: -7px 0 0 #063a57, 2px 2px 0 #194e67, 9px 14px 14px #043b56a8, inset 0 0 0 3px #fff3ce;
  transform-origin: center bottom; transition: transform 180ms ease, box-shadow 180ms ease;
}
.shelf-book:first-child { width: 24%; height: 100%; margin-right: .8%; }
.shelf-book-active:hover, .shelf-book-active:focus-visible { z-index: 3; transform: translateY(-8px) rotate(-1deg); box-shadow: -7px 0 0 #063a57, 10px 20px 20px #043b56cc, 0 0 0 5px #ffe9a5; }
.shelf-book-active:focus-visible { outline: 0; }
.shelf-book-soon { cursor: default; }
.shelf-book-soon::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(72, 78, 83, .5); pointer-events: none; }
.shelf-cover-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.shelf-book-soon .shelf-cover-image { filter: grayscale(.55); }
.cover-first-title {
  position: absolute; inset: 3% 5% auto; display: block; padding: 7% 4%;
  border-radius: 40% 40% 22% 22% / 45% 45% 25% 25%; border: 2px solid #ffdf9b;
  color: #fff8e6; background: #034665d9; box-shadow: 0 3px 12px #0039508a;
  text-align: center; font-size: clamp(16px, 1.4vw, 25px); font-weight: 700; line-height: 1.1;
}
.cover-number {
  position: absolute; z-index: 2; left: 50%; top: 4%; transform: translateX(-50%);
  display: grid; place-items: center; width: 32%; aspect-ratio: 1.3; border: 2px solid #d5a864; border-radius: 50%;
  color: #073c54; background: #fff6df; box-shadow: 0 2px 10px #03344a9c;
  font-size: clamp(22px, 2.2vw, 40px); font-weight: 700; line-height: 1;
}
.cover-other-title {
  position: absolute; z-index: 2; top: 19%; left: 5%; right: 5%; padding: 6px 5px;
  border: 1px solid #ffdf9b; border-radius: 9px; color: #fff8e6;
  background: #034665e8; box-shadow: 0 3px 12px #0039508a;
  text-align: center; font-size: clamp(13px, 1.2vw, 18px); font-weight: 700; line-height: 1.12;
}
.cover-ribbon {
  position: absolute; z-index: 2; left: 9%; right: 9%; bottom: 3%; display: grid; place-items: center;
  min-height: 9%; padding: 3px 7px; border: 2px solid #cb9753; border-radius: 50% / 40%;
  color: #043b54; background: #fff7e1; box-shadow: 0 2px 8px #063950a6;
  text-align: center; white-space: nowrap; font-size: clamp(10px, 1vw, 17px); font-weight: 700;
}
.shelf-prompt {
  position: absolute; left: 0; right: 0; bottom: 8%; margin: 0; color: #073e58;
  text-align: center; font-size: clamp(24px, 2.3vw, 40px); font-weight: 700; line-height: 1.1; text-shadow: 0 2px 3px #e6ffffa8;
}
@media (max-width: 999px) {
  .mobile-shelf-header { display: block; padding: 22px 18px 18px; color: #06445c; background: #fff7e4; text-align: center; border-bottom: 4px solid #d5a86c; }
  .mobile-shelf-title { margin: 0; font-size: clamp(38px, 6vw, 54px); font-weight: 700; line-height: .95; letter-spacing: -.05em; }
  .mobile-shelf-subtitle { margin: 6px 0 0; font-size: clamp(17px, 2.5vw, 22px); font-weight: 700; }
  .shelf-scene {
    display: flex; flex-direction: column; width: 100%; min-height: calc(100dvh - 112px); aspect-ratio: auto;
    padding: 26px clamp(18px, 4vw, 40px) 48px;
    background-image: linear-gradient(#053c5b82, #052c45b3), url('/public/images/mermaid-bookshelf-background.jpg');
    background-position: center top;
  }
  .shelf-sign { display: none; }
  .shelf-prompt { position: static; order: -1; margin: 0 0 26px; color: #fff9e8; font-size: clamp(24px, 3.5vw, 32px); text-shadow: 0 2px 8px #022b41; }
  .shelf-books {
    position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end; justify-content: center; gap: clamp(12px, 2vw, 20px);
    width: min(100%, 760px); height: auto; margin: 0 auto;
  }
  .shelf-book, .shelf-book:first-child { width: 100%; height: auto; aspect-ratio: 2 / 3; margin: 0; }
  .shelf-book:first-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 250px); }
  .cover-first-title { font-size: clamp(16px, 2.2vw, 21px); }
  .cover-number { font-size: clamp(21px, 3vw, 32px); }
  .cover-ribbon { font-size: clamp(10px, 1.5vw, 14px); }
}
@media (max-width: 600px) {
  .mobile-shelf-header { padding: 16px 16px 14px; }
  .mobile-shelf-title { font-size: clamp(36px, 10vw, 44px); }
  .mobile-shelf-subtitle { margin-top: 4px; font-size: 17px; }
  .shelf-scene { min-height: calc(100dvh - 83px); padding: 20px 18px 38px; }
  .shelf-prompt { margin-bottom: 20px; font-size: 23px; }
  .shelf-books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; max-width: 440px; }
  .shelf-book:first-child { grid-column: 1 / -1; width: min(64vw, 230px); }
  .cover-first-title { font-size: clamp(15px, 4vw, 19px); }
  .cover-number { font-size: clamp(20px, 6vw, 28px); }
  .cover-ribbon { font-size: clamp(10px, 2.8vw, 13px); }
}

.reader-page {
  min-height: 100vh; min-height: 100dvh; padding: 24px clamp(18px, 4vw, 60px) 48px;
  background: linear-gradient(#053c5dbc, #04435acf), url('/public/images/mermaid-bookshelf-background.jpg') center / cover fixed;
}
.reader-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1360px; margin: 0 auto 24px; }
.back-link, .coming-back, .about-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 18px;
  border: 1px solid #f4daa1; border-radius: 999px; color: #06445e; background: #fff6dc;
  text-decoration: none; font: 700 15px/1.2 system-ui, sans-serif; box-shadow: 0 5px 14px #06354a66;
}
.back-link:hover, .coming-back:hover, .about-link:hover { background: white; }
.reader-brand { color: #fff9e8; text-align: right; font-size: clamp(16px, 1.8vw, 24px); font-weight: 700; text-shadow: 0 2px 4px #02354d; }
.reader-spread {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1360px; min-height: min(740px, calc(100dvh - 136px)); margin: auto;
  border: 9px solid #c7a66d; border-radius: 18px 28px 28px 18px; overflow: hidden;
  background: #fef9e9; box-shadow: 0 26px 55px #02243bc9, inset 0 0 0 2px #f8e9b9;
}
.reader-art { position: relative; min-height: 580px; overflow: hidden; border-right: 9px solid #b8a273; background: #0a668b; }
.reader-ambient { display: block; width: 110%; height: 110%; position: absolute; inset: -5%; object-fit: cover; filter: blur(20px) brightness(.7); }
.reader-image { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; object-position: center; }
.reader-art-cover .reader-image { object-fit: cover; }
.reader-paper {
  display: flex; flex-direction: column; min-width: 0; padding: clamp(30px, 5vw, 82px) clamp(28px, 5vw, 76px);
  background: radial-gradient(circle at 50% 38%, #fffefa 0, #fff8e9 75%, #f1e6c7 100%);
  box-shadow: inset 17px 0 26px #897b5b21;
}
.reader-paper::before { content: '✦'; align-self: center; margin-bottom: clamp(20px, 3vw, 40px); color: #dba15c; font-size: 34px; line-height: 1; }
.reader-eyebrow { margin: 0 0 18px; color: #387f87; font: 700 13px/1.3 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.reader-title { margin: 0 0 26px; color: #073f5b; font: 700 clamp(35px, 3.6vw, 57px)/1.08 Georgia, 'Times New Roman', serif; letter-spacing: -.035em; }
.reader-text { max-width: 35ch; margin: 0; color: #234858; font: 400 clamp(22px, 2.15vw, 30px)/1.47 Georgia, 'Times New Roman', serif; }
.page-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 38px; }
.page-button { min-width: 116px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 13px; border-radius: 999px; background: #07667b; color: white; text-decoration: none; font: 700 15px/1.2 system-ui, sans-serif; }
.page-button:not(.page-button-spacer):hover { background: #09475e; }
.page-button-spacer { visibility: hidden; }
.page-count { color: #276a74; white-space: nowrap; font: 700 15px/1.2 system-ui, sans-serif; }
.coming-back { align-self: start; margin-top: auto; }
.not-found { min-height: 100vh; display: grid; place-content: center; gap: 20px; padding: 28px; background: #e6f8f4; text-align: center; }
.not-found h1, .not-found p { margin: 0; }
@media (max-width: 850px) {
  .reader-spread { grid-template-columns: 1fr; min-height: 0; }
  .reader-art { min-height: 0; height: min(54vw, 430px); border-right: 0; border-bottom: 7px solid #b8a273; }
  .reader-image { object-fit: contain; }
  .reader-paper { min-height: 460px; }
}
@media (max-width: 520px) {
  .reader-page { padding: 12px 10px 28px; }
  .reader-top { margin-bottom: 12px; }
  .reader-brand { max-width: 140px; font-size: 14px; }
  .reader-spread { border-width: 5px; border-radius: 12px; }
  .reader-art { height: 54vw; min-height: 220px; }
  .reader-paper { min-height: 480px; padding: 28px 24px; }
  .reader-paper::before { margin-bottom: 16px; }
  .reader-title { font-size: 36px; }
  .reader-text { font-size: 22px; }
  .page-button { min-width: 82px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shelf-book { transition: none; }
}

/* Active stories keep their text on one full-page illustration at every size. */
.reader-page-story { padding: 0; background: #061b2b; }
.reader-scene {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  width: 100%; max-width: none; min-height: 100vh; min-height: 100dvh;
  border: 0; border-radius: 0; background: #061b2b; box-shadow: none;
}
.reader-scene::after {
  content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #031c34b8 0%, #031c3400 24%, #031c3433 40%, #031625c9 67%, #031421f5 100%);
}
.reader-scene .reader-art { position: absolute; inset: 0; min-height: 0; height: auto; border: 0; background: #0a668b; }
.reader-scene .reader-picture { position: absolute; inset: 0; display: block; }
.reader-scene .reader-image { object-fit: cover; object-position: center 38%; }
.reader-plate, .reader-character {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.reader-plate { object-fit: cover; object-position: center 38%; animation: world-drift 8s ease-in-out infinite alternate; }
.reader-character img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
}
.reader-character-part {
  -webkit-mask: var(--part-mask) center 38% / cover no-repeat;
  mask: var(--part-mask) center 38% / cover no-repeat;
  transform-origin: var(--part-origin);
}
.reader-character-fin { animation: fin-kick 2.5s ease-in-out infinite alternate; }
.reader-character-tail { animation: tail-sway 3s ease-in-out infinite alternate; }
.reader-character-hair { animation: hair-sway 3.8s ease-in-out infinite alternate; }
.reader-art-layered .reader-image { opacity: 0; }
.reader-art-layered .reader-plate, .reader-art-layered .reader-character { opacity: 1; }
.reader-character { animation: family-glide 3.6s ease-in-out infinite alternate; }
.reader-art-slide .reader-character {
  animation: none; transform-origin: 0 0;
}
.reader-art-slide .reader-character img { object-fit: fill; object-position: center; }
.reader-replay {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 10px 18px; border: 1px solid #fff5e8ad; border-radius: 999px;
  color: #fff8e9; background: #062c44d9; cursor: pointer;
  font: 700 15px/1.2 system-ui, sans-serif; box-shadow: 0 5px 14px #06354a66;
}
.reader-replay:hover { background: #0a5269; }
.reader-replay:focus-visible { outline: 3px solid #ffdf9b; outline-offset: 3px; }
.reader-replay[hidden] { display: none; }
.reader-motion { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.reader-sunbeam {
  position: absolute; top: -7%; height: 58%; width: 16%; transform-origin: 50% 0;
  background: linear-gradient(180deg, #e4ffff55, #d9ffff1d 55%, #d9ffff00);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  opacity: .35; animation: sunbeam-sway 15s ease-in-out infinite alternate;
}
.reader-sunbeam:nth-child(1) { left: 8%; animation-delay: -3s; }
.reader-sunbeam:nth-child(2) { left: 54%; width: 12%; animation-delay: -9s; animation-duration: 18s; }
.reader-sunbeam:nth-child(3) { left: 79%; width: 14%; animation-delay: -6s; animation-duration: 17s; }
.reader-road-light {
  position: absolute; inset: 0;
  -webkit-mask: var(--road-mask) center 38% / cover no-repeat;
  mask: var(--road-mask) center 38% / cover no-repeat;
}
.reader-road-light::before, .reader-road-light::after {
  content: ''; position: absolute; inset: 0; width: 58%;
  background: linear-gradient(90deg, #ffffff00, #c8ffff00 23%, #f6ffff9c 50%, #c8ffff00 77%, #ffffff00);
  mix-blend-mode: screen;
  animation: road-flow 6s linear infinite;
}
.reader-road-light::after { animation-delay: -3s; opacity: .55; }
.motion-paused .reader-motion *, .motion-paused .reader-motion *::before,
.motion-paused .reader-motion *::after,
.motion-paused .reader-character, .motion-paused .reader-character img { animation-play-state: paused; }
.motion-paused .reader-plate { animation-play-state: paused; }
.motion-paused .scene-camera, .motion-paused .scene-effect,
.motion-paused .scene-camera .reader-road-light::before,
.motion-paused .scene-camera .reader-road-light::after { animation-play-state: paused; }
.reader-bubble {
  position: absolute; bottom: -5%; width: 16px; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid #e9ffffb8;
  background: radial-gradient(circle at 32% 28%, #fff 0 8%, #d8ffff75 12%, #9eeaff20 44%, #ffffff0a 70%);
  box-shadow: inset -2px -2px 4px #38bdd055, 0 0 6px #d9ffff77;
  opacity: 0; animation: bubble-rise 10s linear infinite;
}
.reader-bubble-1 { left: 5%; width: 13px; animation-delay: -1s; }
.reader-bubble-2 { left: 12%; width: 21px; animation-delay: -6s; animation-duration: 12s; }
.reader-bubble-3 { left: 26%; width: 10px; animation-delay: -3s; animation-duration: 9s; }
.reader-bubble-4 { left: 38%; width: 17px; animation-delay: -8s; animation-duration: 13s; }
.reader-bubble-5 { left: 63%; width: 12px; animation-delay: -4s; animation-duration: 11s; }
.reader-bubble-6 { left: 75%; width: 20px; animation-delay: -9s; animation-duration: 12s; }
.reader-bubble-7 { left: 88%; width: 11px; animation-delay: -2s; animation-duration: 9s; }
.reader-bubble-8 { left: 95%; width: 15px; animation-delay: -7s; animation-duration: 13s; }
.reader-glint {
  position: absolute; width: 26px; aspect-ratio: 1; opacity: 0;
  background: radial-gradient(circle, #fff 0 8%, #fff9 12%, #fff0 40%),
    linear-gradient(90deg, #fff0 43%, #fff9 50%, #fff0 57%),
    linear-gradient(0deg, #fff0 43%, #fff9 50%, #fff0 57%);
  filter: drop-shadow(0 0 5px #f4faff);
  animation: road-glint 7s ease-in-out infinite;
}
.reader-glint-1 { left: 19%; top: 40%; animation-delay: -1s; }
.reader-glint-2 { left: 48%; top: 56%; animation-delay: -4s; }
.reader-glint-3 { left: 78%; top: 63%; animation-delay: -6s; }
@keyframes bubble-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: .7; }
  78% { opacity: .65; }
  100% { transform: translate3d(18px, -82vh, 0); opacity: 0; }
}
@keyframes road-glint {
  0%, 72%, 100% { transform: scale(.55); opacity: 0; }
  78%, 84% { transform: scale(1); opacity: .8; }
}
@keyframes sunbeam-sway {
  from { transform: rotate(-5deg) translate3d(-7px, 0, 0); opacity: .18; }
  to { transform: rotate(5deg) translate3d(7px, 0, 0); opacity: .52; }
}
@keyframes road-flow {
  from { transform: translate3d(-110%, 0, 0); }
  to { transform: translate3d(285%, 0, 0); }
}
@keyframes family-glide {
  from { transform: translate3d(-12px, 6px, 0); }
  to { transform: translate3d(12px, -10px, 0); }
}
@keyframes tail-sway {
  from { transform: translate3d(-3px, 2px, 0) rotate(-2.5deg); }
  to { transform: translate3d(5px, -5px, 0) rotate(3deg); }
}
@keyframes hair-sway {
  from { transform: translate3d(-4px, 2px, 0) rotate(-1deg); }
  to { transform: translate3d(5px, -4px, 0) rotate(1deg); }
}
@keyframes fin-kick {
  from { transform: translate3d(-5px, 4px, 0) rotate(-3.5deg); }
  to { transform: translate3d(7px, -6px, 0) rotate(4deg); }
}
@keyframes world-drift {
  from { transform: translate3d(8px, 0, 0) scale(1.03); }
  to { transform: translate3d(-8px, 0, 0) scale(1.03); }
}
.scene-camera { position: absolute; inset: 0; transform-origin: 50% 42%; }
.scene-camera-swim { animation: scene-swim 4.6s ease-in-out infinite alternate; }
.scene-camera-road { animation: scene-road 7s ease-in-out infinite alternate; }
.scene-camera-approach { animation: scene-approach 8s ease-in-out infinite alternate; transform-origin: 52% 36%; }
.scene-camera-door { animation: scene-door 6s ease-in-out infinite alternate; transform-origin: 69% 44%; }
.scene-camera-door-opening { animation: none; transform: none; }
.scene-camera-wonder { animation: scene-wonder 9s ease-in-out infinite alternate; }
.scene-camera-discover { animation: scene-discover 5.5s ease-out both; }
.scene-camera-submarine { animation: scene-submarine 7s ease-in-out infinite alternate; }
.scene-camera-intercept { animation: scene-intercept 4s ease-out both; }
.scene-coordinates { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.scene-door-reveal {
  position: absolute; overflow: hidden; pointer-events: none;
}
.scene-door-reveal {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 24px), transparent);
  will-change: clip-path;
}
.scene-door-image { position: absolute; display: block; max-width: none; }
.scene-effect { position: absolute; display: block; pointer-events: none; mix-blend-mode: screen; }
.scene-effect-streak {
  border-radius: 50%; background: linear-gradient(90deg, #fff0, #b9faff18 14%, #e9ffffcc 55%, #fff0);
  box-shadow: 0 0 8px #b6f8ffc7; animation: scene-streak 2.2s ease-in-out infinite;
}
.scene-effect-orb {
  border-radius: 50%; background: radial-gradient(circle, #ffff 0 6%, var(--effect-color) 28%, #fff0 72%);
  box-shadow: 0 0 24px var(--effect-color);
  animation: scene-orb 3s ease-in-out infinite alternate;
}
.scene-effect-wash {
  border-radius: 50%; background: radial-gradient(ellipse, var(--effect-color), #fff0 68%);
  animation: scene-wash 5s ease-in-out infinite alternate;
}
.scene-camera-door .scene-effect-wash { animation-name: scene-door-wash; }
.scene-effect-door-beam {
  background: linear-gradient(90deg, #fff0, #ffe3a488 45%, #fff1c4b8 51%, #ffce6855 70%, #fff0);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0; animation: scene-door-beam 4.5s ease-in-out infinite alternate;
}
.scene-effect-door-gap {
  background: linear-gradient(90deg, #fff0, #fff2ab99 35%, #fffef3e6 50%, #ffc65d55 68%, #fff0);
  animation: scene-door-gap 4.5s ease-in-out infinite alternate;
}
.scene-effect-scan {
  border-radius: 50%; background: linear-gradient(90deg, #fff0, #f7fbff48 50%, #fff0);
  filter: blur(12px); animation: scene-scan 4.2s ease-in-out both;
}
.scene-effect-bubble {
  border: 2px solid #d6faff9c; border-radius: 50%; box-shadow: inset 0 0 9px #fff9, 0 0 9px #b5f4ff80;
  animation: scene-bubble 4.8s ease-in infinite;
}
.scene-effect-stop {
  border: 5px solid #bcf6ffad; border-radius: 50%; box-shadow: 0 0 28px #98ecffcc, inset 0 0 22px #d7ffff77;
  animation: scene-stop 2.5s ease-out both;
}
@keyframes scene-swim {
  from { transform: translate3d(-24px, 13px, 0) scale(1.035); }
  to { transform: translate3d(24px, -13px, 0) scale(1.075); }
}
@keyframes scene-road {
  from { transform: translate3d(9px, 2px, 0) scale(1.015); }
  to { transform: translate3d(-11px, -5px, 0) scale(1.05); }
}
@keyframes scene-approach {
  from { transform: scale(1.015); }
  to { transform: scale(1.075); }
}
@keyframes scene-door {
  from { transform: translate3d(4px, 0, 0) scale(1.025); }
  to { transform: translate3d(-25px, -5px, 0) scale(1.08); }
}
@keyframes scene-wonder {
  from { transform: translate3d(7px, 2px, 0) scale(1.01); }
  to { transform: translate3d(-7px, -4px, 0) scale(1.045); }
}
@keyframes scene-discover {
  from { transform: translate3d(-8px, 0, 0) scale(1.02); }
  to { transform: translate3d(0, 0, 0) scale(1.065); }
}
@keyframes scene-submarine {
  from { transform: translate3d(-12px, 2px, 0) scale(1.035); }
  to { transform: translate3d(10px, -5px, 0) scale(1.055); }
}
@keyframes scene-intercept {
  from { transform: translate3d(16px, 0, 0) scale(1.06); }
  to { transform: translate3d(0, 0, 0) scale(1.025); }
}
@keyframes scene-streak {
  0%, 100% { transform: translate3d(-85px, 16px, 0) rotate(var(--effect-angle, -12deg)); opacity: 0; }
  30%, 65% { opacity: .86; }
  80% { transform: translate3d(145px, -18px, 0) rotate(var(--effect-angle, -12deg)); opacity: 0; }
}
@keyframes scene-orb {
  from { transform: scale(.74); opacity: .3; }
  to { transform: scale(1.42); opacity: .95; }
}
@keyframes scene-wash {
  from { transform: translate3d(-28px, 10px, 0) scale(.9); opacity: .18; }
  to { transform: translate3d(36px, -12px, 0) scale(1.18); opacity: .6; }
}
@keyframes scene-door-wash {
  from { transform: translate3d(-15px, 8px, 0) scale(.9); opacity: .07; }
  to { transform: translate3d(20px, -8px, 0) scale(1.1); opacity: .34; }
}
@keyframes scene-door-beam {
  from { transform: scaleX(.48); opacity: .17; }
  to { transform: scaleX(1.27); opacity: .6; }
}
@keyframes scene-door-gap {
  from { transform: scaleX(.72); opacity: .45; }
  to { transform: scaleX(1.23); opacity: .95; }
}
@keyframes scene-scan {
  0% { transform: translateX(-55px); opacity: 0; }
  30% { opacity: .48; }
  75% { opacity: .38; }
  100% { transform: translateX(240px); opacity: 0; }
}
@keyframes scene-bubble {
  0% { transform: translate3d(0, 30px, 0) scale(.7); opacity: 0; }
  25% { opacity: .62; }
  100% { transform: translate3d(24px, -110px, 0) scale(1.15); opacity: 0; }
}
@keyframes scene-stop {
  0%, 12% { transform: scale(.2); opacity: 0; }
  32% { opacity: .8; }
  100% { transform: scale(1.7); opacity: 0; }
}
.reader-scene .reader-top {
  position: relative; z-index: 2; width: 100%; max-width: none; margin: 0;
  padding: max(24px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) 16px max(32px, env(safe-area-inset-left));
}
.reader-scene .reader-paper {
  position: relative; z-index: 2; width: min(100%, 820px); min-height: 0; margin-top: auto;
  padding: 60px max(32px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left));
  background: none; box-shadow: none;
}
.reader-scene .reader-paper::before { content: none; }
.reader-scene .reader-title { color: #fff8e9; margin-bottom: 16px; font-size: clamp(34px, 3.5vw, 54px); text-shadow: 0 3px 12px #001827; }
.reader-scene .reader-text { max-width: 42ch; color: #fff8e9; font-size: clamp(20px, 1.8vw, 28px); text-shadow: 0 2px 9px #001827; }
.narration-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; }
.narration-button { min-height: 44px; min-width: 88px; padding: 9px 16px; border: 1px solid #fff5e8ad; border-radius: 999px; background: #062c44e6; color: #fff8e9; cursor: pointer; font: 700 14px/1.2 system-ui, sans-serif; }
.narration-button:hover { background: #0a5269; }
.narration-restart { min-width: auto; }
.narration-status { color: #fff3d9; font: 500 12px/1.4 system-ui, sans-serif; text-shadow: 0 2px 5px #001827; }
.narration-controls audio { display: none; }
.reader-scene .spot-game {
  max-width: 42ch; margin-top: 20px; color: #fff8e9;
  font: 500 15px/1.45 system-ui, sans-serif;
  text-shadow: 0 2px 5px #001827;
}
.spot-game summary { width: fit-content; cursor: pointer; font-weight: 700; }
.spot-game summary:hover, .spot-game a:hover { text-decoration: underline; text-underline-offset: 3px; }
.spot-game p { max-width: 45ch; margin: 9px 0; }
.spot-game-hint, .spot-game-answer { margin-top: 10px; }
.spot-game-answer p { margin-bottom: 4px; }
.spot-game a { display: inline-block; margin: 6px 16px 0 0; color: #ffebbd; font-weight: 700; }
.reader-scene .page-controls { justify-content: space-between; gap: 18px; margin-top: 26px; padding-top: 0; }
.reader-scene .page-button { background: #062c44d9; border: 1px solid #fff5e8ad; }
.reader-scene .page-button:not(.page-button-spacer):hover { background: #0a5269; }

@media (max-width: 700px) {
  .scene-camera-swim { animation-name: scene-swim-phone; }
  .scene-camera-road { animation-name: scene-road-phone; }
  .scene-camera-approach { animation-name: scene-approach-phone; }
  .scene-camera-door { animation-name: scene-door-phone; }
  .scene-camera-wonder { animation-name: scene-wonder-phone; }
  .scene-camera-discover { animation-name: scene-discover-phone; }
  .scene-camera-submarine { animation-name: scene-submarine-phone; }
  .scene-camera-intercept { animation-name: scene-intercept-phone; }
  .reader-plate, .reader-character img { object-position: 43% center; }
  .reader-character img { -webkit-mask-position: 43% center; mask-position: 43% center; }
  .reader-sunbeam:nth-child(3) { display: none; }
  .reader-sunbeam { height: 48%; opacity: .24; }
  .reader-road-light { -webkit-mask-position: 43% center; mask-position: 43% center; }
  .reader-bubble-6, .reader-bubble-7, .reader-bubble-8, .reader-glint { display: none; }
  .reader-scene .reader-image { object-position: 43% center; }
  .reader-scene-mobile-contain .reader-art { background: #031525; }
  .reader-scene-mobile-contain .reader-image { object-fit: contain; object-position: center top; }
  .reader-scene .scene-camera-door .reader-image { object-position: 62% center; }
  .reader-scene::after { background: linear-gradient(180deg, #031c34b8 0%, #031c3400 19%, #031c3433 30%, #031625d9 58%, #031421fa 100%); }
  .reader-scene .reader-top { padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left)); }
  .reader-scene .reader-paper { width: 100%; padding: 34px max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); }
  .reader-scene .reader-title { font-size: clamp(29px, 7.5vw, 40px); }
  .reader-scene .reader-text { font-size: clamp(19px, 5.1vw, 23px); }
  .reader-scene .spot-game { margin-top: 14px; font-size: 14px; }
  .reader-scene .page-controls { justify-content: space-between; gap: 8px; }
  .reader-scene .page-button { min-width: 82px; }
}

@keyframes scene-swim-phone {
  from { transform: translate3d(-7px, 6px, 0) scale(1.08); }
  to { transform: translate3d(7px, -6px, 0) scale(1.12); }
}
@keyframes scene-road-phone {
  from { transform: translate3d(5px, 2px, 0) scale(1.07); }
  to { transform: translate3d(-5px, -3px, 0) scale(1.1); }
}
@keyframes scene-approach-phone {
  from { transform: scale(1.06); }
  to { transform: scale(1.11); }
}
@keyframes scene-door-phone {
  from { transform: translate3d(2px, 0, 0) scale(1.07); }
  to { transform: translate3d(-7px, -4px, 0) scale(1.11); }
}
@keyframes scene-wonder-phone {
  from { transform: translate3d(4px, 2px, 0) scale(1.06); }
  to { transform: translate3d(-4px, -3px, 0) scale(1.1); }
}
@keyframes scene-discover-phone {
  from { transform: scale(1.065); }
  to { transform: scale(1.095); }
}
@keyframes scene-submarine-phone {
  from { transform: translate3d(-5px, 2px, 0) scale(1.07); }
  to { transform: translate3d(5px, -3px, 0) scale(1.09); }
}
@keyframes scene-intercept-phone {
  from { transform: translate3d(6px, 0, 0) scale(1.08); }
  to { transform: translate3d(0, 0, 0) scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
  .reader-replay { display: none; }
  .reader-motion { display: none; }
  .reader-art-layered .reader-image { opacity: 1; }
  .reader-plate, .reader-character { display: none; }
  .scene-camera { animation: none; transform: none; }
  .scene-effect, .scene-camera .reader-road-light { display: none; }
  .scene-door-reveal { display: none; }
}

@media (max-height: 650px) {
  .reader-scene .reader-paper { padding-top: 24px; }
  .reader-scene .reader-title { margin-bottom: 10px; }
  .reader-scene .page-controls { margin-top: 18px; }
}
.about-link { position: absolute; z-index: 4; top: 3%; right: 3%; white-space: nowrap; }
@media (max-width: 999px) {
  .about-link { position: static; align-self: center; order: -2; margin-bottom: 20px; }
}

/* Book 3: gentle camera movement follows each carnival story beat. */
.scene-camera-carnival { animation: carnival-sweep 9s ease-in-out infinite alternate; transform-origin: 50% 34%; }
.scene-camera-dolphin { animation: dolphin-rise 6s ease-in-out infinite alternate; transform-origin: 50% 35%; }
.scene-camera-seaweed { animation: seaweed-descent 7s ease-in-out infinite alternate; transform-origin: 60% 45%; }
@keyframes carnival-sweep {
  from { transform: scale(1.025) translateX(-.7%); }
  to { transform: scale(1.025) translateX(.7%); }
}
@keyframes dolphin-rise {
  from { transform: scale(1.035) translateY(.6%); }
  to { transform: scale(1.035) translateY(-.6%); }
}
@keyframes seaweed-descent {
  from { transform: scale(1.025) translate(-.5%, -.4%); }
  to { transform: scale(1.045) translate(.3%, .4%); }
}
@media (max-width: 700px) {
  .reader-scene-carnival .scene-camera { transform-origin: 50% 15%; }
  .reader-scene-carnival .reader-image { object-position: center 60px; }
  .reader-scene-carnival .reader-art { background: linear-gradient(#064760, #031525 60%); }
  .reader-scene-carnival .reader-paper { margin-top: 0; padding-top: calc(66.667vw + 12px); }
  .reader-scene-carnival .reader-art::before { content: ""; position: absolute; inset: 0; background: var(--carnival-art) center bottom / cover; opacity: .3; filter: blur(14px); transform: scale(1.08); }
  .reader-scene-carnival .reader-image { -webkit-mask-image: linear-gradient(#000 0, #000 calc(66.667vw + 15px), transparent calc(66.667vw + 60px)); mask-image: linear-gradient(#000 0, #000 calc(66.667vw + 15px), transparent calc(66.667vw + 60px)); }
  .reader-scene-carnival::after { background: linear-gradient(180deg, #031c3433 0, #031c3400 30%, #031625b0 58%, #031421ef 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-camera-carnival, .scene-camera-dolphin, .scene-camera-seaweed { animation: none; transform: none; }
}