/* Translucent navigation stays readable without covering the road. */
#delivery-navigation,#repair-navigation,.race-navigation{opacity:.68;pointer-events:none;text-align:center;overflow:visible}
.navigation-distance{display:block;white-space:nowrap;margin-top:4px;font:700 14px/1.3 system-ui,sans-serif;color:#effff9;text-shadow:0 2px 4px #081b31;letter-spacing:.3px}
#race-button{position:fixed;top:240px;left:20px;z-index:5;width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid #9cf9e480;background:#192d49de;color:#78f2d2;box-shadow:0 5px 18px #111c3338;cursor:pointer}
#race-button svg{width:22px;height:22px}#race-button.is-racing{border-color:#ffd680;box-shadow:0 0 0 4px #ffdb7620}#race-button:focus-visible{outline:3px solid #f8d980;outline-offset:3px}
.race-navigation{position:fixed;top:25%;left:50%;width:52px;height:62px;transform:translate(-50%,-50%);z-index:6;filter:drop-shadow(0 2px 3px #16272066)}.race-navigation svg{width:52px;height:62px}.race-time{display:block;font:700 21px/1.4 ui-monospace,monospace;color:#ffedb6;white-space:nowrap;width:140px;margin-left:-44px;text-shadow:0 2px 4px #162137}.race-progress{font:700 12px system-ui;color:#b9fff0;white-space:nowrap}
.race-modal{width:min(590px,calc(100vw - 28px));max-height:90dvh;box-sizing:border-box;padding:0!important;overflow:auto;color:#f0f5ff;background:#14233bef!important;border:1px solid #78e9d679!important;border-radius:24px!important;box-shadow:0 24px 100px #03152988;backdrop-filter:none}.race-modal::backdrop{background:#09243755;backdrop-filter:none}.race-modal .modal-close{z-index:2;color:#ecfbff;background:#17244080;top:14px;right:15px}.race-heading{padding:29px 30px 21px;background:radial-gradient(ellipse at 110% 0,#f5589566,transparent 65%),linear-gradient(125deg,#223753,#38305b)}.race-heading>span{font:700 10px system-ui;letter-spacing:2px;color:#7bf3d7}.race-heading h2{font:800 italic 40px/1.05 system-ui!important;letter-spacing:-1.6px;margin:10px 0!important;color:#fff!important}.race-heading p{font:12px/1.5 system-ui;margin:8px 0 14px;color:#c9d7e9}.race-week-clock{color:#ffe19b;font:600 12px ui-monospace,monospace;letter-spacing:.2px}.race-tabs{display:flex;padding:14px 19px 6px;gap:7px}.race-tabs button{flex:1;border:1px solid transparent;border-radius:9px;background:transparent;color:#aebfd5;padding:10px 6px;font:600 11px system-ui;cursor:pointer}.race-tabs button.selected{background:#63e9c91a;border-color:#6ef3d455;color:#94fbe0}.race-content{padding:9px 23px 13px;min-height:140px}.race-row{display:grid;grid-template-columns:25px 43px minmax(0,1fr) 96px;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid #d4e6ff12;min-height:43px}.race-row>b{font:700 12px system-ui;color:#8faac6;text-align:center}.race-row:first-child>b{color:#ffdc7d}.race-row canvas{width:42px;height:42px;border-radius:50%;background:linear-gradient(140deg,#51678177,#86bea032)}.race-row>span{font:600 13px system-ui;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.race-row>time{font:600 14px ui-monospace,monospace;color:#8df5d9;text-align:right}.race-empty{font:13px/1.7 system-ui;color:#b2c6dc;padding:32px 8px;text-align:center}.race-pager{display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 0 0}.race-pager span{font:11px ui-monospace,monospace;color:#a7c1d9}.race-pager button,#race-leaderboard button{color:#d4f5ec;background:#9bbcf014;border:1px solid #cceeff24;border-radius:7px;cursor:pointer}.race-pager button{width:38px;height:30px}.race-pager button:disabled,#race-leaderboard button:disabled{opacity:.28;cursor:default}.race-footer{padding:15px 24px 22px;border-top:1px solid #a5c7e522;display:flex;flex-wrap:wrap;gap:9px}.race-start{flex:1;background:linear-gradient(105deg,#79efd0,#8ce6ef);color:#122a3c;border:0;border-radius:12px;padding:13px 20px;font:800 14px system-ui;cursor:pointer}.race-cancel{border:1px solid #e8a6bd55;background:#ea759514;color:#ffd3df;border-radius:12px;padding:10px;cursor:pointer;font-size:11px}.race-footer>small{width:100%;font:10px/1.6 system-ui;color:#a5bad1}.race-error{padding:9px 24px;margin:0;color:#ffc497;font:12px system-ui}.race-prize-intro{font:12px/1.7 system-ui;color:#c0cfe0}.race-prize-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.race-prize-grid>div{display:flex;justify-content:space-between;padding:13px;border:1px solid #bbdce421;border-radius:10px;background:#557c9d17;font:12px system-ui}.race-prize-grid span{color:#9aafc8}.race-prize-grid b{color:#ffe395}
#race-leaderboard{position:fixed;right:20px;top:122px;width:222px;padding:10px 12px;box-sizing:border-box;z-index:5;border:1px solid #a8e5d233;border-radius:15px;background:linear-gradient(150deg,#172c43b8,#20223ab0);backdrop-filter:none;color:#edf7ff;box-shadow:0 8px 24px #0d1b3022}#race-leaderboard .race-mini-heading{display:flex;justify-content:space-between;align-items:center;padding-bottom:6px}#race-leaderboard .race-mini-heading strong{font:700 9px system-ui;letter-spacing:1.4px;color:#ffe3a4}#race-leaderboard .race-mini-heading button{width:25px;height:24px}#race-leaderboard ol{list-style:none;margin:0;padding:0;max-height:39vh;overflow:auto}#race-leaderboard .race-row{grid-template-columns:15px 24px minmax(0,1fr) 61px;gap:4px;min-height:26px;padding:2px 0}#race-leaderboard .race-row canvas{width:24px;height:24px}#race-leaderboard .race-row>span{font-size:10px}#race-leaderboard .race-row>b{font-size:9px}#race-leaderboard .race-row>time{font-size:10px}#race-leaderboard .race-mini-pager{display:flex;justify-content:center;align-items:center;gap:17px;padding-top:8px;font:10px system-ui;color:#bcd5df}#race-leaderboard .race-mini-pager button{width:27px;height:25px;font-size:18px}.race-empty{margin:0}
body.creator-open #race-button,body.creator-open #race-leaderboard,body.creator-open .race-navigation,body.creator-open #race-board-action,body.in-clothing-store #race-button,body.in-clothing-store #race-leaderboard,body.in-clothing-store .race-navigation,body.in-clothing-store #race-board-action{display:none!important}
@media(max-width:650px){#race-button{left:14px;top:236px;width:38px;height:38px}#race-button svg{width:20px;height:20px}#race-leaderboard{right:12px;top:109px;width:173px;padding:8px}#race-leaderboard .race-row{grid-template-columns:12px 21px minmax(0,1fr) 56px;gap:3px}#race-leaderboard .race-row canvas{width:21px;height:21px}#race-leaderboard .race-row>span{font-size:9px}#race-leaderboard .race-row>time{font-size:9px}.race-heading{padding:25px 22px 17px}.race-heading h2{font-size:35px!important}.race-content{padding-inline:16px}.race-row{gap:7px;grid-template-columns:22px 36px minmax(0,1fr) 85px;min-height:38px}.race-row canvas{width:35px;height:35px}.race-row>span{font-size:12px}.race-row>time{font-size:12px}.race-footer{padding:12px 17px 17px}.race-tabs{padding-inline:12px}.race-tabs button{font-size:10px}.race-navigation{top:24%;width:44px;height:54px}.race-navigation svg{width:44px;height:54px}.race-time{margin-left:-48px;font-size:18px}.navigation-distance{font-size:12px}}
@media(max-height:500px){#race-button{top:216px}#race-leaderboard{top:74px}#race-leaderboard ol{max-height:31vh}}

@media(max-width:650px){.race-navigation{left:30%}}

/* Keep controls visible while only the standings scroll on small screens. */
.race-modal[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 24px);overflow:hidden}
.race-heading{padding:16px 20px 12px;flex-shrink:0}.race-heading>span{display:none}.race-heading h2{font-size:26px!important;margin:0 38px 6px 0!important;letter-spacing:-.7px}.race-week-clock{font-size:11px}
.race-tabs{padding:8px 12px 3px;flex-shrink:0}.race-tabs button{padding:9px 4px}.race-content{overflow:auto;min-height:0;padding:4px 14px 8px;flex:1 1 auto}.race-footer{padding:10px 14px;gap:5px;flex-shrink:0}.race-footer>small{margin:2px 0 0;font-size:10px}.race-start{padding:10px 12px}.race-row{grid-template-columns:20px 32px minmax(0,1fr) 80px;gap:7px;min-height:40px;padding:3px 0}.race-row canvas{width:30px;height:30px}.race-row>.race-identity{min-width:0;white-space:normal}.race-identity strong,.race-identity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.race-identity strong{font-size:12px;line-height:16px}.race-identity small{font:10px/14px system-ui;color:#b9cde0;margin:0}.race-row>time{font-size:12px}.race-pager{padding-top:6px}.race-prize-intro{margin:4px 0 10px}.race-prize-grid>div{padding:10px}
#race-leaderboard .race-row{grid-template-columns:13px 23px minmax(0,1fr) 61px;min-height:35px;gap:4px}#race-leaderboard .race-identity strong{font-size:10px;line-height:14px}#race-leaderboard .race-identity small{font-size:9px;line-height:12px}#race-leaderboard ol{max-height:32dvh}
@media(max-width:650px){.race-modal{width:calc(100vw - 16px);border-radius:16px!important}.race-heading{padding:12px 14px 9px}.race-heading h2{font-size:23px!important}.race-content{padding-inline:10px}.race-row{grid-template-columns:18px 28px minmax(0,1fr) 72px;gap:5px}.race-row canvas{width:27px;height:27px}.race-row>time{font-size:11px}.race-identity strong{font-size:11px}#race-leaderboard{width:190px;right:8px;padding:7px}#race-leaderboard .race-row{grid-template-columns:11px 20px minmax(0,1fr) 53px;gap:3px}#race-leaderboard .race-row canvas{width:20px;height:20px}#race-leaderboard .race-identity strong{font-size:10px}#race-leaderboard .race-row>time{font-size:9px}.race-navigation{left:25%}}

/* Compact, translucent shared race / work navigation. */
.race-navigation,#delivery-navigation,#repair-navigation{top:18%;left:50%;width:36px!important;height:43px!important;opacity:.48;filter:drop-shadow(0 2px 2px #0b273744)}
.race-navigation svg,#delivery-navigation svg,#repair-navigation svg{width:36px!important;height:43px!important;display:block}
.race-navigation .navigation-distance,#delivery-navigation .navigation-distance,#repair-navigation .navigation-distance{font-size:7px!important;line-height:1.3;margin:3px -25px 0;}
.race-navigation .race-time{font-size:10px!important;line-height:1.3;width:90px;margin:3px 0 0 -27px}
.race-navigation .race-progress{font-size:7px;line-height:1.3;margin:2px -15px 0}
#delivery-navigation .work-countdown,#repair-navigation .work-countdown{font-size:9px!important;line-height:1.3;min-width:0;width:76px;margin:3px 0 0 -20px!important}
@media(max-width:650px){.race-navigation,#delivery-navigation,#repair-navigation{top:17%;left:43%;width:32px!important;height:39px!important}.race-navigation svg,#delivery-navigation svg,#repair-navigation svg{width:32px!important;height:39px!important}.race-time{margin-left:-29px!important}}

/* Routes sit beside the road view, clear of the vertical action buttons. */
.race-navigation,#delivery-navigation,#repair-navigation{left:112px;top:24%;opacity:.64}
.race-navigation .navigation-distance,#delivery-navigation .navigation-distance,#repair-navigation .navigation-distance{font-size:10px!important}
.race-navigation .race-time,#delivery-navigation .work-countdown,#repair-navigation .work-countdown{font-size:12px!important;display:block!important}
@media(max-width:650px){.race-navigation,#delivery-navigation,#repair-navigation{left:91px;top:24%}}
@media(max-height:500px){.race-navigation,#delivery-navigation,#repair-navigation{top:29%;left:105px}}

@media(min-width:900px) and (min-height:550px){
 .race-navigation,#delivery-navigation,#repair-navigation{left:clamp(135px,10vw,205px);width:clamp(50px,4vw,70px)!important;height:clamp(60px,4.8vw,84px)!important}
 .race-navigation svg,#delivery-navigation svg,#repair-navigation svg{width:100%!important;height:100%!important}
 .race-navigation .navigation-distance,#delivery-navigation .navigation-distance,#repair-navigation .navigation-distance{font-size:clamp(14px,1.1vw,18px)!important;margin:7px -36px 0}
 .race-navigation .race-time,#delivery-navigation .work-countdown,#repair-navigation .work-countdown{font-size:clamp(16px,1.35vw,22px)!important;width:140px;position:relative;left:50%;margin:5px 0 0 -70px!important}
 .race-navigation .race-progress{display:block;font-size:12px;margin:4px -30px 0}
}