*{box-sizing:border-box}body{margin:0;background:#f3f1e7;color:#283d34;font-family:"Zen Maru Gothic",sans-serif}.quest-page{width:min(1240px,calc(100% - 24px));margin:20px auto}.quest-page>h1{margin:12px 0 4px}.parent-note{font-size:14px;line-height:1.9;margin:18px 4px}#host{container-type:inline-size;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:20px;border:3px solid #5e7662;background:#abd3a4 url('./assets/grass.webp') center/cover;color:#243b31}#host button{font-family:inherit;font-size:clamp(12px,1.55cqw,20px);font-weight:900;border:2px solid #8d9b81;border-radius:12px;background:#fff9e8;color:#263f33;padding:.5em .75em;cursor:pointer;line-height:1.4;touch-action:manipulation}#host button:hover{filter:brightness(1.04)}#host button:focus-visible{outline:4px solid #186cbb;outline-offset:3px}#host button:disabled{cursor:default}#host button.teal-button{background:#236d61;color:#fff;border-color:#154f44}#host [hidden]{display:none!important}#base{height:100%;display:grid;grid-template-rows:9% 1fr;position:relative}.quest-top{display:flex;align-items:center;justify-content:space-between;padding:.4% 1.5%;background:#fffae8f2;border-bottom:2px solid #779470}.quest-top>strong{font-size:clamp(15px,2cqw,27px)}.top-tools{display:flex;gap:.4cqw}.top-tools button{font-size:clamp(11px,1.25cqw,16px)!important;padding:.25em .65em!important}.paper{background:#fff0c9 url('./assets/paper.webp') center/100% 100%;border-radius:10px}#map{min-height:0;display:grid;grid-template-rows:19% 12% 1fr 26%;padding:1% 2%;gap:1%}#worlds{display:grid;grid-template-columns:repeat(5,1fr);gap:1%}#worlds button{position:relative;display:flex;align-items:center;justify-content:center;gap:3%;padding:.3em!important;font-size:clamp(11px,1.5cqw,19px)!important;background:#fffcf3ef}#worlds img{width:32%;height:75%;object-fit:cover;border-radius:50%}#worlds button[aria-pressed="true"]{border:3px solid #276d60;box-shadow:0 0 0 2px #fff8ce}.map-heading{text-align:center;display:flex;align-items:center;justify-content:center;gap:2%;padding:0 2%;margin:auto;width:max-content;max-width:100%;height:100%}.map-heading h2{white-space:nowrap;flex-shrink:0;font-size:clamp(18px,2.3cqw,30px);margin:0}.map-heading p{font-size:clamp(11px,1.4cqw,18px);margin:0}.trail{min-height:0;position:relative}.trail svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.trail path{stroke:#f3e4ab;stroke-width:25;fill:none;stroke-linejoin:round;stroke-linecap:round}#path{position:relative;z-index:1;height:100%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:1fr 1fr;gap:2% 6%;align-items:center;justify-items:center;padding:0 3%}#path button{border:2px solid #577d65;background:transparent url('./assets/node.webp') center/100% 100%;border-radius:50%;width:min(8cqw,90%);aspect-ratio:1;padding:0!important;display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1;font-family:Fredoka,sans-serif;font-size:clamp(22px,3.1cqw,40px);box-shadow:0 2px 1px #3e513642}#path button:nth-child(6){grid-column:5;grid-row:2}#path button:nth-child(7){grid-column:4;grid-row:2}#path button:nth-child(8){grid-column:3;grid-row:2}#path button:nth-child(9){grid-column:2;grid-row:2}#path button:nth-child(10){grid-column:1;grid-row:2}#path button:disabled{filter:grayscale(.85);color:#5e6059;border-color:#828575;background-color:#b7bcb0}#path button.done{border:3px solid #b87818}.stage-stars{display:flex;justify-content:center;height:1.7cqw;width:75%;margin-top:1%}.stage-stars img{width:33.333%;height:100%;object-fit:contain}.star-empty{filter:grayscale(1);opacity:.32}#path .lock{font-family:inherit;font-size:clamp(8px,1cqw,13px);font-weight:900;margin-top:3%}.passport{display:grid;grid-template-columns:6% 28% 1fr 17%;grid-template-rows:1fr 24%;align-items:center;gap:0 1%;padding:1% 2%;min-height:0}.compass{width:100%;height:90%;object-fit:contain;grid-row:1/3}.progress{display:flex;justify-content:space-around;gap:2%;text-align:center;align-items:center;grid-row:1/3}.progress p{margin:0;font-size:clamp(10px,1.15cqw,15px)}.progress strong{display:block;font:700 clamp(17px,2cqw,26px) Fredoka,sans-serif;margin-top:4%}#badges{display:flex;align-items:center;justify-content:center;gap:3%;height:100%;grid-row:1/3}#badges figure{margin:0;width:17%;text-align:center;font-size:clamp(9px,1.05cqw,14px)}#badges img{width:65%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:3px solid #b27825}#badges figure:not(.earned) img{filter:grayscale(1);opacity:.4}#reset{font-size:clamp(10px,1.2cqw,16px)!important}#save-note{text-align:center;font-size:clamp(8px,.9cqw,12px)}
#play{min-height:0;display:grid;grid-template-rows:12% 1fr 26% 10%;gap:2%;padding:1.5% 18%}.quiz-strip{display:flex;align-items:center;justify-content:space-around;padding:1% 2%;gap:3%;font-size:clamp(12px,1.65cqw,21px)}#quiz-stage{font-size:clamp(12px,1.6cqw,20px)}#hearts{color:#a53f3b;letter-spacing:.15em;white-space:nowrap}.question-paper{display:grid;grid-template-rows:19% 1fr 22%;align-items:center;text-align:center;padding:2% 5%;min-height:0}#question-label{font-size:clamp(13px,1.8cqw,23px);margin:0}#question{font:700 clamp(34px,5.6cqw,72px)/1.2 Fredoka,sans-serif}#feedback{font-size:clamp(13px,1.6cqw,21px);font-weight:900;margin:0;min-height:1.5em}#host[data-correct="true"] #feedback{color:#1f6b4d}#host[data-correct="false"] #feedback{color:#963d33}#answers{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:9% 4%}#answers button{font:700 clamp(24px,3cqw,40px) Fredoka,sans-serif;padding:0;background:#fff4d4;border:3px solid #957c40;box-shadow:0 3px 0 #856836}#answers button[aria-disabled="true"]{cursor:default}#answers button[data-correct="true"]{background:#d2edd5;border-color:#26724d}#answers button[data-wrong="true"]{background:#f6d9ce;border-color:#a14235}.quiz-bottom{display:flex;justify-content:space-between;align-items:center;font-size:clamp(12px,1.4cqw,18px);font-weight:900}.quiz-bottom span{background:#fff9e8ec;padding:.2em .8em;border-radius:8px}.quiz-bottom button{font-size:clamp(11px,1.25cqw,16px)!important}#host[data-fraction="true"] .question-paper{grid-template-rows:18% 1fr 20% 18%}#host[data-fraction="true"] #question{font-size:clamp(21px,3cqw,40px);display:flex;align-items:center;justify-content:center;gap:.4em}.fraction{display:inline-grid;grid-template-rows:1fr 1fr;text-align:center;line-height:1.1}.fraction span:first-child{border-bottom:2px solid #294f46;padding:0 .2em .06em}.fraction span:last-child{padding:.06em .2em 0}#fraction-bar{height:70%;display:flex;justify-content:center;gap:2px;width:80%;margin:auto;border:2px solid #406c56;background:#fff9e4;padding:2px;border-radius:4px}#fraction-bar i{flex:1;background:#f6ebcc;border-right:1px solid #55725f}#fraction-bar i:last-child{border:0}#fraction-bar i.filled{background:#45916a}
#result{margin:2% 17%;padding:3% 6%;display:flex;align-items:center;flex-direction:column;justify-content:space-around;position:relative;text-align:center;min-height:0}#result h2{font-size:clamp(21px,3.3cqw,44px);margin:0}#result-stage{font-size:clamp(12px,1.7cqw,22px);margin:0}.result-compass{position:absolute;left:3%;top:6%;width:9%;height:15%;object-fit:contain}#result-stars{display:flex;height:23%;gap:4%}#result-stars img{height:100%;aspect-ratio:1;object-fit:contain}.result-score{font-size:clamp(15px,2cqw,27px);margin:0}.result-score strong{font:700 clamp(32px,4.7cqw,64px) Fredoka,sans-serif}#result-note,#result-time{font-size:clamp(12px,1.55cqw,20px);margin:0;max-width:100%}.result-tools{display:flex;justify-content:center;gap:3%;width:100%}.result-tools button{font-size:clamp(12px,1.5cqw,19px)!important;white-space:nowrap}
#modal{position:absolute;inset:0;background:#203729a8;display:grid;place-items:center;padding:3%;z-index:20}.dialog{width:min(820px,92%);max-height:100%;padding:3% 4%;overflow:auto;box-shadow:0 8px 40px #18251c77}.dialog header{display:flex;justify-content:space-between;gap:15px;align-items:center}.dialog h2{font-size:clamp(18px,2.6cqw,28px);margin:0}.dialog p{font-size:clamp(14px,1.75cqw,22px);line-height:1.8}.dialog small{font-size:clamp(12px,1.3cqw,16px);line-height:1.8;display:block}.dialog button{margin:8px 5px 8px 0}.dialog label{display:block;margin-top:18px;font-weight:900}.dialog input[type=range]{width:100%;height:44px;accent-color:#286f5b}#host:fullscreen{width:100vw;height:100dvh;max-height:none;border-radius:0;aspect-ratio:auto;display:grid;place-items:center;background-color:#1e3025}#host:fullscreen #base{width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw);aspect-ratio:16/9}#host:fullscreen #modal{padding:2%}#host:fullscreen .dialog{font-size:20px}
@media(max-width:600px) and (orientation:portrait){.quest-page{width:calc(100% - 16px);margin:12px auto}.quest-page>h1{font-size:24px}#host{height:840px;aspect-ratio:auto;border-radius:15px}#base{grid-template-rows:77px 1fr}.quest-top{flex-direction:column;justify-content:center;gap:7px;padding:7px}.quest-top>strong{font-size:20px}.top-tools{gap:5px}.top-tools button{font-size:11px!important;padding:4px 8px!important}#map{grid-template-rows:135px 72px 1fr 180px;padding:9px;gap:9px}#worlds{grid-template-columns:repeat(3,1fr);gap:5px}#worlds button{font-size:12px!important;flex-direction:column;gap:1px}#worlds img{width:32px;height:25px;border-radius:8px}.map-heading{width:100%;flex-direction:column;gap:4px}.map-heading h2{white-space:nowrap;flex-shrink:0;font-size:21px}.map-heading p{font-size:12px}.trail svg{display:none}#path{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr);gap:5px 15px;padding:0 16%}#path button,#path button:nth-child(n){grid-column:auto;grid-row:auto;width:55px;height:55px;font-size:23px;aspect-ratio:1}.stage-stars{height:12px;width:37px}#path .lock{font-size:9px}.passport{grid-template-columns:1fr 95px;grid-template-rows:44px 71px 38px 16px;padding:5px 9px;gap:0}.compass{display:none}.progress{grid-column:1/3;grid-row:1;justify-content:space-evenly}.progress p{font-size:10px}.progress strong{font-size:20px;margin:0}#badges{grid-column:1/3;grid-row:2}#badges figure{font-size:10px;width:17%}#badges img{width:31px;height:31px}#reset{grid-column:1/3;grid-row:3;font-size:12px!important;justify-self:center;padding:5px 14px!important}#save-note{grid-column:1/3;grid-row:4;font-size:9px}
#play{grid-template-rows:60px 1fr 180px 45px;padding:12px;gap:14px}.quiz-strip{flex-wrap:wrap;font-size:14px;padding:7px}#quiz-stage{width:100%;text-align:center;font-size:15px}#hearts{font-size:18px}.question-paper{padding:18px 14px;grid-template-rows:28px 1fr 45px}#question-label{font-size:18px}#question{font-size:clamp(36px,12cqw,48px)}#feedback{font-size:15px}#answers button{font-size:31px}.quiz-bottom{font-size:13px}.quiz-bottom button{font-size:12px!important}#host[data-fraction="true"] .question-paper{grid-template-rows:45px 1fr 52px 45px}#host[data-fraction="true"] #question{font-size:31px}#fraction-bar{width:100%;height:32px}#result{margin:16px 12px;padding:25px 17px}#result h2{font-size:27px}#result-stage{font-size:15px}.result-compass{position:static;width:52px;height:70px}#result-stars{height:65px;gap:4px}#result-stars img{width:65px}#result .result-score{font-size:18px}.result-score strong{font-size:47px}#result-note,#result-time{font-size:15px}.result-tools{flex-direction:column;gap:9px}.result-tools button{font-size:16px!important;white-space:normal;padding:9px!important}.dialog{width:96%;padding:18px}.dialog h2{font-size:21px}.dialog p{font-size:15px}.dialog small{font-size:12px}.dialog button{font-size:14px!important}#host:fullscreen{height:100dvh}#host:fullscreen #base{width:100vw;height:100dvh;aspect-ratio:auto}}
@media(max-width:350px) and (orientation:portrait){#map{padding:7px;gap:7px;grid-template-rows:135px 76px 1fr 180px}#path{padding:0 13%}#question{font-size:35px}#quiz-stage{font-size:13px}.top-tools button{padding:4px 6px!important}.map-heading p{font-size:11px}.dialog{padding:13px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

@media(max-height:550px) and (orientation:landscape){.quest-page{margin:8px auto}#host{width:min(100%,calc((100dvh - 16px)*16/9));margin:auto}.quest-top>strong{font-size:16px}.top-tools button{font-size:10px!important}.map-heading h2{font-size:18px}.map-heading p{font-size:11px}.dialog p{font-size:14px}.dialog small{font-size:12px}}