/* ─────────────────────────────────────────────────────────────
   Kaidoku · estilos
   Tema propio del faro: azul nocturno + ámbar de la lámpara.
   Autocontenido (no importa nada de game/).
   ───────────────────────────────────────────────────────────── */

:root {
  /* Paleta base — noche del faro */
  --bg-0: #090e1a;
  --bg-1: #0f1424;
  --bg-2: #151b2e;
  --surface: rgba(24, 30, 48, 0.78);
  --surface-solid: #1a2135;
  --surface-alt: #212844;
  --surface-hi: #2a3356;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #ecebe6;
  --text-soft: #c8c6bf;
  --muted: #8a8a96;

  --accent: #f5c15a;         /* lámpara del faro */
  --accent-2: #ffb061;
  --accent-ink: #1a1410;
  --accent-glow: rgba(245, 193, 90, 0.4);

  --kairos: #c9b9ff;         /* violeta luminoso — identidad Kaidoku */
  --kairos-soft: rgba(201, 185, 255, 0.18);
  --kairos-glow: rgba(201, 185, 255, 0.35);

  --ok: #7ddc95;
  --ok-bg: rgba(125, 220, 149, 0.12);
  --danger: #ff7a7a;
  --danger-bg: rgba(255, 122, 122, 0.14);

  --compatible: rgba(125, 220, 149, 0.45);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);

  --t-fast: 0.12s ease;
  --t: 0.2s ease;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font);
  --font-serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse 100% 70% at 50% 0%, #1a2143 0%, var(--bg-0) 45%) fixed;
  color: var(--text);
  font-family: var(--font);
  min-height: 100dvh;
  /* Bloqueamos overflow horizontal en ambos. Cuando aparece el bloque
     de éxito tras Resolver, la combinación de explicación larga +
     estrellas + iconos puede generar un overflow puntual que algunos
     navegadores móviles compensan con un zoom-out — y al recolocar la
     escala el tablero queda cortado por arriba/abajo. */
  overflow-x: hidden;
  max-width: 100vw;
  font-size: 15px;
  line-height: 1.5;
}

/* ─── Topbar ─────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(20, 24, 40, 0.9), rgba(15, 20, 36, 0.6));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.topbar .brand { display: flex; align-items: baseline; gap: 10px; }
.topbar .logo { font-size: 22px; line-height: 1; }
.topbar h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent), var(--kairos));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topbar .tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.2px;
}

.selector-caso-wrap {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(201,185,255,0.10), rgba(245,193,90,0.06));
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.selector-caso-label {
  font-size: 11px;
  color: var(--kairos);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
  user-select: none;
}
.selector-casos {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: rgba(9, 14, 26, 0.55);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.caso-pill {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.caso-pill:hover { background: rgba(201,185,255,0.08); color: var(--text); }
.caso-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.caso-pill__num {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--kairos);
  background: var(--kairos-soft);
  border: 1px solid rgba(201,185,255,0.28);
  padding: 3px 7px;
  border-radius: 999px;
}
.caso-pill__titulo {
  font-weight: 600;
  white-space: nowrap;
}
.caso-pill__dif {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--accent);
  opacity: 0.85;
}
.caso-pill.is-active {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 4px 14px -4px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
  border-color: var(--accent);
}
.caso-pill.is-active .caso-pill__num {
  color: var(--accent-ink);
  background: rgba(26, 20, 16, 0.2);
  border-color: rgba(26, 20, 16, 0.25);
}
.caso-pill.is-active .caso-pill__dif { color: var(--accent-ink); opacity: 0.8; }

/* ─── Layout ─────────────────────────────────────────────── */

.layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  gap: 20px;
  padding: 20px;
  max-width: 1500px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 1240px) {
  .layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .panel-objetos { grid-column: 1 / -1; order: 99; }
  .panel-objetos .objetos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 980px) {
  .layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  /* .caso expone a sus hijos como items directos del layout para poder
     insertar el panel de sospechosos entre el tablero y la botonera. */
  .caso { display: contents; }
  .caso-cabecera   { order: 1; }
  .botonera        { order: 2; position: sticky; top: 0; z-index: 20;
                     margin: 0 -12px; padding: 10px 12px;
                     background: linear-gradient(180deg, rgba(9,14,26,0.92), rgba(9,14,26,0.6));
                     backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
                     border-bottom: 1px solid var(--border); }
  .tablero-wrap    { order: 3; }
  .panel-personajes{ order: 4; display: flex; flex-direction: column; gap: 10px; }
  .panel-personajes .panel-cabecera { order: 1; }
  .panel-personajes .personajes     { order: 2; }
  .panel-personajes .pistas-nota    { order: 3; margin-top: 4px; }
  .resultado       { order: 5; }
  .panel-objetos   { order: 6;
                     margin: 0 -12px -12px;
                     padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
                     border-radius: 0;
                     border-left: 0;
                     border-right: 0;
                     border-bottom: 0; }
  .panel-objetos .objetos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

  .botonera button { min-height: 48px; padding: 12px 18px; font-size: 15px; flex: 1 1 auto; }
  .botonera button.primary { flex: 2 1 auto; }

  .selector-caso-wrap {
    margin-left: 0;
    width: 100%;
    padding: 4px 6px 4px 10px;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .selector-caso-wrap::-webkit-scrollbar { display: none; }
  .selector-casos { flex: 1 1 auto; justify-content: stretch; }
  .caso-pill { flex: 1 1 auto; justify-content: center; font-size: 12px; padding: 8px 10px; }
  .caso-pill__titulo { font-size: 12px; }
  .selector-caso-label { font-size: 10px; letter-spacing: 0.8px; }

  /* Pega el panel de sospechosos al tablero (sin margen ni gap extra). */
  .panel-personajes {
    margin-top: -4px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
  }
  .tablero-wrap .hint { display: none; }

  /* En móvil el tablero ocupa SIEMPRE el ancho disponible, sin que el
     centrado del flex-column lo encoja al ancho intrínseco del grid.
     Así el caso 4×4 (KAI-001) deja celdas grandes en lugar de un
     tablero estrecho centrado en mitad de la pantalla. */
  .tablero-wrap { align-items: stretch; }
  .tablero { width: 100%; max-width: 100%; }

  .topbar { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
  .topbar .tagline { display: none; }
}

@media (max-width: 420px) {
  .topbar .brand h1 { font-size: 17px; }
  .selector-caso-label { display: none; }
  .caso-pill__dif { display: none; }
  .caso-pill { padding: 8px 8px; gap: 6px; }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* El panel ya NO es sticky con scroll interno: el scroll ahora es
     genérico de la página, así que los paneles fluyen con el contenido
     y no muestran su propia barra de desplazamiento. */
}
@media (max-width: 980px) {
  .panel { position: static; max-height: none; }
}

/* ─── Bloque "Caso" (botón) en el panel izquierdo ───────── */
.bloque-caso {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  background: linear-gradient(180deg, rgba(201,185,255,0.08), rgba(245,193,90,0.06));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 12px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.bloque-caso:hover { background: linear-gradient(180deg, rgba(201,185,255,0.14), rgba(245,193,90,0.1)); border-color: var(--accent); }
.bloque-caso:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bloque-caso__sistema {
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--kairos);
  font-weight: 700;
}
.bloque-caso__titulo {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.2px;
  background: linear-gradient(90deg, var(--accent), var(--kairos));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.2;
}
.bloque-caso__escenario {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.bloque-caso__abrir {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Bloque "Detective" en el panel izquierdo */
.bloque-detective {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.bloque-detective > summary {
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--kairos);
  font-weight: 700;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bloque-detective > summary::-webkit-details-marker { display: none; }
.bloque-detective > summary::after {
  content: '▾';
  font-size: 10px;
  color: var(--muted);
  transition: transform var(--t-fast);
}
.bloque-detective:not([open]) > summary::after { transform: rotate(-90deg); }
.bloque-detective[open] > summary { margin-bottom: 8px; }
.bloque-detective .puntuacion-badge { margin: 0; }

/* Cabecera compacta del centro: sólo título y escenario, sin badge ni intro. */
.caso-cabecera--compacta {
  gap: 2px !important;
  padding-bottom: 4px;
}
.caso-cabecera--compacta .escenario { margin: 0; }

/* ─── Caso (cabecera) ────────────────────────────────────── */

.caso {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.caso-cabecera { display: flex; flex-direction: column; gap: 8px; }

.sistema-badge {
  align-self: flex-start;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--kairos);
  background: var(--kairos-soft);
  border: 1px solid rgba(201, 185, 255, 0.35);
  margin: 0 0 2px;
}

.caso-cabecera h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.3px;
  background: linear-gradient(90deg, var(--accent), var(--kairos));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.caso-cabecera .escenario {
  margin: 0;
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
}
.caso-cabecera .intro {
  margin: 6px 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--kairos);
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 14.5px;
  line-height: 1.6;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 185, 255, 0.06), transparent 60%),
    radial-gradient(ellipse 70% 70% at 80% 100%, rgba(245, 193, 90, 0.05), transparent 70%);
}

/* Historia (expediente) */
.historia {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--kairos);
  padding: 12px 16px;
  border-radius: var(--r-md);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 185, 255, 0.05), transparent 60%);
}
.historia[hidden] { display: none; }
.historia summary {
  cursor: pointer;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--kairos);
  font-weight: 700;
  user-select: none;
  list-style: none;
  padding: 4px 0;
  outline: none;
}
.historia summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform var(--t-fast);
}
.historia[open] summary::before { transform: rotate(90deg); }
.historia summary::-webkit-details-marker { display: none; }
.historia summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.historia[open] summary { margin-bottom: 10px; }
.historia p {
  margin: 0 0 12px;
  line-height: 1.7;
  letter-spacing: 0.15px;
  font-size: 14.5px;
  font-family: var(--font-serif);
  color: #e3dcf0;
}
.historia p:last-child { margin: 0; }

/* ─── Puntuación ─────────────────────────────────────────── */

