/* puzzle.css — Rompecabezas */

/* Layout del área de juego */
#game-area {
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.5rem;
  overflow: hidden;
}

/* Loader */
.pz-loading {
  font-size: 1.4rem;
  font-weight: 700;
  opacity: 0.75;
  animation: bounce-in 0.5s ease both;
}

/* Miniatura de referencia */
.pz-thumb {
  height: 72px;
  width: auto;
  max-width: 108px;
  border-radius: 8px;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

/* Tablero: grid sin gap (gaps se simulan con los outlines de cada slot) */
.pz-board {
  display: grid;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

/* Slot (celda) */
.pz-slot {
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s;
}

.pz-slot:active:not(.fixed) {
  transform: scale(0.96);
}

/* Borde interior usando ::after para no afectar el layout */
.pz-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: -1px;
  pointer-events: none;
  z-index: 2;
  transition: outline-color 0.2s, outline-width 0.15s, outline-offset 0.15s;
}

/* Seleccionada */
.pz-slot.sel::after {
  outline-color: #FFD93D;
  outline-width: 4px;
  outline-offset: -2px;
}

/* Pieza en su lugar → sin borde visible (efecto soldadura automático) */
.pz-slot.fixed {
  cursor: default;
}
.pz-slot.fixed::after {
  outline-color: transparent;
}

/* Flash de snap al fijarse */
.pz-slot.fixed .pz-piece {
  animation: pz-snap 0.4s ease both;
}

@keyframes pz-snap {
  0%   { filter: brightness(1.6) saturate(1.5); }
  100% { filter: brightness(1)   saturate(1);   }
}

/* Pieza de imagen */
.pz-piece {
  width:  100%;
  height: 100%;
  background-repeat: no-repeat;
}