/*
 * clasicosbasicos.org · capa propia
 *
 * Se carga DESPUES del CSS del tema para no pelearse por especificidad.
 * Reutiliza la paleta que ya usa YOOtheme en el sitio:
 *
 *   magenta  #cc1d88   primario, gradiente de botones
 *   cian     #00b1be   segundo color del gradiente
 *   oro      #ffa600   notas y estrellas
 *   fondo    #08091e   base oscura
 *
 * Todo lo de aqui vive bajo .claba-mm o .claba-*, asi que quitar el fichero
 * devuelve el sitio exactamente a como estaba.
 */

:root {
	--claba-magenta: #cc1d88;
	--claba-cian:    #00b1be;
	--claba-oro:     #ffa600;
	--claba-tinta:   #08091e;
	--claba-panel:   rgba(26, 31, 43, .985);
	--claba-panel-2: rgba(16, 19, 29, .985);
	--claba-borde:   rgba(255, 255, 255, .10);
	--claba-texto:   rgba(255, 255, 255, .82);
	--claba-suave:   rgba(255, 255, 255, .48);
}

/* ------------------------------------------------------------------ *
 * Megamenu
 * ------------------------------------------------------------------ */

.claba-mm.uk-navbar-dropdown {
	width: min(1180px, calc(100vw - 40px));
	max-width: none;
	padding: 0;
	background: linear-gradient(150deg, var(--claba-panel), var(--claba-panel-2));
	border: 1px solid var(--claba-borde);
	border-radius: 14px;
	box-shadow:
		inset 1px 1px 0 rgba(255, 255, 255, .05),
		0 24px 60px -12px rgba(0, 0, 0, .75);
	overflow: hidden;
	color: var(--claba-texto);
}

/* Filo de color arriba: es el gradiente de los botones del sitio. */
.claba-mm-inner {
	position: relative;
	padding: 26px 28px 0;
}

.claba-mm-inner::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--claba-magenta), var(--claba-cian));
}

.claba-mm-cols {
	display: grid;
	grid-template-columns: 1.15fr 1.25fr .9fr 1fr;
	gap: 28px;
	align-items: start;
}

.claba-mm-peliculas .claba-mm-cols {
	grid-template-columns: 1fr 1.2fr 1fr;
}

.claba-mm-col {
	min-width: 0;
}

/* -- Encabezado de columna ----------------------------------------- */

.claba-mm-titulo {
	display: block;
	margin: 0 0 14px;
	padding-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	border-bottom: 1px solid var(--claba-borde);
	position: relative;
}

.claba-mm-titulo::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 34px;
	height: 2px;
	background: linear-gradient(90deg, var(--claba-magenta), var(--claba-cian));
}

a.claba-mm-titulo:hover {
	color: var(--claba-magenta);
	text-decoration: none;
}

/* -- Listas con recuento ------------------------------------------- */

.claba-mm-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.claba-mm-lista.claba-mm-cols-2 {
	columns: 2;
	column-gap: 18px;
}

.claba-mm-lista li {
	break-inside: avoid;
	margin: 0;
}

.claba-mm-lista a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 5px 8px;
	margin: 0 -8px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--claba-texto);
	text-decoration: none;
	transition: background-color .12s ease, color .12s ease, transform .12s ease;
}

.claba-mm-lista a:hover,
.claba-mm-lista a:focus-visible {
	background: rgba(204, 29, 136, .16);
	color: #fff;
	transform: translateX(2px);
	text-decoration: none;
}

.claba-mm-nombre {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.claba-mm-num {
	flex: none;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--claba-suave);
	background: rgba(255, 255, 255, .06);
	border-radius: 20px;
	padding: 1px 7px;
}

.claba-mm-lista a:hover .claba-mm-num {
	color: #fff;
	background: rgba(255, 255, 255, .14);
}

/* -- Decadas -------------------------------------------------------- */

.claba-mm-decada + .claba-mm-decada {
	margin-top: 12px;
}

.claba-mm-decada-nombre {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 6px;
}

