/* ══════════════════════════════════════════════════════════
   ТЕМА · Pixel Wars
   Подключается ПОСЛЕ style.css и переопределяет оформление.
   Отдельным файлом — чтобы можно было сравнить со старым видом
   и откатить одной строкой в index.html.

   Что здесь решается (по разбору в ДИЗАЙН-ПЛАН.md):
   1. Палитра. Прежние акценты — это Flat UI Colors 2013 года, самый
      скопированный набор в вебе, он опознаётся как «дефолт бутстрапа».
      Плюс фон и панель отличались на три единицы, то есть слоёв не было.
   2. Шрифт. Был Courier New — дефолт браузера, которого в Android вообще
      нет, поэтому игра выглядела по-разному на iOS и Android.
   3. Объём. Плоские рамки 1.5px (на ретине это полпикселя, мылится)
      заменены на пиксельную фаску: светлая грань сверху, тёмная снизу.
   4. Шкалы. Было 19 кеглей и 15 скруглений «на глаз» — стало 5 и 3.
   ══════════════════════════════════════════════════════════ */

/* ── Шрифты ──────────────────────────────────────────────
   Ark Pixel — основной, сетка ровно 10px (в проекте 199 мест с 10px).
   Tiny5 — заголовки, сетка 8px. Разные сетки дают иерархию.
   Оба с полной кириллицей и под лицензией SIL OFL.
   Если файлы шрифтов ещё не подложены — сработает запасной список,
   и вёрстка не развалится. */
