/* Игровой экран, часть 2/6: верхний HUD (#hud, #stats, #topHud, #metaHud).
   См. 03-game-fx.css — общее примечание про разрез бывшего 03-game.css. */

/* z-index 15, а не --z-hud (10): #rightSidebar (12) перекрывал панель, и
   elementFromPoint в центре кнопок «язык» и «выйти» возвращал элемент правой
   колонки — на телефоне выход в меню схлопывал панель «Матч» вместо выхода. */
#hud {
  position: fixed;
  left: calc(12px + var(--sa-left));
  top: calc(12px + var(--sa-top));
  z-index: 15;
  padding: var(--pad-lg);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(17, 26, 40, 0.72), rgba(7, 11, 19, 0.78));
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-float-strong);
  min-width: 260px;
  max-width: min(360px, calc(100vw - 24px - var(--sa-left) - var(--sa-right)));
  max-height: calc(100dvh - 24px - var(--sa-top) - var(--sa-bottom));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* I7: во время матча левый HUD — компактный ряд иконок с автоскрытием.
   Лучший угол экрана не должен занимать заголовок игры и название комнаты. */
body.inGame #hud:not(.lbPinned) {
  min-width: 0;
  width: auto;
  padding: 6px;
  border-color: color-mix(in srgb, var(--border) 45%, transparent);
  background: color-mix(in srgb, rgba(0, 0, 0, 0.40) 70%, transparent);
  box-shadow: none;
  opacity: 0.42;
  transition: opacity 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

body.inGame #hud:not(.lbPinned):hover,
body.inGame #hud:not(.lbPinned):focus-within {
  opacity: 1;
  background: linear-gradient(160deg, rgba(17, 26, 40, 0.72), rgba(7, 11, 19, 0.78));
  box-shadow: var(--shadow-float-strong);
}

body.inGame #hud:not(.lbPinned) .hudTop {
  margin-bottom: 0;
  flex-wrap: nowrap;
  gap: 6px;
}

body.inGame #hud:not(.lbPinned) .hudActions {
  flex-wrap: nowrap;
  gap: 6px;
}

/* Заголовок «Змейки» во время матча не нужен, название комнаты — сильно ужато */
body.inGame #hud:not(.lbPinned) #title {
  display: none;
}

body.inGame #hud:not(.lbPinned) #roomInfo {
  font-size: var(--fs-11);
  opacity: 0.6;
  max-width: 108px;
}

/* #help из этого правила убран: подсказки вынесены из #hud в index.html
   (внутри они раздували панель до 340px, а filter/backdrop-filter на #hud
   ломает position: fixed у потомков), поэтому селектор `#hud #help` не
   совпадал ни с чем. Заодно снят !important — перекрывать правило некому. */
body.inGame #hud:not(.lbPinned) .hudMid {
  display: none;
}

.hudTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.hudBrand {
  min-width: 0;
}

.hudActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hudMid {
  display: grid;
  gap: 10px;
}

#nameRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* В бою поле смены ника не нужно и просто занимает место в верху экрана.
   body.inGame — тот же флаг, которым уже отмечено активное состояние
   матча по всему HUD (см. body.inGame #hud:not(.lbPinned) выше). */
body.inGame #nameRow {
  display: none;
}

#nameRow input {
  flex: 1;
  min-width: 0;
}

#nameInput {
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  outline: none;
}

#nameBtn {
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  min-height: var(--control-h);
}

#nameBtn:active {
  transform: translateY(1px);
}

#stats {
  /* Закреплённая таблица: панель шире ряда иконок, чтобы имена не резались. */
  min-width: 320px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--text);
}

#stats table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#stats thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10);
}

#stats td,
#stats th {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#stats th.rank,
#stats td.rank {
  width: 34px;
  text-align: right;
}