.puntuacion-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 0;
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: rgba(245, 193, 90, 0.1);
  border: 1px solid rgba(245, 193, 90, 0.35);
  font-size: 13px;
  line-height: 1.2;
  color: var(--text-soft);
  align-self: flex-start;
}
.puntuacion-badge .puntuacion-etiqueta {
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--accent);
}
.puntuacion-badge .puntuacion-estrellas {
  font-size: 16px;
  letter-spacing: 1.5px;
  color: var(--accent);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.puntuacion-badge .puntuacion-meta { font-variant-numeric: tabular-nums; }
.puntuacion-badge .puntuacion-nivel { color: var(--text); font-weight: 600; }
.puntuacion-badge .puntuacion-valor { color: var(--text); font-weight: 600; }
.puntuacion-badge.con-fallos { background: rgba(245, 193, 90, 0.06); border-color: rgba(245, 193, 90, 0.2); }
.puntuacion-badge.agotada {
  background: rgba(255, 122, 122, 0.08);
  border-color: rgba(255, 122, 122, 0.35);
}
.puntuacion-badge.agotada .puntuacion-estrellas { color: var(--danger); }

/* ─── Tablero ────────────────────────────────────────────── */

.tablero-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.tablero {
  --n: 4;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 5px;
  width: min(100%, 560px);
  aspect-ratio: 1 / 1;
  background: #0b1020;
  padding: 10px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(201, 185, 255, 0.08);
  container-type: inline-size;
}

.hint {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  max-width: 560px;
  text-align: center;
  line-height: 1.5;
}
.hint strong, .hint em { color: var(--text-soft); font-style: normal; font-weight: 600; }

.celda {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
  color: #1a1d23;
  user-select: none;
  min-width: 0;
  min-height: 0;
}
@media (hover: hover) {
  .celda:hover { box-shadow: 0 0 0 2px var(--accent) inset; }
}
.celda:active { transform: scale(0.97); }

.celda .habitacion-label {
  position: absolute;
  bottom: 3px;
  left: 5px;
  font-size: calc(11cqi / var(--n));
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.6px;
  color: rgba(0, 0, 0, 0.65);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  pointer-events: none;
  z-index: 5;
  max-width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.14);
  padding: 1px 4px;
  border-radius: 2px;
}
/* Habitación marcada como "entrada": halo ámbar y carácter ↪ añadido
   desde el JS. Puro decorado editorial: no cambia el juego. */
.celda .habitacion-label.es-entrada {
  background: rgba(245, 193, 90, 0.3);
  color: rgba(30, 20, 8, 0.8);
  box-shadow: 0 0 0 1px rgba(245, 193, 90, 0.6);
}

/* Objetos en la celda */
.celda .objetos-celda {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
  pointer-events: none;
  z-index: 1;
  transition: inset var(--t), gap var(--t);
}
.celda.con-fijo .objetos-celda,
.celda.con-provisionales .objetos-celda {
  inset: 3% 5% auto auto;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1cqw;
}
.celda .objeto {
  font-size: calc(48cqi / var(--n));
  line-height: 1;
  opacity: 0.92;
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.35))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
}
.celda .objetos-celda.multi .objeto { font-size: calc(32cqi / var(--n)); }
.celda.con-fijo .objeto,
.celda.con-provisionales .objeto { font-size: calc(16cqi / var(--n)); opacity: 0.85; }

/* =======================================================================
   Objetos de SUELO — biblioteca de patrones
   -----------------------------------------------------------------------
   Para añadir un objeto nuevo de superficie:
     1. Márcalo con "suelo": true en cases.js.
     2. Define aquí un bloque .celda.suelo-<nombre-en-guiones>.
   El render los aplica automáticamente (ver app.js · nombreToCls).
   Las reglas `continua-*` (al final) son comunes: funden bordes entre
   celdas del mismo multi-casilla independientemente del tipo de suelo.
   ======================================================================= */

.celda.suelo-cama {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.07) 0 4cqi,
      rgba(255, 255, 255, 0.12) 4cqi 8cqi);
}
.celda.suelo-ducha {
  background-image:
    radial-gradient(circle 4cqi at 30% 30%, rgba(255, 255, 255, 0.28), transparent 50%),
    radial-gradient(circle 3cqi at 70% 60%, rgba(255, 255, 255, 0.22), transparent 50%),
    radial-gradient(circle 2cqi at 50% 85%, rgba(255, 255, 255, 0.2), transparent 55%);
}
.celda.suelo-reloj-kairos {
  background-image:
    radial-gradient(circle at center, rgba(201, 185, 255, 0.4), rgba(201, 185, 255, 0.06) 65%);
}

