@import url("https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@400;500;700&display=swap");
/* ================= «Коллапс» - полноэкранная карточная игра =================
   Оформление: темное фэнтези Watcher of Realms. Золото и камень, гравировка
   по краям, тлеющие искры. Подпись экрана боя - каменный разлом между
   армиями: чем меньше рассудка, тем сильнее трещины. На нуле разлом
   раскрывается и начинается коллапс.                                       */

#cl-root {
  --gold: #5fd4c2;
  --gold-lt: #9ff5e4;
  --accent: #dcefe9;
  --ink: #0a0c0e;
  --panel: #0c0f12;
  --raised: #121820;
  --txt: #cfd6da;
  --hint: #71818c;
  --red: #b03a3a;
  --hurt: #7a1f1f;
  --dmg: #ff6b5e;
  --target: #ff8a5e;
  --cost: #2f6fd0;
  --atk: #c98a2c;
  --def: #6b7b8c;
  --r0: rgba(150, 158, 172, .7);
  --r1: #9b59d0;
  --r2: #e8842c;
  --r3: #6fe3d2;

  /* единица масштаба: сотая часть высоты арта. Весь бой считается в ней,
     иначе на телефоне интерфейс мельчает и вылезает за экран */
  --vh: var(--app-h, 100vh);
  --art-h: min(var(--vh), calc(100vw / 16 * 9));
  --u: calc(var(--art-h) / 100);

  position: fixed;
  inset: 0;
  height: var(--app-h, 100%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  background: var(--ink);
}
#cl-root.hidden { display: none !important; }

/* --- три слоя фона: арт, затемнение, золотая дымка --- */
#cl-root::before {
  content: "";
  position: absolute; inset: 0;
  /* тон и затемнение запечены в файл: без filter и полупрозрачного слоя */
  background: url("assets/hub_bg.jpg?v=1") center top / cover no-repeat;
  pointer-events: none;
}
#cl-root::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(142,166,178,.12), transparent 60%),
    linear-gradient(180deg, rgba(11,14,21,.86), rgba(11,14,21,.4) 30%,
                    rgba(11,14,21,.5) 62%, rgba(11,14,21,.95));
}

/* ===================== ПОЛНОЭКРАННЫЕ СЦЕНЫ ===================== */
/* .cl-view сжат до 820px, поэтому арт кладем отдельным слоем на весь экран */

.cl-stage { position: absolute; inset: 0; overflow: hidden; z-index: 6; }
/* каркас с отступами, сцена должна накрыть его целиком: отступы снимаем */
#cl-root:has(> .cl-view > #cl-body > .cl-stage:not(.back)) .cl-view { padding: 0; }
/* подложка вокруг вписанного арта: заранее размытая картинка, без blur() */
.cl-stage::before {
  content: ""; position: absolute; inset: 0;
  background: var(--art-blur, #0d1114) center / cover no-repeat;
}
/* арт вписан целиком: ничего не обрезается и не уезжает за край */
.cl-art {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: 100%; width: auto; aspect-ratio: 16 / 9;
  background: var(--art) center / 100% 100% no-repeat;
  box-shadow: 0 0 70px rgba(0,0,0,.75);
}
@media (max-aspect-ratio: 16 / 9) { .cl-art { width: 100%; height: auto; } }

/* пока открыта сцена, базовый фон гасим - иначе он лезет по бокам */
#cl-root.scene-on::before { opacity: 0; }

/* двор: гримуарный тон запечен в castle_grim.jpg, CSS-фильтров на арте нет */
.cl-castle { --art: url("assets/castle_grim.jpg?v=1"); --art-blur: url("assets/castle_blur.jpg?v=1"); }
/* арт двора заполняет экран по ширине, как в макете */
.cl-castle .cl-art { width: max(100%, calc(var(--vh) * 16 / 9)); height: auto; }
/* подложка подэкранов двора (таверна, лавка): размытый двор в полумраке */
.cl-stage.back { z-index: -1; background: #0d1114; }
.cl-stage.back::before { content: ""; position: absolute; inset: 0;
  background: url("assets/castle_blur.jpg?v=1") center / cover no-repeat; }
.cl-stage.back::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,9,11,.62), rgba(6,9,11,.42) 40%, rgba(6,9,11,.72));
}
.cl-battlefield { --art: url("assets/battle.jpg"); }
/* в бою арт накрывает экран целиком - подложка не нужна */
.cl-battle::before { display: none; }

/* искры */
.cl-ember {
  position: absolute; z-index: 2; pointer-events: none;
  background: url("assets/fx/ember.png") center / contain no-repeat;
  animation: clEmber linear forwards;
}
@keyframes clEmber {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  15%  { opacity: .8; }
  100% { transform: translateY(-340px) scale(.5); opacity: 0; }
}

/* --- каркас экрана --- */
.cl-view {
  position: relative; z-index: 5; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: calc(18px + var(--safe-top, 0px))
           max(16px, calc(16px + var(--safe-right, 0px)), env(safe-area-inset-right, 0px))
           calc(14px + var(--safe-bottom, 0px))
           max(16px, calc(16px + var(--safe-left, 0px)), env(safe-area-inset-left, 0px));
  overflow: hidden;
  /* масштаб на больших экранах (--k считает app.js, на телефоне = 1):
     каркас рисуется в уменьшенном размере и растягивается transform-ом.
     Это работает одинаково в Chromium и WebKit, в отличие от zoom.
     Внутри каркаса высота экрана и единица --u тоже делятся на --k */
  --kk: var(--k, 1);
  width: calc(100% / var(--kk)); height: calc(100% / var(--kk)); flex: none;
  transform: scale(var(--kk)); transform-origin: 0 0;
  --vh: calc(var(--app-h, 100vh) / var(--kk));
  --u: calc(var(--art-h) / 100 / var(--kk));
}
/* бой живет в своих единицах (--u от высоты арта) и не масштабируется */
#cl-root.in-battle .cl-view { --kk: 1; }
/* оверлеи в корне масштабируются так же */
.cl-talk, .cl-modal {
  width: calc(100% / var(--k, 1)); height: calc(100% / var(--k, 1)); right: auto; bottom: auto;
  transform: scale(var(--k, 1)); transform-origin: 0 0;
}
.cl-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cl-scroll.no-scroll { overflow: hidden; }
.cl-scroll::-webkit-scrollbar { width: 3px; }
.cl-scroll::-webkit-scrollbar-thumb { background: rgba(142,166,178,.3); border-radius: 3px; }

.cl-h1 {
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700;
  font-size: 21px; color: var(--gold-lt); letter-spacing: .4px;
  text-shadow: 0 2px 14px rgba(142,166,178,.28);
}
.cl-sub { font-size: 12px; color: var(--hint); margin-top: 3px; }
.cl-head { margin-bottom: 14px; }

/* заголовок с линиями по бокам */
.cl-rule {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 10px;
  font-family: "Alegreya SC", Georgia, serif; font-size: 13px;
  color: var(--gold); text-transform: uppercase; letter-spacing: 1.4px;
}
.cl-rule::before, .cl-rule::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, rgba(142,166,178,.45), transparent);
}

/* --- кнопки --- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 18px; border-radius: 11px; cursor: pointer;
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700; font-size: 15px;
  color: #14100a; border: 1px solid rgba(142,166,178,.5);
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  box-shadow: 0 2px 12px rgba(142,166,178,.3), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s, box-shadow .2s, opacity .2s;
}
.cl-btn:active { transform: translateY(1px) scale(.99); }
.cl-btn[disabled] { opacity: .4; pointer-events: none; }
.cl-btn.ghost {
  background: linear-gradient(180deg, rgba(28,35,51,.95), rgba(18,23,34,.95));
  color: var(--txt); border-color: rgba(142,166,178,.32);
  box-shadow: inset 0 0 24px rgba(0,0,0,.5);
}
.cl-btn.wide { width: 100%; }
.cl-btn.sm { padding: 8px 13px; font-size: 13px; border-radius: 9px; }
.cl-btn.danger { background: linear-gradient(180deg, #8f3030, #5f1c1c); color: #ffd9d0;
  border-color: rgba(176,58,58,.6); box-shadow: 0 2px 12px rgba(176,58,58,.28); }

/* --- панели --- */
.cl-card {
  position: relative; background: linear-gradient(180deg, rgba(28,35,51,.9), rgba(18,23,34,.94));
  border: 1px solid rgba(142,166,178,.3); border-radius: 14px; padding: 14px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.45);
}
.cl-card + .cl-card { margin-top: 10px; }
.cl-card.tap { cursor: pointer; transition: border-color .18s, transform .12s; }
.cl-card.tap:active { transform: scale(.99); }
.cl-card.tap:hover { border-color: rgba(142,166,178,.6); }
.cl-card.locked { opacity: .55; }
.cl-empty { text-align: center; color: var(--hint); font-size: 13px; padding: 26px 12px; line-height: 1.5; }

/* ================================ ХАБ ================================ */
/* экран всегда ландшафтный: профиль слева, дела по центру, меню справа */

.cl-hub {
  display: grid; grid-template-columns: minmax(230px, 300px) 1fr 148px;
  gap: 16px; height: 100%; min-height: 0;
}
.cl-hub-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cl-side {
  min-width: 0; display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.cl-side::-webkit-scrollbar { width: 3px; }
.cl-side::-webkit-scrollbar-thumb { background: rgba(142,166,178,.3); border-radius: 3px; }

/* профиль: единая панель в духе игрового интерфейса */
.cl-profile {
  position: relative; display: flex; gap: 12px; align-items: center;
  padding: 12px 12px 14px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(38,30,18,.72), rgba(14,18,27,.88));
  border: 1px solid rgba(142,166,178,.42);
  box-shadow: inset 0 0 30px rgba(0,0,0,.55), 0 6px 20px rgba(0,0,0,.45);
}
/* уголки-заклепки как на металлических панелях игры */
.cl-profile::before, .cl-profile::after {
  content: "❖"; position: absolute; font-size: 9px; color: rgba(142,166,178,.55);
}
.cl-profile::before { top: 4px; left: 7px; }
.cl-profile::after { bottom: 4px; right: 7px; }
.cl-ava {
  position: relative; width: 96px; height: 96px; flex: none; cursor: pointer;
  background: url("assets/ava_ring.png") center / contain no-repeat;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
}
.cl-ava img, .cl-ava span {
  width: 66%; height: 66%; border-radius: 50%; object-fit: cover;
}
.cl-ava span {
  display: flex; align-items: center; justify-content: center;
  font-family: "Alegreya SC", Georgia, serif; font-size: 28px; color: var(--gold);
}
.cl-ava .cl-ava-edit {
  position: absolute; right: 2px; bottom: 2px; padding: 2px 6px; font-size: 10px;
  border-radius: 9px; background: rgba(11,14,21,.85); color: var(--gold-lt);
  border: 1px solid rgba(142,166,178,.4);
}
.cl-nick {
  display: block; max-width: 100%; box-sizing: border-box;
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700; font-size: 15px;
  color: #38290f; text-shadow: 0 1px 0 rgba(255,238,196,.5); text-align: center;
  background: url("assets/nameplate.png") center / 100% 100% no-repeat;
  padding: 9px 18px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
}
.cl-lvl { font-size: 11.5px; color: var(--gold); margin-top: 5px; text-align: center; }
.cl-xp {
  position: relative; height: 20px; margin-top: 4px;
  background: url("assets/xp_bar.png") center / 100% 100% no-repeat;
}
.cl-xp i {
  position: absolute; left: 6%; top: 45%; height: 28%; border-radius: 3px;
  background: linear-gradient(90deg, #2f9cc4, #a8ecff);
  box-shadow: 0 0 8px rgba(130,224,255,.8);
}

.cl-icons { display: flex; gap: 8px; }
.cl-icons > * { min-width: 0; }
.cl-ico {
  position: relative; flex: 1; padding: 10px 4px 8px; text-align: center; cursor: pointer;
  font-size: 19px; border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(52,42,24,.55), rgba(14,18,27,.9)),
    url("assets/panel_wood.jpg") center / 220px;
  border: 1px solid rgba(142,166,178,.34);
  box-shadow: inset 0 1px 0 rgba(159,245,228,.12), 0 3px 10px rgba(0,0,0,.4);
  transition: border-color .18s, transform .12s, box-shadow .18s;
}
.cl-ico:hover { border-color: rgba(159,245,228,.75);
  box-shadow: inset 0 1px 0 rgba(159,245,228,.2), 0 0 14px rgba(142,166,178,.25); }
