/* ============================================
   MINI-CARD — переиспользуемая анимированная карта
   Используется в шапке (вместо глаза) и hero (вместо луны)
   ============================================ */

.mini-card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(252, 237, 200, 0.12), transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(139, 92, 246, 0.4), transparent 70%),
    linear-gradient(180deg, #14102a 0%, #0a0820 55%, #050410 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(167, 139, 250, 0.18);
}

/* Платиново-золотая статичная окантовка */
.mini-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
  z-index: 10;
  background: linear-gradient(135deg, #e5e4e2 0%, #fcd34d 35%, #e5e4e2 70%, #fcd34d 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.2px;
}
/* Внутренняя рамка */
.mini-card::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  pointer-events: none;
  border: 0.5px solid rgba(252, 211, 77, 0.4);
  z-index: 10;
}

/* === Размеры === */
.mini-card--header {
  width: 28px;
  height: 42px;
}
.mini-card--header::before { border-radius: 5px; padding: 1px; }
.mini-card--header::after { inset: 3px; border-radius: 3px; }

.mini-card--hero {
  width: 120px;
  height: 180px;
}
.mini-card--hero::before { border-radius: 12px; padding: 1.5px; }
.mini-card--hero::after { inset: 8px; border-radius: 8px; }

.mini-card--default {
  width: 130px;
  aspect-ratio: 2/3;
}

/* === ОГОНЬКИ-ЗВЁЗДЫ === */
.mini-card-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.mini-card-spark {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 237, 200, 1) 0%, rgba(252, 211, 77, 0.7) 40%, transparent 80%);
  animation: mini-card-twinkle 2.5s ease-in-out infinite;
}
@keyframes mini-card-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* Размеры огоньков под размер карты */
.mini-card--header .mini-card-spark { width: 1.5px; height: 1.5px; box-shadow: 0 0 3px rgba(252, 211, 77, 0.9); }
.mini-card--header .mini-card-spark--big { width: 2px; height: 2px; box-shadow: 0 0 4px rgba(252, 237, 200, 1); }

.mini-card--hero .mini-card-spark { width: 2.5px; height: 2.5px; box-shadow: 0 0 5px rgba(252, 211, 77, 0.9), 0 0 10px rgba(252, 237, 200, 0.7); }
.mini-card--hero .mini-card-spark--big { width: 4px; height: 4px; box-shadow: 0 0 8px rgba(252, 237, 200, 1), 0 0 16px rgba(252, 211, 77, 0.8); }

.mini-card--default .mini-card-spark { width: 3px; height: 3px; box-shadow: 0 0 6px rgba(252, 211, 77, 0.9), 0 0 12px rgba(252, 237, 200, 0.7); }
.mini-card--default .mini-card-spark--big { width: 5px; height: 5px; box-shadow: 0 0 10px rgba(252, 237, 200, 1), 0 0 20px rgba(252, 211, 77, 0.8); }

/* === РУНЫ === */
.mini-card-runes-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.mini-card-rune {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: rgba(252, 211, 77, 0.85);
  text-shadow: 0 0 8px rgba(252, 211, 77, 0.85), 0 0 16px rgba(252, 211, 77, 0.55);
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity;
  line-height: 1;
  /* Плавные переходы между состояниями */
  transition: opacity 0.3s ease, text-shadow 0.3s ease;
}

/* Размеры рун под размер карты */
.mini-card--header .mini-card-rune { font-size: 7px; }
.mini-card--hero .mini-card-rune { font-size: 17px; }
.mini-card--default .mini-card-rune { font-size: 18px; }

/* === ЛОГОТИП TARO destiny === */
.mini-card-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

/* Аура вокруг логотипа */
.mini-card-logo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 160%;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(252, 211, 77, 0.18) 0%, rgba(252, 211, 77, 0.08) 30%, transparent 60%);
  animation: mini-card-aura 3s ease-in-out infinite;
}
@keyframes mini-card-aura {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.95); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.mini-card-logo-taro {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: linear-gradient(135deg, #fff7d6 0%, #fcd34d 40%, #e5e4e2 70%, #fcd34d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(252, 211, 77, 0.6);
  filter: drop-shadow(0 0 6px rgba(252, 237, 200, 0.45));
  line-height: 1;
}

.mini-card-logo-destiny {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: rgba(252, 237, 200, 0.92);
  text-shadow: 0 0 8px rgba(252, 211, 77, 0.5);
  margin-top: 3px;
}

/* Размеры логотипа под размер карты */
.mini-card--header .mini-card-logo-taro { font-size: 7px; letter-spacing: 0.06em; }
.mini-card--header .mini-card-logo-destiny { font-size: 4px; margin-top: 1px; }

.mini-card--hero .mini-card-logo-taro { font-size: 19px; letter-spacing: 0.1em; }
.mini-card--hero .mini-card-logo-destiny { font-size: 8px; letter-spacing: 0.22em; margin-top: 3px; }

.mini-card--default .mini-card-logo-taro { font-size: 26px; }
.mini-card--default .mini-card-logo-destiny { font-size: 13px; }