/* Roulette: an emerald felt with the wheel at the top right, the layout with
   its numbers, lines and outside bets, the result and history, and six seats
   along the rail. On phones the layout stands upright (0 at the top).
   Loaded after kit.css. */

.kt-rou {
  --felt: #0c5546;
  --felt-hi: #167562;
  --felt-deep: #06302a;
  --line: rgba(244, 235, 214, 0.78);
}

.ro-felt {
  aspect-ratio: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 24%, 300px);
  grid-template-areas:
    "board wheel"
    "board info"
    "results results"
    "msg msg"
    "seats seats";
  align-items: start;
  gap: 12px 22px;
  padding: 18px 22px 28px;
  border-radius: 20px 20px 34px 34px;
}

.kt-rou .table-rim,
.kt-rou .table-rim::before {
  border-radius: 30px 30px 40px 40px;
}

.ro-board-wrap {
  grid-area: board;
  align-self: center;
  padding: 4px 0 0;
}

.ro-wheel-wrap {
  grid-area: wheel;
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 300px;
}

.ro-wheel {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55));
}

.ro-info {
  grid-area: info;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.ro-result {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 70px;
  padding: 6px 10px 8px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 106, 0.4);
  background: rgba(0, 0, 0, 0.3);
  font-size: 11px;
  color: var(--muted);
}