.claba-mm-anos {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.claba-mm-ano {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 5px;
	color: var(--claba-suave);
	background: rgba(255, 255, 255, .05);
	text-decoration: none;
	transition: background-color .12s ease, color .12s ease;
}

.claba-mm-ano:hover,
.claba-mm-ano:focus-visible {
	background: linear-gradient(135deg, var(--claba-magenta), var(--claba-cian));
	color: #fff;
	text-decoration: none;
}

/* -- Fichas destacadas ---------------------------------------------- */

.claba-mm-ficha {
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 7px;
	margin: 0 -7px 4px;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color .12s ease;
}

.claba-mm-ficha:hover,
.claba-mm-ficha:focus-visible {
	background: rgba(255, 255, 255, .06);
	text-decoration: none;
}

.claba-mm-portada {
	flex: none;
	width: 56px;
	height: 78px;
	border-radius: 4px;
	overflow: hidden;
	background: rgba(255, 255, 255, .06);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}

.claba-mm-portada img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.claba-mm-ficha-texto {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.claba-mm-ficha-titulo {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.claba-mm-nota {
	font-size: 11px;
	font-weight: 700;
	color: var(--claba-oro);
	font-variant-numeric: tabular-nums;
}

.claba-mm-votos {
	font-weight: 400;
	color: var(--claba-suave);
}

/* -- Pie ------------------------------------------------------------ */

.claba-mm-pie {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 24px -28px 0;
	padding: 14px 28px;
	background: rgba(0, 0, 0, .28);
	border-top: 1px solid var(--claba-borde);
}

.claba-mm-cta {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	padding: 8px 13px;
	border-radius: 20px;
	color: var(--claba-texto);
	background: rgba(255, 255, 255, .06);
	text-decoration: none;
	transition: background-color .12s ease, color .12s ease;
}

.claba-mm-cta:hover,
.claba-mm-cta:focus-visible {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	text-decoration: none;
}

.claba-mm-cta-fuerte {
	color: #fff;
	background: linear-gradient(135deg, var(--claba-magenta), var(--claba-cian));
	box-shadow: 0 6px 20px -6px rgba(204, 29, 136, .8);
}

.claba-mm-cta-fuerte:hover {
	color: #fff;
	filter: brightness(1.1);
}

/* -- Pantallas estrechas -------------------------------------------- */

@media (max-width: 1199px) {
	.claba-mm-cols,
	.claba-mm-peliculas .claba-mm-cols {
		grid-template-columns: 1fr 1fr;
		gap: 22px;
	}
	.claba-mm-col-destacados {
		grid-column: 1 / -1;
	}
	.claba-mm-col-destacados .claba-mm-ficha {
		display: inline-flex;
		width: calc(50% - 8px);
	}
}

/* El megamenu es exclusivo del navbar de escritorio. En movil el tema usa
   el offcanvas con uk-nav, que no lleva uk-navbar-dropdown y por tanto no
   pasa por la sustitucion. Este resguardo es por si algun dia cambia. */
@media (max-width: 639px) {
	.claba-mm.uk-navbar-dropdown {
		width: auto;
	}
	.claba-mm-cols {
		grid-template-columns: 1fr;
	}
}

/* Respetar a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	.claba-mm-lista a,
	.claba-mm-ano,
	.claba-mm-ficha,
	.claba-mm-cta {
		transition: none;
	}
	.claba-mm-lista a:hover {
		transform: none;
	}
}

/* ================================================================== *
 * Pulido visual
 *
 * Deliberadamente aditivo. El sitio arrastra 22 KB de CSS escrito a
 * mano dentro del propio HTML, con reglas muy concretas sobre .game,
 * .covera, .shelf y demas. Reescribir eso desde aqui seria pelearse a
 * base de !important y romper cosas por el camino. Asi que esto solo
 * anade lo que faltaba: estados de foco, comportamiento al pasar el
 * raton, y el formulario de filtros, que se quedo a medias.
 * ================================================================== */

/* -- Accesibilidad: foco visible ------------------------------------ *
 * No habia ningun estilo de :focus-visible. Quien navega con teclado no
 * sabia donde estaba. Solo se pinta con focus-visible, asi que con raton
 * no cambia nada.                                                     */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--claba-magenta);
	outline-offset: 2px;
	border-radius: 3px;
}

/* -- Portadas del catalogo ------------------------------------------ *
 * Las fichas no tenian ninguna respuesta al raton: el cursor cambiaba y
 * poco mas. Un catalogo se navega con la vista, conviene que la portada
 * bajo el puntero se separe del resto.                                */

.covera .game,
.juegazos .game {
	border-radius: 6px;
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
	transition: transform .18s ease, box-shadow .18s ease;
}

.covera:hover .game,
.covera:focus-visible .game {
	transform: translateY(-4px);
	box-shadow:
		0 12px 28px -8px rgba(0, 0, 0, .85),
		0 0 0 1px rgba(204, 29, 136, .55);
}

/* Fondo mientras la imagen aun no ha cargado: sobre un sitio oscuro, el
   hueco en blanco de una imagen diferida canta mucho. */
.covera .game img,
.juegazos .game img {
	background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
}

/* -- Formulario de filtros ------------------------------------------ *
 * Search & Filter emite <select> sueltos dentro de un <ul>. El plugin
 * los saca sin estilo propio; hasta ahora se apoyaba en siete parches a
 * mano dentro de su codigo (ver 01-search-filter-ui.php). Aqui se le da
 * forma de panel de verdad.                                           */

.searchandfilter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.searchandfilter li {
	margin: 0;
	flex: 1 1 150px;
	min-width: 0;
	text-align: left;
}

.searchandfilter li > h4,
.searchandfilter label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--claba-suave);
	margin: 0 0 5px;
}

