/* Reuse the lesson's narration card + illustrated scene, and the mail-send stage. */
#story-intro .opening-cast{justify-content:center;gap:24px}
#hook-mechanism .skill5-layout{grid-template-columns:1fr;gap:24px}
#hook-mechanism .skill5-content{max-width:780px}
#hook-mechanism .skill5-text p{max-width:100%;font-size:23px;line-height:1.4}
#hook-mechanism .hook-rule-scene{padding:0;gap:12px}
.hook-flow{display:grid;grid-template-columns:1fr 24px 1.2fr 24px 1fr;align-items:center;width:100%;max-width:480px;gap:12px;color:var(--muted)}
.hook-flow figure{margin:0;text-align:center;min-width:0}.hook-flow img,.hook-flow svg{height:110px;width:100%;object-fit:contain;display:block}.hook-flow .flow-guard{height:105px}.hook-flow svg{padding:18px 4px}
.hook-flow figcaption{font:14px/1.3 var(--sans);margin-top:8px;color:var(--ink)}.hook-flow>span{text-align:center;font:24px var(--sans)}
.hook-flow-note{margin:4px 0 0;font:17px/1.4 var(--sans);color:var(--muted);text-align:center}
#hook-pass{background:var(--lesson-panel);outline:none}
.pass-stage{position:relative;isolation:isolate;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:78px;padding:12px 24px}
.pass-letter{width:300px;max-width:100%;align-self:center;background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);overflow:hidden;transition:transform .5s ease,opacity .4s}
.pass-to{padding:16px;border-bottom:1px solid var(--line);font:14px/1.5 var(--sans);color:var(--muted)}.pass-to span{padding:4px 7px;background:var(--bg);border:1px solid var(--line);border-radius:5px;color:var(--ink)}
.pass-subject{padding:14px 16px;font:14px/1.4 var(--sans)}
.pass-cast{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:24px;align-items:end;position:relative}
.pass-cast figure{position:relative;margin:0;text-align:center;min-width:0}.pass-cast img{display:block;object-fit:contain;margin:auto;width:100%}
.pass-agent img{height:220px;max-width:125px}.pass-guard img{height:226px;max-width:230px}.pass-client{align-self:center}.pass-client img{height:95px;max-width:85px}
.pass-cast figcaption{margin-top:8px;font:13px/1.4 var(--sans);color:var(--muted)}
.pass-speech{position:absolute;z-index:5;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:max-content;max-width:240px;padding:12px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);font:21px/1.3 var(--serif);text-align:center}
.pass-speech:after{content:'';position:absolute;left:calc(50% - 7px);bottom:-8px;width:14px;height:14px;transform:rotate(45deg);background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.pass-envelope{position:absolute;z-index:4;width:82px;height:58px;color:var(--muted);opacity:0;pointer-events:none;filter:drop-shadow(0 6px 6px #2a20151a)}.pass-envelope svg{width:100%;height:100%}.pass-envelope.visible{opacity:1}
.pass-result{flex:0 0 32px;line-height:32px;margin:0;text-align:center;font-family:var(--sans);font-size:16px;color:var(--muted)}
.pass-received{position:absolute;left:0;right:0;top:calc(100% + 6px);font:13px/1.3 var(--sans);color:#55735c}
#hook-pass:not([data-phase="ready"]) .pass-letter{opacity:0;transform:scale(.3,.1)}
#hook-pass[data-phase="done"] .pass-result{color:#55735c}
#hook-pass[data-waiting] #hook-pass-control{visibility:hidden}
.pass-envelope.visible .skill-flap,.hook-envelope.visible .skill-flap{transform-origin:60px 7px;animation:close-envelope .5s ease both}
@keyframes close-envelope{from{transform:scaleY(-.65)}to{transform:scaleY(1)}}
@media(max-width:650px){
 #hook-mechanism .skill5-content{padding:0;margin:auto}
 #hook-mechanism h1{font-size:32px;margin-bottom:20px}
 #hook-mechanism .skill5-text p{font-size:20px;line-height:1.4;padding:18px}
 #hook-mechanism .skill5-layout{gap:20px}
 #hook-mechanism .hook-rule-label{font-size:20px;padding:8px 0}
 .hook-flow{gap:4px;grid-template-columns:1fr 20px 1.2fr 20px 1fr}
 .hook-flow img{height:94px}.hook-flow .flow-guard{height:94px}.hook-flow svg{height:94px;padding:24px 0}.hook-flow figcaption{font-size:13px}.hook-flow-note{font-size:16px;max-width:28ch}
 .pass-stage{gap:86px;padding:8px 0}
 .pass-letter{width:270px}.pass-to,.pass-subject{font-size:14px}
 .pass-cast{grid-template-columns:1fr 1.6fr 1fr;gap:14px}
 .pass-agent img{height:142px;max-width:80px}.pass-guard img{height:140px;max-width:145px}.pass-client img{height:65px;max-width:60px}
 .pass-cast figcaption{font-size:12px}.pass-speech{font-size:19px;max-width:220px;padding:12px 14px;bottom:calc(100% + 12px)}
 .pass-envelope{width:68px;height:48px}.pass-result{font-size:14px;height:32px;line-height:32px}.pass-received{font-size:11px}
}
@media(max-width:650px) and (max-height:670px){
 #hook-mechanism h1{font-size:29px;margin-bottom:16px}
 #hook-mechanism .skill5-text p{font-size:18px;padding:15px}
 #hook-mechanism .skill5-layout{gap:14px}.hook-flow img,.hook-flow .flow-guard,.hook-flow svg{height:74px}.hook-flow svg{padding:16px 0}
 #hook-mechanism .hook-rule-scene{gap:8px}.hook-flow-note{font-size:15px}
 .pass-stage{gap:72px}.pass-agent img{height:124px}.pass-guard img{height:124px}.pass-client img{height:60px}
}
@media(prefers-reduced-motion:reduce){.pass-letter{transition:none}.pass-envelope.visible .skill-flap{animation:none}}

@media(max-width:650px) and (max-height:670px){
 #hook-intro .hook-intro-art img{height:175px;width:190px}
 #final-conclusion .final-composition{gap:16px}
}

/* Bookend cast: the trickster controls the opening; the external guard controls the ending. */
#story-intro .opening-cast{justify-content:center;align-items:flex-end;gap:10px;min-width:0}
#story-intro .opening-cast img{height:160px;width:78px;flex:0 1 78px;object-fit:contain}
#story-intro .opening-cast .guard{height:155px;width:112px;flex-basis:112px}
#story-intro .opening-cast .opening-agent{transform:rotate(-4deg);transform-origin:50% 95%}
#final-conclusion .final-cast{align-items:flex-end}
#final-conclusion .final-cast .final-agent{transform:rotate(3deg);transform-origin:50% 95%}
@media(max-width:650px){
 #story-intro .opening-cast{align-self:stretch;margin:24px 0 0;gap:16px}
 #story-intro .opening-cast img{height:116px;width:72px;flex-basis:72px}
 #story-intro .opening-cast .guard{height:112px;width:112px;flex-basis:112px}
 #final-conclusion .final-cast{justify-content:center;gap:18px}
 #final-conclusion .final-cast img{height:108px;width:68px}
 #final-conclusion .final-cast .guard{height:108px;width:106px}
}
@media(max-width:650px) and (max-height:670px){
 #story-intro .opening-cast{margin-top:16px;gap:12px}
 #story-intro .opening-cast img{height:82px;width:54px;flex-basis:54px}
 #story-intro .opening-cast .guard{height:82px;width:86px;flex-basis:86px}
 #final-conclusion .final-cast img{height:82px;width:56px}
 #final-conclusion .final-cast .guard{height:82px;width:86px}
}