/* =========================================================
   VEGAS ROULETTE — global styles
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #0a1a0a;
  font-family: 'Georgia', serif;
  color: #f5e6c8;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  user-select: none;
}

/* ── 3-D WHEEL ────────────────────────────────────────── */
#wheel-container {
  position: fixed;
  top: 10px; left: 10px;
  width: 400px; height: 400px;
  background: transparent;
  pointer-events: none; /* Let clicks pass through empty space around wheel */
  z-index: 1;
}
#renderCanvas {
  width: 100%; height: 100%;
  touch-action: none;
  outline: none;
  pointer-events: auto; /* Re-enable pointer events for wheel interactions if needed */
}

/* ── HUD ──────────────────────────────────────────────── */
#hud {
  position: fixed;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 20px; align-items: center;
  z-index: 10;
}
#balance-box, #bet-box {
  background: rgba(0,0,0,.65);
  border: 1px solid #b8973a;
  border-radius: 6px;
  padding: 4px 14px;
  display: flex; flex-direction: column; align-items: center;
}
.label { font-size: 10px; letter-spacing: 2px; color: #b8973a; }
#balance-display, #bet-display {
  font-size: 18px; font-weight: bold; color: #f5e6c8;
}

#result-display {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 42px;
  font-weight: bold;
  color: #f5e6c8;
  text-shadow: 0 0 20px #f5c842, 0 0 40px #f5c842;
  background: rgba(0,0,0,.65);
  border: 2px solid #b8973a;
  border-radius: 12px;
  padding: 14px 30px;
  display: none;
  z-index: 100;
  pointer-events: none;
  text-align: center;
}
#result-display.show { display: block; animation: fadeInOut 2.8s ease forwards; }

@keyframes fadeInOut {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.8); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.9); }
}

/* ── CHIP TRAY ────────────────────────────────────────── */
#chip-tray {
  position: fixed;
  top: calc(52vh - 30px);
  right: 12px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 10;
}
.chip {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: bold;
  border: 3px dashed rgba(255,255,255,.5);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 3px 6px rgba(0,0,0,.5);
  color: #fff;
}
.chip:hover  { transform: scale(1.15); }
.chip.active { box-shadow: 0 0 0 3px #fff, 0 0 14px #fff; transform: scale(1.15); }

.chip-1   { background: radial-gradient(circle, #999 0%, #666 100%); }
.chip-5   { background: radial-gradient(circle, #e44 0%, #a00 100%); }
.chip-25  { background: radial-gradient(circle, #4b4 0%, #070 100%); }
.chip-100 { background: radial-gradient(circle, #46e 0%, #036 100%); }
.chip-500 { background: radial-gradient(circle, #cc0 0%, #880 100%); color: #111; }

/* ── ACTION BUTTONS ───────────────────────────────────── */
#action-bar {
  position: fixed;
  bottom: calc(48vh + 52px);
  left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 10px;
  z-index: 10;
}
#action-bar button {
  padding: 8px 18px;
  font-family: 'Georgia', serif;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: bold;
  border: 1px solid #b8973a;
  border-radius: 6px;
  background: linear-gradient(180deg, #2a1e00, #1a1200);
  color: #f5e6c8;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
#action-bar button:hover {
  background: linear-gradient(180deg, #4a3a00, #2a2000);
  box-shadow: 0 0 8px #b8973a88;
}
#btn-spin {
  background: linear-gradient(180deg, #7a0000, #4a0000) !important;
  border-color: #cc4444 !important;
  font-size: 14px;
  padding: 10px 28px !important;
  letter-spacing: 3px;
}
#btn-spin:hover {
  background: linear-gradient(180deg, #aa0000, #700000) !important;
  box-shadow: 0 0 14px #cc444488 !important;
}
#btn-spin:disabled {
  opacity: .5; cursor: default;
  background: linear-gradient(180deg, #331111, #221111) !important;
}

/* ── TABLE WRAP ───────────────────────────────────────── */
#table-wrap {
  position: fixed;
  bottom: 0px;
  left: 0; right: 105px; /* Offset to prevent history bar overlap */
  height: 48vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6px 6px 0;
  z-index: 5;
  overflow: hidden;
}

#betting-table {
  position: relative;
  display: grid;
  /* columns: 0 | 12 number columns | 2:1 col */
  grid-template-columns: 42px repeat(12, 1fr) 38px;
  grid-template-rows: auto auto auto auto;
  gap: 3px;
  width: 100%;
  max-width: 820px;
  flex-shrink: 0;
}

/* ── BET CELLS ────────────────────────────────────────── */
.bet-cell {
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: bold;
  border: 1px solid #4a7a4a;
  border-radius: 3px;
  cursor: pointer;
  transition: filter .1s;
  position: relative;
}
.bet-cell:hover { filter: brightness(1.4); }
.bet-cell:active { filter: brightness(.8); }

/* colours */
.num-red   { background: #8b0000; }
.num-black { background: #111; }
.num-green, .zero-cell { background: #006600; }

/* zero spans all rows in col 1 */
.zero-cell {
  grid-column: 1;
  grid-row: 1 / span 3;
  height: auto;
  font-size: 16px;
}

/* column 2:1 buttons */
.col-bet {
  grid-column: 14;
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: bold;
  background: #1a4a1a;
  border: 1px solid #4a7a4a;
  border-radius: 3px;
  cursor: pointer;
  transition: filter .1s;
  position: relative;
}
.col-bet:hover { filter: brightness(1.4); }

/* number grid */
#number-grid {
  grid-column: 2 / span 12;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 44px);
  gap: 3px;
}

/* outside bets */
.outside-bet {
  display: flex; align-items: center; justify-content: center;
  height: 38px;
  font-size: 12px; font-weight: bold;
  border: 1px solid #4a7a4a;
  border-radius: 3px;
  cursor: pointer;
  transition: filter .1s;
  position: relative;
  background: #1a4a1a;
  letter-spacing: 1px;
}
.outside-bet:hover { filter: brightness(1.4); }

.dozen-bet {
  grid-column: span 4;
}
.even-bet  { grid-column: span 2; }

/* outside bet colors */
.red-outside  { background: #8b0000; }
.blk-outside  { background: #111; }

/* dozens & even-money rows */
.dozen-row { grid-column: 2 / span 12; grid-row: 4; display: contents; }
.even-row  { grid-column: 2 / span 12; grid-row: 5; display: contents; }

/* ── CHIP STACKS ──────────────────────────────────────── */
#chip-stacks { position: absolute; top: 0; left: 0; pointer-events: none; }
.placed-chip {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: bold;
  color: #fff;
  border: 2px dashed rgba(255,255,255,.6);
  transform: translate(-50%,-50%);
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.7);
}

/* ── HISTORY BAR ──────────────────────────────────────── */
#history-bar {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 105px;
  height: 48vh;
  background: rgba(0,0,0,.7);
  border-left: 1px solid #b8973a;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  gap: 6px;
  z-index: 10;
  overflow: hidden;
}
#history-bar .label {
  font-size: 10px; letter-spacing: 1.5px; color: #b8973a;
  text-align: center;
}
#history-numbers {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  width: 100%;
}
.hist-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: bold;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
.hist-red   { background: #8b0000; }
.hist-black { background: #222; }
.hist-green { background: #006600; }

/* ── SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #b8973a88; border-radius: 2px; }