:root { color: #4d3542; background: #f9edf0; font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
html, body, #app { margin: 0; min-height: 100%; }
body { min-width: 320px; min-height: 100vh; background: #f9edf0 url("./assets/page-bg-soothe.jpg") center/cover fixed no-repeat; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,250,247,.42), rgba(119,53,75,.18)); }
button { border: 0; font: inherit; cursor: pointer; touch-action: manipulation; }
.page, .chat-page, .failure-page, .success-page { position: relative; min-height: 100svh; max-width: 480px; margin: 0 auto; padding: 44px 22px max(28px, env(safe-area-inset-bottom)); }
.page { display: flex; flex-direction: column; justify-content: center; }
.eyebrow, .subtitle, .story-card > span, .rules p, .chat-guide span, .dock-label span { margin: 0; color: #a06b7c; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.intro-page { text-align: center; gap: 17px; overflow: hidden; }
.intro-page::after { content: ""; position: absolute; inset: 20px; z-index: -1; border: 1px solid rgba(202,143,161,.28); border-radius: 28px; }
.intro-ornament { display: flex; justify-content: center; align-items: center; gap: 12px; color: #bf8a9b; font-size: 12px; }
.intro-ornament i { display: block; width: 74px; height: 1px; background: linear-gradient(90deg, transparent, #c38a9a, transparent); }
.intro-page h1, .character-page h1, .failure-sheet h1, .success-card h1 { margin: 0; font-family: "Noto Serif SC", serif; font-weight: 900; }
.intro-page h1 { font-size: clamp(42px, 12vw, 58px); letter-spacing: .04em; color: #6c3147; text-shadow: 0 2px 0 rgba(255,255,255,.8); }
.subtitle { margin-top: -12px; letter-spacing: .3em; }
.story-card { text-align: left; padding: 24px; border: 1px solid rgba(176,104,128,.25); border-radius: 22px; background: rgba(255,251,248,.68); box-shadow: 0 14px 38px rgba(105,55,72,.09); backdrop-filter: blur(10px); }
.story-card h2 { margin: 9px 0 11px; font: 700 24px/1.35 "Noto Serif SC", serif; color: #6d3c4c; }
.story-card p { margin: 0; color: #795968; font-size: 13px; line-height: 1.85; }
.rules { display: grid; gap: 8px; text-align: center; }
.rules div { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.rules div span { padding: 6px 9px; border: 1px solid rgba(187,119,141,.24); border-radius: 999px; background: rgba(255,255,255,.45); color: #8f6371; font-size: 11px; }
.primary-button, .secondary-button { min-height: 53px; border-radius: 17px; padding: 0 20px; font-weight: 800; letter-spacing: .04em; }
.primary-button { color: #fffaf6; background: linear-gradient(135deg, #ba637d, #8f475f); box-shadow: 0 10px 22px rgba(132,61,83,.26); }
.primary-button b { float: right; font-size: 18px; }
.secondary-button { color: #8c4f64; border: 1px solid rgba(163,87,111,.34); background: rgba(255,255,255,.56); }
.disclaimer { margin: 0 auto; max-width: 300px; color: #9d7a86; font-size: 10px; line-height: 1.65; }
.client-back, .soft-back { position: absolute; z-index: 2; top: max(18px, env(safe-area-inset-top)); left: 18px; color: #865467; background: transparent; font-size: 15px; font-weight: 700; }
.client-back { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.7); box-shadow: 0 4px 12px rgba(114,57,75,.12); font-size: 28px; }
.character-page { justify-content: flex-start; padding-top: 74px; }
.character-page h1 { color: #673548; font-size: 36px; line-height: 1.24; }
.character-copy { margin: 12px 0 24px; color: #866777; font-size: 13px; line-height: 1.75; }
.character-list { display: grid; gap: 13px; margin-bottom: 22px; }
.character-card { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 13px; width: 100%; padding: 11px; border: 1px solid rgba(167,99,122,.24); border-radius: 20px; text-align: left; background: rgba(255,252,250,.68); box-shadow: 0 10px 26px rgba(126,69,86,.08); }
.character-card.selected { border-color: #aa5874; box-shadow: 0 0 0 2px rgba(187,100,129,.16), 0 12px 28px rgba(126,69,86,.12); }
.character-card img { width: 84px; height: 84px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.character-card small { display: block; color: #ad7587; font-size: 10px; }
.character-card b { display: block; margin: 2px 0 5px; color: #693b4b; font: 700 17px "Noto Serif SC", serif; }
.character-card p { margin: 0; color: #896b78; font-size: 11px; line-height: 1.55; }
.character-card em { color: #a45d76; font-size: 11px; font-style: normal; font-weight: 700; }
.chat-page { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; min-height: 100svh; padding: 0; overflow: hidden; background: rgba(255,248,248,.48); }
.chat-header { display: grid; grid-template-columns: 29px 42px 1fr auto; align-items: center; gap: 9px; min-height: max(68px, calc(env(safe-area-inset-top) + 54px)); padding: max(11px, env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid rgba(172,106,129,.17); background: rgba(255,250,249,.75); backdrop-filter: blur(15px); }
.chat-header .soft-back { position: static; padding: 0; font-size: 28px; line-height: 1; }
.header-avatar { width: 42px; height: 42px; border: 2px solid rgba(255,255,255,.95); border-radius: 50%; object-fit: cover; box-shadow: 0 3px 10px rgba(111,56,74,.18); }
.chat-header div b { display: block; color: #5b3945; font-size: 14px; }
.chat-header div small { color: #aa7788; font-size: 10px; }
.chat-header > strong { color: #9f6075; font: 800 19px "Noto Serif SC", serif; }
.chat-header > strong i { color: #bd92a0; font: 500 10px "Noto Sans SC", sans-serif; font-style: normal; }
.chat-guide { padding: 11px 18px 9px; border-bottom: 1px solid rgba(173,110,130,.12); background: rgba(255,248,246,.53); }
.chat-guide b { margin-left: 8px; color: #7e4659; font: 700 14px "Noto Serif SC", serif; }
.chat-guide p { margin: 5px 0 0; color: #a9818e; font-size: 10px; }
.transcript { overflow-y: auto; padding: 15px 17px 18px; scroll-behavior: smooth; }
.time-stamp { margin: 13px 0 8px; color: #b5909c; text-align: center; font-size: 10px; }
.bubble-row { display: flex; align-items: flex-end; gap: 7px; margin: 7px 0; }
.ta-row { justify-content: flex-start; }
.player-row { justify-content: flex-end; }
.tiny-avatar { width: 29px; height: 29px; flex: 0 0 29px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 7px rgba(104,57,69,.15); }
.bubble { max-width: min(78%, 300px); padding: 10px 12px; border-radius: 5px 16px 16px 16px; font-size: 14px; line-height: 1.55; box-shadow: 0 3px 10px rgba(118,67,81,.07); }
.ta-bubble { color: #5e4550; background: rgba(255,255,255,.94); }
.ta-bubble.warm { background: #fff8ed; }
.player-bubble { border-radius: 16px 5px 16px 16px; color: #436451; background: #c6eccf; }
.typing-line { display: flex; align-items: center; gap: 7px; margin: 8px 0; }
.typing-line span { display: inline-flex; gap: 4px; padding: 11px 13px; border-radius: 6px 15px 15px; background: rgba(255,255,255,.88); }
.typing-line i { width: 5px; height: 5px; border-radius: 50%; background: #c5a4ae; animation: dot 1s infinite ease-in-out; }
.typing-line i:nth-child(2) { animation-delay: .13s; }.typing-line i:nth-child(3) { animation-delay: .26s; }.typing-line.dim { opacity: .42; }
@keyframes dot { 0%, 75%, 100% { transform: translateY(0); opacity: .45; } 37% { transform: translateY(-3px); opacity: 1; } }
.choice-dock { padding: 12px 14px max(13px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(176,108,132,.17); background: rgba(255,248,248,.88); box-shadow: 0 -9px 28px rgba(103,54,69,.08); backdrop-filter: blur(15px); }
.dock-label { display: grid; gap: 3px; margin: 0 3px 8px; }.dock-label b { color: #8b5f6e; font-size: 11px; }
.option-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.reply-option { display: grid; grid-template-columns: 20px 1fr; gap: 6px; align-items: start; min-height: 69px; padding: 9px; border: 1px solid rgba(183,111,137,.25); border-radius: 12px; background: rgba(255,255,255,.76); color: #735563; text-align: left; transition: transform .15s, border-color .15s, box-shadow .15s; }
.reply-option:hover { transform: translateY(-1px); border-color: #b4667f; box-shadow: 0 7px 13px rgba(139,72,94,.12); }.reply-option:active { transform: scale(.985); }
.reply-option em { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #f7dde4; color: #a65d76; font-size: 10px; font-style: normal; font-weight: 800; }.reply-option span { font-size: 11px; line-height: 1.48; }.reply-option b { display: none; }
.fake-input { display: flex; align-items: center; gap: 11px; margin-top: 9px; height: 35px; padding: 0 11px; border-radius: 10px; background: rgba(239,223,226,.7); color: #b38c9a; font-size: 12px; }.fake-input span { flex: 1; }.fake-input i { font-size: 16px; font-style: normal; }
.failure-page { display: grid; grid-template-rows: 38% 62%; max-width: 480px; padding: 0; overflow: hidden; background: rgba(82,28,42,.36); }.failure-chat { padding: 0 16px; background: linear-gradient(180deg, rgba(249,236,233,.95), rgba(232,197,202,.88)); }.failure-chat .chat-header { grid-template-columns: 42px 1fr auto; margin: 0 -16px; }.failure-transcript { overflow: hidden; }.failure-sheet { position: relative; padding: 25px 22px 24px; border-radius: 28px 28px 0 0; background: #fff8f5; box-shadow: 0 -8px 35px rgba(87,27,44,.2); }.failure-sheet > p { margin: 0; color: #b35c71; font-size: 11px; font-weight: 800; letter-spacing: .12em; }.failure-sheet h1 { margin: 8px 0 18px; color: #792a42; font-size: 29px; line-height: 1.2; }.failure-sheet article { display: grid; gap: 5px; padding: 12px; border-left: 3px solid #c26a7f; border-radius: 0 11px 11px 0; background: #fff0ef; }.failure-sheet article + article { margin-top: 8px; }.failure-sheet article b { color: #9a4a60; font-size: 11px; }.failure-sheet article span { color: #815762; font-size: 12px; line-height: 1.6; }.failure-sheet .subtext { border-color: #d7ad80; background: #fff9ef; }.failure-sheet .subtext b { color: #aa7a52; }.failure-sheet .primary-button { width: 100%; margin-top: 16px; }.text-button { width: 100%; margin-top: 8px; padding: 10px; color: #a0717e; background: transparent; font-size: 12px; }
.success-page { display: flex; min-height: 100svh; flex-direction: column; justify-content: center; text-align: center; }.success-card { padding: 30px 23px 22px; border: 1px solid rgba(176,104,128,.24); border-radius: 29px; background: rgba(255,251,248,.76); box-shadow: 0 16px 42px rgba(112,54,73,.16); backdrop-filter: blur(13px); }.success-ring { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 11px; border: 1px solid #d8b077; border-radius: 50%; color: #b58142; font-size: 22px; }.success-card > p { color: #ad7587; font-size: 10px; letter-spacing: .13em; }.success-card h1 { color: #6d3249; font-size: 31px; line-height: 1.28; }.success-card > img { width: 76px; height: 76px; margin: 14px auto 4px; border: 3px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 18px rgba(119,56,76,.19); }.success-card blockquote { margin: 11px 0 16px; color: #846272; font: 600 14px/1.7 "Noto Serif SC", serif; }.review { padding: 14px; border-radius: 14px; background: #fff3f1; text-align: left; }.review b { color: #9c5269; font-size: 11px; }.review p { margin: 6px 0 0; color: #795a66; font-size: 12px; line-height: 1.7; }.result-actions { display: grid; gap: 8px; margin-top: 17px; }.result-actions .text-button { margin-top: 0; }.success-page footer { margin-top: 15px; color: #9c7b86; font-size: 9px; line-height: 1.6; }
@media (min-width: 680px) { body { padding: 18px; }.page, .chat-page, .failure-page, .success-page { min-height: calc(100svh - 36px); border-radius: 30px; box-shadow: 0 20px 55px rgba(89,40,56,.18); overflow: hidden; }.chat-page { min-height: calc(100svh - 36px); }.failure-page { min-height: calc(100svh - 36px); } }

/* A fixed-height chat keeps new messages in view while choices stay within reach. */
.chat-page { height: 100svh; height: 100dvh; min-height: 0; }
.transcript { min-height: 0; overscroll-behavior: contain; overflow-anchor: none; }
.scene-context { margin: 10px auto 16px; max-width: 360px; padding: 11px 13px; border: 1px solid #dbc0c980; border-radius: 12px; background: #fff7f3d9; color: #74515f; font-size: 12px; line-height: 1.7; }
.scene-context > span { display: block; margin-bottom: 3px; color: #a95c77; font-weight: 700; font-size: 10px; letter-spacing: .15em; }
.option-list { grid-template-columns: 1fr; gap: 6px; }
.reply-option { min-height: 49px; align-items: center; padding: 9px 11px; }
.reply-option span { font-size: 13px; line-height: 1.5; }
.reply-option:disabled { opacity: .52; cursor: default; transform: none; box-shadow: none; }
.choice-dock { max-height: 49dvh; overflow-y: auto; padding-top: 9px; }
.fake-input { height: 27px; font-size: 10px; }
.chat-guide { padding: 9px 16px; }
.chat-guide span { letter-spacing: .03em; }
.failure-page { display: block; overflow: visible; min-height: 100svh; }
.failure-chat { padding-bottom: 20px; }
.failure-transcript { padding: 7px 0; }
.failure-sheet { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
.failure-sheet h1 { font-size: 30px; }
.failure-sheet .secondary-button { width: 100%; margin-top: 9px; }
.answer-review { margin-top: 12px; color: #805064; font-size: 12px; line-height: 1.7; }
.answer-review summary { padding: 10px 0; cursor: pointer; }
.answer-review p { margin: 6px 0; padding: 8px 12px; border-radius: 8px; background: #f8ede9; }
.first-record { font-size: 11px; color: #936777; line-height: 1.6; }
.result-stats { display: flex; justify-content: center; gap: 24px; margin: 18px 0; color: #9d687a; font-size: 11px; }
.result-stats b { display: block; font-size: 29px; color: #873c59; }
.result-stats small { font-size: 13px; font-weight: 400; }
.brand-footer { margin-top: 20px; text-align: center; color: #906b7b; font-size: 11px; line-height: 1.8; }
.brand-footer small { font-size: 9px; }
.toast { position: fixed; z-index: 10; bottom: 28px; left: 50%; transform: translateX(-50%); max-width: 90vw; padding: 12px 18px; background: #6f3a50; color: white; border-radius: 14px; font-size: 13px; text-align: center; }
button:focus-visible, summary:focus-visible { outline: 3px solid #825975; outline-offset: 3px; }
@media (min-width: 680px) { .chat-page { height: calc(100dvh - 36px); min-height: 0; } }
@media (max-width: 360px) { .character-card { grid-template-columns: 65px 1fr auto; gap: 9px; } .character-card img { width: 65px; height: 65px; } .character-card b { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Shared H5 shell: native navigation owns back; copyright stays in content flow. */
.chat-header { grid-template-columns: 42px 1fr auto; }
.page, .success-page { padding-top: max(36px, calc(env(safe-area-inset-top) + 20px)); }
.copyright-footer { margin: 22px auto 0; padding: 0 6px max(8px, env(safe-area-inset-bottom)); max-width: 410px; color: #806776; font-size: 10px; font-weight: 400; line-height: 1.7; text-align: center; overflow-wrap: anywhere; }
.brand-footer { margin: 24px 0 0; font-size: 12px; color: #83596b; }
.brand-footer + .copyright-footer { margin-top: 9px; }
.success-page .copyright-footer { font-size: 10px; color: #806776; }
.choice-dock .copyright-footer { margin-top: 9px; padding-bottom: 0; font-size: 9px; line-height: 1.5; }
.reply-option { min-height: 56px; }
.text-button, .answer-review summary { min-height: 48px; touch-action: manipulation; }
.answer-review summary { display: list-item; align-content: center; }
.app-guidance { margin-top: 18px; padding-top: 16px; border-top: 1px solid #dec5cd; text-align: center; }
.app-guidance > p { margin: 0 0 12px; color: #795667; font-size: 12px; line-height: 1.7; }
.app-guidance > small { display: block; margin-top: 9px; font-size: 11px; color: #8a6172; }
.app-guidance .primary-button { width: 100%; margin-top: 0; }
.toast { bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px)); }
@media (max-height: 680px) { .choice-dock { max-height: 54dvh; } .chat-guide { padding-top: 6px; padding-bottom: 6px; } }