/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * macrostructure: Narrative Workflow · tone: reference-locked dream narrative · anchor hue: source artwork
 * source policy: byte-identical approved mockups; only state-dependent regions render dynamically
 */

html,
body {
  background: #05070d;
}

.app-shell {
  container-type: inline-size;
  width: min(100%, 375px);
  max-width: 375px;
  background: #060812;
  box-shadow: 0 0 80px rgba(0, 0, 0, .72);
}

.app-shell::before {
  display: none;
}

.screen {
  min-height: 100svh;
  padding: 40px 32px 32px;
  background: #060812;
  color: #f5ecd9;
}

.screen.active {
  animation: page-fade-in 960ms var(--ease-out) both;
}

.screen.is-leaving {
  display: block;
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  left: 0;
  bottom: auto;
  animation: page-fade-out 850ms var(--ease-in) both;
  pointer-events: none;
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes page-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.screen::after {
  display: none;
}

.screen > * {
  position: relative;
  z-index: 1;
}

.stage-label {
  margin: 0 0 18px;
  color: #9897a3;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .38em;
  text-align: left;
}

.paper-button {
  min-width: 190px;
  min-height: 51px;
  padding: 0 24px;
  border-radius: 0;
  background: #fff0c7;
  color: #24162a;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .2em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}

.paper-button::before {
  display: none;
}

.button-note {
  margin-top: 11px;
  color: #747484;
  font-size: 11px;
  letter-spacing: .12em;
}

.line-sequence.cursor::after {
  display: none;
}

.original-line-sequence.cursor::after {
  display: none;
}

.source-line {
  position: absolute;
  left: var(--line-x);
  top: var(--line-top);
  display: block;
  width: var(--line-width);
  height: var(--line-height);
  background-image: var(--repair-image);
  background-repeat: no-repeat;
  background-position: calc(-1 * var(--line-x)) calc(-1 * var(--line-y));
  background-size: 100cqw auto;
  opacity: 1;
  transition: opacity 680ms var(--ease-in);
  pointer-events: none;
}

.source-line.is-visible {
  opacity: 0;
}

.line-fade {
  display: block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 680ms var(--ease-out), transform 680ms var(--ease-out);
}

.line-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.line-gap {
  min-height: .72em;
}

.line-fade .wrap-seg {
  display: inline-block;
}

.item-icon {
  display: block;
  flex: 0 0 auto;
  background-image: var(--sprite-image);
  background-repeat: no-repeat;
  background-size: var(--sprite-size-x) var(--sprite-size-y);
  background-position: var(--sprite-x) var(--sprite-y);
}

/* P0 · cover */
.cover {
  min-height: max(100svh, calc(min(100cqw, 375px) * 2.1641));
  padding: 0;
  background: #050814 url("assets/reference-pages/p0-cover-btn-clean-v4.png") center top / 100% auto no-repeat;
  text-align: center;
}

.cover::before,
.cover::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 4%;
  right: 8%;
  bottom: 25%;
  left: 8%;
  display: block;
  clip-path: polygon(43% 0, 57% 0, 88% 100%, 12% 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 78%, transparent 100%);
  background-repeat: repeat;
  filter: drop-shadow(0 0 3px rgba(255, 232, 166, .52));
  pointer-events: none;
  will-change: background-position;
}

.cover::before {
  opacity: .76;
  background-image:
    radial-gradient(circle, rgba(255, 246, 211, .96) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(222, 185, 97, .86) 0 1.2px, transparent 2px);
  background-size: 47px 91px, 73px 137px;
  background-position: 8px -91px, 29px -137px;
  animation: cover-stardust-fall-front 8.4s linear infinite;
}

.cover::after {
  opacity: .48;
  background-image:
    radial-gradient(ellipse, rgba(255, 242, 201, .78) 0 1px, transparent 1.7px),
    radial-gradient(ellipse, rgba(184, 209, 218, .68) 0 .8px, transparent 1.6px);
  background-size: 61px 119px, 101px 173px;
  background-position: 37px -119px, 11px -173px;
  animation: cover-stardust-fall-back 12.6s linear infinite;
}

@keyframes cover-stardust-fall-front {
  to { background-position: 8px 637px, 29px 685px; }
}

@keyframes cover-stardust-fall-back {
  to { background-position: 37px 714px, 11px 692px; }
}

.cover-copy,
.cover-visual,
.cover-disclaimer,
.cover-footer {
  display: none;
}

.cover .stage-label {
  margin-bottom: 22px;
  font-size: 9px;
  letter-spacing: .43em;
  text-align: center;
}

.cover h1 {
  margin: 0;
  color: #fff3d6;
  font-size: clamp(37px, 10.9cqw, 43px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.045em;
  transform: skew(-2deg);
}

.cover-theory {
  margin-top: 11px;
  color: #deb961;
  font-size: 10px;
  letter-spacing: .25em;
}

.cover-subtitle {
  margin-top: 4px;
  max-width: none;
  color: #f8efdd;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .06em;
}

.cover-visual {
  height: 360px;
  margin: 5px -30px 0;
  background: url("assets/reference-pages/p0-cover.png") center -226px / 100% auto no-repeat;
}

.cover-visual::before,
.cover-visual::after,
.cover-visual .forest,
.cover-visual .cover-kid {
  display: none;
}

.cover-action {
  position: absolute;
  inset: 0;
  margin: 0;
}

.cover-action .paper-button,
.cover-action .paper-button:disabled {
  position: absolute;
  top: calc(min(100cqw, 375px) * 1.6487);
  left: 50%;
  width: calc(min(100cqw, 375px) * .4487);
  min-width: 0;
  height: calc(min(100cqw, 375px) * .1205);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent url("assets/reference-pages/p0-cover-button-sway-v1.png") center / 100% 100% no-repeat;
  color: transparent;
  box-shadow: none;
  clip-path: none;
  opacity: 1;
  transform: translateX(-50%);
  transform-origin: 50% 50%;
  animation: cover-cta-sway 2.7s ease-in-out infinite;
  transition: none;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .cover-action .paper-button:not(:disabled):hover {
    background: transparent url("assets/reference-pages/p0-cover-button-sway-v1.png") center / 100% 100% no-repeat;
    color: transparent;
    animation-duration: 2.7s;
  }
}

@keyframes cover-cta-sway {
  0%, 100% { transform: translateX(-50%) rotate(-1.15deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(1.15deg) translateY(-1.5px); }
}

.cover-disclaimer {
  max-width: 30em;
  margin-top: 21px;
  color: #8d8d97;
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: .075em;
}

.cover-footer {
  margin-top: 40px;
  color: #626575;
  font-size: 8px;
  letter-spacing: .35em;
}

/* P1 · entering the dream */
.dream {
  min-height: 0;
  height: min(810.67px, 216.1782cqw);
  padding: 0;
  overflow: hidden;
  background: #061225 url("assets/reference-pages/p1-dream-final-clean-v1.png?v=20260902-01") center top / 100% auto no-repeat;
}

.dream::after {
  display: none;
}

.dream-inner {
  position: absolute;
  inset: 0;
  width: 100%;
}

.dream .stage-label,
.door-scene,
.door-light,
.door-panel,
.dream-charms {
  display: none;
}

.dream-action {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 1;
  transform: none;
}

.dream-copy {
  position: absolute;
  z-index: 3;
  --source-text-image: url("assets/reference-pages/p1-dream-final-v1.png?v=20260902-01");
  top: 106cqw;
  right: 0;
  left: 0;
  height: 62cqw;
  margin: 0;
  padding: 0;
  background: none;
}

.dream .source-line {
  background-image: var(--source-text-image);
  opacity: 0;
  transition: opacity 680ms var(--ease-in);
}

.dream .source-line.is-visible {
  opacity: 1;
}

.dream-action::before {
  display: none;
}

.dream-action::after {
  content: "5s 后自动进入 · 点击可立即前往";
  position: absolute;
  z-index: 4;
  top: 84.9%;
  right: 0;
  left: 0;
  color: #bd8067;
  font-size: min(10.5px, 2.8cqw);
  letter-spacing: .12em;
  text-align: center;
  opacity: 0;
  transition: opacity 680ms var(--ease-out);
}

.dream-action.counting::after {
  opacity: 1;
}

.dream-action .paper-button {
  position: absolute;
  z-index: 6;
  top: 78.7%;
  left: 50%;
  width: 60%;
  height: 8.5%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
  clip-path: none;
  opacity: 0;
  transform: translateX(-50%);
  cursor: pointer;
  pointer-events: auto;
}

.dream-action .button-note {
  display: none;
}

/* P2 · gear selection */
.gear-screen {
  min-height: 0;
  height: min(1347.692px, 280.7692cqw);
  padding: 0;
  overflow: hidden;
  background: #111938 url("assets/reference-pages/p2-gear-v4-btn-clean.png") top center / 100% auto no-repeat;
}

.gear-screen::after {
  display: none;
}

.gear-screen > .stage-label,
.gear-screen > .gear-title,
.gear-screen > .gear-lead {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

#gear-groups {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.gear-group {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0;
  scroll-margin-top: 12px;
}

#group-food { top: 17.17%; }
#group-toy { top: 38.87%; }
#group-weapon { top: 69.47%; }

.gear-head {
  position: relative;
  display: block;
  height: clamp(18px, 5.13cqw, 24.6px);
  margin: 0;
}

.gear-head > div {
  opacity: 0;
  pointer-events: none;
}

.gear-head p {
  position: absolute;
  top: -15px;
  right: 3.6%;
  min-width: 54%;
  height: calc(100% + 22px);
  margin: 0;
  padding: 13px 0 0 clamp(8px, 2.56cqw, 12px);
  background: transparent;
  color: #eab34f;
  font-family: "Songti SC", "STSong", var(--font-display);
  font-size: clamp(11px, 3.2cqw, 15.4px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
}

.choice-grid {
  position: absolute;
  top: clamp(28px, 8.72cqw, 41.9px);
  right: 5.13%;
  left: 5.13%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: min(13.54px, 2.82cqw);
  isolation: isolate;
}

.choice-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: min(-9.6px, -2cqw) min(-5px, -1.04cqw) min(-6.15px, -1.28cqw);
  background: #111938;
  pointer-events: none;
}

.choice-grid--toy {
  top: clamp(28px, 8.46cqw, 40.6px);
  right: 5.64%;
  left: 5.64%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: min(16px, 3.33cqw);
  row-gap: min(13.54px, 2.82cqw);
}

.item-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: min(90.46px, 18.85cqw);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #283264;
  color: #f6ebd8;
  box-shadow: none;
  clip-path: polygon(0 6%, 25% 0, 50% 6%, 75% 0, 100% 6%, 100% 94%, 75% 100%, 50% 94%, 25% 100%, 0 94%);
  transition: none;
  transform: scale(1.04);
}

.choice-grid--toy .item-choice {
  height: min(87.38px, 18.21cqw);
}

.item-choice .item-icon,
.item-choice > span {
  opacity: 1;
}

.item-choice .item-icon {
  width: min(43.08px, 8.97cqw);
  height: min(43.08px, 8.97cqw);
  margin: 0 0 min(7.38px, 1.54cqw);
  filter: none;
}

.item-choice > span {
  display: block;
  color: inherit;
  font-family: "Songti SC", "STSong", var(--font-display);
  font-size: clamp(12px, 3.59cqw, 17.2px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
}

.item-choice small {
  display: none;
}

.item-choice.selected {
  background: #7d561d;
  color: #fff1d9;
  transform: scale(1.04);
  animation: none;
  box-shadow: inset 0 0 0 2px rgba(234, 179, 79, .6);
}

.item-choice.selected::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(19.69px, 4.10cqw);
  height: min(19.69px, 4.10cqw);
  border-radius: 0;
  background: #ffe59b;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* 原稿中的卡片是示例状态；P2 的全部卡片都由当前选择单层覆盖。 */
.item-choice[data-item="巧克力"],
.item-choice[data-item="发条青蛙"],
.item-choice[data-item="雨伞"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #283264;
}

.item-choice[data-item="巧克力"].selected,
.item-choice[data-item="发条青蛙"].selected,
.item-choice[data-item="雨伞"].selected {
  background: #7d561d;
}

.item-choice[data-item="巧克力"] .item-icon,
.item-choice[data-item="发条青蛙"] .item-icon,
.item-choice[data-item="雨伞"] .item-icon {
  width: min(43.08px, 8.97cqw);
  height: min(43.08px, 8.97cqw);
  margin: 0 0 min(7.38px, 1.54cqw);
  opacity: 1;
  filter: none;
}

.item-choice[data-item="巧克力"] > span,
.item-choice[data-item="发条青蛙"] > span,
.item-choice[data-item="雨伞"] > span {
  display: block;
  color: inherit;
  font-family: "Songti SC", "STSong", var(--font-display);
  font-size: clamp(12px, 3.59cqw, 17.2px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  opacity: 1;
}

.gear-action {
  position: absolute;
  z-index: 3;
  top: 90.7%;
  right: 0;
  left: 0;
  bottom: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  text-align: center;
}

.gear-action .paper-button {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(3px, .8cqw);
  width: 64%;
  margin-inline: auto;
  min-width: 0;
  min-height: 0;
  height: min(78px, 16.27cqw);
  padding: 0;
  border-radius: 0;
  background: #fff2cc;
  color: #31172b;
  font-family: "Songti SC", "STSong", var(--font-display);
  font-size: clamp(15px, 4.36cqw, 20.9px);
  font-weight: 500;
  letter-spacing: .14em;
  clip-path: polygon(0 10%, 12% 1%, 31% 7%, 50% 2%, 69% 7%, 87% 1%, 100% 7%, 100% 92%, 84% 98%, 65% 93%, 45% 99%, 25% 93%, 0 99%);
  box-shadow: none;
}

.gear-action .paper-button strong {
  font-size: clamp(15px, 4.36cqw, 20.9px);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.15;
}

.gear-action .paper-button small {
  font-size: clamp(10px, 2.93cqw, 14px);
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.2;
}

.gear-action .paper-button::before {
  display: none;
}

.gear-action .paper-button:disabled {
  background: #777b86;
  color: #2b2d36;
  filter: none;
  opacity: .88;
}

.gear-action .button-note {
  display: none;
}

/* P3 · bag confirmation */
.bag-screen {
  min-height: 0;
  height: min(1040px, 216.667cqw);
  padding: 0;
  overflow: hidden;
  background: #020305;
}

.bag-screen::after {
  display: block;
  z-index: 0;
  inset: 0;
  opacity: 1;
  background: url("assets/reference-pages/p3-bag-clean.png") center top / 100% auto no-repeat;
  mix-blend-mode: normal;
  animation: bag-route-draw 900ms linear both;
}

@keyframes bag-route-draw {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

.bag-intro {
  display: none;
}

.bag-route {
  position: absolute;
  z-index: 2;
  inset: 0;
  min-height: 0;
  padding: 0;
}

.bag-route::before {
  display: none;
}

.bag-orbit {
  position: absolute;
  min-height: 0;
  opacity: 1;
  animation: none;
}

.bag-item .item-icon {
  opacity: 0;
  animation: bag-item-in 420ms var(--ease-out, ease-out) calc(900ms + var(--delay, 0ms)) forwards;
}

.bag-item strong {
  animation: bag-label-in 420ms var(--ease-out, ease-out) calc(900ms + var(--delay, 0ms)) both;
}

@keyframes bag-item-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bag-label-in {
  from { color: transparent; }
  to { color: #e8d59c; }
}

.bag-orbit:nth-child(1) { top: 19.4%; left: 56.1%; }
.bag-orbit:nth-child(2) { top: 47.8%; left: 21.5%; }
.bag-orbit:nth-child(3) { top: 69.5%; left: 59.0%; }

.bag-item {
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  width: min(115px, 24cqw);
  height: min(115px, 24cqw);
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  isolation: isolate;
}

.bag-item::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  border-radius: min(7px, 1.46cqw);
  background: #020305;
  filter: blur(2px);
}

.bag-orbit:nth-child(1) .bag-item::before { inset: 22.3% 23% 11.2% 9.7%; }
.bag-orbit:nth-child(2) .bag-item::before { inset: 12.2% 14.6% 11.9% 11.8%; }
.bag-orbit:nth-child(3) .bag-item::before { inset: 14.9% 17.8% 8.9% 16.5%; }

.bag-item .item-icon {
  position: relative;
  z-index: 1;
  width: 67%;
  height: 67%;
  margin: 0;
  object-fit: contain;
}

.bag-orbit:nth-child(2) .item-icon,
.bag-orbit:nth-child(3) .item-icon {
  transform: translateY(min(10px, 2.78cqw));
}

.bag-item strong {
  position: absolute;
  top: 8%;
  width: max-content;
  min-width: min(175px, 36.46cqw);
  z-index: 2;
  padding: 12px 24px;
  background: rgba(2, 3, 5, .96);
  -webkit-backdrop-filter: blur(15px) brightness(.12);
  backdrop-filter: blur(15px) brightness(.12);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  color: #e8d59c;
  font-size: clamp(12px, 3.33cqw, 16px);
  font-weight: 400;
  letter-spacing: .08em;
  white-space: nowrap;
}

.bag-orbit:nth-child(odd) strong {
  left: calc(100% + 2px);
  text-align: left;
}

.bag-orbit:nth-child(even) strong {
  right: calc(100% + 2px);
  text-align: right;
}

.bag-orbit:nth-child(3) strong {
  top: 19%;
}

.bag-action {
  position: absolute;
  z-index: 3;
  top: 88.2%;
  right: 20%;
  left: 20%;
  height: 8%;
  margin: 0;
}

.bag-action .paper-button {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  opacity: 0;
}

/* P4–P6 · gift pages */
.gift-screen {
  min-height: max(100svh, 812px);
  padding: 38px 31px 30px;
  background: #080918;
}

.gift-screen--five { background: #1d1432; }
.gift-screen--ten { background: #11183c; }
.gift-screen--now { background: #020405; }

.gift-screen .stage-label {
  margin-bottom: 7px;
  color: #a8a7b8;
}

.scene {
  width: calc(100% + 62px);
  height: 262px;
  margin: 0 -31px 12px;
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.gift-screen--five .scene { background-image: url("assets/reference-pages/p4-playground.gif"); background-position: center -50px; }
.gift-screen--ten .scene { height: 235px; background-image: url("assets/reference-pages/p5-campfire.png"); background-position: center -50px; }
.gift-screen--now .scene { height: 285px; background-image: url("assets/reference-pages/p6-cabin.png"); background-position: center -46px; }

.carousel-roof,
.carousel-base,
.horse,
.rain,
.campfire,
.moon,
.cabin,
.path {
  display: none;
}

.gift-narration {
  min-height: 0;
  margin: 0 0 12px;
  color: #f3eadb;
  font-size: 14px;
  line-height: 1.72;
  letter-spacing: .035em;
}

.gift-choices {
  gap: 14px;
  margin: 15px 5px 16px;
}

.gift-screen--ten .gift-choices {
  max-width: 270px;
  gap: 20px;
  margin: 14px auto 18px;
}

.gift-card,
.last-item {
  min-height: 109px;
  padding: 10px 4px 8px;
  border: 0;
  background: #fff2cf;
  color: #301e26;
}

.gift-card .item-icon,
.last-item .item-icon {
  width: 45px;
  height: 45px;
  margin: 0 auto 7px;
  object-fit: contain;
}

.gift-card strong,
.last-item strong {
  font-size: 13px;
  letter-spacing: .08em;
}

.gift-card small,
.last-item small {
  margin-top: 7px;
  font-size: 7px;
  letter-spacing: .2em;
}

.gift-card.selected {
  outline: 0;
  background: #ffe0a1;
  color: #8b5b16;
  transform: none;
}

.gift-feedback {
  min-height: 50px;
  margin: 12px auto 14px;
  color: #f6eadb;
  font-size: 14px;
  line-height: 1.7;
}

.gift-continue {
  margin-top: 12px;
}

.gift-continue .paper-button {
  min-width: 190px;
}

.now-choice {
  margin-top: 10px;
}

.last-item {
  width: 128px;
  min-height: 129px;
  box-shadow: 0 0 24px rgba(249, 199, 84, .65);
}

.now-confirm {
  min-width: 205px;
  min-height: 45px;
  margin-top: 12px;
  font-size: 14px;
}

/* P4 · original carousel GIF with state-only overlays */
.gift-screen--five {
  min-height: 0;
  height: min(1041.23px, 216.923cqw);
  padding: 0;
  overflow: hidden;
  background: #30224e url("assets/reference-pages/p4-playground-background-unified-v3.png") center top / 100% auto no-repeat;
}

.gift-screen--five.active.is-carousel-entering {
  --carousel-entry-ease: cubic-bezier(.25, .35, .4, .9);
  pointer-events: none;
}

.gift-screen--five > .scene.carousel {
  position: absolute;
  z-index: 1;
  top: 10.897cqw;
  left: 5.769cqw;
  display: block;
  width: 88.462cqw;
  height: 75.641cqw;
  margin: 0;
  background: url("assets/reference-pages/p4-carousel-motion-platform-fixed-v12.webp") center / 100% 100% no-repeat;
  pointer-events: none;
  transform-origin: 50% 6.44%;
}

.gift-screen--five > .scene.carousel > * {
  display: none;
}

.gift-screen--five.active.is-carousel-entering > .scene.carousel {
  z-index: 4;
  animation: carousel-entrance-pullback 2400ms var(--carousel-entry-ease) both;
  will-change: transform;
}

@keyframes carousel-entrance-pullback {
  0%, 16% { transform: scale(2.25); }
  88%, 100% { transform: scale(1); }
}

.gift-screen--five::after {
  display: none;
}

.gift-screen--five::before {
  display: none;
}

.gift-screen--five > .stage-label {
  display: none;
}

.gift-screen--five > .gift-narration {
  position: absolute;
  z-index: 3;
  --source-text-image: url("assets/reference-pages/p4-playground-text-cover-v1.png?v=20260827-04");
  top: 81cqw;
  right: 0;
  left: 0;
  display: block;
  height: 52cqw;
  margin: 0;
  padding: 0;
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.gift-screen--five .source-line {
  background-image: var(--source-text-image);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 680ms var(--ease-out), transform 680ms var(--ease-out);
}

.gift-screen--five .source-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.gift-screen--five .gift-choices {
  position: absolute;
  z-index: 3;
  top: 62.85%;
  right: 9.7%;
  left: 9.7%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4.1%;
  margin: 0;
  isolation: isolate;
}

.gift-screen--five .gift-choices::before {
  display: none;
}

.gift-screen--five .gift-card {
  min-height: 0;
  height: min(135.38px, 28.21cqw);
  padding: min(12.31px, 2.56cqw) 4px min(9.85px, 2.05cqw);
  border: 0;
  background: #fff3d5;
  color: #321d27;
  clip-path: polygon(0 5%, 28% 0, 58% 5%, 86% 1%, 100% 4%, 100% 95%, 72% 100%, 43% 96%, 18% 100%, 0 96%);
}

.gift-screen--five .gift-card.selected {
  background: #ffe1a0;
  color: #714511;
}

.gift-screen--five .gift-card:disabled {
  opacity: 1;
}

.gift-screen--five .gift-card .item-icon {
  width: min(54.15px, 11.28cqw);
  height: min(54.15px, 11.28cqw);
  margin-bottom: min(8.62px, 1.79cqw);
}

.gift-screen--five .gift-card strong {
  font-family: "Songti SC", "STSong", var(--font-display);
  font-size: clamp(13px, 3.59cqw, 17.2px);
  font-weight: 400;
  letter-spacing: .08em;
}

.gift-screen--five .gift-card small {
  margin-top: min(9.85px, 2.05cqw);
  font-size: clamp(7px, 1.79cqw, 8.6px);
  letter-spacing: .18em;
}

.gift-screen--five .gift-feedback {
  position: absolute;
  z-index: 3;
  top: 80.3%;
  right: 8%;
  left: 8%;
  min-height: 0;
  margin: 0;
  color: #f6eadb;
  font-family: "Songti SC", "STSong", var(--font-display);
  font-size: clamp(13px, 3.59cqw, 17.2px);
  line-height: 1.75;
  letter-spacing: .04em;
  text-align: center;
}

.gift-screen--five .gift-continue {
  position: absolute;
  z-index: 3;
  top: 87.2%;
  right: 0;
  left: 0;
  margin: 0;
  text-align: center;
}

.gift-screen--five .gift-continue .paper-button {
  width: 47.2%;
  min-width: 0;
  min-height: 0;
  height: min(61.54px, 12.82cqw);
  padding: 0;
  border-radius: 0;
  background: #fff2cc;
  color: #31172b;
  font-family: "Songti SC", "STSong", var(--font-display);
  font-size: clamp(15px, 4.1cqw, 19.7px);
  letter-spacing: .14em;
  clip-path: polygon(0 10%, 12% 1%, 31% 7%, 50% 2%, 69% 7%, 87% 1%, 100% 7%, 100% 92%, 84% 98%, 65% 93%, 45% 99%, 25% 93%, 0 99%);
  box-shadow: none;
}

/* P5 · full original campfire page with dynamic option slots only */
.gift-screen--ten {
  --campfire-content-offset: 5cqw;
  min-height: 0;
  height: min(1041.18px, 216.9118cqw);
  padding: 0;
  overflow: hidden;
  background: #11183c url("assets/reference-pages/p5-campfire-rain-clean.gif") center top / 100% auto no-repeat;
}

.gift-screen--ten::after {
  display: none;
}

.gift-screen--ten::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 36.2%;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  pointer-events: none;
}

.gift-screen--ten > .stage-label,
.gift-screen--ten > .scene {
  display: none;
}

.gift-screen--ten > .gift-narration {
  position: absolute;
  z-index: 3;
  --repair-image: url("assets/reference-pages/p5-campfire-text-cover-v1.png?v=20260827-02");
  top: calc(76cqw + var(--campfire-content-offset));
  right: 8%;
  left: 8%;
  display: block;
  height: 66cqw;
  margin: 0;
  padding: 0;
  background: none;
  line-height: 1.55;
}

.gift-screen--ten .gift-choices {
  position: absolute;
  z-index: 3;
  top: calc(67.65% + var(--campfire-content-offset));
  right: 18.3%;
  left: 18.3%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10.8%;
  max-width: none;
  margin: 0;
  isolation: isolate;
}

.gift-screen--five .gift-choices,
.gift-screen--ten .gift-choices {
  opacity: 0;
  pointer-events: none;
  transition: opacity 680ms var(--ease-out);
}

.gift-screen--five .gift-choices.is-revealed,
.gift-screen--ten .gift-choices.is-revealed {
  opacity: 1;
  pointer-events: auto;
}

.gift-screen--ten .gift-choices::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: min(-14.77px, -3.08cqw) min(-20.92px, -4.36cqw) min(-12.31px, -2.56cqw);
  background: #000;
  pointer-events: none;
}

.gift-screen--ten .gift-card {
  min-height: 0;
  height: min(145.23px, 30.26cqw);
  padding: min(13.54px, 2.82cqw) 4px min(9.85px, 2.05cqw);
  border: 0;
  background: #fff3d5;
  color: #321d27;
  clip-path: polygon(0 5%, 28% 0, 58% 5%, 86% 1%, 100% 4%, 100% 95%, 72% 100%, 43% 96%, 18% 100%, 0 96%);
}

.gift-screen--ten .gift-card.selected {
  background: #ffe1a0;
  color: #714511;
}

.gift-screen--ten .gift-card:disabled {
  opacity: 1;
}

.gift-screen--ten .gift-card .item-icon {
  width: min(56.62px, 11.79cqw);
  height: min(56.62px, 11.79cqw);
  margin: 0 auto min(8.62px, 1.79cqw);
}

.gift-screen--ten .gift-card strong {
  font-family: "Songti SC", "STSong", var(--font-display);
  font-size: clamp(13px, 3.59cqw, 17.2px);
  font-weight: 400;
  letter-spacing: .08em;
}

.gift-screen--ten .gift-card small {
  margin-top: min(9.85px, 2.05cqw);
  font-size: clamp(7px, 1.79cqw, 8.6px);
  letter-spacing: .18em;
}

.gift-screen--ten .gift-feedback {
  position: absolute;
  z-index: 3;
  top: calc(91.7% + var(--campfire-content-offset));
  right: 8%;
  left: 8%;
  min-height: 0;
  margin: 0;
  color: #f6eadb;
  font-family: "Songti SC", "STSong", var(--font-display);
  font-size: clamp(13px, 3.59cqw, 17.2px);
  line-height: 1.75;
  letter-spacing: .04em;
  text-align: center;
}

.gift-screen--ten .gift-continue {
  position: absolute;
  z-index: 3;
  top: calc(85% + var(--campfire-content-offset));
  right: 0;
  left: 0;
  margin: 0;
  text-align: center;
}

.gift-screen--ten .gift-continue .paper-button {
  width: 47.2%;
  min-width: 0;
  min-height: 0;
  height: min(61.54px, 12.82cqw);
  padding: 0;
  border-radius: 0;
  background: #fff2cc;
  color: #31172b;
  font-family: "Songti SC", "STSong", var(--font-display);
  font-size: clamp(15px, 4.1cqw, 19.7px);
  letter-spacing: .14em;
  clip-path: polygon(0 10%, 12% 1%, 31% 7%, 50% 2%, 69% 7%, 87% 1%, 100% 7%, 100% 92%, 84% 98%, 65% 93%, 45% 99%, 25% 93%, 0 99%);
  box-shadow: none;
}

/* P7 · nickname */
.nickname-screen {
  min-height: 0;
  height: min(815.3px, 217.41cqw);
  padding: 0;
  overflow: hidden;
  background: #020304 url("assets/reference-pages/p7-nickname-v2.png") center top / 100% auto no-repeat;
}

.nickname-screen::after {
  display: none;
}

.nickname-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  transform: none;
}

.nickname-wrap h1 {
  display: none;
}

.nickname-wrap > p {
  display: none;
}

.field {
  position: absolute;
  top: 47.14%;
  right: 6.28%;
  left: 5.47%;
  height: 8.32%;
}

.field label {
  display: none;
}

.field input {
  width: 100%;
  height: 100%;
  padding: 0 10%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #f4f2f0;
  font-size: min(18.5px, 4.93cqw);
  letter-spacing: .02em;
  text-align: center;
}

.field input::placeholder {
  color: #b9b7b5;
  opacity: 1;
}

.field-count {
  right: 8px;
  bottom: -20px;
  color: #70747c;
}

.nickname-submit,
.nickname-submit:disabled {
  position: absolute;
  top: 59.01%;
  left: 50%;
  width: min(103.5px, 27.61cqw);
  height: min(103.5px, 27.61cqw);
  min-height: 0;
  margin: 0;
  background: transparent;
  color: transparent;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: .02em;
  box-shadow: none;
  opacity: 0;
  transform: translateX(-50%);
}

/* P8 · analysis */
.analysis-screen {
  min-height: max(100svh, 812px);
  padding: 0 32px;
  background: #000;
}

.analysis-screen.is-leaving {
  display: grid;
  place-items: center;
}

.analysis-text {
  min-height: 0;
  color: #fff;
  font-size: 19px;
  line-height: 1.32;
  letter-spacing: -.015em;
}

.analysis-text .analysis-block {
  display: block;
  margin: 0 0 33px;
}

.analysis-text .analysis-en {
  display: block;
  color: #7897e5;
}

.analysis-text .analysis-cn {
  display: block;
  color: #fff;
}

/* P9 · result — 参考图文字层级与模块节奏（仅结果页视觉） */
.result-screen {
  padding: 0;
  background: #0a0c18;
}

.result-card {
  padding: min(24px, 6.4cqw) min(54px, 14.4cqw) 0;
  background: #0a0c18;
}

.result-hero {
  position: relative;
  transform: none;
}

.result-card::before,
.result-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .28;
  background-image:
    radial-gradient(circle at 20% 12%, #f5ecd9 0 1px, transparent 1.3px),
    radial-gradient(circle at 82% 26%, #d8b45f 0 1px, transparent 1.4px),
    radial-gradient(circle at 47% 71%, #b6c2e4 0 .9px, transparent 1.2px),
    radial-gradient(circle at 8% 54%, #e8d59c 0 .8px, transparent 1.1px);
  background-size: 127px 137px, 173px 181px, 96px 149px, 211px 119px;
  pointer-events: none;
}

.avatar-ring {
  position: absolute;
  top: min(23px, 6.133cqw);
  left: min(3px, .8cqw);
  width: min(46px, 12.267cqw);
  height: min(46px, 12.267cqw);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.avatar-ring img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

.result-owner {
  display: inline-block;
  margin-right: min(4px, 1.067cqw);
  color: #77788a;
  font-size: min(12px, 3.2cqw);
  line-height: 1.2;
}

.result-prefix {
  display: inline-block;
  margin: 0;
  font-size: min(13px, 3.467cqw);
  line-height: 1.2;
  letter-spacing: .12em;
}

.result-hero h1 {
  margin-top: min(8px, 2.133cqw);
  padding-left: min(32px, 8.533cqw);
  font-size: min(40px, 10.667cqw);
  line-height: .92;
  letter-spacing: -.05em;
}

.result-en {
  display: none;
}

.result-subtitle {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: min(8px, 2.133cqw);
  margin-top: min(8px, 2.133cqw);
  font-size: min(14px, 3.733cqw);
  font-weight: 500;
  line-height: 1.25;
}

.result-subtitle::before {
  content: "";
  flex: 0 0 auto;
  width: min(14px, 3.733cqw);
  height: min(14px, 3.733cqw);
  margin-top: min(2px, .533cqw);
  background: var(--color-gold);
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
}

.keywords {
  gap: min(10.6px, 2.827cqw);
  margin-top: min(12px, 3.2cqw);
}

.keyword {
  display: flex;
  align-items: center;
  gap: min(4px, 1.067cqw);
  height: min(28px, 7.467cqw);
  padding: 0 min(7px, 1.867cqw);
  font-size: min(11.5px, 3.067cqw);
  font-weight: 400;
  line-height: 1;
}

.keyword::before {
  content: "";
  display: block;
  width: min(4.4px, 1.173cqw);
  height: min(4.4px, 1.173cqw);
  border-radius: 50%;
  background: currentColor;
}

.result-module {
  margin-top: min(16px, 4.267cqw);
}

.result-module h2 {
  gap: min(8px, 2.133cqw);
  min-height: min(24px, 6.4cqw);
  margin-bottom: 0;
  font-size: min(15px, 4cqw);
  font-weight: 400;
  letter-spacing: .3em;
}

.result-module h2 .h2-mark {
  flex: 0 0 auto;
  width: min(21px, 5.6cqw);
  height: min(22px, 5.867cqw);
  background: url("assets/result-deco/energy-mark.svg") center / contain no-repeat;
}

.energy-copy {
  margin-top: min(9px, 2.4cqw);
  font-size: min(12.5px, 3.333cqw);
  line-height: 1.7;
}

.gift-module {
  margin-top: min(28px, 7.467cqw);
}

.gift-module h2 {
  min-height: 0;
  margin-bottom: min(12px, 3.2cqw);
  font-size: min(15px, 4cqw);
  line-height: 1.2;
  letter-spacing: .13em;
}

.gift-result {
  grid-template-columns: minmax(0, 1fr) min(34.7px, 9.253cqw);
  gap: min(10px, 2.667cqw);
  align-items: start;
  min-height: min(58px, 15.467cqw);
  padding-left: min(24px, 6.4cqw);
  padding-right: 0;
}

.gift-timeline::before {
  top: min(8px, 2.133cqw);
  bottom: min(8px, 2.133cqw);
  left: min(10px, 2.667cqw);
}

.gift-copy::before {
  left: min(-18px, -4.8cqw);
  width: min(7.7px, 2.053cqw);
  height: min(7.7px, 2.053cqw);
  border: 1.6px solid #d8b45f;
  background: #0a0c18;
}

.gift-copy p {
  margin-bottom: 0;
  font-size: min(11px, 2.933cqw);
  line-height: 1.2;
}

.gift-copy strong {
  margin-top: min(6px, 1.6cqw);
  font-size: min(12.5px, 3.333cqw);
  line-height: 1.45;
}

.gift-icon {
  width: min(34.7px, 9.253cqw);
  height: min(34.7px, 9.253cqw);
  border: 0;
  border-radius: 50%;
  background: #eee9dc;
}

.gift-icon .item-icon {
  width: min(21px, 5.6cqw);
  height: min(21px, 5.6cqw);
  object-fit: contain;
}

.dialogue-module {
  margin-top: min(12px, 3.2cqw);
  padding: 0;
}

.dialogue-module article {
  position: relative;
  min-height: min(58px, 15.467cqw);
  margin-top: min(12px, 3.2cqw);
  padding: min(12px, 3.2cqw) min(16px, 4.267cqw) min(11px, 2.933cqw);
  border: 0;
  border-radius: min(8px, 2.133cqw);
  background: #16192c;
}

.dialogue-module article:first-child {
  margin-top: 0;
}

.dialogue-module span {
  display: block;
  padding-left: min(13px, 3.467cqw);
  font-size: min(10.5px, 2.8cqw);
  line-height: 1.15;
}

.dialogue-module span::before {
  content: "\201C";
  position: absolute;
  left: min(16px, 4.267cqw);
  color: #6f7183;
  font-size: min(15px, 4cqw);
  line-height: 1;
}

.dialogue-module p {
  margin-top: min(8px, 2.133cqw);
  font-size: min(13.5px, 3.6cqw);
  line-height: 1.55;
}

.dialogue-module article:first-child::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(0px - min(37px, 9.867cqw));
  width: min(31px, 8.267cqw);
  height: min(34px, 9.067cqw);
  background: var(--dialogue-avatar) center / contain no-repeat;
  transform: translateY(-50%);
}

.dialogue-module article:last-child::before {
  content: "";
  position: absolute;
  top: min(14.9px, 3.973cqw);
  right: min(-27.4px, -7.307cqw);
  width: min(22.6px, 6.027cqw);
  height: min(22.6px, 6.027cqw);
  background: url("assets/result-deco/moon.svg") center / contain no-repeat;
}

.action-module {
  margin-top: min(25px, 6.667cqw);
}

.action-module h2 {
  min-height: 0;
  margin-bottom: min(4px, 1.067cqw);
  font-size: min(16px, 4.267cqw);
  letter-spacing: .3em;
}

.action-module > p {
  margin-bottom: min(14px, 3.733cqw);
  font-size: min(10.5px, 2.8cqw);
  line-height: 1;
}

.action-grid {
  gap: min(29.3px, 7.813cqw);
  padding: 0;
}

.action-grid article {
  min-height: min(72.6px, 19.36cqw);
  padding: min(9px, 2.4cqw) min(3px, .8cqw) min(7px, 1.867cqw);
  background: #fff6df;
}

.action-grid .action-art {
  display: block;
  width: min(28px, 7.467cqw);
  height: min(26px, 6.933cqw);
  margin: 0 auto min(8px, 2.133cqw);
  background: center / contain no-repeat;
}

.action-grid .action-art--watch { background-image: url("assets/result-deco/action-watch.svg"); }
.action-grid .action-art--camera { background-image: url("assets/result-deco/action-camera.svg"); }
.action-grid .action-art--water { background-image: url("assets/result-deco/action-water.svg"); }

.action-grid strong {
  min-height: 0;
  font-size: min(10.5px, 2.8cqw);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.action-grid small {
  display: none;
}

.result-signature {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: min(16px, 4.267cqw) 0 max(min(10px, 2.667cqw), env(safe-area-inset-bottom));
  color: #6c6d7d;
  font-size: min(8px, 2.133cqw);
  letter-spacing: .18em;
  text-align: center;
}

.result-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: min(38.4px, 10.24cqw);
  padding: min(24.5px, 6.533cqw) min(62.5px, 16.667cqw) 0;
  background: #0a0c18;
}

.result-actions button {
  min-height: min(38px, 10.133cqw);
  padding: 0;
  border: 1px solid #bd9e66;
  border-radius: 999px;
  background: transparent;
  color: #dcbd76;
  font-size: min(14.5px, 3.867cqw);
  letter-spacing: .06em;
  clip-path: none;
  box-shadow: none;
}

.result-actions .secondary {
  border-color: #bd9e66;
  background: #bd9e66;
  color: #241a10;
}

@media (min-width: 40rem) {
  .app-shell {
    margin-block: 24px;
    min-height: 812px;
  }

  .screen {
    min-height: 812px;
  }
}

@media (max-width: 350px) {
  .cover h1 { font-size: 35px; }
  .gear-screen { padding-inline: 14px; }
  .choice-grid { gap: 6px; }
  .choice-grid--toy { gap: 7px 12px; }
  .gift-screen { padding-inline: 24px; }
  .scene { width: calc(100% + 48px); margin-inline: -24px; }
  .result-card { padding-inline: 40px; }
  .result-actions { padding-inline: 35px; }
}

.item-choice .item-icon,
.gift-card .item-icon,
.last-item .item-icon,
.gift-icon .item-icon {
  transform: translateY(var(--icon-nudge, 0%));
}

.item-choice[data-item="火柴"] .item-icon,
.item-choice[data-item="镜子"] .item-icon {
  transform: translateY(calc(var(--icon-nudge, 0%) + 4px));
}