/* Minesucher 的盘面。 */

.mine {
  --cell: 28px;
  display: grid;
  grid-template-columns: repeat(var(--n), var(--cell));
  gap: 1px;
  background: var(--line);
  padding: 1px;
  border-radius: 6px;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.mine .cell {
  width: var(--cell); height: var(--cell);
  display: grid; place-items: center;
  font-size: calc(var(--cell) * .55);
  font-weight: 700;
  background: var(--surface);
  cursor: pointer;
  position: relative;
}
.mine .cell:active { filter: brightness(.92); }

.mine .cell.open {
  background: var(--bg);
  cursor: default;
}

/* 数字配色沿用扫雷的老习惯，1 蓝 2 绿 3 红 …… */
.mine .cell.n1 { color: #2f6fff; }
.mine .cell.n2 { color: #17935a; }
.mine .cell.n3 { color: var(--accent); }
.mine .cell.n4 { color: var(--violet); }
.mine .cell.n5 { color: #a8552a; }
.mine .cell.n6 { color: #1a9aa8; }
.mine .cell.n7 { color: var(--text); }
.mine .cell.n8 { color: var(--muted); }

.mine .cell.flag::before {
  content: '';
  width: 60%; height: 60%;
  background: var(--accent);
  clip-path: polygon(15% 0, 15% 100%, 28% 100%, 28% 55%, 100% 28%, 28% 0);
}

/* 输掉时揭晓 */
.mine .cell.mine-shown {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
}
.mine .cell.mine-shown::before {
  content: '';
  width: 52%; height: 52%;
  border-radius: 50%;
  background: var(--text);
  clip-path: none;
}
.mine .cell.boom { background: var(--accent); }
.mine .cell.boom::before { background: #fff; }
/* 插错的旗：留着旗形，加一道划掉的斜线 */
.mine .cell.wrong-flag::after {
  content: '';
  position: absolute; left: 12%; right: 12%; top: 48%;
  height: 2px; background: var(--text); transform: rotate(-32deg);
}

.mine.over .cell { cursor: default; }

.board-actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 12px; flex-wrap: wrap;
}
#flag-mode[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

/* 窄屏：Profi 是 30 列，必须缩到 12px 才勉强放得下，再靠横向滚动兜底 */
@media (max-width: 560px) {
  .mine { --cell: 24px; }
  .mine[data-n="16"] { --cell: 20px; }
  .mine[data-n="30"] { --cell: 13px; }
}