@font-face {
  font-family: 'ArkPixel';
  src: url('../fonts/ark-pixel-10px-proportional.subset.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Tiny5';
  src: url('../fonts/tiny5.subset.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* ── Слои. Между соседними должна быть ВИДИМАЯ разница, иначе
     панель не читается как отдельный слой над фоном. ── */
  --bg:         #0b0a12;   /* самый низ: игровое поле, страница */
  --surface:    #14121f;   /* панели поверх фона */
  --surface-2:  #1c1930;   /* карточки и поля ввода на панели */
  --surface-3:  #262138;   /* наведение и нажатое состояние */

  /* ── Линии ── */
  --line:        #2e2947;
  --line-soft:   #221e36;
  --line-strong: #4a4270;

  /* ── Текст: пять ступеней вместо шести случайных серых
     (#8099c0, #8faacc, #90aac8, #a8bcd4, #6d87a8, #9ab5cc — это всё
     был один и тот же «приглушённый», набранный шестью кодами).
     Значения подобраны ЗАМЕРОМ контраста на карточке #1c1930:
     text 13.6 · text-2 7.8 · text-3 5.9 · text-4 4.5.
     Первый заход провалился: --text-3 давал 4.0, а --text-4 всего 2.3
     при норме 4.5 — на нём набраны подписи нижнего меню, и жалоба
     «не везде текст читаемый» была именно про это. ── */
  --text:    #e8e4f0;
  --text-2:  #b3abc9;
  --text-3:  #9a93b5;
  --text-4:  #847da8;

  /* ── Акценты. Золото оставлено: это опознавательный цвет игры.
     Остальные уведены в тёмное фэнтези — глубже и менее «веб-плоско»,
     чтобы на тёмном фоне возникала иерархия. ── */
  --gold:      #f5c542;
  --gold-dim:  #a8842c;
  /* Золото для ЧИСЕЛ В СПИСКАХ. Основной --gold (#f5c542) — самый яркий тон
     палитры, и на строчках рейтинга он выстраивается в столбик из полусотни
     насыщенных пятен: игрок написал «сильно режут глаз». Контраста там было
     10.5 при необходимых 4.5, так что яркость снята с большим запасом —
     у --gold-soft всё ещё 7.3, читается так же. */
  --gold-soft: #c9a468;
  --gold-glow: rgba(245,197,66,0.22);
  --danger:    #e4685c;
  --success:   #56a552;
  --info:      #4a8fc7;
  --magic:     #a288e0;

  /* ── Валюты ── */
  --pixr: #e055b8;
  --gram: #45b6d8;

  /* ── Редкости: ровная лестница от серо-фиолетового к золоту ── */
  --r-common:   #8a849e;
  --r-uncommon: #56a552;
  --r-rare:     #4a8fc7;
  --r-epic:     #8f6fd4;
  --r-legend:   #f5c542;
  --r-unique:   #e07a3c;

  /* ── Классы персонажей. Раньше «огонь» был трёх разных оттенков
     в трёх файлах (#ff6600, #ff8844, #ff7030). ── */
  --cls-fire:    #ff7a3d;
  --cls-water:   #4ab8f0;
  --cls-light:   #f7d560;
  --cls-archer:  #89d84f;
  --cls-warrior: #e0603f;

  /* ── Шкалы. Пиксельной игре не идут крупные скругления:
     объём даёт фаска, а не радиус. ── */
  /* Кегли выровнены по пиксельной сетке шрифтов, иначе буквы «поплывут»:
     у Ark Pixel пиксель = 1/10 em (чётко на 10, 20, 30),
     у Tiny5 = 1/8 em (чётко на 16, 24, 32). */
  --fs-1: 10px;  --fs-2: 10px;  --fs-3: 20px;  --fs-4: 16px;  --fs-5: 24px;
  --r-sm: 2px;   --r-md: 4px;   --r-lg: 6px;
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;

  --font:    'ArkPixel', 'Courier New', monospace;
  --font-ui: 'Tiny5', 'ArkPixel', 'Courier New', monospace;

  /* ── Фаска: светлая грань сверху-слева, тёмная снизу-справа.
     Так пиксельный интерфейс получает объём, оставаясь пиксельным. ── */
  --bevel:    inset 1px 1px 0 rgba(255,255,255,0.07), inset -1px -1px 0 rgba(0,0,0,0.55);
  --bevel-in: inset -1px -1px 0 rgba(255,255,255,0.05), inset 1px 1px 0 rgba(0,0,0,0.6);
  --lift:     0 2px 0 rgba(0,0,0,0.5);

  /* Старые имена оставлены, чтобы ничего не сломать: весь прежний CSS
     ссылается на них, и теперь они указывают на новую палитру. */
  --dark:   var(--bg);
  --panel:  var(--surface);
  --border: var(--line);
  --red:    var(--danger);
  --green:  var(--success);
  --blue:   var(--info);
  --purple: var(--magic);
}

/* ── Шрифт на всё. Было 122 объявления Courier New в CSS. ── */
body, button, input, textarea, select,
[style*="Courier"], [style*="courier"] {
  font-family: var(--font) !important;
}

/* У обоих шрифтов есть только Regular. Без этого браузер подделывает
   жирность, размазывая пиксели — а font-weight: bold в проекте стоит
   больше сотни раз. Вместо толщины выделяем цветом и тенью. */
* { font-synthesis: none; }
body { -webkit-font-smoothing: none; font-smooth: never; }

/* Заголовки — вторым шрифтом, без разрядки: разрядка на моноширинном
   капсе читается как терминал, а не как игра. */
.panel-header, .sec-title, .nav-btn, .modal-title, h1, h2, h3 {
  font-family: var(--font-ui) !important;
  letter-spacing: 0 !important;
}

/* ── Фон и панели ────────────────────────────────────────── */
body { background: var(--bg); color: var(--text); }

.panel {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(143,111,212,0.07), transparent 60%),
    var(--surface);
}

.panel-header {
  padding: 76px var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-4);
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,0.6);
  background: linear-gradient(180deg, rgba(143,111,212,0.06), transparent);
}

