.wheel-stage { display:flex; flex-direction:column; align-items:center; gap:16px; }
.wheel-ring {
  width: min(280px, 70vw);
  height: min(280px, 70vw);
  border-radius: 50%;
  position: relative;
  background:
    conic-gradient(
      from -90deg,
      #0a7a3a 0 2.7%, #1a1a1a 2.7% 5.4%, #b91c1c 5.4% 8.1%, #1a1a1a 8.1% 10.8%,
      #b91c1c 10.8% 13.5%, #1a1a1a 13.5% 16.2%, #b91c1c 16.2% 18.9%, #1a1a1a 18.9% 21.6%,
      #b91c1c 21.6% 24.3%, #1a1a1a 24.3% 27%, #b91c1c 27% 29.7%, #1a1a1a 29.7% 32.4%,
      #b91c1c 32.4% 35.1%, #1a1a1a 35.1% 37.8%, #b91c1c 37.8% 40.5%, #1a1a1a 40.5% 43.2%,
      #b91c1c 43.2% 45.9%, #1a1a1a 45.9% 48.6%, #b91c1c 48.6% 51.3%, #1a1a1a 51.3% 54%,
      #b91c1c 54% 56.7%, #1a1a1a 56.7% 59.4%, #b91c1c 59.4% 62.1%, #1a1a1a 62.1% 64.8%,
      #b91c1c 64.8% 67.5%, #1a1a1a 67.5% 70.2%, #b91c1c 70.2% 72.9%, #1a1a1a 72.9% 75.6%,
      #b91c1c 75.6% 78.3%, #1a1a1a 78.3% 81%, #b91c1c 81% 83.7%, #1a1a1a 83.7% 86.4%,
      #b91c1c 86.4% 89.1%, #1a1a1a 89.1% 91.8%, #b91c1c 91.8% 94.5%, #1a1a1a 94.5% 97.2%,
      #b91c1c 97.2% 100%
    );
  border: 8px solid #c9a227;
  box-shadow: inset 0 0 40px rgba(0,0,0,.55), 0 12px 30px rgba(0,0,0,.45);
  transition: transform 4s cubic-bezier(.12,.7,.08,1);
}
.wheel-hub {
  position: absolute; inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a2a0a, #120c04);
  border: 3px solid #f0c14b;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: #f0c14b;
  z-index: 2;
}
.wheel-ball {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px #fff;
  top: 12px; left: 50%; margin-left: -7px; z-index: 3;
  opacity: 0;
}
.wheel-ring.spinning .wheel-ball { opacity: 1; animation: ballOrbit 4s ease-out forwards; }
@keyframes ballOrbit {
  0% { transform: rotate(0deg) translateY(0); }
  100% { transform: rotate(1080deg) translateY(0); }
}

.history-strip {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 28px;
}
.history-strip span {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: #fff;
}
.history-strip .red { background: #b91c1c; }
.history-strip .black { background: #1a1a1a; border: 1px solid #555; }
.history-strip .green { background: #0a7a3a; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.chip-btn {
  width: 56px; height: 56px; border-radius: 50%;
  border: 3px dashed rgba(255,255,255,.55);
  font-weight: 800; cursor: pointer; color: #111;
  background: radial-gradient(circle at 30% 30%, #fff, #e0e0e0 40%, #999);
}
.chip-btn.active { outline: 3px solid #f0c14b; transform: scale(1.08); }
.chip-btn[data-v="100"] { background: radial-gradient(circle at 30% 30%, #ffb4b4, #c0392b); color: #fff; }
.chip-btn[data-v="1000"] { background: radial-gradient(circle at 30% 30%, #aef, #0984e3); color: #fff; }
.chip-btn[data-v="10000"] { background: radial-gradient(circle at 30% 30%, #ffeaa7, #e17055); color: #fff; }
.chip-btn[data-v="100000"] { background: radial-gradient(circle at 30% 30%, #b8f5c8, #00b894); color: #083; }

.bet-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.roulette-board {
  display: grid;
  grid-template-columns: 48px repeat(12, 1fr);
  gap: 4px;
  max-width: 920px;
  margin: 0 auto;
}
.r-cell {
  aspect-ratio: 1;
  min-height: 36px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; cursor: pointer; user-select: none;
  border: 1px solid rgba(255,255,255,.15);
  position: relative;
  transition: transform .12s ease, box-shadow .12s;
}
.r-cell:hover { transform: scale(1.06); box-shadow: 0 0 0 2px #f0c14b; z-index: 1; }
.r-cell.red { background: #9b1c1c; }
.r-cell.black { background: #1c1c1c; }
.r-cell.green { background: #0a7a3a; grid-row: span 3; }
.r-cell.outside {
  aspect-ratio: auto;
  min-height: 42px;
  background: rgba(212,160,23,.12);
  color: #f0c14b;
  font-family: var(--font-display);
  font-size: .85rem;
}
.r-cell .stack {
  position: absolute; bottom: 2px; right: 3px;
  font-size: .65rem; background: rgba(0,0,0,.55);
  padding: 1px 4px; border-radius: 4px; color: #f0c14b;
}
.outside-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 10px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .roulette-board { grid-template-columns: 36px repeat(12, minmax(18px, 1fr)); gap: 2px; }
  .r-cell { font-size: .7rem; min-height: 28px; }
}