/* Puzzle Game CSS (4x4 Grid - 16 Pieces) */

.puzzle-game-wrapper {
  position: relative;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
}

/* Header bar for game: Timer and Reset */
.puzzle-status-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(18, 40, 22, 0.85);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 14px;
  padding: 8px 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.puzzle-timer-display {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: #ffffff;
}

.puzzle-timer-display .timer-highlight {
  color: var(--gold-primary);
  font-size: 1.3rem;
  min-width: 35px;
}

.puzzle-timer-display.timer-warning .timer-highlight {
  color: #ff4d4d;
  animation: pulseTimer 0.6s infinite alternate;
}

@keyframes pulseTimer {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); }
}

.btn-puzzle-reset {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 8px;
  color: #ffd700;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-puzzle-reset:active {
  transform: scale(0.95);
  background: rgba(255, 215, 0, 0.25);
}

/* 4x4 Puzzle Board Container (16 Slots) */
.puzzle-board-container {
  position: relative;
  width: 320px;
  height: 320px;
  background: rgba(0, 0, 0, 0.55);
  border: 4px solid var(--gold-primary);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.3);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3px;
  padding: 3px;
  overflow: hidden;
}

/* Faint Watermark Guide on Board */
.puzzle-board-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../puzzle.png');
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
  border-radius: 12px;
}

/* Individual Board Slot */
.puzzle-slot {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 215, 0, 0.3);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  overflow: hidden;
}

.puzzle-slot.hovered-slot {
  background: rgba(255, 215, 0, 0.25);
  border: 2px solid #ffd700;
  box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.5);
}

.puzzle-slot.slot-occupied {
  border: 1px solid rgba(255, 215, 0, 0.6);
  background: transparent;
}

/* Puzzle Piece Styling (4x4 Grid -> 400% 400%) */
.puzzle-piece {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('../puzzle.png');
  background-size: 400% 400%;
  border-radius: 5px;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.puzzle-piece:active {
  cursor: grabbing;
}

.puzzle-piece.selected-piece {
  box-shadow: 0 0 0 3px #ffd700, 0 0 15px rgba(255, 215, 0, 0.8);
  transform: scale(1.08);
  z-index: 20;
}

/* CSS Positioning Slices for 4x4 Grid (16 Pieces) */
/* Row 0 */
.piece-0 { background-position: 0% 0%; }
.piece-1 { background-position: 33.333% 0%; }
.piece-2 { background-position: 66.667% 0%; }
.piece-3 { background-position: 100% 0%; }

/* Row 1 */
.piece-4 { background-position: 0% 33.333%; }
.piece-5 { background-position: 33.333% 33.333%; }
.piece-6 { background-position: 66.667% 33.333%; }
.piece-7 { background-position: 100% 33.333%; }

/* Row 2 */
.piece-8 { background-position: 0% 66.667%; }
.piece-9 { background-position: 33.333% 66.667%; }
.piece-10 { background-position: 66.667% 66.667%; }
.piece-11 { background-position: 100% 66.667%; }

/* Row 3 */
.piece-12 { background-position: 0% 100%; }
.piece-13 { background-position: 33.333% 100%; }
.piece-14 { background-position: 66.667% 100%; }
.piece-15 { background-position: 100% 100%; }

/* Piece Tray Container (Holding area for unplaced pieces) */
.puzzle-tray-container {
  width: 100%;
  background: rgba(18, 40, 22, 0.8);
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 16px;
  padding: 8px 10px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.puzzle-tray-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #a3d9ad;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.puzzle-tray-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  width: 100%;
  min-height: 90px;
  justify-items: center;
  align-items: center;
}

.tray-piece-wrapper {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 215, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  transition: transform 0.2s ease;
}

.tray-piece-wrapper:active {
  transform: scale(1.1);
  cursor: grabbing;
}

.tray-piece-wrapper .puzzle-piece {
  width: 36px;
  height: 36px;
}

/* Floating Drag Ghost for Touch/Mouse Dragging */
.drag-ghost {
  position: fixed;
  width: 76px;
  height: 76px;
  pointer-events: none;
  z-index: 9999;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.8);
  transform: translate(-50%, -50%);
  opacity: 0.92;
}

/* Hint / Preview thumbnail modal */
.puzzle-preview-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #d1e7d5;
}

.puzzle-preview-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--gold-primary);
  object-fit: cover;
}

/* Board Solved Victory Flash */
.puzzle-board-container.board-solved {
  border-color: #52b363;
  box-shadow: 0 0 40px rgba(82, 179, 99, 0.8);
  animation: winGlowPulse 1s infinite alternate;
}

@keyframes winGlowPulse {
  0% { transform: scale(1); box-shadow: 0 0 25px rgba(82, 179, 99, 0.6); }
  100% { transform: scale(1.02); box-shadow: 0 0 45px rgba(82, 179, 99, 1); }
}