/* =========================================================
   Dumpling & Donut — Chapter 2: "The Night That Became Everything"
   Extends the design tokens and character/prop styles already
   defined in style.css. This file only adds what's new for
   this chapter: new tokens, new symbols (plane/cat/sunflower),
   scene layout, and every interactive widget.
   ========================================================= */

:root {
  --sunflower: #f3b93b;
  --sunflower-deep: #d99a1e;
  --grey-blue: #7c8a9e;
  --morning-cool: #cdd4de;
  --amber-fluor: #ffb85e;
  --navy-deep: #171d2c;
  --pale-blue-morning: #d8e3ec;
  --gold-quiet: #f1e0b8;
}

.ch2-body { background: var(--cream); }

/* ---------- Header ---------- */
.ch2-nav .nav-inner { justify-content: flex-start; gap: 1.5rem; }
.ch2-nav-title {
  margin: 0; font-family: var(--font-display); font-style: italic;
  color: var(--ink-soft); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) { .ch2-nav-title { display: none; } }

/* ---------- Journey indicator ---------- */
.journey {
  position: fixed; z-index: 150;
  right: 1rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .55rem;
  background: rgba(250, 243, 230, .7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(107,66,38,.12);
  padding: .6rem .45rem;
  border-radius: 999px;
}
.journey a {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: .9rem; text-decoration: none; opacity: .45;
  transition: opacity .25s, transform .25s, background .25s;
}
.journey a:hover, .journey a:focus-visible { opacity: .8; }
.journey a[aria-current="true"] {
  opacity: 1; background: var(--red); transform: scale(1.15);
  box-shadow: var(--shadow-tiny);
}
@media (max-width: 720px) {
  .journey {
    right: 0; left: 0; top: auto; bottom: 0; transform: none;
    flex-direction: row; justify-content: center; gap: .3rem;
    border-radius: 0; width: 100%; overflow-x: auto;
    border-top: 1px solid rgba(107,66,38,.12); border-left: none; border-right: none; border-bottom: none;
    padding: .5rem .6rem;
  }
  .journey a { flex: 0 0 auto; }
}

/* ---------- Generic scene shell ---------- */
.scene { position: relative; padding: 5.5rem 1.5rem; text-align: center; overflow: hidden; }
.scene-inner { max-width: 640px; margin: 0 auto; }
.scene-eyebrow { color: var(--red); font-weight: 600; letter-spacing: .04em; margin: 0 0 .6rem; }
.scene-title {
  font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: var(--brown-deep); line-height: 1.35; margin: 1.2rem 0 .6rem;
}
.scene-support { color: var(--ink-soft); margin: .3rem 0; }
.scene-support--muted { font-style: italic; opacity: .75; }
.scene-support--pause { margin-top: 1.6rem; font-size: 1.1rem; }
.scene-small { color: var(--ink-soft); font-size: .9rem; }
.scene-caption { color: var(--ink-soft); font-style: italic; margin: .8rem 0; }
.scene-line { font-family: var(--font-display); font-size: clamp(1.3rem, 3.4vw, 1.8rem); color: var(--brown-deep); margin: 2rem 0; }
.scene-line--freeze { margin-top: 2.4rem; }
.scene-date-quiet {
  font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--brown-deep); letter-spacing: .02em;
}
.scene--quiet { padding: 8rem 1.5rem; }

/* ---------- Opening transition ---------- */
.ch2-transition {
  position: relative; min-height: 100vh; overflow: hidden;
  background: linear-gradient(180deg, var(--midnight-bg), var(--midnight-bg-2));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--midnight-ink);
}
.night-sky { position: absolute; inset: 0; }
.star {
  position: absolute; left: var(--x); top: var(--y);
  width: 3px; height: 3px; border-radius: 50%; background: #fff;
  opacity: 0; animation: star-twinkle 2.6s ease-in-out var(--d) infinite;
}
@keyframes star-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
.trans-plane {
  width: 70px; position: relative; z-index: 2;
  animation: trans-fly 3.6s ease-in-out forwards;
  filter: drop-shadow(0 0 6px rgba(232,168,79,.5));
}
.plane-body, .plane-wing, .plane-tail { fill: var(--midnight-amber); }
@keyframes trans-fly {
  0% { transform: translateX(-60vw) translateY(20px) rotate(-4deg); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateX(60vw) translateY(-30px) rotate(2deg); opacity: 1; }
}
.trans-copy { position: relative; z-index: 2; text-align: center; margin-top: 1.5rem; }
.trans-date, .trans-route {
  opacity: 0; transform: translateY(10px);
  animation: trans-copy-in .8s ease-out forwards;
  font-family: var(--font-display);
}
.trans-date { font-size: clamp(1.8rem, 5vw, 2.6rem); animation-delay: 3.2s; }
.trans-route { font-size: 1.1rem; color: var(--midnight-amber); margin-top: .5rem; animation-delay: 3.9s; }
@keyframes trans-copy-in { to { opacity: 1; transform: translateY(0); } }
.trans-skip {
  position: absolute; bottom: 1.5rem; right: 1.5rem; z-index: 3;
  background: transparent; border: 1px solid rgba(233,226,214,.35); color: var(--midnight-ink);
  padding: .5rem 1rem; border-radius: 999px; font-size: .85rem; cursor: pointer;
}
.trans-skip:hover { background: rgba(233,226,214,.1); }

