/* =====================================================
   Поздравление с подъёмом в лигу (league_celebrate.js).
   Появляется раз в неделю максимум — здесь можно и нужно
   быть заметным, но без мигания и без тряски.
   ===================================================== */

.lgc {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 12, 17, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: lgcIn 0.22s ease-out both;
}
.lgc.out { animation: lgcOut 0.2s ease-in both; }
@keyframes lgcIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lgcOut { from { opacity: 1; } to { opacity: 0; } }

.lgc-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lgc-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(340px, 100%);
  padding: 26px 22px 20px;
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  text-align: center;
  overflow: hidden;
  animation: lgcCard 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes lgcCard {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to { opacity: 1; transform: none; }
}



.lgc-badge {
  position: relative;
  /* Эффект ступени крупнее, чем в шапке: карточка поздравления больше. */
  --fx-k: 1.15px;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  color: #fff;
  color: var(--tint);
  /* У поздравления подложки нет: эмблема — главный герой экрана, и круг вокруг
     неё только уменьшал бы её. */
  background: none;
  animation: lgcBadge 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.lgc-badge > i { width: 42px; height: 42px; }
.lgc-badge .lg-badge-img { width: 100%; height: 100%; }
@keyframes lgcBadge {
  0% { opacity: 0; transform: scale(0.3) rotate(-25deg); }
  60% { opacity: 1; transform: scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}

.lgc-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lgc-name {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.lgc-meaning {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.lgc-perk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tint) 12%, transparent);
  color: color-mix(in srgb, var(--tint) 75%, var(--text-primary));
  font-size: 12.5px;
  font-weight: 700;
}
.lgc-perk > i { width: 15px; height: 15px; }
.lgc-sub { font-size: 12.5px; color: var(--text-muted); }
.lgc-ok { width: 100%; margin-top: 8px; }

/* Спокойный режим: никакого движения, только карточка. */
@media (prefers-reduced-motion: reduce) {
  .lgc, .lgc-card, .lgc-badge { animation: none; }
}

/* Камень в поздравлении крупнее: это главный герой экрана. */