.paper-page {
  position: relative;
  width: min(1180px, 92vw);
  height: min(720px, 86vh);
  min-height: 520px;
  overflow: hidden;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(78, 54, 38, 0.08), transparent 12%, transparent 88%, rgba(78, 54, 38, 0.08)),
    radial-gradient(circle at 50% 45%, rgba(255, 238, 197, 0.88), rgba(238, 216, 177, 0.9) 64%, rgba(187, 151, 115, 0.72));
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

.paper-page::after,
.home-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(91, 67, 50, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 67, 50, 0.05) 1px, transparent 1px);
  background-size: 26px 26px, 34px 34px;
  mix-blend-mode: multiply;
}

.door-page {
  width: 100vw;
  height: 100vh;
  min-height: 540px;
  border-radius: 0;
  background: #302e38 url("../assets/bg/scene01-warm-doorway.png") center / cover no-repeat;
  box-shadow: none;
}

.door-page::after {
  z-index: 8;
  opacity: 0.18;
  background-image:
    repeating-linear-gradient(7deg, rgba(214, 227, 229, 0.055) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(96deg, rgba(5, 11, 23, 0.08) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 28% 42%, rgba(126, 153, 174, 0.1), transparent 43%),
    radial-gradient(ellipse at 74% 68%, rgba(4, 13, 27, 0.22), transparent 48%);
  background-size: auto;
  mix-blend-mode: soft-light;
}

.night-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 24, 34, 0.2), transparent 52%, rgba(63, 39, 25, 0.06));
}

.night-sky::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24%;
  height: 100%;
  background: radial-gradient(ellipse at 100% 55%, rgba(255, 220, 151, 0.12), transparent 64%);
  opacity: 0.66;
}

.night-sky::before,
.wall-night::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.56;
  background-image:
    radial-gradient(circle at 14% 21%, rgba(255,255,255,0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 18%, rgba(255,255,255,0.65) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 38%, rgba(255,255,255,0.52) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 34%, rgba(255,255,255,0.58) 0 1px, transparent 2px);
}

.story-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

#door-dialogue {
  position: absolute;
  z-index: 5;
  left: clamp(2rem, 9vw, 9rem);
  bottom: clamp(5rem, 12vh, 8.5rem);
  align-content: end;
  width: min(43rem, 72vw);
  min-height: 8rem;
  max-height: 9rem;
  overflow: hidden;
}

#enter-home {
  position: absolute;
  left: clamp(2rem, 9vw, 9rem);
  bottom: clamp(2.2rem, 5vh, 4rem);
  z-index: 6;
  margin: 0;
  padding: 0.35rem 0.08rem 0.42rem;
  border-bottom-color: rgba(255, 226, 173, 0.42);
  color: rgba(255, 239, 207, 0.9);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  pointer-events: auto;
  text-shadow: 0 2px 18px rgba(4, 10, 21, 0.7);
}

.door-page .dialogue .line {
  color: rgba(255, 242, 213, 0.95);
  text-shadow: 0 2px 16px rgba(7, 12, 20, 0.36);
}

.door-page .line .speaker {
  color: rgba(255, 228, 188, 0.68);
}

.door-page .line.emphasis {
  color: #fff0bf;
  text-shadow: 0 0 28px rgba(255, 210, 118, 0.58);
}

.footprints {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 2.2rem;
  opacity: 0.82;
}

.footprints span {
  width: 2.45rem;
  height: 3rem;
  background:
    radial-gradient(circle at 16% 24%, rgba(201, 173, 131, 0.68) 0 11%, transparent 13%),
    radial-gradient(circle at 39% 10%, rgba(201, 173, 131, 0.68) 0 11%, transparent 13%),
    radial-gradient(circle at 64% 10%, rgba(201, 173, 131, 0.68) 0 11%, transparent 13%),
    radial-gradient(circle at 86% 25%, rgba(201, 173, 131, 0.68) 0 11%, transparent 13%),
    radial-gradient(ellipse at 51% 68%, rgba(183, 149, 107, 0.72) 0 29%, transparent 31%);
  filter: blur(0.2px) drop-shadow(0 0.15rem 0.18rem rgba(28, 20, 19, 0.24));
  opacity: 0;
  transform: rotate(-16deg) translateY(0.6rem);
}

