/* Общая "рамка" вокруг игр: шапка (лого/хаб/счёт) + боковая панель справа
   (фоновое видео ↔ живой список игроков). Подключается на всех 9 играх,
   поверх их собственного style.css — использует только те CSS-переменные,
   которые уже определены в :root каждой игры (--bg/--panel/--accent/...). */

/* Всегда резервируем место под вертикальный скроллбар (даже если он сейчас
   не нужен) — иначе когда включается высокое 9:16-видео справа, страница
   становится выше окна, скроллбар появляется/пропадает, и все width:100%
   элементы (шапка, боковые панели) на его ширину чуть сжимаются/растягиваются
   при каждом переключении видео. scrollbar-gutter не поддерживается везде
   (например, старый Safari) — overflow-y:scroll держит скроллбар видимым
   всегда, как более совместимый со всеми браузерами дублирующий фикс. */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* React монтируется в #root, а он нигде в проекте не стилизован. body у
   каждой игры — flex-контейнер (display:flex; justify-content:center), и
   flex-элемент без явной ширины сжимается по содержимому (shrink-to-fit)
   вместо того, чтобы заполнять экран. Из-за этого вся строка
   правила/#app/игроки на каждом экране пересчитывалась под фактическую
   ширину контента текущего экрана — например, у #app (max-width:480px)
   реальная ширина "плавала" от ~290px до 480px в зависимости от того,
   насколько широк контент конкретного экрана игры, и вся раскладка
   заметно "прыгала" при смене экранов. width:100% возвращает #root к
   обычному блочному поведению — ширина фиксируется по контейнеру, а не
   по содержимому. */
.gc-page {
  width: 100%;
  /* На очень широких мониторах (2K/4K) боковые треки упираются в свой
     clamp()-максимум (480px), а центральная колонка игры — в свой
     --app-track-max, и дальше пустое место между ними/по бокам растёт
     неограниченно (см. justify-content:space-between ниже — сделан
     осознанно, чтобы боковые панели стояли у краёв под шапкой, а не
     "плавали" одной группой по центру экрана). Ограничиваем сверху сам
     .gc-page, чтобы вся эта конструкция (шапка + тело) переставала расти
     как единый блок и просто центрировалась — так же, как на хабе. */
  max-width: 1700px;
  margin: 0 auto;
}

#root {
  width: 100%;
}

.gc-header {
  /* Grid, а не flex + space-between: тот способ центрирует средний элемент
     только когда боковые равны по ширине — а тут слева всегда лого, справа
     иногда пусто (когда у игры нет личного счёта), и нав съезжал в сторону.
     minmax(0, 1fr), а не голый 1fr: у голого 1fr неявный минимум — это
     content-based min-width (auto), а не 0, поэтому на узком мобильном
     экране колонки с nowrap-текстом (лого, счёт) не сжимались, требовали
     себе полную ширину текста и раздвигали всю шапку — а с ней и всю
     страницу — шире экрана (появлялся горизонтальный скролл, "съезжал
     экран"). С minmax(0, 1fr) колонки могут сжиматься, а текст внутри
     аккуратно обрезается многоточием (см. text-overflow ниже). */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  margin-bottom: 24px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
}

.gc-header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
}

.gc-header-brand img {
  flex-shrink: 0;
}

.gc-header-brand-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gc-header-nav {
  display: flex;
  gap: 8px;
}

.gc-header-nav-item {
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
}

.gc-header-nav-item.active {
  background: var(--panel-2);
  color: var(--text);
}

.gc-header-nav-item.link {
  color: var(--muted);
  border: 2px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gc-header-nav-item.link:hover {
  color: var(--text);
  border-color: var(--accent);
}

.gc-header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gc-header-score {
  background: var(--panel-2);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent);
  white-space: nowrap;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .1s ease;
}

.theme-toggle-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.theme-toggle-btn:active {
  transform: scale(0.92);
}

