/* 数字配对 专属样式 */

#app {
  display: grid;
  grid-template-columns: 240px auto;
  grid-template-rows: auto;
  grid-template-areas:
    "sidebar board";
  gap: 20px;
  align-items: start;
}
#sidebar { grid-area: sidebar; }
#board-wrap { grid-area: board; }

#sidebar {
  background: var(--panel);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.actions { display: flex; flex-direction: column; gap: 8px; }

/* 2×2 按钮网格：提示/洗牌/撤销/重置 */
.nm-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.nm-btn-grid .btn {
  padding: 10px 6px;
  font-size: 14px;
}
.nm-btn-grid .btn .badge {
  display: inline-block;
  margin-left: 4px;
}

.btn:active:not(:disabled) { transform: translateY(1px); }

/* 规则提示 */
.hints-tip {
  line-height: 1.6;
  word-break: keep-all;
}

/* 棋盘容器 */
#board-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 300px;
}
#board {
  width: min(90vw, 540px);
  display: flex;
  justify-content: center;
}

/* SVG 棋盘 */
.nm-board {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: block;
  width: 100%;
  height: auto;
  max-height: 75vh;
}

.nm-cell {
  cursor: pointer;
}
.nm-cell:hover .nm-cell-bg {
  filter: brightness(0.95);
}

/* 选中状态 */
.nm-cell.selected .nm-cell-bg {
  stroke: var(--primary, #3d6594);
  stroke-width: 3;
  filter: brightness(1.05);
}

/* 提示高亮 */
.nm-cell.hint .nm-cell-bg {
  stroke: #ff9800;
  stroke-width: 3;
  animation: nm-hint-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes nm-hint-pulse {
  from { filter: brightness(1); }
  to   { filter: brightness(1.15); }
}

/* 消除连线 */
.nm-match-line {
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 107, 107, 0.5));
}

@keyframes nm-draw-line {
  to { stroke-dashoffset: 0; }
}

/* 格子默认描边（细浅边） */
.nm-cell-bg {
  stroke: rgba(140, 110, 70, 0.15);
  stroke-width: 1;
  transition: filter 0.15s, stroke 0.15s, stroke-width 0.15s;
}

/* 单色模式变量 */
:root {
  --nm-cell-bg: #f5f0e6;
  --nm-text: #4a3f35;
  --nm-line-color: #ff6b6b;
}

/* 响应式：小屏改上下布局 */
@media (max-width: 720px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sidebar"
      "board";
  }
  #sidebar {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  #board {
    width: 100%;
    max-width: 500px;
  }
}

/* 胜利弹窗 */
.modal-content .win-record {
  color: var(--primary);
  font-size: 15px;
  min-height: 1.2em;
}