/* ==========================================================================
   Лобби ведущего на широком экране (от 1280px) — для ВСЕХ игр, с брендом и без.
   Комп ведущего обычно выведен на большой экран / проектор: люди сканируют QR с мест,
   поэтому QR крупно и сразу на экране, а лобби занимает ширину.

     слева  (.mqxh-join, sticky): плашка бренда → QR ~320px на белой карточке → PIN → адрес → кнопки
     справа: статус генерации → игроки → «Ваша роль» → «Ход игры» → «Начать игру»
     сверху на обе колонки: заголовок «Делись ссылкой»

   Ниже 1280px (окно; в превью — ширина рамки) этот файл ничего не меняет: вся разметка (.mqxh-join, .mqxh-joinqr, .mqxh-join__brand)
   на телефоне — нейтральные обёртки / скрыты атрибутом hidden.

   Все правила — под .mqx--create:has(.cg-lobby-container:not(.is-hidden)) (= #gameCreated): только
   состояние «лобби» (форма создания в той же колонке .mqx--create остаётся узкой). Браузер без :has
   отбрасывает правило целиком — остаётся текущая одноколоночная раскладка.
   Селекторы — по классам, не по id: превью брендинга в редакторе (branding-preview.js) собирает
   экран лобби из этой же разметки (id в копии сняты), и эти правила работают и там.

   QR — тот же <img id="qrCodeImage" class="mqxh-joinqr__img">, что грузит loadQRCode() (один запрос, data-URL); модалка
   «QR-код» копирует src из него же. До ответа виден #qrCodePlaceholder того же размера.

   Контейнерные запросы, не @media: раскладка следует ширине КОНТЕЙНЕРА лобби, а не окна — так рамка
   1280×720 в превью брендинга показывает две колонки при любом окне редактора (как превью в Figma/Webflow).
     • настоящая страница: контейнер — .create-game-container (родитель .mqx--create, ширина = окно без
       полосы прокрутки). Он становится контейнером ТОЛЬКО от окна 1280px (mq-lobby) / 1600px (mq-lobby-xl) —
       правило ниже, — поэтому страница переключается ровно на тех же ширинах окна, что и раньше с @media,
       и с полосой прокрутки Windows (~17px), и без неё. Пороги самих запросов (1240 / 1560) на 40px ниже —
       запас на полосу прокрутки: на странице их всегда проходит контейнер, который вообще существует.
       Ниже 1280px контейнера нет: на телефоне и узком окне ни containment, ни правил этого файла.
     • превью брендинга: контейнер — рамка экрана .mq-bpv__frame (branding.css, оба имени), решает её ширина.
   ========================================================================== */

@media (min-width: 1280px) {
  .create-game-container {
    container: mq-lobby / inline-size;
  }
}
@media (min-width: 1600px) {
  .create-game-container {
    container-name: mq-lobby mq-lobby-xl;
  }
}

@container mq-lobby (min-width: 1240px) {
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) {
    --lobby-qr: 320px;
    --lobby-join-w: calc(var(--lobby-qr) + 72px);
    max-width: 1200px;
  }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqx__scroll {
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
  }
  /* Плашка бренда переезжает из верхней полосы в левую колонку — не дублируем */
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqx-top .mq-brand-plate {
    display: none;
  }

  /* Сетка. display: grid !important — showGameCreatedLobby() ставит инлайн display:block.
     Строки: 1 — заголовок на обе колонки; 2–6 — правая колонка; последняя 1fr забирает высоту
     левой колонки (она тянется через 2…6), чтобы между карточками справа не было дыр. */
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .cg-lobby-container {
    display: grid !important;
    grid-template-columns: var(--lobby-join-w) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: 40px;
    align-items: start;
    max-width: none;
    margin: 0;
    padding: 8px 0 24px;
  }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .cg-lobby-container > .mqx-hero {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-gen { grid-column: 2; grid-row: 2; margin: 14px 0 0; }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-players { grid-column: 2; grid-row: 3; margin-top: 14px; }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-role { grid-column: 2; grid-row: 4; }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqx-settings { grid-column: 2; grid-row: 5; }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .cg-lobby-actions { grid-column: 2; grid-row: 6; }

  /* Левая колонка «вход» */
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-join {
    grid-column: 1;
    grid-row: 2 / -1;
  }
  body.is-branded .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-join__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
  }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-pin {
    padding: 24px 24px 22px;
  }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-joinqr {
    display: grid;
    width: var(--lobby-qr);
    margin: 4px auto 20px;
    overflow: hidden;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .28);
  }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-joinqr > * {
    grid-area: 1 / 1;
    width: var(--lobby-qr);
    height: var(--lobby-qr);
  }
  /* PNG уже с белым полем (border=4 модуля в app/core/qr.py) — карточке свой отступ не нужен */
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-joinqr__img {
    image-rendering: pixelated;
  }
  /* До первого ответа у img нет src (и инлайн display ещё не выставлен) — показываем только заглушку */
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-joinqr__img:not([src]),
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-joinqr__img[src=""] {
    display: none;
  }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-joinqr__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
  }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-joinqr__ph .cg-qr-spinner {
    width: 36px;
    height: 36px;
    border-width: 3px;
  }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-pin__num {
    font-size: 64px;
  }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-pin__url {
    font-size: 13px;
  }
  /* QR уже на экране — кнопка модалки не нужна */
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-share--qr {
    display: none;
  }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-pin__share {
    grid-template-columns: 1fr 1fr;
  }

  /* Правая колонка шире телефонной — игроки в больше столбцов, а не 4 растянутые плитки */
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-pgrid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
}

/* Колонка «вход» липнет под верхней полосой, пока справа прокручиваются игроки. Только на
   достаточно высоком экране: липкий блок выше окна обрезался бы снизу (кнопки под краем).
   body здесь — сам контейнер прокрутки (overflow-x: hidden из style.css даёт overflow-y: auto
   при html с overflow), а прокручивается окно: sticky цеплялся за body и не срабатывал.
   clip + visible — body больше не контейнер прокрутки, горизонталь по-прежнему обрезана.
   Только в лобби ведущего на широком экране. */
@media (min-width: 1280px) and (min-height: 820px) {
  body.lobby-fullbleed:has(#create-game.active .cg-lobby-container:not(.is-hidden)) {
    overflow-x: clip;
    overflow-y: visible;
  }
}
/* body — вне контейнера лобби (правило выше только для настоящей страницы, окно = контейнер); высоту
   контейнерный запрос по inline-size не знает — она по-прежнему от окна */
@media (min-height: 820px) {
  @container mq-lobby (min-width: 1240px) {
    /* Верхняя полоса (крестик, баланс) — как раньше, уезжает со страницей: прилипшая, она
       налезала бы на карточки правой колонки (у неё нет фона) */
    .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqx-top {
      position: relative;
    }
    .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-join {
      position: sticky;
      top: 16px;
    }
  }
}

/* Большой экран: QR ещё крупнее, чтобы сканировался с дальних рядов */
@container mq-lobby-xl (min-width: 1560px) {
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) {
    --lobby-qr: 380px;
    max-width: 1320px;
  }
  .mqx--create:has(.cg-lobby-container:not(.is-hidden)) .mqxh-pin__num {
    font-size: 72px;
  }
}