/* O tabuleiro do jogo da velha: grade 3 × 3 do tamanho de --board (kit.css), X vermelho e O magenta desenhados em SVG,
   e o traço da linha vencedora por cima. */
.ttt-board {
	position: relative; width: var(--board); height: var(--board);
	display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px;
	padding: 8px; background: var(--line); border-radius: 14px;
}
.ttt-board [role='row'] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ttt-board button {
	border: 0; border-radius: 8px; background: var(--panel); cursor: pointer; padding: 14%;
	display: grid; place-items: center; transition: background .15s;
}
.ttt-board button:not([aria-disabled='true']):hover { background: #232229; }
.ttt-board button[aria-disabled='true'] { cursor: default; }
.ttt-board button svg { width: 100%; height: 100%; overflow: visible; }
.ttt-board button .ttt-x { stroke: var(--red); }
.ttt-board button .ttt-o { stroke: var(--magenta); }
.ttt-board button path, .ttt-board button circle {
	fill: none; stroke-width: 12; stroke-linecap: round;
	stroke-dasharray: 300; stroke-dashoffset: 300; animation: ttt-draw .28s ease-out forwards;
}
.ttt-board button .ttt-x path + path { animation-delay: .12s; }
.ttt-board button.ttt-win { background: #2b1520; }
.ttt-board button.ttt-last { box-shadow: inset 0 0 0 2px #3a3943; }
@keyframes ttt-draw { to { stroke-dashoffset: 0; } }
.ttt-strike { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); pointer-events: none; }
.ttt-strike line { stroke: #fff; stroke-width: 7; stroke-linecap: round; opacity: 0; stroke-dasharray: 420; stroke-dashoffset: 420; }
.ttt-strike line.ttt-show { opacity: .92; animation: ttt-draw .35s .1s ease-out forwards; }