/* Identidades y transiciones. Generado: NO editar a mano;
   la fuente vive en C:\ShaiyaFusionGame\identidad\ */

/* ═══════════════════════════════════════════════════════════════════════
   _transiciones.css · Cortinas de entrada y salida de los 12 juegos
   ───────────────────────────────────────────────────────────────────────
   Una cortina NO es un fundido a negro genérico. Cada juego cubre la
   pantalla con SU gesto: las placas de minas caen, la losa de la torre
   sube, el agua de pesca inunda, el cuadrante de la ruleta frena.
   Doce motivos, doce curvas, doce duraciones.

   Sin degradados sobre texto, sin resplandores de color, sin cristal
   esmerilado, sin bordes dorados translúcidos. Solo color macizo,
   forma, opacidad y transformación.

   El marcado lo construye _transiciones.js — este archivo no exige
   tocar juegos.html ni index.html.
   ═══════════════════════════════════════════════════════════════════════ */

.ct{
  position:fixed; inset:0; z-index:9000;
  pointer-events:auto;                 /* la cortina bloquea el toque mientras dura */
  overflow:hidden;
  contain:strict;
  /* valores por defecto; cada juego los sobrescribe */
  --ct-ac:#8899aa;
  --ct-fondo:#07070a;
  --ct-tinta:#e9e6e0;
  --ct-cubrir:230ms;
  --ct-revelar:280ms;
  --ct-e-cubrir:cubic-bezier(.4,0,.2,1);
  --ct-e-revelar:cubic-bezier(.4,0,.2,1);
}
.ct[hidden]{display:none}

/* ── El lienzo: el color de fondo macizo del juego que se abre ───────── */
.ct-lienzo{
  position:absolute; inset:0;
  background:var(--ct-fondo);
  opacity:0;
  animation:ct-lienzo-in var(--ct-cubrir) var(--ct-e-cubrir) forwards;
}
.ct--revelar .ct-lienzo{
  opacity:1;
  animation:ct-lienzo-out var(--ct-revelar) var(--ct-e-revelar) forwards;
}
@keyframes ct-lienzo-in { from{opacity:0} to{opacity:1} }
@keyframes ct-lienzo-out{ from{opacity:1} to{opacity:0} }

/* ── Las hojas: la forma que barre la pantalla. Cambia por juego ─────── */
.ct-hojas{position:absolute; inset:0}
/* El escalonado (--ct-esc) va DENTRO de la fase, nunca encima: la última
   hoja termina justo al cumplirse --ct-cubrir. Así la cortina de entrada
   completa cae siempre entre 380 y 650 ms, tenga 1 hoja o 25.
   _transiciones.js calcula --ct-paso y --ct-esc y los inyecta en línea. */
.ct-hoja{
  position:absolute;
  background:var(--ct-fondo);
  will-change:transform,opacity;
  animation-duration:calc(var(--ct-cubrir) - var(--ct-esc, 0ms));
  animation-timing-function:var(--ct-e-cubrir);
  animation-fill-mode:both;
  animation-delay:calc(var(--i,0) * var(--ct-paso, 0ms));
}
.ct--revelar .ct-hoja{
  animation-duration:calc(var(--ct-revelar) - var(--ct-esc, 0ms));
  animation-timing-function:var(--ct-e-revelar);
  animation-delay:calc(var(--n,0) * var(--ct-paso, 0ms));
}

/* ── El núcleo: icono + nombre del juego ─────────────────────────────── */
.ct-nucleo{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.7rem;
  opacity:0;
  animation:ct-nucleo-in calc(var(--ct-cubrir) * .9) var(--ct-e-cubrir)
            calc(var(--ct-cubrir) * .45) both;
}
.ct--revelar .ct-nucleo{
  animation:ct-nucleo-out calc(var(--ct-revelar) * .55) cubic-bezier(.55,0,1,.45) both;
}
@keyframes ct-nucleo-in { from{opacity:0} to{opacity:1} }
@keyframes ct-nucleo-out{ from{opacity:1} to{opacity:0} }

