@import url('./fonts/fonts.css');
:root{color-scheme:dark;--lime:#ddff6a;--ink:#101919;--white:#f4f5e9;--muted:#bdc5be;--line:#ffffff24;font-family:Barlow,Arial,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--white);overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:5px}button{transition:background .2s,color .2s,transform .2s}button:active{transform:translateY(1px)}#world,.vignette,#impact{position:fixed;inset:0;width:100%;height:100%}#world{display:block}.vignette{pointer-events:none;background:linear-gradient(90deg,rgba(7,20,21,.88) 0%,rgba(8,21,22,.6) 29%,rgba(8,21,22,0) 67%),linear-gradient(0deg,#081516db 0%,transparent 45%,#08151626 100%)}#impact{pointer-events:none;background:#ff4939;opacity:0;z-index:5}.topbar{position:absolute;top:0;left:0;right:0;padding:30px 4%;display:flex;justify-content:space-between;align-items:center;z-index:10}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:1px;font-size:21px;text-decoration:none;color:var(--white)}.brand-mark{width:32px;height:35px;display:grid;place-items:center;background:var(--lime);color:var(--ink);font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;font-style:italic;font-size:31px;clip-path:polygon(20% 0,100% 0,80% 100%,0 100%)}.brand-light{font-weight:400;opacity:.9}.top-actions{display:flex;align-items:center;gap:10px}.edition{font-size:12px;letter-spacing:2px;margin-right:28px;opacity:.72}.icon-btn{width:42px;height:42px;display:grid;place-items:center;border:1px solid #ffffff40;border-radius:50%;background:#10202455;backdrop-filter:blur(8px)}.icon-btn:hover{background:#ddff6a33}.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.icon-btn.muted{opacity:.45}.menu{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 4%;justify-content:flex-end}.intro{position:absolute;left:4%;top:20%;}.eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:3px;color:var(--lime)}.eyebrow span{width:23px;height:2px;background:var(--lime)}h1{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-size:clamp(66px,7.6vw,126px);letter-spacing:-1px;line-height:.88;font-weight:800;margin:22px 0 20px}h1 em{font-style:italic;color:var(--lime)}.intro p{font-size:16px;line-height:1.55;color:#d2d9d1;margin:0 0 28px}.ride-row{display:flex;align-items:center;gap:22px}.primary{padding:18px 27px;background:var(--lime);color:#122021;font-weight:800;font-size:16px;letter-spacing:1.4px;min-width:200px;display:inline-flex;justify-content:space-between;align-items:center;gap:28px}.primary:hover{background:#eaffac;box-shadow:0 0 30px #ddff6a25}.primary span{font-size:23px;line-height:1}.enter-hint{font-size:11px;letter-spacing:1.5px;color:#c2c8bf}kbd{font-family:inherit;border:1px solid #ffffff30;border-radius:3px;padding:3px 7px;color:#e1e7dc;font-size:12px}.best-line{display:flex;align-items:center;gap:11px;margin-top:24px;font-size:10px;letter-spacing:1.5px;color:#b7c3ba}.best-line>span{color:var(--white);font-size:18px;font-weight:600;letter-spacing:0}.best-line small{font-size:10px;opacity:.6;letter-spacing:1px}.scene-caption{position:absolute;right:4.5%;top:42%;display:flex;gap:15px;text-shadow:0 1px 15px #0006}.caption-rule{height:59px;width:2px;background:var(--lime)}.scene-caption small{font-size:11px;letter-spacing:2.4px}.scene-caption strong{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:39px;font-weight:500;line-height:1.2}.scene-caption strong span{font-family:Barlow,sans-serif;font-size:10px;letter-spacing:2px;margin-left:13px}.setup{display:grid;grid-template-columns:1fr 1.3fr .8fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0d1b1c9c;backdrop-filter:blur(14px);min-height:146px;margin-bottom:0;padding:24px 0;z-index:2}.setup-section{padding:0 32px;border-right:1px solid var(--line);min-width:0}.setup-section:first-child{padding-left:0}.setup-section:last-child{border:0;padding-right:0}.section-label{font-size:11px;letter-spacing:2px;color:#d9ded5;margin-bottom:16px;font-weight:600}.section-label>span{color:#7e938b;font-size:10px;margin-right:8px}.segmented{display:flex;gap:5px}.segmented button{background:transparent;color:#acbcb1;border:1px solid transparent;font-size:14px;padding:7px 11px;white-space:nowrap}.segmented .selected{border-color:#ddff6a55;background:#ddff6a12;color:var(--lime)}.setup p{font-size:12px;color:#98aaa1;margin:10px 0 0}.environment-options{display:flex;gap:10px}.env{background:transparent;border:1px solid #ffffff26;padding:7px 10px 7px 7px;display:flex;gap:9px;align-items:center;font-size:13px;white-space:nowrap;flex:1}.env.selected{border-color:var(--lime);color:var(--lime);background:#ddff6a0a}.env-swatch{width:29px;height:32px;display:block;flex-shrink:0}.sunset{background:linear-gradient(#668d96,#f4b078 67%,#393e43 68%)}.night{background:linear-gradient(#131e40,#a458af 67%,#24334a 68%)}.storm{background:linear-gradient(#4b6575,#8b9f9c 67%,#3c4b51 68%)}.bike-picker{display:flex;align-items:center;justify-content:space-between;gap:12px}.bike-picker strong{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:27px;letter-spacing:1px;font-weight:600}.bike-picker div>span{display:block;font-size:10px;letter-spacing:1.5px;color:#aebcb3;margin-top:5px}.small-icon{background:transparent;font-size:28px;color:#b4c3b9;padding:4px 8px}.small-icon:hover{color:var(--lime)}.menu-footer{display:flex;justify-content:space-between;align-items:center;min-height:56px;font-size:10px;letter-spacing:1.5px;color:#aebeb5}.menu-footer>span{display:flex;align-items:center;gap:8px}.tiny-square{width:5px;height:5px;background:var(--lime)}.menu-footer button{font-size:10px;letter-spacing:1.5px;background:none}.menu-footer button span{border:1px solid #ffffff40;border-radius:50%;padding:2px 5px;margin-left:8px}.hidden{display:none!important}.hud{position:fixed;inset:0;pointer-events:none;z-index:4}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;padding:30px 4%}.ride-stats{display:flex;gap:48px}.ride-stats small{font-size:11px;letter-spacing:2px;opacity:.7;display:block;margin-bottom:3px}.ride-stats strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:38px;font-weight:600;font-variant-numeric:tabular-nums}.ride-stats strong span{font-family:Barlow,sans-serif;font-size:12px;font-weight:500}.hud button{pointer-events:auto}.hud-bottom{position:absolute;bottom:44px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:end}.speed-panel{text-align:right;width:190px}.speed-panel strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:96px;line-height:.95;font-style:italic;font-weight:600;font-variant-numeric:tabular-nums}.speed-panel>div>span{font-size:12px;letter-spacing:1px;margin-left:8px}.speed-label{font-size:11px;letter-spacing:2px;color:#d3d9cc}.speed-label b{display:inline-block;padding:4px 8px;border:1px solid #ffffff4d;font-size:18px;margin-left:6px;color:var(--lime)}.rpm-track,.nitro-track{height:4px;background:#ffffff26;margin-top:13px;overflow:hidden}.rpm-track>div{height:100%;width:0;background:var(--lime)}.nitro-panel{width:180px}.nitro-panel>div:first-child{display:flex;align-items:center;justify-content:space-between;font-size:13px;letter-spacing:3px}.nitro-track{height:6px;margin-bottom:10px}.nitro-track>div{height:100%;background:var(--lime);width:100%;box-shadow:0 0 15px #ddff6a}.nitro-panel small{font-size:10px;letter-spacing:1.2px;color:#d3dfd1}.ride-notice{position:absolute;top:27%;width:100%;text-align:center;font-family:'Barlow Condensed',Impact,sans-serif;font-size:40px;font-style:italic;color:var(--lime);text-shadow:0 2px 10px #000;opacity:0;transition:opacity .2s,transform .2s;transform:translateY(10px)}.ride-notice.show{opacity:1;transform:translateY(0)}.driving-hint{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;letter-spacing:1px;color:#b7c7bb;transition:opacity 1s}.driving-hint kbd{font-size:9px;margin:0 4px 0 10px}.countdown{position:fixed;inset:0;display:grid;place-items:center;font-family:'Barlow Condensed',Impact,sans-serif;font-style:italic;font-size:150px;font-weight:700;color:var(--lime);z-index:6;pointer-events:none;text-shadow:0 6px 40px #0008}dialog{width:min(480px,calc(100vw - 32px));background:#112224ee;backdrop-filter:blur(25px);border:1px solid #ffffff30;padding:40px;color:var(--white);box-shadow:0 30px 120px #0008}dialog::backdrop{background:#051112a8;backdrop-filter:blur(5px)}.modal-close{position:absolute;right:13px;top:9px;background:none;font-size:28px;color:#b5c9bf}dialog h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:600;font-size:48px;letter-spacing:.5px;margin:0 0 10px}dialog p{font-size:15px;line-height:1.55;color:#bdcbc1}dialog .eyebrow{font-size:11px;margin:0 0 12px}dialog .primary{width:100%;justify-content:center;margin-top:22px}dialog .secondary{background:#ffffff0c;border:1px solid #ffffff24;padding:14px;margin-top:10px;width:100%;font-size:14px}.control-list{display:grid;gap:13px;margin:26px 0}.control-list>div{display:flex;align-items:center;justify-content:space-between;font-size:14px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 0;border-bottom:1px solid #ffffff1c;font-size:15px}.setting-row input[type=range]{width:140px;accent-color:var(--lime)}.setting-row select{font:inherit;background:#1e3434;color:var(--white);border:1px solid #ffffff30;padding:8px}.setting-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--lime)}.result-score{font-family:'Barlow Condensed',Impact,sans-serif;font-size:80px;color:var(--lime);line-height:1;margin:15px 0}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.result-grid small{font-size:10px;letter-spacing:1px;display:block;color:#a1b4a8}.result-grid strong{font-family:'Barlow Condensed',Impact,sans-serif;display:block;font-size:28px;margin-top:5px}.loading{position:fixed;inset:0;background:#101919;z-index:100;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:25px;font-size:11px;letter-spacing:3px}.loading-line{height:2px;width:140px;background:linear-gradient(90deg,transparent,var(--lime),transparent);animation:load 1s infinite}.touch-controls{position:fixed;bottom:24px;left:20px;right:20px;z-index:8;display:none;justify-content:space-between;pointer-events:none}.touch-controls>div{display:flex;gap:10px}.touch-controls button{pointer-events:auto;touch-action:none;user-select:none;width:58px;height:58px;background:#0a202799;border:1px solid #ffffff55;border-radius:10px;font-size:16px;backdrop-filter:blur(5px)}.touch-controls .touch-gas{background:#ddff6a99;color:#10201e;font-weight:800}.touch-controls .touch-nitro{color:var(--lime)}body.playing .vignette{background:linear-gradient(0deg,#07151380,transparent 25%,transparent 85%,#07151366)}body.playing #topbar{display:none}body.boosting .vignette{box-shadow:inset 0 0 100px #9cff8425}.error-message{max-width:400px;text-align:center;font-size:16px;letter-spacing:0;line-height:1.6;padding:20px}@keyframes load{50%{opacity:.3}}
@media(min-width:1700px){.intro{top:20%}.setup{min-height:170px;padding:30px 0}.menu-footer{min-height:70px}}
@media(max-height:760px) and (min-width:901px){.topbar{padding-top:20px}.intro{top:17%}h1{font-size:clamp(62px,6.8vw,100px);margin:17px 0}.intro p{margin-bottom:20px;font-size:14px}.best-line{margin-top:17px}.setup{min-height:123px;padding:18px 0}.section-label{margin-bottom:10px}.menu-footer{min-height:44px}.scene-caption{top:36%}}
@media(max-width:1100px){.setup-section{padding:0 18px}.env{font-size:11px;padding:6px;gap:6px}.env-swatch{width:22px;height:28px}.segmented button{font-size:12px;padding:7px}.setup{grid-template-columns:1fr 1.35fr .85fr}.bike-picker strong{font-size:23px}.bike-picker{gap:2px}.bike-picker div>span{font-size:8px}.scene-caption{right:4%;top:40%}.scene-caption strong span{display:block;margin:0;font-size:9px}}
@media(max-width:800px){.topbar{padding:20px 5%}.edition{display:none}.top-actions{gap:7px}.icon-btn{width:36px;height:36px}.brand{font-size:17px;gap:8px}.brand-mark{width:28px;height:30px;font-size:27px}.menu{padding:0 5%}.intro{left:5%;top:16%}h1{font-size:clamp(60px,11vw,86px)}.intro p{font-size:14px;margin-bottom:22px}.eyebrow{font-size:10px}.enter-hint{display:none}.primary{padding:16px 21px;min-width:180px}.scene-caption{display:none}.setup{grid-template-columns:1fr 1fr;gap:20px;padding:18px 0;min-height:0}.setup-section{padding:0;border:0}.setup-section:first-child{grid-column:1/-1;border-bottom:1px solid var(--line);padding-bottom:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:7px}.mode-section .section-label{margin:0}.setup p{width:100%;margin:0}.setup-section:nth-child(2){padding-right:14px;border-right:1px solid var(--line)}.section-label{font-size:9px;letter-spacing:1.3px;margin-bottom:10px}.environment-options{gap:6px}.env{padding:5px;display:flex;justify-content:center;flex:1}.env>span:last-child{display:none}.env-swatch{width:100%;height:23px}.bike-picker strong{font-size:23px}.menu-footer{font-size:8px;min-height:44px}.menu-footer button{font-size:9px}.best-line{margin-top:17px}.vignette{background:linear-gradient(90deg,#081516cf,transparent),linear-gradient(0deg,#081516ed,transparent 75%)}.ride-stats{gap:25px}.ride-stats strong{font-size:30px}.hud-top{padding:20px 5%}.speed-panel strong{font-size:72px}.speed-panel{width:150px}.hud-bottom{bottom:105px}.nitro-panel{width:130px}.driving-hint{display:none}.touch-controls{display:flex}.speed-label{font-size:9px}.nitro-panel kbd{display:none}}
@media(pointer:coarse){.touch-controls{display:flex}.hud-bottom{bottom:105px}.driving-hint{display:none}.enter-hint{display:none}}
@media(max-height:520px){.topbar{padding:12px 4%}.intro{top:19%}h1{font-size:58px;margin:12px 0}.intro p,.best-line{display:none}.eyebrow{font-size:9px}.ride-row{margin-top:18px}.primary{padding:12px 18px;font-size:13px;min-width:170px}.setup{position:absolute;right:4%;top:26%;width:40%;display:flex;flex-direction:column;gap:12px;border:0;padding:15px;min-height:0}.setup-section{padding:0!important;border:0!important}.setup-section:first-child{display:block}.section-label{margin-bottom:6px!important}.setup p{display:none}.environment-options .env>span:last-child{display:block;font-size:10px}.env-swatch{width:18px;height:18px}.bike-picker strong{font-size:20px}.menu-footer{position:absolute;bottom:0;left:4%;right:4%}.scene-caption{display:none}.hud-top{padding-top:15px}.hud-bottom{bottom:80px}.speed-panel strong{font-size:60px}.ride-stats strong{font-size:27px}.touch-controls{bottom:12px}.touch-controls button{height:48px;width:55px}dialog{max-height:95vh;padding:24px;overflow:auto}dialog h2{font-size:36px}.result-score{font-size:50px}}
@media(max-width:800px) and (min-height:521px) and (max-height:720px){.intro{top:15%}h1{font-size:clamp(48px,8.5vw,65px);margin:17px 0}.intro p{font-size:13px;line-height:1.4;margin-bottom:15px}.intro .primary{padding:13px 22px}.best-line{display:none}.setup{gap:14px;padding:15px 0}.menu-footer{min-height:40px}}
@media(max-width:430px) and (min-height:721px){.intro{top:16%}h1{font-size:64px}.setup{gap:17px}.bike-picker strong{font-size:22px}.menu-footer>span{font-size:7px}}
.env{position:relative}.env[aria-pressed=true]::after{content:'';position:absolute;right:4px;bottom:3px;width:4px;height:4px;background:var(--lime)}
@media(max-width:800px) and (min-height:521px){.env{flex-direction:column;gap:5px;white-space:normal;line-height:1.1}.env>span:last-child{display:block;font-size:10px;text-align:center}.env-swatch{height:19px}.env[aria-pressed=true]::after{display:none}}

.beam-toggle{position:absolute;right:calc(4% + 58px);top:30px;display:flex;align-items:center;gap:9px;background:#13252d9c;border:1px solid #cee2ed40;border-radius:22px;padding:10px 13px;font-size:11px;letter-spacing:1px;color:#cfdfde;backdrop-filter:blur(8px)}.beam-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.beam-toggle[aria-pressed=true]{color:#b6e3ff;background:#27659370;border-color:#a1d9ff88}.beam-toggle kbd{padding:1px 4px;font-size:10px}@media(max-width:800px){.beam-toggle{top:76px;right:5%;font-size:10px;padding:8px 11px}.beam-toggle kbd{display:none}}@media(max-height:520px){.beam-toggle{top:18px;right:calc(4% + 52px);font-size:10px;padding:8px 11px}.beam-toggle span{display:none}}
.difficulty-row{display:flex;align-items:center;gap:12px;margin-top:12px}.difficulty-row .section-label{margin:0}.result-level{margin:14px 0 0;color:#bdc5be}@media(max-width:800px){.difficulty-row{width:100%;margin-top:4px}}

/* TabSpawn integration */
.brand-row{display:flex;align-items:center;gap:12px;min-width:0}
.ts-home{display:block;flex:none;line-height:0}
.ts-home svg{width:30px;height:30px;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.result-score .pts{font:14px Barlow,Arial,sans-serif}
.ts-rank{margin:6px 0 0;min-height:1.2em;color:var(--lime);font-size:.85rem;letter-spacing:.04em}
.ts-rank:empty{display:none}
@media(max-width:430px){.brand>span:not(.brand-mark){display:none}.brand-row{gap:10px}}