@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  --felt-emerald: #128c50;
  --felt-vibrant: #17ad64;
  --felt-dark: #0c693a;
  --felt-deep: #053b20;
  --felt-bg: radial-gradient(circle at 65% 50%, #17ad64 0%, #128c50 45%, #0c693a 80%, #042e19 100%);
  
  --gold-primary: #ffd700;
  --gold-light: #fff2b2;
  --gold-dark: #d49a16;
  --gold-gradient: linear-gradient(135deg, #fff2b2 0%, #ffd700 45%, #d49a16 85%, #996e05 100%);
  --gold-border: 1.5px solid rgba(255, 215, 0, 0.55);
  --gold-glow: 0 0 25px rgba(255, 215, 0, 0.5);
  
  --panel-bg: rgba(8, 70, 40, 0.92);
  --panel-border: 1.5px solid rgba(255, 215, 0, 0.45);
  --panel-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  --panel-radius: 14px;
  
  --roulette-red: #ff2a3b;
  --roulette-black: #1a1e24;
  --roulette-green: #00e676;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #020617 linear-gradient(160deg, #0f172a 0%, #020617 100%);
  font-family: 'Outfit', sans-serif;
  color: #ffffff;
  user-select: none;
}

/* ==========================================================================
   PANTALLA DE CARGA / RUDA EN JUEGO
   ========================================================================== */
#loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
}

.containerG {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(4, 16, 11, 0.85);
  backdrop-filter: blur(12px);
  padding: 30px 50px;
  border-radius: 20px;
  border: var(--gold-border);
  box-shadow: 0 15px 40px rgba(0,0,0,0.8), var(--gold-glow);
}

.containerG .message {
  position: static;
  transform: none;
  font-family: 'Cinzel', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--gold-light);
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: 2px;
}

.containerG .gif-container img {
  max-width: 130px;
  filter: drop-shadow(0 0 10px rgba(240, 192, 90, 0.5));
}

/* ==========================================================================
   MODO GIRO (RULETA ACTIVA - NOCHE ESTRELLADA OSCURA DE ALTA DENSIDAD)
   ========================================================================== */
