.roulette-page {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 22px 26px 54px;
}

.roulette-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.roulette-title h1 {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.roulette-title p {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 4px;
}

.roulette-head-actions { display: flex; align-items: center; gap: 10px; }
.roulette-live-pill,
.privacy-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(20,17,13,.78);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.roulette-live-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 8px rgba(124,154,92,.7);
}

.roulette-grid {
  display: grid;
  grid-template-columns: minmax(300px, 430px) minmax(620px, 1fr);
  gap: 18px;
  align-items: start;
}

.roulette-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(28,24,17,.88);
}

.wheel-panel {
  position: sticky;
  top: 84px;
  padding: 16px;
  overflow: hidden;
}

.round-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 45px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.round-status-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
}

.round-status-copy span {
  display: block;
  margin-top: 2px;
  color: var(--text-faint);
  font-size: 11px;
}

.round-clock {
  min-width: 76px;
  color: #f2c14e;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  text-align: right;
}

.wheel-stage {
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 1;
  margin: 12px auto 8px;
  display: grid;
  place-items: center;
}

.wheel-rotor {
  position: absolute;
  inset: 0;
  transform: rotate(var(--wheel-stop, 0deg));
  will-change: transform;
}

.roulette-wheel {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.52));
}

.roulette-pocket-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

.ball-orbit {
  position: absolute;
  inset: 18%;
  pointer-events: none;
  transform: rotate(var(--ball-stop, 0deg));
  will-change: transform;
  z-index: 2;
}

.roulette-ball {
  position: absolute;
  top: -.5%;
  left: 50%;
  width: 8%;
  height: 8%;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.8));
}

.wheel-center-result {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border: 3px solid rgba(236,229,214,.85);
  border-radius: 50%;
  display: none;
  place-items: center;
  background: #19150f;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 23px;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
  z-index: 3;
}

