.feedback-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

.feedback-overlay.open {
  display: block;
}

/* ==========================================
   FEEDBACK MODERNO - v4.0 RESULTADO DA ROLETA
   Com gradientes vibrantes e confetti
   ========================================== */

.feedback-container {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  padding: 20px;

  border-radius: 16px;
  max-width: 380px;

  z-index: 10000;
  
  /* Animação de entrada explosiva */
  animation: feedbackExplosion 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Container de VITÓRIA - Gradiente ESCURO vibrante */
.feedback-container.win-container {
  background: 
    radial-gradient(circle at 30% 20%, rgba(255, 215, 0, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(255, 100, 100, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, 
      #1a5fb4 0%,
      #7c3aed 25%,
      #dc2626 50%,
      #ea580c 75%,
      #1a5fb4 100%
    );
  background-size: 100% 100%, 100% 100%, 200% 200%;
  
  border: 3px solid #ffd700;
  box-shadow: 
    0 0 60px rgba(255, 215, 0, 1),
    0 0 90px rgba(255, 100, 100, 0.8),
    0 0 120px rgba(38, 150, 255, 0.6),
    0 15px 40px rgba(0, 0, 0, 0.6),
    inset 0 0 80px rgba(0, 0, 0, 0.3);
  
  animation: feedbackExplosion 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55),
             winGlow 2s ease-in-out infinite,
             rainbowShift 4s linear infinite;
}

@keyframes rainbowShift {
  0% {
    background-position: 0% 50%, 0% 50%, 0% 50%;
  }
  100% {
    background-position: 0% 50%, 0% 50%, 200% 50%;
  }
}

@keyframes winGlow {
  0%, 100% {
    box-shadow: 
      0 0 60px rgba(255, 215, 0, 1),
      0 0 90px rgba(255, 100, 100, 0.8),
      0 0 120px rgba(38, 150, 255, 0.6),
      0 15px 40px rgba(0, 0, 0, 0.6);
  }
  50% {
    box-shadow: 
      0 0 80px rgba(255, 215, 0, 1),
      0 0 120px rgba(255, 100, 100, 1),
      0 0 150px rgba(38, 150, 255, 0.9),
      0 15px 40px rgba(0, 0, 0, 0.6);
  }
}

/* Container de DERROTA - Tema escuro com gradiente */
.feedback-container.lose-container {
  background: linear-gradient(135deg, 
    rgba(40, 40, 60, 0.98) 0%,
    rgba(60, 50, 80, 0.98) 50%,
    rgba(40, 40, 60, 0.98) 100%
  );
  
  border: 3px solid rgba(150, 120, 180, 0.6);
  box-shadow: 
    0 0 40px rgba(150, 100, 200, 0.5),
    0 0 70px rgba(100, 100, 150, 0.4),
    0 20px 40px rgba(0, 0, 0, 0.7),
    inset 0 0 60px rgba(180, 150, 255, 0.08);
  
  animation: feedbackExplosion 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55),
             loseGlow 3s ease-in-out infinite;
}

@keyframes loseGlow {
  0%, 100% {
    box-shadow: 
      0 0 40px rgba(150, 100, 200, 0.5),
      0 0 70px rgba(100, 100, 150, 0.4),
      0 20px 40px rgba(0, 0, 0, 0.7);
  }
  50% {
    box-shadow: 
      0 0 55px rgba(150, 100, 200, 0.7),
      0 0 90px rgba(100, 100, 150, 0.6),
      0 20px 40px rgba(0, 0, 0, 0.7);
  }
}

@keyframes feedbackExplosion {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(-15deg);
    filter: blur(10px);
  }
  40% {
    filter: blur(3px);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.12) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

.feedback-container.open {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* Adicionar partículas de fundo para vitória */
.win-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 100, 255, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 40% 70%, rgba(0, 255, 255, 0.3) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(255, 100, 100, 0.3) 0%, transparent 40%);
  animation: particlesMove 6s ease-in-out infinite;
  pointer-events: none;
  border-radius: 16px;
}

@keyframes particlesMove {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.15) rotate(5deg);
  }
}

.feedback-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Conteúdo de VITÓRIA */
.feedback-content-win {
  gap: 12px;
}

/* Conteúdo de DERROTA */
.feedback-content-lose {
  gap: 10px;
}

/* Emoji do título com brilho */
.feedback-title-container img {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1))
          drop-shadow(0 3px 10px rgba(0, 0, 0, 0.8))
          drop-shadow(0 0 35px rgba(255, 100, 255, 0.8));
  animation: titleEmojiSpin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s backwards,
             titleEmojiFloat 2s ease-in-out infinite 1.2s,
             emojiColorShift 2s linear infinite;
}

