/**
 * Sistema de diseño del frontend de Battle Academy.
 *
 * Los tokens de 03_Frontend.md §4 se declaran como variables CSS y no como
 * valores literales: el modo oscuro pasa a ser un cambio de variables en lugar
 * de una duplicación de reglas, y una capa de presentación futura puede
 * redefinirlos sin reescribir nada.
 *
 * Este archivo fija el contrato de estilos de la v1. Los componentes de juego
 * llegan en la Fase 4; aquí están las bases sobre las que se apoyarán.
 */

.ba-app {
	/* --- Color: paleta de 03 §4 -------------------------------------- */
	--ba-primary: #4f46e5;
	--ba-secondary: #0ea5e9;
	--ba-success: #16a34a;
	--ba-danger: #dc2626;
	--ba-warning: #d97706;

	--ba-bg: #ffffff;
	--ba-surface: #f6f7f9;
	--ba-border: #d5d8dd;
	--ba-text: #1f2430;
	--ba-text-muted: #5b6270;

	/* --- Forma y espaciado: escala de 4 px ---------------------------- */
	--ba-radius-sm: 6px;
	--ba-radius-md: 10px;
	--ba-radius-lg: 16px;
	--ba-space: 4px;

	/* --- Duraciones de animación (03 §4) ------------------------------ */
	--ba-anim-hit: 400ms;
	--ba-anim-hp: 600ms;
	--ba-anim-eliminate: 800ms;
	--ba-anim-page: 200ms;

	box-sizing: border-box;
	color: var(--ba-text);
	font-size: 16px;
	line-height: 1.5;

	/* Hace que los controles nativos (campos, desplazadores) sigan el mismo
	   esquema que los tokens, en lugar de quedarse en claro. */
	color-scheme: light dark;
}

.ba-app *,
.ba-app *::before,
.ba-app *::after {
	box-sizing: inherit;
}

/*
 * El color se declara sobre cada elemento, no se hereda de .ba-app.
 *
 * La herencia pierde contra cualquier regla del tema que apunte directamente
 * al elemento: basta un `.entry-content strong { color: #1e1e1e }` para dejar
 * el código de sala en negro sobre fondo negro. Declararlo aquí es lo único
 * que garantiza el contraste sea cual sea el tema activo.
 */
.ba-app h1,
.ba-app h2,
.ba-app h3,
.ba-app h4,
.ba-app p,
.ba-app li,
.ba-app span,
.ba-app strong,
.ba-app label,
.ba-app div,
.ba-app summary {
	color: inherit;
}

.ba-app,
.ba-panel,
.ba-room,
.ba-player,
.ba-option,
.ba-self,
.ba-log,
.ba-ranking__row,
.ba-question {
	color: var(--ba-text);
}

/* Las clases con color propio se reafirman después, para que el bloque
   anterior no las aplane. */
.ba-app .ba-muted,
.ba-app .ba-player__hp,
.ba-app .ba-player__status,
.ba-app .ba-log li {
	color: var(--ba-text-muted);
}

/* El modo oscuro es una redefinición de tokens, nunca reglas duplicadas. */
@media (prefers-color-scheme: dark) {
	.ba-app {
		--ba-primary: #6366f1;
		--ba-secondary: #38bdf8;
		--ba-success: #22c55e;
		--ba-danger: #ef4444;
		--ba-warning: #f59e0b;

		--ba-bg: #0f1115;
		--ba-surface: #181b21;
		--ba-border: #2d3139;
		--ba-text: #e8eaed;
		--ba-text-muted: #9ca3af;
	}
}

.ba-panel {
	background: var(--ba-surface);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-lg);
	padding: calc(var(--ba-space) * 6);
}

.ba-muted {
	color: var(--ba-text-muted);
	font-size: 14px;
}

/* --- Botón base -------------------------------------------------------- */

.ba-app .ba-btn {
	display: inline-block;
	background: var(--ba-primary);
	color: #fff;
	border: 0;
	border-radius: var(--ba-radius-sm);
	/* 44 px de alto mínimo: objetivo táctil accesible (03 §11). */
	min-height: 44px;
	padding: 11px 20px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: filter var(--ba-anim-page) ease;
}

.ba-app .ba-btn:hover,
.ba-app .ba-btn:focus {
	filter: brightness(1.1);
	color: #fff;
}

/* El foco siempre visible: nunca outline:none sin sustituto (03 §11). */
.ba-app .ba-btn:focus-visible {
	outline: 2px solid var(--ba-secondary);
	outline-offset: 2px;
}

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

/*
 * Respetado desde el primer día para que la capa de animación de la Fase 6
 * herede el comportamiento sin tener que reintroducirlo.
 */
