@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--ink:#111d29;--paper:#f7f3e9;--sun:#ffb566;--aqua:#4fd4cf;--line:rgba(255,255,255,.23)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#192734;color:var(--paper);font-family:'DM Sans',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}a{color:inherit;text-decoration:none}.hidden{display:none!important}#game,canvas{position:fixed;inset:0;width:100%;height:100%;display:block}#game{background:#92b7b8}#grain{position:fixed;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,rgba(15,27,37,.17),transparent 22%,transparent 65%,rgba(10,21,30,.18));opacity:.95}#topbar{position:fixed;left:0;right:0;top:0;height:82px;padding:0 clamp(20px,4vw,68px);display:flex;align-items:center;justify-content:space-between;z-index:12;border-bottom:1px solid rgba(255,255,255,.2);background:linear-gradient(180deg,rgba(5,16,23,.46),transparent);letter-spacing:.12em;font-size:11px;font-weight:800}.brand{display:flex;gap:13px;align-items:center;line-height:1.15}.brandMark{display:grid;place-items:center;width:39px;height:39px;border:2px solid var(--paper);border-radius:50%;font-family:Georgia,serif;font-size:22px;letter-spacing:-.08em}.brand small{display:block;color:var(--sun);font-size:9px;letter-spacing:.29em;margin-top:4px}.topActions{display:flex;align-items:center;gap:12px}.exit{margin-right:14px;font-size:10px}.exit:hover,.brand:hover{color:var(--sun)}.circleBtn{width:43px;height:43px;border:1px solid rgba(255,255,255,.38);border-radius:50%;background:rgba(14,24,34,.33);color:var(--paper);font-size:20px;backdrop-filter:blur(12px)}.circleBtn:hover{background:rgba(255,181,102,.25)}#loading{position:fixed;z-index:20;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#142431;font-size:11px;letter-spacing:.22em}#loading small{color:#8faab7;font-size:12px;letter-spacing:.03em}.loadRing{width:48px;height:48px;border-radius:50%;border:2px solid #415566;border-top-color:var(--sun);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.screen{position:fixed;inset:0;z-index:7}.screen:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,15,22,.89) 0%,rgba(7,18,27,.76) 30%,transparent 71%),linear-gradient(0deg,rgba(7,15,24,.65),transparent 27%)}#menu .menuCopy{position:absolute;left:clamp(24px,6vw,96px);top:50%;transform:translateY(-43%);max-width:660px}.eyebrow{display:flex;align-items:center;gap:12px;color:var(--sun);font-size:10px;font-weight:800;letter-spacing:.24em}.eyebrowLine{display:block;width:26px;height:2px;background:var(--sun)}.chapter{margin-left:18px;color:#c8d2ce;font-size:9px}h1,h2{margin:20px 0 18px;font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;line-height:.72;font-weight:900;font-size:clamp(96px,12vw,192px);letter-spacing:-.035em;text-shadow:0 8px 42px rgba(0,0,0,.17)}h1 em{font-style:normal;color:var(--sun)}.menuCopy p{font-size:clamp(16px,1.4vw,20px);font-weight:500;letter-spacing:.025em;margin:28px 0 31px}.startRow{display:flex;align-items:center;gap:22px}.primary{display:flex;align-items:center;justify-content:space-between;gap:45px;border:0;padding:19px 22px 19px 25px;min-width:246px;color:#18202a;background:var(--sun);font-size:11px;font-weight:900;letter-spacing:.12em;box-shadow:0 12px 34px rgba(0,0,0,.18);transition:transform .16s,background .16s}.primary span{font-size:19px}.primary:hover{background:#ffd49e;transform:translateY(-3px)}.primary:disabled{opacity:.55;cursor:wait}.timeHint{font-size:10px;font-weight:800;letter-spacing:.14em;color:#d7dcda}.menuCard{position:absolute;right:clamp(22px,6vw,95px);bottom:clamp(105px,13vh,150px);width:270px;padding:22px 23px;background:rgba(13,27,37,.62);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(17px)}.trackNum{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:56px;line-height:.8;color:var(--sun)}.trackNum span{font-size:18px;color:#cad5d3}.cardLine{height:1px;background:var(--line);margin:16px 0}.menuCard>b{font-size:13px;letter-spacing:.13em}.menuCard p{font-size:12px;line-height:1.6;color:#d6e0df}.chips{display:flex;flex-wrap:wrap;gap:5px}.chips span{font-size:8px;border:1px solid rgba(255,255,255,.3);padding:5px 7px;letter-spacing:.12em}.menuFooter{position:absolute;bottom:33px;left:clamp(24px,6vw,96px);right:clamp(24px,6vw,96px);display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.08em;color:#cad4d3}.menuFooter span{color:var(--sun);font-weight:900;margin-right:10px}#credit{position:fixed;z-index:12;bottom:6px;right:15px;font-size:8px;letter-spacing:.11em;opacity:.55}#credit a{text-decoration:underline}#hud{position:fixed;inset:0;z-index:6;pointer-events:none}.hudTop{position:absolute;top:106px;left:clamp(20px,4vw,66px);right:clamp(20px,4vw,66px);display:flex;align-items:flex-start;justify-content:space-between;text-shadow:0 2px 15px #162637}.hudTop>div{display:flex;flex-direction:column;gap:3px}.hudTop small,.speed small,.nitro small{font-size:10px;font-weight:800;letter-spacing:.16em}.lap b{font:800 32px 'Barlow Condensed',Impact,sans-serif}.lap b span{font-size:18px;opacity:.65}.time{align-items:center}.time b{font:700 36px 'Barlow Condensed',Impact,sans-serif;letter-spacing:.05em}.best{align-items:flex-end}.best b{font:700 28px 'Barlow Condensed',Impact,sans-serif}.speed{position:absolute;right:clamp(20px,4vw,66px);bottom:48px;display:flex;align-items:baseline;gap:9px}.speed span{font:900 clamp(70px,10vw,130px) 'Barlow Condensed',Impact,sans-serif;line-height:.8;letter-spacing:-.07em}.speedRule{position:absolute;bottom:-13px;right:0;width:230px;height:4px;background:var(--sun)}.nitro{position:absolute;left:clamp(20px,4vw,66px);bottom:48px;width:clamp(190px,22vw,310px)}.nitroLabel{display:flex;justify-content:space-between;font-size:12px;font-weight:900;letter-spacing:.16em}.nitroLabel strong{font-size:16px;color:var(--aqua)}.nitroBar{height:13px;border:2px solid rgba(240,247,240,.72);padding:2px;margin:8px 0}.nitroBar i{display:block;width:60%;height:100%;background:linear-gradient(90deg,#36b4b1,#9ef4df);box-shadow:0 0 12px rgba(59,216,203,.55);transition:width .13s}.nitro small{font-size:8px;color:#d7e6e2}#raceNote{position:absolute;top:25%;left:50%;transform:translateX(-50%);font:900 45px 'Barlow Condensed',Impact,sans-serif;color:var(--sun);text-shadow:0 4px 20px #10212b;letter-spacing:.13em;opacity:0;transition:opacity .18s}#raceNote.show{opacity:1}#countdown{position:fixed;z-index:9;left:50%;top:48%;transform:translate(-50%,-50%);font:900 clamp(140px,23vw,310px) 'Barlow Condensed',Impact,sans-serif;line-height:1;color:var(--sun);text-shadow:0 15px 50px #142337;pointer-events:none}#mobileControls{position:fixed;z-index:7;left:0;right:0;bottom:14px;display:none;justify-content:space-between;padding:0 20px;pointer-events:none;touch-action:none}#mobileControls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid rgba(255,255,255,.5);color:white;background:rgba(13,30,43,.45);backdrop-filter:blur(8px);font-weight:900;box-shadow:0 4px 20px #12253660}#mobileControls button.pressed{background:rgba(255,181,102,.8);color:#13212e}.steerControls,.actionControls{display:flex;gap:11px;align-items:flex-end}.steerControls button{width:76px;height:76px;border-radius:50%;font-size:50px;line-height:1}.actionControls button{width:77px;height:77px;border-radius:50%;font-size:12px;letter-spacing:.04em}#boost{border-color:rgba(106,245,222,.7)!important;color:#99efdc!important}#result,#paused{display:flex;align-items:center;justify-content:center}#result:before,#paused:before{background:rgba(7,16,24,.76);backdrop-filter:blur(9px)}.resultInner,.pauseInner{position:relative;text-align:center;padding:35px;max-width:720px;width:100%}.resultInner .eyebrow,.pauseInner .eyebrow{justify-content:center}.resultInner h2,.pauseInner h2{font-size:clamp(70px,11vw,134px);line-height:.75;margin:24px 0 20px}.medal{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;margin:0 auto 21px;border:3px solid #ffcf72;background:#b68438;font-size:42px;box-shadow:0 0 35px #ffb96655}.medal.silver{background:#657686;border-color:#c0d0df}.medal.bronze{background:#8b6a51;border-color:#bb9474}.resultStats{display:flex;gap:60px;justify-content:center;margin:20px 0 28px}.resultStats div{display:grid;gap:2px}.resultStats small{font-size:10px;letter-spacing:.2em;color:var(--sun)}.resultStats b{font:700 36px 'Barlow Condensed',Impact,sans-serif}.resultActions{display:flex;align-items:center;justify-content:center;gap:13px}.secondary{border:1px solid #d7e0df77;background:transparent;color:white;padding:20px 23px;font-size:11px;font-weight:900;letter-spacing:.1em}.pauseInner p{margin-bottom:27px}.pauseInner .primary,.pauseInner .secondary{margin:12px auto}.pauseInner .secondary{min-width:246px}#fatal{position:fixed;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);max-width:440px;padding:30px;background:#172638;border:1px solid #ffb566;color:#fff;text-align:center;line-height:1.6}
@media(max-width:1100px){.menuCard{display:none}.menuFooter{display:none}}@media(max-width:700px){#topbar{height:65px;padding:0 16px}.brand{font-size:9px}.brand small{font-size:7px}.brandMark{height:31px;width:31px;font-size:18px}.exit{font-size:9px;margin-right:1px}.topActions{gap:6px}.circleBtn{width:35px;height:35px;font-size:17px}#menu .menuCopy{left:25px;right:22px;top:49%;transform:translateY(-43%)}h1{font-size:clamp(76px,24vw,140px)}.eyebrow{font-size:9px}.chapter{display:none}.menuCopy p{font-size:14px}.startRow{display:block}.timeHint{display:block;margin-top:14px}.hudTop{top:73px;left:15px;right:15px}.hudTop small{font-size:8px}.lap b{font-size:21px}.time b{font-size:27px}.best b{font-size:18px}.nitro{left:15px;bottom:116px;width:150px}.speed{right:17px;bottom:119px}.speed span{font-size:67px}.speedRule{width:140px}.speed small{font-size:8px}#mobileControls:not(.hidden){display:flex}#credit{display:none}#raceNote{font-size:31px;top:29%}.resultInner h2{font-size:71px}.resultStats{gap:20px}.resultStats b{font-size:28px}}
@media(orientation:portrait) and (max-width:800px){#mobileControls{bottom:20px}.steerControls button,.actionControls button{width:64px;height:64px}#menu .menuCopy{top:46%}#result .resultInner{padding:20px}}
@media(max-height:560px){#menu .menuCopy{top:49%;transform:translateY(-32%)}h1{font-size:clamp(77px,11vw,145px);margin:14px 0 12px}.menuCopy p{margin:17px 0 19px}.menuCard{bottom:45px}.menuFooter{display:none}.hudTop{top:76px}.nitro,.speed{bottom:20px}#mobileControls{bottom:11px}}
/* Keep the full finish result visible below the navigation, including on short screens. */
#result{align-items:flex-start;overflow-y:auto;overscroll-behavior:contain}
#result .resultInner{margin:0 auto;padding:96px 20px 22px}
#result .resultInner h2{font-size:clamp(52px,8vw,90px);line-height:.77;margin:15px 0 16px}
#result .medal{width:62px;height:62px;font-size:32px;margin-bottom:12px}
#result .resultStats{margin:10px 0 19px}
#result .resultStats b{font-size:30px}
#result .resultActions .primary,#result .resultActions .secondary{padding-top:14px;padding-bottom:14px}
@media(max-width:700px){#result .resultInner{padding-top:78px}#result .resultInner h2{font-size:clamp(45px,12vw,71px)}#result .resultStats{gap:12px}#result .resultStats b{font-size:24px}#result .resultStats small{font-size:8px}#result .resultActions{flex-wrap:wrap}}
