/* 找数字专属样式（公共组件、变量见 ../../style.css）
   复用护眼童趣主题：暖色底、降饱和柔和配色、大圆角 */

#app {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
  width: 100%;
  max-width: 760px;
}

#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 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-row .btn { padding: 10px 8px; }

/* 已辅助时最佳栏灰显 */
.stat-value.muted { color: var(--primary); opacity: 0.4; }

/* 主区 */
#play-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  min-height: 420px;
  background: var(--panel);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

/* 方格容器：正方形，居中 */
.grid {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
}

/* 格子：大圆角、大字号、居中 */
.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(20px, 6vw, 38px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  color: var(--primary);
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(140, 100, 40, 0.18);
  transition: transform .1s, background .12s, color .12s, opacity .12s;
  user-select: none;
}
@media (hover: hover) {
  .cell:hover:not(:disabled):not(.found) { transform: translateY(-2px); background: #efe6cf; }
}
.cell:active:not(:disabled) { transform: translateY(0); }

/* 已找到：变灰 + 划线 */
.cell.found {
  background: var(--border);
  color: var(--text);
  opacity: 0.45;
  text-decoration: line-through;
  cursor: default;
}
.cell.done { opacity: 0.35; }

/* 点错：红色闪烁 */
.cell.error {
  background: #e54848;
  color: #fff;
  border-color: #e54848;
  animation: shake .4s;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* 提示高亮：脉冲发光 */
.cell.hint {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  animation: pulse 0.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 101, 148, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(61, 101, 148, 0); }
}

.cell:disabled { cursor: default; }

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

/* 响应式 */
@media (max-width: 640px) {
  #app { grid-template-columns: 1fr; }
  #play-area { padding: 22px 16px; min-height: 320px; }
  .grid { gap: 6px; max-width: 360px; }
  .cell { border-radius: 10px; }
}