@media (prefers-reduced-motion: reduce) {
	.ba-app {
		--ba-anim-hit: 1ms;
		--ba-anim-hp: 1ms;
		--ba-anim-eliminate: 1ms;
		--ba-anim-page: 1ms;
	}

	.ba-app *,
	.ba-app *::before,
	.ba-app *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}

/* ======================================================================
   Componentes
   Diseñados primero a 375 px de ancho; el escritorio es la ampliación.
   ====================================================================== */

.ba-app h2,
.ba-app h3 {
	margin: 0 0 calc(var(--ba-space) * 3);
	line-height: 1.25;
}

.ba-app .ba-actions {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--ba-space) * 2);
	margin-top: calc(var(--ba-space) * 4);
}

.ba-app .ba-btn--ghost {
	background: transparent;
	color: var(--ba-text);
	border: 1px solid var(--ba-border);
}

.ba-app .ba-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.ba-app .ba-input {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-sm);
	background: var(--ba-bg);
	color: var(--ba-text);
	font: inherit;
	font-variant-numeric: tabular-nums;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ba-app .ba-input::placeholder {
	color: var(--ba-text-muted);
	opacity: 1;
	letter-spacing: normal;
}

.ba-app .ba-input:focus-visible {
	outline: 2px solid var(--ba-secondary);
	outline-offset: 1px;
}

.ba-join-row {
	display: flex;
	gap: calc(var(--ba-space) * 2);
	margin-bottom: calc(var(--ba-space) * 3);
}

/* --- Salón ------------------------------------------------------------- */

.ba-rooms {
	display: grid;
	gap: calc(var(--ba-space) * 2);
}

.ba-room {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--ba-space) * 3);
	padding: calc(var(--ba-space) * 3);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-md);
	background: var(--ba-bg);
}

/* El código de sala se dicta en voz alta y se teclea a mano: conviene que
   destaque y que sus caracteres tengan ancho fijo. */
.ba-app .ba-room strong {
	color: var(--ba-text);
	font-variant-numeric: tabular-nums;
	letter-spacing: .08em;
}

/* --- Código de sala ---------------------------------------------------- */

.ba-code {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: .22em;
	text-align: center;
	font-variant-numeric: tabular-nums;
	padding: calc(var(--ba-space) * 4) 0;
	color: var(--ba-primary);
}

/* --- Participantes ----------------------------------------------------- */

.ba-players {
	display: flex;
	gap: calc(var(--ba-space) * 2);
	overflow-x: auto;
	padding-bottom: calc(var(--ba-space) * 2);
	-webkit-overflow-scrolling: touch;
}

.ba-player {
	flex: 0 0 auto;
	width: 132px;
	display: block;
	text-align: left;
	padding: calc(var(--ba-space) * 2);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-md);
	background: var(--ba-bg);
	color: var(--ba-text);
	font: inherit;
	cursor: pointer;
	position: relative;
	transition: transform var(--ba-anim-hit) ease, border-color var(--ba-anim-page) ease;
}

.ba-player.is-me {
	cursor: default;
	border-color: var(--ba-primary);
}

.ba-player.is-target {
	border-color: var(--ba-warning);
	box-shadow: 0 0 0 2px var(--ba-warning);
}

.ba-player.is-out {
	opacity: .4;
	pointer-events: none;
}

.ba-player.is-hit {
	transform: translateX(-3px);
	border-color: var(--ba-danger);
}

.ba-player__name {
	display: block;
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ba-player__hp,
.ba-player__status {
	display: block;
	font-size: 11px;
	color: var(--ba-text-muted);
}

/* Número flotante de daño. Es el gancho visual del evento DAMAGE_APPLIED. */
.ba-hit {
	position: absolute;
	top: 4px;
	right: 8px;
	font-weight: 800;
	color: var(--ba-danger);
	pointer-events: none;
}

/* --- Barra de vida ----------------------------------------------------- */

.ba-hp {
	height: 6px;
	margin: calc(var(--ba-space) * 1) 0;
	border-radius: 999px;
	background: var(--ba-border);
	overflow: hidden;
}

.ba-hp__fill {
	height: 100%;
	width: 100%;
	background: var(--ba-success);
	transition: width var(--ba-anim-hp) ease;
}

.ba-hp__fill.is-low {
	background: var(--ba-danger);
}

/* --- Arena ------------------------------------------------------------- */

.ba-arena {
	display: grid;
	gap: calc(var(--ba-space) * 4);
}

.ba-arena__bar {
	display: flex;
	align-items: center;
	gap: calc(var(--ba-space) * 3);
}

.ba-round {
	font-weight: 700;
	white-space: nowrap;
}

.ba-clock {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	min-width: 2.5ch;
	text-align: right;
}

.ba-timer {
	flex: 1 1 auto;
	height: 8px;
	border-radius: 999px;
	background: var(--ba-border);
	overflow: hidden;
}

.ba-timer__fill {
	height: 100%;
	background: var(--ba-secondary);
	/* Lineal a propósito: representa el paso del tiempo, no una transición. */
	transition: width 120ms linear;
}

.ba-timer__fill.is-urgent {
	background: var(--ba-warning);
}

/* --- Pregunta ---------------------------------------------------------- */

.ba-question {
	padding: calc(var(--ba-space) * 4);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-lg);
	background: var(--ba-bg);
}

