/* Akari 的盘面。 */

.akari {
  --cell: 34px;
  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;
}

.akari .cell {
  width: var(--cell); height: var(--cell);
  display: grid; place-items: center;
  background: var(--play);
  position: relative;
  cursor: pointer;
  font-size: calc(var(--cell) * .5);
  font-weight: 700;
}

/* ---- 黑格（墙）----
   不能直接用 var(--text) 当底色：深色主题下 --text 接近白色，
   墙会渲染成白底深字，和可走的白格视觉上正好颠倒。
   专门给一组墙体色，保证两种主题下墙都比可走格更暗。 */
.akari { --wall: #2c3344; --wall-ink: #f2f5fb; --play: #ffffff; }
@media (prefers-color-scheme: dark) {
  /* --play 要明显亮于 --wall，否则暗色主题下墙和未点亮的格子糊在一起 */
  .akari { --wall: #05070c; --wall-ink: #c6cfe0; --play: #222a3a; }
}

.akari .cell.black {
  background: var(--wall);
  color: var(--wall-ink);
  cursor: default;
}
/* 相邻灯数已达标 → 数字变淡，扫读时可以跳过 */
.akari .cell.black.satisfied { opacity: .42; }
/* 灯插多了 → 标红。规则反馈，不泄露答案 */
.akari .cell.black.over { background: var(--accent); color: #fff; opacity: 1; }

/* ---- 白格 ---- */
.akari .cell.lit { background: color-mix(in srgb, #ffd23f 30%, var(--play)); }

.akari .cell.lamp::before {
  content: '';
  width: 56%; height: 56%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff3c4 0%, #ffc53d 55%, #f59f00 100%);
  box-shadow: 0 0 0 2px color-mix(in srgb, #f59f00 45%, transparent);
}
/* 两盏灯互相照到 → 两盏都标红 */
.akari .cell.lamp.clash::before {
  background: radial-gradient(circle at 35% 32%, #ffd7d7 0%, var(--accent) 60%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* 玩家的「此处无灯」标记，纯辅助，不参与判定 */
.akari .cell.mark::before {
  content: '';
  width: 20%; height: 20%;
  border-radius: 50%;
  background: var(--muted);
  opacity: .55;
}

.akari.won .cell.lamp::before {
  animation: ak-glow .4s ease-out both;
  animation-delay: var(--d, 0ms);
}
@keyframes ak-glow {
  from { transform: scale(.4); opacity: .2; }
  60%  { transform: scale(1.22); }
  to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .akari.won .cell.lamp::before { animation: none; }
}

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

@media (max-width: 560px) {
  .akari { --cell: 30px; }
  .akari[data-n="10"] { --cell: 28px; }
  .akari[data-n="14"] { --cell: 21px; }
}