/* NUEVA SEASON: PRIMERA CAMADA (public/season.js). El lanzamiento de la Caja del OVNI + la Granja.
   Tres piezas:
   - .season-cartel: el cartel de la cuenta regresiva (los últimos 7 días), colgado del header, con
     el OVNI dando vueltas en su ventanita de cielo. Se toca y muestra el adelanto (sin spoilers).
   - .season-capa: la capa a pantalla completa. data-fase = cuenta (10… 1) → aterriza (el OVNI baja,
     el rayo, el flash) → titulo (NUEVA SEASON letra por letra, la caja en el rayo, los huevos) →
     modal (la tarjeta de tres pasos). Quien llega tarde entra directo a 'modal'.
   - html.season-cerrada: antes del lanzamiento la caja y la granja no existen en la interfaz.
   z-index 20000 como el finale de la primavera (por encima de todo, debajo del .app-loader).
   Todo con steps(): se mueve como un arcade, nunca suave. */

/* ---- Antes del lanzamiento: la caja y la granja no se ven (el server igual las rechaza) ---- */
html.season-cerrada :is(#mndt-tab-caja, #mndt-panel-caja, #granja-chip, #granja-tranquera, .pcard-granja) { display: none !important; }

.season-cartel, .season-capa, .season-adelanto, .evento-season {
  --sn-tinta: #000;
  --sn-noche: #1c1f47;
  --sn-noche2: #2c2f63;
  --sn-amarillo: #ffe119;
  --sn-rojo: #e6194b;
  --sn-verde: #8be04e;
  --sn-crema: #fff8e8;
  --sn-pasto: #3cb44b;
  font-family: 'Press Start 2P', monospace;
  line-height: 1.8;
}

/* ============================================================
   EL CARTEL DE LA CUENTA REGRESIVA
   ============================================================ */
.season-cartel {
  position: fixed; left: 50%; top: 84px; z-index: 9994; /* debajo del header sticky (9995) */
  transform: translateX(-50%);
  display: flex; align-items: stretch;
  padding: 0; margin: 0;
  background: var(--sn-noche); color: #fff;
  border: 3px solid var(--sn-tinta);
  box-shadow: 4px 4px 0 var(--sn-tinta);
  cursor: pointer; text-align: left;
  font-size: 8px;
}
.season-cartel[hidden] { display: none; }
.season-cartel:hover { transform: translate(calc(-50% - 1px), -1px); box-shadow: 5px 5px 0 var(--sn-tinta); }
.season-cartel:active { transform: translate(calc(-50% + 2px), 2px); box-shadow: 2px 2px 0 var(--sn-tinta); }
.season-cartel:focus-visible { outline: 3px solid var(--sn-amarillo); outline-offset: 3px; }

/* La ventanita de cielo con el OVNI dando vueltas (una órbita de 8 puntos, a saltos). */
.sc-cielo {
  position: relative; flex: 0 0 64px; height: 44px;
  overflow: hidden;
  border-right: 3px solid var(--sn-tinta);
  background:
    radial-gradient(#fff 1px, transparent 1.5px) 3px 5px / 17px 13px,
    radial-gradient(var(--sn-amarillo) 1px, transparent 1.5px) 11px 9px / 23px 19px,
    linear-gradient(to top, var(--sn-pasto) 0 5px, var(--sn-noche2) 5px);
}
.sc-ovni {
  position: absolute; left: 20px; top: 12px;
  width: 24px; height: 15px;
  background: url('/sprites/ufo-alien.png') center / contain no-repeat;
  image-rendering: pixelated;
  animation: sn-orbita-chica 2.4s steps(1) infinite;
}
@keyframes sn-orbita-chica {
  0%     { transform: translate(0, -8px) scale(.75); }
  12.5%  { transform: translate(13px, -6px) scale(.85); }
  25%    { transform: translate(18px, 0) scale(1); }
  37.5%  { transform: translate(13px, 6px) scale(1.12); }
  50%    { transform: translate(0, 8px) scale(1.2); }
  62.5%  { transform: translate(-13px, 6px) scale(1.12); }
  75%    { transform: translate(-18px, 0) scale(1); }
  87.5%  { transform: translate(-13px, -6px) scale(.85); }
}
.sc-texto { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 12px 4px 10px; }
.sc-leyenda { color: var(--sn-amarillo); letter-spacing: 1px; }
.sc-reloj { font-size: 10px; color: #fff; font-variant-numeric: tabular-nums; }
.sc-reloj b { font-weight: normal; color: var(--sn-verde); }
/* El último minuto: late (a saltos) y el reloj se pone rojo. */
.season-cartel.sc--ultimo { animation: sn-late .5s steps(2) infinite; }
.season-cartel.sc--ultimo .sc-reloj { color: var(--sn-amarillo); }
@keyframes sn-late { 50% { box-shadow: 4px 4px 0 var(--sn-rojo); } }

/* El adelanto: una fichita debajo del cartel. */
.season-adelanto {
  position: fixed; left: 50%; z-index: 9994;
  transform: translateX(-50%);
  width: min(300px, calc(100vw - 32px));
  padding: 12px 14px 14px;
  background: var(--sn-crema); color: var(--sn-tinta);
  border: 3px solid var(--sn-tinta); box-shadow: 4px 4px 0 var(--sn-tinta);
  font-family: 'Press Start 2P', monospace; font-size: 8px; line-height: 1.8; text-align: center;
  animation: sn-cae .3s steps(3) both;
}
.season-adelanto[hidden] { display: none; }
.season-adelanto .sa-tag {
  display: inline-block; margin: 0 0 8px; padding: 2px 6px;
  background: var(--sn-tinta); color: var(--sn-amarillo); font-size: 8px;
}
.season-adelanto .sa-titulo { margin: 0 0 8px; font-size: 10px; color: var(--sn-rojo); }
.season-adelanto p { margin: 0; }
.season-adelanto .sa-caja { display: block; width: 56px; height: 49px; margin: 0 auto 8px; filter: brightness(0) drop-shadow(3px 3px 0 var(--sn-amarillo)); animation: sn-tiembla 1.6s steps(1) infinite; }
.season-adelanto .sa-caja svg { display: block; width: 100%; height: 100%; }
@keyframes sn-tiembla { 0%, 70% { transform: none; } 75% { transform: translateX(-2px) rotate(-4deg); } 80% { transform: translateX(2px) rotate(4deg); } 85% { transform: translateX(-1px); } 90% { transform: none; } }
@keyframes sn-cae { 0% { transform: translate(-50%, -10px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }

/* ============================================================
   LA CAPA: CUENTA, ATERRIZAJE, TITULO Y MODAL
   ============================================================ */
.season-capa {
  position: fixed; inset: 0; z-index: 20000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden auto;
  color: #fff; text-align: center;
  outline: none;
}
.season-capa[hidden] { display: none; }
/* El cielo: se oscurece a saltos al arrancar la cuenta. */
.sn-cielo {
  position: fixed; inset: 0;
  background:
    radial-gradient(#fff 1.5px, transparent 2px) 7px 11px / 61px 53px,
    radial-gradient(var(--sn-amarillo) 1.5px, transparent 2px) 29px 37px / 89px 71px,
    radial-gradient(#fff 1px, transparent 1.5px) 43px 5px / 37px 41px,
    linear-gradient(to bottom, #0f1130, var(--sn-noche) 55%, var(--sn-noche2));
  animation: sn-entra .6s steps(4) both;
}
.sn-cielo::after { /* las estrellas titilan */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(#fff 1.5px, transparent 2px) 19px 23px / 73px 59px;
  animation: sn-titila 1.2s steps(2) infinite;
}
@keyframes sn-titila { 50% { opacity: 0; } }
@keyframes sn-entra { 0% { opacity: 0; } 100% { opacity: 1; } }
/* El pasto del horizonte (como la escena de la caja). */
.sn-piso {
  position: fixed; left: 0; right: 0; bottom: 0; height: 64px;
  background:
    repeating-linear-gradient(90deg, #3cb44b 0 12px, #2f9a3d 12px 24px) top / 100% 12px no-repeat,
    #7a5230;
  border-top: 4px solid var(--sn-tinta);
}

/* El OVNI grande (el mismo sprite de 16x10, a x10). */
.sn-ovni-pivote { position: fixed; left: 50%; top: 14vh; width: 0; height: 0; z-index: 2; }
.sn-ovni {
  position: absolute; left: -96px; top: -60px;
  width: 192px; height: 120px;
  background: url('/sprites/ufo-alien.png') center / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(6px 6px 0 rgba(0,0,0,.45));
}
.season-capa[data-fase='cuenta'] .sn-ovni { animation: sn-orbita 3.2s steps(1) infinite; }
@keyframes sn-orbita {
  0%     { transform: translate(0, -18px) scale(.6); }
  12.5%  { transform: translate(24vw, -12px) scale(.72); }
  25%    { transform: translate(34vw, 0) scale(.86); }
  37.5%  { transform: translate(24vw, 14px) scale(1); }
  50%    { transform: translate(0, 20px) scale(1.08); }
  62.5%  { transform: translate(-24vw, 14px) scale(1); }
  75%    { transform: translate(-34vw, 0) scale(.86); }
  87.5%  { transform: translate(-24vw, -12px) scale(.72); }
}
/* Aterriza: baja al medio en 8 saltos y ahí flota. */
.season-capa:is([data-fase='aterriza'], [data-fase='titulo'], [data-fase='modal']) .sn-ovni-pivote {
  animation: sn-baja 1.2s steps(8) both;
}
.season-capa:is([data-fase='titulo'], [data-fase='modal']) .sn-ovni { animation: sn-flota 1s steps(2) infinite; }
/* Con la tarjeta, el OVNI sube un poco para no quedar asomado detrás. */
.season-capa[data-fase='modal'] .sn-ovni-pivote { animation: none; transform: translateY(0); }
/* La tarjeta arranca debajo del OVNI (nunca se le asoma una tajada por el borde de arriba); si la
   pantalla es baja, la capa scrollea. */
.season-capa[data-fase='modal'] { align-items: flex-start; }
.season-capa[data-fase='modal'] .sn-tarjeta { margin-top: calc(14vh + 78px); }
.season-capa[data-fase='modal'] .sn-rayo { top: calc(14vh + 44px); }
@keyframes sn-baja { 0% { transform: translateY(-34vh); } 100% { transform: translateY(16vh); } }
@keyframes sn-flota { 50% { transform: translateY(-6px); } }

/* El rayo: nace de la panza del OVNI hasta el pasto. */
.sn-rayo {
  position: fixed; left: 50%; top: calc(30vh + 44px); bottom: 64px;
  width: min(420px, 70vw); transform: translateX(-50%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(to bottom, rgba(255,225,25,.42) 0 10px, rgba(139,224,78,.28) 10px 20px);
  opacity: 0; z-index: 1;
}
.season-capa:is([data-fase='aterriza'], [data-fase='titulo'], [data-fase='modal']) .sn-rayo {
  animation: sn-rayo-prende .5s steps(4) 1.2s both, sn-rayo-late .8s steps(2) 1.7s infinite;
}
@keyframes sn-rayo-prende { 0% { opacity: 0; transform: translateX(-50%) scaleY(0); transform-origin: 50% 0; } 100% { opacity: 1; transform: translateX(-50%) scaleY(1); transform-origin: 50% 0; } }
@keyframes sn-rayo-late { 50% { background-position: 0 10px; } }

/* El flash: un "círculo" pixel (octógono escalonado) blanco que crece desde el OVNI. */
.sn-flash {
  position: fixed; left: 50%; top: 30vh;
  width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax;
  background: #fff;
  clip-path: polygon(35% 0, 65% 0, 65% 5%, 80% 5%, 80% 10%, 90% 10%, 90% 20%, 95% 20%, 95% 35%, 100% 35%, 100% 65%, 95% 65%, 95% 80%, 90% 80%, 90% 90%, 80% 90%, 80% 95%, 65% 95%, 65% 100%, 35% 100%, 35% 95%, 20% 95%, 20% 90%, 10% 90%, 10% 80%, 5% 80%, 5% 65%, 0 65%, 0 35%, 5% 35%, 5% 20%, 10% 20%, 10% 10%, 20% 10%, 20% 5%, 35% 5%);
  transform: scale(0); z-index: 5; pointer-events: none;
}
.sn-flash--verde { background: var(--sn-verde); }
.season-capa[data-fase='aterriza'] .sn-flash { animation: sn-flash 1s steps(6) 1.5s both; }
.season-capa[data-fase='aterriza'] .sn-flash--verde { animation-delay: 1.38s; }
@keyframes sn-flash {
  0% { transform: scale(0); opacity: 1; }
  50% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* ---- La cuenta (10… 1) ---- */
.sn-cuenta-caja { position: relative; z-index: 3; display: none; margin-top: 18vh; }
.season-capa[data-fase='cuenta'] .sn-cuenta-caja { display: block; }
.sn-leyenda { margin: 0 0 18px; font-size: 10px; color: var(--sn-amarillo); letter-spacing: 1px; }
.sn-numero {
  font-size: clamp(96px, 24vw, 200px); line-height: 1;
  color: #fff;
  text-shadow: .05em .05em 0 var(--sn-verde), .1em .1em 0 var(--sn-tinta);
  animation: sn-pop .42s steps(4) both;
}
@keyframes sn-pop {
  0% { transform: scale(1.8); opacity: 0; }
  50% { transform: scale(.88); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* ---- El título + la caja + los huevos ---- */
.sn-escena { position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; }
.season-capa:is([data-fase='titulo'], [data-fase='modal']) .sn-escena { display: block; }
.season-capa[data-fase='modal'] :is(.sn-titulo, .sn-sub, .sn-globo) { display: none; } /* queda el decorado (caja, huevos), sin texto detrás de la tarjeta */
.sn-titulo {
  position: fixed; left: 0; right: 0; top: 6vh;
  margin: 0; font-weight: normal;
  font-size: clamp(26px, 6vw, 64px); line-height: 1.3;
  color: var(--sn-amarillo);
  text-shadow: .06em .06em 0 var(--sn-rojo), .12em .12em 0 var(--sn-tinta);
}
.sn-tarde {
  position: fixed; left: 50%; top: 2vh; transform: translateX(-50%) rotate(-2deg);
  margin: 0; padding: 6px 10px; font-size: clamp(9px, 1.2vw, 12px); white-space: nowrap;
  color: var(--sn-tinta); background: var(--sn-amarillo); border: 3px solid var(--sn-tinta);
  box-shadow: 3px 3px 0 var(--sn-tinta);
}
.sn-tarde[hidden], .season-capa[data-fase='modal'] .sn-tarde { display: none; }
.sn-sub {
  position: fixed; left: 0; right: 0; top: calc(6vh + clamp(40px, 8vw, 90px));
  margin: 0; font-size: clamp(12px, 2.2vw, 20px); color: #fff;
  text-shadow: 3px 3px 0 var(--sn-tinta);
  animation: sn-entra .4s steps(4) 1.4s both;
}
.sn-palabra { display: inline-block; white-space: nowrap; }
.sn-letra { display: inline-block; }
.season-capa[data-fase='titulo'] .sn-letra {
  animation:
    sn-letra .5s steps(5) calc(150ms + var(--i) * 55ms) both,
    sn-ola 1.1s steps(2) calc(1.4s + var(--i) * 70ms) infinite;
}
@keyframes sn-letra {
  0% { transform: translateY(-1em) scale(2); opacity: 0; }
  60% { transform: translateY(.12em) scale(.9); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes sn-ola { 50% { transform: translateY(-.1em); } }

/* El alien saluda (un globito de historieta al lado del OVNI). */
.sn-globo {
  position: fixed; left: calc(50% + 112px); top: calc(30vh - 58px); z-index: 4;
  padding: 8px 10px;
  background: #fff; color: var(--sn-tinta);
  border: 3px solid var(--sn-tinta); box-shadow: 3px 3px 0 var(--sn-tinta);
  font-size: 10px; line-height: 1.6; white-space: nowrap;
  animation: sn-globo .4s steps(4) 2.6s both;
}
.sn-globo::after { /* la colita del globo, en escalones */
  content: ''; position: absolute; left: 6px; bottom: -12px; width: 12px; height: 9px;
  background: var(--sn-tinta);
  clip-path: polygon(0 0, 100% 0, 66% 33%, 33% 33%, 33% 66%, 0 100%);
}
@keyframes sn-globo { 0% { transform: scale(0); transform-origin: 0 100%; } 60% { transform: scale(1.15); transform-origin: 0 100%; } 100% { transform: none; } }

/* La caja baja por el rayo y se posa en el pasto; los huevos saltan de a uno. */
.sn-caja {
  position: fixed; left: 50%; bottom: 58px; width: 150px; margin-left: -75px; z-index: 3;
  animation: sn-caja-baja 1.2s steps(6) .2s both;
}
.sn-caja svg { display: block; width: 150px; height: 131px; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.45)); }
@keyframes sn-caja-baja { 0% { transform: translateY(-40vh); opacity: 0; } 20% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.sn-huevos { position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%); display: flex; gap: min(170px, 22vw); z-index: 3; }
.sn-huevos .sn-huevo:nth-child(2) { margin-right: 170px; }
.sn-huevo {
  --s: 4;
  width: calc(24px * var(--s)); height: calc(24px * var(--s));
  background: url('/sprites/huevos.png') 0 calc(var(--fila) * -24px * var(--s)) / calc(192px * var(--s)) calc(192px * var(--s)) no-repeat;
  image-rendering: pixelated;
  animation: sn-huevo-salta .5s steps(4) calc(1.4s + var(--i) * 180ms) both, sn-huevo-mece 2s steps(8) calc(1.9s + var(--i) * 180ms) infinite;
}
@keyframes sn-huevo-salta { 0% { transform: translateY(40px) scale(0); } 60% { transform: translateY(-28px) scale(1.1); } 100% { transform: none; } }
@keyframes sn-huevo-mece { to { background-position-x: calc(-192px * var(--s)); } }

/* ---- La tarjeta de la temporada (tres pasos) ---- */
.sn-tarjeta {
  position: relative; z-index: 6; display: none;
  width: min(460px, calc(100vw - 32px));
  margin: 16px;
  background: var(--sn-crema); color: var(--sn-tinta);
  border: 4px solid var(--sn-tinta); box-shadow: 8px 8px 0 var(--sn-tinta);
  text-align: center;
}
.season-capa[data-fase='modal'] .sn-tarjeta { display: block; animation: sn-tarjeta .45s steps(5) both; }
.season-capa[data-fase='modal'] .sn-cielo { filter: brightness(.7); }
@keyframes sn-tarjeta { 0% { transform: translateY(40px) scale(.6); opacity: 0; } 60% { transform: translateY(-6px) scale(1.04); opacity: 1; } 100% { transform: none; opacity: 1; } }
.snt-cabeza {
  padding: 12px 44px 10px;
  background: var(--sn-noche); color: #fff;
  border-bottom: 4px solid var(--sn-tinta);
}
.snt-tag { display: inline-block; padding: 2px 6px; background: var(--sn-rojo); color: #fff; font-size: 8px; }
.snt-titulo { margin: 8px 0 0; font-weight: normal; font-size: 14px; line-height: 1.6; color: var(--sn-amarillo); text-shadow: 2px 2px 0 var(--sn-tinta); }
.snt-cerrar {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; padding: 0;
  font-family: inherit; font-size: 10px; line-height: 1;
  background: var(--sn-crema); color: var(--sn-tinta);
  border: 3px solid var(--sn-tinta); box-shadow: 2px 2px 0 var(--sn-tinta);
  cursor: pointer;
}
.snt-cerrar:hover { background: var(--sn-amarillo); }
.snt-cerrar:focus-visible, .snt-btn:focus-visible { outline: 3px solid var(--sn-rojo); outline-offset: 2px; }

.snt-pasos { position: relative; min-height: 210px; }
.snt-paso { display: none; padding: 18px 22px 8px; }
.snt-paso.activo { display: block; animation: sn-paso .3s steps(3) both; }
@keyframes sn-paso { 0% { transform: translateX(24px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.snt-num {
  display: inline-block; width: 26px; height: 26px; line-height: 22px;
  border: 3px solid var(--sn-tinta); background: var(--sn-amarillo); font-size: 10px;
}
.snt-dibujo { display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 92px; margin: 10px 0 6px; }
.snt-dibujo svg { width: 84px; height: 74px; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.3)); }
.snt-dibujo .sn-huevo { --s: 2.5; animation: sn-huevo-mece 2s steps(8) infinite; }
.snt-bicho {
  --s: 3;
  width: calc(24px * var(--s)); height: calc(24px * var(--s));
  background: url('/sprites/granja.png') 0 calc(var(--fila) * -24px * var(--s)) / calc(192px * var(--s)) calc(1152px * var(--s)) no-repeat;
  image-rendering: pixelated;
  animation: sn-bicho 2s steps(8) infinite;
}
@keyframes sn-bicho { to { background-position-x: calc(-192px * var(--s)); } }
.snt-paso h3 { margin: 4px 0 6px; font-weight: normal; font-size: 10px; color: var(--sn-rojo); }
.snt-paso p { margin: 0 auto; max-width: 34ch; font-size: 9px; line-height: 1.9; }

.snt-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px 14px;
}
.snt-puntos { display: flex; gap: 6px; }
.snt-puntos i { width: 10px; height: 10px; border: 2px solid var(--sn-tinta); background: transparent; }
.snt-puntos i.on { background: var(--sn-tinta); }
.snt-botones { display: flex; gap: 8px; }
.snt-btn {
  font-family: inherit; font-size: 9px; line-height: 1.6;
  padding: 8px 12px;
  background: var(--sn-amarillo); color: var(--sn-tinta);
  border: 3px solid var(--sn-tinta); box-shadow: 3px 3px 0 var(--sn-tinta);
  cursor: pointer;
}
.snt-btn--sec { background: #fff; }
.snt-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--sn-tinta); }
.snt-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sn-tinta); }
.snt-btn[hidden] { display: none; }

@media (max-width: 600px) {
  .season-cartel { top: 120px; }
  .sn-huevos { gap: 10vw; }
  .sn-huevos .sn-huevo:nth-child(2) { margin-right: 150px; }
  .sn-huevo { --s: 2.5; }
}

/* ============================================================
   LA CARTELERA 📅: el evento grande fijado arriba hasta la hora (renderEventos en app.js)
   Una entrada de noche: la ventanita de cielo con el OVNI tirando el rayo a la izquierda, el
   nombre a la derecha y, abajo, el talón amarillo separado por un troquel con la cuenta en días.
   El día del lanzamiento el talón se pone verde y late. Sin spoilers: no dice qué trae.
   ============================================================ */
.evento-season {
  position: sticky; top: 0; z-index: 2; flex-shrink: 0; /* fijada arriba aunque la lista scrollee */
  display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto;
  background: var(--sn-noche); color: #fff;
  border: 3px solid var(--sn-tinta);
  box-shadow: 3px 3px 0 var(--sn-rojo);
  margin: 0 3px 4px 0;
}
.es-cielo {
  position: relative; overflow: hidden; height: 62px;
  border-right: 3px solid var(--sn-tinta);
  background:
    radial-gradient(#fff 1px, transparent 1.5px) 2px 4px / 15px 12px,
    radial-gradient(var(--sn-amarillo) 1px, transparent 1.5px) 9px 8px / 21px 17px,
    linear-gradient(to top, var(--sn-pasto) 0 6px, var(--sn-noche2) 6px);
}
.es-ovni {
  position: absolute; left: 14px; top: 6px; z-index: 1;
  width: 30px; height: 19px;
  background: url('/sprites/ufo-alien.png') center / contain no-repeat;
  image-rendering: pixelated;
  animation: es-flota 1.6s steps(1) infinite;
}
/* El rayo: un trapecio verde que baja hasta el pasto y parpadea (nunca suave). */
.es-rayo {
  position: absolute; left: 17px; top: 22px; bottom: 6px; width: 24px;
  background: repeating-linear-gradient(to bottom, rgba(139, 224, 78, .55) 0 3px, rgba(139, 224, 78, .25) 3px 6px);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  animation: es-rayo 1.6s steps(1) infinite;
}
@keyframes es-flota { 50% { transform: translateY(2px); } }
@keyframes es-rayo { 0%, 100% { opacity: 1; } 25% { opacity: .55; } 50% { opacity: .85; } 75% { opacity: .4; } }
.es-info { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 6px 8px; min-width: 0; }
.es-titulo { font-size: 9px; line-height: 1.2; color: var(--sn-amarillo); text-shadow: 2px 2px 0 var(--sn-tinta); letter-spacing: .5px; }
.es-sub { font-size: 7px; line-height: 1.2; color: #fff; }
.es-cuando { font-size: 6px; line-height: 1.2; color: var(--sn-verde); }
/* El talón: separado por un troquel punteado, la cuenta grande en negro sobre amarillo. */
.es-cuenta {
  grid-column: 1 / -1;
  display: block; padding: 6px 8px 5px;
  background: var(--sn-amarillo); color: var(--sn-tinta);
  border-top: 3px dashed var(--sn-tinta);
  font-size: 9px; line-height: 1.2; text-align: center; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.evento-season--hoy .es-cuenta { background: var(--sn-verde); animation: es-late 1s steps(2) infinite; }
@keyframes es-late { 50% { background: var(--sn-amarillo); } }

/* El "!" del chip 📅 mientras la season no aterrizó: el chip se enciende con el cielo de noche. */
.eventos-chip.eventos-chip--season { background: var(--sn-noche, #1c1f47); }
.eventos-chip.eventos-chip--season .eventos-count { color: #ffe119; }
.eventos-badge { background: #8be04e; color: #000; animation: chip-pop .15s steps(3) both, es-badge 1.2s steps(2) .2s infinite; }
@keyframes es-badge { 50% { background: #ffe119; } }

@media (prefers-reduced-motion: reduce) {
  .es-ovni, .es-rayo, .evento-season--hoy .es-cuenta, .eventos-badge { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-ovni, .season-cartel.sc--ultimo, .sn-cielo::after, .sn-ovni, .sn-rayo, .sn-letra, .sn-huevo, .snt-bicho, .snt-dibujo .sn-huevo { animation: none !important; }
  .season-capa:is([data-fase='aterriza'], [data-fase='titulo'], [data-fase='modal']) .sn-ovni-pivote { animation: none; transform: translateY(12vh); }
  .season-capa:is([data-fase='aterriza'], [data-fase='titulo'], [data-fase='modal']) .sn-rayo { opacity: 1; }
  .sn-flash { display: none; }
}