/* public/games/roulette/roulette.css */
body { min-height:100vh; display:flex; flex-direction:column; }
.rl-layout { min-height:100vh; display:flex; flex-direction:column; position:relative; z-index:1; }

/* Timer pill */
.timer-pill { display:flex; flex-direction:column; align-items:center; background:var(--gold-faint); border:1px solid var(--gold-dim); padding:.22rem .75rem; }
.timer-lbl { font-size:7.5px; letter-spacing:.28em; color:var(--text-dim); font-family:var(--font-display); }
.timer-val { font-family:var(--font-display); font-size:1.1rem; color:var(--gold); line-height:1.1; }

/* Body */
.rl-body { flex:1; display:flex; gap:1.75rem; padding:1.5rem 1.75rem; min-height:0;
  background: radial-gradient(ellipse 55% 80% at 15% 50%, #0F2518 0%, transparent 65%), var(--bg-deep); }

/* Left */
.rl-left { display:flex; flex-direction:column; align-items:center; gap:1.1rem; flex-shrink:0; }

.wheel-wrap { position:relative; width:300px; height:300px; flex-shrink:0; }
#wheelCanvas {
  border-radius:50%;
  box-shadow: 0 0 0 7px var(--rail), 0 0 0 9px rgba(195,155,90,.18), 0 18px 55px rgba(0,0,0,.82);
}
.wheel-pointer { position:absolute; top:-10px; left:50%; transform:translateX(-50%); color:var(--gold); font-size:1.3rem; text-shadow:0 0 10px rgba(195,155,90,.7); z-index:5; }
.wheel-center  { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:50%; background:radial-gradient(circle,#3D1F0A,#1a0a02); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:.9rem; box-shadow:0 0 10px rgba(0,0,0,.8); z-index:5; }

.result-area { text-align:center; min-height:58px; display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.result-num  { font-family:var(--font-display); font-size:2.4rem; font-weight:600; line-height:1; }
.result-col  { font-size:.62rem; letter-spacing:.28em; color:var(--text-dim); font-family:var(--font-display); }

.recent-strip { text-align:center; width:100%; }
.recent-bubbles { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:center; }
.r-bubble { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:.65rem; font-weight:600; animation:bubbleIn .3s ease; }
@keyframes bubbleIn { from{opacity:0;transform:scale(0)} to{opacity:1;transform:scale(1)} }
.rb-red   { background:#C0392B; color:#fff; }
.rb-black { background:#1a1a2e; color:#fff; border:1px solid #444; }
.rb-green { background:var(--felt); color:var(--gold); border:1px solid var(--gold-dim); }

.players-list { display:flex; flex-direction:column; gap:.4rem; width:100%; }
.pl-player { display:flex; align-items:center; gap:.5rem; }
.pl-av { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(195,155,90,.18); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:9px; color:rgba(237,224,196,.5); overflow:hidden; flex-shrink:0; }
.pl-av img { width:100%; height:100%; object-fit:cover; }
.pl-name  { font-family:var(--font-serif); font-size:.8rem; color:var(--text-mid); }
.pl-chips { font-family:var(--font-display); font-size:.65rem; color:var(--gold); margin-left:auto; }

/* Right */
.rl-right { flex:1; display:flex; flex-direction:column; gap:1.1rem; max-width:500px; }

.chip-row-top { display:flex; align-items:center; gap:1rem; }
.chip-opts { display:flex; gap:.5rem; }
.chip-opt { transition:transform .15s, filter .15s, outline .15s; }
.chip-opt.active { outline:2.5px solid var(--gold); outline-offset:3px; }

.outside-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; }

.bet-btn {
  background:rgba(255,255,255,.035); border:1px solid rgba(195,155,90,.1);
  color:var(--text-dim); cursor:pointer;
  font-family:var(--font-display); font-size:.65rem; letter-spacing:.1em;
  padding:.72rem .4rem; text-align:center; transition:all .18s;
}
.bet-btn:hover { border-color:rgba(195,155,90,.4); color:var(--text); background:rgba(195,155,90,.06); }
.bet-btn.selected { border-color:var(--gold); box-shadow:inset 0 0 0 1px rgba(195,155,90,.2); }
.bet-btn.red-btn   { background:rgba(192,57,43,.14); border-color:rgba(192,57,43,.3); color:#E05050; }
.bet-btn.red-btn:hover   { background:rgba(192,57,43,.26); }
.bet-btn.black-btn { background:rgba(26,26,46,.5);   border-color:rgba(100,100,150,.28); color:#aaa; }
.bet-btn.black-btn:hover { background:rgba(26,26,46,.75); }

.my-bets-box { background:rgba(0,0,0,.2); border:1px solid rgba(195,155,90,.1); padding:.75rem; display:flex; flex-direction:column; gap:.5rem; }
.my-bets-hdr { display:flex; align-items:center; gap:.75rem; }
.bets-total  { font-family:var(--font-display); font-size:.75rem; color:var(--gold); margin-left:auto; }
.my-bets-tags { display:flex; flex-wrap:wrap; gap:.35rem; min-height:24px; }
.bet-tag { background:var(--gold-faint); border:1px solid var(--gold-dim); font-family:var(--font-serif); font-size:.78rem; padding:.18rem .5rem; color:var(--text-dim); }