@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');
:root{font-family:Vazirmatn,Tahoma,'Segoe UI',sans-serif;color:#f7f6fb;background:#080d19;font-synthesis:none;--bg:#0b1020;--surface:#161d32;--surface2:#222b45;--muted:#abb4ce;--line:#333b55;--pink:#ff4e81;--violet:#7936e9;--teal:#38d7b4;--light:#f6f5fb;--radius:21px;scroll-behavior:smooth}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #ffa5c4;outline-offset:3px}button:disabled{opacity:.46;cursor:not-allowed}.app-shell{min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at 16% 10%,#292049 0%,transparent 48%),radial-gradient(ellipse at 80% 88%,#1c183e 0%,transparent 42%),#080d19;padding:0}
.phone{width:100%;max-width:490px;min-height:100svh;max-height:100svh;overflow-y:auto;overscroll-behavior:contain;position:relative;background:var(--bg);box-shadow:0 0 80px #0009;scrollbar-width:none;display:flex;flex-direction:column}.phone::-webkit-scrollbar{display:none}.topline{display:flex;justify-content:space-between;align-items:center;padding:calc(13px + env(safe-area-inset-top)) 20px 12px;gap:12px;background:#0b1020;position:relative;z-index:3}.topline.slim{padding-bottom:9px}.brandmark{font-weight:900;letter-spacing:-1.4px;font-size:28px;line-height:1.2;color:#fff}.brandmark em{color:var(--pink);font-style:normal}.brandmark small{display:block;font-size:9px;letter-spacing:5px;font-family:Arial,sans-serif;color:#c3bed5;text-align:left;direction:ltr;margin-top:3px}.eyebrow{font-size:10px;font-weight:800;color:#d2a9ff;letter-spacing:1px}.iconbtn{width:40px;height:40px;border:1px solid #38425b;background:#1d243b;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:21px;flex-shrink:0}.line{height:1px;background:#ffffff14;margin:0 20px}.hero{position:relative;height:clamp(260px,42svh,405px);overflow:hidden;background:#22243f;flex-shrink:0}.hero-image,.scene-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(.92)}.hero::before,.scene-visual::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0b1020 0%,#0b102000 44%),linear-gradient(90deg,#0b102058 0%,transparent 50%);z-index:1;pointer-events:none}.hero-copy{position:absolute;z-index:2;bottom:2px;right:25px;left:25px}.hero-copy h1{font-size:44px;line-height:1.35;margin:0 0 6px;font-weight:900;letter-spacing:-2px}.hero-copy p{color:#c5c7d8;font-size:13px;margin:0 0 14px}.hero-title-en{font:500 12px Arial,sans-serif;letter-spacing:4px;color:#fff3}.pill{display:inline-flex;align-items:center;gap:5px;background:#242942df;border:1px solid #454964;color:#d8ddf3;border-radius:99px;padding:6px 11px;font-size:11px;font-weight:700}.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.content{padding:18px 22px 24px;flex:1}.content h2{font-weight:900;font-size:24px;margin:0 0 8px;line-height:1.45}.content p{color:#c8cce0;margin:0 0 16px;line-height:2;font-size:13px}.primary{width:100%;border:0;border-radius:17px;background:linear-gradient(105deg,#fa4d81,#a638ee);box-shadow:0 8px 28px #ff4e8135;color:white;padding:15px 14px;font-weight:900;font-size:15px;min-height:52px;transition:transform .15s,filter .15s}.primary:active{transform:scale(.98)}.secondary{border:1px solid #44506a;background:#222942;color:#e9e9f6;border-radius:15px;padding:12px 15px;font-weight:800}.muted-link{display:block;margin:14px auto;border:0;background:transparent;color:#bfc7dd;font-size:12px}.fine{font-size:11px;color:#8290b2;line-height:1.9;text-align:center}.card{background:#171e32;border:1px solid #343c55;border-radius:23px;padding:18px}.formlabel{display:block;font-size:13px;color:#d9ddef;font-weight:800;margin:4px 0 9px}.text-input{background:#101727;border:1px solid #47506b;color:white;width:100%;min-height:52px;padding:13px 15px;border-radius:15px;outline:none;direction:rtl}.text-input:focus{border-color:#dd70f1}.gender-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 23px}.gender-card{border:2px solid #3b455f;background:#1c2438;padding:8px;border-radius:20px;color:white;font-weight:800;transition:border-color .15s;overflow:hidden}.gender-card.selected{border-color:#ff66aa;box-shadow:0 0 0 2px #fe4b7a24}.gender-card img{width:100%;height:155px;border-radius:13px;object-fit:cover;object-position:center 20%;display:block;margin-bottom:8px}.step-count{color:#9fa9c5;font-family:Arial;font-size:11px;direction:ltr}.map-hero{position:relative;min-height:178px;overflow:hidden;background:#20203b;border-radius:22px;margin:18px 18px 12px;border:1px solid #3a3554}.map-hero img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 31%;opacity:.75}.map-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(270deg,#080d19ee 2%,#080d1980 58%,#080d1920);z-index:1}.map-head{position:relative;z-index:2;padding:18px;max-width:75%}.map-head h2{font-size:24px;line-height:1.5;margin:5px 0;color:#fff}.map-head p{margin:4px 0;color:#e1dce8;font-size:11px;line-height:1.7}.stats{display:flex;gap:8px;padding:0 18px 12px}.stat{flex:1;border:1px solid #2c3551;border-radius:14px;background:#151e33;padding:10px 12px}.stat b{font-size:17px;display:block;color:#fff}.stat small{color:#9eaace;font-size:10px}.path{padding:2px 18px 29px;flex:1}.path-title{font-size:15px;font-weight:900;margin:12px 2px 14px}.episode{width:100%;display:flex;gap:12px;align-items:center;text-align:right;border:1px solid #363f5b;background:#161e32;border-radius:18px;margin-bottom:10px;padding:11px 12px;color:white;position:relative}.episode.locked{opacity:.52}.episode.active{border-color:#ff5885;background:linear-gradient(100deg,#412039,#1a203a)}.episode .number{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#333053;color:#e7d8ff;flex-shrink:0;font-family:Arial,sans-serif;font-weight:900;font-size:16px}.episode.active .number{background:linear-gradient(135deg,#ff4e81,#7b33e2);color:white}.episode.done .number{background:#184e49;color:#a7f9d4}.episode-copy{flex:1}.episode-copy b{display:block;font-size:13px}.episode-copy small{font-size:11px;color:#aeb8d2}.episode-arrow{font-size:19px;color:#a8afcd}.path-note{color:#8790ae;font-size:11px;line-height:1.8;margin-top:14px;text-align:center}.story-header{display:flex;align-items:center;gap:11px;padding:calc(10px + env(safe-area-inset-top)) 13px 10px;background:#0b1020;flex-shrink:0}.progress-track{height:8px;border-radius:99px;background:#323850;flex:1;overflow:hidden}.progress-track>div{height:100%;background:linear-gradient(90deg,#fb5082,#8a3eff);border-radius:99px;transition:width .3s}.scene-visual{height:clamp(230px,36svh,350px);position:relative;overflow:hidden;flex-shrink:0;background:radial-gradient(circle at 65% 30%,#65506c,#1b2542 70%)}.scene-image{object-position:center 24%}.scene-visual::before{background:linear-gradient(0deg,#0b1020 0%,transparent 36%),linear-gradient(90deg,#1612293d,transparent)}.scene-tags{position:absolute;z-index:2;bottom:13px;right:18px;display:flex;gap:7px}.scene-tags span{background:#111724c7;border:1px solid #49516a;border-radius:99px;color:#eeeefa;padding:5px 9px;font-size:10px;font-weight:700}.dialogue{background:#11182b;border-top:1px solid #323954;border-radius:23px 23px 0 0;margin-top:-6px;position:relative;z-index:2;flex:1;display:flex;flex-direction:column;min-height:240px;padding:17px 19px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -7px 23px #080d1945}.dialogue-name{font-weight:900;font-size:13px;color:#ff7aa9;display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.dialogue-text{font-size:14px;line-height:2.03;color:#f4f4f9;font-weight:600;margin:0 0 12px}.en-box{direction:ltr;text-align:left;font-family:'Segoe UI',Arial,sans-serif;font-size:15px;line-height:1.65;color:#eef0ff;background:#202a47;border:1px solid #3c4666;border-radius:15px;padding:13px 14px;margin:0 0 14px;unicode-bidi:plaintext}.en-box.big{font-size:17px;font-weight:600}.scene-spacer{flex:1;min-height:11px}.options{display:grid;gap:9px;margin:4px 0 14px}.option{border:1px solid #454e69;border-radius:15px;min-height:49px;background:#202b46;color:#fff;padding:11px 13px;text-align:right;font-size:12.5px;line-height:1.9;font-weight:700;display:flex;align-items:center;gap:10px}.option:dir(ltr){text-align:left}.option.selected{border-color:#ff6c9e;background:#492c51}.option.correct{border-color:#3cccac;background:#194a49}.option.wrong{border-color:#ed6f86;background:#533043}.opt-letter{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;border:1px solid #65708f;color:#bcc8e8;flex-shrink:0;font-size:11px}.feedback{padding:12px 13px;border-radius:14px;border:1px solid #776180;background:#332c4a;margin-bottom:12px;line-height:1.85;font-size:12px;color:#fff}.feedback.good{background:#193b39;border-color:#35877c}.feedback strong{display:block;margin-bottom:3px}.chips{display:flex;flex-wrap:wrap;gap:7px;direction:ltr;justify-content:flex-start;margin:10px 0 13px}.chip{border-radius:11px;border:1px solid #536080;padding:9px 11px;background:#202b47;color:#fff;font:700 13px Arial,sans-serif;min-height:37px}.chip.used{opacity:.3;pointer-events:none}.answer-zone{display:flex;flex-wrap:wrap;direction:ltr;gap:7px;min-height:56px;align-items:center;border:1px dashed #5c6683;border-radius:14px;padding:8px;margin-bottom:8px}.answer-zone .chip{background:#492a52;border-color:#ff6caa}.answer-placeholder{font-size:12px;color:#7f8da9;direction:rtl}.action-row{display:flex;gap:10px;margin-top:auto}.action-row .primary{flex:1}.action-row .secondary{min-width:72px}.voice-btn{border:1px solid #3f5370;background:#243254;border-radius:13px;color:#eee;width:44px;height:44px;font-size:19px;margin-bottom:10px}.episode-complete{padding:27px 22px;text-align:center;margin:auto 0}.complete-icon{font-size:52px;background:#223253;border:1px solid #7660a7;width:95px;height:95px;display:grid;place-items:center;border-radius:30px;margin:0 auto 20px}.episode-complete h1{font-size:27px}.episode-complete p{color:#b9bfd2;line-height:2}.trophy{font-size:17px;background:#30213f;border-radius:99px;display:inline-block;padding:10px 17px;color:#ffb8c9;margin:12px 0 23px}.small-note{font-size:11px;color:#929fbb;line-height:1.85;margin:13px 0}.choice-reaction{background:#202d47;border:1px solid #4c5675;border-radius:16px;padding:13px;color:#fff;font-size:12px;line-height:1.9;margin-bottom:13px}.scene-label{font-size:10px;color:#8793b5}.bottom-tabs{background:#111728;border-top:1px solid #2c3550;display:flex;justify-content:space-around;padding:10px 10px calc(10px + env(safe-area-inset-bottom));position:sticky;bottom:0}.tab{color:#9ea6c2;border:0;background:transparent;font-size:11px;min-width:80px;display:flex;flex-direction:column;align-items:center;gap:2px}.tab b{font-size:19px}.tab.active{color:#ff709d}.info-screen{padding:16px 23px 32px}.info-screen h1{font-size:25px}.vocab{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #303a54;padding:12px 0}.vocab b{font-family:Arial,sans-serif;direction:ltr}.vocab span{font-size:12px;color:#cbd0df}.label-on{font-size:11px;color:#90a0b9}.switch{background:#313d59;border:1px solid #45516e;border-radius:99px;padding:8px 12px;color:#fff;font-size:11px}.footer{padding:0 18px 18px;color:#737f9d;font-size:10px;text-align:center}.tiny-code{font-family:Arial,sans-serif;direction:ltr;font-size:11px;color:#91a0c5}.hide{display:none!important}
@media(min-width:650px){.app-shell{padding:30px}.phone{min-height:850px;max-height:900px;border:7px solid #1b2233;border-radius:37px;overflow:hidden}.phone-inner{overflow-y:auto;height:100%;scrollbar-width:none}.hero{height:380px}.scene-visual{height:305px}.content{padding-bottom:35px}}
@media(max-height:680px){.scene-visual{height:32svh;min-height:188px}.hero{height:38svh}.dialogue{padding-top:12px}.dialogue-text{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Safe-zone corrections from mobile visual QA: story/art and text never share a face region. */
.phone{height:100svh;color:#f7f6fb}.phone-inner{height:100%;min-height:100%;overflow-y:auto;scrollbar-width:none}.phone-inner::-webkit-scrollbar{display:none}
.hero{height:clamp(230px,32svh,300px)}.hero:before{background:linear-gradient(0deg,#0b1020 0%,transparent 34%)}
.content h1,.content h2,.info-screen h1,.episode-complete h1,.path-title{color:#fff}
.content h1{font-size:28px;line-height:1.48;letter-spacing:-.5px;margin:10px 0 8px;font-weight:900}
.content h2{font-size:17px;line-height:1.65;margin:0 0 10px;color:#e3ddec}
.content .hero-badges{margin-bottom:14px}
.map-hero img{width:44%;left:0;right:auto;object-position:center 25%;opacity:.9}
.map-hero:before{background:linear-gradient(270deg,#11172b 25%,#11172b 49%,#11172b55 68%,transparent 100%)}
.map-head{max-width:64%}
@media(min-width:650px){.phone{height:850px;min-height:850px;max-height:900px}.phone-inner{height:100%}}

/* PERSONA v0.2 — live comic dialogue, adaptive protected-face staging */
:root{--pink:#ff4f8d;--violet:#9445ed;--ink:#0b1224;--text:#faf7ff;--muted:#b1b9d0;font-family:Peyda,Vazirmatn,Tahoma,sans-serif}
body{background:#070d19}
.phone{background:#090f1e}
.player-v2{position:relative;min-height:100svh;display:flex;flex-direction:column;background:#10182a}
.player-v2 .story-header{position:absolute;top:0;left:0;right:0;z-index:12;background:linear-gradient(180deg,#0a1025ee,#0a102500);padding:calc(12px + env(safe-area-inset-top)) 14px 20px;direction:rtl}
.player-v2 .story-header .iconbtn{background:#10172aca;backdrop-filter:blur(12px)}
.player-v2 .scene-visual{height:auto;min-height:clamp(380px,58svh,670px);flex:1;position:relative;overflow:hidden;isolation:isolate;background:#18233c}
.player-v2 .scene-visual.story-beat{min-height:clamp(410px,68svh,760px)}
.player-v2 .scene-visual.task-beat{min-height:clamp(340px,50svh,630px)}
.player-v2 .tehran-city{position:absolute;inset:0;background-image:url('./assets/tehran-city.svg');background-position:center;background-size:cover;z-index:0}
.player-v2 .scene-image{position:absolute;inset:auto 0 0;display:block;width:100%;height:70%;object-fit:cover;object-position:center 35%;z-index:1;filter:contrast(1.05) saturate(1.08);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 84%,transparent 100%)}
.player-v2 .scene-visual:before{display:none}
.player-v2 .stage-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,#07102422 0,#07102400 29%,#09102000 60%,#090f1ed9 100%),linear-gradient(90deg,#0d152522,transparent 45%,#16182c22)}
.player-v2 .comic-bubble{--tail-at:80%;z-index:6;position:absolute;top:calc(76px + env(safe-area-inset-top));width:min(84%,390px);max-height:44%;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:8px;padding:13px 16px 16px;background:#fffaf7;color:#141b32;border:2px solid #f76c9b;border-radius:23px;box-shadow:0 9px 23px #05071266;line-height:1.65;font-size:clamp(14px,4vw,18px);text-align:start;unicode-bidi:plaintext}
.player-v2 .comic-bubble.upper-left{left:5%;right:auto;--tail-at:24%}
.player-v2 .comic-bubble.upper-right{right:5%;left:auto;--tail-at:76%}
.player-v2 .comic-bubble.middle-left{top:34%;left:4%;width:68%;--tail-at:20%}
.player-v2 .comic-bubble.middle-right{top:34%;right:4%;width:68%;--tail-at:72%}
.player-v2 .comic-bubble::before{content:"";position:absolute;bottom:-15px;left:var(--tail-at);height:17px;width:18px;background:#fffaf7;clip-path:polygon(0 0,100% 0,78% 100%)}
.player-v2 .comic-bubble::after{content:"";position:absolute;bottom:-18px;left:calc(var(--tail-at) - 3px);height:17px;width:22px;background:#fa78a6;clip-path:polygon(0 0,100% 0,78% 100%);z-index:-1}
.player-v2 .comic-bubble.narration{border-color:#d9c1ff;background:#1a203bdc;color:#fff;backdrop-filter:blur(14px)}
.player-v2 .comic-bubble.narration:before{background:#1a203b}
.player-v2 .comic-bubble.narration:after{background:#d9c1ff}
.comic-speaker{font-family:Peyda,Vazirmatn,Tahoma,sans-serif;font-size:11px;font-weight:850;color:#bc2e70;direction:rtl;text-align:right;line-height:1.4}
.narration .comic-speaker{color:#f5a2e9}
.comic-line{font-weight:750;font-family:Peyda,Vazirmatn,Tahoma,sans-serif;white-space:normal;overflow-wrap:anywhere}
.comic-line[lang=en]{font-family:Inter,'Segoe UI',Arial,sans-serif;font-weight:650;line-height:1.5}
.bubble-sub{font-size:11px;line-height:1.7;border-top:1px solid #ffffff35;padding-top:6px;font-weight:500}
.player-v2 .scene-tags{right:14px;bottom:14px;z-index:4}
.comic-sheet{background:linear-gradient(180deg,#151e35 0%,#0c1428 100%);border:1px solid #465479;border-bottom:0;border-radius:28px 28px 0 0;margin-top:-24px;position:relative;z-index:10;padding:14px 17px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px;box-shadow:0 -15px 35px #03091780;min-height:188px}
.comic-sheet.story-sheet{min-height:125px}
.sheet-head{display:flex;justify-content:space-between;gap:10px;align-items:center;line-height:1.3;color:#f99fc4;font-size:12px;font-weight:900}
.sheet-head small{color:#9faed0;font-size:11px;font-weight:550}
.sheet-prompt{margin:0;color:#f5f4fa;font-size:clamp(13px,3.6vw,16px);line-height:1.72;font-weight:650}
.comic-sheet.story-sheet .sheet-prompt{color:#b9bfd4;font-size:12px}
.comic-sheet .primary{margin:3px 0 0;min-height:49px;border-radius:14px;box-shadow:0 9px 20px #d32a7633}
.comic-sheet .options{display:grid;gap:8px;margin:1px 0 8px}
.comic-sheet .option{min-height:45px;font-size:12.5px;border-radius:13px;line-height:1.65;padding:9px 11px;background:#202e4a}
.comic-sheet .opt-letter{width:25px;height:25px}
.comic-sheet .feedback{margin:0;padding:10px 12px;line-height:1.6;font-size:12px}
.comic-sheet .action-row{margin-top:2px}
.audio-pill{border:1px solid #566589;border-radius:30px;background:#293855;color:#eff4ff;font-size:12px;font-weight:850;padding:6px 14px;min-height:38px;align-self:flex-start;display:flex;align-items:center;gap:9px}
.audio-pill span{font-size:18px;color:#fa87b0}
.input-wrap{position:relative;display:flex;align-items:flex-start;gap:8px}
.answer-input{background:#101c31;border:1px solid #5d6a8e;border-radius:14px;outline:0;resize:vertical;min-height:49px;width:100%;padding:12px 14px;color:#fff;font:500 14px/1.5 Inter,'Segoe UI',Arial,sans-serif}
.answer-input:focus{border-color:#f283ba;box-shadow:0 0 0 2px #f283ba33}
.mic-btn{background:#6b285f;border:1px solid #e963a4;border-radius:14px;color:#fff;min-width:47px;height:47px;font-size:20px}
.assistive-note{font-size:10px;color:#a6b4d1;line-height:1.6;margin:0}
.cloze-prompt{background:#111d35;border:1px solid #586486;padding:13px;border-radius:13px;font:650 14px/1.55 Inter,'Segoe UI',Arial,sans-serif;color:#eff4ff}
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;direction:ltr}
.match-grid>div{display:grid;gap:8px;align-content:start}
.pair-item{width:100%;min-height:48px;border:1px solid #526187;background:#263453;color:#fff;border-radius:12px;padding:7px 9px;font-size:12px;line-height:1.5;font-weight:650}
.pair-item.pair-active{border-color:#fa5d9b;background:#532b50}
.pair-item.paired{border-color:#3a987e;background:#1a4a46;opacity:.72}
.match-counter{font-size:10px;color:#a2b0cb;text-align:center}
.comic-sheet .answer-zone{min-height:49px;margin:1px 0 4px}
.comic-sheet .chips{margin:4px 0 10px}
.comic-sheet .chip{font-size:13px}
@media(max-height:720px){.player-v2 .scene-visual{min-height:310px}.player-v2 .scene-visual.task-beat{min-height:285px}.player-v2 .scene-visual.story-beat{min-height:365px}.player-v2 .comic-bubble{top:calc(62px + env(safe-area-inset-top));font-size:13px;padding:10px 12px}.comic-sheet{padding:12px 15px calc(13px + env(safe-area-inset-bottom))}}
@media(min-width:650px){.player-v2{min-height:100%;height:100%}.player-v2 .scene-visual{min-height:340px}.player-v2 .scene-visual.story-beat{min-height:430px}}

/* PERSONA v0.3 — fiction is allowed to play, breathe, and advance without a quiz. */
.narrative-stage{height:100svh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;position:relative;background:#0c1326}
.narrative-stage .scene-visual.story-beat{height:100%;min-height:100svh;flex:1}
.narrative-stage .tehran-city{background-position:center 43%;filter:saturate(.9)}
.narrative-stage .scene-image{height:88%;object-position:center 34%;opacity:.96;filter:contrast(1.04) saturate(.94);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 75%,transparent 99%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 75%,transparent 99%)}
.narrative-stage .shot-close .scene-image{height:101%;width:115%;left:-7%;object-position:center 27%}
.narrative-stage .shot-wide .scene-image{height:82%;width:100%;object-position:center 50%;opacity:.82}
.narrative-stage .shot-detail .scene-image{height:96%;width:114%;left:-7%;object-position:center 46%;filter:blur(.35px) brightness(.9)}
.narrative-stage .shot-reaction .scene-image{height:95%;width:108%;left:-4%;object-position:center 30%}
.narrative-stage .scene-tags{bottom:145px;right:15px;max-width:calc(100% - 30px);flex-wrap:wrap}
.narrative-stage .comic-bubble{top:clamp(72px,12svh,145px);max-height:45%;width:89%;padding:16px 18px;box-shadow:0 16px 35px #0008;line-height:1.75;font-size:clamp(15px,4.25vw,19px)}
.narrative-stage .comic-bubble.middle-left,.narrative-stage .comic-bubble.middle-right{top:32svh;width:73%}
.narrative-stage .comic-bubble.narration{background:#141b34ed;border-color:#8b79ad}
.narrative-stage .comic-speaker{font-size:12px}
.narrative-stage .stage-vignette{background:linear-gradient(180deg,#070e1a66 0,transparent 30%,transparent 55%,#091121f5 100%),linear-gradient(90deg,#0c15282a,transparent 50%,#0c152829)}
.narrative-controls{z-index:9;position:absolute;bottom:0;left:0;right:0;padding:32px 17px calc(24px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent 0%,#081124bb 28%,#07101ef8 100%);display:flex;flex-direction:column;align-items:stretch;gap:12px}
.narrative-caption{color:#bdc4df;font-size:11px;text-align:center;font-weight:700;letter-spacing:.2px}
.narrative-next{border:1px solid #df87acaa;color:#fff;background:linear-gradient(105deg,#f14d88,#7f41e2);border-radius:17px;min-height:51px;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;font-size:15px;font-weight:900;box-shadow:0 8px 32px #fb4c8266}
.narrative-next span{font-size:22px}
.scene-phone{position:absolute;z-index:7;top:17%;right:10%;left:10%;max-height:61%;display:flex;flex-direction:column;background:#101b33eb;border:1px solid #8491be9e;border-radius:25px;box-shadow:0 20px 48px #000c;overflow:hidden;backdrop-filter:blur(12px)}
.phone-title{flex-shrink:0;padding:13px 17px;background:#1a2542;color:#fff;font-size:14px;font-weight:900;border-bottom:1px solid #53607b;text-align:center;position:relative}
.phone-dots{position:absolute;left:15px;top:16px;color:#8490b1;font-size:8px;letter-spacing:2px}
.phone-messages{overflow-y:auto;display:flex;flex-direction:column;padding:16px 12px 18px;gap:10px;scrollbar-width:thin}
.chat-line{max-width:87%;display:flex;flex-direction:column;gap:3px;padding:9px 12px 10px;border-radius:15px;line-height:1.8;font-size:13px;color:#fff;box-shadow:0 3px 7px #0003}
.chat-line b{font-size:10px;color:#c7d4fa}
.chat-line.mine{align-self:flex-start;background:#633269;border-bottom-left-radius:4px}
.chat-line.theirs{align-self:flex-end;background:#293a5a;border-bottom-right-radius:4px}
.chat-beat .scene-image{filter:blur(2.2px) brightness(.65)}
@media(max-height:700px){.narrative-stage .comic-bubble{top:67px;max-height:49%;padding:11px 14px;font-size:14px}.narrative-stage .scene-tags{bottom:133px}.narrative-controls{padding-bottom:calc(14px + env(safe-area-inset-bottom))}.scene-phone{top:14%;max-height:61%}.phone-messages{padding:8px;gap:6px}.chat-line{font-size:11.5px;padding:6px 9px}}
@media(min-width:650px){.narrative-stage{min-height:100%;height:100%}.narrative-stage .scene-visual.story-beat{min-height:100%;height:100%}}

/* Canon v2: a single male protagonist; name remains personalized. */
.character-preview{display:flex;align-items:center;gap:14px;margin:20px 0 24px;padding:12px 14px;background:rgba(109,40,217,.11);border:1px solid rgba(109,40,217,.28);border-radius:20px}
.character-preview img{width:72px;height:88px;object-fit:cover;border-radius:14px;flex-shrink:0}
.character-preview p{font-size:.91rem;line-height:1.8;margin:0}

/* 250-episode series navigator: only one season rendered at a time. */
.season-strip{display:flex;overflow-x:auto;gap:8px;padding:10px 18px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.season-chip{flex:0 0 auto;border:1px solid rgba(255,255,255,.19);border-radius:999px;background:#242638;color:#e4e5f2;font:inherit;font-size:12px;font-weight:600;padding:9px 13px;cursor:pointer;white-space:nowrap;scroll-snap-align:center}
.season-chip.current{background:#6d28d9;color:white;border-color:#9566f8}
.season-caption{display:block;font-size:12px;color:#a7aabf;font-weight:500;margin-top:6px}
@media(prefers-reduced-motion:reduce){.season-strip{scroll-behavior:auto}}

/* P001-P250 game build: responsive resume, safe-area and accessibility improvements */
.resume-strip{margin:4px 18px 9px;padding:13px 14px;background:linear-gradient(110deg,#281c47,#22284c);border:1px solid #7754a5;border-radius:18px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.resume-strip strong{display:block;font-size:13px;color:#fff}
.resume-strip small{display:block;font-size:11px;color:#bcc5e4;line-height:1.7;margin-top:3px}
.resume-button{border:0;border-radius:12px;background:#f25c8d;color:#fff;font-size:12px;font-weight:800;padding:10px 12px;white-space:nowrap;min-height:42px}
@media(max-width:360px){.resume-strip{flex-direction:column;align-items:stretch}.resume-button{width:100%}.scene-tags{gap:3px}.scene-tags span{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
button{touch-action:manipulation}textarea:focus-visible{outline:3px solid #ffa5c4;outline-offset:2px}