:root {
  color-scheme: dark;
  --bg-deep: #0c0c10;
  --surface: #15151c;
  --surface-strong: rgba(10, 10, 16, 0.88);
  --surface-soft: rgba(255, 255, 255, 0.04);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.28);
  --text: #f2f2f2;
  --text-soft: rgba(255, 255, 255, 0.62);
  --text-faint: rgba(255, 255, 255, 0.38);
  --gold: #ffd479;
  --pink: #e08faf;
  --mint: #5eead4;
  --danger: #ff8e9c;
  --booth-mint: #9be7d4;
  --booth-pink: #f3abc4;
  --booth-blue: #a9d9f5;
  --radius-small: 4px;
  --radius-control: 6px;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  --sans: "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  font-family: var(--serif);
  background: var(--bg-deep);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg-deep); }
button { font: inherit; }

.app {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  color: var(--text);
  background: var(--bg-deep);
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  cursor: default;
  background: #111116;
}

.scene-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #151319;
  transition: filter 420ms ease, opacity 420ms ease;
}

.set {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 520ms ease, transform 760ms cubic-bezier(.2,.75,.25,1);
}

.scene-street .set-street,
.scene-shop .set-shop,
.scene-entry .set-shop,
.scene-booth .set-booth,
.scene-camera .set-booth,
.scene-print .set-booth,
.scene-final .set-booth {
  opacity: 1;
  transform: scale(1);
}

.ambient-light,
.film-grain,
.scene-vignette { position: absolute; inset: 0; pointer-events: none; }

