/* Карточка бывает и кнопкой, и ссылкой (см. PackCard.razor), поэтому здесь же
   снимается отделка ссылок из base.css: янтарный цвет и подчёркивание чертой
   снизу превратили бы карточку в подчёркнутый оранжевый прямоугольник. Цвет
   возвращается наследованием — внутри карточки у каждой подписи он свой. */
.vx-pack{display:flex;flex-direction:column;background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--inset-top),var(--shadow-2);
  transition:var(--transition-control);cursor:pointer;text-align:left;
  color:var(--text-1);text-decoration:none}
/* Цвет повторён и здесь: у a:hover из base.css та же вескость правила, и без
   этой строки карточка-ссылка желтела бы под курсором целиком. */
.vx-pack:hover{transform:translateY(-2px);border-color:var(--border-2);box-shadow:var(--inset-top),var(--shadow-3);
  color:var(--text-1)}
.vx-pack:active{transform:translateY(0);box-shadow:var(--inset-top),var(--shadow-1)}
/* Карточка — кнопка, и своя тень у неё есть всегда, поэтому общее кольцо фокуса
   из base.css перекрывалось полностью: в сетке паков клавиатурой было не понять,
   на какой карточке стоишь. */
.vx-pack:focus-visible{box-shadow:var(--ring),var(--inset-top),var(--shadow-2)}
/* Черта между кадром и телом карточки живёт на теле, а не на кадре. Пока она
   была нижней границей самого кадра, затемнение её не накрывало: абсолютный
   .vx-pack__scrim считается от padding-box и до границы не достаёт, а кадр под
   неё заходит (background-clip по умолчанию border-box). Получалась светлая
   полоска в один-два пикселя по низу превью — недозатемнённый кадр под белой
   границей. */
.vx-pack__thumb{margin:-1px -6px 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;position:relative;aspect-ratio:16/9;background:var(--surface-sunken);display:flex;align-items:center;
  justify-content:center;color:var(--warm-600);background-size:cover;background-position:center}
.vx-pack__scrim{position:absolute;inset:0;background:var(--scrim-bottom)}
.vx-pack__dur{position:absolute;right:8px;bottom:8px;padding:2px 6px;border-radius:var(--radius-xs);
  background:rgba(15,13,12,.78);font:var(--type-mono-s);color:var(--warm-100)}
/* Верх кадра — одна строка во всю ширину: слева состояние, справа возраст.
   Раньше это были два оверлея, прибитые к своим углам, и на карточке, где
   есть и то и другое, они наезжали друг на друга. Строкой они делят ширину
   сами. */
.vx-pack__top{position:absolute;left:8px;right:8px;top:8px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
/* Ряд плашек статуса. Своего фона у ряда нет: с двумя плашками общая подложка
   протягивалась бы и через промежуток между ними — одна тёмная лента вместо
   двух значков. min-width:0 — чтобы длинные плашки ужимались переносом, а не
   выдавливали оценку за край кадра. */
.vx-pack__st{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
/* Подложка — у каждой плашки своя и по её форме. Она нужна потому, что значок
   лежит поверх кадра, а кадр бывает светлым: полупрозрачная заливка значка на
   нём выцветает до нечитаемости. Тон — тот же, что у длительности в правом
   нижнем углу, чтобы оверлеи читались как одна система. */
.vx-pack__stpill{display:inline-flex;border-radius:var(--radius-pill);background:rgba(15,13,12,.78)}
/* Возраст справа не ужимается: пометка короткая, и переносить в ней нечего. */
.vx-pack__tr{display:flex;align-items:center;gap:6px;flex:0 0 auto}
/* Возраст — простым текстом, тем же тёмным подслоем, что у статуса и
   длительности: оверлеи одной подложки читаются как одна система, а не как
   несколько случайных наклеек. */
.vx-pack__age{padding:2px 6px;border-radius:var(--radius-xs);
  background:rgba(15,13,12,.78);font:var(--type-mono-s);color:var(--warm-100)}
/* Низ кадра слева — числа о самом паке: оценка и на скольких он человек.
   Напротив, у правого края, стоит длительность; подложка и шрифт у всех трёх
   одни, отличают их только значки.
   Подложка у каждой плашки своя, как и в верхнем ряду: общая на обе тянулась
   бы и через промежуток между ними. */
.vx-pack__stats{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:6px}
.vx-pack__stat{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;
  border-radius:var(--radius-xs);background:rgba(15,13,12,.78);
  font:var(--type-mono-s);color:var(--warm-100)}
.vx-pack__stat .vx-pack__star{fill:currentColor;color:var(--accent)}
.vx-pack__body{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px;border-top:1px solid var(--border-1)}
.vx-pack__ttl{font:var(--type-body-strong);color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-pack__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Теги — своя строка с чертой сверху: это свойство пака, а не ещё один
   счётчик, и в одном ряду со счётчиками терялись бы среди них. */
.vx-pack__tags{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px;border-top:1px solid var(--border-1)}
/* Плашка тега мельче обычной: тегов до трёх, и в полный рост они спорили за
   внимание со счётчиками строкой выше, хотя сообщают меньше. Размер задан
   здесь, а не в самой плашке: в остальных местах она остаётся прежней. */
.vx-pack__tags .vx-badge{height:20px;padding:0 6px;font-size:10px}
/* Подвал карточки: автор слева, число партий у правого края. Имя ужимается
   многоточием, а число держит своё место — иначе оно гуляло бы по горизонтали
   от карточки к карточке вслед за длиной никнейма. */
.vx-pack__foot{display:flex;align-items:center;gap:10px;font:var(--type-caption);color:var(--text-3)}
.vx-pack__author{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.vx-pack__games{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-variant-numeric:tabular-nums}