#levels-screen{padding:0;background:#a5dbfb url('./assets/map/sky-background.webp') center/100% 100% no-repeat;backdrop-filter:none;overflow:hidden;display:block}
.map-header{position:absolute;top:13px;left:78px;width:236px;height:65px;z-index:3;border:3px solid #c5a6ff;border-radius:32% 32% 35% 35% / 25% 25% 40% 40%;background:linear-gradient(#c775ff,#8841e6 48%,#7024c5 80%,#481895);box-shadow:inset 0 3px 2px #f5d1ff,inset 0 -4px 3px #3b198c,0 4px 0 #442085,0 7px 9px #173f8544;display:flex;align-items:center;justify-content:center}
.map-header h1{color:white;font-size:37px;letter-spacing:1px;margin:0;text-shadow:0 3px 0 #38126f;line-height:1}
#levels-close{position:absolute;right:13px;top:18px;width:42px;height:42px;z-index:5;border-radius:50%;border:2px solid #fb9eac;background:linear-gradient(#ff8e97,#f12b43 60%,#b9132c);color:white;font-size:37px;line-height:30px;box-shadow:inset 0 2px 1px #fff8,0 3px 2px #81232a;text-shadow:0 2px 2px #76232d}
#level-map-scroll{position:absolute;inset:85px 0 139px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;overflow-anchor:none;outline-offset:-4px}
#level-map-scroll::-webkit-scrollbar{display:none}
#level-map-track{position:relative;width:390px}
#level-map-layer{position:absolute;left:0;width:390px}
.map-cables{position:absolute;width:390px;height:100%;overflow:visible}
#levels-screen .map-socket{position:absolute;width:68px;height:68px;background:none;border:0;padding:0;box-shadow:none;filter:none;opacity:1;color:#172469}
.map-socket>img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none}
.map-number{position:absolute;top:12%;left:0;width:100%;text-align:center;font-size:26px;line-height:1;font-weight:700;pointer-events:none}
.map-number.long-number{font-size:18px;top:17%}
.map-socket.selected{filter:drop-shadow(0 0 7px #ffef64)!important}
.map-socket.selected .map-number{color:#166922}
.map-lock{position:absolute;right:-5px;bottom:0;width:26px;height:32px;filter:drop-shadow(0 2px 1px #21366677)}
.map-lock :is(svg,img.button-icon){width:100%;height:100%;stroke-width:initial}
.map-mascot{position:absolute;width:78px;height:94px;object-fit:contain;pointer-events:none;z-index:2}
/* One continuous sky image retains the PLAY button and side cables. */
#map-start-cable{position:absolute;inset:0;width:390px;height:694px;pointer-events:none;z-index:0}
#level-map-scroll{z-index:1}
#map-play{position:absolute;bottom:45px;left:101px;width:187px;height:81px;z-index:4;background:transparent;border:0;border-radius:28px;box-shadow:none;padding:0;color:white;text-shadow:0 2px 2px #225b1d}
#map-play:active:not(:disabled){transform:none;box-shadow:none}
#map-play #map-play-level{position:absolute;bottom:6px;left:0;width:100%;font-size:16px;line-height:18px;text-align:center}
html.level-map-open,html.level-map-open body,html.level-map-open #game,#game #levels-screen,#game #level-map-scroll,#game #level-map-scroll *{touch-action:pan-y}

/* The map owns its backdrop; do not expose the lobby in portrait margins. */
html.level-map-open{background:#a5dbfb}
html.level-map-open #menu{visibility:hidden;pointer-events:none}
html.level-map-open body,html.level-map-open #game{background:transparent;box-shadow:none}