/* ═══ css/ui.css ══════════════════════════════════════════════════════════════════════════════════════════════════════
   Общие элементы интерфейса - облик наброска 064 (задачи 064, 074, одобрен владельцем 16.10; в игре - задача 075):
   тёмный сланец в кованой золотой кромке, уголки рамки GPT, стеклянные полосы поверх 3D, объёмные кнопки по важности.
   Один облик на всю игру: элементы ниже - на всех экранах (меню - css/menu.css, бой - css/battle.css).

   Кнопки по важности: синяя (.btn.blue) - главное действие экрана, одна; зелёная - получить / улучшить / купить;
   золотая - забрать; красная - напасть, сдаться; камень (.btn) - прочее; .off / :disabled - недоступна.

   Разделы файла:
     1. Рамка окна и уголки
     2. Вставка, стекло, разделитель
     3. Лента заголовка
     4. Подсказка
     5. Кнопки
     6. Круглая кнопка, плюс, минус
     7. Полоса
     8. Ресурс (капсула) и цена
     9. Вкладки
     10. Строка списка, кружок, точка
     11. Портрет, герб, табличка числа
     12. Карта отряда
     13. Табличка, часы, свечение
     14. Текст
     15. Окно поверх меню
     16. Добыча и награды
     17. Подсказка у элемента
     18. Навык, деления очков
     19. Метки, ключ-значение, счётчики, переключатель, поле ввода
     20. Перетаскивание башен колоды
     21. Движение (076)
     22. Обучение (105)
     23. Рамки боссов (263)
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Рамка окна и уголки ─────────────────────────────────────────────────────────────────────────────────────── */
/* рамка окна (элемент 01): тёмный сланец, кованая золотая кромка, кольца снаружи */
.panel {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(120, 150, 200, 0.16), transparent 60%),
    linear-gradient(180deg, var(--slate-hi) 0%, var(--slate) 38%, var(--slate-lo) 100%);
  border: 2px solid var(--gold);
  box-shadow:
    0 0 0 2px #0a0d12,
    0 0 0 4px var(--gold-lo),
    inset 0 0 0 2px rgba(0, 0, 0, 0.55),
    inset 0 3px 0 2px rgba(255, 236, 190, 0.07),
    0 14px 40px rgba(0, 0, 0, 0.75);
}
/* уголок - картинка GPT (замечание 074: «Гпт же нарисовал нормальный уголок»): верхние - у самой рамки, нижние - у
   держателя .cn (ui/gui.js ставит его в каждую рамку); ось плеч - на кромке, наружу за кольца не выходит */
