/* =========================================================================
   CA THEME — сквозная дизайн-система платформы (палитра «бумага + чернила»).
   Загружается ГЛОБАЛЬНО в base_no_ws.html.twig, поэтому :root-токены доступны
   и в per-game <style> (доски игр) — используйте var(--ca-*) везде.

   ПРИНЦИПЫ (обязательны для всех элементов, включая игровые поля):
   • Тёплая бумага, один чернильно-синий акцент, минимум цвета.
   • Обводка ЖЁСТКАЯ и контрастная (--ca-line), тонкие разделители — мягкие
     (--ca-line-soft). «Свет»: светлая грань сверху + тень снизу.
   • ПОДВИЖНОЕ (фишки, кости, карты, перетаскиваемые плитки, кликабельные
     кнопки/чипы) — ВЫПУКЛОЕ: --ca-raise, на hover приподнимается (--ca-raise-hi
     + translateY). Это объект, который можно взять.
   • НЕПОДВИЖНОЕ (клетки поля, разметка, направляющие, клетчатый фон) — ПЛОСКОЕ:
     без выпуклости и без «подъёма». Hover ТОЛЬКО как подсветка (--ca-cell-hover)
     и лишь если клетка интерактивна (валидный ход). Неинтерактивное — без hover.
   • Посадочные места (пустая лунка/точка хода) — вдавленные (--ca-inset), плоские.
   ========================================================================= */

:root {
    /* Поверхности */
    --ca-bg:        #f6f3ec;   /* тёплая бумага (фон страниц) */
    --ca-surface:   #fffefb;   /* карточка / панель */
    --ca-surface-2: #f0ece1;   /* приподнятые/hover-поверхности */
    /* Текст */
    --ca-text:      #211d17;
    --ca-muted:     #6c6355;
    --ca-faint:     #9a9184;
    /* Линии */
    --ca-line:      #b39a63;   /* ЖЁСТКАЯ обводка объектов */
    --ca-line-soft: #d3c4a0;   /* мягкий тонкий разделитель */
    /* Акцент */
    --ca-accent:      #33475f; /* чернильно-синий — единственный акцент */
    --ca-accent-ink:  #283a50; /* темнее (hover primary) */
    --ca-accent-soft: #eef1f5; /* подложка активного */
    /* Семантика статуса (победа/поражение, онлайн/live). ВСЕГДА парой текст+подложка
       ИЗ ОДНОЙ ТЕМЫ — раньше .pf-badge/.pf-wld в profile.css хардкодили голый hex,
       одинаковый для обеих тем; на бумаге он читался, но в «Ночи» подложка (тот же
       оттенок с alpha) сливалась с текстом того же оттенка → контраст ~2.4-2.9:1
       (отзыв: «подсветка имени почти совпадает с цветом самого имени»). Контраст
       текст↔подложка пересчитан ≥4.5:1 в обеих темах (WCAG relative luminance). */
    --ca-good:      #3f6b4a; /* текст: победа / онлайн */
    --ca-good-soft: #e8ece6; /* подложка плашки под --ca-good, 5.15:1 */
    --ca-bad:       #a3502f; /* текст: поражение / отмена */
    --ca-bad-soft:  #f4e9e3; /* подложка плашки под --ca-bad, 4.70:1 */
    /* Единый шрифт платформы. ОДИН на всех страницах — не смешивать с 'Exo 2'
       и т.п. Моноширинный (цифры таймеров) — отдельный функциональный случай. */
    --ca-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ca-radius: 10px;
    /* Свет: выпуклость подвижных объектов */
    --ca-raise:    inset 0 1px 0 #fffdf5, 0 1px 2px rgba(51, 71, 95, 0.10);
    --ca-raise-hi: inset 0 1px 0 #fffdf5, 0 12px 26px rgba(51, 71, 95, 0.18);
    /* Игровое поле */
    --ca-field:      #f3ead6;              /* фон доски (пергамент) */
    --ca-field-line: rgba(51, 71, 95, 0.16);/* линии сетки/разметки */
    --ca-cell:       #faf4e4;              /* клетка (светлая) */
    --ca-cell-2:     #ece1c8;              /* клетка (тёмная, для шахматного узора) */
    --ca-cell-hover: rgba(51, 71, 95, 0.12);/* подсветка интерактивной клетки */
    --ca-inset:      inset 0 2px 4px rgba(51, 71, 95, 0.18); /* вдавленное место */
    /* Корабль (battleship, свой флот): приглушённая сталь/графит — специально
       ОТДЕЛЬНЫЙ токен от --ca-surface-2 (тот почти не отличим от --ca-field,
       контраст ~1:1). Контраст к --ca-field ≥3:1 в обеих темах (посчитано
       по WCAG relative luminance): светлая — 5.35:1, ночь — 5.78:1. */
    --ca-ship:      #55606e;
    --ca-ship-line: #3f4854;
    /* Фишка: выпуклая сфера (форма стандартная, цвет — за игрой) */
    --ca-piece-shadow: 0 5px 12px rgba(30, 27, 20, 0.32);
    --ca-piece-shadow-hi: 0 10px 20px rgba(30, 27, 20, 0.42);
    --ca-piece-gloss: radial-gradient(circle at 32% 24%, rgba(255,255,255,0.55), transparent 42%);
    /* Тень контейнера доски — раньше копипастилась литералом в каждой игре */
    --ca-board-shadow: 0 10px 28px rgba(51, 71, 95, 0.18);
    /* Стена/перегородка: --raised — игрок сам её ставит (объект, выпуклый),
       --flat — рельеф местности, неподвижный (плоский). См. quoridor vs labyrinth. */
    --ca-wall-flat: var(--ca-line-soft);
    --ca-wall-raised-shadow: 0 3px 8px rgba(51, 71, 95, 0.28);
    /* Цвет фишки — не токен темы, а per-instance переменная (см. game-kit.css
       .ca-piece): каждая игра/игрок задаёт свою через style="--ca-piece-color: …" */
}

