/* Miko, the journal's guide. The stage sits above the menu curtain and
   below the page-change fire, so he can open the menu and still burn
   away with the page. */

.nav-stage {
  --nav-h: clamp(178px, 26vh, 250px);
  --nav-ink: #171612;
  --nav-paper: #fbf6ec;
  --nav-red: #d75a2e;
  position: fixed;
  inset: 0;
  z-index: 5600;
  pointer-events: none;
  contain: layout style;
}

.nav-char {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--nav-h);
  aspect-ratio: 200 / 240;
  opacity: 0;
  pointer-events: none;
  cursor: grab;
  touch-action: none;
  will-change: transform;
  transition: opacity 260ms ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-stage.is-on .nav-char {
  opacity: 1;
  pointer-events: auto;
}

.nav-stage.is-busy .nav-char { cursor: default; }
.nav-char:active { cursor: grabbing; }
.nav-char:focus-visible { outline: 2px dashed var(--nav-red); outline-offset: 4px; border-radius: 40%; }

/* The painted Miko: shadow, then the sprite in its pose wrapper, then the
   emote layer. Only transforms change per frame, so it all stays on the
   compositor. */
.nav-shadow,
.nav-pose,
.nav-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nav-shadow {
  inset: auto;
  left: 31%;
  top: 90.2%;
  width: 38%;
  height: 5.4%;
  border-radius: 50%;
  background: rgba(64, 40, 28, 0.22);
}

.nav-pose {
  transform-origin: 50% 91.667%;
  will-change: transform;
}

.nav-sprite {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  filter: drop-shadow(0 6px 9px rgba(67, 38, 24, 0.24));
}

.nav-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---- The sleep dock: curled up small in a safe corner (nav-dock.js) ----
   The button is the lower part of the drawing's canvas; the canvas itself
   is contained, never stretched or cropped. --dock-grow scales him about
   his feet while he shrinks in and stretches back out. */

@property --dock-grow {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.nav-dock {
  --dock-w: 72px;
  --dock-h: 96px;
  --dock-hit: 0.7;
  --dock-t: 320ms;
  --dock-ease: cubic-bezier(0.3, 0.7, 0.4, 1);
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--dock-w) * var(--dock-grow));
  height: calc(var(--dock-h) * var(--dock-hit) * var(--dock-grow));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 46% 46% 32% 32%;
  background: none;
  color: inherit;
  font: inherit;
  overflow: visible;
  translate: -50% 0;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 220ms ease,
    visibility 0s,
    left var(--dock-t) var(--dock-ease),
    bottom var(--dock-t) var(--dock-ease),
    --dock-grow var(--dock-t) var(--dock-ease);
}

.nav-dock[hidden] { display: none; }
.nav-dock.is-snap { transition: none; }
.nav-dock:focus-visible { outline: 2px dashed var(--nav-red); outline-offset: 5px; }

/* Out of the way of something worth reading or pressing, until it moves */
.nav-dock.is-yielding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.nav-dock-shadow {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: -4%;
  height: 9%;
  border-radius: 50%;
  background: rgba(64, 40, 28, 0.2);
  pointer-events: none;
}

.nav-dock-art {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% / var(--dock-hit));
  transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 6px rgba(67, 38, 24, 0.22));
  pointer-events: none;
}

.nav-dock-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.nav-dock-art img.is-shown { opacity: 1; }

/* Asleep he is almost still: one slow breath, a pixel or two */
.nav-dock.is-sleeping .nav-dock-art { animation: navDockBreath 2.9s ease-in-out infinite; }
.nav-dock.is-yielding .nav-dock-art { animation-play-state: paused; }
.nav-dock-art.is-popping { animation: navDockPop 280ms cubic-bezier(0.2, 1.4, 0.4, 1); }

@keyframes navDockBreath { 50% { transform: translateY(-1.5px) scale(1.01); } }
@keyframes navDockPop { from { transform: scale(1.04, 0.95); } }

