/* Переменные сайта: все цвета, шрифты, размеры и скорости. Компоненты чисел не пишут — берут отсюда.
   Взяты с главной прежнего сайта-базы (Сайт/), лишнее убрано. */

:root {
  /* Цвета */
  --color-bg: #0b0a10;
  --color-surface: rgba(14, 11, 10, 0.86);
  --color-surface-strong: rgba(9, 7, 7, 0.95);
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.72);
  --color-accent: #f8b700;
  /* Кнопка «Скачать игру» в шапке: золото черты меню — светлое сверху, тёмное снизу, надпись тёмная. */
  --color-accent-light: #ffe27a;
  --color-accent-deep: #9a6400;
  --color-on-accent: #1b1000;
  --color-line: rgba(255, 255, 255, 0.08);
  --color-hover: rgba(255, 255, 255, 0.06);
  --color-row: rgba(255, 255, 255, 0.025);

  /* Шрифты */
  --font-text: 'Open Sans', Arial, Helvetica, sans-serif;
  --font-accent: 'Futura Demi', 'Open Sans', Arial, Helvetica, sans-serif;
  --text-size: 1rem;
  --text-line: 1.6;
  --nav-size: 1.125rem;

  /* Размеры: шаг 4, отступы кратны 8 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --page-gutter: 16px;
  --page-max: 1920px;
  --nav-height: 72px;
  --logo-height: 120px;
  --logo-lift: 8px;
  --radius: 8px;
  --accent-line: 2px;
  --stat-icon: 28px;
  --playtime-names-width: 420px;

  /* Страницы героев (с сайта-базы): блок класса, выпадающее меню шапки, блок «Умения» — иконка умения и золотая
     полоса между умениями, гаснущая к краям */
  --color-head: rgba(0, 0, 0, 0.35);
  --dropdown-width: 220px;
  --row-height-compact: 40px;
  --row-icon: 20px;
  --info-card-width: 520px;

  /* Раздел «Предметы» (с сайта-базы): поля фильтров, строки таблицы, значок вещи и слитка, монеты цены, знак «?»
     пояснения столбца и его янтарная плашка */
  /* Ширина подписи под заголовком раздела (craft-note): строка не растягивается во весь экран. */
  --text-width: 960px;
  /* «В сети» в «Топе игроков». */
  --color-online: #5fbf4a;
  /* Первая тройка «Топа игроков» (hero-card.css): цвет места — золото, серебро, бронза; полосы жизни и маны — цвета
     жидкости рамки героя игры (hp_core/deep, mana_core/deep); ячейка вещи и ширина героя по кругу — у первого места крупнее, ширина колонки блоков. */
  --color-place-1: #f8b700;
  --color-place-2: #c9d1d9;
  --color-place-3: #d08a4a;
  --color-life: #b80808;
  --color-life-deep: #240003;
  --color-mana: #0d4cf2;
  --color-mana-deep: #000529;
  --hero-slot: 36px;
  --hero-slot-small: 28px;
  --hero-model: 220px;
  --hero-model-small: 170px;
  --hero-bar-height: 24px;
  --podium-width: 360px;
  --control-height: 40px;
  --item-icon: 40px;
  /* «Предметы» (2026-09-27): дерево разделов, карточка предмета, плитки каталога, выезжающие панели. Дерево и
     карточка прилипают ниже свисающего логотипа, а не под ним. */
  --items-tree-width: 280px;
  --items-card-width: 360px;
  --items-tree-icon: 24px;
  --items-tile-min: 220px;
  --items-tile-icon: 48px;
  --items-type-icon: 56px;
  --items-variant-icon: 32px;
  --items-search-width: 640px;
  --items-drawer-width: 320px;
  --items-sheet-height: 78vh;
  --items-sticky-top: calc(var(--page-gutter) + var(--logo-height) - var(--logo-lift) + var(--space-3));
  /* Заголовок страницы (page-title.css); на телефоне мельче — ниже. */
  --page-title-size: 3rem;
  /* Значок умения, которое даёт вещь («Кольцо Мир Духов»), в карточке предмета. */
  --items-ability-icon: 32px;
  /* «Ковка» — книга рецептов по окну профессии WoW (smith-book.css): ширина списка, значок вещи, значок строки,
     кнопка слитка в полосе металлов, предел колонки рецепта. */
  --smith-list-width: 340px;
  --smith-icon: 64px;
  --smith-row-icon: 32px;
  --smith-chip: 40px;
  --smith-main-max: 760px;
  --smith-reagent: 36px;
  --smith-chip-icon: 28px;
  --smith-skill-input: 72px;
  /* Не по силам: порог выше своего умения — красным, как строка «Требуется» в подсказке WoW. */
  --color-short: #ff5a4f;
  /* Редкость вещи (2026-09-28, как в игре — `UiTheme.RARITY_*`, docs/design/ITEM_RARITY.md): имя и строка
     «Легендарное кольцо» под ним — обычная белая, магическая синяя, редкая зелёная, легендарная фиолетовая. */
  --rarity-common: #ffffff;
  --rarity-magic: #6f78ff;
  --rarity-rare: #3fd44a;
  --rarity-legendary: #b35cf0;
  /* Мифическая — высшая ступень (2026-09-30), огненно-оранжевая, как `UiTheme.RARITY_MYTHIC`. */
  --rarity-mythic: #ff8a1e;
  --row-height: 64px;
  --ingot-icon-size: 28px;
  --coin-size: 16px;
  --hint-size: 14px;
  --hint-gap: 2px;
  --hint-width: 280px;
  --tooltip-tint: rgba(255, 128, 0, 0.36);
  --tooltip-base: rgba(20, 10, 2, 0.82);
  --tooltip-edge: rgba(255, 150, 40, 0.85);
  --tooltip-glow: 0 0 14px rgba(255, 128, 0, 0.3);
  --ability-icon: 48px;
  --ability-level-icon: 14px;
  --ability-icon-radius: 4px;
  --ability-icon-edge: rgba(248, 183, 0, 0.45);
  --ability-divider: linear-gradient(to right, rgba(248, 183, 0, 0), rgba(248, 183, 0, 0.4), rgba(248, 183, 0, 0));
  /* Вкладки блока «Умения»: высота полосы, золотой налёт выбранной вкладки и её счётчика */
  --ability-tab-height: 48px;
  --color-accent-soft: rgba(248, 183, 0, 0.16);
  --ability-tab-glow: linear-gradient(to top, rgba(248, 183, 0, 0.14), rgba(248, 183, 0, 0));

  /* «Как растёт герой» (таблица уровней): сила врага по разнице уровней — цвета: красный,
     оранжевый, жёлтый, зелёный, серый; ширины карточек и табличек блока. */
  --xp-red: #ff1a1a;
  --xp-orange: #ff8040;
  --xp-yellow: #ffff00;
  --xp-green: #40bf40;
  --xp-gray: #808080;
  --xp-fact-min: 240px;
  --xp-panel-min: 320px;
  --xp-bar-height: 6px;

  /* «Скачать игру» (download.html, 2026-09-28): карточка системы, её логотип, большая золотая кнопка, кружок номера
     шага установки; свечение логотипа и карточки под курсором — золото кнопки. */
  --platform-width: 400px;
  --platform-logo: 96px;
  --button-big-height: 56px;
  --step-number: 32px;
  --accent-glow: rgba(248, 183, 0, 0.45);

  /* «Боссы» (2026-09-30): значок приёма «Механики», значок вещи в строках задания и добычи, золотая черта реплики
     «Сюжета». */
  --boss-rule-icon: 32px;
  --boss-item-icon: 28px;
  /* Раздел «Богиня Эура»: значок искры у цены и крупный — в блоке «Искра Жизни». */
  --eura-price-icon: 22px;
  --eura-spark-icon: 64px;
  /* Значок особенности зверя в карточке вещи (уздечка Белого Стража). */
  --item-feature-icon: 18px;
  --boss-say-line: 2px;

  /* Движение */
  --speed-fast: 150ms;
  --speed: 250ms;
  --speed-slow: 500ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Телефон: шапка ниже, логотип меньше, поля уже — меню и переключатель языка помещаются в строку. */
@media (max-width: 600px) {
  :root {
    --nav-height: 60px;
    /* Второй ряд шапки узкого телефона — меню разделов (site-nav.css). */
    --nav-row-height: 44px;
    --logo-height: 84px;
    --nav-size: 1rem;
    --space-4: 12px;
    --page-gutter: 12px;
    /* Блок героя топа влезает в 320: ячейки и герой мельче. */
    --hero-slot: 28px;
    --hero-slot-small: 24px;
    --hero-model: 170px;
    --hero-model-small: 140px;
    /* «Скачать игру»: карточки столбиком во всю ширину, логотип и кнопка меньше. */
    --platform-logo: 72px;
    --button-big-height: 52px;
    /* Заголовок страницы мельче: «Деревообработка» в 3rem шире 320 на 85 точек (2026-09-28). */
    --page-title-size: 2rem;
  }
}