/* ==========================================================================
   Марго Квиз — пред-игра, экран капитана (static/pwa/riddle.html)
   --------------------------------------------------------------------------
   Лист вынесен из <style> страницы (таск 09): кегль назначается ролью, как
   на остальных экранах капитана, — число даёт шкала .mk-captain (tokens.css,
   «Роли кегля»). Роль = ступень, которую предмет уже носил: текст мельче
   body — body-floor, служебная мелочь — caption, знаки на плитке (ячейки
   доски, клавиши, буквы копилки) — score-floor, ступень h3; ячейка доски
   прежде стояла на своей клампе 18–30 px, h3 — ближайшая ступень.
   Литерала кегля здесь нет — стережёт tests/test_captain_layer.py.
   ========================================================================== */

/* ==================================================================
   Пред-игра, экран капитана. Собран из предметов дизайн-системы;
   здесь — только то, чего в системе нет: копилка на 24 буквы,
   доска виселицы и обратный отсчёт до следующей загадки.

   НИ ОДНОГО ЛИТЕРАЛЬНОГО ЦВЕТА И НИ ОДНОГО КЕГЛЯ МИМО ТОКЕНОВ.
   Локальные переменные с префиксом --pg- задают только геометрию.
   ================================================================== */

html { background: var(--bg-0); }
body { margin: 0; }

/* САМАЯ УЗКАЯ ТОЧКА ЭКРАНА — 375 px. Боковые поля каркаса капитана
   (--sp-5, 24 с каждой стороны) забирают там 48 px — ровно ту ширину,
   которой не хватает маске из девяти клеток и ряду из восьми клавиш.
   Ниже 400 отдаём их содержимому; safe-area при этом не теряется. */
@media (max-width: 399px) {
    .mk-captain {
        padding-left: calc(env(safe-area-inset-left, 0px) + var(--sp-4));
        padding-right: calc(env(safe-area-inset-right, 0px) + var(--sp-4));
    }
}

/* Экран капитана — телефон в руке, но открывают его и с ноутбука,
   а каркас в captain.css ширины не ограничивает: там он всегда окно
   целиком. На 1280 px строка загадки растягивалась в двенадцать
   слов, и шкала .mk-captain упиралась в верхнюю границу clamp —
   то есть кегль рос вместе со строкой. Колонка шириной с планшет
   по центру возвращает обе величины к тем, на которых экран
   принимали. На телефоне правило не срабатывает вовсе. */
.mk-captain { max-width: 560px; margin-inline: auto; }

/* Каркас капитана — три строки: шапка, тело, действие. Строки
   закреплены явно, потому что до входа шапка и действие скрыты,
   а скрытый элемент перестаёт быть элементом сетки — без этих
   трёх строк тело уезжало в первую строку и переставало быть 1fr. */
#top-bar { grid-row: 1; }
#main-body { grid-row: 2; }
#act-bar { grid-row: 3; }

/* До входа пустые строки не должны раздавать зазоры. */
body.pg-anon { gap: 0; }

/* ---------- 1 · Вход по PIN ---------- */

.pg-enter {
    margin: auto 0;              /* по центру тела экрана */
    display: flex; flex-direction: column;
    gap: var(--sp-5); text-align: center;
}

.pg-enter__mark {
    width: 64px; height: 64px; margin: 0 auto;
    color: var(--emotion-soft);
}
.pg-enter__mark svg { width: 100%; height: 100%; }

.pg-enter__title {
    margin: 0 0 var(--sp-2);
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--role-title); line-height: 1.1; color: var(--text-hi);
}

.pg-enter__sub { margin: 0; font-size: var(--role-body); color: var(--text-mid); }

/* ---------- 2 · Общий каркас ---------- */

#riddle-screen { flex-direction: column; gap: var(--sp-5); }

.pg-title {
    margin: 0;
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--role-title-floor); line-height: 1.15; color: var(--text-hi);
    text-wrap: balance;
}

.pg-accent { color: var(--emotion-soft); }

