/* ==========================================================================
   HERNÍ HUD — jednotný moderní vzhled (hud.js, toast.js, hudplan.js).
   Načítá se PO style.css / touch.css a přepisuje jejich pravidla HUDu.
   ZÁSADY
   - jedna rodina písma (--hud-font, systémová), čísla tabulková (šířka neposkakuje);
   - všechno v jednotkách --hud-u (≈ 1,11 % výšky okna: 8 px na 720p, 12 px na 1080p) → HUD se škáluje s oknem;
   - barvy / poloměry / stíny jen z proměnných níž (BR, letecký HUD a panely je sdílí);
   - plochy = poloprůhledná tmavá (--hud-bg) BEZ rozostření; backdrop-filter jen s body.hud-blur
     (hud.setBlur — main.js ho vypíná na grafice „low");
   - text nad světem má vždy stín (--hud-ts) nebo podklad; animace jen transform / opacity;
   - žádné emoji jako ikony (headless / některé systémy je nekreslí) → inline SVG, currentColor;
   - dotyk (body.touch): polohy a velikosti řídí touch.css (má vyšší specifičnost), tady jen vzhled
     a oddíl „DOTYK" na konci.
   ========================================================================== */
:root {
  --hud-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hud-u: clamp(7.5px, 1.111vh, 13px);
  --hud-pad: calc(var(--hud-u) * 3);
  --hud-text: #f4f6f9;
  --hud-dim: rgba(228, 234, 243, .68);
  --hud-bg: rgba(12, 15, 20, .66);
  --hud-bg-solid: rgba(12, 15, 20, .88);
  --hud-line: rgba(255, 255, 255, .13);
  --hud-accent: #ffc53d;   /* zvýraznění: klávesy, aktivní slot, hvězdy, peníze */
  --hud-info: #45b6ff;     /* navigace, autojízda, elektro */
  --hud-good: #4ade80;
  --hud-warn: #ffb224;
  --hud-bad: #ff4d4f;
  --hud-r: calc(var(--hud-u) * 1.1);
  --hud-r-s: calc(var(--hud-u) * .6);
  --hud-shadow: 0 calc(var(--hud-u) * .6) calc(var(--hud-u) * 2.4) rgba(0, 0, 0, .38);
  --hud-ts: 0 1px 2px rgba(0, 0, 0, .95), 0 0 calc(var(--hud-u) * 1) rgba(0, 0, 0, .75), 0 0 calc(var(--hud-u) * 2.2) rgba(0, 0, 0, .5);
  --hud-ease: cubic-bezier(.2, .8, .2, 1);
  --hud-speedo: calc(var(--hud-u) * 21);
  --hud-mm: calc(var(--hud-u) * 20);
}

#hud, #hud-toasts, #wslots, #ammo-hud, #act-hint, #bail-hint, #br-hud, #br-vitals, #br-feed, #br-team, #br-pick, #br-out,
.fhud, #skydive-hud, #mp-status, #netstat, #brawl-hud, #fsd-ind { font-family: var(--hud-font); }
#hud { color: var(--hud-text); font-variant-numeric: tabular-nums; }

