:root {
  --c4-cell: 64px;
  --c4-gap: 10px;
}

.c4-frame {
  position: relative;
  padding: 1.2em;
  border-radius: var(--radius-lg);
  border: 4px solid var(--brass-700);
  box-shadow: var(--shadow-card-lift);
}

.c4-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, var(--c4-cell));
  grid-template-rows: repeat(6, var(--c4-cell));
  gap: var(--c4-gap);
  background: var(--felt-800);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--shadow-inset-deep);
}

@media (max-width: 640px) {
  :root { --c4-cell: 9vw; --c4-gap: 1.1vw; }
  .c4-frame { padding: 0.6em; }
  .c4-board { padding: 8px; }
  .c4-columns { inset: 0.6em; padding: 8px; }
}

.c4-hole {
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--felt-900), #08130d 80%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6) inset, 0 -1px 0 rgba(255, 255, 255, 0.05) inset;
}

.chip {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: chip-fall 0.55s var(--fall-ease, cubic-bezier(0.5, 0, 0.85, 0.65)) both;
}

@keyframes chip-fall {
  0% { transform: translateY(var(--start-y, -400px)); }
  62% { transform: translateY(8px); }
  78% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

.chip.bordeaux {
  background: radial-gradient(circle at 32% 26%, var(--wine-500), var(--wine-800) 80%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.chip.brass {
  background: radial-gradient(circle at 32% 26%, var(--brass-500), var(--brass-800) 80%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.c4-hole.winning {
  box-shadow: 0 0 0 3px var(--brass-500) inset, 0 0 16px 3px rgba(212, 176, 108, 0.7);
}

.c4-columns {
  position: absolute;
  inset: 1.2em;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(7, var(--c4-cell));
  gap: var(--c4-gap);
  z-index: 2;
}

.c4-column-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}

.c4-column-btn:hover:not(:disabled) {
  background: rgba(212, 176, 108, 0.12);
}

.c4-column-btn:disabled {
  cursor: not-allowed;
}