/* Лицо карты, собранное из набора деталей (art/kit).

   Раньше карта была прямоугольником со скруглением: своя рамка, свои
   кружки-статы, подпись полосой. Читалось нормально, но выглядело как
   заготовка — заказчик сказал прямо: «дёшево». Здесь тот же состав, но из
   рисованных деталей: плита рамки в цвете стихии, овальное кольцо портрета,
   лента с именем, каменная плашка под текст, шестиугольники атаки и здоровья.

   Всё позиционируется в `cqw` — процентах ширины самой карты, — поэтому одна
   и та же разметка работает и в руке (мелкая), и в коллекции (крупная), и в
   окне вскрытия свитка. Никаких отдельных размеров «для мобильного».

   Слои лежат в `.ck` под текстом и числами: правит их бой, и они должны
   оставаться живым DOM.

   Детали — Dumivid, «Mechanized Magic» (CC0). */

/* ---------------- плита рамки ---------------- */

.card {
  background: none;
  border: 0;
  /* Скругление в процентах, а не в cqw: cqw у самого контейнера считается от
     РОДИТЕЛЬСКОГО контейнера, и на столе 3cqw превращались в 26 px — углы
     оправы срезало начисто. */
  border-radius: 5%;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.55);
  overflow: visible;
}
/* Сама плита — фоном контейнера, чтобы не плодить ещё один слой. */
/* Оправа лежит ПОВЕРХ портрета: в ней вырезано круглое окно, сквозь которое
   видно лицо. Поэтому z-index 1, а портрет уходит на 0 — иначе он закрыл бы
   кольцо и стало бы видно, что окно прорублено. */
.card::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: var(--ck-frame, url('art/kit/tcg_neutral.webp')) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0.5cqw 0.8cqw rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.card.elem-fire { --ck-frame: url('art/kit/tcg_fire.webp'); }
.card.elem-water { --ck-frame: url('art/kit/tcg_water.webp'); }
.card.elem-nature { --ck-frame: url('art/kit/tcg_nature.webp'); }
.card.elem-light { --ck-frame: url('art/kit/tcg_light.webp'); }
.card.elem-dark { --ck-frame: url('art/kit/tcg_dark.webp'); }
.card.elem-neutral { --ck-frame: url('art/kit/tcg_neutral.webp'); }

/* Подложка подписи из прошлого оформления больше не нужна: её роль играет
   каменная плашка из набора. */
.card::after { content: none; }

/* Рубашка — не лицо: у неё свой рисунок, и плита рамки его закрывала,
   превращая руку соперницы в ряд бледных прямоугольников. */
.card.card-back::before { content: none; }
.card.card-back {
  background: url('art/card_back.webp?v=3') center / cover no-repeat, #2b1108;
  border: 1px solid rgba(240, 194, 96, 0.45);
  border-radius: 11px;
}

/* ---------------- содержимое карты ----------------

   Оправа нарисована целиком (scripts/cardframe.mjs), поэтому отдельные детали
   из пака больше не выкладываются — от набора остался только камень редкости:
   он зависит от карты, а не от стихии, и в оправу его не запечёшь.

   Все числа ниже — те же, что в CARD из scripts/cardframe.mjs: гнёзда на
   картинке и живые числа поверх них должны совпадать. Меняете здесь —
   меняйте и там. */

.card > .ck {
  position: absolute; inset: 0;
  z-index: 6;
  pointer-events: none;
}
.ck-part { display: none; }
.ck-rarity {
  display: block;
  position: absolute;
  inset: auto auto 40cqw 50%;
  width: 8cqw; height: 8cqw;
  transform: translateX(-50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 1.2cqw rgba(255, 220, 150, 0.6));
}

/* Портрет: круг в окне оправы. Позиционирование обязательно — без него
   `inset` и `z-index` не работают, портрет остаётся в потоке, а ленивая
   картинка внутри вообще не начинает грузиться. */
.card .card-art {
  position: absolute;
  inset: 16cqw 19cqw auto 19cqw;
  height: 62cqw;
  border-radius: 50%;
  overflow: hidden;
  z-index: 0;
  background-color: #16161a;
}
.card .card-art img { object-position: 50% 10%; }

/* Имя занимает всю ленту (80…97 cqw) и центрируется в ней: со строкой,
   поставленной «примерно», длинные имена уезжали за металлический кант. */
.card > .card-name {
  z-index: 5;
  bottom: auto; top: 80cqw; height: 17cqw;
  display: grid; place-items: center;
  padding: 0 11cqw;
  font-size: 9cqw; line-height: 1;
  letter-spacing: -0.02em;
  color: #f7f2ea;
  text-shadow: 0 0.6cqw 1cqw rgba(0, 0, 0, 0.9);
}

