/* Палитра платформы — CSS-переменные.

   :root держит СВЕТЛЫЕ значения (исторический вид сайта). Их наследуют
   страницы, которые витриной не являются и остаются светлыми: личный
   кабинет, редактор сценариев, визард генерации, игровые экраны.

   body.public-page переопределяет те же имена ТЁМНЫМИ значениями. Класс
   ставит base_public.html (и вручную — lobby.html/qa_lobby.html, у них
   свой <html>), поэтому тёмной становится ровно публичная витрина:
   лендинг, каталог, страница сценария, вход/регистрация, инфо-страницы,
   лобби и вход в комнату.

   Правило для новых стилей: цвет в layout.css пишется переменной, а не
   константой — иначе элемент окажется светлым пятном на тёмной странице
   (или наоборот). Константа допустима только там, где цвет одинаков в
   обеих темах (белый текст на зелёной кнопке, например). */
:root {
    --bg: #e6e8eb;
    --surface: #e9edf1;
    --surface-2: #d9dde2;
    --surface-3: #c8cdd3;
    --surface-input: #ffffff;
    --border: #d0d7de;
    --border-strong: #c8d0d9;
    --text: #1f2933;
    --text-muted: #4b5563;
    --text-dim: #656d76;
    --link: #243447;

    --accent: #2da44e;
    --accent-hover: #218838;
    --accent-text: #218838;
    --accent-soft: #dcefe1;

    --violet: #6d28d9;
    --violet-soft: #ede9fe;
    --violet-border: #ddd6fe;
    --violet-text: #6d28d9;

    --danger: #c62828;
    /* Отдельно от --danger: тот идёт текстом ошибки, эти два — заливкой
       кнопки под белым текстом, и в тёмной теме им нужна насыщенность,
       а не осветление (осветлённый красный под белым текстом нечитаем). */
    --danger-bg: #c62828;
    --danger-bg-hover: #b71c1c;
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-float: 0 2px 10px rgba(0, 0, 0, 0.14);
}

/* Тёмная витрина. Фон — тот же тон, что в градиенте hero-картинки
   (#0a0e14), чтобы низ первого экрана переходил в страницу без шва: до
   этого светлый контент под тёмным hero читался как стык двух разных
   сайтов. */
body.public-page {
    --bg: #0d1218;
    --surface: #161d26;
    --surface-2: #1c2530;
    --surface-3: #27313d;
    --surface-input: #131a22;
    --border: #2a3542;
    --border-strong: #35424f;
    --text: #e8edf3;
    --text-muted: #a7b3c0;
    --text-dim: #7d8b99;
    --link: #d6dee7;

    /* Зелёный светлее исходного: #2da44e на тёмном фоне тускнеет, а
       hover в тёмной теме обязан быть СВЕТЛЕЕ базового, иначе нажатие
       читается как «кнопка погасла». */
    --accent: #2fae53;
    --accent-hover: #3cc865;
    --accent-text: #5fd183;
    --accent-soft: rgba(47, 174, 83, 0.16);

    --violet: #7c3aed;
    --violet-soft: rgba(124, 58, 237, 0.18);
    --violet-border: rgba(167, 139, 250, 0.35);
    --violet-text: #c4b5fd;

    --danger: #f87171;
    --danger-bg: #b91c1c;
    --danger-bg-hover: #dc2626;
    --shadow-card: 0 6px 22px rgba(0, 0, 0, 0.5);
    --shadow-float: 0 2px 12px rgba(0, 0, 0, 0.45);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
    /* Масштабирование страницы отключено (2026-09-30, по запросу автора:
       «на некоторых устройствах это реально мешает»). pan-x pan-y
       оставляет прокрутку в обе стороны — карусели карточек и длинные
       страницы работают как раньше, — но убирает щипок и зум по двойному
       тапу, от которых вёрстка «уезжала» посреди партии.

       Второй слой — user-scalable=no в мета-теге viewport (он есть во
       всех шаблонах). Safari на iOS его намеренно игнорирует ради
       доступности, и туда действует только это правило.

       Разглядывать детали это не мешает: снимок-улика открывается по
       касанию ОТДЕЛЬНОЙ вкладкой с самим файлом (см. photoHtml в
       qa_facts.js), а там правила страницы не действуют и зум доступен. */
    touch-action: pan-x pan-y;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* Поля ввода на тёмных страницах: формы входа/регистрации рендерит Django
   без CSS-классов, поэтому правило по тегу, а не по классу — иначе поля
   остались бы белыми прямоугольниками. */
body.public-page input:not([type="checkbox"]):not([type="radio"]),
body.public-page select,
body.public-page textarea {
    background: var(--surface-input);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    width: 100%;
    outline: none;
}

body.public-page input:focus,
body.public-page select:focus,
body.public-page textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

body.public-page input::placeholder,
body.public-page textarea::placeholder {
    color: var(--text-dim);
}

/* Системные элементы (скроллбары, выпадающие списки select) сами
   перекрашиваются под тёмную схему по этому объявлению. */
body.public-page {
    color-scheme: dark;
    /* Тёмный фон обязан покрывать ВЕСЬ экран, а не только высоту контента:
       на коротких страницах (вход, регистрация, пустая инфо-страница) под
       подвалом иначе видна светлая полоса. Она берётся с <html>, который
       читает --bg из :root, то есть светлое значение: переопределение живёт
       на body и до html не достаёт. */
    min-height: 100vh;
    background: var(--bg);
}

/* Тот же фон и самому <html> — он рисует «холст» страницы, который виден
   при резиновой прокрутке за край и за пределами body. Через :has(), потому
   что <html> общий для всех страниц, а тёмная тема — только у публичных;
   браузер без поддержки :has() просто не получит это правило, и светлый
   холст останется виден лишь при overscroll. */
html:has(body.public-page) {
    background: #0d1218;
}