/* =========================================================================
   Páginas personalizadas servidas desde la raíz (/zones, /challenges…)

   La escena se ancla arriba, no se repite, y de ahí para abajo sigue el `--ink`
   del tema. Como el remate de las imágenes es oscuro, la costura no se ve.

   La imagen de fondo NO se fija aquí: la pone la plantilla en un `style` en
   línea, porque cada página lleva la suya (Admin → Short URLs). Esta hoja
   aporta el encuadre, el velo y la tipografía.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fuera la caja del módulo.

   El armazón del tema mete cada página de módulo en `.tw2-panel`, que trae
   borde, fondo y relleno. Para una página de contenido a pantalla completa eso
   sobra: se ve un recuadro alrededor de todo y el fondo propio de la página
   queda encajonado dentro, sin llegar a los lados.

   Se anula SOLO aquí. `.tw2-panel` es la caja genérica del tema (style.css) y
   la usan la armería, la tienda, el perfil y los sideboxes; tocarla allí las
   dejaría a todas sin marco.

   Los dos selectores llevan dos clases, así que ganan a los del tema por
   especificidad y da igual en qué orden se carguen las dos hojas.
   ------------------------------------------------------------------------- */
.tw2-panel.type-shorturl {
	border: 0;
	background: transparent;
}

/* Sin relleno para que el fondo de la página llegue a los bordes; el aire
   interior ya lo pone `.su-page-body`. */
.tw2-panel.type-shorturl > .tw2-panel-body { padding: 0; }

/* El titular se queda, pero sin la raya de debajo: era el remate de la caja
   que acabamos de quitar. */
.tw2-panel.type-shorturl > .tw2-panel-head {
	padding-left: 0;
	padding-right: 0;
	border-bottom: 0;
}

.su-page--bg {
	background-color: var(--ink);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

/* El velo va en un pseudoelemento y no como segunda capa de `background-image`
   porque la imagen viene del `style` en línea: si el degradado estuviera en la
   misma propiedad, el atributo lo sobrescribiría entero. */
.su-page--bg::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(16, 13, 12, .45) 0%,
		rgba(16, 13, 12, .82) 55%,
		var(--ink) 100%
	);
}

.su-page { position: relative; margin: 0 auto; }

/* -------------------------------------------------------------------------
   El hueco antes del pie.

   Se apilaban tres rellenos y sumaban hasta 192 px de nada entre el final del
   texto y el logotipo:

       .su-page-body   relleno inferior   hasta  64 px
       .tw2-panel      margen inferior           24 px
       .tw2-section    relleno inferior   hasta 104 px

   Los tres son razonables por separado —cada uno se escribió sin saber de los
   otros dos—, pero juntos dejaban media pantalla vacía. Aquí se recortan a
   unos 64 px en total, y solo en estas páginas: `.tw2-section` y `.tw2-panel`
   son del armazón del tema y los comparten la armería, la tienda y el resto.
   ------------------------------------------------------------------------- */
.su-page-body {
	position: relative;
	z-index: 1;
	padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}

.tw2-panel.type-shorturl { margin-bottom: 0; }

body.module-shorturl .tw2-section { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* El texto lo escribe el editor del panel, así que llega con marcado libre. */
.su-page-body h1,
.su-page-body h2,
.su-page-body h3,
.su-page-body h4 { color: var(--head); font-family: var(--display, inherit); }

.su-page-body a       { color: var(--gold); }
.su-page-body a:hover { color: var(--ember); }
.su-page-body p       { line-height: 1.7; }
.su-page-body img     { max-width: 100%; height: auto; }

.su-page-body table { width: 100%; display: block; overflow-x: auto; }

/* =========================================================================
   Tarjetas de contenido  (.cx-*)

   Un solo juego de clases para desafíos, clases y razas: las tres páginas son
   la misma rejilla de fichas con ilustración, título y texto.

   LO IMPORTANTE: el contenido guardado en la base NO lleva ninguna ruta de
   imagen. La ilustración se elige por la clase de la tarjeta y el archivo se
   nombra aquí. Es a propósito: TinyMCE reescribe cualquier `src` absoluto a
   relativo al guardar (`../../../application/...`), y esa ruta resuelve
   distinto desde /challenges que desde /page/desafios — las imágenes se
   rompían en cuanto alguien abriera el editor y pulsara Guardar. Sin `src` en
   el contenido, el texto se puede editar sin miedo.
   ========================================================================= */

.cx-intro {
	max-width: 62ch;
	margin: 0 0 2rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--dim);
}

/* `auto-fit` y no un número fijo de columnas: pasa de tres a dos y a una sola
   por sí solo, sin una consulta de medios por cada salto. */
.cx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.cx-card {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 1.1rem;
	padding: 1.25rem;
	border: 1px solid var(--line-soft);
	background: rgba(12, 9, 8, .55);
	transition: border-color .18s ease, background .18s ease;
}

.cx-card:hover {
	border-color: var(--gold);
	background: rgba(12, 9, 8, .75);
}

/* La ilustración. Va en un pseudoelemento para que el contenido no tenga que
   traer una etiqueta <img> que el editor pueda estropear.

   Sin imagen asignada queda un hueco discreto en vez de un icono roto: así una
   tarjeta nueva se ve incompleta, no defectuosa. */
