/* 样式只求能玩、分得清、手机上不误触；好看留到美术阶段 */

:root {
  --gap: 4px;
  --accent: #52607a; /* 低饱和的石板蓝，配奶油底色和粉彩色块 */
  --accent-soft: #e9ecf3;
  /* 色块配色：先要"一眼分得开" */
  --region-0: #f7d85c;
  --region-1: #7cc4f5;
  --region-2: #5fc9a7;
  --region-3: #b6e07a;
  --region-4: #c8a6ef;
  --region-5: #f29bb8;
  --region-6: #f5a66b;
  --region-7: #d2b48c;
  --region-8: #9ad8d8;
  --region-9: #c9ced6;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", sans-serif;
  background: #faf7f2;
  color: #333;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  text-align: center;
}

h1 { margin: 8px 0; }

.rules {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
  margin: 0 0 12px;
}

/* 题号栏：身份信息，放在棋盘上方 */
.puzzle-bar {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.puzzle-id { font-size: 1.05rem; font-weight: 600; }

button.link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
}

/* 尺寸选择器：居中一排，位置固定，放在规则下面、题号上面 */
.size-picker {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 12px;
}

.size-picker button {
  min-width: 72px;
  padding: 10px 0;
  font-size: 1rem;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}

.size-picker button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}

/* 棋盘和盖在它上面的庆祝层共用一个定位容器 */
.board-wrap {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.board {
  /* 格子大小按可用宽度自适应：页面最宽 480，减去内边距，再减去格间距，除以列数，最大 64 */
  --space: calc(min(100vw, 480px) - 32px);
  --cell: min(64px, calc((var(--space) - (var(--size) - 1) * var(--gap)) / var(--size)));
  display: grid;
  grid-template-columns: repeat(var(--size), var(--cell));
  gap: var(--gap);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; /* 连点不会触发手机的双击缩放 */
}

.cell {
  width: var(--cell);
  height: var(--cell);
  padding: 0;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  font-size: calc(var(--cell) * 0.5);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cell:active { transform: scale(0.94); }
.mark-x { color: rgba(0, 0, 0, 0.45); }
.board.won .cell { cursor: default; }

.region-0 { background: var(--region-0); }
.region-1 { background: var(--region-1); }
.region-2 { background: var(--region-2); }
.region-3 { background: var(--region-3); }
.region-4 { background: var(--region-4); }
.region-5 { background: var(--region-5); }
.region-6 { background: var(--region-6); }
.region-7 { background: var(--region-7); }
.region-8 { background: var(--region-8); }
.region-9 { background: var(--region-9); }

/* 状态栏里的小按钮，比如"我自己标" */
.status button.link { margin-left: 8px; font-size: 0.9rem; }

/* 冲突高亮：红色描边 + 轻微抖动，让"放错了"在放下的瞬间就被看见 */
.cell.conflict {
  outline: 3px solid #e0393e;
  outline-offset: -3px;
  animation: shake 0.25s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* 状态栏：只放即时反馈，留在棋盘下方 */
.status {
  min-height: 1.5em;
  font-size: 1.05rem;
  margin: 10px 0 12px;
}

.status.warn { color: #c0392b; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.toolbar button,
.open-form button,
.celebration button {
  font-size: 1rem;
  padding: 10px 28px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

button.secondary {
  background: #fff;
  color: var(--accent);
  border: 2px solid var(--accent);
}

button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* 按题号打开 */
.open-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.95rem;
  color: #666;
}

.open-form input {
  width: 150px;
  font-size: 1rem;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.open-form button { padding: 8px 18px; }

/* 通关庆祝：盖在棋盘中央 */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 12px;
  overflow: hidden;
}

.overlay[hidden] { display: none; }

.celebration {
  position: relative;
  z-index: 1;
  text-align: center;
}

.celebration .emoji {
  font-size: 64px;
  line-height: 1;
  animation: pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both, bounce 1.2s ease-in-out 0.6s infinite;
}

.celebration p {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 8px 0 14px;
}

@keyframes pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* 彩带：40 个小方块从顶部落下并旋转 */
.confetti i {
  position: absolute;
  top: -8%;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.9;
  animation: fall linear forwards;
}

@keyframes fall {
  from { top: -8%; transform: rotate(0deg); }
  to { top: 108%; transform: rotate(720deg); }
}

/* 提示高亮：前提用橙色呼吸框，结论用绿色虚线框，放错的标记用红框 */
.cell.hint-premise {
  box-shadow: inset 0 0 0 4px #f5a623;
  animation: breathe 1.2s ease-in-out infinite;
}

.cell.hint-conclusion {
  outline: 3px dashed #2e7d32;
  outline-offset: -3px;
}

.cell.hint-wrong {
  outline: 3px solid #e0393e;
  outline-offset: -3px;
}

@keyframes breathe {
  50% { box-shadow: inset 0 0 0 2px #f5a623; }
}

.status.hint {
  color: #7a5200;
  font-size: 0.95rem;
  line-height: 1.5;
}

.toolbar button { padding: 10px 18px; }