.rl { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.wheel-box { display: grid; gap: 12px; justify-items: center; }
.wheel-wrap { position: relative; width: min(300px, 100%); aspect-ratio: 1; }
.wheel { width: 100%; height: 100%; transition: transform 4s cubic-bezier(.12, .6, .1, 1); }
.pointer { position: absolute; left: 50%; top: -6px; width: 0; height: 0; margin-left: -11px;
           border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 20px solid var(--gold); }
.landed { position: absolute; inset: 0; display: grid; place-items: center; font: 400 40px var(--display); color: #fff; pointer-events: none;
          text-shadow: 2px 2px 0 #000; }
.history { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.history span, .num-red, .num-black, .num-green { font: 700 13px var(--body); color: #fff; }
.history span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.c-red { background: #d8344d; } .c-black { background: #1b1240; } .c-green { background: #14a38a; }

.felt-table { display: grid; grid-template-columns: 44px repeat(12, 1fr) 44px; grid-template-rows: repeat(3, 44px) 38px 38px; gap: 3px;
              background: #17603e; padding: 8px; border-radius: 12px; box-shadow: inset 0 0 0 3px #0f4a2f; }
.spot { position: relative; border: 0; border-radius: 6px; font: 700 14px var(--body); color: #fff; cursor: pointer; background: rgba(0,0,0,.18);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
/* games.css styles .spot for craps/baccarat (tall, padded); undo that here or the numbers overflow their rows */
.felt-table .spot { display: block; min-height: 0; padding: 0; border: 0; border-radius: 6px; font: 700 14px var(--body); }
.spot:hover { box-shadow: inset 0 0 0 2px var(--gold); }
.spot.red { background: #d8344d; } .spot.black { background: #1b1240; } .spot.green { background: #14a38a; }
.spot.win { box-shadow: inset 0 0 0 3px #4dff8f, 0 0 0 2px #4dff8f; }
.spot .stake { position: absolute; right: -4px; top: -6px; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: var(--gold);
               color: var(--ink); font: 700 11px/22px var(--body); text-align: center; box-shadow: 0 0 0 2px #fff; z-index: 1; }

.rl-controls { display: grid; gap: 10px; margin-top: 14px; }
.chipsel { display: flex; gap: 8px; flex-wrap: wrap; }
.chipsel button { width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; font: 700 13px var(--body); color: #fff;
                  box-shadow: inset 0 0 0 4px rgba(255,255,255,.85); }
.chipsel button[aria-pressed="true"] { outline: 3px solid var(--gold); outline-offset: 2px; }
.rl-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.total { font-size: 17px; }

@media (max-width: 900px) {
  .rl { grid-template-columns: 1fr; }
  .felt-table { grid-template-columns: 26px repeat(12, minmax(0, 1fr)) 26px; grid-template-rows: repeat(3, 34px) 32px 32px; gap: 2px; padding: 5px; }
  .felt-table .spot { font-size: 10px; padding: 0; min-width: 0; }
  .table-box { padding: 8px; }
}