/* Single-zero roulette. Every class starts with bq-rt-. */

.bq-rt-wrap {
  container-type: inline-size;
  width: min(1200px, 100%);
}

.bq-rt {
  --rt-felt: #0e5048;
  --rt-felt-2: #052520;
  --rt-brass: linear-gradient(135deg, #f8dc8c 0%, #b07a2c 30%, #ffe8a6 50%, #8c5a1c 76%, #e2b75e 100%);
  --rt-line: rgba(255, 220, 150, 0.55);
  --rt-wheel: clamp(250px, 33cqi, 390px);
  --rt-cell-h: clamp(44px, 5.4cqi, 58px);
  --rt-chip: clamp(22px, 2.6cqi, 28px);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3cqi, 36px);
  width: 100%;
  padding: clamp(14px, 2.4cqi, 28px);
  border: clamp(6px, 1cqi, 10px) solid transparent;
  border-radius: clamp(22px, 3cqi, 34px);
  background:
    radial-gradient(50% 60% at 22% 40%, rgba(255, 210, 140, 0.2), transparent 70%) padding-box,
    radial-gradient(120% 100% at 50% 30%, transparent 55%, rgba(0, 0, 0, 0.45)) padding-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E") padding-box,
    radial-gradient(110% 100% at 40% 30%, var(--rt-felt), var(--rt-felt-2)) padding-box,
    var(--rt-brass) border-box;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 70px rgba(0, 0, 0, 0.4);
  color: var(--bq-ink);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.bq-rt-cap {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236, 247, 243, 0.55);
  white-space: nowrap;
}

/* ---- wheel */
.bq-rt-side {
  display: grid;
  justify-items: center;
  gap: var(--bq-s4);
}