.ba-question__text {
	margin: 0 0 calc(var(--ba-space) * 4);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
}

.ba-options {
	display: grid;
	gap: calc(var(--ba-space) * 2);
}

.ba-option {
	display: flex;
	align-items: center;
	gap: calc(var(--ba-space) * 3);
	/* 48 px de alto mínimo: pensado para el pulgar (03 §6.4). */
	min-height: 48px;
	padding: calc(var(--ba-space) * 2) calc(var(--ba-space) * 3);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-md);
	background: var(--ba-surface);
	color: var(--ba-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.ba-option:hover:not(:disabled) {
	border-color: var(--ba-primary);
}

.ba-option:focus-visible {
	outline: 2px solid var(--ba-secondary);
	outline-offset: 2px;
}

/* Sin esto, una opción larga empuja al indicador de tecla en lugar de
   repartirse el ancho disponible. */
.ba-option__text {
	flex: 1 1 auto;
	min-width: 0;
}

.ba-lobby {
	text-align: center;
}

.ba-option__key {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: var(--ba-radius-sm);
	background: var(--ba-border);
	font-size: 12px;
	font-weight: 700;
}

/* El acierto y el fallo llevan siempre texto además de color: el color nunca
   es el único indicador (03 §4 y §11). */
.ba-option.is-correct {
	border-color: var(--ba-success);
	box-shadow: inset 3px 0 0 var(--ba-success);
}

.ba-option.is-wrong {
	border-color: var(--ba-danger);
	box-shadow: inset 3px 0 0 var(--ba-danger);
}

.ba-feedback {
	margin-top: calc(var(--ba-space) * 3);
	font-weight: 600;
}

.ba-feedback.is-correct {
	color: var(--ba-success);
}

.ba-feedback.is-wrong {
	color: var(--ba-danger);
}

.ba-feedback .ba-muted {
	font-weight: 400;
	margin: calc(var(--ba-space) * 1) 0 0;
}

/* --- Barra propia ------------------------------------------------------ */

.ba-self {
	padding: calc(var(--ba-space) * 3);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-md);
	background: var(--ba-surface);
}

.ba-self__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(var(--ba-space) * 2);
	font-size: 14px;
}

.ba-hp-text {
	font-variant-numeric: tabular-nums;
}

.ba-streak {
	color: var(--ba-warning);
	font-weight: 600;
}

/* --- Registro de combate ----------------------------------------------- */

.ba-log {
	list-style: none;
	margin: 0;
	padding: calc(var(--ba-space) * 2) calc(var(--ba-space) * 3);
	max-height: 132px;
	overflow-y: auto;
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-md);
	font-size: 13px;
	color: var(--ba-text-muted);
}

.ba-log li {
	padding: 2px 0;
}

/* --- Clasificación ----------------------------------------------------- */

.ba-ranking {
	list-style: none;
	counter-reset: ba-rank;
	margin: 0;
	padding: 0;
	display: grid;
	gap: calc(var(--ba-space) * 2);
}

.ba-ranking__row {
	counter-increment: ba-rank;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--ba-space) * 3);
	padding: calc(var(--ba-space) * 3);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-md);
	background: var(--ba-bg);
}

.ba-ranking__row::before {
	content: counter(ba-rank);
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--ba-border);
	font-size: 12px;
	font-weight: 700;
}

.ba-ranking__row.is-winner {
	border-color: var(--ba-warning);
}

.ba-ranking__row.is-winner::before {
	background: var(--ba-warning);
	color: #1f2430;
}

.ba-level {
	margin: calc(var(--ba-space) * 4) 0 0;
	font-weight: 600;
	color: var(--ba-primary);
}

.ba-panel--error {
	border-color: var(--ba-danger);
}

/* ======================================================================
   Concha: navegación y contenido
   ====================================================================== */

.ba-nav {
	display: flex;
	gap: calc(var(--ba-space) * 1);
	overflow-x: auto;
	margin-bottom: calc(var(--ba-space) * 4);
	padding-bottom: calc(var(--ba-space) * 1);
	border-bottom: 1px solid var(--ba-border);
	-webkit-overflow-scrolling: touch;
}

