/* ============================================================================
   /play-test — новая сцена поиска игры (макет play_v3.html, выкладка 1).

   ⚠️ Копия css/pages/play.css для ОТДЕЛЬНОЙ админской страницы: боевой /play
   грузит оригинал, правки отсюда туда не попадают. Что изменено против него:
   убран арт-слой .aa-play__main::before (его место заняла стена героев), а в
   конце файла добавлен блок «Выкладка 1» — стена, блок «Регион», команда
   подключения, отметки состава и инструкция. Всё новое — тоже .aa-play__*.

   Ниже — исходная шапка play.css, она по-прежнему описывает каркас страницы.
   ----------------------------------------------------------------------------
   /play — поиск игры. Редизайн «сцена» (макет C:\Obisian\Tools\mockups\play_stage.html,
   принят владельцем 2026-09-11).

   Две поверхности: сцена слева и чат справа. Внутри сцены четыре яруса, у каждого
   своё оформление, чтобы блоки не читались одной серой массой:
     1. шапка с артом (кто вы), 2. дорожка шагов (где вы), 3. экран состояния
     фиксированной высоты (что делать), 4. последние матчи (что было).
   Внизу сцены — справочник строкой.

   Решения владельца (память design-preferences):
     • арт в шапке сцены и за экраном состояния — цвет живёт в картинке, панели серые;
     • плитки показателей с углублением (заливка фоном страницы);
     • заголовки шрифтом игры (Reaver) строчными: правило сайта «капс только до 12px»
       остаётся в силе; • места в матчах цветными плашками;
     • высота страницы не прыгает между состояниями; • без зерна и без смены палитры.

   Ни одного hex в файле, кроме золота/серебра/бронзы у плашек мест: токенов для
   них в системе нет, а заводить три новых ради одной строки — лишнее.
   Классы, которые создаёт JS (js/play.js, js/play_chat.js): .aa-play__pip,
   .aa-play__member (+ -ava, -name, .aa-badge), .aa-play__msg (+ -av, -body, -who,
   -text, -del), .aa-play__ava, .aa-play__rank, .aa-play__who-chip, .aa-play__user.
   ============================================================================ */

.aa-play {
    --aa-ic-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M5 15V5.5A1.5 1.5 0 0 1 6.5 4H15'/%3E%3C/svg%3E");
    /* Замок на кнопке join, когда приём в очередь закрыт владельцем (.aa-play__btn.is-locked). */
    --aa-ic-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
    --aa-r:    var(--radius-md);
    --aa-pad:  26px;
    --aa-line: var(--color-border-subtle);
    --aa-art-stage: url('../../assets/images/bg/towers.png');
    --aa-art-duel:  url('../../assets/images/bg/aa-loading.webp');
    padding-bottom: 56px;
    min-height: 60vh;
}
.aa-play [hidden] { display: none !important; }
/* На широких экранах сцена выходит за общий контейнер сайта (1760px): поля
   страницы 40px вместо 112px, блоки шире (владелец, 2026-09-11). */
@media (min-width: 1700px) { .aa-play { margin-inline: calc(-1 * clamp(1rem, 3vw, 2rem) - 40px); } }

.aa-play__sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.aa-play__banner {
    margin: 0 0 14px; padding: 10px 14px; border-radius: var(--aa-r);
    background: var(--color-warning-soft); border: 1px solid var(--color-warning-border);
    color: var(--color-warning); font-size: var(--text-sm);
}
.aa-play__banner code { font-family: var(--font-mono); }
.aa-play__notice {
    margin: 0 0 14px; padding: 10px 14px; border-radius: var(--aa-r);
    background: var(--color-info-soft); border: 1px solid var(--color-info-border);
    color: var(--color-text-default); font-size: var(--text-sm);
}
.aa-play__notice.is-err { background: var(--color-danger-soft); border-color: var(--color-danger-border); }
.aa-play__offline {
    display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 10px 14px;
    border-radius: var(--aa-r); background: var(--color-danger-soft); border: 1px solid var(--color-danger-border);
    color: var(--color-text-default); font-size: var(--text-sm);
}
.aa-play__offline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); animation: aa-play-pulse 1.4s ease-in-out infinite; }

/* ── Сетка ───────────────────────────────────────────────────────────────── */
/* Колонка чата шире прежних 336px примерно на 15% (решение владельца): в 336px
   строка сообщения ломалась после трёх-четырёх слов, а с добавленным значком
   группы ник и время переставали помещаться в одну строку. Забираем разницу у
   левой колонки — она текучая (minmax(0, 1fr)) и ужимается сама.
   Ниже 1100px правило перекрыто одноколоночным: на телефоне чат и так во всю
   ширину, и отнимать там нечего. */
.aa-play__grid { display: grid; grid-template-columns: minmax(0, 1fr) 386px; gap: 18px; align-items: stretch; }
.aa-play--nochat .aa-play__grid { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .aa-play__grid { grid-template-columns: minmax(0, 1fr); } }

.aa-play__panel {
    position: relative;
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--aa-r);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .045);
    overflow: hidden;
}

/* ── Ярус 1. Кто вы ──────────────────────────────────────────────────────── */
.aa-play__head {
    position: relative; isolation: isolate;
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    min-height: 124px; padding: 22px var(--aa-pad);
    border-bottom: 1px solid var(--aa-line);
}
.aa-play__head::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--color-bg-surface-2) 92%, transparent) 0%,
            color-mix(in srgb, var(--color-bg-surface-2) 40%, transparent) 34%,
            transparent 100%),
        linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--color-bg-surface-2) 45%, transparent)),
        var(--color-bg-surface-2) var(--aa-art-stage) center 42% / cover no-repeat;
    filter: saturate(1.35) contrast(1.05);
}
.aa-play__medal { position: relative; flex: 0 0 auto; width: 78px; height: 78px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); }
.aa-play__medal img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.aa-play__medal b {
    position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
    padding: 2px 7px; border-radius: 999px; white-space: nowrap;
    background: var(--color-bg-base); border: 1px solid var(--color-border-strong);
    font: 700 11px/1.3 var(--font-display); color: var(--color-text-strong); letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}
.aa-play__id { display: grid; gap: 3px; min-width: 0; }
.aa-play__id-name { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: .02em; color: var(--color-text-strong); line-height: 1.1; overflow-wrap: anywhere; }
.aa-play__id-meta { font-size: 12px; color: var(--color-text-muted); }
.aa-play__id-meta b { color: var(--color-text-default); font-weight: 500; }
.aa-play__stat { display: grid; gap: 4px; margin-left: auto; text-align: right; justify-items: end; }
.aa-play__stat u { text-decoration: none; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.aa-play__stat b { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .aa-play__stat { margin-left: 0; text-align: left; justify-items: start; } }

.aa-play__chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums;
    background: var(--color-bg-surface-4); color: var(--color-text-default);
}
.aa-play__chip--up   { background: var(--color-success-soft); color: var(--color-success); }
.aa-play__chip--dn   { background: var(--color-danger-soft);  color: var(--color-danger); }
.aa-play__chip--warn { background: var(--color-warning-soft); color: var(--color-warning); }

/* ── Ярус 2. Дорожка шагов ───────────────────────────────────────────────── */
.aa-play__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; background: var(--color-bg-surface-1); border-bottom: 1px solid var(--aa-line); }
.aa-play__st { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px var(--aa-pad); min-width: 0; border-right: 1px solid var(--aa-line); }
.aa-play__st:last-child { border-right: 0; }
.aa-play__st i {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--color-border-strong); color: var(--color-text-muted);
    font: 700 12px/1 var(--font-display); font-style: normal;
}
.aa-play__st div { display: grid; gap: 2px; min-width: 0; }
.aa-play__st b { font-size: 13px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.aa-play__st span { font-size: 11.5px; color: var(--color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-play__st.is-done i { border-color: var(--color-success-border); background: var(--color-success-soft); color: var(--color-success); }
.aa-play__st.is-done b { color: var(--color-text-default); }
.aa-play__st.is-on { background: var(--color-bg-surface-2); }
.aa-play__st.is-on i { border-color: var(--color-primary-500); background: var(--color-primary-500); color: var(--color-bg-header); }
.aa-play__st.is-on b { color: var(--color-text-strong); }
.aa-play__st.is-on span { color: var(--color-text-muted); }
.aa-play__st.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-primary-500); }
.aa-play__st.is-bad i { border-color: var(--color-danger-border); background: var(--color-danger-soft); color: var(--color-danger); }
.aa-play__st.is-bad::after { background: var(--color-danger); }
@media (max-width: 900px) { .aa-play__track { grid-template-columns: repeat(2, 1fr); } .aa-play__st:nth-child(2) { border-right: 0; } .aa-play__st:nth-child(-n+2) { border-bottom: 1px solid var(--aa-line); } }

/* Подсветка шага по видимому экрану — без JS, по :has(). Экран — [data-screen]:not([hidden]). */
.aa-play:has([data-screen="idle"]:not([hidden]))      .aa-play__st[data-step="1"],
.aa-play:has([data-screen="queued"]:not([hidden]))    .aa-play__st[data-step="1"],
.aa-play:has([data-screen="preparing"]:not([hidden])) .aa-play__st[data-step="3"],
.aa-play:has([data-screen="ready"]:not([hidden]))     .aa-play__st[data-step="3"],
.aa-play:has([data-screen="starting"]:not([hidden]))  .aa-play__st[data-step="4"],
.aa-play:has([data-screen="assembling"]:not([hidden]))  .aa-play__st[data-step="4"],
.aa-play:has([data-screen="ingame"]:not([hidden]))    .aa-play__st[data-step="4"] { background: var(--color-bg-surface-2); }
.aa-play:has([data-screen="idle"]:not([hidden]))      .aa-play__st[data-step="1"] i,
.aa-play:has([data-screen="queued"]:not([hidden]))    .aa-play__st[data-step="1"] i,
.aa-play:has([data-screen="preparing"]:not([hidden])) .aa-play__st[data-step="3"] i,
.aa-play:has([data-screen="ready"]:not([hidden]))     .aa-play__st[data-step="3"] i,
.aa-play:has([data-screen="starting"]:not([hidden]))  .aa-play__st[data-step="4"] i,
.aa-play:has([data-screen="assembling"]:not([hidden]))  .aa-play__st[data-step="4"] i,
.aa-play:has([data-screen="ingame"]:not([hidden]))    .aa-play__st[data-step="4"] i { border-color: var(--color-primary-500); background: var(--color-primary-500); color: var(--color-bg-header); }
.aa-play:has([data-screen="idle"]:not([hidden]))      .aa-play__st[data-step="1"] b,
.aa-play:has([data-screen="queued"]:not([hidden]))    .aa-play__st[data-step="1"] b,
.aa-play:has([data-screen="preparing"]:not([hidden])) .aa-play__st[data-step="3"] b,
.aa-play:has([data-screen="ready"]:not([hidden]))     .aa-play__st[data-step="3"] b,
.aa-play:has([data-screen="starting"]:not([hidden]))  .aa-play__st[data-step="4"] b,
.aa-play:has([data-screen="assembling"]:not([hidden]))  .aa-play__st[data-step="4"] b,
.aa-play:has([data-screen="ingame"]:not([hidden]))    .aa-play__st[data-step="4"] b { color: var(--color-text-strong); }
.aa-play:has([data-screen="idle"]:not([hidden]))      .aa-play__st[data-step="1"]::after,
.aa-play:has([data-screen="queued"]:not([hidden]))    .aa-play__st[data-step="1"]::after,
.aa-play:has([data-screen="preparing"]:not([hidden])) .aa-play__st[data-step="3"]::after,
.aa-play:has([data-screen="ready"]:not([hidden]))     .aa-play__st[data-step="3"]::after,
.aa-play:has([data-screen="starting"]:not([hidden]))  .aa-play__st[data-step="4"]::after,
.aa-play:has([data-screen="assembling"]:not([hidden]))  .aa-play__st[data-step="4"]::after,
.aa-play:has([data-screen="ingame"]:not([hidden]))    .aa-play__st[data-step="4"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-primary-500); }
/* Пройденные шаги: зелёная галочка-цифра. Модалка подтверждения — шаг 2 (она поверх очереди). */
.aa-play:has([data-screen="preparing"]:not([hidden])) .aa-play__st[data-step="1"] i,
.aa-play:has([data-screen="preparing"]:not([hidden])) .aa-play__st[data-step="2"] i,
.aa-play:has([data-screen="ready"]:not([hidden]))     .aa-play__st[data-step="1"] i,
.aa-play:has([data-screen="ready"]:not([hidden]))     .aa-play__st[data-step="2"] i,
.aa-play:has([data-screen="starting"]:not([hidden]))  .aa-play__st[data-step="1"] i,
.aa-play:has([data-screen="assembling"]:not([hidden]))  .aa-play__st[data-step="1"] i,
.aa-play:has([data-screen="starting"]:not([hidden]))  .aa-play__st[data-step="2"] i,
.aa-play:has([data-screen="assembling"]:not([hidden]))  .aa-play__st[data-step="2"] i,
.aa-play:has([data-screen="starting"]:not([hidden]))  .aa-play__st[data-step="3"] i,
.aa-play:has([data-screen="assembling"]:not([hidden]))  .aa-play__st[data-step="3"] i,
.aa-play:has([data-screen="ingame"]:not([hidden]))    .aa-play__st[data-step="1"] i,
.aa-play:has([data-screen="ingame"]:not([hidden]))    .aa-play__st[data-step="2"] i,
.aa-play:has([data-screen="ingame"]:not([hidden]))    .aa-play__st[data-step="3"] i,
.aa-play:has([data-f="accept-modal"]:not([hidden]))   .aa-play__st[data-step="1"] i { border-color: var(--color-success-border); background: var(--color-success-soft); color: var(--color-success); }
.aa-play:has([data-f="accept-modal"]:not([hidden]))   .aa-play__st[data-step="2"] i { border-color: var(--color-primary-500); background: var(--color-primary-500); color: var(--color-bg-header); }
.aa-play:has([data-screen="banned"]:not([hidden]))    .aa-play__st[data-step="1"] i,
.aa-play:has([data-screen="error"]:not([hidden]))     .aa-play__st[data-step="3"] i { border-color: var(--color-danger-border); background: var(--color-danger-soft); color: var(--color-danger); }

/* ── Ярус 3. Экран состояния ─────────────────────────────────────────────── */
/* Фон яруса — бегущая «стена» героев (.aa-play__wall, правила в конце файла).
   Прежний арт-слой (::before с --aa-art-duel) убран: два фона за одним экраном
   спорят друг с другом, а стена живёт под всеми состояниями сразу. */
.aa-play__main { position: relative; isolation: isolate; display: grid; min-height: 372px; }

.aa-play__screen { display: grid; }
.aa-play__screen:not([hidden]) { animation: aa-play-enter var(--duration-base) var(--ease-out) both; }
.aa-play__screen--center { align-content: center; justify-items: center; text-align: center; gap: 14px; padding: 40px var(--aa-pad); }
@keyframes aa-play-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.aa-play__hero { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 28px 40px; align-items: center; padding: 28px var(--aa-pad); }
.aa-play__hero--one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1240px) { .aa-play__hero { grid-template-columns: minmax(0, 1fr); } }
.aa-play__text { display: grid; gap: 12px; min-width: 0; }
.aa-play__side { display: grid; gap: 14px; align-content: center; }

.aa-play__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--color-text-muted); }
.aa-play__eyebrow > b { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.aa-play__eyebrow--live { color: var(--color-primary-400); }
.aa-play__eyebrow--ok   { color: var(--color-success); }
.aa-play__eyebrow--warn { color: var(--color-warning); }
.aa-play__eyebrow--err  { color: var(--color-danger); }
.aa-play__eyebrow--live > b, .aa-play__eyebrow--ok > b { animation: aa-play-pulse 2.4s ease-in-out infinite; }
.aa-play__eyebrow .aa-play__chip { margin-left: 6px; letter-spacing: 0; text-transform: none; }
@keyframes aa-play-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.aa-play__title { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3vw, 38px); font-weight: 700; letter-spacing: .02em; line-height: 1.02; color: var(--color-text-strong); overflow-wrap: anywhere; }
.aa-play__title--sm { font-size: clamp(22px, 2.2vw, 28px); }
.aa-play__sub { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.55; color: var(--color-text-muted); }
.aa-play__sub b { color: var(--color-text-default); font-weight: 500; }
.aa-play__sub--center { text-align: center; }
.aa-play__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.aa-play__note b { color: var(--color-text-default); font-weight: 500; font-variant-numeric: tabular-nums; }
.aa-play__note a { color: var(--color-primary-400); }
.aa-play__empty { margin: 0; font-size: var(--text-xs); color: var(--color-text-subtle); }
.aa-play__lbl { margin: 0; font-size: 12px; font-weight: 600; color: var(--color-text-default); }
.aa-play__lbl span { font-weight: 400; color: var(--color-text-subtle); }
.aa-play__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.aa-play__group { display: grid; gap: 10px; }
.aa-play__group--way2 { margin-top: 10px; }

.aa-play__big { display: grid; gap: 4px; margin: 0; justify-items: end; text-align: right; }
.aa-play__big b { font-family: var(--font-display); font-size: 54px; font-weight: 700; line-height: 1; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.aa-play__big small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-default); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
/* Правая колонка лежит на арте: подписям нужна тень, иначе тонут в льду. */
.aa-play__side .aa-play__note, .aa-play__side .aa-play__roster-head { color: var(--color-text-default); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.aa-play__big--warn b { color: var(--color-warning); }
.aa-play__big--ok b   { color: var(--color-success); }
.aa-play__big--bad b  { color: var(--color-danger); }
.aa-play__big.is-urgent b { color: var(--color-danger); }
.aa-play__hero--one + .aa-play__big, .aa-play__hero > .aa-play__big { align-self: center; }

/* Кнопки */
.aa-play__btn {
    appearance: none; cursor: pointer; border: 0; border-radius: var(--aa-r); text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 26px; font: 600 15px/1 var(--font-sans); color: var(--color-bg-header);
    background: var(--gradient-cta); box-shadow: var(--shadow-md), 0 0 24px -6px var(--color-primary-glow);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast), filter var(--duration-fast);
}
.aa-play__btn:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(1.07); color: var(--color-bg-header); box-shadow: var(--shadow-md), 0 0 30px -4px var(--color-primary-glow); }
.aa-play__btn:active { transform: translateY(1px); }
.aa-play__btn:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: 3px; }
.aa-play__btn--hero { padding: 15px 30px; }
.aa-play__btn--wide { width: 100%; }
.aa-play__btn--ghost { background: transparent; color: var(--color-text-default); border: 1px solid var(--color-border-strong); box-shadow: none; }
.aa-play__btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--color-text-muted); color: var(--color-text-strong); filter: none; box-shadow: none; }
.aa-play__btn:disabled, .aa-play__btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; pointer-events: none; }
.aa-play__btn[data-loading="true"] { opacity: .7; pointer-events: none; }

