@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600&display=swap");

/* ============================================================
   THE RINGER — Casino palette (Fehringer Digital)
   Variable NAMES are preserved so the existing board, chips,
   and UI recolor automatically. Classic roulette mapping:
   --orange = casino RED, --blue = casino BLACK, green = zeros.
   ============================================================ */
:root {
  --noir: #120d09;
  --felt: #0f4d3b;
  --felt-dark: #07271e;
  --felt-light: #1b6e54;
  --ink: #f3ead6;
  --muted: #9b8f76;
  --line: rgba(212, 175, 106, 0.30);
  --gold: #d4af6a;
  --gold-bright: #e6c878;
  --gold-dark: #9c7a32;
  --orange: #8e1f25;          /* casino red */
  --orange-dark: #5e1217;
  --blue: #1c1c20;            /* casino black */
  --blue-dark: #0d0d10;
  --green: #0f7a4d;
  --green-dark: #0a4f33;
  --clay: #c96442;           /* Claude accent */
  --clay-soft: rgba(201, 100, 66, 0.18);
  --danger: #c0453c;
  --panel: rgba(13, 32, 24, 0.92);
  --panel-solid: #0d2018;
  --felt-rim: #2a1f12;
  --shadow: 0 22px 55px rgba(0, 0, 0, 0.55);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 1024px;
}

body {
  margin: 0;
  min-width: 1024px;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 50% -5%, rgba(212, 175, 106, 0.10), transparent 42%),
    radial-gradient(circle at 12% 8%, rgba(15, 122, 77, 0.16), transparent 38%),
    radial-gradient(circle at 88% 96%, rgba(142, 31, 37, 0.12), transparent 40%),
    linear-gradient(150deg, #0a0806 0%, #110b07 46%, #0a0d09 100%);
  letter-spacing: 0;
}

button {
  font: inherit;
}

.app-shell {
  width: min(1540px, calc(100vw - 40px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 10px 0 12px;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto minmax(240px, 330px) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(50, 95, 153, 0.56);
  border-radius: 10px 10px 0 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 104, 200, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(4, 16, 31, 0.96), rgba(2, 10, 20, 0.94));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
}

.variant-control {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: center;
  min-width: 240px;
}

.variant-control label {
  color: #91a4bd;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.variant-control select {
  min-height: 34px;
  border: 1px solid rgba(58, 111, 181, 0.68);
  border-radius: 8px;
  background: #071326;
  color: var(--ink);
  padding: 0 10px;
}

.variant-control span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.brand-block h1,
.panel-heading h2,
.table-header h2,
.reset-modal h2 {
  margin: 0;
  letter-spacing: 0;
}

.brand-block h1 {
  font-family: Inter, Lato, "Segoe UI", Arial, sans-serif;
  font-size: 36px;
  font-weight: 900;
  line-height: 0.92;
  color: #f8fbff;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.brand-block .brand-the {
  color: var(--blue);
}

.brand-block .brand-roulette {
  color: var(--orange);
}

.eyebrow {
  margin: 0 0 3px;
  color: #8ea0b8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mode-switch,
.bankroll-strip,
.chip-rack,
.coach-actions,
.bet-actions,
.modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mode-switch {
  padding: 4px;
  border: 1px solid rgba(58, 111, 181, 0.58);
  border-radius: 8px;
  background: rgba(3, 13, 27, 0.72);
}

.mode-control {
  display: grid;
  gap: 4px;
}

.control-label {
  color: #91a4bd;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.guide-button,
.mode-button,
.ghost-button,
.text-button,
.primary-button,
.secondary-button,
.danger-button,
.spin-button {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.guide-button {
  min-height: 32px;
  min-width: 0;
  padding: 0 9px;
  border-color: rgba(58, 111, 181, 0.68);
  background: rgba(5, 17, 33, 0.7);
  color: #dce7f5;
  font-size: 12px;
  font-weight: 750;
}

.guide-button.active {
  color: #fff;
  background: linear-gradient(180deg, #ff8a2d, var(--orange));
  border-color: rgba(255, 150, 70, 0.8);
}

.mode-button {
  min-width: 110px;
  padding: 0 16px;
  background: transparent;
  color: #cdd8e8;
}

.mode-button.active {
  color: #fff;
  background: linear-gradient(180deg, #1682eb, var(--blue));
  border-color: rgba(98, 172, 255, 0.72);
}

.bankroll-strip {
  justify-content: end;
}

.bankroll-strip > div {
  min-width: 118px;
  padding: 6px 10px;
  border: 1px solid rgba(58, 111, 181, 0.56);
  border-radius: 8px;
  background: rgba(6, 19, 37, 0.8);
}

.bankroll-strip span {
  display: block;
  color: #91a4bd;
  font-size: 12px;
}

.bankroll-strip strong {
  display: block;
  margin-top: 2px;
  color: #4ea3ff;
  font-size: 18px;
}

.ghost-button,
.secondary-button {
  padding: 0 14px;
  border-color: rgba(212, 175, 106, 0.55);
  background: rgba(6, 20, 39, 0.7);
  color: var(--gold-bright);
}

.primary-button,
.spin-button {
  padding: 0 16px;
  border-color: rgba(255, 150, 70, 0.82);
  background: linear-gradient(180deg, #ff8b30, var(--orange));
  color: #fff;
  font-weight: 800;
}

.danger-button {
  padding: 0 16px;
  border-color: rgba(248, 95, 72, 0.75);
  background: rgba(0, 0, 0, 0.26);
  color: #ff7e68;
  font-weight: 800;
}

#resetButton {
  border-color: rgba(248, 95, 72, 0.78);
  color: #ff745e;
}

.text-button {
  min-height: 28px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #4ea3ff;
}

.mode-button:hover,
.guide-button:hover,
.ghost-button:hover,
.secondary-button:hover,
.primary-button:hover,
.danger-button:hover,
.spin-button:hover,
.chip-button:hover,
.bet-button:hover {
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}

.game-grid {
  display: grid;
  grid-template-columns: 300px minmax(590px, 1fr) 370px;
  gap: 10px;
  align-items: start;
  margin-top: 6px;
}

.panel,
.table-panel,
.side-panel > section {
  border: 1px solid rgba(52, 107, 170, 0.62);
  border-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 104, 200, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 36px rgba(0, 0, 0, 0.36);
}

.panel,
.table-panel {
  padding: 12px;
}

.side-panel {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.side-panel > section {
  padding: 12px;
}

#coachPanel,
#opponentPanel {
  order: 1;
}

.bet-slip-section {
  order: 2;
}

.round-section {
  order: 3;
}

.panel-heading,
.table-header,
.panel-subheading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-heading h2,
.table-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: #f6f9ff;
}

.round-count,
.status-pill,
.selected-chip-label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(65, 131, 212, 0.72);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(7, 22, 41, 0.78);
  font-size: 13px;
  white-space: nowrap;
}

.wheel-stage {
  display: grid;
  gap: 6px;
  margin: 8px 0 10px;
}

.wheel-rack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin: 8px 0 6px;
}

.wheel-rack .wheel-stage {
  min-width: 0;
  margin: 0;
}

.last-spin-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  border: 1px solid rgba(52, 107, 170, 0.58);
  border-radius: 10px 10px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
    #071326;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.wheel-arc-window {
  position: relative;
  aspect-ratio: 359 / 353;
  min-height: 238px;
  height: auto;
  overflow: hidden;
  border: 1px solid rgba(52, 107, 170, 0.74);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(5, 14, 25, 0.03), rgba(5, 14, 25, 0.18)),
    radial-gradient(circle at center, rgba(212, 175, 106, 0.10), transparent 62%),
    linear-gradient(180deg, #0a0d09 0%, #0c100b 58%, #060806 100%);
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 106, 0.08),
    0 0 28px rgba(15, 122, 77, 0.14);
}

.phone-body {
  display: none;
}

.phone-body::before,
.phone-body::after {
  content: "";
  position: absolute;
  top: 134px;
  width: 14px;
  height: 88px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 102, 0, 0.08), rgba(255, 102, 0, 0.78), rgba(255, 102, 0, 0.08));
  filter: blur(0.2px);
}

.phone-body::before {
  left: 16px;
}

.phone-body::after {
  right: 16px;
}

.phone-receiver {
  display: none;
}

