.roulette {
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) minmax(520px, 1.35fr);
  gap: 18px;
  align-items: start;
}

.roulette__stage,
.roulette__board {
  border: 1px solid rgba(255, 190, 0, 0.18);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(24, 23, 18, 0.97), rgba(12, 12, 14, 0.98));
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.025);
}

.roulette__stage {
  padding: 18px;
}
.roulette__board {
  padding: 16px;
}

.roulette__guide {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid #303037;
  border-radius: 9px;
  background: #151519;
  color: #aaaab2;
  font-size: 11px;
  font-weight: 700;
}
.roulette__guide span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.roulette__guide span b {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #ffd400;
  color: #111;
  font-size: 10px;
}
.roulette__guide i {
  color: #5f5f67;
  font-style: normal;
}
.roulette__guide strong {
  margin-left: auto;
  color: #54d995;
  font-size: 10px;
  text-align: right;
}
.roulette[data-phase='spinning'] .roulette__guide strong,
.roulette[data-phase='settling'] .roulette__guide strong {
  color: #ff9b56;
}

.roulette__roundline,
.roulette__subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.roulette__live {
  color: #b7b7bd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.roulette__live i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #32d886;
  box-shadow: 0 0 12px #32d886;
}

.roulette__clock {
  color: #ffd400;
  font-size: 20px;
}
.roulette.is-locked .roulette__clock {
  color: #ff7b43;
}

.roulette__wheelwrap {
  position: relative;
  width: min(390px, 86vw);
  aspect-ratio: 1;
  margin: 22px auto 16px;
  display: grid;
  place-items: center;
}

.roulette__wheel {
  position: absolute;
  inset: 0;
  border: 12px solid #29271f;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px #80630a,
    0 0 0 8px #111114,
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 0 0 40px #000;
  will-change: transform;
}

.roulette__wheel::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #373226, #121214 58%, #050506);
  border: 2px solid #9d790c;
  box-shadow:
    0 0 0 6px #111114,
    inset 0 0 28px #000;
}

