/* Murdoku · estilo.
 *
 * Copia la manera de ver del juego original: fondo casi negro con un punto morado,
 * acento amarillo, salas en tonos pastel con pared gruesa y oscura, retratos tipo
 * polaroid y los casos como sobres cerrados. Los dibujos son nuestros.
 *
 * Primero el móvil, y no como eslogan: todo lo que se toca mide 44 px o más, el
 * tablero entero cabe sin desplazar la pantalla, y las herramientas viven abajo,
 * donde llega el pulgar. */

:root {
  --fondo: #17131c;
  --fondo-alto: #221c29;
  --fondo-hondo: #0f0c13;
  --tinta: #f3eef7;
  --tenue: #9d93ab;
  --borde: #332b3d;
  --acento: #f5c518;      /* el amarillo de los botones */
  --rojo: #e8534e;        /* la O del logo */
  --verde: #5fb98a;
  --pared: #231c28;       /* el contorno de las salas y de los dibujos */
  --radio: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overscroll-behavior-y: contain;
}

/* ── Barra superior ──────────────────────────────────────────────────────── */

.barra {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 6px;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.barra__atras {
  display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--tinta); text-decoration: none; font-size: 22px; border-radius: 12px;
}
.barra__atras:active { background: var(--fondo-alto); }
.barra__marca { justify-self: center; text-decoration: none; }
.barra__hueco { width: 44px; }

.logo {
  font-weight: 900; letter-spacing: .06em; font-size: 20px; color: #fff;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.logo__o { color: var(--rojo); }

/* ── Camino de casos ─────────────────────────────────────────────────────── */

.camino { padding: 14px 14px 32px; }
.camino__lema { color: var(--tenue); text-align: center; margin: 2px 0 16px; font-size: 15px; }

.camino__sobres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 620px) { .camino__sobres { grid-template-columns: repeat(3, 1fr); } }

/* El sobre cerrado: solapa triangular arriba y el número con su lupa. */
.sobre {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  min-height: 132px; padding: 44px 12px 12px;
  background: var(--fondo-alto); border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--tinta); text-decoration: none; overflow: hidden;
}
.sobre:active { transform: translateY(1px); }
.sobre__solapa {
  position: absolute; inset: 0 0 auto; width: 100%; height: 42px;
  color: #3b3147;
}
.sobre__num {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--fondo-hondo); color: var(--acento); font-weight: 800; font-size: 13px;
}
.lupa { width: 13px; height: 13px; }
.sobre__titulo { font-weight: 700; font-size: 15px; line-height: 1.25; }
.sobre__lugar { color: var(--tenue); font-size: 11.5px; line-height: 1.2; }
.sobre__pie { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.sobre__lado { color: var(--tenue); font-size: 12px; font-variant-numeric: tabular-nums; }

.chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--chip, var(--tenue)) 22%, transparent);
  color: var(--chip, var(--tenue));
  border: 1px solid color-mix(in srgb, var(--chip, var(--tenue)) 45%, transparent);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.chip--flojo { --chip: #9d93ab; }
button.chip { font-family: inherit; cursor: pointer; }

.vacio { color: var(--tenue); text-align: center; padding: 40px 10px; }
code { background: var(--fondo-alto); padding: 1px 5px; border-radius: 5px; font-size: .9em; }

/* ── Pantalla de juego ───────────────────────────────────────────────────── */

.juego { padding: 10px 10px 150px; }
.juego__encabezado h1 { font-size: 19px; margin: 2px 0 6px; line-height: 1.2; }
.juego__lugar { display: block; font-size: 13px; font-weight: 500; color: var(--tenue); margin-top: 2px; }
.juego__chips { display: flex; gap: 6px; margin: 0 0 10px; align-items: center; flex-wrap: wrap; }

/* La historia del caso. Se ve de entrada —es lo primero que se lee— pero ocupa poco:
   en un 9×9 cada línea de más empuja a los sospechosos fuera de la pantalla. */
.relato {
  background: var(--fondo-alto); border: 1px solid var(--borde); border-radius: 12px;
  padding: 8px 11px; margin: 0 0 8px; color: #d9d1e2;
  font-size: 13.5px; line-height: 1.42;
}
/* La primera frase es la de guasa y manda; se distingue sin separarla en dos cajas. */
.relato::first-line { color: var(--acento); }

/* El tablero.
 * Se dimensiona con el ancho disponible, nunca con medidas fijas: un 9×9 tiene que
 * caber en un móvil estrecho sin obligar a desplazar la pantalla a los lados. */
.tablero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--lado), 1fr);
  grid-template-rows: repeat(var(--lado), 1fr);
  /* Que quepa el tablero Y las fichas de los sospechosos sin desplazar la pantalla:
     por eso el tope va en vh y no en píxeles. */
  width: min(100%, 48vh);
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 1;
  background: var(--pared);
  border: 3px solid var(--pared);
  border-radius: 10px;
  overflow: hidden;
  touch-action: manipulation;
}

