@font-face{font-family:Race;src:url('vendor/russo-one.ttf') format('truetype');font-display:swap}
:root{font-family:'Avenir Next','Trebuchet MS',sans-serif;color:#182c32;background:#f5f1e7;--ink:#182c32;--muted:#546766;--red:#bb402d;--cream:#f5f1e7;--lime:#e5efb2}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible{outline:3px solid #bb402d;outline-offset:5px}::selection{background:#d4e396;color:#182c32}[hidden]{display:none!important}header{max-width:1440px;margin:auto;padding:23px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d7dace}.home,.other{font-size:13px;text-decoration:none;min-height:40px;display:flex;align-items:center}.home:hover,.other:hover{text-decoration:underline}.wordmark{font-family:Race,sans-serif;font-size:24px;text-decoration:none;text-align:center}.wordmark span{display:block;font:10px 'Avenir Next',sans-serif;text-transform:uppercase;letter-spacing:2px;margin-top:4px}main{max-width:1440px;margin:auto;padding:0 40px}.lobby{display:grid;grid-template-columns:1.02fr 1fr;align-items:center;min-height:540px;gap:20px}.welcome{padding:50px 0 30px}h1{font-family:Race,sans-serif;font-weight:400;font-size:clamp(34px,4.1vw,60px);line-height:1.12;letter-spacing:-.025em;margin:0 0 24px;text-wrap:balance}.welcome p{font-size:17px;line-height:1.7;color:var(--muted);margin:0 0 28px}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;background:var(--red);color:white;min-height:56px;padding:16px 26px;font-size:18px;font-weight:700;border-radius:10px;transition:background .18s,transform .18s}.primary:hover{background:#982f20;transform:translateY(-2px)}.primary:disabled{background:#778581;cursor:wait;transform:none}.primary svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}.load-status{display:block;color:var(--muted);font-size:12px;margin-top:12px;min-height:18px}.hero-art{position:relative;isolation:isolate;align-self:stretch;display:flex;align-items:center;justify-content:center}.sun-disc{position:absolute;background:#e7cf91;width:85%;aspect-ratio:1;border-radius:50%;z-index:-1}.hero-art img{width:100%;max-height:510px;object-fit:contain;filter:drop-shadow(0 20px 12px #26342b1a)}.ready-note{position:absolute;bottom:16px;right:15px;font-size:13px;font-weight:700;transform:rotate(-5deg);background:var(--lime);padding:9px 15px;border-radius:6px}.route-picker{padding:10px 0 35px}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin:0 0 18px}.section-heading h2{font-size:20px;margin:0}.section-heading p{font-size:13px;color:var(--muted);margin:0}.routes{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #c8d0c3;border-bottom:1px solid #c8d0c3}.route{position:relative;background:transparent;text-align:left;padding:20px 16px 18px;border-right:1px solid #c8d0c3;min-width:0;color:var(--ink);transition:background .15s}.route:first-child{border-left:1px solid #c8d0c3}.route:hover{background:#e8e9d9}.route.selected{background:#e5efb2}.route-number{font-family:Race,sans-serif;font-size:13px;color:var(--muted)}.route b{display:block;font-size:16px;margin:11px 0 5px}.route small{display:block;font-size:12px;line-height:1.5;color:var(--muted)}.route svg{width:100%;height:34px;margin-top:12px;fill:none;stroke:var(--ink);stroke-width:2}.route .record{font-size:11px;min-height:17px;margin-top:9px;color:#354f39}.ride-top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 0 18px}.ride-top h2{font-family:Race,sans-serif;font-weight:400;margin:4px 0 0;font-size:25px}.ride-top>div>span{font-size:11px;color:var(--muted)}.ride-metrics{display:flex;gap:8px;align-items:center}.ride-metrics output{font:24px Race,sans-serif;font-variant-numeric:tabular-nums;margin-right:20px;min-width:112px}.ride-metrics button,.quiet{background:transparent;border:1px solid #b7c4b8;color:var(--ink);border-radius:7px;min-height:42px;padding:9px 15px}.ride-metrics button:hover,.quiet:hover{background:#e3e7d7}.stage{position:relative;background:#ccdfd2;overflow:hidden;border-radius:12px}canvas{width:100%;height:min(61vh,650px);min-height:330px;display:block;touch-action:none}.progress{position:absolute;top:0;left:0;right:0;height:5px;background:#ffffff50}#progressFill{height:100%;width:0;background:var(--red)}.stage-label{position:absolute;top:19px;left:20px;right:20px;display:flex;justify-content:space-between;color:#29433e;font-size:11px;font-weight:700;pointer-events:none}.message{position:absolute;inset:0;display:grid;place-items:center;background:#142c328f;padding:20px}.message>div{background:var(--cream);padding:35px 40px;max-width:450px;width:100%;border-radius:14px;text-align:center;box-shadow:0 20px 60px #152d3240}.message h2{font:32px Race,sans-serif;margin:0 0 15px}.message p{color:var(--muted);line-height:1.6;margin:0 0 22px}.message .primary{justify-content:center;width:100%}.message .quiet{margin-top:12px;width:100%}.touch-controls{display:flex;justify-content:space-between;padding:14px 0;gap:16px}.touch-controls>div{display:flex;gap:10px}.touch-controls button{min-width:84px;min-height:58px;background:#e2e6d9;border:1px solid #b8c4b3;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--ink);touch-action:none;user-select:none;-webkit-user-select:none}.touch-controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}.touch-controls .gas{background:var(--red);color:#fff;min-width:130px;border-color:var(--red);font-size:18px;font-weight:700}.touch-controls .brake{min-width:100px}.touch-controls button.pressed{background:#c2d57b;color:#182c32;transform:translateY(2px)}.keyboard-help{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);padding:0 0 25px}kbd{display:inline-block;border:1px solid #c4cbbd;border-radius:4px;padding:2px 5px;font:11px inherit;color:var(--ink)}footer{max-width:1440px;margin:0 auto;padding:20px 40px;display:flex;justify-content:space-between;gap:15px;border-top:1px solid #d7dace;font-size:11px;color:var(--muted)}
@media(max-width:800px){header{padding:14px 20px}main{padding:0 20px}.lobby{min-height:auto;gap:0}.welcome{padding:35px 0}h1{font-size:34px}.welcome p{font-size:14px}.hero-art img{max-height:390px}.routes{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;scrollbar-color:#839c82 #e8eadf}.route-picker{padding-top:5px}.ride-top h2{font-size:20px}.ride-metrics output{font-size:19px;margin-right:5px;min-width:85px}.ride-metrics button{font-size:12px;padding:8px}.keyboard-help>span:last-child{display:none}footer{padding:20px}.section-heading{align-items:flex-start;flex-direction:column;gap:7px}}
@media(max-width:560px){header{padding:12px 16px}.wordmark{font-size:21px}.wordmark span{font-size:8px}.home,.other{font-size:11px}main{padding:0 14px}.lobby{display:flex;flex-direction:column;position:relative}.welcome{align-self:stretch;padding:29px 4px 0;z-index:1}h1{font-size:33px;max-width:340px;margin-bottom:15px}.welcome p{max-width:300px;margin-bottom:18px;font-size:13px;line-height:1.55}.desktop{display:none}.primary{min-height:49px;font-size:16px;padding:13px 22px}.hero-art{height:310px;align-self:stretch;margin-top:-8px}.hero-art img{height:310px;width:auto;max-width:100%}.sun-disc{width:260px}.ready-note{bottom:5px;right:9px;font-size:11px}.load-status{font-size:10px;margin-top:8px}.route-picker{padding-top:20px}.section-heading h2{font-size:18px}.section-heading p{font-size:12px}.routes{grid-template-columns:repeat(5,155px)}.route{padding:15px}.ride-top{flex-wrap:wrap;padding:18px 0 12px}.ride-top>div:first-child{display:flex;align-items:baseline;gap:9px}.ride-top h2{font-size:18px;margin:0}.ride-top>div>span{font-size:10px}.ride-metrics{width:100%;justify-content:space-between}.ride-metrics output{font-size:21px}canvas{height:49vh;min-height:310px}.stage{border-radius:8px}.touch-controls{gap:7px;padding:12px 0}.touch-controls>div{gap:6px}.touch-controls button{min-width:52px;min-height:64px;flex-direction:column;gap:4px;font-size:10px}.touch-controls .gas{min-width:80px;font-size:18px}.touch-controls .brake{min-width:66px;font-size:12px}.keyboard-help{font-size:10px;line-height:1.7}.message>div{padding:26px 20px}.message h2{font-size:26px}footer{padding:17px 18px;flex-direction:column;gap:6px}}
@media(max-height:550px) and (orientation:landscape){body.riding header,body.riding footer,body.riding .keyboard-help{display:none}body.riding main{padding:0 12px}.ride-top{padding:5px 0}.ride-top h2{font-size:17px}.ride-top>div:first-child>span{display:none}.ride-metrics button{min-height:32px;padding:5px 10px}.ride-metrics output{font-size:18px}canvas{height:calc(100dvh - 135px);min-height:180px}.touch-controls{padding:6px 0}.touch-controls button{min-height:56px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
canvas:focus-visible{outline:2px solid #647f43;outline-offset:-2px}
.difficulty{display:flex;gap:8px;margin:0 0 16px}.difficulty button{flex:1;min-height:50px;padding:12px 18px;background:#e6e9db;color:var(--ink);border-radius:8px;font-weight:700;text-align:left}.difficulty button span{float:right;font-size:12px;opacity:.8;font-weight:400;margin-left:12px}.difficulty button:hover{background:#d9e1c6}.difficulty button[aria-pressed=true]{background:#284b3b;color:#fff9e9}.garage{padding:8px 0 34px}.garage .section-heading{align-items:center}.garage .section-heading p{margin-top:9px;line-height:1.5}.juice-wallet{display:flex;align-items:center;gap:10px;white-space:nowrap}.juice-wallet img{width:35px;height:47px}.juice-wallet strong{font:28px Race,sans-serif}.juice-wallet span{font-size:12px;color:var(--muted)}.upgrade-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;border-top:1px solid #c8d0c3;padding:17px 0}.upgrade-row:last-child{border-bottom:1px solid #c8d0c3}.upgrade-row h3{font-size:17px;margin:0 0 5px}.upgrade-row h3 span{font-size:12px;font-weight:400;color:var(--muted);margin-left:12px}.upgrade-row p{font-size:13px;color:var(--muted);margin:0;line-height:1.45}.upgrade-row button{background:#284b3b;color:#fff9e9;border-radius:8px;padding:13px 20px;min-width:192px;min-height:46px}.upgrade-row button:hover{background:#38684e}.upgrade-row button:disabled{background:#e1e5d6;color:#687664;cursor:not-allowed}.garage>p{font-size:12px;color:var(--muted);line-height:1.6;min-height:20px}.ride-juice{display:grid;grid-template-columns:25px auto;column-gap:6px;align-items:center;margin-right:12px}.ride-juice img{width:25px;height:34px;grid-row:1/3}.ride-juice b{font-size:14px}.ride-juice small{font-size:10px;white-space:nowrap;color:var(--muted)}.juice-notice{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:#284b3b;color:#fff9e9;padding:8px 14px;border-radius:6px;font-size:13px;white-space:nowrap;pointer-events:none}
@media(max-width:560px){.difficulty{gap:5px}.difficulty button{padding:10px 8px;font-size:13px;min-height:60px}.difficulty button span{display:block;float:none;margin:6px 0 0;font-size:10px}.garage .section-heading{align-items:flex-start}.garage h2{font-size:19px;line-height:1.35}.juice-wallet{align-self:flex-end}.upgrade-row{gap:10px;grid-template-columns:1fr 128px}.upgrade-row h3{font-size:15px}.upgrade-row p{font-size:11px}.upgrade-row button{min-width:0;padding:10px 8px;font-size:12px}.ride-metrics{gap:5px}.ride-metrics output{font-size:18px;min-width:76px;margin-right:0}.ride-metrics button{padding:7px;font-size:11px}.ride-juice{margin-right:0;grid-template-columns:20px auto;column-gap:3px}.ride-juice img{width:20px;height:29px}.ride-juice b{font-size:12px}.ride-juice small{font-size:8px}.juice-notice{top:40px;font-size:11px;padding:6px 9px}}
@media(max-height:550px) and (orientation:landscape){.ride-juice{grid-template-columns:20px auto;margin-right:5px}.ride-juice img{width:20px;height:28px}.ride-juice small{font-size:8px}}
.message{overflow-y:auto}.message>div{max-height:100%;overflow-y:auto}
@media(max-height:550px) and (orientation:landscape){.message{padding:8px}.message>div{max-width:660px;padding:14px 20px;display:grid;grid-template-columns:1.6fr 1fr;gap:10px 20px;align-items:center;text-align:left}.message h2{font-size:22px;margin:0;grid-column:1;grid-row:1}.message p{font-size:12px;line-height:1.4;margin:0;grid-column:1;grid-row:2}.message .primary{grid-column:2;grid-row:1;min-height:44px;font-size:14px;padding:10px}.message .quiet{grid-column:2;grid-row:2;min-height:44px;margin:0;font-size:13px;padding:8px}}
.player-form{margin:0 0 20px;max-width:480px}.player-form label,.leaderboard>label{display:block;font-weight:700;font-size:14px;margin-bottom:8px}.player-form>div{display:flex;gap:8px}.player-form input,.leaderboard select{font:inherit;color:var(--ink);background:#fffdf6;border:1px solid #899c8c;border-radius:7px;padding:12px;min-height:46px;min-width:0}.player-form input{width:100%;flex:1}.player-form input::placeholder{color:#596b61}.player-form input:focus-visible,.leaderboard select:focus-visible{outline:3px solid var(--red);outline-offset:3px}.player-form button{background:#284b3b;color:#fff9e9;border-radius:7px;padding:10px 14px;white-space:nowrap;font-size:13px}.player-form button:disabled{opacity:.65;cursor:wait}.welcome .player-form p{font-size:12px;line-height:1.5;margin:8px 0 0;min-height:36px}#guestStart{margin:0 8px 12px 0}.leaderboard{padding:8px 0 34px}.leaderboard .section-heading{align-items:center}.leaderboard .section-heading p{margin-top:9px;line-height:1.5}.leaderboard select{width:min(100%,440px)}.leaderboard>p{font-size:13px;color:var(--muted);line-height:1.5}.leader-table{max-height:410px;overflow:auto;border-top:1px solid #c8d0c3;border-bottom:1px solid #c8d0c3;scrollbar-color:#839c82 #e8eadf}.leader-table table{border-collapse:collapse;width:100%;text-align:left;font-size:14px;font-variant-numeric:tabular-nums}.leader-table th{position:sticky;top:0;background:#e6e9db;padding:13px 16px;font-size:12px}.leader-table td{padding:13px 16px;border-top:1px solid #d7dace;overflow-wrap:anywhere}.leader-table td:first-child{width:80px;color:var(--muted)}.leader-table td:last-child,.leader-table th:last-child{text-align:right;white-space:nowrap}.your-result{background:var(--lime)}#ownRecord{font-weight:700;color:#284b3b}#scoreStatus:empty{display:none}@media(max-width:560px){.player-form>div{flex-wrap:wrap}.player-form input{flex-basis:170px}.player-form button{min-height:44px}.leaderboard .section-heading{align-items:flex-start}.leader-table td,.leader-table th{padding:12px 9px}.leaderboard{padding-bottom:25px}}
