/* Общие части игровых экранов: рамка страницы, сетки заголовков и колонок.
   Глобально, а не в изолированных стилях страниц: рамку используют лобби,
   распределение и запись, и три копии одних правил разошлись бы при первой
   же правке отступа.

   Игровые экраны — единственное адаптивное место продукта: партия играется
   в том числе с телефонов, и на узком экране колонки схлопываются в одну. */

.vx-game{max-width:var(--content-max);margin:0 auto;padding:var(--pad-panel)}

.vx-game__cols{display:grid;grid-template-columns:1fr 360px;gap:var(--gap-section);align-items:start}

/* Заголовок лобби — своя строка грида над обеими колонками, а не первый элемент
   левой: пока он лежал внутри неё, правая колонка начиналась от верха заголовка,
   и код комнаты висел выше превью ровно на его высоту. Строки разведены явно,
   чтобы верх кода комнаты совпадал с верхом превью выбранного пака.
   Междустрочный зазор — как внутри колонки (--gap-stack), а не как между
   секциями: заголовок и превью читаются одним блоком. */
.vx-game__cols--lobby{grid-template-columns:1fr 400px;row-gap:var(--gap-stack)}
.vx-lobby__head{grid-column:1;grid-row:1}
.vx-lobby__main{grid-column:1;grid-row:2}
.vx-lobby__side{grid-column:2;grid-row:2}

.vx-game__stack{display:flex;flex-direction:column;gap:var(--gap-stack)}

.vx-game__h1{font:var(--type-display-l);color:var(--text-1);margin:6px 0 10px}

.vx-game__sub{font:var(--type-body);color:var(--text-2);max-width:560px}

.vx-game__head{display:flex;align-items:flex-end;gap:var(--gap-stack);margin-bottom:var(--gap-stack)}

.vx-game__headacts{margin-left:auto;display:flex;gap:10px;align-items:center;flex:0 0 auto}

.vx-game__video{position:relative;width:100%;aspect-ratio:16 / 9;border-radius:var(--radius-xl);
  background:var(--surface-sunken);border:1px solid var(--border-1);box-shadow:var(--inset-sunken);
  display:flex;align-items:center;justify-content:center;color:var(--warm-600);overflow:hidden}

.vx-game__thumb{width:100%;height:100%;object-fit:cover;display:block}

.vx-game__scrim{position:absolute;inset:0;background:var(--scrim-bottom);pointer-events:none}

.vx-game__badges{position:absolute;left:var(--pad-panel);bottom:14px;display:flex;gap:8px}

.vx-game__roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--gap-stack)}

/* Сетка игроков вместо колонки: до двадцати человек. */
.vx-game__players{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}

/* Бейдж игрока и карандаш правки никнейма — рядом, без зазора. Не lobby__:
   тот же ряд стоит и на распределении, где никнейм ещё можно поменять. */
.vx-game__player{display:flex;align-items:center;gap:6px}

/* Бейджу разрешено сжиматься: рядом с карандашом он иначе держит ширину по
   содержимому и выдавливает кнопку за край. */
.vx-game__player>.vx-player{flex:1;min-width:0}

/* Правка никнейма на месте бейджа: поле и две кнопки в одну ячейку сетки. */
.vx-game__rename{display:flex;align-items:center;gap:6px}

.vx-game__playerlist{display:flex;flex-direction:column;gap:8px}

.vx-game__hint{font:var(--type-caption);color:var(--text-3)}

.vx-game__note{display:flex;gap:10px;align-items:flex-start;font:var(--type-small);color:var(--text-2)}

.vx-room__solo{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--gap-stack);padding:var(--pad-panel)}

.vx-room__note{font:var(--type-small);color:var(--text-3);max-width:420px;text-align:center}

/* Неброская полоса обрыва связи, а не оверлей: сеть на вечеринке моргает
   постоянно, и модальное окно на каждое моргание — то, от чего спека ушла. */
/* Полоса состояния сети и очереди дублей: внизу экрана, маленькая и полупрозрачная —
   событие рабочее, а не тревожное, и центру ему делать нечего. */