/* АБЗАЦЫ ВЛАДЕЛЬЦА ОБЯЗАНЫ ОСТАТЬСЯ АБЗАЦАМИ.
   Загадки, ответы Марго и факты владелец пишет абзацами, с
   переводами строк внутри; выведенные одним блоком, они
   схлопывались в сплошную стену — ровно то, от чего он их
   и переписывал. Перевод строки в источнике становится здесь
   настоящим абзацем: разметки в тексте нет, экранирование
   не ослаблено, источник остаётся обычным текстом, который
   правят руками. 12 px на телефоне читаются как отбивка
   абзаца, а не как случайный пробел. */
.pg-paras { display: flex; flex-direction: column; gap: var(--sp-3); }
.pg-p { margin: 0; }

/* ТРИ БЛОКА ДНЯ ВИДНО КАК ТРИ БЛОКА.
   Владелец переписал тексты абзацами, и день вырос: загадка на
   четыре абзаца, ответ Марго на три, факт ещё на три. Подряд, без
   границ, это одна стена в шестьсот слов — её бросают читать на
   второй трети. Ориентир качества владелец назвал сам: вступление.
   Там работают три вещи — подпись, воздух и левый край; здесь то же
   самое, только блоков три и у каждого своя подпись.

   Воздух между блоками ВДВОЕ больше, чем между абзацами внутри
   блока (24 против 12). Это и есть вся граница: глаз читает
   «новый раздел» по расстоянию раньше, чем успевает прочесть
   подпись. */
.pg-blocks { display: flex; flex-direction: column; gap: var(--sp-5); }
.pg-block {
    display: flex; flex-direction: column; gap: var(--sp-3);
    text-align: left;
}

/* ПОДПИСЬ БЛОКА — ШАПКА РАЗДЕЛА, А НЕ СТРОЧКА СВЕРХУ. Линия добирает
   её до правого края: подпись перестаёт быть частью текста и
   становится его крышкой. Приём один на все три блока, поэтому
   и цвет линии один — кроме голоса Марго, где она цвета эмоции,
   как и её борт.

   ЭМОДЗИ ВЛАДЕЛЬЦА (❓ 💡 🔧) СЮДА НЕ ПЕРЕНОСЯТСЯ, и это не
   вкусовщина: эмодзи и смайлы в графике продукта запрещены прямо
   (`BRAND.md` §8 «Никогда»), а знак Марго «не мимика» (§2.2).
   Смысл его разметки взят целиком — три блока, три подписи; взяты
   и сами слова. Не взяты только картинки. */
.pg-cap { display: flex; align-items: center; gap: var(--sp-3); }
.pg-cap::after {
    content: ""; flex: 1 1 auto;
    border-top: 1px solid var(--glass-border);
}
.pg-cap--emotion::after { border-top-color: var(--emotion-border); }

/* Каркас капитана включает hyphens: auto — там это лечит длинное
   слово в --fs-h2, которое иначе не переносится вовсе. В прозе
   пред-игры кегль вдвое мельче, ни одно слово через строку не лезет,
   а шесть переносов в абзаце превращают загадку в газетную колонку. */
.pg-intro p, .pg-riddle-text, .pg-say, .pg-fact,
.pg-final__lead, .pg-pool__empty { hyphens: manual; }

/* Реплика Марго. Левый борт цветом эмоции — её голос; всё остальное
   на экране им не красится, чтобы «говорит» читалось с одного взгляда. */
.pg-say {
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-4); border-radius: var(--r-md);
    background: var(--glass-bg); border-left: 3px solid var(--emotion);
    text-align: left;
    font-size: var(--role-body); color: var(--text-hi);
}

/* Факт — сноска, а не голос: борта нет, кегль ниже, тушь спокойная.
   Кегль и тушь здесь ровно те же, что у вступления (--fs-small,
   --text-mid), и это не совпадение: вступление владелец назвал
   образцом читаемости, значит эта пара им уже принята. */
.pg-fact {
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-4); border-radius: var(--r-md);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    text-align: left;
    font-size: var(--role-body-floor); color: var(--text-mid);
}

/* ---------- 3 · Интро и обратный отсчёт ---------- */

.pg-intro {
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-4); text-align: center;
}