.ba-app .ba-nav__item {
	flex: 0 0 auto;
	/* 44 px de alto: el mismo objetivo táctil que el resto de controles. */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0 calc(var(--ba-space) * 4);
	border-radius: var(--ba-radius-sm) var(--ba-radius-sm) 0 0;
	color: var(--ba-text-muted);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color var(--ba-anim-page) ease, border-color var(--ba-anim-page) ease;
}

.ba-app .ba-nav__item:hover {
	color: var(--ba-text);
}

.ba-app .ba-nav__item.is-active {
	color: var(--ba-primary);
	border-bottom-color: var(--ba-primary);
}

.ba-app .ba-nav__item:focus-visible {
	outline: 2px solid var(--ba-secondary);
	outline-offset: -2px;
}

.ba-content {
	min-height: 200px;
}

/* ======================================================================
   Panel del jugador
   ====================================================================== */

.ba-hero {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--ba-space) * 4);
	justify-content: space-between;
	align-items: center;
	padding: calc(var(--ba-space) * 5);
	margin-bottom: calc(var(--ba-space) * 4);
	border-radius: var(--ba-radius-lg);
	background: linear-gradient(135deg, var(--ba-primary), var(--ba-secondary));
	color: #fff;
}

.ba-app .ba-hero h2,
.ba-app .ba-hero p,
.ba-app .ba-hero .ba-muted {
	color: #fff;
}

.ba-hero__title {
	margin: 0;
	font-size: 26px;
}

.ba-app .ba-hero .ba-muted {
	opacity: .85;
}

.ba-hero__actions {
	display: grid;
	gap: calc(var(--ba-space) * 2);
}

.ba-hero__actions .ba-actions {
	margin-top: 0;
}

/* El botón fantasma sobre el degradado necesita su propio borde: el color
   de borde por defecto desaparece contra el fondo. */
.ba-app .ba-hero .ba-btn--ghost {
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

.ba-app .ba-hero .ba-input {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .4);
	color: #fff;
}

.ba-app .ba-hero .ba-input::placeholder {
	color: rgba(255, 255, 255, .7);
}

.ba-dash {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: calc(var(--ba-space) * 4);
	margin-bottom: calc(var(--ba-space) * 4);
	align-items: start;
}

.ba-card {
	padding: calc(var(--ba-space) * 4);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-lg);
	background: var(--ba-surface);
	color: var(--ba-text);
}

.ba-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--ba-space) * 2);
	margin-bottom: calc(var(--ba-space) * 3);
}

.ba-app .ba-card__head h3 {
	margin: 0;
	font-size: 16px;
}

.ba-app .ba-card__sub {
	margin: calc(var(--ba-space) * 4) 0 calc(var(--ba-space) * 2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ba-text-muted);
}

.ba-card__hint,
.ba-card__foot {
	font-size: 13px;
}

.ba-card__foot {
	margin: calc(var(--ba-space) * 4) 0 0;
}

.ba-app .ba-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--ba-secondary);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	text-decoration: underline;
}

/* --- Identidad y progresión -------------------------------------------- */

.ba-identity {
	display: flex;
	align-items: center;
	gap: calc(var(--ba-space) * 3);
	margin-bottom: calc(var(--ba-space) * 4);
}

/* La identidad lleva al perfil de WordPress. Se comporta como enlace pero no
   se pinta como uno: hereda el color del texto y solo se subraya el nombre al
   pasar por encima, para que la tarjeta siga leyéndose como una ficha y no
   como una lista de enlaces. */
.ba-app .ba-identity--link {
	text-decoration: none;
	color: inherit;
	border-radius: var(--ba-radius-md);
	cursor: pointer;
	transition: background-color var(--ba-anim-page) ease;

	/* Relleno para que el área pulsable sea cómoda con el dedo, compensado con
	   margen negativo para que la ficha no se desalinee con el resto. */
	padding: calc(var(--ba-space) * 2);
	margin-left: calc(var(--ba-space) * -2);
	margin-right: calc(var(--ba-space) * -2);
}

/* El realce del foco va sobre la tarjeta, que sí tiene fondo propio, así que
   aquí un tinte translúcido sí compone bien. */
.ba-app .ba-identity--link:hover,
.ba-app .ba-identity--link:focus-visible {
	background: color-mix(in srgb, var(--ba-primary) 22%, transparent);
}

.ba-app .ba-identity--link:hover .ba-identity__name,
.ba-app .ba-identity--link:focus-visible .ba-identity__name {
	text-decoration: underline;
}

.ba-app .ba-card__title-link {
	color: inherit;
	text-decoration: none;
}

.ba-app .ba-card__title-link:hover,
.ba-app .ba-card__title-link:focus-visible {
	text-decoration: underline;
}

.ba-avatar {
	border-radius: 999px;
	flex: 0 0 auto;
}

.ba-identity__name {
	display: block;
	font-size: 17px;
	margin-bottom: 4px;
}