/* Catálogo preparado para futuros casos (escalado 3×3 → 6×6). */
.celda.suelo-alfombra {
  /* Rombos cálidos, estilo rug con flecos implícitos en los bordes. */
  background-image:
    repeating-linear-gradient( 45deg, rgba(178, 60, 60, 0.22) 0 3cqi, transparent 3cqi 8cqi),
    repeating-linear-gradient(-45deg, rgba(178, 60, 60, 0.22) 0 3cqi, transparent 3cqi 8cqi),
    linear-gradient(rgba(178, 60, 60, 0.14), rgba(178, 60, 60, 0.14));
}
.celda.suelo-alfombra-roja {
  /* Tarima larga de alfombra roja de entrada. */
  background-image:
    linear-gradient(rgba(200, 40, 40, 0.38), rgba(200, 40, 40, 0.38)),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.06) 0 2cqi,
      transparent 2cqi 6cqi);
}
.celda.suelo-banera {
  /* Cerámica con dos o tres gotas. */
  background-image:
    radial-gradient(circle 5cqi at 20% 25%, rgba(255, 255, 255, 0.2), transparent 60%),
    radial-gradient(circle 3cqi at 70% 65%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(rgba(200, 230, 240, 0.25), rgba(200, 230, 240, 0.18));
}
.celda.suelo-escenario {
  /* Tarima de madera en listones longitudinales. */
  background-image:
    repeating-linear-gradient(0deg,
      rgba(140, 90, 45, 0.28) 0 2cqi,
      rgba(180, 120, 70, 0.22) 2cqi 8cqi),
    linear-gradient(rgba(150, 100, 55, 0.08), rgba(120, 80, 40, 0.08));
}
.celda.suelo-cesped {
  /* Verde sutil con trama vertical, para escenarios futuros al aire libre. */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(80, 160, 90, 0.18) 0 1.5cqi,
      transparent 1.5cqi 4cqi),
    linear-gradient(rgba(70, 130, 70, 0.18), rgba(60, 110, 60, 0.16));
}

/* Reglas continua-* genéricas: valen para cualquier .celda que forme parte
   de un multi-casilla con suelo:true. El JS añade la clase cuando la celda
   vecina contiene el mismo objeto. */
.celda.continua-der    { border-top-right-radius: 0;    border-bottom-right-radius: 0; }
.celda.continua-izq    { border-top-left-radius: 0;     border-bottom-left-radius: 0;  }
.celda.continua-abajo  { border-bottom-left-radius: 0;  border-bottom-right-radius: 0; }
.celda.continua-arriba { border-top-left-radius: 0;     border-top-right-radius: 0;    }

/* Reloj de Kairós: silueta translúcida de la víctima desde el arranque. */
.celda.ancla-victima .silueta-victima {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(58cqi / var(--n));
  color: #c9b9ff;
  opacity: 0.42;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 6px rgba(201, 185, 255, 0.5));
  transition: opacity var(--t), filter var(--t);
}
.celda.ancla-victima.resuelta .silueta-victima { opacity: 1; filter: drop-shadow(0 0 10px rgba(201, 185, 255, 0.7)); }
.celda.ancla-victima .hora-reloj {
  position: absolute;
  top: 3px;
  right: 5px;
  font-family: var(--font-serif);
  font-size: calc(10cqi / var(--n));
  font-weight: 700;
  color: var(--kairos);
  opacity: 0.85;
  z-index: 4;
  pointer-events: none;
}

/* Tachado de fila/columna por un fijo (cruz de sudoku).
   Las líneas se pintan como elementos hijos reales (no pseudo-elementos)
   para que convivan con el halo del modo-colocar y con la trama de
   no-pisable, que también usan ::before/::after. Además, las celdas
   tachadas se oscurecen ligeramente para reforzar que están "ocupadas"
   por la cruz del sudoku — útil al colocar el siguiente sospechoso. */
.celda.tachada-h, .celda.tachada-v { position: relative; }
.celda.tachada-h::after, .celda.tachada-v::after { /* placeholder, no usado */ }
.celda > .cruz-h,
.celda > .cruz-v {
  position: absolute;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
  z-index: 4;
}
.celda > .cruz-h { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-1px); }
.celda > .cruz-v { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-1px); }
/* Velo oscuro semitransparente sobre la celda tachada, sin tocar
   el suelo de habitación. Va por encima de fondos pero por debajo de
   la cruz y los emojis. */
.celda > .cruz-velo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.14);
  pointer-events: none;
  z-index: 3;
}

/* Modo "colocar": cuando hay un sospechoso seleccionado, las celdas
   pisables del tablero llevan un halo violeta sutil sobre el suelo,
   recordando que el siguiente clic colocará al personaje ahí. Las
   celdas con objeto no pisable y las que ya están con un fijo no se
   resaltan: ahí no se va a colocar nada nuevo. */
.tablero.modo-colocar .celda:not(.no-pisable):not(.con-fijo)::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(201,185,255,0.18), transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: kai-suelo-pulse 2s ease-in-out infinite;
}
@keyframes kai-suelo-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Celdas con objetos NO pisables (mesa, horno, TV, mostrador…): se
   marcan con una trama oblicua sutil; no se puede colocar a nadie ahí. */
.celda.no-pisable {
  cursor: not-allowed;
}
.celda.no-pisable::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0,0,0,0.18) 0 4px,
    transparent 4px 10px
  );
  pointer-events: none;
  z-index: 1;
}

/* Casillas compatibles al hacer hover sobre una pista del panel. */
.celda.compatible {
  box-shadow: 0 0 0 2px var(--compatible) inset;
  animation: parpadeo-compatible 1.4s ease-in-out infinite;
}
@keyframes parpadeo-compatible {
  0%, 100% { box-shadow: 0 0 0 2px rgba(125, 220, 149, 0.55) inset; }
  50%      { box-shadow: 0 0 0 3px rgba(125, 220, 149, 0.85) inset; }
}