.pg-intro p { margin: 0; font-size: var(--role-body-floor); color: var(--text-mid); }

/* Вступление переписано словами владельца: заголовок страницы и
   четыре абзаца. Абзац в пять строк по центру читают по диагонали,
   поэтому проза выровнена по левому краю, а обратный отсчёт
   под ней остаётся по центру карточки. */
.pg-intro__copy {
    display: flex; flex-direction: column; gap: var(--sp-3);
    text-align: left;
}

/* Монеты владелец просил золотом. Цвет — токен --gold
   (tokens.css), своего здесь не заводится; само число приходит
   с сервера (`bonus_coins`). */
.pg-gold { color: var(--gold); }

.pg-cd { display: flex; justify-content: center; gap: var(--sp-2); }
.pg-cd-item { display: flex; flex-direction: column; gap: var(--sp-1); }

.pg-cd-num {
    min-width: 54px; padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    font-family: var(--font-num); font-variant-numeric: tabular-nums;
    font-size: var(--role-score); line-height: 1.1; color: var(--text-hi);
}
.pg-cd-num--ready { color: var(--ok); border-color: var(--ok); }

.pg-cd-label {
    font-size: var(--role-label); letter-spacing: var(--ls-label);
    text-transform: uppercase; color: var(--text-dim);
}

/* ---------- 4 · Копилка букв ----------
   Это то, что капитан открывает каждый день, и к шестому дню — предмет
   гордости. Поэтому она не «свалка тегов», а ровный блок: ряд держит
   восемь букв, двадцать четыре складываются в три полные строки.
   Неполный ряд центрируется — отсюда flex, а не grid. */

/* Подпись шапки стала длиннее на слово («копилка букв»), и на узком
   телефоне она рвалась бы между словами, отрывая «БУКВ» от числа.
   Имя команды рядом переносится по замыслу (`components.css` §…),
   поэтому места этой пилюле хватает — ей нужно только не ломаться.
   Правило живёт здесь, а не в дизайн-системе: длина подписи —
   свойство этого экрана, а не всех шапок капитана. */
.mk-captain-bar__score { white-space: nowrap; }

.pg-pool {
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-4); text-align: center;
}

.pg-pool__head {
    display: flex; align-items: baseline; justify-content: center;
    gap: var(--sp-3);
}

.pg-pool__count {
    font-family: var(--font-num); font-variant-numeric: tabular-nums;
    font-size: var(--role-caption); color: var(--emotion-soft);
}

.pg-letters {
    --pg-cols: 8;
    --pg-gap: var(--sp-2);
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--pg-gap);
}

.pg-letter {
    flex: 0 0 auto;
    width: calc((100% - (var(--pg-cols) - 1) * var(--pg-gap)) / var(--pg-cols));
    min-width: 28px; max-width: 44px;
    aspect-ratio: 1;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--emotion-faint);
    border: 1px solid var(--emotion-border);
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--role-score-floor); line-height: 1;
    color: var(--emotion-soft);
}

.pg-pool__empty { font-size: var(--role-caption); color: var(--text-dim); }

/* ---------- 5 · Карточки дней ---------- */

#days-list { display: flex; flex-direction: column; gap: var(--sp-4); }

.mk-riddle-day__head { flex-wrap: wrap; }

.pg-status {
    flex: none;
    padding: 2px var(--sp-3); border-radius: var(--r-full);
    border: 1px solid var(--glass-border); color: var(--text-dim);
}
.pg-status--open { border-color: var(--emotion-border); color: var(--emotion-soft); }
.pg-status--done { border-color: var(--ok); color: var(--ok); }

.pg-riddle-text {
    font-size: var(--role-body); line-height: 1.5; color: var(--text-hi);
    text-wrap: pretty;
}

.pg-word-input {
    text-align: center; text-transform: uppercase; letter-spacing: 0.06em;
}

.pg-verdict {
    display: none;
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
    background: var(--glass-bg); border-left: 3px solid var(--err);
    text-align: left; font-size: var(--role-body-floor); color: var(--text-mid);
}
.pg-verdict.show {
    display: block;
    animation: mk-shake var(--dur-md) var(--ease-out) 1;
}