.footprints.big {
  left: 15%;
  bottom: 20%;
  transform: rotate(4deg);
}

.footprints.small {
  right: 28%;
  bottom: 20%;
  gap: 1.3rem;
  transform: rotate(184deg);
}

.footprints.small span {
  width: 1.25rem;
  height: 1.6rem;
}

.pet-peek {
  position: absolute;
  z-index: 3;
  width: clamp(8rem, 16vw, 13rem);
  height: clamp(12rem, 25vw, 20rem);
  opacity: 0;
  transform: translateY(1.4rem);
  background-repeat: no-repeat;
  background-size: 120% auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.32));
}

.kimi-peek {
  right: 2%;
  bottom: -3%;
  width: clamp(10rem, 17vw, 16rem);
  height: clamp(16rem, 31vw, 27rem);
  background-image: url("../assets/pets/kimi/kimi_sit_clean.png");
  background-size: contain;
  background-position: center bottom;
  animation: petPeek 1400ms ease 4700ms forwards;
}

.nemo-peek {
  right: 17%;
  bottom: -1%;
  width: clamp(5.5rem, 8vw, 7.8rem);
  height: clamp(10rem, 20vw, 17rem);
  background-image: url("../assets/pets/nemo/nemo_idle_sit_clean.png");
  background-size: contain;
  background-position: center bottom;
  animation: petPeek 1300ms ease 5700ms forwards;
}

.home-stage {
  position: relative;
  width: min(1240px, 100vw);
  height: min(760px, 100vh);
  min-height: 540px;
  overflow: hidden;
  background: #1c1b1b url("../assets/bg/birthday-room-m1.png") center center / cover no-repeat;
  transition: background-position 1800ms ease, filter 1200ms ease;
}

.room-backdrop {
  position: absolute;
  inset: 0;
}

.wall-night {
  display: none;
}

.floor {
  display: none;
}

.warm-lamp {
  display: none;
}

.scene-object {
  position: absolute;
  z-index: 5;
  display: block;
  transition: filter 450ms ease, transform 450ms ease, opacity 450ms ease;
}

.scene-object:hover,
.pet:hover {
  filter: drop-shadow(0 0 16px rgba(255, 218, 145, 0.38));
}

.home-stage.is-guided [data-action] {
  opacity: 1;
  filter: none;
  pointer-events: none;
}

.home-stage.is-guided [data-action].is-current-chapter {
  opacity: 1;
  filter: saturate(1) brightness(1) drop-shadow(0 0 15px rgba(255, 218, 145, 0.5));
  pointer-events: auto;
  animation: chapterAttention 4200ms ease-in-out infinite;
}

.home-stage::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 29% 28%, rgba(255, 211, 132, 0.09), transparent 16%),
    radial-gradient(circle at 75% 32%, rgba(154, 185, 222, 0.06), transparent 22%);
  animation: roomLightBreathe 7200ms ease-in-out infinite;
}

.window-object {
  right: 18%;
  top: 4%;
  width: 25%;
  height: 43%;
}

.window-frame {
  display: none;
}

.tiny-star {
  position: absolute;
  right: 20%;
  top: 23%;
  width: 1.25rem;
  height: 1.25rem;
  background: #ffe28f;
  clip-path: polygon(50% 0, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0 50%, 39% 37%);
  filter: drop-shadow(0 0 10px rgba(255, 223, 137, 0.86));
  animation: starBreathe 3800ms ease-in-out infinite;
}

.window-object::after {
  content: "";
  position: absolute;
  right: calc(20% - 1.05rem);
  top: calc(23% - 1.05rem);
  width: 3.35rem;
  height: 3.35rem;
  border: 1px solid rgba(255, 226, 151, 0);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.window-object.is-current-chapter .tiny-star {
  animation: starInvitation 2100ms ease-in-out infinite;
}

.window-object.is-current-chapter::after {
  animation: starHaloInvitation 2100ms ease-out infinite;
}

.photo-wall {
  left: 4%;
  top: 2%;
  width: 31%;
  height: 36%;
}

.photo-wall::before {
  content: "";
  position: absolute;
  inset: 3%;
  border: 1px solid transparent;
  border-radius: 4px;
  opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 224, 164, 0.2) 50%, transparent 65%);
  background-size: 220% 100%;
}

