/* Reklam & Co – Case Rating (emoji hover comment) */
.reco-case-rating{
  padding:18px;
  margin-top:40px;
  text-align:center;
}
.reco-title{
  font-size:18px;
  margin:0 0 12px 0;
}
.reco-options{
  display:flex;
  justify-content:center;
  gap:40px;
}
.reco-btn{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:8px 12px;
  cursor:pointer;
  outline:none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 160px;
}
.reco-btn:focus{ outline:none; }
.reco-btn:focus-visible{
  outline:2px solid #7c3aed !important;
  outline-offset:4px !important;
}
.reco-emoji{
  font-size:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  height:96px;
  line-height:1;
  transition: transform .3s ease;
}
.reco-btn:hover .reco-emoji{
  transform: scale(1.15) rotate(-5deg);
  animation: wiggle 0.5s ease-in-out;
}
.reco-icon-image{
  width:96px;
  height:96px;
  display:block;
  object-fit:contain;
  transition: transform .3s ease;
}
.reco-btn:hover .reco-icon-image{
  transform: scale(1.15) rotate(-5deg);
  animation: wiggle 0.5s ease-in-out;
}
@keyframes wiggle {
  0%, 100% { transform: scale(1.15) rotate(-5deg); }
  25% { transform: scale(1.2) rotate(5deg); }
  50% { transform: scale(1.15) rotate(-3deg); }
  75% { transform: scale(1.2) rotate(3deg); }
}
.reco-comment{
  font-size:13px;
  color:#666;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  white-space: nowrap;
}
.reco-btn:hover .reco-comment{
  opacity:1;
  transform: translateY(0);
}
.reco-count{
  display:block;
  font-size:15px;
  margin-top:6px;
  color:#333;
}
.reco-voted .reco-btn{
  opacity:.85;
}
.reco-status{
  margin-top:10px;
  font-size:14px;
  color:#444;
}
.reco-confetti{
  position:fixed;
  pointer-events:none;
  z-index:9999;
  animation:confetti-fall var(--duration, 3s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity:1;
  will-change:transform, opacity;
}
@keyframes confetti-fall{
  0%{
    transform:translate(0, 0) rotate(0deg) scale(1);
    opacity:1;
  }
  15%{
    opacity:1;
  }
  70%{
    opacity:1;
  }
  100%{
    transform:translate(
      calc(var(--dx) * 0.85),
      calc(var(--dy) * 0.4 + 800px)
    ) rotate(var(--rotation)) scale(0.5);
    opacity:0;
  }
}