.connect__board { max-inline-size: 32rem; }
.connect__row { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .2rem; margin-block-end: .2rem; }
.connect__cell { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--colour-control); border-radius: 50%; background: var(--colour-bg); font-weight: 700; font-variant-numeric: tabular-nums; }
.connect__cell[data-player="1"] { background: color-mix(in srgb,var(--colour-accent) 20%,var(--colour-bg)); }
.connect__cell[data-player="2"] { border-width: 3px; }
.connect__columns { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.connect__columns button { min-inline-size: 44px; min-block-size: 44px; }
@media (forced-colors: active) { .connect__cell[data-player="1"] { outline: 2px solid CanvasText; } }
@media print { [data-connect-enhanced] { display: none; } }