/* V2.8 | Winding overtime route — a game map, not a vertical card list.
   Forward progression is a natural upward finger swipe; levels ascend 01→13. */
#overlay:has(#routeStage){padding:0!important;background:#3f345f!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:#544276!important}
#overlay:has(#routeStage) #card:has(#again){background:#fff7e6!important}
.journey-stage{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;overflow:hidden;color:#fff8fa;background:
 radial-gradient(ellipse 88% 37% at 0% 20%,#efa7e47a 0%,transparent 85%),
 radial-gradient(ellipse 72% 36% at 98% 77%,#b6d5fb90 0%,transparent 82%),
 linear-gradient(174deg,#493a78 0%,#6557a0 41%,#7d79bc 70%,#514276 100%)}
.journey-stage:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 27% at 100% 6%,#c9b8ff87 0%,transparent 75%),radial-gradient(ellipse 65% 27% at -12% 70%,#b4d8f855 0%,transparent 75%);}
.journey-skyline{position:absolute;inset:auto -3% 7% -3%;height:23%;z-index:0;opacity:.22;pointer-events:none;background:linear-gradient(to top,#372c65 2%,transparent 100%);clip-path:polygon(0 100%,0 40%,5% 40%,5% 25%,13% 25%,13% 50%,16% 50%,16% 8%,24% 8%,24% 37%,29% 37%,29% 22%,37% 22%,37% 58%,43% 58%,43% 18%,50% 18%,50% 44%,56% 44%,56% 2%,64% 2%,64% 31%,70% 31%,70% 53%,78% 53%,78% 14%,86% 14%,86% 42%,93% 42%,93% 28%,100% 28%,100% 100%)}
.journey-distant{position:absolute;inset:0;z-index:-1;opacity:.45;pointer-events:none;background:radial-gradient(circle at 12% 29%,#ffffff 0 2px,transparent 3px),radial-gradient(circle at 81% 18%,#fffadc 0 2px,transparent 3px),radial-gradient(circle at 62% 85%,#fff 0 1.5px,transparent 2.5px);}
.journey-header{flex:0 0 auto;z-index:15;position:relative;padding:21px 20px 15px;text-align:left;background:linear-gradient(#45376ddf 0%,#53427ec7 68%,#5b498c00 100%);}
.journey-brand{font-size:10px;letter-spacing:2px;color:#fff2f7;font-weight:1000;display:flex;align-items:center;gap:3px}
.journey-brand b{color:#f2f69a}.journey-brand>span:not(.journey-total){color:#d4ff82;font-size:16px;padding-left:5px}
.journey-total{margin-left:auto;display:flex;align-items:baseline;gap:4px;letter-spacing:0;font-size:11px;color:#f1deffad;background:#ffffff24;border:1px solid #fff5;border-radius:100px;padding:7px 10px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.journey-total strong{color:#fff;font-size:20px}
.journey-header h2{font-size:29px;font-weight:1000;line-height:1.22;color:#fffaf2;letter-spacing:-1px;margin:9px 0 5px;text-shadow:0 3px 13px #3527529a}
.journey-header h2 span{color:#eef688;margin-left:4px}
.journey-header p{color:#eee6ffb8;font-size:11px;font-weight:800;line-height:1.4;margin:0}
.journey-finger{display:inline-grid;place-items:center;border:1px solid #fff6;border-radius:100%;width:20px;height:20px;background:#ffffff21;margin-left:4px;font-size:17px;color:#fff}
.journey-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative;z-index:2;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:y mandatory;scroll-padding-top:0;mask-image:linear-gradient(180deg,transparent 0%,black 6%,black 94%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,black 6%,black 94%,transparent 100%)}
.journey-scroll::-webkit-scrollbar{display:none}
.journey-content{position:relative;min-height:max-content;padding-top:var(--edge-spacer,140px);padding-bottom:var(--edge-spacer,140px);width:100%;}
.journey-road{position:absolute;left:0;top:var(--edge-spacer,140px);height:auto;width:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 9px #e4ceff60);z-index:0}
.route-stage-band{height:230px;width:100%;position:relative;scroll-snap-align:center;scroll-snap-stop:always;isolation:isolate;}
.route-stage-band .stage-light{position:absolute;width:175px;height:175px;top:21px;left:-28px;border-radius:50%;background:radial-gradient(ellipse,#fffae4b2 0%,var(--tone-a,#f4c3e7) 42%,transparent 75%);filter:blur(21px);z-index:-1;opacity:.59}
.route-stage-band.side-right .stage-light{left:auto;right:-28px}
.stage-vignette{position:absolute;z-index:1;left:0;top:25px;width:183px;height:177px;display:flex;align-items:center;justify-content:center;transition:opacity .25s,filter .25s,transform .25s;opacity:calc(1 - var(--distance,0)*.42);filter:blur(calc(var(--distance,0)*1.2px));transform:scale(calc(1 - var(--distance,0)*.05));pointer-events:none}
.side-right .stage-vignette{left:auto;right:0;}
.stage-vignette:before{content:"";position:absolute;inset:16px 9px 10px 4px;border:1px solid #ffffff6b;border-radius:33px 42px 21px 21px;background:linear-gradient(155deg,var(--tone-a,#ded2ff),var(--tone-b,#a8b9ee) 65%,#ffffff90);box-shadow:inset 0 2px #fff8,0 14px 20px #39295748;transform:rotate(-7deg);opacity:.82}
.side-right .stage-vignette:before{transform:rotate(7deg)}
.map-worker-svg{width:167px;max-width:100%;height:138px;position:relative;z-index:2;filter:drop-shadow(0 3px 4px #4d3a6e45);margin-top:3px}
.stage-emoji{position:absolute;z-index:3;top:2px;right:13px;font-size:23px;transform:rotate(11deg);filter:drop-shadow(1px 3px 1px #59436d40)}
.stage-mood{position:absolute;z-index:3;right:13px;bottom:8px;border-radius:30px;background:#ffffffe3;border:1px solid #fff5;padding:3px 9px;font-size:9px;color:#6f5685;font-weight:1000;letter-spacing:.1px;box-shadow:0 3px 5px #3a2a5a38;white-space:nowrap}
.route-node{position:absolute;z-index:4;top:calc(50% - 38px);left:28.2%;transform:translateX(-50%) scale(calc(1.03 - var(--distance,0)*.13));width:78px;height:78px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,#f8f4ff 0%,#cfc8fa 38%,#9b87d2 100%);border:4px solid #fff8ef;box-shadow:0 6px 0 #5f5098,0 0 0 5px #e3baff55,0 7px 21px #30215c9e,inset 0 0 0 6px #5a4c9890;color:#fff6fa;font:1000 27px ui-rounded,system-ui;letter-spacing:-1px;text-shadow:0 2px 1px #5a4795;transition:transform .22s,filter .22s,opacity .22s;touch-action:manipulation;}
.side-right .route-node{left:72.3%}
.route-node:focus-visible,.route-glass-play:focus-visible{outline:3px solid #effe88;outline-offset:5px}
.route-node-n{position:relative;z-index:2}
.route-node-stars{position:absolute;font-size:15px;white-space:nowrap;top:-33px;color:#ffe778;letter-spacing:2px;text-shadow:0 2px #856491;pointer-events:none}
.route-node .route-padlock{position:absolute;bottom:-12px;right:-14px;font-size:21px;z-index:3;filter:drop-shadow(0 2px 2px #554c79)}
.route-stage-band.is-focused .route-node{transform:translateX(-50%) scale(1.13);background:linear-gradient(155deg,#f9ffa5,#defa7a 55%,#92dc72);border-color:#ffffe5;box-shadow:0 6px 0 #66816d,0 0 0 6px #f0f9a766,0 0 23px #f0ff9d9e,inset 0 0 0 6px #e8fc90;color:#493866;text-shadow:0 1px #fff}
.route-stage-band.is-locked .route-node{filter:saturate(.42);opacity:.9}
.route-glass-detail{position:absolute;z-index:6;top:50%;left:43%;width:55%;max-width:223px;min-height:170px;transform:translate3d(0,-45%,0) scale(.9);transform-origin:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .23s ease,transform .27s cubic-bezier(.2,.85,.3,1),visibility .23s;display:flex;flex-direction:column;justify-content:center;gap:5px;color:#463562;text-align:left;border-radius:28px;border:1.5px solid #fff8f1;background:linear-gradient(136deg,#fffbffeb,#ebd9f7da 55%,#d9cbedc9);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 12px 28px #31245187,inset 0 2px 1px #fff7,inset 0 -2px 9px #cfb1e54d;padding:13px 12px 11px}
.side-right .route-glass-detail{left:2.8%;}
.route-glass-detail:before{content:"";position:absolute;top:7px;left:14px;right:14px;height:32px;border-radius:20px;background:linear-gradient(#ffffff9c,transparent);pointer-events:none}
.route-stage-band.is-focused .route-glass-detail{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,-50%,0) scale(1)}
.glass-top{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:8px;font-weight:1000;letter-spacing:1px;color:#836c97;white-space:nowrap;position:relative}
.glass-top span:last-child{max-width:74px;overflow:hidden;text-overflow:ellipsis;text-align:right;letter-spacing:0}
.glass-title{font-size:19px;font-weight:1000;letter-spacing:-.9px;color:#3c315f;white-space:nowrap;position:relative}
.glass-numbers{font-size:11px;color:#62517e;font-weight:850;white-space:nowrap;position:relative}
.glass-stars{font-size:11px;color:#a56d91;font-weight:1000;position:relative}
.route-glass-detail p{font-size:10px!important;line-height:1.35;color:#796484!important;font-weight:850!important;margin:2px 0 4px!important;min-height:25px;position:relative}
.route-glass-play{position:relative;display:block;border:1.5px solid #fffde3;border-radius:20px;padding:9px 3px;background:linear-gradient(115deg,#edff8b,#d6fa75);box-shadow:0 4px 0 #a4ae84,0 0 9px #effd9a8a;color:#41315a;font:1000 13px system-ui;text-align:center;touch-action:manipulation}
.route-glass-play:active{transform:translateY(2px);box-shadow:0 1px #a4ae84}
.is-locked .route-glass-play{background:linear-gradient(#eee7f3,#d8cfeb);color:#716884;box-shadow:0 3px #b6aac6}
.journey-dock{flex:0 0 auto;position:relative;z-index:15;margin:7px 10px 10px;padding:10px 9px 9px;border-radius:24px;background:linear-gradient(135deg,#ffffff74,#f4dff151 55%,#f8dff864);border:1.5px solid #ffffffc9;box-shadow:0 11px 26px #332553a0,inset 0 1px #fffa;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.journey-dock-title{display:flex;align-items:center;gap:5px;padding:0 5px 8px;min-height:20px;white-space:nowrap}
.journey-status-dot{font-size:11px;color:#effb8e;text-shadow:0 0 7px #e7ff9a}
.journey-dock-title strong{font-size:11px;color:#fff9ed;font-weight:1000;overflow:hidden;text-overflow:ellipsis}
.journey-dock-title>span:last-child{margin-left:auto;font-size:9px;color:#fffaf8c9}
.journey-dock .route-extra{margin:0!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.journey-dock .route-extra .mode-btn{min-width:0;min-height:51px;padding:7px 3px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;border:1.6px solid #fff8ed;background:linear-gradient(145deg,#f2e8ff,#c9bdea);color:#4b3966;border-radius:16px;box-shadow:0 4px 0 #5e5181,0 5px 10px #271f5361}
.journey-dock .route-extra .mode-btn:nth-child(2){background:linear-gradient(145deg,#f9d0e7,#eda6c9)}
.journey-dock .route-extra .mode-btn:nth-child(3){background:linear-gradient(145deg,#f4f7ba,#dff5ab)}
.journey-dock .route-extra .mode-btn span{font-size:19px;font-weight:900;line-height:1}.journey-dock .route-extra .mode-btn b{font-size:10px;font-weight:1000}
.journey-dock .scene-pick{margin:9px 0 0;color:#fff8e9dc;font-size:9px;justify-content:center;gap:8px}
.journey-dock .scene-pick select{color:#fff!important;font-size:10px!important;background:#ffffff51!important;border:1px solid #fff8!important;border-radius:10px!important;max-width:60%;width:auto;padding:5px 8px}
.journey-dock .scene-pick select option{color:#4e3d62}
.route-mystery{isolation:isolate}
.mystery-cloud{position:absolute;top:13px;left:5%;right:5%;text-align:center;font-size:24px;font-weight:1000;color:#d6c7fe;text-shadow:0 0 18px #e4dfff9e;pointer-events:none}
.mystery-gate{position:absolute;left:4%;top:22px;width:162px;height:165px;border:6px solid #baa5f1;border-radius:80px 80px 19px 19px;background:linear-gradient(110deg,#533e85,#2d265e 55%,#8770b4);box-shadow:0 12px 20px #21174970,inset 0 0 30px #cea9f375;transform:rotate(-7deg);display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
.side-right .mystery-gate{left:auto;right:4%;transform:rotate(7deg)}
.mystery-gate:before,.mystery-gate:after{content:"";position:absolute;bottom:8px;width:24px;height:8px;border-radius:5px;background:#d4b9ff;opacity:.5}
.mystery-gate:before{left:20px}.mystery-gate:after{right:20px}
.gate-glow{font-size:25px;color:#d5ff9b;text-shadow:0 0 17px #b0ff8b}.gate-lock{font-size:34px;filter:drop-shadow(0 0 9px #e8b6f5)}.gate-question{font-size:31px;font-weight:1000;color:#dbc8ff}
.route-mystery .route-node{background:linear-gradient(#8373af,#57457d);border-color:#c6b5e6;color:#e7dbfd}
.route-mystery .mystery-glass{background:linear-gradient(135deg,#f0e6ffec,#d4c0efee)}
.route-mystery .glass-mystery-foot{border-radius:12px;background:#524573;color:#f9f1ff;text-align:center;padding:8px 2px;font-size:10px;font-weight:1000}
.route-mystery .glass-title{font-size:18px}
.route-mystery .glass-mystery-foot{position:relative}
.mystery-shake{animation:mysteryShake .25s ease 2}
@keyframes mysteryShake{0%,100%{filter:brightness(1)}25%{transform:translateX(calc(-50% - 3px)) rotate(-3deg)}75%{transform:translateX(calc(-50% + 3px)) rotate(3deg)}}
@media(max-height:690px){.journey-header{padding-top:13px;padding-bottom:10px}.journey-header h2{font-size:26px}.journey-dock{padding:7px;margin-bottom:6px}.journey-dock .scene-pick{margin-top:5px}.journey-dock .route-extra .mode-btn{min-height:42px}.journey-scroll{mask-image:none;-webkit-mask-image:none}}
@media(max-width:345px){.glass-title{font-size:16px}.route-glass-detail{padding:10px 8px}.glass-numbers{font-size:9px}.glass-stars{font-size:9px}.route-glass-detail p{font-size:9px!important}.stage-vignette{width:158px}.route-node{width:70px;height:70px;top:calc(50% - 35px)}.journey-header h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){.route-node,.route-glass-detail,.stage-vignette{transition:none!important}.mystery-shake{animation:none}}
/* Painted miniature scenes use crops of the already-approved concept artwork;
   the original vector workers remain in every other level. */
.stage-vignette:has(.map-scene-art){left:-28px;top:-22px;width:206px;height:190px;}
.side-right .stage-vignette:has(.map-scene-art){left:auto;right:-28px}
.stage-vignette:has(.map-scene-art)::before{opacity:.35}
.map-scene-art{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 8px #31234f60);}
.stage-vignette:has(.map-scene-art) .stage-emoji{top:24px;right:6px}
.stage-vignette:has(.map-scene-art) .stage-mood{right:30px;bottom:-6px}
/* Keep workers' exhausted facial expressions visible above each node; the node
   must not cover the eyes/mouth or crop a worker off the phone's side. */
.stage-vignette:has(.map-scene-art){left:0;top:-40px;width:185px;height:180px}
.side-right .stage-vignette:has(.map-scene-art){right:0;left:auto}
.stage-vignette:has(.map-scene-art) .stage-mood{bottom:-17px;right:12px}