/* 数独专属样式（公共组件、变量见 ../../style.css）
   护眼童趣主题：暖色低亮度底、降饱和柔和配色、更大更圆的字体与控件
   棋盘配色全部暖化，避免高饱和冷蓝光，久看不易疲劳 */

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

#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; }
.btn-row { grid-template-columns: 1fr 1fr; }                 /* 4 个功能按钮 2×2，侧栏更紧凑 */
.btn-row .btn { padding: 10px 8px; }                         /* 横向内边距收窄，腾出文字空间 */
.btn:active:not(:disabled) { transform: translateY(1px); }   /* 按下回弹，触感更明确 */

/* 棋盘 */
#board-wrap { display: flex; justify-content: center; }
#board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  width: min(90vw, 540px);
  aspect-ratio: 1 / 1;
  background: var(--panel);
  border: 2px solid #6b5d4a;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.cell {
  position: relative;
  border-right: 1px solid #e0d5be;
  border-bottom: 1px solid #e0d5be;
  cursor: pointer;
  user-select: none;
  background: var(--panel);
  transition: background .1s;
}
.cell.border-right { border-right: 2px solid #6b5d4a; }
.cell.border-bottom { border-bottom: 2px solid #6b5d4a; }

.cell-value {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(20px, 4.2vw, 30px);
}
.cell-notes {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 2px;
  font-size: clamp(10px, 1.8vw, 12px);
  color: #8a7d66;
}
.note { display: flex; align-items: center; justify-content: center; }

.cell.given .cell-value { color: #3d342c; font-weight: 700; }
.cell:not(.given) .cell-value { color: #3d6594; font-weight: 700 }
@media (hover: hover) {
  .cell:hover:not(.given) { background: #f3ebd6; }
}
.cell.highlight { background: #ece1c5; }
.cell.same-number { background: #e2cf97; }
.cell.same-number .cell-value { color: #335780; font-weight: 700; }
.cell.selected { background: #f4cd80; }
.cell.selected .cell-value { color: #3d342c; font-weight: 700; }
.cell.error .cell-value { color: #c75b4a; font-weight: 700; }

/* 底部数字键盘 */
#numpad {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  width: min(90vw, 540px);
  justify-self: center;
}
.num-btn {
  padding: 14px 0; font-size: 22px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel); cursor: pointer;
  transition: background .15s, transform .08s;
}
@media (hover: hover) {
  .num-btn:hover { background: #efe6cf; }
}
.num-btn:active { transform: translateY(1px); }
.num-btn.erase { color: #c75b4a; }

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

/* 响应式 */
@media (max-width: 640px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sidebar"
      "board"
      "numpad";
  }
  #sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .title { flex: 1 100%; }
  .stats, .actions { flex: 1 100%; }
  #numpad { grid-template-columns: repeat(5, 1fr); }
  .num-btn { min-height: 44px; }   /* 触控目标 ≥44px，移动端不误触 */
}