/* ═══════════════════════════════════════════════════
   對稱棋 · 孔明棋消除 — 專屬樣式（搭配系列 ../style.css）
   ═══════════════════════════════════════════════════ */

#board { background: #fbfcfe; }

/* 棋盤格線與底板 */
.sp-board-bg { fill: #f3f7fd; stroke: #d6deea; stroke-width: 0.03; }
.sp-grid-line { stroke: #d2dcea; stroke-width: 0.025; }

/* 棋子（寶石/花磚風，全部同款黑曜石色） */
.sp-peg-body { stroke: #1b2740; stroke-width: 0.03; cursor: default; }
.sp-peg-removable .sp-peg-body { cursor: pointer; }

/* 可消去的棋子：發光環 */
.sp-peg-ring {
  fill: none;
  stroke: var(--warning);
  stroke-width: 0.08;
  opacity: 0;
  transition: opacity .15s;
}
.sp-peg-removable .sp-peg-ring { opacity: 1; animation: spPulse 1.1s ease-in-out infinite; }
@keyframes spPulse {
  0%,100% { stroke-opacity: .55; }
  50%     { stroke-opacity: 1; }
}

/* 對稱點之間的摺痕連線 */
.sp-pair-link {
  stroke: var(--warning);
  stroke-width: 0.05;
  stroke-dasharray: 0.16 0.12;
  stroke-linecap: round;
  opacity: .8;
}

/* 對稱軸（橘色木桿） */
.sp-axis {
  stroke: #e08a2c;
  stroke-width: 0.22;
  stroke-linecap: round;
  filter: drop-shadow(0 0.04px 0.08px rgba(120,60,0,.35));
}
.sp-axis-core {
  stroke: #ffd9a0;
  stroke-width: 0.07;
  stroke-linecap: round;
}

/* 消去動畫 */
.sp-vanish { transition: transform .35s ease, opacity .35s ease; transform-box: fill-box; transform-origin: center; }
.sp-vanish.go { opacity: 0; }

/* 拖曳提示熱區（整塊畫布抓軸） */
#board { touch-action: none; cursor: grab; }
#board.dragging { cursor: grabbing; }

/* 過關 / 死局 覆蓋層 */
.sp-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  background: rgba(245,249,255,.92);
  border-radius: var(--radius);
  padding: 24px;
  animation: fadeIn .3s ease;
}
.sp-overlay h2 { color: var(--primary); font-size: 1.6em; }
.sp-overlay.win h2 { color: var(--success); }
.sp-overlay.dead h2 { color: var(--danger); }
.sp-overlay p { color: var(--text-muted); font-size: .95em; max-width: 360px; }
.sp-overlay .sp-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sp-emoji { font-size: 3em; line-height: 1; }