/* =========================================================================
   REFIT — новый облик игровых полей (UX-аудит 08.2026, план docs/27).

   ВЕСЬ файл скоуплен html[data-ui="refit"]. Атрибут ставит анти-мигающий
   скрипт в <head> (base_no_ws.html.twig) из localStorage 'gp-ui'; тумблер —
   иконка «палитра» в хедере, быстрый способ — ?ui=classic в адресе.
   Поэтому «вернуть прежний облик» = один клик, а не откат коммитов.

   ЧТО СЮДА КЛАДЁМ: общие для всех полей правила облика. Правки конкретного
   поля — в блок «REFIT» в конце <style> его template.html.twig (тоже под
   html[data-ui="refit"]), чтобы стили доски оставались рядом с доской.

   ЗАЧЕМ ВЛОЖЕННОСТЬ: один корневой блок вместо префикса в каждой строке —
   внутри пишется обычный CSS, и правило легко перенести в базу, когда облик
   станет единственным. Нативный CSS nesting, без препроцессора.

   ВНИМАНИЕ СО СПЕЦИФИЧНОСТЬЮ: `html[data-ui="refit"] .x` = (0,2,1) и
   перебивает `.x` (0,1,0), но НЕ перебьёт `.board .x:hover` (0,3,0).
   Если правило не применилось — повтори исходный селектор целиком внутри
   блока, не добавляй !important.
   ========================================================================= */

html[data-ui="refit"] {

    /* ── ФОКУС ВИДЕН ВЕЗДЕ ────────────────────────────────────────────────
       Аудит: ни в одном из 40 полей нет :focus-visible, а три поля фокус
       ещё и активно гасят outline:none на своём единственном поле ввода.
       Здесь — общий пол для всего интерактивного внутри поля; снятие
       конкретных outline:none — в REFIT-блоках тех полей. */
    /* ⚠️ Метка доски бывает ДВУХ видов, и селектор обязан знать оба:
       класс `.ca-board` тянет за собой рамку, фон и тень примитива, поэтому
       шесть полей помечены атрибутом `data-board` — иначе их вид изменился бы
       в «классике». Правило, знающее только про класс, проходило мимо них. */
    .game-area :is(button, [role="button"], input, select, textarea, a[href], [tabindex]):focus-visible,
    :is(.ca-board, [data-board]) :is(button, [role="button"], input, select, textarea, a[href], [tabindex]):focus-visible {
        outline: none;
        box-shadow: var(--ca-focus-ring);
        border-radius: 6px;
    }

    /* ── ТАЧ-ЦЕЛЬ КНОПОК ПОЛЯ ─────────────────────────────────────────────
       Кнопки внутри доски (Заново/Пас/Подсказка/выбор уровня) у многих игр
       собраны под десктоп: 28–36px по высоте. Общий пол — не меньше пальца.
       min-height, а не height: подпись в две строки не должна обрезаться. */
    .game-area button:not(.gp-rail__btn):not(.gp-mbar__btn),
    :is(.ca-board, [data-board]) button:not(.gp-rail__btn):not(.gp-mbar__btn) {
        min-height: var(--ca-cell-min);
    }

    /* ── КУРСОР ЧЕСТНЫЙ ───────────────────────────────────────────────────
       Аудит: у шести игр cursor:pointer навешен на доску целиком, и палец
       обещает нажатие там, где ничего не произойдёт. Общее правило: рука —
       признак действия, а не декорация. Точечные снятия — в полях. */
    :is(.ca-board, [data-board]) { cursor: default; }
    .ca-legal, .ca-cell.is-hoverable, [data-cell].is-clickable { cursor: pointer; }

    /* ── ПОЛЕ НЕ РАСТЯГИВАЕТСЯ НА ВЕСЬ ЭКРАН ──────────────────────────────
       `min-height: calc(100vh - 100px)` стоит у 24 полей из 40 — наследство
       времён, когда под доской не было ничего: растяжка просто прибивала фон
       к низу. Рама рефита ставит под доску ряд ходовых действий (frame.inGame),
       и растянутый контейнер выталкивает его ЗА нижнюю кромку — «Поставить»,
       «Пас», «Сдаться» становятся недостижимы без прокрутки, причём страница
       выглядит законченной, и прокручивать никто не догадывается.
       Высоту задаёт содержимое; вертикальное центрирование доски, где оно
       было, делает сама рама (.gp-stage). Поля, снявшие растяжку у себя,
       дублируют это правило — оно с тем же значением, конфликта нет. */
    [class$="-template"], [class*="-template "] { min-height: 0; }

    /* ── ДОСКА ПОМЕЩАЕТСЯ В ПРЯМОЕ ЗРЕНИЕ ─────────────────────────────────
       Предыдущее правило сняло растяжку по высоте; это снимает её по ширине.
       Замеры аудита: на 1280px доски расходились до 19° (манкала 695px), а
       клетки — до 3.9° (крестики-нолики 139px). И то, и другое приходится
       ОСМАТРИВАТЬ: клетка перестаёт быть одним объектом, доска — одной сценой.
       Потолки и обоснование — в токенах `--ca-board-max` / `--ca-cell-max`
       (ca-theme.css). «Вписать в доступную ширину» больше не значит «занять её
       всю»: пустое поле вокруг доски дешевле саккад по ней.

       ⚠️ Правило сужает КОНТЕЙНЕР. Поле, где клетка задана фиксированным px или
       долей вьюпорта, от этого не сожмётся — сетка вылезет за свою же доску.
       Такие поля правят формулу клетки у себя в REFIT-блоке (потолок = токен),
       и приёмка refit-check.mjs ловит переполнение отдельным критерием. */
    :is(.ca-board, [data-board]) {
        max-inline-size: min(100%, var(--ca-board-max));
        margin-inline: auto;
    }

    /* ── У ПОЛЯ ЕСТЬ ПОЛЯ ─────────────────────────────────────────────────
       Ни `.gp-stage`, ни `.game-area` горизонтальных отступов не дают, и всё,
       что шире доски (цепочка слов в «Городах», история, ряды кнопок),
       упиралось прямо в кромку экрана: текст начинался от края стекла.

       ⚠️ ПОЛЕ, СЧИТАЮЩЕЕ РАЗМЕР ОТ `100vw`, ОБЯЗАНО ВЫЧЕСТЬ ЭТИ 24px. Клетка
       вида `min(44px, (100vw - 24px)/9)` про чужой отступ не знает: доска
       останется прежней ширины в сузившемся контейнере и вылезет за кромку
       (поймано живьём на судоку). Надёжнее считать от самой доски —
       `(100% - зазоры)/N`, тогда дорожки делят ровно ту ширину, которая есть.

       Доске, которой отступ не нужен (плотная сетка, где каждый пиксель на
       счету), штатный выход — забрать его обратно:
       `margin-inline: -12px; max-width: calc(100% + 24px)`. */
    @media (max-width: 640px) {
        [class$="-template"], [class*="-template "] { padding-inline: 12px; }
    }

    /* ── ТУМБЛЕР ОБЛИКА В ХЕДЕРЕ ──────────────────────────────────────────
       Подсвечен, когда включён новый облик: иначе непонятно, что смотришь. */
    #gpUiToggle.is-on { color: var(--ca-accent); }
}
