:root{--teal:#008e89;--dark:#085a5b;--yellow:#ffdc48;--cream:#fff8e9;--ink:#144e50;--shadow:0 7px 0 #d6c6a93b,0 4px 22px #62471d14}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--cream);font-family:ui-rounded,'Trebuchet MS',Arial,sans-serif;overflow:hidden}button,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.55}button:focus-visible,input:focus-visible{outline:4px solid #ec9800;outline-offset:3px}button{border:0}button:active:not(:disabled){translate:0 2px}svg{width:1.35em;height:1.35em;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}#app{height:100dvh;display:grid;grid-template-rows:clamp(64px,10dvh,92px) minmax(0,1fr) clamp(50px,9dvh,80px);max-width:1600px;margin:auto}header{background:linear-gradient(120deg,#00a5a0,#007e7d);border-radius:0 0 30px 30px;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 25px;box-shadow:0 5px 0 #00757425;gap:15px;z-index:2}.brand{font-size:clamp(25px,3.4vw,47px);font-weight:900;text-align:center;letter-spacing:-1px}.brand span{display:block;font-size:11px;font-weight:600;letter-spacing:1.3px;margin-top:2px}.header-actions{display:flex;gap:12px}.icon{width:52px;height:48px;display:grid;place-items:center;border-radius:17px;font-size:22px;box-shadow:0 4px 0 #805c1425}.yellow{background:var(--yellow);color:var(--dark)}main{min-height:0;position:relative;padding:15px 30px 0;display:flex;flex-direction:column;align-items:center;gap:12px}h1,h2,p{margin:0}h1{font-size:clamp(25px,3.2vw,44px);line-height:1.13;text-align:center}h2{font-size:clamp(22px,2.5vw,34px)}.eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#ffdf5a;padding:7px 23px;border-radius:28px;font-size:clamp(16px,1.7vw,24px);font-weight:900;white-space:nowrap}.sub{color:#597675;font-size:clamp(14px,1.5vw,20px);text-align:center;line-height:1.4}.pill{padding:12px 24px;border-radius:30px;font-size:clamp(17px,1.8vw,24px);font-weight:bold;background:var(--teal);color:white;box-shadow:0 4px 0 #00615e32;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px}.pill.secondary{background:#fff;color:var(--dark);box-shadow:inset 0 0 0 2px #c6dfda}.pill.yellow{background:var(--yellow);color:var(--dark)}.tile{aspect-ratio:1;background-image:url('assets/atlas.webp');background-size:400% 400%;background-repeat:no-repeat;flex-shrink:0;border-radius:14px;display:block}.fox{mix-blend-mode:multiply;width:90px}.card{background:#fffdfa;border:3px solid white;border-radius:30px;box-shadow:var(--shadow)}footer{display:flex;align-items:center;justify-content:center;gap:18px;padding:6px 24px}.dots{display:flex;gap:8px}.dot{width:12px;height:12px;border-radius:50%;background:#d7dfd5}.dot.on{background:var(--teal)}.counter{font-size:20px;font-weight:bold;background:#e0f0e2;padding:9px 18px;border-radius:24px}.help{display:flex;align-items:center;gap:8px;font-size:clamp(13px,1.5vw,19px);font-weight:bold}.help .fox{width:58px}.home-main{width:100%;height:100%;display:grid;grid-template-columns:1.1fr 1fr;gap:30px;min-height:0;align-items:center}.home-art{height:100%;max-height:540px;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(transparent,#fff8e9c9),url('assets/map.webp') center/cover;border-radius:36px}.home-art>.fox{width:min(27vh,230px)}.home-art h1{max-width:450px}.home-art .sub{padding:12px 10px}.menu{display:grid;grid-template-columns:1fr 1fr;gap:16px}.menu-card{min-height:170px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;transition:box-shadow .15s}.menu-card:hover{box-shadow:0 0 0 3px #f3ce4c,var(--shadow)}.menu-card .tile{width:clamp(65px,12vh,115px);mix-blend-mode:multiply}.menu-card strong{font-size:clamp(19px,2vw,26px)}.menu-card small{font-size:14px;color:#5c7471}.menu-card .number{background:#e2f3eb;border-radius:100%;font-size:12px;padding:5px 9px;position:absolute;align-self:flex-start}.learn-wrap{display:flex;align-items:center;justify-content:center;gap:30px;width:100%;flex:1;min-height:0}.arrow{border-radius:50%;width:65px;height:65px;font-size:30px;flex-shrink:0}.flashcard{height:100%;width:min(610px,65vw);display:flex;align-items:center;flex-direction:column;padding:12px 20px;gap:5px;min-height:0}.flashcard .tile{flex:1;min-height:0;width:auto;height:auto;aspect-ratio:1;max-width:100%}.flashcard h2{font-size:clamp(28px,4.2vw,55px);line-height:1}.flashcard .translation{font-size:clamp(16px,2vw,25px);color:#6c7770}.flashcard .pill{margin:5px 0 0;min-width:220px;padding:8px 20px}.learn-backdrop{position:absolute;inset:0;background:linear-gradient(#fff8e9d9,#fff8e9c9),url('assets/map.webp') center/cover;z-index:-1}.quiz-cards{display:flex;align-items:stretch;justify-content:center;gap:22px;flex:1;width:100%;min-height:0;padding:0 20px}.answer-card{width:30%;min-width:0;display:flex;align-items:center;justify-content:center;padding:8px;border:4px solid white;transition:border-color .15s}.answer-card .tile{width:100%;max-height:100%;height:auto;aspect-ratio:1}.answer-card.correct{border-color:#26ac8b;background:#e4f7eb}.answer-card.retry{border-color:#efbb4d}.quiz-head{display:flex;align-items:center;justify-content:center;gap:25px}.feedback{min-height:35px;display:flex;gap:15px;align-items:center;justify-content:center;font-size:clamp(17px,1.9vw,23px);font-weight:bold;flex-shrink:0}.feedback .pill{padding:7px 20px;min-height:40px}.write-wrap{flex:1;min-height:0;width:min(1070px,100%);display:grid;grid-template-columns:.75fr 1.25fr;gap:25px}.write-picture{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;gap:8px;min-height:0}.write-picture .tile{width:100%;max-height:75%;height:auto}.write-picture .translation{font-size:22px;font-weight:bold}.write-work{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:0}.answer-input{display:block;width:100%;text-align:center;background:white;border:3px solid #a5ccc0;border-radius:18px;font-size:clamp(23px,3vw,40px);letter-spacing:2px;color:var(--dark);min-height:54px;height:8vh;max-height:80px}.answer-input:disabled{opacity:1;background:#e9f7eb;border-color:#36aa8b}.hint{height:26px;font-size:20px;letter-spacing:3px;font-weight:bold}.keyboard{display:flex;flex-direction:column;gap:7px;width:100%;align-items:center}.key-row{display:flex;gap:6px;justify-content:center;width:100%}.key{border-radius:10px;background:white;box-shadow:0 3px 0 #b8d0c3;font-size:clamp(17px,2vw,26px);width:9%;height:clamp(35px,5.8vh,55px);text-transform:lowercase}.key.space{width:50%;font-size:17px}.key.del{width:18%}.write-actions{display:flex;gap:12px}.write-actions .pill{padding:9px 18px;font-size:18px}.build-wrap{display:grid;grid-template-columns:1fr 240px;gap:20px;width:100%;flex:1;min-height:0}.map{position:relative;background:url('assets/map.webp') center/cover;border-radius:30px;overflow:hidden;min-height:0}.placed{position:absolute;transform:translate(-50%,-75%);width:20%;aspect-ratio:1;mix-blend-mode:multiply;border-radius:10px;background:transparent}.placed .tile{width:100%}.plot{position:absolute;transform:translate(-50%,-50%);width:21%;height:24%;background:#ffdf4d45;border:4px dashed #f0b822;border-radius:20px;color:#785600;font-size:27px;font-weight:bold}.plot.ready{background:#ffdf4d8a;box-shadow:0 0 0 6px #fff8}.tray{display:flex;flex-direction:column;gap:10px;min-height:0}.build-choice{flex:1;min-height:0;padding:5px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;border:3px solid white}.build-choice .tile{height:100%;width:auto;max-width:57%;aspect-ratio:1}.build-choice span{font-size:20px;font-weight:bold;max-width:45%}.build-choice.selected{border-color:#eca819;background:#fff1b9}.summary{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.summary .fox{height:min(28vh,240px);width:auto}.summary-actions{display:flex;gap:15px}.badge{background:#e0f0e2;padding:12px 20px;border-radius:20px;font-weight:bold}.progress-home{display:flex;align-items:center;gap:12px}#notice{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);background:#164e4e;color:white;border-radius:15px;padding:12px 18px;z-index:10;display:none;max-width:90%;text-align:center}.muted-hint{font-size:13px;color:#6b7d76}.status-dot{display:inline-block;width:7px;height:7px;background:#159c7e;border-radius:50%;margin-right:7px}@media(max-height:650px){main{padding-top:10px;gap:8px}.brand span{display:none}.menu-card{min-height:135px}.menu-card .tile{width:65px}.flashcard{padding:8px 16px}.flashcard .pill{min-height:40px}.quiz-cards{padding:0}.quiz-head h1{font-size:26px}.write-work{gap:7px}.hint{height:20px;font-size:16px}.feedback{min-height:30px}.fox{width:65px}}@media(max-width:750px){header{padding:8px 12px;border-radius:0 0 20px 20px}.brand{font-size:26px}.brand span{display:none}.header-actions{gap:5px}.icon{width:42px;height:42px;font-size:18px}#full{display:none}main{padding:12px 12px 0;gap:10px}.home-main{grid-template-columns:1fr;grid-template-rows:.65fr 1fr;gap:10px}.home-art{flex-direction:row;padding:15px;gap:10px}.home-art>.fox{width:90px}.home-art h1{font-size:26px}.home-art .sub{font-size:14px}.menu{gap:12px;align-self:stretch}.menu-card{min-height:0;padding:7px}.menu-card .tile{width:min(10vh,80px)}.menu-card small{font-size:12px}.menu-card strong{font-size:20px}.learn-wrap{gap:10px}.arrow{width:42px;height:42px;font-size:20px}.flashcard{width:calc(100vw - 120px);padding:12px 8px;justify-content:center}.flashcard .tile{flex:0;width:100%}.flashcard .pill{min-width:0;font-size:18px}.flashcard h2{font-size:32px}.flashcard .translation{font-size:18px}.quiz-head{flex-direction:column;gap:8px}.quiz-cards{gap:10px;padding:0;align-items:center}.answer-card{width:33%;padding:3px;border-radius:18px;height:auto;aspect-ratio:1}.feedback{font-size:17px;text-align:center;flex-wrap:wrap}.dots{gap:5px}.dot{width:8px;height:8px}footer{gap:8px;padding:5px 12px}.counter{font-size:16px;padding:8px 12px}.help .fox{display:none}.help{font-size:13px}.write-wrap{grid-template-columns:1fr;grid-template-rows:minmax(0,.65fr) minmax(0,1fr);gap:8px}.write-picture{flex-direction:row;gap:20px;border-radius:20px;padding:4px}.write-picture .tile{height:100%;width:auto;max-height:100%}.write-picture .translation{font-size:18px}.write-work{gap:7px;justify-content:center}.answer-input{height:45px;min-height:42px;font-size:26px}.key{height:34px}.keyboard{gap:6px}.hint{font-size:16px;height:18px}.write-actions .pill{min-height:38px;font-size:16px;padding:7px 15px}.build-wrap{grid-template-columns:1fr;grid-template-rows:1fr 95px;gap:10px}.tray{flex-direction:row;gap:7px}.build-choice{flex-direction:column;gap:0;border-radius:15px}.build-choice .tile{max-width:none;height:60px;width:60px}.build-choice span{font-size:14px;max-width:100%;white-space:nowrap}.plot{font-size:18px}.summary h1{font-size:30px}.summary-actions{flex-direction:column;gap:8px}.progress-home{font-size:13px}.home-art .sub{padding:5px}}@media(max-height:480px) and (min-width:751px){#app{grid-template-rows:55px minmax(0,1fr) 40px}.menu-card{min-height:100px}.menu-card .tile{width:45px}.menu-card small{display:none}.eyebrow{padding:4px 15px}.key{height:30px}.write-actions .pill{min-height:30px;padding:5px 15px}.answer-input{height:38px;min-height:38px}.flashcard h2{font-size:27px}.flashcard .pill{min-height:32px;padding:3px 20px}.quiz-head .pill{min-height:36px;padding:5px 18px}.feedback .pill{min-height:30px;padding:3px 15px}.quiz-head h1{font-size:23px}}
.sprite{aspect-ratio:1;background-image:url('assets/sprites-clean.webp');background-size:400% 200%;background-repeat:no-repeat;display:block;flex-shrink:0}.fox.sprite,.placed{mix-blend-mode:normal}.placed .sprite{width:100%}.final-map{flex:1;width:min(100%,1000px);min-height:0}.home-art>.fox.sprite{filter:drop-shadow(0 8px 3px #65592022)}
#app,main,header,.write-wrap,.write-work,.write-picture,.home-main,.menu{min-width:0}.build-choice .tile{width:min(48%,120px);height:auto;max-height:100%}.key{min-width:0;flex:1;max-width:9%}.key.space,.key.del{max-width:none;flex:none}.icon{flex-shrink:0}
@media(max-width:750px){.write-picture .tile{width:45%;height:auto;max-height:100%;flex-shrink:1}.write-picture>div:not(.tile){min-width:0;max-width:50%}.write-picture{gap:8px}.write-picture .pill{padding:10px;font-size:16px;gap:6px}.key-row{gap:4px}.build-choice .tile{width:60px;height:60px}.brand{font-size:clamp(20px,6vw,26px)}.header-actions{flex-shrink:0}}
/* Audio-only building activity: larger images without written answer labels. */
.build-choice .tile{width:auto;height:100%;max-width:100%;max-height:160px;aspect-ratio:1}
@media(max-width:750px){.build-choice .tile{width:70px;height:70px;max-height:100%}}