@keyframes emojiColorShift {
  0%, 100% {
    filter: drop-shadow(0 0 25px #ffd700) drop-shadow(0 3px 10px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 35px #ff0080);
  }
  50% {
    filter: drop-shadow(0 0 25px #00ffff) drop-shadow(0 3px 10px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 35px #0080ff);
  }
}

@keyframes titleEmojiSpin {
  0% {
    transform: scale(0) rotate(-360deg);
  }
  60% {
    transform: scale(1.2) rotate(20deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes titleEmojiFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.1);
  }
}

.feedback-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  
  /* Fundo branco com borda arco-íris */
  background: 
    radial-gradient(circle at center, #ffffff 0%, #fffacd 100%);

  border-radius: 50%;
  border: 4px solid #ffd700;
  
  /* Sombras MUITO dramáticas coloridas */
  box-shadow: 
    0 0 40px rgba(255, 215, 0, 1),
    0 0 70px rgba(255, 100, 255, 0.8),
    0 0 100px rgba(0, 255, 255, 0.6),
    0 8px 30px rgba(0, 0, 0, 0.5),
    inset 0 0 30px rgba(255, 255, 255, 0.4);

  width: 90px;
  height: 90px;
  
  /* Animação de rotação e escala + pulso */
  animation: prizeImageSpin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55),
             imagePulse 2s ease-in-out infinite 1s;
}


@keyframes imagePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 0 40px rgba(255, 215, 0, 1),
      0 0 60px rgba(255, 100, 255, 0.8),
      0 0 80px rgba(0, 255, 255, 0.6),
      0 8px 30px rgba(0, 0, 0, 0.5);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 
      0 0 55px rgba(255, 215, 0, 1),
      0 0 80px rgba(255, 100, 255, 1),
      0 0 100px rgba(0, 255, 255, 0.8),
      0 8px 30px rgba(0, 0, 0, 0.5);
  }
}

@keyframes prizeImageSpin {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.feedback-image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

.feedback-icon-emoji {
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 4px 15px rgba(255, 215, 0, 1))
          drop-shadow(0 0 20px rgba(255, 100, 255, 0.8));
  animation: emojiPop 1s cubic-bezier(0.68, -0.55, 0.265, 1.55),
             emojiFloat 3s ease-in-out infinite 1s,
             emojiRainbow 2s linear infinite;
}

@keyframes emojiRainbow {
  0% {
    filter: drop-shadow(0 4px 15px #ffd700) drop-shadow(0 0 20px #ff0080);
  }
  33% {
    filter: drop-shadow(0 4px 15px #00ff00) drop-shadow(0 0 20px #00ffff);
  }
  66% {
    filter: drop-shadow(0 4px 15px #ff8c00) drop-shadow(0 0 20px #0080ff);
  }
  100% {
    filter: drop-shadow(0 4px 15px #ffd700) drop-shadow(0 0 20px #ff0080);
  }
}

@keyframes emojiPop {
  0% {
    transform: scale(0) rotate(-180deg);
  }
  60% {
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes emojiFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(-5deg);
  }
  75% {
    transform: translateY(-8px) rotate(5deg);
  }
}

/* Título de VITÓRIA */
.feedback-title-container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 
    0 3px 10px rgba(0, 0, 0, 1),
    0 0 25px rgba(255, 215, 0, 1),
    0 0 40px rgba(255, 100, 255, 0.8),
    0 0 60px rgba(0, 255, 255, 0.6);
  
  /* Animação de entrada */
  animation: titleSlideIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s backwards,
             titlePulse 2s ease-in-out infinite,
             titleRainbow 3s linear infinite;
}

@keyframes titleRainbow {
  0% {
    text-shadow: 
      0 3px 10px rgba(0, 0, 0, 1),
      0 0 25px #ffd700,
      0 0 40px #ff0080,
      0 0 60px #ff8c00;
  }
  33% {
    text-shadow: 
      0 3px 10px rgba(0, 0, 0, 1),
      0 0 25px #00ff00,
      0 0 40px #00ffff,
      0 0 60px #0080ff;
  }
  66% {
    text-shadow: 
      0 3px 10px rgba(0, 0, 0, 1),
      0 0 25px #ff8c00,
      0 0 40px #ffd700,
      0 0 60px #ff0080;
  }
  100% {
    text-shadow: 
      0 3px 10px rgba(0, 0, 0, 1),
      0 0 25px #ffd700,
      0 0 40px #ff0080,
      0 0 60px #ff8c00;
  }
}

@keyframes titlePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Título de DERROTA */
.feedback-title-lose {
  color: #e8e0ff;
  font-size: 20px;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(150, 100, 200, 0.8),
    0 0 40px rgba(180, 150, 255, 0.5);
  animation: titleSlideIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s backwards,
             loseTitlePulse 2s ease-in-out infinite;
}

@keyframes loseTitlePulse {
  0%, 100% {
    text-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.8),
      0 0 25px rgba(150, 100, 200, 0.8),
      0 0 40px rgba(180, 150, 255, 0.5);
  }
  50% {
    text-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.8),
      0 0 35px rgba(150, 100, 200, 1),
      0 0 55px rgba(180, 150, 255, 0.8);
  }
}

@keyframes titleSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feedback-prize-name {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;

  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  /* Texto com cor sólida PRETA para máximo contraste */
  color: #1a1a1a;
  
  border: 3px solid #ffd700;
  border-radius: 14px;
  
  /* Fundo branco/dourado com gradiente animado */
  position: relative;
  
  /* Sombras SUPER dramáticas */
  box-shadow: 
    0 0 35px rgba(255, 215, 0, 1),
    0 0 60px rgba(255, 100, 255, 0.8),
    0 0 80px rgba(0, 255, 255, 0.6),
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 2px 20px rgba(255, 255, 255, 0.8);
  
  /* Sombra no texto para destaque */
  text-shadow: 
    0 1px 2px rgba(255, 255, 255, 0.8),
    0 0 15px rgba(255, 215, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.3);
  
  /* Animação de entrada */
  animation: prizeNamePop 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s backwards,
             prizeNameShine 3s ease-in-out infinite 1s;
}

.feedback-prize-name::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #fffacd 25%,
    #ffd700 50%,
    #fffacd 75%,
    #ffffff 100%
  );
  background-size: 200% 200%;
  animation: prizeNameRainbow 4s linear infinite;
  border-radius: 11px;
  z-index: -1;
}