/* Grid, а не flex + justify-content:center: с флексом боковые колонки
   центрировались вместе с игрой как единая группа, поэтому визуально
   "плавали" где-то в середине экрана, а не стояли у краёв прямо под
   шапкой. С гридом боковые треки — фиксированной ширины (clamp), сразу
   у краёв, а центральная колонка (игра) — резиновая, занимает весь
   остаток и может быть шире, чем раньше. */
.gc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.gc-body > #app {
  padding-bottom: 32px;
  margin: 0 auto;
}

.gc-side-panel {
  display: none; /* по умолчанию скрыто, показываем только на широких экранах */
}

.gc-players-panel,
.gc-video-wrap {
  /* Фолбэк на --card: на хабе (Tailwind-токены) нет переменной --panel,
     а в 9 играх --card не определена — так работает в обоих контекстах. */
  background: var(--panel, var(--card));
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.gc-players-panel {
  padding: 16px;
}

.gc-players-header {
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 12px;
}

.gc-players-count {
  color: var(--text);
}

.gc-players-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

.gc-player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel-2);
  font-size: 0.95rem;
}

.gc-player-row.disconnected {
  opacity: 0.5;
}

.gc-player-avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.gc-player-row-empty {
  background: transparent;
  border: 2px dashed var(--border);
}

.gc-player-row-empty .gc-player-name,
.gc-player-row-empty .gc-player-score {
  color: var(--muted);
  font-weight: 500;
}

.gc-player-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px dashed var(--border);
}

.gc-player-name {
  flex: 1;
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gc-player-score {
  color: var(--accent);
  font-weight: 700;
}

.gc-video-wrap {
  /* На хабе правая колонка растягивается по высоте под левую (align-items:
     stretch) — а высота видео завязана на его ширину через aspect-ratio, без
     потолка. На короткой странице (мало карточек/маленький вьюпорт) видео
     "хотело" быть выше левой колонки, и flexbox расстягивал под него ВСЮ
     строку — из-за этого хаб на глаз "прыгал" крупнее при включении видео.
     max-height обрезает рост сверху. aspect-ratio/width/max-height — на
     самой обёртке, а не на <video>: если их повесить прямо на <video>
     внутри "flex-1 flex-col" родителя, некоторые браузеры на первом кадре
     схлопывают его в 0×0 (гонка между stretch-подгонкой ширины и расчётом
     aspect-ratio) — на обёртке с явным width:100% этой гонки нет. */
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: min(760px, 78vh);
  margin: 0 auto;
}

.gc-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.gc-rules-panel {
  display: none; /* по умолчанию скрыто, показываем только на широких экранах (см. wavelength/style.css) */
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.gc-rules-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  margin: 0 0 14px;
}

.gc-rules-step {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.gc-rules-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--accent);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.gc-rules-step-title {
  font-weight: 700;
  color: var(--text);
  font-size: 0.88rem;
  margin: 0 0 2px;
}

.gc-rules-step-body {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0;
}

.gc-rules-tip {
  background: var(--panel-2);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.gc-side-panel,
.gc-rules-panel {
  position: sticky;
  top: 24px;
}

@media (min-width: 1180px) {
  .gc-body {
    /* Ширина боковых треков — чистая функция ширины экрана (clamp), не
       зависит от того, что внутри (видео или список игроков) и насколько
       широк центральный контент — колонки не "прыгают" при переключениях.
       Центральный трек раньше был "1fr" (весь остаток) — на широких
       экранах это давало трек заметно шире, чем максимальная ширина
       контента игры (#app), и колонка с игрой "терялась" в пустом
       пространстве рядом с видео/списком игроков. --app-track-max — это
       max-width самого #app конкретной игры (обычно 480px, для Скуфа —
       620px, см. её style.css); если игра его не задала, используется
       общий фолбэк 480px. */
    grid-template-columns: clamp(260px, 26vw, 480px) minmax(0, var(--app-track-max, 480px)) clamp(260px, 26vw, 480px);
  }

  .gc-side-panel,
  .gc-rules-panel {
    display: block;
  }
}