/* © RAIGA XOLOTL. Todos los derechos reservados. Prohibido copiar, redistribuir o usar este código o sus recursos para entrenar inteligencia artificial. */
/* RAIGA / MOTION LAB · Gamify · la página: lo de Gatannya (GATOPONS-DISENO § 19). Lo viste S1 (la llegada por un gatajo, la
   hoja para compartir…); las demás partes ponen lo suyo en su propio mano-<parte>.css. Va después de mano-clanes.css.
   El cuerpo de cada papel (la cosa de la llegada, los tazos, los gatajos de MIS GATAJOS) lo dibuja mano.js ([data-mano] y
   las ventanas); aquí, el acomodo, las letras y lo que se mueve. Letras: Dela para letreros, nombres y botones; Rubik para
   leer; Gatopixel solo para códigos y números. Colores de la marca, exactos; nada de degradados ni velos. Lo que entra,
   entra con golpe (sube, se pasa un poquito y se asienta) y lo que sale, sale con pop: nada se desvanece. */

/* ── La llegada: el letrero puesto a mano arriba de la cosa ── */
.gj-marco .llegada-centro { width: min(100%, 860px); gap: 18px; }
.gj-letrero { margin: 4px 0 -6px; justify-self: center; text-align: center; font: 400 44px/1.05 var(--titulo); letter-spacing: .01em; color: var(--lima);
  -webkit-text-stroke: 9px var(--tinta); paint-order: stroke fill; text-shadow: 5px 6px 0 var(--tinta); rotate: -2deg; word-spacing: .25em;
  animation: gj-golpe .42s cubic-bezier(.2, 1.6, .5, 1) both; }
.gj-letrero .w { display: inline-flex; flex-wrap: wrap; justify-content: center; }
@keyframes gj-golpe { from { transform: scale(0) rotate(-6deg); } }

/* La cosa: su papel (mano.js lo dibuja por data-mano) con la escena a la izquierda y lo que se sabe a la derecha. */
.gj-cosa { position: relative; display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 22px 30px; align-items: center;
  padding: 22px 26px 26px; background: var(--crema); border: 2px solid var(--tinta); }
.gj-cosa[data-r="1"] { --rz: var(--raro); } .gj-cosa[data-r="2"] { --rz: var(--rojo); } .gj-cosa[data-r="3"] { --rz: var(--legendario); } .gj-cosa[data-r="4"] { --rz: var(--tinta); }
.gj-datos { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.gj-nombre { font: 400 40px/1.05 var(--titulo); letter-spacing: .01em; color: var(--crema); -webkit-text-stroke: 8px var(--tinta); paint-order: stroke fill;
  text-shadow: 4px 5px 0 var(--rz, var(--tinta)); overflow-wrap: anywhere; rotate: -1.5deg; transform-origin: left center; }
.gj-nombre[data-largo="1"] { font-size: 32px; -webkit-text-stroke-width: 7px; }
.gj-sub { font: 700 18px/1.3 var(--texto); }
.gj-chips { gap: 8px; align-items: center; }
.gj-frase { font: 500 16px/1.4 var(--texto); max-width: 46ch; padding-left: 12px; border-left: 4px solid var(--tinta); }
.gj-miaus { font: 400 16px/1.2 var(--titulo); color: var(--tinta); }
.gj-tuyo { font: 400 17px/1.25 var(--titulo); color: var(--azul); rotate: -1deg; }
.gj-botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin-top: 4px; }
.gj-botones .boton.gigante { width: auto; min-width: min(100%, 300px); }
.gj-cosa-manada .gj-botones, .gj-cosa-dex .gj-botones { justify-content: center; }
.gj-puestos { gap: 8px 14px; }
.gj-puestos .puesto { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.2 var(--texto); }
.gj-puestos canvas.obj { width: 34px; height: 34px; }
.gj-titulo-chico { font: 400 20px/1.15 var(--titulo); overflow-wrap: anywhere; }

/* La escena: la imagen de la vista previa mientras llega el gato de Spine; luego la cápsula se abre (la tapa roja salta),
   el estallido del color de su rareza aparece detrás y el gato posa encima de la mitad de abajo. */
