/* ——— the story player: a book page over the paused, dimmed map ——— */
.player-layer { z-index: 40; }
.player-scrim {
  position: absolute; inset: 0;
  background: rgba(29, 47, 107, .42);
  opacity: 0;
  transition: opacity .45s ease;
}
.player-layer.is-open .player-scrim { opacity: 1; }

.player {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: var(--page-w, 90vw);
  height: var(--page-h, 60vw);
  --bar: 84px;
  background-color: var(--cream);
  background-image: var(--grain);
  background-size: 192px 192px;
  transform: translateY(40px) scale(.96);
  opacity: 0;
  transition: transform .5s var(--spring), opacity .3s ease;
}
.player-layer.is-open .player { transform: none; opacity: 1; }
.player-layer.is-out .player { transition-duration: .35s; transition-timing-function: ease-in; }

/* header: floats over the picture — back to map · route strip · page dots */
.player-head {
  position: absolute; z-index: 7; top: 16px; left: 18px; right: 18px;
  display: flex; align-items: center; gap: 12px; height: 50px; pointer-events: none;
}
.player-head > * { pointer-events: auto; }
.player-back { width: 50px; height: 50px; flex: none; }
.player-back > svg { width: 72%; height: 72%; }
.player-strip { flex: 1; min-width: 0; height: 44px; }
.player-dots { display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; }
.player-dots .dot {
  width: 14px; height: 14px; padding: 0;
  border: 2.5px solid var(--ink); border-radius: 50%;
  background: var(--cream);
  cursor: pointer;
  transition: transform .3s var(--spring), background-color .3s;
}
.player-dots .dot.is-past { background: var(--yellow); }
.player-dots .dot.is-on { background: var(--red); transform: scale(1.35); }
.player-dots .dot.is-end { border-radius: 3px; rotate: 45deg; width: 13px; height: 13px; }

/* the illustration */
.player-stage { position: absolute; inset: 0; border-radius: inherit; }
.ill-frame {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: 20px 22px 18px 21px;
  background: var(--sky-pale);
  isolation: isolate;
  touch-action: pan-y;
}
.ill-stack { position: absolute; inset: 0; }
.ill-page {
  position: absolute; inset: 0;
  transition: transform .7s cubic-bezier(.25, .8, .3, 1), opacity .55s ease;
}
.ill-page.enter.from-next { transform: translateX(-9%) rotate(-1.2deg); opacity: 0; }
.ill-page.enter.from-prev { transform: translateX(9%) rotate(1.2deg); opacity: 0; }
.ill-page.leave { pointer-events: none; }
.ill-page.leave.to-next { transform: translateX(12%) rotate(1.6deg); opacity: 0; }
.ill-page.leave.to-prev { transform: translateX(-12%) rotate(-1.6deg); opacity: 0; }
.ill-kb {
  position: absolute; inset: 0;
  /* Keep the whole illustration visible, including its edges. */
  transform-origin: 50% 44%;   /* the middle of the scenes' safe zone (y 60–820 of 1000) */
}
.ill-kb > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ill-kb > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.ill-grain {
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 192px 192px;
  opacity: .55;
  pointer-events: none;
  z-index: 2;
}
.ill-missing { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; font-size: 22px; font-weight: 700; color: var(--ink-soft); background: var(--paper-deep); }
.ill-missing > svg { width: 120px; height: 120px; }