.casilla {
  /* `min-width: 0` no es cosmética: sin ella, un elemento de rejilla no baja de su
     ancho de contenido, y un SVG sin medidas vale 300 px por defecto. El tablero se
     salía de la pantalla por la derecha por esto. */
  min-width: 0; min-height: 0;
  position: relative; display: grid; place-items: center;
  background: var(--sala); border: 0; padding: 0; margin: 0;
  outline: .5px solid color-mix(in srgb, var(--pared) 25%, transparent);
  cursor: pointer;
}
/* Las cuatro paredes en una sola sombra compuesta: así cualquier combinación de
   paredes convive, también una casilla que tenga tres. */
.casilla {
  box-shadow:
    inset 0 var(--pn, 0) 0 var(--pared),
    inset 0 calc(-1 * var(--ps, 0px)) 0 var(--pared),
    inset var(--po, 0) 0 0 var(--pared),
    inset calc(-1 * var(--pe, 0px)) 0 0 var(--pared);
}

.objeto { width: 72%; height: 72%; }

/* La casilla que ocupa un mueble. Sobre un sillón o una alfombra se puede estar;
   sobre una mesa, no. Se oscurece un punto —lo justo para que se lea «aquí no»
   sin que el mueble pierda su color— porque la regla hay que verla sin leerla. */
.casilla--llena { background-image: linear-gradient(rgba(20, 15, 24, .13), rgba(20, 15, 24, .13)); }
.casilla--llena .objeto { opacity: .92; }

/* El trazo plano del panel: no hay un segundo juego de dibujos, se apagan las capas
   de luz, de sombra y de suelo que llevan todos. Lo que queda es el dibujo liso de
   siempre, con su contorno. */
.trazo-plano .brillo,
.trazo-plano .hondo,
.trazo-plano .suelo { display: none; }
/* Y los materiales vuelven a su color liso: cada forma lleva el suyo escrito en
   `--plano`, así que esta regla sola deshace los cuarenta y cinco degradados. */
.trazo-plano .mat { fill: var(--plano); }

.casilla__marca {
  position: absolute; inset: 0; display: none; place-items: center;
  color: var(--pared); font-weight: 900;
}
.casilla__marca::before,
.casilla__marca::after {
  content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 2.5px;
  background: color-mix(in srgb, var(--pared) 70%, transparent); border-radius: 2px;
}
.casilla__marca::before { transform: rotate(45deg); }
.casilla__marca::after { transform: rotate(-45deg); }
.casilla--marcada .casilla__marca { display: grid; }

.casilla__ficha { position: absolute; inset: 8%; display: none; }
.casilla--ocupada .casilla__ficha { display: block; }
.casilla--ocupada .objeto { opacity: .25; }
.casilla__ficha .retrato {
  width: 100%; height: 100%; border-radius: 50%;
  background: #fff; border: 2px solid var(--pared); overflow: hidden;
}
.casilla--destino { animation: latido .35s ease; }
@keyframes latido { 50% { transform: scale(1.12); } }

/* Rótulos de sala, pegados al borde inferior de su habitación. */
.rotulo--centro { transform: translate(-50%, -100%); }
.rotulo--izq { transform: translate(2px, -100%); }
.rotulo--der { transform: translate(-2px, -100%); }

