@font-face{font-family:'Barlow Condensed';src:url('../fonts/BarlowCondensed-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/BarlowCondensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/BarlowCondensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/BarlowCondensed-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Oswald';src:url('../fonts/Oswald.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap}

:root{
  --amber:#F2A33A;
  --blue:#5BB8E8;
  --blueDeep:#1E6FA8;
  --red:#D7263D;
  --chrome:#EDEFF2;
  --night:#120D0A;
  --steel:#2E3A36;
  --font-hud:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --font-display:'Oswald','Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --safeB:env(safe-area-inset-bottom,0px);
  --safeL:env(safe-area-inset-left,0px);
  --safeR:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#070504;color:var(--chrome);font-family:var(--font-hud);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{position:fixed;inset:0}
#app{position:absolute;inset:0;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}
#vignette{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 78% 70% at 50% 46%, rgba(0,0,0,0) 42%, rgba(0,0,0,.28) 76%, rgba(0,0,0,.62) 100%),
  linear-gradient(180deg, rgba(8,5,3,.42) 0%, rgba(0,0,0,0) 22%);
  z-index:2}
#grain{position:absolute;inset:-30px;pointer-events:none;z-index:3;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.8'/></svg>");
  background-size:200px 200px;animation:grainShift 1.1s steps(3) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-6px,4px)}66%{transform:translate(5px,-5px)}100%{transform:translate(0,0)}}

#ui{position:absolute;inset:0;z-index:25;pointer-events:none}
#ui.pre #minimapWrap,#ui.pre #speedo,#ui.pre #wanted,#ui.pre #loc{opacity:0;transition:opacity .5s ease;pointer-events:none}
#ui.pre #touch{display:none!important}
#minimapWrap,#speedo,#wanted,#loc{transition:opacity .6s ease}
#ui button{pointer-events:auto;font-family:var(--font-hud)}

#topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top,0px)) calc(16px + var(--safeR)) 0 calc(16px + var(--safeL));gap:12px}
.tb-left{display:flex;gap:8px;align-items:center}
.iconBtn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(237,239,242,.22);background:rgba(12,9,7,.55);color:var(--chrome);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,border-color .2s,transform .15s}
.iconBtn:hover{background:rgba(91,184,232,.2);border-color:rgba(91,184,232,.6)}
.iconBtn:active{transform:scale(.94)}
.iconBtn svg{width:17px;height:17px;fill:currentColor}

