@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  --negro:       #0d0a07;
  --negro2:      #141009;
  --carbon:      #1c1610;
  --gris1:       #2a2118;
  --gris2:       #4a3a28;
  --gris3:       #7a6a58;
  /* TEXTO: blanco cálido siempre legible */
  --txt:         #f2ead8;
  --txt2:        #c8b898;
  --txt3:        #908070;
  --oro:         #d4a840;
  --oro2:        #f0cc60;
  --oro3:        #8a6818;
  --sangre:      #8b1a1a;
  --sangre2:     #c0392b;
  --verde:       #2a5a2a;
  --verde2:      #4caf50;

  --f1: 'Cinzel Decorative', serif;
  --f2: 'Cinzel', serif;
  --f3: 'EB Garamond', serif;

  /* Mínimo táctil 48px */
  --tap: 48px;
  --r:   6px;
  --r2:  10px;
}

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

html, body {
  height: 100%; overflow: hidden;
  background: var(--negro);
  color: var(--txt);
  font-family: var(--f3);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(212,168,64,.05) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(139,26,26,.07) 0%, transparent 50%);
}

#app { position: relative; z-index: 1; height: 100%; width: 100%; display: flex; flex-direction: column; overflow: hidden; }

/* ── PANTALLAS ─────────────────────────────────────────────────────────── */
.pantalla { display: none; flex-direction: column; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.pantalla.activa { display: flex; }

/* ── ORNAMENTOS ────────────────────────────────────────────────────────── */
.linea-oro { height: 1px; background: linear-gradient(90deg, transparent, var(--oro3), var(--oro), var(--oro3), transparent); margin: .75rem 0; }

/* ── TIPOGRAFÍA ────────────────────────────────────────────────────────── */
h1 { font-family: var(--f1); color: var(--oro); text-shadow: 0 0 30px rgba(212,168,64,.5); line-height: 1.2; }
h2, h3 { font-family: var(--f2); color: var(--oro2); }

/* Clases de texto utilitarias */
.t-titulo  { font-family: var(--f1); color: var(--oro); }
.t-label   { font-family: var(--f2); font-size: .85rem; letter-spacing: .15em; text-transform: uppercase; color: var(--txt2); }
.t-desc    { font-family: var(--f3); font-size: 1.05rem; color: var(--txt); line-height: 1.6; }
.t-dim     { font-family: var(--f3); font-size: .95rem; color: var(--txt3); font-style: italic; }
.t-oro     { color: var(--oro); }
.t-sangre  { color: #ef9a9a; }

/* ── BOTONES — mínimo 48px táctil ──────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); padding: 0 1.5rem;
  border: none; border-radius: var(--r);
  font-family: var(--f2); font-size: 1rem; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: all .2s; touch-action: manipulation;
}
button { touch-action: manipulation; }
.btn:active { transform: scale(.97); }

.btn-p { /* primario */
  background: linear-gradient(135deg, var(--oro3), var(--oro), var(--oro3));
  color: #000; font-weight: 700;
  box-shadow: 0 2px 12px rgba(212,168,64,.35);
}
.btn-s { /* secundario */
  background: var(--gris1); color: var(--txt);
  border: 1px solid var(--gris2);
}
.btn-d { /* peligro */
  background: var(--sangre); color: var(--txt);
  border: 1px solid rgba(139,26,26,.5);
}
.btn-bloque { width: 100%; }
.btn-ico {
  min-width: var(--tap); min-height: var(--tap); padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: bold;
  background: var(--gris1); color: var(--txt);
  border: 1px solid var(--gris2); border-radius: var(--r);
  cursor: pointer;
}

/* ── INPUTS ────────────────────────────────────────────────────────────── */
input[type="text"], select {
  width: 100%; background: var(--gris1); border: 1px solid var(--gris2);
  border-radius: var(--r); color: var(--txt);
  font-family: var(--f3); font-size: 1.1rem;
  padding: .75rem 1rem; min-height: var(--tap);
  outline: none; -webkit-appearance: none;
}
input[type="text"]::placeholder { color: var(--txt3); }
input[type="text"]:focus, select:focus { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(212,168,64,.2); }
select option { background: var(--gris1); color: var(--txt); }

/* ── PANELES ────────────────────────────────────────────────────────────── */
.panel { background: var(--carbon); border: 1px solid var(--gris2); border-radius: var(--r2); padding: 1rem 1.25rem; }

/* ── BADGES ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; padding: .3rem .8rem;
  border-radius: 20px; font-family: var(--f2); font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
.badge-oro   { background: rgba(212,168,64,.15); color: var(--oro2);  border: 1px solid var(--oro3); }
.badge-rojo  { background: rgba(139,26,26,.25);  color: #ef9a9a;      border: 1px solid var(--sangre); }
.badge-verde { background: rgba(42,90,42,.3);    color: #a5d6a7;      border: 1px solid var(--verde); }

/* ════════════════════════════════════════════════════════════════════════
   PANTALLA INICIO
════════════════════════════════════════════════════════════════════════ */
#pantalla-inicio {
  align-items: center; justify-content: center;
  gap: 2.5rem; padding: 2rem 1.5rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}
