/**
 * assets/css/base.css — Базовый слой: переменные, сброс, страницы, размытие фона, темы Telegram,
 * запрет нежелательных жестов и общие поверхности.
 *
 * Выделено из общего styles.css при разборе стилей по модулям
 * (исходные строки 1–92, 93–179, 342–352, 353–366, 560–569, 570–589, 590–605, 1772–1829, 1830–1897).
 */

/**
 * styles.css — общие стили игры.
 *
 * Файл остался от версии до перехода на MVP: в нём было 8420 строк и
 * 439 классов из 543 не встречались нигде в проекте — накопились от
 * переделанных и удалённых экранов.
 *
 * Здесь оставлено только то, что действительно используется. Разделы
 * со своей вёрсткой давно живут отдельными файлами в assets/css/:
 * header, shop, profile, skins, tasks, pvp, leaderboard, referrals,
 * match3, spin, fortune, housemolecool, modal, button, loading,
 * inventory, clans и mvp.
 *
 * Что осталось здесь: общая раскладка страниц, фон и размытие, игровое
 * поле с лунками, всплывающие эффекты опыта и промаха, нижние уведомления
 * и мелкие правила, общие для всей игры.
 */

:root {
  /*
   * Псевдонимы прежнего мира. Своих цветов у базового слоя больше нет:
   * каждое имя ведёт в словарь `ui-tokens.css`, и править цвет здесь
   * бессмысленно. Тринадцать имён, которых не читал никто (стекло,
   * размытие, два бренда, фиолет, тень окна, обводка меню, панель меню
   * и три части центральной кнопки), сняты вместе с числами: меню и
   * его золотая ячейка живут своим материалом в раме с 28 августа.
   */
  --bg-main: var(--ui-bg-main);
  --accent-red: var(--ui-red-light);
  --accent-gold: var(--ui-gold-light);
  --accent: var(--ui-blue);
  --text-main: var(--ui-text-main);
  --text-muted: var(--ui-text-muted);
  /* Радиусы — ссылки на шкалу словаря, см. ui-tokens.css §22. */
  --radius-xl: var(--ui-radius-xl);
  --radius-lg: var(--ui-radius-lg);
  --radius-md: var(--ui-radius-md);
  --shadow-md: var(--ui-shadow-deep);
  /* --font-main объявлен в fonts.css (Nunito). Здесь стояло второе
     объявление в 'Roboto Condensed', и оно побеждало по порядку файлов:
     весь основной текст игры шёл узким гротеском вместо округлого. */

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 22px;
  --tap: 56px;

  /* Значки нижнего меню: приглушённая кремовая и золото открытого раздела. */
  --icon: color-mix(in srgb, var(--ui-ivory) 60%, transparent);
  --iconActive: var(--ui-gold-light);
}

* {box-sizing:border-box}
html,
body {height:100%; margin:0; max-width: 100%; overflow-x: hidden;}

/* Фон страницы задаёт §1 рамы: она подключена последней и пишет
   `background` целиком. Прежний градиент числами стоял здесь и до
   экрана не доживал ни на одном разделе. */
body {
  color: var(--text-main);
  font-family: var(--font-main);
  overflow: hidden;
}

/* Фоновая картинка */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* Путь относительно файла стилей: из assets/css это на уровень выше. */
  background-image: url('../osnovanie.webp?26090901');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*
 * Затемняющий слой `.page-overlay` держался тремя правилами: положение с
 * непрозрачной чернотой числами, включение при размытии — и `display:
 * none` ниже по файлу, которое гасило оба. Пустой `<div>` в `index.html`
 * остался, а красить нечего: полог под окном рисует система окон.
 */
.page-overlay { display: none; }

/* Убедимся что контент страниц выше фона */
.page {
    position: relative;
    z-index: 10;
    /*
     * Блоки во всю ширину экрана заданы через width: 100vw. Единица vw
     * считает и полосу прокрутки, поэтому такие блоки оказывались на
     * несколько пикселей шире окна, и вся страница ездила вбок.
     * Лишнее по горизонтали просто срезаем.
     */
    overflow-x: hidden;
    max-width: 100%;
}

