/* ماژول پازل امنیتی — اسلایدر + چند جای خالی */
.puzzle-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  padding: 12px;
}
.puzzle-modal.open { opacity: 1; visibility: visible; }
.puzzle-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 6, 10, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.puzzle-modal-box {
  position: relative; z-index: 1;
  width: min(400px, 94vw);
  background: var(--bg-card, #12141d);
  border: 1px solid var(--border-color, #1f2330);
  border-radius: 14px;
  padding: 1.25rem 1.2rem 1.15rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.03);
  transform: translateY(12px) scale(0.97);
  transition: transform 0.28s ease;
  font-family: var(--font-family, system-ui, sans-serif);
  color: var(--text-white, #fff);
}
.puzzle-modal.open .puzzle-modal-box { transform: translateY(0) scale(1); }
.puzzle-modal-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem;
}
.puzzle-modal-header h3 {
  font-size: 1.05rem; font-weight: 700; color: var(--text-white, #fff);
  display: flex; align-items: center; gap: 0.45rem; margin: 0;
}
.puzzle-modal-header h3 svg { color: var(--color-blue, #0070f3); flex-shrink: 0; }
.puzzle-modal-close {
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-color, #1f2330);
  color: var(--text-muted, #888e9e); width: 32px; height: 32px; border-radius: 8px;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.puzzle-modal-close:hover { color: var(--text-white, #fff); background: rgba(255,255,255,0.1); }
.puzzle-modal-desc { font-size: 0.85rem; color: var(--text-muted, #888e9e); margin: 0 0 0.85rem; }
.puzzle-captcha { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; }
.puzzle-header { display: flex; justify-content: space-between; align-items: center; }
.puzzle-title { font-size: 0.8rem; color: var(--text-muted, #888e9e); }
.puzzle-refresh {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-color, #1f2330);
  color: var(--text-muted, #888e9e); cursor: pointer; padding: 0.3rem;
  display: flex; align-items: center; border-radius: 6px;
}
.puzzle-refresh:hover {
  color: var(--color-blue, #0070f3); background: rgba(0, 112, 243, 0.12);
  border-color: rgba(0, 112, 243, 0.35);
}
.puzzle-track {
  position: relative; height: 170px; background: #0a0c12;
  border: 1px solid var(--border-color, #1f2330); border-radius: 12px;
  overflow: hidden; user-select: none; touch-action: none;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.4);
}
.puzzle-track > .puzzle-canvas-main {
  display: block; width: 100%; height: 100%; border-radius: 12px;
}
.puzzle-piece {
  position: absolute; top: 50px; left: 14px; width: 68px; height: 68px;
  cursor: default; z-index: 3; touch-action: none; pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
}
.puzzle-piece.solved {
  cursor: default; pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(34, 197, 94, 0.55));
}
.puzzle-slider { position: relative; margin-top: 0.15rem; }
.puzzle-slider-track {
  position: relative; height: 46px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-color, #1f2330);
  overflow: hidden; touch-action: none; cursor: pointer;
}
.puzzle-slider-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: linear-gradient(90deg, rgba(0,112,243,0.25), rgba(0,112,243,0.45));
  border-radius: 999px; pointer-events: none;
}
.puzzle-slider-handle {
  position: absolute; top: 3px; left: 0; width: 40px; height: 40px;
  border-radius: 50%; border: none;
  background: linear-gradient(145deg, #5b9cff, #0070f3); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; box-shadow: 0 4px 14px rgba(0, 112, 243, 0.45);
  z-index: 2; touch-action: none; padding: 0;
}
.puzzle-slider-handle:active, .puzzle-slider-handle.dragging {
  cursor: grabbing; box-shadow: 0 6px 18px rgba(0, 112, 243, 0.55);
}
.puzzle-slider-handle.solved {
  background: linear-gradient(145deg, #4ade80, #22c55e);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.45);
  pointer-events: none; cursor: default;
}
.puzzle-slider-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; color: var(--text-muted, #888e9e); pointer-events: none; z-index: 1;
}
.puzzle-status {
  font-size: 0.8rem; color: var(--text-muted, #888e9e); text-align: center;
  min-height: 1.2em; transition: color 0.2s;
}
.puzzle-status.ok { color: #22c55e; }
.puzzle-status.err { color: var(--color-red, #ff3b30); }
@media (max-width: 420px) {
  .puzzle-track { height: 150px; }
  .puzzle-modal-box { padding: 1rem 0.9rem 1rem; }
}