#ruleta {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
    /* Nebulosa y resplandor cósmico centrado tras la Noria */
    radial-gradient(circle at 50% 50%, rgba(30, 58, 138, 0.45) 0%, rgba(15, 23, 42, 0) 60%),
    radial-gradient(ellipse at 50% 20%, rgba(56, 189, 248, 0.16) 0%, rgba(2, 6, 23, 0) 55%),
    radial-gradient(circle at 15% 75%, rgba(139, 92, 246, 0.18) 0%, rgba(2, 6, 23, 0) 48%),
    radial-gradient(circle at 85% 25%, rgba(245, 158, 11, 0.14) 0%, rgba(2, 6, 23, 0) 42%),
    /* Campo denso de micro-estrellas fijas y distantes */
    radial-gradient(1.2px 1.2px at 20px 30px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 65px 110px, rgba(255, 240, 180, 0.95), rgba(0,0,0,0)),
    radial-gradient(1px 1px at 120px 40px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 190px 170px, rgba(186, 230, 253, 0.95), rgba(0,0,0,0)),
    radial-gradient(1.2px 1.2px at 290px 70px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.8px 1.8px at 390px 210px, #fef08a, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 480px 35px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 580px 150px, rgba(224, 231, 255, 0.9), rgba(0,0,0,0)),
    radial-gradient(1.2px 1.2px at 690px 80px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2.2px 2.2px at 800px 200px, #ffd700, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 910px 50px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.6px 1.6px at 1010px 165px, rgba(147, 197, 253, 0.9), rgba(0,0,0,0)),
    radial-gradient(1.2px 1.2px at 1120px 60px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 1230px 180px, #fef08a, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 1340px 95px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 1450px 215px, rgba(186, 230, 253, 0.9), rgba(0,0,0,0)),
    radial-gradient(1.2px 1.2px at 1560px 45px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.8px 1.8px at 1670px 155px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.2px 1.2px at 1780px 75px, #ffd700, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 1890px 140px, rgba(224, 231, 255, 0.9), rgba(0,0,0,0)),
    /* Cielo nocturno azul oscuro profundo */
    radial-gradient(ellipse at 50% 50%, #071329 0%, #030712 68%, #010308 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    240px 240px, 320px 320px, 200px 200px, 370px 370px,
    260px 260px, 340px 340px, 220px 220px, 400px 400px,
    230px 230px, 360px 360px, 210px 210px, 390px 390px,
    250px 250px, 350px 350px, 220px 220px, 410px 410px,
    270px 270px, 330px 330px, 210px 210px, 380px 380px,
    100% 100%;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Capa 1 de estrellas centelleantes brillantes */
#ruleta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(2px 2px at 50px 80px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2.8px 2.8px at 160px 220px, #ffd700, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 280px 100px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 430px 290px, #38bdf8, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 610px 120px, #fef08a, rgba(0,0,0,0)),
    radial-gradient(2.6px 2.6px at 780px 260px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 950px 95px, #ffd700, rgba(0,0,0,0)),
    radial-gradient(3.2px 3.2px at 1150px 270px, #c084fc, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 1340px 115px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2.8px 2.8px at 1550px 240px, #38bdf8, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 1730px 85px, #fef08a, rgba(0,0,0,0)),
    radial-gradient(2.5px 2.5px at 1910px 210px, #ffffff, rgba(0,0,0,0));
  background-size: 440px 440px;
  animation: twinkleStarsA 3.6s ease-in-out infinite alternate;
  pointer-events: none;
  opacity: 0.95;
}

/* Capa 2 de estrellas titilantes (ritmo desfasado) + estrellas de diamante */
#ruleta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(2.2px 2.2px at 95px 145px, #38bdf8, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 240px 320px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.8px 1.8px at 390px 65px, #fef08a, rgba(0,0,0,0)),
    radial-gradient(3.5px 3.5px at 540px 200px, #ffd700, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 720px 330px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2.8px 2.8px at 890px 145px, #38bdf8, rgba(0,0,0,0)),
    radial-gradient(3.2px 3.2px at 1070px 250px, #f472b6, rgba(0,0,0,0)),
    radial-gradient(1.8px 1.8px at 1260px 70px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2.8px 2.8px at 1440px 290px, #fef08a, rgba(0,0,0,0)),
    radial-gradient(3.5px 3.5px at 1650px 175px, #38bdf8, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 1840px 310px, #ffffff, rgba(0,0,0,0));
  background-size: 520px 520px;
  animation: twinkleStarsB 4.8s ease-in-out 1.2s infinite alternate;
  pointer-events: none;
  opacity: 0.88;
}

@keyframes twinkleStarsA {
  0% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0.6; transform: scale(1); }
}

@keyframes twinkleStarsB {
  0% { opacity: 0.85; transform: scale(1.01); }
  50% { opacity: 0.35; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.02); }
}

#ruletaContenedor {
  position: relative;
  width: min(85vh, 85vw);
  height: min(85vh, 85vw);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Halo luminoso ambiental festivo tras la rueda de la noria */
#ruletaContenedor::before {
  content: "";
  position: absolute;
  width: 108%;
  height: 108%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.22) 0%, rgba(255, 215, 0, 0.15) 45%, rgba(14, 165, 233, 0) 72%);
  filter: blur(32px);
  pointer-events: none;
  z-index: 1;
  animation: noriaGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes noriaGlowPulse {
  0% { opacity: 0.6; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0.75; transform: scale(1); }
}

#canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.85));
  will-change: transform;
  transform: translateZ(0);
  position: relative;
  z-index: 10;
}

#prizePointer {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  width: 36px;
  height: 50px;
  background-image: url("../images/pin.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 100;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9));
  transform-origin: 50% 16%;
  pointer-events: none;
  transition: transform 0.05s ease-out;
}

.animarPin {
  animation: pinTick 0.1s ease-out;
}

@keyframes pinTick {
  0% { transform: translateX(-50%) rotate(0deg); }
  28% { transform: translateX(-50%) rotate(-18deg); }
  65% { transform: translateX(-50%) rotate(5deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

#sorteo {
  position: absolute;
  bottom: 25px;
  right: 25px;
  background: var(--gold-gradient);
  color: #0b1e15;
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 800;
  padding: 10px 24px;
  border-radius: 30px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), var(--gold-glow);
  letter-spacing: 1px;
  z-index: 70;
}

/* Blindaje de visibilidad entre modos: si un contenedor tiene display: none, NADA en su interior puede mostrarse */
#info[style*="display: none"],
#info[style*="display:none"] {
  display: none !important;
}

#ruleta[style*="display: none"],
#ruleta[style*="display:none"] {
  display: none !important;
}

body.modo-pano,
#info {
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  padding: clamp(8px, 1.4vh, 16px) clamp(12px, 1.8vw, 26px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  background: 
    radial-gradient(circle at 65% 15%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(160deg, #5bb4e5 0%, #2b82ba 32%, #135d94 68%, #083c63 100%);
  background-size: cover;
}

.casino-layout {
  width: 100%;
  height: 100%;
  max-width: 1850px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(10px, 1.6vw, 22px);
  align-items: center;
  min-height: 0;
}

/* Panel Izquierdo: Estadísticas */
.stats-panel {
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 12px);
  justify-content: space-between;
  min-height: 0;
}

/* RELOJ & BARRA DE TIEMPO (NORIA) */
.timer-card {
  background: linear-gradient(170deg, rgba(10, 22, 40, 0.96) 0%, rgba(6, 14, 28, 0.98) 100%);
  border: 1.5px solid rgba(100, 116, 139, 0.5);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.05);
  border-radius: var(--panel-radius);
  padding: clamp(6px, 1vh, 10px) 18px;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.5vh, 7px);
  flex-shrink: 0;
}

.reloj {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(30px, 4.6vh, 46px);
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  letter-spacing: 6px;
  margin: 0;
  line-height: 1.05;
}

#contenedor {
  width: 100%;
  height: clamp(8px, 1.1vh, 12px);
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, 0.4);
}

#barra {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #00ff88, #00d05a);
  box-shadow: 0 0 14px rgba(0, 255, 136, 0.75);
  border-radius: 10px;
  transition: width 0.95s linear, background 0.5s ease;
  will-change: width;
}

