.game-page[data-game=xo]{--x-color:var(--pink);--o-color:var(--mint)}.xo{padding:var(--pad);background:radial-gradient(at 50% 0,#a084ff29,#0000 65%),#140b2e;position:absolute;inset:0}.xo-grid{grid-template-columns:repeat(3, var(--cell));grid-template-rows:repeat(3, var(--cell));gap:var(--gap);width:100%;height:100%;display:grid}.xo-cell{border:3px solid var(--line);border-radius:calc(var(--cell) * .14);box-shadow:inset 0 calc(var(--cell) * -.04) 0 #00000059, inset 0 2px 0 #ffffff0f;cursor:default;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#1d1245;place-items:center;padding:0;transition:background-color .15s,transform .1s;display:grid;position:relative}.xo.is-playable .xo-cell.is-empty{cursor:pointer}.xo.is-playable .xo-cell.is-empty:hover{background:#26185a}.xo.is-playable .xo-cell.is-empty:active{transform:scale(.96)}.xo-cell:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.xo-cell.is-last{background:#24175a}.xo-mark,.xo-preview{pointer-events:none;width:88%;height:88%;position:absolute;inset:6%;overflow:visible}.xo-mark .outline,.xo-preview .outline,.turn-mark .outline,.xo-line .outline{fill:none;stroke:var(--line);stroke-width:22px;stroke-linecap:round}.xo-mark .ink,.xo-preview .ink,.turn-mark .ink{fill:none;stroke:var(--x-color);stroke-width:12px;stroke-linecap:round}[data-seat="1"]>.ink{stroke:var(--o-color)}.xo-mark.is-new .outline,.xo-mark.is-new .ink{stroke-dasharray:1;animation:.28s ease-out both xo-draw}.xo-mark.is-new .ink{animation-delay:20ms}@keyframes xo-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.xo-preview{opacity:0;transition:opacity .12s}.xo-preview .outline{stroke:#0000}.xo.is-playable .xo-cell:hover .xo-preview,.xo.is-playable .xo-cell:focus-visible .xo-preview{opacity:.22}.xo-fx{inset:var(--pad);pointer-events:none;position:absolute}.xo-poof{width:var(--cell);height:var(--cell);left:calc(var(--i) * (var(--cell) + var(--gap)));top:calc(var(--j) * (var(--cell) + var(--gap)));position:absolute}.xo-poof .xo-mark{animation:.55s ease-out forwards xo-poof}@keyframes xo-poof{to{opacity:0;filter:blur(6px);transform:scale(1.35)rotate(12deg)}}.xo-burst{border:calc(var(--cell) * .05) dashed #fff3dacc;border-radius:50%;animation:.55s ease-out forwards xo-burst;position:absolute;inset:22%}@keyframes xo-burst{0%{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.5)rotate(40deg)}}.xo-line{inset:var(--pad);width:calc(100% - var(--pad) * 2);height:calc(100% - var(--pad) * 2);pointer-events:none;position:absolute;overflow:visible}.xo-line .outline{stroke-width:.2px}.xo-line .ink{fill:none;stroke:var(--sun);stroke-width:.11px;stroke-linecap:round}.xo-line.is-new .outline,.xo-line.is-new .ink{stroke-dasharray:1;animation:.4s ease-out .25s both xo-draw}.turn-mark{vertical-align:middle;width:22px;height:22px;margin-right:8px;display:inline-block;overflow:visible}.turn-mark .outline{stroke-width:26px}.turn-mark .ink{stroke-width:15px}.game-page[data-game=xo] .hud-item[data-seat="0"] dd{color:var(--pink)}.game-page[data-game=xo] .hud-item[data-seat="1"] dd{color:var(--mint)}
