/* =====================================================================
   RUCKUS · Kaos Adası — oyun içi HUD (public/js/ui/hud.js)
   v3 tasarım dili (DESIGN.md §12): koyu cam paneller, Barlow / Barlow Condensed, tek volt vurgu, SVG ikonlar,
   ince eğik barlar, keskin kesik bantlar. Çizgi film zıplaması / sallanması yok.
   Token'lar public/css/tokens.css'ten gelir (yoksa aşağıdaki yedek değerler kullanılır).
   Ölçek: JS kök boyutuna göre --u değişkenini ayarlar (740x360 → 1px).
   Kural: kök ve katmanlar pointer-events:none; sadece .hud-press öğeleri dokunulabilir.
   Performans: backdrop-filter YOK (sürekli değişen WebGL tuvali üstünde telefonda pahalı); sürekli animasyonlar
   sadece opacity/transform (compositor).
   ===================================================================== */

.hud-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hud {
  --u: 1px;
  /* token köprüsü (tokens.css yüklenmemişse yedek) */
  --fd: var(--font-display, 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif);
  --fb: var(--font-body, 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  --t0: var(--tx-0, #f3f5fa);
  --t1: var(--tx-1, #b9c1d4);
  --t2: var(--tx-2, #7d879e);
  --ink: var(--tx-inv, #0b0e16);
  --ac: var(--accent, #ffcf33);
  --ac2: var(--accent-2, #ffb300);
  --acg: var(--accent-glow, rgba(255, 207, 51, .35));
  --acs: rgba(255, 207, 51, .13);
  --ok: var(--success, #35e08c);
  --bad: var(--danger, #ff4d5e);
  --warn2: var(--warn, #ff9f1c);
  --cy: var(--cyan, #3ddcff);
  --vi: var(--violet, #9b6bff);
  --red: var(--team-red, #ff5a4f);
  --blue: var(--team-blue, #3fa0ff);
  --g: rgba(12, 16, 27, .74);
  --g2: rgba(9, 12, 20, .9);
  --st: rgba(255, 255, 255, .09);
  --st2: rgba(255, 255, 255, .17);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .07);
  --sh: 0 calc(var(--u)*4) calc(var(--u)*14) rgba(0, 0, 0, .32);
  --tsh: 0 1px 2px rgba(0, 0, 0, .75), 0 0 calc(var(--u)*6) rgba(0, 0, 0, .35);
  --sk: -12deg;
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --pt: max(calc(var(--u)*8), env(safe-area-inset-top, 0px));
  --pr: max(calc(var(--u)*10), env(safe-area-inset-right, 0px));
  --pb: max(calc(var(--u)*8), env(safe-area-inset-bottom, 0px));
  --pl: max(calc(var(--u)*10), env(safe-area-inset-left, 0px));
  --btn: max(48px, calc(var(--u)*46));
  /* v5 (DESIGN §16.1) ekran bütçesi — yarış katmanı (customLayer) da bunları kullanabilir:
     --bar-h üst zamanlayıcı çubuğunun yüksekliği, --hud-top-b çubuğun alt kenarı (kökten px; altına yerleşin),
     --rb sağ üst yuvarlak buton (≤ 36 px), --hud-tr-w sağ üst buton kümesinin kapladığı genişlik (sağ kenardan),
     --hud-tl-w sol üst bloğun (mini harita / seri satırı) genişliği (sol kenardan), --mm mini harita kenarı */
  --bar-h: calc(var(--u)*26);
  --hud-top-b: calc(var(--pt) + var(--bar-h));
  --rb: clamp(32px, calc(var(--u)*34), 36px);
  --rb-gap: max(10px, calc(var(--u)*9));
  --hud-tr-w: calc(var(--pr) + 2 * var(--rb) + var(--rb-gap));
  --mm: calc(var(--u)*84);
  --hud-tl-w: calc(var(--pl) + var(--mm));
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--fb);
  font-weight: 600;
  color: var(--t0);
  line-height: 1.15;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.hud *,
.hud *::before,
.hud *::after {
  box-sizing: border-box;
}
.hud.is-hidden {
  display: none;
}
.hud b,
.hud small,
.hud em {
  font-weight: inherit;
  font-style: normal;
}
/* ikon temeli (tokens.css .ic ile aynı; yedek) */
.hud .ic {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  overflow: visible;
  pointer-events: none;
}
.hud .ic-inl {
  margin: 0 .12em;
  vertical-align: -.14em;
}

/* dokunulabilir öğeler */
.hud-press {
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
}
.hud-press.is-down {
  scale: .96;
}
/* olmaz geri bildirimi (odun yok, eşya yok…) */
.hud .is-deny {
  animation: hud-deny .3s ease-out;
}

/* klavye ipuçları (sadece masaüstü) */
.hud-kbd {
  display: none;
  position: absolute;
  z-index: 3;
  min-width: calc(var(--u)*15);
  height: calc(var(--u)*15);
  padding: 0 calc(var(--u)*4);
  align-items: center;
  justify-content: center;
  font: 700 calc(var(--u)*10)/1 var(--fd);
  color: var(--t0);
  background: rgba(5, 7, 12, .9);
  border: 1px solid var(--st2);
  border-radius: calc(var(--u)*3);
  pointer-events: none;
  letter-spacing: .02em;
}
.hud--desktop .hud-kbd {
  display: inline-flex;
}

/* güvenli alan ölçü kutusu (JS --pt/--pr/--pb/--pl'yi px olarak okur) */
.hud-probe {
  position: absolute;
  top: var(--pt);
  right: var(--pr);
  bottom: var(--pb);
  left: var(--pl);
  visibility: hidden;
  pointer-events: none;
}

/* =========================== ANA KATMAN =========================== */
/* katman sırası: main 2 · fx 3 · coach 4 · ann 5 · cd 6 · death 7 · re 8 · tr (emote/ayar) 9 · spin 10 · sb 11 · wheel 12 */
.hud-main {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: opacity .3s ease, visibility .3s;
}
.hud--cine .hud-main {
  opacity: 0;
  visibility: hidden;
}

/* ---------------- sol üst: mini harita (bölge adı içinde, kısa) + tek satır seri bilgisi (v5 §16.1) ---------------- */
.hud-tl {
  position: absolute;
  left: var(--pl);
  top: var(--pt);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u)*4);
}
.hud-map {
  position: relative;
  width: var(--mm);
  height: var(--mm);
  overflow: hidden;
  background: #0b2238;
  border: 1px solid var(--st2);
  border-radius: calc(var(--u)*8);
  box-shadow: var(--sh);
}
.hud-map::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 calc(var(--u)*16) rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  pointer-events: none;
}
.hud-map__cv {
  display: block;
  width: 100%;
  height: 100%;
}
.hud-map__n {
  position: absolute;
  z-index: 1;
  top: calc(var(--u)*2);
  left: 50%;
  width: calc(var(--u)*12);
  height: calc(var(--u)*12);
  margin-left: calc(var(--u)*-6);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 max(7.5px, calc(var(--u)*8))/1 var(--fd);
  color: var(--ac);
  background: rgba(5, 7, 12, .82);
  border: 1px solid var(--st2);
  border-radius: 50%;
}
/* bölge adı: haritanın alt kenarında, sadece yeni bölgeye girince 1.5 sn (ek yer kaplamaz) */
.hud-poi {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u)*3);
  height: calc(var(--u)*15);
  padding: 0 calc(var(--u)*4);
  font: 700 max(9px, calc(var(--u)*9.5))/1 var(--fd);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--t0);
  background: linear-gradient(0deg, rgba(5, 8, 14, .9), rgba(5, 8, 14, .66));
  border-top: 1px solid rgba(255, 207, 51, .55);
  opacity: 0;
  translate: 0 calc(var(--u)*6);
  transition: opacity .2s ease, translate .2s var(--e-out);
  pointer-events: none;
}
.hud-poi.is-on {
  opacity: 1;
  translate: 0 0;
}
.hud-poi__pin {
  flex: none;
  font-size: calc(var(--u)*9);
  color: var(--ac);
  line-height: 0;
}
.hud-poi__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* seri satırı (v5 §16.1): TEK ince satır (≤ 20 px) — [FİNAL | 🔥 AD] · TUR 3 · ◎ 7/12 · [kart madalyonu] */
.hud-minfo {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--u)*3);
  max-width: max(calc(var(--mm) + var(--u)*30), calc(var(--u)*112));
  height: calc(var(--u)*18);
  padding: 0 calc(var(--u)*3) 0 calc(var(--u)*6);
  background: rgba(8, 11, 19, .62);
  border-radius: calc(var(--u)*3);
  white-space: nowrap;
}
.hud-minfo.is-empty {
  display: none;
}
.hud-mchip {
  display: none;
  align-items: center;
  gap: calc(var(--u)*4);
  flex: none; /* puan/hedef hiç kırpılmaz — dar kalırsa maç sayısı rozetindeki isim kısalır */
  min-width: 0;
  overflow: hidden;
  font: 700 max(9.5px, calc(var(--u)*10.5))/1 var(--fd);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--t1);
}
.hud-mchip.is-on {
  display: inline-flex;
}
.hud-mchip > i {
  flex: none;
  width: calc(var(--u)*2.5);
  height: calc(var(--u)*2.5);
  background: var(--t2);
  border-radius: 50%;
}
.hud-mchip__r {
  color: var(--t0);
}
.hud-mchip__t {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u)*2);
  color: var(--t1);
  font-variant-numeric: tabular-nums;
}
.hud-mchip__t .ic {
  font-size: calc(var(--u)*10);
  color: var(--ac);
}
.hud-mchip__t small {
  font-size: .9em;
  color: var(--t2);
}
.hud-mchip__me {
  color: var(--ac);
}
/* maç sayısı / final: satırın başında küçük rozet (küçük ekranda TUR n yerine) */
.hud-mhot {
  order: -1;
  display: none;
  align-items: center;
  gap: calc(var(--u)*2);
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(var(--u)*56);
  height: calc(var(--u)*14);
  padding: 0 calc(var(--u)*4) 0 calc(var(--u)*3);
  font: italic 800 max(9px, calc(var(--u)*9.5))/1 var(--fd);
  letter-spacing: .04em;
  white-space: nowrap;
  border-radius: calc(var(--u)*2);
}
.hud-mhot.is-on {
  display: inline-flex;
}
.hud-mhot > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-mhot .ic {
  flex: none;
  font-size: calc(var(--u)*10);
}
.hud-mhot.is-mp {
  color: #fff;
  background: rgba(150, 64, 8, .9);
}
.hud-mhot.is-mp .ic {
  color: #ffc07a;
}
.hud-mhot.is-final {
  color: var(--ink);
  background: var(--ac);
}
.hud--compact .hud-minfo.is-hot .hud-mchip__r,
.hud--compact .hud-minfo.is-hot .hud-mchip__r + i {
  display: none;
}
/* aktif kart: küçük kart sanatı karosu (v9 — docs/v9-card-art.md §8.3; dokun → ad + açıklama) */
.hud-kchip {
  --kc: #9b6bff;
  position: relative;
  display: none;
  align-items: center;
  gap: calc(var(--u)*4);
  flex: none;
  min-width: 0;
  max-width: calc(var(--u)*150);
  height: calc(var(--u)*18);
  font: 700 max(9.5px, calc(var(--u)*10.5))/1 var(--fd);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--t0);
}
.hud-kchip::before {
  content: '';
  position: absolute;
  inset: calc(var(--u)*-8) calc(var(--u)*-6);
}
.hud-kchip.is-on {
  display: inline-flex;
}
.hud-kchip__art {
  flex: none;
  display: flex;
  line-height: 0;
  border-radius: 26%;
  box-shadow: 0 0 0 1px var(--kc), 0 1px 3px rgba(0, 0, 0, .45);
}
.hud-kchip__art .ca {
  --ca-s: calc(var(--u)*18);
}
/* v5: sadece madalyon — ad + açıklama dokununca (masaüstünde üstüne gelince de başlıkta) */
.hud-kchip__n,
.hud-kchip__i {
  display: none;
}
.hud-kpop {
  --kc: #9b6bff;
  position: absolute;
  z-index: 3;
  left: 0;
  top: calc(100% + calc(var(--u)*4));
  display: none;
  width: max-content;
  max-width: min(60vw, calc(var(--u)*240));
  padding: calc(var(--u)*6) calc(var(--u)*9) calc(var(--u)*7);
  color: var(--t1);
  background: rgba(8, 11, 19, .95);
  border: 1px solid var(--st2);
  border-top: calc(var(--u)*2) solid var(--kc);
  border-radius: calc(var(--u)*4);
  box-shadow: var(--sh);
  pointer-events: none;
  white-space: normal;
}
.hud-kpop.is-on {
  display: block;
}
.hud-kpop b {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*6);
  margin-bottom: calc(var(--u)*3);
  font: italic 800 max(12px, calc(var(--u)*14))/1.05 var(--fd);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--t0);
}
.hud-kpop__art {
  flex: none;
  display: flex;
  line-height: 0;
}
.hud-kpop__art .ca {
  --ca-s: calc(var(--u)*36);
}
.hud-kpop > span {
  display: block;
  font: 500 max(11px, calc(var(--u)*11.5))/1.35 var(--fb);
}

/* ---------------- üst orta: tek ince zamanlayıcı çubuğu (v5 §16.1: --bar-h; fırtına simgesi + sayaç içinde; dokun →
   skor tablosu). Boşken gizli (is-empty) ve sağ üstte yedek kupa butonu çıkar. ---------------- */
.hud-top {
  position: absolute;
  top: var(--pt);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u)*4);
  max-width: calc(100% - 2 * max(var(--hud-tr-w), var(--hud-tl-w)) - calc(var(--u)*12));
}
.hud-score {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  max-width: 100%;
  height: var(--bar-h);
  padding: 0 calc(var(--u)*5);
  white-space: nowrap;
}
.hud-score.is-empty {
  display: none;
}
/* görünmez dokunma payı (ince çubuk yine de kolay dokunulsun) */
.hud-score::after {
  content: '';
  position: absolute;
  inset: calc(var(--u)*-6) 0 calc(var(--u)*-8);
}
.hud-score::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g);
  border: 1px solid var(--st);
  border-radius: calc(var(--u)*3);
  transform: skewX(var(--sk));
  box-shadow: var(--sh), var(--hi);
}
.hud-score .hud-kbd {
  position: static;
  align-self: center;
  margin-left: calc(var(--u)*4);
}
.hud-score__seg {
  position: relative;
  display: none;
  align-items: center;
  gap: calc(var(--u)*4);
  min-width: 0;
  padding: 0 calc(var(--u)*7);
}
.hud-score__seg.is-on {
  display: flex;
}
/* görünen bölümler arası eğik ince ayraç */
.hud-score__seg.is-on ~ .hud-score__seg.is-on::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--u)*6);
  bottom: calc(var(--u)*6);
  width: 1px;
  background: var(--st2);
  transform: skewX(var(--sk));
}
.hud-score__ico {
  font-size: calc(var(--u)*11);
  line-height: 0;
  color: var(--t2);
}
.hud-score__seg b {
  font: 800 calc(var(--u)*16)/1 var(--fd);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.hud-score__timer b {
  min-width: calc(var(--u)*30);
  text-align: center;
}
.hud-score__timer.is-low b,
.hud-score__timer.is-low .hud-score__ico {
  color: var(--bad);
}
.hud-score__timer.is-low b {
  animation: hud-pulse-o 1s ease-in-out infinite;
}
.hud-score__alive b {
  min-width: calc(var(--u)*10);
  text-align: center;
}
/* yarış katmanının yuvası (hud.topSlot): boşken yer kaplamaz */
.hud-score__slot {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*6);
  min-width: 0;
  padding: 0 calc(var(--u)*6);
}
.hud-score__slot:empty {
  display: none;
}
/* fırtına bölümü: küçük simge + sayaç; daralırken simge + aşağı ok nabzı; dışarıdayken mor; anons gelince kısa parlama */
.hud-stormchip {
  color: #cdb6ff;
  transition: background-color .2s ease;
}
.hud-stormchip .hud-score__ico {
  font-size: calc(var(--u)*12);
  color: var(--vi);
}
.hud-stormchip__txt {
  font: 800 calc(var(--u)*14)/1 var(--fd);
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}
.hud-stormchip__txt:empty {
  display: none;
}
.hud-stormchip__sh {
  display: none;
  font-size: calc(var(--u)*10);
  line-height: 0;
  color: #cdb6ff;
}
.hud-stormchip.is-shrink .hud-stormchip__sh {
  display: inline-flex;
  animation: hud-pulse-o .9s ease-in-out infinite;
}
.hud-stormchip.is-shrink .hud-score__ico {
  color: #cdb6ff;
}
.hud-stormchip.is-out {
  color: #fff;
  background: rgba(118, 62, 228, .55);
}
.hud-stormchip.is-out .hud-score__ico,
.hud-stormchip.is-out .hud-stormchip__sh {
  color: #fff;
}
.hud-stormchip.is-out .hud-score__ico {
  animation: hud-pulse-o .8s ease-in-out infinite;
}
.hud-stormchip.is-ping {
  background: rgba(118, 62, 228, .7);
}
.hud-stormchip.is-ping .hud-score__ico {
  color: #fff;
}
.hud-score__mode {
  gap: calc(var(--u)*6);
}
/* Son Kalan: kendi leşlerim */
.hud-mykills {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*4);
}
.hud-mykills b {
  font: 800 calc(var(--u)*16)/1 var(--fd);
  font-variant-numeric: tabular-nums;
}
/* Kapışma / Taç: lider + ben */
.hud-lead {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u)*4);
  min-width: 0;
  height: 100%;
}
.hud-lead__ico {
  font-size: calc(var(--u)*11);
  line-height: 0;
  color: var(--ac);
}
.hud-lead em {
  min-width: 0;
  max-width: calc(var(--u)*64);
  overflow: hidden;
  text-overflow: ellipsis;
  font: 700 calc(var(--u)*11.5)/1.2 var(--fd);
  letter-spacing: .02em;
}
.hud-lead b {
  font: 800 calc(var(--u)*16)/1 var(--fd);
  font-variant-numeric: tabular-nums;
}
.hud-lead b small {
  margin-left: 1px;
  font-size: calc(var(--u)*10);
  font-weight: 700;
  color: var(--t2);
}
.hud-lead__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--u)*3);
  height: calc(var(--u)*2);
  background: var(--ac);
  border-radius: 1px;
  transform-origin: left center;
  opacity: .85;
}
.hud-lead.is-sub em,
.hud-lead.is-me em {
  max-width: calc(var(--u)*56);
  font-size: calc(var(--u)*10.5);
  color: var(--t1);
}
.hud-lead.is-me em {
  color: var(--ac);
}
.hud-lead.is-sub b,
.hud-lead.is-me b {
  font-size: calc(var(--u)*13);
  color: var(--t1);
}
/* takım skorları */
.hud-ts {
  --tc: #fff;
  position: relative;
  width: calc(var(--u)*34);
  height: calc(var(--u)*20);
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  border-radius: calc(var(--u)*2);
}
.hud-ts::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tc);
  opacity: .16;
}
.hud-ts b {
  position: relative;
  font: 800 calc(var(--u)*16)/1 var(--fd);
  font-variant-numeric: tabular-nums;
}
.hud-ts i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u)*2);
  background: var(--tc);
  transform-origin: left center;
}
.hud-ts.is-blue i {
  transform-origin: right center;
}
.hud-ts.is-mine {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.hud-ts.is-mine::before {
  opacity: .3;
}
.hud-ts__mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: calc(var(--u)*10);
  line-height: 1;
  color: var(--t2);
}
.hud-ts__mid small {
  font: 700 calc(var(--u)*9)/1 var(--fd);
  letter-spacing: .04em;
}