.photo-wall.is-current-chapter::before {
  opacity: 1;
  border-color: rgba(255, 221, 155, 0.24);
  box-shadow: 0 0 22px rgba(255, 205, 118, 0.2), inset 0 0 18px rgba(255, 228, 177, 0.08);
  animation: frameLightPass 4600ms ease-in-out infinite;
}

.photo-wall span {
  display: none;
}

.photo-wall span:nth-child(1) { left: 0; top: 1rem; width: 7.2rem; height: 5.2rem; transform: rotate(-3deg); }
.photo-wall span:nth-child(2) { left: 8rem; top: 0; width: 6.3rem; height: 7.6rem; transform: rotate(2deg); }
.photo-wall span:nth-child(3) { left: 15rem; top: 1.2rem; width: 6.5rem; height: 5rem; transform: rotate(4deg); }
.photo-wall span:nth-child(4) { left: 4.5rem; top: 7.3rem; width: 9.8rem; height: 5rem; transform: rotate(-1deg); }

.sofa {
  display: none;
}

.sofa::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1.8rem;
  height: 3.8rem;
  border-radius: 0 0 1.2rem 1.2rem;
  background: #506048;
}

.ball-object {
  left: 8%;
  bottom: 4%;
  width: clamp(5rem, 8vw, 7rem);
  aspect-ratio: 1;
  background: url("../assets/props/old-ball.png") center / contain no-repeat;
  filter: drop-shadow(0 0.7rem 0.75rem rgba(39, 23, 15, 0.28));
}

.ball-object::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 213, 135, 0.16), transparent 68%);
  box-shadow: 0 0 0 1px rgba(255, 223, 157, 0.2), 0 0 22px rgba(255, 208, 121, 0.22);
  opacity: 0;
}

.ball-object::after {
  display: none;
}

.ball-object.is-current-chapter {
  animation: ballInvitation 3200ms ease-in-out infinite !important;
}

.ball-object.is-current-chapter::before {
  opacity: 1;
  animation: ballHalo 3200ms ease-in-out infinite;
}

.ball-object span {
  display: none;
}

.cake-object {
  z-index: 7;
  right: 2.5%;
  bottom: -1%;
  width: clamp(11rem, 18vw, 16rem);
  height: clamp(15rem, 27vw, 24rem);
  filter: drop-shadow(0 1rem 1rem rgba(37, 21, 15, 0.3));
  transform-origin: 50% 92%;
  transition: right 1200ms cubic-bezier(.24,.76,.28,1), bottom 1200ms cubic-bezier(.24,.76,.28,1), transform 1200ms cubic-bezier(.24,.76,.28,1), filter 700ms ease;
}

.cake-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 1;
  background: url("../assets/props/cake-table.png") center / contain no-repeat;
  pointer-events: none;
}

.flame {
  position: absolute;
  z-index: 2;
  left: 49.2%;
  top: 6.4%;
  width: 0.75rem;
  height: 1.12rem;
  border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle at 48% 62%, #fff5c7 0 15%, #ffd36d 42%, #e98536 76%);
  filter: drop-shadow(0 0 0.55rem rgba(255, 195, 78, 0.92));
  transform: rotate(-45deg) scale(0);
  opacity: 0;
}

.candle-glow {
  position: absolute;
  z-index: 1;
  left: 28%;
  top: -7%;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 142, 0.52), rgba(255, 198, 91, 0.14) 45%, transparent 72%);
  opacity: 0;
  transform: scale(0.72);
}

.cake-lit .flame {
  animation: flameWake 1800ms ease forwards, candleFlicker 2200ms ease-in-out 1800ms infinite;
}

