/* Props are shared; each location composes its own scene, independently of timing. */
.story-dialogue{position:relative;padding:20px 24px;background:#fffbec;color:#263d2f;border:1px solid #e6d2a5;border-radius:26px 26px 8px 26px;box-shadow:0 10px 35px #24321b35;max-width:355px}
.story-dialogue:after{content:"";position:absolute;bottom:-17px;right:35px;border-width:18px 0 0 22px;border-style:solid;border-color:#fffbec transparent transparent transparent}
.story-dialogue strong{display:block;color:#498054;font-size:12px;margin-bottom:8px}.story-dialogue p{margin:0;font:21px/1.45 Georgia,serif}
.story-demo{padding:26px;border:1px solid #dbc595;border-radius:20px;background:#fffaf1f5;color:#2d3d30;box-shadow:0 20px 65px #14251670;max-width:510px;width:min(510px,88%)}
.demo-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#56714b;margin-bottom:12px}.storybook .story-demo h3{font-size:26px;line-height:1.2;margin-bottom:16px}.story-demo .story-small{font-size:13px;line-height:1.5;margin-top:18px}.item-row{display:flex;gap:16px;align-items:center}.item-row img{width:80px;height:80px;object-fit:contain}.item-row p{font-size:13px;margin:6px 0}.points{font-size:13px;color:#217345;font-weight:bold}.quest-tags,.parcel-items{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.quest-tags span,.parcel-items span{background:#e4ecd9;border-radius:20px;padding:8px 12px;font-size:12px}.delivery-track{display:flex;gap:26px;padding-left:20px;font-size:12px;margin-top:22px;color:#386044}
.art-request{position:absolute;z-index:4;right:20px;top:90px;max-width:285px;padding:8px 12px;border:1px dashed #a4864b;border-radius:8px;background:#fff8e8dc;color:#584b31;font-size:10px;line-height:1.4}.art-request strong,.art-request span{display:block}.art-request strong{margin-bottom:3px}
/* Welcome: Ashley steps into the square; the invitation opens across its left lawn. */
.scene-sketch{display:none}
.story-active :is(#welcome,[data-chapter-id="welcome"]) .scene-sketch{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;z-index:1}
@media print{.scene-sketch{display:none!important}}
.story-active :is(#welcome,[data-chapter-id="welcome"]){--scene-focus:50% 50%}
.story-active :is(#welcome,[data-chapter-id="welcome"]) .scene-character{right:16%;bottom:7%;width:25%;height:62%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 16px #182c3c44)}
.story-active :is(#welcome,[data-chapter-id="welcome"]) .story-dialogue{right:33%;top:30%}
.story-active :is(#welcome,[data-chapter-id="welcome"]) .story-headline{left:7%;top:24%;width:49%}
.story-active :is(#welcome,[data-chapter-id="welcome"]) .story-narration{left:7%;top:49%;width:43%}
.story-active :is(#welcome,[data-chapter-id="welcome"]) .story-detail{left:7%;top:63%}
.story-active :is(#welcome,[data-chapter-id="welcome"]) .scene-message{left:7%;top:70%;font-size:23px}
.story-active :is(#welcome,[data-chapter-id="welcome"]) .story-actions{left:7%;bottom:12%}
/* Shops: dialogue over the counter; copy in the window light; item card floats to the right. */
.story-active :is(#shops,[data-chapter-id="shops"]){--scene-focus:50% 50%;--scene-shade:linear-gradient(90deg,#142614ee, #14261488 40%,transparent 85%)}
.story-active :is(#shops,[data-chapter-id="shops"]) .story-dialogue{left:57%;top:28%}
.story-active :is(#shops,[data-chapter-id="shops"]) .story-headline{left:8%;top:29%;width:43%}
.story-active :is(#shops,[data-chapter-id="shops"]) .story-narration{left:8%;top:47%;width:39%}
.story-active :is(#shops,[data-chapter-id="shops"]) .story-detail{left:8%;top:71%;width:42%}
.story-active :is(#shops,[data-chapter-id="shops"]) .story-demo{right:8%;bottom:18%}
.story-active :is(#shops,[data-chapter-id="shops"]) .scene-message{left:8%;top:42%;max-width:470px;font-size:46px}
.story-active :is(#shops,[data-chapter-id="shops"]) .story-actions{left:8%;top:66%}
/* Town Hall: lower-left narration; a notice rests opposite Ashley's desk. */
.story-active :is(#stories,[data-chapter-id="stories"]){--scene-focus:62% 44%;--scene-shade:linear-gradient(45deg,#16291aee, #16291a66 55%,transparent)}
.story-active :is(#stories,[data-chapter-id="stories"]) .story-dialogue{left:29%;top:24%}
.story-active :is(#stories,[data-chapter-id="stories"]) .story-headline{left:7%;top:39%;width:48%}
.story-active :is(#stories,[data-chapter-id="stories"]) .story-narration{left:7%;top:64%;width:42%}
.story-active :is(#stories,[data-chapter-id="stories"]) .story-detail{left:7%;top:81%}
.story-active :is(#stories,[data-chapter-id="stories"]) .story-demo{left:9%;bottom:20%}
.story-active :is(#stories,[data-chapter-id="stories"]) .scene-message{right:8%;top:46%;max-width:460px;font-size:44px}
.story-active :is(#stories,[data-chapter-id="stories"]) .story-actions{right:8%;top:70%}
/* Post Office: keep Justin on the left, space over the counter on the right. */
.story-active :is(#post-office,[data-chapter-id="post-office"]){--scene-focus:36% 45%;--scene-shade:linear-gradient(270deg,#18251ced, #18251c88 45%,transparent)}
.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-dialogue{left:44%;top:28%}
.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-headline{right:7%;top:28%;width:43%}
.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-narration{right:7%;top:48%;width:42%}
.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-detail{right:7%;top:73%;width:42%}
.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-demo{right:8%;bottom:19%}
.story-active :is(#post-office,[data-chapter-id="post-office"]) .scene-message{right:8%;top:43%;max-width:450px;font-size:46px}
.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-actions{right:8%;top:64%}
/* Finale: a centered invitation above the sunset. */
.story-active :is(#finale,[data-chapter-id="finale"]){--scene-focus:50% 50%;--scene-shade:linear-gradient(#182c3166,#182c3199)}
.story-active :is(#finale,[data-chapter-id="finale"]) .story-headline{left:22%;top:24%;width:56%;max-width:none;text-align:center}
.story-active :is(#finale,[data-chapter-id="finale"]) .story-narration{left:28%;top:49%;width:44%;max-width:none;text-align:center}
.story-active :is(#finale,[data-chapter-id="finale"]) .scene-message{left:25%;top:67%;width:50%;max-width:none;text-align:center;font-size:24px}
.story-active :is(#finale,[data-chapter-id="finale"]) .story-actions{left:20%;bottom:16%;width:60%;justify-content:center}
.story-active :is(#finale,[data-chapter-id="finale"]) .story-detail{left:20%;bottom:10%;width:60%;max-width:none;text-align:center}
@media(max-width:800px){
 .story-dialogue{padding:17px 20px;max-width:78%;border-radius:22px}.story-dialogue p{font-size:18px}
 .art-request{right:10px;top:76px;max-width:220px;font-size:8px;padding:6px 9px}.art-request span{display:none}
 .story-demo{padding:20px}.storybook .story-demo h3{font-size:23px}.story-demo .story-small{font-size:12px}
 .story-active .story-page{--scene-shade:linear-gradient(0deg,#132819ed, #132819bb 40%,transparent 90%)!important}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .scene-character{right:4%;width:48%;height:54%;bottom:7%}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .story-dialogue{left:7%;right:auto;top:27%;width:70%}
 .story-active :is(#shops,[data-chapter-id="shops"]) .story-dialogue{left:10%;top:24%;width:78%}
 .story-active :is(#stories,[data-chapter-id="stories"]) .story-dialogue{left:8%;top:29%;width:74%}
 .story-active :is(#post-office,[data-chapter-id="post-office"]) .story-dialogue{left:20%;top:25%;width:72%}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .story-headline{left:6%;top:35%;width:88%}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .story-narration{left:6%;top:53%;width:88%}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .story-detail{left:6%;top:65%;width:88%}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .scene-message{left:6%;top:72%;font-size:21px;width:88%}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .story-actions{left:6%;bottom:11%}
 .story-active :is(#shops,[data-chapter-id="shops"]) .story-headline,.story-active :is(#stories,[data-chapter-id="stories"]) .story-headline,.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-headline{left:6%;right:auto;top:43%;width:88%}
 .story-active :is(#shops,[data-chapter-id="shops"]) .story-narration,.story-active :is(#stories,[data-chapter-id="stories"]) .story-narration,.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-narration{left:6%;right:auto;top:60%;width:88%}
 .story-active :is(#shops,[data-chapter-id="shops"]) .story-detail,.story-active :is(#stories,[data-chapter-id="stories"]) .story-detail,.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-detail{left:6%;right:auto;top:81%;width:88%}
 .story-active :is(#shops,[data-chapter-id="shops"]) .story-demo,.story-active :is(#stories,[data-chapter-id="stories"]) .story-demo,.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-demo{left:6%;right:auto;bottom:17%}
 .story-active :is(#shops,[data-chapter-id="shops"]) .scene-message,.story-active :is(#stories,[data-chapter-id="stories"]) .scene-message,.story-active :is(#post-office,[data-chapter-id="post-office"]) .scene-message{left:8%;right:auto;top:51%;width:84%;font-size:36px}
 .story-active :is(#shops,[data-chapter-id="shops"]) .story-actions,.story-active :is(#stories,[data-chapter-id="stories"]) .story-actions,.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-actions{left:8%;right:auto;top:74%}
 .story-active :is(#finale,[data-chapter-id="finale"]) .story-headline{left:6%;top:29%;width:88%}
 .story-active :is(#finale,[data-chapter-id="finale"]) .story-narration{left:7%;top:51%;width:86%}
 .story-active :is(#finale,[data-chapter-id="finale"]) .scene-message{left:7%;top:69%;width:86%;font-size:20px}
 .story-active :is(#finale,[data-chapter-id="finale"]) .story-actions{left:6%;bottom:16%;width:88%}
 .story-active :is(#finale,[data-chapter-id="finale"]) .story-detail{left:6%;bottom:10%;width:88%}
}