/* ═══ css/menu.css ════════════════════════════════════════════════════════════════════════════════════════════════════
   Меню (мета-игра) - горизонтально, как бои: слева колонка разделов, сверху строка игрока и ресурсов (ниже
   свободной полосы под шапкой просмотрщика), справа - экран раздела. Детали (панели, кнопки, плитки) - css/ui.css.
   Фон - стена интерфейса игры (WindowMarbleDown), сильно притемнённая: фактура есть, но под текстом спокойно.

   Разделы файла:
     1. Оболочка меню
     2. Строка игрока
     3. Колонка разделов
     4. Экран раздела
     5. Главный экран
     6. Раздел: рамка и правая колонка
     7. Подсказки главного
     8. Окно персонажа
     9. Ячейки сундуков
     10. Отряды
     11. Магазин
     12. Навыки
     13. Арены и дорога кубков
     14. Поиск противника и «игрок против противника»
     15. Итог боя
     16. Видимость по репутациям
     17. Артефакты
     18. Рейтинг лидеров
     19. Поход
     20. Ордена
     21. Войны орденов
     22. Боевой пропуск
     23. Вход и регистрация
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Оболочка меню ───────────────────────────────────────────────────────────────────────────────────────────── */
/* под меню - тёмный сланец с мягким светом сверху (3D за меню нет); шапка, колонка и экран раздела - по краям экрана
   (набросок 064 нарисован на 844×390: те же места от краёв, вырезы телефона - safe-area) */
#menu {
  --sl: var(--safe-l);
  --sr: var(--safe-r);
  --top: calc(var(--top-free) + 6px);
  --rail: 74px;
  /* правая колонка; рамка раздела и арена кончаются на --side + 14 от края: зазор 8 и отступ колонки от края 6 (кружки
     уведомлений плиток не обрезаются - 076) */
  --side: 180px;
  position: absolute;
  z-index: 1;
  background: radial-gradient(120% 90% at 50% 0%, #26344a 0%, #141c28 55%, #0b1017 100%);
}

/* ─── 2. Строка игрока ───────────────────────────────────────────────────────────────────────────────────────────── */
/* шапка - стеклянная полоса: портрет в кольце энергии, лига и ник, опыт; ресурсы; круглые кнопки */
#hdr {
  position: absolute;
  left: calc(8px + var(--sl));
  right: calc(8px + var(--sr));
  top: var(--top);
  display: flex;
  align-items: center;
  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);
}
#hdr .me {
  display: flex;
  align-items: center;
}
/* энергия - кольцо вокруг портрета (--e - доля; ui/menu.js), число - янтарная табличка слева, уровень - синяя справа */
#hdr .ener {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  background: conic-gradient(var(--gold-b-hi) 0 var(--e, 100%), rgba(0, 0, 0, 0.7) var(--e, 100%) 100%);
  box-shadow:
    0 0 0 1.5px #0a0d12,
    inset 0 0 8px rgba(255, 210, 110, 0.25);
}
#hdr .ener.low {
  background: conic-gradient(var(--red-hi) 0 var(--e, 0%), rgba(0, 0, 0, 0.7) var(--e, 0%) 100%);
}
#hdr .ener > .ava {
  width: 36px !important;
  height: 36px !important;
  box-shadow: 0 0 0 1.5px #0a0d12;
}
#hdr .ener > .chip {
}
#hdr .ener > .chip.en {
}
#hdr .ener > .chip.lvl {
}
#hdr .ener > .dot {
}
#hdr .who {
  display: grid;
}
#hdr .who > b {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hdr .who > b > .ico {
}
#hdr .who > .bar {
}
#hdr .hres {
  display: flex;
  align-items: center;
}
#hdr .rbtns {
  display: flex;
  align-items: center;
}
#hdr .rbtns > .rbtn {
}

/* ─── 3. Колонка разделов ────────────────────────────────────────────────────────────────────────────────────────── */
/* разделы - колонка плиток слева: значок во всю высоту плитки над подписью, кружок-счётчик; выбранный - в золоте */
#rail {
  position: absolute;
  left: calc(8px + var(--sl));
  top: calc(var(--top) + 56px);
  width: var(--rail);
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  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);
}
#rail .navb {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: 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);
}
#rail .navb > .ico {
  filter: drop-shadow(0 2px 2px #000);
}
#rail .navb[aria-current='page'] {
  color: var(--gold-hi);
  background: linear-gradient(180deg, #3f5677, #263852);
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 0 10px rgba(233, 192, 106, 0.35);
}
#rail .navb > .badge {
}

/* ─── 4. Экран раздела ───────────────────────────────────────────────────────────────────────────────────────────── */
/* экран раздела - справа от колонки, под шапкой; неподвижный (207, владелец 26.10: «почему я могу двигать области
   внутри меню? Они должны быть неподвижны»): не прокручивается ни вверх-вниз, ни вбок - раздел во всю его высоту и
   ужимается под неё, прокручиваются только длинные списки внутри (отряды по лигам, ордена, карта похода); уголки
   рамки выступают за низ раздела - видны, а не обрезаны (было - прокрутка: на 4 px уголками на любом экране, на
   35-40 px на низком - рамка не ужималась ниже 305) */
#screen {
  position: absolute;
  left: calc(16px + var(--rail) + var(--sl));
  right: calc(8px + var(--sr));
  top: calc(var(--top) + 56px);
  overflow: visible;
}

/* ─── 5. Главный экран ───────────────────────────────────────────────────────────────────────────────────────────── */
/* арена в рамке слева сверху, колода под ней, справа - сундук, пропуск, рейтинг, навыки */
.home {
  position: relative;
}
.home .arena {
  position: absolute;
  right: calc(var(--side) + 14px);
}
.home .arena > .shade {
  position: absolute;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(8, 11, 16, 0.2) 0%,
    rgba(8, 11, 16, 0) 35%,
    rgba(8, 11, 16, 0.55) 62%,
    rgba(8, 11, 16, 0.88) 100%
  );
}
.home .arena > .ribbon {
}
.home .arena > .banner {
  position: absolute;
}
/* кубок лиги в лучах: блок - всё место между лентой и дорогой кубков, кубок и ореол - по его середине, размер - от его
   высоты (078); ширина кубка и ореола - по высоте (aspect-ratio при заданной высоте - и в Safari) */
.home .cupbox {
  position: absolute;
  pointer-events: none;
}
.home .cupbox > .glow {
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.home .cupbox > .ico {
  position: absolute;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 6px #000);
  animation: cupFloat 3.4s ease-in-out infinite;
}
/* кубок парит (как в 18.90): своё смещение кубка - translate(-50%, -50%), подъём - в той же записи */
@keyframes cupFloat {
  50% {
    transform: translate(-50%, calc(-50% - 6px));
  }
}
.home .road {
  position: absolute;
  display: grid;
}
.home .cap2 {
  display: flex;
  justify-content: space-between;
  text-shadow:
    0 1px 1px #000,
    0 0 4px #000;
  white-space: nowrap;
}
/* не влезло - обрезка с многоточием, а не наезд строк друг на друга (213) */
.home .cap2 > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home .cap2 > :last-child {
}
.home .ln2 {
  display: flex;
  align-items: center;
}
.home .ln2 > .ico {
  filter: drop-shadow(0 2px 2px #000);
}
.home .ln2 > .bar {
  flex: 1;
}
.home .ln2 > .bar > b {
}
.home .stat {
  position: absolute;
  display: flex;
}
.home .stat.l {
}
.home .stat.r {
}
/* «В бой» - на арене, по середине её ширины */
.home .play {
  position: absolute;
  z-index: 5;
  left: calc((100% - var(--side) - 14px) / 2);
  transform: translateX(-50%);
}
.home .play:active:not(:disabled):not(.off) {
  transform: translate(-50%, 3px); /* вес - как у .btn:active (ui.css), иначе нажатая уезжает вправо на полширины */
}
/* колода под ареной: «Колода 7/8», шаблоны 2×2, башни в один ряд - карты сжимаются под ширину (v18.18) */
.home .deck {
  position: absolute;
  right: calc(var(--side) + 14px);
  display: flex;
  align-items: center;
}
.home .dh {
  flex: none;
  display: grid;
  /* подпись и шаблоны 2×2 - в высоту лотка: шаблоны сжимаются, на рамку не наезжают (076) */
  max-height: 100%;
  grid-template-rows: auto minmax(0, auto);
  align-content: center;
}
.home .dh > b {
  white-space: nowrap;
}
.home .dh > b > small {
}
.home .dh > .tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
}
.home .dh .tab {
  min-height: 0;
}
.home .deckrow {
  flex: 1;
  display: flex;
  align-items: center;
}
.home .deckrow > .card {
  flex: 0 1 54px;
  aspect-ratio: 54 / 64;
}
/* справа: сундук за победы - выше, пропуск и рейтинг - по содержимому, навыки - остальное (112: сундук 98 -> 72 - навыкам
   3 ряда значков во всю ширину, выбор владельца) */
.home .right {
  position: absolute;
  width: var(--side);
  display: grid;
  grid-template-rows: 72px 44px 44px minmax(0, 1fr);
}
.home .tile {
  position: relative;
  display: flex;
  align-items: center;
}
.home .tile > .ico {
  filter: drop-shadow(0 3px 3px #000);
}
.home .tile > .q > .ico {
  filter: drop-shadow(0 3px 3px #000);
}
.home .tile > div:not(.th):not(.skl) {
  display: grid;
}
.home .tile b {
}
.home .tile small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home .tile > .badge {
}
/* сундук за победы: сундук с «?», надпись, полоса - столбиком по центру рамки, мимо уголков (Т76); высота - своего ряда
   колонки (112: не 88 ячейки раздела «Сундуки» - класс .chest общий) */
.home .tile.chest {
  flex-direction: column;
  justify-content: center;
  height: auto;
}
.home .tile.chest > * {
  flex-shrink: 0;
}
/* лучи сундука - в обрезке по рамке (214): за плитку и на кромку не выходят */
.home .tile.chest > .gclip {
  position: absolute;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.home .tile.chest > .gclip > .glow {
  transform: translate(-50%, -50%);
}
/* бусты сундука (214) - столбиком над нижним левым углом: мимо полосы побед и надписи (группа в плитке - сетка,
   .home .tile > div) */
.home .tile.chest > .bbgs {
  grid-auto-flow: row;
}
/* бусты у «В бой» (214) - ряд по середине нижней кромки кнопки */
.home .play > .bbgs {
  transform: translateX(-50%);
}
.home .tile.chest .q > .ico {
}
/* сундук готов (3 победы) - покачивается (как в 18.90) */
.home .tile.chest.ready .q > .ico {
  animation: hwobble 1.6s ease-in-out infinite;
}
@keyframes hwobble {
  0%,
  70%,
  100% {
    transform: rotate(0);
  }
  76% {
    transform: rotate(-8deg);
  }
  84% {
    transform: rotate(7deg);
  }
  92% {
    transform: rotate(-4deg);
  }
}
.home .tile.chest .q::after {
}
.home .tile.chest > .bar {
  flex: none;
}
.home .tile.chest > .bar > b {
}
.home .tile.chest > .badge {
}
/* сундук не готов - нажатие качает его (ui/screens/hiddenChest.js) */
.home .tile.chest.nope {
  animation: nope 0.35s;
}
@keyframes nope {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
/* навыки ветки: значки с очками, следующий - тенью и с какого уровня */
.home .tile.skills {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.home .th {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* подпись плитки (сколько очков, ветка не выбрана) - переносится внутри плитки, а не уходит за край (109) */
.home .th {
  flex-wrap: wrap;
  column-gap: 6px;
}
.home .th > small {
  display: inline;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-align: right;
}
/* ветка не выбрана (111): что делать - строкой по середине плитки, обычным шрифтом */
.home .tile.skills > .skemp {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
/* вся ветка (104: 10 навыков) - по 4 в ряд (109), 3 ряда, значки вплотную во всю ширину плитки, от левого края
   (112, выбор владельца - как на его снимке 19.20), зазоры - Home.dat SkillList (просвет в точку между рамками) */
.home .skl {
  container-type: size;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  grid-auto-rows: max-content;
  justify-content: start;
  align-content: start;
  flex: 1 1 0;
  min-height: 0;
}
/* навык - квадрат: 4 в ряд во всю ширину с зазорами SkillList (3 по 5 точек); низкий экран - чтобы 3 ряда (2 зазора по
   5) влезли по высоте */
.home .skl > .sk {
  position: relative;
  display: block;
  width: min(calc((100cqw - 15px) / 4), calc((100cqh - 10px) / 3));
  aspect-ratio: 1 / 1;
}
.home .skl > .sk > span:first-child {
  display: block;
  width: 100%;
  height: 100%;
}
.home .skl > .sk > .si,
.home .skl > .sk > span > .si {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: 7px;
  box-shadow:
    0 0 0 1px #000,
    0 0 0 2px rgba(233, 192, 106, 0.5);
}
/* очки навыка - деления внизу значка */
.home .skl > .sk > .pips {
  position: absolute;
  justify-content: center;
  align-items: center;
  background: linear-gradient(0deg, rgba(5, 8, 12, 0.92), rgba(5, 8, 12, 0.6));
}
.home .skl > .sk > .pips > i {
}
.home .skl > .sk.lock .si {
  filter: grayscale(1) brightness(0.45);
  box-shadow: 0 0 0 1px #000;
}
/* открытый навык без очков - тускло (свободное место плитки, 076) */
.home .skl > .sk.idle .si {
  filter: grayscale(0.6) brightness(0.6);
  box-shadow:
    0 0 0 1px #000,
    0 0 0 2px rgba(233, 192, 106, 0.2);
}
/* с какого уровня - по середине значка, не уже его («37 ур.» шире мелкого значка - выходит за края поровну, не дальше
   половины зазора: значки вплотную, 111) */
.home .skl > .sk.lock > .lvl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100%;
  box-sizing: border-box;
  padding: 0;
  display: grid;
  place-items: center;
  white-space: nowrap;
  background: rgba(5, 8, 12, 0.88);
}
/* места облика низкого экрана (Home.dat LevelChip Screen): без них правило выше перебивает облик из даты (урок 076) */
@media (min-aspect-ratio: 844/400) {
  .home .skl > .sk.lock > .lvl {
  }
}

/* ─── 6. Раздел: рамка и правая колонка ──────────────────────────────────────────────────────────────────────────── */
/* раздел меню (набросок 074, вид 064): слева - рамка раздела (.mp, лента сверху), справа - колонка (.rc) с панелью
   выбранного (.rp) и плитками на стекле (.rt); внизу рамки может лежать лоток (.tray: колода) - тогда рамка короче
   (.short). Ширина колонки - --side (как у главного) */
.sect {
  position: relative;
}
.sect > .mp {
  position: absolute;
  right: calc(var(--side) + 14px);
  display: flex;
  flex-direction: column;
}
.sect > .mp.short {
}
.sect > .mp.bare {
}
.mp > .ribbon {
}
.mp > .ribbon .emb {
}
.sect > .rc {
  position: absolute;
  width: var(--side);
  display: flex;
  flex-direction: column;
}
.rt {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
}
.rt > .ico {
  flex: none;
  filter: drop-shadow(0 3px 3px #000);
}
.rt > div {
  display: grid;
}
.rt b {
}
.rt small {
}
.rt.sel {
  background: linear-gradient(180deg, rgba(63, 86, 119, 0.92), rgba(38, 56, 82, 0.92));
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 0 12px rgba(233, 192, 106, 0.4);
}
.rt.sel b {
}
.rt.c {
  justify-content: center;
}
.rt > .badge {
}
.rp {
  position: relative;
  flex: none;
  display: grid;
  justify-items: center;
}
.rp > b {
}
.rp > small {
}
.rp > .btn {
}
.rp > .gift {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.rp > .gift > .note {
}
.star2 {
  flex: none;
  text-shadow:
    0 2px 2px #000,
    0 0 8px rgba(255, 210, 110, 0.6);
}
.sect > .tray {
  position: absolute;
  right: calc(var(--side) + 14px);
  display: flex;
  align-items: center;
}

/* ─── 7. Подсказки главного ──────────────────────────────────────────────────────────────────────────────────────── */
/* подсказка отряда - шире, навыка - уже (набросок 074, экраны 1б, 1в) */
.pop:has(.kv2) {
}

/* ─── 25а. Настройки ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* настройки (33): строки - переключатель и подпись, громкость - подпись, ползунок (заполнение золотом до --v), проценты;
   «Как играть» раскрывается; «Готово», «Начать заново»; версия */
.win.setwin {
  width: min(640px, calc(100vw / var(--uiz, 1) - 24px));
  padding: 28px 18px 14px;
  display: grid;
  gap: 9px;
  text-align: left;
}
.setwin > .ln2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.setwin > .ln2 > .vname {
  width: 150px;
  flex: none;
}
.setwin > .ln2 > .vval {
  width: 44px;
  flex: none;
  text-align: right;
}
.slider {
  flex: 1;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-b), var(--gold-b-hi) var(--v, 50%), #10151d var(--v, 50%));
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.6),
    0 0 0 1px #000;
}
.slider::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-b), var(--gold-b-hi) var(--v, 50%), #10151d var(--v, 50%));
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.6),
    0 0 0 1px #000;
}
.slider::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: radial-gradient(circle at 50% 30%, #fff, #c9ced6);
  box-shadow: 0 1px 3px #000;
}
.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #fff, #c9ced6);
  box-shadow: 0 1px 3px #000;
}
.setwin > .howto {
  font-size: 13px;
}
.setwin > .howto > summary {
  font: 700 14px/1.2 var(--display);
  color: var(--gold-hi);
  cursor: pointer;
}
.setwin > .howto > p {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text);
}
.setwin > .btnrow {
  gap: 8px;
}
/* кто вошёл и «Выйти из учётной записи» (085) */
.setwin > .accl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--dim);
}
.setwin > .ver {
  text-align: center;
  font-size: 11px;
  color: var(--dim);
}