@keyframes prizeNameRainbow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes prizeNameShine {
  0%, 100% {
    box-shadow: 
      0 0 35px rgba(255, 215, 0, 1),
      0 0 60px rgba(255, 100, 255, 0.8),
      0 0 80px rgba(0, 255, 255, 0.6),
      0 4px 20px rgba(0, 0, 0, 0.5),
      inset 0 2px 20px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 
      0 0 50px rgba(255, 215, 0, 1),
      0 0 80px rgba(255, 100, 255, 1),
      0 0 100px rgba(0, 255, 255, 0.8),
      0 4px 20px rgba(0, 0, 0, 0.5),
      inset 0 2px 30px rgba(255, 255, 255, 0.7);
  }
}

@keyframes prizeNamePop {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.feedback-prize-description {
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  color: #ffffff;
  text-shadow: 
    0 2px 6px rgba(0, 0, 0, 1),
    0 0 15px rgba(0, 0, 0, 0.8);
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid rgba(255, 215, 0, 0.4);
  backdrop-filter: blur(10px);
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.3),
    inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.feedback-prize-description > span {
  font-weight: 800;
  color: #ffd700;
  text-shadow: 
    0 2px 6px rgba(0, 0, 0, 1),
    0 0 20px rgba(255, 215, 0, 0.8);
}

.feedback-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  animation: fadeInUp 0.6s ease-out 0.6s backwards;
  position: relative;
  z-index: 1;
}

/* Botões mais destacados */
.feedback-actions icon-button {
  flex: 1;
}

.win-container .feedback-actions {
  animation: fadeInUp 0.8s ease-out 0.8s backwards;
}

/* Ícone de derrota */
.feedback-lose-icon {
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    rgba(120, 100, 160, 0.4) 0%,
    rgba(80, 80, 120, 0.4) 100%
  );
  border-radius: 50%;
  border: 3px solid rgba(150, 120, 180, 0.6);
  box-shadow: 
    0 0 30px rgba(150, 100, 200, 0.5),
    0 5px 25px rgba(0, 0, 0, 0.6),
    inset 0 0 35px rgba(180, 150, 255, 0.15);
  animation: loseIconFloat 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55),
             losePulse 2s ease-in-out infinite 1s;
}

@keyframes losePulse {
  0%, 100% {
    box-shadow: 
      0 0 30px rgba(150, 100, 200, 0.5),
      0 5px 25px rgba(0, 0, 0, 0.6);
  }
  50% {
    box-shadow: 
      0 0 45px rgba(150, 100, 200, 0.8),
      0 5px 25px rgba(0, 0, 0, 0.6);
  }
}

