.map-back,.map-screen-title{display:none}
body[data-screen="levels"] header{position:fixed;inset:0 0 auto;height:84px;padding:9px 3vw;display:flex;gap:20px;align-items:center;background:#061727f0;border-bottom:1px solid #2b586a}
body[data-screen="levels"] .map-back{display:grid;place-items:center;width:50px;height:50px;flex:none;padding:10px;background:#102f42;border:1px solid #4c879c;border-radius:9px}
.map-back img{filter:invert(96%) sepia(16%) saturate(225%)}
body[data-screen="levels"] .brand-logo{width:140px;height:64px}
body[data-screen="levels"] .map-screen-title{display:block;margin:0 auto;font:1000 clamp(26px,3vw,43px)/1 Nunito,sans-serif;letter-spacing:-.04em;color:#fff1df}
body[data-screen="levels"] .tools{margin-left:auto}
body[data-screen="levels"] .tools button{width:48px;height:48px;background:#0d2b3d;border-color:#42758a}
.level-map-screen{position:fixed;inset:84px 0 0;padding:0;overflow:hidden;background:#041322}
.levelmap-grid{height:100%;display:grid;grid-template-columns:minmax(200px,21%) minmax(0,1fr) minmax(280px,26%)}
.world-nav{min-width:0;padding:20px 13px;border-right:1px solid #31576a;background:#061827;overflow-y:auto}
.world-nav h2{font:1000 31px/1.1 Nunito,sans-serif;margin:10px 16px 20px;color:#fff1df;letter-spacing:-.03em}
.map-worlds{display:flex;flex-direction:column;gap:14px}
.map-worlds button{display:flex;align-items:center;gap:9px;width:100%;min-height:105px;padding:16px 23px;border:0;border-radius:0;box-shadow:none;background:transparent url(assets/lobby-v2/button-secondary.webp) center/100% 100% no-repeat;color:#bed7e9;text-align:left;transition:filter .15s}
.map-worlds button[aria-pressed="true"]{background-image:url(assets/lobby-v2/button-primary.webp);color:#081d2d}
.map-worlds button:hover{filter:brightness(1.16)}
.world-thumbnail{width:57px;height:71px;object-fit:cover;object-position:78% 12%;flex:none;clip-path:inset(0 round 6px)}
.map-worlds button>span{min-width:0}
.map-worlds strong{display:block;font:1000 21px/1.1 Nunito,sans-serif;white-space:nowrap}
.map-worlds small{display:block;font-size:11px;line-height:1.3;margin-top:4px}
.map-column{position:relative;min-width:0;min-height:0;overflow:hidden;background:#062032;isolation:isolate}
.map-column>.map-backdrop{display:none}
.map-backdrop{display:none}
.map-heading{position:absolute;top:0;left:0;right:0;z-index:5;padding:22px 25px 10px;min-height:117px;background:#04152660;text-shadow:0 2px 5px #041321}
.map-heading h2{font:1000 clamp(23px,2.4vw,36px)/1.08 Nunito,sans-serif;letter-spacing:-.04em;color:#fff0df;margin:0 95px 7px 0}
.map-heading p{font-size:16px;color:#adecf1;margin:0 0 9px}
#world-progress{display:block;width:55%;height:6px;border:1px solid #437b99;border-radius:10px;background:#16354b;overflow:hidden;appearance:none}
#world-progress::-webkit-progress-bar{background:#16354b}#world-progress::-webkit-progress-value{background:#54eee8;border-radius:10px}#world-progress::-moz-progress-bar{background:#54eee8}
#map-visible-range{display:inline-block;color:#b9d4eb;font-size:11px;border:1px solid #537e9b;border-radius:20px;padding:4px 12px;margin-top:8px;background:#061e31b5}
#map-current{position:absolute;right:18px;top:24px;display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid #7090aa;border-radius:30px;min-height:44px;background:#061b2de8;color:#c9f4f6;font-size:13px;font-weight:700}
#map-current img{width:22px;height:22px;filter:invert(92%) sepia(21%) saturate(468%) hue-rotate(132deg)}
.map-scroll{position:absolute;top:130px;bottom:32px;left:0;right:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-color:#63e9e8 #0f2d42;scrollbar-width:thin;overflow-anchor:none}
.map-scroll:focus-visible{outline:2px solid #88e9e5;outline-offset:-3px}
.map-canvas{position:relative;min-height:100%;isolation:isolate}
#map-terrain,#map-links,#map-nodes{position:absolute;inset:0;pointer-events:none}
#map-terrain{z-index:-1}
.map-cliff{position:absolute;left:0;width:100%;object-fit:fill;pointer-events:none;opacity:1;mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 100%)}
.map-cliff[data-section="0"]{mask-image:none}
.path-link{position:absolute;width:39px;height:14px;object-fit:fill;filter:saturate(.25) brightness(.55);pointer-events:none}
.path-link.is-complete{filter:drop-shadow(0 0 4px #02dce8)}
.map-route{position:absolute;inset:0;overflow:visible;pointer-events:none}
.route-connection{fill:none;stroke:#6399ac;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3 8;opacity:.65}
.route-connection.is-complete{stroke:#5ce5eb;stroke-dasharray:none;opacity:.8}
.route-connection.is-selected{stroke:#ffe5a8;stroke-width:4;stroke-dasharray:none;opacity:1;filter:drop-shadow(0 0 3px #e4be7180)}
.level-map-screen[data-world="2"] .route-connection:not(.is-selected){stroke:#e9b47e}
.level-map-screen[data-world="3"] .route-connection:not(.is-selected){stroke:#87aef8}
.room-node{position:absolute;width:var(--map-node-size,94px);height:var(--map-node-size,94px);padding:0;transform:translate(-50%,-50%);background:none;border:0;border-radius:50%;display:grid;place-items:center;pointer-events:auto;isolation:isolate;color:#fff4e8;font:1000 30px/1 Nunito,sans-serif;text-shadow:0 2px 3px #03101d}
.room-node:hover{background:none;filter:brightness(1.2)}
.room-node:focus-visible{outline:3px solid #b0faff;outline-offset:4px}
.room-medallion{position:absolute;inset:-7%;width:114%;height:114%;object-fit:contain;z-index:-1;pointer-events:none}
.room-node>span{position:relative;top:-1px}
.room-node.is-selected{width:var(--map-selected-node-size,112px);height:var(--map-selected-node-size,112px);color:#071724;font-size:37px;text-shadow:0 1px 0 #fff7e6;z-index:3}
.room-complete{position:absolute;width:30px;height:30px;right:0;bottom:0;filter:invert(87%) sepia(78%) saturate(884%) hue-rotate(123deg);background:#fff;border:2px solid #001e2d;border-radius:50%;pointer-events:none}
.map-node-hero{position:absolute;width:calc(var(--map-node-size,94px) * .65);height:calc(var(--map-node-size,94px) * .65);left:17.5%;top:-38%;filter:brightness(1.08);pointer-events:none}
.map-scroll-hint{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:11px;line-height:32px;margin:0;color:#a6d8e5;background:#041423cf}
.map-detail{min-width:0;overflow-y:auto;background:#061726;border-left:1px solid #3b657a}
.map-character-art{height:36vh;min-height:180px;max-height:350px;background:radial-gradient(ellipse at 50% 85%,#15546a 0%,#0a2638 45%,#061726 76%)}
.map-detail-content{padding:22px 25px}
.map-selected-description h2{font:1000 43px/1.05 Nunito,sans-serif;letter-spacing:-.04em;margin:0 0 8px;color:#fff1df}
.map-selected-description p{font-size:17px;color:#b8d5ee;line-height:1.3;margin:0 0 8px;min-height:2.6em}
.map-selected-description small{font-size:11px;color:#8adadf}
.map-play{display:flex;align-items:center;justify-content:center;gap:18px;margin:24px -10px 20px;width:calc(100% + 20px);min-height:90px;padding:14px 24px;background:transparent url(assets/lobby-v2/button-primary.webp) center/100% 100% no-repeat;border:0;border-radius:0;color:#071e31;font:900 29px/1 'Roboto Slab',serif;text-transform:uppercase;box-shadow:none}
.level-map-screen .map-play:is(:hover,:focus-visible,:active){background:transparent url(assets/lobby-v2/button-primary.webp) center/100% 100% no-repeat;filter:brightness(1.14)}
.map-play>img{width:33px;height:33px}
.map-edge-actions{display:flex;flex-direction:column;gap:5px;border-top:1px solid #496e85;padding-top:16px}
.map-edge-actions button{display:flex;align-items:center;gap:16px;text-align:left;min-height:44px;padding:5px 0;border:0;background:transparent;font-size:14px;color:#b9d3ea}
.map-edge-actions img{width:28px;height:28px;filter:invert(85%) sepia(12%) saturate(649%) hue-rotate(177deg)}
@media(min-width:901px) and (max-width:1150px){
 .levelmap-grid{grid-template-columns:190px minmax(0,1fr) 260px}
 .world-nav{padding:16px 7px}.world-thumbnail{width:39px;height:53px}.map-worlds button{padding:14px;gap:5px}.map-worlds strong{font-size:18px}.map-worlds small{font-size:9px}
 .map-heading{padding:20px 14px}.map-heading h2{font-size:26px;margin-right:32px}#map-current{right:8px;top:79px}#map-current span{display:none}
 .map-detail-content{padding:18px}.map-selected-description h2{font-size:34px}.map-selected-description p{font-size:14px}.map-play{font-size:26px}
}
@media(max-width:900px){
 body[data-screen="levels"] header{height:60px;padding:7px 5%;gap:12px}
 body[data-screen="levels"] .brand{display:none}
 body[data-screen="levels"] .map-back{width:44px;height:44px;padding:9px}
 body[data-screen="levels"] .map-screen-title{position:absolute;left:68px;right:68px;text-align:center;pointer-events:none;font-size:clamp(22px,5vw,34px)}
 body[data-screen="levels"] .tools button{width:44px;height:44px;padding:9px}
 body[data-screen="levels"] #sound{display:none}
 .level-map-screen{top:60px}
 .levelmap-grid{display:flex;flex-direction:column}
 .world-nav{flex:none;height:78px;padding:4px 10px 7px;border-right:0;background:#061727;overflow:hidden}
 .world-nav h2{display:none}
 .map-worlds{height:100%;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x}
 .map-worlds button{width:160px;min-width:160px;min-height:0;padding:10px 18px;gap:8px}
 .map-worlds strong{font-size:17px}.map-worlds small{display:none}.world-thumbnail{width:35px;height:43px}
 .map-column{flex:1;min-height:100px}
 .map-heading{min-height:115px;padding:13px 22px 7px}
 .map-heading h2{font-size:clamp(24px,5.7vw,34px);margin:0 35px 5px 0;line-height:1.05}
 .map-heading p{font-size:13px;margin-bottom:7px}
 #world-progress{height:5px;width:69%}
 #map-visible-range{font-size:10px;margin-top:7px;padding:3px 10px}
 #map-current{top:auto;bottom:8px;right:16px;width:44px;height:44px;padding:10px}
 #map-current span{display:none}
 .map-scroll{top:115px;bottom:0}
 .map-scroll-hint{display:none}
 .room-node{width:var(--map-node-size,44px);height:var(--map-node-size,44px);font-size:19px}
 .room-node.is-selected{width:var(--map-selected-node-size,48px);height:var(--map-selected-node-size,48px);font-size:22px}
 .room-complete{width:22px;height:22px}
 .map-node-hero{width:42px;height:42px;left:6%;top:-65%}
 .path-link{width:31px;height:12px}
 .map-detail{flex:none;overflow:visible;border-left:0;border-top:1px solid #466e83;background:#041827f5}
 .map-character-art{display:none}
 .map-detail-content{padding:9px 22px max(8px,env(safe-area-inset-bottom))}
 .map-selected-description{position:relative}
 .map-selected-description h2{font-size:26px;margin-bottom:2px}
 .map-selected-description p{font-size:12px;margin:0;min-height:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .map-selected-description small{position:absolute;right:0;top:8px;font-size:9px;max-width:48%;text-align:right}
 .map-play{margin:4px -8px 0;width:calc(100% + 16px);min-height:64px;font-size:25px;gap:18px;padding:12px 35px}
 .map-play>img{width:28px;height:28px}
 .map-edge-actions{border:0;padding:0;flex-direction:row;justify-content:space-between;gap:8px}
 .map-edge-actions button{font-size:11px;gap:5px;min-height:32px}
 .map-edge-actions img{width:20px;height:20px}
}
@media(max-width:900px) and (max-height:620px){
 .world-nav{height:64px}.map-detail-content{padding-top:5px;padding-bottom:5px}.map-selected-description h2{font-size:23px}.map-selected-description p{font-size:11px}.map-selected-description small{font-size:8px}
 .map-play{min-height:54px;font-size:22px;margin-top:2px}.map-heading{padding-top:10px}.map-heading h2{font-size:22px}.map-heading p{font-size:11px}.map-scroll{top:100px}
}
@media(orientation:landscape) and (max-width:900px) and (max-height:500px){
 .levelmap-grid{display:grid;grid-template-columns:145px minmax(0,1fr) 230px}
 .world-nav{height:auto;padding:5px}.map-worlds{height:auto;flex-direction:column;overflow-y:auto}.map-worlds button{width:100%;min-width:0;height:65px}.world-thumbnail{width:29px}.map-worlds strong{font-size:14px}
 .map-heading{padding:12px 10px}.map-heading h2{font-size:20px}.map-scroll{top:110px}.map-detail{border-top:0;border-left:1px solid #466e83}.map-detail-content{padding:18px 12px}.map-selected-description h2{font-size:27px}.map-selected-description p{white-space:normal;font-size:12px}.map-selected-description small{position:static;display:block;text-align:left;max-width:none;margin-top:10px}.map-play{margin-top:18px}.map-edge-actions{flex-direction:column;margin-top:14px}
}
@media(prefers-reduced-motion:reduce){.map-worlds button{transition:none}.map-scroll{scroll-behavior:auto}}

.world-nav{position:relative;isolation:isolate}
.world-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--world-map-art,url(assets/level-map-v1/map-top.webp)) center bottom/cover no-repeat;opacity:.22;filter:blur(2px);pointer-events:none}
.map-scroll{user-select:none;cursor:grab}
.map-scroll[data-dragging="true"]{cursor:grabbing}
.map-scroll[data-dragging="true"] .room-node{cursor:grabbing}

.map-canvas::after{content:attr(data-end-label);position:absolute;bottom:17px;left:0;right:0;text-align:center;font-size:11px;font-weight:700;color:#a5dce5;pointer-events:none}

/* Each world keeps its own image-space landmarks when the viewport changes. */
.level-map-screen[data-world="2"] .map-column{background:#231124}
.level-map-screen[data-world="3"] .map-column{background:#020814}
.level-map-screen[data-world="2"] .map-heading{background:#200e2580}
.level-map-screen[data-world="3"] .map-heading{background:#020916a8}
.level-map-screen .map-heading p{color:var(--world-map-accent,#adecf1)}
.level-map-screen[data-world="2"] .path-link{filter:sepia(.8) saturate(1.5) brightness(.8)}
.level-map-screen[data-world="3"] .map-backdrop{opacity:.75}
.level-map-screen[data-world="3"] .path-link.is-complete{filter:drop-shadow(0 0 5px #4b9eff)}

body:not([data-screen="levels"]) .map-canvas::after{content:none}

.map-character-art{position:relative;overflow:hidden}
.map-character-art::after{content:"";position:absolute;bottom:0;left:15%;width:70%;height:25px;background:linear-gradient(#627f88 0 12%,#304858 14% 28%,#172b3a 30%);border-top:2px solid #a0bec3;clip-path:polygon(9% 0,91% 0,100% 25%,94% 100%,6% 100%,0 25%);box-shadow:0 -5px 24px #4be8ef30}
.map-character-art canvas{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:88%;height:100%;object-fit:contain;filter:brightness(1.08)}