:root{color-scheme:dark;--route-accent:#80eaff;--overlay-top:28px}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
#unity-container,#unity-canvas{width:100vw!important;height:100dvh!important}
#route-content{position:absolute;inset:0;z-index:10;display:flex;align-items:flex-start;padding:var(--overlay-top) max(22px,4vw)!important;pointer-events:none;overflow:hidden;transition:none!important}
#route-panel,#route-panel *{box-sizing:border-box}
#route-panel{pointer-events:auto;user-select:text;width:min(650px,calc(100vw - 44px));max-width:650px;max-height:calc(100dvh - var(--overlay-top) - 100px);display:flex;flex-direction:column;min-height:0;padding:0;color:#f5f6fb;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden;opacity:1;transform:translate3d(0,0,0);transition:transform 650ms cubic-bezier(.76,0,.24,1),opacity 500ms ease;text-shadow:0 2px 18px #0009,0 1px 3px #0008}
#route-content.is-hidden #route-panel{transform:translate3d(-120vw,0,0);opacity:0;pointer-events:none}
#route-content.is-hidden *{pointer-events:none!important}
#route-panel{position:relative;isolation:isolate;overflow:visible}
/* A feathered scrim follows the copy; no filled card or visible outline. */
#route-panel::before{content:"";position:absolute;inset:-26px -48px -30px -36px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 42% 42%,rgba(2,6,12,.58) 0%,rgba(2,6,12,.38) 48%,rgba(2,6,12,.16) 68%,transparent 82%);filter:blur(18px)}
#route-scroll{padding:30px 32px 24px;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-y;mask-image:linear-gradient(to bottom,#000 calc(100% - 14px),transparent);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 14px),transparent)}
#route-scroll::-webkit-scrollbar{display:none;width:0;height:0}
#route-panel .route-hero{display:grid;grid-template-columns:minmax(0,1fr) 158px;align-items:center;gap:16px}
#route-panel .route-hero.no-art{display:block}
#route-panel .brand-art{width:100%;height:auto;max-height:160px;object-fit:contain;border-radius:12px;box-shadow:0 12px 28px #0004}
body[data-route="music-club"] #route-panel .brand-art{width:105px;justify-self:end}
#route-panel .eyebrow{margin:0 0 12px;color:var(--route-accent);font-size:10px;line-height:1.5;font-weight:700;letter-spacing:.17em;text-transform:uppercase;opacity:1}
#route-panel h1{font-size:clamp(32px,3.7vw,54px);line-height:1.02;font-weight:760;letter-spacing:-.048em;margin:0;text-wrap:balance}
body[data-route="home"] #route-panel h1{font-size:clamp(46px,5.9vw,80px)}
#route-panel .destination-name{display:block;color:var(--route-accent);font-size:13px;font-weight:600;letter-spacing:.015em;margin-bottom:9px}
#route-panel p{font-size:16px;line-height:1.55;letter-spacing:0;color:#c2ccdb;margin:18px 0 0;max-width:none;opacity:1}
#route-panel .route-intro{font-size:18px;line-height:1.5}
#route-panel .route-guidance{color:#e4edf5;font-size:15px;line-height:1.5}
#route-panel .route-guidance strong{color:#fff;font-weight:700}
#route-panel .route-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:21px 0 0}
#route-panel button,#route-panel a,#route-panel summary{-webkit-tap-highlight-color:transparent}
#route-panel button,#route-panel .route-actions a{font-family:inherit;font-size:13px;font-weight:650;line-height:1.3;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:12px 17px;border:1px solid #a2c5dc50;border-radius:12px;color:#ecf6ff;background:#ffffff09;text-decoration:none;transition:background .18s,border-color .18s,box-shadow .18s}
#route-panel .route-actions .route-primary{background:var(--route-accent);border-color:var(--route-accent);color:#091321;font-weight:750;box-shadow:0 4px 24px color-mix(in srgb,var(--route-accent) 16%,transparent)}
#route-panel a:hover,#route-panel button:hover{background:#ffffff19;border-color:var(--route-accent)}
#route-panel .route-actions .route-primary:hover{background:var(--route-accent);filter:brightness(1.12)}
#route-panel :focus-visible{outline:2px solid var(--route-accent);outline-offset:3px}
#route-panel .micro{font-size:11px;color:#b3c2cf;line-height:1.5;margin-top:12px}
#route-panel .construction{display:inline-block;font-size:9px;font-weight:650;letter-spacing:.12em;padding:5px 8px;margin:0 0 10px;color:#ffd188;background:#f4b54816;border:1px solid #e4a95042;border-radius:6px}
#route-panel .route-more{margin-top:21px;border-top:1px solid #adcfe626}
#route-panel summary{cursor:pointer;padding:15px 1px;font-size:13px;color:#e4edf5;font-weight:650}
#route-panel .route-features{display:grid;grid-template-columns:1fr;gap:16px;margin:6px 0 24px}
#route-panel .route-feature{border-left:2px solid var(--route-accent);padding-left:15px}
#route-panel h2{font-size:22px;line-height:1.15;letter-spacing:-.03em;margin:7px 0 12px}
#route-panel h3{font-size:16px;margin:4px 0 8px}
#route-panel .route-feature p,#route-panel .route-faq p{font-size:14px;margin:6px 0 0}
#route-panel .route-how{padding:20px;background:#ffffff05;border:1px solid #adcfe61c;border-radius:14px}
#route-panel ol{padding-left:20px;margin:12px 0 0;font-size:14px;line-height:1.5;color:#c2ccdb}
#route-panel li+li{margin-top:12px}
#route-panel li::marker{color:var(--route-accent)}
#route-panel .route-faq{margin-top:24px}
#route-panel .route-faq details{border-top:1px solid #adcfe623}
#route-panel .route-faq summary{padding:13px 0}
#route-panel .route-note{font-size:11px;color:#8fa4b7}
#destination-bar{position:static;flex:0 0 auto;border:0;background:transparent;margin:0;padding:10px 15px;z-index:auto}
#destination-bar nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 5px}
#destination-bar a{font-size:11px;line-height:1.35;display:block;padding:8px 7px;margin:0;border:0;border-radius:7px;background:transparent;color:#b8c8da;text-decoration:none;white-space:normal;backdrop-filter:none;text-align:center}
#destination-bar a[aria-current="page"]{color:var(--route-accent);background:#ffffff09}
.route-arriving #route-scroll{animation:routeArrival 420ms ease-out}
@keyframes routeArrival{from{opacity:.25;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px),(pointer:coarse){
 :root{--overlay-top:max(16px,env(safe-area-inset-top,0px))}
 #route-content{padding-left:16px!important;padding-right:16px!important}
 #unity-container.loader-active #route-content{--overlay-top:100px}
 body:not(.has-touch-controls) #unity-container.loader-active #route-panel{max-height:calc(100dvh - var(--overlay-top) - 24px)}
 #route-panel{width:min(560px,calc(100vw - 32px));max-height:max(0px,calc(var(--controls-top,58dvh) - var(--overlay-top) - 14px))}
 #route-scroll{padding:20px 21px 15px}
 #route-panel .route-hero{grid-template-columns:minmax(0,1fr) 105px;gap:12px}
 #route-panel h1{font-size:32px}body[data-route="home"] #route-panel h1{font-size:48px}
 #route-panel .route-intro{font-size:15px;line-height:1.5;margin-top:14px}
 #route-panel .route-guidance{font-size:14px;margin-top:14px}
 #route-panel .eyebrow{font-size:9px;margin-bottom:10px}
 #route-panel .destination-name{font-size:11px}
 body[data-route="music-club"] #route-panel .brand-art{width:70px;max-height:108px}
 #route-panel .route-actions{margin-top:17px;gap:8px}
 #route-panel button,#route-panel .route-actions a{font-size:12px;padding:11px 12px}
 #destination-bar{padding:8px}
 #destination-bar nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
 #destination-bar a{font-size:10px;overflow-wrap:normal;padding:8px 3px}
}
body.has-touch-controls #route-panel{max-height:max(0px,calc(var(--controls-top,58dvh) - var(--overlay-top) - 14px))}
@media(max-height:520px) and (orientation:landscape){:root{--overlay-top:10px}#route-panel{width:min(550px,calc(100vw - 32px))}#route-panel .route-hero{grid-template-columns:minmax(0,1fr) 76px}#route-panel h1{font-size:27px}#route-scroll{padding:14px 19px}#route-panel .route-intro{font-size:14px}#destination-bar a{padding-block:5px}}
@media(prefers-reduced-motion:reduce){#route-panel,.route-arriving #route-scroll{transition:none;animation:none}}