.rotulo {
  position: absolute;
  margin-top: -3px; padding: 1px 7px; border-radius: 999px;
  max-width: calc(var(--ancho) + 6px);
  background: color-mix(in srgb, var(--pared) 85%, transparent); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
  pointer-events: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

.ayuda { color: var(--tenue); font-size: 12.5px; text-align: center; margin: 6px 0 2px; min-height: 18px; }

/* Las fichas de los sospechosos: polaroids en una tira que se desliza. */
.sospechosos {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.sospechosos::-webkit-scrollbar { height: 0; }

.ficha {
  flex: 0 0 122px; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #faf6ef; color: #241e2a; border: 0; border-radius: 10px;
  padding: 8px 8px 10px; font-family: inherit; text-align: center; cursor: pointer;
  box-shadow: 0 2px 0 #c9bfae, 0 6px 14px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ficha[aria-pressed="true"] {
  transform: translateY(-5px);
  box-shadow: 0 0 0 3px var(--acento), 0 8px 18px rgba(0,0,0,.45);
}
.ficha--colocada { opacity: .5; }
.ficha__foto {
  position: relative; width: 52px; height: 52px; border-radius: 8px; overflow: hidden;
  background: var(--color); border: 2px solid var(--pared);
}
.ficha__foto .retrato { width: 100%; height: 100%; display: block; }
.ficha__v {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--rojo); color: #fff; font-size: 11px; font-weight: 900;
  border: 1.5px solid var(--pared);
}
.ficha__nombre { font-weight: 800; font-size: 13.5px; }
.ficha__pista { font-size: 11px; line-height: 1.28; color: #4a4152; }

/* Herramientas, ancladas abajo donde llega el pulgar. */
.herramientas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: flex; gap: 8px; align-items: center;
  padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: color-mix(in srgb, var(--fondo-hondo) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--borde);
}
.modos { display: flex; background: var(--fondo-alto); border-radius: 12px; padding: 3px; gap: 3px; }
.modo {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--tenue); font: 600 13.5px/1 inherit; cursor: pointer;
}
.modo--on { background: var(--acento); color: #241e2a; font-weight: 800; }
.util {
  min-width: 46px; min-height: 46px; display: grid; place-items: center;
  background: var(--fondo-alto); color: var(--tinta); border: 1px solid var(--borde);
  border-radius: 12px; font-size: 18px; cursor: pointer; text-decoration: none;
}
.util--ancho { width: 100%; font-size: 15px; font-weight: 600; min-height: 48px; }
.comprobar {
  flex: 1; min-height: 46px; border: 0; border-radius: 12px;
  background: var(--acento); color: #241e2a; font: 800 15px/1 inherit; cursor: pointer;
}
.comprobar:active { transform: translateY(1px); }

/* ── Resultado ───────────────────────────────────────────────────────────── */

.resultado { border: 0; background: transparent; padding: 0; max-width: 92vw; }
.resultado::backdrop { background: rgba(8,6,10,.72); }
.resultado__caja {
  background: var(--fondo-alto); border: 1px solid var(--borde); border-radius: 18px;
  padding: 22px 18px 18px; text-align: center; width: min(360px, 92vw);
}
.resultado__icono { font-size: 40px; margin: 0 0 4px; }
.resultado__caja h2 { margin: 0 0 6px; font-size: 20px; }
.resultado__caja p { color: #cfc6da; margin: 0 0 14px; }
.resultado__botones { display: grid; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Cuenta: entrar, registro, ficha ─────────────────────────────────────── */

.barra__yo {
  justify-self: end; width: 36px; height: 36px; margin-right: 4px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--acento); color: #241e2a; font-weight: 800; font-size: 13px;
  text-decoration: none;
}
.barra__entrar { justify-self: end; font-size: 20px; color: var(--tenue); }

.camino__marcador { text-align: center; color: var(--tenue); font-size: 13px; margin: -8px 0 16px; }
.camino__marcador a, .hoja a { color: var(--acento); }

.sobre--hecho { border-color: color-mix(in srgb, var(--verde) 50%, var(--borde)); }
.sobre__visto {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: var(--verde); color: #14241c; font-weight: 900; font-size: 13px;
}

.hoja { padding: 16px 16px 40px; max-width: 560px; margin: 0 auto; }
.hoja h1 { font-size: 22px; margin: 4px 0 10px; }
.hoja h2 { font-size: 15px; margin: 22px 0 8px; color: var(--tenue); font-weight: 700;
           text-transform: uppercase; letter-spacing: .06em; }
.hoja__intro { color: var(--tenue); font-size: 14px; margin: 0 0 14px; }
.hoja__pie { color: var(--tenue); font-size: 14px; margin: 16px 0 0; text-align: center; }

.aviso {
  background: color-mix(in srgb, var(--rojo) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--rojo) 50%, transparent);
  color: #ffd9d7; padding: 10px 12px; border-radius: 10px; margin: 0 0 14px; font-size: 14px;
}

.formulario { display: grid; gap: 14px; }
.formulario label { display: grid; gap: 6px; font-size: 13.5px; color: var(--tenue); font-weight: 600; }
.formulario input {
  min-height: 48px; padding: 0 12px; font-size: 16px;   /* 16px evita el zoom de iOS al enfocar */
  background: var(--fondo-alto); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 12px; font-family: inherit;
}
.formulario input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.formulario .comprobar { min-height: 50px; }

.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 520px) { .numeros { grid-template-columns: repeat(3, 1fr); } }
.numero {
  background: var(--fondo-alto); border: 1px solid var(--borde); border-radius: 12px;
  padding: 12px; display: grid; gap: 2px;
}
.numero b { font-size: 21px; font-variant-numeric: tabular-nums; }
.numero span { color: var(--tenue); font-size: 12px; }

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; color: var(--tenue); font-size: 11.5px; letter-spacing: .06em;
            text-transform: uppercase; padding: 0 8px 6px 0; font-weight: 700; }