.vx-room__net{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:8px;padding:6px 14px;font:var(--type-caption);
  color:var(--text-2);background:rgba(15,13,12,.85);border:1px solid var(--border-2);
  border-radius:var(--radius-pill);box-shadow:var(--shadow-2)}

/* Содержимое комнаты — над живым фоном (stage-bg.css, z-index:0). */
.vx-room{position:relative;z-index:1}

/* Оболочка игровых шагов (распределение, запись): знак слева сверху, панель
   игроков у левого края, код справа сверху — на своих местах поверх шага.
   Шагу — остальное: слева поле под панель (в нём же внизу кружок громкости),
   сверху — под знак и код. */
.vx-room--shell{padding:84px 3vw 24px 116px}
.vx-shell__brand{position:fixed;left:24px;top:22px;z-index:20;display:inline-flex;text-decoration:none;border:0;border-radius:8px}
.vx-shell__brand:focus-visible{outline:none;box-shadow:var(--ring)}
/* По вертикали — по центру без трансформации: трансформация сделала бы панель
   опорой для fixed-подсказок, и прокрутка панели их обрезала бы. */
.vx-shell .vx-ppanel{position:fixed;left:18px;top:0;bottom:0;margin:auto 0;height:max-content;z-index:20}
.vx-shell__code{position:fixed;right:3vw;top:20px;z-index:20}
@media (max-width:640px){
  .vx-room--shell{padding:0 16px 96px}
  .vx-shell{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 0 6px}
  .vx-shell__brand,.vx-shell .vx-ppanel,.vx-shell__code{position:static;translate:none}
  .vx-shell__code{margin-left:auto}
  .vx-shell .vx-ppanel{order:3;width:100%;flex-direction:row;max-height:none;overflow-x:auto;overflow-y:visible;padding:12px 14px 14px;border-radius:20px}
}

/* Появление шага. На распределении комната заперта по высоте окна
   (.vx-room__fill — колонка flex), и обёртка шага передаёт высоту дальше.
   Заливка — backwards, не both: по окончании на обёртке не остаётся следа
   анимации трансформации, и fixed-окна внутри шага (панель реплик, диалоги)
   считают позицию от окна, а не от обёртки. */
.vx-step{animation:vx-step-in .45s cubic-bezier(.2,.8,.2,1) backwards;
  /* Пока шаг въезжает, он — опора для fixed-потомков, и спрятанная за правым
     краем панель (реплики пака) на миг давала странице горизонтальную прокрутку. */
  overflow-x:clip}
.vx-room__fill>.vx-step{display:flex;flex-direction:column;flex:1;min-height:0}
@keyframes vx-step-in{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){.vx-step{animation:vx-step-fade .2s backwards}}
@keyframes vx-step-fade{from{opacity:0}}

@media (max-width:900px){
  /* minmax(0,…), а не 1fr: у 1fr нижняя граница — ширина содержимого, и
     широкий кусок (код комнаты, строка ролей) растягивал колонку шире экрана. */
  .vx-game__cols,.vx-game__cols--lobby{grid-template-columns:minmax(0,1fr)}
  /* В одну колонку строки грида расставляет поток: явные номера склеили бы
     заголовок с превью в одну ячейку. */
  .vx-lobby__head,.vx-lobby__main,.vx-lobby__side{grid-column:1;grid-row:auto}
  .vx-game__head{flex-direction:column;align-items:flex-start}
  .vx-game__headacts{margin-left:0;width:100%;flex-wrap:wrap}
}

/* Телефон. Роли — в одну колонку: в две имена вроде «Капитан Джек Воробей»
   обрезались до первого слова, а по имени роль и выбирают. Код комнаты
   мельче и переносит кнопки под себя — в строку с ними он не помещался. */
@media (max-width:640px){
  .vx-game__h1{font:var(--type-display-m)}
  .vx-game__roles{grid-template-columns:minmax(0,1fr)}
  .vx-code{flex-wrap:wrap}
  .vx-code__copies{flex-direction:row}
  .vx-code--lg .vx-code__val{font-size:32px}
}