.panel::before,
.panel::after,
.panel > .cn::before,
.panel > .cn::after {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  background: url(../data/textures/interface/frame/corner.webp) center / 100% 100% no-repeat;
  z-index: 4;
  filter: drop-shadow(0 1px 1px #000);
  pointer-events: none;
}
.panel::before {
}
.panel::after {
  transform: scaleX(-1);
}
.panel > .cn::before {
  transform: scaleY(-1);
}
.panel > .cn::after {
  transform: scale(-1, -1);
}
/* держатель нижних уголков - вне раскладки окна */
.panel > .cn {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
/* рамка, вставка, плитка - свой слой: лучи (.glow, z-index -1) - над фоном и под содержимым */
.panel,
.inset,
.tile,
.good,
.arcard {
  isolation: isolate;
}

/* ─── 2. Вставка, стекло, разделитель ────────────────────────────────────────────────────────────────────────────── */
/* вдавленная вставка внутри окна (02) */
.inset {
  background: linear-gradient(180deg, rgba(5, 8, 12, 0.55), rgba(5, 8, 12, 0.35));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 236, 190, 0.08);
}
/* полупрозрачная полоса поверх 3D и сланца (04) */
.glass {
  background: linear-gradient(180deg, rgba(14, 19, 28, 0.84), rgba(14, 19, 28, 0.66));
  border: 1px solid rgba(233, 192, 106, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}

/* ─── 3. Лента заголовка ─────────────────────────────────────────────────────────────────────────────────────────── */
/* табличка заголовка (03), наезжает на верх окна: золотой шестиугольник, тёмная середина того же контура (::before),
   заклёпки на остриях (::after); кромка золотом и по косым концам */
.ribbon {
  position: absolute;
  transform: translateX(-50%);
  isolation: isolate;
  z-index: 3;
  max-width: calc(100% - 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow:
    0 2px 0 #000,
    0 0 12px rgba(233, 192, 106, 0.35);
  white-space: nowrap;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-b) 100%);
  clip-path: polygon(0 50%, 18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%);
}
.ribbon::before {
  content: '';
  position: absolute;
  z-index: -1;
  clip-path: polygon(0 50%, 16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 45%),
    linear-gradient(180deg, #3f5677, #22324b 60%, #1a2539);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.55);
}
.ribbon::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 9px 50%, var(--gold-hi) 0 2.2px, #2a1c06 2.6px 3.4px, transparent 3.8px),
    radial-gradient(circle at calc(100% - 9px) 50%, var(--gold-hi) 0 2.2px, #2a1c06 2.6px 3.4px, transparent 3.8px);
}
/* лента внутри рамки раздела - ниже и мельче */
.ribbon.low {
}
.ribbon > .ico {
}
.ribbon > .emb {
}

/* ─── 4. Подсказка ───────────────────────────────────────────────────────────────────────────────────────────────── */
/* подсказка (05): рамка с хвостиком к тому, что нажато (--ax - место хвостика по ширине, --ay - по высоте) */
.tip {
  position: absolute;
  background: linear-gradient(180deg, #2d384a, #1b2331);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
}
.tip::after {
  content: '';
  position: absolute;
  left: var(--ax, 22px);
  background: #1b2331;
  transform: rotate(45deg);
}
/* хвостик вверх (подсказка под элементом) */
.tip.arr-u::after {
  bottom: auto;
  top: -8px;
  background: #2d384a;
  border: 0;
  border-left: 1.5px solid var(--gold);
  border-top: 1.5px solid var(--gold);
}
/* хвостик вправо (подсказка слева от элемента) */
.tip.arr-r::after {
  left: auto;
  right: -8px;
  top: var(--ay, 40px);
  bottom: auto;
  border: 0;
  border-right: 1.5px solid var(--gold);
  border-top: 1.5px solid var(--gold);
  background: #222b3b;
}
/* хвостик влево (подсказка справа от элемента) */
.tip.arr-l::after {
  left: -8px;
  top: var(--ay, 40px);
  bottom: auto;
  border: 0;
  border-left: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  background: #222b3b;
}
.tip.arr-n::after {
  display: none;
}

/* ─── 5. Кнопки ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* кнопки (07-11, 13-18): объём - блик сверху, уступ снизу; цвет - по важности (--hi/--mid/--lo) */
.btn {
  --hi: var(--stone-hi);
  --mid: var(--stone);
  --lo: var(--stone-lo);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(0, 0, 0, 0.7);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 0 1px #000;
  white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, var(--hi) 0%, var(--mid) 55%, var(--lo) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(0, 0, 0, 0.22),
    0 4px 0 var(--lo),
    0 4px 0 1.5px rgba(0, 0, 0, 0.7),
    0 8px 12px rgba(0, 0, 0, 0.45);
}
.btn.blue {
  --hi: var(--blue-hi);
  --mid: var(--blue);
  --lo: var(--blue-lo);
}
.btn.green {
  --hi: var(--green-hi);
  --mid: var(--green);
  --lo: var(--green-lo);
}
.btn.gold {
  --hi: var(--gold-b-hi);
  --mid: var(--gold-b);
  --lo: var(--gold-b-lo);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}
.btn.red {
  --hi: var(--red-hi);
  --mid: var(--red);
  --lo: var(--red-lo);
}
/* нажатая: уступ уходит, кнопка опускается */
.btn:active:not(:disabled):not(.off),
.btn.pressed {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.35),
    0 1px 0 var(--lo),
    0 1px 0 1.5px rgba(0, 0, 0, 0.7);
  filter: brightness(0.92);
}
.btn:disabled,
.btn.off {
  filter: grayscale(0.85) brightness(0.7);
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled):not(.off) {
    filter: brightness(1.08);
  }
}
.btn.big {
}
/* главная кнопка экрана - картинка игры (Button_main_menu): 4 состояния сверху вниз - обычное, под курсором, нажата,
   недоступна (077, как в 18.90); состояния - с весом общих правил кнопки (.btn:hover / :active / :disabled выше) */
.btn.main {
  background: 0 0 / 100% 400% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
}
.btn.main:hover:not(:disabled):not(.off) {
  background-position: 0 33.333%;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
}
.btn.main:active:not(:disabled):not(.off),
.btn.main.pressed {
  background-position: 0 66.667%;
  box-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.btn.main:disabled,
.btn.main.off {
  background-position: 0 100%;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
}
.btn.small {
}
.btn.xs {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 3px 0 var(--lo),
    0 3px 0 1px rgba(0, 0, 0, 0.7);
}
.btn.wide {
}
.btn > .ico {
}
.btn.big > .ico {
}

/* ─── 6. Круглая кнопка, плюс, минус ─────────────────────────────────────────────────────────────────────────────── */
/* круглая кнопка значка (12): назад, правила, настройки, на весь экран */
.rbtn {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%, #4a5770, #222c3c 70%);
  box-shadow:
    0 0 0 2px #0a0d12,
    0 4px 8px rgba(0, 0, 0, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.18);
}
.rbtn > .ico {
}
.rbtn:active {
  transform: translateY(1px);
  filter: brightness(0.9);
}
/* «+» (44): зелёный кружок */
.plusb {
  flex: none;
  display: inline-grid;
  place-items: center;
  text-shadow: 0 1px 1px #000;
  background: linear-gradient(180deg, var(--green-hi), var(--green) 60%, var(--green-lo));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.7);
}
/* мини-кнопка навыка (камень); «+» - круглая кнопка «Осады» (.rplus, 295) */
.mb {
  display: grid;
  place-items: center;
  text-shadow: 0 1px 1px #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 2px 3px rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, var(--stone-hi), var(--stone) 60%, var(--stone-lo));
}
.mb:disabled,
.mb.off {
  filter: grayscale(0.9) brightness(0.6);
  cursor: default;
}
/* круглая кнопка «+» (295, владелец 30.10: «кнопка плюса пиздец уебищная. Везде где она есть замени на какую-нибудь
   круглую кнопку из осады. Может есть с эффектом нажатия какие»): круг «Осады» с золотым крестом - картинка btn_plus
   (DefaultControls.dat RoundPlus), 4 состояния сверху вниз - обычное, под курсором, нажата, недоступна; нажатие -
   кнопка вдавливается (кадр «нажата» и чуть меньше); надпись «+» не видна - только для чтения с экрана */
.rplus {
  flex: none;
  color: transparent;
  font-size: 0;
  text-shadow: none;
  background: 0 0 / 100% 400% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
  transition: transform 0.08s ease-out;
}
.rplus:hover:not(:disabled):not(.off) {
  background-position: 0 33.333%;
}
.rplus:active:not(:disabled):not(.off) {
  background-position: 0 66.667%;
  transform: scale(0.88);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.rplus:disabled,
.rplus.off {
  background-position: 0 100%;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
  cursor: default;
}

/* ─── 7. Полоса ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* полоса (19-23): жёлоб и заливка; заливка золотая, .blue / .green / .red - свой цвет; надпись поверх (b) */
.bar {
  position: relative;
  display: block;
  background: linear-gradient(180deg, #05080c, #121821);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 236, 190, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.bar > i {
  position: absolute;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--gold-b-hi), var(--gold-b) 60%, var(--gold-b-lo));
}
.bar.blue > i {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--blue-hi), var(--blue) 60%, var(--blue-lo));
}
.bar.green > i,
.bar.full > i {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--green-hi), var(--green) 60%, var(--green-lo));
}
.bar.red > i {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--red-hi), var(--red) 60%, var(--red-lo));
}
/* можно улучшить - жёлоб светится зелёным */
.bar.full {
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.9),
    inset 0 0 6px 1px rgba(143, 229, 138, 0.7),
    0 0 0 1px #000;
}
.bar > b {
  position: absolute;
  display: grid;
  place-items: center;
  text-shadow:
    0 1px 1px #000,
    0 0 2px #000;
  white-space: nowrap;
}

