/* ============================================================================
   PixelClub — El Archivo de un creador
   ============================================================================
   La pantalla más densa de la web: 224 títulos, 52 citas y un pie de método,
   repartidos en una tier list de tres bloques y cinco bandas. Todo el trabajo
   de esta hoja va a que eso se pueda leer.

   Tres decisiones que explican casi todo lo de abajo:

   · **El color fuerte lo lleva la banda, no la ficha.** Colorear además el
     título, el borde y el fondo de cada una de las 224 fichas convertiría la
     pantalla en un semáforo y el color dejaría de significar nada. El de la
     banda llega por `--t` desde el JavaScript y el de la nota por `--c`, y los
     dos salen del mismo tramo del informe.
   · **La letra de la banda persigue al lector.** La banda A de juegos tiene 87
     títulos; con la etiqueta quieta arriba se pierde de vista en qué tramo se
     está. Por eso la columna de color va entera y su contenido es `sticky`.
   · **La cita tiene su propio sitio visual.** Es lo único de toda la web que
     son palabras textuales de una persona real, así que se separa del resto
     con su franja lateral y su cursiva. Que no se confunda nunca con algo que
     hayamos escrito nosotros.
   ========================================================================== */

.page-ranking { padding-bottom: var(--space-3xl); }

/* ── Cabecera ───────────────────────────────────────────────────────────── */

.rank-cab { text-align: center; margin: var(--space-lg) 0 var(--space-md); }

.rank-corchetes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

/* Los corchetes tipográficos. Son el patrón de la casa para un dato duro, y
   aquí hacen el trabajo más importante de la pantalla: dicen sobre cuánto
   material está hecho todo lo demás. Sin ellos, un ranking de 159 juegos es
   una opinión más. */
.rank-corchete {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--accent-games);
  border: 2px solid rgba(0, 245, 212, .35);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  background: rgba(0, 245, 212, .06);
  letter-spacing: .05em;
}

.rank-intro {
  max-width: 74ch;
  margin: 0 auto var(--space-lg);
  text-align: center;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ── La leyenda de las bandas ───────────────────────────────────────────────
   Las cinco letras con su color, antes de la primera banda. Es lo que hace que
   la tier list se entienda sin explicarla: cuando alguien llega a la franja
   dorada, ya sabe qué significa el dorado.
   ========================================================================== */

.rk-leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin: 0 auto var(--space-xl);
}

.rk-lg {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 5px 10px 5px 5px;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.rk-lg b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: var(--t);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  border-radius: var(--radius-sm);
  /* Mismo contorno que .rk-tletra y por el mismo motivo: blanco sobre el
     dorado de la S = 2.65:1; solo el halo completo lo hace legible. */
  text-shadow:
    -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000,
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.rk-lg-n { color: var(--text-primary); }
.rk-lg i { font-family: var(--font-pixel); font-size: var(--pixel-xs); font-style: normal; color: var(--text-muted); }

/* ── Encabezados de sección ─────────────────────────────────────────────── */

.rank-sec {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-2xl) 0 var(--space-xs);
  font-family: var(--font-pixel);
  font-size: var(--pixel-base);
  color: var(--accent-games);
  letter-spacing: .05em;
}

.rank-nota {
  margin: 0 0 var(--space-md);
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 78ch;
}

/* ============================================================================
   LA BARRA DE SALTOS — el índice pegajoso
   ============================================================================
   El Archivo de Rubius mide 24.000 píxeles: veinticinco pantallas de rueda.
   Sin un índice, ir de los juegos a las series es bajar a ciegas, y volver
   arriba a por el buscador es otro viaje igual de largo. Por eso la barra se
   queda pegada bajo la cabecera y se lleva el buscador con ella.

   Los saltos son BOTONES, no anclas: esta web enruta por el fragmento de la
   dirección y un `href="#rk-b-games"` se lo comería el router.
   ========================================================================== */