/* gentle life inside the scene SVGs (STYLE §7) */
.ill-kb svg .anim-bob, .ill-kb svg .anim-sway, .ill-kb svg .anim-drift, .ill-kb svg .anim-twinkle, .ill-kb svg .anim-flap {
  transform-box: fill-box;
  animation-delay: var(--d, 0s);
}
.ill-kb svg .anim-bob { animation: a-bob 3.4s ease-in-out infinite; transform-origin: 50% 100%; animation-delay: var(--d, 0s); }
.ill-kb svg .anim-sway { animation: a-sway 4.2s ease-in-out infinite; transform-origin: 50% 100%; animation-delay: var(--d, 0s); }
.ill-kb svg .anim-drift { animation: a-drift 16s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.ill-kb svg .anim-twinkle { animation: a-twinkle 2.6s ease-in-out infinite; transform-origin: 50% 50%; animation-delay: var(--d, 0s); }
.ill-kb svg .anim-flap { animation: a-flap .55s ease-in-out infinite alternate; transform-origin: 50% 50%; animation-delay: var(--d, 0s); }
@keyframes a-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1.6%) rotate(-.8deg); } }
@keyframes a-sway { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
@keyframes a-drift { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
@keyframes a-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes a-flap { from { transform: scaleY(1); } to { transform: scaleY(.62); } }
.reduce-motion .ill-kb, .reduce-motion .ill-kb svg * { animation: none !important; }

.tap-sparkle { position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px; z-index: 3; pointer-events: none; animation: tap-sparkle .85s ease-out forwards; }
.tap-sparkle svg { width: 100%; height: 100%; }
@keyframes tap-sparkle { 0% { transform: scale(.2) rotate(0deg); opacity: 1; } 60% { transform: scale(1.1) rotate(60deg); opacity: 1; } 100% { transform: scale(.6) rotate(90deg); opacity: 0; } }

/* the Wind's song */
.song-btn { position: absolute; top: 80px; left: 18px; z-index: 4; width: 62px; height: 62px; background-color: var(--lilac); }
.song-btn[hidden] { display: none; }
.song-btn.is-playing { animation: song-pulse 1s ease-in-out infinite; background-color: var(--pink); }
@keyframes song-pulse { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.1) rotate(4deg); } }
.notes-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.float-note { position: absolute; bottom: -60px; width: 52px; height: 52px; animation: note-up 2.6s ease-out forwards; }
.float-note svg { width: 100%; height: 100%; }
@keyframes note-up {
  0% { transform: translateY(0) rotate(0deg) scale(.7); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-75vh) rotate(var(--r, 20deg)) scale(1.1); opacity: 0; }
}

