/* Tienda: ruleta de premios — ganás SOBRES, con estética vintage tipo álbum */
.shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.8rem 1.2rem;
}

.wheel-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.wheel-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.wheel-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(246, 236, 90, 0.35);
  color: #f6ec5a;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

.wheel-wrapper {
  --wheel-radius: 212px;
  position: relative;
  width: 400px;
  margin: 0 auto 1.2rem;
  padding: 18px;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(150deg, #ffe066 0%, #fff8dc 22%, #f6ec5a 50%, #b8860b 100%);
  box-shadow: 0 0 0 4px #0c2311, 0 0 90px rgba(246, 236, 90, 0.5), 0 0 30px rgba(255, 224, 102, 0.6), inset 0 0 24px rgba(0, 0, 0, 0.45);
  animation: wheelPulseGlow 3s ease-in-out infinite;
}

.wheel-wrapper.is-spinning {
  animation: wheelPulseGlow 0.5s ease infinite;
}

@keyframes wheelPulseGlow {
  0%, 100% { box-shadow: 0 0 0 4px #0c2311, 0 0 60px rgba(246, 236, 90, 0.5), 0 0 20px rgba(255, 224, 102, 0.5), inset 0 0 24px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: 0 0 0 4px #0c2311, 0 0 100px rgba(246, 236, 90, 0.85), 0 0 45px rgba(255, 224, 102, 0.8), inset 0 0 24px rgba(0, 0, 0, 0.5); }
}

@keyframes wheelShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, -1px); }
}

.wheel-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 200, 0.35), transparent 68%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}

/* Base ovalada de sombra debajo de la ruleta, para dar sensación de mesa */
.wheel-wrapper::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 78%;
  height: 18px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* Anillo de brillo giratorio detrás de la ruleta, tipo destello de
   ruleta de casino — le da ese "más brillante y llamativo" extra sin
   depender de ninguna imagen. */
.wheel-sparkle-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    rgba(255, 248, 220, 0) 0deg,
    rgba(255, 248, 220, 0.9) 8deg,
    rgba(255, 248, 220, 0) 22deg,
    rgba(255, 248, 220, 0) 180deg,
    rgba(255, 248, 220, 0.9) 188deg,
    rgba(255, 248, 220, 0) 202deg,
    rgba(255, 248, 220, 0) 360deg
  );
  filter: blur(3px);
  animation: wheelSparkleSpin 3.6s linear infinite;
}

@keyframes wheelSparkleSpin {
  to { transform: rotate(360deg); }
}

.wheel-bulbs {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.wheel-bulb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #f6ec5a 55%, #8a6a12 100%);
  box-shadow: 0 0 5px 1px rgba(246, 236, 90, 0.55);
  opacity: 0.4;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--wheel-radius) * -1));
  animation: bulbChase 1.8s linear infinite;
  animation-delay: var(--delay);
}

@keyframes bulbChase {
  0%, 82%, 100% { opacity: 0.4; box-shadow: 0 0 5px 1px rgba(246, 236, 90, 0.35); }
  8% { opacity: 1; box-shadow: 0 0 14px 5px rgba(255, 248, 220, 1); }
  16% { opacity: 0.5; }
}

.wheel-wrapper.is-spinning .wheel-bulb {
  animation-duration: 0.5s;
}

.wheel-wrapper.just-won {
  animation: wheelWinPulse 0.9s ease;
}

@keyframes wheelWinPulse {
  0% { filter: drop-shadow(0 0 0 rgba(246, 236, 90, 0)); }
  40% { filter: drop-shadow(0 0 40px rgba(255, 248, 220, 0.95)); }
  100% { filter: drop-shadow(0 0 0 rgba(246, 236, 90, 0)); }
}

.wheel-pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 28px;
  height: 38px;
  transform: translateX(-50%);
  z-index: 6;
  transform-origin: 50% 10%;
  background: linear-gradient(160deg, #fff6c8, #f6ec5a 45%, #b8860b 100%);
  clip-path: polygon(50% 100%, 6% 8%, 94% 8%);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 8px rgba(255, 248, 220, 0.6));
}

.wheel-pointer::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, #fff6c8, #f6ec5a 60%, #8a6a12 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 0 10px rgba(246, 236, 90, 0.7);
}

.wheel-wrapper.is-spinning .wheel-pointer {
  animation: pointerBounce 0.3s ease-in-out infinite;
}

@keyframes pointerBounce {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  50% { transform: translateX(-50%) rotate(14deg); }
}

.wheel {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #0c1a0a;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.5);
  transition: transform 4s cubic-bezier(0.12, 0.78, 0.15, 1);
  z-index: 1;
}

