/* Stats2Pitch v1.11.1 — reference-board refinement.
 * Matches the premium mobile card concept while preserving the live board API,
 * detail modals, lifecycle status, filters, refresh and prediction engine.
 */
:root{
  --s2p-neon:#9cff00;
  --s2p-neon-soft:#7ee600;
  --s2p-bg:#02070b;
  --s2p-card:#07121c;
  --s2p-card-2:#091722;
  --s2p-line:#203645;
  --s2p-muted:#94a8b8;
}

html.s2p-v111,html.s2p-v111 body{
  background:
    radial-gradient(circle at 4% 36%,rgba(156,255,0,.055),transparent 25%),
    radial-gradient(circle at 96% 58%,rgba(17,175,105,.045),transparent 26%),
    #02070b!important;
}
html.s2p-v111 .app-shell{
  width:min(980px,100%)!important;
  padding:18px 18px calc(106px + env(safe-area-inset-bottom,0px))!important;
}
#s2p-card-board{max-width:900px;margin:0 auto}

/* The reference is intentionally clean: controls stay behind the hamburger. */
html.s2p-v111 .s2p-board-tools{display:none!important}

.s2p-new-head{
  min-height:76px!important;
  margin:0 0 14px!important;
  grid-template-columns:50px 1fr 50px!important;
}
.s2p-brand-lockup{
  height:42px!important;
  max-width:min(350px,68vw)!important;
  filter:drop-shadow(0 0 12px rgba(156,255,0,.06));
}
.s2p-brand-center p{
  margin-top:3px!important;
  color:#a7b5c2!important;
  font-size:15px!important;
}
.s2p-icon-btn{
  color:#f7fbff!important;
  font-size:26px!important;
}

