/* ══════════════════════════════════════════
   MAZMORRA IA — Estilos globales
   ══════════════════════════════════════════ */

:root {
  --negro:        #080705;
  --oscuro:       #110e0b;
  --panel:        #181410;
  --panel2:       #1f1a14;
  --borde:        #352718;
  --borde-med:    #5a3e1e;
  --borde-brillo: #8a6030;
  --oro:          #c8911e;
  --oro-claro:    #e8b84b;
  --oro-dim:      #7a5510;
  --rojo:         #7a1515;
  --rojo-med:     #a82020;
  --rojo-brillo:  #c0392b;
  --rojo-peligro: #d04040;
  --verde:        #1e4d1e;
  --verde-brillo: #3d8b3d;
  --verde-vida:   #4caf50;
  --azul:         #152a40;
  --azul-brillo:  #3a7abf;
  --texto:        #d0be9e;
  --texto-med:    #a08060;
  --texto-dim:    #6a5040;
  --radio: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--negro);
  color: var(--texto);
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 17px;
  line-height: 1.7;
  min-height: 100vh;
}

/* ── PANTALLAS (index.html) ── */
.pantalla { display: none; max-width: 680px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.pantalla.activa { display: block; }

/* ── PANTALLA FIN DE PARTIDA ── */
.pantalla-fin {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(8,7,5,0.96);
  animation: aparecer 0.5s ease;
}
.fin-victoria { background: rgba(5,10,5,0.97); }
.fin-derrota  { background: rgba(10,5,5,0.97); }
.fin-contenido {
  max-width: 560px; width: 90%; text-align: center;
  padding: 2.5rem 2rem;
  border: 1px solid var(--borde-med);
  border-radius: var(--radio);
  background: var(--panel);
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
}
.fin-icono   { font-size: 4rem; line-height: 1; }
.fin-titulo  {
  font-family: 'Cinzel', serif; font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700; letter-spacing: 0.1em;
}
.fin-victoria .fin-titulo { color: var(--oro-claro); text-shadow: 0 0 30px rgba(232,184,75,0.4); }
.fin-derrota  .fin-titulo { color: var(--rojo-peligro); text-shadow: 0 0 30px rgba(208,64,64,0.3); }
.fin-subtitulo { color: var(--texto-dim); font-style: italic; }
.fin-stats {
  display: flex; gap: 2rem; justify-content: center;
  padding: 1rem; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  width: 100%;
}
.fin-stat-item { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.fin-stat-val  { font-family: 'Cinzel', serif; font-size: 1.6rem; color: var(--oro-claro); }
.fin-stat-lbl  { font-size: 0.75rem; color: var(--texto-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.fin-quests, .fin-eventos { width: 100%; text-align: left; }
.fin-quests-titulo, .fin-eventos-titulo {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto-dim); margin-bottom: 0.4rem;
}
.fin-quest-item  { font-size: 0.9rem; color: var(--verde-vida); padding: 0.15rem 0; }
.fin-evento-item { font-size: 0.82rem; color: var(--texto-med); padding: 0.1rem 0; font-style: italic; }

/* ── PANTALLA DE ACCESO ── */
.acceso-wrap {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 100vh;
  padding: 2rem 1rem; text-align: center;
}
.acceso-ornamento {
  font-size: 1rem; color: var(--oro-dim); letter-spacing: 0.5em;
  margin: 1rem 0;
}
.acceso-subtitulo {
  font-family: 'Crimson Text', serif; font-style: italic;
  color: var(--texto-dim); font-size: 1.1rem; margin-bottom: 0.5rem;
}
.acceso-form {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; margin-top: 2rem; width: 100%; max-width: 340px;
}
.acceso-input {
  width: 100%; padding: 0.85rem 1.1rem;
  background: var(--panel); border: 1px solid var(--borde-med);
  border-radius: var(--radio); color: var(--texto);
  font-family: 'Crimson Text', serif; font-size: 1.1rem;
  text-align: center; letter-spacing: 0.1em;
  transition: border-color 0.2s;
}
.acceso-input:focus { outline: none; border-color: var(--oro); }
.acceso-input.error { border-color: var(--rojo-peligro); animation: shake 0.35s ease; }
.acceso-error {
  color: var(--rojo-peligro); font-size: 0.95rem; font-style: italic;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60%  { transform: translateX(-6px); }
  40%,80%  { transform: translateX(6px); }
}

/* ── HERO ── */
.hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 2rem;
}
.titulo-hero {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  color: var(--oro);
  text-shadow: 0 0 40px rgba(200,145,30,0.35);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.subtitulo-hero {
  color: var(--texto-dim);
  font-style: italic;
  font-size: 1rem;
}
.hero-ornamento {
  color: var(--oro-dim);
  letter-spacing: 0.5em;
  font-size: 0.9rem;
  margin: 0.8rem 0;
}

/* ── CENTRO ── */
.centro { display: flex; flex-direction: column; gap: 1.5rem; }
.botones-inicio { display: flex; flex-direction: column; gap: 0.75rem; }

/* ── PANEL ── */
.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-top: 2px solid var(--borde-med);
  border-radius: var(--radio);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.panel-titulo {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro-dim);
  margin-bottom: 1rem;
}

/* ── FORMULARIO ── */
.formulario { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 2rem; }
.campo { display: flex; flex-direction: column; gap: 0.4rem; }
.campo > label {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oro-dim);
}
.campo-ayuda { font-size: 0.8rem; color: var(--texto-dim); font-style: italic; }

/* ── INPUTS ── */
input[type="text"], input[type="password"], select, textarea {
  background: var(--oscuro);
  border: 1px solid var(--borde);
  color: var(--texto);
  font-family: 'Crimson Text', serif;
  font-size: 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radio);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
input[type="text"]:focus,
select:focus,
textarea:focus { border-color: var(--oro-dim); }
input::placeholder, textarea::placeholder { color: var(--texto-dim); font-style: italic; }
select option { background: var(--oscuro); }

input[type="range"] {
  width: 100%;
  accent-color: var(--oro);
  background: transparent;
  padding: 0.3rem 0;
}

/* ── BOTONES ── */
.btn {
  background: transparent;
  border: 1px solid var(--oro-dim);
  color: var(--oro);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radio);
  cursor: pointer;
  transition: all 0.18s;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn:hover  { background: rgba(200,145,30,0.12); border-color: var(--oro); color: var(--oro-claro); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-grande { width: 100%; padding: 0.9rem; font-size: 1rem; }
.btn-secundario { border-color: var(--borde-med); color: var(--texto-med); }
.btn-secundario:hover { border-color: var(--borde-brillo); color: var(--texto); }
.btn-pequeño { font-size: 0.75rem; padding: 0.4rem 0.9rem; }
.btn-volver {
  background: none; border: none; color: var(--texto-dim);
  font-family: 'Cinzel', serif; font-size: 0.8rem; cursor: pointer;
  letter-spacing: 0.1em; padding: 0; transition: color 0.2s;
}
.btn-volver:hover { color: var(--texto); }
.btn-icono {
  background: none; border: 1px solid var(--borde);
  color: var(--texto-med); font-size: 1rem;
  width: 34px; height: 34px; border-radius: var(--radio);
  cursor: pointer; transition: all 0.2s; display: flex;
  align-items: center; justify-content: center;
}
.btn-icono:hover { border-color: var(--borde-brillo); color: var(--texto); }

/* ── CABECERA PÁGINA ── */
.cabecera-pagina {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 0 1.5rem; border-bottom: 1px solid var(--borde);
  margin-bottom: 1.5rem;
}
.titulo-pagina {
  font-family: 'Cinzel', serif; font-size: 1.1rem;
  color: var(--oro); font-weight: 600;
}

/* ── GÉNEROS ── */
.grid-generos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}
.genero-btn {
  background: var(--oscuro); border: 1px solid var(--borde);
  color: var(--texto); font-family: 'Crimson Text', serif;
  padding: 0.75rem 0.5rem; border-radius: var(--radio);
  cursor: pointer; text-align: center; transition: all 0.18s;
}
.genero-btn:hover, .genero-btn.sel {
  border-color: var(--oro-dim); color: var(--oro-claro);
  background: rgba(200,145,30,0.07);
}
.genero-emoji { font-size: 1.6rem; display: block; margin-bottom: 0.3rem; }
.genero-nombre { font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.05em; }

/* ── CLASES ── */
.grid-clases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.4rem;
}
.clase-btn {
  background: var(--oscuro); border: 1px solid var(--borde);
  color: var(--texto); font-family: 'Crimson Text', serif;
  font-size: 0.9rem; padding: 0.5rem 0.4rem;
  border-radius: var(--radio); cursor: pointer;
  text-align: center; transition: all 0.18s;
}
.clase-btn:hover, .clase-btn.sel {
  border-color: var(--borde-brillo); color: var(--oro-claro);
  background: rgba(200,145,30,0.05);
}

