.ttt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:2rem auto;background:#000000b3;padding:10px;border-radius:12px;box-shadow:0 4px 20px #00000040;width:fit-content}.ttt-cell{width:80px;height:80px;border-radius:10px;background:#c9f7a5;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;outline:none;border:none;box-shadow:inset 0 2px 4px #0000001a;transition:box-shadow .15s ease,background .15s ease;font-size:0;line-height:0}.ttt-cell:focus-visible{outline:3px solid #000;outline-offset:-3px;z-index:1}@media(hover:none){.ttt-cell:hover,.ttt-cell:focus,.ttt-cell:active{background:#c9f7a5!important}.ttt-x:hover,.ttt-x:focus,.ttt-x:active{background:#1a1a1a!important}.ttt-o:hover,.ttt-o:focus,.ttt-o:active{background:#fff!important}}@media(hover:hover){.ttt-active .ttt-cell:not(.ttt-x):not(.ttt-o):hover{background:#a8e67a;box-shadow:inset 0 2px 4px #00000026,0 0 8px #0000001a}}.ttt-active .ttt-cell:not(.ttt-x):not(.ttt-o):focus-visible{background:#a8e67a;box-shadow:inset 0 2px 4px #00000026,0 0 8px #0000001a}.ttt-waiting .ttt-cell:not(.ttt-x):not(.ttt-o){cursor:not-allowed}.ttt-x{background:#1a1a1a!important;cursor:default;box-shadow:inset 0 -3px 6px #0006,0 2px 4px #0000004d}.ttt-x:after{content:"\d7";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;line-height:1;font-weight:700;color:#fff}.ttt-o{background:#fff!important;cursor:default;box-shadow:inset 0 -3px 6px #0000001a,0 2px 4px #00000026}.ttt-o:after{content:"O";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:42px;line-height:1;font-weight:700;color:#1a1a1a}.ttt-win{animation:tttWinPulse .8s ease-in-out 3;box-shadow:0 0 0 3px #c9f7a5,0 0 16px #c9f7a5cc!important;z-index:1;position:relative}@keyframes tttWinPulse{0%,to{box-shadow:0 0 0 3px #c9f7a5,0 0 16px #c9f7a5cc}50%{box-shadow:0 0 0 5px #c9f7a5,0 0 24px #c9f7a5}}.ttt-place{animation:placePiece .3s cubic-bezier(.25,.1,.25,1.4) both}@keyframes placePiece{0%{transform:scale(0);opacity:0}60%{opacity:1}80%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}@media(min-width:768px){.ttt-cell{width:100px;height:100px}.ttt-x:after{font-size:60px}.ttt-o:after{font-size:52px}.ttt-board{gap:8px;padding:12px}}@media(prefers-reduced-motion:reduce){.ttt-place{animation:none}}