/* La altura de la barra, en un sitio solo. La usan dos reglas: el hueco que
   deja al saltar a un bloque y el `top` del `sticky` de la letra de cada
   banda. Si se toca aquí, las dos siguen cuadrando. */
:root { --rk-barra: 54px; }

.rk-barra {
  position: sticky;
  top: var(--navbar-height);
  z-index: 20;
  margin: 0 0 var(--space-lg);
  padding: var(--space-xs) 0;
  /* Opaco de verdad: por debajo pasan 224 portadas, y con transparencia la
     barra se vuelve ilegible en cuanto cruza una banda de color. */
  background: var(--bg-primary);
  border-bottom: 2px solid var(--border-color);
}

.rk-barra-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.rk-saltos { display: flex; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; margin: 0; padding: 0; }

.rk-salto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  letter-spacing: .04em;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.rk-salto:hover:not(:disabled) { color: #fff; border-color: var(--accent-games); }
.rk-salto:focus-visible { outline: 2px solid var(--accent-games); outline-offset: 2px; }

.rk-salto b {
  font-size: var(--pixel-xs);
  color: var(--text-muted);
  border-left: 1px solid var(--border-color);
  padding-left: 6px;
}

/* En cuál estás. El buscador puede dejar un bloque sin nada: entonces el botón
   se apaga en vez de desaparecer, porque quitar botones mientras escribes mueve
   los otros de sitio y acabas pulsando el que no era. */
.rk-salto-aqui { color: var(--accent-games); border-color: var(--accent-games); background: rgba(0, 245, 212, .08); }
.rk-salto-aqui b { color: var(--accent-games); }
.rk-salto:disabled { opacity: .38; cursor: default; }

.rk-barra .rank-buscador { margin: 0 0 0 auto; }

@media (max-width: 720px) {
  .rk-barra { top: calc(var(--navbar-height) - 2px); }
  .rk-barra-in { gap: var(--space-2xs); }
  .rk-salto { padding: 6px 8px; font-size: var(--pixel-xs); }
  .rk-salto span { display: none; }   /* con el icono y el número basta */
  .rk-salto b { border-left: none; padding-left: 0; }
  /* En un solo renglón: los tres saltos a la izquierda y el buscador ocupando
     lo que sobre. `min-width: 0` no es opcional — un `input` trae un ancho
     mínimo propio que, sin esto, empuja el buscador a una segunda línea y
     duplica la altura de la barra. */
  .rk-barra .rank-buscador { margin-left: 0; flex: 1; min-width: 0; }
  .rk-barra .rank-buscar { max-width: none; min-width: 0; padding: 7px var(--space-xs); }
  .rk-barra .rank-cuenta { display: none; }   /* el contador no cabe y ya lo dicen los saltos */
}

/* ============================================================================
   LA TIER LIST — tres bloques, cinco bandas cada uno
   ============================================================================
   Juegos, películas y series por separado, y dentro de cada uno las bandas
   S/A/B/C/D del informe. Antes esto era un podio de tres y un muro plano de
   221 fichas numeradas de #4 en adelante: para saber si algo le había gustado
   había que leer la nota ficha a ficha. Una tier list lo dice sin leer nada.

   Dos decisiones que explican casi todo lo de abajo:

   · **El color de la banda es el único color fuerte de la pantalla.** Dorado,
     verde, azul, naranja y rojo son los de una tier list de toda la vida y no
     los acentos de PixelClub a propósito: aquí el color no dice «esto es un
     juego», dice «esto le encantó», y tiene que significar lo mismo en los
     tres bloques.
   · **La letra persigue al lector.** La banda A de juegos tiene 87 títulos:
     quince filas en las que, con la etiqueta quieta arriba, se pierde de vista
     en qué tramo se está. Por eso la columna de color va entera pero su
     contenido es `sticky`.
   ========================================================================== */

/* El hueco que deja al saltar aquí desde la barra. Sin él, `scrollIntoView`
   pone el título justo debajo de la barra pegajosa y queda tapado por ella. */
.rk-bloque { margin-top: var(--space-2xl); scroll-margin-top: calc(var(--navbar-height) + var(--rk-barra) + 12px); }
.rk-bloque[hidden] { display: none; }

.rk-bloque-tit {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 3px solid var(--border-color);
  font-family: var(--font-pixel);
  font-size: var(--pixel-lg);
  letter-spacing: .04em;
  color: #fff;
}

.rk-bloque-games  .rk-bloque-tit { color: var(--accent-games);  border-bottom-color: rgba(0, 245, 212, .3); }
.rk-bloque-movies .rk-bloque-tit { color: var(--accent-movies); border-bottom-color: rgba(247, 37, 133, .3); }
.rk-bloque-series .rk-bloque-tit { color: var(--accent-series); border-bottom-color: rgba(255, 214, 10, .3); }

.rk-bloque-n {
  margin-left: auto;
  font-size: var(--pixel-xs);
  color: var(--text-muted);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
}

/* ── Una banda ──────────────────────────────────────────────────────────── */

/* ⚠️ Sin `overflow: hidden`, y no por descuido. Un antepasado con `overflow`
   distinto de `visible` se convierte en el contenedor de scroll del `sticky`
   de dentro, y como la banda no tiene scroll propio, la letra se queda clavada
   arriba de la banda en vez de seguir a la pantalla. Se probó y pasaba justo
   eso: en la banda A, con 87 títulos, la letra desaparecía en cuanto empezabas
   a bajar. Las esquinas las redondea cada hijo por su cuenta. */
.rk-tier {
  display: grid;
  grid-template-columns: 128px 1fr;
  margin-bottom: var(--space-sm);
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
}
.rk-tier[hidden] { display: none; }

.rk-tlab {
  background: var(--t);
  border-right: 2px solid rgba(0, 0, 0, .35);
  border-radius: calc(var(--radius-md) - 2px) 0 0 calc(var(--radius-md) - 2px);
}

/* Lo que persigue al lector. `align-self: start` en el hijo no basta: la celda
   del grid se estira igual, y es esa celda la que pinta el color de la banda.
   Por eso el color va en `.rk-tlab` (estirada) y el `sticky` en su hijo. */
.rk-tlab-in {
  position: sticky;
  /* Por debajo de la barra de saltos, que también es pegajosa. Sin sumar su
     altura, la letra se le mete detrás y no se lee ninguna de las dos. */
  top: calc(var(--navbar-height) + var(--rk-barra) + 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-md) var(--space-xs);
  text-align: center;
}

.rk-tletra {
  font-family: var(--font-pixel);
  font-size: var(--pixel-3xl);
  line-height: 1;
  color: #fff;
  /* El contorno opaco en las 8 direcciones no es decorativo: el blanco pelado
     sobre el dorado de la S mide 2.65:1 y WCAG solo lo salva un halo que
     rodee el glifo entero (el color adyacente pasa a ser el contorno, 21:1).
     La sombra desplazada de antes no rodeaba y no contaba. */
  text-shadow:
    -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000,
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    3px 3px 0 rgba(0, 0, 0, .45);
}

/* Sobre el dorado y el naranja, el blanco no se lee. El negro sí, y sobre el
   azul y el rojo también: por eso los rótulos de la etiqueta son negros aunque
   la letra grande sea blanca con sombra.
   Negro PLENO, sin alfa: la banda D (#cf4b46) solo da 4.75:1 contra negro
   puro, así que cualquier rebaja por transparencia cae por debajo del 4.5:1
   de WCAG AA (con .6 medía 3.03; con .85, 4.27). No hay sitio para jerarquía
   por alfa en estas bandas: la jerarquía queda en tamaño y negrita. */
.rk-tname {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  line-height: 1.5;
  color: #000;
}

.rk-trango,
.rk-tn { font-family: var(--font-pixel); font-size: var(--pixel-xs); color: #000; }
.rk-tn b { color: #000; }

.rk-tcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: var(--space-sm);
  padding: var(--space-sm);
  align-content: start;
}

/* ── Una ficha ──────────────────────────────────────────────────────────── */

.rk-c {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-fast);
}
.rk-c:hover { border-color: var(--c); transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0, 0, 0, .55); }
.rk-c:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
/* Sin esto, `hidden` no esconde nada: el atributo es una regla de estilo y el
   `display:flex` de aquí le gana. Es lo que usa el buscador. */