.wheel-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Vidrio brillante encima de la ruleta, como en las ruletas de feria reales */
.wheel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 30%, transparent 55%);
  pointer-events: none;
  z-index: 3;
}

/* Botón central de giro: dorado, brillante y con un ícono propio en
   vez del logo de la app (que no tenía nada que ver con girar). */
.wheel-center-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: linear-gradient(160deg, #fffdf3 0%, #fff8dc 20%, #f6ec5a 55%, #b8860b 100%);
  border: 4px solid #0c1a0a;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(246, 236, 90, 0.55), 0 0 26px rgba(255, 248, 220, 0.7);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wheel-center-btn:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(246, 236, 90, 0.7), 0 0 36px rgba(255, 248, 220, 0.9);
}

.wheel-center-btn:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(0.97);
}

.wheel-center-btn:disabled {
  cursor: not-allowed;
  opacity: 0.92;
}

.wheel-center-icon {
  font-size: 20px;
  line-height: 1;
  color: #10230d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Numerito con los tiros disponibles, en la esquina del botón central
   (mismo lenguaje visual que los badges del menú de abajo), para que
   se sepa de un vistazo cuántos tiros quedan sin leer el texto de
   abajo de la ruleta. */
.wheel-center-count {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 8;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: #0c1a0a;
  color: #f6ec5a;
  border: 2px solid #fff8dc;
  font-family: 'Anton', sans-serif;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.wheel-center-btn.no-spins .wheel-center-count {
  opacity: 0.65;
}

.wheel-center-text {
  font-family: 'Anton', sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #10230d;
  line-height: 1;
  margin-top: 1px;
}

/* Cuando no quedan tiros disponibles, el botón queda deshabilitado
   (ver :disabled arriba) y además tachamos el texto "Girar" en vez de
   cambiarlo por otra palabra, para que el botón se vea siempre igual. */
.wheel-center-btn.no-spins .wheel-center-text {
  text-decoration: line-through;
  opacity: 0.75;
}

.spin-availability {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0.6rem 0 0.2rem;
  min-height: 1.3em;
}

/* --- Panel de historial de giros + instrucciones --- */
.wheel-howto {
  padding: 1rem 1.1rem 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.wheel-howto-title {
  margin: 0 0 0.5rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
}

.wheel-howto ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.wheel-howto li {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
}

.wheel-howto b {
  color: #f6ec5a;
}

.prize-table {
  width: 100%;
  max-width: 420px;
  margin-top: 1.5rem;
  text-align: left;
}

.prize-table h3 {
  color: var(--accent-1);
  margin: 0 0 0.75rem;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 14px rgba(103, 244, 127, 0.3);
}

.prize-list {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}

.prize-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  background: rgba(10, 26, 13, 0.95);
  border: 1px solid rgba(103, 244, 127, 0.12);
}

.prize-emoji {
  font-size: 1.6rem;
  min-width: 2rem;
  text-align: center;
}

.prize-item strong {
  display: block;
  color: #f4ffe9;
  font-size: 0.95rem;
}

.prize-item p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* --- Confetti de pantalla completa cuando ganás en la ruleta --- */
.wheel-confetti-overlay {
  position: fixed;
  inset: 0;
  z-index: 1150;
  pointer-events: none;
  overflow: hidden;
}

.wheel-confetti-bit {
  position: absolute;
  top: -5%;
  width: 9px;
  height: 13px;
  border-radius: 2px;
  animation-name: wheelConfettiFall;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
}

@keyframes wheelConfettiFall {
  0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; }
  100% { transform: translateY(115vh) rotate(720deg) translateX(70px); opacity: 0; }
}

/* --- Modal de premio ganado: tarjeta estilo app (verde oscuro + dorado,
   igual que sticker-zoom-content / pack-modal), con aura + rayos detrás
   de la tarjeta, el sobre flotando y un brillo holográfico encima. Todo
   escala en intensidad según data-tier (sorpresa < bronce < plata <
   grande), que pone openWheelPrizeModal() en app.js. --- */
.wheel-prize-modal {
  position: fixed;
  inset: 0;
  z-index: 1120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;

  /* Valores por defecto = tier "sorpresa" (el más común/menos festivo).
     Cada tier los pisa más abajo para escalar el brillo. */
  --prize-accent: #f6ec5a;
  --prize-glow-size: 300px;
  --prize-glow-opacity: 0.32;
  --prize-rays-opacity: 0;
  --prize-float-duration: 3.6s;
  --prize-float-distance: -6px;
  --prize-shine-duration: 3.2s;
  --prize-shine-color: rgba(255, 255, 255, 0.32);
  --prize-card-glow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 5px var(--prize-accent);
}

.wheel-prize-modal.hidden {
  display: none;
}

.wheel-prize-modal[data-tier="bronce"] {
  --prize-accent: #e0a95e;
  --prize-glow-size: 360px;
  --prize-glow-opacity: 0.42;
  --prize-rays-opacity: 0.25;
  --prize-float-duration: 3.1s;
  --prize-float-distance: -9px;
  --prize-shine-duration: 2.6s;
  --prize-shine-color: rgba(255, 214, 170, 0.42);
}

.wheel-prize-modal[data-tier="plata"] {
  --prize-accent: #dbe6ee;
  --prize-glow-size: 420px;
  --prize-glow-opacity: 0.5;
  --prize-rays-opacity: 0.4;
  --prize-float-duration: 2.7s;
  --prize-float-distance: -12px;
  --prize-shine-duration: 2.1s;
  --prize-shine-color: rgba(255, 255, 255, 0.5);
}

.wheel-prize-modal[data-tier="grande"] {
  --prize-accent: #f6ec5a;
  --prize-glow-size: 520px;
  --prize-glow-opacity: 0.65;
  --prize-rays-opacity: 0.6;
  --prize-float-duration: 2.2s;
  --prize-float-distance: -18px;
  --prize-shine-duration: 1.5s;
  --prize-shine-color: rgba(255, 224, 145, 0.65);
  --prize-card-glow: 0 20px 70px rgba(246, 236, 90, 0.5), 0 0 0 5px #f6ec5a, 0 0 60px rgba(246, 236, 90, 0.6);
}

.wheel-prize-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
}

