/* =========================================================
   RatoLibre — Solitario Spider: estilos propios del juego
   Depende de ../../assets/css/base.css (tokens y clases) y de
   ../../assets/css/cartas.css (la baraja compartida).

   Tamaño de las cartas: lo fija el JS midiendo las columnas
   (--spi-w = ancho de la columna, --spi-h = alto de la carta).
   En el celular caben diez columnas de unos 34 px: la carta se
   muestra con 72 px de alto y el dibujo de la baraja se recorta
   por la derecha (clase .is-recortada), así el número de la
   esquina conserva sus 16,8 px.
   ========================================================= */

.spi-subtitulo {
  color: var(--muted);
  font-size: 1.1rem;
  margin-top: -0.2rem;
}

/* ---------- Nivel ---------- */

.spi-nivel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  font-weight: 700;
}

.spi-nivel select {
  flex: 1 1 auto;
  min-height: 48px;
  min-width: 190px;
  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;
}

.spi-nivel select:hover {
  border-color: var(--accent);
}

.game-toolbar .btn.is-hint {
  box-shadow: 0 0 0 4px #ffd54a;
}

/* ---------- Confirmación de juego nuevo ---------- */

.spi-confirmar {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.spi-confirmar[hidden] {
  display: none;
}

.spi-confirmar p {
  margin: 0 0 8px;
}

.spi-confirmar-titulo {
  font-size: 1.15rem;
  font-weight: 800;
}

.spi-confirmar-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.spi-confirmar-botones .btn {
  flex: 1 1 auto;
}

/* ---------- Mesa ---------- */

.spi-area {
  --spi-gap: 3px;
  --spi-w: 34px;
  --spi-h: 72px;
  --spi-radio: 4px;
  --spi-verde: #2f6f4e;
  --spi-verde-oscuro: #24563d;
  --spi-oro: #ffd54a;

  position: relative;
  /* En el celular la mesa ocupa todo el ancho para que las cartas sean más grandes. */
  margin-left: -16px;
  margin-right: -16px;
  max-width: none;
  padding: 10px 4px 14px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  background: var(--spi-verde);
  border-color: var(--spi-verde-oscuro);
  /* "manipulation": se puede desplazar la página deslizando sobre el tapete,
     pero sin zoom por doble toque. */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.spi-tablero {
  max-width: 900px;
  margin: 0 auto;
}

.spi-fila {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--spi-gap);
}

.spi-arriba {
  margin-bottom: 14px;
}

/* Las escaleras completas van de la columna 3 a la 10. */
.spi-hecha-primera {
  grid-column-start: 3;
}

.spi-pila {
  position: relative;
  min-height: var(--spi-h);
  border-radius: var(--spi-radio);
}

.spi-col {
  min-height: calc(var(--spi-h) * 2.5);
  touch-action: manipulation;
}

.spi-pila:focus-visible,
.spi-carta:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* Hueco vacío: contorno punteado */
.spi-pila.is-vacia::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--spi-h);
  box-sizing: border-box;
  border: 2px dashed rgba(255, 255, 255, 0.55);
  border-radius: var(--spi-radio);
}

.spi-hecha.is-vacia::before {
  border-color: rgba(255, 255, 255, 0.3);
}

.spi-mazo {
  cursor: pointer;
}

.spi-mazo.is-vacia {
  cursor: default;
}

.spi-cuenta {
  position: absolute;
  right: -4px;
  bottom: -8px;
  z-index: 2;
  min-width: 1.6em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--text);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* ---------- Cartas (dibujo de la baraja compartida) ---------- */

.spi-area .carta {
  display: block;
  width: 100%;
  height: var(--spi-h);
  border-radius: var(--spi-radio);
  overflow: hidden;
}

.spi-carta {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--spi-h);
  border-radius: var(--spi-radio);
  cursor: default;
}

.spi-carta.is-movible {
  cursor: pointer;
  /* Solo las cartas que se pueden mover se arrastran: en el resto, deslizar
     el dedo sigue desplazando la página. */
  touch-action: none;
}

/* Carta recortada (celular): el borde derecho del dibujo queda fuera, así
   que se pone uno encima, del mismo gris que el de la baraja. El índice
   girado de abajo a la derecha (el grupo rotate(180) del dibujo) quedaría
   cortado a la mitad, así que se oculta; el de arriba a la izquierda,
   que es el que se lee en las columnas, queda completo. */