/* the paper text panel over the picture's bottom edge */
.text-card {
  position: absolute; z-index: 6;
  left: 50%; translate: -50% 0;
  bottom: 44px;
  display: none;
  width: min(920px, calc(100% - 24px));
  flex-direction: column; gap: 8px;
  padding: 10px 18px;
}
.player-layer.show-text .text-card { display: flex; }
.player-bar {
  position: absolute; z-index: 7; left: 0; right: 0; bottom: -38px; height: 76px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.player-bar > * { pointer-events: auto; }
.player-layer.at-end .player-bar, .player-layer.at-end .text-btn { visibility: hidden; }
.text-btn { position: absolute; z-index: 7; right: 18px; bottom: 18px; width: 58px; height: 58px; }
.text-btn[aria-pressed="true"] { background-color: var(--yellow); }
.text-controls {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  direction: ltr;               /* left = next (RTL book), centre = play, right = previous */
}
.nav-btn {
  display: grid; place-items: center;
  width: 60px; height: 60px; padding: 0;
  border: var(--line) solid var(--ink);
  border-radius: var(--wobble);
  background-color: var(--cream);
  background-image: var(--grain);
  box-shadow: var(--flat);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .09s, opacity .25s;
  outline: none;
}
.nav-btn > svg { width: 68%; height: 68%; pointer-events: none; }
.nav-btn.is-disabled > svg { opacity: .3; }
.nav-next.invite:not(.is-disabled) { animation: invite 1.4s ease-in-out 3; }
@keyframes invite { 0%, 100% { transform: none; } 50% { transform: translateX(-8px) scale(1.08); } }
.play-btn {
  width: 76px; height: 76px;
  display: grid; place-items: center;
  padding: 0;
  border: 4px solid var(--ink);
  border-radius: 50% 47% 52% 49% / 49% 52% 47% 51%;
  background: var(--red);
  box-shadow: 3px 5px 0 rgba(42, 33, 28, .28);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .09s, background-color .3s;
  outline: none;
}
.play-btn > svg { width: 60%; height: 60%; pointer-events: none; }
.play-btn:not(.is-playing) > svg { margin-left: 9%; }
.play-btn.is-playing { background: var(--sea); }

.text-box {
  height: var(--text-h, 100px);
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  scrollbar-width: none;
  padding: 2px 4px;
  -webkit-mask-image: linear-gradient(transparent 0, #000 9px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 9px, #000 calc(100% - 12px), transparent 100%);
}
.text-box::-webkit-scrollbar { display: none; }
.story-text {
  margin: 0;
  padding: 4px 0 10px;
  font-size: var(--text-size, 19px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.sent {
  border-radius: .3em;
  padding: .04em .14em;
  margin: 0 -.14em;
  cursor: pointer;
  transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.sent.is-past { color: var(--ink-soft); }
.sent.is-now { background-color: rgba(247, 201, 72, .72); box-shadow: 0 .08em 0 rgba(224, 160, 48, .55); }
.sent.refrain {
  display: flex; align-items: center; gap: .35em;
  width: fit-content; max-width: 100%;
  margin: .3em 0 .35em;
  padding: .12em .7em .16em .5em;
  font-weight: 800;
  background: repeating-linear-gradient(-50deg, #e3cdea 0 16px, #f4c6dc 16px 26px);
  border: 2.5px solid var(--ink);
  border-radius: 999px 18px 999px 18px;
  box-shadow: var(--flat);
  color: var(--ink);
}
.sent.refrain.is-now { background: repeating-linear-gradient(-50deg, var(--yellow) 0 16px, var(--magic) 16px 26px); }
.refrain-ico { flex: none; width: 2.5em; height: 1.66em; }
.refrain-ico svg { width: 100%; height: 100%; }
.sent.refrain.say-it { animation: say-it .9s var(--spring); }
@keyframes say-it { 0% { transform: scale(.94); } 40% { transform: scale(1.07) rotate(-1deg); } 70% { transform: scale(.99) rotate(.6deg); } 100% { transform: none; } }

/* Dad asked Lily something: her sentence glows pink while the narration waits for her answer */
.sent.lily-turn, .sent.is-now.lily-turn { background-color: rgba(242, 163, 199, .7); box-shadow: 0 .08em 0 rgba(200, 90, 140, .45); }

/* "your turn, Lily!" — her answering face + a ring that empties while the narration waits */
.lily-cue {
  position: absolute; z-index: 3;
  bottom: calc(100% + 8px); right: 22px;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 18px 6px 8px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 999px 999px 999px 10px;
  box-shadow: var(--flat);
  font-family: var(--font-title);
  font-size: clamp(22px, 2.9vmin, 30px);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px) scale(.6);
  transform-origin: 85% 100%;
  transition: opacity .2s ease, transform .25s ease-in;
}
.lily-cue.is-on { opacity: 1; transform: none; transition: opacity .15s ease, transform .5s var(--spring); }
.lily-cue-face { position: relative; width: clamp(56px, 7.4vmin, 68px); height: clamp(56px, 7.4vmin, 68px); flex: none; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--ink); }
.lily-cue-face > svg.ico { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.lily-ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); rotate: -90deg; overflow: visible; }
.lily-ring circle { fill: none; stroke: var(--pink); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.lily-cue.is-on .lily-ring circle { animation: lily-ring var(--ms, 1800ms) linear forwards; }
.lily-cue.is-on .lily-cue-face { animation: lily-hop .9s ease-in-out infinite; }
@keyframes lily-ring { to { stroke-dashoffset: 100; } }
@keyframes lily-hop { 0%, 100% { transform: rotate(-4deg); } 50% { transform: translateY(-3px) rotate(5deg); } }
.reduce-motion .lily-cue.is-on .lily-cue-face { animation: none; }

.auto-btn { background-color: var(--cream); }
.auto-btn:not(.is-on) { background-color: var(--stone); }
.auto-btn > svg { width: 74%; height: 74%; }
.auto-btn { width: 44px; height: 44px; }
.mode-badge { display: none; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-soft); line-height: 1.1; }
.mode-badge.is-dad, .mode-badge.is-silent { display: flex; }
.mode-badge > svg { width: 28px; height: 28px; }

/* the end page */
.player-layer.at-end .player {
  /* The ending contains controls and text, so it must not inherit the
     illustration's wide aspect ratio on a portrait phone. */
  width: min(900px, calc(100% - 32px - var(--sal) - var(--sar)));
  height: min(720px, calc(100% - 32px - var(--sat) - var(--sab)));
}
.end-page {
  position: absolute; inset: 0; z-index: 8; border-radius: inherit;
  display: none;
  place-items: center;
  align-content: safe center;
  gap: 8px;
  padding: 70px 20px 30px;
  text-align: center;
  background-color: var(--paper);
  background-image: var(--grain);
  overflow-y: auto;
  touch-action: pan-y;
}
.player-layer.at-end .end-page { display: grid; animation: end-in .7s var(--spring) both; }
.player-layer.at-end .player-stage, .player-layer.at-end .text-card { visibility: hidden; }
.player-layer.at-end .player-head { position: relative; z-index: 9; }
@keyframes end-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.end-art { position: absolute; inset: 0; z-index: -1; opacity: .2; overflow: hidden; }
.end-art img { width: 100%; height: 100%; object-fit: cover; }
.end-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(72px, 13vmin, 140px);
  line-height: 1;
  color: var(--red);
  text-shadow: 3px 0 var(--ink), -3px 0 var(--ink), 0 3px var(--ink), 0 -3px var(--ink), 2px 2px var(--ink), -2px -2px var(--ink), 2px -2px var(--ink), -2px 2px var(--ink), 7px 9px 0 rgba(42, 33, 28, .22);
  animation: end-title 2.8s ease-in-out infinite;
}
@keyframes end-title { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) scale(1.03); } }
.end-dadlily { width: clamp(150px, 20vmin, 220px); }
.end-dadlily svg { width: 100%; height: auto; }
.end-tease { margin: 0; max-width: 640px; font-size: clamp(18px, 2.4vmin, 24px); font-weight: 600; color: var(--ink-soft); }
.end-actions { display: flex; gap: clamp(16px, 3vw, 40px); margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.end-btn {
  display: grid; justify-items: center; gap: 8px;
  width: clamp(130px, 15vmin, 170px);
  padding: 14px 8px 12px;
  font-family: var(--font-title);
  font-size: 18px; font-weight: 400;
  background-color: var(--cream);
  background-image: var(--grain);
  border: var(--line) solid var(--ink);
  border-radius: 24px 20px 26px 22px;
  box-shadow: var(--flat-big);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .09s;
  outline: none;
}
.end-btn[hidden] { display: none; }
.end-btn > svg { width: clamp(64px, 8vmin, 84px); height: clamp(64px, 8vmin, 84px); }
.end-island { background-color: var(--yellow); }

@media (max-height: 520px) {
  .end-page { padding: 68px 16px 16px; gap: 4px; }
  .end-title { font-size: 48px; }
  .end-dadlily { width: 90px; }
  .end-actions { gap: 12px; margin-top: 6px; }
  .end-btn { width: 112px; padding: 8px; gap: 4px; font-size: 16px; }
  .end-btn > svg { width: 44px; height: 44px; }
}

/* ——— the mini route strip ——— */
.route-strip {
  --t: 0;
  position: relative;
  height: 100%;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: var(--sea-light);
}
.rs-sea {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24'%3E%3Cpath d='M2 14q7-6 14 0t14 0' fill='none' stroke='%23e6f5f4' stroke-width='2.4' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M34 5q5-4 10 0' fill='none' stroke='%232a64ad' stroke-width='2' stroke-linecap='round' opacity='.35'/%3E%3C/svg%3E");
  background-size: 60px 24px;
  animation: rs-sea 7s linear infinite;
}
@keyframes rs-sea { from { background-position: 0 0; } to { background-position: -60px 0; } }
.rs-track { position: absolute; top: 0; bottom: 0; left: 56px; right: 70px; }
.rs-ahead { position: absolute; left: 0; right: 0; top: 64%; border-top: 2.5px dotted rgba(42, 33, 28, .35); }
.rs-wake {
  position: absolute; right: 0; top: 64%;
  left: calc((1 - var(--t)) * 100%);
  border-top: 3.5px dashed var(--cream);
  transition: left 1.8s cubic-bezier(.45, .05, .3, 1);
}
.rs-stop { position: absolute; bottom: -2px; left: calc(var(--at) * 100%); height: 78%; translate: -50% 0; }
.rs-stop > svg { height: 100%; width: auto; }
.rs-stop.is-first { translate: -18% 0; height: 92%; }
.rs-stop.is-last { translate: -86% 0; height: 92%; }
.rs-sargasso { height: 40%; bottom: 12%; }
.rs-pin { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); margin-top: 20px; }
.rs-ship {
  position: absolute; bottom: 8%;
  left: calc((1 - var(--t)) * 100%);
  height: 104%;
  aspect-ratio: 116 / 72;
  translate: -50% 4%;
  transition: left 1.8s cubic-bezier(.45, .05, .3, 1);
  z-index: 2;
}
.rs-ship > svg { width: 100%; height: 100%; animation: ld-bob 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.route-strip.no-anim .rs-ship, .route-strip.no-anim .rs-wake { transition: none; }

@media (max-width: 760px) {
  .player-dots { display: none; }
}