.phone-receiver::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 71px;
  width: 130px;
  height: 42px;
  border: 2px solid rgba(214, 227, 242, 0.52);
  border-bottom-color: rgba(214, 227, 242, 0.2);
  border-radius: 18px 18px 26px 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(180deg, #2a3649 0%, #050a13 70%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -10px 18px rgba(0, 0, 0, 0.62),
    0 10px 18px rgba(0, 0, 0, 0.42);
}

.phone-receiver::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 58px;
  width: 96px;
  height: 34px;
  border: 2px solid rgba(214, 227, 242, 0.28);
  border-top: 0;
  border-radius: 0 0 42px 42px;
  transform: translateX(-50%);
  opacity: 0.8;
}

.phone-receiver span {
  position: absolute;
  top: 11px;
  width: 80px;
  height: 56px;
  border: 2px solid rgba(214, 227, 242, 0.56);
  border-radius: 54% 46% 46% 54% / 58% 48% 52% 42%;
  background:
    radial-gradient(circle at 26% 28%, rgba(255, 255, 255, 0.5), transparent 10%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(180deg, #273449 0%, #060b14 66%, #02050a 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.16),
    inset 0 -14px 24px rgba(0, 0, 0, 0.68),
    0 12px 20px rgba(0, 0, 0, 0.46),
    0 0 8px rgba(255, 102, 0, 0.18);
}

.phone-receiver span:first-child {
  left: 3px;
  transform: rotate(-7deg);
}

.phone-receiver span:last-child {
  right: 3px;
  transform: scaleX(-1) rotate(-7deg);
}

.wheel-arc-window::before {
  content: "";
  display: none;
  position: absolute;
  top: 238px;
  left: calc(50% - 10px);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 19px solid var(--orange);
  filter: drop-shadow(0 0 6px rgba(255, 102, 0, 0.58));
  z-index: 8;
}

.roulette-wheel {
  --wheel-rotation: 0deg;
  --wheel-rotation-inverse: 0deg;
  position: absolute;
  top: 58.5%;
  left: 50%;
  width: clamp(198px, 74%, 252px);
  height: clamp(198px, 74%, 252px);
  border-radius: 50%;
  border: 3px solid rgba(212, 224, 238, 0.66);
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.2), transparent 16%),
    radial-gradient(circle, rgba(2, 9, 18, 0.98) 0 31%, rgba(13, 24, 39, 0.96) 32% 48%, rgba(236, 245, 255, 0.2) 49% 52%, rgba(3, 8, 16, 0.96) 53% 100%);
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 0 0 5px rgba(1, 5, 10, 0.58),
    inset 0 0 20px rgba(0, 0, 0, 0.62),
    0 8px 18px rgba(0, 0, 0, 0.38),
    0 0 14px rgba(255, 102, 0, 0.16);
  z-index: 6;
}

.roulette-wheel::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 104, 200, 0);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.roulette-wheel.spinning::before {
  animation: signalPulse 1600ms ease-out infinite;
}

.wheel-ring {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 45%, rgba(230, 240, 252, 0.25) 46% 50%, rgba(0, 0, 0, 0.62) 51% 59%, rgba(7, 14, 24, 0.72) 60%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.2) 0 0.9deg, transparent 0.9deg 30deg);
  transform: rotate(var(--wheel-rotation));
  transition: transform 5000ms cubic-bezier(0.05, 0.78, 0.1, 1);
  z-index: 1;
}

.roulette-wheel.european .wheel-ring {
  background:
    radial-gradient(circle, transparent 0 46%, rgba(230, 240, 252, 0.22) 47% 50%, rgba(0, 0, 0, 0.42) 51% 57%, transparent 58%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.2) 0 0.9deg, transparent 0.9deg 30deg);
}

.wheel-ring::after {
  content: "";
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  border: 2px solid rgba(247, 241, 223, 0.1);
  background:
    radial-gradient(circle at 42% 35%, rgba(255, 255, 255, 0.08), transparent 28%),
    radial-gradient(circle, rgba(27, 38, 57, 0.32), rgba(6, 11, 20, 0.58) 72%);
}

.dial-holes {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 7;
}