/* ---------- RYCHLOMĚR: oblouk otáček (elektro výkon / rekuperace), číslo, stupeň, ikony stavu ---------- */
#speedo {
  position: absolute; right: var(--hud-pad); bottom: var(--hud-pad);
  width: var(--hud-speedo); height: var(--hud-speedo); border-radius: 50%; border: 0; box-shadow: none;
  background: radial-gradient(closest-side, rgba(8, 10, 14, .62) 0, rgba(8, 10, 14, .46) 62%, rgba(8, 10, 14, .2) 84%, rgba(8, 10, 14, 0) 100%);
  display: block; text-align: center; text-shadow: var(--hud-ts);
}
#hud.foot #speedo, #hud.foot #car-name, #hud.foot #fsd-ind { display: none; }
#speed-gauge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#speed-gauge path { fill: none; stroke-linecap: butt; }
#sg-track { stroke: rgba(8, 10, 14, .58); stroke-width: 12; } /* tmavý pás pod obloukem = kontrast i nad světlým světem */
#sg-ticks { stroke: rgba(255, 255, 255, .5); stroke-width: 5; stroke-dasharray: 5 120; stroke-dashoffset: 2.5; }
#sg-red { stroke: var(--hud-bad); stroke-width: 8; opacity: .55; }
#sg-fill { stroke: #fff; stroke-width: 8; stroke-dasharray: 0 1000; }
#sg-zero { stroke: #fff; stroke-width: 13; display: none; }
#speedo[data-g="red"] #sg-fill { stroke: var(--hud-bad); }
#speedo[data-g="ev"] #sg-fill { stroke: var(--hud-info); }
#speedo[data-g="regen"] #sg-fill { stroke: var(--hud-good); }
#speedo[data-g="ev"] #sg-red, #speedo[data-g="regen"] #sg-red, #speedo[data-g="ev"] #sg-ticks, #speedo[data-g="regen"] #sg-ticks { display: none; }
#speedo[data-g="ev"] #sg-zero, #speedo[data-g="regen"] #sg-zero { display: inline; }
#speedo.nogauge #speed-gauge, #speedo.nogauge #speed-icons { display: none; }
#speed-value {
  position: absolute; left: 0; right: 0; top: 25%;
  font-size: calc(var(--hud-u) * 6.6); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--hud-text);
}
#speed-unit {
  position: absolute; left: 0; right: 0; top: 57.5%; margin: 0;
  font-size: calc(var(--hud-u) * 1.35); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--hud-dim);
}
#speed-gear {
  position: absolute; left: 50%; top: 68%; transform: translateX(-50%); margin: 0; min-height: 0;
  min-width: calc(var(--hud-u) * 3.4); height: calc(var(--hud-u) * 3.4); padding: 0 calc(var(--hud-u) * .7); box-sizing: border-box;
  border-radius: var(--hud-r-s); border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(8, 10, 14, .5);
  font-size: calc(var(--hud-u) * 2.1); font-weight: 800; line-height: calc(var(--hud-u) * 3.4 - 3px); letter-spacing: 0; color: var(--hud-accent);
  white-space: nowrap;
}
#speed-gear:empty { display: none; }
#speed-gear.long { font-size: calc(var(--hud-u) * 1.6); }
#speed-gear.ev, #speed-gear.jet { color: var(--hud-info); border-color: rgba(69, 182, 255, .5); }
#speed-gear.rev { color: var(--hud-bad); border-color: rgba(255, 77, 79, .55); }
#speed-gear.ok { color: var(--hud-good); }
#speed-gear.wait { color: var(--hud-dim); }
#speed-icons {
  position: absolute; left: 50%; bottom: calc(var(--hud-u) * -1.2); transform: translateX(-50%);
  display: flex; gap: calc(var(--hud-u) * .7); align-items: center;
}
#speed-icons i { width: calc(var(--hud-u) * 2.5); height: calc(var(--hud-u) * 2.5); opacity: 0; color: var(--hud-good); transition: opacity .12s; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
#speed-icons svg { display: block; width: 100%; height: 100%; }
#speed-icons i.on { opacity: 1; }
#speed-icons i[data-k="hb"] { color: var(--hud-bad); }
#speed-icons i[data-k="esp"] { color: var(--hud-warn); }
#speed-icons i[data-k="auto"] { color: var(--hud-info); }
#speed-icons i[data-k="bl"].on, #speed-icons i[data-k="br"].on { animation: hud-blink .76s steps(2, jump-none) infinite; }
#speed-icons i[data-k="esp"].on { animation: hud-blink .3s steps(2, jump-none) infinite; }
@keyframes hud-blink { from { opacity: 1; } to { opacity: .12; } }

#car-name {
  right: calc(var(--hud-pad) + var(--hud-speedo) + var(--hud-u) * 1.2); bottom: calc(var(--hud-pad) + var(--hud-u) * .6);
  max-width: calc(var(--hud-u) * 34); gap: calc(var(--hud-u) * .2); text-shadow: var(--hud-ts);
}
#car-name-main { font-size: calc(var(--hud-u) * 1.8); font-weight: 700; color: var(--hud-text); }
#car-name-sub { font-size: calc(var(--hud-u) * 1.25); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 246, 249, .86); }

/* autojízda: odznak nad rychloměrem */
#fsd-ind {
  right: var(--hud-pad); bottom: calc(var(--hud-pad) + var(--hud-speedo) + var(--hud-u) * .6); width: var(--hud-speedo);
  padding: 0; gap: calc(var(--hud-u) * .7); height: calc(var(--hud-u) * 3); border-radius: var(--hud-r-s);
  font-size: calc(var(--hud-u) * 1.4); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-shadow: none;
}
#fsd-ind.fsd-ready { color: var(--hud-dim); background: var(--hud-bg); border: 1px solid var(--hud-line); }
#fsd-ind.fsd-ready b { color: var(--hud-text); border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 4px; padding: 0 .45em; margin-left: .2em; }
#fsd-ind.fsd-on { color: #06131f; background: var(--hud-info); border: 0; box-shadow: 0 0 calc(var(--hud-u) * 2) rgba(69, 182, 255, .45); }
.fsd-wheel { width: 1em; height: 1em; }
#fsd-msg { display: none; } /* nahrazeno oznámeními (#hud-toasts) */

/* panely nad rychloměrem (letadlo / vrtulník, padák) se posunou s ním */
.fhud, #skydive-hud {
  right: var(--hud-pad); bottom: calc(var(--hud-pad) + var(--hud-speedo) + var(--hud-u) * 4.5);
  background: var(--hud-bg); border: 1px solid var(--hud-line); border-radius: var(--hud-r); box-shadow: var(--hud-shadow); color: var(--hud-text);
}
.fhud .fh-k, #skydive-hud .sd-k, .fhud small, #skydive-hud small { color: var(--hud-dim); }
.fhud .fh-type, #skydive-hud .sd-ph, .fhud .fh-warn.fh-on, #skydive-hud .sd-warn.sd-on { color: var(--hud-accent); }
.fhud .fh-warn.fh-red, #skydive-hud .sd-warn.sd-red { color: var(--hud-bad); }