/* «Очки • Клетки» — самый длинный заголовок из трёх переменных колонок
   (rank — фиксированная ширина 34px, name — тянется на остаток). Без явных
   долей table-layout:fixed делил их поровну, и заголовок обрубался
   многоточием даже там, где рядом с «Доля» простаивало место (см.
   docs/reviews/iter-3.md). Доли подобраны так, чтобы «Очки • Клетки» и
   «Доля» помещались на wrap ru/en локалей на всех трёх съёмочных
   вьюпортах. */
/* Доли пересчитаны в пользу имени: 42%/20% оставляли нику ~90px, из
   которых половину забирал бейдж архетипа — имена читались как «Л…».
   Числа табличные и короткие, им хватает 30%/16%; ник берёт остаток. */
#stats th.cells,
#stats td.cells {
  width: 32%;
}

#stats th.share,
#stats td.share {
  width: 21%;
}

#stats td.num,
#stats th.num {
  text-align: right;
}

#stats tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.03);
}

#stats tbody tr:hover td {
  background: rgba(255, 255, 255, 0.06);
}

#stats tbody tr.me td {
  background: color-mix(in srgb, var(--brand2) 14%, transparent);
}

#stats tbody tr.lbNear td {
  background: rgba(255, 255, 255, 0.045);
}

#stats tr:last-child td {
  border-bottom: none;
}

#help {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--fs-meta);
  color: var(--muted);
}

#title {
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#roomInfo {
  font-size: var(--fs-meta);
  opacity: 0.75;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Раскладка полосы задаётся ОДИН раз здесь и переопределяется только для
   телефона (<=720px, ниже в этом же файле). Раньше она собиралась из четырёх
   мест в трёх файлах: центрирование здесь, ширина 460px в @media 900,
   мобильный блок ниже и «волна» в 06 — и понять итог можно было только
   в devtools.
   Полоса растянута между зарезервированными краями и центрируется ВНУТРИ
   промежутка: центрирование по всему экрану (left:50% + translateX) не знало
   о боковых панелях, и на 1076px полоса наезжала на #hud (замер: 94x58px). */
#topHud {
  position: fixed;
  left: var(--hud-left-reserve, 276px);
  right: var(--hud-right-reserve, 344px);
  top: calc(12px + var(--sa-top));
  z-index: var(--z-top);
  width: auto;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--pad-md) var(--pad-lg);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--panel) calc(var(--hud-panel-alpha) * 100%), transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-float);
  pointer-events: none;
}

#topHud[aria-hidden="true"] {
  display: none;
}

.topHudZone {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.topHudLabel {
  font-size: var(--fs-meta);
  font-weight: 800;
  color: var(--muted2);
}

/* --- Раскладка полосы: ОДНА строка вместо четырёх ---------------------------
   Замер (волна 9): 135px высоты на 368px ширины. Причина — .topHudRight был
   вложенной сеткой, где таймер и контракт занимали `grid-column: 1 / -1`,
   то есть каждый вставал на свою строку; сверху добавлялся ряд «место + зона».
   Для полосы состояния поверх поля это непозволительно много — она закрывала
   верх карты.

   Стало: всё в одну flex-строку с переносом по необходимости. Порядок слева
   направо — по убыванию важности: место, зона, время, фаза, киллы, контракт.

   Объявления перенесены сюда из 11-redesign.css. Там они стояли ПОСЛЕ
   мобильных правил (08-game-sidebar.css, 10-ux-waves.css) и при равной
   специфичности перекрывали их: `.topHudRow { align-items: center }`,
   `row-gap: 2px`, `.topHudRight { gap: 0 8px }` и `.topHudBar { margin-top }`
   для телефона не действовали вовсе. Теперь база — здесь, а медиазапросы
   ниже по каскаду её действительно уточняют. */
.topHudRow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 4px;
}

.topHudRight {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 4px;
  min-width: 0;
  /* Забирает остаток строки, чтобы контракт прижимался вправо. */
  flex: 1 1 auto;
  justify-content: flex-end;
}

