/* ===== DECK v35 — Stake two-screen layout (presentation only) ===== */

/* ---------- page scrolls like a Stake game page (2 screens) ---------- */
html, body { height: auto !important; min-height: 100%; overflow-y: auto !important; }
#root { height: auto !important; min-height: 100vh; overflow: visible !important; }

main[class*="bg-[#22394a]"] {
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
  background: #1a2c38 !important;
}
main[class*="bg-[#22394a]"] > div {
  flex: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* ---------- top: game area gets a fixed, generous, fully visible height ---------- */
section[class*="bg-[#0d1e2a]"] {
  flex: none !important;
  height: 62vh !important;
  min-height: 62vh !important;
  max-height: 62vh !important;
  border-radius: 8px 8px 0 0 !important;
  background: #0f212e !important;
}
@media (max-height: 700px) {
  section[class*="bg-[#0d1e2a]"] { height: 58vh !important; min-height: 58vh !important; max-height: 58vh !important; }
}

/* bigger main card now that the felt has room */
[class*="--cw:clamp"] { --cw: clamp(126px, min(52vw, 24vh), 232px) !important; }

/* ---------- bottom: full Stake bet panel, nothing clipped ---------- */
section[class*="linear-gradient(180deg,#2f4f61"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: #213743 !important;
  padding: 12px !important;
  border-radius: 0 0 8px 8px !important;
}
section[class*="linear-gradient(180deg,#2f4f61"] > * { margin: 0 !important; }

/* Bet CTA — Stake blue, full width, tall */
section[class*="linear-gradient(180deg,#2f4f61"] > button[class*="w-full"] {
  padding: 14px 0 !important;
  font-size: 15px !important;
  border-radius: 4px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Bet Amount / Profit on Win: stacked full width like the screenshot */
section[class*="linear-gradient(180deg,#2f4f61"] > div[class*="grid-cols-2"]:has(input) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
section[class*="linear-gradient(180deg,#2f4f61"] div:has(> input) { padding: 4px 10px !important; }
section[class*="linear-gradient(180deg,#2f4f61"] input {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  font-size: 14px !important;
}
section[class*="linear-gradient(180deg,#2f4f61"] [class*="text-[10.5px]"] {
  font-size: 12px !important;
  color: #b1bad3 !important;
  padding-bottom: 5px !important;
}
/* ½ | 2× group */
section[class*="linear-gradient(180deg,#2f4f61"] button:is([class*="px-2.5"])[class*="text-[12px]"] {
  padding-left: 16px !important;
  padding-right: 16px !important;
  font-size: 13px !important;
}
/* Profit readout height matches the input */
section[class*="linear-gradient(180deg,#2f4f61"] div[class*="bg-[#0b1a24]/80"] {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Autobet / Settings -> Stake "Manual | Auto" segmented pill */
section[class*="linear-gradient(180deg,#2f4f61"] > div[class*="grid-cols-2"]:not(:has(input)):has(> button[class*="rounded-lg"]) {
  background: #0f212e !important;
  border-radius: 999px !important;
  padding: 5px !important;
  gap: 4px !important;
}
section[class*="linear-gradient(180deg,#2f4f61"] > div[class*="grid-cols-2"]:not(:has(input)) > button[class*="rounded-lg"] {
  border-radius: 999px !important;
  padding: 10px 0 !important;
  font-size: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
}
section[class*="linear-gradient(180deg,#2f4f61"] > div[class*="grid-cols-2"]:not(:has(input)) > button[class*="rounded-lg"]:first-child {
  background: #2f4553 !important;
  color: #fff !important;
}

/* icon + Fairness row -> its own card, like Stake */
section[class*="linear-gradient(180deg,#2f4f61"] > div[class*="items-center"][class*="rounded-lg"] {
  background: #0f212e !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  gap: 8px !important;
}
section[class*="linear-gradient(180deg,#2f4f61"] > div[class*="items-center"][class*="rounded-lg"] button[class*="h-6"] {
  height: 32px !important;
  width: 32px !important;
}
section[class*="linear-gradient(180deg,#2f4f61"] svg { width: 19px !important; height: 19px !important; }
section[class*="linear-gradient(180deg,#2f4f61"] button[class*="bg-[#3a5568]"] {
  padding: 9px 14px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
}

/* market rows keep breathing room */
section[class*="linear-gradient(180deg,#2f4f61"] > div[class*="grid-cols-2"]:not(:has(input)):not(:has(> button[class*="rounded-lg"])) > button,
section[class*="linear-gradient(180deg,#2f4f61"] > div[class*="grid-cols-[1fr_1fr_auto]"] > button {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* desktop: keep the original side-by-side layout usable */
@media (min-width: 1024px) {
  main[class*="bg-[#22394a]"] { min-height: 100vh; }
  section[class*="bg-[#0d1e2a]"] {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 70vh !important;
    max-height: none !important;
    border-radius: 8px !important;
  }
  section[class*="linear-gradient(180deg,#2f4f61"] { border-radius: 8px !important; }
}

/* ===== v36 — hide scrollbars everywhere (presentation only) ===== */
html, body, #root, main[class*="bg-[#22394a]"], main[class*="bg-[#22394a]"] * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#root::-webkit-scrollbar,
main[class*="bg-[#22394a]"]::-webkit-scrollbar,
main[class*="bg-[#22394a]"] *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

/* ===== v36 — Stake control sizing ===== */
section[class*="linear-gradient(180deg,#2f4f61"] {
  gap: 12px !important;
  padding: 14px 12px 16px !important;
}

/* main CTA: tall Stake blue block */
section[class*="linear-gradient(180deg,#2f4f61"] > button[class*="w-full"] {
  padding: 16px 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  min-height: 52px !important;
}

/* labels above inputs */
section[class*="linear-gradient(180deg,#2f4f61"] [class*="text-[10.5px]"],
section[class*="linear-gradient(180deg,#2f4f61"] [class*="text-[11px]"],
section[class*="linear-gradient(180deg,#2f4f61"] [class*="text-[12px]"] {
  font-size: 13px !important;
  color: #b1bad3 !important;
  letter-spacing: 0 !important;
}

/* input rows */
section[class*="linear-gradient(180deg,#2f4f61"] input {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  font-size: 15px !important;
}
section[class*="linear-gradient(180deg,#2f4f61"] div:has(> input) { padding: 0 12px !important; }
section[class*="linear-gradient(180deg,#2f4f61"] div[class*="bg-[#0b1a24]/80"] {
  padding: 14px 12px !important;
  font-size: 15px !important;
}

/* ½ | 2× group sized like Stake */
section[class*="linear-gradient(180deg,#2f4f61"] button:is([class*="px-2.5"])[class*="text-[12px]"] {
  padding: 14px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* Manual | Auto segmented pill */
section[class*="linear-gradient(180deg,#2f4f61"] > div[class*="grid-cols-2"]:not(:has(input)) > button[class*="rounded-lg"] {
  padding: 14px 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* market rows a touch taller */
section[class*="linear-gradient(180deg,#2f4f61"] > div[class*="grid-cols-2"]:not(:has(input)):not(:has(> button[class*="rounded-lg"])) > button,
section[class*="linear-gradient(180deg,#2f4f61"] > div[class*="grid-cols-[1fr_1fr_auto]"] > button {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  border-radius: 6px !important;
}

/* icons + Fairness row */
section[class*="linear-gradient(180deg,#2f4f61"] > div[class*="items-center"][class*="rounded-lg"] {
  padding: 12px 14px !important;
  gap: 12px !important;
}
section[class*="linear-gradient(180deg,#2f4f61"] svg { width: 21px !important; height: 21px !important; }
section[class*="linear-gradient(180deg,#2f4f61"] button[class*="bg-[#3a5568]"] {
  padding: 11px 18px !important;
  font-size: 15px !important;
}

/* ===== v37 — deck pinned to the top-right corner, balance to the top-left ===== */
/* the card stage now uses the full felt height so the deal travels from the
   top corner down to the true centre of the table */
section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"],
section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"]:is(*) {
  margin-top: 0 !important;
  height: 100% !important;
  overflow: visible !important;
}
@media (min-width: 1024px), (max-height: 760px), (max-height: 600px) {
  section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"] {
    margin-top: 0 !important;
    height: 100% !important;
  }
}
/* balance moves to the top-left corner */
section[class*="bg-[#0d1e2a]"] > div[class*="right-4"][class*="top-3"][class*="tabular-nums"] {
  right: auto !important;
  left: 1rem !important;
  top: 0.75rem !important;
}
@media (min-width: 1024px) {
  section[class*="bg-[#0d1e2a]"] > div[class*="right-4"][class*="top-3"][class*="tabular-nums"] {
    left: 1.5rem !important;
    top: 1rem !important;
  }
}
/* recent-results strip keeps its behaviour, just clears balance + deck corner */
section[class*="bg-[#0d1e2a]"] > div[class*="z-20"][class*="flex-row-reverse"] {
  left: 6.75rem !important;
  right: 7.6rem !important;
  z-index: 20 !important;
}
@media (min-width: 1024px) {
  section[class*="bg-[#0d1e2a]"] > div[class*="z-20"][class*="flex-row-reverse"] {
    left: 9.5rem !important;
    right: 9rem !important;
  }
}

/* ===== v39 — three clean zones; deck remains in its original top corner ===== */
/* 1) balance: its own top-left row */
section[class*="bg-[#0d1e2a]"] > div[class*="right-4"][class*="top-3"][class*="tabular-nums"] {
  right: auto !important;
  left: 0.75rem !important;
  top: 0.3rem !important;
  z-index: 30 !important;
}
/* 2) recent results: a separate row below balance and clear of the deck */
section[class*="bg-[#0d1e2a]"] > div[class*="z-20"][class*="flex-row-reverse"] {
  left: 0.75rem !important;
  right: 7.6rem !important;
  top: 2.05rem !important;
  z-index: 20 !important;
}
/* 3) restore the stage/deck to its original upper position */
section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"] {
  margin-top: 2.35rem !important;
  height: calc(100% - 2.35rem) !important;
  overflow: visible !important;
}
/* Only the large dealt card sits below recent; the deck (first child) stays up. */
section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"] > div[class*="[transform-style:preserve-3d]"] {
  margin-top: 2.1rem !important;
}
@media (min-width: 1024px) {
  section[class*="bg-[#0d1e2a]"] > div[class*="right-4"][class*="top-3"][class*="tabular-nums"] {
    left: 1.5rem !important;
    top: 0.6rem !important;
  }
  section[class*="bg-[#0d1e2a]"] > div[class*="z-20"][class*="flex-row-reverse"] {
    left: 1.5rem !important;
    right: 9rem !important;
    top: 2.6rem !important;
  }
  section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"] {
    margin-top: 2.75rem !important;
    height: calc(100% - 2.75rem) !important;
  }
  section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"] > div[class*="[transform-style:preserve-3d]"] {
    margin-top: 2.5rem !important;
  }
}