// Konfety po výsledku kola štěstí, převzaté z Luncheru
.wheel-confetti {
  position: fixed;
  inset: 0;
  z-index: 2000; // nad modalem (bootstrap 1055)
  pointer-events: none;
  overflow: hidden;

  > span {
    position: absolute;
    will-change: transform, opacity;
    animation-fill-mode: both;
  }
}

// Vrh: rychle vzhůru do vrcholu (zpomalení), pak volný pád (zrychlení)
@keyframes confetti-throw {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.4); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  6% { opacity: 1; }
  38% { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  88% { opacity: 1; }
  100% { transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)) scale(1); opacity: 0; }
}

// Déšť: plynulý pád shora s mírným houpáním
@keyframes confetti-rain {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; animation-timing-function: ease-in-out; }
  8% { opacity: 1; }
  40% { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)); animation-timing-function: ease-in; }
  88% { opacity: 1; }
  100% { transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)); opacity: 0; }
}

.confetti-emoji {
  line-height: 1;
}

// ============================================
// Konfety ve stylu Hell Girl
// ============================================
.confetti-hg {
  filter: drop-shadow(0 0 6px rgb(200 16 46 / 0.55)) drop-shadow(0 3px 3px rgb(0 0 0 / 0.3));
}

.confetti-hg-badge {
  padding: 4px 14px;
  border: 1px solid #c8102e;
  outline: 1px solid rgb(200 16 46 / 0.4);
  outline-offset: 2px;
  color: #fff4ee;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 0 0 8px rgb(232 52 79 / 0.7);
}

// Nápis „poslání do pekla" — černá deska s rudým lemem, vynoří se z mlhy
.confetti-hg-banner {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 48px;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 800;
  font-size: clamp(2rem, 7vw, 4rem);
  letter-spacing: 0.3em;
  white-space: nowrap;
  color: #fff4ee;
  background: linear-gradient(90deg, transparent, #12070a 15%, #12070a 85%, transparent);
  border-top: 2px solid #c8102e;
  border-bottom: 2px solid #c8102e;
  text-shadow: 0 0 18px rgb(232 52 79 / 0.9), 0 0 4px #c8102e;
  animation: hg-banner 2.6s ease both;
}

@keyframes hg-banner {
  0% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; filter: blur(12px); }
  25% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
  75% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
  100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0; filter: blur(8px); }
}

// Postava s hláškou — tmavý odznak s rudou září a bublina jako svitek
.confetti-voice {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: min(460px, calc(100vw - 32px));
  animation: confetti-voice 4.6s ease both;
}

.confetti-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 8px;
  font-size: 46px;
  border-radius: 50%;
  border: 4px solid #12070a;
  background: radial-gradient(circle at 50% 60%, #3a0d16, #12070a);
  box-shadow: 0 0 0 3px var(--speaker, #c8102e), 0 0 18px rgb(200 16 46 / 0.6);
}

.confetti-bubble {
  position: relative;
  margin-bottom: 40px;
  padding: 12px 16px;
  background: #170c0f;
  color: #f3e6e2;
  border: 1px solid var(--speaker, #c8102e);
  border-radius: 3px;
  box-shadow: 0 0 16px rgb(0 0 0 / 0.6), 0 0 10px rgb(200 16 46 / 0.3);
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;

  p {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.35;
  }

  small {
    display: block;
    margin-top: 4px;
    color: var(--speaker, #c8102e);
    font-weight: 700;
  }

  // ocásek bubliny směrem k postavě
  &::before {
    content: '';
    position: absolute;
    left: -14px;
    bottom: 14px;
    border: 8px solid transparent;
    border-right: 10px solid var(--speaker, #c8102e);
  }
}

@keyframes confetti-voice {
  0% { opacity: 0; transform: translateY(40px) scale(0.8); }
  10% { opacity: 1; transform: translateY(0) scale(1.03); }
  15% { transform: translateY(0) scale(1); }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(20px); }
}