/* izleme / hayalet hapı (şeridin altında; canlı oyuncuda yok) */
.hud-spectate {
  display: none;
  align-items: center;
  gap: calc(var(--u)*5);
  max-width: 100%;
  height: calc(var(--u)*19);
  padding: 0 calc(var(--u)*10) 0 calc(var(--u)*8);
  font: 600 max(10.5px, calc(var(--u)*11))/1 var(--fb);
  white-space: nowrap;
  color: var(--t1);
  background: var(--g);
  border: 1px solid var(--st);
  border-radius: calc(var(--u)*10);
}
.hud-spectate.is-on {
  display: inline-flex;
}
.hud-spectate__ico {
  font-size: calc(var(--u)*12);
  line-height: 0;
  color: var(--ac);
}
.hud-spectate__txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-spectate__txt b {
  font: 800 max(11px, calc(var(--u)*12))/1 var(--fd);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--t0);
}
.hud-spectate.is-ghost {
  border-color: rgba(155, 107, 255, .55);
  background: rgba(30, 20, 60, .82);
}
.hud-spectate.is-ghost .hud-spectate__ico {
  color: #cdb6ff;
}
.hud-spectate.is-ghost .hud-spectate__txt span {
  margin-left: calc(var(--u)*6);
}

/* fırtınadayken: ekran kenarında ince mor parıltı (büyük bant yok — v5 §16.1); güvenli yön oku .hud-off__a.is-storm */
.hud-stormedge {
  position: absolute;
  inset: 0;
  opacity: 0;
  box-shadow: inset 0 0 calc(var(--u)*22) calc(var(--u)*2) rgba(155, 107, 255, .6), inset 0 0 0 calc(var(--u)*2) rgba(155, 107, 255, .35);
  transition: opacity .3s ease;
}
.hud-stormedge.is-on {
  opacity: 1;
  animation: hud-storm-edge 1.6s ease-in-out infinite;
}

/* ---------------- sağ üst: emote + ayarlar (v5 §16.1: ≤ 36 px; skor tablosu üst çubuğa dokununca — kupa butonu sadece
   çubuk boşken yedek olarak) ---------------- */
.hud-tr {
  position: absolute;
  z-index: 9;
  top: var(--pt);
  right: var(--pr);
  display: flex;
  gap: var(--rb-gap);
  transition: opacity .25s ease, visibility .25s;
}
/* spin sırasında gizli; tur sonunda emote görünür kalır (sataşma anı — #6/#107) */
.hud--spin .hud-tr,
.hud--wheel .hud-tr {
  opacity: 0;
  visibility: hidden;
}
.hud--spect .hud-rbtn--emote {
  display: none;
}
.hud.is-hidden .hud-tr {
  display: none;
}
.hud-rbtn {
  position: relative;
  width: var(--rb);
  height: var(--rb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--rb) * .5);
  line-height: 0;
  color: var(--t0);
  background: radial-gradient(circle at 50% 30%, rgba(34, 42, 62, .8), rgba(10, 13, 22, .72) 72%);
  border: 1px solid var(--st2);
  border-radius: 50%;
  box-shadow: var(--sh), var(--hi);
  transition: border-color .15s ease, background-color .15s ease;
}
/* görünmez dokunma payı: görünen 30-36 px, dokunulan ~44 px (komşu butonla çakışmaz: boşluk ≥ 2 × pay) */
.hud-rbtn::before {
  content: '';
  position: absolute;
  top: calc(var(--rb-gap) * -.5);
  right: calc(var(--rb-gap) * -.5);
  bottom: calc(var(--rb-gap) * -.5);
  left: calc(var(--rb-gap) * -.5);
  border-radius: 50%;
}
.hud-rbtn.is-down {
  border-color: var(--ac);
  color: var(--ac);
}
.hud-rbtn--emote {
  color: var(--ac);
}
.hud-rbtn--set,
.hud-rbtn--sb {
  color: var(--t1);
}
.hud-rbtn--sb {
  display: none;
}
.hud--noscore:not(.hud--re) .hud-rbtn--sb {
  display: flex;
}
/* kendi leşinden sonra 3 sn: "sataş!" halkası */
.hud-rbtn--emote::after {
  content: '';
  position: absolute;
  inset: calc(var(--u)*-3);
  border: calc(var(--u)*2) solid var(--ac);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.hud-rbtn--emote.is-pulse::after {
  animation: hud-ring 1s ease-out infinite;
}
.hud--re .hud-rbtn--emote {
  border-color: var(--ac);
  box-shadow: var(--sh), 0 0 calc(var(--u)*14) var(--acg);
}
.hud-rbtn .hud-kbd {
  right: calc(var(--u)*-4);
  bottom: calc(var(--u)*-4);
}

/* hızlı sataşma şeridi: emote butonunun altında, sola doğru (modal değil — #42) */
.hud-qe {
  position: absolute;
  top: calc(100% + calc(var(--u)*7));
  right: calc(var(--rb) + var(--rb-gap));
  display: none;
  gap: calc(var(--u)*6);
  flex-direction: row-reverse;
}
.hud-qe.is-on {
  display: flex;
}
.hud-qe__item {
  position: relative;
  width: max(44px, calc(var(--u)*46));
  height: max(44px, calc(var(--u)*46));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u)*1);
  background: radial-gradient(circle at 50% 30%, rgba(34, 42, 62, .95), rgba(10, 13, 22, .92) 72%);
  border: 1px solid var(--st2);
  border-radius: 50%;
  box-shadow: var(--sh);
  animation: hud-pop-in .2s var(--e-out) both;
  animation-delay: calc(var(--i) * 25ms);
}
.hud-qe__item.is-down {
  border-color: var(--ac);
  background: radial-gradient(circle at 50% 30%, rgba(80, 66, 20, .95), rgba(20, 16, 6, .92) 72%);
}
.hud-qe__emo {
  font-size: calc(var(--u)*19);
  line-height: 1;
}
.hud-qe__item.is-letter .hud-qe__emo {
  font: italic 800 calc(var(--u)*22)/1 var(--fd);
  color: var(--ac);
}
.hud-qe__item small {
  font: 700 max(8.5px, calc(var(--u)*8))/1 var(--fd);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t1);
}
.hud-qe__more .hud-qe__emo {
  font-size: calc(var(--u)*16);
  color: var(--t0);
}
/* tur sonunda: şerit sağdaki skor panelinin altında açılır (bant, damga ve paneller örtülmez) */
.hud--re .hud-qe {
  top: calc(var(--u)*214);
  right: 0;
}
/* şerit açıkken öldürme akışı geri çekilir (üst üste binmesin) */
.hud--qe .hud-killfeed {
  opacity: .15;
}
/* ölüm şeridi açıkken (ölüm kamerası) akış gizlenir — şerit aynı bilgiyi verir, üst üste binmez */
.hud--dead .hud-killfeed {
  opacity: 0;
}

/* ---------------- öldürme / olay akışı (sağ üst, butonların altı — v5: küçük ekranda ≤ 2 ince satır, 3 sn) ---------------- */
.hud-killfeed {
  position: absolute;
  top: calc(var(--pt) + var(--rb) + calc(var(--u)*3));
  right: var(--pr);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  max-width: max(27%, calc(var(--u)*190));
  transition: opacity .2s ease;
}
.hud-kf {
  --ec: var(--t1);
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u)*4);
  max-width: 100%;
  height: calc(var(--u)*15);
  padding: 0 calc(var(--u)*7) 0 calc(var(--u)*14);
  font: 700 max(10px, calc(var(--u)*11))/1 var(--fd);
  letter-spacing: .02em;
  white-space: nowrap;
  background: linear-gradient(90deg, rgba(8, 11, 19, 0), rgba(8, 11, 19, .68) calc(var(--u)*12));
  border-right: calc(var(--u)*2) solid transparent;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
.hud-kf.is-mekill {
  background: linear-gradient(90deg, rgba(60, 46, 6, 0), rgba(60, 46, 6, .82) calc(var(--u)*12));
  border-right-color: var(--ac);
}
.hud-kf.is-medead {
  background: linear-gradient(90deg, rgba(70, 8, 18, 0), rgba(70, 8, 18, .82) calc(var(--u)*12));
  border-right-color: var(--bad);
}
.hud-kf__name {
  min-width: 0;
  max-width: calc(var(--u)*72);
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-kf__icon {
  flex: none;
  font-size: calc(var(--u)*13);
  line-height: 0;
  color: var(--t1);
}
.hud-kf.is-mekill .hud-kf__icon {
  color: var(--ac);
}
.hud-kf__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--u)*13);
  height: calc(var(--u)*13);
  padding: 0 calc(var(--u)*2.5);
  font: 800 calc(var(--u)*9)/1 var(--fd);
  line-height: 0;
  color: #fff;
  border-radius: calc(var(--u)*2);
  text-shadow: none;
}
.hud-kf__badge .ic {
  font-size: calc(var(--u)*9);
}
.hud-kf__badge.is-first {
  background: var(--bad);
}
.hud-kf__badge.is-revenge {
  background: #1fae68;
}
.hud-kf__badge.is-bounty {
  background: var(--ac);
  color: var(--ink);
}
.hud-kf__badge.is-nemesis {
  background: #6f45e0;
}
.hud-kf__badge.is-boss {
  background: #c9463a;
}
.hud-kf__badge.is-streak {
  background: var(--warn2);
  color: var(--ink);
  line-height: 1;
}

/* ---------------- ekran dışı düşman okları (#109): ince çift şerit ---------------- */
.hud-off {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
.hud-off.is-on {
  display: block;
}
.hud-off__a {
  --oc: #ff5a4f;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: none;
  will-change: transform;
}
.hud-off__a.is-on {
  display: block;
}
.hud-off__chev {
  position: absolute;
  left: calc(var(--u)*-14);
  top: calc(var(--u)*-14);
  width: calc(var(--u)*28);
  height: calc(var(--u)*28);
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .95));
}
.hud-off__chev::before,
.hud-off__chev::after {
  content: '';
  position: absolute;
  left: 50%;
  width: calc(var(--u)*11);
  height: calc(var(--u)*11);
  margin-left: calc(var(--u)*-5.5);
  border-top: calc(var(--u)*2.5) solid var(--oc);
  border-left: calc(var(--u)*2.5) solid var(--oc);
  border-radius: 1px;
  transform: rotate(45deg);
}
.hud-off__chev::before {
  top: calc(var(--u)*3);
}
.hud-off__chev::after {
  top: calc(var(--u)*9);
  opacity: .5;
}
.hud-off__d {
  position: absolute;
  left: 0;
  top: calc(var(--u)*14);
  transform: translateX(-50%);
  padding: 0 calc(var(--u)*4);
  font: 700 max(9px, calc(var(--u)*10))/1.4 var(--fd);
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--t0);
  background: rgba(8, 11, 19, .72);
  border-radius: calc(var(--u)*2);
}
.hud-off__d:empty {
  display: none;
}
.hud-off__a.is-danger {
  --oc: var(--bad);
}
.hud-off__a.is-danger::before {
  content: '';
  position: absolute;
  left: calc(var(--u)*-15);
  top: calc(var(--u)*-15);
  width: calc(var(--u)*30);
  height: calc(var(--u)*30);
  border: calc(var(--u)*1.5) solid var(--bad);
  border-radius: 50%;
  animation: hud-ring .8s ease-out infinite;
}
.hud-off__a.is-danger .hud-off__d {
  background: rgba(150, 20, 36, .9);
}
/* v5 (§16.1): fırtınadayken güvenli yön oku — mor, kalın çift ok + mesafe; ekran kenarında */
.hud-off__a.is-storm {
  --oc: #c7a6ff;
}
.hud-off__a.is-storm .hud-off__chev {
  filter: drop-shadow(0 0 1.5px rgba(20, 8, 50, .95)) drop-shadow(0 0 calc(var(--u)*5) rgba(155, 107, 255, .8));
}
.hud-off__a.is-storm .hud-off__chev::before,
.hud-off__a.is-storm .hud-off__chev::after {
  border-width: calc(var(--u)*3) 0 0 calc(var(--u)*3);
}
.hud-off__a.is-storm .hud-off__chev::after {
  opacity: .75;
}
.hud-off__a.is-storm .hud-off__d {
  color: #fff;
  background: rgba(88, 44, 190, .88);
}

/* ---------------- sol alt: bufflar + ince eğik can/kalkan barları ---------------- */
.hud-bl {
  position: absolute;
  left: var(--pl);
  bottom: var(--pb);
  width: calc(var(--u)*150);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u)*3);
  transition: opacity .25s ease;
}
.hud-buffs {
  display: flex;
  gap: calc(var(--u)*4);
}
.hud-buffs:empty {
  display: none;
}
.hud-buff {
  --bc: #ffcf33;
  position: relative;
  width: calc(var(--u)*21);
  height: calc(var(--u)*21);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--g2);
  border: 1px solid var(--st);
  border-radius: calc(var(--u)*4);
}
.hud-buff__ico {
  font-size: calc(var(--u)*13);
  line-height: 0;
  color: var(--bc);
}
.hud-buff__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u)*2.5);
  background: rgba(255, 255, 255, .08);
}
.hud-buff__bar i {
  display: block;
  height: 100%;
  background: var(--bc);
  transform-origin: left center;
}
.hud-buff.is-ending {
  animation: hud-blink .45s steps(2, jump-none) infinite;
}