.topHudTime {
  font-size: var(--fs-meta);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.90);
  text-align: right;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* УХ16: таймер матча предупреждает цветом о приближении конца — золотой на
   последних 30 с, красный с пульсацией на последних 15 с (client_hud.js
   вешает isUrgent при <= 30, isCritical при <= 15, то есть на последних
   15 секундах оба класса стоят одновременно — порядок объявлений здесь и
   решает, что победит).

   Обе ступени раньше не работали: 09-hud-details.css объявлял .isUrgent
   второй раз, позже по каскаду, сразу в красном и с пульсацией — жёлтой
   ступени не было ни разу, а .isCritical перекрывался целиком, потому что
   стоял в более раннем файле. Дубль убран, обе ступени живут здесь, и
   .isCritical идёт после .isUrgent. Цвета — из токенов: красный по правилу
   редизайна закреплён за опасностью. Пульсация переиспользует общий
   @keyframes urgentPulse (09-hud-details.css) вместо своей копии. */
.topHudTime.isUrgent {
  color: var(--gold);
}

.topHudTime.isCritical {
  color: var(--accent);
  animation: urgentPulse 1.2s ease-in-out infinite;
}

.topHudKills {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: rgba(255, 255, 255, 0.06);
  font-size: var(--fs-meta);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.92);
}

.topHudContract {
  /* Контракт длиннее всех: пусть ужимается он, а не цифры слева.
     min-width: 0 обязателен — иначе flex-элемент не ужимается ниже
     max-content и ellipsis не срабатывает. */
  flex: 0 1 auto;
  min-width: 0;
  color: var(--muted2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: right;
  font-size: var(--fs-meta);
  font-weight: 800;
}

.topHudBar {
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.topHudBarFill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  transition: width 220ms ease;
}

#metaHud {
  padding: var(--pad-sm) var(--pad-md);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--panel) calc(var(--hud-panel-alpha) * 100%), transparent);
  backdrop-filter: blur(10px);
  font-size: var(--fs-meta);
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
}

.metaSection {
  display: grid;
  gap: 6px;
}

.metaSection + .metaSection {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Панель «Матч»: плоская карточка вместо вложенных <details> ------------
   Три блока — кошелёк, задания, чипы состояния (серия/баффы). Каждый
   пропадает, когда ему нечего показать; сворачивать нечего.
   Разметку собирает renderMetaHudImpl (client_hud.js). */
.metaCard {
  display: grid;
  gap: 8px;
}

.metaWallet {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border2));
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, transparent), rgba(0, 0, 0, 0.18));
}

.metaWalletIcon {
  flex: 0 0 auto;
  font-size: var(--fs-body);
  line-height: 1;
}

.metaWalletLabel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--muted);
}

.metaWalletValue {
  flex: 0 0 auto;
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--gold) 80%, #fff);
}

.metaGoals {
  display: grid;
  gap: 5px;
}

.metaGoalsTitle {
  font-size: var(--fs-meta);
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Строка задания: название, значение и полоса прогресса под ними.
   Прогресс — доля --p (0..1), её ставит JS. Выполненное — бренд-цветом. */
.metaGoal {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 4px;
  column-gap: 10px;
  row-gap: 4px;
  align-items: baseline;
  padding: 6px 8px 5px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
}

.metaGoalName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
}

.metaGoalVal {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.metaGoalBar {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.metaGoalBar::before {
  content: '';
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  transition: width 260ms ease;
}

.metaGoal.isDone {
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
}

.metaGoal.isDone .metaGoalVal {
  color: var(--brand);
}

.metaChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.metaChip {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: rgba(255, 255, 255, 0.06);
  font-size: var(--fs-meta);
  font-weight: 800;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
}

.metaChip.isStreak {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 14%, rgba(0, 0, 0, 0.2));
  color: color-mix(in srgb, var(--gold) 80%, #fff);
}