.dial-hole {
  position: absolute;
  top: var(--hole-top, 50%);
  left: var(--hole-left, 50%);
  display: grid;
  place-items: center;
  width: clamp(34px, 18%, 48px);
  height: clamp(34px, 18%, 48px);
  margin: 0;
  border: 2px solid rgba(244, 249, 255, 0.92);
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 23%, rgba(255, 255, 255, 0.58), transparent 27%),
    linear-gradient(180deg, #536477 0%, #162235 100%);
  color: #ffffff;
  font-size: clamp(13px, 1.25vw, 18px);
  font-weight: 950;
  line-height: 1;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 7px rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 5px 10px rgba(255, 255, 255, 0.18),
    inset 0 -8px 14px rgba(0, 0, 0, 0.44),
    0 2px 5px rgba(0, 0, 0, 0.58),
    0 0 10px rgba(215, 231, 255, 0.2);
  filter: saturate(1.24) brightness(1.1);
  transform: translate(-50%, -50%) scale(var(--pocket-scale, 1));
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.dial-hole-label {
  display: block;
  transform: translateZ(0);
}

.dial-hole[data-color="orange"] {
  border-color: rgba(255, 185, 118, 0.98);
  background:
    radial-gradient(circle at 31% 23%, rgba(255, 255, 255, 0.58), transparent 27%),
    linear-gradient(180deg, #ff8c2e 0%, #ff6600 42%, #ba3900 100%);
}

.dial-hole[data-color="blue"] {
  border-color: rgba(141, 204, 255, 0.98);
  background:
    radial-gradient(circle at 31% 23%, rgba(255, 255, 255, 0.58), transparent 27%),
    linear-gradient(180deg, #48a8ff 0%, #0068c8 46%, #003f82 100%);
}

.dial-hole[data-color="green"] {
  border-color: rgba(157, 255, 194, 0.98);
  background:
    radial-gradient(circle at 31% 23%, rgba(255, 255, 255, 0.58), transparent 27%),
    linear-gradient(180deg, #3bd67a 0%, #0a8b4c 48%, #055f35 100%);
}

.dial-hole.is-winning-pocket {
  --pocket-scale: 1.34;
  border-color: rgba(255, 235, 166, 1);
  color: #fff;
  z-index: 12;
  filter: saturate(1.38) brightness(1.28);
  box-shadow:
    inset 0 5px 12px rgba(255, 255, 255, 0.28),
    inset 0 -8px 14px rgba(0, 0, 0, 0.48),
    0 0 0 5px rgba(255, 204, 102, 0.34),
    0 0 23px rgba(255, 102, 0, 0.95),
    0 0 42px rgba(0, 104, 200, 0.52);
}

.dial-hole.is-winning-pocket .dial-hole-label {
  font-size: 1.24em;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 1),
    0 0 12px rgba(255, 102, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.95);
}

.roulette-wheel.spinning .dial-hole-label {
  animation: dialNumberFlicker 230ms steps(2, end) infinite;
}

.wheel-numbers {
  position: absolute;
  display: none;
  inset: 12px;
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(var(--wheel-rotation));
  transition: transform 5000ms cubic-bezier(0.05, 0.78, 0.1, 1);
  z-index: 4;
}

.wheel-number {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 10px;
  margin: -5px 0 0 -11px;
  color: #fff;
  font-family: Inter, Lato, "Segoe UI", Arial, sans-serif;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  transform: rotate(var(--angle)) translateY(-77px) rotate(90deg);
}

.wheel-number[data-color="green"] {
  color: #e8ffed;
}

.wheel-number.is-winning-pocket {
  color: #fff;
  font-size: 9px;
  text-shadow:
    0 0 5px rgba(255, 102, 0, 0.98),
    0 1px 2px rgba(0, 0, 0, 0.95);
}

.wheel-center {
  position: absolute;
  inset: 34%;
  display: flex;
  align-items: center;
  justify-content: center;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(223, 232, 242, 0.72);
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(145deg, #07172a, #020814 70%);
  color: #dce7f5;
  font-size: clamp(20px, 16%, 34px);
  font-weight: 950;
  letter-spacing: 0;
  z-index: 5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 6px 14px rgba(0, 0, 0, 0.36);
}

.wheel-ball {
  position: absolute;
  top: 8%;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff, #d9d9d9 42%, #7f8790 100%);
  box-shadow: 0 0 9px rgba(255, 255, 255, 0.75), 0 2px 5px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--ball-rest-rotation, 0deg));
  transform-origin: 6px clamp(72px, 5.9vw, 92px);
  z-index: 13;
}

.roulette-wheel.spinning .wheel-ball {
  animation: ballOrbitSlowdown 5000ms cubic-bezier(0.05, 0.78, 0.1, 1) forwards;
}

@keyframes signalPulse {
  0% {
    opacity: 0.9;
    box-shadow:
      0 0 0 0 rgba(0, 104, 200, 0.34),
      0 0 0 0 rgba(255, 102, 0, 0.2);
  }

  70% {
    opacity: 0.36;
  }

  100% {
    opacity: 0;
    box-shadow:
      0 0 0 18px rgba(0, 104, 200, 0),
      0 0 0 36px rgba(255, 102, 0, 0);
  }
}

@keyframes ballOrbitSlowdown {
  0% {
    transform: rotate(var(--ball-start-rotation, 0deg));
  }

  20% {
    transform: rotate(calc(var(--ball-start-rotation, 0deg) + 1040deg));
  }

  46% {
    transform: rotate(calc(var(--ball-start-rotation, 0deg) + 1680deg));
  }

  72% {
    transform: rotate(calc(var(--ball-start-rotation, 0deg) + 2040deg));
  }

  100% {
    transform: rotate(var(--ball-final-rotation, 2280deg));
  }
}

@keyframes dialNumberFlicker {
  0%,
  100% {
    opacity: 1;
    filter: none;
  }

  50% {
    opacity: 0.72;
    filter: blur(0.35px);
  }
}

.result-display {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.outcome-banner {
  width: 100%;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(52, 107, 170, 0.58);
  border-radius: 8px;
  background: rgba(7, 22, 41, 0.72);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.outcome-banner.winner {
  border-color: rgba(85, 214, 128, 0.75);
  background: rgba(35, 132, 75, 0.35);
}

.outcome-banner.loser {
  border-color: rgba(217, 75, 75, 0.85);
  background: rgba(123, 22, 24, 0.42);
}

.outcome-banner.push,
.outcome-banner.neutral {
  border-color: rgba(214, 173, 91, 0.55);
}

.number-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 100%;
  padding: 7px;
  border: 1px solid rgba(52, 107, 170, 0.64);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    #071326;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.58),
    inset 0 0 18px rgba(0, 0, 0, 0.68);
}

.rail-group + .rail-group {
  padding-top: 0;
  padding-left: 8px;
  border-top: 0;
  border-left: 1px solid rgba(52, 107, 170, 0.28);
}

.rail-group h3 {
  margin: 0 0 5px;
  font-size: 9px;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.rail-group.hot h3 {
  color: #ff765f;
}

.rail-group.cold h3 {
  color: #80c5ff;
}

.rail-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.rail-row {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  min-height: 23px;
  border-radius: 5px;
}

.rail-number {
  display: grid;
  place-items: center;
  width: 29px;
  height: 23px;
  border: 1px solid rgba(247, 241, 223, 0.58);
  border-radius: 4px;
  color: #fff;
  font-family: Inter, Lato, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.24);
}

.rail-number[data-color="orange"] {
  background: linear-gradient(180deg, var(--orange), var(--orange-dark));
}

.rail-number[data-color="blue"] {
  background: linear-gradient(180deg, var(--blue), var(--blue-dark));
}

.rail-number[data-color="green"] {
  background: linear-gradient(180deg, var(--green), #075534);
}

.rail-number[data-color="neutral"] {
  color: rgba(247, 241, 223, 0.48);
  background: rgba(255, 255, 255, 0.04);
}

.rail-signal {
  display: none;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 3px;
}

.rail-count {
  min-width: 16px;
  color: #aab7c8;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.rail-markers {
  display: inline-grid;
  grid-template-columns: repeat(3, 3px);
  gap: 2px;
  align-items: end;
  height: 16px;
}

.rail-markers i {
  display: block;
  width: 3px;
  border-radius: 2px;
  opacity: 0.9;
}

.rail-markers i:nth-child(1) {
  height: 6px;
}

.rail-markers i:nth-child(2) {
  height: 10px;
}

.rail-markers i:nth-child(3) {
  height: 14px;
}

.rail-markers.hot i {
  background: #ff8d38;
  box-shadow: 0 0 5px rgba(255, 122, 26, 0.45);
}

.rail-markers.cold i {
  background: #80c5ff;
  box-shadow: 0 0 5px rgba(22, 119, 210, 0.45);
}

.rail-row[data-level="empty"] .rail-count,
.rail-row[data-level="zero"] .rail-count {
  color: rgba(208, 193, 139, 0.58);
}

.rail-row[data-level="empty"] .rail-markers i,
.rail-row[data-level="zero"] .rail-markers i {
  opacity: 0.22;
}

.rail-row[data-level="low"] .rail-markers i:nth-child(n + 2) {
  opacity: 0.24;
}

.rail-row[data-level="medium"] .rail-markers i:nth-child(3) {
  opacity: 0.28;
}

.rail-row.is-analysis-source {
  background: rgba(0, 104, 200, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(78, 163, 255, 0.82),
    0 0 12px rgba(0, 104, 200, 0.36);
}

.rail-row.is-analysis-source .rail-number {
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 12px rgba(255, 229, 137, 0.52);
}

.result-display.orange {
  border-color: rgba(255, 122, 26, 0.7);
}

.result-display.blue {
  border-color: rgba(22, 119, 210, 0.7);
}

.result-display.green {
  border-color: rgba(15, 139, 87, 0.9);
}

.history-block {
  margin-top: 8px;
}

.panel-subheading {
  margin-bottom: 7px;
  color: #aab7c8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.history-tray {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-height: 0;
  align-content: start;
  padding: 8px;
  border: 1px solid rgba(52, 107, 170, 0.74);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 104, 200, 0.18), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), transparent),
    #071326;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.035),
    inset 0 0 18px rgba(0, 0, 0, 0.56);
}

.history-tray.is-analysis-active {
  border-color: rgba(78, 163, 255, 0.9);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.56),
    0 0 18px rgba(0, 104, 200, 0.24);
}

.history-pill {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 38px;
  border: 1px solid rgba(226, 237, 250, 0.5);
  border-radius: 9px;
  color: #fff;
  font-family: Inter, Lato, "Segoe UI", Arial, sans-serif;
  font-size: 19px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -5px 12px rgba(0, 0, 0, 0.26),
    0 4px 10px rgba(0, 0, 0, 0.3);
}

.history-pill::before {
  content: attr(data-key-label);
  position: absolute;
  top: 5px;
  left: 7px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 9px;
  font-weight: 900;
}

.history-pill::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 6px;
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 -6px 0 rgba(255, 255, 255, 0.1),
    0 -12px 0 rgba(255, 255, 255, 0.06);
}

.history-pill.is-analysis-source {
  outline: 3px solid rgba(78, 163, 255, 0.95);
  outline-offset: -3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 2px rgba(0, 0, 0, 0.38),
    0 0 16px rgba(0, 104, 200, 0.52);
}

.history-tray .empty-state {
  grid-column: 1 / -1;
  align-self: center;
  text-align: center;
}

.orange {
  background: linear-gradient(180deg, var(--orange), var(--orange-dark));
}

.blue {
  background: linear-gradient(180deg, var(--blue), var(--blue-dark));
}

.green {
  background: linear-gradient(180deg, var(--green), #075534);
}

.last-spin-strip .result-display.orange,
.last-spin-strip .result-display.blue,
.last-spin-strip .result-display.green {
  background: transparent;
}

.last-spin-strip .result-display.orange {
  color: #ffb06e;
}

.last-spin-strip .result-display.blue {
  color: #7fc0ff;
}

.last-spin-strip .result-display.green {
  color: #75e5a1;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 9px;
}

.stat-item {
  min-height: 38px;
  padding: 6px;
  border: 1px solid rgba(52, 107, 170, 0.52);
  border-radius: 8px;
  background: rgba(7, 22, 41, 0.66);
}

.stat-item.is-analysis-source {
  border-color: rgba(78, 163, 255, 0.82);
  background: rgba(0, 104, 200, 0.16);
  box-shadow: 0 0 13px rgba(0, 104, 200, 0.24);
}

.stat-item span {
  display: block;
  color: #91a4bd;
  font-size: 10px;
}

.stat-item strong {
  display: block;
  margin-top: 2px;
  font-size: 15px;
}

.table-panel {
  min-height: 650px;
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 104, 200, 0.12), transparent 34%),
    linear-gradient(90deg, rgba(0, 104, 200, 0.05), transparent 20%, transparent 80%, rgba(255, 102, 0, 0.05)),
    var(--panel);
}

