/*
 * CATS vs DOGS: FLOATING WARS — палитра и базовые размеры.
 *
 * Источник цветов — referens.jpg (CANONICAL VISUAL REFERENCE #001), HEX извлечены
 * из файла программно. Ни один цвет интерфейса не придумывается на месте:
 * если нужного оттенка нет здесь, его сначала добавляют сюда.
 *
 * Сетка — 8px. Скругления крупные, обводки толстые: стиль premium stylized cartoon 2.5D.
 */

/*
 * Шрифты игры. Оба семейства под SIL Open Font License 1.1, файлы урезаны
 * до латиницы и кириллицы — весь набор весит меньше одной картинки.
 * font-display: swap — текст виден сразу, а не после загрузки шрифта.
 */
@font-face {
    font-family: "Lilita One";
    src: url("/assets/fonts/lilita-one.woff2") format("woff2");
    /* Начертание одно, но диапазон объявлен целиком: иначе на заголовках
       с font-weight: 900 браузер дорисовывает искусственный жирный и портит форму. */
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("/assets/fonts/rubik-900.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("/assets/fonts/nunito-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("/assets/fonts/nunito-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("/assets/fonts/nunito-900.woff2") format("woff2");
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- CATS --- */
    --cats-main:        #FB328E;
    --cats-neon:        #F850E8;
    --cats-purple-dark: #651E99;
    --cats-purple:      #9810D0;
    --cats-purple-soft: #B860F0;

    /* --- DOGS --- */
    --dogs-main:        #0058D0;
    --dogs-blue-dark:   #064DAE;
    --dogs-orange:      #D87820;

    /* --- Общее --- */
    --sky:              #40C8F8;
    --sky-mid:          #0D94F4;
    --gold:             #FDC501;
    --danger:           #D81818;
    --ink:              #18131F;
    --panel:            #241D57;
    --cream:            #EDDFE3;

    /* Производные для фонов и разделителей — только затемнения базовых цветов. */
    --panel-deep:       #1A1440;
    --panel-line:       rgba(237, 223, 227, 0.16);
    --ink-shadow:       rgba(24, 19, 31, 0.45);

    /* --- Сетка 8px --- */
    --gap-1: 8px;
    --gap-2: 16px;
    --gap-3: 24px;
    --gap-4: 32px;

    /* --- Скругления и обводки --- */
    --radius-sm: 12px;
    --radius:    20px;
    --radius-lg: 28px;
    --stroke:    3px;

    /* Кнопка под палец: минимум 64px, это требование ТЗ к боевому HUD,
       и в остальном интерфейсе мельчить смысла нет. */
    --tap-target: 64px;

    /* --- Шрифты ---
     *
     * Заголовки: Lilita One — тяжёлый гротеск с высоким ростом строчных, тот самый
     * характер, что в логотипе. Кириллицы в оригинале нет (в шрифте только латиница
     * и вьетнамский), поэтому русские заголовки берёт на себя Rubik 900: из
     * доступных кириллических гротесков он ближе всех по плотности и скруглениям.
     * Если появится кириллизованная Lilita One Rus — положить файл в assets/fonts
     * и заменить один src в блоке @font-face ниже, остальное менять не придётся.
     *
     * Текст: Nunito — округлый, дружелюбный, читаемый на мелком кегле, с полной
     * кириллицей. Все файлы лежат локально: Mini App не должен ждать чужой CDN.
     */
    --font-display: "Lilita One", "Rubik", "Arial Black", Impact, system-ui, sans-serif;
    --font-text:    "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /*
     * --- Канвас 1080×1920 (PORTRAIT) ---
     *
     * Каноническая ориентация игры — вертикальная (plan_project2.md, разделы 0, 242).
     * Художественный reference canvas — 9:16, эталонный вьюпорт — 390×844, но это
     * именно эталон, а не размер интерфейса: хардкодить 390/844 запрещено (раздел 147).
     *
     * Размеры считаются в долях канваса: 1u = 1/108 ширины игровой рамки или
     * 1/192 её высоты, что меньше. На телефоне это 3.5–4.5px — тот же физический
     * масштаб, что был у landscape-единицы на телефоне, поэтому переезд не сделал
     * интерфейс мельче.
     *
     * --app-w / --app-h подставляет js/app.js из реального Telegram viewport;
     * значения ниже — запасные, для обычного браузера.
     */
    --app-w: 100vw;
    --app-h: 100dvh;

    /*
     * Ширина игровой рамки. На Telegram Desktop и планшете игру НЕ растягиваем
     * на весь экран (разделы 139–142): интерактивная часть остаётся вертикальной
     * и стоит по центру, а вокруг — небо и подложка.
     */
    --content-max-w: 520px;
    --frame-w: min(var(--app-w), var(--content-max-w));

    --u: min(calc(var(--frame-w) / 108), calc(var(--app-h) / 192));

    /*
     * Пропорция мастер-арта мира: 9:16 (plan_project2.md, раздел 191).
     * Ею считается холст мира на острове — см. `.island__world` в app.css.
     * Здесь она стоит потому, что это свойство КАНВАСА, а не одного экрана.
     */
    --art-aspect: 9 / 16;

    /*
     * --- UI-safe zone ---
     *
     * Реальные отступы среды плюс запас под системные элементы Telegram.
     * Хардкодить нельзя: чёлка, жестовая полоса Android и панель Telegram
     * живут в разных местах на разных устройствах (разделы 10, 148, 154).
     */
    --inset-top:    env(safe-area-inset-top, 0px);
    --inset-right:  env(safe-area-inset-right, 0px);
    --inset-bottom: env(safe-area-inset-bottom, 0px);
    --inset-left:   env(safe-area-inset-left, 0px);

    /*
     * Полноэкранный режим Telegram (Bot API 8.0) отдаёт игре всю высоту окна
     * вместе с той полосой, где висят системные часы и кнопки самого клиента.
     * Числа приходят от клиента (`safeAreaInset`, `contentSafeAreaInset`)
     * и ставятся в `syncViewport()`; вне полноэкранного режима они нули,
     * и отступы остаются ровно теми, что были.
     */
    --tg-safe-top:    0px;
    --tg-safe-bottom: 0px;

    --safe-top:    calc(var(--inset-top) + var(--tg-safe-top) + var(--gap-1));
    --safe-right:  calc(var(--inset-right) + var(--gap-2));
    --safe-bottom: calc(var(--inset-bottom) + var(--tg-safe-bottom) + var(--gap-1));
    --safe-left:   calc(var(--inset-left) + var(--gap-2));

    /*
     * --- Высоты закреплённых полос ---
     *
     * Верхний HUD компактный (раздел 11), нижняя навигация закреплена и учитывает
     * жестовую полосу (раздел 10). Обе величины нужны экранам, чтобы контент
     * не уезжал под них: ни одна важная кнопка не имеет права оказаться
     * под навигацией (разделы 154, 166).
     */
    --hud-h:        max(52px, calc(var(--u) * 12));
    --bottom-nav-h: max(58px, calc(var(--u) * 14));

    --hud-total:    calc(var(--hud-h) + var(--safe-top));
    --nav-total:    calc(var(--bottom-nav-h) + var(--safe-bottom));

    /* --- Слои --- */
    --z-sky:       0;
    --z-world:     10;
    --z-screen:    20;
    --z-hud:       30;
    --z-transition: 40;

    /* --- Движение --- */
    --t-fast:  0.18s;
    --t-mid:   0.35s;
    --t-cloud: 0.9s;   /* облачный переход между разделами */
    --ease:    cubic-bezier(0.22, 1, 0.36, 1);
}