/* Слово дня — приз, а не галочка. Подпись рядом с ним нужна с тех
   пор, как день научился сворачиваться: в свёрнутой карточке плашка
   осталась бы единственным словом без объяснения, что это. */
.mk-riddle-day__letter { letter-spacing: 0.12em; }

.pg-prize {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: var(--sp-3);
}
/* В системе плашка — прямой ребёнок колонки и прижата влево сама
   (`captain.css`, .mk-riddle-day__letter). В строке с подписью
   выравнивать её должна строка. */
.pg-prize .mk-riddle-day__letter { align-self: auto; }

/* ---------- 5.1 · Прочитанный день сворачивается ----------

   НА ЭКРАНЕ ШЕСТЬ КАРТОЧЕК ПОДРЯД, и к субботе пять из них —
   прочитанные. Развёрнутыми они дают ленту в три тысячи слов, в
   которой не найти сегодняшний день; свёрнутыми — шесть коротких
   строк, и сегодняшний виден сразу.

   ПРЯТАТЬ НАСОВСЕМ НЕЛЬЗЯ: тексты владельца перечитывают. Поэтому
   свёрнутый день не исчезает, а сжимается до того, ради чего его
   открывали, — дата, отметка «разгадано» и слово; всё остальное
   в одном нажатии. Последний разгаданный день раскрыт сам, и
   только что разгаданный — тоже: захлопнуть перед носом ответ,
   которого ждали сутки, было бы хуже любой экономии места.

   Механизм — родной <details>: клавиатура, чтение с экрана и
   состояние «открыт» достаются готовыми, а своего JS на открытие
   и закрытие не появляется вовсе. */
.pg-more__sum {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    border: 1px solid var(--glass-border);
    font-size: var(--role-body-floor); color: var(--text-mid);
    cursor: pointer;
    list-style: none;              /* стрелка своя, ниже */
    transition: border-color var(--dur-sm) var(--ease-out),
                color var(--dur-sm) var(--ease-out);
}
.pg-more__sum::-webkit-details-marker { display: none; }

.pg-more__sum:focus-visible {
    outline: none;
    border-color: var(--emotion-border);
    box-shadow: var(--glow-emotion-soft);
}

.pg-more[open] > .pg-more__sum {
    border-color: var(--emotion-border); color: var(--emotion-soft);
}

.pg-more > .pg-blocks { margin-top: var(--sp-4); }

/* Подпись меняется вместе с состоянием: «Читать» у закрытого,
   «Свернуть» у открытого. Двумя строчками CSS, без участия JS —
   иначе состояние <details> и текст на нём разъезжались бы при
   нажатии клавишей. */
.pg-more:not([open]) .pg-more__txt--open,
.pg-more[open] .pg-more__txt--shut { display: none; }

.pg-more__chev {
    --pg-chev: 12px;
    flex: none; width: var(--pg-chev); line-height: 0;
    transition: transform var(--dur-sm) var(--ease-out);
}
.pg-more__chev svg { width: 100%; height: auto; display: block; }
.pg-more[open] > .pg-more__sum .pg-more__chev { transform: rotate(180deg); }

/* ---------- 5.2 · «Правда или ложь» дня (второй бриф, §14.4) ----------

   Блок того же вида, что загадка: подпись-крышка, абзацы, левый край.
   Две кнопки — предмет голосования системы (.mk-vote-grid / .mk-vote):
   капитан узнаёт выбор из двух так же, как выбор из четырёх в туре. */
.pg-claim__text { font-size: var(--role-body); line-height: 1.5; color: var(--text-hi); }

.pg-claim__btn { justify-content: center; text-align: center; }
.pg-claim__btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pg-claim__note { margin: 0; font-size: var(--role-body-floor); color: var(--text-mid); }

.pg-claim__verdict {
    margin: 0;
    font-size: var(--role-body); font-weight: 600;
}
.pg-claim__verdict.is-right { color: var(--ok); }
.pg-claim__verdict.is-wrong { color: var(--text-mid); }