.ba-chip {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--ba-border);
	color: var(--ba-text);
	font-size: 12px;
	font-weight: 600;
}

.ba-chip--title {
	background: var(--ba-primary);
	color: #fff;
}

.ba-chip--ok {
	background: var(--ba-success);
	color: #fff;
}

.ba-chip--xp {
	background: var(--ba-secondary);
	color: #061018;
}

.ba-chip--mode {
	margin-left: calc(var(--ba-space) * 2);
}

.ba-level {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-weight: 600;
	margin-bottom: calc(var(--ba-space) * 1);
}

.ba-xp {
	height: 8px;
	border-radius: 999px;
	background: var(--ba-border);
	overflow: hidden;
}

.ba-xp__fill {
	height: 100%;
	background: var(--ba-warning);
	transition: width var(--ba-anim-hp) ease;
}

/* --- Cifras ------------------------------------------------------------ */

.ba-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: calc(var(--ba-space) * 2);
}

.ba-stat {
	padding: calc(var(--ba-space) * 2) calc(var(--ba-space) * 3);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-md);
	background: var(--ba-bg);
	text-align: center;
}

.ba-stat__label {
	display: block;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ba-text-muted);
}

.ba-stat__value {
	display: block;
	font-size: 19px;
	font-variant-numeric: tabular-nums;
	margin-top: 2px;
}

.ba-stat__hint {
	display: block;
	font-size: 11px;
	color: var(--ba-text-muted);
}

/* --- Temas activos ----------------------------------------------------- */

.ba-topics,
.ba-topic-picker {
	display: grid;
	gap: calc(var(--ba-space) * 2);
}

.ba-topic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--ba-space) * 2);
	padding: calc(var(--ba-space) * 2) calc(var(--ba-space) * 3);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-md);
	background: var(--ba-bg);
	font-size: 14px;
}

.ba-topic-picker {
	max-height: 260px;
	overflow-y: auto;
	padding-right: calc(var(--ba-space) * 1);
}

.ba-topic-option {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--ba-space) * 2);
	/* 44 px de alto: el selector se usa con el pulgar tanto como con el ratón. */
	min-height: 44px;
	padding: calc(var(--ba-space) * 2);
	border-radius: var(--ba-radius-sm);
	font-size: 14px;
	cursor: pointer;
}

.ba-topic-option:hover {
	background: var(--ba-bg);
}

/* --- Batallas recientes ------------------------------------------------ */

.ba-recent {
	display: grid;
	gap: calc(var(--ba-space) * 2);
}

.ba-recent__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--ba-space) * 3);
	padding: calc(var(--ba-space) * 3);
	border: 1px solid var(--ba-border);
	border-left-width: 3px;
	border-radius: var(--ba-radius-md);
	background: var(--ba-bg);
	font-size: 14px;
}

.ba-recent__row.is-winner {
	border-left-color: var(--ba-warning);
}

/* ======================================================================
   La Torre del Erudito
   ====================================================================== */

.ba-hero--tower {
	background: linear-gradient(135deg, #4c1d95, var(--ba-primary));
}

.ba-kp {
	padding: calc(var(--ba-space) * 2) calc(var(--ba-space) * 4);
	border-radius: var(--ba-radius-md);
	background: rgba(255, 255, 255, .14);
	text-align: center;
}

.ba-app .ba-kp .ba-stat__label,
.ba-app .ba-kp .ba-stat__value {
	color: #fff;
}

/* --- Mapa de pisos ----------------------------------------------------- */

.ba-floors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: calc(var(--ba-space) * 4);
}

.ba-floor {
	padding: calc(var(--ba-space) * 4);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-lg);
	background: var(--ba-surface);
	color: var(--ba-text);
}

/* Un piso bloqueado se atenúa, pero se mantiene legible: ver lo que viene
   es parte del incentivo para seguir subiendo. */
.ba-floor.is-locked {
	opacity: .6;
}

.ba-floor.is-conquered {
	border-color: var(--ba-success);
}

.ba-floor__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--ba-space) * 2);
	margin-bottom: calc(var(--ba-space) * 2);
}

.ba-app .ba-floor__name {
	margin: 0 0 calc(var(--ba-space) * 2);
	font-size: 18px;
}

.ba-chip--open {
	background: var(--ba-secondary);
	color: #061018;
}

.ba-chip--locked {
	background: var(--ba-border);
	color: var(--ba-text-muted);
}

.ba-chip--boss {
	background: var(--ba-danger);
	color: #fff;
}

/* Repetición de un piso ya conquistado: informa, no alarma, así que se queda
   en el tono de aviso y no en el de peligro. */
.ba-chip--replay {
	background: var(--ba-warning);
	color: #1a1200;
}

.ba-replay-hint {
	margin-top: calc(var(--ba-space) * 2);
	padding-left: calc(var(--ba-space) * 2);
	border-left: 2px solid var(--ba-warning);
	color: var(--ba-text-muted);
}