.inicio-logo { text-align: center; }
.inicio-logo h1 { font-size: clamp(2.2rem, 10vw, 3.5rem); line-height: 1.1; margin-bottom: .75rem; }
/* ↓↓ subtítulo legible: blanco suave, no marrón */
.inicio-subtitulo {
  font-family: var(--f2); font-size: 1rem; letter-spacing: .25em;
  text-transform: uppercase; color: var(--txt2);
}
.inicio-acciones { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 360px; }
.inicio-acciones .btn { min-height: 56px; font-size: 1.1rem; }

/* ════════════════════════════════════════════════════════════════════════
   PANTALLA CONFIG
════════════════════════════════════════════════════════════════════════ */
#pantalla-config { overflow: hidden; }

.cfg-header {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1rem; background: var(--negro2);
  border-bottom: 1px solid var(--gris1); flex-shrink: 0;
}
/* Paso "1 de 4" — legible */
.cfg-paso  { font-family: var(--f2); font-size: .9rem; letter-spacing: .15em; color: var(--txt2); text-transform: uppercase; }
/* Título del paso — grande */
.cfg-titulo { font-family: var(--f1); font-size: 1.2rem; color: var(--oro); margin-top: .1rem; }

.pasos-bar { display: flex; gap: 5px; padding: .75rem 1rem; flex-shrink: 0; }
.paso-dot  { flex: 1; height: 5px; border-radius: 3px; background: var(--gris1); transition: all .2s; }
.paso-dot.done   { background: var(--oro3); }
.paso-dot.active { background: var(--oro); }

.cfg-section {
  display: none; flex-direction: column; gap: 1rem;
  flex: 1; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 1rem 1rem;
}
.cfg-section.activa { display: flex; }

/* Texto descriptivo de sección — legible */
.cfg-desc {
  font-family: var(--f3); font-size: 1.05rem;
  color: var(--txt2); line-height: 1.6; padding: .25rem 0;
}

/* Opciones seleccionables */
.opcion {
  padding: 1rem 1.25rem; background: var(--gris1);
  border: 2px solid var(--gris2); border-radius: var(--r2);
  cursor: pointer; transition: all .2s; min-height: var(--tap);
}
.opcion:active { transform: scale(.98); }
.opcion.sel    { border-color: var(--oro); background: rgba(212,168,64,.08); }
.opcion.dis    { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ── Grid de casos ─────────────────────────────────────── */
.casos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
}
.caso-btn {
  display: block;
  border: 2px solid transparent;
  border-radius: 5px;
  overflow: hidden;
  line-height: 0;
  transition: transform .15s, box-shadow .15s;
}
.caso-btn img {
  width: 100%;
  height: auto;
  display: block;
}
.caso-btn:not(.caso-dis) {
  border-color: var(--oro);
  box-shadow: 0 0 12px rgba(212,168,64,.4);
  cursor: pointer;
}
.caso-btn:not(.caso-dis):hover {
  transform: scale(1.06);
  box-shadow: 0 0 22px rgba(212,168,64,.75);
}
.caso-btn:not(.caso-dis):active {
  transform: scale(.96);
}
.caso-btn.caso-dis {
  opacity: 0.3;
  filter: grayscale(70%);
}
.caso-btn:not(.caso-dis):hover {
  transform: scale(1.06);
  box-shadow: 0 0 22px rgba(212,168,64,.75);
}
.caso-btn:not(.caso-dis):active {
  transform: scale(.96);
}
.caso-btn.caso-dis {
  opacity: 0.3;
  filter: grayscale(70%);
}

/* ↓↓ títulos de opción — blancos, legibles */
.opcion-tit  { font-family: var(--f2); font-size: 1.05rem; color: var(--txt); margin-bottom: .35rem; }
.opcion-meta { font-family: var(--f3); font-size: .95rem; color: var(--txt2); }

/* ─ NUM JUGADORES ─────────────────────────────────────────────────────── */
.num-jug-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 0;
}
.num-jug-row .t-label { font-size: 1rem; }
.num-jug-ctrl { display: flex; align-items: center; gap: 1rem; }
.num-jug-ctrl .btn-ico { min-width: 52px; min-height: 52px; font-size: 1.5rem; border-radius: var(--r2); }
.num-jug-num { font-family: var(--f1); font-size: 2rem; color: var(--oro); min-width: 2rem; text-align: center; }

