:root {
  color-scheme: dark;
  --ink: #fffaf1;
  --muted: rgba(255, 250, 241, 0.7);
  --violet: #b9a8ff;
  --lavender: #d9d0ff;
  --gold: #ffd98e;
  --rose: #ffb5c7;
  --night: #17152f;
  --night-deep: #0b0b1d;
  --glass: rgba(30, 27, 65, 0.58);
  --safe-top: max(16px, env(safe-area-inset-top));
  --safe-bottom: max(16px, env(safe-area-inset-bottom));
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 12%, #171538 0%, #090915 42%, #05050e 100%);
}

button { font: inherit; }

body {
  display: grid;
  place-items: center;
  color: var(--ink);
}

.story-shell {
  position: relative;
  width: min(100%, 560px);
  height: 100svh;
  min-height: 580px;
  overflow: hidden;
  overscroll-behavior: none;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 11%, rgba(164, 126, 235, 0.34), transparent 29%),
    radial-gradient(circle at 87% 68%, rgba(65, 108, 184, 0.27), transparent 35%),
    radial-gradient(circle at 48% 93%, rgba(115, 58, 120, 0.18), transparent 31%),
    linear-gradient(165deg, #211e4a 0%, #111632 46%, #090b1c 100%);
  box-shadow: 0 0 110px rgba(41, 31, 99, 0.52), inset 0 0 80px rgba(8, 6, 28, 0.38);
}

.sky, .story-viewport {
  position: absolute;
  inset: 0;
}

.sky { overflow: hidden; pointer-events: none; }
.sky::before,
.sky::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
}
.sky::before {
  opacity: 0.42;
  background-image:
    radial-gradient(circle at 11% 19%, rgba(255,255,255,0.88) 0 1px, transparent 1.6px),
    radial-gradient(circle at 77% 31%, rgba(255,226,166,0.78) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 72%, rgba(193,207,255,0.72) 0 1px, transparent 1.4px);
  background-size: 103px 127px, 137px 109px, 149px 163px;
  animation: starFieldDrift 28s linear infinite;
}
.sky::after {
  background: radial-gradient(ellipse at center, transparent 42%, rgba(4,4,17,0.36) 100%);
}

.nebula {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(38px);
  mix-blend-mode: screen;
  opacity: 0.27;
  animation: nebulaBreathe 11s ease-in-out infinite alternate;
}
.nebula--violet { left: -22%; top: 9%; width: 82%; height: 28%; background: #805ec6; transform: rotate(-16deg); }
.nebula--blue { right: -27%; top: 43%; width: 92%; height: 30%; background: #315f9b; transform: rotate(14deg); animation-delay: -4s; }
.nebula--rose { left: 12%; bottom: -9%; width: 66%; height: 24%; background: #874878; animation-delay: -7s; }

.milky-way {
  z-index: 1;
  position: absolute;
  left: -25%;
  top: 35%;
  width: 150%;
  height: 26%;
  opacity: 0.32;
  transform: rotate(-13deg);
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.15), transparent 58%),
    linear-gradient(180deg, transparent, rgba(188, 184, 255, 0.28), rgba(255, 229, 184, 0.13), transparent);
  filter: blur(18px);
}

.star {
  z-index: 2;
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #fff9dc;
  opacity: var(--opacity);
  animation: twinkle var(--duration) ease-in-out infinite alternate;
  animation-delay: var(--delay);
}

.meteor-field { position: absolute; z-index: 2; inset: 0; }
.meteor-field i {
  position: absolute;
  width: 92px;
  height: 1px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(213,220,255,0.72), #fff7d9);
  box-shadow: 12px 0 12px rgba(219,212,255,0.35);
  transform: rotate(-28deg);
  animation: meteorGlide 9s ease-in infinite;
}
.meteor-field i:nth-child(1) { left: 73%; top: 17%; animation-delay: 0.8s; }
.meteor-field i:nth-child(2) { left: 22%; top: 32%; animation-delay: 5.2s; animation-duration: 12s; }
.meteor-field i:nth-child(3) { left: 58%; top: 48%; animation-delay: 8.6s; animation-duration: 14s; }
.meteor-field i:nth-child(4) { left: 82%; top: 70%; animation-delay: 3.4s; animation-duration: 16s; }
.meteor-field i:nth-child(5) { left: 36%; top: 83%; animation-delay: 11.5s; animation-duration: 15s; }

.cloud {
  position: absolute;
  width: 240px;
  height: 80px;
  border-radius: 50%;
  background: rgba(167, 168, 218, 0.09);
  filter: blur(13px);
}

.cloud--one { left: -120px; top: 27%; animation: cloudFloat 15s ease-in-out infinite alternate; }
.cloud--two { right: -150px; bottom: 18%; animation: cloudFloat 19s ease-in-out infinite alternate-reverse; }

.story-header {
  position: absolute;
  z-index: 20;
  top: var(--safe-top);
  left: 20px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
}

.qixi-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: ui-serif, "Songti SC", serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(255, 250, 241, 0.75);
}

.qixi-mark__moon { color: var(--gold); font-size: 20px; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 50%;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(77,66,123,0.13));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(3,3,18,0.2);
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.icon-button:hover:not(:disabled), .icon-button:focus-visible:not(:disabled) { border-color: rgba(255,222,157,0.4); transform: translateX(-2px); outline: none; }
.icon-button:disabled { opacity: 0.26; cursor: default; }

.audio-toggle {
  width: 31px;
  height: 31px;
  color: rgba(255, 238, 190, 0.92);
  font-family: ui-serif, "Songti SC", serif;
  font-size: 16px;
}
.audio-toggle:hover:not(:disabled),
.audio-toggle:focus-visible:not(:disabled) { transform: translateY(-1px); }
.audio-toggle span { display: block; transform: translateY(-1px); }
.audio-toggle.is-muted {
  color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(3,3,18,0.14);
}
.audio-toggle.is-muted span { text-decoration: line-through; text-decoration-thickness: 1px; }

.music-toggle { font-size: 17px; }

.bridge-progress {
  position: absolute;
  z-index: 20;
  top: calc(var(--safe-top) + 47px);
  left: 26px;
  right: 26px;
  height: 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
}

.bridge-progress__line {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 11px;
  height: 1px;
  background: rgba(255,255,255,0.15);
}

.bridge-progress__line i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--gold));
  box-shadow: 0 0 10px var(--violet);
  transition: width 0.8s ease;
}

.progress-star {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: rgba(255,255,255,0.24);
  text-shadow: none;
  transition: color 0.5s ease, transform 0.5s ease, text-shadow 0.5s ease;
}

.progress-star.is-lit {
  color: var(--gold);
  transform: scale(1.25) rotate(18deg);
  text-shadow: 0 0 12px var(--gold), 0 0 24px var(--violet);
}

.story-viewport { z-index: 2; }