.ba-guardian {
	margin: calc(var(--ba-space) * 3) 0;
	padding: calc(var(--ba-space) * 3);
	border-left: 3px solid var(--ba-danger);
	border-radius: 0 var(--ba-radius-sm) var(--ba-radius-sm) 0;
	background: var(--ba-bg);
	font-size: 13px;
}

.ba-guardian__name {
	display: block;
	color: var(--ba-danger);
	margin-bottom: 2px;
}

.ba-locked {
	display: block;
	margin-top: calc(var(--ba-space) * 2);
	font-size: 13px;
	color: var(--ba-text-muted);
	font-style: italic;
}

/* --- Combate ----------------------------------------------------------- */

.ba-enemy-card {
	padding: calc(var(--ba-space) * 4);
	border: 1px solid var(--ba-danger);
	border-radius: var(--ba-radius-lg);
	background: var(--ba-surface);
	color: var(--ba-text);
}

.ba-enemy-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--ba-space) * 2);
	margin-bottom: calc(var(--ba-space) * 2);
	font-size: 17px;
}

/* Una opción descartada se deja visible pero inerte: ocultarla movería el
   resto y haría perder la referencia de dónde estaba cada cosa. */
.ba-option.is-discarded {
	opacity: .35;
	text-decoration: line-through;
}

.ba-outcome {
	text-align: center;
}

.ba-outcome.is-won {
	border-color: var(--ba-warning);
}

/* --- Árbol de habilidades ---------------------------------------------- */

.ba-branches {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: calc(var(--ba-space) * 4);
}

.ba-branch {
	display: grid;
	gap: calc(var(--ba-space) * 3);
	align-content: start;
}

.ba-app .ba-branch__name {
	margin: 0;
	text-align: center;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ba-text-muted);
}

.ba-skill {
	padding: calc(var(--ba-space) * 4);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-md);
	background: var(--ba-surface);
	color: var(--ba-text);
	font-size: 14px;
}

.ba-skill.is-owned {
	border-color: var(--ba-success);
}

.ba-skill.is-available {
	border-color: var(--ba-primary);
}

.ba-skill__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--ba-space) * 2);
	margin-bottom: calc(var(--ba-space) * 2);
}

/* ======================================================================
   Contenido propio e historial
   ====================================================================== */

.ba-owned {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: calc(var(--ba-space) * 4);
	margin-top: calc(var(--ba-space) * 4);
}

.ba-owned .ba-card.is-winner {
	border-color: var(--ba-warning);
}

.ba-question-preview {
	margin: 0 0 calc(var(--ba-space) * 2);
	font-weight: 600;
	line-height: 1.4;
}

.ba-app .ba-link--danger {
	color: var(--ba-danger);
}

/* --- Formularios ------------------------------------------------------- */

.ba-field {
	display: block;
	margin-bottom: calc(var(--ba-space) * 4);
}

.ba-field__label {
	display: block;
	margin-bottom: calc(var(--ba-space) * 1);
	font-size: 13px;
	font-weight: 600;
	color: var(--ba-text-muted);
}

/* Los campos de texto no llevan el tratamiento del campo de código: ni
   mayúsculas forzadas ni espaciado entre letras. */
.ba-app .ba-input--text {
	width: 100%;
	text-transform: none;
	letter-spacing: normal;
	font-variant-numeric: normal;
}

.ba-app textarea.ba-input--text {
	min-height: 0;
	padding: 10px 14px;
	line-height: 1.5;
	resize: vertical;
}

.ba-option-rows {
	display: grid;
	gap: calc(var(--ba-space) * 2);
}

.ba-option-rows .ba-option-row {
	display: flex;
	align-items: center;
	gap: calc(var(--ba-space) * 3);
}

/* --- Reproducción ------------------------------------------------------ */

.ba-replay {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 420px;
	overflow-y: auto;
	font-size: 14px;
}

.ba-replay__row {
	display: flex;
	align-items: baseline;
	gap: calc(var(--ba-space) * 3);
	padding: calc(var(--ba-space) * 2) 0;
	border-bottom: 1px solid var(--ba-border);
	color: var(--ba-text);
}

.ba-replay__row:last-child {
	border-bottom: 0;
}

.ba-replay__seq {
	flex: 0 0 auto;
	min-width: 3.5ch;
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	color: var(--ba-text-muted);
}

/* El inicio de ronda separa visualmente los bloques del combate. */
.ba-replay__row--round_started {
	font-weight: 700;
	color: var(--ba-secondary);
}

.ba-replay__row--player_eliminated {
	color: var(--ba-danger);
}

.ba-replay__row--battle_finished {
	font-weight: 700;
	color: var(--ba-warning);
}

