/* Shikaku 的盘面：格子是 CSS grid，玩家画的矩形是绝对定位的覆盖层。 */

.shikaku {
  --cell: 34px;
  position: relative;
  flex: none;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  font-variant-numeric: tabular-nums;
}

.shikaku .cells {
  display: grid;
  grid-template-columns: repeat(var(--n), var(--cell));
  gap: 0;
}

.shikaku .cell {
  width: var(--cell); height: var(--cell);
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: calc(var(--cell) * .44);
  font-weight: 700;
  color: var(--text);
}
.shikaku .cell.clue { cursor: pointer; }

/* 覆盖层不吃指针事件，拖拽照样落到下面的格子上 */
.shikaku .rects {
  position: absolute; inset: 0;
  pointer-events: none;
}

.shikaku .rect {
  position: absolute;
  border: 2px solid var(--primary);
  border-radius: 5px;
  background: color-mix(in srgb, var(--primary) 13%, transparent);
  box-sizing: border-box;
}
/* 规则违例即时标红：矩形里数字不是恰好一个，或面积与数字对不上。
   这是规则反馈不是答案反馈 —— 不泄露解法。 */
.shikaku .rect.bad {
  border-color: var(--accent);
  border-style: dashed;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.shikaku .rect.preview {
  border-style: dashed;
  background: color-mix(in srgb, var(--violet) 15%, transparent);
  border-color: var(--violet);
}

/* 解开后保留边框：这时候最该看清的就是自己拼出来的那套分割，
   把边框抹掉会让整片糊成一块，等于把成果盖住。 */
.shikaku.won .rect {
  border-color: var(--violet);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 30%, transparent),
    color-mix(in srgb, var(--violet) 30%, transparent));
  animation: sk-pop .3s ease-out both;
  animation-delay: var(--d, 0ms);
}
/* 解开后格线退到背景里，突出矩形轮廓 */
.shikaku.won .cell { border-color: color-mix(in srgb, var(--line) 40%, transparent); }
@keyframes sk-pop {
  from { transform: scale(.88); opacity: .3; }
  to   { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .shikaku.won .rect { animation: none; }
}

.board-actions {
  display: flex; gap: 8px; align-items: center;
  margin-top: 12px; flex-wrap: wrap;
}

@media (max-width: 560px) {
  .shikaku { --cell: 28px; }
  .shikaku[data-n="14"] { --cell: 24px; }
  .shikaku[data-n="18"] { --cell: 19px; }
}