/* ==========================================================================
   stake-v49.css — FULL STAKE VISUAL UPGRADE (presentation only)
   No markup, no logic, no mechanics touched. Pure paint layer:
   authentic Stake palette, radii, typography, states and depth.
   ========================================================================== */

:root {
  --s-bg: #1a2c38;
  --s-game: #0f212e;
  --s-panel: #213743;
  --s-input: #0f212e;
  --s-btn: #2f4553;
  --s-btn-hi: #557086;
  --s-blue: #1a80f5;
  --s-blue-hi: #1475e1;
  --s-green: #00e701;
  --s-muted: #b1bad3;
  --s-line: rgba(255, 255, 255, 0.06);
  --s-r: 4px;
}

/* ---------- shell ---------- */
html body main[class*="bg-[#22394a]"] {
  background: var(--s-bg) !important;
  font-family: "Chakra Petch", system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ---------- game canvas ---------- */
html body main section[class*="bg-[#0d1e2a]"] {
  background: var(--s-game) !important;
  border-radius: 0 !important;
}
@media (min-width: 1024px) {
  html body main section[class*="bg-[#0d1e2a]"] {
    border-radius: var(--s-r) !important;
    box-shadow: none !important;
  }
}
/* calmer, Stake-like ambience: kill the noise weave + heavy conic sheen */
html body main section[class*="bg-[#0d1e2a]"] > div[aria-hidden="true"][class*="opacity-[0.55]"],
html body main section[class*="bg-[#0d1e2a]"] > div[aria-hidden="true"][class*="conic"],
html body main section[class*="bg-[#0d1e2a]"] > div[aria-hidden="true"][class*="w-[120%]"] {
  opacity: 0.18 !important;
}

/* ---------- bet panel ---------- */
html body main section[class*="linear-gradient(180deg,#2f4f61"] {
  background: var(--s-panel) !important;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
  gap: 0 !important;
  padding: 10px 12px 12px !important;
}
@media (min-width: 1024px) {
  html body main section[class*="linear-gradient(180deg,#2f4f61"] {
    border-radius: var(--s-r) !important;
    padding: 12px !important;
  }
}
/* consistent vertical rhythm between panel rows */
html body main section[class*="linear-gradient(180deg,#2f4f61"] > * + * {
  margin-top: 9px !important;
}

/* ---------- labels ---------- */
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="text-white/55"] {
  color: var(--s-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding-bottom: 4px !important;
  text-transform: none !important;
}

/* ---------- segmented toggles (Standard/Side Bet, Manual/Auto) ---------- */
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="rounded-full"][class*="bg-[#0b1a24]"] {
  background: var(--s-input) !important;
  border-radius: 9999px !important;
  padding: 4px !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
  gap: 0 !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="rounded-full"][class*="bg-[#0b1a24]"] > button {
  border-radius: 9999px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 7px 8px !important;
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    background-color 0.18s ease,
    color 0.18s ease !important;
}
/* active segment = Stake grey pill */
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="rounded-full"][class*="bg-[#0b1a24]"] > button[class*="#2f93f5"] {
  background: var(--s-btn) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="rounded-full"][class*="bg-[#0b1a24]"] > button[class*="text-white/45"] {
  color: var(--s-muted) !important;
}

/* ---------- selection buttons (EVEN/ODD/RED/BLACK/side bets) ---------- */
html body main section[class*="linear-gradient(180deg,#2f4f61"] button[class*="linear-gradient(180deg,#38505f"] {
  background: var(--s-btn) !important;
  border-radius: var(--s-r) !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  --tw-ring-color: transparent !important;
  transition:
    background-color 0.18s ease,
    transform 0.08s ease !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] button[class*="linear-gradient(180deg,#38505f"]:hover {
  background: var(--s-btn-hi) !important;
  filter: none !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] button[class*="linear-gradient(180deg,#38505f"]:active {
  transform: scale(0.99) !important;
}
/* selected pick = Stake blue */
html body main section[class*="linear-gradient(180deg,#2f4f61"] button[class*="linear-gradient(180deg,#3a9bff"],
html body main section[class*="linear-gradient(180deg,#2f4f61"] button[class*="linear-gradient(180deg,#2f93f5"]:not([class*="rounded-full"]) {
  background: var(--s-blue) !important;
  border-radius: var(--s-r) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px -4px rgba(26, 128, 245, 0.8) !important;
}
/* multiplier sublabels */
html body main section[class*="linear-gradient(180deg,#2f4f61"] button span[class*="text-[9px]"] {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  opacity: 0.62 !important;
  margin-top: 2px !important;
}
/* standalone multiplier chip */
html body main section[class*="linear-gradient(180deg,#2f4f61"] span[class*="bg-[#0b1a24]"],
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="bg-[#0b1a24]"][class*="place-items-center"] {
  background: var(--s-input) !important;
  border-radius: var(--s-r) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
}

