/* ===== DECK v43 — presentation only (zero mechanics changes) =====
   1) Recent-cards strip nudged down a little so it never touches the balance.
   2) Selected-market colours restored (v36 behaviour): EVEN blue, ODD green,
      RED red, BLACK dark, ANY FACE blue, ROYAL MATCH gold.
   Everything else from v42 stays exactly as it is.
*/

/* ---------------- 1) RECENT CARDS: minimal drop, same size logic ---------------- */
section[class*="bg-[#0d1e2a]"] > div[class*="z-20"][class*="flex-row-reverse"] {
  top: 2.15rem !important;
  right: 5.6rem !important;
  left: auto !important;
  max-width: calc(100% - 12rem) !important;
  z-index: 22 !important;
}
section[class*="bg-[#0d1e2a]"] > div[class*="z-20"][class*="flex-row-reverse"] > * {
  transform: scale(0.82) !important;
  transform-origin: top right !important;
}
/* balance always on top of the strip */
section[class*="bg-[#0d1e2a]"] > div:first-child:not([class*="perspective"]) {
  z-index: 30 !important;
}

/* ---------------- 2) SELECTED STATES ---------------- */
/* don't flatten a button that the app has marked as selected */
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class][class] button[class][class][class][class*="linear-gradient(180deg,#2f93f5"],
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class][class] button[class][class][class][class*="linear-gradient(180deg,#3a9bff"] {
  background: linear-gradient(180deg, #2f93f5 0%, #2a86ee 58%, #0f62c0 100%) !important;
  background-image: linear-gradient(180deg, #2f93f5 0%, #2a86ee 58%, #0f62c0 100%) !important;
  color: #fff !important;
  box-shadow:
    0 12px 28px -12px #2a86ee,
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

/* ODD — green */
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class][class] button[class][class][class][class*="linear-gradient(180deg,#38ff3c"] {
  background: linear-gradient(180deg, #38ff3c 0%, #1aef26 58%, #00b901 100%) !important;
  background-image: linear-gradient(180deg, #38ff3c 0%, #1aef26 58%, #00b901 100%) !important;
  color: #05230a !important;
  box-shadow:
    0 12px 28px -12px #1aef26,
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* RED — red */
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class][class] button[class][class][class][class*="linear-gradient(180deg,#f0405e"] {
  background: linear-gradient(180deg, #f0405e 0%, #d51e3a 58%, #a8122a 100%) !important;
  background-image: linear-gradient(180deg, #f0405e 0%, #d51e3a 58%, #a8122a 100%) !important;
  color: #fff !important;
  box-shadow:
    0 12px 28px -12px #d51e3a,
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

/* BLACK — deep navy/black with bright ring */
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class][class] button[class][class][class][class*="linear-gradient(180deg,#1b3444"] {
  background: linear-gradient(180deg, #1b3444 0%, #0b1a24 100%) !important;
  background-image: linear-gradient(180deg, #1b3444 0%, #0b1a24 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* ANY FACE — blue */
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class][class] button[class][class][class][class*="bg-[#2a86ee]"] {
  background: linear-gradient(180deg, #3a9bff 0%, #2a86ee 60%, #1367c9 100%) !important;
  background-image: linear-gradient(180deg, #3a9bff 0%, #2a86ee 60%, #1367c9 100%) !important;
  color: #fff !important;
  box-shadow:
    0 12px 28px -14px #2a86ee,
    inset 0 0 0 2px rgba(255, 255, 255, 0.25) !important;
}

/* ROYAL MATCH — gold */
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class][class] button[class][class][class][class*="from-[#c9a227]"] {
  background: linear-gradient(135deg, #c9a227 0%, #8a6b12 100%) !important;
  background-image: linear-gradient(135deg, #c9a227 0%, #8a6b12 100%) !important;
  color: #fff !important;
  box-shadow:
    0 12px 28px -14px #c9a227,
    inset 0 0 0 2px rgba(255, 224, 138, 0.5) !important;
}

/* selected buttons keep their own icon/symbol colours */
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class][class] button[class][class][class][class*="linear-gradient(180deg,#38ff3c"] span,
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class][class] button[class][class][class][class*="linear-gradient(180deg,#f0405e"] span,
html body main section[class*="linear-gradient(180deg,#2f4f61"] div[class][class] button[class][class][class][class*="linear-gradient(180deg,#1b3444"] span {
  color: inherit;
}