/* Calcudoku 算独专属样式（对齐 sudoku 暖色调风格）
   棋盘用 cage 粗边框替代宫格线，左上角显示运算目标数 */

#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; }
.btn-row .btn { padding: 10px 8px; }
.btn:active:not(:disabled) { transform: translateY(1px); }

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

/* Cage 粗边框 */
.cell.cage-left   { border-left: 2.5px solid #5d4e3a; }
.cell.cage-right  { border-right: 2.5px solid #5d4e3a; }
.cell.cage-top    { border-top: 2.5px solid #5d4e3a; }
.cell.cage-bottom { border-bottom: 2.5px solid #5d4e3a; }

/* Cage 圆角（外边缘） */
.cell.cage-tl { border-top-left-radius: 6px; }
.cell.cage-tr { border-top-right-radius: 6px; }
.cell.cage-bl { border-bottom-left-radius: 6px; }
.cell.cage-br { border-bottom-right-radius: 6px; }

/* Cage 底色（6 色低饱和护眼色，色相均匀分布，相邻不同色）
   明度统一 92~94%，饱和度 20~28%，柔和不刺眼但可清晰区分 */
.cell.cage-color-0 { background: #faf0d9; } /* ① 淡米黄  HSL(45, 70%, 92%) 暖 */
.cell.cage-color-1 { background: #e3ecf7; } /* ② 淡蓝    HSL(212, 45%, 93%) 冷 */
.cell.cage-color-2 { background: #e6f0e1; } /* ③ 淡豆绿  HSL(105, 30%, 91%) 冷绿 */
.cell.cage-color-3 { background: #f9e7df; } /* ④ 淡橙粉  HSL(18, 55%, 93%) 暖橙 */
.cell.cage-color-4 { background: #e9e4f3; } /* ⑤ 淡紫    HSL(255, 30%, 92%) 冷紫 */
.cell.cage-color-5 { background: #e2eff0; } /* ⑥ 淡青    HSL(185, 25%, 91%) 冷青 */

/* Cage 目标数标签 */
.cage-label {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: clamp(10px, 1.6vw, 13px);
  font-weight: 600;
  color: #5a4d3d;
  z-index: 2;
  line-height: 1;
  pointer-events: none;
}

.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;
  padding: 4px 3px;
  gap: 0;
  font-size: clamp(9px, 1.6vw, 11px);
  color: #8a7d66;
  align-content: center;
  justify-items: center;
  align-items: center;
}
.note { display: flex; align-items: center; justify-content: center; width: 100%; }

.cell.given .cell-value { color: #3d342c; font-weight: 700; }
.cell:not(.given) .cell-value { color: #3d6594; font-weight: 700 }

.cell.highlight { background: #ece1c5; }
.cell.same-cage { background: #f0e6cd; }
.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; }

@media (hover: hover) {
  .cell:hover:not(.given) { background: #f3ebd6; }
}

/* 底部数字键盘 */
#numpad {
  display: grid;
  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) !important; }
  .num-btn { min-height: 44px; }
}