body{background:#e5efe6;color:#234136}header{height:72px;background:#fffffff0;border:0;padding:0 35px}.brand{font-size:24px}.layout{min-height:calc(100vh - 72px)}body:has(.game-home){background:#a8d0b0}body:has(.game-home) .layout{display:block;min-height:calc(100vh - 72px)}body:has(.game-home) aside{display:none}body:has(.game-home) main{max-width:none;margin:0;padding:0}.game-home{min-height:calc(100vh - 72px);position:relative;isolation:isolate;overflow:hidden;background:#bad9b8 url('/school-forest.png') center center / cover no-repeat;display:flex;flex-direction:column;align-items:center;padding:30px 25px 20px}.game-home:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#fcf5d522,transparent 35%,#2947350a);z-index:-1}.game-heading{text-align:center;position:relative;z-index:1;margin-top:4px}.game-heading .eyebrow{color:#385246;letter-spacing:5px;font-size:10px}.game-heading h1{font-size:34px;font-weight:800;letter-spacing:-1px;color:#244838;text-shadow:0 1px 8px #ffffffaa;margin:6px 0}.game-heading p{font-size:12px;color:#3b5e4a;margin:0;letter-spacing:.8px}.portal-grid{display:grid;grid-template-columns:repeat(4,190px);gap:22px;align-items:center;justify-content:center;margin-top:clamp(110px,19vh,200px);width:100%;position:relative}.portal{position:relative;min-height:208px;padding:24px 16px 19px;background:linear-gradient(145deg,#fffcf1f2,#f7f8eee8);border:1px solid #fff9e2;box-shadow:0 4px 0 #64745c66,0 18px 24px #243f3a26,inset 0 0 0 4px #ffffff30;text-align:center;color:#304439;clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,100% 4px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 8px,8px 8px);transition:transform .2s,background .2s;animation:float 5s ease-in-out infinite}.portal:nth-child(2){animation-delay:-1.2s}.portal:nth-child(3){animation-delay:-2.4s}.portal:nth-child(4){animation-delay:-3.6s}.portal:hover{transform:translateY(-8px)!important;background:#fffdf3;box-shadow:0 5px 0 #64745c66,0 25px 30px #243f3a33}.portal .num{position:absolute;left:13px;top:12px;font-size:9px;color:#9a9b88;letter-spacing:1px}.pixel-icon{width:66px;height:66px;image-rendering:pixelated;filter:drop-shadow(0 6px 0 #28473812);margin:0 auto 16px;display:block}.portal h2{font-size:17px;letter-spacing:-.6px;margin:0 0 7px;font-weight:800}.portal .en{font-size:9px;color:#858d7c;letter-spacing:1.7px}.portal .desc{font-size:10px;color:#7c8979;margin:13px 0 0}.portal .tiny-arrow{font-size:12px;margin-top:9px;color:#7a9982}.ramimon-stage{height:110px;display:flex;justify-content:center;align-items:flex-end;width:100%;margin:28px 0 0;position:relative}.ramimon{height:68px;width:68px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 1px #234b3c44);animation:hero-bob 3s steps(2,end) infinite}.ramimon-label{position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:2px;color:#3e5844;background:#fffaf1a6;padding:3px 8px}.game-bottom{display:flex;gap:22px;align-items:center;justify-content:space-between;width:100%;max-width:835px;margin-top:auto;padding-top:40px;color:#375441}.game-bottom .profile-strip{display:flex;gap:20px;border:1px solid #fffef180;background:#fffcf1bd;padding:10px 18px;font-size:10px;align-items:center;backdrop-filter:blur(5px);border-radius:5px}.profile-strip b{font-size:14px;margin-right:4px}.game-bottom button{background:#ffffffb8;font-size:10px;padding:11px 14px;border-radius:5px;color:#45664d}.game-version{font-size:8px;letter-spacing:1.5px;color:#526b50;margin-top:14px}.card,.reader,.cd{background:#fffffff0}aside{background:#eff4ed}nav button.active{background:#46745a}.notice{background:#dfe9dc}.cover{box-shadow:inset 9px 0 #0000000c,0 10px 20px #2d392111}.primary{background:#46745a}nav button{font-size:14px}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}@keyframes hero-bob{0%,100%{translate:0 0}50%{translate:0 -2px}}@media(min-height:950px){.portal-grid{margin-top:23vh}.game-heading{margin-top:20px}}@media(max-width:1050px){.portal-grid{grid-template-columns:repeat(4,165px);gap:16px}.portal{min-height:195px}.game-bottom{max-width:710px}}@media(max-width:780px){.portal-grid{grid-template-columns:repeat(2,minmax(145px,190px));gap:16px;margin-top:70px}.portal{min-height:175px;padding:20px 12px 15px}.pixel-icon{width:51px;height:51px;margin-bottom:12px}.portal .desc{margin-top:9px}.game-home{min-height:calc(100vh - 72px);background-position:center}.game-heading h1{font-size:27px}.ramimon-stage{margin-top:15px;height:80px}.game-bottom{padding-top:40px}.profile-strip{gap:10px!important}.game-bottom button{font-size:9px}}@media(prefers-reduced-motion:reduce){.portal,.ramimon{animation:none}}
/* Landscape tablet composition: four floating portals, small sprite below. */
@media(min-width:781px){.game-home{height:calc(100svh - 72px);min-height:610px;padding-top:27px}.portal-grid{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);margin:0;width:auto}.portal{min-height:205px}.ramimon-stage{position:absolute;bottom:107px;height:75px;margin:0}.game-bottom{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);margin:0;padding:0}.game-version{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap}}
.portal{background:linear-gradient(145deg,#264d3deb,#1d3c32f2);border:1px solid #e5d8a699;color:#fff7df;box-shadow:0 4px 0 #213a2fb8,0 18px 24px #243f3a30,inset 0 0 0 4px #f7e5ab10}.portal:hover{background:linear-gradient(145deg,#315b46f5,#264c3df9)}.portal .num{color:#b9c4a3}.portal .en{color:#c9c9aa}.portal .desc{color:#c3d0b9}.portal .tiny-arrow{color:#d2c88e}.pixel-icon{filter:drop-shadow(0 7px 0 #0f281f40)}.game-heading h1{text-shadow:0 1px 8px #ffffff70}.ramimon{height:64px;width:64px}
.guest-home aside,.guest-home body>header{display:none}
body.guest-home>header{display:none}
body.guest-home .layout{display:block!important;min-height:100dvh}
body.guest-home #main{margin:0;width:100%;max-width:none;padding:24px;box-sizing:border-box}
.home-login{min-height:calc(100dvh - 48px);display:grid;place-items:center}
.guest-home #main{background:transparent!important}
body.guest-home{background:#edf4fc url('/quiet-forest.png') center center / cover no-repeat fixed!important}
body.guest-home .home-login{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:38px;background:transparent}
body.guest-home .home-login .ramimon-stage{position:relative;inset:auto;transform:none;width:min(620px,calc(100% - 24px));height:80px;margin:0;flex-shrink:0;overflow:visible}
.home-login-card{width:min(100%,380px);padding:32px;box-sizing:border-box;background:#fffdf8;border:1px solid #cbd5dc;border-radius:22px;box-shadow:0 12px 36px #34495e14;text-align:center}
.home-login-card h1{font-size:28px;margin:12px 0}
.home-login-card>p{color:#637580;font-size:14px}
.home-login-card .staff-form{text-align:left;padding:0;border:0;background:transparent}
.home-login-card .staff-form input{width:100%;box-sizing:border-box}
.home-login-card .staff-form>button{width:100%;margin-top:8px}
.home-staff-login{margin-top:12px;background:transparent;color:#637580;font-size:12px}
.home-learning{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.home-learning article{padding:20px;text-align:left;background:#fffdf8;border:1px solid #cbd5dc;border-radius:16px;min-width:0}
.home-learning h2{font-size:18px;margin:0 0 12px}
.home-learning p,.home-learning li{font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.home-learning ol{padding-left:22px}
.home-learning small{display:block;margin-bottom:10px;color:#637580}
@media(max-width:640px){.home-learning{grid-template-columns:1fr}.home-login-card{padding:24px}}
#academyWeather{position:fixed;bottom:14px;left:18px;z-index:20;display:flex;align-items:center;gap:10px;padding:0;background:transparent;color:#343a40;font-size:12px;font-weight:500;letter-spacing:.3px;text-shadow:0 1px 3px #fff}
#academyWeather .weather-symbol{display:inline-flex;color:inherit;text-decoration:none;line-height:1}
#academyWeather[hidden]{display:none}
body.guest-home #main{padding-bottom:64px}
body[data-weather~="cloudy"].guest-home{background-image:linear-gradient(#c4cddd55,#b9c8d144),url('/quiet-forest.png')!important}
body[data-weather~="rain"].guest-home{background-image:linear-gradient(#657c9566,#9fb4cb55),url('/quiet-forest.png')!important}
body[data-weather~="snow"].guest-home{background-image:linear-gradient(#e5eff88c,#ffffff66),url('/quiet-forest.png')!important}
body[data-weather~="night"].guest-home{background-image:linear-gradient(#122747aa,#23395388),url('/quiet-forest.png')!important}
body[data-weather~="cloudy"] .game-home:before{background-image:linear-gradient(#c4cddd55,#b9c8d144),url('/quiet-forest.png')}
body[data-weather~="rain"] .game-home:before{background-image:linear-gradient(#657c9566,#9fb4cb55),url('/quiet-forest.png')}
body[data-weather~="snow"] .game-home:before{background-image:linear-gradient(#e5eff88c,#ffffff66),url('/quiet-forest.png')}
body[data-weather~="night"] .game-home:before{background-image:linear-gradient(#122747aa,#23395388),url('/quiet-forest.png')}

/* Compact student overview, leaving more of the plaza visible. */
body .game-home .home-learning{width:min(600px,calc(100% - 24px));gap:12px;margin:12px auto}
body .game-home .home-learning article{padding:12px 15px;border-radius:11px;background:#fbfdfff5}
body .game-home .home-learning h2{font-size:14px;margin:0 0 7px;line-height:1.5}
body .game-home .home-learning p,body .game-home .home-learning li{font-size:12px;line-height:1.55;margin:5px 0}
body .game-home .home-learning ol{margin:6px 0;padding-left:18px;max-height:95px;overflow:auto}
body .game-home .home-learning button{padding:8px 12px;font-size:12px;border-radius:7px;margin-top:5px}
body .game-home .home-learning small{font-size:10px;margin-bottom:5px}

/* Wider translucent overview on landscape tablets and desktop only. */
@media(min-width:781px){
 body .game-home .home-learning{width:min(1080px,calc(100% - 96px));gap:16px;margin:12px auto}
 body .game-home .home-learning article{padding:10px 16px;background:rgba(255,255,255,.48);border:1px solid #ffffff8c;box-shadow:0 3px 12px #29446608;backdrop-filter:blur(3px);max-height:142px;overflow:auto}
 body .game-home .home-learning h2{font-size:14px;margin-bottom:4px}
 body .game-home .home-learning p{margin:4px 0}
 body .game-home .home-learning ol{max-height:44px;margin:4px 0}
 body .game-home .home-learning button{padding:6px 12px;font-size:11px;margin-top:3px}
 body .game-home .portal-grid{top:60%}
}
@media(min-width:781px) and (max-height:700px){
 body .game-home:has(.home-learning){height:auto;min-height:680px}
}

/* Plaza records: a destination on the ground, separate from learning cards. */
#main .game-home.plaza-records{justify-content:flex-start;padding-top:30px;padding-bottom:170px}
#main .plaza-records .game-heading{margin:0 auto}
#main .plaza-records .portal-grid{grid-template-columns:repeat(5,minmax(0,1fr));width:min(1040px,calc(100% - 24px));margin-top:clamp(65px,13svh,150px)}
#main .plaza-records .records-chest{position:absolute;right:clamp(20px,5vw,80px);bottom:24px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:0;width:116px;padding:6px;background:transparent;border:0;box-shadow:none;color:#344b70;cursor:pointer}
#main .records-chest .pixel-icon{width:88px;height:88px;margin:0;filter:drop-shadow(0 5px 2px #293a4e45);image-rendering:pixelated}
#main .records-chest>span{font-size:13px;font-weight:700;padding:4px 12px;border-radius:20px;background:#edf4ffbd;animation:recordLabelGlow 3.6s ease-in-out infinite}
#main .records-chest:hover .pixel-icon{filter:drop-shadow(0 0 9px #fff3bf)}
#main .records-chest:focus-visible{outline:3px solid #5479bc;outline-offset:4px;border-radius:14px}
#main .plaza-records .ramimon-stage.walking-stage{left:24px;right:170px;transform:none;width:auto;max-width:1000px;bottom:28px}
@keyframes recordLabelGlow{0%,100%{box-shadow:0 0 6px #e5efff80;text-shadow:0 0 3px white}50%{box-shadow:0 0 18px #e5efffe0;text-shadow:0 0 7px white}}
@media(max-width:780px){#main .plaza-records .portal-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:min(410px,100%);margin-top:35px}#main .plaza-records .portal-grid>.portal:last-child{grid-column:1/-1;width:calc(50% - 7px);justify-self:center}#main .plaza-records .ramimon-stage.walking-stage{position:absolute;left:12px;right:135px;margin:0;bottom:20px}#main .plaza-records .records-chest{right:12px;bottom:20px;width:104px}#main .records-chest .pixel-icon{width:76px;height:76px}}
@media(prefers-reduced-motion:reduce){#main .records-chest>span{animation:none;box-shadow:0 0 9px #e5efffa0}}

/* Stable desktop controls: surplus space belongs outside the content. */
@media(min-width:781px){
 body #main .game-home.plaza-records{justify-content:flex-start;padding:32px 24px 170px;min-height:calc(100svh - 44px);height:auto;box-sizing:border-box}
 body #main .game-home .game-heading{margin:0 auto;padding:5px 16px}
 body #main .game-home .game-heading h1{font-size:22px;line-height:1.3}
 body #main .game-home .game-heading p{font-size:10px}
 body #main .game-home .portal-grid{grid-template-columns:repeat(3,180px);width:auto;max-width:100%;gap:18px;margin:150px auto 0;position:relative;top:auto;left:auto;transform:none}
 body #main .game-home .portal-grid>.portal{width:180px;height:180px;min-height:180px;box-sizing:border-box;padding:20px 10px 16px;grid-column:auto;aspect-ratio:auto}
 body #main .game-home .portal-grid>.portal h2{font-size:15px}
 body #main .game-home .portal-grid>.portal .desc{font-size:10px;display:block}
 body #main .game-home .portal-grid>.portal .pixel-icon{width:58px;height:58px;margin-bottom:13px}
 body #main .game-home:before{background-position:center top}
}
@media(min-width:1240px){body #main .game-home .portal-grid{grid-template-columns:repeat(6,180px)}}
@media(max-width:780px){body #main .game-home:before{background-position:center top}body #main .game-home .portal-grid{max-width:410px} }