:root{
  --bg0:#070B14;
  --bg1:#0B1222;
  --card:#0F1A33;
  --card2:#0B162F;
  --line:rgba(255,255,255,.08);
  --text:#EAF3FF;
  --muted:rgba(234,243,255,.68);
  --muted2:rgba(234,243,255,.45);
  --mint:#5CFFCC;
  --sky:#6AA5FF;
  --warn:#FFCC66;
  --bad:#FF5C7A;
  --good:#5CFFCC;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:14px;
  --max: 1440px;
  --navH: 64px;
  --slipW: 360px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; overflow-x:hidden; }
html{ background:#0E1A32; }
body{
  margin:0;
  background:#0E1A32;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

body::before{
  content:none;
}

.page{ flex:1 0 auto; display:flex; flex-direction:column; min-height:100vh; background: transparent; }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
img{ max-width:100%; }

.container{ max-width:none; width:100%; margin:0; padding:0 16px; }

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:#0E1A32;
  border-bottom:1px solid rgba(0,0,0,.75);
  box-shadow: 0 14px 40px rgba(0,0,0,.85);
}

.topbar .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px 8px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 220px;
}
.brand img{
  height:36px;
  width:auto;
}

.pills{
  display:flex; align-items:center; gap:8px;
  overflow:auto;
  padding:4px 8px;
  border-radius:999px;
  background:var(--mint);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:999px;
  background: transparent;
  color:#02142a;
  font-weight:750;
  white-space:nowrap;
}
.pill.active{
  color:#02142a;
  background: rgba(2,20,42,.16);
  border-color: rgba(2,20,42,.35);
}
.pill .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(92,255,204,.18);
}

/* Status pill for bet state */
.pillStatus{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.pillStatus .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--muted2);
}
.pillStatus .txt{
  font-size:11px;
}
.pill-open{
  background:rgba(106,165,255,.16);
  color:#c9dcff;
}
.pill-open .dot{ background:var(--sky); }
.pill-won{
  background:rgba(92,255,204,.10);
  color:#d0ffef;
}
.pill-won .dot{ background:var(--good); }
.pill-lost{
  background:rgba(255,92,122,.10);
  color:#ffd0da;
}
.pill-lost .dot{ background:var(--bad); }
.pill-void{
  background:rgba(255,204,102,.10);
  color:#ffe9b8;
}
.pill-void .dot{ background:var(--warn); }

.iconBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(234,243,255,.35);
  background:rgba(0,0,0,.30);
  box-shadow:0 0 0 3px rgba(0,0,0,.25);
}
.iconBtn .iconCircle{
  font-size:17px;
}