.chip-rack {
  margin: 10px 0 12px;
  gap: 12px;
}

.chip-button {
  --chip-face: var(--blue);
  --chip-edge: #8fcaff;
  --chip-tab: #e8eef6;
  --chip-ink: #ffffff;
  --chip-glow: rgba(0, 104, 200, 0.26);
  position: relative;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(164, 190, 220, 0.82);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.32), transparent 18%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0 31%, transparent 32%),
    conic-gradient(
      from -6deg,
      var(--chip-tab) 0 14deg,
      var(--chip-edge) 14deg 48deg,
      var(--chip-tab) 48deg 62deg,
      var(--chip-face) 62deg 104deg,
      var(--chip-tab) 104deg 118deg,
      var(--chip-edge) 118deg 152deg,
      var(--chip-tab) 152deg 166deg,
      var(--chip-face) 166deg 208deg,
      var(--chip-tab) 208deg 222deg,
      var(--chip-edge) 222deg 256deg,
      var(--chip-tab) 256deg 270deg,
      var(--chip-face) 270deg 312deg,
      var(--chip-tab) 312deg 326deg,
      var(--chip-edge) 326deg 360deg
    ),
    radial-gradient(circle at center, var(--chip-face) 0 54%, var(--chip-edge) 55% 72%, #061326 73% 100%);
  color: var(--chip-ink);
  cursor: pointer;
  font-weight: 900;
  overflow: hidden;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.34),
    inset 0 -8px 12px rgba(0, 0, 0, 0.42),
    0 8px 18px rgba(0, 0, 0, 0.34),
    0 0 14px var(--chip-glow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.54);
}

.chip-button::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 2px solid rgba(220, 231, 245, 0.72);
  border-left-color: rgba(220, 231, 245, 0.22);
  border-radius: 50%;
  transform: rotate(-24deg);
  box-shadow:
    0 0 0 6px rgba(4, 12, 24, 0.26),
    inset 0 1px 2px rgba(0, 0, 0, 0.24);
  opacity: 0.88;
}

.chip-button::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.28) 0 2px, transparent 3px),
    conic-gradient(from 0deg, transparent 0 42deg, rgba(220, 231, 245, 0.82) 42deg 47deg, transparent 47deg 90deg, rgba(220, 231, 245, 0.82) 90deg 95deg, transparent 95deg 180deg, rgba(220, 231, 245, 0.82) 180deg 185deg, transparent 185deg 270deg, rgba(220, 231, 245, 0.82) 270deg 275deg, transparent 275deg 360deg);
  opacity: 0.78;
}

.chip-value {
  position: absolute;
  left: 50%;
  z-index: 2;
}

.chip-value {
  top: 50%;
  color: var(--chip-ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.72);
}

.chip-5 {
  --chip-face: #0068c8;
  --chip-edge: #0c7fec;
  --chip-glow: rgba(0, 104, 200, 0.36);
}

.chip-10 {
  --chip-face: #111a2d;
  --chip-edge: #0b5fad;
  --chip-glow: rgba(0, 104, 200, 0.28);
}

.chip-25 {
  --chip-face: #ff6600;
  --chip-edge: #dd4f00;
  --chip-glow: rgba(255, 102, 0, 0.34);
}

.chip-50 {
  --chip-face: #9fb4c8;
  --chip-edge: #dce7f5;
  --chip-ink: #071326;
  --chip-glow: rgba(178, 210, 242, 0.24);
}

.chip-100 {
  --chip-face: #d9aa32;
  --chip-edge: #b77d11;
  --chip-ink: #111827;
  --chip-glow: rgba(255, 190, 64, 0.32);
}

.chip-button.active {
  border-color: rgba(255, 176, 96, 0.96);
  outline: 0;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.34),
    inset 0 -8px 12px rgba(0, 0, 0, 0.42),
    0 0 0 2px rgba(255, 102, 0, 0.72),
    0 0 0 6px rgba(255, 102, 0, 0.16),
    0 0 24px rgba(255, 102, 0, 0.58);
  transform: translateY(-1px);
}

.roulette-board {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(112, 180, 132, 0.58);
  border-radius: 10px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 8px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.06), transparent),
    #0f5d3f;
}

.number-board {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 6px;
}

.zero-stack {
  position: relative;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 6px;
}

.zero-stack .bet-button:only-child {
  min-height: 106px;
}

.number-rows {
  display: grid;
  gap: 6px;
}

.number-rows-wrap {
  position: relative;
}

.number-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(35px, 1fr)) 56px;
  gap: 5px;
}

.inside-hotspots {
  position: absolute;
  inset: 0 61px 0 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(35px, 1fr));
  grid-template-rows: repeat(3, 1fr);
  gap: 6px 5px;
  pointer-events: none;
  z-index: 6;
}

