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}