/* ─── 8. Ресурс (капсула) и цена ─────────────────────────────────────────────────────────────────────────────────── */
/* ресурс (24): тёмная капсула, значок наезжает слева, «+» справа */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(4, 6, 10, 0.85), rgba(20, 26, 36, 0.85));
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(233, 192, 106, 0.5);
  text-shadow: 0 1px 1px #000;
  white-space: nowrap;
}
.pill > .ico {
  position: absolute;
  transform: translateY(-50%);
  filter: drop-shadow(0 2px 2px #000);
}
.pill > .plusb {
  position: absolute;
}
.pill.noplus {
}
/* ресурс в строке (число и значок) */
.res {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.res > .ico {
}
/* цена: число, за ним значок (бриллиант крупно) */
.gemb {
  display: inline-flex;
  align-items: center;
}
.gemb > .ico {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}
.btn.small .gemb > .ico {
}
.btn.xs .gemb > .ico {
}

/* ─── 9. Вкладки ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* вкладки (25-26); выбранная - .sel или нажатая (aria-pressed) */
.tabs {
  display: flex;
}
.tab {
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #2a3343, #1a212c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.7);
}
.tab.sel,
.tab[aria-pressed='true'],
.tab[aria-current] {
  color: var(--gold-hi);
  background: linear-gradient(180deg, #3f5677, #263852);
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 10px rgba(233, 192, 106, 0.35);
}
/* шаблон в бою (открыт другой) - точка */
.tab.live::after {
  content: '';
  position: absolute;
  background: var(--green-hi);
  box-shadow: 0 0 4px var(--green-hi);
}
/* кружок вкладки - после надписи, внутри вкладки */
.tab > .badge {
  position: static;
  display: inline-grid;
  vertical-align: 1px;
}

/* ─── 10. Строка списка, кружок, точка ───────────────────────────────────────────────────────────────────────────── */
/* строка списка (27-28): карточка, слева - цвет стороны (--side) */
.row {
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(46, 57, 75, 0.9), rgba(30, 38, 51, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 4px 0 0 var(--side, transparent);
}
.row.sel {
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 0 10px rgba(233, 192, 106, 0.3),
    inset 4px 0 0 var(--side, transparent);
}
.row.ours {
  --side: var(--blue-hi);
}
.row.theirs {
  --side: var(--red-hi);
}
.row > div {
  display: grid;
}
.row b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* кружок со счётом (29): красный, в углу элемента */
.badge {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  font: 700 12px/1 var(--body);
  font-style: normal;
  background: radial-gradient(circle at 50% 30%, #ff7a62, #c92a1d 70%);
  box-shadow:
    0 0 0 1.5px #fff2,
    0 0 0 2px #3a0905,
    0 2px 4px rgba(0, 0, 0, 0.6);
}
.badge.green {
  background: radial-gradient(circle at 50% 30%, #9ef09a, #2e8f3e 70%);
}
/* красная точка «есть новое» */
.dot {
  position: absolute;
  background: radial-gradient(circle at 50% 30%, #ff7a62, #c92a1d 70%);
  box-shadow: 0 0 0 1.5px #0a0d12;
}

/* ─── 11. Портрет, герб, табличка числа ──────────────────────────────────────────────────────────────────────────── */
/* портрет (31): круглая рамка, .sq - квадратная, .sm - маленький; уровень - табличкой снизу (.lv) */
.ava {
  position: relative;
  display: inline-block;
  flex: none;
  background: #222 center / cover;
  box-shadow:
    0 0 0 2px var(--ring, var(--gold)),
    0 0 0 4px #0a0d12,
    0 3px 6px rgba(0, 0, 0, 0.6);
}
.ava.sq {
}
.ava.sm {
  width: 30px;
  height: 30px;
  box-shadow:
    0 0 0 1.5px var(--ring, var(--gold)),
    0 0 0 3px #0a0d12;
}
/* картинка портрета внутри рамки (ui/avatar.js) - по рамке */
.ava > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.ava > .lv {
  position: absolute;
  z-index: 1;
  transform: translateX(-50%);
  font: 700 11px/1.2 var(--body);
  font-style: normal;
  background: linear-gradient(180deg, #3f5677, #1f2c42);
  box-shadow:
    0 0 0 1.5px var(--gold),
    0 0 0 3px #0a0d12;
}
/* герб ордена (слои - ui/emblem.js) */
.emb {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 34px;
  flex: none;
  vertical-align: middle;
}
/* маленькая табличка числа: уровень (синяя), энергия (янтарная) */
.chip {
  position: absolute;
  font: 700 10.5px/1.15 var(--body);
  font-style: normal;
  background: linear-gradient(180deg, #3f5677, #1f2c42);
  box-shadow:
    0 0 0 1.5px var(--gold),
    0 0 0 3px #0a0d12;
  white-space: nowrap;
}
.chip.en {
  background: linear-gradient(180deg, #3a2a10, #1d1408);
  box-shadow:
    0 0 0 1.5px var(--gold-b),
    0 0 0 3px #0a0d12;
}

/* ─── 12. Карта отряда ───────────────────────────────────────────────────────────────────────────────────────────── */
/* карта отряда (33): рамка цвета лиги (--lg), фигура отряда сверху, полоса снизу (число в пачке или +уровень), в бою -
   +уровень табличкой справа сверху (.lv) и номер башни слева сверху (.key) */
.card {
  --lg: #9aa4b2;
  position: relative;
  display: block;
  flex: none;
  /* подложка - свет цвета лиги за фигурой (077, как плитка 18.90) */
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--lg) 34%, #1b2230), #0c1118 78%);
  box-shadow:
    inset 0 0 0 2px var(--lg),
    inset 0 0 0 4px rgba(0, 0, 0, 0.55),
    0 0 0 1.5px #000,
    0 4px 6px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.card.lg0 {
  --lg: var(--lg0);
}
.card.lg1 {
  --lg: var(--lg1);
}
.card.lg2 {
  --lg: var(--lg2);
}
.card.lg3 {
  --lg: var(--lg3);
}
.card.lg4 {
  --lg: var(--lg4);
}
.card.lg5 {
  --lg: var(--lg5);
}
.card.elx {
  --lg: var(--elx);
  background: radial-gradient(circle at 50% 40%, #2c3a52, #141b26 70%);
}
/* фигура отряда - квадрат над полосой (атлас - ui/icons.js unitIcon) */
.card > .fig {
  position: absolute;
  aspect-ratio: 1;
  transform: translateX(-50%);
  overflow: hidden;
}
.card > .fig > * {
  width: 100% !important;
  height: 100% !important;
}
/* значок зелья - поверх тёмной карты */
.card.elx > .fig {
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 2px #000);
}
.card > .cnt {
  position: absolute;
  display: grid;
  place-items: center;
  font: 700 12px/1 var(--body);
  font-style: normal;
  background: linear-gradient(180deg, rgba(10, 13, 18, 0.55), rgba(10, 13, 18, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.18);
  text-shadow: 0 1px 1px #000;
  white-space: nowrap;
}
.card > .lv {
  position: absolute;
  z-index: 1;
  font: 700 11px/1.1 var(--body);
  font-style: normal;
  background: linear-gradient(180deg, #3f5677, #1f2c42);
  box-shadow:
    0 0 0 1px var(--gold),
    0 0 0 2px #0a0d12;
}
.card > .key {
  position: absolute;
  z-index: 1;
  font: 700 12px/1 var(--body);
  font-style: normal;
  text-shadow:
    0 1px 1px #000,
    0 0 2px #000;
}
/* стрелка «можно улучшить» (136, как .tile .up в 18.90): зелёный кружок с белой стрелкой, покачивается; внутри карты слева
   сверху, место и размер - DefaultControls.dat Card (гарнизон), Widgets.dat UnitTile (коллекция) */
.card > .uarr {
  position: absolute;
  z-index: 2;
  background: linear-gradient(180deg, var(--green-hi), var(--green));
  box-shadow: 0 0 6px rgba(158, 226, 106, 0.8);
  animation: uarrBob 1.2s ease-in-out infinite;
  pointer-events: none;
}
.card > .uarr::before {
  content: '';
  position: absolute;
  background: #fff;
  clip-path: polygon(50% 5%, 95% 55%, 68% 55%, 68% 95%, 32% 95%, 32% 55%, 5% 55%);
}
@keyframes uarrBob {
  50% {
    transform: translateY(-3px);
  }
}
/* закрытый отряд - тенью */
.card.lock > .fig {
  filter: grayscale(1) brightness(0.35);
}
.card.lock > .cnt,
.card.lock > .lv {
  display: none;
}
/* зелья нет в запасе - бледный значок */
.card.none > .fig {
  filter: grayscale(0.4);
}
/* отряд колоды лигой выше арены - в бой не идёт (212): серый */
.card.off > .fig {
  filter: grayscale(1) brightness(0.6);
}
.card.sel {
  box-shadow:
    inset 0 0 0 2px var(--lg),
    inset 0 0 0 4px rgba(0, 0, 0, 0.55),
    0 0 0 2px var(--gold-hi),
    inset 0 0 10px rgba(255, 210, 110, 0.7);
}
/* пустая башня колоды - штриховка и номер */
.card.empty {
  background: repeating-linear-gradient(45deg, #1d2430 0 6px, #171d27 6px 12px);
}
.card.empty > .n {
  position: absolute;
  display: grid;
  place-items: center;
  font: 700 18px/1 var(--body);
  font-style: normal;
}
button.card:active {
  transform: scale(0.96);
}

/* ─── 13. Табличка, часы, свечение ───────────────────────────────────────────────────────────────────────────────── */
/* табличка (38-40): этап, часы, «против» */
.plate {
  display: grid;
  justify-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 50%), linear-gradient(180deg, #2d3a50, #18202d);
  box-shadow:
    0 0 0 2px #0a0d12,
    0 4px 10px rgba(0, 0, 0, 0.6);
}
.plate b {
  text-shadow: 0 1px 0 #000;
}
.plate small {
}
.timer {
}
/* свечение за наградой (41): лучи и мягкий свет; центр - по центру своего значка, под содержимым своей рамки */
.glow {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
/* лучи крутятся, мягкий свет «дышит» (как в 18.90, задача 076) - своими слоями: поворот слоя не сдвигает ореол с места
   (у ореолов своё смещение translate) */
.glow::before,
.glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  mask: radial-gradient(circle, #000 30%, transparent 70%);
}
.glow::before {
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, 0.22) 0 8deg, transparent 8deg 20deg);
  animation: spin2d 40s linear infinite;
}
.glow::after {
  background: radial-gradient(circle, rgba(255, 214, 120, 0.7), rgba(255, 180, 60, 0.15) 45%, transparent 70%);
  animation: breathe 3.4s ease-in-out infinite;
}
/* действующие бусты в углу кнопки (213): ряд значков поверх угла, нажатие - сквозь них; число - на значке снизу */
.bbgs {
  position: absolute;
  z-index: 5; /* поверх уголков рамки (.cn - 4): значки «поверх угла», 214 */
  display: flex;
  grid-auto-flow: column; /* облик плитки делает свои группы сеткой - и тогда значки в ряд */
  pointer-events: none;
}
.bbg {
  position: relative;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.bbg > small {
  position: absolute;
  line-height: 1;
  text-shadow:
    0 1px 0 #000,
    0 0 2px #000;
}

/* ─── 14. Текст ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.h {
}
.note {
}
.why {
  font-size: 11.5px;
  color: var(--red-hi);
}
.hint {
  text-shadow: 0 1px 1px #000;
}
.hint b {
}
.bignum {
  text-shadow: 0 2px 0 #000;
}
.none {
  font-style: italic;
}
em.up,
.up {
  font-style: normal;
  color: var(--green-hi);
}
em.down,
.down {
  font-style: normal;
  color: var(--red-hi);
}
.new {
}
/* заголовок части: название, пояснение мелко, золотая черта до края */
.sh {
  display: flex;
  align-items: baseline;
}
.sh > .h {
  flex: none;
}
.sh > .note {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh::after {
  content: '';
  flex: 1 1 20px;
  align-self: center;
  background: linear-gradient(90deg, var(--gold-lo), transparent);
}
/* строка заголовка списка: название слева, пояснение справа */
.rh {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.rh small {
}

/* ─── 15. Окно поверх меню ───────────────────────────────────────────────────────────────────────────────────────── */
/* затемнение и окно посередине; окно не выше экрана - на низком экране прокручивается затемнение (уголки и лента
   рамки не обрезаются, RULES v18.7: каждая кнопка достижима на экране высотой 300). Окно - внутри #app (#modals) и
   увеличено на ПК вместе с ним (--uiz, base.css), своего zoom нет: с 075 до 101 было своё - окна на ПК выходили в --uiz
   раз крупнее остального интерфейса (на 1366×768 - вдвое) */
.modal {
  position: fixed;
  z-index: 20;
  display: flex;
  overflow: auto;
  background: radial-gradient(circle at 50% 50%, rgba(10, 12, 16, 0.55), rgba(4, 5, 8, 0.85));
  overscroll-behavior: contain;
}
.modal > .win {
  flex: none;
}
/* окно появляется: затемнение проявляется, окно вырастает (как в 18.90; у итога боя и добычи - своё, .modal.reveal) */
.modal {
  animation: fade 0.15s ease-out;
}
.modal > .panel {
  animation: pop 0.2s ease-out;
}
/* появление окна: затемнение проявляется, окно вырастает (итог боя, добыча) */
@keyframes fade {
  from {
    opacity: 0;
  }
}
@keyframes pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}
.win {
}
.win.small {
}
.win.small p {
}
/* крестик окна (шаблон CloseX, 078) - на правом верхнем уголке рамки (не встречается ни с содержимым, ни с лентой
   названия); размер и место - облик WinClose (Widgets.dat) */
.wclose {
  position: absolute;
  z-index: 5;
}
/* окну с кнопкой закрытия или согласия («Закрыть», «Ок», «Забрать», «Да» / «Нет», «Отмена») крестик не нужен */
.panel:has(
    [data-close]:not([hidden]),
    [data-ok]:not([hidden]),
    [data-yes]:not([hidden]),
    [data-no]:not([hidden]),
    [data-y]:not([hidden]),
    [data-n]:not([hidden]),
    [data-cancel]:not([hidden]),
    [data-tag='Close']:not([hidden]),
    [data-tag='Ok']:not([hidden]),
    [data-tag='Yes']:not([hidden]),
    [data-tag='No']:not([hidden])
  )
  > .wclose {
  display: none;
}
.cols {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.col {
  display: grid;
  align-content: start;
}
.col.box {
  align-content: center;
}
.btnrow {
  display: flex;
  justify-content: center;
}
.list {
  display: grid;
  gap: 5px;
  min-height: 0;
}

/* ─── 16. Добыча и награды ───────────────────────────────────────────────────────────────────────────────────────── */
/* ячейки добычи: число под крупным значком, ниже подпись, без «+» (RULES v16); появляются по одной */
/* окно награды (64): лента, посередине главное - сундук в лучах (лучи под содержимым окна), ряд ячеек, кнопка */
.win.rwd {
  width: min(616px, calc(100vw / var(--uiz, 1) - 24px));
  padding: 30px 16px 16px;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.rwd .hero {
  position: relative;
  width: 100%;
  height: 100px;
  display: grid;
  place-items: center;
}
.rwd .hero > .glow {
  left: 50%;
  top: 50%;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
}
.rwd .hero > .ico {
  position: relative;
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 6px 8px #000);
}
.loot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.lootc {
  display: grid;
  justify-items: center;
  align-content: start;
  animation: lootIn 0.35s backwards;
}
.lootc > .ico {
  filter: drop-shadow(0 3px 3px #000);
}
.lootc > img {
  filter: drop-shadow(0 3px 3px #000);
}
.lootc > .q > .ico {
  filter: drop-shadow(0 3px 3px #000);
}
.lootc > .card {
}
.lootc b {
}
.lootc small {
}
.lootc small.new {
}
/* низкий экран (до 440 и 380, 076): места правил облика - сундук окна награды меньше, ячейки плотнее (значения -
   DefaultControls.dat Window Hero, Loot, LootItem Screen; лист облика из даты стоит раньше css, поэтому место - здесь,
   после основных правил) */
@media (min-aspect-ratio: 844/440) {
  .win .hero {
  }
  .win .hero > .ico {
  }
  .loot {
  }
  .lootc {
  }
}
@keyframes lootIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.85);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lootc {
    animation: none;
  }
}
/* «?» поверх сундука: что выпадет - не видно (скрытый сундук) */
.q {
  position: relative;
  display: grid;
  place-items: center;
}
.q::after {
  content: '?';
  position: absolute;
  text-shadow:
    0 0 4px #000,
    0 2px 0 #000;
}

/* ─── 17. Подсказка у элемента ───────────────────────────────────────────────────────────────────────────────────── */
/* подсказка у элемента (ui/widgets.js popover): облик подсказки (05), вне #app - своя крупность */
.pop {
  position: fixed;
  z-index: 30;
  display: grid;
  width: max-content;
}
.pop > b {
  display: flex;
  align-items: baseline;
}
.pop .ph {
  display: flex;
  align-items: baseline;
}
.lvt {
  background: linear-gradient(180deg, #3f5677, #1f2c42);
  box-shadow: 0 0 0 1px var(--gold);
}
.tl {
}
.tl b {
}
.tl.dim2 {
  font-size: 11px;
  color: var(--dim);
}
/* кнопка «!» (шаблон InfoMark, 229): квадратик, нажал - подсказка у элемента; размер и шрифт - Widgets.dat */
.InfoMark {
  display: grid;
  flex: none;
  place-items: center;
  padding: 0;
  background: linear-gradient(180deg, #3a4a66, #1a2232);
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    0 2px 4px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 0 #000;
  cursor: pointer;
}

/* ─── 18. Навык, деления очков ───────────────────────────────────────────────────────────────────────────────────── */
/* значок навыка (атлас навыков - ui/icons.js skillIcon) */
.si {
  display: inline-block;
  flex: none;
  background-repeat: no-repeat;
  border-radius: 7px;
  box-shadow: 0 0 0 1px #000;
}
/* очки навыка - ромбы; горят набранные */
.pips {
  display: flex;
}
.pips > i {
  transform: rotate(45deg);
  background: #0a0d12;
  box-shadow: 0 0 0 1px var(--gold-lo);
}
.pips > i.on {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-b));
  box-shadow:
    0 0 0 1px #000,
    0 0 4px rgba(255, 210, 110, 0.6);
}

/* ─── 19. Метки, ключ-значение, счётчики, переключатель, поле ввода ──────────────────────────────────────────────── */
.tags {
  display: flex;
  flex-wrap: wrap;
}
.tagc {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.tagc.lg {
  box-shadow: 0 0 0 1px rgba(95, 184, 90, 0.65);
}
.tagc > .ico,
.tagc > .si {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
/* параметры тремя столбцами: подпись, ниже число */
.kv2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(0, 0, 0, 0.3);
}
.kv2 b {
  display: block;
}
/* счётчик - мелкая плашка (победы, «в бою» и т.п.) */
.cnt {
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.cnt b {
}
/* переключатель (42-43) */
.tog {
  position: relative;
  display: inline-block;
  flex: none;
  background: linear-gradient(180deg, #2f3640, #525c6b);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.6),
    0 0 0 1.5px #000;
}
.tog::after {
  content: '';
  position: absolute;
  background: radial-gradient(circle at 50% 30%, #fff, #c9ced6);
  box-shadow: 0 1px 2px #000;
}
.tog[aria-pressed='true'] {
  background: linear-gradient(180deg, #1d6a2e, #36a94c);
}
.tog[aria-pressed='true']::after {
  left: auto;
  right: 2px;
}
/* поле ввода: тёмная капсула в золотой нити */
.inp {
  flex: 1;
  background: linear-gradient(180deg, rgba(4, 6, 10, 0.85), rgba(20, 26, 36, 0.85));
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(233, 192, 106, 0.35);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default; /* копировать можно (187: у остальной игры меню нет) */
}
.inp::placeholder {
  color: var(--dim);
}
.form {
  display: flex;
  align-items: center;
}

/* ─── 20. Перетаскивание башен колоды ────────────────────────────────────────────────────────────────────────────── */
/* башня взята - бледнеет; та, на которую положат, - светится; под пальцем - копия (ui/widgets.js deckDrag) */
[data-slot].lift {
  opacity: 0.35;
}
[data-slot].drop {
  box-shadow:
    inset 0 0 0 2px var(--gold-hi),
    0 0 12px rgba(255, 210, 110, 0.8);
}
.dragghost {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.08);
  opacity: 0.9;
}

/* ─── 21. Движение (076) ─────────────────────────────────────────────────────────────────────────────────────────── */
/* то, что двигалось в 18.90 и пропало при переносе наброска 074 (набросок - неподвижные кадры): лучи и свет ореолов,
   появление окон, наезд картины за рамкой, парящий кубок, искры. Только transform / opacity; при «меньше движения» -
   без них (base.css) */
/* картина за рамкой (арена, сезон пропуска) медленно наезжает: свой слой, обрезанный по рамке; картина - --art рамки */
.artl {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.artl::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--art) center / cover no-repeat;
  animation: kenburns 28s ease-in-out infinite alternate;
}
/* искры поднимаются от награды (кубок арены) */
.spark {
  position: absolute;
  left: 50%;
  bottom: 30%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff6d0;
  box-shadow: 0 0 8px 2px rgba(255, 224, 154, 0.9);
  pointer-events: none;
  opacity: 0;
  animation: rise 3.9s ease-in infinite;
}
.spark.s1 {
  margin-left: -34px;
}
.spark.s2 {
  margin-left: 26px;
  animation-delay: 1.3s;
}
.spark.s3 {
  margin-left: -6px;
  animation-delay: 2.6s;
}
@keyframes spin2d {
  to {
    transform: rotate(360deg);
  }
}
@keyframes breathe {
  50% {
    opacity: 0.75;
    transform: scale(1.1);
  }
}
@keyframes float {
  50% {
    transform: translateY(-8px);
  }
}
@keyframes rise {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.6);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(1);
  }
}
@keyframes kenburns {
  to {
    transform: scale(1.1) translate(-3%, 2%);
  }
}

/* ─── 22. Обучение (105) ─────────────────────────────────────────────────────────────────────────────────────────── */
/* окно обучения (js/ui/tutorial.js, data/tutorial/Tutorial.dat): поверх всего, кроме всплывающих сообщений; затемнение
   с круглыми окошками - картинка svg (нажатия не ловит: блокирует движок, пропуская окошки и табличку); у окошка -
   золотое кольцо; знак «нажми» - круги, «листай» - точка ходит вверх-вниз; табличка - внизу или вверху, на ПК -
   увеличена, как интерфейс (--uiz) */
#tut {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
#tut[hidden] {
  display: none;
}
/* плавно (108): окно появляется и уходит прозрачностью (data/tutorial/Tutorial.dat Flow FadeIn / FadeOut); поверх
   открыто окно игры («Сдаться?») - обучение спрятано и ждёт */
#tut:not([hidden]) {
  animation: tutfade var(--tin, 0.3s) ease-out;
}
#tut.out {
  opacity: 0;
  transition: opacity var(--tout, 0.25s) ease-in;
}
#tut.yield {
  visibility: hidden;
}
@keyframes tutfade {
  from {
    opacity: 0;
  }
}
#tut > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tutring {
  position: absolute;
  border-radius: 999px;
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 12px 3px rgba(233, 192, 106, 0.55);
  animation: tutring 1.1s ease-in-out infinite alternate;
}
@keyframes tutring {
  to {
    box-shadow:
      0 0 0 2px #fff1b8,
      0 0 18px 6px rgba(233, 192, 106, 0.8);
  }
}
.tutfx {
  position: absolute;
  width: 0;
  height: 0;
}
.tutfx.tap::before,
.tutfx.tap::after {
  content: '';
  position: absolute;
  left: -16px;
  top: -16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff1b8;
  animation: tuttap 1.2s ease-out infinite;
}
.tutfx.tap::after {
  animation-delay: 0.6s;
}
@keyframes tuttap {
  from {
    transform: scale(0.4);
    opacity: 1;
  }
  to {
    transform: scale(1.8);
    opacity: 0;
  }
}
.tutfx.swipe::before {
  content: '';
  position: absolute;
  left: -11px;
  top: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff1b8 0 35%, rgba(233, 192, 106, 0.5) 60%, transparent 72%);
  animation: tutswipe 1.6s ease-in-out infinite;
}
@keyframes tutswipe {
  0% {
    transform: translateY(var(--sw, 40px));
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(var(--sw, 40px) * -1));
    opacity: 0;
  }
}
/* табличка - всегда над кольцами окошек и знаком (114: «говорящая голова всегда должна быть ближним слоем, а эффект
   ниже»; кольца ставятся после неё) */
.tutp {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: flex-start;
  width: fit-content; /* по тексту, но не шире экрана без полей (узкий телефон - 600 точек) */
  margin: 0 auto;
  zoom: var(--uiz, 1);
  pointer-events: auto;
  animation: tutin var(--tin, 0.3s) ease-out;
}
@keyframes tutin {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
/* табличка плотнее обычного стекла: читается поверх поля боя */
.tutp.glass {
  background: linear-gradient(180deg, rgba(14, 19, 28, 0.96), rgba(14, 19, 28, 0.9));
}
.tuts {
  flex: 1;
  display: grid;
}
.tuts > p {
  white-space: pre-line;
}
.tutb {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.tutcnt {
}
.tutcp {
}
.tutpic {
  position: relative;
  justify-self: center;
}
.tutpic > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* схема пятиугольника (108) - одна картинка svg, все размеры - в её единицах (data/tutorial/Tutorial.dat Scheme):
   стрелки - золотые (кого атакует первым) или зелёные (кем бить), круги классов с рамкой, подписи с тёмной обводкой */
.tpa {
  stroke: var(--gold);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.tpsvg marker path {
  fill: var(--gold);
}
.tpsvg.cnt .tpa {
  stroke: #8fe58a;
}
.tpsvg.cnt marker path {
  fill: #8fe58a;
}
.tpn {
  fill: #1b2230;
  stroke: var(--gold);
  stroke-width: 2;
}
.tpl {
  fill: #fff1b8;
  font-weight: 700;
  stroke: rgba(5, 8, 12, 0.9);
  stroke-width: 3.5;
  stroke-linejoin: round;
  paint-order: stroke;
}
.tpsh {
  fill: #8fe58a;
  stroke: rgba(5, 8, 12, 0.9);
  stroke-width: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .tutring,
  .tutfx.tap::before,
  .tutfx.tap::after,
  .tutfx.swipe::before,
  .tutp,
  #tut:not([hidden]) {
    animation: none;
  }
}

/* ─── 23. Рамки боссов (263) ─────────────────────────────────────────────────────────────────────────────────────── */
/* с 317 - стили боссов: полоса, рамка портрета, табличка ника, место ордена, колонка боя; облик стиля - блок
   interface/BossStyles.dat (места окон, тон и шрифт текста - переменные --st-*, ui/frames.js toneVars).
   строка с рамкой босса (рейтинг, орден, друзья, выбор рамки; шаблон FrameRow - ui/frames.js): рамка - под содержимым
   строки (свой слой строки), во всю высоту строки (не ниже --fh - BossStyleView RowFrame; 268: «картинка не влазит»),
   с --fo от левого края (место в рейтинге - вне рамки); торцы картинки - по высоте строки (ширина к высоте - --fl,
   --fr), середина картинки тянется по ширине строки (--fm - во сколько раз картинка шире середины, --fx - где она на
   картинке). Фон строки - рамка: свой фон и кайма строки сняты; содержимое - с --fpl / --fpr от краёв (торцы его не
   закрывают), текст - с тенью: читается и над украшением торца */
.framed.framed {
  position: relative;
  isolation: isolate;
  min-height: var(--fh);
  padding-left: var(--fpl);
  padding-right: var(--fpr);
  background: none;
  box-shadow: none;
  text-shadow:
    0 1px 2px #000,
    0 0 5px rgba(0, 0, 0, 0.85);
}
/* рамка - высотой --fh из даты, по середине строки (280): места под портрет и ник (--fpl, --fpr, --sd, --sm) посчитаны
   по --fh; строка на телефоне выше на точку-другую (шрифт) - торцы не шире посчитанного, не расходятся с содержимым */
.FrameRow {
  position: absolute;
  z-index: -1;
  left: var(--fo, 0);
  right: 0;
  top: calc(50% - var(--fh) / 2);
  height: var(--fh);
  display: flex;
  pointer-events: none;
}
.FrameEnd {
  flex: none;
  height: 100%;
  aspect-ratio: var(--fl);
  background: var(--frame) left center / auto 100% no-repeat;
}
.FrameEndRight {
  aspect-ratio: var(--fr);
  background-position: right center;
}
/* середина: на пиксель под торцы - без щели на стыке */
.FrameMid {
  flex: 1;
  min-width: 0;
  margin: 0 -1px;
  background: var(--frame) var(--fx) center / var(--fm) 100% no-repeat;
}
/* строка с медальоном (268, ТЗ tools/hunt/rows_tz.py): портрет - под рамкой, в окне медальона (--sd - чуть больше
   окна, край - под кромкой), кольца портрета нет; ник и прочее - за медальоном (--sm). !important: размер портрета
   строки задан у него самого */
.framed.slotted > .ava {
  z-index: -2;
  top: var(--sdy);
  margin-right: var(--sm);
  width: var(--sd) !important;
  height: var(--sd) !important;
  border-radius: 50%;
  box-shadow: none;
}
/* строка без рамки (288, ui/frames.js baseRow): раскладка - как у строки с медальоном (портрет, ник и кубки на тех же
   местах, та же высота), вид свой: плашка от середины портрета до правого края высотой обычной полосы стиля (--bt -
   верх от середины строки, --bh - высота; BossStyleView RowBand, 318), портрет - над ней в кольце (как в окне
   медальона) */
.FrameBase {
  left: var(--sx, var(--fo, 0));
  top: calc(50% + var(--bt, -0.36 * var(--fh)));
  height: var(--bh, calc(var(--fh) * 0.72));
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(36, 44, 58, 0.96), rgba(17, 22, 30, 0.96));
  box-shadow:
    inset 0 0 0 1px var(--gold-lo),
    0 2px 6px rgba(0, 0, 0, 0.5);
}
.framed.based > .ava {
  z-index: auto;
  box-shadow:
    0 0 0 2px var(--gold-lo),
    0 0 0 4px #0e131a,
    0 0 0 5px rgba(233, 192, 106, 0.35),
    0 3px 6px rgba(0, 0, 0, 0.6);
}
/* тон стиля в строке (317, владелец 31.10: «для каждого стиля надо отдельно подбирать тональность текста в нем, шрифт,
   расположение боксов»): ник - свой цвет, шрифт и сдвиг, цифры (уровень, кубки) - свой цвет и сдвиг (BossStyle
   TextColor, Font, NickShift, NumColor, NumShift) */
.framed[data-style] {
  color: var(--st-num, inherit);
}
.framed[data-style] [data-tag='Name'] {
  color: var(--st-text, inherit);
  font-family: var(--st-font, inherit);
}
.framed[data-style] [data-tag='Name'],
.framed[data-style] [data-tag='Level'] {
  translate: var(--st-nx, 0) var(--st-ny, 0);
}
.framed[data-style] [data-tag='Level'],
.framed[data-style] [data-tag='Trophies'] {
  color: var(--st-num, inherit);
}
.framed[data-style] [data-tag='Trophies'] {
  translate: var(--st-tx, 0) var(--st-ty, 0);
}
/* ник и уровень - по полосе стиля (ui/frames.js bandVars, BossStyle RowBand): полоса тоньше обычной - мельче
   (--st-cs), середина - на середине полосы (--st-cy) */
.framed[data-style] .stxt {
  translate: 0 var(--st-cy, 0);
  scale: var(--st-cs, 1);
  transform-origin: left center;
}
/* своя строка в рейтинге с рамкой: вместо синей каймы - синее свечение по краю рамки */
.framed.me > .FrameRow {
  filter: drop-shadow(0 0 2px var(--blue-hi)) drop-shadow(0 0 5px rgba(111, 182, 255, 0.55));
}
/* рамка портрета стиля (бой, «игрок против противника», окно противника, выбор стиля; ui/frames.js): поверх
   портрета, под меткой уровня (рамка - первой в портрете); окно рамки (--pw - доля её стороны) - по портрету, кромка
   окна заходит на край портрета на --po (268: «портрет чуть шире и налазит прям на рамку обрезая её внутренний
   контур»), середина окна (--pcx, --pcy - доли картинки, 317: у ступеней GPT окно не всегда в середине) - на середине
   портрета. Портрет с рамкой - без кольца, углы - как у окна (--pr), размер и место под украшения - облик портрета с
   меткой data-plate (State Command = "plate"). !important: портреты в окнах обрезают своё по кругу и квадрату
   (overflow) и рисуют кольцо, рамка выходит за портрет */
.ava.ava[data-plate] {
  position: relative;
  overflow: visible !important;
  border-radius: var(--pr);
  box-shadow: none !important;
}
.FramePlate.ico {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc((100% - 2 * var(--po)) / var(--pw));
  height: auto;
  max-width: none;
  transform: translate(calc(var(--pcx, 0.5) * -100%), calc(var(--pcy, 0.5) * -100%));
  pointer-events: none;
}
/* метка уровня портрета - над подложкой и кромкой окна */
.ava[data-plate] > .lv,
.ava[data-plate] > .chip {
  z-index: 2;
}
/* окно с портретом в подложке (колонка стороны в бою): стекло - не над подложкой, а ниже её верха (облик: Decor Before
   Top колонки), подложка - навершием над стеклом (268: «сверху торчит часть интерфейса, когда используется рамка… но
   если её просто убрать, будет пусто») */
.glass:has(> [data-plate]) {
  background: none;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.glass:has(> [data-plate])::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(14, 19, 28, 0.84), rgba(14, 19, 28, 0.66));
  border: 1px solid rgba(233, 192, 106, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  pointer-events: none;
}