@import"https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Pixelify+Sans:wght@500;600&display=swap";:root{color:#2c1d17;background:#16100e;font-family:IM Fell English,Georgia,serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none;touch-action:none}button,input,select{font:inherit}button{touch-action:manipulation}#shell{position:relative;width:100%;height:100%;background:#201714;isolation:isolate}#game-host{position:absolute;top:0;right:0;bottom:0;left:0}#game-host canvas{image-rendering:pixelated}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:#19110e52;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:5}.overlay.compact{background:#19110e29;-webkit-backdrop-filter:none;backdrop-filter:none}.hidden{display:none!important}.panel{width:min(34rem,92vw);max-height:88vh;overflow:auto;padding:clamp(1.2rem,3.5vw,2.2rem);text-align:center;background:#efe0bd;background-image:linear-gradient(100deg,rgba(91,55,32,.07),transparent 32%,rgba(91,55,32,.06));border:4px double #705037;box-shadow:0 10px #1f14108c,0 22px 50px #00000059;clip-path:polygon(1% 0,99% 1%,100% 97%,97% 100%,2% 99%,0 3%)}.small-panel{width:min(26rem,92vw)}.panel h1,.panel h2{margin:.1em 0;color:#4b2d22;font-family:Pixelify Sans,monospace;line-height:.95}.panel h1{font-size:clamp(3.7rem,13vw,7rem);letter-spacing:-.06em;text-shadow:3px 3px 0 #c69258}.panel h2{font-size:clamp(2.2rem,7vw,4rem)}.panel p{margin:.75rem auto;max-width:30rem;font-size:clamp(1rem,2vw,1.25rem)}.eyebrow{font-family:Pixelify Sans,monospace;text-transform:uppercase;letter-spacing:.14em;color:#8c4d37}.fine-print{opacity:.7;font-size:.9rem!important}.notice{padding:.6rem .8rem;color:#772f26;background:#a74d371f;border:1px solid #a9624c}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem;margin-top:1.25rem}button{min-height:2.8rem;padding:.65rem 1rem;color:#3d291f;background:#dec79c;border:2px solid #72513b;border-radius:2px;box-shadow:0 3px #72513b;cursor:pointer}button:hover:not(:disabled),button:focus-visible{transform:translateY(-1px);background:#ead8b4}button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #72513b}button:disabled{cursor:not-allowed;opacity:.45}button.primary{color:#fff5d6;background:#8e4937;border-color:#543024;box-shadow:0 3px #543024}button.primary:hover,button.primary:focus-visible{background:#a65a42}.live-readout{display:flex;justify-content:center;gap:2rem;margin:1rem 0;font-family:Pixelify Sans,monospace}.live-readout strong{font-size:2rem}.load-control{display:grid;grid-template-columns:1fr auto;gap:.45rem .75rem;align-items:center;margin:1rem auto;padding:.75rem;background:#70503717;border:1px solid rgba(112,80,55,.45)}.load-control label,.load-control input,.load-control select,.load-control .fine-print{grid-column:1 / -1}.load-control output{font-family:Pixelify Sans,monospace}.load-control input{width:100%;accent-color:#8e4937}.load-control select{width:100%;min-height:2.6rem;padding:.45rem .6rem;color:#3d291f;background:#f4e4bd;border:1px solid #72513b}.history-panel{width:min(58rem,94vw);max-height:88vh;overflow:auto}.history-current,.history-archive{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.5rem}.history-total,.history-ride{display:grid;gap:.2rem;padding:.55rem;text-align:left;background:#70503717;border:1px solid rgba(112,80,55,.35)}.history-total span,.history-ride span,.history-ride small{display:block}.history-rides{display:grid;gap:.55rem}.history-ride{grid-template-columns:minmax(14rem,1fr) 12rem;align-items:center}.power-curve{width:100%;height:3.5rem;background:#2634371a}.power-curve polyline{fill:none;stroke:#8e4937;stroke-width:2}.progress{height:.8rem;margin-top:1.5rem;overflow:hidden;background:#c8ad7c;border:1px solid #705037}.progress i{display:block;width:0;height:100%;background:#9a513c;transition:width .1s linear}.countdown{color:#fff0c4;font-family:Pixelify Sans,monospace;font-size:min(36vw,12rem);text-shadow:6px 6px 0 #6f3b2e}.trace-cue{position:absolute;z-index:6;top:max(3.5rem,calc(env(safe-area-inset-top) + 3.5rem));left:50%;width:min(28rem,88vw);padding:.65rem .85rem;transform:translate(-50%);color:#fff0c4;background:#2c1d17e6;border:2px solid #d2ac6d;text-align:center}.trace-cue strong,.trace-cue span{display:block}.trace-cue strong{font-family:Pixelify Sans,monospace;font-size:1.6rem;text-transform:uppercase}.trace-cue button{min-height:0;margin-top:.45rem;padding:.25rem .6rem}.trace-progress{height:.35rem;margin-top:.5rem;overflow:hidden;background:#705037}.trace-progress i{display:block;width:0;height:100%;background:#f0cc74}.hud{position:absolute;top:max(.6rem,env(safe-area-inset-top));left:max(.6rem,env(safe-area-inset-left));display:flex;gap:.35rem;z-index:3}.metric{min-width:4.5rem;padding:.35rem .55rem;color:#fff0c4;background:#2c1d17d1;border:1px solid #d2ac6d;text-align:center}.metric strong,.metric span{display:block;font-family:Pixelify Sans,monospace}.metric strong{font-size:clamp(1rem,3vw,1.5rem)}.metric span{opacity:.72;font-size:.66rem;text-transform:uppercase}.metric.score{border-color:#f0cc74}.ride-stats{position:absolute;z-index:3;bottom:max(.6rem,env(safe-area-inset-bottom));left:max(.6rem,env(safe-area-inset-left));min-width:12.5rem;padding:.4rem .6rem;color:#fff0c4;background:#2c1d17d1;border:1px solid #d2ac6d;font-family:Pixelify Sans,monospace;font-size:clamp(.72rem,2vw,.9rem);line-height:1.35;pointer-events:none}.ride-stats>div{display:flex;align-items:baseline;gap:.3rem}.ride-stats>div>span:first-child{min-width:4.2rem;opacity:.7;font-size:.7rem;text-transform:uppercase}.ride-stats strong{font-size:1rem}.ride-stats small{opacity:.72;font-size:.72rem}.top-controls{position:absolute;z-index:6;top:max(.65rem,env(safe-area-inset-top));right:max(.65rem,env(safe-area-inset-right));display:flex;align-items:center;justify-content:flex-end;gap:.35rem;max-width:calc(100vw - 1.3rem)}.connection-pill,.menu-button,.mute-button{position:static;font-family:Pixelify Sans,monospace;font-size:.74rem;min-height:0;padding:.35rem .5rem;color:#f5e4b8;background:#241b16c7;border:1px solid #9c7450;box-shadow:none}.connection-pill{max-width:min(13rem,38vw);overflow:hidden;padding:.4rem .6rem;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.connection-pill:not(:disabled){cursor:pointer}.connection-pill:disabled{cursor:default;opacity:1}.connection-pill[data-state=connected]{border-color:#91b56b;color:#dff0b6}.connection-pill[data-state=error],.connection-pill[data-state=stale]{border-color:#c66a53;color:#ffd1b5}.level-list{display:grid;gap:.8rem;margin-top:1.25rem}.level-card{width:100%;padding:1rem;text-align:left;background:#dec79cdb}.level-card strong,.level-card span{display:block}.level-card strong{margin-bottom:.25rem;font-family:Pixelify Sans,monospace;font-size:1.4rem}.level-card span{opacity:.78}.level-settings{display:grid;grid-template-columns:minmax(7rem,auto) 1fr;gap:.65rem .8rem;align-items:center;margin:1.2rem auto;padding:.9rem;text-align:left;background:#70503717;border:1px solid rgba(112,80,55,.45)}.level-settings label{font-family:Pixelify Sans,monospace}.level-settings select,.level-settings input{width:100%;min-height:2.6rem;padding:.45rem .6rem;color:#3d291f;background:#f4e4bd;border:1px solid #72513b}@media(max-width:620px){.hud{top:auto;bottom:max(4rem,calc(env(safe-area-inset-bottom) + 3.5rem));right:.5rem;justify-content:center}.metric{min-width:0;flex:1;padding-inline:.35rem}.panel{padding:1rem}.panel h1{font-size:4.2rem}.ride-stats{right:max(.6rem,env(safe-area-inset-right));min-width:0}.level-settings{grid-template-columns:1fr}}@media(orientation:portrait)and (max-width:700px){#shell:after{content:"Landscape gives you more sky";position:absolute;z-index:2;bottom:5.4rem;left:50%;transform:translate(-50%);padding:.25rem .55rem;color:#f9e9be;background:#211712c2;font-size:.75rem;white-space:nowrap;pointer-events:none}}