/* While he naps, nothing of his talks, points or frames the page */
.miko-asleep .nav-bubble,
.miko-asleep .nav-spot,
.miko-asleep .nav-hud,
.miko-asleep .nav-chapter,
.miko-asleep .nav-cine-bars {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* The swap between the dock and the full-size Miko is a single frame */
.miko-asleep .nav-char { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-dock { transition: opacity 220ms ease, visibility 0s; }
  .nav-dock.is-sleeping .nav-dock-art,
  .nav-dock-art.is-popping { animation: none; }
}

/* ---- The speech bubble: a scrap of the journal's own paper ---- */

.nav-bubble {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  max-width: min(330px, calc(100vw - 24px));
  padding: 1.05rem 1.1rem 0.95rem;
  border: 2px solid var(--nav-ink);
  border-radius: 18px;
  background:
    repeating-linear-gradient(180deg, rgba(23, 22, 18, 0.035) 0 1px, transparent 1px 22px),
    var(--nav-paper);
  box-shadow: 5px 6px 0 var(--nav-ink), 0 22px 44px rgba(23, 22, 18, 0.22);
  color: var(--nav-ink);
  font: 400 1rem/1.45 Georgia, "Times New Roman", serif;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  cursor: pointer;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}

.nav-bubble.is-on {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 160ms ease;
  animation: navPop 380ms cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes navPop {
  from { scale: 0.6; rotate: -3deg; }
  to { scale: 1; rotate: 0deg; }
}

.nav-bubble-name {
  position: absolute;
  top: -0.8rem;
  left: 0.9rem;
  padding: 0.22rem 0.6rem 0.2rem;
  border: 2px solid var(--nav-ink);
  border-radius: 999px;
  background: var(--nav-red);
  color: #fff;
  font: 700 0.62rem/1 "Courier New", Courier, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.nav-bubble-text {
  position: relative;
  margin: 0;
  min-height: 1.45em;
  white-space: pre-line;
  text-wrap: pretty;
}

.nav-bubble-ghost { visibility: hidden; }

.nav-bubble-typed {
  position: absolute;
  inset: 0;
}

.nav-bubble-more {
  position: absolute;
  right: 0.7rem;
  bottom: 0.4rem;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--nav-red);
  opacity: 0;
}

.nav-bubble.is-waiting .nav-bubble-more {
  opacity: 1;
  animation: navNudge 700ms ease-in-out infinite;
}

@keyframes navNudge { 50% { translate: 0 3px; } }

.nav-bubble-timer {
  position: absolute;
  left: 1rem;
  right: 1.8rem;
  bottom: 0.45rem;
  height: 2px;
  background: rgba(215, 90, 46, 0.35);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.nav-bubble.is-waiting .nav-bubble-timer.is-running {
  animation: navTimer linear forwards;
}

@keyframes navTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.nav-bubble-tail {
  position: absolute;
  bottom: -10px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-right: 2px solid var(--nav-ink);
  border-bottom: 2px solid var(--nav-ink);
  background: var(--nav-paper);
  transform: rotate(45deg);
}

.nav-bubble.is-below .nav-bubble-tail {
  bottom: auto;
  top: -10px;
  transform: rotate(-135deg);
}

/* ---- Choices: game-menu buttons with a cursor ---- */

.nav-bubble-choices {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.nav-bubble.has-choices .nav-bubble-choices { display: flex; }
.nav-bubble.has-choices { cursor: default; }

.nav-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.5rem 0.8rem 0.5rem 1.6rem;
  border: 2px solid var(--nav-ink);
  border-radius: 12px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--nav-ink);
  color: var(--nav-ink);
  font: 700 0.95rem/1.2 Georgia, "Times New Roman", serif;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  animation: navChoiceIn 320ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 60ms);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

@keyframes navChoiceIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.nav-choice::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 50%;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--nav-red);
  translate: 0 -50%;
  opacity: 0;
}