.right{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
}
.kpi{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background: var(--card);
}
.kpi .label{ font-size:12px; color:var(--muted2); font-weight:700; }
.kpi .value{
  font-size:14px; font-weight:900;
  background: linear-gradient(90deg, var(--mint), var(--sky));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.btn{
  border:1px solid var(--line);
  background: rgba(11,18,34,.95);
  color: var(--text);
  padding:10px 12px;
  border-radius: 12px;
  font-weight:800;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ background: rgba(255,255,255,.07); }
.btn:active{ transform: translateY(1px); }
.btn.primary{
  border-color: rgba(92,255,204,.35);
  background: linear-gradient(135deg, rgba(92,255,204,.20), rgba(106,165,255,.16));
  box-shadow: 0 12px 30px rgba(92,255,204,.10);
}
.btn.primary:hover{ border-color: rgba(92,255,204,.55); }

.layout{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  padding: 14px 0 24px;
}

.layout.hasSlip{ grid-template-columns: 280px minmax(0,1fr); }
.card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  margin-bottom:18px;
}
.card.soft{ background: var(--card2); }
.card .hd{
  padding: 14px 14px 10px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card .hd h3{
  margin:0;
  font-size: 14px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.card .bd{ padding: 14px; }

.sidebar .link{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  border-radius: 14px;
  color: var(--muted);
  font-weight:800;
  border: 1px solid transparent;
}
.sidebar .link:hover{
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.sidebar .link.active{
  background: rgba(92,255,204,.10);
  border-color: rgba(92,255,204,.22);
  color: var(--text);
}
.sidebar .icon{
  width:26px; height:26px; border-radius: 10px;
  display:grid; place-items:center;
  background: var(--card);
  border:1px solid var(--line);
}

.hero{
  padding: 18px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items:stretch;
}
.hero h1{
  margin:0;
  font-size: 34px;
  letter-spacing:-.4px;
}
.hero p{ margin:10px 0 0; color: var(--muted); line-height:1.5; }
.hero .tiles{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.tile{
  padding:12px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: var(--card);
}
.tile .t{ font-weight:900; font-size:13px; }
.tile .s{ margin-top:6px; color:var(--muted2); font-weight:700; font-size:12px; }
.hero .promo{
  border-radius: var(--radius);
  border:1px solid rgba(92,255,204,.20);
  background:
    radial-gradient(600px 280px at 20% 20%, rgba(92,255,204,.22), transparent 55%),
    radial-gradient(600px 280px at 80% 20%, rgba(106,165,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(3,10,24,.96), rgba(3,10,24,.98));
  padding: 16px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight:900;
  width: fit-content;
}
.badge .spark{
  width:10px; height:10px; border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 4px rgba(255,204,102,.14);
}
.promo h2{ margin: 10px 0 0; font-size: 22px; }
.promo .ctaRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }

.sectionTitle{
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 2px;
  margin: 8px 0 10px;
}
.sectionTitle h2{ margin:0; font-size: 16px; letter-spacing:.3px; }
.sectionTitle .sub{ color: var(--muted2); font-weight:700; font-size:12px; }

.market{
  display:flex; flex-direction:column; gap:10px;
}
.match{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  overflow:hidden;
}
.match .mhd{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding: 12px 12px 10px;
  border-bottom:1px solid var(--line);
}
.fixtureLink{ display:block; text-decoration:none; color:inherit; }
.fixtureLink:hover .teams{ text-decoration:underline; }

.match .teams{ font-weight:950; letter-spacing:.2px; }
.match .meta{ color: var(--muted2); font-weight:800; font-size:12px; }
.oddsRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
}
.oddBtn{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:6px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
  min-height: 56px;
}
.oddBtn:hover{ border-color: rgba(92,255,204,.35); background: rgba(92,255,204,.07); }
.oddBtn.active{
  border-color: rgba(92,255,204,.55);
  background: rgba(92,255,204,.10);
  box-shadow: 0 0 0 4px rgba(92,255,204,.08);
}

.oddBtn.disabled{ opacity:.45; pointer-events:none; filter:saturate(.7); }
.oddBtn .name{ font-weight:900; font-size: 12px; color: var(--muted); }
.oddBtn .price{ font-weight:1000; font-size: 16px; letter-spacing:.2px; color: var(--text); }
.oddBtn .tag{ font-weight:900; font-size: 11px; color: rgba(92,255,204,.9); }

.slip{
  position:fixed;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  bottom:96px;
  max-width:420px;
  width:min(420px, 94vw);
  z-index:90;
}
.slipList{ display:flex; flex-direction:column; gap:10px; }
.slipItem{
  border:1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  padding: 12px;
}
.slipItem .row{ display:flex; justify-content:space-between; gap:10px; }
.slipItem .pick{ font-weight:950; }
.slipItem .small{ color: var(--muted2); font-weight:700; font-size:12px; margin-top:4px; }
.xBtn{
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--muted);
  border-radius: 10px;
  padding: 6px 8px;
  cursor:pointer;
}
.xBtn:hover{ color: var(--text); border-color: rgba(255,255,255,.24); }

.formRow{ display:flex; gap:10px; }
.input{
  width:100%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px;
  color: var(--text);
  font-weight:800;
  outline:none;
}
.input:focus{ border-color: rgba(92,255,204,.40); box-shadow: 0 0 0 4px rgba(92,255,204,.08); }
.calc{
  display:flex; justify-content:space-between; align-items:center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.16);
  color: var(--muted);
  font-weight:800;
}
.calc b{ color: var(--text); }

.footer{
  margin-top:auto;

  border-top:1px solid var(--line);
  background: rgba(6,10,20,.72);
  padding: 16px 0 34px;
  color: var(--muted2);
  font-weight:700;
}
.footer .grid{
  display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px;
}
.footer h4{ margin:0 0 10px; color: var(--text); font-size: 13px; letter-spacing:.5px; text-transform:uppercase; }
.footer a{ color: var(--muted); }
.footer a:hover{ color: var(--text); }

.mobileOnly{ display:none; }
.desktopOnly{ display:block; }

.miniNotice{
  font-size:12px;
  color: var(--muted2);
  margin-top: 10px;
  line-height: 1.45;
}

/* Mobile */
@media (max-width: 1020px){
  .topbar .inner{ padding-left:20px; padding-right:20px; }
  .topbar .right .kpi:not(.kpiMob){ display:none; }
  .topbar .right .kpiMob{ border:none; background:transparent; padding:0; box-shadow:none; }
  .topbar .right .kpiMob .label{ font-size:11px; color:rgba(234,243,255,.78); text-transform:uppercase; letter-spacing:.08em; }
  .topbar .right .kpiMob .value{ font-size:14px; background: linear-gradient(90deg, var(--mint), var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .topbar .inner{ padding:10px 16px 8px; }
  .layout{
    grid-template-columns: 1fr;
    padding: 12px 0 92px; /* room for mobile slip */
  }
  .brand{ min-width:auto; }
  .desktopOnly{ display:none; }
  .mobileOnly{ display:block; }

  .hero{ grid-template-columns: 1fr; }
  .oddsRow{ grid-template-columns: 1fr 1fr 1fr; gap:8px; }
  .sidebar.card{ display:none; }
  .slip{
    position:fixed;
    left:50%;
    right:auto;
    bottom:76px;
    transform:translateX(-50%);
    top:auto;
    z-index:60;
    max-width:420px;
    width:calc(100% - 32px);
    border-radius:18px;
  }
  .slip.card{ background: var(--card); }
  .slipItem{ background: var(--card); }
  .slip .bd{ max-height: 55vh; overflow:auto; }
  .slipCollapsed .bd{ display:none; }
  .slipToggle{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding: 14px;
    cursor:pointer;
  }
  .slipToggle .title{ font-weight:950; }
  .footer .grid{ grid-template-columns: 1fr; }
}

/* Small mobile */
@media (max-width: 420px){
  .hero h1{ font-size: 28px; }
  .oddBtn{ padding: 10px; min-height: 54px; }
  .oddBtn .price{ font-size: 15px; }
}

.slipHidden{ display:none !important; }

/* Auth gating */
.authOnly { display: none; }
body.authed .authOnly { display: unset; }

/* Hide slip completely when not active */
.slipHidden { display: none !important; }

/* Auth modal */
.authDialog::backdrop { background: rgba(0,0,0,.7); }
.authDialog { border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 45%), linear-gradient(180deg, rgba(10,20,35,.95), rgba(5,10,22,.95)); color: #fff; width: min(520px, 92vw); }
.authWrap { padding: 18px; }
.authTop { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.authTitle { font-weight: 950; font-size: 20px; letter-spacing: .2px; }
.authSub { margin-top: 4px; opacity: .8; font-weight: 800; }
.authTabs { display:flex; gap:10px; margin-top: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 999px; padding: 6px; }
.tabBtn { flex:1; border-radius: 999px; border: none; background: transparent; color: rgba(255,255,255,.85); padding: 10px 12px; font-weight: 950; cursor: pointer; }
.tabBtn.active { background: linear-gradient(180deg, rgba(54,128,255,.85), rgba(54,128,255,.55)); color: #fff; box-shadow: 0 12px 35px rgba(45,110,255,.28); }
.linkBtn { background: transparent; border: none; color: #fff; font-weight: 950; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hidden { display:none !important; }

/* Markets tabs (football) */
.marketTabs { display:flex; gap:10px; flex-wrap: wrap; justify-content:flex-end; }
.mTab { border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); padding: 10px 12px; font-weight: 950; cursor: pointer; }
.mTab.active { background: linear-gradient(180deg, rgba(50,180,255,.28), rgba(50,180,255,.10)); border-color: rgba(50,180,255,.45); box-shadow: 0 12px 35px rgba(45,170,255,.16); }
.mTab.disabled { opacity: .45; cursor: not-allowed; }

/* Ads */
.adSlot, .adInline, .adCard { border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); padding: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.adSlot { margin-top: 16px; }
.adInline { margin: 14px 0; }
.adTag { display:inline-block; font-weight: 950; font-size: 11px; letter-spacing: .5px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); margin-bottom: 8px; }
.adText { font-weight: 850; opacity: .86; }

/* Footer links */
.footLinks { display:flex; gap: 12px; flex-wrap: wrap; }
.footLinks a { color: rgba(255,255,255,.92); font-weight: 900; text-decoration: none; }
.footLinks a:hover { text-decoration: underline; text-underline-offset: 3px; }
.securePill { display:inline-flex; align-items:center; gap:10px; border-radius: 999px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); font-weight: 950; }
.securePill .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(40,220,140,.9); box-shadow: 0 0 0 6px rgba(40,220,140,.12); }

/* Ensure bright readable text */
body, .card, .btn, .link, .meta, .small, .tiny { color: #ffffff; }
.muted { color: rgba(255,255,255,.72) !important; }

.userLink{
  color:var(--text);
  text-decoration:none;
  font-weight:900;
}
.userLink:hover{
  text-decoration:underline;
}

/* Messaging */
.chatWindow{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,11,20,.85);
  padding:10px 10px;
  max-height: 380px;
  overflow-y:auto;
  margin-bottom:12px;
}
.chatRow{
  display:flex;
  margin:6px 0;
}
.chatRow .bubble{
  max-width: 75%;
  padding:8px 10px;
  border-radius: 14px;
  font-size:13px;
  font-weight:800;
  line-height:1.4;
}
.chatRow.mine{
  justify-content:flex-end;
}
.chatRow.mine .bubble{
  background: linear-gradient(145deg, rgba(92,255,204,.35), rgba(106,165,255,.40));
  color:#050914;
}
.chatRow.theirs{
  justify-content:flex-start;
}
.chatRow.theirs .bubble{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.chatRow .time{
  margin-top:4px;
  opacity:.75;
}
.chatForm textarea.input{
  resize:vertical;
}
.list{
  list-style:none;
  padding:0;
  margin:8px 0 0;
}
.listItem{
  border-radius:12px;
  padding:8px 8px;
  border:1px solid rgba(255,255,255,.12);
  background:var(--card);
  margin-bottom:6px;
}
.listItem a{
  text-decoration:none;
  color:var(--text);
}
.listItem.active{
  border-color: rgba(92,255,204,.45);
  background: rgba(92,255,204,.08);
}

/* Mobile header/nav */
.mobNav{
  display:none;
  border-bottom:1px solid rgba(0,0,0,.25);
  background: var(--mint);
}
.mobNav .mLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  font-size:13px;
  font-weight:850;
  color:#02142a;
  text-decoration:none;
  border-radius:999px;
  border:1px solid transparent;
  margin-right:8px;
  white-space:nowrap;
}
.mobNav .mLink:hover{
  color:var(--text);
}
.mobNav .mLink.active{
  color:#02142a;
  border-color: rgba(2,20,42,.35);
  background: rgba(2,20,42,.16);
}

/* On mobile, show the chip-style nav below the topbar */
@media (max-width: 1020px){
  .mobNav{
    display:flex;
    overflow-x:auto;
    padding:8px 16px 10px;
    gap:4px;
    position:sticky;
    z-index:40;
  }
}

.oddBtn.sm{
  padding:8px 10px;
  min-height:48px;
}
.oddsRow.sm{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding-left:10px;
}
.subMarkets{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.subMarketGroup{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:6px;
  padding-left:10px;
}
.subMarketGroup .subTitle{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
  margin-bottom:4px;
  color:rgba(234,243,255,.70);
}
@media (max-width:720px){
  .oddsRow.sm{
    grid-template-columns:minmax(0,1fr);
  }
}

.card.slip{
  background: var(--card);
  border:1px solid rgba(92,255,204,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.85);
}

.card.slip .hd{
  border-bottom:1px solid rgba(255,255,255,.10);
  padding-bottom:6px;
}
.card.slip .meta{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.slipHeadMobile{
  padding:8px 14px 6px;
}
.slipHeadMobile .slipToggle{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.layout.layoutSingle{ grid-template-columns:minmax(0,1fr); }
.layout.layoutSingle > main{ grid-column:1 / -1; }

.kpiMob{
  padding:6px 8px;
}

@media (min-width: 1021px){
  .card.slip{
    max-height:72vh;
    overflow-y:auto;
  }
}

.fixtureRow .cta .btn{
  padding:6px 12px;
  margin-left:6px;
}

.statStrip,
.profileStats{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.statStrip .stat,
.profileStats .stat{
  flex:1 1 90px;
  min-width:90px;
}

.statStrip .label,
.profileStats .label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(234,243,255,.55);
  font-weight:800;
}

.statStrip .value,
.profileStats .value{
  font-size:16px;
  font-weight:950;
}


/* --- Small button variant --- */
.btn.sm{
  padding:8px 10px;
  border-radius: 12px;
  font-weight:900;
  font-size:12px;
}

/* Cards list rows used on Home */
.fixtureRow .cta{ margin-top:8px; }

/* --- Global bet slip UX --- */
.slip{
  /* desktop: keep out of the way */
  right:16px;
  left:auto;
  transform:none;
  width: var(--slipW);
  max-width: calc(100vw - 32px);
  bottom: 84px; /* sits above bottom bar */
}

.slipHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}
.slipTitle{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-weight:950;
}
.slipCount{
  opacity:.75;
  font-weight:900;
}
.slipMinBtn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.slipMinBtn .chev{ display:block; transform: translateY(-1px); font-size:16px; }
.slipCollapsed .slipMinBtn .chev{ transform: rotate(180deg); }

/* Collapse behavior on all devices */
.slipCollapsed .bd{ display:none; }

/* Stake +/- row */
.stakeRow{
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  gap:10px;
  align-items:center;
}
.stepBtn{
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight:1000;
  font-size:18px;
  cursor:pointer;
}
.stepBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* Slip item layout helpers */
.lineMain{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.lineMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
  color: rgba(234,243,255,.75);
  font-weight:800;
  font-size:12px;
}
.lineMain .fixture{
  font-weight:900;
  line-height:1.25;
}

/* Mobile: centred slip like the screenshot, compact header, above bottom bar */
@media (max-width: 1020px){
  .slip{
    left:50%;
    right:auto;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 520px;
    bottom: 76px;
    z-index: 70;
  }
  .slipHead{
    padding:10px 12px;
  }
  .slip .bd{
    padding: 12px;
  }
  .slip .bd{
    max-height: 52vh;
    overflow:auto;
  }
}

/* --- Leaderboards: nicer + responsive --- */
.leaderboardTable{
  width:100%;
  border-collapse:collapse;
}
.leaderboardTable th{
  text-align:left;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(234,243,255,.55);
  padding:10px 8px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.leaderboardTable td{
  padding:10px 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-weight:850;
}
.leaderboardTable tr:hover td{
  background: rgba(255,255,255,.03);
}
@media (max-width: 720px){
  .leaderboardTable thead{ display:none; }
  .leaderboardTable tr{
    display:block;
    padding:12px 12px 12px;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .leaderboardTable td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:5px 0;
    border-bottom:none;
  }
  .leaderboardTable td[data-label]:before{
    content: attr(data-label);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(234,243,255,.55);
    font-weight:900;
  }
}


/* Account page layout */
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.compactAuth h4{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(234,243,255,.75);
}
@media (max-width: 900px){
  .grid2{ grid-template-columns: 1fr; }
}


/* Desktop header alignment */
.rightRow{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}
.rightRow .btn{
  white-space:nowrap;
}


/* Messages: show chat + inbox on mobile (stacked) */
@media (max-width: 1020px){
  .messagesLayout{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-bottom: 92px;
  }
  .messagesLayout aside.sidebar.card{
    display:block;
    order:2;
  }
  .messagesLayout main{
    order:1;
  }
}

.cta{ margin-top:8px; }


/* Mobile: force-centre bet slip so it never goes off-screen */
@media (max-width: 1020px){
  .slip{
    left:50% !important;
    right:auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 24px) !important;
    max-width: 520px !important;
  }
}



/* Global typography spacing */
.card .bd p{ margin: 0 0 10px; line-height:1.55; }
.card .bd p:last-child{ margin-bottom:0; }
.tiny{ font-size:12px; }
.miniNotice{ padding: 10px 12px; border:1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(255,255,255,.04); }
.pageTopSpace{ margin-top: 14px; }


/* Leaderboard polish */
.rankPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-weight:1000;
}
.lbRank1 td{ background: rgba(92,255,204,.06); }
.lbRank2 td{ background: rgba(106,165,255,.06); }
.lbRank3 td{ background: rgba(255,204,102,.06); }


/* Stats blocks spacing */
.statStrip .stat,
.profileStats .stat{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}


/* Site highlights card: consistent spacing + grid */
.highlightCard{ margin-bottom: 18px; }
.highlightCard .hd{ align-items:flex-end; }
.highlightCard .sub{ color: rgba(234,243,255,.55); font-weight:800; font-size:12px; }
.highlightCard .statStrip{ gap:12px; }
.highlightCard .stat .value{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
@media (max-width: 720px){
  .highlightCard .statStrip{ flex-direction:column; }
  .highlightCard .stat{ width:100%; }
}


/* Rank tiles */
.rankGrid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:12px;
}
.rankTile{
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.rankTile .label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(234,243,255,.55);
  font-weight:900;
}
.rankTile .value{
  margin-top:6px;
  font-size:15px;
  font-weight:950;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:baseline;
}
@media (max-width: 1020px){
  .rankGrid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .rankGrid{ grid-template-columns: 1fr; }
}


/* Accent tiles (more exciting colour pops, still on-brand) */
.accentMint{
  background:
    radial-gradient(420px 180px at 15% 15%, rgba(92,255,204,.18), transparent 55%),
    rgba(255,255,255,.03);
}
.accentMint2{
  background:
    radial-gradient(420px 180px at 15% 15%, rgba(92,255,204,.14), transparent 55%),
    radial-gradient(420px 180px at 85% 10%, rgba(106,165,255,.10), transparent 55%),
    rgba(255,255,255,.03);
}
.accentSky{
  background:
    radial-gradient(420px 180px at 15% 15%, rgba(106,165,255,.18), transparent 55%),
    rgba(255,255,255,.03);
}
.accentSky2{
  background:
    radial-gradient(420px 180px at 85% 15%, rgba(106,165,255,.16), transparent 55%),
    rgba(255,255,255,.03);
}
.accentWarn{
  background:
    radial-gradient(420px 180px at 15% 15%, rgba(255,204,102,.18), transparent 55%),
    rgba(255,255,255,.03);
}

/* Better form layout for Edit Profile / account settings */
.compactAuth .formRow{
  flex-direction:column;
  gap:6px;
  align-items:stretch;
}
.compactAuth .label{
  font-size:12px;
  font-weight:900;
  color: rgba(234,243,255,.72);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.compactAuth .input{
  width:100%;
}


/* --- Better rank tile UI --- */
.ranksCard .rankGrid{ grid-template-columns: repeat(5, minmax(0,1fr)); }
.rankTile{
  position:relative;
  overflow:hidden;
}
.rankTile:after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:16px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.rtTop{
  display:flex;
  align-items:center;
  gap:10px;
}
.rtIcon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  font-weight:1000;
}
.rtMeta .label{ margin:0; }
.rtValue{
  margin-top:10px;
  font-size:24px;
  font-weight:1000;
  letter-spacing:-.2px;
}
.rtSub{
  margin-top:4px;
  font-size:13px;
  font-weight:900;
  color: rgba(234,243,255,.72);
}

.isMeRow td{
  background: rgba(92,255,204,.06);
}
@media (max-width: 1020px){
  .ranksCard .rankGrid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .ranksCard .rankGrid{ grid-template-columns: 1fr; }
}


/* Ranks: now 6 tiles incl. balance */
.ranksCard .rankGrid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 1200px){
  .ranksCard .rankGrid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .ranksCard .rankGrid{ grid-template-columns: 1fr; }
}


/* Home revamp */
.heroHome .sub{ color: rgba(234,243,255,.60); font-weight:850; }
.homeRow{ display:grid; grid-template-columns: 1.25fr .75fr; gap: 14px; }
.homeCard{
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  background: radial-gradient(600px 300px at 15% 20%, rgba(92,255,204,.10), transparent 55%),
              radial-gradient(600px 300px at 85% 20%, rgba(106,165,255,.10), transparent 55%),
              rgba(15,26,51,.92);
  box-shadow: var(--shadow);
  padding: 14px;
}
.homeTitle{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.bigName{ font-size:20px; font-weight:1000; letter-spacing:.1px; margin-top:2px; }
.balPill{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  padding: 10px 12px;
  min-width: 140px;
  text-align:right;
}
.balVal{
  font-weight:1000;
  font-size:18px;
  background: linear-gradient(90deg, var(--mint), var(--sky));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.quickStrip{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.qs{
  flex:1 1 110px;
  min-width:110px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.qs .label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: rgba(234,243,255,.60); font-weight:900; }
.qs .value{ margin-top:6px; font-size:16px; font-weight:1000; }

.inplayList{ display:flex; flex-direction:column; gap:10px; }
.inplayItem{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.inplayItem .teams{ font-weight:1000; letter-spacing:.1px; }
.inplayMeta{ display:flex; align-items:center; gap:8px; }
.livePill{
  padding: 6px 10px;
  border-radius: 999px;
  font-weight:1000;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background: rgba(92,255,204,.12);
  border: 1px solid rgba(92,255,204,.30);
  color: rgba(234,243,255,.96);
}
.scorePill{
  padding: 6px 10px;
  border-radius: 999px;
  font-weight:1000;
  font-size:12px;
  background: rgba(106,165,255,.12);
  border: 1px solid rgba(106,165,255,.25);
}

.champGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.champCard{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  padding: 12px;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.champCard:hover{ transform: translateY(-1px); border-color: rgba(92,255,204,.28); background: var(--card); }
.champTop{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.champLabel{ font-size:11px; text-transform:uppercase; letter-spacing:.10em; font-weight:950; color: rgba(234,243,255,.70); }
.champBadge{
  padding: 6px 10px;
  border-radius: 999px;
  font-weight:1000;
  font-size:11px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}
.champName{ display:block; margin-top:10px; font-weight:1000; font-size:14px; color: var(--text); text-decoration:none; }
.champName:hover{ text-decoration:underline; text-underline-offset: 3px; }
.champVal{
  margin-top:6px;
  font-size:18px;
  font-weight:1000;
  background: linear-gradient(90deg, var(--mint), var(--sky));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.champ-profit .champVal{ background: linear-gradient(90deg, var(--mint), var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.champ-balance .champVal{ background: linear-gradient(90deg, var(--sky), var(--mint)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.champ-followers .champVal, .champ-bets .champVal{ background: linear-gradient(90deg, var(--warn), var(--mint)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.champ-bigbet .champVal{ background: linear-gradient(90deg, var(--warn), var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.champ-bigwin .champVal{ background: linear-gradient(90deg, var(--mint), var(--warn)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.rewardTiles{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.rTile{
  padding:12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.rTile .t{ font-weight:1000; font-size:13px; }
.rTile .s{ margin-top:6px; color: rgba(234,243,255,.65); font-weight:850; font-size:12px; line-height:1.45; }

@media (max-width: 1020px){
  .homeRow{ grid-template-columns: 1fr; }
  .champGrid{ grid-template-columns: 1fr; }
  .balPill{ min-width: 120px; }
}


.liveScoreBar{ border-color: rgba(92,255,204,.22); background: radial-gradient(500px 220px at 20% 20%, rgba(92,255,204,.18), transparent 55%), linear-gradient(180deg, rgba(15,26,51,.96), rgba(11,18,34,.96)); }


/* In-play odds */
.oddBtn.live{ border-color: rgba(255,204,102,.28); background: rgba(255,204,102,.06); }
.oddBtn.live:hover{ border-color: rgba(255,204,102,.55); background: rgba(255,204,102,.10); }
.oddBtn.live .tag{ display:inline-flex; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:950; letter-spacing:.06em; background: rgba(255,204,102,.18); color:#ffe9b8; border:1px solid rgba(255,204,102,.35); }


/* Force betslip to be fully opaque (no text bleed-through) */
.slip, .card.slip{
  background: var(--card) !important;
  backdrop-filter: none !important;
}

/* Disable betting buttons when closed */
.oddBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}

/* Weekly bonus pill */
.kpiBonus{
  border-color: rgba(255,204,102,.25);
  background: linear-gradient(135deg, rgba(255,204,102,.14), rgba(92,255,204,.08));
}
.kpiBonus .label{ color: rgba(234,243,255,.78); }

/* Bonus tiles accents */
.rankTile.accentSky{
  border-color: rgba(106,165,255,.22);
  background: linear-gradient(180deg, rgba(106,165,255,.10), rgba(255,255,255,.03));
}
.rankTile.accentSky .rtIcon{
  background: rgba(106,165,255,.18);
  border-color: rgba(106,165,255,.22);
}
.rankTile.accentMint{
  border-color: rgba(92,255,204,.22);
  background: linear-gradient(180deg, rgba(92,255,204,.10), rgba(255,255,255,.03));
}
.rankTile.accentMint .rtIcon{
  background: rgba(92,255,204,.18);
  border-color: rgba(92,255,204,.22);
}

.match.highlight{ box-shadow: 0 0 0 3px rgba(92,255,204,.20), var(--shadow); border-color: rgba(92,255,204,.35); }