#hud{position:absolute;inset:0;pointer-events:none;z-index:5}
.hud-top{position:absolute;top:1rem;inset-inline:1rem;display:flex;gap:.55rem;align-items:flex-start}
.stat{display:flex;align-items:baseline;gap:.4rem;padding:.5rem .85rem;border-radius:var(--radius-sm)}
.stat-label{font-size:.66rem;color:var(--muted);letter-spacing:.06em}
.stat-value{font-size:1.3rem;font-weight:800;line-height:1}
.stat-unit{font-size:.66rem;color:var(--muted)}
.hud-actions{margin-inline-start:auto;display:flex;gap:.5rem;pointer-events:auto}
.icon-btn{
  width:44px;height:44px;display:grid;place-items:center;border-radius:13px;cursor:pointer;
  color:var(--text);background:var(--panel);border:1px solid var(--border);
  backdrop-filter:blur(14px);transition:transform .15s var(--ease),background .2s,border-color .2s;
}
.icon-btn svg{width:20px;height:20px}
.icon-btn:hover{background:rgba(255,255,255,.11);transform:translateY(-2px)}
.icon-btn.off{color:var(--primary-2);border-color:rgba(220,38,38,.55)}
.gauge-wrap{position:absolute;bottom:1.1rem;inset-inline-start:1.1rem;width:178px;padding:.65rem .7rem .45rem;text-align:center}
.gauge{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 12px rgba(255,90,77,.25))}
.gauge-track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:9;stroke-linecap:round}
.gauge-fill{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .1s linear,stroke .3s ease}
.needle{stroke:#fff;stroke-width:2.5;stroke-linecap:round;transition:transform .1s linear}
.hub{fill:#fff}
.gauge-read{margin-top:-.75rem}
.gauge-read .num{font-size:1.55rem;font-weight:900;letter-spacing:-.01em}
.gauge-read small{display:block;font-size:.62rem;color:var(--muted);letter-spacing:.14em}
#popups{position:absolute;inset-inline:0;top:34%;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.popup{font-family:var(--font-num);font-weight:900;font-size:1.45rem;animation:pop 1.05s var(--ease) forwards}
.popup.good{color:var(--amber);text-shadow:0 0 22px rgba(251,191,36,.65)}
.popup.mid{color:var(--secondary-2);text-shadow:0 0 22px rgba(96,165,250,.6)}
.popup.bad{color:var(--primary-2);text-shadow:0 0 22px rgba(255,90,77,.6)}
@keyframes pop{
  0%{opacity:0;transform:translateY(16px) scale(.85)}
  18%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-44px) scale(.95)}
}
#touch{position:absolute;bottom:1.1rem;inset-inline-end:1.1rem;display:flex;gap:.6rem;pointer-events:auto}
.touch-btn{
  width:76px;height:76px;border-radius:24px;display:grid;place-items:center;cursor:pointer;
  font-family:var(--font-ar);font-size:1.05rem;font-weight:800;color:var(--text);
  background:var(--panel);border:1px solid var(--border-strong);backdrop-filter:blur(14px);
  transition:transform .1s var(--ease),background .15s;
}
.touch-btn.wide{width:108px;font-size:.9rem}
.touch-btn:active,.touch-btn.on{background:linear-gradient(135deg,rgba(220,38,38,.6),rgba(37,99,235,.4));transform:scale(.95)}
#vignette{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at 50% 55%,transparent 45%,rgba(0,0,0,.55) 100%);
  box-shadow:inset 0 0 160px 30px rgba(0,0,0,.6);transition:box-shadow .4s ease
}
body.fast #vignette{box-shadow:inset 0 0 220px 60px rgba(0,0,0,.8)}
#speedlines{
  position:absolute;inset:-8%;pointer-events:none;z-index:4;opacity:0;transition:opacity .4s ease;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px);
  mask-image:radial-gradient(ellipse at 50% 50%,transparent 42%,#000 92%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,transparent 42%,#000 92%);
}
body.fast #speedlines{opacity:1;animation:rush .45s linear infinite}
@keyframes rush{from{transform:scale(1.02)}to{transform:scale(1.12)}}
#flash{
  position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;
  background:radial-gradient(circle at 50% 55%,rgba(255,235,190,.95),rgba(220,38,38,.6) 45%,transparent 78%);
}
#flash.on{animation:flashOut .6s ease-out}
@keyframes flashOut{0%{opacity:1}100%{opacity:0}}
.loader{
  width:46px;height:46px;margin:0 auto 1.1rem;border-radius:50%;
  border:3px solid rgba(255,255,255,.12);border-top-color:var(--primary-2);animation:spin .9s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}