/* CARDS DE ESTADÍSTICAS (NORIA AZUL MARINO) */
.stat-card {
  background: linear-gradient(170deg, rgba(10, 22, 40, 0.95) 0%, rgba(6, 14, 28, 0.98) 100%);
  border: 1.5px solid rgba(100, 116, 139, 0.5);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.05);
  border-radius: var(--panel-radius);
  padding: clamp(6px, 1vh, 10px) clamp(10px, 1vw, 14px);
}

.stat-header {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(13px, 1.6vh, 16px);
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
  margin-bottom: clamp(6px, 0.8vh, 10px);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stats de tipos (Rayadas / Lisas / Blanca — Noria de La Guaira) */
.stat-card-tipos {
  padding: clamp(10px, 1.5vh, 16px) clamp(12px, 1.5vw, 20px);
}

.stats-tipos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(8px, 1vw, 14px);
}

.stat-tipo-item {
  background: rgba(15, 30, 55, 0.6);
  border-radius: 10px;
  padding: clamp(8px, 1.2vh, 14px) clamp(6px, 0.8vw, 12px);
  text-align: center;
  border: 1px solid rgba(100, 116, 139, 0.4);
}

.stat-tipo-rayadas {
  border-color: rgba(255, 107, 107, 0.5);
}

.stat-tipo-lisas {
  border-color: rgba(78, 205, 196, 0.5);
}

.stat-tipo-blanca {
  border-color: rgba(255, 255, 255, 0.5);
}

.stat-tipo-label {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9px, 1.1vh, 11px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.stat-tipo-value {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(22px, 3vh, 32px);
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Sección inferior dividida: Últimos Números y Pagos */
.stats-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(8px, 1.2vw, 14px);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* TABLA DE ÚLTIMOS NÚMEROS */
.ultimos-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.ultimos-scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.5vh, 6px);
  min-height: 0;
  justify-content: space-between;
}

.ultimos-scroll::-webkit-scrollbar {
  width: 4px;
}

.ultimos-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.45);
  border-radius: 4px;
}

.ultimo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.42);
  border-radius: 6px;
  padding: clamp(4px, 0.7vh, 8px) 10px;
  border-left: 3.5px solid rgba(255, 215, 0, 0.6);
  flex-shrink: 0;
}

.ultimo-sorteo-tag {
  font-size: clamp(12px, 1.5vh, 14px);
  font-weight: 700;
  color: #a8cebd;
  letter-spacing: 0.5px;
}