.spi-area.is-recortada .carta svg > g[transform^="rotate(180"] {
  display: none;
}

.spi-area.is-recortada .carta::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #8b929c;
  border-radius: inherit;
  pointer-events: none;
}

/* ---------- Estados ---------- */

.spi-carta.is-selected {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--spi-oro), 0 6px 14px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px);
  z-index: 10;
}

.spi-carta.is-target {
  box-shadow: 0 0 0 3px var(--spi-oro), 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 5;
}

.spi-col.is-target.is-vacia::before {
  border-color: var(--spi-oro);
  box-shadow: 0 0 0 3px rgba(255, 213, 74, 0.45);
}

.spi-carta.is-dragging {
  opacity: 0.35;
}

@keyframes spi-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 213, 74, 0); }
  50%      { box-shadow: 0 0 0 6px var(--spi-oro); }
}

.spi-carta.is-hint,
.spi-mazo.is-hint {
  animation: spi-pulso 0.9s ease-in-out 3;
  z-index: 9;
}

.spi-col.is-hint::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--spi-h);
  border-radius: var(--spi-radio);
  animation: spi-pulso 0.9s ease-in-out 3;
}

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

.is-shake {
  animation: spi-sacudir 0.3s ease;
}

/* Capa que sigue al dedo o al ratón mientras se arrastra */
.spi-arrastre {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  will-change: transform;
}

.spi-arrastre .spi-carta {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

/* ---------- Marcador y mensajes ---------- */

.spi-cancelar {
  display: flex;
  width: 100%;
  max-width: 360px;
  margin: -4px auto 12px;
}

.spi-cancelar[hidden] {
  display: none;
}

.spi-marcador {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.spi-dato {
  flex: 1 1 calc(25% - 6px);
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  text-align: center;
}

.spi-dato-nombre {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

.spi-dato-valor {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.spi-mensaje {
  min-height: 2.6em;
  margin: 0 0 1.5rem;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--accent-2-soft);
  border-left: 5px solid var(--accent-2);
  font-weight: 600;
}

.spi-mensaje.is-error {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

@media (max-width: 759px) {
  .spi-dato {
    flex-basis: calc(50% - 4px);
  }

  .spi-nivel {
    flex-basis: 100%;
  }

  .spi-nivel select {
    min-width: 0;
    width: 100%;
  }
}

/* ---------- Aviso de victoria ---------- */

.spi-victoria {
  position: fixed;
  inset: 0;
  z-index: 1100; /* encima del banner de cookies (1000) */
  display: flex;
  padding: 16px;
  background: rgba(31, 42, 55, 0.62);
  overflow-y: auto;
}

.spi-victoria[hidden] {
  display: none;
}

.spi-victoria.is-abriendo {
  pointer-events: none;
}

@keyframes spi-aparecer {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.spi-victoria .card {
  width: 100%;
  max-width: 440px;
  margin: auto;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: spi-aparecer 0.35s ease-out;
}

.spi-victoria h2 {
  color: var(--accent-2);
  font-size: 1.8rem;
}

.spi-victoria .spi-record {
  color: var(--accent);
  font-weight: 700;
}

.spi-victoria-acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.spi-victoria .btn {
  width: 100%;
  max-width: 320px;
}

/* ---------- Escritorio ---------- */

@media (min-width: 720px) {
  .spi-area {
    --spi-gap: 10px;
    --spi-radio: 7px;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    padding: 18px 16px 22px;
    border-radius: var(--radius);
    border-left: 1px solid var(--spi-verde-oscuro);
    border-right: 1px solid var(--spi-verde-oscuro);
  }

  .spi-arriba {
    margin-bottom: 20px;
  }

  .spi-cuenta {
    font-size: 0.9rem;
    right: -6px;
    bottom: -8px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .spi-carta,
  .spi-carta.is-hint,
  .spi-mazo.is-hint,
  .spi-col.is-hint::before,
  .is-shake,
  .spi-victoria .card {
    animation: none !important;
    transition: none !important;
  }

  .spi-carta.is-hint,
  .spi-mazo.is-hint,
  .spi-col.is-hint::before {
    box-shadow: 0 0 0 6px var(--spi-oro);
  }
}