/* ── Верхняя панель ──────────────────────────────────────── */
#hud {
  background: linear-gradient(180deg, #0e0c18 0%, rgba(14,12,24,0.92) 100%);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.45);
}
.hud-info-row {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--bevel);
}
.hud-gold-val  { color: var(--gold); }
.hud-pixr-val  { color: var(--pixr); }
.hud-floor-val { color: var(--info); }
.hud-cp-val    { color: var(--gold-dim); }
.hud-char-name { color: var(--text); text-shadow: 0 1px 0 rgba(0,0,0,0.7); }

/* ── Нижнее меню ─────────────────────────────────────────── */
#nav {
  background: linear-gradient(0deg, #0a0912 0%, #0e0c18 100%);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -2px 0 rgba(0,0,0,0.4), 0 -8px 18px rgba(0,0,0,0.35);
}
.nav-btn {
  color: var(--text-4);
  font-size: var(--fs-1);
  transition: color .15s;
}
.nav-btn.active { color: var(--gold); }
.nav-btn.active::after {
  left: 26%; right: 26%; height: 2px;
  background: var(--gold);
  border-radius: 0;
  box-shadow: 0 0 8px var(--gold-glow);
}

/* ── Кнопки: объём фаской, а не скруглением ──────────────── */
button {
  font-family: var(--font);
  border-radius: var(--r-md);
  transition: transform .06s, filter .12s;
}
button:active { transform: translateY(1px); filter: brightness(1.12); }

/* ── Карточки и плашки ───────────────────────────────────── */
.card, .loot-row, .task-row, .market-card, .clan-card, .pet-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--bevel);
}

/* ── Прокрутка: тонкая и только вертикальная.
   Горизонтальную прячем совсем: ряды фильтров и вкладок прокручиваются
   пальцем, а полоса под ними читалась как элемент интерфейса (и первый
   же прогон темы это показал — под фильтрами инвентаря появилась
   фиолетовая черта во всю ширину). ── */
::-webkit-scrollbar { width: 6px; height: 0; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-sm);
}
::-webkit-scrollbar:horizontal { height: 0; }

/* ── Пиксель-арт не должен мылиться нигде ───────────────── */
img { image-rendering: pixelated; }

/* ── Полоски здоровья и опыта: объём и блик ─────────────── */
.hud-bar, .bar-outer, .task-progress-bar {
  background: #0a0812;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--bevel-in);
  overflow: hidden;
}
.hud-bar-fill, .bar-inner, .task-progress-fill {
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}

/* ── Сетка инвентаря: слот выглядит слотом, а не рамкой ─── */
.inv-grid { gap: var(--sp-2); }

/* ══════════════════════════════════════════════════════════
   ПЛИТКА ПРЕДМЕТА — самый частый элемент интерфейса.
   Было: пустой прямоугольник со скруглением 6px, рамкой 1.5px,
   подписью «Lv.14» по центру и точкой редкости 3px внизу. Редкость
   читалась только по цвету рамки, иконка терялась в пустоте.
   Стало: слот с подложкой в цвет редкости, фаской, крупной иконкой
   и уровнем в углу — как в играх, где предмет ощущается вещью.
   ══════════════════════════════════════════════════════════ */
.inv-grid { gap: var(--sp-2); }

.inv-slot {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  /* Подложка тонируется цветом редкости через --rar (см. ниже):
     свечение из нижнего угла + ровный тёмный низ. */
  background:
    radial-gradient(120% 90% at 50% 115%, var(--rar-glow, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-2) 0%, #12101c 100%);
  box-shadow: var(--bevel);
  overflow: hidden;
}
/* Верхний блик — тонкая светлая грань, как на металле */
.inv-slot::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  pointer-events: none;
}
.inv-slot:active { transform: translateY(1px); }

/* Иконка — крупнее и с тенью, чтобы отделялась от подложки */
.inv-icon { font-size: 26px; }
.inv-icon img { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.65)); }