.hud-vitals {
  position: relative;
  isolation: isolate;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u)*3);
  padding: calc(var(--u)*4) calc(var(--u)*8) calc(var(--u)*5) calc(var(--u)*6);
}
.hud-vitals::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8, 11, 19, .72), rgba(8, 11, 19, .5) 70%, rgba(8, 11, 19, 0));
  border-left: calc(var(--u)*2) solid rgba(255, 255, 255, .22);
  border-radius: calc(var(--u)*2);
}
.hud-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u)*6);
}
.hud-bar__ico {
  width: calc(var(--u)*11);
  flex: none;
  display: flex;
  justify-content: center;
  font-size: calc(var(--u)*11);
  line-height: 0;
}
.hud-bar__num {
  width: calc(var(--u)*24);
  flex: none;
  text-align: right;
  font: 800 calc(var(--u)*15)/1 var(--fd);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  text-shadow: var(--tsh);
}
.hud-bar__track {
  position: relative;
  flex: 1;
  height: calc(var(--u)*7);
  overflow: hidden;
  background: rgba(3, 5, 10, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transform: skewX(var(--sk));
}
.hud-bar__fill,
.hud-bar__ghost {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
}
.hud-bar__ghost {
  background: rgba(255, 255, 255, .72);
}
.hud-bar__fill {
  background: linear-gradient(180deg, #7af5b6 0%, #35e08c 50%, #1fb56c 100%);
  transition: transform .12s ease-out;
}
/* 25'lik bölmeler */
.hud-bar__seg {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), rgba(3, 5, 10, .75) calc(25% - 2px) 25%);
}
.hud-bar--hp .hud-bar__ico {
  color: var(--ok);
}
.hud-bar--hp.is-mid .hud-bar__fill {
  background: linear-gradient(180deg, #ffe680 0%, #ffcf33 50%, #e6a600 100%);
}
.hud-bar--hp.is-mid .hud-bar__ico {
  color: var(--ac);
}
.hud-bar--hp.is-low .hud-bar__fill {
  background: linear-gradient(180deg, #ff8f99 0%, #ff4d5e 50%, #d42a3c 100%);
}
.hud-bar--hp.is-low .hud-bar__ico,
.hud-bar--hp.is-low .hud-bar__num {
  color: var(--bad);
}
/* düşük can parlaması: sabit gölgeli sözde öğe + opaklık animasyonu (#80) */
.hud-bar--hp::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  left: calc(var(--u)*44);
  height: calc(var(--u)*7);
  margin-top: calc(var(--u)*-3.5);
  transform: skewX(var(--sk));
  box-shadow: 0 0 calc(var(--u)*10) rgba(255, 60, 80, .9);
  opacity: 0;
  pointer-events: none;
}
.hud-bar--hp.is-low::after {
  animation: hud-glow .8s ease-in-out infinite;
}
/* Dev Avı (250 can): bar kırmızı-turuncu, bölmesiz */
.hud-bar--hp.is-boss .hud-bar__fill {
  background: linear-gradient(180deg, #ffc27a 0%, #ff7a3a 50%, #d9432f 100%);
}
.hud-bar--hp.is-boss .hud-bar__seg {
  display: none;
}
.hud-bar--sh .hud-bar__track {
  height: calc(var(--u)*5);
}
.hud-bar--sh .hud-bar__num {
  font-size: calc(var(--u)*12);
  color: #cdefff;
}
.hud-bar--sh .hud-bar__ico {
  font-size: calc(var(--u)*10);
  color: var(--cy);
}
.hud-bar--sh .hud-bar__fill {
  background: linear-gradient(180deg, #9aeaff 0%, #3ddcff 45%, #2f8fe8 100%);
}
.hud-bar--sh .hud-bar__ghost {
  background: rgba(205, 240, 255, .72);
}
.hud-bar--sh.is-zero .hud-bar__track {
  opacity: .55;
}
.hud-bar--sh.is-zero .hud-bar__num,
.hud-bar--sh.is-zero .hud-bar__ico {
  opacity: .45;
}
.hud-bar--knock .hud-bar__fill {
  background: linear-gradient(180deg, #ff8f99 0%, #ff4d5e 50%, #b81f30 100%);
}
.hud-bar--knock .hud-bar__ghost {
  background: rgba(255, 200, 205, .7);
}
.hud-bar--knock .hud-bar__ico {
  color: var(--bad);
}
.hud-bar--knock .hud-bar__num {
  color: #ffc2c8;
}
.hud-knock {
  display: none;
  flex-direction: column;
  gap: calc(var(--u)*5);
}
.hud-vitals.is-knocked > .hud-bar {
  display: none;
}
.hud-vitals.is-knocked .hud-knock {
  display: flex;
}
.hud-knock__txt {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u)*7);
  flex-wrap: wrap;
}
.hud-knock__txt b {
  font: italic 800 calc(var(--u)*15)/1 var(--fd);
  letter-spacing: .04em;
  color: var(--bad);
  text-shadow: var(--tsh);
  animation: hud-pulse-o 1s ease-in-out infinite;
}
.hud-knock__txt span {
  font: 600 max(10px, calc(var(--u)*11))/1.2 var(--fb);
  color: var(--t1);
  text-shadow: var(--tsh);
}

/* ---------------- alt orta: silah slotları ---------------- */
.hud-bottom {
  position: absolute;
  left: 50%;
  bottom: var(--pb);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u)*6);
}
/* bildirimler silahların hemen üstünde (alt bant — v5: merkez bölgeye taşmaz) */
.hud-toasts {
  position: absolute;
  left: 50%;
  bottom: calc(100% + calc(var(--u)*4));
  width: 0;
  height: 0;
}
.hud-toast {
  --tc: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u)*5);
  height: calc(var(--u)*17);
  padding: 0 calc(var(--u)*9) 0 calc(var(--u)*6);
  opacity: 0;
  transform: translate(-50%, 0);
  white-space: nowrap;
  font: 700 max(10.5px, calc(var(--u)*12))/1 var(--fd);
  letter-spacing: .03em;
  color: var(--t0);
  background: rgba(8, 11, 19, .82);
  border-left: calc(var(--u)*2) solid var(--tc);
  border-radius: 0 calc(var(--u)*3) calc(var(--u)*3) 0;
  box-shadow: var(--sh);
}
.hud-toast__t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-toast__ico {
  font-size: calc(var(--u)*14);
  line-height: 0;
  color: var(--tc);
}
.hud-toast .ic-inl {
  color: var(--tc);
}

.hud-slots {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u)*5);
  transition: opacity .25s ease;
}
.hud-slot {
  --rc: #b4b9c2;
  --rca: rgba(180, 185, 194, .3);
  --rcb: rgba(180, 185, 194, .08);
  position: relative;
  width: max(44px, calc(var(--u)*52));
  height: max(40px, min(calc(var(--u)*43), 44px));
  transition: transform .16s var(--e-out);
}
.hud-slot.is-cur {
  z-index: 1;
  transform: translateY(calc(var(--u)*-3));
}
.hud-slot__in {
  position: absolute;
  inset: 0;
}
.hud-slot__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(0deg, var(--rca) 0%, var(--rcb) 58%, rgba(10, 13, 22, .82) 100%), rgba(10, 13, 22, .82);
  border-radius: calc(var(--u)*3);
  transform: skewX(var(--sk));
  box-shadow: inset 0 0 0 1px var(--st), inset 0 1px 0 rgba(255, 255, 255, .06), var(--sh);
}
/* nadirlik rengi alt çizgisi */
.hud-slot__bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u)*2.5);
  background: var(--rc);
}
.hud-slot.is-cur .hud-slot__bg {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7), 0 0 calc(var(--u)*14) var(--rca), var(--sh);
}
.hud-slot.is-empty .hud-slot__bg {
  background: rgba(10, 13, 22, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.hud-slot.is-empty .hud-slot__bg::after {
  display: none;
}
.hud-slot.is-empty.is-cur .hud-slot__bg {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.hud-slot__icon,
.hud-slot__name,
.hud-slot__ammo {
  position: absolute;
  z-index: 1;
}
.hud-slot__icon {
  left: 0;
  right: 0;
  top: calc(var(--u)*8);
  display: flex;
  justify-content: center;
  font-size: calc(var(--u)*24);
  line-height: 0;
  color: var(--t0);
  opacity: .62;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
  transition: opacity .15s ease;
}
.hud-slot.is-cur .hud-slot__icon {
  opacity: 1;
}
.hud-slot.is-empty .hud-slot__icon {
  display: none;
}
.hud-slot__name {
  left: calc(var(--u)*5);
  right: calc(var(--u)*3);
  top: calc(var(--u)*2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 700 max(7.5px, calc(var(--u)*7.5))/1.1 var(--fd);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t1);
}
.hud-slot.is-empty .hud-slot__name {
  left: 0;
  right: 0;
  top: 50%;
  margin-top: calc(var(--u)*-5);
  text-align: center;
  color: var(--t2);
  opacity: .8;
}
.hud-slot__ammo {
  right: calc(var(--u)*6);
  bottom: calc(var(--u)*4);
  display: flex;
  align-items: baseline;
  font: 800 max(10.5px, calc(var(--u)*12))/1 var(--fd);
  font-variant-numeric: tabular-nums;
  color: var(--t0);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.hud-slot__ammo small {
  font-size: max(8px, calc(var(--u)*8.5));
  font-weight: 700;
  color: var(--t1);
}
.hud-slot__ammo.is-low b {
  color: var(--warn2);
}
.hud-slot__ammo.is-out {
  font-size: max(9px, calc(var(--u)*10));
  letter-spacing: .08em;
  color: var(--bad);
  animation: hud-blink .5s steps(2, jump-none) infinite;
}
.hud-slot__ammo.is-rl {
  font-size: max(8.5px, calc(var(--u)*9));
  letter-spacing: .08em;
  color: var(--ac);
}
.hud-slot__cd {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  background: conic-gradient(from 0deg, rgba(3, 5, 10, .55) var(--cd, 0deg), transparent 0);
  border-radius: calc(var(--u)*3);
  transform: skewX(var(--sk));
}
.hud-slot.is-cd .hud-slot__cd {
  display: block;
}
.hud-slot__ring {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--u)*5);
  width: calc(var(--u)*28);
  height: calc(var(--u)*28);
  margin-left: calc(var(--u)*-14);
  display: none;
  transform: rotate(-90deg);
  overflow: visible;
}
.hud-slot__ring circle {
  fill: rgba(3, 5, 10, .45);
  stroke: var(--ac);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.hud-slot.is-reload .hud-slot__ring {
  display: block;
}
.hud-slot.is-reload .hud-slot__icon {
  opacity: .3;
}
.hud-slot .hud-kbd {
  top: calc(var(--u)*-6);
  right: calc(var(--u)*-2);
}
/* KAOS: dönen gökkuşağı ışıltısı (compositor: sadece transform) + gökkuşağı alt çizgi */
.hud-slot.r-chaos .hud-slot__bg::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: conic-gradient(#ff4fd8, #ffcf33, #35e08c, #3ddcff, #9b6bff, #ff4fd8);
  opacity: .28;
  animation: hud-rot 3s linear infinite;
}
.hud-slot.r-chaos .hud-slot__bg::after {
  background: linear-gradient(90deg, #ff4fd8, #ffcf33, #35e08c, #3ddcff, #9b6bff);
}
.hud-slot.r-chaos.is-cur .hud-slot__bg {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75), 0 0 calc(var(--u)*16) rgba(255, 79, 216, .45), var(--sh);
}

/* envanter: odun */
.hud-inv {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u)*4);
  margin-left: calc(var(--u)*2);
}
.hud-inv__mats {
  position: relative;
  isolation: isolate;
  width: calc(var(--u)*33);
  height: max(36px, calc(var(--u)*38));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u)*3);
}
.hud-inv__mats::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 13, 22, .78);
  border-radius: calc(var(--u)*3);
  transform: skewX(var(--sk));
  box-shadow: inset 0 0 0 1px var(--st);
}
.hud-inv__ico {
  font-size: calc(var(--u)*14);
  line-height: 0;
  color: #d9a066;
}
.hud-inv b {
  display: inline-block;
  font: 800 calc(var(--u)*12)/1 var(--fd);
  font-variant-numeric: tabular-nums;
}

/* ---------------- sağ alt: aksiyon butonları (koyu cam daireler) ---------------- */
.hud-actions {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  transition: opacity .25s ease;
}
.hud-abtn {
  --s: max(42px, calc(var(--u)*46));
  position: absolute;
  width: var(--s);
  height: var(--s);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--t0);
  background: radial-gradient(circle at 50% 30%, rgba(36, 44, 64, .62), rgba(10, 13, 22, .55) 72%);
  border: 1px solid var(--st2);
  border-radius: 50%;
  box-shadow: var(--sh), var(--hi);
  transition: opacity .2s ease, border-color .15s ease;
}
.hud-abtn::before {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  border-radius: 50%;
}
.hud-abtn.is-down {
  border-color: var(--ac);
  background-color: rgba(10, 13, 22, .85);
}
.hud-abtn__ico {
  display: inline-flex;
  font-size: calc(var(--u)*19);
  line-height: 0;
}
.hud-abtn__cost,
.hud-abtn__cnt {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u)*-6);
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: calc(var(--u)*13);
  padding: 0 calc(var(--u)*5);
  font: 800 max(9px, calc(var(--u)*9.5))/1 var(--fd);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--t0);
  background: rgba(5, 7, 12, .95);
  border: 1px solid var(--st2);
  border-radius: calc(var(--u)*8);
}
.hud-abtn__cost .ic {
  font-size: calc(var(--u)*10);
  color: #d9a066;
}
.hud-abtn .hud-kbd {
  top: calc(var(--u)*-4);
  right: calc(var(--u)*-4);
}
/* Dokunmatik yerleşim JS'ten gelir (--l-*-r / --l-*-b): butonlar boştaki nişan joystick'inin halkasının DIŞINDA
   bir yay üzerinde (#28/#35). Değişkenler yoksa (ilk kare) güvenli varsayılanlar. */
.hud-abtn--wall {
  right: var(--l-wall-r, calc(var(--pr) + calc(var(--u)*4)));
  bottom: var(--l-wall-b, calc(var(--pb) + calc(var(--u)*170)));
}
.hud-abtn--util {
  right: var(--l-util-r, calc(var(--pr) + calc(var(--u)*72)));
  bottom: var(--l-util-b, calc(var(--pb) + calc(var(--u)*170)));
}
.hud-abtn--util .hud-abtn__ico {
  color: #ffd9a0;
}
.hud-abtn.is-off .hud-abtn__ico {
  opacity: .35;
}
.hud-abtn.is-off {
  background: rgba(10, 13, 22, .4);
  border-color: var(--st);
}
.hud-abtn--wall.is-off .hud-abtn__cost {
  color: var(--bad);
  border-color: rgba(255, 77, 94, .6);
}
/* bağlam (AÇ / AL): volt vurgu dolgusu + ikon + kısa etiket */
.hud-abtn--ctx {
  --s: max(50px, calc(var(--u)*56));
  --bc: #ffcf33;
  right: var(--l-ctx-r, calc(var(--pr) + calc(var(--u)*150)));
  bottom: var(--l-ctx-b, calc(var(--pb) + calc(var(--u)*150)));
  display: none;
  gap: calc(var(--u)*1);
  color: var(--ink);
  background: var(--accent-grad, linear-gradient(180deg, #ffe066 0%, #ffcf33 48%, #ffb300 100%));
  border: none;
  box-shadow: 0 0 0 calc(var(--u)*2) rgba(8, 11, 19, .7), 0 0 calc(var(--u)*18) var(--acg), var(--sh);
}
.hud-abtn--ctx.is-on {
  display: flex;
}
.hud-abtn--ctx.is-down {
  filter: brightness(.92);
}
.hud-abtn--ctx .hud-abtn__ico {
  font-size: calc(var(--u)*16);
}
.hud-abtn__lbl {
  font: italic 800 calc(var(--u)*13.5)/1 var(--fd);
  letter-spacing: .04em;
}
/* nadirlik / vurgu halkası: yavaş, sade nabız */
.hud-abtn__ring {
  position: absolute;
  inset: calc(var(--u)*-4);
  border: calc(var(--u)*2) solid var(--bc);
  border-radius: 50%;
  pointer-events: none;
  animation: hud-ring 1.5s ease-out infinite;
}
.hud--knocked .hud-abtn--wall,
.hud--knocked .hud-abtn--util,
.hud--knocked .hud-slots {
  opacity: .35;
}

/* "Dalga geç": kendi leşinden sonra 4 sn, nişan bölgesinin sol üstünde (#126) */
.hud-qt {
  --s: max(44px, calc(var(--u)*48));
  position: absolute;
  right: var(--l-qta-r, calc(var(--pr) + calc(var(--u)*150)));
  bottom: var(--l-qta-b, calc(var(--pb) + calc(var(--u)*150)));
  width: var(--s);
  height: var(--s);
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(60, 50, 16, .95), rgba(14, 12, 6, .92) 72%);
  border: 1px solid rgba(255, 207, 51, .6);
  border-radius: 50%;
  box-shadow: var(--sh), 0 0 calc(var(--u)*14) var(--acg);
}
.hud-qt.is-alt {
  right: var(--l-qtb-r, calc(var(--pr) + calc(var(--u)*236)));
  bottom: var(--l-qtb-b, calc(var(--pb) + calc(var(--u)*150)));
}
.hud-qt.is-on {
  display: flex;
}
.hud-qt__emo {
  font-size: calc(var(--u)*19);
  line-height: 1;
}
.hud-qt small {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u)*-9);
  translate: -50% 0;
  padding: 0 calc(var(--u)*6);
  font: 800 max(9px, calc(var(--u)*9))/1.6 var(--fd);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  background: var(--ac);
  border-radius: calc(var(--u)*8);
}
.hud-qt__ring {
  position: absolute;
  inset: calc(var(--u)*-5);
  width: calc(100% + calc(var(--u)*10));
  height: calc(100% + calc(var(--u)*10));
  transform: rotate(-90deg);
  overflow: visible;
  pointer-events: none;
}
.hud-qt__ring circle {
  fill: none;
  stroke: var(--ac);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.hud-qt.is-run .hud-qt__ring circle {
  animation: hud-dash-out 4s linear forwards;
}

/* hayalet: domates bekleme göstergesi (dokunulmaz — altındaki nişan bölgesine geçer) */
.hud-tomato {
  --s: max(50px, calc(var(--u)*54));
  position: absolute;
  right: var(--l-tom-r, calc(var(--pr) + calc(var(--u)*40)));
  bottom: var(--l-tom-b, calc(var(--pb) + calc(var(--u)*170)));
  width: var(--s);
  height: var(--s);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 30%, rgba(40, 24, 30, .88), rgba(10, 8, 14, .88) 72%);
  border-radius: 50%;
  box-shadow: var(--sh);
}
.hud--ghost .hud-tomato {
  display: flex;
}
.hud-tomato__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.hud-tomato__bg {
  fill: none;
  stroke: rgba(255, 255, 255, .12);
  stroke-width: 2.5;
}
.hud-tomato__arc {
  fill: none;
  stroke: var(--bad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.hud-tomato.is-ready .hud-tomato__arc {
  stroke: var(--ok);
}
.hud-tomato__emo {
  font-size: calc(var(--u)*23);
  line-height: 0;
  color: #ff6b5c;
  transition: opacity .15s ease;
}
.hud-tomato:not(.is-ready) .hud-tomato__emo {
  opacity: .4;
}
.hud-tomato__lbl {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u)*-8);
  translate: -50% 0;
  padding: 0 calc(var(--u)*6);
  font: 800 max(9px, calc(var(--u)*9))/1.6 var(--fd);
  letter-spacing: .1em;
  white-space: nowrap;
  color: var(--t0);
  background: rgba(150, 20, 36, .95);
  border-radius: calc(var(--u)*8);
}
.hud-tomato.is-ready .hud-tomato__lbl {
  color: var(--ink);
  background: var(--ok);
}