.ct-ico{
  font-size:clamp(2.6rem, 11vmin, 4.4rem);
  line-height:1;
  filter:saturate(1.05);
}
.ct-nom{
  font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
              "Liberation Mono", monospace;
  font-variant-numeric:tabular-nums;
  font-size:clamp(.72rem, 3.1vmin, 1rem);
  letter-spacing:.34em;
  text-indent:.34em;                  /* compensa el espaciado de la última letra */
  font-weight:700;
  color:var(--ct-tinta);
  text-align:center;
  white-space:nowrap;
}
/* La barra de carga: única pieza teñida con el acento del juego */
.ct-barra{
  width:clamp(80px, 26vmin, 150px);
  height:2px;
  background:#2a2a30;
  overflow:hidden;
}
.ct-barra::after{
  content:""; display:block; height:100%; width:100%;
  background:var(--ct-ac);
  transform:scaleX(0); transform-origin:left center;
  animation:ct-barra calc(var(--ct-cubrir) + var(--ct-revelar) * .45) linear both;
}
@keyframes ct-barra{ from{transform:scaleX(0)} to{transform:scaleX(1)} }

/* La voz del juego: una línea corta, en su tono */
.ct-voz{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric:tabular-nums;
  font-size:clamp(.55rem, 2.2vmin, .68rem);
  letter-spacing:.16em;
  color:#8a8a94;
  text-transform:uppercase;
  text-align:center;
  padding:0 8vw;
  max-width:34ch;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOS DOCE MOTIVOS
   Cada bloque: acento, fondo, duraciones, curvas y forma de las hojas.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · MULTIPLICADOR ────────────────────────────────────────────────
   Consola de vuelo. Dos paneles de chapa se cierran como el techo de una
   cabina y se abren de golpe. Curva de ascenso: sale despacio, llega seco. */
.ct[data-j="multiplicador"]{
  --ct-ac:#22d3a7; --ct-fondo:#0a1014;
  --ct-cubrir:240ms; --ct-revelar:290ms;
  --ct-e-cubrir:cubic-bezier(.33,0,.15,1);
  --ct-e-revelar:cubic-bezier(.7,0,.2,1);
}
.ct[data-j="multiplicador"] .ct-hoja{
  left:0; right:0; height:50.5%;
  border-block:1px solid #16323a;
  animation-name:ct-mult-in;
}
.ct[data-j="multiplicador"] .ct-hoja:nth-child(1){top:0;   --dir:-1}
.ct[data-j="multiplicador"] .ct-hoja:nth-child(2){bottom:0;--dir: 1}
.ct--revelar[data-j="multiplicador"] .ct-hoja{animation-name:ct-mult-out}
@keyframes ct-mult-in { from{transform:translateY(calc(var(--dir) * 100%))} to{transform:translateY(0)} }
@keyframes ct-mult-out{ from{transform:translateY(0)} to{transform:translateY(calc(var(--dir) * 100%))} }

/* ── 2 · MINAS ────────────────────────────────────────────────────────
   Veinticinco placas de acero remachadas caen sobre la pantalla en
   diagonal, una tras otra, y se levantan igual. Golpe seco, sin rebote. */
.ct[data-j="minas"]{
  --ct-ac:#ff5c47; --ct-fondo:#14100e;
  --ct-cubrir:250ms; --ct-revelar:300ms; --ct-paso:11ms;
  --ct-e-cubrir:cubic-bezier(.5,0,.75,0);      /* entra acelerando: cae */
  --ct-e-revelar:cubic-bezier(.2,.9,.3,1);
}
.ct[data-j="minas"] .ct-hojas{
  display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr);
}
.ct[data-j="minas"] .ct-hoja{
  position:relative; inset:auto;
  outline:1px solid #241b17; outline-offset:-1px;
  animation-name:ct-minas-in;
}
.ct--revelar[data-j="minas"] .ct-hoja{animation-name:ct-minas-out}
@keyframes ct-minas-in { from{transform:translateY(-115%)} to{transform:translateY(0)} }
@keyframes ct-minas-out{ from{transform:translateY(0)} to{transform:translateY(115%)} }

/* ── 3 · LA TORRE ─────────────────────────────────────────────────────
   Una losa de piedra sube desde abajo y se queda. Es el juego más lento
   de los doce: la torre no tiene prisa. Tres arcos marcados en el canto. */