.dozen-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.outside-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.bet-button {
  position: relative;
  min-height: 46px;
  padding: 5px;
  border: 1px solid rgba(226, 237, 250, 0.42);
  border-radius: 7px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 850;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.inside-hotspot {
  --spot-x: 0;
  --spot-y: 0;
  position: relative;
  width: 18px;
  height: 18px;
  min-height: 0;
  align-self: center;
  justify-self: center;
  padding: 0;
  border: 1px solid rgba(255, 246, 215, 0.8);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, #ffffff 0 24%, var(--orange) 25% 54%, #7a2f00 55%);
  color: #081711;
  cursor: pointer;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.38;
  pointer-events: auto;
  text-shadow: none;
  transform: translate(var(--spot-x), var(--spot-y));
  z-index: 7;
}

.roulette-board:hover .inside-hotspot,
.inside-hotspot:focus-visible,
.inside-hotspot.has-chip {
  opacity: 0.92;
}

.inside-hotspot:hover {
  filter: brightness(1.18);
}

.split-horizontal-spot {
  --spot-x: calc(50% + 3px);
  justify-self: end;
}

.split-vertical-spot {
  --spot-y: calc(-50% - 3px);
  align-self: start;
}

.corner-spot {
  --spot-x: calc(50% + 3px);
  --spot-y: calc(-50% - 3px);
  align-self: start;
  justify-self: end;
}

.street-spot {
  --spot-y: calc(50% + 4px);
  align-self: end;
}

.sixline-spot {
  --spot-x: calc(50% + 3px);
  --spot-y: calc(50% + 4px);
  align-self: end;
  justify-self: end;
}

.zero-split-spot,
.zero-basket-spot {
  position: absolute;
  left: 50%;
}

.zero-split-spot {
  top: 50%;
  transform: translate(-50%, -50%);
}

.zero-basket-spot {
  right: -12px;
  bottom: -12px;
  left: auto;
}

.number-cell {
  min-height: 50px;
}

.outside-cell {
  min-height: 40px;
  background: rgba(7, 66, 45, 0.82);
}

.column-cell {
  color: #dce7f5;
}

.bet-button.has-chip::before {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 34px;
  height: var(--chip-stack-height, 13px);
  min-height: 12px;
  border: 1px solid rgba(220, 231, 245, 0.78);
  border-radius: 50% / 22%;
  background:
    radial-gradient(ellipse at 50% 16%, rgba(255, 255, 255, 0.42) 0 20%, transparent 21%),
    radial-gradient(ellipse at 50% 16%, var(--stack-face, var(--blue)) 0 55%, transparent 56%),
    repeating-linear-gradient(
      180deg,
      var(--stack-face, var(--blue)) 0 4px,
      var(--stack-edge, #8fcaff) 4px 6px,
      rgba(5, 12, 22, 0.94) 6px 8px
    );
  box-shadow:
    0 calc(var(--chip-stack-lift, 0px) / 2) 9px rgba(0, 0, 0, 0.44),
    0 0 12px var(--stack-glow, rgba(0, 104, 200, 0.36));
  z-index: 2;
}

.bet-button.has-chip::after {
  content: attr(data-amount);
  position: absolute;
  right: -2px;
  bottom: calc(10px + var(--chip-stack-height, 13px));
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  min-height: 17px;
  padding: 2px 7px;
  border: 1px solid rgba(244, 251, 255, 0.82);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(31, 50, 78, 0.98), rgba(3, 10, 22, 0.98)),
    #061326;
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  box-shadow:
    0 0 0 1px rgba(0, 104, 200, 0.24),
    0 4px 8px rgba(0, 0, 0, 0.45),
    0 0 10px var(--stack-glow, rgba(0, 104, 200, 0.32));
  z-index: 3;
}

.inside-hotspot.has-chip::before {
  right: -5px;
  bottom: -4px;
  width: 22px;
  height: var(--chip-stack-height, 10px);
  min-height: 9px;
}

.inside-hotspot.has-chip::after {
  right: -18px;
  bottom: calc(4px + var(--chip-stack-height, 10px));
  min-width: 40px;
  min-height: 15px;
  padding: 1px 5px;
  font-size: 9px;
}

.table-note,
.footer-note {
  margin: 14px 0 0;
  color: #aab7c8;
  font-size: 13px;
  line-height: 1.45;
}

.guide-panel {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(52, 107, 170, 0.58);
  border-radius: 10px;
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 104, 200, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(7, 25, 48, 0.92), rgba(4, 14, 28, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.guide-panel[hidden] {
  display: none;
}

.guide-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.guide-head-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.guide-head-row .guide-tabs {
  width: min(420px, 48%);
}

.guide-heading {
  margin-top: 10px;
}

.guide-heading h2,
.guide-head-row h2 {
  margin: 0;
  color: #f6f9ff;
  font-family: Inter, Lato, "Segoe UI", Arial, sans-serif;
  font-size: 19px;
}

.guide-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 9px;
  max-height: 250px;
  overflow: auto;
}

.guide-section {
  min-width: 0;
  padding-left: 10px;
  border-left: 2px solid rgba(0, 104, 200, 0.78);
}

.guide-section h3 {
  margin: 0 0 5px;
  color: #ff8b30;
  font-size: 13px;
}

.guide-section p,
.guide-section li {
  color: #dce7f5;
  font-size: 12px;
  line-height: 1.35;
}

.guide-section p {
  margin: 0;
}

.guide-section ul {
  margin: 0;
  padding-left: 16px;
}

.guide-section li + li {
  margin-top: 4px;
}

.table-guide-panel {
  min-height: 210px;
  margin-top: 10px;
  padding: 12px;
}

.table-guide-panel .guide-content {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.table-guide-panel .guide-section {
  padding-left: 12px;
}

.coach-message {
  min-height: 210px;
  max-height: clamp(340px, 50vh, 540px);
  margin-top: 10px;
  padding: 0;
  border: 1px solid rgba(109, 139, 176, 0.74);
  border-radius: 20px;
  background:
    linear-gradient(180deg, #eef4fb 0%, #dce7f3 100%);
  line-height: 1.38;
  overflow: auto;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    inset 0 16px 34px rgba(255, 255, 255, 0.22),
    0 12px 26px rgba(0, 0, 0, 0.18);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 104, 200, 0.48) rgba(218, 229, 242, 0.92);
}

.coach-section.is-expanded-chat .coach-message {
  min-height: 300px;
  max-height: clamp(420px, 58vh, 580px);
}

.sms-phone-bar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(52, 107, 170, 0.32);
  border-radius: 20px 20px 0 0;
  background:
    linear-gradient(180deg, #102a49, #07182d);
  color: #f4fbff;
  font-size: 12px;
}

.sms-phone-bar span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sms-phone-bar span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fe37b;
  box-shadow: 0 0 9px rgba(47, 227, 123, 0.72);
}

.sms-phone-bar b {
  font-size: 13px;
}

.sms-phone-bar em,
.sms-phone-bar small {
  color: #91a4bd;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sms-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 12px 16px;
}

.sms-message {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 9px;
  align-items: end;
  justify-items: start;
}

.sms-message.player {
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
}

.sms-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 50px;
  border: 1px solid rgba(78, 163, 255, 0.56);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 102, 0, 0.18), transparent 34%),
    linear-gradient(180deg, #102a49, #061326 78%);
  color: #ffffff;
  overflow: visible;
  box-shadow:
    0 0 14px rgba(0, 104, 200, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.pit-boss-avatar svg {
  display: block;
  width: 42px;
  height: 50px;
  overflow: visible;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.34));
}

.avatar-pulse {
  fill: none;
  stroke-width: 1;
  opacity: 0.18;
  transform-origin: 32px 38px;
  animation: avatarPulse 3s ease-in-out infinite;
}

.pulse-orange {
  stroke: #ff6600;
}

.pulse-blue {
  stroke: #0068c8;
  animation-delay: 1.2s;
}

.avatar-suit,
.avatar-lapel {
  fill: #071326;
  stroke: #0068c8;
  stroke-width: 0.7;
}

.avatar-shirt {
  fill: #dce7f5;
}

.avatar-neck,
.avatar-face,
.avatar-ear {
  fill: #d4933f;
}

.avatar-face {
  stroke: #9d6222;
  stroke-width: 0.7;
}

.avatar-visor {
  fill: #17703a;
  stroke: #38b56a;
  stroke-width: 0.8;
}

.avatar-hat,
.avatar-brim {
  fill: #07090f;
  stroke: #283449;
  stroke-width: 0.7;
}

.avatar-band,
.avatar-bowtie,
.avatar-bow-knot {
  fill: #ff6600;
}

.avatar-brow,
.avatar-smirk {
  fill: none;
  stroke: #341807;
  stroke-width: 2;
  stroke-linecap: round;
}

.avatar-eye ellipse {
  fill: #f6fbff;
}

.avatar-eye circle {
  fill: #0068c8;
  stroke: #001a55;
  stroke-width: 0.6;
}

.avatar-eye-left,
.avatar-eye-right {
  transform-origin: center;
  animation: avatarBlink 5.5s ease-in-out infinite;
}

.avatar-eye-right {
  animation-delay: 0.18s;
}

.avatar-nose {
  fill: rgba(155, 91, 27, 0.48);
}

.avatar-mustache {
  fill: #1d0d05;
}

.avatar-cigar {
  fill: #754012;
}

.avatar-ember {
  fill: #ff6600;
  filter: drop-shadow(0 0 3px rgba(255, 102, 0, 0.92));
}

.avatar-smoke {
  fill: rgba(120, 137, 155, 0.5);
  animation: avatarSmoke 2.4s ease-out infinite;
}

.smoke-two {
  animation-delay: 0.7s;
}

.avatar-pin {
  fill: #0068c8;
  stroke: #60aaff;
  stroke-width: 0.7;
}

.avatar-pin-text {
  fill: #ffffff;
  font-family: Inter, Lato, "Segoe UI", Arial, sans-serif;
  font-size: 3.8px;
  font-weight: 950;
  text-anchor: middle;
}

.avatar-status {
  fill: #2fe37b;
  animation: avatarStatus 2s ease-in-out infinite;
}

@keyframes avatarPulse {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.2;
  }

  55% {
    transform: scale(1.05);
    opacity: 0.04;
  }
}

@keyframes avatarBlink {
  0%,
  88%,
  100% {
    transform: scaleY(1);
  }

  93% {
    transform: scaleY(0.08);
  }
}

@keyframes avatarSmoke {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.55;
  }

  100% {
    transform: translate(1px, -9px) scale(1.5);
    opacity: 0;
  }
}

@keyframes avatarStatus {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.42;
  }
}