/* izleyici (elendin, hayalet değil): oyun kontrollerini gizle */
.hud--spect .hud-slots,
.hud--spect .hud-actions,
.hud--spect .hud-bl {
  opacity: 0;
  visibility: hidden;
}
/* hayalet (#37/#56): 0 can barı, BOŞ slotlar, duvar/bomba butonları anlamsız → gizle */
.hud--ghost .hud-bl,
.hud--ghost .hud-slots,
.hud--ghost .hud-actions {
  opacity: 0;
  visibility: hidden;
}

/* masaüstü: butonlar küçük, ipuçları görünür (joystick yok → sabit köşe düzeni) */
.hud--desktop .hud-abtn {
  --s: calc(var(--u)*40);
}
.hud--desktop .hud-abtn__ico {
  font-size: calc(var(--u)*17);
}
.hud--desktop .hud-abtn--ctx {
  --s: calc(var(--u)*50);
}
.hud--desktop .hud-abtn--wall,
.hud--desktop .hud-abtn--util,
.hud--desktop .hud-abtn--ctx {
  bottom: calc(var(--pb) + calc(var(--u)*8));
}
.hud--desktop .hud-abtn--wall {
  right: calc(var(--pr) + calc(var(--u)*4));
}
.hud--desktop .hud-abtn--util {
  right: calc(var(--pr) + calc(var(--u)*52));
}
.hud--desktop .hud-abtn--ctx {
  right: calc(var(--pr) + calc(var(--u)*102));
}
.hud--desktop .hud-qt,
.hud--desktop .hud-qt.is-alt {
  --s: calc(var(--u)*44);
  right: calc(var(--pr) + calc(var(--u)*106));
  bottom: calc(var(--pb) + calc(var(--u)*72));
}
.hud--desktop .hud-tomato {
  right: calc(var(--pr) + calc(var(--u)*8));
  bottom: calc(var(--pb) + calc(var(--u)*8));
}
.hud--desktop .hud-qe {
  right: calc(var(--rb) + var(--rb-gap));
}

/* ---------------- hayalet bahsi şeridi (#112) ---------------- */
.hud-bet {
  position: absolute;
  left: 50%;
  bottom: var(--pb);
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u)*3);
  width: max-content;
  max-width: min(var(--l-mid-w, 64%), calc(var(--u)*460));
  transform: translateX(-50%);
}
.hud--desktop .hud-bet {
  max-width: min(70%, calc(var(--u)*560));
}
.hud-bet.is-on {
  display: flex;
}
.hud-bet__lbl {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u)*6);
  height: calc(var(--u)*17);
  padding: 0 calc(var(--u)*12) 0 calc(var(--u)*9);
  font: 600 max(10.5px, calc(var(--u)*12))/1 var(--fb);
  white-space: nowrap;
  color: #e4d8ff;
  background: rgba(34, 20, 70, .9);
  border: 1px solid rgba(155, 107, 255, .6);
  border-radius: calc(var(--u)*11);
}
.hud-bet__lbl .ic {
  font-size: calc(var(--u)*14);
  color: #cdb6ff;
}
.hud-bet__lbl b {
  font: 800 max(11px, calc(var(--u)*13))/1 var(--fd);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
/* tek satır (en fazla 5 aday): çipler dar ekranda küçülür, alta taşıp joystick bölgesine girmez */
.hud-bet__row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: calc(var(--u)*5);
  max-width: 100%;
}
.hud-bet__c {
  --bc: #ffcf33;
  position: relative;
  flex: 0 1 calc(var(--u)*76);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u)*3);
  min-width: 44px;
  height: max(44px, calc(var(--u)*42));
  padding: calc(var(--u)*2) calc(var(--u)*5);
  background: rgba(10, 13, 22, .88);
  border: 1px solid var(--st2);
  border-bottom: calc(var(--u)*2.5) solid var(--bc);
  border-radius: calc(var(--u)*4);
  box-shadow: var(--sh);
}
.hud-bet__e {
  flex: none;
  font-size: calc(var(--u)*16);
  line-height: 1;
}
.hud-bet__sw {
  flex: none;
  width: calc(var(--u)*16);
  height: calc(var(--u)*16);
  background: var(--bc);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--u)*2) rgba(255, 255, 255, .15);
}
.hud-bet__n {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 700 max(10px, calc(var(--u)*11.5))/1.1 var(--fd);
  letter-spacing: .03em;
  color: var(--bc);
}
.hud-bet__c i {
  position: absolute;
  top: calc(var(--u)*-7);
  right: calc(var(--u)*-6);
  width: calc(var(--u)*17);
  height: calc(var(--u)*17);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u)*11);
  font-style: normal;
  line-height: 0;
  color: var(--ink);
  background: var(--ac);
  border-radius: 50%;
}
.hud-bet__c.is-sel {
  background: rgba(64, 52, 12, .92);
  border-color: var(--ac);
  box-shadow: 0 0 calc(var(--u)*12) var(--acg), var(--sh);
}
.hud-bet__c.is-sel .hud-bet__n {
  color: #fff;
}
.hud-bet__c.is-pending {
  opacity: .8;
}
.hud-bet.is-locked .hud-bet__c:not(.is-sel) {
  opacity: .35;
}
.hud-bet.is-locked .hud-bet__lbl {
  color: var(--t1);
  background: rgba(12, 16, 27, .9);
  border-color: var(--st2);
}
.hud-bet.is-locked .hud-bet__lbl .ic {
  color: var(--t2);
}
.hud-bet__none {
  font: 600 max(10px, calc(var(--u)*11))/1.2 var(--fb);
  color: var(--t2);
}

/* =========================== EKRAN EFEKTLERİ =========================== */
.hud-fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  contain: strict;
  overflow: hidden;
  pointer-events: none;
}
.hud-vignette,
.hud-lowhp {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.hud-vignette {
  background: radial-gradient(ellipse at center, transparent 46%, rgba(255, 40, 60, .22) 74%, rgba(170, 0, 24, .62) 100%);
}
.hud-lowhp {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(160, 0, 24, .5) 100%);
}
.hud-lowhp.is-on {
  animation: hud-lowhp 1s ease-in-out infinite;
}
.hud-dmgarcs {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.hud-dmgarc {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.hud-dmgarc i {
  position: absolute;
  left: calc(var(--u)*-70);
  top: calc(var(--u)*-140);
  width: calc(var(--u)*140);
  height: calc(var(--u)*36);
  opacity: 0;
  border-top: calc(var(--u)*4) solid rgba(255, 60, 80, .95);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  filter: drop-shadow(0 0 calc(var(--u)*5) rgba(255, 30, 50, .85));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.hud-splat {
  position: absolute;
  inset: 0;
}
.hud-splat__blob {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  will-change: transform, opacity;
}
.hud-splat__blob svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 calc(var(--u)*3) calc(var(--u)*5) rgba(40, 0, 0, .3));
}
/* ince, keskin X — varsayılan: karakterin başının üstü (ekran ortası = kendi karakterim — #43) */
.hud-hitmarker {
  position: absolute;
  left: 50%;
  top: 36%;
  width: calc(var(--u)*24);
  height: calc(var(--u)*24);
  opacity: 0;
  transform: translate(-50%, -50%);
}
.hud-hitmarker i {
  position: absolute;
  left: calc(50% - calc(var(--u)*.8));
  top: calc(50% - calc(var(--u)*3.5));
  width: calc(var(--u)*1.6);
  height: calc(var(--u)*7);
  background: #fff;
  border-radius: 1px;
  box-shadow: 0 0 0 .6px rgba(0, 0, 0, .7);
}
.hud-hitmarker i:nth-child(1) {
  transform: rotate(45deg) translateY(calc(var(--u)*-7));
}
.hud-hitmarker i:nth-child(2) {
  transform: rotate(135deg) translateY(calc(var(--u)*-7));
}
.hud-hitmarker i:nth-child(3) {
  transform: rotate(225deg) translateY(calc(var(--u)*-7));
}
.hud-hitmarker i:nth-child(4) {
  transform: rotate(315deg) translateY(calc(var(--u)*-7));
}
.hud-hitmarker.is-kill i {
  width: calc(var(--u)*2);
  height: calc(var(--u)*9);
  top: calc(50% - calc(var(--u)*4.5));
  left: calc(50% - calc(var(--u)*1));
  background: var(--bad);
  box-shadow: 0 0 0 .6px rgba(40, 0, 6, .8), 0 0 calc(var(--u)*5) rgba(255, 60, 80, .8);
}

/* =========================== ANONS: küçük tek satır bant (v5 §16.1) =========================== */
/* Sadece önemli olaylar (HUD.announce yönlendirir), ÜSTTE (zamanlayıcı çubuğunun hemen altı; y ≤ %22), yükseklik ≤ %10,
   yazı ≤ 26 px (667 genişlikte), ≤ 1.4 sn. Genişlik sınırlı: sağ üstteki öldürme akışıyla çakışmaz. */
.hud-ann {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--hud-top-b) + calc(var(--u)*5));
  height: 0;
  z-index: 5;
  pointer-events: none;
  transition: transform .2s var(--e-out);
}
/* hızlı sataşma şeridi açıkken (aynı hizada) anons bandı biraz aşağı iner — üst üste binmez */
.hud--qe .hud-ann {
  transform: translateY(calc(var(--u)*52));
}
.hud-ann__item {
  --ac: #ffcf33;
  position: absolute;
  left: 50%;
  top: 0;
  width: min(46%, calc(var(--u)*420));
  margin-left: max(-23%, calc(var(--u)*-210));
  display: flex;
  justify-content: center;
  opacity: 0;
}
.hud-ann__band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  max-width: 100%;
  padding: calc(var(--u)*4) calc(var(--u)*20) calc(var(--u)*5);
  overflow: hidden;
  text-align: center;
}
.hud-ann__band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(6, 8, 14, 0), rgba(6, 8, 14, .8) 14%, rgba(6, 8, 14, .8) 86%, rgba(6, 8, 14, 0));
  transform: skewX(var(--sk));
}
.hud-ann__band::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: calc(var(--u)*1.5);
  background: var(--ac);
  opacity: .85;
}
.hud-ann__sweep {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
  opacity: 0;
  pointer-events: none;
}
.hud-ann__head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(var(--u)*6);
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}
.hud-ann__ico {
  flex: none;
  align-self: center;
  font-size: calc(var(--u)*16);
  line-height: 0;
  color: var(--ac);
}
.hud-ann__text {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font: italic 800 calc(var(--u)*21)/1.05 var(--fd);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ac);
  text-shadow: 0 calc(var(--u)*1) calc(var(--u)*6) rgba(0, 0, 0, .55);
}
/* alt yazı başlığın YANINDA, küçük ve soluk (bant tek satır kalır) */
.hud-ann__sub {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 600 max(10.5px, calc(var(--u)*11.5))/1.2 var(--fb);
  color: var(--t1);
}
.hud-ann__item.is-medium .hud-ann__band {
  padding: calc(var(--u)*4) calc(var(--u)*16) calc(var(--u)*5);
}
.hud-ann__item.is-medium .hud-ann__text {
  font-size: calc(var(--u)*17);
}
.hud-ann__item.is-medium .hud-ann__ico {
  font-size: calc(var(--u)*14);
}
.hud-ann__item.is-small .hud-ann__band {
  padding: calc(var(--u)*3) calc(var(--u)*11) calc(var(--u)*4);
}
.hud-ann__item.is-small .hud-ann__band::before {
  background: rgba(8, 11, 19, .78);
  border-radius: calc(var(--u)*3);
  transform: none;
}
.hud-ann__item.is-small .hud-ann__band::after {
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  width: calc(var(--u)*2);
  height: auto;
}
.hud-ann__item.is-small .hud-ann__text {
  font: 700 max(11.5px, calc(var(--u)*13))/1.1 var(--fd);
  letter-spacing: .04em;
  color: var(--t0);
}
.hud-ann__item.is-small .hud-ann__ico {
  font-size: calc(var(--u)*12);
}
.hud-ann__item.is-small .hud-ann__sub {
  font-size: max(10px, calc(var(--u)*10.5));
}

