/* ============================================================
   LA GRANJA DE NEÓPOLIS 🌾 (public/granja.js)
   La tranquera del cowork y el botón del header abren una capa a pantalla completa: el paisaje en
   un canvas de 384×216 a escala entera (--esc) y encima las mascotas (DOM). Todo el texto en
   Press Start 2P. Las animaciones son todas steps(): nada se desliza suave, todo "salta" de a
   un pixel como el arte. Paleta: la de la app (crema, tinta, rojo, amarillo) más la madera y el
   verde de la granja.
   ============================================================ */
:root {
  --gj-crema: #f4ecd8;
  --gj-crema2: #eadfc3;
  --gj-tinta: #141414;
  --gj-rojo: #e6194b;
  --gj-amarillo: #ffe119;
  --gj-verde: #3cb44b;
  --gj-madera: #b07a45;
  --gj-madera2: #7a4a26;
  --gj-madera3: #5a3418;
  --gj-f: 'Press Start 2P', monospace;
}

/* ---- La tranquera en la pared de arriba del cowork ----
   Vive en #tab-cowork .room-ambiance (capa decorativa con pointer-events:none): la tranquera sola
   los reactiva. Mismo hueco que la puerta de La Marcha (oculta desde el 25/09): arriba a la
   derecha. Mide 64×80: la pared de arriba mide 80px. Por el vano se ve la granja (cielo, loma y
   un pollito que se asoma). */