.gj-escena { position: relative; width: 100%; aspect-ratio: 1; max-width: 330px; justify-self: center; }
.gj-og { position: absolute; inset: 8% 0 auto; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border: 3px solid var(--tinta); rotate: -2deg;
  box-shadow: 6px 7px 0 var(--tinta); background: var(--carton); }
.gj-escena.vivo .gj-og { animation: gj-pop .2s ease-in forwards; }
@keyframes gj-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(0); visibility: hidden; } }
.gj-rayos, .gj-capsula, .gj-gato { position: absolute; }
.gj-rayos { inset: 6%; visibility: hidden; background: var(--rz, var(--papel)); border: 0;
  clip-path: polygon(50% 0, 58% 30%, 85% 12%, 70% 40%, 100% 48%, 70% 58%, 88% 86%, 58% 70%, 50% 100%, 42% 70%, 12% 88%, 30% 58%, 0 50%, 30% 40%, 14% 13%, 42% 30%);
  filter: drop-shadow(5px 6px 0 var(--tinta)); }
.gj-escena[data-r="0"] .gj-rayos { background: var(--papel); }
.gj-escena[data-r="4"] .gj-rayos { background: var(--lima); }
.gj-escena.vivo .gj-rayos { visibility: visible; animation: gj-golpe .45s .12s cubic-bezier(.2, 1.6, .5, 1) both; }
.gj-capsula { left: 18%; right: 18%; bottom: 3%; height: 34%; visibility: hidden; }
.gj-capsula i { position: absolute; left: 0; right: 0; height: 100%; border: 4px solid var(--tinta); }
.gj-capsula .gj-base { bottom: 0; height: 52%; background: var(--crema); border-radius: 0 0 50% 50% / 0 0 80% 80%; box-shadow: 5px 6px 0 var(--tinta); }
.gj-capsula .gj-tapa { bottom: 48%; height: 52%; background: var(--rojo); border-radius: 50% 50% 0 0 / 80% 80% 0 0; transform-origin: 85% 100%; }
.gj-escena.vivo .gj-capsula { visibility: visible; }
.gj-escena.vivo .gj-tapa { animation: gj-tapa .62s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes gj-tapa { 0% { transform: none; } 30% { transform: translate(6%, -40%) rotate(14deg); } 100% { transform: translate(52%, -150%) rotate(58deg) scale(.7); visibility: hidden; } }
.gj-gato { left: 8%; right: 8%; top: 12%; bottom: 18%; }
.gj-gato .gato-hueco, .gj-gato canvas.obj { width: 100%; height: 100%; }
.gj-gato canvas.obj { display: block; }
.gj-pelusas { display: grid; place-items: center; height: 100%; }
.gj-primero { position: absolute; left: 50%; bottom: -14px; translate: -50% 0; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
  font: 400 16px/1 var(--titulo); color: var(--lima); -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--tinta); rotate: -3deg; }
.gj-escena-raiga { max-width: 300px; }
.gj-escena-raiga .gato-hueco { position: absolute; inset: 0; }

