/* ===== DECK v33.6 — Stake-grade tabletop layer (presentation only) ===== */

/* ---------- felt stage ---------- */
section[class*="bg-[#0d1e2a]"]{
  background:
    radial-gradient(128% 82% at 50% -4%, rgba(26,117,255,.18) 0%, transparent 60%),
    radial-gradient(120% 90% at 50% 30%, #16344b 0%, #0f2536 55%, #0a1926 100%)!important;
  isolation:isolate;
}

/* ---------- the original 3D tabletop, colour-graded to Stake palette ---------- */
section[class*="bg-[#0d1e2a]"]::before{
  content:"";
  position:absolute;
  left:50%;
  top:62%;
  transform:translate(-50%,-50%);
  width:min(140%, 118vh);
  aspect-ratio:1100/578;
  background:url("./table.png") center/100% 100% no-repeat;
  filter:
    saturate(1.22)
    hue-rotate(-6deg)
    brightness(1.1)
    contrast(1.06)
    drop-shadow(0 26px 46px rgba(0,0,0,.6))
    drop-shadow(0 0 26px rgba(26,117,255,.28));
  pointer-events:none;
  z-index:0;
}

/* Stake blue bloom sitting on the felt (under the card) */
section[class*="bg-[#0d1e2a]"]::after{
  content:"";
  position:absolute;
  left:50%;
  top:62%;
  width:min(102%, 84vh);
  aspect-ratio:1100/578;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(52% 56% at 50% 44%, rgba(120,196,255,.20) 0%, rgba(26,117,255,.12) 46%, transparent 76%);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:1;
}

/* tablet / desktop: whole table visible, nicely centred */
@media (min-width:640px){
  section[class*="bg-[#0d1e2a]"]::before{width:min(114%, 142vh);top:52%}
  section[class*="bg-[#0d1e2a]"]::after{width:min(84%, 104vh);top:52%}
}
@media (min-width:1024px){
  section[class*="bg-[#0d1e2a]"]::before{width:min(104%, 172vh);top:51%}
  section[class*="bg-[#0d1e2a]"]::after{width:min(78%, 124vh);top:51%}
}

/* decorative overlays must not hide the table */
section[class*="bg-[#0d1e2a]"] > div[aria-hidden="true"]{opacity:.3!important}

/* dealt card landing shadow on the felt */
section[class*="bg-[#0d1e2a]"] [style*="transform-origin: 100% 0%"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6%;
  width:80%;
  height:14%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.52) 0%, transparent 70%);
  pointer-events:none;
}

/* ---------- breathing room between recent strip and the card ---------- */
section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"]{
  margin-top:4.1rem!important;
  height:calc(100% - 4.1rem)!important;
  z-index:2;
}
@media (min-width:1024px){
  section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"]{
    margin-top:4.6rem!important;
    height:calc(100% - 4.6rem)!important;
  }
}

/* ---------- proportions: bigger table area, tighter bet panel ---------- */
section[class*="bg-[#0d1e2a]"]{
  flex:5.6 1 0%!important;
  min-height:44vh!important;
}
section[class*="linear-gradient(180deg,#2f4f61"]{
  position:relative;
  z-index:3;
  max-height:44%!important;
  flex:0 0 auto!important;
}
@media (min-width:1024px){
  section[class*="bg-[#0d1e2a]"]{flex:1 1 0%!important;min-height:0!important}
  section[class*="linear-gradient(180deg,#2f4f61"]{max-height:none!important}
}

/* card size tuned to the table */
[class*="--cw:clamp"]{--cw:clamp(112px,19vh,172px)!important}
@media (min-width:1024px){[class*="--cw:clamp"]{--cw:clamp(128px,22vh,204px)!important}}

/* short viewports: keep everything inside the frame */
@media (max-height:620px){
  section[class*="bg-[#0d1e2a]"]{min-height:40vh!important}
  section[class*="linear-gradient(180deg,#2f4f61"]{max-height:50%!important}
}

/* recent results strip above the felt glow */
section[class*="bg-[#0d1e2a]"] > div[class*="top-"][class*="z-10"]:not([class*="right-4"]){z-index:6!important}

/* ===== v33.7 — compact fit: whole bet panel (incl. sound / fairness row) always visible ===== */

/* the panel is never clipped or scrolled: it takes exactly the height it needs */
section[class*="linear-gradient(180deg,#2f4f61"]{
  max-height:none!important;
  flex:0 0 auto!important;
  overflow:visible!important;
}
/* the felt takes whatever is left, and may shrink */
section[class*="bg-[#0d1e2a]"]{
  flex:1 1 auto!important;
  min-height:0!important;
}

