.journey-title {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #fff8eb;
}

.journey-title::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border: 1px solid rgb(255 245 220 / 32%);
  border-radius: 27px;
  box-shadow: inset 0 0 100px rgb(53 31 28 / 18%);
}

.journey-title__world {
  position: absolute;
  inset: 0;
  animation: journey-world-in 1.5s var(--ease) both;
}

.journey-title__cat {
  position: absolute;
  z-index: 4;
  right: 31%;
  bottom: 46px;
  width: auto;
  height: 238px;
  filter: drop-shadow(0 15px 10px rgb(61 37 26 / 30%));
  transform-origin: 50% 100%;
  animation: journey-cat-in 900ms 280ms var(--ease) both;
}

.journey-title__content {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 62px;
  width: 450px;
  padding: 34px 38px 32px;
  border: 1px solid rgb(255 241 211 / 30%);
  border-radius: 30px;
  background: linear-gradient(145deg, rgb(76 48 39 / 72%), rgb(67 44 50 / 47%));
  box-shadow: 0 24px 62px rgb(43 28 24 / 24%);
  backdrop-filter: blur(7px);
  transform: translateY(-50%);
  animation: journey-copy-in 760ms 120ms var(--ease) both;
}

.journey-title__chapter {
  display: block;
  color: #f7d79a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.journey-title__content h1 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-shadow: 0 5px 22px rgb(44 27 24 / 42%);
}

.journey-title__content > strong {
  display: block;
  margin-top: 7px;
  color: #ffe5b8;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.08em;
}

.journey-title__content > p {
  max-width: 372px;
  margin: 18px 0 16px;
  color: rgb(255 248 235 / 88%);
  font-size: 16px;
  line-height: 1.75;
}

.journey-title__progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.journey-title__progress span {
  padding: 7px 11px;
  border: 1px solid rgb(255 236 197 / 24%);
  border-radius: 999px;
  background: rgb(255 248 233 / 10%);
  color: #f8e3bc;
  font-size: 12px;
  font-weight: 700;
}