.s2p-main-tabs{
  margin:0 0 22px!important;
  min-height:61px;
  border-radius:21px!important;
  border-color:#2a3b48!important;
  background:linear-gradient(180deg,#090f17,#060b11)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.03),0 16px 36px rgba(0,0,0,.16)!important;
}
.s2p-main-tab{
  min-height:60px!important;
  font-size:15px!important;
  letter-spacing:-.01em;
  color:#aeb9c5!important;
}
.s2p-main-tab.active{
  background:linear-gradient(135deg,#b9ff18,#8cec00)!important;
  color:#071000!important;
  box-shadow:0 0 30px rgba(156,255,0,.22),inset 0 1px rgba(255,255,255,.28)!important;
}

/* One premium card stream, like the approved mobile reference. */
.s2p-card-list{
  grid-template-columns:1fr!important;
  gap:14px!important;
}
.s2p-match-card{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(150px,.82fr) minmax(130px,.58fr)!important;
  grid-template-areas:
    "competition competition kickoff"
    "teams prediction details"
    "teams odds details"!important;
  column-gap:18px!important;
  row-gap:8px!important;
  min-height:174px!important;
  padding:17px 18px!important;
  border-radius:22px!important;
  border:1px solid #203645!important;
  background:
    radial-gradient(circle at 88% 20%,rgba(156,255,0,.035),transparent 30%),
    linear-gradient(145deg,#081520,#050d14)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 14px 30px rgba(0,0,0,.2)!important;
}
.s2p-match-card:before{display:none!important}
.s2p-card-main,.s2p-card-side{display:contents!important}

.s2p-competition{
  grid-area:competition!important;
  margin:0!important;
  min-height:28px;
  align-items:center!important;
  font-size:13px!important;
}
.s2p-competition img{width:22px!important;height:22px!important}
.s2p-competition .league-badge{width:24px!important;height:24px!important}
.s2p-competition strong{font-size:13px!important;color:#dbe5ed!important}
.s2p-competition small{font-size:12px!important;color:#7f95a7!important}

.s2p-team-stack{
  grid-area:teams!important;
  align-self:center;
  gap:5px!important;
}
.s2p-team-row{gap:10px!important}
.s2p-team-row img,.s2p-team-fallback{width:38px!important;height:38px!important}
.s2p-team-row strong{
  font-size:17px!important;
  line-height:1.18!important;
  color:#f7fbff!important;
}
.s2p-vs{
  padding-left:48px!important;
  color:#607487!important;
  font-size:11px!important;
}

.s2p-prediction{
  grid-area:prediction!important;
  align-self:end;
  margin:0!important;
  padding:0 4px 3px!important;
  text-align:center;
  color:var(--s2p-neon)!important;
  font-size:17px!important;
  line-height:1.2!important;
  font-weight:950!important;
}
.s2p-prediction .check{display:none!important}

.s2p-kickoff{
  grid-area:kickoff!important;
  align-self:start;
  text-align:right!important;
  color:#9eafbd!important;
  font-size:12px!important;
}
.s2p-kickoff b{
  display:inline!important;
  margin-right:6px;
  font-size:14px!important;
  color:#d7e2ea!important;
}
.s2p-kickoff.live,.s2p-kickoff.live b{color:var(--s2p-neon)!important}
.s2p-kickoff.pending,.s2p-kickoff.pending b{color:#d8b665!important}

.s2p-odd-wrap{
  grid-area:odds!important;
  align-self:start;
  justify-content:center!important;
}
.s2p-odd-pill{
  min-width:108px!important;
  padding:9px 15px!important;
  border-radius:18px!important;
  border:1.5px solid var(--s2p-neon)!important;
  color:var(--s2p-neon)!important;
  background:linear-gradient(180deg,#0a130d,#060d08)!important;
  font-size:24px!important;
  font-weight:950!important;
  box-shadow:0 0 22px rgba(156,255,0,.08)!important;
}
/* Save remains available through the existing card-board state, but the visual
   reference is intentionally clean and does not show a separate star control. */
.s2p-save{display:none!important}

.s2p-view-details{
  grid-area:details!important;
  justify-self:end!important;
  align-self:center!important;
  width:132px!important;
  min-height:43px!important;
  border-radius:15px!important;
  background:#0a121b!important;
  border:1px solid #344755!important;
  color:#eef4f8!important;
  font-size:13px!important;
  font-weight:800!important;
  padding:9px 12px!important;
}
.s2p-view-details:hover{border-color:var(--s2p-neon)!important;color:var(--s2p-neon)!important}

.s2p-mobile-nav{
  bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
  width:min(700px,calc(100vw - 18px))!important;
  min-height:74px!important;
  padding:7px 8px!important;
  border-radius:22px!important;
  border:1px solid #283b49!important;
  background:rgba(4,11,17,.97)!important;
  box-shadow:0 20px 54px rgba(0,0,0,.58),0 0 24px rgba(156,255,0,.025)!important;
}
.s2p-nav-btn{
  min-height:58px!important;
  font-size:12px!important;
}
.s2p-nav-btn .ico{font-size:22px!important}
.s2p-nav-btn.active{
  color:var(--s2p-neon)!important;
  background:rgba(156,255,0,.035)!important;
  box-shadow:inset 0 -3px var(--s2p-neon)!important;
}

@media(max-width:720px){
  html.s2p-v111 .app-shell{padding:12px 10px calc(103px + env(safe-area-inset-bottom,0px))!important}
  .s2p-new-head{min-height:66px!important;grid-template-columns:42px 1fr 42px!important;margin-bottom:10px!important}
  .s2p-brand-lockup{height:34px!important;max-width:250px!important}
  .s2p-brand-center p{font-size:12px!important}
  .s2p-icon-btn{font-size:22px!important}
  .s2p-main-tabs{
    grid-template-columns:repeat(4,minmax(98px,1fr))!important;
    overflow-x:auto!important;
    scrollbar-width:none;
    margin-bottom:14px!important;
  }
  .s2p-main-tabs::-webkit-scrollbar{display:none}
  .s2p-main-tab{min-height:53px!important;font-size:13px!important;padding:8px 10px!important}
  .s2p-main-tab .count{display:none!important}

  .s2p-match-card{
    grid-template-columns:minmax(0,1.2fr) minmax(108px,.8fr)!important;
    grid-template-areas:
      "competition kickoff"
      "teams odds"
      "prediction details"!important;
    min-height:166px!important;
    padding:14px!important;
    border-radius:19px!important;
    column-gap:10px!important;
    row-gap:9px!important;
  }
  .s2p-competition{min-width:0!important}
  .s2p-competition small{display:none!important}
  .s2p-team-row img,.s2p-team-fallback{width:32px!important;height:32px!important}
  .s2p-team-row strong{font-size:15px!important}
  .s2p-vs{padding-left:42px!important;font-size:10px!important}
  .s2p-prediction{text-align:left!important;align-self:center!important;font-size:15px!important;padding:0!important}
  .s2p-kickoff{font-size:11px!important;white-space:nowrap}
  .s2p-kickoff b{font-size:12px!important;margin-right:4px}
  .s2p-odd-wrap{justify-content:flex-end!important;align-self:center!important}
  .s2p-odd-pill{min-width:92px!important;font-size:20px!important;padding:8px 12px!important;border-radius:15px!important}
  .s2p-view-details{width:108px!important;min-height:38px!important;font-size:12px!important;padding:7px 9px!important}
  .s2p-mobile-nav{width:calc(100vw - 12px)!important;border-radius:18px!important}
}

@media(max-width:410px){
  .s2p-brand-lockup{height:30px!important;max-width:215px!important}
  .s2p-main-tab{font-size:12px!important}
  .s2p-match-card{padding:12px!important}
  .s2p-competition strong{font-size:12px!important}
  .s2p-team-row strong{font-size:14px!important}
  .s2p-prediction{font-size:14px!important}
  .s2p-odd-pill{min-width:84px!important;font-size:19px!important}
  .s2p-view-details{width:98px!important;font-size:11px!important}
  .s2p-nav-btn{font-size:11px!important}
}

/* The refresh pitch still owns the screen while fresh data is loading. */
html.s2p-refresh-active #s2p-card-board{visibility:hidden!important}