/* ════════════════ TOKENS ════════════════ */
:root {
  --gold:  #f2d87e;
  --gold2: #c8a530;
  --mint:  #1ac47a;
  --red:   #b51e20;
  --blk:   #181d21;
  --text:  #f3edda;
  --muted: rgba(243,237,218,.62);
  --line:  rgba(236,248,240,.52);
}
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family: 'Montserrat','Segoe UI',Arial,sans-serif;
  color: var(--text);
  background:
    radial-gradient(ellipse at 50% -2%, rgba(16,156,75,.12) 0%, transparent 40%),
    linear-gradient(175deg, #040c07 0%, #020806 65%);
  min-height: 100vh;
}
button { font-family: inherit; }

/* ════════════════ SHELL ════════════════ */
.shell {
  width: min(1820px, 99.5vw);
  margin: 0 auto;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(252px, 19vw, 294px);
  gap: 12px;
}

/* ════════════════ GAME TABLE ════════════════ */
/* ════════════════ PAGE TITLE — which wheel am I playing? ════════════════ */
.sim-head {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  padding: 2px 10px 6px;
}
.sim-head h1 {
  margin: 0; font-size: clamp(16px, 1.45vw, 21px); font-weight: 900;
  letter-spacing: .2px; color: var(--text);
}
.sim-head h1::before {
  content: ''; display: inline-block;
  width: 7px; height: 7px; margin-right: 9px; border-radius: 50%;
  background: var(--gold); vertical-align: middle;
}
.sim-sub {
  margin: 0; font-size: 11.5px; font-weight: 700;
  letter-spacing: .3px; color: var(--muted);
}

.game-table {
  position: relative;
  border-radius: 26px;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 15%, rgba(22,188,106,.15), transparent 26%),
    linear-gradient(168deg, #0d6a40, #0a5030 54%, #063020);
  border: 1px solid rgba(242,216,126,.19);
  box-shadow:
    0 34px 96px rgba(0,0,0,.54),
    inset 0 0 0 1.5px rgba(255,255,255,.04),
    inset 0 0 80px rgba(0,0,0,.18);
  overflow: visible;
}
/* Felt dot texture */
.game-table::before {
  content: '';
  position: absolute; inset: 0; border-radius: 26px;
  background-image: radial-gradient(rgba(255,255,255,.022) .55px, transparent .55px);
  background-size: 18px 18px;
  pointer-events: none; opacity: .5;
}

/* ════════════════ TABLE LIMITS — minimal corner pill ════════════════ */
.limits-mini {
  position: absolute; top: 12px; left: 14px; z-index: 9;
  user-select: none;
}
.limits-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(3,14,8,.55); border: 1px solid rgba(255,255,255,.10);
  color: rgba(243,237,218,.66);
  font-size: 9.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: .15s ease;
}
.limits-pill:hover { border-color: rgba(242,216,126,.30); color: #ffeec0; background: rgba(3,14,8,.85); }
.limits-mini.open .limits-pill { border-color: rgba(242,216,126,.40); color: #ffeec0; }
.limits-panel {
  display: none; position: absolute; top: calc(100% + 8px); left: 0;
  width: 208px; border-radius: 14px; overflow: hidden;
  background: rgba(4,18,10,.94);
  border: 1px solid rgba(242,216,126,.22);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.limits-mini.open .limits-panel { display: block; }
.limits-head {
  padding: 7px 12px;
  background: rgba(255,255,255,.08);
  font-size: 10px; font-weight: 900; letter-spacing: .08em;
  text-align: center; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.limits-row {
  display: flex; justify-content: space-between;
  padding: 4px 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.limits-row:last-child { border-bottom: none; }
.lm-lbl { font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: #7fdcf6; }
.lm-val { font-size: 12px; font-weight: 900; color: #fff; }
.lm-val.gold { color: var(--gold); }

/* Wheel */
.wheel-box {
  display: flex; justify-content: center; align-items: flex-start;
  position: relative; min-height: 280px; margin-bottom: 22px;
}
#wheelSvg {
  width: clamp(280px, 26vw, 420px);
  filter:
    drop-shadow(0 28px 36px rgba(0,0,0,.48))
    drop-shadow(0 0 26px rgba(242,216,126,.06));
  transition: scale .55s ease, filter .55s ease;
}
/* Spin focus: wheel grows + glows, everything else dims */
.game-table.spin-focus #wheelSvg {
  scale: 1.05;
  filter:
    drop-shadow(0 32px 44px rgba(0,0,0,.56))
    drop-shadow(0 0 48px rgba(242,216,126,.18));
}
.game-table.spin-focus .board-shell,
.game-table.spin-focus .controls {
  opacity: .42; filter: saturate(.7);
}
.board-shell, .controls { transition: opacity .45s, filter .45s; }
.wheel-ptr {
  position: absolute; top: -2px; left: 50%;
  translate: -50% 0;
  width:0; height:0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 28px solid var(--gold);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.40));
  z-index: 6;
}

/* ════════════════ BOARD HEADER (transparent — same felt as the board) ════════════════ */
.board-head {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px 2px;
}
.coverage { display: flex; flex-direction: column; gap: 3px; width: 170px; }
.cov-top { display: flex; justify-content: space-between; align-items: baseline; }
.coverage small { font-size: 8.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.40); white-space: nowrap; }
.cov-track { height: 4px; border-radius: 99px; background: rgba(0,0,0,.38); overflow: hidden; }
.cov-fill  { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--mint), var(--gold)); transition: width .22s; }
.cov-pct   { font-size: 10px; font-weight: 900; color: rgba(255,255,255,.85); }
/* racetrack/table toggle = miniature of the OTHER view */
.race-ico {
  display: grid; place-items: center;
  padding: 3px 7px; border-radius: 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer; transition: .15s ease;
}
.race-ico:hover  { border-color: rgba(242,216,126,.30); background: rgba(242,216,126,.05); }
.race-ico svg { width: 104px; height: 40px; display: block; }
.race-ico #miniBoard { display: none; }
.game-table.race-active .race-ico #miniTrack { display: none; }
.game-table.race-active .race-ico #miniBoard { display: block; }