.pg-claim__explain { font-size: var(--role-body-floor); color: var(--text-mid); }

/* Источник — ссылка во всю ширину и высотой с цель касания: по ней
   жмут пальцем, а адрес сайта короткий. Строкой, если это не адрес. */
.pg-claim__src {
    display: flex; align-items: center;
    min-height: var(--tap);
    margin: 0;
    font-size: var(--role-body-floor); color: var(--emotion-soft);
    overflow-wrap: anywhere;
}
a.pg-claim__src { text-decoration: underline; text-underline-offset: 3px; }
p.pg-claim__src { min-height: 0; color: var(--text-dim); }

/* ---------- 6 · Шестой день: доска виселицы ---------- */

/* Боковые поля доски меньше, чем у карточки дня, и это не описка:
   здесь их отнимают у текста ровно те 8 px, которые нужны ряду клавиш
   по 48 px и слову ключа в двенадцать клеток на экране 360 px. */
/* `position: relative` — ради общего слоя конфетти: `.mk-confetti`
   ложится `inset: 0` в ближайшего позиционированного предка, и без
   этой строки праздник уехал бы к началу документа, то есть за
   верхний край телефона, прокрученного к доске. */
.pg-final { padding: var(--sp-5) var(--sp-3); gap: var(--sp-4); position: relative; }

/* Загадка шестого дня — самый длинный текст экрана. Центровка
   карточки на него не распространяется: центрированный абзац
   в двенадцать строк читают по диагонали. */
.pg-final .pg-riddle-text { text-align: left; }
.pg-final--won { border-color: var(--ok); box-shadow: var(--glow-ok-strong); }

.pg-final__lead { font-size: var(--role-body-floor); color: var(--text-mid); }

/* МАСКА КЛЮЧА. Ключ — до двенадцати букв, одно слово или два (второй
   бриф, §14.2, core/pregame.set_problems). КАЖДОЕ СЛОВО — РОВНО ОДНА
   СТРОКА (.pg-mask__word, без переноса): новая строка на доске значит
   только «новое слово», и граница слов видна с первого взгляда. Пробел
   клеткой не рисуется. Ширина клетки — от числа клеток самого длинного
   слова (`--cells` ставит экран), одна на обе строки: двенадцать клеток
   на доске 360 px выходят по ~22 px. Пола ширины у клетки нет — пол
   был у прежней маски в девять клеток и как раз рвал длинное слово
   9 + 3. Кегль клетки не меняется: цифра JetBrains Mono — 0,6 кегля
   в ширину и в узкой клетке помещается. */
.pg-mask {
    --pg-mgap: 4px;
    display: flex; flex-direction: column; align-items: center;
    gap: var(--sp-2);
}

.pg-mask__word {
    width: 100%;
    display: flex; flex-wrap: nowrap; justify-content: center;
    gap: var(--pg-mgap);
}

.pg-cell {
    flex: 0 1 auto;
    width: calc((100% - (var(--cells) - 1) * var(--pg-mgap)) / var(--cells));
    min-width: 0; max-width: 52px;
    aspect-ratio: 3 / 4;
    display: grid; place-items: center;
    border-radius: var(--r-sm) var(--r-sm) var(--r-sm) var(--r-sm);
    background: var(--glass-bg);
    border: 1px solid transparent;
    border-bottom: 3px solid var(--glass-border);
    font-family: var(--font-num); font-weight: 500;
    font-size: var(--role-score-floor); line-height: 1;
    color: transparent;
    transition: border-color var(--dur-sm) var(--ease-out),
                background var(--dur-sm) var(--ease-out),
                color var(--dur-sm) var(--ease-out);
}

/* Промах по ключу: доска коротко вздрагивает. mk-shake объявлен
   в components.css (предмет 13) — вторых keyframes не заводим. */
.pg-mask.pg-shake { animation: mk-shake var(--dur-md) var(--ease-out) 1; }

.pg-cell.is-open {
    background: var(--emotion-faint);
    border-bottom-color: var(--emotion);
    color: var(--text-hi);
}

