/* One visual-novel interaction surface. Dialogue precedes choices in DOM and on screen. */
#school{z-index:3;background:#151711}
body[data-school] #time,body[data-school]>nav{display:none}
.escape-view,.escape-shade{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#escape-bg{height:100%;width:100%;object-fit:cover;object-position:center;display:block}
#escape-character{position:absolute;right:11%;bottom:0;height:96%;width:52%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 8px 12px #0003)}
.escape-shade{background:linear-gradient(180deg,#09121675,transparent 18%,transparent 43%,#080e1480 76%,#080c14ef)}
.escape-top{position:absolute;top:max(22px,env(safe-area-inset-top));left:32px;right:132px;display:flex;align-items:center;justify-content:space-between;z-index:5;gap:20px;text-shadow:0 1px 8px #0009}
.escape-top>div{display:flex;align-items:center;gap:17px}.escape-top span{font:500 32px/1 'Barlow Condensed',Arial,sans-serif}.escape-top p{margin:0;font-size:13px}.escape-top button{font-size:13px;background:none;min-height:44px;padding:10px 0;border-bottom:1px solid #ffffff60}
.escape-panel{position:absolute;z-index:6;bottom:0;left:0;width:min(740px,65vw);padding:60px 48px max(30px,env(safe-area-inset-bottom));background:linear-gradient(0deg,#080e14fa 0%,#080e14e8 75%,transparent 100%);max-height:78dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.escape-dialogue{margin:0 0 24px;min-height:91px;text-shadow:0 2px 6px #0009}
#escape-speaker{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:13px;color:#dcd8cc}
#escape-speaker:after{content:'';width:38px;height:1px;background:#fff6}
:is(#escape-caption,#gameover-detail){margin:0;font-size:18px;line-height:1.85;word-break:keep-all;white-space:pre-line;font-weight:400;letter-spacing:-.025em}
:is(#escape-caption,#gameover-detail):focus{outline:none}
:is(#escape-actions,.gameover-actions){border-top:1px solid #b0b7b94d}
:is(#escape-actions,.gameover-actions) button{width:100%;min-height:48px;padding:12px 4px;display:flex;align-items:center;gap:12px;text-align:left;background:none;border:0;border-bottom:1px solid #a8b1b326;font-size:15px;line-height:1.5;border-radius:0;color:#f2eee5;transition:color .15s}
:is(#escape-actions,.gameover-actions) button:before{content:'›';font:22px Georgia,serif;color:#b0a38c;width:14px;flex:none}
:is(#escape-actions,.gameover-actions) button:focus-visible{outline:1px solid #d5d8d4;outline-offset:-2px}
#escape-lock{margin:0 0 18px}#escape-lock label{font-size:12px;color:#bfb6a6;display:block;margin-bottom:8px}
#escape-lock>div{display:flex;gap:12px}#escape-code{min-width:0;width:0;flex:1;max-width:250px;color:#fff4dd;background:#151b1fe0;border:1px solid #a79b7c;padding:12px;font-size:22px;letter-spacing:.2em;text-align:center;border-radius:0;text-transform:uppercase}
#escape-lock button{background:#d6c8ab;color:#242820;padding:10px 16px;font-size:14px;min-height:48px}
#escape-error{font-size:12px;line-height:1.7;margin:8px 0 0;color:#ffba9b;min-height:0}
#escape-evidence{position:absolute;z-index:5;top:19%;right:13%;width:280px;padding:26px 28px;background:#e9dfc5;color:#383023;box-shadow:0 12px 35px #0004;transform:rotate(-2deg);text-align:center}
#escape-evidence span,#escape-evidence small{display:block;font-size:12px;line-height:1.7}#escape-evidence strong{display:block;font:48px/1.4 Georgia,serif;margin:15px 0;letter-spacing:.08em;white-space:pre-line}
#escape-evidence.mirrored-note strong{transform:scaleX(-1)}
#escape-evidence.letter-found strong{font-size:32px}

#escape-journal{width:540px;max-width:calc(100vw - 28px);height:min(760px,90dvh);max-height:90dvh;background:#e8e2d4;color:#33372f;padding:0;box-shadow:0 20px 70px #0006;border:1px solid #c9c0ad;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#escape-journal>header{position:sticky;top:0;z-index:1;background:#e8e2d4;display:flex;justify-content:space-between;align-items:center;padding:22px 25px 15px;border-bottom:1px solid #a59b8670}
#escape-journal header small{font-size:11px;color:#756d5f}#escape-journal h2{font-size:25px;letter-spacing:-.04em;font-weight:500;margin:5px 0 0}
#escape-journal-close{background:none;color:inherit;min-height:44px;min-width:44px;font-size:13px}
#escape-journal-list{padding:0 25px}#escape-journal article{padding:22px 0;border-bottom:1px solid #a59b8650}
#escape-journal article header{display:flex;justify-content:space-between;align-items:baseline}#escape-journal article strong{font:27px Georgia,serif;color:#5c604b}#escape-journal h3{font-size:15px;font-weight:500;margin:10px 0}#escape-journal article p,.empty-bag{font-size:13px;line-height:1.8;word-break:keep-all;margin:8px 0}.empty-bag{padding:30px 0}
#escape-journal footer{padding:20px 25px 25px}#escape-hint{min-height:44px;background:none;border-bottom:1px solid #5d604d;font-size:13px;color:#444c38;padding:8px 0}#escape-journal-hint{font-size:13px;line-height:1.8;margin:10px 0 0}
body[data-school] #sound-toggle{top:22px;right:24px;min-height:44px;z-index:7}
@media(max-width:700px){
 .escape-top{left:22px;right:116px;top:max(17px,env(safe-area-inset-top));gap:10px}.escape-top>div{gap:11px}.escape-top span{font-size:29px}.escape-top p{font-size:12px}.escape-top button{font-size:12px}.escape-top{align-items:flex-start}
 .escape-top>div{display:block}.escape-top p{margin-top:6px;font-size:11px}
 body[data-school] #sound-toggle{top:17px;right:18px;font-size:12px;min-width:78px}
 #escape-character{height:78%;width:100%;right:0;bottom:8%;object-position:50% bottom}
 .escape-panel{width:100%;padding:50px 24px max(22px,env(safe-area-inset-bottom));max-height:70dvh;background:linear-gradient(0deg,#080e14fa 0%,#080e14ed 73%,#080e1470 93%,transparent 100%)}
 .escape-dialogue{margin-bottom:20px;min-height:85px}:is(#escape-caption,#gameover-detail){font-size:16px;line-height:1.8}#escape-speaker{font-size:12px;margin-bottom:10px}
 :is(#escape-actions,.gameover-actions) button{font-size:14px;min-height:47px;padding:11px 2px}
 #escape-evidence{top:20%;left:50%;right:auto;transform:translateX(-50%) rotate(-2deg);width:240px;padding:22px 24px}
 #escape-evidence strong{font-size:40px;margin:9px 0}
 #school[data-room=shop] #escape-bg{object-position:46% center}#school[data-room=road] #escape-bg{object-position:88% center}
 #school[data-room=classroom] #escape-bg{object-position:70% center}
}
@media(max-height:650px){
 .escape-panel{padding-top:36px;padding-bottom:14px;max-height:77dvh}.escape-dialogue{min-height:0;margin-bottom:12px}:is(#escape-caption,#gameover-detail){font-size:14px;line-height:1.7}:is(#escape-actions,.gameover-actions) button{min-height:44px;padding:9px 2px;font-size:13px}
 #escape-speaker{margin-bottom:7px}#escape-evidence{top:16%;padding:13px 18px;width:220px}#escape-evidence strong{font-size:30px;margin:4px 0}
 #escape-character{height:82%;bottom:4%}#escape-lock{margin-bottom:10px}#escape-code{padding:8px;font-size:18px}
}
@media(min-width:701px) and (max-height:650px){.escape-panel{max-height:85dvh}}
@media(prefers-reduced-motion:reduce){:is(#escape-actions,.gameover-actions) button{transition:none}}

#escape-restart{display:block;margin-top:24px;padding:12px 0;background:none;color:#797164;font-size:12px;min-height:44px}
#escape-restart-confirm{font-size:13px;line-height:1.8;padding-top:10px}#escape-restart-confirm button{min-height:44px;margin-right:20px;padding:8px 0;background:none;border-bottom:1px solid #8f826b;color:#504532}
/* The safe uses the same dialogue-then-choice arrangement. Reels stay unchanged. */
body[data-state=portal]>nav{display:none}
#intro #portal-choices{position:absolute;bottom:0;left:0;right:auto;width:min(740px,65vw);padding:50px 48px 30px;text-align:left;z-index:6;background:linear-gradient(0deg,#080e14f2,#080e14c9 75%,transparent)}
#intro .portal-speaker{font-size:12px;color:#dcd8cc;margin:0 0 12px}
#intro #portal-copy{font-size:17px!important;line-height:1.8;min-height:0;margin:0 0 22px;word-break:keep-all}
#intro .portal-actions{border-top:1px solid #b0b7b94d}
#intro #portal-choices #portal-enter,#intro #portal-choices #portal-look{position:static;translate:none;transform:none;width:100%;height:auto;min-height:48px;min-width:0;margin:0;padding:12px 2px;display:flex;flex-direction:row;justify-content:flex-start;gap:12px;align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid #a8b1b326;border-radius:0;font-size:15px;color:#f2eee5}
#intro .portal-actions button:before{content:'›';font:22px Georgia,serif;color:#b0a38c;width:14px;flex:none}
#intro #portal-choices .interact-label{padding:0;border:0;font-size:inherit}
@media(max-width:700px){#intro #portal-choices{width:100%;padding:45px 24px max(22px,env(safe-area-inset-bottom))}#intro #portal-copy{font-size:16px!important}#intro #portal-choices #portal-enter,#intro #portal-choices #portal-look{font-size:14px}}
@media(max-height:650px){#intro #portal-copy{font-size:14px!important;margin-bottom:15px}#intro #portal-choices{padding-top:36px;padding-bottom:14px}}
@media(min-width:701px){.escape-panel,#intro #portal-choices{width:100%}.escape-dialogue,:is(#escape-actions,.gameover-actions),#escape-lock,#intro #portal-copy,#intro .portal-actions{max-width:644px}}
/* C&W props: readable worksheets and a genuinely mirrored scrap, not extra quizzes. */
#escape-evidence.story-paper{padding:23px 27px;max-height:43dvh;overflow-y:auto;scrollbar-width:thin;transform:rotate(-1.5deg)}
#escape-evidence.homework h3{font:italic 28px Georgia,serif;margin:14px 0 12px}
#escape-evidence.homework .homework-question{font:16px/1.6 Georgia,serif;text-align:left;margin:0;padding:12px 0;border-top:1px solid #998e7144}
#escape-evidence.homework .homework-answer{font:italic 33px Georgia,serif;color:#9b3e32;letter-spacing:.04em;margin:6px 0 13px;text-align:left;text-decoration:underline;text-underline-offset:7px}
.code-rows{margin:16px 0;text-align:left;font-family:Georgia,serif}.code-rows>div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid #84765d35;align-items:center}
#escape-evidence .code-rows span,.journal-paper .code-rows span{font:14px Georgia,serif;letter-spacing:.04em}.code-rows b{font:22px Georgia,serif;letter-spacing:.04em;white-space:nowrap}
.row-red{color:#8c332b}.row-blue{color:#2a5677}.row-green{color:#42653b}.reverse-ink{transform:scaleX(-1)}
.journal-paper{padding:10px 0}.journal-paper>span{font-size:12px}.journal-paper small{font-size:11px}.journal-paper .code-rows{max-width:300px;margin:8px 0}.journal-paper .code-rows b{font-size:20px}
:is(#escape-actions,.gameover-actions) button:disabled{opacity:.65;cursor:wait}
#school[data-room=safe] #escape-bg,#school[data-room=ground] #escape-bg,#school[data-room=opened] #escape-bg{object-position:50% 44%}
#school[data-room=mirror] #escape-bg{object-position:44% center}
#escape-evidence.letter strong{font-size:30px}
@media(max-width:700px){
 #escape-evidence.story-paper{left:50%;right:auto;top:16%;width:272px;transform:translateX(-50%) rotate(-1.5deg)}
 #school[data-room=locker] #escape-bg{object-position:51% center}
 #escape-code{font-variant-numeric:tabular-nums;font-family:Georgia,serif;letter-spacing:.3em}
}
@media(max-height:650px){
 #escape-evidence.story-paper{top:15%;width:250px;padding:14px 20px;max-height:44dvh}
 #escape-evidence.homework h3{font-size:23px;margin:8px 0}#escape-evidence.homework .homework-question{font-size:14px;padding:8px 0;line-height:1.4}#escape-evidence.homework .homework-answer{font-size:27px;margin:5px 0 10px}
 .code-rows{margin:9px 0}.code-rows>div{padding:7px 0}.code-rows b{font-size:20px}
}