/* Стоимость — в синей линзе слева сверху. */
.card .card-cost {
  z-index: 5;
  top: 2cqw; left: 1.5cqw;
  width: 21cqw; height: 21cqw;
  display: grid; place-items: center;
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 12cqw;
  color: #eaf3ff;
  text-shadow: 0 0.5cqw 1.2cqw rgba(0, 20, 60, 0.95);
}

/* Знак стихии — в тёмной линзе справа сверху. */
.card .card-elem {
  z-index: 5;
  top: 4cqw; right: 3.5cqw;
  width: 17cqw; height: 17cqw;
  display: grid; place-items: center;
  font-size: 9.5cqw;
  opacity: 0.95;
}

/* Короткая метка — по центру плашки (100…118 cqw). */
.card .card-text {
  z-index: 5;
  top: 100cqw; bottom: auto; height: 18cqw;
  display: grid; place-items: center;
  padding: 0 10cqw;
  font-size: 7.6cqw; line-height: 1.15;
  color: #d8dee6;
  white-space: normal;
  overflow: hidden;
}

/* Атака и здоровье — камни на нижнем поле оправы. Рисуются в CSS, а не в
   картинке: у заклинаний их нет, и пустые гнёзда смотрелись бы поломкой. */
.card .card-atk, .card .card-hp {
  z-index: 5;
  width: 19cqw; height: 19cqw;
  bottom: 1cqw;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 12cqw;
  text-shadow: 0 0.5cqw 1cqw rgba(0, 0, 0, 0.45);
  box-shadow:
    0 0 0 0.9cqw rgba(247, 220, 154, 0.9),
    inset 0 1.5cqw 0 rgba(255, 255, 255, 0.3),
    inset 0 -1cqw 1.5cqw rgba(0, 0, 0, 0.35),
    0 1cqw 2cqw rgba(0, 0, 0, 0.65);
}
.card .card-atk {
  left: 3cqw;
  color: #2a1a04;
  background:
    radial-gradient(70% 70% at 35% 25%, #fff0c0, transparent 60%),
    linear-gradient(180deg, #f7cf6a, #d9a12c);
}
.card .card-hp {
  right: 3cqw;
  color: #fff;
  background:
    radial-gradient(70% 70% at 35% 25%, #ff9a90, transparent 60%),
    linear-gradient(180deg, #ff5347, #c9291f);
}
.card .card-hp.hurt {
  background:
    radial-gradient(70% 70% at 35% 25%, #ff7a70, transparent 60%),
    linear-gradient(180deg, #e0261c, #8f0f08);
}
.card .card-atk.buffed, .card .card-hp.buffed {
  box-shadow:
    0 0 0 0.9cqw #30d158,
    0 0 3cqw rgba(48, 209, 88, 0.8),
    inset 0 1.5cqw 0 rgba(255, 255, 255, 0.3);
}

.card-gem { display: none; }        /* звёздочку заменил камень редкости */

/* Счётчик копий в коллекции: под линзой стихии, чтобы её не перекрывать. */
.card .card-count {
  top: 26cqw; right: 2cqw; bottom: auto;
  z-index: 6;
  background: rgba(10, 10, 12, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.8cqw 2.4cqw;
  font-size: 8cqw;
}

/* ---------------- существо на столе ----------------

   У существа своя оправа: на 60 px плашка текста и полоска типа
   превращаются в грязь, поэтому там только окно портрета и лента имени,
   а атака со здоровьем висят кругляшами по углам. */
.minion {
  border: 0;
  background: var(--ck-frame, url('art/kit/tcgm_neutral.webp')) center / 100% 100% no-repeat;
  border-radius: 5%;
}
.minion.elem-fire { --ck-frame: url('art/kit/tcgm_fire.webp'); }
.minion.elem-water { --ck-frame: url('art/kit/tcgm_water.webp'); }
.minion.elem-nature { --ck-frame: url('art/kit/tcgm_nature.webp'); }
.minion.elem-light { --ck-frame: url('art/kit/tcgm_light.webp'); }
.minion.elem-dark { --ck-frame: url('art/kit/tcgm_dark.webp'); }
.minion.elem-neutral { --ck-frame: url('art/kit/tcgm_neutral.webp'); }

/* Фон существа — это и есть оправа с прорезанным окном, значит портрет
   обязан лежать под ней. */
.minion .card-art {
  position: absolute;
  inset: 15cqw 13cqw auto 13cqw;
  height: 74cqw;
  border-radius: 50%;
  overflow: hidden;
  z-index: 0;
}
/* Затемнение под именем не нужно: имя лежит на нарисованной ленте. */
.minion::after { content: none; }
.minion-name {
  left: 7cqw; right: 7cqw;
  top: 96cqw; bottom: auto; height: 20cqw;
  display: grid; place-items: center;
  font-size: 9.5cqw; line-height: 1;
  text-shadow: 0 0.5cqw 1cqw rgba(0, 0, 0, 0.9);
}

/* ---------------- рубашка ---------------- */

/* Рубашка остаётся прежней — она нарисована под игру и с набором не спорит. */

/* ---------------- бустер и его разрыв ----------------

   Свиток — это обёртка из набора, покрашенная под стихию госпожи. Разрыв
   сделан двумя половинами одного рисунка с зубчатым `clip-path`: шов всегда
   совпадает сам собой, и не нужен отдельный арт «рваного края».

   Тянуть можно пальцем — верхняя половина идёт следом за рукой (`--pull`),
   и это ощущается как настоящий пакет. Короткий тап тоже рвёт: на десктопе
   жест «потяни» неочевиден. */

.pack-visual {
  position: relative;
  width: 170px; height: 250px;
  background: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  touch-action: none;              /* тянем сами, страница не должна ехать */
  animation: pack-float 5.5s ease-in-out infinite alternate;
}
.pack-visual .pack-emblem { display: none; }

.tear {
  position: absolute; inset: 0;
  background: var(--wrap, url('art/kit/pack_fire.webp')) center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
  transition: transform 0.5s cubic-bezier(0.3, 0, 0.2, 1), opacity 0.5s ease;
}
/* Верх обрывается рваной линией, низ — её зеркальным продолжением. */
.tear-top {
  clip-path: polygon(0 0, 100% 0, 100% 30%, 92% 34%, 84% 29%, 76% 35%, 68% 30%,
    60% 36%, 52% 31%, 44% 36%, 36% 30%, 28% 35%, 20% 29%, 12% 34%, 4% 30%, 0 33%);
  transform: translateY(var(--pull, 0px));
}
.tear-bottom {
  clip-path: polygon(0 33%, 4% 30%, 12% 34%, 20% 29%, 28% 35%, 36% 30%, 44% 36%,
    52% 31%, 60% 36%, 68% 30%, 76% 35%, 84% 29%, 92% 34%, 100% 30%, 100% 100%, 0 100%);
}

/* Момент разрыва: верх улетает с поворотом, низ оседает. */
.pack-visual.is-torn .tear-top {
  transform: translate(-14%, -120%) rotate(-16deg);
  opacity: 0;
}
.pack-visual.is-torn .tear-bottom {
  transform: translate(10%, 34%) rotate(9deg);
  opacity: 0;
  transition-delay: 0.06s;
}
.pack-visual.is-torn { animation: none; }
/* После разрыва обёртка не просто исчезает, а складывается: иначе на её
   месте остаётся чёрная дыра в пол-экрана, а карты уезжают под нижний край. */
.pack-visual.is-open .tear { visibility: hidden; }
.pack-visual.is-open {
  height: 0;
  opacity: 0;
  transition: height 0.35s ease, opacity 0.25s ease;
}
.pack-visual { transition: height 0.35s ease, opacity 0.25s ease; }

/* Вспышка на месте разрыва — она и «выпускает» карты. */
.tear-flash {
  position: absolute; left: 50%; top: 32%;
  width: 10px; height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  background: radial-gradient(circle, rgba(255, 252, 240, 0.95) 0 25%,
    color-mix(in srgb, var(--accent, #ffbe6a) 70%, transparent) 55%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
.pack-visual.is-torn .tear-flash { animation: tear-flash 0.7s ease-out forwards; }
@keyframes tear-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(9); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(16); }
}

/* Подсказка про жест: исчезает, как только пакет тронули. Держим её внутри
   обёртки — снаружи она налезала на полосу «до легендарной». */
/* Подсказка висит ПОД обёрткой: на самой обёртке напечатано название, и две
   надписи друг на друге читались как брак печати. */
.pack-pull {
  position: absolute; left: 50%; bottom: -22px;
  transform: translateX(-50%);
  font-size: var(--fs-12, 12px);
  color: var(--text-3, #7c7c82);
  white-space: nowrap;
  animation: pull-hint 2.4s ease-in-out infinite;
}
.pack-visual.is-torn .pack-pull { display: none; }
@keyframes pull-hint {
  0%, 100% { opacity: 0.5; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, -3px); }
}

/* Гарантированная легендарная: обёртка светится золотом. */
.pack-visual.guaranteed .tear {
  filter: drop-shadow(0 0 22px rgba(255, 210, 120, 0.85)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
}

@media (prefers-reduced-motion: reduce) {
  .pack-visual, .pack-pull { animation: none; }
  .tear { transition: none; }
}