.ultimo-ball {
  width: clamp(24px, 3.4vh, 30px);
  height: clamp(24px, 3.4vh, 30px);
  min-width: clamp(24px, 3.4vh, 30px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 1.7vh, 15px);
  font-weight: 900;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.8);
  border: 1.5px solid rgba(255,255,255,0.45);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.ultimo-ball.ball-red {
  background: radial-gradient(circle at 35% 30%, #ff5263 0%, #e6001a 55%, #8a0010 100%);
  border-color: rgba(255, 210, 210, 0.9);
  box-shadow: 0 3px 8px rgba(0,0,0,0.7), 0 0 8px rgba(255, 30, 50, 0.5);
}

.ultimo-ball.ball-black {
  background: radial-gradient(circle at 35% 30%, #4d5665 0%, #20242b 55%, #08090b 100%);
  border-color: rgba(210, 220, 230, 0.7);
  box-shadow: 0 3px 8px rgba(0,0,0,0.85);
}

.ultimo-ball.ball-green {
  background: radial-gradient(circle at 35% 30%, #35ff9c 0%, #00c853 55%, #006629 100%);
  border-color: #ffd700;
  color: #00220d !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.7), 0 0 10px rgba(0, 255, 120, 0.6);
}

/* CARD TODOS LOS NÚMEROS (0-36) EN ÚLTIMOS 300 SORTEOS */
.todos-numeros-card {
  padding-bottom: clamp(4px, 0.6vh, 6px);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.todos-numeros-scroll {
  overflow: hidden;
  padding-right: 0;
  flex: 1;
  min-height: 0;
}

.todos-numeros-grid,
.top16-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(2px, 0.4vh, 5px);
  padding: 1px 0;
}

.num-stat-item,
.top16-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  padding: clamp(2px, 0.35vh, 4px) clamp(4px, 0.5vw, 6px);
  border: 1px solid rgba(255, 215, 0, 0.28);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.num-stat-item:hover,
.top16-item:hover {
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(255, 215, 0, 0.85);
  background: rgba(255, 215, 0, 0.14);
}

.num-stat-ball,
.top16-ball {
  width: clamp(20px, 2.4vh, 26px);
  height: clamp(20px, 2.4vh, 26px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(10px, 1.3vh, 13px);
  font-weight: 900;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.num-stat-ball.ball-red,
.top16-ball.ball-red {
  background: radial-gradient(circle at 35% 30%, #ff5263 0%, #e6001a 55%, #8a0010 100%);
}

.num-stat-ball.ball-black,
.top16-ball.ball-black {
  background: radial-gradient(circle at 35% 30%, #4d5665 0%, #20242b 55%, #08090b 100%);
}

.num-stat-ball.ball-green,
.top16-ball.ball-green {
  background: radial-gradient(circle at 35% 30%, #35ff9c 0%, #00c853 55%, #006629 100%);
  color: #00220d !important;
  border-color: #ffd700;
}

.num-stat-hits,
.top16-hits {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1.5vh, 15px);
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Tabla de Pagos Noria */
.tabla-pagos-card {
  background: linear-gradient(170deg, rgba(10, 22, 40, 0.95) 0%, rgba(6, 14, 28, 0.98) 100%);
  border: 1.5px solid rgba(100, 116, 139, 0.5);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.05);
  border-radius: var(--panel-radius);
  padding: clamp(6px, 1vh, 10px) clamp(10px, 1vw, 14px);
}

.tabla-pagos-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pago-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: rgba(15, 30, 55, 0.6);
  border-radius: 6px;
  border: 1px solid rgba(100, 116, 139, 0.4);
}

.pago-tipo {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.pago-multiplicador {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.badge-agencia {
  background: linear-gradient(170deg, rgba(10, 22, 40, 0.95) 0%, rgba(6, 14, 28, 0.98) 100%);
  border: 1.5px solid rgba(100, 116, 139, 0.5);
  border-radius: 10px;
  padding: clamp(10px, 1.4vh, 14px) 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

.badge-agencia span {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(14px, 1.6vh, 16px);
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.badge-agencia strong {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(16px, 1.8vh, 18px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 2px;
}

/* Panel Derecho: Ruleta Estática Girada (GRANDE E IMPONENTE) */
.wheel-panel {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.wheel-frame {
  position: relative;
  width: min(87vh, 47vw);
  height: min(87vh, 47vw);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Banner de Jornada Finalizada (Arriba de la Noria Estática) */
.banner-jornada-noria {
  position: absolute;
  top: clamp(4px, 1vh, 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: linear-gradient(135deg, rgba(6, 14, 30, 0.98) 0%, rgba(12, 26, 52, 0.98) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 215, 0, 0.7);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 18px rgba(255, 215, 0, 0.35);
  border-radius: 30px;
  padding: clamp(6px, 0.9vh, 10px) clamp(16px, 1.6vw, 26px);
  pointer-events: none;
  animation: fadeInBanner 0.4s ease-out;
  white-space: nowrap;
}

.banner-jornada-content {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
}

.banner-jornada-icon {
  font-size: clamp(14px, 1.8vh, 18px);
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.7));
}

.banner-jornada-texts {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
}

.banner-jornada-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(12px, 1.6vh, 16px);
  font-weight: 800;
  color: #ffd700;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 215, 0, 0.45);
  text-transform: uppercase;
}

.banner-jornada-sub {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(10px, 1.2vh, 12px);
  font-weight: 600;
  color: #f1f5f9;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

@keyframes fadeInBanner {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-height: 720px) {
  .stats-panel {
    gap: 6px;
  }
}

@media (max-height: 600px) {
  #info {
    padding: 4px 8px;
  }
  .wheel-frame {
    width: min(82vh, 45vw);
    height: min(82vh, 45vw);
  }
  .stats-panel {
    overflow-y: auto;
    padding-right: 4px;
  }
}

#canvasStatic {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain;
  filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.9));
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  position: relative;
  z-index: 10;
}

#prizePointer2 {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  width: 32px;
  height: 45px;
  background-image: url("../images/pin.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 100;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.85));
  pointer-events: none;
}

/* ==========================================================================
   BADGE DEL CENTRO DE RULETA (ÚLTIMO NÚMERO Y TRACKING EN VIVO)
   ========================================================================== */
.wheel-center-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32%;
  height: 32%;
  border-radius: 50%;
  border: clamp(3px, 0.8vw, 5px) solid var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.95), inset 0 0 18px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, border-color 0.15s ease;
  background-color: #111417;
}

.center-number {
  font-family: 'Cinzel', serif;
  font-size: clamp(20px, 6vw, 48px);
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
  letter-spacing: -1px;
}

/* Centro para la ruleta de giro grande */
.wheel-center-live {
  width: 32%;
  height: 32%;
  border: clamp(3.5px, 1vw, 6px) solid var(--gold-primary);
  z-index: 60;
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.95), inset 0 0 24px rgba(0, 0, 0, 0.8);
}

.wheel-center-live .center-number {
  font-size: clamp(26px, 8vw, 66px);
}

/* ==========================================================================
   MODAL DE INICIAR SESIÓN (LA NORIA DE LA GUAIRA - ACERO NOCTURNO Y ORO)
   ========================================================================== */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: radial-gradient(circle at 50% 40%, rgba(30, 41, 59, 0.94) 0%, rgba(2, 6, 23, 0.98) 75%);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
}

.modal-casino {
  background: linear-gradient(165deg, #1e293b 0%, #0f172a 55%, #020617 100%);
  border: 2px solid var(--gold-primary);
  border-radius: 24px;
  box-shadow: 0 0 45px rgba(255, 215, 0, 0.35), 0 30px 90px rgba(0, 0, 0, 0.95), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  width: 90%;
  max-width: 440px;
  padding: 35px 32px 30px 32px;
  position: relative;
  text-align: center;
  backdrop-filter: blur(16px);
}

.modal-casino::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 4px;
  background: linear-gradient(90deg, #ff2a3b 0%, #ffd700 25%, #00e676 50%, #ffd700 75%, #ff2a3b 100%);
  border-radius: 4px;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.8);
}

.modal-casino .close {
  display: none;
}

.casino-brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 22px;
}

.login-brand-icon-wrap {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 2.5px solid var(--gold-primary);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.8);
  margin-bottom: 12px;
  background: radial-gradient(circle at 35% 35%, #1e293b 0%, #020617 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.login-brand-icon-wrap:hover {
  transform: scale(1.06);
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.65), 0 12px 28px rgba(0, 0, 0, 0.9);
}

.login-brand-logo-img-wrap {
  width: 150px;
  height: 150px;
  border-radius: 18px;
  border: none;
  background: transparent;
  box-shadow: none;
  margin-bottom: 8px;
}

.login-brand-logo-img-wrap:hover {
  transform: scale(1.04);
  box-shadow: none;
}

.login-noria-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 16px rgba(255, 215, 0, 0.35));
}