/* ════════════════ BOARD SHELL ════════════════ */
.board-shell {
  position: relative; z-index: 1;
  width: min(1180px, 97%); margin: 0 auto;
  border-radius: 18px; overflow: hidden;
  border: 2px solid rgba(228,240,232,.15);
  background:
    radial-gradient(circle at 50% 44%, rgba(24,168,88,.13), transparent 36%),
    linear-gradient(170deg, #0d6940, #084524);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 40px rgba(0,0,0,.15),
    0 14px 30px rgba(0,0,0,.22);
}
/* Shared stage: board + racetrack occupy the same area, slide transition */
.board-stage {
  position: relative; width: 100%; aspect-ratio: 1100/386;
  overflow: hidden;
}
.board-ratio, .racetrack-wrap {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: transform .5s cubic-bezier(.65,0,.35,1), opacity .38s ease;
}
.board-ratio { transform: translateY(0); opacity: 1; }
.racetrack-wrap { transform: translateY(-104%); opacity: 0; pointer-events: none; }
.board-shell.race-mode .board-ratio { transform: translateY(104%); opacity: 0; pointer-events: none; }
.board-shell.race-mode .racetrack-wrap { transform: translateY(0); opacity: 1; pointer-events: auto; }
#boardSvg, #zoneSvg, #chipLayer {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
#zoneSvg  { z-index: 3; }
#chipLayer { z-index: 5; pointer-events: none; }

/* Zone hover / flash */
.bet-zone {
  fill: rgba(255,255,255,.001);
  stroke: transparent; stroke-width: 1.5;
  cursor: pointer; transition: fill .09s, stroke .09s;
}
/* Hover: dedicated FULL-CELL highlight rects (separate from click zones).
   JS adds .num-hl to every number cell the hovered bet covers. */
.hl-rect {
  fill: rgba(242,216,126,.13);
  stroke: rgba(255,238,186,.85);
  stroke-width: 1.6;
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
}
.hl-rect.num-hl, .hl-rect.win-hi { opacity: 1; }
@keyframes winFlash {
  0%,100% { fill: rgba(242,216,126,.84); stroke: rgba(255,240,178,1); }
  50%      { fill: rgba(242,216,126,.28); stroke: rgba(255,240,178,.40); }
}
.hl-rect.win-hi {
  animation: winFlash .56s ease 3 !important;
  fill: rgba(242,216,126,.84) !important;
  stroke: rgba(255,240,178,1) !important;
}

/* Racetrack pockets */
.racetrack-pocket { cursor: pointer; }
.racetrack-pocket .rt-tile { transition: filter .09s, stroke .09s; }
.racetrack-pocket:hover .rt-tile,
.racetrack-pocket.hl .rt-tile {
  filter: brightness(1.42);
  stroke: rgba(255,236,172,.92);
  stroke-width: 1.6;
}
.rt-mark { opacity: 0; transition: opacity .14s; pointer-events: none; }
.racetrack-pocket.bet .rt-mark { opacity: 1; }
.call-zone { cursor: pointer; transition: fill .12s; fill: rgba(255,255,255,.022); }
.call-zone:hover { fill: rgba(242,216,126,.13); }
.call-lbl { pointer-events: none; }

/* Call bets strip — only in racetrack mode, animated collapse */
.call-bar {
  position: relative; z-index: 4;
  display: flex;
  padding: 0 14px;
  gap: 8px; flex-wrap: wrap; align-items: center;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .42s ease, opacity .3s ease, padding .42s ease;
}
.game-table.race-active .call-bar {
  max-height: 110px; opacity: 1; padding: 8px 14px;
}
.call-btn {
  padding: 7px 13px; border-radius: 11px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  color: var(--text); font-size: 11px; font-weight: 800;
  cursor: pointer; transition: .14s ease;
}
.call-btn:hover { border-color: rgba(242,216,126,.24); background: rgba(242,216,126,.07); }
.nb-wrap { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nb-lbl { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.nb-btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  color: var(--text); font-size: 12px; font-weight: 900; cursor: pointer; transition: .12s ease;
}
.nb-btn:hover { background: rgba(242,216,126,.08); border-color: rgba(242,216,126,.24); }
.nb-btn.active { background: rgba(242,216,126,.14); border-color: rgba(242,216,126,.52); color: var(--gold); }

/* ════════════════ PLACED CHIPS ════════════════ */
.placed-chip {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; translate: -50% -50%;
  color: #fff; font-size: 9px; font-weight: 900;
  border: 2.5px dashed rgba(255,255,255,.64);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.12), 0 5px 13px rgba(0,0,0,.36);
}

/* ════════════════ CONTROLS ════════════════ */
.controls {
  position: relative; z-index: 1;
  width: min(1180px, 97%); margin: 8px auto 0;
  padding: 10px 14px; border-radius: 16px;
  background: rgba(2,11,6,.58); border: 1px solid rgba(255,255,255,.07);
  display: grid; grid-template-columns: 1fr 118px 1fr;
  gap: 10px; align-items: center;
}
.chip-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.chip-nav {
  flex-shrink: 0;
  width: 24px; height: 38px; border-radius: 9px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  color: rgba(243,237,218,.6); font-size: 15px; font-weight: 900;
  cursor: pointer; transition: .13s;
}
.chip-nav:hover { border-color: rgba(242,216,126,.26); color: #ffe9ad; }
.chip-scroll {
  display: flex; align-items: center; gap: 9px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 12px 14px; min-width: 0;
  scroll-padding-inline: 14px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 8px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 8px), transparent);
}
.chip-scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; scroll-snap-align: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: #fff; font-weight: 900; font-size: 10.5px;
  border: 3px dashed rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.14), 0 7px 14px rgba(0,0,0,.22);
  cursor: pointer; transition: .16s ease;
  opacity: .82;
}
.chip:hover { transform: translateY(-1px); opacity: 1; }
.chip.active {
  outline: 3px solid var(--gold); outline-offset: 1px;
  transform: scale(1.16);
  opacity: 1; z-index: 1;
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.14), 0 9px 18px rgba(0,0,0,.34), 0 0 16px rgba(242,216,126,.25);
}
.spin-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.auto-btn {
  padding: 6px 16px; border-radius: 10px;
  border: 1px solid rgba(242,216,126,.28);
  background: rgba(242,216,126,.055);
  color: rgba(255,233,173,.85);
  font-size: 9.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  cursor: pointer; transition: .15s ease;
}
.auto-btn:hover { background: rgba(242,216,126,.14); color: #ffe9ad; }
@keyframes autoPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,110,110,.35); }
  50%     { box-shadow: 0 0 0 7px rgba(255,110,110,0); }
}
.auto-btn.running {
  border-color: rgba(255,123,123,.70);
  background: rgba(181,30,32,.30); color: #ffc9c9;
  animation: autoPulse 1.4s ease infinite;
}

