/* ============================================================
   Temas visuales de los ÁLBUMES ESPECIALES.

   app.js pone en <body> una clase "tema-<nombre>" (ej. tema-terror)
   SOLO mientras estás adentro de ese álbum: su página y la vista de
   sus series (ver actualizarTemaAlbum / TEMA_POR_ALBUM en app.js). El
   carrusel de Álbumes queda siempre con los colores de siempre. En cualquier otra pantalla la clase no está, así que nada de
   esto aplica y los Mundiales se ven exactamente igual que siempre.

   Este archivo se carga DESPUÉS de los demás CSS para que estas reglas
   ganen. Para un álbum nuevo con otra temática: otro bloque igual con
   su clase (ej. .tema-espacial) y sus propias variables.
   ============================================================ */

/* ------------------------------------------------------------
   Figurita oculta ("?") — se usa en TODAS las pantallas (Mercado,
   chat, selectores, zoom), no solo dentro del tema: es una figurita de
   un álbum especial que todavía no tenés (ver figuritaOculta en
   app.js). Hereda el tamaño del avatar de cada lista; acá solo va el
   aspecto.
   ------------------------------------------------------------ */
.figurita-oculta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 10, 12, 0.92) !important;
  background-image: none !important;
  border: 1px solid #5c0f16;
  color: #7a1a22 !important;
  font-family: 'Creepster', 'Poppins', cursive;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  text-shadow: 0 0 8px rgba(139, 13, 24, 0.55);
}

/* En el zoom el "?" va bien grande. */
.sticker-zoom-avatar.figurita-oculta {
  font-size: 7rem;
}

/* ============================================================
   TEMA TERROR (Terror Legend)
   ============================================================ */
body.tema-terror {
  --tema-fondo: #0b0607;
  --tema-panel: #1a0a0c;
  --tema-borde: #5c0f16;
  --tema-acento: #8b0d18;
  --tema-acento-oscuro: #5a0610;
  --tema-acento-hover: #a3121f;
  --tema-dorado: #c9a227;
  --tema-texto: #e8dcc4;
  --tema-texto-2: #b9a98f;
  --tema-texto-boton: #f3e6d0;
  --tema-contador: #2a0d10;
  --tema-oculto: #7a1a22;
  background-color: var(--tema-fondo);
}

/* ---------- Fondo de la página: cementerio oscurecido ----------
   Pisa también el fondo por país que pone renderCountryDetail (esa
   variable solo se usa adentro de la regla de body::after de
   styles.css; esta regla es más específica y no la usa). */
body.tema-terror::after {
  background-color: var(--tema-fondo);
  background-image:
    linear-gradient(rgba(11, 6, 7, 0.85), rgba(11, 6, 7, 0.85)),
    url("imgportadas/terror-legend-fondo.jpg");
  background-size: cover;
  background-position: center center;
}

@media (min-width: 900px) {
  body.tema-terror::after {
    background-size: cover;
    background-color: var(--tema-fondo);
  }
}

/* ---------- Borde izquierdo de la página ----------
   <html> tiene "scrollbar-gutter: stable both-edges": el hueco que
   reserva a la izquierda deja ver su fondo verde. Adentro de Terror
   Legend toma el fondo del tema (la clase la pone actualizarTemaAlbum). */
html.tema-terror {
  background-color: #0b0607;
}

/* ---------- Botón ☰ del menú lateral ---------- */
body.tema-terror #side-menu-tab {
  background: rgba(26, 10, 12, 0.94);
  border-color: var(--tema-borde);
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(139, 13, 24, 0.35);
}

body.tema-terror .side-menu-tab-icon {
  color: var(--tema-dorado);
}

/* ---------- Encabezados y paneles ---------- */
body.tema-terror #album-pages-view .view-header,
body.tema-terror #country-detail-view .view-header {
  background: rgba(26, 10, 12, 0.88);
  border: 1px solid var(--tema-borde);
}

body.tema-terror #album-pages-view .section-card {
  background: rgba(26, 10, 12, 0.72);
  border: 1px solid var(--tema-borde);
}

body.tema-terror #album-pages-view .view-header h2,
body.tema-terror #country-detail-view .view-header h2 {
  color: var(--tema-texto);
}

body.tema-terror #album-pages-view .view-header p,
body.tema-terror #country-detail-view .view-header p {
  color: var(--tema-texto-2);
}

/* Título del álbum y de la serie con letra "de terror" (solo esos dos;
   el resto del texto sigue con Poppins para que se lea bien). */
body.tema-terror #album-pages-title,
body.tema-terror #country-detail-title > span:first-child {
  font-family: 'Creepster', 'Poppins', cursive;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--tema-texto);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 14px rgba(139, 13, 24, 0.45);
}

body.tema-terror #album-pages-title {
  font-size: 2rem;
}

body.tema-terror #country-detail-title > span:first-child {
  font-size: 2.1rem;
}

