/* ==========================================================================
   Клатч — страница игры в дизайне сайта

   Панель слева — общие классы минёра (miner.css): тот же колодец ставки,
   чипы, лаймовая кнопка, цифры партии. Своё здесь — карточки стволов
   (AWP / AK-47 / Desert Eagle), выбор «1 vs N», пара кнопок «Пикнуть /
   Сейв» и экран игры.

   Экран игры — HUD в духе CS2. Всё внутри экрана меряется в --u: доля
   ширины кадра (1280 единиц на компьютере, 900 на телефоне), поэтому HUD
   масштабируется вместе с картинкой, как в самой игре при любом
   разрешении. Шрифт HUD — Saira Condensed: узкий гротеск, из свободных
   ближе всего к шрифту игры.
   ========================================================================== */
.cl-page {
  --ct: #9cc0ff; --t: #f2c65c; --green: #8fe36b; --red: #ff4e45; --white: #f4f6fa;
  --f-hud: 'Saira Condensed', 'Arial Narrow', sans-serif;
  max-width: 1480px;
}
.cl-body .kz-gbar { max-width: 1480px; }
.cl-stage { grid-template-columns: 340px minmax(0, 1fr); }
.cl-main { gap: 12px; }

/* ═══════════════ СТВОЛЫ ═══════════════
   Три карточки в ряд, от надёжного к рискованному (AWP, AK-47, Desert
   Eagle) — картинка скина Steam и название; выбранная — в лаймовой
   рамке, как чипы минёра. */