/* odjezdy ze zastávky (tramstops.js): JEN pěšky u zastávky (za jízdy kolem ne), malý panel nad náboji; na dotyku nikdy */
#hud:not(.foot) #tstop-panel { display: none; }
body:not(.touch) #tstop-panel {
  right: var(--hud-pad); bottom: calc(var(--hud-pad) + var(--hud-u) * 10); width: calc(var(--hud-u) * 27); padding: calc(var(--hud-u) * .8) calc(var(--hud-u) * 1.1);
  background: var(--hud-bg-solid); border: 0; border-radius: var(--hud-r); box-shadow: var(--hud-shadow); backdrop-filter: none; -webkit-backdrop-filter: none;
  font: 600 calc(var(--hud-u) * 1.4)/1.4 var(--hud-font); color: var(--hud-text);
}
body:not(.touch) #tstop-panel .ts-ico { display: none; }
body:not(.touch) #tstop-panel .ts-name { font-weight: 700; color: var(--hud-text); }
body:not(.touch) #tstop-panel .ts-clock, body:not(.touch) #tstop-panel .ts-dest { color: var(--hud-dim); }
body:not(.touch) #tstop-panel .ts-min { color: var(--hud-accent); }
body:not(.touch) #tstop-panel .ts-head { border-bottom-color: var(--hud-line); }

/* ---------- MINIMAPA (kulatá) + poloha pod ní ---------- */
#minimap {
  left: var(--hud-pad); bottom: calc(var(--hud-pad) + var(--hud-u) * 5.6);
  width: var(--hud-mm); height: var(--hud-mm); border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .22); background: none;
  box-shadow: 0 0 0 calc(var(--hud-u) * .45) rgba(12, 15, 20, .5), var(--hud-shadow);
}
#location-box {
  left: var(--hud-pad); bottom: calc(var(--hud-pad) - var(--hud-u) * .3); width: var(--hud-mm); max-width: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--hud-u) * .25);
  background: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: center;
  text-shadow: 0 1px 2px #000, 0 0 calc(var(--hud-u) * .8) rgba(0, 0, 0, .9), 0 0 calc(var(--hud-u) * 2) rgba(0, 0, 0, .7);
}
#location, #location-sub { max-width: calc(var(--hud-mm) + var(--hud-u) * 5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#location { font-size: calc(var(--hud-u) * 1.75); font-weight: 700; line-height: 1.15; color: var(--hud-text); }
#location-sub { font-size: calc(var(--hud-u) * 1.25); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 246, 249, .86); }
#location-sub:empty { display: none; }

/* ---------- NAVIGACE: karta s odbočkou nad minimapou ---------- */
#nav-banner {
  left: var(--hud-pad); bottom: calc(var(--hud-pad) + var(--hud-u) * 5.6 + var(--hud-mm) + var(--hud-u) * 1.8);
  min-width: var(--hud-mm); max-width: calc(var(--hud-u) * 36); box-sizing: border-box; padding: calc(var(--hud-u) * .8);
  display: flex; align-items: center; gap: calc(var(--hud-u) * 1.1);
  background: var(--hud-bg-solid); border: 0; border-left: 0; border-radius: var(--hud-r); box-shadow: var(--hud-shadow);
  color: var(--hud-text); font-size: calc(var(--hud-u) * 1.5); font-weight: 600; text-shadow: none;
}
#nav-banner.hidden { display: none; }
#nav-banner .nav-turn {
  flex: none; width: calc(var(--hud-u) * 5.2); height: calc(var(--hud-u) * 5.2); border-radius: var(--hud-r-s);
  background: var(--hud-info); color: #06131f; display: flex; align-items: center; justify-content: center;
}
#nav-banner .nav-turn svg { width: 72%; height: 72%; }
#nav-banner.nav-done .nav-turn { background: var(--hud-good); }
#nav-banner .nav-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: calc(var(--hud-u) * .25); padding-right: calc(var(--hud-u) * 2.2); }
#nav-banner .navd { color: var(--hud-text); font-size: calc(var(--hud-u) * 1.6); font-weight: 600; white-space: nowrap; }
#nav-banner .navd b { font-size: calc(var(--hud-u) * 2.5); font-weight: 800; letter-spacing: -.01em; margin-right: .15em; }
#nav-banner .nav-dest { color: var(--hud-dim); font-size: calc(var(--hud-u) * 1.3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nav-banner .nav-x {
  position: absolute; right: calc(var(--hud-u) * .6); top: calc(var(--hud-u) * .6); float: none; margin: 0;
  width: calc(var(--hud-u) * 2.2); height: calc(var(--hud-u) * 2.2); border-radius: 50%; color: var(--hud-dim); opacity: 1;
  display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer;
}
#nav-banner .nav-x svg { width: 62%; height: 62%; }
#nav-banner .nav-x:hover { color: var(--hud-text); background: rgba(255, 255, 255, .12); }