/* --- compact scale for short frames (iframe / mobile browser chrome) --- */
@media (max-height:760px){
  section[class*="linear-gradient(180deg,#2f4f61"]{
    padding-top:.4rem!important;
    padding-bottom:.35rem!important;
    padding-left:.55rem!important;
    padding-right:.55rem!important;
    gap:.25rem!important;
  }
  section[class*="linear-gradient(180deg,#2f4f61"] > *{margin-top:.25rem!important}
  section[class*="linear-gradient(180deg,#2f4f61"] > *:first-child{margin-top:0!important}

  /* market + toggle buttons */
  section[class*="linear-gradient(180deg,#2f4f61"] button{
    min-height:0!important;
    line-height:1.05!important;
  }
  section[class*="linear-gradient(180deg,#2f4f61"] button[class*="py-"],
  section[class*="linear-gradient(180deg,#2f4f61"] button[class*="h-"]{
    padding-top:.4rem!important;
    padding-bottom:.4rem!important;
  }
  /* main CTA */
  section[class*="linear-gradient(180deg,#2f4f61"] button[class*="w-full"][class*="text-[15px]"]{
    padding-top:.62rem!important;padding-bottom:.62rem!important;font-size:14px!important;
  }
  /* inputs */
  section[class*="linear-gradient(180deg,#2f4f61"] input{
    padding-top:.34rem!important;padding-bottom:.34rem!important;font-size:14px!important;
  }
  /* labels */
  section[class*="linear-gradient(180deg,#2f4f61"] [class*="text-[11px]"],
  section[class*="linear-gradient(180deg,#2f4f61"] [class*="text-[12px]"]{font-size:10.5px!important}
  /* icon / fairness row stays tight */
  section[class*="linear-gradient(180deg,#2f4f61"] svg{width:16px!important;height:16px!important}
}

@media (max-height:600px){
  section[class*="linear-gradient(180deg,#2f4f61"]{
    padding-top:.3rem!important;padding-bottom:.28rem!important;gap:.18rem!important;
  }
  section[class*="linear-gradient(180deg,#2f4f61"] > *{margin-top:.18rem!important}
  section[class*="linear-gradient(180deg,#2f4f61"] button[class*="py-"],
  section[class*="linear-gradient(180deg,#2f4f61"] button[class*="h-"]{
    padding-top:.3rem!important;padding-bottom:.3rem!important;
  }
  section[class*="linear-gradient(180deg,#2f4f61"] button[class*="w-full"][class*="text-[15px]"]{
    padding-top:.5rem!important;padding-bottom:.5rem!important;font-size:13px!important;
  }
  section[class*="linear-gradient(180deg,#2f4f61"] input{font-size:13px!important}
  section[class*="bg-[#0d1e2a]"]{min-height:150px!important}
  /* card + recent strip gap scaled to the smaller felt */
  section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"]{
    margin-top:2.5rem!important;height:calc(100% - 2.5rem)!important;
  }
  [class*="--cw:clamp"]{--cw:clamp(88px,25vh,140px)!important}
  section[class*="bg-[#0d1e2a]"]::before{top:58%;width:min(150%, 104vh)}
  section[class*="bg-[#0d1e2a]"]::after{top:58%;width:min(108%, 76vh)}
}

/* ===== v33.8 — fix: dealt card must never slide under the recent-results strip ===== */
section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"]{
  margin-top:5.5rem!important;
  height:calc(100% - 5.5rem)!important;
}
@media (min-width:1024px){
  section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"]{
    margin-top:5.9rem!important;
    height:calc(100% - 5.9rem)!important;
  }
}
@media (max-height:760px){
  section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"]{
    margin-top:5.1rem!important;
    height:calc(100% - 5.1rem)!important;
  }
  [class*="--cw:clamp"]{--cw:clamp(104px,17.5vh,160px)!important}
}
@media (max-height:600px){
  section[class*="bg-[#0d1e2a]"] > div[class*="[perspective:1600px]"]{
    margin-top:3.9rem!important;
    height:calc(100% - 3.9rem)!important;
  }
  [class*="--cw:clamp"]{--cw:clamp(84px,23vh,132px)!important}
}
/* recent strip always drawn above the card */
section[class*="bg-[#0d1e2a]"] > div[class*="top-"][class*="z-10"]:not([class*="right-4"]){z-index:12!important}

/* ===== v34 — table removed, flat Stake background ===== */
section[class*="bg-[#0d1e2a]"]{
  background:#0f212e!important;
}
section[class*="bg-[#0d1e2a]"]::before{content:none!important;display:none!important;background:none!important}
section[class*="bg-[#0d1e2a]"]::after{content:none!important;display:none!important;box-shadow:none!important;background:none!important}
main[class*="bg-[#22394a]"]{background:#1a2c38!important}
section[class*="bg-[#0d1e2a]"] > div[aria-hidden="true"]{display:none!important}