.cl-guns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cl-gun {
  position: relative; display: grid; gap: 3px; justify-items: center; min-width: 0;
  padding: 8px 6px 8px; border-radius: 12px;
  border: 1px solid var(--mn-line); background: var(--mn-glass); box-shadow: var(--mn-hl);
  font-family: var(--f-cond), sans-serif; color: var(--text-dim); text-align: center;
  transition: border-color .14s, color .14s, background-color .14s, transform .12s;
}
.cl-gun:hover:not([disabled]) { color: var(--text); border-color: var(--mn-line2); }
.cl-gun:active:not([disabled]) { transform: scale(.97); }
.cl-gun.is-on {
  border-color: var(--mn-lime); color: var(--text);
  background: linear-gradient(180deg, rgba(215, 255, 0, .10), rgba(215, 255, 0, .03)), var(--mn-deep);
}
.cl-gun[disabled] { opacity: .45; cursor: not-allowed; }
/* лента в правом верхнем углу карточки: «от ×1.50» — с какого икса ствол */
.cl-gun { overflow: hidden; }
.cl-gun__rib {
  position: absolute; top: 10px; right: -27px; z-index: 1; width: 96px; padding: 2px 0;
  transform: rotate(45deg); pointer-events: none;
  font-family: var(--f-cond), sans-serif; font-size: 11px; font-weight: 700; line-height: 1.25; letter-spacing: .03em;
  color: #15161c; text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, #e3ff4d, var(--mn-lime, #d7ff00));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.cl-gun.is-on[disabled] { opacity: .75; }
.cl-gun__img { position: relative; display: block; width: 100%; height: 56px; }
.cl-gun__img::before { content: ''; position: absolute; inset: 14% 18%; background: radial-gradient(closest-side, var(--rc, #eb4b4b), transparent); opacity: .35; filter: blur(6px); }
/* картинка Steam 256×192 целиком вписывается в рамку (height:100% в grid
   не срабатывает — картинка была бы выше рамки и обрезалась) */
.cl-gun__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.cl-gun__n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 600; letter-spacing: .02em; line-height: 1.1; white-space: nowrap; }

/* ═══════════════ 1 VS N ═══════════════ */
.cl-vs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cl-vs .mn-mine { display: grid; place-items: center; align-content: center; gap: 3px; height: 54px; padding: 4px 0; line-height: 1; }
.cl-vs .mn-mine b { font-weight: 600; font-size: 17px; white-space: nowrap; letter-spacing: .02em; }
.cl-vs .mn-mine small.x { font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--mn-lime); opacity: .7; font-variant-numeric: tabular-nums; }
.cl-vs .mn-mine.is-on small.x { opacity: 1; }

/* ═══════════════ ПИКНУТЬ / СЕЙВ ═══════════════
   «Пикнуть» — зелёная, как «+ Пополнить» в шапке сайта (владелец: «зеленым
   должна быть а не красным»), на ней только икс. «Сейв» — лаймовая,
   как «Забрать» у минёра: деньги — всегда лайм. */
.cl-play { display: grid; gap: 8px; margin-top: 10px; }
.cl-play[hidden] { display: none; }
.cl-peek, .gm-body .cl-save {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 58px; margin: 0; padding: 0 16px; border: 0; border-radius: 12px;
  font-family: var(--f-cond), sans-serif; font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  transition: transform .14s, filter .14s, opacity .14s;
}
.cl-peek {
  background: linear-gradient(180deg, #86F276 0%, #6DEA5D 52%, #5DD84E 100%); color: #163712;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -2px 0 rgba(10, 40, 8, .16), 0 14px 28px -16px rgba(109, 234, 93, .7);
}
.cl-peek:hover:not([disabled]), .gm-body .cl-save:hover:not([disabled]) { transform: translateY(-1px); filter: brightness(1.06); }
.cl-peek[disabled] { opacity: .55; cursor: progress; }
.cl-peek__s { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: none; font-variant-numeric: tabular-nums; }
.cl-play kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-cond), sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .06em;
  padding: 3px 6px; border-radius: 5px; background: rgba(0, 0, 0, .18); opacity: .8;
}
.cl-save .mn-take__prize { font-variant-numeric: tabular-nums; }
.gm-body .cl-page .cl-save.is-empty[disabled] {
  background: rgba(215, 255, 0, .10); color: rgba(215, 255, 0, .55);
  box-shadow: inset 0 0 0 1px rgba(215, 255, 0, .28); cursor: not-allowed;
}
#cl-mult { color: var(--mn-lime); }
.cl-page.is-hot #cl-chance { color: var(--boom); }

/* ═══════════════ ЛЕСТНИЦА ═══════════════ */
.cl-ladder { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.cl-step {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--mn-line); background: var(--mn-glass); box-shadow: var(--mn-hl);
  font-family: var(--f-cond), sans-serif; transition: border-color .2s, background-color .2s, opacity .2s;
}
/* ступени лестницы — контры, которых надо снять: синие, как КТ в HUD */
.cl-step__ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(156, 192, 255, .12); color: var(--ct); }
.cl-step__ico svg { width: 20px; height: 20px; }
.cl-step__t { display: grid; min-width: 0; line-height: 1.1; }
.cl-step__t i { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); white-space: nowrap; }
.cl-step__t b { font-size: 19px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cl-step.is-done { border-color: rgba(215, 255, 0, .35); }
.cl-step.is-done .cl-step__t b { color: var(--mn-lime); }
.cl-step.is-done .cl-step__ico { background: rgba(215, 255, 0, .12); color: var(--mn-lime); }
.cl-step.is-next { border-color: rgba(255, 90, 80, .6); background: linear-gradient(180deg, rgba(255, 90, 80, .14), rgba(255, 90, 80, .04)), var(--mn-deep); }
.cl-step.is-last .cl-step__t b { color: #ffd65c; }
.cl-step.is-lost { opacity: .4; }

/* ═══════════════ ЭКРАН ═══════════════ */
.cl-view {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 22px; background: #000; border: 1px solid var(--mn-line);
  box-shadow: 0 18px 50px rgba(6, 2, 20, .55), inset 0 0 0 1px rgba(255, 255, 255, .03);
  container-type: size; user-select: none; -webkit-user-select: none;
  isolation: isolate;
}
.cl-world, .cl-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cl-world { transition: filter .25s; }

/* модель оружия: скин из Steam, повёрнутый в перспективе (двигает main.js) */
.cl-vm { position: absolute; inset: 0; pointer-events: none; --u: calc(100cqw / 1280); overflow: hidden; }
.cl-vm__gun {
  position: absolute; right: calc(var(--u) * -30); bottom: calc(var(--u) * -40);
  width: calc(var(--u) * 640); transform-origin: 75% 85%; will-change: transform;
  filter: drop-shadow(0 calc(var(--u) * 18) calc(var(--u) * 22) rgba(0, 0, 0, .6)) brightness(.72) contrast(1.12) sepia(.22) saturate(1.1);
}
.cl-vm__gun img { display: block; width: 100%; height: auto; }
.cl-vm__muzzle { position: absolute; left: 2%; top: 38%; width: 2px; height: 2px; }

/* ---------- HUD ---------- */
.hud {
  position: absolute; inset: 0; pointer-events: none; --u: calc(100cqw / 1280);
  font-family: var(--f-hud); color: var(--white);
  text-shadow: 0 0 calc(var(--u) * 6) rgba(0, 0, 0, 0.55), 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 0, 0, 0.5);
}
.hud svg { display: block; }
/* радар — круглый, с тонким латунным ободом, как в CS2 */
.hud-radar {
  position: absolute; left: calc(var(--u) * 22); top: calc(var(--u) * 18);
  width: calc(var(--u) * 214); height: calc(var(--u) * 214);
  border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, rgba(34, 36, 42, 0.74), rgba(8, 9, 12, 0.8));
  box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(214, 190, 130, 0.55), 0 0 calc(var(--u) * 18) rgba(0, 0, 0, 0.5);
}
.hud-radar svg { width: 100%; height: 100%; }