.loc{display:flex;align-items:center;gap:9px;padding:6px 10px 7px;border-radius:3px;background:linear-gradient(90deg,rgba(10,7,6,.62),rgba(10,7,6,.28));border-left:2px solid rgba(242,163,58,.65)}
.locFlag{display:flex;flex-direction:column;justify-content:center;gap:2px;width:26px;height:15px;position:relative;flex:none}
.locFlag i{display:block;height:3px;background:var(--blue)}
.locFlag i:first-child{margin-bottom:2px}
.locFlag i:last-child{margin-top:2px}
.locStar{position:absolute;width:5px;height:5px;background:var(--red);border-radius:50%;top:5px;left:2px;box-shadow:7px 0 0 var(--red),14px 0 0 var(--red),21px 0 0 var(--red)}
.locText{display:flex;flex-direction:column;line-height:1;gap:4px}
.locText b{font-family:var(--font-display);font-size:14px;letter-spacing:.09em;font-weight:600;color:var(--chrome);text-shadow:0 1px 2px #000}
.locText span{font-size:9px;font-weight:600;letter-spacing:.26em;color:#bfae98}

#wanted{display:flex;flex-direction:column;align-items:flex-end;gap:5px;padding-top:1px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
.wLabel{font-size:8px;letter-spacing:.36em;color:rgba(215,38,61,.9);font-weight:700;text-shadow:0 1px 2px #000}
.stars{display:flex;gap:5px}
.stars svg{width:20px;height:20px;fill:rgba(215,38,61,.06);stroke:var(--red);stroke-width:5.5;stroke-linejoin:round;opacity:.9}
.stars svg.full{fill:var(--red);filter:drop-shadow(0 0 7px rgba(215,38,61,.85))}

#minimapWrap{position:absolute;left:calc(16px + var(--safeL));bottom:calc(18px + var(--safeB));width:150px;height:150px;border-radius:50%;background:#0a0706;border:8px solid #000;box-shadow:0 0 0 1px rgba(242,163,58,.25),0 10px 28px rgba(0,0,0,.65);transition:transform .25s,opacity .4s;overflow:hidden}
#minimapWrap canvas{width:100%;height:100%;display:block;border-radius:50%}
.mmN{position:absolute;top:5px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;color:rgba(237,239,242,.55);letter-spacing:.1em;text-shadow:0 1px 2px #000}
.mmMark{display:none}

#speedo{position:absolute;right:calc(14px + var(--safeR));bottom:calc(8px + var(--safeB));width:214px;height:168px;transition:opacity .4s}
#speedoArc{position:absolute;inset:0;width:100%;height:100%}
.spdNum{position:absolute;left:0;right:0;bottom:36px;text-align:center;line-height:.82}
.spdNum span{font-family:var(--font-display);font-weight:700;font-size:62px;letter-spacing:.015em;color:var(--chrome);text-shadow:0 2px 0 rgba(0,0,0,.85),0 5px 18px rgba(0,0,0,.75);font-variant-numeric:tabular-nums}
.spdUnit{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:10px;letter-spacing:.42em;font-weight:700;color:var(--amber);text-shadow:0 1px 2px #000}
.spdGear{position:absolute;right:22px;bottom:20px;font-family:var(--font-display);font-size:16px;font-weight:600;color:rgba(237,239,242,.65)}

#touch{position:absolute;inset:0;display:none;pointer-events:none}
.tbtn{border:1px solid rgba(237,239,242,.25);background:rgba(12,9,7,.5);color:rgba(237,239,242,.9);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);font-family:var(--font-hud);font-weight:700;letter-spacing:.12em;border-radius:50%;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none;transition:background .1s,transform .1s,border-color .1s}
.tbtn.on{background:rgba(91,184,232,.42);border-color:rgba(91,184,232,.95);transform:scale(.96)}
.tsteer{position:absolute;left:calc(14px + var(--safeL));bottom:calc(190px + var(--safeB));display:flex;gap:10px;pointer-events:auto}
.tsteer .tbtn{width:58px;height:58px;font-size:19px}
.tdrive{position:absolute;right:calc(14px + var(--safeR));bottom:calc(196px + var(--safeB));display:flex;gap:10px;align-items:flex-end;pointer-events:auto}
.tdrive .pedal{width:64px;height:64px;border-radius:14px;font-size:11px;letter-spacing:.1em}
.tdrive .gas{border-color:rgba(91,184,232,.45);color:#cfeafd}
.tdrive .brake{border-color:rgba(215,38,61,.4);color:#f3c9ce}
.hand{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(24px + var(--safeB));width:118px;height:40px;border-radius:20px;font-size:10px;letter-spacing:.16em;pointer-events:auto}
.hand.on{transform:translateX(-50%) scale(.96);background:rgba(215,38,61,.4);border-color:rgba(215,38,61,.9)}

#loading{position:absolute;inset:0;z-index:40;background:radial-gradient(ellipse at 50% 60%,#1b1009 0%,#0a0604 62%,#050303 100%);display:flex;align-items:center;justify-content:center;transition:opacity .7s ease}
#loading.gone{opacity:0;pointer-events:none}
.loadInner{text-align:center;width:min(78vw,420px)}
.loadEyebrow{font-size:10px;letter-spacing:.42em;color:#b99e78;font-weight:600;margin-bottom:10px}
.loadTitle{font-family:var(--font-display);font-size:clamp(38px,9vw,64px);font-weight:700;letter-spacing:.03em;line-height:1;color:#EDEFF2;transform:scaleY(1.08);text-shadow:0 0 30px rgba(242,163,58,.18)}
.loadBar{height:2px;margin:22px auto 12px;background:rgba(237,239,242,.12);width:100%;overflow:hidden}
.loadBar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--blueDeep),var(--blue));box-shadow:0 0 10px rgba(91,184,232,.8);transition:width .3s}
.loadHint{font-size:9px;letter-spacing:.32em;color:#7d6c59;font-weight:600}

#titleCard{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;pointer-events:none;transition:opacity .7s ease,visibility .7s}
#titleCard::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,5,4,.86) 0%,rgba(7,5,4,.62) 30%,rgba(7,5,4,.1) 56%,rgba(7,5,4,0) 70%);pointer-events:none}
#titleCard.gone{opacity:0;visibility:hidden}
.titleTop{position:relative;width:min(92vw,720px);padding-top:clamp(34px,9vh,92px);text-align:center;pointer-events:none}
.titleTop .eyebrow{font-size:clamp(8px,1.1vw,10px);letter-spacing:.44em;color:#c9ac82;font-weight:600;text-shadow:0 1px 3px #000}
.titleTop h1{font-family:var(--font-display);font-weight:700;font-size:clamp(44px,8.6vw,96px);line-height:.94;letter-spacing:.035em;margin:10px 0 0;color:#F2F0EA;transform:scaleY(1.06);text-shadow:0 3px 0 rgba(0,0,0,.55),0 10px 44px rgba(0,0,0,.85),0 0 60px rgba(242,163,58,.14)}
.titleTop .rule{width:min(46vw,220px);height:2px;margin:16px auto 14px;background:linear-gradient(90deg,transparent,var(--blue),transparent);box-shadow:0 0 12px rgba(91,184,232,.6)}
.flagStars{display:flex;gap:10px;justify-content:center;margin-bottom:15px}
.flagStars svg{width:16px;height:16px;fill:var(--red);filter:drop-shadow(0 0 8px rgba(215,38,61,.6))}
.tagline{font-size:clamp(8px,1.2vw,10px);letter-spacing:.34em;color:#c3b19a;font-weight:600;margin:0 0 22px;text-shadow:0 1px 3px #000}
#startBtn{pointer-events:auto;cursor:pointer;border:1px solid rgba(91,184,232,.75);background:rgba(8,6,5,.55);color:#EDEFF2;font-family:var(--font-hud);font-weight:700;font-size:clamp(11px,1.5vw,13px);letter-spacing:.3em;padding:14px 28px 13px 31px;border-radius:2px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:0 0 0 rgba(91,184,232,0),inset 0 0 24px rgba(91,184,232,.06);transition:background .2s,box-shadow .2s,transform .15s;animation:startPulse 2.6s ease-in-out infinite}
#startBtn:hover{background:rgba(91,184,232,.16);box-shadow:0 0 26px rgba(91,184,232,.22),inset 0 0 24px rgba(91,184,232,.12)}
#startBtn:active{transform:scale(.975)}
@keyframes startPulse{0%,100%{border-color:rgba(91,184,232,.55)}50%{border-color:rgba(91,184,232,1)}}
.controlsLine{position:absolute;left:0;right:0;bottom:calc(18px + var(--safeB));margin:0;text-align:center;font-size:9px;letter-spacing:.22em;color:#a08c74;font-weight:600;text-shadow:0 1px 2px #000;padding:0 12px}

#finishCard,#helpCard{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(5,3,2,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:18px;transition:opacity .35s}
.hidden{opacity:0;visibility:hidden;pointer-events:none!important}
.panel{position:relative;width:min(92vw,460px);background:linear-gradient(180deg,rgba(16,11,8,.94),rgba(9,6,5,.97));border:1px solid rgba(237,239,242,.11);border-top:2px solid var(--blue);padding:26px 26px 24px;box-shadow:0 24px 80px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.6);text-align:center}
.panel .eyebrow{font-size:9px;letter-spacing:.4em;color:#b99e78;font-weight:600}
.panel h2{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,6vw,42px);letter-spacing:.04em;margin:8px 0 0;color:#F2F0EA;line-height:1;transform:scaleY(1.05)}
.panel .rule{width:80px;height:2px;margin:14px auto 18px;background:var(--blue);box-shadow:0 0 10px rgba(91,184,232,.6)}
.finishStats{display:flex;justify-content:space-around;gap:8px;margin-bottom:16px}
.finishStats div{display:flex;flex-direction:column;gap:4px}
.finishStats b{font-family:var(--font-display);font-size:30px;font-weight:600;color:#EDEFF2;line-height:1}
.finishStats span{font-size:8px;letter-spacing:.28em;color:#a28e75;font-weight:600}
.bestWrap{text-align:left;margin:0 auto 20px;max-width:300px}
.bestHead{font-size:8px;letter-spacing:.34em;color:#a28e75;font-weight:600;border-bottom:1px solid rgba(237,239,242,.1);padding-bottom:6px;margin-bottom:6px}
#bestList{list-style:none;margin:0;padding:0;font-size:13px;color:#d6cfc4}
#bestList li{display:flex;justify-content:space-between;padding:3px 0;letter-spacing:.04em}
#bestList li span:first-child{color:#9d8b75;font-weight:600;width:18px}
#bestList li .bestName{flex:1;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bestList li .bestName a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(91,184,232,.3)}
#bestList li span:last-child{font-variant-numeric:tabular-nums;color:#EDEFF2}
#bestList li.mine .bestName{color:#5BB8E8}
#againBtn,#closeHelp{pointer-events:auto;cursor:pointer;border:1px solid rgba(91,184,232,.7);background:rgba(91,184,232,.1);color:#EDEFF2;font-family:var(--font-hud);font-weight:700;font-size:12px;letter-spacing:.26em;padding:12px 24px;border-radius:2px;transition:background .2s}
#againBtn:hover,#closeHelp:hover{background:rgba(91,184,232,.26)}
#againBtn span{color:#8fd0f2;margin-left:6px}
.helpList{list-style:none;margin:0 0 16px;padding:0;text-align:left;font-size:14px;color:#d6cfc4}
.helpList li{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(237,239,242,.07)}
.helpList b{font-family:var(--font-hud);font-size:12px;letter-spacing:.16em;color:var(--blue);min-width:96px}
.helpNote{font-size:12px;line-height:1.5;color:#a8977f;margin:0 0 18px;letter-spacing:.02em}

#toast{position:absolute;left:50%;bottom:calc(34px + var(--safeB));transform:translateX(-50%) translateY(10px);z-index:25;background:rgba(10,7,5,.82);border-left:2px solid var(--red);padding:8px 14px;font-size:10px;letter-spacing:.22em;color:#EDEFF2;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

body.touch #touch{display:block}
body.touch .controlsLine{opacity:.55}

@media (max-width:700px), (max-height:560px){
  #minimapWrap{width:112px;height:112px;border-width:6px}
  #speedo{width:168px;height:132px;right:calc(8px + var(--safeR));bottom:calc(4px + var(--safeB))}
  .spdNum{bottom:28px}
  .spdNum span{font-size:46px}
  .spdUnit{bottom:15px;font-size:8px;letter-spacing:.34em}
  .spdGear{right:14px;bottom:14px;font-size:13px}
  .tsteer{bottom:calc(146px + var(--safeB))}
  .tsteer .tbtn{width:52px;height:52px}
  .tdrive{bottom:calc(152px + var(--safeB))}
  .tdrive .pedal{width:56px;height:56px}
  .hand{bottom:calc(16px + var(--safeB));width:104px;height:36px}
  #loc{display:none}
  #wanted .stars svg{width:17px;height:17px}
  .titleTop{padding-top:clamp(22px,6vh,56px)}
}
@media (max-width:390px){
  #wanted .stars svg{width:15px;height:15px}
  .spdNum span{font-size:40px}
  #minimapWrap{width:98px;height:98px}
  .tsteer{bottom:calc(126px + var(--safeB))}
  .tdrive{bottom:calc(132px + var(--safeB))}
}
@media (orientation:portrait){
  .titleTop{padding-top:max(30px,8vh)}
  .titleTop h1{font-size:clamp(52px,15.5vw,104px)}
  .titleTop .rule{margin-top:14px}
  .tagline{margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  #grain{animation:none}
  #startBtn{animation:none}
}