/* Marca de error cuando una pista falla. */
.celda.error-pista {
  box-shadow: 0 0 0 3px var(--danger) inset;
  animation: latido 0.5s ease-in-out 2;
}
.celda.error-pista::before {
  content: '❌';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(40cqi / var(--n));
  color: var(--danger);
  opacity: 0.55;
  z-index: 8;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
@keyframes latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.95); }
}

/* Puertas entre habitaciones — overlay con MISMO layout que el tablero.
   El overlay es otro grid NxN con el mismo gap, posicionado sobre el
   tablero. Cada puerta ocupa una celda del grid y sobresale hacia el
   gap con un margen negativo. Así queda siempre alineada con el gap,
   independientemente del tamaño del tablero. */
.puertas-overlay {
  position: absolute;
  inset: 10px;                              /* compensa el padding: 10px del tablero */
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows:    repeat(var(--n), minmax(0, 1fr));
  gap: 5px;                                 /* debe igualar el gap del tablero */
  pointer-events: none;
  z-index: 6;
}
.puerta {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  border-radius: 2px;
  opacity: 0.95;
}
/* Puerta horizontal: trazo que cruza el gap INFERIOR de su celda,
   sobresaliendo ligeramente por ambos lados del gap. */
.puerta.horizontal {
  align-self: end;
  justify-self: center;
  height: 5px;
  width: 60%;
  margin-bottom: -5px;                      /* centra el trazo en el gap de 5px */
}
/* Puerta vertical: trazo que cruza el gap DERECHO de su celda. */
.puerta.vertical {
  align-self: center;
  justify-self: end;
  width: 5px;
  height: 60%;
  margin-right: -5px;
}

/* ─── Ventanas ──────────────────────────────────────────────
   Overlay gemelo al de puertas. Las ventanas NO son pasos: sólo
   colorean con azul el borde correspondiente y sirven al predicado
   junto_a_ventana. Las internas van entre dos celdas (misma técnica
   del margen negativo sobre el gap); las externas viven pegadas al
   borde interior de la celda, sin sobresalir. */
.ventanas-overlay {
  position: absolute;
  inset: 10px;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows:    repeat(var(--n), minmax(0, 1fr));
  gap: 5px;
  pointer-events: none;
  z-index: 7;
}
.ventana {
  background: linear-gradient(180deg, #9ad8ff 0%, #5aa8e6 100%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(122, 200, 245, 0.55);
  opacity: 0.95;
}
/* Internas: sobre el gap (como las puertas pero un pelín más gruesas). */
.ventana.horizontal {
  align-self: end;
  justify-self: center;
  height: 6px;
  width: 72%;
  margin-bottom: -5px;
}
.ventana.vertical {
  align-self: center;
  justify-self: end;
  width: 6px;
  height: 72%;
  margin-right: -5px;
}
/* Externas: pegadas al borde interior de la celda, sobre el padding del
   tablero; no sobresalen al exterior del tablero. */
.ventana.externa.lado-arriba    { align-self: start;  justify-self: center; height: 5px; width: 72%; }
.ventana.externa.lado-abajo     { align-self: end;    justify-self: center; height: 5px; width: 72%; }
.ventana.externa.lado-izquierda { align-self: center; justify-self: start;  width: 5px; height: 72%; }
.ventana.externa.lado-derecha   { align-self: center; justify-self: end;    width: 5px; height: 72%; }

/* ─── Personajes (provisionales, fijos) ──────────────────── */

.celda .personajes-fijos {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 4;
  pointer-events: none;
}
/* 1 fijo → ocupa toda la celda. */
.celda .personajes-fijos.single { grid-template-columns: 1fr; grid-template-rows: 1fr; }
/* 2 fijos → 2 columnas, una fila (lado a lado). */
.celda .personajes-fijos.multi[data-count="2"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 4%;
  padding: 6%;
}
/* 3 fijos → 2 columnas y 2 filas, el tercero en el hueco inferior. */
.celda .personajes-fijos.multi[data-count="3"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4%;
  padding: 6%;
}
.celda .personajes-fijos.multi[data-count="3"] .personaje-fijo:nth-child(3) {
  grid-column: 1 / span 2;
  justify-self: center;
}
/* 4+ fijos → 2×2 estándar. */
.celda .personajes-fijos.multi:not([data-count="2"]):not([data-count="3"]) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4%;
  padding: 6%;
}
.celda .personaje-fijo {
  /* Tamaño base un pelín más pequeño que antes (era 62) para dejar
     espacio a marcas provisionales encima de un fijo y que el ojo del
     jugador encaje varios sospechosos en una misma celda. */
  font-size: calc(48cqi / var(--n));
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
  transition: transform var(--t-fast), font-size var(--t);
}
.celda .personajes-fijos.multi[data-count="2"] .personaje-fijo { font-size: calc(34cqi / var(--n)); }
.celda .personajes-fijos.multi[data-count="3"] .personaje-fijo { font-size: calc(28cqi / var(--n)); }
.celda .personajes-fijos.multi:not([data-count="2"]):not([data-count="3"]) .personaje-fijo {
  font-size: calc(24cqi / var(--n));
}
@media (hover: hover) {
  .celda .personaje-fijo:hover { transform: scale(0.92); }
}
.celda.multi-fijo { box-shadow: 0 0 0 2px var(--danger) inset; }

