/* =====================================================================
   La Racha · mastermind.css
   Tablero de la prueba «Mastermind». Todo va prefijado con .jm- para no
   estorbar a los demás juegos. Mobile-first: cabe y se juega en 360 px,
   con botones de 46 px y sin desbordar a lo ancho.
   ===================================================================== */

.jm {
  width: 100%;
  max-width: 420px;
  margin: 0 auto 4px;
  user-select: none;
}

/* --- Reglas ------------------------------------------------------- */
.jm-reglas {
  font-size: 14px;
  color: var(--tinta-suave);
  margin: 0 0 12px;
}
.jm-reglas strong { color: var(--tinta); font-weight: 650; }
.jm-reglas--corta { margin-bottom: 8px; }

/* --- Historial de intentos ---------------------------------------- */
.jm-tabla-caja {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  max-height: 46vh;
  overflow: auto;
  margin: 0 0 14px;
  -webkit-overflow-scrolling: touch;
}
.jm-historial {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.jm-historial th,
.jm-historial td {
  padding: 6px 6px;
  border-bottom: 1px solid var(--linea);
  text-align: center;
  vertical-align: middle;
}
.jm-historial tr:last-child td { border-bottom: 0; }
.jm-historial thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--principal-suave);
  color: var(--tinta-suave);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
}
.jm-col-n { width: 2.6em; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.jm-col-clave { width: 4.6em; }

.jm-codigo { white-space: nowrap; }
.jm-cifra {
  display: inline-block;
  min-width: 1.35em;
  padding: 1px 2px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--principal);
}
.jm-clave {
  display: inline-block;
  min-width: 1.7em;
  padding: 2px 4px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta-suave);
  background: var(--papel);
}
.jm-clave--exacta {
  color: var(--verde);
  border-color: var(--verde);
}

/* --- Intento en curso --------------------------------------------- */
/* Marcador y teclado solo sirven con JavaScript: hasta que mastermind.js
   los da por listos, se juega con el campo de texto de repuesto (.jm-manual),
   que está visible justo mientras ellos no lo están. Así, si el JS no llega a
   ejecutarse (404, caché rancia, error previo), siempre queda dónde escribir. */
.jm-marcador,
.jm-teclado { display: none; }
.jm[data-listo="1"] .jm-marcador { display: flex; }
.jm[data-listo="1"] .jm-teclado { display: grid; }
.jm[data-listo="1"] .jm-manual { display: none; }

.jm-marcador {
  gap: 8px;
  justify-content: center;
  margin: 0 0 8px;
}
.jm-hueco {
  flex: 0 1 56px;
  min-width: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--principal);
}
.jm-hueco--lleno {
  border-style: solid;
  border-color: var(--principal);
  background: var(--principal-suave);
}
.jm-hueco--activo { border-color: var(--principal); }

.jm-aviso {
  min-height: 20px;
  margin: 0 0 10px;
  text-align: center;
  font-size: 13.5px;
  color: var(--tinta-suave);
}
.jm-aviso--error { color: var(--rojo); font-weight: 600; }

/* --- Teclado de cifras -------------------------------------------- */
.jm-teclado {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
}
.jm-tecla {
  appearance: none;
  min-height: 46px;
  min-width: 44px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--papel);
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  color: var(--principal);
  cursor: pointer;
  touch-action: manipulation;
}
.jm-tecla:hover { background: var(--principal-suave); }
.jm-tecla:active { background: var(--principal-suave); }
.jm-tecla:focus-visible { outline: 2px solid var(--principal); outline-offset: 2px; }
.jm-tecla--borrar { color: var(--rojo); font-size: 18px; }

/* --- Alternativa sin teclado de cifras ----------------------------- */
.jm-manual { margin: 0 0 14px; }
.jm-manual label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 5px;
}
.jm-manual__campo {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta);
  font-size: 22px;
  letter-spacing: .3em;
  text-align: center;
}
.jm-manual__pista {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--tinta-suave);
}

/* --- Utilidades ---------------------------------------------------- */
/* .jm-resultado (role="status", con el resultado del último intento) no lleva
   estilo propio a propósito: va con .jm-oculto porque la tabla ya enseña esas
   claves y el mensaje de la página las repite. Es solo para oírlas. */
.jm-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 400px) {
  .jm-historial { font-size: 14px; }
  .jm-cifra { font-size: 17px; }
}