/* ── 拼圖遊戲專用樣式 ── */

/* 圖案選擇列 */
.scene-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.scene-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text);
  font-size: 16px;
  font-family: var(--font-family);
  cursor: pointer;
  min-height: 40px;
  transition: all 0.2s;
  font-weight: 500;
}

.scene-btn:hover {
  border-color: var(--color-primary);
  background: rgba(212, 56, 13, 0.08);
}

.scene-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* 上傳按鈕 */
.upload-btn {
  border-style: dashed !important;
  border-color: var(--color-text-muted) !important;
  color: var(--color-text-muted) !important;
}

.upload-btn:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* 自訂圖片按鈕 */
.custom-scene-btn.active {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: #fff !important;
}

/* 拼圖容器 */
.jigsaw-wrap {
  padding: 8px !important;
  background: #444 !important;
}

[data-theme="dark"] .jigsaw-wrap {
  background: #222 !important;
}

/* 拼圖網格 */
.puzzle-grid {
  display: grid;
  gap: 3px;
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* 拼圖碎片 */
.puzzle-piece {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, outline 0.2s;
  position: relative;
  outline: 3px solid transparent;
  outline-offset: -3px;
}

.puzzle-piece:hover {
  transform: scale(1.03);
  z-index: 2;
}

.puzzle-piece:active {
  transform: scale(0.97);
}

/* 選取狀態 */
.puzzle-piece.selected {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
  transform: scale(1.06);
  z-index: 3;
  box-shadow: 0 4px 16px rgba(212, 56, 13, 0.3);
}

/* 正確放置 */
.puzzle-piece.correct {
  outline: 3px solid var(--color-success);
  outline-offset: -3px;
}

.puzzle-piece.correct::after {
  content: '✓';
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* 全部完成時的閃光效果 */
.puzzle-grid.complete .puzzle-piece {
  animation: pieceGlow 0.6s ease-out;
}

@keyframes pieceGlow {
  0%   { box-shadow: 0 0 0 0 rgba(56, 158, 13, 0.5); }
  50%  { box-shadow: 0 0 20px 4px rgba(56, 158, 13, 0.3); }
  100% { box-shadow: none; }
}

/* 交換動畫 */
.puzzle-piece.swap-out {
  animation: swapPop 0.25s ease;
}

@keyframes swapPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}

/* 新紀錄文字 */
.new-record-text {
  color: var(--color-primary);
  font-size: var(--font-size-title);
  font-weight: 700;
  animation: recordPulse 0.8s ease-in-out infinite alternate;
}

@keyframes recordPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* 響應式 */
@media (max-width: 400px) {
  .jigsaw-wrap {
    padding: 4px !important;
  }
  .puzzle-grid {
    gap: 2px;
  }
  .puzzle-piece.correct::after {
    font-size: 11px;
  }
}