.cx-card::before {
	content: "";
	width: 64px;
	height: 64px;
	border: 1px solid var(--line-soft);
	border-radius: 2px;
	background-color: rgba(255, 255, 255, .03);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
	transition: transform .18s ease;
}

.cx-card:hover::before { transform: scale(1.06); }

/* Ficha sin ilustración: zonas y mazmorras, donde no hay arte por entrada.
   Se quita la columna del icono en vez de dejar el hueco vacío, que en una
   lista de catorce cantaría mucho más que en una tarjeta suelta. */
.cx-card--plain { grid-template-columns: 1fr; }
.cx-card--plain::before { display: none; }

.cx-body h3 {
	margin: 0 0 .5rem;
	color: var(--head);
	font-size: 1.1rem;
}

.cx-body p { margin: 0 0 .65rem; line-height: 1.65; }
.cx-body p:last-child { margin-bottom: 0; }

/* Línea de datos: recompensa, razas disponibles, clases disponibles. */
.cx-meta {
	padding-top: .6rem;
	border-top: 1px solid var(--line-soft);
	font-size: .88rem;
	color: var(--dim);
}

.cx-meta b { color: var(--head); font-weight: 600; }

.cx-label {
	margin-right: .4rem;
	color: var(--gold);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Lista de nombres sueltos: las veintidós zonas clásicas revisadas, donde una
   ficha por entrada sería mucho ruido para un dato de una palabra. */
.cx-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 2.5rem;
}

.cx-tags span {
	padding: .35rem .75rem;
	border: 1px solid var(--line-soft);
	background: rgba(12, 9, 8, .55);
	font-size: .88rem;
	color: var(--dim);
	transition: border-color .18s ease, color .18s ease;
}

.cx-tags span:hover { border-color: var(--gold); color: var(--head); }

/* Cabecera de sección: facciones en razas, bloques en zonas */
.cx-faction {
	margin: 2rem 0 1rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--line-soft);
	font-size: 1.35rem;
}

.cx-faction--alianza { color: #6aa9ff; }
.cx-faction--horda   { color: #d9534f; }

@media (max-width: 480px) {
	.cx-card { grid-template-columns: 1fr; gap: .75rem; }
}

/* -------------------------------------------------------------------------
   Las ilustraciones, una por tarjeta.

   Las usan /challenges, /classes y /races. La página de bandas ya no: lleva
   su HTML, su CSS y sus imágenes dentro de la propia página.
   ------------------------------------------------------------------------- */

/* --- Desafíos (ch-*.webp, ya en el tema) --- */
.cx-ch-hardcore::before    { background-image: url(../../../assets/img/ch-hardcore.webp); }
.cx-ch-craftmaster::before { background-image: url(../../../assets/img/ch-craftmaster.webp); }
.cx-ch-slow::before        { background-image: url(../../../assets/img/ch-slow.webp); }
.cx-ch-l1l::before         { background-image: url(../../../assets/img/ch-l1l.webp); }
.cx-ch-boaring::before     { background-image: url(../../../assets/img/ch-boaring.webp); }
.cx-ch-warmode::before     { background-image: url(../../../assets/img/ch-warmode.webp); }
.cx-ch-exhaustion::before  { background-image: url(../../../assets/img/ch-exhaustion.webp); }
.cx-ch-vagrant::before     { background-image: url(../../../assets/img/ch-vagrant.webp); }

/* --- Clases (class-*.png, ya en el tema) --- */
.cx-warrior::before { background-image: url(../../../assets/img/class-warrior.png); }
.cx-paladin::before { background-image: url(../../../assets/img/class-paladin.png); }
.cx-hunter::before  { background-image: url(../../../assets/img/class-hunter.png); }
.cx-rogue::before   { background-image: url(../../../assets/img/class-rogue.png); }
.cx-priest::before  { background-image: url(../../../assets/img/class-priest.png); }
.cx-shaman::before  { background-image: url(../../../assets/img/class-shaman.png); }
.cx-mage::before    { background-image: url(../../../assets/img/class-mage.png); }
.cx-warlock::before { background-image: url(../../../assets/img/class-warlock.png); }
.cx-druid::before   { background-image: url(../../../assets/img/class-druid.png); }

/* --- Razas (race-*.png, 128x128) ---
   Siete son los iconos de raza de la pantalla de creación de personaje. Elfo
   de la noche, alto elfo y goblin no existían en ese juego, así que salen de
   los retratos que ya trae FusionCMS en `application/images/avatars/`. */
.cx-human::before    { background-image: url(../../../assets/img/race-human.png); }
.cx-dwarf::before    { background-image: url(../../../assets/img/race-dwarf.png); }
.cx-nightelf::before { background-image: url(../../../assets/img/race-nightelf.png); }
.cx-gnome::before    { background-image: url(../../../assets/img/race-gnome.png); }
.cx-highelf::before  { background-image: url(../../../assets/img/race-highelf.png); }
.cx-orc::before      { background-image: url(../../../assets/img/race-orc.png); }
.cx-undead::before   { background-image: url(../../../assets/img/race-undead.png); }
.cx-tauren::before   { background-image: url(../../../assets/img/race-tauren.png); }
.cx-troll::before    { background-image: url(../../../assets/img/race-troll.png); }
.cx-goblin::before   { background-image: url(../../../assets/img/race-goblin.png); }