/* ===========================================================================
   cuenta.css — Continuidad Muse Elf en /cuenta.
   La landing congela el clip de la emboscada en su último fotograma y pone la
   tarjeta de login ENCIMA. Al enviar el formulario el navegador navega a
   /cuenta, y hasta ahora eso cortaba a un fondo negro: se rompía la ilusión de
   que estabas en el mismo lugar. Acá se reconstruye ese fotograma como imagen
   fija (`media/elf_frame.webp`, extraída del mismo mp4) con el mismo ambiente
   cálido, así lo único que el jugador ve cambiar son los menús.
   =========================================================================== */

/* z-index NEGATIVO a propósito: cabecera() ya abrió <main>, así que esta capa
   nace dentro del flujo del contenido. Con z-index:0 quedaría en la capa de
   posicionados, o sea PISANDO el texto (que es contenido de bloque, se pinta
   antes). Con -1 se pinta bajo el contenido y sobre el fondo del documento, y
   no hace falta convertir <main> en contexto de apilamiento. */
.tdp-elf-fondo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: url('/media/elf_frame.webp') center 22% / cover no-repeat;
}
/* Velo: sin esto el texto compite con el bosque. Más denso hacia abajo, que es
   donde vive el contenido largo del panel. */
.tdp-elf-fondo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,11,17,.58) 0%, rgba(8,11,17,.80) 42%, rgba(8,11,17,.95) 100%);
}
/* En el panel ya logueado hay tablas y párrafos largos: el bosque pasa a ser
   una insinuación, no un cuadro. */
.tdp-elf-fondo.tenue { background-position: center 14%; }
.tdp-elf-fondo.tenue::before {
  background: linear-gradient(180deg, rgba(8,11,17,.80) 0%, rgba(8,11,17,.92) 38%, rgba(8,11,17,.985) 100%);
}

/* ---------- ambiente (mismo lenguaje que el overlay de la landing) ---------- */
.tdp-elf-fondo .aura {
  position: absolute; left: 50%; top: 34%; width: 70vw; height: 70vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,176,74,.20), rgba(255,176,74,0) 66%);
  animation: tdp-fx-breath 7s ease-in-out infinite;
}
.tdp-elf-fondo .rayo {
  position: absolute; inset: -20% -40%;
  background: linear-gradient(100deg, transparent 42%, rgba(255,198,120,.10) 50%, transparent 58%);
  animation: tdp-fx-sweep 11s ease-in-out infinite;
}
.tdp-elf-fondo i {
  position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,200,119,.85), rgba(240,200,119,0) 70%);
  filter: blur(.5px); opacity: 0; animation: tdp-fx-rise linear infinite;
}
.tdp-elf-fondo i:nth-child(3n) { background: radial-gradient(circle, rgba(255,138,42,.8), rgba(255,138,42,0) 70%); }
.tdp-elf-fondo i:nth-child(4n) { background: radial-gradient(circle, rgba(224,92,42,.7), rgba(224,92,42,0) 70%); }
.tdp-elf-fondo i:nth-child(3)  { left: 10%; animation-duration: 8.5s;  animation-delay: 0s; }
.tdp-elf-fondo i:nth-child(4)  { left: 22%; animation-duration: 10.2s; animation-delay: 1.4s; width: 3px; height: 3px; }
.tdp-elf-fondo i:nth-child(5)  { left: 35%; animation-duration: 9.1s;  animation-delay: 3.2s; }
.tdp-elf-fondo i:nth-child(6)  { left: 44%; animation-duration: 11s;   animation-delay: .8s;  width: 5px; height: 5px; }
.tdp-elf-fondo i:nth-child(7)  { left: 56%; animation-duration: 8.8s;  animation-delay: 4.6s; width: 3px; height: 3px; }
.tdp-elf-fondo i:nth-child(8)  { left: 68%; animation-duration: 10.5s; animation-delay: 2.1s; }
.tdp-elf-fondo i:nth-child(9)  { left: 79%; animation-duration: 9.4s;  animation-delay: 5.9s; }
.tdp-elf-fondo i:nth-child(10) { left: 88%; animation-duration: 11.4s; animation-delay: 3.7s; width: 3px; height: 3px; }
.tdp-elf-fondo i:nth-child(11) { left: 30%; animation-duration: 10.8s; animation-delay: 6.8s; }
.tdp-elf-fondo i:nth-child(12) { left: 63%; animation-duration: 9.7s;  animation-delay: 2.6s; width: 5px; height: 5px; }

/* Los @keyframes viven en css/fx.css (módulo de ambiente compartido). Los
   valores propios de esta pantalla (piso .55, pico 1.07, brasa -95vh/18px) los
   declara fx.css para .tdp-elf-fondo. */

/* ---------- destello al validar el login ---------- */
/* Se pinta una sola vez, cuando /cuenta se carga con ?bienvenida=1 (el redirect
   que hace el login exitoso). Es el acuse de recibo: la puerta se abrió. */
.tdp-elf-destello {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 40%, rgba(255,214,140,.85), rgba(255,176,74,.35) 45%, rgba(255,176,74,0) 72%);
  opacity: 0; animation: tdp-fx-destello 1100ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .tdp-elf-fondo .aura, .tdp-elf-fondo .rayo, .tdp-elf-fondo i { animation: none; }
  .tdp-elf-destello { display: none; }
}
/* En móvil la imagen es peso puro detrás de un velo casi opaco: no se baja. */
@media (max-width: 700px) { .tdp-elf-fondo { display: none; } }

/* El campamento (/cuenta logueado): reusa .tdp-elf-fondo con la imagen del
   campamento. El still tiene figuras a la mitad-derecha, así que el velo va un
   punto más denso que el bosque tenue para que la columna del panel lea AA. */
.tdp-elf-fondo.tdp-campamento { background: #080b11; }
.tdp-elf-fondo.tdp-campamento video { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.tdp-elf-fondo.tdp-campamento::before {
  background: linear-gradient(180deg, rgba(8,11,17,.66) 0%, rgba(8,11,17,.90) 40%, rgba(8,11,17,.985) 100%);
}

/* Tarjeta "Votando por el server" en /cuenta: reusa .tarjetas article; solo
   necesita que el boton se separe del texto y ocupe el ancho de la tarjeta.
   El acento borgona la distingue de las otras tres (que son informativas) sin
   inventar color: --oro ya vive en la paleta. */
.tdp-cta-votar { border-color: var(--oro); }
.tdp-cta-votar .boton { display: block; margin-top: 14px; text-align: center; }