@font-face{font-family:SchoolPen;src:url('assets/fonts/NanumPenScript-Regular.ttf') format('truetype');font-display:swap}
/* UI Bowl's object-slot inventory, adapted to a school bag and inspectable paper. */
.prop-paper{position:relative;isolation:isolate;background:#e9e5d8;color:#283444;box-shadow:1px 3px 0 #beb8a8,0 14px 30px #0006;font-family:SchoolPen,cursive;text-align:left}
.prop-paper:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(94deg,#0000000a,transparent 12%,#fff5 45%,#0000000a 51%,transparent 57%)}
#escape-evidence.prop-paper{width:310px;top:15%;right:17%;padding:27px 30px;max-height:51dvh;overflow:auto;transform:rotate(-2deg);text-align:left;background-color:#eeeade;color:#283444}
#escape-evidence.homework,.prop-paper.homework{background-image:linear-gradient(90deg,transparent 25px,#b67a783d 25px,#b67a783d 26px,transparent 26px),repeating-linear-gradient(transparent 0 27px,#8da6b03d 27px 28px);background-position:0 0,0 13px}
.prop-paper .page-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #7e82815c;padding-bottom:8px}
#escape-evidence .page-head span,.prop-paper .page-head span{font:21px/1 SchoolPen,cursive;letter-spacing:0}
#escape-evidence.prop-paper h3,#escape-journal .prop-paper h3,.prop-paper h3{font:34px/1.15 SchoolPen,cursive;font-weight:400;margin:16px 0 18px;letter-spacing:-.02em;color:inherit}
.prop-paper .printed-question{font:15px/1.7 Georgia,serif;margin:0 0 14px;letter-spacing:0}
.prop-paper .pencil-answer{font:37px/1 SchoolPen,cursive;transform:rotate(-4deg);margin:8px 0 18px 13px;width:fit-content;border-bottom:1px solid #35425780;padding:0 12px 2px 2px}
.prop-paper .pencil-note{font:24px/1.15 SchoolPen,cursive;margin:12px 0 8px;letter-spacing:0;color:#3a4355;transform:rotate(-1deg)}
#escape-evidence .page-number,.prop-paper .page-number{display:block;text-align:center;font:17px/1 SchoolPen,cursive;color:#68707a;margin:18px 0 0}
#escape-evidence.reverse,#escape-evidence.rows,.prop-paper.reverse,.prop-paper.rows{background-color:#ddd8c8;background-image:linear-gradient(0deg,transparent 49%,#847b6430 50%,#fff7 50.5%,transparent 52%),linear-gradient(90deg,transparent 49%,#847b641c 50%,#fff4 51%,transparent 52%);padding:30px}
.note-lines{padding:8px 0}.note-lines p{display:flex;align-items:baseline;justify-content:space-between;gap:20px;font:30px/1.2 SchoolPen,cursive;margin:8px 0 15px;color:#2c3440;transform:rotate(-2deg)}
.note-lines p:nth-child(2){transform:rotate(1deg);padding-left:5px}.note-lines p:nth-child(3){transform:rotate(-1deg)}.note-lines b{font:inherit;font-size:34px;font-weight:400;letter-spacing:.09em}
.prop-paper .note-heading{font-size:22px;margin:0 0 19px}.reverse-ink{transform:scaleX(-1)}
.prop-paper.letter{padding:38px 30px;background:#ebe4d3}.prop-paper .letter-to{font:28px/1.5 SchoolPen,cursive;margin:0}.prop-paper .letter-year{font:52px/1 SchoolPen,cursive;margin:28px 0}.prop-paper.letter .pencil-note{margin-top:40px}
#escape-journal{width:660px;max-width:100vw;height:min(920px,100dvh);max-height:100dvh;margin:auto;padding:0;background:#171b19;color:#e4e1d8;border:0;box-shadow:0 20px 100px #000b;overflow:auto;border-radius:0}
#escape-journal::backdrop{background:#050707b8;backdrop-filter:blur(3px)}
#escape-journal>header{position:sticky;top:0;display:flex;align-items:center;padding:13px 24px;background:#171b19f5;border-bottom:1px solid #ffffff20;z-index:4}
#escape-journal h2{font-size:15px;font-weight:400;margin:0;letter-spacing:.1em}#escape-journal-close{display:flex;align-items:center;gap:18px;font:12px Arial,sans-serif;color:#d1d1c6}#escape-journal-close span{font-size:26px;font-weight:200}
.bag-inspect{padding:16px 24px 24px;min-height:420px;display:grid;align-content:center;justify-items:center;background:radial-gradient(ellipse at 50% 65%,#343a31,#171b19 75%)}
#escape-item-name{font:12px/1.6 Arial,sans-serif;color:#b9bdb4;margin:0 0 21px;letter-spacing:.04em}
#escape-journal-view.prop-paper{width:min(310px,100%);padding:24px 30px;transform:rotate(-2deg);min-height:270px}
#escape-journal-view.homework{min-height:340px}#escape-journal-view.bag-empty{color:#9a9e95;min-height:250px;display:grid;place-items:center;font-size:14px}
#escape-journal-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding:0 22px;background:#111613;border-block:1px solid #a1a58d35}
#escape-journal .bag-slot{position:relative;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px 4px;background:#212820;color:#b7bdad;border:0;box-shadow:inset 0 0 14px #0005;font-size:11px;border-radius:0}
#escape-journal .bag-slot[aria-pressed=true]{color:#faf5df;background:#333e30;box-shadow:inset 0 -2px #bab89b,inset 0 0 20px #0003}
#escape-journal .bag-slot:focus-visible{outline:2px solid #ded5b6;outline-offset:-4px}.bag-slot:disabled{cursor:default}.empty-slot{width:37px;height:49px;border:1px dashed #8a968333}
.item-mini{width:38px;height:48px;display:grid;place-items:center;background:#ccc3a8;color:#384332;font:19px SchoolPen,cursive;transform:rotate(-8deg);box-shadow:2px 3px 3px #0007}.item-mini.homework{background:#3c4a38;color:#ded9bd;border-left:4px solid #21291f;border-block:1px solid #c1bda144}.item-mini.pocket{height:34px;transform:rotate(7deg);background:linear-gradient(90deg,#d9d2bf,#beb49d 50%,#d8d1be 52%)}.item-mini.mirror{height:40px;background:repeating-linear-gradient(#ddd6c4 0 9px,#98a49a 9px 10px)}
#escape-journal footer{padding:14px 24px 22px;display:flex;flex-wrap:wrap;align-items:center;column-gap:22px}
#escape-hint,#escape-restart{font-size:11px;background:none;color:#a3aa9b;border:0;min-height:44px;padding:10px 0;margin:0}
#escape-restart{margin-left:auto}#escape-journal-hint{order:3;flex-basis:100%;font:22px/1.3 SchoolPen,cursive;color:#d1c9b0;margin:0}#escape-journal-hint:empty{display:none}
#escape-restart-confirm{width:100%;color:#d2cdbf}#escape-restart-confirm button{color:#d2cdbf;border-color:#7e8974}
#school[data-step=safe] .escape-panel{padding-top:38px}#escape-lock{max-width:380px;margin:0 0 25px;padding:14px;background:linear-gradient(115deg,#34372f,#222720 55%,#33362c);border:1px solid #696653;box-shadow:inset 0 0 0 4px #141912,inset 0 0 0 5px #484a3d,0 5px 25px #0008}
#escape-lock>div{gap:10px;align-items:stretch}#escape-code{width:100%;max-width:none;min-height:64px;padding:10px 0 10px .27em;border:1px solid #4d4d3f;border-radius:0;font:34px/1.2 'Courier New',monospace;font-variant-numeric:tabular-nums;letter-spacing:.27em;color:#e1d9b9;text-shadow:0 2px #000;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),#5b5c4c70 calc(25% - 1px) 25%),linear-gradient(#020504,#20251b 40%,#141a11 55%,#020504);box-shadow:inset 0 3px 10px #000}
#escape-code::placeholder{color:#9a9b81}#escape-lock button{min-width:76px;padding:10px 6px;background:#3b4234;color:#d7d3bd;font-size:12px;border:1px solid #757461;box-shadow:inset 0 1px #a0a18a33,0 2px 3px #0008}#escape-lock button span{display:block;font:25px/1.2 Georgia,serif;margin-top:5px}
#escape-error{color:#d5ba9b;font-size:12px}#escape-error:empty{display:none}
@media(max-width:700px){
 #school:has(#escape-evidence:not([hidden])){display:grid;grid-template-rows:90px minmax(0,1fr) auto}
 #school:has(#escape-evidence:not([hidden])) .escape-panel{position:relative;grid-row:3;padding-top:20px;max-height:45dvh;min-height:0}
 #escape-evidence.prop-paper{position:relative;grid-row:2;align-self:center;justify-self:center;top:auto;left:auto;right:auto;width:min(310px,82vw);max-height:100%;overflow-y:auto;padding:22px 28px;transform:rotate(-2deg);margin:0}
 #escape-journal{width:100%;height:100dvh}.bag-inspect{min-height:410px;padding:18px 22px 24px}#escape-journal-list{padding:0 18px}#escape-journal .bag-slot{min-height:111px}
 #escape-lock{max-width:100%;margin-bottom:18px}#escape-code{font-size:31px}
}
@media(max-height:680px){
 #school:has(#escape-evidence:not([hidden])){grid-template-rows:76px minmax(0,1fr) auto}
 #escape-evidence.prop-paper{width:255px;padding:13px 24px}
 #escape-evidence.prop-paper h3{font-size:28px;margin:10px 0}.prop-paper .printed-question{font-size:13px;margin-bottom:8px}.prop-paper .pencil-answer{font-size:29px;margin:7px 0}.prop-paper .pencil-note{font-size:21px;margin:8px 0}.prop-paper .page-number{display:none!important}
 .note-lines p{font-size:27px;margin:6px 0}.note-lines b{font-size:29px}.bag-inspect{min-height:315px;padding:12px 22px 18px}#escape-journal-view.homework{min-height:280px}#escape-journal .bag-slot{min-height:96px}
}
/* The reward is another scene: an appointment recalled while real time runs. */
#event-stage.rendezvous{background:#060907;color:#e7dfca;overflow:auto;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(32px,7vh,75px) 8vw max(28px,env(safe-area-inset-bottom));min-height:100dvh}
.rendezvous-scene,.rendezvous-dim{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:-3}.rendezvous-scene{filter:saturate(.45) brightness(.4);object-position:50% 45%}.rendezvous-dim{z-index:-2;background:linear-gradient(#0307049c,transparent 35%,#030704cc 65%,#030704)}
.meeting-clock{align-self:center;text-align:center;width:min(490px,100%);position:relative;z-index:2}.meeting-date{font:13px/1.8 'Courier New',monospace;letter-spacing:.08em;margin:0 0 19px;color:#bbb8a7}
.clock-reels{display:flex;gap:12px;justify-content:center;align-items:flex-start}.clock-reels>div{min-width:0;flex:1;max-width:136px}.clock-reels>div>span{display:block;font:11px/1.4 'Noto Sans KR',sans-serif;color:#8f9688;margin-top:10px}
.clock-reels number-flow{display:block;font:500 clamp(46px,8vw,86px)/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.03em;font-variant-numeric:tabular-nums;--number-flow-mask-height:.07em;--number-flow-mask-width:0px;color:#e2ddc7;text-shadow:0 3px 6px #000;overflow:hidden}
.clock-reels>b{font:300 clamp(30px,5vw,58px)/1.4 'Barlow Condensed',sans-serif;color:#777f6d}.clock-expired{font-size:12px;color:#bdb7a5;margin-top:12px}
.meeting-friend{position:fixed;height:77dvh;width:min(52vw,700px);bottom:-13%;right:1%;object-fit:contain;object-position:bottom;z-index:-1;opacity:.28;filter:saturate(.3);pointer-events:none;mask-image:linear-gradient(#000 50%,transparent 90%)}
.meeting-story{position:relative;width:min(650px,100%);padding-top:65px}.meeting-speaker{font-size:12px;letter-spacing:.04em;color:#b3b7a6;margin:0 0 18px}.meeting-story blockquote{font:400 clamp(21px,3vw,30px)/1.75 'Noto Sans KR',sans-serif;letter-spacing:-.04em;margin:0;word-break:keep-all}.meeting-thought{font:14px/1.8 'Noto Sans KR',sans-serif;color:#9ca28f;margin:24px 0 30px;word-break:keep-all}
.meeting-actions{border-top:1px solid #a6ad8c50}.meeting-actions button{display:block;min-height:52px;width:100%;padding:15px 0;text-align:left;background:none;font-size:14px;line-height:1.6;border-bottom:1px solid #a6ad8c25;color:#ddd8c5}.meeting-actions button:before{content:'›';color:#8e987b;margin-right:14px}
@media(max-width:700px){#event-stage.rendezvous{padding:70px 27px max(26px,env(safe-area-inset-bottom))}.clock-reels{gap:9px}.clock-reels number-flow{font-size:64px}.clock-reels>b{font-size:42px}.meeting-friend{width:100%;right:-15%;height:71dvh;bottom:4%;opacity:.25}.wide-only{display:none}.meeting-story blockquote{font-size:23px}.meeting-story{padding-top:80px}}
@media(max-height:650px){#event-stage.rendezvous{padding-top:30px}.meeting-story{padding-top:35px}.meeting-story blockquote{font-size:19px}.meeting-thought{font-size:12px;margin:18px 0}.clock-reels number-flow{font-size:54px}}


#gameover-title:focus,#escape-lock:focus{outline:none}

/* Quiet sound control; onboarding is attached to the control, not a new panel. */
body #sound-toggle,body[data-school] #sound-toggle{display:grid;place-items:center;width:44px;min-width:44px;height:44px;padding:10px;border:0;background:transparent;color:#e5e5da;box-shadow:none}
body #sound-toggle:focus-visible{outline:1px solid #e5e5da;outline-offset:3px}
#sound-tooltip{position:fixed;z-index:9;top:calc(max(16px,env(safe-area-inset-top)) + 54px);right:24px;padding:10px 13px;background:#dedfd7;color:#24302b;font:12px/1.5 'Noto Sans KR',sans-serif;box-shadow:0 4px 20px #0005;pointer-events:none}
#sound-tooltip:before{content:'';position:absolute;right:16px;top:-5px;width:10px;height:10px;transform:rotate(45deg);background:inherit}
body:not(:is([data-state=idle],[data-state=rewind],[data-state=portal])) #sound-tooltip{display:none}
body:is([data-state=zoom],[data-state=invitation],[data-state=join]) #sound-toggle{display:none}
.escape-top{right:90px}
.prop-paper.question{background-image:repeating-linear-gradient(transparent 0 27px,#8da6b03d 27px 28px);background-position:0 13px}
.pencil-answer.unanswered{min-width:105px;min-height:35px}
#escape-evidence:is(.scrap,.folded,.reflection),#escape-journal-view:is(.scrap,.folded,.reflection){background-color:#e8e5d6ed;background-image:linear-gradient(118deg,#fff4,transparent 40%,#bdb8a322);padding:20px 22px;min-height:0;overflow:hidden}
.fold-ink{display:block;width:100%;height:auto;max-height:100%;overflow:visible}
#escape-evidence.scrap{width:245px;max-height:52dvh}
#escape-journal-view.scrap{width:245px}
#escape-evidence:is(.folded,.reflection){width:310px}
.prop-paper.folded:after,.prop-paper.reflection:after{inset:auto 0 0;height:3px;background:#c2bdad;z-index:1;box-shadow:0 2px 1px #0002}
#escape-evidence.reflection{box-shadow:0 0 0 7px #8e9c9633,2px 4px 5px #0006}
@media(max-width:700px){
 .escape-top{right:80px}
 #sound-tooltip{right:18px;top:calc(max(12px,env(safe-area-inset-top)) + 54px)}
 #escape-evidence.scrap{width:min(245px,65vw);height:100%;max-height:390px;justify-self:center}
 #escape-evidence.scrap .fold-ink{height:100%;width:100%}
 #escape-evidence:is(.folded,.reflection){width:min(310px,82vw)}
}

/* One editable field, four independently centered glyphs. No font-spacing hack. */
#escape-lock .code-entry{position:relative;min-width:0;flex:1;border:1px solid #4d4d3f;background:linear-gradient(#020504,#20251b 45%,#020504);box-shadow:inset 0 3px 10px #000}
#escape-code-digits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:64px;pointer-events:none}
#escape-code-digits>span{position:relative;display:grid;place-items:center;min-width:0;border-right:1px solid #5b5c4c70;font:32px/1 'Courier New',monospace;font-variant-numeric:tabular-nums;color:#e1d9b9;letter-spacing:0;text-shadow:none}
#escape-code-digits>span:last-child{border-right:0}
#escape-code-digits>span:empty:after{content:'';width:3px;height:3px;background:#999c83;border-radius:50%}
#escape-lock #escape-code{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;max-width:none;margin:0;padding:0;border:0;border-radius:0;appearance:none;-webkit-appearance:none;background:transparent;box-shadow:none;font:16px/1 Arial,sans-serif;letter-spacing:0;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;text-shadow:none}
#escape-code:focus-visible{outline:1px solid #d3cbb3;outline-offset:2px}
#escape-lock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:66px}
#escape-lock button svg{display:block}
.escape-top>div{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.escape-top p{margin:0}
#escape-journal-close{justify-content:center;gap:0;padding:8px}
.prop-paper.letter{min-height:180px;display:grid;place-items:center}
.meeting-actions{margin-top:30px}
.meeting-story blockquote:focus{outline:none}
/* Touch does not have hover. Preserve keyboard focus without sticky tap color. */
button,a,input{-webkit-tap-highlight-color:transparent}
@media(hover:none),(pointer:coarse){
 #escape-actions button:hover{color:#f2eee5;text-shadow:none;background:none}
 #escape-actions button:focus:not(:focus-visible){outline:none}
}
@media(max-width:360px){#escape-code-digits>span{font-size:28px}#escape-code-digits{min-height:60px}#escape-lock{padding:11px}#escape-lock .lock-controls{gap:7px}}

/* Photocopied school handout: intact packing list, failed itinerary print. */
.trip-notice{position:relative;background:#ece8dc;color:#343630;padding:30px 27px 25px;font:14px/1.6 'Noto Sans KR',Arial,sans-serif;box-shadow:1px 3px 0 #b8b2a3,0 15px 45px #0005;background-image:linear-gradient(0deg,transparent 48.8%,#9d978521 49.2%,#fff7 49.6%,transparent 50.4%),linear-gradient(92deg,#00000006,transparent 47%,#948b7415 50%,transparent 53%)}
.trip-notice header{padding:0 0 17px;text-align:center;border-bottom:3px double #737568}
.trip-notice .notice-school-year{font:11px/1.4 'Noto Sans KR',sans-serif;letter-spacing:.18em;margin:0 0 12px;color:#66695e}
.trip-notice h2{font:600 25px/1.4 'Noto Sans KR',sans-serif;letter-spacing:-.05em;margin:0}
.notice-itinerary{margin:18px 0 22px;border-bottom:1px solid #7375686b;padding-bottom:12px}
.notice-itinerary>div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:9px;align-items:center;min-height:35px}
.notice-itinerary dt{font-size:12px;font-weight:500;letter-spacing:.13em}.notice-itinerary dd{margin:0;overflow:hidden}
.notice-damaged{display:block;width:100%;height:34px;opacity:.85;transform:skewX(-8deg)}
.trip-notice .notice-packing h3,#escape-evidence.notice .notice-packing h3{font:600 14px/1.5 'Noto Sans KR',sans-serif;letter-spacing:.08em;margin:0 0 14px;color:#343630}
.notice-packing ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.notice-packing li{display:flex;align-items:baseline;gap:10px;font:14px/1.6 'Noto Sans KR',sans-serif;word-break:keep-all}
.notice-packing li:before{content:'';display:block;flex:none;width:8px;height:8px;border:1px solid #75796a}
.trip-notice .notice-footer{margin:24px 0 0;padding-top:14px;border-top:1px solid #7375686b;font:11px/1.7 'Noto Sans KR',sans-serif;color:#707368;word-break:keep-all}
#escape-evidence.notice{padding:0;width:min(350px,86vw);background:none;overflow-y:auto;scrollbar-width:thin;max-height:58dvh}
#escape-evidence.notice .trip-notice{padding:22px 23px}
#escape-evidence.notice .notice-packing ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
#escape-evidence.notice .notice-packing li{font-size:12px;gap:7px}
#escape-evidence.notice .notice-school-year{margin-bottom:8px}
#escape-evidence.notice h2{font-size:24px}
#trip-notice-dialog{width:420px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px);padding:38px 8px 12px;margin:auto;background:transparent;border:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;color:#e5dfd0}
#trip-notice-dialog::backdrop{background:#050907d9;backdrop-filter:blur(3px)}
.notice-close{position:absolute;top:0;right:0;display:grid;place-items:center;width:44px;height:38px;padding:5px;background:none;color:#dedccf}
#escape-notice{flex-basis:100%;text-align:left;padding:10px 0;margin-bottom:2px;min-height:44px;font-size:12px;background:none;color:#c4c2b4;border:0;border-bottom:1px solid #ffffff1a}
@media(max-width:700px){#escape-evidence.notice{max-height:100%}#escape-evidence.notice .trip-notice{box-shadow:none}}
@media(max-width:360px){.trip-notice{padding:25px 20px}.trip-notice h2{font-size:23px}.notice-packing li{font-size:13px}}

/* A held paper and its speaker share the frame without hiding the face. */
#school:has(#escape-character:not([hidden])) #escape-evidence.prop-paper{left:8%;right:auto}
@media(max-width:700px){
 #school:has(#escape-evidence:not([hidden])) #escape-character{right:-20%;width:85%;height:80%;bottom:8%}
 #school:has(#escape-character:not([hidden])) #escape-evidence.prop-paper{left:auto;justify-self:start;margin-left:18px;width:58vw;padding:20px 18px}
 #school:has(#escape-character:not([hidden])) #escape-evidence.prop-paper h3{font-size:29px}
 #school:has(#escape-character:not([hidden])) .printed-question{font-size:13px}
}

#event-stage{position:fixed;inset:0;z-index:12;overflow:auto;overscroll-behavior:contain}
body[data-state=invitation]>nav{display:none}

.meeting-restart small{display:block;margin-left:21px;color:#a6ad98;font-size:12px;font-weight:400}