@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Barlow:wght@400;500;600;700;800&display=swap');
:root{--orange:#ff623c;--white:#f2f1e9;--muted:#8d9b9f;--line:#ffffff26;--panel:#0a171bd9;--cyan:#80e9e0}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#09151c;color:var(--white);font-family:Barlow,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}button{border:0}#world,#fx,.screen,.vignette{position:absolute;inset:0;width:100%;height:100%}#fx{pointer-events:none}.vignette{pointer-events:none;background:linear-gradient(90deg,#07131be8 0%,#07131b88 32%,transparent 64%),linear-gradient(0deg,#07131be8 0%,transparent 52%)}body.racing .vignette{background:radial-gradient(ellipse,transparent 45%,#020a124d)}.screen{z-index:2}header{height:105px;margin:0 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:27px;font-weight:800;letter-spacing:1.2px;text-decoration:none;color:var(--white);position:relative;padding-left:49px}.brand>span:not(.brand-icon){font-weight:400}.brand-icon{position:absolute;left:0;top:-5px;color:var(--orange);font-size:38px;letter-spacing:-14px;transform:skew(-12deg)}.brand small{font:9px Barlow,Arial,sans-serif;letter-spacing:3.4px;display:block;margin-top:3px}.header-right{display:flex;gap:22px;align-items:center}.status{font-size:10px;letter-spacing:1.5px;color:#c5d4d4}.status i{display:inline-block;width:5px;height:5px;border-radius:100%;background:var(--cyan);margin-right:8px;box-shadow:0 0 12px var(--cyan)}.icon-button{font-size:18px;background:transparent;color:#c8d0cd;border:1px solid var(--line);min-width:32px;height:32px}.sound-state{font-size:9px}.garage{height:calc(100% - 153px);position:relative;margin:0 4.5%;max-height:1000px}.intro{position:absolute;top:5%;left:0}.eyebrow{font-size:10px;letter-spacing:2.5px;display:flex;align-items:center;gap:12px;color:#c4cece}.dash{height:2px;width:28px;background:var(--orange)}h1{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-size:clamp(64px,7.5vw,112px);line-height:.88;letter-spacing:-1.3px;font-weight:800;margin:24px 0 20px;font-style:italic}h1 em{color:var(--orange);font-style:inherit}.intro p{font-size:12px;line-height:1.7;color:#aebec2}.mode-switch{display:flex;margin-top:26px;border:1px solid #65828a66;width:330px;max-width:100%;padding:4px;gap:4px;background:#07171b88}.mode-switch button{background:transparent;color:#9baeb2;font-size:10px;font-weight:700;letter-spacing:1px;padding:12px 14px;flex:1;white-space:nowrap}.mode-switch .active{background:var(--white);color:#12242c}.mode-switch span{background:#ffffff1c;padding:2px 3px;margin-left:6px;font-size:9px}.mode-switch .active span{background:#12242c1c}.ship-select{position:absolute;right:0;top:8%;width:264px;background:linear-gradient(90deg,transparent,#081a20a6);padding:0 0 18px 20px}.ship-topline{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.6px;color:#b0c3c7;border-bottom:1px solid var(--line);padding-bottom:17px}.ship-topline span:last-child{color:var(--orange)}.ship-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px}.arrow{background:transparent;border:1px solid #a0bdc244;height:30px;width:30px;font-size:22px}.arrow:hover{background:var(--orange);color:#0a171b}.ship-class{font-size:8px;letter-spacing:1.8px;color:#9fb6bc}.ship-row h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:600;font-size:44px;letter-spacing:1px;margin:3px 0 0}.ship-select p{font-size:11px;color:#9bb1b8;line-height:1.6;margin:20px 0}.stats>div{display:grid;grid-template-columns:100px 1fr;align-items:center;font-size:9px;letter-spacing:1px;margin-top:12px;color:#c5cfcf}.statbar{height:3px;background:#67818b40}.statbar i{display:block;height:100%;background:var(--white)}.hero-label{position:absolute;right:29%;top:54%;display:flex;align-items:center;gap:13px;font-size:9px;letter-spacing:1.5px;color:#a9bec2}.hero-label>span:first-child{font:600 20px 'Barlow Condensed',Arial}.hero-line{width:55px;height:1px;background:#91acac88}.hero-label b{font-size:8px;color:var(--cyan);font-weight:400}.race-select{position:absolute;bottom:18px;left:0;right:0}.section-head{display:flex;justify-content:space-between;margin-bottom:13px;font-size:9px;letter-spacing:1.6px;color:#a5b9be}.section-head span:first-child{color:#e1e9e7}.track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.track-card{position:relative;text-align:left;height:115px;overflow:hidden;background:#11262fbb;border:1px solid #8aabb431;padding:16px 18px;transition:background .2s,border-color .2s}.track-card:hover{background:#1e3841dd}.track-card.selected{border-color:var(--orange);background:#223039e6}.track-card.selected:after{content:'✓';position:absolute;right:12px;top:10px;background:var(--orange);color:#131c21;font-size:11px;width:18px;height:18px;text-align:center;line-height:18px}.track-num{font:14px 'Barlow Condensed',Arial;color:var(--orange);display:block;margin-bottom:8px}.track-card h3{margin:0;font:600 24px 'Barlow Condensed',Impact,sans-serif;letter-spacing:.8px}.track-card p{margin:5px 0 0;font-size:9px;letter-spacing:1px;color:#91a8b0}.track-card svg{position:absolute;right:15px;top:25px;width:36%;height:75px;opacity:.55;filter:drop-shadow(0 0 5px #72d1d744)}.track-card .track-copy{position:relative;z-index:1}.launch-row{margin-top:18px;display:flex;justify-content:space-between;align-items:center}.hint{display:flex;gap:10px;align-items:center;font-size:8px;color:#9cb1b8;letter-spacing:1px}.key{padding:6px 8px;border:1px solid #748e9855;color:#d6e2df;font-size:9px}.hint .key:nth-of-type(3){margin-left:15px}.primary{background:var(--orange);color:#101f25;font-weight:800;font-size:12px;letter-spacing:1.7px;padding:20px 24px;min-width:280px;display:flex;justify-content:space-between;gap:40px;align-items:center;transition:background .15s,transform .15s}.primary span{font-size:22px;line-height:10px}.primary:hover{background:#ff805c;transform:translateY(-2px)}footer{height:48px;margin:0 4.5%;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.3px;color:#6c8993}footer b{color:var(--orange);margin:0 7px;font-weight:400}.hidden{display:none!important}#hud{padding:32px 4%;pointer-events:none;text-shadow:0 1px 6px #0007}.hud-top{display:flex;align-items:flex-start;justify-content:space-between}.label{font-size:10px;letter-spacing:2px;color:#bdd0d4}.hud-top h3{font:600 28px 'Barlow Condensed',Impact,sans-serif;margin:7px 0}.lap-box{text-align:center}.lap-box strong,.position-box strong{display:block;font:700 55px 'Barlow Condensed',Impact,sans-serif;line-height:1.1}.lap-box small,.position-box small{font-size:23px;color:#9ab1b7}.time-box{text-align:right;padding-right:60px;position:relative}.time-box strong{display:block;font:500 28px 'Barlow Condensed',Impact,sans-serif;font-variant-numeric:tabular-nums;margin-top:7px}.pause-button{position:absolute;right:0;top:0;background:#09232a80;border:1px solid #94bdc566;padding:8px 12px;pointer-events:auto}.position-box{position:absolute;top:165px}.position-box strong{color:var(--orange);font-size:76px}#leaderboard{margin-top:15px;font-size:10px;letter-spacing:1px}#leaderboard>div{margin:10px 0;display:flex;gap:10px;align-items:center}#leaderboard i{height:5px;width:5px;background:white;display:inline-block}#leaderboard .you{color:var(--orange)}.hud-bottom{position:absolute;bottom:60px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:flex-end}.map-box{text-align:center;font-size:9px;letter-spacing:1px;color:#c5d8db}.map-box canvas{display:block}.speed-box{width:250px}.speed-number{display:flex;align-items:baseline;gap:10px;justify-content:flex-end}.speed-number strong{font:italic 700 86px 'Barlow Condensed',Impact,sans-serif;line-height:1;font-variant-numeric:tabular-nums}.speed-number>span{font-size:11px;color:#b5d1d5}.speed-meter{height:3px;background:#819ba44d;margin-top:12px}.speed-meter i{height:100%;display:block;background:#e9f1e9;width:0}.boost-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;margin:15px 0 8px;color:var(--cyan)}.boost-label small{color:#9ab1b7;font-size:8px;letter-spacing:0}.boost-meter{height:7px;background:#15383d}.boost-meter i{height:100%;display:block;background:var(--cyan);box-shadow:0 0 18px #43e7df55;transform-origin:left}.boosting .speed-number{color:var(--cyan)}.boosting .vignette{box-shadow:inset 0 0 110px #00e5e524}.race-message{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);font:italic 600 25px 'Barlow Condensed',Impact,sans-serif;letter-spacing:3px;color:var(--cyan);white-space:nowrap}#countdown{position:absolute;inset:35% 0 auto;text-align:center;font:italic 800 140px 'Barlow Condensed',Impact,sans-serif;color:var(--white);text-shadow:0 0 35px #74fff977}.race-controls{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1px;color:#b7cdd4aa}.modal{position:absolute;inset:0;z-index:10;background:#041017c9;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:25px}.modal-card{width:520px;max-width:100%;max-height:90vh;overflow:auto;background:#0d222b;border:1px solid #88aeb344;padding:34px}.modal-card .eyebrow{color:var(--orange)}.modal-card h2{font:italic 700 52px 'Barlow Condensed',Impact,sans-serif;margin:18px 0 10px;line-height:1}.modal-card p{font-size:13px;line-height:1.7;color:#b0c4cb}.modal-card .primary{width:100%;margin-top:24px}.secondary{width:100%;background:transparent;border:1px solid #7e9ca555;padding:14px;margin-top:10px;font-size:11px;letter-spacing:1px}.control-table{display:grid;grid-template-columns:130px 1fr;gap:14px;font-size:12px;margin:25px 0;color:#becfd2}.control-table b{font-size:11px;color:var(--white)}.results-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:12px}.results-table th{text-align:left;color:#849fa8;font-size:9px;letter-spacing:1px;font-weight:400;padding:10px 6px;border-bottom:1px solid var(--line)}.results-table td{padding:10px 6px;border-bottom:1px solid #ffffff0b}.results-table .you{background:#ff623c15;color:var(--orange)}.result-stats{display:flex;gap:30px;margin-top:20px}.result-stats strong{display:block;font:500 28px 'Barlow Condensed',Impact,sans-serif;margin-top:4px}#touch-controls{position:absolute;z-index:5;bottom:15px;left:15px;right:15px;display:flex;justify-content:space-between;pointer-events:none}#touch-controls>div{display:flex;gap:8px}#touch-controls button{pointer-events:auto;touch-action:none;background:#10343ac0;border:1px solid #79d9d588;padding:18px 14px;user-select:none;font-size:12px}#unsupported{position:fixed;inset:0;background:#0b1e28;display:grid;place-items:center;text-align:center;padding:30px;z-index:100}@media(min-height:900px){.intro{top:8%}.ship-select{top:13%}.race-select{bottom:35px}.track-card{height:135px}}@media(max-height:750px) and (min-width:801px){header{height:75px}.garage{height:calc(100% - 110px)}footer{height:35px}.intro{top:5%}h1{font-size:80px;margin:20px 0 15px}.intro p{font-size:11px}.mode-switch{margin-top:15px}.track-card{height:100px;padding:12px 16px}.track-card svg{top:15px;height:65px}.track-num{margin-bottom:4px}.race-select{bottom:12px}.primary{padding:16px 24px}.launch-row{margin-top:12px}.ship-select{top:9%}.hero-label{top:51%}}@media(max-width:800px){header{margin:0 5%;height:75px}.brand{font-size:22px;padding-left:38px}.brand small{font-size:7px;letter-spacing:2.5px}.brand-icon{font-size:31px}.header-right{gap:8px}.status{display:none}.garage{margin:0 5%;height:calc(100% - 110px)}.intro{top:4%}h1{font-size:65px;line-height:.9;margin-top:17px}.intro p{font-size:11px;margin:14px 0}.eyebrow{font-size:8px;letter-spacing:2px}.mode-switch{width:280px;margin-top:18px}.mode-switch button{font-size:9px;padding:10px}.ship-select{top:9%;right:0;width:200px;padding-left:10px}.ship-row h2{font-size:34px}.ship-class{font-size:7px}.ship-select p{font-size:10px}.stats>div{font-size:8px;grid-template-columns:90px 1fr}.hero-label{display:none}.section-head{font-size:8px;letter-spacing:.7px}.track-grid{gap:8px}.track-card{height:105px;padding:12px}.track-card h3{font-size:19px}.track-card p{font-size:7px;letter-spacing:.5px}.track-card svg{opacity:.2;width:65%;right:-10px}.hint{gap:5px;font-size:7px}.hint .key:nth-of-type(3){margin-left:6px}.primary{min-width:230px;padding:18px;font-size:10px}.track-num{font-size:12px}.race-select{bottom:15px}footer{height:35px;margin:0 5%;font-size:7px}footer span:last-child{display:none}.hud-top h3{font-size:23px}.time-box{padding-right:42px}.time-box strong{font-size:24px}.lap-box strong{font-size:42px}.label{font-size:8px}.position-box{top:125px}.position-box strong{font-size:58px}.hud-bottom{bottom:55px}.speed-box{width:180px}.speed-number strong{font-size:66px}.map-box canvas{width:135px;height:115px}.race-controls{font-size:7px}.race-message{font-size:20px}}
@media(max-width:520px){.brand{font-size:20px}.brand small{font-size:6px}.intro{top:3%}h1{font-size:57px}.intro p{display:none}.ship-select{top:8%;width:150px}.ship-select p{display:none}.ship-topline{font-size:7px;letter-spacing:.5px}.ship-row{gap:5px;margin-top:14px}.ship-row h2{font-size:29px}.ship-class{font-size:6px;letter-spacing:.5px}.arrow{height:24px;width:24px;font-size:18px}.stats{margin-top:18px}.stats>div{grid-template-columns:76px 1fr;font-size:7px;letter-spacing:0;margin-top:10px}.intro .eyebrow{font-size:7px;letter-spacing:1px}.mode-switch{width:100%;max-width:250px;margin-top:22px}.mode-switch button{font-size:8px;padding:9px}.race-select{bottom:10px}.track-grid{gap:6px}.track-card{height:115px;padding:11px 8px}.track-card h3{font-size:19px;line-height:1.1;max-width:80px}.track-card p{font-size:7px;line-height:1.5;margin-top:8px}.track-card.selected:after{width:14px;height:14px;line-height:14px;right:6px;top:6px;font-size:9px}.track-card svg{top:25px;right:-22px;width:100%;opacity:.15}.section-head span:last-child{font-size:6px;letter-spacing:0}.launch-row{margin-top:12px}.hint{display:none}.primary{width:100%;padding:18px}.lap-box{position:absolute;top:105px;right:5%}.position-box{top:110px}.time-box strong{font-size:22px}.hud-top h3{font-size:20px}#leaderboard{font-size:8px}.speed-box{width:150px}.speed-number strong{font-size:60px}.map-box canvas{width:115px;height:100px}.map-box>span{font-size:7px}.race-controls{display:none}body.touch .hud-bottom{bottom:100px}.modal-card{padding:25px}.modal-card h2{font-size:43px}.hero-label{display:none}footer{font-size:6px;letter-spacing:.8px}}@media(max-height:650px) and (max-width:520px){h1{font-size:43px;margin:10px 0}.mode-switch{margin-top:12px;max-width:205px}.ship-select{top:4%;width:135px}.stats{margin-top:10px}.track-card{height:95px}.track-card h3{font-size:16px}.ship-topline{padding-bottom:10px}.ship-row{margin-top:10px}.section-head{margin-bottom:9px}.track-card p{margin-top:4px}.primary{padding:15px}}
@media(max-width:380px){h1{font-size:46px}.ship-select{width:125px;top:7%}.ship-row h2{font-size:23px}.ship-class{font-size:5px}.arrow{width:21px;height:23px}.stats>div{grid-template-columns:66px 1fr;font-size:6px}.mode-switch{max-width:235px}.track-card h3{font-size:17px}.track-card p{font-size:6px}}

/* Sound stays accessible during a race as well as in the garage. */
.race-sound-button{position:absolute;right:45px;top:0;background:#09232a80;border:1px solid #94bdc566;width:36px;height:36px;font-size:20px;pointer-events:auto}
.time-box{padding-right:100px}
body.racing .vignette{background:radial-gradient(ellipse,transparent 60%,#07041930)}
@media(max-width:800px){.time-box{padding-right:82px}.race-sound-button{right:40px;width:32px;height:34px}}
@media(max-width:520px){.time-box{padding-right:0;padding-top:43px}.race-sound-button{right:40px}.time-box .label{display:none}.time-box strong{margin-top:0}}

.music-credit{font-size:8px;letter-spacing:1.2px;color:#b2e6df;margin-top:5px}
@media(max-width:520px){.music-credit{font-size:6px;letter-spacing:.6px;max-width:185px}}

/* Hull abilities remain visible in the narrow selection panel. */
#ship-description b{display:block;color:var(--cyan);font-size:9px;letter-spacing:1.2px;margin-bottom:5px;font-weight:600}
#ship-description span{display:block}
.ship-traits{display:flex;justify-content:space-between;gap:8px;margin-top:16px;padding-top:11px;border-top:1px solid var(--line);font-size:7px;letter-spacing:.7px;color:#99b7bf}
.ship-traits b{display:block;font:500 16px 'Barlow Condensed',Arial;color:var(--white);margin-top:4px}
@media(max-height:750px) and (min-width:801px){.ship-select p{margin:11px 0}.ship-traits{margin-top:12px;padding-top:8px}}
@media(max-width:800px){#ship-description b{font-size:8px}.ship-traits{font-size:6px;letter-spacing:.3px;margin-top:12px}.ship-traits b{font-size:14px}}
@media(max-width:520px){#ship-description{display:block;margin:12px 0 0}#ship-description b{font-size:7px;letter-spacing:.5px}#ship-description span{display:none}.ship-select .stats{margin-top:12px}.ship-traits{font-size:5px;gap:4px;margin-top:12px;padding-top:8px}.ship-traits b{font-size:13px}}
@media(max-height:650px) and (max-width:520px){.ship-traits{margin-top:8px;padding-top:5px}.ship-select .stats{margin-top:8px}#ship-description{margin-top:8px}.ship-traits b{font-size:11px}}
/* Cockpit controls: illuminated cuts, glass panels and segmented energy rails. */
button{position:relative;isolation:isolate;touch-action:manipulation;transition:background .18s,box-shadow .18s,transform .18s,border-color .18s}
.primary{clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px));background:linear-gradient(115deg,#ff8c55 0%,#ff623c 55%,#f54957 100%);border:1px solid #ffb37c;box-shadow:inset 0 0 0 3px #ffffff16,inset 0 -10px 20px #8013302b;font-family:'Barlow Condensed',Impact,sans-serif;font-size:16px;letter-spacing:2.4px}
.primary:before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:repeating-linear-gradient(125deg,transparent 0 8px,#ffffff06 8px 9px),linear-gradient(0deg,transparent 60%,#ffffff18)}
.primary:after{content:'';position:absolute;left:23px;right:23px;top:5px;height:1px;background:linear-gradient(90deg,#fff8,transparent)}
.primary:hover{background:linear-gradient(115deg,#ffb16d,#ff7658 60%,#ff5d76);box-shadow:inset 0 0 0 3px #ffffff24,inset 0 -10px 20px #80133022}
.primary:active{transform:translateY(1px)}
.icon-button,.arrow,.secondary,.pause-button,.race-sound-button,#touch-controls button{background:linear-gradient(135deg,#153841df,#0a1c2be6);border:1px solid #75cfd866;box-shadow:inset 0 0 12px #70def00a;color:#dff9f4;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.icon-button:hover,.arrow:hover,.secondary:hover,.pause-button:hover,.race-sound-button:hover{background:linear-gradient(135deg,#215b68,#15303f);border-color:#8efff0;box-shadow:inset 0 0 18px #6bdde62a;color:#b2fff2}
.mode-switch{background:#071b29bc;border-color:#66b2ca66;box-shadow:inset 0 0 20px #4d8dac15;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}
.mode-switch .active{background:linear-gradient(110deg,#b4fff3,#79cddd);box-shadow:inset 0 0 0 1px #ecfff9;color:#092536}
.track-card{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);box-shadow:inset 0 0 24px #66bdd10b}
.track-card.selected{background:linear-gradient(110deg,#3c3b42ed,#182d3be6);box-shadow:inset 3px 0 #ff8153,inset 0 0 30px #ff734a13}
.ship-select{border-right:1px solid #6fcedb26;padding-right:12px}.ship-topline{border-color:#74d8dc44}.statbar{background:repeating-linear-gradient(90deg,#3553639c 0 8px,transparent 8px 11px);height:4px}.statbar i{background:linear-gradient(90deg,#46aabb,#b2fff0);box-shadow:0 0 9px #62d4df33}
.speed-box{position:relative;padding:17px 20px 20px;width:285px;background:linear-gradient(135deg,#0c2135d9,#102c39c9),repeating-linear-gradient(0deg,transparent 0 4px,#ffffff04 4px 5px);border:1px solid #6fbed144;box-shadow:inset 0 0 30px #54b9d210,0 8px 35px #0004;clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.speed-box:before,.speed-box:after{content:'';position:absolute;width:32px;height:2px;background:#7ce4e4;box-shadow:0 0 8px #7ce4e4aa;pointer-events:none}.speed-box:before{top:0;left:22px}.speed-box:after{bottom:0;right:22px}
.speed-number strong{text-shadow:0 0 24px #94f2fa33}.speed-number>span{letter-spacing:2px}.speed-meter{background:#39566a77;height:4px;overflow:hidden}.speed-meter i{background:linear-gradient(90deg,#78c4db,#e5fff3);box-shadow:0 0 9px #b2fcf4}
.hull-label,.boost-label{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.4px;font-weight:600;margin:16px 0 8px}.hull-label{color:#98f2b9}.boost-label{color:#9ce9ff;margin-top:13px}
.hull-meter,.boost-meter{position:relative;overflow:hidden;height:13px;background:#173040;box-shadow:inset 0 0 0 1px #7bb7ca33;clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%)}
.hull-meter i,.boost-meter i{position:absolute;inset:0;display:block;transform-origin:left;background:linear-gradient(90deg,#30a696,#abf37e);box-shadow:0 0 15px #6cf2bf77;transition:transform .08s linear}
.boost-meter i{background:linear-gradient(90deg,#4a8ee8,#66e6f4 70%,#bbafff)}
.hull-meter:after,.boost-meter:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 14px,#0a1c2ee8 14px 17px);border-top:1px solid #c7fff74a}
.boosting .boost-meter{box-shadow:0 0 20px #67d9ff88}.boosting .speed-box{border-color:#88fff299;background:linear-gradient(135deg,#123449e6,#11393bdb)}
.critical .hull-label{color:#ff8590}.critical .hull-meter i{background:linear-gradient(90deg,#9d254b,#ff745b);box-shadow:0 0 18px #ff577988}.critical .speed-box{border-color:#ff637966;box-shadow:inset 0 0 35px #ff41511c}.critical .hull-label span:last-child{animation:critical-pulse 1.2s ease-in-out infinite}
@keyframes critical-pulse{50%{opacity:.5}}
.touch-lane{display:none;pointer-events:none;position:absolute;top:44%;font:300 65px 'Barlow Condensed',Arial;color:#c1fff638;text-shadow:0 0 15px #8effe333}.touch-lane.left{left:3%}.touch-lane.right{right:3%;text-align:right}.touch-lane small{display:block;font:7px Barlow,Arial;letter-spacing:1px;color:#a9d5da66;margin-top:-5px}
#world{touch-action:none;user-select:none}body.touch .touch-lane{display:block}#touch-controls button{min-height:55px;border-color:#91e5e477;background:linear-gradient(145deg,#174957d9,#0b263adb);box-shadow:inset 0 0 18px #89eff517}#touch-controls button:active{background:#2d858d;border-color:#acfff0}
@media(max-width:800px){.speed-box{width:225px;padding:14px 15px 16px}.hull-label,.boost-label{font-size:8px;letter-spacing:1px}.hull-meter,.boost-meter{height:11px}.primary{font-size:14px}.ship-select{padding-right:8px}}
@media(max-width:520px){.speed-box{width:185px;padding:12px 12px 14px}.speed-number strong{font-size:56px}.speed-number>span{font-size:8px}.hull-label,.boost-label{font-size:7px;margin:11px 0 6px;letter-spacing:.7px}.hull-meter,.boost-meter{height:10px}.hull-meter:after,.boost-meter:after{background:repeating-linear-gradient(90deg,transparent 0 10px,#0a1c2ee8 10px 13px)}.primary{font-size:14px}.ship-select{padding-right:6px}.ship-select .stats>div{margin-top:8px}.touch-lane small{font-size:6px;letter-spacing:.5px}#touch-controls button{padding:16px 12px}}
@media(prefers-reduced-motion:reduce){.critical .hull-label span:last-child{animation:none}button,.hull-meter i,.boost-meter i{transition:none}}

/* Repair fields use the same green language on the road, map and hull display. */
.map-box>.repair-legend{display:block;color:#81ffad;font-size:7px;letter-spacing:.7px;margin-top:6px}
.repairing .hull-label{color:#b0ffd0}.repairing .hull-meter i{background:linear-gradient(90deg,#25b67d,#b8ffc0);box-shadow:0 0 20px #75ffafaa}
.repairing .speed-box{border-color:#87ffb38c;box-shadow:inset 0 0 30px #5dff8c24,0 8px 35px #0004}
.repairing .hull-label span:last-child{animation:none}


/* The visible bands and hit testing share these orientation-dependent values. */
:root{--boost-end:32%;--brake-start:72%;--steer-mid:52%}
@media(orientation:portrait){:root{--boost-end:50%;--brake-start:78%;--steer-mid:64%}}
#race-input{position:absolute;inset:0;z-index:3;pointer-events:none}
.turbo-zone,.brake-zone{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 max(4%,env(safe-area-inset-left));font-size:9px;letter-spacing:1.4px;transition:background .15s,border-color .15s;pointer-events:none}
.turbo-zone{top:0;bottom:calc(100% - var(--boost-end));align-items:flex-end;padding-bottom:10px;border-bottom:1px solid #65e6dc20;background:linear-gradient(180deg,#173e4e12,transparent);color:#a0e2d94d}
.brake-zone{top:var(--brake-start);bottom:0;border-top:1px solid #ffae7926;background:linear-gradient(0deg,#13253655,transparent);color:#e0ae9277}
.turbo-held .turbo-zone{background:linear-gradient(0deg,#42d7c51c,transparent 65%);border-color:#8cfff0a6;color:#b4fff4}.turbo-charging .turbo-zone{color:#a6b4c1}
.screen-braking .brake-zone{background:linear-gradient(0deg,#74274566,#672e4422);border-color:#ff917caa;color:#ffc6a9}
.race-controls{display:none}.touch-lane,body.touch .touch-lane{display:block;top:var(--steer-mid);transform:translateY(-50%);font-size:clamp(88px,12vmin,112px);line-height:.8;color:#b4f9ed25}.touch-lane small{margin-top:10px}.steer-left .touch-lane.left,.steer-right .touch-lane.right{color:#b4fff0a6}
/* Centered, passive symbols identify the held actions without covering the road. */
.zone-symbol{position:absolute;left:50%;width:42px;height:42px;transform:translateX(-50%);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;filter:drop-shadow(0 0 9px #80e9e02a)}
.turbo-zone .zone-symbol{bottom:13px}.brake-zone .zone-symbol{top:9px}
@media(max-width:600px){.zone-symbol{width:36px;height:36px}}
@media(max-height:520px) and (orientation:landscape){.zone-symbol{width:30px;height:30px}.turbo-zone .zone-symbol{bottom:9px}.brake-zone .zone-symbol{top:0;transform:translate(-50%,-70%)}}
/* A broad, low cockpit leaves the outer thumb lanes free in landscape. */
.hud-bottom,body.touch .hud-bottom{left:50%;right:auto;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(900px,70vw);display:grid;grid-template-columns:112px minmax(0,1fr);gap:22px;align-items:center;padding:14px 22px;background:linear-gradient(125deg,#10273adf,#0b2635dd);border:1px solid #6fbed155;box-shadow:inset 0 0 25px #54b9d210,0 8px 32px #0005;clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);overflow:visible;pointer-events:none}
.hud-bottom .map-box{min-width:0;font-size:7px;letter-spacing:.5px}.hud-bottom .map-box canvas{width:106px;height:89px;margin:auto}.hud-bottom .map-box>.repair-legend{font-size:6px;letter-spacing:.3px;margin-top:5px}
.hud-bottom .speed-box{display:grid;grid-template-columns:156px minmax(0,1fr);align-items:center;gap:24px;width:auto;padding:0;background:transparent;border:0;box-shadow:none;clip-path:none;min-width:0}
.hud-bottom .speed-box:before,.hud-bottom .speed-box:after{display:none}.speed-readout,.energy-readouts{min-width:0}.hud-bottom .speed-number{display:block;text-align:center}.hud-bottom .speed-number strong{font-size:68px;line-height:.9}.hud-bottom .speed-number>span{display:block;margin-top:7px;font-size:8px;letter-spacing:2px}.hud-bottom .speed-meter{margin-top:10px}
.hud-bottom .hull-label,.hud-bottom .boost-label{font-size:9px;margin:0 0 8px;letter-spacing:1.2px}.hud-bottom .boost-label{margin-top:15px}.hud-bottom .hull-meter,.hud-bottom .boost-meter{height:13px}.critical .hud-bottom{border-color:#ff637988}.repairing .hud-bottom{border-color:#87ffb38c;box-shadow:inset 0 0 30px #5dff8c24,0 8px 35px #0004}
.race-message{position:absolute;left:50%;top:calc(var(--brake-start) - 16px);bottom:auto;transform:translate(-50%,-100%);width:max-content;max-width:90vw;white-space:normal;text-align:center;font-size:23px}
#control-coach{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(0deg,#06162022,transparent 20%,#06162044 80%);color:#eafff9;text-shadow:0 2px 14px #0009}
.coach-title{position:absolute;top:17%;left:5%;right:5%;text-align:center}.coach-title>span{display:block;color:#89ffdb;font-size:9px;letter-spacing:3px;margin-bottom:8px}.coach-title>strong{font:600 24px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1.5px}
.coach-turbo{position:absolute;top:calc(var(--boost-end) - 38px);left:25%;right:25%;text-align:center;color:#a1ffeb;font:600 18px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1.6px}
.coach-steer{position:absolute;top:var(--steer-mid);transform:translateY(-50%);width:30%;padding:15px 8px;border-top:1px solid #93ffde77;border-bottom:1px solid #93ffde44;background:#0c2e3d99;text-align:center}.coach-left{left:4%}.coach-right{right:4%}.coach-steer b{display:block;font:700 30px 'Barlow Condensed',Impact,sans-serif;letter-spacing:3px}.coach-steer span{display:block;font-size:8px;letter-spacing:1.4px;margin-top:6px}
.coach-brake{position:absolute;top:calc(var(--brake-start) + 8px);left:3%;right:3%;text-align:center;color:#ffd5b5;font:600 16px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1.4px}.coach-brake>span{display:block;font:7px Barlow,Arial,sans-serif;letter-spacing:.8px;margin-top:5px}
#countdown{top:calc(var(--steer-mid) - 74px)}
@media(orientation:portrait){.hud-bottom,body.touch .hud-bottom{width:calc(100% - 24px);max-width:760px}.brake-zone{align-items:flex-start;padding-top:14px}}
@media(max-width:600px){.hud-bottom,body.touch .hud-bottom{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:12px;bottom:max(12px,env(safe-area-inset-bottom))}.hud-bottom .map-box canvas{width:76px;height:64px}.hud-bottom .map-box>.repair-legend{display:none}.hud-bottom .map-box>span{font-size:6px}.hud-bottom .speed-box{grid-template-columns:104px minmax(0,1fr);gap:12px}.hud-bottom .speed-number strong{font-size:44px}.hud-bottom .speed-number>span{font-size:7px;margin-top:5px}.hud-bottom .speed-meter{margin-top:6px}.hud-bottom .hull-label,.hud-bottom .boost-label{font-size:7px;letter-spacing:.3px;margin-bottom:6px}.hud-bottom .boost-label{margin-top:10px}.hud-bottom .hull-meter,.hud-bottom .boost-meter{height:11px}.turbo-zone,.brake-zone{font-size:7px;letter-spacing:.6px}.coach-title>strong{font-size:18px;letter-spacing:.7px}.coach-title>span{font-size:7px}.coach-steer b{font-size:24px}.coach-steer span{font-size:7px;letter-spacing:.5px}.coach-turbo{left:20%;right:20%;font-size:15px}.coach-brake{font-size:13px}.coach-brake>span{font-size:6px;letter-spacing:.4px}.control-table{grid-template-columns:105px 1fr;gap:12px;font-size:11px}.race-message{font-size:18px}}
@media(max-width:360px){.hud-bottom,body.touch .hud-bottom{grid-template-columns:60px minmax(0,1fr);gap:10px;padding:10px}.hud-bottom .map-box canvas{width:60px;height:51px}.hud-bottom .speed-box{grid-template-columns:86px minmax(0,1fr);gap:10px}.hud-bottom .speed-number strong{font-size:35px}.hud-bottom .hull-label,.hud-bottom .boost-label{font-size:6px}}
@media(max-height:520px) and (orientation:landscape){#hud{padding:16px 4%}.hud-bottom,body.touch .hud-bottom{grid-template-columns:78px minmax(0,1fr);gap:14px;padding:10px 15px;bottom:max(10px,env(safe-area-inset-bottom))}.hud-bottom .map-box canvas{width:78px;height:65px}.hud-bottom .map-box>.repair-legend{display:none}.hud-bottom .speed-box{grid-template-columns:100px minmax(0,1fr);gap:16px}.hud-bottom .speed-number strong{font-size:44px}.hud-bottom .hull-label,.hud-bottom .boost-label{font-size:7px;margin-bottom:6px}.hud-bottom .boost-label{margin-top:9px}.hud-bottom .hull-meter,.hud-bottom .boost-meter{height:10px}.position-box{top:90px}.position-box strong{font-size:44px}#leaderboard{display:none}.turbo-zone,.brake-zone{font-size:7px;letter-spacing:.6px}.coach-title{top:10%}.coach-title>span{font-size:6px;margin-bottom:3px}.coach-title>strong{font-size:16px}.coach-turbo{top:calc(var(--boost-end) - 25px);font-size:13px}.coach-steer{padding:9px 5px}.coach-steer b{font-size:23px}.coach-steer span{font-size:6px}.coach-brake{font-size:12px}.coach-brake>span{font-size:6px;margin-top:3px}#countdown{font-size:90px;top:calc(var(--steer-mid) - 48px)}}

/* Six course cards keep a single row; narrow displays browse it by swiping. */
.track-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#78b9be66 #142b35;padding-bottom:7px}
.track-card{scroll-snap-align:start;min-width:0}.track-browse-hint{display:none;color:#96bac2;font-size:7px;letter-spacing:1px;margin:5px 0 0;text-align:center}
@media(max-width:1280px){.track-browse-hint{display:block}}
@media(max-width:520px){.track-grid{grid-auto-columns:170px;gap:8px}.track-card{height:106px}.track-card h3{max-width:130px}.track-card svg{right:0;width:80%;opacity:.18}.launch-row{margin-top:10px}.track-browse-hint{font-size:6px;letter-spacing:.7px}}
/* Keep the six-track picker usable on short landscape phones. */
@media(max-height:520px) and (orientation:landscape){
 header{height:54px}.garage{height:calc(100% - 80px)}footer{height:26px;font-size:6px}.intro{top:8px;width:27%}.intro .eyebrow{font-size:6px;letter-spacing:1px}.intro p{display:none}.intro h1{font-size:42px;margin:10px 0 8px}.mode-switch{margin-top:10px;width:220px}.mode-switch button{font-size:7px;padding:8px 5px;letter-spacing:.4px}.ship-select{top:8px;width:27%;padding-bottom:0}.ship-topline{font-size:7px;padding-bottom:7px}.ship-row{margin-top:7px;gap:6px}.ship-row h2{font-size:27px}.ship-class{font-size:6px}.ship-select .stats,.ship-traits,.hero-label{display:none}#ship-description{display:block;margin:8px 0 0}#ship-description b{font-size:7px}#ship-description span{display:none}.race-select{bottom:8px}.section-head{font-size:6px;margin-bottom:6px}.track-card{height:66px;padding:8px 10px}.track-card h3{font-size:17px;max-width:140px}.track-card p{font-size:6px;margin-top:3px}.track-num{font-size:10px;margin-bottom:3px}.track-card svg{height:45px;top:10px;opacity:.17}.launch-row{margin-top:6px}.launch-row .hint{display:none}.launch-row .primary{padding:11px 16px;min-width:220px;font-size:11px;margin-left:auto}.track-browse-hint{font-size:6px;margin-top:3px}
}

.recharging .boost-meter{border-color:#67cfff;box-shadow:0 0 16px #42bfff55}.recharging .boost-label{color:#91deff}.recharging .boost-meter i{filter:brightness(1.4)}

#hardware-coach{display:none}.hardware-controls #race-input,.hardware-controls .touch-lane,.hardware-controls .coach-turbo,.hardware-controls .coach-steer,.hardware-controls .coach-brake{display:none!important}.hardware-controls #hardware-coach{display:block;position:absolute;top:68%;left:50%;transform:translate(-50%,-50%);width:min(85vw,720px);padding:12px 16px;text-align:center;color:#def7ee;background:#07131be8;border:1px solid #73d9da66;border-radius:12px;font-size:clamp(11px,1.5vw,14px);line-height:1.8;letter-spacing:1px}.hardware-controls .race-controls{max-width:90vw;white-space:normal;text-align:center}

/* Short landscape screens: one compact corner panel, with a clear racing view. */
@media (orientation:landscape) and (max-height:520px){
  #hud{
    top:max(6px,env(safe-area-inset-top));right:max(6px,env(safe-area-inset-right));
    bottom:auto;left:auto;width:min(248px,44vw);height:auto;max-height:calc(100dvh - 12px);
    padding:8px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 92px;
    grid-template-areas:"position lap actions" "gauges gauges gauges" "time time time";
    grid-template-rows:44px auto auto;
    gap:5px 6px;align-items:center;background:#091c2bd9;border:1px solid #79b8c34d;
    border-radius:8px;box-shadow:0 3px 16px #0004;text-shadow:0 1px 3px #0008;
  }
  #hud .hud-top,#hud .time-box{display:contents}
  #hud .time-box{position:static;padding:0}
  #hud .hud-top>div:first-child,#hud .time-box>.label,#hud #leaderboard,
  #hud .map-box,#hud .race-controls{display:none}
  #hud .position-box,#hud .lap-box{position:static;inset:auto;text-align:left;min-width:0}
  #hud .position-box{grid-area:position}
  #hud .lap-box{grid-area:lap}
  #hud .position-box>.label,#hud .lap-box>.label{
    display:block;font-size:8px;line-height:1.2;letter-spacing:.5px;
  }
  #hud .position-box>strong,#hud .lap-box>strong{font-size:21px;line-height:1.05;margin-top:2px}
  #hud .position-box small,#hud .lap-box small{font-size:11px}
  #hud .time-box>strong{
    grid-area:time;justify-self:end;font:500 11px 'Barlow Condensed',Arial,sans-serif;
    line-height:1.1;margin:0;padding:0;color:#bed2db;font-variant-numeric:tabular-nums;
  }
  #hud .pause-button,#hud .race-sound-button{
    top:6px;width:44px;height:44px;padding:0;font-size:20px;border-radius:5px;
    background:#123346cc;touch-action:manipulation;
  }
  #hud .pause-button{right:6px}
  #hud .race-sound-button{right:54px}
  #hud .hud-bottom,body.touch #hud .hud-bottom{
    grid-area:gauges;position:static;inset:auto;transform:none;width:auto;max-width:none;
    display:block;padding:0;margin:0;background:none;border:0;box-shadow:none;clip-path:none;
  }
  #hud .hud-bottom .speed-box{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;align-items:center}
  #hud .hud-bottom .speed-number{text-align:left}
  #hud .hud-bottom .speed-number strong{font-size:32px;line-height:.95}
  #hud .hud-bottom .speed-number>span{font-size:7px;line-height:1;margin-top:3px;letter-spacing:.7px}
  #hud .hud-bottom .speed-meter{height:2px;margin-top:4px}
  #hud .hud-bottom .hull-label,#hud .hud-bottom .boost-label{
    font-size:8px;line-height:1.15;letter-spacing:.25px;margin:0 0 3px;
  }
  #hud .hud-bottom .boost-label{margin-top:6px}
  #hud .hud-bottom .hull-meter,#hud .hud-bottom .boost-meter{height:7px}
  .critical #hud{border-color:#ff6379aa}
  .repairing #hud{border-color:#87ffb3aa}
  /* These children still belong to the full-screen racing view. */
  #hud #countdown{position:fixed;inset:0;display:grid;place-items:center;font-size:80px;line-height:1}
  #hud .race-message{
    position:fixed;left:50%;right:auto;top:auto;bottom:max(9px,env(safe-area-inset-bottom));
    transform:translateX(-50%);max-width:60vw;font-size:14px;line-height:1.2;letter-spacing:1px;
  }
  #hud .touch-lane{position:fixed;top:var(--steer-mid);font-size:52px}
  #hud .touch-lane.left{left:max(12px,env(safe-area-inset-left));right:auto}
  #hud .touch-lane.right{right:max(12px,env(safe-area-inset-right));left:auto}
  #hud .touch-lane small{display:none}
}

/* Measured rendered FPS; never intercept driving or menu input. */
#fps-counter{position:fixed;z-index:8;top:max(5px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:3px 6px;border:1px solid #86bfc32b;border-radius:4px;background:#081824b8;color:#b9d0d5;font:10px/1.2 monospace;font-variant-numeric:tabular-nums;letter-spacing:0;pointer-events:none;white-space:nowrap;min-width:54px;text-align:center}