.player{width:7.2%;aspect-ratio:.72}
.player{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.player.dragging{cursor:grabbing;transition:none;filter:drop-shadow(0 7px 3px rgba(0,0,0,.4)) brightness(1.06)}
.player-body{inset:-28% -45% 8%;border:0;border-radius:0;background:url('assets/player-student.png?v=2') center bottom/contain no-repeat;background-image:image-set(url('assets/player-student.webp?v=3') type('image/webp'),url('assets/player-student.png?v=2') type('image/png'));box-shadow:none}
body.character-girl .player-body{background-image:url('assets/player-student-girl.png?v=2');background-image:image-set(url('assets/player-student-girl.webp?v=3') type('image/webp'),url('assets/player-student-girl.png?v=2') type('image/png'))}
.player-body:before,.player-body:after,.player-body i{display:none}
.player.walking .player-body{animation:characterWalk .24s steps(2) infinite}
.student-game-grid em{min-height:22px;color:#53627f;line-height:1.35}
.student-game-grid em:before{display:none}
@keyframes characterWalk{50%{transform:translateY(-5px) rotate(-1deg)}}
.player em{display:none}
.game-brand>span{overflow:hidden;background:#fff;border-color:#fff}
.game-brand>span img{width:100%;height:100%;padding:3px;object-fit:contain}
.quest-panel>p,.dialog-box>[data-dialog-content]>p,.game-shell>footer span:last-child{display:none}
.quest-panel li{cursor:pointer;outline:none}
.quest-panel li:hover,.quest-panel li:focus-visible{border-color:#6686df;background:#f2f5ff;transform:translateX(3px);box-shadow:0 7px 15px rgba(49,85,183,.1)}
.quest-panel li:focus-visible{box-shadow:0 0 0 3px rgba(49,85,183,.2)}
.podium-list{grid-template-columns:1fr}
.podium-list section{max-height:none}
.podium-list ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
@media(max-width:560px){.podium-list ol{grid-template-columns:1fr}}
.hotspot.competition{left:16%;top:75%;width:22%;height:16%}
.podium-list li{grid-template-columns:29px 35px minmax(0,1fr)}
.podium-list li>.rank-number{width:27px;height:27px}
.rank-photo{width:34px!important;height:34px!important;display:grid!important;place-items:center;overflow:hidden;border:2px solid #c8d5f7;border-radius:10px!important;background:#eef3ff!important;color:#3155b7!important;font-size:12px;font-weight:900}
.rank-photo img{width:100%;height:100%;object-fit:cover}
.competition-list{display:grid;gap:12px}.competition-list section{overflow:hidden;border:2px solid #e4d18b;border-radius:17px;background:#fff}.competition-list header{display:flex;align-items:center;gap:10px;padding:12px;background:linear-gradient(135deg,#fff0a4,#fff)}.competition-list header>span{font-size:26px}.competition-list header b,.competition-list header small{display:block}.competition-list header b{font-size:12px}.competition-list header small{margin-top:2px;color:#79652f;font-size:8px}.competition-list article{display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:center;padding:12px;border-top:1px solid #edf0f5}.competition-photo{width:70px;height:70px;display:grid;place-items:center;overflow:hidden;border-radius:15px;background:#eef3ff;font-size:28px}.competition-photo img{width:100%;height:100%;object-fit:cover}.competition-list article b,.competition-list article strong,.competition-list article small{display:block}.competition-list article b{font-size:13px}.competition-list article strong{margin-top:3px;color:#b6780b;font-size:11px}.competition-list article small{margin-top:3px;color:#6f7d94;font-size:9px}.empty-game-state{padding:28px;text-align:center;border:1px dashed #b9c7d9;border-radius:14px;background:#fff;color:#718096;font-size:11px}
.game-dialog:has(.schedule-game-board){width:min(96vw,960px)}
.schedule-game-board{display:block;overflow:visible}.schedule-game-board>section{width:100%;padding:14px}.schedule-game-board article{grid-template-columns:minmax(52px,72px) minmax(0,1fr);padding:10px}.schedule-game-board time{font-size:10px}.schedule-game-board b{font-size:11px}.schedule-game-board small{font-size:8px}
@media(max-width:560px){.game-dialog:has(.schedule-game-board){width:96vw}.schedule-game-board>section{padding:8px}.schedule-game-board article{grid-template-columns:48px minmax(0,1fr);padding:8px}}
.schedule-game-board time{display:flex;flex-direction:column;justify-content:center;line-height:1.15}.schedule-game-board time span{color:#9aa6ba;font-size:7px}
.game-book-button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 8px;text-align:left;border:0;border-bottom:1px solid #edf0f5;background:#fff;color:#172554;cursor:pointer;transition:.18s}.game-book-button:hover,.game-book-button:focus-visible{padding-left:12px;background:#f0f5ff}.game-book-button b,.game-book-button small{display:block}.game-book-button b{font-size:10px}.game-book-button small{margin-top:3px;color:#748198;font-size:8px}.game-book-button em{color:#3155b7;font-size:8px;font-style:normal;font-weight:1000;white-space:nowrap}.book-game-dialog{width:min(96vw,1100px)}.book-reader-dialog{height:min(88vh,820px);display:grid;grid-template-rows:auto minmax(0,1fr);padding:22px}.book-reader-title{padding:0 50px 12px 2px}.book-reader-title h2{margin-bottom:0}.book-reader-dialog iframe{width:100%;height:100%;border:2px solid #d9e2f3;border-radius:15px;background:#fff}@media(max-width:560px){.book-reader-dialog{height:92vh;padding:15px}.book-reader-title h2{font-size:20px}}
.live-class-strip{width:min(100%,1440px);display:flex;align-items:stretch;gap:10px;margin:0 auto 14px;color:#fff}.day-phase,.lesson-now{display:flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(17,31,72,.82);box-shadow:0 8px 22px rgba(0,0,0,.18);backdrop-filter:blur(10px)}.day-phase>span{font-size:23px}.day-phase small,.day-phase strong,.lesson-now small,.lesson-now strong{display:block}.day-phase small,.lesson-now small{color:#9eeaf1;font-size:8px;font-weight:1000;letter-spacing:.1em}.day-phase strong{margin-top:2px;font-size:13px}.day-phase.night{background:rgba(12,18,52,.9)}.lesson-now{flex:1}.lesson-now strong{margin-top:2px;font-size:12px}.lesson-pulse{width:10px;height:10px;border-radius:50%;background:#38d79f;box-shadow:0 0 0 5px rgba(56,215,159,.15);animation:lessonPulse 1.5s infinite}.lesson-now.holiday .lesson-pulse{background:#ffd34f;box-shadow:0 0 0 5px rgba(255,211,79,.15)}.lesson-now.done .lesson-pulse{background:#9aa7c8}@keyframes lessonPulse{50%{transform:scale(.75);opacity:.7}}body.night-mode{background:radial-gradient(circle at 20% 0,#25316f 0,#10183e 45%,#070b20 100%)}
.schedule-game-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.schedule-holiday{padding:24px 12px;text-align:center;border-radius:10px;background:#f5f7fb;color:#60708c;font-size:10px;font-weight:900}
.museum-enter-button{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;margin:0 0 14px;padding:11px;text-align:left;border:2px solid #d7bd61;border-radius:15px;background:linear-gradient(135deg,#fff0a4,#fff);color:#172554;cursor:pointer}.museum-enter-button>span:first-child{font-size:26px}.museum-enter-button b,.museum-enter-button small{display:block}.museum-enter-button b{font-size:12px}.museum-enter-button small{margin-top:2px;color:#7f6d37}.museum-enter-button em{color:#8a6309;font-size:9px;font-style:normal;font-weight:1000}.museum-dialog{width:min(98vw,1180px);height:min(96vh,940px);padding:0;border:0;border-radius:24px;background:transparent}.museum-dialog::backdrop{background:rgba(4,8,24,.88);backdrop-filter:blur(6px)}.museum-shell{position:relative;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:4px solid #d8ad3a;border-radius:24px;background:#101b3b;box-shadow:0 30px 80px rgba(0,0,0,.55)}.museum-shell>header{z-index:3;padding:16px 55px 13px 18px;background:linear-gradient(90deg,#162b67,#264fa2);color:#fff}.museum-shell>header span{color:#ffe07a;font-size:8px;font-weight:1000;letter-spacing:.14em}.museum-shell>header h2{margin:3px 0 2px;font-size:22px}.museum-shell>header p{margin:0;color:#cad8ff;font-size:9px}.museum-close{position:absolute;z-index:8;right:13px;top:14px;width:36px;height:36px;border:1px solid rgba(255,255,255,.3);border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:22px;cursor:pointer}.museum-world{position:relative;min-height:0;overflow:hidden}.museum-world>img{width:100%;height:100%;display:block;object-fit:contain;background:#0d1736}.museum-gallery{position:absolute;z-index:3;left:3%;right:3%;bottom:3%;display:flex;gap:8px;padding:10px;overflow-x:auto;border:1px solid rgba(255,255,255,.28);border-radius:16px;background:rgba(12,24,58,.86);backdrop-filter:blur(8px);scroll-snap-type:x mandatory}.museum-card{flex:0 0 175px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;padding:7px;text-align:left;border:2px solid transparent;border-radius:12px;background:#fff;color:#172554;cursor:pointer;scroll-snap-align:center}.museum-card.active{border-color:#ffd34f;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.3)}.museum-photo{width:43px;height:43px;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:#e8edff;color:#3155b7;font-weight:1000}.museum-photo img{width:100%;height:100%;object-fit:cover}.museum-card small,.museum-card b{display:block}.museum-card small{overflow:hidden;color:#8a6a18;font-size:6px;text-overflow:ellipsis;white-space:nowrap}.museum-card b{overflow:hidden;margin-top:3px;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.live-class-strip{gap:6px}.day-phase,.lesson-now{padding:7px 9px}.lesson-now strong{font-size:10px}.schedule-game-board{grid-template-columns:1fr}.museum-dialog{width:100vw;height:100vh;max-width:none;max-height:none;border-radius:0}.museum-shell{border-width:0;border-radius:0}.museum-shell>header h2{font-size:17px}.museum-world>img{object-fit:cover}.museum-gallery{left:2%;right:2%;bottom:2%}.museum-card{flex-basis:155px}}
.museum-zone{position:absolute;z-index:4;width:18%;min-height:11%;transform:translate(-50%,-50%);display:grid;place-items:center;padding:5px;border:2px dashed rgba(255,255,255,.82);border-radius:14px;background:rgba(30,70,150,.38);color:#fff;opacity:.35;cursor:pointer;transition:.2s;backdrop-filter:blur(2px)}.museum-zone span{font-size:20px}.museum-zone b{max-width:100%;overflow:hidden;font-size:7px;text-overflow:ellipsis;white-space:nowrap}.museum-zone:hover,.museum-zone.near,.museum-zone.active{opacity:1;border-color:#ffe071;background:rgba(20,52,120,.78);box-shadow:0 0 0 5px rgba(255,224,113,.14)}.museum-player{z-index:7;width:6%;cursor:grab;touch-action:none}.museum-player.dragging{cursor:grabbing}.museum-gallery{opacity:0;pointer-events:none;transform:translateY(125%);transition:opacity .25s,transform .3s}.museum-gallery.open{opacity:1;pointer-events:auto;transform:translateY(0)}.museum-slider-controls{position:sticky;z-index:3;left:0;order:-1;flex:0 0 210px;display:grid;grid-template-columns:32px minmax(0,1fr) 32px;gap:5px;align-items:center;padding:6px;border-radius:10px;background:#172554;color:#fff}.museum-slider-controls button{width:30px;height:30px;border:1px solid #7891d2;border-radius:8px;background:#eef3ff;color:#3155b7;font-weight:1000;cursor:pointer}.museum-slider-controls strong{overflow:hidden;text-align:center;font-size:8px;text-overflow:ellipsis}.museum-mobile-pad{display:none}.museum-shell:after{content:"Gerakkan karakter menuju ruang pameran";position:absolute;z-index:5;left:50%;top:91px;transform:translateX(-50%);padding:6px 10px;border-radius:999px;background:rgba(13,27,67,.78);color:#fff;font-size:8px;font-weight:900;pointer-events:none}
@media(max-width:700px){.museum-zone{width:23%;min-height:9%}.museum-player{width:9%}.museum-world{padding-bottom:86px}.museum-gallery{bottom:88px}.museum-mobile-pad{position:absolute;z-index:7;left:50%;bottom:6px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,38px);gap:4px}.museum-mobile-pad button{width:48px;height:38px;border:2px solid #8398d4;border-bottom-width:4px;border-radius:9px;background:#eef3ff;color:#25459e;font-size:10px;font-weight:1000;touch-action:none}.museum-mobile-pad button:nth-child(1){grid-column:2}.museum-mobile-pad button:nth-child(2){grid-row:2;grid-column:1}.museum-mobile-pad button:nth-child(3){grid-row:2;grid-column:2;background:#ffd34f;color:#73470b;border-color:#d6a62a;font-size:7px}.museum-mobile-pad button:nth-child(4){grid-row:2;grid-column:3}.museum-mobile-pad button:nth-child(5){grid-row:3;grid-column:2}.museum-shell:after{top:77px;max-width:75%;text-align:center}.museum-slider-controls{flex-basis:155px}}
.museum-card[hidden]{display:none}
.museum-gallery.open .museum-card{flex-basis:225px;grid-template-columns:62px minmax(0,1fr);padding:9px}.museum-gallery.open .museum-photo{width:60px;height:60px;border:3px solid #e0c264}.museum-gallery.open .museum-card small{font-size:7px}.museum-gallery.open .museum-card b{font-size:11px}.museum-gallery.open .museum-card.active{background:linear-gradient(145deg,#fff9da,#fff)}@media(max-width:700px){.museum-gallery.open .museum-card{flex-basis:185px;grid-template-columns:52px minmax(0,1fr)}.museum-gallery.open .museum-photo{width:50px;height:50px}}
.museum-world{width:auto;height:100%;max-width:100%;aspect-ratio:1;justify-self:center}.museum-world>img{width:100%;height:100%;object-fit:contain}.museum-feature{position:absolute;z-index:9;left:50%;top:48%;width:min(82%,430px);transform:translate(-50%,-50%);padding:18px;text-align:center;border:4px solid #f4cc55;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(239,245,255,.98));color:#172554;box-shadow:0 24px 70px rgba(3,9,29,.72),inset 0 0 0 4px #fff}.museum-feature[hidden]{display:none}.museum-feature-photo{width:min(42vw,210px);height:min(42vw,210px);display:grid;place-items:center;margin:0 auto 12px;overflow:hidden;border:5px solid #fff;border-radius:18px;background:#e8edff;color:#3155b7;font-size:72px;font-weight:1000;box-shadow:0 8px 26px rgba(28,50,110,.24)}.museum-feature-photo img{width:100%;height:100%;object-fit:cover}.museum-feature small,.museum-feature strong{display:block}.museum-feature small{color:#94700e;font-size:9px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}.museum-feature strong{width:max-content;margin:7px auto;padding:5px 10px;border-radius:999px;background:#ffd34f;color:#684707;font-size:11px}.museum-feature h3{margin:6px 0 3px;font-size:25px}.museum-feature p{margin:0;color:#60708e;font-size:12px;font-weight:800}.museum-feature-close{position:absolute;right:10px;top:10px;width:34px;height:34px;border:0;border-radius:10px;background:#172554;color:#fff;font-size:22px;font-weight:1000;cursor:pointer}.museum-feature-nav{position:absolute;z-index:2;top:43%;width:42px;height:52px;transform:translateY(-50%);border:2px solid #fff;border-radius:13px;background:#3155b7;color:#fff;font-size:22px;font-weight:1000;box-shadow:0 7px 18px rgba(23,37,84,.3);cursor:pointer}.museum-feature-nav:hover,.museum-feature-nav:focus-visible{background:#ffd34f;color:#684707}.museum-feature-nav.prev{left:12px}.museum-feature-nav.next{right:12px}@media(max-width:700px){.museum-world{width:100%;height:auto;max-height:100%;padding-bottom:0}.museum-world>img{object-fit:contain}.museum-feature{top:43%;width:min(88%,360px);padding:14px}.museum-feature-photo{width:135px;height:135px}.museum-feature h3{font-size:20px}.museum-feature-nav{top:40%;width:36px;height:44px}.museum-feature-nav.prev{left:8px}.museum-feature-nav.next{right:8px}}
.character-picker{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 20%,rgba(66,101,190,.94),rgba(7,14,38,.97));backdrop-filter:blur(10px)}.character-picker[hidden]{display:none}.character-picker-panel{width:min(92vw,590px);padding:30px;text-align:center;border:4px solid #f4cc55;border-radius:26px;background:linear-gradient(160deg,#fff,#edf3ff);box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 0 0 4px #fff}.character-picker-panel>small{color:#2a9ba8;font-size:9px;font-weight:1000;letter-spacing:.16em}.character-picker-panel h1{margin:7px 0 5px;font-size:27px}.character-picker-panel>p{margin:0 0 22px;color:#66758e;font-size:12px}.character-options{display:grid;grid-template-columns:1fr 1fr;gap:16px}.character-options button{padding:13px;border:3px solid #dce5f7;border-radius:20px;background:#fff;color:#172554;cursor:pointer;transition:.2s}.character-options button:hover,.character-options button:focus-visible{border-color:#ffd34f;transform:translateY(-4px);box-shadow:0 12px 25px rgba(41,69,145,.18)}.character-options span{height:230px;display:grid;place-items:center;overflow:hidden;border-radius:14px;background:linear-gradient(#dcecff,#f7fbff)}.character-options img{width:100%;height:100%;object-fit:contain}.character-options b,.character-options em{display:block}.character-options b{margin-top:10px;font-size:18px}.character-options em{margin-top:2px;color:#71809a;font-size:10px;font-style:normal;font-weight:800}@media(max-width:560px){.character-picker-panel{padding:22px 14px}.character-picker-panel h1{font-size:21px}.character-options{gap:9px}.character-options span{height:180px}.character-options button{padding:8px}.character-options b{font-size:15px}}
.game-topbar .live-class-strip{flex:1;min-width:220px;max-width:470px;width:auto;margin:0;gap:6px}.game-topbar .day-phase,.game-topbar .lesson-now{min-height:38px;padding:5px 9px;border-radius:11px;background:rgba(255,255,255,.08);box-shadow:none}.game-topbar .day-phase>span{font-size:17px}.game-topbar .day-phase small,.game-topbar .lesson-now small{font-size:6px}.game-topbar .day-phase strong{font-size:10px}.game-topbar .lesson-now{min-width:0}.game-topbar .lesson-now>div{min-width:0}.game-topbar .lesson-now strong{max-width:260px;overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.game-topbar .lesson-pulse{width:7px;height:7px;flex:0 0 7px;box-shadow:0 0 0 3px rgba(56,215,159,.14)}
@media(max-width:1050px){.game-topbar{gap:8px}.game-brand small{display:none}.game-brand strong{font-size:13px}.game-topbar .live-class-strip{max-width:350px}.game-topbar .lesson-now strong{max-width:170px}.game-stats{gap:5px}.game-stats span,.game-stats button,.game-stats a{padding:7px 8px}}
@media(max-width:760px){.game-topbar .live-class-strip{min-width:150px;max-width:250px}.game-topbar .day-phase{gap:5px}.game-topbar .day-phase small,.game-topbar .lesson-now small{display:none}.game-topbar .lesson-now strong{max-width:115px}.game-topbar .notification-link,.game-stats>span{display:none}.game-brand>div{display:none}.game-brand>span{width:38px;height:38px}.game-stats a:last-child{font-size:0}.game-stats a:last-child:after{content:'Masuk';font-size:8px}}
@media(max-width:470px){.game-topbar{padding:7px}.game-topbar .live-class-strip{min-width:0;max-width:none}.game-topbar .day-phase{padding:5px 6px}.game-topbar .day-phase>span{display:none}.game-topbar .lesson-now{padding:5px 7px}.game-topbar .lesson-now strong{max-width:90px}.game-stats [data-sound]{display:none}.game-stats a:last-child{display:flex}}
.museum-gallery.open{z-index:8;left:50%;right:auto;bottom:3%;width:min(92%,540px);display:grid;grid-template-columns:1fr;padding:10px;overflow:visible;transform:translate(-50%,0);border:1px solid rgba(255,255,255,.38);border-radius:22px;background:linear-gradient(145deg,rgba(13,27,67,.96),rgba(24,54,123,.94));box-shadow:0 22px 55px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.15);backdrop-filter:blur(16px)}
.museum-gallery.open .museum-slider-controls{position:static;order:0;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center;width:100%;padding:3px;background:transparent}
.museum-gallery.open .museum-slider-controls button{width:44px;height:44px;border:1px solid rgba(255,255,255,.5);border-radius:14px;background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:1;box-shadow:0 6px 15px rgba(0,0,0,.22);transition:.18s}
.museum-gallery.open .museum-slider-controls button:hover,.museum-gallery.open .museum-slider-controls button:focus-visible{transform:translateY(-2px);border-color:#ffe071;background:#ffe071;color:#654506}
.museum-slider-heading{min-width:0;text-align:center}.museum-slider-heading small,.museum-slider-heading strong,.museum-slider-heading span{display:block}.museum-slider-heading small{color:#ffe071;font-size:7px;font-weight:1000;letter-spacing:.16em}.museum-slider-heading strong{overflow:hidden;margin-top:3px;color:#fff;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.museum-slider-heading span{width:max-content;margin:5px auto 0;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.12);color:#dce6ff;font-size:8px;font-weight:900}
.museum-gallery.open .museum-card{order:1;width:100%;min-height:94px;display:none;grid-template-columns:82px minmax(0,1fr);gap:14px;padding:9px;text-align:left;border:1px solid rgba(255,255,255,.55);border-radius:17px;background:linear-gradient(135deg,#fffdf3,#fff);box-shadow:0 10px 25px rgba(0,0,0,.25);transform:none;animation:museumCardIn .25s ease}
.museum-gallery.open .museum-card.active{display:grid}.museum-gallery.open .museum-photo{width:82px;height:76px;border:3px solid #e0c264;border-radius:13px;box-shadow:0 6px 16px rgba(49,64,117,.18)}.museum-gallery.open .museum-card small{color:#98730e;font-size:8px;letter-spacing:.04em}.museum-gallery.open .museum-card b{margin-top:7px;color:#172554;font-size:15px}.museum-gallery.open .museum-card b:after{content:'  •  ' attr(data-achievement-date);color:#71809a;font-size:8px;font-weight:800}
@keyframes museumCardIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:700px){.museum-gallery.open{bottom:92px;width:94%;padding:8px;border-radius:18px}.museum-gallery.open .museum-slider-controls{grid-template-columns:40px minmax(0,1fr) 40px;gap:6px}.museum-gallery.open .museum-slider-controls button{width:40px;height:40px}.museum-gallery.open .museum-card{min-height:80px;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:7px}.museum-gallery.open .museum-photo{width:64px;height:62px}.museum-gallery.open .museum-card b{font-size:12px}.museum-gallery.open .museum-card b:after{display:block;margin-top:4px}.museum-slider-heading strong{font-size:9px}}
.museum-exit-zone{position:absolute;z-index:6;left:50%;bottom:1.5%;width:18%;min-width:86px;min-height:8%;transform:translateX(-50%);display:grid;grid-template-columns:auto auto;gap:5px;place-content:center;align-items:center;padding:6px;border:2px dashed rgba(255,255,255,.82);border-radius:13px;background:rgba(13,27,67,.72);color:#fff;opacity:.72;cursor:pointer;backdrop-filter:blur(4px);transition:.2s}.museum-exit-zone span{font-size:17px}.museum-exit-zone b{font-size:7px;letter-spacing:.08em}.museum-exit-zone:hover,.museum-exit-zone:focus-visible,.museum-exit-zone.near{opacity:1;border-color:#ffe071;background:rgba(146,91,15,.9);box-shadow:0 0 0 5px rgba(255,224,113,.16);transform:translateX(-50%) translateY(-2px)}
@media(max-width:700px){.museum-exit-zone{bottom:88px;width:24%;min-width:92px;min-height:7%;z-index:8}.museum-exit-zone b{font-size:6px}}
.game-dialog:has(.student-classroom){width:min(96vw,900px)}.game-dialog:has(.student-classroom) .dialog-box{padding:22px}.student-classroom{position:relative;width:min(100%,760px,calc(85vh - 165px));aspect-ratio:1;margin:14px auto 0;overflow:hidden;border:4px solid #8b5a2b;border-radius:22px;background:#dca55e;box-shadow:0 18px 42px rgba(24,38,79,.25),inset 0 0 0 3px #f3cc8f}.student-classroom>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.student-classroom-hint{position:absolute;z-index:7;left:50%;top:25.5%;transform:translateX(-50%);padding:5px 11px;border:1px solid rgba(255,255,255,.75);border-radius:999px;background:rgba(23,37,84,.82);color:#fff;font-size:8px;font-weight:1000;letter-spacing:.04em;white-space:nowrap;backdrop-filter:blur(5px)}
.student-seat{position:absolute;z-index:5;left:var(--seat-x);top:var(--seat-y);width:10%;height:8.5%;transform:translate(-50%,-50%);padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 3px 2px rgba(55,31,13,.3));transition:transform .16s,filter .16s}.student-seat:hover,.student-seat:focus-visible{z-index:9;transform:translate(-50%,-58%) scale(1.13);filter:drop-shadow(0 7px 5px rgba(55,31,13,.42));outline:none}.student-desk{position:absolute;z-index:2;left:3%;right:3%;bottom:0;height:48%;border:2px solid #6f431e;border-radius:5px 5px 9px 9px;background:linear-gradient(#d5954f 0 45%,#a9662e 46%);box-shadow:inset 0 2px #f4bd78,0 4px #75451f}.student-desk:before,.student-desk:after{content:'';position:absolute;bottom:-18%;width:7%;height:28%;border-radius:0 0 3px 3px;background:#68401f}.student-desk:before{left:14%}.student-desk:after{right:14%}.student-seat-character{position:absolute;z-index:3;left:27%;top:-30%;width:46%;height:93%;background:url('assets/player-student.webp?v=3') center bottom/contain no-repeat}.student-seat.girl .student-seat-character{background-image:url('assets/player-student-girl.webp?v=3')}.student-seat>b{position:absolute;z-index:4;right:-2px;bottom:2px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 3px;border:2px solid #fff;border-radius:999px;background:#3155b7;color:#fff;font-size:7px;line-height:1;box-shadow:0 2px 5px rgba(0,0,0,.28)}
.student-map-profile{position:absolute;z-index:20;left:50%;top:53%;width:min(82%,390px);transform:translate(-50%,-50%);padding:22px;text-align:center;border:4px solid #f0c959;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(237,244,255,.98));color:#172554;box-shadow:0 26px 70px rgba(12,23,57,.58),inset 0 0 0 4px #fff;backdrop-filter:blur(10px)}.student-map-profile[hidden]{display:none}.student-map-profile>button{position:absolute;right:10px;top:10px;width:34px;height:34px;border:0;border-radius:10px;background:#172554;color:#fff;font-size:22px;font-weight:1000;cursor:pointer}.student-map-profile-photo{width:150px;height:150px;display:grid;place-items:center;margin:0 auto 13px;overflow:hidden;border:5px solid #fff;border-radius:24px;background:linear-gradient(145deg,#dce7ff,#f7faff);color:#3155b7;font-size:64px;font-weight:1000;box-shadow:0 10px 28px rgba(49,85,183,.2)}.student-map-profile-photo img{width:100%;height:100%;object-fit:cover}.student-map-profile small{display:inline-block;padding:5px 10px;border-radius:999px;background:#ffd34f;color:#6e4b08;font-size:9px;letter-spacing:.03em}.student-map-profile h3{margin:9px 0 3px;font-size:27px}.student-map-profile p{margin:0!important;color:#53627f!important;font-size:12px!important;font-weight:800}.student-map-profile>span{display:inline-block;margin-top:10px;padding:5px 9px;border-radius:8px;background:#e8efff;color:#3155b7;font-size:9px;font-weight:900}
@media(max-width:700px){.game-dialog:has(.student-classroom){width:100vw;max-width:none}.game-dialog:has(.student-classroom) .dialog-box{padding:16px 9px}.student-classroom{border-width:3px;border-radius:15px}.student-classroom-hint{top:25%;padding:4px 8px;font-size:6px}.student-seat{width:11%;height:9%}.student-seat>b{min-width:13px;height:13px;border-width:1px;font-size:5px}.student-map-profile{width:88%;padding:17px}.student-map-profile-photo{width:112px;height:112px}.student-map-profile h3{font-size:22px}}
.student-classroom{border:5px solid #6e4427;outline:3px solid #1f1510;outline-offset:-8px;box-shadow:0 22px 55px rgba(0,0,0,.4),inset 0 0 0 3px #b77b4b}.student-classroom:after{content:'';position:absolute;z-index:4;inset:7px;border:2px solid rgba(255,222,151,.55);border-radius:13px;pointer-events:none}.student-seat.near{z-index:10;transform:translate(-50%,-58%) scale(1.13);filter:drop-shadow(0 0 6px #ffe071) drop-shadow(0 7px 5px rgba(55,31,13,.42))}.student-seat.near .student-desk{border-color:#fff3a6;box-shadow:inset 0 2px #ffe5aa,0 4px #75451f,0 0 0 3px rgba(255,211,79,.7)}
.student-map-player{z-index:14;width:5.8%;cursor:grab;touch-action:none}.student-map-player.dragging{cursor:grabbing;transition:none;filter:drop-shadow(0 7px 4px rgba(0,0,0,.48))}.student-map-exit{position:absolute;z-index:12;left:50%;bottom:1.5%;width:17%;min-width:76px;min-height:7%;transform:translateX(-50%);display:grid;grid-template-columns:auto auto;gap:5px;place-content:center;align-items:center;padding:5px;border:2px dashed rgba(255,255,255,.85);border-radius:12px;background:rgba(23,37,84,.78);color:#fff;opacity:.72;cursor:pointer;backdrop-filter:blur(4px);transition:.18s}.student-map-exit span{font-size:15px}.student-map-exit b{font-size:6px;letter-spacing:.08em}.student-map-exit:hover,.student-map-exit:focus-visible,.student-map-exit.near{opacity:1;border-color:#ffe071;background:rgba(146,91,15,.92);box-shadow:0 0 0 4px rgba(255,224,113,.18);transform:translateX(-50%) translateY(-2px)}
.student-map-pad{display:none}.student-map-profile{z-index:25}
@media(max-width:700px){.student-classroom{border-width:4px;outline-width:2px;outline-offset:-6px}.student-map-player{width:7.5%}.student-map-exit{bottom:2%;width:22%;min-width:72px;min-height:6%}.student-map-pad{position:absolute;z-index:18;right:2%;bottom:2%;display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,26px);gap:2px}.student-map-pad button{width:30px;height:26px;padding:0;border:1px solid #8398d4;border-bottom-width:3px;border-radius:7px;background:#eef3ff;color:#25459e;font-size:8px;font-weight:1000;touch-action:none}.student-map-pad button:nth-child(1){grid-column:2}.student-map-pad button:nth-child(2){grid-row:2;grid-column:1}.student-map-pad button:nth-child(3){grid-row:2;grid-column:2;background:#ffd34f;color:#73470b;border-color:#d6a62a;font-size:5px}.student-map-pad button:nth-child(4){grid-row:2;grid-column:3}.student-map-pad button:nth-child(5){grid-row:3;grid-column:2}}

/* Ruang siswa dan museum menjadi bagian dari dunia game, bukan lapisan modal. */
.game-shell.room-active .quest-panel,.game-shell.room-active .world-column{display:none}.room-stage{grid-column:1/-1;min-width:0}.room-content{width:100%;min-height:calc(100vh - 112px)}.room-content>small{display:block;margin:0 auto 3px;color:#9eeaf1;text-align:center;font-size:9px;font-weight:1000;letter-spacing:.14em}.room-content>h2{margin:0 0 3px;color:#fff;text-align:center;font-size:22px}.room-content>p{margin:0 0 8px;color:#cad8ff;text-align:center;font-size:10px}.room-content>.dialog-icon{display:none}.room-stage .student-classroom{width:min(100%,calc(100vh - 112px));margin:0 auto}.room-stage .museum-dialog{display:block;width:100%;height:auto;max-width:none;max-height:none;border-radius:0}.room-stage .museum-shell{height:min(calc(100vh - 112px),900px);min-height:560px;grid-template-rows:minmax(0,1fr);border:0}.room-stage .museum-shell:after{display:none}.room-stage .museum-close{display:none}
@media(max-width:900px){.room-content{min-height:0}.room-stage .student-classroom{width:min(100%,calc(100vh - 86px));margin-top:0}.room-stage .museum-shell{height:calc(100vh - 86px);min-height:480px;border:0;border-radius:18px}}
@media(max-width:560px){.room-content>small,.room-content>h2,.room-content>p{display:none}.room-stage .student-classroom{width:100%;margin:0}.room-stage .museum-shell{height:calc(100vh - 74px);min-height:430px;border:0;border-radius:15px}}
.cat-companion{position:absolute;z-index:9;width:5.4%;aspect-ratio:1;transform:translate(-50%,-50%);transition:left .22s ease-out,top .22s ease-out;pointer-events:none;filter:drop-shadow(0 3px 2px rgba(0,0,0,.38));--cat-ink:#34251d;--cat-fur:#e79436;--cat-light:#ffc66d}.cat-companion[hidden]{display:none}.cat-shadow{position:absolute;left:10%;right:6%;bottom:2%;height:17%;border-radius:50%;background:rgba(0,0,0,.3)}.cat-sprite{position:absolute;inset:5% 2% 10%;transform-origin:center bottom}.cat-torso{position:absolute;left:31%;top:42%;width:48%;height:37%;border:clamp(1px,.22vw,3px) solid var(--cat-ink);border-radius:38% 48% 30% 24%;background:linear-gradient(90deg,var(--cat-fur) 0 57%,var(--cat-light) 58%);box-shadow:inset 0 -18% #c96f28}.cat-head{position:absolute;z-index:3;left:8%;top:24%;width:43%;height:43%;border:clamp(1px,.22vw,3px) solid var(--cat-ink);border-radius:38% 43% 44% 38%;background:var(--cat-fur);box-shadow:inset -12% -17% #cf742a}.cat-ear{position:absolute;z-index:-1;top:-26%;width:38%;height:42%;border:clamp(1px,.2vw,3px) solid var(--cat-ink);background:var(--cat-fur);clip-path:polygon(50% 0,100% 100%,0 100%)}.cat-ear:after{content:"";position:absolute;inset:38% 30% 8%;background:#ef8d81;clip-path:inherit}.cat-ear.left{left:1%;rotate:-10deg}.cat-ear.right{right:1%;rotate:11deg}.cat-face{position:absolute;inset:0}.cat-face:before{content:"••";position:absolute;left:19%;top:27%;color:#241a16;font:900 clamp(5px,.65vw,9px)/1 monospace;letter-spacing:.72em}.cat-face:after{content:"◆";position:absolute;left:42%;top:49%;color:#9d4938;font-size:clamp(3px,.4vw,6px)}.cat-collar{position:absolute;left:6%;right:2%;bottom:2%;height:17%;border-top:clamp(1px,.15vw,2px) solid var(--cat-ink);border-radius:0 0 45% 45%;background:#3155b7}.cat-collar:after{content:"";position:absolute;left:42%;bottom:-38%;width:19%;aspect-ratio:1;border:1px solid #7b5010;background:#ffd34f;rotate:45deg}.cat-tail{position:absolute;z-index:-1;right:1%;top:23%;width:34%;height:48%;border:clamp(3px,.65vw,8px) solid var(--cat-ink);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;rotate:18deg}.cat-tail:after{content:"";position:absolute;inset:12%;border:clamp(2px,.38vw,5px) solid var(--cat-fur);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%}.cat-leg{position:absolute;z-index:2;bottom:3%;width:18%;height:31%;border:clamp(1px,.2vw,3px) solid var(--cat-ink);border-radius:20% 20% 42% 42%;background:var(--cat-fur)}.cat-leg.front{left:35%}.cat-leg.back{right:16%;background:#d37829}.cat-companion.walking .cat-sprite{animation:cat-walk .3s steps(2) infinite}.cat-companion.walking .cat-leg.front{animation:cat-paw .3s steps(2) infinite}.cat-companion.walking .cat-leg.back{animation:cat-paw .3s steps(2) infinite reverse}.cat-companion.walking .cat-tail{animation:cat-tail-wag .45s steps(2) infinite}.cat-companion.walking .cat-shadow{animation:cat-shadow .3s steps(2) infinite}@keyframes cat-walk{50%{translate:0 -9%;rotate:-2deg}}@keyframes cat-paw{50%{translate:0 12%;rotate:8deg}}@keyframes cat-tail-wag{50%{rotate:31deg}}@keyframes cat-shadow{50%{scale:.82 1;opacity:.7}}.student-classroom .cat-companion,.museum-world .cat-companion{width:6.2%}@media(max-width:700px){.cat-companion{width:7.5%}.student-classroom .cat-companion,.museum-world .cat-companion{width:8.5%}}
.cat-companion{width:9%;aspect-ratio:4/3;--cat-y:0%}.cat-companion.left{--cat-y:33.333%}.cat-companion.right{--cat-y:66.666%}.cat-companion.up{--cat-y:100%}.cat-companion.down{--cat-y:0%}.cat-companion .cat-shadow{left:24%;right:20%;bottom:8%;height:12%}.cat-companion .cat-sprite{inset:0;background-image:url('assets/cat-companion-sprite.webp');background-repeat:no-repeat;background-size:200% 400%;background-position:0 var(--cat-y);image-rendering:pixelated;transform:none}.cat-companion.walking .cat-sprite{animation:cat-sprite-walk .34s steps(1,end) infinite}.student-classroom .cat-companion,.museum-world .cat-companion{width:10%}@keyframes cat-sprite-walk{0%,49%{background-position:0 var(--cat-y);translate:0 0}50%,100%{background-position:100% var(--cat-y);translate:0 -3%}}@media(max-width:700px){.cat-companion{width:12%}.student-classroom .cat-companion,.museum-world .cat-companion{width:13%}}
.cat-companion{width:8%;aspect-ratio:3/4}.cat-companion .cat-sprite{background-size:200% 100%;background-position:0 50%}.cat-companion.down .cat-sprite{background-image:url('assets/cat-walk-down.webp')}.cat-companion.left .cat-sprite{background-image:url('assets/cat-walk-left.webp')}.cat-companion.right .cat-sprite{background-image:url('assets/cat-walk-right.webp')}.cat-companion.up .cat-sprite{background-image:url('assets/cat-walk-up.webp')}.cat-companion.walking .cat-sprite{animation:cat-direction-walk .34s steps(1,end) infinite}.student-classroom .cat-companion,.museum-world .cat-companion{width:9%}@keyframes cat-direction-walk{0%,49%{background-position:0 50%;translate:0 0}50%,100%{background-position:100% 50%;translate:0 -3%}}@media(max-width:700px){.cat-companion{width:10%}.student-classroom .cat-companion,.museum-world .cat-companion{width:11%}}
.hotspot.piano{left:73%;top:39%;width:20%;height:18%}.piano-dialog{width:min(94vw,920px);padding:0;border:0;border-radius:24px;background:transparent}.piano-dialog::backdrop{background:rgba(6,12,31,.78);backdrop-filter:blur(5px)}.virtual-piano{position:relative;padding:24px;border:4px solid #d8ad3a;border-radius:24px;background:linear-gradient(145deg,#182c63,#0d1736);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 3px rgba(255,255,255,.1);color:#fff}.piano-close{position:absolute;z-index:6;right:15px;top:14px;width:36px;height:36px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:23px;font-weight:900;cursor:pointer}.virtual-piano>header{display:flex;align-items:end;gap:20px;padding-right:42px}.virtual-piano header>div{margin-right:auto}.virtual-piano small{color:#ffe071;font-size:8px;font-weight:1000;letter-spacing:.14em}.virtual-piano h2{margin:4px 0;font-size:25px}.virtual-piano p{margin:0;color:#cad8ff;font-size:10px}.virtual-piano label{display:grid;gap:5px;color:#dbe5ff;font-size:9px;font-weight:900}.virtual-piano input[type=range]{width:130px;accent-color:#ffd34f}.piano-label-toggle{display:flex!important;align-items:center;white-space:nowrap}.piano-keys{position:relative;height:280px;margin-top:20px;overflow:hidden;border:8px solid #6e4427;border-top-width:14px;border-radius:14px;background:#261a14;box-shadow:inset 0 7px 12px rgba(0,0,0,.55)}.piano-key{position:absolute;top:0;cursor:pointer;touch-action:none;user-select:none}.piano-key.white{z-index:1;left:calc(var(--white-index)*14.285714%);width:14.285714%;height:100%;border:1px solid #8f949f;border-bottom:8px solid #bbc0ca;border-radius:0 0 9px 9px;background:linear-gradient(90deg,#d9dde5,#fff 17% 78%,#cdd2db);color:#34405a}.piano-key.black{z-index:3;left:calc(var(--black-left)*14.285714% - 4.3%);width:8.6%;height:62%;border:2px solid #080b14;border-bottom:8px solid #060811;border-radius:0 0 7px 7px;background:linear-gradient(90deg,#080c19,#26304b 48%,#080b14);color:#fff;box-shadow:0 8px 8px rgba(0,0,0,.45)}.piano-key span,.piano-key small{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:11px;font-weight:1000}.piano-key small{bottom:4px;color:inherit;font-size:7px;opacity:.65}.piano-key.black span{bottom:19px}.piano-key.black small{bottom:7px}.piano-key.active,.piano-key:active{translate:0 5px;filter:brightness(.78)}.piano-key.white.active{border-bottom-width:3px}.piano-key.black.active{border-bottom-width:3px}.piano-keys.hide-labels span,.piano-keys.hide-labels small{display:none}@media(max-width:700px){.virtual-piano{padding:17px 10px 12px}.virtual-piano>header{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-right:40px}.virtual-piano header>div{grid-column:1/-1}.virtual-piano h2{font-size:20px}.piano-keys{height:210px;margin-top:12px;border-width:6px;border-top-width:10px}.piano-key span{font-size:9px}.piano-key small{display:none}}
.player{--player-direction-y:0%}.player.left{--player-direction-y:33.333%}.player.right{--player-direction-y:66.666%}.player.up{--player-direction-y:100%}.player.down{--player-direction-y:0%}.player .player-body{inset:-28% -60% 8%;background-image:url('assets/player-boy-directional.webp?v=1');background-repeat:no-repeat;background-size:200% 400%;background-position:0 var(--player-direction-y);image-rendering:pixelated}.character-girl .player .player-body{background-image:url('assets/player-girl-directional.webp?v=1')}.player.walking .player-body{animation:player-direction-walk .3s steps(1,end) infinite}@keyframes player-direction-walk{0%,49%{background-position:0 var(--player-direction-y);translate:0 0}50%,100%{background-position:100% var(--player-direction-y);translate:0 -3%}}
.hotspot.competition{left:76%;top:77%;width:18%;height:16%}.hotspot.penalty{left:15%;top:75%;width:23%;height:18%}.penalty-dialog{width:min(94vw,780px);padding:0;border:0;border-radius:24px;background:transparent}.penalty-dialog::backdrop{background:rgba(4,14,35,.82);backdrop-filter:blur(5px)}.penalty-game{position:relative;padding:22px;border:4px solid #ffe071;border-radius:24px;background:linear-gradient(145deg,#173d82,#0b1c47);color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.58),inset 0 0 0 3px rgba(255,255,255,.1)}.penalty-close{position:absolute;z-index:8;right:14px;top:13px;width:37px;height:37px;border:1px solid #7891d2;border-radius:11px;background:#18366f;color:#fff;font-size:23px;font-weight:900;cursor:pointer}.penalty-game>header{display:flex;align-items:end;gap:16px;padding:0 46px 15px 2px}.penalty-game header>div:first-child{margin-right:auto}.penalty-game small{color:#ffe071;font-size:8px;font-weight:1000;letter-spacing:.14em}.penalty-game h2{margin:4px 0;font-size:25px}.penalty-game p{margin:0;color:#d8e4ff;font-size:10px}.penalty-score{display:flex;gap:7px}.penalty-score span{min-width:72px;padding:7px;border:1px solid rgba(255,255,255,.24);border-radius:9px;background:rgba(255,255,255,.1);text-align:center;font-size:8px;font-weight:900}.penalty-score b{color:#ffe071;font-size:15px}.penalty-pitch{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;padding:0;border:5px solid #fff;border-radius:17px;background:linear-gradient(#62baf1 0 28%,#7ed264 29% 100%);cursor:crosshair;isolation:isolate}.penalty-pitch:before{content:"";position:absolute;z-index:-1;inset:28% 0 0;background:repeating-linear-gradient(90deg,#57ad49 0 12.5%,#65bd55 12.5% 25%);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.penalty-crowd{position:absolute;left:0;right:0;top:18%;height:13%;background:repeating-linear-gradient(90deg,#ffda4f 0 2%,#f25b5b 2% 4%,#fff 4% 6%,#3155b7 6% 8%);filter:brightness(.85)}.penalty-goal{position:absolute;left:18%;right:18%;top:22%;height:51%;border:9px solid #fff;border-bottom-width:11px;box-shadow:0 5px 0 rgba(0,0,0,.25)}.penalty-goal:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 11%,rgba(255,255,255,.65) 11% 12.5%),repeating-linear-gradient(0deg,transparent 0 20%,rgba(255,255,255,.65) 20% 22%)}.penalty-goal i{position:absolute;left:50%;bottom:-37%;width:1px;height:36%;background:#fff;box-shadow:-125px 0 #fff,125px 0 #fff}.penalty-keeper{position:absolute;z-index:3;left:50%;top:52%;translate:-50% -50%;font-size:clamp(36px,7vw,66px);transition:left .38s cubic-bezier(.2,.8,.3,1),top .38s,rotate .38s}.penalty-ball{position:absolute;z-index:5;left:50%;top:84%;translate:-50% -50%;font-size:clamp(25px,5vw,46px);filter:drop-shadow(0 5px 3px rgba(0,0,0,.3));transition:left .48s cubic-bezier(.15,.75,.25,1),top .48s cubic-bezier(.15,.75,.25,1),scale .48s,rotate .48s}.penalty-pitch.shooting .penalty-ball{left:var(--ball-x);top:var(--ball-y);scale:.55;rotate:540deg}.penalty-pitch.shooting .penalty-keeper{left:var(--keeper-x);top:var(--keeper-y);rotate:var(--keeper-rotate)}.penalty-pitch strong{position:absolute;z-index:6;left:50%;bottom:3%;translate:-50% 0;padding:7px 11px;border:2px solid #fff;border-radius:9px;background:rgba(14,35,84,.9);color:#fff;font-size:9px;white-space:nowrap}.penalty-pitch.goal strong{background:#0b9d68}.penalty-pitch.saved strong{background:#d44b3e}.penalty-game>footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px}.penalty-game>footer span{color:#ffe071;font-size:17px;letter-spacing:.15em}.penalty-game>footer button{padding:8px 13px;border:0;border-radius:9px;background:#ffe071;color:#6c4707;font-size:9px;font-weight:1000;cursor:pointer}.penalty-game>footer button[hidden]{display:none}@media(max-width:600px){.penalty-game{padding:14px 8px 10px}.penalty-game>header{display:grid;padding-right:42px}.penalty-game h2{font-size:19px}.penalty-game p{font-size:8px}.penalty-score{position:absolute;right:50px;top:48px}.penalty-score span{min-width:57px;padding:5px}.penalty-pitch{border-width:3px}.penalty-goal{border-width:5px}.penalty-pitch strong{font-size:7px}.penalty-game>footer{padding:8px 5px 0}}
.penalty-stadium{overflow:hidden;border:3px solid rgba(255,255,255,.35);border-radius:18px;background:#0a1739}.penalty-stadium .penalty-pitch{border:0;border-radius:14px 14px 0 0;background:linear-gradient(#4197df 0 22%,#31517b 22% 26%,#3d923d 26% 100%);box-shadow:inset 0 -30px 45px rgba(0,0,0,.18)}.penalty-stadium .penalty-pitch:before{z-index:0;inset:26% 0 0;background:repeating-linear-gradient(90deg,#32873b 0 12.5%,#3b9744 12.5% 25%);clip-path:polygon(19% 0,81% 0,100% 100%,0 100%)}.penalty-sky{position:absolute;inset:0 0 74%;background:radial-gradient(circle at 78% 25%,#fff8ac 0 2%,transparent 3%),linear-gradient(#3183cd,#77c7f1)}.penalty-crowd{z-index:1;top:19%;height:11%;border-block:3px solid #e6edf8;background:radial-gradient(circle,#f9cf48 0 22%,transparent 24%) 0 0/17px 13px,radial-gradient(circle,#e94e58 0 22%,transparent 24%) 8px 5px/19px 15px,#244276;filter:none}.penalty-goal{z-index:2;left:17%;right:17%;top:25%;height:48%;border-width:clamp(5px,.8vw,9px);border-radius:3px;background:rgba(237,248,255,.08);box-shadow:0 8px 12px rgba(0,0,0,.24)}.penalty-goal:before{background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(235,245,255,.48) 9% 10%),repeating-linear-gradient(0deg,transparent 0 17%,rgba(235,245,255,.48) 17% 18%)}.penalty-goal i{display:none}.penalty-target{position:absolute;z-index:4;left:50%;top:45%;width:32px;aspect-ratio:1;translate:-50% -50%;border:2px solid rgba(255,255,255,.9);border-radius:50%;opacity:.72;pointer-events:none;transition:left .08s,top .08s}.penalty-target:before,.penalty-target:after{content:"";position:absolute;background:#fff}.penalty-target:before{left:50%;top:-7px;width:1px;height:calc(100% + 14px)}.penalty-target:after{top:50%;left:-7px;width:calc(100% + 14px);height:1px}.penalty-keeper{z-index:4;width:8%;aspect-ratio:.55;font-size:0;transform-origin:center 70%;transition:left .5s cubic-bezier(.18,.8,.25,1),top .5s cubic-bezier(.18,.8,.25,1),rotate .5s}.penalty-keeper i{display:block;position:absolute}.keeper-head{z-index:3;left:24%;top:0;width:52%;aspect-ratio:1;border:2px solid #40271d;border-radius:50%;background:linear-gradient(#352219 0 22%,#d99361 23%)}.keeper-body{z-index:2;left:18%;top:27%;width:64%;height:45%;border:2px solid #18376f;border-radius:25% 25% 12% 12%;background:linear-gradient(90deg,#ffcc35 0 48%,#e8a91f 49%)}.keeper-arm{z-index:1;top:32%;width:18%;height:47%;border:2px solid #173665;border-radius:999px;background:#f0b72e;transform-origin:50% 10%}.keeper-arm.left{left:6%;rotate:35deg}.keeper-arm.right{right:6%;rotate:-35deg}.keeper-arm:after{content:"";position:absolute;left:-18%;bottom:-8%;width:135%;height:30%;border-radius:40%;background:#f4f7ff;box-shadow:inset 0 0 0 2px #b8c6df}.keeper-leg{z-index:1;top:65%;width:23%;height:37%;border-radius:0 0 999px 999px;background:#172554;transform-origin:50% 0}.keeper-leg.left{left:23%;rotate:7deg}.keeper-leg.right{right:23%;rotate:-7deg}.penalty-ball-shadow{position:absolute;z-index:3;left:50%;top:89%;width:7%;height:2.5%;translate:-50% -50%;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(2px);transition:left .52s,top .52s,scale .52s,opacity .52s}.penalty-ball{z-index:6;top:84%;transition:left .52s cubic-bezier(.12,.72,.25,1),top .52s cubic-bezier(.12,.72,.25,1),scale .52s,rotate .52s;will-change:left,top,scale,rotate}.penalty-pitch.shooting .penalty-ball{scale:var(--ball-scale,.48);rotate:720deg}.penalty-pitch.shooting .penalty-ball-shadow{left:var(--ball-x);top:calc(var(--ball-y) + 12%);scale:.35;opacity:.15}.penalty-pitch.shooting .penalty-keeper{scale:1.05}.penalty-pitch.miss .penalty-ball{filter:drop-shadow(0 5px 3px rgba(0,0,0,.3)) grayscale(.25)}.penalty-pitch.goal .penalty-goal{animation:net-hit .42s ease-out}.penalty-impact{position:absolute;z-index:7;left:var(--ball-x,50%);top:var(--ball-y,45%);width:12px;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none}.penalty-pitch.goal .penalty-impact{animation:goal-impact .6s ease-out}.penalty-pitch.saved .penalty-impact{animation:saved-impact .45s ease-out}.penalty-pitch strong{bottom:2%;min-width:128px}.penalty-pitch.miss strong{background:#9b5b11}.penalty-power{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px 11px;background:#0a1739}.penalty-power>span,.penalty-power>em{font-size:7px;font-style:normal;font-weight:1000;letter-spacing:.06em}.penalty-power>em{min-width:122px;text-align:right;color:#b9c9e8}.penalty-power>div{position:relative;height:11px;overflow:hidden;border:2px solid #dce7ff;border-radius:999px;background:linear-gradient(90deg,#48c878 0 40%,#ffd64d 40% 72%,#ed554b 72%)}.penalty-power i{display:block;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28))}.penalty-power b{position:absolute;left:var(--power,50%);top:-3px;width:5px;height:17px;translate:-50% 0;border:2px solid #172554;border-radius:3px;background:#fff;box-shadow:0 0 5px #fff;transition:left .04s linear}.penalty-game.power-perfect .penalty-power>em{color:#ffe071}.penalty-game>footer{padding-inline:4px}@keyframes net-hit{40%{transform:perspective(300px) rotateX(-8deg);filter:brightness(1.35)}}@keyframes goal-impact{0%{box-shadow:0 0 0 0 #ffe071,0 0 0 0 #fff}100%{box-shadow:0 0 0 35px transparent,0 0 0 55px transparent}}@keyframes saved-impact{0%{box-shadow:0 0 0 0 #fff}100%{box-shadow:0 0 0 30px transparent}}@media(max-width:600px){.penalty-stadium{margin-top:5px}.penalty-score{top:43px}.penalty-power{grid-template-columns:auto 1fr;padding:7px}.penalty-power>em{grid-column:1/-1;min-width:0;text-align:center}.penalty-target{width:24px}.penalty-pitch strong{min-width:105px}.penalty-keeper{width:10%}}
@media(max-width:900px){.student-map-pad,.museum-mobile-pad{position:absolute;z-index:20;right:2%;left:auto;bottom:2%;transform:none;display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,46px);justify-content:center;gap:6px;margin:0;padding:0}.student-map-pad button,.museum-mobile-pad button{width:54px;height:46px;padding:0;border:2px solid #8398d4;border-bottom-width:5px;border-radius:12px;background:#eef3ff;color:#25459e;font-size:12px;font-weight:1000;line-height:1;box-shadow:0 5px 12px rgba(12,25,62,.25);touch-action:none}.student-map-pad button:active,.museum-mobile-pad button:active{translate:0 3px;border-bottom-width:2px}.student-map-pad button:nth-child(1),.museum-mobile-pad button:nth-child(1){grid-column:2}.student-map-pad button:nth-child(2),.museum-mobile-pad button:nth-child(2){grid-row:2;grid-column:1}.student-map-pad button:nth-child(3),.museum-mobile-pad button:nth-child(3){grid-row:2;grid-column:2;border-color:#d6a62a;background:#ffd34f;color:#73470b;font-size:12px}.student-map-pad button:nth-child(4),.museum-mobile-pad button:nth-child(4){grid-row:2;grid-column:3}.student-map-pad button:nth-child(5),.museum-mobile-pad button:nth-child(5){grid-row:3;grid-column:2}.museum-mobile-pad [data-museum-interact]{font-size:0!important}.museum-mobile-pad [data-museum-interact]:after{content:'E';font-size:12px}.museum-exit-zone{bottom:2%;width:22%;min-width:82px;min-height:7%;z-index:12}.museum-exit-zone:hover,.museum-exit-zone:focus-visible,.museum-exit-zone.near{transform:translateX(-50%) translateY(-2px)}}@media(max-width:560px){.student-map-pad,.museum-mobile-pad{right:1.5%;bottom:1.5%;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,36px);gap:4px}.student-map-pad button,.museum-mobile-pad button{width:42px;height:36px;border-bottom-width:4px;border-radius:9px;font-size:10px}.student-map-pad button:nth-child(3),.museum-mobile-pad button:nth-child(3),.museum-mobile-pad [data-museum-interact]:after{font-size:10px}.museum-mobile-pad [data-museum-interact]{font-size:0!important}.museum-exit-zone{bottom:1.5%;left:30%;width:24%;min-width:78px;min-height:6%;padding:4px}.museum-exit-zone span{font-size:14px}.museum-exit-zone b{font-size:6px}}
@media(max-width:900px){.student-map-pad,.museum-mobile-pad{position:relative;right:auto;left:auto;bottom:auto;transform:none;width:max-content;margin:10px auto 4px}.room-stage .museum-shell{height:auto;min-height:0;overflow:visible;background:transparent}.room-stage .museum-world{width:min(100%,calc(100vh - 170px));height:auto;aspect-ratio:1}.museum-exit-zone{left:50%;bottom:1.5%;width:22%;min-width:76px;min-height:7%;padding:5px}}@media(max-width:560px) and (orientation:portrait){.student-map-pad,.museum-mobile-pad{position:relative;right:auto;left:auto;bottom:auto;margin:10px auto 4px}.room-stage .student-classroom,.room-stage .museum-world{width:100%;height:auto;aspect-ratio:1}.museum-exit-zone{left:50%;bottom:1.5%;width:22%;min-width:72px;min-height:6%;padding:5px}}

/* Keep movement continuous while the directional sprite changes frames. */
.player{
  transition:left .065s linear,top .065s linear;
  will-change:left,top
}
.player.walking{
  animation:player-walk-bounce .3s ease-in-out infinite
}
.player.dragging{
  transition:none
}
@keyframes player-direction-walk{
  0%,49%{background-position:0 var(--player-direction-y);translate:0 0}
  50%,100%{background-position:100% var(--player-direction-y);translate:0 0}
}
@keyframes player-walk-bounce{
  0%,100%{translate:0 0}
  50%{translate:0 -3px}
}

/* The girl's sprite rows have different bounds; keep adjacent heads outside each frame. */
.character-girl .player .player-body{background-size:200% var(--girl-sheet-height,400%)}
.character-girl .player.left{--girl-sheet-height:417.391304%;--player-direction-y:32.876712%}
.character-girl .player.right{--girl-sheet-height:417.391304%;--player-direction-y:64.041096%}
.character-girl .player.up{--girl-sheet-height:362.264151%;--player-direction-y:100%}

/* Interactive classroom diorama; the original map remains the WebGL fallback. */
.room-stage .student-classroom.is-3d{width:100%;height:calc(100dvh - 120px);min-height:520px;max-height:960px;aspect-ratio:auto;border:1px solid #d5dfdc;outline:0;border-radius:24px;background:radial-gradient(ellipse at 50% 45%,#fffdf8,#e8eeed);box-shadow:0 24px 70px #071a3333;font-family:"Poppins",sans-serif}
.student-classroom.is-3d>img,.student-classroom.is-3d>.student-seat,.student-classroom.is-3d:after{display:none}.classroom-render{position:absolute;inset:65px 0 40px}.classroom-render canvas{display:block;width:100%;height:100%;cursor:grab}.classroom-render canvas:active{cursor:grabbing}.classroom-toolbar{position:absolute;z-index:12;inset:18px 22px auto;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#263d45}.classroom-toolbar small{display:block;color:#7d8c80;font-size:9px;letter-spacing:.18em;font-weight:800}.classroom-toolbar strong{display:block;margin-top:5px;font-size:19px}.classroom-toolbar nav{display:flex;flex-wrap:wrap;gap:6px}.classroom-toolbar button{border:1px solid #dfe7e3;border-radius:10px;background:#ffffffed;padding:10px 13px;color:#415453;font:600 11px "Poppins";cursor:pointer;box-shadow:0 4px 12px #25372f09}.classroom-toolbar button:hover,.classroom-toolbar button:focus-visible{background:#dcebe3;outline:2px solid #6e9c86}.classroom-toolbar button:last-child{background:#244a41;color:white}.classroom-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.classroom-label{position:absolute;transform:translate(-50%,-100%);max-width:150px;padding:4px 7px;border:1px solid #ffffffb0;border-radius:7px;background:#f9fff3ee;color:#305341;font:600 9px/1.2 "Poppins";white-space:nowrap;box-shadow:0 3px 9px #192e2926;cursor:pointer;pointer-events:auto;transition:background .3s}.classroom-label[data-mode=write]{background:#fff1cfee;color:#795622}.classroom-label[data-mode=hand]{background:#eadffff2;color:#634297}.classroom-label[data-mode=listen]{background:#d9effbf0;color:#285b75}.classroom-label:hover,.classroom-label:focus-visible{z-index:2;outline:2px solid #355c4b;background:white}.classroom-footer{position:absolute;bottom:14px;left:12px;right:12px;text-align:center;color:#71827a;font:11px "Poppins"}.classroom-lesson{position:absolute;top:76px;left:22px;right:22px;color:#61796b;font:11px "Poppins";pointer-events:none}.student-classroom.classroom-night{background:radial-gradient(ellipse at center,#293d50,#111e30)}.classroom-night .classroom-toolbar{color:#f0f4f1}.classroom-night .classroom-lesson,.classroom-night .classroom-footer{color:#bacabe}.is-3d .student-map-profile{font-family:"Poppins",sans-serif}.is-3d .student-map-profile>button{cursor:pointer}
@media(max-width:700px){.room-stage .student-classroom.is-3d{height:calc(100dvh - 95px);min-height:540px;border-radius:16px}.classroom-toolbar{inset:13px 12px auto;align-items:flex-start;flex-direction:column;gap:10px}.classroom-toolbar strong{font-size:16px}.classroom-toolbar button{padding:8px 10px;font-size:10px}.classroom-render{top:125px;bottom:52px}.classroom-lesson{top:105px;left:12px;font-size:10px}.classroom-label{font-size:8px;padding:3px 5px;max-width:110px;overflow:hidden;text-overflow:ellipsis}.classroom-footer{font-size:10px;padding:0 15px}}
@media(prefers-reduced-motion:reduce){.classroom-label{transition:none}}
.classroom-label.compact{width:19px;height:19px;display:grid;place-items:center;padding:0;border-radius:50%;font-size:8px;opacity:.82}.classroom-label.compact:hover,.classroom-label.compact:focus-visible{opacity:1;scale:1.2}.classroom-label[hidden]{display:none}
/* Current/next lesson and outdoor weather at the school coordinates. */
.classroom-toolbar>div{min-width:0;flex:1}.classroom-toolbar strong{font-size:17px;line-height:1.35;overflow-wrap:anywhere}.classroom-lesson{top:76px;line-height:1.4;right:18px}.classroom-weather{position:absolute;z-index:11;top:101px;left:22px;padding:6px 10px;border:1px solid #d5e2dc;border-radius:9px;background:#ffffffdc;color:#3c6157;font:11px/1.4 "Poppins"}.classroom-weather-source{position:absolute;z-index:11;right:22px;bottom:37px;color:#71827a;font:9px "Poppins";text-decoration:underline}.classroom-render{top:132px}.classroom-night .classroom-weather{background:#263c50;color:#e5f5eb;border-color:#526675}.classroom-night .classroom-weather-source{color:#bacabe}.classroom-label[data-mode=sleep]{background:#e7e4f7}.classroom-label[data-mode=cold]{background:#d5efff;color:#28536e}.classroom-label[data-mode=hot]{background:#ffe2cb;color:#964f26}.classroom-label[data-mode=drink],.classroom-label[data-mode=toilet]{background:#d7f4e4;color:#276347;z-index:3}
@media(max-width:700px){.classroom-toolbar strong{font-size:14px}.classroom-lesson{top:111px;left:12px;font-size:10px}.classroom-weather{top:145px;left:12px;font-size:10px;padding:4px 7px}.classroom-render{top:180px}.classroom-weather-source{bottom:39px;right:12px}.room-stage .student-classroom.is-3d{min-height:620px}}
/* Zoom beside the lesson time; live weather replaces the bottom source caption. */
.classroom-schedule-heading{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:5px}.classroom-schedule-heading strong{margin-top:0}.classroom-zoom{display:inline-flex;gap:4px;flex:none}.classroom-toolbar .classroom-zoom button{display:grid;place-items:center;width:32px;height:30px;padding:0;background:#fff;color:#365b4f;border:1px solid #cbdcd3;font:700 19px "Poppins"}.classroom-toolbar .classroom-zoom button:hover{background:#dcebe3}.classroom-weather{top:auto;left:auto;right:22px;bottom:37px;text-decoration:none}.classroom-weather:hover{text-decoration:underline}.classroom-render{top:105px}
@media(max-width:700px){.classroom-schedule-heading{gap:8px}.classroom-toolbar .classroom-zoom button{width:29px;height:28px}.classroom-lesson{top:123px}.classroom-render{top:158px}.classroom-weather{top:auto;left:auto;right:12px;bottom:39px;font-size:10px}}
/* Championship ceremony inside the shared 3D classroom. */
.ceremony-card{position:absolute;z-index:13;right:20px;bottom:70px;width:245px;max-height:calc(100% - 190px);overflow:auto;padding:18px;border:1px solid #e3d7ab;border-radius:20px;background:linear-gradient(150deg,#fffffff5,#fff8e9f5);box-shadow:0 16px 38px #263d3422;color:#31473e;text-align:center;font-family:"Poppins",sans-serif;backdrop-filter:blur(8px)}.ceremony-kicker{display:block;color:#a38133;font-size:9px;font-weight:800;letter-spacing:.15em}.ceremony-photo{display:grid;place-items:center;width:92px;height:92px;margin:12px auto;border:4px solid white;border-radius:17px;background:#eee3bd;color:#9b7630;font-size:36px;box-shadow:0 5px 14px #6c53211c;overflow:hidden}.ceremony-photo img{width:100%;height:100%;object-fit:cover}.ceremony-counter{font-size:10px;color:#8a9b8c}.ceremony-card h2{margin:6px 0;font-size:23px;overflow-wrap:anywhere}.ceremony-award{display:block;color:#9c721b;font-size:17px;line-height:1.4}.ceremony-card .ceremony-event{margin:9px 0 3px;font-size:12px;line-height:1.5;color:#4d6158;overflow-wrap:anywhere}.ceremony-status{min-height:28px;margin:12px 0 0;font-size:10px;color:#9b7a37}.ceremony-card nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}.ceremony-card nav span{font-size:10px;color:#7b8e7f}.ceremony-card button{width:34px;height:32px;border:1px solid #d9dfd4;border-radius:9px;background:white;color:#47634c;font-size:18px;cursor:pointer}.ceremony-card button:hover{background:#e4eedf}.ceremony-card nav[hidden]{display:none}.is-ceremony .classroom-render{right:245px}.classroom-night .ceremony-card{background:#233a46f5;color:#eff4ee;border-color:#8b805b}.classroom-night .ceremony-card .ceremony-event{color:#d6e1da}
@media(max-width:900px){.ceremony-card{right:12px;bottom:64px;width:200px;padding:12px}.is-ceremony .classroom-render{right:190px}.ceremony-photo{width:70px;height:70px}.ceremony-card h2{font-size:19px}}
@media(max-width:600px){.is-ceremony .classroom-render{right:0;top:150px;bottom:265px}.ceremony-card{bottom:70px;left:12px;right:12px;width:auto;max-height:180px;min-height:150px;padding:12px 12px 12px 90px;text-align:left;overflow:auto}.ceremony-photo{position:absolute;left:12px;top:25px;width:64px;height:64px;margin:0}.ceremony-kicker{font-size:8px}.ceremony-card h2{font-size:18px;margin:3px 0}.ceremony-award{font-size:13px}.ceremony-card .ceremony-event{font-size:10px;margin:3px 0}.ceremony-status{font-size:9px;min-height:0;margin-top:4px}.ceremony-card nav{margin-top:5px}.room-stage .student-classroom.is-ceremony{min-height:800px}.ceremony-card button{height:27px;width:30px}}
/* Compact ceremony footer keeps the achievement at the centre of attention. */
.ceremony-status{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:22px;max-width:100%;margin:10px 0 0;padding:3px 9px;border-radius:20px;background:#b28a2810;font-size:10px;line-height:1.4;overflow-wrap:anywhere}
.ceremony-status:empty{display:none}
.ceremony-status::before{content:'✦';color:#ad822c;font-size:11px}
.ceremony-card nav{justify-content:center;gap:12px;margin-top:8px}
.ceremony-card nav span{display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.04em}
.ceremony-card nav span i{width:5px;height:5px;border-radius:50%;background:#609568;box-shadow:0 0 0 3px #60956818}
.ceremony-card button{width:28px;height:28px;border-radius:50%;font-size:16px;background:#ffffffb3}
.ceremony-card button:focus-visible{outline:2px solid #ad822c;outline-offset:3px}
@media(max-width:600px){.ceremony-card{padding-bottom:10px}.ceremony-status{font-size:9px;margin-top:4px;padding:2px 7px;min-height:18px}.ceremony-card nav{gap:9px;margin-top:5px;justify-content:flex-start}.ceremony-card button{width:25px;height:25px}.ceremony-card nav span{font-size:8px}}