:root{--lime:#d4ff43;--muted:#a9b1b6}*{box-sizing:border-box}body{margin:0;background:#101b23;color:white;font-family:Inter,Arial,sans-serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:700 11px Inter,Arial;letter-spacing:1px;cursor:pointer;color:inherit;border:0;background:none}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:5px}#world,.vignette{position:fixed;inset:0;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(90deg,rgba(7,15,22,.85),transparent 78%),linear-gradient(0deg,rgba(7,15,22,.95),transparent 45%)}header{position:relative;z-index:4;padding:29px 4%;display:flex;align-items:center;justify-content:space-between}.topright{margin-left:auto;display:flex;align-items:center;gap:25px}.online{font-size:9px;letter-spacing:1.4px;color:var(--lime)}#sound,#pause{border:1px solid #ffffff35;padding:12px 16px;border-radius:4px;font-size:9px}#menu{position:relative;z-index:2;padding:5vh 6% 0;max-width:1700px;margin:auto}.eyebrow{color:var(--lime);font-size:9px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:10px}.eyebrow i{height:6px;width:6px;background:var(--lime);border-radius:50%}h1{font:900 clamp(62px,7.4vw,120px)/.88 'Barlow Condensed','Arial Narrow',Arial,sans-serif;letter-spacing:-2px;margin:25px 0}h1 em{color:var(--lime);font-style:italic}#menu p{font-size:13px;color:#c1c8ce;line-height:1.9}.startrow{display:flex;gap:13px;margin-top:28px;align-items:center}.primary{background:var(--lime);color:#111b17;padding:19px 23px;border-radius:3px;min-width:210px;display:inline-flex;justify-content:space-between;gap:30px;font-size:11px;box-shadow:0 5px 35px #d4ff4318}.primary:hover{background:#e3ff8c;transform:translateY(-1px)}.primary span{font-size:19px;line-height:10px}.round{border:1px solid #ffffff50;width:46px;height:46px;border-radius:50%;font-size:16px}.micro{font-size:7px;letter-spacing:1.6px;color:#8e9b9f;margin-top:18px}.hero-spec{position:absolute;right:6%;top:33vh;text-align:right}.hero-spec span{display:block;font-size:8px;letter-spacing:2px;color:#c4c9cd;margin-bottom:8px}.hero-spec b{color:white;font-size:14px;margin-left:8px}.hero-spec strong{font:700 46px 'Barlow Condensed',Arial}.hero-spec strong small{font:500 8px Inter;margin-left:8px}.journey{margin-top:7vh}.sectionhead{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.8px;margin-bottom:14px}.sectionhead button{color:#b6bec2;font-size:8px}.regions{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.region{padding:19px;text-align:left;position:relative;background:linear-gradient(125deg,#263534dd,#16242cdd);border:1px solid #ffffff1a;border-radius:5px;min-height:102px;overflow:hidden}.region:after{content:'';position:absolute;right:-15px;top:30px;width:130px;height:100px;border:1px solid #ffffff18;transform:rotate(-28deg);box-shadow:0 -12px #ffffff05,0 -24px #ffffff04}.region.active{border-color:#d4ff4366;background:linear-gradient(125deg,#57623766,#15272bdd)}.region small{display:block;color:#acb5bb;font-size:8px;letter-spacing:1px;margin-bottom:12px}.region b{font-size:13px;letter-spacing:.3px}.region .arrow{position:absolute;right:17px;top:18px;color:var(--lime)}.region p{font-size:8px!important;margin:7px 0 0;color:#a0afb5!important}footer{position:fixed;bottom:20px;left:4%;right:4%;display:flex;justify-content:space-between;font-size:7px;letter-spacing:1.6px;color:#839198;z-index:2}[hidden]{display:none!important}#hud{position:fixed;inset:110px 5% 35px;pointer-events:none;z-index:3}.hudtop{display:flex;justify-content:space-between}#hud small{font-size:9px;letter-spacing:2px;color:#d2d9df}#time{font:700 65px 'Barlow Condensed',Arial;margin:8px 0}#time span{font:700 10px Inter;color:#b5c0c8}.hudright{text-align:right;width:200px}.hudright strong{display:block;font-size:14px;margin:15px 0}.track,.energy>div{background:#ffffff25;height:4px;border-radius:3px;overflow:hidden}.track i,.energy i{height:100%;display:block;background:var(--lime);width:0}.hudbottom{position:absolute;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;width:100%}.speed strong{font:800 85px/.9 'Barlow Condensed',Arial}.speed small{margin-left:9px}.energy{width:260px}.energy small{display:flex;justify-content:space-between;margin-bottom:12px}.energy small span{color:var(--lime)}.energy>div{height:7px}.energy p{font-size:8px;letter-spacing:1px;color:#b5c1c7}#toast{position:absolute;top:28%;left:0;right:0;text-align:center;font:700 28px 'Barlow Condensed',Arial;color:var(--lime);text-shadow:0 2px 12px #000}.touch{display:none}#modal{position:fixed;z-index:10;inset:0;background:#071119d9;backdrop-filter:blur(15px);display:grid;place-items:center;padding:20px}#modal article{background:#15232b;border:1px solid #ffffff23;border-radius:12px;padding:32px;max-width:650px;width:100%;max-height:85dvh;overflow:auto}#modal h2{font:800 45px/1 'Barlow Condensed',Arial;margin:18px 0}#modalBody{font-size:13px;color:#becbd0;line-height:1.9}#modalActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.secondary{padding:15px;border:1px solid #ffffff35;border-radius:3px}.levelgrid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}.levelgrid button{background:#ffffff0c;border:1px solid #ffffff20;padding:9px 0;border-radius:3px;font-size:10px}.levelgrid button.won{color:var(--lime);border-color:#d4ff4360}.worldtitle{font-size:10px;letter-spacing:1px;margin:14px 0 6px;color:white}.stats{display:flex;gap:25px;margin:22px 0}.stats b{display:block;font-size:28px;color:white}.stats small{font-size:9px}
@media(min-height:850px){#menu{padding-top:8vh}.journey{margin-top:10vh}}@media(max-width:700px){header{padding:19px 5%}.online{display:none}#sound,#pause{font-size:8px;padding:10px}.topright{gap:7px}#menu{padding:6vh 6% 0}h1{font-size:clamp(62px,15vw,96px)}#menu p{font-size:12px}.hero-spec{display:none}.journey{margin-top:6vh}.regions{grid-template-columns:repeat(2,1fr);gap:8px}.region{min-height:82px;padding:13px}.region b{font-size:11px}.region small{margin-bottom:8px}.region p{display:none}.micro{font-size:6px}.sectionhead{font-size:7px;letter-spacing:1px}.sectionhead button{font-size:7px}footer{bottom:12px;font-size:6px}footer span:nth-child(2){display:none}#hud{inset:95px 6% 25px}.hudright{width:130px}#time{font-size:50px}.hudbottom{bottom:95px}.speed strong{font-size:65px}.energy{width:145px}.energy small{font-size:7px!important;letter-spacing:1px!important}.energy p{display:none}.touch{display:flex;position:absolute;bottom:0;width:100%;gap:10px;pointer-events:auto}.touch button{height:62px;width:66px;background:#182832b3;border:1px solid #ffffff40;border-radius:8px;font-size:35px;touch-action:none;user-select:none}.touch #boost{margin-left:auto;width:130px;font-size:11px;background:#d4ff43dd;color:#101c22}.touch #boost b{font-size:23px;margin-left:10px}#modal article{padding:24px}.levelgrid{gap:4px}}@media(max-height:650px) and (min-width:701px){#menu{padding-top:1vh}h1{font-size:65px;margin:15px 0}.journey{margin-top:3vh}.region{min-height:80px;padding:12px}.startrow{margin-top:15px}footer{bottom:10px}}@media(pointer:coarse) and (min-width:701px){.touch{display:flex;position:absolute;bottom:0;width:100%;gap:12px;pointer-events:auto}.touch button{padding:15px 25px;border:1px solid #ffffff50;background:#15232bcc;border-radius:7px;touch-action:none}.touch #boost{margin-left:auto;background:var(--lime);color:#15232b}.hudbottom{bottom:65px}}

.touch #jump{margin-left:auto;min-width:85px;width:105px;font-size:10px;background:#86e7ffdf;color:#101c22}.touch #jump b{font-size:23px;margin-left:6px}.touch #jump:disabled{opacity:.5}.touch #jump.airborne{opacity:1;background:#d4ff43}.touch #boost{margin-left:0}.touch button{transition:background .15s,opacity .15s}@media(max-width:700px){.touch{gap:7px}.touch #left,.touch #right{width:44px;min-width:38px}.touch #jump,.touch #boost{width:calc((100% - 109px)/2);min-width:0;font-size:9px}.touch #jump b,.touch #boost b{font-size:19px;margin-left:3px}.energy p{max-width:320px}}

body.driving .vignette{background:linear-gradient(0deg,#07101975,transparent 30%,transparent 80%,#07101950)}.sectionhead>div{display:flex;gap:15px}.sectionhead #landscape{color:var(--lime)}.scenerychoices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}.scenerychoice{text-align:left;border:1px solid #ffffff25;background:linear-gradient(130deg,#263e42,#172830);padding:17px;border-radius:6px}.scenerychoice.selected{border-color:var(--lime)}.scenerychoice b{display:block;color:white;font-size:11px}.scenerychoice small{display:block;color:#afc3c7;font-size:9px;margin-top:9px;letter-spacing:0}.scenerychoice:hover{background:#354d44}@media(max-width:700px){.sectionhead>div{gap:6px}.sectionhead{letter-spacing:.5px}.sectionhead button{font-size:6px}.scenerychoice{padding:12px}.scenerychoice b{font-size:10px}}

.regions{grid-template-columns:repeat(3,1fr)}.region{min-height:80px;padding:13px 17px}.region small{margin-bottom:8px}.journey{margin-top:4vh}.levelgrid{grid-template-columns:repeat(12,1fr)}.levelgrid button{padding:8px 0}.levelgrid button small{display:block;font-size:8px;letter-spacing:0;margin-top:4px;opacity:.65}.levelgrid button.nightlevel{background:#1d2440}.levelgrid button:disabled{opacity:.32;cursor:default}.missionpanel{position:absolute;top:107px;left:0;max-width:530px;padding:10px 13px;border-left:2px solid var(--lime);background:#0c1727aa;border-radius:0 4px 4px 0}.missionpanel strong{font-size:11px;color:var(--lime);letter-spacing:1.5px}.missionpanel p{font-size:10px;color:#e1e9ee;line-height:1.5;margin:7px 0 0}.timechoices{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.timechoices .selected{border-color:var(--lime);color:var(--lime)}body:not(.driving){overflow-y:auto}#menu{padding-bottom:65px}@media(max-width:700px){.regions{grid-template-columns:repeat(2,1fr)}.journey{margin-top:4vh}.region{min-height:68px;padding:11px}.region small{font-size:6px}.region b{font-size:10px}.missionpanel{top:90px;max-width:100%;padding:8px 10px}.missionpanel strong{font-size:9px}.missionpanel p{font-size:8px}.levelgrid{grid-template-columns:repeat(6,1fr)}#toast{top:35%;font-size:22px;line-height:1.3}.timechoices .secondary{font-size:9px;padding:12px}}

.testlevels{display:flex;align-items:center;gap:10px;margin-top:17px;flex-wrap:wrap}.testlevels>span{font-size:7px;letter-spacing:1.5px;color:#a5b7bc}.testlevels button{font-size:9px;padding:12px 16px;border-color:#d4ff4366;background:#15232bc9;color:var(--lime)}.testlevels button:hover{background:#314338}@media(max-width:700px){.testlevels{gap:8px;margin-top:14px}.testlevels>span{font-size:6px}.testlevels button{padding:11px 12px;font-size:8px}}

/* Keep transient messages in the upper HUD, clear of the road ahead. */
#toast{position:fixed;top:100px;left:26%;right:26%;font-size:20px;line-height:1.25;pointer-events:none;text-wrap:balance}
@media(max-width:700px){#toast{top:76px;left:6%;right:6%;font-size:14px;line-height:1.25}#hud{top:130px}.missionpanel{top:84px}}

.energy .jumpstatus{display:block;font-size:9px!important;letter-spacing:.6px!important;margin:9px 0 0;color:var(--lime)}@media(max-width:700px){.energy .jumpstatus{font-size:7px!important;line-height:1.4;letter-spacing:0!important}}

/* Brake pedal: five controls fit on small phones. */
.touch #brake{min-width:0;width:90px;font-size:10px;background:#a93b3cdd;border:1px solid #ff9289;color:white}.touch #brake b{font-size:23px}.touch #brake.pressed{background:#ff6558;box-shadow:0 0 16px #ff655866;transform:translateY(2px)}
@media(max-width:700px){.touch{gap:6px}.touch #left,.touch #right{flex:0 0 38px;width:38px;min-width:38px;padding:0}.touch #brake,.touch #jump,.touch #boost{flex:1 1 0;width:0;min-width:0;margin-left:0;padding:0 2px;font-size:8px;letter-spacing:0}.touch #brake b,.touch #jump b,.touch #boost b{display:block;font-size:20px;margin:2px 0 0}}

#energybar{transition:background-color .2s ease}

/* Keep the mobile mission card directly below the header, outside the road view. */
@media(max-width:700px){
 header{padding-top:calc(19px + env(safe-area-inset-top,0px))}
 .missionpanel{position:fixed;top:calc(64px + env(safe-area-inset-top,0px));left:6%;right:6%;max-width:none;padding:6px 9px}
 .missionpanel strong{font-size:9px;line-height:1.2}
 .missionpanel p{font-size:8px;line-height:1.35;margin:3px 0 0}
 #toast{top:calc(118px + env(safe-area-inset-top,0px));font-size:11px;line-height:1.2}
 #hud{top:calc(150px + env(safe-area-inset-top,0px))}
}

/* Compact race results keep all actions visible on small screens. */
#modal.result-dialog{padding:12px;padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
#modal.result-dialog article{max-width:560px;max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:20px}
#modal.result-dialog h2{font-size:clamp(25px,5vw,36px);margin:10px 0;line-height:1.05}
.result-stars{font-size:28px;line-height:1.1;color:var(--lime);letter-spacing:7px}
.result-dialog #modalBody{font-size:12px;line-height:1.4}
.result-dialog #modalBody>p{margin:8px 0 0}
.result-dialog .stats{gap:16px;margin:12px 0}
.result-dialog .stats b{font-size:24px;line-height:1.2}
.result-dialog .stats small{font-size:8px}
.result-dialog #modalActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.result-dialog #modalActions button{min-width:0;min-height:38px;padding:10px 8px;font-size:9px;letter-spacing:.5px;justify-content:center}
@media(max-width:700px){#modal.result-dialog article{padding:16px}.result-dialog #modalTag{font-size:8px;letter-spacing:1px}.result-dialog #modalActions button{font-size:8px;letter-spacing:0}}
@media(max-height:500px){#modal.result-dialog article{padding:12px 16px}#modal.result-dialog h2{font-size:24px;margin:7px 0}.result-stars{font-size:22px}.result-dialog .stats{margin:7px 0}.result-dialog .stats b{font-size:20px}.result-dialog #modalBody{font-size:11px;line-height:1.3}.result-dialog #modalActions{margin-top:9px;gap:6px}.result-dialog #modalActions button{min-height:32px;padding:7px}}

@media(max-width:700px){.touch #left,.touch #right{flex:0 0 44px;width:44px;min-width:44px}}

#fullscreen{border:1px solid #ffffff35;padding:12px 16px;border-radius:4px;font-size:9px;white-space:nowrap}
#fullscreen[aria-pressed="true"]{border-color:var(--lime);color:var(--lime)}
#fullscreen:disabled{opacity:.6}
@media(max-width:700px){#fullscreen{font-size:8px;padding:10px 8px}.topright{gap:6px}}

/* Small persistent logo in the shared menu/game header. */
.header-logo{flex:0 0 auto;width:140px;line-height:0;margin-right:12px;pointer-events:none}
.header-logo img{display:block;width:100%;height:auto}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media(max-width:700px){header{padding-left:4%;padding-right:4%}.header-logo{width:82px;margin-right:6px}.topright{gap:5px}#fullscreen{font-size:0;min-width:32px;padding:7px}#fullscreen::before{content:'⛶';font-size:17px}#sound,#pause{padding:9px 6px;font-size:8px}}

#language{font:700 10px system-ui;color:#edf3f5;background:#182635;border:1px solid #ffffff40;border-radius:4px;padding:9px 4px;max-width:72px}.guide-link{margin:10px 0!important;font-size:11px!important}.guide-link a{color:var(--lime);text-decoration:none}
@media(max-width:700px){.header-logo{width:70px;margin-right:4px}.topright{gap:4px}#language{width:49px;font-size:9px;padding:8px 1px}#sound,#pause{font-size:0;min-width:29px;padding:8px 5px}#sound::before{content:'♫';font-size:15px}#pause::before{content:'Ⅱ';font-size:15px}#fullscreen{min-width:29px;padding:6px}.hudright{max-width:42%}.energy small span{max-width:65%;text-align:right}.result-dialog #modalActions button{overflow-wrap:anywhere}}
