/* WinBanner — баннер победы (🎲 word 🎲) + win-actions + win-wait + win-tg. */

.win {
  position: relative;
  /* Явный stacking-context (страховка к backdrop-filter): дочерний z-index:-1 конфетти
     гарантированно остаётся внутри плашки — над её фоном, но под текстом/кнопками. */
  isolation: isolate;
  margin: 18px 0 0 0; padding: 18px;
  /* Стеклянность как у .row: полупрозрачный panel-solid снизу + цветной градиент сверху.
     Через blur-light просвечивают конфетти/фон. */
  background: var(--grad-success), var(--panel-solid);
  border: 1px solid rgba(var(--success-rgb), 0.35);
  border-radius: var(--radius);
  text-align: center;
  animation: pop var(--t-std) ease;
  overflow: hidden;
  -webkit-backdrop-filter: var(--blur-light);
          backdrop-filter: var(--blur-light);
}

/* Конфетти и эмодзи-хлопушки в плашке победы — над фоном плашки, но ПОД текстом и кнопками. */
.win .confetti-piece { z-index: -1; }

.win .win-title { margin: 0 0 8px; }
.win-stats {
  display: flex; gap: 14px; justify-content: center;
  margin: 0 0 14px;
}
.win-stats b { color: var(--text); font-weight: 600; }

.win-wait {
  margin: 0 0 12px;
  text-align: center;
  width: 100%;
}
.win-wait[hidden] { display: none; }
.win-wait .emo { font-size: 1.2em; line-height: 1; }

.win-word {
  color: var(--win); font-weight: 700; letter-spacing: 0.3px;
  transition: color 0.5s ease, text-shadow 0.5s ease;
}

/* Все нажали хлопушку — золотой режим. */
.win.is-all-cheered {
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.28), rgba(255,215,0,0.16));
  border-color: rgba(var(--gold-rgb), 0.55);
  box-shadow: 0 12px 32px rgba(var(--gold-rgb), 0.25);
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.win.is-all-cheered .win-word {
  color: #f4c430;
  text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.55);
}

/* Two-action endgame: ракета слева + кубик справа. */
.win-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
}
.win-action-btn {
  width: 52px; height: 52px;
  min-width: 52px; min-height: 52px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
}
.win-action-btn[hidden] { display: none !important; }

/* Asymmetric padding — эмодзи имеют асимметричный bbox (глиф ниже baseline + 🎯
   визуально оседает влево). align-items/justify-content центрируют в content-area:
   padding-bottom поднимает на bottom/2, padding-left смещает на left/2 вправо. */
.win-action-btn[data-emoji="🎲"] { padding: 0 0 2px 0; }
.win-action-btn[data-emoji="🎯"] { padding: 0 0 4px 4px; }

@media (max-width: 480px) {
  .win-action-btn {
    width: 44px; height: 44px;
    min-width: 44px; min-height: 44px;
    font-size: 20px;
  }
}

/* TG-кнопка в углу #win — для публичных игр после победы. */
.win-tg {
  position: absolute; right: 8px; top: 8px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgb(var(--tg-rgb));
  background: var(--surface-strong);
  border: 2px solid rgb(var(--tg-rgb));
  border-radius: 50%;
  text-decoration: none;
  user-select: none;
  cursor: pointer;
  transition: transform 0.12s, background 0.12s;
  z-index: 6;
}
.win-tg:hover { transform: scale(1.1); background: rgba(var(--tg-rgb), 0.18); }
.win-tg[hidden] { display: none; }
.win-tg .win-tg-icon[hidden],
.win-tg .win-tg-counter[hidden] { display: none !important; }
.win-tg .win-tg-icon svg {
  width: 18px; height: 18px; display: block;
  transform: translateX(-2px);
}
.win-tg .win-tg-counter {
  font-size: 12px; font-weight: 600; color: rgb(var(--tg-rgb)); line-height: 1;
  font-variant-numeric: tabular-nums;
}