/* =============================================================
   GAME: Hitori
   ============================================================= */
.board-hitori {
  --n: 8;
  --ht-glow: #ff5c8a;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ht-grid {
  --cell: min(calc((100vw - 70px - var(--n) * 2px) / var(--n)), 54px);
  display: grid; grid-template-columns: repeat(var(--n), var(--cell)); grid-auto-rows: var(--cell); gap: 2px;
  padding: 4px; border-radius: 14px;
  background: linear-gradient(160deg, #5a1d3a, #2a0c22 60%, #4a1832);
  box-shadow: 0 0 0 2px var(--ht-glow), 0 0 28px rgba(255, 92, 138, .35), 0 12px 30px rgba(0, 0, 0, .35);
}
.ht-cell {
  position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 6px;
  background: linear-gradient(180deg, #3a1630, #26101f); color: #ffe3ec;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -2px 0 rgba(0, 0, 0, .25);
  font: 700 calc(var(--cell) * .46) / 1 var(--font-body); font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.ht-v { position: relative; z-index: 1; }
.ht-cell:hover { background: #4a1d3c; }
.ht-cell:focus { outline: none; }
.ht-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.ht-cell.ht-line { background: linear-gradient(180deg, #44193a, #301328); }
.ht-cell.ht-same { background: linear-gradient(180deg, #6a2148, #4e1736); color: #fff; }
.ht-cell.ht-sel { box-shadow: inset 0 0 0 2px var(--ht-glow), 0 0 12px rgba(255, 92, 138, .55); z-index: 2; }
/* shaded: sunk, dark tile with the number dimmed */
.ht-cell.ht-shade {
  background: radial-gradient(circle at 35% 30%, #1b1222, #07040b 75%); color: #5c4a5c;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 92, 138, .18);
}
.ht-cell.ht-shade.ht-sel { box-shadow: inset 0 3px 6px rgba(0, 0, 0, .7), inset 0 0 0 2px var(--ht-glow); }
/* circled: confirmed white */
.ht-cell.ht-circle::before {
  content: ""; position: absolute; inset: 12%; border-radius: 50%;
  border: max(2px, calc(var(--cell) * .06)) solid #7fffd8; box-shadow: 0 0 10px rgba(127, 255, 216, .45), inset 0 0 8px rgba(127, 255, 216, .25);
}
.ht-cell.ht-circle { color: #fff; }
/* mistakes: touching shaded cells, a repeated circled number, cells cut off from the rest */
.ht-cell.ht-bad { color: var(--t-red); }
.ht-cell.ht-bad::after { content: ""; position: absolute; inset: 2px; border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(255, 61, 127, .85), 0 0 10px rgba(255, 61, 127, .5); }
.ht-cell.ht-circle.ht-bad::before { border-color: var(--t-red); box-shadow: 0 0 10px rgba(255, 61, 127, .55); }
.ht-cell.ht-cut:not(.ht-shade) { background: repeating-linear-gradient(135deg, #3a1630 0 6px, #50172e 6px 9px); }
.ht-cell.ht-pop .ht-v { display: inline-block; animation: htpop .25s cubic-bezier(.3, 1.6, .5, 1); }
.ht-cell.ht-pop.ht-circle::before { animation: htring .3s ease; }
@keyframes htpop { from { transform: scale(.55); } }
@keyframes htring { from { transform: scale(.4); opacity: 0; } }
.ht-cell.ht-done:not(.ht-shade) { animation: htwin .7s ease both; }
.ht-cell.ht-done:nth-child(3n+2) { animation-delay: .08s; }
.ht-cell.ht-done:nth-child(3n) { animation-delay: .16s; }
@keyframes htwin { 50% { background: #b8336a; color: #fff; box-shadow: 0 0 16px rgba(255, 92, 138, .8); } }
.ht-cell:disabled { cursor: default; }
.ht-loading .ht-cell { background: #2a0f22; animation: htload 1.2s ease-in-out infinite alternate; }
.ht-loading .ht-cell:nth-child(2n) { animation-delay: .3s; }
@keyframes htload { to { background: #3a1530; } }

/* tool switch */
.ht-tools { display: flex; gap: 8px; width: min(100%, 340px); }
.ht-tool {
  flex: 1; min-height: 44px; border: 0; cursor: pointer; border-radius: 12px; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .35);
  font: 700 .95rem/1 var(--font-body); transition: transform .1s, box-shadow .15s, background .15s;
}
.ht-tool:hover { box-shadow: inset 0 0 0 1px var(--ht-glow); }
.ht-tool:active { transform: translateY(2px); }
.ht-tool[aria-pressed="true"] { background: linear-gradient(135deg, #d63c74, #8e1f4f); color: #fff; box-shadow: 0 0 0 1px var(--ht-glow), 0 0 16px rgba(255, 92, 138, .4); }
.ht-tool:disabled { opacity: .45; cursor: default; transform: none; }
.ht-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ht-ico { width: 18px; height: 18px; border-radius: 4px; flex: none; }
.ht-ico-shade { background: #07040b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.ht-ico-circle { border-radius: 50%; border: 2.5px solid #7fffd8; }
.ht-hint { text-wrap: balance; margin: 0; font-size: .82rem; color: var(--muted); text-align: center; max-width: 420px; }
.ht-clock { font-variant-numeric: tabular-nums; }
.ht-count { color: var(--muted); font-weight: 600; }
.ht-warn { font-size: .82rem; padding: 2px 10px; border-radius: 999px; background: rgba(255, 61, 127, .18); color: #ffb3c8; }
@media (prefers-reduced-motion: reduce) {
  .ht-cell { transition: none; }
}