/* Large illustrated route cards. The map owns its responsive layout; never
   shrink seven destinations into the height of a phone's landscape viewport. */
#shell #map{padding:18px max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left))!important;overflow-y:auto!important;background:radial-gradient(ellipse at 50% 35%,#194850a8,transparent 72%),linear-gradient(120deg,#071c27d9,#0d3031c9)}
#shell #map .panel-layout{transform:none!important;max-width:1240px;width:100%;gap:8px;margin:auto;flex-shrink:0}
#shell #map .eyebrow{font-size:11px;letter-spacing:3px;color:#ffe58b;margin:0}
#shell #map h2{font-size:clamp(24px,3vw,36px);line-height:1.12;color:#fff2bb;text-shadow:0 3px 0 #05292e,0 0 24px #f6bd4544;margin:0}
#shell #map .intro{font-size:14px;line-height:1.3;margin:0;color:#e0eeea}
#shell #map .progress-summary{font-size:12px;line-height:1.3;letter-spacing:.6px;margin:3px 0 0;color:#ffe38b}
#shell #levels{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:27px 22px!important;width:100%;max-width:1200px;margin:0;padding:26px 8px 16px!important;overflow:visible!important;scroll-snap-type:x proximity}
#shell #levels .route-card{flex:0 0 calc((100% - 66px)/4);width:auto;max-width:280px;min-width:0;height:clamp(226px,29vh,290px);min-height:0!important;padding:0!important;border:3px solid var(--route-accent)!important;border-radius:22px!important;overflow:visible;isolation:isolate;background:linear-gradient(145deg,#224b52,#0c2833 75%);box-shadow:0 7px 0 #041b27,0 0 0 2px #ffffff24,0 14px 25px #03161c75,inset 0 2px 0 #ffffff66;transform:none;transition:transform .16s ease,box-shadow .16s ease;filter:none!important;opacity:1!important}
#shell #levels .route-card:enabled:hover{transform:translateY(-5px);box-shadow:0 10px 0 #041b27,0 0 0 3px var(--route-accent),0 19px 30px #03161c88}
#shell #levels .route-card:enabled:active{transform:translateY(3px);box-shadow:0 3px 0 #041b27,0 0 0 2px #ffffff44}
#shell #levels .route-card:focus-visible{outline:3px solid #fff9d7;outline-offset:5px}
#shell #levels .route-scene,#shell #levels .route-locked .route-scene{inset:4px 4px 94px;z-index:0;border-radius:15px 15px 7px 7px;background-image:var(--route-art)!important;background-size:cover;background-position:center;filter:saturate(1.2) contrast(1.04)!important;box-shadow:inset 0 0 0 1px #fff3}
#shell #levels [data-route="1"] .route-scene{background-size:auto 220%;background-position:right 70%}
#shell #levels [data-route="4"] .route-scene{background-size:auto 115%;background-position:82% 40%}
#shell #levels [data-route="5"] .route-scene{background-image:url('assets/fanal-trees-v38.webp'),var(--route-art)!important;background-size:auto 185%,cover;background-position:12% 0%,center;background-repeat:no-repeat}
#shell #levels [data-route="6"] .route-scene{background-position:62% 50%}
#shell #levels .route-number{top:11px;left:11px;width:34px;height:34px;font-size:18px!important;line-height:1;background:var(--route-accent);border:2px solid #fff9;box-shadow:0 3px 0 #08242e,0 2px 10px #06222e88;z-index:2}
#shell #levels .route-name{position:absolute;left:9px;right:9px;bottom:46px;height:43px;min-height:0!important;padding:0;display:flex;align-items:center;justify-content:center;font-size:clamp(19px,1.85vw,25px)!important;line-height:1.04;text-align:center;color:#fff9dc;text-shadow:0 2px 0 #031e2b;z-index:1}
#shell #levels .route-name{display:block;align-content:center}
#shell #levels .route-stars{position:absolute;top:12px;right:10px;height:auto;font-size:18px;line-height:1;letter-spacing:1px;padding:5px 7px;border-radius:9px;background:#092b35dd;z-index:2}
#shell #levels .route-stars:empty{display:none}
#shell #levels .route-launch{position:absolute;left:10px;right:10px;bottom:9px;width:auto;min-height:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:3px 5px!important;border:2px solid #fff9;border-radius:10px;font-size:15px!important;line-height:1.05;white-space:normal;text-align:center;letter-spacing:.2px;background:linear-gradient(#fff0ad,var(--route-accent));box-shadow:0 3px 0 #041d29;color:#11332e;text-shadow:none}
#shell #levels .route-locked .route-launch{background:#173b46;color:#e5eeeb;border-color:#63858b;font-size:13px!important}
#shell #levels .route-new{left:50%;right:auto;top:-23px;min-width:94px;padding:8px 16px 9px;font-size:26px;transform:translateX(-50%) rotate(-8deg) scale(.74);transform-origin:center;z-index:5}
#shell #map #back{margin:0;min-height:36px;padding:7px 24px;font-size:17px}
/* Keep full-size art on short screens. A visible scrollbar and the next card
   peeking at the edge make the horizontal route shelf discoverable. */
@media(max-height:650px),(max-width:760px){
 #shell #map{padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left))!important;overflow:hidden!important}
 #shell #map .panel-layout{max-width:none;gap:5px;min-height:0;height:100%;justify-content:center}
 #shell #map .eyebrow{display:none}
 #shell #map h2{font-size:clamp(20px,3vw,28px)}
 #shell #map .intro{font-size:12px}
 #shell #map .progress-summary{font-size:11px;margin:0}
 #shell #levels{display:flex!important;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;flex:0 1 auto;min-height:0;max-width:100%;height:calc(100dvh - 132px);max-height:350px;gap:18px!important;padding:23px 8px 14px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-padding:8px;scrollbar-width:thin;scrollbar-color:#ffda70 #173f48;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x}
 #shell #levels .route-card{flex:0 0 clamp(205px,29vw,290px);max-width:none;height:100%;min-height:0!important;scroll-snap-align:start}
 #shell #levels .route-scene,#shell #levels .route-locked .route-scene{bottom:83px}
 #shell #levels .route-name{bottom:42px;height:36px;font-size:21px!important}
 #shell #levels .route-launch{bottom:8px;height:28px;min-height:28px;font-size:14px!important}
 #shell #levels .route-locked .route-launch{font-size:12px!important}
 #shell #levels .route-number{width:30px;height:30px;font-size:16px!important;top:9px;left:9px}
 #shell #levels .route-new{top:-21px}
 #shell #levels::-webkit-scrollbar{height:5px}
 #shell #levels::-webkit-scrollbar-track{background:#173f48;border-radius:5px}
 #shell #levels::-webkit-scrollbar-thumb{background:#ffda70;border-radius:5px}
 #shell #map #back{min-height:30px;padding:5px 22px;font-size:15px}
}
@media(max-height:360px){
 #shell #map{padding-top:7px!important;padding-bottom:7px!important}
 #shell #map .intro{display:none}
 #shell #map h2{font-size:21px}
 #shell #levels{height:calc(100dvh - 96px);padding-top:21px!important;padding-bottom:12px!important}
 #shell #levels .route-scene,#shell #levels .route-locked .route-scene{bottom:73px}
 #shell #levels .route-name{bottom:37px;height:31px;font-size:19px!important}
 #shell #levels .route-launch{height:25px;min-height:25px;bottom:7px;font-size:13px!important}
}
@media(prefers-reduced-motion:reduce){#shell #levels .route-card{transition:none}}