/* Tank Kapışması HUD stilleri (shared/tank/README.md §14, DESIGN §16.1 ekran bütçesi). public/index.html bu dosyayı hud.css'ten
   sonra bağlar. Her seçici .tk- önekli ya da tank'a özel kök altında (body[data-game="tank"] / .hud--tank) — diğer oyunlara
   sızmaz. Değişkenler ortak HUD kökünden (.hud: --u, --pt, --pr, --pb, --pl, --hud-top-b, --fd, --fb, --t0…).
   Yerleşim (667×375): üst çubuk yuvasında can pipleri · AYAKTA · ANİ ÖLÜM · buff ikonları (≤ 20 px); sağ sütunda (kamera sağ
   %13'ü arenasız bırakır) dikeyde ~%47'de MAYIN (58u, ≥ 48 px) + üstünde mayın pipleri ve mod çipi (≤ 30 px). Merkez
   %64 × %60 kalıcı öğeden boş. */

.tk-hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--fd); color: var(--t0); }
.tk-hud * { box-sizing: border-box; }

/* ---- üst çubuk yuvası (içerik ≤ 20 px) ---- */
.tk-bar { display: flex; align-items: center; gap: calc(var(--u)*8); height: min(20px, 100%); max-height: 20px; white-space: nowrap;
  line-height: 1; font-variant-numeric: tabular-nums; }
.tk-bar:not(.is-slotted) { position: absolute; left: 50%; top: calc(var(--pt) + var(--u)*2); transform: translateX(-50%); height: 20px;
  padding: 0 calc(var(--u)*9); border-radius: 99px; background: rgba(9, 12, 20, .55); border: 1px solid rgba(255, 255, 255, .1); }
.tk-seg { display: none; align-items: center; gap: calc(var(--u)*3); min-width: 0; }
.tk-seg.is-on { display: flex; }
.tk-seg small { font-weight: 700; font-size: max(8.5px, calc(var(--u)*9.5)); letter-spacing: .12em; color: var(--t1); }
.tk-seg b { display: inline-block; font-style: italic; font-weight: 800; font-size: min(16px, max(13px, calc(var(--u)*15))); color: var(--ac); }
.tk-seg em { font-style: italic; font-weight: 700; font-size: max(10px, calc(var(--u)*11)); color: var(--t1); }
.tk-seg .ic { flex: none; width: min(14px, max(12px, calc(var(--u)*13))); height: min(14px, max(12px, calc(var(--u)*13))); }
.tk-seg.is-flash > b { animation: tk-flash .5s var(--e-out); }
@keyframes tk-flash { 0% { color: var(--bad); transform: translateY(2px); } 100% { transform: none; } }
/* can pipleri: 2 zırh plakası (slot renginde; hasarlıda biri gri) */
.tk-hp { gap: calc(var(--u)*2.5); }
.tk-pip { display: block; width: min(13px, max(10px, calc(var(--u)*12))); height: min(15px, max(12px, calc(var(--u)*14)));
  background: var(--c, var(--ac)); clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); transition: background-color .2s ease, transform .2s ease; }
