.setup { display: grid; gap: 10px; margin-bottom: 14px; }
.opt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lbl { width: 60px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.frame { display: grid; place-items: center; }
.board {
  --cell: min(calc((100vw - 48px) / 7), 78px);
  position: relative;
  width: calc(var(--cell) * 7);
  height: calc(var(--cell) * 6);
  border-radius: 14px;
  background: #1e4fb8;
  box-shadow: 0 0 0 8px #163a8a, 0 22px 40px rgba(0, 0, 0, 0.55), inset 0 0 18px rgba(0, 0, 0, 0.35);
}
/* the blue front plate with round holes, drawn above the discs so discs "slide behind" it */
.holes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 14px;
  background:
    radial-gradient(circle closest-side at center, transparent 0 80%, #1e4fb8 82%) 0 0 / calc(100% / 7) calc(100% / 6);
}
.discs { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 14px; background: #0a1633; }
.disc {
  position: absolute;
  width: calc(100% / 7);
  height: calc(100% / 6);
  left: calc(var(--c) * 100% / 7);
  top: calc(var(--r) * 100% / 6);
  animation: drop calc(0.22s + var(--r) * 0.05s) cubic-bezier(0.55, 0, 0.9, 0.45);
}
/* inset is relative to the disc box itself, so the coloured circle is sized correctly */
.disc::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.3), inset 0 4px 6px rgba(255, 255, 255, 0.35);
}
.disc.p1::before { background: radial-gradient(circle at 35% 30%, #ff8b8b, #e5484d 55%, #b32026); }
.disc.p2::before { background: radial-gradient(circle at 35% 30%, #ffe27a, #f2c230 55%, #c8940a); }
.disc.win::before { animation: glow 0.7s ease-in-out infinite alternate; }
@keyframes drop { from { transform: translateY(calc((var(--r) + 1) * -100%)); } }
@keyframes glow { to { filter: brightness(1.35); box-shadow: 0 0 18px 6px rgba(255, 255, 255, 0.7); } }

.cols { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: repeat(7, 1fr); }
.col { border: 0; background: transparent; cursor: pointer; touch-action: manipulation; position: relative; }
.col:hover:not(:disabled), .col:focus-visible { background: rgba(255, 255, 255, 0.12); outline: none; }
.col:disabled { cursor: not-allowed; }
.col::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -34%;
  width: 52%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 0;
  background: var(--ghost, #e5484d);
  transition: opacity 0.12s;
}
.col:hover:not(:disabled)::after, .col:focus-visible::after { opacity: 0.85; }

.dot { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 50%; vertical-align: -0.1em; margin-right: 6px; }
.dot.p1 { background: #e5484d; }
.dot.p2 { background: #f2c230; }