.cake-lit .candle-glow {
  animation: candleGlowWake 1800ms ease forwards, candleGlowBreathe 3000ms ease-in-out 1800ms infinite;
}

.cake-object.cake-presenting {
  z-index: 9;
  right: 30%;
  bottom: 6%;
  transform: scale(1.08);
  filter: drop-shadow(0 1rem 1.2rem rgba(28, 17, 12, 0.34));
}

.gift-object {
  z-index: 5;
  right: 5%;
  bottom: 32%;
  width: clamp(4.7rem, 7vw, 6.2rem);
  height: clamp(4.7rem, 7vw, 6.2rem);
  background: url("../assets/props/gift-box.png") center / contain no-repeat;
  filter: saturate(0.88) brightness(0.9) drop-shadow(0 0.6rem 0.7rem rgba(28, 17, 18, 0.26));
  opacity: 0.82;
}

.gift-object.is-ready {
  opacity: 1;
  filter: saturate(1) brightness(1) drop-shadow(0 0 18px rgba(255, 207, 110, 0.58));
  animation: softGlow 3600ms ease-in-out infinite;
}

.gift-box,
.gift-lid,
.gift-ribbon {
  display: none;
}

.pet {
  position: absolute;
  z-index: 6;
  display: block;
  transition: transform 600ms ease, filter 600ms ease;
  overflow: hidden;
  animation: petBreath 5200ms ease-in-out infinite;
}

.pet-kimi {
  left: 46%;
  bottom: 6%;
  width: clamp(14rem, 24vw, 20rem);
  height: clamp(13rem, 27vw, 22rem);
}

.pet-nemo {
  left: 64%;
  bottom: 8%;
  width: clamp(8rem, 13vw, 11rem);
  height: clamp(12rem, 20vw, 17rem);
  animation-duration: 3900ms;
}

.pet-art {
  position: absolute;
  inset: 0;
  display: block;
  background-repeat: no-repeat;
  filter: drop-shadow(0 14px 16px rgba(35, 23, 17, 0.28));
  transform-origin: 50% 85%;
}

.pet-kimi .pet-art {
  right: 12%;
  background-image: url("../assets/pets/kimi/kimi_idle_lie.png");
  background-size: auto 100%;
  background-position: left bottom;
}

.pet-nemo .pet-art {
  right: 16%;
  background-image: url("../assets/pets/nemo/nemo_idle_sit.png");
  background-size: auto 104%;
  background-position: left bottom;
}

.pet.is-current-chapter .pet-art {
  animation: petCurious 3600ms ease-in-out infinite;
}

.pet-kimi.is-speaking {
  transform: translateY(-0.2rem) rotate(-1deg);
}

.pet-nemo.is-speaking {
  transform: translateY(-0.35rem) translateX(0.12rem);
}

/* Scene 03/04 play as complete four-beat character chapters. */
.home-stage.pet-story-kimi .pet-kimi,
.home-stage.pet-story-nemo .pet-nemo {
  z-index: 9;
}

.home-stage.pet-story-kimi.pet-moment-1 .pet-kimi .pet-art {
  animation: kimiLeanIn 4200ms ease-in-out infinite;
}

.home-stage.pet-story-kimi.pet-moment-2 .ball-object {
  opacity: 1;
  filter: drop-shadow(0 0 18px rgba(255, 209, 121, 0.48));
  animation: ballMemoryNudge 4200ms ease-in-out infinite;
}

.home-stage.pet-story-kimi.pet-moment-3::after,
.home-stage.pet-story-nemo.pet-moment-2::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: 24%;
  height: 56%;
  pointer-events: none;
  background: radial-gradient(ellipse at left bottom, rgba(255, 210, 135, 0.2), transparent 68%);
  animation: doorwayWarmth 4200ms ease-in-out infinite;
}

.home-stage.pet-story-kimi.pet-moment-3 .pet-kimi .pet-art {
  animation: kimiSlowRise 5200ms ease-in-out infinite;
}

.home-stage.pet-story-kimi.pet-moment-4 .pet-kimi .pet-art {
  animation: kimiSettleClose 5200ms ease-in-out infinite;
}

