/* Tic tac toe solver */
.tt .split > *, .tt .panel { min-width: 0; }
.tt-opts { margin-top: 12px; align-items: center; gap: 8px; }
.tt-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 360px; margin: 18px auto 0; }
.tt-cell { position: relative; aspect-ratio: 1; border: 0; border-radius: 14px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; padding: 0; color: var(--ink); min-width: 0; -webkit-tap-highlight-color: transparent; }
.tt-cell:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.tt-cell:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tt-cell svg { position: absolute; inset: 18%; width: 64%; height: 64%; }
.tt-cell.win { background: var(--mint); }
.tt-cell.win svg { color: #000; }
.tt-cell.best { box-shadow: inset 0 0 0 2px var(--ink); }
.tt-badge { position: absolute; left: 6px; right: 6px; bottom: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.2; border-radius: var(--pill); padding: 3px 4px; text-align: center; }
.tt-badge.w { background: var(--mint); color: #0b3d1a; } .tt-badge.d { background: var(--soft-2); color: var(--ink); } .tt-badge.l { background: var(--pink); color: #5c0e0e; }
.tt-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.tt-list li { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; font-size: 14px; }
.tt-list li.best { border-color: var(--ink); }
.tt-list b { color: var(--ink); }
.tt-list .tag { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; margin-left: 6px; color: var(--muted); }
@media (max-width: 420px) { .tt-badge { font-size: 10px; left: 3px; right: 3px; bottom: 4px; } }