/* ── OPCIONES RÁPIDAS TRASFONDO ── */
.opciones-rapidas {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem;
}
.opcion-rapida {
  background: var(--oscuro); border: 1px solid var(--borde);
  color: var(--texto-med); font-family: 'Crimson Text', serif;
  font-size: 0.85rem; padding: 0.3rem 0.7rem;
  border-radius: 20px; cursor: pointer; transition: all 0.15s;
}
.opcion-rapida:hover, .opcion-rapida.sel {
  border-color: var(--borde-brillo); color: var(--oro-claro);
}

/* ── STATS ── */
.stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem;
}
.stat-caja {
  background: var(--oscuro); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 0.5rem; text-align: center;
}
.stat-nombre { font-size: 0.65rem; color: var(--texto-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.stat-valor { font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--oro-claro); }
.stat-mod { font-size: 0.75rem; }
.stat-mod.pos { color: var(--verde-brillo); }
.stat-mod.neg { color: var(--rojo-brillo); }

/* ── TRASFONDO ── */
.seccion-trasfondo {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--oro-dim);
  border-radius: var(--radio);
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.trasfondo-titulo {
  font-family: 'Cinzel', serif; font-size: 0.85rem;
  letter-spacing: 0.1em; color: var(--oro); margin-bottom: 0;
}
.trasfondo-desc { font-size: 0.9rem; color: var(--texto-dim); font-style: italic; }

/* ── RADIO ── */
.radio-grupo { display: flex; flex-direction: column; gap: 0.5rem; }
.radio-opcion {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: var(--oscuro); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 0.75rem 1rem; cursor: pointer;
  transition: border-color 0.18s;
}
.radio-opcion:hover { border-color: var(--borde-med); }
.radio-opcion input[type="radio"] { margin-top: 3px; accent-color: var(--oro); flex-shrink: 0; }
.radio-opcion span { display: flex; flex-direction: column; gap: 0.2rem; }
.radio-opcion strong { font-family: 'Cinzel', serif; font-size: 0.85rem; color: var(--texto); }
.radio-opcion small { font-size: 0.82rem; color: var(--texto-dim); font-style: italic; }

/* ── ALERTAS ── */
.alerta { padding: 0.75rem 1rem; border-radius: var(--radio); font-size: 0.9rem; }
.alerta-error { background: rgba(160,32,32,0.15); border: 1px solid var(--rojo-med); color: #e06060; }
.alerta-ok    { background: rgba(45,106,45,0.15); border: 1px solid var(--verde-brillo); color: var(--verde-brillo); }

/* ── SALA ENCONTRADA ── */
.sala-info { display: flex; flex-direction: column; gap: 0.4rem; }
.sala-info p { font-size: 0.95rem; }
.sala-badge {
  display: inline-block; font-size: 0.7rem; padding: 0.2rem 0.5rem;
  border-radius: 20px; font-family: 'Cinzel', serif; letter-spacing: 0.08em;
}
.badge-verde { background: rgba(45,106,45,0.3); color: var(--verde-brillo); border: 1px solid var(--verde-brillo); }
.badge-gris  { background: rgba(100,80,50,0.3); color: var(--texto-dim); border: 1px solid var(--borde-med); }

/* ══════════════════════════════════════════
   PANTALLA DE JUEGO (game.html)
   ══════════════════════════════════════════ */

body.en-partida {
  overflow: hidden; height: 100vh; display: flex; flex-direction: column;
}

.layout-juego {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  height: 100vh;
  overflow: hidden;
}

/* ── PANEL LATERAL (ficha) ── */
.panel-lateral {
  background: var(--panel);
  border-right: 1px solid var(--borde);
  overflow-y: auto;
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.panel-lateral::-webkit-scrollbar { width: 3px; }
.panel-lateral::-webkit-scrollbar-thumb { background: var(--borde-med); }

.ficha-cabecera { border-bottom: 1px solid var(--borde); padding-bottom: 0.75rem; }
.ficha-nombre { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--oro-claro); font-weight: 600; }
.ficha-clase { font-size: 0.85rem; color: var(--texto-dim); font-style: italic; }

.ficha-hp { text-align: center; padding: 0.5rem 0; }
.hp-label { font-size: 0.7rem; color: var(--texto-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.hp-valor { font-family: 'Cinzel', serif; font-size: 1.6rem; color: var(--rojo-brillo); }
.hp-barra-cont { background: var(--oscuro); border-radius: 2px; height: 4px; margin-top: 0.3rem; overflow: hidden; }
.hp-barra { background: var(--rojo-brillo); height: 100%; transition: width 0.5s; }

.ficha-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem; }
.ficha-stat { background: var(--oscuro); border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.35rem; text-align: center; }
.fs-nombre { font-size: 0.6rem; color: var(--texto-dim); text-transform: uppercase; }
.fs-valor { font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--oro-claro); }
.fs-mod { font-size: 0.65rem; }

.ficha-seccion { border-top: 1px solid var(--borde); padding-top: 0.5rem; }
.ficha-seccion-titulo { font-family: 'Cinzel', serif; font-size: 0.7rem; color: var(--oro-dim); letter-spacing: 0.1em; margin-bottom: 0.4rem; }

.jugador-item { font-size: 0.85rem; padding: 0.25rem 0; display: flex; align-items: center; gap: 0.5rem; }
.jugador-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-dim); flex-shrink: 0; }
.jugador-dot.online { background: var(--verde-brillo); }
.jugador-activo { color: var(--oro-claro); }
.texto-dim { font-size: 0.82rem; color: var(--texto-dim); }