/* Resplandor + rayos detrás de la tarjeta, tipo pack-glow/pack-rays. */
.wheel-prize-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--prize-glow-size);
  height: var(--prize-glow-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 236, 90, var(--prize-glow-opacity)) 0%, rgba(47, 168, 94, 0.3) 40%, transparent 70%);
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
  animation: wheelPrizeAuraPulse 2.4s ease-in-out infinite;
}

@keyframes wheelPrizeAuraPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.wheel-prize-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 620px;
  height: 620px;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(246, 236, 90, 0.35) 8deg 10deg, transparent 10deg 20deg, rgba(246, 236, 90, 0.2) 20deg 22deg, transparent 22deg 36deg, rgba(246, 236, 90, 0.28) 36deg 38deg, transparent 38deg 52deg, rgba(246, 236, 90, 0.18) 52deg 54deg, transparent 54deg 360deg);
  mask: radial-gradient(circle, transparent 22%, black 50%);
  -webkit-mask: radial-gradient(circle, transparent 22%, black 50%);
  opacity: var(--prize-rays-opacity);
  animation: wheelPrizeRaysSpin 16s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes wheelPrizeRaysSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.wheel-prize-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  border-radius: 26px;
  background: linear-gradient(165deg, #1c3115 0%, #0c1a0a 72%);
  border: 5px solid #0c1a0a;
  box-shadow: var(--prize-card-glow);
  overflow: hidden;
  animation: wheelPrizeIn 0.4s cubic-bezier(0.2, 0.85, 0.3, 1.25);
}

.wheel-prize-modal[data-tier="grande"] .wheel-prize-card {
  animation: wheelPrizeIn 0.4s cubic-bezier(0.2, 0.85, 0.3, 1.25), wheelPrizeCardPulse 1.8s ease-in-out infinite 0.4s;
}

@keyframes wheelPrizeCardPulse {
  0%, 100% { box-shadow: var(--prize-card-glow); }
  50% { box-shadow: 0 20px 80px rgba(246, 236, 90, 0.75), 0 0 0 7px #fff8c4, 0 0 90px rgba(246, 236, 90, 0.85); }
}

@keyframes wheelPrizeIn {
  0% { transform: scale(0.3); opacity: 0; }
  65% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.wheel-prize-stripe {
  height: 9px;
  width: 100%;
  background: linear-gradient(90deg, #055f14, #2fa85e, #f6ec5a, #2fa85e, #055f14);
}

.wheel-prize-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

.wheel-prize-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.wheel-prize-header {
  padding: 1.4rem 1.5rem 0.4rem;
  text-align: center;
}

.wheel-prize-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(246, 236, 90, 0.12);
  border: 1px solid rgba(246, 236, 90, 0.4);
  color: #f6ec5a;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.wheel-prize-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f6ec5a;
  animation: wheelDotPulse 1.4s ease-in-out infinite;
}

@keyframes wheelDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.wheel-prize-title {
  margin: 0.7rem 0 0;
  font-family: 'Anton', sans-serif;
  font-size: 1.9rem;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: #f6ffe9;
  text-transform: uppercase;
}

.wheel-prize-sub {
  margin: 0.4rem 0 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: rgba(242, 251, 239, 0.65);
}

.wheel-prize-visual {
  position: relative;
  margin: 1.1rem auto 0;
  width: 100%;
  max-width: 250px;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  background: #111;
  border: 4px solid var(--prize-accent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 26px rgba(246, 236, 90, 0.25);
  overflow: hidden;
  animation: wheelPrizeFloat var(--prize-float-duration) ease-in-out infinite;
}

@keyframes wheelPrizeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--prize-float-distance)); }
}

