/*
Theme Name: Eclipse Zone
Description: Tema de Eclipse Zone: juegos, noticias y mangas traducidos al español. Requiere el plugin Eclipse Zone Core.
Version: 0.6.0
Author: Eclipse Zone
Text Domain: eclipse-zone
Requires PHP: 7.4
*/

:root {
	/* Paleta Eclipse Zone: rosa (acción), púrpura (marca), azul (info) sobre casi negro */
	--pink: #ec4899;
	--pink-rgb: 236, 72, 153;
	--purple: #8b5cf6;
	--purple-rgb: 139, 92, 246;
	--blue: #5865f2;
	--blue-rgb: 88, 101, 242;
	--primary: var(--pink);
	--primary-rgb: var(--pink-rgb);
	--primary-2: #db2777;
	--grad: linear-gradient(90deg, #ec4899, #8b5cf6 55%, #5865f2);
	--bg: #0d0b14;
	--bg-2: #15121f;
	--card: #17131f;
	--card-2: #1d1828;
	--text: #efeaff;
	--muted: #a99fc4;
	--border: #2c2540;
	--ok: #22c55e;
	--gold: #f5b301;
	--radius: 4px;
	--cut: 12px; /* esquina cortada en diagonal */
	--font: "Chakra Petch", system-ui, sans-serif;
	--font-display: "Orbitron", "Chakra Petch", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font: 500 16px/1.55 var(--font);
	color: var(--text);
	background:
		radial-gradient(900px 500px at 10% -10%, rgba(var(--purple-rgb), .18), transparent 60%),
		radial-gradient(800px 500px at 100% 0%, rgba(var(--pink-rgb), .12), transparent 60%),
		radial-gradient(900px 600px at 50% 110%, rgba(var(--blue-rgb), .14), transparent 60%),
		var(--bg);
	background-attachment: fixed;
	min-height: 100vh;
}
a { color: var(--muted); text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
h2 { font-size: 1.3rem; }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.wrap { max-width: 1500px; margin: 0 auto; padding: 0 16px; }
.site-main { padding: 24px 0 64px; }

/* ── Cabecera ───────────────────────────────────────────── */
.site-header {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50;
	background: rgba(11, 12, 16, .88);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.brand img { width: 36px; height: 36px; border-radius: 50%; }
.main-nav { display: flex; gap: 4px; margin-left: 8px; }
.main-nav a { padding: 8px 12px; border-radius: 8px; font-weight: 600; color: var(--muted); }
.main-nav a:hover, .main-nav .current { background: rgba(var(--primary-rgb), .18); color: #fff; }
.header-search { margin-left: auto; display: flex; }
.header-search input {
	width: 220px; padding: 9px 14px; border-radius: 999px;
	border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font: inherit;
}
.header-user { white-space: nowrap; font-weight: 600; }

@media (max-width: 760px) {
	.site-header .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
	.main-nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
	.header-search { flex: 1; }
	.header-search input { width: 100%; }
	.header-user { display: none; }
}

/* ── Bloques ────────────────────────────────────────────── */
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.section { margin-bottom: 40px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head a { font-weight: 600; white-space: nowrap; }
.hero { padding: 36px 0 20px; }
.hero p { color: var(--muted); max-width: 640px; margin: 0; }
.archive-head { margin-bottom: 20px; }
.archive-head p { color: var(--muted); margin: 0; }

/* ── Tarjetas ───────────────────────────────────────────── */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.grid--news { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
	position: relative; display: flex; flex-direction: column;
	background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
	overflow: hidden; transition: transform .15s, border-color .15s;
}
.card:hover { transform: translateY(-3px); border-color: rgba(var(--primary-rgb), .55); }
.card__img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; background: var(--bg-2); }
.card--manga .card__img { aspect-ratio: 2 / 3; }
.card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card__title { color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.card__title::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta es clicable */
.card__meta { color: var(--muted); font-size: .8rem; }
.card__badge {
	position: absolute; top: 8px; left: 8px; z-index: 1;
	background: rgba(0, 0, 0, .7); color: #fff; font-size: .72rem; font-weight: 700;
	padding: 3px 8px; border-radius: 6px;
}
.card__fav { position: absolute; top: 8px; right: 8px; z-index: 1; color: #fbbf24; font-size: 1.1rem; text-shadow: 0 1px 3px #000; }
.card__progress { height: 4px; background: rgba(255, 255, 255, .1); }
.card__progress span { display: block; height: 100%; background: var(--primary); }
.card__progress--done span { background: var(--ok); }

/* ── Etiquetas y botones ────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.chips a {
	display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .82rem;
	background: rgba(var(--primary-rgb), .16); border: 1px solid rgba(var(--primary-rgb), .35); color: var(--text);
}
.chips a:hover { background: var(--primary); }
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 18px; border-radius: 10px; border: 0; cursor: pointer;
	background: var(--primary); color: #fff; font: 600 .95rem/1.2 inherit;
}
.btn:hover { background: var(--primary-2); color: #fff; }
.btn--ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn--ghost:hover { background: rgba(255, 255, 255, .06); }
.btn[aria-pressed="true"] { background: #fbbf24; color: #111; }

/* ── Paginación ─────────────────────────────────────────── */
.pagination { margin-top: 32px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pagination .page-numbers {
	min-width: 40px; padding: 8px 12px; text-align: center; border-radius: 8px;
	background: var(--card); border: 1px solid var(--border); color: var(--text); font-weight: 600;
}
.pagination .page-numbers.current, .pagination a.page-numbers:hover { background: var(--primary); color: #fff; }

/* ── Ficha de juego ─────────────────────────────────────── */
.game { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@media (max-width: 900px) { .game { grid-template-columns: 1fr; } }
.game__cover { border-radius: var(--radius); width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 20px; }
.game__content { color: var(--text); }
.game__content p { margin: 0 0 1em; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0 0 16px; }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; }
.downloads { display: flex; flex-direction: column; gap: 8px; }
.shots { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.shots img { border-radius: 8px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.breadcrumbs { font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
.breadcrumbs a { color: var(--muted); }

/* ── Noticias ───────────────────────────────────────────── */
.entry { max-width: 780px; }
.entry__meta { color: var(--muted); font-size: .9rem; margin-bottom: 18px; }
.entry__content img { border-radius: 8px; margin: 1em 0; }

/* ── Mangas: ficha y lector ─────────────────────────────── */
.manga-head { display: grid; grid-template-columns: 220px 1fr; gap: 24px; margin-bottom: 28px; }
@media (max-width: 640px) { .manga-head { grid-template-columns: 1fr; } .manga-head img { max-width: 220px; } }
.manga-head img { border-radius: var(--radius); aspect-ratio: 2 / 3; object-fit: cover; width: 100%; }
.manga-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chapters { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.chapters a {
	display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px;
	background: var(--card); border: 1px solid var(--border); color: var(--text);
}
.chapters a:hover { border-color: var(--primary); }
.chapters .is-read { opacity: .55; }
.chapters small { color: var(--muted); }

.reader-bar {
	position: sticky; top: 64px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	padding: 10px 12px; margin-bottom: 16px; border-radius: var(--radius);
	background: rgba(11, 12, 16, .92); border: 1px solid var(--border);
}
.reader-bar .count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.reader { display: flex; flex-direction: column; align-items: center; gap: 0; }
.reader img { width: 100%; max-width: 900px; background: #0b0c10; }
.reader--page img { display: none; max-height: calc(100vh - 150px); width: auto; cursor: pointer; }
.reader--page img.is-current { display: block; }
.reader-end { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }

/* ── Pie ────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); padding: 28px 0; color: var(--muted); font-size: .9rem; background: rgba(11, 12, 16, .6); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }

/* ═══ v0.2: carrusel, top, tarjeta desplegable, votos, franja ═══ */

/* ── Franja de Discord ──────────────────────────────────── */
.strip { background: linear-gradient(90deg, rgba(var(--primary-rgb), .25), rgba(var(--primary-rgb), .08)); border-bottom: 1px solid var(--border); font-size: .9rem; }
.strip .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; position: relative; padding-right: 44px; }
.btn--discord { padding: 6px 14px; font-size: .85rem; background: var(--blue); clip-path: none; }
.strip__close { position: absolute; right: 12px; background: none; border: 0; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 6px; }
.strip__close:hover { color: #fff; }

/* ── Etiquetas sobre imágenes ───────────────────────────── */
.tag { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: .72rem; font-weight: 700; line-height: 1.3; color: #fff; background: rgba(0, 0, 0, .72); white-space: nowrap; }
.tag--motor { background: var(--purple); }
.tag--ren-py, .tag--renpy { background: #8b5cf6; }
.tag--unity { background: #ea6a1f; }
.tag--rpg-maker { background: #16a34a; }
.tag--godot { background: #2f7dd1; }
.tag--unreal-engine { background: #475569; }
.tag--html { background: #ca8a04; }
.tag--estado { background: #2563eb; }
.tag--version { background: rgba(0, 0, 0, .75); border: 1px solid rgba(255, 255, 255, .15); }

/* ── Tarjeta de juego ───────────────────────────────────── */
.grid--games { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; align-items: start; }
.gcard { position: relative; }
.gcard__main {
	display: flex; flex-direction: column; height: 100%;
	background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
	overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.gcard__top { display: flex; align-items: center; justify-content: center; position: relative; padding: 6px 36px; font-size: .78rem; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--border); }
.gcard__trad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard__flag { position: absolute; right: 8px; font-size: .9rem; }
.gcard__media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-2); overflow: hidden; }
.gcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gcard__media .tag--motor { position: absolute; left: 8px; bottom: 8px; }
.gcard__badges { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; }
.gcard__body { padding: 12px 14px 4px; flex: 1; }
.gcard__title { display: block; color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.3; margin-bottom: 8px; }
.gcard__title::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* toda la tarjeta es clicable */
.gcard__desc { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gcard__stats { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 12px; font-size: .78rem; color: var(--muted); }
.gcard__nums { display: flex; gap: 10px; }
.stat { white-space: nowrap; }
.stat--rating span { color: #fbbf24; }
.stat small { opacity: .7; }

/* Al pasar el mouse: se despliega desarrollador + géneros debajo, por encima de la fila siguiente. */
.gcard__extra {
	display: none; position: absolute; left: 0; right: 0; top: calc(100% - 10px); z-index: 5;
	padding: 18px 14px 14px; background: var(--card-2); border: 1px solid rgba(var(--primary-rgb), .6); border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 18px 30px rgba(0, 0, 0, .45);
}
.gcard__dev { margin: 0 0 10px; font-weight: 700; font-size: .88rem; }
.gcard__extra .chips { position: relative; z-index: 2; }
.gcard__extra .chips a { border-radius: 6px; font-size: .76rem; }
@media (hover: hover) {
	.gcard:hover, .gcard:focus-within { z-index: 6; }
	.gcard:hover .gcard__main, .gcard:focus-within .gcard__main { border-color: rgba(var(--primary-rgb), .6); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
	.gcard:hover .gcard__extra, .gcard:focus-within .gcard__extra { display: block; }
	.gcard:hover .gcard__media img { transform: scale(1.04); }
	.gcard:hover .gcard__title { color: #c7ccff; }
}

/* ── Inicio: carrusel + top ─────────────────────────────── */
.home-top { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; margin-bottom: 40px; align-items: start; }
@media (max-width: 960px) { .home-top { grid-template-columns: minmax(0, 1fr); } }
.home-top__title { font-size: 1.05rem; margin: 0 0 10px; }
.home-top__title span { color: var(--primary); }

.carousel { position: relative; }
.carousel__track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	border-radius: var(--radius); border: 1px solid var(--border);
}
.carousel__track::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 7; min-height: 280px; background: var(--bg-2); overflow: hidden; }
.slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 12, 16, .95) 0%, rgba(11, 12, 16, .7) 45%, rgba(11, 12, 16, .1) 100%); }
.slide__rank { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, .65); font-weight: 800; }
.slide__info { position: absolute; z-index: 2; left: 56px; right: 56px; bottom: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.slide__title { color: #fff; font-size: clamp(1.4rem, 3.4vw, 2.3rem); font-weight: 800; line-height: 1.1; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.slide__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; font-size: .8rem; }
.slide__facts div { display: flex; align-items: center; gap: 6px; }
.slide__facts dt { color: var(--muted); text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; }
.slide__facts dd { margin: 0; padding: 3px 8px; border-radius: 6px; background: rgba(var(--primary-rgb), .22); border: 1px solid rgba(var(--primary-rgb), .4); font-weight: 600; }
.carousel__btn {
	position: absolute; top: calc(50% + 14px); transform: translateY(-50%); z-index: 3;
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
	background: rgba(11, 12, 16, .8); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.carousel__btn:hover { background: var(--primary); }
.carousel__btn--prev { left: 10px; }
.carousel__btn--next { right: 10px; }
.carousel__dots { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 6px; }
.carousel__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .35); cursor: pointer; transition: width .2s; }
.carousel__dots button[aria-current="true"] { width: 24px; background: var(--primary); }
@media (max-width: 640px) {
	.slide { aspect-ratio: auto; min-height: 300px; }
	.slide__info { left: 16px; right: 16px; }
	.carousel__btn { display: none; }
}

.top { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.top__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.top__tabs button { padding: 7px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); font: 600 .82rem/1 inherit; cursor: pointer; }
.top__tabs button[aria-selected="true"] { background: rgba(var(--primary-rgb), .25); border-color: var(--primary); color: #fff; }
.top__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.top__item { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; }
.top__item:hover { background: rgba(255, 255, 255, .04); }
.top__rank { position: absolute; top: 2px; left: 2px; z-index: 1; min-width: 18px; height: 18px; border-radius: 5px; background: var(--primary); font-size: .7rem; font-weight: 800; display: grid; place-items: center; }
.top__thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.top__name { display: block; color: #fff; font-weight: 700; font-size: .88rem; line-height: 1.25; }
.top__name::after { content: ""; position: absolute; inset: 0; }
.top__meta { display: flex; gap: 10px; font-size: .75rem; color: var(--muted); margin-top: 3px; }
.top__list[hidden] { display: none; }
.top__empty { color: var(--muted); font-size: .85rem; padding: 10px 4px; }

/* ── Votos en la ficha ──────────────────────────────────── */
.vote { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.vote__stars { display: flex; gap: 2px; }
.vote__stars button { background: none; border: 0; padding: 0 2px; font-size: 1.6rem; line-height: 1; color: rgba(255, 255, 255, .22); cursor: pointer; transition: color .1s, transform .1s; }
.vote__stars button[aria-pressed="true"] { color: #fbbf24; }
.vote__stars:hover button { color: #fbbf24; }
.vote__stars button:hover ~ button { color: rgba(255, 255, 255, .22); }
.vote__stars button:hover { transform: scale(1.15); }
.vote__result, .vote__views { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }

/* ═══ Estética (v0.3): estilo "gamer" con esquinas cortadas, en rosa/púrpura/azul ═══ */

::selection { background: rgba(var(--pink-rgb), .45); color: #fff; }
h1, h2, .home-top__title, .section-head h2, .brand { font-family: var(--font-display); letter-spacing: .02em; }
h1 { font-weight: 800; }
h2 { font-weight: 700; font-size: 1.15rem; }
a:hover { color: var(--pink); }

/* Cabecera: logo · buscador | menú en cápsula | Entrar */
.site-header { background: rgba(13, 11, 20, .9); border-bottom: 1px solid var(--border); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--grad); opacity: .7; }
/* Logo de texto con brillo que recorre las letras (mismo efecto que Eclipse Main:
   degradado de 250% que se desplaza, 3.5 s en bucle), en rosa → púrpura → azul. */
.brand {
	font-size: 1.2rem; font-weight: 800; letter-spacing: .5px;
	background: linear-gradient(90deg, #ec4899, #8b5cf6, #5865f2, #60a5fa, #ec4899);
	background-size: 250% auto; background-position: 0% center;
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand:hover { color: transparent; }
@media (prefers-reduced-motion: no-preference) {
	.brand { animation: shimmerText 3.5s linear infinite; }
}
@keyframes shimmerText {
	0%   { background-position: 0% center; }
	100% { background-position: 250% center; }
}
.main-nav { margin: 0 auto; padding: 4px; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); }
.main-nav a { border-radius: 3px; border: 1px solid transparent; font-size: .92rem; color: var(--muted); }
.main-nav a:nth-child(2) { color: #93a0ff; }
.main-nav a:nth-child(3) { color: #a5b4fc; }
.main-nav a:nth-child(4) { color: #c4a8ff; }
.main-nav a:nth-child(5) { color: #d8b4fe; }
.main-nav a:nth-child(6) { color: #f9a8d4; }
.main-nav a:nth-child(7) { color: #fcd34d; }
.main-nav a:hover { background: rgba(var(--pink-rgb), .08); }
.main-nav .current { background: rgba(var(--pink-rgb), .14); border-color: rgba(var(--pink-rgb), .6); color: #fff; box-shadow: 0 0 14px rgba(var(--pink-rgb), .25) inset; }
.header-search { margin-left: 0; }
.header-search input { border-radius: var(--radius); width: 200px; }
.header-search input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(var(--purple-rgb), .25); }
.header-user a { display: inline-block; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); font-size: .9rem; }
.header-user a:hover { border-color: var(--pink); color: #fff; }
@media (max-width: 760px) { .main-nav { margin: 0; } }

/* Botones */
.btn { border-radius: var(--radius); background: var(--grad); background-size: 140% 100%; transition: background-position .3s, box-shadow .2s; font-family: var(--font); letter-spacing: .02em; }
.btn:hover { background: var(--grad); background-position: 100% 0; box-shadow: 0 0 18px rgba(var(--pink-rgb), .35); }
.btn--ghost { background: var(--bg-2); border: 1px solid var(--border); }
.btn--ghost:hover { background: var(--bg-2); border-color: var(--pink); box-shadow: none; }
.btn[aria-pressed="true"] { background: var(--gold); color: #1a1300; }

/* Franja */
.strip { background: linear-gradient(90deg, rgba(var(--pink-rgb), .14), rgba(var(--purple-rgb), .14), rgba(var(--blue-rgb), .14)); }

/* Títulos de sección: barra con ícono y esquina cortada */
.home-top__title, .section-head {
	display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px;
	background: var(--card); border: 1px solid var(--border);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.section-head h2 { margin: 0; }
.section-head h2::before, .home-top__title span {
	display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; vertical-align: middle;
	border: 1px solid rgba(var(--pink-rgb), .5); background: rgba(var(--pink-rgb), .12); color: var(--pink); font-size: .8rem;
}
.section-head h2::before { content: "▸"; }
.section-head a { font-size: .85rem; color: var(--pink); }

/* Carrusel y top */
.carousel__track { border-radius: 0; border-color: var(--border); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.slide::after { background: linear-gradient(90deg, rgba(13, 11, 20, .96) 0%, rgba(13, 11, 20, .72) 45%, rgba(13, 11, 20, .1) 100%); }
.slide::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: var(--grad); }
.slide__title { font-family: var(--font-display); }
.slide__facts dd { border-radius: 3px; background: rgba(var(--purple-rgb), .18); border-color: rgba(var(--purple-rgb), .45); }
.slide__rank { border: 1px solid rgba(var(--pink-rgb), .6); color: var(--pink); font-family: var(--font-display); }
.carousel__btn { border-radius: var(--radius); }
.carousel__btn:hover { background: var(--pink); }
.carousel__dots button[aria-current="true"] { background: var(--grad); }
.top { border-radius: 0; background: var(--card); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.top .home-top__title { clip-path: none; border: 0; padding: 0; background: none; }
.top__tabs button { border-radius: 3px; }
.top__tabs button[aria-selected="true"] { background: rgba(var(--pink-rgb), .14); border-color: var(--pink); }
.top__rank { border-radius: 2px; background: var(--grad); }
.top__thumb { border-radius: 2px; }

/* Tarjetas de juego */
.gcard__main {
	border-radius: 0; background: var(--card);
	clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.gcard__top { background: var(--card-2); font-family: var(--font-display); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #c4b5fd; }
.gcard__title { font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; }
.gcard__stats { border-top: 1px solid var(--border); margin-top: 8px; }
.stat--rating span { color: var(--gold); }
.tag { border-radius: 3px; font-family: var(--font); letter-spacing: .02em; }
.gcard__extra { border-radius: 0; border-color: rgba(var(--pink-rgb), .55); }
.gcard__extra .chips a { border-radius: 3px; background: rgba(var(--pink-rgb), .12); border-color: rgba(var(--pink-rgb), .4); }
@media (hover: hover) {
	.gcard:hover .gcard__main { border-color: rgba(var(--pink-rgb), .6); box-shadow: 0 0 0 1px rgba(var(--pink-rgb), .35); }
	.gcard:hover .gcard__title { color: #f9a8d4; }
}

/* Otras tarjetas, chips, paneles */
.card, .panel, .chapters a, .reader-bar { border-radius: 0; }
.card { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.card:hover { border-color: rgba(var(--pink-rgb), .6); }
.panel { background: var(--card); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.chips a { border-radius: 3px; background: rgba(var(--purple-rgb), .14); border-color: rgba(var(--purple-rgb), .4); }
.chips a:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.facts dt { color: #c4b5fd; }
.game__cover, .shots img, .manga-head img { border-radius: 0; }
.card__progress span { background: var(--grad); }

/* Paginación en cuadrados, como ‹ 1 2 3 … 5 › */
.pagination .page-numbers { min-width: 38px; border-radius: 0; background: var(--card); font-family: var(--font-display); font-size: .85rem; }
.pagination .page-numbers.current { background: rgba(var(--pink-rgb), .16); border-color: var(--pink); color: #fff; }
.pagination a.page-numbers:hover { background: var(--grad); border-color: transparent; }

/* Pie */
.site-footer { background: #09080e; border-top: 1px solid var(--border); position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--grad); opacity: .6; }

/* ═══ v0.4: tarjetas de mangas y noticias, reacciones, comentarios, traductores ═══ */

/* Traductor con su color */
.trad { color: var(--c, #c4b5fd); }
.gcard__top .trad { text-shadow: 0 0 10px color-mix(in srgb, var(--c, #c4b5fd) 45%, transparent); }

/* Tarjetas de manga: portada vertical */
.grid--manga { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 16px; align-items: start; }
.mcard .gcard__media { aspect-ratio: 2 / 3; }
.mcard .gcard__body { padding: 10px 12px 2px; }
.mcard .gcard__title { font-size: .92rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard .gcard__stats { padding: 8px 12px 10px; margin-top: 6px; }
.tag--manga { position: absolute; left: 8px; top: 8px; background: rgba(var(--pink-rgb), .85); }
.mcard .card__progress { position: absolute; left: 0; right: 0; bottom: 0; }

/* Tarjetas de noticia */
.grid--news { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.tag--news { position: absolute; left: 8px; bottom: 8px; background: rgba(var(--blue-rgb), .9); }
.ncard .gcard__desc { -webkit-line-clamp: 3; }

/* Reacciones */
.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0; }
.reactions button {
	display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px;
	border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text);
	font: 600 .9rem/1 var(--font); cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
}
.reactions button span { font-size: 1.1rem; }
.reactions button b:empty { display: none; }
.reactions button:hover { border-color: rgba(var(--purple-rgb), .7); transform: translateY(-1px); }
.reactions button[aria-pressed="true"] { border-color: var(--pink); background: rgba(var(--pink-rgb), .16); }

/* Comentarios */
.comments { margin-top: 48px; max-width: 820px; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { margin-left: 28px; padding-left: 14px; border-left: 2px solid rgba(var(--purple-rgb), .35); }
.comment__body { margin-bottom: 12px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.comment__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment__avatar { border-radius: 2px; }
.comment__author { font-weight: 700; color: #fff; }
.bypostauthor > .comment__body .comment__author::after { content: "Eclipse Zone"; margin-left: 8px; padding: 2px 6px; font-size: .68rem; background: var(--grad); border-radius: 2px; vertical-align: middle; }
.comment__date { margin-left: auto; color: var(--muted); font-size: .8rem; }
.comment__text p { margin: 0 0 .6em; }
.comment__pending { color: var(--gold); font-size: .85rem; margin: 0 0 6px; }
.comment__reply a { font-size: .82rem; color: var(--pink); }
.comment-respond { margin-top: 18px; }
.comment-reply-title { font-family: var(--font-display); font-size: 1rem; }
.comment-reply-title small { margin-left: 10px; font-family: var(--font); font-size: .8rem; }
.comment-form textarea {
	width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--bg-2); color: var(--text); font: 500 .95rem/1.5 var(--font); resize: vertical;
}
.comment-form textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(var(--purple-rgb), .25); }
.comment-form .form-submit { margin: 10px 0 0; }
.comments__closed { color: var(--muted); }

/* ═══ v0.5: descargas, Patreon, filtros, Tops, Tags ═══ */

.main-nav { overflow-x: auto; scrollbar-width: none; }
.main-nav a { white-space: nowrap; padding: 8px 10px; font-size: .88rem; }
.header-search input { width: 170px; }
@media (max-width: 1180px) { .header-search input { width: 130px; } }

.notice { padding: 10px 14px; margin: 0 0 18px; border: 1px solid var(--border); background: var(--card); }
.notice--ok { border-color: var(--ok); }
.notice--warn { border-color: var(--gold); }
.notice--info { border-color: var(--purple); }

/* Botones de descarga y Patreon */
.dl-title { margin-top: 22px; font-size: 1.05rem; }
.btn--download { width: 100%; padding: 14px; font-size: 1.05rem; font-family: var(--font-display); letter-spacing: .04em; }
.btn--patreon { background: linear-gradient(90deg, #f96854, #ec4899); }
.btn--patreon:hover { background: linear-gradient(90deg, #f96854, #ec4899); box-shadow: 0 0 18px rgba(249, 104, 84, .4); }
.dl-note { margin: 8px 0 0; font-size: .85rem; color: var(--gold); }

.dl-lock { padding: 16px; border: 1px solid rgba(var(--pink-rgb), .5); background: rgba(var(--pink-rgb), .08); text-align: center; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.dl-lock__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; color: #f9a8d4; }
.dl-lock p { font-size: .9rem; }
.dl-lock .btn { width: 100%; }
.dl-lock__more { display: inline-block; margin-top: 10px; font-size: .85rem; color: var(--pink); }

/* Ventana */
.dl-dialog {
	width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
	border: 1px solid rgba(var(--pink-rgb), .55); background: var(--bg-2); color: var(--text);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 40px rgba(var(--purple-rgb), .25);
	clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.dl-dialog::backdrop { background: rgba(5, 4, 10, .78); backdrop-filter: blur(3px); }
.dl-dialog[open] { animation: dl-in .18s ease-out; }
@keyframes dl-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .dl-dialog[open] { animation: none; } }
.dl-dialog__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--card); position: relative; }
.dl-dialog__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); }
.dl-dialog__head h2 { margin: 0; font-size: 1rem; flex: 1; }
.dl-dialog__close { background: none; border: 1px solid var(--border); color: var(--muted); width: 32px; height: 32px; cursor: pointer; font-size: .9rem; }
.dl-dialog__close:hover { border-color: var(--pink); color: #fff; }
.dl-dialog__body { padding: 16px 18px 18px; overflow-y: auto; max-height: calc(100vh - 140px); }
.dl-group { margin-bottom: 16px; }
.dl-group__title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; font: 700 .95rem var(--font); }
.dl-group__title small { color: var(--muted); font-weight: 500; font-size: .78rem; }
.dl-list { display: flex; flex-direction: column; gap: 8px; }
.dl-link {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px;
	background: var(--card); border: 1px solid var(--border); color: #fff; font-weight: 600;
	transition: border-color .15s, background .15s;
}
.dl-link:hover { border-color: var(--purple); background: rgba(var(--purple-rgb), .12); color: #fff; }
.dl-link small { color: var(--muted); font-weight: 500; }
.dl-badge { flex: none; padding: 2px 8px; font-size: .72rem; font-weight: 700; color: #fca5a5; border: 1px solid rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .1); }
.dl-badge--direct { color: #1a1300; background: var(--gold); border-color: var(--gold); }

/* Zona amarilla: descarga sin acortador */
.dl-direct {
	margin: 4px 0 14px; padding: 14px; border: 1px solid rgba(245, 179, 1, .6);
	background: linear-gradient(135deg, rgba(245, 179, 1, .16), rgba(245, 179, 1, .05));
}
.dl-direct__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; color: var(--gold); }
.dl-direct p { margin: 0 0 10px; font-size: .88rem; color: #f5e6b8; }
.dl-direct .btn--patreon { margin-right: 10px; }
.dl-direct .dl-lock__more { color: var(--gold); }
.dl-link--direct { border-color: rgba(245, 179, 1, .5); }
.dl-link--direct:hover { border-color: var(--gold); background: rgba(245, 179, 1, .12); }
.dl-warn { margin: 0; font-size: .78rem; color: var(--muted); }

.tag--excl { position: absolute; top: 8px; left: 8px; background: rgba(var(--pink-rgb), .9); }

/* Filtros del catálogo */
.filters {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 18px; padding: 14px;
	background: var(--card); border: 1px solid var(--border);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.filters__q { flex: 1 1 220px; }
.filters input, .filters select {
	height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--bg-2); color: var(--text); font: 500 .9rem var(--font);
}
.filters input:focus, .filters select:focus { outline: none; border-color: var(--purple); }
.filters__field { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.filters__field select { min-width: 130px; max-width: 190px; }
.filters .btn { height: 40px; }
.filters__clear { align-self: center; font-size: .85rem; color: var(--pink); }
.filters__count { margin: -6px 0 16px; color: var(--muted); font-size: .9rem; }
@media (max-width: 640px) { .filters__field { flex: 1 1 45%; } .filters__field select { max-width: none; width: 100%; } }

/* Tags */
.tags-search {
	width: 100%; max-width: 420px; height: 42px; margin-bottom: 22px; padding: 0 14px;
	border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); color: var(--text); font: 500 .95rem var(--font);
}
.tags-group__n { color: var(--muted); font-size: .85rem; margin-left: auto; }
.chips--big a { padding: 6px 12px; font-size: .88rem; }
.chips--big a small { margin-left: 4px; color: var(--muted); }
.chips a.trad { color: var(--c); }

/* Tops */
.tops { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .tops { grid-template-columns: 1fr; } }
.tops .top__tabs { grid-template-columns: repeat(4, 1fr); }
.tops .top__tabs a { padding: 8px; text-align: center; border: 1px solid var(--border); color: var(--muted); font-weight: 600; font-size: .85rem; }
.tops .top__tabs a[aria-current="page"] { background: rgba(var(--pink-rgb), .14); border-color: var(--pink); color: #fff; }
.tops__note { color: var(--muted); font-size: .82rem; margin: -6px 0 12px; }
.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rank { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; background: var(--card); border: 1px solid var(--border); }
.rank:hover { border-color: rgba(var(--pink-rgb), .55); }
.rank__n { width: 32px; flex: none; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--muted); }
.rank:nth-child(1) .rank__n { color: var(--gold); }
.rank:nth-child(2) .rank__n { color: #e5e7eb; }
.rank:nth-child(3) .rank__n { color: #f59e0b; }
.rank__img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; flex: none; }
.rank__body { min-width: 0; flex: 1; }
.rank__title { display: block; color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__title::after { content: ""; position: absolute; inset: 0; }
.rank__meta { font-size: .78rem; }
.rank__stat { flex: none; font-weight: 700; font-size: .9rem; }

/* Membresía */
.member-hero { padding: 40px 28px; margin-bottom: 24px; text-align: center; background: radial-gradient(600px 220px at 50% 0, rgba(var(--pink-rgb), .22), transparent 70%), var(--card); border: 1px solid var(--border); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.member-hero__kicker { margin: 0 0 6px; color: var(--pink); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.member-hero h1 { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.member-hero > p { color: var(--muted); max-width: 520px; margin: 0 auto 18px; }
.member-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0; }
.patreon-box { margin-bottom: 32px; }
.patreon-box .member-actions { justify-content: flex-start; }
.member-status--ok { color: var(--ok); font-weight: 700; }
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 32px; }
.perk { padding: 20px; background: var(--card); border: 1px solid var(--border); }
.perk__icon { font-size: 1.6rem; }
.perk h2 { margin: 10px 0 6px; font-size: 1rem; }
.perk p { margin: 0; color: var(--muted); font-size: .9rem; }
.faq details { padding: 12px 16px; margin-bottom: 8px; background: var(--card); border: 1px solid var(--border); }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 10px 0 0; color: var(--muted); }

.game__intro { margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--pink); background: rgba(var(--pink-rgb), .06); color: var(--text); }
.game__intro strong { color: #fff; }

/* ═══ v0.6: lector completo, catálogo de mangas, biblioteca, Ctrl+K ═══ */

/* Barra de progreso de lectura */
.rd-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; background: transparent; pointer-events: none; }
.rd-progress span { display: block; height: 100%; width: 0; background: var(--grad); transition: width .15s linear; }

.rd-title { font-size: clamp(1.1rem, 3vw, 1.6rem); margin-bottom: 10px; }
.rd-bar {
	position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 64px); z-index: 40;
	display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 6px 8px; margin-bottom: 10px;
	background: rgba(13, 11, 20, .94); border: 1px solid var(--border); backdrop-filter: blur(8px);
}
.rd-icon {
	display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px;
	background: transparent; border: 1px solid transparent; color: var(--text); font-size: 1.05rem; cursor: pointer;
}
.rd-icon:hover, .rd-icon[aria-expanded="true"] { border-color: var(--border); background: var(--card); color: #fff; }
.rd-icon[aria-pressed="true"] { color: var(--gold); }
.rd-count { padding: 0 6px; font-size: .88rem; color: var(--muted); white-space: nowrap; }
.rd-count b { color: #fff; }
.rd-spacer { flex: 1; }
.rd-time { font-size: .8rem; color: var(--muted); padding: 0 6px; white-space: nowrap; }
@media (max-width: 640px) { .rd-time { display: none; } .rd-bar { top: 0; } }

/* Ajustes */
.rd-settings {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; padding: 16px; margin-bottom: 12px;
	background: var(--card); border: 1px solid var(--border);
}
.rd-set { display: flex; flex-direction: column; gap: 6px; }
.rd-set__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rd-seg { display: flex; }
.rd-seg button {
	flex: 1; padding: 8px 6px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text);
	font: 600 .82rem var(--font); cursor: pointer; white-space: nowrap;
}
.rd-seg button + button { border-left: 0; }
.rd-seg button[aria-pressed="true"] { background: rgba(var(--pink-rgb), .16); border-color: var(--pink); color: #fff; }
.rd-settings select { height: 38px; padding: 0 10px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font: 600 .9rem var(--font); }
.rd-hint { grid-column: 1 / -1; margin: 0; font-size: .78rem; color: var(--muted); }

.rd-tip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border: 1px solid rgba(var(--purple-rgb), .5); background: rgba(var(--purple-rgb), .1); font-size: .9rem; }
.rd-tip span { flex: 1; min-width: 200px; }
.rd-tip .btn { padding: 6px 14px; }

/* Páginas: ancho y zoom */
.reader { position: relative; --rd-zoom: 1; --rd-w: 900px; }
.reader[data-width="angosto"] { --rd-w: 640px; }
.reader[data-width="normal"] { --rd-w: 900px; }
.reader[data-width="completo"] { --rd-w: 100%; }
.rd-page { position: relative; margin: 0 auto; width: min(100%, calc(var(--rd-w) * var(--rd-zoom))); max-width: none; }
.reader[data-width="completo"] .rd-page { width: calc(100% * min(var(--rd-zoom), 1)); }
.rd-page img { width: 100%; max-width: none; display: block; background: #0b0c10; min-height: 120px; }
.rd-page.is-broken img { min-height: 260px; opacity: .15; }
.rd-fail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px; }
.rd-fail[hidden] { display: none; }

/* Paginado: una página a la vez y zonas para tocar */
.reader--page .rd-page { display: none; }
.reader--page .rd-page.is-current { display: block; }
.reader--page .rd-page img { display: block; cursor: default; width: auto; max-width: 100%; max-height: calc(100vh - 150px); margin: 0 auto; }
.reader--page .rd-page { width: min(100%, calc(var(--rd-w) * var(--rd-zoom))); }
.reader--page .rd-page img { max-height: calc((100vh - 150px) * var(--rd-zoom)); }
.rd-zone { display: none; }
.reader--page .rd-zone { display: block; position: absolute; top: 0; bottom: 0; width: 35%; z-index: 2; background: none; border: 0; cursor: pointer; }
.reader--page .rd-zone--prev { left: 0; cursor: w-resize; }
.reader--page .rd-zone--next { right: 0; width: 65%; cursor: e-resize; }
.rd-pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 14px 0; }
.rd-pager[hidden] { display: none; }
body.rd-is-fullscreen .site-header, body.rd-is-fullscreen .strip, body.rd-is-fullscreen .breadcrumbs, body.rd-is-fullscreen .rd-title { display: none; }
body.rd-is-fullscreen .rd-bar { top: 0; }

/* Fin del capítulo */
.rd-end { max-width: 720px; margin: 36px auto 0; padding: 26px 20px; text-align: center; background: var(--card); border: 1px solid var(--border); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.rd-end__kicker { margin: 0; font-family: var(--font-display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); }
.rd-end h2 { margin: 6px 0 4px; }
.rd-end .reactions { justify-content: center; }
.rd-end__nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rd-end__next { font-size: 1.05rem; padding: 12px 22px; }
.rd-support { margin-top: 20px; padding: 14px; border: 1px solid rgba(245, 179, 1, .5); background: rgba(245, 179, 1, .08); }
.rd-support p { margin: 0 0 10px; color: #f5e6b8; }
.rd-report .filters__field { margin-bottom: 12px; }
.rd-report textarea, .rd-report input, .rd-report select { width: 100%; padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font: 500 .9rem var(--font); }
.rd-report__msg { min-height: 1.2em; color: var(--gold); font-size: .9rem; }

/* Serie: datos y biblioteca */
.facts--inline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; }
.facts--inline div { display: flex; gap: 6px; }
.lib { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.lib button { padding: 8px 12px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font: 600 .85rem var(--font); cursor: pointer; }
.lib button:hover { border-color: var(--purple); }
.lib button[aria-pressed="true"] { border-color: var(--pink); background: rgba(var(--pink-rgb), .16); color: #fff; }
.lib-title { margin: 18px 0 10px; font-size: 1rem; }
.lib-title small { color: var(--muted); font-weight: 500; }

/* Catálogo */
.catalog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.catalog-head__n { color: var(--muted); font-weight: 600; }
.tag--tipo { position: absolute; right: 8px; top: 8px; z-index: 1; background: rgba(var(--blue-rgb), .9); }
.tag--manhwa { background: rgba(34, 197, 94, .9); }
.tag--manhua { background: rgba(245, 158, 11, .9); }
.tag--one-shot { background: rgba(var(--purple-rgb), .9); }
.mcard .gcard__main { position: relative; }

/* Búsqueda rápida (Ctrl+K) */
.qs { width: min(620px, calc(100vw - 32px)); margin: 12vh auto auto; padding: 0; border: 1px solid rgba(var(--purple-rgb), .5); background: var(--bg-2); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.qs::backdrop { background: rgba(5, 4, 10, .7); backdrop-filter: blur(3px); }
.qs__form { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.qs__form input { flex: 1; border: 0; background: none; color: #fff; font: 600 1.05rem var(--font); outline: none; }
.qs kbd { font: 600 .72rem var(--font); padding: 2px 6px; border: 1px solid var(--border); color: var(--muted); }
.qs__list { list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow-y: auto; }
.qs__list a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; color: var(--text); }
.qs__list a:hover, .qs__list a:focus { background: rgba(var(--pink-rgb), .12); outline: none; color: #fff; }
.qs__list img { width: 48px; height: 48px; object-fit: cover; flex: none; }
.qs__list span { flex: 1; font-weight: 600; }
.qs__list small { color: var(--muted); }
.qs__empty { margin: 0; padding: 16px; color: var(--muted); }

/* ═══ v0.7: lector con barras flotantes, ficha de serie y Top Lectores ═══ */

/* Barra superior: volver, zoom, favorito, ajustes */
.rd-zoom { width: auto; }
.rd-zoom button { flex: none; min-width: 34px; padding: 6px 10px; }

/* Barra lateral flotante */
.rd-rail {
	position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 45;
	display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px;
	background: rgba(13, 11, 20, .92); border: 1px solid var(--border); backdrop-filter: blur(8px);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.rd-rail__btn {
	display: inline-grid; place-items: center; width: 40px; height: 38px; position: relative;
	background: transparent; border: 1px solid transparent; color: var(--text); font-size: 1.1rem; cursor: pointer; text-decoration: none;
}
.rd-rail__btn:hover, .rd-rail__btn[aria-expanded="true"] { background: var(--card); border-color: var(--border); color: #fff; }
.rd-rail__btn[aria-pressed="true"] { color: var(--pink); }
.rd-rail__btn[hidden] { display: none; }
.rd-rail__pct { font: 700 .72rem var(--font); color: var(--muted); cursor: default; }
.rd-rail__pct:hover { background: transparent; border-color: transparent; color: var(--muted); }
.rd-rail__speed { font: 700 .72rem var(--font); }
.rd-rail__sep { width: 24px; height: 1px; margin: 3px 0; background: var(--border); }
.rd-react { position: absolute; right: calc(100% + 10px); top: 40px; width: max-content; max-width: 86vw; padding: 10px; background: var(--card); border: 1px solid var(--border); }
.rd-react[hidden] { display: none; }
.rd-react .reactions { margin: 0; flex-wrap: wrap; }

/* Barra inferior flotante */
.rd-dock {
	position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 45;
	display: flex; align-items: center; gap: 4px; padding: 6px;
	background: rgba(13, 11, 20, .94); border: 1px solid var(--border); backdrop-filter: blur(8px);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.rd-dock__btn { display: inline-grid; place-items: center; width: 40px; height: 36px; color: #fff; text-decoration: none; border: 1px solid transparent; font-size: 1.1rem; }
a.rd-dock__btn:hover { background: var(--card); border-color: var(--border); }
.rd-dock__btn.is-off { opacity: .3; }
.rd-dock__pos { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 36px; cursor: pointer; font-size: .85rem; font-weight: 700; color: #fff; white-space: nowrap; }
.rd-dock__pos:hover { background: var(--card); }
.rd-dock__pos select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.rd-dock__caret { color: var(--muted); }
.rd-dock__pos b { color: var(--pink); }
.rd-end { margin-bottom: 90px; }

/* Pantalla "Click para leer" */
.rd-intro {
	position: absolute; left: 0; right: 0; top: 0; z-index: 5; height: min(92vh, 900px);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	background: linear-gradient(180deg, rgba(11, 12, 16, .82), rgba(11, 12, 16, .72) 70%, rgba(11, 12, 16, 0));
	cursor: pointer;
}
.rd-intro[hidden] { display: none; }
.rd-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: rgba(23, 19, 31, .95); border: 1px solid var(--border); color: #fff; font: 700 .85rem var(--font); letter-spacing: .03em; text-transform: uppercase; border-radius: 999px; }
.rd-chip b { color: var(--pink); }
.rd-chip--cta { cursor: pointer; background: var(--grad); border-color: transparent; }
.rd-chip--cta:hover { box-shadow: 0 0 18px rgba(var(--pink-rgb), .4); }

@media (max-width: 640px) {
	.rd-rail { right: 4px; padding: 4px 2px; }
	.rd-rail__btn { width: 34px; height: 32px; font-size: 1rem; }
	.rd-dock { bottom: 8px; }
	.rd-dock__pos { padding: 0 8px; font-size: .78rem; }
}
@media (max-height: 720px) {
	.rd-rail__btn { height: 32px; }
	.rd-rail__sep { margin: 1px 0; }
}
body.rd-is-fullscreen .rd-bar { opacity: .0; transition: opacity .2s; }
body.rd-is-fullscreen .rd-bar:hover { opacity: 1; }

/* Serie: contadores y lista de capítulos */
.manga-stats { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 14px 0 0; }
.manga-stats li { padding: 6px 12px; background: var(--card); border: 1px solid var(--border); font-size: .85rem; color: var(--muted); }
.manga-stats b { color: #fff; font-size: 1rem; }
.chap-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.chap-tools__search { flex: 1; min-width: 0; height: 40px; padding: 0 12px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font: 500 .9rem var(--font); }
.chap-tools .btn { white-space: nowrap; }
.chapters li { display: flex; align-items: stretch; gap: 8px; }
.chapters li[hidden] { display: none; }
.chapters li > a { flex: 1; min-width: 0; align-items: center; }
.chap-check { flex: none; width: 40px; border: 1px solid var(--border); background: var(--bg-2); color: var(--pink); font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.chap-check:hover { border-color: var(--pink); }
.chapters .is-read .chap-check { background: rgba(var(--pink-rgb), .16); border-color: var(--pink); }

/* Top Lectores */
.rank-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rank__avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover; }
.rank--me { border-color: var(--pink); }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* Aviso de descarga (traductores + acortadores), como en Eclipse Main */
.dl-info { width: min(460px, calc(100vw - 32px)); }
.dl-info__card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--border); }
.dl-info__icon { font-size: 1.4rem; }
.dl-info__card small { display: block; color: var(--muted); font-size: .75rem; }
.dl-info__card strong { font-size: 1rem; }
.dl-info__warn { padding: 12px 14px; margin-bottom: 14px; border: 1px solid rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .08); }
.dl-info__warn[hidden] { display: none; }
.dl-info__warn strong { color: #fca5a5; }
.dl-info__warn p { margin: 4px 0 0; font-size: .85rem; color: var(--muted); }
.dl-info__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Descargas con pestañas (estilo MZGames) */
.dl-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.dl-tab { padding: 10px; background: var(--card); border: 1px solid var(--border); color: var(--muted); font: 700 .85rem var(--font); letter-spacing: .5px; cursor: pointer; }
.dl-tab[aria-selected="true"] { color: #fff; border-color: var(--pink); box-shadow: inset 0 -3px 0 var(--pink); background: rgba(var(--pink-rgb), .1); }
.dl-panel[hidden] { display: none; }
.dl-link { justify-content: flex-start; }
.dl-link__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: var(--bg); border: 1px solid var(--border); font-size: 1.1rem; }
.dl-link__txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dl-link__sub { font-size: .78rem; font-weight: 500; color: var(--muted); }

/* Galería */
.gallery__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gallery__tools { display: flex; gap: 6px; }
.gallery__tools button { width: 36px; height: 34px; background: var(--card); border: 1px solid var(--border); color: var(--muted); cursor: pointer; }
.gallery__tools button[aria-pressed="true"] { color: #fff; border-color: var(--pink); background: rgba(var(--pink-rgb), .12); }
.shots img { cursor: zoom-in; }
.shots--list { grid-template-columns: 1fr; }
.shots--list img { aspect-ratio: auto; object-fit: contain; }
@media (max-width: 600px) { .shots:not(.shots--list) { grid-template-columns: 1fr 1fr; } }
.viewer { border: 0; background: transparent; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: #fff; }
.viewer::backdrop { background: rgba(5, 4, 10, .92); }
.viewer img { position: absolute; inset: 0; margin: auto; max-width: 94vw; max-height: 86vh; }
.viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; font-size: 2rem; background: rgba(0, 0, 0, .5); border: 1px solid var(--border); color: #fff; cursor: pointer; z-index: 1; }
.viewer__nav--prev { left: 6px; }
.viewer__nav--next { right: 6px; }
.viewer__n { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: .85rem; color: var(--muted); }

/* Tarjeta del traductor */
.trad-card { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 12px; background: var(--card); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: #fff; }
.trad-card:hover { border-color: var(--c); color: #fff; }
.trad-card__avatar { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-weight: 800; font-size: 1.2rem; color: #fff; background: color-mix(in srgb, var(--c) 35%, #000); border: 2px solid var(--c); }
.trad-card__txt { display: flex; flex-direction: column; min-width: 0; }
.trad-card__txt small { color: var(--muted); }
.trad-card__role { color: var(--c); font-weight: 700; }

/* Aviso de cookies */
.cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; max-width: 560px; margin: 0 auto; padding: 16px; background: var(--bg-2); border: 1px solid rgba(var(--pink-rgb), .5); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.cookies[hidden], .cookies__prefs[hidden] { display: none; }
.cookies p { margin: 0 0 12px; font-size: .88rem; color: var(--text); }
.cookies__btns, .cookies__prefs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cookies__prefs { flex-direction: column; align-items: flex-start; font-size: .85rem; }
.cookies__btns .btn { flex: 1 1 auto; text-align: center; }

.pf { width: 22px; height: 22px; flex: none; }
.dl-tab { display: flex; align-items: center; justify-content: center; gap: 8px; }
.dl-link__ico { background: #0d0b14; }
.dl-link__ico .pf { width: 24px; height: 24px; }

/* Menú en el móvil: todo a la vista (sin scroll lateral), en filas */
@media (max-width: 760px) {
	.main-nav { overflow: visible; flex-wrap: wrap; justify-content: center; max-width: 100%; box-sizing: border-box; }
	.main-nav a { padding: 7px 9px; font-size: .84rem; }
}

/* Verificación de edad */
body.agegate-on { overflow: hidden; }
.agegate { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 4, 10, .96); backdrop-filter: blur(6px); }
.agegate[hidden] { display: none; }
.agegate__card { width: min(100%, 460px); background: var(--bg-2); border: 1px solid rgba(var(--pink-rgb), .55); box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 40px rgba(var(--purple-rgb), .25); }
.agegate__head { padding: 14px 18px; font: 700 .9rem var(--font); letter-spacing: 1px; text-transform: uppercase; border-bottom: 2px solid transparent; border-image: var(--grad) 1; background: var(--card); }
.agegate__body { padding: 22px 20px 24px; text-align: center; }
.agegate__body h2 { margin: 0 0 12px; font-size: 1.4rem; }
.agegate__body p { margin: 0 0 10px; color: var(--text); }
.agegate__sub { font-size: .88rem; color: var(--muted) !important; }
.agegate__btns { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.agegate__btns .btn { text-align: center; }

/* Artista del proyecto (DaniW) */
.artist__card { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--card); border: 1px solid var(--border); }
.artist__avatar { position: relative; flex: none; width: 84px; height: 84px; padding: 3px; border-radius: 50%; background: var(--grad); }
.artist__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--card); }
.artist__badge { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--bg-2); color: var(--pink); font-size: .8rem; }
.artist__info { min-width: 0; }
.artist__name { display: block; font-size: 1.15rem; }
.artist__role { display: block; margin: 2px 0 6px; font-size: .85rem; color: var(--muted); }
.artist__info p { margin: 0; font-size: .88rem; color: var(--muted); }
.artist__socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.artist__socials a { padding: 7px 14px; border-radius: 20px; font-size: .85rem; color: var(--text); background: rgba(var(--purple-rgb), .08); border: 1px solid rgba(var(--purple-rgb), .25); transition: background .2s, border-color .2s, transform .2s; }
.artist__socials a:hover { background: var(--c); border-color: var(--c); color: #111; transform: translateY(-1px); }
@media (max-width: 480px) { .artist__card { flex-direction: column; text-align: center; } }

/* Chica del logo de Eclipse */
.brand .brand__girl { width: auto; height: 42px; border-radius: 0; filter: drop-shadow(0 0 4px rgba(88, 101, 242, .5)); }
@media (max-width: 480px) { .brand .brand__girl { height: 34px; } }

/* ═══ v0.8.6: lector estilo Lector XD (páginas a todo el ancho, barras discretas) ═══ */
body.is-reading .site-header { position: static; }
body.is-reading .strip, body.is-reading .breadcrumbs { display: none; }
body.is-reading .rd-title { margin: 12px 0 8px; text-align: center; }
body.is-reading .rd-bar { top: 0; border-left: 0; border-right: 0; }
body.is-reading .rd-page img { margin: 0 auto; }
body.is-reading .rd-rail, body.is-reading .rd-dock { background: rgba(13, 11, 20, .7); }
@media (max-width: 760px) {
	/* el contenido del lector va de borde a borde, centrado */
	body.is-reading .wrap { padding-left: 0; padding-right: 0; }
	body.is-reading .rd-title, body.is-reading .rd-tip, body.is-reading .rd-end,
	body.is-reading .comments, body.is-reading #comentarios { margin-left: 12px; margin-right: 12px; }
	body.is-reading .rd-page, body.is-reading .reader[data-width] .rd-page { width: 100%; }
	body.is-reading .site-header .wrap { padding-left: 12px; padding-right: 12px; }
	body.is-reading .header-search { display: none; }
	body.is-reading .main-nav { padding: 4px; font-size: .9rem; }
	body.is-reading .rd-rail { right: 2px; padding: 3px 1px; background: rgba(13, 11, 20, .55); }
	body.is-reading .rd-rail__btn { width: 30px; height: 28px; font-size: .9rem; }
	body.is-reading .rd-rail__sep { width: 18px; margin: 1px 0; }
	body.is-reading .rd-dock { bottom: 10px; padding: 3px; max-width: calc(100vw - 16px); background: rgba(13, 11, 20, .78); }
	body.is-reading .rd-dock__btn { width: 36px; height: 34px; }
	body.is-reading .rd-dock__pos { padding: 0 8px; height: 34px; font-size: .75rem; }
}
@media (max-width: 760px) {
	body.is-reading .main-nav { display: none; }
	body.is-reading .site-header .wrap { padding-top: 6px; padding-bottom: 6px; }
	body.is-reading .rd-title { font-size: 1rem; margin: 8px 12px 6px; }
	body.is-reading .rd-tip { margin-right: 44px; }
	body.is-reading .rd-bar { padding: 4px 44px 4px 8px; }
}

/* ═══ v0.8.8: lector inmersivo (barras flotantes que se esconden al leer, como Lector XD) ═══ */
body.is-reading .site-header { display: none; }
body.is-reading .rd-title { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); }
body.is-reading main, body.is-reading .wrap { padding-top: 0; }
body.is-reading .rd-progress { height: 4px; background: rgba(255, 255, 255, .08); }
body.is-reading .rd-bar {
	position: fixed; top: 4px; left: 0; right: 0; z-index: 55; margin: 0; padding: 8px 12px; gap: 8px; flex-wrap: nowrap;
	background: linear-gradient(180deg, rgba(0, 0, 0, .92), rgba(0, 0, 0, .55) 70%, transparent); border: 0; backdrop-filter: none;
	transition: transform .3s, opacity .3s;
}
.rd-bar__title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.rd-bar__title b, .rd-bar__title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; font-style: italic; }
.rd-bar__title b { font-size: .8rem; color: #fff; }
.rd-bar__title small { font-size: .7rem; color: rgba(255, 255, 255, .6); }
body.is-reading .rd-bar .rd-spacer { display: none; }
body.is-reading .rd-icon { border-radius: 12px; background: rgba(30, 27, 42, .85); }
body.is-reading .rd-bar .rd-seg { border-radius: 12px; overflow: hidden; }
body.is-reading .rd-settings { position: fixed; top: 60px; right: 12px; left: 12px; max-width: 360px; margin: 0 0 0 auto; z-index: 56; border-radius: 16px; }
body.is-reading .rd-rail { border-radius: 24px; clip-path: none; transition: transform .3s, opacity .3s; gap: 6px; padding: 8px 6px; background: rgba(30, 27, 42, .82); border-color: rgba(255, 255, 255, .06); }
body.is-reading .rd-rail__btn { border-radius: 50%; }
body.is-reading .rd-dock { border-radius: 999px; clip-path: none; bottom: 22px; transition: transform .3s, opacity .3s; background: rgba(30, 27, 42, .92); border-color: rgba(255, 255, 255, .06); }
body.is-reading .rd-dock__btn { border-radius: 50%; }
body.rd-ui-off .rd-bar { transform: translateY(-120%); opacity: 0; pointer-events: none; }
body.rd-ui-off .rd-rail { transform: translate(150%, -50%); opacity: 0; pointer-events: none; }
body.rd-ui-off .rd-dock { transform: translate(-50%, 150%); opacity: 0; pointer-events: none; }
body.is-reading .rd-page img { cursor: pointer; }
body.is-reading.rd-ui-off .rd-tip { display: none; }
@media (max-width: 760px) {
	body.is-reading .rd-bar .rd-zoom button { min-width: 28px; padding: 6px 7px; }
	body.is-reading .rd-bar { padding-right: 12px; gap: 6px; }
	body.is-reading .rd-rail { right: 6px; }
	body.is-reading .rd-dock { bottom: 16px; }
}

body.is-reading .rd-tip { position: fixed; left: 12px; right: 12px; bottom: 84px; z-index: 40; margin: 0; border-radius: 16px; background: rgba(30, 27, 42, .96); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
@media (min-width: 761px) { body.is-reading .rd-tip { right: auto; left: 24px; bottom: 24px; max-width: 420px; } }

/* ═══ v0.8.9: progreso segmentado, selector de página, reacciones y leído (como Lector XD) ═══ */
body.is-reading .rd-progress { display: flex; gap: 1px; height: 6px; pointer-events: auto; background: rgba(255, 255, 255, .06); z-index: 70; transition: height .15s; }
body.is-reading .rd-progress:hover { height: 14px; }
.rd-progress__seg { position: relative; flex: 1 1 0; height: 100%; padding: 0; border: 0; background: rgba(255, 255, 255, .16); cursor: pointer; }
.rd-progress__seg.is-done { background: var(--pink); box-shadow: 0 0 8px rgba(var(--pink-rgb), .5); }
.rd-progress__seg:hover { background: var(--purple, #8b5cf6); }
.rd-progress__seg i { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; padding: 3px 6px; background: #1e1b2a; border: 1px solid var(--border); border-radius: 4px; color: #fff; font: 700 .65rem var(--font); font-style: normal; pointer-events: none; }
.rd-progress__seg:hover i { display: block; }
.rd-badge { position: absolute; top: -2px; right: -4px; min-width: 18px; padding: 1px 5px; border-radius: 999px; background: #ef4444; border: 1px solid #000; color: #fff; font: 800 .62rem var(--font); line-height: 1.3; text-align: center; }
.rd-badge[hidden] { display: none; }
.rd-badge--pct { top: -4px; right: -8px; background: #1e1b2a; border-color: var(--border); color: var(--muted); }
.rd-rail__read { color: var(--muted); }
.rd-read__ico::before { content: "👁"; filter: grayscale(1) opacity(.7); }
.rd-rail__read.is-on .rd-read__ico::before { filter: none; }
.rd-rail__read.is-on { color: #22c55e; }
.rd-rail__read.is-on .rd-badge--pct { background: #22c55e; border-color: #22c55e; color: #052e12; }
.rd-dock__wrap { position: relative; }
.rd-dock__wrap .rd-dock__pos { background: transparent; border: 0; border-left: 1px solid rgba(255, 255, 255, .06); border-right: 1px solid rgba(255, 255, 255, .06); border-radius: 0; font-family: var(--font); }
.rd-pages { position: absolute; left: 50%; bottom: calc(100% + 18px); transform: translateX(-50%); width: min(256px, calc(100vw - 32px)); max-height: 350px; overflow-y: auto; padding: 14px; background: rgba(30, 27, 42, .97); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); z-index: 80; }
.rd-pages[hidden] { display: none; }
.rd-pages__head { display: flex; justify-content: space-between; margin-bottom: 10px; font: 800 .65rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.rd-pages__head b { color: var(--pink); }
.rd-pages__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rd-pages__grid button { height: 38px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .06); background: transparent; color: var(--muted); font: 800 .75rem var(--font); cursor: pointer; }
.rd-pages__grid button:hover { background: rgba(var(--pink-rgb), .2); color: #fff; }
.rd-pages__grid button.is-active { background: var(--pink); border-color: var(--pink); color: #fff; }
body.rd-ui-off .rd-pages { display: none; }
body.is-reading .rd-react { background: rgba(30, 27, 42, .97); border-radius: 16px; border-color: rgba(255, 255, 255, .08); box-shadow: 0 20px 50px rgba(0, 0, 0, .6); top: 0; }

/* ═══ v0.9.0: menú lateral, Actualizaciones y Categorías ═══ */
.menu-btn { flex: none; display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 9px; background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.menu-btn span { display: block; height: 2px; background: var(--text); border-radius: 2px; }
.menu-btn:hover { border-color: var(--pink); }
.drawer__overlay { position: fixed; inset: 0; z-index: 998; background: rgba(5, 4, 10, .7); backdrop-filter: blur(2px); }
.drawer__overlay[hidden] { display: none; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 999; width: min(86vw, 320px); display: flex; flex-direction: column; background: var(--bg-2); border-right: 1px solid var(--border); box-shadow: 20px 0 60px rgba(0, 0, 0, .6); transform: translateX(-105%); visibility: hidden; transition: transform .28s ease, visibility 0s .28s; }
.drawer.is-open { transform: none; visibility: visible; transition: transform .28s ease; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 2px solid transparent; border-image: var(--grad) 1; background: var(--card); }
.drawer__brand { font: 800 1.1rem var(--font-display, var(--font)); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.drawer__x { width: 36px; height: 36px; background: transparent; border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 1rem; cursor: pointer; }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 12px 24px; overscroll-behavior: contain; }
.drawer__title { margin: 16px 6px 6px; font: 800 .68rem var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--text); font-weight: 600; }
.drawer__list a:hover { background: rgba(var(--pink-rgb), .12); color: #fff; }
.drawer__list--tags { display: flex; flex-wrap: wrap; gap: 6px; }
.drawer__list--tags a { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; }
.drawer__all { display: block; margin: 10px 6px 0; color: var(--pink); font-weight: 700; font-size: .9rem; }
body.drawer-on { overflow: hidden; }
@media (max-width: 760px) {
	/* tira de enlaces deslizable bajo el encabezado (como el menú de MZ) */
	.main-nav { order: 5; flex: 0 0 100%; width: 100%; max-width: 100%; margin: 0; padding: 4px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; scrollbar-width: none; }
	.main-nav::-webkit-scrollbar { display: none; }
	.main-nav a { flex: none; }
	.site-header .wrap { flex-wrap: wrap; gap: 8px 10px; padding-top: 8px; padding-bottom: 8px; height: auto; }
	.header-search { flex: 1; min-width: 0; }
	.header-user { display: block; font-size: .85rem; }
	.brand { font-size: 1.05rem; }
}
.updates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.updates__item { display: flex; gap: 12px; padding: 10px; background: var(--card); border: 1px solid var(--border); }
.updates__cover { flex: none; width: 80px; }
.updates__cover img { width: 80px; height: 120px; object-fit: cover; display: block; background: #0b0c10; }
.updates__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.updates__title { font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.updates__chap { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: .88rem; }
.updates__chap:hover { border-color: var(--pink); color: #fff; }
.updates__chap small { color: var(--muted); white-space: nowrap; }
.cat-search { width: 100%; max-width: 420px; margin-bottom: 14px; }
.cat-list li[hidden], .cat-empty[hidden] { display: none; }

/* ═══ v0.9.1: portada de mangas, ficha ampliada y filtros ═══ */
.hub-catalog { margin: 28px 0 10px; font-size: 1.25rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.section-head h2 { margin: 0; }
.pop-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pop { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--card); border: 1px solid var(--border); }
.pop__n { flex: none; min-width: 34px; font-weight: 900; font-size: 1.05rem; color: var(--muted); }
.pop__n--top { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pop__cover { flex: none; }
.pop__cover img { width: 56px; height: 84px; object-fit: cover; display: block; background: #0b0c10; }
.pop__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pop__title { font-weight: 700; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pop__body small { color: var(--muted); }
.hub-tabs { display: inline-flex; gap: 6px; }
.hub-tabs button { padding: 6px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-weight: 700; cursor: pointer; }
.hub-tabs button[aria-selected="true"] { background: var(--grad); border-color: transparent; color: #fff; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.rgrid[hidden] { display: none; }
.rcard { display: flex; gap: 12px; padding: 10px; background: var(--card); border: 1px solid var(--border); }
.rcard__cover { position: relative; flex: none; width: 90px; }
.rcard__cover img { width: 90px; height: 135px; object-fit: cover; display: block; background: #0b0c10; }
.rcard__cover .tag { position: absolute; left: 4px; top: 4px; }
.rcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rcard__title { font-weight: 800; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rcard__meta { color: var(--muted); }
.rcard__chap { display: flex; justify-content: space-between; gap: 8px; padding: 5px 9px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: .85rem; }
.rcard__chap:hover { border-color: var(--pink); color: #fff; }
.rcard__chap small { color: var(--muted); white-space: nowrap; }
.alt-titles { margin: 4px 0 10px; color: var(--muted); font-size: .9rem; }
.alt-titles summary { cursor: pointer; }
.alt-titles summary b { color: var(--pink); }
.alt-titles ul { margin: 6px 0 0; padding-left: 18px; }
.datos { margin: 12px 0; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.datos h3 { margin: 0 0 8px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.datos .manga-stats { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.datos--me { border-color: rgba(var(--pink-rgb), .45); }
.chap-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px 0; }
.chap-pager[hidden] { display: none; }
.chap-pager button { min-width: 36px; height: 36px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-weight: 700; cursor: pointer; }
.chap-pager button[aria-current="page"] { background: var(--grad); border-color: transparent; color: #fff; }
.catalog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.catalog-head__n { color: var(--muted); font-weight: 700; }
.mfilters { margin-bottom: 18px; }
.mfilters__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.mfilters__bar .filters__q { flex: 1 1 220px; }
.mfilters__order { display: flex; flex-direction: column; gap: 2px; font-size: .75rem; color: var(--muted); }
.mfilters__panel { margin-top: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px 12px; }
.mfilters__panel > summary { cursor: pointer; padding: 10px 0; font-weight: 800; }
.mfilters__group { border: 0; margin: 10px 0 0; padding: 0; }
.mfilters__group legend { padding: 0; margin-bottom: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mfilters__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mchip input { position: absolute; opacity: 0; pointer-events: none; }
.mchip span { display: inline-block; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-2); color: var(--text); font-size: .88rem; cursor: pointer; }
.mchip input:checked + span { background: var(--grad); border-color: transparent; color: #fff; font-weight: 700; }
.mchip input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.mfilters__find { width: 100%; max-width: 360px; margin-bottom: 8px; }
.mfilters__cats { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 12px; }
.mfilters__cats li[hidden] { display: none; }
.mfilters__cats label { display: flex; align-items: center; gap: 6px; padding: 4px 2px; cursor: pointer; }
.mfilters__cats small { color: var(--muted); }
@media (max-width: 760px) {
	.pop-list, .rgrid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	.header-search input { width: 100%; min-width: 0; }
	.header-search .kbd, .header-search kbd { display: none; }
}
.drawer__search { padding: 10px 4px 4px; }
.drawer__search input { width: 100%; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font: inherit; }
@media (max-width: 480px) { .site-header .header-search { display: none; } .site-header .header-user { margin-left: auto; } }

/* ═══ v0.9.2: logros y ranking global ═══ */
.ach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ach { display: flex; gap: 12px; padding: 12px; background: var(--card); border: 1px solid var(--border); opacity: .6; }
.ach.is-on { opacity: 1; border-color: rgba(var(--pink-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--pink-rgb), .15) inset; }
.ach__icon { flex: none; width: 48px; height: 48px; display: grid; place-items: center; font-size: 1.6rem; background: var(--bg-2); border-radius: 12px; filter: grayscale(1); }
.ach.is-on .ach__icon { filter: none; background: var(--grad); }
.ach__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ach__body b { color: #fff; }
.ach__body small { color: var(--muted); }
.ach__bar { height: 6px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.ach__bar i { display: block; height: 100%; background: var(--grad); }
.rank__body small { color: var(--muted); display: block; }

/* ═══ v0.9.3: listas públicas ═══ */
.listbox { position: relative; display: inline-block; }
.listbox > summary { list-style: none; cursor: pointer; }
.listbox > summary::-webkit-details-marker { display: none; }
.listbox__pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(300px, 86vw); padding: 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
.listbox__list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 200px; overflow-y: auto; }
.listbox__list label { display: flex; align-items: center; gap: 8px; padding: 6px 2px; cursor: pointer; }
.listbox__new { display: flex; gap: 8px; }
.listbox__new input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; }
.listbox__msg { margin: 8px 0 0; min-height: 1em; font-size: .85rem; color: var(--muted); }
.mylists { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.mylists__item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); }
.mylists__item a { flex: 1 1 160px; font-weight: 700; color: #fff; }
.mylists__item small { color: var(--muted); }
.lista-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.lista-priv { color: var(--pink); font-weight: 700; }
.lista-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lista-item__rm { padding: 6px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); cursor: pointer; }
.lista-item__rm:hover { border-color: var(--pink); color: #fff; }
.lists { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lists__item { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--card); border: 1px solid var(--border); }
.lists__covers { display: flex; gap: 4px; min-height: 112px; background: #0b0c10; }
.lists__covers img { flex: 1; min-width: 0; height: 112px; object-fit: cover; }
.lists__title { font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lists__item small { color: var(--muted); }

/* ═══ v0.9.4: ficha de juego estilo MZGames ═══ */
.game__content--clamp { max-height: 9.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.more-btn { margin: 4px 0 12px; padding: 6px 14px; background: transparent; border: 1px solid var(--border); border-radius: 999px; color: var(--pink); font-weight: 700; cursor: pointer; }
.more-btn[hidden] { display: none; }
.changelog { margin: 10px 0 14px; padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.changelog summary { cursor: pointer; font-weight: 800; }
.changelog ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.changelog li b { color: var(--pink); margin-right: 6px; }
.changelog li span { color: var(--muted); }
.panel .lib { margin: 12px 0; }
.tagpanel { flex: 1 1 100%; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px 12px; }
.tagpanel > summary { cursor: pointer; padding: 8px 0; font-weight: 800; }
.tagpanel > summary b { color: var(--pink); }
.tagpanel__logic { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.tagpanel__logic small { color: var(--muted); margin-left: 6px; }

/* ═══ v0.9.5: interfaz — tema claro, barra inferior, insignias, pestañas ═══ */
:root { color-scheme: dark; }
:root[data-theme="light"] {
	color-scheme: light;
	--bg: #f6f3ff; --bg-2: #ebe6fa; --card: #ffffff; --card-2: #f1ecfc;
	--text: #1d1830; --muted: #5d5478; --border: #d9d0ef;
}
:root[data-theme="light"] body {
	background:
		radial-gradient(900px 500px at 10% -10%, rgba(var(--purple-rgb), .10), transparent 60%),
		radial-gradient(800px 500px at 100% 0%, rgba(var(--pink-rgb), .08), transparent 60%),
		var(--bg);
}
:root[data-theme="light"] .site-header { background: rgba(255, 255, 255, .92); }
:root[data-theme="light"] .site-footer { background: #ece7fa; }
:root[data-theme="light"] .gcard__media .tag, :root[data-theme="light"] .tag { color: #fff; }
:root[data-theme="light"] .card__fav { text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
:root[data-theme="light"] .cookies, :root[data-theme="light"] .appearance { box-shadow: 0 20px 60px rgba(40, 20, 90, .25); }
:root[data-accent="purple"] { --pink: #8b5cf6; --pink-rgb: 139, 92, 246; --primary-2: #7c3aed; --grad: linear-gradient(90deg, #8b5cf6, #5865f2 60%, #ec4899); }
:root[data-accent="blue"] { --pink: #5865f2; --pink-rgb: 88, 101, 242; --primary-2: #4752c4; --grad: linear-gradient(90deg, #5865f2, #8b5cf6 60%, #ec4899); }
:root[data-accent="green"] { --pink: #10b981; --pink-rgb: 16, 185, 129; --primary-2: #059669; --grad: linear-gradient(90deg, #10b981, #5865f2 60%, #8b5cf6); }
:root[data-fs="sm"] { font-size: 14.5px; }
:root[data-fs="lg"] { font-size: 18px; }
:root[data-fs="sm"] body { font-size: .9rem; }
:root[data-fs="lg"] body { font-size: 1.12rem; }
:root[data-density="compact"] .grid--games { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
:root[data-density="compact"] .grid--manga { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; }
:root[data-density="roomy"] .grid--games { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
:root[data-density="roomy"] .grid--manga { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; }

.theme-btn { background: transparent; border: 1px solid var(--border); border-radius: 999px; width: 34px; height: 34px; color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; flex: none; }
.theme-btn:hover { border-color: var(--pink); color: var(--pink); }
.appearance { background: var(--bg-2); color: var(--text); border: 1px solid rgba(var(--pink-rgb), .5); border-radius: 12px; padding: 18px 20px; width: min(92vw, 420px); }
.appearance::backdrop { background: rgba(0, 0, 0, .55); }
.appearance h2 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font-size: 1.1rem; }
.appearance__close { background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.appearance fieldset { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.appearance legend { font-weight: 800; margin-bottom: 6px; padding: 0; width: 100%; }
.swatch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.swatch::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--s); }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch:has(input:checked) { border-color: var(--s); box-shadow: 0 0 0 2px var(--s); }

/* barra inferior (solo móvil) */
.bottomnav { display: none; }
@media (max-width: 760px) {
	.bottomnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--bg-2); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 24px rgba(0, 0, 0, .35); }
	.bottomnav a, .bottomnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 2px; min-height: 56px; background: none; border: 0; color: var(--muted); font: 700 .68rem/1 var(--font); text-decoration: none; cursor: pointer; }
	.bottomnav span { font-size: 1.3rem; line-height: 1; }
	.bottomnav [aria-current="page"] { color: var(--pink); box-shadow: inset 0 2px 0 var(--pink); }
	body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
	body.is-reading .bottomnav, body.rd-is-fullscreen .bottomnav { display: none; }
	body.is-reading, body.rd-is-fullscreen { padding-bottom: 0; }
	.cookies { bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* insignias y tarjetas pulidas */
.tag--fresh { font-weight: 800; letter-spacing: .02em; }
.tag--new { background: linear-gradient(90deg, #22c55e, #10b981); color: #fff; }
.tag--upd { background: linear-gradient(90deg, #f59e0b, #f97316); color: #fff; }
.tag--fresh-abs { position: absolute; left: 8px; bottom: 8px; }
.gcard { transition: transform .2s ease, box-shadow .2s ease; }
.gcard:hover, .gcard:focus-within { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--pink-rgb), .18); }
.gcard__media { background: linear-gradient(100deg, var(--bg-2) 30%, var(--card-2) 50%, var(--bg-2) 70%); background-size: 200% 100%; animation: ez-shimmer 1.4s linear infinite; }
@keyframes ez-shimmer { to { background-position: -200% 0; } }
.home-continue { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
	.gcard, .gcard__media { transition: none; animation: none; }
	.gcard:hover { transform: none; }
}

/* ficha: fondo difuminado, pestañas y descargas destacadas */
.site-main { position: relative; overflow-x: clip; }
.backdrop { position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 420px; transform: translateX(-50%); background-size: cover; background-position: center; filter: blur(46px) saturate(1.2); opacity: .32; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); pointer-events: none; }
:root[data-theme="light"] .backdrop { opacity: .22; }
.gtabs { display: flex; gap: 4px; margin: 6px 0 16px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.gtabs[hidden] { display: none; }
.gtabs button, .gtabs a { flex: none; padding: 10px 16px; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--muted); font: 800 .95rem var(--font); text-decoration: none; cursor: pointer; }
.gtabs [aria-selected="true"] { color: var(--text); border-bottom-color: var(--pink); }
.gtabs small { color: var(--pink); margin-left: 2px; }
.gpanel[hidden] { display: none; }
.panel .btn--download { box-shadow: 0 8px 24px rgba(var(--pink-rgb), .35); animation: ez-glow 2.6s ease-in-out infinite; }
@keyframes ez-glow { 50% { box-shadow: 0 8px 34px rgba(var(--pink-rgb), .6); } }
@media (min-width: 900px) { .game > .panel { position: sticky; top: 84px; } }
@media (prefers-reduced-motion: reduce) { .panel .btn--download { animation: none; } }
:root[data-theme="light"] .game__intro strong, :root[data-theme="light"] .game__content strong { color: var(--pink); }
@media (max-width: 480px) {
	.site-header .wrap { gap: 8px; }
	.site-header .brand { min-width: 0; font-size: .95rem; white-space: nowrap; overflow: hidden; }
	.site-header .brand img { width: 52px; height: auto; }
	.header-user a { padding: 6px 10px; }
}

/* v0.9.5: iconos propios y bloqueo del fondo con diálogos abiertos */
.ico { width: 1.35em; height: 1.35em; flex: none; }
.bottomnav .ico { width: 24px; height: 24px; font-size: 1rem; }
.bottomnav [aria-current="page"] .ico { stroke-width: 2.3; }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; }
.theme-btn .ico, .dl-dialog__close .ico, .appearance__close .ico { width: 18px; height: 18px; }
.dl-dialog__close { display: inline-flex; align-items: center; justify-content: center; }
.btn--download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn--download .ico { width: 1.25em; height: 1.25em; stroke-width: 2.2; }
html:has(dialog[open]), html:has(dialog[open]) body { overflow: hidden; }
dialog { overscroll-behavior: contain; }
.dl-dialog__body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* iconos en línea: alineados con el texto */
.stat .ico, .gcard__dev .ico, .section-head .ico, h1 .ico, h2 .ico, .btn .ico, .lib .ico, .nav a .ico, .main-nav .ico, .drawer__list .ico { width: 1.1em; height: 1.1em; vertical-align: -.18em; }
.dl-info__icon .ico, .perk__icon .ico { width: 1.7em; height: 1.7em; }
.tag--excl .ico { width: 1em; height: 1em; vertical-align: -.15em; }

/* v0.9.6: campanita de capítulos nuevos */
.bell-btn { position: relative; }
.bell-btn__n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--pink); color: #fff; font: 800 .7rem/18px var(--font); text-align: center; }
.bell-btn__n[hidden] { display: none; }
.notif__list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 6px; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.notif__list a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; }
.notif__list a:hover { border-color: var(--pink); }
.notif__list small { color: var(--muted); white-space: nowrap; }
.notif__empty { color: var(--muted); margin: 6px 0; }

/* v0.9.6: niveles de membresía */
.tiers { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.tier--top { border-color: var(--pink); box-shadow: 0 10px 34px rgba(var(--pink-rgb), .22); }
.tier__badge { position: absolute; top: -11px; right: 16px; padding: 3px 12px; border-radius: 999px; background: var(--grad); color: #fff; font: 800 .75rem var(--font); }
.tier__name { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.25rem; }
.tier__name .ico { color: var(--pink); width: 1.3em; height: 1.3em; }
.tier__price { margin: 0; color: var(--muted); }
.tier__price b { font-size: 2rem; color: var(--text); }
.tier__inherits { margin: 4px 0 0; font-weight: 800; color: var(--pink); font-size: .9rem; }
.tier__perks { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; flex: 1; }
.tier__perks li { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; }
.tier__perks .ico { color: var(--ok); width: 1.15em; height: 1.15em; margin-top: 2px; }
.tier .btn { align-self: stretch; text-align: center; }
.tiers__note { margin: 16px 0 0; color: var(--muted); font-size: .9rem; }

/* v0.9.7: el porcentaje va debajo del ojo, ya no encima */
body.is-reading .rd-rail .rd-rail__read { height: auto; min-height: 28px; flex-direction: column; gap: 1px; padding: 4px 0 3px; line-height: 1; }
.rd-rail__read .rd-badge--pct { position: static; min-width: 0; padding: 1px 4px; font-size: .58rem; }

/* v0.9.8: biblioteca con estadisticas, rangos del ranking */
.libstats { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.libstats li { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.libstats b { font-size: 1.25rem; color: var(--text); }
.libstats span { font-size: .78rem; color: var(--muted); }
.libtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.libtabs .mchip { text-decoration: none; }
.libtabs .mchip.is-on span { background: var(--grad, var(--pink)); color: #fff; border-color: transparent; }
.libtabs small { opacity: .7; }
.rankbadge { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 6px; border-radius: 6px; font: 800 .72rem var(--font); text-align: center; color: #fff; background: #64748b; vertical-align: middle; }
.rankbadge--s { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.rankbadge--a { background: #ef4444; }
.rankbadge--b { background: #a855f7; }
.rankbadge--c { background: #3b82f6; }
.rankbadge--d { background: #14b8a6; }
.updates__meta, .updates__more { display: block; color: var(--muted); font-size: .78rem; margin: 2px 0 4px; }

/* v0.9.9: nuevo orden del menu, 6 accesos abajo y Tags unificados */
.main-nav a:nth-child(n) { color: var(--muted); }
.main-nav a:nth-child(1) { color: var(--muted); }
.main-nav a:nth-child(2) { color: #93a0ff; }
.main-nav a:nth-child(3) { color: #f9a8d4; }
.main-nav a:nth-child(4) { color: #fcd34d; }
.main-nav a:nth-child(5) { color: #a5b4fc; }
.main-nav a:nth-child(6) { color: #c4a8ff; }
.main-nav a:nth-child(7) { color: #d8b4fe; }
.main-nav a.current { color: #fff; }
.tagagg__item { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding: 5px 6px 5px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; }
.tagagg__name { font-weight: 700; font-size: .88rem; }
.tagagg__item a.tagagg__src { padding: 2px 8px; border-radius: 999px; font-size: .74rem; background: rgba(var(--pink-rgb), .12); border: 1px solid transparent; }
.tagagg__src--mangas { background: rgba(147, 160, 255, .14) !important; }
.tagagg__src--noticias { background: rgba(252, 211, 77, .14) !important; }
.tagagg__item a.tagagg__src:hover { border-color: var(--pink); }
.bottomnav a, .bottomnav button { min-width: 0; font-size: .68rem; }

/* v0.9.10: Tags plegables y por seccion (como ManhwaWeb) */
.tagtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tagtabs .mchip { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.tagtabs .mchip.is-on span { background: var(--grad, var(--pink)); color: #fff; border-color: transparent; }
.tagbar { margin: 0 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.tagbar > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; cursor: pointer; font-weight: 800; font-size: 1.05rem; list-style: none; }
.tagbar > summary::-webkit-details-marker { display: none; }
.tagbar > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .2s; }
.tagbar[open] > summary::after { transform: rotate(180deg); }
.tagbar > summary small { color: var(--muted); font-weight: 600; }
.tagbar > ul { padding: 4px 14px 14px; margin: 0; }
.tagbar[hidden] { display: none; }
.tagagg[data-src="juegos"] .tagagg__item:not(:has(.tagagg__src--juegos)),
.tagagg[data-src="mangas"] .tagagg__item:not(:has(.tagagg__src--mangas)),
.tagagg[data-src="noticias"] .tagagg__item:not(:has(.tagagg__src--noticias)) { display: none; }
.tagagg[data-src="juegos"] .tagagg__src:not(.tagagg__src--juegos),
.tagagg[data-src="mangas"] .tagagg__src:not(.tagagg__src--mangas),
.tagagg[data-src="noticias"] .tagagg__src:not(.tagagg__src--noticias) { display: none; }

/* v0.10.0: monedas, cofre diario, tienda, perfil publico y cosmeticos */
.shopbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0 0 16px; }
.shopbar__bal { display: flex; flex-direction: column; line-height: 1.15; }
.shopbar__bal span:first-child { font-size: .78rem; color: var(--muted); }
.shopbar__bal b { font-size: 1.5rem; }
.shopbar__chest { display: flex; flex-direction: column; gap: 4px; }
.shopbar__chest small { color: var(--muted); }
.shoptabs .mchip { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.shoptabs .mchip.is-on span { background: var(--grad, var(--pink)); color: #fff; border-color: transparent; }
.shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.shopgrid[hidden] { display: none; }
.shopitem { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.shopitem.is-equipped { border-color: var(--pink); }
.shopitem h3 { margin: 0; font-size: .95rem; }
.shopitem .btn { margin-top: auto; width: 100%; }
.shopitem__prev { min-height: 74px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.shopitem__nick { font-weight: 800; font-size: 1.15rem; }
.shopitem__comment { width: 100%; margin: 0 !important; font-size: .82rem; }
.shopitem__banner { width: 100%; height: 64px; border-radius: 8px; }
.shopnote { color: var(--muted); font-size: .82rem; }

/* marco de avatar */
.av { display: inline-flex; flex: none; padding: 3px; border-radius: 50%; background: transparent; vertical-align: middle; line-height: 0; }
.av img { border-radius: 50%; display: block; }
.cos-marco-oro { background: conic-gradient(#fde68a, #b45309, #fde68a, #b45309, #fde68a); box-shadow: 0 0 8px rgba(252, 211, 77, .55); }
.cos-marco-neon { background: conic-gradient(#22d3ee, #a855f7, #22d3ee); box-shadow: 0 0 10px rgba(34, 211, 238, .6); }
.cos-marco-fuego { background: conic-gradient(#f97316, #ef4444, #fde047, #ef4444, #f97316); box-shadow: 0 0 10px rgba(249, 115, 22, .6); }
.cos-marco-hielo { background: conic-gradient(#e0f2fe, #38bdf8, #e0f2fe, #0ea5e9, #e0f2fe); box-shadow: 0 0 10px rgba(56, 189, 248, .55); }
.cos-marco-eclipse { background: conic-gradient(#f472b6, #6366f1, #0f172a, #f472b6); box-shadow: 0 0 12px rgba(244, 114, 182, .6); }

/* estilo de nick */
[class*="cos-nick-"] { font-weight: 800; }
.cos-nick-dorado { color: #fcd34d; text-shadow: 0 0 8px rgba(252, 211, 77, .45); }
.cos-nick-neon { color: #67e8f9; text-shadow: 0 0 6px #22d3ee, 0 0 14px rgba(34, 211, 238, .6); }
.cos-nick-fuego { background: linear-gradient(90deg, #f97316, #ef4444, #fde047); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cos-nick-arcoiris { background: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cos-nick-eclipse { background: linear-gradient(90deg, #f472b6, #818cf8); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }

/* fondo de comentario */
.comment__body.cos-fondo-noche { background: linear-gradient(135deg, #0b1020, #1e1b4b); border-color: #4338ca; }
.comment__body.cos-fondo-aurora { background: linear-gradient(135deg, #064e3b, #1e3a8a 60%, #581c87); border-color: #34d399; }
.comment__body.cos-fondo-brasas { background: linear-gradient(135deg, #3b0a0a, #7c2d12); border-color: #f97316; }

/* banner de perfil */
.profile__banner { height: 150px; border-radius: 12px 12px 0 0; background: linear-gradient(135deg, #1e1b4b, #4c1d95); }
.cos-banner-atardecer { background: linear-gradient(135deg, #fb923c, #db2777 55%, #4c1d95); }
.cos-banner-galaxia { background: radial-gradient(circle at 20% 30%, #a78bfa55, transparent 40%), radial-gradient(circle at 80% 60%, #f472b655, transparent 45%), linear-gradient(135deg, #020617, #312e81); }
.cos-banner-bosque { background: linear-gradient(135deg, #052e16, #166534 60%, #65a30d); }

/* perfil */
.profile { margin: 0 0 20px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.profile__head { display: flex; gap: 16px; align-items: flex-end; padding: 0 18px 16px; margin-top: -40px; }
.profile__head .av { padding: 4px; background-color: var(--bg, #0b0b14); }
.profile__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg, #0b0b14); }
.profile__head h1 { margin: 0; font-size: 1.5rem; }
.profile__meta { margin: 4px 0 8px; color: var(--muted); }
.profile__ach, .profile__lists { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.profile__ach li { padding: 5px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; font-size: .82rem; }
.profile__lists li { padding: 6px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.userlink { color: inherit; text-decoration: none; }
.userlink:hover { text-decoration: underline; }
.profile__head { align-items: flex-start; }
.profile__head > div:last-child { padding-top: 46px; min-width: 0; }
.shopgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* v0.11.0: cofres, cromos (cartas) y cosmeticos tematicos */
img.avatar { object-fit: cover; }
.chestgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.chestgrid__note { grid-column: 1 / -1; margin: 0; }
.chest { text-align: center; }
.chest__art { font-size: 3.6rem; line-height: 1; padding: 8px 0; filter: drop-shadow(0 0 12px rgba(251, 191, 36, .35)); transition: transform .2s; }
.chest:hover .chest__art { animation: chestshake .6s ease-in-out; }
.chest--plata .chest__art { filter: drop-shadow(0 0 14px rgba(148, 163, 184, .7)); }
.chest--oro .chest__art { filter: drop-shadow(0 0 16px rgba(251, 191, 36, .85)); }
.chest__odds { margin: 0; font-size: .74rem; color: var(--muted); }
.chest__buy { display: flex; gap: 8px; margin-top: auto; }
.chest__buy select { flex: none; background: var(--card); color: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; }
.chest__buy .btn { flex: 1; margin-top: 0; }
@keyframes chestshake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg) scale(1.08); } 40% { transform: rotate(8deg) scale(1.08); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(5deg); } }

/* cartas */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 14px 0 20px; }
.cardgrid--mini { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.tcard { --rc: #94a3b8; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--card); border: 2px solid var(--rc); border-radius: 10px; box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 35%, transparent); color: inherit; text-decoration: none; }
.tcard__img { display: block; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background: #111827; }
.tcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard h3 { margin: 0; font-size: .78rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard__rar { position: absolute; top: 10px; left: 10px; padding: 2px 7px; border-radius: 999px; background: var(--rc); color: #0b0b14; font: 800 .62rem var(--font); text-transform: uppercase; }
.tcard__qty { position: absolute; top: 10px; right: 10px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .75); font: 800 .72rem var(--font); }
.tcard__new { position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%) rotate(-6deg); padding: 3px 10px; border-radius: 6px; background: #fbbf24; color: #0b0b14; font: 900 .78rem var(--font); }
.tcard__act { display: flex; flex-direction: column; gap: 6px; }
.tcard__act .btn { width: 100%; padding: 6px 8px; font-size: .74rem; }
.tcard.is-equipped { outline: 2px solid var(--pink); outline-offset: 2px; }
.tcard--missing { opacity: .55; filter: grayscale(1); box-shadow: none; }
.tcard--missing .tcard__img { display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 900; color: #475569; }
.rar-comun { --rc: #94a3b8; }
.rar-poco { --rc: #4ade80; }
.rar-rara { --rc: #38bdf8; }
.rar-epica { --rc: #c084fc; }
.rar-legendaria { --rc: #fbbf24; animation: rarglow 2.4s ease-in-out infinite; }
@keyframes rarglow { 0%, 100% { box-shadow: 0 0 10px rgba(251, 191, 36, .45); } 50% { box-shadow: 0 0 24px rgba(251, 191, 36, .95); } }

/* revelado de cofres */
.reveal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 5, 12, .88); overflow-y: auto; }
.reveal__box { width: min(760px, 100%); text-align: center; }
.reveal__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.reveal__cards .rcard { width: 124px; opacity: 0; animation: flipin .6s ease forwards; }
@keyframes flipin { from { opacity: 0; transform: rotateY(90deg) scale(.7); } to { opacity: 1; transform: rotateY(0) scale(1); } }
.reveal__act { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }

/* marcos y banners tematicos */
.cos-marco-lunasangre { background: conic-gradient(#7f1d1d, #ef4444, #450a0a, #ef4444, #7f1d1d); box-shadow: 0 0 10px rgba(239, 68, 68, .6); }
.cos-marco-princesa { background: conic-gradient(#f9a8d4, #fde68a, #f9a8d4, #fbcfe8, #f9a8d4); box-shadow: 0 0 10px rgba(249, 168, 212, .6); }
.cos-marco-brillos { background: conic-gradient(#fff, #a5b4fc, #fff, #f0abfc, #fff); box-shadow: 0 0 12px rgba(255, 255, 255, .55); }
.cos-marco-aurora { background: conic-gradient(#34d399, #60a5fa, #a78bfa, #34d399); box-shadow: 0 0 10px rgba(96, 165, 250, .6); }
.cos-banner-humo { background: radial-gradient(circle at 30% 40%, #64748b66, transparent 45%), linear-gradient(135deg, #0f172a, #475569 55%, #1e293b); }
.cos-banner-neon { background: linear-gradient(135deg, #ff00cc, #3333ff 60%, #00e5ff); }
.cos-banner-pareja { background: linear-gradient(135deg, #fda4af, #f472b6 45%, #a78bfa); }

/* v0.12.0: gemas, colecciones, medalla de experiencia, pestañas de perfil */
.collgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.coll { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: inherit; }
.coll small { opacity: .75; }
.coll.is-done { border-color: #f59e0b; box-shadow: 0 0 0 1px #f59e0b55; }
.medalbar { display: block; height: 8px; margin: 6px 0 2px; border-radius: 999px; background: var(--border); overflow: hidden; min-width: 120px; }
.medalbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f59e0b, #ef4444); }
.medal { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.medal > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.medal__icon { font-size: 2.4rem; line-height: 1; }
.reveal__prem { margin: 10px 0 0; text-align: center; font-weight: 700; color: #fbbf24; }
[hidden] { display: none !important; }

/* v0.13.0: importar biblioteca */
.imp h2 { margin-top: 0; }
.imp__src { margin: 0 0 18px; }
.imp__src h3 { margin: 0 0 6px; font-size: 1rem; }
.imp__src ol { margin: 0 0 8px; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 6px; }
.imp__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.imp__input, .imp__text, .imp__opt select { width: 100%; max-width: 100%; box-sizing: border-box; padding: 10px 12px; background: var(--card); color: inherit; border: 1px solid var(--border); border-radius: 10px; font: inherit; }
.imp__row .imp__input { flex: 1 1 200px; width: auto; }
.imp__opt { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.imp__sum { font-weight: 600; }
.imp__det { margin: 8px 0; }
.imp__det summary { cursor: pointer; font-weight: 600; }
.imp__list { margin: 6px 0; padding-left: 1.1rem; max-height: 260px; overflow: auto; }
.imp__report { margin-top: 12px; }

/* Language switcher */
.langsw { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.langsw a { padding: 4px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-size: .85rem; text-decoration: none; color: inherit; opacity: .8; }
.langsw a[aria-current] { opacity: 1; border-color: var(--accent, #ec4899); background: color-mix(in srgb, var(--accent, #ec4899) 18%, transparent); }
.site-footer .wrap { flex-wrap: wrap; gap: 10px 18px; }

/* Tops: type switch + portrait manga covers */
.top__tabs--type { margin: 0 0 16px; }
.rank__img--manga { width: 56px; aspect-ratio: 2 / 3; }
.top__tabs--type { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
.top__tabs--type a { padding: 8px; text-align: center; border: 1px solid var(--border); color: var(--muted); font-weight: 600; font-size: .85rem; }
.top__tabs--type a[aria-current="page"] { background: rgba(var(--pink-rgb), .14); border-color: var(--pink); color: #fff; }
.top__tabs--type button[aria-pressed="true"] { background: rgba(var(--pink-rgb), .14); border-color: var(--pink); color: #fff; }
.top > .top__tabs--type { max-width: none; margin-bottom: 10px; }

/* Entrar con Discord / Google */
.social-login{display:grid;gap:10px;max-width:340px;margin:12px 0}
.social-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 16px;border-radius:10px;font-weight:600;text-decoration:none;color:#fff;background:#5865f2;border:1px solid transparent;transition:filter .15s}
.social-btn:hover{filter:brightness(1.1)}
.social-btn--google{background:#fff;color:#1f1f1f;border-color:#dadce0}
.must-log-in p{margin:0 0 8px}

/* ═══ v0.16.1: lector móvil — modo sin interfaz, menú lateral ocultable, mejor deslizar ═══ */
.reader--page, .reader--page .rd-zone { touch-action: pan-y pinch-zoom; }
.reader--page .rd-zone { -webkit-tap-highlight-color: transparent; }
.reader--page .rd-zone--prev { left: 0; width: 30%; }
.reader--page .rd-zone--mid { left: 30%; width: 40%; cursor: pointer; }
.reader--page .rd-zone--next { right: 0; width: 30%; }
.reader--page .rd-page img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* Menú lateral: se esconde con el botón › y queda una pestaña para traerlo de vuelta */
.rd-rail-tab {
	position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 45; display: none; place-items: center;
	width: 22px; height: 56px; padding: 0; border: 1px solid rgba(255, 255, 255, .08); border-right: 0; border-radius: 12px 0 0 12px;
	background: rgba(30, 27, 42, .7); color: #fff; font-size: 1.1rem; cursor: pointer;
}
body.rd-rail-off .rd-rail-tab { display: grid; }
body.rd-rail-off .rd-rail { transform: translate(150%, -50%); opacity: 0; pointer-events: none; }
body.rd-ui-off .rd-rail-tab, body.rd-focus .rd-rail-tab { display: none; }

/* Sin interfaz (botón de pantalla completa) también en paginado */
body.rd-focus .rd-bar { transform: translateY(-120%); opacity: 0; pointer-events: none; }
body.rd-focus .rd-rail { transform: translate(150%, -50%); opacity: 0; pointer-events: none; }
body.rd-focus .rd-dock { transform: translate(-50%, 150%); opacity: 0; pointer-events: none; }
body.rd-focus .rd-pager, body.rd-focus .rd-progress, body.rd-focus .rd-tip, body.rd-focus .rd-pages, body.rd-focus .rd-settings { display: none; }
body.rd-focus .reader--page .rd-page img { max-height: calc(100vh * var(--rd-zoom)); max-height: calc(100dvh * var(--rd-zoom)); }
body.rd-focus .reader--page { padding: 0; }

/* En pantallas táctiles no hay hover: evita que el número de página quede pegado sobre la barra */
@media (hover: none) {
	body.is-reading .rd-progress:hover { height: 6px; }
	.rd-progress__seg:hover i { display: none; }
	.rd-progress__seg:hover { background: rgba(255, 255, 255, .16); }
	.rd-progress__seg.is-done:hover { background: var(--pink); }
}

/* v0.16.2: el cierre solo existe en el último capítulo; en paginado ocupa el lugar de la página */
.rd-end--mini { max-width: 720px; margin: 28px auto 90px; text-align: center; padding: 0 16px; }
.reader--page ~ .rd-end--final { display: none; }
.reader--page.is-end ~ .rd-end--final { display: block; margin-top: 0; }
.reader--page.is-end .rd-page.is-current { display: none; }
.reader--page ~ .rd-end--mini { display: none; }

/* v0.16.3: paginado como en el lector local: la página ocupa toda la pantalla sobre negro, lo demás queda debajo */
.reader--page { min-height: 100vh; min-height: 100dvh; justify-content: center; background: #000; }
.reader--page .rd-page img { max-height: calc(100vh * var(--rd-zoom)); max-height: calc(100dvh * var(--rd-zoom)); }
.reader--page.is-end { min-height: 0; background: none; }
.reader--page ~ .rd-pager { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 44; margin: 0; padding: 6px 10px; border-radius: 14px; background: rgba(13, 11, 20, .72); backdrop-filter: blur(6px); }
.reader--page ~ .rd-pager .btn { padding: 8px 14px; font-size: .9rem; }
body.is-reading .rd-bar ~ .reader--page, body.is-reading .reader--page { margin-top: 0; }