.pg-final--won .pg-cell.is-open {
    background: var(--ok-glow);
    border-bottom-color: var(--ok);
    color: var(--text-hi);
}

/* БУКВА ВСТАЁТ НА МЕСТО, И ЭТО ВИДНО. Жалоба владельца была
   ровно об этом: «нажимаешь — буква не добавляется». Теперь ответ
   сервера приходит сразу, а клетка, которой только что не было,
   падает на своё место с пружиной. Только transform (motion.css). */
.pg-cell--land { animation: pg-land var(--dur-md) var(--ease-spring) 1 both; }

@keyframes pg-land {
    0%   { transform: translateY(-12px) scale(1.4); }
    60%  { transform: translateY(0) scale(0.94); }
    100% { transform: translateY(0) scale(1); }
}

/* Доска после исхода: буквы, которых команда так и не открыла,
   гаснут. Ключ при этом по-прежнему не показывается — гаснет
   ровно то, что и так было закрыто. */
.pg-mask--dead .pg-cell { opacity: 0.4; }
.pg-mask--dead .pg-cell.is-open {
    background: var(--glass-bg);
    border-bottom-color: var(--text-dim);
    color: var(--text-mid);
    opacity: 0.75;
}

/* Жизни. Шесть точек: ошибка гасит одну заметно — точка вспыхивает
   и садится (только transform, правило motion.css). */
.pg-lives { display: flex; justify-content: center; gap: var(--sp-2); }

.pg-life {
    width: 14px; height: 14px; border-radius: var(--r-full);
    background: var(--err); box-shadow: var(--glow-err-soft);
    transition: background var(--dur-md) var(--ease-out),
                box-shadow var(--dur-md) var(--ease-out);
}
.pg-life.spent { background: var(--glass-border); box-shadow: none; }
.pg-life.burning { animation: pg-burn var(--dur-md) var(--ease-out) 1; }

@keyframes pg-burn {
    0%   { transform: scale(1.7); }
    55%  { transform: scale(0.82); }
    100% { transform: scale(1); }
}

/* КЛАВИАТУРА ДО ДВАДЦАТИ ЧЕТЫРЁХ БУКВ — самая узкая точка задачи.
   Клавиша не меньше 48×48: это порог цели касания стенда капитана
   (static/design/captain-frames.html), и доска на четырёх жизнях
   (второй бриф) с ним мерится. Прежде клавиша сжималась до 34 px
   ради восьми в ряд; теперь ряд держит шесть, а там, где шесть не
   встают (телефон 360), сам переходит на пять — клавиша остаётся
   48. Двадцать две буквы — четыре-пять строк, и доска чуть выше. */
.pg-keys {
    --pg-kcols: 6;
    --pg-kgap: 4px;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--pg-kgap);
}

.pg-key {
    flex: 0 0 auto;
    width: max(48px,
               calc((100% - (var(--pg-kcols) - 1) * var(--pg-kgap)) / var(--pg-kcols)));
    height: 48px;
    padding: 0;
    border-radius: var(--r-sm);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-hi);
    font-family: var(--font-num); font-weight: 500;
    font-size: var(--role-score-floor); line-height: 1;
    cursor: pointer;
    transition: transform var(--dur-xs) var(--ease-out),
                border-color var(--dur-xs) var(--ease-out),
                opacity var(--dur-sm) var(--ease-out);
}

.pg-key:hover:not(:disabled) { border-color: var(--emotion); }
.pg-key:active:not(:disabled) { transform: scale(0.94); }

/* Нажатая гаснет. Попавшая гаснет светлее и остаётся зелёной:
   через минуту капитан не помнит, какие буквы уже отдал ключу. */
.pg-key.used { opacity: 0.28; color: var(--text-dim); cursor: not-allowed; }
.pg-key.used.hit {
    opacity: 0.6; color: var(--ok); border-color: var(--ok);
}

.pg-keys-note { font-size: var(--role-label); letter-spacing: var(--ls-label);
                text-transform: uppercase; color: var(--text-dim); }

/* Сколько бонуса осталось (второй бриф, §14.3): число с сервера,
   монеты золотом, как во вступлении. Тает с каждым промахом —
   строка обновляется вместе с жизнями. */