.rk-c[hidden] { display: none; }

.rk-c-arte { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #07070d; }
.rk-c-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rk-c-nota {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--c);
  background: rgba(6, 6, 12, .9);
  border: 2px solid var(--c);
  border-radius: var(--radius-sm);
  padding: 4px 7px;
}

/* «EN CATÁLOGO»: este título además tiene ficha propia, con tráiler y enlaces.
   Es la diferencia entre pinchar y llegar a una ventana con la cita o pinchar
   y llegar a la ficha entera, así que se avisa antes de pinchar. */
.rk-c-cat {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-pixel);
  /* Era 7px, pero la escala no baja de 8: mejor un escalón real que un
     tamaño que no existe en ninguna otra parte de la web. */
  font-size: var(--pixel-xs);
  letter-spacing: .04em;
  color: var(--text-inverse);
  background: var(--pixel-green);
  padding: 4px 6px;
  border-bottom-right-radius: var(--radius-sm);
}

.rk-c-txt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  flex: 1;
}

/* ⚠️ La familia va escrita a mano y no se puede quitar. Un `h3` de esta web
   hereda la Press Start 2P de la regla global, y esa fuente ocupa un cuadrado
   entero por letra: a 17 px caben OCHO caracteres en una ficha de 166, así que
   «Palworld» salía partido en «Palworl / d» y «The Legend of Zelda: Ocarina of
   Time» ocupaba media pantalla. La Press Start 2P es para rótulos de cuatro
   palabras, y aquí hay títulos de nueve.

   Con la VT323 del cuerpo entran unos veinte caracteres por renglón, que es lo
   que hace falta. El `break-word` es para los cuatro títulos con una palabra
   más larga que la ficha entera; corta solo esos y no parte lo que cabe. */
