/* V2.5 · Watch-style frosted-glass vertical level picker
   Palette: Raspberry Rose #F2619C, Soft Lilac #E7BEF8,
   Blueberry Milk #93ABD9, Lemon Cream #EDE986. */
#overlay:has(#routeStage){padding:0!important;background:#34294e!important;align-items:stretch!important;justify-items:stretch!important}
#overlay:has(#routeStage) #card{height:100%!important;max-height:none!important;max-width:none!important;margin:0!important;overflow:hidden!important;padding:0!important;border:0!important;box-shadow:none!important;border-radius:0!important;background:#3f355b!important}
.route-stage{position:relative;isolation:isolate;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;background:
  radial-gradient(ellipse 104% 42% at 110% 11%,#f2619c7e 0%,transparent 64%),
  radial-gradient(ellipse 85% 50% at -18% 50%,#93abd9ae 0%,transparent 70%),
  radial-gradient(ellipse 84% 41% at 91% 85%,#ede9866b 0%,transparent 71%),
  linear-gradient(155deg,#47385f 0%,#66527e 36%,#605b9c 70%,#43345f 100%);color:#fffaf8}
.route-stage::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;background:
 repeating-linear-gradient(112deg,transparent 0 81px,rgba(255,255,255,.035) 82px 84px,transparent 85px 156px),
 radial-gradient(ellipse at 60% 15%,#fff8 0 1px,transparent 2px),radial-gradient(ellipse at 18% 65%,#fff9 0 1px,transparent 2px);}
.route-ambient{position:absolute;border-radius:50%;filter:blur(23px);pointer-events:none;z-index:-1;opacity:.68}
.route-ambient-a{width:235px;height:265px;right:-74px;top:10%;background:linear-gradient(120deg,#f2619c80,#e7bef8b8)}
.route-ambient-b{width:225px;height:280px;left:-95px;bottom:1%;background:linear-gradient(140deg,#93abd9ae,#ede98670)}
.route-spark{position:absolute;z-index:0;pointer-events:none;color:#f8eec9ba;font-size:20px;text-shadow:0 0 10px #fff8}
.route-spark-a{right:7%;top:17%}.route-spark-b{left:5%;top:57%;font-size:29px}.route-spark-c{right:4%;bottom:21%;font-size:16px}
.route-header{flex:0 0 auto;position:relative;z-index:3;text-align:left;padding:23px 21px 1px}
.route-brandline{display:flex;justify-content:space-between;align-items:center;color:#fae8fb;font-size:10px;letter-spacing:2.1px;font-weight:900}
.route-brand{padding:7px 0;color:#f5e9fb}.route-brand b{color:#ede986}.route-star{color:#ede986;font-size:16px}
.route-number{display:flex;align-items:baseline;gap:5px;color:#f5edf6ad;letter-spacing:.3px;font-size:10px}
.route-number b{color:#fff8e8;font-size:21px;letter-spacing:-.8px}
.route-header h2{font-size:30px;line-height:1.16;margin:4px 0 5px;color:#fff9ed;font-weight:1000;letter-spacing:-1px;text-shadow:0 3px 13px #35254b85}
.route-header h2 span{color:#ede986;padding-left:5px}
.route-header p{font-size:11px;margin:0;color:#f5e9f5d9;letter-spacing:.3px;font-weight:700}
.route-down{display:inline-flex;vertical-align:middle;border:1px solid #ffffff64;background:#ffffff16;border-radius:50%;height:19px;width:19px;align-items:center;justify-content:center;font-size:20px;margin-left:4px}
.route-scroll{flex:1 1 auto;position:relative;z-index:2;display:flex;flex-direction:column;gap:13px;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;scroll-padding-block:28%;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 13px 0;mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%)}
.route-scroll::-webkit-scrollbar{display:none}
.route-scroll-space{height:max(57px,calc((100% - 126px)/2));flex:0 0 auto;pointer-events:none}
.route-card{flex:0 0 123px;min-height:123px;width:100%;position:relative;display:flex;align-items:center;justify-content:space-between;overflow:hidden;color:#3d315a;background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 68%,white) 0%,color-mix(in srgb,var(--cc2) 73%,white) 65%,color-mix(in srgb,var(--cc2) 60%,#e7bef8) 100%);border:1.5px solid #ffffffd9;border-radius:25px;box-shadow:0 12px 29px #2b1b4778,inset 0 1px 1px #fff9;text-align:left;padding:12px 13px 12px 19px;opacity:var(--alpha,1);filter:blur(var(--defocus,0px)) saturate(var(--sat,1));transform:translateZ(0) scale(var(--scale,1));transform-origin:center;transition:transform .20s cubic-bezier(.22,1,.36,1),opacity .20s ease,filter .20s ease,box-shadow .25s ease;scroll-snap-align:center;will-change:transform;touch-action:pan-y}
.route-card::after{content:'';position:absolute;inset:1px;border-radius:23px;pointer-events:none;background:linear-gradient(160deg,#ffffff9c 0%,#ffffff23 42%,#ffffff09 60%,#ffffff66 100%);opacity:.7}
.route-card .route-card-glint{position:absolute;left:16%;top:-60px;width:140px;height:220px;pointer-events:none;background:linear-gradient(90deg,transparent,#ffffff61,transparent);transform:rotate(25deg);z-index:0;opacity:.8}
.route-card.is-focused{border-color:#fffef6;box-shadow:0 14px 32px #26174f95,0 0 0 2px #ffffff58,inset 0 2px 1px #fff;z-index:4;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.route-card.pressed{transform:translateZ(0) scale(1.065)!important;filter:blur(0px)!important;opacity:1!important}
.route-card.locked{color:#4b4864}
.route-card.locked .route-art{filter:grayscale(.15)}
.route-card .route-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:4px;max-width:78%;min-width:0}
.route-n{font-size:9px;font-weight:1000;letter-spacing:1.6px;color:#534977d9}
.route-dot{font-size:8px;color:#fffbea;text-shadow:0 0 3px #9982bb}
.route-copy strong{font-size:20px;font-weight:1000;letter-spacing:-.6px;color:#433361;line-height:1.25;white-space:nowrap}
.route-copy small{font-size:10px;font-weight:800;color:#514771;line-height:1.5;white-space:nowrap}
.route-rating{font-size:10px;letter-spacing:.3px;color:#976b85;font-weight:1000}
.route-art{position:relative;z-index:1;min-width:68px;min-height:78px;flex:1;display:flex;justify-content:center;align-items:center;font-size:42px;align-self:stretch}
.route-art::before{content:'';position:absolute;right:-13px;top:2px;width:76px;height:76px;border-radius:27px;background:linear-gradient(145deg,#ffffff87,#ffffff1b);border:1px solid #ffffff71;box-shadow:inset 0 1px #fff9;transform:rotate(14deg)}
.route-art>span{position:relative;z-index:1;filter:drop-shadow(0 4px 3px #4535624d)}
.route-art i{font-style:normal;position:absolute;right:-3px;top:-1px;font-size:20px;color:#644a82;z-index:2}
.route-dock{flex:0 0 auto;z-index:6;position:relative;margin:0 10px 10px;padding:11px 9px 9px;border-radius:21px;background:linear-gradient(140deg,#ffffff51,#ffffff20 58%,#dfc6f23c);border:1px solid #ffffffa6;box-shadow:0 12px 28px #28183e78,inset 0 1px #fff9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.route-dock-caption{display:flex;align-items:center;gap:6px;padding:0 6px 8px;white-space:nowrap}
.route-focus-dot{width:7px;height:7px;border-radius:50%;background:#ede986;box-shadow:0 0 10px #ede986}
.route-dock-caption strong{font-size:11px;font-weight:1000;color:#fff9ef;overflow:hidden;text-overflow:ellipsis}
.route-dock-caption>span:last-child{margin-left:auto;font-size:9px;color:#f7e6fbcc}
.route-extra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0!important}
.route-extra .mode-btn{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-height:53px;min-width:0;border-radius:13px;padding:7px 2px;color:#442f60;border:1px solid #fff9;background:linear-gradient(145deg,#fff5efdb,#dfd9f7cb);box-shadow:0 4px #3c2c6494;font-weight:900}
.route-extra .mode-btn:nth-child(2){background:linear-gradient(145deg,#f9c4dd,#f29bca)}
.route-extra .mode-btn:nth-child(3){background:linear-gradient(145deg,#f0efa0,#e4f6b5)}
.route-extra .mode-btn span{font-size:19px;line-height:1}.route-extra .mode-btn b{font-size:10px}
.route-extra .mode-btn:active{transform:translateY(2px);box-shadow:0 1px #3c2c6494}
.route-dock .scene-pick{display:flex;align-items:center;gap:6px;justify-content:center;font-size:9px;font-weight:800;color:#eee3ffb3;margin:9px 0 0}
.route-dock .scene-pick select{max-width:60%;width:auto;border:1px solid #ffffffa6;border-radius:10px;background:#ffffff4f;color:#fffdf7;padding:4px 9px;font:800 10px system-ui;-webkit-appearance:menulist;touch-action:manipulation}
.route-dock .scene-pick select option{color:#37274f}
@media(max-height:620px){.route-header{padding-top:12px}.route-header h2{font-size:25px}.route-header p{font-size:10px}.route-card{flex-basis:108px;min-height:108px}.route-scroll-space{height:75px}.route-dock{padding:7px}.route-dock-caption{padding-bottom:3px}.route-extra .mode-btn{min-height:44px}.route-dock .scene-pick{margin-top:6px}}
@media(max-width:350px){.route-copy strong{font-size:17px}.route-copy small{font-size:9px}.route-card{padding-left:12px}.route-art{font-size:35px;min-width:53px}.route-header{padding-left:15px;padding-right:15px}}
@media(prefers-reduced-motion:reduce){.route-card{transition:none;filter:none!important}.route-ambient{filter:none;opacity:.25}}