/* =========================== GERİ SAYIM =========================== */
.hud-cd {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hud-cd.is-on {
  display: flex;
}
/* üstte Kaos Kartı bandı varken: sayı + hedef bandın altı ile silah slotlarının üstü arasında ortalanır */
.hud-cd.has-card {
  padding: calc(var(--pt) + calc(var(--u)*118)) 0 calc(var(--pb) + calc(var(--u)*80));
}
.hud-cd__num {
  --o: rgba(6, 8, 14, .72);
  font: italic 800 calc(var(--u)*118)/1 var(--fd);
  letter-spacing: -.01em;
  color: var(--t0);
  /* aydınlık sahnede okunurluk: ince koyu kontur + yumuşak gölge */
  text-shadow: calc(var(--u)*1.5) 0 0 var(--o), calc(var(--u)*-1.5) 0 0 var(--o), 0 calc(var(--u)*1.5) 0 var(--o), 0 calc(var(--u)*-1.5) 0 var(--o),
    0 calc(var(--u)*4) calc(var(--u)*24) rgba(0, 0, 0, .55);
}
.hud-cd__num.is-n1 {
  color: var(--ac);
}
.hud-cd__num.is-go {
  font-size: calc(var(--u)*88);
  letter-spacing: .02em;
  color: var(--ac);
}
.hud-cd.has-card .hud-cd__num {
  font-size: calc(var(--u)*92);
}
.hud-cd.has-card .hud-cd__num.is-go {
  font-size: calc(var(--u)*72);
}
/* turun hedefi (#121) */
.hud-cd__goal {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: calc(var(--u)*7);
  margin-top: calc(var(--u)*6);
  max-width: 92%;
  padding: calc(var(--u)*5) calc(var(--u)*16);
  font: 700 max(11.5px, calc(var(--u)*14))/1.15 var(--fd);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--t0);
}
.hud-cd__goal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g2);
  border: 1px solid var(--st2);
  border-radius: calc(var(--u)*3);
  transform: skewX(var(--sk));
}
.hud-cd__gico {
  flex: none;
  font-size: calc(var(--u)*16);
  line-height: 0;
  color: var(--ac);
}
.hud-cd__gtxt {
  min-width: 0;
}
/* v7: satır başı vurgulu ad (goal.title — şölende mini oyunun adı; kart bandı yerine tek satır) */
.hud-cd__gname {
  flex: none;
  font-weight: 800;
  white-space: nowrap;
  color: var(--ac);
}
.hud-cd__goal.is-hot {
  color: var(--ink);
}
.hud-cd__goal.is-hot::before {
  background: var(--ac);
  border-color: var(--ac);
  box-shadow: 0 0 calc(var(--u)*18) var(--acg);
}
.hud-cd__goal.is-hot .hud-cd__gico {
  color: var(--ink);
}
/* bu turun Kaos Kartı — spin kapandıktan sonra da geri sayım boyunca okunur (#103) */
.hud-cd__card {
  position: absolute;
  left: 50%;
  top: calc(var(--pt) + calc(var(--u)*44));
  max-width: min(94%, calc(var(--u)*540));
  transform: translateX(-50%);
}
.hud-cd__cardin {
  --c: #9b6bff;
  display: flex;
  align-items: center;
  gap: calc(var(--u)*11);
  padding: calc(var(--u)*7) calc(var(--u)*16) calc(var(--u)*8) calc(var(--u)*8);
  background: var(--g2);
  border: 1px solid var(--st);
  border-top: calc(var(--u)*2) solid var(--c);
  border-radius: calc(var(--u)*4);
  box-shadow: var(--sh);
}
/* v9 (§8.2): kart sanatı karosu (emoji madalyonunun yerine) */
.hud-cd__cart {
  flex: none;
  display: flex;
  line-height: 0;
  border-radius: 22%;
  box-shadow: 0 calc(var(--u)*2) calc(var(--u)*8) rgba(0, 0, 0, .4);
}
.hud-cd__cart .ca {
  --ca-s: calc(var(--u)*48);
}
.hud-cd__ctxt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u)*2);
}
.hud-cd__ckick {
  font: 700 max(8.5px, calc(var(--u)*9))/1 var(--fd);
  letter-spacing: .2em;
  color: var(--t2);
}
.hud-cd__ctxt b {
  font: italic 800 max(14px, calc(var(--u)*19))/1.05 var(--fd);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.hud-cd__ctxt small:not(.hud-cd__ckick) {
  font: 500 max(10.5px, calc(var(--u)*12))/1.3 var(--fb);
  color: var(--t1);
}

/* =========================== ÖLÜM ŞERİDİ (#30/#7/#111) =========================== */
.hud-death {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  pointer-events: none;
}
.hud-death.is-on {
  display: block;
}
/* sadece kenarlarda vinyet — ölüm kamerasındaki katil (dansı/emote'u) görünür kalır */
.hud-death__shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(50, 0, 12, .5) 100%);
}
.hud-death.is-ghost .hud-death__shade {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(24, 16, 60, .45) 100%);
}
.hud-death__card {
  position: absolute;
  left: 50%;
  top: calc(var(--pt) + calc(var(--u)*42));
  display: flex;
  align-items: stretch;
  width: max-content;
  /* mini haritanın (sol üst) üstüne taşmasın: ortalı şerit iki yandan harita genişliği kadar boşluk bırakır */
  max-width: min(calc(100% - 2 * (var(--pl) + calc(var(--u)*112))), calc(var(--u)*560));
  min-height: calc(var(--u)*44);
  overflow: hidden;
  background: var(--g2);
  border: 1px solid var(--st);
  border-radius: calc(var(--u)*4);
  transform: translateX(-50%);
  box-shadow: var(--sh);
}
.hud-death__tag {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u)*5);
  padding: 0 calc(var(--u)*16) 0 calc(var(--u)*10);
  color: #fff;
  background: linear-gradient(180deg, #ff5d6d, #d22a3d);
  clip-path: polygon(0 0, 100% 0, calc(100% - calc(var(--u)*8)) 100%, 0 100%);
}
.hud-death__tico {
  font-size: calc(var(--u)*16);
  line-height: 0;
}
.hud-death__title {
  font: italic 800 calc(var(--u)*19)/1 var(--fd);
  letter-spacing: .04em;
}
.hud-death.is-ghost .hud-death__tag {
  background: linear-gradient(180deg, #8e6bff, #5b3fd6);
}
.hud-death__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u)*2);
  padding: calc(var(--u)*5) calc(var(--u)*12);
}
.hud-death__line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font: 500 max(11px, calc(var(--u)*12.5))/1.25 var(--fb);
  color: var(--t1);
}
.hud-death__line b {
  font: 800 max(12px, calc(var(--u)*15))/1.1 var(--fd);
  letter-spacing: .02em;
}
.hud-death__taunt {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: italic 500 max(10px, calc(var(--u)*11))/1.25 var(--fb);
  color: var(--t2);
}
.hud-death__respawn {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u)*2);
  min-width: calc(var(--u)*62);
  padding: 0 calc(var(--u)*10);
  border-left: 1px solid var(--st);
}
.hud-death__respawn span {
  font: 700 max(8.5px, calc(var(--u)*9))/1.1 var(--fd);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t2);
}
.hud-death__respawn b {
  display: inline-block;
  font: 800 calc(var(--u)*22)/1 var(--fd);
  font-variant-numeric: tabular-nums;
  color: var(--ac);
}
/* ölüm kamerası katili ortalar → "KATİLİN" etiketi başının üstünde */
.hud-death__killer {
  position: absolute;
  left: 50%;
  top: 36%;
  display: none;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}
.hud-death__killer.is-on {
  display: flex;
}
.hud-death__killer span {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u)*5);
  height: calc(var(--u)*20);
  padding: 0 calc(var(--u)*10);
  font: 800 max(10.5px, calc(var(--u)*12))/1 var(--fd);
  letter-spacing: .14em;
  white-space: nowrap;
  color: #fff;
  background: rgba(190, 30, 50, .92);
  border-radius: calc(var(--u)*2);
}
.hud-death__killer span .ic {
  font-size: calc(var(--u)*13);
}
.hud-death__killer i {
  font-size: calc(var(--u)*16);
  line-height: 0;
  margin-top: calc(var(--u)*3);
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
}

/* =========================== TUR SONU =========================== */
.hud-re {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: none;
  pointer-events: none;
}
.hud-re.is-on {
  display: block;
}
.hud-re__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 7, 12, .72) 0%, rgba(5, 7, 12, .14) 30%, rgba(5, 7, 12, .12) 56%, rgba(5, 7, 12, .8) 100%);
}
.hud-re__banner {
  position: absolute;
  left: 50%;
  top: calc(var(--pt) + calc(var(--u)*4));
  isolation: isolate;
  min-width: calc(var(--u)*300);
  max-width: 92%;
  padding: calc(var(--u)*6) calc(var(--u)*42) calc(var(--u)*8);
  overflow: hidden;
  text-align: center;
  transform: translateX(-50%);
}
.hud-re__banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(6, 8, 14, 0), rgba(6, 8, 14, .88) 14%, rgba(6, 8, 14, .88) 86%, rgba(6, 8, 14, 0));
  transform: skewX(var(--sk));
}
.hud-re__banner::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: calc(var(--u)*2);
  background: var(--st2);
}
.hud-re[data-tone='win'] .hud-re__banner::after {
  background: var(--ac);
}
.hud-re[data-tone='lose'] .hud-re__banner::after {
  background: var(--bad);
}
.hud-re__sweep {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
  opacity: 0;
}
.hud-re__round {
  font: 700 max(9px, calc(var(--u)*10.5))/1.3 var(--fd);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t2);
}
.hud-re__title {
  font: italic 800 calc(var(--u)*32)/1.02 var(--fd);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hud-re__who {
  text-shadow: 0 0 calc(var(--u)*14) rgba(0, 0, 0, .6);
}
.hud-re[data-tone='win'] .hud-re__title {
  color: var(--ac);
  text-shadow: 0 0 calc(var(--u)*20) var(--acg);
}
.hud-re__sub {
  margin-top: calc(var(--u)*3);
  font: 600 max(10.5px, calc(var(--u)*12.5))/1.25 var(--fb);
  color: var(--t1);
}
/* yan paneller: seri (sol) + mini skor (sağ) */
.hud-re__series,
.hud-re__scores {
  position: absolute;
  top: calc(var(--pt) + calc(var(--u)*84));
  padding: calc(var(--u)*7) calc(var(--u)*9) calc(var(--u)*8);
  background: var(--g2);
  border: 1px solid var(--st);
  border-radius: calc(var(--u)*5);
  box-shadow: var(--sh), var(--hi);
}
.hud-re__series {
  left: calc(var(--pl) + calc(var(--u)*4));
  width: calc(var(--u)*216);
}
.hud-re__scores {
  right: calc(var(--pr) + calc(var(--u)*4));
  width: calc(var(--u)*210);
}
.hud-re__stitle {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*5);
  margin-bottom: calc(var(--u)*5);
  padding-bottom: calc(var(--u)*5);
  border-bottom: 1px solid var(--st);
  font: 700 max(9px, calc(var(--u)*10))/1 var(--fd);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t1);
}
.hud-re__stitle .ic {
  font-size: calc(var(--u)*12);
  color: var(--ac);
}
.hud-re__stitle em {
  margin-left: auto;
  color: var(--ac);
  letter-spacing: .08em;
}
.hud-re__mpi {
  margin-left: calc(var(--u)*3);
  font-size: .9em;
  color: var(--warn2);
}
.hud-re__srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u)*8);
  height: calc(var(--u)*18);
  padding: 0 calc(var(--u)*5);
  font: 600 max(10px, calc(var(--u)*12))/1 var(--fb);
  border-radius: calc(var(--u)*2);
}
.hud-re__srow > span:first-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hud-re__srow.is-me,
.hud-re__prow.is-me,
.hud-re__trow.is-me {
  background: var(--acs);
  box-shadow: inset calc(var(--u)*2) 0 0 var(--ac);
}
.hud-re__dots {
  display: flex;
  flex: none;
  gap: calc(var(--u)*3);
}
.hud-re__dots i {
  display: inline-block;
  width: calc(var(--u)*9);
  height: calc(var(--u)*9);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--st2);
  transform: skewX(var(--sk));
}
.hud-re__dots i.is-on {
  background: var(--dc, var(--ac));
  border-color: transparent;
}
.hud-re__dots i.is-new {
  animation: hud-dot-in .5s 3s var(--e-out) both;
}
/* PUAN YARIŞI satırı (#104, V28): sıra · ad · çubuk (önce → sonra) · puan · "+5" (kendi sütununda) — 6 satır sığar */
.hud-re__series.is-points {
  width: calc(var(--u)*232);
}
.hud-re__prow {
  --pc: #fff;
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--u)*14) minmax(0, 1fr) calc(var(--u)*48) calc(var(--u)*20) calc(var(--u)*24);
  align-items: center;
  gap: calc(var(--u)*5);
  height: calc(var(--u)*17);
  padding: 0 calc(var(--u)*3) 0 calc(var(--u)*4);
  font: 600 max(10px, calc(var(--u)*12))/1 var(--fb);
  border-radius: calc(var(--u)*2);
}
.hud-re__rk {
  display: flex;
  justify-content: center;
  font: 700 max(9px, calc(var(--u)*10.5))/1 var(--fd);
  color: var(--t2);
}
.hud-re__prow.is-lead .hud-re__rk {
  font-size: calc(var(--u)*11);
  color: var(--ac);
}
.hud-re__pn {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--pc);
}
.hud-re__pbar {
  position: relative;
  height: calc(var(--u)*4);
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  transform: skewX(var(--sk));
}
.hud-re__pb0,
.hud-re__pb1 {
  position: absolute;
  inset: 0;
  transform-origin: left center;
}
.hud-re__pb1 {
  background: var(--pc);
  opacity: .5;
}
.hud-re__pb0 {
  z-index: 1;
  background: var(--pc);
}
.hud-re__prow.is-mp .hud-re__pb1 {
  background: var(--warn2);
  opacity: .85;
}
.hud-re__pv {
  text-align: right;
  font: 800 max(11px, calc(var(--u)*14))/1 var(--fd);
  font-variant-numeric: tabular-nums;
}
.hud-re__fly {
  justify-self: start;
  padding: 0 calc(var(--u)*3);
  font: 800 max(10px, calc(var(--u)*11))/1.35 var(--fd);
  font-variant-numeric: tabular-nums;
  color: var(--ac);
  background: var(--acs);
  border-radius: calc(var(--u)*2);
}
.hud-re__fly0 {
  display: block;
}
.hud-re__trow {
  display: grid;
  grid-template-columns: calc(var(--u)*18) minmax(0, 1fr) calc(var(--u)*22) calc(var(--u)*30);
  align-items: center;
  gap: calc(var(--u)*4);
  height: calc(var(--u)*17);
  padding: 0 calc(var(--u)*4);
  font: 600 max(10px, calc(var(--u)*12))/1 var(--fb);
  border-radius: calc(var(--u)*2);
}
.hud-re__trow > span:nth-child(n + 3) {
  display: flex;
  justify-content: center;
  font-family: var(--fd);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hud-re__trow.is-head {
  height: calc(var(--u)*14);
  font: 700 max(8.5px, calc(var(--u)*9))/1 var(--fd);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t2);
}
.hud-re__trow.is-head .ic {
  font-size: calc(var(--u)*10);
}
.hud-re__place {
  display: flex;
  justify-content: center;
  font: 800 max(10px, calc(var(--u)*12))/1 var(--fd);
  color: var(--t2);
}
.hud-re__place.is-p1 {
  color: var(--ac);
}
.hud-re__place.is-p2 {
  color: #d5dbe6;
}
.hud-re__place.is-p3 {
  color: #d99a62;
}
.hud-re__pname {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hud-re__pname em {
  padding: 0 calc(var(--u)*3);
  font: 800 max(8px, calc(var(--u)*8.5))/1.5 var(--fd);
  letter-spacing: .08em;
  color: var(--ink);
  background: var(--ac);
  border-radius: calc(var(--u)*2);
  vertical-align: 1px;
}
/* ödüller: madalyon kartlar */
.hud-re__awards {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pb) + calc(var(--u)*4));
  transform: translateX(-50%);
  display: flex;
  gap: calc(var(--u)*8);
}
.hud-award {
  width: calc(var(--u)*152);
}
.hud-award__in {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*8);
  padding: calc(var(--u)*6) calc(var(--u)*9) calc(var(--u)*6) calc(var(--u)*6);
  background: var(--g2);
  border: 1px solid var(--st);
  border-radius: calc(var(--u)*5);
  box-shadow: var(--sh), var(--hi);
}
.hud-award.is-me .hud-award__in {
  border-color: rgba(255, 207, 51, .55);
  box-shadow: var(--sh), 0 0 calc(var(--u)*14) rgba(255, 207, 51, .18);
}
/* madalyon: çerçeveli daire içinde tek büyük emoji */
.hud-award__icon {
  flex: none;
  width: calc(var(--u)*38);
  height: calc(var(--u)*38);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .12), rgba(0, 0, 0, .3) 72%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 207, 51, .5), 0 0 0 calc(var(--u)*3) rgba(255, 255, 255, .03);
}
.hud-award.is-me .hud-award__icon {
  box-shadow: inset 0 0 0 1.5px var(--ac), 0 0 calc(var(--u)*12) var(--acg);
}
.hud-award__icon span {
  font-size: calc(var(--u)*20);
  line-height: 1;
}
/* v9: ödülün kendi sprite ikonu (ör. tank tk-streak) — emoji yerine; renkli sembolse kendi renkleri */
.hud-award__ico {
  display: block;
  color: #ffcf33;
}
.hud-award__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u)*2);
}
.hud-award__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: italic 800 calc(var(--u)*13)/1.05 var(--fd);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ac);
}
.hud-award__who {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u)*5);
  min-width: 0;
  font: 700 max(10px, calc(var(--u)*11.5))/1.15 var(--fd);
  letter-spacing: .02em;
}
.hud-award__who span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hud-award__val {
  flex: none;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--t0);
}
.hud-award__desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 500 max(9px, calc(var(--u)*9.5))/1.2 var(--fb);
  color: var(--t2);
}
/* orta sütun: bandın hemen altı (kazananın dansını kapatmaz — #44/#48) */
.hud-re__mid {
  position: absolute;
  left: 50%;
  top: calc(var(--pt) + calc(var(--u)*84));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u)*7);
  /* iki yan panelin arasında kalır — damga ve bahis satırı gerekirse iki satıra kırılır */
  width: max(150px, calc(100% - 2 * (var(--pl) + calc(var(--u)*244))));
  transform: translateX(-50%);
}
.hud-re__match {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  padding: calc(var(--u)*5) calc(var(--u)*20) calc(var(--u)*6);
  text-align: center;
  color: var(--t0);
  background: var(--g2);
  border: 1px solid rgba(255, 207, 51, .55);
  clip-path: polygon(calc(var(--u)*8) 0, 100% 0, calc(100% - calc(var(--u)*8)) 100%, 0 100%);
}
.hud-re__match b {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u)*6);
  font: italic 800 max(15px, calc(var(--u)*21))/1.05 var(--fd);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ac);
}
.hud-re__match b .ic {
  font-size: .85em;
}
.hud-re__match > span {
  margin-top: calc(var(--u)*3);
  font: 600 max(10px, calc(var(--u)*11.5))/1.25 var(--fb);
  color: var(--t1);
}
.hud-re__match > span:empty {
  display: none;
}
.hud-re__match.is-over {
  color: var(--ink);
  background: var(--accent-grad, linear-gradient(180deg, #ffe066 0%, #ffcf33 48%, #ffb300 100%));
  border-color: transparent;
}
.hud-re__match.is-over b {
  font-size: max(17px, calc(var(--u)*26));
  color: var(--ink);
}
.hud-re__match.is-over > span {
  font: italic 800 max(11px, calc(var(--u)*14))/1.1 var(--fd);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
}
.hud-re__match.is-mp b {
  color: var(--warn2);
}
.hud-re__match.is-mp {
  border-color: rgba(255, 159, 28, .65);
}
.hud-re__match.is-compact {
  padding: calc(var(--u)*3) calc(var(--u)*16) calc(var(--u)*4);
}
.hud-re__match.is-compact b {
  font-size: max(12px, calc(var(--u)*15));
}
.hud-re__match:not(.is-over).is-compact > span {
  display: none;
}
.hud-re__match.is-over.is-compact > span {
  font-size: max(10px, calc(var(--u)*12));
}
/* hayalet bahsi sonucu (#112) */
.hud-re__bets {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u)*6);
  max-width: 100%;
  padding: calc(var(--u)*4) calc(var(--u)*12) calc(var(--u)*4) calc(var(--u)*9);
  font: 600 max(10px, calc(var(--u)*12))/1.25 var(--fb);
  color: #e4d8ff;
  background: rgba(34, 20, 70, .9);
  border: 1px solid rgba(155, 107, 255, .55);
  border-radius: calc(var(--u)*12);
}
.hud-re__bets .ic {
  font-size: calc(var(--u)*14);
  color: #cdb6ff;
}
.hud-re__bets.is-mine {
  border-color: var(--ac);
  box-shadow: 0 0 calc(var(--u)*12) var(--acg);
}