/*
 * Верхняя лента приложения.
 *
 * Правила ниже писались для ОДНОЙ шапки — той, что стоит над всеми
 * страницами, — но были записаны на голый тег `header`. Тег в игре не
 * один: `<header>` используют и шапка приземления вызова
 * (`.tam-challenge__caller`), и вывеска квартала Trumpywood
 * (`.trumpamole__tw-head`). Обе получали чужой градиент в 300px,
 * начинающийся на 100px ВЫШЕ самого блока, и посреди фиолетового
 * экрана появлялась чёрная плита во всю ширину — на приземлении вызова
 * она закрывала треть экрана над аватаром соперника.
 *
 * Поэтому селектор теперь именной: тон под шапкой остаётся прежним,
 * разделы своего материала больше не теряют (§62, §85).
 */
.trumpamole__topbar {
    position: relative;
    z-index: 10;
}

/*
 * Тень под лентой: ресурсы читаются на любой картинке раздела. Ступени
 * набраны ночным тоном задника (`--ui-bg-night`), а не числами
 * `rgba(10,12,24,…)` прежнего мира: там был свой холодный синий, чуть
 * мимо палитры, и на стыке с фоном страницы он давал полосу.
 *
 * Второй слой (`::after`) добавляет плотности у самой кромки экрана —
 * маска гасит его к низу, чтобы переход остался мягким.
 */
.trumpamole__topbar::before {
    content: '';
    position: absolute;
    top: -100px; /* Расширяем вверх за пределы header */
    left: 0;
    right: 0;
    height: 300px; /* Достаточная высота для плавного перехода */
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--ui-bg-night) 95%, transparent) 0%,
        color-mix(in srgb, var(--ui-bg-night) 85%, transparent) 15%,
        color-mix(in srgb, var(--ui-bg-night) 70%, transparent) 30%,
        color-mix(in srgb, var(--ui-bg-night) 40%, transparent) 60%,
        color-mix(in srgb, var(--ui-bg-night) 10%, transparent) 85%,
        transparent 100%
    );
    pointer-events: none; /* Чтобы не мешал кликам */
    z-index: -1; /* Помещаем под контентом header */
}

.trumpamole__topbar::after {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--ui-panel-edge) 60%, transparent) 0%,
        color-mix(in srgb, var(--ui-panel-edge) 30%, transparent) 40%,
        color-mix(in srgb, var(--ui-panel-edge) 10%, transparent) 70%,
        transparent 100%
    );
    pointer-events: none;
    z-index: -1;
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 60%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 60%,
        transparent 100%
    );
}

/*
 * Прокручивающая обёртка `.app` снята вместе с правилами: такого узла в
 * игре нет ни на одном маршруте (разметку страниц собирают виды `mvp/`,
 * прокручивается сама `.page.active`). Правила держали нижний отступ
 * магическим числом в 96px и высоту `100vh - 200px` — оба уже расходились
 * с измеренными `--tam-nav-h` (81px) и `--tam-page-top` (122px).
 */
.page { display: none; }
.page.active { display: block; }

/* --- Generic surfaces --- */
.card {
  margin-top: 26px;
  margin-bottom: var(--space-3);
  border-radius: var(--ui-radius-xl);
  padding: var(--space-4);
}

/* ====== ЗАГРУЗКИ ====== */

@keyframes spin {
  to { transform: rotate(360deg); }
}

/*
 * Светлая и тёмная темы Telegram сняты целиком.
 *
 * `mvp/services/telegram.js` ставит на корень `data-theme` по схеме
 * ТЕЛЕФОНА, и светлая схема перекрашивала игру: `--text-main` уходил в
 * чёрный, стеклянные поверхности — в белый. У игры одна художественная
 * система, и цвет ей задают `grok/8-9.png` через словарь, а не настройки
 * пользователя (§7, §8 ТЗ). Атрибут остаётся — на него никто не смотрит.
 *
 * Здесь же стоял единственный отзыв ширины файла — `.modal-content`
 * с отступом в 20px. Такого класса в игре нет: окна собирает
 * `modules/ui/modals.js` под именем `trumpamole__modal-content`.
 */