/* ======================================================================
   Panel del Maestro
   ====================================================================== */

.ba-analytics {
	display: grid;
	gap: calc(var(--ba-space) * 1);
	margin-bottom: calc(var(--ba-space) * 4);
}

.ba-analytics__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(var(--ba-space) * 3);
	padding: calc(var(--ba-space) * 2) calc(var(--ba-space) * 3);
	border-bottom: 1px solid var(--ba-border);
	font-size: 14px;
	color: var(--ba-text);
}

.ba-analytics__row:last-child {
	border-bottom: 0;
}

/* El primer elemento de una lista de peores es el que hay que mirar. */
.ba-analytics__row:first-child {
	font-weight: 600;
}

.ba-chip--alert {
	background: var(--ba-danger);
	color: #fff;
}

/* Una batalla pausada se distingue de un vistazo: es un estado que alguien
   tiene que deshacer a mano. */
.ba-card.is-paused {
	border-color: var(--ba-warning);
	border-left-width: 3px;
}

/* ======================================================================
   Capa de efectos
   Dibuja por encima sin capturar clics ni ocupar espacio en el flujo.
   ====================================================================== */

.ba-app {
	position: relative;
}

.ba-fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 5;
}

.ba-fx__shot {
	position: absolute;
	top: 0;
	left: 0;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 999px;
	background: var(--ba-warning);
	box-shadow: 0 0 12px var(--ba-warning);
}

.ba-fx__banner {
	position: absolute;
	top: 38%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 10px 26px;
	border-radius: var(--ba-radius-lg);
	background: var(--ba-primary);
	color: #fff;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: .02em;
	white-space: nowrap;
}

/* ======================================================================
   Vista de proyección
   Pensada para verse desde el fondo de un aula: todo más grande, sin
   controles y sin nada que invite a tocar.
   ====================================================================== */

.ba-app--watch {
	max-width: 1400px;
	margin: 0 auto;
}

.ba-watch {
	display: grid;
	gap: calc(var(--ba-space) * 5);
}

.ba-watch__bar {
	display: flex;
	align-items: baseline;
	gap: calc(var(--ba-space) * 5);
	font-size: 28px;
	font-weight: 700;
	color: var(--ba-text);
}

.ba-watch__code {
	letter-spacing: .2em;
	color: var(--ba-primary);
	font-variant-numeric: tabular-nums;
}

.ba-watch__clock {
	margin-left: auto;
	font-size: 44px;
	font-variant-numeric: tabular-nums;
}

.ba-watch__players {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: calc(var(--ba-space) * 3);
}

.ba-watch__player {
	padding: calc(var(--ba-space) * 4);
	border: 2px solid var(--ba-border);
	border-radius: var(--ba-radius-lg);
	background: var(--ba-surface);
	color: var(--ba-text);
}

.ba-watch__player.is-out {
	opacity: .4;
}

.ba-watch__player.is-winner {
	border-color: var(--ba-warning);
}

.ba-watch__name {
	display: block;
	font-size: 22px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ba-watch__hp {
	display: block;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	color: var(--ba-text-muted);
}

.ba-watch__player .ba-hp {
	height: 12px;
	margin: calc(var(--ba-space) * 2) 0;
}

.ba-watch__flag {
	display: block;
	min-height: 1.4em;
	font-size: 15px;
	font-weight: 600;
	color: var(--ba-secondary);
}

.ba-watch__question {
	padding: calc(var(--ba-space) * 5);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-lg);
	background: var(--ba-bg);
	color: var(--ba-text);
}

.ba-watch__text {
	margin: 0 0 calc(var(--ba-space) * 4);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
}

.ba-watch__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: calc(var(--ba-space) * 3);
}

.ba-watch__option {
	display: flex;
	align-items: center;
	gap: calc(var(--ba-space) * 3);
	padding: calc(var(--ba-space) * 3);
	border: 1px solid var(--ba-border);
	border-radius: var(--ba-radius-md);
	font-size: 20px;
	color: var(--ba-text);
}

.ba-watch__letter {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: var(--ba-radius-sm);
	background: var(--ba-border);
	font-weight: 800;
}

.ba-watch__log {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 18px;
	color: var(--ba-text-muted);
}

.ba-watch__log li {
	padding: 3px 0;
}

/* --- Tableta ----------------------------------------------------------- */

@media (min-width: 640px) {
	.ba-options {
		grid-template-columns: 1fr 1fr;
	}

	.ba-question__text {
		font-size: 26px;
	}

	.ba-player {
		width: 150px;
	}
}

/* --- Escritorio -------------------------------------------------------- */