/* ════════════════ AUTO-SPIN MODAL ════════════════ */
.modal.auto-modal { width: min(450px, 94vw); padding: 16px 16px 16px; border-radius: 18px; }
.auto-modal .modal-head { margin-bottom: 12px; }
.auto-modal .modal-ttl { font-size: 15px; }
.au-sec { margin-bottom: 13px; }
.au-lbl { font-size: 9.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #c9a230; margin-bottom: 7px; }
.au-counts { display: flex; gap: 5px; flex-wrap: wrap; }
.au-count {
  flex: 1; min-width: 52px;
  padding: 8px 0; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  color: var(--text); font-size: 13px; font-weight: 900; cursor: pointer; transition: .13s;
}
.au-count:hover { border-color: rgba(242,216,126,.26); }
.au-count.active { background: rgba(242,216,126,.14); border-color: rgba(242,216,126,.55); color: #ffeec0; }
.strat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.strat-card {
  text-align: left; padding: 9px 11px; border-radius: 11px;
  background: rgba(255,255,255,.035); border: 1.5px solid rgba(255,255,255,.08);
  cursor: pointer; transition: .14s ease; color: var(--text);
}
.strat-card:hover { border-color: rgba(242,216,126,.28); }
.strat-card.active { border-color: rgba(242,216,126,.62); background: rgba(242,216,126,.07); }
.st-name { display: block; font-size: 11.5px; font-weight: 900; color: #ffeec0; margin-bottom: 2px; }
.st-desc { display: block; font-size: 9.5px; line-height: 1.4; color: var(--muted); font-weight: 600; }
.au-stops { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.au-field { display: flex; flex-direction: column; gap: 4px; }
.au-field small { font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.auto-input {
  width: 120px; padding: 8px 10px; border-radius: 9px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.13);
  color: #fff; font-family: inherit; font-size: 13px; font-weight: 800;
}
.auto-input:focus { outline: none; border-color: rgba(242,216,126,.5); }
.au-chk {
  padding: 9px 14px; border-radius: 11px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  color: var(--muted); font-size: 11px; font-weight: 900; cursor: pointer; transition: .13s;
}
.au-chk.on { background: rgba(26,196,122,.13); border-color: rgba(26,196,122,.45); color: #b9f5d6; }
.au-note { font-size: 10.5px; color: var(--muted); line-height: 1.5; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.10); }
.au-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.au-start {
  padding: 11px 26px; border-radius: 13px;
  border: 1.5px solid var(--gold);
  background: rgba(242,216,126,.13); color: #ffeec0;
  font-size: 13px; font-weight: 900; cursor: pointer; transition: .14s;
}
.au-start:hover { background: rgba(242,216,126,.24); }
.au-cancel {
  padding: 11px 18px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,.10); background: transparent;
  color: var(--muted); font-size: 12px; font-weight: 900; cursor: pointer;
}
.au-cancel:hover { color: #fff; }
/* two-level layout */
.au-info {
  padding: 11px 13px; border-radius: 12px; margin-bottom: 12px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
  font-size: 13px; font-weight: 800;
}
.au-info small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.au-info small.warn { color: #ff9b9b; }
.au-acc {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; border-radius: 12px; margin-bottom: 12px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
  color: var(--text); font-size: 12.5px; font-weight: 900; cursor: pointer; transition: .13s;
}
.au-acc:hover { border-color: rgba(242,216,126,.25); }
.au-acc small { color: var(--muted); font-weight: 600; text-transform: none; }
.au-acc-cur { margin-left: auto; color: var(--muted); font-size: 11px; }
.au-acc-arrow { font-size: 11px; color: var(--gold2); transition: transform .18s; display: inline-block; }
.au-acc.open .au-acc-arrow { transform: rotate(90deg); }
.au-strat {
  display: none; padding: 11px; border-radius: 13px; margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.16);
}
.au-strat.open { display: block; }
.auto-input.wide { width: 100%; }
.auto-input.num  { width: 70px; }
.auto-input:disabled { opacity: .38; }
.auto-select {
  flex: 1; min-width: 120px;
  padding: 8px 9px; border-radius: 9px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.13);
  color: #fff; font-family: inherit; font-size: 11.5px; font-weight: 800;
}
.auto-select:focus { outline: none; border-color: rgba(242,216,126,.5); }
.auto-select option { background: #06301d; }
.au-rule { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.au-rule:last-child { margin-bottom: 0; }
.au-lbl.ru { width: 96px; margin: 0; flex-shrink: 0; }
.au-none { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--muted); cursor: pointer; }
.au-none input { accent-color: #2e9be6; width: 15px; height: 15px; cursor: pointer; }
.au-hint { font-size: 10px; color: var(--muted); font-weight: 700; }
.au-safety {
  padding: 11px 12px; border-radius: 12px; margin: 12px 0;
  border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025);
}
.au-saverow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.save-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.save-chip {
  padding: 6px 11px; border-radius: 999px;
  background: rgba(242,216,126,.07); border: 1px solid rgba(242,216,126,.28);
  color: #ffeec0; font-size: 10.5px; font-weight: 900; cursor: pointer; transition: .12s;
}
.save-chip:hover { background: rgba(242,216,126,.16); }
.au-footnote { margin-top: 10px; font-size: 9.5px; color: rgba(255,255,255,.34); text-align: right; }
.spin-btn {
  width: 94px; height: 94px; border-radius: 50%;
  border: 5px solid var(--gold);
  background: radial-gradient(circle at 36% 28%, #82f4bc, #1ac47a 54%, #077a44);
  color: #fff; font-size: 18px; font-weight: 900; letter-spacing: .02em;
  box-shadow: 0 0 0 4px rgba(26,196,122,.10), 0 0 32px rgba(26,196,122,.22), 0 14px 28px rgba(0,0,0,.36);
  cursor: pointer; transition: .14s ease;
}
.spin-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(26,196,122,.18), 0 0 42px rgba(26,196,122,.28), 0 16px 32px rgba(0,0,0,.44);
}
.spin-btn:disabled { opacity: .5; cursor: not-allowed; }
.action-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.action-row { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
/* Settings cluster — visually separate from game actions */
.settings-row {
  display: flex; justify-content: flex-end; gap: 6px; align-items: center;
  padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.10);
  width: 100%;
}
.settings-lbl { font-size: 8.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.34); margin-right: auto; }
.set-btn {
  min-height: 30px; padding: 5px 11px;
  border-radius: 9px; border: 1px solid rgba(255,255,255,.07);
  background: transparent; color: rgba(243,237,218,.70);
  font-size: 10px; font-weight: 900; cursor: pointer; transition: .14s ease;
}
.set-btn:hover { border-color: rgba(242,216,126,.22); color: #ffe9ad; }
.set-btn.on { background: rgba(242,216,126,.10); border-color: rgba(242,216,126,.38); color: #ffe9ad; }
.action-btn {
  min-height: 40px; padding: 8px 12px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04); color: #d0e6d8;
  font-size: 11px; font-weight: 900; cursor: pointer; transition: .14s ease;
}
.action-btn:hover { border-color: rgba(242,216,126,.22); background: rgba(242,216,126,.07); }
.action-btn.hold  { border-color: rgba(26,196,122,.22); color: #c0f5d8; }
.action-btn.turbo { border-color: rgba(242,216,126,.22); color: #ffd899; }
.action-btn.on    { background: rgba(26,196,122,.14); border-color: rgba(26,196,122,.42); }
.action-btn.turbo.on { background: rgba(242,216,126,.11); border-color: rgba(242,216,126,.44); }

/* ════════════════ SIDEBAR ════════════════ */
.sidebar {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  position: sticky; top: 10px; align-self: start;
  max-height: calc(100vh - 20px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(242,216,126,.25) transparent;
  padding-right: 2px;
}
.side-card {
  border-radius: 20px; padding: 14px;
  background: rgba(3,13,7,.68);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 40px rgba(0,0,0,.20);
}
.side-ttl { font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #c9a230; margin-bottom: 12px; }

/* Insights panel: tabs + window selector */
.tab-card { padding: 0; overflow: hidden; }
.ins-head {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 8px 9px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.ins-tabs { display: flex; gap: 1px; min-width: 0; flex: 1; }
.ins-tab {
  padding: 5px 5px; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 0;
  text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent;
  transition: .12s;
}
.ins-tab:hover { color: #e7dcb8; }
.ins-tab.active { color: #ffeec0; border-bottom-color: var(--gold); }
.ins-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ins-clear {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
  color: var(--muted); font-size: 11px; cursor: pointer; transition: .12s;
}
.ins-clear:hover { border-color: rgba(255,120,120,.35); color: #ffb3b3; }
.ins-clear span { display: none; }
.tab-min {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04);
  color: var(--muted); font-size: 14px; font-weight: 900; line-height: 1; cursor: pointer; transition: .12s;
}
.tab-min:hover { border-color: rgba(242,216,126,.3); color: #ffe9ad; }
.tab-body { overflow: hidden; transition: max-height .34s ease, opacity .24s ease; max-height: 1400px; padding: 12px 11px; }
.tab-card.collapsed .tab-body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }

.ins-window { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; flex-wrap: wrap; }
.iw-lbl { font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.iw-btns { display: flex; gap: 3px; flex: 1; }
.iw-b {
  flex: 1; padding: 4px 0; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03);
  color: var(--text); font-size: 10px; font-weight: 900; cursor: pointer; transition: .12s;
}
.iw-b:hover { border-color: rgba(242,216,126,.26); }
.iw-b.active { border-color: var(--gold); color: #ffeec0; background: rgba(242,216,126,.10); }
.ins-sample { font-size: 9.5px; font-weight: 800; color: var(--muted); margin-bottom: 11px; text-transform: uppercase; letter-spacing: .04em; }

/* Restore banner (shown when stats are hidden behind a marker) */
.ins-restore {
  display: none; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; margin-bottom: 10px; border-radius: 9px;
  background: rgba(242,216,126,.07); border: 1px solid rgba(242,216,126,.22);
}
.ins-restore.show { display: flex; }
.ins-restore span { font-size: 9.5px; font-weight: 700; color: rgba(242,216,126,.78); }
.ins-restore button {
  flex-shrink: 0; padding: 3px 9px; border-radius: 7px;
  border: 1px solid rgba(242,216,126,.4); background: rgba(242,216,126,.10);
  color: #ffeec0; font-size: 9.5px; font-weight: 900; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; transition: .12s;
}
.ins-restore button:hover { background: rgba(242,216,126,.2); }

/* Confirm dialog */
.confirm-ov {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.62); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.confirm-ov.show { display: flex; }
.confirm-box {
  width: min(400px, 94vw); border-radius: 16px; padding: 20px 20px 16px;
  background: linear-gradient(168deg, #07321e, #03160d 70%);
  border: 1px solid rgba(242,216,126,.22);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.confirm-ttl { font-size: 16px; font-weight: 800; color: #ffeec0; margin-bottom: 9px; }
.confirm-txt { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.62); margin-bottom: 17px; }
.confirm-foot { display: flex; justify-content: flex-end; gap: 9px; }
.confirm-btn {
  padding: 9px 18px; border-radius: 11px; font-size: 12.5px; font-weight: 800;
  cursor: pointer; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(237,231,214,.9);
  transition: .13s;
}
.confirm-btn:hover { background: rgba(255,255,255,.10); }
.confirm-btn.danger { border-color: var(--gold); background: rgba(242,216,126,.14); color: #ffeec0; }
.confirm-btn.danger:hover { background: rgba(242,216,126,.24); }

/* Breakdown — diverging "versus" rows */
.vs-wrap { display: flex; flex-direction: column; gap: 11px; margin-bottom: 13px; }
.vs-row {}
.vs-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.vs-side {
  display: flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.vs-side.right { flex-direction: row; }
.vs-side b { font-size: 13px; font-weight: 800; color: rgba(237,231,214,.7); letter-spacing: 0; }
.vs-side em { font-size: 9.5px; font-style: normal; font-weight: 700; color: rgba(255,255,255,.3); }
.vs-side.win b { color: #ffeec0; }
.vs-side.win { color: rgba(255,255,255,.6); }
.vs-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.vs-bar {
  position: relative; display: flex; height: 8px; border-radius: 99px; overflow: hidden;
  background: rgba(0,0,0,.3);
}
.vs-fill { height: 100%; opacity: .55; }
.vs-fill.r { opacity: .55; }
.vs-mid { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: rgba(255,255,255,.25); transform: translateX(-50%); }

/* Dozens & columns — compact bars */
.bd-mini-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-bottom: 11px; }
.bd-mini {}
.bd-mini-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.bd-mini-top span { font-size: 8px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.bd-mini-top b { font-size: 12px; font-weight: 800; color: rgba(237,231,214,.78); }
.bd-mini-bar { height: 4px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.bd-mini-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3f8e6e, #4fae8c); }
.bd-mini-cnt { font-size: 8.5px; font-weight: 700; color: rgba(255,255,255,.3); margin-top: 3px; }
.bd-zero { text-align: center; font-size: 9.5px; font-weight: 800; color: var(--muted); }

/* Hot & Cold bars */
.hc-group { margin-bottom: 11px; }
.hc-group:last-child { margin-bottom: 0; }
.hc-head { font-size: 9.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 7px; }
.hc-head.hot  { color: #ff8c42; }
.hc-head.cold { color: #5aa8e0; }
.hc-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.hc-chip {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.88);
}
.hc-chip.red { background: #9e2c2e; } .hc-chip.black { background: #232830; } .hc-chip.green { background: #14894a; }
.hc-track { flex: 1; height: 7px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.hc-fill { height: 100%; border-radius: 99px; }
.hc-fill.hot  { background: linear-gradient(90deg, #c79f3a, #e3cd84); }
.hc-fill.cold { background: rgba(255,255,255,.10); }
.hc-cnt { font-size: 10px; font-weight: 800; color: var(--muted); min-width: 22px; text-align: right; }

/* History grid */
.hist-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.hg-cell {
  aspect-ratio: 1; border-radius: 6px;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.86);
}
.hg-cell.red { background: #9e2c2e; } .hg-cell.black { background: #232830; } .hg-cell.green { background: #14894a; }
.hg-cell.latest { outline: 2px solid var(--gold); outline-offset: -2px; }
.ins-empty { font-size: 11px; color: var(--muted); font-weight: 700; text-align: center; padding: 18px 0; }

/* Collapsible card (payouts) */
.collapsible { padding-top: 0; padding-bottom: 0; }
.coll-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0; background: none; border: none; cursor: pointer; color: inherit;
}
.coll-arrow { color: var(--gold2); font-size: 11px; transition: transform .2s; }
.coll-head[aria-expanded="true"] .coll-arrow { transform: rotate(90deg); }
.coll-body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .3s ease, opacity .24s ease; }
.coll-body.open { max-height: 320px; opacity: 1; padding-bottom: 13px; }
.result-row { display: flex; align-items: center; gap: 12px; }
.result-num {
  width: 54px; height: 54px; border-radius: 13px;
  display: grid; place-items: center;
  font-size: 28px; font-weight: 900;
  background: rgba(20,24,28,.90);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.08);
  flex-shrink: 0; transition: background .3s;
}
.result-num.red   { background: rgba(181,30,32,.90); }
.result-num.black { background: rgba(24,29,33,.98); }
.result-num.green { background: rgba(14,152,68,.84); }
.result-win { font-weight: 900; color: #74f5ae; font-size: 13px; margin-bottom: 3px; }
.result-sub { color: var(--muted); font-size: 11px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat {
  padding: 9px 10px; border-radius: 12px;
  background: rgba(255,255,255,.034); border: 1px solid rgba(255,255,255,.05);
}
.stat-lbl { display: block; font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 4px; }
.stat-val { display: block; font-size: 15px; font-weight: 900; }
.hist-row { display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; }
.h-dot {
  width: 25px; height: 25px; border-radius: 7px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 900; color: #fff;
  border: 1px solid rgba(255,255,255,.08);
}
.h-dot.red   { background: rgba(181,30,32,.86); }
.h-dot.black { background: rgba(24,29,33,.98); }
.h-dot.green { background: rgba(14,152,68,.84); }
.pay-grid { display: grid; gap: 3px; }
.pay-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--muted); padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pay-row:last-child { border-bottom: none; }
.pay-row b { color: #fff4c5; }

/* ════════════════ CURSOR TOOLTIP ════════════════ */
.cursor-tip {
  position: fixed; z-index: 9999;
  pointer-events: none; opacity: 0;
  transform: translate(14px, 14px);
  padding: 7px 11px; border-radius: 11px;
  background: linear-gradient(170deg, rgba(7,50,28,.96), rgba(3,22,12,.96));
  border: 1px solid rgba(242,216,126,.22);
  color: #fff1bc; font-size: 12px; font-weight: 900;
  box-shadow: 0 12px 28px rgba(0,0,0,.30);
  transition: opacity .10s; white-space: nowrap;
}
.cursor-tip.show { opacity: 1; }
.cursor-tip em { font-style: normal; color: #b7ffd8; margin-left: 7px; }

/* ════════════════ RESULT SPLASH (at the wheel) ════════════════ */
.result-splash {
  position: absolute; bottom: 0; left: 50%; translate: -50% 0;
  z-index: 7; pointer-events: none;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px; border-radius: 18px;
  background: linear-gradient(170deg, rgba(6,40,22,.97), rgba(2,16,9,.97));
  border: 1.5px solid rgba(242,216,126,.45);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(14px) scale(.78);
  transition: opacity .26s, transform .30s cubic-bezier(.34,1.56,.64,1);
}
.result-splash.show { opacity: 1; transform: translateY(0) scale(1); }
.result-splash.win {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(242,216,126,.16), 0 0 56px rgba(242,216,126,.34), 0 24px 60px rgba(0,0,0,.55);
}
.rs-num {
  width: 58px; height: 58px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 30px; font-weight: 900; color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.15);
}
.rs-num.red { background: #b51e20; } .rs-num.black { background: #14181c; } .rs-num.green { background: #0f9a49; }
.rs-amt { font-size: 23px; font-weight: 900; line-height: 1.1; }
.rs-amt.pos { color: #74f5ae; } .rs-amt.neg { color: rgba(255,255,255,.82); }
.rs-sub { font-size: 11px; color: var(--muted); font-weight: 800; margin-top: 2px; }

/* Breakdown duo bars + hot/cold mini (sidebar) */
.duo { margin-bottom: 9px; }
.duo:last-child { margin-bottom: 0; }
.duo-l { display: flex; justify-content: space-between; font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.duo-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: rgba(0,0,0,.4); }
.duo-bar i { display: block; height: 100%; }
.hc-lbl { font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px; }

/* ════════════════ WIN FEEDBACK & CURSOR CHIP ════════════════ */
.board-toast {
  position: absolute; left: 50%; top: 14px; translate: -50% 0;
  z-index: 8; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 14px;
  background: linear-gradient(170deg, rgba(6,40,22,.97), rgba(2,18,10,.97));
  border: 1px solid rgba(242,216,126,.40);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 30px rgba(242,216,126,.10);
  opacity: 0; transform: translateY(-12px) scale(.94);
  transition: opacity .22s, transform .22s;
}
.board-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.board-toast.warn { border-color: rgba(255,120,120,.45); }
.board-toast.warn .bt-txt { color: #ffb3b3 !important; }
.bt-num {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 900; color: #fff;
}
.bt-num.red { background: #b51e20; } .bt-num.black { background: #181d21; } .bt-num.green { background: #0f9a49; }
.bt-txt { font-size: 16px; font-weight: 900; }
.bt-txt.pos { color: #74f5ae; }
.bt-txt.neg { color: rgba(255,255,255,.72); }

@keyframes chipWinPulse {
  0%,100% { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(242,216,126,.55), 0 5px 13px rgba(0,0,0,.36); }
  50%     { box-shadow: 0 0 0 5px var(--gold), 0 0 30px rgba(242,216,126,.90), 0 5px 13px rgba(0,0,0,.36); }
}
.placed-chip.chip-win  { animation: chipWinPulse .5s ease infinite; scale: 1.18; z-index: 3; }
.placed-chip.chip-lose { opacity: .30; filter: grayscale(.65); }

/* Zero-rule explainer rows in the French sidebar */
.rule-note {
  grid-column: 1 / -1;
  font-size: 10.5px; line-height: 1.5; color: var(--muted);
  padding: 1px 0 9px;
}

/* En Prison — the chip is neither won nor lost, it waits for the next spin */
.placed-chip.in-prison, .placed-chip.chip-jail {
  border-style: solid; border-color: rgba(122,190,255,.85);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.2), 0 0 0 2px rgba(122,190,255,.35), 0 5px 13px rgba(0,0,0,.4);
  filter: saturate(.55);
}
.placed-chip.in-prison::after {
  content: '🔒'; position: absolute; top: -7px; right: -7px;
  font-size: 10px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
}

/* Chip placement: drop-in pop + expanding gold ring */
@keyframes chipDrop { 0% { scale: 1.8; opacity: .25; } 70% { scale: .94; } 100% { scale: 1; opacity: 1; } }
@keyframes chipRing {
  0%   { outline: 2px solid rgba(242,216,126,.55); outline-offset: 0; }
  100% { outline: 2px solid rgba(242,216,126,0);   outline-offset: 16px; }
}
.placed-chip.chip-pop { animation: chipDrop .30s cubic-bezier(.34,1.56,.64,1), chipRing .45s ease-out; }

/* After result: losers fly UP to the house, winners fly DOWN to the player */
@keyframes chipFlyUp   { to { transform: translateY(-330px) rotate(-15deg); opacity: 0; } }
@keyframes chipFlyDown { to { transform: translateY(310px)  rotate(12deg);  opacity: 0; } }
.placed-chip.chip-fly-lose { animation: chipFlyUp   .65s cubic-bezier(.45,0,.85,.35) forwards; }
.placed-chip.chip-fly-win  { animation: chipFlyDown .65s cubic-bezier(.45,0,.85,.35) forwards; }

/* Racetrack coverage marker pops when a bet lands */
.rt-mark { transform-box: fill-box; transform-origin: center; }
.racetrack-pocket.bet .rt-mark { animation: markPop .32s ease; }
@keyframes markPop { 0% { transform: scale(2.4); } 100% { transform: scale(1); } }

/* Big result number inside the wheel hub */
#wResG {
  opacity: 0; transform: scale(.55);
  transform-origin: 250px 250px; transform-box: view-box;
  transition: opacity .28s, transform .36s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
#wResG.show { opacity: 1; transform: scale(1); }

/* Grid / Wheel segmented control in stats modal */
.seg { display: inline-flex; gap: 3px; background: rgba(0,0,0,.35); padding: 2px; border-radius: 8px; }

/* Frequency: fixed-height stage, grid/wheel slide over each other (no modal resize) */
.freq-stage { position: relative; height: 264px; overflow: hidden; }
.freq-pane {
  position: absolute; inset: 0;
  transition: transform .42s cubic-bezier(.65,0,.35,1), opacity .3s ease;
}
.freq-pane.grid  { display: grid; grid-template-columns: 28px repeat(12, 1fr); gap: 3px; align-content: center; }
/* American grid: 6 half-rows so the two zeros (3 each) line up with 3 number rows (2 each) */
.freq-pane.grid.us { grid-template-rows: repeat(6, 1fr); height: 100%; }
.freq-pane.grid.us .heat-cell { grid-row: span 2; aspect-ratio: auto; }
.freq-pane.grid.us .heat-cell.heat-zero { grid-row: span 3; }
.freq-pane.wheel { display: flex; align-items: center; justify-content: center; transform: translateX(104%); opacity: 0; pointer-events: none; }
.stats-modal.show-wheel .freq-pane.grid  { transform: translateX(-104%); opacity: 0; pointer-events: none; }
.stats-modal.show-wheel .freq-pane.wheel { transform: translateX(0); opacity: 1; pointer-events: auto; }

/* Running P&L graph */
.pnl-wrap { position: relative; width: 100%; height: 150px; }
.pnl-mini { width: 100%; height: 64px; }
.pnl-mini svg, .pnl-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pnl-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 12px; font-weight: 700; }
.pnl-tip {
  position: absolute; pointer-events: none; transform: translate(-50%, -130%);
  background: rgba(3,16,9,.95); border: 1px solid rgba(242,216,126,.3);
  border-radius: 8px; padding: 4px 8px; font-size: 10.5px; font-weight: 800;
  color: #fff; white-space: nowrap; opacity: 0; transition: opacity .12s;
}
.seg-b {
  padding: 3px 9px; border-radius: 6px; border: none; background: transparent;
  color: var(--muted); font-size: 9px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .05em; cursor: pointer; transition: .12s;
}
.seg-b.active { background: rgba(242,216,126,.16); color: #ffeec0; }

.cursor-chip {
  position: fixed; z-index: 9998; pointer-events: none;
  width: 34px; height: 34px; border-radius: 50%;
  translate: -50% -50%;
  display: grid; place-items: center;
  color: #fff; font-size: 10px; font-weight: 900;
  border: 2.5px dashed rgba(255,255,255,.70);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.14), 0 8px 18px rgba(0,0,0,.45);
  opacity: 0; transition: opacity .10s;
}
.cursor-chip.show { opacity: .94; }
.cursor-tip b { color: #fff; }

.broke-bar {
  display: none; width: min(1180px, 97%); margin: 7px auto 0;
  padding: 9px 14px; border-radius: 13px;
  background: rgba(64,8,8,.55); border: 1px solid rgba(255,120,120,.35);
  align-items: center; justify-content: center; gap: 12px;
  font-size: 12px; font-weight: 800; color: #ffc9c9;
  position: relative; z-index: 1;
}
.broke-bar.show { display: flex; }
.broke-btn {
  padding: 7px 14px; border-radius: 10px;
  border: 1px solid rgba(242,216,126,.40); background: rgba(242,216,126,.10);
  color: #ffeec0; font-size: 11px; font-weight: 900; cursor: pointer; transition: .13s;
}
.broke-btn:hover { background: rgba(242,216,126,.20); }

.action-btn.gold { border-color: rgba(242,216,126,.34); color: #ffe9ad; background: rgba(242,216,126,.07); }
.action-btn.gold:hover { background: rgba(242,216,126,.16); }

/* ════════════════ STATUS BAR (balance · message · total bet) ════════════════ */
.status-bar {
  position: relative; z-index: 1;
  width: min(1180px, 97%); margin: 8px auto 0;
  padding: 9px 16px; border-radius: 14px;
  background: rgba(2,11,6,.58); border: 1px solid rgba(255,255,255,.07);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px;
}
.bb-cell { display: flex; flex-direction: column; gap: 1px; }
.bb-cell.right { align-items: flex-end; text-align: right; }
.bb-lab { font-size: 8.5px; font-weight: 900; letter-spacing: .10em; text-transform: uppercase; color: var(--gold2); }
.bb-val { font-size: 16px; font-weight: 900; color: #fff; }
.bb-sub { font-size: 10px; font-weight: 800; color: var(--muted); }
.bb-msg {
  font-size: 12px; font-weight: 900; letter-spacing: .16em;
  text-transform: uppercase; color: #ffeec0; text-align: center;
}

/* ════════════════ STATS MODAL ════════════════ */
.stats-btn {
  width: 100%; margin-top: 11px; padding: 8px 10px;
  border-radius: 11px; border: 1px solid rgba(242,216,126,.26);
  background: rgba(242,216,126,.06); color: #ffeec0;
  font-size: 11px; font-weight: 900; cursor: pointer; transition: .14s ease;
}
.stats-btn:hover { background: rgba(242,216,126,.13); border-color: rgba(242,216,126,.46); }
.modal-ov {
  position: fixed; inset: 0; z-index: 600; display: none;
  background: rgba(1,8,4,.66); backdrop-filter: blur(5px);
  padding: 18px;
}
.modal-ov.show { display: grid; place-items: center; }
.modal {
  width: min(940px, 95vw); max-height: 92vh; overflow-y: auto;
  border-radius: 20px; padding: 18px 20px 20px;
  background: linear-gradient(168deg, #07321e, #03160d 70%);
  border: 1px solid rgba(242,216,126,.22);
  box-shadow: 0 40px 110px rgba(0,0,0,.6);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-ttl { font-size: 17px; font-weight: 900; letter-spacing: .12em; color: #ffeec0; }
.modal-x {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  color: #fff; font-size: 14px; font-weight: 900; cursor: pointer; transition: .13s;
}
.modal-x:hover { background: rgba(181,30,32,.42); }
.stats-grid { display: grid; grid-template-columns: 1fr 1.3fr .85fr; gap: 14px; }
.stats-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stats-box {
  border-radius: 15px; padding: 12px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
}
.sb-ttl { font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #c9a230; margin-bottom: 10px; }
.dist-row { display: grid; grid-template-columns: 50px 1fr 70px; gap: 8px; align-items: center; margin-bottom: 6px; }
.dist-lbl { font-size: 10px; font-weight: 900; color: var(--muted); text-transform: uppercase; }
.dist-track { height: 9px; border-radius: 99px; background: rgba(0,0,0,.4); overflow: hidden; }
.dist-fill { height: 100%; border-radius: 99px; transition: width .25s; }
.dist-val { font-size: 10.5px; font-weight: 900; color: #fff; text-align: right; white-space: nowrap; }
.modal.stats-modal { width: min(940px, 95vw); }
.heat-grid { display: grid; grid-template-columns: 28px repeat(12, 1fr); gap: 3px; }
.heat-cell {
  aspect-ratio: 1; border-radius: 5px; position: relative;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 900; color: #fff;
  border: 1px solid rgba(255,255,255,.08);
}
.heat-cell small { position: absolute; bottom: 0; right: 3px; font-size: 7.5px; font-weight: 800; color: rgba(255,255,255,.78); }
.heat-zero { grid-row: span 3; aspect-ratio: auto; }
.hc-dots { display: flex; gap: 4px; flex-wrap: wrap; min-height: 25px; }
.hist-scroll { max-height: 235px; overflow-y: auto; border-radius: 10px; }
.hist-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.hist-table th {
  text-align: left; padding: 5px 8px;
  font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.42);
  border-bottom: 1px solid rgba(255,255,255,.1);
  position: sticky; top: 0; background: #06301d; z-index: 1;
}
.hist-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--muted); vertical-align: middle; }
.hist-table td b { color: #fff; }
.net-pos { color: #74f5ae !important; font-weight: 900; }
.net-neg { color: #ff9b9b !important; font-weight: 900; }
.kf-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12px; color: var(--muted); }
.kf-row:last-child { border-bottom: none; }
.kf-row b { color: #fff4c5; }
@media (max-width: 980px) { .stats-grid { grid-template-columns: 1fr; } }

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 1100px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static; max-height: none; overflow: visible;
    display: grid; grid-template-columns: repeat(2, 1fr);
  }
  #wheelSvg { width: min(420px, 54vw); }
}
@media (max-width: 820px) {
  .limits-panel { width: 188px; }
  .wheel-box { min-height: 220px; }
  #wheelSvg { width: min(300px, 80vw); }
  .result-splash { padding: 9px 14px; gap: 10px; }
  .rs-num { width: 44px; height: 44px; font-size: 22px; }
  .rs-amt { font-size: 17px; }
  .race-ico svg { width: 84px; height: 32px; }
  .controls { grid-template-columns: 1fr; }
  .action-row, .settings-row { justify-content: center; }
  .settings-lbl { margin-right: 0; }
  .action-col { align-items: center; }
  .status-bar { grid-template-columns: 1fr; text-align: center; gap: 5px; }
  .bb-cell, .bb-cell.right { align-items: center; text-align: center; }
  .sidebar { grid-template-columns: 1fr; }
}