/* ── CENTRAL ── */
.panel-central {
  display: flex; flex-direction: column;
  background: var(--oscuro); overflow: hidden;
}

.barra-top {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}
.barra-sala { font-family: 'Cinzel', serif; font-size: 0.85rem; color: var(--oro); flex: 1; }
.barra-turno { font-size: 0.8rem; color: var(--texto-dim); font-style: italic; }

.narracion-scroll {
  flex: 1; overflow-y: auto; padding: 1.25rem;
  scroll-behavior: smooth;
}
.narracion-scroll::-webkit-scrollbar { width: 4px; }
.narracion-scroll::-webkit-scrollbar-thumb { background: var(--borde-med); border-radius: 2px; }

/* Mensaje DM */
.msg-dm {
  border-left: 3px solid var(--oro-dim);
  padding: 0.75rem 0 0.75rem 1rem;
  margin-bottom: 1.25rem;
  animation: aparecer 0.3s ease;
}
.msg-dm-etiqueta {
  font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.12em;
  color: var(--oro-dim); text-transform: uppercase; margin-bottom: 0.4rem;
}
.msg-dm-texto { color: var(--texto); font-style: italic; line-height: 1.85; }
.msg-dm-texto p { margin-bottom: 0.5rem; }

/* Mensaje jugador */
.msg-jugador {
  border-left: 3px solid var(--borde-med);
  padding: 0.5rem 0 0.5rem 1rem;
  margin-bottom: 1rem;
  opacity: 0.7;
  animation: aparecer 0.2s ease;
}
.msg-jugador-nombre { font-family: 'Cinzel', serif; font-size: 0.7rem; color: var(--borde-brillo); letter-spacing: 0.1em; margin-bottom: 0.2rem; }
.msg-jugador-texto { color: var(--texto-med); }