/* ------------------------------- ФОН ----------------------------------- */
body {
    background: var(--ca-bg);
    color: var(--ca-text);
    font-family: var(--ca-font);
}

/* ------------------------------ ХЕДЕР ---------------------------------- */
/* Светлый CA-хедер вместо тёмного. Loaded after app_new.css → выигрывает. */
.top-bar {
    background: #efe9db;
    color: var(--ca-muted);
    border-bottom: 1px solid var(--ca-line-soft);
}
.top-links a { color: var(--ca-muted); }
.top-links a:hover { color: var(--ca-accent); }
.top-links .nick, #userNick { color: var(--ca-text); }
.separator { color: var(--ca-line-soft); }
.announcement { color: var(--ca-muted); }

.main-header {
    background-color: rgba(246, 243, 236, 0.9);
    border-bottom: 1px solid var(--ca-line-soft);
}
.main-header.scrolled { box-shadow: 0 4px 18px rgba(80, 66, 40, 0.10); }

.logo { color: var(--ca-text); }
.logo-icon {
    background: var(--ca-accent);
    color: #fff;
    box-shadow: var(--ca-raise);
}
.logo-text {
    background: none;
    -webkit-text-fill-color: var(--ca-text);
    color: var(--ca-text);
}

.action-icon { color: var(--ca-muted); }
.action-icon:hover { color: var(--ca-accent); }
.icon-badge { background-color: var(--ca-accent); }

/* ------------------- ИГРОВОЙ ЛЕНДИНГ: заголовок на бумаге --------------- */
/* .game-title/.game-subtitle заданы белыми в games.css (под синий фон);
   на бумаге перекрашиваем в чернила. games.css грузится позже — !important. */
.game-title { color: var(--ca-text) !important; text-shadow: none !important; }
.game-subtitle { color: var(--ca-muted) !important; }

/* ============================ МОБИЛЬНЫЙ ХЕДЕР ========================== */
/* Бургер прячет ряд иконок в дровер (≤640). На десктопе бургера нет. */
.gp-burger {
    display: none;
    width: 40px; height: 40px; border: 0; background: transparent;
    color: var(--ca-text); font-size: 20px; cursor: pointer;
    align-items: center; justify-content: center; border-radius: 9px;
}
.gp-burger:active { background: var(--ca-surface-2); }

