/* ==========================================================
   Roulette: chips sit in the middle of the number they bet on,
   and inside bets (split, corner, street, six-line, trio, first four)
   have hotspots on the lines between numbers, like a real table.
   ========================================================== */

/* chips on a number/outside bet: centered in the cell, amount label under it */
.rl-cell .bet-dot, .rl-spot .bet-dot { inset: 0; }
.rl-cell .bet-dot .chip { --s: 34px; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.rl-cell .bet-dot em { left: 50%; bottom: 1px; top: auto; transform: translateX(-50%); }

/* hotspot on a line or corner */
.rl-spot {
  grid-column: var(--hc0) / var(--hc1); grid-row: var(--hr0) / var(--hr1);
  align-self: center; justify-self: center; position: relative; z-index: 4;
  width: 26px; height: 26px; border-radius: 50%; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.rl-spot::before {
  content: ''; position: absolute; inset: 8px; border-radius: 50%;
  background: rgba(255, 244, 210, .45); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  transition: inset .15s, background .15s;
}
.rl-spot:hover::before, .rl-spot:focus-visible::before { inset: 2px; background: rgba(255, 215, 80, .9); box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255, 215, 80, .9); }
.rl-spot:disabled { cursor: default; }
.rl-spot:disabled::before { opacity: .25; }
.rl-spot.has-bet::before { display: none; }
.rl-spot .bet-dot .chip { --s: 28px; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.rl-spot .bet-dot em { left: 50%; top: 100%; bottom: auto; transform: translate(-50%, 2px); white-space: nowrap; }
.rl-spot.winner { animation: winner .6s ease-in-out 5; }
.rl-spot.winner::before { inset: 0; background: #ffd34d; box-shadow: 0 0 16px #ffd34d; }

/* wide board: streets & six-lines on the bottom edge, first-four at the zero corner */
.rl-spot.street, .rl-spot.line { align-self: end; transform: translateY(50%); }
.rl-spot.four { align-self: end; transform: translateY(50%); }

/* the numbers a hotspot covers light up */
.rl-cell.hl { background: rgba(255, 215, 80, .28) !important; box-shadow: inset 0 0 0 2px #ffd34d; }

/* tall board on phones: columns and rows swap */
@media (max-width: 680px) {
  .rl-spot { grid-column: var(--vc0) / var(--vc1); grid-row: var(--vr0) / var(--vr1); width: 24px; height: 24px; }
  .rl-spot.street, .rl-spot.line, .rl-spot.four { align-self: center; justify-self: start; transform: translateX(-50%); }
  .rl-spot .bet-dot .chip { --s: 24px; }
  .rl-cell .bet-dot .chip { --s: 28px; }
}