/* =========================================================
   SDX STREAMING V3.1 — VISUAL POLISH
   Loads after site-v3.css.
   Goal: calmer hierarchy, fewer card-walls, more premium spacing.
   ========================================================= */

:root{
  --v31-bg:#050816;
  --v31-surface:rgba(11,17,40,.76);
  --v31-surface-soft:rgba(255,255,255,.022);
  --v31-line:rgba(112,151,255,.12);
  --v31-line-strong:rgba(87,211,255,.22);
  --v31-text:#f3f7ff;
  --v31-muted:#9eabc9;
  --v31-radius:20px;
  --v31-shadow:0 24px 70px rgba(0,0,0,.24);
}

/* ---------- Global ---------- */
html{
  scroll-behavior:smooth;
}
body{
  letter-spacing:-.005em;
  background:
    radial-gradient(circle at 18% -10%,rgba(46,126,255,.12),transparent 38rem),
    radial-gradient(circle at 88% 2%,rgba(121,70,255,.10),transparent 34rem),
    var(--v31-bg)!important;
}
body:before{
  opacity:.18!important;
}
main{
  overflow:clip;
}
section{
  position:relative;
}
.section + .section:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(1160px,calc(100% - 34px));
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--v31-line),transparent);
  opacity:.65;
}

/* ---------- Typography ---------- */
h1,h2,h3{
  text-wrap:balance;
}
p{
  text-wrap:pretty;
}
.kicker{
  font-size:.67rem!important;
  color:#61dbff!important;
  opacity:.92;
}
.heading p,
.section-sub,
.muted{
  color:var(--v31-muted)!important;
}
.heading{
  max-width:960px;
}
.heading h2{
  color:var(--v31-text);
}

/* ---------- Header ---------- */
.header{
  top:12px!important;
  height:62px!important;
  border-radius:16px!important;
  background:rgba(5,8,22,.78)!important;
  backdrop-filter:blur(18px)!important;
  box-shadow:0 10px 40px rgba(0,0,0,.16)!important;
}
.header .brand{
  gap:10px!important;
}
.header .brand img{
  width:35px!important;
  height:35px!important;
}
.header .nav{
  gap:17px!important;
}
.header .nav a{
  position:relative;
  padding:7px 0!important;
  font-size:.80rem!important;
  opacity:.82;
}
.header .nav a:hover{
  opacity:1;
}
.header .nav a:after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:2px;
  height:1px;
  background:#60dfff;
  transition:right .18s ease;
}
.header .nav a:hover:after{
  right:0;
}

/* ---------- Hero ---------- */
.hero.hero-clean{
  min-height:510px!important;
  border:1px solid rgba(110,154,255,.12)!important;
  box-shadow:0 34px 110px rgba(0,0,0,.30)!important;
}
.hero.hero-clean:after{
  background:
    linear-gradient(90deg,rgba(4,7,20,.95) 0%,rgba(4,7,20,.80) 38%,rgba(4,7,20,.20) 70%,rgba(4,7,20,.08) 100%)!important;
}
.hero-clean-copy{
  padding-left:52px!important;
  max-width:620px!important;
}
.hero-clean .eyebrow,
.hero-clean .kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid rgba(87,211,255,.18);
  border-radius:999px;
  background:rgba(8,15,36,.44);
}
.hero-clean h1{
  margin-top:20px!important;
  line-height:.96!important;
  letter-spacing:-.055em!important;
}
.hero-clean .lead{
  color:#bac5de!important;
  max-width:530px!important;
}
.hero-clean .actions{
  gap:10px!important;
}

/* ---------- Buttons ---------- */
.btn,
button.btn,
a.btn{
  min-height:44px!important;
  padding:0 16px!important;
  border-radius:12px!important;
  font-size:.82rem!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  box-shadow:none!important;
}
.btn.primary,
.btn-primary{
  background:linear-gradient(135deg,#54ddff,#657dff)!important;
  color:#04101e!important;
  border:none!important;
}
.btn.secondary,
.btn-ghost{
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(133,165,255,.16)!important;
  color:#d7e1f8!important;
}
.btn:hover{
  transform:translateY(-1px);
}

/* ---------- Cards / panels ---------- */
.panel,
.card,
.game-card,
.schedule-card,
.clip-card,
.content-card{
  border:1px solid var(--v31-line)!important;
  background:linear-gradient(180deg,rgba(13,19,44,.82),rgba(8,13,31,.80))!important;
  box-shadow:none!important;
}
.panel:hover,
.card:hover,
.game-card:hover,
.clip-card:hover{
  border-color:rgba(105,210,255,.18)!important;
}
.card{
  border-radius:18px!important;
}
.card h3,
.panel h3{
  letter-spacing:-.025em!important;
}

/* ---------- Live ---------- */
#live{
  padding-bottom:58px!important;
}
#live .heading{
  margin-bottom:18px!important;
}
.livebox{
  gap:0!important;
  overflow:hidden;
  background:rgba(8,13,30,.76)!important;
  border:1px solid var(--v31-line)!important;
}
.livebox .preview{
  border-radius:0!important;
}
.livebox .details{
  border-left:1px solid var(--v31-line);
}
.livebox .details h3{
  margin-bottom:8px!important;
}
.datagrid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.datagrid > *{
  min-height:70px!important;
  padding:12px!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(122,155,240,.08)!important;
}