/* ---------- VLEVO NAHOŘE: peníze · čas + počasí · sanitky ---------- */
#stats {
  left: var(--hud-pad); top: calc(var(--hud-pad) - var(--hud-u) * .6); padding: 0; background: none; backdrop-filter: none; border-radius: 0;
  display: flex; align-items: center; gap: calc(var(--hud-u) * .8); font-size: calc(var(--hud-u) * 1.7); line-height: 1; text-shadow: none;
}
#stats > div {
  display: flex; align-items: center; gap: calc(var(--hud-u) * .7); height: calc(var(--hud-u) * 3.6); padding: 0 calc(var(--hud-u) * 1.3);
  border-radius: var(--hud-r-s); background: var(--hud-bg); font-weight: 700; white-space: nowrap;
}
#stats svg { width: calc(var(--hud-u) * 2); height: calc(var(--hud-u) * 2); flex: none; }
#money-line { color: var(--hud-text); font-weight: 700; }
#money-line svg { color: var(--hud-accent); }
#stats > div.hidden { display: none; }
#amb-line svg { color: var(--hud-bad); width: calc(var(--hud-u) * 1.6); height: calc(var(--hud-u) * 1.6); }
#clock-box {
  position: static; width: auto; right: auto; bottom: auto; text-align: left; letter-spacing: 0;
  font: 700 calc(var(--hud-u) * 1.7)/1 var(--hud-font); color: var(--hud-text); text-shadow: none;
}
#clock { font-variant-numeric: tabular-nums; }
#wx-label { display: flex; align-items: center; gap: calc(var(--hud-u) * .5); font: 600 calc(var(--hud-u) * 1.55)/1 var(--hud-font); color: var(--hud-dim);
  padding-left: calc(var(--hud-u) * .9); border-left: 1px solid var(--hud-line); }
#wx-label:empty { display: none; }
#wx-label svg { color: var(--hud-text); }

#netstat { font: 700 calc(var(--hud-u) * 1.3)/1 var(--hud-font); font-variant-numeric: tabular-nums; right: var(--hud-pad); top: calc(var(--hud-u) * .7); gap: 2px; text-shadow: none; }
#netstat span { padding: calc(var(--hud-u) * .35) calc(var(--hud-u) * .7); border-radius: 4px; background: var(--hud-bg); }
#netstat .good { color: var(--hud-good); } #netstat .weak { color: var(--hud-warn); } #netstat .bad { color: var(--hud-bad); }
#mp-status::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .5em; border-radius: 50%; background: var(--hud-good); }
#mp-status[data-on="0"]::before { background: var(--hud-bad); }
#mp-status { background: var(--hud-bg) !important; border-radius: var(--hud-r-s) !important; backdrop-filter: none !important; font-size: calc(var(--hud-u) * 1.4) !important; color: var(--hud-dim) !important; }

/* ---------- HLEDANOST ---------- */
#wanted { right: var(--hud-pad); top: calc(var(--hud-pad) + var(--hud-u) * .6); }
#wanted-stars { font: 400 calc(var(--hud-u) * 3.4)/1 var(--hud-font); letter-spacing: .06em; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 calc(var(--hud-u) * 1.5) rgba(0, 0, 0, .5); }
#wanted-stars b { color: var(--hud-accent); font-weight: 400; }
#wanted-stars i { font-style: normal; color: rgba(255, 255, 255, .26); }
#wanted-bust { height: calc(var(--hud-u) * .55); margin-top: calc(var(--hud-u) * .7); border-radius: 99px; background: rgba(8, 10, 14, .6); }
#wanted-bust i { width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--hud-info), var(--hud-bad)); }