/* Приём в очередь закрыт владельцем (site_settings.play_queue_open) — кнопка join
   гаснет в нейтральный серый с замком вместо обычного disabled-затемнения золотого
   градиента: игроку сразу видно ПОЧЕМУ кнопка недоступна, не только что недоступна. */
.aa-play__btn.is-locked {
    gap: 8px;
    background: var(--color-bg-surface-3);
    color: var(--color-text-muted);
    box-shadow: none;
}
.aa-play__btn.is-locked::before {
    content: '';
    width: 15px; height: 15px; flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--aa-ic-lock) center / contain no-repeat;
    mask: var(--aa-ic-lock) center / contain no-repeat;
}

.aa-play__ico {
    appearance: none; cursor: pointer; width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--aa-r);
    border: 1px solid var(--color-border-default); background: var(--color-bg-surface-3); color: var(--color-text-muted);
    display: grid; place-items: center; padding: 0;
}
.aa-play__ico:hover { color: var(--color-text-strong); border-color: var(--color-border-strong); }
.aa-play__ico:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: var(--ring-offset); }
.aa-play__ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.aa-play__ico--copy::before { content: ''; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--aa-ic-copy) center / contain no-repeat; mask: var(--aa-ic-copy) center / contain no-repeat; }
.aa-play__ico.is-copied { color: var(--color-success); border-color: var(--color-success-border); font-size: 15px; }
.aa-play__ico.is-copied::before { display: none; }

/* Плитки показателей: углубление заливкой фоном страницы. */
.aa-play__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aa-play__tile { position: relative; display: grid; gap: 5px; padding: 14px 16px; border-radius: var(--aa-r); background: var(--color-bg-base); border: 1px solid var(--color-border-subtle); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .35); min-width: 0; }
.aa-play__tile b { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; color: var(--color-text-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.aa-play__tile b i, .aa-play__tile b span { font: inherit; color: inherit; font-style: normal; }
.aa-play__tile b i { font-size: 15px; color: var(--color-text-subtle); }
.aa-play__tile > span { font-size: 12px; color: var(--color-text-muted); }
.aa-play__tile--hot b { color: var(--color-primary-500); }
.aa-play__tile--muted b { color: var(--color-text-subtle); }

.aa-play__q {
    appearance: none; cursor: help; width: 16px; height: 16px; margin-left: 4px; padding: 0; border-radius: 50%;
    border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text-muted);
    font: 700 10px/1 var(--font-sans); vertical-align: 1px;
}
.aa-play__q:hover, .aa-play__q:focus { color: var(--color-primary-500); border-color: var(--color-primary-500); }
.aa-play__tip {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: var(--z-popover);
    padding: 10px 12px; border-radius: var(--aa-r); background: var(--color-bg-surface-3);
    border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-xl);
    font-size: 12px; line-height: 1.45; color: var(--color-text-default);
}
.aa-play__q:hover + .aa-play__tip, .aa-play__q:focus + .aa-play__tip { display: block; }

/* Полосы прогресса. Очередь — восемь сегментов, по одному на игрока. */
.aa-play__bar { position: relative; height: 8px; border-radius: 4px; background: var(--color-bg-surface-4); overflow: hidden; }
.aa-play__bar--tall { height: 10px; max-width: 360px; }
.aa-play__bar-fill { display: block; height: 100%; width: 0; background: var(--color-primary-500); border-radius: inherit; transition: width var(--duration-slow) var(--ease-out); }
.aa-play__bar-fill--warn { background: var(--color-warning); }
/* Очередь: сплошная тонкая полоса, как у таймера подключения (выбор владельца
   из пяти вариантов, макет play_queue_bar.html, 2026-09-11). Сколько собрано —
   говорит плитка под ней. Тёмная полупрозрачная дорожка читается на арте. */
.aa-play__bar--slots { height: 8px; border-radius: 4px; background: rgba(8, 10, 14, .55); }
.aa-play__bar--slots .aa-play__bar-fill { border-radius: 4px; box-shadow: 0 0 12px -2px var(--color-primary-glow); }

.aa-play__spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--color-bg-surface-4); border-top-color: var(--color-primary-500); animation: aa-play-spin .9s linear infinite; }
@keyframes aa-play-spin { to { transform: rotate(360deg); } }

/* Строка подключения: замылена до нажатия на глаз. */
.aa-play__secret { display: grid; grid-template-columns: minmax(0, 1fr) 36px 36px; gap: 8px; align-items: center; }
.aa-play__secret-str { display: block; padding: 11px 14px; border-radius: var(--aa-r); background: var(--color-bg-base); border: 1px solid var(--color-border-subtle); font: 13px/1.4 var(--font-mono); color: var(--color-text-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; filter: blur(5px); user-select: none; transition: filter var(--duration-fast); }
.aa-play__secret[data-open="1"] .aa-play__secret-str { filter: none; user-select: all; }
.aa-play__secret[data-open="1"] [data-secret-toggle] { color: var(--color-primary-500); border-color: var(--color-border-accent); }
.aa-play__hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-text-subtle); }
.aa-play__hint kbd { display: inline-block; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--color-border-default); background: var(--color-bg-surface-1); font: 11.5px/1.5 var(--font-mono); color: var(--color-text-muted); }
.aa-play__screen[data-mine="1"] .aa-play__group--way2 { opacity: .6; }