.nav-choice:hover,
.nav-choice:focus-visible {
  outline: none;
  background: #fdeadf;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--nav-ink);
}

.nav-choice:hover::before,
.nav-choice:focus-visible::before {
  opacity: 1;
  animation: navCursor 600ms ease-in-out infinite;
}

@keyframes navCursor { 50% { translate: 3px -50%; } }

.nav-choice.is-picked {
  background: var(--nav-red);
  color: #fff;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--nav-ink);
}

.nav-choice-key {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  font: 700 0.62rem/1 "Courier New", Courier, monospace;
  opacity: 0.7;
}

/* ---- The spotlight on whatever he is showing you ---- */

.nav-spot {
  position: absolute;
  left: 0;
  top: 0;
  border: 2.5px dashed var(--nav-red);
  border-radius: 14px;
  box-shadow: 0 0 0 6px rgba(215, 90, 46, 0.1), 0 0 38px rgba(215, 90, 46, 0.35);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}

.nav-spot.is-on {
  opacity: 1;
  animation: navSpot 1.4s ease-in-out infinite;
}

@keyframes navSpot {
  50% { box-shadow: 0 0 0 10px rgba(215, 90, 46, 0.16), 0 0 54px rgba(215, 90, 46, 0.5); }
}

.nav-ripple {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 3px solid var(--nav-red);
  border-radius: 50%;
  pointer-events: none;
  animation: navRipple 600ms ease-out forwards;
}

.nav-ripple.is-miss { border-color: #8a8378; border-style: dashed; }

@keyframes navRipple {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(4.2); opacity: 0; }
}

/* ---- Tour controls ---- */

.nav-hud {
  position: fixed;
  left: 50%;
  top: max(0.8rem, env(safe-area-inset-top));
  z-index: 5650;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0.4rem 0.35rem 0.9rem;
  border: 2px solid var(--nav-ink, #171612);
  border-radius: 999px;
  background: #fbf6ec;
  box-shadow: 3px 3px 0 #171612;
  color: #171612;
  font: 700 0.64rem/1 "Courier New", Courier, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  translate: -50% -160%;
  transition: translate 420ms cubic-bezier(0.2, 1.3, 0.4, 1);
}

.nav-hud.is-on { translate: -50% 0; }

.nav-hud i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d75a2e;
  animation: navRec 1s ease-in-out infinite;
}

@keyframes navRec { 50% { opacity: 0.25; } }

.nav-hud button {
  min-height: 1.9rem;
  padding: 0 0.8rem;
  border: 1.5px solid #171612;
  border-radius: 999px;
  background: #171612;
  color: #fbf6ec;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.nav-hud button:hover,
.nav-hud button:focus-visible { background: #d75a2e; border-color: #d75a2e; outline: none; }

.nav-confetti {
  position: fixed;
  width: 8px;
  height: 12px;
  z-index: 5620;
  pointer-events: none;
  border-radius: 2px;
  animation: navConfetti var(--d, 1.4s) cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

@keyframes navConfetti {
  to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; }
}

.nav-hud-step { opacity: 0.7; }

/* Very short screens: the HUD shrinks to progress plus End tour, so the
   speech bubble (which reserves its edge) keeps most of the height. */
@media (max-height: 560px), (max-width: 420px) {
  .nav-hud { gap: 0.45rem; padding-left: 0.7rem; font-size: 0.58rem; }
  .nav-hud [data-hud-label] { display: none; }
  .nav-hud-step { opacity: 1; }
  .nav-hud button { min-height: 1.7rem; padding: 0 0.65rem; }
}

/* ---- Effects: cut paper, keyed to Miko's drawings ---- */

.nav-fx {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

.nav-char.is-jolted { animation: navJolt 360ms cubic-bezier(0.3, 0.7, 0.4, 1); }

@keyframes navJolt {
  0%, 100% { translate: 0 0; }
  15% { translate: -5px 3px; }
  35% { translate: 4px -2px; }
  55% { translate: -3px 1px; }
  75% { translate: 2px 0; }
}

.nav-fx-scrap {
  width: 9px;
  height: 7px;
  margin: -3px 0 0 -4px;
  border: 1px solid rgba(23, 22, 18, 0.55);
  clip-path: polygon(0 20%, 60% 0, 100% 45%, 80% 100%, 15% 85%);
  animation: navScrap 700ms cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}

@keyframes navScrap {
  0% { transform: translate(0, 0) rotate(0) scale(var(--s, 1)); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--r)) scale(var(--s, 1)); opacity: 0; }
}

/* A comic splat: three layers of cut paper and a word */
.nav-fx-burst {
  --k: 1;
  width: calc(150px * var(--k));
  height: calc(110px * var(--k));
  margin: calc(-55px * var(--k)) 0 0 calc(-75px * var(--k));
  display: grid;
  place-items: center;
  animation: navBurst 760ms cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}

.nav-fx-burst i {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 60% 26%, 88% 8%, 76% 36%, 100% 44%, 78% 58%, 94% 88%, 64% 74%, 52% 100%, 42% 76%, 12% 94%, 24% 62%, 0 52%, 22% 38%, 8% 10%, 38% 24%);
}