/* La manada y el Gatodex: sus gatos en tazos (papelitos) y su avance por forma. */
.gj-cosa-manada, .gj-cosa-dex { grid-template-columns: minmax(0, 1fr); }
.gj-perfil { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.gj-clan { font: 400 18px/1.1 var(--titulo); }
.gj-tazos { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.gj-tazo { display: grid; justify-items: center; gap: 2px; padding: 8px 6px 10px; background: var(--papel); border: 2px solid var(--tinta); text-align: center; min-width: 0; }
.gj-tazo:nth-child(3n + 1) { rotate: -1.2deg; } .gj-tazo:nth-child(3n + 2) { rotate: .9deg; }
.gj-tazo b { font: 400 14px/1.15 var(--titulo); overflow-wrap: anywhere; }
.gj-tazo-gato { width: 96px; height: 96px; }
.gj-tazo-gato .gato-hueco { width: 100%; height: 100%; }
.gj-dex-total { display: flex; align-items: baseline; gap: 10px; font: 400 22px/1 var(--titulo); }
.gj-dex-total .lcd { font-size: 40px; }
.gj-dex { display: grid; gap: 8px; }
.gj-dex-fila { display: grid; grid-template-columns: 120px minmax(0, 1fr) 64px; gap: 12px; align-items: center; }
.gj-dex-fila b { font: 400 16px/1 var(--titulo); }
.gj-dex-fila .num { font-size: 15px; text-align: right; }

/* «¡RAIGA ESTÁ EN VIVO!» con el directo de Twitch arriba: del ancho de la llegada en el celular y más chico en la compu
   (así la cosa que mandaron se asoma sin bajar: primero se enseña). */
.gj-vivo { width: min(100%, 860px); display: grid; gap: 10px; justify-items: center; }
.gj-vivo .gj-vivo-video { width: min(100%, 560px); }
.gj-vivo-grito { font: 400 34px/1 var(--titulo); color: var(--crema); -webkit-text-stroke: 8px var(--tinta); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--rojo);
  rotate: -2deg; animation: gj-golpe .4s cubic-bezier(.2, 1.6, .5, 1) both; }
.gj-vivo-video { width: 100%; aspect-ratio: 16 / 9; border: 3px solid var(--tinta); box-shadow: 6px 7px 0 var(--tinta); background: var(--tinta); }
.gj-vivo-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* El aviso de los navegadores de las apps (TikTok, X, Instagram): papel lima, sin códigos de !enlace. */
.gj-ajena { display: grid; gap: 8px; justify-items: start; padding: 14px 18px 16px; background: var(--lima); border: 2px solid var(--tinta); box-shadow: 5px 6px 0 var(--tinta); rotate: -.6deg; }
.gj-ajena b { font: 400 19px/1.2 var(--titulo); }
html.en-app-ajena #titulo [data-id="enlace"], html.en-app-ajena .codigo-caja, html.en-app-ajena [data-accion="codigo"] { display: none !important; }

/* Con la llegada, los avisos de la página suben encima de su barra de abajo (gatajos.js la mide en --gj-barra; +9 px de su
   orilla festoneada y un respiro): nunca tapan ¡A JUGAR! ni IR A MI MANADA. */
html.en-llegada .avisos { bottom: calc(var(--gj-barra, 120px) + 22px); }

/* Entrar desde la llegada (y las tarjetas muertas: caducó o no existe). */
.gj-entrar-ventana { scroll-margin: 24px; }
.gj-muerta { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 18px; align-items: center; }
.gj-og-chica { width: 100%; border: 3px solid var(--tinta); box-shadow: 5px 6px 0 var(--tinta); rotate: -3deg; }

/* Las pestañas de la carta (FICHA, ÁRBOL, ACTA) dentro de la llegada. Sus papás, abuelos e hijos solo se ven (la llegada no
   está conectada: la carta de otro gato no tendría de dónde leer). */
.gj-cartas { display: grid; gap: 12px; }
.gj-cartas .gf-nodo[data-solo-ver] { cursor: default; pointer-events: none; }

/* ── Los corazones de un ¡MIAU! (encima del gato que lo recibe): brincan con golpe y se van con pop ── */
.gj-corazones { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.gj-corazones i { position: absolute; left: -15px; top: -15px; width: 30px; height: 28px; translate: var(--x) 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 28'%3E%3Cpath d='M15 26 C6 19 2 14 2 9 C2 5 5 2 9 2 C12 2 14 4 15 6 C16 4 18 2 21 2 C25 2 28 5 28 9 C28 14 24 19 15 26Z' fill='%23ff3b45' stroke='%23171719' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  animation: gj-corazon 1.7s calc(var(--i) * 55ms) cubic-bezier(.2, 1.5, .5, 1) both; }
@keyframes gj-corazon { 0% { transform: translateY(20px) rotate(var(--g)) scale(0); } 22% { transform: translateY(-30px) rotate(var(--g)) scale(1.2); }
  34% { transform: translateY(-38px) rotate(var(--g)) scale(1); } 82% { transform: translateY(-62px) rotate(var(--g)) scale(1); }
  90% { transform: translateY(-64px) rotate(var(--g)) scale(1.08); } 100% { transform: translateY(-64px) rotate(var(--g)) scale(0); } }

/* ── ¡PRESÚMELO!: el código grande, su liga y los cuatro botones ── */
.gj-presume { display: grid; gap: 14px; }
.gj-presume-codigo { display: grid; gap: 6px; justify-items: start; }
.gj-liga { font: 600 15px/1.3 var(--texto); overflow-wrap: anywhere; }
.gj-liga a { color: var(--azul); }
.gj-presume-botones { gap: 10px 12px; }
.gj-presume-botones .boton:nth-child(2) { rotate: .8deg; } .gj-presume-botones .boton:nth-child(3) { rotate: -.6deg; }

/* ── MI CUENTA › MIS GATAJOS ── */
.gj-vitrinas { gap: 10px; margin: 10px 0 14px; }
.gj-mios { display: grid; gap: 12px; }
.gj-mio { display: grid; gap: 6px; padding: 10px 14px 12px; background: var(--papel); border: 2px solid var(--tinta); }
.gj-mio:nth-child(2n) { rotate: .35deg; } .gj-mio:nth-child(3n) { rotate: -.4deg; }
.gj-mio.muerto { background: var(--acero); }
.gj-mio-cabeza { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.gj-mio-cabeza b { font: 400 17px/1.15 var(--titulo); overflow-wrap: anywhere; }
.gj-mio-codigo { font-size: 18px; letter-spacing: .06em; }

/* ── INICIO: el Gato del Día (con su corona lima) y el Gaticiero ── */
.gj-gato-dia { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: 16px 26px; align-items: center; }
.gj-gato-dia-tele { position: relative; height: 210px; }
.gj-gato-dia-tele .gato-hueco { position: absolute; inset: 22px 0 0; }
.gj-corona { position: absolute; left: 50%; top: -10px; z-index: 2; translate: -50% 0; rotate: -10deg; animation: gj-golpe .5s .2s cubic-bezier(.2, 1.6, .5, 1) both; }
.gj-gato-dia-texto { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.gj-gato-dia .gj-nombre { --rz: var(--lima); }
.gj-gaticiero-sub { font: 400 17px/1.2 var(--titulo); rotate: -1deg; margin-bottom: 8px; }
.gj-gaticiero-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: gj; }
.gj-gaticiero-lista li { position: relative; padding: 4px 0 4px 44px; font: 600 17px/1.35 var(--texto); counter-increment: gj; }
.gj-gaticiero-lista li::before { content: counter(gj); position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: grid; place-items: center;
  font: 400 16px/1 var(--pixel); background: var(--lima); border: 2px solid var(--tinta); border-radius: 50% 46% 52% 44%; box-shadow: 2px 3px 0 var(--tinta); }
.gj-gaticiero-lista li:nth-child(2n)::before { background: var(--crema); rotate: 8deg; }
.gj-gaticiero-lista li:first-child { font: 400 19px/1.3 var(--titulo); }

/* ── En el celular: una columna, la escena arriba ── */
@media (max-width: 640px) {
  .gj-letrero { font-size: 30px; -webkit-text-stroke-width: 7px; text-shadow: 3px 4px 0 var(--tinta); }
  .gj-cosa { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 20px; justify-items: center; text-align: center; }
  .gj-datos { justify-items: center; }
  .gj-botones { justify-content: center; }
  /* (el botón grande de la llegada en un renglón: ¡QUIERO EL MÍO! no se parte) */
  .gj-botones .boton.gigante { font-size: 19px; gap: 10px; padding-inline: 14px; }
  .gj-botones .boton.gigante .pix { width: 36px; height: 36px; }
  .gj-escena { max-width: 260px; }
  .gj-nombre { font-size: 32px; -webkit-text-stroke-width: 7px; rotate: -1deg; transform-origin: center; }
  .gj-frase { border-left: 0; padding-left: 0; }
  .gj-tazos { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
  .gj-tazo-gato { width: 78px; height: 78px; }
  .gj-dex-fila { grid-template-columns: 96px minmax(0, 1fr) 52px; gap: 8px; }
  .gj-dex-fila b { font-size: 14px; }
  .gj-vivo-grito { font-size: 24px; -webkit-text-stroke-width: 6px; }
  .gj-muerta { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .gj-muerta .gj-og-chica { max-width: 220px; }
  .gj-gato-dia { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .gj-gato-dia-tele { width: 200px; }
  .gj-gato-dia-texto { justify-items: center; }
}
/* (el contorno de 8 px pegaba las palabras de los títulos de las llegadas: «¡RAIGAESTÁENVIVO!») */
.gj-nombre, .gj-vivo-grito, .gj-letrero { word-spacing: .2em; }