/* ═══════════════════════════════════════════════════════════
   ROULETTE.CSS — Roulette • Casino Style
   Khớp hoàn toàn với design system của game (main.css)
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600;700&family=Saira+Condensed:wght@400;600;700;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────── */
.rl-wrap {
  --rl-gold:       #f5c842;
  --rl-gold-dim:   #c9962a;
  --rl-gold-glow:  rgba(245,200,66,.35);
  --rl-red:        #e53935;
  --rl-red-dark:   #b71c1c;
  --rl-felt:       #0e3d1f;
  --rl-felt-mid:   #0b3019;
  --rl-felt-dark:  #061a0e;
  --rl-font-display: 'Teko', sans-serif;
  --rl-font-body:    'Saira Condensed', sans-serif;

  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  font-family: var(--rl-font-body);
}

/* ── Top status bar ─────────────────────────────────────── */
.rl-top-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
}
.rl-sys-msg {
  font-family: var(--rl-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--rl-gold);
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 18px var(--rl-gold-glow), 0 1px 0 rgba(0,0,0,.8);
  transition: opacity .25s ease;
}
.rl-sys-msg.win  { color: #69f0ae; text-shadow: 0 0 18px rgba(105,240,174,.4); }
.rl-sys-msg.lose { color: #ff5252; text-shadow: 0 0 18px rgba(255,82,82,.4); }

/* ── Main board ─────────────────────────────────────────── */
.rl-board {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(20,80,40,.8) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.5) 0%, transparent 55%),
    linear-gradient(175deg, var(--rl-felt) 0%, var(--rl-felt-mid) 50%, var(--rl-felt-dark) 100%);
  border-radius: 20px;
  border: 1px solid rgba(180,140,40,.25);
  outline: 3px solid rgba(0,0,0,.6);
  outline-offset: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 0 0 6px rgba(0,0,0,.35),
    0 0 0 8px rgba(180,130,30,.1),
    0 18px 50px rgba(0,0,0,.8);
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
/* Noise texture overlay */
.rl-board::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: .6;
  mix-blend-mode: overlay;
}
/* Gold top line */
.rl-board::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rl-gold-dim), transparent);
  border-radius: 0 0 50% 50%;
}

/* ── Wheel zone ─────────────────────────────────────────── */
.rl-wheel-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Wheel container */
.rl-wheel-wrapper {
  position: relative;
  width: 210px;
  height: 210px;
  margin: 0 auto;
}

/* SVG wheel - Đã xóa class .spinning xung đột */
.rl-wheel-svg {
  width: 100%;
  height: 100%;
  transform-origin: center;
  transition: none;
}

/* Pointer/arrow indicator */
.rl-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 18px solid var(--rl-gold);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.7));
  z-index: 10;
}

