/* ============================================================
   連連看模組 — 互動 + 列印樣式
   ============================================================ */

/* ----------------------------------------------------------
   互動版：SVG 連連看
   ---------------------------------------------------------- */

.dc-svg {
  width: 100%;
  height: 100%;
}

/* 圓點狀態 */
.dc-dot-done {
  fill: #F97316;
  transition: fill 200ms ease;
}

.dc-dot-current {
  fill: white;
  stroke: #EC4899;
  stroke-width: 4;
  animation: dcPulse 1.5s ease-in-out infinite;
}

.dc-dot-waiting {
  fill: white;
  stroke: #E5E7EB;
  stroke-width: 3;
  transition: fill 200ms ease;
}

/* 標籤文字 */
.dc-label {
  font-size: 28px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #374151;
  user-select: none;
  pointer-events: none;
}

.dc-label-done {
  fill: white;
}

.dc-label-current {
  fill: #EC4899;
}

/* 連線 */
.dc-line {
  stroke: #F97316;
  stroke-width: 4;
  stroke-linecap: round;
  animation: dcDrawLine 300ms ease-out;
}

/* 觸控熱區 */
.dc-hit-area {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 提示文字 */
.dc-hint {
  text-align: center;
  font-size: 14px;
  color: var(--color-primary);
  font-weight: 600;
  padding: 8px;
  flex-shrink: 0;
}

/* 搖動效果 */
.dc-shake {
  animation: dcShake 300ms ease-out;
  transform-origin: center;
}

/* === 動畫 === */

@keyframes dcPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes dcDrawLine {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dcShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .dc-dot-current,
  .dc-line,
  .dc-shake {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ----------------------------------------------------------
   列印版（保留原有樣式）
   ---------------------------------------------------------- */

/* 連連看主區域 */
.dot-connect-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* SVG 畫布 */
.dot-connect-svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  flex: 1 1 auto;
}

/* 圓點 */
.dot-connect-dot {
  transition: fill 200ms ease;
}

/* 數字標籤 */
.dot-connect-label {
  user-select: none;
  pointer-events: none;
}

/* 引導虛線 */
.dot-connect-guide {
  pointer-events: none;
}

/* 完成輪廓暗示 */
.dot-connect-outline {
  pointer-events: none;
}

/* 形狀名稱提示 */
.dot-connect-shape-hint {
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--color-gray-300);
  text-align: center;
  margin: 12px 0 0;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   列印模式
   ---------------------------------------------------------- */
@media print {
  .dot-connect-area {
    height: 100%;
  }

  .dot-connect-svg {
    max-width: none;
    width: 140mm;
    height: auto;
  }

  .dot-connect-dot {
    r: 14;
  }

  .dot-connect-label {
    font-size: 22px;
  }

  .dot-connect-guide {
    opacity: 0.25;
  }

  .dot-connect-outline {
    opacity: 0.08;
  }

  .dot-connect-shape-hint {
    font-size: 10pt;
    margin: 3mm 0 0;
    color: #9CA3AF;
  }
}