/* Connect Four. --x (red) moves first, --o (blue) second. */
.c4 { --c4-gap: 6px; width: min(26rem, 100%); }

/* The disc you hold above the board while it's your turn. */
.c4-hand { display: flex; justify-content: center; margin-bottom: 8px; }
.c4-hand .c4-disc { width: calc((100% - 6 * var(--c4-gap) - 2 * 10px) / 7); min-width: 2.2rem; }
.c4-draggable { cursor: grab; touch-action: none; box-shadow: var(--shadow); }
.c4-draggable:active { cursor: grabbing; }
.c4-resting { opacity: 0.3; }
.c4-resting.c4-gone { visibility: hidden; }

.c4-board {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--c4-gap);
  padding: 10px; background: var(--o); border-radius: var(--radius); box-shadow: var(--shadow);
}

/* A column is one target; a button when you may drop, a div otherwise. */
.c4-col {
  display: flex; flex-direction: column; gap: var(--c4-gap);
  margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  border-radius: 999px;
}
.c4-col.open { cursor: pointer; }
.c4-col.open:hover, .c4-col.open:focus-visible, .c4-col.gn-drop-ready:hover { background: rgb(255 255 255 / 0.18); outline: none; }
.c4-col.gn-drop-ready { background: rgb(255 255 255 / 0.1); }
.c4-col.gn-drop-over { background: rgb(255 255 255 / 0.3); }

.c4-disc {
  display: block; aspect-ratio: 1; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.3);
}
.c4-disc.red { background: var(--x); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.2); }
.c4-disc.blue { background: var(--o); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.2); }
/* On the blue board a blue disc needs an edge to be told from the frame. */
.c4-board .c4-disc.blue { background: #3d86c6; border: 2px solid var(--paper); }
.c4-hand .c4-disc.blue { background: #3d86c6; }
.c4-disc.last { outline: 3px solid var(--accent); outline-offset: 1px; }
/* A disc on its way down (Public/js/glide.js) leaves its hole showing, empty,
   until it lands in it. */
.c4-board .c4-disc.gn-glide-away {
  visibility: visible !important; outline: none;
  background: var(--paper); border: 0; box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.3);
}
/* The winning four: lit up and pulsing; reduced motion gets the ring only. */
.c4-disc.win { outline: 4px solid #f2c94c; outline-offset: 1px; animation: c4-win 1.1s ease-in-out 6 alternate; }
@keyframes c4-win { from { filter: brightness(1); } to { filter: brightness(1.35); } }
@media (prefers-reduced-motion: reduce) { .c4-disc.win { animation: none; } }