.ttt{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,1.6vw,10px);
  width:min(100%,520px);aspect-ratio:1;margin:0 auto;padding:clamp(12px,3vw,24px);
}
.ttt button{
  display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:18%;
  background:#1E2146;border:3px solid #3A3F7A;color:#FFFFFF;cursor:pointer;
  transition:background .12s ease;
}
.ttt button:hover:not([aria-disabled="true"]){background:#2A2E62}
.ttt button[aria-disabled="true"]{cursor:default}
.ttt button:focus-visible{outline:3px solid #F6C333;outline-offset:2px}
.ttt button.x{color:#FF5A4E}
.ttt button.o{color:#F6C333}
.ttt button.win{background:#1F7A3B;border-color:#7BE39B}
.ttt svg{width:100%;height:100%}
.ttt button.new svg{animation:ttt-pop .2s steps(3,end)}
@keyframes ttt-pop{from{transform:scale(.35)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.ttt button.new svg{animation:none}}