/**
 * ESTILOS DE LA RULETA DE LA FORTUNA Y BOOSTERS
 */

/*
 * TODO TIENE QUE CABER SIN DESPLAZARSE.
 *
 * Medido a 375x812 con dos pociones activas: el contenido sumaba 727 px en un
 * marco de 660, así que el BOTÓN DE GIRAR —lo único que el jugador viene a
 * pulsar— quedaba 71 px por debajo del pliegue. Y no era cosa del móvil
 * pequeño: con `min-height:100%` y una rueda de 340 px fijos, cualquier
 * pantalla algo corta lo empujaba fuera.
 *
 * El arreglo es de reparto, no de recortar: la columna se ajusta a la altura
 * disponible (`height:100%`) y la RUEDA es lo único elástico. Cabecera, racha y
 * controles piden su tamaño; lo que sobra se lo queda la rueda, y si falta,
 * encoge. El botón nunca puede salirse porque ya no hay nada que lo empuje.
 */
.roulette-screen-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 14px calc(8px + var(--safe-b, 0px));
  max-width: 440px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* 1. Cabecera AAA: Corona, Estandarte y Lazos */
.rl-header-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  margin-top: 2px;
}

.rl-crown-top {
  position: relative;
  z-index: 10;
  margin-bottom: -10px;
  width: 36px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85));
}

.rl-crown-top svg {
  width: 32px;
  height: 26px;
}

.rl-banner-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-ribbon-tail {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 38px;
  z-index: 1;
}

.rl-ribbon-tail.left {
  left: 2px;
  background: linear-gradient(135deg, #1E3A8A 0%, #0B132B 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 35% 50%);
  border: 1.5px solid #F59E0B;
  border-right: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}

.rl-ribbon-tail.right {
  right: 2px;
  background: linear-gradient(225deg, #1E3A8A 0%, #0B132B 100%);
  clip-path: polygon(0% 0%, 100% 0%, 65% 50%, 100% 100%, 0% 100%);
  border: 1.5px solid #F59E0B;
  border-left: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}

.rl-banner-frame {
  position: relative;
  z-index: 2;
  width: calc(100% - 32px);
  max-width: 380px;
  padding: 6px 12px 7px;
  background: linear-gradient(180deg, #0d1b2a 0%, #1b263b 50%, #0d1b2a 100%);
  border: 2px solid #F59E0B;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(245, 158, 11, 0.4), inset 0 0 2px #FEF08A;
  text-align: center;
  box-sizing: border-box;
}

.rl-banner-frame.super-active {
  background: linear-gradient(180deg, #2e1065 0%, #3b0764 50%, #1e1b4b 100%);
  border-color: #C084FC;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.6), inset 0 0 12px rgba(192, 132, 252, 0.4);
}

.rl-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rl-banner-dice {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.rl-main-title {
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0;
  letter-spacing: 1px;
  color: #FFFBEB;
  text-transform: uppercase;
  background: linear-gradient(180deg, #FFFBEB 0%, #FDE047 35%, #F59E0B 75%, #B45309 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9));
  line-height: 1.15;
}

.rl-banner-frame.super-active .rl-main-title {
  background: linear-gradient(180deg, #FFFFFF 0%, #E9D5FF 35%, #A855F7 75%, #581C87 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.8));
}

.rl-sub-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94A3B8;
  margin: 2px 0 0;
  letter-spacing: 0.4px;
}

/* 2. Pildora de Pociones Activas */
.rl-boosters-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
}

.rl-booster-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 16px;
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(56, 189, 248, 0.15);
  max-width: 94%;
}

.rl-pill-shield {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38BDF8;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8));
}

.rl-pill-text {
  font-size: 0.73rem;
  font-weight: 700;
  color: #E2E8F0;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-boosters-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0;
  width: 100%;
}

.rl-booster-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.rl-b-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-b-info {
  display: flex;
  flex-direction: column;
}

.rl-b-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #F4F4F5;
}

.rl-b-time {
  font-size: 0.68rem;
  color: #38BDF8;
}

/* 3. Medidor de Racha */
.rl-streak-box {
  width: 100%;
  flex: 0 0 auto;
}

.rl-streak-meter {
  padding: 6px 12px 8px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 15, 30, 0.95) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.rl-streak-meter.super-meter {
  border-color: #A855F7;
  background: linear-gradient(180deg, rgba(30, 12, 46, 0.95) 0%, rgba(15, 7, 24, 0.95) 100%);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.4);
}

