/* Карточные эффекты: рубашка, свечение редкостей, вскрытие свитка.

   Легендарная карта должна читаться мгновенно и издалека — у неё живая
   переливающаяся рамка и золотое свечение; эпическая получает то же самое,
   но тише. Остальные редкости остаются спокойными, иначе «особенное»
   перестаёт быть особенным. */

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

.card-back {
  background: url('art/card_back.webp') center / cover no-repeat, #2b1108;
  border-color: rgba(240, 194, 96, 0.45);
}
.card-back::after { content: none; }
.card-back::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, rgba(255, 235, 190, 0.18), transparent 45%);
  border-radius: 11px;
}

/* Колода на столе — стопка рубашек, а не строчка с числом. */
.deck-stack {
  position: relative;
  width: 34px; height: 48px;
  flex: 0 0 auto;
}
.deck-stack i {
  position: absolute; inset: 0;
  border-radius: 5px;
  background: url('art/card_back.webp') center / cover no-repeat, #2b1108;
  border: 1px solid rgba(240, 194, 96, 0.35);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.deck-stack i:nth-child(2) { transform: translate(2px, -2px); }
.deck-stack i:nth-child(3) { transform: translate(4px, -4px); }
.deck-count-badge {
  position: absolute; right: -8px; bottom: -6px; z-index: 4;
  min-width: 20px; height: 20px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(18, 10, 4, 0.92);
  border: 1px solid rgba(240, 194, 96, 0.5);
  font-size: 11px; font-weight: 700; color: var(--gold);
}
.deck-slot { display: flex; align-items: center; gap: 10px; }

/* ---------------- свечение редкостей ---------------- */

/* Переливающаяся рамка: вращаем конический градиент под карточкой. */
.rarity-4, .rarity-3 { position: relative; }
.rarity-4::after, .rarity-3::after {
  z-index: 0;
}
.card.rarity-4 {
  border-color: transparent;
  background-clip: padding-box;
  box-shadow: 0 0 18px rgba(255, 190, 70, 0.45), 0 6px 16px rgba(0, 0, 0, 0.5);
}
.card.rarity-4::before {
  background:
    linear-gradient(150deg, rgba(255, 240, 200, 0.4), transparent 45%),
    radial-gradient(circle at 82% 12%, rgba(255, 220, 130, 0.4), transparent 42%);
}

/* Ободок отдельным слоем, чтобы не мешать содержимому карты. */
.card.rarity-4 .card-art::after,
.minion.rarity-4 .card-art::after {
  content: '';
  position: absolute; inset: -60%;
  background: conic-gradient(from 0deg,
    rgba(255, 216, 120, 0) 0deg,
    rgba(255, 216, 120, 0.75) 60deg,
    rgba(255, 255, 220, 0.95) 90deg,
    rgba(255, 216, 120, 0.75) 120deg,
    rgba(255, 216, 120, 0) 200deg,
    rgba(255, 216, 120, 0) 360deg);
  animation: sheen 4.5s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.5;
  pointer-events: none;
}
@keyframes sheen { to { transform: rotate(360deg); } }

.card.rarity-3 { box-shadow: 0 0 12px rgba(190, 120, 255, 0.3), 0 6px 14px rgba(0, 0, 0, 0.45); }

/* ---------------- вскрытие свитка ---------------- */

.pack-slot.rare-pop .card { animation: rarePop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes rarePop {
  0% { transform: scale(0.86); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.pack-slot.legendary .card {
  box-shadow: 0 0 34px rgba(255, 200, 80, 0.85), 0 0 70px rgba(255, 160, 40, 0.35);
}
.pack-slot.legendary::after {
  content: '★ легендарная';
  display: block;
  margin-top: 2px;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 190, 70, 0.8);
}

/* Вспышка на весь экран в момент легендарной карты. */
.legendary-flash {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 235, 180, 0.55), rgba(255, 170, 60, 0.15) 35%, transparent 65%);
  animation: flashOut 1.1s ease-out forwards;
}
@keyframes flashOut {
  0% { opacity: 0; transform: scale(0.9); }
  18% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}

/* ---------------- счётчик жалости ---------------- */

.pity {
  width: min(360px, 100%);
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-line);
  background: rgba(0, 0, 0, 0.32);
}
.pity-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12px; color: var(--ink-dim);
  margin-bottom: 6px;
}
.pity-head b { color: var(--gold); font-size: 13px; white-space: nowrap; }
.pity-bar {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.pity-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #b9762a, #ffd977);
  box-shadow: 0 0 10px rgba(255, 190, 80, 0.6);
  transition: width 0.4s ease;
}
.pity.ready { border-color: rgba(255, 200, 90, 0.7); box-shadow: 0 0 16px rgba(255, 190, 80, 0.25); }
.pity.ready .pity-bar span { animation: pityPulse 1.6s ease-in-out infinite; }
@keyframes pityPulse { 50% { filter: brightness(1.35); } }

/* Свиток, который обязан выдать легендарную карту, светится золотом. */
.pack-visual.guaranteed {
  border-color: rgba(255, 214, 120, 0.9);
  box-shadow: 0 0 60px rgba(255, 190, 70, 0.55);
}
.pack-visual.guaranteed .pack-emblem { text-shadow: 0 0 24px rgba(255, 220, 140, 0.9); }
.btn-legendary {
  background: linear-gradient(180deg, #ffe9a8, #e0a02a);
  animation: legendaryBtn 1.8s ease-in-out infinite;
}
@keyframes legendaryBtn {
  50% { box-shadow: 0 0 24px rgba(255, 200, 90, 0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .card.rarity-4 .card-art::after,
  .pity.ready .pity-bar span,
  .btn-legendary,
  .legendary-flash { animation: none; }
}

.deck-stack.empty i { opacity: 0.25; filter: grayscale(0.8); }
.hand-count { font-size: 11px; color: var(--ink-dim); }

/* ---------------- замена стартовой руки ---------------- */

.mulligan-panel { width: min(100%, 560px); }
.mulligan-cards {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 14px 0 4px;
}
.mulligan-cards .card { cursor: pointer; transition: transform 0.14s ease, filter 0.2s ease; }
.mulligan-cards .card:hover { transform: translateY(-4px); }
/* Отмеченная карта уходит в колоду — показываем это гашением и крестом. */
.mulligan-cards .card.to-swap { filter: grayscale(0.85) brightness(0.6); transform: translateY(4px) scale(0.96); }
.mulligan-cards .card.to-swap::after { content: '✖'; display: grid; place-items: center; font-size: 30px; color: #ff8a7a; }
.mulligan-cards .card.locked { opacity: 0.75; cursor: default; }

/* Итог боя: короткая сводка вместо голого «победа/поражение». */
.finish-stats {
  display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center;
  margin: 12px 0 4px;
  font-size: 13px; color: var(--ink-dim);
}
.finish-stats b { color: var(--gold); font-size: 15px; }