.cl-ico:active { transform: scale(.97); }
.cl-ico small { display: block; font-size: 9.5px; color: var(--gold);
  margin-top: 4px; letter-spacing: .3px; text-shadow: 0 1px 3px #000; }
.cl-ico b {
  position: absolute; top: -5px; right: -4px; min-width: 16px; padding: 1px 4px;
  border-radius: 9px; background: var(--red); color: #fff; font-size: 10px;
  border: 1px solid rgba(255,180,160,.5); box-shadow: 0 0 8px rgba(176,58,58,.7);
}

/* сводка боев: свиток с разделителями вместо голых цифр */
.cl-stats {
  display: flex; align-items: stretch; border-radius: 11px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(48,38,22,.5), rgba(12,16,24,.9)),
    url("assets/panel_wood.jpg") center / 260px;
  border: 1px solid rgba(142,166,178,.34);
  box-shadow: inset 0 1px 0 rgba(159,245,228,.1), 0 3px 12px rgba(0,0,0,.45);
}
.cl-stats > div {
  flex: 1; min-width: 0; text-align: center; padding: 9px 2px 8px;
  border-right: 1px solid rgba(142,166,178,.18);
}
.cl-stats > div:last-child { border-right: 0; }
.cl-stats b {
  display: block; font-family: "Alegreya SC", Georgia, serif; font-size: 17px;
  color: var(--accent); text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.cl-stats span { font-size: 9.5px; color: var(--gold); letter-spacing: .3px; }

.cl-coins {
  display: flex; align-items: center; gap: 6px; padding: 6px 11px;
  border: 1px solid rgba(142,166,178,.35); border-radius: 20px; font-size: 13px;
  background: rgba(11,14,21,.6); color: var(--accent); font-weight: 600;
}

/* правое меню: компактные пункты в дереве и металле, выход прижат к низу */
.cl-menu {
  min-width: 0; display: flex; flex-direction: column;
  gap: clamp(6px, 1.1vh, 12px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.cl-menu::-webkit-scrollbar { display: none; }
.cl-mi {
  position: relative; flex: none; display: flex; align-items: center; gap: 9px;
  padding: clamp(9px, 1.5vh, 16px) 10px; cursor: pointer; font-size: 13px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(52,42,24,.52), rgba(14,18,27,.9)),
    url("assets/panel_wood.jpg") center / 200px;
  border: 1px solid rgba(142,166,178,.34);
  box-shadow: inset 0 1px 0 rgba(159,245,228,.12), 0 3px 10px rgba(0,0,0,.42);
  color: var(--accent); text-shadow: 0 1px 4px rgba(0,0,0,.85);
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700; letter-spacing: .3px;
  transition: border-color .18s, transform .12s, box-shadow .18s;
}
.cl-mi:hover {
  border-color: rgba(159,245,228,.75);
  box-shadow: inset 0 1px 0 rgba(159,245,228,.2), 0 0 14px rgba(142,166,178,.28);
}
.cl-mi:active { transform: translateX(2px) scale(.99); }
/* иконка в собственном гнезде, как ячейка снаряжения */
.cl-mi i {
  font-style: normal; font-size: 14px; flex: none;
  width: 24px; height: 24px; line-height: 22px; text-align: center;
  border-radius: 6px; background: rgba(8,11,17,.62);
  border: 1px solid rgba(142,166,178,.3);
}
.cl-mi.exit {
  color: #e6b6a6; border-color: rgba(176,58,58,.45);
  background:
    linear-gradient(180deg, rgba(70,26,26,.45), rgba(14,18,27,.92)),
    url("assets/panel_wood.jpg") center / 200px;
}
.cl-mi.exit:hover { border-color: rgba(255,120,100,.7);
  box-shadow: inset 0 1px 0 rgba(255,190,170,.18), 0 0 14px rgba(176,58,58,.3); }
.cl-mi.exit i { border-color: rgba(176,58,58,.4); }

/* переключатель режима в том же металле */
.cl-mode {
  flex: none; display: flex; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(142,166,178,.4);
  box-shadow: inset 0 1px 0 rgba(159,245,228,.1), 0 3px 10px rgba(0,0,0,.42);
}
.cl-mode button {
  flex: 1; padding: 9px 0; font-size: 12.5px; cursor: pointer; border: 0;
  background:
    linear-gradient(180deg, rgba(46,37,21,.6), rgba(14,18,27,.92)),
    url("assets/panel_wood.jpg") center / 180px;
  color: var(--gold);
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700; letter-spacing: .4px;
}
.cl-mode button.on {
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  color: #14100a; text-shadow: 0 1px 0 rgba(255,240,200,.5);
  box-shadow: inset 0 -2px 6px rgba(120,88,30,.5);
}
.cl-mode button.off { opacity: .75; }

/* ============================== КАРТЫ ============================== */

.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }

/* --------------------------------------------------------------------------
   КАРТА В РУКЕ. Собирается слоями: портрет героя -> рамка редкости -> цифры.
   Рамка 816x1080, зоны сняты по альфа-каналу самого файла:
     окно портрета  L 18.50%  T 14.26%  62.25 x 32.31
     стоимость      86.3% / 9.3%   (каменная плашка справа сверху)
     урон           17.2% / 85.6%  (серый скол слева внизу)
     здоровье       82.8% / 85.6%  (красный скол справа внизу)
     герб фракции   43.75% / 87.13%  11.9 x 8.9  (черный ромб на бортике)
   Редкость - это сам файл рамки: между собой они отличаются только цветом
   камня в левом верхнем углу, поэтому поверх ничего не рисуем.
   Подписи лежат в SVG с тем же viewBox: текст тянется вместе с картой,
   и одна разметка работает и в сетке коллекции, и в веере руки, и в
   полноэкранном просмотре.                                                 */

.cl-cd { position: relative; aspect-ratio: 816 / 1080; }
.cl-cd .cd-art {
  position: absolute; left: 18.5%; top: 14.26%; width: 62.25%; height: 32.31%;
  background: center top / cover no-repeat;
  /* пока портрета нет, окно должно читаться нишей, а не черной заливкой */
  background-color: #171a24;
  box-shadow: inset 0 0 calc(var(--u, 4px) * 3) rgba(0,0,0,.75);
}
.cl-cd .cd-art.none {
  display: flex; align-items: center; justify-content: center;
  font-family: "Alegreya SC", Georgia, serif; font-size: 220%;
  color: rgba(142,166,178,.45);
  background: radial-gradient(70% 70% at 50% 40%, rgba(142,166,178,.16), #0d111a 72%);
}
/* на карте руки ромб в рамке непрозрачный (в отличие от жетона), поэтому
   герб ложится ПОВЕРХ рамки, чуть меньше ромба, чтобы металл окантовки
   оставался виден */
.cl-cd .cd-fac {
  position: absolute; left: 42.6%; top: 86.2%; width: 14.2%; height: 10.7%; z-index: 3;
  display: flex; align-items: center; justify-content: center;
}
.cl-cd .cd-fac img { width: 100%; height: 100%; object-fit: contain; }
.cl-cd .cd-frame {
  position: absolute; inset: 0; z-index: 2; background: center / 100% 100% no-repeat;
}
.cl-cd.r0 .cd-frame { background-image: url("assets/frames/card_r0.webp?v=1"); }
.cl-cd.r1 .cd-frame { background-image: url("assets/frames/card_r1.webp?v=1"); }
.cl-cd.r2 .cd-frame { background-image: url("assets/frames/card_r2.webp?v=1"); }
.cl-cd.r3 .cd-frame { background-image: url("assets/frames/card_r3.webp?v=1"); }

/* подписи поверх рамки; viewBox совпадает с рамкой, единицы - пиксели файла */
.cl-cd .cd-txt, .cl-u .tk-txt {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: visible;
}
.cd-txt text, .tk-txt text {
  text-anchor: middle; dominant-baseline: central;
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700;
  fill: #fff; stroke: rgba(0,0,0,.85); paint-order: stroke fill;
}
/* размер кегля задает JS атрибутом font-size: от него же считается сжатие
   длинных значений через textLength, поэтому дублировать его в CSS нельзя */
.cd-txt .cd-cost { stroke-width: 11px; fill: #ffe9b0; }
.cd-txt .cd-atk, .cd-txt .cd-hp { stroke-width: 12px; }
.cd-txt .cd-hp.low { fill: #ff9b8e; }
.cd-txt .cd-name { stroke-width: 6px; fill: var(--accent); }
.cd-txt .cd-qty { stroke-width: 5px; fill: var(--gold-lt); }

/* --- плитка коллекции: та же карта, тень по силуэту рамки --- */
.cl-c { cursor: pointer; transition: transform .14s; }
.cl-c::before {
  content: ""; position: absolute; left: -12%; right: -12%; top: -9.1%; bottom: -9.1%;
  z-index: 0; pointer-events: none;
  background: url("assets/frames/glow/card_shadow.png") center / 100% 100% no-repeat;
  transform: translateY(2.5%);
}
.cl-c:active { transform: scale(.97); }
.cl-c.r1::before { background-image: url("assets/frames/glow/card_r1.png"); transform: none; }
.cl-c.r2::before { background-image: url("assets/frames/glow/card_r2.png"); transform: none; }
.cl-c.r3::before { background-image: url("assets/frames/glow/card_r3.png"); transform: none; }
.cl-c.dim { opacity: .35; }
.cl-c.picked::before { background-image: url("assets/frames/glow/card_pick.png"); transform: none; }

/* лист карты */
.cl-sheet-fx { font-size: 12px; color: var(--txt); line-height: 1.5; }
.cl-sheet-fx b { color: var(--gold-lt); font-weight: 600; }
.cl-kv { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.cl-kv span {
  padding: 4px 9px; border-radius: 8px; font-size: 11.5px;
  background: rgba(11,14,21,.55); border: 1px solid rgba(142,166,178,.24);
}
.cl-kv span b { color: var(--gold-lt); }
.cl-fac { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; }

/* ============================= ПОЛЕ БОЯ ============================= */

/* ============================== БОЙ ============================== */
/* все поле живет строго внутри рунной рамки арта */

.cl-battle {
  position: absolute; inset: 0; z-index: 6;
  /* бой заполняет экран целиком: рунная рамка крупнее, полей по бокам нет */
  --art-h: max(var(--vh), calc(100vw / 16 * 9));
  --u: calc(var(--art-h) / 100);
  --crop: max(0px, calc((var(--art-h) - var(--vh)) / 2));
  /* видимая высота полос над и под рамкой - от нее пляшут портрет и рука */
  --strip-top: calc(var(--u) * 23.7 - var(--crop));
  --strip-bot: calc(var(--u) * 23.1 - var(--crop));
}
.cl-battle .cl-art {
  width: max(100%, calc(var(--vh) * 16 / 9)); height: auto;
  aspect-ratio: 16 / 9;
}

/* слой светящихся рун поверх погашенной базы: зажигается при старте */
.cl-runes {
  position: absolute; inset: 0; pointer-events: none;
  background: url("assets/battle_runes.png") center / 100% 100% no-repeat;
  opacity: 0;
}
.cl-runes.lit { animation: clIgnite 1.9s cubic-bezier(.3,.7,.3,1) forwards; }
.cl-runes.on { opacity: 1; }
/* свечение при зажигании - только brightness: размытие по альфе всего
   экрана на каждом кадре роняло частоту кадров на телефоне */
@keyframes clIgnite {
  0%   { opacity: 0; filter: brightness(2.4); }
  35%  { opacity: .55; }
  60%  { opacity: 1; filter: brightness(2.1); }
  100% { opacity: 1; filter: brightness(1); }
}
/* короткая вспышка внутри рамки в момент зажигания */
.cl-arena.ignite::before {
  content: ""; position: absolute; inset: -4%; pointer-events: none; z-index: 4;
  background: radial-gradient(60% 60% at 50% 50%, rgba(150,220,255,.5), transparent 70%);
  animation: clFlash 1.5s ease-out forwards;
}
@keyframes clFlash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

/* рабочая зона = внутренняя часть рунной рамки, измерена по арту */
.cl-arena {
  /* арена уже: пять ячеек в линии занимают левую часть, правая треть экрана
     отдана руке, чтобы веер не накрывал поле */
  /* правый край арены считается от ширины экрана, а не арта: на ПК арт шире
     окна, и правая треть под руку иначе уезжала за веер */
  position: absolute; left: 21.9%; right: max(35%, calc(100% - 64vw)); top: 23.7%; bottom: 23.1%;
  /* по вертикали арена уже занимает почти весь экран, поэтому каждая
     сэкономленная строка идет прямо в размер жетонов: подпись линии
     убрана, разлом сжат до полоски, отступы урезаны */
  display: flex; flex-direction: column; gap: .25%; z-index: 2;
}
/* полосы вне рамки живут в координатах экрана, а не арта: иначе на телефоне
   портрет и рука уезжают за нижний край */
.cl-btop, .cl-bbot {
  position: absolute; left: 0; right: 0; z-index: 3; display: flex;
  /* сами полосы прозрачны для касаний, иначе они накрывают крайние
     линии поля и тап по ячейке уходит в полосу; кликабельны только дети */
  pointer-events: none;
  padding-left: calc(var(--u) * 3); padding-right: calc(var(--u) * 3);
}
.cl-btop {
  --strip: var(--strip-top);
  top: 0; height: var(--strip-top);
  /* по центру полоса накрывала верх поля, поэтому противник ушел вправо,
     где нет ни кнопки «Назад», ни системных кнопок Telegram */
  justify-content: flex-end; align-items: center;
  padding-top: calc(var(--safe-top, 0px) + var(--u) * 4);
  padding-left: max(0px, var(--safe-left, 0px), env(safe-area-inset-left, 0px));
  padding-right: max(0px, var(--safe-right, 0px), env(safe-area-inset-right, 0px));
  padding-right: calc(var(--u) * 16);
}
.cl-bbot {
  --strip: var(--strip-bot);
  bottom: 0; height: var(--strip-bot); align-items: center;
  gap: calc(var(--u) * 1.2); padding-bottom: var(--safe-bottom, 0px);
  padding-left: max(calc(var(--u) * 3), var(--safe-left, 0px), env(safe-area-inset-left, 0px));
  padding-right: max(calc(var(--u) * 5), calc(var(--u) * 2 + var(--safe-right, 0px)), env(safe-area-inset-right, 0px));
}

.cl-cmd { display: flex; align-items: center; gap: calc(var(--u) * 1.6); flex: none;
  pointer-events: auto; }
.cl-b-side, .cl-round { pointer-events: auto; }
.cl-cmd.foe { flex-direction: row-reverse; }
.cl-cmd.hit-face { animation: clQuake .3s; }

/* командир: портрет с круговой полосой морали */
.cl-face {
  position: relative; flex: none;
  /* портрет минус место под подпись значения, чтобы не упирался в край полосы */
  width: min(calc(var(--u) * 9.4), calc(var(--strip, 100px) - var(--u) * 7));
  height: min(calc(var(--u) * 9.4), calc(var(--strip, 100px) - var(--u) * 7));
}
.cl-face svg { position: absolute; inset: 0; transform: rotate(90deg); }
.cl-face .trk { fill: none; stroke: rgba(0,0,0,.55); stroke-width: 7; }
.cl-face .bar {
  fill: none; stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset .5s ease;
}
.cl-face.low .bar { animation: clHpLow 1.1s ease-in-out infinite; }
@keyframes clHpLow { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.cl-face-img {
  position: absolute; inset: 9%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 28%, #2a3245, #10141d);
  border: 1px solid rgba(142,166,178,.45);
  display: flex; align-items: center; justify-content: center;
  font-family: "Alegreya SC", Georgia, serif; color: var(--gold);
  font-size: calc(var(--u) * 5);
}
.cl-face-img img { width: 100%; height: 100%; object-fit: cover; }
.cl-hp-val {
  position: absolute; left: 50%; bottom: calc(var(--u) * -1.4); transform: translateX(-50%);
  padding: 0 calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.5);
  white-space: nowrap; min-width: calc(var(--u) * 5); text-align: center;
  background: rgba(8,11,17,.9); border: 1px solid rgba(142,166,178,.45);
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700;
  font-size: calc(var(--u) * 2.1); color: var(--accent); text-shadow: 0 1px 4px #000;
}
.cl-face.low .cl-hp-val { color: var(--dmg); border-color: rgba(255,107,94,.6); }

/* темная плашка с ником и значениями - на дереве стола текст иначе тонет */
.cl-plate {
  min-width: 0; padding: calc(var(--u) * .7) calc(var(--u) * 1.5);
  border-radius: calc(var(--u) * 1.5);
  background: linear-gradient(180deg, rgba(10,13,20,.9), rgba(6,8,13,.94));
  border: 1px solid rgba(142,166,178,.42);
  box-shadow: inset 0 1px 0 rgba(159,245,228,.12), 0 4px 16px rgba(0,0,0,.6);
}
.cl-plate b {
  display: block; font-family: "Alegreya SC", Georgia, serif; font-weight: 700;
  font-size: calc(var(--u) * 2.5); color: var(--accent); text-shadow: 0 1px 5px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: calc(var(--u) * 22);
}
.cl-plate-row {
  display: flex; gap: calc(var(--u) * 1.1); margin-top: calc(var(--u) * .2);
  font-size: calc(var(--u) * 1.9); color: var(--txt); white-space: nowrap;
}
.cl-cmd.foe .cl-plate { text-align: right; }
.cl-cmd.foe .cl-plate-row { justify-content: flex-end; }

/* энергия командира */
.cl-energy { display: flex; gap: calc(var(--u) * .4); margin-top: calc(var(--u) * .4); }
.cl-e {
  display: block; width: calc(var(--u) * 1.15); height: calc(var(--u) * 1.15);
  border-radius: 50%; background: rgba(255,255,255,.1);
  border: 1px solid rgba(47,111,208,.35);
}
.cl-e.on {
  background: radial-gradient(circle at 35% 30%, #8fd0ff, var(--cost));
  border-color: rgba(143,208,255,.7); box-shadow: 0 0 calc(var(--u) * 1) rgba(47,111,208,.85);
}
.cl-e.spent { background: rgba(47,111,208,.2); }

/* кнопки и подсказка справа от руки */
/* кнопка хода - на правом борту по центру, как в Hearthstone; в потоке
   нижней полосы ее нет, поэтому рука занимает весь правый нижний угол */
.cl-b-side {
  position: absolute; right: calc(var(--u) * 1.4 + max(var(--safe-right, 0px), env(safe-area-inset-right, 0px)));
  /* нижняя полоса прижата к низу экрана, поэтому bottom считается от него */
  bottom: calc(var(--vh, 100vh) * .5 - var(--u) * 4);
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .8);
  pointer-events: auto;
}
.cl-bbot .cl-b-side .cl-btn { padding: calc(var(--u) * 1.4) calc(var(--u) * 2.2); }
/* подсказка не участвует в раскладке, иначе ее ширина сдвигает руку */
.cl-b-side .cl-sub {
  position: absolute; right: 0; top: calc(100% + var(--u) * 1); width: calc(var(--u) * 34);
  pointer-events: none; text-shadow: 0 1px 3px #000; text-align: right;
}
/* верхний левый угол: счетчик раунда и выход из боя */
.cl-b-tl { margin-right: auto; align-self: flex-end; display: flex; align-items: center;
  gap: calc(var(--u) * 1.4); pointer-events: auto; }
.cl-b-tl .cl-round { margin-right: 0; align-self: auto; }
.cl-btn.xs { padding: 5px 9px; font-size: 11px; letter-spacing: .6px; text-transform: none;
  font-weight: 400; }
.cl-btop .cl-btn.xs { padding: calc(var(--u) * .5) calc(var(--u) * 1.4); font-size: calc(var(--u) * 1.8);
  margin-bottom: calc(var(--u) * .4); }
.cl-bbot .cl-btn {
  flex: none; white-space: nowrap;
  padding: calc(var(--u) * .8) calc(var(--u) * 1.8);
  font-size: calc(var(--u) * 2.1); border-radius: calc(var(--u) * 1.3);
}
.cl-bbot .cl-sub { font-size: calc(var(--u) * 2); text-align: right; }
.cl-hint { font-size: 12px; color: var(--hint); }

/* линии внутри рамки: тянутся по высоте арены, карты не вылезают за руны */
.cl-line {
  flex: 1 1 0; min-height: 0;
  /* ячейки идут от левой трети арены: левее их накрывали плашки
     раунда и игрока, правее - поднятая рука */
  display: flex; gap: .8%; padding: .22% .5% .22% 14%;
  border-radius: calc(var(--u) * 1.4);
  justify-content: flex-start; align-items: stretch;
}
.cl-line.mine { border: 1px solid rgba(142,166,178,.28);
  background: linear-gradient(180deg, transparent, rgba(142,166,178,.07)); }
.cl-line.foe { border: 1px solid rgba(176,58,58,.26);
  background: linear-gradient(180deg, rgba(176,58,58,.08), transparent); }
.cl-line.drop { border-color: var(--gold-lt);
  box-shadow: inset 0 0 26px rgba(142,166,178,.22), 0 0 16px rgba(142,166,178,.35); }
.cl-line.drop-no { border-color: rgba(176,58,58,.5); opacity: .5; }
.cl-slot {
  flex: 0 0 auto; height: 100%; width: auto; aspect-ratio: 1515 / 2195;
  max-width: calc(var(--u) * 13); border-radius: calc(var(--u) * 1.1);
  border: 1px dashed rgba(142,166,178,.16);
  display: flex; align-items: center; justify-content: center;
  color: rgba(142,166,178,.22); font-size: 12px;
}

/* --------------------------------------------------------------------------
   ЖЕТОН НА ПОЛЕ. Рамка 1515x2195, зоны сняты по альфа-каналу файла:
     окно портрета  L 22.44%  T 15.13%  54.79 x 52.71
     урон           21.9% / 70.2%   (серебряный ромб слева)
     здоровье       73.7% / 70.2%   (красный ромб справа)
     герб фракции   L 37.23% T 72.44%  25.61 x 17.63 - сквозное отверстие,
                    поэтому герб кладется ПОД рамку и смотрит через дырку.
   Редкость - кристалл на верхнем пике, он уже в файле рамки.
   Имени, полосы здоровья и брони на жетоне нет: полный расклад по герою
   показывает просмотр по удержанию.                                        */
.cl-u {
  /* ширина выводится из высоты линии, поэтому жетон не вылезает за руны */
  position: relative; flex: 0 0 auto; height: 100%; width: auto;
  aspect-ratio: 1515 / 2195; max-width: calc(var(--u) * 13);
  cursor: pointer; transition: transform .15s;
}
.cl-u .cl-u-art {
  position: absolute; left: 22.44%; top: 15.13%; width: 54.79%; height: 52.71%;
  background: center top / cover no-repeat; background-color: #171a24;
}
.cl-u-art.none { display: flex; align-items: center; justify-content: center;
  font-family: "Alegreya SC", Georgia, serif; font-size: calc(var(--u) * 3);
  color: rgba(142,166,178,.45); }
/* подложка гасит просвет поля в отверстии, герб садится ромб в ромб */
.cl-u .tk-fac {
  position: absolute; left: 35.2%; top: 71%; width: 29.6%; height: 20.5%;
  z-index: 1; display: flex; align-items: center; justify-content: center;
}
.cl-u .tk-fac::before {
  content: ""; position: absolute; inset: -3%; background: rgba(7,9,14,.94);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.cl-u .tk-fac img { position: relative; width: 97%; height: 97%; object-fit: contain; }
.cl-u .tk-frame {
  position: absolute; inset: 0; z-index: 2; background: center / 100% 100% no-repeat;
}
.cl-u.r0 .tk-frame { background-image: url("assets/frames/tok_r0.webp?v=1"); }
.cl-u.r1 .tk-frame { background-image: url("assets/frames/tok_r1.webp?v=1"); }
.cl-u.r2 .tk-frame { background-image: url("assets/frames/tok_r2.webp?v=1"); }
.cl-u.r3 .tk-frame { background-image: url("assets/frames/tok_r3.webp?v=1"); }
.tk-txt .tk-atk, .tk-txt .tk-hp { stroke-width: 26px; }
.tk-txt .tk-hp.low { fill: #ffb3a8; }
/* подсветки: свечение рисует подложка под рамкой (box-shadow), а не
   drop-shadow по альфе - последний пересчитывает размытие при каждом
   изменении класса и был главным источником лагов при прицеливании */
/* спрайт свечения повторяет силуэт рамки: поля 12% ширины по бокам */
.cl-u::before {
  content: ""; position: absolute; left: -12%; right: -12%; top: -8.2%; bottom: -8.2%;
  z-index: 0; pointer-events: none; display: none;
  background: var(--glow) center / 100% 100% no-repeat;
}
.cl-u.r2::before { --glow: url("assets/frames/glow/tok_r2.png"); display: block; }
.cl-u.r3::before { --glow: url("assets/frames/glow/tok_r3.png"); display: block; }
.cl-u.ready::before { --glow: url("assets/frames/glow/tok_ready.png"); display: block; }
.cl-u.sel { transform: translateY(-5px); }
.cl-u.sel::before { --glow: url("assets/frames/glow/tok_sel.png"); display: block; }
.cl-u.tgt::before { --glow: url("assets/frames/glow/tok_tgt.png"); display: block; }
.cl-u.frozen { filter: grayscale(.6) brightness(.8); }
/* значки состояний: усиления слева сверху, помехи следом */
.cl-states { position: absolute; top: 2px; left: 2px; right: 2px; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 2px; }
/* на жетоне значки вынесены наружу, над рамкой: внутри они закрывали портрет */
.cl-u .cl-states {
  top: calc(var(--u) * -2); left: -18%; right: -18%;
  flex-wrap: nowrap; justify-content: center; gap: calc(var(--u) * .25);
  pointer-events: none;
}
.cl-s {
  font-style: normal; font-size: calc(var(--u) * 1.7); line-height: 1;
  padding: calc(var(--u) * .35) calc(var(--u) * .55);
  border-radius: calc(var(--u) * .9); background: rgba(8,11,17,.85);
  text-shadow: 0 1px 2px #000;
}
/* мелко, чтобы строка значков не перебивала сам жетон */
.cl-u .cl-s {
  font-size: calc(var(--u) * 1.25); line-height: 1;
  padding: calc(var(--u) * .2) calc(var(--u) * .4);
  border-radius: calc(var(--u) * .7); white-space: nowrap;
}
.cl-s.buff { color: #9fe8a8; border: 1px solid rgba(120,220,140,.45); }
.cl-s.bad  { color: #ff9b8e; border: 1px solid rgba(255,120,100,.45); }
.cl-u-mark { position: absolute; top: 2px; right: 2px; font-size: 10px; text-shadow: 0 1px 3px #000; }
/* щит накрывает окно портрета, а не весь жетон со слотами */
.cl-u-shield {
  position: absolute; left: 17%; top: 10%; width: 66%; height: 63%; z-index: 3;
  background: url("assets/fx/shield.png") center / contain no-repeat;
  opacity: .6; animation: clShield 1.9s infinite; pointer-events: none;
}
@keyframes clShield { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .95; transform: scale(1.06); } }
@keyframes clPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes clQuake {
  0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); } 75% { transform: translateX(-2px); }
}
/* павший жетон держит свое место, пока доигрывает анимация удара,
   иначе выжившие смыкают ряд и удар прилетает в пустоту */
.cl-u.fallen { pointer-events: none; }
.cl-u.fallen .tk-frame { filter: grayscale(.5) brightness(.75); }
.cl-u.pre-spawn { opacity: 0; }
.cl-u.spawn { animation: clSpawn .55s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes clSpawn {
  0% { transform: translateY(-38%) scale(.35); opacity: 0; filter: brightness(2.2); }
  55% { transform: translateY(3%) scale(1.06); opacity: 1; filter: brightness(1.4); }
  100% { transform: none; opacity: 1; filter: brightness(1); }
}
/* кольцо света под появившимся героем */
.cl-u.spawn::after {
  content: ""; position: absolute; left: 10%; right: 10%; top: 55%; height: 30%; z-index: 0;
  border-radius: 50%; border: 2px solid rgba(159,245,228,.9); box-shadow: 0 0 16px rgba(159,245,228,.6);
  animation: clSpawnRing .6s ease-out forwards; pointer-events: none;
}
@keyframes clSpawnRing { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.cl-u.dying { animation: clDoom .75s forwards; }
@keyframes clDoom {
  0%   { transform: none; opacity: 1; }
  22%  { transform: translateY(calc(var(--u) * -.6)); filter: brightness(1.7); }
  100% { transform: translateY(calc(var(--u) * 2.4)) scale(.78);
         opacity: 0; filter: grayscale(1) blur(2px); }
}
.cl-u.struck { animation: clQuake .28s; }

/* видеоэффект удара: черный фон ролика гасится режимом screen,
   края кадра растушеваны маской, чтобы прямоугольник не читался на столе */
.cl-fx-punch {
  position: absolute;
  display: none;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 40;             /* над полем, под всплывающими цифрами (45) */
  object-fit: fill;
  -webkit-mask-image: radial-gradient(ellipse 52% 54% at 50% 46%, #000 45%, rgba(0,0,0,0) 96%);
  mask-image: radial-gradient(ellipse 52% 54% at 50% 46%, #000 45%, rgba(0,0,0,0) 96%);
}
.cl-fx-punch.on { display: block; }

/* у выстрела и снаряда действие тянется почти на весь кадр -
   маска шире, чем у ближнего удара, линия действия по центру */
.cl-fx-punch.archer, .cl-fx-punch.mage {
  -webkit-mask-image: radial-gradient(ellipse 58% 56% at 50% 49%, #000 55%, rgba(0,0,0,0) 97%);
  mask-image: radial-gradient(ellipse 58% 56% at 50% 49%, #000 55%, rgba(0,0,0,0) 97%);
}
/* лечение играется по центру цели, поверх снарядов */
.cl-fx-punch.healer {
  -webkit-mask-image: radial-gradient(ellipse 46% 50% at 50% 50%, #000 48%, rgba(0,0,0,0) 92%);
  mask-image: radial-gradient(ellipse 46% 50% at 50% 50%, #000 48%, rgba(0,0,0,0) 92%);
  z-index: 41;
}

/* вспышка-акцент в момент попадания */
.cl-fx-impact {
  position: absolute; width: 74px; height: 74px; margin: -37px 0 0 -37px;
  z-index: 41; pointer-events: none;
  background: url("assets/fx/starburst.png") center / contain no-repeat;
  animation: clImpact .5s ease-out forwards;
}
.cl-fx-impact.mage { filter: hue-rotate(230deg) saturate(1.2); }
@keyframes clImpact {
  0% { transform: scale(.5); opacity: 1; }
  25% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* просмотр карты по удержанию: своя единица --u масштабирует внутренности */
.cl-zoom {
  position: absolute; inset: 0; z-index: 140;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 7, 11, .72);
  animation: clZoomIn .16s ease-out;
}
@keyframes clZoomIn { from { opacity: 0; } }
.cl-zoom-card {
  height: min(calc(var(--app-h, 100vh) * .66), 66vh); width: auto; margin-bottom: 14vh;
  animation: clZoomCard .18s ease-out;
}
@keyframes clZoomCard { from { transform: scale(.9); } }
.cl-zoom-card::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 2%; bottom: 3%; z-index: 0;
  border-radius: 4% / 3%; box-shadow: 0 14px 40px rgba(0,0,0,.85), 0 0 26px 4px var(--rg, rgba(90,140,220,.3));
}
.cl-zoom-card.r1 { --rg: rgba(155,89,208,.55); }
.cl-zoom-card.r2 { --rg: rgba(232,132,44,.55); }
.cl-zoom-card.r3 { --rg: rgba(216,72,70,.6); }

/* перетаскивание: приподнятая карта, призрак под пальцем, прицел атаки */
.cl-battle .cl-hc, .cl-battle .cl-u, .cl-battle .cl-hand { touch-action: none; }
.cl-hc.lift { --lift: calc(var(--u) * -2.6); }
.cl-hc.drag-src { opacity: .35; }
/* во время перетаскивания стопка гаснет и не мешает целиться в ячейки */
.cl-hand.drag-on .cl-hc { opacity: .1; pointer-events: none; }
.cl-hand.drag-on .cl-hc.drag-src { opacity: .3; }
/* у призрака ни фильтров, ни переходов: drop-shadow по большой картинке
   с альфой пересчитывается на каждом кадре и есть тот самый лаг */
.cl-drag-ghost {
  filter: none !important; opacity: .95;
  will-change: transform; transition: none !important;
}
.cl-drag-ghost .cd-frame { filter: none !important; }
.cl-drag-ghost::before { display: none; }
.cl-aim {
  position: absolute; height: 5px; z-index: 96; pointer-events: none;
  transform-origin: left center; border-radius: 3px;
  background: linear-gradient(90deg, rgba(159,245,228,.15), rgba(255,120,70,.9));
  box-shadow: 0 0 10px rgba(255,120,70,.55);
}
.cl-aim::after {
  content: ""; position: absolute; right: -13px; top: 50%; margin-top: -9px;
  border: 9px solid transparent; border-left: 14px solid rgba(255,120,70,.95);
  filter: drop-shadow(0 0 6px rgba(255,120,70,.6));
}

/* кинематографический наезд: рамка рун занимает основную часть экрана */
.cl-battle .cl-art { transition: transform 2.1s cubic-bezier(.3, .55, .2, 1); }
.cl-battle .cl-art.moving { will-change: transform; }
.cl-battle .cl-art.zoomed { transform: translate(-50%, -50%) scale(var(--zS, 1.3)); }
.cl-battle .cl-art.snap { transition: none; }

/* разлом между армиями - подпись экрана */
/* разлом-разделитель по центру арены */
/* от разлома в поле осталась только светящаяся полоска: плашка с раундом
   и ходом съедала высоту у всех четырех линий и переехала в верхнюю полосу */
.cl-rift { flex: none; position: relative; height: calc(var(--u) * 1.4); }
.cl-rift-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(142,166,178,.55), transparent);
}
.cl-rift.open .cl-rift-line {
  background: linear-gradient(90deg, transparent, rgba(255,107,94,.8), transparent);
  box-shadow: 0 0 14px rgba(255,107,94,.6);
}
/* счетчик раунда в верхней полосе, слева от плашки противника */
.cl-round {
  /* прижата к низу полосы и к левому краю: сверху там висит системная
     кнопка «Назад» Telegram, и по горизонтали от нее не разойтись */
  margin-right: auto; align-self: flex-end;
  margin-left: calc(var(--u) * 2); margin-bottom: calc(var(--u) * .4);
  display: flex; align-items: center; gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * .5) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.4);
  background: rgba(8,11,17,.82); border: 1px solid rgba(142,166,178,.3);
  font-size: calc(var(--u) * 1.9); color: var(--hint); white-space: nowrap;
}
.cl-round b { font-family: "Alegreya SC", Georgia, serif;
  font-size: calc(var(--u) * 2.2); color: var(--gold-lt); }
.cl-round .doom { color: var(--dmg); }

/* рука: веер считается от масштаба экрана, поэтому не наезжает на кнопки */
.cl-hand { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; pointer-events: none; }
.cl-hand .cl-hc { pointer-events: auto; }
/* веер смещен вправо: слева теперь плашка игрока, справа кнопки */
/* веер прижат к правому краю: центр подобран так, чтобы при 5-7 картах
   правая карта вставала впритык к кнопкам «Завершить ход» */
/* смещения карт отрицательные и считаются от правого края руки:
   правая карта всегда впритык к кнопкам, сколько бы карт ни было */
.cl-hand { --fan-x: calc(100% + var(--u) * 3.6); }   /* правая карта у самого борта, как кнопка */
.cl-hc {
  position: absolute; left: var(--fan-x, 50%);
  /* стопка лежит в правом нижнем углу: ячейки прижаты влево, справа от них
     поле пустое, а кнопка хода ушла на правый борт по центру */
  /* веер живет в нижней полосе под ареной и на поле не заходит: верх карты
     на полединицы ниже нижней кромки арены, целиком карта поднимается при
     наведении или касании */
  --hand-h: min(calc(var(--u) * 30), calc(var(--vh, 100vh) * .36));
  height: var(--hand-h);
  /* веер стоит в правой трети экрана правее арены и на поле не заходит;
     низ карт на 4 единицы выше края, чтобы гербы не резались */
  bottom: calc(var(--u) * 4);
  width: auto; cursor: pointer;
  transition: transform .18s, opacity .2s; transform-origin: bottom center;
  /* смещения приходят из JS числами в единицах --u: abs() в CSS еще не везде есть */
  --offx: 0; --offy: 0; --rot: 0; --lift: 0px;
  transform: translate(calc(var(--u) * var(--offx) - 50%), calc(var(--u) * var(--offy) + var(--lift)))
             rotate(calc(var(--rot) * 1deg));
}
/* карта под пальцем при листании стопки */
.cl-hc.browse { z-index: 60 !important;
  transform: translate(calc(var(--u) * var(--offx) - 50%), calc(var(--u) * (var(--offy) - 13)))
             rotate(0deg) scale(1.12);
}
.cl-hc { transition: transform .12s, opacity .2s; }
/* тень и ободок карты - подложкой под рамкой; карта почти прямоугольная */
.cl-hc::before {
  content: ""; position: absolute; left: -12%; right: -12%; top: -9.1%; bottom: -9.1%;
  z-index: 0; pointer-events: none;
  background: url("assets/frames/glow/card_shadow.png") center / 100% 100% no-repeat;
  transform: translateY(3%);
}
/* выбранная карта стоит на месте: о выборе говорит только золотой ободок,
   любое смещение здесь читалось как разъезжающаяся рука */
.cl-hc.picked { z-index: 9 !important; }
/* хватает энергии - зеленый ободок по силуэту рамки, не хватает - карта гаснет */
.cl-hc.playable::before { background-image: url("assets/frames/glow/card_play.png"); transform: none; }
.cl-hc.playable.picked::before { background-image: url("assets/frames/glow/card_pick.png"); }
.cl-hc.cheap { opacity: .62; }
.cl-hc.cheap .cd-frame { filter: grayscale(.5) brightness(.8); }

/* баннеры и всплывающие числа */
.cl-banner {
  position: absolute; top: 38%; left: 0; right: 0; text-align: center; z-index: 40;
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700; font-size: 23px;
  color: var(--accent); pointer-events: none; animation: clBanner 1.35s forwards;
  background: linear-gradient(90deg, transparent, rgba(11,14,21,.85) 20%, rgba(11,14,21,.85) 80%, transparent);
  padding: 9px 0; text-shadow: 0 2px 18px rgba(142,166,178,.6);
}
.cl-banner.small { font-size: 16px; color: #cfe3ff; }
.cl-banner.doom { color: #ff7a55; font-size: 27px; letter-spacing: 3px; text-shadow: 0 2px 24px rgba(255,90,50,.7); }
@keyframes clBanner {
  0% { transform: scale(.7); opacity: 0; } 18% { transform: scale(1.05); opacity: 1; }
  30% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; }
}
.cl-float {
  position: absolute; z-index: 45; font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700; font-size: 17px; pointer-events: none; animation: clFloat .95s forwards;
  text-shadow: 0 2px 6px #000;
}
.cl-float.dmg { color: var(--dmg); }
.cl-float.heal { color: #7fdca0; }
.cl-float.gold { color: var(--accent); }
/* цифра видна с первого кадра: если анимация где-то не запустится, она все равно покажется */
@keyframes clFloat { 0% { transform: translateY(6px) scale(.8); opacity: 1; } 15% { transform: translateY(0) scale(1.15); } 70% { opacity: 1; } 100% { transform: translateY(-36px); opacity: 0; } }

/* итог боя */
.cl-over {
  position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: rgba(6,8,13,.94);
}
.cl-over h2 { font-family: "Alegreya SC", Georgia, serif; font-size: 32px; color: var(--gold-lt);
  text-shadow: 0 2px 24px rgba(142,166,178,.55); }
.cl-over.lose h2 { color: var(--hint); text-shadow: none; }
.cl-over-burst {
  position: absolute; width: 340px; height: 340px; opacity: .45; pointer-events: none;
  background: url("assets/fx/starburst.png") center / contain no-repeat;
}
@keyframes clSpin { to { transform: rotate(360deg); } }

/* модальные окна */
.cl-modal {
  position: absolute; inset: 0; z-index: 60; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(6,8,13,.94);
}
.cl-modal-box {
  width: 100%; max-width: 340px; max-height: 82%; overflow-y: auto;
  background: linear-gradient(180deg, #1b2231, #12161f);
  border: 1px solid rgba(142,166,178,.45); border-radius: 16px; padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.7);
}

/* формы */
.cl-input, .cl-area {
  width: 100%; padding: 11px 12px; border-radius: 10px; font-size: 15px;
  color: var(--txt); background: rgba(11,14,21,.7);
  border: 1px solid rgba(142,166,178,.3); outline: none;
}
.cl-input:focus, .cl-area:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(142,166,178,.18); }
.cl-area { resize: vertical; min-height: 74px; font-family: inherit; }
.cl-lbl { font-size: 11.5px; color: var(--gold); text-transform: uppercase;
  letter-spacing: 1px; margin: 14px 0 6px; }
.cl-choice { display: flex; gap: 8px; }
.cl-choice button {
  flex: 1; padding: 11px; border-radius: 10px; cursor: pointer; font-size: 14px;
  color: var(--txt); background: rgba(11,14,21,.65);
  border: 1px solid rgba(142,166,178,.28); font-family: inherit;
}
.cl-choice button.on { border-color: var(--gold-lt); color: var(--accent);
  background: rgba(142,166,178,.16); box-shadow: 0 0 12px rgba(142,166,178,.25); }
.cl-err { color: var(--dmg); font-size: 12px; margin-top: 8px; min-height: 15px; }

/* чат и письма */
.cl-msg { padding: 9px 11px; border-radius: 11px; margin-bottom: 7px; font-size: 13px;
  background: rgba(22,27,39,.8); border: 1px solid rgba(142,166,178,.16); line-height: 1.4; }
.cl-msg.mine { border-color: rgba(142,166,178,.4); background: rgba(142,166,178,.1); }
.cl-msg b { color: var(--gold-lt); font-size: 12px; }
.cl-msg time { color: var(--hint); font-size: 10px; margin-left: 6px; }
.cl-composer { display: flex; gap: 7px; padding-top: 9px; }
.cl-composer .cl-input { flex: 1; }

/* достижение */
.cl-ach { display: flex; gap: 11px; align-items: center; }
.cl-ach i { font-size: 25px; font-style: normal; filter: drop-shadow(0 0 8px rgba(142,166,178,.5)); }
.cl-ach b { font-family: "Alegreya SC", Georgia, serif; font-size: 15px; color: var(--accent); }
.cl-ach small { display: block; color: var(--hint); font-size: 11.5px; margin-top: 2px; }

/* тост внутри игры */
.cl-toast {
  position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 70;
  padding: 10px 16px; border-radius: 11px; font-size: 13px; max-width: 84%;
  text-align: center; color: var(--accent); background: rgba(11,14,21,.94);
  border: 1px solid rgba(142,166,178,.45); box-shadow: 0 8px 28px rgba(0,0,0,.6);
  animation: clToast .25s;
}
@keyframes clToast { from { opacity: 0; transform: translate(-50%, 8px); } }

/* прогресс задания */
.cl-pg { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); margin-top: 8px; overflow: hidden; }
.cl-pg i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-lt)); }

/* событие «Падение Небес» */
.cl-event {
  position: relative; border-radius: 16px; overflow: hidden; padding: 22px 18px;
  border: 1px solid rgba(142,166,178,.4); min-height: 190px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background:
    radial-gradient(90% 70% at 20% 0%, rgba(255,238,190,.22), transparent 62%),
    radial-gradient(90% 80% at 85% 100%, rgba(150,30,60,.4), transparent 60%),
    linear-gradient(160deg, #2b2438, #140f18 60%, #1d0f14);
}
.cl-event::before {
  content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background: url("assets/fx/runering.png") 78% 18% / 190px no-repeat;
}
.cl-event h3 { position: relative; font-family: "Alegreya SC", Georgia, serif;
  font-size: 23px; color: #ffe9b0; text-shadow: 0 2px 18px rgba(255,180,120,.5); }
.cl-event p { position: relative; font-size: 12.5px; color: #d8c9c0; margin-top: 4px; }
.cl-event .cl-btn { position: relative; margin-top: 14px; }
.cl-event.locked::after {
  content: ""; position: absolute; inset: 0; background: rgba(6,8,13,.78);
}
.cl-lock {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 6px;
  font-family: "Alegreya SC", Georgia, serif; font-size: 15px; color: var(--gold-lt);
}

/* ============================ ДВОР ЗАМКА ============================ */
/* арт на весь экран, кнопки стоят на своих постройках */

.cl-castle .cl-art::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(125% 80% at 50% 42%, transparent 42%, rgba(11,14,21,.5));
}

/* панель двора: держится по центру, чтобы не лезть под кнопки Telegram
   в углах экрана, и считается в единицах масштаба */
.cl-castle-bar {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  top: calc(var(--safe-top, 0px) + var(--u) * 1.5);
  max-width: 76%; display: flex; align-items: center; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 2);
  background: linear-gradient(180deg, rgba(10,13,20,.86), rgba(6,8,13,.92));
  border: 1px solid rgba(142,166,178,.4);
  box-shadow: 0 4px 18px rgba(0,0,0,.6);
}
.cl-castle-bar .cl-h1 { font-size: calc(var(--u) * 3.4); }
.cl-castle-bar .cl-sub { font-size: calc(var(--u) * 2.2); }
.cl-castle-bar .cl-coins { font-size: calc(var(--u) * 2.4); padding: calc(var(--u) * .8) calc(var(--u) * 1.8); }
.cl-castle-bar .cl-btn { font-size: calc(var(--u) * 2.4); padding: calc(var(--u) * .9) calc(var(--u) * 2); }

.cl-spot {
  position: absolute; transform: translate(-50%, -50%); cursor: pointer; z-index: 2;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2.6);
  white-space: nowrap; max-width: 26%; overflow: visible;
  text-overflow: ellipsis; text-align: center;
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700;
  font-size: calc(var(--u) * 3);
  color: var(--accent); letter-spacing: .3px;
  background: linear-gradient(180deg, rgba(14,18,27,.86), rgba(8,11,17,.92));
  border: 1px solid rgba(142,166,178,.5);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%,
                     9px 100%, 0 50%);
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
  box-shadow: 0 4px 16px rgba(0,0,0,.6);
  transition: transform .16s, color .16s, background .2s;
}
.cl-spot:hover { color: #fff; background: linear-gradient(180deg, rgba(28,35,51,.9), rgba(12,16,24,.94)); }
.cl-spot:active { transform: translate(-50%, -50%) scale(.95); }
.cl-spot small {
  display: block; font-family: inherit; font-size: calc(var(--u) * 1.9); font-weight: 400;
  color: var(--gold); opacity: .8; margin-top: 1px;
}
.cl-spot.locked { color: var(--hint); border-color: rgba(140,140,140,.3); cursor: default; }
.cl-spot.locked:hover { color: var(--hint); }
/* мерцающий огонек над доступными точками */
.cl-spot:not(.locked)::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--u) * -2.4);
  width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2);
  margin-left: calc(var(--u) * -.6); border-radius: 50%; background: var(--gold-lt);
  box-shadow: 0 0 10px 3px rgba(159,245,228,.6); animation: clSpot 2.2s ease-in-out infinite;
}
@keyframes clSpot { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

@media (max-width: 380px) {
  .cl-hub { grid-template-columns: minmax(180px, 240px) 1fr 124px; gap: 10px; }
  .cl-ava { width: 72px; height: 72px; }
  .cl-nick { font-size: 13px; padding: 7px 14px 8px; }
  .cl-view { padding: 14px 12px 12px; }
}
/* «Уменьшить движение» в системе (на macOS включено у многих): глушим только
   декоративные петли - искры, туман, пульсацию свечения. Всплывающие цифры,
   вспышки попадания и появление героев остаются: без них бой нечитаем.
   Раньше правило обнуляло все анимации, и на ПК пропадали все эффекты. */
@media (prefers-reduced-motion: reduce) {
  #cl-root .cl-spark, #cl-root .cl-fog, #cl-root .cl-mote, #cl-root .cl-glow-pulse,
  #cl-root .cl-cd::before, #cl-root .cl-hc::before, #cl-root .cl-u-shield {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  }
}

/* ========================= ОТКРЫТИЕ КАРТЫ ========================= */
/* ролик доигрывает до вспышки, под ней подменяем видео настоящей картой */

.cl-reveal {
  position: fixed; inset: 0; z-index: 90; background: #05070b;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cl-reveal video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* подкраска свечения под редкость: обычная остается синей */
.cl-reveal.r1 video { filter: hue-rotate(55deg) saturate(1.25); }
.cl-reveal.r2 video { filter: hue-rotate(165deg) saturate(1.5) brightness(1.05); }
.cl-reveal.r3 video { filter: hue-rotate(-35deg) saturate(1.2); }

/* вспышка, под которой происходит подмена */
.cl-flash {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(45% 45% at 50% 50%, #ffffff, #9fdcff 35%, rgba(60,140,220,0) 72%);
}
.cl-flash.go { animation: clReveal 1.05s ease-out forwards; }
@keyframes clReveal {
  0% { opacity: 0; transform: scale(.6); }
  18% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.cl-reveal-card { position: relative; z-index: 2; opacity: 0; }
.cl-reveal-card.show { animation: clCardIn .8s cubic-bezier(.2,.9,.3,1) .18s forwards; }
@keyframes clCardIn {
  0% { opacity: 0; transform: scale(.55) rotateY(35deg); }
  100% { opacity: 1; transform: scale(1) rotateY(0); }
}
.cl-reveal-hint {
  position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 4 + var(--safe-bottom, 0px));
  text-align: center; font-size: calc(var(--u) * 2.4); color: var(--hint);
  opacity: 0; z-index: 3; animation: clHintIn .5s ease 1.6s forwards;
}
@keyframes clHintIn { to { opacity: 1; } }

/* крупная карта: та же сборка слоями, только большая и со свечением редкости */
.cl-bigcard { height: min(calc(var(--u) * 82), 560px); }
.cl-bigcard .bc-glow {
  position: absolute; inset: -6%; z-index: 0; border-radius: 12%;
  background: radial-gradient(50% 50% at 50% 50%, var(--rg, rgba(150,158,172,.55)), transparent 70%);
  animation: clGlowPulse 2.4s ease-in-out infinite;
}
@keyframes clGlowPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.cl-bigcard.r0 { --rg: rgba(90,140,220,.7); }
.cl-bigcard.r1 { --rg: rgba(155,89,208,.75); }
.cl-bigcard.r2 { --rg: rgba(232,132,44,.75); }
.cl-bigcard.r3 { --rg: rgba(216,72,70,.8); }
/* описание эффекта - на пергаменте, единственный текст с переносами */
/* подпись под картой: название эффекта и свойства фракций; сам текст эффекта на карте */
.cl-cd .bc-eff {
  position: absolute; left: -20%; right: -20%; top: 100%; margin-top: 8px; z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  color: #dcefe9; text-align: center; text-shadow: 0 1px 3px #000;
}
.cl-cd .bc-eff b {
  display: block; font-family: "Cinzel", "Alegreya SC", Georgia, serif;
  font-size: calc(var(--u) * 2.9); color: #ffd98a; letter-spacing: 1px; margin-bottom: 2px;
}
.cl-cd .bc-eff span { font-size: calc(var(--u) * 2.2); line-height: 1.25; opacity: .85; }


/* --------------------- заставка вкладки «Коллапс» ---------------------
   Живет в #content основного приложения, вне #cl-root, поэтому цвета
   заданы литералами: переменные игры сюда не достают, а каркас после
   редизайна ушел в синюю гамму - заставка остается золотой, как игра.  */

.cl-splash {
  position: relative; text-align: center; padding: 26px 18px 30px;
  border: 1px solid rgba(142,166,178,.35); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(30,37,54,.9), rgba(14,18,27,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.35);
}
.cl-splash-art {
  position: absolute; inset: 0; opacity: .3; pointer-events: none;
  background: url("assets/WatcherofRealms.jpg") center 20% / cover no-repeat;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
}
.cl-splash::after {
  content: ""; position: absolute; left: 50%; top: -60px; width: 300px; height: 300px;
  margin-left: -150px; opacity: .12; pointer-events: none;
  background: url("assets/fx/runering.png") center / contain no-repeat;
  animation: clRuneSpin 55s linear infinite;
}
@keyframes clRuneSpin { to { transform: rotate(360deg); } }
.cl-splash h3 {
  position: relative; font-family: "Alegreya SC", Georgia, serif; font-size: 26px;
  color: #e8c987; text-shadow: 0 2px 20px rgba(142,166,178,.45);
  letter-spacing: 1px;
}
.cl-splash p {
  position: relative; color: #8d95a8; font-size: 13px; margin: 8px 0 18px;
  line-height: 1.5;
}
.cl-splash .btn { position: relative; max-width: 260px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .cl-splash::after { animation: none; }
}


/* ==================== GRIMOIRE OVERRIDES ====================
   Некро-холод «Гримуар»: плоские панели, тонкие стальные границы,
   бирюзовый акцент только на интерактиве. Арты карт, рамки и поле
   боя остаются в оригинальных цветах (без фильтров).            */
.cl-btn {
  border-radius: 2px;
  background: linear-gradient(180deg, #8fe9d8, #3f9d8f);
  border-color: rgba(159,245,228,.6); color: #06211c;
  box-shadow: 0 2px 12px rgba(95,212,194,.3), inset 0 1px 0 rgba(255,255,255,.25);
  letter-spacing: .8px;
}
.cl-btn.sm { border-radius: 2px; }
.cl-btn.ghost {
  background: linear-gradient(180deg, rgba(24,34,42,.95), rgba(13,20,26,.95));
  color: var(--txt); border-color: rgba(142,166,178,.35);
  box-shadow: inset 0 0 24px rgba(0,0,0,.5);
}
.cl-card { border-radius: 4px; }
.cl-modal-box { border-radius: 4px; background: linear-gradient(180deg, #10161c, #0a0f14); }
.cl-input, .cl-area, .cl-choice button { border-radius: 2px; }
.cl-msg, .cl-toast { border-radius: 3px; }
.cl-choice button.on { border-color: rgba(159,245,228,.6); color: #9ff5e4;
  background: rgba(95,212,194,.14); box-shadow: 0 0 12px rgba(95,212,194,.25); }
.cl-profile { border-radius: 3px;
  background: linear-gradient(160deg, rgba(20,32,40,.8), rgba(8,14,20,.92)); }
.cl-profile::before, .cl-profile::after { content: "✦"; }
.cl-nick { background: linear-gradient(180deg, rgba(28,44,52,.9), rgba(12,20,26,.95));
  border: 1px solid rgba(142,166,178,.4); border-radius: 2px;
  color: #dcefe9; text-shadow: none; padding: 7px 12px; filter: none; }
.cl-xp { background: rgba(4,8,12,.85); border: 1px solid rgba(142,166,178,.35);
  border-radius: 2px; height: 9px; }
.cl-xp i { left: 1px; top: 1px; bottom: 1px; height: auto; border-radius: 1px;
  background: linear-gradient(90deg, #237083, #9ff5e4);
  box-shadow: 0 0 10px rgba(129,235,215,.75); }
.cl-ico, .cl-mi { border-radius: 3px;
  background: linear-gradient(180deg, rgba(22,36,44,.7), rgba(8,14,20,.92)); }
.cl-mi.exit { color: #d99a92; border-color: rgba(150,60,66,.45);
  background: linear-gradient(180deg, rgba(60,22,28,.5), rgba(8,14,20,.94)); }
.cl-stats { border-radius: 3px;
  background: linear-gradient(180deg, rgba(20,32,40,.7), rgba(6,12,18,.92)); }
.cl-mode { border-radius: 3px; }
.cl-mode button { background: linear-gradient(180deg, rgba(20,32,40,.8), rgba(8,14,20,.94)); }
.cl-mode button.on { background: linear-gradient(180deg, #8fe9d8, #3f9d8f);
  color: #06211c; text-shadow: none; box-shadow: inset 0 -2px 6px rgba(20,80,70,.5); }
.cl-stage.back::before { background: #0d1114; opacity: 1; }
.cl-ember { filter: hue-rotate(120deg) saturate(.9); }
.cl-e { border-color: rgba(95,212,194,.35); }
.cl-e.on { background: radial-gradient(circle at 35% 30%, #9ff5e4, #2b7d8f);
  border-color: rgba(159,245,228,.7); box-shadow: 0 0 calc(var(--u) * 1) rgba(95,212,194,.85); }
.cl-e.spent { background: rgba(95,212,194,.2); }
/* фирменные SVG-иконки */
.cl-ico > svg { display: block; margin: 0 auto; width: 20px; height: 20px; }
.cl-mi i { display: flex; align-items: center; justify-content: center; }
.cl-mi i svg, .cl-coins svg, .cl-btn svg { width: 1em; height: 1em; }
.cl-coins svg { flex: none; }


/* ==================== GRIMOIRE: раскладка хаба ==================== */
.cl-hub-main.grim { justify-content: center; align-items: center; gap: 14px; }
.cl-logo {
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700;
  font-size: clamp(26px, 4.6vh, 38px); letter-spacing: 6px; color: #e8eef1;
  text-align: center; text-shadow: 0 0 30px rgba(127,231,213,.25);
}
.cl-logo-line { width: 220px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127,231,213,.6), transparent); }
.cl-fight-grim {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 46px; cursor: pointer;
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700; font-size: 16px;
  letter-spacing: 2px; color: #9ff5e4; background: rgba(8,10,12,.35);
  border: 1px solid rgba(127,231,213,.55);
  box-shadow: inset 0 0 24px rgba(127,231,213,.08), 0 0 18px rgba(127,231,213,.15);
  transition: box-shadow .2s, transform .12s;
}
.cl-fight-grim:hover { box-shadow: inset 0 0 28px rgba(127,231,213,.14), 0 0 26px rgba(127,231,213,.3); }
.cl-fight-grim:active { transform: scale(.98); }
.cl-hub-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--hint); }
.cl-hub-meta b { color: #9ff5e4; font-weight: 600; }
/* меню - список с тонкими разделителями вместо плиток */
.cl-menu .cl-mi { background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.07);
  border-radius: 0; box-shadow: none; color: var(--txt); font-weight: 400; letter-spacing: .2px; }
.cl-menu .cl-mi:hover { border-bottom-color: rgba(127,231,213,.4); box-shadow: none; color: #9ff5e4; }
.cl-menu .cl-mi:active { transform: none; }
.cl-menu .cl-mi i { background: none; border: 0; color: #9fb0ba; }
.cl-menu .cl-mi .chev { margin-left: auto; font-style: normal; color: #3d4850; }
.cl-menu .cl-mi.exit { background: none; border: 0; color: #a3706c; }
.cl-menu .cl-mi.exit i { color: #a3706c; }
/* левая колонка - плоские панели */
.cl-profile, .cl-ico, .cl-stats { background: rgba(10,13,16,.72);
  border-color: rgba(255,255,255,.09); box-shadow: none; }
.cl-ico:hover { border-color: rgba(127,231,213,.45); box-shadow: none; }
.cl-ico small, .cl-stats span { color: #71818c; }
.cl-stats > div { border-right-color: rgba(255,255,255,.07); }
.cl-rule { color: var(--hint); }


/* ============ GRIMOIRE v3: подэкраны по макетам итераций 3-6 ============ */
/* шапка страниц: назад слева, заголовок с ромбами по центру */
.cl-head.grim { display: flex; align-items: center; gap: 12px; }
.cl-head.grim .cl-btn { flex: none; min-width: 92px; }
.cl-head-side { flex: none; min-width: 92px; }
.cl-head-mid { flex: 1; min-width: 0; }
.cl-head-grim { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cl-head-grim b {
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700; font-size: 19px;
  color: #e8eef1; letter-spacing: 3px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-shadow: 0 0 20px rgba(127,231,213,.3);
}
.cl-head-grim em { width: 6px; height: 6px; flex: none; transform: rotate(45deg);
  background: rgba(127,231,213,.9); box-shadow: 0 0 10px rgba(127,231,213,.8); }
.cl-head-grim i { height: 1px; width: 64px; flex: none; }
.cl-head-grim i:first-child { background: linear-gradient(90deg, transparent, rgba(127,231,213,.6)); }
.cl-head-grim i:last-child { background: linear-gradient(90deg, rgba(127,231,213,.6), transparent); }
/* кнопки: основная - контурная капителью, призрачная - нейтральная */
.cl-btn {
  border-radius: 0; background: rgba(8,10,12,.5);
  border: 1px solid rgba(127,231,213,.55); color: #9ff5e4;
  text-transform: uppercase; letter-spacing: 1.6px;
  box-shadow: inset 0 0 18px rgba(127,231,213,.07), 0 0 14px rgba(127,231,213,.12);
}
.cl-btn:hover { box-shadow: inset 0 0 24px rgba(127,231,213,.13), 0 0 22px rgba(127,231,213,.25); }
.cl-btn.ghost { text-transform: none; letter-spacing: .3px;
  background: rgba(8,10,12,.7); color: #9fb0ba; border-color: rgba(255,255,255,.14);
  box-shadow: none; }
.cl-btn.danger { background: rgba(8,10,12,.6); border-color: rgba(163,112,108,.5);
  color: #d99a92; box-shadow: none; }
.cl-coins { border-radius: 0; }
/* панели контента: плоские, тонкая граница */
.cl-card { border-radius: 0; background: rgba(12,15,18,.88);
  border: 1px solid rgba(255,255,255,.09); box-shadow: none; }
.cl-card:has([data-claim]) { border-color: rgba(127,231,213,.4);
  box-shadow: 0 0 16px rgba(127,231,213,.08); }
.cl-rule { color: #71818c; font-size: 11.5px; letter-spacing: 2.4px; }
.cl-rule::before, .cl-rule::after { background: rgba(255,255,255,.08); }
.cl-pg { height: 3px; border-radius: 0; background: rgba(255,255,255,.08); }
.cl-pg i { background: #7fe7d5; box-shadow: 0 0 8px rgba(127,231,213,.7); }
.cl-h1 { color: #e8eef1; letter-spacing: 2px; text-shadow: 0 0 20px rgba(127,231,213,.25); }
/* замок: верхняя инфопанель и гримуарные метки построек */
.cl-castle-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 16px;
  padding: calc(12px + var(--safe-top, 0px))
           max(24px, calc(24px + var(--safe-right, 0px)), env(safe-area-inset-right, 0px)) 16px
           max(24px, calc(24px + var(--safe-left, 0px)), env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(8,10,12,.92), rgba(8,10,12,.55) 70%, transparent);
}
.cl-castle-zone { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.cl-castle-top .cl-head-mid { flex: none; }
.cl-spot { clip-path: none; border-radius: 0; background: rgba(8,10,12,.82);
  border: 1px solid rgba(127,231,213,.5); color: #9ff5e4; letter-spacing: 1px;
  box-shadow: inset 0 0 18px rgba(127,231,213,.07), 0 4px 16px rgba(0,0,0,.6); }
.cl-spot:hover { background: rgba(10,14,17,.9); color: #dffcf5; }
.cl-spot.locked { border-color: rgba(255,255,255,.12); color: #71818c; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.cl-spot small { color: #71818c; text-transform: uppercase; letter-spacing: 1.6px; font-size: 9.5px; }
.cl-spot:not(.locked)::before { content: ""; left: 50%; top: -17px; width: 8px; height: 8px;
  margin-left: -4px; border-radius: 0; transform: rotate(45deg);
  background: rgba(127,231,213,.9); box-shadow: 0 0 12px rgba(127,231,213,.8); animation: none; }
/* бой: плоские плашки, ромбы энергии, линии сторон */
.cl-round, .cl-plate { border-radius: 0; background: rgba(8,10,12,.8);
  border: 1px solid rgba(255,255,255,.12); box-shadow: none; }
.cl-round b { color: #9ff5e4; }
.cl-hp-val { border-radius: 0; background: rgba(8,10,12,.9); border-color: rgba(255,255,255,.16); }
.cl-e { border-radius: 0; transform: rotate(45deg); }
.cl-line { border-radius: 0; }
.cl-line.mine { border-color: rgba(127,231,213,.3);
  background: linear-gradient(0deg, rgba(127,231,213,.05), transparent); }
.cl-line.foe { border-color: rgba(163,112,108,.32);
  background: linear-gradient(180deg, rgba(120,50,56,.07), transparent); }
.cl-line.drop { border-color: rgba(159,245,228,.8);
  box-shadow: inset 0 0 26px rgba(127,231,213,.15), 0 0 16px rgba(127,231,213,.3); }
.cl-slot { border-radius: 0; border-color: rgba(163,190,200,.18); color: rgba(163,190,200,.28); }
.cl-rift-line { background: linear-gradient(90deg, transparent, rgba(127,231,213,.7), transparent);
  box-shadow: 0 0 12px rgba(127,231,213,.4); }
/* модалки и формы */
.cl-modal-box { border-radius: 0; }
.cl-input, .cl-area, .cl-choice button { border-radius: 0; }
.cl-msg, .cl-toast { border-radius: 0; }
.cl-event { border-radius: 0; }


/* ============ GRIMOIRE v4: левая колонка хаба по макету 2a ============ */
.cl-profile.grim { background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: 0 0 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cl-profile.grim::before, .cl-profile.grim::after { content: none; }
.cl-ava.grim { width: 64px; height: 64px; background: #101418; filter: none;
  border: 1px solid rgba(255,255,255,.12); border-radius: 2px; overflow: visible; }
.cl-ava.grim img, .cl-ava.grim span { width: 100%; height: 100%; border-radius: 2px; object-fit: cover; }
.cl-ava.grim span { display: flex; align-items: center; justify-content: center;
  font-family: "Alegreya SC", Georgia, serif; font-size: 24px; color: #9ff5e4; }
.cl-nick.grim { background: none; border: 0; padding: 0; filter: none; text-align: left;
  color: #e8eef1; font-size: 18px; letter-spacing: .5px; text-shadow: none; }
.cl-lvl.grim { text-align: left; color: #71818c; text-transform: uppercase;
  letter-spacing: 1.4px; font-size: 10.5px; margin-top: 3px; }
.cl-xp.grim { background: rgba(255,255,255,.08); border: 0; border-radius: 0; height: 3px; margin-top: 9px; }
.cl-xp.grim i { left: 0; top: 0; bottom: 0; height: auto; border-radius: 0;
  background: #7fe7d5; box-shadow: 0 0 8px rgba(127,231,213,.7); }
.cl-stats.grim { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08);
  border-radius: 0; box-shadow: none; overflow: hidden; }
.cl-stats.grim > div { padding: 12px; background: #0c0f12; text-align: left; border-right: 0; }
.cl-stats.grim b { font-size: 19px; color: #e8eef1; text-shadow: none; }
.cl-stats.grim span { font-size: 9.5px; color: #71818c; text-transform: uppercase; letter-spacing: 1px; }
.cl-links { display: flex; gap: 16px; font-size: 12px; color: #9fb0ba; flex-wrap: wrap; }
.cl-links span { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color .15s; }
.cl-links span:hover { color: #9ff5e4; }
.cl-links span b { min-width: 14px; text-align: center; padding: 0 4px; margin-left: -2px;
  margin-top: -12px; border-radius: 8px; background: #7c2430; color: #ffd9d0; font-size: 9px; }


/* ============ GRIMOIRE v5: затемнение сцен до макетного тона ============ */
/* базовый фон приложения: арт едва читается сквозь тьму */
#cl-root::after {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(95,212,194,.06), transparent 60%),
    linear-gradient(180deg, rgba(5,7,9,.92), rgba(5,7,9,.55) 30%,
                    rgba(5,7,9,.65) 62%, rgba(5,7,9,.97));
}
/* двор замка: тон запечен в файл, сверху только легкое виньетирование */
.cl-castle .cl-art::after {
  background:
    radial-gradient(125% 80% at 50% 42%, transparent 45%, rgba(6,10,12,.55)),
    linear-gradient(180deg, rgba(6,10,12,.5), transparent 28%,
                    transparent 70%, rgba(6,10,12,.6));
}


/* ============ GRIMOIRE v6: таверна, лавка, шапки подэкранов ============ */
/* шапка: монеты справа, как в макете таверны */
.cl-head-side { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.cl-head-side .cl-coins { font-family: "Alegreya SC", Georgia, serif; font-size: 14px;
  padding: 7px 14px; border-color: rgba(127,231,213,.45); color: #9ff5e4; }
.cl-fight-grim { text-transform: uppercase; white-space: nowrap; padding: 13px 34px; }
@media (max-width: 780px) { .cl-fight-grim { font-size: 14px; letter-spacing: 1.4px; padding: 12px 22px; } }

/* таверна: контент парит по центру, без панели */
/* таверна центрируется по высоте экрана: тело страницы становится колонкой */
#cl-body:has(> #cl-page > .cl-tav) { display: flex; flex-direction: column; }
#cl-page:has(> .cl-tav) { display: flex; flex-direction: column; }
.cl-tav {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 12px; padding: 8px 0 24px;
}
.cl-tav-mug { color: #9fb0ba; font-size: 34px; line-height: 1; opacity: .9; }
.cl-tav-mug svg { width: 1em; height: 1em; }
.cl-tav-tries { font-size: 11.5px; letter-spacing: 2.4px; text-transform: uppercase; color: #71818c; }
.cl-tav-tries b { color: #e8eef1; font-size: 13px; letter-spacing: 1px; }
.cl-tav-title { font-family: "Alegreya SC", Georgia, serif; font-size: 17px;
  letter-spacing: 2px; color: #e8eef1; }
.cl-tav .cl-sub { margin-top: -6px; }
.cl-btn.cl-tav-open { min-width: 240px; padding: 14px 40px; font-size: 15px; letter-spacing: 2.6px; }
.cl-btn.cl-tav-talk { min-width: 210px; letter-spacing: .6px; text-transform: none;
  font-weight: 400; color: #9fb0ba; }
.cl-btn.cl-tav-talk[disabled] { opacity: .35; }

/* две карты рубашкой вверх: только герб и имя фракции */
.cl-tav-table { display: flex; gap: 22px; justify-content: center; margin: 6px 0 2px;
  perspective: 900px; width: 100%; }
@media (max-height: 400px) { .cl-back { width: 104px; height: 138px; } .cl-back-in { gap: 5px; } }
.cl-back {
  position: relative; width: 124px; height: 164px; cursor: pointer;
  transform-style: preserve-3d; transition: transform .26s ease, opacity .3s;
}
.cl-back-in {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 10px;
  background:
    radial-gradient(70% 50% at 50% 42%, rgba(127,231,213,.1), transparent 70%),
    linear-gradient(180deg, #131a1f, #0a0e12);
  border: 1px solid rgba(127,231,213,.45);
  box-shadow: inset 0 0 0 4px #0a0e12, inset 0 0 0 5px rgba(127,231,213,.18),
              0 8px 22px rgba(0,0,0,.6);
}
.cl-back-in img { width: 56%; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(127,231,213,.35)); }
.cl-back-in i { font-style: normal; font-family: "Alegreya SC", Georgia, serif;
  font-size: 40px; color: rgba(127,231,213,.5); }
.cl-back-in b { font-family: "Alegreya SC", Georgia, serif; font-size: 11.5px; letter-spacing: 1px;
  color: #dcefe9; line-height: 1.15; }
.cl-back-in small { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #71818c; }
.cl-back:hover .cl-back-in { border-color: rgba(159,245,228,.8);
  box-shadow: inset 0 0 0 4px #0a0e12, inset 0 0 0 5px rgba(127,231,213,.3),
              0 0 18px rgba(127,231,213,.25), 0 8px 22px rgba(0,0,0,.6); }
.cl-back:active { transform: scale(.97); }
.cl-back.flip { transform: rotateY(90deg) scale(1.05); }
.cl-back.gone { opacity: 0; transform: translateY(12px) scale(.94); pointer-events: none; }

/* разговор с барменом */
.cl-talk {
  position: absolute; inset: 0; z-index: 65; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(6,8,13,.9);
  animation: clZoomIn .16s ease-out;
}
.cl-talk-box {
  width: 100%; max-width: 460px; max-height: 88%; overflow-y: auto; padding: 18px 20px;
  background: rgba(12,15,18,.96); border: 1px solid rgba(127,231,213,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.7);
}
.cl-talk-who { display: flex; align-items: center; gap: 8px; font-family: "Alegreya SC", Georgia, serif;
  font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: #9ff5e4; }
.cl-talk-who svg { width: 1.2em; height: 1.2em; }
.cl-talk-text { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: #dcefe9;
  white-space: pre-line; }
.cl-talk-eff { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; }
.cl-talk-eff span { padding: 4px 10px; border: 1px solid rgba(255,255,255,.12); }
.cl-talk-eff .ok { color: #9ff5e4; border-color: rgba(127,231,213,.45); }
.cl-talk-eff .bad { color: #d99a92; border-color: rgba(163,112,108,.45); }
.cl-talk-choices { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.cl-talk-choices .cl-btn { justify-content: space-between; text-align: left; font-weight: 400;
  padding: 10px 14px; font-size: 13.5px; text-transform: none; letter-spacing: .3px; }
.cl-talk-choices .cl-btn em { display: inline-flex; align-items: center; gap: 4px; font-style: normal;
  font-size: 12px; color: #9ff5e4; margin-left: 10px; }
.cl-talk-choices .cl-btn.ghost:hover { border-color: rgba(127,231,213,.5); color: #dcefe9; }

/* лавка: сетка карт с ценой под каждой */
.cl-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.cl-shop-it { display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 10px 12px; background: rgba(12,15,18,.7); border: 1px solid rgba(255,255,255,.08); }
.cl-shop-it .cl-c { width: 100px; }
.cl-shop-meta { text-align: center; min-width: 0; width: 100%; }
.cl-shop-meta b { display: block; font-family: "Alegreya SC", Georgia, serif; font-size: 13px;
  color: #e8eef1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-shop-meta span { font-size: 10.5px; color: #71818c; }
.cl-shop-it .cl-btn { width: 100%; }

/* предзагруженный ролик открытия живет в корне и не должен рисоваться */
.cl-reveal-video { display: none; }
.cl-reveal .cl-reveal-video { display: block; }

/* на устройствах без hover-состояний не оставляем «залипшие» подсветки */
@media (hover: none) {
  .cl-mi:hover, .cl-spot:hover, .cl-card.tap:hover, .cl-back:hover .cl-back-in { transition: none; }
}
/* на широком экране меню хаба держится по центру высоты, как в макете */
.cl-menu { justify-content: center; }
@media (max-height: 460px) { .cl-menu { justify-content: flex-start; } }


/* ============ полный экран Telegram: заголовок в полосе системных кнопок ============
   В полном экране Telegram рисует плавающие «Назад» и «···» поверх приложения,
   убрать их нельзя. Поэтому свой заголовок ставим в ту же строку между ними,
   свою кнопку «назад» прячем (системная делает то же самое), а контент
   начинается сразу под полосой, без второго отступа.                        */
html.tg-strip #cl-root.paged .cl-view { padding-top: var(--dev-top, 0px); }
html.tg-strip #cl-root.paged .cl-head.grim {
  min-height: var(--ui-top, 52px); margin-bottom: 8px; align-items: flex-start;
  padding: max(0px, calc((var(--ui-top, 52px) - 30px) / 2))
           max(96px, calc(96px + var(--safe-right, 0px)), env(safe-area-inset-right, 0px))
           0
           max(96px, calc(96px + var(--safe-left, 0px)), env(safe-area-inset-left, 0px));
}
html.tg-strip #cl-root.paged .cl-head.grim #cl-back { display: none; }
html.tg-strip #cl-root.paged .cl-head-side { min-width: 0; padding-top: 1px; }
html.tg-strip #cl-root.paged .cl-head-side .cl-coins { padding: 6px 11px; font-size: 13px; }
html.tg-strip #cl-root.paged .cl-head-grim i { width: 40px; }

html.tg-strip .cl-castle-top {
  padding: var(--dev-top, 0px)
           max(96px, calc(96px + var(--safe-right, 0px)), env(safe-area-inset-right, 0px)) 14px
           max(96px, calc(96px + var(--safe-left, 0px)), env(safe-area-inset-left, 0px));
  align-items: flex-start;
}
html.tg-strip .cl-castle-top #cl-back { display: none; }
html.tg-strip .cl-castle-top .cl-head-mid { padding-top: max(0px, calc((var(--ui-top, 52px) - 30px) / 2)); }
html.tg-strip .cl-castle-top { flex-wrap: wrap; row-gap: 6px; }
html.tg-strip .cl-castle-top .cl-head-side {
  flex: 1 1 100%; min-width: 0; justify-content: flex-end; gap: 6px; padding-top: 0;
}
html.tg-strip .cl-castle-top .cl-coins {
  padding: 6px 11px; font-size: 13px; white-space: nowrap;
}
/* хаб в полном экране: чуть ближе к полосе, остальное центрируется */
html.tg-strip #cl-root:not(.paged):not(.in-battle) .cl-view { padding-top: calc(6px + var(--safe-top, 0px)); }

/* подсказка повернуть телефон */
.cl-rotate {
  position: absolute; inset: 0; z-index: 300; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center;
  background: #0a0c0e; color: #dcefe9; font-family: "Alegreya SC", Georgia, serif;
  font-size: 18px; letter-spacing: 1.5px;
}
.cl-rotate-ico { font-size: 64px; line-height: 1; color: #7fe7d5;
  animation: clRotateHint 1.8s ease-in-out infinite; }
.cl-rotate-ico svg { width: 1em; height: 1em; display: block; }
@keyframes clRotateHint { 0%, 25% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .cl-rotate-ico { animation: none; } }

/* метки у края арта прижимаются к нему, чтобы не вылезать за экран, когда
   арт обрезан по бокам (широкий ПК, планшет); ромб остается над точкой */
.cl-spot.edge-r { transform: translate(-88%, -50%); }
.cl-spot.edge-r:not(.locked)::before { left: 88%; }
.cl-spot.edge-l { transform: translate(-12%, -50%); }
.cl-spot.edge-l:not(.locked)::before { left: 12%; }
.cl-castle .cl-art { max-width: 118%; }
/* в полосе заголовок держится по центру экрана: слева пустой противовес */
html.tg-strip #cl-root.paged .cl-head.grim::before { content: ""; flex: 1; min-width: 0; }
html.tg-strip #cl-root.paged .cl-head-side { flex: 1; }
html.tg-strip .cl-castle-top .cl-castle-zone { display: none; }
html.tg-strip .cl-castle-top .cl-head-mid { flex: 1 1 100%; }
html.tg-strip #cl-root.paged .cl-head-mid { flex: 0 1 auto; max-width: 62%; }

/* пока открыта игра, интерфейс бота под ней не рисуется вовсе */
html.cl-open #app, html.cl-open .fog, html.cl-open .mote, html.cl-open #toast,
html.cl-open #lang-screen, html.cl-open #region-screen { display: none !important; }


/* ============ колода в духе Hearthstone ============ */
#cl-body:has(> #cl-page > .cl-dk) { display: flex; flex-direction: column; }
#cl-page:has(> .cl-dk) { overflow: hidden; display: flex; flex-direction: column; }
.cl-dk { flex: 1; min-height: 0; display: flex; gap: 12px; }
.cl-dk-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cl-dk-filters { display: flex; gap: 6px; flex: none; overflow-x: auto; scrollbar-width: none; }
.cl-dk-filters::-webkit-scrollbar { display: none; }
.cl-chip {
  flex: none; padding: 5px 12px; border: 1px solid rgba(142,166,178,.3); background: rgba(12,15,18,.7);
  color: #9fb0ba; font-family: "Alegreya SC", Georgia, serif; font-size: 12px; letter-spacing: .8px;
  cursor: pointer; white-space: nowrap;
}
.cl-chip.on { border-color: rgba(127,231,213,.6); color: #9ff5e4; background: rgba(127,231,213,.08); }
.cl-dk-pages {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: repeat(var(--dk-cols, 4), var(--dk-w, 90px));
  grid-auto-rows: var(--dk-h, 119px); gap: 10px; justify-content: center; align-content: center;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.cl-dk-pages .cl-c { width: var(--dk-w, 90px); }
.cl-dk-pages .cl-empty { grid-column: 1 / -1; }
.cl-dk-pages.slide-l { animation: clDkSlideL .22s ease-out; }
.cl-dk-pages.slide-r { animation: clDkSlideR .22s ease-out; }
@keyframes clDkSlideL { from { opacity: 0; transform: translateX(24px); } }
@keyframes clDkSlideR { from { opacity: 0; transform: translateX(-24px); } }
.cl-dk-pager { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: "Alegreya SC", Georgia, serif; font-size: 12px; letter-spacing: 1px; color: #9fb0ba; }
.cl-dk-pager .cl-btn.xs { padding: 3px 12px; font-size: 15px; line-height: 1; }
.cl-dk-pager .cl-btn[disabled] { opacity: .25; }
.cl-dk-right {
  width: 214px; flex: none; display: flex; flex-direction: column; gap: 8px; min-height: 0;
  padding: 10px; background: rgba(12,15,18,.7); border: 1px solid rgba(255,255,255,.08);
}
.cl-dk-head { display: flex; align-items: center; gap: 8px; font-family: "Alegreya SC", Georgia, serif;
  font-size: 14px; letter-spacing: 1px; color: #e8eef1; }
.cl-dk-head b { color: #9ff5e4; }
.cl-dk-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cl-dk-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 6px; margin-bottom: 3px;
  background: rgba(255,255,255,.04); border-left: 3px solid #6e7d88; cursor: pointer; font-size: 12px;
}
.cl-dk-row:hover { background: rgba(255,255,255,.08); }
.cl-dk-row.r1 { border-left-color: #9b59d0; }
.cl-dk-row.r2 { border-left-color: #e8842c; }
.cl-dk-row.r3 { border-left-color: #d84846; }
.cl-dk-row .cost {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: #16394d; color: #cfefff; font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700; font-size: 12px;
}
.cl-dk-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "Alegreya SC", Georgia, serif; color: #dcefe9; }
.cl-dk-row em { font-style: normal; color: #9ff5e4; font-size: 11px; }
.cl-dk-tip { font-size: 11.5px; line-height: 1.45; }
@media (max-width: 720px) { .cl-dk-right { width: 176px; } }

/* ============ значок типа героя на карте и жетоне ============ */
.cd-type, .tk-type {
  position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(8,10,12,.88); border: 1.5px solid rgba(255,255,255,.55);
  box-shadow: 0 1px 4px rgba(0,0,0,.7); color: #fff; pointer-events: none;
}
.cd-type { left: 6.5%; top: 42%; width: 13%; aspect-ratio: 1; }
.cd-type svg, .tk-type svg, .cl-chip i svg { width: 62%; height: 62%; }
.tk-type { left: 8%; top: 8%; width: 24%; aspect-ratio: 1; }
.t-fighter { color: #ffb08a; border-color: rgba(255,140,90,.8); }
.t-archer  { color: #b7f5a0; border-color: rgba(140,235,110,.8); }
.t-mage    { color: #d7b6ff; border-color: rgba(190,140,255,.8); }
.t-healer  { color: #9ff5e4; border-color: rgba(127,231,213,.8); }
.cl-chip i { display: inline-flex; width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px;
  align-items: center; justify-content: center; }
.cl-chip i svg { width: 100%; height: 100%; }
.cl-hc .tk-type { display: none; }

/* ============ текст эффекта на карте ============ */
.cd-txt .cd-eff { fill: #33291c; stroke: none; font-family: Georgia, "Times New Roman", serif;
  font-weight: 500; text-anchor: middle; paint-order: normal; }
.cd-txt .cd-eff .kw { font-weight: 800; fill: #1a1208; }
.cd-txt text.cd-eff { dominant-baseline: auto; }
.cd-txt .cd-qty { font-size: 34px; }

/* ============ выбор: замена карт и раскопка ============ */
.cl-pickbox {
  position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(6,8,13,.9); animation: clZoomIn .16s ease-out;
}
.cl-pickbox-in { width: 100%; max-width: 620px; text-align: center; }
.cl-pickbox-title { font-family: "Alegreya SC", Georgia, serif; font-size: 20px; letter-spacing: 3px;
  text-transform: uppercase; color: #9ff5e4; }
.cl-pickbox-cards { display: flex; justify-content: center; gap: 12px; margin: 14px 0; }
.cl-pick-card { width: min(28vw, 150px); cursor: pointer; transition: transform .15s; position: relative; }
.cl-pick-card:hover { transform: translateY(-4px); }
.cl-pick-card.picked { transform: translateY(-6px); filter: saturate(.4) brightness(.7); }
.cl-pick-mark { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-size: 44px; color: #ff7a55; text-shadow: 0 0 12px #000; z-index: 5; }
.cl-pick-card.picked .cl-pick-mark { display: flex; }
.cl-pickbox-btns { display: flex; justify-content: center; gap: 10px; }
@media (max-height: 420px) { .cl-pick-card { width: min(24vw, 118px); } .cl-pickbox-cards { margin: 8px 0; } }

/* ============ броня, щит, стаки, прицел ============ */
.tk-df {
  position: absolute; right: 8%; top: 8%; z-index: 4;
  width: 22%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700; font-size: calc(var(--u) * 2.1);
  color: #e6edf2; background: rgba(8,11,17,.85); border: 1px solid rgba(200,214,224,.6);
  clip-path: polygon(50% 0, 100% 25%, 100% 65%, 50% 100%, 0 65%, 0 25%); pointer-events: none;
}
.tk-df.up { color: #9fe8a8; border-color: rgba(120,220,140,.8); }
.tk-armor {
  position: absolute; right: 7%; top: 7%; z-index: 5; width: 27%; aspect-ratio: 24 / 28;
  pointer-events: none; animation: clArmorIn .3s ease-out; filter: drop-shadow(0 0 4px rgba(80,160,255,.9));
}
.tk-armor svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tk-armor svg path { fill: #2f6fb8; stroke: #d8ecff; stroke-width: 1.6; stroke-linejoin: round; }
.tk-armor b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700; font-size: calc(var(--u) * 2.5);
  color: #fff; text-shadow: 0 1px 2px #000; padding-bottom: 8%;
}
@keyframes clArmorIn { from { transform: scale(1.6); opacity: 0; } }
.cl-s.whisper { color: #d7b6ff; border-color: rgba(190,140,255,.5); }
.cl-u.pick { cursor: pointer; }
.cl-u.pick::before { --glow: url("assets/frames/glow/tok_tgt.png"); display: block; animation: clPickPulse .9s ease-in-out infinite alternate; }
@keyframes clPickPulse { from { opacity: .5; } to { opacity: 1; } }
.cl-float.fx { color: #ffd98a; font-family: "Cinzel", "Alegreya SC", Georgia, serif; font-size: 15px; letter-spacing: 1px; }
.cl-sheet-fx.ft { color: #9fb0ba; font-size: 12px; }
.bc-eff .ft { display: block; font-size: calc(var(--u) * 2); color: #b7c6cf; margin-top: 2px; max-width: 70vw; }

/* ============ ПК: наведение мыши листает руку ============ */
.cl-hc.hover {
  transform: translate(calc(var(--u) * var(--offx) - 50%), calc(var(--u) * (var(--offy) - 18)))
             rotate(0deg) scale(1.55) !important;
  transition: transform .14s ease-out;
}
.cl-hand.hover-on .cl-hc.push-l { transform: translate(calc(var(--u) * (var(--offx) - 5) - 50%), calc(var(--u) * var(--offy))) rotate(calc(var(--rot) * 1deg)); }
.cl-hand.hover-on .cl-hc.push-r { transform: translate(calc(var(--u) * (var(--offx) + 5) - 50%), calc(var(--u) * var(--offy))) rotate(calc(var(--rot) * 1deg)); }
@media (hover: hover) and (pointer: fine) {
  .cl-u:hover { filter: brightness(1.12); }
  .cl-hc { cursor: grab; }
}

/* имя героя на карте: цвет по редкости, тонкая обводка */
.cd-txt .cd-name { paint-order: stroke fill; stroke: rgba(0,0,0,.8); stroke-width: 3px; font-weight: 700; }
.cd-txt .cd-name.r0 { fill: #f0f3f5; }
.cd-txt .cd-name.r1 { fill: #d9b8ff; }
.cd-txt .cd-name.r2 { fill: #ffc266; }
.cd-txt .cd-name.r3 { fill: #ff8577; }
.cd-txt .cd-qty { fill: #dcefe9; stroke: rgba(0,0,0,.85); stroke-width: 3px; paint-order: stroke fill; font-family: "Alegreya SC", Georgia, serif; }

/* ============ имя героя: HTML-лента поверх карты, шрифт Cinzel ============ */
.cl-cd { container-type: inline-size; }
.cd-name-h {
  position: absolute; left: 15%; right: 15%; top: 50.5%; height: 7.4%; z-index: 4;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-family: "Cinzel", "Cormorant Unicase", Georgia, serif; font-weight: 700;
  font-size: 5.3cqw; letter-spacing: .06em; line-height: 1; white-space: nowrap; overflow: hidden;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 3px rgba(0,0,0,.9);
}
.cd-name-h span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cd-name-h.r0 { color: #f0f3f5; }
.cd-name-h.r1 { color: #dcbeff; }
.cd-name-h.r2 { color: #ffc266; }
.cd-name-h.r3 { color: #ff8577; }
/* защита: шестиугольник над гербом */
.cd-txt .cd-dfx { fill: rgba(8,11,17,.9); stroke: rgba(200,214,224,.75); stroke-width: 3px; }
.cd-txt .cd-df { fill: #e6edf2; stroke: none; font-size: 30px; }
/* счетчик копий - бирка на углу, вне рисунка карты */
.cd-count {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 6; min-width: 30px; height: 20px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: #101418; border: 1px solid rgba(159,245,228,.6); color: #9ff5e4;
  font-family: "Alegreya SC", Georgia, serif; font-size: 12px; font-weight: 700; letter-spacing: .5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.7); white-space: nowrap;
}

/* цифры жетона: атака с бонусом зеленеет */
.tk-txt .tk-atk.up { fill: #9fe8a8; }
.bc-eff .now { display: block; font-size: calc(var(--u) * 2.2); color: #9ff5e4; margin-top: 4px; }
/* ролик открытия карты: кадр подрезан, чтобы затертый угол справа внизу остался за экраном */
.cl-reveal video { transform: scale(1.22); transform-origin: 32% 30%; }

/* ============ цифры карты и жетона: HTML вместо SVG, центровка везде одинаковая ============ */
.cl-u { container-type: inline-size; }
.cd-num, .tk-num {
  position: absolute; transform: translate(-50%, -50%); z-index: 4; pointer-events: none;
  font-family: "Cinzel", "Alegreya SC", Georgia, serif; font-weight: 900; line-height: 1; color: #fff;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 3px #000, 0 2px 4px rgba(0,0,0,.9);
  font-variant-numeric: lining-nums tabular-nums;
}
.cd-num.cost { left: 86.3%; top: 9.6%; font-size: 12.6cqw; color: #ffe9b0; }
.cd-num.atk { left: 17.2%; top: 85.8%; font-size: 13.4cqw; }
.cd-num.hp { left: 82.8%; top: 85.8%; font-size: 13.4cqw; }
.cd-num.hp.low { color: #ff9b8e; }
.tk-num { font-size: 21cqw; }
.tk-num.tk-atk { left: 24.8%; top: 70.5%; }
.tk-num.tk-hp { left: 75%; top: 70.5%; }
.tk-num.tk-hp.low { color: #ffb3a8; }
.tk-num.tk-atk.up { color: #9fe8a8; }
/* рука поверх кнопки хода: поднятая карта не должна прятаться под «Завершить ход» */
.cl-hand { position: relative; z-index: 8; }
.cl-b-side { z-index: 4; }

/* ============ командир: бирки руки и колоды над плашкой с именем ============ */
.cl-plate-col { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .5); min-width: 0; }
.cl-cmd.foe .cl-plate-col { align-items: flex-end; }
.cl-fbs { display: flex; gap: calc(var(--u) * .6); padding: 0 calc(var(--u) * .4); }
.cl-fb {
  display: flex; align-items: center; gap: 3px;
  height: calc(var(--u) * 2.8); padding: 0 calc(var(--u) * .9); border-radius: calc(var(--u) * 1.4);
  background: rgba(8,11,17,.9); border: 1px solid rgba(142,166,178,.42);
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700; font-size: calc(var(--u) * 1.8);
  color: var(--txt); white-space: nowrap; pointer-events: none;
}
.cl-fb svg { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); opacity: .8; }
/* портрет противника - герой из его колоды */
.cl-cmd.foe .cl-face-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* ПК: счетчик раунда и выход из боя у верхнего края полосы, вровень с противником;
   на телефоне они прижаты вниз, потому что сверху висит кнопка «Назад» Telegram */
html.tg-desktop .cl-b-tl { align-self: flex-start; margin-top: calc(var(--u) * 1.2); }
html.tg-desktop .cl-btop .cl-btn.xs, html.tg-desktop .cl-b-tl .cl-round { margin-bottom: 0; }
html.tg-desktop .cl-btop .cl-cmd { align-self: flex-start; margin-top: calc(var(--u) * 1); }
/* ПК и планшеты (окно не такое вытянутое, как телефон): арт стола выше окна
   на 12%, темный обод сверху и снизу уходит за край, поле и плашки поднимаются */
@media (max-aspect-ratio: 1.85/1) {
  .cl-battle { --art-h: max(calc(var(--vh) * 1.12), calc(100vw / 16 * 9)); }
}

/* раунд и «покинуть бой» - в левом поле стола, левее арены, столбиком */
.cl-b-left {
  position: absolute; z-index: 4; left: calc(var(--u) * 1.4); top: calc(var(--strip-top) + var(--u) * .8);
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .7);
  pointer-events: auto;
}
.cl-b-left .cl-round { margin: 0; flex-direction: column; align-items: flex-start; gap: 0;
  padding: calc(var(--u) * .5) calc(var(--u) * 1.2); }
.cl-b-left .cl-btn.xs { padding: calc(var(--u) * .4) calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.7); margin: 0; }
.cl-float svg { width: 1em; height: 1em; vertical-align: -.12em; margin-right: 2px; }