/* ---------- Botones activos: flechita de volver ---------- */
body.tema-terror .button-small.country-detail-volver {
  background: linear-gradient(90deg, var(--tema-acento) 0%, var(--tema-acento-oscuro) 100%);
  color: var(--tema-texto-boton);
  border: 1px solid var(--tema-borde);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

body.tema-terror .button-small.country-detail-volver:hover {
  background: linear-gradient(90deg, var(--tema-acento-hover) 0%, var(--tema-acento) 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 12px rgba(139, 13, 24, 0.5);
}

/* ---------- Filas deslizables (tapitas de álbum y series) ---------- */
body.tema-terror .fila-circular-item {
  border-color: var(--tema-borde);
  background: rgba(26, 10, 12, 0.75);
}

body.tema-terror .fila-circular-item:hover {
  border-color: var(--tema-acento-hover);
}

body.tema-terror .fila-circular-item.activa,
body.tema-terror .fila-circular-item.activa:hover {
  border-color: var(--tema-dorado);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), 0 0 10px rgba(201, 162, 39, 0.45);
}

body.tema-terror .fila-circular-item:focus-visible {
  outline-color: var(--tema-dorado);
}

/* Las portadas de las Criptas son verticales (1328x1904, 0,70): en la
   fila van enteras, con su proporción, y con su número romano encima
   (las 5 portadas son iguales salvo el texto del medio). */
body.tema-terror .country-detail-bandera {
  width: 32px;
  height: 46px;
}

.serie-numero-romano {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(11, 6, 7, 0.82);
  border: 1px solid #5c0f16;
  color: #e8dcc4;
  font-family: 'Creepster', 'Poppins', cursive;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- Numerito de pendientes ---------- */
body.tema-terror .country-flag-pending {
  background: var(--tema-dorado);
  color: #1a0a0c;
  border-color: var(--tema-fondo);
}

/* ---------- Página del álbum: botones de cada serie ---------- */
body.tema-terror .group-chip {
  background: rgba(139, 13, 24, 0.18);
  border-color: var(--tema-borde);
  color: var(--tema-texto);
}

body.tema-terror .country-flag-button {
  background: rgba(26, 10, 12, 0.88);
  border-color: var(--tema-borde);
}

body.tema-terror .country-flag-button:hover {
  border-color: var(--tema-acento-hover);
  box-shadow: 0 0 12px rgba(139, 13, 24, 0.5);
}

body.tema-terror .country-flag-button.active {
  border-color: var(--tema-dorado);
}

/* Portada de la Cripta entera, con su proporción vertical (en vez del
   rectángulo de bandera de los Mundiales). */
body.tema-terror .country-flag-button img.country-flag-img {
  width: 64px !important;
  height: 92px !important;
  max-width: 64px !important;
  max-height: 92px !important;
  object-fit: cover !important;
  border-radius: 6px;
  border: 1px solid var(--tema-borde);
}

body.tema-terror .country-flag-button .country-flag-name {
  color: var(--tema-texto);
}

body.tema-terror .country-flag-button .country-flag-count {
  color: var(--tema-texto-2);
}

/* ---------- Vista de una serie: contador y casilleros ---------- */
body.tema-terror .country-detail-count {
  background: var(--tema-contador);
  color: var(--tema-texto);
  border: 1px solid var(--tema-borde);
}

body.tema-terror .slot-card {
  background: rgba(26, 10, 12, 0.85);
  border-width: 1px;
  border-color: var(--tema-borde);
}

body.tema-terror .slot-card.filled {
  border: 2px solid var(--tema-dorado);
  background: rgba(26, 10, 12, 0.92);
}

body.tema-terror .slot-card.empty {
  opacity: 1;
  background: rgba(26, 10, 12, 0.78);
  border: 1px solid var(--tema-borde);
  transition: box-shadow 0.18s ease;
}

body.tema-terror .slot-card.empty:hover {
  box-shadow: 0 0 12px rgba(139, 13, 24, 0.5);
}

body.tema-terror .slot-name,
body.tema-terror .slot-rarity {
  color: var(--tema-texto-2);
}

body.tema-terror .slot-card .slot-name {
  color: var(--tema-texto);
}

body.tema-terror .slot-avatar {
  background: var(--tema-contador);
  color: var(--tema-texto);
}

/* El "?" del casillero vacío: grande, sin el circulito oscuro. */
body.tema-terror .slot-avatar.figurita-oculta,
.slot-card.slot-oculto .slot-avatar.figurita-oculta {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  font-size: 3rem;
}

/* El "+" de una figurita lista para pegar. */
body.tema-terror .slot-add-btn {
  background: linear-gradient(90deg, var(--tema-acento) 0%, var(--tema-acento-oscuro) 100%);
  color: var(--tema-texto-boton);
  border-color: var(--tema-dorado);
}

body.tema-terror .slot-add-btn:hover {
  background: linear-gradient(90deg, var(--tema-acento-hover) 0%, var(--tema-acento) 100%);
}

/* ============================================================
   EFECTO DE TERROR AL ABRIR UN SOBRE DE TERROR LEGEND
   (capa .terror-sobre-fx que arma lanzarEfectoTerrorSobre en app.js
   adentro de #pack-modal; se borra sola a los ~2 s).
   Solo transform/opacity, para que no le pese al celular.
   ============================================================ */
.terror-sobre-fx {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

/* ---------- Arañas colgando de su hilo ----------
   El "colgante" (hilo + araña) arranca escondido arriba de la pantalla
   (translateY(-100%)), baja hasta que la araña queda a --largo-hilo del
   borde de arriba, se balancea (rotate, desde arriba) y vuelve a subir. */
.terror-arana {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  transform: translateY(-100%);
  opacity: 0;
  animation: terrorAranaCuelga var(--duracion, 1.8s) ease-in-out var(--retraso, 0s) forwards;
  will-change: transform, opacity;
}

.terror-arana-hilo {
  width: 1px;
  height: var(--largo-hilo, 16vh);
  background: linear-gradient(rgba(235, 228, 215, 0.15), rgba(235, 228, 215, 0.7));
}

.terror-arana-cuerpo {
  width: calc(40px * var(--escala, 1));
  height: calc(34px * var(--escala, 1));
  margin-top: -2px;
  /* Brillo rojo suave alrededor, para que se vea sobre el fondo oscuro. */
  filter: drop-shadow(0 0 3px rgba(255, 42, 42, 0.45));
}

.terror-arana-ojo {
  filter: drop-shadow(0 0 2px #ff2a2a);
}

@keyframes terrorAranaCuelga {
  0%   { transform: translateY(-100%) rotate(0deg); opacity: 1; }
  32%  { transform: translateY(0) rotate(0deg); opacity: 1; }
  44%  { transform: translateY(0) rotate(var(--giro, 6deg)); }
  56%  { transform: translateY(0) rotate(calc(var(--giro, 6deg) * -1)); }
  66%  { transform: translateY(0) rotate(calc(var(--giro, 6deg) * 0.4)); opacity: 1; }
  100% { transform: translateY(-100%) rotate(0deg); opacity: 0; }
}

/* ---------- Telarañas en las esquinas de arriba ---------- */
.terror-telarana-wrap {
  position: absolute;
  top: 0;
  width: min(34vw, 170px);
  height: min(34vw, 170px);
  opacity: 0;
  animation: terrorTelaranaAparece 2.1s ease-out forwards;
}

.terror-telarana-wrap.izquierda { left: 0; }
.terror-telarana-wrap.derecha { right: 0; transform: scaleX(-1); }

.terror-telarana {
  width: 100%;
  height: 100%;
}

/* Se "dibuja" cada hilo (pathLength=1 en el SVG). */
.terror-telarana path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: terrorTelaranaDibuja 0.9s ease-out forwards;
}

@keyframes terrorTelaranaDibuja {
  to { stroke-dashoffset: 0; }
}

@keyframes terrorTelaranaAparece {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Relámpago rojo suave cuando explota el sobre (0,65 s) ---------- */
.terror-relampago {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(163, 18, 31, 0.45), rgba(90, 6, 16, 0.25) 60%, rgba(11, 6, 7, 0) 100%);
  opacity: 0;
  animation: terrorRelampago 0.45s ease-out 0.62s forwards;
}

@keyframes terrorRelampago {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  40%  { opacity: 0.3; }
  55%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* ============================================================
   ZOOM DE LAS FIGURITAS DE TERROR LEGEND
   (clase zoom-tema-terror que pone openStickerZoom en app.js solo para
   figuritas de ese álbum que tenés; los Mundiales siguen igual).
   ============================================================ */
.sticker-zoom-avatar.zoom-tema-terror.has-photo {
  border: 3px solid #8b0d18;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.6), 0 0 18px rgba(139, 13, 24, 0.55);
}

/* Brillo tornasolado de Halloween: rojo sangre, naranja calabaza,
   violeta y verde ácido. Pasa por --shine-x (lo mueve el dedo/mouse,
   ver actualizarInclinacionZoom) y mantiene el barrido de siempre. */
.sticker-zoom-avatar.zoom-tema-terror.has-photo::after,
.sticker-zoom-avatar.zoom-tema-terror[data-rarity].has-photo::after {
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(139, 13, 24, 0.5) calc(var(--shine-x, 50%) - 14%),
    rgba(255, 117, 24, 0.45) calc(var(--shine-x, 50%) - 5%),
    rgba(123, 44, 191, 0.45) calc(var(--shine-x, 50%) + 4%),
    rgba(164, 255, 28, 0.35) calc(var(--shine-x, 50%) + 13%),
    transparent 72%
  );
  mix-blend-mode: color-dodge;
  opacity: 0.75;
}

/* Resplandor rojo que "late" despacio alrededor de la figurita: va en
   un pseudo-elemento del envoltorio y se anima solo su opacidad. */
.sticker-zoom-avatar-wrap.zoom-tema-terror::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 0 26px 8px rgba(139, 13, 24, 0.7), 0 0 60px 14px rgba(90, 6, 16, 0.45);
  opacity: 0.35;
  animation: terrorZoomLate 2.4s ease-in-out infinite;
}

@keyframes terrorZoomLate {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* ============================================================
   Movimiento reducido: sin arañas, telarañas, relámpago, brillo ni
   pulso (app.js tampoco arma la capa del sobre en ese caso).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .terror-sobre-fx {
    display: none;
  }
  .sticker-zoom-avatar.zoom-tema-terror.has-photo::after,
  .sticker-zoom-avatar.zoom-tema-terror[data-rarity].has-photo::after {
    animation: none;
    display: none;
  }
  .sticker-zoom-avatar-wrap.zoom-tema-terror::before {
    animation: none;
    opacity: 0.6;
  }
}

/* ============================================================
   RAREZA "ATERRADOR" (Terror Legend)
   Etiqueta de rareza (zoom, Mis VirtualFigus) con la clase
   .rareza-aterrador (ver esRarezaAterrador en app.js): degradé rojo
   sangre, texto hueso, resplandor rojo oscuro y dos gotitas que
   chorrean desde abajo. El color de borde de la figurita (--rarity-color)
   ya llega en rojo sangre desde datosRareza.
   ============================================================ */
.rareza-aterrador {
  position: relative;
  background: linear-gradient(180deg, #8b0000 0%, #4a0008 100%) !important;
  color: #f3e6d0 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  box-shadow:
    0 0 0 1px #3a0006,
    0 2px 8px rgba(139, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 90, 90, 0.25);
  letter-spacing: 0.04em;
}

.rareza-aterrador::before,
.rareza-aterrador::after {
  content: '';
  position: absolute;
  top: calc(100% - 3px);
  background: #4a0008;
  border-radius: 0 0 50% 50% / 0 0 75% 75%;
  pointer-events: none;
}

.rareza-aterrador::before {
  left: 24%;
  width: 5px;
  height: 8px;
}

.rareza-aterrador::after {
  left: 68%;
  width: 4px;
  height: 5px;
}

/* ============================================================
   SIN FRANJAS: revelado del sobre, zoom y casilleros pegados de los
   álbumes especiales (fotos 2:3). La carta/recuadro toma la proporción
   real de la foto y la foto lo llena entero, con esquinas redondeadas
   como las del marco de la figurita. Los Mundiales no cambian.
   ============================================================ */

/* Revelado del sobre: proporción 2:3 de base hasta que el JS ponga la
   real de la foto (matchContainerToImageRatio en buildCardSlot). */
.card-slot.card-slot-especial {
  aspect-ratio: 2 / 3;
}

.card-slot.card-slot-especial .card-face {
  border-radius: 10px;
}

.card-slot.card-slot-especial .card-front,
.card-slot.card-slot-especial .card-photo-full {
  background: transparent;
}

.card-slot.card-slot-especial .card-photo-full img {
  object-fit: cover;
  background: transparent;
  border-radius: 10px;
}

/* Zoom de una figurita de Terror Legend: la foto llena todo el recuadro
   (el borde de 3px ya no deja una línea de fondo alrededor). */
.sticker-zoom-avatar.zoom-tema-terror.has-photo {
  background-size: cover;
  background-color: transparent;
  border-radius: 10px;
}

/* Casilleros pegados de una serie de Terror Legend. */
body.tema-terror .slot-card.has-photo {
  border-radius: 10px;
}

body.tema-terror .slot-card.has-photo .slot-photo {
  object-fit: cover;
  border-radius: 8px;
}

/* ============================================================
   COLOR PROPIO DE CADA MUNDIAL (más sutil que Terror Legend)
   app.js pone en <body> "tema-mundial" + "tema-<mundial>" (ej.
   tema-italia90) SOLO dentro del álbum: su página y la vista de un país
   (ver TEMA_POR_ANIO_MUNDIAL / actualizarTemaAlbum). Cambia solo el
   acento (flechita, contador, país elegido, bandera activa, numerito de
   pendientes) y un tinte suave en encabezados. NO cambia tipografía,
   fondo ni el borde de rareza de las figuritas pegadas.
   Cada Mundial tiene dos tonos: --tm-acento (relleno de botones, con
   --tm-texto-boton encima) y --tm-claro (bordes sobre el panel oscuro,
   con contraste de al menos 3:1 — los acentos oscuros como el azul
   marino de USA 94 casi no se verían como borde).
   ============================================================ */
body.tema-mexico86 {
  --tm-acento: #0f7a3d; --tm-acento-osc: #0a5a2c; --tm-texto-boton: #ffffff;
  --tm-claro: #2fb36b; --tm-detalle: #c8102e; --tm-detalle-texto: #ffffff;
  --tm-tinte: rgba(15, 122, 61, 0.14); --tm-borde-panel: rgba(47, 179, 107, 0.28);
}
body.tema-italia90 {
  --tm-acento: #1f5fbf; --tm-acento-osc: #164a96; --tm-texto-boton: #ffffff;
  --tm-claro: #5b8def; --tm-detalle: #ce2b37; --tm-detalle-texto: #ffffff;
  --tm-tinte: rgba(31, 95, 191, 0.16); --tm-borde-panel: rgba(91, 141, 239, 0.3);
}
body.tema-usa94 {
  --tm-acento: #1c2f6b; --tm-acento-osc: #13214d; --tm-texto-boton: #ffffff;
  --tm-claro: #5f7fd1; --tm-detalle: #e04a5f; --tm-detalle-texto: #ffffff;
  --tm-tinte: rgba(28, 47, 107, 0.28); --tm-borde-panel: rgba(95, 127, 209, 0.3);
}
body.tema-francia98 {
  --tm-acento: #1e3a8a; --tm-acento-osc: #152a66; --tm-texto-boton: #ffffff;
  --tm-claro: #4f86e0; --tm-detalle: #ef4135; --tm-detalle-texto: #ffffff;
  --tm-tinte: rgba(30, 58, 138, 0.24); --tm-borde-panel: rgba(79, 134, 224, 0.3);
}
body.tema-brasil2014 {
  --tm-acento: #f2c500; --tm-acento-osc: #d4a800; --tm-texto-boton: #0b0b0b;
  --tm-claro: #f2c500; --tm-detalle: #009c3b; --tm-detalle-texto: #ffffff;
  --tm-tinte: rgba(0, 156, 59, 0.14); --tm-borde-panel: rgba(242, 197, 0, 0.3);
}
body.tema-qatar2022 {
  --tm-acento: #6d1a36; --tm-acento-osc: #4f1227; --tm-texto-boton: #ffffff;
  --tm-claro: #b8456a; --tm-detalle: #c9a227; --tm-detalle-texto: #2a1d05;
  --tm-tinte: rgba(109, 26, 54, 0.26); --tm-borde-panel: rgba(184, 69, 106, 0.32);
}

/* ---------- Reglas en común (una sola vez para todos los Mundiales) ---------- */

/* Tinte suave en los encabezados del álbum y de la vista de un país. */
body.tema-mundial #album-pages-view .view-header,
body.tema-mundial #country-detail-view .view-header {
  background: linear-gradient(var(--tm-tinte), var(--tm-tinte)), rgba(8, 20, 11, 0.82);
  border-color: var(--tm-borde-panel);
}

body.tema-mundial .group-chip:not(.especial-chip) {
  background: var(--tm-tinte);
  border-color: var(--tm-borde-panel);
}

/* Flechita de volver. */
body.tema-mundial .button-small.country-detail-volver {
  background: linear-gradient(90deg, var(--tm-acento) 0%, var(--tm-acento-osc) 100%);
  color: var(--tm-texto-boton);
}

/* Contador "14/19". */
body.tema-mundial .country-detail-count {
  background: var(--tm-acento);
  color: var(--tm-texto-boton);
}

/* País elegido (página del álbum). */
body.tema-mundial .country-flag-button:hover {
  border-color: var(--tm-claro);
}

body.tema-mundial .country-flag-button.active {
  border-color: var(--tm-claro);
}

/* Bandera activa de la fila deslizable (y tapa del álbum actual). */
body.tema-mundial .fila-circular-item:hover {
  border-color: var(--tm-claro);
}

body.tema-mundial .fila-circular-item.activa,
body.tema-mundial .fila-circular-item.activa:hover {
  border-color: var(--tm-claro);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 10px color-mix(in srgb, var(--tm-claro) 55%, transparent);
}

/* Numerito de figuritas para pegar. */
body.tema-mundial .country-flag-pending {
  background: var(--tm-detalle);
  color: var(--tm-detalle-texto);
}

/* ---------- Panel y botones del zoom (Terror Legend) ----------
   Clase zoom-modal-terror en el modal, la pone openStickerZoom para
   cualquier figurita de Terror Legend (la tengas o no). */
.sticker-zoom-modal.zoom-modal-terror .sticker-zoom-content {
  background: #1a0a0c;
  border: 1px solid #5c0f16;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 26px rgba(139, 13, 24, 0.25);
}

.sticker-zoom-modal.zoom-modal-terror .sticker-zoom-close,
.sticker-zoom-modal.zoom-modal-terror .sticker-zoom-name {
  color: #e8dcc4;
}

.sticker-zoom-modal.zoom-modal-terror .sticker-zoom-id {
  color: #b9a98f;
}

.sticker-zoom-modal.zoom-modal-terror .sticker-zoom-type {
  background: #2a0d10;
  color: #e8dcc4;
  border: 1px solid #5c0f16;
}

.sticker-zoom-modal.zoom-modal-terror .sticker-zoom-actions .button-small {
  background: linear-gradient(90deg, #8b0d18 0%, #5a0610 100%);
  color: #f3e6d0;
  border: 1px solid #c9a227;
  box-shadow: 0 12px 26px rgba(139, 13, 24, 0.3);
}

.sticker-zoom-modal.zoom-modal-terror .sticker-zoom-actions .button-small:hover {
  box-shadow: 0 16px 32px rgba(139, 13, 24, 0.42);
}

/* ============================================================
   PORTADAS DE LAS CRIPTAS (Terror Legend)
   ============================================================ */

/* Franja arriba de los casilleros de una serie: la portada recortada a
   la altura de la luna y el "CRIPTA N" (que ya viene escrito en la
   imagen), oscurecida abajo. La arma renderPortadaSerie en app.js. */
.serie-portada {
  position: relative;
  height: 150px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid #5c0f16;
  background-color: #1a0a0c;
  background-size: cover;
  /* Centrada en el "CRIPTA N" (está a ~44% de la altura de la portada;
     con "cover" en una franja ancha eso cae en ~42%, en celular y en compu). */
  background-position: 50% 42%;
  background-repeat: no-repeat;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}

.serie-portada::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 6, 7, 0) 65%, rgba(11, 6, 7, 0.85) 100%);
  pointer-events: none;
}

