/* =========================================================
   RatoLibre — Juego del 15 (estilos propios del juego)
   ========================================================= */

/* ---------- Barra de herramientas ---------- */

.q15-opcion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-weight: 700;
}

.q15-opcion > span {
  flex: 0 0 auto;
}

.q15-opcion select {
  flex: 1 1 auto;
  min-height: 48px;
  min-width: 0;
  padding: 0 40px 0 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%231f2a37' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 7l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.q15-opcion select:hover {
  border-color: var(--accent);
}

/* ---------- Zona de juego ---------- */

.q15-area {
  padding: 16px;
}

/* ---------- Marcador ---------- */

.q15-marcador {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}

.q15-marcador .dato {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 4px 6px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  text-align: center;
}

.q15-marcador .etiqueta,
.q15-estado .etiqueta {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--muted);
}

.q15-marcador strong {
  font-size: 1.3rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Mensaje ---------- */

/* Alto fijo para el mensaje más largo (tres renglones; cuatro en celulares
   de menos de 360 px): así el tablero de abajo no salta cuando cambia el
   texto. */
.q15-mensaje {
  display: flex;
  align-items: center;
  height: calc(4.5em + 16px);
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--bg);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  overflow: hidden;
}

/* ---------- Tablero ---------- */

.q15-marco {
  display: flex;
  justify-content: center;
}

/* --ancho es el lado del tablero; --p, el de cada pieza. En el celular el
   tablero ocupa casi toda la pantalla: a 375 px las piezas del 5 × 5 miden
   65 px, las del 4 × 4, 83 px y las del 3 × 3, 112 px. */
.q15-tablero {
  --n: 3;
  --gap: 4px;
  --borde: 8px;
  --max: 400px;
  --ancho: 300px;
  --p: calc((var(--ancho) - 2 * var(--borde) - (var(--n) - 1) * var(--gap)) / var(--n));
  position: relative;
  width: var(--ancho);
  height: var(--ancho);
  box-sizing: border-box;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 30%),
    #7c3a28;
  box-shadow: inset 0 0 0 3px #5f2a1b, inset 0 6px 10px rgba(0, 0, 0, 0.35), var(--shadow-lg);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.q15-tablero.es-n4 {
  --max: 440px;
}

.q15-tablero.es-n5 {
  --max: 460px;
}

@supports (width: min(1px, 2px)) {
  .q15-tablero {
    --ancho: min(calc(100vw - 16px), var(--max));
  }

  @media (min-width: 480px) {
    .q15-tablero {
      --ancho: min(calc(100vw - 96px), var(--max));
    }
  }
}

/* Cada pieza es un botón que se coloca con --x y --y (columna y fila) y se
   desliza al cambiar de lugar. La cara de adentro es la que se ve. */
