/* Connect Four uses the shared v7 shell, invitation and motion tokens. */
:root:not([data-game="gomoku"]) .only-gomoku,
:root:not([data-game="connect-four"]) .only-connect-four { display: none !important; }
:root[data-game="connect-four"] .app { --col: min(560px, 100%); }
.cf-wrap { --cf-grid-inset: 2%; aspect-ratio: 7 / 6; background: linear-gradient(145deg, #416e81, #2f5366); }
.cf-wrap::before, .cf-wrap::after { display: none; }
.cf-grid { position: absolute; inset: var(--cf-grid-inset); display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); pointer-events: none; }
.cf-cell { display: grid; place-items: center; position: relative; margin: 8%; border-radius: 50%; background: var(--paper); box-shadow: inset 0 3px 5px #142e3e50; }
.cf-disc { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px #ffffff20, inset 0 -3px 4px #00000025, 0 1px 2px #00000020; }
.cf-disc.red, .cf-disc-red { background: radial-gradient(circle at 35% 28%, #e8735b, #bb3e2e 70%); }
.cf-disc.yellow, .cf-disc-yellow { background: radial-gradient(circle at 35% 28%, #ffe694, #e1b237 70%); }
.cf-cell.is-last .cf-disc::after { content: ''; position: absolute; inset: 36%; border-radius: 50%; background: #232925; box-shadow: 0 0 0 2px #fff9; }
.cf-cell.is-win .cf-disc { outline: 3px solid var(--invite-surface); outline-offset: -5px; }
.cf-disc.is-preview { opacity: .5; outline: 2px dashed var(--accent); outline-offset: -4px; }
.cf-columns { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.cf-column { position: static; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.cf-column:disabled { cursor: default; }
.cf-column:not(:disabled):hover, .cf-column.is-preview { background: #ffffff0e; }
.cf-column:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; background: #ffffff14; }
/* Labels share the inset hole grid; full-width buttons retain 44px phone targets. */
.cf-column-number { position: absolute; top: 2px; left: calc(var(--cf-grid-inset) + (100% - 2 * var(--cf-grid-inset)) * (var(--cf-column) + .5) / 7); transform: translateX(-50%); color: #fff; font: 600 11px/1 var(--sans); pointer-events: none; }
.cf-disc-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px #00000020; }
.player-chip.is-turn .cf-disc-icon { box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--ink); }
.result-disc { width: 40px; height: 40px; }
.cf-disc-draw { background: linear-gradient(135deg, #bb3e2e 50%, #e1b237 50%); }
:root[data-game="connect-four"] .side-pip[data-color="red"] { background: #bb3e2e; box-shadow: inset 0 0 0 1px #00000020; }
.side-pip[data-color="yellow"] { background: #e1b237; box-shadow: inset 0 0 0 1px #00000020; }
@media (max-width: 520px) {
  :root[data-game="connect-four"] .menu-button { margin-right: 0; }
  :root[data-game="connect-four"] .board-area { --invite-top: 40%; --invite-bottom: auto; --invite-reserve: 240px; }
}
/* Keep each column at least 44px wide at the minimum supported 320px. */
@media (max-width: 350px) { :root[data-game="connect-four"] .app { padding-left: 6px; padding-right: 6px; } }