/* Connect Four — game-specific */
.diff-seg { display:flex; gap:8px; }
.diff-seg button { flex:1; }

.board-wrap { flex:1; display:flex; align-items:center; justify-content:center; }
.c4-board {
  display:grid; grid-template-columns:repeat(7, 1fr); gap:8px;
  background:var(--purple); border:5px solid var(--stroke); border-radius:20px;
  padding:10px; box-shadow:0 6px 0 var(--stroke); width:100%; max-width:430px;
}
.cell {
  aspect-ratio:1; border-radius:50%; cursor:pointer; position:relative;
  background:var(--wood); border:3px solid var(--stroke);
  box-shadow:inset 0 3px 5px rgba(0,0,0,0.22);
  display:flex; align-items:center; justify-content:center;
}
.disc {
  width:84%; height:84%; border-radius:50%; border:3px solid var(--stroke);
  box-shadow:inset 0 4px 0 rgba(255,255,255,0.4), inset 0 -4px 0 rgba(0,0,0,0.18);
}
.disc.p1 { background:radial-gradient(circle at 50% 35%, #ff9ccd, var(--pink)); }
.disc.p2 { background:radial-gradient(circle at 50% 35%, #ffe98f, var(--yellow)); }
.disc.drop { animation:dropIn 0.42s cubic-bezier(0.5,0,0.7,1); }
@keyframes dropIn { 0% { transform:translateY(-460px); } 70% { transform:translateY(0); } 82% { transform:translateY(-14px); } 100% { transform:translateY(0); } }
.cell.win .disc { animation:winPulse 0.6s ease-in-out infinite alternate; }
@keyframes winPulse { from{ transform:scale(1);} to{ transform:scale(1.12);} }

.c4-board.col-hint .cell:hover { } /* hover handled per-column in JS via .colhover */
.cell.colhover { background:#f3e6c8; }

.status-line { text-align:center; font-weight:700; font-size:17px; margin-top:14px; min-height:24px; }
.turn-chip .v { color:var(--pink); }
.turn-chip.cpu .v { color:var(--yellow); }