.tk-pip.is-off { background: rgba(120, 128, 146, .55); transform: scale(.86); }
.tk-hp.is-hit .tk-pip { animation: tk-pip .45s var(--e-out); }
@keyframes tk-pip { 0% { transform: scale(1.35); filter: brightness(2); } 100% { transform: none; } }
/* takım canlı sayıları */
.tk-teams b.tk-tr { color: var(--red, #ff5a4f); }
.tk-teams b.tk-tb { color: var(--blue, #3fa0ff); }
.tk-teams small { letter-spacing: 0; }
/* ani ölüm çipi */
.tk-sd { padding: 0 calc(var(--u)*6); height: min(18px, 100%); border-radius: 99px; background: rgba(208, 44, 70, .92); }
.tk-sd small, .tk-sd .ic { color: #fff; }
.tk-sd b { color: #fff; font-size: min(14px, max(12px, calc(var(--u)*13))); }
.tk-sd b:empty { display: none; }
.tk-sd.is-warn { background: rgba(255, 159, 28, .95); animation: tk-sdw .6s ease-in-out infinite alternate; }
.tk-sd.is-warn small, .tk-sd.is-warn b, .tk-sd.is-warn .ic { color: #1d1626; }
@keyframes tk-sdw { from { box-shadow: 0 0 0 0 rgba(255, 159, 28, .6); } to { box-shadow: 0 0 0 calc(var(--u)*3) rgba(255, 159, 28, 0); } }
/* buff ikonları (≤ 18 px, en fazla 3, süre halkalı) */
.tk-buffs { gap: calc(var(--u)*4); }
.tk-buff { position: relative; display: flex; align-items: center; justify-content: center; width: min(18px, max(15px, calc(var(--u)*17)));
  height: min(18px, max(15px, calc(var(--u)*17))); border-radius: 50%; background: rgba(9, 12, 20, .8); color: var(--c, #fff); }
.tk-buff .ic { width: 62%; height: 62%; }
.tk-buff svg.tk-ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); }
.tk-ring circle { fill: none; stroke: var(--c, #fff); stroke-width: 3.5; stroke-dasharray: 100; stroke-dashoffset: 0; stroke-linecap: round; }
.tk-buff.is-low { animation: tk-blink .5s steps(2) infinite; }
@keyframes tk-blink { 50% { opacity: .45; } }
/* izleyici rozeti */
.tk-me small { color: var(--cy); }
.tk-me .ic { color: var(--cy); }

/* ---- çubuğun hemen altı: TEK kısa bildirim yuvası (≤ 1.5 sn) ---- */
.tk-msgs { position: absolute; left: 50%; top: calc(var(--hud-top-b) + var(--u)*4); transform: translateX(-50%); display: flex;
  justify-content: center; max-width: 64%; white-space: nowrap; line-height: 1; }
.tk-msg { display: none; align-items: center; gap: calc(var(--u)*6); height: min(24px, max(20px, calc(var(--u)*22))); padding: 0 calc(var(--u)*11);
  border-radius: 99px; background: rgba(9, 12, 20, .78); border: 1.5px solid var(--c, var(--ac)); box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.tk-msg.is-on { display: flex; animation: tk-in .2s var(--e-out); }
@keyframes tk-in { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: none; } }
.tk-msg b { font-style: italic; font-weight: 800; font-size: max(12px, calc(var(--u)*13)); letter-spacing: .06em; text-transform: uppercase; color: var(--c, var(--ac)); }
.tk-msg .ic { width: min(15px, max(12px, calc(var(--u)*14))); height: min(15px, max(12px, calc(var(--u)*14))); color: var(--c, var(--ac)); }
.tk-msg .ic:not([href]):empty { display: none; }

/* ---- ölünce alt şerit ("VURULDUN · Ali · 4.") ---- */
.tk-dead { position: absolute; left: 50%; bottom: calc(var(--pb) + var(--u)*6); transform: translateX(-50%); display: none; align-items: center;
  gap: calc(var(--u)*7); height: min(30px, max(24px, calc(var(--u)*28))); padding: 0 calc(var(--u)*14) 0 calc(var(--u)*6); border-radius: 99px;
  background: rgba(208, 44, 70, .94); color: #fff; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.tk-dead.is-on { display: flex; animation: tk-up .25s var(--e-out); }
.tk-dead.is-win { background: rgba(236, 171, 20, .96); color: #1d1626; }
@keyframes tk-up { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tk-dead b { font-style: italic; font-weight: 800; font-size: max(14px, calc(var(--u)*17)); letter-spacing: .03em; text-transform: uppercase; }
.tk-dead small { font-weight: 700; font-size: max(11px, calc(var(--u)*12)); letter-spacing: .04em; opacity: .92; }
.tk-dead__p { display: inline-flex; align-items: center; justify-content: center; min-width: max(20px, calc(var(--u)*22)); height: max(20px, calc(var(--u)*22));
  padding: 0 3px; border-radius: 99px; background: #fff; color: #1d2140; font-style: italic; font-weight: 800; font-size: max(12px, calc(var(--u)*13)); }
.tk-dead__p:empty { display: none; }

/* ---- sağ sütun: MAYIN + mayın pipleri + mod çipi ---- */
.tk-ctl { position: absolute; right: var(--pr); top: 0; bottom: 0; width: 0; transition: opacity .25s ease; }
.tk-ctl.is-off { opacity: 0; visibility: hidden; }
.tk-ctl.is-off .tk-btn { pointer-events: none; }
.tk-btn { position: absolute; right: calc(var(--u)*2); top: calc(47% - max(48px, calc(var(--u)*58)) / 2); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; width: max(48px, calc(var(--u)*58)); height: max(48px, calc(var(--u)*58));
  padding: 0; border-radius: 50%; border: 1.5px solid rgba(255, 207, 51, .6); color: var(--ac); pointer-events: auto; touch-action: none; cursor: pointer;
  background: radial-gradient(circle at 50% 30%, rgba(255, 207, 51, .26), rgba(40, 32, 8, .55) 74%); box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
  font-family: var(--fd); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .06s ease, border-color .12s ease, opacity .2s ease; }
.tk-btn .ic { width: 44%; height: 44%; }
.tk-btn small { font-weight: 800; font-size: max(9px, calc(var(--u)*10.5)); letter-spacing: .1em; line-height: 1; color: #fff; }
.tk-btn.is-down { transform: scale(.92); border-color: #fff; }
.tk-btn.is-cd { border-color: rgba(255, 255, 255, .2); }
.tk-btn.is-cd .ic, .tk-btn.is-cd small { opacity: .5; }
.tk-btn.is-empty { border-color: rgba(255, 255, 255, .14); background: radial-gradient(circle at 50% 30%, rgba(120, 128, 146, .2), rgba(10, 13, 22, .5) 74%); }
.tk-btn.is-empty .ic, .tk-btn.is-empty small { opacity: .45; }
.tk-btn.is-deny { animation: tk-deny .3s ease; }
@keyframes tk-deny { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.tk-btn.is-ready { animation: tk-ready .35s var(--e-out); }
@keyframes tk-ready { 0% { box-shadow: 0 3px 10px rgba(0, 0, 0, .2), 0 0 0 calc(var(--u)*6) rgba(255, 207, 51, .45); } 100% { box-shadow: 0 3px 10px rgba(0, 0, 0, .2), 0 0 0 0 rgba(255, 207, 51, 0); } }
.tk-btn .tk-ring { position: absolute; inset: -1.5px; width: calc(100% + 3px); height: calc(100% + 3px); transform: rotate(-90deg); pointer-events: none; }
.tk-btn .tk-ring circle { stroke: var(--ac); stroke-width: 3; stroke-dashoffset: 100; opacity: 0; }
.tk-kbd { position: absolute; bottom: calc(var(--u)*-9); left: 50%; transform: translateX(-50%); display: none; padding: 1px calc(var(--u)*5);
  border-radius: 4px; background: rgba(9, 12, 20, .85); border: 1px solid var(--st2); font: 700 max(9px, calc(var(--u)*9))/1.3 var(--fb);
  color: var(--t1); white-space: nowrap; }
.hud--desktop .tk-kbd { display: block; }
/* mayın pipleri (butonun hemen üstünde) */
.tk-mines { position: absolute; right: calc(var(--u)*2); width: max(48px, calc(var(--u)*58)); top: calc(47% - max(48px, calc(var(--u)*58)) / 2 - var(--u)*12);
  display: flex; justify-content: center; gap: calc(var(--u)*3); }
.tk-mines i { display: block; width: min(8px, calc(var(--u)*8)); height: min(8px, calc(var(--u)*8)); border-radius: 50%; background: var(--ac);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.tk-mines i.is-off { background: rgba(120, 128, 146, .5); }
/* ---- silah yuvası (README-v2 §7.8): MAYIN'ın hemen üstü, 56×38 (≥ 48×34); ikon 22 px + şarj pipleri + 9 px kısa ad.
   Füze canlıyken ≥ 44×44 PATLAT düğmesi (yukarı doğru büyür, MAYIN'ı örtmez); EMP'de soluk + camgöbeği çıtırtı + KİLİTLİ. */
.tk-slot { --slot-w: max(48px, calc(var(--u)*56)); --slot-h: max(34px, calc(var(--u)*38));
  position: absolute; right: calc(var(--u)*2 + (max(48px, calc(var(--u)*58)) - var(--slot-w)) / 2);
  top: calc(47% - max(48px, calc(var(--u)*58)) / 2 - var(--u)*15 - var(--slot-h)); display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 0; width: var(--slot-w); height: var(--slot-h); padding: 0; border-radius: calc(var(--u)*11);
  border: 1.5px solid var(--c, var(--ac)); background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--c, #ffcf33) 22%, transparent), rgba(9, 12, 20, .84) 72%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28); color: var(--c, var(--ac)); font-family: var(--fd); pointer-events: none; touch-action: none;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .06s ease, opacity .2s ease; }
.tk-slot.is-on { display: flex; }
.tk-slot.is-pop { animation: tk-slotpop .18s var(--e-out); }
@keyframes tk-slotpop { 0% { transform: scale(1.25); } 100% { transform: none; } }
.tk-slot__ic { display: flex; line-height: 0; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .45)); }
.tk-slot__ic .ic { width: min(22px, max(18px, calc(var(--u)*22))); height: min(22px, max(18px, calc(var(--u)*22))); }
.tk-slot__pips { display: flex; gap: calc(var(--u)*2.5); margin-top: 1px; }
.tk-slot__pips i { display: block; width: min(6px, calc(var(--u)*6)); height: min(6px, calc(var(--u)*6)); border-radius: 50%; background: var(--c, var(--ac));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
.tk-slot__pips i.is-off { background: rgba(120, 128, 146, .45); }
.tk-slot__x { font-style: italic; font-weight: 800; font-size: max(10px, calc(var(--u)*11)); line-height: 1; color: #fff; }
.tk-slot__x:empty { display: none; }
.tk-slot__l { font-weight: 800; font-size: max(9px, calc(var(--u)*9)); letter-spacing: .08em; line-height: 1; color: #fff; opacity: .92; }
.tk-slot__l:empty { display: none; }
.tk-slot__det, .tk-slot__lock { display: none; font-style: normal; font-weight: 900; line-height: 1; letter-spacing: .06em; }
.tk-slot .tk-ring { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); transform: rotate(-90deg); pointer-events: none; }
.tk-slot .tk-ring circle { stroke: #fff; stroke-width: 3; stroke-dashoffset: 100; opacity: 0; transition: opacity .15s ease; }
/* PATLAT: füze renginde dolgu, ≥ 44×44, dokunulabilir */
.tk-slot.is-det { --slot-w: max(50px, calc(var(--u)*56)); --slot-h: max(50px, calc(var(--u)*56)); border-radius: 50%; pointer-events: auto; cursor: pointer;
  border: 2px solid #fff; color: #06261e; background: radial-gradient(circle at 50% 30%, #8ffbe0, var(--c, #2de0b5) 62%, #13987a);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .35), 0 0 0 0 rgba(45, 224, 181, .5); animation: tk-detin .22s var(--e-out); }
.tk-slot.is-det .tk-slot__ic .ic { width: min(17px, max(14px, calc(var(--u)*17))); height: min(17px, max(14px, calc(var(--u)*17))); }
.tk-slot.is-det .tk-slot__pips, .tk-slot.is-det .tk-slot__x { display: none; }
.tk-slot.is-det .tk-slot__det { display: block; font-size: max(10px, calc(var(--u)*10.5)); color: #06261e; }
.tk-slot.is-det .tk-slot__l { color: #06261e; font-size: max(8.5px, calc(var(--u)*8.5)); letter-spacing: -.01em; order: 3; margin-top: 1px; transform: scaleX(.88); }
.tk-slot.is-det .tk-slot__det { order: 2; }
.tk-slot.is-det .tk-slot__ic { order: 1; }
.tk-slot.is-det.is-steer { animation: tk-detin .22s var(--e-out), tk-detpulse 1s ease-in-out infinite; }
.tk-slot.is-det.is-down, .tk-slot.is-det.is-pressed { transform: scale(.9); filter: brightness(.85); }
@keyframes tk-detin { from { transform: scale(.6); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes tk-detpulse { 50% { box-shadow: 0 3px 12px rgba(0, 0, 0, .35), 0 0 0 calc(var(--u)*5) rgba(45, 224, 181, .0); } 0%, 100% { box-shadow: 0 3px 12px rgba(0, 0, 0, .35), 0 0 0 0 rgba(45, 224, 181, .55); } }
/* EMP kilidi: yuva + MAYIN soluk, camgöbeği çıtırtı kaplaması */
.tk-slot.is-emp, .tk-btn.is-emp { border-color: #4fe8ff; }
.tk-slot.is-emp .tk-slot__ic, .tk-slot.is-emp .tk-slot__pips, .tk-slot.is-emp .tk-slot__x, .tk-btn.is-emp .ic, .tk-btn.is-emp small { opacity: .35; }
.tk-slot.is-emp:not(.is-det) .tk-slot__l { display: none; }
.tk-slot.is-emp .tk-slot__lock { display: block; position: absolute; left: 0; right: 0; bottom: calc(var(--u)*3); text-align: center;
  font-size: max(9px, calc(var(--u)*9)); color: #bff8ff; text-shadow: 0 0 4px rgba(79, 232, 255, .9); }
.tk-slot.is-emp .tk-ring circle { stroke: #4fe8ff; }
.tk-slot.is-emp::after, .tk-btn.is-emp::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(79, 232, 255, 0) 0 5px, rgba(79, 232, 255, .55) 5px 6px, rgba(79, 232, 255, 0) 6px 11px);
  mix-blend-mode: screen; animation: tk-zap .18s steps(2) infinite; }
@keyframes tk-zap { 0% { opacity: .9; background-position: 0 0; } 100% { opacity: .35; background-position: 7px 3px; } }
.tk-ctl.is-off .tk-slot { pointer-events: none; }
.tk-kbd--slot { bottom: calc(var(--u)*-11); }
.hud--desktop .tk-kbd--slot { display: none; }
.hud--desktop .tk-slot.is-det .tk-kbd--slot { display: block; }
.hud--desktop .tk-ctl.is-det .tk-btn--mine .tk-kbd { display: none; }
/* koç balonu (geçici, TEK balon; sıra hud.js'te): sağ altta — merkez %64×%60 bölgesinin (y > %80) ve sağ sütun düğmelerinin
   DIŞINDA; en çok 2 satır. Ucundaki küçük ok: nişan ipucunda aşağı (sağ başparmak), mayın/silah ipucunda yukarı (sağ sütun). */
.tk-coach { position: absolute; display: none; max-width: min(212px, 33vw); padding: calc(var(--u)*4) calc(var(--u)*9); border-radius: calc(var(--u)*8);
  background: rgba(255, 207, 51, .96); color: #1d2140; font-weight: 800; font-size: max(10.5px, calc(var(--u)*11)); line-height: 1.15; text-align: right;
  white-space: normal; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.tk-coach.is-on { display: block; animation: tk-in .22s var(--e-out); }
.tk-coach::after { content: ''; position: absolute; right: calc(var(--u)*22); bottom: calc(var(--u)*-5); width: calc(var(--u)*10); height: calc(var(--u)*10);
  background: inherit; transform: rotate(45deg); border-radius: 2px; }
.tk-coach.is-up::after { bottom: auto; top: calc(var(--u)*-5); }
.tk-coach--mine { display: none !important; }
.tk-coach--aim { right: var(--pr); bottom: calc(var(--pb) + var(--u)*6); }

/* ---- ortak HUD'un 'tank' düzeni (kök .hud--tank) ---- */
/* Hayalet Bahsi şeridi: SOL ALT (ölünce joystick bölgesi boş); seçenek satırı ≤ 44 px */
body[data-game="tank"] .hud--tank .hud-bet, .hud--tank.tk-dev .hud-bet { left: var(--pl); bottom: var(--pb); transform: none; align-items: flex-start; max-width: 46%; }
body[data-game="tank"] .hud--tank .hud-bet__row, .hud--tank.tk-dev .hud-bet__row { justify-content: flex-start; }
body[data-game="tank"] .hud--tank .hud-bet__c, .hud--tank.tk-dev .hud-bet__c { height: 44px; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .tk-sd.is-warn, .tk-buff.is-low, .tk-btn.is-ready, .tk-hp.is-hit .tk-pip, .tk-slot.is-pop, .tk-slot.is-det.is-steer { animation: none; }
  .tk-slot.is-emp::after, .tk-btn.is-emp::after { animation: none; }
}