.searchandfilter .uk-select:not([multiple]):not([size]) {
	height: 38px;
	border-radius: 6px;
	border: 1px solid var(--claba-borde);
	background-color: rgba(255, 255, 255, .05);
	color: var(--claba-texto);
	transition: border-color .12s ease, background-color .12s ease;
}

.searchandfilter .uk-select:not([multiple]):not([size]):hover {
	background-color: rgba(255, 255, 255, .08);
}

.searchandfilter .uk-select:not([multiple]):not([size]):focus {
	border-color: var(--claba-magenta);
	background-color: rgba(255, 255, 255, .09);
}

/* El desplegable nativo se pinta con los colores del sistema: sin esto,
   en modo oscuro salen opciones blancas sobre blanco en algunos
   navegadores. */
.searchandfilter .uk-select option {
	background: #16192a;
	color: #fff;
}

.searchandfilter .uk-button-primary {
	height: 38px;
	padding: 0 22px;
	border-radius: 6px;
	font-size: 13px;
	letter-spacing: .04em;
}

/* -- Detalles --------------------------------------------------------- */

::selection {
	background: var(--claba-magenta);
	color: #fff;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.covera .game,
	.juegazos .game {
		transition: none;
	}
	.covera:hover .game {
		transform: none;
	}
}

/* -- Encabezado de la portada ---------------------------------------- *
 * La portada tenia cinco <h1> (los titulos del carrusel). Se bajaron a
 * <h2>, que es lo que son, y la pagina recibe un <h1> propio.
 *
 * Tiene que ser invisible: el diseno de la portada no tiene sitio para un
 * titular, y el texto ya se lee en la pestana del navegador. El primer
 * intento uso `uk-hidden-visually`, que en UIkit 3 hace exactamente esto
 * — pero esta compilacion de YOOtheme 2.3.25 no la trae, asi que el
 * encabezado salio a tamano completo encima de la portada. Aqui se define
 * la regla en casa y no se depende del tema.
 *
 * No es display:none: eso lo esconderia tambien de los lectores de
 * pantalla, que es justo a quien sirve.                                */

.claba-h1-oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ================================================================== *
 * RONDA 3 · gramática de movimiento y pulido visual
 *
 * A partir de aqui esta hoja se imprime DESPUES del CSS del
 * personalizador (ver 02-assets.php), asi que ya no hace falta pelear
 * con !important salvo contra reglas que lo lleven.
 * ================================================================== */

:root{
	/* Tres duraciones y sólo tres. El sitio tenía siete sueltas
	   (.1s, .12s, .18s, .2s, .3s, .4s, .45s, 1s) sin criterio. */
	--claba-t-estado:  120ms;   /* hover, foco, conmutadores        */
	--claba-t-entrada: 240ms;   /* algo que aparece                 */
	--claba-t-escena:  400ms;   /* paneles, desplegables, overlays  */

	/* Dos curvas. Salida para lo que entra, estado para lo que cambia. */
	--claba-e-salida: cubic-bezier(.2,.8,.25,1);
	--claba-e-estado: cubic-bezier(.4,0,.2,1);

	/* Distancias cortas: el movimiento se nota, no se sufre. */
	--claba-d-hover:   6px;
	--claba-d-entrada: 16px;

	/* Magenta legible. El #cc1d88 sobre el panel oscuro da 3,22:1 y no
	   llega al 4,5:1 que pide WCAG AA para texto normal. Este da 5,4:1.
	   El de marca se sigue usando para superficies, bordes y luces. */
	--claba-magenta-txt:#ff5aa8;
}