/* верх: портреты команд, счёт, бомба вместо таймера. Как в CS2 — контры
   слева, террористы справа; ты — справа, у таймера (main.js hud.teams) */
.hud-top {
  position: absolute; left: 50%; top: calc(var(--u) * 12); transform: translateX(-50%);
  display: flex; align-items: flex-start; gap: calc(var(--u) * 5);
}
.hud-team { display: flex; gap: calc(var(--u) * 4); }
.hud-p {
  position: relative; width: calc(var(--u) * 50); height: calc(var(--u) * 50);
  border-radius: calc(var(--u) * 4); overflow: visible;
  display: grid; place-items: center; font-size: calc(var(--u) * 24); font-weight: 800;
}
.hud-p__f {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  display: grid; place-items: center;
}
.hud-team--ct .hud-p__f { background: linear-gradient(180deg, #3a5a8c, #18263f); box-shadow: inset 0 calc(var(--u) * -4) 0 var(--ct); }
.hud-team--t .hud-p__f { background: linear-gradient(180deg, #8c6a2a, #3e2c10); box-shadow: inset 0 calc(var(--u) * -4) 0 var(--t); }
.hud-p__f svg { width: 70%; height: 70%; opacity: 0.9; }
.hud-p.is-dead .hud-p__f { filter: grayscale(1) brightness(0.45); }
.hud-p.is-dead::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(0, 0, 0, 0.35);
}
.hud-p__x { position: absolute; inset: 18%; z-index: 2; color: #fff; opacity: 0; transform: scale(1.6); transition: opacity 0.18s, transform 0.25s; }
.hud-p__x svg { width: 100%; height: 100%; }
.hud-p.is-dead .hud-p__x { opacity: 0.9; transform: scale(1); }
.hud-p.is-me .hud-p__f { box-shadow: inset 0 calc(var(--u) * -4) 0 var(--t), 0 0 0 calc(var(--u) * 2) #fff; }
.hud-p.is-next .hud-p__f { box-shadow: inset 0 calc(var(--u) * -4) 0 var(--ct), 0 0 0 calc(var(--u) * 2) var(--red), 0 0 calc(var(--u) * 16) rgba(255, 78, 69, 0.7); }
.hud-p__m {
  position: absolute; top: calc(100% + var(--u) * 5); left: 50%; transform: translateX(-50%);
  font-size: calc(var(--u) * 17); font-weight: 700; white-space: nowrap; color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.55); border-radius: calc(var(--u) * 3); padding: 0 calc(var(--u) * 5);
}
.hud-p.is-next .hud-p__m { color: #fff; background: rgba(255, 78, 69, 0.85); }
.hud-p.is-dead .hud-p__m { color: var(--green); background: rgba(0, 0, 0, 0.55); }
.hud-mid {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: calc(var(--u) * 92); height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 10);
  background: rgba(0, 0, 0, 0.58); border-radius: calc(var(--u) * 4);
}
.hud-clock { height: calc(var(--u) * 28); display: grid; place-items: center; font-size: calc(var(--u) * 27); font-weight: 700; line-height: 1; }
.hud-clock svg { width: calc(var(--u) * 36); height: calc(var(--u) * 26); color: var(--red); filter: drop-shadow(0 0 calc(var(--u) * 8) rgba(255, 40, 30, 0.8)); }
.hud-clock.is-beep svg { color: #ff8a80; filter: drop-shadow(0 0 calc(var(--u) * 16) rgba(255, 60, 40, 1)); }
.hud-sc { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 17); font-weight: 700; line-height: 1.1; }
.hud-sc .ct { color: var(--ct); }
.hud-sc .t { color: var(--t); }
.hud-sc i { width: 1px; height: calc(var(--u) * 12); background: rgba(255, 255, 255, 0.35); }

/* лента убийств */
.hud-feed {
  position: absolute; right: calc(var(--u) * 22); top: calc(var(--u) * 18);
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 5);
}
.hud-feed li {
  display: flex; align-items: center; gap: calc(var(--u) * 9);
  padding: calc(var(--u) * 5) calc(var(--u) * 12); border-radius: calc(var(--u) * 4);
  background: rgba(0, 0, 0, 0.55); font-size: calc(var(--u) * 20); font-weight: 600; white-space: nowrap;
  animation: feedIn 0.22s cubic-bezier(.2, .9, .3, 1.2);
  transition: opacity 0.6s;
}
.hud-feed li.is-me { box-shadow: inset 0 0 0 calc(var(--u) * 2) #e5332c; background: rgba(40, 0, 0, 0.6); }
.hud-feed li.is-old { opacity: 0; }
.hud-feed .n-ct { color: var(--ct); }
.hud-feed .n-t { color: var(--t); }
.hud-feed svg { height: calc(var(--u) * 22); width: auto; color: #fff; }
.hud-feed .hs svg { height: calc(var(--u) * 20); }
@keyframes feedIn { from { transform: translateX(30%); opacity: 0; } to { transform: none; opacity: 1; } }

/* прицел — классический, зелёный */
.hud-cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --g: calc(var(--u) * 6); --l: calc(var(--u) * 12); --w: calc(var(--u) * 2.6); }
.hud-cross i { position: absolute; background: #52ff74; box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 0, 0, 0.7); }
.hud-cross i:nth-child(1) { width: var(--l); height: var(--w); right: var(--g); top: calc(var(--w) / -2); }
.hud-cross i:nth-child(2) { width: var(--l); height: var(--w); left: var(--g); top: calc(var(--w) / -2); }
.hud-cross i:nth-child(3) { width: var(--w); height: var(--l); bottom: var(--g); left: calc(var(--w) / -2); }
.hud-cross i:nth-child(4) { width: var(--w); height: var(--l); top: var(--g); left: calc(var(--w) / -2); }
.hud-cross.is-off { opacity: 0; }
.cl-page.is-awp .hud-cross { display: none; }   /* у AWP без зума прицела нет */

/* сообщения по центру сверху: «Бомба заложена» */
.hud-alert {
  position: absolute; left: 50%; top: calc(var(--u) * 128); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 8) calc(var(--u) * 90); white-space: nowrap;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.66) 18%, rgba(0, 0, 0, 0.66) 82%, rgba(0, 0, 0, 0));
  font-size: calc(var(--u) * 28); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.25s;
}
.hud-alert svg { height: calc(var(--u) * 28); width: auto; }
.hud-alert.is-on { opacity: 1; }
.hud-alert.is-red { color: #ff8a80; }
.hud-alert.is-ct { color: var(--ct); }
.hud-alert.is-t { color: var(--t); }

/* крупный текст: «1 VS 3», «КЛАТЧ» */
.hud-big {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(0.9);
  font-size: calc(var(--u) * 132); font-weight: 800; font-style: italic; letter-spacing: 0.02em; white-space: nowrap;
  opacity: 0; transition: opacity 0.25s, transform 0.4s cubic-bezier(.2, .9, .3, 1.3);
  text-shadow: 0 0 calc(var(--u) * 30) rgba(0, 0, 0, 0.7);
}
.hud-big.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hud-big small { display: block; text-align: center; font-size: 0.24em; font-style: normal; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.8); margin-top: -0.2em; }
.hud-big .ct { color: var(--ct); }
.hud-big .t { color: var(--t); }
.hud-big .g { color: var(--green); }

/* всплывающий икс после фрага */
.hud-pop {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, 0);
  text-align: center; opacity: 0; white-space: nowrap;
}
.hud-pop b { display: block; font-size: calc(var(--u) * 64); font-weight: 800; color: var(--green); line-height: 1; text-shadow: 0 0 calc(var(--u) * 24) rgba(110, 255, 120, 0.55), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, 0.8); }
.hud-pop span { font-size: calc(var(--u) * 24); font-weight: 700; color: #fff; }
.hud-pop.is-on { animation: pop 1.5s ease-out forwards; }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, 20%) scale(0.6); }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  22% { transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -30%) scale(1); }
}

