#board { width: min(92vw, 420px); aspect-ratio: 1/1; margin: 1rem auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; padding: 8px; background: #000; border-radius: 14px; box-shadow: 0 20px 60px -20px #000; }
.sq { background: #ffffff0a; border-radius: 10px; display: grid; place-items: center; font-size: clamp(3rem, 12vw, 5rem); font-weight: 800; cursor: pointer; transition: background .15s; user-select: none; }
.sq:hover:not(.filled):not(.disabled) { background: #ffffff16; }
.sq.filled { cursor: default; }
.sq.disabled { cursor: not-allowed; }
.sq.x { color: var(--p1); }
.sq.o { color: var(--p2); }
.sq.win { background: linear-gradient(135deg, var(--p1)44, var(--p2)44); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.3); } }