/* ─ SLOT JUGADOR ─────────────────────────────────────────────────────── */
.jug-slot {
  background: var(--gris1); border: 1px solid var(--gris2);
  border-radius: var(--r2); padding: 1rem; display: flex; flex-direction: column; gap: .75rem;
}
.jug-slot-top { display: flex; align-items: center; gap: .75rem; }
.jug-num { font-family: var(--f1); font-size: 1.2rem; color: var(--oro3); min-width: 2rem; }

/* Grid 3x2 de personajes — tarjetas táctiles */
.pj-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
.pj-card {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .75rem .25rem; min-height: 90px;
  background: var(--carbon); border: 2px solid var(--gris2);
  border-radius: var(--r2); cursor: pointer; transition: all .18s;
  position: relative;
}
.pj-card:active { transform: scale(.96); }
.pj-card.sel   { border-color: var(--oro); background: rgba(212,168,64,.1); }
/* Ocupado por otro jugador — no tocable */
.pj-card.taken {
  opacity: .28; cursor: not-allowed; pointer-events: none;
}
.pj-card img {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--gris2);
}
.pj-card.sel img { border-color: var(--oro); }
/* Nombre del PJ: blanco legible */
.pj-card-nom {
  font-family: var(--f2); font-size: .72rem; letter-spacing: .05em;
  color: var(--txt2); text-align: center;
}
.pj-card.sel .pj-card-nom { color: var(--oro2); }
/* Badge "ocupado" */
.pj-card .taken-badge {
  display: none; position: absolute; top: 4px; right: 4px;
  font-size: .6rem; background: var(--sangre); color: #fff;
  border-radius: 3px; padding: 1px 4px;
}
/* ocultar badge normalmente, visible solo como referencia */

/* ════════════════════════════════════════════════════════════════════════
   PANTALLA PARTIDA
════════════════════════════════════════════════════════════════════════ */
.hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; background: var(--negro2);
  border-bottom: 1px solid var(--gris1); flex-shrink: 0; min-height: 52px;
}
/* Título en header — blanco */
.hdr-titulo { font-family: var(--f2); font-size: 1rem; letter-spacing: .08em; color: var(--txt); }
.hdr-fase   { font-family: var(--f1); font-size: .85rem; color: var(--oro); }