/* ---------- Content ---------- */
#content{
  background:linear-gradient(180deg,transparent,rgba(20,29,70,.08),transparent);
}
#content .latest{
  align-items:stretch!important;
}
#content .latest > .card{
  overflow:hidden;
}
#content .latest > .card:first-child{
  min-height:390px!important;
  box-shadow:var(--v31-shadow)!important;
}
#content .latest > .card:not(:first-child){
  background:rgba(9,14,33,.72)!important;
}
.content-library-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-end!important;
  gap:18px!important;
}
.archive-grid > *{
  transition:transform .16s ease,border-color .16s ease;
}
.archive-grid > *:hover{
  transform:translateY(-2px);
}

/* ---------- Stream plan ---------- */
#schedule{
  background:
    radial-gradient(circle at 0 40%,rgba(49,160,255,.06),transparent 28rem);
}
.next-stream-v2{
  border-color:rgba(91,203,255,.16)!important;
  background:
    linear-gradient(135deg,rgba(20,31,71,.82),rgba(8,14,34,.84))!important;
  box-shadow:0 25px 75px rgba(0,0,0,.18)!important;
}
.countdown-grid{
  gap:8px!important;
}
.countdown-grid > *{
  padding:15px 10px!important;
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(117,153,243,.08)!important;
  border-radius:14px!important;
}
.schedule-v2-grid > *{
  opacity:.78;
}
.schedule-v2-grid > *.is-next,
.schedule-v2-grid > *:first-child{
  opacity:1;
}

/* ---------- Games ---------- */
.games-v2-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.games-v2-grid > *{
  min-height:280px!important;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease;
}
.games-v2-grid > *:hover{
  transform:translateY(-3px);
}
.games-v2-grid > *:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(3,7,18,.46));
}

/* ---------- Clips ---------- */
#clips .clips-featured{
  border-color:rgba(104,204,255,.16)!important;
}
#clips .clips-grid > *{
  min-height:0!important;
}

/* ---------- Community ---------- */
#community{
  padding-top:64px!important;
}
.community-hero{
  min-height:300px!important;
  background:
    radial-gradient(circle at 75% 45%,rgba(48,187,255,.10),transparent 22rem),
    linear-gradient(135deg,rgba(17,27,64,.88),rgba(8,13,31,.90))!important;
  border-color:rgba(105,202,255,.15)!important;
}
.community-copy{
  max-width:600px!important;
}
.community-copy h3{
  font-size:clamp(1.9rem,3vw,2.8rem)!important;
}

/* ---------- About ---------- */
#about{
  padding-bottom:52px!important;
}
.about-v2-story{
  background:
    linear-gradient(135deg,rgba(12,20,48,.88),rgba(7,12,29,.88))!important;
}
.about-avatar-wrap img{
  box-shadow:0 20px 55px rgba(0,0,0,.28)!important;
}
.about-v2-story h3{
  font-size:clamp(1.7rem,3vw,2.45rem)!important;
}

/* ---------- More ---------- */
.v3-more-strip{
  border-color:rgba(112,151,255,.10)!important;
  background:rgba(8,13,31,.54)!important;
}
.v3-more-links button{
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.v3-more-links button:hover{
  background:rgba(83,207,255,.07)!important;
}

/* ---------- CTA ---------- */
.cta{
  border:1px solid rgba(96,194,255,.14)!important;
  background:
    linear-gradient(120deg,rgba(25,38,89,.84),rgba(14,20,54,.88))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.18)!important;
}
.cta h2{
  max-width:650px;
}

/* ---------- Footer ---------- */
.footer{
  padding-top:22px!important;
}
.footer-v2{
  border-top:1px solid rgba(112,151,255,.10)!important;
}
.footer-v2 a{
  opacity:.74;
}
.footer-v2 a:hover{
  opacity:1;
}

/* ---------- Mobile refinements ---------- */
@media(max-width:1020px){
  .games-v2-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:720px){
  .header{
    height:58px!important;
    border-radius:14px!important;
  }
  .hero.hero-clean{
    min-height:455px!important;
  }
  .hero.hero-clean:after{
    background:linear-gradient(180deg,rgba(4,7,20,.38),rgba(4,7,20,.92) 72%)!important;
  }
  .hero-clean-copy{
    align-self:flex-end!important;
    padding:34px 20px 32px!important;
  }
  .hero-clean h1{
    margin-top:14px!important;
  }
  .hero-clean .lead{
    max-width:100%!important;
  }
  .livebox .details{
    border-left:0!important;
    border-top:1px solid var(--v31-line);
  }
  .datagrid{
    grid-template-columns:1fr 1fr!important;
  }
  .games-v2-grid{
    grid-template-columns:1fr!important;
  }
  .games-v2-grid > *{
    min-height:230px!important;
  }
  .community-hero{
    min-height:250px!important;
  }
  .v3-more-links{
    width:100%;
  }
  .v3-more-links button{
    flex:1 1 calc(50% - 8px);
  }
}