.feedback-lose-icon img {
  width: 45px;
  height: 45px;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 15px rgba(150, 100, 200, 0.6));
}

@keyframes loseIconFloat {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.5);
  }
  60% {
    transform: translateY(5px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mensagem de derrota */
.feedback-lose-message {
  background: rgba(180, 150, 255, 0.12);
  border: 2px solid rgba(150, 120, 180, 0.5);
  border-radius: 12px;
  padding: 10px 16px;
  backdrop-filter: blur(10px);
  box-shadow: 
    0 0 20px rgba(150, 100, 200, 0.3),
    inset 0 0 25px rgba(180, 150, 255, 0.1);
  animation: fadeInUp 0.6s ease-out 0.4s backwards;
}

.feedback-lose-text {
  font-size: 13px;
  font-weight: 500;
  color: #e8e0ff;
  margin: 0;
  text-align: center;
  line-height: 1.4;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Box de informação de ticket */
.feedback-ticket-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, 
    rgba(var(--cor-primaria-rgb, 38, 150, 255), 0.35) 0%,
    rgba(150, 100, 200, 0.25) 100%
  );
  border: 3px solid rgba(var(--cor-primaria-rgb, 38, 150, 255), 0.7);
  border-radius: 14px;
  box-shadow: 
    0 0 30px rgba(var(--cor-primaria-rgb, 38, 150, 255), 0.6),
    0 0 50px rgba(150, 100, 200, 0.4),
    0 4px 20px rgba(0, 0, 0, 0.4),
    inset 0 0 30px rgba(255, 255, 255, 0.12);
  animation: fadeInUp 0.6s ease-out 0.5s backwards,
             ticketPulse 2s ease-in-out infinite 1.5s;
}

.feedback-ticket-box i {
  font-size: 24px;
  color: var(--cor-primaria, #2696ff);
  filter: drop-shadow(0 0 20px rgba(var(--cor-primaria-rgb, 38, 150, 255), 1))
          drop-shadow(0 0 30px rgba(150, 100, 200, 0.8));
  animation: ticketRotate 2s ease-in-out infinite;
}

@keyframes ticketRotate {
  0%, 100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

@keyframes ticketPulse {
  0%, 100% {
    border-color: rgba(var(--cor-primaria-rgb, 38, 150, 255), 0.5);
    box-shadow: 
      0 0 30px rgba(var(--cor-primaria-rgb, 38, 150, 255), 0.4),
      0 6px 20px rgba(0, 0, 0, 0.3);
  }
  50% {
    border-color: rgba(var(--cor-primaria-rgb, 38, 150, 255), 0.8);
    box-shadow: 
      0 0 50px rgba(var(--cor-primaria-rgb, 38, 150, 255), 0.7),
      0 6px 20px rgba(0, 0, 0, 0.3);
  }
}

.feedback-ticket-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.feedback-ticket-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.feedback-ticket-value {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 
    0 0 20px rgba(var(--cor-primaria-rgb, 38, 150, 255), 1),
    0 0 30px rgba(150, 100, 200, 0.8),
    0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ==========================================
   RESPONSIVO MOBILE - FEEDBACK
   ========================================== */

@media (max-width: 661px) {
  .feedback-container {
    padding: 16px 14px;
    border-radius: 14px;
    max-width: 92%;
  }
  
  .feedback-container.open {
    gap: 10px;
  }
  
  .feedback-image-container {
    width: 75px;
    height: 75px;
    padding: 10px;
    border-width: 3px;
  }
  
  .feedback-icon-emoji {
    font-size: 32px;
  }
  
  .feedback-title-container {
    font-size: 20px;
    gap: 6px;
  }
  
  .feedback-title-container img {
    width: 24px;
    height: 24px;
  }
  
  .feedback-lose-icon {
    width: 65px;
    height: 65px;
  }
  
  .feedback-lose-icon img {
    width: 38px;
    height: 38px;
  }
  
  .feedback-prize-name {
    font-size: 14px;
    padding: 8px 12px;
    border-width: 2px;
  }
  
  .feedback-prize-description {
    font-size: 10px;
    padding: 7px 10px;
  }
  
  .feedback-lose-message {
    padding: 7px 12px;
  }
  
  .feedback-lose-text {
    font-size: 11px;
  }
  
  .feedback-ticket-box {
    padding: 8px 12px;
    gap: 7px;
  }
  
  .feedback-ticket-box i {
    font-size: 18px;
  }
  
  .feedback-ticket-value {
    font-size: 12px;
  }
  
  .feedback-ticket-label {
    font-size: 8px;
  }
}