.overlay.map-screen{position:fixed;inset:0 auto 0 50%;transform:translateX(-50%);width:min(100%,420px);height:100svh;padding:0;background:#c6eaa2;backdrop-filter:none;overflow:hidden}
.map-screen .modal{width:100%;max-width:none;max-height:none;height:100%;padding:16px 12px 12px;border:0;border-radius:0;background:#edf6df;display:flex;flex-direction:column;box-shadow:none;text-align:center}
.map-screen #modal-icon,.map-screen #modal-kicker{display:none}
.map-screen #modal-title{font-size:23px;color:#355d36;margin:0 0 12px;flex:none}
.map-screen #modal-body{flex:1;min-height:0;overflow:auto;border-radius:22px;position:relative;overscroll-behavior:contain;scroll-behavior:auto;scroll-padding-top:60px;background:#95c573}
.location-tabs{position:sticky;top:0;z-index:4;display:flex;gap:6px;padding:8px;background:#edf6dff0;backdrop-filter:blur(8px)}
.location-tabs button{flex:1;font-size:11px;font-weight:750;min-height:38px;border-radius:14px;color:#57724c;background:#dbe9ca;border:2px solid transparent}
.location-tabs button.active{background:#fff5cd;border-color:#eac36b;color:#766034;box-shadow:0 3px 0 #bea76b45}
.adventure-map{position:relative;isolation:isolate;background:#80be39}
.map-location{position:relative;scroll-margin-top:56px;background:transparent}
.map-location.garden .map-backdrop{background:#80be39}.map-location.desert .map-backdrop{background:#f3c257}
.map-backdrop{position:absolute;inset:0;overflow:hidden;z-index:0}
.map-ground-tile{position:relative;width:100%;aspect-ratio:2/1;overflow:hidden;mask-image:linear-gradient(transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.map-background-art{display:block;position:absolute;top:calc(var(--slice)*-100%);width:100%;height:auto;pointer-events:none}
.garden-ground{aspect-ratio:3/2;background-image:var(--ground-image);background-size:200% 200%;background-position:center}
/* Decorations stay outside the entire swept area of the road, even on 320px screens. */
.garden-ground .map-background-art{mask-image:linear-gradient(to right,#000 0%,#000 10%,transparent 15%,transparent 85%,#000 90%,#000 100%)}
.map-decoration{position:absolute;z-index:0;width:var(--decor-size);height:var(--decor-size);transform:translate(-50%,-50%);background:url('./assets/map-garden-decor.png') 0 0/200% 200% no-repeat;pointer-events:none}
.map-decoration.decor-1{background-position:100% 0}.map-decoration.decor-2{background-position:0 100%}.map-decoration.decor-3{background-position:100% 100%;clip-path:inset(0 0 0 5%)}
.map-transition{position:relative;background:linear-gradient(#f3c257,#80be39);pointer-events:none}
.map-transition .map-backdrop{display:flex;align-items:center}.map-transition .map-ground-tile{flex:none}
.map-route{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.map-route path{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.map-route-edge{stroke:#d6b879;stroke-width:82px}.map-route-sand{stroke:#f3daa3;stroke-width:76px}.map-route-light{stroke:#f8e5b8;stroke-width:60px}
.map-location-title{position:absolute;top:0;left:0;right:0;z-index:3;height:110px;padding:16px 12px;background:none;display:block;border:0;pointer-events:none}
.map-location-title span{font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#537341}
.map-location-title h3{font-size:28px;line-height:1.15;color:#365f35;margin:6px 0;text-shadow:0 2px #fff9}
.map-location-title p{font-size:10px;font-weight:700;margin:0;color:#627449}.desert .map-location-title{background:none}.desert .map-location-title h3{color:#92612b}
.map-level{position:absolute;left:var(--node-x);top:var(--node-y);transform:translate(-50%,-50%);width:65px;height:61px;border-radius:50%;color:#fff;background:linear-gradient(#a4d669,#65a43c);border:3px solid #f8ffde;box-shadow:0 5px 0 #407c2e,0 7px 12px #243c4940;z-index:3;display:grid;place-items:center;padding:0}
.map-level.dragon-yellow{background:linear-gradient(#ffe77a,#e4ad36);box-shadow:0 5px 0 #b37c25,0 7px 12px #243c4940}.map-level.dragon-red{background:linear-gradient(#ff946b,#e34e39);box-shadow:0 5px 0 #a7352e,0 7px 12px #243c4940}
.map-level strong{font-size:26px;line-height:1;font-weight:900;text-shadow:0 2px #0003}
.map-level small{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.map-stars{position:absolute;top:100%;left:50%;transform:translateX(-50%);display:flex;height:25px;gap:0;margin-top:4px}
.map-stars .result-art{width:24px;height:24px}.map-stars .empty{filter:grayscale(1);opacity:.45}
.map-level.completed{border-color:#fff4a1}.map-level.next-level{outline:4px solid #ffe570;outline-offset:4px;z-index:3;animation:map-node-glow 2s ease-in-out infinite}
.map-next-label{position:absolute;top:50%;transform:translateY(-50%);font-size:9px;font-weight:800;padding:6px 8px;border-radius:9px;background:#fff7d5;color:#805c2d;box-shadow:0 2px 5px #0002;white-space:nowrap}.label-left .map-next-label{right:calc(100% + 12px)}.label-right .map-next-label{left:calc(100% + 12px)}
.map-level:active{transform:translate(-50%,-50%) scale(.95)}
.map-screen #modal-action{flex:none;margin-top:12px;padding:12px;border-radius:16px;background:linear-gradient(#92cf58,#62a236);font-size:14px;border:2px solid #f6ffe1;box-shadow:0 3px 0 #427d2d}
.map-screen #modal-secondary{flex:none;padding:5px;margin-top:7px;font-size:11px;color:#527347}
@keyframes map-node-glow{50%{outline-color:#fffbd0;box-shadow:0 5px 0 #407c2e,0 0 22px #fff387}}
@media(prefers-reduced-motion:reduce){.map-level.next-level{animation:none}}