/* Evento */
.msg-evento {
  text-align: center; font-size: 0.8rem; color: var(--texto-dim);
  font-style: italic; margin: 0.5rem 0; animation: aparecer 0.2s ease;
}

/* Mecánica (tiradas, pociones, botín) */
.msg-mecanica {
  display: flex; align-items: flex-start; gap: 0.5rem;
  background: rgba(0,0,0,0.35); border: 1px solid var(--borde);
  border-left: 3px solid var(--oro-dim);
  border-radius: var(--radio); padding: 0.4rem 0.6rem;
  margin: 0.3rem 0; font-family: monospace; font-size: 0.78rem;
  color: var(--texto-med); animation: aparecer 0.25s ease;
}
.msg-mecanica-skill_check { border-left-color: var(--azul-brillo); }
.msg-mecanica-pocion      { border-left-color: var(--verde-vida); }
.msg-mecanica-loot        { border-left-color: var(--oro-claro); }
.msg-mecanica-inconsciente { border-left-color: var(--rojo-peligro); }
.mecanica-icono { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.mecanica-texto { flex: 1; line-height: 1.4; }
.mecanica-exito { color: var(--verde-vida); }
.mecanica-fallo { color: var(--rojo-peligro); }

/* Pensando */
.dm-pensando {
  display: flex; align-items: center; gap: 0.5rem;
  border-left: 3px solid var(--oro-dim);
  padding: 0.75rem 0 0.75rem 1rem;
  margin-bottom: 1rem; color: var(--texto-dim); font-style: italic; font-size: 0.95rem;
}
.punto { animation: parpadeo 1.2s infinite; }
.punto:nth-child(2) { animation-delay: 0.2s; }
.punto:nth-child(3) { animation-delay: 0.4s; }

@keyframes aparecer { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }
@keyframes parpadeo { 0%,80%,100% { opacity: 0; } 40% { opacity: 1; } }

.narracion-bienvenida {
  text-align: center; padding: 3rem 1rem;
  color: var(--texto-dim); font-style: italic;
}
.bienvenida-ornamento { color: var(--oro-dim); font-size: 1.5rem; margin-bottom: 1rem; }

/* ── ZONA ACCIÓN ── */
.zona-accion {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--borde);
  background: var(--panel);
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}

