@font-face{font-family:Baloo;src:url('../../../kit/fonts/baloo2-pilot.ttf');font-weight:700;font-display:swap}@font-face{font-family:Nunito;src:url('../../../kit/fonts/nunito-pilot.ttf');font-weight:700;font-display:swap}
*{box-sizing:border-box}body{margin:0;color:#172343;background:#223965 url('classroom.webp') center/cover fixed;font:700 18px/1.2 Nunito,system-ui,sans-serif}body:before{content:'';position:fixed;inset:0;background:#17234355;z-index:-1}header{height:48px;padding:0 20px;background:#f9bd33;display:flex;align-items:center;justify-content:space-between}header a{min-height:48px;display:flex;align-items:center;text-decoration:none;color:#172343;font:700 24px Baloo}header span{font-size:14px}main{height:calc(100svh - 48px);min-height:592px;position:relative;isolation:isolate;overflow:hidden}.title{background:#172343;color:white;text-align:center;padding:10px}.title p{font-size:13px;margin:0 0 4px}.title h1{font:700 40px/1.1 Baloo;margin:0}.bubble{position:absolute;top:108px;left:5%;width:36%;background:#ffda44;border:3px solid #172343;border-radius:24px;padding:14px 18px;z-index:3}.bubble p{margin:0}#instruction{margin-top:6px;font-size:16px}#sammy{position:absolute;left:4%;bottom:30px;height:57vh;width:auto;max-height:520px;filter:drop-shadow(0 7px 4px #17234366);transition:transform .25s;z-index:2}.happy #sammy{transform:rotate(5deg)}.thinking #sammy{transform:rotate(-5deg)}button,a{touch-action:manipulation}button{cursor:pointer;font:700 20px/1.1 Baloo;color:#172343;min-height:48px;min-width:48px}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:4px solid white;box-shadow:0 0 0 7px #172343;outline-offset:2px}#monitor{position:absolute;top:115px;right:12%;width:160px;height:140px;padding:0;border:0;background:none;z-index:4}#monitor img{width:100%;height:100%;object-fit:contain}#monitor span{position:absolute;left:15%;right:15%;top:45%;background:#b6f2e5;border-radius:8px;font-size:18px;padding:5px}#monitor[aria-pressed=true]{filter:drop-shadow(0 0 7px #b6f2e5)}#room{position:absolute;top:235px;right:4%;width:63%;aspect-ratio:1717/916}.room-art{width:100%;height:100%;filter:drop-shadow(0 6px 4px #17234355)}.zone{position:absolute;top:59%;width:46%;height:36%;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:50%}.zone:first-child{left:2%}.zone:last-child{right:2%}.zone img{object-fit:contain;width:65px;height:60px}.zone span{padding:5px 12px;background:#b6f2e5;border-radius:14px}.zone:last-child span{background:#ff9473}.zone.over{outline:5px dashed #172343;outline-offset:-8px;background:#ffffff44}.zone:disabled{filter:saturate(.6)}#activity{position:absolute;bottom:72px;right:4%;width:63%;z-index:4}#progress{margin:0 0 5px;text-align:center;background:#172343;color:white;border-radius:12px;font-size:14px;width:66px;padding:4px}#events{display:flex;justify-content:space-between;gap:14px}.event{position:relative;width:31%;min-height:120px;border:0;background:none;padding:0;touch-action:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}.event img{width:100px;height:70px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 3px #17234355)}.event span{background:#fff4d6;border:2px solid #172343;border-radius:12px;padding:5px 8px;font:700 17px/1.15 Nunito}.event[aria-pressed=true] span{background:#ffda44;border-width:4px;padding:3px 6px}.event:disabled{opacity:.6}.event.sorted img{opacity:.4}.event.sorted span{background:#b6f2e5}.drag-ghost{position:fixed;width:90px;height:75px;object-fit:contain;pointer-events:none;z-index:20;filter:drop-shadow(0 10px 5px #17234388)}#feedback{position:absolute;bottom:8px;right:4%;width:63%;min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center;padding:7px 12px;margin:0;border-radius:16px;background:#172343;color:white;font-size:16px;z-index:5}#ending{position:absolute;right:6%;top:35%;width:51%;z-index:6;text-align:center;border:4px solid #172343;border-radius:28px;background:#ffda44;padding:24px}#ending h2{font:700 35px/1.1 Baloo;margin:8px 0}#ending p{margin:10px 0 20px}.actions{display:flex;justify-content:center;gap:16px}.actions button,.actions a{border:3px solid #172343;border-radius:16px;padding:10px;background:#b6f2e5;font:700 22px/1.1 Baloo;min-height:54px;color:#172343;display:flex;align-items:center;justify-content:center;text-decoration:none}[hidden]{display:none!important}
@media(max-width:600px){header{padding:0 12px}header a{font-size:21px}.title{height:76px;padding:9px 5px}.title p{font-size:11px}.title h1{font-size:28px}.bubble{top:83px;left:10px;width:calc(100% - 20px);padding:8px 12px;border-radius:18px;font-size:15px;min-height:74px}#instruction{font-size:14px;margin-top:4px}#sammy{top:163px;left:0;bottom:auto;height:171px;max-width:115px;object-fit:contain}#monitor{top:160px;right:6px;width:105px;height:95px}#monitor span{font-size:13px;padding:3px;left:14%;right:14%}#room{top:220px;right:0;width:100%}.zone img{width:48px;height:39px}.zone span{font-size:17px;padding:3px 6px}.zone{gap:0}#activity{bottom:67px;right:10px;width:calc(100% - 20px)}#progress{font-size:12px;margin-bottom:2px;padding:2px}#events{gap:8px}.event{min-height:111px;width:32%}.event img{width:78px;height:53px}.event span{font-size:13px;min-height:49px;padding:3px 4px;display:flex;align-items:center;justify-content:center}.event[aria-pressed=true] span{padding:1px 2px}#feedback{right:10px;width:calc(100% - 20px);font-size:14px;min-height:50px;padding:5px 8px}#ending{top:237px;right:10px;width:70%;padding:14px 10px}#ending h2{font-size:25px}#ending p{font-size:16px;margin:8px 0 12px}.actions{flex-direction:column;gap:8px}.actions a,.actions button{min-height:48px;font-size:20px;padding:7px}body.finished #sammy{top:230px;height:230px;max-width:130px}body.finished #room{opacity:.5}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
@media(min-width:601px){#room{top:200px;width:60%;max-width:820px}}
@media(max-width:600px){#room{top:205px;z-index:2}#sammy{z-index:1}}
/* Keep labels opaque and readable in locked and sorted states. */
.event:disabled{opacity:1}.event:disabled img{opacity:.45}.event.sorted img{opacity:.4}
@media(max-width:600px){.title h1{font-size:24px}}