/* European Roulette overlay. Classes prefixed .rlt- and #rlt-ui */
#rlt-ui { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; color: #f4ead0; font-family: inherit;
  --rh: clamp(24px, 5.2vh, 52px); --ww: clamp(120px, 27vh, 260px); background: none; }
#rlt-ui.hidden { display: none; }
#rlt-ui button, #rlt-ui .rlt-spot, #rlt-ui .rlt-hit { pointer-events: auto; }
#rlt-ui .rlt-left { display: contents; }
#rlt-ui .rlt-wheelwrap { position: absolute; left: calc(50% - var(--ww) / 2); top: calc(47vh - var(--ww) / 2); width: var(--ww); height: var(--ww); border-radius: 50%;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
#rlt-ui .rlt-wheel { display: block; border-radius: 50%; width: 100% !important; height: 100% !important; }
#rlt-ui .rlt-wheelwrap.rlt-3d { border-radius: 0; }
#rlt-ui .rlt-wheel3d { border-radius: 0; }
#rlt-ui .rlt-badge { position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; margin: 0; transform: translate(-50%, -50%); border-radius: 50%;
  display: none; align-items: center; justify-content: center; font: 700 clamp(14px, 3.4vh, 26px) sans-serif; color: #fff; border: 3px solid #e8c878; z-index: 2; box-sizing: border-box; }
#rlt-ui .rlt-badge.show { display: flex; }
#rlt-ui .rlt-msg { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); min-height: 0; padding: 4px 16px; border-radius: 14px;
  background: rgba(0,0,0,.55); font-weight: 700; font-size: clamp(14px, 2.6vh, 20px); text-align: center; max-width: 60vw; }
#rlt-ui .rlt-msg:empty { display: none; }
#rlt-ui .rlt-msg.win { color: #7dff9d; }
#rlt-ui .rlt-msg.lose { color: #ff9a8a; }
#rlt-ui .rlt-histwrap { position: absolute; left: calc(50% + var(--ww) / 2 + 10px); top: calc(47vh - 14px); width: auto; max-width: 24vw; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
  padding: 4px 6px; box-sizing: border-box; border-radius: 10px; background: rgba(0,0,0,.45); }
#rlt-ui .rlt-hist { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
#rlt-ui .rlt-hist span, #rlt-ui .rlt-badge { background: #16161a; }
#rlt-ui .rlt-hist span { min-width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 11px sans-serif; color: #fff; }
#rlt-ui .rlt-h-red { background: #b3121c !important; }
#rlt-ui .rlt-h-black { background: #16161a !important; }
#rlt-ui .rlt-h-green { background: #0e7a3a !important; }
#rlt-ui .rlt-k { opacity: .75; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; line-height: 1.1; }
#rlt-ui .rlt-status { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px 18px; padding: 4px 16px;
  border-radius: 12px; background: rgba(0,0,0,.55); white-space: nowrap; }
#rlt-ui .rlt-stat { display: flex; flex-direction: column; align-items: center; gap: 0; }
#rlt-ui .rlt-v { color: #ffe9a8; font-size: 14px; line-height: 1.2; }

#rlt-ui .rlt-right { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: min(860px, calc(100vw - 16px));
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 4px 20px; box-sizing: border-box;
  padding: 6px 8px; border-radius: 12px; background: rgba(4,30,18,.72); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
#rlt-ui .rlt-right > .rlt-board, #rlt-ui .rlt-right > .rlt-hint { grid-column: 1 / -1; }
#rlt-ui .rlt-hint { display: none; }
#rlt-ui .rlt-board { display: grid; grid-template-columns: 7% 1fr 8%; grid-template-rows: auto auto auto; gap: 0;
  background: rgba(10,90,48,.55); border: 2px solid #d9b36a; border-radius: 6px; padding: 3px; user-select: none; }
#rlt-ui .rlt-zerocol { grid-row: 1; grid-column: 1; display: flex; }
#rlt-ui .rlt-zerocol .rlt-spot { flex: 1; }
#rlt-ui .rlt-nums { grid-row: 1; grid-column: 2; position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(3, var(--rh)); }
#rlt-ui .rlt-cols { grid-row: 1; grid-column: 3; display: grid; grid-template-rows: repeat(3, 1fr); }
#rlt-ui .rlt-dozens { grid-row: 2; grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); }
#rlt-ui .rlt-evens { grid-row: 3; grid-column: 2; display: grid; grid-template-columns: repeat(6, 1fr); }
#rlt-ui .rlt-overlay { position: absolute; inset: 0; pointer-events: none; }