.opciones-dm { display: flex; flex-direction: column; gap: 0.4rem; }
.opcion-dm-btn {
  background: var(--oscuro); border: 1px solid var(--borde);
  color: var(--texto); font-family: 'Crimson Text', serif; font-size: 1rem;
  padding: 0.6rem 0.9rem; border-radius: var(--radio); cursor: pointer;
  text-align: left; transition: all 0.15s; line-height: 1.4;
}
.opcion-dm-btn:hover {
  border-color: var(--borde-brillo); color: var(--oro-claro);
  background: rgba(200,145,30,0.06);
}
.opcion-numero { font-family: 'Cinzel', serif; font-size: 0.7rem; color: var(--borde-brillo); margin-right: 0.4rem; }

.separador-o { text-align: center; font-size: 0.75rem; color: var(--texto-dim); letter-spacing: 0.15em; }

.fila-input { display: flex; gap: 0.5rem; }
.fila-input input { flex: 1; }

/* ── ZONA VOTACIÓN ── */
.zona-votacion {
  padding: 0.75rem 1rem; border-top: 1px solid var(--borde);
  background: rgba(30,75,30,0.1); flex-shrink: 0;
}
.votacion-titulo { font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--verde-brillo); margin-bottom: 0.5rem; letter-spacing: 0.1em; }
.opciones-voto { display: flex; flex-direction: column; gap: 0.4rem; }
.voto-btn {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--oscuro); border: 1px solid var(--verde);
  color: var(--texto); font-family: 'Crimson Text', serif; font-size: 0.95rem;
  padding: 0.55rem 0.9rem; border-radius: var(--radio); cursor: pointer;
  transition: all 0.15s; text-align: left;
}
.voto-btn:hover { border-color: var(--verde-brillo); color: var(--verde-brillo); }
.voto-btn.votado { border-color: var(--verde-brillo); background: rgba(45,106,45,0.2); }
.voto-conteo { font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--verde-brillo); }
.resultados-voto { font-size: 0.82rem; color: var(--texto-dim); margin-top: 0.4rem; font-style: italic; }