.celda .provisionales {
  position: absolute;
  inset: 4%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  pointer-events: none;
  z-index: 3;
}
.celda .provisionales.single { display: flex; }
.celda .provisional {
  font-size: calc(22cqi / var(--n));
  opacity: 0.55;
  cursor: pointer;
  pointer-events: auto;
  line-height: 1;
  transition: transform var(--t-fast), opacity var(--t-fast);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}
@media (hover: hover) {
  .celda .provisional:hover { opacity: 1; transform: scale(1.4); z-index: 6; }
}
/* Provisional cuando es el único en la celda. Reducido (antes 56cqi)
   para que coincida en escala con el fijo nuevo (48) y dé margen a
   añadir más sospechosos sin solapamientos. */
.celda .provisionales.single .provisional { font-size: calc(40cqi / var(--n)); opacity: 0.55; }

.celda.con-fijo.con-provisionales .provisionales {
  inset: 2% auto auto 2%;
  width: 42%;
  height: 42%;
  z-index: 5;
}
/* Cuando ya hay un fijo en la celda, los provisionales (incluido el
   caso single) deben quedar pequeños arriba a la izquierda. La regla
   `.provisionales.single .provisional` les daba 56cqi y se hacían
   gigantes al fijar a otro personaje en la misma celda. */
.celda.con-fijo .provisional,
.celda.con-fijo .provisionales.single .provisional {
  font-size: calc(14cqi / var(--n));
  opacity: 0.6;
}