@media (max-width: 640px) {
    /* .main-header остаётся position: sticky (app_new.css) — иначе хедер уезжает
       при скролле и появляется только после возврата к началу страницы.
       .header-content — контейнер для абсолютного дровера .header-actions. */
    .header-content { position: relative; }
    .gp-burger { display: inline-flex; }
    /* .header-actions → выпадающий дровер справа */
    .header-actions {
        position: absolute; top: calc(100% + 6px); right: 12px;
        flex-direction: column; align-items: stretch; gap: 2px;
        min-width: 224px; padding: 6px;
        background: var(--ca-surface);
        border: 1px solid var(--ca-line-soft); border-radius: 12px;
        box-shadow: 0 14px 34px rgba(51, 71, 95, 0.20);
        display: none; z-index: 1001;
    }
    .main-header.gp-menu-open .header-actions { display: flex; }
    .header-actions .action-icon {
        width: auto; height: auto;
        display: flex; align-items: center; gap: 12px;
        padding: 11px 12px; border-radius: 9px;
        color: var(--ca-muted); font-size: 15px; font-weight: 600;
    }
    .header-actions .action-icon:active { background: var(--ca-surface-2); }
    .header-actions .action-icon::after { content: attr(title); color: var(--ca-text); }
    .header-actions .action-icon > i { width: 22px; text-align: center; }
    .header-actions .icon-badge { position: static; margin-left: auto; }
}

/* =========================================================================
   ТЕМА «НОЧЬ» (data-theme="night") — тёмная альтернатива теме по умолчанию.
   Переопределяем ТОЛЬКО значения токенов --ca-* (имена не трогаем), поэтому
   все элементы, завязанные на var(--ca-*), перекрашиваются автоматически:
   карточки, панели, доски игр, фишки. Дух акцента сохранён — тот же чернильно-
   синий, но осветлённый для читаемости на тёмном фоне.
   Пёстрые/детские палитры — отдельная задача, здесь только «Ночь».
   ========================================================================= */
:root[data-theme="night"] {
    /* Поверхности — тёмный тёплый графит с лёгким синим подтоном */
    --ca-bg:        #14161b;
    --ca-surface:   #1c2029;
    --ca-surface-2: #262b36;
    /* Текст — тёплый off-white, читаемый на тёмном */
    --ca-text:      #e9e7e1;
    --ca-muted:     #a9a89f;
    --ca-faint:     #74767d;
    /* Линии — приглушённые, но различимые */
    --ca-line:      #454b58;
    --ca-line-soft: #2c313b;
    /* Акцент — тот же чернильно-синий, осветлён под тёмный фон, но достаточно
       насыщен, чтобы белый текст на нём (логотип, активные чипы) читался. */
    --ca-accent:      #4f6ea3;
    --ca-accent-ink:  #6f8fc4;
    --ca-accent-soft: #232c3a;
    /* Статус — осветлены под тёмный фон (иначе тонут в подложке, см. :root).
       --ca-good text↔soft 5.81:1, --ca-bad text↔soft 5.49:1 (обе ≥4.5:1). */
    --ca-good:      #7fbf8f;
    --ca-good-soft: #24382c;
    --ca-bad:       #e0916a;
    --ca-bad-soft:  #3a2a22;
    /* Свет: на тёмном фоне «выпуклость» = тонкая светлая грань + глубокая тень */
    --ca-raise:    inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.55);
    --ca-raise-hi: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 26px rgba(0,0,0,0.60);
    /* Игровое поле */
    --ca-field:      #20252f;
    --ca-field-line: rgba(255,255,255,0.12);
    --ca-cell:       #272d39;
    --ca-cell-2:     #1c212b;
    --ca-cell-hover: rgba(143,174,214,0.20);
    --ca-inset:      inset 0 2px 4px rgba(0,0,0,0.55);
    /* Корабль — на тёмном фоне светлее воды (не темнее, как в дне). 5.78:1
       к --ca-field ночи. */
    --ca-ship:      #8fa0ba;
    --ca-ship-line: #b7c2d1;
    /* Фишки и контейнеры */
    --ca-piece-shadow:    0 5px 12px rgba(0,0,0,0.55);
    --ca-piece-shadow-hi: 0 10px 20px rgba(0,0,0,0.65);
    --ca-piece-gloss:     radial-gradient(circle at 32% 24%, rgba(255,255,255,0.40), transparent 42%);
    --ca-board-shadow:    0 10px 28px rgba(0,0,0,0.55);
    --ca-wall-flat:          var(--ca-line-soft);
    --ca-wall-raised-shadow: 0 3px 8px rgba(0,0,0,0.55);
}

/* Хедер/служебная панель заданы литеральными светлыми цветами выше —
   для «Ночи» перекрываем на токены темы, чтобы шапка не осталась светлой. */
:root[data-theme="night"] .top-bar {
    background: var(--ca-surface);
    border-bottom-color: var(--ca-line-soft);
}
:root[data-theme="night"] .main-header {
    background-color: rgba(20, 22, 27, 0.9);
    border-bottom-color: var(--ca-line-soft);
}