.ttt-board {
  width: min(520px, 100%);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px;
  aspect-ratio: 1; padding: 10px; border-radius: 0;
  background: #161b3d; border: 1px solid var(--border);
  box-shadow: 0 30px 60px -30px #000, inset 0 1px 0 #ffffff0d;
}
.ttt-board .cell {
  box-shadow: inset -4px -4px 0 #0005, inset 4px 4px 0 #ffffff12;
  border: 0; border-radius: 0; padding: 16%; min-width: 0; min-height: 0;
  background: #20275a; display: grid; place-items: center;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.ttt-board button.cell { cursor: pointer; }
.ttt-board button.cell[aria-disabled="true"] { cursor: default; }
.ttt-board.my-turn .cell:not([aria-disabled="true"]):hover { filter: brightness(1.3); box-shadow: inset 0 0 0 2px #7c5cff88; }
.ttt-board.my-turn .cell:not([aria-disabled="true"]):active { transform: scale(.97); }
.ttt-board .cell svg { display: block; width: 100%; height: 100%; animation: pop .18s steps(3); }
.ttt-board .cell.last { box-shadow: inset 0 0 0 2px #ffffff26; }
.ttt-board .cell.win { background: #173d33 !important; box-shadow: inset 0 0 0 2px var(--good), 0 0 22px -4px var(--good); }
@keyframes pop { from { transform: scale(.5); opacity: 0; } }

.ttt-board.mini-board { gap: 4px; padding: 4px; border-radius: 0; box-shadow: none; }
.ttt-board.mini-board .cell { border-radius: 0; padding: 14%; }
.ttt-board.mini-board .cell svg { animation: none; }

.ttt-board.theme-wood_board { background: linear-gradient(135deg, #6b4423, #3e2512); border-color: #7c5130; }
.ttt-board.theme-wood_board .cell { background: linear-gradient(135deg, #c8945a, #a87440); }
.ttt-board.theme-space_board { background: radial-gradient(circle at 30% 20%, #3b2a7a, #0b0b24 70%); border-color: #4c3a9a; }
.ttt-board.theme-space_board .cell {
  background: radial-gradient(1px 1px at 20% 30%, #fff9, transparent), radial-gradient(1px 1px at 70% 60%, #fff7, transparent),
              radial-gradient(1px 1px at 40% 80%, #fff6, transparent), #14123a;
}
.ttt-board.theme-black_marble { background: linear-gradient(135deg, #b8860b, #f5c96a 50%, #8a6408); border-color: #f5c96a; }
.ttt-board.theme-black_marble .cell {
  background:
    linear-gradient(115deg, transparent 40%, #ffffff14 42%, transparent 44%),
    linear-gradient(35deg, transparent 60%, #ffffff10 61%, transparent 63%),
    radial-gradient(circle at 30% 30%, #2a2a2a, #050505);
}

.sym-neon { filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor); }
.sym-flame { filter: drop-shadow(0 0 7px #ff6a00); }
.sym-royal { filter: drop-shadow(0 0 7px #f5c96a99); }