/* A continuous map and lawn behind the floating wooden controls. */
.app{--view-scale:1;--logical-height:100dvh;--safe-top:calc(env(safe-area-inset-top) / var(--view-scale));--safe-bottom:calc(env(safe-area-inset-bottom) / var(--view-scale));--nav-height:calc(60px + var(--safe-bottom));--detail-height:0px;
 position:absolute;top:0;left:50%;width:min(calc(100vw / var(--view-scale)),720px,calc(var(--logical-height)*.75));height:var(--logical-height);max-width:none;margin:0;transform:translateX(-50%) scale(var(--view-scale));transform-origin:top center;background:#719e47;isolation:isolate}
.app.expanded{position:absolute;inset:auto;top:0;left:50%;width:calc(100vw / var(--view-scale));height:var(--logical-height);transform:translateX(-50%) scale(var(--view-scale));--nav-height:0px}
#terrain{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;image-rendering:pixelated}
.summary,.categories{position:relative;z-index:2}
.mentor-note{position:relative;z-index:7;display:flex;align-items:center;gap:12px;margin:0 12px 7px;padding:10px 9px;background:#fff5de;background-clip:padding-box;color:#795333;border:6px solid transparent;border-image:url('../store/art/ui-wood/panel.png') 12 / 6px / 0 stretch;box-shadow:0 4px 8px #39221322;image-rendering:pixelated}.mentor-note>div{flex:1;min-width:0}.mentor-note .mentor-speaker{flex:none;width:42px;display:flex;flex-direction:column;align-items:center;gap:3px}.mentor-speaker canvas{width:42px;height:58px;image-rendering:pixelated}.mentor-speaker small{font-size:9px;color:#a06d43}.mentor-note b{display:block;font-size:13px;line-height:1.5;color:#9d4e2e}.mentor-note p{font-size:12px;line-height:1.75;margin:5px 0 0}.mentor-note button{align-self:flex-start;background:transparent;border:0;box-shadow:none;color:#a1845d;padding:3px;width:22px;height:26px;font-size:17px;flex:none}.mentor-note[hidden]{display:none}
.mentor-shade{position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(to bottom,#30251255 0 calc(var(--map-clear-top,240px) - 10px),transparent var(--map-clear-top,240px) var(--map-clear-bottom,500px),#30251255 calc(var(--map-clear-bottom,500px) + 10px) 100%);animation:mentor-shade-in .2s ease-out}.mentor-active #detail{z-index:7}.mentor-shade[hidden]{display:none}
.mentor-speaker small{white-space:nowrap}
#mentor-text{white-space:pre-line}
#mentor-next{display:block;width:auto;height:auto;min-height:32px;padding:6px 12px;margin-top:8px;border:2px solid #a46537;background:#b95632;color:#fff7dd;font-size:11px;font-weight:700;box-shadow:0 2px 0 #714322;cursor:pointer}
#mentor-next[hidden]{display:none}
.skill-node.guide-target{outline:4px solid #ffdf7d;outline-offset:5px}
#buy.guide-target,.bottom-tabs a.guide-target{outline:3px solid #f4b644;outline-offset:3px}
.app.mentor-store-tab .bottom-tabs{z-index:7}
.tutorial-locked{cursor:default!important}
button.tutorial-locked:not(.skill-node),a.tutorial-locked,summary.tutorial-locked{opacity:.46}
.skill-node.tutorial-locked{cursor:default}
/* Preserve existing wooden bevels while giving usable actions a soft lift. */
#buy:enabled:not(.tutorial-locked),#mentor-next:enabled:not(.tutorial-locked),.map-button:enabled:not(.tutorial-locked),.zoom-tools button:enabled:not(.tutorial-locked),.categories button:enabled:not(.tutorial-locked),.bottom-tabs a:not(.tutorial-locked){filter:drop-shadow(0 2px 2px #30401d26)}
.skill-node.guide-target:not(.tutorial-locked),.bottom-tabs a.guide-target:not(.tutorial-locked){filter:drop-shadow(0 3px 3px #30401d40)}
@keyframes mentor-shade-in{from{opacity:0}to{opacity:1}}
@media(max-width:370px){.mentor-note{gap:8px;margin-left:9px;margin-right:9px;padding:8px 7px}.mentor-note .mentor-speaker{width:30px}.mentor-speaker canvas{width:30px;height:42px}.mentor-note b{font-size:12px}.mentor-note p{font-size:11px;line-height:1.65}.mentor-note button{width:18px}}
@media(prefers-reduced-motion:reduce){.mentor-shade{animation:none}}
.summary{padding-top:max(12px,var(--safe-top))}
.workspace{position:absolute;inset:0;display:block;padding:0;overflow:visible;pointer-events:none}
.map-panel{position:absolute;inset:0;width:100%;height:100%;min-height:0;border:0;border-image:none;box-shadow:none;background:transparent;overflow:hidden;pointer-events:auto}
#viewport{inset:0}
.map-top{top:calc(var(--hud-height,170px) + 5px);left:12px;right:12px}
.scene-label{color:#6b5231;background:#fff4dceF;border-color:#ae884a}
.map-bottom{bottom:calc(var(--nav-height) + var(--detail-height) + 19px);left:12px;right:12px}
.legend{padding:4px 6px;border:1px solid #b79b65;border-radius:4px;background:#fff5deef;color:#695135;gap:4px 7px;margin-top:0}
.gesture-hint{display:none}
.edge{filter:drop-shadow(0 1px 0 #fff4cf) drop-shadow(0 -1px 0 #fff4cf)}
.edge.locked,.edge.preview{stroke:#f4df9f;filter:drop-shadow(0 1px 0 #56793c)}
.edge.frontier{stroke:#ffdf89;filter:drop-shadow(0 1px 0 #547438)}
#detail{position:absolute;z-index:3;left:12px;right:12px;bottom:calc(var(--nav-height) + 8px);width:auto;max-height:330px;pointer-events:auto;background:#fff5de;background-clip:padding-box}
#reopen{left:12px;bottom:calc(var(--nav-height) + 96px);pointer-events:auto}
#notice{bottom:calc(var(--nav-height) + var(--detail-height) + 110px)}
.bottom-tabs{position:absolute;z-index:4;bottom:0;left:0;height:var(--nav-height);padding-bottom:var(--safe-bottom)}
.app.expanded .workspace{padding:0}.app.expanded #detail{max-height:330px}
@media(max-width:370px){
 .map-top,.map-bottom{left:9px;right:9px}#detail{left:9px;right:9px;max-height:330px}.legend{max-width:155px;font-size:8px;gap:3px 5px}
}
@media(max-height:600px){
 .app .summary .wallet-card,.app .summary .growth{min-height:59px;padding-top:4px;padding-bottom:5px}.app .summary #money{font-size:20px}.app .categories{padding-top:7px;padding-bottom:7px}.app .categories button{min-height:40px;padding-top:4px;padding-bottom:6px}.app .categories button img{height:20px}.scene-label{display:block}.map-top{justify-content:space-between}.map-bottom{bottom:calc(var(--nav-height) + var(--detail-height) + 19px)}.app .bottom-tabs{height:var(--nav-height);border-width:8px;border-image-width:8px}.app .bottom-tabs a{min-height:43px}
}