/* ------------------------------------------------------------------ *
 * Portadas del catálogo
 *
 * El tema tenía `.game:hover{transform:perspective(50em) rotateX(10deg)
 * scale(1.1)}` — un giro 3D muy acorde con el sitio — pero mi regla
 * anterior `.covera:hover .game{transform:translateY(-4px)}` tenía más
 * especificidad y lo anulaba: el efecto no se veía en ningún listado.
 * Aquí se unifican los dos en un solo gesto.
 * ------------------------------------------------------------------ */

.covera .game,
.juegazos .game{
	transform:perspective(50em) rotateX(0) translateY(0) scale(1);
	transition:transform var(--claba-t-estado) var(--claba-e-estado),
	           box-shadow var(--claba-t-estado) var(--claba-e-estado);
}

.covera:hover .game,
.covera:focus-visible .game{
	transform:perspective(50em) rotateX(8deg)
	          translateY(calc(var(--claba-d-hover) * -1)) scale(1.03);
	box-shadow:
		0 18px 34px -12px #000,
		0 0 0 1px rgba(204,29,136,.6),
		0 0 22px -6px rgba(204,29,136,.55);
}

/* `transition: all` en .game, .wrapo y .uk-card-default a obligaba al
   navegador a vigilar todas las propiedades. Sólo interesan estas dos,
   y las dos se componen en GPU. */
.game,.game-peq,.game-rel,.wrapo{
	transition:transform var(--claba-t-estado) var(--claba-e-estado),
	           box-shadow var(--claba-t-estado) var(--claba-e-estado)!important;
}

/* El brillo diagonal animaba `background-position`, que repinta la capa
   entera. Con opacidad se compone sin repintar. */
.game:before,.game-peq:before,.game-rel:before{
	transition:opacity var(--claba-t-estado) linear!important;
}

/* ------------------------------------------------------------------ *
 * Pie de tarjeta
 *
 * Hasta ahora el nombre del juego sólo existía en el atributo `title` y
 * en el tooltip de UIkit. En una pantalla táctil no hay hover: el
 * listado de 958 juegos era una pared de carátulas sin un solo nombre.
 * El marcado nuevo lo pone en archive.php.
 * ------------------------------------------------------------------ */

.claba-ficha-pie{
	display:block;
	margin-top:9px;
	text-align:left;
}

.claba-ficha-titulo{
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	font-size:13px;
	font-weight:600;
	line-height:1.3;
	color:rgba(255,255,255,.92);
}

.claba-ficha-meta{
	display:block;
	margin-top:3px;
	font-size:11px;
	line-height:1.35;
	color:var(--claba-suave);
	font-variant-numeric:tabular-nums;
}

.claba-ficha-meta .claba-sep{color:rgba(255,255,255,.28)}