/* ── CHAT ── */
.panel-chat {
  background: var(--panel); border-left: 1px solid var(--borde);
  display: flex; flex-direction: column;
}
.chat-cabecera {
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--borde);
  font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--texto-dim);
  flex-shrink: 0;
}
.chat-mensajes { flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.chat-mensajes::-webkit-scrollbar { width: 3px; }
.chat-mensajes::-webkit-scrollbar-thumb { background: var(--borde-med); }
.chat-msg { font-size: 0.88rem; line-height: 1.5; }
.chat-msg-nombre { font-family: 'Cinzel', serif; font-size: 0.68rem; color: var(--borde-brillo); letter-spacing: 0.08em; }
.chat-msg-texto { color: var(--texto-med); }
.chat-input {
  display: flex; gap: 0.4rem; padding: 0.6rem;
  border-top: 1px solid var(--borde); flex-shrink: 0;
}
.chat-input input { flex: 1; font-size: 0.9rem; padding: 0.45rem 0.7rem; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--panel2); border: 1px solid var(--borde-med);
  color: var(--texto); font-size: 0.9rem; padding: 0.6rem 1.25rem;
  border-radius: var(--radio); pointer-events: none;
  opacity: 0; transition: opacity 0.3s; z-index: 100;
  font-family: 'Cinzel', serif; letter-spacing: 0.08em;
}
.toast.visible { opacity: 1; }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .layout-juego { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; }
  .panel-lateral { display: none; }
  .panel-lateral.visible { display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: 240px; z-index: 50; box-shadow: 4px 0 20px rgba(0,0,0,0.5); }
  .panel-chat { display: none; }
  .panel-chat.visible { display: flex; position: fixed; right: 0; top: 0; bottom: 0; width: 260px; z-index: 50; box-shadow: -4px 0 20px rgba(0,0,0,0.5); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-generos { grid-template-columns: repeat(2, 1fr); }
}

/* ── ZONA COMBATE ── */
.zona-combate {
  padding: 0.6rem 1rem;
  border-top: 2px solid var(--rojo-med);
  background: rgba(120,20,20,0.12);
  flex-shrink: 0;
  animation: aparecer 0.3s ease;
}
.combate-titulo {
  font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.12em;
  color: var(--rojo-brillo); text-transform: uppercase; margin-bottom: 0.5rem;
}
.combatientes-lista { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.4rem; }
.combatiente-item {
  display: grid; grid-template-columns: 1fr 80px 50px;
  align-items: center; gap: 0.5rem; font-size: 0.82rem;
  padding: 0.2rem 0;
}
.combatiente-activo { color: var(--oro-claro); font-weight: 600; }
.combatiente-nombre.enemigo { color: var(--rojo-brillo); }
.combatiente-hp-barra-cont { background: var(--oscuro); border-radius: 2px; height: 5px; overflow: hidden; }
.combatiente-hp-barra { height: 100%; transition: width 0.4s; border-radius: 2px; }
.combatiente-hp-num { font-family: 'Cinzel', serif; font-size: 0.72rem; color: var(--texto-dim); text-align: right; }
.combate-log {
  font-size: 0.75rem; color: var(--texto-dim); font-style: italic;
  border-top: 1px solid rgba(90,30,30,0.3); padding-top: 0.3rem; margin-top: 0.2rem;
}

/* ── JUGADORES SIDEBAR CON HP ── */
.jugador-item { font-size: 0.82rem; padding: 0.3rem 0; display: flex; align-items: flex-start; gap: 0.5rem; }
.jugador-hp-mini { background: var(--oscuro); border-radius: 2px; height: 3px; margin-top: 0.2rem; overflow: hidden; width: 100%; }
.jugador-hp-barra { background: var(--verde-vida); height: 100%; transition: width 0.4s; border-radius: 2px; }

/* ── INVENTARIO SIDEBAR ── */
.inventario-lista { display: flex; flex-direction: column; gap: 0.15rem; }
.inv-item { font-size: 0.8rem; color: var(--texto-med); padding: 0.1rem 0; }

/* ── QUESTS SIDEBAR ── */
.quest-item {
  background: var(--oscuro); border: 1px solid var(--borde);
  border-left: 2px solid var(--oro-dim); border-radius: var(--radio);
  padding: 0.4rem 0.5rem; margin-bottom: 0.3rem;
}
.quest-titulo { font-family: 'Cinzel', serif; font-size: 0.7rem; color: var(--oro-claro); letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.quest-desc { font-size: 0.75rem; color: var(--texto-dim); font-style: italic; margin-bottom: 0.15rem; }
.quest-prog { font-size: 0.7rem; color: var(--borde-brillo); }

/* ── SALA EN LISTA ── */
.sala-lista-item {
  background: var(--oscuro); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 0.75rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem; transition: border-color 0.2s;
}
.sala-lista-item:hover { border-color: var(--borde-med); }
.sala-lista-nombre { font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--texto); }
.sala-lista-info { font-size: 0.8rem; color: var(--texto-dim); }