/* Уровень — не подпись по центру, а бейдж в углу */
.inv-lvl {
  position: absolute; bottom: 2px; right: 3px;
  margin: 0;
  font-size: var(--fs-1);
  color: var(--text-2);
  text-shadow: 0 1px 0 rgba(0,0,0,0.9);
}
/* Точка редкости больше не нужна: цвет несёт вся плитка */
.inv-rarity-dot { display: none; }

/* Лестница редкостей: цвет рамки + свечение подложки одной переменной */
.inv-slot.rarity-common   { --rar: var(--r-common);   --rar-glow: rgba(111,106,133,0.28); }
.inv-slot.rarity-uncommon { --rar: var(--r-uncommon); --rar-glow: rgba(86,165,82,0.30); }
.inv-slot.rarity-rare     { --rar: var(--r-rare);     --rar-glow: rgba(74,143,199,0.32); }
.inv-slot.rarity-epic     { --rar: var(--r-epic);     --rar-glow: rgba(143,111,212,0.34); }
.inv-slot.rarity-legend   { --rar: var(--r-legend);   --rar-glow: rgba(245,197,66,0.34); }
.inv-slot.rarity-unique   { --rar: var(--r-unique);   --rar-glow: rgba(224,122,60,0.40); }

.inv-slot[class*="rarity-"] {
  border-color: color-mix(in srgb, var(--rar) 55%, var(--line));
}
/* Редкие вещи должны бросаться в глаза в сетке — но не мигать все разом */
.inv-slot.rarity-legend { box-shadow: var(--bevel), 0 0 10px rgba(245,197,66,0.22); }
.inv-slot.rarity-unique { box-shadow: var(--bevel), 0 0 14px rgba(224,122,60,0.35); }

.inv-slot.equipped {
  border-color: var(--gold);
  box-shadow: var(--bevel), 0 0 0 1px rgba(245,197,66,0.30), 0 0 12px var(--gold-glow);
}
.inv-eq-badge { color: var(--gold); font-size: var(--fs-1); top: 2px; right: 4px; }

/* Слоты экипировки — пустое гнездо должно выглядеть гнездом, а не карточкой */
.eq-slot, .equip-slot {
  background: linear-gradient(180deg, #100e1a 0%, #16131f 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--bevel-in);
}

/* Заголовки разделов: было 10px разрядкой, читалось как терминал */
.inv-section-title, .sec-title, .inv-cat-title {
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  color: var(--text-3);
  letter-spacing: 0;
}

/* Фильтры-таблетки */
.inv-filter, .filter-btn, .craft-tab-btn {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-3);
  box-shadow: var(--bevel);
}
.inv-filter.active, .filter-btn.active, .craft-tab-btn.active {
  border-color: var(--gold);
  color: var(--gold);
  background: linear-gradient(180deg, #241f14 0%, #1a1710 100%);
  box-shadow: var(--bevel), 0 0 10px var(--gold-glow);
}

/* ══════════════════════════════════════════════════════════
   ФАКТУРА ПОВЕРХНОСТЕЙ
   Плоская заливка одним цветом — главная причина, по которой
   интерфейс читается как «сверстано», а не «нарисовано». Здесь
   каждая поверхность собирается из нескольких слоёв: зерно,
   переплетение, блик сверху, виньетка снизу. Всё на CSS, без картинок.
   ══════════════════════════════════════════════════════════ */
:root {
  /* Зерно. Мелкий шум убирает «пластиковость» ровной заливки.
     Держим слабым: на тёмном фоне даже 4% заметны. */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.35'/></svg>");
  /* Переплетение: горизонтальные нити через пиксель. Даёт ощущение
     ткани/металла и отлично сочетается с пиксельным шрифтом. */
  --weave: repeating-linear-gradient(0deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 3px);
  /* Блик сверху и затемнение снизу — объём без единой картинки. */
  --sheen: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0) 42%);
  --vign:  linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.30) 100%);
}