.wheel-center-result.show { display: grid; }
.wheel-center-result.red { background: #8e2825; }
.wheel-center-result.black { background: #181818; }
.wheel-center-result.green { background: #35673b; }

.round-summary {
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(10,9,7,.45);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.45;
}

.round-summary strong { color: var(--text); }
.round-summary .win { color: #8fbd69; }
.round-summary .loss { color: #e56a61; }

.recent-wrap { margin-top: 14px; }
.mini-heading {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.recent-results { display: flex; gap: 7px; flex-wrap: wrap; min-height: 28px; }
.recent-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.16);
}
.recent-number.red { background: #8e2825; }
.recent-number.black { background: #171717; }
.recent-number.green { background: #35673b; }

.bet-panel { min-width: 0; overflow: hidden; }
.bet-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.bet-panel-head h2 { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; }
.bet-panel-head p { color: var(--text-faint); font-size: 11px; margin-top: 2px; }

.board-scroller { overflow-x: auto; padding: 14px 14px 8px; }
.roulette-board { min-width: 790px; }

.number-table {
  display: grid;
  grid-template-columns: 54px minmax(660px, 1fr) 70px;
  grid-template-rows: repeat(3, 56px);
  gap: 3px;
}

.bet-spot {
  position: relative;
  border: 1px solid rgba(236,229,214,.26);
  background: #181510;
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 800;
  cursor: pointer;
  transition: filter .12s, border-color .12s, transform .12s;
}
.bet-spot:hover:not(:disabled) { filter: brightness(1.22); border-color: #f1d7a5; z-index: 6; }
.bet-spot:active:not(:disabled) { transform: scale(.97); }
.bet-spot:disabled { cursor: not-allowed; opacity: .68; }
.bet-spot.red { background: #852b27; }
.bet-spot.black { background: #171717; }
.bet-spot.green { background: #285b32; }

.zero-spot { grid-column: 1; grid-row: 1 / 4; font-size: 20px; border-radius: 7px 0 0 7px; }
.number-matrix {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 4;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
}
.number-spot { min-width: 0; font-size: 14px; }
.column-stack { grid-column: 3; grid-row: 1 / 4; display: grid; grid-template-rows: repeat(3, 1fr); gap: 3px; }
.column-spot { font-size: 11px; border-radius: 0 5px 5px 0; }

.inside-hotspots { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.inside-hotspot {
  position: absolute;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
.inside-hotspot:hover { background: rgba(242,193,78,.75); border-color: #fff; }

.line-bets { margin: 5px 70px 0 54px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.street-spot { min-height: 26px; font-size: 9px; border-radius: 4px; }
.sixline-row { position: relative; height: 18px; margin: 0 70px 0 54px; }
.sixline-spot {
  position: absolute;
  top: 1px;
  width: 22px;
  height: 16px;
  transform: translateX(-50%);
  border: 1px solid rgba(236,229,214,.2);
  border-radius: 3px;
  background: #2a2318;
  color: var(--text-dim);
  font-size: 8px;
  cursor: pointer;
}
.sixline-spot:hover { border-color: #f2c14e; color: #fff; }

.zero-combos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 7px; }
.outside-row { display: grid; gap: 5px; margin-top: 5px; }
.dozens-row { grid-template-columns: repeat(3, 1fr); }
.even-money-row { grid-template-columns: repeat(6, 1fr); }
.outside-spot { min-height: 40px; border-radius: 5px; font-size: 11px; text-transform: uppercase; }
.diamond { display: inline-block; width: 15px; height: 15px; transform: rotate(45deg); background: #b93932; }
.diamond.black-diamond { background: #171717; border: 1px solid #aaa; }

.placed-chip {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-width: 28px;
  height: 20px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(255,255,255,.72);
  border-radius: 50%;
  background: #a82a2f;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 900;
  box-shadow: 0 2px 5px rgba(0,0,0,.65);
  z-index: 9;
  pointer-events: none;
}

.inside-hotspot .placed-chip,
.sixline-spot .placed-chip { right: 50%; bottom: 50%; transform: translate(50%, 50%); }

.bet-controls {
  display: grid;
  grid-template-columns: minmax(330px, 1fr) auto;
  gap: 14px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border);
  background: rgba(12,10,8,.3);
}

.chip-tray { display: flex; align-items: flex-end; gap: 8px; }
.chip-choice {
  width: 70px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  padding: 4px;
  cursor: pointer;
}
.chip-choice img { display: block; width: 52px; height: 52px; margin: 0 auto 3px; object-fit: contain; }
.chip-choice span { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 800; }
.chip-choice:hover { background: rgba(255,255,255,.04); }
.chip-choice.selected { border-color: #f2c14e; background: rgba(242,193,78,.08); color: #fff; }

.bet-actions { display: flex; align-items: center; gap: 7px; }
.table-action {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #193b5d;
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.table-action:hover:not(:disabled) { filter: brightness(1.15); }
.table-action.clear { background: transparent; color: #e56a61; border-color: rgba(229,106,97,.35); }
.table-action.ready { min-width: 130px; background: #087c5f; border-color: #0c9f78; }
.table-action.ready.is-ready { background: var(--moss); color: #12100b; }
.table-action:disabled { opacity: .42; cursor: not-allowed; }

.bet-ledger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 11px;
}
.bet-total { font-family: var(--font-mono); font-size: 14px; color: var(--text); font-weight: 800; }
.my-bets { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

.roulette-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 14px);
  z-index: 1200;
  max-width: min(420px, calc(100vw - 30px));
  padding: 10px 14px;
  border-radius: 6px;
  background: #e76b61;
  color: #17110d;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: .18s;
}
.roulette-toast.show { opacity: 1; transform: translate(-50%, 0); }
.roulette-toast.good { background: #87a967; }

.fair-proof-grid { display: grid; gap: 10px; }
.proof-item { padding: 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-raised); }
.proof-item span { display: block; color: var(--text-faint); font-size: 9px; text-transform: uppercase; margin-bottom: 4px; }
.proof-item code { display: block; color: var(--text); font-family: var(--font-mono); font-size: 10px; word-break: break-all; }

/* Shared modal helpers used by wallet, profile, chat, and affiliates. */
.wallet-tabs,.profile-history-actions { display:flex; gap:8px; margin-bottom:14px; }
.wallet-tab-btn { flex:1; padding:9px; border:1px solid var(--border); border-radius:6px; cursor:pointer; text-align:center; }
.wallet-tab-btn.active { background:var(--ember); color:#14110d; }
.wallet-panel { display:none; }
.command-row,.affiliate-code-box { display:flex; gap:8px; align-items:center; margin:10px 0; }
.command-preview,.affiliate-code-display { flex:1; padding:9px; border-radius:6px; background:var(--bg-raised); color:var(--text); font-family:var(--font-mono); font-size:11px; word-break:break-all; }
.copy-btn { padding:8px 11px; border:1px solid var(--border); border-radius:6px; background:transparent; color:var(--text); cursor:pointer; }
.logout-btn { display:flex; align-items:center; gap:5px; padding:8px 10px; border:1px solid rgba(224,101,92,.3); border-radius:7px; background:rgba(224,101,92,.08); color:#e0655c; cursor:pointer; }
.chat-messages { width:100%; height:100%; overflow-y:auto; display:flex; flex-direction:column; gap:10px; text-align:left; }
.chat-msg { width:100%; display:flex; gap:8px; align-items:flex-start; }
.chat-avatar { width:24px; height:24px; border-radius:5px; image-rendering:pixelated; }
.chat-bubble { min-width:0; flex:1; word-break:break-word; }
.chat-user { color:var(--ember); font-weight:700; cursor:pointer; }
.chat-text { color:var(--text); }
.chat-empty,.profile-empty { color:var(--text-faint); font-size:12px; }
.chat-context-menu { position:fixed; z-index:2000; min-width:140px; overflow:hidden; border:1px solid var(--border); border-radius:7px; background:var(--panel); }
.chat-context-item { padding:9px 12px; cursor:pointer; }
.chat-context-item:hover { background:rgba(255,255,255,.06); }
.profile-settings-row { display:flex; justify-content:space-between; gap:14px; padding:10px; border-radius:7px; background:rgba(255,255,255,.03); margin-bottom:12px; }
.profile-settings-title,.profile-username { color:#fff; font-weight:700; }
.profile-settings-sub,.profile-anon-note { color:#999; font-size:11px; margin-top:2px; }
.profile-header-row { display:flex; align-items:center; gap:12px; margin:14px 0; }
.profile-avatar { width:52px; height:52px; border-radius:7px; image-rendering:pixelated; }
.profile-stats-grid,.affiliate-summary-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.profile-stat { padding:10px; border-radius:7px; background:rgba(255,255,255,.03); }
.profile-stat-label,.profile-section-title { color:#999; font-size:10px; text-transform:uppercase; margin-bottom:4px; }
.profile-stat-value { color:#fff; font-family:var(--font-mono); font-weight:700; }
.profile-section-title { margin-top:14px; }
.profile-history-list { max-height:230px; overflow:auto; display:flex; flex-direction:column; gap:4px; }
.profile-history-row,.affiliate-referral-row { display:flex; justify-content:space-between; gap:10px; padding:8px; border-radius:6px; background:rgba(255,255,255,.025); color:#ddd; font-size:11px; }
.profile-history-time { color:#777; flex-shrink:0; }
.profile-battle-layout { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.profile-proof-panel { max-height:300px; overflow:auto; padding:9px; border:1px solid var(--border); border-radius:7px; }
.proof-row { margin-bottom:8px; }
.proof-row span { display:block; color:#888; font-size:9px; text-transform:uppercase; }
.proof-row code,.proof-row pre { color:#ddd; font:10px var(--font-mono); white-space:pre-wrap; word-break:break-all; }
.switch-toggle { position:relative; width:40px; height:22px; }
.switch-toggle input { opacity:0; }
.switch-slider { position:absolute; inset:0; border-radius:12px; background:#555; }
.switch-slider::before { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; border-radius:50%; background:#fff; transition:.15s; }
.switch-toggle input:checked + .switch-slider::before { transform:translateX(18px); }
.switch-toggle input:checked + .switch-slider { background:var(--ember); }
.affiliate-summary-row { grid-template-columns:1fr 1fr; }
.affiliate-referral-header { color:#999; font-size:10px; }
.affiliate-badge { padding:2px 5px; border-radius:5px; color:#8fbd69; }
.modal-wide { width:min(760px,92vw); }

@media (max-width: 1250px) {
  .roulette-grid { grid-template-columns: 340px minmax(560px, 1fr); }
  .wheel-panel { padding: 13px; }
  .bet-controls { grid-template-columns: 1fr; }
  .bet-actions { justify-content: flex-end; }
}

@media (max-width: 1000px) {
  .roulette-grid { grid-template-columns: 1fr; }
  .wheel-panel { position: static; }
  .wheel-stage { width: min(320px, 80vw); }
}

@media (max-width: 680px) {
  html, body { overflow-x: hidden; }
  .shell { width:100vw; max-width:100vw; overflow:hidden; }
  .main { flex:0 0 100vw; width:100vw; min-width:0; max-width:100vw; overflow:hidden; }
  .topnav { padding: 0 12px; }
  .brand { font-size: 18px; }
  .brand .mark { width: 30px; height: 30px; }
  .auth-btns .btn { padding-left: 13px; padding-right: 13px; }
  .roulette-page { width:100vw; max-width:100vw; padding: 16px 10px 38px; }
  .roulette-grid,
  .roulette-panel,
  .board-scroller { width:100%; min-width:0; max-width:calc(100vw - 20px); }
  .roulette-head { align-items:flex-start; flex-direction:column; gap:10px; }
  .roulette-head-actions { width:100%; flex-direction:row; align-items:center; justify-content:flex-start; flex-wrap:wrap; }
  .privacy-pill { display:none; }
  .roulette-live-pill { flex:1; }
  .roulette-head-actions .fair-btn { flex:1; justify-content:center; }
  .roulette-head-actions .fair-btn,
  .roulette-live-pill { min-width:0; padding-left:8px; padding-right:8px; font-size:10px; }
  .wheel-stage { width: min(280px, 78vw); }
  .board-scroller { padding: 10px 8px 7px; }
  .chip-tray { overflow-x:auto; }
  .chip-choice { width:62px; flex:0 0 62px; }
  .chip-choice img { width:46px; height:46px; }
  .bet-actions { display:grid; grid-template-columns:repeat(3,1fr); }
  .table-action { padding:0 7px; }
  .bet-ledger { align-items:flex-start; flex-direction:column; }
  .my-bets { width:100%; text-align:left; white-space:normal; }
  .profile-stats-grid { grid-template-columns:repeat(2,1fr); }
  .profile-battle-layout { grid-template-columns:1fr; }
}