@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;font-family:'Barlow',Arial,sans-serif;color:#fff5e4;background:#191d1c}*{box-sizing:border-box}html,body{overflow:hidden;width:100%;height:100%}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffcc69;outline-offset:5px}#stage{position:fixed;width:1280px;height:800px;transform-origin:top left;overflow:hidden;background:#b4bec0}#scene,#scene canvas,.vignette{position:absolute;inset:0;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(180deg,rgba(16,25,27,.46),transparent 36%,transparent 65%,rgba(17,23,21,.7)),linear-gradient(90deg,rgba(20,25,23,.12),transparent 60%)}header{position:absolute;top:27px;left:38px;right:38px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:18px;color:#fff5e4;font-size:10px;letter-spacing:2px;font-weight:700}.brand a{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand img{display:block;width:36px;height:36px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));transition:transform .15s}.brand-home:hover img{transform:scale(1.06)}.brand-crumb{opacity:.65}.brand-crumb:hover{opacity:1}.top-actions{display:flex;gap:7px}.top-actions button{border:1px solid #ffffff40;background:#17211d24;color:#fff5e4;min-width:35px;height:35px;font-size:19px}#sound{font-size:9px;letter-spacing:1px;padding:0 12px}.masthead{position:absolute;left:38px;top:93px}.eyebrow,.label{font-size:10px;letter-spacing:2.5px;font-weight:700}.eyebrow span{opacity:.55;margin-left:19px;font-size:9px}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:79px;font-style:italic;line-height:.95;margin:12px 0 13px;letter-spacing:-2px}h1 span{color:#ff713e}h1 i{font-size:20px;vertical-align:top;margin-left:13px;line-height:2;letter-spacing:0;font-weight:600}.subtitle{font-size:13px;letter-spacing:1px;margin:0;color:#fff5e4be}.objective{position:absolute;right:38px;top:108px;border-top:2px solid #ff713e;padding-top:15px;width:256px;text-shadow:0 1px 12px #29312655}.objective .label{font-size:9px;color:#fff1d8ad}.objective h2{font-size:28px;margin:7px 0 18px;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:600}.checklist{display:flex;gap:17px;font-size:9px;color:#ffffff77}.checklist b{font-size:9px;letter-spacing:1px;margin-left:4px}.checklist .done{color:#bdebab}.best{border-top:1px solid #ffffff30;padding-top:14px;margin-top:18px;font-size:9px;letter-spacing:1.6px;color:#ffffffa0;display:flex;justify-content:space-between}.best b{color:#fff5e4;letter-spacing:0}.panel{position:absolute;left:38px;top:294px;width:320px;padding:25px 27px;background:#152522ee;border:1px solid #e6dfb926;box-shadow:0 15px 50px #14231d33;border-top:2px solid #ff713e}.panel h2{font:700 50px/.98 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.6px;margin:14px 0 15px}.panel .label{color:#ff9970;font-size:8px;letter-spacing:1.8px}.panel p{color:#c1c9b9;font-size:13px;line-height:1.6}.primary{display:flex;justify-content:space-between;align-items:center;background:#ff713e;color:#1e2921;font-size:12px;font-weight:800;letter-spacing:1.7px;border:0;width:100%;padding:16px 18px;margin-top:21px}.primary:hover{background:#ffa16b}.primary span{font-size:20px;line-height:12px}.panel-note{display:block;font-size:8px;letter-spacing:1px;margin-top:13px;color:#99a897}#result,#paused{top:290px;width:350px}#result h2{font-size:46px}#result-stats{font:600 12px/1.8 'Barlow',sans-serif;color:#ffe1ad}#result lg-feedback{font-size:11px}.telemetry{position:absolute;left:38px;right:38px;bottom:83px;display:flex;gap:35px;align-items:center;border-top:1px solid #fff5e435;padding-top:18px}.speed{display:flex;align-items:baseline;gap:8px}.speed strong{font:600 59px/.8 'Barlow Condensed',Impact,sans-serif;font-variant-numeric:tabular-nums;min-width:54px}.speed span,.instrument>span,.suspension>span{font-size:8px;letter-spacing:1.7px;color:#d9dacbb5}.instrument{display:flex;flex-direction:column;gap:6px}.instrument b{font-size:21px;font-weight:500;font-variant-numeric:tabular-nums}.instrument small{font-size:8px;color:#d9dacbb5}.instrument b.over{color:#ff7a5c}.touchdown b{min-width:74px}.suspension>div{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:8px;color:#ddd5ba}.suspension i{height:6px;width:51px;background:#ffffff26;display:block}.suspension em{display:block;height:100%;width:15%;background:#ff9a63}.surface{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1.8px}.surface i{width:6px;height:6px;background:#bcdd9c;border-radius:50%;box-shadow:0 0 8px #bcdd9c80}footer{position:absolute;bottom:0;left:0;right:0;height:60px;background:#12201ef0;display:flex;align-items:center;gap:28px;padding:0 38px;font-size:9px;letter-spacing:1.1px;color:#d8ddca}footer div{display:flex;align-items:center;gap:5px}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:24px;border:1px solid #d8ddca35;font-family:inherit;font-size:11px;margin-right:0}footer div kbd:last-of-type{margin-right:5px}footer>span{margin-left:auto;color:#a1ad9e;font-size:8px}footer em{margin:0 10px}#fallback{position:absolute;inset:0;background:#152522;z-index:10;padding:240px 100px;text-align:center}#fallback a{color:#ff9970}[hidden]{display:none!important}#touch{display:none;position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:15px;right:15px;justify-content:space-between;z-index:20;pointer-events:none}#touch>div{display:flex;gap:8px}#touch button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;background:#192d2de8;border:1px solid #ffffff50;border-radius:10px;width:62px;height:62px;color:#fff1d8;font-size:25px}#touch small{display:block;font-size:8px;letter-spacing:.5px}#touch .gas{background:#ef733bec;color:#12201e}#touch button.held{background:#fff0b9;color:#152522}@media(pointer:coarse),(max-width:700px){#touch{display:flex}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:700px) and (orientation:portrait){header{left:25px;right:25px;top:22px}.brand{font-size:9px;letter-spacing:1px;gap:12px}.brand a{gap:8px}.brand img{width:30px;height:30px}.top-actions{gap:5px}.top-actions button{height:42px;min-width:42px}#sound{font-size:9px;padding:0 8px}.masthead{left:25px;top:89px}.masthead h1{font-size:65px}.eyebrow{font-size:9px}.eyebrow span{display:none}.subtitle{font-size:12px}.objective{top:217px;left:25px;right:25px;width:auto;padding-top:10px}.objective h2{font-size:25px;margin:5px 0 10px}.objective .checklist{position:absolute;right:0;top:35px;gap:11px}.objective .best{margin-top:9px;padding-top:10px}.panel,#result,#paused{left:25px;top:auto;bottom:166px;width:590px;padding:20px 24px}.panel h2{font-size:44px;margin:10px 0}.panel h2 br{display:none}.panel p br{display:none}.panel p{font-size:15px;margin:10px 0}.panel .label{font-size:10px}.panel-note{font-size:10px}.primary{padding:17px 18px;margin-top:15px;font-size:14px}.telemetry{left:25px;right:25px;bottom:80px;gap:24px}.surface{display:none}footer{padding:0 25px;gap:15px;height:58px}footer div{font-size:9px}footer div kbd:first-child{display:none}footer>span{display:none}footer kbd{min-width:20px}.suspension i{width:42px}#fallback{padding:350px 40px}}
/* Riding keeps the course clear; the full title belongs to the start screen. */
body.playing .masthead{top:78px}body.playing .masthead h1{font-size:34px;margin:0;letter-spacing:-.5px}body.playing .masthead h1 i{font-size:11px}body.playing .masthead .eyebrow,body.playing .masthead .subtitle{display:none}body.playing .objective{top:82px;padding-top:9px;width:230px}body.playing .objective>.label,body.playing .objective .best{display:none}body.playing .objective h2{font-size:24px;margin:0 0 9px}.primary:disabled{opacity:.55;cursor:wait}
@media(max-width:700px) and (orientation:portrait){body.playing .masthead{top:90px}body.playing .objective{top:87px;left:auto;right:25px;width:270px}body.playing .objective .checklist{position:static;font-size:10px;gap:17px}body.playing .objective h2{font-size:25px}}
.panel-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
#result{top:240px}#result h2{margin:10px 0;font-size:42px}.panel p{margin:10px 0}#result-stats{white-space:pre-line}
/* A tall result card (seat() in game.mjs) sits over the spent speed / air time / rotation readouts, not under them. */
#result.tall{z-index:2;padding-top:16px;padding-bottom:16px;overflow-y:auto}#result.tall h2{margin:6px 0}#result.tall .actions{margin-top:12px}
#result.tall:not([hidden])~.telemetry>.speed,#result.tall:not([hidden])~.telemetry>.instrument,#result.tall:not([hidden])~.telemetry>.suspension{visibility:hidden}
@media(max-width:700px) and (orientation:portrait){#result{top:auto}}
.actions{display:flex;gap:8px;margin-top:18px}.actions .primary{margin-top:0;flex:1.5}.secondary{flex:1;border:1px solid #fff5e4a8;background:#ffffff0d;color:#fff5e4;font-size:12px;font-weight:800;letter-spacing:1.7px}.secondary:hover{background:#ffffff26}
.bike-line{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #ffffff1f;padding-top:10px;margin-top:12px;font-size:9px;letter-spacing:1.6px;color:#d9dacbb5}.bike-line b{color:#fff5e4;font-size:12px;letter-spacing:1px}
.panel.garage{left:50%;top:50%;transform:translate(-50%,-50%);width:780px;padding:26px 32px;z-index:6;box-shadow:0 0 0 2000px #0d1513b3,0 30px 90px #0b131199}.garage h2{font-size:44px;margin:8px 0 6px}
.g-row{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:14px;margin:12px 0}.g-name{font-size:11px;letter-spacing:2px;color:#ff9970;font-weight:700}
.seg{display:flex;gap:8px}.seg button{flex:1;min-height:62px;text-align:left;padding:9px 14px;border:1px solid #ffffff38;background:#ffffff08;color:#fff5e4}.seg button:hover{border-color:#fff5e4}
.seg button b{display:block;font:700 23px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.5px}.seg button small{display:block;font-size:11px;line-height:1.3;color:#c1c9b9;margin-top:4px}
.seg button[aria-pressed=true]{background:#fff5e4;color:#152522;border-color:#fff5e4}.seg button[aria-pressed=true] small{color:#3b4543}
.g-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 28px;margin-top:16px;border-top:1px solid #ffffff1f;padding-top:16px}.stat{font-size:10px;letter-spacing:1.6px;color:#d9dacbb5}.stat i{display:block;height:7px;background:#ffffff1f;margin-top:6px}.stat em{display:block;height:100%;background:#ff9a63;transition:width .25s}
.garage .primary{margin-top:18px}
@media(max-width:700px) and (orientation:portrait){.panel.garage{left:20px;right:20px;width:auto;top:110px;transform:none}.g-row{grid-template-columns:1fr;gap:6px;margin:10px 0}.g-name{font-size:12px}.seg button{min-height:76px}.seg button b{font-size:26px}.seg button small{font-size:13px}.stat{font-size:12px}.bike-line{font-size:11px}.bike-line b{font-size:14px}.secondary{font-size:14px}}
#intro{top:238px}#intro h2{margin:10px 0 8px}
@media(max-width:700px) and (orientation:portrait){#intro{top:auto}}
/* Level picker (start and result cards) and the trick controls. */
.levels{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}body.playing .objective .levels{display:none}.levels button{flex:1 1 calc(50% - 3px);display:flex;align-items:center;gap:8px;text-align:left;padding:6px 10px;border:1px solid #ffffff38;background:#152522b8;color:#fff5e4}.levels button:hover{border-color:#fff5e4}
.levels b{font:700 18px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.5px}.levels small{font-size:9px;line-height:1.25;letter-spacing:1.4px;font-weight:700;color:#c1c9b9}

.levels button[aria-pressed=true]{background:#fff5e4;color:#152522;border-color:#fff5e4}.levels button[aria-pressed=true] small{color:#3b4543}

footer kbd.wide{min-width:46px;font-size:9px;letter-spacing:1px}
#touch .pad{flex-direction:column;align-items:stretch}#touch .pad>div{display:flex;gap:8px;justify-content:space-between}
#touch button.trick{height:44px;font-size:17px;background:#1d2a33e0}#touch button.trick.wide{width:132px}
@media(max-width:700px) and (orientation:portrait){.levels small{font-size:10px}.levels b{font-size:22px}.objective .checklist{top:94px}footer .trick-keys{display:none}}


/* Garage bay: the bike beside the settings, reacting to each change (garage-view.mjs). */
.panel.garage{width:1180px;display:grid;grid-template-columns:420px 1fr;gap:30px}
.g-bay{position:relative;min-height:300px;overflow:hidden;border:1px solid #ffffff14;background:radial-gradient(ellipse 70% 42% at 50% 80%,#34443e 0%,#1b2925 60%,#121c19 100%)}
#garage-bay{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.g-bay-note{position:absolute;left:0;right:0;top:50%;margin-top:-6px;text-align:center;font-size:10px;letter-spacing:2px;color:#d9dacbb5}
.garage.bay-ready .g-bay-note{display:none}
.panel.garage.no-bay{width:780px;display:block}.garage.no-bay .g-bay{display:none}
@media(max-width:700px) and (orientation:portrait){.panel.garage{width:auto;display:block;top:84px}.g-bay{height:200px;min-height:0;margin-bottom:8px}.seg button{min-height:64px}.g-row{margin:8px 0}}


/* Compact landing instruments: solid motorcycle profiles and safe-limit markers. */
.landing-gauge{color:#c2e6ad}
.dial-bezel{fill:#142422;stroke:#56665b;stroke-width:1.5}
.dial-ticks{fill:none;stroke:#dbdbc28c;stroke-width:1.5}
.impact-bed{fill:none;stroke:#0c1716;stroke-width:16}
.impact-soft,.impact-firm,.impact-hard{fill:none;stroke-width:9}
.impact-soft{stroke:#b9dba0}.impact-firm{stroke:#f1c46b}.impact-hard{stroke:#ed785b}
.limit-tick{stroke:#fff2cf;stroke-width:2}
.needle{fill:#fff2d5}.needle-shadow{fill:#061210;opacity:.8}
.needle-hub{fill:#35493f;stroke:#849780;stroke-width:1.5}
.gauge-readout{display:flex;align-items:center;justify-content:center}
.gauge-readout strong{font-family:'Barlow Condensed',Arial,sans-serif;font-weight:600}
.gauge-readout i{border-radius:50%;background:currentColor}
.landing-gauge.over{color:#ff8a6c}.landing-gauge.caution{color:#f1c46b}.landing-gauge.waiting{color:#9aab9a}
.landing-gauge.over .needle{fill:#ff8a6c}
.landing-gauge.over .dial-bezel{stroke:#f38a69;fill:#302723}
/* Match the controls toolbar height; instruments never grow the HUD. */
.telemetry{display:grid;grid-template-columns:90px 78px 135px 196px minmax(0,1fr);height:60px;bottom:76px;gap:24px;padding:0;border-top:0;align-items:center}
.telemetry>.speed,.telemetry>.instrument,.telemetry>.suspension{margin:0}
.telemetry>.surface{position:static;margin-left:0;min-width:0;justify-self:end}
.telemetry>.instrument{min-width:0}.telemetry>.instrument b{white-space:nowrap}
.landing-instruments{display:flex;pointer-events:none;height:60px;gap:12px;margin-left:0;align-items:center;justify-self:end}
.touchdown{flex-shrink:0;text-align:center;width:116px;height:60px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;gap:0;justify-content:center}
.touchdown>span{font-size:8px;line-height:10px;letter-spacing:1.1px}
.landing-gauge{height:48px}
.landing-gauge>svg{display:block;width:76px;height:36px;margin:0 auto}
.dial-caption,.limit-caption,.landing-gauge small{display:none}
.gauge-readout{height:12px;gap:4px}
.gauge-readout strong{font-size:9px;line-height:12px;letter-spacing:.6px}
.gauge-readout i{width:4px;height:4px;box-shadow:none}
@media(max-width:700px) and (orientation:portrait){
.telemetry{display:grid;grid-template-columns:60px 52px 88px minmax(0,1fr);height:58px;bottom:76px;gap:10px;padding:0}
.telemetry>.speed,.telemetry>.instrument,.telemetry>.suspension{flex-shrink:0}
.telemetry .speed strong{font-size:40px;min-width:38px}
.telemetry .speed{gap:3px}.telemetry .speed span{font-size:7px}
.telemetry>.instrument b{font-size:16px}.telemetry>.instrument>span,.suspension>span{font-size:7px;letter-spacing:.6px}
.suspension i{width:22px}.suspension>div{gap:3px}
.landing-instruments{height:58px;width:150px;gap:6px;margin-left:0;flex-shrink:0}
.touchdown{flex:none;width:84px;height:58px;padding:0}
.touchdown>span{font-size:7px;letter-spacing:.4px}
.landing-gauge>svg{width:70px;height:36px;margin:0 auto}
.gauge-readout{height:12px}.gauge-readout strong{font-size:8px;letter-spacing:0}
.panel,#result,#paused{bottom:166px}
}

/* Freestyle: the mode switch above the picker, the five jumps' pips, the points callout as each is banked. */
.modes{display:flex;margin:0 0 8px;border:1px solid #ffffff38}
.modes button{flex:1;padding:6px 8px;border:0;background:#152522b8;color:#c1c9b9;font-size:9px;font-weight:800;letter-spacing:1.8px}
.modes button:hover{color:#fff5e4}.modes button[aria-pressed=true]{background:#ff713e;color:#1e2921}
body.playing .objective .modes{display:none}
.minimap{display:none;width:100%;height:48px;margin-top:8px}body.playing .minimap{display:block}.jumps{display:flex;gap:4px}.jumps span{flex:1;height:24px;border:1px solid #ffffff30;font-size:9px;font-weight:700;letter-spacing:1px;display:flex;align-items:center;justify-content:center;color:#ffffff88;background:#15252280}
.jumps .now{border-color:#fff5e4;color:#fff5e4}.jumps .done{background:#bdebab;border-color:#bdebab;color:#152522}.jumps .miss{background:#ff713e66;border-color:#ff713e}
#callout{position:absolute;left:50%;top:190px;transform:translateX(-50%);text-align:center;pointer-events:none;font:700 44px/1 'Barlow Condensed',Impact,sans-serif;color:#ffd36b;text-shadow:0 2px 16px #000a;white-space:nowrap}
#callout small{display:block;font:700 12px 'Barlow',Arial,sans-serif;letter-spacing:2px;color:#fff5e4;margin-top:8px}
/* How hard the landing hit, under its points: soft green, firm amber in the last quarter (past the limit is a crash). */
#callout .hit{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;font:700 10px 'Barlow',Arial,sans-serif;letter-spacing:1.5px;color:#fff5e4}
#callout .hit i{display:block;width:120px;height:6px;border-radius:3px;background:#ffffff2e;box-shadow:0 1px 8px #000a;overflow:hidden}#callout .hit em{display:block;height:100%;border-radius:3px;background:#c2e6ad}#callout .hit.firm em{background:#f1c46b}
@media(max-width:700px) and (orientation:portrait){.modes button{font-size:11px;padding:8px}#callout{top:330px}.jumps span{font-size:11px;height:28px}body.playing .objective .jumps{margin-top:2px}}
/* Too hard a hit on the run card: the g-force against the limit (the white tick). */
#result-stats .g-meter{display:flex;align-items:center;gap:10px;margin:4px 0 6px;font:700 11px/1 'Barlow',Arial,sans-serif;letter-spacing:1.2px;color:#ff8a6c;white-space:nowrap}
#result-stats .g-meter i{position:relative;display:block;flex:1;max-width:180px;height:8px;border-radius:4px;background:#ffffff2e}#result-stats .g-meter em{display:block;height:100%;border-radius:4px;background:#ff8a6c}#result-stats .g-meter b{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:#fff5e4}
#result-stats .runlist{display:grid;grid-template-columns:auto auto 1fr auto;gap:0 8px;align-items:baseline;font:600 11px/1.65 'Barlow',Arial,sans-serif;white-space:normal;margin-top:2px}
.runlist>div{display:contents}.runlist span{color:#99a897}.runlist b{color:#fff5e4;font-weight:700;letter-spacing:.4px;white-space:nowrap}
.runlist em{font-style:normal;font-size:10px;color:#ffe1ad;letter-spacing:.4px}.runlist i{font-style:normal;color:#ffd36b;text-align:right;white-space:nowrap}
.g-stats{grid-template-columns:repeat(4,1fr)}
@media(max-width:700px) and (orientation:portrait){.panel.garage{bottom:16px;overflow-y:auto;padding-bottom:0}.g-bay{height:150px}.g-row{margin:5px 0}.seg button{min-height:54px;padding:7px 12px}.seg button b{font-size:23px}.seg button small{font-size:12px}.g-stats{margin-top:10px;padding-top:10px;gap:8px 18px}.garage .primary{position:sticky;bottom:0;margin-top:12px;box-shadow:0 -12px 0 #152522}}
.levels button[hidden]{display:none}

/* Garage: the drop test under the bay (drop-test.mjs), and the gear's panel of every tuning number (tuning-panel.mjs). */
.g-left{display:flex;flex-direction:column;gap:10px;min-width:0}
.g-left .g-bay{flex:1}
.garage.no-bay .g-left{display:none}
.g-drop{border:1px solid #ffffff14;padding:10px 12px;display:grid;gap:6px}
.g-slider{display:grid;grid-template-columns:52px 1fr 112px;align-items:center;gap:8px;font-size:10px;letter-spacing:1.5px;color:#c1c9b9}
.g-slider input{width:100%;accent-color:#ff713e}
.g-slider output{font-size:11px;color:#fff5e4;text-align:right;white-space:nowrap}
.g-drop-go{display:flex;gap:8px}
.g-drop-go .seg{flex:1}
.g-drop .seg button{min-height:0;padding:7px 10px;font-size:12px;font-weight:700;letter-spacing:1px}
.g-drop-go #drop-go{padding:7px 18px;margin:0}
.g-drop-go #drop-go:disabled{opacity:.5}
.g-live{position:absolute;left:12px;top:10px;font:700 26px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.5px;color:#fff5e4;text-shadow:0 1px 4px #000a}
.g-live[hidden]{display:none}
#drop-result{margin:2px 0 0;font-size:12px;line-height:1.4;color:#d9dacb;min-height:34px}
#drop-result b{color:#fff5e4}
#drop-result .over{color:#ff713e}
.g-head{display:flex;align-items:center;justify-content:space-between}
.g-gear{background:none;border:1px solid #ffffff38;color:#fff5e4;width:38px;height:38px;display:grid;place-items:center;padding:0}
.g-gear:hover{border-color:#fff5e4}
.t-panel{position:absolute;inset:0;z-index:3;background:#152522;padding:26px 32px;display:flex;flex-direction:column;gap:12px}
.t-panel[hidden]{display:none}
.t-head h2{margin:6px 0 4px}
.t-note{margin:0 0 8px;font-size:13px;color:#c1c9b9}
.t-count{margin-left:10px;color:#ff9970}
.t-filter{width:100%;padding:9px 12px;background:#ffffff0d;border:1px solid #ffffff38;color:#fff5e4;font:inherit}
.t-list{flex:1;overflow-y:auto;columns:3 250px;column-gap:26px;padding-right:6px}
.t-list h3{font-size:11px;letter-spacing:2px;color:#ff9970;margin:12px 0 4px;break-after:avoid;text-transform:uppercase}
.t-row{display:grid;grid-template-columns:1fr 92px 24px;align-items:center;gap:6px;margin:2px 0;font-size:12px;break-inside:avoid}
.t-row[hidden],.t-list h3[hidden]{display:none}
.t-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d9dacb}
.t-row input{width:100%;padding:3px 6px;background:#ffffff0d;border:1px solid #ffffff2a;color:#fff5e4;font:inherit;font-size:12px}
.t-row .t-undo{visibility:hidden;background:none;border:0;color:#ff9970;padding:0;font-size:14px}
.t-row.changed span{color:#ff9970}.t-row.changed input{border-color:#ff9970}.t-row.changed .t-undo{visibility:visible}
.t-actions{display:flex;gap:10px;justify-content:flex-end}
.t-actions button{white-space:nowrap}.t-actions .secondary{padding:0 18px}.t-actions .primary{margin:0;flex:1}
@media(max-width:700px) and (orientation:portrait){.g-left .g-bay{flex:none}.g-slider{grid-template-columns:52px 1fr 104px}.t-panel{padding:18px 16px}.t-list{columns:1}}

/* Main menu: missions and freestyle side by side, each course with its best. Its backdrop takes the clicks around it. */
.panel.menu{left:50%;top:50%;transform:translate(-50%,-50%);width:760px;background:#152522;padding:26px 32px 30px;z-index:6;box-shadow:0 0 0 2000px #0d1513b3,0 30px 90px #0b131199}
.menu::before{content:'';position:absolute;top:-2000px;right:-2000px;bottom:-2000px;left:-2000px;z-index:-1}
.m-head{display:flex;align-items:center;justify-content:space-between}
#menu-back{flex:none;height:36px;padding:0 14px;font-size:11px}
#menu-back small{font-size:8px;letter-spacing:1px;color:#99a897;margin-left:6px}
.menu h2{margin:12px 0 4px}
.panel .m-run{margin:0;font-size:12px;color:#ffe1ad}
.m-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px}
.m-name{display:block;font-size:12px;font-weight:800;letter-spacing:2px;color:#ff9970}
.panel .m-col p{margin:4px 0 10px;font-size:12px;color:#c1c9b9}
.m-list{display:flex;flex-direction:column;gap:6px}
.m-list button{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;text-align:left;padding:9px 12px;border:1px solid #ffffff38;background:#152522b8;color:#fff5e4}
.m-list button:hover{border-color:#fff5e4}
.m-list b{font:700 22px/1 'Barlow Condensed',Impact,sans-serif}
.m-list span{font-size:12px;font-weight:800;letter-spacing:1.4px}
.m-list small{display:block;margin-top:2px;font-size:9px;font-weight:600;letter-spacing:1px;color:#99a897}
.m-list em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:1px;color:#ffe1ad}
.m-list button[aria-current]{background:#fff5e4;color:#152522;border-color:#fff5e4}
.m-list button[aria-current] small{color:#3b4543}.m-list button[aria-current] em{color:#152522}
#menu-top{font-size:9px;letter-spacing:1px;padding:0 12px}
/* The result card's three buttons: GARAGE and MENU take their words' width, RIDE AGAIN the rest, on one line. */
#result .actions .secondary{flex:none;padding:0 10px}#result .actions .primary{white-space:nowrap}
@media(max-width:700px) and (orientation:portrait){.panel.menu{left:20px;right:20px;width:auto;top:110px;transform:none}.m-cols{grid-template-columns:1fr;gap:18px}#menu-top{padding:0 8px}}

#result .actions #mission-next{flex:1;white-space:nowrap;padding:0 12px}

/* Mission instructions stay legible over bright snow, sky and terrain. */
.objective.mission{width:290px;padding:16px;background:#152522f5;border:1px solid #ffffff30;border-top:3px solid #ff713e;text-shadow:none;box-shadow:0 8px 28px #0003}
.objective.mission .label{color:#ffc294}.objective.mission h2{color:#fff5e4;font-size:30px;line-height:1.12}
.objective.mission .checklist{color:#d7dfd3}.objective.mission .checklist .done{color:#bdebab}
#mission-progress{font-size:12px;font-weight:700;line-height:1.5;color:#ffd36b;margin:0 0 12px;font-variant-numeric:tabular-nums}
#intro.mission h2{font-size:36px;line-height:1.06}
body.playing .objective.mission{width:300px;padding:12px 16px}body.playing .objective.mission>.label{display:block;margin-bottom:7px}body.playing .objective.mission h2{font-size:27px}
@media(max-width:700px) and (orientation:portrait){.objective.mission{width:auto;padding:12px 16px}.objective.mission .checklist{position:static}.objective.mission h2{font-size:29px;margin:8px 0 12px}#intro.mission h2{font-size:34px}body.playing .objective.mission{top:145px;left:25px;right:25px;width:auto}#mission-progress{font-size:16px}}

#mission-progress{font-size:17px;line-height:1.35}#mission-progress.complete{color:#bdebab}
#superman-meter{display:block;appearance:none;-webkit-appearance:none;width:100%;height:10px;margin:-3px 0 14px;border:0;background:#ffffff26;border-radius:5px;overflow:hidden}
#superman-meter::-webkit-progress-bar{background:#ffffff26;border-radius:5px}#superman-meter::-webkit-progress-value{background:#ffd36b;border-radius:5px}#mission-progress.complete+#superman-meter::-webkit-progress-value{background:#bdebab}
@media(max-width:700px) and (orientation:portrait){#mission-progress{font-size:20px}}

.objective.mission .levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.objective.mission .levels button{padding:6px 5px;gap:4px}.objective.mission .levels small{font-size:7px;letter-spacing:.2px}
@media(max-width:700px) and (orientation:portrait){.objective.mission .levels small{font-size:11px}.objective.mission .levels button{padding:5px 8px}}
@media(max-width:700px) and (orientation:portrait){body:not(.playing) .objective.mission #mission-progress,body:not(.playing) .objective.mission #superman-meter,body:not(.playing) .objective.mission .best{display:none}}
/* Five bikes stay readable in the garage, including on narrow screens. */
.seg[data-setup="engine"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px) and (orientation:portrait){.seg[data-setup="engine"]{grid-template-columns:repeat(2,minmax(0,1fr))}}

.objective.mission .levels{position:relative;max-height:220px;overflow-y:auto;overscroll-behavior:contain}

#next-throttle-hint{font-size:11px;font-weight:700;letter-spacing:1px;color:#bdebab;margin:12px 0 0}

/* Live bike pitch beside the rider G-force dial. */
.bike-angle{width:68px;flex-shrink:0;text-align:center}.bike-angle b{white-space:nowrap}
@media(max-width:700px) and (orientation:portrait){.bike-angle{width:60px}.bike-angle>span{font-size:7px;letter-spacing:.6px}}

#auto-wheelie{width:100%;margin:8px 0;padding:10px;font-size:11px;letter-spacing:.8px}#auto-wheelie[aria-pressed=true]{background:#ff713e;color:#152522;border-color:#ff713e}

#st-score-breakdown{white-space:pre-line;font-size:12px;line-height:1.6;color:#f2e5c6;margin:0 0 10px;font-variant-numeric:tabular-nums}

/* Mission outcome is the first thing to read, ahead of the flavor text and stats. */
#result[data-outcome]{border-top-width:6px}
#result[data-outcome="pass"]{border-color:#a9ef89;background:#122b20f5}
#result[data-outcome="fail"]{border-color:#ff8278;background:#321c1cf5}
#result-verdict{font:800 76px/.95 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;margin:8px 0 14px;padding-bottom:12px;border-bottom:2px solid currentColor}
#result[data-outcome="pass"] #result-verdict,#result[data-outcome="pass"] .label{color:#a9ef89}
#result[data-outcome="fail"] #result-verdict,#result[data-outcome="fail"] .label{color:#ff8278}
#result[data-outcome] h2{font-size:30px;line-height:1.05}

/* Checklist updates stay above the ride, without a panel covering the action. */
#mission-notice{position:absolute;left:50%;top:78px;transform:translateX(-50%);z-index:3;width:540px;max-width:80%;text-align:center;pointer-events:none;color:#a9ef89;text-shadow:0 2px 5px #10251e,0 0 12px #10251e;font:700 28px/1.15 'Barlow Condensed',Impact,sans-serif}
#mission-notice strong{display:block;font:inherit}
#mission-notice span{display:block;margin-top:4px;font-size:16px;font-weight:600;color:inherit}
#mission-notice[data-outcome="check"] span{display:none}
#mission-notice[data-outcome="fail"]{color:#ff8278}
@media(max-width:700px) and (orientation:portrait){#mission-notice{top:74px;width:530px;font-size:28px}#mission-notice span{font-size:16px}}

.levels .mission-passed{margin-left:auto;flex-shrink:0;font-size:15px;font-weight:900;color:#b8e390}.levels button[aria-pressed=true] .mission-passed{color:#284c29}.levels .mission-passed[hidden]{display:none}

.chapters{display:flex;gap:5px;margin:0 0 8px}.chapters[hidden]{display:none}.chapters button{flex:1;padding:9px 4px;font-size:9px;letter-spacing:.5px;border:1px solid #64756d;background:#243d34;color:#e5e6d3}.chapters button[aria-pressed=true]{background:#eee9d9;color:#20372c;border-color:#eee9d9}

body.showing-result .objective,body.showing-result .masthead,body.showing-result #mission-notice{display:none!important}
#landing-impact{position:absolute;left:50%;top:24%;transform:translateX(-50%);padding:13px 22px;background:#251c16ed;border:2px solid #ffb761;color:#ffe7b8;font:700 32px "Barlow Condensed",sans-serif;letter-spacing:1px;pointer-events:none;z-index:18;white-space:nowrap}#landing-impact[hidden]{display:none}

body.playing .chapters{display:none}

/* the freestyle leaderboard on the result card: one line saying where the run ranks, then the location tabs and top five */
.r-board{margin-top:12px}.r-board:empty{display:none}.r-board .lg-board{margin:6px 0 0;padding:10px 12px 8px}.r-board .lg-tabs{display:flex;flex-wrap:wrap;gap:4px}
#result-board{margin:6px 0 0;font:700 12px/1.3 'Barlow',Arial,sans-serif;letter-spacing:1.4px;color:#ffd27a}
#controller-help{max-width:600px;width:calc(100% - 48px);max-height:85vh;overflow:auto;background:#152522;color:#fff5e4;border:1px solid #aab78a;padding:26px;font:14px/1.55 sans-serif;z-index:20}
#controller-help::backdrop{background:#07100be0}
#controller-open{font-size:9px;padding:0 10px}
body.run-playing header .brand,body.run-playing #menu-top,body.run-playing #controller-open{display:none}
body.using-controller #touch{display:none}
body.using-controller footer{display:flex;flex-wrap:wrap;gap:8px}
body.using-controller footer kbd{width:auto;min-width:24px;padding:0 4px}
body.using-controller footer kbd[hidden]{display:none}
body.using-controller footer .trick-keys:not([hidden]){display:block}
@media(max-width:700px) and (orientation:portrait){body.using-controller footer{bottom:16px;left:25px;right:25px;font-size:9px}body.using-controller footer kbd{font-size:9px}}
body.using-controller footer kbd:not([hidden]){display:inline-flex}
body.using-controller footer>span{display:block}
@media(max-width:700px) and (orientation:portrait){body.using-controller footer{left:0;right:0;bottom:0;height:120px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px 25px}body.using-controller footer>span{grid-column:1/-1;margin:0}body.using-controller .telemetry{bottom:135px}body.using-controller #paused,body.using-controller #result{bottom:190px}}

.controller-focus{outline:3px solid #ffcc69!important;outline-offset:3px}