/* ==========================================================================
   zip.css — Puzzle "Zip" que sustituye al sobre como candado de entrada.
   Reglas: desliza el dedo por casillas adyacentes, pasando por los números
   en orden (1, 2, 3…), hasta rellenar el tablero entero para abrir la carta.
   Deslizar hacia atrás sobre el propio camino lo borra desde ese punto.
   La lógica vive en js/zip.js; aquí solo el aspecto visual del tablero.
   ========================================================================== */

.zip-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  padding: 4vh 5vw;
  max-width: 480px;
  width: 100%;
}

.zip-title {
  font-family: var(--font-titulo);
  font-weight: 400;
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  color: var(--color-lacre);
  margin: 0;
  text-align: center;
}

.zip-hint {
  font-family: var(--font-cuerpo);
  font-style: italic;
  color: var(--color-texto);
  font-size: 0.92rem;
  text-align: center;
  margin: 0;
  max-width: 34em;
}

.zip-board-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.zip-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  width: min(94vw, 440px);
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(90, 40, 40, 0.22);
  touch-action: none; /* el gesto lo interpreta el juego, no el scroll del navegador */
  user-select: none;
  -webkit-user-select: none;
}

.zip-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-crema);
  transition: background-color 200ms ease;
}

.zip-cell--alt {
  background: var(--color-lavanda);
}

.zip-cell--visited {
  background: var(--color-rosa-suave);
}

.zip-cell--current {
  background: var(--color-rosa);
}

/* Halo suave que "respira" en la casilla donde está el dedo ahora mismo */
.zip-cell--current::after {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  animation: zipRespirar 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes zipRespirar {
  0%, 100% { transform: scale(0.82); opacity: 0.45; }
  50%      { transform: scale(1.05); opacity: 0.85; }
}

/* Insignia numerada, con el mismo aire de sello de lacre que tenía el sobre */
.zip-badge {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66%;
  height: 66%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--color-lacre-claro) 0%, var(--color-lacre) 45%, var(--color-lacre-oscuro) 100%);
  color: #fff8f2;
  font-family: var(--font-cuerpo);
  font-weight: 700;
  font-size: clamp(0.68rem, 3vw, 0.95rem);
  box-shadow: 0 3px 6px rgba(60, 5, 10, 0.35), inset 0 1px 3px rgba(255, 255, 255, 0.35);
}

.zip-cell--shake {
  animation: zipSacudir 300ms ease;
}
@keyframes zipSacudir {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(4px); }
  75%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

/* ---------- Trazado del camino (SVG, escala con el tablero) ---------- */
.zip-path-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  overflow: visible;
}

.zip-line-seg {
  stroke: var(--color-rosa);
  stroke-width: 0.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
  stroke-dasharray: 1.6;
  stroke-dashoffset: 1.6;
  animation: zipDibujarLinea 220ms ease forwards;
  transition: stroke 200ms ease;
}

.zip-line-dot {
  fill: var(--color-rosa);
  opacity: 0.92;
  transform-box: fill-box;
  transform-origin: center;
  animation: zipAparecerPunto 180ms ease;
  transition: fill 200ms ease;
}

@keyframes zipDibujarLinea {
  to { stroke-dashoffset: 0; }
}

@keyframes zipAparecerPunto {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

.zip-board--solved .zip-line-seg,
.zip-board--solved .zip-line-dot {
  stroke: var(--color-lacre-claro);
  fill: var(--color-lacre-claro);
}

.zip-board--solved .zip-cell--visited {
  background: var(--color-rosa);
}

.zip-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
  flex-wrap: wrap;
}

.zip-progress {
  font-family: var(--font-cuerpo);
  font-style: italic;
  color: var(--color-texto);
  font-size: 0.9rem;
  opacity: 0.85;
}

.zip-reset {
  font-family: var(--font-cuerpo);
  font-size: 0.9rem;
  color: var(--color-lacre);
  background: transparent;
  border: 1.5px solid var(--color-lacre);
  border-radius: 999px;
  padding: 0.5em 1.2em;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.zip-reset:hover:not(:disabled) {
  background: var(--color-lacre);
  color: #fff8f2;
}

.zip-reset:disabled {
  opacity: 0.4;
  cursor: default;
}

.zip-reset:focus-visible {
  outline: 3px solid var(--color-lavanda);
  outline-offset: 3px;
}

@media (max-width: 380px) {
  .zip-hint { font-size: 0.82rem; }
  .zip-progress, .zip-reset { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .zip-cell--shake,
  .zip-cell--current::after,
  .zip-line-seg,
  .zip-line-dot {
    animation: none;
  }
  .zip-line-seg {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}