/* Two clearly separate collections, with full-sized cards on short screens. */
#shell #route-groups298{display:flex;justify-content:center;gap:10px;margin:4px 0;flex-shrink:0}
#shell #route-groups298 button{border:2px solid #71968e;border-radius:11px;background:#102e37;color:#e1ede7;padding:10.35px 19.55px;font:20.7px MadeiraArcadeSoft;min-height:46px;white-space:nowrap}
#shell #route-groups298 [aria-selected="true"]{background:#f2d17a;color:#17372e;border-color:#fff1bc;box-shadow:0 3px 0 #8b6b30}
#shell #route-groups298 button:focus-visible{outline:3px solid white;outline-offset:3px}
#shell #levels .route-bonus .route-number{width:auto;min-width:70px;padding:0 8px;border-radius:9px;font-size:16px!important}
@media(min-height:651px) and (min-width:761px){#shell #levels .route-card{flex-basis:calc((100% - 44px)/3);max-width:280px}}
@media(max-height:650px),(max-width:760px){#shell #levels{height:calc(100dvh - 180px)}#shell #route-groups298{gap:8px;margin:3px 0}#shell #route-groups298 button{font-size:17.25px;padding:6.9px 14.95px;min-height:36.8px}}
@media(max-height:360px){#shell #levels{height:calc(100dvh - 139px)}#shell #route-groups298 button{font-size:16.1px;padding:5.75px 11.5px;min-height:33.35px}}

#shell #bonusunlock298{margin:3px 0;color:#ffe39b;font:16px MadeiraArcadeSoft;text-align:center}#shell #bonusunlock298[hidden]{display:none}

.podium-block .podium-score{display:block;margin-top:6px;font:700 14px/1.3 Arial,sans-serif;color:#ffe49b;overflow-wrap:anywhere;white-space:normal}

/* Bonus collection keeps its own distinct colour, selected or not. */
#shell #route-groups298 #route-bonus298{background:linear-gradient(135deg,#92365e,#64356f);color:#fff2dd;border-color:#f39dc3;box-shadow:0 3px 0 #412344,inset 0 1px #ffc4d744}
#shell #route-groups298 #route-bonus298[aria-selected="true"]{background:linear-gradient(135deg,#ffbf86,#ee8ca5);color:#422442;border-color:#ffeed2;box-shadow:0 3px 0 #963f64,0 0 16px #ed91b02b}
#shell #levels .route-bonus{--route-accent:#f0a4c9!important}
#shell #levels .route-bonus .route-launch{background:linear-gradient(#ffc6c1,#ec92b7);color:#422442}

#shell #bonus-explainer299{max-width:760px;margin:2px auto;color:#f5dcdd;font:14px/1.35 Arial,sans-serif;text-align:center}#shell #bonus-explainer299[hidden]{display:none}@media(max-height:650px),(max-width:760px){#shell #map:has(#route-bonus298[aria-selected="true"]) #levels{height:calc(100dvh - 216px)}#shell #bonus-explainer299{font-size:12px;max-width:650px}}

/* Keep the single bonus card's artwork intact; allow vertical scrolling instead of shrinking it. */
#shell #map:has(#route-bonus298[aria-selected="true"]){overflow-y:auto!important}
#shell #map:has(#route-bonus298[aria-selected="true"]) .panel-layout{height:auto;min-height:100%;justify-content:flex-start}
#shell #map:has(#route-bonus298[aria-selected="true"]) #levels{height:auto!important;min-height:278px;max-height:none;flex:0 0 auto;justify-content:center;padding:10px 8px 16px!important;overflow:visible!important}
#shell #levels .route-bonus{flex:0 0 320px!important;width:320px;max-width:calc(100vw - 60px);height:252px!important;min-height:252px!important}
#shell #levels .route-bonus .route-number{display:none!important}
#shell #levels .route-bonus .route-scene{inset:5px 5px 82px!important;background-size:cover;background-position:center;min-height:160px}
#shell #levels .route-bonus .route-name{bottom:40px;height:36px;font-size:21px!important}
#shell #levels .route-bonus .route-launch{bottom:8px;height:28px;min-height:28px}

#shell #levels .route-maintenance301 .route-scene{filter:brightness(.40) saturate(.55)!important;opacity:1}
#shell #levels .route-maintenance301 .route-work301{position:absolute;z-index:3;top:calc((100% - 94px)/2 - 36px);left:50%;transform:translateX(-50%);width:90px;height:76px;display:block;filter:drop-shadow(0 3px 5px #0009)}
#shell #levels .route-maintenance301 .route-work301 svg{display:block;width:100%;height:100%}
#shell #levels .route-maintenance301 .route-launch{background:#263e41;color:#ffe19a;border-color:#8e815e;font-size:12px!important;letter-spacing:.6px}
@media(max-height:650px),(max-width:760px){#shell #levels .route-maintenance301 .route-work301{top:calc((100% - 83px)/2 - 36px)}}

/* 305: overflowing cards must never be centred above the scroll origin. */
#shell #map{justify-content:flex-start!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain;touch-action:pan-y}
#shell #map .panel-layout{height:auto!important;min-height:100%;margin:0 auto!important;justify-content:flex-start!important;flex-shrink:0}
#shell #map #back{order:-1;position:sticky;top:0;z-index:20;align-self:flex-start;flex-shrink:0;min-height:40px;padding:8px 20px;background:linear-gradient(#fff0ad,#f2cd6c);color:#17372e;border:2px solid #fff0b6;border-radius:13px;box-shadow:0 3px 0 #80622d}
body:has(#private-test-label) #shell #map{padding-top:30px!important}
#shell #map #levels{flex-shrink:0}
#shell #map:has(#route-bonus298[aria-selected="true"]) #levels{touch-action:pan-y}

/* 313: size the route shelf from the actual game area, including browser chrome. */
#shell #map[data-short-routes="yes"]{padding:8px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left))!important}
#shell #map[data-short-routes="yes"] .panel-layout{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-content:start;align-items:center;gap:5px 10px;min-height:0!important;height:auto!important}
#shell #map[data-short-routes="yes"] .eyebrow,#shell #map[data-short-routes="yes"] .intro{display:none!important}
#shell #map[data-short-routes="yes"] h2{grid-column:1;grid-row:1;text-align:left;font-size:21px!important;line-height:1.1}
#shell #map[data-short-routes="yes"] #back{grid-column:2;grid-row:1;order:0;top:0;min-height:36px;font-size:15px;padding:6px 12px;justify-self:end}
#shell #map[data-short-routes="yes"] :is(#mapprogress,#bonusunlock298,#route-groups298,#bonus-explainer299,#levels){grid-column:1/-1}
#shell #map[data-short-routes="yes"] #mapprogress{font-size:11px;line-height:1.25;letter-spacing:0;margin:0}
#shell #map[data-short-routes="yes"] #route-groups298{margin:0;gap:8px}
#shell #map[data-short-routes="yes"] #route-groups298 button{min-height:39.1px;padding:6.9px 13.8px;font-size:17.25px}
#shell #map[data-short-routes="yes"] #bonus-explainer299{font-size:12px;line-height:1.25;margin:0;max-width:660px}
#shell #map[data-short-routes="yes"] #levels{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;max-height:none!important;padding:8px 5px 14px!important;gap:14px!important;overflow-x:auto!important;overflow-y:hidden!important;touch-action:pan-x;scrollbar-width:thin}
#shell #map[data-short-routes="yes"] #levels .route-card{flex:0 0 218px!important;width:218px!important;max-width:none!important;height:var(--route-card-height,180px)!important;min-height:0!important;scroll-snap-align:start}
#shell #map[data-short-routes="yes"] #levels .route-scene{inset:4px 4px 78px!important;min-height:0!important}
#shell #map[data-short-routes="yes"] #levels .route-name{bottom:40px;height:32px;font-size:19px!important}
#shell #map[data-short-routes="yes"] #levels .route-launch{bottom:7px;height:30px;min-height:30px;font-size:14px!important}
#shell #map[data-short-routes="yes"] #levels .route-maintenance301 .route-work301{top:calc((100% - 78px)/2 - 30px);width:72px;height:60px}

/* One bonus card is centred in its shelf on both grid and short-screen flex layouts. */
#shell #map #levels:has(> .route-bonus:only-child){justify-content:center!important;grid-template-columns:minmax(0,280px)!important}