.ct[data-j="torre"]{
  --ct-ac:#a78bfa; --ct-fondo:#0d0b14;
  --ct-cubrir:290ms; --ct-revelar:330ms;
  --ct-e-cubrir:cubic-bezier(.22,.7,.2,1);
  --ct-e-revelar:cubic-bezier(.6,0,.3,1);
}
.ct[data-j="torre"] .ct-hoja{
  left:0; right:0; bottom:0; height:100%;
  border-top:3px solid #241d38;
  animation-name:ct-torre-in;
}
/* los tres arcos del rellano, dibujados en el borde superior de la losa */
.ct[data-j="torre"] .ct-hoja::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:44px;
  background:
    radial-gradient(28px 44px at 16.6% 100%, #241d38 0 99%, transparent 100%),
    radial-gradient(28px 44px at 50%   100%, #241d38 0 99%, transparent 100%),
    radial-gradient(28px 44px at 83.3% 100%, #241d38 0 99%, transparent 100%);
}
.ct--revelar[data-j="torre"] .ct-hoja{animation-name:ct-torre-out}
@keyframes ct-torre-in { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes ct-torre-out{ from{transform:translateY(0)} to{transform:translateY(-100%)} }

/* ── 4 · PESCA ────────────────────────────────────────────────────────
   El agua sube. No hay golpe en ninguna parte: entra blanda y se retira
   blanda, con la superficie ondulada del nivel de agua. */
.ct[data-j="pesca"]{
  --ct-ac:#38bdf8; --ct-fondo:#071722;
  --ct-cubrir:275ms; --ct-revelar:340ms;
  --ct-e-cubrir:cubic-bezier(.35,.5,.25,1);
  --ct-e-revelar:cubic-bezier(.45,.05,.4,1);
}
.ct[data-j="pesca"] .ct-hoja{
  left:0; right:0; bottom:0; height:100%;
  animation-name:ct-pesca-in;
}
.ct[data-j="pesca"] .ct-hoja::before{      /* la superficie del agua */
  content:""; position:absolute; left:-6%; right:-6%; top:-13px; height:26px;
  background:radial-gradient(14px 13px at 14px 13px, #071722 0 98%, transparent 100%) repeat-x 0 0/28px 26px;
}
.ct--revelar[data-j="pesca"] .ct-hoja{animation-name:ct-pesca-out}
@keyframes ct-pesca-in { from{transform:translateY(102%)} to{transform:translateY(0)} }
@keyframes ct-pesca-out{ from{transform:translateY(0)} to{transform:translateY(102%)} }
.ct[data-j="pesca"] .ct-ico{animation:ct-flota 2.4s ease-in-out infinite}
@keyframes ct-flota{ 0%,100%{transform:translateY(-3px)} 50%{transform:translateY(3px)} }

/* ── 5 · GUERRA DE FACCIONES ──────────────────────────────────────────
   Dos mitades chocan en el centro y se abren. Es un impacto: la curva
   frena en seco al encontrarse. */
.ct[data-j="guerra"]{
  --ct-ac:#fbbf24; --ct-fondo:#0c0b09;
  --ct-cubrir:225ms; --ct-revelar:270ms;
  --ct-e-cubrir:cubic-bezier(.6,0,.35,1);
  --ct-e-revelar:cubic-bezier(.3,0,.2,1);
}
.ct[data-j="guerra"] .ct-hoja{
  top:0; bottom:0; width:50.5%;
  animation-name:ct-guerra-in;
}
.ct[data-j="guerra"] .ct-hoja:nth-child(1){left:0;  --dir:-1; border-right:2px solid #2a2416}
.ct[data-j="guerra"] .ct-hoja:nth-child(2){right:0; --dir: 1; border-left:2px solid #2a2416}
.ct--revelar[data-j="guerra"] .ct-hoja{animation-name:ct-guerra-out}
@keyframes ct-guerra-in { from{transform:translateX(calc(var(--dir) * 101%))} to{transform:translateX(0)} }
@keyframes ct-guerra-out{ from{transform:translateX(0)} to{transform:translateX(calc(var(--dir) * 101%))} }

/* ── 6 · TIENDA (canje) ───────────────────────────────────────────────
   Una persiana de ventanilla. Seis lamas horizontales bajan a la vez y
   suben a la vez: es un trámite, no un espectáculo. La más corta. */
.ct[data-j="tienda"]{
  --ct-ac:#4ade80; --ct-fondo:#0b0f0c;
  --ct-cubrir:190ms; --ct-revelar:230ms; --ct-paso:6ms;
  --ct-e-cubrir:cubic-bezier(.5,0,.5,1);
  --ct-e-revelar:cubic-bezier(.5,0,.5,1);
}
.ct[data-j="tienda"] .ct-hojas{display:flex; flex-direction:column}
.ct[data-j="tienda"] .ct-hoja{
  position:relative; inset:auto; flex:1;
  border-bottom:2px solid #182219;
  animation-name:ct-tienda-in;
}
.ct--revelar[data-j="tienda"] .ct-hoja{animation-name:ct-tienda-out}
@keyframes ct-tienda-in { from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes ct-tienda-out{ from{transform:scaleY(1)} to{transform:scaleY(0)} }

/* ── 7 · RULETA ───────────────────────────────────────────────────────
   Ocho sectores del cuadrante barren en abanico y FRENAN. Lo que importa
   no es el giro sino el frenado: la curva es un derrape largo. */
.ct[data-j="ruleta"]{
  --ct-ac:#34d399; --ct-fondo:#080c0b;
  --ct-cubrir:265ms; --ct-revelar:300ms; --ct-paso:14ms;
  --ct-e-cubrir:cubic-bezier(.1,.85,.2,1);     /* derrape: frena largo */
  --ct-e-revelar:cubic-bezier(.75,0,.35,1);
}
.ct[data-j="ruleta"] .ct-hojas{
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr);
}
.ct[data-j="ruleta"] .ct-hoja{
  position:relative; inset:auto;
  outline:1px solid #14201c; outline-offset:-1px;
  transform-origin:center bottom;
  animation-name:ct-ruleta-in;
}
.ct[data-j="ruleta"] .ct-hoja:nth-child(even){transform-origin:center top}
.ct--revelar[data-j="ruleta"] .ct-hoja{animation-name:ct-ruleta-out}
@keyframes ct-ruleta-in { from{transform:scaleX(0) skewX(-14deg)} to{transform:scaleX(1) skewX(0)} }
@keyframes ct-ruleta-out{ from{transform:scaleX(1) skewX(0)} to{transform:scaleX(0) skewX(14deg)} }

/* ── 8 · TRAGAMONEDAS ─────────────────────────────────────────────────
   Tres tambores pesados caen uno a uno en su muesca. El tercero llega
   tarde a propósito: ese es el juego. */
.ct[data-j="tragamonedas"]{
  --ct-ac:#f0b429; --ct-fondo:#100d07;
  --ct-cubrir:255ms; --ct-revelar:250ms; --ct-paso:52ms;
  --ct-e-cubrir:cubic-bezier(.32,1.5,.5,1);    /* cae y asienta en la muesca */
  --ct-e-revelar:cubic-bezier(.6,0,.3,1);
}
.ct[data-j="tragamonedas"] .ct-hojas{display:flex}
.ct[data-j="tragamonedas"] .ct-hoja{
  position:relative; inset:auto; flex:1;
  border-inline:2px solid #221b0d;
  animation-name:ct-trago-in;
}
.ct--revelar[data-j="tragamonedas"] .ct-hoja{animation-name:ct-trago-out}
@keyframes ct-trago-in { from{transform:translateY(-101%)} to{transform:translateY(0)} }
@keyframes ct-trago-out{ from{transform:translateY(0)} to{transform:translateY(101%)} }

/* ── 9 · BLACKJACK ────────────────────────────────────────────────────
   El fieltro se despliega y encima cruza el arco de la casa. El único
   motivo que gira sobre un eje 3D: es una carta que se voltea. */
.ct[data-j="blackjack"]{
  --ct-ac:#60a5fa; --ct-fondo:#101a26;
  --ct-cubrir:235ms; --ct-revelar:275ms;
  --ct-e-cubrir:cubic-bezier(.25,.8,.3,1);
  --ct-e-revelar:cubic-bezier(.55,0,.35,1);
  perspective:900px;
}
.ct[data-j="blackjack"] .ct-hoja{
  inset:0;
  transform-origin:center left;
  animation-name:ct-bj-in;
}
.ct[data-j="blackjack"] .ct-hoja::before{     /* el arco serigrafiado de la casa */
  content:""; position:absolute; left:6%; right:6%; top:14%; height:46%;
  border:2px solid #1d3040; border-bottom:0;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.ct--revelar[data-j="blackjack"] .ct-hoja{animation-name:ct-bj-out}
@keyframes ct-bj-in { from{transform:rotateY(-92deg)} to{transform:rotateY(0)} }
@keyframes ct-bj-out{ from{transform:rotateY(0)} to{transform:rotateY(92deg)} }

/* ── 10 · DADOS ───────────────────────────────────────────────────────
   El hueso cae al foso y REBOTA una vez. Es el único motivo con rebote
   real, y en la salida se queda 280 ms de más: la espera de la casa. */
.ct[data-j="dados"]{
  --ct-ac:#c084fc; --ct-fondo:#171223;
  --ct-cubrir:245ms; --ct-revelar:265ms;
  --ct-e-cubrir:cubic-bezier(.3,1.7,.45,.94);  /* rebote del hueso */
  --ct-e-revelar:cubic-bezier(.5,0,.75,0);     /* se desploma */
}
.ct[data-j="dados"] .ct-hoja{
  inset:0;
  border:3px solid #2a2140;                    /* el canto de piedra del foso */
  animation-name:ct-dados-in;
}
.ct--revelar[data-j="dados"] .ct-hoja{animation-name:ct-dados-out}
@keyframes ct-dados-in { from{transform:translateY(-100%) rotate(-2.5deg)} to{transform:translateY(0) rotate(0)} }
@keyframes ct-dados-out{ from{transform:translateY(0) rotate(0)} to{transform:translateY(100%) rotate(2deg)} }

/* ── 11 · GUERRA DE CARTAS ────────────────────────────────────────────
   Un tajo en diagonal. Dos hojas se cruzan y desaparecen. Es la cortina
   más corta de las doce: una sola carta, un solo golpe. */
.ct[data-j="guerracartas"]{
  --ct-ac:#f87171; --ct-fondo:#0a0a0d;
  --ct-cubrir:180ms; --ct-revelar:210ms;
  --ct-e-cubrir:cubic-bezier(.7,0,.25,1);      /* el filo: sale rápido, para seco */
  --ct-e-revelar:cubic-bezier(.7,0,.25,1);
}
.ct[data-j="guerracartas"] .ct-hoja{
  top:-30%; bottom:-30%; width:56%;
  animation-name:ct-gc-in;
}
.ct[data-j="guerracartas"] .ct-hoja:nth-child(1){left:0;  --dir:-1; transform-origin:top left}
.ct[data-j="guerracartas"] .ct-hoja:nth-child(2){right:0; --dir: 1; transform-origin:bottom right}
.ct--revelar[data-j="guerracartas"] .ct-hoja{animation-name:ct-gc-out}
@keyframes ct-gc-in { from{transform:translateX(calc(var(--dir) * 105%)) skewX(-9deg)} to{transform:translateX(0) skewX(-9deg)} }
@keyframes ct-gc-out{ from{transform:translateX(0) skewX(-9deg)} to{transform:translateX(calc(var(--dir) * -105%)) skewX(-9deg)} }
/* la línea de piedra que separa a los dos duelistas */
.ct[data-j="guerracartas"] .ct-nucleo::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px;
  background:#7f1d1d; transform:skewY(-9deg);
}

/* ── 12 · RASCA Y GANA ────────────────────────────────────────────────
   No hay hojas que se muevan: la lámina de plata se RASCA. Nueve
   franjas se borran a distinta velocidad, como los pasos de la moneda. */
.ct[data-j="rasca"]{
  --ct-ac:#fb923c; --ct-fondo:#1a1512;
  --ct-cubrir:260ms; --ct-revelar:300ms; --ct-paso:16ms;
  --ct-e-cubrir:cubic-bezier(.45,0,.2,1);
  --ct-e-revelar:steps(6,end);                 /* la salida se borra a tirones */
}
.ct[data-j="rasca"] .ct-hojas{display:flex}
.ct[data-j="rasca"] .ct-hoja{
  position:relative; inset:auto; flex:1;
  background:#2b2622;                          /* lámina de plata mate, no brillo */
  animation-name:ct-rasca-in;
}
.ct[data-j="rasca"] .ct-hoja:nth-child(odd){background:#242019}
.ct--revelar[data-j="rasca"] .ct-hoja{animation-name:ct-rasca-out}
@keyframes ct-rasca-in { from{transform:scaleY(0); transform-origin:top} to{transform:scaleY(1); transform-origin:top} }
@keyframes ct-rasca-out{ from{transform:scaleY(1); transform-origin:bottom} to{transform:scaleY(0); transform-origin:bottom} }

/* ═══════════════════════════════════════════════════════════════════════
   SALIDA AL CATÁLOGO
   La vuelta es siempre la misma y siempre más corta que la ida: el
   jugador ya sabe a dónde va. Barrido único, sin núcleo, sin barra.
   ═══════════════════════════════════════════════════════════════════════ */
.ct--salida{
  --ct-cubrir:150ms; --ct-revelar:190ms; --ct-paso:0ms;
  --ct-e-cubrir:cubic-bezier(.55,0,.35,1);
  --ct-e-revelar:cubic-bezier(.2,.75,.3,1);
}
.ct--salida .ct-hojas{display:block}
.ct--salida .ct-hoja{
  position:absolute; inset:0; flex:none;
  border:0; outline:0; transform-origin:center;
  animation-name:ct-salida-in !important;
}
.ct--salida .ct-hoja::before{content:none}
.ct--salida .ct-hoja:nth-child(n+2){display:none}   /* una sola hoja al volver */
.ct--revelar.ct--salida .ct-hoja{animation-name:ct-salida-out !important}
@keyframes ct-salida-in { from{transform:translateX(-101%)} to{transform:translateX(0)} }
@keyframes ct-salida-out{ from{transform:translateX(0)} to{transform:translateX(101%)} }
.ct--salida .ct-barra{display:none}
.ct--salida .ct-voz{display:none}
.ct--salida .ct-ico{font-size:clamp(1.8rem,7vmin,2.6rem); animation:none}
.ct--salida .ct-nom{font-size:clamp(.6rem,2.4vmin,.75rem); color:#8a8a94}
.ct--salida .ct-nucleo{
  animation:ct-nucleo-in calc(var(--ct-cubrir) * .8) linear both;
}
.ct--revelar.ct--salida .ct-nucleo{
  animation:ct-nucleo-out calc(var(--ct-revelar) * .5) linear both;
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD · prefers-reduced-motion
   Nada se mueve: la cortina aparece y desaparece con un fundido plano.
   El cambio de pantalla ocurre igual, en el mismo punto de la secuencia.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .ct, .ct--salida{
    --ct-cubrir:110ms; --ct-revelar:110ms; --ct-paso:0ms;
    --ct-e-cubrir:linear; --ct-e-revelar:linear;
  }
  .ct .ct-hoja{
    animation-name:ct-lienzo-in !important;
    animation-delay:0ms !important;
    transform:none !important;
  }
  .ct--revelar .ct-hoja{ animation-name:ct-lienzo-out !important }
  .ct .ct-ico{animation:none !important}
  .ct .ct-barra::after{animation:none !important; transform:scaleX(1)}
  .ct[data-j="minas"] .ct-hojas,
  .ct[data-j="ruleta"] .ct-hojas{display:block}
  .ct[data-j="minas"] .ct-hoja:nth-child(n+2),
  .ct[data-j="ruleta"] .ct-hoja:nth-child(n+2),
  .ct[data-j="tienda"] .ct-hoja:nth-child(n+2),
  .ct[data-j="rasca"] .ct-hoja:nth-child(n+2),
  .ct[data-j="tragamonedas"] .ct-hoja:nth-child(n+2){display:none}
  .ct[data-j="minas"] .ct-hoja,
  .ct[data-j="ruleta"] .ct-hoja{position:absolute; inset:0}
}