.home-stage.pet-story-kimi.pet-moment-4 .pet-nemo,
.home-stage.pet-story-nemo.pet-moment-3 .pet-nemo {
  transform: translateX(-1.1rem) translateY(-0.2rem);
}

.home-stage.pet-story-nemo.pet-moment-1 .pet-nemo .pet-art {
  animation: nemoFollow 3500ms ease-in-out infinite;
}

.home-stage.pet-story-nemo.pet-moment-2 .pet-nemo .pet-art {
  animation: nemoDoorWatch 3600ms ease-in-out infinite;
}

.home-stage.pet-story-nemo.pet-moment-3 .pet-nemo .pet-art {
  animation: nemoLeanOnKimi 4400ms ease-in-out infinite;
}

.home-stage.pet-story-nemo.pet-moment-4 .pet-nemo .pet-art {
  animation: nemoQuickAside 3300ms ease-in-out infinite;
}

.home-stage.pet-story-nemo.pet-moment-4 .pet-kimi .pet-art {
  animation: kimiTinyReaction 4300ms ease-in-out infinite;
}

.home-dialogue {
  position: absolute;
  z-index: 12;
  left: 8%;
  bottom: 5%;
  width: min(660px, 66vw);
  min-height: 7.8rem;
  padding: 1.2rem 1.45rem;
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(244, 230, 197, 0.92), rgba(248, 238, 215, 0.84));
  box-shadow: 0 16px 34px rgba(32, 21, 18, 0.2), inset 0 0 0 1px rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
}

.home-dialogue .line {
  color: #3f332f;
  font-size: clamp(1.08rem, 1.65vw, 1.45rem);
  line-height: 1.68;
}

.home-dialogue:empty {
  pointer-events: none;
  opacity: 0;
}

.scene-overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1.2rem, 4vw, 4rem);
  background: rgba(12, 19, 31, 0.38);
  transition: opacity 800ms ease;
}

.scene-overlay .overlay-paper {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(900px, 88vw);
  min-height: 18rem;
  padding: clamp(1.6rem, 4vw, 4rem);
  border-radius: 6px;
  background: rgba(247, 233, 198, 0.9);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
}

.scene-overlay.cake-scene {
  z-index: 8;
  place-items: end start;
  padding: 0 0 7% 8%;
  background: linear-gradient(90deg, rgba(13, 17, 25, 0.14), rgba(13, 17, 25, 0.34) 52%, rgba(13, 17, 25, 0.54));
  pointer-events: none;
}

.scene-overlay.cake-scene .overlay-paper {
  width: min(560px, 43vw);
  min-height: 7.5rem;
  padding: 1.4rem 1.65rem;
  background: rgba(247, 236, 211, 0.9);
  box-shadow: 0 18px 44px rgba(32, 20, 16, 0.2);
}

.scene-overlay.cake-scene .dialogue {
  justify-items: start;
  width: 100%;
  min-height: 4.5rem;
  text-align: left;
}

.scene-overlay .dialogue {
  justify-items: center;
  text-align: center;
}

.memory-silhouette {
  position: absolute;
  left: 14%;
  bottom: 22%;
  width: 10rem;
  height: 5.8rem;
  height: 12rem;
  border-radius: 0;
  background: url("../assets/pets/kimi/kimi_young_running_silhouette.png") center / contain no-repeat;
  filter: sepia(0.34) saturate(1.18) drop-shadow(0 0 20px rgba(255, 198, 98, 0.42));
  opacity: 0;
}

.scene-overlay.ball-memory .overlay-paper {
  overflow: hidden;
}

.scene-overlay.ball-memory .dialogue {
  position: relative;
  z-index: 2;
}

.memory-portrait {
  position: absolute;
  z-index: 1;
  top: 0.8rem;
  right: clamp(1rem, 4vw, 3.4rem);
  width: clamp(8.5rem, 19vw, 14rem);
  height: clamp(5.8rem, 13vw, 9.5rem);
  background: url("../assets/pets/kimi/kimi_young_running_silhouette.png") center / contain no-repeat;
  filter: sepia(0.2) saturate(0.88) drop-shadow(0 8px 14px rgba(92, 57, 31, 0.2));
  opacity: 0;
  transform: translateX(0.8rem) scale(0.96);
  transition: opacity 900ms ease, transform 1100ms ease;
  pointer-events: none;
}