.roulette__wheel > span {
  --pocket-angle: 0deg;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 50%;
  margin: -50% 0 0 -12px;
  padding-top: 8px;
  box-sizing: border-box;
  transform-origin: 50% 100%;
  transform: rotate(var(--pocket-angle));
  color: #fff;
  font:
    700 10px/1 'JetBrains Mono',
    monospace;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

.roulette__pointer {
  position: absolute;
  z-index: 5;
  top: -7px;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 30px solid #ffd400;
  filter: drop-shadow(0 3px 5px #000);
}

.roulette__hub {
  position: relative;
  z-index: 3;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: radial-gradient(circle at 42% 30%, #29261d, #0b0b0d 70%);
  border: 1px solid #8b6b0c;
  box-shadow:
    inset 0 0 22px #000,
    0 5px 18px rgba(0, 0, 0, 0.55);
}

.roulette__hub b {
  color: #ffd400;
  font:
    800 38px/1.05 'Archivo',
    sans-serif;
}

.roulette__history {
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}
.roulette__past {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font:
    700 11px/1 'JetBrains Mono',
    monospace;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.roulette__past--red {
  background: #a92227;
}
.roulette__past--black {
  background: #222329;
}
.roulette__past--green {
  background: #117d50;
}

.roulette__numbers {
  display: grid;
  grid-template-columns: repeat(12, minmax(36px, 1fr));
  gap: 5px;
}

.roulette__number,
.roulette__outside button {
  position: relative;
  /* A column, so the label and the stake are stacked by the layout rather than by one of them
     being lifted out of flow and told where to sit. The first version absolutely positioned the
     chip over a centred label, and on a narrow spot the two simply landed on each other. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  padding: 5px 4px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  color: #f5f5f7;
  font:
    750 14px/1 'Archivo',
    sans-serif;
  cursor: pointer;
  transition:
    border-color 0.16s,
    transform 0.16s,
    box-shadow 0.16s;
}

/* The label. `min-width: 0` is the whole point: a flex child will not shrink below its content
   without it, so "Black" would force the spot wider rather than ellipsing inside it. */
.roulette__face {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roulette__number:hover,
.roulette__outside button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 212, 0, 0.55);
}
.roulette__number:disabled,
.roulette__outside button:disabled {
  transform: none;
  filter: saturate(0.45);
}
.roulette__number--red {
  background: linear-gradient(145deg, #8f1d23, #561318);
}
.roulette__number--black {
  background: linear-gradient(145deg, #292a30, #151519);
}
.roulette__number--green {
  background: linear-gradient(145deg, #14784f, #0b4d33);
  grid-row: span 3;
}
.roulette__number.is-selected,
.roulette__outside button.is-selected {
  border-color: #ffd400;
  box-shadow:
    0 0 0 2px rgba(255, 212, 0, 0.18),
    inset 0 0 16px rgba(255, 212, 0, 0.09);
}

/* The table's money on a spot: context, not your position, so it stays out of the way. Moved to
   the top corner because the bottom of the spot now belongs to the stake chip. */
.roulette__pool {
  position: absolute;
  top: 3px;
  right: 4px;
  color: rgba(255, 255, 255, 0.34);
  font:
    600 8px/1 'JetBrains Mono',
    monospace;
  pointer-events: none;
}

/* YOUR money on a spot.
   A solid chip under the label, in flow. Gold on a dark ink fill so it reads at a glance against
   either a red or a black field without a glow doing the work — a spot that is lit AND carries a
   bright pill is two signals for one fact, which is what made the first version shout. */
.roulette__mine {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(10, 8, 2, 0.72);
  color: #ffd400;
  font:
    700 10px/1.4 'JetBrains Mono',
    monospace;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* A straight-up number is 36px wide at its narrowest, and a pill with side padding has nowhere to
   put a five-character figure inside that. On the number grid the chip drops its fill and becomes
   plain gold digits — same information, none of the box. Anything that still will not fit ellipses
   and stays recoverable through the button's accessible name. */
.roulette__number .roulette__mine {
  padding: 0;
  background: none;
  font-size: 9px;
}

/* And the spot's own edge says it is covered, so a backed number is findable across the board
   without reading a single figure. One hairline, not a halo. */
.roulette__number[data-mine='1'],
.roulette__outside button[data-mine='1'] {
  border-color: rgba(255, 212, 0, 0.72);
}

/* The zero spans three rows on the desktop grid, so its column has room the others do not; the
   chip is centred in that taller box rather than pinned under the label. */
.roulette__number--green .roulette__mine {
  font-size: 10px;
}

.roulette__outside {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-top: 5px;
}
.roulette__outside button {
  min-height: 44px;
  background: #1b1b20;
  color: #c7c7cd;
}
.roulette__outside button[data-color='red'] {
  background: #771a20;
  color: #fff;
}
.roulette__outside button[data-color='black'] {
  background: #222329;
  color: #fff;
}
.roulette__outside button:nth-last-child(-n + 3) {
  grid-column: span 2;
}

.roulette__slip {
  display: grid;
  grid-template-columns: minmax(125px, 0.35fr) minmax(0, 1.65fr);
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #29292f;
}

.roulette__choice {
  display: grid;
  gap: 4px;
}
.roulette__choice > span {
  color: #73737c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.roulette__choice strong {
  color: #f2f2f4;
  font-size: 16px;
}
.roulette__choice i {
  color: #a3a3aa;
  font-size: 10px;
  font-style: normal;
}

.roulette__chips {
  display: grid;
  grid-template-columns: repeat(9, minmax(48px, 1fr));
  gap: 7px;
}
.roulette__chips button {
  --chip: #8d6a08;
  aspect-ratio: 1;
  min-width: 0;
  border: 3px dashed rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  background: radial-gradient(circle, #17171b 0 47%, var(--chip) 49% 100%);
  color: #fff;
  font:
    800 clamp(7px, 0.65vw, 10px) / 1 'JetBrains Mono',
    monospace;
  text-shadow: 0 1px 3px #000;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.58),
    0 3px 8px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.16s,
    filter 0.16s,
    box-shadow 0.16s;
}
.roulette__chips button:nth-child(2) {
  --chip: #315d9e;
}
.roulette__chips button:nth-child(3) {
  --chip: #a4282e;
}
.roulette__chips button:nth-child(4) {
  --chip: #7043a4;
}
.roulette__chips button:nth-child(5) {
  --chip: #1e7a55;
}
.roulette__chips button:nth-child(6) {
  --chip: #b05b1a;
}
.roulette__chips button:nth-child(7) {
  --chip: #167f91;
}
.roulette__chips button:nth-child(8) {
  --chip: #8d326d;
}
.roulette__chips button:nth-child(9) {
  --chip: #b28a0c;
}
.roulette__chips button:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.15);
}
.roulette__chips button.is-selected {
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    0 0 0 2px #ffd400,
    0 0 18px rgba(255, 212, 0, 0.36),
    inset 0 0 0 2px rgba(0, 0, 0, 0.58);
}
.roulette__chips button:disabled,
.roulette__number:disabled,
.roulette__outside button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.roulette__limits {
  grid-column: 1 / -1;
  margin: 0;
  color: #777780;
  font-size: 9px;
}

.roulette__mine {
  margin-top: 14px;
  padding: 13px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.17);
  border: 1px solid #29292e;
}
.roulette__subhead {
  color: #c8c8cd;
  font-size: 12px;
}
.roulette__subhead span {
  color: #ffd400;
  font-family: 'JetBrains Mono', monospace;
}
.roulette__bets {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.roulette__bet {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 7px;
  background: #19191e;
  border: 1px solid #303037;
  font-size: 10px;
}
.roulette__bet b {
  color: #d7d7db;
}
.roulette__bet i {
  color: #ffd400;
  font:
    600 9px/1 'JetBrains Mono',
    monospace;
  font-style: normal;
}
.roulette__empty {
  color: #777780;
  font-size: 11px;
}

.roulette__livebets {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #29292e;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.17);
}
.roulette__tablewrap {
  max-height: 250px;
  margin-top: 9px;
  overflow: auto;
  border: 1px solid #29292f;
  border-radius: 8px;
}
.roulette__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.roulette__table th {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 8px 10px;
  background: #121216;
  border-bottom: 1px solid #303037;
  color: #71717a;
  font-size: 9px;
  letter-spacing: 0.11em;
  text-align: left;
  text-transform: uppercase;
}
.roulette__table th:last-child,
.roulette__tablemoney {
  text-align: right;
}
.roulette__table td {
  padding: 8px 10px;
  border-bottom: 1px solid #25252b;
  color: #b8b8bf;
}
.roulette__table tbody tr:last-child td {
  border-bottom: 0;
}
.roulette__table tbody tr[data-you='1'] td {
  background: rgba(255, 212, 0, 0.055);
}
.roulette__player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 125px;
}
.roulette__player .dtable__avatar {
  position: relative;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: 1px solid #393941;
  border-radius: 3px;
  background: #202027;
}
.roulette__player .dtable__avatar img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  object-fit: cover;
}
.roulette__tablemoney {
  color: #ffd400 !important;
  white-space: nowrap;
}
.roulette__tableempty {
  padding: 22px 10px !important;
  color: #73737c !important;
  text-align: center;
}

.roulette[data-error='1']::before {
  content: 'The shared table is reconnecting…';
  display: block;
  grid-column: 1 / -1;
  color: #ff8465;
}

.gamechip[data-kind='roulette'] {
  border-color: rgba(255, 74, 74, 0.34);
}

@media (max-width: 1050px) {
  /* minmax(0, 1fr), never bare 1fr: a bare 1fr track cannot shrink below its widest child, and on
     a phone that child set the whole table 470px wide inside a 375px screen — wheel, board and
     chips all cut off at the right edge. */
  .roulette {
    grid-template-columns: minmax(0, 1fr);
  }
  .roulette > * {
    min-width: 0;
  }
  .roulette__wheelwrap {
    width: min(360px, 80vw);
  }
}

@media (max-width: 720px) {
  .roulette__stage,
  .roulette__board {
    padding: 12px;
    border-radius: 12px;
  }
  .roulette__guide {
    flex-wrap: wrap;
  }
  .roulette__guide strong {
    flex-basis: 100%;
    margin-left: 0;
    text-align: left;
  }
  .roulette__numbers {
    grid-template-columns: repeat(6, 1fr);
  }
  .roulette__number--green {
    grid-row: auto;
    grid-column: span 6;
  }
  .roulette__outside {
    grid-template-columns: repeat(3, 1fr);
  }
  .roulette__outside button:nth-last-child(-n + 3) {
    grid-column: auto;
  }
  .roulette__slip {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Five across, two rows. Three across made every chip about 110px wide on a phone, three rows
     deep, with the third column clipped by the board's edge. */
  .roulette__chips {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 430px;
  }
  .roulette__chips button {
    border-width: 2px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roulette__wheel {
    transition: none !important;
  }
  .roulette__number,
  .roulette__outside button {
    transition: none;
  }
}