/* ışık kıymıkları (havuzlu) */
.hud-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hud-confetti__p {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 2px;
  height: 10px;
  border-radius: 1px;
  opacity: 0;
  will-change: transform, opacity;
}

/* =========================== KAOS KARTI MAKARASI (SPIN) =========================== */
.hud-spin {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  overflow: hidden;
  pointer-events: none;
}
.hud-spin.is-on {
  display: block;
}
.hud-spin__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 38%, rgba(255, 255, 255, .035) 52%, transparent 66%),
    radial-gradient(ellipse 85% 70% at 50% 54%, rgba(22, 28, 44, .6), rgba(4, 6, 10, .92) 72%);
}
.hud-spin.is-mp .hud-spin__bg {
  background:
    linear-gradient(180deg, transparent 38%, rgba(255, 159, 28, .05) 52%, transparent 66%),
    radial-gradient(ellipse 85% 70% at 50% 54%, rgba(48, 26, 10, .6), rgba(6, 4, 4, .92) 72%);
}
.hud-spin__head {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--pt) + calc(var(--u)*6));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hud-spin__kicker {
  font: 700 max(9px, calc(var(--u)*10.5))/1.2 var(--fd);
  letter-spacing: .26em;
  color: var(--ac);
}
.hud-spin__title {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u)*9);
  margin-top: calc(var(--u)*2);
  font: italic 800 calc(var(--u)*40)/1 var(--fd);
  letter-spacing: .03em;
  color: var(--t0);
  text-shadow: 0 calc(var(--u)*3) calc(var(--u)*16) rgba(0, 0, 0, .55);
}
.hud-spin__ttxt {
  min-width: 0;
  white-space: nowrap;
}
.hud-spin__tico {
  font-size: calc(var(--u)*30);
  line-height: 0;
  color: var(--ac);
}
.hud-spin.is-mp .hud-spin__title {
  color: var(--warn2);
}
.hud-spin.is-mp .hud-spin__tico {
  color: var(--warn2);
}
.hud-spin.is-final .hud-spin__title,
.hud-spin.is-final .hud-spin__tico {
  color: var(--ac);
}
.hud-spin__sub {
  margin-top: calc(var(--u)*4);
  font: 600 max(11px, calc(var(--u)*13))/1.25 var(--fb);
  color: var(--t1);
}
.hud-spin.is-mp .hud-spin__sub {
  color: var(--t0);
}
.hud-spin__window {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(var(--u)*150);
  margin-top: calc(var(--u)*-64);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  transition: opacity .3s ease;
}
.hud-spin__strip {
  position: absolute;
  left: 50%;
  top: calc(var(--u)*11);
  display: flex;
  gap: calc(var(--u)*12);
  will-change: transform;
}
/* seçim çerçevesi: ortadaki kartın etrafında ince volt çerçeve + iki ok */
.hud-spin__marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: calc(var(--u)*150);
  margin-top: calc(var(--u)*-64);
  transition: opacity .3s ease;
}
.hud-spin__marker b {
  position: absolute;
  left: calc(var(--u)*-55);
  top: calc(var(--u)*5);
  width: calc(var(--u)*110);
  height: calc(var(--u)*140);
  border: 1.5px solid rgba(255, 207, 51, .85);
  border-radius: calc(var(--u)*8);
  box-shadow: 0 0 calc(var(--u)*16) rgba(255, 207, 51, .25);
}
.hud-spin__marker i {
  position: absolute;
  left: calc(var(--u)*-7);
  width: 0;
  height: 0;
  border-left: calc(var(--u)*7) solid transparent;
  border-right: calc(var(--u)*7) solid transparent;
}
.hud-spin__marker i:first-child {
  top: calc(var(--u)*-4);
  border-top: calc(var(--u)*8) solid var(--ac);
}
.hud-spin__marker i:nth-child(2) {
  bottom: calc(var(--u)*-4);
  border-bottom: calc(var(--u)*8) solid var(--ac);
}
.hud-spin.is-result .hud-spin__window,
.hud-spin.is-result .hud-spin__marker {
  opacity: .1;
}
.hud-spin.is-classic .hud-spin__window,
.hud-spin.is-classic .hud-spin__marker {
  display: none;
}
/* v9 (docs/v9-card-art.md §8.1/§8.5): kart = üstte kart renginde şerit + kart sanatı karosu (84u) + ad (2 satır) */
.hud-card {
  --c: #9aa3ad;
  position: relative;
  flex: none;
  width: calc(var(--u)*96);
  height: calc(var(--u)*128);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--u)*5);
  padding-top: calc(var(--u)*6);
  overflow: hidden;
  background: linear-gradient(180deg, #1b2335 0%, #0f1420 100%);
  border-top: calc(var(--u)*3) solid var(--c);
  border-radius: calc(var(--u)*6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 calc(var(--u)*6) calc(var(--u)*16) rgba(0, 0, 0, .45);
  transition: opacity .25s ease, transform .25s var(--e-out), box-shadow .25s ease;
}
/* yuva boyutu sabit (makarada sanat azar azar yazılır — boş yuva yerleşimi oynatmaz); karo yuvayı doldurur */
.hud-card__art {
  position: relative;
  flex: none;
  display: flex;
  width: calc(var(--u)*84);
  height: calc(var(--u)*84);
  line-height: 0;
  border-radius: 22%;
  box-shadow: 0 calc(var(--u)*3) calc(var(--u)*8) rgba(0, 0, 0, .4);
}
.hud-card__art:empty {
  background: rgba(255, 255, 255, .06);
}
.hud-card__art .ca {
  --ca-s: 100%;
}
.hud-card__name {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  padding: 0 calc(var(--u)*6);
  text-align: center;
  font: italic 800 calc(var(--u)*12.5)/1.05 var(--fd);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--t0);
}
.hud-card__shine {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
/* v9 (§8.1/§12.1-E): inme anında kart başına opaklık geçişi yerine şeridin üstünde TEK karartma katmanı; kazanan onun üstünde */
.hud-spin__dim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: rgba(5, 7, 12, .68);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.hud-spin.is-landed .hud-spin__dim {
  opacity: 1;
}
.hud-card.is-win {
  z-index: 2;
  transform: scale(1.06);
  box-shadow: inset 0 0 0 1.5px var(--ac), 0 0 calc(var(--u)*24) rgba(255, 207, 51, .3), 0 calc(var(--u)*6) calc(var(--u)*16) rgba(0, 0, 0, .45);
}
.hud-spin__result {
  --c: #9aa3ad;
  position: absolute;
  left: 50%;
  top: 55%;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u)*10);
  width: min(92%, calc(var(--u)*400));
  transform: translate(-50%, -50%);
  /* JS (_placeResult) başlığın altına yerleştirir: top px + translate(-50%, 0) [+ scale] */
  transform-origin: 50% 0;
}
.hud-spin__result.is-on {
  display: flex;
}
.hud-spin__glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(var(--u)*98);
  width: calc(var(--u)*300);
  height: calc(var(--u)*300);
  margin: calc(var(--u)*-150) 0 0 calc(var(--u)*-150);
  background: radial-gradient(circle, var(--c) 0%, transparent 62%);
  opacity: .2;
  pointer-events: none;
}
.hud-spin__big {
  display: flex;
  justify-content: center;
}
.hud-card.is-big {
  width: calc(var(--u)*148);
  height: calc(var(--u)*192);
  gap: calc(var(--u)*8);
  padding-top: calc(var(--u)*6);
  border-top-width: calc(var(--u)*4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 calc(var(--u)*30) rgba(0, 0, 0, .5);
}
.hud-card.is-big .hud-card__art {
  box-shadow: 0 calc(var(--u)*4) calc(var(--u)*14) rgba(0, 0, 0, .45), 0 0 0 calc(var(--u)*1.5) rgba(255, 255, 255, .06);
}
.hud-card.is-big .hud-card__art {
  width: calc(var(--u)*128);
  height: calc(var(--u)*128);
}
.hud-card.is-big .hud-card__name {
  font-size: calc(var(--u)*19);
}
.hud-spin__desc {
  max-width: 100%;
  padding: calc(var(--u)*7) calc(var(--u)*14);
  text-align: center;
  font: 600 max(12px, calc(var(--u)*14))/1.3 var(--fb);
  color: var(--t0);
  background: var(--g2);
  border: 1px solid var(--st);
  border-radius: calc(var(--u)*4);
}
.hud-spin__desc:empty {
  display: none;
}

/* =========================== SKOR TABLOSU =========================== */
.hud-sb {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: none;
  pointer-events: none;
}
.hud-sb.is-on {
  display: block;
}
.hud-sb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, .6);
}
.hud-sb__backdrop.is-down {
  scale: 1;
}
.hud-sb__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92%, calc(var(--u)*540));
  max-height: calc(100% - calc(var(--u)*20));
  overflow: auto;
  overscroll-behavior: contain;
  padding: calc(var(--u)*10) calc(var(--u)*14) calc(var(--u)*12);
  background: rgba(10, 13, 22, .96);
  border: 1px solid var(--st2);
  border-radius: calc(var(--u)*8);
  transform: translate(-50%, -50%);
  box-shadow: 0 calc(var(--u)*14) calc(var(--u)*40) rgba(0, 0, 0, .5), var(--hi);
  pointer-events: auto;
  touch-action: pan-y;
}
.hud-sb__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*12);
  margin-bottom: calc(var(--u)*8);
}
.hud-sb__title {
  flex: none;
  font: italic 800 calc(var(--u)*22)/1 var(--fd);
  letter-spacing: .03em;
}
.hud-sb__mode {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u)*6);
  overflow: hidden;
  white-space: nowrap;
  font: 700 max(10px, calc(var(--u)*11))/1 var(--fd);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t1);
}
.hud-sb__mode .ic {
  font-size: calc(var(--u)*14);
  color: var(--ac);
}
.hud-sb__mode i {
  flex: none;
  width: calc(var(--u)*3);
  height: calc(var(--u)*3);
  background: var(--t2);
  border-radius: 50%;
}
.hud-sb__close {
  flex: none;
  width: max(44px, calc(var(--u)*38));
  height: max(44px, calc(var(--u)*38));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u)*18);
  line-height: 0;
  color: var(--t0);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--st2);
  border-radius: 50%;
}
.hud-sb__close.is-down {
  border-color: var(--ac);
  color: var(--ac);
}
.hud-sb__teams {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*8);
  margin: 0 0 calc(var(--u)*8);
}
.hud-sb__team {
  --tc: #fff;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u)*6);
  height: calc(var(--u)*34);
  padding: 0 calc(var(--u)*12);
  background: rgba(255, 255, 255, .04);
  border-left: calc(var(--u)*3) solid var(--tc);
  border-radius: calc(var(--u)*3);
}
.hud-sb__team span {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u)*2);
  font: 800 max(11px, calc(var(--u)*13))/1 var(--fd);
  letter-spacing: .06em;
  color: var(--tc);
}
.hud-sb__team small {
  font: 700 max(8px, calc(var(--u)*8.5))/1 var(--fd);
  letter-spacing: .14em;
  color: var(--t2);
}
.hud-sb__team b {
  font: 800 calc(var(--u)*24)/1 var(--fd);
  font-variant-numeric: tabular-nums;
}
.hud-sb__team.is-mine {
  background: rgba(255, 255, 255, .08);
}
.hud-sb__vs {
  font: italic 800 calc(var(--u)*13)/1 var(--fd);
  color: var(--t2);
}
.hud-sb__row {
  display: grid;
  grid-template-columns: calc(var(--u)*26) minmax(0, 1fr) calc(var(--u)*44) calc(var(--u)*44) calc(var(--u)*50);
  align-items: center;
  gap: calc(var(--u)*6);
  min-height: calc(var(--u)*27);
  padding: 0 calc(var(--u)*8);
  font: 600 max(11px, calc(var(--u)*13))/1.2 var(--fb);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.hud-sb__row > span:nth-child(n + 3) {
  text-align: center;
  font-family: var(--fd);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hud-sb__row[style*='--tc'] {
  box-shadow: inset calc(var(--u)*3) 0 0 var(--tc);
}
.hud-sb__row.is-head {
  min-height: calc(var(--u)*20);
  font: 700 max(8.5px, calc(var(--u)*9.5))/1 var(--fd);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t2);
  border-bottom-color: var(--st);
}
.hud-sb__row.is-me {
  background: var(--acs);
  box-shadow: inset calc(var(--u)*3) 0 0 var(--ac);
}
.hud-sb__rank {
  display: flex;
  justify-content: center;
  font: 800 calc(var(--u)*14)/1 var(--fd);
  color: var(--t2);
}
.hud-sb__row.is-top .hud-sb__rank {
  font-size: calc(var(--u)*15);
  color: var(--ac);
}
.hud-sb__name {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*7);
  min-width: 0;
}
.hud-sb__name i {
  flex: none;
  width: calc(var(--u)*8);
  height: calc(var(--u)*8);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}
.hud-sb__name em {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
}
.hud-sb__name small {
  flex: none;
  padding: 0 calc(var(--u)*4);
  font: 800 calc(var(--u)*9)/1.5 var(--fd);
  letter-spacing: .08em;
  color: var(--ink);
  background: var(--ac);
  border-radius: calc(var(--u)*2);
}
.hud-sb__pts {
  font-size: calc(var(--u)*16);
  font-weight: 800 !important;
  color: var(--ac);
}
.hud-sb__empty {
  padding: calc(var(--u)*14);
  text-align: center;
  font: 600 calc(var(--u)*13)/1.3 var(--fb);
  color: var(--t2);
}
.hud-sb__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(var(--u)*10);
}
.hud-sb__leave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u)*7);
  min-height: max(44px, calc(var(--u)*38));
  padding: 0 calc(var(--u)*16);
  font: 800 max(11px, calc(var(--u)*13))/1 var(--fd);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t1);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--st2);
  border-radius: calc(var(--u)*4);
}
.hud-sb__leave .ic {
  font-size: calc(var(--u)*16);
}
.hud-sb__leave.is-armed {
  color: #fff;
  background: rgba(200, 36, 56, .9);
  border-color: var(--bad);
}