.memory-portrait.is-visible {
  opacity: 0.72;
  transform: translateX(0) scale(1);
}

.scene-overlay.ball-memory .dialogue .line {
  max-width: min(32rem, 68%);
}

.memory-ball {
  position: absolute;
  left: 68%;
  bottom: 25%;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #d59862;
  opacity: 0;
}

.photo-viewer {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(2.6rem, 8vw) 1fr minmax(2.6rem, 8vw);
  align-items: center;
  background: rgba(8, 15, 26, 0.72);
  backdrop-filter: blur(5px);
}

.photo-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.photo-card {
  width: min(820px, 76vw);
  height: min(640px, 76vh);
  border: 0.55rem solid rgba(234, 215, 181, 0.94);
  border-radius: 4px;
  background-color: rgba(23, 25, 27, 0.72);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255,255,255,0.18);
  transition: opacity 600ms ease, transform 600ms ease;
}

.photo-card.is-early {
  border-color: rgba(220, 195, 154, 0.96);
}

.photo-year {
  position: absolute;
  top: 10%;
  max-width: min(760px, 78vw);
  color: #f8e6bd;
  font-size: clamp(2.8rem, 8vw, 6.4rem);
  line-height: 1.28;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
}

.photo-year.is-final {
  top: 40%;
  font-size: clamp(1.35rem, 3.5vw, 2.8rem);
}

.photo-nav {
  z-index: 3;
  width: 3rem;
  height: 5rem;
  justify-self: center;
  color: rgba(255, 232, 187, 0.78);
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
}

.star-options {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.star-options button {
  color: #3e342e;
  font-size: clamp(1.08rem, 1.8vw, 1.42rem);
  line-height: 1.5;
  opacity: 0;
  animation: lineIn 900ms ease forwards;
}

.star-options button:nth-child(2) { animation-delay: 260ms; }
.star-options button:nth-child(3) { animation-delay: 520ms; }

.magic-mode .wall-night {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 221, 148, 0.25), transparent 17rem),
    radial-gradient(circle at 76% 18%, rgba(255, 247, 214, 0.24), transparent 12rem),
    linear-gradient(180deg, #071426, #182d4c 100%);
}

.magic-mode .photo-wall span {
  filter: drop-shadow(0 0 12px rgba(255, 214, 134, 0.5));
  opacity: 0.76;
}

.magic-specks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(255, 225, 146, 0.82) 0 2px, transparent 3px),
    radial-gradient(circle at 56% 20%, rgba(255, 245, 200, 0.62) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 42%, rgba(255, 225, 146, 0.72) 0 2px, transparent 3px),
    radial-gradient(circle at 37% 47%, rgba(255, 245, 200, 0.7) 0 1px, transparent 2px);
  animation: slowFloat 6800ms ease-in-out infinite;
}

.letter-panel {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: rgba(8, 15, 26, 0.48);
}

.letter-paper {
  width: min(760px, 92vw);
  max-height: min(84vh, 860px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: clamp(1.8rem, 4vw, 3.8rem) clamp(1.5rem, 5vw, 4.6rem) 1.5rem;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(113, 82, 54, 0.05), transparent 14%, transparent 86%, rgba(113, 82, 54, 0.05)),
    #f7ecd2;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
}

.letter-body {
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.5rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(101, 72, 53, 0.35) transparent;
}

.letter-body p {
  margin: 0 0 1.15em;
  color: rgba(55, 45, 42, 0.94);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.9;
  letter-spacing: 0;
  text-align: left;
}

.letter-body p:first-child {
  margin-bottom: 1.45em;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
}

.letter-body strong,
.letter-body .letter-emphasis {
  color: #6f493a;
  font-weight: 700;
}

.letter-paper .storybook-entry {
  justify-self: center;
  flex: none;
}