.sms-bubble {
  width: fit-content;
  max-width: min(100%, 310px);
  padding: 10px 11px;
  border: 1px solid rgba(177, 192, 211, 0.86);
  border-radius: 16px 16px 16px 4px;
  background:
    linear-gradient(180deg, #ffffff, #f2f6fb);
  color: #102033;
  box-shadow:
    0 8px 16px rgba(31, 54, 82, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.sms-message.player .sms-bubble {
  max-width: min(84%, 260px);
  margin-left: auto;
  border-color: rgba(0, 104, 200, 0.72);
  border-radius: 16px 16px 4px 16px;
  background:
    linear-gradient(180deg, #137ce6, #0068c8);
  color: #ffffff;
  box-shadow:
    0 8px 16px rgba(0, 64, 128, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sms-meta {
  display: block;
  margin-bottom: 6px;
  color: #62758d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sms-message.player .sms-meta {
  color: rgba(255, 255, 255, 0.78);
}

.coach-message h3 {
  margin: 0 0 7px;
  color: #ff8b30;
  font-size: 17px;
}

.coach-message p {
  margin: 7px 0 0;
}

.sms-bubble > p:first-child,
.sms-bubble h3 + p {
  margin-top: 0;
}

.recommendation-line {
  font-size: 15px;
}

.recommendation-chance {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: center;
  margin: 10px 0;
  padding: 9px 10px;
  border: 1px solid rgba(65, 131, 212, 0.78);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 104, 200, 0.2), rgba(7, 22, 41, 0.82));
  box-shadow: 0 0 18px rgba(0, 104, 200, 0.16);
}

.recommendation-chance span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.recommendation-chance strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #f6f9ff;
  font-family: Inter, Lato, "Segoe UI", Arial, sans-serif;
  font-size: 34px;
  line-height: 1;
}

.sms-bubble .recommendation-chance {
  margin: 8px 0;
  padding: 8px;
  border-color: rgba(0, 104, 200, 0.28);
  background: linear-gradient(135deg, #e7f2ff, #f6faff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.86);
}

.sms-bubble .recommendation-chance strong {
  color: #0068c8;
  font-size: 28px;
}

.sms-bubble .recommendation-chance span {
  color: #62758d;
}

.sms-bubble .recommendation-chance em {
  color: #102033;
}

.sms-bubble .recommendation-meta {
  grid-template-columns: 1fr 1fr;
}

.sms-bubble .recommendation-meta div {
  border-color: rgba(145, 164, 189, 0.46);
  background: rgba(236, 243, 251, 0.92);
}

.sms-bubble .recommendation-meta dt {
  color: #62758d;
}

.sms-bubble .recommendation-meta dd {
  color: #102033;
}

.sms-bubble .recommendation-signals {
  margin-top: 8px;
  border-color: rgba(0, 104, 200, 0.22);
  background: rgba(236, 243, 251, 0.92);
}

.sms-bubble .recommendation-signals span {
  color: #0068c8;
}

.sms-bubble .recommendation-signals ul {
  color: #102033;
}

.recommendation-chance em {
  color: var(--ink);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.recommendation-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 9px 0;
}

.recommendation-meta div {
  padding: 6px;
  border: 1px solid rgba(52, 107, 170, 0.52);
  border-radius: 8px;
  background: rgba(7, 22, 41, 0.62);
}

.recommendation-meta .confidence-high {
  border-color: rgba(85, 214, 128, 0.78);
  background: rgba(35, 132, 75, 0.22);
}

.recommendation-meta .confidence-medium {
  border-color: rgba(78, 163, 255, 0.72);
  background: rgba(0, 104, 200, 0.14);
}

.recommendation-meta .confidence-low,
.recommendation-meta .confidence-none {
  border-color: rgba(255, 122, 26, 0.58);
  background: rgba(255, 122, 26, 0.1);
}

.recommendation-meta dt {
  color: #91a4bd;
  font-size: 12px;
}

.recommendation-meta dd {
  margin: 2px 0 0;
  font-weight: 800;
}

.recommendation-meta dd span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.recommendation-signals {
  margin-top: 10px;
  padding: 8px;
  border: 1px solid rgba(52, 107, 170, 0.48);
  border-radius: 8px;
  background: rgba(7, 22, 41, 0.62);
}

.recommendation-signals span {
  display: block;
  color: #4ea3ff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.recommendation-signals ul {
  margin: 6px 0 0;
  padding-left: 17px;
  color: var(--ink);
  font-size: 12px;
}

.recommendation-signals li + li {
  margin-top: 3px;
}

.coach-actions,
.bet-actions {
  margin-top: 9px;
  display: grid;
  grid-template-columns: minmax(86px, 1fr) minmax(82px, 1fr) minmax(76px, 1fr);
  gap: 8px;
}

.coach-actions > button {
  flex: 1;
}

.bet-actions > button {
  min-width: 0;
  padding-inline: 8px;
}

.undo-button {
  border-color: rgba(78, 163, 255, 0.78);
  color: #dce7f5;
}

.coach-warning {
  margin-top: 12px;
}

.coach-warning p {
  margin: 8px 0 0;
  padding: 10px;
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  background: rgba(255, 122, 26, 0.12);
  color: #ffe5d1;
  line-height: 1.42;
}

.coach-warning p.manual-chance-notice {
  border-left-color: #4ea3ff;
  background: rgba(0, 104, 200, 0.14);
  color: var(--ink);
}

.manual-chance-notice strong {
  color: #4ea3ff;
}

.manual-chance-notice span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.opponent-bets,
.round-summary {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.opponent-profile .opponent-bets {
  min-width: 0;
  margin-top: 0;
}

.opponent-profile {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}

.opponent-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 82px;
  min-height: 106px;
  border: 1px solid rgba(255, 170, 0, 0.36);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 170, 0, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(16, 26, 42, 0.98), rgba(5, 12, 24, 0.96));
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 18px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(255, 170, 0, 0.08);
}

.opponent-avatar svg {
  display: block;
  width: 76px;
  height: 92px;
  overflow: visible;
  filter:
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 8px rgba(255, 170, 0, 0.16));
}

.rival-pulse {
  fill: none;
  stroke-width: 1;
  opacity: 0.2;
  transform-origin: 44px 50px;
  animation: rivalPulse 3.2s ease-in-out infinite;
}

.rival-pulse-gold {
  stroke: #ffaa00;
}

.rival-pulse-blue {
  stroke: #0068c8;
  animation-delay: 1.1s;
}

.rival-suit {
  fill: #11131e;
  stroke: #2e3444;
  stroke-width: 0.8;
}

.rival-shirt {
  fill: #e5edf8;
}

.rival-tie {
  fill: #7b0707;
}

.rival-neck,
.rival-face,
.rival-ear {
  fill: #c8a050;
}

.rival-face {
  stroke: #7a541b;
  stroke-width: 0.75;
}

.rival-hair {
  fill: #080705;
}

.rival-hair-shine {
  fill: none;
  stroke: #342015;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.rival-brow,
.rival-smirk,
.rival-glasses {
  fill: none;
  stroke: #100804;
  stroke-linecap: round;
}

.rival-brow {
  stroke-width: 2.2;
}

.rival-brow-right {
  animation: rivalBrow 7s ease-in-out infinite;
}

.rival-glasses {
  stroke: #b7c2cf;
  stroke-width: 1;
}

.rival-eye ellipse {
  fill: #faf7ef;
}

.rival-eye circle {
  fill: #0068c8;
  stroke: #001540;
  stroke-width: 0.6;
}

.rival-eye-left,
.rival-eye-right {
  transform-origin: center;
  animation: rivalBlink 6s ease-in-out infinite;
}

.rival-eye-right {
  animation-delay: 0.2s;
}

.rival-lens {
  fill: rgba(8, 18, 48, 0.82);
  stroke: #8b97a8;
  stroke-width: 0.6;
}

.rival-nose {
  fill: rgba(125, 83, 29, 0.48);
}

.rival-goatee {
  fill: rgba(18, 9, 5, 0.82);
}

.rival-cigarette {
  fill: #f1ede6;
}

.rival-ember {
  fill: #ff6600;
  filter: drop-shadow(0 0 3px rgba(255, 102, 0, 0.9));
}

.rival-smoke {
  fill: rgba(174, 186, 200, 0.48);
  animation: rivalSmoke 2.8s ease-out infinite;
}

.smoke-b {
  animation-delay: 0.8s;
}

.rival-chips rect {
  fill: #0068c8;
  stroke: #4ea3ff;
  stroke-width: 0.6;
}

.rival-chips rect:nth-child(1),
.rival-chips rect:nth-child(2) {
  fill: #0e7a3d;
  stroke: #2ed06f;
}

.rival-chips ellipse {
  fill: #d9aa32;
  stroke: #ffcc44;
  stroke-width: 0.8;
  animation: rivalChipGlow 2s ease-in-out infinite;
}

.rival-watch rect {
  fill: #d9aa32;
  stroke: #ffcc44;
  stroke-width: 0.6;
}

.rival-watch circle {
  fill: #071326;
}

.rival-watch-hand {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.8;
  stroke-linecap: round;
  transform-origin: 14.5px 80px;
  animation: rivalWatch 1s steps(1) infinite;
}

.rival-status {
  fill: none;
  stroke: #0068c8;
  stroke-width: 0.8;
  opacity: 0.36;
  animation: rivalStatus 1.5s ease-in-out infinite;
}

.rival-nameplate {
  fill: #080a12;
  stroke: #ffaa00;
  stroke-width: 0.8;
}

.rival-name {
  fill: #ffaa00;
  font-family: Inter, Lato, "Segoe UI", Arial, sans-serif;
  font-size: 5px;
  font-weight: 950;
  text-anchor: middle;
  letter-spacing: 1px;
}

@keyframes rivalPulse {
  0%,
  100% {
    transform: scale(0.93);
    opacity: 0.26;
  }

  55% {
    transform: scale(1.06);
    opacity: 0.04;
  }
}

@keyframes rivalBlink {
  0%,
  82%,
  100% {
    transform: scaleY(1);
  }

  87% {
    transform: scaleY(0.08);
  }
}

@keyframes rivalBrow {
  0%,
  92%,
  100% {
    transform: translateY(0);
  }

  95% {
    transform: translateY(-1.6px);
  }
}

@keyframes rivalSmoke {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.48;
  }

  100% {
    transform: translate(3px, -12px) scale(1.7);
    opacity: 0;
  }
}

@keyframes rivalChipGlow {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.66;
  }
}

@keyframes rivalWatch {
  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(8deg);
  }
}

