/* Tic Tac Toe board (tic-tac-toe-2-player.js). Marks are SVG strokes that draw in; the last move gets a soft ring. */
.tool .duel-ttt { display: grid; gap: 8px; width: 100%; max-width: 440px; margin: 0 auto; touch-action: manipulation; }
.tool .ttt-cell, .tool .ttt-sub { aspect-ratio: 1; }
.tool .ttt-3 { grid-template-columns: repeat(3, 1fr); }
.tool .ttt-4 { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tool .ttt-u { grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 480px; }

.tool .ttt-cell {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 0;
  border-radius: 18px; background: var(--surface); box-shadow: 0 1px 0 rgb(var(--ink) / .04), inset 0 0 0 1px rgb(var(--ink) / .05);
  cursor: default; user-select: none; -webkit-user-select: none;
  transition: background-color .2s ease, opacity .3s ease, transform .16s var(--ease-out);
}
.tool .ttt-4 .ttt-cell { border-radius: 14px; }
.tool .ttt-cell.can { cursor: pointer; }
.tool .ttt-cell.can:active { transform: scale(.94); }
.tool .ttt-cell:focus-visible { outline: 3px solid rgb(var(--accent)); outline-offset: 2px; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .tool .duel-ttt[data-turn="0"] .ttt-cell.can:hover { background: rgb(var(--p0) / .08); }
  .tool .duel-ttt[data-turn="1"] .ttt-cell.can:hover { background: rgb(var(--p1) / .08); }
}
.tool .ttt-mark { width: 62%; height: 62%; overflow: visible; fill: none; stroke-width: 6; stroke-linecap: round; }
.tool .ttt-cell.x .ttt-mark, .tool .ttt-big.x .ttt-mark { stroke: rgb(var(--p0)); }
.tool .ttt-cell.o .ttt-mark, .tool .ttt-big.o .ttt-mark { stroke: rgb(var(--p1)); }
.tool .ttt-mark path, .tool .ttt-mark circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
.tool .ttt-cell.is-new .ttt-mark path { animation: ttt-draw .22s var(--ease-out) both; }
.tool .ttt-cell.is-new .ttt-mark path.b { animation-delay: .12s; }
.tool .ttt-cell.is-new .ttt-mark circle { animation: ttt-draw .36s var(--ease-out) both; }
@keyframes ttt-draw { from { stroke-dashoffset: 1; } }
.tool .ttt-cell.is-last { box-shadow: inset 0 0 0 2px rgb(var(--ink) / .14); }
.tool .duel-ttt.is-over .ttt-cell:not(.is-win) { background: rgb(var(--ink) / .03); box-shadow: none; }
.tool .duel-ttt.is-over .ttt-cell:not(.is-win) .ttt-mark { opacity: .7; }
.tool .ttt-cell.is-win { background: rgb(var(--accent) / .14); animation: ttt-win .5s var(--ease-out) both; }
.tool .ttt-cell.is-win.o { background: rgb(var(--p1) / .14); }
@keyframes ttt-win { 50% { transform: scale(1.06); } }
.tool .duel-ttt.is-thinking .ttt-cell { cursor: progress; }

/* Ultimate: nine small boards, the ones you may play in are outlined */
.tool .ttt-sub { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 4px; border-radius: 14px; background: rgb(var(--ink) / .05); transition: background-color .2s ease, box-shadow .2s ease, opacity .3s ease; }
.tool .ttt-u .ttt-cell { border-radius: 7px; box-shadow: none; }
.tool .ttt-u .ttt-mark { stroke-width: 7; width: 70%; height: 70%; }
.tool .ttt-sub.is-active { background: rgb(var(--accent) / .16); box-shadow: inset 0 0 0 2px rgb(var(--accent) / .55); }
.tool .duel-ttt[data-turn="1"] .ttt-sub.is-active { background: rgb(var(--p1) / .14); box-shadow: inset 0 0 0 2px rgb(var(--p1) / .55); }
.tool .ttt-sub.is-done .ttt-cell { opacity: .25; }
.tool .ttt-big { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.tool .ttt-big .ttt-mark { width: 78%; height: 78%; stroke-width: 5; animation: ttt-draw .4s var(--ease-out) both; }
.tool .duel-ttt.ttt-u.is-over .ttt-sub:not(.is-win) { opacity: .45; }
.tool .duel-ttt.ttt-u.is-over .ttt-cell { opacity: 1; }
.tool .ttt-u.is-over .ttt-sub.is-done .ttt-cell { opacity: .2; }

@media (max-width: 599px) {
  .tool .ttt-3 .ttt-cell { border-radius: 16px; }
  .tool .ttt-u { gap: 5px; }
  .tool .ttt-sub { gap: 2px; padding: 3px; border-radius: 10px; }
  .tool .ttt-u .ttt-cell { border-radius: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool .ttt-cell.is-new .ttt-mark path, .tool .ttt-cell.is-new .ttt-mark circle, .tool .ttt-big .ttt-mark, .tool .ttt-cell.is-win { animation: none; }
}
/* Winning stroke drawn over the board */
.tool .duel-ttt { position: relative; }
.tool .ttt-strike { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.tool .ttt-strike line { stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1; animation: ttt-draw .35s var(--ease-out) .1s both; }
.tool .ttt-strike.x line { stroke: rgb(var(--p0)); }
.tool .ttt-strike.o line { stroke: rgb(var(--p1)); }
.tool .ttt-cell.is-win.o { background: rgb(var(--p1) / .16); }
@media (max-width: 599px) { .tool[data-variant="u"] .ttt-u { margin: 0 -8px; width: calc(100% + 16px); max-width: none; } }
@media (prefers-reduced-motion: reduce) { .tool .ttt-strike line { animation: none; } }
/* Read as a tic tac toe grid: tight gaps on a tinted board, so the gaps become the lines */
.tool .ttt-3, .tool .ttt-4 { gap: 4px; padding: 4px; border-radius: 22px; background: rgb(var(--ink) / .14); }
.tool .ttt-3 .ttt-cell, .tool .ttt-4 .ttt-cell { border-radius: 8px; box-shadow: none; }
.tool .ttt-3 .ttt-cell:nth-child(1), .tool .ttt-4 .ttt-cell:nth-child(1) { border-top-left-radius: 18px; }
.tool .ttt-3 .ttt-cell:nth-child(3), .tool .ttt-4 .ttt-cell:nth-child(4) { border-top-right-radius: 18px; }
.tool .ttt-3 .ttt-cell:nth-child(7), .tool .ttt-4 .ttt-cell:nth-child(13) { border-bottom-left-radius: 18px; }
.tool .ttt-3 .ttt-cell:nth-child(9), .tool .ttt-4 .ttt-cell:nth-child(16) { border-bottom-right-radius: 18px; }
.tool .ttt-cell.is-last { box-shadow: inset 0 0 0 2px rgb(var(--ink) / .18); }
/* Round 7 */
@media (min-width: 900px) { .tool .duel-ttt.ttt-3, .tool .duel-ttt.ttt-4 { max-width: 480px; } .tool .duel-ttt.ttt-u { max-width: 520px; } }
/* Ultimate on a phone: tighter gaps so each square is as large as the width allows */
@media (max-width: 599px) {
  .tool .ttt-u { gap: 4px; }
  .tool .ttt-sub { gap: 2px; padding: 2px; }
}
/* Game over: the whole board is one big "play again" button */
.tool .duel-ttt.can-again .ttt-cell { cursor: pointer; }
/* In an in-app browser the warning sits above the board (phone), before the first send */
@media (max-width: 899px) { .tool.duel-g-ttt .duel-note.duel-warn { order: 2; } }
/* Undo is a quiet text button, so Send stays the one filled action */
.tool.duel-g-ttt .duel-actions .duel-icon-btn[title="Undo"] { background: none; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; color: rgb(var(--ink) / .75); }