:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  background: #101126;
  color: #f8f2fb;
  --pink: #e94560;
  --purple: #533483;
  --muted: #aaa4c3;
  --line: rgba(207, 187, 237, .15);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 82% 4%, rgba(113, 51, 138, .26), transparent 32%), radial-gradient(circle at 7% 55%, rgba(202, 54, 109, .12), transparent 29%), #101126; }
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid #ff91ad; outline-offset: 3px; }
button:active { transform: scale(.96) !important; }
.app-shell { width: min(1180px, calc(100% - 48px)); margin: auto; min-height: 100vh; display: flex; flex-direction: column; }
.site-header { height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; font-size: 25px; color: #fff; border-radius: 13px; background: linear-gradient(135deg, #e94560, #703796); box-shadow: 0 7px 24px rgba(233,69,96,.3); }
.brand strong { display: block; font-size: 18px; letter-spacing: .09em; line-height: 1.2; }
.brand small { display: block; margin-top: 4px; font-size: 9px; letter-spacing: .23em; color: #a99bc5; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.chapter-pill, .sound-button { border: 1px solid var(--line); border-radius: 99px; color: #ded3eb; background: rgba(255,255,255,.04); }
.chapter-pill { padding: 11px 18px; font-size: 12px; letter-spacing: .08em; }
.sound-button { padding: 10px 15px; display: flex; align-items: center; gap: 7px; transition: background .2s, border-color .2s, transform .2s; font-size: 12px; }
.sound-button:hover { background: rgba(233,69,96,.14); border-color: rgba(233,69,96,.5); transform: translateY(-2px); }
.sound-button[aria-pressed="true"] { border-color: rgba(233,69,96,.65); background: rgba(233,69,96,.13); }
main { flex: 1; }
.scene { padding: 50px 0 72px; opacity: 0; transform: translateY(10px); transition: opacity .28s ease, transform .28s ease; }
.scene.is-active { opacity: 1; transform: translateY(0); }
.scene[hidden], [hidden] { display: none !important; }
.scene-intro { text-align: center; margin-bottom: 36px; }
.eyebrow { margin: 0 0 12px; color: #f381a7; font-weight: 700; letter-spacing: .22em; font-size: 11px; }
h1, h2, p { margin-top: 0; }
.scene-intro h1, .finale-card h1 { margin-bottom: 10px; font-size: clamp(28px, 3.7vw, 44px); line-height: 1.3; letter-spacing: .02em; }
.scene-intro h1 span, .finale-card h1 span { color: #f080a1; }
.scene-intro > p:last-child { color: var(--muted); font-size: 14px; margin: 0; }
.dress-layout { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(510px, 1.1fr); gap: 22px; align-items: stretch; }
.preview-card, .wardrobe-card, .video-card, .chapter-complete, .finale-card { border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(147deg, rgba(43, 38, 75, .91), rgba(30, 28, 58, .96)); box-shadow: 0 18px 55px rgba(4, 4, 20, .25); }
.preview-card { padding: 22px; display: flex; flex-direction: column; min-height: 565px; }
.preview-heading { display: flex; justify-content: space-between; color: #c9b5df; letter-spacing: .19em; font-size: 10px; font-weight: 700; }
.preview-sparkle { color: #d872a3; font-size: 16px; letter-spacing: .1em; }
.portrait-frame { position: relative; flex: 1; min-height: 445px; margin: 16px 0; border-radius: 17px; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, rgba(125, 77, 155, .38), transparent 65%), linear-gradient(170deg, #302a58, #25243d 73%); border: 1px solid rgba(227,193,245,.12); }
.portrait-frame::before { content: ""; position: absolute; inset: 8% 12%; border: 1px solid rgba(233, 176, 222, .12); border-radius: 48% 48% 4px 4px; }
.portrait-frame::after { content: ""; position: absolute; height: 75px; bottom: -38px; left: 15%; right: 15%; border-radius: 50%; background: rgba(12, 9, 29, .46); filter: blur(13px); }
.portrait-halo { position: absolute; inset: 16% 17% 11%; border-radius: 50%; border: 1px solid rgba(248, 181, 225, .15); box-shadow: 0 0 0 25px rgba(211,138,217,.025), 0 0 0 58px rgba(211,138,217,.018); }
.portrait-stage { position: absolute; width: min(100%, 390px); aspect-ratio: 4 / 5; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1; }
.outfit-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 13px 13px rgba(4,0,20,.3)); }
.outfit-layer.layer-enter { animation: layerAppear .33s ease both; }
@keyframes layerAppear { from { opacity: .15; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.portrait-star { position: absolute; color: #efb0d2; z-index: 2; text-shadow: 0 0 18px #ec77b8; }
.star-one { top: 18%; right: 13%; font-size: 25px; }.star-two { top: 42%; left: 11%; font-size: 19px; }
.preview-footer { display: flex; align-items: center; gap: 9px; color: #bdb0d2; font-size: 12px; }
.preview-dot, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ee829e; box-shadow: 0 0 10px #e94560; }
.wardrobe-card { padding: 27px 28px 25px; }
.wardrobe-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.wardrobe-heading .eyebrow { margin-bottom: 5px; font-size: 10px; }.wardrobe-heading h2 { font-size: 23px; margin: 0; }
.selection-count { border-radius: 99px; padding: 8px 11px; color: #d7c5e5; background: rgba(233, 69, 96, .11); font-size: 11px; white-space: nowrap; }
.option-group { border: 0; padding: 19px 0 0; margin: 0; min-width: 0; }
.option-group legend { float: left; width: 100%; margin-bottom: 12px; font-size: 15px; font-weight: 700; }
.option-group legend small { font-size: 10px; color: #a89abf; letter-spacing: .16em; margin-left: 6px; }
.group-number { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; color: #f5b7cd; background: rgba(233,69,96,.16); border-radius: 8px; font-size: 10px; }
.option-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; clear: both; }
.outfit-option { min-height: 77px; border-radius: 12px; border: 1px solid rgba(210, 190, 234, .15); background: rgba(255,255,255,.035); color: #ebe3f1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 12px; transition: transform .18s, background .18s, border-color .18s, box-shadow .18s; }
.outfit-option:hover { transform: translateY(-3px); background: rgba(228, 96, 150, .12); border-color: rgba(233, 127, 174, .5); }
.outfit-option.is-selected { background: linear-gradient(145deg, rgba(233,69,96,.26), rgba(100,55,145,.35)); border-color: #ee799f; box-shadow: inset 0 0 0 1px rgba(242,139,171,.15), 0 5px 18px rgba(233,69,96,.13); }
.option-emoji { font-size: 23px; line-height: 1.1; }
.primary-button, .secondary-button, .demo-button { border: 0; border-radius: 12px; min-height: 48px; padding: 12px 22px; font-weight: 700; transition: transform .18s, filter .18s, box-shadow .18s, background .18s; }
.primary-button { color: #fff; background: linear-gradient(105deg, #e94560, #b4478f); box-shadow: 0 9px 22px rgba(233,69,96,.23); }
.primary-button:hover { transform: translateY(-3px); filter: brightness(1.13); box-shadow: 0 13px 28px rgba(233,69,96,.31); }
.finish-button { width: 100%; display: flex; justify-content: center; align-items: center; gap: 14px; }
.finish-button span { font-size: 20px; font-weight: 400; }
.video-intro { margin-bottom: 28px; }
.video-card { max-width: 860px; margin: auto; padding: 16px; }
.video-topline { display: flex; align-items: center; gap: 9px; padding: 3px 5px 15px; color: #ddd1ed; font-size: 12px; }
.video-topline-end { margin-left: auto; color: #897da6; letter-spacing: .16em; font-size: 10px; }
.video-frame { width: 100%; aspect-ratio: 9 / 16; min-height: 300px; border-radius: 13px; overflow: hidden; background: #16162b; position: relative; }
#story-video { width: 100%; height: 100%; object-fit: contain; background: #090914; }
.video-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; text-align: center; background: radial-gradient(circle at 50% 45%, rgba(121,61,146,.46), transparent 37%), radial-gradient(circle at 82% 80%, rgba(233,69,96,.13), transparent 27%), linear-gradient(135deg, #252241, #17172d); }
.video-placeholder-art { height: 83px; display: flex; justify-content: center; align-items: center; gap: 8px; color: #e88caf; text-shadow: 0 0 25px rgba(242, 110, 166, .75); }
.video-placeholder-art span:first-child { font-size: 28px; transform: translateY(-20px); }.video-placeholder-art span:nth-child(2) { font-size: 76px; line-height: 1; }.video-placeholder-art span:last-child { font-size: 25px; transform: translateY(22px); }
.placeholder-kicker { color: #e893b2; font-size: 10px; letter-spacing: .23em; margin: 6px 0 8px; }
.video-placeholder h2 { font-size: clamp(20px, 3vw, 29px); margin-bottom: 7px; }.video-placeholder p:not(.placeholder-kicker) { color: #b5a9c8; font-size: 12px; margin-bottom: 17px; }
.demo-button { min-height: 39px; padding: 8px 17px; color: #fff; background: rgba(233,69,96,.24); border: 1px solid rgba(249,142,181,.66); font-size: 12px; }
.demo-button:hover { transform: translateY(-2px); background: rgba(233,69,96,.42); }
.demo-progress { margin-top: 18px; width: min(250px, 70%); height: 4px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; }
.demo-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: #ef819f; transition: width .1s linear; }
.video-footnote { text-align: center; color: #a89bbc; font-size: 11px; padding: 14px 4px 1px; }.video-footnote span { color: #ed789e; margin-right: 4px; }
.chapter-complete { max-width: 860px; margin: 19px auto 0; padding: 28px; text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .45s, transform .45s; }
.chapter-complete.is-visible { opacity: 1; transform: translateY(0); }.complete-symbol { color: #f29cb7; font-size: 34px; margin-bottom: 3px; }.chapter-complete h2 { font-size: 28px; margin-bottom: 8px; }.chapter-complete > p:not(.eyebrow) { font-size: 13px; color: var(--muted); }
.navigation-buttons { display: flex; justify-content: center; gap: 12px; margin-top: 23px; }.navigation-buttons button { min-width: 150px; }
.secondary-button { color: #eee3f5; border: 1px solid rgba(213, 185, 231, .28); background: rgba(255,255,255,.055); }.secondary-button:hover { transform: translateY(-3px); background: rgba(255,255,255,.11); }
#scene-finale { display: flex; min-height: 70vh; align-items: center; justify-content: center; }.finale-card { width: min(600px,100%); text-align: center; padding: 62px 38px; background: radial-gradient(circle at 50% 0, rgba(233,69,96,.17), transparent 44%), linear-gradient(147deg, #30264f, #201d3a); }.finale-stars { color: #eea4c5; letter-spacing: 1em; margin-bottom: 23px; font-size: 28px; }.finale-card p:not(.eyebrow) { line-height: 1.8; color: var(--muted); font-size: 14px; max-width: 390px; margin: 15px auto 28px; }
.site-footer { text-align: center; padding: 20px 0 26px; color: #7f789b; font-size: 11px; letter-spacing: .06em; }.site-footer span { color: #c46695; }
.modal-backdrop { position: fixed; z-index: 20; inset: 0; background: rgba(7, 6, 19, .7); display: grid; place-items: center; padding: 20px; backdrop-filter: blur(6px); }.modal-card { width: min(370px,100%); border: 1px solid rgba(242,159,198,.35); background: #292342; border-radius: 20px; padding: 32px; text-align: center; box-shadow: 0 25px 70px rgba(0,0,0,.36); animation: modalEnter .22s ease; }.modal-icon { color: #f099ba; font-size: 31px; }.modal-card h2 { margin: 9px 0; }.modal-card p { color: #c3b6d0; font-size: 13px; line-height: 1.7; }.modal-card button { margin-top: 10px; width: 100%; }@keyframes modalEnter { from { opacity: 0; transform: scale(.93); } to { opacity: 1; transform: scale(1); } }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 25px; transform: translate(-50%, 20px); padding: 10px 17px; border-radius: 99px; color: #fff; background: #56366d; box-shadow: 0 8px 28px #0807168c; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) { .dress-layout { grid-template-columns: minmax(285px, .8fr) minmax(380px, 1.2fr); }.wardrobe-card { padding: 22px; }.preview-card { min-height: 540px; }.portrait-frame { min-height: 420px; } }
@media (max-width: 720px) { .app-shell { width: min(100% - 28px, 520px); }.site-header { height: 75px; }.scene { padding: 37px 0 55px; }.scene-intro { margin-bottom: 25px; }.dress-layout { display: flex; flex-direction: column; gap: 15px; }.preview-card { min-height: 0; padding: 16px; }.portrait-frame { flex: auto; height: min(98vw, 445px); min-height: 0; margin: 13px 0; }.portrait-stage { width: min(100%, 375px); }.wardrobe-card { padding: 21px; }.video-frame { min-height: 255px; }.video-card { padding: 11px; } }
@media (max-width: 440px) { .brand strong { font-size: 15px; }.brand small { font-size: 8px; }.brand-mark { width: 36px; height: 36px; }.chapter-pill { display: none; }.sound-button { padding: 9px 11px; }.option-grid { gap: 6px; }.outfit-option { font-size: 11px; min-height: 73px; }.video-placeholder-art { height: 55px; }.video-placeholder-art span:nth-child(2) { font-size: 56px; }.video-placeholder p:not(.placeholder-kicker) { max-width: 245px; line-height: 1.5; }.navigation-buttons { flex-direction: column; }.navigation-buttons button { width: 100%; } }

/* 页面在宽屏浏览器中保持居中的手机画布。 */
.app-shell { width: min(1180px, calc(100% - 48px)); min-height: 100dvh; }
.intro-overlay { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; overflow: hidden; background: #080811; transition: opacity .35s ease, visibility .35s ease; }
.intro-overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-video { width: 100%; height: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: #080811; }
.intro-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,7,20,.32), transparent 35%, rgba(8,7,20,.38)); }
.intro-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #eadced; font-size: 13px; letter-spacing: .12em; text-shadow: 0 2px 14px #000; transition: opacity .2s; }
.intro-loading.is-hidden { opacity: 0; }
.intro-skip { position: absolute; z-index: 2; top: clamp(18px, 4vw, 46px); right: clamp(18px, 4vw, 46px); width: clamp(118px, 16vw, 190px); padding: 0; border: 0; background: transparent; opacity: 0; transform: translateY(-8px) scale(.96); transition: opacity .25s, transform .25s, filter .2s; }
.intro-skip img { display: block; width: 100%; height: auto; }.intro-skip.is-visible { opacity: 1; transform: translateY(0) scale(1); }.intro-skip:hover { filter: brightness(1.16) drop-shadow(0 0 14px rgba(246, 112, 160, .65)); }
.site-header { height: 92px; }
.chapter-pill { display: inline-block; }
.scene { padding: 50px 0 72px; }
.scene-intro { margin-bottom: 36px; }
.scene-intro h1 { font-size: clamp(28px, 3.7vw, 44px); }
.scene-intro > p:last-child { font-size: 14px; line-height: 1.5; }
.dress-layout { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(510px, 1.1fr); gap: 22px; align-items: stretch; }
.preview-card { min-height: 565px; padding: 22px; }
.portrait-frame { flex: 1; width: auto; height: auto; aspect-ratio: 1; min-height: 0; margin: 16px 0; }
.portrait-stage { width: min(100%, 335px); }
.look-preview { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #f5f3f4; }
.portrait-frame::before, .portrait-frame::after, .portrait-frame .portrait-halo, .portrait-frame .portrait-star { display: none; }
.look-list { display: grid; gap: 9px; margin-top: 16px; }
.look-option { width: 100%; min-height: 87px; display: flex; align-items: center; gap: 12px; padding: 7px 12px 7px 7px; color: #f5edf6; text-align: left; border: 1px solid rgba(210, 190, 234, .18); border-radius: 13px; background: rgba(255,255,255,.04); transition: transform .18s, border-color .18s, background .18s, box-shadow .18s; }
.look-option:hover { transform: translateY(-2px); border-color: rgba(233, 127, 174, .55); background: rgba(233, 69, 96, .1); }
.look-option.is-selected { border-color: #ee799f; background: linear-gradient(100deg, rgba(233,69,96,.22), rgba(100,55,145,.28)); box-shadow: 0 5px 18px rgba(233,69,96,.12); }
.look-option img { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 8px; object-fit: contain; background: #f6f4f5; }
.look-option-copy { display: grid; gap: 6px; min-width: 0; }.look-option-copy strong { font-size: 14px; }.look-option-copy small { color: #bcb1cd; font-size: 11px; line-height: 1.35; }
.look-check { margin-left: auto; width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border: 1px solid #82718f; border-radius: 50%; color: transparent; font-size: 13px; }
.look-option.is-selected .look-check { background: #e94560; border-color: #e94560; color: #fff; }
.look-note { margin: 13px 0 0; color: #a99dbb; font-size: 11px; line-height: 1.6; }
.wardrobe-card { padding: 27px 28px 25px; }
.wardrobe-heading { padding-bottom: 14px; }
.wardrobe-heading h2 { font-size: 23px; }
.action-dock { position: static; width: auto; transform: none; padding: 0; background: none; border: 0; }
.finish-button { min-height: 48px; margin-top: 25px; }
.video-intro { margin-bottom: 18px; }
.video-card { max-width: 860px; padding: 16px; }
.video-frame { aspect-ratio: 9 / 16; min-height: 300px; max-height: none; }
.video-placeholder { padding: 18px; }
.video-placeholder-art { height: 83px; }
.video-placeholder-art span:nth-child(2) { font-size: 76px; }
.video-placeholder h2 { font-size: clamp(20px, 3vw, 29px); }
.video-placeholder p:not(.placeholder-kicker) { max-width: none; line-height: 1.5; }
.demo-button { min-height: 39px; }
.chapter-complete { padding: 28px; }
.navigation-buttons { display: flex; }
.navigation-buttons button { min-width: 150px; }
.finale-card { padding: 62px 38px; }

@media (max-width: 440px) {
  .app-shell { width: calc(100% - 24px); }
  .scene { padding-top: 22px; }
  .portrait-frame { height: auto; }
  .action-dock { padding-left: 12px; padding-right: 12px; }
  .video-frame { max-height: none; }
  .navigation-buttons { grid-template-columns: 1fr; }
}

@media (max-height: 700px) and (max-width: 600px) {
  .portrait-frame { height: auto; }
  .scene-intro { margin-bottom: 13px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* 最终竖屏约束：所有主要画面统一按 9:16 手机画布设计。 */
.app-shell { width: min(calc(100% - 28px), 480px); min-height: 100dvh; }
.site-header { height: 68px; }
.chapter-pill { display: none; }
.scene { padding: 28px 0 42px; }
.scene-intro { margin-bottom: 18px; }
.scene-intro h1 { font-size: clamp(25px, 7vw, 32px); }
.scene-intro > p:last-child { font-size: 12px; line-height: 1.5; }
.dress-layout { display: flex; flex-direction: column; gap: 14px; }
.preview-card { min-height: 0; padding: 14px; }
.portrait-frame { width: 100%; height: auto; aspect-ratio: 1; min-height: 0; margin: 10px 0; }
.wardrobe-card { padding: 18px; }
.wardrobe-heading h2 { font-size: 19px; }
.action-dock { position: sticky; z-index: 8; bottom: 0; width: auto; transform: none; margin: 12px -14px -42px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, #17152e 75%, rgba(23,21,46,.94)); border-top: 1px solid var(--line); }
.finish-button { min-height: 52px; margin-top: 0; }
.video-card { width: 100%; max-width: 480px; padding: 10px; }
.video-frame { aspect-ratio: 9 / 16; min-height: 0; height: auto; max-height: none; }
.video-placeholder { padding: 25px; }
.video-placeholder-art { height: 83px; }
.video-placeholder-art span:nth-child(2) { font-size: 76px; }
.video-placeholder h2 { font-size: 25px; }
.video-placeholder p:not(.placeholder-kicker) { max-width: 250px; line-height: 1.7; }
.demo-button { min-height: 45px; }
.chapter-complete { padding: 25px 20px; }
.navigation-buttons { display: grid; grid-template-columns: 1fr 1fr; }
.navigation-buttons button { min-width: 0; }
.finale-card { padding: 55px 25px; }
.intro-canvas { position: relative; width: min(100vw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100vw * 16 / 9)); aspect-ratio: 9 / 16; }
.intro-video { width: 100%; height: 100%; aspect-ratio: 9 / 16; object-fit: contain; }
.intro-skip { top: max(18px, env(safe-area-inset-top)); right: 16px; width: clamp(112px, 31%, 152px); filter: drop-shadow(0 2px 7px rgba(39, 4, 25, .9)); }
.intro-skip:hover { filter: brightness(1.16) drop-shadow(0 0 12px rgba(246, 112, 160, .85)); }

@media (max-width: 440px) {
  .app-shell { width: calc(100% - 24px); }
  .scene { padding-top: 22px; }
  .action-dock { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .navigation-buttons { grid-template-columns: 1fr; }
}

/* 暧昧故事主题：酒红、暖粉与香槟金。 */
:root { background: #1b101a; color: #fff2ef; --pink: #d96b82; --purple: #69374c; --muted: #c7aeb7; --line: rgba(249, 194, 198, .19); }
body { background: radial-gradient(circle at 75% 0%, rgba(143, 60, 82, .26), transparent 36%), radial-gradient(circle at 12% 72%, rgba(183, 111, 105, .13), transparent 30%), #1b101a; }
button:focus-visible { outline-color: #f0b6a7; }
.brand-mark { background: linear-gradient(145deg, #c85e77, #8b415b); box-shadow: 0 8px 22px rgba(180, 67, 101, .27); font-size: 20px; }
.brand strong { font-size: clamp(13px, 3.8vw, 17px); letter-spacing: .015em; }
.brand small { color: #d5aeb7; letter-spacing: .11em; font-size: 8px; }
.eyebrow { color: #e8a9ac; }
.scene-intro h1 span, .finale-card h1 span { color: #edaeb2; }
.preview-card, .wardrobe-card, .video-card, .chapter-complete, .finale-card { background: linear-gradient(150deg, rgba(68, 38, 53, .96), rgba(39, 25, 37, .98)); box-shadow: 0 18px 55px rgba(20, 5, 13, .28); }
.preview-heading, .preview-footer, .look-note { color: #d6bac1; }
.preview-sparkle, .video-footnote span, .site-footer span, .complete-symbol { color: #efb1a9; }
.selection-count { color: #f4c9c9; background: rgba(225, 132, 144, .14); }
.look-option { border-color: rgba(242, 185, 191, .2); background: rgba(255, 226, 226, .045); }
.look-option:hover { border-color: #d997a2; background: rgba(211, 112, 133, .13); }
.look-option.is-selected { border-color: #eaa5af; background: linear-gradient(100deg, rgba(214, 100, 125, .27), rgba(136, 62, 86, .3)); box-shadow: 0 5px 20px rgba(197, 74, 105, .16); }
.look-option-copy small { color: #d5b9c0; }
.look-option.is-selected .look-check { background: #d06a80; border-color: #d06a80; }
.primary-button { background: linear-gradient(105deg, #c85773, #ad6172 53%, #d8998c); box-shadow: 0 9px 24px rgba(169, 56, 88, .27); }
.primary-button:hover { box-shadow: 0 13px 28px rgba(185, 66, 97, .32); }
.secondary-button { color: #f9e4e4; border-color: rgba(242, 187, 190, .32); background: rgba(255, 222, 224, .06); }
.action-dock { background: linear-gradient(to top, #291822 77%, rgba(41, 24, 34, .95)); }
.sound-button { color: #f5d9dd; border-color: rgba(242, 187, 190, .26); }
.sound-button:hover, .sound-button[aria-pressed="true"] { background: rgba(207, 106, 132, .18); border-color: #d591a0; }
.video-placeholder { background: radial-gradient(circle at 50% 45%, rgba(159, 74, 100, .4), transparent 40%), linear-gradient(145deg, #4a293b, #241722); }
.video-placeholder-art, .placeholder-kicker { color: #f2b7b7; }
.demo-button { background: rgba(203, 94, 123, .25); border-color: #e5a5ad; }
.demo-button:hover { background: rgba(203, 94, 123, .42); }
.demo-progress span { background: #e9a4a9; }
.finale-card { background: radial-gradient(circle at 50% 0, rgba(213, 119, 133, .23), transparent 44%), linear-gradient(147deg, #583248, #281c29); }
.modal-card { background: #422b3a; border-color: rgba(242, 169, 184, .42); }
.toast { background: #703b52; }
.intro-sound { position: absolute; z-index: 3; left: 50%; bottom: max(30px, calc(env(safe-area-inset-bottom) + 22px)); transform: translateX(-50%); width: max-content; min-height: 46px; padding: 10px 20px; border-radius: 99px; border: 1px solid rgba(255, 229, 230, .65); color: #fff6f4; background: rgba(61, 27, 40, .73); backdrop-filter: blur(8px); box-shadow: 0 9px 25px rgba(19, 4, 11, .35); font-size: 13px; font-weight: 700; transition: background .2s, transform .2s; }
.intro-sound:hover { background: rgba(166, 71, 103, .82); transform: translateX(-50%) translateY(-2px); }
.intro-sound:active { transform: translateX(-50%) scale(.96) !important; }


/* 第一集橙光式剧情界面：固定手机 9:16 画布。 */
.story-scene { min-height: calc(100dvh - 80px); padding: 10px 0 30px; }
.story-stage { position: relative; width: min(100%, 480px); aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,220,220,.25); border-radius: 18px; background:#22141c; box-shadow: 0 18px 55px rgba(0,0,0,.4); cursor:pointer; }
.story-background { position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.9); transition: background-image .35s ease; }
.story-background::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,8,13,.08),transparent 48%,rgba(17,5,12,.45)); pointer-events:none; }
.story-characters { position:absolute; inset:0; pointer-events:none; }
.story-portrait { position:absolute; left:0; bottom:17%; width:50%; height:34%; object-fit:contain; object-position:left bottom; filter:drop-shadow(0 5px 9px rgba(0,0,0,.22)); animation: storyPortraitIn .3s ease both; }
@keyframes storyPortraitIn { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
.story-dialogue { position:absolute; left:3.5%; right:3.5%; bottom:6%; min-height:14%; padding:14px 16px 10px; border-radius:12px 12px 22px 12px; border:1px solid rgba(246,220,212,.8); background:linear-gradient(135deg,rgba(255,249,246,.96),rgba(246,228,226,.93)); color:#42232d; box-shadow:0 8px 25px rgba(36,8,20,.28); z-index:4; }
.story-dialogue::before { content:""; position:absolute; top:-25px; left:2%; width:120px; height:28px; border-radius:10px 10px 0 0; background:rgba(121,53,63,.96); transform:skewX(-17deg); z-index:-1; }
.story-name { position:absolute; left:5%; top:-22px; color:#fff5ef; font-weight:800; font-size:14px; text-shadow:0 1px 2px #4d1c2a; }
.story-text { margin:0; min-height:3.3em; white-space:pre-line; font-size:14px; line-height:1.65; font-weight:500; }
.story-next { display:block; text-align:right; color:#a05669; font-size:10px; margin-top:4px; }
.story-dialogue.skin-qin::before{background:#7f2639}.story-dialogue.skin-cai::before{background:#7e3a32}.story-dialogue.skin-host::before{background:#9b6b2f}.story-dialogue.skin-male::before{background:#334154}.story-dialogue.skin-female::before{background:#b56b88}
.dual-dialogue{background:linear-gradient(135deg,rgba(30,17,24,.82),rgba(76,37,51,.82));color:#fff1ee;border-color:rgba(255,216,205,.55)}.dual-dialogue::before{display:none}.dual-dialogue .story-text{text-align:center;font-size:13px}
.story-caption { position:absolute; z-index:5; inset:0; display:grid; place-items:center; padding:20px; text-align:center; color:#fff7f1; font-size:22px; font-weight:800; letter-spacing:.16em; text-shadow:0 2px 12px #000; background:rgba(21,7,14,.24); }
.story-flash { position:absolute; z-index:7; inset:0; background:#08060a; display:grid; place-items:center; }.story-flash video{width:100%;height:100%;object-fit:cover}.story-skip-flash{position:absolute;right:14px;top:14px;padding:8px 12px;border:1px solid rgba(255,235,235,.65);border-radius:99px;color:#fff;background:rgba(40,15,26,.7);font-size:11px}
.story-progress{position:absolute;z-index:8;left:12px;top:10px;padding:5px 9px;border-radius:99px;color:#fff0eb;background:rgba(36,12,22,.55);font-size:10px;pointer-events:none}
.story-back { position:absolute; z-index:9; left:12px; top:42px; min-height:44px; padding:8px 14px; border:1px solid rgba(255,225,219,.5); border-radius:99px; background:rgba(45,22,33,.78); color:#fff3ee; font-size:12px; backdrop-filter:blur(8px); transition:background .18s, opacity .18s, transform .18s; }
.story-back:hover:not(:disabled) { background:rgba(133,65,87,.9); transform:translateY(-2px); }
.story-back:disabled { cursor:default; opacity:.4; }
@media(max-width:520px){.story-scene{padding:0 0 28px}.story-stage{border-radius:12px;width:100%}}

/* 集数入口与剧本演出；透明立绘继续保持小比例展示。 */
.episode-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; width:100%; min-width:0; margin:0 0 10px; }
.episode-tabs button { min-width:0; min-height:44px; padding:6px 3px; border:1px solid var(--line); border-radius:12px; color:#e5c8d0; background:#35202d; font-size:12px; line-height:1.25; white-space:normal; overflow-wrap:anywhere; }
.episode-tabs button[aria-pressed="true"] { color:#fff5ee; border-color:#e6a8b4; background:linear-gradient(120deg,#a34f69,#703b52); }
.episode-tabs button:hover { background:#75445b; }
.story-location { position:absolute; z-index:3; top:100px; left:12px; max-width:calc(100% - 24px); padding:6px 10px; border-radius:6px; color:#fff1e8; background:rgba(36,12,22,.6); font-size:11px; pointer-events:none; }
.story-caption { white-space:pre-line; line-height:1.9; }
.story-companion { left:auto; right:0; width:43%; height:31%; object-position:right bottom; opacity:.92; }
.skin-extra::before { background:#5b5360; }
.story-flash video { object-fit:contain; }
.story-skip-flash { min-height:44px; }
.story-effects { position:absolute; z-index:2; inset:0; pointer-events:none; overflow:hidden; }
.money-note { position:absolute; top:-50px; left:var(--x); display:grid; place-items:center; width:42px; height:21px; border:2px solid #e6a09e; border-radius:2px; background:#b8465b; color:#f9d3c0; font-size:11px; box-shadow:0 3px 8px #36142166; animation:moneyFall 3.8s var(--delay) ease-in infinite; }
@keyframes moneyFall { from { transform:translateY(0) rotate(-25deg); } to { transform:translateY(900px) rotate(var(--turn)); } }
.effect-pressure { background:linear-gradient(90deg,#2b091c88,transparent 40%,transparent 60%,#2b091c88); }
.effect-dream { background:radial-gradient(ellipse at center,#f4a0bd33, #69304888); box-shadow:inset 0 0 80px #e09db377; }
.effect-sparkle { background:radial-gradient(circle at 25% 42%,#fff4d599,transparent 3%),radial-gradient(circle at 70% 60%,#f7bec455,transparent 5%); animation:storyGlow 1.6s ease-in-out infinite alternate; }
@keyframes storyGlow { to { opacity:.25; } }
.story-stage[data-effect="impact"] .story-background, .story-stage[data-effect="chase"] .story-background { animation:storyShake .4s ease both; }
.story-stage[data-effect="knock"] .story-background { animation:storyShake .2s ease 2; }
@keyframes storyShake { 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }
@media(max-width:360px){ .story-text { font-size:13px; } .episode-tabs button { font-size:11px; } }
@media(prefers-reduced-motion:reduce){ .money-note { animation:none; top:35%; } }
html, body { max-width:100%; overflow-x:hidden; }