.learn-page{max-width:1240px;margin:auto;padding:20px}.learn-page>h1{font-size:1.7rem;margin:8px 0}.learn-page>p{margin:8px 0 18px}.beach{--ink:#4e260b;--tile:clamp(64px,9.8vw,122px);position:relative;isolation:isolate;aspect-ratio:16/9;background:#ffe5ab url('./assets/background.webp') center/cover;color:var(--ink);font-family:'Zen Maru Gothic',sans-serif;font-weight:900;border:5px solid #fff6dc;border-radius:24px;overflow:hidden;container-type:inline-size}.beach *{box-sizing:border-box}.beach button{font:inherit;color:inherit;border:2px solid #945322;border-radius:14px;background:#fff1cd;padding:8px 15px;cursor:pointer;min-height:42px}.beach button:hover{filter:brightness(1.06)}.beach button:focus-visible{outline:4px solid #006b87;outline-offset:3px}.beach button:disabled{cursor:default;opacity:1}.beach [hidden]{display:none!important}.beach .primary,.beach .answer{border:0;background:transparent url('./assets/button.webp') center/100% 100%;padding:12px 30px;min-height:58px}.game-tools{position:absolute;top:2%;right:2%;display:flex;gap:6px;z-index:4}.game-tools button{font-size:clamp(11px,1.15cqw,16px);padding:6px 9px}.game-tools button[aria-pressed=true]:not(#fullscreen)::after{content:' ON';color:#086549}.game-tools button[aria-pressed=false]:not(#fullscreen)::after{content:' OFF'}.game-tools button:disabled{opacity:.5}#scene{height:100%}.menu,.play,.result{height:100%;position:relative;padding:7% 5% 3%}.sign{background:url('./assets/sign.webp') center/100% 100%;padding:22px 30px;text-align:center}.menu h2{position:absolute;top:9%;left:6%;font-size:clamp(24px,4.2cqw,58px);line-height:1.3;margin:0;text-shadow:2px 2px #fff7df}.menu h2 strong{color:#056f96}.menu-castle{position:absolute;left:35%;top:22%;width:42%;height:64%}.pyramid{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;padding-top:8%}.tier{display:flex;gap:3px;align-items:end}.block{background:url('./assets/block.webp') center/100% 100%;width:var(--tile);height:calc(var(--tile)*.65);display:grid;place-items:center;font-family:'Fredoka','Zen Maru Gothic',sans-serif;font-size:calc(var(--tile)*.46);font-weight:700;line-height:1;text-shadow:0 1px #ffe2a0}.flag{height:17%;position:absolute;bottom:88%;left:48%;width:auto}.join{height:14px;line-height:14px;text-align:center;font-size:18px;color:#562b0d;position:relative;width:calc(var(--tile)*1.1)}.join:before,.join:after{content:'';position:absolute;width:35%;height:2px;background:#78451f;top:7px}.join:before{left:0;transform:rotate(-17deg)}.join:after{right:0;transform:rotate(17deg)}.join.lower{width:calc(var(--tile)*2.05);display:flex;justify-content:space-around}.join.lower:before,.join.lower:after{display:none}.intro{position:absolute;left:5%;top:49%;width:28%;font-size:clamp(14px,1.8cqw,25px)}.intro p{margin:0 0 6px}.start-area{position:absolute;right:5%;bottom:7%;text-align:center}.start-area button{font-size:clamp(20px,2.6cqw,34px)}.start-area p{margin:6px}.play-head{position:absolute;top:3%;left:4%;width:39%}.play-head h2{font-size:clamp(17px,2cqw,27px);margin:0 0 6px}.stats{display:flex;gap:18px;justify-content:center;padding:12px 20px;font-size:clamp(13px,1.65cqw,22px)}.build{position:absolute;left:8%;top:28%;width:48%;height:45%}.lesson{position:absolute;right:5%;top:28%;width:35%;min-height:36%;font-size:clamp(14px,1.7cqw,24px)}.lesson p{margin:5px}.lesson .equation{font-size:clamp(20px,2.7cqw,35px);white-space:nowrap}.lesson small{font-size:.8em}.choices{position:absolute;bottom:8%;left:8%;width:49%;display:flex;gap:12px}.answer{flex:1;font-family:'Fredoka',sans-serif!important;font-size:clamp(25px,3.2cqw,43px)!important;padding:8px!important}.answer.correct{outline:4px solid #08725e;outline-offset:2px}.play-actions{position:absolute;bottom:8%;right:5%;width:34%;display:flex;gap:10px;justify-content:center}.play-actions button{font-size:clamp(12px,1.5cqw,20px)}.result h2{position:absolute;left:5%;top:5%;margin:0;font-size:clamp(20px,2.7cqw,36px)}.result-score{position:absolute;left:6%;top:12%;font-size:clamp(19px,2.5cqw,34px)}.result-score b{color:#b53b1d;font-size:1.7em}.castles{position:absolute;left:5%;top:31%;width:62%;height:53%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:10px}.beach .castle{position:relative;padding:0;border:0;background:none;min-height:0}.castle img{height:100%;width:100%;object-fit:contain}.castle b{position:absolute;top:49%;left:0;width:100%;font-size:clamp(18px,2cqw,28px)}.castle span{position:absolute;bottom:0;left:10%;width:80%;border-radius:12px;background:#fff2d6;font-size:clamp(10px,1cqw,14px);border:1px solid #956328}.castle[aria-pressed=true]{outline:3px solid #007d94;outline-offset:2px;border-radius:10px}.review{position:absolute;right:3%;top:36%;width:28%;padding:22px 20px;font-size:clamp(11px,1.3cqw,18px)}.review h3{margin:0 0 8px}.review b{font-size:1.4em;white-space:nowrap}.review p{margin:10px 0}.result-actions{position:absolute;right:4%;bottom:8%;width:27%;display:grid;gap:5px}.result-actions button{font-size:clamp(12px,1.4cqw,19px)}.sheet{position:absolute;inset:0;z-index:10;background:#3b302bab;display:grid;place-items:center;padding:15px}.sheet>div{background:#fff3d8;border:5px solid #e1ba80;border-radius:22px;padding:20px;max-width:560px;max-height:100%;overflow:auto;box-shadow:0 8px 30px #39200b55}.sheet h2{margin:0 0 14px}.sheet button{margin:4px}.sheet p{line-height:1.6}.beach:fullscreen{width:100vw;height:100dvh;border:0;border-radius:0;--tile:min(10vw,18vh)}@media(max-width:600px) and (orientation:portrait){.learn-page{padding:10px}.beach{aspect-ratio:auto;height:720px;--tile:25cqw}.game-tools{top:10px;left:8px;right:8px;gap:4px;justify-content:center;flex-wrap:wrap}.game-tools button{font-size:11px;padding:5px;min-height:36px}.menu h2{top:14%;left:8%;font-size:9cqw}.menu-castle{top:32%;left:8%;width:84%;height:33%}.intro{top:69%;left:7%;width:47%;font-size:4cqw;padding:18px}.start-area{bottom:10%;right:4%;width:41%}.start-area button{font-size:5cqw;padding:12px 22px}.start-area p{font-size:12px}.play-head{top:13%;left:6%;width:88%}.play-head h2{font-size:6cqw;text-align:center}.stats{font-size:4cqw;padding:13px}.build{top:29%;left:6%;width:88%;height:28%}.flag{height:21%;bottom:92%}.lesson{top:59%;left:7%;width:86%;min-height:0;padding:15px 25px;font-size:4cqw}.lesson .equation{font-size:6cqw}.lesson small{display:none}.choices{left:6%;width:88%;bottom:12%;gap:8px}.answer{font-size:8cqw!important;min-height:60px!important}.play-actions{bottom:3%;right:6%;width:88%}.play-actions button{font-size:4cqw;min-height:44px}.result h2{top:13%;left:5%;font-size:6cqw}.result-score{top:17%;left:6%;font-size:5cqw}.castles{top:30%;left:6%;width:88%;height:37%;gap:8px;grid-template-columns:repeat(5,1fr)}.castle b{font-size:5cqw}.castle span{font-size:9px;left:0;width:100%}.review{top:69%;left:6%;width:88%;font-size:3.5cqw;padding:12px 24px}.review h3,.review p{margin:4px}.result-actions{bottom:2%;right:6%;width:88%;display:flex;justify-content:center}.result-actions button{font-size:3.6cqw;padding:10px 20px}.beach:fullscreen{height:100dvh;--tile:25cqw}.sheet>div{font-size:14px}}@media(max-height:450px) and (orientation:landscape){.beach:fullscreen{--tile:18vh}.game-tools button{min-height:30px;padding:3px 6px}.lesson{padding:12px 22px}.lesson small{display:none}.beach .answer,.beach .primary{min-height:42px}.play-head h2{margin:0}.stats{padding:10px}.join{height:9px;line-height:9px;font-size:14px}.join:before,.join:after{top:4px}}
/* Keep the flag attached to the top block at every size. */
.pyramid{height:auto;width:max-content;position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding-top:0}.flag{bottom:100%;height:calc(var(--tile)*.48);left:49%}.menu-castle{--tile:min(13cqw,180px)}.build{--tile:min(12cqw,164px)}.menu .start-area{right:8%;bottom:7%}.menu .start-area button{min-width:210px}.menu h2{left:6%;top:10%;background:#fff4dccc;border-radius:20px;padding:10px 20px}.build{top:24%;height:49%}@media(max-width:600px) and (orientation:portrait){.menu-castle,.build{--tile:25cqw}.menu h2{top:13%;padding:8px 12px;font-size:8cqw}.menu .start-area{right:4%;bottom:10%}.menu .start-area button{min-width:0}.build{top:29%;height:28%}.flag{bottom:100%;height:calc(var(--tile)*.48)}}@media(max-height:450px) and (orientation:landscape){.menu-castle,.build{--tile:min(12cqw,18vh)}}

@media(max-width:600px) and (orientation:portrait){.castle span{bottom:calc(50% - 12cqw);font-size:11px;line-height:1.4}.castle[aria-pressed=true]{outline-offset:0}}

.beach:fullscreen .build{--tile:min(12cqw,22vh)}.beach:fullscreen .menu-castle{--tile:min(13cqw,24vh)}@media(max-width:600px) and (orientation:portrait){.beach:fullscreen .build,.beach:fullscreen .menu-castle{--tile:25cqw}}@media(max-height:450px) and (orientation:landscape){.beach:fullscreen .build,.beach:fullscreen .menu-castle{--tile:18vh}}