/* ---------- OZNÁMENÍ (toast.js): ikona + text, sloupec vpravo nahoře ---------- */
#hud-toasts {
  position: fixed; z-index: 60; right: var(--hud-pad); top: calc(var(--hud-pad) + var(--hud-u) * 6.5); pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--hud-u) * .7);
}
#hud-toasts .ht {
  display: flex; align-items: center; gap: calc(var(--hud-u) * 1); max-width: min(calc(var(--hud-u) * 52), 82vw); box-sizing: border-box;
  padding: calc(var(--hud-u) * .9) calc(var(--hud-u) * 1.6) calc(var(--hud-u) * .9) calc(var(--hud-u) * 1.1);
  border-radius: var(--hud-r-s); background: var(--hud-bg-solid); box-shadow: var(--hud-shadow); --k: var(--hud-text);
  border-left: 3px solid var(--k); color: var(--hud-text); font: 600 calc(var(--hud-u) * 1.65)/1.3 var(--hud-font);
  animation: ht-in .3s var(--hud-ease); transition: opacity .24s ease, transform .24s ease;
}
#hud-toasts .ht.out { opacity: 0; transform: translateX(calc(var(--hud-u) * 2)); }
#hud-toasts .ht-ic { flex: none; width: calc(var(--hud-u) * 2.3); height: calc(var(--hud-u) * 2.3); color: var(--k); }
#hud-toasts .ht-ic svg { display: block; width: 100%; height: 100%; }
#hud-toasts .ht-police, #hud-toasts .ht-bad { --k: var(--hud-bad); }
#hud-toasts .ht-warn { --k: var(--hud-warn); }
#hud-toasts .ht-ok { --k: var(--hud-good); }
#hud-toasts .ht-nav, #hud-toasts .ht-air, #hud-toasts .ht-car, #hud-toasts .ht-phone { --k: var(--hud-info); }
#hud-toasts .ht-money, #hud-toasts .ht-radio, #hud-toasts .ht-gun { --k: var(--hud-accent); }
@keyframes ht-in { from { opacity: 0; transform: translateX(calc(var(--hud-u) * 3)); } to { opacity: 1; transform: none; } }
body.br-mode #hud-toasts { right: auto; left: 50%; transform: translateX(-50%); top: 22vh; align-items: center; }
body.photo-mode #hud-toasts, body.suit-helm #hud-toasts { display: none; }
body.touch:has(#esc-menu:not(.hidden)) #hud-toasts { display: none; } /* na malém displeji by ležela přes ESC menu */

/* ---------- VELKÝ BANNER (nehoda, zatčení) ---------- */
#score-pop {
  top: 11vh; gap: calc(var(--hud-u) * 1.4); padding: calc(var(--hud-u) * 1) calc(var(--hud-u) * 2.4) calc(var(--hud-u) * 1) calc(var(--hud-u) * 1);
  font: 800 calc(var(--hud-u) * 2.3)/1.1 var(--hud-font); letter-spacing: .08em; text-transform: uppercase; color: var(--hud-text);
  background: var(--hud-bg-solid); border: 0; border-left: 0; border-radius: var(--hud-r-s); box-shadow: var(--hud-shadow); text-shadow: none;
}
#score-pop b { color: var(--hud-accent); }
.bn-tag { background: var(--hud-bad); color: #fff; font-weight: 800; font-size: calc(var(--hud-u) * 1.7); letter-spacing: .14em; padding: calc(var(--hud-u) * .55) calc(var(--hud-u) * 1.1); border-radius: 4px; }

/* ---------- KONTEXTOVÁ AKCE: klávesa v rámečku + text dole uprostřed ---------- */
#bail-hint, #act-hint {
  bottom: calc(var(--hud-pad) + var(--hud-u) * 10); padding: calc(var(--hud-u) * .7) calc(var(--hud-u) * 1.6) calc(var(--hud-u) * .7) calc(var(--hud-u) * .8);
  display: flex; align-items: center; gap: calc(var(--hud-u) * 1.1); border-radius: var(--hud-r-s); border: 0;
  background: var(--hud-bg); color: var(--hud-text); font: 600 calc(var(--hud-u) * 1.8)/1 var(--hud-font); box-shadow: none; white-space: nowrap;
}
#bail-hint.hidden, #act-hint.hidden { display: none; }
#bail-hint .k, #act-hint .k {
  min-width: calc(var(--hud-u) * 3); height: calc(var(--hud-u) * 3); padding: 0 calc(var(--hud-u) * .7); margin: 0; box-sizing: border-box;
  border-radius: calc(var(--hud-u) * .55); border: 1.5px solid rgba(255, 255, 255, .85); border-bottom-width: 3px; background: rgba(255, 255, 255, .1);
  color: #fff; font-weight: 800; font-size: calc(var(--hud-u) * 1.7); line-height: calc(var(--hud-u) * 3 - 4.5px);
}
#act-hint .ai { display: none; }

/* ---------- PĚŠKY: kříž, náboje, sloty, zdraví ---------- */
#xhair > div { box-shadow: 0 0 0 1px rgba(0, 0, 0, .45) !important; border-radius: 1px; }
body:not(.touch) #ammo-hud {
  right: calc(var(--hud-pad) + var(--hud-speedo) + var(--hud-u) * 2) !important; bottom: var(--hud-pad) !important;
  font: 800 calc(var(--hud-u) * 5.4)/1 var(--hud-font) !important; font-variant-numeric: tabular-nums !important; letter-spacing: -.02em;
  color: var(--hud-text) !important; text-shadow: var(--hud-ts) !important;
}
body:not(.touch) #hud.foot ~ #ammo-hud { right: var(--hud-pad) !important; }
body:not(.touch) #ammo-hud > div {
  font-size: calc(var(--hud-u) * 1.4) !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: 1 !important;
  color: var(--hud-dim); margin-bottom: calc(var(--hud-u) * .5) !important; line-height: 1.35;
}
body:not(.touch) #ammo-hud > div b { color: var(--hud-text); }
body:not(.touch) #ammo-hud > span { font-size: calc(var(--hud-u) * 2.4) !important; font-weight: 600; letter-spacing: 0; opacity: .7 !important; }

