/* Tactics — daily mate-in-2 chess puzzle styles. An 8x8 board with a
   standard light/dark checkerboard, sized so every square clears the 44px
   comfortable tap target (well over the 24px minimum). */

.game-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.head-btns { display: flex; gap: 6px; }

#board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  width: 100%;
  max-width: 400px;
  margin: var(--space-3) auto 0;
  border: 2px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.tc-cell {
  aspect-ratio: 1;
  min-height: 40px;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: #1a1a1a;
  transition: outline-color 90ms var(--ease), transform 90ms var(--ease);
}
.tc-cell.light { background: #ebeced; }
.tc-cell.dark { background: #7c8a9c; }
.tc-cell.piece-white { color: #f8fafc; text-shadow: 0 0 2px #000, 0 0 1px #000; }
.tc-cell.piece-black { color: #0b0d14; text-shadow: 0 0 2px rgba(255,255,255,0.5); }
.tc-cell.selected { outline: 3px solid var(--accent); outline-offset: -3px; }
.tc-cell.legal-move { position: relative; }
.tc-cell.legal-move::after {
  content: "";
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.65;
}
.tc-cell:disabled { cursor: default; }
.tc-cell:not(:disabled):active { transform: scale(0.95); }
.tc-cell:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }

#stats-line { font-variant-numeric: tabular-nums; }

#endgame { text-align: center; }
.tc-end-emoji { font-size: 2rem; }
#end-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 6px; }
#end-stats { margin: 0 0 4px; }
#endgame .btn { margin-top: var(--space-2); }