.journey-title__start {
  display: inline-flex;
  min-width: 222px;
  height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid rgb(255 248 232 / 52%);
  border-radius: 18px;
  padding: 0 16px 0 23px;
  background: linear-gradient(145deg, #c46f63, #94504e);
  box-shadow: 0 15px 30px rgb(55 32 31 / 32%);
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

.journey-title__start:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgb(55 32 31 / 38%); }
.journey-title__start i { font-size: 28px; font-style: normal; font-weight: 400; line-height: 1; }
.journey-title__seal {
  position: absolute;
  z-index: 5;
  top: 36px;
  right: 38px;
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border: 1px solid rgb(123 68 57 / 42%);
  border-radius: 50%;
  background: rgb(255 247 226 / 76%);
  box-shadow: 0 12px 32px rgb(68 42 32 / 16%);
  color: #92504e;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  transform: rotate(5deg);
}

.journey-title__world .room-decor-slot--back-left { bottom: 11%; left: 26%; }
.journey-title__world .room-decor-slot--back-right { right: 24%; bottom: 10%; }
.journey-title__world .room-decor-slot--tabletop { display: none; }
.journey-title__world .room-decor-slot--front-left { bottom: 1%; left: 18%; }
.journey-title__world .room-decor-slot--front-right { right: 18%; bottom: 1%; }

@keyframes journey-world-in {
  from { opacity: 0.72; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes journey-copy-in {
  from { opacity: 0; transform: translate(-18px, calc(-50% + 8px)); }
  to { opacity: 1; transform: translate(0, -50%); }
}

@keyframes journey-cat-in {
  from { opacity: 0; transform: translateX(18px) scale(0.97); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.opening-cinematic,
.opening-decision {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.opening-story-scene {
  isolation: isolate;
  color: #433a3c;
}

.opening-story-scene::before,
.opening-story-scene::after {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
}

.opening-story-scene::before {
  background: linear-gradient(90deg, rgb(34 38 54 / 32%), transparent 54%, rgb(31 34 48 / 12%));
}

.opening-story-scene::after {
  background:
    linear-gradient(180deg, rgb(255 248 235 / 5%), transparent 28%, transparent 74%, rgb(31 27 35 / 18%)),
    radial-gradient(circle at 79% 20%, rgb(255 248 226 / 13%) 0 1px, transparent 1.5px) 0 0 / 9px 9px;
  mix-blend-mode: soft-light;
}

.opening-day-card {
  position: absolute;
  z-index: 20;
  top: 44px;
  left: 86px;
  display: grid;
  align-content: start;
  gap: 2px;
  color: #fff8ec;
  filter: drop-shadow(0 4px 14px rgb(34 30 38 / 35%));
  animation: opening-copy-in 620ms 180ms var(--ease) both;
}

.opening-day {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.06;
}

.opening-place {
  padding-left: 4px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.opening-day-card--compact { top: 30px; left: 86px; animation: none; }
.opening-day-card--compact .opening-day { font-size: 52px; }
.opening-day-card--compact .opening-place { font-size: 16px; }

.opening-cat-pose {
  display: block;
  background-image: url("../assets/cats/opening/opening-cat-poses-v1.png");
  background-repeat: no-repeat;
  background-size: 300% 500%;
}

.opening-cat-pose--walk { background-position-x: 0%; }
.opening-cat-pose--rub { background-position-x: 50%; }
.opening-cat-pose--look { background-position-x: 100%; }
/* 跟随拍2 仰头蹭人：独立五品种竖条，不改原 3×5 表的尺寸与切格。 */
.opening-cat-pose--nuzzle {
  background-image: url("../assets/cats/opening/opening-cat-pose-nuzzle-v1.png");
  background-size: 100% 500%;
  background-position-x: 0%;
}
.opening-cat-pose--lihua { background-position-y: 0%; }
.opening-cat-pose--calico { background-position-y: 25%; }
.opening-cat-pose--black { background-position-y: 50%; }
.opening-cat-pose--white { background-position-y: 75%; }
.opening-cat-pose--orange { background-position-y: 100%; }

.opening-scene-cast {
  pointer-events: none;
  position: absolute;
  z-index: 8;
  inset: 0;
}

.opening-scene-cat {
  position: absolute;
  aspect-ratio: 1;
  filter: drop-shadow(0 14px 13px rgb(31 27 31 / 34%));
  transform-origin: 50% 100%;
}

.opening-scene-cat--approach {
  bottom: 22%;
  left: 58%;
  width: 150px;
  opacity: 0;
  filter: brightness(0.76) saturate(0.78) drop-shadow(0 8px 8px rgb(30 28 37 / 38%));
  animation: opening-cat-arrival 1.65s 100ms var(--ease) forwards;
}

[data-opening-started="false"] .opening-scene-cat--approach,
[data-opening-started="false"] .opening-approach-shadow,
[data-opening-started="false"] .opening-manga-card--approach,
[data-opening-started="false"] .opening-sfx--rain {
  animation-play-state: paused;
}

[data-opening-started="false"] .opening-control {
  opacity: 1;
  animation: none;
}

.opening-scene-cat--contact {
  bottom: 154px;
  left: 238px;
  width: 246px;
  animation: opening-cat-rub 900ms 180ms var(--ease) both;
}

.opening-scene-cat--look,
.opening-scene-cat--choice {
  bottom: 146px;
  left: 374px;
  width: 284px;
}

.opening-scene-cat--look {
  animation: opening-cat-look 820ms 220ms var(--ease) both;
}

.opening-scene-cat--choice { animation: none; }

.opening-scene-cat--follow {
  bottom: 140px;
  left: 350px;
  width: 238px;
  animation: opening-cat-follow 1.2s 160ms var(--ease) both;
}

.opening-approach-shadow {
  position: absolute;
  z-index: -1;
  bottom: 22%;
  left: 58%;
  width: 84px;
  height: 16px;
  border-radius: 50%;
  background: rgb(32 31 42 / 30%);
  filter: blur(5px);
  opacity: 0;
  transform: translate(-50%, 10px) scale(0.2);
  animation: opening-shadow-arrival 1.65s 100ms var(--ease) forwards;
}

.opening-ground-shadow {
  position: absolute;
  z-index: -1;
  height: 18px;
  border-radius: 50%;
  background: rgb(32 31 42 / 27%);
  filter: blur(6px);
}

.opening-ground-shadow--contact { bottom: 151px; left: 272px; width: 176px; }
.opening-ground-shadow--look,
.opening-ground-shadow--choice { bottom: 143px; left: 416px; width: 198px; }
.opening-ground-shadow--follow { bottom: 137px; left: 382px; width: 174px; }

.opening-hand-overlay {
  pointer-events: none;
  position: absolute;
  z-index: 10;
  bottom: -8px;
  left: -54px;
  width: 392px;
  max-width: none;
  opacity: 0;
  filter: drop-shadow(0 16px 16px rgb(31 27 31 / 25%));
  animation: opening-hand-in 700ms 80ms var(--ease) forwards;
}

.opening-hand-overlay--choice {
  opacity: 1;
  animation: none;
}

.opening-manga-card {
  --card-tilt: -1deg;
  position: absolute;
  z-index: 16;
  width: 360px;
  padding: 16px 18px 17px;
  border: 3px solid #5b4540;
  border-radius: 7px;
  background: #fff8e9;
  box-shadow: 8px 8px 0 rgb(74 53 50 / 28%);
  opacity: 0;
  transform: rotate(var(--card-tilt));
  animation: opening-card-pop 520ms 380ms var(--ease) forwards;
}

.opening-speech-bubble::after {
  position: absolute;
  bottom: -7px;
  left: 18px;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid #5b4540;
  border-left: 2px solid #5b4540;
  background: #fffaf0;
  content: "";
  transform: rotate(-45deg);
}

.opening-manga-card span {
  display: inline-block;
  margin-bottom: 5px;
  color: #a55b57;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.opening-manga-card p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.55;
}

.opening-manga-card--approach { top: 74px; right: 56px; }
.opening-manga-card--action { --card-tilt: 1deg; top: 92px; right: 64px; }
.opening-manga-card--ice { top: 80px; right: 62px; }
.opening-manga-card--decision { --card-tilt: 1deg; top: 62px; right: 48px; }
/* 跟随旁白卡与玩家自语卡共用右上卡槽，躲开左上日卡和右下按钮。 */
.opening-manga-card--follow,
.opening-manga-card--player { top: 74px; right: 52px; }

.opening-speech-bubble {
  position: absolute;
  z-index: 15;
  bottom: 360px;
  left: 412px;
  padding: 11px 17px;
  border: 2px solid #5b4540;
  border-radius: 50%;
  background: #fffaf0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  transform: rotate(-5deg);
  animation: opening-card-pop 420ms 620ms var(--ease) both;
}

.opening-speech-bubble--look { bottom: 382px; left: 545px; }

.opening-sfx {
  position: absolute;
  z-index: 14;
  color: #fff7e7;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: -2px -2px #66504b, 2px -2px #66504b, -2px 2px #66504b, 2px 2px #66504b;
  transform: rotate(-9deg);
  animation: opening-sfx-in 420ms 540ms var(--ease) both;
}

.opening-sfx--rain { right: 426px; bottom: 94px; font-size: 23px; }
.opening-sfx--rub { bottom: 190px; left: 470px; }
.opening-sfx--pause { bottom: 330px; left: 612px; font-size: 26px; }

.opening-control {
  position: absolute;
  z-index: 24;
  right: 32px;
  bottom: 28px;
  display: flex;
  min-width: 106px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid #5b4540;
  border-radius: 7px;
  background: #fff8e9;
  color: #5b4540;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 6px 6px 0 rgb(74 53 50 / 28%);
  animation: opening-copy-in 480ms 760ms var(--ease) both;
}

.opening-control i { font-size: 24px; font-style: normal; line-height: 1; }
.opening-control:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgb(74 53 50 / 28%); }

.opening-choices {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 3px solid #5b4540;
  border-radius: 8px;
  background: rgb(255 248 233 / 96%);
  box-shadow: 9px 9px 0 rgb(74 53 50 / 28%);
}

.opening-choices--scene {
  position: absolute;
  z-index: 20;
  top: 204px;
  right: 44px;
  width: 372px;
  animation: opening-card-pop 520ms 260ms var(--ease) both;
}

.opening-choice-heading span { color: var(--rose-ink); font-size: 12px; font-weight: 900; letter-spacing: 0.14em; }
.opening-choice-heading h2 { margin: 4px 0 0; font-family: var(--font-display); font-size: 26px; line-height: 1.3; }
.opening-choice-heading p { margin: 7px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }

.opening-choice {
  display: grid;
  min-height: 106px;
  gap: 4px;
  padding: 15px 17px;
  border: 2px solid rgb(91 69 64 / 66%);
  border-radius: 7px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  box-shadow: 4px 4px 0 rgb(74 53 50 / 16%);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

.opening-choice:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgb(74 53 50 / 22%); }
.opening-choice span { color: var(--rose-ink); font-size: var(--text-xs); font-weight: 900; letter-spacing: 0.1em; }
.opening-choice b { font-family: var(--font-display); font-size: 18px; }
.opening-choice small { color: var(--ink-soft); font-size: 14px; line-height: var(--line-normal); }
.opening-choice--feed { background: linear-gradient(145deg, rgb(255 247 233 / 96%), rgb(255 220 192 / 88%)); }
.opening-choice--leave { background: linear-gradient(145deg, rgb(239 233 249 / 94%), rgb(213 224 241 / 84%)); }

.home-arrival-layout { min-height: 100%; }

.home-arrival-scene {
  isolation: isolate;
  border: 1px solid rgb(255 255 255 / 42%);
  background: linear-gradient(90deg, rgb(255 247 232 / 9%), transparent 56%, rgb(70 46 39 / 11%));
  box-shadow: inset 0 0 60px rgb(74 50 42 / 10%), 0 18px 42px rgb(60 42 38 / 14%);
  cursor: default;
  touch-action: auto;
}

/* Core 命名屏直接读取房间原画，取消旧的白色渐变，不影响复用该 class 的普通到家三拍。 */
.core-mother-arrival .home-arrival-scene { background: transparent; }

.home-arrival-scene:active { cursor: default; }

.home-arrival-paw-trail {
  position: absolute;
  z-index: 1;
  bottom: 13%;
  left: 15%;
  color: rgb(86 67 61 / 48%);
  font-size: 22px;
  letter-spacing: 8px;
  transform: rotate(12deg);
  filter: grayscale(1) blur(.2px);
  transition: opacity 360ms ease;
}

.home-arrival-scene--settle .home-arrival-paw-trail { opacity: .16; }

.home-arrival-scene > .home-arrival-basin {
  position: absolute;
  z-index: 3;
  bottom: 13px;
  left: 34px;
  width: 180px;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 12px 8px rgb(70 47 39 / 25%));
  transform: perspective(500px) rotateX(12deg) rotate(-2deg);
  animation: opening-card-pop 420ms var(--ease) both;
}

.home-arrival-scene > .home-arrival-towel {
  position: absolute;
  z-index: 4;
  right: 34px;
  bottom: 26px;
  display: grid;
  width: 142px;
  min-height: 118px;
  place-items: end center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff8e8;
  cursor: pointer;
  filter: drop-shadow(0 12px 8px rgb(70 47 39 / 24%));
  transition: opacity 160ms ease, transform 180ms var(--ease);
}

.home-arrival-towel img { width: 138px; height: 100px; object-fit: contain; }
.home-arrival-towel span {
  margin-top: -12px;
  padding: 5px 10px;
  border: 1px solid rgb(255 255 255 / 46%);
  border-radius: 999px;
  background: rgb(76 57 50 / 76%);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 5px 12px rgb(54 37 32 / 16%);
}
.home-arrival-towel:hover { transform: translateY(-5px) rotate(-2deg); }
.home-arrival-towel:focus-visible { outline: 3px solid #fff2bb; outline-offset: 4px; border-radius: 18px; }
.home-arrival-towel[aria-pressed="true"] { opacity: .42; transform: translateY(3px) scale(.94); }
.home-arrival-towel--placed { pointer-events: none; object-fit: contain; opacity: .76; }

.home-arrival-cat {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: end center;
  transform-origin: 50% 100%;
  animation: home-arrival-cat-in 900ms 120ms var(--ease) both;
}

.home-arrival-cat--clean { cursor: crosshair; touch-action: none; }
.home-arrival-cat--clean:focus-visible { outline: 3px solid #fff2bb; outline-offset: 7px; border-radius: 42%; }

.home-arrival-cat .cat-sprite {
  width: auto;
  height: 280px;
  max-height: 100%;
  filter: drop-shadow(0 16px 16px rgb(71 46 37 / 22%));
  animation: breathe 7s ease-in-out infinite;
}

.home-arrival-cat--door .cat-sprite {
  filter: saturate(.62) brightness(.76) contrast(.94) drop-shadow(0 16px 16px rgb(71 46 37 / 30%));
}

.home-arrival-cat--clean .cat-sprite {
  filter: saturate(.88) brightness(.92) drop-shadow(0 16px 16px rgb(71 46 37 / 24%));
}

.home-arrival-cat--door::before {
  pointer-events: none;
  position: absolute;
  z-index: 4;
  right: 16%;
  bottom: 3%;
  width: 68%;
  height: 34%;
  background:
    radial-gradient(ellipse at 18% 76%, rgb(91 70 55 / 48%) 0 7%, transparent 10%),
    radial-gradient(ellipse at 35% 82%, rgb(91 70 55 / 42%) 0 8%, transparent 11%),
    radial-gradient(ellipse at 76% 68%, rgb(91 70 55 / 28%) 0 9%, transparent 12%);
  content: "";
  filter: blur(.6px);
  mix-blend-mode: multiply;
  transform: rotate(-3deg);
}

.home-arrival-cat--door::after,
.home-arrival-cat--clean::after {
  pointer-events: none;
  position: absolute;
  z-index: 5;
  top: 18%;
  right: 13%;
  width: 44px;
  height: 70px;
  background: radial-gradient(ellipse at center, rgb(204 232 241 / 88%) 0 23%, transparent 26%) 0 0 / 18px 28px;
  content: "";
  filter: drop-shadow(0 2px 2px rgb(64 76 78 / 25%));
  transform: rotate(8deg);
}

.home-arrival-cat--clean::after { opacity: .46; }

.home-arrival-cat.is-care-gesture { --care-progress: 0; }
.home-arrival-cat.is-care-gesture[data-care-gesture="brush"]::before {
  pointer-events: none;
  position: absolute;
  z-index: 9;
  top: 31%;
  left: 12%;
  width: 76%;
  height: 34%;
  border-top: 4px dashed rgb(255 241 198 / 96%);
  border-radius: 50%;
  content: "";
  filter: drop-shadow(0 2px 2px rgb(111 73 58 / 38%));
  transform: rotate(-7deg) scaleX(var(--care-progress));
  transform-origin: 0 50%;
  transition: transform 90ms linear;
}

.home-arrival-cat.is-care-gesture[data-care-gesture="brush"]::after {
  right: 15%;
  bottom: 7%;
  width: auto;
  height: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgb(76 57 50 / 78%);
  color: #fff8e8;
  content: "顺着后背轻轻擦";
  font-size: 12px;
  font-weight: 900;
  opacity: 1;
  filter: none;
  transform: none;
}

.home-arrival-day {
  position: absolute;
  z-index: 5;
  top: 20px;
  left: 24px;
  display: grid;
  color: #fff8ec;
  filter: drop-shadow(0 4px 14px rgb(34 30 38 / 38%));
}

.home-arrival-day strong { font-family: var(--font-display); font-size: 48px; letter-spacing: .1em; line-height: 1; }
.home-arrival-day span { margin-top: 5px; font-size: 15px; font-weight: 900; letter-spacing: .2em; }

.home-arrival-sfx {
  position: absolute;
  z-index: 4;
  right: 20%;
  bottom: 22%;
  color: #fff8e9;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  text-shadow: -2px -2px #66504b, 2px -2px #66504b, -2px 2px #66504b, 2px 2px #66504b;
  transform: rotate(-8deg);
  animation: opening-sfx-in 420ms 720ms var(--ease) both;
}

.home-arrival-story {
  display: grid;
  align-content: center;
  gap: 14px;
}

.home-arrival-card {
  padding: 17px 18px 18px;
  border: 3px solid #5b4540;
  border-radius: 7px;
  background: #fff8e9;
  box-shadow: 7px 7px 0 rgb(74 53 50 / 24%);
  transform: rotate(-1deg);
  animation: opening-card-pop 520ms 300ms var(--ease) both;
}

.home-arrival-card--action { transform: rotate(1deg); animation-delay: 500ms; }
.home-arrival-card span { color: #a55b57; font-size: 12px; font-weight: 900; letter-spacing: .16em; }
.home-arrival-card p { margin: 7px 0 0; font-family: var(--font-display); font-size: 17px; font-weight: 800; line-height: 1.65; }
.home-arrival-continue { min-height: 48px; margin-top: 6px; animation: opening-copy-in 480ms 760ms var(--ease) both; }

.home-arrival-naming {
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 14px;
  border: 3px solid #5b4540;
  border-radius: 7px;
  background: #fff8e9;
  box-shadow: 7px 7px 0 rgb(74 53 50 / 24%);
  animation: opening-copy-in 480ms 760ms var(--ease) both;
}
.home-arrival-naming label { color: var(--ink); font-size: 14px; font-weight: 900; line-height: 1.5; }
.home-arrival-naming .naming-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 7px; border-radius: 15px; background: rgb(255 255 255 / 76%); }
.home-arrival-naming input { height: 42px; font-size: 17px; font-weight: 800; }

.tool-cursor[data-tool-id="towel"] {
  width: 104px;
  height: 82px;
  transform: translate3d(var(--tool-x, -120px), var(--tool-y, -120px), 0) translate(-18%, -56%) rotate(-8deg);
}

@keyframes opening-copy-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes opening-cat-arrival {
  0% { opacity: 0; transform: translate(-50%, -46px) scale(0.24); }
  18% { opacity: 0.76; }
  48% { transform: translate(-52%, -19px) scale(0.43) rotate(-1deg); }
  72% { transform: translate(-48%, 1px) scale(0.59) rotate(1deg); }
  100% { opacity: 0.94; transform: translate(-50%, 22px) scale(0.74); }
}

@keyframes opening-shadow-arrival {
  from { opacity: 0; transform: translate(-50%, 10px) scale(0.2); }
  to { opacity: 0.62; transform: translate(-50%, 28px) scale(0.9); }
}

@keyframes opening-hand-in {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes home-arrival-cat-in {
  from { opacity: 0; transform: translateX(-46px) scale(.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes opening-cat-rub {
  from { opacity: 0; transform: translate(56px, 8px) rotate(5deg) scale(0.88); }
  62% { opacity: 1; transform: translate(-7px, 0) rotate(-3deg) scale(1.02); }
  to { opacity: 1; transform: translate(0) rotate(-1deg) scale(1); }
}

@keyframes opening-cat-look {
  from { opacity: 1; transform: translate(14px, 8px) rotate(3deg) scale(0.96); }
  to { opacity: 1; transform: translate(0) rotate(0) scale(1); }
}

@keyframes opening-cat-follow {
  from { opacity: 1; transform: translateX(34px) rotate(3deg) scale(0.96); }
  55% { transform: translateX(12px) rotate(-2deg) scale(1); }
  to { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}

@keyframes opening-card-pop {
  from { opacity: 0; transform: translate(24px, 14px) rotate(calc(var(--card-tilt, 0deg) - 3deg)) scale(0.88); }
  to { opacity: 1; transform: translate(0) rotate(var(--card-tilt, 0deg)) scale(1); }
}

@keyframes opening-sfx-in {
  from { opacity: 0; transform: rotate(-14deg) scale(1.6); }
  to { opacity: 1; transform: rotate(-9deg) scale(1); }
}

/* 跟随幕爱心：铺满猫盒，左右各一簇贴在脸颊外侧，避开五官。 */
.opening-hearts {
  pointer-events: none;
  position: absolute;
  z-index: 12;
  inset: 0;
}

.opening-hearts__side {
  position: absolute;
  width: 26%;
  height: 34%;
}

/* rub：头偏左，左簇贴耳外侧，右簇贴颈侧。 */
.opening-hearts__side--left { left: -8%; top: 8%; }
.opening-hearts__side--right { left: 54%; top: 2%; }

/* nuzzle：头更靠左上，两侧簇上移，离开仰起的鼻脸。 */
.opening-hearts--nuzzle .opening-hearts__side--left { left: -14%; top: -6%; }
.opening-hearts--nuzzle .opening-hearts__side--right { left: 50%; top: -10%; }

.opening-hearts i {
  position: absolute;
  color: #f05648;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 1px 0 #d4453c, 0 2px 6px rgb(212 69 60 / 42%);
  animation: opening-heart-rise 1.8s ease-out infinite;
}

.opening-hearts__side--left i:nth-child(1) { left: 18%; top: 32%; }
.opening-hearts__side--left i:nth-child(2) { left: 56%; top: 6%; font-size: 20px; animation-delay: .4s; }
.opening-hearts__side--right i:nth-child(1) { left: 10%; top: 14%; font-size: 22px; animation-delay: .15s; }
.opening-hearts__side--right i:nth-child(2) { left: 48%; top: 40%; font-size: 20px; animation-delay: .7s; }
.opening-hearts i::before { content: "❤"; }

@keyframes opening-heart-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.7); }
  25% { opacity: 1; }
  to { opacity: 0; transform: translateY(-46px) scale(1.05); }
}


/* 跟随幕卡片栈：四段会话同屏铺开，小卡片按 --follow-card-index 序逐个浮出。 */
.opening-follow-cards {
  position: absolute;
  z-index: 16;
  top: 64px;
  right: 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 360px;
}

.opening-follow-cards__card {
  position: static;
  opacity: 0;
  animation: opening-card-pop 520ms var(--ease) forwards;
  animation-delay: calc(var(--follow-card-index) * 700ms);
}

/* 跟随幕带回家的按钮沿最后一张卡的节奏出现。 */
.opening-follow-control {
  opacity: 0;
  animation: opening-card-pop 520ms var(--ease) forwards;
  animation-delay: calc(var(--follow-card-index) * 700ms);
}

/* 跟随幕双姿态：蹭人姿态在第二张卡浮出时让位给仰头眯眼。 */
.opening-follow-cat--out {
  animation: opening-follow-cat-out 420ms 700ms var(--ease) forwards;
}

.opening-follow-cat--in {
  opacity: 0;
  animation: opening-follow-cat-in 420ms 700ms var(--ease) forwards;
}

@keyframes opening-follow-cat-out {
  to { opacity: 0; }
}

@keyframes opening-follow-cat-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 玩家自语卡：青绿边，tilt 略反；槽位与 --follow 共用。 */
.opening-manga-card--player {
  --card-tilt: 1deg;
  border-color: #3d6b72;
  background: #eef6f3;
  box-shadow: 8px 8px 0 rgb(48 88 92 / 22%);
}

.opening-manga-card--player .opening-manga-card__speaker {
  display: inline-block;
  margin: 0 8px 0 0;
  color: #3d6b72;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.prologue {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #3d2c24;
  color: #f4f1ea;
}

.prologue__silhouette {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/scenes/prologue-silhouette-v3.png") center / cover no-repeat;
  filter: blur(7px) brightness(0.62);
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

.prologue[data-prologue-phase="playing"] .prologue__silhouette {
  animation: prologue-silhouette-in 2.5s ease both;
  animation-delay: 3.1s;
}

@keyframes prologue-silhouette-in {
  from { opacity: 0; }
  to { opacity: 0.4; }
}

/* 门控只露轻触开始。播放中用 data-prologue-beat 切文案窗：base.css 减弱动效会把 animation-duration 打成 0.01ms，7s 关键帧会直接停在 100%（前两段透明、只剩片名）。 */
.prologue[data-prologue-phase="gate"] .prologue__copy {
  visibility: hidden;
}

.prologue__copy {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(72%, 640px);
  min-height: 260px;
  text-align: center;
  pointer-events: none;
}

.prologue__line,
.prologue__title {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 800ms ease, visibility 0s 800ms;
  color: #fff8ea;
}

.prologue__line--1,
.prologue__line--2 {
  font-size: 26px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 18px rgb(0 0 0 / 62%), 0 0 34px rgb(255 232 190 / 28%);
}

.prologue[data-prologue-beat="line1"] .prologue__line--1,
.prologue[data-prologue-beat="line2"] .prologue__line--2,
.prologue[data-prologue-beat="title"] .prologue__title {
  opacity: 1;
  visibility: visible;
  transition: opacity 800ms ease, visibility 0s 0s;
}

.prologue__title {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-shadow: 0 2px 26px rgb(0 0 0 / 62%), 0 0 42px rgb(255 232 190 / 32%);
}

.prologue__start {
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

.prologue__start {
  font-size: 16px;
  letter-spacing: 0.32em;
}

.prologue__start span {
  display: inline-block;
  padding: 10px 22px;
  border: 2px solid rgb(244 224 190 / 68%);
  border-radius: 999px;
  background: linear-gradient(145deg, rgb(255 244 222 / 16%), rgb(214 164 130 / 8%));
  box-shadow: 0 0 18px rgb(255 214 170 / 24%), inset 0 1px 0 rgb(255 255 255 / 18%);
  text-shadow: 0 1px 6px rgb(0 0 0 / 35%);
  animation: prologue-start-pulse 2.4s ease-in-out infinite;
}

@keyframes prologue-start-pulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}