.c4-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.c4-row {
  display: grid;
  grid-template-columns: repeat(7, 50px);
  gap: 6px;
  padding: 0 10px;
}
.col-btn {
  height: 24px;
  background: rgba(19, 103, 229, 0.15);
  border: 1px dashed rgba(19, 103, 229, 0.4);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  display: grid; place-items: center;
  transition: background 0.15s;
}
.col-btn:hover:not(:disabled) { background: rgba(19, 103, 229, 0.3); color: white; }
.col-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.c4-board {
  display: grid;
  grid-template-columns: repeat(7, 50px);
  grid-template-rows: repeat(6, 50px);
  gap: 6px;
  padding: 10px;
  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.c4-cell {
  width: 50px; height: 50px;
  background: radial-gradient(circle at center, #050514 60%, #0a0a25 100%);
  border-radius: 50%;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
}
.c4-piece {
  position: absolute; left: 4px; right: 4px;
  height: calc(100% - 8px);
  border-radius: 50%;
  top: -300px;
  animation: drop 0.5s cubic-bezier(.5,.1,.7,1) forwards;
}
.c4-piece.red    { background: radial-gradient(circle at 35% 35%, #fca5a5, #dc2626 60%, #7f1d1d); box-shadow: 0 0 14px rgba(239, 68, 68, 0.4); }
.c4-piece.yellow { background: radial-gradient(circle at 35% 35%, #fde68a, #f59e0b 60%, #78350f); box-shadow: 0 0 14px rgba(245, 158, 11, 0.4); }
.c4-piece.win { box-shadow: 0 0 18px var(--success); animation: drop 0.5s cubic-bezier(.5,.1,.7,1) forwards, winglow 1.2s ease-in-out infinite alternate; }
@keyframes drop { to { top: 4px; } }
@keyframes winglow { from { filter: brightness(1); } to { filter: brightness(1.4); } }

@media (max-width: 540px) {
  .c4-row, .c4-board { grid-template-columns: repeat(7, 38px); }
  .c4-board { grid-template-rows: repeat(6, 38px); gap: 4px; padding: 6px; }
  .c4-cell { width: 38px; height: 38px; }
}