.q15-pieza {
  position: absolute;
  top: var(--borde);
  left: var(--borde);
  z-index: 1;
  width: var(--p);
  height: var(--p);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: default;
  transform: translate(calc(var(--x, 0) * (var(--p) + var(--gap))), calc(var(--y, 0) * (var(--p) + var(--gap))));
  transition: transform 0.14s ease-out;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.q15-pieza.es-movible {
  cursor: pointer;
}

.q15-cara {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffdf7 0%, #f6ead4 100%);
  box-shadow: inset 0 -4px 0 rgba(120, 80, 30, 0.22), inset 0 0 0 2px rgba(120, 80, 30, 0.18), 0 2px 3px rgba(0, 0, 0, 0.4);
  color: #1f2a37;
  font-size: calc(var(--p) * 0.46);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.es-n3 .q15-cara {
  font-size: calc(var(--p) * 0.42);
}

/* Pieza que ya está en su lugar: verde */
.q15-pieza.es-en-su-lugar .q15-cara {
  background: linear-gradient(180deg, #eef8f1 0%, #cfe7d8 100%);
  box-shadow: inset 0 -4px 0 rgba(31, 90, 60, 0.25), inset 0 0 0 2px #2f6f4e, 0 2px 3px rgba(0, 0, 0, 0.4);
  color: #1d5a3c;
}

.q15-pieza.es-movible:hover .q15-cara {
  background: linear-gradient(180deg, #ffffff 0%, #fbf1df 100%);
}

.q15-pieza.es-en-su-lugar.es-movible:hover .q15-cara {
  background: linear-gradient(180deg, #f6fcf8 0%, #dbefe2 100%);
}

.q15-pieza:focus {
  outline: none;
}

.q15-pieza:focus-visible {
  z-index: 3;
}

.q15-pieza:focus-visible .q15-cara {
  outline: 4px solid #ffd54a;
  outline-offset: -4px;
}

/* Pieza que no se puede mover: se sacude */
.q15-pieza.es-no .q15-cara {
  animation: q15-sacudir 0.36s ease-in-out;
}

/* Ordenado: un brillo recorre las piezas del 1 al último */
.q15-tablero.es-ordenado .q15-cara {
  animation: q15-brillo 0.52s ease-out both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

.q15-tablero.es-ordenado {
  box-shadow: inset 0 0 0 3px #5f2a1b, 0 0 0 4px #ffd54a, var(--shadow-lg);
}

/* ---------- Ver cómo queda ---------- */

.q15-modelo {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(var(--n), var(--p));
  grid-auto-rows: var(--p);
  gap: var(--gap);
  padding: var(--borde);
  border-radius: 16px;
  background: #1f2a37;
  cursor: pointer;
  animation: q15-entrar 0.2s ease-out;
}

.q15-modelo[hidden] {
  display: none;
}

.q15-modelo-pieza {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(180deg, #eef8f1 0%, #cfe7d8 100%);
  box-shadow: inset 0 0 0 2px #2f6f4e;
  color: #1d5a3c;
  font-size: calc(var(--p) * 0.46);
  font-weight: 800;
  line-height: 1;
}

.es-n3 .q15-modelo-pieza {
  font-size: calc(var(--p) * 0.42);
}

.q15-modelo-hueco {
  border: 3px dashed rgba(255, 255, 255, 0.7);
  border-radius: 10px;
}

/* ---------- Botones de abajo ---------- */

.q15-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.q15-botones .btn {
  flex: 0 1 260px;
}

.q15-botones .btn[aria-pressed="true"] {
  border-color: var(--accent-2);
  background: var(--accent-2-soft);
  color: var(--accent-2);
}

/* ---------- Resultados ---------- */

.q15-estado {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 16px 0;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.q15-estado .dato {
  display: flex;
  flex-direction: column;
  min-width: 6ch;
}

.q15-estado strong {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Paneles (final y confirmación) ---------- */

.q15-panel {
  margin: 0 0 16px;
  padding: 20px 16px;
  border: 2px solid var(--accent-2);
  border-radius: var(--radius);
  background: var(--accent-2-soft);
  text-align: center;
  animation: q15-entrar 0.35s ease-out;
}

.q15-panel[hidden] {
  display: none;
}

.q15-panel:focus {
  outline: none;
}

.q15-panel .titulo {
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--accent-2);
}

.q15-confirmar {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.q15-confirmar .titulo {
  color: var(--accent-dark);
}

.q15-panel p {
  margin: 0 0 0.6rem;
}

.q15-record {
  font-weight: 700;
}

.q15-panel .botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.q15-panel .botones .btn {
  flex: 1 1 200px;
  max-width: 320px;
}

.q15-panel .botones .btn[hidden] {
  display: none;
}

/* ---------- Animaciones ---------- */

@keyframes q15-sacudir {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes q15-brillo {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); box-shadow: 0 0 0 4px #ffd54a, 0 0 16px 4px rgba(255, 213, 74, 0.8); }
  100% { transform: scale(1); }
}

@keyframes q15-entrar {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Pantallas medianas y grandes ---------- */

@media (min-width: 600px) {
  .q15-marcador,
  .q15-mensaje {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 720px) {
  .q15-opcion {
    flex: 0 1 auto;
  }

  .q15-opcion select {
    min-width: 240px;
  }
}

/* ---------- Celular ---------- */

/* En el celular la zona de juego ocupa todo el ancho de la pantalla, para
   que las piezas del 5 × 5 midan más de 64 px a 375 px. */
@media (max-width: 479px) {
  .q15-area {
    max-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding: 12px 0 16px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .q15-panel,
  .q15-marcador,
  .q15-mensaje,
  .q15-botones {
    margin-left: 12px;
    margin-right: 12px;
  }

  .q15-opcion select {
    padding-right: 36px;
  }
}

@media (max-width: 359px) {
  .q15-mensaje {
    height: calc(6em + 16px);
  }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .q15-pieza {
    transition: none;
  }

  .q15-panel,
  .q15-modelo,
  .q15-pieza.es-no .q15-cara,
  .q15-tablero.es-ordenado .q15-cara {
    animation: none;
  }
}