#rlt-ui .rlt-spot { position: relative; box-sizing: border-box; border: 1px solid rgba(244,234,208,.75); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-weight: 700; font-size: clamp(11px, 2.6vh, 19px); min-height: 0; height: calc(var(--rh) * .85); background: transparent; color: #f4ead0; }
#rlt-ui .rlt-spot.rlt-num { height: var(--rh); }
#rlt-ui .rlt-zerocol .rlt-spot { height: auto; border-radius: 40% 0 0 40%; }
#rlt-ui .rlt-red { background: #a8121a; }
#rlt-ui .rlt-black { background: #17171b; }
#rlt-ui .rlt-green { background: #0e7a3a; }
#rlt-ui .rlt-spot:hover { filter: brightness(1.35); }
#rlt-ui .rlt-spot.rlt-win { outline: 3px solid #ffe36a; outline-offset: -3px; animation: rlt-pulse .7s ease-in-out 4; z-index: 3; }
@keyframes rlt-pulse { 50% { filter: brightness(1.8); } }
#rlt-ui .rlt-hit { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: none; background: transparent; pointer-events: auto; z-index: 2; border-radius: 50%; min-height: 0; }
#rlt-ui .rlt-hit.rlt-h { width: 14px; height: 44%; margin: 0 0 0 -7px; transform: translateY(-50%); border-radius: 4px; }
#rlt-ui .rlt-hit.rlt-v { width: 44%; height: 14px; margin: -7px 0 0 0; transform: translateX(-50%); border-radius: 4px; }
#rlt-ui .rlt-hit.rlt-s { width: 40px; height: 14px; margin: -7px 0 0 -20px; border-radius: 4px; }
#rlt-ui .rlt-hit.rlt-z { width: 14px; height: 30px; margin: -15px 0 0 -7px; border-radius: 4px; }
#rlt-ui .rlt-hit:hover { background: rgba(255,227,106,.45); filter: none; }
#rlt-ui .rlt-hit.rlt-has { background: transparent; }

#rlt-ui .rlt-stake { display: none; font-style: normal; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 26px; height: 26px; padding: 0 3px; box-sizing: border-box; border-radius: 50%; background: #f7f1e0; color: #222; border: 3px dashed #c0392b;
  font: 700 11px sans-serif; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 2px 4px rgba(0,0,0,.6); z-index: 4; }
#rlt-ui .rlt-has > .rlt-stake { display: flex; }

#rlt-ui .rlt-hint { font-size: 12px; opacity: .7; text-align: center; }
#rlt-ui .rlt-chips { display: flex; gap: 10px; justify-content: center; }
#rlt-ui .rlt-chip { width: clamp(34px, 7.4vh, 52px); height: clamp(34px, 7.4vh, 52px); border-radius: 50%; border: 3px dashed rgba(255,255,255,.85); font: 700 14px sans-serif; color: #fff;
  cursor: pointer; box-shadow: 0 3px 6px rgba(0,0,0,.5); background: #555; }
#rlt-ui .rlt-chip.sel { transform: translateY(-3px) scale(1.08); box-shadow: 0 0 0 3px #ffe36a, 0 6px 10px rgba(0,0,0,.5); }
#rlt-ui .rlt-chip:disabled { opacity: .35; cursor: default; }
#rlt-ui .rlt-chip.rlt-c5 { background: #b33a3a; }
#rlt-ui .rlt-chip.rlt-c10 { background: #2f5fb3; }
#rlt-ui .rlt-chip.rlt-c25 { background: #2e8b4f; }
#rlt-ui .rlt-chip.rlt-c50 { background: #d17b1a; }
#rlt-ui .rlt-chip.rlt-c100 { background: #222; }
#rlt-ui .rlt-chip.rlt-c500 { background: #7b2fa0; }
#rlt-ui .rlt-btns { display: flex; gap: 10px; justify-content: center; }
#rlt-ui .rlt-btn { min-width: 80px; padding: clamp(6px, 1.4vh, 10px) 14px; }
#rlt-ui .rlt-btn:disabled { opacity: .4; }
#rlt-ui .rlt-spin { min-width: 140px; font-weight: 700; }

@media (max-width: 760px) { #rlt-ui .rlt-status { gap: 4px 10px; padding: 4px 8px; } #rlt-ui .rlt-right { gap: 4px 10px; } }

/* wheel drawn on the real table: hide the 2D wrapper, park the history top-right */
#rlt-ui .rlt-wheelwrap.rlt-onscene { visibility: hidden; }
#rlt-ui .rlt-histwrap { left: auto; right: 12px; top: 64px; max-width: 30vw; }
#rlt-ui .rlt-msg { top: 64px; }