.pg-bonus-now {
    margin: 0;
    font-size: var(--role-body-floor); color: var(--text-mid);
    text-wrap: pretty;
}

/* Доска после шестого промаха: клавиатуры нет вовсе, и не появится.
   Вместо неё — погасшие жизни и написанное словами объяснение,
   почему виселица кончилась. Часов догорания здесь больше нет:
   новой попытки не бывает, а таймер обещал бы её молча. */
.pg-over {
    font-size: var(--role-body); color: var(--text-mid);
}

/* ПОРАЖЕНИЕ ОБЯЗАНО ЧИТАТЬСЯ КАК КОНЕЦ, А НЕ КАК ОБРЫВ СВЯЗИ.
   Прежде проигравшая доска получала `mk-riddle-final--locked` —
   то есть выцветала до шестидесяти процентов и выглядела ровно
   так же, как ещё не наступивший день. Теперь она не бледнеет,
   а закрывается: красный борт, погасшая маска, заголовок. */
.pg-final--lost { border-color: var(--err); box-shadow: var(--glow-err-soft); }

.pg-end { display: flex; flex-direction: column; gap: var(--sp-2); }

.pg-over__title {
    margin: 0;
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--role-title-floor); line-height: 1.1; color: var(--err);
}

.pg-final-row {
    display: flex; flex-direction: column; gap: var(--sp-3);
    transition: opacity var(--dur-md) var(--ease-out);
}

/* Инструменты игры уходят до того, как Марго начнёт говорить:
   после её первой буквы двигать экран уже нельзя. */
.pg-fading {
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-md) var(--ease-out);
}

.pg-msg { font-size: var(--role-caption); display: none; }
.pg-msg.ok  { display: block; color: var(--ok); }
.pg-msg.err { display: block; color: var(--err); }

.pg-bonus { font-size: var(--role-body); color: var(--ok); }

/* Победа — праздник, и у него есть голос. */
.pg-won-title {
    margin: 0;
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--role-title-floor); line-height: 1.1; color: var(--ok);
}

/* Пока реплика едет, место под неё занято и видно, что она едет.
   Пять секунд пустоты после главного нажатия недели читаются как
   зависший телефон — это и была половина жалобы владельца. */
.pg-dots { display: inline-flex; align-items: center; gap: 5px; }
.pg-dots i {
    width: 6px; height: 6px; border-radius: var(--r-full);
    background: var(--emotion-soft);
    animation: pg-dot 1.1s var(--ease-inout) infinite;
}
.pg-dots i:nth-child(2) { animation-delay: 0.15s; }
.pg-dots i:nth-child(3) { animation-delay: 0.30s; }

@keyframes pg-dot {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    50%      { opacity: 1;    transform: translateY(-3px); }
}

/* Поздравление печатается — курсор мигает, пока набирается текст. */
.pg-greeting { display: none; }
.pg-greeting.show { display: flex; animation: mk-enter-up var(--dur-md) var(--ease-out) both; }
.pg-greeting__caret {
    display: inline-block; width: 2px; height: 1em; margin-left: 2px;
    background: var(--emotion-soft); vertical-align: text-bottom;
    animation: mk-caret 1s steps(2) infinite;
}

/* Экран открывают с телефона, часто в постели. Деликатный
   reduced-motion — здесь он уместен и разрешён (DESIGN.md,
   «The Show Must Move Rule»: правило про зал, не про руку). */
@media (prefers-reduced-motion: reduce) {
    .pg-life.burning, .pg-verdict.show, .pg-greeting.show,
    .pg-cell, .pg-key, .pg-cell--land { animation: none; transition: none; }
    /* Стрелка сворачивания и сама плашка «Читать» доезжают до
       нового состояния мгновенно: направление стрелки — смысл,
       а поворот — только его подача. */
    .pg-more__chev, .pg-more__sum { transition: none; }
    /* Точки остаются на месте и молчат: смысл «реплика едет»
       держится самим их присутствием, а не подскоком. */
    .pg-dots i { animation: none; opacity: 0.6; }
}