/* Illustrated navigation and forest clearing; labels stay as live, accessible text. */
body{font-family:"Trebuchet MS",Arial,sans-serif}
body:not(.in-lesson){background:#619797 url("assets/forest-world-v2.webp") center bottom / cover fixed no-repeat;color:#174f43}
header{height:122px;max-width:1000px;padding:6px 26px 0;display:grid;grid-template-columns:150px 1fr;grid-template-rows:48px 68px;gap:0 20px;position:relative;z-index:2}
.brand{grid-column:1/-1;justify-self:center;display:block;font-size:38px;font-weight:900;line-height:48px;letter-spacing:-1px;color:#174f43;text-shadow:2px 0 #fff7dd,-2px 0 #fff7dd,0 2px #fff7dd,0 -2px #fff7dd,0 3px 5px #214d4333;white-space:nowrap}
.age{grid-row:2;display:grid;place-items:center;align-self:center;width:148px;height:66px;padding:4px 4px 0;border:0;background:url("assets/wood-nav.webp") center/100% 100% no-repeat;font-size:18px;font-weight:800;color:#694428;filter:drop-shadow(0 3px 2px #1b52342e)}
.header-actions{grid-row:2;justify-self:center;display:flex;gap:12px;margin:0}
.header-actions button{width:173px;height:68px;padding:8px 20px 0 17px;display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:18px;background:url("assets/wood-nav.webp") center/100% 100% no-repeat;color:#1e5650;font-size:17px;font-weight:800;filter:drop-shadow(0 3px 2px #1b52342e)}
.ui-icon{width:29px;height:29px;flex:none;display:block}
.header-actions button[aria-current="page"]{color:#125846}
.header-actions button:hover,.room-toolbar button:hover{filter:drop-shadow(0 4px 3px #254b4145) brightness(1.05)}
.header-actions button:active,.room-toolbar button:active,#reset:active{transform:translateY(2px)}
#map{padding-bottom:6px}
.map-prompt{height:26px;margin:0;display:grid;place-items:center;font-size:15px;font-weight:700;color:#184f43;text-shadow:0 1px 3px #fffbe8}
.tree-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-color:#6b9d68 transparent}
.tree-scene{width:min(1200px,calc((100dvh - 280px)*1.2970027),100%);overflow:hidden}
.map-tools{position:relative;display:block;width:540px;max-width:calc(100% - 16px);height:128px;min-height:0;padding:0;margin:-2px auto 0;background:url("assets/wood-settings.webp") center/100% 100% no-repeat;color:#1e5650;filter:drop-shadow(0 4px 3px #29533b2a)}
.map-tools>div{display:flex}
.settings-caption{position:absolute;left:53px;top:32px;gap:8px;align-items:center}
.settings-caption .ui-icon{width:18px;height:18px}
.settings-caption h2{font-size:15px;line-height:18px;margin:0;font-weight:800}
.settings-controls{position:absolute;left:53px;right:35px;bottom:25px;height:44px;align-items:center;justify-content:space-between;gap:14px}
.map-tools button{border:0;background:transparent;color:#1e5650;border-radius:10px;padding:0;font-size:14px;font-weight:800}
.settings-controls button[role="switch"]{display:flex;gap:8px;align-items:center;min-height:44px;white-space:nowrap}
.switch-track{width:43px;height:26px;border-radius:20px;display:block;background:#859b84;border:2px solid #587662;box-shadow:inset 0 2px 3px #335e4233;flex:none}
.switch-track>span{display:block;width:20px;height:20px;margin:1px;border-radius:50%;background:#fffbee;box-shadow:0 1px 2px #234e4844;transform:translateX(0);transition:transform .15s ease}
button[aria-checked="true"] .switch-track{background:#09b68f;border-color:#059577}
button[aria-checked="true"] .switch-track>span{transform:translateX(17px)}
.map-tools #reset{width:118px;height:55px;background:url("assets/wood-reset.webp") center/100% 100% no-repeat;color:#fffbe8;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 6px 0 0;font-size:15px;flex:none;text-shadow:0 1px 1px #913541}
#reset .ui-icon{width:21px;height:21px}
.object-label{background:#fff4d5;border:2px solid #a4723d;border-radius:13px;box-shadow:0 3px 0 #73532844;font-size:12px}
.object-label b{background:#28796c}
.object.visited .object-label b{background:#a26449}
button:focus-visible,a:focus-visible{outline:3px solid #fff7dd;outline-offset:2px;box-shadow:0 0 0 5px #185f51}
.room-toolbar{max-width:1190px;padding:0 24px;margin:0 auto 7px;min-height:55px;color:#fffbe8}
.room-toolbar button{border:0;background:url("assets/wood-nav.webp") center/100% 100% no-repeat;width:128px;height:53px;padding:5px 10px 0;color:#1e5650;font-size:14px;font-weight:800;flex:none}
.room-title h1{text-shadow:0 1px 3px #13362a88}
.room-stage{width:min(1200px,calc((100dvh - 201px)*1.5),100%);border-radius:12px}
dialog{border:5px solid #aa713b;box-shadow:0 5px 0 #6c482a}
.dialog-close{background:#fff0c6;border-color:#b58850}
@media(max-width:900px){
 header{max-width:805px;grid-template-columns:120px 1fr;padding-inline:15px;gap:0 10px}
 .age{width:122px;font-size:15px}
 .header-actions{gap:6px}
 .header-actions button{width:151px;height:65px;font-size:16px;padding-inline:16px}
 .header-actions .ui-icon{width:25px;height:25px}
 .object-label{font-size:11px}
}
@media(max-width:600px){
 header{height:116px;grid-template-columns:88px 1fr;grid-template-rows:51px 59px;padding:4px 8px 0;gap:0}
 .brand{grid-column:2;grid-row:1;justify-self:center;font-size:23px;line-height:48px;letter-spacing:-.7px}
 .age{grid-row:1;grid-column:1;width:88px;height:48px;font-size:12px;padding-top:3px}
 .header-actions{grid-row:2;grid-column:1/-1;justify-self:center;gap:3px}
 .header-actions button{width:119px;height:59px;font-size:14px;gap:6px;padding:7px 12px 0}
 .header-actions .ui-icon{width:22px;height:22px}
 .map-prompt{font-size:14px;height:24px}
 .tree-scene{width:660px;min-width:660px}
 .map-tools{width:374px;height:128px;margin:2px auto 0}
 .settings-caption{left:34px;top:32px;gap:6px}
 .settings-caption h2{font-size:13px}
 .settings-caption .ui-icon{width:16px;height:16px}
 .settings-controls{left:34px;right:22px;bottom:25px;gap:5px;height:44px}
 .settings-controls button[role="switch"]{gap:4px;font-size:12px}
 .switch-track{width:36px;height:24px}
 .switch-track>span{width:18px;height:18px}
 button[aria-checked="true"] .switch-track>span{transform:translateX(12px)}
 .map-tools #reset{width:99px;height:50px;font-size:13px;gap:3px}
 #reset .ui-icon{width:18px;height:18px}
 .room-toolbar{padding:0 10px;min-height:51px;gap:8px}
 .room-toolbar button{width:101px;height:48px;font-size:12px;padding-inline:7px}
 .room-title h1{font-size:14px}
 .room-stage{width:690px;min-width:690px;border-radius:0}
}
@media(max-width:370px){
 .brand{font-size:20px}
 .header-actions button{width:105px;font-size:13px;padding-inline:10px}
 .settings-caption{left:25px}
 .settings-controls{left:25px;right:18px;gap:4px}
 .settings-controls button[role="switch"]{font-size:11px;gap:3px}
 .map-tools #reset{width:91px}
}
@media(prefers-reduced-motion:reduce){.switch-track>span{transition:none}}

/* Review adjustments: title sign, readable controls, and feet planted at the roots. */
body:not(.in-lesson){background-image:url("assets/forest-world-v2.webp");background-color:#619797}
header{height:162px;grid-template-rows:88px 68px}
.brand{display:grid;place-items:center;width:640px;max-width:100%;height:88px;padding:9px 32px 0;background:url("assets/wood-title.webp") center/100% 100% no-repeat;color:#245748;font-size:42px;line-height:1.15;letter-spacing:-1px;text-shadow:none;filter:drop-shadow(0 3px 2px #123e3235)}
.tree-scene{width:min(1200px,calc((100dvh - 337px)*1.2970027),100%)}
.tree-art{filter:drop-shadow(0 5px 3px #113e3833)}
.map-tools{height:145px}
.settings-caption{left:59px;top:37px}
.settings-caption h2{font-size:20px;line-height:23px}
.settings-caption .ui-icon{width:20px;height:20px}
.settings-controls{left:59px;right:36px;bottom:37px;gap:12px}
.settings-controls button[role="switch"]{font-size:18px}
.map-tools #reset{width:126px;height:58px;font-size:18px}
.map-axel{left:33%;bottom:6%}
.mascot-footing{position:absolute;left:8%;bottom:-8%;width:84%;z-index:0;pointer-events:none}
.mascot-body{z-index:1}
.map-axel .mascot-body{animation:axel-standing 4.8s ease-in-out infinite}
.mascot.greeting{animation:none}
.mascot.greeting .mascot-body{animation:axel-greet .7s ease-in-out}
.motion-paused .map-axel .mascot-body,.motion-paused .mascot.greeting .mascot-body{animation:none}
@keyframes axel-standing{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.005)}}
.room-stage{width:min(1200px,calc((100dvh - 241px)*1.5),100%)}
@media(min-width:1120px){
 #map{position:relative;min-height:calc(100dvh - 162px);padding-bottom:0}
 .map-prompt{width:100%}
 .tree-scene{width:min(calc((100dvh - 214px)*1.2970027),calc(100vw - 60px));margin:auto}
 .map-tools{position:absolute;right:19px;bottom:14px;width:500px;height:120px;margin:0}
 .settings-controls{left:51px;right:30px;bottom:24px;gap:8px}
 .settings-caption{left:51px;top:26px}
}
@media(max-width:600px){
 header{height:147px;grid-template-columns:88px 1fr;grid-template-rows:82px 59px;padding:3px 8px 0}
 .brand{grid-column:1/-1;grid-row:1;width:100%;height:77px;max-width:382px;padding:8px 22px 0;font-size:25px;line-height:1.1;letter-spacing:-.7px}
 .age{display:none}
 .header-actions{grid-row:2;grid-column:1/-1}
 .tree-scene{width:660px;min-width:660px;margin:auto}
 .map-tools{width:374px;height:145px}
 .settings-caption{left:34px;top:37px}
 .settings-caption h2{font-size:16px}
 .settings-caption .ui-icon{width:18px;height:18px}
 .settings-controls{left:34px;right:22px;bottom:37px;gap:5px}
 .settings-controls button[role="switch"]{font-size:14px;gap:4px}
 .map-tools #reset{width:99px;height:50px;font-size:14px}
 .map-axel{left:33%;bottom:6%;width:88px}
 .room-stage{width:690px;min-width:690px}
}
@media(max-width:370px){
 .brand{font-size:23px}
 .settings-caption{left:27px}
 .settings-controls{left:27px;right:17px;gap:4px}
 .settings-controls button[role="switch"]{font-size:12px;gap:3px}
 .map-tools #reset{width:91px;font-size:13px}
}

/* Tree and controls occupy separate columns: no sign can cover the roots. */
.brand{background-image:url("assets/wood-title-v2.webp");background-size:100% 145%;padding-top:0;color:#513820}
.age{background-image:url("assets/wood-tag.webp");padding:17px 10px 0;color:#513820}
#map{display:grid;grid-template-columns:minmax(0,1fr) 228px;grid-template-rows:26px auto;column-gap:16px;row-gap:0;max-width:1380px;margin:auto;padding:0 30px 10px;min-height:0;align-items:center}
.map-prompt{grid-column:1;grid-row:1;width:100%}
.tree-scroll{grid-column:1;grid-row:2;min-width:0}
.tree-scene{width:min(calc((100dvh - 198px)*1.2970027),100%);margin:auto}
.map-tools{grid-column:2;grid-row:1 / span 2;position:static;display:flex;flex-direction:column;gap:6px;width:228px;max-width:none;height:auto;margin:0;padding:0;background:none;align-self:center}
.settings-caption{position:static;display:flex;height:76px;width:100%;gap:8px;justify-content:center;align-items:center;padding:18px 14px 0;background:url("assets/wood-tag.webp") center/100% 100% no-repeat}
.settings-caption h2{font-size:20px;line-height:23px;color:#513820}
.settings-controls{position:static;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;width:100%;padding:0 5px;gap:10px!important}
.settings-controls button[role="switch"]{height:68px;min-height:68px;width:100%;justify-content:space-between;padding:12px 20px 0;background:url("assets/wood-nav.webp") center/100% 100% no-repeat;font-size:18px;gap:8px}
.map-tools #reset{width:160px;height:66px;font-size:18px;align-self:center}
.map-axel.greeting .mascot-body{animation:axel-grounded-greeting .7s ease-in-out}
@keyframes axel-grounded-greeting{0%,100%{transform:scaleY(1) rotate(0)}30%{transform:scaleY(1.012) rotate(-1.5deg)}65%{transform:scaleY(1.006) rotate(1deg)}}
.motion-paused .map-axel.greeting .mascot-body{animation:none}
@media(max-width:900px){
 #map{grid-template-columns:minmax(0,1fr) 178px;column-gap:12px;padding-inline:14px}
 .map-tools{width:178px}
 .settings-caption{height:69px;padding:17px 12px 0}
 .settings-caption h2{font-size:18px}
 .settings-controls{padding-inline:0}
 .settings-controls button[role="switch"]{font-size:16px;padding-inline:15px}
}
@media(max-width:600px){
 #map{display:block;padding:0 0 12px}
 .map-prompt{width:100%;height:24px}
 .tree-scene{width:660px;min-width:660px;margin:auto}
 .map-tools{display:block;width:374px;max-width:calc(100% - 16px);margin:8px auto 0}
 .settings-caption{width:174px;height:64px;margin:auto;padding:15px 12px 0}
 .settings-controls{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px!important;padding:0}
 .settings-controls button[role="switch"]{width:calc(50% - 3px);height:61px;min-height:61px;font-size:14px;padding:11px 18px 0}
 .map-tools #reset{width:146px;height:62px;font-size:16px}
}
@media(max-width:370px){.settings-controls button[role="switch"]{font-size:13px;padding-inline:13px}}