/* ---------- primary bet button ---------- */
html body main section[class*="linear-gradient(180deg,#2f4f61"] button[class*="w-full"] {
  border-radius: var(--s-r) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  line-height: 1 !important;
  transition:
    background-color 0.18s ease,
    transform 0.08s ease !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] button[class*="w-full"]:not([disabled]) {
  background: var(--s-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px -8px rgba(26, 128, 245, 0.9) !important;
  text-shadow: none !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] button[class*="w-full"]:not([disabled]):hover {
  background: var(--s-blue-hi) !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] button[class*="w-full"]:not([disabled]):active {
  transform: scale(0.995) !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] button[class*="w-full"][disabled] {
  background: #2f4553 !important;
  color: rgba(255, 255, 255, 0.42) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* ---------- inputs ---------- */
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="rounded-md"][class*="overflow-hidden"] {
  border-radius: var(--s-r) !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="bg-[#0b1a24]"]:not([class*="rounded-full"]):not([class*="place-items-center"]) {
  background: var(--s-input) !important;
  box-shadow: inset 0 0 0 1px rgba(47, 69, 83, 0.9) !important;
  --tw-ring-color: transparent !important;
  border-radius: var(--s-r) !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="focus-within:ring"]:focus-within {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 0 2px rgba(26, 128, 245, 0.18) !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] input {
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] span[class*="text-white/45"] {
  color: var(--s-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] span[class*="text-white/70"][class*="tabular-nums"] {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 14px !important;
}

/* ½ / 2× stepper */
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="items-stretch"][class*="linear-gradient(180deg,#38505f"] {
  background: var(--s-btn) !important;
  box-shadow: none !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="items-stretch"][class*="linear-gradient(180deg,#38505f"] > button {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  transition: background-color 0.15s ease !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="items-stretch"][class*="linear-gradient(180deg,#38505f"] > button:hover {
  background: var(--s-btn-hi) !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="items-stretch"][class*="linear-gradient(180deg,#38505f"] span[class*="bg-white/25"] {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* ---------- utility row (icons + Fairness) ---------- */
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="bg-[#0b1a24]/70"] {
  background: var(--s-input) !important;
  border-radius: var(--s-r) !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
  padding: 5px 6px !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="bg-[#0b1a24]/70"] button {
  color: var(--s-muted) !important;
  border-radius: var(--s-r) !important;
  transition:
    color 0.15s ease,
    background-color 0.15s ease !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class*="bg-[#0b1a24]/70"] button:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] button[class*="bg-[#3a5568]"] {
  background: var(--s-btn) !important;
  border-radius: var(--s-r) !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  padding: 7px 10px !important;
}
html body main section[class*="linear-gradient(180deg,#2f4f61"] button[class*="bg-[#3a5568]"]:hover {
  background: var(--s-btn-hi) !important;
}

/* ---------- balance chip (keeps v47 placement, Stake finish) ---------- */
html body main section > div[class*="tabular-nums"][class*="top-3"][class*="right-4"] {
  background: rgba(15, 33, 46, 0.9) !important;
  box-shadow: inset 0 0 0 1px rgba(47, 69, 83, 0.9) !important;
  border-radius: var(--s-r) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* ---------- scrollbar ---------- */
html body main section[class*="linear-gradient(180deg,#2f4f61"]::-webkit-scrollbar {
  width: 0;
}