/* Result badge in wheel center */
.rl-result-badge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease .3s;
}
.rl-result-badge.show { opacity: 1; }
.rl-result-num {
  font-family: var(--rl-font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.rl-result-num.red   { color: #ff6b6b; }
.rl-result-num.black { color: #e0e0e0; }
.rl-result-num.green { color: #69f0ae; }
.rl-result-label {
  font-family: var(--rl-font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: .7;
  margin-top: 2px;
}

/* History dots row */
.rl-history {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 22px;
  max-width: 380px;
}
.rl-hist-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rl-font-body);
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
  animation: rlDotIn .3s ease;
}
@keyframes rlDotIn {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.rl-hist-dot.red   { background: #b71c1c; }
.rl-hist-dot.black { background: #1a1a2e; }
.rl-hist-dot.green { background: #1b5e20; }

/* Nút Sẵn sàng mới thêm */
.rl-btn-ready {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  background: linear-gradient(150deg, #69f0ae 0%, #00c853 100%);
  color: #003300;
  font-family: var(--rl-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 1.5px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,200,80,.3);
  transition: transform .13s, box-shadow .13s, filter .1s;
  text-transform: uppercase;
}
.rl-btn-ready:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(0,200,80,.45);
}
.rl-btn-ready:active {
  transform: translateY(1px) scale(0.97);
}

/* Spin button */
.rl-btn-spin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 32px;
  background: linear-gradient(150deg, #ffe066 0%, #f5c842 40%, #d4980a 100%);
  color: #1a0a00;
  font-family: var(--rl-font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 2px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 2px rgba(255,215,0,.2),
    0 0 0 4px rgba(0,0,0,.4),
    0 5px 20px rgba(200,140,0,.5),
    0 2px 4px rgba(0,0,0,.4);
  transition: transform .13s, box-shadow .13s, filter .1s;
  text-transform: uppercase;
}
.rl-btn-spin::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transform: skewX(-20deg);
  animation: rlBtnSheen 3s ease-in-out infinite 1.5s;
}
@keyframes rlBtnSheen {
  0%   { left: -60%; opacity: 0; }
  10%  { opacity: 1; }
  40%  { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}
.rl-btn-spin:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 0 2px rgba(255,215,0,.3), 0 0 0 4px rgba(0,0,0,.4), 0 8px 28px rgba(200,140,0,.65), 0 3px 6px rgba(0,0,0,.5);
  filter: brightness(1.08);
}
.rl-btn-spin:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
}
.rl-btn-spin:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: saturate(.4) brightness(.8);
}
.rl-spin-icon { font-size: 1.3rem; }

/* ══════════════════════════════════════════════════════════
   BETTING TABLE
   ══════════════════════════════════════════════════════════ */
.rl-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Table title */
.rl-table-title {
  font-family: var(--rl-font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(245,200,66,.55);
  text-transform: uppercase;
  text-align: center;
}

/* Zero row */
.rl-zero-row {
  display: grid;
  grid-template-columns: 1fr;
}

/* Main number grid: 12 columns × 3 rows */
.rl-number-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
}

/* Each number cell */
.rl-num-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 5px;
  font-family: var(--rl-font-body);
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s, filter .1s, box-shadow .1s;
  border: 1.5px solid rgba(255,255,255,.08);
}
.rl-num-cell.red   { background: linear-gradient(155deg, #c62828, #8b0000); }
.rl-num-cell.black { background: linear-gradient(155deg, #222232, #0d0d1a); }
.rl-num-cell.zero  {
  grid-column: 1 / -1;
  background: linear-gradient(155deg, #1b5e20, #0a3d0f);
  min-height: 26px;
  border-radius: 6px;
  font-size: .9rem;
}
.rl-num-cell:hover {
  transform: scale(1.08) translateY(-1px);
  filter: brightness(1.25);
  z-index: 2;
  border-color: rgba(245,200,66,.55);
  box-shadow: 0 0 10px rgba(245,200,66,.25);
}
.rl-num-cell:active { transform: scale(.93); }
.rl-num-cell.disabled { opacity: .45; pointer-events: none; }

/* Chip badge on cell */
.rl-num-cell .rl-bet-chip {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--rl-gold);
  color: #1a0800;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  font-size: .55rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
  pointer-events: none;
  z-index: 3;
}

/* ── Outside bets section ─────────────────────────────── */
.rl-outside-row {
  display: grid;
  gap: 4px;
}
.rl-outside-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.rl-outside-row.cols-6 { grid-template-columns: repeat(6, 1fr); }

.rl-out-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 6px;
  background: rgba(245,200,66,.07);
  border: 1.5px solid rgba(245,200,66,.2);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, border-color .12s, transform .1s;
  gap: 1px;
}
.rl-out-cell .rl-out-label {
  font-family: var(--rl-font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .8px;
  color: var(--rl-gold);
  text-transform: uppercase;
  line-height: 1;
}
.rl-out-cell .rl-out-payout {
  font-family: var(--rl-font-body);
  font-size: .62rem;
  color: rgba(245,200,66,.5);
  line-height: 1;
}
.rl-out-cell.color-red   { background: rgba(198,40,40,.15); border-color: rgba(198,40,40,.35); }
.rl-out-cell.color-red   .rl-out-label { color: #ff6b6b; }
.rl-out-cell.color-black { background: rgba(20,20,40,.5); border-color: rgba(150,150,200,.2); }
.rl-out-cell.color-black .rl-out-label { color: #b0b0c8; }
.rl-out-cell:hover {
  background: rgba(245,200,66,.16);
  border-color: rgba(245,200,66,.5);
  transform: translateY(-1px);
}
.rl-out-cell.color-red:hover   { background: rgba(198,40,40,.28); border-color: rgba(220,60,60,.6); }
.rl-out-cell.color-black:hover { background: rgba(40,40,70,.7); border-color: rgba(180,180,220,.35); }
.rl-out-cell:active { transform: scale(.95); }
.rl-out-cell.disabled { opacity: .45; pointer-events: none; }

/* Chip badge on outside cell */
.rl-out-cell .rl-bet-chip {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--rl-gold);
  color: #1a0800;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  font-size: .6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
  pointer-events: none;
  z-index: 3;
}

/* ── 2:1 column bets row ──────────────────────────────── */
.rl-col-bet-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.rl-col-bet {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border-radius: 4px;
  background: rgba(245,200,66,.06);
  border: 1px solid rgba(245,200,66,.18);
  cursor: pointer;
  font-family: var(--rl-font-display);
  font-size: .78rem;
  font-weight: 600;
  color: rgba(245,200,66,.7);
  letter-spacing: .8px;
  transition: background .12s, border-color .12s;
  position: relative;
}
.rl-col-bet:hover { background: rgba(245,200,66,.15); border-color: rgba(245,200,66,.4); }
.rl-col-bet:active { transform: scale(.94); }
.rl-col-bet.disabled { opacity: .45; pointer-events: none; }
.rl-col-bet .rl-bet-chip {
  position: absolute;
  top: -5px; right: -4px;
  background: var(--rl-gold);
  color: #1a0800;
  border-radius: 50%;
  width: 14px; height: 14px;
  font-size: .55rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
  pointer-events: none; z-index: 3;
}

/* ── Clear bets button ────────────────────────────────── */
.rl-btn-clear {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  background: rgba(255,82,82,.1);
  border: 1.5px solid rgba(255,82,82,.3);
  border-radius: 22px;
  color: #ff8a80;
  font-family: var(--rl-font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.rl-btn-clear:hover  { background: rgba(255,82,82,.2); border-color: rgba(255,82,82,.55); }
.rl-btn-clear:active { transform: scale(.94); }
.rl-btn-clear:disabled { opacity: .35; cursor: not-allowed; }

/* Actions row: clear + total + spin */
.rl-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
}
.rl-total-bet {
  font-family: var(--rl-font-body);
  font-size: .82rem;
  font-weight: 700;
  color: rgba(245,200,66,.65);
  white-space: nowrap;
}
.rl-total-bet span { color: var(--rl-gold); font-size: 1rem; }

/* ══════════════════════════════════════════════════════════
   CHIPS BAR
   ══════════════════════════════════════════════════════════ */
.rl-chips-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  background: rgba(0,0,0,.4);
  border-radius: 16px;
  border: 1px solid rgba(255,215,0,.1);
  flex-wrap: wrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 3px 10px rgba(0,0,0,.3);
}
.rl-chips-label {
  font-family: var(--rl-font-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(245,200,66,.6);
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: 2px;
}
.rl-chip {
  padding: 5px 11px;
  border-radius: 22px;
  background: radial-gradient(circle at 45% 32%, #2a1d06, #120c00);
  color: rgba(245,200,66,.75);
  font-family: var(--rl-font-body);
  font-size: .78rem;
  font-weight: 700;
  border: 1.5px solid rgba(180,120,20,.3);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s, filter .1s, border-color .1s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: .5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,215,0,.07);
}
.rl-chip:hover {
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(245,200,66,.5);
  filter: brightness(1.15);
  box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 0 8px rgba(245,200,66,.15);
}
.rl-chip:active { transform: scale(.92); }
.rl-chip.active {
  background: radial-gradient(circle at 45% 32%, #e8c04a, #9a7010);
  border-color: var(--rl-gold);
  color: #1a0800;
  font-weight: 800;
  box-shadow:
    0 0 16px rgba(245,200,66,.45),
    0 4px 12px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,200,.3);
  transform: scale(1.1) translateY(-1px);
}
.rl-chip-allin {
  background: linear-gradient(135deg, #4a0000, #200000);
  color: #ff6b6b;
  border-color: rgba(200,50,50,.35);
  font-weight: 800;
  letter-spacing: .8px;
  margin-left: 3px;
}
.rl-chip-allin:hover {
  background: linear-gradient(135deg, #6a0000, #320000);
  border-color: rgba(220,60,60,.6);
  box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 0 10px rgba(220,50,50,.2);
}
.rl-chip-allin.active {
  background: linear-gradient(135deg, #e53935, #b71c1c);
  color: #fff;
  border-color: #e53935;
  box-shadow: 0 0 16px rgba(229,57,53,.55), 0 4px 12px rgba(0,0,0,.5);
}

/* ══════════════════════════════════════════════════════════
   FULLSCREEN LANDSCAPE LAYOUT
   ══════════════════════════════════════════════════════════ */
body.is-fullscreen .rl-wrap {
  max-width: 100%;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  height: calc(100vh - 60px); 
  overflow: hidden;
}

body.is-fullscreen .rl-board {
  flex: 1;
  flex-direction: row;
  align-items: stretch;
  gap: 14px;
  height: 100%;
  border-radius: 14px;
  padding: 14px 12px;
  overflow: hidden;
}

body.is-fullscreen .rl-left-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  width: 220px;
}

body.is-fullscreen .rl-right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  height: 100%;
}

body.is-fullscreen .rl-wheel-wrapper {
  width: 200px;
  height: 200px;
}

body.is-fullscreen .rl-num-cell {
  min-height: 36px;
  font-size: .85rem;
}

body.is-fullscreen .rl-out-cell {
  min-height: 36px;
}

body.is-fullscreen .rl-top-bar {
  display: none; 
}

/* ══════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .rl-wheel-wrapper   { width: 180px; height: 180px; }
  .rl-num-cell        { min-height: 26px; font-size: .7rem; }
  .rl-out-cell        { min-height: 26px; }
  .rl-out-cell .rl-out-label { font-size: .7rem; }
  .rl-chips-bar       { gap: 4px; padding: 7px 8px; }
  .rl-chip            { padding: 4px 8px; font-size: .72rem; }
}

/* ══════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════ */
@keyframes rlFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rl-win-flash {
  animation: rlWinFlash .5s ease forwards;
}
@keyframes rlWinFlash {
  0%  { box-shadow: 0 0 0 0 var(--rl-gold); }
  40% { box-shadow: 0 0 0 6px var(--rl-gold-glow); border-color: var(--rl-gold) !important; }
  100%{ box-shadow: 0 0 0 0 var(--rl-gold); }
}