#wslots { bottom: calc(var(--hud-u) * 1.8); gap: calc(var(--hud-u) * .45); font: 700 calc(var(--hud-u) * 1.2)/1 var(--hud-font); color: var(--hud-text); align-items: flex-end; }
#wslots .ws {
  width: calc(var(--hud-u) * 6); height: calc(var(--hud-u) * 3.9); border-radius: var(--hud-r-s); background: var(--hud-bg);
  border: 0; border-bottom: 2px solid rgba(255, 255, 255, .16); box-sizing: border-box;
}
#wslots .ws.empty { opacity: .4; }
#wslots .ws.act { background: rgba(30, 34, 42, .9); border-color: var(--hud-accent); box-shadow: none; height: calc(var(--hud-u) * 5); margin-top: 0; }
#wslots .ws-k { left: calc(var(--hud-u) * .5); top: calc(var(--hud-u) * .4); font-size: calc(var(--hud-u) * 1.1); color: var(--hud-dim); opacity: 1; }
#wslots .ws.act .ws-k { color: var(--hud-accent); }
#wslots .ws-ico { width: calc(var(--hud-u) * 4.4); height: calc(var(--hud-u) * 1.8); color: var(--hud-text); }
#wslots .ws-n { right: calc(var(--hud-u) * .4); top: calc(var(--hud-u) * .35); font-size: calc(var(--hud-u) * 1.05); color: var(--hud-dim); }
#wslots .ws-am { bottom: calc(var(--hud-u) * .3); font-size: calc(var(--hud-u) * 1.1); color: var(--hud-dim); }
#wslots .ws.act .ws-ico { margin-top: calc(var(--hud-u) * -.7); }
#wslots .ws.need, #wslots .ws-bag.need { border-color: var(--hud-bad); }

#brawl-mehp { bottom: calc(var(--hud-u) * 8.2); width: calc(var(--hud-u) * 24); height: calc(var(--hud-u) * .7); border: 0; border-radius: 99px; background: rgba(8, 10, 14, .6); }
#brawl-mehp i { background: var(--hud-good); border-radius: 99px; }
.bh-bar { border: 0; border-radius: 99px; background: rgba(8, 10, 14, .6); height: calc(var(--hud-u) * 1.1); }
.bh-me .bh-bar i { background: var(--hud-good); } .bh-opp .bh-bar i { background: var(--hud-bad); }
.bh-name { letter-spacing: .14em; } .bh-vs, .bh-keys b { color: var(--hud-accent); }

/* ---------- BATTLE ROYALE: jen sladění barev a tvarů (logika a rozložení br.js beze změny) ---------- */
#br-vitals .br-hpw, #br-vitals .br-shw, #br-vitals .br-veh, #br-vitals .br-use { border-radius: var(--hud-r-s); }
#br-vitals .br-hpw { background: var(--hud-bg); }
#br-vitals .br-hp, #br-vitals .br-sh, #br-vitals .br-veh-bar { border-radius: 99px; background: rgba(255, 255, 255, .16); }
#br-vitals .br-hp i { background: var(--hud-text); }
#br-vitals .br-hpw.low .br-hp i { background: var(--hud-bad); }
#br-vitals .br-sh i { background: var(--hud-info); }
#br-vitals .br-hpw span { color: var(--hud-bad); } #br-vitals .br-shw span { color: var(--hud-info); }
#br-feed .br-kf { border-radius: var(--hud-r-s); }
#br-pick { border-radius: var(--hud-r-s); background: var(--hud-bg); }
#br-pick kbd, #br-vitals .br-items kbd { border-radius: 4px; }

/* ---------- rozostření pod panely jen na přání (hud.setBlur; ne na grafice „low") ---------- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.hud-blur #stats > div, body.hud-blur #act-hint, body.hud-blur #bail-hint, body.hud-blur #fsd-ind.fsd-ready {
    -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  }
}

/* ---------- DOTYK (body.touch) — hlavní cíl = mobil NA ŠÍŘKU: za hry jen nezbytné minimum, střed obrazovky a zóny
   palců (dolní rohy) bez informačních panelů. Rozvržení: vlevo nahoře malá minimapa (ťuknutí = celá mapa) + ulice pod ní,
   vedle ní ikona chatu, hledanost a karta odbočky; nahoře uprostřed jednořádková oznámení; dole uprostřed rychlost + stupeň
   (ve vozidle) / náboje + zbraň (pěšky; ťuknutí = lišta slotů na 5 s) a proužek zdraví. Skryté: peníze, hodiny + počasí,
   sanitky, online, FPS · ping (výchozí vypnuto — main.js), název auta, nápovědy kláves, jízdní řády zastávek, tlačítko mapy.
   Ověření: tools/hud_shots.mjs --layout (hudplan.js layoutReport: překryvy, střední třetina, podíl plochy). ---------- */
body.touch { --hud-tmm: 104px; --hud-tsp: 76px; --hud-tb: calc(6px + var(--sa-b)); } /* --hud-tb = spodní hrana prostředního pruhu (rychlost / náboje) */
@media (max-height: 500px) { body.touch { --hud-tmm: 88px; --hud-tsp: 62px; } }
body.touch #stats, body.touch #mp-status, body.touch #car-name, body.touch #fsd-ind, body.touch #tstop-panel,
body.touch #act-hint, body.touch #touch-controls #tc-map, body.touch #location-sub, body.touch #speed-icons,
body.touch #nav-banner .nav-dest, body.touch .bh-keys { display: none !important; }
body.touch #minimap {
  left: calc(8px + var(--sa-l)); top: calc(8px + var(--sa-t)); bottom: auto; width: var(--hud-tmm); height: var(--hud-tmm);
  border-radius: 50%; pointer-events: auto; touch-action: manipulation; box-shadow: 0 0 0 3px rgba(12, 15, 20, .5);
}
body.touch #location-box {
  left: calc(8px + var(--sa-l)); top: calc(12px + var(--sa-t) + var(--hud-tmm)); bottom: auto; width: var(--hud-tmm); max-width: none; padding: 0;
  align-items: center; text-align: center;
}
body.touch #location { font-size: 10.5px; max-width: calc(var(--hud-tmm) + 16px); }
body.touch #chat { left: calc(16px + var(--sa-l) + var(--hud-tmm)); top: calc(8px + var(--sa-t)); width: min(40vw, 300px); gap: 4px; }
body.touch #chat-toggle {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0;
  background: var(--hud-bg); color: var(--hud-text); pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