/* ── Панель экрана ── */
.panel {
  background:
    var(--grain),
    radial-gradient(150% 75% at 50% -12%, rgba(143,111,212,0.13), transparent 62%),
    var(--vign),
    linear-gradient(180deg, #17142450 0%, #0d0b1500 40%),
    linear-gradient(180deg, #16131f 0%, #0e0c16 100%);
  background-blend-mode: overlay, normal, normal, normal, normal;
  background-size: 120px 120px, auto, auto, auto, auto;
}

/* ── Верхняя панель и меню: те же слои, но плотнее ── */
#hud {
  background:
    var(--grain),
    var(--sheen),
    linear-gradient(180deg, #17142a 0%, #0d0b18 100%);
  background-blend-mode: overlay, normal, normal;
  background-size: 120px 120px, auto, auto;
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 #05040a, 0 2px 0 rgba(143,111,212,0.18), 0 10px 22px rgba(0,0,0,0.5);
}
#nav {
  background:
    var(--grain),
    linear-gradient(0deg, #08070f 0%, #14111f 100%);
  background-blend-mode: overlay, normal;
  background-size: 120px 120px, auto;
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -1px 0 #05040a, 0 -2px 0 rgba(143,111,212,0.16), 0 -10px 20px rgba(0,0,0,0.4);
}

/* ══════════════════════════════════════════════════════════
   РАМКА С ЗАСЕЧКАМИ
   Вместо ровного скругления — прямые углы и короткие уголки по
   четырём сторонам. Такую рамку глаз читает как «сделано для игры»,
   а не как стандартный блок веб-страницы.
   ══════════════════════════════════════════════════════════ */
.card, .loot-row, .task-row, .market-card, .clan-card, .pet-card,
.inv-slot, .hud-info-row {
  position: relative;
  border-radius: var(--r-sm);
  background:
    var(--sheen),
    var(--weave),
    linear-gradient(180deg, #221d36 0%, #161324 100%);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.035),   /* внутренняя светлая нить */
    0 0 0 1px #07060d,                          /* внешний тёмный контур */
    0 2px 0 rgba(0,0,0,0.45);                   /* лёгкий подъём */
}

/* Уголки: четыре коротких штриха цветом акцента.
   --acc задаётся элементом (у предметов — цвет редкости). */
.card::after, .inv-slot::after, .market-card::after, .pet-card::after {
  content: '';
  position: absolute; inset: 3px;
  pointer-events: none;
  --acc: var(--rar, var(--line-strong));
  background:
    linear-gradient(var(--acc), var(--acc)) left  top    / 5px 1px no-repeat,
    linear-gradient(var(--acc), var(--acc)) left  top    / 1px 5px no-repeat,
    linear-gradient(var(--acc), var(--acc)) right top    / 5px 1px no-repeat,
    linear-gradient(var(--acc), var(--acc)) right top    / 1px 5px no-repeat,
    linear-gradient(var(--acc), var(--acc)) left  bottom / 5px 1px no-repeat,
    linear-gradient(var(--acc), var(--acc)) left  bottom / 1px 5px no-repeat,
    linear-gradient(var(--acc), var(--acc)) right bottom / 5px 1px no-repeat,
    linear-gradient(var(--acc), var(--acc)) right bottom / 1px 5px no-repeat;
  opacity: 0.55;
}

/* ══════════════════════════════════════════════════════════
   КНОПКИ
   Были плоскими прямоугольниками. Стали объёмными: гранёный верх,
   тёмная «подошва» снизу, и настоящее вдавливание при нажатии.
   ══════════════════════════════════════════════════════════ */
button, .btn, .task-claim-btn, .market-buy-btn, .market-claim-btn,
.market-cancel-btn, .craft-tab-btn {
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background:
    var(--sheen),
    linear-gradient(180deg, #2b2544 0%, #1a1730 100%);
  color: var(--text-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 2px 0 #07060d;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
button:active, .btn:active, .task-claim-btn:active, .market-buy-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 #07060d;
  filter: brightness(1.06);
}

/* Главное действие — золотое, его видно сразу */
.craft-do-btn, .btn-primary, .market-buy-btn, .task-claim-btn {
  border-color: var(--gold-dim);
  color: #1a1405;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #f0bd3c 0%, #c2911f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 2px 0 #6b4f0e,
    0 0 12px var(--gold-glow);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
button:disabled, .btn:disabled {
  filter: grayscale(0.7) brightness(0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transform: none;
}

/* ══════════════════════════════════════════════════════════
   ПОЛОСКИ ЗДОРОВЬЯ И ОПЫТА
   Плоская заливка заменена на сегментированную: деления через
   каждые 6 пикселей, блик сверху, глубокая тень внутри жёлоба.
   ══════════════════════════════════════════════════════════ */
.hud-bar, .bar-outer, .task-progress-bar {
  background: linear-gradient(180deg, #06050c 0%, #0d0b16 100%);
  border: 1px solid #07060d;
  border-radius: var(--r-sm);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}
.hud-bar-fill, .bar-inner, .task-progress-fill {
  border-radius: 0;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.30);
}
.hud-bar-fill::after, .bar-inner::after, .task-progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 6px);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   ЗАГОЛОВОК РАЗДЕЛА — с линией и ромбом, а не голый текст
   ══════════════════════════════════════════════════════════ */
.inv-section-title, .sec-title, .inv-cat-title {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--text-3);
}
.inv-section-title::after, .sec-title::after, .inv-cat-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* Заголовок экрана — с золотой чертой снизу */
.panel-header {
  border-bottom: none;
  box-shadow:
    0 1px 0 var(--gold-dim),
    0 2px 0 #07060d,
    0 6px 14px rgba(0,0,0,0.4);
}

/* Уровень предмета — полосой по низу плитки, а не цифрой в углу:
   в углу она налезала на угловую засечку и выглядела неряшливо. */
.inv-lvl {
  position: absolute; left: 1px; right: 1px; bottom: 1px;
  padding: 1px 4px 2px;
  text-align: right;
  background: linear-gradient(180deg, rgba(7,6,13,0) 0%, rgba(7,6,13,0.92) 55%);
  color: var(--text-2);
  font-size: var(--fs-1);
  text-shadow: 0 1px 0 #000;
}
/* Засечки идут по всей плитке, включая низ — рамка замыкается ПОД полосой
   уровня, а не обрывается над ней. Раньше низ был поджат на 12px, чтобы
   уголки не лезли на полосу; по просьбе игрока рамку опустили, и вышло
   аккуратнее: плитка выглядит цельной, а не с открытым низом.
   Рисуются они поверх полосы: ::after — последний в порядке отрисовки. */
.inv-slot::after { inset: 2px; opacity: 0.75; }

/* ══════════════════════════════════════════════════════════
   СЛОИ: боевые всплывашки не должны лезть на панели.
   .dmg-pop (z-index 55) и .drop-notif (56) стояли ВЫШЕ панелей (40),
   поэтому цифры урона, названия мобов и «Волна N» ложились поверх
   инвентаря и крафта. На скриншотах игрока это видно прямо: «463!»
   и «Волна 10» поверх списка вещей. Это не косметика — из-за этого
   интерфейс выглядит сломанным.
   Возвращаем их в игровой слой: выше поля, ниже панелей.
   ══════════════════════════════════════════════════════════ */
.dmg-pop    { z-index: 30; }
.drop-notif { z-index: 31; }

/* Пока открыта панель, боевой слой не показываем совсем: он всё равно
   не виден, а его анимации зря греют телефон.
   ИСКЛЮЧЕНИЕ — .is-ui: через showDmgPop идут не только цифры урона, но и
   ответы на нажатия внутри панелей («не хватает золота», «нужны книги»,
   «нет связи»). Их гасить нельзя — без них кнопка выглядит мёртвой. */
.panel.visible ~ .dmg-pop:not(.is-ui),
.panel.visible ~ .drop-notif { display: none; }

/* Ответ на нажатие: над панелью, по центру экрана — игровых координат у него
   всё равно нет смысла соблюдать, поля сейчас не видно. */
.dmg-pop.is-ui {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 60;
  max-width: 84vw;
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 94%, #000);
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
  animation: uiPop 1.6s ease-out forwards;
}
@keyframes uiPop {
  0%   { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -52%) scale(0.98); }
}

/* ══════════════════════════════════════════════════════════
   ЧИТАЕМОСТЬ
   Три отдельные причины, по которым текст плохо читался.
   ══════════════════════════════════════════════════════════ */

/* 1. КЕГЛЬ. В инлайн-стилях 162 места набраны 7-9 пикселями, а сетка
   основного шрифта — 10. Меньше десяти буквы не просто мелкие, они ещё
   и размазываются, потому что не попадают в пиксель. Поднимаем всё до
   сетки; инлайн перебиваем важностью — иначе не достать. */
[style*="font-size:7px"], [style*="font-size: 7px"],
[style*="font-size:8px"], [style*="font-size: 8px"],
[style*="font-size:9px"], [style*="font-size: 9px"] { font-size: 10px !important; }
/* 11 и 13 тоже мимо сетки — округляем к ближайшему кратному десяти */
[style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 10px !important; }
[style*="font-size:13px"], [style*="font-size: 13px"] { font-size: 12px !important; }

/* 2. ФАКТУРА ПОД ТЕКСТОМ. Переплетение с непрозрачностью 0.20 через
   каждый пиксель — красиво на пустой поверхности и вредно под строкой:
   тёмные полосы попадают внутрь букв. На карточках оставляем еле
   заметное, а на длинных описаниях убираем совсем. */
:root { --weave: repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 4px); }
.craft-desc, .task-desc, .modal-body, .clan-desc, .item-desc,
p, .hint, .empty { background-image: none !important; }

/* 3. ОТДЕЛЕНИЕ ОТ ФОНА. Тонкая тёмная подложка под буквой — приём из
   пиксельных игр: он отделяет текст от любой фактуры, не утяжеляя вид. */
body { text-shadow: 0 1px 0 rgba(0,0,0,0.55); }
.panel-header, .sec-title { text-shadow: 0 2px 0 rgba(0,0,0,0.7); }

/* Подписи нижнего меню — самое мелкое место интерфейса */
.nav-btn { font-size: 10px; color: var(--text-3); }
.nav-btn.active { color: var(--gold); }

/* Длинные описания набираем НЕ пиксельным шрифтом: кириллица в 10
   пикселей на «щ», «ж», «ы» вырождается, и абзац читать тяжело.
   Так делают многие игры: пиксельный — на заголовки, цифры и кнопки. */
.craft-desc, .task-desc, .clan-desc, .item-desc, .modal-text, .rule-text {
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 12px; line-height: 1.5; color: var(--text-2);
  letter-spacing: 0.1px;
}

/* ══════════════════════════════════════════════════════════
   ТОЧЕЧНЫЕ ПОЧИНКИ КОНТРАСТА
   Замер на живой странице (композитим все полупрозрачные слои,
   иначе плёнка rgba(255,255,255,0.02) считается белым фоном и
   портит расчёт): на трёх экранах осталось 17 мест ниже нормы.
   Все они — цвета, зашитые прямо в инлайн-стили JS, до них из
   переменных не достать. Перебиваем адресно по значению.
   ══════════════════════════════════════════════════════════ */
/* Подписи закрытых редкостей в крафте: было 3.2 — стало 5.5 */
[style*="#5b6474"] { color: #8a93a6 !important; }
/* Подпись «Золото» в карточке этажа: было 4.1 — стало 6.1 */
[style*="#887733"] { color: #b09a45 !important; }
/* Прочие тусклые серые из инлайнов */
[style*="color:#555566"], [style*="color: #555566"] { color: var(--text-3) !important; }
[style*="color:#444455"], [style*="color: #444455"] { color: var(--text-4) !important; }
[style*="color:#777788"], [style*="color: #777788"] { color: var(--text-3) !important; }
[style*="color:#888"]:not([style*="#8888"]) { color: var(--text-2) !important; }
/* Эпическая редкость в списках материалов: #9b59b6 давал 4.1 */
[style*="#9b59b6"] { color: var(--magic) !important; }

/* Оставшиеся мелкие кегли живут в классах style.css, а не в инлайнах —
   их перебиваем по классу. Ниже 10 пикселей основной шрифт не рисуется
   чётко: буква не попадает в пиксельную сетку и мылится. */
.hud-char-name, .bar-val, .nav-btn, .inv-lvl, .inv-eq-badge,
.sk-cd-num, .potion-count, .chat-strip-line, .task-progress-lbl,
.task-locked-lbl, .loot-rarity-badge { font-size: 10px !important; }

/* ══════════════════════════════════════════════════════════
   РЕДКОСТЬ ДОЛЖНА ЧИТАТЬСЯ С ОДНОГО ВЗГЛЯДА
   Жалоба игрока по живой игре: «всё сливается, либо цифры как-то
   закрасить». Он прав: редкость несла только тонкая рамка в 55%
   смеси с цветом линии, свечение подложки стояло на 28-40% и на
   телефоне не читалось вовсе, а уровень у всех вещей был одного
   серого. Сетка из двенадцати плиток выглядела одинаковой.
   ══════════════════════════════════════════════════════════ */

/* 1. Рамка — почти чистый цвет редкости вместо приглушённой смеси. */
.inv-slot[class*="rarity-"] {
  border-color: color-mix(in srgb, var(--rar) 88%, #000) !important;
}

/* 2. Подложка тонируется заметно сильнее, и цвет приходит СВЕРХУ тоже —
   так плитка читается целиком, а не только по краю. */
.inv-slot.rarity-common   { --rar-glow: rgba(138,132,158,0.42); }
.inv-slot.rarity-uncommon { --rar-glow: rgba(86,165,82,0.48); }
.inv-slot.rarity-rare     { --rar-glow: rgba(74,143,199,0.50); }
.inv-slot.rarity-epic     { --rar-glow: rgba(162,136,224,0.52); }
.inv-slot.rarity-legend   { --rar-glow: rgba(245,197,66,0.50); }
.inv-slot.rarity-unique   { --rar-glow: rgba(224,122,60,0.58); }

.inv-slot[class*="rarity-"] {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rar) 22%, transparent) 0%, transparent 38%),
    radial-gradient(120% 90% at 50% 118%, var(--rar-glow, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-2) 0%, #12101c 100%);
}

/* 3. Цифра уровня — в цвет редкости, как и просил игрок. Тёмная подложка
   под ней остаётся, чтобы цветной текст не терялся на светлом свечении. */
.inv-slot[class*="rarity-"] .inv-lvl {
  color: color-mix(in srgb, var(--rar) 75%, #ffffff) !important;
  text-shadow: 0 1px 0 #000, 0 0 4px rgba(0,0,0,0.9);
  background: linear-gradient(180deg, rgba(7,6,13,0) 0%, rgba(7,6,13,0.95) 55%);
}

/* 4. Угловые засечки — в полную силу, а не в 75%. */
.inv-slot::after { opacity: 1; }

/* 5. Редкие вещи светятся наружу заметнее: в сетке глаз должен цепляться. */
.inv-slot.rarity-epic   { box-shadow: var(--bevel), 0 0 10px rgba(162,136,224,0.30); }
.inv-slot.rarity-legend { box-shadow: var(--bevel), 0 0 14px rgba(245,197,66,0.40); }
.inv-slot.rarity-unique { box-shadow: var(--bevel), 0 0 18px rgba(224,122,60,0.48); }