/* ============================================================
   reel.css — Ruleta circular de selección de pico
   ============================================================ */

#reel-container-wrapper {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#reel-container-wrapper.hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
}

#reel-container {
  position: relative;
  width: clamp(190px, 32vmin, 320px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Dial pixel-art */
.reel-dial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Corona que rota mientras gira el carrete */
.reel-ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform 0.08s linear;
}

/* Símbolo central */
.reel-symbol {
  position: relative;
  z-index: 2;
  width: 38%;
  height: 38%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel-pick-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.7));
}

.reel-cross {
  width: 78%;
  height: 78%;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.55));
}

.reel-pick-text {
  font-family: var(--font-pixel);
  font-size: clamp(11px, 2.4vmin, 18px);
  color: #fff;
  text-shadow: 3px 3px 0 #000;
  text-align: center;
  line-height: 1.5;
}

/* ——— Estados ——— */

#reel-container.reel--spinning {
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.28));
}

#reel-container.reel--win {
  animation: reelWin 0.7s ease-out;
}

#reel-container.reel--cross {
  animation: reelCross 0.7s ease-out;
}

@keyframes reelWin {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.1);
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 34px rgba(92, 224, 92, 0.95));
  }

  100% {
    transform: scale(1);
  }
}

@keyframes reelCross {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-12px);
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 30px rgba(226, 59, 46, 0.9));
  }

  55% {
    transform: translateX(9px);
  }

  80% {
    transform: translateX(-5px);
  }
}

/* Contador de cruces alrededor del dial */
.reel-fails {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: clamp(10px, 1.8vmin, 14px);
  color: #E23B2E;
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
}