body.touch #chat-toggle svg { width: 22px; height: 22px; }
body.touch #chat:not(.open) #chat-input { display: none; }
body.touch #chat:not(.open):not(.show) #chat-log { display: none; }
body.touch #chat-log { max-height: 54px; }
body.touch #chat .chat-line { font-size: 12px; padding: 3px 8px; }
body.touch #wanted { right: auto; left: calc(68px + var(--sa-l) + var(--hud-tmm)); top: calc(19px + var(--sa-t)); transform: none; text-align: left; }
body.touch #wanted-stars { font-size: 19px; }
body.touch #wanted-bust { margin-top: 3px; height: 4px; }
body.touch #nav-banner {
  left: calc(16px + var(--sa-l) + var(--hud-tmm)); top: calc(58px + var(--sa-t)); bottom: auto; min-width: 0; max-width: 168px; padding: 4px; gap: 7px;
}
body.touch #nav-banner .nav-turn { width: 32px; height: 32px; }
body.touch #nav-banner .navd { font-size: 11.5px; } body.touch #nav-banner .navd b { font-size: 16px; }
body.touch #nav-banner .navd { white-space: normal; line-height: 1.15; } body.touch #nav-banner .navd b { display: block; margin: 0; }
body.touch #nav-banner .nav-body { padding-right: 6px; }
body.touch #nav-banner .nav-x { display: none; } /* zrušení navigace je v okně navigace (ESC menu) */
/* rychlost + stupeň: dole uprostřed, kompaktně */
body.touch #speedo, body.touch[data-tc-mode] #speedo {
  left: 50%; right: auto; transform: translateX(-50%); bottom: var(--hud-tb); width: var(--hud-tsp); height: var(--hud-tsp);
  background: radial-gradient(closest-side, rgba(8, 10, 14, .7) 0, rgba(8, 10, 14, .55) 70%, rgba(8, 10, 14, 0) 100%);
}
body.touch #hud.foot #speedo { display: none; }
body.touch #speed-value { top: 21%; font-size: calc(var(--hud-tsp) * .36); }
body.touch #speed-unit { top: 56%; font-size: 7.5px; letter-spacing: .1em; margin: 0; }
body.touch #speed-gear { top: 69%; min-width: 17px; height: 17px; line-height: 15px; padding: 0 4px; font-size: 11px; border-width: 1px; margin: 0; min-height: 0; }
body.touch #speed-gear.long { font-size: 9px; }
body.touch #sg-fill { stroke-width: 11; } body.touch #sg-track, body.touch #sg-red { stroke-width: 9; } body.touch #sg-ticks { display: none; }
/* náboje + zbraň pěšky: dole uprostřed; ťuknutí ukáže lištu slotů (inventory.js → body.ws-open) */
body.touch #ammo-hud {
  left: 50% !important; right: auto !important; transform: translateX(-50%); bottom: calc(6px + var(--hud-tb)) !important; max-width: 46vw;
  text-align: center !important; font: 800 24px/1 var(--hud-font) !important; font-variant-numeric: tabular-nums !important; color: var(--hud-text) !important;
  text-shadow: var(--hud-ts) !important; pointer-events: auto !important; touch-action: manipulation; padding: 6px 12px; white-space: nowrap;
}
body.touch #hud:not(.foot) ~ #ammo-hud { bottom: calc(6px + var(--hud-tb) + var(--hud-tsp)) !important; }
body.touch #ammo-hud > div { font-size: 10px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: 1 !important; color: var(--hud-dim); margin-bottom: 2px !important; }
body.touch #ammo-hud > span { font-size: 13px !important; opacity: .7 !important; }
/* klávesnicová nápověda („Pěsti · LMB = úder · B = obchod") na dotyku nedává smysl → jen jméno */
body.touch #ammo-hud > div:only-child { font-size: 0 !important; margin: 0 !important; }
body.touch #ammo-hud > div:only-child::before { content: "Pěsti"; font-size: 12px; color: var(--hud-text); }
body.touch:not(.ws-open) #wslots { display: none !important; }
body.touch #wslots {
  top: auto; bottom: calc(58px + var(--hud-tb)); max-width: calc(100vw - 16px); gap: 3px; font-size: 10px; align-items: flex-end; pointer-events: auto;
}
body.touch #wslots .ws { flex: 0 1 46px; min-width: 26px; width: auto; height: 44px; }
body.touch #wslots .ws.act { height: 48px; }
body.touch #wslots .ws.empty { display: none; }
body.touch #wslots .ws-ico { width: 80%; height: 14px; }
body.touch #wslots .ws-k, body.touch #wslots .ws-n, body.touch #wslots .ws-am { font-size: 9px; }
body.touch #brawl-mehp { bottom: calc(var(--hud-tb) - 3px); width: 110px; height: 4px; }
/* oznámení: nahoře uprostřed, jeden řádek, nejvýš dvě naráz */
body.touch #hud-toasts { right: auto; left: 50%; transform: translateX(-50%); top: calc(8px + var(--sa-t)); align-items: center; gap: 4px; }
body.touch #hud-toasts .ht { font-size: 12.5px; padding: 6px 12px 6px 8px; gap: 7px; max-width: min(32vw, 340px); border-radius: 6px; }
body.touch #hud-toasts .ht-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.touch #hud-toasts .ht-ic { width: 16px; height: 16px; }
body.touch #hud-toasts .ht:nth-last-child(n+3) { display: none; }
body.touch #score-pop { font-size: 14px; top: calc(var(--sa-t) + 84px); padding: 6px 14px 6px 6px; gap: 8px; }
body.touch #score-pop .bn-tag { font-size: 11px; }
body.touch #netstat { left: auto; right: calc(12px + var(--sa-r)); transform: none; top: calc(62px + var(--sa-t)); font-size: 10px; pointer-events: none; }
/* jízda MHD: jen jeden řádek „příští zastávka" nad rychlostí (seznam zastávek a nápověda kláves pryč) */
body.touch #tramride-panel {
  top: auto; bottom: calc(6px + var(--hud-tb) + var(--hud-tsp)); left: 50%; transform: translateX(-50%); min-width: 0; width: auto; max-width: 44vw;
  padding: 4px 10px; font-size: 11.5px; border-radius: 6px; background: var(--hud-bg); backdrop-filter: none; -webkit-backdrop-filter: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.touch[data-tc-mode="tram"] #tramride-panel { bottom: calc(6px + var(--hud-tb)); } /* v MHD se rychloměr nekreslí */