#tab-cowork .room-ambiance > .granja-tranquera {
  position: absolute;
  top: 0;
  right: 14px;
  width: 64px;
  height: 80px;
  z-index: 4;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
  transition: none;
  cursor: pointer;
  pointer-events: auto;
}
@media (max-width: 900px) {
  #tab-cowork .room-ambiance > .granja-tranquera { right: calc(8% + 72px); }
}
#tab-cowork .room-ambiance > .granja-tranquera:hover,
#tab-cowork .room-ambiance > .granja-tranquera:active { transform: none; box-shadow: none; }
#tab-cowork .room-ambiance > .granja-tranquera:focus-visible { outline: 3px solid var(--gj-amarillo); outline-offset: -3px; }
.granja-tranquera .gt-cartel {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  padding: 3px 4px 2px;
  background: var(--gj-madera);
  border: 2px solid var(--gj-tinta);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
  font-family: var(--gj-f);
  font-size: 8px;
  line-height: 1;
  color: var(--gj-crema);
  text-shadow: 1px 1px 0 var(--gj-madera3);
  white-space: nowrap;
  z-index: 3;
}
.granja-tranquera:hover .gt-cartel { animation: gt-mece .5s steps(2) infinite; }
@keyframes gt-mece { 0% { transform: translateX(-50%) rotate(-3deg); } 50% { transform: translateX(-50%) rotate(3deg); } }
/* El vano: lo que se ve de la granja entre los postes. */
.granja-tranquera .gt-vano {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 52px;
  overflow: hidden;
  border: 2px solid var(--gj-tinta);
  border-bottom: 0;
  background: linear-gradient(#86cdf2 0 55%, #b9e0a2 55% 70%, #8ccf66 70% 100%);
}
.granja-tranquera .gt-sol { position: absolute; top: 5px; left: 7px; width: 8px; height: 8px; background: var(--gj-amarillo); box-shadow: 0 0 0 2px #fff3b8; }
/* El vano de la tranquera sigue la hora real, como el cielo del cowork (body[data-daytime]):
   de noche cielo azul oscuro con luna y una estrellita; al atardecer naranja con el sol bajo. */
body[data-daytime="noche"] .granja-tranquera .gt-vano { background: linear-gradient(#1a1d45 0 55%, #4a6a42 55% 70%, #35532f 70% 100%); }
body[data-daytime="noche"] .granja-tranquera .gt-sol { background: #f4ecd8; box-shadow: 0 0 0 2px rgba(244, 236, 216, .25), 14px 4px 0 -3px #fff; }
body[data-daytime="noche"] .granja-tranquera .gt-loma { background: #557a4c; }
body[data-daytime="noche"] .granja-tranquera .gt-bicho { filter: brightness(.8); }
body[data-daytime="atardecer"] .granja-tranquera .gt-vano { background: linear-gradient(#ff8a5c 0 30%, #ffb070 30% 55%, #b9c98a 55% 70%, #86b85e 70% 100%); }
body[data-daytime="atardecer"] .granja-tranquera .gt-sol { top: 12px; background: #ffd34d; box-shadow: 0 0 0 2px #ffe9a8; }
.granja-tranquera .gt-loma { position: absolute; left: -6px; right: 10px; bottom: 14px; height: 10px; background: #9dd384; border-radius: 50% 50% 0 0; }
/* El pollito que se asoma por el vano (fila 12 del sheet = Pío bebé). */
.granja-tranquera .gt-bicho {
  position: absolute;
  bottom: 4px;
  right: 3px;
  width: 24px;
  height: 24px;
  background: url(/sprites/granja.png) 0 calc(-12 * 24px) / 192px 1152px no-repeat; /* el sheet de 8 columnas x 48 filas (idle ya armado) */
  image-rendering: pixelated;
  animation: gt-bicho 2s steps(8) infinite, gt-asoma 3.2s steps(1) infinite;
}
@keyframes gt-bicho { to { background-position-x: -192px; } }
@keyframes gt-asoma { 0% { transform: translateY(10px); } 30% { transform: translateY(0); } 80% { transform: translateY(4px); } }
.granja-tranquera .gt-poste {
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 58px;
  background: var(--gj-madera3);
  border: 2px solid var(--gj-tinta);
  z-index: 2;
}
.granja-tranquera .gt-poste::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; height: 4px; background: var(--gj-madera); border: 2px solid var(--gj-tinta); }
.granja-tranquera .gt-poste--i { left: 0; }
.granja-tranquera .gt-poste--d { right: 0; }
/* La hoja: tres tablas y la cruz. Gira hacia adentro al tocarla. */
.granja-tranquera .gt-hoja {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 34px;
  transform-origin: 0 50%;
  transition: transform .34s steps(4);
  z-index: 1;
}
.granja-tranquera .gt-hoja i {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--gj-madera);
  border: 2px solid var(--gj-tinta);
}
.granja-tranquera .gt-hoja i:nth-child(1) { top: 0; }
.granja-tranquera .gt-hoja i:nth-child(2) { top: 13px; }
.granja-tranquera .gt-hoja i:nth-child(3) { bottom: 0; }
.granja-tranquera .gt-cruz {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 5px;
  margin: -2px 0 0 -26px;
  background: var(--gj-madera2);
  border: 2px solid var(--gj-tinta);
  transform: rotate(-36deg);
}
.granja-tranquera:hover .gt-hoja { animation: gt-tiembla .3s steps(2) infinite; }
@keyframes gt-tiembla { 0% { transform: rotateY(0); } 50% { transform: perspective(200px) rotateY(-12deg); } }
.granja-tranquera.abierta .gt-hoja { transform: perspective(200px) rotateY(-78deg); animation: none; }
.granja-tranquera.abierta .gt-vano { filter: brightness(1.15) saturate(1.2); }

/* ---- El botón del header ---- */
.granja-chip-wrap { position: relative; flex-shrink: 0; }
.granja-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 2.2rem;
  padding: 0 .55rem;
  font-family: var(--gj-f);
  font-size: .55rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--gj-crema);
  background: var(--gj-madera);
  border: 3px solid var(--gj-tinta);
  box-shadow: var(--shadow-sm, 3px 3px 0 var(--gj-tinta));
  text-shadow: 1px 1px 0 var(--gj-madera3);
}
.granja-chip[hidden] { display: none; }
.granja-chip:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--gj-tinta); }
.granja-chip:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--gj-tinta); }
.granja-chip:focus-visible { outline: 3px solid var(--gj-amarillo); outline-offset: 2px; }

/* ---- La capa ---- */
.granja-capa {
  position: fixed;
  inset: 0;
  z-index: 14000; /* como La Marcha; los cursores suben arriba (ver html.granja-abierta abajo) */
  background: var(--gj-crema);
  background-image: radial-gradient(rgba(20, 20, 20, .08) 1px, transparent 1px);
  background-size: 8px 8px;
  color: var(--gj-tinta);
  font-family: var(--gj-f);
  font-size: 10px;
  line-height: 1.8;
  overflow: auto;
}
.granja-capa[hidden] { display: none; }
html.granja-abierta body { overflow: hidden; }
/* Todos los cursores de la ofi se ven adentro de la granja. */
html.granja-abierta #cursor-layer { z-index: 14500; }
/* El chat (el 💬 y el panel) flota ARRIBA de la granja y se usa normal; los cursores siguen más arriba. */
html.granja-abierta .chat-dock { z-index: 14300; }
html.granja-abierta .chat-toggle { z-index: 14310; }
/* La tarjeta de jugador que se abre tocando un nombre del chat, arriba del chat. */
html.granja-abierta .pcard-backdrop { z-index: 14400; }
.granja-capa *, .granja-capa *::before, .granja-capa *::after { box-sizing: border-box; }
.granja-capa img { image-rendering: pixelated; }
.gj-marco {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 12px;
}
.gj-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }

/* ---- El escenario ---- */
.gj-stage {
  --esc: 2;
  position: relative;
  box-sizing: content-box !important;
  border: 4px solid var(--gj-tinta);
  box-shadow: 6px 6px 0 var(--gj-tinta);
  background: #86cdf2;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}
.gj-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
/* Los actores viven en px del MUNDO (la granja crece a la derecha): granja.js les fija el ancho y
   los corre con `left` según la cámara. Con `left` y no con transform, a propósito: la escondida
   (app.js) mide anclas y un transform le cambiaría el bloque contenedor. */
.gj-actores { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; }
.gj-stage.se-mueve .gj-actores { cursor: grab; touch-action: pan-y; }
.gj-stage.arrastrando .gj-actores, .gj-stage.arrastrando .gj-actores * { cursor: grabbing !important; }
.granja-capa.apuntando .gj-actores { cursor: crosshair; }

/* Los botones de los costados de la cámara: una flecha de tabla y, abajo, lo que hay del otro lado. */
.granja-capa .gj-pan {
  position: absolute;
  top: 54%;
  z-index: 760;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 6px 7px;
  font-family: var(--gj-f);
  font-size: 7px;
  line-height: 1.2;
  color: var(--gj-crema);
  background: var(--gj-madera);
  background-image: repeating-linear-gradient(0deg, transparent 0 7px, rgba(0, 0, 0, .14) 7px 9px);
  border: 3px solid var(--gj-tinta);
  box-shadow: 3px 3px 0 var(--gj-tinta);
  text-shadow: 1px 1px 0 var(--gj-madera3);
  cursor: pointer;
  transform: translateY(-50%);
  transition: none;
}
.granja-capa .gj-pan[hidden] { display: none; }
.granja-capa .gj-pan--izq { left: 8px; }
.granja-capa .gj-pan--der { right: 8px; }
.granja-capa .gj-pan:hover { background-color: #c98a50; }
.granja-capa .gj-pan:active { transform: translate(3px, calc(-50% + 3px)); box-shadow: none; }
.granja-capa .gj-pan:focus-visible { outline: 3px dashed var(--gj-rojo); outline-offset: 2px; }
.gj-pan-flecha {
  display: block;
  width: 14px;
  height: 16px;
  background: var(--gj-amarillo);
  /* una flecha escalonada, en la grilla del pixel art */
  clip-path: polygon(0 37.5%, 50% 37.5%, 50% 0, 64% 0, 64% 12.5%, 79% 12.5%, 79% 25%, 93% 25%, 93% 37.5%, 100% 37.5%, 100% 62.5%, 93% 62.5%, 93% 75%, 79% 75%, 79% 87.5%, 64% 87.5%, 64% 100%, 50% 100%, 50% 62.5%, 0 62.5%);
  filter: drop-shadow(1px 1px 0 var(--gj-tinta));
}
.gj-pan--izq .gj-pan-flecha { transform: scaleX(-1); }
.gj-pan-txt { display: block; max-width: 9ch; text-align: center; }
/* La escondida en el paisaje: la tapa es un canvas del tamaño del escenario que repinta encima del
   bicho solo los píxeles de la escenografía que lo tapan (granja.js, pintarTapa). No se toca: los
   clicks siguen de largo al escenario. */
.gj-tapa { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; pointer-events: none; }
.gj-tapa[hidden] { display: none; }
/* El clima (granja.js, pintarClima): lluvia, nieve, niebla y refucilo arriba de las mascotas y los
   bancos (z 3 a 600), abajo de la nube de polvo del momento (690), el destello (700) y el HUD. */
.gj-clima { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; pointer-events: none; z-index: 650; }
.gj-clima[hidden] { display: none; }
/* Apuntando la pelota, el bicho escondido no se interpone (como las mascotas). */
.granja-capa.apuntando #hideseek { pointer-events: none; }
.granja-capa.apuntando .gj-pet,
.granja-capa.apuntando .gj-banco { pointer-events: none; }
.gj-destello { position: absolute; inset: 0; background: #fff6a8; opacity: 0; pointer-events: none; z-index: 700; }
/* (nombre propio: `gj-destello` a secas lo pisaba el brillito de las cromas, más abajo) */
.gj-destello.on { animation: gj-destello-escena .5s steps(4) forwards; }
@keyframes gj-destello-escena { 0% { opacity: .85; } 100% { opacity: 0; } }

/* Botones de la granja: sin el hundido grande del `button` global. */
.granja-capa .gj-btn {
  font-family: var(--gj-f);
  font-size: 9px;
  line-height: 1.4;
  color: var(--gj-tinta);
  background: #fff;
  border: 3px solid var(--gj-tinta);
  box-shadow: 3px 3px 0 var(--gj-tinta);
  padding: 7px 9px;
  white-space: nowrap;
  transition: none;
}
.granja-capa .gj-btn:hover { background: var(--gj-amarillo); transform: none; box-shadow: 3px 3px 0 var(--gj-tinta); }
.granja-capa .gj-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.granja-capa .gj-btn:focus-visible { outline: 3px dashed var(--gj-rojo); outline-offset: 2px; }
.granja-capa .gj-btn--rojo { background: var(--gj-rojo); color: #fff; }
.granja-capa .gj-btn--rojo:hover { background: #ff3b69; }
.granja-capa .gj-btn[disabled] { background: var(--gj-crema2); color: #7a7160; cursor: not-allowed; box-shadow: none; transform: none; }
.granja-capa .gj-btn.on { background: var(--gj-amarillo); box-shadow: none; transform: translate(3px, 3px); }

/* HUD de arriba: volver, el letrero colgado y (si el panel flota) TUS MASCOTAS. */
.gj-hud {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  z-index: 750;
  pointer-events: none;
}
.gj-hud > * { pointer-events: auto; }
.gj-letrero {
  position: relative;
  margin-top: 10px;
  padding: 7px 12px 6px;
  text-align: center;
  background: var(--gj-madera);
  background-image: repeating-linear-gradient(0deg, transparent 0 8px, rgba(0, 0, 0, .14) 8px 10px);
  border: 3px solid var(--gj-tinta);
  box-shadow: 4px 4px 0 var(--gj-tinta);
  color: var(--gj-crema);
  transform-origin: 50% -18px;
  animation: gj-mece 3s steps(2) infinite;
  pointer-events: none;
  max-width: 44%;
}
.gj-letrero::before, .gj-letrero::after { content: ""; position: absolute; top: -21px; width: 3px; height: 18px; background: var(--gj-tinta); }
.gj-letrero::before { left: 16px; }
.gj-letrero::after { right: 16px; }
@keyframes gj-mece { 0% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
.gj-letrero-t { display: block; font-size: 12px; line-height: 1.3; text-shadow: 2px 2px 0 var(--gj-madera3); }
.gj-letrero-s { display: block; font-size: 8px; line-height: 1.8; margin-top: 2px; color: #fff4dc; text-shadow: 1px 1px 0 var(--gj-madera3); }
.granja-capa:not(.panel-flotante) .gj-panel-btn { visibility: hidden; }

/* EL CARTEL DEL DESAFIO (granja.js, renderDesafio): si tu desafío del día es de la granja, una
   tablita de la madera del paisaje colgada de dos piolas abajo de VOLVER A LA OFI, con la cuenta
   regresiva en grande. Corre: amarillo. Pausa (te paraste): titila y la pista se pone roja con la
   gracia. Quieta: el reloj apagado. Cumplido: la tabla se pinta de amarillo y salta una vez. */
.gj-desafio {
  position: absolute; left: 4px; top: 58px;
  width: max-content; min-width: 150px; max-width: 220px; box-sizing: border-box;
  padding: 7px 10px 8px;
  font-family: var(--gj-f); color: #f3e2bd;
  background: #8a5a34;
  background-image: repeating-linear-gradient(0deg, transparent 0 5px, rgba(90, 52, 24, .22) 5px 6px);
  border: 2px solid #5a3418;
  box-shadow: inset 0 -3px 0 #74492a, 3px 3px 0 rgba(58, 30, 10, .45);
  pointer-events: none;
}
.gj-desafio[hidden] { display: none; }
.gj-desafio::before, .gj-desafio::after { content: ""; position: absolute; top: -16px; width: 2px; height: 14px; background: #5a3418; }
.gj-desafio::before { left: 14px; }
.gj-desafio::after { right: 14px; }
.gj-desafio-t { display: flex; align-items: center; gap: 6px; font-size: 7px; line-height: 1; color: #ffd27a; text-shadow: 1px 1px 0 #5a3418; }
.gj-desafio-ovni { font-size: 9px; }
.gj-desafio-reloj { margin-top: 7px; font-size: 16px; line-height: 1; color: var(--gj-amarillo); text-shadow: 2px 2px 0 #5a3418; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gj-desafio-pista { margin-top: 7px; font-size: 7px; line-height: 1.7; color: #fff4dc; text-shadow: 1px 1px 0 #5a3418; white-space: normal; }
.gj-desafio--quieto .gj-desafio-reloj { color: #e3c89a; }
.gj-desafio--otra .gj-desafio-reloj { font-size: 13px; }
.gj-desafio--pausa .gj-desafio-reloj { animation: gj-desafio-titila 1s steps(1) infinite; }
.gj-desafio--pausa .gj-desafio-pista { display: inline-block; padding: 3px 5px 2px; background: var(--gj-rojo); color: #fff; text-shadow: 1px 1px 0 #7a0f27; border: 2px solid #5a3418; }
@keyframes gj-desafio-titila { 50% { opacity: .35; } }
.gj-desafio--hecha { background: var(--gj-amarillo); background-image: none; color: #3e2410; box-shadow: inset 0 -3px 0 #d9b800, 3px 3px 0 rgba(58, 30, 10, .45); animation: gj-desafio-salta .6s steps(3) 1; }
.gj-desafio--hecha .gj-desafio-t { color: #5a3418; text-shadow: none; }
.gj-desafio--hecha .gj-desafio-reloj { color: var(--gj-rojo); text-shadow: 2px 2px 0 #fff; font-size: 13px; }
.gj-desafio--hecha .gj-desafio-pista { color: #3e2410; text-shadow: none; }
@keyframes gj-desafio-salta { 0% { transform: translateY(0); } 33% { transform: translateY(-8px); } 66% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .gj-desafio--pausa .gj-desafio-reloj, .gj-desafio--hecha { animation: none; } }

/* LA REPISA: la barra de abajo del escenario es una tabla de madera como los carteles del paisaje
   (madera, contorno marrón finito, nada del contorno negro de la UI), con tablitas que tienen su
   iconito pixel. Hundida = activa (NOMBRES con los nombres a la vista, o la que está en CANCELAR).
   Apagada = hay una pelota en el aire (aria-disabled, sigue enfocable y con su tooltip). */
.gj-barra {
  display: flex; align-items: stretch; justify-content: center; gap: 6px; flex-wrap: wrap;
  width: max-content; max-width: 100%; box-sizing: border-box;
  margin: 10px auto 0; padding: 6px 8px;
  background: #8a5a34;
  background-image: repeating-linear-gradient(0deg, transparent 0 5px, rgba(90, 52, 24, .22) 5px 6px);
  border: 2px solid #5a3418;
  box-shadow: inset 0 -3px 0 #74492a, 0 3px 0 rgba(90, 52, 24, .35);
  position: relative;
}
/* Los clavitos de las puntas. */
.gj-barra::before, .gj-barra::after { content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: #3e2410; box-shadow: 1px 1px 0 #c9945f; }
.gj-barra::before { left: 4px; }
.gj-barra::after { right: 4px; }
.gj-barra-veta { width: 2px; margin: 2px 4px; background: #5a3418; box-shadow: 1px 0 0 #a8703f; }
.granja-capa .gj-tablita {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 120px; /* entra CANCELAR sin que la repisa cambie de ancho */
  margin: 0 4px; padding: 6px 10px 7px;
  font-family: var(--gj-f); font-size: 9px; line-height: 1; color: #f3e2bd; white-space: nowrap;
  text-shadow: 1px 1px 0 #5a3418;
  background: #a8703f; border: 2px solid #5a3418;
  box-shadow: inset 0 2px 0 #c9945f, inset 0 -3px 0 #8a5a34;
  border-radius: 0; cursor: pointer; transition: none; transform: none;
}
.granja-capa .gj-tablita:hover { background: #b98049; color: var(--gj-amarillo); transform: none; box-shadow: inset 0 2px 0 #d8a46c, inset 0 -3px 0 #8a5a34; }
.granja-capa .gj-tablita:active,
.granja-capa .gj-tablita.on,
.granja-capa .gj-tablita[aria-pressed="true"] {
  background: #74492a; color: #fff4dc; transform: translateY(1px);
  box-shadow: inset 0 3px 0 #4a2a12, inset 0 -1px 0 #8a5a34;
}
.granja-capa .gj-tablita.on { color: #fff; }
.granja-capa .gj-tablita:focus-visible { outline: 2px solid var(--gj-amarillo); outline-offset: 2px; }
.gj-tablita-ico { width: 14px; height: 14px; image-rendering: pixelated; flex: none; }
.gj-tablita[aria-pressed="false"] .gj-tablita-ico { opacity: .55; }
.granja-capa .gj-tablita.ocupada,
.granja-capa .gj-tablita.ocupada:hover,
.granja-capa .gj-tablita.ocupada:active {
  cursor: not-allowed; color: #d9c29a; background: #93673f; transform: none;
  box-shadow: inset 0 -2px 0 #8a5a34; filter: saturate(.35); opacity: .6;
}

/* Los papelitos de adentro de la granja mientras apuntás: papel crema clavado, con el borde de madera.
   El de TIRAR PELOTA va arriba del escenario, abajo del letrero; el de la gomera, arriba de la horqueta
   (en el paisaje, se mueve con la cámara). */
.gj-pista {
  position: absolute; z-index: 740; pointer-events: none;
  font-family: var(--gj-f); font-size: 9px; line-height: 1.4; color: #3e2410; white-space: nowrap;
  background: var(--gj-crema); border: 2px solid #5a3418;
  box-shadow: 2px 2px 0 rgba(90, 52, 24, .55);
  padding: 6px 8px 5px;
}
.gj-pista[hidden] { display: none; }
/* La chinche roja de arriba. */
.gj-pista::before { content: ""; position: absolute; top: -4px; left: 50%; width: 6px; height: 6px; margin-left: -3px; background: var(--gj-rojo); box-shadow: inset -2px -2px 0 #a8123a; }
.gj-pista--pelota { top: 92px; left: 50%; transform: translateX(-50%); animation: gj-pista 1.2s steps(1) infinite; }
.gj-pista--tiro { transform: translate(-50%, -100%); z-index: 400; animation: gj-pista 1.2s steps(1) infinite; }
/* La colita de pixeles hacia la gomera. */
.gj-pista--tiro::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -4px; width: 8px; height: 5px; background: #5a3418;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 75% 40%, 75% 70%, 50% 70%, 50% 100%, 25% 100%, 25% 70%, 0 70%); }
@keyframes gj-pista { 50% { background: #fff6c8; } }
@media (prefers-reduced-motion: reduce) { .gj-pista--pelota, .gj-pista--tiro { animation: none; } }

/* ---- Las mascotas ----
   Tamaño = celda del sheet × --esc (entero): el crecimiento ya está dibujado en la celda. */
.gj-pet {
  --u: calc(var(--esc) * 1px);
  --sz: calc(var(--cell, 24) * var(--esc) * 1px);
  position: absolute;
  width: var(--sz);
  height: var(--sz);
  transform: translate(-50%, -100%);
  cursor: pointer;
}
.gj-pet:focus-visible { outline: 3px dashed var(--gj-rojo); outline-offset: 2px; }
.gj-body { position: absolute; inset: 0; }
.gj-flip { position: absolute; inset: 0; transform: scaleX(var(--f, 1)); }
.gj-spr {
  position: absolute;
  inset: 0;
  background-image: var(--sheet);
  background-repeat: no-repeat;
  background-size: calc(var(--cols) * var(--cell) * var(--esc) * 1px) calc(var(--rows) * var(--cell) * var(--esc) * 1px);
  background-position-y: calc(var(--row) * var(--cell) * var(--esc) * -1px);
  image-rendering: pixelated;
  animation: gj-spr var(--dur, 1s) steps(var(--cols, 4)) infinite;
}
@keyframes gj-spr { from { background-position-x: 0; } to { background-position-x: calc(var(--cols) * var(--cell) * var(--esc) * -1px); } }
.gj-sombra { position: absolute; left: 22%; right: 22%; bottom: calc(var(--u) * -1); height: calc(var(--u) * 2); background: rgba(20, 40, 10, .28); }
.gj-pet--cielo .gj-sombra { display: none; }
.gj-pet.camina .gj-body { animation: gj-bob .5s steps(1) infinite; }
.gj-pet.lento.camina .gj-body { animation-duration: 1s; }
.gj-pet--cielo.camina .gj-body { animation: gj-bob 1.2s steps(1) infinite; }
@keyframes gj-bob { 0% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -1)); } }
.gj-pet.mal .gj-spr { filter: grayscale(.9) brightness(.92); }
/* Dormida: quieta en el cuadro del parpadeo (ojos cerrados). Es la columna 7 del sheet, porque el
   idle va en el orden 0,1,0,1,2,1,0,3 y el cuadro 3 es el parpadeo (docs/ESTILO-MASCOTAS.md). Respira
   despacito con el cuerpo, un pixel. Las del cielo (legendarias) no duermen (granja.js duerme()). */
.gj-pet.duerme .gj-spr { animation: none; background-position-x: calc(var(--cell) * var(--esc) * -7px); filter: brightness(.85); }
.gj-pet.duerme .gj-body { animation: gj-respira 3.2s steps(1) infinite; }
@keyframes gj-respira { 50% { transform: translateY(var(--u)); } }
.gj-pet.hop .gj-body { animation: gj-hop .6s steps(1) 2; }
@keyframes gj-hop { 0% { transform: translateY(0); } 20% { transform: translateY(calc(var(--u) * -3)); } 40% { transform: translateY(calc(var(--u) * -5)); } 60% { transform: translateY(calc(var(--u) * -3)); } 80% { transform: translateY(0); } }
.gj-pet.munch .gj-body { animation: gj-munch .3s steps(1) 4; }
@keyframes gj-munch { 0% { transform: scale(1.06, .9) translateY(4%); } 50% { transform: scale(1); } }
.gj-pet.crece .gj-spr, .gj-pet.renacida .gj-spr { animation: gj-spr var(--dur) steps(var(--cols)) infinite, gj-brilla .15s steps(1) 6; }
@keyframes gj-brilla { 0% { filter: brightness(2.4) saturate(0); } 50% { filter: none; } }
/* Elegida (carta abierta): un aro amarillo a los pies. */
.gj-pet.sel .gj-sombra { background: var(--gj-amarillo); box-shadow: 0 0 0 var(--u) var(--gj-tinta); left: 12%; right: 12%; }
/* Resaltada (VER SU GRANJA / IR A VERLA): la flechita amarilla que salta. */
.gj-pet.resaltada::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * var(--alto, 24));
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 8);
  margin-left: calc(var(--u) * -7);
  margin-bottom: calc(var(--u) * 6);
  background: var(--gj-flecha) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: gj-flecha .6s steps(1) infinite;
  z-index: 3;
}
@keyframes gj-flecha { 50% { transform: translateY(calc(var(--u) * -2)); } }

/* La etiqueta: nombre, dueño (con su color) y etapa. */
.gj-tag {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: calc(var(--u) + 2px);
  display: flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
  font-size: 8px;
  line-height: 1;
  background: #fff;
  border: 2px solid var(--gj-tinta);
  padding: 3px 4px 2px;
  pointer-events: none;
}
.gj-due { display: inline-flex; align-items: center; gap: 3px; color: #555; }
.gj-due::before { content: ""; width: 6px; height: 6px; background: var(--c); border: 1px solid var(--gj-tinta); }
.sin-tags .gj-pet:not(:hover):not(.sel):not(.resaltada) .gj-tag,
.gj-pet.tag-tapada:not(:hover):not(:focus-visible) .gj-tag { display: none; }
.gj-pet:hover .gj-tag, .gj-pet.sel .gj-tag, .gj-pet.resaltada .gj-tag { z-index: 5; }
.gj-badge { font-size: 8px; line-height: 1; padding: 2px 3px 1px; border: 2px solid var(--gj-tinta); background: #fff; }
.gj-tag .gj-badge { font-size: 8px; padding: 1px 2px 0; border-width: 1px; }
.gj-badge--bebe { background: #ffc2d6; }
.gj-badge--joven { background: var(--gj-amarillo); }
.gj-badge--adulto { background: #9fe39a; }

/* ---- Los colores de cada mascota (cromas) ----
   Un puntito cuadrado del color en la etiqueta y, en la carta y el panel, un badge con el nombre. La
   dorada además tiene un destello de pixel que salta alrededor del dibujo (y su badge brilla). */
.gj-croma-punto { display: inline-block; width: 6px; height: 6px; margin-right: 3px; vertical-align: 0; border: 1px solid var(--gj-tinta); flex: none; }
.gj-croma-punto--pastel { background: linear-gradient(135deg, #ffc4dc 0 50%, #b0e9d3 50% 100%); }
.gj-croma-punto--nocturna { background: radial-gradient(circle at 70% 30%, #fff6a8 0 1px, transparent 1.5px), #3f4aa0; }
.gj-croma-punto--dorada { background: #ffd534; box-shadow: inset -1px -1px 0 #d79416; }
.gj-n { display: inline-flex; align-items: center; }
.gj-badge--croma { display: inline-flex; align-items: center; }
.gj-badge--croma .gj-croma-punto { width: 5px; height: 5px; }
.gj-badge--pastel { background: #e8defc; }
.gj-badge--nocturna { background: #3f4aa0; color: #fff; }
.gj-badge--nocturna .gj-croma-punto { border-color: #fff; }
.gj-badge--dorada { background: linear-gradient(110deg, #ffd534 0 40%, #fff6c2 40% 52%, #ffd534 52% 100%) 0 0 / 300% 100%; animation: gj-oro-badge 2.4s steps(12) infinite; }
@keyframes gj-oro-badge { from { background-position: 100% 0; } to { background-position: -50% 0; } }
/* El destello: un pixel blanco con su cruz amarilla (box-shadow, a escala entera), que aparece en
   dos lugares del dibujo y titila. --u es un pixel del sprite. */
.gj-pet.croma-dorada .gj-body::after,
.gj-ecl-bicho.croma-dorada::after,
.gj-mini.croma-dorada::after {
  content: "";
  position: absolute;
  width: var(--u);
  height: var(--u);
  background: #fff;
  pointer-events: none;
  z-index: 2;
  animation: gj-destello 2.4s steps(1) infinite;
}
.gj-ecl-bicho.croma-dorada, .gj-mini.croma-dorada { --u: calc(var(--esc) * 1px); }
.gj-mini.croma-dorada::after { animation-duration: 3.2s; }
@keyframes gj-destello {
  0% { left: 72%; top: 42%; opacity: 1; box-shadow: var(--u) 0 #ffe97a, calc(var(--u) * -1) 0 #ffe97a, 0 var(--u) #ffe97a, 0 calc(var(--u) * -1) #ffe97a; }
  10% { left: 72%; top: 42%; opacity: 1; box-shadow: var(--u) 0 #ffe97a, calc(var(--u) * -1) 0 #ffe97a, 0 var(--u) #ffe97a, 0 calc(var(--u) * -1) #ffe97a, calc(var(--u) * 2) 0 #fff6c2, calc(var(--u) * -2) 0 #fff6c2, 0 calc(var(--u) * 2) #fff6c2, 0 calc(var(--u) * -2) #fff6c2; }
  20% { left: 72%; top: 42%; opacity: 1; box-shadow: none; }
  30% { opacity: 0; }
  55% { left: 26%; top: 64%; opacity: 1; box-shadow: var(--u) 0 #ffe97a, calc(var(--u) * -1) 0 #ffe97a, 0 var(--u) #ffe97a, 0 calc(var(--u) * -1) #ffe97a; }
  65% { left: 26%; top: 64%; opacity: 1; box-shadow: none; }
  75%, 100% { opacity: 0; }
}
/* El huevo de una dorada: antes de rajarse destella en oro (un contorno de pixel que late). */
.gj-ecl-huevo.dorado .gj-spr { animation: gj-oro-huevo .3s steps(1) infinite; }
@keyframes gj-oro-huevo {
  0% { filter: sepia(1) saturate(5) hue-rotate(-8deg) brightness(1.15) drop-shadow(calc(var(--esc) * 1px) 0 0 #ffe119) drop-shadow(calc(var(--esc) * -1px) 0 0 #ffe119) drop-shadow(0 calc(var(--esc) * 1px) 0 #ffe119) drop-shadow(0 calc(var(--esc) * -1px) 0 #ffe119); }
  50% { filter: brightness(1.6) drop-shadow(calc(var(--esc) * 1px) 0 0 #fff) drop-shadow(calc(var(--esc) * -1px) 0 0 #fff) drop-shadow(0 calc(var(--esc) * 1px) 0 #fff) drop-shadow(0 calc(var(--esc) * -1px) 0 #fff); }
}
/* El aura del color en la eclosión: la dibuja ponerAura (granja.js) en pixeles del sprite, a la
   medida del dibujo, en una tira de 4 cuadros (--aw x --ah cada uno) que acá se escala con --esc
   como al bicho. Se abre en 2 cuadros, titila entre los otros 2 y se calma un poco. Va primera en
   la escena: queda detrás del huevo o del bicho y el pastito le pasa por delante. */
.gj-ecl-aura {
  position: absolute;
  left: calc(var(--ax) * var(--esc) * 1px);
  bottom: calc(var(--ay) * var(--esc) * 1px);
  width: calc(var(--aw) * var(--esc) * 1px);
  height: calc(var(--ah) * var(--esc) * 1px);
  pointer-events: none;
  background: var(--aura) no-repeat;
  background-size: calc(4 * var(--aw) * var(--esc) * 1px) 100%;
  background-position: calc(2 * var(--aw) * var(--esc) * -1px) 0;
  image-rendering: pixelated;
  animation: gj-aura-abre .4s steps(1) both, gj-aura-titila 1s steps(1) .4s infinite, gj-aura-calma .6s steps(3) 1.6s both;
}
@keyframes gj-aura-abre {
  0% { background-position-x: 0; }
  40% { background-position-x: calc(var(--aw) * var(--esc) * -1px); }
  80%, 100% { background-position-x: calc(2 * var(--aw) * var(--esc) * -1px); }
}
@keyframes gj-aura-titila {
  0% { background-position-x: calc(2 * var(--aw) * var(--esc) * -1px); }
  50% { background-position-x: calc(3 * var(--aw) * var(--esc) * -1px); }
}
@keyframes gj-aura-calma { to { opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
  .gj-pet.croma-dorada .gj-body::after, .gj-ecl-bicho.croma-dorada::after, .gj-mini.croma-dorada::after { animation: none; left: 72%; top: 42%; box-shadow: var(--u) 0 #ffe97a, calc(var(--u) * -1) 0 #ffe97a, 0 var(--u) #ffe97a, 0 calc(var(--u) * -1) #ffe97a; }
  .gj-badge--dorada, .gj-ecl-huevo.dorado .gj-spr, .gj-ecl-aura { animation: none; }
  .gj-ecl-huevo.dorado .gj-spr { filter: sepia(1) saturate(5) brightness(1.15); }
}

/* Estados arriba de la cabeza */
.gj-fx { position: absolute; left: 50%; bottom: calc(var(--u) * var(--alto, 24)); transform: translateX(-50%); display: flex; justify-content: center; pointer-events: none; }
/* El globito del hambre: centrado sobre la cabeza, con una colita de pixel en escalera (un triángulo
   con borde, no el palito de antes). ::before es el borde oscuro, ::after el relleno blanco que tapa
   el borde de abajo del globo en el medio. */
.gj-burbuja { position: relative; background: #fff; border: 2px solid var(--gj-tinta); padding: 3px; margin: 0 0 8px; animation: gj-flota 1.2s steps(1) infinite; }
.gj-burbuja img { display: block; width: 16px; height: 16px; }
.gj-burbuja::before { content: ""; position: absolute; left: 50%; bottom: -8px; width: 10px; height: 6px; margin-left: -5px; background: var(--gj-tinta);
  clip-path: polygon(0 0, 100% 0, 100% 34%, 80% 34%, 80% 67%, 60% 67%, 60% 100%, 40% 100%, 40% 67%, 20% 67%, 20% 34%, 0 34%); }
.gj-burbuja::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 6px; height: 4px; margin-left: -3px; background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 67% 50%, 67% 100%, 33% 100%, 33% 50%, 0 50%); }
@keyframes gj-flota { 50% { transform: translateY(-2px); } }
.gj-nube { position: relative; margin-bottom: 4px; animation: gj-flota 1.6s steps(1) infinite; }
.gj-nube img { display: block; width: 36px; height: 18px; }
.gj-nube i { position: absolute; top: 16px; width: 2px; height: 4px; background: #7fa6c8; animation: gj-llovizna .6s steps(3) infinite; }
.gj-nube i:nth-of-type(1) { left: 10px; }
.gj-nube i:nth-of-type(2) { left: 20px; animation-delay: .2s; }
.gj-nube i:nth-of-type(3) { left: 28px; animation-delay: .4s; }
@keyframes gj-llovizna { from { transform: translateY(0); opacity: 1; } to { transform: translateY(12px); opacity: 0; } }
.gj-lagrima {
  position: absolute;
  top: 44%;
  left: 30%;
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 4);
  background: var(--gj-lagrima) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: gj-lagrima 1.4s steps(5) infinite;
  pointer-events: none;
}
@keyframes gj-lagrima { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(calc(var(--u) * 5)); opacity: 1; } 100% { transform: translateY(calc(var(--u) * 6)); opacity: 0; } }
.gj-zz { position: relative; width: 30px; height: 26px; transform: translateX(70%); }
.gj-zz i { position: absolute; font-style: normal; font-size: 8px; line-height: 1; color: #fff; text-shadow: 1px 1px 0 var(--gj-tinta), -1px 0 0 var(--gj-tinta), 0 -1px 0 var(--gj-tinta); opacity: 0; animation: gj-zz 2.4s steps(6) infinite; }
.gj-zz i:nth-child(1) { left: 0; bottom: 0; }
.gj-zz i:nth-child(2) { left: 8px; bottom: 8px; animation-delay: .8s; }
.gj-zz i:nth-child(3) { left: 16px; bottom: 16px; font-size: 10px; animation-delay: 1.6s; }
@keyframes gj-zz { 0% { opacity: 0; transform: translateY(4px); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

/* Comer, corazones, migas */
.gj-come { position: absolute; bottom: 6%; left: calc(50% + var(--u) * 4); width: calc(var(--u) * 8); height: calc(var(--u) * 8); overflow: hidden; animation: gj-bocados 1.2s steps(1) forwards; z-index: 2; }
.gj-come img { display: block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
@keyframes gj-bocados { 0% { width: calc(var(--u) * 8); } 30% { width: calc(var(--u) * 6); } 60% { width: calc(var(--u) * 3); } 90% { width: 0; } }
.gj-miga { position: absolute; left: 70%; top: 72%; width: var(--u); height: var(--u); animation: gj-miga .6s steps(3) forwards; pointer-events: none; }
@keyframes gj-miga { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.gj-corazon {
  position: absolute;
  width: calc(var(--esc) * 7px);
  height: calc(var(--esc) * 6px);
  pointer-events: none;
  z-index: 900;
  animation: gj-sube 1.1s steps(6) forwards;
}
@keyframes gj-sube { 0% { transform: translate(-50%, 0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(var(--esc) * -16px)); opacity: 0; } }

/* Brasa renace: brasita que tiembla y después la llamarada (en el canvas).
   La brasita es la fila `brasita` de su sheet (granja.js pintarPet la pone en --row mientras dura);
   acá solo el temblor de antes de prenderse. */
.gj-pet.renace .gj-body { animation: gj-brasita .16s steps(2) 1.6s infinite; }
@keyframes gj-brasita { 50% { transform: translateX(var(--u)); filter: brightness(1.3); } }

/* ---- LA CINEMÁTICA DEL RENACER DE BRASA (granja.js, cinematicaBrasa) ----
   Barras negras de cine que entran de a escalones, el cartel que se escribe solo en la de abajo,
   el destello cálido de la explosión y la sacudida. Todo en px lógicos (var(--esc)). Con
   movimiento reducido no se arma (granja.js deja solo el aviso). --lento: la cámara lenta de _dev. */
.gj-cine { position: absolute; inset: 0; z-index: 960; pointer-events: none; overflow: hidden; font-family: var(--gj-f); line-height: 1; }
.gj-cine-barra {
  position: absolute; left: 0; right: 0;
  height: calc(var(--esc) * 24px);
  background: var(--gj-tinta, #141414);
  display: flex; align-items: center;
  padding: 0 calc(var(--esc) * 10px);
  transition: transform calc(.32s * var(--lento, 1)) steps(4);
}
.gj-cine-barra--arriba { top: 0; transform: translateY(-100%); justify-content: space-between; box-shadow: 0 var(--esc, 2px) 0 #e6194b; }
.gj-cine-barra--abajo { bottom: 0; transform: translateY(100%); flex-direction: column; justify-content: center; gap: calc(var(--esc) * 4px); box-shadow: 0 calc(var(--esc) * -1px) 0 #e6194b; }
.gj-cine.entra .gj-cine-barra { transform: none; }
.gj-cine-hora, .gj-cine-saltear, .gj-cine-titulo, .gj-cine-dueno { white-space: nowrap; opacity: 0; transition: opacity calc(.2s * var(--lento, 1)) steps(2); }
.gj-cine-hora { display: flex; align-items: center; gap: calc(var(--esc) * 5px); color: #ffe119; font-size: calc(var(--esc) * 6px); letter-spacing: calc(var(--esc) * 1px); }
/* el solcito: un cuadrado amarillo con rayos de a pixel (box-shadow) */
.gj-cine-sol { position: relative; width: calc(var(--esc) * 4px); height: calc(var(--esc) * 4px); background: #ffe119; margin: 0 calc(var(--esc) * 2px);
  box-shadow: calc(var(--esc) * -3px) calc(var(--esc) * 1.5px) 0 calc(var(--esc) * -1.5px) #ff9a3c, calc(var(--esc) * 3px) calc(var(--esc) * 1.5px) 0 calc(var(--esc) * -1.5px) #ff9a3c, 0 calc(var(--esc) * -3px) 0 calc(var(--esc) * -1.5px) #ff9a3c; }
.gj-cine-saltear { color: #8a8478; font-size: calc(var(--esc) * 4px); }
.gj-cine-titulo { min-height: calc(var(--esc) * 8px); color: #fff6a8; font-size: calc(var(--esc) * 8px); letter-spacing: calc(var(--esc) * 1px); text-shadow: var(--esc, 2px) var(--esc, 2px) 0 #e6194b; }
.gj-cine-dueno { color: #c9bfa6; font-size: calc(var(--esc) * 4px); letter-spacing: calc(var(--esc) * .5px); }
.gj-cine.titulo .gj-cine-hora, .gj-cine.titulo .gj-cine-saltear, .gj-cine.titulo .gj-cine-titulo, .gj-cine.titulo .gj-cine-dueno { opacity: 1; }
.gj-cine.entra .gj-cine-saltear { opacity: 1; }
.gj-cine.sale-titulo .gj-cine-hora, .gj-cine.sale-titulo .gj-cine-titulo, .gj-cine.sale-titulo .gj-cine-dueno, .gj-cine.sale-titulo .gj-cine-saltear { opacity: 0; }
/* el destello de la explosión: blanco caliente que se va a naranja y se apaga de a escalones */
.gj-cine-flash { position: absolute; inset: 0; opacity: 0; background: #fff6a8; }
.gj-cine-flash.on { animation: gj-cine-flash calc(.55s * var(--lento, 1)) steps(5) forwards; }
@keyframes gj-cine-flash { 0% { opacity: .75; background: #fffbe0; } 25% { opacity: .4; background: #ffd36b; } 100% { opacity: 0; background: #ff9a3c; } }
/* lo que asoma abajo del mundo cuando la cámara se acerca queda negro, como las barras */
.gj-stage.en-cine { background: var(--gj-tinta, #141414); }
/* Brasa es fuego: mientras renace se ve con todo su color aunque esté mal cuidada */
.gj-pet.cine-late .gj-spr, .gj-pet.cine-vuelve .gj-spr { filter: none; }
/* la sacudida: todo el escenario de a pixeles, corta */
.gj-stage.cine-sacude .gj-canvas, .gj-stage.cine-sacude .gj-actores, .gj-stage.cine-sacude .gj-clima { animation: gj-cine-sacude .45s steps(1); }
@keyframes gj-cine-sacude {
  0% { translate: calc(var(--esc) * 3px) calc(var(--esc) * -2px); } 15% { translate: calc(var(--esc) * -3px) calc(var(--esc) * 1px); }
  30% { translate: calc(var(--esc) * 2px) calc(var(--esc) * 2px); } 45% { translate: calc(var(--esc) * -2px) calc(var(--esc) * -1px); }
  60% { translate: var(--esc, 2px) 0; } 80% { translate: calc(var(--esc) * -1px) 0; } 100% { translate: 0 0; }
}
/* Brasa en la cinemática: la brasita late (brillo), después tiembla fuerte, y vuelve grande. */
.gj-pet.cine-late .gj-flip { animation: gj-cine-late .56s steps(1) infinite; }
@keyframes gj-cine-late { 50% { filter: brightness(1.45) saturate(1.3); } }
.gj-pet.cine-tiembla .gj-flip { animation-duration: .2s; }
.gj-pet.cine-tiembla .gj-body { animation: gj-cine-tiembla .12s steps(1) infinite; }
@keyframes gj-cine-tiembla {
  0% { transform: translate(calc(var(--u) * -1), 0); } 25% { transform: translate(var(--u), calc(var(--u) * -1)); }
  50% { transform: translate(calc(var(--u) * 2), 0); } 75% { transform: translate(calc(var(--u) * -2), calc(var(--u) * -1)); }
}
.gj-pet.cine-vuelve .gj-body { transform-origin: 50% 100%; animation: gj-cine-vuelve 1s steps(1) forwards; }
@keyframes gj-cine-vuelve {
  0% { transform: scale(.5); } 10% { transform: scale(1.7) translateY(calc(var(--u) * -6)); } 25% { transform: scale(1.45) translateY(calc(var(--u) * -4)); }
  40% { transform: scale(.85, 1.1); } 55% { transform: scale(1.15, .9); } 70% { transform: scale(.96, 1.04); } 100% { transform: none; }
}

/* ---- La pelota ---- */
.gj-pelota { position: absolute; width: calc(var(--esc) * 6px); height: calc(var(--esc) * 6px); transform: translate(-50%, -100%); pointer-events: none; }
.gj-pelota-sombra { position: absolute; width: calc(var(--esc) * 6px); height: calc(var(--esc) * 2px); transform: translate(-50%, -50%); background: rgba(20, 40, 10, .3); pointer-events: none; }
.gj-marca { position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%); border: 3px solid var(--gj-tinta); pointer-events: none; animation: gj-marca .5s steps(3) forwards; z-index: 99; }
@keyframes gj-marca { to { transform: translate(-50%, -50%) scale(2); opacity: 0; } }

/* ---- Los bancos (dibujados en el canvas; acá el área clickeable y quién está sentado) ---- */
.granja-capa .gj-banco {
  position: absolute;
  width: calc(var(--esc) * 20px);
  height: calc(var(--esc) * 16px);
  transform: translate(-50%, -100%);
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transition: none;
  cursor: pointer;
}
.granja-capa .gj-banco:hover, .granja-capa .gj-banco:active { transform: translate(-50%, -100%); box-shadow: none; }
.granja-capa .gj-banco:not(.ocupado):hover { outline: 2px dashed var(--gj-amarillo); outline-offset: 0; }
.granja-capa .gj-banco:focus-visible { outline: 3px dashed var(--gj-rojo); outline-offset: 2px; }
.gj-sentado { position: absolute; left: 50%; bottom: calc(var(--esc) * 5px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.gj-sentado[hidden] { display: none; }
.gj-sentado-ava { font-size: calc(var(--esc) * 9px); line-height: 1; animation: gj-sentado 2s steps(1) infinite; }
@keyframes gj-sentado { 50% { transform: translateY(calc(var(--esc) * -1px)); } }
.gj-sentado-nom {
  order: -1;
  margin-bottom: 3px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-family: var(--gj-f);
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
  color: var(--gj-tinta);
  background: #fff;
  border: 2px solid var(--gj-tinta);
}
.gj-nom-fila { display: flex; align-items: stretch; }
/* La franja del color de identidad: un elemento aparte (no un border-left) para que los colores
   animados (galaxia, cielo, camaleón...) también se vean acá, con la clase identity-* de la app. */
.granja-capa .gj-nom-color { position: relative; overflow: hidden; width: 6px; flex: none; background: var(--c, var(--gj-tinta)); border-right: 2px solid var(--gj-tinta); }
.granja-capa .gj-nom-color::before, .granja-capa .gj-nom-color::after { display: none; }
.gj-nom-txt { padding: 3px 4px 2px; }
/* El título de la caja, abajo del nombre: una chapita amarilla (blanca si el cartel ya es el tuyo). */
.gj-nom-titulo { border-top: 2px solid var(--gj-tinta); background: var(--gj-amarillo); font-size: 6px; line-height: 1; padding: 3px 4px 2px; text-align: center; }
.gj-nom-titulo[hidden] { display: none; }
.gj-banco.mio .gj-sentado-nom { background: var(--gj-amarillo); }
.gj-banco.mio .gj-nom-titulo { background: #fff; }
/* El animalito con lo que tiene puesto (accHtml de app.js): los accesorios van en em, así que
   escalan solos con el font-size del --esc. */
.gj-sentado-ava { position: relative; display: inline-flex; justify-content: center; }
.gj-sentado-ava .cosmo-acc-wrap { font-size: inherit; }
.gj-sentado-ava.broma-host .broma-bigote-wrap { width: .62em; top: 50%; }
/* Con sombrero o con trono, el cartel sube: si no, tapa el gorro o los remates del respaldo. */
.gj-banco.con-gorro .gj-sentado-nom { margin-bottom: calc(var(--esc) * 5px); }
.gj-banco.trono .gj-sentado-nom { margin-bottom: calc(var(--esc) * 11px); }

/* ---- El arte de quien está sentado: el banco pintado, el trono, el objeto y el caballete ----
   Todo en px lógicos del paisaje (--x/--y/--w/--h, relativos a la caja del botón de 20x16) por
   --esc: cae en la misma grilla que el canvas y queda pixel perfecto a cualquier escala. */
.gj-banco-arte { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* z-index: su propio apilado, así el tinte y las estrellas no pasan por encima del animalito */
.granja-capa .gj-bp {
  position: absolute;
  left: calc(var(--esc) * var(--x) * 1px);
  top: calc(var(--esc) * var(--y) * 1px);
  width: calc(var(--esc) * var(--w) * 1px);
  height: calc(var(--esc) * var(--h) * 1px);
}
/* Una tabla del color de la persona. Los colores planos llegan por --c; los animados ponen su
   clase identity-* (con !important en el fondo) y ganan solos. overflow para que las estrellas,
   luciérnagas y el sol del cielo queden adentro de la tabla. */
.granja-capa .gj-tabla { background: var(--c, var(--gj-madera)); overflow: hidden; }
.gj-bp > i { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.gj-tabla-luz { top: 0; height: calc(var(--esc) * 1px); background: rgba(255, 255, 255, .38); }
.gj-tabla-sombra { bottom: 0; height: calc(var(--esc) * 1px); background: rgba(0, 0, 0, .22); }
.granja-capa .gj-bp > .gj-tinte { top: 0; bottom: 0; z-index: 3; background: var(--gj-tinte, transparent); opacity: var(--gj-tinte-a, 0); }
/* El ojo del camaleón es de 9px: en una tabla de 2 px lógicos no entra. */
.granja-capa .gj-tabla.identity-camaleon::after { display: none; }
/* El trono de la granja: marco y remates dorados, terciopelo y almohadón del color de la persona. */
.gj-oro-borde { background: #3a2414; }
.gj-oro { background: #e8b923; }
.gj-oro-luz { background: #fff1a8; }
.gj-pata { box-shadow: inset calc(var(--esc) * -1px) 0 0 #9a6b12; }
.granja-capa .gj-remate { background: #e8b923; box-shadow: 0 0 0 calc(var(--esc) * 1px) #3a2414; }
.gj-remate-c { background: #fff1a8; }
.gj-gema { background: #e6194b; }
.granja-capa .gj-perilla { background: #fff1a8; box-shadow: 0 0 0 calc(var(--esc) * 1px) #3a2414; }
.granja-capa .gj-terciopelo { box-shadow: inset 0 0 0 calc(var(--esc) * 1px) rgba(0, 0, 0, .3); }
/* El objeto del escritorio, parado en el pasto al costado del banco (abajo = la base de las patas). */
.gj-banco-obj { position: absolute; bottom: 0; left: calc(var(--esc) * 18px); line-height: 0; }
.gj-banco-obj.izq { left: auto; right: calc(var(--esc) * 18px); }
.gj-banco-obj .desk-sprite { display: block; transform-origin: top left; image-rendering: pixelated; }
/* El caballete con la obra del remate (10x16 lógicos), del otro lado del banco. */
.gj-caballete { position: absolute; bottom: 0; left: calc(var(--esc) * 19px); width: calc(var(--esc) * 10px); height: calc(var(--esc) * 16px); }
.gj-caballete.izq { left: auto; right: calc(var(--esc) * 19px); }
.gj-cab-pata { position: absolute; bottom: 0; width: calc(var(--esc) * 1px); background: var(--gj-madera2); }
.gj-cab-pata-a { left: calc(var(--esc) * 5px); height: calc(var(--esc) * 13px); background: var(--gj-madera3); }
.gj-cab-pata-i { left: calc(var(--esc) * 1px); height: calc(var(--esc) * 9px); }
.gj-cab-pata-d { right: calc(var(--esc) * 1px); height: calc(var(--esc) * 9px); }
.gj-cab-repisa { position: absolute; left: 0; right: 0; bottom: calc(var(--esc) * 5px); height: calc(var(--esc) * 1px); background: var(--gj-madera); box-shadow: 0 calc(var(--esc) * 1px) 0 var(--gj-madera3); }
.gj-cab-marco { position: absolute; left: 0; top: 0; width: calc(var(--esc) * 10px); height: calc(var(--esc) * 10px); background: #e8b923; border: calc(var(--esc) * 1px) solid #3a2414; padding: calc(var(--esc) * 1px) 0 0 calc(var(--esc) * 1px); }
.gj-cab-art { display: block; width: calc(var(--esc) * 6px); height: calc(var(--esc) * 6px); image-rendering: pixelated; }
/* Las cometas: la capa reusa .spring-cometas (así el CSS de spring.css la esconde igual que en el
   cowork: fuera de primavera sin viento, de noche o con mal tiempo), pero vive en el paisaje. */
.granja-capa .gj-cometas { position: absolute; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.granja-capa .gj-cometas .spring-cometa { pointer-events: none; width: calc(var(--esc) * 16px); height: calc(var(--esc) * 16px); left: calc(var(--esc) * -8px); top: calc(var(--esc) * -14px); }

/* ---- La carta de la mascota ---- */
.gj-pop {
  position: absolute;
  z-index: 800;
  width: 280px;
  max-width: calc(100% - 16px);
  background: #fff;
  border: 4px solid var(--gj-tinta);
  box-shadow: 6px 6px 0 var(--gj-tinta);
  padding: 10px 12px;
}
.gj-pop[hidden] { display: none; }
/* Nunca más alta que la granja: si no entra (un guardarropa largo, la granja chica), scrollea adentro
   en vez de cortarse abajo (Seba, 18/10). */
.granja-capa .gj-pop { max-height: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
.gj-pop.entra { animation: gj-entra .2s steps(2); }
@keyframes gj-entra { from { transform: scale(.9); } }
.granja-capa .gj-pop-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 3px solid var(--gj-tinta);
  background: var(--gj-rojo);
  color: #fff;
  font-family: var(--gj-f);
  font-size: 10px;
  line-height: 1;
  box-shadow: none;
  transition: none;
}
.granja-capa .gj-pop-x:hover { transform: none; box-shadow: none; background: #ff3b69; }
.gj-pop-t { margin: 0 0 4px; font-size: 13px; line-height: 1.4; font-weight: 400; }
.gj-de { font-size: 8px; line-height: 1.8; margin-bottom: 6px; }
.gj-de b { font-weight: 400; display: inline-flex; align-items: center; gap: 4px; }
.gj-de b::before { content: ""; width: 8px; height: 8px; background: var(--c); border: 2px solid var(--gj-tinta); }
.gj-estado { display: inline-block; font-size: 8px; line-height: 1.4; border: 2px solid var(--gj-tinta); padding: 3px 5px; margin-bottom: 8px; }
.gj-estado--contenta { background: #c9f0c0; }
.gj-estado--hambre { background: #ffe7a8; }
.gj-estado--triste { background: #cfe3ff; }
.gj-estado--mal { background: #d9d9de; }
.gj-estado--duerme { background: #2e2b70; color: #fff6b0; }
.gj-barrita { display: flex; gap: 2px; border: 3px solid var(--gj-tinta); padding: 2px; background: var(--gj-crema); margin: 2px 0 4px; }
.gj-barrita i { flex: 1; height: 10px; background: #fff; border: 1px solid rgba(20, 20, 20, .25); }
.gj-barrita i.lleno { background: var(--gj-verde); border-color: var(--gj-tinta); }
.gj-barrita--full i { background: var(--gj-amarillo); border-color: var(--gj-tinta); }
.gj-meta { font-size: 8px; line-height: 1.8; }
.gj-acciones { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.granja-capa .gj-acciones .gj-btn { text-align: left; width: 100%; }
.gj-regla { font-size: 8px; line-height: 1.9; border-top: 3px dashed var(--gj-tinta); padding-top: 8px; margin: 0; }

/* El aviso de la granja (arriba al medio del escenario). */
.gj-toast {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  display: none;
  max-width: calc(100% - 24px);
  padding: 7px 10px;
  font-size: 9px;
  line-height: 1.7;
  text-align: center;
  background: var(--gj-amarillo);
  border: 3px solid var(--gj-tinta);
  box-shadow: 4px 4px 0 var(--gj-tinta);
  pointer-events: none;
}
.gj-toast.show { display: block; animation: gj-toast .3s steps(3); }
@keyframes gj-toast { from { transform: translate(-50%, -10px); } }

/* ---- El panel ---- */
.gj-panel { width: 300px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.gj-caja { background: #fff; border: 4px solid var(--gj-tinta); box-shadow: 4px 4px 0 var(--gj-tinta); }
.gj-caja-t { margin: 0; font-size: 11px; font-weight: 400; line-height: 1.4; padding: 9px 12px; background: var(--gj-tinta); color: var(--gj-amarillo); display: flex; justify-content: space-between; gap: 8px; }
.gj-caja-t small { font-size: 9px; color: var(--gj-crema); }
.granja-capa .gj-mia {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  font-family: var(--gj-f);
  color: var(--gj-tinta);
  background: #fff;
  border: 0;
  border-bottom: 3px solid var(--gj-tinta);
  box-shadow: none;
  transition: none;
}
.granja-capa .gj-mia:last-child { border-bottom: 0; }
.granja-capa .gj-mia:hover { background: #fff8cc; transform: none; box-shadow: none; }
.granja-capa .gj-mia.sel { background: var(--gj-amarillo); }
.gj-mini { position: relative; width: 52px; height: 52px; border: 2px solid var(--gj-tinta); background: #bfe6a8; overflow: hidden; }
.gj-mini .gj-spr { inset: auto; left: 0; bottom: 0; width: calc(var(--cell) * var(--esc) * 1px); height: calc(var(--cell) * var(--esc) * 1px); }
.gj-mini.mal .gj-spr { filter: grayscale(.9); }
.gj-mia-info { min-width: 0; }
.gj-mia-nom { font-size: 10px; line-height: 1.4; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gj-mia .gj-barrita { margin: 4px 0 2px; border-width: 2px; padding: 1px; }
.gj-mia .gj-barrita i { height: 6px; }
.gj-vacio { padding: 12px; font-size: 9px; line-height: 1.9; }
.gj-vacio p { margin: 0 0 10px; }
.gj-reglas { margin: 0; padding: 8px 12px; list-style: none; font-size: 8px; line-height: 1.9; }
.gj-reglas li { position: relative; padding: 6px 0 6px 18px; border-bottom: 2px dotted rgba(20, 20, 20, .35); }
.gj-reglas li:last-child { border-bottom: 0; }
.gj-reglas li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background: var(--gj-rojo); border: 2px solid var(--gj-tinta); }
.gj-reglas b { font-weight: 400; background: var(--gj-amarillo); padding: 0 2px; }

/* Panel flotante: cuando al lado le robaría un escalón de escala al paisaje, flota a la derecha. */
.granja-capa.panel-flotante .gj-panel {
  position: fixed;
  top: 72px;
  right: 28px;
  max-height: calc(100vh - 100px);
  overflow: auto;
  z-index: 820;
  display: none;
}
.granja-capa.panel-flotante.panel-abierto .gj-panel { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .gj-spr, .gj-letrero, .gj-burbuja, .gj-nube, .gj-zz i, .gt-bicho, .gj-sentado-ava { animation-duration: 0s !important; }
  .gj-cometas .spring-cometa-hilo, .gj-cometas .spring-cometa { animation: none !important; }
  .gj-pet .gj-body { animation: none !important; }
}

/* Los cursores ajenos que están en la otra vista (app.js posicionarCursor): medio transparentes y
   con un emoji chiquito (🌾 granja / 🪑 ofi) al lado del nombre. Sutil a propósito. */
#cursor-layer .cursor--otra-vista { opacity: .55; }
#cursor-layer .cursor-donde {
  font-size: 10px;
  line-height: 1;
  margin-left: 2px;
  white-space: nowrap;
}

/* ============================================================
   EL NIDO Y LOS HUEVOS (Task 9). El nido está pintado en el canvas (granja.js nido()); los huevos
   son DOM con el mismo sheet que las mascotas (.gj-spr): la fila de idle se mece, la de abajo es la
   eclosión. Los tuyos listos brillan y tienen la flechita; al tocarlos, el momento (.gj-ecl).
   ============================================================ */
.granja-capa .gj-huevo {
  --u: calc(var(--esc) * 1px);
  --sz: calc(var(--cell, 24) * var(--esc) * 1px);
  position: absolute;
  width: var(--sz);
  height: var(--sz);
  transform: translate(-50%, -100%);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transition: none;
  cursor: pointer;
}
.granja-capa .gj-huevo:hover, .granja-capa .gj-huevo:active { transform: translate(-50%, -100%); box-shadow: none; }
/* La celda es de 24 pero el huevo ocupa el medio: solo el dibujo se puede tocar (si no, los
   huevos vecinos se pisan el mouse). */
.granja-capa .gj-huevo { pointer-events: none; }
.gj-huevo-hit { position: absolute; left: calc(var(--u) * 5); width: calc(var(--u) * 14); top: calc(var(--u) * 6); bottom: 0; pointer-events: auto; }
.granja-capa .gj-huevo:hover, .granja-capa .gj-huevo:focus-visible { z-index: 600 !important; }
.granja-capa .gj-huevo:focus-visible { outline: 3px dashed var(--gj-rojo); outline-offset: 0; }
/* Los ajenos se mecen más despacio (duermen); el tuyo listo, al ritmo, con un brillo que late. */
.gj-huevo:not(.listo) .gj-spr { animation-duration: 4s; }
.gj-huevo.listo .gj-spr { animation: gj-spr var(--dur) steps(var(--cols)) infinite, gj-huevo-late 1s steps(2) infinite; }
@keyframes gj-huevo-late {
  0% { filter: drop-shadow(0 0 0 var(--gj-amarillo)) drop-shadow(var(--u) 0 0 var(--gj-amarillo)) drop-shadow(calc(var(--u) * -1) 0 0 var(--gj-amarillo)); }
  50% { filter: none; }
}
.gj-huevo.abriendo { visibility: hidden; }
/* La etiqueta del huevo (dueño, rareza, cuándo) solo al pasar el mouse o con el foco. */
/* Arranca en el borde izquierdo del dibujo (no de la celda de 24): el primer huevo está pegado al borde. */
.granja-capa .gj-huevo .gj-tag { display: none; top: 100%; left: calc(var(--u) * 4); transform: none; color: var(--gj-tinta); }
.gj-huevo:hover .gj-tag, .gj-huevo:focus-visible .gj-tag { display: flex; z-index: 5; }
.gj-cuando { color: #555; }
.gj-badge--comun { background: #f6ecdc; }
.gj-badge--raro { background: #9fd8f5; }
.gj-badge--epico { background: #c3a6f5; }
.gj-badge--legendario { background: var(--gj-amarillo); }
/* UNA flechita sobre el nido entero: cuando tenés un huevo listo (.listo) o con IR A VERLO
   (.resaltado). Es el mismo ::before, así que nunca hay dos. */
.gj-nido { position: absolute; width: 0; height: 0; pointer-events: none; }
.gj-nido.listo::before, .gj-nido.resaltado::before {
  content: "";
  position: absolute;
  left: calc(var(--esc, 2) * -7px);
  top: calc(var(--esc, 2) * -10px);
  width: calc(var(--esc, 2) * 14px);
  height: calc(var(--esc, 2) * 8px);
  background: var(--gj-flecha) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: gj-flecha-nido .6s steps(1) infinite;
  z-index: 400;
}
@keyframes gj-flecha-nido { 50% { transform: translateY(calc(var(--esc, 2) * -2px)); } }
.gj-nido-mas {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 8px;
  line-height: 1;
  padding: 2px 3px 1px;
  background: #fff;
  border: 2px solid var(--gj-tinta);
  z-index: 300;
  pointer-events: none;
}
.gj-mini--huevo { background: #f1e0b0; }
.gj-mia--huevo.listo { background: #fff8cc; }
.gj-mia--huevo.listo .gj-meta { color: var(--gj-rojo); }
/* La mascota que está saliendo del huevo: invisible hasta que termina el momento. */
.gj-pet.por-nacer { visibility: hidden; }

/* ---- El momento de la eclosión: velo oscuro, el huevo grande en el medio ---- */
.gj-ecl {
  position: absolute;
  inset: 0;
  z-index: 850;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(20, 20, 40, .72);
  animation: gj-ecl-entra .3s steps(3);
}
@keyframes gj-ecl-entra { from { background: rgba(20, 20, 40, 0); } }
.gj-ecl-escena { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 40%; }
.gj-ecl-escena::after {
  /* el pastito donde se apoya */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 60%;
  min-width: 120px;
  height: 8px;
  transform: translateX(-50%);
  background: #8ccf66;
  border: 3px solid var(--gj-tinta);
}
.gj-ecl-huevo, .gj-ecl-bicho { position: relative; width: calc(var(--cell) * var(--esc) * 1px); height: calc(var(--cell) * var(--esc) * 1px); }
.gj-ecl-huevo.tiembla { animation: gj-ecl-tiembla .24s steps(2) infinite; }
@keyframes gj-ecl-tiembla { 0% { transform: translateX(calc(var(--esc) * -1px)) rotate(-4deg); } 50% { transform: translateX(calc(var(--esc) * 1px)) rotate(4deg); } }
.gj-ecl-huevo.raja { animation: gj-ecl-tiembla .12s steps(2) 3; }
.gj-ecl-huevo.raja .gj-spr { animation: none; background-position-x: calc(var(--cuadro, 0) * var(--cell) * var(--esc) * -1px); }
.gj-ecl-bicho { animation: gj-ecl-sale .5s steps(4); }
@keyframes gj-ecl-sale { 0% { transform: translateY(calc(var(--esc) * 6px)) scale(.6); } 60% { transform: translateY(calc(var(--esc) * -4px)); } }
.gj-ecl-bicho.gj-tier-epico .gj-spr, .gj-ecl-bicho.gj-tier-legendario .gj-spr { animation: gj-spr var(--dur) steps(var(--cols)) infinite, gj-brilla .15s steps(1) 6; }
.gj-ecl-texto {
  position: relative; /* por encima del aura, que puede bajar hasta acá */
  max-width: min(360px, calc(100% - 32px));
  padding: 10px 14px 12px;
  text-align: center;
  background: #fff;
  border: 4px solid var(--gj-tinta);
  box-shadow: 6px 6px 0 var(--gj-tinta);
}
.gj-ecl-dice { margin: 0; font-size: 10px; line-height: 1.8; }
.gj-ecl-nombre { margin: 6px 0 4px; font-size: 16px; font-weight: 400; line-height: 1.4; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.gj-ecl-sub, .gj-ecl-plata { margin: 0 0 10px; font-size: 8px; line-height: 1.8; }
.gj-ecl-plata b { font-weight: 400; background: var(--gj-amarillo); border: 2px solid var(--gj-tinta); padding: 2px 4px 1px; }
.gj-ecl-texto .gj-btn { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .gj-huevo .gj-spr, .gj-nido.listo::before, .gj-nido.resaltado::before { animation: none !important; }
  .gj-ecl, .gj-ecl-huevo, .gj-ecl-bicho { animation: none !important; }
}

/* La pestaña Granja (en la barra de pestañas, reemplazó a Comida): .tab pone display:inline-flex
   y le ganaría al atributo hidden. Es la última, así que la anterior pierde el borde si no se ve. */
.tab--granja[hidden] { display: none; }
.tabs .tab:has(+ .tab--granja[hidden]), html.season-cerrada .tabs .tab:has(+ #granja-chip) { border-right: none; }

/* ---- "¡Tu huevo esta listo!" (app.js mostrarAvisoHuevo): el puntito de la pestaña y la tarjetita
   colgada de ella. Misma tarjeta que la Misión del día (.mission-popover-card / -title / .mission-btn). */
.granja-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  margin-left: -.1rem;
  padding: 0 2px;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--ink);
  font-family: 'Press Start 2P', monospace;
  font-size: .45rem;
  line-height: 1;
  animation: granja-badge-late 1.2s steps(1) infinite;
}
.granja-badge[hidden] { display: none; }
@keyframes granja-badge-late { 50% { background: var(--accent2); color: var(--ink); } }
.huevo-aviso { position: fixed; z-index: 10003; width: 300px; }
.huevo-aviso .huevo-aviso-card { width: auto; position: relative; }
/* El piquito que apunta a la pestaña. */
.huevo-aviso::before, .huevo-aviso::after {
  content: "";
  position: absolute;
  left: var(--pico, 50%);
  width: 0;
  height: 0;
  border: solid transparent;
}
.huevo-aviso::before { top: -16px; margin-left: -12px; border-width: 0 12px 12px; border-bottom-color: var(--ink); }
.huevo-aviso::after { top: -8px; margin-left: -7px; border-width: 0 7px 7px; border-bottom-color: #fffdf5; z-index: 1; }
/* Los huevos (hasta 3) meciéndose en una cama de paja, como en el nido de la granja. */
.huevo-aviso-nido {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  height: 56px;
  margin: -.1rem 0 .6rem;
  /* Un nidito de paja en escalones de pixel (un cuenco): cada franja es una fila, con el borde
     oscuro abajo y a los costados, la paja y una línea de luz en el labio. */
  background:
    linear-gradient(#fff1b0, #fff1b0) center calc(100% - 9px) / 64px 2px no-repeat,
    linear-gradient(#e8c65a, #e8c65a) center calc(100% - 7px) / 84px 6px no-repeat,
    linear-gradient(#c9a23f, #c9a23f) center calc(100% - 3px) / 68px 4px no-repeat,
    linear-gradient(#5a3418, #5a3418) center calc(100% - 7px) / 90px 8px no-repeat,
    linear-gradient(#5a3418, #5a3418) center calc(100% - 1px) / 74px 6px no-repeat,
    linear-gradient(#5a3418, #5a3418) center bottom / 58px 2px no-repeat;
  image-rendering: pixelated;
}
.huevo-aviso-nido .huevo-fx { margin: 0 -8px 4px; }
.huevo-aviso .mission-popover-text { text-align: center; }
.huevo-aviso-botones { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.huevo-aviso-ir { background: var(--accent); color: #fff; }
.huevo-aviso-ir:hover { background: #ff3d6b; }
@media (prefers-reduced-motion: reduce) {
  .granja-badge { animation: none; }
}
/* El chiche del título (arte de app.js, 12px = 1 pixel por pixel) al lado del texto. */
.gj-nom-titulo { display: flex; align-items: center; justify-content: center; gap: 3px; }
.gj-nom-titulo .chiche { --t: 12px; }

/* "Vio la luz" (título de la caja): de noche el banco de quien lo tiene puesto alumbra en pixel art,
   como la silla de la ofi (sin degradé): ::before es una pileta de luz plana en octógono de escalera
   (escalones de 2 pixeles del paisaje) y ::after un punto cuyos box-shadow son RAYOS de dibujito (tres
   cuadraditos de 2 pixeles, de naranja a crema) que se turnan entre la cruz y la diagonal. Detrás del
   arte del banco (z-index -1). Solo con la noche de la granja (granja.js pone .luz con su propia hora). */
.gj-banco.luz::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(var(--esc) * -8px); right: calc(var(--esc) * -8px); top: calc(var(--esc) * -6px); bottom: calc(var(--esc) * -4px);
  background: rgba(255, 205, 80, .38);
  clip-path: polygon(0 calc(var(--esc) * 6px), calc(var(--esc) * 2px) calc(var(--esc) * 6px), calc(var(--esc) * 2px) calc(var(--esc) * 4px), calc(var(--esc) * 4px) calc(var(--esc) * 4px), calc(var(--esc) * 4px) calc(var(--esc) * 2px), calc(var(--esc) * 6px) calc(var(--esc) * 2px), calc(var(--esc) * 6px) 0, calc(100% - calc(var(--esc) * 6px)) 0, calc(100% - calc(var(--esc) * 6px)) calc(var(--esc) * 2px), calc(100% - calc(var(--esc) * 4px)) calc(var(--esc) * 2px), calc(100% - calc(var(--esc) * 4px)) calc(var(--esc) * 4px), calc(100% - calc(var(--esc) * 2px)) calc(var(--esc) * 4px), calc(100% - calc(var(--esc) * 2px)) calc(var(--esc) * 6px), 100% calc(var(--esc) * 6px), 100% calc(100% - calc(var(--esc) * 6px)), calc(100% - calc(var(--esc) * 2px)) calc(100% - calc(var(--esc) * 6px)), calc(100% - calc(var(--esc) * 2px)) calc(100% - calc(var(--esc) * 4px)), calc(100% - calc(var(--esc) * 4px)) calc(100% - calc(var(--esc) * 4px)), calc(100% - calc(var(--esc) * 4px)) calc(100% - calc(var(--esc) * 2px)), calc(100% - calc(var(--esc) * 6px)) calc(100% - calc(var(--esc) * 2px)), calc(100% - calc(var(--esc) * 6px)) 100%, calc(var(--esc) * 6px) 100%, calc(var(--esc) * 6px) calc(100% - calc(var(--esc) * 2px)), calc(var(--esc) * 4px) calc(100% - calc(var(--esc) * 2px)), calc(var(--esc) * 4px) calc(100% - calc(var(--esc) * 4px)), calc(var(--esc) * 2px) calc(100% - calc(var(--esc) * 4px)), calc(var(--esc) * 2px) calc(100% - calc(var(--esc) * 6px)), 0 calc(100% - calc(var(--esc) * 6px)));
}
.gj-banco.luz::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(50% - calc(var(--esc) * 1px)); top: 45%; width: calc(var(--esc) * 2px); height: calc(var(--esc) * 2px); background: transparent;
  box-shadow: calc(var(--esc) * 0px) calc(var(--esc) * -12px) 0 #e88a1a, calc(var(--esc) * 14px) calc(var(--esc) * -1px) 0 #e88a1a, calc(var(--esc) * -14px) calc(var(--esc) * -1px) 0 #e88a1a, calc(var(--esc) * 0px) calc(var(--esc) * -14px) 0 #ffc928, calc(var(--esc) * 16px) calc(var(--esc) * -1px) 0 #ffc928, calc(var(--esc) * -16px) calc(var(--esc) * -1px) 0 #ffc928, calc(var(--esc) * 0px) calc(var(--esc) * -16px) 0 #fff3b0, calc(var(--esc) * 18px) calc(var(--esc) * -1px) 0 #fff3b0, calc(var(--esc) * -18px) calc(var(--esc) * -1px) 0 #fff3b0;
  animation: gj-banco-luz 1.6s steps(1) infinite;
}
@keyframes gj-banco-luz {
  0%, 49% { box-shadow: calc(var(--esc) * 0px) calc(var(--esc) * -12px) 0 #e88a1a, calc(var(--esc) * 14px) calc(var(--esc) * -1px) 0 #e88a1a, calc(var(--esc) * -14px) calc(var(--esc) * -1px) 0 #e88a1a, calc(var(--esc) * 0px) calc(var(--esc) * -14px) 0 #ffc928, calc(var(--esc) * 16px) calc(var(--esc) * -1px) 0 #ffc928, calc(var(--esc) * -16px) calc(var(--esc) * -1px) 0 #ffc928, calc(var(--esc) * 0px) calc(var(--esc) * -16px) 0 #fff3b0, calc(var(--esc) * 18px) calc(var(--esc) * -1px) 0 #fff3b0, calc(var(--esc) * -18px) calc(var(--esc) * -1px) 0 #fff3b0; }
  50%, 100% { box-shadow: calc(var(--esc) * 10px) calc(var(--esc) * -10px) 0 #e88a1a, calc(var(--esc) * -10px) calc(var(--esc) * -10px) 0 #e88a1a, calc(var(--esc) * 12px) calc(var(--esc) * -12px) 0 #ffc928, calc(var(--esc) * -12px) calc(var(--esc) * -12px) 0 #ffc928, calc(var(--esc) * 14px) calc(var(--esc) * -14px) 0 #fff3b0, calc(var(--esc) * -14px) calc(var(--esc) * -14px) 0 #fff3b0; }
}
@media (prefers-reduced-motion: reduce) { .gj-banco.luz::after { animation: none; } }

/* LOS CARTELITOS DE LA OFI (granja.js CARTELES): una tablita de madera clavada en el paisaje,
   con texto pixel; al tocarla sale un globito. La base del cartel es su punto (x, y). */
.granja-capa .gj-cartel {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center;
  padding: 0; margin: 0; border: 0; background: none; box-shadow: none; cursor: pointer;
}
.granja-capa .gj-cartel:hover, .granja-capa .gj-cartel:active { transform: translate(-50%, -100%); box-shadow: none; }
.gj-cartel-tabla {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--esc) * 1px);
  font-family: var(--gj-f); font-size: calc(var(--esc) * 2.2px); line-height: 1; color: #f3e2bd;
  /* Madera del paisaje, sin el contorno negro de la UI: el cartel acompaña, no le roba al paisaje. */
  background: #8a5a34; border: calc(var(--esc) * .5px) solid #5a3418;
  box-shadow: inset 0 calc(var(--esc) * -1px) 0 #74492a;
  padding: calc(var(--esc) * 1.5px) calc(var(--esc) * 2px) calc(var(--esc) * 1px);
  white-space: nowrap;
}
.gj-cartel-palo { width: calc(var(--esc) * 1.5px); height: calc(var(--esc) * 3px); background: #5a3418; }
.gj-cartel:focus-visible .gj-cartel-tabla { outline: 2px solid var(--gj-amarillo); outline-offset: 2px; }
.gj-cartel-globo {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 220px; white-space: normal; text-align: left;
  font-family: var(--gj-f); font-size: 9px; line-height: 1.5; color: var(--gj-tinta);
  background: #fff; border: 2px solid var(--gj-tinta); box-shadow: 3px 3px 0 var(--gj-tinta);
  padding: 7px 8px; z-index: 5;
}
.gj-cartel-globo[hidden] { display: none; }
.gj-cartel-globo::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -5px; width: 10px; height: 6px; background: var(--gj-tinta);
  clip-path: polygon(0 0, 100% 0, 100% 34%, 80% 34%, 80% 67%, 60% 67%, 60% 100%, 40% 100%, 40% 67%, 20% 67%, 20% 34%, 0 34%); }

/* LA PUERTA DE LA DESPENSA DE ABI (granja.js armarDespensa; el cryptic de sotano.js). Va encima del
   portón del granero, en píxeles del paisaje (--esc), con los colores del granero y sin el contorno
   negro de la UI, como los cartelitos. Nada se mueve: cambia de estado y listo. */
.granja-capa .gj-despensa {
  position: absolute; padding: 0; margin: 0; border: 0; background: none; box-shadow: none;
  cursor: pointer; transform: none; transition: none;
}
.granja-capa .gj-despensa:hover, .granja-capa .gj-despensa:active { transform: none; box-shadow: none; }
.granja-capa .gj-despensa:hover { outline: calc(var(--esc) * .5px) solid #f4ecd8; outline-offset: calc(var(--esc) * .5px); }
.granja-capa .gj-despensa:focus-visible { outline: 2px solid var(--gj-amarillo); outline-offset: 2px; }
.granja-capa .gj-despensa[hidden] { display: none; }
.gj-despensa > span { position: absolute; pointer-events: none; }
/* El candado de latón, colgado del travesaño del medio (cerrada y rendida). */
.gj-despensa-candado {
  display: none; left: calc(var(--esc) * 10px); top: calc(var(--esc) * 6px);
  width: calc(var(--esc) * 6px); height: calc(var(--esc) * 5px); box-sizing: border-box;
  background: #d9a520; border: calc(var(--esc) * 1px) solid #2b1a1a;
  box-shadow: inset calc(var(--esc) * -1px) calc(var(--esc) * -1px) 0 #9c7410;
}
.gj-despensa-candado::before {
  content: ""; position: absolute; left: 0; top: calc(var(--esc) * -4px);
  width: calc(var(--esc) * 4px); height: calc(var(--esc) * 3px); box-sizing: border-box;
  border: calc(var(--esc) * 1px) solid #8a8f98; border-bottom: 0;
}
.gj-despensa-candado::after {
  content: ""; position: absolute; left: calc(var(--esc) * 1px); top: calc(var(--esc) * 1px);
  width: calc(var(--esc) * 1px); height: calc(var(--esc) * 2px); background: #2b1a1a;
}
.gj-despensa[data-estado="cerrada"] .gj-despensa-candado,
.gj-despensa[data-estado="rendida"] .gj-despensa-candado { display: block; }
/* Abierta: el portón abierto, adentro a media luz (la lamparita, un estante con frascos, el piso). */
.gj-despensa-adentro {
  display: none; left: 0; right: 0; top: calc(var(--esc) * -3px); bottom: 0;
  background:
    linear-gradient(#ffd86b 0 0) calc(var(--esc) * 12px) calc(var(--esc) * 3px) / calc(var(--esc) * 2px) calc(var(--esc) * 2px) no-repeat,
    linear-gradient(#2b1a1a 0 0) calc(var(--esc) * 12.5px) 0 / calc(var(--esc) * 1px) calc(var(--esc) * 3px) no-repeat,
    linear-gradient(#c98a3a 0 0) calc(var(--esc) * 3px) calc(var(--esc) * 8px) / calc(var(--esc) * 2px) calc(var(--esc) * 3px) no-repeat,
    linear-gradient(#e8c65a 0 0) calc(var(--esc) * 6px) calc(var(--esc) * 9px) / calc(var(--esc) * 2px) calc(var(--esc) * 2px) no-repeat,
    linear-gradient(#5a7a9a 0 0) calc(var(--esc) * 19px) calc(var(--esc) * 8px) / calc(var(--esc) * 4px) calc(var(--esc) * 3px) no-repeat,
    linear-gradient(#8a5a34 0 0) calc(var(--esc) * 2px) calc(var(--esc) * 11px) / calc(var(--esc) * 22px) calc(var(--esc) * 1px) no-repeat,
    linear-gradient(#6e4522 0 0) 0 100% / 100% calc(var(--esc) * 4px) no-repeat,
    linear-gradient(#5a3a22 0 0) calc(var(--esc) * 7px) 100% / calc(var(--esc) * 12px) calc(var(--esc) * 4px) no-repeat,
    #24150d;
}
.gj-despensa[data-estado="abierta"] .gj-despensa-adentro { display: block; }
/* Clausurada: una tabla clavada de lado a lado. */
.gj-despensa-tabla {
  display: none; left: calc(var(--esc) * -2px); right: calc(var(--esc) * -2px); top: calc(var(--esc) * 5px);
  height: calc(var(--esc) * 4px); box-sizing: border-box;
  background: #9b6a3c; border: calc(var(--esc) * .5px) solid #5a3418;
  box-shadow: inset 0 calc(var(--esc) * -1px) 0 #74492a;
}
.gj-despensa-tabla::before, .gj-despensa-tabla::after {
  content: ""; position: absolute; top: calc(var(--esc) * 1px);
  width: calc(var(--esc) * 1px); height: calc(var(--esc) * 1px); background: #2b1a1a;
}
.gj-despensa-tabla::before { left: calc(var(--esc) * 2px); }
.gj-despensa-tabla::after { right: calc(var(--esc) * 2px); }
.gj-despensa[data-estado="clausurada"] .gj-despensa-tabla { display: block; }
/* "HOY ENTRARON N": una tablita como las de los cartelitos, abajo en la puerta. */
.granja-capa .gj-despensa-cartel { left: 50%; bottom: calc(var(--esc) * 1px); transform: translateX(-50%); font-size: calc(var(--esc) * 2px); white-space: nowrap; }
.granja-capa .gj-despensa-cartel[hidden] { display: none; }

/* ---- EL MOMENTO DE LA GRANJA QUE CRECE (granja.js, arrancarMomento) ----
   Mientras dura, el HUD y los botones de la cámara se corren: la cámara la maneja el momento. */
.gj-stage.en-momento .gj-hud { visibility: hidden; }
.granja-capa .gj-stage.en-momento .gj-pan { display: none; }
.gj-stage.en-momento .gj-actores { cursor: default; }

/* La nube de polvo sobre el terreno nuevo: columnas de 24 px del mundo con el borde de arriba en
   escalones (clip-path desde granja.js), que hierven de a un pixel y hacen ¡puf! de izquierda a
   derecha. Por encima de las mascotas (las que se mudaron esperan adentro), debajo del destello. */
.gj-polvo { position: absolute; top: 0; bottom: 0; z-index: 690; pointer-events: none; }
.gj-polvo.tarde { filter: sepia(.25) saturate(1.25); }
.gj-polvo.noche { filter: brightness(.48) saturate(.7) hue-rotate(200deg); }
.gj-polvo-col {
  position: absolute;
  top: calc(var(--esc) * 78px);
  bottom: 0;
  /* Volumen en bandas (luz arriba, sombra abajo) y motas de pixel sueltas, sin rayas: polvo, no pared. */
  background:
    radial-gradient(circle, #fff8e2 0 calc(var(--esc) * .7px), transparent calc(var(--esc) * .8px)) 0 0 / calc(var(--esc) * 11px) calc(var(--esc) * 9px),
    radial-gradient(circle, #c7ab72 0 calc(var(--esc) * .7px), transparent calc(var(--esc) * .8px)) calc(var(--esc) * 5px) calc(var(--esc) * 4px) / calc(var(--esc) * 13px) calc(var(--esc) * 11px),
    linear-gradient(#fbf2d6 0 calc(var(--esc) * 10px), #efe0b8 calc(var(--esc) * 10px) calc(var(--esc) * 30px), #e3cd98 calc(var(--esc) * 30px) calc(var(--esc) * 70px), #d6bd85 calc(var(--esc) * 70px));
  animation: gj-hierve .36s steps(1) infinite;
}
.gj-polvo-col:nth-child(even) { animation-delay: -.18s; }
@keyframes gj-hierve { 50% { transform: translateY(calc(var(--esc) * -1px)); } }
.gj-polvo-col.puf { animation: gj-puf .38s steps(4) forwards; }
@keyframes gj-puf {
  0% { transform: none; opacity: 1; }
  100% { transform: translate(calc(var(--esc) * var(--dx, 1) * 3px), calc(var(--esc) * -8px)) scale(1.25); opacity: 0; }
}

/* El cartel ¡NUEVO TERRENO!: una tabla grande de la madera del paisaje (como los cartelitos de la
   ofi, sin el contorno negro de la UI), colgada de dos sogas desde arriba del escenario. Cae, rebota
   y se hamaca (steps: 12 cuadros por segundo), y al final sube. */
.gj-nuevo { position: absolute; top: 0; z-index: 950; transform: translateX(-50%); pointer-events: none; }
.gj-nuevo-cuelga {
  position: relative;
  padding-top: calc(var(--esc) * 26px);
  transform-origin: 50% 0;
  transform: translateY(-130%);
  visibility: hidden;
}
.gj-nuevo.baja .gj-nuevo-cuelga { visibility: visible; animation: gj-nuevo-cae 1.5s steps(18) forwards; }
.gj-nuevo.sube .gj-nuevo-cuelga { visibility: visible; animation: gj-nuevo-sube .32s steps(4) forwards; }
@keyframes gj-nuevo-cae {
  0% { transform: translateY(-130%) rotate(0deg); }
  20% { transform: translateY(0) rotate(0deg); }
  27% { transform: translateY(calc(var(--esc) * -4px)) rotate(-1deg); }
  34% { transform: translateY(0) rotate(5deg); }
  48% { transform: translateY(0) rotate(-4deg); }
  62% { transform: translateY(0) rotate(2.5deg); }
  76% { transform: translateY(0) rotate(-1.2deg); }
  88% { transform: translateY(0) rotate(.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes gj-nuevo-sube { from { transform: translateY(0); } to { transform: translateY(-130%); } }
.gj-nuevo-soga {
  position: absolute;
  top: 0;
  width: calc(var(--esc) * 1px);
  height: calc(var(--esc) * 29px);
  background: #d8b677;
  box-shadow: calc(var(--esc) * 1px) 0 0 #9c7a44;
}
.gj-nuevo-soga--i { left: 16%; }
.gj-nuevo-soga--d { right: 16%; }
.gj-nuevo-tabla {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--esc) * 4px);
  padding: calc(var(--esc) * 7px) calc(var(--esc) * 9px) calc(var(--esc) * 6px);
  font-family: var(--gj-f);
  line-height: 1;
  white-space: nowrap;
  color: #f3e2bd;
  background:
    repeating-linear-gradient(0deg, transparent 0 calc(var(--esc) * 8px), #74492a calc(var(--esc) * 8px) calc(var(--esc) * 9px)),
    #8a5a34;
  border: calc(var(--esc) * 1px) solid #5a3418;
  box-shadow: inset 0 calc(var(--esc) * -1.5px) 0 #74492a, inset 0 calc(var(--esc) * 1px) 0 #a8734a, 0 calc(var(--esc) * 2px) 0 rgba(58, 30, 10, .35);
  text-shadow: 0 calc(var(--esc) * .5px) 0 #5a3418;
}
.gj-nuevo-t { font-size: calc(var(--esc) * 8px); }
.gj-nuevo-s { font-size: calc(var(--esc) * 5px); color: #ffd86b; }
.gj-nuevo-d { font-size: calc(var(--esc) * 3.5px); color: #f3e2bd; }
.gj-nuevo-clavo { position: absolute; top: calc(var(--esc) * 2px); width: calc(var(--esc) * 2px); height: calc(var(--esc) * 2px); background: #3a2210; box-shadow: inset calc(var(--esc) * -.5px) calc(var(--esc) * -.5px) 0 #8c6a44; }
.gj-nuevo-clavo--i { left: calc(16% - var(--esc) * .5px); }
.gj-nuevo-clavo--d { right: calc(16% - var(--esc) * .5px); }
/* Movimiento reducido: el cartel aparece quieto (y la nube no existe). */
.gj-nuevo.quieto .gj-nuevo-cuelga { transform: none; visibility: visible; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .gj-nuevo .gj-nuevo-cuelga { transform: none; animation: none !important; }
  .gj-polvo-col { animation: none; }
}

/* El aviso de la granja que crece, colgado de la pestaña Granja como el del huevo (.huevo-aviso):
   arriba, una tablita del mismo cartel que baja en la granja. */
.crecio-aviso-cartel { display: flex; flex-direction: column; align-items: center; margin: -.1rem 0 .7rem; }
.crecio-aviso-cartel .gj-nuevo-tabla { --esc: 1.25; }
.crecio-aviso-sogas { display: flex; justify-content: space-between; width: 60%; height: 12px; }
.crecio-aviso-sogas i { display: block; width: 2px; height: 100%; background: #b08a4e; box-shadow: 2px 0 0 #8a6a3a; }

/* Tomando agua (costumbres, granja.js nuevoDestino): en la orilla, agacha la cabeza de a un pixel. */
.gj-pet.bebe .gj-body { animation: gj-sorbo 1.1s steps(1) infinite; transform-origin: 50% 100%; }
@keyframes gj-sorbo { 0%, 45% { transform: translateY(0); } 50%, 95% { transform: translateY(var(--u)) scaleY(.94); } }

/* ---- El nombre de la mascota (granjaNombrar) ----
   El encabezado de la carta son dos renglones de alto fijo: "Pancho · Vaquita" + el lápiz (solo el
   dueño), y abajo las insignias. El campo para cambiar el nombre ocupa exactamente la caja del nombre
   (misma letra y alto, sin bordes que agranden), el contador va adentro, sobre el borde derecho, y
   el lápiz se vuelve el tilde de guardar en el mismo lugar: entrar o salir de editar no mueve nada. */
.gj-pop-linea { position: relative; display: flex; align-items: center; gap: 6px; height: 22px; margin-right: 30px; min-width: 0; }
.gj-pop-nom { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.gj-pop-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gj-pop-esp { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gj-pop-esp, .gj-mia-esp { font-size: 8px; color: #6b6355; white-space: nowrap; }
.gj-pop-insignias { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; min-height: 16px; }
.gj-pop-linea.largo .gj-pop-nom, .granja-capa .gj-pop-linea.largo .gj-nombre-in { font-size: 11px; }
/* El lápiz: pixel art suelto, sin caja. Al pasar el mouse aparece un fondito amarillo. */
.granja-capa .gj-lapiz {
  flex: none; width: 22px; height: 22px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; box-shadow: none; color: #1f9d55;
  cursor: pointer; transition: none;
}
.granja-capa .gj-lapiz .gj-pix { display: block; width: 14px; height: 14px; }
.granja-capa .gj-lapiz:hover { background: var(--gj-amarillo); transform: none; box-shadow: none; }
.granja-capa .gj-lapiz:active .gj-pix { transform: translate(1px, 1px); }
.granja-capa .gj-lapiz:focus-visible { outline: 2px dashed var(--gj-rojo); outline-offset: 1px; }
.granja-capa .gj-lapiz.guardar { color: var(--gj-tinta); }
.granja-capa .gj-lapiz.guardar:hover { color: #1f9d55; }
.granja-capa .gj-lapiz.ok { animation: gj-tilde .36s steps(3); }
@keyframes gj-tilde { from { transform: scale(.4); } 66% { transform: scale(1.25); } }
/* El campo: la misma caja que el nombre, con un fondito crema y la línea de abajo como "estás escribiendo acá". */
.gj-nombre { position: relative; flex: 1 1 auto; min-width: 0; height: 22px; }
.granja-capa .gj-nombre-in {
  display: block; box-sizing: border-box; width: 100%; height: 22px; margin: 0;
  font-family: var(--gj-f); font-size: 13px; line-height: 20px; color: var(--gj-tinta);
  padding: 0 38px 0 3px; border: 0; border-radius: 0; outline: none;
  background: linear-gradient(var(--gj-tinta), var(--gj-tinta)) left bottom / 100% 2px no-repeat, #fff6c9;
  box-shadow: none;
}
.granja-capa .gj-nombre-in::placeholder { color: #a39a86; }
.granja-capa .gj-nombre-in:focus { outline: none; box-shadow: none; background: linear-gradient(var(--gj-rojo), var(--gj-rojo)) left bottom / 100% 2px no-repeat, #fff6c9; }
.gj-nombre-cuenta { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); font-size: 6px; line-height: 1; color: #8a816f; pointer-events: none; }
.gj-nombre-cuenta.pasado { color: var(--gj-rojo); }
/* El error: un renglón chiquito justo abajo del nombre, adentro de la carta, por arriba de las insignias. */
.gj-nombre-error {
  position: absolute; left: 0; right: -30px; top: calc(100% + 2px); z-index: 2;
  font-size: 7px; line-height: 1.6; color: #fff; background: var(--gj-rojo);
  border: 2px solid var(--gj-tinta); padding: 2px 5px 1px;
}
.gj-nombre-error.sacude { animation: gj-nombre-error .3s steps(3); }
@keyframes gj-nombre-error { from { transform: translateX(-4px); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .granja-capa .gj-lapiz.ok, .gj-nombre-error.sacude { animation: none; } }
.gj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- TIRO AL BLANCO: la diana de paja, la gomera y la mira (granja.js, "TIRO AL BLANCO") ----
   La diana y la gomera son actores del mundo (px lógicos × --esc), paradas en el carril de abajo.
   La mira es una capa encima del escenario mientras apuntás: ahí se estira la gomera. */
.granja-capa .gj-diana,
.granja-capa .gj-honda {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  image-rendering: pixelated;
}
.granja-capa .gj-diana { width: calc(var(--esc) * 15px); height: calc(var(--esc) * 24px); }
.granja-capa .gj-honda { width: calc(var(--esc) * 11px); height: calc(var(--esc) * 14px); }
.granja-capa .gj-diana.golpe { animation: gj-diana-golpe .45s steps(5) 1; }
@keyframes gj-diana-golpe {
  20% { transform: translate(calc(-50% + var(--esc) * 2px), -100%) rotate(6deg); }
  40% { transform: translate(calc(-50% - var(--esc) * 2px), -100%) rotate(-5deg); }
  60% { transform: translate(calc(-50% + var(--esc) * 1px), -100%) rotate(3deg); }
  80% { transform: translate(-50%, -100%) rotate(-1deg); }
}
.granja-capa .gj-diana.llega { animation: gj-diana-llega .5s steps(5) 1; transform-origin: 50% 100%; }
@keyframes gj-diana-llega { from { transform: translate(-50%, -100%) scale(1, 0); } 60% { transform: translate(-50%, -100%) scale(1, 1.15); } }
/* La gomera brilla un poco cuando es tu turno de apuntar. */
.granja-capa.tirando .gj-honda { filter: drop-shadow(0 0 0 #fff) drop-shadow(calc(var(--esc) * 1px) 0 0 var(--gj-amarillo)) drop-shadow(calc(var(--esc) * -1px) 0 0 var(--gj-amarillo)); }

/* ¡EMBOCO!: un sello arcade que salta arriba de la diana. */
.granja-capa .gj-emboco {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 880;
  pointer-events: none;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1;
  color: var(--gj-amarillo);
  background: var(--gj-tinta);
  border: 3px solid var(--gj-tinta);
  outline: 3px solid var(--gj-amarillo);
  padding: 6px 8px 5px;
  box-shadow: 5px 5px 0 #e6194b;
  animation: gj-emboco 1.5s steps(1) forwards;
}
.granja-capa .gj-emboco small { display: block; margin-top: 5px; font-size: 7px; color: #fff; text-align: center; }
@keyframes gj-emboco {
  0% { transform: translate(-50%, -60%) scale(.5); }
  8% { transform: translate(-50%, -110%) scale(1.15); }
  16% { transform: translate(-50%, -100%) scale(1); }
  85% { opacity: 1; transform: translate(-50%, -100%); }
  92% { opacity: .5; transform: translate(-50%, -115%); }
  100% { opacity: 0; transform: translate(-50%, -130%); }
}

/* La mira: tapa el escenario (no se arrastra la cámara ni se abren cartas mientras apuntás). */
.granja-capa .gj-mira {
  position: absolute;
  inset: 0;
  z-index: 720;
  display: none;
  cursor: grab;
  touch-action: none;
}
.granja-capa.tirando .gj-mira { display: block; }
.granja-capa .gj-mira.estirando { cursor: grabbing; }
.granja-capa .gj-mira canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.granja-capa.tirando .gj-pan { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .granja-capa .gj-diana.golpe, .granja-capa .gj-diana.llega { animation: none; }
  .granja-capa .gj-emboco { animation: gj-emboco-quieto 1.8s steps(1) forwards; }
  @keyframes gj-emboco-quieto { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
}

/* ---- MASCOTAS ELECTRICAS ⚡ (le cayó un rayo en una tormenta: para siempre) ----
   El look entero vive acá y en lookElectrico/bzzt/radiografia (public/granja.js). Barato a propósito
   (puede haber muchas): la hebillita de rayo en la cabeza (una imagen de 6x8), una chispita de
   pixeles que salta cada tanto (seguido si corre, salta, le pasa la corriente o es de noche) y el
   BZZZT: .rx cambia el sheet por el de rayos X (granja-rayosx.png, mismo
   layout: la animación sigue en el mismo cuadro). --rd desfasa a cada una. */
.gj-pet.rx .gj-spr { background-image: var(--sheet-rx); filter: none; }
/* La hebillita de rayo: en la cabeza, arriba a la derecha del borde de arriba del dibujo (--mx, --my:
   GRANJA_RAYO_CABEZA), flotando de a un pixel. Adentro de .gj-flip: se da vuelta con el dibujo. De
   noche titila en blanco cada tanto (sin halos: todo pixel). */
.gj-hebilla {
  position: absolute;
  left: calc(var(--u) * (var(--mx, 12) + 2));
  bottom: calc(var(--u) * (var(--cell, 24) - var(--my, 0) - 4));
  width: calc(var(--u) * 6); height: calc(var(--u) * 8);
  image-rendering: pixelated; pointer-events: none; z-index: 1;
  animation: gj-hebilla 1.4s steps(1) infinite; animation-delay: var(--rd, 0s);
}
@keyframes gj-hebilla { 0%, 49% { transform: translateY(0); } 50%, 100% { transform: translateY(calc(var(--u) * -1)); } }
.gj-pet.electrica-noche .gj-hebilla { animation: gj-hebilla 1.4s steps(1) infinite, gj-hebilla-noche 3.1s steps(1) infinite; animation-delay: var(--rd, 0s); }
@keyframes gj-hebilla-noche { 0%, 80% { filter: none; } 82% { filter: brightness(1.8); } 86% { filter: none; } 88% { filter: brightness(1.8); } 92%, 100% { filter: none; } }
.gj-pet.electrica-noche .gj-chispas { animation-duration: 2.3s; }
.gj-pet.rx .gj-hebilla { filter: brightness(1.8); }
/* La chispita: un pixel blanco con su cruz amarilla que aparece en dos lugares del dibujo. */
.gj-chispas {
  position: absolute; left: 50%; top: 40%;
  width: var(--u); height: var(--u);
  pointer-events: none; z-index: 2; opacity: 0;
  animation: gj-chispas 4.6s steps(1) infinite;
  animation-delay: var(--rd, 0s);
}
.gj-pet.electrica.camina .gj-chispas, .gj-pet.electrica.hop .gj-chispas, .gj-pet.electrica.chispea .gj-chispas, .gj-pet.electrica.rayada .gj-chispas { animation-duration: 1.1s; }
@keyframes gj-chispas {
  0% { opacity: 1; transform: translate(calc(var(--u) * -8), calc(var(--u) * -3)); background: #fff; box-shadow: var(--u) 0 #ffe119, calc(var(--u) * -1) 0 #ffe119, 0 calc(var(--u) * -1) #ffe119, calc(var(--u) * 2) var(--u) #ffe119; }
  5% { opacity: 1; transform: translate(calc(var(--u) * -9), calc(var(--u) * -5)); background: #ffe119; box-shadow: calc(var(--u) * -1) calc(var(--u) * -1) #fff; }
  10% { opacity: 0; }
  52% { opacity: 1; transform: translate(calc(var(--u) * 7), calc(var(--u) * -1)); background: #fff; box-shadow: calc(var(--u) * -1) 0 #ffe119, var(--u) 0 #ffe119, 0 var(--u) #ffe119, calc(var(--u) * -2) calc(var(--u) * -1) #ffe119; }
  57% { opacity: 1; transform: translate(calc(var(--u) * 8), calc(var(--u) * -3)); background: #ffe119; box-shadow: var(--u) calc(var(--u) * -1) #fff; }
  62%, 100% { opacity: 0; }
}
/* El ⚡ en la etiqueta, la carta y TUS MASCOTAS. */
.gj-rayito { margin-right: 3px; font-size: 9px; line-height: 1; }
.gj-badge--rayo { background: var(--gj-tinta); color: #ffe119; border-color: var(--gj-tinta); }
.gj-meta-rayo { color: #8a6d00; }
/* La placa de la carta: la radiografía en su negativo, sobre negro azulado, con su cartelito. */
.gj-placa { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 6px; background: #0b1230; border: 2px solid var(--gj-tinta); box-shadow: inset 0 0 0 2px #24346f; }
.gj-placa-foto { position: relative; flex: none; width: calc(var(--cell) * var(--esc) * 1px); height: calc(var(--cell) * var(--esc) * 1px);
  background: repeating-linear-gradient(0deg, rgba(159, 236, 255, .07) 0 2px, transparent 2px 4px); }
.gj-placa-t { font-size: 8px; line-height: 1.6; color: #9fecff; letter-spacing: .5px; word-break: break-word; }

/* EL RAYO que le cae a una: el canvas chiquito de granja.js (dibujarRayo), arriba de la lluvia y del fogonazo (el escenario se blanquea y el rayo queda entero). */
.gj-rayo { position: absolute; top: 0; image-rendering: pixelated; pointer-events: none; z-index: 695; animation: gj-rayo .7s steps(1) forwards; }
@keyframes gj-rayo { 0% { opacity: 1; } 16% { opacity: 0; } 26% { opacity: 1; } 66% { opacity: 1; } 76% { opacity: 0; } 84% { opacity: 1; } 100% { opacity: 0; } }
.gj-rayo-flash { position: absolute; inset: 0; background: #fffbe0; pointer-events: none; z-index: 690; opacity: 0; animation: gj-rayo-flash .42s steps(1) forwards; }
@keyframes gj-rayo-flash { 0% { opacity: .62; } 14% { opacity: 0; } 28% { opacity: .38; } 42%, 100% { opacity: 0; } }
.gj-chispa-golpe { position: absolute; width: var(--px); height: var(--px); box-shadow: 0 0 0 1px var(--gj-tinta); pointer-events: none; z-index: 696; animation: gj-miga .65s steps(4) forwards; }
.gj-pet.rayada .gj-spr { animation: gj-spr var(--dur) steps(var(--cols)) infinite, gj-brilla .12s steps(1) 6; }

/* ---- FRANKENMASCOTAS 🔩 (el rayo le cayó en Halloween 2026: para siempre) ----
   El look vive acá y en lookFrank (public/granja.js). Dos tornillos de 5x5 que salen de los
   costados de la cabeza (--my: GRANJA_RAYO_CABEZA; --bl/--br: los bordes del dibujo en esa fila,
   bordesCabeza; el de la izquierda espejado) y una costura de 9x3 cruzada sobre el cuerpo. Quietos (nada de
   animación): adentro de .gj-flip, se dan vuelta con el dibujo. En la radiografía
   (.gj-placa-foto.frank) van los tornillos en negativo, sin costura. */
.gj-tornillo, .gj-costura { position: absolute; image-rendering: pixelated; pointer-events: none; z-index: 1; }
.gj-tornillo {
  width: calc(var(--u) * 5); height: calc(var(--u) * 5);
  bottom: calc(var(--u) * (var(--cell, 24) - var(--my, 6) - 8));
}
.gj-tornillo--izq { left: calc(var(--u) * (var(--bl, 5) - 3)); transform: scaleX(-1); }
.gj-tornillo--der { left: calc(var(--u) * (var(--br, 19) - 1)); }
.gj-costura {
  width: calc(var(--u) * 9); height: calc(var(--u) * 3);
  left: calc(var(--u) * (var(--mx, 12) - 4)); bottom: calc(var(--u) * 4);
  transform: rotate(-12deg);
}
.gj-pet.rx .gj-costura { opacity: 0; }
.gj-pet.rx .gj-tornillo { filter: invert(1) brightness(1.6); }
.gj-placa-foto.frank { --u: calc(var(--esc) * 1px); }
.gj-meta-frank { color: #3f7a2a; }

/* ---- DISFRACES 🎃 (Halloween 2026: regalados en el caldero de Abi, para siempre) ----
   El look vive acá y en lookDisfraz (public/granja.js). Cada capa es una celda de 40x46 de
   granja-disfraces.png (scripts/elenco/disfraces.py), ya ajustada a la especie y la etapa: --dzc la
   columna (el disfraz), --dzr la fila (especie x 3 + etapa), --dzx/--dzy dónde cae el dibujo en la
   celda. Pixel por pixel con el sprite (--u). La de atrás (la capa de vampiro) va antes del dibujo.
   Quietas: se mueven con el cuerpo (el bob, el salto) y se dan vuelta con .gj-flip. */
.gj-dz {
  position: absolute; pointer-events: none; image-rendering: pixelated;
  left: calc(var(--u) * var(--dzx) * -1); top: calc(var(--u) * var(--dzy) * -1);
  width: calc(var(--u) * 40); height: calc(var(--u) * 46);
  background: url(/sprites/granja-disfraces.png?v=1) no-repeat;
  background-size: calc(var(--u) * 280) calc(var(--u) * 2484);
  background-position: calc(var(--u) * var(--dzc) * -40) calc(var(--u) * var(--dzr) * -46);
}
.gj-pet.mal .gj-dz { filter: grayscale(.9) brightness(.92); }
.gj-pet.duerme .gj-dz { filter: brightness(.85); }
/* El BZZZT de la eléctrica (rayos X): se ve el esqueleto, la ropa no (como la costura de Frank). */
.gj-pet.rx .gj-dz { opacity: 0; }
/* Se lo pone: dos destellos de pasos en el disfraz (sin brillo suave). */
.gj-pet.dz-poof .gj-dz { animation: gj-brilla .15s steps(1) 4; }
/* El cartelito: abajo del nombre, en chiquito, quién se lo regaló. */
.gj-dz-de { display: inline-flex; align-items: center; gap: 1px; font-size: 7px; line-height: 1; color: #6b3fa8; }
/* Afuera de la granja (las visitas de La Ronda): el dibujo y sus capas en una cajita que se da vuelta. */
.gj-suelto-dz { position: relative; display: block; }
.gj-suelto-dz > .gj-spr { position: absolute; inset: 0; }
/* TUS MASCOTAS: cajitas del tamaño de la celda, apoyadas como el dibujo. */
.gj-mini-dz { position: absolute; left: 0; bottom: 0; width: calc(var(--cell) * var(--u)); height: calc(var(--cell) * var(--u)); pointer-events: none; }
/* La carta: el guardarropa. */
.gj-ropa { margin: 8px 0 2px; padding-top: 8px; border-top: 3px dashed var(--gj-tinta); }
.gj-ropa-t { font-size: 8px; line-height: 1; margin-bottom: 6px; }
.gj-ropa-puesto { font-size: 8px; line-height: 1.8; color: #6b3fa8; }
/* Un renglón por disfraz (el dibujo, qué es y de quién); con muchos (el tope es 30), dos y pico a
   la vista y el resto con scroll adentro del guardarropa, no de la carta. */
.gj-ropa-grilla { display: grid; grid-template-columns: 1fr; gap: 6px; max-height: 150px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 4px 0; }
.granja-capa .gj-ropa-op {
  position: relative; display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 2px 10px 2px 4px; min-width: 0; text-align: left;
  background: #f4f1f7; border: 2px solid var(--gj-tinta); box-shadow: 2px 2px 0 var(--gj-tinta);
  font-family: var(--gj-f); color: var(--gj-tinta); cursor: pointer;
}
.granja-capa .gj-ropa-op:hover:not(:disabled) { background: #fff; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--gj-tinta); }
.granja-capa .gj-ropa-op:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--gj-tinta); }
.granja-capa .gj-ropa-op:focus-visible { outline: 3px dashed var(--gj-rojo); outline-offset: 2px; }
.granja-capa .gj-ropa-op:disabled { cursor: default; opacity: .6; }
.granja-capa .gj-ropa-op.puesto { background: #c3a6f5; cursor: default; opacity: 1; }
/* El puesto no reacciona al mouse: sigue violeta y quieto (el hover lo volvía blanco y confundía). */
.granja-capa .gj-ropa-op.puesto:hover:not(:disabled), .granja-capa .gj-ropa-op.puesto:active:not(:disabled) { background: #c3a6f5; transform: none; box-shadow: 2px 2px 0 var(--gj-tinta); }
.gj-ropa-fig { flex: none; position: relative; display: block; width: calc(var(--cell) * var(--u)); height: calc(var(--cell) * var(--u)); margin-top: calc(var(--u) * 3); margin-bottom: calc(var(--u) * -2); transform: scaleX(var(--f, 1)); }
.gj-ropa-fig > .gj-spr { animation: none; }
.gj-ropa-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gj-ropa-que { font-size: 8px; line-height: 1.3; }
.gj-ropa-de { font-size: 8px; line-height: 1.3; color: #6b3fa8; overflow-wrap: anywhere; }
.granja-capa .gj-ropa-op.puesto .gj-ropa-de { color: var(--gj-tinta); }
.gj-ropa-sello { margin-left: auto; flex: none; font-size: 7px; line-height: 1; padding: 3px 4px 2px; background: var(--gj-tinta); color: #fff; }
.granja-capa .gj-ropa-sacar { margin-top: 8px; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .gj-hebilla, .gj-pet.electrica-noche .gj-hebilla { animation: none; }
  .gj-pet.rx .gj-spr { background-image: var(--sheet); }
  .gj-chispas { display: none; }
  .gj-rayo { animation: gj-rayo-quieto .7s steps(1) forwards; }
  .gj-pet.rayada .gj-spr { animation: none; }
}
@keyframes gj-rayo-quieto { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }

/* Con la granja abierta (z-index 14000), los avisos personales y del momento van ARRIBA: el
   festejo de un logro (ej. Pararrayos), el zumbido, el confeti/lluvia de monedas y los toasts.
   Las cosas de la ofi (check-in, noticias, modales) siguen abajo a propósito. Seba, 2026-10-07. */
html.granja-abierta :is(.logro-pum, #zumbido-overlay, .confeti-piece, #toast-layer) { z-index: 15000; }
/* mientras dura la cinemática, la repisa de abajo se apaga (no se puede usar: un click la saltea) */
.granja-capa:has(.gj-stage.en-cine) .gj-barra { filter: brightness(.45) saturate(.6); }