@keyframes rivalStatus {
  0%,
  100% {
    opacity: 0.52;
  }

  50% {
    opacity: 0.16;
  }
}

.ringer-quip {
  color: #ff8b30;
  font-weight: 800;
}

.opponent-bet-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.opponent-bet-row span {
  grid-column: 1 / -1;
  color: #4ea3ff;
  font-size: 12px;
}

.bet-list {
  display: grid;
  gap: 7px;
  min-height: 72px;
  margin-top: 8px;
}

.bet-row {
  display: grid;
  grid-template-columns: 1fr auto 30px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
}

.bet-row span,
.bet-math span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.bet-math {
  max-width: 170px;
  min-width: 132px;
  text-align: right;
}

.icon-button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
  cursor: pointer;
}

.empty-state {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.is-muted {
  opacity: 0.72;
}

.is-hidden {
  display: none;
}

.footer-note {
  padding: 14px 4px 0;
  text-align: center;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: 430px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #102d27;
  color: var(--ink);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 20;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.58);
  z-index: 30;
}

.modal-backdrop[hidden] {
  display: none;
}

.reset-modal {
  width: min(460px, 100%);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-solid);
  box-shadow: var(--shadow);
}

.reset-modal p {
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 1420px) {
  .topbar {
    grid-template-columns: minmax(240px, 1fr) auto auto;
  }

  .variant-control {
    grid-column: 1 / 2;
  }

  .bankroll-strip {
    grid-column: 2 / -1;
    flex-wrap: wrap;
  }
}

@media (max-width: 1180px) {
  .app-shell {
    width: calc(100vw - 24px);
  }

  .brand-block h1 {
    font-size: 31px;
  }

  .guide-button,
  .mode-button {
    min-width: auto;
    padding: 0 11px;
  }

  .bankroll-strip > div {
    min-width: 106px;
  }

  .game-grid {
    grid-template-columns: 300px minmax(520px, 1fr) 340px;
    gap: 12px;
  }

  .number-row {
    grid-template-columns: repeat(12, minmax(34px, 1fr)) 56px;
  }

  .bet-button {
    font-size: 14px;
  }

  .guide-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ════════════════════════════════════════════════════════════════
   THE RINGER — CASINO OVERRIDES  (appended; wins the cascade)
   Fehringer Digital · classy-casino reskin + Claude chat styling
   ════════════════════════════════════════════════════════════════ */

/* ---- Typography: serif for display headings, sans for chrome ---- */
.brand-block h1,
.panel-heading h2,
.table-header h2,
.guide-head-row h2,
.reset-modal h2,
#wheelTitle,
#coachTitle {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.eyebrow,
.control-label,
.panel-subheading,
.status-pill,
.selected-chip-label { font-family: var(--sans); }

/* ---- Brand wordmark ---- */
.brand-block h1 { color: var(--ink); }
.brand-block .brand-the { color: var(--gold-bright); font-style: italic; }
.brand-block .brand-roulette { color: var(--ink); }
.brand-block .eyebrow { color: var(--muted); letter-spacing: 2px; }

/* ---- Panels: warmer felt, gold hairline ---- */
.panel,
.table-panel,
.side-panel > section {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(27, 110, 84, 0.10), transparent 60%),
    var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(212, 175, 106, 0.06);
}
.topbar {
  background:
    linear-gradient(180deg, rgba(20, 14, 9, 0.85), rgba(13, 9, 6, 0.92));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* ---- Mode toggle + primary buttons: gold ---- */
.mode-button.active {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #23190d;
  border-color: var(--gold-dark);
}
.primary-button,
.spin-button {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dark));
  color: #23190d;
  border: 1px solid var(--gold-dark);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.primary-button:hover,
.spin-button:hover { filter: brightness(1.07); }
.status-pill { border-color: var(--line); color: var(--gold-bright); }

/* ---- Roulette wheel: gold hub, drop the phone receiver ---- */
.phone-receiver,
.phone-receiver::before,
.phone-receiver::after { display: none !important; }
.phone-body::after,
.phone-body::before { opacity: 0.5; }
.wheel-center {
  border: 2px solid var(--gold);
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 248, 232, 0.25), transparent 40%),
    radial-gradient(circle at center, #241a10, #120c06 72%);
  color: var(--gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 232, 0.4),
    0 0 0 4px rgba(212, 175, 106, 0.18),
    0 6px 16px rgba(0, 0, 0, 0.5);
}
.wheel-center::after {
  content: "R";
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 16%, 32px);
  color: var(--gold-bright);
}
.wheel-arc-window::before { border-top-color: var(--gold-bright) !important; }

/* ---- History tiles: chip-like with gold rims ---- */
.history-tile,
.history-tray > * { border-color: rgba(212, 175, 106, 0.30) !important; }

/* ---- Chips: gold edge accents ---- */
.chip-button { box-shadow: 0 4px 10px rgba(0,0,0,0.45), 0 0 0 1px rgba(212,175,106,0.25); }

/* ════════════════════════════════════════════════════════════════
   CLAUDE-POWERED COACH CHAT
   ════════════════════════════════════════════════════════════════ */
.coach-section { position: relative; }

.powered-by-claude {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--clay);
  border: 1px solid rgba(201, 100, 66, 0.45);
  border-radius: 11px;
  padding: 2px 9px;
}
.powered-by-claude .spark { color: var(--clay); font-size: 11px; line-height: 1; }

/* Coach thread bubbles */
.coach-bubble.coach-bubble-coach {
  border-left: 2px solid var(--clay);
}
.coach-bubble.coach-bubble-coach .coach-bubble-author { color: var(--clay); }

/* Chat input row */
.coach-chat-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  background: rgba(20, 14, 9, 0.7);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 5px 6px 5px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.coach-chat-form:focus-within {
  border-color: rgba(201, 100, 66, 0.6);
  box-shadow: 0 0 0 3px var(--clay-soft);
}
.coach-chat-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  resize: none;
  max-height: 80px;
  line-height: 1.4;
  padding: 4px 0;
}
.coach-chat-input::placeholder { color: var(--muted); }
.coach-chat-send {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--clay);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.coach-chat-send:hover { filter: brightness(1.1); }
.coach-chat-send:active { transform: scale(0.94); }
.coach-chat-send:disabled { opacity: 0.45; cursor: default; }