@media (min-width: 900px) {
  .serie-portada {
    height: 190px;
  }
}

/* En el Mercado, los filtros y "¿Qué figurita te falta?" los recuadros
   tienen forma de bandera: las portadas de las Criptas se ven enteras
   (sin recortar), con su proporción. Solo esas imágenes. */
.seleccion-filtro-tag img[src*="iconos/terror-legend/"] {
  width: 12px;
  height: 17px;
  object-fit: cover;
}

.lo-que-busco-pais-btn img[src*="iconos/terror-legend/"] {
  width: 30px;
  height: 43px;
  object-fit: cover;
}

/* ============================================================
   RECUADROS DEL ÁLBUM CON EL COLOR DEL TEMA
   (botón de cada país/serie en la página del álbum y casilleros de la
   vista de un país/serie). Pisa los verdes escritos directo en
   flags.css (.country-flag-button, .country-flag-count,
   .country-flag-pending), country-detail.css (.slot-card, .slot-avatar,
   .slot-name, .slot-rarity, foco de la fila) y la regla general
   "button" de styles.css (degradé y sombra verde del botón "+" y la
   sombra verde de los botones de país). Solo dentro de la clase del
   tema: afuera del álbum todo sigue verde. El borde de rareza de las
   figuritas pegadas no se toca.
   ============================================================ */