.rl-streak-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.rl-streak-title {
  color: #F8FAFC;
}

.rl-streak-title b {
  color: #FBBF24;
  font-weight: 900;
}

.rl-streak-sub {
  color: #94A3B8;
  font-size: 0.7rem;
}

.rl-streak-track {
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-streak-groove {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

.rl-streak-progress {
  position: absolute;
  left: 6px;
  height: 6px;
  background: linear-gradient(90deg, #F59E0B, #FEF08A);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
  transition: width 0.3s ease;
}

.rl-streak-meter.super-meter .rl-streak-progress {
  background: linear-gradient(90deg, #A855F7, #00F0FF);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
}

.rl-streak-nodes {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  z-index: 2;
  box-sizing: border-box;
}

.rl-streak-node {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1E293B;
  border: 2px solid #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 900;
  color: #94A3B8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: all 0.2s ease;
}

.rl-streak-node.filled {
  background: linear-gradient(135deg, #F59E0B, #B45309);
  border-color: #FEF08A;
  color: #FFFBEB;
  box-shadow: 0 0 10px #F59E0B;
}

.rl-streak-node.super-node {
  width: 26px;
  height: 26px;
  border: 2px solid #FEF08A;
  background: #0F172A;
  color: #FBBF24;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.rl-streak-node.super-node.filled {
  background: linear-gradient(135deg, #A855F7, #6D28D9);
  border-color: #E9D5FF;
  color: #FFFFFF;
  box-shadow: 0 0 16px #A855F7, 0 0 24px rgba(168, 85, 247, 0.6);
}

/* 4. Canvas de la Ruleta y Elementos de Montura */
.rl-wheel-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 330px;
  aspect-ratio: 1 / 1;
  width: auto;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px auto 0;
}

.rl-canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.85));
  z-index: 2;
}

/* Aguja superior dorada con rubi */
.rl-needle {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 38px;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9));
  transition: transform 0.05s ease;
}

