/* Game-specific wooden board; invitation, actions and shell use shared styles. */
:root:not([data-game="tic-tac-toe"]) .only-tic-tac-toe,
:root[data-game="tic-tac-toe"] .only-gomoku { display: none !important; }
.ttt-wrap {
  container-type: inline-size;
  border-radius: 5.5%;
  background: linear-gradient(#fff6e322, #fff6e322), url('/assets/tic-tac-toe-maple.webp') center / cover, #edc491;
  box-shadow: inset 0 2px 2px #fff5d6, inset 0 -3px 3px #9a622c66, inset 2px 0 2px #fbe2b688, inset -2px 0 2px #9b642c33, 0 4px 0 #bc8b50, 0 6px 3px #70431e33, 0 15px 22px #69451f30;
}
.ttt-wrap::before {
  display: block; position: absolute; content: ''; inset: 2.2%; border-radius: 4%; pointer-events: none;
  background: none; border: 1px solid #a878414d;
  box-shadow: 0 1px 0 #fff1ce80, inset 0 1px 2px #92602a38, inset 0 -1px 0 #fff1ceaa;
}
.ttt-wrap::after { display: none; }
.ttt-grid { position: absolute; inset: 3.7%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); user-select: none; -webkit-user-select: none; }
/* Four uninterrupted, shallow grooves keep the open grid quieter than boxes. */
.ttt-grid::before {
  position: absolute; inset: 0; content: ''; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.333% - 1.5px), #78451ecc calc(33.333% - 1.5px), #93602f 33.333%, #d7a366 calc(33.333% + 1px), #f7ddb0 calc(33.333% + 2px), transparent calc(33.333% + 3px)),
    linear-gradient(to right, transparent calc(66.667% - 1.5px), #78451ecc calc(66.667% - 1.5px), #93602f 66.667%, #d7a366 calc(66.667% + 1px), #f7ddb0 calc(66.667% + 2px), transparent calc(66.667% + 3px)),
    linear-gradient(to bottom, transparent calc(33.333% - 1.5px), #78451ecc calc(33.333% - 1.5px), #93602f 33.333%, #d7a366 calc(33.333% + 1px), #f7ddb0 calc(33.333% + 2px), transparent calc(33.333% + 3px)),
    linear-gradient(to bottom, transparent calc(66.667% - 1.5px), #78451ecc calc(66.667% - 1.5px), #93602f 66.667%, #d7a366 calc(66.667% + 1px), #f7ddb0 calc(66.667% + 2px), transparent calc(66.667% + 3px));
}
.ttt-cell { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: default; -webkit-tap-highlight-color: transparent; }
.ttt-cell.can-play { cursor: pointer; }
.ttt-cell.can-play:hover { background: #fbf9f425; border-radius: 10px; }
.ttt-cell:focus-visible { z-index: 1; outline: 2px solid var(--ink); outline-offset: -7px; border-radius: 10px; background: #fbf9f43a; }
.ttt-mark { position: relative; display: block; width: 84%; aspect-ratio: 1; color: var(--ink); pointer-events: none; font-size: 0; }
.ttt-mark::before, .ttt-mark::after { position: absolute; content: ''; }
.ttt-mark[data-color="x"]::before, .ttt-mark[data-color="x"]::after {
  inset: 42% 0; border-radius: 999px; background: linear-gradient(to bottom, var(--ink-soft), var(--ink));
  box-shadow: 0 2px 0 #151c18, 0 4px 5px #38281933, inset 0 1px 0 #ffffff25;
  transform: rotate(45deg);
}
.ttt-mark[data-color="x"]::after { transform: rotate(-45deg); }
.ttt-mark[data-color="o"] { color: var(--accent); }
.ttt-mark[data-color="o"]::before {
  inset: 4%; border: solid currentColor; border-width: 0; border-radius: 50%;
  /* A mask-free ring scales with the cell and stays clear at phone widths. */
  box-shadow: inset 0 0 0 0.16em var(--accent);
  font-size: 62px;
}
@supports (font-size: 1cqw) { .ttt-mark[data-color="o"]::before { font-size: 17cqw; } }
.ttt-mark[data-color="o"]::after {
  inset: 4%; border-radius: 50%; box-shadow: 0 2px 0 var(--accent-deep), 0 4px 5px #38281933, inset 0 1px 0 #fff8e650;
}
/* Complete SVG faces keep bevels and side walls continuous at every size.
   Labels and interaction remain on the existing HTML cells. */
.ttt-mark[data-color="x"] { width: 80%; }
.ttt-mark[data-color] { filter: drop-shadow(0 4px 3px #482b194d); }
.ttt-mark[data-color="x"]::before, .ttt-mark[data-color="o"]::before {
  inset: 0; border: 0; border-radius: 0; transform: none; box-shadow: none; font-size: 0;
  background: center / contain no-repeat;
}
.ttt-mark[data-color="x"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20104%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22face%22%20x2%3D%22.25%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23626360%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23434542%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23292d2a%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%22.65%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M24.364%2011.636A9%209%200%200%200%2011.636%2024.364L37.272%2050L11.636%2075.636A9%209%200%200%200%2024.364%2088.364L50%2062.728L75.636%2088.364A9%209%200%200%200%2088.364%2075.636L62.728%2050L88.364%2024.364A9%209%200%200%200%2075.636%2011.636L50%2037.272Z%22%20transform%3D%22translate%280%204%29%22%20fill%3D%22%23171d19%22%20stroke%3D%22%23171d19%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M24.364%2011.636A9%209%200%200%200%2011.636%2024.364L37.272%2050L11.636%2075.636A9%209%200%200%200%2024.364%2088.364L50%2062.728L75.636%2088.364A9%209%200%200%200%2088.364%2075.636L62.728%2050L88.364%2024.364A9%209%200%200%200%2075.636%2011.636L50%2037.272Z%22%20fill%3D%22url%28%23face%29%22%20stroke%3D%22%23363a35%22%20stroke-width%3D%22.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M24.364%2011.636A9%209%200%200%200%2011.636%2024.364L37.272%2050L11.636%2075.636A9%209%200%200%200%2024.364%2088.364L50%2062.728L75.636%2088.364A9%209%200%200%200%2088.364%2075.636L62.728%2050L88.364%2024.364A9%209%200%200%200%2075.636%2011.636L50%2037.272Z%22%20transform%3D%22translate%280%20-0.5%29%22%20fill%3D%22none%22%20stroke%3D%22%23c9c7bb%22%20stroke-opacity%3D%22.25%22%20stroke-width%3D%223%22%20filter%3D%22url%28%23soft%29%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.ttt-mark[data-color="o"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20104%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22face%22%20x2%3D%22.25%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23dd8654%22%2F%3E%3Cstop%20offset%3D%22.28%22%20stop-color%3D%22%23cb6d40%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%23b75430%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23a34327%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%22.65%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M92%2050A42%2042%200%201%200%208%2050A42%2042%200%201%200%2092%2050ZM75%2050A25%2025%200%201%201%2025%2050A25%2025%200%201%201%2075%2050Z%22%20transform%3D%22translate%280%204%29%22%20fill%3D%22%2378301b%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%2378301b%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M92%2050A42%2042%200%201%200%208%2050A42%2042%200%201%200%2092%2050ZM75%2050A25%2025%200%201%201%2025%2050A25%2025%200%201%201%2075%2050Z%22%20fill%3D%22url%28%23face%29%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23a44a2c%22%20stroke-width%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2249.2%22%20r%3D%2240.5%22%20fill%3D%22none%22%20stroke%3D%22%23f0b57e%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%222.7%22%20filter%3D%22url%28%23soft%29%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250.5%22%20r%3D%2226%22%20fill%3D%22none%22%20stroke%3D%22%23702d1b%22%20stroke-opacity%3D%22.65%22%20stroke-width%3D%223.2%22%20filter%3D%22url%28%23soft%29%22%2F%3E%3C%2Fsvg%3E"); }
.ttt-mark[data-color="x"]::after, .ttt-mark[data-color="o"]::after { display: none; }
.ttt-cell.is-last::after { position: absolute; content: ''; width: 6px; height: 6px; right: 12%; bottom: 12%; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #edc58f; }
.ttt-cell.is-preview .ttt-mark { opacity: .48; }
.ttt-cell.is-preview { outline: 2px dashed var(--accent); outline-offset: -9px; border-radius: 12px; }
.ttt-cell.is-win { background: radial-gradient(circle closest-side, #fbf9f477 72%, #a8452f26 74%, transparent 77%); }
/* The winning stroke follows the same validated line as the cell labels. */
.ttt-grid[data-winning-line]::after {
  position: absolute; content: ''; pointer-events: none; z-index: 0;
  left: 16.667%; top: 50%; width: 66.666%; height: 2px; background: var(--accent);
  transform-origin: 0 50%; border-radius: 2px;
}
.ttt-grid[data-winning-line=""]::after { display: none; }
.ttt-grid[data-winning-line="0-1-2"]::after { top: 16.667%; }
.ttt-grid[data-winning-line="6-7-8"]::after { top: 83.333%; }
.ttt-grid:is([data-winning-line="0-3-6"], [data-winning-line="1-4-7"], [data-winning-line="2-5-8"])::after { top: 16.667%; transform: rotate(90deg); }
.ttt-grid[data-winning-line="1-4-7"]::after { left: 50%; }
.ttt-grid[data-winning-line="2-5-8"]::after { left: 83.333%; }
.ttt-grid[data-winning-line="0-4-8"]::after { top: 16.667%; width: 94.28%; transform: rotate(45deg); }
.ttt-grid[data-winning-line="2-4-6"]::after { top: 16.667%; left: 83.333%; width: 94.28%; transform: rotate(135deg); }
.ttt-cell { z-index: 1; }
/* Small identity marks use the same geometry without board-sized shadows. */
.ttt-icon { flex: none; position: relative; display: block; width: 26px; height: 26px; color: var(--ink); font-size: 0; }
.ttt-icon::before, .ttt-icon::after { position: absolute; content: ''; }
.ttt-icon[data-color="x"]::before, .ttt-icon[data-color="x"]::after { inset: 43% 6%; border-radius: 999px; background: currentColor; transform: rotate(45deg); }
.ttt-icon[data-color="x"]::after { transform: rotate(-45deg); }
.ttt-icon[data-color="o"] { color: var(--accent); }
.ttt-icon[data-color="o"]::before { inset: 8%; border: 3px solid currentColor; border-radius: 50%; }
.player-chip.is-turn .ttt-icon { border-radius: 5px; outline: 1.5px solid var(--ink); outline-offset: 3px; }
.result-mark { width: 40px; height: 40px; }
.result-mark[data-color=""] { display: grid; place-items: center; font: 600 34px/1 var(--sans); }
.result-mark[data-color="o"]::before { border-width: 5px; }
:root[data-game="tic-tac-toe"] .side-pip { display: grid; place-items: center; border-radius: 0; background: none; box-shadow: none; color: var(--ink); font: 700 14px/1 var(--sans); }
:root[data-game="tic-tac-toe"] .side-pip[data-color="o"] { color: var(--accent); }