.g-tic-tac-toe{--ttt-x:#2b6cb0;--ttt-o:#c9691a;--ttt-win:rgba(31, 111, 92, .22);margin:0 auto;max-width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;padding:6px;border-radius:12px;background:var(--line);touch-action:manipulation}:root[data-theme=dark] .g-tic-tac-toe{--ttt-x:#6aa8ee;--ttt-o:#f0a15a;--ttt-win:rgba(63, 174, 143, .3)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .g-tic-tac-toe{--ttt-x:#6aa8ee;--ttt-o:#f0a15a;--ttt-win:rgba(63, 174, 143, .3)}}.g-tic-tac-toe .gttt-cell{position:relative;display:grid;place-items:center;padding:0;margin:0;min-width:0;min-height:0;border:0;border-radius:8px;background:var(--surface);color:var(--ink);cursor:default;font:inherit;-webkit-tap-highlight-color:transparent}.g-tic-tac-toe .gttt-cell.is-open{cursor:pointer}.g-tic-tac-toe .gttt-cell.is-open:hover{background:var(--accent-soft)}.g-tic-tac-toe .gttt-cell svg{width:68%;height:68%;fill:none;stroke-width:11;stroke-linecap:round}.g-tic-tac-toe .gttt-cell.is-x svg{stroke:var(--ttt-x)}.g-tic-tac-toe .gttt-cell.is-o svg{stroke:var(--ttt-o)}.g-tic-tac-toe .gttt-cell.is-last svg{animation:gttt-draw 220ms ease-out}.g-tic-tac-toe .gttt-cell.is-last{box-shadow:inset 0 0 0 3px var(--gold)}.g-tic-tac-toe .gttt-cell.is-win{background:var(--ttt-win);box-shadow:inset 0 0 0 3px var(--accent);animation:gttt-pulse 700ms ease-in-out 2}.g-tic-tac-toe .gttt-cell.is-hint{background:var(--accent-soft);box-shadow:inset 0 0 0 3px var(--focus)}.g-tic-tac-toe .gttt-cell.is-cursor,.g-tic-tac-toe .gttt-cell:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.g-tic-tac-toe .gttt-cell:focus:not(:focus-visible):not(.is-cursor){outline:none}@keyframes gttt-draw{from{stroke-dasharray:200;stroke-dashoffset:200}to{stroke-dasharray:200;stroke-dashoffset:0}}@keyframes gttt-pulse{50%{transform:scale(1.05)}}@media(prefers-reduced-motion:reduce){.g-tic-tac-toe .gttt-cell.is-win,.g-tic-tac-toe .gttt-cell.is-last svg{animation:none}}