.rl-needle-arrow {
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 30px solid #F59E0B;
  margin: 0 auto;
  position: relative;
  filter: drop-shadow(0 0 3px #FEF08A);
}

.rl-needle-arrow::before {
  content: '';
  position: absolute;
  top: -34px;
  left: -9px;
  width: 18px;
  height: 8px;
  background: linear-gradient(180deg, #FEF08A, #D97706);
  border-radius: 3px;
  border: 1px solid #FFFBEB;
}

.rl-needle-ruby {
  position: absolute;
  top: -24px;
  left: -6px;
  width: 12px;
  height: 14px;
  background: linear-gradient(135deg, #FFA4A4 0%, #EF4444 45%, #991B1B 100%);
  clip-path: polygon(50% 0%, 100% 40%, 50% 100%, 0% 40%);
  border: 1px solid #FEE2E2;
  box-shadow: 0 0 8px #EF4444;
}

/* Centro: Diamante Azul brillante */
.rl-hub {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-hub-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #D97706 0%, #78350F 70%, #451A03 100%);
  border: 2.5px solid #FEF08A;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.6), inset 0 0 8px rgba(254, 240, 138, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-hub-diamond {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #E0F2FE 0%, #38BDF8 35%, #0284C7 70%, #1E40AF 100%);
  clip-path: polygon(50% 0%, 100% 30%, 80% 100%, 20% 100%, 0% 30%);
  box-shadow: 0 0 14px #00F0FF;
  border: 1px solid #BAE6FD;
}

/* Pedestal inferior con iluminacion cian */
.rl-pedestal {
  position: absolute;
  bottom: -10px;
  width: 130px;
  height: 26px;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-pedestal-mount {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
  border: 2px solid #D97706;
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-pedestal-slit {
  width: 68%;
  height: 4px;
  background: #00F0FF;
  border-radius: 2px;
  box-shadow: 0 0 10px #00F0FF, 0 0 20px #00F0FF;
}

/* 5. Controles y Boton CTA Esmeralda */
.rl-controls {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.rl-cta-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rl-cta-btn {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 54px;
  border: 2.5px solid #FEF08A;
  border-radius: 12px;
  background: linear-gradient(180deg, #10B981 0%, #059669 45%, #047857 85%, #064E3B 100%);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.65), inset 0 0 12px rgba(167, 243, 208, 0.5), 0 6px 16px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  padding: 0 16px;
  outline: none;
  box-sizing: border-box;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.rl-cta-btn:active {
  transform: scale(0.97);
}

.rl-cta-btn.super-spin {
  background: linear-gradient(180deg, #A855F7 0%, #7C3AED 45%, #5B21B6 85%, #3B0764 100%);
  border-color: #FDE047;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.7), inset 0 0 14px rgba(233, 213, 255, 0.5);
}

.rl-cta-btn.disabled {
  filter: grayscale(0.8) brightness(0.65);
  cursor: not-allowed;
}

.rl-cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 100%;
}

.rl-cta-dice {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.rl-cta-dice.spinning {
  animation: spin 1s linear infinite;
}

.rl-cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.rl-cta-title {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #FFFFFF;
  text-shadow: 0 2px 4px #000, 0 0 10px rgba(254, 240, 138, 0.7);
  line-height: 1.1;
}

.rl-cta-sub {
  font-size: 0.7rem;
  font-weight: 800;
  color: #FEF08A;
  letter-spacing: 0.6px;
  line-height: 1.1;
  text-shadow: 0 1px 2px #000;
}

/* Lema inferior con corona */
.rl-footer-motto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  opacity: 0.85;
}

.rl-motto-crown-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 180px;
}

.rl-motto-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #D97706, transparent);
}

.rl-motto-crown {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F59E0B;
}

.rl-motto-text {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  color: #94A3B8;
  text-shadow: 0 1px 2px #000;
  text-transform: uppercase;
}

/* Modal de Recompensa de Ruleta */
.rl-reward-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 10px 0;
}

.rl-reward-icon-box {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: 3px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.rl-reward-ico {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-reward-title {
  font-size: 1.3rem;
  font-weight: 900;
  margin: 0;
}

.rl-reward-desc {
  font-size: 0.88rem;
  color: #D4D4D8;
  margin: 0;
}

/* Botón flotante de Ruleta en la Pantalla Base */
/*
 * ATAJOS FLOTANTES DE LA BASE: RULETA · LAB ADN · BESTIAS.
 *
 * Estaban apilados en `top: 14 / 56 / 98`, o sea en la franja 14–127, que es
 * justo donde viven el rótulo de la isla (y 8–47) y la cola de construcción.
 * Resultado: tapaban el nombre de la base y el aviso de la obra en curso con su
 * botón de acelerar.
 *
 * Medida la escena a 345x462: los edificios ocupan x 40–219, así que la banda
 * derecha (x 225–345) está libre de arriba abajo. Lo que sobraba no era el
 * sitio, era la ALTURA.
 *
 * Se centran verticalmente con `calc(50% ± …)` y no con valores fijos: así la
 * pila queda centrada en cualquier alto de pantalla, y sigue despejando tanto
 * la cabecera como el panel inferior (y 329+) en un móvil corto.
 *
 * Los tres comparten este anclaje. Si se añade un cuarto atajo, va aquí y se
 * recorren los desplazamientos: son 42 px por fila.
 */
.btn-base-roulette {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(18, 24, 38, 0.88);
  border: 1.5px solid #F59E0B;
  border-radius: 20px;
  color: #FFD700;
  font-size: 0.82rem;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(245, 158, 11, 0.35);
  cursor: pointer;
  z-index: 40;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-base-roulette:active {
  transform: scale(0.94);
}

/*
 * INSIGNIA «¡GRATIS!» — ENCIMA del botón, no en su esquina.
 *
 * Estaba anclada arriba a la derecha (`top:-6px; right:-6px`), donde se comía
 * el borde del propio botón y quedaba medio fuera del atajo. Centrada por
 * encima se lee entera y de un vistazo, que es todo su trabajo: avisar de que
 * hay un giro esperando.
 *
 * `left:50%` + `translateX(-50%)` en vez de `right`: el botón cambia de ancho
 * con el texto y con el idioma, y anclarla a un lado la descentraría en cuanto
 * cambie una letra.
 *
 * OJO con la animación: `pulse-free-badge` escribe `transform`, así que tiene
 * que arrastrar el `translateX(-50%)` en cada fotograma o la insignia salta a
 * la derecha al empezar el pulso. Es el motivo de que el keyframe no sea un
 * `scale` a secas.
 */
.base-view > .rl-badge-free {
  position: absolute;
  /*
   * Anclada a los MISMOS valores que el atajo (`holo.css`: 78 px, y 66 px en
   * pantallas cortas), menos su propio alto. Si se mueve la pila de atajos hay
   * que mover también estos dos números — están juntos a propósito, y por eso
   * la variable lleva el mismo nombre que el bloque que la usa.
   */
  --atajo-top: 78px;
  top: calc(var(--atajo-top) - 25px);
  /* Centrada sobre el atajo: arranca en `left:10px` y las tres píldoras
     comparten `min-width:104px`, así que su centro cae a 62 px. */
  left: 62px;
  transform: translateX(-50%);
  z-index: 13;
  background: #EF4444;
  color: #FFF;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: .3px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid #FFF;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  animation: pulse-free-badge 1.5s infinite;
}

/* El `translateX(-50%)` va en los DOS fotogramas: sin él, la insignia se
   descentraría de golpe al arrancar el pulso (ver la nota de arriba). */
/* Pantallas cortas: la pila de atajos sube a 66 px (`holo.css`), y la
   insignia con ella. */
@media (max-height: 700px){
  .base-view > .rl-badge-free{ --atajo-top: 66px; }
}

/* El escalado se queda (barato); el resplandor pasa a un pseudo-elemento que
   sólo anima `opacity`. Antes el `box-shadow` aparecía a mitad de animación y
   repintaba la insignia en cada fotograma. El `translateX(-50%)` se arrastra en
   todos los fotogramas clave: sin él, `transform` anula el centrado. */
@keyframes pulse-free-badge {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.18); }
}
.rl-badge-free::after{
  content:""; position:absolute; inset:0;
  border-radius:inherit; pointer-events:none;
  box-shadow:0 0 10px #EF4444;
  animation:rl-badge-glow 1.5s infinite;
}
@keyframes rl-badge-glow{ 0%,100%{ opacity:0 } 50%{ opacity:1 } }

/* Banner de Ruleta en Pantalla de Campaña / Tienda */
.roulette-promo-card {
  width: 100%;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(30, 20, 48, 0.9), rgba(15, 23, 42, 0.9));
  border: 1.5px solid #F59E0B;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.roulette-promo-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.roulette-promo-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFD700;
}

.roulette-promo-info h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 900;
  color: #FFD700;
}

.roulette-promo-info p {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: #A1A1AA;
}

/* =========================================================================
   MODO COMPACTO POR ALTURA
   =========================================================================
   La pantalla tiene cinco bloques y sólo uno elástico (la rueda). En un móvil
   corto —o en modo SÚPER, cuyo título ocupa dos líneas y una franja más alta—
   los cuatro fijos se comen el marco entero: medido a 360x600, el contenido
   sumaba 513 px en 448 disponibles y el botón de girar quedaba fuera.

   Encoger sólo la rueda no bastaba: llegaba a su mínimo y el desbordamiento
   seguía. Así que por debajo de 740 px de alto se aprieta TODO lo fijo —tipos,
   rellenos y huecos— y se retira lo prescindible (el subtítulo explicativo,
   que se lee una vez en la vida).

   El botón nunca se toca: es lo único que el jugador viene a pulsar.
   ========================================================================= */
@media (max-height: 740px) {
  .roulette-screen-container { gap: 6px; padding: 6px 12px calc(8px + var(--safe-b, 0px)); }

  /* El subtítulo explica algo que se entiende solo viendo la rueda. */
  .rl-sub-title { display: none; }
  .rl-title-box { padding: 6px 12px; }
  .rl-main-title { font-size: 1.05rem; }

  /* Pociones: chip más bajo, sin dejar de leerse. */
  .rl-booster-chip { padding: 3px 9px; gap: 6px; }
  .rl-b-name { font-size: .7rem; }
  .rl-b-time { font-size: .65rem; }
  .rl-booster-empty { padding: 3px 8px; font-size: .72rem; }
  .rl-boosters-list { padding: 0; }

  /* Medidor de racha. */
  .rl-streak-meter { padding: 6px 10px; }
  .rl-streak-label { font-size: .72rem; margin-bottom: 5px; }
  .rl-streak-track { height: 11px; }
  .rl-streak-node { width: 18px; height: 18px; font-size: .6rem; }

  /* El eje central de la rueda encoge con ella. */
  .rl-hub { width: 44px; height: 44px; font-size: 1.05rem; }
  .rl-needle { width: 22px; height: 28px; }
  .rl-needle-tip { border-left-width: 9px; border-right-width: 9px; border-top-width: 20px; }

  .rl-btn-title { font-size: 1rem; }
  .rl-btn-sub { font-size: .66rem; }
}

/* -------------------------------------------------------------------------
   DIRECCIÓN ARTÍSTICA · RULETA DE LA FORTUNA
   Capas ligeras de CSS para que la pantalla tenga el acabado de panel de
   máquina premium: metal oscuro, cantos dorados, prismas azules y una rueda
   con profundidad. La geometría sigue estando en canvas y sólo se anima
   transform/opacity.
   ------------------------------------------------------------------------- */
.roulette-screen-container {
  position: relative;
  gap: 9px;
  padding: 10px 14px calc(14px + var(--safe-b, 0px));
  background:
    radial-gradient(ellipse at 50% 44%, rgba(28, 47, 91, .34), transparent 54%),
    linear-gradient(180deg, rgba(3, 7, 18, .78), rgba(1, 3, 10, .96));
  border: 1px solid rgba(90, 157, 234, .22);
  box-shadow: inset 0 0 42px rgba(16, 54, 113, .3), 0 16px 44px rgba(0,0,0,.42);
  overflow: hidden;
}
.roulette-screen-container::before,
.roulette-screen-container::after {
  content: '';
  position: absolute;
  pointer-events: none;
  left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(66, 179, 255, .75), transparent);
  box-shadow: 0 0 12px rgba(66, 179, 255, .55);
  opacity: .55;
}
.roulette-screen-container::before { top: 0; }
.roulette-screen-container::after { bottom: 0; }

.rl-title-box {
  position: relative;
  padding: 11px 18px 10px;
  border-radius: 0;
  clip-path: polygon(3% 0, 97% 0, 100% 24%, 100% 76%, 97% 100%, 3% 100%, 0 76%, 0 24%);
  background: linear-gradient(180deg, rgba(49, 47, 35, .96), rgba(9, 14, 27, .97) 64%, rgba(23, 17, 10, .98));
  border: 1px solid rgba(255, 210, 96, .82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -8px 18px rgba(0,0,0,.5), 0 0 18px rgba(255,180,48,.2);
}
.rl-title-box::after {
  content: '';
  position: absolute; inset: 3px 6%; pointer-events: none;
  border-top: 1px solid rgba(255, 239, 178, .58);
  border-bottom: 1px solid rgba(255, 190, 58, .32);
}
.rl-title-box::before {
  content: '♛';
  position: absolute; left: 50%; top: -15px; z-index: 2;
  transform: translateX(-50%);
  padding: 0 10px;
  color: #FFE28A;
  font-size: 1.35rem;
  line-height: 1;
  text-shadow: 0 0 10px #FFB51B, 0 2px 0 #7A4700;
  background: #090E1D;
}
.rl-main-title {
  position: relative; z-index: 1;
  font-size: clamp(1.05rem, 4.6vw, 1.45rem);
  letter-spacing: 1.1px;
  color: #FFF0B5;
  text-shadow: 0 1px 0 #7d4d09, 0 0 11px rgba(255, 196, 67, .75);
}
.rl-main-title .ic { color: #FFD45B; filter: drop-shadow(0 0 7px #FFB515); }
.rl-sub-title { position: relative; z-index: 1; color: #D4E5FF; letter-spacing: .2px; }

.rl-booster-empty,
.rl-booster-chip,
.rl-streak-meter {
  border-radius: 0;
  clip-path: polygon(2% 0, 98% 0, 100% 22%, 100% 78%, 98% 100%, 2% 100%, 0 78%, 0 22%);
  background: linear-gradient(180deg, rgba(16, 30, 57, .96), rgba(4, 10, 23, .96));
  border-color: rgba(108, 171, 255, .58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -9px 18px rgba(0,0,0,.48), 0 0 11px rgba(24, 136, 255, .18);
}
.rl-booster-empty { color: #D8E7FF; }
.rl-streak-meter { padding: 9px 14px; }
.rl-streak-meter.super-meter { border-color: #DCB1FF; box-shadow: inset 0 -9px 18px rgba(27, 3, 56, .65), 0 0 16px rgba(180, 91, 255, .4); }
.rl-streak-track { background: rgba(1, 5, 15, .9); border: 1px solid rgba(151, 190, 235, .32); box-shadow: inset 0 2px 5px rgba(0,0,0,.72); }
.rl-streak-progress { background: linear-gradient(90deg, #146bff, #75c9ff 50%, #ffe79b); box-shadow: 0 0 9px rgba(101, 181, 255, .75); }

.rl-wheel-wrapper {
  width: min(100%, 360px);
  max-height: 370px;
  min-height: 150px;
  isolation: isolate;
}
.rl-wheel-wrapper::before {
  content: '';
  position: absolute; inset: 3.5%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(16, 41, 80, .5) 0 57%, rgba(0,0,0,0) 58%),
    repeating-conic-gradient(from 0deg, rgba(255, 203, 71, .95) 0deg 1.2deg, transparent 1.2deg 16deg);
  box-shadow: 0 0 22px rgba(255, 185, 36, .42), 0 0 54px rgba(0, 98, 255, .18);
  transform: scale(1.08);
}
.rl-wheel-wrapper::after {
  content: '';
  position: absolute; inset: 8%; border-radius: 50%; z-index: -1;
  border: 1px solid rgba(255, 238, 163, .8);
  box-shadow: inset 0 0 0 5px rgba(255, 171, 29, .28), inset 0 0 0 8px rgba(6, 12, 27, .85), 0 0 0 2px rgba(16, 62, 117, .8);
}
.rl-canvas { filter: drop-shadow(0 14px 14px rgba(0,0,0,.62)); }
.rl-needle { filter: drop-shadow(0 0 8px rgba(255, 191, 43, .9)) drop-shadow(0 4px 5px rgba(0,0,0,.7)); }
.rl-needle-tip { border-top-color: #F64C3D; border-top-width: 30px; }
.rl-needle-tip::after { background: radial-gradient(circle at 35% 30%, #FFF7D8, #FFC62E 56%, #B86600); border-color: #FFF1B0; box-shadow: 0 0 10px #FFD64D; }
.rl-hub {
  width: 66px; height: 66px;
  background: radial-gradient(circle at 35% 30%, #55dcff, #0873bf 43%, #061a39 82%);
  border: 4px solid #FFD153;
  box-shadow: 0 0 0 4px rgba(255, 180, 31, .28), 0 0 22px rgba(31, 176, 255, .78), inset 0 0 13px rgba(255,255,255,.24);
}
.rl-hub-core { filter: drop-shadow(0 0 8px #B8F3FF); }

.rl-controls { padding: 0 2px; }
.btn-roulette-spin,
.btn-roulette-ad {
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;
  clip-path: polygon(3% 0, 97% 0, 100% 22%, 100% 78%, 97% 100%, 3% 100%, 0 78%, 0 22%);
  background: linear-gradient(180deg, #38ff9a 0%, #0ebf68 42%, #08743f 100%) !important;
  color: #FFF8D2 !important;
  border: 2px solid #FFD75C !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -11px 16px rgba(0, 44, 29, .58), 0 0 18px rgba(22, 255, 129, .6), 0 0 0 3px rgba(255, 188, 30, .18) !important;
  text-shadow: 0 2px 2px rgba(0, 65, 35, .95), 0 0 8px rgba(255,247,174,.48);
}
.btn-roulette-spin::after,
.btn-roulette-ad::after {
  content: ''; position: absolute; top: -40%; bottom: -40%; left: -25%; width: 18%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  transform: skewX(-18deg); animation: rlBtnSheen 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rlBtnSheen { 0%, 36% { left: -25%; opacity: 0; } 45% { opacity: .85; } 62%, 100% { left: 120%; opacity: 0; } }
.btn-roulette-spin.super-spin,
.btn-roulette-ad.super-spin { background: linear-gradient(180deg, #cf8bff, #7f32d0 55%, #35115d) !important; border-color: #F0D5FF !important; box-shadow: 0 0 21px rgba(193, 94, 255, .76), inset 0 -11px 16px rgba(41, 6, 80, .62) !important; }

@media (max-height: 740px) {
  .roulette-screen-container { gap: 5px; padding-top: 5px; }
  .rl-wheel-wrapper { max-height: 300px; }
  .rl-title-box { padding: 7px 14px; }
}

/* Pantallas muy cortas (360x600 y por debajo): un apretón más. */
@media (max-height: 620px) {
  .rl-boosters-bar { display: none; }   /* las pociones ya se ven en su chip del HUD */
  .rl-main-title { font-size: .95rem; }
  .rl-streak-label { font-size: .68rem; }
}

/* =========================================================================
   REMATE DEL GIRO
   =========================================================================
   El frenazo necesita un golpe seco o la rueda "se posa" y el momento pasa sin
   que el jugador registre que ha terminado. Un rebote muy corto sobre la
   rotación ya alcanzada más un halo que se apaga: 620 ms en total.

   `rotate(var(--rl-fin))` NO se puede usar aquí porque la rotación final la
   escribe el JS en `style.transform`; por eso el encaje va sólo en `filter` y
   `scale`, que se componen con la rotación en lugar de sustituirla.
   ========================================================================= */
.rl-canvas.rl-encaje {
  animation: rlEncaje .62s var(--ease-out);
}
@keyframes rlEncaje {
  0%   { filter: brightness(2.1) drop-shadow(0 0 26px rgba(255,255,255,.85)); }
  22%  { filter: brightness(1.35) drop-shadow(0 0 18px rgba(255,215,0,.7)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0)); }
}

/* La aguja vuelve suave tras cada clavija: sin transición, los tics se ven
   como saltos y no como un golpe elástico. */
.rl-needle { transition: transform .07s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .rl-canvas { transition: none !important; }
  .rl-canvas.rl-encaje { animation: none; }
  .rl-needle { transition: none; }
}

/* =========================================================================
   REVELADO DEL PREMIO
   =========================================================================
   Antes el icono, el título y el texto aparecían los tres a la vez: el premio
   se LEÍA, pero no se celebraba. Ahora entran en cascada y cada capa toma el
   color del sector (`--rw`), de modo que un legendario se siente distinto de un
   común sin cambiar una sola palabra del texto.

   El orden importa: primero la onda —el golpe—, luego los rayos —la
   importancia—, después el icono —el qué—, y por último las palabras. Al revés
   el jugador lee antes de sentir, y el momento se desinfla.
   ========================================================================= */
.rl-reward-modal { text-align: center; }

.rl-reward-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 104px;
  margin-bottom: 6px;
}

/* Onda expansiva: el impacto. Nace en el icono y se abre hacia fuera. */
.rl-shock {
  position: absolute;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 2px solid var(--rw, #FFD34E);
  opacity: 0;
  animation: rlShock .62s var(--ease-out) .04s;
  pointer-events: none;
}
@keyframes rlShock {
  0%   { transform: scale(.35); opacity: .95; }
  100% { transform: scale(2.6);  opacity: 0; }
}

/* Rayos: dan importancia sin tapar. Giran muy lento para que no mareen. */
.rl-rays {
  position: absolute;
  width: 190px; height: 190px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    var(--rw, #FFD34E) 0 4deg, transparent 4deg 30deg,
    var(--rw, #FFD34E) 30deg 34deg, transparent 34deg 60deg,
    var(--rw, #FFD34E) 60deg 64deg, transparent 64deg 90deg,
    var(--rw, #FFD34E) 90deg 94deg, transparent 94deg 120deg,
    var(--rw, #FFD34E) 120deg 124deg, transparent 124deg 150deg,
    var(--rw, #FFD34E) 150deg 154deg, transparent 154deg 180deg,
    var(--rw, #FFD34E) 180deg 184deg, transparent 184deg 210deg,
    var(--rw, #FFD34E) 210deg 214deg, transparent 214deg 240deg,
    var(--rw, #FFD34E) 240deg 244deg, transparent 244deg 270deg,
    var(--rw, #FFD34E) 270deg 274deg, transparent 274deg 300deg,
    var(--rw, #FFD34E) 300deg 304deg, transparent 304deg 330deg,
    var(--rw, #FFD34E) 330deg 334deg, transparent 334deg 360deg);
  /* Se desvanece hacia el centro para no comerse el icono. */
  mask: radial-gradient(circle, transparent 30%, #000 46%, transparent 72%);
  animation: rlRays 1s var(--ease-out) .1s forwards, rlGirar 14s linear .1s infinite;
}
@keyframes rlRays { from { opacity: 0; transform: scale(.6); } to { opacity: .30; transform: scale(1); } }
@keyframes rlGirar { to { transform: rotate(360deg); } }

/* El icono aterriza con rebote. Es el protagonista, va después del golpe. */
.rl-reward-icon-box {
  position: relative; z-index: 2;
  animation: rlIcono .5s var(--ease-back) .1s backwards;
  box-shadow: 0 0 26px color-mix(in srgb, var(--rw, #FFD34E) 55%, transparent);
}
@keyframes rlIcono { from { transform: scale(.3) rotate(-25deg); opacity: 0; } }
.rl-reward-ico { display: inline-grid; place-items: center; }

/* Texto en cascada, detrás del icono. */
.rl-reward-title { animation: rlSube .42s var(--ease-out) .3s backwards; }
.rl-reward-desc  { animation: rlSube .42s var(--ease-out) .42s backwards; }
@keyframes rlSube { from { opacity: 0; transform: translateY(10px); } }

/*
 * GRADUACIÓN POR RAREZA. Un común no puede celebrarse como un mítico: si todo
 * es una fiesta, nada lo es. Los comunes casi no traen rayos; los míticos
 * laten.
 */
.rl-reward-modal.rar-common .rl-rays { animation-name: rlRaysTenue, rlGirar; }
@keyframes rlRaysTenue { from { opacity: 0; } to { opacity: .12; } }
.rl-reward-modal.rar-legendary .rl-reward-icon-box,
.rl-reward-modal.rar-mythic .rl-reward-icon-box { animation: rlIcono .5s var(--ease-back) .1s backwards, rlLatir 1.5s ease-in-out .6s infinite; }
@keyframes rlLatir {
  0%,100% { box-shadow: 0 0 26px color-mix(in srgb, var(--rw) 55%, transparent); }
  50%     { box-shadow: 0 0 44px color-mix(in srgb, var(--rw) 90%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .rl-shock, .rl-rays, .rl-reward-icon-box,
  .rl-reward-title, .rl-reward-desc { animation: none !important; opacity: 1 !important; }
  .rl-rays { opacity: .18 !important; }
}

/* Recompensa de ruleta: el cartel comparte el marco de la rueda y el botón
   de reclamar conserva el acabado luminoso de la referencia. */
.popup.roulette-reward-popup {
  background: radial-gradient(circle at 50% 18%, rgba(30, 65, 115, .82), rgba(6, 10, 24, .98) 62%), #060A17;
  border: 1px solid rgba(255, 211, 78, .78);
  box-shadow: 0 0 0 2px rgba(255, 171, 33, .18), 0 0 38px color-mix(in srgb, var(--rw, #FFD34E) 32%, transparent), 0 24px 54px rgba(0,0,0,.75);
}
.popup.roulette-reward-popup .popup-head {
  background: linear-gradient(180deg, rgba(63, 49, 26, .96), rgba(14, 18, 32, .94));
  border-bottom-color: rgba(255, 210, 90, .42);
  color: #FFF1BB;
  text-shadow: 0 0 10px rgba(255, 195, 64, .55);
}
.popup.roulette-reward-popup .popup-foot { border-top-color: rgba(255, 211, 78, .36); }
.popup.roulette-reward-popup .popup-foot > .btn {
  border-radius: 0;
  clip-path: polygon(4% 0,96% 0,100% 24%,100% 76%,96% 100%,4% 100%,0 76%,0 24%);
  background: linear-gradient(180deg, #3CFF9D, #0AAA5B 52%, #075231) !important;
  border: 1px solid #FFE18A !important;
  color: #FFF8D0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 0 18px rgba(37, 255, 143, .55) !important;
  text-shadow: 0 2px 2px rgba(0, 58, 30, .9);
}