.tabla td { padding: 9px 8px 9px 0; border-top: 1px solid var(--borde); }

.historial { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.historial a, .codigo {
  display: grid; gap: 2px; padding: 11px 12px; text-decoration: none; color: var(--tinta);
  background: var(--fondo-alto); border: 1px solid var(--borde); border-radius: 12px;
}
.historial span { color: var(--tenue); font-size: 12.5px; }
.codigo b { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; font-size: 16px; }

/* ── Panel de progreso: racha, nivel y meta ──────────────────────────────── */

.panel {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  background: var(--fondo-alto); border: 1px solid var(--borde); border-radius: 14px;
  padding: 12px 14px; margin: 0 0 14px;
}
.panel--ficha { grid-template-columns: auto 1fr; }
.panel__racha { display: flex; align-items: baseline; gap: 4px; }
.panel__racha b { font-size: 22px; font-variant-numeric: tabular-nums; }
.panel__racha span { color: var(--tenue); font-size: 12px; }
.panel__llama { font-size: 20px; line-height: 1; }
.panel__racha--peligro { filter: grayscale(1); opacity: .75; }
.panel__alto { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.panel__alto b { font-size: 13.5px; }
.panel__alto span { color: var(--tenue); font-size: 11.5px; }
.barra-xp { height: 8px; background: var(--fondo-hondo); border-radius: 99px; overflow: hidden; }
.barra-xp i { display: block; height: 100%; background: var(--acento); border-radius: 99px; }

/* El anillo de la meta diaria, con un degradado cónico: sin SVG ni JavaScript. */
.anillo {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--verde) calc(var(--vuelta) * 1%), var(--fondo-hondo) 0);
}
.anillo--hecho span { color: var(--verde); font-size: 15px; }
.anillo span {
  width: 36px; height: 36px; border-radius: 50%; background: var(--fondo-alto);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.camino__aviso {
  background: color-mix(in srgb, var(--acento) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent);
  color: #ffe9a8; border-radius: 10px; padding: 9px 12px; margin: -6px 0 14px; font-size: 13px;
}

/* El caso del día: el único sobre abierto de la portada. */
.hoy {
  display: grid; gap: 3px; padding: 14px; margin: 0 0 18px; text-decoration: none;
  border-radius: 14px; color: #241e2a;
  background: linear-gradient(135deg, var(--acento), #ffd95e);
  box-shadow: 0 6px 18px rgba(245,197,24,.18);
}
.hoy--hecho { opacity: .72; }
.hoy__etiqueta { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.hoy b { font-size: 17px; }
.hoy__pie { font-size: 12.5px; opacity: .76; }

.temporada {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tenue); margin: 18px 0 10px; font-weight: 700;
}
.temporada span { font-variant-numeric: tabular-nums; }

.sobre--jefe { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); }
.sobre__jefe { color: var(--acento); font-size: 13px; margin-left: auto; }

/* ── Logros ──────────────────────────────────────────────────────────────── */

.logros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.logro {
  display: grid; gap: 3px; justify-items: center; text-align: center;
  background: var(--fondo-alto); border: 1px solid var(--borde); border-radius: 12px;
  padding: 10px 4px; opacity: .35; filter: grayscale(1);
}
.logro--si { opacity: 1; filter: none; border-color: color-mix(in srgb, var(--acento) 40%, var(--borde)); }
.logro__icono { font-size: 20px; line-height: 1; }
.logro__nombre { font-size: 10px; color: var(--tenue); line-height: 1.2; }

.meta { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; }
.meta label { color: var(--tenue); font-size: 13.5px; font-weight: 600; }
.meta select {
  flex: 1; min-height: 44px; padding: 0 10px; font-size: 15px; font-family: inherit;
  background: var(--fondo-alto); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 12px;
}

.tabla--tu { background: color-mix(in srgb, var(--acento) 12%, transparent); }
.puesto { color: var(--tenue); font-variant-numeric: tabular-nums; width: 28px; }

/* El premio al resolver un caso. */
.premio { display: grid; gap: 6px; margin: 10px 0 4px; }
.premio__xp { font-size: 26px; font-weight: 900; color: var(--acento); }
.premio__detalle { color: var(--tenue); font-size: 12.5px; }
.premio__logro {
  display: inline-flex; align-items: center; gap: 6px; justify-self: center;
  background: color-mix(in srgb, var(--acento) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: #ffe9a8;
}

/* ── Panel y editor ───────────────────────────────────────────────────────────
 *
 * Mismo idioma que el juego: nada de panel de administración gris. Se abre desde el
 * móvil con una mano, y si pareciera otra aplicación habría que aprender dos. */

.hoja--ancha { max-width: 760px; }
.hoja__nota { color: var(--tenue); font-size: 13px; line-height: 1.45; margin: 8px 0 14px; }
.tenue { color: var(--tenue); font-size: 12.5px; }
.aviso--bien {
  background: color-mix(in srgb, var(--verde) 16%, transparent);
  border-color: color-mix(in srgb, var(--verde) 45%, transparent);
  color: #d6f3e4;
}
.util--rojo { border-color: color-mix(in srgb, var(--rojo) 45%, transparent); color: #ffd9d7; }
.numero--mira { border-color: color-mix(in srgb, var(--acento) 55%, transparent); }
.numero--mira b { color: var(--acento); }

/* El botón amarillo también se usa como enlace, y `.hoja a` pinta los enlaces de
 * amarillo: sin esto, el texto queda amarillo sobre amarillo y el botón sale en
 * blanco. Lo vi en una captura, no leyendo el CSS. */
a.comprobar {
  display: grid; place-items: center; text-align: center;
  color: #241e2a; text-decoration: none; padding: 0 12px;
}
.acciones { display: grid; gap: 8px; margin: 18px 0 6px; }
.acciones .util--ancho, .acciones a.comprobar { white-space: nowrap; }
.acciones__fila { display: grid; gap: 6px; }
.acciones__fila form { margin: 0; }
.acciones__fila .util { min-height: 38px; font-size: 13px; padding: 0 10px; width: 100%; }

.pestanas { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 2px; }
.pestana {
  flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; font-size: 13px;
  background: var(--fondo-alto); border: 1px solid var(--borde);
  color: var(--tenue); text-decoration: none;
}
.pestana--on { color: #1b1520; background: var(--acento); border-color: var(--acento); font-weight: 700; }

.tabla--casos td:first-child { width: 34px; }
.tabla--casos td:last-child { width: 96px; }
.tabla--casos a { color: var(--tinta); text-decoration: none; }

.propuesta {
  background: var(--fondo-alto); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px; margin: 0 0 14px;
}
.propuesta h2 { margin: 0 0 4px; font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--tinta); }
.propuesta h2 a { color: var(--tinta); text-decoration: none; }
.propuesta__botones { margin: 10px 0 8px; }
.propuesta__rechazo { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.propuesta__rechazo input {
  min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 14px;
  background: var(--fondo); border: 1px solid var(--borde); color: var(--tinta);
}
.casilla-si { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tenue); }
.casilla-si input { width: 22px; height: 22px; accent-color: var(--acento); }

/* ── El editor ────────────────────────────────────────────────────────────── */

.editor { padding: 10px 14px 40px; max-width: 560px; margin: 0 auto; }
.editor h1 { font-size: 20px; margin: 2px 0 10px; }

.pasos { display: flex; gap: 6px; margin: 0 0 12px; }
.paso-bot {
  flex: 1; display: grid; gap: 1px; justify-items: center; padding: 7px 2px;
  background: var(--fondo-alto); border: 1px solid var(--borde); border-radius: 10px;
  color: var(--tenue); font-size: 10.5px; cursor: pointer; min-height: 46px;
}
.paso-bot b { font-size: 14px; }
.paso-bot--on { background: var(--acento); border-color: var(--acento); color: #1b1520; font-weight: 700; }

/* En el editor la ficha y el mueble se ven siempre: no hay estado «ocupada». */
.pantalla-editor .casilla__ficha { display: grid; place-items: center; inset: 0; }
.casilla__mueble { position: absolute; inset: 12%; display: grid; place-items: center; }
.casilla__mueble svg { width: 100%; height: 100%; }
.casilla--elegida { outline: 2px dashed color-mix(in srgb, var(--acento) 80%, transparent); outline-offset: -3px; }

.mota {
  display: grid; place-items: center; width: 82%; max-width: 30px; aspect-ratio: 1;
  border-radius: 50%; background: var(--color); color: #1b1520;
  font-size: 9.5px; font-weight: 800; border: 1.5px solid var(--pared);
  text-transform: uppercase; letter-spacing: -.02em;
}
.mota--victima { box-shadow: 0 0 0 2px var(--rojo); }

.mandos { margin: 14px 0 0; }
.mandos__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; align-items: end; }
.mandos__fila label { display: grid; gap: 5px; font-size: 13px; color: var(--tenue); }
.mandos__fila select, .editor__campo input, .editor__campo textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 12px; font-size: 15px;
  background: var(--fondo-alto); border: 1px solid var(--borde); color: var(--tinta);
  font-family: inherit;
}
.editor__campo { display: grid; gap: 6px; font-size: 13px; color: var(--tenue); margin: 0 0 12px; }
.editor__campo textarea { min-height: 92px; line-height: 1.5; }
.editor__sala { font-size: 13.5px; color: var(--tinta); background: var(--fondo-alto);
                border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; }

.paleta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.tiza {
  display: flex; align-items: center; gap: 7px; padding: 6px 8px; min-height: 46px;
  background: var(--fondo-alto); border: 1px solid var(--borde); border-radius: 12px;
  color: var(--tinta); font-size: 13px; cursor: pointer;
}
.tiza--on { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.tiza__color { width: 16px; height: 16px; border-radius: 5px; background: var(--tono); border: 1.5px solid var(--pared); flex: 0 0 auto; }
.tiza__nombre {
  width: 7.5em; background: transparent; border: 0; color: var(--tinta);
  font: inherit; padding: 2px 0; border-bottom: 1px dashed var(--borde);
}
.tiza__cuenta { color: var(--tenue); font-size: 11px; font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: right; }
.tiza--mueble { flex-direction: column; gap: 2px; width: 70px; font-size: 10.5px; color: var(--tenue); text-align: center; }
.tiza--mueble svg { width: 26px; height: 26px; }
.tiza--puesto { opacity: .45; }

.paleta--gente { gap: 8px; }
.reo { display: flex; align-items: center; gap: 4px; }
.reo__quien {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; min-height: 46px;
  background: var(--fondo-alto); border: 1px solid var(--borde);
  border-radius: 12px 0 0 12px; cursor: pointer; color: var(--tinta);
}
.reo--on .reo__quien { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.reo--puesto .reo__quien { opacity: .55; }
.reo__nombre { width: 5.5em; background: transparent; border: 0; color: inherit; font: inherit;
               border-bottom: 1px dashed var(--borde); padding: 2px 0; }
.reo__quien .mota { width: 26px; max-width: 26px; }
.reo__v {
  min-width: 34px; min-height: 46px; border-radius: 0 12px 12px 0; cursor: pointer;
  background: var(--fondo-alto); border: 1px solid var(--borde); border-left: 0;
  color: var(--tenue); font-weight: 800; font-size: 13px;
}
.reo__v--on { background: var(--rojo); border-color: var(--rojo); color: #fff; }

.pistas { display: grid; gap: 8px; margin: 14px 0 0; }
.pista-fila { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; }
.pista-fila select {
  width: 100%; min-height: 46px; padding: 8px 10px; border-radius: 12px; font-size: 13.5px;
  background: var(--fondo-alto); border: 1px solid var(--borde); color: var(--tinta);
}
.informe { margin: 14px 0; }
.informe__fallos { margin: 0; padding-left: 20px; color: #ffd9d7; font-size: 13.5px; line-height: 1.5; }
.informe__fallos li { margin: 0 0 6px; }
.informe__datos { font-size: 14px; color: var(--tenue); }
.informe__datos b { color: var(--tinta); }

/* ── La comunidad ─────────────────────────────────────────────────────────── */

.camino__titulo { font-size: 22px; margin: 4px 0 6px; padding: 0 2px; }
.sobre__autor {
  position: absolute; bottom: 6px; right: 8px; font-size: 10px; color: var(--tenue);
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Los mundos ───────────────────────────────────────────────────────────────
 *
 * La paleta de cada mundo se inyecta en la propia página desde `temas.js`, así que
 * aquí solo queda lo que no es color: la raya del mundo en cada sobre del camino,
 * que es lo que deja ver de un vistazo que una temporada cambia de ambiente. */

.sobre::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--mundo, transparent); opacity: .85;
}
.sobre--hecho::after { opacity: .35; }

/* ── El estilo de la casa (panel) ────────────────────────────────────────────
   Se elige mirando, no leyendo: cada opción enseña sus propios muebles y sus
   propias caras sobre el color de ese mundo. */

.estilos { display: grid; gap: 10px; margin: 0 0 18px; }

.estilo {
  display: grid; gap: 8px;
  padding: 10px 12px 12px; border-radius: var(--radio);
  background: var(--piel); border: 2px solid var(--borde);
  cursor: pointer;
}
.estilo:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.estilo--puesto { border-color: var(--marca); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marca) 40%, transparent); }
.estilo input { position: absolute; opacity: 0; pointer-events: none; }

.estilo__nombre {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-weight: 800; color: var(--marca);
}
.estilo__nombre i { font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--tenue); }

.estilo__tira { display: flex; gap: 6px; flex-wrap: wrap; }
.muestra {
  width: 46px; height: 46px; border-radius: 8px;
  display: grid; place-items: center;
  outline: 1px solid rgba(0,0,0,.25);
}
.muestra .objeto { width: 72%; height: 72%; }

/* La casilla que ocupa un mueble. Sobre un sillón o una alfombra se puede estar;
   sobre una mesa, no. Se oscurece un punto —lo justo para que se lea «aquí no»
   sin que el mueble pierda su color— porque la regla hay que verla sin leerla. */
.casilla--llena { background-image: linear-gradient(rgba(20, 15, 24, .13), rgba(20, 15, 24, .13)); }
.casilla--llena .objeto { opacity: .92; }
.muestra__cara {
  width: 84%; height: 84%; border-radius: 50%; overflow: hidden;
  background: #fff; border: 2px solid var(--pared); display: block;
}
.muestra__cara .retrato { width: 100%; height: 100%; display: block; }

/* ── El tutorial ─────────────────────────────────────────────────────────────
   El tablero manda y el texto va debajo: lo que se explica hay que estar viéndolo
   mientras se lee. En el móvil el tablero se queda pegado arriba al desplazar. */

.hoja--tutorial { padding-bottom: 28px; }

.tutorial__tablero {
  /* Pegado DEBAJO de la barra, no en el cero de la ventana: con `top: 0` la primera
     fila del tablero se esconde detrás de la cabecera justo cuando el paso habla de
     ella. Son 44 px de barra más sus seis arriba, sus seis abajo y la raya. */
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 57px); z-index: 5;
  padding: 8px 0 10px; margin: 0 0 4px;
  /* Fondo opaco y no un degradado: con el degradado, el título del paso se leía por
     debajo del tablero al desplazar y quedaban dos textos encima del mismo sitio. */
  background: var(--fondo);
  box-shadow: 0 10px 14px -8px rgba(0, 0, 0, .75);
}
.pantalla-tutorial .tablero { max-width: 330px; margin: 0 auto; }
.pantalla-tutorial .casilla { cursor: default; }

/* La casilla de la que se está hablando. Va como contorno y no como sombra porque
   las cuatro sombras interiores ya son las paredes de la sala. */
.casilla--foco { outline: 3px solid var(--acento); outline-offset: -3px; z-index: 2; }

.pasos { list-style: none; margin: 0; padding: 0; min-height: 132px; }
.pasos .paso__titulo {
  font-size: 17px; margin: 2px 0 6px; color: var(--acento);
  text-transform: none; letter-spacing: 0;
}
.paso__texto { margin: 0; font-size: 14.5px; line-height: 1.5; }

.tutorial__pies {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 4px;
}
.tutorial__pies .comprobar { flex: 1; }
.tutorial__cuenta { color: var(--tenue); font-size: 13px; font-variant-numeric: tabular-nums; }
.tutorial__saltar { margin: -6px 0 10px; font-size: 13.5px; }
.tutorial__final { margin: 14px 0 4px; }
.tutorial__final .comprobar { width: 100%; display: block; text-align: center; }

/* El sospechoso del que habla el paso. */
.ficha--mirando { box-shadow: 0 0 0 3px var(--acento), 0 8px 18px rgba(0,0,0,.45); }

.reglas { margin: 8px 0 16px; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.reglas li { margin-bottom: 5px; }
.reglas b { color: var(--acento); }

/* La tarjeta de la portada para quien no lo ha visto. Es la misma pieza que el caso
   del día, en frío: si fuera igual de amarilla competiría con él. */
.hoy--tutorial {
  background: var(--fondo-alto); color: var(--tinta);
  border: 2px dashed color-mix(in srgb, var(--acento) 55%, transparent);
}
.hoy--tutorial .hoy__etiqueta, .hoy--tutorial .hoy__pie { color: var(--acento); }

/* ── La inspectora ───────────────────────────────────────────────────────────
   Cara a la izquierda y globo a la derecha, como un cómic. El globo lleva el pico
   apuntando a la cara: sin el pico son dos cosas una al lado de la otra, y con él
   es alguien hablando. */

.guia { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; }

.guia__foto {
  flex: 0 0 48px; width: 48px; height: 48px;
  border-radius: 50%; overflow: hidden;
  background: #fff; border: 2px solid var(--pared);
}
.guia__foto svg { width: 100%; height: 100%; display: block; }

.guia__globo {
  position: relative; flex: 1 1 auto; min-width: 0;
  background: var(--fondo-alto); border: 1px solid var(--borde);
  border-radius: 12px; padding: 9px 12px 8px;
}
.guia__globo::before {
  content: ''; position: absolute; left: -7px; top: 15px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--fondo-alto);
  border-left: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
}
.guia__dice { margin: 0; font-size: 14px; line-height: 1.45; }
.guia__quien {
  display: block; margin-top: 4px;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue);
}

/* En el tutorial manda ella: el globo ocupa el ancho y la cara va un poco más grande. */
.guia--paso .guia__foto { flex-basis: 54px; width: 54px; height: 54px; }
.guia--paso .guia__dice { font-size: 14.5px; }

/* En el aviso de resultado, en cambio, es un comentario al margen. */
.guia--aviso { margin: 10px 0 2px; text-align: left; }
.guia--aviso .guia__foto { flex-basis: 40px; width: 40px; height: 40px; }
.guia--aviso .guia__dice { font-size: 13px; }