/* ==========================================================================
   ВХОД РАЗДЕЛА (§108 ТЗ — переходы)

   Здесь стоял один общий `pageFadeIn 0.3s ease` на `.page.active`: вся
   страница целиком выезжала снизу на 10px и проявлялась. Две беды сразу.

   Первая — вид. Раздел въезжал ОДНИМ плоским прямоугольником, как окно
   браузера, а на `grok/8-9.png` экран собран из тяжёлых панелей с толстой
   кромкой: такие панели должны ЛОЖИТЬСЯ, а не проявляться. Игровой вход
   идёт в два такта — сначала встаёт лента раздела сверху, следом
   подтягивается тело под ней; между ними одна ступень задержки, и экран
   читается собранным, а не нарисованным разом.

   Вторая — техника. `transform` на `.page.active` делал страницу опорой
   для КАЖДОГО `position: fixed` внутри неё (кнопка лифта карты, забег
   арены, комната башни, нижний лист дома развлечений): пока шли эти 0.3s,
   «прибитые к экрану» узлы считались от страницы. Теперь страница только
   проявляется, движение живёт на панелях, и опорой ничто не становится.

   Числа — из лестницы движения `game-ui.css` (§62 tok.txt), своих не
   заводим: панель 0.22s, ступень задержки `--tam-t-stagger`.
   ========================================================================== */
.page:not(.active) {
    display: none;
}

.page.active {
    display: block;
    position: relative;
    z-index: 10;
    animation: tamPageIn var(--tam-t-panel) var(--tam-ease-out) backwards;
}

@keyframes tamPageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ----- Первый такт: лента раздела --------------------------------------
   Вывеска с названием и её подложка. Падает сверху с лёгким перелётом
   (`--tam-ease-pop`) — так же, как оживает нажатая кнопка: одно движение
   на всю игру. Список ведёт себя как списки материала в `ui-frame.css`:
   новый раздел дописывает сюда своё имя ленты, иначе войдёт молча. */
.page.active .trumpamole__skins-hero,
.page.active .trumpamole__profile-hero,
.page.active .trumpamole__leaderboard-hero,
.page.active .trumpamole__ref-hero,
.page.active .trumpamole__tasks-hero,
.page.active .trumpamole__arenapvp-hero,
.page.active .trumpamole__match3-hero,
.page.active .trumpamole__map-head,
.page.active .trumpamole__home-scene,
.page.active .trumpamole__tw-head,
.page.active .trumpamole__fortune-plate,
.page.active .trumpamole__spin-plate,
.page.active .tam-store__top,
.page.active .tam-hero {
    animation: tamHeadIn var(--tam-t-panel) var(--tam-ease-pop) backwards;
}