/* =========================== EMOTE TEKERLEĞİ =========================== */
.hud-wheel {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: none;
  pointer-events: none;
}
.hud-wheel.is-on {
  display: block;
}
.hud-wheel__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  background: linear-gradient(90deg, rgba(4, 6, 10, 0), rgba(4, 6, 10, .6) 30%, rgba(4, 6, 10, .76));
}
.hud-wheel__backdrop.is-down {
  scale: 1;
}
.hud-wheel__ring {
  position: absolute;
  left: max(calc(var(--pl) + calc(var(--u)*150)), calc(100% - var(--pr) - calc(var(--u)*392)));
  top: 52%;
  width: 0;
  height: 0;
}
.hud-wheel__disc {
  position: absolute;
  left: calc(var(--u)*-146);
  top: calc(var(--u)*-146);
  width: calc(var(--u)*292);
  height: calc(var(--u)*292);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 28%, rgba(8, 11, 19, .88) 29% 68%, rgba(255, 255, 255, .16) 68.5% 69%, transparent 69.5%);
  animation: hud-fade-in .2s ease-out both;
}
.hud-wheel__item {
  position: absolute;
  left: 0;
  top: 0;
  width: max(48px, calc(var(--u)*60));
  height: max(48px, calc(var(--u)*60));
  margin: min(-24px, calc(var(--u)*-30)) 0 0 min(-24px, calc(var(--u)*-30));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u)*2);
  background: radial-gradient(circle at 50% 30%, rgba(36, 44, 64, .96), rgba(12, 16, 27, .96) 72%);
  border: 1px solid var(--st2);
  border-radius: 50%;
  box-shadow: var(--sh);
  transform: translate(calc(var(--x) * calc(var(--u)*106)), calc(var(--y) * calc(var(--u)*106)));
}
.hud-wheel.is-on .hud-wheel__item {
  animation: hud-pop-in .22s var(--e-out) both;
  animation-delay: calc(var(--i) * 18ms);
}
.hud-wheel__item.is-down {
  border-color: var(--ac);
  background: radial-gradient(circle at 50% 30%, rgba(80, 66, 20, .96), rgba(20, 16, 6, .96) 72%);
}
.hud-wheel__emo {
  font-size: calc(var(--u)*25);
  line-height: 1.05;
}
.hud-wheel__item.is-letter .hud-wheel__emo {
  font: italic 800 calc(var(--u)*28)/1 var(--fd);
  color: var(--ac);
}
.hud-wheel__item small {
  max-width: calc(var(--u)*56);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 700 max(8.5px, calc(var(--u)*8.5))/1.1 var(--fd);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--t1);
}
.hud-wheel__item .hud-kbd {
  top: calc(var(--u)*-2);
  right: calc(var(--u)*-2);
}
.hud-wheel__center {
  position: absolute;
  left: 0;
  top: 0;
  width: max(48px, calc(var(--u)*56));
  height: max(48px, calc(var(--u)*56));
  margin: min(-24px, calc(var(--u)*-28)) 0 0 min(-24px, calc(var(--u)*-28));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u)*2);
  font-size: calc(var(--u)*17);
  color: var(--t0);
  background: rgba(8, 11, 19, .96);
  border: 1px solid var(--st2);
  border-radius: 50%;
}
.hud-wheel__center small {
  font: 700 max(8.5px, calc(var(--u)*8.5))/1 var(--fd);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t2);
}
.hud-wheel__center.is-down {
  border-color: var(--bad);
}
.hud-wheel__side {
  position: absolute;
  right: calc(var(--pr) + calc(var(--u)*2));
  top: 50%;
  width: calc(var(--u)*216);
  max-height: calc(100% - calc(var(--u)*16));
  display: flex;
  flex-direction: column;
  gap: calc(var(--u)*6);
  transform: translateY(-50%);
}
.hud-wheel__label {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*6);
  font: italic 800 calc(var(--u)*15)/1.1 var(--fd);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hud-wheel__label .ic {
  font-size: calc(var(--u)*15);
  color: var(--ac);
}
.hud-wheel__chats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u)*5);
}
.hud-wheel__chat {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: max(44px, calc(var(--u)*42));
  padding: calc(var(--u)*3) calc(var(--u)*7);
  text-align: center;
  font: 600 max(10.5px, calc(var(--u)*11.5))/1.15 var(--fb);
  color: var(--t0);
  background: rgba(12, 16, 27, .94);
  border: 1px solid var(--st);
  border-radius: calc(var(--u)*4);
}
.hud-wheel.is-on .hud-wheel__chat {
  animation: hud-slide-in .22s var(--e-out) both;
  animation-delay: calc(var(--i) * 16ms);
}
.hud-wheel__chat.is-down {
  border-color: var(--ac);
  color: var(--ac);
}

/* =========================== KOÇ İPUÇLARI (#36/#121): ince oklu cam haplar =========================== */
.hud-coach {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  pointer-events: none;
}
.hud-coach.is-on {
  display: block;
}
.hud--cine .hud-coach {
  display: none;
}
.hud-coach__item {
  --r: 58px;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
/* boştaki joystick halkasını belirten ince nabız */
.hud-coach__ring {
  position: absolute;
  left: calc(var(--r) * -1);
  top: calc(var(--r) * -1);
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  animation: hud-coach-ring 1.8s ease-in-out infinite;
}
.hud-coach__item.is-ctx .hud-coach__ring {
  border-color: var(--ac);
  animation: hud-ring 1.4s ease-out infinite;
}
/* dokunuş noktası: sürükle / dokun / bırak demosu */
.hud-coach__finger {
  position: absolute;
  left: calc(var(--u)*-9);
  top: calc(var(--u)*-9);
  width: calc(var(--u)*18);
  height: calc(var(--u)*18);
  background: rgba(255, 255, 255, .92);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--u)*5) rgba(255, 255, 255, .18), 0 calc(var(--u)*2) calc(var(--u)*6) rgba(0, 0, 0, .4);
}
.hud-coach__finger.is-drag {
  animation: hud-coach-drag 2.2s ease-in-out infinite;
}
.hud-coach__finger.is-aim {
  animation: hud-coach-aim 2.6s ease-in-out infinite;
}
.hud-coach__finger.is-release {
  animation: hud-coach-release 1.8s ease-in-out infinite;
}
.hud-coach__finger.is-tap {
  animation: hud-coach-tap 1.2s ease-in-out infinite;
}
.hud-coach__item.is-ctx .hud-coach__finger {
  left: calc(var(--u)*6);
  top: calc(var(--u)*6);
}
/* ipucu hapı: halkanın üstünde, oku halkanın merkezini gösterir */
.hud-coach__bubble {
  position: absolute;
  left: 0;
  bottom: calc(var(--r) + calc(var(--u)*12));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u)*3);
  width: max-content;
  max-width: min(46vw, calc(var(--u)*300));
  padding: calc(var(--u)*6) calc(var(--u)*13) calc(var(--u)*7);
  text-align: center;
  color: var(--t0);
  background: rgba(8, 11, 19, .92);
  border: 1px solid rgba(255, 207, 51, .45);
  border-radius: calc(var(--u)*5);
  box-shadow: var(--sh);
  transform: translateX(-50%);
}
.hud-coach__bubble::after {
  content: '';
  position: absolute;
  left: calc(50% + var(--ax, 0px));
  bottom: calc(var(--u)*-5);
  width: calc(var(--u)*9);
  height: calc(var(--u)*9);
  margin-left: calc(var(--u)*-4.5);
  background: rgba(8, 11, 19, .92);
  border-right: 1px solid rgba(255, 207, 51, .45);
  border-bottom: 1px solid rgba(255, 207, 51, .45);
  transform: rotate(45deg);
}
.hud-coach__row {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u)*5);
  white-space: nowrap;
  font: 800 max(12px, calc(var(--u)*15))/1 var(--fd);
  letter-spacing: .05em;
}
.hud-coach__bubble .is-go {
  color: var(--ac);
}
.hud-coach__bubble small {
  display: block;
  font: 500 max(10px, calc(var(--u)*11))/1.25 var(--fb);
  color: var(--t1);
}
.hud-coach__bubble small b {
  font-weight: 700;
  color: var(--t0);
}
.hud-coach__arr {
  font-size: calc(var(--u)*14);
  color: var(--t2);
}
.hud-coach__lead {
  font-size: calc(var(--u)*16);
  color: var(--ac);
}
/* nişan bölgesi: ipucu nişan halkasının etrafındaki buton kümesinin (duvar / eşya / domates) ÜSTÜNDE */
.hud--touch .hud-coach__item.is-aim .hud-coach__bubble {
  bottom: calc(var(--r) + calc(var(--u)*72));
}
.hud--touch .hud-coach__item.is-ghostAim .hud-coach__bubble {
  bottom: calc(var(--r) + calc(var(--u)*86));
}
/* bağlam butonu (AÇ): ipucu butonun SOLUNDA, ok sağa bakar (sağ üstteki eşya/duvar butonlarını örtmez) */
.hud-coach__item.is-ctx .hud-coach__bubble {
  left: auto;
  right: calc(var(--r) + calc(var(--u)*12));
  top: 0;
  bottom: auto;
  transform: translateY(-50%);
}
.hud-coach__item.is-ctx .hud-coach__bubble::after {
  left: auto;
  right: calc(var(--u)*-5);
  top: 50%;
  bottom: auto;
  margin: calc(var(--u)*-4.5) 0 0;
  transform: rotate(-45deg);
}

/* =========================== v4 (DESIGN §13 / §15) =========================== */

/* ---- silah bilgi baloncuğu (slotu basılı tut / fareyle üstünde bekle): ad + nadirlik + kısa özellik ---- */
.hud-wtip {
  --tc: #fff;
  position: absolute;
  z-index: 2;
  left: var(--x, 50%);
  bottom: calc(100% + calc(var(--u)*16));
  display: flex;
  align-items: center;
  gap: calc(var(--u)*8);
  max-width: calc(var(--u)*250);
  padding: calc(var(--u)*6) calc(var(--u)*12) calc(var(--u)*6) calc(var(--u)*9);
  white-space: nowrap;
  background: rgba(8, 11, 19, .93);
  border: 1px solid var(--st2);
  border-left: calc(var(--u)*2) solid var(--tc);
  border-radius: 0 calc(var(--u)*4) calc(var(--u)*4) 0;
  box-shadow: var(--sh);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0);
  transition: opacity .15s ease, visibility .15s;
  pointer-events: none;
}
.hud-wtip.is-on {
  opacity: 1;
  visibility: visible;
}
.hud-wtip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: calc(var(--u)*-5);
  border: calc(var(--u)*5) solid transparent;
  border-top-color: rgba(8, 11, 19, .93);
}
.hud-wtip__ico {
  flex: none;
  font-size: calc(var(--u)*26);
  line-height: 0;
  color: var(--tc);
}
.hud-wtip__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u)*3);
  min-width: 0;
}
.hud-wtip__h {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u)*6);
  min-width: 0;
}
.hud-wtip__n {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font: italic 800 max(12px, calc(var(--u)*15))/1 var(--fd);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--t0);
}
.hud-wtip__r {
  flex: none;
  font: 700 max(9px, calc(var(--u)*9.5))/1 var(--fd);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tc);
}
.hud-wtip__s {
  overflow: hidden;
  text-overflow: ellipsis;
  font: 600 max(11px, calc(var(--u)*12))/1.15 var(--fb);
  color: var(--t1);
}
.hud-toasts {
  transition: opacity .15s ease;
}
.hud--wtip .hud-toasts {
  opacity: 0;
}

/* ---- iki satırlı eşya bildirimi: başlık + kısa özellik (silahlar görünümden ayırt edilsin) ---- */
.hud-toast.is-2l {
  height: auto;
  min-height: calc(var(--u)*24);
  padding: calc(var(--u)*5) calc(var(--u)*12) calc(var(--u)*5) calc(var(--u)*8);
}
.hud-toast.is-2l .hud-toast__ico {
  font-size: calc(var(--u)*22);
}
.hud-toast__b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u)*3);
  min-width: 0;
}
.hud-toast__s {
  max-width: calc(var(--u)*260);
  overflow: hidden;
  text-overflow: ellipsis;
  font: 600 max(10.5px, calc(var(--u)*11))/1.1 var(--fb);
  letter-spacing: 0;
  color: var(--t1);
}

/* ---- AL: yerdeki silahın adı + kısa özelliği (butonun sol üstünde; nişan halkasına taşmaz) ---- */
.hud-abtn__cap {
  --cc: #fff;
  position: absolute;
  right: calc(var(--s) / 2 - calc(var(--u)*10));
  bottom: calc(100% + calc(var(--u)*12));
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u)*3);
  max-width: calc(var(--u)*240);
  padding: calc(var(--u)*5) calc(var(--u)*10);
  text-align: right;
  white-space: nowrap;
  background: rgba(8, 11, 19, .9);
  border: 1px solid var(--st2);
  border-right: calc(var(--u)*2) solid var(--cc);
  border-radius: calc(var(--u)*4) 0 0 calc(var(--u)*4);
  box-shadow: var(--sh);
  pointer-events: none;
}
.hud-abtn--ctx.has-cap .hud-abtn__cap {
  display: flex;
}
.hud-abtn__capn {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font: italic 800 max(11px, calc(var(--u)*13))/1 var(--fd);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cc);
}
.hud-abtn__caps {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 600 max(10px, calc(var(--u)*11))/1.1 var(--fb);
  color: var(--t1);
}

/* ---- genel olay satırları (feedEvent): öldürme akışıyla aynı sütun ---- */
.hud-kf__txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--t1);
}
.hud-kf__tag {
  flex: none;
  padding: 0 calc(var(--u)*5);
  font: 800 max(10px, calc(var(--u)*11))/1.45 var(--fd);
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--ac);
  border-radius: calc(var(--u)*2);
  text-shadow: none;
}
.hud-kf.is-event.is-good {
  border-right-color: var(--ok);
}
.hud-kf.is-good .hud-kf__icon {
  color: var(--ok);
}
.hud-kf.is-event.is-bad {
  border-right-color: var(--bad);
}
.hud-kf.is-bad .hud-kf__icon {
  color: var(--bad);
}
.hud-kf.is-event.is-gold {
  border-right-color: var(--ac);
}
.hud-kf.is-gold .hud-kf__icon {
  color: var(--ac);
}
.hud-kf.is-info .hud-kf__icon {
  color: var(--cy);
}
.hud-kf.is-event.is-me {
  background: linear-gradient(90deg, rgba(60, 46, 6, 0), rgba(60, 46, 6, .85) calc(var(--u)*16));
}

/* ---- yeni emoji telefonda yoksa yerine gelen SVG ikon (kart madalyonu, ödül, bahis) ---- */
.hud .ic-emo {
  color: var(--c, var(--kc, currentColor));
}

/* ---- skor tablosu / tur sonu: Parti Yarışı sütunları ---- */
.hud-sb.is-race .hud-sb__row {
  grid-template-columns: calc(var(--u)*26) minmax(0, 1fr) calc(var(--u)*86) calc(var(--u)*44) calc(var(--u)*50);
}
.hud-sb__st {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: max(10px, calc(var(--u)*11));
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t1);
}
.hud-sb__st.is-good {
  color: var(--ok);
}
.hud-sb__st.is-bad {
  color: var(--bad);
}
.hud-sb__st.is-gold {
  color: var(--ac);
}
.hud-re.is-race .hud-re__trow {
  grid-template-columns: calc(var(--u)*18) minmax(0, 1fr) calc(var(--u)*34) calc(var(--u)*30);
}
.hud-re__th {
  font-size: max(8px, calc(var(--u)*8.5));
  letter-spacing: .1em;
}