body.touch #tramride-panel > div:first-child, body.touch #tramride-panel .tr-stops, body.touch #tramride-panel .tr-keys { display: none; }
body.touch #tramride-panel .tr-next { color: var(--hud-text); overflow: hidden; text-overflow: ellipsis; }
body.touch .fhud, body.touch #skydive-hud { right: 12px; bottom: 120px; }
/* malý telefon na šířku: hledanost pod minimapu (vedle ní by se kryla s oznámeními), jen jedno oznámení naráz */
@media (orientation: landscape) and (max-width: 760px) {
  body.touch #wanted { left: calc(8px + var(--sa-l)); top: calc(30px + var(--sa-t) + var(--hud-tmm)); }
  body.touch #wanted-stars { font-size: 17px; }
}
@media (orientation: landscape) and (max-height: 400px) { body.touch #hud-toasts .ht:nth-last-child(n+2) { display: none; } }
/* na výšku: dole je joystick přes půl šířky → prostřední pruh (rychlost / náboje) nad něj; nahoře vpravo sloupec tlačítek
   → oznámení pod minimapu, užší */
@media (orientation: portrait) {
  body.touch { --hud-tb: calc(var(--tc-pad) + var(--sa-b) + var(--tc-joy) + 14px); }
  body.touch #speedo, body.touch[data-tc-mode] #speedo, body.touch #ammo-hud, body.touch #tramride-panel { left: 34% !important; }
  body.touch #wslots { left: 8px; right: 8px; transform: none; justify-content: center; }
  body.touch #score-pop { top: 26vh; }
  body.touch #hud-toasts { top: calc(34px + var(--sa-t) + var(--hud-tmm)); }
  body.touch #hud-toasts .ht { max-width: calc(100vw - 150px); }
  body.touch #chat { width: min(54vw, 300px); }
  body.touch #nav-banner { max-width: 150px; }
}
/* ESC menu na dotyku: tlačítka aspoň 44 px (escfit.js si podle toho přepočítá sloupce; když se nevejde, posouvá se) */
body.touch #esc-menu #esc-main .esc-btn { min-height: 44px; }
body.touch #esc-menu #esc-main { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#chat-toggle { display: none; }
/* dotykové cíle mimo hru (úvodní stránka, přihlášení, výběrník): aspoň 44 px na zařízení s prstem */
@media (pointer: coarse) {
  .ld-btn, .ld-seg button, .auth-tab, .cp-gen { min-height: 44px; }
  .ld-btn.ld-btn-sm { min-width: 88px; }
  .ld-seg button { min-width: 44px; }
}
/* úzké okno na počítači: název auta pryč, menší odstupy */
@media (max-width: 900px) { body:not(.touch) #car-name { display: none; } }

@media (prefers-reduced-motion: reduce) {
  #hud-toasts .ht { animation: none; transition: none; }
  #speed-icons i.on { animation: none !important; }
  #score-pop.show { animation-timing-function: steps(1); }
}