/**
 * MMORPG Experience — Capa de tipografía (última en cascada)
 * Cargar DESPUÉS de: Google Fonts, Tailwind CDN, style_v2.css
 *
 * Variables --rpg-font-* están en style_v2.css :root.
 *   --rpg-font-display → MedievalSharp (títulos heroicos, nombres)
 *   --rpg-font-ui      → Cinzel (subtítulos, botones, UI)
 *   --rpg-font-body    → Montserrat (párrafos, datos, inputs de formulario)
 *
 * Utilidades: .font-rpg-display | .font-rpg-ui | .font-rpg-body
 * .text-rpgName = solo marca “MMORPG EXPERIENCE” / nombres con degradado oro (MedievalSharp)
 * .rpg-section-title = títulos de pantalla h2 (Cinzel), alineado con la referencia del splash
 */

.font-rpg-display {
  font-family: var(--rpg-font-display) !important;
}
.font-rpg-ui {
  font-family: var(--rpg-font-ui) !important;
}
.font-rpg-body {
  font-family: var(--rpg-font-body) !important;
}

/* =============================================================================
   Splash #splashScreen — paridad con referencia v0.1.7 (tipografía + brillo + borde fino)
   Todo con prefijo #splashScreen: al cerrar el splash no afecta al resto de la UI.
   ============================================================================= */
#splashScreen .splash-cinzel-line {
  font-family: "Cinzel", Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.35em !important;
  color: rgba(251, 191, 36, 0.92) !important;
  text-shadow: 0 0 14px rgba(245, 158, 11, 0.42);
}

/* text-shadow casi no se ve con background-clip: text; el halo dorado va con drop-shadow */
#splashScreen h1.text-rpgName {
  font-family: "MedievalSharp", cursive !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.08 !important;
  background: linear-gradient(to bottom, #ffffff 0%, #fde68a 38%, #f59e0b 92%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.72)) drop-shadow(0 0 38px rgba(245, 158, 11, 0.38))
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.95)) !important;
}

/* Lema bajo el logo: Cinzel claro (referencia v0.1.7 splash), no el mismo tratamiento que el título MedievalSharp */
#splashScreen .splash-tagline {
  font-family: "Cinzel", Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: rgba(254, 252, 232, 0.96) !important;
  color: rgba(254, 252, 232, 0.96) !important;
  filter: none !important;
  text-shadow: 0 0 18px rgba(245, 158, 11, 0.35), 0 2px 10px rgba(0, 0, 0, 0.75);
}

#splashScreen button {
  font-family: "Cinzel", Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}

#splashScreen input,
#splashScreen input::placeholder {
  font-family: "Montserrat", system-ui, sans-serif !important;
}

#splashScreen .splash-cinzel-ui {
  font-family: "Cinzel", Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
}

#splashScreen .splash-cinzel-ui-muted {
  font-family: "Cinzel", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  font-size: 0.7rem !important;
}

#splashScreen #emailAuthPanel > p:first-of-type {
  font-family: "Cinzel", Georgia, serif !important;
  letter-spacing: 0.06em !important;
}

/* Tarjeta de estado: borde fino (referencia); sin marco grueso .splash-panel-framed */
#splashScreen #splashLoadingCard.splash-glass {
  border: 1px solid rgba(245, 158, 11, 0.42) !important;
  border-radius: 1rem !important;
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#splashScreen #splashLoginSkeletonWrap > p:first-child {
  font-family: "Cinzel", Georgia, serif !important;
  letter-spacing: 0.08em !important;
}

#splashScreen #splashGatePanel .splash-gate-panel__text,
#splashScreen #splashSyncLabel {
  font-family: "Cinzel", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
}

#splashScreen #splashVersionLabel {
  font-family: "Montserrat", system-ui, sans-serif !important;
  letter-spacing: 0.2em !important;
}

/* Tailwind font-sans en elementos sin clase RPG no debe ganar a los títulos del juego */
main .text-rpgName,
header .text-rpgName {
  font-family: var(--rpg-font-display) !important;
}

main .rpg-menu-title {
  font-family: var(--rpg-font-ui) !important;
}

header .rpg-character-name,
main .rpg-character-name {
  font-family: "MedievalSharp", cursive !important;
}

/* Pantalla elegir héroe: título de sección = Cinzel (.rpg-section-title); nombre no hereda sans del <button> */
#heroChoice h2.rpg-section-title {
  text-shadow: 0 0 18px rgba(245, 158, 11, 0.28), 0 2px 8px rgba(0, 0, 0, 0.65);
}

#heroChoice .rpg-character-name,
#heroChoice .hero-select-btn .rpg-character-name {
  font-family: "MedievalSharp", cursive !important;
}

