/* Full-screen places, with controls attached to places rather than panels. */
#school{position:fixed;inset:0;z-index:1;overflow:hidden;background:#171911;color:#fff8e9}
.school-scene{position:absolute;inset:0;overflow:hidden}
.school-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none;-webkit-user-drag:none}
.school-shade{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,#0f160f50,transparent 26%,transparent 64%,#11160fc7)}
#school-place{position:absolute;top:117px;left:34px;z-index:5;margin:0;font-size:12px;letter-spacing:.04em;text-shadow:0 2px 10px #0008}
#school-next{position:absolute;z-index:6;left:50%;top:65%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:9px;min-width:110px;min-height:96px;padding:16px;background:transparent;border:0;color:#fff8eb;text-shadow:0 1px 8px #000,0 1px 18px #0008;font-size:12px}
#school-next svg{fill:#1b271c32;stroke:currentColor;stroke-width:1.2;filter:drop-shadow(0 1px 7px #0006);transition:transform .25s,background .25s;border-radius:50%}
#school-next:hover svg{transform:translateY(-4px);background:#ffffff25}
#school-next:focus-visible{outline:1px solid #fff8e9;outline-offset:4px;border-radius:2px}
#school[data-scene=door] #school-next{top:57%;left:54%}
#school[data-scene=classroom] #school-next{top:64%;left:53%}
#school-caption{position:absolute;z-index:5;bottom:78px;left:20px;right:20px;text-align:center;font-size:clamp(14px,1.3vw,18px);font-weight:400;letter-spacing:-.025em;line-height:1.8;margin:0;text-shadow:0 2px 12px #0008;transition:opacity .3s}
#school-back{position:absolute;z-index:6;bottom:130px;left:30px;padding:12px 4px;background:none;font-size:11px;color:#fff8e9;text-shadow:0 1px 8px #0008}
#school.moving #school-next,#school.moving #school-caption{opacity:0;pointer-events:none}
body[data-school] main{z-index:2;pointer-events:none}
body[data-school] #time{inset:24px auto auto 30px;transform:none;opacity:1;display:block;transition:opacity 1s}
body[data-school] #year{font-size:100px;line-height:.85;color:#fff8e9}
body[data-school] #arrival{pointer-events:none}
body[data-school] #phone-launch{pointer-events:auto;right:10vw}
body[data-school] #arrival-copy{top:auto;bottom:27%;font-size:clamp(20px,2vw,30px);max-width:50vw;text-shadow:0 2px 18px #000a}
body[data-school] #instruction{bottom:19%;font-size:12px;text-shadow:0 2px 14px #000a;max-width:260px}
body[data-school] nav button{color:#fff5df;text-shadow:0 1px 10px #000}
body[data-school=meeting] #school-caption{bottom:37%;text-align:left;left:8vw;right:auto;font-size:14px;max-width:40vw}
body[data-school=meeting] #school-back{bottom:76px}
@media(max-width:700px){
 body[data-school] #time{top:max(25px,env(safe-area-inset-top));left:24px}
 body[data-school] #year{font-size:77px}
 #school-place{top:102px;left:26px;font-size:11px}
 #school-caption{bottom:95px;font-size:13px}
 #school-back{bottom:145px;left:22px}
 #school[data-scene=door] #school-next{left:69%;top:57%}
 #school[data-scene=classroom] #school-next{left:54%;top:61%}
 body[data-school=meeting] #school-caption{top:135px;bottom:auto;left:25px;max-width:80vw;font-size:13px}
 body[data-school] #arrival-copy{bottom:31%;left:25px;font-size:20px;max-width:64vw}
 body[data-school] #instruction{bottom:26%;left:25px;max-width:160px;font-size:11px}
 body[data-school] #phone-launch{right:3vw;bottom:-85px;transform:rotate(8deg) scale(.72)}
 body[data-school=meeting] #school-back{bottom:70px}
}
@media(max-height:650px){
 body[data-school] #year{font-size:65px}
 #school-place{top:88px}
 body[data-school=meeting] #school-caption{top:117px;font-size:11px}
 body[data-school] #phone-launch{transform:rotate(8deg) scale(.56);bottom:-80px}
 body[data-school] #arrival-copy{font-size:17px;bottom:28%}
 body[data-school] #instruction{bottom:21%;font-size:10px}
 #school-caption{bottom:70px}#school-back{bottom:107px}
}