/* ---------- Flight scene ---------- */
.scene--flight { background: linear-gradient(180deg, var(--midnight-bg-2), var(--paper)); color: var(--midnight-ink); }
.scene--flight .scene-eyebrow { color: var(--midnight-amber); }
.flight-stage { position: relative; height: 160px; margin: 0 auto 1.2rem; max-width: 480px; }
.flight-path {
  position: absolute; left: 8%; right: 8%; top: 50%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--midnight-amber) 0 10px, transparent 10px 20px);
  opacity: .5;
}
.flight-plane-btn {
  position: absolute; top: 50%; left: 8%;
  transform: translate(-50%, -50%);
  width: 54px; height: 34px; background: none; border: none; padding: 0; cursor: pointer;
  animation: plane-travel 5s ease-in-out infinite alternate;
}
.flight-plane-icon { width: 100%; }
@keyframes plane-travel { from { left: 8%; } to { left: 84%; } }
.flight-window { position: absolute; left: 6%; top: 0; width: 60px; opacity: .9; }
.flight-window .char-svg--tiny { width: 60px; }
.flight-waiting { position: absolute; right: 4%; bottom: 0; text-align: center; }
.flight-waiting .char-svg--tiny { width: 70px; margin: 0 auto; }
.flight-waiting-label { font-size: .8rem; color: var(--midnight-amber); margin: .2rem 0 0; }
.flight-clock {
  font-variant-numeric: tabular-nums; font-size: 1.6rem; font-family: var(--font-display);
  color: var(--midnight-amber); margin: .5rem 0;
}
.flight-ticket {
  max-width: 320px; margin: 1rem auto; text-align: left;
  background: var(--paper); color: var(--ink); border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem; box-shadow: var(--shadow-soft);
}
.ticket-row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed rgba(107,66,38,.2); font-size: .9rem; }
.ticket-row:last-child { border-bottom: none; }
.ticket-row span { color: var(--ink-soft); letter-spacing: .03em; }

/* ---------- Hyatt / suitcase ---------- */
.road-map { position: relative; height: 40px; max-width: 420px; margin: 1.5rem auto; }
.suitcase-block { margin-top: 2.2rem; }
.suitcase-btn {
  background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.suitcase-icon { width: 70px; }
.suitcase-btn[aria-expanded="true"] .suitcase-icon { animation: suitcase-pop .4s ease; }
@keyframes suitcase-pop { 0% { transform: scale(1); } 50% { transform: scale(1.08) rotate(-2deg); } 100% { transform: scale(1); } }
.suitcase-label { color: var(--red); font-weight: 600; }
.suitcase-items { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; max-width: 380px; margin-left: auto; margin-right: auto; }
.suitcase-item {
  background: var(--peach); border-radius: 999px; padding: .4rem .9rem; font-size: .85rem; color: var(--brown-deep);
  animation: item-pop .4s ease backwards;
}
.suitcase-item:nth-child(1) { animation-delay: .05s; }
.suitcase-item:nth-child(2) { animation-delay: .15s; }
.suitcase-item:nth-child(3) { animation-delay: .25s; }
.suitcase-item:nth-child(4) { animation-delay: .35s; }
.suitcase-item:nth-child(5) { animation-delay: .45s; }
@keyframes item-pop { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: translateY(0) scale(1); } }
.suitcase-ready { margin-top: 1rem; font-family: var(--font-display); font-size: 1.2rem; color: var(--brown-deep); }

