.page{--ttt-x: #C3261C;--ttt-x-edge: #8E2717;--ttt-o: #1E5BD6;--ttt-o-edge: #16449F;--ttt-win-soft: rgba(20, 107, 65, .16);--piece-light-fill: var(--ttt-x);--piece-light-ring: var(--ttt-x-edge);--piece-dark-fill: var(--ttt-o);--piece-dark-ring: var(--ttt-o-edge)}.ttt-wrap{display:flex;justify-content:center}.ttt{display:grid;grid-template-columns:repeat(3,1fr);background:var(--color-surface);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);width:100%;max-width:clamp(240px,calc(100vh - 260px),360px);user-select:none;-webkit-user-select:none}.ttt--locked .ttt-cell{cursor:default}.ttt-cell{aspect-ratio:1;border:0;padding:0;position:relative;display:flex;align-items:center;justify-content:center;background:var(--color-surface);touch-action:manipulation}.ttt-cell:not(:nth-child(3n)){border-right:2px solid var(--color-text)}.ttt-cell:nth-child(-n+6){border-bottom:2px solid var(--color-text)}.ttt:not(.ttt--locked) .ttt-cell:empty:hover{background:var(--color-bg)}.ttt-cell.last{background:var(--color-bg)}.ttt-cell.win{background:var(--ttt-win-soft);z-index:1;animation:rh-blink .5s var(--ease) calc(.22s + var(--i, 0) * .15s) 2}.ttt-cell:focus-visible{outline:3px solid var(--color-focus);outline-offset:-3px;z-index:1}.ttt-disc{width:64%;height:64%;box-sizing:border-box;position:relative}.ttt-disc--light:before,.ttt-disc--light:after{content:"";position:absolute;top:50%;left:-4%;width:108%;height:13%;border-radius:var(--radius-pill);background:var(--ttt-x);transform:translateY(-50%) rotate(45deg)}.ttt-disc--light:after{transform:translateY(-50%) rotate(-45deg)}.ttt-disc--dark{border-radius:50%;border:.55rem solid var(--ttt-o)}.ttt-disc.pop{animation:ttt-pop .22s var(--ease) both}@keyframes ttt-pop{0%{transform:scale(.4)}to{transform:scale(1)}}@media (max-width: 420px){.ttt{padding:var(--space-2)}.ttt-disc--dark{border-width:.45rem}}