/* Reloj */
.reloj {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem 1rem; background: var(--negro2);
  border-bottom: 1px solid var(--gris1); flex-shrink: 0;
}
.reloj-lbl { font-family: var(--f2); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); min-width: 72px; }
.reloj-celdas { display: flex; gap: 3px; flex: 1; }
.reloj-celda  { flex: 1; height: 9px; border-radius: 3px; background: var(--gris1); border: 1px solid var(--gris2); }
.reloj-celda.anoc { background: var(--oro3); border-color: var(--oro); }
.reloj-celda.medi { background: #1a3a5c; border-color: #4a90c4; }
.reloj-celda.madr { background: #3a1a4a; border-color: #9c6abd; }
.reloj-num { font-family: var(--f1); font-size: 1rem; color: var(--oro); min-width: 2.5rem; text-align: right; }

/* Track Alerta */
.alerta-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; background: var(--negro2);
  border-bottom: 1px solid var(--gris1);
  min-height: var(--tap); cursor: pointer; flex-shrink: 0;
}
/* ↓↓ "ALERTA" legible: blanco */
.alerta-lbl  { font-family: var(--f2); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--txt2); min-width: 58px; flex-shrink: 0; }
.alerta-celdas { display: flex; gap: 3px; flex: 1; }
.alerta-celda {
  flex: 1; height: 22px; border-radius: 3px;
  border: 1px solid var(--gris2); background: var(--gris1);
}
.alerta-celda.a-verde   { background: #2d6a2d; border-color: #4caf50; }
.alerta-celda.a-lima    { background: #4a6a10; border-color: #8bc34a; }
.alerta-celda.a-ambar   { background: #7b6010; border-color: #f9a825; }
.alerta-celda.a-naranja { background: #7b3500; border-color: #ff6d00; }
.alerta-celda.a-rojo    { background: var(--sangre); border-color: var(--sangre2); box-shadow: 0 0 8px rgba(211,47,47,.5); }
.alerta-celda.a-critico { background: #1a0000; border-color: #b71c1c; animation: pulso 1s infinite; }
@keyframes pulso { 0%,100%{box-shadow:0 0 4px rgba(183,28,28,.5)} 50%{box-shadow:0 0 12px rgba(183,28,28,.9)} }
/* Estado de alerta — nombre del nivel */
.alerta-estado { font-family: var(--f2); font-size: .82rem; letter-spacing: .06em; color: var(--txt2); min-width: 76px; text-align: right; flex-shrink: 0; }

/* Tracks Sospecha */
.sosp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; padding: .75rem 1rem; flex-shrink: 0; }
.sosp-card {
  background: var(--carbon); border: 1px solid var(--gris2);
  border-radius: var(--r); padding: .625rem .75rem;
  display: flex; flex-direction: column; gap: .35rem;
  cursor: pointer; min-height: 72px;
}
.sosp-card:active { border-color: var(--oro3); }
/* ↓↓ nombre PNJ — blanco legible */
.sosp-nom { font-family: var(--f2); font-size: .9rem; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sosp-rol { font-family: var(--f3); font-size: .82rem; color: var(--txt3); margin-top: -.15rem; }
.sosp-celdas { display: flex; gap: 3px; }
.sosp-celda  { flex: 1; height: 13px; border-radius: 2px; border: 1px solid var(--gris2); background: var(--gris1); }
.sosp-celda.s1 { background: #7b3500; border-color: #ff6d00; }
.sosp-celda.s2 { background: #8b2000; border-color: #ef6020; }
.sosp-celda.s3 { background: var(--sangre); border-color: var(--sangre2); }
.sosp-celda.s4 { background: #a52020; border-color: #ef5350; }
.sosp-celda.s5 { background: #6a0000; border-color: #d32f2f; box-shadow: 0 0 4px rgba(211,47,47,.5); }

/* ↓↓ Leyenda de la barra de sospecha — AÑADIDA */
.sosp-leyenda {
  padding: 0 1rem .25rem; flex-shrink: 0;
  font-family: var(--f3); font-size: .85rem; color: var(--txt3);
  font-style: italic;
}

/* Acciones */
.acc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; padding: .75rem 1rem; }
.acc-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; padding: 1rem .25rem;
  background: var(--carbon); border: 1px solid var(--gris2);
  border-radius: var(--r2); cursor: pointer; min-height: 84px;
  transition: all .18s;
}
.acc-btn:active { border-color: var(--oro3); background: var(--gris1); transform: scale(.97); }
.acc-ico { font-size: 1.7rem; line-height: 1; }
/* ↓↓ labels táctiles — blancos legibles */
.acc-lbl { font-family: var(--f2); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--txt2); }

/* Jugadores en partida */
.jug-card {
  display: flex; align-items: center; gap: .875rem;
  padding: .75rem 1rem; background: var(--carbon);
  border: 1px solid var(--gris2); border-radius: var(--r2);
}
.jug-card img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gris2); flex-shrink: 0; }
.jug-info { flex: 1; min-width: 0; }
/* ↓↓ nombre jugador y PJ — blancos legibles */
.jug-nombre { font-family: var(--f2); font-size: 1rem; color: var(--txt); }
.jug-pj     { font-family: var(--f3); font-size: .95rem; color: var(--txt2); }
.jug-hab    { font-family: var(--f3); font-size: .88rem; color: var(--txt3); margin-top: .15rem; font-style: italic; }
.jug-loseta { font-family: var(--f3); font-size: .88rem; color: var(--txt3); }
.jug-attrs  { display: flex; gap: .5rem; flex-shrink: 0; }
.attr-chip  { display: flex; flex-direction: column; align-items: center; min-width: 32px; }
.attr-chip-val { font-family: var(--f1); font-size: 1.1rem; color: var(--oro); font-weight: 700; }
/* ↓↓ labels de atributo — legibles */
.attr-chip-lbl { font-family: var(--f2); font-size: .65rem; letter-spacing: .06em; color: var(--txt3); }

/* ════════════════════════════════════════════════════════════════════════
   OVERLAY / DRAWER
════════════════════════════════════════════════════════════════════════ */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 100; backdrop-filter: blur(2px); }
#overlay-reaccion { z-index: 210; }
.overlay.activo { display: flex !important; align-items: flex-end; }
.drawer {
  width: 100%;
  max-width: min(760px, 100vw);
  max-height: 88vh;
  background: var(--carbon);
  border-top: 1px solid var(--oro3); border-radius: 14px 14px 0 0;
  padding: 1.25rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: up .25s ease;
}
@keyframes up { from{transform:translateY(100%)} to{transform:translateY(0)} }
.drw-handle { width: 44px; height: 5px; background: var(--gris2); border-radius: 3px; margin: 0 auto 1.25rem; }
/* ↓↓ título drawer — grande y dorado */
.drw-titulo { font-family: var(--f1); font-size: clamp(1.4rem,4vw,1.9rem); letter-spacing: .06em; color: var(--oro2); margin-bottom: 1.25rem; text-align: center; }
.drw-sep { height: 1px; background: var(--gris2); margin: 1rem 0; }

/* Respuesta en interrogatorio */
.resp-box {
  background: var(--gris1); border-left: 3px solid var(--oro3);
  border-radius: 0 var(--r) var(--r) 0; padding: 1rem 1.125rem;
  font-family: var(--f3); font-size: 1.05rem; font-style: italic;
  line-height: 1.65; color: var(--txt);
}

/* Dificultad */
.dif-box {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1rem; background: var(--gris1);
  border-radius: var(--r2); border: 1px solid var(--oro3);
}
.dif-num { font-family: var(--f1); font-size: 3rem; color: var(--oro); line-height: 1; }
.dif-det { font-family: var(--f3); font-size: 1rem; color: var(--txt2); line-height: 2; }

/* Pistas */
.pista-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .875rem; border-radius: 20px;
  font-family: var(--f2); font-size: .82rem;
  cursor: pointer; border: 1px solid; min-height: 40px;
}
.pista-chip.desc { background: rgba(139,26,26,.15); color: #ef9a9a; border-color: var(--sangre); }
.pista-chip.int  { background: rgba(42,90,42,.2);   color: #a5d6a7; border-color: var(--verde); }
.pista-chip.sel  { box-shadow: 0 0 0 2px var(--oro); }

/* Color de pista: roja (método) / azul (móvil) */
.pista-chip.pista-roja  { background: rgba(160,40,40,.2);  color: #f4a0a0; border-color: #c85050; }
.pista-chip.pista-azul  { background: rgba(40,80,160,.2);  color: #90b8f0; border-color: #5080c8; }
.pista-chip.pista-roja.seleccionada { box-shadow: 0 0 0 2px #f46060; }
.pista-chip.pista-azul.seleccionada { box-shadow: 0 0 0 2px #6090f4; }

/* ════════════════════════════════════════════════════════════════════════
   MAPA
════════════════════════════════════════════════════════════════════════ */
#pantalla-mapa { display: none; flex-direction: column; height: 100%; }
#pantalla-mapa.activa { display: flex; }
.mapa-wrap { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; background: var(--negro); }
#loseta-info { padding: .75rem 1rem; background: var(--negro2); border-top: 1px solid var(--gris1); flex-shrink: 0; }
#loseta-info-nom  { font-family: var(--f2); font-size: 1.1rem; color: var(--oro2); }
#loseta-info-desc { font-family: var(--f3); font-size: .95rem; color: var(--txt2); margin-top: .25rem; }

/* ════════════════════════════════════════════════════════════════════════
   NOTIFICACIÓN
════════════════════════════════════════════════════════════════════════ */
.notif {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 1rem 1.25rem; display: none;
  background: linear-gradient(135deg, var(--sangre), #4a0000);
  border-bottom: 2px solid var(--sangre2);
  animation: dn .3s ease;
}
.notif.vis { display: block; }
@keyframes dn { from{transform:translateY(-100%)} to{transform:translateY(0)} }
.notif-tit { font-family: var(--f2); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: .25rem; }
.notif-txt { font-family: var(--f3); font-size: 1.05rem; color: var(--txt); }

/* ════════════════════════════════════════════════════════════════════════
   UTILIDADES
════════════════════════════════════════════════════════════════════════ */
.oculto   { display: none !important; }
.flex-col { display: flex; flex-direction: column; }
.gap-s    { gap: .5rem; }
.gap-m    { gap: .875rem; }
.mt-s     { margin-top: .5rem; }
.mt-m     { margin-top: 1rem; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--gris2); border-radius: 2px; }

/* ─── BOTONES DE ACCIÓN — fondo y contraste mejorado ─── */
.acc-btn {
  background: var(--carbon);
  border: 1px solid var(--gris2);
}
.acc-btn:active {
  background: var(--gris1);
  border-color: var(--oro3);
}
/* Iconos grandes y visibles */
.acc-ico {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
}
/* Labels de acciones — blancos */
.acc-lbl {
  font-family: var(--f2);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt2);
}

/* Sosp leyenda */
.sosp-leyenda {
  padding: 0 1rem .5rem;
  font-family: var(--f3);
  font-size: .88rem;
  color: var(--txt3);
  font-style: italic;
  flex-shrink: 0;
}

/* PNJ en sospecha — nombre y rol más legibles */
.sosp-nom { font-size: .92rem; font-weight: 600; }
.sosp-rol { font-size: .82rem; }

/* Mapa container — fondo negro y cursor grab */
#mapa-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #0d0a07;
  cursor: grab;
}

/* ════════════════════════════════════════════════════════════════════════
   HUD — pantalla partida integrada con mapa
════════════════════════════════════════════════════════════════════════ */

/* Pantalla partida: columna flex, mapa ocupa resto */
#pantalla-partida {
  overflow: hidden;
}
#mapa-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #0a0806;
  min-height: 0;   /* crucial para flex */
}
#loseta-info {
  display: none;
  padding: .625rem 1rem;
  background: var(--negro2);
  border-top: 1px solid var(--gris1);
  flex-shrink: 0;
}
#loseta-info-nom  { font-family:var(--f2); font-size:1rem; color:var(--oro2); }
#loseta-info-desc { font-family:var(--f3); font-size:.9rem; color:var(--txt2); margin-top:.2rem; }

/* ── HUD TOP: fila única siempre visible ────────────────────────────── */
.hud-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .75rem;
  background: rgba(13,10,7,.97);
  border-bottom: 1px solid var(--gris1);
  flex-shrink: 0; min-height: 48px; gap: .5rem;
}
.hud-left  { display:flex; align-items:center; gap:.5rem; flex:1; min-width:0; }
.hud-right { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }

.hud-ico {
  min-width: 40px; min-height: 40px; padding: 0;
  background: var(--gris1); border: 1px solid var(--gris2);
  border-radius: var(--r); font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}

/* Reloj compacto */
.hud-reloj { display:flex; align-items:center; gap:.4rem; flex:1; min-width:0; overflow:hidden; }
.hud-fase  { font-family:var(--f2); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--oro); flex-shrink:0; }
.hud-celdas { display:flex; gap:2px; flex:1; }
.hud-celda  { flex:1; height:7px; border-radius:2px; background:var(--gris1); border:1px solid var(--gris2); }
.hud-celda.anoc { background:var(--oro3); border-color:var(--oro); }
.hud-celda.medi { background:#1a3a5c; border-color:#4a90c4; }
.hud-celda.madr { background:#3a1a4a; border-color:#9c6abd; }
.hud-ronda { font-family:var(--f1); font-size:.85rem; color:var(--oro); flex-shrink:0; }

/* Alerta compacta */
.hud-alerta {
  display:flex; align-items:center; gap:.35rem;
  cursor:pointer; padding:.25rem .5rem;
  border:1px solid var(--gris2); border-radius:var(--r);
  background:rgba(0,0,0,.3); min-height:36px;
}
.hud-alerta-lbl { font-family:var(--f2); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt2); flex-shrink:0; }
.hud-alerta-bar { display:flex; gap:2px; }
.hud-alerta-pip { width:8px; height:14px; border-radius:2px; border:1px solid var(--gris2); background:var(--gris1); }
.hud-alerta-pip.a-verde   { background:#2d6a2d; border-color:#4caf50; }
.hud-alerta-pip.a-lima    { background:#4a6a10; border-color:#8bc34a; }
.hud-alerta-pip.a-ambar   { background:#7b6010; border-color:#f9a825; }
.hud-alerta-pip.a-naranja { background:#7b3500; border-color:#ff6d00; }
.hud-alerta-pip.a-rojo    { background:var(--sangre); border-color:var(--sangre2); }
.hud-alerta-pip.a-critico { background:#1a0000; border-color:#b71c1c; animation:pulso 1s infinite; }
.hud-alerta-est { font-family:var(--f2); font-size:.72rem; color:var(--txt3); flex-shrink:0; }

/* ── PANEL EXPANDIBLE ───────────────────────────────────────────────── */
.hud-panel {
  background: rgba(13,10,7,.96);
  border-bottom: 1px solid var(--gris1);
  flex-shrink: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}
.hud-panel.abierto { max-height: 420px; }

/* Sospecha en el HUD: grid 3×2 compacto */
.hud-sosp-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 4px; padding: .5rem .75rem .25rem;
}
.hud-sosp-card {
  background: var(--carbon); border: 1px solid var(--gris2);
  border-radius: var(--r); padding: .4rem .5rem;
  display: flex; flex-direction: column; gap: 3px;
  cursor: pointer; min-height: 52px;
}
.hud-sosp-card:active { border-color:var(--oro3); }
/* Nombre PNJ — BLANCO legible */
.hud-sosp-nom { font-family:var(--f2); font-size:.75rem; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* "Sospecha" label debajo del nombre */
.hud-sosp-tag { font-family:var(--f3); font-size:.7rem; color:var(--txt3); font-style:italic; margin-bottom:1px; }
.hud-sosp-bar { display:flex; gap:2px; }
.hud-sosp-pip { flex:1; height:8px; border-radius:2px; border:1px solid var(--gris2); background:var(--gris1); }
.hud-sosp-pip.s1 { background:#7b3500; border-color:#ff6d00; }
.hud-sosp-pip.s2 { background:#8b2000; border-color:#ef6020; }
.hud-sosp-pip.s3 { background:var(--sangre); border-color:var(--sangre2); }
.hud-sosp-pip.s4 { background:#a52020; border-color:#ef5350; }
.hud-sosp-pip.s5 { background:#6a0000; border-color:#d32f2f; box-shadow:0 0 4px rgba(211,47,47,.5); }

/* Jugadores en HUD: fila horizontal compacta */
.hud-jugs {
  display: flex; gap: 6px; padding: .25rem .75rem .5rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.hud-jug-chip {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; flex-shrink: 0;
  background: var(--carbon); border: 1px solid var(--gris2);
  border-radius: 12px; cursor: pointer;
  transition: border-color .15s;
}
.hud-jug-chip:hover { border-color: var(--oro) !important; }
.hud-jug-chip:active { border-color:var(--oro3); }
.hud-jug-ico  { width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.hud-jug-info { display:flex; flex-direction:column; }
/* Nombre jugador y PJ — BLANCOS */
.hud-jug-nom { font-family:var(--f2); font-size:.75rem; color:var(--txt); }
.hud-jug-pj  { font-family:var(--f3); font-size:.72rem; color:var(--txt3); }
.hud-jug-loc { font-family:var(--f3); font-size:.7rem; color:var(--txt3); }

/* Fila de acciones en HUD */
.hud-acc-row {
  display: flex; gap: 6px; padding: 0 .75rem .625rem;
}
.hud-acc-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: .625rem .25rem;
  background: var(--gris1); border: 1px solid var(--gris2);
  border-radius: var(--r); cursor: pointer;
  font-family: var(--f2); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--txt2);
  min-height: 58px;
}
.hud-acc-btn span:first-child { font-size: 1.4rem; line-height: 1; }
.hud-acc-btn:active { border-color:var(--oro3); background:var(--gris2); }

/* ════════════════════════════════════════════════════════════════
   SUCESO — overlay de carta de suceso
════════════════════════════════════════════════════════════════ */
#overlay-suceso {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0,0,0,0.85);
  display: none;
  padding: 0;
}
#overlay-suceso.activo {
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .2s ease;
}
.suceso-carta {
  background: linear-gradient(160deg, #1a1208 0%, #100d07 100%);
  border: 1px solid #8a6818;
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 1.5rem 1.25rem 2rem;
  max-width: 600px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.suceso-header {
  display: flex; align-items: center; gap: .625rem;
  margin-bottom: 1rem;
}
.suceso-badge {
  font-family: var(--f2); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: #0d0a07;
  background: var(--oro); padding: .25rem .7rem; border-radius: 10px;
}
.suceso-fase {
  font-family: var(--f2); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt3);
  border: 1px solid var(--gris2); border-radius: 10px;
  padding: .2rem .6rem;
}
.suceso-titulo {
  font-family: var(--f1); font-size: clamp(1.4rem, 5vw, 2rem);
  color: var(--oro2); margin-bottom: .875rem; letter-spacing: .05em;
  line-height: 1.2;
}
.suceso-narrativa {
  font-family: var(--f3); font-size: clamp(1.05rem, 3.8vw, 1.2rem);
  color: var(--txt2); line-height: 1.7; margin-bottom: 1rem;
}
.suceso-sep {
  text-align: center; color: var(--oro3); font-size: 1rem;
  margin: .875rem 0; letter-spacing: .5em; opacity: .6;
}
.suceso-mecanica {
  font-family: var(--f3); font-size: clamp(1rem, 3.5vw, 1.15rem);
  color: var(--txt); line-height: 1.65; margin-bottom: 1.25rem;
  background: rgba(212,168,64,.07); border-left: 3px solid var(--oro3);
  padding: .875rem 1rem; border-radius: 0 8px 8px 0;
}
.suceso-efectos {
  font-family: var(--f2); font-size: .9rem; letter-spacing: .05em;
  color: #ef9a9a; background: rgba(100,0,0,.2);
  border: 1px solid #4a1a1a; border-radius: 8px;
  padding: .75rem 1rem; margin-bottom: 1rem;
}
.suceso-confirmar {
  min-height: 56px; font-size: 1.05rem; letter-spacing: .08em;
}

/* ════════════════════════════════════════════════════════════════
   OVERLAYS DE INFORMACIÓN — legibles en móvil, texto cómodo
════════════════════════════════════════════════════════════════ */

/* Todos los overlays sobre el mapa: fondo semitransparente, centrado */
/* NOTA: .overlay ya definido arriba — esta sección solo añade estilos adicionales */

/* Drawer interior */
.drw-contenido {
  background: linear-gradient(160deg, #1c1509 0%, #100d07 100%);
  border: 1px solid #6a5018;
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 1.75rem 1.5rem 2.25rem;
  width: 100%;
  max-width: min(760px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Título del overlay */
.drw-titulo {
  font-family: var(--f1);
  font-size: clamp(1.3rem, 4.5vw, 1.8rem);
  color: var(--oro2);
  margin-bottom: 1rem;
  letter-spacing: .04em;
}

/* Texto de respuesta — caja principal */
.respuesta-box {
  background: rgba(212,168,64,.06);
  border: 1px solid rgba(212,168,64,.25);
  border-left: 4px solid var(--oro3);
  border-radius: 0 10px 10px 0;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1rem;
  font-family: var(--f3);
  font-size: clamp(1.05rem, 3.5vw, 1.25rem);
  color: var(--pergamino);
  line-height: 1.8;
}
/* Nombre del PNJ en el interrogatorio */
.interrog-pnj-nom {
  font-family: var(--f1);
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  color: var(--oro2);
  margin-bottom: .25rem;
  letter-spacing: .05em;
}
/* Etiqueta de tipo de interrogatorio */
.interrog-tipo {
  font-family: var(--f2);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0d0a07;
  background: var(--oro);
  padding: .2rem .65rem;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 1rem;
}
/* Texto de declaración/respuesta — tamaño aumentado */
.interrog-texto {
  font-family: var(--f3);
  font-size: clamp(1.1rem, 3.8vw, 1.3rem);
  color: var(--pergamino);
  line-height: 1.8;
  padding: 1.25rem 1.4rem;
  background: rgba(212,168,64,.07);
  border: 1px solid rgba(212,168,64,.2);
  border-left: 4px solid var(--oro3);
  border-radius: 0 10px 10px 0;
  margin-bottom: 1rem;
}

/* Resultado numérico del interrogatorio */
.dificultad-display {
  display: flex; gap: 1rem; align-items: center;
  background: rgba(0,0,0,.4);
  border: 1px solid var(--gris2);
  border-radius: 10px;
  padding: .875rem 1rem;
  margin-bottom: 1rem;
}
.dificultad-numero {
  font-family: var(--f1);
  font-size: 2.5rem;
  color: var(--oro2);
  min-width: 3rem;
  text-align: center;
}
.dificultad-desglose {
  font-family: var(--f3);
  font-size: clamp(.9rem, 3vw, 1rem);
  color: var(--txt2);
  line-height: 1.6;
}
.mod-positivo { color: #ef9a9a; }
.mod-negativo { color: #a5d6a7; }

/* Resultado overlay — texto grande y claro */
#overlay-resultado .drw-contenido {
  max-height: 90vh;
}
#resultado-tit {
  font-family: var(--f1);
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--gris1);
}

/* Botones dentro de overlays — más grandes en móvil */
.drw-contenido .btn {
  min-height: 52px;
  font-size: clamp(.9rem, 3vw, 1rem);
}

/* ── Botones de variante A / B / C ─────────────────────────── */
.variante-btns {
  display: flex; gap: .75rem; margin-top: .75rem;
}
.btn-variante {
  flex: 1; min-height: 64px;
  font-family: var(--f1); font-size: 1.6rem; letter-spacing: .1em;
  color: var(--txt2); background: var(--carbon);
  border: 2px solid var(--gris2); border-radius: var(--r);
  cursor: pointer; transition: all .15s;
}
.btn-variante:active, .btn-variante.sel {
  border-color: var(--oro); color: var(--oro);
  background: rgba(212,168,64,.12);
}

/* ── Exploración overlay ────────────────────────────────────────────────── */
.expl-nota-crimen {
  padding: .75rem 1rem; margin-bottom: .5rem;
  background: rgba(180,20,20,.12); border: 1px solid rgba(180,20,20,.3);
  border-radius: 8px; color: #ef9a9a;
  font-family: var(--f3); font-size: clamp(1rem,3.2vw,1.05rem); line-height: 1.6;
}
.expl-regla {
  display: flex; gap: .875rem; align-items: flex-start;
  padding: .875rem 1rem;
  background: rgba(212,168,64,.06); border: 1px solid rgba(212,168,64,.15);
  border-radius: 8px;
}
.expl-icono {
  font-size: 1.3rem; flex-shrink: 0; line-height: 1.4; min-width: 1.5rem;
  text-align: center; font-weight: bold;
}
.expl-texto {
  font-family: var(--f3); font-size: clamp(1rem,3.2vw,1.1rem);
  color: var(--txt); line-height: 1.65;
}

/* ════════════════════════════════════════════════════════════════════════
   OVERLAY MODAL CENTRADO (aviso genérico)
════════════════════════════════════════════════════════════════════════ */
.overlay-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.82); z-index: 300;
  justify-content: center; align-items: center;
  backdrop-filter: blur(3px);
}
.overlay-modal.activo { display: flex; animation: fadeIn .2s ease; }
.overlay-box {
  background: linear-gradient(160deg, #1a1208 0%, #100d07 100%);
  border: 1px solid #8a6818;
  border-radius: 14px;
  padding: 1.75rem 1.5rem 1.5rem;
  width: min(92vw, 400px);
  text-align: center;
}
.ov-badge {
  font-family: var(--f2); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: #0d0a07;
  background: var(--oro); padding: .2rem .7rem; border-radius: 10px;
  display: inline-block; margin-bottom: .75rem;
}
.ov-titulo {
  font-family: var(--f2); font-size: 1.15rem; letter-spacing: .06em;
  color: var(--oro); margin: 0 0 .75rem;
}
.ov-texto {
  font-family: var(--f3); font-size: 1.08rem; color: var(--txt);
  line-height: 1.75; margin-bottom: 1.25rem;
}
.ov-btn {
  font-family: var(--f2); font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; color: #0d0a07;
  background: var(--oro); border: none; border-radius: 8px;
  padding: .6rem 1.5rem; cursor: pointer;
}
.ov-btn:active { opacity: .8; }