#hat-scene{width:min(960px,calc(100% - 24px));max-height:calc(100svh - 24px);overflow:auto;background:#f4e8cd;color:#27493c;border:1px solid #baa371;border-radius:20px}#hat-scene::backdrop{background:#142e2bdf;backdrop-filter:blur(5px)}.hat-nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:9px 16px;background:#f4e8cd;border-bottom:1px solid #c8b78c;font:13px system-ui;gap:8px}.hat-nav button{padding:9px;background:transparent;border:0;color:#315941;min-height:42px;cursor:pointer}.hat-content{text-align:center;padding:14px 24px}.hat-content h1{font:600 clamp(22px,3vw,30px)/1.1 Georgia;margin:8px 0 13px}.hat-content .eyebrow{margin:0 0 5px}.hat-stage{position:relative;aspect-ratio:3/2;width:min(100%,calc(max(180px,100svh - 350px)*1.5));margin:auto;overflow:hidden;border-radius:14px;background:#547474;isolation:isolate;touch-action:none;box-shadow:0 5px 14px #263e3733}.hat-background{display:block;width:100%;height:100%;object-fit:cover}.hat-campus{position:absolute;top:3%;left:3%;padding:5px 8px;background:#294d50eb;color:#eee5c2;border:1px solid #baa170;border-radius:5px;font:600 clamp(9px,1.2vw,13px) Georgia;z-index:5}.hat-agy,.hat-teacher{position:absolute;filter:drop-shadow(0 4px 2px #47391d55);transition:transform .15s ease-out,left .13s ease-out}.hat-agy{left:34%;top:22%;width:29%;height:73%;transform:translateX(-50%);z-index:4}.hat-teacher{left:54%;top:19%;width:39%;height:76%;z-index:3;transform-origin:70% 90%}.hat-agy svg,.hat-teacher img{width:100%;height:100%;object-fit:contain}.hat-agy>span,.hat-teacher>span{position:absolute;bottom:0;left:15%;right:15%;background:#eee3c0e6;border-radius:6px;padding:2px;font:600 clamp(9px,1.1vw,12px) Georgia}.hat-bubble{position:absolute;top:8%;right:4%;width:43%;padding:9px;border-radius:12px;background:#fff6df;color:#304b40;font:clamp(12px,1.65vw,18px)/1.3 Georgia;z-index:8;box-shadow:0 3px 10px #2b413c33}.hat-bubble:after{content:'';position:absolute;right:30%;top:100%;border:8px solid transparent;border-top-color:#fff6df}.hat-target{position:absolute;top:26%;width:12%;height:5%;transform:translateX(-50%);border:2px dashed #c79f50;border-radius:50%;background:#f3d57555;z-index:2}.hat-stage.warning .hat-teacher{filter:drop-shadow(0 4px 2px #47391d55) saturate(1.1)}.hat-stage.frustration-2 .hat-bubble,.hat-stage.frustration-3 .hat-bubble{border:2px solid #b77e50}.hat-stamp{position:absolute;left:35%;top:18%;width:29%;height:49%;font:900 clamp(80px,18vw,210px)/1 Georgia;color:#ae3b30;transform:rotate(-13deg);border:8px double #ae3b30;border-radius:9px;background:#f7eadcbc;z-index:10;box-shadow:0 4px 10px #51362633;animation:hat-stamp .35s ease-out}.hat-stage.agy-leaving .hat-agy{transform:translateX(-260%) rotate(-4deg);transition:transform 1.4s ease-in;opacity:1}.hat-exit{position:absolute;bottom:5%;left:5%;right:5%;background:#f4e8cdf0;border-radius:8px;padding:8px;font:600 clamp(13px,1.8vw,20px) Georgia;z-index:11}.hat-story,.hat-ending-line{font:17px/1.4 Georgia;max-width:740px;margin:12px auto}.hat-primary{min-height:44px;border:1px solid #a68f61;border-radius:11px;background:#315941;color:#fff7de;font:600 15px system-ui;padding:11px 20px;cursor:pointer}.hat-primary:disabled{opacity:.55;cursor:wait}.hat-feedback{font:14px/1.3 system-ui;margin:8px 0;min-height:36px}.hat-controls{display:flex;justify-content:center;align-items:center;gap:10px}.hat-controls button{min-width:70px;min-height:44px;background:#f2e3bf;border:1px solid #a68f61;border-radius:9px;color:#315941;font:600 14px system-ui;touch-action:none;user-select:none;cursor:pointer;padding:8px 12px}.hat-time{font:600 17px system-ui;min-width:36px}.hat-guide{font:12px/1.4 system-ui;max-width:720px;margin:8px auto}.hat-controls button:focus-visible,.hat-primary:focus-visible{outline:3px solid #416950;outline-offset:2px}.hat-ending-actions{min-height:48px}.hat-stop svg{width:80%;height:80%;filter:drop-shadow(0 3px 3px #353d3655)}@keyframes hat-stamp{from{transform:rotate(-13deg) scale(1.8);opacity:0}to{transform:rotate(-13deg) scale(1);opacity:1}}@media(max-width:600px){.hat-content{padding:12px}.hat-nav{padding:7px 9px;font-size:11px}.hat-nav>span{max-width:100px;text-align:center}.hat-stage{width:100%}.hat-story,.hat-ending-line{font-size:15px}.hat-content h1{font-size:23px}.hat-controls{gap:6px}.hat-controls button{padding:8px;min-width:65px;font-size:12px}.hat-feedback{font-size:13px;min-height:34px}.hat-guide{font-size:11px}.hat-bubble{font-size:11px;padding:6px}.hat-stamp{border-width:5px;font-size:100px}}@media(prefers-reduced-motion:reduce){.hat-agy,.hat-teacher,.hat-stage.agy-leaving .hat-agy{transition:none}.hat-stamp{animation:none}.hat-stage.agy-leaving .hat-agy{transform:translateX(-260%)}}