/* xox sayfasına özel stiller */
.xo-scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: min(100%, 420px);
  margin-bottom: 14px;
}
.xo-scores .stat { min-width: 0; }
.xo-scores .stat.turn { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.xo-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: min(100%, 420px, max(220px, calc(100vh - 335px)));
  width: min(100%, 420px, max(220px, calc(100svh - 335px)));
  aspect-ratio: 1;
  padding: 10px;
  background: var(--surface-3);
  border-radius: 18px;
}
.xo-cell {
  display: grid;
  place-items: center;
  padding: 14%;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.xo-cell:hover:not([aria-disabled="true"]) { background: var(--surface-2); }
.xo-cell[aria-disabled="true"] { cursor: default; }
.xo-cell.win { background: var(--accent-soft); }
.xo-cell svg { width: 100%; height: 100%; overflow: visible; }
.xo-cell .mark {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw 0.3s ease-out forwards;
}
.xo-cell .mark.x { stroke: var(--accent); }
.xo-cell .mark.x + .mark.x { animation-delay: 0.12s; }
.xo-cell .mark.o { stroke: var(--coral); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.xo-options { display: flex; flex-wrap: wrap; gap: 8px; }