/* Brillo holográfico recorriendo el sobre, más rápido/intenso cuanto
   mejor el premio (mismo truco que stickerShineSweep en stickers.css). */
.wheel-prize-visual::after {
  content: '';
  position: absolute;
  inset: -60% -20%;
  background: linear-gradient(115deg, transparent 35%, var(--prize-shine-color) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: wheelPrizeShineSweep var(--prize-shine-duration) ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes wheelPrizeShineSweep {
  0%, 12% { transform: translateX(-100%); }
  55%, 65% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.wheel-prize-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0c1a0a;
}

.wheel-prize-reward-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f6ec5a;
  color: #10230d;
  border: 2px solid #0c1a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', sans-serif;
  font-size: 0.9rem;
}

.wheel-prize-star {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f6ec5a;
  border: 2px solid #0c1a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #10230d;
}

.wheel-prize-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  padding: 1.2rem 1.5rem 1.5rem;
}

.wheel-prize-btn-dark,
.wheel-prize-btn-light {
  height: 46px;
  border-radius: 999px;
  font-family: 'Anton', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none;
}

.wheel-prize-btn-dark {
  background: linear-gradient(160deg, #f9e27a, #f5b301);
  color: #1c3115;
  border: none;
  font-weight: 900;
}

.wheel-prize-btn-dark:hover {
  filter: brightness(1.08);
  transform: none;
  box-shadow: none;
}

.wheel-prize-btn-light {
  background: rgba(255, 255, 255, 0.06);
  color: #f6ffe9;
  border: 3px solid rgba(255, 255, 255, 0.25);
}

.wheel-prize-btn-light:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.14);
}

/* A quien prefiere menos movimiento en pantalla no le imponemos las
   animaciones continuas (flote, brillo, aura, rayos, pulso de tarjeta) —
   mismo criterio que en stickers.css. Las animaciones de entrada (una
   sola vez, no en loop) se mantienen. */
@media (prefers-reduced-motion: reduce) {
  .wheel-prize-visual {
    animation: none;
  }
  .wheel-prize-visual::after {
    animation: none;
    display: none;
  }
  .wheel-prize-aura {
    animation: none;
    opacity: 0.85;
  }
  .wheel-prize-rays {
    animation: none;
  }
  .wheel-prize-modal[data-tier="grande"] .wheel-prize-card {
    animation: wheelPrizeIn 0.4s cubic-bezier(0.2, 0.85, 0.3, 1.25);
  }
}

@media (min-width: 760px) {
  .wheel-layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }

  .wheel-column {
    width: auto;
  }
}

@media (max-width: 480px) {
  .shop-card { padding: 1.4rem 0.8rem; }
  .wheel-wrapper { width: 300px; --wheel-radius: 159px; padding: 14px; }
  .wheel-center-btn { width: 64px; height: 64px; border-width: 3px; }
  .wheel-center-icon { font-size: 15px; }
  .wheel-center-count { min-width: 18px; height: 18px; font-size: 10px; top: -5px; right: -5px; }
  .wheel-center-text { font-size: 9px; }
  .wheel-pointer { width: 22px; height: 30px; top: -2px; }
  .wheel-pointer::after { width: 11px; height: 11px; top: -6px; }
  .wheel-bulb { width: 7px; height: 7px; }
  .prize-item { padding: 0.55rem 0.7rem; gap: 0.6rem; }
  .prize-emoji { font-size: 1.3rem; min-width: 1.6rem; }
  .wheel-prize-title { font-size: 1.55rem; }
  .wheel-prize-visual { max-width: 210px; }
  .wheel-prize-aura { width: min(var(--prize-glow-size), 300px); height: min(var(--prize-glow-size), 300px); }
  .wheel-prize-rays { width: 380px; height: 380px; }
}