/* ---------- Surprise ---------- */
.scene--surprise { background: #241a12; color: var(--midnight-ink); padding-bottom: 0; }
.scene-hall-line { color: rgba(233,226,214,.75); font-style: italic; margin-bottom: 2rem; }
.door-block { position: relative; }
.door-btn { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .8rem; margin: 0 auto; }
.door { position: relative; width: 120px; height: 200px; display: block; }
.door-panel {
  position: absolute; inset: 0; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #3a2c1e, #241a12);
  border: 3px solid var(--brown);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.5,0,.2,1);
}
.door-glow { position: absolute; inset: 0; border-radius: 6px 6px 0 0; background: var(--sunflower); opacity: 0; transition: opacity 1.1s; }
.door-block[data-open="true"] .door-panel { transform: rotateY(-78deg); }
.door-block[data-open="true"] .door-glow { opacity: .9; }
.door-label { color: var(--sunflower); font-weight: 600; letter-spacing: .02em; }
.door-block[data-open="true"] .door-label { opacity: 0; height: 0; }

.room-reveal {
  position: relative; margin-top: 1rem; padding: 3rem 1.5rem 2.5rem;
  background: radial-gradient(120% 100% at 50% 0%, rgba(243,185,59,.35), transparent 70%),
              linear-gradient(180deg, #2c2013, #241a12);
  animation: room-fade-in 1.2s ease;
}
@keyframes room-fade-in { from { opacity: 0; } to { opacity: 1; } }
.room-lights {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(3px 3px at 10% 20%, var(--sunflower), transparent),
    radial-gradient(3px 3px at 85% 15%, var(--sunflower), transparent),
    radial-gradient(3px 3px at 25% 80%, var(--sunflower), transparent),
    radial-gradient(3px 3px at 70% 75%, var(--sunflower), transparent),
    radial-gradient(3px 3px at 50% 10%, var(--sunflower), transparent);
  animation: fairy-twinkle 3s ease-in-out infinite alternate;
}
@keyframes fairy-twinkle { from { opacity: .4; } to { opacity: 1; } }
.sunflower-hero { width: 140px; margin: 0 auto 1rem; filter: drop-shadow(0 8px 20px rgba(243,185,59,.35)); }
.sunflower-small { width: 60px; }
/* .petal / .sunflower-core live inside the <use> clone of #prop-sunflower,
   so they must be styled as bare class selectors (descendant selectors
   scoped to an ancestor outside the <use> don't reach into its shadow content). */
.petal { fill: var(--sunflower); animation: petal-sway 4s ease-in-out infinite; transform-origin: 60px 60px; }
.petal:nth-child(2n) { animation-delay: .3s; }
.petal:nth-child(3n) { animation-delay: .6s; }
@keyframes petal-sway { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.03) rotate(1.5deg); } }
.sunflower-core { fill: var(--brown-deep); stroke: var(--sunflower-deep); stroke-width: 2; }
.room-details { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem 0; }
.room-tag { background: rgba(243,185,59,.15); border: 1px solid rgba(243,185,59,.35); color: var(--gold-quiet); border-radius: 999px; padding: .3rem .8rem; font-size: .8rem; }
.room-characters { display: flex; justify-content: center; gap: -1rem; margin: 1rem 0; }
.room-characters .char-svg--small { width: 110px; }
#surprise-donut { opacity: .9; }
.scene--surprise .scene-title { color: var(--gold-quiet); }
.scene--surprise .scene-caption { color: rgba(233,226,214,.7); }
.snack-table { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; padding: 0; margin: 1.2rem 0 .6rem; }
.snack {
  background: var(--paper); color: var(--brown-deep); border: none; border-radius: var(--radius-sm);
  padding: .6rem 1.1rem; font-size: .85rem; cursor: pointer; box-shadow: var(--shadow-tiny);
  transition: transform .2s;
}
.snack:hover, .snack:focus-visible { transform: translateY(-3px); }
.snack-reaction { min-height: 1.4em; color: var(--sunflower); font-style: italic; }