/* разминирование — после твоей смерти контр садится на бомбу; полоса
   выше панели «Вас убил», чтобы не налезать на неё */
.hud-defuse {
  position: absolute; left: 50%; top: 47%; transform: translateX(-50%);
  width: calc(var(--u) * 460); opacity: 0; transition: opacity 0.2s;
}
.hud-defuse.is-on { opacity: 1; }
.hud-defuse__t { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 24); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ct); }
.hud-defuse__t svg { height: calc(var(--u) * 26); width: auto; }
.hud-defuse__bar { display: block; margin-top: calc(var(--u) * 8); height: calc(var(--u) * 12); background: rgba(0, 0, 0, 0.6); border-radius: calc(var(--u) * 2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); overflow: hidden; }
.hud-defuse__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4f86e0, #b9d4ff); box-shadow: 0 0 calc(var(--u) * 14) rgba(140, 190, 255, 0.8); }

/* низ слева: деньги и «награды» над ними — как в CS2 */
.hud-cash { position: absolute; left: calc(var(--u) * 22); bottom: calc(var(--u) * 16); display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 6); }
.hud-awards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.hud-awards li {
  font-family: var(--f-ui, Inter), sans-serif; font-size: calc(var(--u) * 15); font-weight: 500; white-space: nowrap;
  color: rgba(255, 255, 255, 0.92); animation: feedIn 0.25s ease-out; transition: opacity 0.6s;
}
.hud-awards li b { color: #8fe36b; font-weight: 700; }
.hud-awards li.is-old { opacity: 0; }
.hud-cash__m { display: flex; align-items: baseline; gap: calc(var(--u) * 10); }
.hud-cash__m b { font-size: calc(var(--u) * 34); font-weight: 700; color: #f2c14e; letter-spacing: 0.02em; }
.hud-cash__m span { font-size: calc(var(--u) * 24); font-weight: 700; opacity: 0; transition: opacity 0.3s; }
.hud-cash__m span.is-on { opacity: 1; }
.hud-cash__m span.is-neg { color: var(--red); }
.hud-cash__m span.is-pos { color: #8fe36b; }

/* низ по центру: набор сапёра, броня, здоровье — знак команды — патроны */
.hud-bot {
  position: absolute; left: 50%; bottom: calc(var(--u) * 14); transform: translateX(-50%);
  width: calc(var(--u) * 700); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(var(--u) * 34);
  padding-bottom: calc(var(--u) * 8);
}
.hud-bot::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.32) 22%, rgba(255, 255, 255, 0.32) 78%, rgba(255, 255, 255, 0));
}
.hud-bot__l { display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--u) * 22); }
.hud-ar, .hud-hp { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 8); }
.hud-ar > i svg, .hud-hp > i svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.hud-ar b { font-size: calc(var(--u) * 26); font-weight: 600; opacity: 0.85; }
.hud-hp b { font-size: calc(var(--u) * 40); font-weight: 700; line-height: 0.95; min-width: 1.5em; }
.hud-hp__bar { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * -8); height: calc(var(--u) * 3); background: rgba(255, 255, 255, 0.18); }
.hud-hp__bar i { display: block; height: 100%; width: 100%; background: #fff; transition: width 0.25s; }
.hud-hp.is-low b, .hud-hp.is-low > i { color: var(--red); }
.hud-hp.is-low .hud-hp__bar i { background: var(--red); }
.hud-hp.is-hit b { animation: hit 0.35s; }
@keyframes hit { 0% { color: var(--red); transform: scale(1.18); } 100% { transform: none; } }
/* заложенная бомба у здоровья (вместо набора сапёра — ты террорист):
   видна, пока бомба тикает, и мигает с её писком */
.hud-kit { opacity: 0; transition: opacity .25s; }
.hud-kit.is-on { opacity: .9; }
.hud-kit svg { width: calc(var(--u) * 30); height: calc(var(--u) * 26); color: var(--red); filter: drop-shadow(0 0 calc(var(--u) * 5) rgba(255, 40, 30, 0.55)); }
.hud-kit.is-beep svg { color: #ff8a80; filter: drop-shadow(0 0 calc(var(--u) * 10) rgba(255, 60, 40, 1)); }
.hud-emb {
  width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.35); color: #d9bf85; box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(214, 190, 130, 0.6);
}
.hud-emb svg { width: 58%; height: 58%; }
.hud-ammo { display: flex; align-items: baseline; gap: calc(var(--u) * 7); }
.hud-ammo b { font-size: calc(var(--u) * 40); font-weight: 700; line-height: 0.95; }
.hud-ammo span { font-size: calc(var(--u) * 24); opacity: 0.45; }
.hud-ammo em { font-style: normal; font-size: calc(var(--u) * 24); font-weight: 600; opacity: 0.8; }
.hud-ammo > i svg { height: calc(var(--u) * 20); width: auto; opacity: 0.8; }
.hud-ammo.is-low b { color: var(--red); }

/* справа: оружие столбиком, выбранное — жёлтым с названием */
.hud-slots {
  position: absolute; right: calc(var(--u) * 18); bottom: calc(var(--u) * 96);
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 12);
}
.hud-slots li { display: grid; grid-template-columns: auto auto; column-gap: calc(var(--u) * 8); align-items: center; justify-items: end; opacity: 0.7; }
.hud-slots li svg { height: calc(var(--u) * 20); width: auto; color: #fff; }
.hud-slots li b { font-size: calc(var(--u) * 13); font-weight: 600; opacity: 0.85; }
.hud-slots li em { grid-column: 1; font-style: normal; font-size: calc(var(--u) * 13); font-weight: 600; color: #f2c14e; letter-spacing: 0.04em; }
.hud-slots li.is-on { opacity: 1; }
.hud-slots li.is-on svg { height: calc(var(--u) * 28); color: #f2c14e; filter: drop-shadow(0 0 calc(var(--u) * 6) rgba(242, 193, 78, 0.45)); }

/* «Вас убил» — убийца всегда контр: синяя рамка и ник */
.hud-killer {
  position: absolute; left: 50%; bottom: calc(var(--u) * 150); transform: translate(-50%, 20%);
  width: calc(var(--u) * 560); padding: calc(var(--u) * 14) calc(var(--u) * 18);
  background: rgba(14, 15, 20, 0.88); border-top: calc(var(--u) * 3) solid var(--ct); border-radius: calc(var(--u) * 4);
  display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--u) * 6) calc(var(--u) * 16); align-items: center;
  opacity: 0; transition: opacity 0.3s, transform 0.35s;
}
.hud-killer.is-on { opacity: 1; transform: translate(-50%, 0); }
.hud-killer .k-ava { grid-row: 1 / 3; width: calc(var(--u) * 64); height: calc(var(--u) * 64); border-radius: calc(var(--u) * 4); background: linear-gradient(180deg, #3a5a8c, #18263f); display: grid; place-items: center; }
.hud-killer .k-ava svg { width: 70%; height: 70%; }
.hud-killer .k-by { font-size: calc(var(--u) * 16); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
.hud-killer .k-name { font-size: calc(var(--u) * 30); font-weight: 700; color: var(--ct); line-height: 1; }
.hud-killer .k-gun { grid-row: 1 / 3; grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 18); font-weight: 600; }
.hud-killer .k-gun svg { height: calc(var(--u) * 30); width: auto; }
.hud-killer .k-dmg { grid-column: 1 / 4; display: flex; justify-content: space-between; font-family: var(--f-ui); font-size: calc(var(--u) * 15); color: rgba(255, 255, 255, 0.7); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: calc(var(--u) * 8); margin-top: calc(var(--u) * 4); }
.hud-killer .k-dmg b { color: #fff; }

/* баннер конца раунда */
.hud-end {
  position: absolute; left: 50%; top: calc(var(--u) * 150); transform: translate(-50%, -10%);
  width: calc(var(--u) * 980); text-align: center; opacity: 0;
  transition: opacity 0.35s, transform 0.5s cubic-bezier(.2, .9, .3, 1.2);
}
.hud-end.is-on { opacity: 1; transform: translate(-50%, 0); }
.hud-end__band {
  position: relative; padding: calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * 16);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 24);
}
.hud-end__band::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--bc, rgba(40, 70, 130, 0.92)) 22%, var(--bc, rgba(40, 70, 130, 0.92)) 78%, rgba(0, 0, 0, 0));
}
.hud-end__band::after {
  content: ''; position: absolute; left: 15%; right: 15%; height: calc(var(--u) * 2); bottom: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bl, var(--ct)), rgba(255, 255, 255, 0));
}
.hud-end.is-t { --bc: rgba(130, 90, 20, 0.92); --bl: var(--t); }
.hud-end__ico svg { width: calc(var(--u) * 74); height: calc(var(--u) * 74); }
.hud-end__txt { text-align: left; }
.hud-end__txt b { display: block; font-size: calc(var(--u) * 54); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; }
.hud-end__txt span { display: block; font-size: calc(var(--u) * 22); font-weight: 600; opacity: 0.85; margin-top: calc(var(--u) * 6); letter-spacing: 0.05em; }
.hud-end__pay {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 18); margin-top: calc(var(--u) * 16);
  padding: calc(var(--u) * 10) calc(var(--u) * 26); background: rgba(0, 0, 0, 0.66); border-radius: calc(var(--u) * 6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.hud-end__pay b { font-size: calc(var(--u) * 52); font-weight: 800; line-height: 1; }
.hud-end__pay span { font-size: calc(var(--u) * 22); font-weight: 600; opacity: 0.85; text-align: left; line-height: 1.15; }
.hud-end__pay.is-pos b { color: var(--green); text-shadow: 0 0 calc(var(--u) * 22) rgba(120, 255, 120, 0.5); }
.hud-end__pay.is-neg b { color: var(--red); }
.hud-end__stamp {
  display: inline-block; margin-top: calc(var(--u) * 16); padding: calc(var(--u) * 2) calc(var(--u) * 22);
  font-size: calc(var(--u) * 46); font-weight: 800; font-style: italic; letter-spacing: 0.12em;
  color: #fff; border: calc(var(--u) * 3) solid #fff; transform: rotate(-4deg);
  text-shadow: 0 0 calc(var(--u) * 18) rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 calc(var(--u) * 26) rgba(255, 255, 255, 0.25);
}
.hud-end__stamp.is-ace { color: #ffd65c; border-color: #ffd65c; text-shadow: 0 0 calc(var(--u) * 22) rgba(255, 200, 60, 0.8); }


/* подсказки клавиш внизу кадра — как подсказки действий в CS2 */
.hud-keys {
  position: absolute; left: 50%; bottom: calc(var(--u) * 150); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(var(--u) * 18); white-space: nowrap;
  font-size: calc(var(--u) * 21); font-weight: 600; letter-spacing: .04em;
  padding: calc(var(--u) * 6) calc(var(--u) * 18); border-radius: calc(var(--u) * 4);
  background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s;
}
.hud-keys.is-on { opacity: 1; }
.hud-keys kbd {
  display: inline-block; min-width: 1.6em; text-align: center; margin-right: calc(var(--u) * 7);
  padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 3);
  font-size: .82em; font-weight: 700; color: #111; background: #e9edf3; box-shadow: inset 0 calc(var(--u) * -2) 0 #9aa3b2;
}
.hud-keys .c { color: #ffd166; }
.hud-keys .m { color: var(--green); }
.hud-keys i { font-style: normal; opacity: .4; }

/* до раунда: заставка поверх сцены */
.hud-idle {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(var(--u) * 10);
  text-align: center; opacity: 0; visibility: hidden;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55));
}
.hud-idle.is-on { opacity: 1; visibility: visible; }
.hud-idle__t { font-size: calc(var(--u) * 120); font-weight: 800; font-style: italic; line-height: .9; letter-spacing: .02em; }
.hud-idle__t span { font-size: .62em; opacity: .8; }
.hud-idle__t .t { color: var(--t); }
.hud-idle__t .ct { color: var(--ct); }
.hud-idle__s { font-size: calc(var(--u) * 26); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.hud-idle__k { margin-top: calc(var(--u) * 12); font-family: var(--f-ui, Inter), sans-serif; font-size: calc(var(--u) * 19); opacity: .75; }
.hud-idle__k b { color: var(--green); }

/* полоса игры (drophub.gamebar.js): значок по центру */
.cl-body .kz-gbar .kz-gico { display: grid; place-items: center; }

/* ═══════════════ УЗКИЕ ЭКРАНЫ ═══════════════ */
@media (max-width: 1080px) {
  .cl-stage { grid-template-columns: 300px minmax(0, 1fr); }
  .cl-gun { padding: 7px 4px; }
  .cl-gun__n { font-size: 13px; letter-spacing: 0; }
  .cl-step { padding: 7px 8px; gap: 6px; }
  .cl-step__ico { width: 24px; height: 24px; }
  .cl-step__t b { font-size: 16px; }
}

/* Телефон: экран сверху во всю ширину (кадр 4:5), под ним кнопки
   «Пикнуть / Сейв», цифры, потом ставка и выбор — как у минёра. */
@media (max-width: 760px) {
  .cl-main { order: -1; }
  /* кадр и на телефоне 16:10, как на компе (владелец: «чтобы окно игры тоже
     было прямоугольное»); HUD крупнее — --u от 820, кадр в этих единицах
     820×512, раскладка ниже */
  .cl-view { border-radius: 16px; }
  .hud, .cl-vm { --u: calc(100cqw / 820); }
  .gm-body.mn-body .cl-panel > .cl-play { order: -3; margin-top: 0; }
  .gm-body.mn-body .cl-peek, .gm-body.mn-body .cl-save { height: 52px; font-size: 16px; }
  .cl-play kbd { display: none; }
  .cl-play { grid-template-columns: 1fr 1fr; }
  /* полкнопки на телефоне: шанс и икс — строкой под «Пикнуть», а не в три строки сбоку */
  .gm-body.mn-body .cl-peek { flex-direction: column; gap: 2px; line-height: 1.05; }
  .cl-peek__s { font-size: 12px; white-space: nowrap; }
  .cl-gun__img { height: 46px; }
  .cl-gun__n { font-size: 13px; }
  .cl-ladder { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .cl-step { flex-direction: column; gap: 2px; padding: 6px 2px; text-align: center; }
  .cl-step__ico { display: none; }
  .cl-step__t i { font-size: 9px; letter-spacing: .04em; }
  .cl-step__t b { font-size: 15px; }
  /* HUD телефона (кадр 820×512 в --u):
     верх — радар слева, по центру только контры (у них иксы по фрагам),
     лента справа под ними: мелко и не больше трёх последних строк;
     середина — «Бомба заложена» выше «1 VS N», разминирование выше «Вас убил»;
     низ — деньги слева, броня/здоровье/знак/патроны прижаты вправо
     (по центру им с деньгами не разойтись); столбик оружия, награды и
     подсказки клавиш скрыты */
  .hud-radar { width: calc(var(--u) * 150); height: calc(var(--u) * 150); left: calc(var(--u) * 14); top: calc(var(--u) * 12); }
  .hud-top { transform: translateX(-50%) scale(.95); transform-origin: 50% 0; }
  .hud-team--t { display: none; }
  .hud-feed { right: calc(var(--u) * 14); top: calc(var(--u) * 104); gap: calc(var(--u) * 4); }
  .hud-feed li { font-size: calc(var(--u) * 15); padding: calc(var(--u) * 3) calc(var(--u) * 8); gap: calc(var(--u) * 6); }
  .hud-feed li:nth-last-child(n+4) { display: none; }
  .hud-feed svg { height: calc(var(--u) * 16); }
  .hud-feed .hs svg { height: calc(var(--u) * 15); }
  .hud-alert { top: calc(var(--u) * 112); font-size: calc(var(--u) * 22); padding: calc(var(--u) * 6) calc(var(--u) * 40); }
  .hud-alert svg { height: calc(var(--u) * 22); }
  .hud-big { top: 47%; font-size: calc(var(--u) * 104); }
  .hud-defuse { top: 30%; }
  .hud-cash { left: calc(var(--u) * 16); bottom: calc(var(--u) * 14); }
  .hud-awards { display: none; }
  .hud-bot { left: auto; right: calc(var(--u) * 12); transform: none; width: auto; gap: calc(var(--u) * 18); }
  .hud-slots, .hud-keys { display: none; }
  .hud-killer { bottom: calc(var(--u) * 96); }
  .hud-end { width: calc(var(--u) * 800); top: calc(var(--u) * 84); }
  .hud-end__txt b { font-size: calc(var(--u) * 44); }
}
@media (prefers-reduced-motion: reduce) {
  .hud-feed li { animation: none; }
}

/* правила: строка об авторе 3D-модели (лицензия CC BY 4.0) */
.dh-rules .cl-credit { margin: 18px 0 0; padding-top: 10px; border-top: 1px solid rgba(180, 160, 255, .14); font-size: 11.5px; line-height: 1.4; color: #8E86B8; }
.dh-rules .cl-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dh-rules .cl-credit a:hover { color: #CFC8F0; }

/* правила: таблица шансов по стволам — плотнее общей, чтобы шесть колонок
   влезли в окно правил и на телефоне */
.dh-rules .cl-odds th, .dh-rules .cl-odds td { padding: 6px 4px; white-space: nowrap; }
.dh-rules .cl-odds th:first-child { white-space: normal; }
.dh-rules .cl-odds th:not(:first-child), .dh-rules .cl-odds td:not(:first-child) { text-align: right; }
.dh-rules .cl-odds td:first-child { font-weight: 600; color: #fff; }
@media (max-width: 420px) {
  .dh-rules .cl-odds { font-size: 12px; }
  .dh-rules .cl-odds th, .dh-rules .cl-odds td { padding: 6px 2px; }
  .dh-rules .cl-odds th { font-size: 10.5px; letter-spacing: .03em; }
}