.ambient-light { border-radius: 50%; filter: blur(80px); mix-blend-mode: screen; }
.ambient-light-a {
  inset: -24% -8% auto auto;
  width: 52vw;
  height: 52vw;
  background: rgba(255, 174, 199, .2);
}
.ambient-light-b {
  inset: auto auto -30% -12%;
  width: 50vw;
  height: 50vw;
  background: rgba(94, 234, 212, .11);
}
.film-grain {
  z-index: 12;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.scene-vignette {
  z-index: 13;
  background: radial-gradient(circle at 58% 42%, transparent 28%, rgba(7,7,10,.17) 64%, rgba(5,5,8,.58) 100%);
}

/* 文化街店外：店铺位于街区内，角色站立到达，不把照相亭放在街面。 */
.set-street {
  background: linear-gradient(180deg, rgba(255,222,191,.68) 0%, rgba(193,148,145,.42) 37%, rgba(64,44,48,.9) 100%);
}
.street-sky {
  position: absolute;
  inset: 0 0 38%;
  background:
    radial-gradient(circle at 74% 18%, rgba(255,248,212,.94), rgba(255,221,181,.22) 18%, transparent 38%),
    linear-gradient(145deg, #8db5bd 0%, #d9b6ab 52%, #d39ba3 100%);
}
.street-building {
  position: absolute;
  bottom: 24%;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px rgba(21,12,16,.28);
}
.street-building span {
  position: absolute;
  top: 16%;
  width: 16%;
  height: 42%;
  border: 4px solid rgba(45,28,34,.56);
  background: linear-gradient(180deg, rgba(242,208,166,.7), rgba(52,39,48,.72));
}
.building-left {
  left: -3%;
  width: 43%;
  height: 63%;
  background: linear-gradient(104deg, #8a5b50, #b9836e 62%, #8d665d);
  clip-path: polygon(0 6%, 88% 0, 100% 100%, 0 100%);
}
.building-left span:nth-child(1) { left: 12%; }
.building-left span:nth-child(2) { left: 38%; }
.building-left span:nth-child(3) { left: 64%; }
.building-right {
  right: -4%;
  width: 35%;
  height: 69%;
  background: linear-gradient(112deg, #87665f, #60484a);
  clip-path: polygon(12% 0, 100% 8%, 100% 100%, 0 100%);
}
.building-right span:nth-child(1) { left: 31%; }
.building-right span:nth-child(2) { left: 60%; }
.street-awning {
  position: absolute;
  left: 2%;
  top: 44%;
  width: 32%;
  height: 7%;
  transform: skewX(-6deg);
  background: repeating-linear-gradient(90deg, #eff1e7 0 38px, #6f9f92 38px 76px);
  filter: drop-shadow(0 16px 10px rgba(22,12,16,.26));
}
.street-lamp {
  position: absolute;
  left: 35%;
  bottom: 26%;
  width: 10px;
  height: 47%;
  background: linear-gradient(90deg, #17131a, #42333d, #17131a);
}
.street-lamp::before {
  content: "";
  position: absolute;
  top: -42px;
  left: 50%;
  width: 62px;
  height: 74px;
  transform: translateX(-50%);
  border: 6px solid #29222a;
  background: radial-gradient(circle, #ffefbd 0 20%, #f5c879 40%, rgba(245,200,121,.24) 70%);
  clip-path: polygon(22% 0, 78% 0, 100% 86%, 0 86%);
}
.brick-road {
  position: absolute;
  inset: 63% -12% -18%;
  transform: perspective(460px) rotateX(58deg);
  transform-origin: center top;
  background:
    linear-gradient(90deg, rgba(66,31,29,.3) 1px, transparent 1px),
    linear-gradient(rgba(66,31,29,.34) 1px, transparent 1px),
    #9c6254;
  background-size: 84px 38px;
}
.store-front {
  position: absolute;
  z-index: 4;
  right: 8%;
  bottom: 22%;
  width: min(34vw, 520px);
  height: min(58vh, 560px);
  border: 1px solid rgba(255,255,255,.46);
  background: linear-gradient(150deg, #a8e6d6 0%, #78c8ba 54%, #4f9f95 100%);
  box-shadow: 0 40px 90px rgba(28,43,46,.38), inset 0 0 0 4px rgba(255,255,255,.13);
}
.store-cornice {
  position: absolute;
  inset: 0 0 auto;
  height: 18%;
  display: grid;
  place-items: center;
  color: rgba(33,66,63,.68);
  background: rgba(238,255,250,.18);
  font: 600 10px/1 var(--mono);
  letter-spacing: .38em;
}
.store-window {
  position: absolute;
  left: 6%;
  top: 23%;
  bottom: 8%;
  width: 46%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  border: 7px solid rgba(235,255,251,.44);
  background: rgba(15,26,31,.76);
}
.store-window i { border: 1px solid rgba(255,255,255,.18); background: linear-gradient(145deg, rgba(243,171,196,.68), rgba(169,217,245,.26)); }
.store-door {
  position: absolute;
  right: 7%;
  top: 22%;
  bottom: 0;
  width: 36%;
  display: grid;
  place-items: center;
  border: 8px solid rgba(235,255,251,.46);
  border-bottom: 0;
  background: linear-gradient(100deg, rgba(10,14,18,.94), rgba(32,33,41,.78));
}
.store-door::after { content: ""; position: absolute; right: 12%; width: 4px; height: 22%; border-radius: 4px; background: rgba(255,255,255,.64); }
.store-door span { color: rgba(255,255,255,.45); font: 500 8px/1 var(--mono); letter-spacing: .28em; }
.store-sign {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 9%;
  transform: translateX(-50%);
  color: #183a37;
  font-size: clamp(17px, 1.6vw, 26px);
  font-weight: 600;
  letter-spacing: .22em;
  white-space: nowrap;
}
.plush-row { position: absolute; z-index: 3; left: -7%; bottom: -3%; display: flex; align-items: flex-end; gap: 5px; }
.plush-row i {
  position: relative;
  width: clamp(36px, 4vw, 64px);
  aspect-ratio: .88;
  border-radius: 46% 46% 32% 32%;
  background: #f4e5df;
  box-shadow: inset 0 -10px 18px rgba(128,84,89,.14), 0 12px 20px rgba(26,14,20,.2);
}
.plush-row i::before,
.plush-row i::after { content: ""; position: absolute; top: -9%; width: 30%; height: 28%; border-radius: 60% 60% 10% 10%; background: inherit; }
.plush-row i::before { left: 8%; transform: rotate(-18deg); }
.plush-row i::after { right: 8%; transform: rotate(18deg); }
.plush-row i:nth-child(2) { background: #cfaa93; transform: scale(.86); }
.plush-row i:nth-child(3) { background: #efb7c8; transform: scale(.72); }

/* 店内排队：队伍位于店内，尽头才是独立照相亭。 */
.set-shop {
  background:
    radial-gradient(circle at 70% 24%, rgba(158,230,214,.22), transparent 28%),
    linear-gradient(120deg, #35383d 0%, #25272d 46%, #17171d 100%);
}
.shop-ceiling {
  position: absolute;
  inset: 0 0 72%;
  background: linear-gradient(180deg, #202128, #34363b);
  transform: perspective(560px) rotateX(-16deg);
  transform-origin: center top;
}
.shop-ceiling i { position: absolute; top: 34%; width: 20%; height: 5px; background: #fff1d4; box-shadow: 0 0 24px rgba(255,238,203,.7); }
.shop-ceiling i:nth-child(1) { left: 8%; }
.shop-ceiling i:nth-child(2) { left: 40%; }
.shop-ceiling i:nth-child(3) { right: 8%; }
.shop-wall { position: absolute; top: 19%; bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18)); }
.wall-left { left: 0; width: 38%; border-right: 1px solid rgba(255,255,255,.09); }
.wall-right { right: 0; width: 34%; border-left: 1px solid rgba(255,255,255,.09); }
.shop-poster {
  position: absolute;
  top: 27%;
  width: 12%;
  height: 28%;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(255,255,255,.44);
  border: 8px solid rgba(255,255,255,.76);
  background: linear-gradient(145deg, rgba(243,171,196,.54), rgba(169,217,245,.25));
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
  font: 500 8px/1.8 var(--mono);
  letter-spacing: .2em;
}
.poster-one { left: 6%; transform: rotate(-2deg); }
.poster-two { left: 21%; top: 30%; transform: rotate(2deg); }
.queue-lane { position: absolute; z-index: 3; left: 12%; right: 33%; bottom: 19%; height: 30%; border-top: 3px solid rgba(240,213,153,.58); transform: skewY(-4deg); }
.queue-lane i { position: absolute; top: -10px; width: 9px; height: 100%; background: linear-gradient(90deg, #665843, #c8a962, #5e4e37); box-shadow: 0 12px 22px rgba(0,0,0,.26); }
.queue-lane i:nth-child(1) { left: 2%; }
.queue-lane i:nth-child(2) { left: 48%; }
.queue-lane i:nth-child(3) { right: 2%; }
.queue-people { position: absolute; z-index: 4; left: 17%; right: 34%; bottom: 22%; height: 50%; }
.queue-people i { position: absolute; bottom: 0; width: 8%; height: 52%; border-radius: 48% 48% 12% 12%; background: linear-gradient(180deg, #5e5560, #2d2a31); opacity: .62; }
.queue-people i::before { content: ""; position: absolute; top: -20%; left: 50%; width: 72%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #5e5560; }
.queue-people i:nth-child(1) { left: 0; transform: scale(.82); transform-origin: bottom; }
.queue-people i:nth-child(2) { left: 31%; transform: scale(.9); transform-origin: bottom; }
.queue-people i:nth-child(3) { left: 63%; }
.booth-doorway {
  position: absolute;
  z-index: 5;
  right: 6%;
  top: 19%;
  bottom: 5%;
  width: 24%;
  border: 12px solid #83d5c5;
  border-bottom-width: 18px;
  background: linear-gradient(90deg, #17161c, #292732 52%, #111116);
  box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 42px rgba(94,234,212,.08);
}
.booth-doorway span { position: absolute; left: 50%; top: -38px; transform: translateX(-50%); color: rgba(221,255,248,.76); font: 600 8px/1 var(--mono); letter-spacing: .26em; white-space: nowrap; }
.booth-doorway i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #201c27 0 16px, #2d2634 16px 32px); transform-origin: right center; transition: transform 520ms ease; }
.scene-entry .booth-doorway i { transform: perspective(500px) rotateY(-58deg); }

/* 独立照相亭内部。 */
.set-booth {
  background:
    radial-gradient(circle at 58% 24%, rgba(255,255,255,.13), transparent 26%),
    linear-gradient(115deg, #18141d 0%, #272431 46%, #15131a 100%);
}
.booth-wall {
  position: absolute;
  inset: 6% 9% 0;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    rgba(22,20,27,.58);
  background-size: 64px 64px;
  box-shadow: inset 0 0 100px rgba(0,0,0,.38);
}
.booth-light { position: absolute; z-index: 2; top: 8%; bottom: 8%; width: 18px; border-radius: 12px; opacity: .86; }
.booth-light-pink { left: 11%; background: #f3abc4; box-shadow: 0 0 46px rgba(243,171,196,.6); }
.booth-light-blue { right: 11%; background: #a9d9f5; box-shadow: 0 0 46px rgba(169,217,245,.6); }
.booth-curtain { position: absolute; z-index: 2; top: 0; bottom: 0; width: 18%; opacity: .76; background: repeating-linear-gradient(90deg, #16111c 0 20px, #261d2c 20px 42px); }
.curtain-left { left: 0; transform: skewX(-2deg); }
.curtain-right { right: 0; transform: skewX(2deg); }
.booth-camera { position: absolute; z-index: 5; top: 9%; left: 50%; width: 68px; height: 42px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.16); background: #111117; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.booth-camera i { position: absolute; left: 50%; top: 50%; width: 22px; aspect-ratio: 1; transform: translate(-50%,-50%); border: 4px solid #3b3b48; border-radius: 50%; background: radial-gradient(circle, #6da0a5 0 16%, #0d1016 34% 100%); }
.booth-console { position: absolute; z-index: 7; right: 14%; bottom: 8%; width: min(19vw, 270px); height: 38%; padding: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(11,11,16,.86); box-shadow: 0 24px 48px rgba(0,0,0,.36); }
.console-screen { position: relative; height: 66%; padding: 12px; background: linear-gradient(145deg, rgba(159,230,215,.18), rgba(243,171,196,.16)), #171821; border: 1px solid rgba(255,255,255,.1); }
.console-screen span { color: rgba(255,255,255,.52); font-size: 11px; letter-spacing: .18em; }
.console-screen i { position: absolute; right: 12px; bottom: 12px; width: 32px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--booth-pink), var(--booth-blue), var(--booth-mint), var(--booth-pink)); opacity: .72; }
.print-slot { position: absolute; left: 17%; right: 17%; bottom: 13%; height: 8px; border-radius: 6px; background: #050509; box-shadow: inset 0 1px rgba(255,255,255,.12); }

/* 时年身份占位：保留参考图的正常上半身比例，避免用假肢体拼接造成站姿误读。 */
.shinian-figure {
  position: absolute;
  z-index: 8;
  right: 5vw;
  bottom: -12dvh;
  width: min(31vw, 460px);
  height: min(94dvh, 820px);
  pointer-events: none;
  transform-origin: center bottom;
  transition: right 620ms cubic-bezier(.2,.75,.25,1), transform 620ms cubic-bezier(.2,.75,.25,1), opacity 360ms ease;
}
.shinian-figure img { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; width: 100%; height: auto; filter: saturate(.94) drop-shadow(0 20px 28px rgba(0,0,0,.3)); }
.hoodie-body,
.casual-cap,
.face-mask { display: none; }
.scene-street[data-page="N001"] .shinian-figure { opacity: 0; transform: translateX(5%); }
.scene-shop .shinian-figure { right: 13vw; transform: scale(.96); }
.scene-entry .shinian-figure { right: 25vw; transform: translateX(5%) scale(.96); }
.scene-booth .shinian-figure,
.scene-camera .shinian-figure,
.scene-print .shinian-figure,
.scene-final .shinian-figure { right: 22vw; transform: scale(1.02); }
[data-group="K07"] .shinian-figure,
[data-group="K08"] .shinian-figure,
[data-group="K09"] .shinian-figure,
[data-group="K10"] .shinian-figure,
[data-group="K11"] .shinian-figure,
[data-group="K12"] .shinian-figure,
[data-group="K13"] .shinian-figure,
[data-group="K14"] .shinian-figure { transform: translateX(-3%) scale(1.055); }
[data-group="K20"] .shinian-figure { transform: translateX(-8%) scale(1.08); }

/* R3 候选关键帧：整幅画面只承载剧情动作，交互控件仍由真实 DOM 绘制。 */
.keyframe-stage {
  position: absolute;
  z-index: 9;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  background: #111116;
  transition: opacity 260ms ease;
}
.has-keyframe .keyframe-stage { opacity: 1; }
.has-keyframe .set,
.has-keyframe .ambient-light,
.has-keyframe .shinian-figure { opacity: 0 !important; }
.has-keyframe .camera-frame,
.has-keyframe .photo-output { opacity: 0 !important; }
.keyframe-layer {
  position: absolute;
  inset: -1.5%;
  width: 103%;
  height: 103%;
  object-fit: cover;
  object-position: 50% 44%;
  transform: scale(1.015);
  transition: opacity 520ms ease, transform 1500ms cubic-bezier(.18,.72,.2,1);
  will-change: opacity, transform;
}
.keyframe-primary { opacity: 1; }
.keyframe-secondary { opacity: 0; }
.keyframe-stage.is-shutter-cut .keyframe-layer { transition-duration: 80ms; }
.keyframe-stage.is-secondary .keyframe-primary { opacity: 0; }
.keyframe-stage.is-secondary .keyframe-secondary { opacity: 1; transform: scale(1.035); }
.keyframe-stage.is-dolly .keyframe-primary { transform: scale(1.055) translateX(-.7%); }
.keyframe-stage.is-capture-zoom .keyframe-primary { transition-duration: 900ms; }
.keyframe-stage.is-capture-zoom.capture-step-3 .keyframe-primary { transform: scale(1.018); }
.keyframe-stage.is-capture-zoom.capture-step-2 .keyframe-primary { transform: scale(1.032) translateX(-.25%); }
.keyframe-stage.is-capture-zoom.capture-step-1 .keyframe-primary { transform: scale(1.05) translateX(-.6%); }
.keyframe-stage.is-cap-turn .keyframe-primary { transform: scale(1.035) translateY(-.5%); }
.keyframe-stage.is-heart-complete .keyframe-primary { transform: scale(1.045) translateX(-1.2%); }
.keyframe-stage.is-kiss .keyframe-primary { transform: scale(1.065) translateX(-1.2%); }
.keyframe-stage.is-photo-reveal .keyframe-primary { animation: photoReveal 980ms cubic-bezier(.18,.75,.2,1) both; }
@keyframes photoReveal {
  0% { opacity: .35; transform: scale(1.04) translateY(1.4%); }
  100% { opacity: 1; transform: scale(1.015) translateY(0); }
}

.motion-overlay {
  position: absolute;
  z-index: 18;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.motion-overlay::before {
  position: absolute;
  inset: 7% 8% 13%;
  content: "";
  opacity: 0;
  border: 1px solid rgba(255,255,255,.36);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), inset 0 0 96px rgba(0,0,0,.2);
  transition: opacity 120ms ease;
}
.motion-overlay::after {
  position: absolute;
  left: calc(8% + 16px);
  top: calc(7% + 16px);
  content: "PHOTO BOOTH · CAPTURE";
  opacity: 0;
  color: rgba(255,255,255,.72);
  font: 500 8px/1 var(--mono);
  letter-spacing: .22em;
  text-shadow: 0 2px 12px rgba(0,0,0,.78);
  transition: opacity 120ms ease;
}
.motion-overlay.is-lens::before,
.motion-overlay.is-lens::after { opacity: 1; }
.motion-overlay > strong {
  position: absolute;
  left: 50%;
  top: 38%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
  color: rgba(255,255,255,.96);
  font: 500 clamp(62px, 8vw, 118px)/1 var(--mono);
  text-shadow: 0 0 36px rgba(255,255,255,.46), 0 3px 22px rgba(0,0,0,.72);
}
.motion-overlay.is-counting > strong {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 120ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
}
.motion-overlay.is-capture-ready > strong {
  opacity: 1;
  font-size: clamp(30px, 4vw, 58px);
  letter-spacing: .12em;
  transform: translate(-50%, -50%) scale(1);
}
.motion-overlay > p {
  position: absolute;
  left: 50%;
  top: 53%;
  margin: 0;
  opacity: 0;
  transform: translateX(-50%);
  color: rgba(255,255,255,.9);
  font: 500 11px/1 var(--sans);
  letter-spacing: .14em;
  text-shadow: 0 2px 12px rgba(0,0,0,.78);
  transition: opacity 120ms ease;
}
.motion-overlay.is-capture-ready > p,
.motion-overlay.is-counting > p,
.motion-overlay.is-scripted-capture > p { opacity: 1; }
.shutter-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #fff;
  mix-blend-mode: screen;
}
.shutter-flash.is-flashing { animation: shutterFlash 420ms ease-out both; }
@keyframes shutterFlash {
  0% { opacity: 0; }
  14% { opacity: .96; }
  36% { opacity: .72; }
  100% { opacity: 0; }
}
.print-strip-motion {
  position: absolute;
  left: 73%;
  bottom: 12%;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
  width: 58px;
  height: 178px;
  padding: 7px;
  opacity: 0;
  transform: translateY(-86px) rotate(2deg);
  background: #f5f1ec;
  box-shadow: 0 18px 42px rgba(0,0,0,.38);
}
.print-strip-motion i { background: linear-gradient(145deg, #e8a9bf, #a8d9e7 55%, #76c9bb); }
.print-strip-motion.is-printing { animation: printStrip 1250ms cubic-bezier(.18,.75,.2,1) both; }
@keyframes printStrip {
  0% { opacity: 0; transform: translateY(-86px) rotate(2deg); }
  20% { opacity: 1; }
  82%, 100% { opacity: 1; transform: translateY(0) rotate(-2deg); }
}

.camera-frame { position: absolute; z-index: 10; left: 15%; right: 15%; top: 11%; bottom: 18%; opacity: 0; border: 1px solid rgba(255,255,255,.12); transition: opacity 240ms ease; }
.scene-camera .camera-frame,
.scene-final .camera-frame { opacity: 1; }
.camera-frame .corner { position: absolute; width: 26px; height: 26px; border-color: rgba(255,212,121,.74); }
.corner.tl { left: 16px; top: 16px; border-left: 1px solid; border-top: 1px solid; }
.corner.tr { right: 16px; top: 16px; border-right: 1px solid; border-top: 1px solid; }
.corner.bl { left: 16px; bottom: 16px; border-left: 1px solid; border-bottom: 1px solid; }
.corner.br { right: 16px; bottom: 16px; border-right: 1px solid; border-bottom: 1px solid; }
.camera-label { position: absolute; left: 18px; top: 54px; color: rgba(255,255,255,.48); font: 500 8px/1 var(--mono); letter-spacing: .24em; }
.camera-frame strong { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); color: rgba(255,255,255,.9); font: 500 clamp(58px,7vw,104px)/1 var(--mono); text-shadow: 0 0 28px rgba(255,255,255,.32); opacity: 0; }
.scene-camera .camera-frame strong { animation: countdownPulse 1.15s ease-in-out infinite; }
@keyframes countdownPulse { 0%,100% { opacity: .1; transform: translate(-50%,-50%) scale(.92); } 45% { opacity: .92; transform: translate(-50%,-50%) scale(1); } }
.photo-output { position: absolute; z-index: 11; right: 15.5%; bottom: 10%; display: flex; align-items: flex-end; gap: 10px; opacity: 0; transform: translateY(-22px); transition: opacity 360ms ease, transform 520ms ease; }
.scene-print .photo-output,
.scene-final .photo-output { opacity: 1; transform: translateY(0); }
.photo-output span { margin-bottom: 4px; color: rgba(255,255,255,.42); font: 500 8px/1 var(--mono); letter-spacing: .2em; }
.photo-strip,
.ending-photo { display: grid; grid-template-rows: repeat(4, 1fr); gap: 4px; width: 58px; height: 178px; padding: 7px; background: #f5f1ec; box-shadow: 0 18px 40px rgba(0,0,0,.34); }
.photo-strip i,
.ending-photo i { background: linear-gradient(145deg, #e8a9bf, #a8d9e7 55%, #76c9bb); }

/* 剧情 HUD */
.hud { position: absolute; z-index: 30; top: calc(var(--safe-top) + 4px); left: max(24px, calc(var(--safe-left) + 10px)); right: max(24px, calc(var(--safe-right) + 10px)); height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; pointer-events: none; transition: opacity 160ms ease; }
.hud-left { justify-self: start; }
.hud-center { justify-self: center; }
.quick-actions { justify-self: end; display: flex; gap: 8px; pointer-events: auto; }
.back-control,
.quick-actions button { position: relative; border: 0; padding: 0; color: rgba(255,255,255,.76); background: transparent; cursor: pointer; }
.back-control { width: 44px; height: 44px; display: grid; place-items: center; pointer-events: auto; }
.back-control svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transform: translateY(-3px); }
.back-control:disabled { color: rgba(255,255,255,.22); cursor: default; }
.quick-actions button { width: 44px; height: 52px; display: grid; grid-template-rows: 26px 11px; place-items: center; gap: 4px; font-size: 11px; font-weight: 500; line-height: 1; }
.quick-actions svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.quick-actions .icon-play { fill: currentColor; stroke: none; }
.quick-actions button[aria-pressed="true"] { color: var(--gold); }
.back-control:hover:not(:disabled), .quick-actions button:hover { color: #fff; }
.back-control:focus-visible, .quick-actions button:focus-visible, .choice-list button:focus-visible, .ending-panel button:focus-visible, .log-overlay button:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.app:not([data-mode="story"]) .quick-actions,
.app:not([data-mode="story"]) .dialogue-layer,
.app:not([data-mode="story"]) .bottom-fade { opacity: 0; pointer-events: none; }
.app[data-mode="choice"] .scene-art,
.app[data-mode="ending"] .scene-art { filter: brightness(.48) saturate(.78); }

.bottom-fade { position: absolute; z-index: 14; left: 0; right: 0; bottom: 0; height: clamp(250px, 36%, 390px); pointer-events: none; background: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.14) 18%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.78) 100%); transition: opacity 160ms ease; }
.dialogue-layer { position: absolute; z-index: 20; left: clamp(82px, 22vw, 430px); right: clamp(74px, 13vw, 270px); bottom: max(56px, calc(var(--safe-bottom) + 24px)); height: 109.6px; color: var(--text); cursor: default; transition: opacity 160ms ease; }
.speaker-slot { height: 21.6px; line-height: 21.6px; font-size: 18px; font-weight: 600; color: var(--gold); text-shadow: 0 2px 12px rgba(0,0,0,.72); }
.dialogue-layer.is-narration .speaker-slot { visibility: hidden; }
.story-slot { position: relative; height: 76px; margin-top: 12px; overflow: hidden; }
.story-slot p { position: absolute; inset: 0; margin: 0; color: var(--text); font-size: 20px; font-weight: 500; line-height: 38px; letter-spacing: .025em; white-space: pre-wrap; line-break: strict; word-break: normal; overflow-wrap: normal; text-align: left; text-shadow: 0 2px 14px rgba(0,0,0,.92); }
#storyReserve { visibility: hidden; pointer-events: none; }
.ui-hidden .hud,
.ui-hidden .dialogue-layer,
.ui-hidden .bottom-fade { opacity: 0; pointer-events: none; }

/* 决策与结果 */
.choice-panel,
.ending-panel { position: absolute; z-index: 40; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: auto; text-align: left; }
.choice-panel { width: min(720px, calc(100% - 48px)); max-height: calc(100% - 48px); }
.choice-panel::before { content: ""; position: fixed; z-index: -1; inset: 0; background: radial-gradient(circle at center, rgba(15,16,22,.2), rgba(7,7,11,.74)); pointer-events: none; }
.choice-label,
.ending-label { margin: 0 0 8px; color: rgba(255,212,121,.72); font-family: var(--mono); font-size: 9px; line-height: 1.2; letter-spacing: .3em; }
.choice-panel h2,
.ending-panel h2 { margin: 0 0 24px; font-size: 20px; line-height: 1.2; font-weight: 600; }
.choice-list { display: grid; gap: 12px; }
.choice-list button {
  min-height: 72px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  background: rgba(11, 11, 16, .84);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.choice-list button:hover { border-color: rgba(255,212,121,.58); background: rgba(255,255,255,.07); }
.choice-list button:active,
.choice-list button.is-selected { border: 2px solid var(--gold); background: rgba(255,212,121,.065); color: #fff6df; }
.choice-list button:disabled { cursor: default; opacity: .48; }
.choice-list button.is-selected:disabled { opacity: 1; }
.choice-list button > b { color: var(--gold); font: 600 14px/1 var(--mono); }
.choice-list button > span { display: grid; gap: 8px; }
.choice-list strong { font: 600 14px/1.4 var(--serif); }
.choice-list small { color: var(--text-soft); font: 400 11px/1.5 var(--sans); }
.ending-panel { width: min(760px, calc(100% - 48px)); min-height: 340px; padding: 32px 32px 32px 230px; border: 1px solid var(--line); background: linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), var(--surface-strong); box-shadow: 0 40px 100px rgba(0,0,0,.48); }
.ending-photo { position: absolute; left: 58px; top: 50%; width: 92px; height: 270px; transform: translateY(-50%) rotate(-3deg); gap: 6px; padding: 10px; }
.ending-panel h2 { margin-top: 56px; font-size: 26px; letter-spacing: .08em; }
.ending-panel > p:not(.ending-label) { margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.7; }
.ending-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ending-panel button { min-height: 44px; margin: 0; padding: 0 16px; border: 1px solid var(--gold); border-radius: var(--radius-control); color: #16130c; background: var(--gold); font-size: 14px; font-weight: 600; cursor: pointer; }
.ending-panel button.secondary { color: var(--gold); background: transparent; }

/* 回顾与轻提示 */
.log-overlay { position: fixed; z-index: 80; inset: 0; display: grid; grid-template-rows: 56px minmax(0, 1fr); padding: max(24px, calc(var(--safe-top) + 10px)) max(24px, calc(var(--safe-right) + 10px)) max(24px, calc(var(--safe-bottom) + 10px)) max(24px, calc(var(--safe-left) + 10px)); overflow: hidden; background: rgba(10,10,16,.88); backdrop-filter: blur(18px); }
.log-overlay header { display: flex; align-items: center; justify-content: space-between; }
.log-overlay h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; }
.log-overlay button { min-width: 44px; height: 44px; border: 0; padding: 0; color: var(--text-soft); background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; }
.log-overlay button:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.log-content { min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 16px max(0px, calc((100% - 860px) / 2)) 32px; }
.log-entry { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 24px; margin-bottom: 24px; }
.log-entry strong { color: var(--gold); font-size: 14px; line-height: 1.8; font-weight: 600; }
.log-entry p { margin: 0; color: var(--text); font-size: 16px; line-height: 1.8; }
.log-entry.narration { grid-template-columns: 1fr; }
.log-entry.narration strong { display: none; }
.toast { position: absolute; z-index: 90; top: calc(var(--safe-top) + 64px); left: 50%; max-width: min(480px, calc(100% - 48px)); transform: translateX(-50%); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--text); background: var(--surface-strong); font-family: var(--sans); font-size: 11px; line-height: 1.5; }
.rotate-overlay { display: none; }

@media (max-width: 1000px), (max-height: 560px) {
  .hud { left: max(14px, var(--safe-left)); right: max(14px, var(--safe-right)); height: 44px; }
  .quick-actions { gap: 6px; }
  .quick-actions button { height: 44px; grid-template-rows: 22px 10px; gap: 2px; font-size: 10px; }
  .quick-actions svg { width: 22px; height: 22px; }
  .back-control svg { width: 16px; height: 16px; }
  .store-front { right: 3%; bottom: 18%; width: 36vw; height: 60vh; }
  .store-sign { font-size: 15px; letter-spacing: .14em; }
  .street-lamp { left: 34%; }
  .shop-poster { top: 23%; height: 25%; border-width: 5px; }
  .booth-doorway { top: 15%; bottom: 3%; }
  .queue-lane { bottom: 14%; }
  .queue-people { bottom: 18%; }
  .booth-console { right: 12%; bottom: 4%; width: 22vw; height: 40%; padding: 8px; }
  .shinian-figure { right: 2vw; bottom: -8dvh; width: 38vw; height: 96dvh; }
  .scene-shop .shinian-figure { right: 12vw; }
  .scene-entry .shinian-figure { right: 21vw; }
  .scene-booth .shinian-figure,
  .scene-camera .shinian-figure,
  .scene-print .shinian-figure,
  .scene-final .shinian-figure { right: 20vw; }
  .dialogue-layer { left: max(64px, calc(var(--safe-left) + 36px), 16vw); right: max(24px, calc(var(--safe-right) + 14px), 4vw); bottom: max(30px, calc(var(--safe-bottom) + 14px)); height: 80.8px; }
  .speaker-slot { height: 16.8px; font-size: 14px; line-height: 16.8px; }
  .story-slot { height: 56px; margin-top: 8px; }
  .story-slot p { font-size: 16px; line-height: 28px; }
  .bottom-fade { height: clamp(170px, 54%, 230px); background: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.18) 18%, rgba(0,0,0,.66) 55%, rgba(0,0,0,.8) 100%); }
  .choice-panel { width: min(720px, calc(100% - 48px)); }
  .choice-label,.ending-label { font-size: 8.5px; }
  .choice-panel h2,.ending-panel h2 { margin-bottom: 16px; font-size: 17px; }
  .choice-list { gap: 8px; }
  .choice-list button { min-height: 72px; padding: 10px 14px; }
  .ending-panel { min-height: 270px; padding: 20px 24px 20px 178px; }
  .ending-panel h2 { margin-top: 34px; }
  .ending-panel > p:not(.ending-label) { font-size: 13px; }
  .ending-photo { left: 42px; width: 72px; height: 210px; }
  .log-overlay { grid-template-rows: 48px minmax(0,1fr); padding: max(14px,var(--safe-top)) max(14px,var(--safe-right)) max(14px,var(--safe-bottom)) max(14px,var(--safe-left)); }
  .log-overlay h2 { font-size: 18px; }
  .log-content { padding-top: 16px; }
  .log-entry { grid-template-columns: 72px minmax(0,1fr); gap: 16px; margin-bottom: 24px; }
  .log-entry strong { font-size: 13px; }
  .log-entry p { font-size: 14px; }
}

@media (max-width: 760px) and (orientation: landscape) {
  .store-front { width: 42vw; right: -2%; }
  .building-left { width: 47%; }
  .street-lamp { display: none; }
  .shop-poster { display: none; }
  .queue-people { left: 8%; right: 30%; }
  .booth-doorway { right: 2%; width: 28%; }
  .shinian-figure { width: 42vw; right: -5vw; }
  .scene-shop .shinian-figure { right: 9vw; }
  .scene-entry .shinian-figure { right: 17vw; }
  .scene-booth .shinian-figure,
  .scene-camera .shinian-figure,
  .scene-print .shinian-figure,
  .scene-final .shinian-figure { right: 15vw; }
  .camera-frame { left: 9%; right: 9%; top: 9%; bottom: 13%; }
  .photo-output { right: 7%; bottom: 5%; }
  .photo-strip { width: 44px; height: 132px; padding: 5px; gap: 3px; }
  .photo-output span { display: none; }
  .print-strip-motion { left: auto; right: 8%; bottom: 6%; width: 44px; height: 132px; padding: 5px; gap: 3px; }
}

@media (max-width: 600px) and (pointer: fine) {
  .hud { left: 14px; right: 14px; }
  .dialogue-layer { left: 24px; right: 24px; }
  .choice-panel { width: calc(100% - 32px); }
}

@media (pointer: coarse) and (orientation: portrait),
       (pointer: coarse) and (max-aspect-ratio: 1 / 1) {
  .rotate-overlay {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 12px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(32px, var(--safe-top)) max(32px, var(--safe-right)) max(32px, var(--safe-bottom)) max(32px, var(--safe-left));
    text-align: center;
    background: #0c0c10;
  }
  .rotate-overlay p { margin: 0; color: rgba(255,212,121,.72); font-family: var(--mono); font-size: 9px; letter-spacing: .55em; }
  .rotate-overlay h2 { margin: 0; font-size: 22px; letter-spacing: .18em; }
  .rotate-overlay span { color: var(--text-soft); font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .keyframe-stage.is-secondary .keyframe-primary { opacity: 0; }
  .keyframe-stage.is-secondary .keyframe-secondary { opacity: 1; }
}