/* ---------- Cat ---------- */
.cat-stage { position: relative; margin-bottom: 1.5rem; }
.cat-svg { width: 130px; margin: 0 auto; display: block; animation: cat-walk-in 1s ease; }
@keyframes cat-walk-in { from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.cat-shadow { fill: rgba(74,44,24,.12); }
.cat-body, .cat-head { fill: #b98860; stroke: var(--brown); stroke-width: 2; }
.cat-ear { fill: #b98860; stroke: var(--brown); stroke-width: 2; }
.cat-tail { stroke: #b98860; stroke-width: 10; stroke-linecap: round; transform-origin: 112px 80px; animation: tail-wag 2.4s ease-in-out infinite; }
@keyframes tail-wag { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } }
.cat-eye { stroke: var(--brown-deep); stroke-width: 3; stroke-linecap: round; animation: blink 5s ease-in-out infinite; }
.cat-mouth { stroke: var(--brown-deep); stroke-width: 2; }
.cat-whisker { stroke: var(--brown-deep); stroke-width: 1.4; opacity: .6; }
.cat-svg--sleeping { width: 70px; opacity: .9; }
.pet-btn {
  background: var(--peach); border: none; border-radius: 999px; padding: .6rem 1.4rem;
  font-size: .9rem; cursor: pointer; color: var(--brown-deep); box-shadow: var(--shadow-tiny);
}
.pet-reaction { color: var(--red); margin-top: .6rem; }
.cat-svg.is-happy, .char-svg--small.is-happy { animation: cat-happy .5s ease; }
@keyframes cat-happy { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- That night (evening) ---------- */
.scene--evening { background: linear-gradient(180deg, var(--paper), #2c2013); }
.evening-room { position: relative; max-width: 360px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: center; }
.evening-room .char-svg--seated { width: 40%; max-width: 130px; }
.evening-room .sunflower-small { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); }
.evening-room .cat-svg--sleeping { position: absolute; bottom: -6px; left: 8%; }
.scene--evening .scene-title { margin-top: 2rem; }

/* ---------- Morning shift ---------- */
.scene--morning { background: linear-gradient(180deg, #2c2013, var(--morning-cool)); }
.scene--morning .scene-title { color: var(--brown-deep); }
.phone-vibrate { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.phone-vibrate .prop-svg--phone-lit.is-vibrating { animation: vibrate .25s linear infinite, phonepulse 2s ease-in-out infinite; }
@keyframes vibrate { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-2px) rotate(-2deg); } 75% { transform: translateX(2px) rotate(2deg); } }
.answer-btn {
  background: var(--grey-blue); color: #fff; border: none; border-radius: 999px; padding: .8rem 1.8rem;
  font-size: 1rem; cursor: pointer; box-shadow: var(--shadow-tiny);
}

/* ---------- Chaos ---------- */
.scene--chaos { background: var(--morning-cool); color: var(--ink); min-height: 70vh; }
.notif-field { position: relative; height: 140px; max-width: 460px; margin: 0 auto 1rem; }
.notif {
  position: absolute; background: #fff; border: 1px solid rgba(74,44,24,.15); border-radius: var(--radius-sm);
  padding: .5rem .8rem; font-size: .78rem; box-shadow: var(--shadow-tiny);
  opacity: 0; animation: notif-in .5s ease forwards;
  transition: opacity .8s, transform .8s;
}
.notif:nth-child(1) { top: 0; left: 4%; animation-delay: .1s; }
.notif:nth-child(2) { top: 20%; right: 2%; animation-delay: .35s; }
.notif:nth-child(3) { top: 55%; left: 0; animation-delay: .6s; }
.notif:nth-child(4) { top: 75%; right: 8%; animation-delay: .85s; }
@keyframes notif-in { from { opacity: 0; transform: translateY(-8px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
.notif-field.is-calm .notif { opacity: .15; transform: scale(.85); }
.chaos-characters { display: flex; justify-content: center; gap: .5rem; margin: 1rem 0; transition: gap .6s; }
.chaos-characters .char-svg--small { width: 110px; }
.chaos-characters.is-calm { gap: -1.5rem; }
.scene--chaos .scene-title { color: var(--brown-deep); }
.hold-btn {
  margin-top: 1.5rem; background: var(--brown); color: #fff; border: none; border-radius: 999px;
  padding: .9rem 1.9rem; font-size: 1rem; cursor: pointer; position: relative; overflow: hidden;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.hold-btn::before {
  content: ""; position: absolute; inset: 0; left: 0; width: var(--hold-pct, 0%);
  background: rgba(255,255,255,.25); transition: width .05s linear;
}
.hold-result { margin-top: 1rem; font-family: var(--font-display); font-size: 1.2rem; color: var(--brown-deep); }

/* ---------- Pack ---------- */
.pack-stage { position: relative; max-width: 420px; margin: 1.5rem auto 0; min-height: 220px; }
.pack-items { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.pack-item {
  background: var(--peach); border: none; border-radius: var(--radius-sm); padding: .6rem 1rem;
  font-size: .85rem; cursor: pointer; color: var(--brown-deep); transition: transform .4s, opacity .4s;
}
.pack-item.is-packed { opacity: 0; transform: translateY(60px) scale(.5); pointer-events: none; }
.pack-suitcase { width: 80px; margin: 1.2rem auto 0; transition: transform .3s; }
.pack-suitcase.is-full { animation: suitcase-pop .5s ease; }
.pack-go { margin-top: 1rem; font-family: var(--font-display); font-size: 1.3rem; color: var(--brown-deep); }

/* ---------- Flight plan ---------- */
.fork { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 1.5rem 0; }
.fork-btn {
  background: var(--paper); border: 2px solid var(--brown); border-radius: 999px; padding: .7rem 1.4rem;
  font-size: .95rem; cursor: pointer; color: var(--brown-deep);
}
.fork-btn:hover, .fork-btn:focus-visible { background: var(--peach); }
.fork-result { color: var(--ink-soft); font-style: italic; margin-bottom: 1rem; }
.plan-sequence { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 1.6rem; }
.plan-label { color: var(--ink-soft); font-size: .8rem; letter-spacing: .05em; margin: 0; }
.plan-value { font-family: var(--font-display); font-size: 1.5rem; color: var(--brown-deep); margin: .2rem 0 0; }
.plan-step--freeze { margin-top: 1rem; }
.plan-oh { color: var(--red); font-style: italic; margin-top: .4rem; }

/* ---------- Second ticket ---------- */
.passenger-list { max-width: 320px; margin: 1.2rem auto; text-align: left; background: var(--paper); border-radius: var(--radius-md); padding: 1rem 1.3rem; box-shadow: var(--shadow-tiny); }
.passenger-row { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .9rem; color: var(--brown-deep); }
.passenger-row strong { color: var(--red); }
.passenger-row--donut { animation: item-pop .5s ease; }
.add-donut-btn {
  background: var(--red); color: #fff; border: none; border-radius: 999px; padding: .8rem 1.6rem;
  cursor: pointer; font-size: .95rem;
}
.secondticket-result { margin-top: 1rem; font-family: var(--font-display); color: var(--brown-deep); font-size: 1.1rem; }

/* ---------- Run + elevator ---------- */
.scene--run { background: var(--navy-deep); color: var(--midnight-ink); }
.scene--run .scene-title, .scene--run .scene-caption { color: var(--midnight-ink); }
.run-track { position: relative; max-width: 480px; margin: 1.5rem auto; }
.run-signs { display: flex; justify-content: space-between; font-size: .7rem; color: var(--amber-fluor); opacity: .8; margin-bottom: .4rem; }
.run-pair { display: flex; align-items: center; justify-content: center; gap: -1rem; position: relative; height: 90px; }
.run-pair .char-svg--tiny { width: 55px; }
.run-suitcase { width: 40px; }
.run-track.is-running .run-pair { animation: run-bob .3s linear infinite; }
@keyframes run-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.run-progress-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.run-progress-fill { height: 100%; width: 0%; background: var(--amber-fluor); transition: width .05s linear; }
.run-btn {
  margin-top: 1.2rem; background: var(--red); color: #fff; border: none; border-radius: 999px;
  padding: 1rem 2rem; font-size: 1rem; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.elevator-block { margin-top: 2rem; animation: room-fade-in .6s ease; }
.scene--run .lift { border-color: var(--amber-fluor); margin: 1rem auto; }
/* Override style.css's "open once ancestor .reveal is .in-view" behaviour —
   here the doors must stay shut until the visitor presses a floor button. */
#elevator-block .lift-door--left,
#elevator-block .lift-door--right { transform: translateX(0); transition: transform .9s var(--ease-gentle); }
#elevator-block .lift-door--left.is-open { transform: translateX(-100%); }
#elevator-block .lift-door--right.is-open { transform: translateX(100%); }
.lift-buttons { display: flex; gap: .6rem; justify-content: center; margin-top: 1rem; }
.lift-buttons button {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--amber-fluor); background: none;
  color: var(--midnight-ink); font-size: 1rem; cursor: pointer;
}
.lift-buttons button.is-active { background: var(--amber-fluor); color: var(--brown-deep); }
.lift-sign { margin-top: 1rem; background: var(--midnight-amber); color: var(--brown-deep); display: inline-block; padding: .5rem 1rem; border-radius: var(--radius-sm); font-weight: 700; }
.lift-caption { margin-top: .6rem; font-style: italic; color: var(--amber-fluor); }

/* ---------- Terminal / board ---------- */
.board { max-width: 380px; margin: 0 auto 1.5rem; background: var(--navy-deep); color: var(--amber-fluor); border-radius: var(--radius-sm); overflow: hidden; font-variant-numeric: tabular-nums; }
.board-row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: .5rem .8rem; font-size: .82rem; }
.board-row--head { background: rgba(255,255,255,.08); color: rgba(255,184,94,.7); font-size: .7rem; letter-spacing: .05em; }
.collapse-seats { display: flex; justify-content: center; gap: -1rem; margin-top: 1.5rem; opacity: .9; }
.collapse-seats .char-svg--tiny { width: 90px; transform: rotate(-4deg); }
.collapse-seats .char-svg--tiny:last-child { transform: rotate(4deg); margin-left: -1rem; }

/* ---------- Food ---------- */
.food-tray {
  display: block; margin: 1.5rem auto 0; width: 200px; height: 70px; border-radius: var(--radius-md);
  background: var(--peach); border: 2px solid var(--brown); cursor: pointer; color: var(--brown-deep);
  font-size: .95rem;
}
.food-items { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1.2rem 0; }
.food-item { background: var(--paper); border-radius: var(--radius-sm); padding: .8rem 1rem; box-shadow: var(--shadow-tiny); max-width: 150px; animation: item-pop .5s ease; }
.food-item span { font-size: 1.8rem; }
.food-item p { font-size: .8rem; margin: .4rem 0 0; color: var(--ink-soft); }
#food-line1, #food-line2 { animation: item-pop .6s ease; }

/* ---------- Kabir ---------- */
.kabir-btn {
  background: var(--brown); color: #fff; border: none; border-radius: 999px; padding: .8rem 1.7rem;
  cursor: pointer; font-size: .95rem;
}
.kabir-call { margin-top: 1.5rem; }
.kabir-icons { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; font-size: 1.6rem; margin-bottom: 1rem; }
.kabir-icons span { animation: item-pop .5s ease backwards; }
.kabir-icons span:nth-child(1) { animation-delay: .05s; }
.kabir-icons span:nth-child(2) { animation-delay: .15s; }
.kabir-icons span:nth-child(3) { animation-delay: .25s; }
.kabir-icons span:nth-child(4) { animation-delay: .35s; }
.kabir-icons span:nth-child(5) { animation-delay: .45s; }
.kabir-icons span:nth-child(6) { animation-delay: .55s; }
.kabir-icons span:nth-child(7) { animation-delay: .65s; }
.kabir-line { font-family: var(--font-display); font-size: 1.3rem; color: var(--brown-deep); }

/* ---------- Charger ---------- */
.battery { font-variant-numeric: tabular-nums; font-size: 1.4rem; color: var(--brown-deep); font-family: var(--font-display); }
.charger-people { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1rem 0; }
.charger-people button {
  background: var(--paper); border: 1px solid rgba(107,66,38,.2); border-radius: var(--radius-sm);
  padding: .6rem 1rem; cursor: pointer; font-size: .85rem; color: var(--brown-deep);
}
.charger-people button.is-used { opacity: .4; pointer-events: none; }
.charger-response { min-height: 1.4em; color: var(--ink-soft); font-style: italic; }
.charger-win { color: var(--red); font-family: var(--font-display); font-size: 1.1rem; }

/* ---------- Security tray ---------- */
.tray-stage { max-width: 420px; margin: 1.5rem auto 0; }
.tray-items { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.tray-item {
  background: var(--peach); border: none; border-radius: var(--radius-sm); padding: .6rem 1rem;
  font-size: .85rem; cursor: pointer; color: var(--brown-deep); transition: opacity .4s, transform .4s;
}
.tray-item.is-placed { opacity: 0; transform: translateY(50px) scale(.5); pointer-events: none; }
.security-tray {
  height: 30px; width: 70%; margin: 1.2rem auto 0; border-radius: var(--radius-sm);
  background: repeating-linear-gradient(90deg, rgba(107,66,38,.15) 0 8px, transparent 8px 16px);
  border: 2px solid var(--brown); transition: transform .8s ease;
}
.security-tray.is-scanning { transform: translateX(120px); }

/* ---------- Gate ---------- */
.scene--gate { background: linear-gradient(180deg, var(--navy-deep), #232b40); color: var(--midnight-ink); }
.gate-window { position: relative; max-width: 420px; height: 140px; margin: 0 auto 1rem; border: 2px solid rgba(233,226,214,.2); border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; gap: -.5rem; }
.gate-plane { position: absolute; top: 15%; font-size: 1.2rem; animation: gate-plane-move 12s linear infinite; opacity: .5; }
@keyframes gate-plane-move { from { left: -10%; } to { left: 110%; } }
.char-svg--lying { width: 80px; transform: rotate(-6deg); }
.char-svg--lying:last-child { transform: rotate(6deg); margin-left: -1rem; }
.scene--gate .scene-title { color: var(--midnight-ink); margin-top: 1rem; }

/* ---------- Proposal ---------- */
.scene--proposal { background: linear-gradient(180deg, var(--gold-quiet), var(--cream)); min-height: 85vh; display: flex; align-items: center; }
.scene--proposal .scene-inner { width: 100%; }
.proposal-characters { display: flex; justify-content: center; gap: -1rem; margin-bottom: 1rem; transition: gap .8s; }
.proposal-characters .char-svg--small { width: 110px; }
.proposal-characters.is-close { gap: -2rem; }
.scene-title--proposal { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.yes-btn {
  background: var(--red); color: #fff; border: none; border-radius: 999px; padding: 1rem 2.4rem;
  font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow-soft); margin-top: 1rem;
}
.proposal-result { margin-top: 1.5rem; animation: room-fade-in 1s ease; }
.proposal-result::before {
  content: ""; display: block; width: 90px; height: 90px; margin: 0 auto .8rem;
  background: radial-gradient(circle, rgba(243,185,59,.55), transparent 70%);
  border-radius: 50%;
}

/* ---------- Family / polaroids ---------- */
.polaroid-stack { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; margin-top: 1.5rem; perspective: 800px; }
.polaroid {
  width: 140px; height: 170px; background: #fff; border: 1px solid rgba(107,66,38,.15); border-radius: 4px;
  box-shadow: var(--shadow-tiny); cursor: pointer; padding: .6rem .5rem;
  position: relative; transform-style: preserve-3d; transition: transform .6s;
}
.polaroid.is-flipped { transform: rotateY(180deg); }
.polaroid-face {
  position: absolute; inset: .6rem .5rem; display: flex; align-items: center; justify-content: center; text-align: center;
  backface-visibility: hidden; font-size: .82rem; color: var(--ink-soft); padding: .5rem;
}
.polaroid-front { background: var(--beige); border-radius: 2px; }
.polaroid-back { transform: rotateY(180deg); background: var(--peach); border-radius: 2px; color: var(--brown-deep); }

/* ---------- Airport map ---------- */
.airport-map {
  position: relative; max-width: 480px; height: 260px; margin: 1.5rem auto;
  background: var(--beige); border: 1px solid rgba(107,66,38,.15); border-radius: var(--radius-md);
  overflow-x: auto;
}
.map-pin {
  position: absolute; left: var(--px); top: var(--py); transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: var(--paper); border: 2px solid var(--brown);
  font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.map-pin.is-visited { background: var(--peach); border-color: var(--red); }
.memory-panel { min-height: 90px; max-width: 420px; margin: 0 auto; }
.memory-hint { color: var(--ink-soft); font-style: italic; }
.memory-block { background: var(--paper); border-radius: var(--radius-sm); padding: 1rem; box-shadow: var(--shadow-tiny); animation: item-pop .4s ease; }
.memory-block p { margin: 0 0 .5rem; color: var(--ink); }
.memory-block .memory-caption { color: var(--red); font-style: italic; margin: .4rem 0 0; }
.mini-interact { display: flex; gap: .6rem; align-items: center; justify-content: center; margin-top: .6rem; flex-wrap: wrap; }
.mini-interact button {
  background: var(--peach); border: none; border-radius: 999px; padding: .4rem 1rem; font-size: .8rem; cursor: pointer; color: var(--brown-deep);
}
.ice-glass { width: 40px; height: 50px; border: 2px solid var(--brown); border-radius: 0 0 8px 8px; margin: 0 auto; position: relative; overflow: hidden; background: rgba(255,255,255,.4); }
.ice-cube { position: absolute; bottom: 4px; width: 10px; height: 10px; background: #dff1f5; border: 1px solid #b8dde3; }
.dosa-plate { width: 90px; height: 90px; border-radius: 50%; background: #e9c497; border: 3px solid var(--brown); margin: .6rem auto; position: relative; }
.dosa-bite { position: absolute; top: -6px; right: -6px; width: 36px; height: 36px; background: var(--beige); border-radius: 50%; }
.dessert-cup { width: 40px; height: 50px; border: 2px solid var(--brown); border-radius: 4px 4px 12px 12px; margin: 0 auto; position: relative; overflow: hidden; }
.dessert-ball { position: absolute; bottom: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); animation: item-pop .3s ease; }
.map-complete { margin-top: 1.5rem; font-family: var(--font-display); color: var(--brown-deep); font-size: 1.1rem; line-height: 1.6; }

/* ---------- Sleep ---------- */
.scene--sleep { background: linear-gradient(180deg, var(--navy-deep), #10151f); color: var(--midnight-ink); }
.sleep-scene { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: -1rem; max-width: 300px; margin: 0 auto 1rem; }
.sleep-scene .char-svg--tiny { width: 90px; }
.sleep-phone { position: absolute; bottom: -10px; right: 20%; width: 30px; opacity: .8; }
.alarm-btn {
  background: var(--midnight-amber); color: var(--brown-deep); border: none; border-radius: 999px;
  padding: .7rem 1.5rem; cursor: pointer; font-size: .9rem; margin-bottom: 1rem;
}
.alarm-btn.is-set { opacity: .6; }
.scene--sleep .scene-title, .scene--sleep .scene-support { color: var(--midnight-ink); }
.scene--sleep.is-dim { filter: brightness(.6); transition: filter 2s ease; }

/* ---------- Wake ---------- */
.wake-scene { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.wake-scene .char-svg--tiny { width: 80px; }
#wake-phone.is-ringing { animation: vibrate .2s linear infinite; }
.board--info { color: var(--brown-deep); background: var(--paper); border: 1px solid rgba(107,66,38,.15); }
.board--info .board-row--head { background: rgba(107,66,38,.08); color: var(--ink-soft); }

/* ---------- Goodbye ---------- */
.scene--goodbye { background: linear-gradient(180deg, var(--pale-blue-morning), var(--cream)); min-height: 85vh; display: flex; align-items: center; }
.scene--goodbye .scene-inner { width: 100%; }
.goodbye-stage { display: flex; justify-content: center; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.goodbye-stage .char-svg--small { width: 110px; transition: transform 2.5s ease; }
.goodbye-stage.is-leaving #goodbye-dumpling { transform: translateX(60px) scale(.8); opacity: .7; }
.scene--goodbye .scene-title { color: var(--brown-deep); }

/* ---------- Ending ---------- */
.ch2-ending { background: linear-gradient(180deg, var(--paper), var(--beige)); padding: 6rem 1.5rem; text-align: center; }
.ch2-ending-inner { max-width: 480px; margin: 0 auto; }
.ending-lines { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-soft); line-height: 2; margin: 1.5rem 0; }
.ending-lines--strong { font-size: 1.5rem; color: var(--brown-deep); }
.ch2-ending-title { font-family: var(--font-display); color: var(--brown-deep); font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 1rem 0 1.8rem; }

/* ---------- Shared small character sizing ---------- */
.char-svg--tiny { width: 90px; }
.char-svg--small { width: 130px; }

/* ---------- Reveal-on-scroll (mirrors index.html's .reveal system) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-gentle), transform .8s var(--ease-gentle); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
[data-reveal-child] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-gentle), transform .6s var(--ease-gentle); }
.reveal.in-view [data-reveal-child] { opacity: 1; transform: translateY(0); }

@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes phonepulse { 0%, 100% { filter: drop-shadow(0 0 6px rgba(232,168,79,.4)); } 50% { filter: drop-shadow(0 0 16px rgba(232,168,79,.8)); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, [data-reveal-child] { opacity: 1; transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .scene { padding: 3.5rem 1.1rem; }
  .journey a { width: 24px; height: 24px; font-size: .8rem; }
}