.bq-rt-wheel {
  position: relative;
  width: var(--rt-wheel);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.bq-rt-wheel svg { width: 100%; height: 100%; overflow: visible; }

.bq-rt-bowl { position: absolute; inset: 0; }
.bq-rt-bowl__rim { fill: #3b2111; stroke: #1c0e06; stroke-width: 1; }
.bq-rt-bowl__brass { fill: none; stroke: #d4a64c; stroke-width: 2.4; }
.bq-rt-bowl__track { fill: #8a5a33; }
.bq-rt-bowl__lip { fill: #2a170b; stroke: rgba(255, 220, 150, 0.4); stroke-width: 0.8; }
.bq-rt-bowl__stud { fill: #f1cf7c; stroke: #8a6420; stroke-width: 0.5; }

.bq-rt-wheel::before {
  /* polished highlight across the track */
  content: "";
  position: absolute;
  inset: 4%;
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(from 200deg, rgba(255, 240, 210, 0.22), transparent 18%, transparent 50%, rgba(255, 240, 210, 0.12) 62%, transparent 80%);
  pointer-events: none;
}

.bq-rt-rotor,
.bq-rt-orbit {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.bq-rt-rotor { z-index: 2; }
.bq-rt-orbit { z-index: 3; pointer-events: none; }

.bq-rt-rotor__num {
  fill: #fff6e6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 8.6px;
  font-weight: 700;
}

.bq-rt-rotor__fret { stroke: #e8c46f; stroke-width: 0.7; }
.bq-rt-rotor__ring { fill: none; stroke: #e8c46f; stroke-width: 0.8; }
.bq-rt-rotor__cone { fill: #6b3d1e; stroke: #e8c46f; stroke-width: 1.4; }
.bq-rt-rotor__cone2 { fill: #8f5a2e; stroke: rgba(0, 0, 0, 0.35); stroke-width: 0.6; }
.bq-rt-rotor__spoke { fill: #e6bd62; stroke: #8a6420; stroke-width: 0.5; }
.bq-rt-rotor__knob { fill: #f4d58a; stroke: #8a6420; stroke-width: 0.6; }
.bq-rt-rotor__hub { fill: #d9ac52; stroke: #7a561a; stroke-width: 0.8; }
.bq-rt-rotor__cap { fill: #fff0c4; }

.bq-rt-ball {
  position: absolute;
  left: 48%;
  top: 6%;
  width: 4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #e9edf0 45%, #9aa4ab 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.bq-rt-medal {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 34%;
  aspect-ratio: 1;
  margin: -17% 0 0 -17%;
  border-radius: 50%;
  border: 3px solid #f1cf7c;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35), 0 0 40px rgba(255, 207, 90, 0.5);
  animation: bq-rt-pop 300ms var(--bq-ease-out);
  align-content: center;
  gap: 0;
}

.bq-rt-medal--red { background: radial-gradient(circle at 40% 30%, #e0475a, #9b1d2e); }
.bq-rt-medal--black { background: radial-gradient(circle at 40% 30%, #3a464e, #0f1518); }
.bq-rt-medal--green { background: radial-gradient(circle at 40% 30%, #2fb879, #136a45); }

.bq-rt-medal__n {
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--rt-wheel) * 0.12);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.bq-rt-medal__c {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

@keyframes bq-rt-pop {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: none; }
}

/* recent numbers */
.bq-rt-info { width: var(--rt-wheel); }
.bq-rt-recent { display: grid; gap: var(--bq-s2); }

.bq-rt-recent__list {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  min-height: 30px;
}

.bq-rt-recent__list:empty::before {
  content: attr(data-empty);
  font-size: 13px;
  color: var(--bq-faint);
  align-self: center;
}

.bq-rt-pill {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 4px;
  border-radius: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255, 220, 150, 0.35);
  font-variant-numeric: tabular-nums;
}

.bq-rt-pill:first-child { box-shadow: 0 0 0 2px var(--bq-gold), 0 0 14px rgba(255, 207, 90, 0.45); }
.bq-rt-pill--red { background: #b8283a; }
.bq-rt-pill--black { background: #151c21; }
.bq-rt-pill--green { background: #1c8f5e; }

/* ---- table */
.bq-rt-tableside { display: grid; gap: var(--bq-s3); min-width: 0; }

.bq-rt-tablehead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bq-s4);
}

.bq-rt-total { display: grid; gap: 0; }

.bq-rt-total__v {
  font-family: var(--bq-font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--bq-gold);
  font-variant-numeric: tabular-nums;
}

.bq-rt-chipnow {
  display: flex;
  align-items: center;
  gap: var(--bq-s2);
  padding: 6px 14px 6px 6px;
  border-radius: 99px;
  background: rgba(3, 14, 12, 0.5);
  border: 1px solid rgba(255, 220, 150, 0.25);
  font-weight: 800;
  font-size: 14px;
}

.bq-rt-chipnow .bq-rt-chip { position: static; width: 30px; height: 30px; }

.bq-rt-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px;
}

.bq-rt-table {
  display: grid;
  grid-template-columns: 1.15fr repeat(12, minmax(36px, 1fr)) 1.15fr;
  grid-template-rows: repeat(3, var(--rt-cell-h)) calc(var(--rt-cell-h) * 0.82) calc(var(--rt-cell-h) * 0.82);
  min-width: 560px;
  border: 2px solid var(--rt-line);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

.bq-rt-cell {
  position: relative;
  grid-column: var(--hc) / span var(--hcs);
  grid-row: var(--hr) / span var(--hrs);
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--rt-line);
  border-bottom: 1px solid var(--rt-line);
  background: transparent;
  color: #fff6e6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
  transition: background-color var(--bq-fast) var(--bq-ease-out), opacity var(--bq-med) var(--bq-ease-out);
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.bq-rt-cell:hover,
.bq-rt-cell.is-cover { background-color: rgba(255, 220, 150, 0.12); }
.bq-rt-cell:focus-visible { outline: 2px solid var(--bq-gold); outline-offset: -3px; z-index: 2; }
.bq-rt.is-spinning .bq-rt-cell { cursor: default; }

.bq-rt-cell--straight::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 4px rgba(0, 0, 0, 0.35);
  transition: transform var(--bq-fast) var(--bq-ease-out), box-shadow var(--bq-med) var(--bq-ease-out);
}

.bq-rt-cell.is-red::before { background: linear-gradient(180deg, #cf3a4c, #a01f30); }
.bq-rt-cell.is-black::before { background: linear-gradient(180deg, #2a343b, #10171b); }
.bq-rt-cell.is-green::before { background: linear-gradient(180deg, #24a56c, #12704a); border-radius: 50% / 22%; }
.bq-rt-cell--straight:hover::before { transform: scale(1.04); }

.bq-rt-cell__txt { position: relative; z-index: 1; }

.bq-rt-cell--column,
.bq-rt-cell--dozen,
.bq-rt-cell--even {
  font-family: var(--bq-font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 238, 205, 0.9);
}

.bq-rt-cell--column { font-size: 12px; }

.bq-rt-diamond {
  width: 26px;
  height: 26px;
  transform: rotate(45deg) scaleX(0.75);
  border-radius: 4px;
  box-shadow: 0 0 0 1.5px rgba(255, 238, 205, 0.7);
}

.bq-rt-diamond--red { background: #c4303d; }
.bq-rt-diamond--black { background: #151c21; }

/* chips on the table: plain discs, the amount as its own label */
.bq-rt-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: var(--rt-chip);
  height: var(--rt-chip);
  margin: calc(var(--rt-chip) / -2) 0 0 calc(var(--rt-chip) / -2);
  pointer-events: none;
}

.bq-rt-chip {
  --tone: #2fbf8f;
  --tone-2: #23a27a;
  position: absolute;
  left: 0;
  top: calc(var(--n, 0) * -3px);
  width: var(--rt-chip);
  height: var(--rt-chip);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--tone-2) 0 36%, transparent 37%),
    radial-gradient(circle, transparent 0 44%, rgba(255, 255, 255, 0.85) 45% 49%, transparent 50%),
    repeating-conic-gradient(rgba(255, 255, 255, 0.92) 0 11deg, transparent 11deg 45deg),
    var(--tone);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--tone) 55%, black), 0 4px 8px rgba(0, 0, 0, 0.45);
}

.bq-rt-chip--mint { --tone: #2fbf8f; --tone-2: #23a27a; }
.bq-rt-chip--sky { --tone: #3c9fe0; --tone-2: #2c85c2; }
.bq-rt-chip--coral { --tone: #f2674a; --tone-2: #d4533a; }
.bq-rt-chip--plum { --tone: #8e63e0; --tone-2: #7650c4; }
.bq-rt-chip--gold { --tone: #e8b23a; --tone-2: #c9952a; }
.bq-rt-chip--rose { --tone: #e2557f; --tone-2: #c24268; }
.bq-rt-chip--ink { --tone: #2a3a44; --tone-2: #1b272e; }

.bq-rt-stack__label {
  position: absolute;
  left: 50%;
  top: calc(100% - 4px);
  transform: translateX(-50%);
  padding: 0 5px;
  border-radius: 99px;
  background: rgba(3, 12, 10, 0.88);
  border: 1px solid rgba(255, 220, 150, 0.4);
  color: #fff;
  font-family: var(--bq-font-body);
  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* results on the table */
.bq-rt.is-settled .bq-rt-cell.is-lose .bq-rt-stack { opacity: 0.4; transition: opacity var(--bq-med) var(--bq-ease-out); }
.bq-rt.is-settled .bq-rt-cell.is-win .bq-rt-chip { filter: drop-shadow(0 0 6px rgba(255, 207, 90, 0.95)); }
.bq-rt.is-settled .bq-rt-cell.is-win { background-color: rgba(255, 207, 90, 0.16); }

.bq-rt-cell.is-hit::before {
  box-shadow: 0 0 0 3px var(--bq-gold), 0 0 22px rgba(255, 207, 90, 0.8);
  animation: bq-rt-glow 900ms var(--bq-ease-out) 2;
}

@keyframes bq-rt-glow {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.08); }
}

.bq-rt-hint {
  margin: 0;
  font-size: 12px;
  color: var(--bq-faint);
  text-align: center;
}

/* ---- medium: wheel above the wide table */
@container (max-width: 900px) {
  .bq-rt { grid-template-columns: minmax(0, 1fr); --rt-wheel: clamp(220px, 46cqi, 320px); }
  .bq-rt-side { grid-template-columns: auto auto; align-items: center; justify-content: center; gap: var(--bq-s5); }
  .bq-rt-info { width: auto; max-width: 220px; }
  .bq-rt-recent__list { flex-wrap: wrap; }
}

/* ---- phones: tall table, zero on top */
@container (max-width: 600px) {
  .bq-rt {
    --rt-wheel: clamp(150px, 46cqi, 210px);
    --rt-cell-h: 32px;
    --rt-chip: 22px;
    gap: var(--bq-s3);
  }
  .bq-rt-side { gap: var(--bq-s3); }
  .bq-rt-info { min-width: 0; max-width: none; }
  .bq-rt-side { grid-template-columns: auto minmax(0, 1fr); }
  .bq-rt-recent .bq-rt-cap { white-space: normal; }
  .bq-rt-recent__list { gap: 4px; }
  .bq-rt-pill { min-width: 26px; height: 26px; font-size: 12px; border-radius: 7px; }
  .bq-rt-pill:nth-child(n + 9) { display: none; }
  .bq-rt-medal__c { font-size: 9px; }
  .bq-rt-table {
    grid-template-columns: 0.95fr 0.95fr repeat(3, 1fr);
    grid-template-rows: 40px repeat(12, var(--rt-cell-h)) 38px;
    min-width: 0;
  }
  .bq-rt-cell {
    grid-column: var(--vc) / span var(--vcs);
    grid-row: var(--vr) / span var(--vrs);
    font-size: 14px;
  }
  .bq-rt-cell--straight::before { inset: 3px; border-radius: 6px; }
  .bq-rt-cell.is-green::before { border-radius: 40% / 50%; }
  .bq-rt-cell--even,
  .bq-rt-cell--dozen { font-size: 12px; }
  .bq-rt-cell--dozen .bq-rt-cell__txt { writing-mode: vertical-rl; transform: rotate(180deg); }
  .bq-rt-diamond { width: 20px; height: 20px; }
  .bq-rt-total__v { font-size: 20px; }
  .bq-rt-hint { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .bq-rt-medal,
  .bq-rt-cell.is-hit::before { animation: none; }
}