.xox .xox-scores { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; max-width: 420px; margin: 0 auto 10px; }
.xox .xox-score { background: var(--cell-alt); border-radius: 12px; padding: 6px 10px; text-align: center; display: flex; flex-direction: column; line-height: 1.25; }
.xox .xox-score span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.xox .xox-score b { font-size: 22px; font-variant-numeric: tabular-nums; }
.xox .xox-score.x b { color: var(--accent); }
.xox .xox-score.o b { color: var(--accent-2); }
.xox .xox-status { text-align: center; font-weight: 700; min-height: 1.6em; margin-bottom: 10px; }
.xox .xox-status.win { color: var(--good); }
.xox .xox-status.lose { color: var(--bad); }
.xox .xox-status.draw { color: var(--muted); }
.xox .xox-wrap { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; }
.xox .xox-board { display: grid; gap: 8px; width: 100%; height: 100%; }
.xox .xox-board.busy { cursor: wait; }
.xox .xox-cell { appearance: none; border: 1px solid var(--line); background: var(--cell); border-radius: 14px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s ease, border-color .12s ease; min-width: 0; min-height: 0; }
.xox .xox-cell:hover:not(:disabled) { border-color: var(--accent); background: var(--cell-alt); }
.xox .xox-cell:disabled { cursor: default; }
.xox .xox-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.xox .mk { width: 78%; height: 78%; fill: none; stroke-width: 11; stroke-linecap: round; }
.xox .mk-x { stroke: var(--accent); }
.xox .mk-o { stroke: var(--accent-2); }
.xox .mk path, .xox .mk circle { stroke-dasharray: 200; stroke-dashoffset: 200; animation: xox-draw .28s ease-out forwards; }
.xox .xox-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.xox .xox-line line { stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: xox-draw .45s ease-out .1s forwards; opacity: .85; }
.xox .xox-line line.x { stroke: var(--accent); }
.xox .xox-line line.o { stroke: var(--accent-2); }
@keyframes xox-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .xox .mk path, .xox .mk circle, .xox .xox-line line { animation: none; stroke-dashoffset: 0; }
}