.aa-play__disc > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--color-text-muted); }
.aa-play__disc > summary::-webkit-details-marker { display: none; }
.aa-play__disc > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--duration-fast); }
.aa-play__disc[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.aa-play__disc > summary:hover { color: var(--color-primary-400); }
.aa-play__disc > summary:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: var(--ring-offset); }
.aa-play__pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 28px; margin: 10px 0 0; }
.aa-play__pair { min-width: 0; display: grid; gap: 4px; }
.aa-play__pair dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-subtle); }
.aa-play__pair dd { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.aa-play__pair code { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border-radius: var(--aa-r); background: var(--color-bg-base); border: 1px solid var(--color-border-subtle); font: 12.5px/1.4 var(--font-mono); color: var(--color-text-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-play__pair .aa-play__ico { width: 30px; height: 30px; }

/* Состав сборки: правая колонка экрана, 2×4. Пустой список — блок спрятан.
   Экран без слота (покой, очередь, игра, ошибка, штраф): js/play.js паркует
   блок прямым потомком .aa-play__main, и там он не показывается. */
.aa-play__roster-box:has(.aa-play__roster:empty),
.aa-play__main > .aa-play__roster-box { display: none; }
[data-screen="queued"] .aa-play__roster-head { display: none; }
.aa-play__roster-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 12px; color: var(--color-text-muted); }
.aa-play__roster-head b { color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.aa-play__roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.aa-play__member { display: flex; align-items: center; gap: 10px; padding: 6px 9px; border-radius: var(--aa-r); background: var(--color-bg-base); border: 1px solid var(--color-border-subtle); min-width: 0; }
.aa-play__member-ava { position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; background: var(--color-bg-surface-4); display: grid; place-items: center; font: 600 11px/1 var(--font-sans); color: var(--color-text-muted); text-transform: uppercase; opacity: .55; }
.aa-play__member-ava img { display: block; width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.aa-play__member-ava i { position: absolute; right: -5px; bottom: -5px; width: 14px; height: 14px; background: center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.aa-play__member-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-play__member .aa-badge { flex: 0 0 auto; width: 6px; height: 6px; padding: 0; border-radius: 50%; overflow: hidden; color: transparent; font-size: 0; background: var(--color-bg-surface-4); border: 0; }
.aa-play__member .aa-badge--success { background: var(--color-success); }
.aa-play__member .aa-badge--warning { background: var(--color-danger); }
.aa-play__member.is-in .aa-play__member-ava { opacity: 1; }
.aa-play__member.is-in .aa-play__member-name { color: var(--color-text-strong); }
.aa-play__member.is-me { border-color: var(--color-border-accent); }

/* ── Ярус 4. Последние матчи ─────────────────────────────────────────────── */
.aa-play__sect { padding: 22px var(--aa-pad) 24px; border-top: 1px solid var(--aa-line); }
.aa-play__sect-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.aa-play__sect-head h3 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: .05em; color: var(--color-text-strong); }
.aa-play__sect-head a { font-size: 12.5px; color: var(--color-text-muted); }
.aa-play__sect-head a:hover { color: var(--color-primary-400); }

.aa-play__hist { margin: 0 calc(-1 * var(--aa-pad) + 10px); padding: 0; list-style: none; display: grid; gap: 2px; }
.aa-play__row { display: grid; grid-template-columns: 34px 60px minmax(150px, 1fr) auto auto 64px 64px 64px 92px 44px; align-items: center; gap: 18px; padding: 8px 16px; border-radius: var(--aa-r); color: inherit; text-decoration: none; }
.aa-play__row:hover { background: var(--color-bg-surface-3); color: inherit; }
.aa-play__place { width: 30px; height: 30px; border-radius: var(--aa-r); display: grid; place-items: center; font: 700 13px/1 var(--font-display); color: var(--color-text-muted); background: var(--color-bg-surface-4); }
.aa-play__place--1 { background: rgba(251, 191, 36, .18); color: #fbbf24; }
.aa-play__place--2 { background: rgba(203, 213, 225, .16); color: #cbd5e1; }
.aa-play__place--3 { background: rgba(217, 119, 6, .20); color: #f59e0b; }
.aa-play__place--r { background: transparent; border: 1px dashed var(--color-border-strong); color: var(--color-text-subtle); font-size: 12px; cursor: help; }
.aa-play__port { position: relative; width: 60px; height: 34px; }
.aa-play__port img, .aa-play__port i { display: block; width: 60px; height: 34px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
.aa-play__port i { background: var(--color-bg-base); }
.aa-play__port b { position: absolute; right: -4px; bottom: -5px; min-width: 18px; padding: 0 4px; border-radius: 3px; background: var(--color-bg-base); border: 1px solid var(--color-border-strong); font: 700 10.5px/17px var(--font-display); color: var(--color-text-strong); text-align: center; font-variant-numeric: tabular-nums; }
.aa-play__who-cell { display: grid; gap: 2px; min-width: 0; }
.aa-play__who-cell b { font-size: 14px; font-weight: 500; color: var(--color-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-play__who-cell small { font-size: 11.5px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-play__build, .aa-play__items { display: flex; gap: 3px; }
.aa-play__build img, .aa-play__build i { width: 27px; height: 27px; border-radius: 3px; display: block; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
.aa-play__items { padding-left: 14px; border-left: 1px solid var(--aa-line); }
.aa-play__items img, .aa-play__items i { width: 36px; height: 27px; border-radius: 3px; display: block; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
.aa-play__build i, .aa-play__items i { background: var(--color-bg-base); border: 1px solid var(--color-border-subtle); box-shadow: none; }
.aa-play__num { display: grid; gap: 2px; text-align: right; }
.aa-play__num b { font: 700 15px/1 var(--font-display); color: var(--color-text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aa-play__num b i { font-style: normal; font-weight: 400; font-family: var(--font-sans); font-size: 12px; color: var(--color-text-muted); }
.aa-play__num small { font-size: 10.5px; color: var(--color-text-subtle); white-space: nowrap; }
.aa-play__delta { min-width: 42px; text-align: right; font: 700 15px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-text-subtle); }
.aa-play__delta.is-up { color: var(--color-success); }
.aa-play__delta.is-dn { color: var(--color-danger); }
@media (max-width: 1400px) { .aa-play__row { grid-template-columns: 34px 60px minmax(150px, 1fr) auto 64px 44px; } .aa-play__items, .aa-play__num:nth-of-type(1), .aa-play__num:nth-of-type(2), .aa-play__num:nth-of-type(4) { display: none; } }
@media (max-width: 760px)  { .aa-play__row { grid-template-columns: 34px 60px minmax(0, 1fr) 44px; gap: 12px; } .aa-play__build, .aa-play__num { display: none; } }

/* Справочник внизу сцены. */
.aa-play__foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 14px var(--aa-pad); border-top: 1px solid var(--aa-line); background: var(--color-bg-surface-1); font-size: 12.5px; color: var(--color-text-subtle); }
.aa-play__disc--foot { position: relative; }
.aa-play__disc--foot[open] > summary { color: var(--color-text-strong); }
.aa-play__pop { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: var(--z-popover); width: min(360px, 80vw); padding: 14px 16px; border-radius: var(--aa-r); background: var(--color-bg-surface-3); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-xl); font-size: 12.5px; line-height: 1.5; color: var(--color-text-default); }
.aa-play__pop p { margin: 0; color: var(--color-text-muted); }
.aa-play__pop b { color: var(--color-text-default); }
.aa-play__why { display: grid; gap: 6px; margin: 0 0 10px; }
.aa-play__why dt { font-weight: 600; color: var(--color-text-strong); }
.aa-play__why dd { margin: 0; color: var(--color-text-muted); }
.aa-play__rule { margin-left: auto; }

/* ── Чат ─────────────────────────────────────────────────────────────────── */
.aa-play__chatcol { position: relative; min-height: 640px; }
.aa-play__chatcol > .aa-play__chat { position: absolute; inset: 0; }
@media (max-width: 1100px) { .aa-play__chatcol { min-height: 0; } .aa-play__chatcol > .aa-play__chat { position: static; height: 640px; } }
.aa-play__chat { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
.aa-play__chat-head { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 12px 18px; border-bottom: 1px solid var(--aa-line); position: relative; isolation: isolate; }
.aa-play__chat-head::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .8;
    background:
        linear-gradient(90deg, var(--color-bg-surface-2) 30%, color-mix(in srgb, var(--color-bg-surface-2) 15%, transparent)),
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-bg-surface-2) 50%, transparent)),
        var(--aa-art-duel) 88% 38% / 320% auto no-repeat;
}
.aa-play__chat-head h2 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: .05em; color: var(--color-text-strong); }
.aa-play__online { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-text-muted); }
.aa-play__online i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); }
.aa-play__online b { color: var(--color-text-strong); font-weight: 600; }

/* Аватар с иконкой ранга в углу — один и тот же вид в чате, списке и составе. */
.aa-play__ava { position: relative; flex: 0 0 auto; width: 28px; height: 28px; }
.aa-play__ava img, .aa-play__ava > span { display: block; width: 100%; height: 100%; border-radius: 4px; object-fit: cover; background: var(--color-bg-surface-4); }
.aa-play__ava > span { display: grid; place-items: center; font: 600 12px/1 var(--font-sans); color: var(--color-text-muted); text-transform: uppercase; }
.aa-play__ava i { position: absolute; right: -9px; bottom: -8px; width: 24px; height: 24px; background: center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.aa-play__ava--sm { width: 22px; height: 22px; }
.aa-play__ava--sm i { width: 14px; height: 14px; right: -5px; bottom: -5px; }

/* Кто онлайн: одна строка, лента топ-10 по рейтингу; не помещается — едет по кругу. */
.aa-play__who { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--aa-line); background: var(--color-bg-surface-1); }
.aa-play__who-track { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.aa-play__who-run { display: flex; gap: 6px; width: max-content; min-height: 28px; }
.aa-play__who-track.is-scrolling .aa-play__who-run { animation: aa-play-marquee var(--who-dur, 30s) linear infinite; }
.aa-play__who-track.is-scrolling:hover .aa-play__who-run { animation-play-state: paused; }
@keyframes aa-play-marquee { to { transform: translateX(-50%); } }
.aa-play__who-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--color-bg-surface-3); font-size: 12px; color: var(--color-text-default); white-space: nowrap; }
.aa-play__who-chip.is-me { box-shadow: inset 0 0 0 1px var(--color-border-accent); }
/* Ник в чипе — отдельный span (см. chipNode): цвет группы должен красить только
   имя, а не весь чип вместе с аватаркой. */
.aa-play__who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aa-play__who-chip .aa-play__ava img, .aa-play__who-chip .aa-play__ava > span { border-radius: 999px; }
.aa-play__who-chip .aa-play__ava i { display: none; }
.aa-play__who-btn { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border-radius: 999px; border: 1px solid var(--color-border-default); background: var(--color-bg-surface-3); color: var(--color-text-muted); display: grid; place-items: center; cursor: pointer; }
.aa-play__who-btn:hover { color: var(--color-text-strong); border-color: var(--color-border-strong); }
.aa-play__who-btn:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: var(--ring-offset); }
.aa-play__who-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aa-play__who-btn .ic-chat { display: none; }
.aa-play__chat.is-users .aa-play__who-btn { color: var(--color-primary-400); border-color: var(--color-border-accent); }
.aa-play__chat.is-users .aa-play__who-btn .ic-users { display: none; }
.aa-play__chat.is-users .aa-play__who-btn .ic-chat { display: block; }

/* ── Полоса «стример в эфире» ───────────────────────────────────────────────
   Закреплена над лентой, в историю переписки не попадает. Рисуется только пока
   эфир идёт: без неё у .aa-play__chat ровно четыре строки, и вся раскладка чата
   такая же, какой была. С полосой строк пять, поэтому и шаблон строк, и явная
   строка режима «Участники» (он ложится поверх ленты) сдвигаются на единицу.
   Без этого пятый ребёнок уехал бы в неявную строку и отобрал высоту у ленты. */
.aa-play__chat--stream { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.aa-play__chat--stream .aa-play__users { grid-row: 4; }

/* Углубление — заливка фоном страницы, как у плиток показателей (решение
   владельца по оформлению /play). У панели чата тот же surface-2, что и у
   полосы, поэтому подложка одного с ней тона превратила бы полосу в первое
   сообщение ленты. Выделяем углублением и точкой, без цветной черты слева.

   Полоса — ровно одна строка при любом числе эфиров: карточки сменяют друг
   друга на месте (см. .aa-play__stream-slot), а не выстраиваются списком.
   Раньше высота зависела от числа стримеров, и лента чата под полосой прыгала
   каждый раз, когда кто-то выходил в эфир или заканчивал. */
.aa-play__stream {
    display: flex; align-items: center; gap: 8px; padding: 9px 18px;
    background: var(--color-bg-base);
    border-top: 1px solid var(--aa-line); border-bottom: 1px solid var(--aa-line);
}
.aa-play__stream-dot {
    width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
    background: var(--color-danger); animation: aa-play-pulse 2.4s ease-in-out infinite;
}
/* Стопка карточек. Все они лежат в ОДНОЙ ячейке грида (grid-area: 1 / 1),
   поэтому высота полосы равна высоте одной строки и не меняется ни от числа
   эфиров, ни от того, чья карточка сейчас показана: в момент смены обе карточки
   занимают ту же ячейку, и перекладывать сетку чата браузеру не приходится. */
.aa-play__stream-slot { flex: 1 1 auto; min-width: 0; display: grid; }
/* Скрытая карточка убрана именно visibility, а не одной прозрачностью: при
   opacity: 0 ссылки остались бы в порядке обхода табом и в дереве доступности —
   человек уходил бы фокусом на невидимого стримера.

   Уходящая карточка гаснет первой, приходящая проявляется с задержкой и лишь
   слегка её перехватывает. Ровное перекрестье накладывало ник на ник, и в
   середине перехода строка читалась как двоящийся текст; полная же очередь
   «сначала до нуля, потом с нуля» оставляла строку пустой на пол-мгновения —
   это и есть то самое мигание. Перехват в 0.09 с убирает и то, и другое: обе
   карточки видны только совсем бледными. */
.aa-play__stream-item {
    grid-area: 1 / 1;
    display: flex; align-items: center; gap: 8px; min-width: 0;
    opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.aa-play__stream-item.is-on {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity .28s ease .13s, transform .28s ease .13s, visibility 0s .13s;
}
/* Рамка аватарки (косметика) нарисована тенью и вылезает за габарит — поле
   слева и справа не даёт ей залезть под значок группы и под край полосы. */
.aa-play__stream-ava { margin: 0 3px; }
.aa-play__stream-ava img, .aa-play__stream-ava > span { border-radius: 999px; }
.aa-play__stream-name {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; font-weight: 500; color: var(--color-text-strong); text-decoration: none;
}
.aa-play__stream-name:hover { text-decoration: underline; }
/* Сила стримера: значок ранга и число рейтинга сезона.
   Высота блока (18px значок, 12px цифры) заведомо меньше кнопки «Смотреть»
   (26px), поэтому высота полосы от него не зависит — а она обязана держаться
   постоянной: полоса стоит своей строкой в сетке чата, и её скачок сдвигал бы
   всю ленту переписки.
   flex: 0 0 auto — место отдаётся нику, а не этому блоку; табличные цифры не
   дают ширине плясать при смене «980» на «4218». */
.aa-play__stream-rate {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.aa-play__stream-rate img { width: 18px; height: 18px; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.aa-play__stream-rate b { font-weight: 600; color: var(--color-text-default); }

.aa-play__stream-go {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 10px 0 8px; border-radius: 999px;
    border: 1px solid var(--color-border-accent); background: var(--color-bg-surface-3);
    color: var(--color-primary-400); font-size: 12px; font-weight: 500; text-decoration: none;
}
.aa-play__stream-go:hover { background: var(--color-bg-surface-4); color: var(--color-primary-300); }
.aa-play__stream-go:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: var(--ring-offset); }
.aa-play__stream-go svg { width: 13px; height: 13px; fill: currentColor; }
/* Указатель «эфиров несколько». Размеры точек постоянные, меняются только цвет
   и масштаб: если бы активная точка растягивалась в полоску, ширина всего
   указателя гуляла бы, а вместе с ней — место под ник, и ник перещёлкивал бы
   многоточие туда-сюда на каждой смене. */
.aa-play__stream-pips { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
.aa-play__stream-pip {
    width: 5px; height: 5px; border-radius: 50%; background: var(--color-border-strong);
    /* Та же задержка, что у приходящей карточки: точка и ник переключаются
       одновременно, иначе указатель обгонял бы саму смену. */
    transition: background-color .28s ease .13s, transform .28s ease .13s;
}
.aa-play__stream-pip.is-on { background: var(--color-primary-400); transform: scale(1.3); }
/* Эфиров столько, что точки стали частоколом, — тогда счётчик. Табличные цифры
   держат ширину постоянной при переходе с «9 / 12» на «10 / 12». */
.aa-play__stream-pos {
    flex: 0 0 auto; font-size: 11px; color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
}

.aa-play__chat-body { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.aa-play__chat-state { margin: 0; padding: 10px 18px; font-size: 12px; color: var(--color-text-subtle); }
/* Лента прижата к низу, но при этом обязана листаться. Grid с align-content:end
 * второго не умеет: строки он раскладывает от нижнего края области, и всё, что
 * не поместилось, уезжает ВЫШЕ её начала, в область прокрутки не попадая —
 * scrollHeight оставался равен clientHeight, колесо и полоса не работали вовсе,
 * а вместе с ними молчал и обработчик, подгружающий историю. Во flex-колонке ту
 * же прижимку даёт auto-отступ у первого элемента: пока сообщений мало, он
 * съедает пустоту, а как только они переполняют колонку — обнуляется сам, и
 * прокручивается вся лента целиком. */
.aa-play__msgs { margin: 0; padding: 16px 18px; list-style: none; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; }
.aa-play__msgs > * { flex: 0 0 auto; }
/* Селектор нарочно длиннее нужного: у .aa-play__msg.is-hit ниже свой margin,
 * и без лишнего класса он перебил бы прижимку, стоит подсветиться первому
 * сообщению в ленте. */
.aa-play__chat-body .aa-play__msgs > :first-child { margin-top: auto; }
/* Аватар в сообщении крупнее общего (34px против 28px) — решение владельца:
   в ленте это главный опознавательный знак, и он должен читаться с одного
   взгляда. Ширина колонки равна аватару; значок ранга свисает наружу и в
   раскладке не участвует, зазор 16px его перекрывает. */
.aa-play__msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; }
.aa-play__msg-av { position: relative; width: 34px; height: 34px; border-radius: 4px; background: var(--color-bg-surface-4); object-fit: cover; }
.aa-play__msg-av i { width: 28px; height: 28px; right: -10px; bottom: -9px; }
.aa-play__msg-body { min-width: 0; }
/* Шапка сообщения — ОДНА строка: ник, метка админа, время, крестик удаления.
   Переносов больше нет (было flex-wrap: wrap): со значком группы длинный ник
   выталкивал время на вторую строку, и ник оказывался «над» временем вместо
   того, чтобы стоять с ним рядом. Место отдаётся нику, а он обрезается
   многоточием — остальное в строке короткое и фиксированной длины. */
.aa-play__msg-who { display: flex; gap: 7px; align-items: center; flex-wrap: nowrap; }
.aa-play__msg-who > * { flex: 0 0 auto; }
.aa-play__msg-who .aa-play__nick { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.aa-play__msg-who .aa-play__nick b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Зазор значок → ник: ровно 3px во всех трёх местах чата (решение владельца).
   ⚠️ Собственный отступ компонента (user-group.css) здесь не работает и работать
   не может: этот файл подключён <link>-ом ВНЕ @layer, а бандл лежит в слое
   components — незаслоенное обычное объявление бьёт заслоенное при любой
   специфичности. Расстояние здесь задаёт gap флекс-контейнера, и он у всех трёх
   разный: 7px в шапке сообщения, 8px в чипе бегущей ленты, 10px в списке
   участников. Поэтому отрицательный margin ровно на разницу — он укорачивает
   ТОЛЬКО промежуток до ника, а зазор «аватарка → значок» остаётся штатным. */
.aa-play__msg-who .aa-ugroup  { margin-inline-end: -4px; }   /* 7 - 4 = 3 */
.aa-play__who-chip .aa-ugroup { margin-inline-end: -5px; }   /* 8 - 5 = 3 */
.aa-play__user .aa-ugroup     { margin-inline-end: -7px; }   /* 10 - 7 = 3 */
.aa-play__msg-who b { font-size: 12.5px; color: var(--color-text-strong); }
.aa-play__msg-who time { font-size: 11px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.aa-play__msg.is-mine .aa-play__msg-who b { color: var(--color-primary-400); }
/* Ник с группой красит группа, а не подсветка «это моё сообщение»: принадлежность
   к группе — про человека, и она должна читаться одинаково у всех строк ленты,
   а «моё» и так видно по выравниванию и аватару.
   Цвет берётся переменной из assets/css/components/user-group.css: спорить с двумя
   правилами выше специфичностью пришлось бы каждый раз заново, а так палитра групп
   остаётся в одном файле. */
.aa-play__msg-who b.aa-uname,
.aa-play__msg.is-mine .aa-play__msg-who b.aa-uname { color: var(--aa-uname-color, var(--color-text-strong)); }
.aa-play__rank { display: none; }
.aa-play__rank--adm { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--color-danger-soft); color: var(--color-danger); }
.aa-play__msg-text { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--color-text-default); overflow-wrap: anywhere; white-space: pre-wrap; }
.aa-play__msg-del { appearance: none; cursor: pointer; border: 0; background: transparent; padding: 0 4px; color: var(--color-text-subtle); font-size: 14px; line-height: 1; opacity: 0; }
.aa-play__msg:hover .aa-play__msg-del, .aa-play__msg-del:focus-visible { opacity: 1; }
.aa-play__msg-del:hover { color: var(--color-danger); }

/* Режим участников: поиск и список на месте ленты, высота — та же строка сетки. */
.aa-play__users { display: grid; grid-row: 3; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
.aa-play__chat.is-users .aa-play__chat-body { display: none; }
.aa-play__users-search { padding: 12px 18px; border-bottom: 1px solid var(--aa-line); }
.aa-play__users-search input { width: 100%; height: 36px; padding: 0 12px; border-radius: var(--aa-r); background: var(--color-bg-base); border: 1px solid var(--color-border-default); color: var(--color-text-default); font-size: 13px; }
.aa-play__users-search input:focus { outline: 0; border-color: var(--color-primary-500); }
.aa-play__users-list { margin: 0; padding: 6px 0; overflow-y: auto; list-style: none; min-height: 0; }
.aa-play__user { display: flex; align-items: center; gap: 10px; padding: 6px 18px; font-size: 13px; color: var(--color-text-default); }
.aa-play__user:hover { background: var(--color-bg-surface-3); }
.aa-play__user .aa-play__ava { width: 24px; height: 24px; }
.aa-play__user .aa-play__ava img, .aa-play__user .aa-play__ava > span { border-radius: 999px; }
.aa-play__user .aa-play__ava i { width: 18px; height: 18px; right: -7px; bottom: -6px; }
.aa-play__user b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-play__user.is-me b { color: var(--color-primary-400); }
.aa-play__user small { margin-left: auto; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.aa-play__users-none { margin: 0; padding: 24px 18px; text-align: center; font-size: 13px; color: var(--color-text-subtle); }

.aa-play__chat-foot { padding: 14px 18px; border-top: 1px solid var(--aa-line); background: var(--color-bg-surface-1); }
.aa-play__inp { display: grid; grid-template-columns: minmax(0, 1fr) 36px 42px; gap: 8px; margin: 0; }
.aa-play__inp input { height: 42px; padding: 0 14px; border-radius: var(--aa-r); background: var(--color-bg-base); border: 1px solid var(--color-border-default); color: var(--color-text-default); font-size: 13.5px; }
.aa-play__inp input::placeholder { color: var(--color-text-subtle); }
.aa-play__inp input:focus { outline: 0; border-color: var(--color-primary-500); }
.aa-play__send { appearance: none; cursor: pointer; border: 0; padding: 0; border-radius: var(--aa-r); background: var(--gradient-cta); color: var(--color-bg-header); display: grid; place-items: center; }
.aa-play__send:disabled { opacity: .5; cursor: not-allowed; }
.aa-play__send svg { width: 18px; height: 18px; fill: currentColor; }
.aa-play__chat-err { margin: 8px 0 0; font-size: 12px; color: var(--color-danger); }
/* Медленный режим: обратный отсчёт под полем. Спокойный приглушённый тон, не
   красный, — это не ошибка, а обычное правило темпа. */
.aa-play__slow { margin: 8px 0 0; font-size: 11.5px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

/* ── Эмодзи ──────────────────────────────────────────────────────────────── */
.aa-play__emoji {
    appearance: none; cursor: pointer; padding: 0; border-radius: var(--aa-r);
    background: var(--color-bg-base); border: 1px solid var(--color-border-default);
    color: var(--color-text-muted); display: grid; place-items: center;
}
.aa-play__emoji:hover { color: var(--color-text-strong); border-color: var(--color-border-strong); }
.aa-play__emoji[aria-expanded="true"] { color: var(--color-primary-400); border-color: var(--color-border-accent); }
.aa-play__emoji:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: var(--ring-offset); }
.aa-play__emoji svg { width: 19px; height: 19px; }
/* Панель раскрывается ВВЕРХ от подвала: ниже поля ввода экрана уже нет.
   auto-fill вместо жёсткого числа колонок — на узкой колонке чата и на телефоне
   набор сам перестраивается, а не вылезает за край. */
.aa-play__emo {
    position: absolute; left: 18px; right: 18px; bottom: calc(100% + 6px); z-index: var(--z-dropdown);
    padding: 8px; border-radius: var(--aa-r); max-height: 268px; overflow-y: auto;
    background: var(--color-bg-surface-3); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-xl);
    display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px;
}
.aa-play__emo[hidden] { display: none; }
.aa-play__emo-i {
    appearance: none; border: 0; cursor: pointer; padding: 0; border-radius: 4px;
    background: transparent; height: 32px; font-size: 19px; line-height: 1;
}
.aa-play__emo-i:hover { background: var(--color-bg-surface-4); }
.aa-play__emo-i:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: -2px; }

/* ── Модалка «Матч найден» ───────────────────────────────────────────────── */
.aa-play__modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 20px; }
.aa-play__modal-backdrop { position: absolute; inset: 0; background: rgba(8, 10, 14, .72); backdrop-filter: blur(6px); }
.aa-play__modal-panel { position: relative; width: min(440px, 100%); padding: 30px 32px 28px; border-radius: 8px; background: var(--color-bg-surface-2); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-2xl), inset 0 1px 0 rgba(255, 255, 255, .05); display: grid; gap: 16px; justify-items: center; text-align: center; }
.aa-play__modal-panel .aa-play__title { font-size: 30px; }
.aa-play__ring { position: relative; width: 136px; height: 136px; }
.aa-play__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.aa-play__ring-track { fill: none; stroke: var(--color-bg-surface-4); stroke-width: 8; }
.aa-play__ring-bar { fill: none; stroke: var(--color-primary-500); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 0; transition: stroke-dashoffset .95s linear; filter: drop-shadow(0 0 6px var(--color-primary-glow)); }
.aa-play__ring-n { position: absolute; inset: 0; display: grid; place-items: center; font: 700 44px/1 var(--font-display); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.aa-play__pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.aa-play__pip { width: 30px; height: 8px; border-radius: 2px; background: var(--color-bg-surface-4); }
.aa-play__pip.is-on { background: var(--color-success); }
.aa-play__modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.aa-play__modal-row .aa-play__btn { width: 100%; }
.aa-play__accepted-note { margin: 0; font-size: var(--text-sm); color: var(--color-success); }

/* ── Невысокие экраны (Full HD с панелями браузера — около 930px) ─────────
   Владелец на 2K видит всё, игроки на Full HD листали. Ужимаем вертикаль так,
   чтобы сцена целиком помещалась под шапкой сайта: ниже медаль, дорожка, экран
   состояния и строки матчей; ширина и состав блоков не меняются. */
@media (max-height: 1200px) {
    .aa-play { --aa-pad: 22px; padding-bottom: 8px; margin-top: -10px; }
    /* Подвал поднят вплотную: без прокрутки на Full HD (владелец, 2026-09-11).
       Отступы контейнера и шапки-подвала на этой странице сняты, сам подвал в одну полосу. */
    /* Каркас тянется на 100vh, а у body поля 15px сверху и снизу: подвал уезжал на 30px за край. */
    body:has(.aa-play) .aa-shell { min-height: calc(100vh - 30px); }
    .aa-shell__main:has(.aa-play) { padding-bottom: 0; }
    .container:has(.aa-play) { padding-bottom: 0; }
    body:has(.aa-play) .aa-footer { margin-top: 0; padding: 10px clamp(1rem, 3vw, 2rem); }
    body:has(.aa-play) .aa-footer__inner { gap: 6px 24px; }
    body:has(.aa-play) .aa-footer__legal { flex-direction: row; gap: 14px; }
    body:has(.aa-play) .aa-footer__payments img { max-height: 26px; width: auto; }
    .aa-play__head { min-height: 92px; padding: 12px var(--aa-pad); gap: 18px; }
    .aa-play__medal { width: 58px; height: 58px; }
    .aa-play__medal b { font-size: 10px; padding: 1px 6px; }
    .aa-play__id-name { font-size: 20px; }
    .aa-play__stat b { font-size: 30px; }
    .aa-play__st { padding: 8px var(--aa-pad); }
    .aa-play__main { min-height: 316px; }
    .aa-play__hero { padding: 18px var(--aa-pad); gap: 18px 32px; }
    .aa-play__text { gap: 9px; }
    .aa-play__title { font-size: clamp(26px, 2.6vw, 32px); }
    .aa-play__sub { font-size: 14px; }
    .aa-play__actions { margin-top: 4px; }
    .aa-play__tile { padding: 10px 14px; }
    .aa-play__tile b { font-size: 22px; }
    .aa-play__big b { font-size: 44px; }
    .aa-play__roster { gap: 4px; }
    .aa-play__member { padding: 4px 8px; }
    .aa-play__sect { padding: 10px var(--aa-pad) 8px; }
    .aa-play__sect-head { margin-bottom: 6px; }
    .aa-play__sect-head h3 { font-size: 15px; }
    .aa-play__hist { gap: 0; }
    .aa-play__row { padding: 4px 16px; gap: 14px; }
    .aa-play__port, .aa-play__port img, .aa-play__port i { width: 52px; height: 30px; }
    .aa-play__build img, .aa-play__build i { width: 24px; height: 24px; }
    .aa-play__items img, .aa-play__items i { width: 32px; height: 24px; }
    .aa-play__who-cell b { font-size: 13px; }
    .aa-play__num b { font-size: 14px; }
    .aa-play__foot { padding: 7px var(--aa-pad); }
    .aa-play__chatcol { min-height: 0; }
    .aa-play__chat-head { min-height: 50px; padding: 9px 18px; }
    .aa-play__who { padding: 8px 18px; }
    /* На невысоком экране (а это почти любой ноутбук) лента дороже полосы:
       поджимаем поля. Высота строки от числа эфиров больше не зависит, резать
       тут нечего. */
    .aa-play__stream { padding: 7px 18px; }
    .aa-play__chat-foot { padding: 10px 18px; }
}

/* Ещё ниже (панель закладок, масштаб 110%): вторая ступень плотности. */
@media (max-height: 960px) {
    .aa-play { margin-top: -18px; }
    .aa-play__head { min-height: 82px; padding: 10px var(--aa-pad); }
    .aa-play__medal { width: 52px; height: 52px; }
    .aa-play__id-name { font-size: 18px; }
    .aa-play__stat b { font-size: 26px; }
    .aa-play__st { padding: 6px var(--aa-pad); }
    .aa-play__st i { width: 22px; height: 22px; font-size: 11px; }
    .aa-play__main { min-height: 254px; }
    .aa-play__hero { padding: 14px var(--aa-pad); gap: 14px 28px; }
    .aa-play__text { gap: 7px; }
    .aa-play__title { font-size: clamp(24px, 2.2vw, 28px); }
    .aa-play__tile { padding: 8px 12px; gap: 3px; }
    .aa-play__tile b { font-size: 20px; }
    .aa-play__big b { font-size: 34px; }
    .aa-play__side { gap: 10px; }
    .aa-play__roster { gap: 3px; }
    .aa-play__member { padding: 2px 8px; }
    .aa-play__sect { padding: 8px var(--aa-pad) 6px; }
    .aa-play__sect-head { margin-bottom: 4px; }
    .aa-play__row { padding: 2px 16px; }
    .aa-play__port, .aa-play__port img, .aa-play__port i { width: 48px; height: 27px; }
    .aa-play__build img, .aa-play__build i { width: 22px; height: 22px; }
    .aa-play__items img, .aa-play__items i { width: 29px; height: 22px; }
    .aa-play__foot { padding: 6px var(--aa-pad); }
}

@media (prefers-reduced-motion: reduce) {
    .aa-play__screen, .aa-play__eyebrow > b, .aa-play__offline-dot, .aa-play__stream-dot, .aa-play__who-track.is-scrolling .aa-play__who-run { animation: none !important; }
    .aa-play__who-track { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .aa-play__bar-fill, .aa-play__ring-bar, .aa-play__secret-str { transition: none; }
    /* Стример сменяется мгновенно, без проявления и сдвига: плавный переход тут
       украшение, а человеку с этой настройкой движение у самого края читаемого
       текста мешает. Сама смена раз в 10 секунд остаётся — это не анимация,
       а обновление содержимого. */
    .aa-play__stream-item, .aa-play__stream-pip { transition: none !important; }
    .aa-play__stream-item { transform: none !important; }
}

/* Подтверждение установки кастомной карты перед первым поиском + подсказка про VPN (owner, 2026-09-11) */
.aa-play__confirm { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(8, 10, 14, .74); backdrop-filter: blur(2px); }
.aa-play__confirm[hidden] { display: none; }
.aa-play__confirm-card { width: min(100%, 460px); padding: 20px 24px; border-radius: var(--aa-r); background: var(--color-bg-surface-1); border: 1px solid var(--aa-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.aa-play__confirm-title { margin: 6px 0 8px; font-size: 20px; }
.aa-play__confirm-card .aa-play__sub { max-width: none; font-size: 14px; }
.aa-play__confirm-card .aa-play__sub a { color: var(--color-primary-400); }
.aa-play__confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.aa-play__note--map { margin-top: 14px; max-width: 56ch; }
@media (max-height: 960px) { .aa-play__note--map { display: none; } }
.aa-play__note--vpn { margin-top: 10px; max-width: 60ch; color: var(--color-warning, #d8b25a); }

/* ════════════════════════════════════════════════════════════════════════════
   ВЫКЛАДКА 1 — всё, чего нет на боевом /play.
   Блок идёт последним намеренно: правила ниже перекрывают плотностные
   @media (max-height: …) выше, а не наоборот — специфичность у них одинаковая,
   выигрывает последнее объявление.
   ════════════════════════════════════════════════════════════════════════════ */
.aa-play {
    --aa-col:  560px;   /* правая колонка экрана состояния */
    --aa-gap:  368px;   /* зазор между колонками: в нём видна стена */
    --aa-veil:  85%;    /* плотность вуали над стеной: стена видна примерно на 15% */
    --aa-blur: 3px;     /* размытие стены */
}

/* ── Единая высота яруса и широкая правая колонка ────────────────────────── */
@media (min-width: 1241px) {
    /* Одна высота во всех состояниях: страница не прыгает при переключении. */
    .aa-play__main { height: 452px; min-height: 0; }
    .aa-play__main .aa-play__hero {
        grid-template-columns: minmax(0, 1fr) var(--aa-col);
        column-gap: var(--aa-gap);
        row-gap: 18px;
        align-items: center;
        height: 100%;
        /* Поля одинаковые при любой высоте окна: на высоких мониторах поля 28px
           не давали правой колонке влезть в фиксированную высоту. */
        padding: 18px var(--aa-pad);
    }
    .aa-play__main .aa-play__hero--one { grid-template-columns: minmax(0, 1fr); }
}

/* ── Стена героев под экранами состояния ─────────────────────────────────── */
.aa-play__wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aa-play__wall-in {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    /* Маска гасит альфу плиток у краёв целиком: вуаль сверху даёт 99%, а не 100%,
       и на хорошем мониторе у самого края оставались пиксели картинок. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}
.aa-play__main > .aa-play__screen { position: relative; z-index: 1; }
.aa-play__wall-row { display: flex; flex: 0 0 auto; align-items: center; width: max-content; will-change: transform; }
.aa-play__wall-row > img { flex: 0 0 auto; object-fit: cover; border-radius: var(--radius-xs); display: block; }
/* ⚠️ Размытие живёт НА КАРТИНКАХ, а не на контейнере рядов, хотя интуиция
   подсказывает обратное. Фильтр на движущемся контейнере пересчитывается каждый
   кадр (замер: 43 к/с), а фильтр на неподвижной картинке растеризуется один раз
   в её слой, и анимация ряда остаётся чистым transform (60 к/с). */
.aa-play__wall-row--hero { height: 115px; }
.aa-play__wall-row--hero > img { width: 205px; height: 115px; margin-right: 7px; filter: blur(var(--aa-blur)) contrast(1.02) brightness(0.92); opacity: .9; }
.aa-play__wall-row--ability { height: 51px; }
.aa-play__wall-row--ability > img { width: 51px; height: 51px; margin-right: 10px; filter: blur(var(--aa-blur)) contrast(1.02) saturate(0.95) brightness(0.92); opacity: .9; }
/* Скорости и направления — те же, что у стены на главной. */
.aa-play__wall-row--a { animation: aa-play-wall-right 68s linear infinite; }
.aa-play__wall-row--b { animation: aa-play-wall-left  70s linear infinite; }
.aa-play__wall-row--c { animation: aa-play-wall-right 92s linear infinite; }
.aa-play__wall-row--d { animation: aa-play-wall-left  85s linear infinite; }
.aa-play__wall-row--e { animation: aa-play-wall-right 78s linear infinite; }
@keyframes aa-play-wall-right { from { transform: translateX(0); }         to { transform: translateX(-33.3333%); } }
@keyframes aa-play-wall-left  { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .aa-play__wall-row { animation: none !important; } }

/* Вуаль поверх стены: ровный тон на всю площадь плюс мягкие кромки, чтобы
   размытые плитки не обрывались по линии блока. */
.aa-play__wall::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, var(--color-bg-surface-2) 0, transparent 90px, transparent calc(100% - 90px), var(--color-bg-surface-2) 100%),
        linear-gradient(180deg, var(--color-bg-surface-2) 0, transparent 11%, transparent 89%, var(--color-bg-surface-2) 100%),
        linear-gradient(color-mix(in srgb, var(--color-bg-surface-2) var(--aa-veil), transparent),
                        color-mix(in srgb, var(--color-bg-surface-2) var(--aa-veil), transparent));
}
/* Узкие экраны: колонки схлопываются в одну, стене там места нет. */
@media (max-width: 1240px) { .aa-play__wall { display: none; } }

/* ── Блок «Регион» ───────────────────────────────────────────────────────── */
/* Запаркованный блок (экран без слота) прячем — тем же приёмом, что состав. */
.aa-play__main > .aa-play__set { display: none; }
.aa-play__set { display: grid; gap: 14px; align-content: start; min-width: 0; }
.aa-play__set-h { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.aa-play__cap { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.aa-play__set-hint { font-size: 12px; color: var(--color-text-subtle); }

.aa-play__regs { display: grid; gap: 6px; }
.aa-play__reg {
    display: grid; grid-template-columns: minmax(0, 1fr) 118px 130px; align-items: center; gap: 14px;
    padding: 9px 12px; border-radius: var(--aa-r);
    /* Непрозрачная строка: под блоком едет стена, и полупрозрачный фон превратил
       бы 11-пиксельные подписи в кашу. */
    background: var(--color-bg-base); border: 1px solid var(--color-border-subtle);
}
.aa-play__reg.is-off { opacity: .45; }
.aa-play__reg-name { font-size: 13px; font-weight: 500; color: var(--color-text-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-play__reg-free { font-size: 11.5px; color: var(--color-text-subtle); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aa-play__reg-free.is-busy { color: var(--color-warning); }

/* Полоска связи: четыре столбика и подпись. */
.aa-play__net { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aa-play__bars { display: flex; align-items: flex-end; gap: 2px; height: 13px; flex: 0 0 auto; }
.aa-play__bars i { width: 3px; border-radius: 1px; background: var(--color-bg-surface-4); }
.aa-play__bars i:nth-child(1) { height: 5px; }
.aa-play__bars i:nth-child(2) { height: 8px; }
.aa-play__bars i:nth-child(3) { height: 10.5px; }
.aa-play__bars i:nth-child(4) { height: 13px; }
.aa-play__net--good i:nth-child(-n+4) { background: var(--color-success); }
.aa-play__net--ok   i:nth-child(-n+3) { background: var(--color-success); }
.aa-play__net--soso i:nth-child(-n+2) { background: var(--color-warning); }
.aa-play__net--bad  i:nth-child(-n+1) { background: var(--color-danger); }
.aa-play__net--none i { background: var(--color-bg-surface-4); }   /* замер не прошёл — не тревога */
.aa-play__net--wait i { animation: aa-play-wave 1.1s ease-in-out infinite; }
.aa-play__net--wait i:nth-child(2) { animation-delay: .12s; }
.aa-play__net--wait i:nth-child(3) { animation-delay: .24s; }
.aa-play__net--wait i:nth-child(4) { animation-delay: .36s; }
@keyframes aa-play-wave { 0%, 100% { background: var(--color-bg-surface-4); } 50% { background: var(--color-text-muted); } }
/* Подпись пинга. min-width:0 + ellipsis — страховка от наезда на соседнюю
   колонку: подпись состояния «идёт замер» длинная и в разных языках разная
   («поиск серверов…» 102px, «looking for servers…» 113px, «buscando
   servidores…» 125px при 12.5px), а колонка связи на узкой панели даёт 88px.
   Без min-width:0 элемент flex не ужимается ниже своего текста и вылезал
   поверх «свободно N из M» (замер 22.09.2026: перехлёст глифов 12.2×9.0 px
   на 1366 и 10.5×9.0 на 1440). Числа («24 мс») не режутся ни на одной ширине. */
.aa-play__net b {
    font-size: 12.5px; font-weight: 500; color: var(--color-text-default);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.aa-play__net--wait b, .aa-play__net--soon b { color: var(--color-text-subtle); }
.aa-play__net--soso b { color: var(--color-warning); }
.aa-play__net--bad  b { color: var(--color-danger); }
.aa-play__net--none b { color: var(--color-text-subtle); }
/* Замер не прошёл — подпись красным: в такой регион игрок не подключится,
   и поиск с ним закрыт (владелец, 18.09.2026). Палочки остаются серыми,
   без перечёркивания — по просьбе владельца. */
.aa-play__net--none b { color: var(--color-danger); }

@media (prefers-reduced-motion: reduce) { .aa-play__net--wait i { animation: none; } }


/* Счётчик очереди: только число, без ников. */
.aa-play__cnt { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--aa-r); background: var(--color-bg-base); border: 1px solid var(--color-border-subtle); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .35); }
.aa-play__cnt b { font: 700 30px/1 var(--font-display); color: var(--color-primary-500); font-variant-numeric: tabular-nums; }
.aa-play__cnt span { font-size: 12px; line-height: 1.4; color: var(--color-text-muted); }
.aa-play__cnt span i { display: block; font-style: normal; color: var(--color-text-subtle); }

/* ── Очередь: время и набор переехали в левую колонку ────────────────────── */
.aa-play__queued-foot { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.aa-play__big--left { justify-items: start; text-align: left; }
/* Ряд плиток на экране очереди убран: там теперь стат-блоки (.aa-play__stats). */
[data-screen="queued"] .aa-play__bar--slots { max-width: 420px; }

/* ── Экран подключения: одна команда крупно ──────────────────────────────── */
.aa-play__cmd-wrap { display: grid; gap: 12px; max-width: 560px; }
.aa-play__cmd {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; border-radius: var(--aa-r);
    background: var(--color-bg-base); border: 1px solid var(--color-border-strong);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .35);
    font: 17px/1.45 var(--font-mono); color: var(--color-text-strong);
    overflow-wrap: anywhere; word-break: break-word;
}
.aa-play__cmd > span { flex: 1 1 auto; min-width: 0; user-select: all; transition: filter var(--duration-fast); }
/* Замылено по умолчанию: пароль не должен попадать в стрим и в скриншот.
   Блюр — это CSS, поэтому кнопка копирует строку целиком в любом состоянии. */
.aa-play__cmd-wrap[data-open="0"] .aa-play__cmd > span { filter: blur(7px); user-select: none; pointer-events: none; }
.aa-play__eye { flex: 0 0 auto; appearance: none; border: 0; background: transparent; cursor: pointer; width: 30px; height: 30px; border-radius: var(--aa-r); display: grid; place-items: center; color: var(--color-text-subtle); }
.aa-play__eye:hover, .aa-play__eye:focus-visible { color: var(--color-text-strong); background: var(--color-bg-surface-2); outline: none; }
.aa-play__eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aa-play__eye .off { display: none; }
.aa-play__cmd-wrap[data-open="0"] .aa-play__eye .on { display: none; }
.aa-play__cmd-wrap[data-open="0"] .aa-play__eye .off { display: block; }
.aa-play__copy { width: 100%; }
.aa-play__copy.is-copied { background: var(--color-bg-surface-3); color: var(--color-success); box-shadow: none; }
.aa-play__console { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--color-text-muted); }
.aa-play__console a { color: var(--color-primary-400); }
@media (prefers-reduced-motion: reduce) { .aa-play__cmd > span { transition: none; } }

/* ── Состав: отметка словом ──────────────────────────────────────────────── */
.aa-play__mark { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1; white-space: nowrap; color: var(--color-text-subtle); }
.aa-play__mark::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.aa-play__mark--in  { color: var(--color-success); }
.aa-play__mark--bad { color: var(--color-danger); }

/* ── Звук найденного матча: кнопка с кольцом уровня ──────────────────────────
   Кольцо по окружности показывает громкость, число в углу дублирует её цифрой —
   уровень читается, не открывая панель. Долю дуги считает CSS из --aa-snd-lv
   (ШАГ шкалы 0..10): один шаг = 36deg. Значение ставит PHP при отрисовке и
   дальше правит soundSync в js/play_test.js.

   margin-left: auto — намеренно. Ряд действий узкий (358px на 1440, 302px на
   390) и всё равно переносит кнопку на свою строку; прижатая к правому краю
   колонки, она даёт микшеру всплыть в пустой промежуток между текстом и
   настройками поиска. Стояла бы кнопка слева — панель легла бы на «Начать
   поиск». */
.aa-play__sound {
    appearance: none; cursor: pointer; position: relative; flex: 0 0 auto; margin-left: auto;
    /* Бейдж с числом свисает за круг на 5px (right: -3px плюс 2px обводки), и без
       этого отступа ПРАВАЯ ВИДИМАЯ граница кнопки уезжала за край текстовой
       колонки. Отступ выравнивает именно видимый край, а не бокс кнопки. */
    margin-right: 5px;
    width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
    background: var(--color-bg-surface-2); color: var(--color-primary-400);
    display: grid; place-items: center;
    box-shadow: inset 0 0 0 1px var(--color-border-default), var(--shadow-md);
    transition: background var(--duration-fast), color var(--duration-fast);
}
.aa-play__sound:hover { background: var(--color-bg-surface-3); color: var(--color-primary-300); }
.aa-play__sound:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: var(--ring-offset); }
.aa-play__sound[aria-expanded="true"] { background: var(--color-bg-surface-3); }
/* Ободок 4px = круг минус радиус выреза маски (19 - 15). */
.aa-play__sound-ring {
    position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 0deg,
        var(--color-primary-500) 0deg,
        var(--color-primary-500) calc(var(--aa-snd-lv, 0) * 36deg),
        var(--color-bg-surface-4) calc(var(--aa-snd-lv, 0) * 36deg),
        var(--color-bg-surface-4) 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 15px, #000 15px);
            mask: radial-gradient(circle, transparent 0 15px, #000 15px);
}
.aa-play__sound svg { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.aa-play__sound .aa-play__sound-off { display: none; }
.aa-play__sound-num {
    position: absolute; right: -3px; bottom: -3px;
    min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 8px;
    background: var(--color-bg-surface-4); color: var(--color-text-strong);
    font: 700 10px/15px var(--font-sans); font-variant-numeric: tabular-nums; text-align: center;
    box-shadow: 0 0 0 2px var(--color-bg-surface-1);
}
/* Ноль: кольцо гаснет целиком (--aa-snd-lv = 0), иконка перечёркнута. */
.aa-play__sound.is-off { color: var(--color-text-subtle); }
.aa-play__sound.is-off .aa-play__sound-on { display: none; }
.aa-play__sound.is-off .aa-play__sound-off { display: block; }
.aa-play__sound.is-off .aa-play__sound-num { color: var(--color-text-muted); }

/* ── Микшер громкости (поповер у кнопки) ────────────────────────────────────
   Один узел на страницу, ставится по координатам документа — как меню игрока
   (.aa-play__menu ниже), поэтому position: absolute, а не fixed: при прокрутке
   панель едет вместе с кнопкой и не отрывается от неё.
   Внутри ОДНА настройка — громкость. Список мелодий и тумблер «проигрывать
   звук» жили здесь до 2026-09-21, пока владелец не забраковал новые мелодии;
   их стили удалены вместе с разметкой, мёртвых правил тут остаться не должно.

   Размеры собраны в переменные: владелец 2026-09-21 попросил весь регулятор
   на 20% меньше первого макета, и пересчитывать их удобнее в одном месте.
     --aa-snd-h     длина хода (жёлоб), 156 → 125
     --aa-snd-w     ширина жёлоба,       34 → 27
     --aa-snd-thumb длина ручки вдоль хода
     --aa-snd-knob  ширина ручки поперёк хода */
.aa-play__sndp {
    --aa-snd-h: 125px;
    --aa-snd-w: 27px;
    --aa-snd-thumb: 10px;
    --aa-snd-knob: calc(var(--aa-snd-w) - 3px);
    --aa-snd-fill-c: var(--color-primary-500);
    position: absolute; z-index: var(--z-popover);
    width: 86px; max-width: calc(100vw - 24px); box-sizing: border-box;
    padding: 10px 8px 8px; border-radius: var(--aa-r);
    background: var(--color-bg-surface-2); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-xl);
    display: grid; justify-items: center; gap: 5px;
}
.aa-play__sndp[hidden] { display: none; }
/* На нуле оранжевого в жёлобе быть не должно вовсе. */
.aa-play__sndp.is-off { --aa-snd-fill-c: var(--color-bg-surface-4); }

.aa-play__sndp-h {
    margin: 0; text-align: center;
    font: 600 10px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-text-muted);
}
/* Крупная цифра уровня. Табличные цифры — иначе колонка дёргается по ширине
   при перетаскивании. Читалке она не нужна: значение объявляет сам ползунок. */
.aa-play__sndp-num {
    font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1;
    color: var(--color-text-strong); font-variant-numeric: tabular-nums;
}
.aa-play__sndp.is-off .aa-play__sndp-num { color: var(--color-text-subtle); }

/* Жёлоб: сам паз рисует ::before обёртки, ползунок лежит поверх, засечки —
   колонкой справа. Обёртка шире паза ровно на колонку засечек. */
.aa-play__sndp-fader {
    position: relative;
    width: calc(var(--aa-snd-w) + 11px); height: var(--aa-snd-h);
}
.aa-play__sndp-fader::before {
    content: ''; position: absolute; left: 0; top: 0;
    width: var(--aa-snd-w); height: 100%;
    border-radius: calc(var(--aa-snd-w) / 2);
    background: var(--color-bg-surface-1);
    box-shadow: inset 0 0 0 1px var(--color-border-default);
}
/* Засечки по числу шагов: 11 штук от нуля до десятки. Поля сверху и снизу —
   половина длины ручки, чтобы крайние засечки совпали с её крайними
   положениями. Крайние ярче: это концы шкалы. */
.aa-play__sndp-ticks {
    position: absolute; right: 0; width: 6px;
    top: calc(var(--aa-snd-thumb) / 2); bottom: calc(var(--aa-snd-thumb) / 2);
    display: flex; flex-direction: column; justify-content: space-between;
    pointer-events: none;
}
.aa-play__sndp-ticks i { display: block; height: 1px; border-radius: 1px; background: var(--color-border-default); }
.aa-play__sndp-ticks i:first-child, .aa-play__sndp-ticks i:last-child { background: var(--color-text-subtle); }

/* ⚠️ Ползунок — НАСТОЯЩИЙ input[type=range], просто повёрнутый на -90°.
   Вертикальным его делает именно поворот, а не writing-mode: тот понимают
   только свежие Chrome/Firefox/Safari, а поворот работает везде. Начало
   координат в левом верхнем углу, поэтому translateX(-длина) до поворота
   возвращает элемент на место: ноль шкалы оказывается ВНИЗУ.
   Заливка жёлоба — градиент на дорожке; граница считается от центра ручки,
   иначе заливка обгоняла бы её на половину длины ручки. */
.aa-play__sndp-range {
    --aa-snd-fill: calc(var(--aa-snd-thumb) / 2 + (100% - var(--aa-snd-thumb)) * var(--aa-snd-lv, 0) / 10);
    position: absolute; left: 0; top: 0; margin: 0;
    width: var(--aa-snd-h); height: var(--aa-snd-w);
    appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer;
    transform-origin: 0 0;
    transform: rotate(-90deg) translateX(calc(-1 * var(--aa-snd-h)));
}
.aa-play__sndp-range:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: var(--ring-offset); }
.aa-play__sndp-range::-webkit-slider-runnable-track {
    height: var(--aa-snd-knob); border-radius: calc(var(--aa-snd-knob) / 2);
    background: linear-gradient(90deg,
        var(--aa-snd-fill-c) 0, var(--aa-snd-fill-c) var(--aa-snd-fill),
        transparent var(--aa-snd-fill), transparent 100%);
}
.aa-play__sndp-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: var(--aa-snd-thumb); height: var(--aa-snd-knob); border-radius: calc(var(--aa-snd-thumb) / 2);
    margin-top: 0; border: 0; background: var(--color-text-strong);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
.aa-play__sndp-range::-moz-range-track {
    height: var(--aa-snd-knob); border-radius: calc(var(--aa-snd-knob) / 2);
    background: linear-gradient(90deg,
        var(--aa-snd-fill-c) 0, var(--aa-snd-fill-c) var(--aa-snd-fill),
        transparent var(--aa-snd-fill), transparent 100%);
}
.aa-play__sndp-range::-moz-range-thumb {
    width: var(--aa-snd-thumb); height: var(--aa-snd-knob); border-radius: calc(var(--aa-snd-thumb) / 2);
    border: 0; background: var(--color-text-strong);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}

/* «0 — без звука»: подпись под шкалой вместо отдельного выключателя. */
.aa-play__sndp-hint { margin: 0; text-align: center; font-size: 10px; line-height: 1.3; color: var(--color-text-subtle); }

/* «Не сохранилось за аккаунтом» — приглушённая строка, а не красная тревога:
   в этой вкладке настройка уже работает. */
.aa-play__sndp-err { margin: 0; text-align: center; font-size: 10px; line-height: 1.3; color: var(--color-text-subtle); }
.aa-play__sndp-err[hidden] { display: none; }

/* Узкий экран: палец крупнее мыши — кнопка и паз шире, длина хода та же,
   поэтому высота панели не меняется. */
@media (max-width: 560px) {
    .aa-play__sound { width: 42px; height: 42px; }
    .aa-play__sound-ring {
        -webkit-mask: radial-gradient(circle, transparent 0 17px, #000 17px);
                mask: radial-gradient(circle, transparent 0 17px, #000 17px);
    }
    .aa-play__sound svg { width: 19px; height: 19px; }
    .aa-play__sndp { width: 94px; --aa-snd-w: 32px; }
}

/* ── Предупреждения (нет связи, недокачанная карта) ──────────────────────── */
.aa-play__warn {
    display: grid; gap: 4px; max-width: 60ch; padding: 10px 12px; border-radius: var(--aa-r);
    background: var(--color-warning-soft); border: 1px solid var(--color-warning-border);
    color: var(--color-text-default); font-size: 13px; line-height: 1.45;
}
.aa-play__warn b { color: var(--color-warning); }
.aa-play__warn a { color: var(--color-primary-400); text-decoration: underline; text-underline-offset: 2px; }

/* ── Инструкция перед первой игрой ───────────────────────────────────────── */
.aa-play__guide { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 20px; }
.aa-play__guide[hidden] { display: none; }
.aa-play__guide-bd { position: absolute; inset: 0; background: rgba(8, 10, 14, .74); backdrop-filter: blur(4px); }
.aa-play__guide-card {
    position: relative; width: min(780px, 100%); max-height: 88vh;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    border-radius: 8px; background: var(--color-bg-surface-2); border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-2xl), inset 0 1px 0 rgba(255, 255, 255, .05); overflow: hidden;
}
.aa-play__guide-card:focus { outline: none; }
.aa-play__guide-head { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--aa-line); }
.aa-play__guide-head h2 { margin: 0; flex: 1 1 auto; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--color-text-strong); }
.aa-play__guide-prog { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aa-play__guide-pips { display: flex; gap: 4px; }
.aa-play__guide-pips i { width: 22px; height: 4px; border-radius: 2px; background: var(--color-bg-surface-4); }
.aa-play__guide-pips i.is-on { background: var(--color-primary-500); }
.aa-play__guide-pips i.is-done { background: var(--color-success); }
.aa-play__guide-body { padding: 14px 22px 18px; display: grid; gap: 8px; align-content: start; overflow-y: auto; }
.aa-play__guide-foot { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-top: 1px solid var(--aa-line); background: var(--color-bg-surface-1); }
.aa-play__guide-foot .aa-play__note { margin-left: auto; text-align: right; }

.aa-play__step { border-radius: var(--aa-r); background: var(--color-bg-base); border: 1px solid var(--color-border-subtle); }
.aa-play__step.is-now { border-color: var(--color-border-accent); background: var(--color-bg-surface-1); }
.aa-play__step-h { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.aa-play__step.is-done .aa-play__step-h { cursor: pointer; }
.aa-play__step-num {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--color-border-strong); color: var(--color-text-muted); font: 700 12px/1 var(--font-display);
}
.aa-play__step.is-now .aa-play__step-num { border-color: var(--color-primary-500); background: var(--color-primary-500); color: var(--color-bg-header); }
.aa-play__step.is-done .aa-play__step-num { border-color: var(--color-success-border); background: var(--color-success-soft); color: var(--color-success); }
.aa-play__step-h b { flex: 1 1 auto; font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.aa-play__step.is-now .aa-play__step-h b, .aa-play__step.is-done .aa-play__step-h b { color: var(--color-text-strong); }
.aa-play__step-h span:last-child { font-size: 12px; color: var(--color-text-subtle); }
.aa-play__step.is-done .aa-play__step-h span:last-child { color: var(--color-success); }
/* Раскрыт ровно один шаг: остальные — строка заголовка. */
.aa-play__step-b { display: none; padding: 0 14px 14px 50px; }
.aa-play__step.is-now .aa-play__step-b { display: grid; gap: 10px; }
.aa-play__step-b p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-text-muted); }
.aa-play__step-b p b { color: var(--color-text-default); font-weight: 500; }
.aa-play__step-b a { color: var(--color-primary-400); }
.aa-play__step-b kbd { display: inline-block; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--color-border-default); background: var(--color-bg-surface-1); font: 11.5px/1.5 var(--font-mono); color: var(--color-text-default); }
.aa-play__ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aa-play__way { padding: 10px 12px; border-radius: var(--aa-r); background: var(--color-bg-surface-2); border: 1px solid var(--color-border-subtle); }
.aa-play__way u { display: block; text-decoration: none; margin-bottom: 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-subtle); }
.aa-play__way p { font-size: 12.5px; }
.aa-play__ok-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aa-play__ok-line .aa-play__btn { padding: 10px 18px; font-size: 14px; }
.aa-play__check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: var(--color-text-default); }
.aa-play__check input { position: absolute; opacity: 0; width: 0; height: 0; }
.aa-play__box { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--color-border-strong); display: grid; place-items: center; }
.aa-play__box::after { content: '✓'; font: 700 11px/1 var(--font-sans); opacity: 0; }
.aa-play__check input:checked + .aa-play__box { border-color: var(--color-success); color: var(--color-success); }
.aa-play__check input:checked + .aa-play__box::after { opacity: 1; }
.aa-play__check input:focus-visible + .aa-play__box { outline: var(--ring-width) solid var(--ring-color); outline-offset: 2px; }

.aa-play__srvs { display: grid; gap: 6px; }
/* Третья колонка — техническая причина для поддержки: ей нужна ширина под
   «сервер не отвечает», иначе строка обрезается. */
.aa-play__srv { display: grid; grid-template-columns: minmax(113px, 1fr) 130px 190px; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--aa-r); background: var(--color-bg-surface-2); border: 1px solid var(--color-border-subtle); }
.aa-play__srv.is-off { opacity: .5; }
.aa-play__srv-name { font-size: 13px; font-weight: 500; color: var(--color-text-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-play__srv small { font-size: 11.5px; line-height: 1.35; color: var(--color-text-subtle); text-align: right; }
.aa-play__legend { margin: 0; font-size: 11px; line-height: 1.35; color: var(--color-text-subtle); }

/* ── Плотность под Full HD: та же вторая ступень, что у остального файла ─── */
@media (max-height: 1200px) {
    .aa-play__cmd { padding: 12px 14px; font-size: 16.5px; }
    .aa-play__cmd-wrap { gap: 10px; }
    .aa-play__set { gap: 10px; }
    .aa-play__reg { padding: 7px 12px; }
    .aa-play__cnt { padding: 9px 13px; }
    .aa-play__cnt b { font-size: 26px; }
    .aa-play__guide-card { max-height: 92vh; }
    .aa-play__guide-body { padding: 12px 22px 14px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ВЫКЛАДКА 2 — группа и чат с вкладками.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Ярус «Группа» ───────────────────────────────────────────────────────── */
.aa-play__party-head { display: flex; align-items: center; gap: 14px; position: relative; }
.aa-play__party-n { font-size: 12.5px; color: var(--color-text-muted); }
.aa-play__party-n b { color: var(--color-text-strong); font-weight: 500; }
/* Ник лидера бывает длинным: режем его, а не строку счётчика. */
.aa-play__party-n b[data-f="party-lead"] { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

.aa-play__party { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1240px) { .aa-play__party { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .aa-play__party { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aa-play__slot {
    position: relative; display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 8px 10px; border-radius: var(--aa-r);
    background: var(--color-bg-base); border: 1px solid var(--color-border-subtle);
}
.aa-play__slot .aa-play__ava { width: 24px; height: 24px; }
.aa-play__slot-n { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.aa-play__slot-n b { font-size: 12.5px; font-weight: 500; color: var(--color-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-play__slot-n small { font-size: 10.5px; color: var(--color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-play__slot.is-me { border-color: var(--color-border-accent); }
.aa-play__slot.is-lead .aa-play__crown { display: block; }
/* Корона лидера — маской, чтобы красилась токеном, а не картинкой. */
.aa-play__crown {
    display: none; position: absolute; top: -7px; left: 6px; width: 15px; height: 15px; background: var(--color-primary-500);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7l4.5 3.5L12 4l4.5 6.5L21 7l-1.6 11H4.6L3 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7l4.5 3.5L12 4l4.5 6.5L21 7l-1.6 11H4.6L3 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}
.aa-play__slot-x {
    appearance: none; flex: 0 0 auto; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px;
    background: transparent; color: var(--color-text-subtle); cursor: pointer; font: 400 15px/1 var(--font-sans); opacity: 0;
}
.aa-play__slot:hover .aa-play__slot-x, .aa-play__slot-x:focus-visible { opacity: 1; }
.aa-play__slot-x:hover { color: var(--color-danger); background: var(--color-bg-surface-3); }
.aa-play__slot--empty {
    border-style: dashed; justify-content: center; cursor: pointer; color: var(--color-text-subtle);
    font: 12.5px/1 var(--font-sans); background: transparent; appearance: none;
}
.aa-play__slot--empty::before { content: '+'; font: 400 16px/1 var(--font-sans); }
.aa-play__slot--empty:hover { border-color: var(--color-border-accent); color: var(--color-primary-400); }
.aa-play__slot--empty[aria-disabled="true"] { cursor: default; opacity: .5; }
.aa-play__slot--empty[aria-disabled="true"]:hover { border-color: var(--color-border-subtle); color: var(--color-text-subtle); }

/* Ссылка на настройку приглашений: сама настройка живёт в кабинете
   (/cabinet#platform), здесь стоял временный тумблер. */
.aa-play__inv-link { font: 500 12px/1 var(--font-sans); color: var(--color-text-muted); text-decoration: none; border-bottom: 1px dashed var(--color-border-accent); }
.aa-play__inv-link:hover { color: var(--color-primary-400); }
.aa-play__inv-link:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: 3px; }

/* ── Приглашения ─────────────────────────────────────────────────────────── */
.aa-play__inv-btn {
    appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
    background: transparent; border: 1px solid var(--color-border-accent); color: var(--color-primary-400); font: 500 12px/1 var(--font-sans);
}
.aa-play__inv-btn:hover { background: var(--color-bg-surface-3); }
.aa-play__inv-btn u { text-decoration: none; font-variant-numeric: tabular-nums; }
/* Список раскрывается ВВЕРХ: ярус группы у нижнего края панели, а у неё
   overflow:hidden — раскрытый вниз список был бы обрезан. */
.aa-play__invs {
    position: absolute; right: 0; bottom: calc(100% + 10px); z-index: var(--z-dropdown); width: 340px; padding: 10px;
    border-radius: var(--aa-r); background: var(--color-bg-surface-2); border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-xl); display: grid; gap: 8px;
}
.aa-play__inv-card { padding: 12px; border-radius: var(--aa-r); background: var(--color-bg-base); border: 1px solid var(--color-border-subtle); display: grid; gap: 10px; }
.aa-play__inv-card p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--color-text-muted); }
.aa-play__inv-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aa-play__inv-ava { display: flex; }
.aa-play__inv-ava .aa-play__ava { margin-right: -6px; }
.aa-play__inv-ava .aa-play__ava > span, .aa-play__inv-ava .aa-play__ava img { border-radius: 999px; box-shadow: 0 0 0 2px var(--color-bg-base); }
.aa-play__inv-ava .aa-play__ava i { display: none; }
.aa-play__inv-names { min-width: 0; font-size: 12px; color: var(--color-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-play__inv-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aa-play__inv-acts .aa-play__btn { padding: 9px 12px; font-size: 13px; }

/* Всплывашка входящего приглашения — по центру, фон размыт: её нельзя пропустить. */
.aa-play__toast { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 20px; }
.aa-play__toast[hidden] { display: none; }
.aa-play__toast-bd { position: absolute; inset: 0; background: rgba(8, 10, 14, .55); backdrop-filter: blur(3px); }
.aa-play__toast-card {
    position: relative; width: min(380px, 100%); padding: 16px 18px; border-radius: 8px;
    background: var(--color-bg-surface-2); border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-2xl); display: grid; gap: 10px;
}
.aa-play__toast-card .aa-play__cap { color: var(--color-primary-400); }
/* 16px, а не 10: значок ранга выходит за правый край аватара и наезжал на текст. */
.aa-play__toast-who { display: flex; align-items: center; gap: 16px; }
.aa-play__toast-who p { margin: 0; font-size: 13.5px; color: var(--color-text-default); }
.aa-play__toast-members { margin: 0; font-size: 12.5px; color: var(--color-text-muted); overflow-wrap: anywhere; }

/* ── Диалог «Пригласить в группу» ────────────────────────────────────────── */
.aa-play__modal--sm .aa-play__modal-card {
    position: relative; width: min(440px, 100%); padding: 22px 24px; border-radius: 8px;
    background: var(--color-bg-surface-2); border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-2xl); display: grid; gap: 12px;
}
.aa-play__modal--sm h2 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--color-text-strong); }
.aa-play__inp-text {
    width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: var(--aa-r); background: var(--color-bg-base);
    border: 1px solid var(--color-border-strong); color: var(--color-text-strong); font: 13.5px/1.3 var(--font-sans);
}
.aa-play__inp-text:focus { outline: none; border-color: var(--color-border-accent); }
.aa-play__inv-list { display: grid; gap: 4px; max-height: 300px; overflow: auto; }
.aa-play__inv-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--aa-r); background: var(--color-bg-surface-1); }
.aa-play__inv-item b { font-size: 13px; font-weight: 500; color: var(--color-text-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.aa-play__inv-item small { display: block; font-size: 11px; color: var(--color-text-subtle); }
.aa-play__inv-item .aa-play__btn { padding: 6px 12px; font-size: 12.5px; }
.aa-play__inv-item .is-sent { font-size: 12px; color: var(--color-success); white-space: nowrap; }
.aa-play__inv-item .is-off  { font-size: 12px; color: var(--color-text-subtle); white-space: nowrap; }
.aa-play__modal-row--one { grid-template-columns: 1fr; }

/* ── Жалоба ──────────────────────────────────────────────────────────────── */
.aa-play__reasons { display: grid; gap: 5px; }
.aa-play__reason {
    display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: var(--aa-r);
    background: var(--color-bg-base); border: 1px solid var(--color-border-subtle); cursor: pointer;
    font-size: 13px; color: var(--color-text-default);
}
.aa-play__reason input { position: absolute; opacity: 0; width: 0; height: 0; }
.aa-play__reason.is-on { border-color: var(--color-border-accent); color: var(--color-text-strong); }
.aa-play__radio { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--color-border-strong); display: grid; place-items: center; flex: 0 0 auto; }
.aa-play__reason.is-on .aa-play__radio { border-color: var(--color-primary-500); }
.aa-play__reason.is-on .aa-play__radio::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary-500); }
.aa-play__ta {
    width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical; padding: 10px 12px; border-radius: var(--aa-r);
    background: var(--color-bg-base); border: 1px solid var(--color-border-default); color: var(--color-text-default); font: 13px/1.45 var(--font-sans);
}
.aa-play__ta:focus { outline: 0; border-color: var(--color-primary-500); }

/* ── Меню игрока ─────────────────────────────────────────────────────────── */
.aa-play__menu {
    position: absolute; z-index: var(--z-popover); min-width: 210px; padding: 5px; border-radius: var(--aa-r);
    background: var(--color-bg-surface-3); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-xl);
    display: grid; gap: 1px;
}
.aa-play__menu[hidden] { display: none; }
.aa-play__menu-h { padding: 7px 10px 6px; font-size: 12px; color: var(--color-text-subtle); border-bottom: 1px solid var(--aa-line); margin-bottom: 4px; }
.aa-play__menu-h b { display: block; font-size: 13px; color: var(--color-text-strong); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-play__menu button {
    appearance: none; border: 0; background: transparent; cursor: pointer; text-align: left;
    padding: 7px 10px; border-radius: 4px; font: 13px/1.2 var(--font-sans); color: var(--color-text-default);
}
.aa-play__menu button:hover { background: var(--color-bg-surface-4); color: var(--color-text-strong); }
.aa-play__menu button.is-bad:hover { color: var(--color-danger); }

/* ── Чат: вкладки, упоминания, автодополнение, заглушённые ───────────────── */
.aa-play__tabs { display: flex; gap: 4px; }
.aa-play__tab {
    appearance: none; border: 0; cursor: pointer; padding: 6px 11px; border-radius: var(--aa-r);
    background: transparent; color: var(--color-text-muted); font: 600 13px/1 var(--font-sans);
    display: inline-flex; align-items: center; gap: 7px;
}
.aa-play__tab:hover { color: var(--color-text-default); }
.aa-play__tab.is-on { background: var(--color-bg-surface-3); color: var(--color-text-strong); }
.aa-play__tab:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: 2px; }
.aa-play__badge {
    min-width: 18px; padding: 0 5px; border-radius: 999px; font: 700 10.5px/18px var(--font-sans); text-align: center;
    color: var(--color-primary-400); border: 1px solid var(--color-border-accent); font-variant-numeric: tabular-nums;
}
/* Кнопка по умолчанию центрирует текст: длинный ник переносился и вставал по центру. */
.aa-play__nick { appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; min-width: 0; }
.aa-play__nick:hover b { color: var(--color-primary-400); }
.aa-play__nick:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: 2px; }
.aa-play__at { color: var(--color-primary-400); font-weight: 500; }
/* Опознанное упоминание — кнопка: по клику открывается то же меню игрока, что и
 * по нику автора. Сбрасываем оформление кнопки, а цвет повторяем явно — у
 * браузера у кнопки свой (color: buttontext), и наследованием его не снять.
 * white-space наследуем принудительно: у .aa-play__msg-text стоит pre-wrap, а
 * кнопка его сама не подхватывает и склеила бы переносы. */
.aa-play__at--btn { appearance: none; border: 0; background: transparent; padding: 0; margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: var(--color-primary-400); white-space: inherit; cursor: pointer; }
.aa-play__at--btn:hover { color: var(--color-primary-300, var(--color-primary-400)); text-decoration: underline; }
.aa-play__at--btn:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: 2px; border-radius: 3px; }
/* Упомянули тебя — строка подсвечена: в потоке чата это иначе не заметить. */
.aa-play__msg.is-hit { margin: -6px -8px; padding: 6px 8px; border-radius: var(--aa-r); background: color-mix(in srgb, var(--color-primary-500) 11%, transparent); }
.aa-play__hist-line { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; font-size: 12px; color: var(--color-text-subtle); }
.aa-play__hist-line i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-bg-surface-4); border-top-color: var(--color-text-muted); animation: aa-play-spin .9s linear infinite; }
.aa-play__hist-line.is-end i { display: none; }
.aa-play__chat-foot { position: relative; }
.aa-play__ac {
    position: absolute; left: 18px; right: 18px; bottom: calc(100% + 6px); z-index: var(--z-dropdown);
    margin: 0; padding: 5px; list-style: none; border-radius: var(--aa-r);
    background: var(--color-bg-surface-3); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-xl);
    display: grid; gap: 1px;
}
.aa-play__ac[hidden] { display: none; }
.aa-play__ac li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 4px; font-size: 13px; color: var(--color-text-default); cursor: pointer; }
.aa-play__ac li.is-on { background: var(--color-bg-surface-4); color: var(--color-text-strong); }
.aa-play__ac li small { margin-left: auto; color: var(--color-text-subtle); font-size: 11px; }
.aa-play__muted-note { margin: 8px 0 0; font-size: 11.5px; color: var(--color-text-subtle); }
.aa-play__muted-note a { color: var(--color-text-muted); }
.aa-play__user { cursor: pointer; }

/* ── Плотность под Full HD ───────────────────────────────────────────────── */
@media (max-height: 1200px) {
    .aa-play__slot { padding: 6px 9px; }
    .aa-play__toast-card { padding: 14px 16px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ВЫКЛАДКА 3 — выбор регионов и тип поиска.
   Строка региона из подписи превратилась в чекбокс, под ней появился блок
   «Тип поиска», а во время поиска весь блок закрыт замком.
   ════════════════════════════════════════════════════════════════════════════ */

/* Две группы («Регион», «Тип поиска») и счётчик — ячейки одной сетки .aa-play__set. */
.aa-play__set-grp { display: grid; gap: 8px; min-width: 0; }

/* Галочка выбора: одна и та же у строки региона и у плитки типа. */
.aa-play__box {
    width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto;
    border: 1px solid var(--color-border-strong); display: grid; place-items: center;
}
.aa-play__box::after { content: '✓'; font: 700 11px/1 var(--font-sans); opacity: 0; }
.aa-play__reg.is-on .aa-play__box, .aa-play__type.is-on .aa-play__box {
    border-color: var(--color-primary-500); color: var(--color-primary-500);
}
.aa-play__reg.is-on .aa-play__box::after, .aa-play__type.is-on .aa-play__box::after { opacity: 1; }

/* ── Строка региона как кнопка-чекбокс ───────────────────────────────────── */
/* Колонки: галочка · название · пинг · значок группы · слоты. Значок группы
   занимает место только в группе, поэтому его колонка auto, а не фиксированная.
   Минимум колонки названия — 70 + 23 на флаг страны (16 картинка + 7 отступ),
   иначе флаг съел бы подпись и «Германия-1» резалась бы многоточием. */
.aa-play__reg {
    appearance: none; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer;
    grid-template-columns: 16px minmax(93px, 1fr) 104px auto 116px;
}
.aa-play__reg:hover { border-color: var(--color-border-default); }
.aa-play__reg:focus-visible { outline: 2px solid var(--color-border-accent); outline-offset: 2px; }
.aa-play__reg.is-on { border-color: var(--color-border-accent); background: var(--color-bg-surface-1); }
.aa-play__reg.is-on .aa-play__reg-name { color: var(--color-text-strong); }
/* Выключенная машина («скоро») уже приглушена классом is-off — здесь только курсор. */
.aa-play__reg[aria-disabled="true"] { cursor: not-allowed; }
.aa-play__reg[aria-disabled="true"]:hover { border-color: var(--color-border-subtle); }

/* ── Флаг страны перед названием региона ─────────────────────────────────── */
/* Почему картинкой, а не эмодзи (🇩🇪): Windows не поставляет глифы региональных
   индикаторов, и в Chrome/Edge такой «флаг» рисуется двумя буквами «DE» — ровно
   тем текстом, который и так стоит рядом. Готовых иконок стран в репозитории нет,
   а svg в data:uri — приём, уже принятый в этом файле (--aa-ic-copy наверху):
   ни одного лишнего запроса и ничего не надо собирать.

   Флаг рисует ::before ПОДПИСИ, а не отдельный узел: строка региона — грид, и его
   элементы разложены по колонкам поимённо (.aa-play__reg > … { grid-column: N }),
   шестой ребёнок сломал бы раскладку. Псевдоэлемент заодно не виден скринридеру —
   страна уже названа словом в самой подписи, дублировать её нечем.

   Код страны приходит полем country списка регионов (play_hosts_regions_pure в
   includes/GameHosts.php) и попадает в data-country (js/play_test.js renderRegions,
   js/play_test_ui.js renderSrvs). Страны нет или флага для неё здесь не объявлено —
   --aa-flag-on не определён, content берёт запасное none, и псевдоэлемент НЕ
   создаётся вовсе: строка выглядит ровно так же, как до этой правки. */
.aa-play__reg[data-country] .aa-play__reg-name::before,
.aa-play__srv[data-country] .aa-play__srv-name::before {
    content: var(--aa-flag-on, none);
    display: inline-block;
    width: 16px; height: 11px;
    margin-right: 7px;
    vertical-align: -1px;
    border-radius: 2px;
    /* 100% 100% вместо cover: соотношения у флагов разные (3:2 у России, 19:10 у
       США), и cover резал бы им края — у финского флага уехал бы крест. Растяжение
       на пару процентов в рамке 16×11 глазом не ловится, обрезанный край ловится. */
    background: var(--aa-flag) center / 100% 100% no-repeat;
    /* Рамка внутрь: у белых флагов (Финляндия, Польша) иначе не видно края. */
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35);
}
.aa-play__reg[data-country="de"], .aa-play__srv[data-country="de"] {
    --aa-flag-on: '';
    --aa-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23000000'/%3E%3Crect y='1' width='5' height='2' fill='%23dd0000'/%3E%3Crect y='2' width='5' height='1' fill='%23ffce00'/%3E%3C/svg%3E");
}
.aa-play__reg[data-country="fi"], .aa-play__srv[data-country="fi"] {
    --aa-flag-on: '';
    --aa-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Crect width='18' height='11' fill='%23ffffff'/%3E%3Crect y='4' width='18' height='3' fill='%23003580'/%3E%3Crect x='4.5' width='3' height='11' fill='%23003580'/%3E%3C/svg%3E");
}
.aa-play__reg[data-country="sg"], .aa-play__srv[data-country="sg"] {
    --aa-flag-on: '';
    --aa-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect width='36' height='24' fill='%23ffffff'/%3E%3Crect width='36' height='12' fill='%23ed2939'/%3E%3Ccircle cx='8.6' cy='6' r='4.4' fill='%23ffffff'/%3E%3Ccircle cx='10.8' cy='6' r='4.4' fill='%23ed2939'/%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='14.8' cy='3.4' r='.85'/%3E%3Ccircle cx='17.3' cy='5.2' r='.85'/%3E%3Ccircle cx='16.3' cy='8.1' r='.85'/%3E%3Ccircle cx='13.3' cy='8.1' r='.85'/%3E%3Ccircle cx='12.3' cy='5.2' r='.85'/%3E%3C/g%3E%3C/svg%3E");
}
.aa-play__reg[data-country="nl"], .aa-play__srv[data-country="nl"] {
    --aa-flag-on: '';
    --aa-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='6' fill='%23ffffff'/%3E%3Crect width='9' height='2' fill='%23ae1c28'/%3E%3Crect y='4' width='9' height='2' fill='%2321468b'/%3E%3C/svg%3E");
}
.aa-play__reg[data-country="pl"], .aa-play__srv[data-country="pl"] {
    --aa-flag-on: '';
    --aa-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Crect width='8' height='5' fill='%23ffffff'/%3E%3Crect y='2.5' width='8' height='2.5' fill='%23dc143c'/%3E%3C/svg%3E");
}
.aa-play__reg[data-country="us"], .aa-play__srv[data-country="us"] {
    --aa-flag-on: '';
    --aa-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 20'%3E%3Crect width='38' height='20' fill='%23ffffff'/%3E%3Cg fill='%23b22234'%3E%3Crect width='38' height='1.54'/%3E%3Crect y='3.08' width='38' height='1.54'/%3E%3Crect y='6.15' width='38' height='1.54'/%3E%3Crect y='9.23' width='38' height='1.54'/%3E%3Crect y='12.31' width='38' height='1.54'/%3E%3Crect y='15.38' width='38' height='1.54'/%3E%3Crect y='18.46' width='38' height='1.54'/%3E%3C/g%3E%3Crect width='15.2' height='10.77' fill='%233c3b6e'/%3E%3C/svg%3E");
}
/* Скандинавия: Дания в строю с 23.09.2026, Швеция и Норвегия — соседние зоны того же
   провайдера, флаги заведены заранее, чтобы при добавлении машины не чинить на ходу. */
.aa-play__reg[data-country="dk"], .aa-play__srv[data-country="dk"] {
    --aa-flag-on: '';
    --aa-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 28'%3E%3Crect width='37' height='28' fill='%23c8102e'/%3E%3Crect y='12' width='37' height='4' fill='%23ffffff'/%3E%3Crect x='12' width='4' height='28' fill='%23ffffff'/%3E%3C/svg%3E");
}
.aa-play__reg[data-country="se"], .aa-play__srv[data-country="se"] {
    --aa-flag-on: '';
    --aa-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Crect width='16' height='10' fill='%23006aa7'/%3E%3Crect y='4' width='16' height='2' fill='%23fecc00'/%3E%3Crect x='5' width='2' height='10' fill='%23fecc00'/%3E%3C/svg%3E");
}
.aa-play__reg[data-country="no"], .aa-play__srv[data-country="no"] {
    --aa-flag-on: '';
    --aa-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Crect width='22' height='16' fill='%23ba0c2f'/%3E%3Crect y='6' width='22' height='4' fill='%23ffffff'/%3E%3Crect x='6' width='4' height='16' fill='%23ffffff'/%3E%3Crect y='7' width='22' height='2' fill='%2300205b'/%3E%3Crect x='7' width='2' height='16' fill='%2300205b'/%3E%3C/svg%3E");
}

/* Россия остаётся в наборе, хотя машина с country=ru из конфига убрана: строка
   региона без машины не рисуется вовсе, а если машину вернут — флаг уже есть. */
.aa-play__reg[data-country="ru"], .aa-play__srv[data-country="ru"] {
    --aa-flag-on: '';
    --aa-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='6' fill='%23ffffff'/%3E%3Crect y='2' width='9' height='4' fill='%230039a6'/%3E%3Crect y='4' width='9' height='2' fill='%23d52b1e'/%3E%3C/svg%3E");
}

/* Значок «группа: до N мс». Ширина фиксированная, чтобы строки не дёргались,
   когда замер сменяет «проверяю…» на число. */
.aa-play__gpk {
    justify-self: end; display: inline-flex; align-items: center; min-width: 112px; box-sizing: border-box;
    height: 20px; padding: 0 7px; border-radius: 4px; border: 1px solid transparent; background: transparent;
    font-size: 11px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.aa-play__gpk[hidden] { display: none; }
.aa-play__gpk.has-bad  { color: var(--color-danger); }
.aa-play__gpk.has-slow { color: var(--color-warning); }

/* ── Тип поиска: три плитки в ряд ────────────────────────────────────────── */
.aa-play__types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.aa-play__type {
    position: relative; appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; min-width: 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center;
    padding: 9px 12px; border-radius: var(--aa-r);
    /* Непрозрачный фон — та же причина, что у строки региона: под блоком едет стена. */
    background: var(--color-bg-base); border: 1px solid var(--color-border-subtle);
}
.aa-play__type .aa-play__box { grid-row: 1 / span 2; }
.aa-play__type:hover { border-color: var(--color-border-default); }
.aa-play__type:focus-visible { outline: 2px solid var(--color-border-accent); outline-offset: 2px; }
.aa-play__type.is-on { border-color: var(--color-border-accent); background: var(--color-bg-surface-1); }
.aa-play__type b { font-size: 13px; font-weight: 500; color: var(--color-text-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-play__type.is-on b { color: var(--color-text-strong); }
/* Не больше двух строк: причина блокировки содержит чужой ник, а он бывает
   длиной в строку — без ограничения ряд плиток разъезжается по высоте. */
.aa-play__type small {
    font-size: 11px; line-height: 1.35; color: var(--color-text-subtle); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* Плитка закрыта по допуску: причина занимает место подзаголовка и красится
   предупреждением — иначе «у вас 62 матча» читается как обычное пояснение. */
.aa-play__type[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.aa-play__type[aria-disabled="true"]:hover { border-color: var(--color-border-subtle); }
.aa-play__type[aria-disabled="true"] small { color: var(--color-warning); }

/* Знак «?» в углу плитки со своей подсказкой. Отдельный класс от .aa-play__q:
   тот раскрывает соседний .aa-play__tip во всю ширину блока, а здесь пузырь
   должен быть шире плитки и не растягивать сетку — поэтому псевдоэлемент. */
.aa-play__qt {
    position: absolute; top: 8px; right: 9px; width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid var(--color-border-strong); display: grid; place-items: center;
    font: 600 10px/1 var(--font-sans); color: var(--color-text-subtle); cursor: help;
}
.aa-play__qt:hover, .aa-play__qt:focus-visible { color: var(--color-primary-500); border-color: var(--color-primary-500); outline: none; }
.aa-play__qt::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); width: 280px;
    padding: 9px 11px; border-radius: var(--aa-r); background: var(--color-bg-surface-3);
    border: 1px solid var(--color-border-default); box-shadow: var(--shadow-xl);
    color: var(--color-text-default); font: 400 12px/1.45 var(--font-sans); text-align: left;
    white-space: normal; opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out);
    z-index: var(--z-popover);
}
.aa-play__qt::before {
    content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--color-border-default);
    opacity: 0; transition: opacity var(--duration-fast) var(--ease-out);
}
.aa-play__qt[data-side="left"]::after  { left: -8px; }
.aa-play__qt[data-side="right"]::after { right: -8px; }
.aa-play__qt:hover::after, .aa-play__qt:focus-visible::after,
.aa-play__qt:hover::before, .aa-play__qt:focus-visible::before { opacity: 1; }
/* У закрытой плитки клики не проходят, а подсказка нужна — она объясняет, что это за режим. */
.aa-play__type[aria-disabled="true"] .aa-play__qt { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .aa-play__qt::after, .aa-play__qt::before { transition: none; } }

/* ── Настройки закреплены (идёт поиск или их задаёт лидер) ───────────────── */
.aa-play__set.is-locked .aa-play__reg, .aa-play__set.is-locked .aa-play__type { pointer-events: none; opacity: .55; }
.aa-play__lock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-subtle); }
.aa-play__lock::before {
    content: ''; width: 12px; height: 12px; flex: 0 0 auto; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Предупреждение о закрытом поиске стоит в потоке под кнопками — ему нужна
   вся ширина строки действий, иначе оно встаёт рядом с кнопкой узкой полоской. */
.aa-play__warn[data-f="idle-warn"] { max-width: 52ch; font-size: 12.5px; }

/* Плотность под Full HD — та же вторая ступень, что у остального файла. */
@media (max-height: 1200px) {
    .aa-play__set-grp { gap: 6px; }
    .aa-play__type { padding: 7px 10px; }
    .aa-play__types { gap: 5px; }
}

/* ── Мини-карточка игрока в меню по нику ─────────────────────────────────── */
/* Меню с карточкой шире обычного списка действий: в строку статистики влезает
   «рейтинг 4341 · 1042-е место в сезоне», а её перенос выглядел бы как ошибка. */
.aa-play__menu.has-card { width: 260px; min-width: 0; }
.aa-play__card { display: grid; gap: 8px; padding: 9px 10px 10px; border-bottom: 1px solid var(--aa-line); margin-bottom: 4px; }
.aa-play__card-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.aa-play__card-name {
    font-size: 14px; font-weight: 500; color: var(--color-text-strong); min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aa-play__card-stat { margin: 0; font-size: 12px; line-height: 1.35; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* Пока данные грузятся — полоска той же высоты, что и будущая строка: карточка
   не должна подпрыгивать, когда ответ приедет. */
.aa-play__card-stat.is-skel {
    height: 12px; border-radius: 3px; background: var(--color-bg-surface-4);
    animation: aa-play-skel 1.2s ease-in-out infinite;
}
@keyframes aa-play-skel { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .aa-play__card-stat.is-skel { animation: none; } }
/* Медали сезонных наград: готовый inline-SVG с сервера, свой размер задаём здесь. */
.aa-play__card-awards { display: flex; flex-wrap: wrap; gap: 4px; }
.aa-play__card-awards[hidden] { display: none; }
.aa-play__card-awards svg { width: 28px; height: 28px; flex: 0 0 auto; }

/* ── Тултип сезонной награды в мини-карточке ─────────────────────────────────
   Повторяет карточку наград из профиля (.aa-player__award-card в
   css/pages/players.css), но на своих классах и со своим показом: общий
   компонент .aa-tt__bubble здесь не годится — меню игрока само абсолютно
   позиционировано и живёт поверх страницы.
   Показ по :hover И по :focus-within: на сенсорном экране тап ставит фокус,
   и отдельный скрипт под касание не нужен. */
/* flex:0 0 auto переехал сюда со значка: теперь элементом ряда стала обёртка. */
.aa-play__aw { position: relative; display: inline-flex; flex: 0 0 auto; line-height: 0; border-radius: 4px; }
.aa-play__aw:focus-visible { outline: 2px solid var(--color-border-accent); outline-offset: 2px; }
/* Наведённая медаль обязана оказаться над соседями: иначе следующий значок,
   идущий позже в дереве, перекрывает пузырь. */
.aa-play__aw:hover, .aa-play__aw:focus-within { z-index: 2; }

.aa-play__aw-card {
    position: absolute; z-index: 3; width: 184px; padding: 10px 12px 11px;
    display: grid; gap: 5px; text-align: left; white-space: normal;
    border-radius: var(--aa-r); background: var(--color-bg-surface-3);
    border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-xl);
    font-family: var(--font-sans); line-height: 1.3;
    opacity: 0; pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
/* Прижим к краю мини-карточки: у левых медалей — левым краем, у правых — правым. */
.aa-play__aw[data-side="l"] .aa-play__aw-card { left: 0; }
.aa-play__aw[data-side="r"] .aa-play__aw-card { right: 0; }
.aa-play__aw[data-dir="down"] .aa-play__aw-card { top: calc(100% + 6px); transform: translateY(4px); }
.aa-play__aw[data-dir="up"]   .aa-play__aw-card { bottom: calc(100% + 6px); transform: translateY(-4px); }
.aa-play__aw:hover .aa-play__aw-card, .aa-play__aw:focus-within .aa-play__aw-card {
    opacity: 1; transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) { .aa-play__aw-card { transition: none; } }

.aa-play__aw-head {
    font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--color-text-strong);
    padding-bottom: 7px; margin-bottom: 1px; border-bottom: 1px solid var(--color-border-default);
}
.aa-play__aw-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 1.3; }
.aa-play__aw-row i { font-style: normal; color: var(--color-text-muted); }
.aa-play__aw-row b { font-weight: 500; color: var(--color-text-default); font-variant-numeric: tabular-nums; }

/* ── Стат-блок: число крупно, подпись капсом с живой точкой ──────────────────
   Пришёл на место строки «Сейчас в очереди: N» под кнопками и на место плиток
   экрана очереди: одно и то же число в двух разных оформлениях читалось как
   два разных показателя. Точка — тот же язык, что у айброу «очередь открыта». */
/* Ряд — СЕТКА, а не переносимый flex (21.09.2026). Равнение по верху flex не
   спасало: при переносе плитка уезжала на следующую строку целиком, и её число
   оказывалось на 81px ниже соседнего (замер 1440×1000, группа из трёх: ряд
   358.4px против 471.4px содержимого — не хватало 113px). Перенос при этом
   выглядел беспричинным: каждой плитке жёстко отмерялось 143.8px подписью с
   max-width: 23ch, хотя «сейчас играют» просит 125.5px, а справа пустовало
   214.6px. В сетке числа лежат в ОДНОЙ строке треков, поэтому их верхний край
   совпадает всегда; ширину трека назначает содержимое, а не ограничение подписи. */
.aa-play__qstats {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, max-content);
    justify-content: start; align-items: start; column-gap: 26px; row-gap: 18px;
    flex: 1 1 auto; min-width: 0;
}
.aa-play__qstat { position: relative; margin: 0; display: grid; gap: 3px; min-width: 0; }
.aa-play__qstat > b {
    display: inline-block; font-family: var(--font-display); font-size: 28px; font-weight: 700;
    line-height: 1; color: var(--color-text-strong); font-variant-numeric: tabular-nums;
}
/* «/8» рядом с числом — мельче и тише: это предел, а не показатель. */
.aa-play__qstat > b i { font-style: normal; font-size: 15px; color: var(--color-text-subtle); }
.aa-play__qstat > span {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
    color: var(--color-text-muted); overflow-wrap: anywhere;
}
.aa-play__qstat > span > i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--color-success);
    flex: 0 0 auto; animation: aa-play-pulse 2.4s ease-in-out infinite;
}
/* Блок без живого числа (место в очереди) — без точки и спокойнее. */
.aa-play__qstat--calm > b { color: var(--color-text-default); }

/* Обновление числа. Анимируем ТОЛЬКО transform и color: высота строки от них не
   зависит, поэтому соседние блоки не дёргаются. */
.aa-play__qstat > b.is-bump { animation: aa-play-bump .34s var(--ease-out); }
@keyframes aa-play-bump {
    0%   { transform: translateY(-3px) scale(1.08); color: var(--color-primary-400); }
    60%  { transform: none; color: var(--color-primary-400); }
    100% { transform: none; }
}

/* На арте подпись мелкая — ей нужна та же тень, что и остальным мелким строкам. */
.aa-play__side .aa-play__qstat > span, .aa-play__text .aa-play__qstat > span { text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }

@media (prefers-reduced-motion: reduce) {
    .aa-play__qstat > span > i, .aa-play__qstat > b.is-bump { animation: none !important; }
}
@media (max-height: 1200px) {
    .aa-play__qstat > b { font-size: 25px; }
    .aa-play__qstats { gap: 20px; }
}

/* На экране очереди счётчик из блока настроек убран: то же число уже стоит
   слева плиткой «N/8 · могут сыграть с вами», и два одинаковых числа рядом
   читались как два разных показателя. На покое счётчик остаётся. */
[data-screen="queued"] .aa-play__cnt { display: none; }

/* Ограничения ширины у подписи больше нет: с ним каждая плитка занимала ровно
   23ch = 143.8px независимо от текста, и ряд переносился при свободном месте.
   Ширину теперь назначает трек сетки — подпись сама остаётся в одну строку,
   пока строка помещается, и переносится, когда нет.

   Узкая текстовая колонка двухколоночного яруса (≥1241px: на 1440 ей достаётся
   358.4px, на 1280 — 293px) четыре плитки в один ряд не держит: подпись просит
   минимум ширину самого длинного слова, «СЫГРАТЬ» при кегле 11px и трекинге
   .15em — 63px, плюс 14px на точку с зазором, то есть 4 × 77 + 3 × 26 = 386px.
   Поэтому там ряд становится сеткой в ДВЕ равные колонки: числа каждой строки
   стоят на одной линии, а пары «число + подпись» — друг под другом. То же на
   телефоне (≤620px, колонка 302px). Экран покоя (две плитки) это не трогает. */
@media (min-width: 1241px) {
    .aa-play__qstats:not(.aa-play__qstats--idle) {
        grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 620px) {
    .aa-play__qstats:not(.aa-play__qstats--idle) {
        grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Ряд на покое («сейчас в очереди» + «сейчас играют») — тот же трек по
   содержимому, только зазор шире. white-space: nowrap убран: одну строку теперь
   держит сам размер трека, а на узкой панели подпись переносится, а не
   вылезает за край. */
.aa-play__qstats--idle { column-gap: 30px; }

/* ════════════════════════════════════════════════════════════════════════════
   АДАПТИВ 2026-09-15 — ширины 320…2560 без обрезанного и налезающего.
   ────────────────────────────────────────────────────────────────────────────
   Блок стоит ПОСЛЕДНИМ намеренно: у правил ниже та же специфичность, что у
   «Выкладки 1/2» выше, поэтому выигрывает последнее объявление. Порядок ступеней
   сверху вниз: широкий десктоп → средний → планшет → телефон.

   Что чинилось и почему (замеры до правки, локальный прогон playaudit.mjs):
     • 1241–1650: правая колонка экрана состояния держала жёсткие 560px + зазор
       368px, а панель сцены на 1366 даёт всего 916px. Текстовая колонка
       схлопывалась в 0, блок «Регион» уезжал под колонку чата, у экрана
       состояния был жёсткий рост 452px и содержимое ложилось на ярус «Группа».
       Лечение: ширина и зазор стали ТЕКУЧИМИ (проценты от самой сетки, а не от
       окна — так раскладка одинаково верна и без колонки чата), а жёсткая
       высота на этой ступени заменена минимальной.
     • 320–600: блок «Регион», плитки типов поиска, дорожка шагов, ярус «Группа»
       и справочник шире экрана. Лечение — перестроение, а не скрытие: строка
       региона переносится в две строки, плитки типов встают в колонку, дорожка
       шагов идёт списком, слоты группы переносятся сеткой.
   Ничего не спрятано без доступа: все блоки остаются на странице целиком.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Ступень 1. Экран состояния: текучие колонки с 1241px ────────────────── */
/* clamp с ПРОЦЕНТАМИ: процент считается от ширины самой сетки .aa-play__hero,
   то есть от реальной ширины панели сцены. Поэтому правило верно и когда колонки
   чата нет (.aa-play--nochat), и на любом промежуточном размере окна. */
@media (min-width: 1241px) {
    /* Высота яруса на средних ширинах — МИНИМАЛЬНАЯ, а не жёсткая: при жёсткой
       текст экрана покоя (заголовок + подзаголовок + кнопки + счётчик очереди)
       не влезал в 452px и ложился на ярус «Группа». */
    .aa-play__main { height: auto; min-height: 452px; }
    .aa-play__main .aa-play__hero {
        grid-template-columns: minmax(0, 1fr) clamp(340px, 46%, var(--aa-col));
        column-gap: clamp(16px, 14%, var(--aa-gap));
        height: auto;
        min-height: 100%;
    }
}

/* ── Ступень 1a. Широкие экраны: ровно та раскладка, что была до правки ──── */
/* 1900px — порог, с которого 560 + 368 реально помещаются вместе с текстом.
   Проверено замером: на 1700 сцена отдаёт тексту 286px, экран очереди тогда
   перерастает свои 452px на 113px и ложится на ярус «Группа»; на 1900 текстовой
   колонке достаётся 486px и всё сходится. Колонки и зазоры на 1920 и выше те же,
   что были до правки, — вид широкого монитора не меняется. */
/* ⚠️ Высота здесь тоже МИНИМАЛЬНАЯ, а не жёсткая (21.09.2026). Жёсткие 452px
   держались на замере при обычной высоте окна: там кегль числа 25px и зазоры
   20px (@media max-height: 1200px). На мониторе ВЫШЕ 1200px эти послабления не
   применяются, кегль 28px, и экран очереди с тремя показателями просит 479px —
   ярус переливался на 27.0px, а заголовок «Группа» накрывало текстовой колонкой
   на 4.0px (замер 1900×1440 и 2560×1440, группа 2, плитки «могут сыграть» +
   «в очереди» + «сейчас играют»). Перелив невидим при height: auto, поэтому
   высоту яруса задаём ТОЛЬКО через min-height — прыжков между состояниями это
   не добавляет, пока содержимое влезает в 452px. */
@media (min-width: 1900px) {
    .aa-play__main { height: auto; min-height: 452px; }
    .aa-play__main .aa-play__hero {
        grid-template-columns: minmax(0, 1fr) var(--aa-col);
        column-gap: var(--aa-gap);
        height: auto;
        min-height: 100%;
    }
}

/* ── Ступень 2. Блок «Регион»: колонки пинга и слотов ужимаются вместе ───── */
/* Колонок ПЯТЬ (галочка · название · связь · значок группы · слоты) — так их
   объявляет боевое правило выше. Меняем только размеры: проценты вместо жёстких
   104/116, чтобы на узкой панели подпись региона не выдавливалась в ноль.
   Процент считается от ширины самой строки, а строки все одной ширины — значит
   колонки остаются выровненными по вертикали. */
/* Колонке связи отдаём долю пошире (25% вместо 19%, потолок 140 вместо 104):
   лишнее забирается у колонки названия, где на широкой панели пустует под 160px.
   Замер 22.09.2026: «поиск серверов…» умещается целиком с 1650px и на всех
   одноколоночных ширинах (до 1240px), ниже 1370px доля упирается в минимум 88px
   и раскладка там ровно прежняя — название региона уже стоит на полу 83px,
   отбирать у него нечего, и длинная подпись там режется многоточием. */
.aa-play__reg {
    grid-template-columns: 16px minmax(83px, 1fr) clamp(88px, 25%, 140px) 0 clamp(96px, 21%, 116px);
    column-gap: clamp(8px, 2.5%, 14px);
}
/* Значок «связь группы» в одиночной игре стоит [hidden] = display:none, а такие
   элементы в сетке НЕ занимают ячейку: без явной раскладки строка «слоты»
   съезжала в его колонку auto и забирала её ширину, а подпись региона получала
   свой минимум 60px и резалась многоточием («Герман…» на 1366). Раскладываем
   элементы по колонкам поимённо — пустая колонка тогда схлопывается в ноль. */
.aa-play__reg > .aa-play__box      { grid-column: 1; }
.aa-play__reg > .aa-play__reg-name { grid-column: 2; }
/* Значка группы в строке нет — его колонка стоит нулём, но зазор перед ней
   остаётся мёртвым. Отдаём его подписи пинга: ячейка связи занимает 3-4.
   Колонка 4 именно 0, а не auto: на auto растянутая ячейка раздувала бы её
   под свой текст и отбирала ширину у названия региона. */
.aa-play__reg > .aa-play__net      { grid-column: 3 / 5; }
.aa-play__reg > .aa-play__gpk      { grid-column: 4; }
.aa-play__reg > .aa-play__reg-free { grid-column: 5; }
/* В группе колонку занимает значок «группа: до N мс» (112px), и там колонке связи
   хватает прежней доли: иначе название региона («Нидерланды-1» — самое длинное,
   что выдаёт play_hosts_region_label) теряет 32px и режется многоточием на 1920.
   Ниже 1900px правило ни на что не влияет — там строка с значком уже флекс. */
.aa-play__reg:has(.aa-play__gpk:not([hidden])) {
    grid-template-columns: 16px minmax(83px, 1fr) clamp(88px, 19%, 104px) auto clamp(96px, 21%, 116px);
}
.aa-play__reg:has(.aa-play__gpk:not([hidden])) > .aa-play__net { grid-column: 3; }

/* ── Ступень 2a. Типы поиска: сколько плиток влезло, столько и в ряд ─────── */
.aa-play__types { grid-template-columns: repeat(auto-fit, minmax(min(154px, 100%), 1fr)); }
/* Пояснение плитки на узкой колонке занимает больше двух строк — иначе причина
   блокировки («у вас 62 матча из 100») обрывается на середине. */
@media (max-width: 1899px) {
    .aa-play__type small { -webkit-line-clamp: 4; line-clamp: 4; }
}
/* Пузырь подсказки не шире экрана. */
.aa-play__qt::after { width: min(280px, calc(100vw - 52px)); }

/* ── Ступень 2b. Ярус «Группа»: слоты переносятся, а не сжимаются в ноль ── */
/* repeat(auto-fill) вместо жёстких 8/4/2: на широкой панели по-прежнему один ряд
   из восьми (8 × 132 + 7 × 8 = 1112 ≤ панели при 1700+), ниже — перенос. */
.aa-play__party { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

/* ── Ступень 2b2. Состав: две колонки только когда имя и отметка влезают ── */
/* В строке участника отметка словом («ещё не зашёл») не сжимается, и на колонке
   167px имени оставалось 22px. auto-fit: две колонки с 466px и шире, иначе одна. */
.aa-play__roster { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* ── Ступень 2c. Список серверов на экране ошибки ───────────────────────── */
.aa-play__srv {
    grid-template-columns: minmax(0, 1fr) clamp(96px, 24%, 130px) clamp(124px, 34%, 190px);
    column-gap: clamp(8px, 2%, 12px);
}

/* ── Ступень 3. Планшет и ниже (≤1100): чат уже под сценой ──────────────── */
@media (max-width: 1100px) {
    /* Справочник внизу сцены: всплывашка привязана к своей строке и на узком
       экране уезжала вправо за край. Привязываем её к панели целиком. */
    .aa-play__disc--foot { position: static; }
    .aa-play__pop { left: var(--aa-pad); right: var(--aa-pad); width: auto; }
}

/* ── Ступень 4. Узкий планшет / крупный телефон (≤620) ──────────────────── */
@media (max-width: 620px) {
    .aa-play { --aa-pad: 16px; }
    /* Дорожка шагов списком: в двух колонках по 128px подпись «Подтверждение»
       не помещалась даже без переноса и резалась многоточием. */
    .aa-play__track { grid-template-columns: minmax(0, 1fr); }
    .aa-play__st { border-right: 0; border-bottom: 1px solid var(--aa-line); padding: 10px var(--aa-pad); }
    .aa-play__st:last-child { border-bottom: 0; }
    .aa-play__st:nth-child(-n+2) { border-bottom: 1px solid var(--aa-line); }
    .aa-play__st b, .aa-play__st span { white-space: normal; overflow: visible; text-overflow: clip; }
    /* Строка региона в две строки: галочка и подпись сверху, связь и слоты снизу.
       Гриду тут места не хватает (пять колонок в 208px), поэтому строка становится
       переносимым рядом — порядок тот же, ничего не убрано. */
    .aa-play__reg { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 6px; }
    .aa-play__reg-name { flex: 1 1 60%; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; }
    .aa-play__net { flex: 0 0 auto; }
    .aa-play__gpk { flex: 0 0 auto; min-width: 0; }
    .aa-play__reg-free { flex: 1 1 auto; text-align: left; white-space: normal; }
    /* Строка сервера на экране ошибки — тем же приёмом. */
    .aa-play__srv { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; column-gap: 10px; }
    .aa-play__srv-name { grid-column: 1 / -1; white-space: normal; overflow: visible; text-overflow: clip; }
    .aa-play__qstats, .aa-play__qstats--idle { gap: 14px 20px; }
    /* Плитки показателей и состав — в одну колонку не уходят, но гнутся. */
    .aa-play__party { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}

/* ── Ступень 5. Телефон (≤430) ──────────────────────────────────────────── */
@media (max-width: 430px) {
    .aa-play { --aa-pad: 12px; }
    .aa-play__party { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .aa-play__tiles { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); }
    .aa-play__types { grid-template-columns: minmax(0, 1fr); }
    .aa-play__big b { font-size: 42px; }
    .aa-play__cnt b { font-size: 24px; }
}

/* ── Ступень 6. Тап-цели на сенсорных ширинах (≤1100) ───────────────────── */
/* Ниже 1100px страница уже в «мобильной» раскладке, и попадают в неё пальцем.
   Порог уверенного попадания — 32px; на десктопе (мышь) размеры не трогаем,
   чтобы не менять привычный вид. */
@media (max-width: 1100px) {
    .aa-play__inv-link { display: inline-flex; align-items: center; min-height: 32px; }
    .aa-play__disc > summary { min-height: 32px; }
    .aa-play__tab { min-height: 32px; }
    .aa-play__slot { min-height: 34px; }
    /* Знак «?» остаётся 16-пиксельным кружком, но кликабельная зона — 32×32:
       сам элемент растягивается и становится прозрачным, а кружок рисует ::before. */
    .aa-play__q {
        position: relative; width: 32px; height: 32px; margin-left: 0;
        border: 0; background: transparent; color: transparent; vertical-align: middle;
    }
    .aa-play__q::before {
        content: '?'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
        width: 16px; height: 16px; border-radius: 50%;
        border: 1px solid var(--color-border-strong); background: transparent;
        color: var(--color-text-muted); font: 700 10px/14px var(--font-sans); text-align: center;
    }
    .aa-play__q:hover::before, .aa-play__q:focus::before { color: var(--color-primary-500); border-color: var(--color-primary-500); }
}

/* ── Ступень 7. Группа из восьми и значок «связь группы» ────────────────── */
/* Найдено прогоном на ?party=8&invites=2 — состояния «с группой» ломались
   отдельно от одиночных. */

/* 7a. Строка региона со значком «группа: до 46 мс». Значок появляется только в
   группе (в одиночку он [hidden]) и забирает 112px: пять колонок требуют 404px,
   а правая колонка на 1241px даёт 320. Ниже 1700px такая строка переносится в
   две — и подпись региона, и пинг, и слоты остаются целиком.
   :has() здесь уместен: файл уже строит на нём подсветку шагов. */
@media (max-width: 1899px) {
    .aa-play__reg:has(.aa-play__gpk:not([hidden])) {
        display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 6px;
    }
    .aa-play__reg:has(.aa-play__gpk:not([hidden])) .aa-play__reg-name {
        flex: 1 1 55%; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip;
    }
    .aa-play__reg:has(.aa-play__gpk:not([hidden])) .aa-play__net,
    .aa-play__reg:has(.aa-play__gpk:not([hidden])) .aa-play__gpk { flex: 0 0 auto; }
    .aa-play__reg:has(.aa-play__gpk:not([hidden])) .aa-play__reg-free { flex: 1 1 auto; text-align: right; }
}

/* 7b. Шапка яруса «Группа»: заголовок, счётчик состава и ссылка на настройки
   приглашений в одну строку не влезают уже на 480px — переносим, а не режем. */
@media (max-width: 760px) {
    .aa-play__sect-head { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; }
    .aa-play__party-head { flex-wrap: wrap; row-gap: 8px; column-gap: 12px; }
    .aa-play__party-n { white-space: normal; }
    .aa-play__party-n b[data-f="party-lead"] { max-width: 60vw; }
}

/* 7c. Слот участника: имени нужно не меньше 60px, значит всей плитке — 140.
   Иначе на 320px ник и рейтинг схлопывались в 28px и читались по букве. */
@media (max-width: 620px) {
    .aa-play__party { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
}
@media (max-width: 430px) {
    .aa-play__party { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
}

/* ── Ступень 8. Выход за общий контейнер на широких экранах ─────────────── */
/* Найдено прогоном на 1700px (в круглых ширинах эта полоса не проверялась).
   Правило play.css:50 тянет .aa-play наружу отрицательными полями
   calc(-1 * clamp(1rem,3vw,2rem) - 40px) — то есть на 72px в каждую сторону.
   Пока контейнер упирается в свой максимум 1760px, места столько есть; но при
   1700…1869px контейнер ещё уже максимума, и вытянутый блок становится ШИРЕ
   окна: на 1700 сцена занимает 1750px, по 25px с каждой стороны срезает
   body { overflow-x: clip }.
   Задумка правила — «поля страницы 40px вместо 112px». Считаем это буквально:
   ширина = меньшее из 1840px (то, что получалось на 1920+) и «окно минус 80px»,
   отрицательные поля лишь центруют результат. На 1920 и 2560 числа те же, что
   были, — широкий вид не меняется. */
@media (min-width: 1700px) {
    .aa-play {
        width: min(1840px, calc(100vw - 80px));
        margin-inline: calc((100% - min(1840px, calc(100vw - 80px))) / 2);
    }
}

/* ── Ступень 9. Остаток тап-целей на сенсорных ширинах ──────────────────── */
@media (max-width: 1100px) {
    /* Знак «?» бывает и грид-элементом (тогда его ужимает дорожка) — держим 32. */
    .aa-play__q { min-width: 32px; flex: none; }
    .aa-play__eye { width: 32px; height: 32px; }
    .aa-play__inv-btn { min-height: 32px; }
    /* Крестик «убрать из группы» на десктопе появляется по наведению. На сенсоре
       наведения нет — кнопка остаётся невидимой и недоступной, поэтому здесь она
       показана всегда и увеличена до пальца. */
    .aa-play__slot-x { opacity: 1; width: 32px; height: 32px; }
    /* Плитке участника после этого нужно 156px: поля 20 + аватар 24 + зазор 10 +
       имя 70 + крестик 32. */
    .aa-play__party { grid-template-columns: repeat(auto-fill, minmax(min(156px, 100%), 1fr)); }
}

/* ── Ступень 10. Подписи, которые резало многоточием ────────────────────── */
/* Пояснения шагов дорожки («30 секунд на „Принять“», «старт, когда зайдут все 8»)
   стояли на white-space: nowrap с многоточием и обрывались на 1101…1299px —
   именно там, где четыре колонки уже включены, а ширины им ещё не хватает.
   Разрешаем перенос: на 1300+ подписи и так в одну строку, вид не меняется. */
.aa-play__st span { white-space: normal; overflow: visible; text-overflow: clip; }

/* Строка подключения на сенсорных ширинах переносится, а не обрывается:
   на десктопе её отдаёт кнопка «Скопировать», но прочитать глазами тоже надо.
   Только ≤1100 — выше ярус состояния имеет фиксированную высоту. */
@media (max-width: 1100px) {
    .aa-play__secret-str { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
}

/* ── Ступень 11. Значок группы и цвет ника вне чата ──────────────────────────
   Метка группы и цвет ника раньше жили только в правой колонке (лента чата,
   участники, бегущая строка). Разметку для остальных мест страницы даёт
   js/play_test.js (decorBadge / decorNameClass / decorFrameClass) по полям
   group/cos из ответа сервера — здесь только посадка в чужую раскладку.

   ⚠️ ЦВЕТ БЕРЁТСЯ ПЕРЕМЕННОЙ --aa-uname-color, а не классом-цветом напрямую.
   У каждого из этих ников уже есть своё правило color с большей
   специфичностью (.aa-play__member.is-in .aa-play__member-name,
   .aa-play__slot-n b и т.д.), и .aa-uname--vip им проигрывает независимо от
   порядка файлов. Спорить специфичностью пришлось бы в каждом месте заново;
   вместо этого палитра остаётся одна — в assets/css/components/user-group.css
   и user-cosmetics.css, а сюда попадает только имя переменной. Тот же приём,
   что у ленты чата выше. Второе значение var() — прежний цвет этого места,
   поэтому ник без группы выглядит ровно как раньше. */

/* Отступ справа от значка задаёт сам компонент (user-group.css) и рассчитан он
   на ник в сплошном тексте. В строке состава и в слоте группы элементы разведены
   flex-зазором, и два отступа подряд отрывали бы метку от ника — как и в чате,
   гасим свой. В диалоге «Пригласить» значок стоит ВНУТРИ строки с ником (сетка
   там из трёх колонок, четвёртый узел уехал бы на вторую строку), и собственный
   отступ компонента ему как раз нужен — поэтому этой строки здесь нет.
   В карточке игрока зазор ряда великоват для метки, поэтому он задан отдельно. */
.aa-play__member .aa-ugroup,
.aa-play__slot .aa-ugroup { margin-inline-end: -7px; }   /* 10 - 7 = 3 */

/* Мини-карточка: между аватаркой и ником 14px, и метка, поставленная между ними,
   получала бы такой зазор с обеих сторон и читалась бы как отдельный значок, а не
   как метка ЭТОГО ника. Прижимаем её к нику отрицательным полем — сам ряд при
   этом не меняется, потому что общая ширина метки с полями остаётся прежней.
   17.09.2026: справа было -4px, то есть зазор до ника оставался 10px и метка
   всё равно висела отдельно. Теперь -11px — те же 3px, что в чате. */
.aa-play__card-top .aa-ugroup { margin-inline: -4px -11px; }   /* 14 - 11 = 3 */

/* Состав сборки: обычная строка и строка «уже на сервере». */
.aa-play__member-name.aa-uname { color: var(--aa-uname-color, var(--color-text-muted)); }
.aa-play__member.is-in .aa-play__member-name.aa-uname { color: var(--aa-uname-color, var(--color-text-strong)); }

/* Слот состава группы и ник лидера в подписи «1 из 8 · лидер X». */
.aa-play__slot-n b.aa-uname { color: var(--aa-uname-color, var(--color-text-strong)); }
.aa-play__party-n b[data-f="party-lead"].aa-uname { color: var(--aa-uname-color, var(--color-text-strong)); }

/* Ник в шапке сцены (его рисует PHP) и строка диалога «Пригласить». */
.aa-play__id-name.aa-uname { color: var(--aa-uname-color, var(--color-text-strong)); }
.aa-play__inv-item b.aa-uname { color: var(--aa-uname-color, var(--color-text-default)); }

/* Мини-карточка игрока в меню по нику. */
.aa-play__card-name.aa-uname { color: var(--aa-uname-color, var(--color-text-strong)); }

/* Обводка аватарки рисуется box-shadow'ом по контуру САМОГО узла, а у квадратных
   аватарок страницы скругление живёт на вложенной картинке — без этой строки
   вокруг скруглённого аватара стояло бы прямоугольное кольцо. Круглым аватаркам
   состава (border-radius: 999px) ничего добавлять не нужно. */
.aa-play__ava.aa-avaframe { border-radius: 4px; }