/* Jet Dash 3D — shared interface, race instruments and dialogs. */
@font-face{font-family:'BoldsPixels';src:url('./assets/BoldsPixels.ttf') format('truetype');font-style:normal;font-weight:400 900;font-display:swap;size-adjust:118%}
:root{
 --deep:#071a28;--navy:#102a3b;--panel:rgba(7,25,39,.88);--panel-solid:#0d2638;--line:rgba(200,231,247,.18);
 --sun:#ffda59;--sun-dark:#d2a627;--foam:#f3f9fd;--mute:#aac2d0;--aqua:#61e3dc;--coral:#ff897a;--accent:var(--aqua);
 --body:'BoldsPixels',sans-serif;--display:var(--body);--numeric:var(--body);
 --radius:12px;--button-height:56px;color-scheme:dark;font-family:var(--body);letter-spacing:.04em;color:var(--foam);font-synthesis:none;
}
body[data-theme=ice]{--accent:#a3e4ff}body[data-theme=city]{--accent:#ffb287}body[data-theme=snow]{--accent:#dceeff}body[data-theme=volcano]{--accent:#ff9773}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#80bdf0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.5}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--aqua);outline-offset:4px}button:focus:not(:focus-visible){outline:none}.hidden{display:none!important}
button svg,.glass-panel svg,.dialog-emblem svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-library{position:absolute;width:0;height:0;overflow:hidden}
#view{position:fixed;inset:0}#view canvas{display:block;width:100%;height:100%;touch-action:none}#hitflash{position:fixed;inset:0;background:radial-gradient(circle,transparent 40%,#ff3b2e 130%);opacity:0;pointer-events:none;z-index:12;transition:opacity .2s}
/* One control system: matching heights, type, radius and icon alignment. */
.primary,.secondary,.back-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:var(--button-height);min-height:var(--button-height);padding:0 22px;border:1px solid transparent;border-radius:var(--radius);font-size:14px;font-weight:750;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:background .16s,border-color .16s,transform .16s,box-shadow .16s}
.primary{background:var(--sun);color:var(--deep);border-color:#ffe990;box-shadow:0 3px 0 #bd9433,0 6px 16px #00121e33}.primary:hover{background:#ffe782;box-shadow:0 3px 0 #bd9433,0 8px 24px #00121e4d;transform:translateY(-1px)}.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #bd9433}
.secondary,.back-button{background:#18374b;border-color:#9fc9df40;box-shadow:0 3px 0 #061a29}.secondary:hover,.back-button:hover{background:#23495f;border-color:#9fc9df80;transform:translateY(-1px)}.secondary:active,.back-button:active{transform:translateY(2px);box-shadow:0 1px 0 #061a29}
.icon-button{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--foam);box-shadow:0 3px 12px #05192520;transition:background .16s,border-color .16s}.icon-button:hover{background:#23495f;border-color:#91b8d080}.icon-button svg{width:20px;height:20px}.icon-button.is-muted{color:var(--mute)}
kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border:1px solid #c7e1ed38;border-bottom-width:2px;border-radius:5px;background:#071a2870;color:#d9ebf5;font:650 11px var(--body)}
#toast{position:fixed;top:145px;left:50%;max-width:calc(100% - 32px);padding:11px 20px;border:1px solid #ffecb5;border-radius:8px;background:var(--sun);color:var(--deep);font-size:14px;font-weight:800;letter-spacing:.08em;text-align:center;z-index:30;pointer-events:none;opacity:0;transform:translate(-50%,-8px);transition:opacity .16s,transform .16s;box-shadow:0 5px 24px #02111e26}#toast.show{opacity:1;transform:translate(-50%,0)}
/* Race instruments: compact, aligned, out of the centre of the action. */
#hud{position:fixed;inset:0;z-index:7;pointer-events:none}.hud-vignette{position:absolute;inset:0;background:linear-gradient(#061d3740,transparent 22%,transparent 80%,#061d3724)}
.speed-lines{position:absolute;inset:0;opacity:0;transition:opacity .25s;background:repeating-conic-gradient(from 0deg at 50% 52%,#fff0 0 5deg,#ffffff1c 5.4deg 5.8deg,#fff0 6.2deg 11deg);mask:radial-gradient(ellipse at 50% 52%,transparent 38%,#000 85%)}body.boosting .speed-lines{opacity:1;animation:rush .5s linear infinite}@keyframes rush{to{transform:scale(1.06)}}
.hud-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:max(24px,env(safe-area-inset-top)) 28px 0}.hud-panel{height:82px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 22px #03142118;backdrop-filter:blur(10px)}
.hud-left-stack{display:grid;gap:8px;width:220px}.speed-panel{width:100%;padding:10px 16px}.speed-panel>small,.metric-label{font-size:9px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}.speed-read{display:flex;align-items:baseline;gap:8px;line-height:1}.speed-read strong{font:750 38px/.98 var(--numeric);letter-spacing:.02em;font-variant-numeric:tabular-nums}.speed-read span{font-size:10px;color:var(--mute)}.speed-gauge{height:3px;background:#aecedc22;border-radius:2px;margin-top:5px;overflow:hidden}.speed-gauge span{display:block;height:100%;width:0;background:var(--aqua)}
.progress-panel{padding:13px 20px;text-align:center}.race-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.track{position:relative;height:4px;margin:13px 0 9px;background:#aecedc26;border-radius:3px}.track>span{display:block;height:100%;width:0;background:var(--accent);border-radius:3px}.track:after{content:'';position:absolute;right:-1px;top:-3px;width:6px;height:10px;background:repeating-linear-gradient(0deg,#fff 0 2px,#10283a 2px 4px);border-radius:1px}.track .dot{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:#9ab8cc;border:1px solid #17364b;border-radius:50%;transition:left .12s linear}.track .dot.me{width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--sun);z-index:2;box-shadow:0 0 0 3px #ffda5926}#distanceText{font-size:10px;color:var(--mute);font-weight:600;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.hud-right{display:flex;align-items:flex-start;justify-content:flex-end;gap:8px}.race-metric{width:72px;padding:12px 10px;text-align:center}.place-panel{display:flex;align-items:baseline;justify-content:center;gap:2px;font:750 30px/1.1 var(--numeric);color:var(--sun);margin-top:5px}.place-panel small{font:700 10px var(--body);color:var(--foam)}.coin-panel{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:5px}.coin-panel svg{width:14px;height:14px;fill:none;stroke:var(--sun);stroke-width:1.8}.coin-panel b{font:750 30px/1.1 var(--numeric);font-variant-numeric:tabular-nums}.hud-tools{display:flex;gap:8px;margin-left:4px}.hud-right button{pointer-events:auto}
.hud-bottom{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:28px;right:28px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}.control-left,.control-right{display:flex;align-items:center;gap:8px;pointer-events:auto}.steer-btn{display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);touch-action:none;transition:background .1s}.steer-btn svg{width:20px;height:20px}.steer-btn.held{background:#397c8b}.control-caption{margin-left:8px;font-size:10px;color:#e4f2f9;text-shadow:0 1px 4px #051925;line-height:1.6}.control-caption b{display:block;font-weight:750;letter-spacing:.08em}
.boost-wrap{width:216px;padding:13px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 22px #03142118}.boost-name{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:10px;font-weight:750;letter-spacing:.08em}.boost-name>span:first-child{display:flex;align-items:center;gap:6px}.boost-name svg{width:15px;height:15px;fill:none;stroke:var(--sun);stroke-width:2}.boost-track{height:4px;overflow:hidden;border-radius:3px;background:#adcdda29}.boost-track span{display:block;height:100%;width:65%;background:var(--aqua);border-radius:3px;transition:width .1s linear}.boost-wrap>small{display:block;font-size:9px;color:var(--mute);margin-top:8px}#hud.turbo-ready .boost-name{color:var(--sun)}#hud.turbo-ready .boost-track span{background:var(--sun)}
#countdown{position:absolute;top:29%;left:0;width:100%;text-align:center;font:850 clamp(90px,15vw,180px)/1 var(--numeric);color:var(--sun);text-shadow:0 6px 0 #0d263866,0 14px 30px #06182955;pointer-events:none}#countdown.pop{animation:pop .7s cubic-bezier(.2,1.4,.4,1)}@keyframes pop{0%{transform:scale(1.35);opacity:0}25%{opacity:1}100%{transform:scale(1)}}
/* Dialogs share the same composition and equal-sized action buttons. */
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:32px 20px;background:#03152299;backdrop-filter:blur(12px);overflow-y:auto}.modal{position:relative;width:min(460px,100%);padding:36px;border:1px solid #8ebbc438;border-radius:20px;background:linear-gradient(145deg,#153446,#0b2233 75%);box-shadow:0 24px 80px #02101c66;text-align:center;animation:rise .24s ease-out}.modal:before{content:'';position:absolute;left:36px;right:36px;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--aqua),transparent)}@keyframes rise{from{transform:translateY(10px);opacity:0}}
.modal-kicker,.eyebrow{font-size:10px;line-height:1.5;letter-spacing:.16em;font-weight:750;text-transform:uppercase;color:var(--aqua)}.modal h2{margin:12px 0;font:800 34px/1.1 var(--display);letter-spacing:.02em;color:var(--foam)}.modal>p{margin:0;font-size:14px;line-height:1.7;color:var(--mute);text-wrap:balance}.dialog-emblem{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 22px;border:1px solid #ffda5945;border-radius:16px;background:#ffda5910;color:var(--sun)}.dialog-emblem svg{width:27px;height:27px}.modal-actions{display:grid;grid-template-columns:1fr;gap:12px;margin-top:28px}.modal-actions button{width:100%;min-width:0}.modal-actions svg{width:19px;height:19px}:is(#againBtn,#shopHomeBtn,#closeSettingsBtn)>svg{order:-1}.end-modal{width:min(580px,100%);padding:36px}.end-modal h2{font-size:38px}.end-modal .dialog-emblem{margin-bottom:20px}.end-modal .modal-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.end-modal .modal-actions button{padding:0 12px;font-size:12px}.end-modal .modal-actions .primary{grid-column:2;grid-row:1}.end-modal .modal-actions .secondary{grid-column:1;grid-row:1}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:28px 0 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#071a2826;border-radius:12px}.stat-row>div{padding:0 6px}.stat-row>div+div{border-left:1px solid var(--line)}.stat-row strong{display:block;font:750 30px/1.2 var(--numeric);letter-spacing:.02em;color:var(--foam);font-variant-numeric:tabular-nums;white-space:nowrap}.stat-row small{display:block;margin-top:5px;font-size:10px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;font-weight:650}.stat-row .stat-place strong{color:var(--sun)}
.guide-modal{width:min(660px,100%)}.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0;text-align:left}.how-grid>div{padding:18px;background:#071a284d;border:1px solid var(--line);border-radius:12px}.how-grid i{display:inline-grid;place-items:center;width:32px;height:32px;background:#61e3dc14;border-radius:8px;color:var(--aqua);font-style:normal;margin-bottom:12px}.how-grid i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.how-grid b{display:block;font-size:14px;font-weight:750}.how-grid p{font-size:12px;line-height:1.65;color:var(--mute);margin:8px 0 0}.guide-modal>.primary{width:100%}.setting-row,.record-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 0;border-bottom:1px solid var(--line);text-align:left;font-size:13px}.setting-row .secondary{height:40px;min-height:40px;min-width:76px;font-size:11px}.setting-row select{width:60%;min-height:42px;padding:8px 10px;background:#071a28;border:1px solid var(--line);border-radius:8px;color:var(--foam);font:12px var(--body)}.record-row{color:var(--mute)}.record-row strong{color:var(--foam);font:700 20px var(--numeric);font-variant-numeric:tabular-nums}.records-modal h2{font-size:30px}
#loading{position:fixed;inset:0;z-index:50;display:grid;place-items:center;text-align:center;padding:30px;background:var(--deep)}#loading strong{font-size:22px;font-weight:750}#loading p{font-size:13px;color:var(--mute)}.loading-cube{width:34px;height:34px;border-radius:8px;background:var(--sun);margin:0 auto 26px;animation:float 1s ease-in-out infinite alternate}@keyframes float{to{transform:translateY(-7px) rotate(8deg)}}
@media(max-width:1050px){.hud-top{gap:12px;padding:18px 20px 0}.hud-left-stack{width:190px}.hud-tools{flex-direction:column;gap:6px}.hud-tools .icon-button{width:38px;height:38px}.hud-right{gap:6px}.race-metric{width:62px}.hud-bottom{left:20px;right:20px}.control-caption{display:none}}
@media(max-width:700px){.hud-top{padding:max(14px,env(safe-area-inset-top)) 14px 0;gap:10px}.hud-panel{height:72px}.hud-left-stack{width:150px}.speed-panel{width:100%;padding:9px 12px}.speed-read strong{font-size:32px}.progress-panel{height:62px;padding:10px 12px}.race-title{font-size:10px}.track{margin:8px 0 7px}#distanceText{font-size:9px}.hud-right{gap:6px}.race-metric{width:55px;padding:10px 7px}.place-panel,.coin-panel b{font-size:27px}.metric-label{font-size:8px}.hud-tools{flex-direction:row;gap:6px;margin-left:0}.hud-tools .icon-button{width:38px;height:38px}.hud-tools #soundBtn{display:none}.hud-bottom{left:14px;right:14px;bottom:max(18px,env(safe-area-inset-bottom))}.steer-btn{width:48px;height:48px}.boost-wrap{width:160px;padding:11px 12px}.boost-wrap>small{font-size:8px}.modal{padding:28px 24px;border-radius:16px}.modal h2{font-size:30px}.end-modal h2{font-size:32px}.modal-actions{margin-top:24px}.end-modal .modal-actions{grid-template-columns:1fr}.end-modal .modal-actions .primary,.end-modal .modal-actions .secondary{grid-column:auto;grid-row:auto}.stat-row strong{font-size:26px}.dialog-emblem{width:48px;height:48px;margin-bottom:18px}.how-grid{grid-template-columns:1fr}.overlay{padding:20px 16px}.stat-row{margin-top:24px;padding:18px 0}#toast{top:162px;font-size:11px}#countdown{top:35%}}
@media(max-height:560px){.overlay{place-items:start center;padding:18px}.modal{padding:24px}.dialog-emblem{display:none}.hud-top{padding-top:12px}.hud-bottom{bottom:12px}.control-caption{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.magnet-status{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:#78e5f6}.magnet-status[hidden]{display:none}.magnet-status>div:first-child{display:flex;justify-content:space-between;gap:8px;font-size:9px;letter-spacing:.04em}.magnet-track{height:3px;margin-top:7px;background:#78e5f622;border-radius:3px;overflow:hidden}.magnet-track span{display:block;height:100%;background:#78e5f6;transition:width .1s linear}

.magnet-status span:first-child{display:flex;align-items:center;gap:5px}.magnet-status svg{width:12px;height:12px;flex:none}

/* Fade only the live world when the attract-mode race changes location. */
#view::after{content:'';position:absolute;inset:0;background:#071a28;opacity:var(--demo-fade,0);pointer-events:none}