/* Typing indicator */
.coach-typing { display: inline-flex; gap: 4px; align-items: center; padding: 6px 2px; }
.coach-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay);
  animation: coachTyping 1.2s infinite ease-in-out;
}
.coach-typing span:nth-child(2) { animation-delay: 0.18s; }
.coach-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes coachTyping {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Footer attribution */
.footer-note { color: var(--muted); }
.footer-note .by-line { color: var(--gold); font-family: var(--serif); font-style: italic; }

/* Quick-bet controls: let the action rows wrap and stay compact */
.bet-actions,
.coach-actions { flex-wrap: wrap; }
.bet-actions .secondary-button,
.coach-actions .secondary-button { flex: 1 1 auto; min-width: 84px; }
#repeatBetButton,
#doubleBetButton { font-variant: small-caps; }

/* 3D wheel overlay (falls back to the original dial if WebGL is unavailable) */
.wheel-3d{ position:absolute; inset:0; width:100%; height:100%; z-index:7; display:none; pointer-events:none; }
body.wheel3d-on .wheel-3d{ display:block; }
body.wheel3d-on #rouletteWheel{ display:none; }

/* WebGL compositing isolation: with the 3D wheel on the page, give each panel its
   own GPU layer so it repaints cleanly after the layout shifts post-spin (no ghosts). */
.wheel-3d { transform: translateZ(0); }
body.wheel3d-on .wheel-arc-window { isolation: isolate; }
body.wheel3d-on .panel,
body.wheel3d-on .table-panel,
body.wheel3d-on .side-panel > section { transform: translateZ(0); }
.footer-note .by-line a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(212,175,106,0.5); }
.footer-note .by-line a:hover { color: var(--gold-bright, #e8c878); border-bottom-color: currentColor; }

/* Compact Ringer recommendation cards so a full reply fits without scrolling */
.sms-bubble h3 { font-size: 14px; margin: 2px 0 4px; }
.sms-bubble p { margin: 4px 0; }
.sms-bubble .recommendation-line { margin: 4px 0; }
.sms-bubble .recommendation-chance { margin: 6px 0; padding: 5px 9px; gap: 0 10px; }
.sms-bubble .recommendation-chance strong { font-size: 18px; }
.sms-bubble .recommendation-chance span { font-size: 10px; }
.sms-bubble .recommendation-chance em { font-size: 10px; }
.sms-bubble .recommendation-meta { margin: 6px 0; gap: 4px; }
.sms-bubble .recommendation-meta div { padding: 3px 6px; }
.sms-bubble .recommendation-meta dt { font-size: 9px; }
.sms-bubble .recommendation-meta dd { font-size: 11px; }
.sms-bubble .recommendation-signals { margin-top: 6px; padding: 5px 8px; }
.sms-bubble .recommendation-signals span { font-size: 9px; }
.sms-bubble .recommendation-signals ul { margin: 2px 0 0; }
.sms-bubble .recommendation-signals li { font-size: 10px; line-height: 1.3; }

/* ============================================================
   Layout refresh: Bet Slip under the board, Learning Guide as a
   collapsible drawer, Round Summary folded into the coach thread.
   ============================================================ */

/* Bet Slip now sits beneath the betting board as a divided sub-section */
.table-panel .bet-slip-section {
  order: 0;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(52, 107, 170, 0.45);
}

/* Round Summary removed from view — the coach already posts the round result */
.round-section { display: none; }

/* Learning Guide collapsible drawer (collapsed by default) */
.guide-drawer { min-height: 0; padding: 0; overflow: hidden; }
.guide-drawer > .guide-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
}
.guide-drawer > .guide-summary::-webkit-details-marker { display: none; }
.guide-drawer > .guide-summary:hover { background: rgba(0, 104, 200, 0.08); }
.guide-summary-label { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.guide-summary .eyebrow { margin: 0; }
.guide-summary-hint {
  font-size: 11px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.guide-chevron { color: var(--muted); font-size: 12px; transition: transform 0.18s ease; }
.guide-drawer[open] > .guide-summary .guide-chevron { transform: rotate(180deg); }
.guide-body { padding: 0 12px 12px; }
.guide-title {
  margin: 10px 0 0;
  color: #f6f9ff;
  font-family: Inter, Lato, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
}

/* "Ask Ringer" input: light, high-contrast field so it's obviously typeable */
.coach-chat-form {
  background: #eef3fb;
  border: 1px solid rgba(120, 150, 185, 0.65);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.coach-chat-form:focus-within {
  border-color: #0068c8;
  box-shadow: 0 0 0 3px rgba(0, 104, 200, 0.20);
}
.coach-chat-input { color: #14233a; }
.coach-chat-input::placeholder { color: #6c7e93; }

/* ============================================================
   Combo-bet clarity: when a split / street / corner / six-line is
   placed, light up the exact number cells it covers AND make the
   hotspot marker read as a clear, glowing spot on the felt.
   ============================================================ */
.number-cell.combo-covered {
  box-shadow:
    inset 0 0 0 2px rgba(255, 224, 112, 0.95),
    inset 0 0 16px rgba(255, 205, 70, 0.42);
}
.number-cell.combo-covered::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 224, 112, 0.10), transparent 60%);
}

/* Active combo marker: full opacity, gold ring, soft glow, raised above cells */
.inside-hotspot.has-chip {
  opacity: 1;
  border-color: #fff3c0;
  box-shadow:
    0 0 0 2px rgba(255, 224, 112, 0.9),
    0 0 12px 3px rgba(255, 198, 66, 0.6);
  z-index: 9;
}

/* ============================================================
   Easier combo targeting: hotspots are a touch larger, and the one
   under the cursor scales up and jumps to the front so dense corner
   clusters (4-number spots) stop fighting each other.
   ============================================================ */
.inside-hotspot {
  width: 20px;
  height: 20px;
  transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.inside-hotspot:hover,
.inside-hotspot:focus-visible {
  transform: translate(var(--spot-x), var(--spot-y)) scale(1.5);
  z-index: 20;
  opacity: 1;
  filter: brightness(1.2);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.6),
    0 0 10px 3px rgba(255, 200, 80, 0.6);
}


/* ════════════════════════════════════════════════════════════════
   Reverted to the original 3-column layout. Kept below: the chip-flow
   visuals (wins → Player balance, losses → House rack), cleaner/legible
   chips, and click-drag-drop chip placement.
   ════════════════════════════════════════════════════════════════ */

/* ---- House rack (loss destination) in the bankroll strip ---- */
#houseRack {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 12px; border-radius: 12px;
  border: 1px solid rgba(212, 175, 106, 0.42);
  background: linear-gradient(180deg, rgba(30, 19, 10, 0.92), rgba(11, 8, 5, 0.95));
}
#houseRack .house-label { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: #c8b27a; }
#houseRack .house-chips { display: flex; gap: 3px; align-items: flex-end; }
#houseRack .house-disc { width: 16px; height: 4px; border-radius: 50% / 60%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
#houseRack.pulse { animation: houseGrow 0.42s ease; }
@keyframes houseGrow { 40% { transform: scale(1.12); box-shadow: 0 0 14px rgba(255, 120, 90, 0.5); } }

/* ---- Player balance win pulse ---- */
#playerBankroll.win-pulse { animation: winPulse 0.5s ease; display: inline-block; }
@keyframes winPulse { 40% { transform: scale(1.18); color: #7cfc9a; } }

/* ---- Flying-chip overlay ---- */
#ringerFx { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
#ringerFx .ringer-fly {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(var(--c, #c1121f) 0 25%, #fff 0 50%, var(--c, #c1121f) 0 75%, #fff 0 100%);
  box-shadow: inset 0 0 0 3px var(--c, #c1121f), inset 0 0 0 4px rgba(255, 255, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.5);
}

/* ---- Cleaner, more legible chips: solid face + one clean edge ring +
   bold value. Per-denomination colors preserved. ---- */
.chip-button {
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(circle at center, var(--chip-face) 0 66%, var(--chip-edge) 67% 100%);
  cursor: grab;
}
.chip-button::before {
  inset: 6px;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-left-color: rgba(255, 255, 255, 0.6);
  transform: none;
  box-shadow: none;
  opacity: 0.68;
}
.chip-button::after { display: none; }
.chip-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--chip-ink);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 1px rgba(0, 0, 0, 0.45);
}

/* ---- Click-drag-drop chip placement ---- */
body.chip-dragging, body.chip-dragging .chip-button { cursor: grabbing; }
.chip-drag-ghost {
  position: fixed; z-index: 140; pointer-events: none;
  width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.7; transform: scale(0.82);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(circle at center, var(--chip-face, #0068c8) 0 66%, var(--chip-edge, #0c7fec) 67% 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.chip-drag-ghost .chip-value { position: static; transform: none; font-size: 13px; font-weight: 800; color: var(--chip-ink, #fff); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
/* droppable bet cell highlight during a chip drag */
.chip-drop-hover { outline: 2px solid #ffd76a !important; outline-offset: -2px; box-shadow: 0 0 12px rgba(255, 205, 70, 0.65) !important; }


/* ---- Chip rail moved beneath the board: sits like a tray in front of the
   player (push chips forward), and lifts the board higher in the panel. ---- */
/* Chips relocated into the Bet Slip header row — removes the standalone chip band */
.bet-slip-heading { flex-wrap: nowrap; }
.bet-slip-heading .bet-slip-title { flex: 0 0 auto; }
.table-panel #chipRack {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border-top: 0;
}
.table-panel #chipRack .chip-button { width: 48px; height: 48px; }
.table-panel #chipRack .chip-value { font-size: 15px; }
.table-panel .table-header { margin-bottom: 3px; }