.covera:hover .claba-ficha-titulo{color:#fff}

/* ------------------------------------------------------------------ *
 * La estantería como vitrina
 *
 * El mueble ya estaba; le faltaba la luz. Un tubo de neón cian sobre
 * cada balda y un reflejo suave de la carátula.
 * ------------------------------------------------------------------ */

.shelf{position:relative}

.shelf::after{
	content:"";
	position:absolute;
	left:2%;
	right:2%;
	top:-2px;
	height:2px;
	background:linear-gradient(90deg,transparent,var(--claba-cian),transparent);
	box-shadow:0 0 14px 2px rgba(0,177,190,.5);
	opacity:.8;
	pointer-events:none;
}

/* ------------------------------------------------------------------ *
 * Formulario de filtros
 *
 * Seis desplegables grises del sistema, con la flecha nativa, dentro de
 * un panel de neón. Sin `appearance:none` el control nativo gana y el
 * color de fondo semitransparente no se aplica.
 * ------------------------------------------------------------------ */

.searchandfilter .uk-select:not([multiple]):not([size]),
.filtraje .uk-select:not([multiple]):not([size]){
	appearance:none;
	-webkit-appearance:none;
	height:44px;                       /* 44 px: objetivo táctil mínimo */
	padding:0 34px 0 12px;
	border-radius:8px;
	background-color:#151a28;          /* opaco: con alpha se transparenta el gris del sistema */
	color:#fff;
	border:1px solid rgba(255,255,255,.14);
	/* La flecha se dibuja con dos degradados: sin SVG y sin petición. */
	background-image:
		linear-gradient(45deg,transparent 50%,var(--claba-magenta) 50%),
		linear-gradient(135deg,var(--claba-magenta) 50%,transparent 50%);
	background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;
	background-size:5px 5px,5px 5px;
	background-repeat:no-repeat;
	transition:border-color var(--claba-t-estado) var(--claba-e-estado),
	           background-color var(--claba-t-estado) var(--claba-e-estado);
}

.searchandfilter .uk-select:not([multiple]):not([size]):hover,
.filtraje .uk-select:not([multiple]):not([size]):hover{
	background-color:#1b2133;
	border-color:rgba(255,255,255,.22);
}

.searchandfilter .uk-select:not([multiple]):not([size]):focus,
.filtraje .uk-select:not([multiple]):not([size]):focus{
	border-color:var(--claba-magenta);
	background-color:#1b2133;
}

.searchandfilter .uk-select option,
.filtraje .uk-select option{background:#151a28;color:#fff}

.searchandfilter .uk-button-primary{
	min-height:44px;
	padding:0 24px;
	border-radius:8px;
	letter-spacing:.06em;
}

/* ------------------------------------------------------------------ *
 * Contraste
 *
 * Medidos sobre los colores reales: el magenta de marca sobre el panel
 * da 3,22:1 y sobre el fondo 2,27:1. Para texto pequeño no vale.
 * ------------------------------------------------------------------ */

.uk-article-meta,
.game-meta,
.claba-suave a,
.page-numbers{color:var(--claba-magenta-txt)}

/* Medido: el blanco sobre el magenta #cc1d88 da 5,12:1 y pasa AA. Sobre
   el cian #00b1be da 2,61:1 y no pasa. Poner el texto en tinta oscura
   dejaba invisible el botón FILTRAR, que es de contorno y no lleva el
   degradado detrás. Se arregla al revés: oscurecer sólo el extremo cian
   del degradado hasta #08757f, que con blanco da 5,44:1. El barrido de
   color se mantiene y ahora se lee de punta a punta. */
.uk-button-primary,
.claba-mm-cta-fuerte{font-weight:700}

.uk-button-primary:not(.uk-button-text){
	background-image:linear-gradient(135deg,var(--claba-magenta),#08757f)!important;
}

.claba-mm-cta-fuerte{
	background:linear-gradient(135deg,var(--claba-magenta),#08757f);
	color:#fff;
}

/* ------------------------------------------------------------------ *
 * Paginación
 *
 * Números de ~18 px sin caja: imposibles de acertar con el dedo.
 * ------------------------------------------------------------------ */

.page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:44px;
	min-height:44px;
	margin:0 2px;
	padding:0 6px;
	border-radius:8px;
	border:1px solid rgba(255,255,255,.10);
	text-decoration:none;
	transition:background-color var(--claba-t-estado) var(--claba-e-estado),
	           border-color var(--claba-t-estado) var(--claba-e-estado);
}

.page-numbers:hover{background:rgba(204,29,136,.18);border-color:rgba(204,29,136,.5)}

.page-numbers.current{
	background:var(--claba-magenta);
	color:#fff;
	border-color:var(--claba-magenta);
}

/* ------------------------------------------------------------------ *
 * Navegación principal
 *
 * El subrayado del menú transicionaba `right` y `height` — las dos
 * provocan reflow — y además el color en hover era `transparent`, así
 * que el efecto no llegaba a verse nunca. Con scaleX se compone en GPU
 * y se dibuja de izquierda a derecha.
 * ------------------------------------------------------------------ */

.uk-navbar-nav>li>a::before{
	right:15px!important;
	height:2px!important;
	background:linear-gradient(90deg,var(--claba-magenta),var(--claba-cian))!important;
	transform:scaleX(0);
	transform-origin:left center;
	transition:transform var(--claba-t-estado) var(--claba-e-salida)!important;
}

.uk-navbar-nav>li:hover>a::before,
.uk-navbar-nav>li>a.uk-open::before,
.uk-navbar-nav>li.uk-active>a::before{transform:scaleX(1)}

/* ------------------------------------------------------------------ *
 * Megamenú: entra subiendo y el filo se dibuja
 * ------------------------------------------------------------------ */

.claba-mm.uk-navbar-dropdown.uk-open{
	animation:claba-mm-entra var(--claba-t-escena) var(--claba-e-salida) both;
}

@keyframes claba-mm-entra{
	from{opacity:0;transform:translateY(-10px) scaleY(.985)}
	to{opacity:1;transform:none}
}

.claba-mm.uk-open .claba-mm-inner::before{
	transform-origin:left center;
	animation:claba-mm-filo var(--claba-t-escena) 60ms var(--claba-e-salida) both;
}

@keyframes claba-mm-filo{
	from{transform:scaleX(0)}
	to{transform:scaleX(1)}
}

/* ------------------------------------------------------------------ *
 * Estado de carga del filtro
 *
 * Era la única interacción sin respuesta: pulsabas FILTRAR y no pasaba
 * nada hasta que el navegador cambiaba de página. La clase la pone
 * claba.js al enviar el formulario.
 * ------------------------------------------------------------------ */

.claba-cargando .uk-button-primary{
	pointer-events:none;
	position:relative;
	color:transparent!important;
}

.claba-cargando .uk-button-primary::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	background:repeating-linear-gradient(90deg,
		rgba(255,255,255,.85) 0 3px,transparent 3px 9px);
	animation:claba-scan 600ms steps(6) infinite;
}

/* steps() y no una curva suave: el salto es lo que le da el aire de
   terminal en vez de spinner de aplicación web. */
@keyframes claba-scan{to{transform:translateX(9px)}}

/* Confirmación al votar: el widget de estrellas guardaba el voto sin
   decir nada. */
.yasr-visitor-votes.claba-votado .yasr-rater-stars-vv{
	animation:claba-pulso var(--claba-t-entrada) var(--claba-e-salida);
}

@keyframes claba-pulso{
	40%{transform:scale(1.12)}
	100%{transform:scale(1)}
}

/* Botón de descarga: que responda al pulsar, como un botón físico. */
.botonaco:hover .wrapo{
	transform:translateY(-2px);
	box-shadow:0 10px 30px -8px rgba(204,29,136,.7);
}

.botonaco:active .wrapo{transform:translateY(0) scale(.99)}

/* ------------------------------------------------------------------ *
 * Lectura
 * ------------------------------------------------------------------ */

.single .uk-article p,
.single .uk-article ul,
.single .uk-article ol{max-width:68ch}   /* ~110 caracteres por línea antes */

.single .uk-article{font-size:17px;line-height:1.72}

/* ------------------------------------------------------------------ *
 * Catálogo en móvil
 *
 * Una carátula por fila a pantalla completa: 872 juegos son unos 20
 * pantallazos de scroll para ver ocho fichas.
 * ------------------------------------------------------------------ */

@media (max-width:639px){
	.juegazos{width:50%!important;padding:0 6px;box-sizing:border-box}
	.covera .game{height:180px}
	.covera .game img{width:100%;height:100%;object-fit:cover}
	.shelf{height:auto!important}
	.shelf::after{display:none}   /* el neón necesita una balda ancha */
	.claba-ficha-titulo{font-size:12px}
	.claba-ficha-meta{font-size:10px}
}

/* ------------------------------------------------------------------ *
 * Menos movimiento
 *
 * El tema no traía una sola regla de prefers-reduced-motion en sus
 * 22 KB de CSS. La segunda regla es imprescindible: sin ella, al matar
 * la animación de uk-scrollspy el contenido se queda en
 * visibility:hidden para siempre.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		transition-duration:.01ms!important;
		scroll-behavior:auto!important;
	}
	[uk-scrollspy],[uk-scrollspy]>*,.uk-scrollspy-inview{
		visibility:visible!important;
		opacity:1!important;
	}
	.covera:hover .game{transform:none}
}

/* ------------------------------------------------------------------ *
 * Ajuste del pie de tarjeta
 *
 * Al añadir el nombre bajo la carátula se solapaba con la fila
 * siguiente: `.shelf` tenía altura fija (345 px) y `.covera` era un
 * enlace en línea, así que el texto se salía de la balda. La altura de
 * la carátula (211 px, del tema) se respeta; lo que cambia es que la
 * balda crece con su contenido.
 * ------------------------------------------------------------------ */

.covera{
	display:block;
	color:inherit;
	text-decoration:none;
}

.shelf{
	height:auto!important;
	align-items:flex-start;
}

.juegazos{margin-bottom:26px}

/* El enlace es magenta por herencia; el nombre del juego tiene que
   leerse como texto, no como enlace suelto. */
.covera .claba-ficha-titulo{color:rgba(255,255,255,.92)}
.covera .claba-ficha-meta{color:var(--claba-suave)}
.covera:hover .claba-ficha-titulo,
.covera:focus-visible .claba-ficha-titulo{color:#fff}

/* El tubo de neón va en el canto de la balda, bajo las carátulas, no
   sobre el texto de la fila anterior. */
.shelf::after{top:auto;bottom:26px}

/* El texto de los desplegables se cortaba ("Todas las Desarrollado…"):
   el hueco de la flecha se comía el final de la etiqueta. */
.searchandfilter .uk-select:not([multiple]):not([size]),
.filtraje .uk-select:not([multiple]):not([size]){
	font-size:13px;
	text-overflow:ellipsis;
}

/* ------------------------------------------------------------------ *
 * Accesibilidad
 * ------------------------------------------------------------------ */

/* Presente para lectores de pantalla, invisible en pantalla. Se usa en
   las etiquetas de los filtros y en el <h1> de la portada. */
.claba-solo-lectores,
.claba-h1-oculto{
	position:absolute!important;
	width:1px;
	height:1px;
	margin:-1px;
	padding:0;
	border:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
}

/* Salto al contenido: oculto hasta que recibe el foco. Con un megamenú
   de medio centenar de enlaces, tabular la cabecera entera en cada
   página es media hora de trabajo al día para quien navega con teclado. */
.claba-saltar{
	position:absolute;
	left:-9999px;
	top:0;
	z-index:2147483647;
	padding:12px 20px;
	background:var(--claba-magenta);
	color:#fff;
	font-weight:700;
	text-decoration:none;
	border-radius:0 0 8px 0;
}

.claba-saltar:focus{left:0;color:#fff}

/* ------------------------------------------------------------------ *
 * Barra de estado del catálogo
 *
 * Monoespaciada, fina, entre la cabecera y el contenido. El cursor
 * parpadea; nada más se mueve. Si el sistema pide menos movimiento, el
 * bloque de prefers-reduced-motion de arriba lo deja fijo.
 * ------------------------------------------------------------------ */

.claba-barra{
	border-top:1px solid rgba(255,255,255,.07);
	border-bottom:1px solid rgba(255,255,255,.07);
	background:linear-gradient(180deg,rgba(8,9,30,.55),rgba(8,9,30,.30));
	backdrop-filter:blur(2px);
}

.claba-barra-interior{
	display:flex;
	align-items:center;
	gap:12px;
	max-width:1200px;
	margin:0 auto;
	padding:7px 20px;
	font-family:'Fira Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
	font-size:11.5px;
	letter-spacing:.04em;
	line-height:1;
	color:var(--claba-suave);
	white-space:nowrap;
	overflow-x:auto;
	scrollbar-width:none;
}

.claba-barra-interior::-webkit-scrollbar{display:none}

.claba-barra-marca{
	flex:none;
	padding:3px 7px;
	border-radius:3px;
	font-weight:700;
	letter-spacing:.16em;
	color:#0a0b18;
	background:linear-gradient(135deg,var(--claba-magenta),var(--claba-cian));
}

.claba-barra-campos{display:flex;align-items:center;gap:12px}

.claba-barra-sep{font-style:normal;color:rgba(255,255,255,.22)}

.claba-barra a{color:var(--claba-suave);text-decoration:none;transition:color var(--claba-t-estado) var(--claba-e-estado)}
.claba-barra a:hover{color:#fff}
.claba-barra b{color:var(--claba-oro);font-weight:700;font-variant-numeric:tabular-nums}
.claba-barra a:hover b{color:#fff}

.claba-barra-alta b{color:var(--claba-magenta-txt)}

/* El único elemento que parpadea en toda la página. */
.claba-barra-cursor{
	flex:none;
	width:7px;
	height:13px;
	margin-left:auto;
	background:var(--claba-cian);
	box-shadow:0 0 8px rgba(0,177,190,.8);
	animation:claba-cursor 1.1s steps(1) infinite;
}

@keyframes claba-cursor{0%,49%{opacity:1}50%,100%{opacity:0}}

@media (max-width:639px){
	.claba-barra-interior{font-size:10.5px;gap:9px;padding:6px 14px}
	.claba-barra-cursor{display:none}
}

/* El mismo degradado se usa en varias clases de botón del tema, no sólo
   en .uk-button-primary. Se corrige el extremo cian en todas: con blanco
   encima, #00b1be da 2,61:1 y #08757f da 5,44:1. */
a.podcastEnlace,
.uk-button.podcastEnlace,
.uk-button-primary,
.uk-button-primary:hover,
.uk-button-primary:focus{
	background-image:linear-gradient(135deg,var(--claba-magenta),#08757f)!important;
}

.uk-icon-button:hover,
.uk-icon-button:focus{
	background-image:linear-gradient(25deg,var(--claba-magenta),#08757f)!important;
	color:#fff!important;
}

/* ------------------------------------------------------------------ *
 * Remates de movimiento
 * ------------------------------------------------------------------ */

/* Dos capas del tema mantenían `will-change:filter` con un blur(20px)
   permanente: dos capas de GPU vivas todo el rato para un halo que no
   cambia nunca. En un portátil eso es ventilador; en un móvil, batería. */
div#module-106::before,
div.uk-panel.uk-width-1-1:has(#el-coder)::before{will-change:auto!important}

/* El cursor de la barra parpadeaba en bucle infinito, así que el
   compositor no llegaba a descansar nunca. 40 parpadeos son 44 segundos:
   de sobra para que se lea como terminal viva al entrar, que es cuando
   importa, y después la página se queda quieta. */
.claba-barra-cursor{animation:claba-cursor 1.1s steps(1) 40}

/* La carátula se refleja sobre la balda. Es lo que separa "listado" de
   "vitrina", y va con el tubo de neón que ya está encima. Sólo en las
   estanterías: en los relacionados y en la barra lateral no hay balda y
   el reflejo quedaría flotando. Se compone en GPU. Firefox no lo
   implementa y simplemente no lo pinta, que es una degradación limpia. */
.shelf .covera .game{
	-webkit-box-reflect:below 2px linear-gradient(transparent 72%,rgba(255,255,255,.16));
}

/* Un guiño para quien pasa el ratón por el logotipo. El tema traía dos
   keyframes de glitch sin usar, con la magenta de la casa dentro. El
   primero que probé anima `text-shadow`, que no se aplica a un <img>:
   no se veía nada. Este anima `box-shadow` y sí. Una sola pasada: en
   bucle sería una plantilla de 2016. */
.uk-logo:hover img{animation:tm-box-decoration-primary-glitch 200ms steps(4) 1}

@media (prefers-reduced-motion:reduce){
	.claba-barra-cursor{animation:none;opacity:.9}
	.uk-logo:hover img{animation:none}
}

/* ------------------------------------------------------------------ *
 * Correcciones de la segunda pasada
 * ------------------------------------------------------------------ */

/* Los títulos de dos líneas empujaban el meta sobre la balda: "A Vampyre
   Story" pisaba el estante y "Tom Clancy's Rainbow Six 3" se cortaba.
   Reservando la altura del pie, todas las tarjetas ocupan lo mismo. */
.claba-ficha-pie{min-height:46px}

/* Contraste del meta: el blanco al 48 % sobre el fondo morado da 3,95:1,
   y encima cae sobre una fotografía. Al 62 % sube a ~5,6:1. */
.claba-ficha-meta,
.claba-barra-interior{color:rgba(255,255,255,.62)}

/* El cursor se iba al borde derecho con `margin-left:auto` y parpadeaba a
   novecientos píxeles del texto: parecía un artefacto, no un terminal.
   Va detrás de lo último que se lee. */
.claba-barra-cursor{margin-left:2px}

/* La medida de línea se aplicó al párrafo pero no al panel: quedaban
   400 px de canal vacío a la derecha dentro de la caja. */
.single .uk-article{max-width:840px;margin-inline:auto}

@media (max-width:639px){
	/* La barra se cortaba en seco a media palabra. Por debajo de 640 se
	   queda con lo que de verdad importa: cuánto hay y qué es lo último. */
	.claba-barra-campos > span{display:none}
}



/* ------------------------------------------------------------------ *
 * La primera balda no espera a JavaScript
 *
 * `uk-scrollspy` deja sus objetivos en `visibility:hidden` hasta que
 * UIkit arranca y los revela. Al diferir uikit.min.js —bueno para el
 * TBT— esa ventana se ensancha, y en la primera balda, que está sobre
 * el pliegue y contiene el elemento que mide el LCP, se convierte en
 * una carrera: en una de cada dos cargas las cuatro carátulas salían
 * casi invisibles.
 *
 * El CSS no depende de JavaScript, así que basta con excluir la primera
 * balda de la animación. Las de abajo siguen entrando al hacer scroll,
 * que es donde el efecto aporta algo.
 * ------------------------------------------------------------------ */

.dalemas .shelf:first-of-type > div,
.shelfa > div:nth-child(-n+4){
	visibility:visible!important;
	animation:none!important;
	opacity:1!important;
}

/* La única transición `all` que quedaba viva en el CSS del tema. */
.uk-card-default a{
	transition:color var(--claba-t-estado) var(--claba-e-estado)!important;
}