.final-note {
  position: absolute;
  right: 7%;
  bottom: 6%;
  color: rgba(255, 239, 204, 0.86);
  font-size: clamp(0.9rem, 1.4vw, 1.12rem);
}

.ending-calm .photo-wall span {
  opacity: 1;
  filter: none;
}

.ending-calm .tiny-star {
  opacity: 0.62;
}

.ending-calm .pet-kimi,
.ending-calm .pet-nemo {
  opacity: 0;
  pointer-events: none;
}

.ending-pets {
  position: absolute;
  z-index: 11;
  right: 19%;
  bottom: 3%;
  width: clamp(17rem, 30vw, 27rem);
  height: clamp(14rem, 31vw, 26rem);
  opacity: 0;
  pointer-events: none;
}

.ending-pets span {
  position: absolute;
  bottom: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  filter: drop-shadow(0 1rem 1.2rem rgba(35, 22, 18, 0.3));
}

.ending-kimi {
  right: 0;
  width: 84%;
  height: 90%;
  background-image: url("../assets/pets/kimi/kimi_idle_lie_clean.png");
}

.ending-nemo {
  left: 0;
  width: 38%;
  height: 58%;
  background-image: url("../assets/pets/nemo/nemo_idle_sit_clean.png");
}

.ending-calm .ending-pets {
  opacity: 1;
  animation: endingPetsSettle 2200ms ease forwards;
}

.key-moment .pet-kimi .pet-art {
  background-image: url("../assets/pets/kimi/kimi_head_up.png");
  animation: petLookUp 1800ms ease forwards;
}

.key-moment .pet-nemo .pet-art {
  animation: nemoEarNotice 1500ms ease forwards;
}

.home-dialogue.is-final-dialogue {
  left: 8%;
  bottom: 12%;
  width: min(570px, 43vw);
  min-height: 7rem;
  translate: 0 0;
  background: linear-gradient(90deg, rgba(247, 236, 211, 0.9), rgba(247, 236, 211, 0.78));
  text-align: left;
}

.home-dialogue.is-final-dialogue .line {
  max-width: none;
  margin: auto;
  color: #3b302e;
}