@keyframes tamHeadIn {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- Второй такт: тело раздела ---------------------------------------
   Доска со списком, витрина, сцена. Подтягивается снизу на ступень позже
   ленты и без перелёта: тяжёлая панель не должна пружинить. */
.page.active .trumpamole__skins-main-panel,
.page.active .trumpamole__skins-active-full,
.page.active .trumpamole__profile-main-panel,
.page.active .trumpamole__leaderboard-main-panel,
.page.active .trumpamole__ref-main-panel,
.page.active .trumpamole__ref-card-full,
.page.active .trumpamole__tasks-main-panel,
.page.active .trumpamole__arenapvp-main-panel,
.page.active .trumpamole__arenapvp-podium-wrap-full,
.page.active .trumpamole__arenapvp-duels,
.page.active .trumpamole__match3-main-panel,
.page.active .trumpamole__home-objective,
.page.active .trumpamole__tw-scene,
.page.active .trumpamole__fortune-wheelWrap,
.page.active .trumpamole__spin-machineWrap,
.page.active .tam-store__hero,
.page.active .tam-inv__bottom {
    animation: tamBodyIn var(--tam-t-panel) var(--tam-ease-out) var(--tam-t-stagger) backwards;
}

@keyframes tamBodyIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/*
 * Столб ярусов карты (`.trumpamole__map-shaft`) во второй такт НЕ входит,
 * хотя по виду он ровно такое же тело раздела.
 *
 * Карта сама подводит открытый ярус к верхнему краю — `scrollIntoView` в
 * `mvp/views/worldmap.view.js`. Он МЕРЯЕТ узел на месте, а пока идёт вход,
 * узел сдвинут на 18px, и карта каждый раз останавливалась на полосе ниже
 * нужной: подпись яруса срезана верхним краем. Движение тут стоит меньше,
 * чем попадание в ярус.
 *
 * То же правило годится и дальше: панель, чьё положение кто-то измеряет
 * из JS, во вход не берут. Арифметика (башня считает этаж числом) не в
 * счёт — она сдвига не замечает.
 */

/*
 * Бой входит короче всех (§84 ТЗ: во время боя производительность важнее
 * украшения). Ни ленты, ни доски на поле нет — двигать там нечего, и
 * длинное проявление лишь оттягивает первый удар: вход равен нажатию.
 */
.page.active[data-page="game"] {
    animation-duration: var(--tam-t-tap);
}

/*
 * Спокойное движение. Гасим не «всё, что внутри раздела» — так замерли бы
 * и барабаны, и колесо фортуны, и обратный счёт, — а сами три кадра: они
 * остаются на месте и только проявляются.
 */
@media (prefers-reduced-motion: reduce) {
    @keyframes tamHeadIn {
        from { opacity: 0; transform: none; }
        to   { opacity: 1; transform: none; }
    }

    @keyframes tamBodyIn {
        from { opacity: 0; transform: none; }
        to   { opacity: 1; transform: none; }
    }
}

/*
 * Здесь стояло снятие тени под шапкой при размытии, записанное на голый
 * тег `header`. Тень рисует `.trumpamole__topbar`, а не `header`, — правило
 * не срабатывало ни разу и держало обещание, которого не выполняло.
 * Тень под лентой нужна на любом разделе: HUD читается поверх любой
 * картинки только благодаря ей.
 */

/* Размытие только для фона.
   Свет и лучи добавляются ТОЛЬКО картинкой (`background-image`), а не
   сокращённым `background`: сокращённая запись заодно сбрасывала
   вписывание в `auto`, и картинка раздела под лучами переставала
   покрывать экран. Держалось это единственным `background-size: cover
   !important` в common.css — тем самым восклицательным знаком, который
   §86 запрещает ставить вместо разбора каскада. */
.bg-blur .bg {
    background-image: radial-gradient(circle at 50% 45%,
                        color-mix(in srgb, var(--ui-ivory) 8%, transparent), transparent 38%),
    repeating-conic-gradient(
      from -10deg at 50% 42%,
      color-mix(in srgb, var(--ui-ivory) 8%, transparent) 0 7deg,
      transparent 7deg 14deg
    );
    filter: blur(13px) brightness(0.4);
    transform: scale(1.05);
    transition: filter var(--tam-t-modal) ease, transform var(--tam-t-modal) ease;
}

/*
 * Здесь шесть маршрутов просили размытие послабее селектором
 * `[data-page="skins"] .bg`. Задник — сосед страниц, а не их потомок
 * (`index.html`, `#gameBackground` лежит выше `.page`), поэтому ни один
 * из шести не совпадал. Возвращать правило незачем: тёмный задник под
 * светлыми панелями — тот самый перепад, на котором держится объём.
 */

/* ====== ЗАПРЕТ ВСЕХ НЕЖЕЛАТЕЛЬНЫХ ВЗАИМОДЕЙСТВИЙ ====== */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  touch-action: manipulation;
}

/* Разрешаем выделение только для текстовых полей ввода */
input,
textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Запрет зума на iOS */
html {
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* Запрет масштабирования */
@media (hover: none) and (pointer: coarse) {

  input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea {
    font-size: var(--ui-size-value) !important; /* Предотвращает зум на iOS */
  }
}

/*
 * Прокручивающая обёртка `.app` просила здесь высоту `100vh - 200px`, а
 * ссылка — серую вспышку по нажатию `rgba(0,0,0,.1)`. Узла `.app` в игре
 * нет, а вспышку правило со звёздочкой выше уже гасит: браузерная
 * подсветка ссылки — ровно тот web-приём, который §62 ТЗ запрещает.
 */