/* ─── Leyenda en el panel de objetos (puerta / ventana) ─── */
.objeto-leyenda-titulo {
  list-style: none;
  margin-top: 8px;
  padding: 4px 0;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.objeto-leyenda {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 13px;
  color: var(--text-soft);
}
.objeto-leyenda .emoji.puerta-emoji {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.objeto-leyenda .emoji.ventana-emoji {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6cb1ff, #3a8aff);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.objeto-flag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-weight: 700;
  margin-left: 4px;
}
.objeto-flag.no-pisable {
  background: rgba(255,122,122,0.15);
  color: #ffb3b3;
  border: 1px solid rgba(255,122,122,0.4);
}
.objeto-flag.pisable {
  background: rgba(125,220,149,0.12);
  color: #b9eccb;
  border: 1px solid rgba(125,220,149,0.4);
}
/* Marcas visuales sobre el emoji del objeto en el tablero:
   · anillo VERDE discontinuo en objetos pisables no obvios (reloj de
     Kairós) — espejo del chip verde "pisable" de la leyenda;
   · anillo ROJO discontinuo en objetos no pisables (mesa, horno, TV…)
     — espejo del chip rojo "no pisable" de la leyenda.
   Tumbables (cama, sofá, alfombra) ya se leen como superficie por su
   capa de suelo, no necesitan anillo. */
.celda .objetos-celda .objeto.es-pisable,
.celda .objetos-celda .objeto.es-no-pisable {
  position: relative;
}
.celda .objetos-celda .objeto.es-pisable::after,
.celda .objetos-celda .objeto.es-no-pisable::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px dashed;
  pointer-events: none;
}
.celda .objetos-celda .objeto.es-pisable::after {
  border-color: rgba(125, 220, 149, 0.85);
}
.celda .objetos-celda .objeto.es-no-pisable::after {
  border-color: rgba(255, 122, 122, 0.85);
}

/* ─── Tira-atajo de personajes (debajo del tablero) ──────── */

.tira-personajes {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;          /* fluyen en fila y saltan al llenarse */
  justify-content: flex-start;
  align-content: flex-start;
  gap: 6px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.tira-personaje {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
  /* Tamaño base: cada chip ocupa ~78px y comparte espacio con los
     vecinos. Cuando ya no caben más en la fila, flex-wrap los baja. */
  flex: 1 0 78px;
  max-width: 120px;
  min-height: 56px;
}
.tira-personaje:hover {
  background: rgba(201, 185, 255, 0.08);
  border-color: var(--border-strong);
}
.tira-personaje:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tira-personaje__emoji {
  font-size: 22px;
  line-height: 1;
}
.tira-personaje__nombre {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tira-personaje__badge {
  position: absolute;
  top: 2px;
  right: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  padding: 0 5px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tira-personaje.seleccionado {
  border-color: var(--kairos);
  background: rgba(201, 185, 255, 0.18);
  box-shadow: 0 0 0 2px rgba(201, 185, 255, 0.35);
  transform: translateY(-1px);
}
/* El emoji del personaje seleccionado se hace un pelín más grande para
   reforzar visualmente "estoy colocando a ESTE". */
.tira-personaje.seleccionado .tira-personaje__emoji {
  font-size: 27px;
  filter: drop-shadow(0 0 4px rgba(201, 185, 255, 0.6));
}
@media (max-width: 420px) {
  .tira-personaje.seleccionado .tira-personaje__emoji { font-size: 24px; }
}
.tira-personaje.fijo {
  border-color: var(--ok);
  background: rgba(125, 220, 149, 0.10);
}
.tira-personaje.fijo .tira-personaje__nombre { color: var(--ok); }
.tira-personaje.fijo::after {
  content: '✓';
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 10px;
  color: var(--ok);
  font-weight: 800;
}
.tira-personaje.es-victima { font-style: italic; }

@media (max-width: 420px) {
  .tira-personajes { gap: 4px; padding: 6px; }
  .tira-personaje { flex-basis: 64px; min-height: 50px; padding: 4px 2px; max-width: 100px; }
  .tira-personaje__emoji { font-size: 19px; }
  .tira-personaje__nombre { font-size: 10px; }
}

/* Animación de revelación al acertar.
   Usamos box-shadow INSET (no outline-offset) para que el efecto se
   quede dentro del rectángulo de la celda y no empuje el tablero
   visualmente — un outline-offset de 4-10px puede salir fuera del
   tablero, ser cortado por el contenedor y, en móvil, el navegador
   ajustaba la escala para encajar el contenido (efecto "zoom"). */
@keyframes kai-revelar {
  0%   { box-shadow: inset 0 0 0 0 var(--kairos); }
  40%  { box-shadow: inset 0 0 0 4px var(--kairos), 0 0 12px 0 rgba(201,185,255,0.5); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}
.celda.revelada { animation: kai-revelar 0.9s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .celda.compatible, .celda.error-pista, .celda.revelada,
  .celda, .celda:active {
    transition: none;
    animation: none;
  }
}

/* ─── Panel personajes ───────────────────────────────────── */

.panel-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}
.panel-cabecera h3 { margin: 0; font-size: 16px; }

.btn-abrir-expediente {
  font-family: var(--font);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(201, 185, 255, 0.45);
  background: rgba(201, 185, 255, 0.14);
  color: #e3d9f5;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn-abrir-expediente:hover { background: rgba(201, 185, 255, 0.24); }
.btn-abrir-expediente:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pistas-nota {
  background: var(--kairos-soft);
  border: 1px solid rgba(201, 185, 255, 0.35);
  border-left: 3px solid var(--kairos);
  color: #e0d9f2;
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.pistas-nota[hidden] { display: none; }
.pistas-nota strong { color: var(--kairos); }

.personajes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.personaje-item {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.personaje-item:hover { border-color: var(--kairos); }
.personaje-item.seleccionado {
  border-color: var(--accent);
  background: rgba(245, 193, 90, 0.08);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.personaje-item.colocado { opacity: 0.65; }

.personaje-item .avatar { font-size: 28px; line-height: 1; flex-shrink: 0; transition: font-size var(--t), filter var(--t); }
.personaje-item.seleccionado .avatar {
  font-size: 34px;
  filter: drop-shadow(0 0 6px rgba(245, 193, 90, 0.6));
}
.personaje-item .info { flex: 1; min-width: 0; }
.personaje-item .nombre {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.personaje-item .rol {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
}
.personaje-item .rol.sospechoso { background: rgba(245, 193, 90, 0.18); color: var(--accent); }
.personaje-item .rol.victima { background: rgba(255, 122, 122, 0.18); color: var(--danger); }

.personaje-item .estado-indicador {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
  margin-left: auto;
}
.personaje-item .estado-indicador.estado-fijo { background: rgba(125, 220, 149, 0.18); color: var(--ok); }
.personaje-item .estado-indicador.estado-prov { background: rgba(201, 185, 255, 0.18); color: var(--kairos); }
.personaje-item .estado-indicador.estado-sin  { background: rgba(255, 255, 255, 0.08); color: var(--muted); }

.personaje-item .descripcion { color: var(--text-soft); font-size: 13px; margin-top: 2px; }

.personaje-item .pista {
  margin-top: 8px;
  border-left: 3px solid var(--kairos);
  padding: 6px 10px;
  background: rgba(201, 185, 255, 0.08);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: #e2dbf2;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.personaje-item .pista-texto { display: inline; }
.personaje-item.pista-fallida .pista {
  border-color: var(--danger);
  background: var(--danger-bg);
  animation: latido 0.5s ease-in-out 2;
}

.acciones { margin-top: 6px; }
.btn-mini {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border-strong);
  cursor: pointer;
}
.btn-mini:hover { background: var(--surface-hi); color: var(--text); }

/* ─── Panel objetos ──────────────────────────────────────── */

.panel-objetos__fold > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-soft);
  padding: 2px 0 10px;
  user-select: none;
  list-style: none;
  outline: none;
}
.panel-objetos__fold > summary::-webkit-details-marker { display: none; }
.panel-objetos__fold > summary::before {
  content: '▾';
  display: inline-block;
  font-size: 12px;
  color: var(--muted);
  transition: transform var(--t-fast);
}
.panel-objetos__fold:not([open]) > summary::before { transform: rotate(-90deg); }

.objetos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.objetos li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-soft);
  cursor: default;
}
.objetos li .emoji { font-size: 22px; line-height: 1; }

/* ─── Botonera y resultado ──────────────────────────────── */

.botonera { display: flex; justify-content: center; gap: 12px; }
.botonera button {
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-alt);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), filter var(--t-fast);
  font-weight: 600;
}
.botonera button:hover { background: var(--surface-hi); }
.botonera button:active { transform: translateY(1px); }
.botonera button.primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: 0 6px 18px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
  letter-spacing: 0.3px;
}
.botonera button.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.botonera button.primary:active { transform: translateY(1px); }
.botonera button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.resultado {
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14.5px;
  line-height: 1.55;
  /* Evita que una palabra larga (id, nombre, símbolo) fuerce overflow
     horizontal en móvil, lo que dispara el zoom-out del viewport. */
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
}
.resultado p { margin: 6px 0; }
.resultado.oculto { display: none; }
.resultado h3 { margin: 0 0 8px; font-size: 18px; }
.resultado.exito {
  border-left: 3px solid var(--ok);
  background: rgba(125, 220, 149, 0.08);
}
.resultado.fallo {
  border-left: 3px solid var(--danger);
  background: rgba(255, 122, 122, 0.08);
}
.resultado ul { margin: 0; padding-left: 20px; }

.resultado.exito .puntuacion-final {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(245, 193, 90, 0.12);
  border: 1px solid rgba(245, 193, 90, 0.4);
  border-radius: var(--r-md);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.resultado.exito .puntuacion-final__estrellas {
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--accent);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  /* En móvil 10 estrellas + el espaciado de 2px pueden sumar más
     ancho que el contenedor; permitimos que la línea rompa. */
  word-break: keep-all;
  flex: 0 1 auto;
  max-width: 100%;
}
.resultado.exito .puntuacion-final__texto { flex: 1 1 200px; min-width: 0; }
@media (max-width: 420px) {
  .resultado.exito .puntuacion-final__estrellas { font-size: 20px; letter-spacing: 1px; }
}
.resultado.exito .puntuacion-final__texto strong { color: var(--accent); }

.resultado.fallo .linea-breve {
  margin: 6px 0 0;
  color: #ffd6d6;
  font-weight: 600;
}
.resultado.fallo .puntuacion-fallo {
  margin-top: 10px;
  padding: 6px 10px;
  background: rgba(255, 122, 122, 0.08);
  border-left: 3px solid var(--danger);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px;
  color: #ffd6d6;
  font-variant-numeric: tabular-nums;
}

/* ─── Modal de onboarding ────────────────────────────────── */

.modal-velado {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-velado[hidden] { display: none; }
.modal-velado__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 14, 0.78);
  backdrop-filter: blur(3px);
}
.modal-velado__dialog {
  position: relative;
  width: min(560px, 100%);
  background: linear-gradient(180deg, #1e1f36 0%, #121224 100%);
  color: var(--text);
  border: 1px solid rgba(201, 185, 255, 0.35);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 24px 28px;
  font-family: var(--font-serif);
  line-height: 1.6;
}
.modal-velado__titulo {
  margin: 0 0 14px;
  font-size: 1.3rem;
  font-family: var(--font-display);
  color: #e8ddff;
}
.modal-velado__cuerpo p { margin: 0 0 10px; color: var(--text-soft); }
.modal-velado__cuerpo p strong { color: #e8ddff; }
.modal-velado__cuerpo p em { color: var(--kairos); font-style: italic; }
.modal-velado__cuerpo ul { margin: 0 0 10px 18px; padding: 0; color: var(--text-soft); }
.modal-velado__cuerpo li { margin-bottom: 4px; }
.modal-velado__dialog--ancho { width: min(720px, 100%); max-height: 90dvh; overflow: auto; }
.modal-velado__dialog--ancho .escenario {
  margin: 0 0 6px; color: var(--muted); font-style: italic; font-size: 13px;
}
.modal-velado__dialog--ancho .intro {
  margin: 6px 0 12px; padding: 10px 14px;
  background: var(--surface); border-left: 3px solid var(--kairos);
  border-radius: var(--r-md); font-size: 14.5px; line-height: 1.6;
}
.modal-velado__dialog--ancho .historia-cuerpo p {
  margin: 0 0 10px; color: var(--text-soft); line-height: 1.6; font-size: 14px;
}
.modal-velado__dialog--ancho .historia-cuerpo p:first-letter {
  color: var(--kairos); font-weight: 700;
}
.modal-velado__acciones { margin-top: 14px; display: flex; justify-content: flex-end; }
.modal-velado__acciones .primary {
  font-family: var(--font);
  font-size: 14px;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  cursor: pointer;
}
.modal-velado__acciones .primary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.con-modal { overflow: hidden; }

/* Toast y etiqueta de objeto (al clicar una celda con objeto sin personaje). */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 30, 0.95);
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--kairos);
  font-size: 13px;
  z-index: 900;
  box-shadow: var(--shadow-md);
}

.objeto-etiqueta {
  position: fixed;
  z-index: 1100;
  background: rgba(24, 28, 48, 0.96);
  color: var(--text);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  pointer-events: none;
  border: 1px solid rgba(245, 193, 90, 0.45);
  box-shadow: var(--shadow-md);
  max-width: 70vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: etq 2.6s ease forwards;
}
@keyframes etq {
  0%, 100% { opacity: 0; }
  12%, 78%  { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .objeto-etiqueta { animation: none; opacity: 1; } }

.pie { text-align: center; padding: 14px; color: var(--muted); font-size: 12px; }

/* Safe-area iOS */
@supports (padding: max(0px)) {
  .layout {
    padding-left:  max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}