/* ---------- Terror Legend ---------- */
body.tema-terror .country-flag-button {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

body.tema-terror .country-flag-button.active {
  border-color: var(--tema-dorado);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 12px rgba(139, 13, 24, 0.55);
}

body.tema-terror .slot-card.filled {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

/* ---------- Mundiales ---------- */
body.tema-mundial {
  /* Fondo claro de los casilleros: el tono claro del Mundial mezclado
     con blanco (como el verde claro de siempre, pero de su color), con
     texto oscuro encima. */
  --tm-slot-fondo: color-mix(in srgb, var(--tm-claro) 30%, #eef1ee);
  --tm-slot-fondo-pegado: color-mix(in srgb, var(--tm-claro) 18%, #f5f7f5);
  --tm-slot-texto: #11161a;
}

/* Botón de cada país (página del álbum). */
body.tema-mundial .country-flag-button {
  background: linear-gradient(var(--tm-tinte), var(--tm-tinte)), rgba(10, 13, 16, 0.88);
  border-color: var(--tm-borde-panel);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

body.tema-mundial .country-flag-button:hover {
  border-color: var(--tm-claro);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 12px color-mix(in srgb, var(--tm-claro) 45%, transparent);
}

body.tema-mundial .country-flag-button.active {
  border-color: var(--tm-claro);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 10px color-mix(in srgb, var(--tm-claro) 40%, transparent);
}

body.tema-mundial .country-flag-button .country-flag-count {
  color: color-mix(in srgb, var(--tm-claro) 55%, #ffffff);
}

body.tema-mundial .country-flag-pending {
  border-color: #0b0f12;
}

/* Foco de teclado en la fila de banderas. */
body.tema-mundial .fila-circular-item:focus-visible {
  outline-color: var(--tm-claro);
}

/* Casilleros de la vista de un país. */
body.tema-mundial .slot-card {
  background: var(--tm-slot-fondo);
}

body.tema-mundial .slot-card.empty {
  border-color: color-mix(in srgb, var(--tm-claro) 60%, transparent);
}

/* Pegados: el borde sigue siendo el de rareza; cambia solo el fondo. */
body.tema-mundial .slot-card.filled {
  background: var(--tm-slot-fondo-pegado);
}

body.tema-mundial .slot-avatar {
  background: var(--tm-acento);
  color: var(--tm-texto-boton);
}

body.tema-mundial .slot-avatar-empty {
  color: var(--tm-acento-osc);
}

body.tema-mundial .slot-name,
body.tema-mundial .slot-rarity {
  color: var(--tm-slot-texto);
}

/* El "+" para pegar una figurita (usaba el degradé verde de "button"). */
body.tema-mundial .slot-add-btn {
  background: linear-gradient(90deg, var(--tm-acento) 0%, var(--tm-acento-osc) 100%);
  color: var(--tm-texto-boton);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

body.tema-mundial .slot-add-btn:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3), 0 0 10px color-mix(in srgb, var(--tm-claro) 50%, transparent);
}

body.tema-terror .slot-add-btn {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   CARTEL DEL SOBRE DE TERROR LEGEND (gratis cada 8 horas)
   Misma estructura que el del Sobre Especial (stickers.css:
   .especial-sobre-*), con los colores del tema del álbum según
   data-tema en #album-sobre-gratis-modal (ver abrirModalSobreGratisAlbum).
   Terror Legend: rojo sangre y dorado viejo, telaraña y niebla.
   ============================================================ */
.album-sobre-gratis-titulo {
  margin: 0;
  text-align: center;
  font-size: 1.15rem;
  color: #f6ec5a;
  font-family: 'Orbitron', sans-serif;
}

.album-sobre-gratis-hero {
  position: relative;
}

.album-sobre-gratis-telarana {
  position: absolute;
  top: 0;
  left: 0;
  width: 92px;
  height: 92px;
  pointer-events: none;
  z-index: 1;
}

.album-sobre-gratis-niebla {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -10px;
  height: 70px;
  background:
    radial-gradient(ellipse 40% 60% at 25% 70%, rgba(200, 190, 185, 0.22), transparent 70%),
    radial-gradient(ellipse 45% 55% at 70% 75%, rgba(200, 190, 185, 0.18), transparent 70%);
  filter: blur(2px);
  pointer-events: none;
  z-index: 2;
  animation: sobreGratisNiebla 9s ease-in-out infinite alternate;
}

@keyframes sobreGratisNiebla {
  from { transform: translateX(-6%); opacity: 0.75; }
  to   { transform: translateX(6%); opacity: 1; }
}

/* ---------- Tema terror ---------- */
.album-sobre-gratis-modal[data-tema="terror"] .album-sobre-gratis-card {
  background: linear-gradient(180deg, rgba(26, 10, 12, 0.98), rgba(11, 6, 7, 0.98));
  border: 1px solid #5c0f16;
}

.album-sobre-gratis-modal[data-tema="terror"] .album-sobre-gratis-titulo {
  font-family: 'Creepster', 'Poppins', cursive;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: #e8dcc4;
  text-shadow: 0 0 12px rgba(139, 13, 24, 0.6);
}

.album-sobre-gratis-modal[data-tema="terror"] .especial-sobre-descripcion {
  color: #b9a98f;
}

.album-sobre-gratis-modal[data-tema="terror"] .album-sobre-gratis-halo {
  background: radial-gradient(circle, rgba(163, 18, 31, 0.6) 0%, rgba(90, 6, 16, 0.3) 45%, rgba(90, 6, 16, 0) 70%);
}

.album-sobre-gratis-modal[data-tema="terror"] .especial-sobre-img {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(139, 13, 24, 0.55));
}

.album-sobre-gratis-modal[data-tema="terror"] .album-sobre-gratis-reloj-card {
  background: linear-gradient(180deg, rgba(42, 13, 16, 0.75), rgba(11, 6, 7, 0.92));
  border-color: #5c0f16;
}

/* "GRATIS CADA 8HS": dorado viejo con un resplandor rojo sangre. */
.album-sobre-gratis-modal[data-tema="terror"] .especial-sobre-gratis {
  color: #c9a227;
  text-shadow: 0 0 8px rgba(139, 13, 24, 0.75);
}

.album-sobre-gratis-modal[data-tema="terror"] .especial-sobre-estado {
  color: #e8dcc4;
}

.album-sobre-gratis-modal[data-tema="terror"] .especial-sobre-estado.ready {
  color: #ff6b6b;
}

.album-sobre-gratis-modal[data-tema="terror"] .especial-sobre-reloj-celda {
  background: rgba(11, 6, 7, 0.8);
  border-color: rgba(201, 162, 39, 0.55);
  box-shadow: inset 0 0 12px rgba(139, 13, 24, 0.35);
}

.album-sobre-gratis-modal[data-tema="terror"] .especial-sobre-reloj-num,
.album-sobre-gratis-modal[data-tema="terror"] .especial-sobre-reloj-sep {
  color: #e0242f;
  text-shadow: 0 0 8px rgba(224, 36, 47, 0.7), 0 0 18px rgba(139, 13, 24, 0.5);
}

.album-sobre-gratis-modal[data-tema="terror"] .especial-sobre-reloj-label {
  color: #b9a98f;
}

.album-sobre-gratis-modal[data-tema="terror"] .especial-sobre-claim:disabled {
  color: #b9a98f;
  border-color: rgba(92, 15, 22, 0.8);
}

.album-sobre-gratis-modal[data-tema="terror"] .especial-sobre-claim.listo {
  background: linear-gradient(90deg, #8b0d18 0%, #5a0610 100%);
  color: #f3e6d0;
  border: 1px solid #c9a227;
}

/* "Abrir sobre de regalo (N)" debajo del gratis (abrirSobreTerrorRegalo):
   violeta del gajo "sobre" de la Ruleta de Terror, para distinguirlo. */
.album-sobre-gratis-modal[data-tema="terror"] .sobre-terror-regalo-btn {
  margin-top: 8px;
}

.album-sobre-gratis-modal[data-tema="terror"] .sobre-terror-regalo-btn.listo {
  background: linear-gradient(90deg, #4a2560 0%, #2a1236 100%);
}

/* Tarjeta de la galería de Sobres (Terror Legend al lado del Sobre Especial). */
.sobre-gratis-album-card {
  border-color: #8b0d18 !important;
  box-shadow: 0 0 0 1px rgba(139, 13, 24, 0.45), 0 8px 20px rgba(139, 13, 24, 0.25);
}

.sobre-gratis-album-card .sobre-gallery-count {
  background: #8b0d18;
  color: #f3e6d0;
}

@media (prefers-reduced-motion: reduce) {
  .album-sobre-gratis-niebla {
    animation: none;
  }
}

/* ============================================================
   REGLA DE INTERCAMBIO DE TERROR LEGEND
   Ventana "🕷️ <figurita>" con las 3 formas (abrirSelectorFormaTerror) y
   el selector de figuritas cuando se usa para Terror
   (abrirSelectorTresComunes con pagoTerror): clase .forma-terror en el
   contenido del modal. Bordó sangre y dorado viejo.
   ============================================================ */
.sticker-zoom-modal .forma-terror {
  background: linear-gradient(180deg, #1a0a0c 0%, #0b0607 100%);
  border: 1px solid #5c0f16;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 26px rgba(139, 13, 24, 0.25);
}

.forma-terror .canje-zone-title {
  font-family: 'Creepster', 'Poppins', cursive;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: #e8dcc4;
  text-shadow: 0 0 12px rgba(139, 13, 24, 0.6);
}

.forma-terror .canje-zone-hint,
.forma-terror .tres-comunes-resumen {
  color: #b9a98f;
}

.forma-terror .sticker-zoom-close {
  color: #e8dcc4;
}

.forma-terror .forma-especial-opcion {
  background: rgba(42, 13, 16, 0.9);
  border-color: rgba(201, 162, 39, 0.35);
  color: #e8dcc4;
}

.forma-terror .forma-especial-opcion:hover:not(:disabled),
.forma-terror .forma-especial-opcion:focus:not(:disabled) {
  border-color: #c9a227;
  box-shadow: 0 0 12px rgba(139, 13, 24, 0.45);
}

.forma-terror .forma-especial-opcion span {
  color: #b9a98f;
}

/* Opción que no te alcanza: apagada, con el motivo en rojo. */
.forma-terror .forma-especial-opcion:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.forma-terror .forma-especial-opcion:disabled span {
  color: #e0242f;
}

.forma-terror .especial-volver {
  color: #c9a227;
}

.forma-terror .tres-comunes-confirmar {
  background: linear-gradient(90deg, #8b0d18 0%, #5a0610 100%);
  color: #f3e6d0;
  border: 1px solid #c9a227;
}

.forma-terror .tres-comunes-confirmar:disabled {
  background: rgba(42, 13, 16, 0.9);
  color: #b9a98f;
  border-color: rgba(92, 15, 22, 0.8);
}

/* Lista del selector (filas, buscador, Filtros) con el mismo tema. */
.forma-terror .selector-propuesta-search,
.forma-terror .selector-propuesta-filtros-toggle {
  background: rgba(11, 6, 7, 0.9);
  border-color: rgba(92, 15, 22, 0.9);
  color: #e8dcc4;
}

.forma-terror .selector-propuesta-item {
  background: rgba(26, 10, 12, 0.88);
  border-color: rgba(92, 15, 22, 0.6);
}

.forma-terror .selector-propuesta-item button {
  background: linear-gradient(90deg, #8b0d18 0%, #5a0610 100%);
  color: #f3e6d0;
  box-shadow: none;
}

.forma-terror .selector-propuesta-item.chat-intercambio-fila-elegida {
  border-color: #c9a227 !important;
  background: rgba(201, 162, 39, 0.12);
}

/* ============================================================
   CARTEL DE BIENVENIDA DEL EVENTO TERROR LEGEND (evento-terror.js)
   Pantalla completa: velo bordó, niebla, telarañas en las esquinas de
   arriba y 2 arañas bajando; en el medio, el cartel con 2 pantallas que
   se deslizan hacia el costado. Tiene que entrar en el celular sin
   scroll vertical: alto máximo = alto de la pantalla, y en pantallas
   bajas todo se achica un poco.
   ============================================================ */
.evento-terror-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 40%, rgba(90, 6, 16, 0.55), rgba(11, 6, 7, 0.95) 75%),
    #0b0607;
  font-family: 'Poppins', system-ui, sans-serif;
  color: #e8dcc4;
}

.evento-terror-overlay.hidden {
  display: none;
}

body.evento-terror-abierto {
  overflow: hidden;
}

html.evento-terror-abierto {
  background-color: #0b0607;
}

.evento-terror-niebla {
  position: absolute;
  left: -40%;
  right: -40%;
  bottom: -8%;
  height: 40%;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 30% 60%, rgba(232, 220, 196, 0.1), transparent 70%),
    radial-gradient(35% 45% at 70% 70%, rgba(232, 220, 196, 0.08), transparent 70%);
  animation: eventoTerrorNiebla 14s ease-in-out infinite alternate;
}

@keyframes eventoTerrorNiebla {
  from { transform: translateX(-6%); }
  to   { transform: translateX(6%); }
}

.evento-terror-tela-wrap {
  position: absolute;
  top: 0;
  width: min(30vw, 130px);
  height: min(30vw, 130px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 3;
}

.evento-terror-tela-wrap.izquierda { left: 0; }
.evento-terror-tela-wrap.derecha { right: 0; transform: scaleX(-1); }

.evento-terror-tela {
  width: 100%;
  height: 100%;
}

.evento-terror-tela path {
  fill: none;
  stroke: #e8dcc4;
  stroke-width: 0.8;
}

.evento-terror-arana {
  position: absolute;
  top: 0;
  width: 22px;
  z-index: 3;
  pointer-events: none;
  animation: eventoTerrorBajar 6s ease-in-out infinite;
}

.evento-terror-hilo {
  display: block;
  width: 1px;
  height: var(--largo);
  margin: 0 auto;
  background: rgba(232, 220, 196, 0.5);
}

.evento-terror-arana svg {
  display: block;
  width: 22px;
  height: 22px;
}

.evento-terror-cuerpo { fill: #050304; }
.evento-terror-patas { stroke: #050304; stroke-width: 1.4; fill: none; }
.evento-terror-ojo { fill: #b3121f; }

@keyframes eventoTerrorBajar {
  0%, 100% { transform: translateY(-40%) rotate(-3deg); }
  50%      { transform: translateY(0) rotate(3deg); }
}

/* ---------- El cartel ---------- */
.evento-terror-cartel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(26, 10, 12, 0.97), rgba(14, 6, 8, 0.98));
  border: 1px solid #5c0f16;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.15) inset, 0 0 40px rgba(139, 13, 24, 0.45);
  animation: eventoTerrorAparecer 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

@keyframes eventoTerrorAparecer {
  from { opacity: 0; transform: translateY(4%) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Esquinas doradas. */
.evento-terror-cartel::before,
.evento-terror-cartel::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #c9a227;
  z-index: 1;
  pointer-events: none;
}

.evento-terror-cartel::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.evento-terror-cartel::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

.evento-terror-pantallas {
  display: flex;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.evento-terror-pantallas::-webkit-scrollbar {
  display: none;
}

.evento-terror-pantalla {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: center;
  padding: 24px 18px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  text-align: center;
}

/* Pantalla 1 */
.evento-terror-luna {
  position: relative;
  width: 70px;
  height: 70px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #f3e6d0, #c9b58f 60%, #8a7652);
  box-shadow: 0 0 30px rgba(243, 230, 208, 0.35);
}

.evento-terror-luna::after {
  content: '\1F987';
  position: absolute;
  right: -16px;
  top: -6px;
  font-size: 22px;
  animation: eventoTerrorVuelo 3s ease-in-out infinite;
}

@keyframes eventoTerrorVuelo {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-10px, 6px); }
}

.evento-terror-calabazas {
  font-size: 28px;
  letter-spacing: 8px;
  line-height: 1;
}

.evento-terror-intro {
  margin: 0;
  font-family: 'Creepster', 'Poppins', cursive;
  font-weight: 400;
  font-size: clamp(30px, 9vw, 38px);
  line-height: 1.05;
  color: #e0761b;
  text-shadow: 0 0 16px rgba(224, 118, 27, 0.45);
  text-wrap: balance;
}

.evento-terror-texto {
  margin: 0;
  max-width: 28ch;
  font-size: 15px;
  line-height: 1.55;
  color: #e8dcc4;
  text-wrap: pretty;
}

.evento-terror-texto strong {
  color: #c9a227;
}

.evento-terror-deslizar {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #b9a98f;
  animation: eventoTerrorEmpuje 1.6s ease-in-out infinite;
}

@keyframes eventoTerrorEmpuje {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* Pantalla 2 */
.evento-terror-aviso {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c9a227;
}

.evento-terror-titulo {
  margin: 0;
  font-family: 'Creepster', 'Poppins', cursive;
  font-weight: 400;
  font-size: clamp(36px, 11vw, 48px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #e8dcc4;
  text-shadow: 0 2px 0 #5a0610, 0 0 18px rgba(179, 18, 31, 0.55);
}

.evento-terror-titulo span {
  display: block;
  color: #b3121f;
}

.evento-terror-goteo {
  width: 150px;
  height: 16px;
  margin-top: -10px;
  flex: 0 0 auto;
}

.evento-terror-goteo path {
  fill: #8b0d18;
}

.evento-terror-items {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.evento-terror-items li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 9px;
  border: 1px solid #5c0f16;
  border-radius: 4px;
  background: rgba(11, 6, 7, 0.55);
  font-size: 12.5px;
  line-height: 1.38;
  color: #e8dcc4;
}

.evento-terror-items li span:first-child {
  font-size: 16px;
  line-height: 1.1;
  text-align: center;
}

.evento-terror-items b {
  font-weight: 600;
  color: #c9a227;
}

.evento-terror-items li.limitado {
  border-color: #b3121f;
  background: rgba(90, 6, 16, 0.35);
}

.evento-terror-items li.limitado b {
  color: #ff6b6b;
}

/* Pie: puntitos, botón principal y "Ahora no" */
.evento-terror-pie {
  flex: 0 0 auto;
  padding: 6px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.evento-terror-puntos {
  display: flex;
  gap: 8px;
}

.evento-terror-punto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #5c0f16;
  cursor: pointer;
}

.evento-terror-punto[aria-current="true"] {
  background: #b3121f;
  box-shadow: 0 0 8px #b3121f;
}

.evento-terror-boton {
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: 4px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #f3e6d0;
  background: linear-gradient(180deg, #b3121f, #5a0610);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.45), 0 0 20px rgba(179, 18, 31, 0.5);
  cursor: pointer;
}

.evento-terror-boton:hover {
  transform: none;
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.7), 0 0 24px rgba(179, 18, 31, 0.65);
}

.evento-terror-boton.latido {
  animation: eventoTerrorLatido 2.2s ease-in-out infinite;
}

@keyframes eventoTerrorLatido {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.03); }
  24%      { transform: scale(1); }
  36%      { transform: scale(1.02); }
}

.evento-terror-ahora-no {
  padding: 2px 6px;
  border: 0;
  background: none;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  color: #b9a98f;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.evento-terror-ahora-no:hover {
  transform: none;
  box-shadow: none;
}

.evento-terror-boton:focus-visible,
.evento-terror-ahora-no:focus-visible,
.evento-terror-punto:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 3px;
}

/* Pantallas bajas (celulares chicos, o con la barra del navegador): todo
   un poco más compacto para que no haga falta scroll vertical. */
@media (max-height: 700px) {
  .evento-terror-pantalla { padding: 18px 16px 4px; gap: 8px; }
  .evento-terror-luna { width: 54px; height: 54px; }
  .evento-terror-calabazas { font-size: 24px; }
  .evento-terror-texto { font-size: 14px; line-height: 1.45; }
  .evento-terror-titulo { font-size: clamp(32px, 10vw, 40px); }
  .evento-terror-items { gap: 5px; }
  .evento-terror-items li { padding: 5px 8px; font-size: 12px; line-height: 1.32; }
  .evento-terror-pie { padding: 4px 16px 12px; gap: 8px; }
  .evento-terror-boton { padding: 11px 14px; }
}

@media (max-height: 600px) {
  .evento-terror-luna { display: none; }
  .evento-terror-items li { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .evento-terror-niebla,
  .evento-terror-arana,
  .evento-terror-cartel,
  .evento-terror-luna::after,
  .evento-terror-deslizar,
  .evento-terror-boton.latido {
    animation: none;
  }
}

/* ============================================================
   TERROR LEGEND: "Conseguir más figus" y Ruleta de Terror
   (ruleta-terror.js). Bordó sangre y dorado viejo.
   ============================================================ */

/* ---------- Botón abajo de las Criptas ---------- */
.terror-conseguir-wrap {
  display: flex;
  justify-content: center;
  margin: 14px 0 6px;
}

.terror-conseguir-wrap.hidden {
  display: none;
}

.terror-conseguir-btn {
  width: min(100%, 420px);
  padding: 14px 18px;
  border: 1px solid #c9a227;
  border-radius: 6px;
  background: linear-gradient(180deg, #b3121f, #5a0610);
  color: #f3e6d0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  box-shadow: 0 0 20px rgba(179, 18, 31, 0.45);
  cursor: pointer;
}

.terror-conseguir-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(179, 18, 31, 0.6);
}

.terror-conseguir-btn:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 3px;
}

/* ---------- Ventanita con las 3 opciones ---------- */
.sticker-zoom-modal .terror-conseguir-content {
  width: 92%;
  max-width: 400px;
  gap: 12px;
  background: linear-gradient(180deg, #1a0a0c 0%, #0b0607 100%);
  border: 1px solid #5c0f16;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 26px rgba(139, 13, 24, 0.3);
}

.terror-conseguir-content .sticker-zoom-close {
  color: #e8dcc4;
}

.terror-conseguir-titulo {
  margin: 0;
  font-family: 'Creepster', 'Poppins', cursive;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: #e8dcc4;
  text-shadow: 0 0 12px rgba(139, 13, 24, 0.6);
  text-align: center;
}

.terror-conseguir-opciones {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.terror-conseguir-opcion {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 8px;
  background: rgba(42, 13, 16, 0.92);
  color: #e8dcc4;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.terror-conseguir-opcion:hover,
.terror-conseguir-opcion:focus-visible {
  outline: none;
  transform: none;
  border-color: #c9a227;
  box-shadow: 0 0 12px rgba(139, 13, 24, 0.45);
}

.terror-conseguir-opcion strong {
  font-size: 16px;
}

.terror-conseguir-opcion span {
  font-size: 0.82rem;
  color: #b9a98f;
}

.terror-conseguir-opcion span.listo {
  color: #ff6b6b;
  font-weight: 700;
}

/* ---------- Tarjeta en Rulesobre ---------- */
.terror-ruleta-acceso {
  margin-top: 16px;
}

.terror-ruleta-acceso.hidden {
  display: none;
}

.terror-ruleta-acceso-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #5c0f16;
  border-radius: 12px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(179, 18, 31, 0.35), transparent 60%),
    linear-gradient(180deg, #1a0a0c, #0b0607);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.2) inset, 0 8px 22px rgba(0, 0, 0, 0.5);
  color: #e8dcc4;
  font-family: 'Poppins', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

.terror-ruleta-acceso-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.45) inset, 0 0 22px rgba(139, 13, 24, 0.45);
}

.terror-ruleta-acceso.listo .terror-ruleta-acceso-btn {
  border-color: #c9a227;
}

.terror-ruleta-acceso-icono {
  font-size: 30px;
  line-height: 1;
}

.terror-ruleta-acceso-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.terror-ruleta-acceso-texto strong {
  font-family: 'Creepster', 'Poppins', cursive;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(179, 18, 31, 0.6);
}

.terror-ruleta-acceso-estado {
  font-size: 0.85rem;
  color: #b9a98f;
  font-variant-numeric: tabular-nums;
}

.terror-ruleta-acceso.listo .terror-ruleta-acceso-estado {
  color: #c9a227;
  font-weight: 700;
}

.terror-ruleta-acceso-flecha {
  font-size: 26px;
  color: #c9a227;
}

/* ---------- Pantalla de la Ruleta de Terror ---------- */
.terror-ruleta-pantalla {
  position: relative;
  overflow: hidden;
  max-width: 440px;
  margin: 0 auto;
  padding: 14px 16px 22px;
  border: 1px solid #5c0f16;
  border-radius: 16px;
  background: radial-gradient(110% 60% at 50% 35%, #3a0a12 0%, #160709 55%, #080405 100%);
  box-shadow: 0 0 40px rgba(139, 13, 24, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #e8dcc4;
  font-family: 'Poppins', system-ui, sans-serif;
}

.terror-ruleta-niebla {
  position: absolute;
  left: -40%;
  right: -40%;
  bottom: -6%;
  height: 35%;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 30% 60%, rgba(232, 220, 196, 0.1), transparent 70%),
    radial-gradient(35% 45% at 70% 70%, rgba(232, 220, 196, 0.07), transparent 70%);
  animation: terrorRuletaNiebla 14s ease-in-out infinite alternate;
}

@keyframes terrorRuletaNiebla {
  from { transform: translateX(-6%); }
  to   { transform: translateX(6%); }
}

.terror-ruleta-tela {
  position: absolute;
  top: 0;
  width: 96px;
  height: 96px;
  opacity: 0.45;
  pointer-events: none;
}

.terror-ruleta-tela.izquierda { left: 0; }
.terror-ruleta-tela.derecha { right: 0; transform: scaleX(-1); }

.terror-ruleta-tela svg {
  width: 100%;
  height: 100%;
}

.terror-ruleta-tela path {
  fill: none;
  stroke: #e8dcc4;
  stroke-width: 0.8;
}

.terror-ruleta-barra {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.terror-ruleta-volver {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #b3121f, #5a0610);
  color: #f3e6d0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.terror-ruleta-titulo {
  margin: 0;
  font-family: 'Creepster', 'Poppins', cursive;
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: 0.03em;
  color: #e8dcc4;
  text-shadow: 0 0 12px rgba(179, 18, 31, 0.6);
}

.terror-ruleta-estado {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  padding: 5px 12px;
  border: 1px solid #5c0f16;
  border-radius: 3px;
  background: rgba(11, 6, 7, 0.6);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: #c9a227;
  font-variant-numeric: tabular-nums;
}

.terror-ruleta-estado.esperando {
  color: #b9a98f;
}

.terror-ruleta-zona {
  position: relative;
  z-index: 1;
  width: min(80%, 330px);
  aspect-ratio: 1;
  margin-top: 20px;
}

.terror-ruleta-canvas {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 5.2s cubic-bezier(0.12, 0.72, 0.08, 1);
}

.terror-ruleta-puntero {
  position: absolute;
  left: 50%;
  top: -16px;
  z-index: 2;
  width: 34px;
  height: 52px;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
}

.terror-ruleta-girar {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 27%;
  aspect-ratio: 1;
  padding: 0;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 3px solid #c9a227;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2a0d10, #0b0607 70%);
  color: #e8dcc4;
  font-family: 'Creepster', 'Poppins', cursive;
  font-size: clamp(18px, 6vw, 24px);
  letter-spacing: 0.04em;
  box-shadow: 0 0 18px rgba(179, 18, 31, 0.6), inset 0 0 12px rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.terror-ruleta-girar:hover {
  transform: translate(-50%, -50%);
}

.terror-ruleta-girar:not(:disabled) {
  animation: terrorRuletaLatido 2.2s ease-in-out infinite;
}

.terror-ruleta-girar:disabled {
  cursor: default;
  color: #b9a98f;
  border-color: #6d5a2a;
  box-shadow: none;
}

@keyframes terrorRuletaLatido {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  15%      { transform: translate(-50%, -50%) scale(1.06); }
  30%      { transform: translate(-50%, -50%) scale(1); }
}

.terror-ruleta-volver:focus-visible,
.terror-ruleta-girar:focus-visible,
.terror-ruleta-res-cerrar:focus-visible,
.terror-ruleta-sobre:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 3px;
}

.terror-ruleta-premios {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.terror-ruleta-premio {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #5c0f16;
  border-radius: 3px;
  background: rgba(11, 6, 7, 0.55);
  font-size: 12.5px;
}

.terror-ruleta-premio i {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.terror-ruleta-premio b {
  font-weight: 600;
  color: #b9a98f;
  font-variant-numeric: tabular-nums;
}

.terror-ruleta-premio.gordo {
  border-color: #c9a227;
}

.terror-ruleta-premio.gordo b {
  color: #c9a227;
}

.terror-ruleta-leyenda {
  position: relative;
  z-index: 2;
  margin: 6px 0 0;
  font-size: 11px;
  color: #b9a98f;
  text-align: center;
}

/* Cartel del resultado (¡BU! / resumen). */
.terror-ruleta-resultado {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 0 22px;
  background: rgba(8, 4, 5, 0.82);
}

.terror-ruleta-resultado.hidden {
  display: none;
}

.terror-ruleta-tarjeta {
  width: 100%;
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  border: 1px solid #5c0f16;
  border-radius: 6px;
  background: linear-gradient(180deg, #1a0a0c, #0e0608);
  box-shadow: 0 0 40px rgba(139, 13, 24, 0.5);
  animation: terrorRuletaSalta 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

@keyframes terrorRuletaSalta {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.terror-ruleta-res-icono {
  font-size: 54px;
  line-height: 1;
}

.terror-ruleta-res-titulo {
  margin: 0;
  font-family: 'Creepster', 'Poppins', cursive;
  font-weight: 400;
  font-size: 30px;
  color: #e8dcc4;
  text-shadow: 0 0 14px rgba(179, 18, 31, 0.6);
}

.terror-ruleta-res-texto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #b9a98f;
}

.terror-ruleta-res-texto p {
  margin: 0;
}

.terror-ruleta-mini {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.terror-ruleta-mini span {
  padding: 3px 8px;
  border: 1px solid #5c0f16;
  border-radius: 3px;
  background: rgba(11, 6, 7, 0.6);
  font-size: 11px;
  color: #e8dcc4;
}

.terror-ruleta-res-cerrar {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, #b3121f, #5a0610);
  color: #f3e6d0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.45);
  cursor: pointer;
}

.terror-ruleta-destello {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(179, 18, 31, 0.45);
  pointer-events: none;
  animation: terrorRuletaDestello 0.6s ease-out both;
}

@keyframes terrorRuletaDestello {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* El sobre que cae en el lugar de la rueda. */
.terror-ruleta-zona.oculta .terror-ruleta-canvas,
.terror-ruleta-zona.oculta .terror-ruleta-girar,
.terror-ruleta-zona.oculta .terror-ruleta-puntero {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.terror-ruleta-escena {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
}

.terror-ruleta-escena.hidden {
  display: none;
}

.terror-ruleta-sobre {
  position: relative;
  width: 52%;
  aspect-ratio: 2 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(160deg, #2a0d10 0%, #120608 55%, #3a0a12 100%);
  box-shadow: 0 0 0 2px #c9a227, 0 0 30px rgba(179, 18, 31, 0.7);
  color: #e8dcc4;
  font-family: 'Creepster', 'Poppins', cursive;
  cursor: pointer;
  animation: terrorRuletaCaer 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.25) both, terrorRuletaFlotar 2.4s ease-in-out 0.7s infinite;
}

.terror-ruleta-sobre:hover {
  transform: none;
}

/* Tira de arriba, la que se rompe al abrir. */
.terror-ruleta-sobre::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14%;
  background: repeating-linear-gradient(90deg, #c9a227 0 6px, #8a6c16 6px 12px);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 90% 70%, 85% 100%, 80% 70%, 75% 100%, 70% 70%, 65% 100%, 60% 70%, 55% 100%, 50% 70%, 45% 100%, 40% 70%, 35% 100%, 30% 70%, 25% 100%, 20% 70%, 15% 100%, 10% 70%, 5% 100%, 0 70%);
  transition: transform 0.5s ease-in, opacity 0.5s;
}

.terror-ruleta-sobre-titulo {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  text-align: center;
  font-size: clamp(20px, 7vw, 28px);
  line-height: 0.95;
  text-shadow: 0 0 10px rgba(179, 18, 31, 0.8);
}

.terror-ruleta-sobre-titulo span {
  color: #b3121f;
}

.terror-ruleta-sobre-craneo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16%;
  text-align: center;
  font-size: 34px;
}

.terror-ruleta-sobre-cant {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
  text-align: center;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #c9a227;
}

.terror-ruleta-sobre.abriendo {
  animation: terrorRuletaTemblor 0.5s linear both;
}

.terror-ruleta-sobre.abriendo::before {
  transform: translateY(-120%) rotate(-8deg);
  opacity: 0;
}

.terror-ruleta-sobre.abierto {
  pointer-events: none;
  animation: terrorRuletaIrse 0.45s ease-in both;
}

@keyframes terrorRuletaCaer {
  from { transform: translateY(-120%) rotate(-10deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

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

@keyframes terrorRuletaTemblor {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-4deg); }
  40%      { transform: rotate(4deg); }
  60%      { transform: rotate(-3deg); }
  80%      { transform: rotate(3deg); }
}

@keyframes terrorRuletaIrse {
  to { transform: translateY(40%) scale(0.7); opacity: 0; }
}

.terror-ruleta-pista {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  text-align: center;
  font-size: 12px;
  color: #b9a98f;
}

/* Arañas que bajan al abrir el sobre. */
.terror-ruleta-arana {
  position: absolute;
  top: 0;
  z-index: 7;
  width: 20px;
  pointer-events: none;
  animation: terrorRuletaAranaBaja 2s ease-in-out both;
}

.terror-ruleta-arana i {
  display: block;
  width: 1px;
  height: var(--l);
  margin: 0 auto;
  background: rgba(232, 220, 196, 0.55);
}

.terror-ruleta-arana svg {
  display: block;
  width: 20px;
  height: 20px;
}

@keyframes terrorRuletaAranaBaja {
  0%        { transform: translateY(-100%); }
  45%, 60%  { transform: translateY(0); }
  100%      { transform: translateY(-100%); }
}

/* Etiqueta "Solo Terror Legend ✕" del Mercado (app.js,
   pintarFiltroAlbumForzadoMercado). */
.mercado-album-forzado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  padding: 5px 6px 5px 12px;
  border: 1px solid rgba(103, 244, 127, 0.4);
  border-radius: 999px;
  background: rgba(10, 26, 13, 0.9);
  font-size: 13px;
  font-weight: 600;
  color: #e8ffe8;
}

.mercado-album-forzado.tema-terror {
  border-color: #c9a227;
  background: linear-gradient(180deg, #2a0d10, #120608);
  color: #e8dcc4;
}

.mercado-album-forzado-quitar {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .terror-ruleta-niebla,
  .terror-ruleta-girar:not(:disabled),
  .terror-ruleta-tarjeta,
  .terror-ruleta-destello,
  .terror-ruleta-sobre,
  .terror-ruleta-sobre.abriendo,
  .terror-ruleta-sobre.abierto,
  .terror-ruleta-arana {
    animation: none;
  }
  .terror-ruleta-canvas {
    transition: none;
  }
  .terror-conseguir-btn:hover,
  .terror-ruleta-acceso-btn:hover {
    transform: none;
  }
}

/* ============================================================
   ICONOS DEL EVENTO TERROR LEGEND (iconoTerror en app.js):
   reemplazan a los emojis solo en las pantallas de Terror Legend.
   Tamaño fijo (width/height del <img>), alineados con el texto.
   ============================================================ */
.icono-terror {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

.icono-terror img {
  display: block;
  object-fit: contain;
  /* Contorno claro sutil: varios iconos son oscuros y se perdían sobre
     el bordó y el negro del tema (murciélago, reloj, telaraña). */
  filter: drop-shadow(0 0 1px rgba(243, 230, 208, 0.9)) drop-shadow(0 0 3px rgba(243, 230, 208, 0.35));
}

/* ============================================================
   TERROR LEGEND: "Elegir figurita" (ruleta-terror.js, códigos
   'elegir_figu_terror'). Botón al lado de "Conseguir más figus" y
   ventana con la grilla de las que te faltan (foto, número, cripta y
   rareza; sin nombre).
   ============================================================ */
.terror-conseguir-wrap {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.terror-conseguir-btn.hidden {
  display: none;
}

.terror-elegir-btn {
  background: linear-gradient(180deg, #4a2560, #2a1236);
  box-shadow: 0 0 20px rgba(74, 37, 96, 0.5);
}

.sticker-zoom-modal .terror-elegir-content {
  max-width: 560px;
  max-height: 88vh;
  overflow: hidden;
}

.terror-elegir-ayuda {
  margin: 0;
  font-size: 13px;
  color: #b9a98f;
  text-align: center;
}

.terror-elegir-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  width: 100%;
  max-height: 52vh;
  overflow-y: auto;
  padding: 4px;
  /* Barra del tema (si no, sale blanca sobre el fondo oscuro). */
  scrollbar-color: #5c0f16 #0b0607;
  scrollbar-width: thin;
}

.terror-elegir-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px 8px;
  border: 1px solid #5c0f16;
  border-top: 3px solid var(--rareza, #7f8b7f);
  border-radius: 6px;
  background: rgba(11, 6, 7, 0.7);
  color: #e8dcc4;
  font-family: 'Poppins', system-ui, sans-serif;
  cursor: pointer;
}

.terror-elegir-item:hover,
.terror-elegir-item:focus-visible {
  border-color: #c9a227;
  outline: none;
}

.terror-elegir-item[aria-pressed="true"] {
  border-color: #c9a227;
  box-shadow: 0 0 0 2px #c9a227, 0 0 16px rgba(201, 162, 39, 0.45);
}

.terror-elegir-item img,
.terror-elegir-sin-foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
  background: #0b0607;
}

.terror-elegir-sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #5c0f16;
}

.terror-elegir-item strong {
  font-size: 13px;
}

.terror-elegir-cripta {
  font-size: 11px;
  color: #b9a98f;
}

.terror-elegir-rareza {
  font-size: 11px;
  font-weight: 700;
  color: var(--rareza, #7f8b7f);
}

.terror-elegir-vacio {
  grid-column: 1 / -1;
  margin: 12px 0;
  text-align: center;
  color: #b9a98f;
}

.terror-elegir-confirmar:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}