.rk-c-tit {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.05;
  color: #fff;
  overflow-wrap: break-word;
}

/* SUS PALABRAS. Cursiva, comillas angulares y una franja turquesa a la
   izquierda: el mismo tratamiento que `.rank-cita` da a las citas en el resto
   de la pantalla. La regla de la casa es que lo que dijo una persona real no
   se confunda NUNCA con lo que hemos escrito nosotros, y en una banda de 87
   tarjetas esa diferencia tiene que verse de un vistazo. */
.rk-c-cita {
  margin: 0;
  padding: 5px 0 5px 9px;
  border-left: 3px solid var(--accent-games);
  background: rgba(0, 245, 212, .05);
  font-style: italic;
  /* Mismo escalón que el resumen de abajo: lo que separa la cita no es un
     píxel de tamaño, sino la cursiva, la franja y el color. */
  font-size: var(--pixel-lg);
  line-height: 1.25;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* El resumen del informe, para los 182 títulos que no tienen cita. Tres líneas
   como mucho. Es lo que convierte la banda en una lectura y no en un mosaico
   de portadas: se ve POR QUÉ está ahí. */
.rk-c-op {
  margin: 0;
  font-size: var(--pixel-lg);
  line-height: 1.25;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rk-c-pie { margin-top: auto; display: flex; flex-wrap: wrap; gap: 5px; padding-top: var(--space-2xs); }

.rk-c-n,
.rk-c-min {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  letter-spacing: .03em;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  color: var(--text-muted);
  background: var(--bg-primary);
}

/* El minuto en el que lo dijo. Es la marca de que ahí hay una cita literal
   verificada y no solo el resumen del informe, así que lleva el turquesa. */
.rk-c-min { color: var(--accent-games); border-color: rgba(0, 245, 212, .4); }

.rk-sin-resultados {
  margin: var(--space-2xl) 0;
  text-align: center;
  font-size: var(--text-base);
  color: var(--text-muted);
}

/* ============================================================================
   LA VENTANA DE UN TÍTULO SIN FICHA
   ============================================================================
   198 de los 224 no tienen ficha en el catálogo todavía. Pinchar uno tiene que
   dar algo, y lo que hay es lo único que importa: su nota, su opinión y sus
   citas con fecha y minuto. Y decirlo: que la ficha completa aún no existe.
   ========================================================================== */

.rk-det {
  width: min(720px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 3px solid var(--c);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 3px var(--bg-primary), 0 0 40px rgba(0, 0, 0, .6);
  overflow: hidden;
}

.rk-det-cab {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 2px solid var(--border-color);
  background: rgba(255, 255, 255, .03);
  flex-shrink: 0;
}

.rk-det-arte { width: 96px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; }
.rk-det-arte img { width: 100%; height: auto; display: block; }

.rk-det-alto { display: flex; flex-direction: column; gap: var(--space-2xs); align-items: flex-start; min-width: 0; }
/* La banda de la que viene, con su color. Es lo primero que se lee al abrir la
   ventana: dice de una que esto es un «S» antes de mirar el número. */
.rk-det-tier {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--text-inverse);
  background: var(--c);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  letter-spacing: .05em;
}

.rk-det-tit { margin: 0; font-size: var(--text-xl); line-height: 1.1; color: #fff; }
.rk-det-marca { font-family: var(--font-pixel); font-size: var(--pixel-sm); color: var(--c); letter-spacing: .03em; }
.rk-det-ver { font-size: var(--text-sm); color: var(--text-muted); }

.rk-det-cerrar {
  align-self: flex-start;
  margin-left: auto;
  background: none;
  border: 2px solid var(--text-muted);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  padding: 6px 9px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.rk-det-cerrar:hover { color: var(--accent-danger); border-color: var(--accent-danger); }

.rk-det-cuerpo { overflow-y: auto; padding: var(--space-md); }
.rk-det-op { margin: 0 0 var(--space-sm); font-size: var(--text-base); line-height: 1.45; color: var(--text-secondary); }

.rk-det-pie {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: var(--space-md) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-color);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--text-muted);
}

/* ── La cita ────────────────────────────────────────────────────────────── */

.rank-cita {
  display: block;
  margin: var(--space-xs) 0 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--accent-games);
  background: rgba(0, 245, 212, .05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  text-decoration: none;
}

.rank-cita-txt {
  margin: 0;
  font-style: italic;
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--text-primary);
}

.rank-cita-pie {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-sm);
  /* Un escalón sobre --text-muted: en las tarjetas de "no vistos" la cita va
     sobre un fondo teñido (#1d2844 compuesto) y el muted medía 4.32:1. */
  color: var(--text-secondary);
}

