.ttt-wrap{display:flex;justify-content:center}.ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--board-frame);padding:6px;border-radius:var(--radius-md);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(--board-square-light);border-radius:var(--radius-sm);touch-action:manipulation}.ttt:not(.ttt--locked) .ttt-cell:empty:hover{background:var(--color-accent-soft)}.ttt-cell.last{background:var(--color-accent-soft)}.ttt-cell.win{background:var(--color-accent)}.ttt-cell:focus-visible{outline:3px solid var(--color-focus);outline-offset:-3px;z-index:1}.ttt-disc{width:64%;height:64%;border-radius:50%;box-sizing:border-box}.ttt-disc--light{background:var(--piece-light-fill);border:5px solid var(--piece-light-ring)}.ttt-disc--dark{background:var(--piece-dark-fill);border:5px solid var(--piece-dark-ring)}.ttt-disc.pop{animation:ttt-pop .22s var(--ease) both}@keyframes ttt-pop{0%{transform:scale(.4)}to{transform:scale(1)}}