.casino-brand-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2.5px solid #ffd700;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 8px 20px rgba(0,0,0,0.7);
  margin-bottom: 12px;
  object-fit: contain;
  background: radial-gradient(circle at 35% 35%, #1f252d 0%, #0a0b0d 100%);
  transition: transform 0.4s ease;
}

.casino-brand-icon:hover {
  transform: rotate(20deg) scale(1.06);
}

.casino-logo {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  font-weight: 900;
  color: var(--gold-light);
  letter-spacing: 4px;
  margin-bottom: 10px;
  text-shadow: 0 0 25px rgba(255, 215, 0, 0.7), 0 2px 5px rgba(0,0,0,0.9);
}

/* Franja decorativa con colores vivos de ruleta */
.roulette-chips-strip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.5);
  padding: 7px 18px;
  border-radius: 25px;
  border: 1.5px solid rgba(255, 215, 0, 0.4);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}

.chip-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 8px rgba(0,0,0,0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #ffffff;
}

.chip-red {
  background: radial-gradient(circle at 35% 30%, #ff4b5c 0%, #e6001a 55%, #8a0010 100%);
  border-color: rgba(255, 220, 220, 0.9);
  box-shadow: 0 3px 10px rgba(230, 0, 26, 0.6);
}

.chip-black {
  background: radial-gradient(circle at 35% 30%, #474f5c 0%, #1e2229 55%, #08090b 100%);
  border-color: rgba(220, 225, 235, 0.8);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
}

.chip-green {
  background: radial-gradient(circle at 35% 30%, #26ff8f 0%, #00c853 55%, #006629 100%);
  border-color: #ffd700;
  width: 22px;
  height: 22px;
  box-shadow: 0 3px 12px rgba(0, 200, 83, 0.7);
}

.input-group-casino {
  position: relative;
  margin-bottom: 18px;
  text-align: left;
}

.input-group-casino label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-primary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
  width: auto;
  border-radius: 0;
  padding: 0;
  margin-left: 0;
}

.input-casino {
  width: 100%;
  background: rgba(3, 28, 16, 0.75);
  border: 1.5px solid rgba(255, 215, 0, 0.35);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 15px;
  font-family: 'Outfit', sans-serif;
  color: #ffffff;
  outline: none;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

.input-casino:focus {
  border-color: #ffd700;
  background: rgba(3, 34, 20, 0.95);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), inset 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* BOTÓN CASINO 3D DE LUJO CON SHIMMER ANIMADO */
.btn-casino {
  width: 100%;
  background: linear-gradient(180deg, #fff0a8 0%, #ffd700 35%, #d49a16 75%, #946905 100%);
  color: #120a00;
  font-family: 'Cinzel', serif;
  font-size: 16.5px;
  font-weight: 900;
  letter-spacing: 2.5px;
  padding: 15px 24px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 3.5px solid #573e02;
  border-radius: 14px;
  cursor: pointer;
  margin-top: 14px;
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5), 0 12px 30px rgba(0,0,0,0.7), inset 0 1.5px 2px rgba(255, 255, 255, 0.8);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.btn-casino::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -70%;
  width: 45%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: rotate(25deg);
  pointer-events: none;
}

.btn-casino:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 215, 0, 0.75), 0 15px 35px rgba(0,0,0,0.75);
  filter: brightness(1.08);
}

.btn-casino:hover::after {
  left: 130%;
  transition: left 0.75s ease-in-out;
}

.btn-casino:active {
  transform: translateY(1.5px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4), inset 0 2px 5px rgba(0,0,0,0.5);
  border-bottom-width: 1px;
}

.remember-casino {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 12px 0 18px 2px;
}

.remember-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: #e0f2ea;
  user-select: none;
}

.remember-label input[type="checkbox"] {
  accent-color: #ffd700;
  width: 17px;
  height: 17px;
  cursor: pointer;
  border-radius: 4px;
}

