/* Tic Tac Toe — board, cells, overlay, tally */
.tic-tac-toe-stage-wrap { gap: 0.75rem; align-items: center; }
.ttt-stage { position: relative; width: min(100%, 420px); }
.ttt-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; aspect-ratio: 1; padding: 8px; border-radius: var(--radius-md); background: var(--border); }
.ttt-cell { display: flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font-family: var(--font-mono); font-weight: 300; font-size: clamp(2rem, 14cqw, 4.5rem); line-height: 1; cursor: pointer; transition: background-color .15s, transform .12s; }
.ttt-cell:hover:not(:disabled) { background: var(--surface-elevated); }
.ttt-cell:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ttt-cell:disabled { cursor: default; }
.ttt-cell[data-mark="x"] { color: var(--brand); }
.ttt-cell[data-mark="o"] { color: var(--text-secondary); }
.ttt-cell.is-win { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); }
.ttt-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; text-align: center; padding: 1rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: none; }
.ttt-overlay[hidden] { display: none; }
.ttt-overlay strong { font-size: clamp(1.4rem, 5cqw, 2.4rem); font-weight: 300; letter-spacing: -0.02em; color: var(--text-primary); }
.ttt-overlay span { font-size: 0.86rem; color: var(--text-secondary); }
.ttt-score { display: inline-flex; align-items: baseline; gap: 0.35rem; font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.ttt-score i { font-style: normal; color: var(--text-muted); }
.tic-tac-toe-hint { text-align: center; }