.nav-fx-burst i:first-child { background: #171612; transform: translate(4px, 5px) rotate(-6deg); }
.nav-fx-burst i:nth-child(2) { background: #ffd569; border: 0; transform: rotate(-6deg); }

.nav-fx-word {
  --k: 1;
  padding: 0.2em 0.5em 0.25em;
  translate: -50% -50%;
  background: #fbf6ec;
  border: 2px solid #171612;
  box-shadow: 3px 3px 0 #171612;
  color: #d75a2e;
  font: 900 calc(1.15rem * var(--k)) / 1 "Playfair Display", Georgia, serif;
  letter-spacing: 0.03em;
  white-space: nowrap;
  animation: navWord 900ms cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}

@keyframes navWord {
  0% { transform: scale(0.2) rotate(-24deg); opacity: 0; }
  20% { transform: scale(1.15) rotate(-6deg); opacity: 1; }
  34% { transform: scale(1) rotate(-8deg); }
  80% { transform: translateY(-6px) rotate(-8deg); opacity: 1; }
  100% { transform: translateY(-22px) rotate(-12deg); opacity: 0; }
}

@keyframes navBurst {
  0% { transform: scale(0.2) rotate(-20deg); opacity: 0; }
  18% { transform: scale(1.12) rotate(4deg); opacity: 1; }
  30% { transform: scale(0.96) rotate(-2deg); }
  78% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(1.1) translateY(-14px); opacity: 0; }
}

.nav-fx-ring {
  --k: 1;
  width: calc(120px * var(--k));
  height: calc(22px * var(--k));
  margin: calc(-11px * var(--k)) 0 0 calc(-60px * var(--k));
  border: 3px solid rgba(23, 22, 18, 0.5);
  border-radius: 50%;
  animation: navRing 620ms ease-out forwards;
}

@keyframes navRing {
  from { transform: scale(0.3); opacity: 1; }
  to { transform: scale(1.8); opacity: 0; }
}

/* Paper strips streaming behind a run */
.nav-fx-streak {
  --len: 50px;
  --dir: -1;
  width: var(--len);
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: #fbf6ec;
  box-shadow: 0 0 0 1px rgba(23, 22, 18, 0.35);
  transform-origin: 0 50%;
  animation: navStreak 460ms ease-out forwards;
}

@keyframes navStreak {
  from { transform: translateX(0) scaleX(0.2); opacity: 0.95; }
  to { transform: translateX(calc(var(--dir) * 70px)) scaleX(1); opacity: 0; }
}

.nav-fx-streak.is-up {
  width: 3px;
  height: var(--len);
  margin: 0 0 0 -1.5px;
  background: #fbf6ec;
  transform-origin: 50% 0;
  animation-name: navStreakUp;
  opacity: 0;
}

@keyframes navStreakUp {
  from { transform: translateY(-20px) scaleY(0.2); opacity: 0.95; }
  to { transform: translateY(40px) scaleY(1); opacity: 0; }
}

/* Stars off the cape: four-point paper sparkles */
.nav-fx-star {
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: #ffd569;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: navStar 760ms cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}

.nav-fx-star.is-burst { animation-duration: 640ms; }
.nav-fx-star.is-sad { background: #a9dcf5; width: 8px; height: 8px; }

@keyframes navStar {
  0% { transform: translate(0, 0) rotate(0) scale(calc(var(--s, 1) * 0.3)); opacity: 0; }
  18% { transform: translate(calc(var(--dx) * 0.15), calc(var(--dy) * 0.15)) rotate(calc(var(--r) * 0.2)) scale(var(--s, 1)); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(calc(var(--s, 1) * 0.2)); opacity: 0; }
}

/* Tears, flung and dripping */
.nav-fx-tear {
  width: 9px;
  height: 12px;
  margin: -6px 0 0 -4.5px;
  border: 1.5px solid #3f8fbd;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 35% 38%, #e9f7ff 0 18%, #8fd2f3 22%);
  animation: navTear 820ms cubic-bezier(0.3, 0.2, 0.7, 1) forwards;
}

@keyframes navTear {
  0% { transform: translate(0, 0) scale(var(--s, 1)); opacity: 1; }
  40% { transform: translate(calc(var(--dx) * 0.7), calc(var(--dy) * -0.15)) scale(var(--s, 1)); }
  100% { transform: translate(var(--dx), var(--dy)) scale(calc(var(--s, 1) * 0.6)); opacity: 0; }
}

.nav-fx-sweat {
  --k: 1;
  width: calc(12px * var(--k));
  height: calc(17px * var(--k));
  border: 1.5px solid #3f8fbd;
  border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  background: #aee0f7;
  animation: navSweat 1.15s ease-in forwards;
}

@keyframes navSweat {
  0% { transform: scale(0); opacity: 0; }
  20% { transform: scale(1.15); opacity: 1; }
  30% { transform: scale(1); }
  100% { transform: translateY(26px) scale(0.9); opacity: 0; }
}

/* ---- Story mode: letterbox bars ---- */

.nav-cine-bars i {
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(26px, 7vh, 64px);
  background: #171612;
  transition: transform 620ms cubic-bezier(0.7, 0, 0.2, 1);
}

.nav-cine-bars i:first-child {
  top: 0;
  transform: translateY(-110%);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 9px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 0h40v3l-5 5-6-4-5 6-6-5-5 4-6-6-7 5z'/%3E%3C/svg%3E") bottom / 40px 10px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 9px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 0h40v3l-5 5-6-4-5 6-6-5-5 4-6-6-7 5z'/%3E%3C/svg%3E") bottom / 40px 10px repeat-x;
}

.nav-cine-bars i:last-child {
  bottom: 0;
  transform: translateY(110%);
  -webkit-mask: linear-gradient(#000, #000) bottom / 100% calc(100% - 9px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 10h40V7l-5-5-6 4-5-6-6 5-5-4-6 6-7-5z'/%3E%3C/svg%3E") top / 40px 10px repeat-x;
  mask: linear-gradient(#000, #000) bottom / 100% calc(100% - 9px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 10h40V7l-5-5-6 4-5-6-6 5-5-4-6 6-7-5z'/%3E%3C/svg%3E") top / 40px 10px repeat-x;
}

.nav-cine-bars.is-on i { transform: none; }

/* ---- Story mode: a chapter card cut from three sheets ---- */

.nav-chapter {
  position: fixed;
  left: 50%;
  top: clamp(4.4rem, 14vh, 8rem);
  z-index: 5640;
  width: min(30rem, calc(100vw - 2rem));
  pointer-events: none;
  translate: -50% 0;
  perspective: 900px;
  visibility: hidden;
}

.nav-chapter.is-on { visibility: visible; }

.nav-chapter-back,
.nav-chapter-mid,
.nav-chapter-face {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 6%, 4% 0, 12% 5%, 22% 0, 33% 6%, 45% 1%, 57% 6%, 69% 0, 80% 5%, 91% 0, 100% 7%, 98% 50%, 100% 93%, 93% 100%, 82% 95%, 70% 100%, 58% 94%, 46% 100%, 34% 95%, 22% 100%, 11% 94%, 3% 100%, 0 92%, 2% 50%);
}

.nav-chapter-back { background: #d75a2e; transform: rotate(-2.6deg) translate(-6px, 6px); }
.nav-chapter-mid { background: #171612; transform: rotate(1.4deg) translate(5px, 4px); }

.nav-chapter-face {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 1.35rem 1.6rem 1.25rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 1.3rem, rgba(37, 63, 84, 0.07) 1.3rem calc(1.3rem + 1px)),
    linear-gradient(180deg, #fbf6ec, #efe4d2);
  color: #171612;
  text-align: center;
}

.nav-chapter small {
  font: 700 0.62rem/1 "Courier New", Courier, monospace;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #a33128;
}

.nav-chapter strong {
  font: 900 clamp(1.5rem, 4.4vw, 2.3rem)/1 "Playfair Display", Georgia, serif;
  letter-spacing: -0.01em;
}

.nav-chapter em {
  font: italic 400 0.95rem/1.3 Georgia, "Times New Roman", serif;
  color: #3e3933;
}

.nav-chapter em:empty { display: none; }

.nav-chapter-snip {
  position: absolute;
  top: 50%;
  left: -0.4rem;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -0.8rem;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d75a2e' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='9' cy='28' r='6'/%3E%3Ccircle cx='9' cy='12' r='6'/%3E%3Cpath d='M13 25 36 8M13 15l23 17'/%3E%3C/svg%3E");
  opacity: 0;
}

.nav-chapter.is-on > * { animation: navChapterIn 720ms cubic-bezier(0.2, 1.3, 0.35, 1) both; }
.nav-chapter.is-on .nav-chapter-mid { animation-delay: 70ms; }
.nav-chapter.is-on .nav-chapter-face { animation-delay: 140ms; }
.nav-chapter.is-on .nav-chapter-snip { animation: navChapterSnip 700ms 200ms ease-in-out both; }
.nav-chapter.is-off > * { animation: navChapterOut 560ms cubic-bezier(0.6, 0, 0.8, 0.3) both; }
.nav-chapter.is-off .nav-chapter-back { animation-delay: 90ms; }

@keyframes navChapterIn {
  from { opacity: 0; transform: translateY(-40px) rotateX(-80deg) rotate(-4deg); }
}

@keyframes navChapterSnip {
  0% { opacity: 0; left: -0.4rem; }
  15%, 85% { opacity: 1; }
  100% { opacity: 0; left: calc(100% - 1.2rem); }
}

@keyframes navChapterOut {
  to { opacity: 0; transform: translateY(-70px) rotate(6deg) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-chapter.is-on > *, .nav-chapter.is-off > * { animation: none !important; }
  .nav-chapter.is-off { visibility: hidden; }
  .nav-cine-bars i { transition: none; }
}

@media (max-width: 640px) {
  .nav-stage { --nav-h: 96px; }
  .nav-bubble { font-size: 0.94rem; padding: 0.95rem 0.95rem 0.85rem; }
  .nav-choice { font-size: 0.9rem; min-height: 2.5rem; }
  .nav-chapter { top: 3.8rem; }
  .nav-chapter-face { padding: 1rem 1.1rem 0.95rem; }
}

@media print {
  .nav-stage, .nav-hud, .nav-chapter { display: none !important; }
}