/* nfs9 — HUD / 追捕 / 过场 / 响应式 */

#hud{position:absolute;inset:0;z-index:15;pointer-events:none;font-family:var(--font-ui);
  text-shadow:0 1px 3px rgba(0,0,0,.85)}
.hud-tl{position:absolute;left:26px;top:22px;display:flex;flex-direction:column;gap:8px;max-width:330px}
.hud-event{font-family:var(--font-display);font-size:20px;letter-spacing:.08em;color:#f2f5f8}
.hud-objective{font-size:11px;color:#cfd6dd;letter-spacing:.08em;background:rgba(6,7,9,.55);padding:5px 9px;border-left:2px solid var(--amber)}
.pursuit-panel{border:1px solid rgba(224,27,36,.5);background:linear-gradient(180deg,rgba(40,8,10,.82),rgba(8,6,8,.8));padding:8px 11px;min-width:230px}
.pursuit-title{font-size:10px;letter-spacing:.3em;color:#ff8f8a;display:flex;align-items:center;gap:7px}
.pursuit-title .dot{width:7px;height:7px;border-radius:50%;background:#ff3b30;box-shadow:0 0 10px #ff3b30;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.pursuit-bar{height:4px;background:#2a1a1c;margin:7px 0 5px;transform:skewX(-20deg)}
.pursuit-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff3b30,#ffb648);transition:width .3s}
.pursuit-detail{font-size:10px;color:#e7c9c6;letter-spacing:.08em}

.hud-tc{position:absolute;left:50%;top:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:min(560px,80vw)}
.race-panel{display:flex;align-items:center;gap:20px;padding:8px 18px;background:linear-gradient(180deg,rgba(8,9,12,.72),rgba(8,9,12,.35));
  border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.08);min-width:340px;justify-content:center}
.race-position{font-family:var(--font-display);font-size:30px;line-height:1;color:#fff}
.race-position span{font-size:14px;color:#7d8690}
.race-laps{font-size:10px;letter-spacing:.2em;color:#c6ced6}
.race-timer{font-family:var(--font-display);font-size:22px;letter-spacing:.06em;color:var(--amber);min-width:104px;text-align:right}
.race-extra{font-size:10px;letter-spacing:.14em;color:#cfd6dd}
.countdown{position:absolute;top:34vh;left:50%;transform:translateX(-50%);font-family:var(--font-display);
  font-size:clamp(90px,16vw,210px);line-height:1;color:#fff;opacity:0;pointer-events:none;
  text-shadow:0 0 40px rgba(255,182,72,.5),0 10px 40px #000}
.countdown.show{animation:countpop .85s ease-out}
@keyframes countpop{0%{opacity:0;transform:translateX(-50%) scale(1.55)}18%{opacity:1;transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(.92)}}
.center-message{position:absolute;top:23vh;left:50%;transform:translateX(-50%);font-size:14px;letter-spacing:.28em;
  color:#fff;padding:8px 18px;background:rgba(5,6,8,.65);border-left:2px solid var(--amber);opacity:0;transition:opacity .2s;white-space:nowrap}
.center-message.show{opacity:1}
.wrongway{position:absolute;top:16vh;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-size:44px;
  letter-spacing:.16em;color:#ff3b30;text-shadow:0 0 26px rgba(255,59,48,.7);animation:blink .8s infinite}

.hud-tr{position:absolute;right:26px;top:22px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.heat-panel{display:flex;align-items:center;gap:10px;padding:6px 12px;background:rgba(6,7,9,.55);border:1px solid #333a42}
.heat-label{font-size:9px;letter-spacing:.3em;color:#8b949d}
.heat-stars{display:flex;gap:4px}
.heat-stars i{width:13px;height:13px;display:block;background:#2b3138;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.heat-stars i.on{background:linear-gradient(180deg,#ffd98a,#ff7a18)}
.heat-stars.hot i.on{animation:heatpulse 1.1s infinite}
@keyframes heatpulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
.bounty-panel{display:flex;align-items:baseline;gap:8px;padding:4px 12px;background:rgba(6,7,9,.45)}
.bounty-label{font-size:8px;letter-spacing:.3em;color:#7d8690}
.bounty-value{font-family:var(--font-display);font-size:18px;letter-spacing:.06em;color:#e8edf2}
.cop-panel{font-size:9px;letter-spacing:.24em;color:#ff9d97;background:rgba(50,8,10,.6);padding:4px 10px;border:1px solid rgba(224,27,36,.4)}
.cop-panel span{font-family:var(--font-display);font-size:14px;color:#fff;margin-right:3px}

.hud-bl{position:absolute;left:26px;bottom:24px;display:flex;flex-direction:column;gap:8px}
.minimap-frame{position:relative;width:220px;height:220px;border:1px solid rgba(255,255,255,.18);
  background:rgba(4,5,7,.7);box-shadow:0 12px 40px rgba(0,0,0,.55);overflow:hidden}
.minimap-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 55%,rgba(0,0,0,.55));}
#minimap{width:100%;height:100%;display:block}
.minimap-label{position:absolute;left:8px;top:7px;font-size:8px;letter-spacing:.3em;color:#b9c2cb}
.district-name{font-family:var(--font-display);font-size:22px;letter-spacing:.14em;color:#e9eef3;opacity:.9}

.hud-br{position:absolute;right:22px;bottom:18px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.speedo-wrap{position:relative;width:196px;height:196px;filter:drop-shadow(0 8px 26px rgba(0,0,0,.6))}
#speedo{width:100%;height:100%;transform:rotate(0deg)}
.gauge-bg{fill:rgba(6,7,9,.62);stroke:#2c3239;stroke-width:1}
.gauge-track{fill:none;stroke:#242a30;stroke-width:9;stroke-linecap:butt}
.gauge-fill{fill:none;stroke:url(#gaugeGrad);stroke-width:9;stroke-linecap:butt;transition:stroke .2s}
.gauge-fill.hot{stroke:url(#gaugeHot)}
.gauge-hub{fill:#dfe5ea}
#gauge-ticks line{stroke:#7b848e;stroke-width:1.4}
#gauge-ticks text{fill:#8b949d;font-size:8px;font-family:var(--font-ui);letter-spacing:.1em}
.speedo-readout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:10px}
.speed-value{font-family:var(--font-display);font-size:58px;line-height:.86;letter-spacing:.01em;color:#f7f9fb}
.speed-unit{font-size:9px;letter-spacing:.34em;color:#8b949d;margin-top:2px}
.gear-value{position:absolute;right:34px;bottom:32px;font-family:var(--font-display);font-size:26px;color:var(--amber)}
.nitro-wrap{display:flex;align-items:center;gap:10px}
.nitro-label{font-size:10px;letter-spacing:.18em;color:#9aa3ad}
.nitro-bar{width:150px;height:7px;background:#23282e;transform:skewX(-20deg);overflow:hidden;border:1px solid #3a4149}
.nitro-bar i{display:block;height:100%;width:55%;background:linear-gradient(90deg,#2e7cf6,#7ad4ff);box-shadow:0 0 12px rgba(74,160,255,.6)}
.nitro-bar i.full{background:linear-gradient(90deg,#2e7cf6,#9ee7ff)}
.speedbreaker-pill{position:absolute;right:210px;bottom:4px;font-size:9px;letter-spacing:.16em;color:#8b949d;
  border:1px solid #343b43;background:rgba(6,7,9,.6);padding:4px 9px;white-space:nowrap}
.speedbreaker-pill b{color:var(--amber)}

.damage-flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 55%,rgba(255,40,20,0),rgba(255,30,10,.55));opacity:0;transition:opacity .12s}
.damage-flash.on{opacity:1}
.hud-toast{position:absolute;left:50%;bottom:20vh;transform:translateX(-50%);font-size:12px;letter-spacing:.16em;
  color:#fff;background:rgba(8,9,12,.82);border:1px solid #3c434c;border-left:3px solid var(--amber);
  padding:9px 16px;opacity:0;transition:opacity .22s;white-space:nowrap}
.hud-toast.show{opacity:1}

/* ---------- cinematic busted / evaded ---------- */
.cinematic{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,rgba(20,4,6,.55),rgba(0,0,0,.92));pointer-events:none;opacity:0;transition:opacity .4s}
.cinematic.show{opacity:1}
.cinematic::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(30,80,255,.35),transparent 28%,transparent 72%,rgba(30,80,255,.35))}
.cinematic.busted::before{background:linear-gradient(90deg,rgba(255,30,30,.30),transparent 30%,transparent 70%,rgba(255,30,30,.30));animation:sirenflash .7s infinite}
@keyframes sirenflash{0%,100%{opacity:.35}50%{opacity:.85}}
.cinematic-kicker{font-size:11px;letter-spacing:.5em;color:#aeb6bf;margin-bottom:10px}
.cinematic-title{font-family:var(--font-display);font-size:clamp(70px,13vw,168px);line-height:.9;letter-spacing:.04em;
  color:#fff;text-shadow:0 0 50px rgba(224,27,36,.55),0 14px 50px #000;transform:skewX(-6deg)}
.cinematic.evaded .cinematic-title{text-shadow:0 0 50px rgba(46,124,246,.55),0 14px 50px #000}
.cinematic-sub{margin-top:14px;font-size:12px;letter-spacing:.24em;color:#cfd6dd;text-align:center;line-height:1.9;max-width:640px}

/* ---------- mobile controls ---------- */
.touch-controls{position:absolute;inset:0;z-index:16;pointer-events:none;display:none}
.touch-controls .tc-left,.touch-controls .tc-right{position:absolute;bottom:18px;display:flex;gap:10px;pointer-events:auto}
.touch-controls .tc-left{left:18px}
.touch-controls .tc-right{right:18px}
.touch-btn{width:62px;height:62px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(10,12,15,.45);color:#fff;font-size:18px;display:grid;place-items:center;backdrop-filter:blur(2px)}
.touch-btn:active{background:rgba(255,182,72,.35)}
body.touch .touch-controls{display:block}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .career-layout{grid-template-columns:280px 1fr}
  .bl-grid{grid-template-columns:repeat(3,1fr)}
  .garage-layout{grid-template-columns:270px 1fr}
  .garage-layout .tune-panel{display:none}
  .events-layout{grid-template-columns:1fr 300px}
}
@media (max-width:860px){
  .content{padding:16px;gap:14px}
  .topbar{padding:12px 16px}
  .footerbar{padding:10px 16px}
  .career-layout{grid-template-columns:1fr;overflow:auto}
  .rap-sheet{display:none}
  .bl-grid{grid-template-columns:repeat(3,1fr);overflow:visible}
  .garage-layout{grid-template-columns:1fr}
  .car-picker{max-height:170px}
  .setup-layout{grid-template-columns:1fr}
  .hud-tl{left:12px;top:10px;max-width:220px}
  .hud-tr{right:12px;top:10px}
  .hud-br{right:8px;bottom:8px}
  .speedo-wrap{width:140px;height:140px}
  .speed-value{font-size:40px}
  .hud-bl{left:12px;bottom:12px}
  .minimap-frame{width:150px;height:150px}
  .district-name{font-size:15px}
  .speedbreaker-pill{display:none}
  .race-panel{gap:12px; min-width:260px}
  .hud-tc{top:64px}
  .events-layout{grid-template-columns:1fr}
  .side-panel{display:none}
  .main-menu .mm-inner{padding:18px}
  .mm-side{display:none}
  .mm-nav{width:100%}
}
@media (max-height:680px){
  .rs-photo{display:none}
  .mm-logo .l2{font-size:44px}
}