/* ─── 25б. Аватар ────────────────────────────────────────────────────────────────────────────────────────────────── */
/* окно аватара (34, 34а): слева портрет крупно, цена, «Применить», «Закрыть»; справа заголовок с вкладками, готовые
   портреты сеткой (цена - в углу) или набор лица и строки слоёв со стрелками */
.win.avawin {
  width: min(780px, calc(100vw / var(--uiz, 1) - 24px));
  padding: 14px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  text-align: left;
}
.avawin > .ul {
  display: grid;
  gap: 8px;
  justify-items: center;
  align-content: start;
}
.avawin > .ul .ava {
  width: 150px !important;
  height: 150px !important;
}
.avawin > .ul > .btn {
  width: 100%;
}
.avawin > .ul > .avcost {
  font: 700 14px/1.2 var(--display);
  color: var(--gold-hi);
}
.avawin > .avr2 {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}
.avr2 > .sh > .hd {
}
.avr2 > .sh > .tabs {
}
.avr2 > .sh > .tabs > .tab {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.avr2 > .sh > .tabs .gemb > .ico {
}
.avbody {
  display: grid;
  align-content: start;
  max-height: calc(100vh / var(--uiz, 1) - 110px);
  overflow: hidden auto;
  scrollbar-width: thin;
}
.avgrid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
.avc {
  position: relative;
  display: grid;
  /* 078: без столбца ячейка росла по длинному имени («Крестьянин» на ПК шире ячейки) - картинка залезала на соседей */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 2.3em;
  justify-items: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  cursor: pointer;
}
.avc .ava {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  box-shadow: none;
}
.avc.sel {
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 0 8px rgba(233, 192, 106, 0.45);
}
.avc > .gp {
  position: absolute;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
}
.avc > .gp .gemb {
}
.avc > .gp .ico {
}
.tabs.sets {
  display: flex;
  flex-wrap: wrap;
}
.tabs.sets > .tab {
}
.avsel {
  display: grid;
}
.avr {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.avr > .rbtn {
}
.avr > div {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.avr b {
}
.avr small {
  white-space: nowrap;
}
/* высокий экран (ПК, планшет): портрет слева крупнее, сетка уже - по 7 (078: по 9 на 1366×768 ячейка 58 точек, а
   «Крестьянин» - 72, имена слипались) */
@media (max-aspect-ratio: 844/480) {
  .avgrid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
/* низкий экран (до 400): места правил облика - строки слоёв ниже (значения - AvatarEditor.dat LayerRows, LayerRow) */
@media (min-aspect-ratio: 844/400) {
  .avsel {
  }
  .avr {
  }
  .avr > .rbtn {
  }
}

/* ─── 8. Окно персонажа ──────────────────────────────────────────────────────────────────────────────────────────── */
/* слева - портрет, ник, номер игрока, смена портрета, «Закрыть»; справа - вкладки; «Профиль» - уровень, энергия,
   усиления; «Друзья» (277 - своей вкладкой) - друзья (переписка - на месте друзей); прочие вкладки - там же, во всю
   ширину справа */
.win.charwin {
  width: 804px;
  height: min(362px, calc(100dvh / var(--uiz, 1) - 40px));
  min-height: 300px;
  padding: 32px 14px 12px;
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px 12px;
}
.charwin > .cprof {
  grid-column: 1;
  grid-row: 1 / 3;
  min-height: 0;
  display: grid;
  /* 078: без столбца колонка росла по форме ника - «Готово» вылезал на 63 точки */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: 10px;
  padding: 14px 10px;
  text-align: center;
}
.cprof .ava {
  width: 104px !important;
  height: 104px !important;
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 0 4px #0a0d12;
}
.cprof > b {
  display: flex;
  align-items: center;
}
.cprof > b > .ico {
}
/* ник своей рамкой (213): не шире строки, длинный - с многоточием, ✎ рядом */
.cprof > b > .NickText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cprof .ed {
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #3a465c, #222b3a);
  box-shadow:
    inset 0 0 0 1px var(--gold-lo),
    0 0 0 1px #0a0d12;
}
.cprof > .form {
}
.cprof > .form > .inp {
  flex: 1;
  min-width: 0;
}
.cprof > .form > .btn {
  flex: none;
}
/* под строкой ника - правило и что не так (085) */
.cprof > .ahint {
  text-align: center;
}
/* подсказки окон входа видны по фокусу (раздел 23), а под ником - всегда, пока строка ника открыта */
.cprof > .ahint:not([hidden]) {
  display: block;
}
/* 103: подпись «номер игрока» - одной строкой, длинный номер - многоточием (подпись вставала в две строки, и кнопки
   ниже уезжали за рамку колонки) */
.pid {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
/* 103: пока открыта строка ника, номера нет - колонка не выше рамки, «Сменить аватар» не налезает на «Закрыть» */
.cprof:has(> .form:not([hidden])) > .pid {
  display: none;
}
.pid > b {
  min-width: 0;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default; /* копировать можно (187: у остальной игры меню нет) */
  overflow: hidden;
  text-overflow: ellipsis;
}
.pid > .cpy {
}
.cprof > .btn {
}
.charwin > .cclose {
  grid-column: 1;
  grid-row: 3;
}
.charwin > .ctabs {
  grid-column: 2 / 4;
  grid-row: 1;
}
.ctabs > .tab {
  flex: 1;
  min-width: 0; /* пять вкладок (244): ряд ужимается под окно, а не раздвигает его */
  display: flex;
  align-items: center;
  justify-content: center;
}
.charwin > .cmid {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
}
.cstat {
  display: grid;
}
.cl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.cl > small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cstat > .bar {
}
.cstat > .bar > b {
}
.cstat > .cl:nth-of-type(2) {
  margin-top: 3px;
}
.boosts {
  display: grid;
  align-content: start;
  overflow: auto;
}
.brow {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
}
.brow > .ico {
  filter: drop-shadow(0 2px 2px #000);
}
.brow > div {
  display: grid;
}
.brow b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brow small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brow > .l {
  white-space: nowrap;
}
.charwin > .cfr {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
}
.cfr .inp {
}
.frl {
  display: grid;
  align-content: start;
  overflow: auto;
}
/* строка друга - как строка рейтинга (249): портрет, лига и ник, где он, кубки, кнопки; в игре - зелёная кайма. Список
   - во всю ширину вкладки «Друзья» (277; в 273 был узким - строка шла в три строчки) */
.frw {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  align-items: center;
}
/* строка с медальоном (268): портрет - своего размера, в окне медальона; с подложкой рамки (273: полоса не встала) - с
   местом под её украшения */
.frw.slotted,
.frw:has(> .ava[data-plate]) {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.frw.on {
  box-shadow:
    inset 0 0 0 1.5px rgba(110, 220, 120, 0.7),
    inset 0 0 10px rgba(110, 220, 120, 0.25);
}
.frw > div:not(.FriendActs) {
  display: grid;
  min-width: 0;
}
.frw b {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frw b > .lgb {
  flex: none;
}
.frw > .score {
  justify-self: end;
  white-space: nowrap;
}
/* кнопки - в ряд (запрос в друзья: «Принять» и «Отклонить» - рядом, строка не выше рамки, 277) */
.FriendActs {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.FriendActs > [hidden] {
  display: none;
}
/* «Запросы закрыты» (256) - в две строки, чтобы ник в строке не обрезало */
.FriendActs > .closed {
  max-width: 76px;
  white-space: normal;
  line-height: 1.1;
}
/* запросы в друзья вкл/выкл (256): подпись и переключатель в шапке друзей */
.AskLine {
  display: flex;
  align-items: center;
  align-self: center;
}
/* «Запросы в друзья» - подпись над их строками */
.FriendHead {
  text-transform: uppercase;
}
.frw small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frw small.on {
}
.cmsg small.on {
}
.frw > .badge {
}
/* переписка - на месте друзей */
.cmsg .rh > b {
  display: flex;
  align-items: center;
}
.cmsg .back {
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 1px var(--gold-lo);
}
.cmsg > .msgs {
  flex: 1;
  overflow: auto;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
.msgs {
  display: grid;
  align-content: start;
}
.msg {
  background: rgba(0, 0, 0, 0.3);
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default; /* копировать можно (187: у остальной игры меню нет) */
}
.msg > b {
}
.msg > small {
}
.msg.me {
  background: rgba(63, 86, 119, 0.35);
}
/* вкладки репутаций, достижений, витрины - на месте середины и друзей */
.charwin > .cpane {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  min-height: 0;
  overflow: auto;
}
.reprows {
  display: grid;
  align-content: start;
}
/* статистика (138): группы колонками по ширине вкладки, строка - подпись слева, число справа (цифры одной ширины) */
.stpane {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.stpane > small {
  grid-column: 1 / -1;
}
.stgrp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.strow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.strow > b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.reprow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.reprow > .ico {
  grid-row: span 3;
}
.reprow > .ico.off {
  filter: grayscale(1) brightness(0.5);
}
.reprow > b {
}
.reprow > b > .deg {
  font-style: normal;
}
.reprow > .bar {
  grid-column: 2;
}
.reprow > .bar > b {
}
.reprow > small {
  grid-column: 2;
}
.reprow > .btn {
  grid-row: 1 / span 3;
  grid-column: 3;
}
.shw {
  display: grid;
  align-content: start;
}
.shslots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.shs {
  display: grid;
  justify-items: center;
}
.shs > .ico {
  filter: drop-shadow(0 4px 5px #000);
}
.shs > b {
}
.shs > small {
}
.shall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.sha {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
}
.sha > .ico {
  grid-row: span 2;
}
.sha > b {
}
.sha > small {
}
.sha.on {
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 0 8px rgba(233, 192, 106, 0.35);
}
.sha.on::after {
  content: '\2713'; /* ✓ - кодом: не зависит от кодировки, в которой отдан файл */
  position: absolute;
}
/* вкладка «Стили» (263, ui/frames.js; 277 - в разделе облавы; 282 - было «Рамки»): как тебя видят - своя строка
   рейтинга во всю ширину, под ней портрет в бою с подложкой и «Без стиля»; ниже - боссы (281, владелец 30.10: «название
   босса по центру… рамку по центру меж двух линий… линии можно немного растянуть… рамка будет отображаться от нажатой
   строки»; было - 4 рамки ступеней по две в ряд): шапка - линии по краям и стиль нажатой ступени - рамка портрета (282:
   «И слева от строки располагать ещё рамку») и строка с именем босса посередине, под ними - 4 ступени кнопками в ряд */
.FramesPane {
  display: grid;
  align-content: start;
}
.FramesPreview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}
.FramesPreviewRow {
  display: grid;
  grid-column: 1 / -1;
  min-width: 0;
}
.FramesNone {
  justify-self: end;
}
.FramesPreviewAva {
  position: relative;
  display: grid;
  place-items: center;
}
.FramesNone.on {
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 0 8px rgba(233, 192, 106, 0.35);
}
.FramesBosses {
  display: grid;
  align-content: start;
}
.FrameBoss {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.FrameBossHead {
  display: grid;
  grid-template-columns: minmax(12px, 1fr) auto auto minmax(12px, 1fr);
  align-items: center;
  min-width: 0;
}
/* линия: от края к рамке - ярче; правая - зеркально */
.FrameLine {
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(233, 192, 106, 0), var(--gold));
  box-shadow: 0 0 4px rgba(233, 192, 106, 0.35);
}
.FrameLineR {
  transform: scaleX(-1);
}
/* рамка шапки: имя и побед - по середине между торцами (поля - ui/frames.js, --fpl, --fpr); закрытая ступень - тёмная */
.FrameBossPlate {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  min-width: 0;
  text-align: center;
}
.FrameBossPlate > b,
.FrameBossPlate > small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.FrameBossPlate.lock > .FrameRow,
.FrameBossAva.lock .FramePlate {
  filter: grayscale(0.85) brightness(0.55);
}
/* рамка портрета шапки (282): подложка из боя на своём портрете - слева от строки */
.FrameBossAva {
  position: relative;
  display: grid;
  place-items: center;
}
.FrameTiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* ступень - кнопка: нажатая (рамка в шапке) - золотой кромкой, своя выбранная - золотым фоном, закрытая - тусклая */
.FrameCell {
  position: relative;
  display: grid;
  place-content: center;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 0 1px rgba(233, 192, 106, 0.2);
}
.FrameCell > b,
.FrameCell > small {
  overflow: hidden;
  text-overflow: ellipsis;
}
.FrameCell.lock {
  opacity: 0.55;
}
.FrameCell.on {
  background: linear-gradient(180deg, rgba(233, 192, 106, 0.32), rgba(233, 192, 106, 0.12));
}
.FrameCell.sel {
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    0 0 8px rgba(233, 192, 106, 0.35);
}

/* ─── 8а. Карточка героя ─────────────────────────────────────────────────────────────────────────────────────────── */
/* 244: вкладка «Герой» окна персонажа; 248 - кукла как в «Героях 3»: места на фигуре, справа - запас доспехов,
   выбранное, оружие */
.HeroCard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  height: 100%;
  min-height: 0;
}
/* кукла: квадрат во всю высоту карточки, фигура - во весь квадрат, места - по точкам (облик HeroSlot) */
.HeroDoll {
  position: relative;
  aspect-ratio: 1 / 1;
  height: 100%;
  min-height: 0;
  background: radial-gradient(45% 50% at 50% 48%, rgba(233, 192, 106, 0.16), rgba(0, 0, 0, 0) 70%), rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px rgba(233, 192, 106, 0.18);
  overflow: hidden;
}
/* место: середина - в своей точке куклы; рамка цвета редкости (--rar), пустое - пунктир и подпись */
.HeroSlot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 2px var(--rar, rgba(255, 255, 255, 0.14)),
    0 0 10px -2px var(--rar, transparent);
  cursor: pointer;
}
.HeroSlot.empty {
  box-shadow: inset 0 0 0 1px rgba(233, 192, 106, 0.35);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 4px, transparent 4px 8px);
}
.HeroSlot.sel,
.GearCell.sel {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.HeroSlotIcon {
  object-fit: contain;
}
/* силуэт: один контур для всех (260) - золотая обводка со светом уже в картинке */
.HeroFigurePic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* справа - вкладки (257): ряд вкладок, под ним - панель вкладки во всю оставшуюся высоту */
.HeroSide {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  min-width: 0; /* длинная строка (кнопки, оружие) не раздвигает колонку за край окна */
}
.HeroTabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.HeroTabs > * {
  min-width: 0;
}
/* панель вкладки: своя прокрутка, если не влезла; столбец - не шире панели (длинная строка переносится) */
.HeroPane {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
}
.HeroPane[hidden] {
  display: none;
}
/* «Сумка»: заголовок, выбранный доспех (что даёт, кнопки; не влез - своя прокрутка), ниже - доспехи (листаются, не
   меньше ряда); на низком экране ничто не уходит за рамку (257) */
.HeroBagPane {
  grid-template-rows: auto minmax(0, auto) minmax(46px, 1fr);
  align-content: stretch;
  overflow: hidden;
}
.HeroBagPane > .HeroInfo {
  grid-row: 2;
  min-height: 0;
}
.HeroBagPane > .HeroBag {
  grid-row: 3;
}
.HeroBag {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: auto;
  min-height: 0;
}
/* «Прибавки»: строка - что слева, сколько справа */
.HeroStatRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.HeroStatRow > small {
  min-width: 0;
}
.HeroStatRow > b {
  flex: none;
  white-space: nowrap;
}
/* «Оружие»: строка вида - значок, название, сорта справа (узко - сорта под названием) */
.HeroArmsPane {
  grid-template-rows: auto auto;
}
.HeroArmsPane > .btn {
  justify-self: start;
}
.HeroArms {
  display: grid;
}
/* строка вида: значок слева на две строки, название сверху, сорта - под ним (на узком экране название не сжимается) */
.ArmRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}
.ArmRow > img {
  grid-row: 1 / 3;
}
/* сколько и урон: строкой, не влезли - друг под другом; числа - цветом сорта (--gc) */
.ArmLines {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}
.ArmLines > small {
  white-space: nowrap;
}
.ArmLines b {
  color: var(--gc, var(--text));
}
.GearCell {
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 2px var(--rar, rgba(255, 255, 255, 0.14)),
    0 0 8px -2px var(--rar, transparent);
  cursor: pointer;
}
.GearCell > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* выбранный доспех: название, что даёт (не влезло - листается), кнопки - всегда видны (257) */
.HeroInfo {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
}
.HeroInfoText {
  min-height: 0;
  overflow-y: auto;
}
.HeroInfoBtns {
  display: flex;
}
.HeroInfoBtns > .btn {
  flex: 1 1 auto;
  min-width: 0;
}

/* ─── 9. Ячейки сундуков ─────────────────────────────────────────────────────────────────────────────────────────── */
/* ячейки сундуков: сундук, название, таймер-«пилюля» снизу */
.chests {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.chest {
  --glow: rgba(226, 182, 90, 0);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0;
  min-width: 0;
  height: 88px;
  padding: 4px 2px 0;
  border-radius: var(--r);
  border: 1px solid var(--edge);
  color: var(--text);
  font-size: 11px;
  background:
    radial-gradient(circle at 50% 40%, var(--glow), transparent 65%), linear-gradient(180deg, var(--bg3), var(--bg1));
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 154, 0.08),
    var(--shadow);
}
.chest img {
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.7));
}
.chest > b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chest {
  container-type: inline-size;
}
@container (max-width: 118px) {
  .chest .tm .w {
    display: none;
  }
} /* узкая ячейка: только время */
.chest .tm {
  white-space: nowrap;
  overflow: hidden;
}
.chest .tm {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
}
.chest .tm .res {
}
.chest .tm .res img {
}
.chest.opening .tm {
  background: linear-gradient(180deg, var(--blue-hi), var(--blue));
  text-shadow: var(--stroke);
}
.chest.ready {
  animation: glow 1.2s ease-in-out infinite;
}
.chest.ready .tm {
  background: linear-gradient(180deg, var(--green-hi), var(--green));
  text-shadow: var(--stroke);
}
.chest.empty {
  background: rgba(0, 0, 0, 0.25);
  border-style: dashed;
  box-shadow: none;
  cursor: default;
}
.chest.empty img {
  filter: grayscale(1);
}
.chest.empty .tm {
  background: none;
}
.chest.usual {
  --glow: rgba(200, 200, 210, 0.18);
}
.chest.average {
  --glow: rgba(120, 220, 80, 0.22);
}
.chest.big {
  --glow: rgba(90, 140, 255, 0.25);
}
.chest.epic {
  --glow: rgba(210, 60, 200, 0.25);
}
.chest.legendary {
  --glow: rgba(255, 190, 60, 0.3);
}
@keyframes glow {
  50% {
    box-shadow:
      0 0 12px rgba(255, 210, 80, 0.55),
      var(--shadow);
  }
}

/* ─── 10. Отряды ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Отряды (набросок 074, окна 15-15а): в рамке - лиги (кубок, название, сколько открыто) и плитки по 10 в ряд (карта с
   +уровнем справа сверху и сколько в пачке снизу, полоса карточек; можно улучшить - жёлоб светится; закрытые - тенью);
   зелья - по 7 в ряд с названием; внизу - колода и шаблоны; справа - фильтры по классам и подсказка */
.ulist {
  flex: 1;
  display: grid;
  align-content: start;
  overflow: hidden auto;
  scrollbar-width: none;
  /* содержимое (тени значков - фильтры) не вылезает за список при прокрутке и в Safari (076) */
  contain: paint;
}
.ulist::-webkit-scrollbar {
  display: none;
}
.sh2 {
  display: flex;
  align-items: center;
}
.sh2 > .ico {
}
.sh2 > small {
}
/* артефакты (229): до конца сезона - у названия; доступных нет - строка, где их взять */
.SeasonTimer {
  white-space: nowrap;
}
.ArtsEmpty {
}
/* плитки - сколько влезет, не уже 66 точек (076: «список очень сильно ужал» - было 10 в ряд на любой ширине; 077 -
   квадратные и крупнее; 110: при 74 на узком списке 600×268 влезало 3 в ряд и плитка раздувалась до 98 точек - теперь
   на всех экранах 68-75) */
.ugrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
}
.ugrid.elx {
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
}
.ut {
  display: grid;
  position: relative;
}
.ut > .card {
}
.ut > .card > .uarr {
}
.ugrid .ut > .card {
  aspect-ratio: 1;
}
.ugrid.elx .ut > .card {
}
.ut > .card > .cnt {
}
.ut > .card > .lv {
}
.ut > .bar {
}
.ut > .bar > b {
}
.ut.up > .bar {
  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;
}
.ut > .en {
  overflow: hidden;
}
/* колода в лотке: заголовок и шаблоны 2×2, башни в один ряд (сжимаются при любом числе) */
.tray > .dh {
  display: grid;
}
.tray > .dh > b {
  white-space: nowrap;
}
.tray > .dh > b > small {
}
.tray > .dh > .tabs {
  display: grid;
  grid-template-columns: repeat(2, 22px);
}
.tray > .dh .tab {
}
.tray > .deckrow {
  flex: 1;
  display: flex;
  align-items: center;
}
.tray > .deckrow > .card {
  flex: 0 1 50px;
}
/* колода полна, ставим отряд: башни колоды покачиваются - нажать ту, которую заменить */
.tray.pick > .deckrow > .card {
  animation: shake 0.6s ease-in-out infinite;
}
@keyframes shake {
  25% {
    transform: rotate(-2deg);
  }
  75% {
    transform: rotate(2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tray.pick > .deckrow > .card {
    animation: none;
  }
}
/* фильтры: по 2 в ряд, «Все» во всю ширину; подсказка - на остаток колонки */
.fgrid {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.fgrid > .rt {
  flex: none;
  justify-content: center;
}
.fgrid > .rt > b {
}
.fgrid > .rt.w2 {
  grid-column: span 2;
}
.rhint {
  flex: 1;
  overflow: hidden;
}
/* окно отряда (окно 16): слева карта, лига, класс, уровень, прибавка за уровень, кнопки одна под другой; справа -
   параметры столбиком (число с взятыми уровнями, цветом - прибавка уровней) */
.win.uwin {
  width: min(680px, calc(100vw / var(--uiz, 1) - 24px));
  padding: 30px 14px 14px;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 14px;
}
.uwin > .ul {
  display: grid;
  gap: 8px;
  align-content: start;
}
.uwin > .ul > .btn {
  width: 100%;
}
.uwin > .ul > .note b,
.uwin > .ul > .note .up {
  color: var(--green-hi);
}
/* справа - что делает отряд и параметры (105) */
.uwin > .ur {
  display: grid;
  align-content: start;
}
.uabout {
  margin: 0;
}
/* карточки отряда: подпись и полоса «есть / надо» (105) */
.crow {
  display: flex;
  align-items: center;
}
.crow > .bar {
  flex: 1;
}
.uhead {
  display: flex;
  align-items: flex-start;
}
.uhead > .card {
  flex: none;
}
.uhead > div {
  display: grid;
}
.uhead .tagc.lg {
  box-shadow: 0 0 0 1px var(--lg, rgba(95, 184, 90, 0.65));
}
.stt {
  display: grid;
  align-content: start;
}
.stt > div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.stt > div:last-child {
}
.stt > div > span {
}
/* окно зелья (окна 17, 17б): значок крупно, плашки и что делает; пачки, цена, перезарядка, открыт; как живёт в колоде;
   кнопки или «Доступно с N уровня» */
.win.ewin {
  width: min(540px, calc(100vw / var(--uiz, 1) - 24px));
  padding: 30px 14px 14px;
  display: grid;
  gap: 9px;
}
.ewin > .uhead > .card {
  width: 90px;
  height: 108px;
}
/* значок зелья крупно - в полтора раза (Т65) */
.ewin > .uhead > .card.elx > .fig {
  top: 42%;
  width: 96%;
}
.ewin > .uhead > .card > .cnt {
  height: 22px;
  font-size: 15px;
}
.ewin > .uhead > div {
  gap: 8px;
}
.ewin p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
}
.kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.kv > div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.kv > div > span {
}
.elock {
  display: grid;
  justify-items: center;
}
.elock > b {
}
.elock > small {
}
.ewin > .btnrow > .btn {
  flex: 1;
}

/* ─── 11. Магазин ────────────────────────────────────────────────────────────────────────────────────────────────── */
/* магазин (18-22): строка под лентой, ячейки товаров одной меры - значок, название, строка, кнопка с ценой на одной
   высоте (строки сетки - общие у всех ячеек, subgrid); у самого крупного - свечение; число ячеек - --n (shop.js); ячейка
   не уже 72 точек (076: при 78 на экране владельца 810×407 шестая ячейка срезалась краем) - на узком телефоне
   (600-734) ряд листается вбок */
/* подпись под лентой рамки: не влезла в строку - в две (257: на узком телефоне её срезало многоточием) */
.mp > .note1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  flex: none;
}
.goods {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--n, 6), minmax(72px, 1fr));
  grid-template-rows: repeat(4, auto);
  align-content: center;
  overflow: auto hidden;
  scrollbar-width: none;
}
/* без строки (золото): три строки сетки, ячейки пошире от краёв */
.goods.nos {
  grid-template-rows: repeat(3, auto);
  padding: 0 30px;
}
.goods.nos > .good {
  grid-row: span 3;
}
.good {
  position: relative;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  overflow: hidden;
}
.good > .ico {
  position: relative;
  filter: drop-shadow(0 4px 4px #000);
}
.good > .ico[data-info] {
  cursor: pointer;
}
/* название: длинное слово на узком экране не влезает - shop.js fitNames уменьшает --gn у всего раздела */
.good > b {
  position: relative;
  align-self: center;
  font: 700 var(--gn, 14.5px) / 1.1 var(--display);
}
.good > small {
  position: relative;
  align-self: start;
}
/* подарок к набору бриллиантов */
.good > small.up {
}
.good > .btn {
  position: relative;
  align-self: end;
}
.good > .glow {
  transform: translate(-50%, -50%);
}
.good > .badge {
  position: absolute;
  background: radial-gradient(circle at 50% 30%, #9ef09a, #2e8f3e 70%);
}
.good[data-boost] {
  cursor: pointer;
}
/* ключ закрытого босса облавы (260): значок приглушён, строка - когда откроется */
.good.off > .ico {
  filter: grayscale(0.85) brightness(0.7);
}
/* окно буста: значок и метки, что даёт, «Включить» и «Купить» */
.win.bwin {
  width: 360px;
  padding: 30px 12px 12px;
  display: grid;
  gap: 8px;
  text-align: left;
}
.bwin > .ribbon {
  top: -16px;
  height: 32px;
  font-size: 16px;
}
.bwin > .uhead > .ico {
  width: 44px;
  height: 44px;
  flex: none;
}
/* метки строкой (у окна отряда и зелья метки в своём столбце, здесь - прямо в шапке) */
.uhead > .tags {
  display: flex;
  align-content: flex-start;
}
.bwin > p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
}
.bwin > .btnrow {
  gap: 8px;
}
.bwin > .btnrow > .btn {
  flex: 1;
}
/* окно оплаты набора: значок крупно, что и за сколько, оплаты пока нет */
.win.paywin > .payico {
  display: block;
  width: 56px;
  height: 56px;
  margin: 14px auto 0;
}
.win.paywin > p.note {
  margin: -6px 0 14px;
  color: var(--text);
  font-size: 14px;
}

/* оружие Великой охоты штучно (290): сверху - виды плитками в ряд (значок, название, «простое / кованое / усиленное»
   числами цветом сорта - --gc из HuntGrade Color, под ними - цена штуки, 292), ниже - сорта строкой (слово цветом
   сорта), ниже - сколько: «−5», поле, «+5», стоимость (291) и «Купить»; выбранные вид и сорт - золотая кромка */
.goods.arms {
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
}
.ArmShop {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.ArmKinds,
.ArmGrades {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}
/* виды - всё свободное по высоте: плитки крупнее */
.ArmKinds {
  flex: 1 1 auto;
  min-height: 0;
}
.ArmPick,
.ArmGradeBtn {
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 0;
  text-align: center;
}
/* строка сортов - одной полосой (292): у слов своей подложки нет */
.ArmGrades {
  flex: none;
}
/* плитка вида (294): значок растёт на всё свободное место над названием, подписи - внизу плитки */
.ArmPick {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ArmPick > img {
  flex: 1 1 0;
  object-fit: contain;
}
.ArmPick[aria-pressed='true'],
.ArmGradeBtn[aria-pressed='true'] {
  box-shadow:
    inset 0 0 0 2px var(--gold-hi),
    0 0 12px rgba(255, 210, 110, 0.35);
}
.ArmName {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ArmHave {
  white-space: nowrap;
}
.ArmHave > b {
  color: var(--gc, var(--text));
}
.ArmGrade {
  color: var(--gc, var(--text));
}
/* «Цена за 1 шт:» (293) - строкой, число с бриллиантом - строкой ниже, у всех видов одинаково (в одну строку цена
   арбалета не влезала и переносилась только у него) */
.ArmEach {
  display: grid;
  justify-items: center;
  max-width: 100%;
}
.ArmEach > span {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
/* сколько, стоимость и «Купить» (291): поле с кнопками слева, «Купить» - справа по размеру слова, стоимость - по
   середине между ними (не хватает бриллиантов - красным) */
.ArmOrder {
  display: flex;
  align-items: center;
}
.ArmQty {
  display: flex;
  align-items: center;
  flex: none;
}
.ArmQtyIn {
  flex: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ArmQtyIn::-webkit-inner-spin-button,
.ArmQtyIn::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ArmCost {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  white-space: nowrap;
}
.ArmCost.no {
  color: var(--red-hi);
}
.ArmOrderBuy {
  flex: none;
  white-space: nowrap;
}

/* ─── 12. Навыки ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* навыки (23а, 23): ветка не выбрана - рамка во всю ширину (.mp.wide, колонки справа нет) и три шторы на карнизах, цвет
   шторы - по ветке (data-branch); выбрана - навыки ветки двумя столбцами по 5 (значок, имя, деления, −/+, что даёт),
   закрытые - серые, с какого уровня; справа - свободные очки, шаблоны 1-4, сброс */
.sect > .mp.wide {
}
.curts {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cw {
  position: relative;
  display: flex;
  flex-direction: column;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
}
/* карниз: золотая перекладина с шарами на концах */
.cw > .rod {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #fff1c2, var(--gold-b) 45%, var(--gold-lo));
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
}
.cw > .rod::before,
.cw > .rod::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6d2, var(--gold-b) 55%, var(--gold-lo));
}
.cw > .rod::before {
}
.cw > .rod::after {
}
/* штора: складки, низ - клином, кайма цвета ветки */
.curt {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 16px), 0 100%);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 0 2px,
      transparent 2px 16px,
      rgba(0, 0, 0, 0.16) 16px 19px,
      transparent 19px 26px
    ),
    linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow:
    inset 0 0 0 2px var(--trim),
    inset 0 0 0 4px rgba(0, 0, 0, 0.35),
    inset 0 30px 30px -20px rgba(0, 0, 0, 0.5);
}
.cw:hover > .curt {
  filter: brightness(1.08);
}
.curt > .si {
  width: 74px;
  height: 74px;
  flex: none;
  background-color: transparent;
  box-shadow: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
}
.curt > b {
  white-space: nowrap;
  text-shadow: 0 2px 3px #000;
}
.curt > .lines {
  display: grid;
  text-shadow: 0 1px 2px #000;
}
.curt > small {
}
.cw[data-branch='CofW'] > .curt {
  --c1: #8a2226;
  --c2: #3a0b0f;
  --trim: #e9c06a;
}
.cw[data-branch='FD'] > .curt {
  --c1: #474c56;
  --c2: #15171c;
  --trim: #d0565a;
}
.cw[data-branch='GT'] > .curt {
  --c1: #2b5394;
  --c2: #0f2240;
  --trim: #d9e2ef;
}
/* навыки ветки: два столбца по 5 строк */
.sgrid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-auto-flow: column;
}
.srow {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  /* нажатие на навык - подсказка навыка (104) */
  cursor: pointer;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px rgba(233, 192, 106, 0.16);
}
.srow > .si {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  grid-row: 1 / 3;
  grid-column: 1;
  box-shadow:
    0 0 0 1px #000,
    0 0 0 2px rgba(233, 192, 106, 0.45);
  background-repeat: no-repeat;
}
.srow > b {
  grid-row: 1;
  grid-column: 2;
  align-self: end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srow > .pips {
  grid-row: 1;
  grid-column: 3;
  align-self: end;
  justify-self: end;
}
.srow > .ctl {
  grid-row: 2;
  grid-column: 3;
  display: flex;
  justify-self: end;
}
.srow .mb {
}
/* что даёт навык: не влезло в строку - в две (257: «1 очко: −6.25% паузы между ат…») */
.srow > p {
  grid-row: 2;
  grid-column: 2;
  align-self: start;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.15;
}
.srow.lock > .si {
  filter: grayscale(1) brightness(0.45);
  box-shadow: 0 0 0 1px #000;
}
.srow.lock > b {
}
.srow.lock > .lvl {
  grid-row: 1;
  grid-column: 3;
  align-self: end;
  justify-self: end;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(233, 192, 106, 0.4);
  white-space: nowrap;
}
.srow.lock > p {
  grid-column: 2 / 4;
}
/* правая колонка: свободные очки крупно, плитка шаблонов и сброса */
.tplr {
  flex: none;
  flex-direction: column;
  align-items: stretch;
}
.tplr > .btn {
}
.tplr > small {
}
.tpl4 {
  display: flex;
}
/* шаблоны навыков на шторах (130): в углу рамки раздела, место - Skills.dat PickSets */
.pksets {
  position: absolute;
  z-index: 2;
}
.tpl4 > .tab {
}

/* ─── 13. Арены и дорога кубков ──────────────────────────────────────────────────────────────────────────────────── */
/* арены (45-46): в рамке - арена лиги (кубок в лучах, «вы здесь», правила, ступени) и дорога кубков лиги; справа -
   назад в рейтинг и лиги плитками (выбранная - золотом, не открытая - тусклая, кружок - награды ждут) */
.arwrap {
  flex: 1;
  display: grid;
  grid-template-columns: 186px minmax(0, 1fr);
}
.arcard {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  overflow: hidden;
}
.arcard > .cupbox {
  position: relative;
  display: grid;
  place-items: center;
}
.arcard > .cupbox > .glow {
}
.arcard > .cupbox > .ico {
  position: relative;
  filter: drop-shadow(0 6px 6px #000);
}
.arcard .tagc .ico {
}
.steps {
  display: flex;
}
.steps > span {
  display: grid;
  place-items: center;
  background: #141b26;
  box-shadow: 0 0 0 1px #4a5260;
}
.steps > span.on {
  background: linear-gradient(180deg, var(--gold-b-hi), var(--gold-b));
  box-shadow: 0 0 0 1px var(--gold-lo);
}
.steps > span.here {
  box-shadow:
    0 0 0 2px var(--gold-hi),
    inset 0 0 8px rgba(255, 210, 110, 0.8);
}
/* дорога кубков: с какого рекорда, что, «Взять»; взятое - тускло, закрытое - серое без кнопки */
.road2 {
  display: grid;
  align-content: start;
  overflow: hidden auto;
  scrollbar-width: thin;
}
.rr {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 64px;
  align-items: center;
  background: rgba(0, 0, 0, 0.28);
}
.rr > .at {
}
.rr > .at .ico {
}
.rr > .gift {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
.rr > .gift .ico {
}
.rr > .gift > img {
}
.rr > .gift .res {
}
.rr > .gift .stl {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--gold-b-hi), var(--gold-b));
  box-shadow: 0 0 0 1px var(--gold-lo);
}
.rr > .btn,
.rr > .note {
  justify-self: end;
}
.rr.got {
}
.rr.lock {
  filter: grayscale(0.6) brightness(0.75);
}
.rr.lock > .btn {
  visibility: hidden;
}
.rhere {
  display: flex;
  align-items: center;
}
.rhere::before {
  content: '';
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--blue-hi), transparent);
}
.rhere::after {
  content: '';
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--blue-hi), transparent);
}
/* плитки лиг справа: кубок и название строкой */
.rt.lg {
}
.rt.lg > .ico {
}
.rt.lg.locked {
  filter: grayscale(0.7) brightness(0.7);
}
.rt.back {
  flex: 0.8 1 0;
}

/* ─── 14. Поиск противника и «игрок против противника» ───────────────────────────────────────────────────────────── */
/* поиск (набросок 074, окно 3): ворота экрана загрузки игры во весь экран, песочные часы игры (стоят, потом
   переворачиваются), «Поиск противника…», лига и кубки; внизу - строка новостей на стекле */
.search {
  position: fixed;
  z-index: 25;
  background: #0b0f14 center / cover no-repeat;
}
/* эмблема игры (096) - на общем месте эмблемы (097, base.css .glogo), и при поиске, и на «игрок против противника» -
   не двигается; окно поиска - под ней */
.srch {
  position: absolute;
  top: max(24px, calc(30% - 6px), calc(var(--logo-top) + var(--logo-h) + 12px));
  display: grid;
  justify-items: center;
  text-shadow:
    0 2px 4px #000,
    0 0 10px #000;
}
.srch > .spin {
  background: center / contain no-repeat;
  filter: drop-shadow(0 4px 6px #000);
  animation: hourglass 4.8s ease-in-out infinite;
}
/* часы стоят, переворачиваются, стоят, переворачиваются ещё раз - конец совпадает с началом (078: «делают оборот и потом
   сбрасываются»; было 0 -> 180 и скачок обратно в 0 - песок прыгал вниз) */
@keyframes hourglass {
  0%,
  32.5% {
    transform: rotate(0);
  }
  42.5%,
  82.5% {
    transform: rotate(180deg);
  }
  92.5%,
  100% {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .srch > .spin {
    animation: none;
  }
}
.srch > .msg {
}
.srch > small {
}
.srch > .swait {
}
/* время поиска (078) - на тёмной капсуле, цифры не прыгают */
.srch > .stime {
  background: rgba(8, 11, 16, 0.72);
  box-shadow: inset 0 0 0 1px rgba(233, 192, 106, 0.45);
  font-variant-numeric: tabular-nums;
}
/* игрок против противника (окно 4): карточки сторон в рамке - своя с синим краем, противник с красным; «VS» между ними.
   С 098 (эмблема крупнее) - карточки по середине места между эмблемой и строкой новостей, а не всего экрана */
/* карточки сторон - одной высоты (270: «Квадратики на экране загрузки должны быть всегда одного общего размера»):
   строка сетки - по высокой карточке, обе растянуты по ней, содержимое - по середине; «VS» - по середине */
.search .vs {
  position: absolute;
  display: grid;
  grid-auto-flow: column;
  align-content: center;
  align-items: stretch;
  justify-content: center;
  padding: calc(var(--logo-top) + var(--logo-h) + 6px) 0 calc(var(--safe-b) + 48px);
}
.vsc {
  display: grid;
  justify-items: center;
  align-content: center;
}
.vsc.l {
  box-shadow:
    0 0 0 2px rgba(111, 182, 255, 0.55),
    inset 0 0 18px rgba(111, 182, 255, 0.35),
    0 14px 40px rgba(0, 0, 0, 0.75);
}
.vsc.r {
  box-shadow:
    0 0 0 2px rgba(255, 138, 114, 0.55),
    inset 0 0 18px rgba(255, 138, 114, 0.35),
    0 14px 40px rgba(0, 0, 0, 0.75);
}
.vsc > .ava {
  --ring: var(--blue-hi);
}
.vsc.r > .ava {
  --ring: var(--red-hi);
}
.vsc > .ava > .chip {
}
.vsc > b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search .vs > .vsmid {
  align-self: center;
}
.vsmid > b {
}

/* ─── 15. Итог боя ───────────────────────────────────────────────────────────────────────────────────────────────── */
/* итог боя (набросок 074, окно 10 - окно награды 064): поверх застывшего поля; лента, почему, обе стороны с остатком
   лагеря и «VS», ряд ячеек награды (число под крупным значком, подпись ниже, без «+»), новости, золотая «Дальше» у
   победы. Появляется, как добыча сундука: затемнение, окно, лента, ячейки по одной, кнопка последней */
.rwd .why2 {
  margin-top: -2px;
  font-size: 13px;
  color: var(--dim);
}
.vsrow {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
}
.vsrow > .ava {
  --ring: var(--blue-hi);
}
.vsrow > .ava.foe {
  --ring: var(--red-hi);
}
.vsrow > .nm {
  display: grid;
}
.vsrow > .nm > b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vsrow > .nm.r {
}
.vsrow .bar {
}
.vsrow > .plate {
}
.result.lose .ribbon {
  filter: grayscale(0.9) brightness(0.8);
}
.modal.reveal {
  animation: fade 0.7s ease-out;
}
.modal.reveal > .panel {
  animation: pop 0.45s 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
}
.modal.reveal .ribbon {
  animation: ribbonIn 0.55s 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) backwards;
}
.modal.reveal .vsrow,
.modal.reveal .why2,
.modal.reveal .news {
  animation: fade 0.5s 0.75s backwards;
}
.modal.reveal [data-ok] {
  animation: fade 0.4s backwards;
}
@keyframes ribbonIn {
  from {
    transform: translateY(-18px) scale(0.4);
    opacity: 0;
  }
}
/* звёзды боя похода в ячейке (137): три объёмные звезды в ряд, средняя крупнее и выше; не полученные - серые; картинки
   и размеры - Play.dat Control ResultStars */
.rstars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.rstars > .rstar {
  flex: none;
  background: center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}
.rstars > .rstar.big {
  margin: 0 -3px 6px;
}
.rstars > .rstar.off {
}
/* награды итога - в одну строку (до 7 ячеек); экран ниже 360 (встроенный браузер приложения Claude) - окно плотнее и
   прокручивается, «Дальше» не уходит за край (замечание владельца 28.09) */
.result .loot {
  flex-wrap: nowrap;
}
.result .lootc {
  flex: 0 1 80px;
}
.result .news {
  display: grid;
}
.result .news p {
  background: rgba(233, 192, 106, 0.1);
  box-shadow: inset 0 0 0 1px rgba(233, 192, 106, 0.35);
}
.result .news:empty {
  display: none;
}
.result > [data-ok] {
}
/* окно награды на низком экране (до 440 и до 380: телефон владельца 407, 375, 268): зазоры и верх плотнее - лента,
   сундук, два ряда ячеек и кнопка влезают без прокрутки (076: на 407 «Забрать» уходила за низ; сундук и ячейки -
   DefaultControls.dat Window Hero, LootItem Screen) */
@media (min-aspect-ratio: 844/440) {
  .win.rwd {
    gap: 6px;
    padding-top: 24px;
  }
}

/* ─── 16. Видимость по репутациям ────────────────────────────────────────────────────────────────────────────────── */
/* v13: видимость по репутациям - скрытое от игрока не показывается */
.rbtn.hid {
  display: none;
}
.rdot {
  position: absolute;
  background: var(--red-hi);
  border: 1px solid rgb(0, 0, 0);
}
#hdr .rbtn {
  position: relative;
}
/* главный: ступень лиги, объявление события */
/* низкий экран (телефон 375 px): кубок меньше - «В бой» целиком виден без прокрутки */
@media (min-aspect-ratio: 844/400) {
  .arena {
  }
  .arena .cup {
  }
  .skc {
  }
}
.arena .stepname {
  text-shadow: 0 1px 2px #000;
}
.arena {
  grid-template-rows: auto auto 1fr auto auto auto auto;
}
.banner {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(226, 182, 90, 0.28), rgba(226, 182, 90, 0.06));
  animation: glow 1.6s ease-in-out infinite;
}
.banner img {
}
/* ─── 17. Артефакты ──────────────────────────────────────────────────────────────────────────────────────────────── */
/* артефакты: ячейки в бой, сетка эликсиров и бустов */
.bag .loadout {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.lslot {
  display: grid;
  grid-template-columns: 40px auto;
  grid-template-rows: auto auto;
  align-items: center;
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.25);
}
.lslot.on {
  background: linear-gradient(180deg, rgba(95, 174, 52, 0.2), rgba(0, 0, 0, 0.3));
}
.lslot img {
  grid-row: 1 / 3;
  object-fit: contain;
}
.lslot b {
}
.lslot small {
}
.lslot i {
  grid-row: 1 / 3;
  font: 700 22px var(--body);
  font-style: normal;
}
.bag .active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.bag .active .tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text);
}
.bag .active .tag img {
  width: 18px;
  height: 18px;
}
.agrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.aitem {
  position: relative;
  display: grid;
  justify-items: center;
  border-radius: var(--r);
  background:
    radial-gradient(circle at 50% 30%, rgba(226, 182, 90, 0.14), transparent 60%),
    linear-gradient(180deg, var(--bg3), var(--bg1));
}
.aitem img {
  object-fit: contain;
  filter: drop-shadow(0 2px 3px #000);
}
.aitem span {
}
.aitem small {
}
.aitem .lv {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
}
.aitem .n {
  position: absolute;
  background: linear-gradient(180deg, var(--green-hi), var(--green));
  text-shadow: var(--stroke);
  border: 1px solid rgb(0, 0, 0);
}
.aitem.none img {
  filter: grayscale(0.8) brightness(0.6);
}
.aitem.lock {
}

/* ─── 18. Рейтинг лидеров ────────────────────────────────────────────────────────────────────────────────────────── */
/* рейтинг (43-44, М12): строки в рамке - место, портрет, лига и ник, уровень, достижения, кубки; 1-2-3 места - медальоны
   и кайма золотом, серебром, бронзой (наград за места нет); своя строка - синей каймой. Справа - «Все» / своя лига, ваше
   место, плитка арен */
.lrows {
  flex: 1;
  display: grid;
  align-content: start;
  overflow: hidden auto;
  scrollbar-width: thin;
}
.lrow {
  display: grid;
  grid-template-columns: 30px 30px minmax(0, 1fr) auto 76px;
  align-items: center;
  cursor: pointer;
}
.lrow.me {
  box-shadow:
    inset 0 0 0 1.5px var(--blue-hi),
    inset 0 0 10px rgba(111, 182, 255, 0.35);
}
.lrow > .pl {
  justify-self: center;
}
.lrow > .ava {
}
.lrow > div {
  display: grid;
}
.lrow b {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lrow small {
}
.lrow > .bdg {
  display: flex;
}
.lrow > .bdg > .ico {
}
.lrow > .score {
  justify-self: end;
}
.lrow.top1 {
  box-shadow:
    inset 0 0 0 1.5px #f2c94c,
    inset 0 0 18px rgba(242, 201, 76, 0.22);
}
.lrow.top2 {
  box-shadow:
    inset 0 0 0 1.5px #c9d3df,
    inset 0 0 18px rgba(201, 211, 223, 0.18);
}
.lrow.top3 {
  box-shadow:
    inset 0 0 0 1.5px #d08a4e,
    inset 0 0 18px rgba(208, 138, 78, 0.2);
}
/* строка с рамкой босса (263): кайма места - не поверх рамки, место видно по медальону; место - слева, вне рамки (268:
   рамка - с --fo, ui/frames.js), портрет - первым на рамке (у строки с медальоном - в окне, своего размера) */
.lrow.framed {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  box-shadow: none;
}
/* строка без рамки (288) - кайма 1-3 мест по плашке */
.lrow.top1 > .FrameBase {
  box-shadow:
    inset 0 0 0 1.5px #f2c94c,
    inset 0 0 18px rgba(242, 201, 76, 0.22);
}
.lrow.top2 > .FrameBase {
  box-shadow:
    inset 0 0 0 1.5px #c9d3df,
    inset 0 0 18px rgba(201, 211, 223, 0.18);
}
.lrow.top3 > .FrameBase {
  box-shadow:
    inset 0 0 0 1.5px #d08a4e,
    inset 0 0 18px rgba(208, 138, 78, 0.2);
}
.lrow.framed > .pl {
  position: absolute;
  left: calc(var(--fo) / 2);
  top: 50%;
  transform: translate(-50%, -50%);
}
.lrow.top1 > .pl,
.lrow.top2 > .pl,
.lrow.top3 > .pl {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #1a1206;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.lrow.top1 > .pl {
  background: radial-gradient(circle at 40% 35%, #fff1b8, #f2c94c 55%, #a8781c);
  box-shadow: inset 0 0 8px rgba(242, 201, 76, 0.7);
}
.lrow.top2 > .pl {
  background: radial-gradient(circle at 40% 35%, #ffffff, #c9d3df 55%, #7d8794);
  box-shadow: inset 0 0 8px rgba(201, 211, 223, 0.6);
}
.lrow.top3 > .pl {
  background: radial-gradient(circle at 40% 35%, #ffd2a6, #d08a4e 55%, #8a5126);
  box-shadow: inset 0 0 8px rgba(208, 138, 78, 0.6);
}
.lgap {
}
/* карточка игрока (нажатие на строку): портрет, ник, лига и уровень, кубки, достижения */
.pop .rank {
  vertical-align: -3px;
}
.pop [data-tag='Badges'] > img {
  width: 28px !important;
  height: 28px !important;
}
/* правая колонка рейтинга - плитки по содержимому, без растяжения */
.rc.tight > .rt {
  flex: none;
}
.rt.seg {
  flex-direction: column;
  align-items: stretch;
}
.rt.seg > .tab {
  display: flex;
  justify-content: center;
  align-items: center;
}
.rt.seg > .tab > .ico {
}
.rt.me {
}
.rt.me > .pl {
  flex: none;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 35%, #2c3a52, #10161f);
  box-shadow:
    0 0 0 2px var(--blue-hi),
    inset 0 0 10px rgba(110, 190, 255, 0.45);
}
.rt.me b {
  display: flex;
  align-items: center;
}
.rt.me b .ico {
}

/* ─── 19. Поход ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Поход (набросок 074, окна 13-14; screens/campaign.js): карта местности в рамке (снята движком с карты игры), дорога
   змейкой - пунктир на тёмной подложке, пройденное золотом; места боёв - медальоны по порядку со звёздами (рубеж главы -
   портрет босса), выбранный - крупнее и светится, закрытые - серые; советник - полосой снизу по карте, портрет справа */
/* «Мир» (225, interface/World.dat): рамка во всю ширину, в ней - зеркала разделов в ряд. Зеркало - арка сверху,
   золотая обводка в три кольца на тёмной бронзе; за стеклом - вертикальный рисунок, по стеклу - отблеск, снизу -
   затемнение и табличка с названием; пустое («Скоро») - рисунок в тумане и без отклика на нажатие */
.wframe > .mirrors {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  align-items: center;
}
/* форма зеркала - одна (249, владелец 29.10: «картинки внутри зеркал… их обрезало»): не выше 1:2,4 (на ПК было до
   1:3,2 - рисунок 3:5 срезался по бокам; рамка 1:2,3 - стекло 1:2,4), ниже - по высоте ряда (телефон 1:1,8-2); рисунки -
   1:2,4 (World.dat) */
.mirror {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 2.3;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 50% 50% 16px 16px / 22% 22% 16px 16px;
  background: linear-gradient(180deg, #4a3518, #22180b 55%, #2e2110);
  box-shadow:
    inset 0 0 0 2px var(--gold-b),
    inset 0 0 0 4px #1a1209,
    inset 0 0 0 5.5px var(--gold-lo),
    0 0 0 1.5px #0a0d12,
    0 10px 20px rgba(0, 0, 0, 0.6);
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}
.mirror:hover {
  filter: brightness(1.1);
  transform: translateY(-3px);
}
.mirror:active {
  transform: scale(0.98);
}
.mirror.soon {
  cursor: default;
}
.mirror.soon:hover,
.mirror.soon:active {
  filter: none;
  transform: none;
}
.mglass {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border-radius: 50% 50% 11px 11px / 21% 21% 11px 11px;
  background: #0b0e13;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 236, 180, 0.6),
    0 0 0 1px #0a0d12;
}
.mglass > .mpic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* отблеск стекла и затемнение под табличкой */
.mglass::before,
.mglass::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.mglass::before {
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.05) 26%,
    transparent 38%,
    transparent 72%,
    rgba(255, 255, 255, 0.07) 84%,
    transparent 100%
  );
  box-shadow:
    inset 0 0 26px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1.5px rgba(255, 236, 180, 0.5);
  border-radius: inherit;
}
.mglass::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(0deg, rgba(5, 7, 10, 0.9), transparent);
}
.mname {
  position: relative;
  z-index: 2;
  max-width: calc(100% - 14px);
  margin: 0 7px 12px;
  background: linear-gradient(180deg, rgba(52, 38, 18, 0.92), rgba(22, 16, 8, 0.92));
  box-shadow:
    inset 0 0 0 1px var(--gold-lo),
    0 2px 6px #000;
  text-shadow: 0 1px 2px #000;
  overflow-wrap: anywhere;
}
.msoon {
  position: relative;
  z-index: 2;
  margin: -8px 8px 12px;
  text-shadow: 0 1px 2px #000;
}
.mirror.soon .mpic {
  filter: grayscale(0.5) brightness(0.6);
}
.mirror.soon .mname {
  color: var(--dim);
}
/* пять зеркал (244): узкое зеркало - название мельче, длинное слово не рвётся посередине */
.mirror {
  container-type: inline-size;
}
/* .mirror .mname - сильнее облика окна (World.dat MirrorName, Screen UpToHeight - 13 px) */
@container (max-width: 150px) {
  .mirror .mname {
    font-size: 12.5px;
  }
}
/* самый узкий экран (640×300): «Приключения» и «Поселение» - целым словом */
@container (max-width: 112px) {
  .mirror .mname {
    max-width: calc(100% - 8px);
    margin-left: 4px;
    margin-right: 4px;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 9.5px;
  }
}
/* что ждёт за зеркалом (244: Великая охота - бой идёт, награду пора забрать): строка над табличкой, «!» - кружок */
.MirrorNote {
  position: relative;
  z-index: 1;
  margin: 0 6px 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  color: #fff4dc;
  background: linear-gradient(180deg, #c0392b, #7d1d14);
  box-shadow:
    0 0 0 1.5px #ffcf7a,
    0 0 12px rgba(255, 90, 60, 0.7);
  text-align: center;
  line-height: 1.15;
}
/* раздел грузится (231): поверх рисунка - затемнение, песочные часы игры (как при поиске боя) и «Загрузка…» */
.MirrorWait {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(5, 7, 10, 0.55);
  text-shadow: 0 1px 2px #000;
}
.MirrorWait[hidden] {
  display: none;
}
.MirrorHourglass {
  object-fit: contain;
  filter: drop-shadow(0 3px 5px #000);
  animation: hourglass 4.8s ease-in-out infinite;
}
.mirror.wait {
  cursor: progress;
}
/* «← Мир» на карте похода - в углу рамки, над картой */
.wback {
  position: absolute;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  background: linear-gradient(180deg, #2a3343, #1a212c);
  box-shadow:
    inset 0 0 0 1px var(--gold-lo),
    0 2px 6px rgba(0, 0, 0, 0.6);
}
.mp.cmapp {
  overflow: hidden;
}
.cmapp > .ribbon {
}
.cmapp > .cscroll {
  position: absolute;
  scrollbar-width: none;
}
.cmapp > .cscroll::-webkit-scrollbar {
  display: none;
}
.cscroll {
  position: relative;
  overflow: auto;
  border-radius: var(--r);
  touch-action: pan-x pan-y;
  box-shadow:
    inset 0 0 0 1px #000,
    var(--shadow);
  scrollbar-width: thin;
}
.cmap {
  position: relative;
  background: #3b4a2a 0 0 / 100% 100% no-repeat;
}
.cmap::after {
  content: '';
  position: absolute;
  pointer-events: none;
  box-shadow: inset 0 0 40px 6px rgba(13, 10, 7, 0.5);
}
.cmap svg {
  position: absolute;
  pointer-events: none;
}
/* путь похода - тонкий пунктир поверх земли карты (у земли своя дорога): тёмная подложка для читаемости, пройденное
   - золотом */
.road-bed {
  fill: none;
  stroke: rgba(20, 12, 4, 0.45);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.road-bed.more {
}
.road {
  fill: none;
  stroke: #f4e2b0;
  stroke-width: 2.4;
  stroke-dasharray: 7 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.road.more {
}
.road-done {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3.4;
  stroke-dasharray: 9 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(255, 224, 154, 0.7));
}
.cmore {
  position: absolute;
  z-index: 2;
  transform: translate(calc(-100% - 22px), -150%);
  white-space: nowrap;
  background: rgba(13, 10, 7, 0.7);
  pointer-events: none;
}
.cplace {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(10, 14, 20, 0.78);
  border: 1px solid rgba(233, 192, 106, 0.45);
  white-space: nowrap;
  pointer-events: none;
}
/* точка боя: число - цифрами одной высоты (у шрифта по умолчанию цифры «старого стиля» - 3, 4, 5 уходят ниже строки,
   число стояло ниже середины кружка; 137); открытая - простая, пройденные - приглушённые со звёздами, закрытые - серые
   (211: золотой текущей нет - «у нас и так пройденные отмечаются звездами») */
.cpt {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  font-variant-numeric: lining-nums;
  background: radial-gradient(circle at 50% 35%, #3f5677, #1a2539);
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 0 4px #0a0d12,
    0 4px 8px rgba(0, 0, 0, 0.6);
}
.cpt.done {
  background: radial-gradient(circle at 50% 35%, #4b5361, #262c36);
  box-shadow:
    0 0 0 2px rgba(233, 192, 106, 0.55),
    0 0 0 4px #0a0d12,
    0 4px 8px rgba(0, 0, 0, 0.6);
}
/* выбранная точка - чуть светлее, золотая кромка и мягкое свечение, без пульса (211, владелец 26.10: «выбранный уровень
   просто должен чуть сильнее подсвечиваться и золотая кромка вокруг»; было с 114 - пульс свечения) */
.cpt.sel {
  z-index: 1;
  filter: brightness(1.22);
  box-shadow:
    0 0 0 2.5px var(--gold-hi),
    0 0 0 5px #0a0d12,
    0 0 12px 4px rgba(255, 210, 110, 0.45);
}
.cpt.lock {
  background: radial-gradient(circle at 50% 35%, #2a3140, #12171f);
  box-shadow:
    0 0 0 2px #59616e,
    0 0 0 4px #0a0d12,
    0 4px 8px rgba(0, 0, 0, 0.6);
}
.cpt.boss {
}
.cpt.boss > .ava {
  box-shadow: none;
}
/* звёзды боя: горят заработанные (под точкой карты, в правой панели, в итоге у советника) */
.cstars {
  display: inline-flex;
  text-shadow:
    0 1px 1px #000,
    0 0 3px #000;
  white-space: nowrap;
}
.cstars > i {
  font-style: normal;
}
.cstars > i.on {
}
.cpt > .cstars {
  position: absolute;
  top: calc(100% + 2px);
}
.rp .cstars {
}
/* советник полосой снизу по карте: имя и реплика, после боя - итог; портрет говорящего справа */
.cadv {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
}
.cadv[hidden] {
  display: none;
}
.cadv.rise {
  animation: advRise 0.3s ease-out;
}
@keyframes advRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
.cadv .asay {
  flex: 1;
  display: grid;
}
.cadv .asay > b {
}
.cadv .asay p {
  white-space: pre-line;
}
.cadv .asay > .gift {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
/* реплики страницами (114): есть ещё - «дальше ▸» справа внизу, полоса нажимается */
.cadv.more {
  cursor: pointer;
}
.cadv .asay > .apage {
  justify-self: end;
}
.cadv > .ava {
}
@media (prefers-reduced-motion: reduce) {
  .cadv.rise {
    animation: none;
  }
}

/* ─── 20. Ордена ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* ордена (24-27): строки орденов в рамке; свой орден - рамка игроков и рамка чата рядом (без правой колонки); окно
   «Новый орден» - эмблема слева, слои справа. Эмблема - слои OrderIcons.dat */
.emb {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.olist {
  flex: 1;
  display: grid;
  align-content: start;
  overflow: hidden auto;
  scrollbar-width: thin;
}
.orow {
  display: flex;
  align-items: center;
}
.orow.me {
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 0 10px rgba(233, 192, 106, 0.3);
}
.orow > .num {
  flex: none;
}
.orow > .emb {
}
.orow > div {
  display: grid;
  flex: 1;
}
.orow b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orow small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orow > .btn {
  flex: none;
}
/* очки ордена и игрока: кубок, число */
.score {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.score .ico {
}
/* плитки «Ордена» / «Рейтинг орденов» - крупный значок над подписью; «Вы не в ордене» - выше плиток */
.rt.big {
  flex: 1.3 1 0;
  flex-direction: column;
  justify-content: center;
}
.rt.big > .ico {
}
.rt.big b {
}
.rp.tall {
  flex: 1.6 1 0;
  align-content: center;
}
/* свой орден: рамка ордена слева (герб и игроки, 217 - шире), чат справа - вся ширина раздела; узкий телефон (257) -
   рамка ордена ещё шире, чату - треть */
.sect > .mp.mem {
  right: calc(41% + 4px);
}
.sect > .mp.chat2 {
  left: calc(59% + 4px);
}
.mp > .ribbon > .emb {
}
.oinfo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
/* свой орден (285, владелец 30.10: «Может герб ордена куда-то в начале по центру и он пролистывается вверх потом,
   чтобы под ним был список ордена»; было с 268 - герб на всю высоту, «Состав» окном): сверху значки (место и очки -
   рейтинг орденов, заявки, выход - справа), ниже листается: герб по центру, сведения, состав строками */
.OrderTools {
  display: flex;
  align-items: center;
  flex: none;
}
.OrderTool.btn,
.OrderTool {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 0;
  cursor: pointer;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(233, 192, 106, 0.4);
  white-space: nowrap;
}
.OrderTool > img {
  object-fit: contain;
}
.OrderLeave {
  margin-left: auto;
  box-shadow: inset 0 0 0 1px rgba(255, 110, 90, 0.6);
}
.OrderTool > .badge {
  position: absolute;
  top: -6px;
  right: -6px;
}
.obody {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* дети колонки не сжимаются - лишнее листается, а не ужимает состав */
.obody > * {
  flex: none;
}
.cemb {
  display: block;
}
.cemb .emb {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 6px #000);
}
.obody > .oinfo {
  flex-direction: column;
  flex-wrap: nowrap;
  text-align: center;
}
.OrderRosterHead {
  align-self: stretch;
}
/* состав листается вместе с гербом: своей прокрутки общего списка .members у него нет */
.obody > .OrderMembers {
  flex: none;
  display: grid;
  align-self: stretch;
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}
/* поиск ордена и «Другие» (218): строка ввода тянется, кнопки - по себе */
.ofind {
  display: flex;
  align-items: center;
  flex: none;
}
.ofind > .form {
  display: flex;
  flex: 1;
}
.ofind .inp {
  flex: 1;
  min-width: 0;
}
/* своя строка рейтинга под топом - отделена чертой */
.myplace {
  flex: none;
  padding-top: 4px;
  border-top: 1px dashed rgba(233, 192, 106, 0.35);
}
.myplace:empty {
  display: none;
}
.myapp {
  display: grid;
  justify-items: center;
}
.mutednote {
  display: flex;
  align-items: center;
  flex: 1;
}
/* что можно с игроком: полномочия - галочкой слева, действия столбиком */
.macts {
  display: grid;
}
.rlist,
.alist {
  display: grid;
}
.rtog {
  display: flex;
  align-items: center;
}
.rtog::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px rgba(233, 192, 106, 0.7);
}
.rtog[aria-pressed='true']::before {
  background: linear-gradient(180deg, #ffe08a, #c9902e);
}
.jmodes {
  display: grid;
}
.jmode {
  display: grid;
}
.jmode[aria-pressed='true'] {
  box-shadow: inset 0 0 0 1.5px var(--gold);
}
.atabs {
  display: flex;
}
.atabs > .tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* место и очки ордена - одной строкой под гербом (220) */
.prow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
/* приём строкой, значок «изменить» - рядом */
.jrow {
  display: flex;
  align-items: center;
  justify-content: center;
}
.jedit {
  flex: none;
}
.applist {
  display: grid;
  align-content: start;
  overflow: hidden auto;
}
.approw {
  display: flex;
  align-items: center;
}
.approw > div {
  flex: 1;
}
.members {
  flex: 1;
  display: grid;
  align-content: start;
  overflow: hidden auto;
  scrollbar-width: thin;
}
.mrow {
  display: flex;
  align-items: center;
  color: inherit;
  font: inherit;
}
.mrow[data-member] {
  cursor: pointer;
}
.mrow:disabled {
  filter: none;
}
.mrow.me {
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 0 10px rgba(233, 192, 106, 0.3);
}
.mrow .ava {
  flex: none;
}
.mrow > div {
  display: grid;
  flex: 1;
}
/* ник - строкой с многоточием: длинный не выталкивает кубки из строки (217, узкая колонка рядом с гербом) */
.mrow b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mrow b > .lgb {
  vertical-align: -2px;
}
.mrow small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp.chat2 > .msgs {
  flex: 1;
  overflow: hidden auto;
  scrollbar-width: thin;
}
.msg > .lgb {
  vertical-align: -2px;
}
.mp.chat2 > .msgs > .sys {
}
/* новый орден: слева эмблема в свечении, название, цена, кнопки; справа вкладки слоёв и варианты */
.win.ocreate {
  width: min(780px, calc(100vw / var(--uiz, 1) - 24px));
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
}
.ocreate > .ocl {
  display: grid;
  justify-items: center;
  align-content: start;
  /* колонка не шире своего места в сетке, и её столбец тоже: без явного столбца он рос по ряду кнопок (202 из 170) -
     поле, цена и кнопки ужимаются (076) */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.eprev {
  position: relative;
  display: grid;
  place-items: center;
}
.eprev > .glow {
  transform: translate(-50%, -50%);
}
.eprev .emb {
  position: relative;
  filter: drop-shadow(0 5px 6px #000);
}
.ocl > .inp {
  flex: none;
}
.ocost {
  display: flex;
  align-items: center;
}
.ocost .gemb {
}
.ocost .gemb > .ico {
}
.ocl > .note {
}
.ocl > .btnrow {
  align-self: stretch;
}
/* кнопки - в ширину левой колонки (076: «Отмена» уходила под вкладки слоёв) */
.ocl > .btnrow > .btn {
  flex: 1;
  min-width: 0;
}
.eopts {
  display: grid;
  grid-template-rows: auto auto 1fr;
}
.etabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.etabs > .tab {
  display: grid;
  grid-template-rows: 28px auto;
  justify-items: center;
}
.etabs > .tab .emb {
  width: 28px !important;
  height: 28px !important;
}
.egrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-content: center;
}
.eopt {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: inherit;
  cursor: pointer;
  background: linear-gradient(180deg, #232c3a, #151b25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(0, 0, 0, 0.7);
}
.eopt .emb {
  width: 72% !important;
  height: 72% !important;
}
.eopt.sel {
  background: linear-gradient(180deg, #3f5677, #263852);
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 0 10px rgba(233, 192, 106, 0.4);
}
.eopt > .gp {
  position: absolute;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 0 1px rgba(110, 190, 255, 0.55);
}
.eopt > .gp .gemb {
}
.eopt > .gp .ico {
}
.eopt.none {
}
.eopts > .note {
  align-self: end;
}

/* ─── 21. Войны орденов ──────────────────────────────────────────────────────────────────────────────────────────── */
/* война орденов (v18.38, схема владельца 01.10; вид - набросок 074, окна 35-41): в меню - рамка раздела «На поле
   войны» (или «вступите в орден»); поле войны - поверх 3D (#battle.zone): сверху стороны на стекле (своя - синий край,
   противник - красный: эмблема, орден, плашки рейтинг / игроков / кубков, ресурс капсулой) и табличка этапа, справа -
   лента боёв (свёрнута - только заголовок, строки - по нажатию), снизу - атаки на этапе и подсказка; подписи замков и
   героев - render/warzone.js. Окна склада и замка - две колонки: слева вставка (крупный значок / герб и число, плашки
   «подпись + число», «Напасть»), справа - кто где строками; небольшие окна - тревога, «герой дошёл», итог войны
   (значками), правила. Пока грузится земля - только надпись с «Назад в меню» (#battle.zload) */
.sect > .mp.wars {
  justify-content: center;
  align-items: center;
}
.mp.wars > .wic {
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
}
.mp.wars > p {
}
#battle.zone > :not(#stage):not(.wz) {
  display: none !important;
}
#battle.zone #stage > :not(canvas) {
  display: none !important;
}
.wz {
  position: absolute;
  pointer-events: none;
}
.wz button,
.wz .wside,
.wz .wplate,
.wz .wfeedbox,
.wz .wbottom {
  pointer-events: auto;
}
/* земля поля ещё грузится: ни холста, ни окна - только надпись посередине */
#battle.zload {
  background: #0d1118;
}
#battle.zload #stage canvas,
#battle.zload .wz > :not(.wloading, .glogo) {
  visibility: hidden;
}
.wloading {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  pointer-events: auto;
}
#battle:not(.zload) .wloading {
  display: none;
}
/* эмблема игры (096) - на общем месте эмблемы (097), только пока грузится земля */
#battle:not(.zload) .wz > .glogo {
  display: none;
}
/* верх: назад, сторона, табличка этапа, сторона, правила */
.wtop {
  position: absolute;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: start;
}
.wside {
  display: flex;
  align-items: center;
}
.wside.r {
  flex-direction: row-reverse;
}
.wside.mine {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(111, 182, 255, 0.4),
    inset 0 0 14px rgba(111, 182, 255, 0.35);
}
.wside.foe {
}
.wside > div {
  display: grid;
}
.wside b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wside small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wside .emb {
  flex: none;
  filter: drop-shadow(0 2px 3px #000);
}
.wside > .pill {
  flex: none;
}
.wside.r > .pill {
}
/* плашки стороны: рейтинг, игроков, кубков */
.sst {
  display: flex;
}
.wside.r .sst {
  justify-content: flex-end;
}
/* число войны: не сжимается уже своей подписи («игроков» не ложится на кромку, 257) */
.sst > div {
  flex: none;
  display: grid;
  justify-items: center;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.sst small {
}
/* табличка этапа: этап, срок (часами), склад */
.wplate {
  white-space: nowrap;
}
.wplate .timer {
}
/* лента боёв: свёрнута - заголовок, по нажатию - строки (свои - синий край, враги - красный, мои - подсвечены) */
.wfeedbox {
  position: absolute;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: end;
  max-width: min(260px, calc(40vw / var(--uiz, 1)));
  max-height: calc(100% - 118px);
}
.wfeedtab {
}
.wfeedtab::after {
  content: ' \25BE'; /* ▾ */
}
.wfeedbox.open .wfeedtab::after {
  content: ' \25B4'; /* ▴ */
}
.wfeedbox:not(.open) > .wfeed {
  display: none;
}
.wfeed {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wfeed:empty {
  display: none;
}
.wfrow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.38);
}
.wfrow.ours {
  box-shadow: inset 3px 0 0 var(--blue-hi);
}
.wfrow.theirs {
  box-shadow: inset 3px 0 0 var(--red-hi);
}
.wfrow.me {
  background: rgba(53, 114, 196, 0.45);
}
.wfrow .res img {
  vertical-align: -3px;
}
.wroster .row .res img {
  vertical-align: -3px;
}
/* низ: атаки на этапе, подсказка */
.wbottom {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  max-width: calc(100% - 16px);
}
.wbottom > .pill {
  flex: none;
}
.wbottom > .hint {
}
.wbottom > .hint:empty {
  display: none;
}
/* подписи над героями и замками - под полосами окна (render/warzone.js) */
.wlabels {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}
/* подпись над героем (замечание владельца 02.10): «ник vs цель», портрет выбранного героя, отсчёт; кольцо портрета -
   как круг под героем: свои - зелёные, мой - синий, враги - красные */
.wlabel {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 1px #000;
  will-change: transform;
  --ring: #46d16a;
}
.wlabel.mine {
  --ring: #4aa3ff;
}
.wlabel.foe {
  --ring: #f0372d;
}
.wlabel b,
.wlabel i {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(10, 14, 20, 0.75);
  font: 700 11px/1.2 var(--body);
  font-style: normal;
}
.wlabel i {
  color: var(--gold-hi);
}
.wlabel .whero {
  box-shadow: 0 0 0 2px var(--ring);
}
/* имя ордена у замка: эмблема и имя; свой - синий край */
.wlabel.wcastle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 4px;
  border-radius: 8px;
  font: 700 12px var(--display);
  color: var(--text);
  background: rgba(10, 14, 20, 0.8);
  border: 1px solid rgba(233, 192, 106, 0.6);
}
.wlabel.wcastle .emb {
  width: 18px;
  height: 18px;
}
.wlabel.wcastle.mine {
  border-color: var(--blue-hi);
  box-shadow: inset 0 0 8px rgba(111, 182, 255, 0.45);
}
/* окна склада и вражеского замка (задача 063): слева - вставка (что там, «Напасть»), справа - кто где: свои - синим
   краем, враги - красным; занятие - цветом (бьётся - красный, идёт - синий, к нему идут - золотой), выбывшие - тусклые.
   Окно листается целиком: колонка, «прилипшая» к верху, выше видимой части (низкий телефон, ПК с крупностью) прячет
   «Напасть» и «Закрыть» под краем */
.modal > .panel.wwin {
  display: block;
}
.wwin > .cols {
  align-items: start;
}
.wwin .btn.off {
  filter: grayscale(0.7) brightness(0.75);
}
.wwhy:empty {
  display: none;
}
.wwhy {
}
.whead {
  display: flex;
  align-items: center;
}
.whead > .ico {
  flex: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
}
.whead .emb {
  flex: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
}
.whead > div {
  display: grid;
  flex: 1;
}
.whead small {
}
.stockln {
  display: flex;
  align-items: baseline;
}
.stockln > .bignum {
}
.stockln > .note {
}
.stockln > .ico {
  align-self: center;
}
.whead .bar {
}
/* плашки «подпись + крупное число»: по 3 в ряд (у склада - награда шире), счётчики замка - по 4 */
.wstats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wstats.st3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
}
.wstats.c4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ws {
  display: grid;
  justify-items: center;
  align-content: center;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ws small {
}
.ws b {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.ws .gemb > .ico {
}
.ws[data-kind='fight'] b {
  color: var(--red-hi);
}
.ws[data-kind='march'] b {
  color: var(--blue-hi);
}
.ws[data-kind='home'] b {
  color: var(--green-hi);
}
.ws[data-kind='knocked'] b {
  color: var(--dim);
}
/* строки «кто где» */
.wroster {
  display: grid;
}
.wroster .row {
}
.wroster .row b {
}
.wroster .row small {
}
.wroster .row .ava {
  --ring: var(--blue-hi);
}
.wroster .row.theirs .ava {
  --ring: var(--red-hi);
}
.wroster .row[data-kind='fight'] small {
  color: var(--red-hi);
}
.wroster .row[data-kind='march'] small {
  color: var(--blue-hi);
}
.wroster .row[data-kind='target'] small {
  color: var(--gold-hi);
}
.wroster .row[data-kind='knocked'] {
  opacity: 0.55;
}
.wroster .row[data-kind='knocked'] .ava {
  --ring: var(--stone-hi);
}
.wroster .cup {
  white-space: nowrap;
}
.wroster .row.short {
}
.wroster .row.short small {
}
/* небольшие окна войны: тревога, герой дошёл, итог войны, правила */
.win.wsmall {
  width: 430px;
  padding: 30px 18px 16px;
  text-align: center;
}
.wsmall > p {
  margin: 4px 0 8px;
  font-size: 14px;
  line-height: 1.35;
}
.wsmall > .note {
  display: block;
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.35;
}
.win.wsmall.wend {
  width: 520px;
}
.win.wsmall.wrules {
  width: 560px;
}
.wrules > p {
  text-align: left;
  font-size: 13px;
}
/* итог войны: значками - число под крупным значком, ниже подпись (как добыча боя); сундук - в золотой рамке */
.wrw {
  display: flex;
  justify-content: center;
}
.wrw > .lootc {
}
.wrw > .lootc > .ico {
  filter: drop-shadow(0 3px 3px #000);
}
.wrw > .lootc .emb {
  filter: drop-shadow(0 3px 3px #000);
}
.wrw > .lootc b {
}
.wrw > .lootc small {
}
.wrw > .lootc.wchest {
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 0 12px rgba(233, 192, 106, 0.45);
}
/* низкий экран: окна склада и замка мельче */
@media (min-aspect-ratio: 844/430) {
  .wwin .col.box {
    padding: 8px;
  }
  .wwin .col {
    gap: 6px;
  }
  .whead {
  }
  .whead > .ico {
  }
  .whead .emb {
  }
  .stockln > .bignum {
  }
  .ws {
  }
  .ws small {
  }
  .ws b {
  }
}

/* ─── 22. Боевой пропуск ─────────────────────────────────────────────────────────────────────────────────────────── */
/* боевой пропуск (28; v18.6: «красивое, запоминающееся, с эффектами»): рамка с картиной сезона (затемнение слева -
   уровень кольцом и сведения читаются), искры (холст); под рамкой лоток дорожек: таблички, награды по уровням (видно 7,
   листается вбок), линия общего прогресса с точкой «мы здесь»; справа - королевский пропуск и задания дня. Анимации -
   только transform/opacity */
.sect > .mp.pmain {
  background: #1a2230 center / cover no-repeat;
}
/* картина сезона наезжает медленнее арены, по ней раз в 7 с пробегает блик (076, как в 18.90) */
.pmain > .artl::before {
  background-position: center 58%;
  animation-duration: 32s;
  transform-origin: 45% 60%;
}
.pmain > .artl::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 240, 200, 0.18) 50%, transparent 60%) -200% 0 / 250%
    100% no-repeat;
  animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen {
  0%,
  60% {
    background-position: -200% 0;
  }
  100% {
    background-position: 250% 0;
  }
}
.pmain > .shade {
  position: absolute;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(8, 11, 16, 0.92) 0%, rgba(8, 11, 16, 0.55) 50%, rgba(8, 11, 16, 0.1) 80%);
}
.pfx {
  position: absolute;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.pfx canvas {
  display: block;
}
/* уровень кольцом: доля опыта до следующего - --p */
.pring {
  position: absolute;
  display: grid;
  place-items: center;
  align-content: center;
  background:
    radial-gradient(circle, #1a2230 58%, transparent 59%),
    conic-gradient(var(--gold-b-hi) 0 var(--p), rgba(0, 0, 0, 0.6) var(--p) 100%);
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 0 4px #0a0d12,
    inset 0 0 18px rgba(255, 210, 110, 0.35);
}
/* за кольцом уровня «дышит» тёплый свет */
.pring::before {
  content: '';
  position: absolute;
  inset: -12px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 100, 0.4), transparent 70%);
  pointer-events: none;
  animation: breathe 3.6s ease-in-out infinite;
}
.pring > b {
  text-shadow: 0 2px 0 #000;
}
/* по заливке опыта пробегает блеск (как в 18.90) */
.pmain .bar > i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%) -150% 0 / 60% 100%
    no-repeat;
  animation: shimmer 2.6s ease-in-out infinite;
}
@keyframes shimmer {
  to {
    background-position: 250% 0;
  }
}
.pring > small {
  text-transform: uppercase;
}
.pinfo {
  position: absolute;
  display: grid;
  justify-items: start;
  /* столбец - в ширину сведений: без него он рос по строке ««полоса + +1 уровень»», и кнопка вылезала за рамку на
     задания дня (076, 810×407) */
  grid-template-columns: minmax(0, 1fr);
}
.pinfo > .sn {
  text-transform: uppercase;
}
.pinfo > b {
  text-shadow: 0 2px 4px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pinfo > .note b {
}
.pinfo > .xrow {
  display: flex;
  flex-direction: column; /* 078: «+1 уровень» - под шкалой опыта */
  align-items: flex-start;
}
.xrow > .bar {
  flex: 0 1 auto;
}
.xrow > .bar > b {
}
.xrow > .btn {
  flex: none;
}
.pnote {
  position: absolute;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pnote > b {
}
/* лоток дорожек: таблички слева, справа дорожки - видно 7 уровней, листаются вбок */
.sect > .tray.ptray {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  grid-template-rows: 44px 18px 44px;
  align-items: center;
}
/* подписи дорожек - табличками (Т70): обычная - сталь, королевская - золото с короной */
.ptray > .rl {
  grid-column: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  text-shadow: 0 1px 1px #000;
  background: linear-gradient(180deg, #46536a, #252e3d);
  box-shadow:
    inset 0 0 0 1.5px #8ea0bb,
    inset 0 0 0 3px rgba(0, 0, 0, 0.45),
    inset 0 3px 0 2px rgba(255, 255, 255, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.6);
}
.ptray > .rl > .ico {
  filter: drop-shadow(0 1px 1px #000);
}
.ptray > .rl.free {
  grid-row: 1;
}
.ptray > .rl.r {
  grid-row: 3;
  background: linear-gradient(180deg, #7a5420, #3e2a0f);
  box-shadow:
    inset 0 0 0 1.5px var(--gold-b-hi),
    inset 0 0 0 3px rgba(0, 0, 0, 0.45),
    inset 0 3px 0 2px rgba(255, 236, 190, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(255, 200, 90, 0.25);
}
.ptray > .proad {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: stretch;
  overflow: auto hidden;
  scrollbar-width: none;
  container-type: inline-size;
}
.proad::-webkit-scrollbar {
  display: none;
}
/* столбец - уровень: 7 на ширину видимой части */
.plns {
  --col: calc((100cqi - 36px) / 7);
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 44px 18px 44px;
  grid-auto-columns: var(--col);
  align-items: center;
}
.plns .prw.free,
.plns .prw.bonus {
  grid-row: 1;
}
.plns .pnode {
  grid-row: 2;
}
.plns .prw.r,
.plns .pgap {
  grid-row: 3;
}
/* линия общего прогресса - от середины первого столбца до середины последнего уровня; золотая по всей длине (078),
   пройденное - ярким золотом */
.plns > .ptl {
  position: absolute;
  left: calc(var(--col) / 2);
  width: calc((var(--n, 30) - 1) * (var(--col) + 6px));
  background: linear-gradient(180deg, #6b4f17, #33250a);
  box-shadow:
    0 0 0 1px #0a0d12,
    0 0 6px rgba(255, 200, 90, 0.25);
}
/* та же линия между табличками дорожек - стоит на месте, в начале ряда (078) */
.ptray > .lgold {
  grid-column: 1;
  grid-row: 2;
  justify-self: stretch;
  background: linear-gradient(180deg, var(--gold-b-hi), var(--gold-b));
  box-shadow:
    0 0 0 1px #0a0d12,
    0 0 8px rgba(255, 210, 110, 0.6);
}
.ptl > .pfill {
  position: absolute;
  background: linear-gradient(180deg, var(--gold-b-hi), var(--gold-b));
  box-shadow: inset 0 0 6px rgba(255, 210, 110, 0.6);
  transform-origin: left;
}
.ptl > .pfill.grow {
  animation: grow 0.9s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes grow {
  from {
    transform: scaleX(0);
  }
}
.ptl > .pdot {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 35%, #fff6d2, var(--gold-hi) 45%, var(--gold-b) 80%);
  box-shadow:
    0 0 0 2px #0a0d12,
    0 0 10px 3px rgba(255, 214, 120, 0.85);
  animation: herePulse 1.6s ease-in-out infinite;
}
/* «мы здесь» пульсирует (как в 18.90) */
@keyframes herePulse {
  50% {
    box-shadow:
      0 0 0 2px #0a0d12,
      0 0 18px 6px rgba(255, 210, 110, 0.95);
  }
}
.plns .pnode {
  z-index: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  background: #141b26;
  box-shadow: 0 0 0 1.5px #4a5260;
}
.plns .pnode.on {
  background: linear-gradient(180deg, var(--gold-b-hi), var(--gold-b));
  box-shadow: 0 0 0 1.5px var(--gold-lo);
}
.plns .pnode.bonus {
}
/* ячейка награды: значок крупно, число; готово - зелёная кайма, забрано - тускло, не дошли - серая */
.prw {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.prw > .ico {
  filter: drop-shadow(0 2px 2px #000);
}
.prw:disabled {
}
.prw.got {
}
.prw.ready {
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1.5px var(--green-hi),
    inset 0 0 10px rgba(143, 229, 138, 0.5);
  animation: readyPulse 1.4s ease-in-out infinite;
}
/* готовая награда пульсирует, значок парит (как в 18.90) */
.prw.ready > .ico {
  animation: float 1.8s ease-in-out infinite;
}
@keyframes readyPulse {
  50% {
    box-shadow:
      inset 0 0 0 1.5px var(--green-hi),
      inset 0 0 14px rgba(143, 229, 138, 0.8),
      0 0 14px 2px rgba(143, 229, 138, 0.55);
  }
}
.prw.lock {
  filter: grayscale(0.8) brightness(0.6);
}
.prw > .pn {
  position: absolute;
  font: 700 11px var(--body);
  font-style: normal;
  text-shadow:
    0 1px 0 #000,
    0 0 3px #000;
}
/* награда забрана (078: «иконка зачем-то сжимается - почему не сделать эффект вокруг иконки?»): ячейка размер не меняет
   (было - класс .pop, а это подсказка ui.css: width max-content - ячейка ужималась по значку; и упругий масштаб), вокруг
   вспыхивает золотое свечение; кольцо и искры - .pburst */
.pgot {
  animation: prizeFlash 0.7s ease-out;
}
@keyframes prizeFlash {
  25% {
    box-shadow:
      inset 0 0 0 2px rgb(255, 242, 192),
      inset 0 0 18px rgba(255, 214, 120, 0.9),
      0 0 22px 6px rgba(255, 200, 90, 0.85);
  }
}
.pburst {
  position: absolute;
  pointer-events: none;
  z-index: 6;
}
.pburst::before {
  content: '';
  position: absolute;
  animation: ringOut 0.6s ease-out;
  box-shadow: 0 0 18px rgba(255, 210, 110, 0.9);
  border: 3px solid rgb(255, 242, 192);
}
@keyframes ringOut {
  0% {
    opacity: 1;
    transform: scale(0.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}
.pburst i {
  position: absolute;
  background: #fff2c0;
  box-shadow: 0 0 8px 2px rgba(255, 200, 90, 0.9);
  animation: flyOut 0.8s ease-out forwards;
}
@keyframes flyOut {
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.3);
    opacity: 0;
  }
}
/* справа: королевский пропуск (алый бархат в золоте), задания дня кольцами */
.royal {
  position: relative;
  isolation: isolate;
  flex: none;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  background: linear-gradient(180deg, rgba(122, 30, 46, 0.95), rgba(62, 14, 24, 0.95));
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    0 0 0 3px #0a0d12,
    inset 0 0 18px rgba(255, 210, 110, 0.3);
}
/* по кайме королевского пропуска бежит золотой отблеск (как в 18.90): кайма - кольцо из конического градиента,
   угол --a */
@property --a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.royal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--a, 0deg), #7a4a10, #fff1b8, #e0a53a, #7a4a10, #ffd680, #7a4a10);
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
  animation: ringspin 4s linear infinite;
}
@keyframes ringspin {
  to {
    --a: 360deg;
  }
}
.royal > .ico {
  animation: float 3.2s ease-in-out infinite;
}
.royal > b {
}
.royal > small {
  grid-column: 1 / -1;
}
.royal > .btn {
  grid-column: 1 / -1;
}
.rh.two {
  flex-direction: column;
  align-items: flex-start;
}
.rh.two > .hd {
}
.rt.task {
}
.rt.task.ready {
  flex: 1.6 1 0;
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 0 12px rgba(255, 210, 110, 0.4);
}
.rt.task.got {
}
.tring {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  background:
    radial-gradient(circle, #141b26 60%, transparent 61%),
    conic-gradient(var(--gold-b-hi) 0 var(--p), rgba(0, 0, 0, 0.6) var(--p) 100%);
}
.tring > .ico {
}
.tring > i {
  font: 700 9px/1 var(--body);
  font-style: normal;
}
.rt.task b {
}
.rt.task small {
}
.rt.task .btn {
  justify-self: start;
}

/* окно покупки и праздник (076): облик окна награды (.win.rwd, ui.css); корона праздника влетает и парит */
.pcrownwin .hero > .ico {
  animation:
    crownIn 0.9s cubic-bezier(0.2, 1.5, 0.4, 1) backwards,
    float 3s 1s ease-in-out infinite;
}
@keyframes crownIn {
  from {
    transform: scale(0.2) rotate(-25deg);
    opacity: 0;
  }
}
.pcrownwin .pfx {
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .pmain *,
  .ptray *,
  .ptray *::before,
  .ptray *::after,
  .pcrownwin * {
    animation: none !important;
  }
}

/* ─── 24а. Скрытый сундук: что выпало ─── */
/* набросок 074, окно 12: сундук-загадка со «?» крутится, вспышка цветом редкости, выпавший сундук в лучах (лучи - по
   центру сундука, под надписями и кнопкой), имя сундука и как часто такой выпадает; «Забрать» */
.win.hidwin {
  width: min(470px, calc(100vw / var(--uiz, 1) - 24px));
  padding: 30px 16px 16px;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.hidwin.rar-usual {
  --rc: #c9ccd2;
}
.hidwin.rar-average {
  --rc: #8fe58a;
}
.hidwin.rar-big {
  --rc: #6fb6ff;
}
.hidwin.rar-epic {
  --rc: #c08bff;
}
.hidwin.rar-legendary {
  --rc: #ffd36a;
}
.hidwin > .glow {
  left: 50%;
  top: 85px;
  transform: translate(-50%, -50%);
}
.hbox {
  position: relative;
  display: grid;
  place-items: center;
}
.hbox > .ico {
  object-fit: contain;
  filter: drop-shadow(0 6px 8px #000);
}
.hbox.q > .ico {
  filter: brightness(0.55) saturate(0.4) drop-shadow(0 4px 6px #000);
}
.hbox.q::after {
}
.hbox.spin {
  animation: hspin 1.3s cubic-bezier(0.3, 0, 0.6, 1);
}
@keyframes hspin {
  0% {
    transform: scale(0.8);
  }
  20% {
    transform: scale(1) rotate(-10deg);
  }
  40% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-14deg) scale(1.05);
  }
  80% {
    transform: rotate(14deg) scale(1.1);
  }
  100% {
    transform: scale(1.15);
  }
}
.hbox.shown > .ico {
  filter: drop-shadow(0 0 18px var(--rc, #ffc24a)) drop-shadow(0 4px 6px #000);
  animation: hpop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}
/* выпавший сундук - вспышка цветом редкости (как в 18.90) */
.hbox.shown::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rc, #ffc24a), transparent 65%);
  pointer-events: none;
  animation: hflash 0.9s ease-out forwards;
}
@keyframes hflash {
  0% {
    opacity: 1;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}
@keyframes hpop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}
.hidwin > b {
  font: 700 22px/1.1 var(--display);
  color: var(--rc, var(--gold-hi));
  text-shadow: 0 2px 0 #000;
}
.hidwin > small {
  min-height: 16px;
  font-size: 13px;
  color: var(--rc, var(--gold-hi));
}
@media (prefers-reduced-motion: reduce) {
  .hbox,
  .hbox > .ico {
    animation: none !important;
  }
}

/* облик без своего правила (был только в дате) */
.rw1 {
}
.rw1 small {
}
@media (max-aspect-ratio: 844/480) {
  .skc {
  }
}
@media (max-aspect-ratio: 844/480) {
  .chests .chest {
  }
}
@media (max-aspect-ratio: 844/480) {
  .chests .chest > img {
  }
}

/* ─── 23. Вход и регистрация ─────────────────────────────────────────────────────────────────────────────────────── */
/* окна «Вход» и «Регистрация» (085; с 086 - владелец 17.10: «хотелось бы вертикальное и чтобы по минимуму закрывало
   картинку фона; с другой подложкой, более прозрачной»): поверх заставки загрузки без затемнения - узкая колонка по
   проёму ворот на тёмном прозрачном стекле с размытием и тонкой золотой каймой (не рамка окна: без уголков и ленты);
   заголовок золотыми буквами; поля одно под другим, подпись - внутри пустой строки; под полем - правило, пока поле в
   фокусе, и что не так (красным); годится - зелёная кромка строки; глазок пароля - в самой строке; синяя «Войти» /
   «Создать» во всю ширину, под ней - переход в другое окно. С 096 над стеклом - эмблема игры; поля, кнопки и зазоры
   плотные, чтобы под ней помещалась и регистрация. С 097 эмблема - на общем месте всех экранов (base.css .glogo:
   сверху по середине, на низком экране - слева), стекло - под ней (справа от неё); окна не «вырастают» при открытии -
   эмблема не дёргается при смене входа и регистрации */
.modal.auth {
  z-index: 110; /* выше заставки (#boot, 100) */
  /* под эмблемой; ленты заголовка над окном нет */
  padding-top: calc(var(--logo-top) + var(--logo-h) + 6px);
  padding-bottom: 6px;
  background: none;
}
.modal.auth,
.modal.auth > .panel {
  animation: none;
}
/* стекло - сразу под эмблемой, а не по середине места под ней (098: «окно входа надо поднять чуть выше к лого»): у входа
   и регистрации верх стекла на одной строке, при смене окна стекло не прыгает */
.modal.auth > .win {
  margin: 0 auto auto;
}
.win.authwin {
  width: min(272px, calc(100vw / var(--uiz, 1) - 24px));
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: none;
  background: none;
  box-shadow: none;
}
.apanel {
  flex: none;
  padding: 7px 14px 6px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(233, 192, 106, 0.5);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 21, 30, 0.38), rgba(6, 8, 12, 0.52));
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.win.authwin::before,
.win.authwin::after,
.win.authwin > .cn {
  display: none;
}
/* заголовок: золотые буквы, по бокам - тонкие золотые черты */
.atitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 17px/1.1 var(--display);
  color: var(--gold-hi);
  text-shadow:
    0 1px 0 #3a2200,
    0 2px 6px rgba(0, 0, 0, 0.9);
}
.atitle::before,
.atitle::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 192, 106, 0.8));
}
.atitle::after {
  background: linear-gradient(90deg, rgba(233, 192, 106, 0.8), transparent);
}
.aform {
  display: grid;
  gap: 5px;
}
.agrid2 {
  display: grid;
  gap: 4px;
}
.afield {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}
.abox {
  position: relative;
  display: flex;
}
.abox > .inp {
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  font-size: 14px;
  background: linear-gradient(180deg, rgba(4, 6, 10, 0.6), rgba(20, 26, 36, 0.55));
}
.abox > .inp::placeholder {
  color: rgba(233, 222, 196, 0.6);
}
/* пароль: справа в строке - место под глазок */
.abox > .inp:has(+ .eye) {
  padding-right: 34px;
}
/* годится - зелёная кромка строки, не так - красная */
.afield:has(> .ahint[data-st='good']) .inp {
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(110, 210, 110, 0.75);
}
.afield:has(> .ahint[data-st='bad']) .inp {
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(235, 100, 90, 0.85);
}
/* подсказка: правило - только пока поле в фокусе, что не так - всегда, «годится» - кромкой, без текста */
.ahint {
  display: none;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--dim);
  text-shadow: 0 1px 2px #000;
}
.afield:focus-within > .ahint:not(:empty):not([data-st='good']),
.ahint[data-st='bad'] {
  display: block;
}
.ahint[data-st='bad'] {
  color: var(--red-hi);
}
.aerr {
  text-align: center;
  color: var(--red-hi);
  text-shadow: 0 1px 2px #000;
}
.aerr:empty {
  display: none;
}
.abtns {
  display: grid;
  justify-items: center;
  gap: 5px;
}
.abtns > .amain {
  width: 100%;
}
/* места облика (Login.dat AuthMain, Button AuthLink): облик правила без места в css уходит в свой лист раньше css - и
   .btn (ui.css) его перебивал: главная кнопка была 40 точек вместо 32 (098) */
.amain {
}
.btn.alink {
}
.aswitch {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--text);
  text-shadow: 0 1px 2px #000;
}
/* глазок «показать пароль» - в самой строке справа: глаз рисуется рамкой и зрачком; пароль виден - глаз открыт и
   горит золотом, скрыт - перечёркнут */
.eye {
  position: absolute;
  right: 3px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  border-radius: var(--r-s);
  background: none;
}
.eye::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 10px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--dim);
  border-radius: 50% / 60%;
  background: radial-gradient(circle, var(--dim) 0 2.5px, transparent 3px);
}
.eye::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  transform: translate(-50%, -50%) rotate(-35deg);
  background: var(--dim);
  box-shadow: 0 0 0 1px rgba(4, 6, 10, 0.9);
}
.eye[aria-pressed='true']::before {
  border-color: var(--gold-hi);
  background: radial-gradient(circle, var(--gold-hi) 0 2.5px, transparent 3px);
}
.eye[aria-pressed='true']::after {
  display: none;
}
/* низкий экран (телефон с полосой адреса, 268): поля слоя, строки и зазоры плотнее - колонка помещается без
   прокрутки (подсказки «что не так» при вводе могут добавить прокрутку) */
/* низкий экран (до 389): эмблема слева по середине высоты (base.css .glogo) - стекло справа от неё */