.story-track {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 1.08s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

.story-track.is-switching { pointer-events: none; }

.scene {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 112px 28px calc(var(--safe-bottom) + 86px);
  opacity: 0.3;
  transform: translate3d(0,1.2%,0) scale(0.985);
  transition:
    opacity 0.82s cubic-bezier(.22,1,.36,1),
    transform 0.95s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.scene.is-before { transform: translate3d(0,-1.2%,0) scale(0.985); }
.scene.is-after { transform: translate3d(0,1.2%,0) scale(0.985); }
.scene.is-active { opacity: 1; transform: translate3d(0,0,0) scale(1); }

.scene::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7% 3% 9%;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,0.025), transparent 42%, rgba(166,145,232,0.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
  pointer-events: none;
  opacity: 0.35;
  transform: scale(0.985);
  transition: opacity 0.9s ease, transform 1.05s cubic-bezier(.22,1,.36,1);
}

.scene.is-active::before { opacity: 1; transform: scale(1); }

.scene::after {
  content: "";
  position: absolute;
  inset: auto 10% 7% 10%;
  height: 1px;
  opacity: 0.2;
  background: linear-gradient(90deg, transparent, #fff, transparent);
}

.scene-copy {
  position: relative;
  z-index: 3;
  max-width: 430px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s ease 0.28s, transform 0.75s ease 0.28s;
}

.scene.is-active .scene-copy { opacity: 1; transform: translateY(0); }

.scene-copy--hero { padding-top: clamp(48px, 9vh, 90px); }

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
}

h1, h2 {
  margin: 0 0 18px;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

h1 { font-size: clamp(34px, 9vw, 48px); line-height: 1.28; }
h2 { font-size: clamp(29px, 7vw, 40px); line-height: 1.25; }

.scene-copy > p:not(.eyebrow):not(.scene-note):not(.bubble-message):not(.interaction-guide) {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: clamp(14px, 3.8vw, 17px);
  line-height: 1.9;
}

.scene-note {
  margin: 18px 0 0;
  color: rgba(255, 241, 205, 0.88);
  font-family: ui-serif, "Songti SC", serif;
  font-size: 15px;
  line-height: 1.8;
}

blockquote {
  position: relative;
  margin: 22px 0;
  padding: 12px 0 12px 18px;
  border-left: 1px solid rgba(255, 217, 142, 0.65);
  color: #fff6e5;
  font-family: ui-serif, "Songti SC", serif;
  font-size: clamp(17px, 4.5vw, 21px);
  line-height: 1.75;
}

.chapter-number {
  position: absolute;
  z-index: 0;
  right: 20px;
  top: 94px;
  color: rgba(255,255,255,0.035);
  font-family: Georgia, serif;
  font-size: 110px;
  line-height: 1;
}

.wish-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.wish-list button {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  color: rgba(255,255,255,0.84);
  background: linear-gradient(180deg, rgba(151,133,202,0.13), rgba(255,255,255,0.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), 0 5px 13px rgba(5,4,22,0.16);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.wish-list button:hover, .wish-list button:focus-visible { transform: translateY(-2px); border-color: rgba(255,218,145,0.38); background: linear-gradient(180deg, rgba(177,151,226,0.2), rgba(255,218,145,0.06)); outline: none; }
.wish-list button:active { transform: translateY(1px) scale(0.985); }

.drag-target {
  position: absolute;
  z-index: 5;
  right: 8%;
  bottom: 9%;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.scene:nth-child(odd) .drag-target:not(.drag-target--intro) { right: auto; left: 8%; }
.drag-target--intro { right: 9%; bottom: 23%; }

.target-halo {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 217, 142, 0.38);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(255, 217, 142, 0.2), inset 0 0 22px rgba(185, 168, 255, 0.13);
  animation: halo 1.8s ease-in-out infinite;
}

.target-star {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 28px;
  text-shadow: 0 0 14px var(--gold), 0 0 28px var(--violet);
  animation: spinStar 7s linear infinite;
}

.drag-target small {
  position: absolute;
  top: 78px;
  left: 50%;
  width: 110px;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.55);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.drag-target.is-reached .target-star { animation: burstStar 0.7s ease forwards; }

.drag-hint {
  position: absolute;
  z-index: 4;
  left: 28px;
  bottom: calc(var(--safe-bottom) + 18px);
  margin: 0;
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  letter-spacing: 0.05em;
  animation: hintPulse 2.2s ease-in-out infinite;
}
.drag-hint span { color: var(--gold); }

.puppy {
  position: absolute;
  z-index: 30;
  left: 0;
  top: 0;
  width: 118px;
  height: 128px;
  padding: 0;
  border: 0;
  background: transparent;
  touch-action: none;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 12px 13px rgba(0,0,0,0.22));
  transition: opacity 0.35s ease;
}

.puppy.is-hidden { opacity: 0; pointer-events: none; }
.puppy-frame { --pet-face: 1; display: block; width: 100%; height: 100%; object-fit: contain; transform: scaleX(var(--pet-face)); transform-origin: center bottom; transition: transform 0.18s ease, opacity 0.12s ease; }
.puppy.is-walking .puppy-frame { animation: petFollowBob 0.28s ease-in-out infinite alternate; }
.puppy.is-celebrating .puppy-frame { animation: petCelebrate 0.66s cubic-bezier(.2,.9,.3,1.15); }
.puppy.is-hugging .puppy-frame { animation: petHugReach 1.15s cubic-bezier(.2,.9,.3,1.1) both; }
.puppy.is-facing-left .puppy-frame { --pet-face: -1; }

.puppy-reaction {
  position: absolute;
  left: 50%;
  top: -17px;
  min-width: 76px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 223, 160, 0.45);
  border-radius: 999px;
  color: #503047;
  background: rgba(255, 248, 222, 0.94);
  box-shadow: 0 7px 22px rgba(5, 5, 22, 0.24);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.8);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(.2,.9,.3,1.2);
}
.puppy.is-reacting .puppy-reaction { opacity: 1; transform: translate(-50%, 0) scale(1); }

.leash-layer {
  position: absolute;
  z-index: 29;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.leash-layer.is-hidden { opacity: 0; }
.leash-path { fill: none; stroke: #dfe3ee; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.leash-path--shadow { stroke: rgba(3, 4, 14, 0.5); stroke-width: 5.5; stroke-dasharray: none; }

.leash-handle {
  position: absolute;
  z-index: 31;
  left: 0;
  top: 0;
  width: 54px;
  height: 62px;
  padding: 0;
  border: 0;
  color: rgba(255,255,255,0.68);
  background: transparent;
  touch-action: none;
  user-select: none;
  cursor: grab;
  transition: opacity 0.35s ease, transform 0.2s ease;
}
.leash-handle__ring {
  position: absolute;
  left: 50%;
  top: 1px;
  width: 37px;
  height: 37px;
  border: 4px solid #d9dde8;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(59, 48, 77, 0.6), inset 0 0 9px rgba(255,255,255,0.65), 0 7px 18px rgba(0,0,0,0.24);
  transform: translateX(-50%);
}
.leash-handle__ring::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 8px; height: 13px; border-radius: 4px; background: #c6cad5; transform: translateX(-50%); }
.leash-handle small { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px; letter-spacing: 0.08em; }
.leash-handle.is-dragging { cursor: grabbing; transition: none; transform: scale(1.12) rotate(4deg); }
.leash-handle.is-hidden { opacity: 0; pointer-events: none; transform: scale(0.72); }

.scene-art { position: absolute; inset: 0; pointer-events: none; }
.tiny-magpie { position: absolute; color: rgba(229, 224, 255, 0.55); font-size: 44px; transform: rotate(-12deg); }
.tiny-magpie--one { right: 11%; top: 20%; animation: birdFloat 7s ease-in-out infinite; }
.tiny-magpie--two { right: 27%; top: 25%; font-size: 28px; animation: birdFloat 8s ease-in-out infinite reverse; }
.shooting-star { position: absolute; top: 28%; left: 12%; width: 100px; height: 1px; transform: rotate(-24deg); background: linear-gradient(90deg, transparent, #fff); animation: shoot 5s ease-in infinite; }

.orbit-art { position: absolute; inset: 15% -20% auto auto; width: 280px; height: 280px; opacity: 0.32; }
.orbit { position: absolute; inset: 0; border: 1px solid rgba(196,187,255,0.4); border-radius: 50%; transform: rotate(35deg) scaleY(0.45); }
.orbit--two { inset: 45px; border-color: rgba(255,217,142,0.36); transform: rotate(-30deg) scaleY(0.55); }
.orbit-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: orbitFloat 4s ease-in-out infinite alternate; }
.orbit-dot--one { top: 26%; left: 17%; }
.orbit-dot--two { right: 25%; bottom: 27%; animation-delay: -2s; }

.future-bubbles {
  position: relative;
  min-height: 172px;
  margin: 10px 0 4px;
}

.interaction-guide {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 7px 0 1px;
  padding: 6px 11px 6px 9px;
  border: 1px solid rgba(255, 224, 160, 0.2);
  border-radius: 999px;
  color: rgba(255, 242, 210, 0.88);
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(111,91,166,0.09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 5px 14px rgba(6,5,24,0.18);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.03em;
}
.interaction-guide span {
  display: inline-block;
  color: var(--gold);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.28));
  animation: tapGuide 1.25s cubic-bezier(.35,.05,.3,1) infinite;
}
.scene-copy > .interaction-guide--compact {
  gap: 4px;
  margin: 8px 0 0;
  padding: 3px 7px 3px 6px;
  border-color: rgba(255,224,160,0.1);
  color: rgba(255,242,210,0.48);
  background: rgba(255,255,255,0.025);
  box-shadow: none;
  font-size: 9px;
  letter-spacing: 0;
}
.scene-copy > .interaction-guide--compact span { opacity: 0.62; transform: scale(0.84); }

.future-bubbles button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  color: rgba(255,255,255,0.82);
  background:
    radial-gradient(circle at 31% 23%, rgba(255,255,255,0.46) 0 7%, rgba(230,221,255,0.18) 18%, transparent 37%),
    radial-gradient(circle at 34% 29%, #8b7bbb 0%, #61548e 46%, #30294f 78%, #211c3c 100%);
  box-shadow:
    inset 8px 8px 13px rgba(255,255,255,0.1),
    inset -12px -14px 22px rgba(12,9,37,0.56),
    inset 0 -3px 2px rgba(13,10,42,0.42),
    0 9px 0 rgba(19,15,50,0.52),
    0 15px 25px rgba(4,3,19,0.38),
    0 0 24px rgba(185,168,255,0.12);
  font-size: 11px;
  cursor: pointer;
  animation: bubbleFloat 4s ease-in-out infinite alternate;
  transform-style: preserve-3d;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.future-bubbles button::before {
  content: "";
  position: absolute;
  left: 20%;
  top: 12%;
  width: 43%;
  height: 23%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.31), rgba(255,255,255,0));
  transform: rotate(-23deg) translateZ(2px);
  pointer-events: none;
}
.future-bubbles button:hover,
.future-bubbles button:focus-visible {
  animation-play-state: paused;
  border-color: rgba(255,230,174,0.62);
  color: #fff6dc;
  filter: brightness(1.08);
  transform: translateY(-5px) scale(1.045);
  outline: none;
}
.future-bubbles button:active {
  animation-play-state: paused;
  transform: translateY(4px) scale(0.97);
  box-shadow:
    inset 8px 8px 14px rgba(255,255,255,0.08),
    inset -9px -11px 18px rgba(12,9,37,0.62),
    0 3px 0 rgba(19,15,50,0.48),
    0 7px 13px rgba(4,3,19,0.32);
}
.future-bubbles button:nth-child(1) { left: 0; top: 18px; }
.future-bubbles button:nth-child(2) { left: 25%; top: 76px; width: 64px; height: 64px; animation-delay: -1s; }
.future-bubbles button:nth-child(3) { left: 48%; top: 5px; width: 78px; height: 78px; animation-delay: -2s; }
.future-bubbles button:nth-child(4) { right: 0; top: 72px; width: 68px; height: 68px; animation-delay: -3s; }
.future-bubbles button.is-selected {
  border-color: var(--gold);
  color: #ffe5a7;
  box-shadow:
    inset 7px 7px 12px rgba(255,255,255,0.11),
    inset -12px -14px 22px rgba(12,9,37,0.5),
    0 8px 0 rgba(69,47,49,0.5),
    0 13px 24px rgba(4,3,19,0.36),
    0 0 28px rgba(255,217,142,0.34);
}

.bubble-message {
  min-height: 40px;
  margin: 0;
  color: rgba(255, 243, 211, 0.85);
  font-family: ui-serif, "Songti SC", serif;
  font-size: 13px;
  line-height: 1.6;
  transition: opacity 0.2s ease;
}

.badge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 11px 0 18px;
}
.badge-grid button {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  color: rgba(255,255,255,0.75);
  background: linear-gradient(180deg, rgba(142,126,191,0.24), rgba(65,54,100,0.3));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -4px 0 rgba(25,19,58,0.46),
    0 7px 0 rgba(17,13,43,0.48),
    0 11px 18px rgba(4,3,20,0.24);
  cursor: pointer;
  transform: translateY(0);
  transform-style: preserve-3d;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.badge-grid button::before {
  content: "";
  position: absolute;
  inset: 0 0 52%;
  border-radius: 13px 13px 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.13), transparent);
  pointer-events: none;
}
.badge-grid button:hover,
.badge-grid button:focus-visible {
  border-color: rgba(255,225,165,0.42);
  color: rgba(255,250,235,0.95);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -4px 0 rgba(25,19,58,0.44),
    0 10px 0 rgba(17,13,43,0.46),
    0 15px 24px rgba(4,3,20,0.28);
  outline: none;
}
.badge-grid button:active {
  transform: translateY(5px) scale(0.985);
  box-shadow:
    inset 0 2px 5px rgba(18,13,47,0.34),
    inset 0 -2px 0 rgba(25,19,58,0.35),
    0 2px 0 rgba(17,13,43,0.5),
    0 5px 10px rgba(4,3,20,0.2);
}
.badge-grid button i { color: var(--gold); font-family: ui-monospace, monospace; font-size: 11px; }
.badge-grid button span { font-size: 12px; }
.badge-grid button.is-earned {
  animation: badgeEarn 0.55s ease;
  border-color: rgba(255,217,142,0.55);
  color: #fff1c9;
  background: linear-gradient(180deg, rgba(255,223,158,0.22), rgba(125,91,73,0.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    inset 0 -4px 0 rgba(76,47,50,0.43),
    0 7px 0 rgba(50,31,52,0.47),
    0 12px 21px rgba(4,3,20,0.28),
    0 0 19px rgba(255,217,142,0.2);
}
.badge-grid__wide { grid-column: 1 / -1; }

.scene--long { padding: 0; }
.road-sky { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 18%, rgba(255,222,150,0.18), transparent 22%), linear-gradient(180deg, #171b3e 0%, #272650 51%, #201d38 52%, #0d0e1b 100%); }
.road-moon { position: absolute; left: 50%; top: 15%; width: 62px; height: 62px; border-radius: 50%; background: #ffe7ad; box-shadow: 0 0 30px rgba(255,231,173,0.38), 0 0 90px rgba(255,218,148,0.17); transform: translateX(-50%); }
.road-horizon { position: absolute; left: -10%; right: -10%; top: 51%; height: 16%; background: linear-gradient(180deg, rgba(29,35,58,0.9), #111320); clip-path: polygon(0 78%, 9% 45%, 17% 63%, 28% 25%, 38% 68%, 50% 20%, 62% 64%, 74% 34%, 86% 66%, 100% 39%, 100% 100%, 0 100%); }
.road-path { position: absolute; z-index: 1; left: 7%; right: 7%; bottom: -2%; height: 51%; background: linear-gradient(90deg, rgba(10,10,23,0.8), rgba(69,61,83,0.92) 45%, rgba(86,72,86,0.96) 50%, rgba(69,61,83,0.92) 55%, rgba(10,10,23,0.8)); clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); }
.road-path::after { content: ""; position: absolute; left: 49.6%; top: 5%; width: 1px; height: 85%; background: repeating-linear-gradient(180deg, rgba(255,229,173,0.8) 0 8px, transparent 8px 18px); transform-origin: top; transform: perspective(120px) rotateX(14deg); }
.road-light { position: absolute; z-index: 2; width: 4px; height: 4px; border-radius: 50%; background: #ffe2a2; box-shadow: 0 0 10px #ffe2a2; }
.road-light--one { left: 34%; top: 59%; }
.road-light--two { right: 30%; top: 68%; }
.road-light--three { left: 22%; top: 80%; }
.walk-pair { position: absolute; z-index: 4; left: 50%; bottom: -2%; width: min(88%, 460px); aspect-ratio: 1; opacity: 0; transform: translateX(-50%) scale(1.04); transform-origin: center bottom; filter: drop-shadow(0 18px 18px rgba(0,0,0,0.28)); }
.walk-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.walk-frame.is-active { opacity: 1; }
.walk-frame:nth-child(1) { transform: translateX(-4%); }
.walk-frame:nth-child(2) { transform: translateX(4%); }
.walk-frame:nth-child(3) { transform: translateX(-3.2%); }
.walk-frame:nth-child(4) { transform: translateX(4.6%); }
.walk-frame:nth-child(5) { transform: translateX(-4.3%); }
.walk-frame:nth-child(6) { transform: translateX(3.8%); }
.walk-frame:nth-child(7) { transform: translateX(-3.3%); }
.walk-frame:nth-child(8) { transform: translateX(4.5%); }
.scene--long.is-active .walk-pair { animation: walkIntoDistance 7.4s cubic-bezier(.32,.03,.45,1) forwards; }
.drag-target--road { left: auto !important; right: 7% !important; top: 23%; bottom: auto; opacity: 0; transform: none; pointer-events: none; }
.scene--long.is-active .drag-target--road { animation: roadTargetReveal 0.8s ease 6.1s forwards; pointer-events: auto; }

.scene--final { padding-bottom: var(--safe-bottom); }
.final-glow { position: absolute; left: 50%; top: 36%; width: 280px; height: 280px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,232,180,0.24), rgba(185,168,255,0.08) 45%, transparent 70%); opacity: 0; transition: opacity 1s ease 0.3s; }
.scene--final.is-active .final-glow { opacity: 1; }

.hug-scene { position: absolute; z-index: 3; top: 7%; left: 50%; width: min(86%, 400px); height: min(48vh, 420px); transform: translateX(-50%); }
.final-hug-frames { position: absolute; inset: 0; opacity: 0; transform: translateY(18px) scale(0.96); filter: drop-shadow(0 18px 24px rgba(0,0,0,0.22)); }
.scene--final.is-active .final-hug-frames { animation: finalHugAppear 0.65s cubic-bezier(.2,.8,.2,1) 0.15s forwards; }
.hug-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.16s ease; }
.hug-frame.is-active { opacity: 1; }
.hug-frame:last-child.is-active { animation: settledHug 2.2s ease-in-out infinite alternate; }
.floating-hearts { position: absolute; z-index: 5; top: 45px; left: 50%; display: flex; gap: 54px; transform: translateX(-50%); color: var(--rose); opacity: 0; }
.scene--final.is-active .floating-hearts { animation: heartsAppear 1.5s ease 1.05s forwards; }
.floating-hearts span:nth-child(2) { color: var(--gold); transform: translateY(-25px); }

.final-celebration { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.finale-aurora {
  position: absolute;
  inset: -12% -30% 30%;
  opacity: 0;
  filter: blur(30px);
  background:
    radial-gradient(ellipse at 22% 42%, rgba(255,151,186,0.15), transparent 38%),
    radial-gradient(ellipse at 78% 25%, rgba(163,143,255,0.17), transparent 42%),
    radial-gradient(ellipse at 50% 50%, rgba(255,221,151,0.1), transparent 48%);
  transform: translateY(16px) scale(0.94);
}
.scene--final.is-active .finale-aurora { animation: finaleAurora 6.8s ease-in-out 0.2s infinite alternate; }
.firework {
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  color: #ffe0a0;
  opacity: 0;
  --radius: -70px;
  --burst-delay: 0.35s;
  --burst-scale: 1;
  transform: scale(var(--burst-scale));
  filter: drop-shadow(0 0 7px currentColor);
  transition: opacity 0.4s ease;
}
.scene--final.is-active .firework { opacity: 1; }
.firework::before {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 2px;
  height: 78px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(to top, transparent, currentColor 55%, #fff 96%);
  box-shadow: 0 0 8px currentColor;
}
.scene--final.is-active .firework::before { animation: fireworkTrail 3.65s var(--burst-delay) ease-out infinite; }
.firework span {
  position: absolute;
  left: -1.5px;
  top: -7px;
  width: 3px;
  height: 14px;
  border-radius: 999px;
  opacity: 0;
  transform-origin: 50% 7px;
  background: linear-gradient(to top, transparent 0 18%, currentColor 45%, #fff7df 100%);
  box-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
}
.firework span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px currentColor;
  transform: translateX(-50%);
}
.scene--final.is-active .firework span {
  animation: fireworkSpark 3.65s calc(var(--burst-delay) + var(--spark-delay)) cubic-bezier(.18,.74,.32,1) infinite;
}
.firework--one { left: 15%; top: 20%; --radius: -66px; --burst-delay: 0.25s; --burst-scale: 0.92; }
.firework--two { right: 14%; top: 17%; color: #ffb8d0; --radius: -72px; --burst-delay: 1.08s; }
.firework--three { right: 22%; top: 39%; color: #cfc3ff; --radius: -54px; --burst-delay: 2.05s; --burst-scale: 0.75; }
.firework--four { left: 27%; top: 37%; color: #9fdcff; --radius: -48px; --burst-delay: 2.68s; --burst-scale: 0.7; }
.firework--five { left: 50%; top: 12%; color: #ffe7a8; --radius: -58px; --burst-delay: 3.32s; --burst-scale: 0.82; }

.petal-shower { position: absolute; z-index: 5; inset: 0; overflow: hidden; }
.petal-shower span {
  position: absolute;
  left: var(--petal-left);
  top: -7%;
  width: 11px;
  height: 16px;
  border-radius: 75% 12% 75% 18%;
  opacity: 0;
  background: linear-gradient(145deg, #fff1ed, #e991aa 58%, #ad4c73);
  box-shadow: 0 0 7px rgba(255,185,205,0.32);
  transform: rotate(var(--petal-rotate)) scale(var(--petal-scale));
}
.scene--final.is-active .petal-shower span {
  animation: petalFall var(--petal-duration) var(--petal-delay) cubic-bezier(.3,.05,.62,.96) infinite;
}

.bouquet {
  position: absolute;
  z-index: 4;
  bottom: -8px;
  width: 174px;
  height: 232px;
  opacity: 0;
  filter: drop-shadow(0 18px 22px rgba(2,2,14,0.38));
  transform-origin: center bottom;
}
.bouquet--left { left: -54px; transform: rotate(14deg) translateY(42px); }
.bouquet--right { right: -54px; transform: rotate(-14deg) translateY(42px) scaleX(-1); }
.scene--final.is-active .bouquet--left { animation: bouquetRiseLeft 1.2s cubic-bezier(.16,1,.3,1) 0.62s forwards; }
.scene--final.is-active .bouquet--right { animation: bouquetRiseRight 1.2s cubic-bezier(.16,1,.3,1) 0.82s forwards; }
.bouquet::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 83px;
  bottom: 36px;
  width: 4px;
  height: 148px;
  border-radius: 999px;
  background: linear-gradient(#8da97b, #435c48);
  box-shadow: -34px 8px #59745c, 35px 12px #76906e, -18px -2px #6f8b65, 18px 4px #536e56, -49px 28px #4c674f, 49px 32px #79916d;
}
.bouquet::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 30px;
  bottom: 0;
  width: 116px;
  height: 116px;
  clip-path: polygon(4% 0, 96% 0, 69% 100%, 31% 100%);
  background:
    linear-gradient(105deg, transparent 0 47%, rgba(255,255,255,0.32) 48% 50%, transparent 51%),
    linear-gradient(145deg, rgba(255,241,218,0.97), rgba(213,171,197,0.94));
  border-radius: 12px 12px 24px 24px;
  box-shadow: inset 0 0 24px rgba(255,255,255,0.3), 0 8px 18px rgba(29,11,29,0.18);
}
.bouquet i {
  position: absolute;
  z-index: 1;
  width: 44px;
  height: 20px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #91ad78, #3f6753 72%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
  transform-origin: 100% 50%;
}
.bouquet i:nth-child(1) { left: 18px; top: 60px; transform: rotate(24deg); }
.bouquet i:nth-child(2) { left: 4px; top: 98px; transform: rotate(2deg) scale(0.9); }
.bouquet i:nth-child(3) { left: 37px; top: 125px; transform: rotate(43deg) scale(0.8); }
.bouquet i:nth-child(4) { right: 15px; top: 65px; transform: rotate(155deg); }
.bouquet i:nth-child(5) { right: 2px; top: 104px; transform: rotate(178deg) scale(0.9); }
.bouquet i:nth-child(6) { right: 34px; top: 132px; transform: rotate(138deg) scale(0.82); }
.bouquet span {
  position: absolute;
  z-index: 2;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff1b5 0 12%, #f2b5c6 14% 30%, transparent 32%),
    conic-gradient(from 12deg, #c8587c 0 9%, #f0a8bb 10% 20%, #a94369 21% 31%, #e88da7 32% 44%, #b34e70 45% 57%, #f3b4c3 58% 70%, #9f4164 71% 82%, #dc7896 83% 100%);
  box-shadow: 0 0 0 2px rgba(255,225,221,0.08), 0 5px 9px rgba(49,10,30,0.25), 0 0 10px rgba(255,180,203,0.2);
  --flower-scale: 1;
  transform: scale(var(--flower-scale));
  animation: flowerBreathe 3.8s ease-in-out infinite alternate;
}
.bouquet span:nth-of-type(1) { left: 17px; top: 55px; --flower-scale: 0.82; animation-delay: -1.2s; }
.bouquet span:nth-of-type(2) { left: 47px; top: 25px; --flower-scale: 1.02; animation-delay: -2.7s; }
.bouquet span:nth-of-type(3) { left: 81px; top: 12px; --flower-scale: 1.16; animation-delay: -0.8s; }
.bouquet span:nth-of-type(4) { right: 24px; top: 46px; --flower-scale: 0.92; animation-delay: -3.1s; }
.bouquet span:nth-of-type(5) { left: 54px; top: 64px; --flower-scale: 1.08; animation-delay: -1.9s; }
.bouquet span:nth-of-type(6) { right: 43px; top: 79px; --flower-scale: 0.78; animation-delay: -0.4s; }
.bouquet span:nth-of-type(7) { left: 28px; top: 91px; --flower-scale: 0.7; animation-delay: -2.2s; }
.bouquet span:nth-of-type(8) { left: 76px; top: 101px; --flower-scale: 0.72; animation-delay: -1.5s; }
.bouquet span:nth-of-type(9) { right: 20px; top: 109px; --flower-scale: 0.64; animation-delay: -3.4s; }

.memory-modal {
  position: absolute;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(74px, calc(var(--safe-top) + 54px)) 22px max(30px, var(--safe-bottom));
  opacity: 0;
  transition: opacity 0.22s ease;
}
.memory-modal[hidden] { display: none; }
.memory-modal.is-open { opacity: 1; }
.memory-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(4,4,18,0.78); backdrop-filter: blur(10px); cursor: pointer; }
.memory-card {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  max-height: 100%;
  margin: 0;
  overflow: hidden auto;
  border: 1px solid rgba(255,231,181,0.2);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(47,40,81,0.98), rgba(16,18,43,0.98));
  box-shadow: 0 24px 70px rgba(1,1,12,0.55), inset 0 1px 0 rgba(255,255,255,0.11);
  transform: translateY(18px) scale(0.96);
  transition: transform 0.28s cubic-bezier(.2,.85,.3,1.1);
}
.memory-modal.is-open .memory-card { transform: translateY(0) scale(1); }
.memory-card__close {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50%;
  color: #fff8e7;
  background: rgba(11,11,31,0.58);
  backdrop-filter: blur(8px);
  font-size: 21px;
  cursor: pointer;
}
.memory-card__image-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #17172d; }
.memory-card__image-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 26%; background: linear-gradient(transparent, rgba(20,19,46,0.48)); pointer-events: none; }
.memory-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.memory-card figcaption { padding: 17px 20px 21px; }
.memory-card__eyebrow { margin: 0 0 5px; color: var(--gold); font-size: 9px; letter-spacing: 0.16em; }
.memory-card h3 { margin: 0 0 7px; color: #fff6df; font-family: ui-serif, "Songti SC", serif; font-size: 22px; }
.memory-card figcaption > p:last-child { margin: 0; color: rgba(255,250,241,0.68); font-size: 12px; line-height: 1.7; }

.scene-copy--final { position: absolute; z-index: 6; left: 28px; right: 28px; top: auto; bottom: calc(var(--safe-bottom) + 64px); text-align: center; }
.final-greeting { margin: 0 !important; color: #fff3d3 !important; font-family: ui-serif, "Songti SC", serif; font-size: clamp(24px, 7vw, 34px) !important; font-weight: 600; line-height: 1.55 !important; text-shadow: 0 0 22px rgba(255,217,142,0.25); }
.final-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.replay-button { margin-top: 18px; padding: 10px 18px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.06); cursor: pointer; }
.final-actions .replay-button { margin-top: 0; }
.replay-button--icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 18px; }
.gift-reopen-button { border-color: rgba(255,222,151,0.34); color: #fff0bf; background: radial-gradient(circle at 38% 30%, rgba(255,255,255,0.2), rgba(193,140,226,0.16) 46%, rgba(255,204,118,0.08)); box-shadow: 0 0 18px rgba(255,216,137,0.12), inset 0 1px 0 rgba(255,255,255,0.18); animation: giftButtonPulse 2.8s ease-in-out infinite; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.gift-surprise {
  position: absolute;
  z-index: 110;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(72px, calc(var(--safe-top) + 54px)) 22px max(26px, var(--safe-bottom));
  opacity: 0;
  transition: opacity 0.26s ease;
}
.gift-surprise[hidden] { display: none; }
.gift-surprise.is-open { opacity: 1; }
.gift-surprise__backdrop { position: absolute; inset: 0; border: 0; background: radial-gradient(circle at 50% 36%, rgba(75,54,119,0.38), rgba(3,3,18,0.88) 64%); backdrop-filter: blur(12px) saturate(1.12); cursor: pointer; }
.gift-card {
  position: relative;
  z-index: 1;
  width: min(100%, 410px);
  max-height: 100%;
  overflow: hidden auto;
  padding: 34px 26px 27px;
  border: 1px solid rgba(255,229,172,0.28);
  border-radius: 30px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(255,220,154,0.16), transparent 38%),
    radial-gradient(circle at 8% 84%, rgba(190,135,218,0.15), transparent 42%),
    linear-gradient(156deg, rgba(50,42,82,0.98), rgba(14,16,41,0.98));
  box-shadow: 0 28px 90px rgba(0,0,14,0.7), 0 0 42px rgba(255,216,139,0.09), inset 0 1px 0 rgba(255,255,255,0.13);
  transform: translateY(28px) scale(0.9);
  transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}
.gift-surprise.is-open .gift-card { transform: translateY(0) scale(1); }
.gift-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(116deg, transparent 18%, rgba(255,255,255,0.055) 43%, transparent 58%); transform: translateX(-100%); animation: giftCardSheen 5.5s 1.1s ease-in-out infinite; }
.gift-card__close { position: absolute; z-index: 8; top: 13px; right: 13px; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; color: #fff4de; background: rgba(8,8,29,0.44); font-size: 21px; cursor: pointer; }
.gift-card__eyebrow { position: relative; z-index: 2; margin: 0 0 8px; color: #f8d893; font-size: 10px; letter-spacing: 0.18em; }
.gift-card__constellation { position: absolute; z-index: 0; inset: 15px 36px auto; height: 62px; opacity: 0.48; pointer-events: none; }
.gift-card__constellation::before { content: ""; position: absolute; left: 13%; right: 12%; top: 26px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,226,165,0.48) 14% 84%, transparent); transform: rotate(-4deg); }
.gift-card__constellation i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff2c7; box-shadow: 0 0 9px #f5d389; animation: twinkle 2.2s ease-in-out infinite alternate; }
.gift-card__constellation i:nth-child(1) { left: 8%; top: 31px; }
.gift-card__constellation i:nth-child(2) { left: 29%; top: 18px; animation-delay: -0.8s; }
.gift-card__constellation i:nth-child(3) { left: 50%; top: 28px; animation-delay: -1.4s; }
.gift-card__constellation i:nth-child(4) { left: 71%; top: 15px; animation-delay: -0.3s; }
.gift-card__constellation i:nth-child(5) { right: 7%; top: 25px; animation-delay: -1.1s; }

.gift-box { position: relative; z-index: 1; display: block; width: 210px; height: 184px; margin: 3px auto -2px; padding: 0; border: 0; color: inherit; background: none; cursor: pointer; perspective: 600px; -webkit-tap-highlight-color: transparent; }
.gift-box:focus-visible { outline: 2px solid rgba(255,229,168,0.86); outline-offset: 5px; border-radius: 24px; }
.gift-box__aura { position: absolute; left: 50%; bottom: 13px; width: 178px; height: 150px; border-radius: 50%; opacity: 0.38; background: radial-gradient(circle, rgba(255,245,194,0.68), rgba(255,195,139,0.14) 37%, transparent 70%); filter: blur(5px); transform: translateX(-50%) scale(0.84); animation: giftAura 2.6s ease-in-out infinite alternate; }
.gift-box__base { position: absolute; z-index: 3; left: 31px; bottom: 24px; width: 148px; height: 96px; overflow: hidden; border: 1px solid rgba(255,241,209,0.34); border-radius: 8px 8px 17px 17px; background: linear-gradient(125deg, #744387, #a75f92 47%, #643c81); box-shadow: inset 13px 0 20px rgba(255,255,255,0.1), inset -14px -10px 22px rgba(34,11,54,0.25), 0 18px 24px rgba(5,3,18,0.38); }
.gift-box__base::before { content: ""; position: absolute; inset: 0; opacity: 0.38; background-image: radial-gradient(circle, rgba(255,234,181,0.78) 0 1px, transparent 1.5px); background-size: 15px 15px; }
.gift-box__base::after { content: ""; position: absolute; left: 61px; top: 0; width: 27px; height: 100%; background: linear-gradient(90deg, #c9903b, #ffe184 48%, #b9752c); box-shadow: inset 0 0 6px rgba(255,255,255,0.35); }
.gift-box__base > i { position: absolute; z-index: 2; left: 0; right: 0; top: 17px; height: 1px; background: rgba(255,255,255,0.16); box-shadow: 0 3px 8px rgba(38,7,45,0.2); }
.gift-box__lid { position: absolute; z-index: 5; left: 21px; bottom: 112px; width: 168px; height: 36px; border: 1px solid rgba(255,241,209,0.4); border-radius: 12px 12px 7px 7px; background: linear-gradient(130deg, #8f4f95, #c2709a 48%, #724589); box-shadow: inset 0 5px 9px rgba(255,255,255,0.12), 0 7px 10px rgba(21,5,30,0.3); transform-origin: 88% 100%; }
.gift-box__lid::after { content: ""; position: absolute; left: 70px; top: -1px; width: 27px; height: 36px; background: linear-gradient(90deg, #c88938, #ffe29a 48%, #b8732c); }
.gift-box__bow { position: absolute; z-index: 3; top: -30px; width: 53px; height: 35px; border: 7px solid #e9b866; background: linear-gradient(145deg, rgba(255,238,187,0.28), rgba(143,84,32,0.1)); box-shadow: inset 0 0 8px rgba(255,245,210,0.3), 0 4px 9px rgba(44,16,41,0.2); }
.gift-box__bow--left { left: 35px; border-radius: 80% 20% 65% 35%; transform: rotate(20deg); }
.gift-box__bow--right { right: 34px; border-radius: 20% 80% 35% 65%; transform: rotate(-20deg); }
.gift-box__knot { position: absolute; z-index: 4; left: 72px; top: -22px; width: 25px; height: 25px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ffe7a6, #d39a47 72%); box-shadow: 0 3px 8px rgba(52,20,22,0.26); }
.gift-box__shadow { position: absolute; z-index: 1; left: 37px; bottom: 13px; width: 136px; height: 22px; border-radius: 50%; background: rgba(1,1,12,0.42); filter: blur(8px); }
.gift-box__sparkles { position: absolute; z-index: 6; inset: 15px 9px 18px; pointer-events: none; }
.gift-box__sparkles i { position: absolute; width: 5px; height: 5px; border-radius: 50%; opacity: 0; background: #fff0b4; box-shadow: 0 0 10px #ffd47e; }
.gift-box__sparkles i:nth-child(1) { left: 16%; top: 35%; --gift-x: -24px; --gift-y: -46px; }
.gift-box__sparkles i:nth-child(2) { left: 31%; top: 24%; --gift-x: -13px; --gift-y: -61px; animation-delay: 0.08s !important; }
.gift-box__sparkles i:nth-child(3) { left: 48%; top: 19%; --gift-x: 0; --gift-y: -72px; animation-delay: 0.15s !important; }
.gift-box__sparkles i:nth-child(4) { right: 32%; top: 25%; --gift-x: 13px; --gift-y: -60px; animation-delay: 0.22s !important; }
.gift-box__sparkles i:nth-child(5) { right: 16%; top: 38%; --gift-x: 25px; --gift-y: -45px; animation-delay: 0.29s !important; }
.gift-box__sparkles i:nth-child(6) { left: 49%; top: 44%; --gift-x: 3px; --gift-y: -45px; animation-delay: 0.36s !important; }
.gift-box.is-unwrapped .gift-box__lid { animation: giftBoxOpen 0.78s cubic-bezier(.17,.89,.31,1.25) forwards; }
.gift-box.is-unwrapped .gift-box__base { animation: giftBoxBounce 0.72s cubic-bezier(.2,.82,.25,1) both; }
.gift-box.is-unwrapped .gift-box__aura { animation: giftAuraReveal 1s ease-out forwards; }
.gift-box.is-unwrapped .gift-box__sparkles i { animation: giftSparkFly 1.15s ease-out forwards; }
.gift-card__prompt { position: relative; z-index: 3; margin: -2px 0 0; color: rgba(255,245,224,0.58); font-size: 11px; letter-spacing: 0.05em; transition: color 0.3s ease; }
.gift-box.is-unwrapped + .gift-card__prompt { color: rgba(255,229,174,0.78); }
.gift-secret { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 10px; margin: 17px auto 0; padding: 12px 12px 10px 17px; border: 1px solid rgba(255,224,164,0.19); border-radius: 18px; opacity: 0; text-align: left; background: linear-gradient(145deg, rgba(255,238,198,0.1), rgba(186,132,210,0.09)); transform: translateY(12px) scale(0.96); overflow: hidden; }
.gift-secret.is-visible { animation: giftSecretReveal 0.58s cubic-bezier(.16,1,.3,1) forwards; }
.gift-secret > span { position: absolute; left: 13px; top: 10px; color: rgba(255,195,212,0.8); font-size: 18px; }
.gift-secret__copy { min-width: 0; padding-left: 10px; }
.gift-secret p { margin: 0 0 6px; color: #fff1cd; font-family: ui-serif, "Songti SC", serif; font-size: 16px; line-height: 1.65; }
.gift-secret small { color: rgba(255,248,230,0.5); font-size: 10px; }
.gift-secret__illustration { display: block; width: 100%; max-height: 142px; object-fit: contain; opacity: 0; filter: drop-shadow(0 9px 12px rgba(4,2,15,0.34)); transform: translateY(10px) scale(0.9); }
.gift-secret.is-visible .gift-secret__illustration { animation: giftIllustrationAppear 0.68s 0.12s cubic-bezier(.16,1,.3,1) forwards; }

.toast {
  position: absolute;
  z-index: 60;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 18px);
  transform: translate(-50%, 20px);
  padding: 9px 15px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: #fff4d6;
  background: rgba(13,12,34,0.82);
  backdrop-filter: blur(12px);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.spark { position: absolute; z-index: 130; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); pointer-events: none; animation: sparkFly 0.8s ease-out forwards; }

@keyframes twinkle { to { opacity: 1; transform: scale(1.5); } }
@keyframes starFieldDrift { to { transform: translate3d(-18px, 24px, 0); } }
@keyframes nebulaBreathe { to { opacity: 0.39; filter: blur(46px); } }
@keyframes meteorGlide { 0%, 76% { opacity: 0; transform: translate(80px,-50px) rotate(-28deg); } 79% { opacity: 0.85; } 89%, 100% { opacity: 0; transform: translate(-250px,145px) rotate(-28deg); } }
@keyframes cloudFloat { to { transform: translateX(70px) scale(1.15); } }
@keyframes halo { 50% { transform: scale(1.12); opacity: 0.45; } }
@keyframes spinStar { to { transform: rotate(360deg); } }
@keyframes hintPulse { 50% { opacity: 0.45; transform: translateX(4px); } }
@keyframes petFollowBob { from { transform: translateY(0) rotate(-1deg) scaleX(var(--pet-face)); } to { transform: translateY(-5px) rotate(1.5deg) scaleX(var(--pet-face)); } }
@keyframes petCelebrate { 35% { transform: translateY(-18px) rotate(5deg) scale(1.06); } 70% { transform: translateY(0) rotate(-4deg); } }
@keyframes petHugReach { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(-12px) scale(1.08); } 75% { transform: translateY(-7px) scale(1.04); } 100% { transform: translateY(-10px) scale(1.07); } }
@keyframes burstStar { 45% { transform: scale(2.1) rotate(90deg); } 100% { transform: scale(0.8) rotate(160deg); opacity: 0.65; } }
@keyframes birdFloat { 50% { transform: translate(-22px, 12px) rotate(-5deg); } }
@keyframes shoot { 0%, 68% { opacity: 0; transform: translate(90px,-40px) rotate(-24deg); } 72% { opacity: 1; } 86%,100% { opacity: 0; transform: translate(-220px,90px) rotate(-24deg); } }
@keyframes orbitFloat { to { transform: translate(24px, -16px) scale(1.3); } }
@keyframes bubbleFloat { to { transform: translateY(-8px) scale(1.03); } }
@keyframes tapGuide { 0%, 100% { transform: translateY(0) scale(1); } 48% { transform: translateY(4px) scale(0.92); } 66% { transform: translateY(1px) scale(1.05); } }
@keyframes badgeEarn { 50% { transform: scale(1.06); } }
@keyframes walkIntoDistance { 0% { opacity: 0; transform: translateX(-50%) translateY(28px) scale(1.04); } 10% { opacity: 1; } 100% { opacity: 0.82; transform: translateX(-50%) translateY(-42vh) scale(0.25); } }
@keyframes roadTargetReveal { to { opacity: 1; } }
@keyframes finalHugAppear { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes settledHug { to { transform: translateY(-3px) scale(1.012); } }
@keyframes heartsAppear { 0% { opacity: 0; transform: translate(-50%,20px) scale(0.7); } 55% { opacity: 1; } 100% { opacity: 0.85; transform: translate(-50%,-14px) scale(1.1); } }
@keyframes finaleAurora { from { opacity: 0.25; transform: translateY(16px) scale(0.94); } to { opacity: 0.78; transform: translateY(-6px) scale(1.06); } }
@keyframes fireworkTrail {
  0%, 8% { opacity: 0; transform: translateY(92px) scaleY(0.28); }
  18% { opacity: 0.85; }
  31% { opacity: 0; transform: translateY(3px) scaleY(1); }
  100% { opacity: 0; transform: translateY(3px); }
}
@keyframes fireworkSpark {
  0%, 29% { opacity: 0; transform: rotate(var(--angle)) translateY(0) scaleY(0.12); }
  34% { opacity: 1; }
  65% { opacity: 0.78; transform: rotate(var(--angle)) translateY(var(--radius)) scaleY(0.72); }
  84%, 100% { opacity: 0; transform: rotate(var(--angle)) translateY(var(--radius)) scaleY(0.28); }
}
@keyframes petalFall {
  0% { opacity: 0; transform: translate3d(0,-8vh,0) rotate(var(--petal-rotate)) scale(var(--petal-scale)); }
  12% { opacity: 0.82; }
  58% { transform: translate3d(var(--petal-drift),54vh,0) rotate(calc(var(--petal-rotate) + 210deg)) scale(var(--petal-scale)); }
  100% { opacity: 0; transform: translate3d(var(--petal-drift-end),108vh,0) rotate(calc(var(--petal-rotate) + 520deg)) scale(var(--petal-scale)); }
}
@keyframes flowerBreathe { to { transform: translateY(-2px) rotate(2deg) scale(var(--flower-scale)); filter: brightness(1.08); } }
@keyframes bouquetRiseLeft { to { opacity: 0.9; transform: rotate(8deg) translateY(0); } }
@keyframes bouquetRiseRight { to { opacity: 0.9; transform: rotate(-8deg) translateY(0) scaleX(-1); } }
@keyframes sparkFly { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
@keyframes giftButtonPulse { 50% { transform: translateY(-2px) scale(1.05); box-shadow: 0 0 24px rgba(255,216,137,0.24), inset 0 1px 0 rgba(255,255,255,0.22); } }
@keyframes giftCardSheen { 0%, 72% { transform: translateX(-110%); } 88%, 100% { transform: translateX(110%); } }
@keyframes giftAura { to { opacity: 0.62; transform: translateX(-50%) scale(1.04); } }
@keyframes giftBoxOpen { 0% { transform: translate3d(0,0,0) rotate(0); } 42% { transform: translate3d(-3px,-13px,22px) rotate(-5deg); } 100% { transform: translate3d(29px,36px,16px) rotate(13deg); opacity: 0.88; } }
@keyframes giftBoxBounce { 0%, 100% { transform: translateY(0) scale(1); } 46% { transform: translateY(5px) scale(1.035,0.96); } 72% { transform: translateY(-3px) scale(0.985,1.02); } }
@keyframes giftAuraReveal { 0% { opacity: 0.3; transform: translateX(-50%) scale(0.8); } 55% { opacity: 0.95; } 100% { opacity: 0.5; transform: translateX(-50%) scale(1.42); } }
@keyframes giftSparkFly { 0% { opacity: 0; transform: translate(0,0) scale(0.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--gift-x),var(--gift-y)) scale(1.3) rotate(120deg); } }
@keyframes giftSecretReveal { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes giftIllustrationAppear { to { opacity: 1; transform: translateY(0) scale(1); } }

@media (min-width: 561px) {
  .story-shell { height: min(100svh, 900px); border-radius: 28px; }
}

@media (max-width: 560px) {
  .scene-copy--final { bottom: calc(var(--safe-bottom) + 126px); }
  .bouquet { bottom: -20px; transform-origin: center bottom; }
  .bouquet--left { left: -64px; }
  .bouquet--right { right: -64px; }
}

@media (max-height: 690px) {
  .scene { padding-top: 94px; }
  .scene-copy--hero { padding-top: 20px; }
  h1 { font-size: 32px; }
  h2 { font-size: 27px; margin-bottom: 10px; }
  .scene-copy > p:not(.eyebrow):not(.scene-note):not(.bubble-message):not(.interaction-guide) { margin-bottom: 11px; line-height: 1.65; font-size: 13px; }
  blockquote { margin: 12px 0; padding-top: 7px; padding-bottom: 7px; font-size: 16px; }
  .wish-list { gap: 6px; }
  .wish-list button { padding: 7px; }
  .future-bubbles { min-height: 135px; transform: scale(0.88); transform-origin: left top; margin-bottom: -12px; }
  .badge-grid { margin: 9px 0; gap: 6px; }
  .badge-grid button { min-height: 36px; }
  .scene-note { margin-top: 10px; font-size: 13px; }
  .hug-scene { top: 5%; height: 42vh; transform: translateX(-50%); }
  .scene-copy--final { top: auto; bottom: calc(var(--safe-bottom) + 112px); }
  .memory-modal { padding-top: 62px; }
  .memory-card { max-width: 350px; }
  .memory-card__image-wrap { aspect-ratio: 1.14 / 1; }
  .memory-card figcaption { padding: 12px 16px 15px; }
  .memory-card h3 { font-size: 19px; }
  .gift-surprise { padding-top: 62px; }
  .gift-card { max-width: 360px; padding: 24px 22px 20px; }
  .gift-box { height: 154px; margin: -4px auto -8px; transform: scale(0.86); }
  .gift-secret { grid-template-columns: minmax(0, 1fr) 84px; margin-top: 12px; padding-top: 10px; padding-bottom: 8px; }
  .gift-secret p { font-size: 15px; }
  .gift-secret__illustration { max-height: 126px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}