@font-face{font-family:"DynaPuff";src:url("assets/dynapuff-600.woff") format("woff");font-weight:100 600;font-display:swap}
@font-face{font-family:"DynaPuff";src:url("assets/dynapuff-700.woff") format("woff");font-weight:700 900;font-display:swap}
@font-face{font-family:"Comic Neue";src:url("assets/comic-neue-regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Comic Neue";src:url("assets/comic-neue-bold.woff") format("woff");font-weight:700 900;font-display:swap}
@font-face{font-family:SchoolPop;src:url("assets/school-pop.woff") format("woff");font-weight:100 900;font-display:swap}
:root{font-family:"DynaPuff",sans-serif;color:#263b42;background:#f3f0e8}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;border-radius:14px;background:#fff;color:#263b42;padding:12px 18px;font-weight:700;box-shadow:0 2px 0 #18342c12}button:hover{filter:brightness(.97)}button:focus-visible{outline:3px solid #f8b54d;outline-offset:3px}.hidden{display:none!important}#app{max-width:1280px;margin:auto;padding:18px 30px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.brand{color:#294f48;text-decoration:none;display:flex;gap:12px;font-size:30px;align-items:center}.brand span{font-size:23px;font-weight:900}.brand small{display:block;font-size:9px;letter-spacing:3px;margin-top:4px;color:#75877f}.stats{display:flex;gap:9px;align-items:center}.stats>span{font-weight:900;padding:10px 18px;border-radius:14px;background:#ffe8aa}.game{position:relative;border-radius:25px;overflow:hidden;box-shadow:0 15px 45px #23483c19;background:#c1e3f6}canvas{width:100%;display:block;touch-action:none;aspect-ratio:1100/650}.location{position:absolute;top:20px;left:22px;background:#fffffff0;border-radius:12px;padding:10px 15px;font-weight:900;font-size:14px}.mission{position:absolute;top:20px;right:22px;max-width:47%;background:#244f48;color:white;border-radius:15px;padding:12px 50px 12px 18px;pointer-events:none}.mission span{display:block;font-size:9px;letter-spacing:2px;color:#b8d6c0;margin-bottom:5px}.mission strong{font-size:14px}.mission button{pointer-events:auto;position:absolute;right:8px;top:9px;background:#ffffff18;padding:9px;box-shadow:none}.dialog{position:absolute;bottom:105px;left:50%;transform:translateX(-50%);width:76%;background:#fffdf5;border:3px solid white;border-radius:22px;padding:18px;display:flex;gap:17px;box-shadow:0 8px 25px #263f332b}.portrait{background:#e4efdf;display:grid;place-items:center;width:55px;height:55px;flex-shrink:0;border-radius:15px;font-size:30px}.dialog-copy{flex:1}.dialog small{font-weight:900;text-transform:uppercase;letter-spacing:2px;color:#6c8876;font-size:10px}.dialog p{font-size:19px;margin:7px 0 12px}.dialog #repeat{align-self:flex-start;padding:9px;background:#edf3e8}#answers{display:flex;gap:8px;flex-wrap:wrap}#answers button{background:#f0b94e;color:#3b402b;font-size:13px;padding:9px 14px}.controls{position:absolute;bottom:18px;left:22px;right:22px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.controls button{pointer-events:auto;background:#fffdf5e8}.dpad{display:grid;grid-template-columns:repeat(3,42px);gap:4px;pointer-events:auto}.dpad button{height:36px;padding:0;border-radius:10px;touch-action:none;user-select:none}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}#interact{background:#f9c45b;padding:16px 23px}#interact small{margin-left:10px;opacity:.5}footer{display:flex;justify-content:space-between;align-items:center;color:#7b8980;font-size:12px;margin-top:12px}footer button{background:none;box-shadow:none;font-size:12px;color:#376d5b}#toast{position:absolute;top:95px;left:50%;transform:translateX(-50%);background:#fff6ce;border-radius:14px;padding:12px 20px;opacity:0;transition:opacity .2s;font-weight:bold;max-width:80%;text-align:center}.overlay{position:fixed;inset:0;background:#18372db3;backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;z-index:10}.intro-card{width:min(880px,96vw);border-radius:30px;background:#fffdf5;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 25px 100px #122b3650}.intro-art{position:relative;min-height:520px;background:#e9e4d8}.intro-art img{width:100%;height:100%;object-fit:cover;display:block}.pill{position:absolute;bottom:20px;left:20px;right:20px;text-align:center;background:#fff8df;padding:11px;border-radius:20px;letter-spacing:1.5px;font-size:9px;font-weight:900}.intro-copy{padding:45px 35px}.intro-copy>small,.map-card small,.finish-card>small{font-size:10px;letter-spacing:2px;color:#718e76;font-weight:bold}h1{font-size:60px;line-height:1.03;letter-spacing:-3px;color:#275449;margin:20px 0}p{line-height:1.6;color:#687b72}.features{display:flex;gap:15px;font-size:12px;font-weight:bold;margin:25px 0}.primary{width:100%;background:#f2bd55;padding:17px;font-size:17px}.note{display:block;font-size:10px!important;letter-spacing:0!important;line-height:1.6;margin-top:20px}.text-btn{width:100%;background:none;box-shadow:none;font-size:12px;margin-top:8px}.map-card,.finish-card{background:#fffdf5;border-radius:25px;padding:30px;width:min(760px,94vw);max-height:90vh;overflow:auto}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{font-size:30px;margin:8px 0 20px}#rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}#rooms button{text-align:left;background:#edf1e5;min-height:75px;font-size:13px;border:2px solid transparent}#rooms button.current{border-color:#edae42;background:#fff0cb}#rooms button span{display:block;font-size:10px;margin-top:6px;color:#6d8175}.map-card p{font-size:12px}.finish-card{text-align:center;width:min(620px,94vw)}.finish-card h1{font-size:43px}#finalScore{font-size:34px;font-weight:bold;margin:20px;color:#b07d20}#badges{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.badge{background:#eaf1e5;border-radius:15px;padding:16px;font-size:13px}.badge span{display:block;font-size:25px;margin-bottom:7px}@media(max-width:700px){#app{padding:10px}header{margin-bottom:10px}.brand span{font-size:17px}.brand{font-size:23px}.stats button{padding:8px 11px}.stats>span{padding:8px 11px}.game{border-radius:17px}canvas{height:calc(100svh - 135px);min-height:340px;object-fit:contain;background:#c1e3f6;aspect-ratio:auto}.mission{top:10px;right:10px;max-width:62%;padding:9px 40px 9px 12px}.mission strong{font-size:11px}.mission span{font-size:8px}.location{top:10px;left:10px;font-size:11px;padding:9px}.dialog{width:94%;bottom:100px;padding:12px;gap:10px}.dialog p{font-size:15px}.portrait{width:40px;height:40px}.controls{left:12px;right:12px;bottom:12px}footer>span{font-size:9px;max-width:65%}.intro-card{grid-template-columns:.85fr 1fr}.intro-art{min-height:390px}.intro-copy{padding:25px 20px}h1{font-size:40px}.intro-copy p{font-size:12px}.features{gap:8px;font-size:10px}.pill{font-size:7px;left:8px;right:8px}.primary{font-size:14px}#rooms{grid-template-columns:1fr 1fr}}@media(max-height:500px){#app{padding:6px 16px}header{margin-bottom:5px}.brand small,footer{display:none}canvas{height:calc(100svh - 65px);min-height:0}.intro-art{min-height:300px}.intro-card{max-height:94vh}.intro-copy{padding:15px 25px}h1{font-size:38px;margin:10px 0}.intro-copy p{font-size:12px;margin:5px 0}.features{margin:12px 0}.note{margin-top:10px}.dialog{bottom:90px;padding:10px}.dialog p{margin:5px 0}.mission{top:10px}.location{top:10px}}

.joystick{display:none;width:112px;height:112px;border-radius:50%;position:relative;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;background:#fffcf04d;border:2px solid #fff8e1a8;box-shadow:inset 0 3px 15px #203b3420,0 3px 12px #263c341c;backdrop-filter:blur(4px)}.joystick-ring{position:absolute;inset:17px;border:1px solid #fffaf4aa;border-radius:50%;pointer-events:none}.stick{position:absolute;left:33px;top:33px;width:42px;height:42px;border-radius:50%;background:#fff9e3;border:2px solid white;box-shadow:0 4px 10px #294d3d30;pointer-events:none}.touch .joystick{display:block}.touch .dpad{display:none}.touch #interact small{display:none}.touch .controls{bottom:20px}.touch footer>span{font-size:0}.touch footer>span:after{content:'Drag the joystick to walk · Tap to explore';font-size:11px}.immersive #app{max-width:none;width:100%;height:100svh;padding:0;background:#c1e3f6;display:flex;flex-direction:column}.immersive header{height:48px;flex:0 0 48px;padding:6px max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left));margin:0;background:#fffdf3}.immersive .game{flex:1;border-radius:0;min-height:0;box-shadow:none}.immersive canvas{width:100%;height:100%;min-height:0;object-fit:contain;aspect-ratio:auto}.immersive footer{display:none}.immersive .controls{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}.immersive .brand small{display:none}.immersive .brand span{font-size:17px}.immersive .brand{font-size:22px}.immersive .stats button{padding:7px 11px}.immersive .stats>span{padding:7px 11px}.rotate{position:fixed;inset:48px 0 0;background:#214b45f5;z-index:8;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;color:#fff9df}.rotate>div{font-size:75px;line-height:1.2;margin-bottom:20px}.rotate strong{font-size:24px}.rotate p{color:#c1d6ca;font-size:14px;max-width:270px}.rotate button{margin-top:20px;background:#ffffff15;color:#fff5d4;box-shadow:none;font-size:12px}body.immersive{overflow:hidden;overscroll-behavior:none}@media(max-height:500px){.joystick{width:96px;height:96px}.stick{left:25px;top:25px}.touch .controls{bottom:12px}.touch #interact{padding:13px 20px}.immersive .dialog{bottom:100px}.immersive .location,.immersive .mission{top:8px}}

.mission{padding-right:18px}.dialog{border-radius:27px;background:#fffdf5;overflow:visible}.dialog:before{content:'';position:absolute;top:-16px;left:55px;width:27px;height:27px;background:#fffdf5;border-left:3px solid white;border-top:3px solid white;transform:rotate(45deg);border-radius:4px}.dialog .portrait{position:relative}.question{background:#eef3e7;border-radius:15px;padding:10px 14px;margin:0 0 13px}.question b{display:block;font-size:10px;letter-spacing:1px;color:#678270;margin-bottom:5px}.question span{display:block;font-size:15px;color:#435e50;line-height:1.4}.dialog p{font-size:20px;line-height:1.45;margin:8px 0 12px}@media(max-height:500px){.dialog{bottom:86px}.question{padding:7px 10px;margin-bottom:8px}.question span{font-size:13px}.dialog p{font-size:16px;margin:5px 0 8px}.dialog #answers button{padding:7px 12px}.immersive .dialog{bottom:86px}}@media(max-width:700px){.dialog p{font-size:16px}.question span{font-size:13px}}

@keyframes clue-arrival{0%,100%{box-shadow:0 0 0 0 #f3c25100}30%,65%{box-shadow:0 0 0 7px #f3c25188}}.mission.new-clue{animation:clue-arrival 1.2s ease 2}.mission strong{font-size:16px}@media(max-width:700px){.mission strong{font-size:13px}}

.dialog p strong{font-weight:900;color:#244d41;background:#e6eed8;padding:1px 4px;border-radius:5px}#interact[data-action="enter"]{background:#d5e9b5;color:#31573c}#interact[data-action="exit"]{background:#e3e9df;color:#3d5849}

#interact[hidden]{display:none!important}#interact{max-width:min(320px,48vw);line-height:1.3}#interact[data-action="task"]{background:#f9c45b}

.dialog.cloud{position:absolute;display:block;width:clamp(180px,34vw,315px);max-width:calc(100% - 24px);padding:18px 21px 16px;border:1px solid #ffffffb0;border-radius:43% 39% 40% 36% / 30% 34% 28% 35%;background:#fffdf0c7;backdrop-filter:blur(2px);box-shadow:0 5px 17px #31564416;transform:translateX(-50%);bottom:auto;cursor:pointer;z-index:3;animation:cloud-appear .2s ease;isolation:isolate}.dialog.cloud:before{content:'';position:absolute;top:auto;bottom:-14px;left:var(--tail-left,50%);width:16px;height:16px;border:0;border-radius:50%;background:#fffdf0b8;transform:none;box-shadow:-10px 15px 0 -4px #fffdf0a0}.dialog.cloud small{display:block;text-align:center;font-size:10px;letter-spacing:.7px;font-weight:800;color:#567569}.dialog.cloud p{text-align:center;font-size:17px;line-height:1.45;margin:8px 0 0;color:#294d41}.dialog.cloud[data-speaker="goktug"]{background:#edf8e0c9}.dialog.cloud[data-speaker="goktug"]:before{background:#edf8e0b8;box-shadow:-10px 15px 0 -4px #edf8e0a0}.dialog.cloud p strong{font-weight:900;background:transparent;color:#183e30;padding:0}.immersive .dialog.cloud{bottom:auto}@keyframes cloud-appear{from{opacity:0;scale:.95}to{opacity:1;scale:1}}@media(max-width:700px){.dialog.cloud{width:230px;padding:14px 18px}.dialog.cloud p{font-size:15px}.dialog.cloud small{font-size:9px}}@media(max-height:500px){.dialog.cloud{width:265px;padding:12px 18px}.dialog.cloud p{font-size:15px}}

/* Sky scenery also fills the space around the canvas on tall phones. */
.game,canvas,.immersive canvas{background:#c1e3f6 url("assets/sky-neighborhood.svg") center center / 100% 100% no-repeat}

/* Fill the visible browser viewport; render and hit testing share a camera. */
body.immersive{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden}
.immersive #app{position:fixed;inset:0;width:100%;height:100dvh;display:block;padding:0}
.immersive .game{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.immersive canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;min-height:0;aspect-ratio:auto;background:#c1e3f6}
.immersive header{position:absolute;top:0;left:0;right:0;z-index:5;height:48px;background:#fffdf3eb;backdrop-filter:blur(8px)}
.immersive .location,.immersive .mission{top:calc(58px + env(safe-area-inset-top))}
.immersive #toast{top:112px}
.immersive .controls{z-index:4}
.immersive .rotate{inset:0;z-index:8}
@media(max-width:500px){.immersive .mission{max-width:67%}.immersive .mission strong{font-size:12px}}

.brand span,.mission strong,.location,#interact,.dialog.cloud p{font-family:"DynaPuff",sans-serif;letter-spacing:.25px}.dialog.cloud small,.mission span{letter-spacing:1px}.brand span{color:#335c70;text-shadow:1px 2px 0 #e9d9ac}.dialog.cloud{border-radius:35px 42px 30px 40px}.mission{box-shadow:0 4px 0 #193a3330}

/* Compact speech clouds keep the speaker and nearby tasks visible. */
.dialog.cloud{width:clamp(155px,27vw,250px);padding:12px 15px 11px;border-radius:27px 32px 25px 30px}.dialog.cloud p{font-size:16px;line-height:1.3;margin:5px 0 0;font-weight:400;letter-spacing:0}.dialog.cloud small{font-size:9px;letter-spacing:.2px}.dialog.cloud p strong{font-weight:900;color:#173c30}@media(max-width:700px){.dialog.cloud{width:195px;padding:10px 13px}.dialog.cloud p{font-size:14px}}@media(max-height:500px){.dialog.cloud{width:220px;padding:9px 13px}.dialog.cloud p{font-size:14px}}

:root{font-weight:700}.dialog.cloud p{font-weight:700;font-size:17px;color:#203c35;line-height:1.28}.dialog.cloud small{font-size:11px;font-weight:800;letter-spacing:0;text-transform:none;color:#334d43}.dialog.cloud p strong{font-weight:800;background:#ffe6a280;padding:0 3px;border-radius:4px;color:#123c2b}.dialog.cloud{background:#fffdf0ee}.dialog.cloud[data-speaker="goktug"]{background:#edf8e0ed}@media(max-width:700px),(max-height:500px){.dialog.cloud p{font-size:15px}.dialog.cloud small{font-size:10px}}

@media(max-width:700px){.game .location{max-width:calc(100% - 24px);font-size:13px}.game .mission{top:58px;max-width:calc(100% - 24px);padding:9px 13px}.game .mission strong{font-size:13px}.game .mission span{font-size:9px}}

/* Door actions appear beside the approached door only. */
.game>#interact{position:absolute;right:22px;bottom:20px;z-index:4;max-width:min(320px,48vw)}
.game>#interact.door-action{right:auto;bottom:auto;transform:translateX(-50%);background:#fff;color:#000;padding:10px 20px;box-shadow:0 3px 0 #00000018}
#interact[data-action="enter"],#interact[data-action="exit"]{background:#fff;color:#000}

/* A rubbish pickup label belongs to the nearby object. */
.game>#interact.object-action{right:auto;bottom:auto;transform:translateX(-50%);background:#fff;color:#000;padding:9px 14px;font-size:15px;min-height:44px;max-width:min(200px,calc(100% - 24px));box-shadow:0 3px 0 #00000018;border:1px solid #d8e0d3}

/* Rounded cloud silhouette, with room for the dialogue in its centre. */
.dialog.cloud{--cloud-fill:#fffdf0ee;border:0;background:none!important;box-shadow:none;border-radius:0;backdrop-filter:none;padding:15px 19px 13px;isolation:isolate}
.dialog.cloud[data-speaker="goktug"]{--cloud-fill:#edf8e0ed}
.dialog.cloud:after{content:'';position:absolute;inset:-17px -15px -14px;z-index:-1;background:var(--cloud-fill);-webkit-mask:url("assets/speech-cloud.svg") center/100% 100% no-repeat;mask:url("assets/speech-cloud.svg") center/100% 100% no-repeat;filter:drop-shadow(0 4px 3px #31564420);pointer-events:none}
.dialog.cloud:before,.dialog.cloud[data-speaker="goktug"]:before{background:var(--cloud-fill);box-shadow:-10px 15px 0 -4px var(--cloud-fill);z-index:-1}
@media(max-width:700px),(max-height:500px){.dialog.cloud{padding:12px 16px 11px}}

/* Every interaction follows its object, never the bottom control bar. */
.game>#interact,.game>#interact.door-action,.game>#interact.object-action{right:auto;bottom:auto;transform:translateX(-50%);font-family:"DynaPuff",sans-serif;font-weight:800;font-size:19px;line-height:1.15;letter-spacing:.15px;min-height:44px;max-width:min(260px,calc(100% - 24px));padding:11px 18px;border-radius:23px 19px 24px 18px;border:2px solid #e8c768;background:#fff9df;color:#243d42;box-shadow:0 4px 0 #b4913540}
.game>#interact small{display:none}
.game>#interact.outdoor-exit{background:transparent;border:0;box-shadow:none;color:#243d42;padding:10px 18px;text-shadow:0 1px 2px #ffffffd0;font-size:23px}

/* Bright game chrome complements the richer scene palette. */
:root{background:#fff5da}.game,.immersive #app,.immersive canvas{background:#42b9f3}
.immersive header{background:#fff8e0}.brand{color:#126ca5}.stats>span{background:#ffdc52;color:#243b49}
.mission{background:#086d64;color:#fff}.mission span{color:#d5ffe9}
.game>#interact,.game>#interact.door-action,.game>#interact.object-action{background:#ffe573;border-color:#f3b626;color:#243d42}
.game>#interact.outdoor-exit{background:transparent;border:0}
.primary,#answers button{background:#ffc43b}.intro-art{background:#45b9ef}.badge{background:#b9ed95}
#rooms button{background:#b5e8f7}#rooms button.current{background:#ffe16b;border-color:#ee9b15}
.dialog.cloud{--cloud-fill:#fffbe9f5}.dialog.cloud[data-speaker="goktug"]{--cloud-fill:#d3fbaef2}

.stats>#keyCount{background:#ffce3c;min-width:56px;white-space:nowrap}
@keyframes key-break{0%,100%{transform:rotate(0);background:#ffce3c}25%,75%{transform:rotate(-8deg);background:#ff7557}50%{transform:rotate(8deg);background:#ff7557}}
#keyCount.key-broken{animation:key-break .65s ease}
@media(max-width:600px){.immersive header{height:78px;flex-basis:78px;flex-wrap:wrap;gap:2px;padding-top:4px;padding-bottom:4px}.immersive .brand{font-size:18px}.immersive .brand span{font-size:16px}.immersive .stats{margin-left:auto;gap:5px;flex-wrap:wrap;justify-content:flex-end}.immersive .stats button,.immersive .stats>span{padding:5px 9px;font-size:15px}.rotate{top:78px}}

body.immersive,.immersive .game{touch-action:none;overscroll-behavior:none}
@media(max-width:600px){.immersive .location{top:88px}.immersive .mission{top:136px}.immersive #toast{top:210px}}

.intro-art{background:#42b9f3;overflow:hidden}.intro-art #introWorld{position:absolute;inset:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:contain;background:#42b9f3;pointer-events:none}.intro-art .pill{z-index:1;background:#fff4bf;color:#245646}

/* Chunky rounded cartoon lettering, embedded with Turkish glyphs. */
:root{font-family:"DynaPuff",sans-serif;font-weight:600;color:#111}
body,button,a,h1,h2,p,small,.brand,.brand span,.brand small,.stats,.location,.mission,.mission span,.mission strong,.dialog.cloud small,.dialog.cloud p,.dialog.cloud strong,#interact,#toast,.intro-copy p,.note,.pill,.badge,.badge span,#rooms button,#rooms button span,.rotate,.rotate p,.rotate button,footer{font-family:"DynaPuff",sans-serif;color:#111;text-shadow:none}
.dialog.cloud p{font-weight:600;line-height:1.6}.dialog.cloud strong{font-weight:700}.brand span,.location,#interact,.mission strong{font-weight:700}
.mission{background:#ffe168}.mission span{color:#111;letter-spacing:.7px}.rotate{background:#ffdc66f5}.rotate button{background:#fff9d8}.dialog.cloud small{letter-spacing:.5px}.brand small{letter-spacing:1px}.intro-art .pill{color:#111}

.game>#interact.talk-action{width:46px;min-width:46px;min-height:36px;height:36px;padding:0 0 5px;line-height:1;font-size:26px;background:#fffdf3;border:2px solid #5b3822;border-radius:50%;box-shadow:0 3px 0 #36201524;color:#111}
.game>#interact.talk-action:after{content:"";position:absolute;bottom:-6px;left:9px;width:9px;height:9px;background:#fffdf3;border-left:2px solid #5b3822;border-bottom:2px solid #5b3822;transform:skewY(-28deg);border-radius:0 0 0 3px}

/* The school name stays visible; the game tools sit along the bottom. */
.school-title{position:absolute;z-index:3;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:9px 17px;background:#fff5c7ed;border:2px solid #674328;border-radius:15px;font-size:clamp(20px,3.8vw,34px);font-weight:700;line-height:1.2;text-align:center;color:#111;pointer-events:none}
.game:not([data-scene="school"]) .school-title{display:none}
.immersive header{top:auto;bottom:0;height:calc(64px + env(safe-area-inset-bottom));padding:6px max(12px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));flex-wrap:nowrap;border-top:2px solid #e0b74e;background:#fff7d9f2}
.immersive .stats{margin-left:auto;gap:7px;flex-wrap:nowrap;align-items:center}.immersive .stats>span,.immersive .stats button{font-size:16px;padding:8px 11px}.immersive .brand span{font-size:17px}
.immersive .location{top:calc(80px + env(safe-area-inset-top))}.immersive .mission{top:calc(80px + env(safe-area-inset-top))}.immersive #toast{top:calc(170px + env(safe-area-inset-top))}
.immersive .controls,.touch.immersive .controls{bottom:calc(84px + env(safe-area-inset-bottom))}
.stats .clue-button,.immersive .stats .clue-button{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#ffb83c;padding:1px 7px 3px;border:2px solid #111;box-shadow:3px 3px 0 #ff6e55;min-width:45px;gap:0;position:relative;overflow:visible}
.clue-button svg{width:34px;height:34px;filter:drop-shadow(0 0 5px #ffd600);animation:bulb-pop 1.4s ease-in-out infinite}.clue-button span{font-size:9px;font-weight:700;line-height:1.1;color:#111}.bulb-rays{animation:bulb-rays .7s ease-in-out infinite alternate;transform-origin:32px 32px}
@keyframes bulb-pop{0%,100%{transform:rotate(-7deg) scale(.94)}50%{transform:rotate(7deg) scale(1.08);filter:drop-shadow(0 0 10px #ffc600)}}@keyframes bulb-rays{from{opacity:.45;transform:scale(.9)}to{opacity:1;transform:scale(1.08)}}
.clue-card{position:absolute;z-index:6;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:max-content;max-width:min(300px,calc(100% - 24px));min-height:76px;padding:7px 14px 7px 7px;border:3px solid #111;border-radius:20px;background:#fff1ad;box-shadow:4px 4px 0 #ff8354;pointer-events:none}
.clue-card canvas{position:static!important;width:64px!important;height:64px!important;min-height:0!important;aspect-ratio:1!important;background:transparent!important;flex:0 0 64px}.clue-card strong{font-family:"DynaPuff",sans-serif;font-size:17px;line-height:1.35;max-width:180px;color:#111}
@media(max-width:700px){.immersive .brand{display:none}.immersive .stats{margin:0 auto;gap:5px}.immersive .stats>span,.immersive .stats button{padding:7px 8px;font-size:15px}.immersive .stats>#keyCount{min-width:48px}.immersive .location{top:76px}.immersive .mission{top:126px}.immersive #toast{top:200px}.school-title{font-size:20px;padding:9px 12px}}
@media(max-height:500px){.immersive .location,.immersive .mission{top:65px}.school-title{top:6px;font-size:22px;padding:6px 12px}.immersive .controls,.touch.immersive .controls{bottom:78px}.immersive header{height:60px}.clue-card strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.clue-button svg,.bulb-rays{animation:none}}

/* Silent, full-screen victory party. */
#finish{background:radial-gradient(ellipse at 50% 35%,#2468cde8,#082259f5);overflow:hidden;padding:12px}
#finishEffects{position:absolute;inset:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;pointer-events:none;background:transparent}
#finish .finish-card{position:relative;z-index:1;width:min(920px,96vw);max-height:92svh;border:4px solid #ffd936;background:#fff8e8ed;box-shadow:0 0 45px #ffdf6240;padding:24px 20px}
#finish .congratulations{font-family:"DynaPuff",sans-serif;font-weight:700;font-size:clamp(23px,6.1vw,72px);letter-spacing:-1px;line-height:1.15;color:#ffc928;-webkit-text-stroke:1px #913f18;text-shadow:2px 3px 0 #d54a61;margin:8px 0 18px;white-space:nowrap}
#finish h2{font-size:clamp(21px,3.5vw,34px);margin:8px 0;color:#111}#finish .finish-card>p{margin:6px 0;font-size:14px;color:#111}
#finish .badge{background:#ffdc76;color:#111}#finish .primary{background:#ffb937;color:#111}
@media(max-width:700px){#finish .finish-card{padding:22px 9px}#finish .congratulations{font-size:clamp(20px,6vw,40px);letter-spacing:-.5px}#finish #badges{gap:7px}#finish .badge{padding:11px;font-size:11px}#finish #finalScore{margin:14px;font-size:28px}}
@media(max-height:500px){#finish .finish-card{padding:12px 20px}#finish .congratulations{font-size:clamp(24px,5.8vw,48px);margin:4px 0 8px}#finish #badges{margin:10px 0}#finish .badge{padding:8px}#finish #finalScore{margin:10px}}

/* The school HUD has its own strip; it never covers a door in the world. */
.immersive .game[data-scene="school"]{--school-hud-height:142px;--school-status-top:88px}
.immersive .game[data-scene="school"] #world{top:calc(var(--school-hud-height) + env(safe-area-inset-top));bottom:0;height:calc(100% - var(--school-hud-height) - env(safe-area-inset-top))}
.immersive .game[data-scene="school"] .location{top:calc(var(--school-status-top) + env(safe-area-inset-top));left:12px;padding:7px 10px;font-size:12px}
.immersive .game[data-scene="school"] .mission{top:calc(var(--school-status-top) + env(safe-area-inset-top));right:12px;max-width:calc(100% - 116px);padding:6px 10px;border-radius:12px}
.immersive .game[data-scene="school"] .mission span{font-size:9px;line-height:1.2;letter-spacing:.3px;margin-bottom:3px}
.immersive .game[data-scene="school"] .mission strong{font-size:14px;line-height:1.3;display:block}
@media(max-width:700px){.immersive .game[data-scene="school"]{--school-hud-height:112px;--school-status-top:64px}.immersive .game[data-scene="school"] .mission span{font-size:8px}.immersive .game[data-scene="school"] .mission strong{font-size:12px}}
@media(max-height:500px){.immersive .game[data-scene="school"]{--school-hud-height:98px;--school-status-top:52px}.immersive .game[data-scene="school"] .mission span{font-size:8px}.immersive .game[data-scene="school"] .mission strong{font-size:12px}}

/* One centered welcome scene and two compact, recognizable actions. */
#intro{background:linear-gradient(150deg,#31b7ffef,#1869e6f5);padding:16px;overflow:auto}
#intro .intro-card{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(560px,96vw);max-height:calc(100svh - 32px);overflow:auto;padding:24px 22px 18px;background:#fff6d9;border:3px solid #ffdb57;text-align:center}
#intro h1{font-size:clamp(29px,6.5vw,54px);letter-spacing:-1.5px;line-height:1.15;margin:0;color:#111;flex-shrink:0}
#intro .intro-art{width:auto;max-width:100%;height:min(46svh,380px);min-height:0;aspect-ratio:520/470;flex-shrink:0;overflow:hidden;border-radius:24px;background:#36b7f4}
#intro #introWorld{position:static;display:block;width:100%;height:100%;min-height:0;aspect-ratio:520/470;background:transparent}
#intro .intro-actions{display:flex;align-items:flex-start;justify-content:center;gap:30px;flex-shrink:0}
#intro .intro-choice{display:flex;flex-direction:column;align-items:center;gap:8px}#intro .intro-choice:has(button.hidden){display:none}
#intro .intro-icon{display:grid;place-items:center;width:76px;height:76px;padding:16px;border-radius:50%;background:#ffc833;color:#38250e;box-shadow:0 5px 0 #c98418;margin:0}
#intro #new{background:#fff;border:2px solid #68bbed;box-shadow:0 5px 0 #68bbed}
#intro .intro-icon svg{width:38px;height:38px}.resume-mark{display:none}#intro #start[data-mode="continue"] .resume-mark{display:block}
#intro .intro-choice small{font-size:12px;font-weight:700}#intro .intro-tagline{margin:0;font-size:12px;color:#111;flex-shrink:0}
@media(max-height:700px){#intro .intro-card{gap:10px;padding:16px}#intro .intro-art{width:auto;height:min(45svh,330px)}#intro .intro-icon{width:62px;height:62px;padding:12px}}
@media(max-height:500px){#intro{padding:8px}#intro .intro-card{max-height:calc(100svh - 16px);gap:8px;padding:12px}#intro h1{font-size:30px}#intro .intro-art{height:calc(100svh - 178px);width:auto;flex-shrink:0}#intro .intro-icon{width:48px;height:48px;padding:10px}#intro .intro-icon svg{width:28px;height:28px}#intro .intro-actions{gap:26px}#intro .intro-choice{gap:5px}#intro .intro-tagline{font-size:10px}}

/* Keep the school name prominent on both the welcome and school screens. */
#intro .intro-school-name{flex-shrink:0;width:100%;padding:10px 12px;border:3px solid #603b20;border-radius:18px;background:#ffe76c;color:#111;font-size:clamp(21px,4.8vw,32px);font-weight:700;line-height:1.2;text-align:center;box-shadow:0 4px 0 #c4842b}
#intro .intro-art{height:min(40svh,340px)}
.school-title{font-size:clamp(23px,4.2vw,38px);font-weight:700}
@media(max-width:700px){.school-title{font-size:clamp(22px,4vw,28px);padding:9px 12px}}
@media(max-height:700px){#intro .intro-art{height:min(38svh,300px)}}
@media(max-height:500px){#intro .intro-school-name{font-size:20px;padding:6px 10px}#intro .intro-art{height:calc(100svh - 224px)}.school-title{font-size:22px;padding:6px 12px}}

.key-break-effect{position:fixed;left:50%;top:46%;width:min(66vw,330px);z-index:100;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 8px #53360055)}
.key-break-effect:not(.hidden){animation:key-grow 1.5s ease-in-out both}
.key-break-effect svg{display:block;width:100%;overflow:visible}
.key-break-effect:not(.hidden) .key-left{transform-origin:115px 80px;animation:key-snap-left 1.5s ease both}
.key-break-effect:not(.hidden) .key-right{transform-origin:125px 80px;animation:key-snap-right 1.5s ease both}
.key-break-effect:not(.hidden) .key-sparks{animation:key-sparks 1.5s ease both}
@keyframes key-grow{0%{transform:translate(-50%,-50%) scale(.12);opacity:0}18%{opacity:1}42%,72%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-40%) scale(1.08);opacity:0}}
@keyframes key-snap-left{0%,42%{transform:translate(0,0) rotate(0)}64%,100%{transform:translate(-18px,12px) rotate(-22deg)}}
@keyframes key-snap-right{0%,42%{transform:translate(0,0) rotate(0)}64%,100%{transform:translate(22px,18px) rotate(25deg)}}
@keyframes key-sparks{0%,40%{opacity:0}49%{opacity:1}72%,100%{opacity:0}}

.finish-fireworks{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:110}
.finish-spark{position:absolute;left:var(--x);top:var(--y);width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);animation:finish-firework-pop .9s cubic-bezier(.12,.72,.24,1) var(--delay) both}
@keyframes finish-firework-pop{0%{transform:translate(0,0) scale(.15);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.15);opacity:0}}
@media(prefers-reduced-motion:reduce){.finish-spark{animation-duration:.01ms}}

.game .mission,.immersive .game .mission,.immersive .game[data-scene="school"] .mission{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:min(480px,80%);text-align:center;padding:10px 16px}
.bonus-timer{display:none;position:absolute;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:4;align-items:center;justify-content:center;gap:8px;width:150px;height:88px;border:5px solid #f7ae13;border-radius:28px;background:linear-gradient(#fffbd5,#ffe14a);box-shadow:0 6px 0 #b96f0b,0 10px 18px #54340930;color:#111;pointer-events:none}
.game[data-scene="tidy"] .bonus-timer{display:flex}
.bonus-timer:before,.bonus-timer:after{content:"";position:absolute;top:-11px;width:25px;height:13px;border-radius:12px;background:#ffb82d;border:2px solid #a76817}.bonus-timer:before{left:8px;transform:rotate(-25deg)}.bonus-timer:after{right:8px;transform:rotate(25deg)}
.bonus-timer strong{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}.timer-bell{font-size:25px;animation:clock-wiggle 2s ease-in-out infinite}.bonus-timer.urgent{border-color:#ee263e;box-shadow:0 6px 0 #a71529,0 0 18px #ff304780;animation:timer-alert .5s ease-in-out infinite alternate}.bonus-timer.urgent:before,.bonus-timer.urgent:after{background:#ff5b59;border-color:#d1283d}.timer-tick{animation:timer-pop .25s ease-out}
.game[data-scene="tidy"] .mission,.immersive .game[data-scene="tidy"] .mission{top:calc(116px + env(safe-area-inset-top));max-width:88%}.game[data-scene="tidy"] .location,.immersive .game[data-scene="tidy"] .location{top:calc(207px + env(safe-area-inset-top));font-size:11px;padding:7px 10px}
@keyframes clock-wiggle{0%,85%,100%{transform:rotate(0)}90%{transform:rotate(-12deg)}95%{transform:rotate(12deg)}}@keyframes timer-pop{0%{transform:scale(1.15)}100%{transform:scale(1)}}@keyframes timer-alert{to{filter:brightness(1.15);border-color:#ff6571}}
@media(max-height:500px){.bonus-timer{width:132px;height:62px;top:8px;border-radius:22px}.bonus-timer strong{font-size:25px}.game[data-scene="tidy"] .mission,.immersive .game[data-scene="tidy"] .mission{top:82px;padding:7px 12px}.game[data-scene="tidy"] .location,.immersive .game[data-scene="tidy"] .location{top:150px}}
@media(prefers-reduced-motion:reduce){.bonus-timer,.timer-bell,.timer-tick{animation:none!important}}

/* A round, close-up family embrace on the welcome screen. */
#intro .intro-art{aspect-ratio:1;width:auto;max-width:100%;border-radius:50%;border:9px solid #ffd43d;box-shadow:0 0 0 4px #784b2d,0 8px 0 #d38b24;overflow:hidden}
#intro #introWorld{aspect-ratio:1;border-radius:50%}

.stats>#flowerCount{background:#ffc9e1;color:#4a2541;white-space:nowrap}.flower-tip{font-size:12px;color:#723b57;margin:0;flex-shrink:0}
@media(max-width:600px){.immersive .stats{gap:4px}.immersive .stats button,.immersive .stats>span{padding:5px 7px;font-size:13px}}

/* Classroom boards and desktop monitors share the same game, with larger controls and text. */
.keyboard-help{display:none;position:absolute;bottom:105px;left:24px;z-index:3;max-width:calc(100% - 48px);background:#fff4caee;border:2px solid #e8b342;border-radius:16px;padding:9px 14px;font-size:12px;pointer-events:none}
.wide-screen:not(.touch) .keyboard-help{display:block}.touch .keyboard-help{display:none}.wide-screen .dpad{display:none}
.wide-screen .dialog.cloud{width:clamp(300px,24vw,460px);padding:20px 25px}.wide-screen .dialog.cloud p{font-size:clamp(20px,1.55vw,30px);line-height:1.45}.wide-screen .dialog.cloud small{font-size:clamp(13px,1vw,19px)}
.wide-screen .location{font-size:clamp(17px,1.35vw,25px);padding:12px 18px}.wide-screen .mission strong{font-size:clamp(19px,1.4vw,28px)}.wide-screen .mission span{font-size:clamp(11px,.85vw,16px)}.wide-screen .game .mission{max-width:min(660px,65%);padding:14px 22px}
.wide-screen .school-title{font-size:clamp(30px,2.5vw,48px)}.wide-screen.immersive header{height:82px;padding:10px 24px;gap:18px}.wide-screen.immersive .stats{gap:12px}.wide-screen.immersive .stats>span,.wide-screen.immersive .stats button{min-height:52px;font-size:clamp(19px,1.4vw,27px);padding:10px 17px}.wide-screen .clue-button svg{width:43px;height:43px}.wide-screen .clue-button span{font-size:12px}
.wide-screen.touch .joystick{width:160px;height:160px}.wide-screen.touch .stick{width:62px;height:62px;left:calc(50% - 31px);top:calc(50% - 31px)}.wide-screen.touch .joystick-ring{inset:24px}.wide-screen.immersive .controls{bottom:108px;left:30px;right:30px}
.wide-screen .game>#interact{min-height:58px;font-size:clamp(21px,1.6vw,30px);padding:14px 22px;max-width:min(390px,calc(100% - 28px))}.wide-screen .game>#interact.talk-action{width:62px;min-width:62px;height:52px;min-height:52px;font-size:34px;padding:0 0 5px}
.wide-screen #toast{font-size:clamp(17px,1.3vw,24px)}.wide-screen .clue-card{max-width:390px}.wide-screen .clue-card strong{font-size:23px;max-width:250px}.wide-screen .clue-card canvas{width:80px!important;height:80px!important;flex-basis:80px}
.wide-screen #intro .intro-card{width:min(730px,94vw);gap:18px}.wide-screen #intro .intro-art{height:min(42svh,440px)}.wide-screen #intro .intro-icon{width:90px;height:90px}.wide-screen #intro .intro-choice small,.wide-screen .flower-tip{font-size:16px}
.wide-screen .map-card{width:min(980px,90vw)}.wide-screen #rooms button{min-height:100px;font-size:21px;padding:20px}.wide-screen #rooms button span{font-size:15px}.wide-screen .finish-card{width:min(860px,90vw)}
.wide-screen .game[data-scene="tidy"] .mission{top:126px}.wide-screen .game[data-scene="tidy"] .location{top:20px}.wide-screen .bonus-timer{width:180px;height:96px}.wide-screen #bonusTime{font-size:36px}

/* Golden cloud highlights follow only the final clue and joyful reply. */
.dialog.cloud[data-glow="gold"]{--cloud-fill:#fff2a7;animation:cloud-appear .2s ease,clue-glow 1.15s ease-in-out infinite}
@keyframes clue-glow{0%,100%{filter:drop-shadow(0 0 5px #ffba27) drop-shadow(0 0 10px #ffd95580)}50%{filter:drop-shadow(0 0 10px #ffbe22) drop-shadow(0 0 21px #ffe35bbf)}}
@media(prefers-reduced-motion:reduce){.dialog.cloud[data-glow="gold"]{animation:none;filter:drop-shadow(0 0 9px #ffc42e)}}

/* Compact task strip on landscape phones and short fullscreen viewports. */
@media(orientation:landscape) and (max-height:600px){
 .game .mission,.immersive .game .mission,.immersive .game[data-scene="school"] .mission,.wide-screen .game .mission{max-width:min(340px,48%);padding:5px 10px;border-radius:11px;box-shadow:0 2px 0 #193a3325}
 .game .mission span,.immersive .game .mission span,.wide-screen .game .mission span{font-size:8px;line-height:1.1;letter-spacing:.2px;margin-bottom:2px}
 .game .mission strong,.immersive .game .mission strong,.wide-screen .game .mission strong{font-size:12px;line-height:1.25;display:block}
 .game[data-scene="tidy"] .mission,.immersive .game[data-scene="tidy"] .mission{top:76px;max-width:min(330px,48%);padding:5px 10px}
}

.finish-card .finish-credit{margin:18px 0 0;font-size:11px;font-weight:400;line-height:1.6;text-align:center;color:#655b49;letter-spacing:0}

.mom-board{border:3px solid #ffd13c;border-radius:24px;padding:24px;background:#fff9e6;color:#263b42;width:min(560px,94vw);max-height:86dvh;overflow:auto;font-family:"DynaPuff",sans-serif}.mom-board::backdrop{background:#18372d99;backdrop-filter:blur(5px)}.mom-board h2{margin:0 35px 15px 0;font-size:23px}.mom-board p{font-size:12px;line-height:1.5}.mom-board-close{position:absolute;right:12px;top:12px;padding:5px 12px;font-size:24px}#momRankings{padding:0;list-style:none}.mom-ranking{display:grid;grid-template-columns:35px 1fr auto;gap:8px;padding:13px 10px;border-bottom:1px solid #e3d9b9;align-items:center}.mom-ranking strong,.mom-ranking b{font-size:14px}.mom-ranking small{grid-column:2/4;font-size:10px;color:#5c735f}.mom-ranking-me{background:#fff0a4;border-radius:12px}.mom-board-controls{display:flex;justify-content:center;gap:12px}.mom-board button:disabled{opacity:.4;cursor:default}.mom-save-status{font-size:12px;margin:8px 0}.mom-board-finish{font-size:13px;background:#fff0ac;margin:5px 0 15px}