#msg {
  display: block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ff3b4e;
  text-shadow: 0 0 10px rgba(255, 59, 78, 0.6);
}

/* ==========================================================================
   PANTALLA DE LOGIN — TEMA "LA NORIA DE LA GUAIRA"
   Sobrescribe el tema casino. El login ya no es una mesa de ruleta:
   es el acceso a una noria de bolas (cabinas de colores, bolas rayadas/lisas).
   ========================================================================== */
.modal.modal-noria {
  /* Fondo: noche cerrada con luces de feria, sin verde esmeralda de casino */
  background:
    radial-gradient(circle at 50% 118%, rgba(56, 189, 248, 0.22) 0%, rgba(2, 6, 23, 0) 55%),
    radial-gradient(circle at 50% 42%, rgba(30, 41, 59, 0.92) 0%, rgba(2, 6, 23, 0.97) 70%),
    linear-gradient(180deg, #020617 0%, #0b1220 55%, #020617 100%);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: clamp(12px, 3vh, 30px) clamp(10px, 3vw, 20px);
  box-sizing: border-box;
}

/* Rejilla sutil de cascos de la noria girando al fondo */
.modal.modal-noria::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(148, 163, 184, 0.09) 0deg 9.7deg, transparent 9.7deg 19.4deg);
  mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 72%);
  animation: noria-fondo-giro 48s linear infinite;
}

@keyframes noria-fondo-giro {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.modal-noria-card {
  /* Acero nocturno + moldura dorada, nada de fieltro verde */
  background: linear-gradient(165deg, #1e293b 0%, #0f172a 55%, #020617 100%);
  border: 2px solid var(--gold-primary);
  border-radius: 22px;
  box-shadow:
    0 0 40px rgba(255, 215, 0, 0.28),
    0 28px 80px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -18px 40px rgba(0, 0, 0, 0.45);
  padding: clamp(22px, 4vh, 34px) clamp(18px, 4vw, 34px);
  width: min(100%, 420px);
  max-width: 100%;
  margin: auto;
  box-sizing: border-box;
  backdrop-filter: blur(18px);
}

/* Caja limpia: se anula la franja de arcoíris del borde superior
   (tanto la del tema noria como la heredada del tema casino). */
.modal-noria-card::before,
.modal-noria-card::after {
  content: none;
}

/* Antiguo rótulo del ruleta casino -> rótulo de noria */
.noria-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 5px;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.noria-logo {
  font-family: 'Cinzel', serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 3px;
  color: #f8fafc;
  text-shadow: 0 0 22px rgba(56, 189, 248, 0.55), 0 2px 5px rgba(0, 0, 0, 0.95);
  margin-bottom: 14px;
}

.noria-logo-place {
  font-size: 21px;
  letter-spacing: 4px;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cinco bolas reales de la noria. La blanca (0) va al centro, sin número.
   Colores taken de BALL_COLORS en ruleta.js:
   rayadas 1-18 · lisas 19-36 · blanca 0. */
.noria-balls-strip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(2, 6, 23, 0.72);
  padding: 9px 20px;
  border-radius: 26px;
  border: 1.5px solid rgba(255, 215, 0, 0.35);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.75);
}

.noria-ball {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.8), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
  display: inline-block;
}