/*
   Los temas de bloques encierran todo lo que va dentro del contenido en su
   columna de lectura:

       .is-layout-constrained > :where(:not(.alignfull)…) { max-width: … }

   Para un texto está bien, pero esto es una aplicación. Con esa regla el
   juego se quedaba en una tira estrecha en mitad de un monitor ancho, y la
   barra de navegación —que necesita más de 700 px— salía recortada y con
   desplazamiento horizontal aun sobrando pantalla.

   El selector se repite (`.ba-app.ba-app`) para ganar en especificidad a esa
   regla sin recurrir a `!important` y sin depender de qué hoja de estilos se
   cargue antes.

   Las rejillas interiores ya se reparten solas con `auto-fit`: basta con
   darles sitio para que se reorganicen, sin tocarlas una por una.
*/

@media (min-width: 900px) {
	.ba-app.ba-app {
		max-width: 1200px;
		margin-inline: auto;
	}

	/* Con sitio de sobra, las pestañas se reparten en varias líneas en lugar
	   de esconderse tras un desplazamiento que en escritorio nadie busca. */
	.ba-nav {
		flex-wrap: wrap;
		overflow-x: visible;
	}

	/* El código son seis caracteres. En móvil ocupar toda la línea está bien;
	   estirado a lo ancho de un monitor queda un campo enorme para escribir
	   media palabra. */
	.ba-join-row {
		max-width: 420px;
	}
}

/* ------------------------------------------------------------------
   Ayuda: indicaciones de primera vez y manual (RF-ayuda).

   El panel vive en una ranura propia por encima del contenido, así que
   no hereda nada de la vista y no se pierde cuando esta repinta.
   ------------------------------------------------------------------ */

.ba-app .ba-nav__help {
	margin-left: auto;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-family: inherit;
}

.ba-help-slot:empty {
	display: none;
}

/* ------------------------------------------------------------------
   Aviso de partida en curso.

   Vive en su propia ranura, por encima del contenido, para seguir a la
   vista mientras se está en cualquier otra pantalla: es justo lo que
   hacía falta cuando alguien tocaba el menú en mitad de un combate.
   ------------------------------------------------------------------ */

.ba-resume-slot:empty {
	display: none;
}

.ba-app .ba-resume {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--ba-space) * 3);
	margin-bottom: calc(var(--ba-space) * 4);
	padding: calc(var(--ba-space) * 3) calc(var(--ba-space) * 4);
	border: 1px solid var(--ba-warning);
	border-left: 3px solid var(--ba-warning);
	border-radius: var(--ba-radius-md);

	/* Fondo opaco de la paleta, no un tinte translúcido. `.ba-app` no pinta
	   fondo, así que un color semitransparente deja ver el del tema —blanco—
	   mientras el texto sigue el esquema del juego, que con la preferencia
	   oscura es casi blanco: se quedaba ilegible. */
	background: var(--ba-surface);
	color: var(--ba-text);
}

.ba-app .ba-resume__text {
	flex: 1 1 220px;
	font-weight: 600;
}

.ba-app .ba-resume__btn {
	flex: 0 0 auto;
}

/* Quien no está dando señales se atenúa, para que se vea de un vistazo por
   quién no merece la pena esperar. */
.ba-app .ba-player.is-away {
	opacity: 0.55;
}

@media (max-width: 600px) {
	.ba-app .ba-resume__btn {
		flex: 1 1 100%;
	}
}

.ba-app .ba-help {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(var(--ba-space) * 3);
	margin-bottom: calc(var(--ba-space) * 4);
	padding: calc(var(--ba-space) * 4);
	border: 1px solid var(--ba-border);
	border-left: 3px solid var(--ba-primary);
	border-radius: var(--ba-radius);
	background: var(--ba-surface);
	color: var(--ba-text);
}

.ba-app .ba-help__body {
	flex: 1 1 260px;
	min-width: 0;
}

.ba-app .ba-help__title {
	margin: 0 0 calc(var(--ba-space) * 2);
	color: var(--ba-text);
	font-size: 17px;
	font-weight: 700;
}

.ba-app .ba-help__list {
	margin: 0;
	padding-left: calc(var(--ba-space) * 5);
	color: var(--ba-text-muted);
	font-size: 15px;
	line-height: 1.55;
}

.ba-app .ba-help__list li + li {
	margin-top: calc(var(--ba-space) * 2);
}

.ba-app .ba-help__actions {
	flex: 0 0 auto;
}

.ba-app .ba-manual__section + .ba-manual__section {
	margin-top: calc(var(--ba-space) * 5);
	padding-top: calc(var(--ba-space) * 5);
	border-top: 1px solid var(--ba-border);
}

/* En pantalla estrecha el botón baja debajo del texto en lugar de
   estrujarlo contra el borde. */
@media (max-width: 600px) {
	.ba-app .ba-help__actions {
		flex: 1 1 100%;
	}

	.ba-app .ba-help__close {
		width: 100%;
	}
}