header #headerCharacterName.rpg-character-name {
  font-family: "MedievalSharp", cursive !important;
}

/* =============================================================================
   Tipografía por secciones (v0.1.9) — jerarquía: display / UI / body
   Sin tocar #splashScreen (ya definido arriba) ni #logBox del chat de ciudad.
   ============================================================================= */

/* --- 1. Cabecera --- */
header.header-bar-ancient-gold h1.text-rpgName {
  filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.5)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.88)) !important;
}

header.header-bar-ancient-gold .rpg-header-tagline {
  font-family: var(--rpg-font-ui) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

@media (min-width: 768px) {
  header.header-bar-ancient-gold .rpg-header-tagline {
    font-size: 0.78rem !important;
  }
}

#optionsIcon {
  font-family: var(--rpg-font-ui) !important;
}

header.header-bar-ancient-gold .text-xs.uppercase.tracking-wide {
  font-family: var(--rpg-font-ui) !important;
}

/* --- 2. Elección de héroe --- */
#heroChoice p.text-sm,
#heroChoice #savedHeroPreview {
  font-family: var(--rpg-font-body) !important;
}

#heroChoice #downloadPanel h3,
#heroChoice #downloadPanel .text-\[10px\] {
  font-family: var(--rpg-font-ui) !important;
}

#heroChoice #downloadPanel a {
  font-family: var(--rpg-font-ui) !important;
  letter-spacing: 0.04em !important;
}

/* --- 3. Ciudad: rejilla de edificios + panel lateral --- */
#citySection button[id^="building"] p {
  font-family: var(--rpg-font-body) !important;
  line-height: 1.45 !important;
}

#citySection button[id^="building"] span.uppercase {
  font-family: var(--rpg-font-ui) !important;
  letter-spacing: 0.14em !important;
}

#buildingPanel #buildingSubtitle {
  font-family: var(--rpg-font-body) !important;
  line-height: 1.5 !important;
}

#buildingPanel #buildingTag {
  font-family: var(--rpg-font-ui) !important;
  letter-spacing: 0.08em !important;
}

/* --- 4. Creación de personaje --- */
#characterCreation .ancient-gold-panel p.leading-relaxed,
#characterCreation .ancient-gold-panel .text-sm.md\:text-base.leading-relaxed,
#characterCreation #creationGuideText,
#characterCreation #characterSummary,
#characterCreation .attr-row .text-xs,
#characterCreation input:not([type="checkbox"]) {
  font-family: var(--rpg-font-body) !important;
}

#characterCreation h3.uppercase {
  font-family: var(--rpg-font-ui) !important;
}

#characterCreation p.text-xs.uppercase.text-rpgStat {
  font-family: var(--rpg-font-ui) !important;
  letter-spacing: 0.18em !important;
}

/* --- 5. Combate (solo envoltorio; log interno sigue compacto) --- */
#combatView #combatPauseWaveMsg,
#combatView #combatPauseWaveCountdown {
  font-family: var(--rpg-font-ui) !important;
}

#combatView #combatLogPanelToggle,
#combatView #combatLogToggle,
#combatView .combat-log-focus-select,
#combatView .combat-log-pause-btn {
  font-family: var(--rpg-font-ui) !important;
}

/* --- 6. Crónicas: título ya forzado; input chat + botón --- */
#chroniclesSection #cityChatInput {
  font-family: var(--rpg-font-body) !important;
}

/* --- 7. Modales (opciones / backup / guía) --- */
#optionsModal h3,
#backupExportModal h3,
#backupImportModal h3,
#installGuideModal h3 {
  font-family: var(--rpg-font-ui) !important;
}

#optionsModal button,
#backupExportModal button,
#backupImportModal button {
  font-family: var(--rpg-font-ui) !important;
}

/* Pergamino post-combate */
#chronicleScrollOverlay .rpg-menu-title {
  font-family: var(--rpg-font-ui) !important;
}

/* =============================================================================
   Última palabra (con #rpg-root): el CDN de Tailwind inyecta #rpg-root .utilidad
   con ID; estas reglas emparejan especificidad y fijan fuentes con !important.
   ============================================================================= */
#rpg-root {
  font-family: var(--rpg-font-body) !important;
}

#rpg-root .text-rpgName {
  font-family: var(--rpg-font-display) !important;
}

#rpg-root .rpg-section-title {
  font-family: var(--rpg-font-ui) !important;
}

#rpg-root .rpg-menu-title {
  font-family: var(--rpg-font-ui) !important;
}

#rpg-root .rpg-header-tagline {
  font-family: var(--rpg-font-ui) !important;
}

#rpg-root .rpg-character-name {
  font-family: var(--rpg-font-display) !important;
}