/* Esfera: brillo especular arriba a la izquierda */
.noria-ball::after {
  content: '';
  position: absolute;
  top: 17%;
  left: 22%;
  width: 32%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

/* Lisa (19-36): bola de color plano */
.noria-ball-lisa {
  background: var(--bola-color, #e74c3c);
  border: 1.5px solid rgba(0, 0, 0, 0.4);
}

/* Rayada (1-18): banda de color sobre cuerpo blanco */
.noria-ball-rayada {
  background: #f8fafc;
  border: 1.5px solid rgba(15, 23, 42, 0.35);
  background-image: linear-gradient(
    180deg,
    #f8fafc 0%, #f8fafc 28%,
    var(--bola-color, #2e5cb8) 30%,
    var(--bola-color, #2e5cb8) 70%,
    #f8fafc 72%, #f8fafc 100%
  );
}

/* Blanca (0): la del centro, la única sin número */
.noria-ball-blanca {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f1f5f9 45%, #cbd5e1 78%, #94a3b8 100%);
  border: 2px solid rgba(255, 215, 0, 0.85);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.55), 0 3px 9px rgba(0, 0, 0, 0.8),
              inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}

/* Campos del formulario con estética noria (acero + oro) */
.modal-noria .input-group-casino label {
  color: var(--gold-primary);
}

.modal-noria .input-casino {
  background: rgba(2, 6, 23, 0.78);
  border: 1.5px solid rgba(148, 163, 184, 0.4);
  color: #f8fafc;
}

.modal-noria .input-casino:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.18), 0 0 18px rgba(255, 215, 0, 0.28);
}

.modal-noria .input-casino::placeholder {
  color: #64748b;
}

.modal-noria .btn-casino {
  background: var(--gold-gradient);
  color: #1a1206;
  box-shadow: 0 8px 24px rgba(255, 215, 0, 0.3);
}

.modal-noria .btn-casino:hover {
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .modal.modal-noria::before { animation: none; }
}

/* ==========================================================================
   POPUP DE CABINA GANADORA (LA NORIA DE LA GUAIRA — SIN CUADRO EXTERIOR)
   ========================================================================== */
.swal2-popup.swal-noria-cabin-win {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 95vw !important;
  overflow: visible !important;
  animation: cabinPopIn 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.swal2-popup.swal-noria-cabin-win .swal2-html-container {
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

.swal2-popup.swal-noria-cabin-win .swal2-timer-progress-bar,
.swal2-popup.swal-noria-cabin-win .swal2-actions {
  display: none !important;
}

@keyframes cabinPopIn {
  0% { transform: scale(0.8) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.swal2-popup.swal-noria-cabin-win.swal2-hide {
  animation: cabinPopOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

@keyframes cabinPopOut {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.65) translateY(-20px); opacity: 0; }
}

.winner-cabin-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.winner-cabin-header {
  text-align: center;
  margin-bottom: 2px;
}

.winner-cabin-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: rgba(255, 215, 0, 0.85);
  text-transform: uppercase;
}

.winner-cabin-title {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 2px;
  text-shadow: 0 0 16px rgba(255, 215, 0, 0.6), 0 2px 4px rgba(0,0,0,0.8);
}

.winner-cabin-stage {
  position: relative;
  width: 340px;
  height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
  animation: cabinSway 3s ease-in-out infinite alternate;
  transform-origin: 50% 20px;
}

@keyframes cabinSway {
  0% { transform: rotate(-1.5deg); }
  100% { transform: rotate(1.5deg); }
}

.winner-cabin-footer {
  margin-top: 4px;
  display: flex;
  justify-content: center;
}

.winner-cabin-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 24px;
  border-radius: 50px;
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1.5px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

.winner-cabin-badge.badge-rayada {
  background: linear-gradient(135deg, rgba(255, 75, 92, 0.95), rgba(180, 20, 40, 0.95));
  border: 2px solid #ff6b6b;
  color: #ffffff;
  box-shadow: 0 0 25px rgba(255, 75, 92, 0.6);
}

.winner-cabin-badge.badge-lisa {
  background: linear-gradient(135deg, rgba(30, 144, 255, 0.95), rgba(15, 70, 180, 0.95));
  border: 2px solid #4ea8de;
  color: #ffffff;
  box-shadow: 0 0 25px rgba(30, 144, 255, 0.6);
}

.winner-cabin-badge.badge-blanca {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(200, 210, 225, 0.98));
  border: 2px solid #ffd700;
  color: #0f172a;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);
}

.winner-cabin-badge-sep {
  opacity: 0.6;
  font-size: 14px;
}

/* ==========================================================================
   RESPONSIVIDAD MÓVIL INTEGRAL — LOGIN, PAÑO DIURNO Y NOCHE GIRATORIA
   ========================================================================== */

/* --- 1. TABLETS Y MÓVILES (<= 1024px) --- */
@media (max-width: 1024px) {
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  
  /* PAÑO DIURNO EN MÓVIL */
  #info {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: clamp(10px, 2vh, 18px) clamp(8px, 2vw, 16px) !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .casino-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 12px !important;
    margin: 0 auto !important;
  }

  /* Usamos display: contents para intercalar el reloj, la noria y las estadísticas */
  .stats-panel {
    display: contents !important;
  }

  /* 1. RELOJ Y CONTADOR EN LA CIMA */
  .timer-card {
    order: 1 !important;
    width: 100% !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
  }

  .reloj {
    font-size: clamp(34px, 8vw, 44px) !important;
    letter-spacing: 4px !important;
  }

  /* 2. LA NORIA ESTÁTICA */
  .wheel-panel {
    order: 2 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px 0 !important;
  }

  .wheel-frame {
    width: min(84vw, 360px) !important;
    height: min(84vw, 360px) !important;
    max-width: 360px !important;
    max-height: 360px !important;
    position: relative !important;
  }

  .wheel-center-badge {
    width: 32% !important;
    height: 32% !important;
    border-width: 4px !important;
  }

  .wheel-center-badge .center-number {
    font-size: clamp(22px, 8vw, 38px) !important;
  }

  /* 3. ESTADÍSTICAS POR TIPO (RAYADAS / LISAS / BLANCA) */
  .stat-card-tipos {
    order: 3 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 4. BLOQUE INFERIOR: ÚLTIMOS NÚMEROS + 300 TIRAJES + PAGOS + AGENCIA */
  .stats-bottom-grid {
    order: 4 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .ultimos-container {
    width: 100% !important;
    height: auto !important;
    max-height: 280px !important;
  }

  .ultimos-scroll {
    max-height: 220px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .todos-numeros-card {
    width: 100% !important;
  }

  .todos-numeros-scroll {
    max-height: 260px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tabla-pagos-card {
    width: 100% !important;
  }

  #agencia {
    order: 5 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 4px !important;
  }
}

/* --- 2. TELÉFONOS EN VERTICAL (<= 600px) --- */
@media (max-width: 600px) {
  /* LOGIN EN MÓVIL */
  .login-brand-icon-wrap {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 8px !important;
  }

  .login-noria-svg {
    width: 58px !important;
    height: 58px !important;
  }

  .noria-logo {
    font-size: 24px !important;
    margin-bottom: 8px !important;
    letter-spacing: 2px !important;
  }

  .noria-eyebrow {
    font-size: 9.5px !important;
    letter-spacing: 3px !important;
    margin-bottom: 4px !important;
  }

  .casino-brand-wrap {
    margin-bottom: 14px !important;
  }

  .input-casino {
    padding: 11px 14px !important;
    font-size: 16px !important; /* Evita zoom forzado en iOS */
    min-height: 44px !important;
  }

  .btn-casino {
    padding: 13px !important;
    font-size: 15px !important;
    min-height: 46px !important;
  }

  /* NOCHE GIRATORIA EN MÓVIL */
  #ruletaContenedor {
    width: min(92vw, 75vh) !important;
    height: min(92vw, 75vh) !important;
  }

  #prizePointer,
  #prizePointer2 {
    width: 26px !important;
    height: 36px !important;
    top: -4px !important;
  }

  #sorteo {
    position: absolute !important;
    bottom: clamp(12px, 3vh, 22px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    font-size: clamp(14px, 4vw, 17px) !important;
    padding: 6px clamp(16px, 5vw, 24px) !important;
    border-radius: 25px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), var(--gold-glow) !important;
  }

  /* POPUP CELEBRACIÓN DE CABINA GANADORA EN MÓVIL */
  .winner-cabin-stage {
    width: min(300px, 86vw) !important;
    height: calc(min(300px, 86vw) * (390 / 340)) !important;
  }

  #winnerCabinCanvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .winner-cabin-badge {
    font-size: clamp(13px, 3.8vw, 15px) !important;
    padding: 6px clamp(14px, 4vw, 20px) !important;
    gap: 6px !important;
  }

  /* OVERLAY NORIA GIRANDO */
  .en-juego-box {
    padding: 24px 18px !important;
    width: min(92vw, 380px) !important;
  }

  .en-juego-noria-svg {
    width: 76px !important;
    height: 76px !important;
  }

  .en-juego-title {
    font-size: 20px !important;
    letter-spacing: 1.5px !important;
  }

  .en-juego-desc {
    font-size: 12.5px !important;
  }

  /* TABLA 300 TIRAJES 5 COLUMNAS EN MÓVIL */
  .todos-numeros-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 3px !important;
  }

  .num-stat-item {
    padding: 2px 3px !important;
  }

  .num-stat-ball {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }

  .num-stat-hits {
    font-size: 11px !important;
  }
}