/* ---- HUD düzeni: Parti Yarışı ('race') — Kaos'a özel öğeler gizli, ortak katmanlar kalır ---- */
.hud-custom {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hud--kaos .hud-custom {
  display: none;
}
.hud--race .hud-map,
.hud--race .hud-poi,
.hud--race .hud-vitals,
.hud--race .hud-slots,
.hud--race .hud-actions,
.hud--race .hud-tomato,
.hud--race .hud-stormedge,
.hud--race .hud-off,
.hud--race .hud-wtip,
.hud--race .hud-score__seg.hud-stormchip,
.hud--race .hud-score__seg.hud-score__mode {
  display: none;
}
/* yarışta sol üstte harita yok: seri satırı köşede (--hud-tl-w onun genişliği — üst çubuk ona binmez) */
.hud--race {
  --hud-tl-w: calc(var(--pl) + calc(var(--u)*116));
}
/* slotlar yokken bildirimler alt bantta (v5: merkez bölgeye taşmaz; ZIPLA/DAL/EŞYA sağ altta) */
.hud--race .hud-toasts {
  bottom: calc(100% + calc(var(--u)*14));
}
/* bitirip izlerken de emote (bitiş kürsüsünde dans) */
.hud--race.hud--spect .hud-rbtn--emote {
  display: flex;
}

/* =========================== v5 (DESIGN §16) — mobil öncelikli sadeleştirme =========================== */
/* .hud--compact = telefon (yatay; yükseklik ≤ 480 ya da genişlik ≤ 900). Kalıcı HUD ≤ ekranın %16'sı, merkez bölge boş. */

/* ---- bant yerine akışa düşen anonslar (HUD.announce → feedEvent tone 'ann') + isteğe bağlı renk vurgusu ---- */
.hud-kf.is-event.is-ann {
  border-right-color: var(--ec);
}
.hud-kf.is-ann .hud-kf__icon {
  color: var(--ec);
}
.hud-kf.is-ann .hud-kf__txt {
  font-weight: 700;
  color: var(--t0);
}

/* ---- anons bandı görünürken (hud--ann) çubuğun hemen altındaki yarış kısa bildirimi geri çekilir (üst üste binmesin);
   yarış katmanındaki başka öğeler data-hud-yield ile aynı davranışı alabilir ---- */
.hud--race.hud--ann .rh-msg,
.hud--ann [data-hud-yield] {
  opacity: 0;
}

/* ---- izlerken / hayaletken çubuğun altında "İzliyorsun / HAYALET MODU" hapı var → anons bandı onun altına ---- */
.hud--spect .hud-ann,
.hud--ghost .hud-ann {
  top: calc(var(--hud-top-b) + calc(var(--u)*25));
}

/* ---- §16.2 isim rozeti: oyuncu renginde halka + karakter portresi / emojisi (skor tablosu, tur sonu) ---- */
.hud-av {
  --pc: #9aa3ad;
  position: relative;
  flex: none;
  width: calc(var(--u)*18);
  height: calc(var(--u)*18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  vertical-align: middle;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .12), rgba(0, 0, 0, .35) 75%);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--u)*1.5) var(--pc);
}
.hud-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hud-av__e {
  font-size: calc(var(--u)*11);
  line-height: 1;
}
.hud-av b {
  font: 800 calc(var(--u)*10)/1 var(--fd);
  color: var(--pc);
}
.hud-sb__name .hud-av {
  width: calc(var(--u)*20);
  height: calc(var(--u)*20);
}
.hud-sb__name .hud-av__e {
  font-size: calc(var(--u)*12);
}
.hud-re__pn,
.hud-re__pname {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*4);
}
.hud-re__pnt {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hud-re__pn .hud-av,
.hud-re__pname .hud-av {
  width: calc(var(--u)*14);
  height: calc(var(--u)*14);
  box-shadow: 0 0 0 1px var(--pc);
}
.hud-re__pn .hud-av__e,
.hud-re__pname .hud-av__e {
  font-size: calc(var(--u)*9);
}

/* ---- telefon: eşya bildirimi TEK satır (kısa özellik başlığın yanında), alt bantta ---- */
.hud--compact .hud-toast.is-2l {
  height: calc(var(--u)*17);
  min-height: 0;
  padding: 0 calc(var(--u)*9) 0 calc(var(--u)*6);
}
.hud--compact .hud-toast.is-2l .hud-toast__ico {
  font-size: calc(var(--u)*14);
}
.hud--compact .hud-toast__b {
  flex-direction: row;
  align-items: baseline;
  gap: calc(var(--u)*6);
}
.hud--compact .hud-toast__s {
  max-width: calc(var(--u)*170);
  font-size: max(10px, calc(var(--u)*10.5));
}

/* ---- telefon: AL başlığı yok (yerdeki etiket bağlam butonu aktifken kısa özelliği zaten gösterir — §16.1);
   silahın adı + özelliği alınca bildirimde ve slotu basılı tutunca baloncukta ---- */
.hud--compact.hud--touch .hud-abtn--ctx.has-cap .hud-abtn__cap {
  display: none;
}

/* ---- telefon: silah bilgi baloncuğu küçük ---- */
.hud--compact .hud-wtip {
  bottom: calc(100% + calc(var(--u)*10));
  gap: calc(var(--u)*6);
  padding: calc(var(--u)*4) calc(var(--u)*9) calc(var(--u)*4) calc(var(--u)*7);
}
.hud--compact .hud-wtip__ico {
  font-size: calc(var(--u)*20);
}

/* ---- telefon: geri sayım küçük (kart bandı çubuğun altında, sayı daha küçük) ---- */
.hud--compact .hud-cd__num {
  font-size: calc(var(--u)*88);
}
.hud--compact .hud-cd__num.is-go {
  font-size: calc(var(--u)*64);
}
.hud--compact .hud-cd.has-card {
  padding: calc(var(--hud-top-b) + calc(var(--u)*80)) 0 calc(var(--pb) + calc(var(--u)*64));
}
.hud--compact .hud-cd.has-card .hud-cd__num {
  font-size: calc(var(--u)*72);
}
.hud--compact .hud-cd.has-card .hud-cd__num.is-go {
  font-size: calc(var(--u)*56);
}
.hud--compact .hud-cd__card {
  top: calc(var(--hud-top-b) + calc(var(--u)*6));
}
.hud--compact .hud-cd__cardin {
  gap: calc(var(--u)*8);
  padding: calc(var(--u)*5) calc(var(--u)*12) calc(var(--u)*6) calc(var(--u)*6);
}
.hud--compact .hud-cd__cart .ca {
  --ca-s: calc(var(--u)*40);
}
.hud--compact .hud-cd__ctxt b {
  font-size: max(13px, calc(var(--u)*16));
}
.hud--compact .hud-cd__goal {
  padding: calc(var(--u)*4) calc(var(--u)*12);
  font-size: max(10.5px, calc(var(--u)*12));
}

/* ---- telefon: ölüm şeridi ince (çubuğun hemen altında) ve "KATİLİN" etiketi küçük ---- */
.hud--compact .hud-death__card {
  top: calc(var(--hud-top-b) + calc(var(--u)*5));
  min-height: calc(var(--u)*34);
  max-width: min(calc(100% - 2 * (var(--pl) + var(--mm) + calc(var(--u)*8))), calc(var(--u)*480));
}
.hud--compact .hud-death__tag {
  padding: 0 calc(var(--u)*12) 0 calc(var(--u)*8);
}
.hud--compact .hud-death__title {
  font-size: calc(var(--u)*15);
}
.hud--compact .hud-death__tico {
  font-size: calc(var(--u)*13);
}
.hud--compact .hud-death__body {
  padding: calc(var(--u)*3) calc(var(--u)*10);
}
.hud--compact .hud-death__line {
  -webkit-line-clamp: 1;
  font-size: max(10.5px, calc(var(--u)*11));
}
.hud--compact .hud-death__line b {
  font-size: max(11.5px, calc(var(--u)*13));
}
.hud--compact .hud-death__taunt {
  display: none;
}
/* telefon: yerdeyken sadece YERDESİN + bar (ipucu anons bandında) */
.hud--compact .hud-knock__txt span {
  display: none;
}
.hud--compact .hud-death__respawn {
  min-width: calc(var(--u)*50);
  padding: 0 calc(var(--u)*8);
}
.hud--compact .hud-death__respawn b {
  font-size: calc(var(--u)*17);
}
.hud--compact .hud-death__killer span {
  height: calc(var(--u)*16);
  padding: 0 calc(var(--u)*7);
  font-size: max(9.5px, calc(var(--u)*10));
}

/* ---- telefon: tur sonu — küçük bant, dar yan paneller, küçük ödül kartları (kazananın dansı görünür) ---- */
.hud--compact .hud-re__banner {
  min-width: calc(var(--u)*240);
  padding: calc(var(--u)*4) calc(var(--u)*30) calc(var(--u)*6);
}
.hud--compact .hud-re__title {
  font-size: calc(var(--u)*25);
}
.hud--compact .hud-re__sub {
  margin-top: calc(var(--u)*2);
  font-size: max(10px, calc(var(--u)*11));
}
.hud--compact .hud-re__series,
.hud--compact .hud-re__scores,
.hud--compact .hud-re__mid {
  top: calc(var(--pt) + calc(var(--u)*66));
}
.hud--compact .hud-re__series,
.hud--compact .hud-re__scores {
  padding: calc(var(--u)*5) calc(var(--u)*7) calc(var(--u)*6);
  background: rgba(9, 12, 20, .82);
}
.hud--compact .hud-re__series {
  width: calc(var(--u)*196);
}
.hud--compact .hud-re__series.is-points {
  width: calc(var(--u)*210);
}
.hud--compact .hud-re__scores {
  width: calc(var(--u)*208);
}
/* dar ekranda MVP rozeti yazı yerine küçük yıldız: 1.'nin adı "B…" diye kırpılmasın (en önemli satır okunur kalsın) */
.hud-re__trow.is-mvp .hud-re__pname em {
  flex: none;
}
.hud--compact .hud-re__trow.is-mvp .hud-re__pname em {
  padding: 0;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  background: none;
}
.hud--compact .hud-re__trow.is-mvp .hud-re__pname em::before {
  content: '\2605';
  font: 800 max(10px, calc(var(--u)*11))/1 var(--fd);
  color: var(--ac);
}
.hud--compact .hud-re__prow,
.hud--compact .hud-re__trow {
  height: calc(var(--u)*16);
  font-size: max(10px, calc(var(--u)*11));
}
.hud--compact .hud-re__prow {
  grid-template-columns: calc(var(--u)*12) minmax(0, 1fr) calc(var(--u)*30) calc(var(--u)*18) calc(var(--u)*22);
}
.hud--compact .hud-re__mid {
  width: max(140px, calc(100% - 2 * (var(--pl) + calc(var(--u)*218))));
}
.hud--compact .hud-award {
  /* 128u'da "TEK AYAK ÜSTÜNDE" / "Bot Hayri 6 dalga" kırpılıyordu; 4 kart + aralıklar 667 px'e rahat sığar */
  width: min(calc(var(--u)*168), calc((100vw - var(--pl) - var(--pr) - var(--u)*40) / 4));
}
.hud--compact .hud-award__in {
  gap: calc(var(--u)*6);
  padding: calc(var(--u)*4) calc(var(--u)*7) calc(var(--u)*4) calc(var(--u)*4);
}
.hud--compact .hud-award__icon {
  width: calc(var(--u)*28);
  height: calc(var(--u)*28);
}
.hud--compact .hud-award__icon span {
  font-size: calc(var(--u)*15);
}
.hud--compact .hud-award__name {
  font-size: calc(var(--u)*11.5);
}
.hud--compact .hud-award__who {
  font-size: max(9.5px, calc(var(--u)*10));
}
.hud--compact .hud-award__desc {
  display: none;
}

/* ---- telefon: Kaos Kartı makarası biraz küçük; arka plan adayı hafifçe gösterir ---- */
.hud--compact .hud-spin__bg {
  background:
    linear-gradient(180deg, transparent 38%, rgba(255, 255, 255, .03) 52%, transparent 66%),
    radial-gradient(ellipse 85% 70% at 50% 54%, rgba(22, 28, 44, .5), rgba(4, 6, 10, .86) 72%);
}
.hud--compact .hud-spin__title {
  font-size: calc(var(--u)*32);
}
.hud--compact .hud-spin__tico {
  font-size: calc(var(--u)*24);
}
.hud--compact .hud-spin__sub {
  font-size: max(10.5px, calc(var(--u)*11.5));
}
.hud--compact .hud-card {
  width: calc(var(--u)*86);
  height: calc(var(--u)*114);
  gap: calc(var(--u)*3);
  padding-top: calc(var(--u)*5);
}
.hud--compact .hud-card__art {
  width: calc(var(--u)*76);
  height: calc(var(--u)*76);
}
.hud--compact .hud-spin__marker b {
  left: calc(var(--u)*-50);
  width: calc(var(--u)*100);
  height: calc(var(--u)*126);
  top: calc(var(--u)*8);
}
.hud--compact .hud-card.is-big {
  width: calc(var(--u)*128);
  height: calc(var(--u)*166);
  gap: calc(var(--u)*6);
  padding-top: calc(var(--u)*6);
}
.hud--compact .hud-card.is-big .hud-card__art {
  width: calc(var(--u)*108);
  height: calc(var(--u)*108);
}
.hud--compact .hud-card.is-big .hud-card__name {
  font-size: calc(var(--u)*17);
}
.hud--compact .hud-spin__desc {
  padding: calc(var(--u)*5) calc(var(--u)*11);
  font-size: max(11px, calc(var(--u)*12.5));
}

/* ---- telefon: koç ipuçları küçük ---- */
.hud--compact .hud-coach__bubble {
  bottom: calc(var(--r) + calc(var(--u)*8));
  gap: calc(var(--u)*2);
  max-width: min(40vw, calc(var(--u)*230));
  padding: calc(var(--u)*4) calc(var(--u)*9) calc(var(--u)*5);
  background: rgba(8, 11, 19, .86);
}
.hud--compact .hud-coach__row {
  font-size: max(11px, calc(var(--u)*12));
}
.hud--compact .hud-coach__bubble small {
  font-size: max(9.5px, calc(var(--u)*10));
}
.hud--compact .hud-coach__ring {
  border-width: 1px;
  opacity: .8;
}
.hud--compact .hud-coach__finger {
  left: calc(var(--u)*-7);
  top: calc(var(--u)*-7);
  width: calc(var(--u)*14);
  height: calc(var(--u)*14);
}
.hud--compact.hud--touch .hud-coach__item.is-aim .hud-coach__bubble {
  bottom: calc(var(--r) + calc(var(--u)*60));
}

/* =========================== BOYUT UYARLAMALARI =========================== */
.hud--short .hud-wheel__chats {
  grid-template-columns: 1fr 1fr 1fr;
}
.hud--short .hud-wheel__side {
  width: calc(var(--u)*300);
}
.hud--short .hud-wheel__ring {
  left: max(calc(var(--pl) + calc(var(--u)*150)), calc(100% - var(--pr) - calc(var(--u)*470)));
}
.hud--short .hud-award__desc {
  display: none;
}
.hud--narrow .hud-lead em {
  max-width: calc(var(--u)*52);
}
.hud--narrow .hud-lead.is-sub,
.hud--narrow .hud-lead.is-me em {
  display: none;
}
.hud--portrait .hud-top {
  top: calc(var(--pt) + calc(var(--u)*60));
  max-width: 94%;
}

/* =========================== ANİMASYONLAR (zıplama / sallanma yok) =========================== */
@keyframes hud-storm-edge {
  0%,
  100% {
    opacity: .75;
  }
  50% {
    opacity: 1;
  }
}
@keyframes hud-rot {
  to {
    transform: rotate(360deg);
  }
}
@keyframes hud-blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: .35;
  }
}
@keyframes hud-pulse-o {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: .55;
  }
}
@keyframes hud-glow {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes hud-lowhp {
  0%,
  100% {
    opacity: .3;
  }
  50% {
    opacity: .85;
  }
}
@keyframes hud-ring {
  0% {
    transform: scale(.94);
    opacity: .9;
  }
  100% {
    transform: scale(1.22);
    opacity: 0;
  }
}
@keyframes hud-deny {
  0%,
  100% {
    filter: none;
    opacity: 1;
  }
  35% {
    filter: drop-shadow(0 0 6px rgba(255, 77, 94, .95));
    opacity: .55;
  }
}
@keyframes hud-dot-in {
  from {
    opacity: 0;
    transform: skewX(var(--sk)) scaleY(.2);
  }
  to {
    opacity: 1;
    transform: skewX(var(--sk)) scaleY(1);
  }
}
@keyframes hud-pop-in {
  from {
    scale: .9;
    opacity: 0;
  }
  to {
    scale: 1;
    opacity: 1;
  }
}
@keyframes hud-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hud-slide-in {
  from {
    translate: calc(var(--u)*14) 0;
    opacity: 0;
  }
  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes hud-dash-out {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 100;
  }
}
@keyframes hud-coach-ring {
  0%,
  100% {
    opacity: .3;
  }
  50% {
    opacity: .9;
  }
}
@keyframes hud-coach-drag {
  0%,
  12% {
    transform: translate(0, 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  48% {
    transform: translate(calc(var(--r) * .62), calc(var(--r) * -.38));
  }
  76% {
    transform: translate(calc(var(--r) * -.5), calc(var(--r) * .22));
    opacity: 1;
  }
  92%,
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes hud-coach-aim {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    transform: translate(calc(var(--r) * -.6), calc(var(--r) * -.45));
  }
  85% {
    transform: translate(calc(var(--r) * .35), calc(var(--r) * -.55));
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes hud-coach-release {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  55% {
    transform: translate(calc(var(--r) * -.62), calc(var(--r) * -.4));
    opacity: 1;
  }
  70% {
    transform: translate(calc(var(--r) * -.62), calc(var(--r) * -.4));
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes hud-coach-tap {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  45% {
    transform: scale(.78);
    opacity: .7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud-abtn__ring,
  .hud-stormedge.is-on,
  .hud-slot.r-chaos .hud-slot__bg::before,
  .hud-coach__ring,
  .hud-coach__finger,
  .hud-off__a.is-danger::before,
  .hud-rbtn--emote.is-pulse::after,
  .hud-score__timer.is-low b,
  .hud-stormchip.is-shrink .hud-stormchip__sh,
  .hud-stormchip.is-out .hud-score__ico,
  .hud-knock__txt b {
    animation: none;
  }
}
/* fix-v9: bahis şeridinde emoji yerine portre / baş harf rozeti */
.hud-bet__av {
  width: calc(var(--u)*17);
  height: calc(var(--u)*17);
  box-shadow: 0 0 0 calc(var(--u)*1.5) var(--bc, #ffcf33);
}
.hud-bet__av b { font-size: calc(var(--u)*10); color: var(--bc, #ffcf33); }
/* fix-v9: hedef satırında renk karesi (Boya Savaşı: SENİN RENGİN) gerçek oyuncu renginde */
.hud-cd__sw { display: inline-block; width: .82em; height: .82em; margin: 0 .12em -.06em 0; border-radius: 2px; background: var(--sw, #fff); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55), 0 0 0 2.5px rgba(255, 255, 255, .55); }