.ttt-root{--p0:var(--white);--p1:var(--sun)}.ttt{aspect-ratio:1;border:3px solid var(--ink);border-radius:var(--r-lg);background:var(--game);width:min(100%,400px);box-shadow:clamp(4px, 1.4vw, 6px) clamp(4px, 1.4vw, 6px) 0 var(--ink);touch-action:manipulation;position:relative}.ttt-grid,.ttt-strike{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.ttt-grid path{fill:none;stroke:var(--ink);stroke-width:9px;stroke-linecap:round;stroke-dasharray:1;animation:ttt-draw .42s var(--ease-out) backwards}.ttt-grid path:nth-child(2){animation-delay:70ms}.ttt-grid path:nth-child(3){animation-delay:.14s}.ttt-grid path:nth-child(4){animation-delay:.21s}.ttt-cells{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);display:grid;position:absolute;inset:0}.ttt-cell{appearance:none;cursor:pointer;transition:background .16s var(--ease-out);background:0 0;border:0;border-radius:18px;margin:0;padding:10%;position:relative}.ttt-cell:disabled{cursor:default}.ttt-cell:focus-visible{outline:3px solid var(--ink);outline-offset:-8px}.ttt-cell:active:not(:disabled){background:color-mix(in srgb, var(--white) 30%, transparent)}.ttt-mark{--pc:var(--p0);width:100%;height:100%;display:block;overflow:visible}.ttt-mark[data-p="1"]{--pc:var(--p1)}.ttt-mark path,.ttt-mark circle{fill:none;stroke-linecap:round;stroke-dasharray:1}.ttt-mark .ttt-ink{stroke:var(--ink);stroke-width:21px}.ttt-mark .ttt-face{stroke:var(--pc);stroke-width:13px}.ttt-mark{transition:opacity .3s var(--ease-out)}.ttt-mark:not(.is-ghost) path{animation:.17s cubic-bezier(.5,0,.3,1) backwards ttt-draw}.ttt-mark:not(.is-ghost) path.s2{animation-delay:.13s}.ttt-mark:not(.is-ghost) circle{animation:.3s cubic-bezier(.45,0,.3,1) backwards ttt-draw}.ttt-mark:not(.is-ghost){animation:ttt-land .42s .12s var(--ease-spring) backwards}@keyframes ttt-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes ttt-land{40%{transform:scale(1.08,.94)}}.ttt-mark.is-ghost{opacity:0;transition:opacity .14s var(--ease-out)}@media (hover:hover){.ttt-cell:hover:not(:disabled) .ttt-mark.is-ghost{opacity:.5}.ttt-cell:hover:not(:disabled){background:color-mix(in srgb, var(--white) 20%, transparent)}}.ttt.has-win .ttt-cell:not(.is-win) .ttt-mark{opacity:.3}.ttt.has-win .ttt-cell.is-win .ttt-mark{animation:ttt-pop .42s .22s var(--ease-spring) both}.ttt.is-over:not(.has-win) .ttt-mark{opacity:.6}@keyframes ttt-pop{50%{transform:scale(1.14)rotate(-4deg)}}.ttt-strike{z-index:2}.ttt-strike line{stroke:var(--ink);stroke-width:12px;stroke-linecap:round;stroke-dasharray:1;animation:.38s cubic-bezier(.6,0,.3,1) .18s backwards ttt-draw}