.ro-result b {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 6px;
  border-radius: 50%;
  font-family: "Bodoni Moda", serif;
  font-size: 24px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.ro-result b[data-tone="red"] { background: #b3122e; }
.ro-result b[data-tone="black"] { background: #18151a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }
.ro-result b[data-tone="green"] { background: #11784b; }

.ro-history .hs-head {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--brass-hi);
}

.ro-hist {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ro-hist li {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.ro-hist li:first-child {
  box-shadow: 0 0 0 2px var(--gold);
}

.ro-hist li[data-tone="red"] { background: #b3122e; }
.ro-hist li[data-tone="black"] { background: #18151a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.ro-hist li[data-tone="green"] { background: #11784b; }

.ro-hist .hs-empty {
  background: none;
  color: var(--muted);
  font-weight: 400;
}

/* ---------- layout ---------- */

.ro-board {
  position: relative;
  width: 100%;
  aspect-ratio: 14 / 5;
  border: 2px solid var(--line);
  border-radius: 4px;
}

.ro-board[data-orient="v"] {
  aspect-ratio: 5 / 14;
}

.ro-cell {
  position: absolute;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ivory);
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.ro-board.closed .ro-cell,
.ro-board.closed .ro-hot {
  cursor: default;
}

.ro-cell:hover {
  background: rgba(246, 215, 125, 0.1);
}

.ro-n {
  display: grid;
  place-items: center;
  width: 74%;
  max-width: 44px;
  aspect-ratio: 1 / 1.15;
  border-radius: 40%;
  font-family: "Bodoni Moda", serif;
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 18px);
  color: #fff;
}

.ro-straight[data-tone="red"] .ro-n { background: #b3122e; }
.ro-straight[data-tone="black"] .ro-n { background: #18151a; }
.ro-straight[data-tone="green"] { background: rgba(17, 120, 75, 0.55); }
.ro-straight[data-tone="green"] .ro-n { background: transparent; font-size: clamp(14px, 1.7vw, 22px); }

.ro-o {
  font-family: "Bodoni Moda", serif;
  font-weight: 700;
  font-size: clamp(11px, 1.15vw, 15px);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.1;
}

.ro-dia {
  width: 34%;
  max-width: 40px;
  aspect-ratio: 1.6 / 1;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.ro-red .ro-dia { background: #c3172f; }
.ro-black .ro-dia { background: #111; box-shadow: inset 0 0 0 2px #fff; }

.ro-cell.win {
  background: rgba(246, 215, 125, 0.35);
  box-shadow: inset 0 0 0 3px var(--gold), 0 0 14px rgba(246, 215, 125, 0.6);
  z-index: 1;
}

.ro-cell.hit {
  background: rgba(246, 215, 125, 0.16);
}

.ro-cell.has-bet {
  background: rgba(246, 215, 125, 0.08);
}

/* betting points on the lines and corners */
.ro-hot {
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.ro-hot:hover,
.ro-hot:focus-visible {
  background: rgba(246, 215, 125, 0.45);
  box-shadow: 0 0 0 2px rgba(246, 215, 125, 0.8);
  outline: none;
}

.ro-chips {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.ro-chip {
  position: absolute;
  min-width: 22px;
  height: 22px;
  font-size: 9px;
  transform: translate(-50%, -50%) translate(calc(var(--k) * 3px), calc(var(--k) * -3px));
  transition: opacity 0.4s ease;
}

.ro-chip.mine {
  z-index: 2;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 0 1.5px #fff;
}

.ro-chip.lost {
  opacity: 0.2;
}

.ro-chip.won {
  animation: ro-won 0.6s ease-in-out 3 alternate;
}

@keyframes ro-won {
  to { box-shadow: 0 0 0 2px var(--gold), 0 0 12px var(--gold); }
}

/* the marker the dealer puts on the winning number */
.ro-dolly {
  position: absolute;
  z-index: 5;
  width: 16px;
  height: 24px;
  transform: translate(-50%, -100%);
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #fff, #d9d2c3 70%, #a99c80);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 3px 0 var(--gold);
  pointer-events: none;
  animation: ro-dolly 0.4s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.ro-dolly[hidden] {
  display: none;
}

@keyframes ro-dolly {
  from { transform: translate(-50%, -160%); opacity: 0; }
}

.ro-felt .results {
  grid-area: results;
  margin: 0;
}

.ro-felt .felt-msg {
  grid-area: msg;
  justify-self: center;
}

.ro-felt .seats {
  grid-area: seats;
}

@media (max-width: 760px) {
  .ro-felt {
    grid-template-columns: minmax(0, 1fr) 48%;
    grid-template-areas:
      "info wheel"
      "board board"
      "results results"
      "msg msg"
      "seats seats";
    gap: 10px;
    padding: 12px 10px 26px;
  }

  .ro-info {
    grid-template-columns: 1fr;
  }

  .ro-result {
    justify-self: start;
  }

  .ro-hist li {
    min-width: 22px;
    height: 20px;
    font-size: 10.5px;
  }

  .ro-hist li:nth-child(n + 13) {
    display: none;
  }

  .ro-board-wrap {
    width: min(100%, 360px);
    justify-self: center;
  }

  .ro-n {
    font-size: 15px;
    width: 60%;
    max-width: 40px;
    aspect-ratio: 1.3 / 1;
  }

  .ro-o {
    font-size: 12px;
  }

  .ro-dia {
    width: 46%;
    aspect-ratio: 1 / 1.4;
  }

  .ro-hot {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ro-chip.won,
  .ro-dolly {
    animation: none;
  }
}

/* ---------- spin clip popup ---------- */

.ro-spinpop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(10, 30, 26, 0.55), rgba(5, 1, 2, 0.8));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: opacity 0.25s;
}

.ro-spinpop[hidden] {
  display: none;
}

.ro-spinpop.out {
  opacity: 0;
}

body.sp-open {
  overflow: hidden;
}

.sp-panel {
  width: min(86vw, 360px);
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 2px solid var(--brass);
  background: linear-gradient(180deg, #24120b, #120806);
  box-shadow: 0 0 0 6px #24120b, 0 0 0 7px rgba(212, 175, 106, 0.55), 0 30px 60px rgba(0, 0, 0, 0.7);
  text-align: center;
  animation: sp-rise 0.3s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

@keyframes sp-rise {
  from { transform: translateY(16px) scale(0.98); opacity: 0; }
}

.sp-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--brass-hi);
}

.sp-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(90% 80% at 50% 60%, var(--felt-hi), var(--felt) 60%, var(--felt-deep));
  box-shadow: inset 0 0 0 1px rgba(212, 175, 106, 0.4);
}

.sp-gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}