/* Metro Dash: bright, legible controls over an original 3D city. */
.metro-root{background:#82d8fa!important;font-family:Rubik,Arial,sans-serif}
.metro-hud{position:absolute;top:18px;left:20px;display:flex;gap:10px;z-index:1;pointer-events:none}
.metro-meter{display:flex;align-items:center;gap:10px;min-width:126px;padding:10px 16px 11px 11px;border:2px solid #fff9;border-radius:18px;background:#13334bcf;color:white;box-shadow:0 5px 0 #0e23354d,0 9px 20px #102d331a;backdrop-filter:blur(8px);font-variant-numeric:tabular-nums}
.metro-meter small{display:block;color:#d2eaf2;font-size:9px;font-weight:800;letter-spacing:1.5px;margin-bottom:3px}
.metro-meter b{font-size:26px;font-weight:900;line-height:1}.metro-meter b span{font-size:13px;font-weight:700;color:#c4e0e5}
.metro-meter-icon{color:#64ece2;font:bold 32px Arial}.metro-coin-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#ffcc3d;border:3px solid #fff19a;color:#a76717;font:bold 20px Arial;box-shadow:0 3px 0 #be7b1e}
.metro-meter.is-coins{min-width:100px}.metro-meter.is-coins b{color:#ffdc65}
.metro-progress{position:absolute;right:22px;top:23px;z-index:1;width:170px;padding:11px 14px;border-radius:15px;background:#123850bd;backdrop-filter:blur(8px);color:#fff;pointer-events:none;border:1px solid #ffffff88;box-shadow:0 5px 0 #0e23352d}
.metro-progress span{font-size:10px;font-weight:900;letter-spacing:1.5px}.metro-progress>div{height:5px;margin:8px 0 6px;border-radius:5px;background:#fff3;overflow:hidden}.metro-progress i{display:block;height:100%;border-radius:5px;background:#ffc845}.metro-progress small{font-size:8px;font-weight:800;letter-spacing:1px;color:#cce4eb}
.metro-buffs{position:absolute;top:101px;left:23px;z-index:1;color:white;font-size:11px;font-weight:900;letter-spacing:.6px;text-shadow:0 2px 3px #173d5c;pointer-events:none;line-height:1.8}
.metro-controls{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:22px;right:22px;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;z-index:2;pointer-events:none}
.metro-controls>div{display:flex;gap:9px}.metro-controls>div:last-child{justify-content:flex-end}
.metro-controls button{pointer-events:auto;width:67px;min-height:65px;border:2px solid #ffffff99;border-radius:19px;background:linear-gradient(160deg,#23506ada,#153a50eb);color:#fff;font:900 27px Arial;box-shadow:0 5px 0 #133149,0 8px 16px #102b4933;touch-action:none;user-select:none;backdrop-filter:blur(8px)}
.metro-controls button small{display:block;margin-top:2px;font:800 8px Arial;letter-spacing:1.5px}.metro-controls button[data-action=jump]{background:linear-gradient(150deg,#ffd44e,#ffb534);border-color:#fff4b0;color:#4e3518;box-shadow:0 5px 0 #b87b20,0 8px 16px #102b4933}
.metro-controls button[data-action=slide]{background:linear-gradient(150deg,#72e3e1,#30bebf);border-color:#ccffff;color:#16424a;box-shadow:0 5px 0 #208890,0 8px 16px #102b4933}
.metro-controls button[data-action=pause]{width:43px;min-height:43px;font-size:18px;border-radius:14px;box-shadow:0 3px 0 #133149;color:#ecf9ff}.metro-controls button:active{transform:translateY(4px);box-shadow:0 1px 0 #133149}.metro-controls button:disabled{opacity:.5}
.metro-root button:focus-visible{outline:3px solid white;outline-offset:4px}
.metro-panel{position:absolute;inset:0;display:grid;align-items:center;justify-items:center;padding:24px;background:linear-gradient(90deg,#062c3b25,#072d3700 50%,#072d3715);z-index:3}
.metro-panel[hidden],.metro-root [hidden]{display:none!important}
.metro-card{width:min(410px,100%);max-height:100%;overflow:auto;padding:26px 25px 19px;border:2px solid #ffffffcf;border-radius:29px;background:linear-gradient(155deg,#113b55ed,#14344bec);box-shadow:0 8px 0 #0b263c70,0 25px 65px #10334a55;text-align:center;color:#e6f8fc;backdrop-filter:blur(12px)}
.metro-kicker{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;font-weight:900;letter-spacing:3px;color:#b9eff5}.metro-kicker i{width:8px;height:8px;background:#64e7d2;border-radius:50%;box-shadow:0 0 10px #59f5d599}
.metro-card h2{display:flex;flex-direction:column;margin:14px 0 0;transform:rotate(-4deg);font:900 64px/.88 'Russo One',Arial,sans-serif;letter-spacing:-2px;text-shadow:0 4px 0 #062438,0 7px 0 #052033,3px 1px 0 #062438,-3px 1px 0 #062438}
.metro-card h2 span{color:white}.metro-card h2 strong{font:inherit;color:#ffd13d;letter-spacing:2px;font-size:83px;margin-top:5px}
.metro-subtitle{font-size:12px;color:#d1ebf0;margin:20px 0 17px}
.metro-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.metro-legend span{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 3px;border:1px solid #81c3d644;border-radius:13px;background:#092a4080}.metro-legend b{display:grid;place-items:center;width:30px;height:30px;border:1px solid #bbfaff99;border-radius:9px;color:#9ef4ef;font:900 23px Arial}.metro-legend em{font-size:9px;font-weight:900;letter-spacing:1px;font-style:normal;line-height:1.8;color:#fff}.metro-legend small{font-size:8px;font-weight:500;letter-spacing:0;color:#bedae5;white-space:nowrap}
.metro-card .metro-start{display:flex;align-items:center;justify-content:center;gap:24px;width:100%;min-height:58px;background:linear-gradient(180deg,#ffe164,#ffbd38);border:2px solid #fff19a;border-radius:15px;color:#253243;font:900 17px Rubik,Arial,sans-serif;letter-spacing:1px;box-shadow:0 5px 0 #c18421,0 9px 20px #081e3322;touch-action:manipulation}.metro-start span{font-size:17px}.metro-card .metro-start:active{transform:translateY(3px);box-shadow:0 2px 0 #c18421}
.metro-best{margin:19px 0 10px;font-size:9px;font-weight:800;letter-spacing:.5px;color:#a8cbd8}.metro-best b{color:white}.metro-best span{margin:0 8px}.metro-pickups{font-size:10px;color:#a8d5df;margin:0}
.metro-pause-card h2{font-size:45px;letter-spacing:-1px}.metro-pause-distance{font-size:52px;font-weight:900;color:#ffcf4d;margin:12px 0 25px}.metro-pause-distance small{display:block;font-size:9px;letter-spacing:3px;color:#c2e4ea}
.metro-tip{position:absolute;left:50%;bottom:101px;transform:translateX(-50%);max-width:90%;white-space:nowrap;padding:8px 15px;border-radius:20px;background:#113b51b8;color:white;font-size:10px;font-weight:700;text-align:center;z-index:1;pointer-events:none;backdrop-filter:blur(6px)}
.metro-callout{position:absolute;left:50%;top:23%;transform:translate(-50%,-10px) scale(.85) rotate(-4deg);opacity:0;transition:transform .18s,opacity .18s;z-index:2;pointer-events:none;color:#ffe06e;font:900 clamp(20px,4vw,35px) 'Russo One',Arial,sans-serif;text-shadow:0 3px 0 #14405d,2px 0 #14405d,-2px 0 #14405d;white-space:nowrap}.metro-callout.show{opacity:1;transform:translate(-50%,0) scale(1) rotate(-4deg)}
@media(min-width:900px){.metro-panel:not(.is-paused){justify-items:start;padding-left:8%}.metro-card{width:370px}.metro-controls{left:32px;right:32px}.metro-tip{bottom:101px}.metro-controls button{opacity:.85}.metro-controls button:hover{opacity:1}}
@media(max-width:560px){.metro-hud{top:13px;left:12px;gap:7px}.metro-meter{min-width:107px;padding:8px 12px 9px 9px;border-radius:15px;gap:7px}.metro-meter b{font-size:23px}.metro-meter.is-coins{min-width:82px}.metro-meter small{font-size:8px}.metro-progress{right:12px;top:15px;width:122px;padding:10px}.metro-progress span{font-size:8px;letter-spacing:.8px}.metro-progress small{font-size:7px;letter-spacing:.6px}.metro-buffs{top:90px;left:15px}.metro-controls{bottom:16px;left:13px;right:13px;gap:6px}.metro-controls>div{gap:6px}.metro-controls button{width:57px;min-height:60px;border-radius:16px}.metro-card{padding:24px 20px 19px}.metro-panel{padding:18px}.metro-tip{bottom:94px;font-size:8px;padding:7px 10px}.metro-callout{top:25%}}
@media(max-width:380px){.metro-progress{width:100px;right:8px}.metro-progress span{font-size:7px}.metro-hud{left:8px}.metro-meter{min-width:99px;padding:8px}.metro-meter.is-coins{min-width:74px}.metro-meter-icon{font-size:25px}.metro-coin-icon{width:26px;height:26px;font-size:15px}.metro-controls button{width:49px}.metro-controls>div{gap:5px}.metro-card h2{font-size:56px}.metro-card h2 strong{font-size:73px}}
@media(max-height:510px){.metro-panel{padding:12px}.metro-card{padding:14px 20px 12px;width:390px}.metro-card h2{flex-direction:row;justify-content:center;gap:12px;font-size:40px;margin-top:9px}.metro-card h2 strong{font-size:40px;margin-top:0;letter-spacing:-1px}.metro-subtitle{margin:13px 0 9px;font-size:11px}.metro-legend{margin:10px 0;gap:6px}.metro-legend span{padding:6px;gap:4px}.metro-legend b{width:26px;height:26px;font-size:20px}.metro-card .metro-start{min-height:44px;font-size:14px}.metro-best{margin:12px 0 7px}.metro-controls button{width:56px;min-height:48px;font-size:21px}.metro-controls{bottom:12px}.metro-tip{bottom:75px}.metro-buffs{top:86px}.metro-pause-distance{font-size:36px;margin:9px 0 15px}.metro-pause-card h2{font-size:35px}.metro-hud{top:12px}.metro-progress{top:15px}.metro-callout{top:30%}}
@media(prefers-reduced-motion:reduce){.metro-callout{transition:none}}
@media(max-height:510px){.metro-tip{display:none}}

/* An open city start screen and a clear, single-step lane indicator. */
.metro-panel:not(.is-paused){display:block;padding:0;background:linear-gradient(90deg,#10354e70,#10354e00 76%)}
.metro-intro-brand{position:absolute;left:7%;top:8%;color:#fff4d3;pointer-events:none}
.metro-intro-brand .metro-kicker{justify-content:flex-start;font-size:9px;color:#e3f4d6;letter-spacing:2.5px;text-shadow:0 2px 8px #14454a}
.metro-intro-brand h2{display:flex;flex-direction:column;margin:20px 0 0;transform:rotate(-4deg);font:400 clamp(65px,7vw,100px)/.92 'Russo One',Impact,sans-serif;letter-spacing:-3px;text-shadow:0 5px 0 #143d50,0 10px 0 #0e3042,0 17px 30px #10384566}
.metro-intro-brand h2 span{color:#fff4d5}.metro-intro-brand h2 strong{font:inherit;font-size:1.22em;color:#ffdb62;margin-top:4px;letter-spacing:0}
.metro-intro-brand p{font:600 12px Rubik,Arial,sans-serif;margin:23px 0 0;color:#ebf5e6;text-shadow:0 2px 5px #163d43}
.metro-route-tags{display:flex;gap:16px;margin-top:20px}.metro-route-tags span{font:800 8px Rubik,Arial,sans-serif;letter-spacing:1px;border-left:2px solid #f6d366;padding-left:8px;color:#e0f0ec;text-shadow:0 1px 4px #153747}
.metro-launch-dock{position:absolute;bottom:26px;left:7%;width:min(395px,86%);border:1px solid #e9f3cf7a;border-radius:18px;padding:20px;background:linear-gradient(120deg,#12384ff5,#124c5ee8);box-shadow:0 8px 30px #102e4e5c,inset 0 1px 0 #fff2;backdrop-filter:blur(10px)}
.metro-launch-copy{display:grid;gap:7px;color:#e0f1ea;font-family:Rubik,Arial,sans-serif;margin-bottom:16px}.metro-launch-copy b{font-size:11px;font-weight:900;letter-spacing:2px;color:#ffdf8a}.metro-launch-copy span{font-size:10px;font-weight:500;color:#c6dedf}
.metro-launch-dock .metro-start{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:58px;padding:0 20px;background:linear-gradient(110deg,#ffe5a2,#ffcb47);border:1px solid #fff3ae;border-radius:12px;color:#29414b;font:900 15px Rubik,Arial,sans-serif;letter-spacing:1px;box-shadow:0 5px 0 #af8439,0 10px 20px #03182233;touch-action:manipulation}
.metro-launch-dock .metro-start span{font-size:25px;font-weight:500}.metro-launch-dock .metro-start:active{transform:translateY(2px);box-shadow:0 3px 0 #af8439}
.metro-launch-meta{display:flex;justify-content:space-between;gap:15px;margin-top:18px;font:700 9px Rubik,Arial,sans-serif;color:#b4d1d7;letter-spacing:.5px}.metro-launch-meta b{color:#fff0c6}
.metro-lanes{position:absolute;left:50%;bottom:80px;transform:translateX(-50%);z-index:1;display:flex;gap:5px;padding:5px 7px;border-radius:10px;border:1px solid #d3eeed4d;background:#143547a6;pointer-events:none;backdrop-filter:blur(5px)}
.metro-lanes span{display:grid;place-items:center;width:29px;height:17px;border-radius:4px;background:#a9d4dd24;color:#afd0d6;font:800 8px Rubik,Arial,sans-serif}.metro-lanes span.on{color:#25494c;background:#e1f6c0;box-shadow:0 0 12px #d9ffa245}.metro-lanes[hidden]{display:none}
.metro-tip{bottom:117px;background:#153c4b99;color:#e7f4ec;font-size:9px}
@media(max-width:560px){.metro-intro-brand{left:23px;top:27px}.metro-intro-brand h2{font-size:64px;letter-spacing:-2px;margin-top:16px}.metro-intro-brand p{font-size:10px;max-width:240px;line-height:1.6}.metro-route-tags{gap:12px;margin-top:16px}.metro-route-tags span{font-size:7px}.metro-launch-dock{left:18px;bottom:20px;width:calc(100% - 36px);padding:16px}.metro-launch-copy{margin-bottom:14px}.metro-launch-dock .metro-start{min-height:54px}.metro-launch-meta{font-size:8px;margin-top:15px}.metro-lanes{bottom:82px}.metro-tip{bottom:119px;font-size:8px}}
@media(max-height:510px){.metro-intro-brand{top:22px;left:30px}.metro-intro-brand h2{flex-direction:row;gap:13px;font-size:43px;margin-top:12px;letter-spacing:-1px}.metro-intro-brand h2 strong{font-size:43px;margin-top:0}.metro-intro-brand p,.metro-route-tags{display:none}.metro-launch-dock{left:30px;bottom:17px;width:min(600px,calc(100% - 60px));padding:12px 15px;display:grid;grid-template-columns:1fr 180px;gap:8px 18px;align-items:center}.metro-launch-copy{margin:0;gap:6px}.metro-launch-copy b{font-size:9px}.metro-launch-copy span{font-size:9px}.metro-launch-dock .metro-start{min-height:46px;font-size:12px;padding:0 15px}.metro-launch-meta{grid-column:1 / -1;margin-top:5px;font-size:8px}.metro-lanes{bottom:62px}.metro-lanes span{height:14px;width:23px}}
@media(max-width:380px){.metro-meter{min-width:0;gap:6px}.metro-meter b{font-size:20px}.metro-meter.is-coins{min-width:0}.metro-progress{top:84px;right:8px;width:112px}.metro-buffs{top:86px;max-width:calc(100% - 142px);font-size:10px}.metro-intro-brand h2{font-size:56px}.metro-intro-brand p{font-size:9px}.metro-route-tags{gap:8px}.metro-route-tags span{font-size:6px}}

/* Courier missions and original earned outfits. */
.metro-career-tools{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:14px}.metro-career-tools button{padding:9px 6px;min-height:43px;text-align:left;border:1px solid #91c7d655;border-radius:9px;background:#15354ba6;color:#c9eef0;font:800 8px Rubik,Arial,sans-serif;letter-spacing:.5px;touch-action:manipulation}.metro-career-tools b{display:block;font-size:8px;letter-spacing:0;font-weight:600;margin-top:5px;color:#ffe5a3}.metro-career-tools button:disabled{opacity:.52}.metro-ghost-hud{position:absolute;left:22px;top:128px;z-index:1;color:#c6fcf7;font:800 9px Rubik,Arial,sans-serif;letter-spacing:.5px;padding:7px 10px;border-radius:10px;background:#12384cba;pointer-events:none;backdrop-filter:blur(6px)}
.metro-mission-panel{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:22px;background:#0e2c45b8;backdrop-filter:blur(10px)}.metro-career-card{position:relative;width:min(600px,100%);max-height:100%;overflow:auto;padding:25px;border-radius:22px;border:1px solid #c7ebed99;background:linear-gradient(145deg,#214c63,#112f45);color:#eef9f1;box-shadow:0 15px 45px #071b4766}.metro-career-card h3{margin:16px 0 8px;font:900 25px Rubik,Arial,sans-serif;letter-spacing:1px;color:#ffdc8d}.metro-career-card>p{font-size:11px;line-height:1.7;color:#c1dfe5;margin:0 0 16px}.metro-career-card>small{font-size:9px;color:#a5c6d0;display:block;margin-top:16px}.metro-career-close{position:absolute;right:12px;top:12px;min-width:36px;min-height:36px;border-radius:10px;border:1px solid #fff6;background:#153c53;color:#fff;font-size:23px}.metro-career-list{display:grid;gap:10px}.metro-career-list section{padding:14px;border:1px solid #95ccdc44;border-radius:14px;background:#0b2a3f7a}.metro-career-list section.is-complete{border-color:#92e0b2}.metro-career-list section>b{font-size:13px}.metro-career-list section>small{display:block;margin:5px 0 11px;font-size:8px;letter-spacing:.6px;color:#8ad8d3}.metro-career-list section>div{display:flex;justify-content:space-between;gap:15px;margin-top:8px;font-size:10px;color:#c6e0e8}.metro-career-list em{font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap;color:#ffdb8b}.metro-career-list>button{display:grid;grid-template-columns:28px 1fr;gap:4px 12px;align-items:center;padding:13px;border:1px solid #a2d5de66;border-radius:13px;background:#173e53;color:#e4f4f1;text-align:left}.metro-career-list>button i{grid-row:1/3;width:24px;height:30px;border-radius:6px 6px 9px 9px;box-shadow:inset 0 -5px 0 #0003}.metro-career-list>button small{font-size:8px;color:#ffd592}.metro-career-list>button:disabled{opacity:.55}
@media(max-width:560px){.metro-launch-dock{bottom:16px}.metro-career-tools{margin-top:12px;gap:5px}.metro-ghost-hud{left:14px;top:113px;font-size:8px}.metro-career-card{padding:22px 16px}.metro-career-card .metro-kicker{font-size:8px;justify-content:flex-start;letter-spacing:1.5px}}
@media(max-width:380px){.metro-ghost-hud{top:146px;left:10px;font-size:7px}.metro-career-tools button{font-size:7px}.metro-career-tools b{font-size:7px}}
@media(max-height:510px){.metro-launch-dock{padding:10px 13px;grid-template-columns:1fr 175px;gap:7px 15px}.metro-launch-meta{display:none}.metro-career-tools{grid-column:1/-1;margin:1px 0 0;grid-template-columns:1fr 1fr 1fr}.metro-career-tools button{min-height:35px;padding:6px 8px}.metro-career-tools b{margin-top:3px}.metro-ghost-hud{top:91px;left:23px}.metro-mission-panel{padding:12px}}