/* =============================================================
   GAME: Binary Puzzle (Takuzu)
   ============================================================= */
.board-binary {
  --bn-glow: #6b8cff;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.bn-grid {
  --cell: min(calc((100vw - 84px) / var(--n, 8)), 52px);
  display: grid; grid-template-columns: repeat(var(--n, 8), var(--cell)); grid-auto-rows: var(--cell); gap: 3px;
  padding: 6px; border-radius: 16px;
  background: linear-gradient(160deg, #152056, #0a0f2e 70%);
  box-shadow: 0 0 0 2px var(--bn-glow), 0 0 28px rgba(107, 140, 255, .35), 0 12px 30px rgba(0, 0, 0, .4);
}
.bn-cell {
  position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 22%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #1b2457, #151c46);
  box-shadow: inset 0 0 0 1px rgba(107, 140, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .25);
  font: 800 calc(var(--cell) * .5) / 1 var(--font-body); font-variant-numeric: tabular-nums;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.bn-v:empty { display: none; }
.bn-cell:not(.bn-0):not(.bn-1):hover:not(:disabled) { background: linear-gradient(180deg, #232e6b, #1b2458); }
.bn-cell.bn-0:hover:not(:disabled):not(.bn-given), .bn-cell.bn-1:hover:not(:disabled):not(.bn-given) { filter: brightness(1.12); }
.bn-grid:focus-within .bn-cell.bn-line:not(.bn-0):not(.bn-1) { background: linear-gradient(180deg, #212b66, #1a2252); }
.bn-cell:focus { outline: none; }
.bn-cell:focus-visible, .bn-grid:focus-within .bn-cell.bn-cur { box-shadow: inset 0 0 0 2px var(--focus), 0 0 12px rgba(245, 168, 255, .45); z-index: 1; }
/* 0 = cool blue tile, 1 = warm amber tile */
.bn-cell.bn-0 {
  background: radial-gradient(120% 90% at 30% 20%, #6fd3ff, #2b7be0 55%, #1d4fb0);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 2px 6px rgba(43, 123, 224, .45);
  color: #e9f7ff; text-shadow: 0 1px 2px rgba(0, 30, 80, .6);
}
.bn-cell.bn-1 {
  background: radial-gradient(120% 90% at 30% 20%, #ffe08a, #ff9a2e 55%, #d9641a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 2px 6px rgba(255, 154, 46, .45);
  color: #fffaf0; text-shadow: 0 1px 2px rgba(110, 40, 0, .6);
}
/* clues are flatter and carry a small lock notch */
.bn-cell.bn-given { cursor: default; filter: saturate(.9) brightness(.88); }
.bn-cell.bn-given::after { content: ""; position: absolute; left: 50%; bottom: 9%; width: 22%; height: 3px; margin-left: -11%; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.bn-cell.bn-bad { box-shadow: inset 0 0 0 3px var(--t-red), 0 0 12px rgba(255, 61, 127, .6); }
.bn-cell.bn-pop .bn-v { display: inline-block; animation: bnpop .26s cubic-bezier(.3, 1.6, .5, 1); }
.bn-cell.bn-pop { animation: bntilt .26s ease; }
@keyframes bnpop { from { transform: scale(.4); opacity: .2; } }
@keyframes bntilt { from { transform: scale(.86); } }
.bn-cell.bn-bad.bn-pop { animation: bnshake .32s ease; }
@keyframes bnshake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.bn-cell.bn-flash { animation: bnflash .7s ease both; }
@keyframes bnflash { 35% { filter: brightness(1.45); transform: scale(1.06); } }
.bn-cell.bn-done { animation: bnwin .8s ease both; }
.bn-cell.bn-done:nth-child(2n) { animation-delay: .08s; }
@keyframes bnwin { 50% { filter: brightness(1.4); transform: translateY(-3px); } }
.bn-cell:disabled { cursor: default; }
.bn-loading .bn-cell { background: #141b45; animation: bnload 1.2s ease-in-out infinite alternate; }
.bn-loading .bn-cell:nth-child(2n) { animation-delay: .3s; }
@keyframes bnload { to { background: #1e2860; } }

.bn-pad { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; width: min(100%, 340px); }
.bn-key {
  min-height: 46px; border: 0; cursor: pointer; border-radius: 12px; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  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;
}
.bn-key:hover { box-shadow: inset 0 0 0 1px var(--bn-glow); }
.bn-key:active { transform: translateY(2px); }
.bn-key:disabled { opacity: .4; cursor: default; transform: none; }
.bn-key:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bn-chip { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font: 800 1.05rem/1 var(--font-body); color: #fff; }
.bn-k0 .bn-chip { background: radial-gradient(120% 90% at 30% 20%, #6fd3ff, #2b7be0 55%, #1d4fb0); }
.bn-k1 .bn-chip { background: radial-gradient(120% 90% at 30% 20%, #ffe08a, #ff9a2e 55%, #d9641a); }
.bn-hint { margin: 0; font-size: .82rem; color: var(--muted); text-align: center; max-width: 380px; }
@media (hover: none) { .bn-desk { display: none; } }
.bn-clock { font-variant-numeric: tabular-nums; }
.bn-count { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .bn-cell { transition: none; }
}