/* --- 3. MÓVILES EN HORIZONTAL / LANDSCAPE (max-height <= 550px) --- */
@media (max-height: 550px) and (orientation: landscape) {
  /* PAÑO EN HORIZONTAL */
  #info {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    padding: 6px 12px !important;
  }

  .casino-layout {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr !important;
    height: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  .stats-panel {
    display: flex !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-right: 4px !important;
  }

  .wheel-panel {
    order: unset !important;
    height: 100% !important;
  }

  .wheel-frame {
    width: min(84vh, 44vw) !important;
    height: min(84vh, 44vw) !important;
  }

  /* NOCHE GIRATORIA EN HORIZONTAL */
  #ruletaContenedor {
    width: min(78vh, 78vw) !important;
    height: min(78vh, 78vw) !important;
  }

  #sorteo {
    bottom: 8px !important;
    right: 14px !important;
    left: auto !important;
    transform: none !important;
    font-size: 13px !important;
    padding: 4px 12px !important;
  }

  /* LOGIN EN HORIZONTAL */
  .modal-noria-card {
    padding: 16px 24px !important;
  }

  .login-brand-icon-wrap {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 6px !important;
  }

  .login-noria-svg {
    width: 42px !important;
    height: 42px !important;
  }

  .noria-logo {
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }
}

/* ==========================================================================
   OVERLAY: NORIA GIRANDO (CUANDO SE ENTRA DURANTE EL GIRO)
   ========================================================================== */
.en-juego-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
  pointer-events: all;
}

.en-juego-box {
  background: linear-gradient(165deg, #1e293b 0%, #0f172a 55%, #020617 100%);
  border: 2px solid var(--gold-primary);
  border-radius: 22px;
  padding: 35px 50px;
  text-align: center;
  box-shadow: 
    0 0 40px rgba(255, 215, 0, 0.28),
    0 25px 70px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  max-width: 90vw;
  backdrop-filter: blur(16px);
}

.en-juego-icon {
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.en-juego-noria-svg {
  width: clamp(85px, 14vh, 115px);
  height: clamp(85px, 14vh, 115px);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 20px rgba(56, 189, 248, 0.6));
}

.noria-spin-wheel {
  transform-origin: 60px 55px;
  animation: spinNoriaSvg 7s linear infinite;
}

@keyframes spinNoriaSvg {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.en-juego-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.en-juego-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(20px, 3vh, 28px);
  font-weight: 900;
  color: #ffd700;
  letter-spacing: 2.5px;
  margin-bottom: 8px;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.8);
}

.en-juego-desc {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(13px, 1.8vh, 15px);
  color: #cbd5e1;
  letter-spacing: 0.5px;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}