.rank-cita-video { color: var(--text-secondary); }

.rank-cita-enlace { transition: var(--transition-fast); }
.rank-cita-enlace:hover { background: rgba(0, 245, 212, .12); }
.rank-cita-ir { color: var(--accent-games); vertical-align: middle; }

/* ── El buscador de la lista ────────────────────────────────────────────── */
/*
   Con 159 juegos, la pregunta que trae aquí a la gente no es «enséñamelos
   todos» sino «¿qué dijo de este?». Esta caja es la que responde a eso, y por
   eso va pegada a la lista y no perdida en la cabecera.
*/

.rank-buscador {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.rank-buscador-lab { color: var(--text-muted); display: flex; }

.rank-buscar {
  flex: 1;
  max-width: 340px;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-input);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 9px var(--space-sm);
  transition: var(--transition-fast);
}
.rank-buscar:focus { outline: none; border-color: var(--accent-games); }
.rank-buscar::placeholder { color: var(--text-muted); }

.rank-cuenta {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--accent-games);
}
.rank-cuenta-cero { color: var(--text-muted); }

.rank-mas {
  display: block;
  width: 100%;
  margin-top: var(--space-sm);
  font-size: var(--pixel-xs);
}

/* ── Títulos que además existen como ficha del catálogo ─────────────────── */

