/* ==============================================================================
   Стили вкладки «Дни рождения» и праздничного фейерверка
   ============================================================================== */

.birthday-banner {
  max-width: 520px;
  margin: calc(-1 * var(--space-2)) auto var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid #ead3b8;
  border-radius: var(--radius-md);
  background: #fbf2e7;
  color: #6a4626;
}

.birthday-banner > svg {
  flex-shrink: 0;
}

.birthday-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  text-align: left;
}

.birthday-copy p {
  display: flex;
  flex-direction: column;
}

.birthday-title {
  font-size: var(--text-sm);
  font-weight: 500;
}

.birthday-replay {
  align-self: flex-start;
  min-height: 32px;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: #6a4626;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.birthday-replay:hover {
  color: #3f2914;
}

.birthdays-page {
  max-width: 1152px;
  margin: auto;
  padding: var(--space-8) var(--space-10) var(--space-12);
}

.birthdays-page h1 {
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: 0;
}

.birthdays-intro {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) auto var(--space-8);
  max-width: 52ch;
  text-wrap: balance;
}

.birthdays-upcoming {
  max-width: 560px;
  margin: 0 auto var(--space-10);
  border: 1.5px solid var(--color-border);
  background: #fff;
}

.birthdays-upcoming h2, .months-title {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0;
}

.birthdays-upcoming h2 {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid #dfe4dd;
  background: #f0f2ec;
}

.birthdays-upcoming ol {
  list-style: none;
}

.birthdays-upcoming li {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  column-gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid #edf0ea;
  font-size: var(--text-sm);
}

.birthdays-upcoming li:first-child {
  border-top: 0;
}

.birthdays-upcoming li.is-next {
  background: #fbf2e7;
}

.upcoming-name {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.upcoming-date {
  grid-column: 2;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.upcoming-when {
  grid-column: 3;
  grid-row: 1/3;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: #52634f;
  white-space: nowrap;
}

.is-next .upcoming-when {
  color: #6a4626;
  font-weight: 500;
}

.person-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  grid-row: 1/3;
}

.person-mark .bday-icon {
  width: 30px;
  height: 30px;
}

.months-title {
  text-align: center;
  margin-bottom: var(--space-5);
}

.months-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--space-4);
}

.month-card {
  border: 1px solid #cfd6cc;
  background: #fff;
  padding: var(--space-4);
  min-height: 120px;
  min-width: 0;
}

.month-card.is-current {
  border: 1.5px solid var(--color-primary);
  background: #f7f9f4;
}

.month-card h3 {
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-3);
  letter-spacing: .01em;
}

.month-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.month-card li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.4;
  min-width: 0;
}

.month-card li span:last-child {
  overflow-wrap: anywhere;
}

.month-card .person-mark {
  width: 28px;
  height: 28px;
}

.month-card .person-mark .bday-icon {
  width: 26px;
  height: 26px;
}

.month-day {
  flex: none;
  min-width: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #29312f;
}

.month-empty {
  font-size: var(--text-xs);
  color: #7a847d;
}

/* Полноэкранное окно поздравления (Celebration Modal) */
.celebration {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: #29312fb3;
  animation: celebration-fade .3s ease-out both;
}

.celebration-confetti {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

.celebration-card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: #fffaf3;
  border: 1px solid #ead3b8;
  border-radius: 16px;
  text-align: center;
  color: #29312f;
  box-shadow: 0 24px 60px #0003;
  animation: celebration-pop .55s cubic-bezier(.2,1.4,.4,1) both;
}

.celebration-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #5c4a38;
}

.celebration-x:hover {
  background: #f3e6d4;
}

.celebration-popper-box {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--space-2);
}

.celebration-popper {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.popper-body {
  transform-origin: 20px 104px;
  animation: popper-wiggle .6s ease-in-out .1s 1 both, popper-kick .35s ease-out .6s 1 both;
}

.popper-streamers {
  transform-origin: 76px 46px;
  animation: popper-streamers .45s ease-out .62s both;
}

.celebration-kicker {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a5a2b;
}

.celebration-names {
  margin: var(--space-2) 0 var(--space-2);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.celebration-person {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  max-width: 100%;
}

.celebration-name {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: left;
}

.celebration-date {
  font-size: var(--text-sm);
  color: #66605a;
  margin-bottom: var(--space-6);
}

.celebration-ok {
  min-height: 48px;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-weight: 500;
  font-size: var(--text-sm);
}

.celebration-ok:hover {
  background: #2c4a3a;
}

/* Оформление для Шефа (Сергей Сенкевич) */
.celebration.is-chief .celebration-card {
  border: 2px solid #d9ae45;
  background: linear-gradient(180deg, #fff7e1 0%, #fffaf3 55%);
  box-shadow: 0 24px 60px #0003, 0 0 0 6px #f6e3a855;
}

.celebration-person.is-chief {
  flex-direction: column;
  gap: var(--space-2);
}

.celebration-person.is-chief .celebration-name {
  text-align: center;
}

/* Анимации маскотов */
.fairy-wings {
  transform-origin: 32px 36px;
  animation: fairy-flutter .9s ease-in-out infinite alternate;
}

.fairy-star {
  transform-origin: 52px 19px;
  animation: fairy-twinkle 1.6s ease-in-out infinite alternate;
}

.bee-body {
  animation: bee-hover 1.8s ease-in-out infinite;
}

.bee-wings {
  transform-origin: 31px 26px;
  animation: bee-buzz .12s linear infinite alternate;
}

.chief-glow {
  transform-origin: 32px 34px;
  animation: chief-glow 2.2s ease-in-out infinite alternate;
}

@keyframes celebration-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes celebration-pop {
  from { opacity: 0; transform: scale(.7) translateY(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes popper-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  50% { transform: rotate(6deg); }
  75% { transform: rotate(-4deg); }
}

@keyframes popper-kick {
  0% { transform: rotate(0) scale(1); }
  40% { transform: rotate(-10deg) scale(1.08); }
  100% { transform: rotate(0) scale(1); }
}

@keyframes popper-streamers {
  from { opacity: 0; transform: scale(.2); }
  to { opacity: 1; transform: none; }
}

@keyframes fairy-flutter {
  from { transform: scaleX(.88); }
  to { transform: scaleX(1.06); }
}

@keyframes fairy-twinkle {
  from { transform: scale(.85) rotate(-10deg); opacity: .75; }
  to { transform: scale(1.15) rotate(10deg); opacity: 1; }
}

@keyframes bee-hover {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-3px) rotate(2deg); }
}

@keyframes bee-buzz {
  from { transform: scaleY(.8); }
  to { transform: scaleY(1.05); }
}

@keyframes chief-glow {
  from { opacity: .7; transform: scale(.94); }
  to { opacity: 1; transform: scale(1.04); }
}

@media (max-width: 1000px) {
  .months-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  .birthdays-page {
    padding: var(--space-6) var(--space-4) var(--space-10);
  }
  .months-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--space-3);
  }
  .month-card {
    padding: var(--space-3);
    min-height: 96px;
  }
  .birthdays-upcoming li {
    padding: var(--space-3) var(--space-4);
  }
}

@media (max-width: 420px) {
  .birthday-banner {
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .celebration-person .bday-icon {
    width: 52px;
    height: 52px;
  }
  .celebration-person.is-chief .bday-icon {
    width: 88px;
    height: 88px;
  }
  .celebration-person {
    gap: var(--space-2);
  }
  .celebration-popper-box {
    width: 96px;
    height: 96px;
  }
}

@media (max-width: 359px) {
  .months-grid {
    grid-template-columns: 1fr;
  }
}