/* V32: approved mobile full-screen story surface. */
body.immersive-story{color:#fff;background:#081721}
.immersive-story .phone{position:relative;isolation:isolate;background:#081721;color:#fff;min-height:100svh}
.immersive-story .topbar{position:absolute;inset:0 0 auto;z-index:4;height:76px;padding:20px 22px;background:transparent;gap:15px}
.immersive-story .brand{font-size:25px;letter-spacing:-.04em}
.immersive-story .language-wrap select{max-width:145px;background:rgba(5,13,20,.18);border-color:rgba(255,255,255,.38);color:#fff;font-size:12px;min-height:36px}
.immersive-story .language-wrap option{background:#102733;color:#fff}
.immersive-story #story{position:relative;min-height:100svh;padding-top:76px}
.story-backdrop{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(100%,440px);height:100svh;z-index:-1;background:#081721;pointer-events:none}
.story-backdrop img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.story-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,9,15,.65) 0%,rgba(3,9,15,.07) 21%,rgba(3,9,15,.03) 43%,rgba(3,9,15,.52) 63%,rgba(3,9,15,.9) 100%)}
.immersive-story .story-context{position:relative;z-index:1;min-height:48px;padding:8px 22px;line-height:1.5;font-size:13px;color:#fff;gap:20px}
.immersive-story #question-counter{font-size:12px;font-weight:400;color:#f1f3f5;letter-spacing:.06em}
.immersive-story progress{position:relative;z-index:1;width:calc(100% - 44px);margin-inline:22px;height:2px;background:rgba(255,255,255,.25)}
.immersive-story progress::-webkit-progress-bar{background:rgba(255,255,255,.25)}
.immersive-story progress::-webkit-progress-value{background:#ffac65}
.immersive-story progress::-moz-progress-bar{background:#ffac65}
.immersive-story #quiz{position:relative;min-height:calc(100svh - 126px);display:flex;flex-direction:column;justify-content:flex-end}
.immersive-story .quiz-panel{padding:max(190px,26svh) 22px max(25px,env(safe-area-inset-bottom));background:transparent}
.immersive-story .quiz-panel h1{font-family:Georgia,"Songti SC","SimSun",serif;font-size:27px;font-weight:600;line-height:1.38;letter-spacing:0;color:#fff;margin:0 0 23px;text-wrap:pretty}
.immersive-story .answers{gap:11px}
.immersive-story .answer{min-height:68px;gap:13px;border:1px solid rgba(255,255,255,.46);border-radius:13px;background:rgba(248,250,252,.13);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:14px 15px;color:#fff;line-height:1.5}
.immersive-story .answer b{flex-basis:26px;height:29px;border-radius:5px;background:rgba(255,255,255,.14);color:#fff;font-size:13px;font-weight:500}
.immersive-story .answer span{font-size:15px;font-weight:500;letter-spacing:.01em}
.immersive-story .answer.selected{border-color:#ffc28e;background:rgba(235,155,88,.25)}
.immersive-story .answer:disabled{color:#fff;opacity:1}
.immersive-story .answer-status{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.immersive-story .quiz-panel .micro{font-size:11px;color:#e1e6eb;line-height:1.5;margin:17px 0 0}
.immersive-story .text-button{color:#f3e9de}
.immersive-story #back{margin-top:4px}
.immersive-story button:focus-visible,.immersive-story a:focus-visible,.immersive-story select:focus-visible{outline-color:#ffc28e}
.immersive-story .waiting{position:relative;min-height:calc(100svh - 126px);padding:150px 26px 35px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.immersive-story .waiting h1{font-size:32px;line-height:1.35}
.immersive-story .waiting p{color:#e4e9ee}
.immersive-story[data-stage=waiting] .story-backdrop::after{background:rgba(3,9,15,.72)}
.immersive-story[data-stage=result] .story-backdrop::after{background:linear-gradient(180deg,rgba(3,9,15,.72),rgba(3,9,15,.72) 40%,rgba(3,9,15,.86) 65%,rgba(3,9,15,.95) 100%)}
.immersive-story #result{position:relative;min-height:calc(100svh - 126px);display:flex;align-items:flex-end}
.immersive-story .result-body{width:100%;padding:max(220px,26svh) 22px max(28px,env(safe-area-inset-bottom));color:#fff}
.immersive-story .result-label{color:#e0e5eb;font-size:13px}
.immersive-story .result-body h1{font-size:34px;line-height:1.2;color:#fff}
.immersive-story .type{color:#ffc28e}
.immersive-story .traits span{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.immersive-story .result-summary{font-size:18px;color:#f5f5f5}
.immersive-story .secondary{background:rgba(248,250,252,.13);border-color:rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.immersive-story .profile{border-color:rgba(255,255,255,.3)}
.immersive-story .profile dl{border-color:rgba(255,255,255,.3)}
.immersive-story .profile dt{color:#d5dde5}
.immersive-story .choice-evidence{color:#dbe2e9}
.immersive-story .choice-evidence p{border-color:rgba(255,255,255,.25)}
.immersive-story .result-body>.micro{color:#dbe2e9}
@media(max-width:350px){.immersive-story .topbar{padding-inline:17px}.immersive-story .brand{font-size:24px}.immersive-story .language-wrap select{max-width:133px}.immersive-story .story-context{padding-inline:17px}.immersive-story progress{margin-inline:17px;width:calc(100% - 34px)}.immersive-story .quiz-panel{padding-inline:17px;padding-top:170px}.immersive-story .quiz-panel h1{font-size:24px}.immersive-story .answer{padding:12px;gap:10px}.immersive-story .answer span{font-size:14px}}
@media(max-height:700px){.immersive-story .quiz-panel{padding-top:150px}.immersive-story .result-body{padding-top:170px}}
@media(prefers-reduced-motion:reduce){.immersive-story *{scroll-behavior:auto}}
/* Follow Safari's changing browser bars and keep controls out of the notch. */
.immersive-story .phone,.immersive-story #story{min-height:100dvh}
.immersive-story .topbar{height:calc(76px + env(safe-area-inset-top));padding-top:calc(20px + env(safe-area-inset-top))}
.immersive-story #story{padding-top:calc(76px + env(safe-area-inset-top))}
.story-backdrop{height:100dvh}
.immersive-story #quiz,.immersive-story #result,.immersive-story .waiting{min-height:calc(100dvh - 126px - env(safe-area-inset-top))}

.immersive-story .quiz-content{position:relative;isolation:isolate}.immersive-story .quiz-content::before{content:"";position:absolute;inset:-40px -22px -28px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 0,rgba(3,9,15,.56) 40px,rgba(3,9,15,.22) 100%)}

/* V32.1: compact controls and a measured face-safe composition. */
.story-backdrop{overflow:hidden}
.story-backdrop::before{content:"";position:absolute;inset:-30px;background-image:var(--scene-atmosphere);background-size:cover;background-position:center;filter:blur(22px);opacity:.25}
.story-backdrop img{position:absolute;max-width:none;object-fit:fill;will-change:auto}
.story-backdrop::after{background:linear-gradient(180deg,rgba(3,9,15,.68),rgba(3,9,15,.04) 20%,transparent 43%,rgba(3,9,15,.35) 67%,rgba(3,9,15,.93))}
.immersive-story .quiz-panel{padding-top:max(270px,34svh);padding-bottom:max(20px,env(safe-area-inset-bottom))}
.immersive-story .quiz-panel h1{font-size:25px;line-height:1.36;margin-bottom:17px}
.immersive-story .answers{gap:8px}
.immersive-story .answer{min-height:50px;padding:10px 12px;gap:10px;border-radius:11px}
.immersive-story .answer b{flex-basis:22px;height:24px;font-size:12px}
.immersive-story .answer span{font-size:14px;line-height:1.4}
.immersive-story .quiz-panel .micro{margin-top:11px}
.immersive-story .quiz-content::before{inset:-24px -22px -28px;background:linear-gradient(180deg,transparent,rgba(3,9,15,.57) 25px,rgba(3,9,15,.22))}
.immersive-story .result-body{padding-top:max(320px,40svh)}
@media(max-width:350px){.immersive-story .quiz-panel{padding-inline:17px}.immersive-story .quiz-panel h1{font-size:23px}.immersive-story .answer{padding:10px;gap:9px}}
@media(max-height:700px){.immersive-story .quiz-panel{padding-top:230px}.immersive-story .result-body{padding-top:260px}}

.story-backdrop::before{display:none}
.story-backdrop{background:#081721}

.immersive-story progress{display:block}
.story-backdrop::before{display:block;filter:blur(40px) brightness(.38) saturate(.7);opacity:.75}

.immersive-story[data-stage=result] .story-backdrop::after{background:linear-gradient(180deg,rgba(3,9,15,.66),rgba(3,9,15,.12) 150px,rgba(3,9,15,.12) var(--face-safe-end,40vh),rgba(3,9,15,.84) var(--scene-copy-top,55vh),rgba(3,9,15,.96) 100%)}

/* V32.2: single 1080 x 1920 portraits, no face enlargement or rectangular image fade. */
.immersive-story .topbar{background:linear-gradient(180deg,rgba(3,9,15,.7),transparent)}
.immersive-story .story-backdrop::after{background:linear-gradient(180deg,rgba(3,9,15,.78),rgba(3,9,15,.08) 142px,rgba(3,9,15,.08) var(--face-safe-end,42vh),rgba(3,9,15,.86) var(--scene-copy-top,60vh),rgba(3,9,15,.96) 100%)}
.immersive-story .quiz-content::before{background:linear-gradient(180deg,transparent,rgba(3,9,15,.3) 25px,rgba(3,9,15,.12))}

/* Keep the question scrim within the narrower mobile padding. */
@media(max-width:350px){.immersive-story .quiz-content::before{left:-17px;right:-17px}}