:root{--bg:#111318;--panel:rgba(12,14,19,.88);--text:#f3f0e8;--muted:#b8b2a6;--line:rgba(255,255,255,.15);--accent:#d6b978;--concept:#dcebd6;--conceptText:#263728;--safeBottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;background:#090b0f;color:var(--text);font-family:system-ui,-apple-system,"Noto Sans KR","Malgun Gothic",sans-serif;overflow:hidden}button{font:inherit;touch-action:manipulation}.app-shell{position:relative;width:100%;height:100vh;height:100dvh;max-width:520px;margin:0 auto;background:#111318;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.4)}
.screen{position:absolute;inset:0;display:none}.screen.active{display:block}.title-screen{background:radial-gradient(circle at 50% 32%,#2c3239 0,#14181d 42%,#090b0f 100%)}.title-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.75))}.title-content{position:absolute;left:24px;right:24px;bottom:max(58px,calc(36px + var(--safeBottom)));text-align:center}.eyebrow{font-size:11px;letter-spacing:.22em;color:#bcb5a7}.secret-title{
  margin:6px auto 10px!important;
  white-space:nowrap;
  font-family:var(--font-title)!important;
  font-size:clamp(50px,14vw,72px)!important;
  line-height:1.06;
  font-weight:400!important;
  letter-spacing:-.035em!important;
  color:#f5ebd8;
  text-shadow:0 4px 18px rgba(0,0,0,.88),0 0 30px rgba(195,153,76,.15);
  font-feature-settings:"kern" 1;
  position:relative;
}.secret-title::after{
  content:"";
  display:block;
  width:min(56vw,230px);
  height:1px;
  margin:10px auto 0;
  background:linear-gradient(90deg,transparent,rgba(216,184,117,.68) 18%,rgba(244,231,204,.92) 50%,rgba(216,184,117,.68) 82%,transparent);
  box-shadow:0 0 12px rgba(216,184,117,.12);
}
.title-copy{
  margin:0!important;
  font-family:var(--font-title);
  font-size:clamp(12px,3.4vw,15px)!important;
  line-height:1.68!important;
  font-weight:400;
  letter-spacing:.015em;
  color:rgba(236,228,214,.80)!important;
  text-shadow:0 2px 12px rgba(0,0,0,.90);
  word-break:keep-all;
}.title-actions{display:grid;gap:10px}.primary-btn,.ghost-btn{min-height:52px;border-radius:14px;border:1px solid transparent;font-weight:800;transition:transform .1s ease,filter .1s ease}.primary-btn{background:#e7d19b;color:#17140e}.ghost-btn{background:rgba(255,255,255,.06);color:#eee;border-color:var(--line)}button:active{transform:scale(.975);filter:brightness(.88)}.tap-hint{font-size:12px;color:#8f8b84}.hidden{display:none!important}
.story-screen{background:#111}.backdrop{position:absolute;inset:0 0 28% 0;background-position:center;background-size:cover;transition:opacity .35s ease,transform .8s ease}.backdrop-fallback{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,#45433c 0,#24272a 45%,#101214 100%);transition:opacity .35s ease}.cinema-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.02) 40%,rgba(0,0,0,.65) 72%,#0b0d11 100%);pointer-events:none}.scene-fade{position:absolute;z-index:20;inset:0;background:#050608;opacity:0;pointer-events:none;transition:opacity .38s ease}.scene-fade.opaque{opacity:1;pointer-events:auto}.scene-fade.no-transition{transition:none}
.story-topbar{position:absolute;z-index:5;top:0;left:0;right:0;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 8px;display:flex;align-items:center;gap:10px;background:linear-gradient(#090b0fb5,transparent)}.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(10,11,14,.55);color:#fff;transition:transform .1s ease,background .1s ease}.scene-meta{flex:1;text-align:center;min-width:0}.scene-meta span{display:block;font-size:13px;font-weight:800}.scene-meta small{display:block;color:#bbb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dialogue-panel{position:absolute;z-index:4;left:10px;right:10px;bottom:max(10px,var(--safeBottom));min-height:29%;padding:16px 17px 12px;border:1px solid var(--line);border-radius:18px;background:var(--panel);backdrop-filter:blur(12px);box-shadow:0 15px 45px rgba(0,0,0,.36);cursor:pointer;touch-action:manipulation}.speaker-row{display:flex;justify-content:space-between;align-items:center;height:22px}.speaker-row #speakerName{font-size:14px;font-weight:900;color:var(--accent)}#lineCounter{font-size:11px;color:#888}.dialogue-text{margin:12px 0 16px;font-size:17px;line-height:1.7;word-break:keep-all;min-height:3.4em}.dialogue-panel.is-typing .dialogue-text::after{content:'▋';display:inline-block;margin-left:2px;opacity:.65;animation:cursorBlink .7s steps(1) infinite}.dialogue-footer{display:flex;align-items:center;justify-content:space-between;color:#888;font-size:11px}.next-btn{border:0;background:transparent;color:#ddd;font-size:18px}@keyframes cursorBlink{50%{opacity:0}}
.stage-caption{position:absolute;z-index:3;left:22px;right:22px;top:18%;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.48);font-size:13px;color:#ddd;line-height:1.55;font-style:italic;text-align:center}.concept-card{position:absolute;z-index:6;left:18px;right:18px;top:50%;transform:translateY(-50%);padding:18px;border-radius:16px;background:var(--concept);color:var(--conceptText);font-weight:800;line-height:1.65;box-shadow:0 20px 70px rgba(0,0,0,.45)}
.teacher-panel{position:absolute;z-index:30;inset:0;background:#12151a;transform:translateY(100%);transition:transform .28s ease;overflow:auto;padding-bottom:calc(20px + var(--safeBottom))}.teacher-panel.open{transform:none}.teacher-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:16px;background:#171b21;border-bottom:1px solid var(--line)}.teacher-head strong{display:block}.teacher-head small{display:block;color:#999;margin-top:3px}.teacher-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px}.mini-btn{border:1px solid var(--line);background:#222730;color:#eee;border-radius:9px;padding:8px 10px;transition:transform .1s ease,filter .1s ease}.engine-status{width:100%;font-size:11px;line-height:1.6;color:#8f98a4;background:#0f1216;border:1px solid #252b33;border-radius:8px;padding:8px 10px}.scene-navigator{padding:12px}.chapter-group{margin-bottom:20px}.chapter-group h3{font-size:14px;color:#d8c08c;margin:10px 4px}.scene-jump{display:block;width:100%;text-align:left;padding:11px 12px;margin:6px 0;border:1px solid #303640;border-radius:10px;background:#1a1e24;color:#eee;transition:transform .1s ease,background .1s ease}.scene-jump small{display:block;color:#818892;margin-top:3px}
@media(min-width:700px){.app-shell{height:min(920px,100dvh);top:50%;transform:translateY(-50%);border-radius:20px}.dialogue-text{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.08s!important}.dialogue-panel.is-typing .dialogue-text::after{display:none}}

/* v0.3 character / camera / dialogue-log layer */
.character-layer{position:absolute;z-index:2;inset:5% 0 27% 0;pointer-events:none;overflow:hidden;transition:opacity .2s ease}.character-layer.characters-hidden{opacity:0}.character-layer.narration-mode .character-slot{filter:brightness(.76) saturate(.82)}
.character-slot{position:absolute;bottom:-1%;width:66%;height:90%;opacity:1;transition:opacity .2s ease,transform .25s ease,filter .2s ease}.slot-left{left:-13%;transform-origin:50% 100%}.slot-right{right:-13%;transform-origin:50% 100%}.slot-center{left:17%;width:66%;transform-origin:50% 100%}.character-slot.entering{opacity:0;transform:translateY(4%) scale(.97)}.character-slot.leaving{opacity:0;transform:translateY(2%) scale(.985)}.character-slot.inactive-speaker{filter:brightness(.58) saturate(.72);transform:scale(.975)}.character-slot.active-speaker{filter:brightness(1.06) saturate(1);transform:scale(1.015);z-index:3}
.character-figure{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}.character-img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 18px rgba(0,0,0,.52))}.character-fallback{width:76%;height:82%;margin-bottom:0;border-radius:46% 46% 10% 10% / 30% 30% 8% 8%;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(105,103,98,.48),rgba(30,32,37,.92));box-shadow:inset 0 0 45px rgba(255,255,255,.035),0 20px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#d9d3c7}.fallback-mark{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);font-family:serif;font-size:34px}.character-fallback small{margin-top:12px;font-size:11px;max-width:85%;line-height:1.35;color:#c5c0b7}.character-nameplate{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:rgba(8,10,13,.68);border:1px solid rgba(255,255,255,.12);font-size:11px;color:#eee;white-space:nowrap;opacity:.82}.character-slot.active-speaker .character-nameplate{border-color:rgba(214,185,120,.6);color:#f1dcaa}

@keyframes cameraSlowIn{from{transform:scale(1.01)}to{transform:scale(1.09)}}
@keyframes cameraSlowOut{from{transform:scale(1.09)}to{transform:scale(1.01)}}
@keyframes cameraPanLeft{from{transform:scale(1.075) translateX(2.2%)}to{transform:scale(1.075) translateX(-2.2%)}}
@keyframes cameraPanRight{from{transform:scale(1.075) translateX(-2.2%)}to{transform:scale(1.075) translateX(2.2%)}}
@keyframes cameraShakeSoft{0%,100%{transform:scale(1.055) translate(0,0)}20%{transform:scale(1.055) translate(-.25%,.05%)}42%{transform:scale(1.055) translate(.18%,-.08%)}65%{transform:scale(1.055) translate(-.12%,.06%)}82%{transform:scale(1.055) translate(.12%,0)}}
.backdrop.camera-slow-in{animation:cameraSlowIn 15s ease-out forwards}.backdrop.camera-slow-out{animation:cameraSlowOut 15s ease-out forwards}.backdrop.camera-pan-left{animation:cameraPanLeft 16s ease-in-out alternate infinite}.backdrop.camera-pan-right{animation:cameraPanRight 16s ease-in-out alternate infinite}.backdrop.camera-shake-soft{animation:cameraShakeSoft 2.6s ease-in-out infinite}

.log-panel{position:absolute;z-index:28;inset:0;background:rgba(13,16,20,.985);transform:translateX(100%);transition:transform .26s ease;display:flex;flex-direction:column;padding-bottom:var(--safeBottom)}.log-panel.open{transform:none}.log-head{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top,0px)) 14px 10px;border-bottom:1px solid var(--line);background:#171b21}.log-list{flex:1;overflow:auto;padding:12px 14px 28px;scroll-behavior:smooth}.log-item{padding:12px 12px 13px;margin-bottom:9px;border-radius:12px;border:1px solid #2c323b;background:#181c22}.log-item .log-meta{display:flex;gap:8px;align-items:center;margin-bottom:7px}.log-item .log-meta span{font-size:10px;color:#d8c08c;font-weight:800}.log-item .log-meta small{font-size:10px;color:#707783;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.log-item strong{display:block;font-size:12px;color:#d7c9a8;margin-bottom:4px}.log-item p{margin:0;font-size:14px;line-height:1.62;color:#ddd;word-break:keep-all}.log-empty{text-align:center;color:#707783;font-size:13px;margin:auto 20px}

@media(max-width:370px){.character-slot{width:68%}.slot-left{left:-15%}.slot-right{right:-15%}.dialogue-text{font-size:16px}.story-topbar{gap:6px}.icon-btn{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.backdrop.camera-slow-in,.backdrop.camera-slow-out,.backdrop.camera-pan-left,.backdrop.camera-pan-right,.backdrop.camera-shake-soft{animation:none!important}.character-slot{transition-duration:.05s!important}.log-list{scroll-behavior:auto}}


/* v0.4 story-specific historical visualization layer */
.story-fx-layer{position:absolute;z-index:3;left:10px;right:10px;top:12.5%;bottom:33%;display:flex;align-items:flex-start;justify-content:center;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.story-fx-layer.fx-hidden{opacity:0}.story-fx-layer:empty{display:none}.fx-card{width:min(100%,520px);border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(10,13,17,.84);backdrop-filter:blur(10px);box-shadow:0 18px 48px rgba(0,0,0,.34);padding:12px 13px;color:#eee;animation:fxReveal .28s ease both}.fx-card.fx-light{background:rgba(235,240,229,.93);color:#172019;border-color:rgba(255,255,255,.5)}.fx-title{font-size:12px;font-weight:900;letter-spacing:-.02em;color:#f0d79c;margin-bottom:9px;text-align:center}.fx-light .fx-title{color:#315b3a}.fx-sub{font-size:9px;color:#929aa5;text-align:center;margin-top:7px;line-height:1.4}.fx-grid{display:grid;gap:7px}.fx-row{display:flex;align-items:center;gap:7px}.fx-chip{padding:5px 8px;border-radius:999px;background:#242a32;border:1px solid #353e49;font-size:9px;white-space:nowrap}.fx-chip.bad{background:#351d20;border-color:#623039;color:#f0b5b9}.fx-chip.warn{background:#332b19;border-color:#65542d;color:#efd595}.fx-chip.good{background:#183023;border-color:#315f45;color:#bce5c9}.fx-arrow{color:#d6bd80;font-weight:900}.fx-muted{color:#8d96a0}.fx-big{font-size:19px;font-weight:900;letter-spacing:-.04em}.fx-value{font-variant-numeric:tabular-nums;font-weight:900}.fx-bar{height:8px;border-radius:999px;background:#2d333c;overflow:hidden;flex:1}.fx-bar>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d7bd82,#efe1b8)}.fx-bar.danger>i{background:linear-gradient(90deg,#a64c54,#e28c91)}.fx-bar.safe>i{background:linear-gradient(90deg,#4c8a61,#91c9a0)}.fx-bar.dim>i{background:linear-gradient(90deg,#697380,#aeb6c0)}
@keyframes fxReveal{from{opacity:0;transform:translateY(5px) scale(.985)}to{opacity:1;transform:none}}

/* world / epilogue */
.world-track{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:5px;padding:6px 2px}.world-node{text-align:center}.world-dot{width:36px;height:36px;margin:auto;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);background:#20262e;font-size:10px;font-weight:900}.world-node.active .world-dot{box-shadow:0 0 0 4px rgba(218,189,126,.08),0 0 24px rgba(218,189,126,.25);border-color:#d7bd82}.world-line{height:2px;width:36px;background:linear-gradient(90deg,transparent,#b99f6b,transparent);position:relative}.world-line::after{content:'›';position:absolute;right:-2px;top:-10px;color:#d7bd82}.world-node small{display:block;margin-top:4px;color:#b8bec6;font-size:8px}.epilogue-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.ep-jack{padding:7px 5px;border-radius:10px;background:#181d23;border:1px solid #303741;text-align:center;font-size:8px;line-height:1.35}.ep-jack strong{display:block;color:#ebd8a8;font-size:9px;margin-bottom:3px}

/* CH1 */
.family-board{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.family-person{display:grid;grid-template-columns:24px 1fr;gap:7px;align-items:center;padding:6px 7px;border-radius:10px;background:#181d23;border:1px solid #303741}.family-icon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#282f38;font-size:10px}.family-person b{display:block;font-size:9px}.family-person small{display:block;font-size:8px;color:#99a1ab;line-height:1.35;margin-top:2px}.family-person.danger{border-color:#61333a;background:#2d1b1f}.family-person.warn{border-color:#5c4b2c;background:#2c2618}.family-person.lost{opacity:.58;filter:grayscale(.7)}
.population-row{display:grid;grid-template-columns:42px 1fr 78px;gap:7px;align-items:center;margin:9px 0}.population-row strong{font-size:9px}.population-track{height:13px;background:#222831;border-radius:3px;position:relative;overflow:hidden}.population-before{position:absolute;inset:0;background:#6c747f;opacity:.38}.population-after{position:absolute;left:0;top:0;bottom:0;background:#c35f67;min-width:3px}.population-num{text-align:right;font-size:8.5px;white-space:nowrap;font-weight:900}.population-drop{text-align:center;font-size:10px;color:#efa3a7;font-weight:900;margin-top:5px}.ledger-grid{display:grid;grid-template-columns:1fr auto;gap:7px 10px;align-items:center}.ledger-grid span{font-size:9px}.ledger-grid b{font-size:10px}.ledger-down{color:#e29398}.ledger-hold{color:#edd695}.africa-map{height:100px;position:relative;margin:3px 0 5px;border-radius:12px;background:radial-gradient(circle at 38% 55%,rgba(213,184,117,.2),transparent 18%),linear-gradient(135deg,#17202a,#10151b);overflow:hidden}.africa-map .ocean-label{position:absolute;left:45%;top:42%;font-size:8px;color:#64707d;letter-spacing:.08em}.continent-dot{position:absolute;width:58px;height:40px;border:1px solid #495462;border-radius:46% 54% 53% 47% / 58% 40% 60% 42%;display:grid;place-items:center;font-size:8px;font-weight:900;background:#212a34}.continent-dot.america{left:6%;top:26%}.continent-dot.africa{left:58%;top:33%;border-color:#d1b56f;box-shadow:0 0 24px rgba(209,181,111,.32);color:#f0dca7}.africa-arrow{position:absolute;left:28%;top:48%;width:32%;height:2px;background:linear-gradient(90deg,#77818d,#d1b56f)}.africa-arrow::after{content:'›';position:absolute;right:-3px;top:-9px;color:#d1b56f;font-size:18px}

/* CH2 */
.body-arc{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.body-state{text-align:center;padding:7px;border-radius:10px;background:#181d23;border:1px solid #303741}.body-figure{height:54px;display:flex;justify-content:center;align-items:flex-end;margin-bottom:4px}.body-sil{height:50px;width:30px;border-radius:45% 45% 16% 16% / 24% 24% 10% 10%;background:#7d8792}.body-state.strong .body-sil{width:38px;background:#b99961}.body-state.weak .body-sil{width:22px;height:46px;background:#646c76}.body-state b{font-size:9px;display:block}.body-state small{font-size:8px;color:#919aa4}.displace-track{display:flex;align-items:center;gap:5px;justify-content:center}.home-cluster,.march-cluster,.coast-cluster{padding:7px;border-radius:9px;background:#181d23;border:1px solid #303741;text-align:center;min-width:64px}.people-icons{letter-spacing:-2px;font-size:15px}.cluster-label{font-size:8px;color:#9aa2ac;margin-top:3px}.march-cluster{border-color:#5e4232;background:#2b2019}.ship-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;padding:7px;background:#151a20;border:1px solid #333b45;border-radius:11px;min-height:58px}.ship-person{height:8px;border-radius:3px;background:#777f89;opacity:.22}.ship-person.filled{background:#b78570;opacity:.9}.ship-stat{display:flex;justify-content:space-between;font-size:9px;margin-top:6px}.name-wall{display:grid;grid-template-columns:1fr 1fr;gap:7px}.name-box{padding:9px;border-radius:10px;background:#181d23;border:1px solid #303741;text-align:center}.name-box .label{font-size:8px;color:#858e99}.name-box .main{font-size:16px;font-weight:900;margin:4px 0}.name-box.number .main{color:#8e96a0;text-decoration:line-through}.name-box.name{border-color:#b69b62;box-shadow:inset 0 0 0 1px rgba(182,155,98,.08)}.name-box.name .main{color:#f0d99f}.name-pulse{font-size:9px;text-align:center;margin-top:6px;color:#ead398}.triangle-box{height:138px;position:relative}.tri-node{position:absolute;width:92px;padding:7px 5px;border-radius:11px;background:#181d23;border:1px solid #303741;text-align:center}.tri-node b{display:block;font-size:9px}.tri-node small{display:block;font-size:7.5px;color:#9aa2ac;line-height:1.35;margin-top:2px}.tri-europe{left:50%;top:0;transform:translateX(-50%)}.tri-africa{left:3px;bottom:0}.tri-america{right:3px;bottom:0}.tri-path{position:absolute;font-size:16px;color:#d3b977}.path-ea{left:22%;top:46%;transform:rotate(-30deg)}.path-aa{left:50%;bottom:18%;transform:translateX(-50%)}.path-au{right:22%;top:46%;transform:rotate(-150deg)}

/* CH3 */
.price-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:8px 0}.price-item{text-align:center;padding:7px;border-radius:10px;background:#181d23;border:1px solid #303741}.price-item b{display:block;font-size:9px}.portion{margin:6px auto;height:22px;border-radius:6px;background:#d0b17a}.portion.big{width:70%}.portion.small{width:38%}.medicine{height:25px;width:20px;border-radius:3px 3px 7px 7px;background:#788b76;margin:4px auto}.medicine.small{transform:scale(.65)}.price-coin{font-size:18px}.price-note{text-align:center;font-size:9px;color:#e9cf92;font-weight:900}.turn-chain{display:flex;align-items:center;justify-content:center;gap:5px}.turn-step{padding:7px 8px;border-radius:10px;background:#24212a;border:1px solid #42384d;font-size:9px;font-weight:900}.turn-step:last-child{background:#32211d;border-color:#6b4035;color:#edc2a8}.gauge-row{display:grid;grid-template-columns:48px 1fr 42px;gap:7px;align-items:center;margin:8px 0}.gauge-row b{font-size:9px}.gauge-row em{font-size:9px;font-style:normal;text-align:right}.betrayal-track{display:grid;grid-template-columns:1fr auto 1fr;gap:7px;align-items:center}.betray-person{padding:8px;border-radius:10px;text-align:center;background:#181d23;border:1px solid #303741}.betray-person b{font-size:10px}.betray-person small{display:block;font-size:8px;color:#959da7;margin-top:3px}.betray-person.broken{border-color:#60343a;background:#2b1b1f}.collapse-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.collapse-metric{padding:8px 4px;text-align:center;border-radius:10px;background:#181d23;border:1px solid #303741}.collapse-metric b{display:block;font-size:14px;color:#e7c681}.collapse-metric small{font-size:8px;color:#929aa4}.collapse-metric.zero b{color:#e58f94}.door-row{display:flex;justify-content:center;gap:6px;margin-top:7px}.door{width:34px;height:44px;border-radius:3px 3px 0 0;background:#3a3028;border:1px solid #5a493d;position:relative}.door.closed::after{content:'×';position:absolute;inset:0;display:grid;place-items:center;color:#c27a7e;font-weight:900}.lonely-items{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.lonely-item{padding:9px 5px;text-align:center;border-radius:10px;background:#181d23;border:1px solid #303741}.lonely-item .obj{font-size:21px}.lonely-item b{display:block;font-size:8px;margin-top:4px;color:#c9b788}.causal-chain{display:flex;align-items:center;gap:4px;overflow:hidden}.cause{flex:1;padding:6px 4px;border-radius:8px;text-align:center;background:#18231c;border:1px solid #34523c;font-size:7.5px;line-height:1.3}.cause-arrow{font-size:12px;color:#719c7a}

@media(max-width:370px){.story-fx-layer{top:13%;left:7px;right:7px}.fx-card{padding:10px}.family-board{gap:4px}.family-person{padding:5px}.tri-node{width:84px}.epilogue-cards{gap:4px}.ep-jack{padding:6px 3px}.causal-chain{gap:2px}.cause{font-size:7px;padding:5px 2px}}
@media(prefers-reduced-motion:reduce){.fx-card{animation:none!important}.story-fx-layer{transition:none!important}}

/* v0.6 layout editor + per-scene placement */
.teacher-layout{padding:12px 16px;border-bottom:1px solid var(--line)}
.layout-card{padding:12px;border-radius:12px;background:#15191f;border:1px solid #28303a}
.layout-card h4{margin:0 0 10px;font-size:13px;color:#dfc98f}
.layout-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}.layout-inline{display:flex;align-items:center;gap:6px;font-size:12px;color:#d2d8de}
.layout-select{min-height:34px;border-radius:8px;border:1px solid #39414d;background:#20262f;color:#eef2f6;padding:0 10px}
.layout-control{display:grid;grid-template-columns:52px 1fr 54px;gap:8px;align-items:center;margin:7px 0}.layout-control span{font-size:11px;color:#a8b1bc}.layout-control output{font-size:11px;text-align:right;color:#e5c985}.layout-control input[type=range]{width:100%}.layout-status{margin-top:10px;padding:8px 10px;border-radius:10px;background:#0f1216;border:1px solid #252b33;font-size:11px;line-height:1.55;color:#99a3af}
.story-screen.ui-hidden .story-topbar,.story-screen.ui-hidden .dialogue-panel,.story-screen.ui-hidden .stage-caption,.story-screen.ui-hidden .concept-card,.story-screen.ui-hidden .story-fx-layer{opacity:0;pointer-events:none}
.story-screen.ui-hidden .backdrop{inset:0}

.character-slot{--slot-x:0%;--slot-y:0%;--flip:1;--pose-scale:1;position:absolute;bottom:-1%;width:66%;height:90%;opacity:1;transition:opacity .2s ease,filter .2s ease,transform .2s ease;transform:translate(var(--slot-x),var(--slot-y))}
.slot-left{left:-13%;transform-origin:50% 100%}.slot-right{right:-13%;transform-origin:50% 100%}.slot-center{left:17%;width:66%;transform-origin:50% 100%}
.character-slot.entering,.character-slot.leaving{transform:translate(var(--slot-x),var(--slot-y))}
.character-figure{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;transform-origin:50% 100%;transition:transform .24s ease,opacity .2s ease;transform:translateY(0) scaleX(var(--flip)) scale(var(--pose-scale)) scale(1)}
.character-slot.entering .character-figure{transform:translateY(4%) scaleX(var(--flip)) scale(var(--pose-scale)) scale(.97)}
.character-slot.leaving .character-figure{transform:translateY(2%) scaleX(var(--flip)) scale(var(--pose-scale)) scale(.985)}
.character-slot.inactive-speaker{filter:brightness(.58) saturate(.72);z-index:1}.character-slot.inactive-speaker .character-figure{transform:translateY(0) scaleX(var(--flip)) scale(var(--pose-scale)) scale(.975)}
.character-slot.active-speaker{filter:brightness(1.06) saturate(1);z-index:3}.character-slot.active-speaker .character-figure{transform:translateY(0) scaleX(var(--flip)) scale(var(--pose-scale)) scale(1.015)}
.character-layer.narration-mode .character-slot{filter:brightness(.76) saturate(.82)}

@media(max-width:390px){.layout-control{grid-template-columns:48px 1fr 48px}.layout-row{gap:6px}.layout-inline{font-size:11px}}

/* v0.7 story director */
.teacher-director{padding:12px 16px;border-bottom:1px solid var(--line)}
.director-card{padding:12px;border-radius:12px;background:#15191f;border:1px solid #28303a}
.director-card h4{margin:0 0 10px;font-size:13px;color:#dfc98f}
.director-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.director-jump{display:flex;align-items:center;gap:8px;margin-top:9px}.director-jump label{display:flex;align-items:center;gap:7px;font-size:12px;color:#c9d0d8}.director-jump input{width:76px;height:34px;border-radius:8px;border:1px solid #3a424e;background:#20262f;color:#fff;padding:0 8px}
.director-status{margin-top:9px;padding:8px 10px;border-radius:10px;background:#0f1216;border:1px solid #252b33;font-size:11px;line-height:1.55;color:#a9b3bd}
.director-export{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.director-export textarea{width:100%;height:112px;resize:vertical;border-radius:10px;border:1px solid #303845;background:#0b0e12;color:#bac5d0;padding:9px;font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}

/* dialogue tone */
.dialogue-panel{transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,transform .25s ease,opacity .2s ease}
.dialogue-panel.tone-narration{background:rgba(11,13,17,.78);border-color:rgba(255,255,255,.10)}
.dialogue-panel.tone-stage{background:rgba(12,14,17,.72);border-color:rgba(255,255,255,.08)}
.dialogue-panel.tone-concept{background:rgba(18,25,20,.86);border-color:rgba(139,183,146,.36)}
.dialogue-panel.tone-memory{background:rgba(28,23,20,.87);border-color:rgba(215,185,120,.32);box-shadow:0 16px 48px rgba(0,0,0,.40),inset 0 0 28px rgba(215,185,120,.035)}
.dialogue-panel.tone-impact{background:rgba(25,16,18,.90);border-color:rgba(196,91,99,.42);box-shadow:0 18px 55px rgba(0,0,0,.46),0 0 34px rgba(151,55,62,.08)}
.dialogue-panel.tone-cold{background:rgba(13,18,22,.91);border-color:rgba(128,151,171,.28)}
.dialogue-panel.tone-silence{background:rgba(6,7,9,.94);border-color:rgba(255,255,255,.07);box-shadow:0 18px 58px rgba(0,0,0,.56)}
.dialogue-panel.tone-identity{background:rgba(17,19,22,.93);border-color:rgba(230,201,130,.46);box-shadow:0 18px 55px rgba(0,0,0,.47),0 0 32px rgba(214,185,120,.10)}
.dialogue-panel.tone-confession{background:rgba(14,12,14,.94);border-color:rgba(173,139,148,.32)}
.dialogue-panel.tone-epilogue{background:rgba(8,10,13,.86);border-color:rgba(214,185,120,.30)}
.dialogue-panel.tone-chapter{background:rgba(8,10,13,.94);border-color:rgba(214,185,120,.32)}
.dialogue-panel.director-closeup{transform:translateY(-1px)}
.dialogue-panel.tone-silence #speakerName,.dialogue-panel.tone-narration #speakerName{opacity:.72}

/* character focus */
.character-layer.emotional-focus .character-slot.active-speaker .character-img{filter:drop-shadow(0 16px 22px rgba(0,0,0,.60)) contrast(1.025)}
.character-layer.emotional-focus .character-slot.inactive-speaker{filter:brightness(.46) saturate(.62) blur(.15px)}
.character-layer.soft-focus .character-slot.inactive-speaker{filter:brightness(.55) saturate(.70)}

/* transition director */
.scene-fade{--transition-ms:520ms;transition:opacity var(--transition-ms) ease;background:#050608}
.scene-fade.transition-warm-dissolve{background:#15100c}
.scene-fade.transition-cold-dissolve{background:#080d13}
.scene-fade.transition-gold-dissolve{background:#171207}
.scene-fade.transition-hard-cut{transition-duration:150ms;background:#050608}
.scene-fade.transition-hard-black{background:#000;transition-timing-function:cubic-bezier(.3,0,.7,1)}
.scene-fade.transition-slow-black{background:#030405;transition-timing-function:ease-in-out}
.scene-fade.transition-long-black{background:#000;transition-timing-function:ease-in-out}
.scene-fade.transition-pulse-black{background:radial-gradient(circle at 50% 45%,#1e1113 0,#050608 55%,#000 100%)}

@media(max-width:370px){.director-controls{grid-template-columns:1fr}.director-jump{flex-wrap:wrap}.director-export .mini-btn{flex:1}.director-export textarea{height:96px}}

/* v0.8 mobile QA / pacing / performance polish */
.boot-overlay{position:fixed;z-index:120;inset:0;display:grid;place-items:center;background:#07090c;color:#f1ede4;transition:opacity .42s ease,visibility .42s ease}.boot-overlay.ready{opacity:0;visibility:hidden;pointer-events:none}.boot-inner{width:min(78vw,340px);text-align:center}.boot-kicker{display:block;font-size:9px;letter-spacing:.22em;color:#8f98a3;margin-bottom:10px}.boot-inner strong{display:block;font-family:serif;font-size:34px;letter-spacing:-.04em;margin-bottom:18px}.boot-line{height:3px;border-radius:999px;background:#20252c;overflow:hidden}.boot-line i{display:block;width:10%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9e8659,#e2ca91);transition:width .25s ease}.boot-inner small{display:block;margin-top:10px;font-size:11px;color:#7f8790}
.story-progress{position:absolute;z-index:6;left:0;right:0;top:calc(60px + env(safe-area-inset-top,0px));height:2px;background:rgba(255,255,255,.055);pointer-events:none}.story-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#a98f5d,#e2c984);box-shadow:0 0 9px rgba(214,185,120,.24);transition:width .32s ease}
.app-toast{position:absolute;z-index:26;left:50%;top:calc(68px + env(safe-area-inset-top,0px));transform:translate(-50%,-6px);max-width:82%;padding:8px 11px;border-radius:999px;background:rgba(10,12,15,.88);border:1px solid rgba(255,255,255,.12);font-size:11px;color:#e8e3d8;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-toast.show{opacity:1;transform:translate(-50%,0)}

/* adaptive dialogue density */
.dialogue-panel{max-height:38%;overflow:hidden}.dialogue-panel.density-short{min-height:23%}.dialogue-panel.density-medium{min-height:27%}.dialogue-panel.density-long{min-height:31%}.dialogue-panel.density-xlong{min-height:34%;max-height:42%}.dialogue-panel.density-long .dialogue-text{font-size:16.2px;line-height:1.62}.dialogue-panel.density-xlong .dialogue-text{font-size:15.5px;line-height:1.56;margin-top:9px;margin-bottom:11px}.dialogue-panel.density-short .dialogue-text{font-size:17.4px}.dialogue-panel.linger .next-btn{opacity:.28}.dialogue-panel.linger #nextHint{color:#aaa;letter-spacing:.08em}.dialogue-panel.linger::after{content:'';position:absolute;left:16px;right:16px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(214,185,120,.34),transparent);animation:lingerPulse .75s ease both}@keyframes lingerPulse{from{opacity:0}40%{opacity:1}to{opacity:0}}

/* mobile viewport profiles */
.app-shell.compact-height .character-layer{inset:6.5% 0 31% 0}.app-shell.compact-height .backdrop{inset:0 0 31% 0}.app-shell.compact-height .dialogue-panel{bottom:max(6px,var(--safeBottom));left:7px;right:7px;padding:12px 14px 9px;border-radius:15px}.app-shell.compact-height .dialogue-text{font-size:15.2px;line-height:1.55;margin:8px 0 10px;min-height:2.9em}.app-shell.compact-height .speaker-row{height:18px}.app-shell.compact-height .speaker-row #speakerName{font-size:12.5px}.app-shell.compact-height .dialogue-footer{font-size:10px}.app-shell.compact-height .character-nameplate{font-size:9px;padding:4px 8px}.app-shell.compact-height .story-fx-layer{bottom:37%;top:12%}.app-shell.compact-height .concept-card{font-size:13px;padding:14px}.app-shell.tiny-width .story-topbar{padding-left:7px;padding-right:7px;gap:6px}.app-shell.tiny-width .icon-btn{width:38px;height:38px}.app-shell.tiny-width .scene-meta span{font-size:12px}.app-shell.tiny-width .scene-meta small{font-size:10px}.app-shell.tiny-width .dialogue-panel{left:6px;right:6px}.app-shell.tiny-width .dialogue-text{font-size:15.6px}.app-shell.tall-phone .character-layer{inset:5% 0 26% 0}.app-shell.tall-phone .dialogue-panel.density-short{min-height:21%}

/* state change = time has visibly passed */
.character-slot.state-shift .character-figure{animation:stateShift .42s ease both}@keyframes stateShift{0%{opacity:.28;filter:blur(3px);transform:translateY(2%) scaleX(var(--flip)) scale(var(--pose-scale)) scale(.965)}55%{opacity:.85;filter:blur(.6px)}100%{opacity:1;filter:none;transform:translateY(0) scaleX(var(--flip)) scale(var(--pose-scale)) scale(1)}}

/* concept/learning card placement: avoid character faces */
.concept-card.concept-top{top:13.5%;transform:none;max-height:27%;overflow:auto}.concept-card.concept-lower{top:auto;bottom:35%;transform:none;max-height:24%;overflow:auto}.story-fx-layer.fx-face-safe{top:10.5%;bottom:39%}.app-shell.compact-height .concept-card.concept-top{top:11.5%;max-height:25%}.app-shell.compact-height .concept-card.concept-lower{bottom:39%;max-height:22%}

/* teacher QA bookmarks */
.teacher-qa{padding:12px 16px;border-bottom:1px solid var(--line)}.qa-card{padding:12px;border-radius:12px;background:#15191f;border:1px solid #28303a}.qa-card h4{margin:0 0 10px;font-size:13px;color:#dfc98f}.qa-actions{display:flex;gap:7px;flex-wrap:wrap}.bookmark-list{display:grid;gap:6px;margin-top:9px}.bookmark-item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 9px;border-radius:9px;background:#101419;border:1px solid #29313b}.bookmark-item button{border:0;background:transparent;color:#e5cf97;text-align:left;padding:0;font-size:11px}.bookmark-item small{display:block;color:#7f8994;margin-top:2px}.bookmark-item .bookmark-remove{color:#a5adb7;font-size:12px}.scene-jump.qa-marked{border-color:#8d743e;box-shadow:inset 3px 0 0 #d0af68}.scene-jump.qa-marked::after{content:'★';float:right;color:#dfc078}

@media(max-height:740px){.app-shell{--qa-height:compact}.character-layer{inset:6.5% 0 31% 0}.backdrop{inset:0 0 31% 0}.dialogue-panel{left:7px;right:7px;padding:12px 14px 9px}.dialogue-text{font-size:15.3px;line-height:1.55}.story-fx-layer{bottom:37%}}
@media(max-width:370px){.dialogue-panel.density-xlong .dialogue-text{font-size:14.8px}.boot-inner strong{font-size:30px}.qa-actions .mini-btn{flex:1}.story-progress{top:calc(56px + env(safe-area-inset-top,0px))}}
@media(prefers-reduced-motion:reduce){.character-slot.state-shift .character-figure,.dialogue-panel.linger::after{animation:none!important}}


/* v0.9 portrait crop / composition micro-tuning */
.character-slot{--img-scale:1;--img-shift-y:0%;--img-shift-x:0%}
.character-figure{overflow:hidden}
.character-img{transform:translate(var(--img-shift-x),var(--img-shift-y)) scale(var(--img-scale));transform-origin:center bottom;will-change:transform}
.character-layer{inset:4.4% 0 27.5% 0}
.character-slot{bottom:-1.5%;width:64%}
.slot-left{left:-14%}.slot-right{right:-14%}.slot-center{left:18%;width:64%}
.dialogue-panel{background:rgba(10,12,17,.92);border-color:rgba(255,255,255,.14)}
.dialogue-panel.density-medium{min-height:28%}.dialogue-panel.density-long{min-height:32%}.dialogue-panel.density-xlong{min-height:35%;max-height:43%}
.dialogue-text{margin:11px 0 14px}
.story-topbar{padding-bottom:10px}.story-progress{top:calc(62px + env(safe-area-inset-top,0px))}
.app-shell.compact-height .character-layer{inset:5.9% 0 31.5% 0}.app-shell.tall-phone .character-layer{inset:4.2% 0 26.5% 0}
.app-shell.compact-height .dialogue-panel.density-medium{min-height:28%}.app-shell.compact-height .dialogue-panel.density-long{min-height:32%}
@media(max-width:370px){.character-slot{width:66%}.slot-left{left:-15%}.slot-right{right:-15%}.slot-center{left:17%;width:66%}}


/* v0.10 kimo-style readability / dialogue polish */
#lineCounter{display:none}.character-nameplate{display:none}
.stage-caption{z-index:24;top:10%;left:18px;right:18px;font-size:11px;background:rgba(8,10,13,.78);border:1px dashed rgba(255,255,255,.18)}
.dialogue-panel{min-height:27%;max-height:33%;padding:15px 18px 11px;border-radius:19px 19px 10px 10px;background:linear-gradient(180deg,rgba(17,18,21,.94),rgba(9,11,15,.965));backdrop-filter:blur(14px);border-color:rgba(232,222,198,.15)}
.dialogue-panel.density-short{min-height:24%}.dialogue-panel.density-medium{min-height:27%}.dialogue-panel.density-long{min-height:30%}.dialogue-panel.density-xlong{min-height:32%;max-height:34%}
.dialogue-text{font-size:17px;line-height:1.66;letter-spacing:-.015em;word-break:keep-all;overflow-wrap:break-word;margin:10px 0 13px;min-height:3.25em}
.speaker-row{height:21px}.speaker-row #speakerName{font-size:14px;letter-spacing:-.01em}.dialogue-panel.no-speaker .speaker-row{display:none}.dialogue-panel.no-speaker .dialogue-text{margin-top:2px}
.dialogue-panel.content-stage .dialogue-text{font-size:16.4px;line-height:1.62;color:#ddd8cd}.dialogue-panel.content-narration .dialogue-text{font-size:16.7px;line-height:1.66;color:#eee8dc}
.dialogue-panel.mini-only{min-height:66px!important;height:66px;max-height:66px;padding:11px 16px 9px}.dialogue-panel.mini-only .dialogue-text{display:none}.dialogue-panel.mini-only .dialogue-footer{height:100%;justify-content:flex-end;gap:10px}.dialogue-panel.mini-only #nextHint{font-size:11px;color:#aaa}
.dialogue-footer{font-size:10.5px}.next-btn{font-size:17px}.next-btn::after{content:''}
.concept-card{left:16px;right:16px;top:45%;transform:translateY(-50%);padding:17px 17px 18px;border-radius:15px;background:rgba(235,230,211,.97);color:#222720;border:1px solid rgba(92,95,78,.22);box-shadow:0 20px 64px rgba(0,0,0,.44)}
.concept-kicker{display:block;font-size:9px;letter-spacing:.17em;font-weight:900;color:#6a765e;margin-bottom:8px}.concept-body{font-size:15px;line-height:1.65;font-weight:650;word-break:keep-all}.concept-body strong{font-weight:900;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.concept-arrow{font-weight:900;color:#795f3a;padding:0 2px}
.concept-card.story-note{background:rgba(235,229,216,.97);color:#302c25}.concept-card.story-note .concept-kicker{color:#876b4b}
.concept-card.chapter-transition{top:42%;background:rgba(10,12,15,.90);color:#f1e8d5;text-align:center;border-color:rgba(214,185,120,.32);padding:28px 18px}.concept-card.chapter-transition small{display:block;font-size:9px;letter-spacing:.24em;color:#a9966f;margin-bottom:8px}.concept-card.chapter-transition b{display:block;font-family:serif;font-size:25px;line-height:1.35;letter-spacing:-.03em}
.story-topbar{background:linear-gradient(180deg,rgba(6,8,11,.72),rgba(6,8,11,.15) 70%,transparent)}
.rotate-hint{display:none;position:absolute;z-index:100;inset:0;background:rgba(5,7,10,.94);color:#eee7da;place-items:center;text-align:center;padding:24px;font-size:15px;font-weight:700}
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){.rotate-hint{display:grid}}
.app-shell.compact-height .dialogue-panel{max-height:34%;padding:12px 14px 9px}.app-shell.compact-height .dialogue-panel.density-short{min-height:24%}.app-shell.compact-height .dialogue-panel.density-medium{min-height:28%}.app-shell.compact-height .dialogue-panel.density-long{min-height:31%}.app-shell.compact-height .dialogue-text{font-size:15.6px;line-height:1.58}.app-shell.compact-height .dialogue-panel.content-stage .dialogue-text{font-size:15.1px}.app-shell.tiny-width .dialogue-text{font-size:15.8px;line-height:1.58}.app-shell.tiny-width .dialogue-panel{padding-left:14px;padding-right:14px}
@media(max-width:370px){.dialogue-text{font-size:15.7px;line-height:1.58}.concept-body{font-size:14px}.concept-card{left:10px;right:10px;padding:14px}.dialogue-panel.mini-only{height:60px;min-height:60px!important;max-height:60px}}


/* v0.11 visual polish: unclipped portraits, restrained closeups, intertitles, epilogue, typography */
:root{
  --font-ui:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --font-story:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --font-display:"Noto Serif KR","NanumMyeongjo","Batang","AppleMyungjo",Georgia,serif;
}
html,body,.app-shell,button{font-family:var(--font-ui)}
.secret-title,.scene-meta span,.concept-card.chapter-transition b{font-family:var(--font-display)}
.scene-meta span{font-weight:700;letter-spacing:-.025em}.scene-meta small{font-family:var(--font-story);letter-spacing:-.02em}
.speaker-row #speakerName{font-family:var(--font-display);font-size:15px;font-weight:800;letter-spacing:-.025em;color:#d9bd7e}
.dialogue-text{font-family:var(--font-story);font-weight:500;letter-spacing:-.025em;line-height:1.72}
.dialogue-panel.content-narration .dialogue-text{font-family:var(--font-display);font-size:16.4px;line-height:1.75;font-weight:500;color:#ece6db}
.concept-body{font-family:var(--font-story);font-weight:600;line-height:1.7}.concept-kicker{font-family:var(--font-ui)}

/* portraits: keep the head visible; crop lower body behind the dialogue sheet instead */
.character-layer{inset:5.5% 0 27.5% 0;overflow:visible}
.character-figure{overflow:visible}
.character-img{transform-origin:center 58%;max-height:100%}
.character-slot{width:61%;height:88%;bottom:-1%}.slot-left{left:-11%}.slot-right{right:-11%}.slot-center{left:19.5%;width:61%}
.character-slot.active-speaker .character-figure{transform:translateY(0) scaleX(var(--flip)) scale(var(--pose-scale)) scale(1.005)}
.character-slot.inactive-speaker .character-figure{transform:translateY(0) scaleX(var(--flip)) scale(var(--pose-scale)) scale(.99)}
.character-layer.emotional-focus .character-slot.inactive-speaker{filter:brightness(.56) saturate(.72)}
.character-layer.soft-focus .character-slot.inactive-speaker{filter:brightness(.64) saturate(.78)}

/* stage directions no longer occupy the large dialogue box */
.dialogue-panel.stage-hidden{opacity:0;pointer-events:none;transform:translateY(16px)}
.stage-caption{top:auto;bottom:34%;left:50%;right:auto;transform:translateX(-50%);width:min(86%,430px);padding:7px 11px;border:0;border-radius:999px;background:rgba(5,7,10,.68);font-family:var(--font-story);font-size:12px;font-style:normal;line-height:1.45;color:#ddd7cb;box-shadow:none;white-space:normal}
.character-layer.intertitle-hidden{opacity:0}

/* scene/time/location card */
.time-place-overlay{position:absolute;z-index:22;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:rgba(4,5,7,.96);transition:opacity .24s ease}
.time-place-overlay small{font-family:var(--font-ui);font-size:9px;letter-spacing:.28em;color:#8d9299;margin-bottom:13px}
.time-place-overlay strong{font-family:var(--font-display);font-size:29px;line-height:1.35;font-weight:600;letter-spacing:-.04em;color:#eee8dc;max-width:88%}
.time-place-overlay span{font-family:var(--font-story);font-size:11px;color:#797f86;margin-top:11px;letter-spacing:.04em}
.story-screen.intertitle-mode .backdrop{opacity:0}.story-screen.intertitle-mode .cinema-shade{background:#050608}.story-screen.intertitle-mode .dialogue-panel,.story-screen.intertitle-mode .story-fx-layer,.story-screen.intertitle-mode .concept-card{opacity:0}

/* epilogue: monochrome full-screen background + centered text */
.story-screen.epilogue-mode .backdrop{inset:0;filter:grayscale(1) brightness(.34) contrast(1.12);background-position:center!important;background-size:cover!important}
.story-screen.epilogue-mode .cinema-shade{background:radial-gradient(circle at 50% 45%,rgba(0,0,0,.20),rgba(0,0,0,.70) 75%,rgba(0,0,0,.88))}
.story-screen.epilogue-mode .story-topbar,.story-screen.epilogue-mode .story-progress,.story-screen.epilogue-mode .dialogue-panel,.story-screen.epilogue-mode .character-layer,.story-screen.epilogue-mode .story-fx-layer,.story-screen.epilogue-mode .concept-card,.story-screen.epilogue-mode .stage-caption{opacity:0;pointer-events:none}
.epilogue-overlay{position:absolute;z-index:23;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 30px 60px;color:#f0eee8}
.epilogue-overlay small{font-family:var(--font-ui);font-size:9px;letter-spacing:.32em;color:#a6a6a3;margin-bottom:24px}
.epilogue-overlay p{font-family:var(--font-display);font-size:24px;line-height:1.72;letter-spacing:-.035em;font-weight:500;max-width:390px;margin:0;text-shadow:0 2px 18px rgba(0,0,0,.5);word-break:keep-all}
.epilogue-overlay span{position:absolute;bottom:max(28px,calc(18px + var(--safeBottom)));font-family:var(--font-ui);font-size:10px;color:#9a9a98;letter-spacing:.04em}
.epilogue-overlay.final p{font-size:27px;font-weight:650;line-height:1.65;color:#fff}

/* dialogue sheet: cleaner and easier to read */
.dialogue-panel{left:12px;right:12px;bottom:max(10px,var(--safeBottom));min-height:26%;max-height:32%;padding:16px 18px 12px;border-radius:18px;background:linear-gradient(180deg,rgba(13,15,19,.94),rgba(7,9,12,.975));border:1px solid rgba(227,216,192,.16);box-shadow:0 14px 38px rgba(0,0,0,.33)}
.dialogue-panel.density-short{min-height:23%}.dialogue-panel.density-medium{min-height:26%}.dialogue-panel.density-long{min-height:29%}.dialogue-panel.density-xlong{min-height:31%;max-height:34%}
.dialogue-footer{color:#95928c}.next-btn{color:#e5dfd4}

@media(max-width:370px){
  .character-slot{width:63%}.slot-left{left:-12%}.slot-right{right:-12%}.slot-center{left:18.5%;width:63%}
  .epilogue-overlay p{font-size:21px}.epilogue-overlay.final p{font-size:23px}
  .time-place-overlay strong{font-size:26px}
  .dialogue-panel{left:8px;right:8px;padding:14px 15px 10px}.dialogue-text{font-size:15.8px;line-height:1.65}
}
@media(max-height:740px){
  .character-layer{inset:6% 0 31% 0}.character-slot{height:86%}.stage-caption{bottom:37%}
  .epilogue-overlay p{font-size:20px}.epilogue-overlay.final p{font-size:22px}
}

/* v0.12 story tempo / color grading / bookend symmetry / compact learning UI */
/* Scene color progression: same backgrounds feel different as each Jack changes. */
.story-screen.grade-warm .backdrop{filter:saturate(1.06) sepia(.06) brightness(1.02)}
.story-screen.grade-uneasy .backdrop{filter:saturate(.88) sepia(.03) brightness(.93) contrast(1.03)}
.story-screen.grade-labor .backdrop{filter:saturate(.78) sepia(.12) brightness(.90) contrast(1.05)}
.story-screen.grade-sick .backdrop{filter:saturate(.56) brightness(.78) contrast(1.08)}
.story-screen.grade-africa-warm .backdrop{filter:saturate(1.04) sepia(.08) brightness(1.01)}
.story-screen.grade-captive .backdrop{filter:saturate(.72) sepia(.03) brightness(.84) contrast(1.08)}
.story-screen.grade-ocean .backdrop{filter:saturate(.58) hue-rotate(-5deg) brightness(.72) contrast(1.12)}
.story-screen.grade-europe-cold .backdrop{filter:saturate(.72) hue-rotate(4deg) brightness(.87) contrast(1.04)}
.story-screen.grade-hardened .backdrop{filter:saturate(.76) contrast(1.10) brightness(.84)}
.story-screen.grade-gold .backdrop{filter:saturate(1.02) sepia(.18) brightness(.95) contrast(1.07)}
.story-screen.grade-collapse .backdrop{filter:saturate(.38) brightness(.69) contrast(1.14)}
.story-screen.grade-sick .cinema-shade,.story-screen.grade-ocean .cinema-shade,.story-screen.grade-collapse .cinema-shade{background:linear-gradient(180deg,rgba(0,0,0,.40),rgba(0,0,0,.08) 38%,rgba(0,0,0,.72) 72%,#090b0e 100%)}

/* Cleaner top UI: the scene itself carries the story; only the chapter stays visible. */
.story-topbar{padding-left:10px;padding-right:10px;gap:7px}
.story-topbar .icon-btn{width:38px;height:38px;font-size:15px;background:rgba(8,10,13,.42);border-color:rgba(255,255,255,.10)}
.scene-meta small{display:none}
.scene-meta span{font-family:var(--font-display);font-size:12px;letter-spacing:-.02em;color:#ddd7ca}
.story-progress{opacity:.72}

/* HISTORY NOTE becomes a compact strip above the dialogue sheet instead of a large popup. */
.concept-card:not(.chapter-transition){top:auto;bottom:34%;transform:none;left:13px;right:13px;max-height:21%;overflow:auto;padding:11px 13px 12px;border-radius:12px;background:rgba(232,226,207,.96);box-shadow:0 10px 28px rgba(0,0,0,.28)}
.concept-card:not(.chapter-transition) .concept-kicker{font-size:8px;margin-bottom:5px;letter-spacing:.14em}
.concept-card:not(.chapter-transition) .concept-body{font-size:13.5px;line-height:1.55;font-weight:650}
.concept-card.story-note{background:rgba(230,224,211,.96)}
.app-shell.compact-height .concept-card:not(.chapter-transition){bottom:38%;max-height:19%;padding:9px 11px}.app-shell.compact-height .concept-card:not(.chapter-transition) .concept-body{font-size:12.8px;line-height:1.5}

/* Dialogue remains the dominant readable element. */
.dialogue-panel{background:linear-gradient(180deg,rgba(12,14,18,.945),rgba(6,8,11,.98));border-color:rgba(228,219,199,.14)}
.dialogue-text{line-height:1.74;letter-spacing:-.023em}
.dialogue-footer{opacity:.86}.next-btn{opacity:.92}

/* Prologue and epilogue use the same centered, monochrome bookend language. */
.story-screen.prologue-mode .backdrop,.story-screen.epilogue-mode .backdrop{inset:0!important;background-position:center!important;background-size:cover!important;animation:none!important}
.story-screen.prologue-mode .backdrop{filter:grayscale(.92) brightness(.42) contrast(1.09)!important}
.story-screen.epilogue-mode .backdrop{filter:grayscale(1) brightness(.32) contrast(1.14)!important}
.story-screen.prologue-mode .cinema-shade,.story-screen.epilogue-mode .cinema-shade{background:radial-gradient(circle at 50% 43%,rgba(0,0,0,.22),rgba(0,0,0,.66) 72%,rgba(0,0,0,.88))}
.story-screen.prologue-mode .story-topbar,.story-screen.prologue-mode .story-progress,.story-screen.prologue-mode .dialogue-panel,.story-screen.prologue-mode .character-layer,.story-screen.prologue-mode .story-fx-layer,.story-screen.prologue-mode .concept-card,.story-screen.prologue-mode .stage-caption,
.story-screen.epilogue-mode .story-topbar,.story-screen.epilogue-mode .story-progress,.story-screen.epilogue-mode .dialogue-panel,.story-screen.epilogue-mode .character-layer,.story-screen.epilogue-mode .story-fx-layer,.story-screen.epilogue-mode .concept-card,.story-screen.epilogue-mode .stage-caption{opacity:0!important;pointer-events:none!important}
.epilogue-overlay{padding:52px 30px 70px}
.epilogue-overlay small{font-size:9px;letter-spacing:.34em;margin-bottom:25px;color:#aaa9a5}
.epilogue-overlay p{font-size:23px;line-height:1.78;max-width:400px;text-wrap:balance}
.epilogue-overlay.prologue-bookend p{color:#eee9df}
.epilogue-overlay.prologue-bookend.final p{font-size:26px;line-height:1.7;color:#fff}
.epilogue-overlay.final p{font-size:27px;line-height:1.67}

/* Scene cards are now selective, so when one appears it reads as a real location/time break. */
.time-place-overlay{background:rgba(3,4,6,.985)}
.time-place-overlay strong{font-size:28px;letter-spacing:-.035em}.time-place-overlay span{margin-top:9px;opacity:.82}

@media(max-width:370px){
  .story-topbar .icon-btn{width:36px;height:36px}.scene-meta span{font-size:11.5px}
  .concept-card:not(.chapter-transition){left:9px;right:9px}.concept-card:not(.chapter-transition) .concept-body{font-size:12.9px}
  .epilogue-overlay p{font-size:20.5px}.epilogue-overlay.final p,.epilogue-overlay.prologue-bookend.final p{font-size:23px}
}

/* v0.13 final story-tempo / safe-area / compact student UI */
.story-topbar{justify-content:space-between;padding-left:10px;padding-right:10px}
.story-topbar .scene-meta{flex:1;text-align:center;pointer-events:auto}
.story-topbar .icon-btn{flex:0 0 38px}
.student-menu{position:absolute;z-index:18;top:calc(58px + env(safe-area-inset-top,0px));left:10px;width:min(240px,72vw);padding:8px;border-radius:14px;background:rgba(10,12,16,.97);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 46px rgba(0,0,0,.46);backdrop-filter:blur(14px)}
.student-menu-item{display:grid;grid-template-columns:32px 1fr auto;align-items:center;width:100%;gap:8px;min-height:48px;padding:8px 9px;border:0;border-radius:10px;background:transparent;color:#eee;text-align:left}.student-menu-item:active{background:rgba(255,255,255,.06)}.student-menu-item span{font-size:18px;text-align:center;color:#dcc795}.student-menu-item b{font-size:13px}.student-menu-item small{font-size:9px;color:#878e96;white-space:nowrap}

/* Character safety zone: prioritize faces and shoulders over dramatic zoom. */
.character-layer{inset:6.2% 0 28% 0;overflow:hidden}
.character-slot{height:87%;bottom:-.5%}
.character-figure{overflow:visible}
.character-img{max-height:100%;transform-origin:center bottom}
.app-shell.compact-height .character-layer{inset:7.5% 0 32% 0}.app-shell.compact-height .character-slot{height:84%}
.app-shell.tiny-width .character-layer{inset:7% 0 30% 0}.app-shell.tiny-width .character-slot{height:85%}
.app-shell.tall-phone .character-layer{inset:5.4% 0 27% 0}.app-shell.tall-phone .character-slot{height:89%}

/* Bottom sheet: stable 2–4 line reading rhythm. */
.dialogue-panel{min-height:26%;max-height:31%;padding:15px 17px 11px}
.dialogue-panel.density-short{min-height:23%}.dialogue-panel.density-medium{min-height:26%}.dialogue-panel.density-long{min-height:29%}.dialogue-panel.density-xlong{min-height:31%;max-height:34%}
.dialogue-text{font-size:17px;line-height:1.76;letter-spacing:-.025em;word-break:keep-all}
.dialogue-footer{min-height:18px}.dialogue-footer #nextHint:empty{display:none}
.next-btn{font-size:16px}

/* Chapter end cards carry one concise takeaway. */
.time-place-overlay span{max-width:84%;font-family:var(--font-story);font-size:12px;line-height:1.65;color:#a7a59f;letter-spacing:-.01em}
.time-place-overlay strong{max-width:88%;text-wrap:balance}

/* Bookend symmetry: declaration in prologue, past-tense closure in epilogue. */
.epilogue-overlay.final p{font-size:28px;line-height:1.65;max-width:410px}
.epilogue-overlay.prologue-bookend.final p{font-size:28px;line-height:1.65}
.epilogue-overlay span{font-size:9px;letter-spacing:.08em;color:#8f8f8b}

@media(max-width:370px){
  .student-menu{left:7px;top:calc(54px + env(safe-area-inset-top,0px));width:min(232px,76vw)}
  .dialogue-panel{padding:13px 14px 9px}.dialogue-text{font-size:15.8px;line-height:1.68}
  .epilogue-overlay.final p,.epilogue-overlay.prologue-bookend.final p{font-size:23px}
}
@media(max-height:740px){
  .character-layer{inset:8% 0 33% 0}.character-slot{height:82%}
  .dialogue-panel{max-height:34%}.dialogue-text{font-size:15.2px;line-height:1.58}
}

/* v0.14 final mobile QA: fixed backgrounds + character motion instead of camera motion */
.backdrop,
.backdrop.camera-slow-in,
.backdrop.camera-slow-out,
.backdrop.camera-pan-left,
.backdrop.camera-pan-right,
.backdrop.camera-shake-soft{
  animation:none!important;
  transform:none!important;
  transition:opacity .34s ease,filter .34s ease!important;
}

/* Keep portraits safely inside the upper visual area. */
.character-layer{inset:7% 0 29% 0;overflow:hidden}
.character-slot{height:87%;bottom:-1%}
.character-img{max-width:100%;max-height:100%;object-fit:contain;object-position:center bottom}
.character-figure{overflow:visible}
.app-shell.compact-height .character-layer{inset:8.5% 0 33% 0}.app-shell.compact-height .character-slot{height:82%}
.app-shell.tiny-width .character-layer{inset:8% 0 31% 0}.app-shell.tiny-width .character-slot{height:83%}
.app-shell.tall-phone .character-layer{inset:6.2% 0 28% 0}.app-shell.tall-phone .character-slot{height:88%}

/* Dialogue stays a stable bottom sheet; body text gets priority over decoration. */
.dialogue-panel{min-height:26%;max-height:31%;overflow:hidden}
.dialogue-text{font-size:17px;line-height:1.66;letter-spacing:-.012em;text-wrap:pretty;word-break:keep-all}
.speaker-row #speakerName{font-weight:750;letter-spacing:-.018em}
.dialogue-footer{min-height:18px}
.next-btn{opacity:.78}

/* Emotional reaction now belongs to the character, not to the background camera. */
.character-slot.motion-recoil .character-figure{animation:charRecoil .46s cubic-bezier(.22,.72,.24,1) both}
.character-slot.motion-jolt .character-figure{animation:charJolt .38s cubic-bezier(.2,.75,.25,1) both}
.character-slot.motion-tremble .character-figure{animation:charTremble .68s ease-in-out both}
.character-slot.motion-stagger .character-figure{animation:charStagger .55s cubic-bezier(.18,.76,.24,1) both}
.character-slot.motion-sway .character-figure{animation:charSway .82s ease-in-out both}
.character-slot.motion-stepback .character-figure{animation:charStepback .52s cubic-bezier(.2,.74,.25,1) both}

@keyframes charRecoil{
  0%,100%{transform:translate(0,0) scaleX(var(--flip)) scale(var(--pose-scale))}
  28%{transform:translate(var(--motion-x),1.2%) scaleX(var(--flip)) scale(var(--pose-scale)) rotate(var(--motion-rot))}
  58%{transform:translate(0,.2%) scaleX(var(--flip)) scale(var(--pose-scale))}
}
@keyframes charJolt{
  0%,100%{transform:translate(0,0) scaleX(var(--flip)) scale(var(--pose-scale))}
  22%{transform:translate(-1.2%,-.9%) scaleX(var(--flip)) scale(var(--pose-scale))}
  43%{transform:translate(1.1%,.5%) scaleX(var(--flip)) scale(var(--pose-scale))}
  64%{transform:translate(-.55%,-.2%) scaleX(var(--flip)) scale(var(--pose-scale))}
}
@keyframes charTremble{
  0%,100%{transform:translate(0,0) scaleX(var(--flip)) scale(var(--pose-scale))}
  16%{transform:translate(-.7%,.1%) scaleX(var(--flip)) scale(var(--pose-scale))}
  31%{transform:translate(.65%,-.15%) scaleX(var(--flip)) scale(var(--pose-scale))}
  47%{transform:translate(-.55%,.1%) scaleX(var(--flip)) scale(var(--pose-scale))}
  63%{transform:translate(.5%,0) scaleX(var(--flip)) scale(var(--pose-scale))}
  78%{transform:translate(-.3%,.05%) scaleX(var(--flip)) scale(var(--pose-scale))}
}
@keyframes charStagger{
  0%,100%{transform:translate(0,0) scaleX(var(--flip)) scale(var(--pose-scale))}
  30%{transform:translate(var(--motion-x),1.8%) scaleX(var(--flip)) scale(var(--pose-scale)) rotate(var(--motion-rot))}
  62%{transform:translate(var(--motion-x),.8%) scaleX(var(--flip)) scale(var(--pose-scale))}
}
@keyframes charSway{
  0%,100%{transform:translate(0,0) scaleX(var(--flip)) scale(var(--pose-scale))}
  30%{transform:translate(-1%,.45%) scaleX(var(--flip)) scale(var(--pose-scale)) rotate(-.25deg)}
  65%{transform:translate(.75%,.2%) scaleX(var(--flip)) scale(var(--pose-scale)) rotate(.18deg)}
}
@keyframes charStepback{
  0%,100%{transform:translate(0,0) scaleX(var(--flip)) scale(var(--pose-scale))}
  38%,65%{transform:translate(var(--motion-x),.7%) scaleX(var(--flip)) scale(var(--pose-scale))}
}

/* Keep chapter/time intertitles deliberate and uncluttered. */
.time-place-overlay strong{max-width:88%;text-wrap:balance;word-break:keep-all}
.time-place-overlay span{max-width:84%;text-wrap:balance}

/* Only compact, core learning notes remain visible. */
.concept-card{max-width:calc(100% - 24px);margin-inline:auto}

@media(max-width:370px){
  .dialogue-text{font-size:15.8px;line-height:1.62}
  .character-layer{inset:9% 0 33% 0}.character-slot{height:81%}
}
@media(max-height:740px){
  .character-layer{inset:9.5% 0 34% 0}.character-slot{height:80%}
  .dialogue-panel{min-height:28%;max-height:34%}.dialogue-text{font-size:15.2px;line-height:1.56}
}
@media(prefers-reduced-motion:reduce){
  .character-slot.motion-recoil .character-figure,
  .character-slot.motion-jolt .character-figure,
  .character-slot.motion-tremble .character-figure,
  .character-slot.motion-stagger .character-figure,
  .character-slot.motion-sway .character-figure,
  .character-slot.motion-stepback .character-figure{animation:none!important}
}

/* v0.14 viewport QA profiles: 360 / 390 / 412 class ranges */
.app-shell.qa-360 .character-layer{inset:9% 0 33% 0}.app-shell.qa-360 .character-slot{height:81%}.app-shell.qa-360 .dialogue-panel{left:7px;right:7px;padding:13px 14px 9px}.app-shell.qa-360 .dialogue-text{font-size:15.7px;line-height:1.60}
.app-shell.qa-390 .character-layer{inset:7.4% 0 30% 0}.app-shell.qa-390 .character-slot{height:85%}.app-shell.qa-390 .dialogue-text{font-size:16.5px;line-height:1.64}
.app-shell.qa-412 .character-layer{inset:6.7% 0 29% 0}.app-shell.qa-412 .character-slot{height:87%}.app-shell.qa-412 .dialogue-text{font-size:17px;line-height:1.66}


/* v0.15 final mobile director polish */
/* Background remains completely static. */
.backdrop{animation:none!important;transform:none!important}

/* More natural entrances/exits: small lateral slide + fade, no zoom. */
.character-slot.entering .character-figure,.character-slot.leaving .character-figure{opacity:0}
.slot-left.entering .character-figure{transform:translate(-2.6%,1.6%) scaleX(var(--flip)) scale(var(--pose-scale))}
.slot-right.entering .character-figure{transform:translate(2.6%,1.6%) scaleX(var(--flip)) scale(var(--pose-scale))}
.slot-center.entering .character-figure{transform:translate(0,1.8%) scaleX(var(--flip)) scale(var(--pose-scale))}
.slot-left.leaving .character-figure{transform:translate(-1.8%,1%) scaleX(var(--flip)) scale(var(--pose-scale))}
.slot-right.leaving .character-figure{transform:translate(1.8%,1%) scaleX(var(--flip)) scale(var(--pose-scale))}
.slot-center.leaving .character-figure{transform:translate(0,1.2%) scaleX(var(--flip)) scale(var(--pose-scale))}
.character-figure{transition:transform .26s cubic-bezier(.2,.72,.25,1),opacity .22s ease}

/* State changes dissolve instead of popping or blurring. */
.character-slot.state-shift .character-figure{animation:stateShiftV15 .34s ease both!important}
@keyframes stateShiftV15{0%{opacity:.18;transform:translateY(.8%) scaleX(var(--flip)) scale(var(--pose-scale))}55%{opacity:.72}100%{opacity:1;transform:translateY(0) scaleX(var(--flip)) scale(var(--pose-scale))}}

/* Reaction amplitude tiers. */
.character-slot.motion-recoil .character-figure{animation:charRecoil var(--motion-duration,460ms) cubic-bezier(.22,.72,.24,1) both}
.character-slot.motion-jolt .character-figure{animation:charJolt var(--motion-duration,380ms) cubic-bezier(.2,.75,.25,1) both}
.character-slot.motion-tremble .character-figure{animation:charTremble var(--motion-duration,680ms) ease-in-out both}
.character-slot.motion-stagger .character-figure{animation:charStagger var(--motion-duration,550ms) cubic-bezier(.18,.76,.24,1) both}
.character-slot.motion-sway .character-figure{animation:charSway var(--motion-duration,820ms) ease-in-out both}
.character-slot.motion-stepback .character-figure{animation:charStepback var(--motion-duration,520ms) cubic-bezier(.2,.74,.25,1) both}
@keyframes charJolt{0%,100%{transform:translate(0,0) scaleX(var(--flip)) scale(var(--pose-scale))}22%{transform:translate(var(--jolt-a,-1.2%),-.9%) scaleX(var(--flip)) scale(var(--pose-scale))}43%{transform:translate(var(--jolt-b,1.1%),.5%) scaleX(var(--flip)) scale(var(--pose-scale))}64%{transform:translate(var(--jolt-c,-.55%),-.2%) scaleX(var(--flip)) scale(var(--pose-scale))}}
@keyframes charTremble{0%,100%{transform:translate(0,0) scaleX(var(--flip)) scale(var(--pose-scale))}16%{transform:translate(var(--tremble-a,-.7%),.1%) scaleX(var(--flip)) scale(var(--pose-scale))}31%{transform:translate(var(--tremble-b,.65%),-.15%) scaleX(var(--flip)) scale(var(--pose-scale))}47%{transform:translate(var(--tremble-a,-.7%),.1%) scaleX(var(--flip)) scale(var(--pose-scale))}63%{transform:translate(var(--tremble-b,.65%),0) scaleX(var(--flip)) scale(var(--pose-scale))}78%{transform:translate(var(--tremble-c,-.4%),.05%) scaleX(var(--flip)) scale(var(--pose-scale))}}
@keyframes charSway{0%,100%{transform:translate(0,0) scaleX(var(--flip)) scale(var(--pose-scale))}30%{transform:translate(var(--sway-a,-1%),.45%) scaleX(var(--flip)) scale(var(--pose-scale)) rotate(-.25deg)}65%{transform:translate(var(--sway-b,.75%),.2%) scaleX(var(--flip)) scale(var(--pose-scale)) rotate(.18deg)}}

/* Important lines use stillness, not extra movement. */
.character-layer.still-moment .character-slot.active-speaker{filter:brightness(1.02) saturate(.94)}
.character-layer.still-moment .character-slot.inactive-speaker{filter:brightness(.48) saturate(.60)}
.dialogue-panel.still-dialogue{box-shadow:0 16px 48px rgba(0,0,0,.43);border-color:rgba(220,205,168,.19)}

/* Subtle dialogue colors: function first, decoration second. */
.dialogue-panel.tone-memory{background:rgba(20,18,17,.91);border-color:rgba(207,185,136,.20)}
.dialogue-panel.tone-impact{background:rgba(19,15,16,.93);border-color:rgba(183,102,105,.23)}
.dialogue-panel.tone-cold{background:rgba(13,16,19,.93);border-color:rgba(126,150,170,.17)}
.dialogue-panel.tone-silence,.dialogue-panel.tone-confession{background:rgba(8,9,11,.95);border-color:rgba(255,255,255,.08)}

/* History note appears once at the end of its scene. */
.story-screen.learning-summary-mode .dialogue-panel{opacity:0;pointer-events:none}
.character-layer.summary-dim{opacity:.46;filter:grayscale(.15) brightness(.72)}
.concept-card.scene-summary{top:auto!important;bottom:max(34%,calc(28% + var(--safeBottom)));transform:none!important;left:14px;right:14px;max-height:25%;overflow:auto;padding:13px 15px;border-radius:13px;background:rgba(222,233,217,.96);box-shadow:0 12px 34px rgba(0,0,0,.36)}
.concept-card.scene-summary .concept-kicker{font-size:9px;margin-bottom:5px}.concept-card.scene-summary .concept-body{font-size:13.5px;line-height:1.58}

/* Bookends use identical line fade timing. */
.bookend-line-in{animation:bookendLineIn .52s ease both}
@keyframes bookendLineIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Teacher quick test panel. */
.teacher-quicktest{padding:12px 16px;border-bottom:1px solid var(--line)}
.quicktest-card{padding:12px;border-radius:12px;background:#15191f;border:1px solid #28303a}
.quicktest-card h4{margin:0 0 10px;font-size:13px;color:#dfc98f}.quicktest-card small{display:block;margin-top:8px;color:#7f8994;font-size:10px;line-height:1.45}
.quicktest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
@media(max-width:370px){.quicktest-grid{grid-template-columns:repeat(2,1fr)}.concept-card.scene-summary .concept-body{font-size:12.8px}}


/* v0.16 classroom stabilization — no new silence-mode treatment */
/* VisualViewport-derived safe profiles keep faces clear of browser chrome and the bottom sheet. */
.app-shell.vv-short .character-layer{inset:10% 0 35% 0}.app-shell.vv-short .character-slot{height:78%}
.app-shell.vv-short .dialogue-panel{left:7px;right:7px;bottom:max(6px,var(--safeBottom))}
.app-shell.vv-tall .character-layer{inset:6.3% 0 28.5% 0}.app-shell.vv-tall .character-slot{height:87%}
.app-shell.vv-very-tall .character-layer{inset:6.8% 0 29% 0}.app-shell.vv-very-tall .character-slot{height:85%}

/* Stepwise dialogue sheet: stable 1/2/3/4-line sizes instead of large jumps. */
.dialogue-panel.dialogue-lines-1{min-height:21%;max-height:24%}
.dialogue-panel.dialogue-lines-2{min-height:24%;max-height:27%}
.dialogue-panel.dialogue-lines-3{min-height:27%;max-height:30%}
.dialogue-panel.dialogue-lines-4{min-height:29%;max-height:32%}
.dialogue-panel.dialogue-lines-1 .dialogue-text{min-height:1.9em}
.dialogue-panel.dialogue-lines-2 .dialogue-text{min-height:3.3em}
.dialogue-panel.dialogue-lines-3 .dialogue-text{min-height:4.8em}
.dialogue-panel.dialogue-lines-4 .dialogue-text{min-height:6.2em}
.app-shell.vv-short .dialogue-panel.dialogue-lines-3,.app-shell.vv-short .dialogue-panel.dialogue-lines-4{max-height:35%}

/* Final grading pass: restrained, chapter-consistent color only; backgrounds never move. */
.story-screen.grade-warm .backdrop{filter:saturate(1.04) sepia(.045) brightness(1.01)}
.story-screen.grade-uneasy .backdrop{filter:saturate(.91) sepia(.025) brightness(.95) contrast(1.025)}
.story-screen.grade-labor .backdrop{filter:saturate(.82) sepia(.09) brightness(.92) contrast(1.04)}
.story-screen.grade-sick .backdrop{filter:saturate(.62) brightness(.82) contrast(1.07)}
.story-screen.grade-africa-warm .backdrop{filter:saturate(1.035) sepia(.065) brightness(1.0)}
.story-screen.grade-captive .backdrop{filter:saturate(.76) brightness(.87) contrast(1.065)}
.story-screen.grade-ocean .backdrop{filter:saturate(.63) brightness(.77) contrast(1.09)}
.story-screen.grade-europe-cold .backdrop{filter:saturate(.76) brightness(.90) contrast(1.035)}
.story-screen.grade-hardened .backdrop{filter:saturate(.80) contrast(1.075) brightness(.88)}
.story-screen.grade-gold .backdrop{filter:saturate(1.0) sepia(.15) brightness(.96) contrast(1.055)}
.story-screen.grade-collapse .backdrop{filter:saturate(.45) brightness(.75) contrast(1.11)}

/* Chapter-end cards match the bookend typography without becoming a full epilogue. */
.time-place-overlay.chapter-end-card{background:rgba(4,5,7,.94)}
.time-place-overlay.chapter-end-card small{font-family:var(--font-ui);letter-spacing:.18em;color:#aaa49a}
.time-place-overlay.chapter-end-card strong{font-family:var(--font-story);font-size:clamp(24px,7vw,34px);font-weight:700;line-height:1.38;letter-spacing:-.035em}
.time-place-overlay.chapter-end-card span{font-family:var(--font-story);font-size:14px;line-height:1.7;color:#d2cdc3;margin-top:14px}

/* Teacher scene notes. */
.qa-note-editor{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:9px;align-items:stretch}
.qa-note-editor textarea{min-height:66px;resize:vertical;border-radius:9px;border:1px solid #303845;background:#0d1116;color:#dce3ea;padding:9px 10px;font:12px/1.5 var(--font-ui)}
.bookmark-item em{display:block;margin-top:5px;color:#c7c1b4;font-style:normal;font-size:10px;line-height:1.45;white-space:normal}
@media(max-width:370px){.qa-note-editor{grid-template-columns:1fr}.qa-note-editor .mini-btn{min-height:42px}}


/* v0.17 image integration + key phrase / concept emphasis */
.dialogue-text .hl-concept,.log-item p .hl-concept{color:#9fd8c7;font-weight:800;text-decoration:underline;text-decoration-color:rgba(159,216,199,.34);text-decoration-thickness:1px;text-underline-offset:.18em}
.dialogue-text .hl-emotion,.log-item p .hl-emotion{color:#f2cf82;font-weight:850;text-shadow:0 0 12px rgba(242,207,130,.08)}
.dialogue-text .story-arrow{color:#c9b06f;font-weight:900;padding:0 .08em}
.concept-card .concept-term{color:#184e3d;font-weight:900;background:rgba(80,142,112,.10);padding:0 .16em;border-radius:.28em}
.concept-card .concept-arrow{color:#8f6b2c;font-weight:950;padding:0 .12em}
.bookend-text .hl-emotion{color:#ead39b;font-weight:800}.bookend-text .hl-concept{color:#b8ddd2;font-weight:800}.bookend-text .story-arrow{color:#d5bd7a}
@media(max-width:370px){.dialogue-text .hl-concept,.dialogue-text .hl-emotion{font-weight:800}}


/* v0.18 calm staging — based on the Gimyo investigation app's mobile visual grammar */
/* 1) phone-first shell and full-screen background: PC previews the same 430px composition as phones. */
.app-shell{width:min(100vw,430px)!important;max-width:430px!important;min-height:620px;background:#11100e}
.backdrop{inset:0!important;background-size:cover;animation:none!important;transform:none!important;transition:opacity .55s ease,filter .55s ease!important}
.backdrop-fallback{inset:0!important}
.cinema-shade{background:linear-gradient(180deg,rgba(10,9,7,.25),transparent 23%,transparent 55%,rgba(9,7,6,.48) 75%,rgba(8,6,5,.84))!important}
.scene-fade{background:radial-gradient(circle at 50% 42%,#28231e,#080706 72%)!important;transition-timing-function:cubic-bezier(.42,0,.18,1)!important}

/* 2) Gimyo-like fixed two/three-character stage. Characters stay in the scene rather than popping every line. */
.character-layer,
.app-shell.compact-height .character-layer,
.app-shell.tiny-width .character-layer,
.app-shell.tall-phone .character-layer,
.app-shell.qa-360 .character-layer,
.app-shell.qa-390 .character-layer,
.app-shell.qa-412 .character-layer,
.app-shell.vv-short .character-layer,
.app-shell.vv-tall .character-layer,
.app-shell.vv-very-tall .character-layer{top:72px!important;bottom:27%!important;left:0!important;right:0!important;height:auto!important;overflow:hidden!important}
.character-slot{height:min(56vh,520px)!important;bottom:-3%!important;width:72%!important;transition:opacity .38s ease,filter .38s ease!important}
.slot-left{left:-14%!important}.slot-right{right:-14%!important}.slot-center{left:14%!important;width:72%!important}
.character-figure{overflow:visible!important;transition:opacity .38s ease,transform .38s ease!important}
.character-img{object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 12px 22px rgba(0,0,0,.38));}
.character-nameplate{display:none!important}
.character-slot.entering .character-figure,.character-slot.leaving .character-figure{opacity:0!important;transform:translate(0,0) scaleX(var(--flip)) scale(var(--pose-scale))!important}
.character-slot.active-speaker{filter:brightness(1.025) saturate(1)!important;z-index:4!important}
.character-slot.inactive-speaker{filter:brightness(.82) saturate(.88)!important;z-index:2!important;opacity:.94!important}
.character-slot.active-speaker .character-figure,.character-slot.inactive-speaker .character-figure{transform:translate(0,0) scaleX(var(--flip)) scale(var(--pose-scale))!important}
.character-layer.narration-mode .character-slot{filter:brightness(.84) saturate(.88)!important;opacity:.94!important}
.character-layer.emotional-focus .character-slot.inactive-speaker,.character-layer.soft-focus .character-slot.inactive-speaker,.character-layer.still-moment .character-slot.inactive-speaker{filter:brightness(.78) saturate(.84)!important;opacity:.92!important}
.character-layer.still-moment .character-slot.active-speaker{filter:brightness(1.015) saturate(.98)!important}
/* three-person scenes: gently shrink and spread the same layers instead of rapidly replacing everybody */
.character-layer.triple-cast .character-slot{width:58%!important;height:min(51vh,475px)!important;bottom:-2%!important}
.character-layer.triple-cast .slot-left{left:-11%!important}.character-layer.triple-cast .slot-center{left:21%!important}.character-layer.triple-cast .slot-right{right:-11%!important}
.character-layer.triple-cast .character-slot.inactive-speaker{filter:brightness(.84) saturate(.90)!important}

/* 3) dialogue sheet copied toward Gimyo proportions and warmth. */
.dialogue-panel,
.app-shell.qa-360 .dialogue-panel,
.app-shell.qa-390 .dialogue-panel,
.app-shell.qa-412 .dialogue-panel,
.app-shell.vv-short .dialogue-panel{left:10px!important;right:10px!important;bottom:max(10px,var(--safeBottom))!important;min-height:26%!important;max-height:32%!important;padding:12px 13px 15px!important;border:1px solid rgba(228,211,180,.30)!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(31,26,21,.91),rgba(18,15,13,.97))!important;box-shadow:0 14px 38px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.05)!important;backdrop-filter:blur(8px)!important}
.dialogue-panel.content-narration{background:linear-gradient(180deg,rgba(41,38,34,.94),rgba(20,19,18,.98))!important;border-color:rgba(195,187,174,.27)!important}
.dialogue-text,.app-shell.qa-360 .dialogue-text,.app-shell.qa-390 .dialogue-text,.app-shell.qa-412 .dialogue-text{font-size:17px!important;line-height:1.65!important;letter-spacing:-.015em!important;color:#f6efe3!important;margin:10px 0 14px!important}
.dialogue-panel.content-narration .dialogue-text{font-size:16px!important;color:#e6e0d7!important}
.speaker-row #speakerName{font-size:13px!important;font-weight:800!important;color:#e6c77f!important;letter-spacing:-.015em!important}
.dialogue-footer{font-size:10px!important;color:#a69a89!important}.next-btn{font-size:16px!important;opacity:.76!important}
.dialogue-panel.dialogue-lines-1,.dialogue-panel.dialogue-lines-2,.dialogue-panel.dialogue-lines-3,.dialogue-panel.dialogue-lines-4{min-height:26%!important;max-height:32%!important}
.dialogue-panel.dialogue-lines-1 .dialogue-text,.dialogue-panel.dialogue-lines-2 .dialogue-text,.dialogue-panel.dialogue-lines-3 .dialogue-text,.dialogue-panel.dialogue-lines-4 .dialogue-text{min-height:0!important}

/* 4) time/place changes no longer hard-cut to black. Current/new background remains, quietly dimmed. */
.time-place-overlay{background:radial-gradient(circle at 50% 42%,rgba(20,18,16,.48),rgba(3,4,6,.82) 76%)!important;opacity:0;display:flex;transition:opacity .72s ease!important;backdrop-filter:blur(1.5px)}
.time-place-overlay.shown{opacity:1}.time-place-overlay small:empty,.time-place-overlay span:empty{display:none!important}
.time-place-overlay small{font-size:9px;letter-spacing:.16em;color:#b7ad9d;margin-bottom:10px}
.time-place-overlay strong{font-family:var(--font-story)!important;font-size:clamp(25px,7vw,31px)!important;font-weight:650!important;color:#f0e8dc!important;letter-spacing:-.035em!important;text-shadow:0 4px 18px rgba(0,0,0,.72)}
.time-place-overlay span{font-family:var(--font-story)!important;font-size:13px!important;line-height:1.72!important;color:#d0c8bc!important;margin-top:13px!important;max-width:82%!important;text-shadow:0 3px 14px rgba(0,0,0,.7)}
.story-screen.intertitle-mode .backdrop{opacity:1!important;filter:brightness(.42) saturate(.68) contrast(1.03)!important}
.story-screen.intertitle-mode .cinema-shade{background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.20) 48%,rgba(0,0,0,.72))!important}
.story-screen.intertitle-mode .dialogue-panel,.story-screen.intertitle-mode .story-fx-layer,.story-screen.intertitle-mode .concept-card{opacity:0!important}
.time-place-overlay.chapter-end-card{background:rgba(5,5,5,.94)!important;backdrop-filter:none}

/* 5) prologue starts in pure black and reveals one sentence at a time. */
.story-screen.prologue-mode{background:#000!important}
.story-screen.prologue-mode .backdrop,.story-screen.prologue-mode .backdrop-fallback{opacity:0!important;background-image:none!important}
.story-screen.prologue-mode .cinema-shade{background:#000!important}
.story-screen.prologue-mode .epilogue-overlay{background:#000!important}
.story-screen.prologue-mode .epilogue-overlay small{display:none!important}
.epilogue-overlay.prologue-bookend p{font-family:var(--font-story);font-size:clamp(22px,6.2vw,27px)!important;line-height:1.72!important;max-width:360px!important;color:#f0ece4!important}
.bookend-line-in{animation:bookendLineInV18 1.15s cubic-bezier(.22,.72,.24,1) both!important}
@keyframes bookendLineInV18{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.epilogue-overlay span{transition:opacity .45s ease;color:#8f8b83!important}

/* 6) calm UI: no extra labels on portraits; key text highlighting remains but with restrained contrast. */
.dialogue-text .hl-concept,.log-item p .hl-concept{color:#9fcfc2!important;text-decoration-color:rgba(159,207,194,.28)!important}
.dialogue-text .hl-emotion,.log-item p .hl-emotion{color:#e8c982!important;text-shadow:none!important}

@media(max-width:370px){
  .dialogue-text{font-size:16px!important;line-height:1.62!important}
  .character-layer.triple-cast .character-slot{width:57%!important;height:min(48vh,430px)!important}
}
@media(max-height:700px){
  .character-layer{top:64px!important;bottom:29%!important}
  .character-slot{height:min(51vh,450px)!important}
  .character-layer.triple-cast .character-slot{height:min(46vh,405px)!important}
  .dialogue-panel{max-height:34%!important}
}

/* v0.18 framing rule: sizing comes from the stage height, never from per-line portrait zoom. */
.character-slot{--img-scale:1!important;--img-shift-y:0%!important;--img-shift-x:0%!important}

.time-place-overlay{pointer-events:none!important}
@media(min-width:700px){.app-shell{height:100dvh!important;top:auto!important;transform:none!important;border-radius:0!important;border-left:1px solid #3b3029;border-right:1px solid #3b3029}.dialogue-text{font-size:17px!important}}


/* =========================================================
   v0.18.1 — fixed dialogue sheet + shorter prologue
   대사 길이에 따른 대사창 높이 변화는 완전히 제거한다.
   ========================================================= */
.dialogue-panel,
.app-shell.qa-360 .dialogue-panel,
.app-shell.qa-390 .dialogue-panel,
.app-shell.qa-412 .dialogue-panel,
.app-shell.vv-short .dialogue-panel,
.dialogue-panel.dialogue-fixed{
  height:28%!important;
  min-height:28%!important;
  max-height:28%!important;
}
.character-layer,
.app-shell.compact-height .character-layer,
.app-shell.tiny-width .character-layer,
.app-shell.tall-phone .character-layer,
.app-shell.qa-360 .character-layer,
.app-shell.qa-390 .character-layer,
.app-shell.qa-412 .character-layer,
.app-shell.vv-short .character-layer,
.app-shell.vv-tall .character-layer,
.app-shell.vv-very-tall .character-layer{bottom:28%!important}
@media(max-height:700px){
  .dialogue-panel,.app-shell.vv-short .dialogue-panel,.dialogue-panel.dialogue-fixed{height:30%!important;min-height:30%!important;max-height:30%!important}
  .character-layer,.app-shell.vv-short .character-layer{bottom:30%!important}
}

/* v0.19 cross-browser fallbacks */
.dialogue-panel,.student-menu,.fx-card,.time-place-overlay{-webkit-backdrop-filter:blur(8px)}
@media(min-width:700px){.app-shell{height:100vh!important;height:100dvh!important}}

/* v0.20: persistent portraits, upper-body framing, legible automatic intertitles. */
.character-layer{overflow:hidden!important}
.character-slot .character-figure{overflow:hidden!important;height:100%!important;animation:none!important;transition:none!important;opacity:1!important}
.character-slot .character-img{height:185%!important;width:100%!important;max-height:none!important;object-fit:contain!important;object-position:center top!important;transform:none!important;position:absolute;top:0!important;bottom:auto!important}
.character-slot[data-char="youngest"]{height:min(43vh,400px)!important}
.character-slot[data-char="brother1"],.character-slot[data-char="sister"]{height:min(49vh,450px)!important}
.character-slot.memory-portrait{filter:grayscale(1) brightness(.9)!important}
.speaker-row #speakerName{font-size:15px!important}
.epilogue-overlay.prologue-bookend.final #bookendText{font-size:clamp(30px,7vw,44px)!important;color:#f4ce78!important;font-weight:800!important;line-height:1.55!important}
.population-hud{position:absolute;z-index:7;top:calc(70px + env(safe-area-inset-top,0px));right:12px;width:150px;padding:8px 10px;background:#10151ddd;border:1px solid #ffffff20;border-radius:8px;pointer-events:none}
.population-hud[hidden]{display:none}.population-hud strong{display:block;font-size:12px;color:#eeb6a1}.population-hud small{font-size:10px;color:#bcc2cb}.population-mini-track{height:6px;background:#ffffff28;margin:7px 0;border-radius:5px;overflow:hidden}.population-mini-track i{display:block;height:100%;background:#db907b;transition:width 1.6s ease}
@media(prefers-reduced-motion:reduce){.population-mini-track i{transition:none}}

.character-slot[data-char="youngest"]{height:min(46vh,420px)!important}

/* v0.21 — explicit head alignment; no global full-height crop multiplier. */
.character-layer{inset:17% 0 28% 0!important;overflow:hidden!important}
.character-slot,.character-slot[data-char],.character-layer.triple-cast .character-slot{height:100%!important;width:70%!important;bottom:0!important;transform:none!important;transition:filter .38s ease!important}
.character-slot.slot-left{left:-9%!important;right:auto!important}.character-slot.slot-right{right:-9%!important;left:auto!important}.character-slot.slot-center{left:15%!important;right:auto!important}
.character-layer.single-cast .slot-left{left:15%!important}
.character-slot .character-figure{overflow:visible!important;transform:scaleX(var(--flip))!important}
.character-slot .character-img{filter:drop-shadow(0 10px 16px #0005)!important}
.character-slot.inactive-speaker,.character-layer.narration-mode .character-slot{filter:brightness(.86)!important;opacity:1!important}
.character-slot.memory-portrait{filter:grayscale(1) brightness(.88)!important}
.epilogue-overlay #bookendText,.epilogue-overlay.prologue-bookend.final #bookendText{font-family:var(--font-story)!important;font-size:24px!important;font-weight:700!important;line-height:1.7!important;letter-spacing:.01em!important;max-width:none!important;width:calc(100% - 48px)!important;color:#f0eadf!important;word-break:keep-all;overflow-wrap:normal}
#bookendText span{font:inherit!important;letter-spacing:inherit!important;color:inherit!important;display:inline!important;max-width:none!important}
#bookendText.text-out{animation:none!important;opacity:0!important;transition:opacity 1s ease!important}
.time-place-overlay,.time-place-overlay.chapter-end-card{z-index:45!important;background:radial-gradient(circle at 50% 42%,#28231e,#080706 72%)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:opacity 1.25s cubic-bezier(.4,0,.2,1)!important}
.time-place-overlay strong{font-size:26px!important;line-height:1.6!important;font-weight:700!important}
.time-place-overlay>*{opacity:0;transition:opacity .65s ease}.time-place-overlay.shown>*{opacity:1;transition-delay:1.1s}.time-place-overlay.text-out>*{opacity:0!important;transition-delay:0s!important}
.dialogue-text .hl-tragedy,.log-item .hl-tragedy{color:#f19a97!important;font-weight:800!important}
.population-finale .population-row{display:block;margin:16px 0}.population-finale .population-track{height:18px;margin:8px 0;background:#ffffff19;position:relative;overflow:hidden;border-radius:4px}.population-finale .population-after{position:absolute;inset:0 auto 0 0;background:#e48d86;transition:none!important}.population-finale .population-num{font-size:18px;color:#f2d7d3;text-align:right}.population-finale .population-drop{color:#f19a97;font-size:16px;line-height:1.65}.population-finale .fx-sub{font-size:12px}
@media(max-height:700px){.character-layer{inset:16% 0 30% 0!important}}
@media(prefers-reduced-motion:reduce){.time-place-overlay,.time-place-overlay>*,#bookendText{transition:none!important;animation:none!important}}

/* Keep every source's cut edge below the dialogue sheet, including short portraits. */
#characterLayer{inset:23% 0 28% 0!important}
@media(max-height:700px){#characterLayer{inset:20% 0 30% 0!important}}
.time-place-overlay span{word-break:keep-all!important;overflow-wrap:break-word!important}

#bookendText .hl-tragedy{color:#f19a97!important}

/* One scaling authority: per-image face metrics, never legacy pose multipliers. */
#characterLayer .character-slot .character-figure{transform:scaleX(var(--flip))!important}

/* v0.23: quiet continuity, inline time and immediate history notes */
#characterLayer .character-slot.inactive-speaker{filter:brightness(.7)!important;opacity:1!important}
#characterLayer .character-slot{transition:filter 180ms ease!important}
#dialogueText .time-heading{display:block;font-size:1.42em;line-height:1.4;color:#edcf96;font-weight:700;margin-bottom:.45em}
#dialogueText .time-description{display:block;font-size:1em}
#dialoguePanel.content-time #nextBtn{visibility:hidden}
#historyDialog{box-sizing:border-box;width:min(88vw,440px);max-height:75dvh;overflow:auto;border:1px solid #a88b57;border-radius:16px;padding:26px;background:#211d17;color:#eee4d2;box-shadow:0 16px 65px #0009;font-family:inherit}
#historyDialog::backdrop{background:rgba(0,0,0,.28)}
#historyDialog .history-kicker{color:#c9ac70;font-size:11px;letter-spacing:.18em;margin:0}
#historyDialog h2{font-size:22px;margin:8px 0 18px}
#historyBody{font-size:17px;line-height:1.85;word-break:keep-all;overflow-wrap:anywhere}
#historyClose{display:block;width:100%;margin-top:24px;padding:12px;background:#c5a46b;color:#191610;border:0;border-radius:8px;font:inherit;font-weight:bold;cursor:pointer}
#historyClose:focus-visible{outline:3px solid #fff;outline-offset:4px}
#bookendText.text-out{animation:none!important}
@media(prefers-reduced-motion:reduce){#characterLayer .character-slot{transition:none!important}}

#dialoguePanel,#conceptCard{animation:none!important}

/* v0.24 */
#epilogueOverlay{display:block!important;padding:0!important;background:#000!important}
#epilogueOverlay.hidden{display:none!important}
#epilogueOverlay #bookendKicker{position:absolute;top:max(11%,65px);left:0;width:100%;margin:0!important;font-size:12px;letter-spacing:.25em;color:#aaa!important}
#epilogueOverlay #bookendText{position:absolute;left:24px;top:50%;translate:0 -50%;width:calc(100% - 48px)!important;margin:0!important;padding:0!important;text-align:center;text-wrap:balance;font-size:24px!important;line-height:1.8!important}
#epilogueOverlay #bookendText.bookend-red,#epilogueOverlay #bookendText.bookend-red *{color:#f19a97!important}
#bookendHint{display:none!important}
#dialoguePanel.content-time #nextBtn{visibility:visible}
.triangle-box .tri-path{font-size:42px!important;line-height:1;font-weight:900;color:#f3cf81;text-shadow:0 0 10px #000}
.triangle-box .path-ea{left:23%;top:40%;transform:none}
.triangle-box .path-aa{left:50%;bottom:8%;transform:translateX(-50%)}
.triangle-box .path-au{right:23%;top:40%;transform:none}
.fx-card.price-compact{width:min(270px,78vw)!important;margin:0 auto!important;padding:10px 12px!important;pointer-events:none}
.price-compact .fx-title{font-size:12px!important;margin-bottom:7px!important}
.price-compact .price-row{height:55px;gap:8px}.price-compact .price-item b{font-size:10px}
.price-compact .portion{height:15px!important;width:48px!important}.price-compact .portion.small{width:25px!important}
.price-compact .medicine{height:20px!important;width:12px!important}.price-compact .medicine.small{height:12px!important}
.price-compact .price-note{font-size:11px!important;margin-top:7px}.price-compact .fx-sub{display:none}
.trafficking-chart{padding:16px!important}.trafficking-bars{display:flex;justify-content:space-around;gap:14px;margin:18px 0 12px}
.trafficking-column{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px}.trafficking-column b{font-size:15px;color:#f19a97;white-space:nowrap}
.trafficking-track{height:125px;width:100%;max-width:48px;display:flex;align-items:flex-end;background:#ffffff0a;border-bottom:1px solid #928875}
.trafficking-track i{display:block;width:100%;background:linear-gradient(#efaaa0,#a94f49);height:0;border-radius:4px 4px 0 0}
.trafficking-column small{font-size:12px}.graph-source{display:block;text-align:right;color:#d0baa0;font-size:10px;margin-top:8px;pointer-events:auto}

#epilogueOverlay #bookendText span{position:static!important;inset:auto!important;translate:none!important;transform:none!important;width:auto!important}


/* v0.27 — automatic chapter title cards + final fade into epilogue */
#timePlaceOverlay.chapter-intro-card{
  z-index:52!important;
  background:radial-gradient(circle at 50% 42%,#201c18 0,#080706 68%,#000 100%)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:0;
  transition:opacity .9s ease!important;
  pointer-events:auto;
}
#timePlaceOverlay.chapter-intro-card.shown{opacity:1}
#timePlaceOverlay.chapter-intro-card small,
#timePlaceOverlay.chapter-intro-card strong,
#timePlaceOverlay.chapter-intro-card span{
  display:block!important;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .72s ease,transform .72s ease!important;
  text-shadow:0 4px 20px rgba(0,0,0,.75);
}
#timePlaceOverlay.chapter-intro-card.shown small{opacity:1;transform:none;transition-delay:.38s!important}
#timePlaceOverlay.chapter-intro-card.shown strong{opacity:1;transform:none;transition-delay:1.30s!important}
#timePlaceOverlay.chapter-intro-card.shown span{opacity:1;transform:none;transition-delay:2.25s!important}
#timePlaceOverlay.chapter-intro-card.text-out small,
#timePlaceOverlay.chapter-intro-card.text-out strong,
#timePlaceOverlay.chapter-intro-card.text-out span{opacity:0!important;transform:translateY(-5px)!important;transition-delay:0s!important;transition-duration:.65s!important}
#timePlaceOverlay.chapter-intro-card small{
  font-family:var(--font-ui)!important;
  font-size:clamp(12px,3.4vw,15px)!important;
  font-weight:800!important;
  letter-spacing:.24em!important;
  color:#c8a66c!important;
  margin:0 0 16px!important;
}
#timePlaceOverlay.chapter-intro-card strong{
  font-family:var(--font-story)!important;
  font-size:clamp(34px,9.6vw,46px)!important;
  line-height:1.35!important;
  font-weight:800!important;
  letter-spacing:-.045em!important;
  color:#f5efe5!important;
  max-width:92%!important;
}
#timePlaceOverlay.chapter-intro-card span{
  font-family:var(--font-story)!important;
  font-size:clamp(17px,4.8vw,21px)!important;
  line-height:1.55!important;
  font-weight:650!important;
  letter-spacing:.02em!important;
  margin-top:18px!important;
  max-width:88%!important;
}
#timePlaceOverlay.chapter-intro-ch1 span{color:#e6bc82!important}
#timePlaceOverlay.chapter-intro-ch2 span{color:#9fd7c7!important}
#timePlaceOverlay.chapter-intro-ch3 span{color:#e8cb77!important}
.story-screen.chapter-intro-mode .story-topbar,
.story-screen.chapter-intro-mode .story-progress,
.story-screen.chapter-intro-mode .dialogue-panel,
.story-screen.chapter-intro-mode .character-layer,
.story-screen.chapter-intro-mode .story-fx-layer,
.story-screen.chapter-intro-mode .concept-card,
.story-screen.chapter-intro-mode .stage-caption,
.story-screen.chapter-intro-mode .population-hud{opacity:0!important;pointer-events:none!important}
#sceneFade.ending-fade{
  z-index:50!important;
  background:#000!important;
  transition:opacity var(--transition-ms,2600ms) cubic-bezier(.42,0,.25,1)!important;
}
@media(max-width:370px){
  #timePlaceOverlay.chapter-intro-card strong{font-size:clamp(31px,9vw,39px)!important}
  #timePlaceOverlay.chapter-intro-card span{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){
  #timePlaceOverlay.chapter-intro-card,
  #timePlaceOverlay.chapter-intro-card>* ,
  #sceneFade.ending-fade{transition-duration:.08s!important;animation:none!important}
}


/* v0.29 — darker faces, exploration-style title, slower top-down reveal */
.boot-inner strong{font-family:var(--font-title);font-weight:400;letter-spacing:-.045em;text-shadow:0 2px 10px rgba(0,0,0,.45),0 0 20px rgba(194,155,85,.10)}
:root{
  --font-title:"Song Myung","Nanum Myeongjo","Noto Serif KR","Noto Serif CJK KR","Batang","Baekmuk Batang","AppleMyungjo",serif;
  --font-era:"Cormorant Garamond","Times New Roman",serif;
}
.title-screen{
  isolation:isolate;
  overflow:hidden;
  background:#07090d!important;
  font-family:var(--font-ui);
}
.title-bg{
  position:absolute;
  inset:-3%;
  z-index:0;
  background-image:url("../assets/images/backgrounds/bg_ch2_zong_deck.webp");
  background-size:cover;
  background-position:46% 41%;
  filter:grayscale(.22) saturate(.58) brightness(.29) contrast(1.12) blur(1.2px);
  transform:scale(1.04);
}
.title-map-grid{
  position:absolute;
  z-index:1;
  inset:6% -18% 23%;
  opacity:.48;
  background:
    radial-gradient(ellipse at 50% 51%,transparent 0 50%,rgba(218,189,133,.11) 50.4% 50.8%,transparent 51.2%),
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(221,194,143,.045) 48px,transparent 49px),
    repeating-linear-gradient(90deg,transparent 0 56px,rgba(221,194,143,.038) 57px,transparent 58px);
  mask-image:radial-gradient(ellipse at 50% 48%,#000 0 52%,transparent 77%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 48%,#000 0 52%,transparent 77%);
  transform:perspective(420px) rotateX(62deg) translateY(-5%);
  transform-origin:50% 58%;
  pointer-events:none;
}
.title-vignette{
  z-index:2;
  background:
    radial-gradient(ellipse at 50% 39%,transparent 0 31%,rgba(0,0,0,.18) 53%,rgba(0,0,0,.52) 76%,rgba(0,0,0,.88) 100%),
    linear-gradient(180deg,rgba(2,4,8,.52) 0,rgba(2,4,8,.08) 27%,rgba(2,4,8,.10) 56%,rgba(2,4,8,.91) 100%)!important;
  pointer-events:none;
}
.title-content{
  position:absolute!important;
  z-index:3;
  inset:max(18px,calc(9px + env(safe-area-inset-top,0px))) 12px max(14px,calc(10px + var(--safeBottom)))!important;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  align-content:stretch;
  text-align:center;
  min-height:0;
}
.title-heading{position:relative;z-index:6;padding-top:1.5vh}
.title-era{
  margin:0 0 8px;
  font-family:var(--font-era);
  font-size:clamp(11px,3vw,13px);
  line-height:1.45;
  font-weight:600;
  letter-spacing:.16em;
  color:rgba(231,220,197,.74);
  text-shadow:0 2px 12px rgba(0,0,0,.88);
  word-break:keep-all;
}
.title-era span{
  display:block;
  margin-bottom:2px;
  font-family:var(--font-era);
  font-size:.86em;
  font-style:italic;
  letter-spacing:.34em;
  color:rgba(210,180,119,.72);
}
.secret-title{
  margin:6px auto 8px!important;
  white-space:nowrap;
  font-family:var(--font-title)!important;
  font-size:clamp(50px,14vw,72px)!important;
  line-height:1.06;
  font-weight:400!important;
  letter-spacing:-.028em!important;
  color:#f5ebd8;
  text-shadow:0 4px 18px rgba(0,0,0,.88),0 0 30px rgba(195,153,76,.15);
  font-feature-settings:"kern" 1;
  position:relative;
}
.secret-title::after{
  content:"";
  display:block;
  width:min(56vw,230px);
  height:1px;
  margin:11px auto 0;
  background:linear-gradient(90deg,transparent,rgba(216,184,117,.68) 18%,rgba(244,231,204,.92) 50%,rgba(216,184,117,.68) 82%,transparent);
  box-shadow:0 0 12px rgba(216,184,117,.12);
}
.title-copy{
  margin:0!important;
  font-family:var(--font-title);
  font-size:clamp(12px,3.4vw,15px)!important;
  line-height:1.68!important;
  font-weight:400;
  letter-spacing:.015em;
  color:rgba(236,228,214,.80)!important;
  text-shadow:0 2px 12px rgba(0,0,0,.90);
  word-break:keep-all;
}
.title-cast{
  position:relative;
  z-index:3;
  min-height:0;
  width:100%;
  overflow:hidden;
  margin-top:2px;
}
.title-cast::after{
  content:"";
  position:absolute;
  z-index:8;
  left:-10%;right:-10%;bottom:-1px;height:35%;
  background:linear-gradient(180deg,transparent,rgba(4,6,9,.30) 26%,#080a0e 95%);
  pointer-events:none;
}
.title-character{
  --img-h:124%;
  --img-bottom:-27%;
  --img-x:50%;
  --face-x:50%;
  --face-y:3%;
  --face-w:67%;
  --face-h:31%;
  --glow:rgba(205,205,196,.14);
  position:absolute;
  z-index:2;
  bottom:0;
  width:39%;
  height:100%;
  margin:0;
  pointer-events:none;
}
.title-character::before{
  content:"";
  position:absolute;
  z-index:3;
  left:14%;
  right:14%;
  top:0;
  height:40%;
  background:linear-gradient(180deg,rgba(0,0,0,.58) 0,rgba(0,0,0,.34) 58%,transparent 100%);
  filter:blur(8px);
  pointer-events:none;
}
.title-character img{
  position:absolute;
  z-index:2;
  left:var(--img-x);
  bottom:var(--img-bottom);
  height:var(--img-h);
  width:auto;
  max-width:none;
  transform:translateX(-50%);
  transform-origin:50% 100%;
  filter:saturate(.72) brightness(.64) contrast(1.08) drop-shadow(0 14px 18px rgba(0,0,0,.78));
}
.title-char-glow{
  position:absolute;
  z-index:1;
  left:50%;top:17%;
  width:128%;height:58%;
  translate:-50% 0;
  background:radial-gradient(ellipse,var(--glow) 0,transparent 67%);
  filter:blur(8px);
  opacity:.72;
}
.title-face-shadow{
  position:absolute;
  z-index:4;
  left:var(--face-x);
  top:var(--face-y);
  width:var(--face-w);
  height:var(--face-h);
  translate:-50% 0;
  background:
    linear-gradient(180deg,rgba(0,1,4,.96) 0,rgba(0,1,4,.90) 26%,rgba(0,2,6,.74) 54%,rgba(0,2,6,.28) 78%,transparent 100%),
    radial-gradient(ellipse at 50% 34%,rgba(0,1,4,.99) 0,rgba(0,1,4,.92) 26%,rgba(0,2,6,.68) 54%,rgba(0,2,6,.24) 76%,transparent 88%);
  filter:blur(5.5px);
  mix-blend-mode:multiply;
  opacity:.985;
  border-radius:52% 52% 48% 48% / 40% 40% 60% 60%;
}
.title-character figcaption{
  position:absolute;
  z-index:10;
  bottom:8%;
  left:50%;
  translate:-50% 0;
  font-family:var(--font-title);
  font-size:clamp(10px,2.8vw,12px);
  font-weight:700;
  letter-spacing:.09em;
  white-space:nowrap;
  color:rgba(240,231,214,.74);
  text-shadow:0 2px 10px #000;
}
.title-char-america{left:-2%;--img-h:130%;--img-bottom:-31%;--img-x:49%;--face-x:50%;--face-y:4.5%;--face-w:68%;--face-h:31%;--glow:rgba(160,191,205,.19)}
.title-char-africa{left:30.5%;z-index:4;--img-h:124%;--img-bottom:-27%;--img-x:50%;--face-x:50%;--face-y:1.5%;--face-w:63%;--face-h:30%;--glow:rgba(166,93,73,.22)}
.title-char-europe{right:-2%;--img-h:128%;--img-bottom:-30%;--img-x:51%;--face-x:50%;--face-y:1.5%;--face-w:63%;--face-h:30%;--glow:rgba(206,168,83,.20)}
.title-actions{
  position:relative;
  z-index:10;
  display:grid!important;
  gap:8px!important;
  width:min(78vw,318px);
  margin:0 auto!important;
}
.title-actions .primary-btn,.title-actions .ghost-btn{
  min-height:50px;
  border-radius:12px;
  font-family:var(--font-ui);
  font-size:15px;
  letter-spacing:-.015em;
  box-shadow:0 7px 22px rgba(0,0,0,.24);
}
.title-actions .primary-btn{
  border:1px solid rgba(218,185,116,.75)!important;
  background:linear-gradient(180deg,rgba(213,183,119,.96),rgba(181,145,77,.96))!important;
  color:#17130d!important;
}
.title-actions .ghost-btn{
  border-color:rgba(225,211,183,.22)!important;
  background:rgba(8,11,15,.72)!important;
  color:#e8e0d2!important;
  backdrop-filter:blur(8px);
}
.title-audio-hint{
  position:relative;
  z-index:10;
  margin:9px 0 0;
  font-size:10.5px;
  line-height:1.5;
  color:rgba(229,224,215,.48);
  letter-spacing:.015em;
}
/* Reveal begins after the boot curtain is gone. */
.title-era,.secret-title,.title-copy,.title-character,.title-actions,.title-audio-hint{opacity:0}
.title-screen.title-ready .title-era{animation:titleFall 1.05s cubic-bezier(.2,.75,.2,1) .18s both}
.title-screen.title-ready .secret-title{animation:titleFall 1.25s cubic-bezier(.2,.75,.2,1) .90s both}
.title-screen.title-ready .title-copy{animation:titleFall 1.05s cubic-bezier(.2,.75,.2,1) 1.82s both}
.title-screen.title-ready .title-char-america{animation:titleFall 1.12s cubic-bezier(.2,.75,.2,1) 2.62s both}
.title-screen.title-ready .title-char-africa{animation:titleFall 1.12s cubic-bezier(.2,.75,.2,1) 2.98s both}
.title-screen.title-ready .title-char-europe{animation:titleFall 1.12s cubic-bezier(.2,.75,.2,1) 3.34s both}
.title-screen.title-ready .title-actions{animation:titleFall 1.00s cubic-bezier(.2,.75,.2,1) 4.18s both}
.title-screen.title-ready .title-audio-hint{animation:titleFall .95s cubic-bezier(.2,.75,.2,1) 4.72s both}
@keyframes titleFall{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@media(max-height:760px){
  .title-content{inset:max(12px,calc(5px + env(safe-area-inset-top,0px))) 10px max(8px,calc(6px + var(--safeBottom)))!important}
  .title-heading{padding-top:0}.title-era{font-size:10px;margin-bottom:4px}.secret-title{font-size:clamp(43px,12.2vw,58px)!important;margin-bottom:6px!important}
  .title-copy{font-size:11.5px!important}.title-character figcaption{bottom:7%}.title-actions .primary-btn,.title-actions .ghost-btn{min-height:45px}
  .title-audio-hint{margin-top:5px;font-size:9.7px}
}
@media(max-height:670px){
  .title-era span{display:none}.title-era{margin-bottom:1px}.title-copy{display:none}.title-actions{gap:6px!important}.title-actions .primary-btn,.title-actions .ghost-btn{min-height:43px}
  .title-audio-hint{display:none}
}
@media(max-width:370px){
  .title-content{left:8px!important;right:8px!important}.secret-title{font-size:clamp(44px,12.8vw,54px)!important}.title-character{width:40%}
  .title-char-america{left:-3.5%}.title-char-africa{left:30%}.title-char-europe{right:-3.5%}
}
@media(prefers-reduced-motion:reduce){
  .title-era,.secret-title,.title-copy,.title-character,.title-actions,.title-audio-hint{opacity:1!important;animation:none!important;transform:none!important}
}