:root{
  /* ✅ Paste ONLY your --variables here (the list you sent) */
}

/* Optional but recommended for Stake-like dark UI */
html{ color-scheme: dark; }
body{
  font-family: var(--ds-font-family-default, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial);
  color: var(--color-grey-200, #b1bad3);
  background: var(--color-grey-900, #071824);
}
/* ===========================
   Stake-style Header (SkyveraBet)
   Add to: /assets/css/main.css
   =========================== */

.sb-header{
  position: sticky;
  top: 0;
  z-index: var(--header-zIndex, 999);
  background: var(--color-grey-700, #0f212e);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(var(--blur-sm, 8px));
}

.sb-header__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left | center | right */
  align-items: center;
  gap: var(--space-2, .5rem);
  min-height: var(--header-height, 60px);
}

.sb-header__center{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Logo */
.sb-logo{
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  text-decoration: none;
  color: var(--color-white, #fff);
  min-width: 0;
}

.sb-logo img{
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.sb-logo__text{
  font: var(--ds-heading-sm, 700 1rem/1.5rem ui-sans-serif);
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Center balance pill */
.sb-balance{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
  border-radius: var(--radius-full, 9999px);
  text-decoration: none;
  color: var(--color-white, #fff);
  border: 2px solid rgba(255,255,255,.08);
  background: var(--color-grey-600, #1a2c38);
  box-shadow: var(--shadows-sm, 0 1px 3px rgba(0,0,0,.2));
}

.sb-balance:hover{
  border-color: rgba(255,255,255,.12);
  background: var(--color-grey-500, #213743);
}

.sb-balance__ico{
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full, 9999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.sb-balance__ico svg{
  width: 18px;
  height: 18px;
  stroke: var(--color-white, #fff);
  fill: none;
  stroke-width: 2;
  opacity: .95;
}

.sb-balance__amount{
  font: var(--ds-body-sm-strong, 600 .875rem/1.25rem ui-sans-serif);
  white-space: nowrap;
  letter-spacing: .2px;
}

.sb-balance__amount strong{
  margin-right: 6px;
  font-weight: 800;
}

/* Right actions */
.sb-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2, .5rem);
}

.sb-iconbtn{
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md, .5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,.08);
  background: var(--color-grey-600, #1a2c38);
  box-shadow: var(--shadow-inset, inset 0 1px rgba(255,255,255,.04));
}

.sb-iconbtn:hover{
  background: var(--color-grey-500, #213743);
  border-color: rgba(255,255,255,.12);
}

.sb-iconbtn svg{
  width: 20px;
  height: 20px;
  stroke: var(--color-white, #fff);
  fill: none;
  stroke-width: 2;
  opacity: .95;
}

/* Notification badge (Stake green) */
.sb-badge{
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-green-500, #00e701);
  color: var(--color-neutral-black, #05080a);
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-grey-700, #0f212e);
  box-shadow: var(--shadows-md, 0 4px 6px rgba(0,0,0,.2));
}

/* spacing under header (for pages that need breathing room) */
.sb-page-offset{ margin-top: var(--space-2, .5rem); }
/* Bigger logo everywhere */
.sb-logo__img{
  height: 44px;   /* mobile */
  width: auto;
  display:block;
}

@media (min-width: 480px){
  .sb-logo__img{ height: 52px; }
}

@media (min-width: 768px){
  .sb-logo__img{ height: 58px; }
}

@media (min-width: 1100px){
  .sb-logo__img{ height: 64px; }
}
:root{
  /* ✅ Paste ONLY your --variables here (the list you sent) */
}

/* Optional but recommended for Stake-like dark UI */
html{ color-scheme: dark; }
body{
  font-family: var(--ds-font-family-default, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial);
  color: var(--color-grey-200, #b1bad3);
  background: var(--color-grey-900, #071824);
}

/* ===========================
   Stake-style Header (SkyveraBet)
   Add to: /assets/css/main.css
   =========================== */

.sb-header{
  position: sticky;
  top: 0;
  z-index: var(--header-zIndex, 999);
  background: var(--color-grey-700, #0f212e);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(var(--blur-sm, 8px));
}

/* ✅ Increase header height so big logo fits */
.sb-header__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-2, .5rem) var(--space-4, 1rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left | center | right */
  align-items: center;
  gap: var(--space-2, .5rem);
  min-height: 74px; /* was 60px */
}

.sb-header__center{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Logo */
.sb-logo{
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  text-decoration: none;
  color: var(--color-white, #fff);
  min-width: 0;
}

/* ✅ IMPORTANT: remove the 28px lock */
.sb-logo img{
  width: auto;
  height: auto;
  max-height: none;
  object-fit: contain;
}

/* (You removed title text, but keep this safe if ever used) */
.sb-logo__text{
  font: var(--ds-heading-sm, 700 1rem/1.5rem ui-sans-serif);
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Center balance pill */
.sb-balance{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
  border-radius: var(--radius-full, 9999px);
  text-decoration: none;
  color: var(--color-white, #fff);
  border: 2px solid rgba(255,255,255,.08);
  background: var(--color-grey-600, #1a2c38);
  box-shadow: var(--shadows-sm, 0 1px 3px rgba(0,0,0,.2));
}

.sb-balance:hover{
  border-color: rgba(255,255,255,.12);
  background: var(--color-grey-500, #213743);
}

.sb-balance__ico{
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full, 9999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.sb-balance__ico svg{
  width: 18px;
  height: 18px;
  stroke: var(--color-white, #fff);
  fill: none;
  stroke-width: 2;
  opacity: .95;
}

.sb-balance__amount{
  font: var(--ds-body-sm-strong, 600 .875rem/1.25rem ui-sans-serif);
  white-space: nowrap;
  letter-spacing: .2px;
}

.sb-balance__amount strong{
  margin-right: 6px;
  font-weight: 800;
}

/* Right actions */
.sb-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2, .5rem);
}

.sb-iconbtn{
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md, .5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,.08);
  background: var(--color-grey-600, #1a2c38);
  box-shadow: var(--shadow-inset, inset 0 1px rgba(255,255,255,.04));
}

.sb-iconbtn:hover{
  background: var(--color-grey-500, #213743);
  border-color: rgba(255,255,255,.12);
}

.sb-iconbtn svg{
  width: 20px;
  height: 20px;
  stroke: var(--color-white, #fff);
  fill: none;
  stroke-width: 2;
  opacity: .95;
}

/* Notification badge (Stake green) */
.sb-badge{
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-green-500, #00e701);
  color: var(--color-neutral-black, #05080a);
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-grey-700, #0f212e);
  box-shadow: var(--shadows-md, 0 4px 6px rgba(0,0,0,.2));
}

/* spacing under header */
.sb-page-offset{ margin-top: var(--space-2, .5rem); }

/* ===========================
   FORCE BIG LOGO (wins all conflicts)
   =========================== */
.sb-logo .sb-logo__img{
  height: 56px;   /* mobile */
  width: auto;
  display: block;
}

@media (min-width: 480px){
  .sb-logo .sb-logo__img{ height: 64px; }
}

@media (min-width: 768px){
  .sb-logo .sb-logo__img{ height: 72px; }
}

@media (min-width: 1100px){
  .sb-logo .sb-logo__img{ height: 80px; }
}
/* ===========================
   Logged-in header: wallet moves left
   =========================== */

/* 3-column header layout */
.sb-header__inner{
  grid-template-columns: auto 1fr auto; /* left | spacer | right */
}

/* left slot container */
.sb-left{
  display:flex;
  align-items:center;
  min-width: 0;
}

/* Center slot becomes spacer only */
.sb-header__center{
  display:block;
}

/* When logged in, ensure wallet pill fits nicely on the left */
.sb-balance--left{
  max-width: 260px;         /* prevents covering icons on small phones */
  width: auto;
}

/* If a user has huge balance text, prevent overflow */
.sb-balance--left .sb-balance__amount{
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  display:inline-block;
  vertical-align: bottom;
}

/* Mobile safety: if screen is too small, shrink wallet slightly */
@media (max-width: 360px){
  .sb-balance--left{
    max-width: 220px;
    padding-left: .5rem;
    padding-right: .5rem;
  }
  .sb-balance--left .sb-balance__amount{
    max-width: 130px;
  }
}
/* ===========================
   Stake-style Home Layout
   Paste at END of: /assets/css/main.css
   =========================== */

.sb-home{
  padding-bottom: calc(var(--mobile-footer-height, 68px) + var(--space-5, 1.25rem));
}

/* Main container */
.sb-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-4, 1rem);
}

/* Hero card */
.sb-heroCard{
  background: var(--color-grey-700, #0f212e);
  border: 2px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md, .5rem);
  padding: var(--space-5, 1.25rem);
  box-shadow: var(--shadows-sm, 0 1px 3px rgba(0,0,0,.2));
}

.sb-heroTitle{
  margin: 0 0 var(--space-2, .5rem);
  color: var(--color-white, #fff);
  font: var(--ds-heading-lg, 700 1.25rem/1.75rem ui-sans-serif);
}

.sb-heroDesc{
  margin: 0;
  color: var(--color-grey-200, #b1bad3);
  font: var(--ds-body-md, 400 1rem/1.5rem ui-sans-serif);
}

.sb-heroCta{
  margin-top: var(--space-4, 1rem);
  display: flex;
  gap: var(--space-2, .5rem);
  flex-wrap: wrap;
}

.sb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1rem;
  border-radius: var(--radius-md, .5rem);
  font-weight: 900;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,.10);
}

.sb-btnPrimary{
  background: var(--color-blue-500, #1475e1);
  color: var(--color-white, #fff);
}

.sb-btnGhost{
  background: var(--color-grey-600, #1a2c38);
  color: var(--color-white, #fff);
}

/* Promos (2 big images) */
.sb-promos{
  margin-top: var(--space-4, 1rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3, .75rem);
}

@media (min-width: 768px){
  .sb-promos{ grid-template-columns: 1fr 1fr; }
}

.sb-promoCard{
  position: relative;
  display: block;
  border-radius: var(--radius-md, .5rem);
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.08);
  background: var(--color-grey-700, #0f212e);
  box-shadow: var(--shadows-md, 0 4px 6px rgba(0,0,0,.2));
  text-decoration: none;
}

.sb-promoCard img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px){
  .sb-promoCard img{ height: 240px; }
}

.sb-promoOverlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.70) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4, 1rem);
}

.sb-promoTitle{
  color: #fff;
  font-weight: 950;
  font-size: 1.15rem;
}

.sb-promoHint{
  color: rgba(255,255,255,.82);
  font-weight: 800;
  font-size: .85rem;
  margin-top: .25rem;
}

/* Sections */
.sb-section{
  margin-top: var(--space-5, 1.25rem);
  background: var(--color-grey-700, #0f212e);
  border: 2px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md, .5rem);
  box-shadow: var(--shadows-sm, 0 1px 3px rgba(0,0,0,.2));
  overflow: hidden;
}

.sb-sectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-3, .75rem);
  padding: var(--space-4, 1rem);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sb-sectionHead h2{
  margin: 0;
  color: var(--color-white, #fff);
  font: var(--ds-heading-md, 700 1.125rem/1.75rem ui-sans-serif);
}

.sb-sectionHint{
  color: var(--color-grey-200, #b1bad3);
  font-weight: 800;
  font-size: .85rem;
}

.sb-sectionLink{
  color: var(--legacy-action-text, #4391e7);
  text-decoration:none;
  font-weight: 900;
}

/* Leagues row (lined up + scroll) */
.sb-leaguesRow{
  display:flex;
  gap: var(--space-3, .75rem);
  overflow-x:auto;
  padding: var(--space-4, 1rem);
  padding-top: var(--space-3, .75rem);
  -webkit-overflow-scrolling: touch;
}

.sb-leaguesRow a{
  display:inline-flex;
  align-items:center;
  gap: .6rem;
  padding: .65rem .85rem;
  border-radius: var(--radius-md, .5rem);
  border: 2px solid rgba(255,255,255,.08);
  background: var(--color-grey-600, #1a2c38);
  color: var(--color-white, #fff);
  text-decoration:none;
  font-weight: 900;
  white-space: nowrap;
}

.sb-cardPad{
  padding: var(--space-4, 1rem);
}

/* Keep your odds buttons looking consistent (moved from inline style) */
.nxw-odd-btn{
  border: 2px solid rgba(255,255,255,.08);
  background: var(--color-grey-600, #1a2c38);
  color: var(--color-white, #fff);
  border-radius: var(--radius-md, .5rem);
  padding: 12px 10px;
  cursor: pointer;
  text-align: center;
  font-weight: 950;
  letter-spacing: .2px;
  position: relative;
  user-select: none;
  transition: transform .06s ease, background .18s ease, border-color .18s ease;
}
.nxw-odd-btn:active{ transform: scale(.99); }
.nxw-odd-btn small{
  display:block;
  margin-top:6px;
  font-size:11px;
  color: var(--color-grey-200, #b1bad3);
  font-weight: 800;
}
.nxw-odd-btn.nxw-selected{
  background: rgba(0,231,1,.12);
  border-color: rgba(0,231,1,.35);
}
.nxw-odd-btn.nxw-locked,
.nxw-odd-btn[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.60;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.lockBadge{
  position:absolute; top:8px; right:10px;
  font-size:12px;
  opacity:.9;
}
/* ===========================
   Trending Leagues (Stake-like cards)
   Add to END of: /assets/css/main.css
   =========================== */

/* Wrapper holds arrows */
.sb-trendWrap{
  position: relative;
}

/* Row behaves like Stake Trending Sports */
.sb-trendRow{
  display: flex;
  gap: var(--space-3, .75rem);
  overflow-x: auto;
  padding: var(--space-4, 1rem);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sb-trendRow::-webkit-scrollbar{ display:none; }

/* Card (big image tile) */
.sb-leagueCard{
  flex: 0 0 auto;
  width: 150px;
  height: 190px;
  border-radius: var(--radius-md, .5rem);
  overflow: hidden;
  position: relative;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,.08);
  background: var(--color-grey-600, #1a2c38);
  box-shadow: var(--shadows-md, 0 4px 6px rgba(0,0,0,.2));
  scroll-snap-align: start;
  transform: translateZ(0);
}

@media (min-width: 768px){
  .sb-leagueCard{
    width: 165px;
    height: 205px;
  }
}

.sb-leagueImg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Bottom label like Stake */
.sb-leagueName{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 12px;
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.70) 100%);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* Hover / active feel */
.sb-leagueCard:hover{
  border-color: rgba(255,255,255,.14);
}
.sb-leagueCard:active{
  transform: scale(.99);
}

/* Arrow buttons (top-right like Stake) */
.sb-trendNav{
  position: absolute;
  top: 6px;
  right: 10px;
  width: 36px;
  height: 32px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.10);
  background: var(--color-grey-700, #0f212e);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.sb-trendNav--prev{ right: 52px; }
.sb-trendNav:hover{
  background: var(--color-grey-600, #1a2c38);
  border-color: rgba(255,255,255,.14);
}

/* Hide arrows on very small screens (optional) */
@media (max-width: 420px){
  .sb-trendNav{ display:none; }
}