.rank-enlazado {
  color: var(--accent-games);
  cursor: pointer;
  border-bottom: 1px dotted rgba(0, 245, 212, .5);
}
.rank-enlazado:hover { color: #fff; border-bottom-color: #fff; }
.rank-enlazado:focus-visible { outline: 2px solid var(--accent-games); outline-offset: 2px; }

/* ── Los jugados sin valoración ─────────────────────────────────────────── */

.rank-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; padding: 0; }

.rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
}

.rank-chip-n {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--text-muted);
}

/* ── El anexo de no vistos ──────────────────────────────────────────────── */

.rank-novistos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-md);
}

.rank-novisto {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-top: 3px solid var(--text-muted);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.rank-novisto-tit {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--text-primary);
}

.rank-novisto-tipo {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  margin-left: var(--space-2xs);
  vertical-align: middle;
}

/* En el anexo la cita no adorna: es la prueba de que dijo no haberlo visto.
   Va en gris para no competir con las de los rankings, que son valoraciones. */
.rank-novisto .rank-cita { border-left-color: var(--text-muted); background: rgba(255, 255, 255, .03); }

/* ── El pie: método y límites ───────────────────────────────────────────── */

.rank-pie { max-width: 80ch; }

.rank-pie-p {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
}

.rank-limites {
  margin: var(--space-sm) 0;
  padding-left: var(--space-lg);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-muted);
}
.rank-limites li { margin-bottom: var(--space-xs); }

.rank-pie-erratas {
  border-left: 3px solid var(--accent-series);
  padding-left: var(--space-md);
  color: var(--text-muted);
}

/* Los créditos de las carátulas. TMDB y RAWG lo piden por contrato, así que
   esto no es un adorno: es la condición para poder enseñarlas. */
.rank-pie-creditos { font-size: var(--text-sm); color: var(--text-muted); }

/* ── Cuando el creador no tiene archivo ─────────────────────────────────── */

.rank-vacio {
  text-align: center;
  padding: var(--space-4xl) var(--space-lg);
  color: var(--text-secondary);
}
.rank-vacio h1 { font-size: var(--text-2xl); color: var(--text-primary); margin: var(--space-md) 0 var(--space-xs); }
.rank-vacio p { max-width: 60ch; margin: 0 auto var(--space-lg); line-height: 1.5; }

/* ── El botón desde la ficha del creador ────────────────────────────────── */

.hub-archivo {
  display: block;
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-card);
  border: 2px solid var(--accent-games);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition-fast);
}
.hub-archivo:hover { background: var(--bg-card-hover); box-shadow: 0 0 24px rgba(0, 245, 212, .2); }

.hub-archivo-tit {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-pixel);
  font-size: var(--pixel-base);
  color: var(--accent-games);
  margin: 0 0 var(--space-2xs);
}

.hub-archivo-txt { margin: 0; font-size: var(--text-base); line-height: 1.4; color: var(--text-secondary); }

/* ── Móvil ──────────────────────────────────────────────────────────────── */

/* Las fichas se reparten solas (`auto-fill`), así que aquí solo hay que tocar
   lo que no se adapta por su cuenta: la columna de la letra. */
@media (max-width: 980px) {
  .rk-tier { grid-template-columns: 96px 1fr; }
  .rk-tletra { font-size: var(--pixel-2xl); }
  .rk-tname { display: none; }   /* a 96 px, «Obra maestra para él» son cinco renglones */
}

