/* =============================================================
   GAME: Tic-Tac-Toe
   ============================================================= */
.board-tictactoe {
  --n: 3;
  --cell: min(calc((100vw - 110px) / 3), 104px);
  --gap: 6px;
  --ttt-glow: #e6ff3d;
  display: grid; grid-template-columns: repeat(var(--n), var(--cell)); grid-auto-rows: var(--cell); gap: var(--gap);
  padding: 10px; border-radius: 18px; background: #1b2408;
  box-shadow: 0 0 0 2px var(--ttt-glow), 0 0 26px rgba(230, 255, 61, .35), inset 0 0 0 1px rgba(0, 0, 0, .4);
}
.board-tictactoe.ttt-5 { --cell: min(calc((100vw - 116px) / 5), 72px); --gap: 5px; }
.ttt-row { display: contents; }
.ttt-cell {
  position: relative; border: 0; padding: 0; border-radius: 12px; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 0%, #1d1545 0%, #120b2c 55%, #0b0620 100%);
  box-shadow: inset 0 0 0 1px rgba(230, 255, 61, .14), inset 0 4px 10px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .05);
  display: grid; place-items: center; transition: background .15s, box-shadow .15s;
}
.ttt-cell:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 1; }
.ttt-cell svg { width: 82%; height: 82%; overflow: visible; }
/* neon tube: a coloured glowing stroke with a hot white core, drawn in like a pen */
.ttt-stroke, .ttt-core { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: ttt-draw .26s cubic-bezier(.4, 0, .2, 1) both; }
.ttt-stroke { stroke-width: 12; }
.ttt-core { stroke-width: 4; stroke: rgba(255, 255, 255, .85); }
.ttt-stroke.two, .ttt-core.two { animation-delay: .16s; }
.p2 .ttt-stroke, .p2 .ttt-core { animation-duration: .38s; }
@keyframes ttt-draw { from { stroke-dashoffset: 100; } }
.ttt-cell.p1 svg, .ttt-chip.p1 svg { filter: drop-shadow(0 0 3px rgba(255, 79, 176, .9)) drop-shadow(0 0 10px rgba(255, 79, 176, .55)); }
.ttt-cell.p2 svg, .ttt-chip.p2 svg { filter: drop-shadow(0 0 3px rgba(61, 245, 255, .9)) drop-shadow(0 0 10px rgba(61, 245, 255, .5)); }
.ttt-cell.p1 .ttt-stroke, .ttt-chip.p1 .ttt-stroke { stroke: var(--p1); }
.ttt-cell.p2 .ttt-stroke, .ttt-chip.p2 .ttt-stroke { stroke: var(--p2); }
.ttt-cell.p1 .ttt-core { stroke: #ffe1f1; }
.ttt-cell.p2 .ttt-core { stroke: #e3fdff; }

/* hover preview of the mark about to be placed */
.board-tictactoe:not(.ttt-wait) .ttt-cell:not(.p1):not(.p2):hover { background: #1d1544; box-shadow: inset 0 0 0 2px rgba(230, 255, 61, .45); }
.board-tictactoe:not(.ttt-wait)[data-turn="1"] .ttt-cell:not(.p1):not(.p2):hover::after,
.board-tictactoe:not(.ttt-wait)[data-turn="2"] .ttt-cell:not(.p1):not(.p2):hover::after {
  content: ""; position: absolute; width: 34%; height: 34%; border-radius: 50%; opacity: .35;
}
.board-tictactoe[data-turn="1"] .ttt-cell:hover::after { background: var(--p1); }
.board-tictactoe[data-turn="2"] .ttt-cell:hover::after { background: var(--p2); }
.ttt-wait .ttt-cell, .ttt-cell.p1, .ttt-cell.p2 { cursor: default; }

.ttt-cell.last { box-shadow: inset 0 0 0 2px rgba(230, 255, 61, .55), inset 0 4px 10px rgba(0, 0, 0, .45); }
.ttt-cell.win { background: radial-gradient(circle, #34470d, #1e2a08 80%); box-shadow: inset 0 0 0 2px var(--ttt-glow), 0 0 18px rgba(230, 255, 61, .45); animation: ttt-pulse .8s ease-in-out .5s infinite alternate; }
.ttt-cell.dim svg { opacity: .3; filter: none; }
@keyframes ttt-pulse { to { box-shadow: inset 0 0 0 2px var(--ttt-glow), 0 0 30px rgba(230, 255, 61, .75); } }
.ttt-5 .ttt-stroke { stroke-width: 13; }
.ttt-5 .ttt-core { stroke-width: 4.5; }

/* strike-through over the winning line */
.ttt-strike { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); pointer-events: none; overflow: visible; z-index: 2; }
.ttt-strike line { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ttt-strike .4s cubic-bezier(.5, 0, .2, 1) .3s forwards; }
.ttt-strike-glow { stroke-width: .13; opacity: .9; }
.ttt-strike-core { stroke: #fff; stroke-width: .045; }
.ttt-strike.p1 .ttt-strike-glow { stroke: var(--p1); }
.ttt-strike.p2 .ttt-strike-glow { stroke: var(--p2); }
.ttt-strike.p1 { filter: drop-shadow(0 0 6px var(--p1)); }
.ttt-strike.p2 { filter: drop-shadow(0 0 6px var(--p2)); }
@keyframes ttt-strike { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ttt-strike line, .ttt-stroke, .ttt-core { stroke-dashoffset: 0; } }
.ttt-5 .ttt-cell { border-radius: 9px; }

/* small mark in the status bar */
.ttt-chip { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.ttt-chip svg { width: 100%; height: 100%; overflow: visible; }
.ttt-chip .ttt-stroke { stroke-width: 14; animation: none; }
.ttt-chip .ttt-core { display: none; }