.home-dialogue.is-final-dialogue .final-note {
  position: static;
  right: auto;
  bottom: auto;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

.story-complete .home-dialogue.is-final-dialogue {
  box-shadow: 0 14px 34px rgba(38, 28, 25, 0.16), 0 0 30px rgba(255, 221, 157, 0.14);
}

.ending-tableau {
  position: absolute;
  z-index: 15;
  left: 8%;
  bottom: 14%;
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  width: min(570px, 43vw);
  translate: 0 0;
  color: #f8e5ba;
  text-align: left;
  text-shadow: 0 3px 22px rgba(13, 18, 26, 0.58);
  animation: lineIn 1400ms ease forwards;
}

.ending-tableau p {
  margin: 0;
  font-size: clamp(1.65rem, 3.2vw, 3rem);
  line-height: 1.4;
}

.ending-tableau small {
  font-size: clamp(0.95rem, 1.45vw, 1.18rem);
  opacity: 0.8;
}

@media (max-width: 720px) {
  body {
    overflow: auto;
  }

  .paper-page {
    width: 100vw;
    height: 100svh;
    min-height: 620px;
    border-radius: 0;
  }

  .door-page {
    height: 100svh;
  }

  .story-layer {
    padding: 0;
  }

  #door-dialogue {
    left: 1.5rem;
    right: 1.5rem;
    bottom: 8.2rem;
    width: auto;
    min-height: 7.5rem;
    max-height: 8rem;
  }

  #enter-home {
    left: 1.5rem;
    right: auto;
    bottom: 4.1rem;
    translate: 0 0;
  }

  .footprints.big {
    left: 9%;
    bottom: 43%;
    gap: 1.5rem;
    transform: rotate(18deg);
  }

  .footprints.small {
    right: 17%;
    bottom: 47%;
    gap: 0.9rem;
    transform: rotate(205deg);
  }

  .kimi-peek {
    right: -2%;
    bottom: -2%;
    width: 9.6rem;
    height: 16rem;
  }

  .nemo-peek {
    right: 29%;
    bottom: -1%;
    width: 5rem;
    height: 10rem;
    background-position: center bottom;
  }

  .home-stage {
    width: 100vw;
    height: 100svh;
    min-height: 680px;
    background-position: 52% center;
  }

  .home-stage.chapter-kimi,
  .home-stage.chapter-nemo {
    background-position: 52% center;
  }

  .home-stage.chapter-ball,
  .home-stage.chapter-photos {
    background-position: 16% center;
  }

  .home-stage.chapter-star {
    background-position: 75% center;
  }

  .home-stage.chapter-cake,
  .home-stage.chapter-gift {
    background-position: 86% center;
  }

  .home-stage.ending-calm {
    background-position: 58% center;
  }

  .window-object {
    right: 5%;
    top: 7%;
    width: 9.8rem;
    height: 8.5rem;
  }

  .photo-wall {
    left: 6%;
    top: 10%;
    width: 14rem;
    height: 9rem;
  }

  .photo-wall span:nth-child(1) { width: 4.8rem; height: 3.7rem; }
  .photo-wall span:nth-child(2) { left: 5.3rem; width: 4.2rem; height: 5.2rem; }
  .photo-wall span:nth-child(3) { left: 10rem; width: 4rem; height: 3.5rem; }
  .photo-wall span:nth-child(4) { left: 3rem; top: 5.3rem; width: 6.2rem; height: 3.2rem; }

  .sofa {
    left: 3%;
    bottom: 22%;
    width: 18rem;
    height: 8.2rem;
  }

  .pet-kimi {
    left: 22%;
    bottom: 12%;
    width: 13rem;
    height: 17rem;
  }

  .pet-nemo {
    left: 60%;
    bottom: 14%;
    width: 7rem;
    height: 12rem;
  }

  .ball-object {
    left: 7%;
    bottom: 11%;
    width: 4.8rem;
  }

  .cake-object {
    right: -3%;
    bottom: 1%;
    width: 9rem;
    height: 14rem;
  }

  .gift-object {
    right: 4%;
    bottom: 34%;
    width: 4.5rem;
    height: 4.5rem;
  }

  .cake-object.cake-presenting {
    right: 27%;
    bottom: 25%;
    transform: scale(1.08);
  }

  .scene-overlay.cake-scene {
    place-items: end stretch;
    padding: 0 5% 3%;
  }

  .scene-overlay.cake-scene .overlay-paper {
    width: 100%;
    min-height: 9.8rem;
    padding: 1rem 1.1rem;
  }

  .scene-overlay.ball-memory .overlay-paper {
    min-height: 18rem;
    padding: 8.4rem 1.1rem 1.2rem;
  }

  .memory-portrait {
    top: 0.45rem;
    right: 50%;
    width: 10rem;
    height: 7.5rem;
    transform: translate(50%, 0.7rem) scale(0.96);
  }

  .memory-portrait.is-visible {
    transform: translate(50%, 0) scale(1);
  }

  .scene-overlay.ball-memory .dialogue .line {
    max-width: 100%;
  }

  .home-dialogue {
    left: 5%;
    right: 5%;
    bottom: 2.5%;
    width: auto;
    min-height: 9.8rem;
    padding: 0.9rem 1rem;
  }

  .letter-paper {
    width: 94vw;
    max-height: 88svh;
    padding: 1.5rem 1.2rem 1rem;
  }

  .letter-body p {
    font-size: 1rem;
    line-height: 1.8;
  }

  .photo-viewer {
    grid-template-columns: 3rem 1fr 3rem;
  }

  .photo-card {
    width: 76vw;
    height: 68svh;
  }

  .photo-year {
    max-width: 82vw;
  }

  .ending-pets {
    right: 4%;
    bottom: 17%;
    width: 18rem;
    height: 17rem;
  }

  .home-dialogue.is-final-dialogue,
  .ending-tableau {
    left: 5%;
    right: 5%;
    bottom: 3.5%;
    width: auto;
    min-height: 8rem;
  }
}