@media (max-width: 720px) {
  /* La etiqueta deja de ser una columna y pasa a ser una franja encima de la
     banda. Con 390 px de ancho, una columna de 96 px se come la cuarta parte de
     la pantalla para enseñar una letra, y deja sitio a una sola ficha por fila:
     221 fichas en columna son sesenta pantallas de scroll. En horizontal, la
     franja ocupa 34 px de alto y las fichas recuperan el ancho entero. */
  .rk-tier { grid-template-columns: 1fr; }
  .rk-tlab { border-right: none; border-bottom: 2px solid rgba(0, 0, 0, .35); }
  .rk-tlab-in {
    /* La regla base es `sticky` con `top` (calc de navbar+barra+10px), y este
       `static` lo ignora en silencio. Si algún día pasa a `relative`, añade
       `top: auto` en la misma regla — si no, hereda ese `top` y se desplaza
       sin que nadie lo pida (pasó de verdad en pc-035, editor de avatar). */
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
    padding: 7px var(--space-sm);
    text-align: left;
  }
  .rk-tletra {
    font-size: var(--pixel-lg);
    /* mantiene el contorno de la regla base (aquí la letra es pequeña y el
       mínimo sube a 4.5:1: sin halo, ninguna banda lo cumple) */
    text-shadow:
      -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000,
      -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
      2px 2px 0 rgba(0, 0, 0, .45);
  }
  .rk-tname { display: inline; }
  .rk-tn { margin-left: auto; }

  /* Tres por fila. Con dos, las fichas ocupaban **55.489 píxeles** en un móvil
     de 390: sesenta y cinco pantallas. Con tres bajan a un tercio, y una
     portada de 110 px se sigue reconociendo de sobra. */
  .rk-tcards { grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); padding: var(--space-xs); }
  .rk-c-txt { padding: var(--space-xs); }
  .rk-c-tit { font-size: var(--text-sm); }
  .rk-c-op { -webkit-line-clamp: 2; }
  .rk-c-cat { display: none; }        /* a 110 px de ancho tapa media portada */

  .rk-bloque-tit { font-size: var(--pixel-base); }
  .rank-novistos { grid-template-columns: 1fr; }
  .rank-sec { font-size: var(--pixel-sm); margin-top: var(--space-xl); }
  .rank-corchete { font-size: var(--pixel-xs); padding: 6px 8px; }
  .rk-leyenda { display: none; }   /* cinco tramos en vertical son un muro; las franjas ya lo dicen */
  .rk-det-cab { flex-wrap: wrap; }
  .rk-det-arte { width: 72px; }
}

/* ── La nota del creador sobre la portada ───────────────────────────────────
   Cuando una tarjeta del catálogo se pinta dentro de la ficha de un creador
   que tiene Archivo, la píldora de la esquina deja de ser la nota genérica del
   catálogo —★9.6, que no es de nadie— y pasa a ser LA SUYA, con su color de
   tramo y la frase con la que lo dijo debajo.

   Es la mezcla que faltaba: la portada y el tráiler del catálogo, con la
   opinión verificada del Archivo encima. Ninguna de las dos cosas sola valía.
   ========================================================================== */

.card-nota-suya {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--c);
  background: rgba(10, 10, 15, .88);
  border: 2px solid var(--c);
  letter-spacing: .03em;
}

.content-card-suyos {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--text-muted);
}

/* Su frase, debajo del título. Dos líneas como mucho: es un aperitivo que
   invita a entrar al Archivo, no el sitio donde se lee la cita entera. */
.content-card-frase {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-sm);
  font-style: italic;
  line-height: 1.3;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content-card-suya:hover .content-card-frase { color: var(--text-primary); }

/* La estantería con notas reales respira más que la rejilla normal: cada
   tarjeta lleva ahora una frase debajo y necesita el sitio. */
.hub-estanteria { margin-top: var(--space-md); }

/* Lo que no le gustó. Franja roja arriba para que no haga falta leer la nota
   para saber de qué va la fila. */
.hub-peor .content-card { border-top: 3px solid var(--accent-danger); }

/* Un «jugado sin valorar» que además tiene ficha en el catálogo. Hereda el
   turquesa y el clic de `.rank-enlazado`, pero sin el subrayado de puntos: en
   una nube de setenta etiquetas, setenta subrayados es ruido. */
.rank-chip.rank-enlazado { border-bottom: none; border-color: rgba(0, 245, 212, .45); }