/*
 SPORTS INTEL MOBILE APP UI V6
 Corrective visual patch for production mobile UI.
 Loaded after V1-V5 and intentionally overrides earlier mobile rules.
*/

@media (max-width:720px){

:root{
  --si6-bg:#020a11;
  --si6-panel:#07141f;
  --si6-panel2:#0a1926;
  --si6-line:#17354c;
  --si6-text:#f5f8fb;
  --si6-muted:#8095a7;
  --si6-blue:#1688ff;
  --si6-cyan:#42a8ff;
  --si6-green:#36dc89;
  --si6-red:#ff414d;
  --si6-amber:#efba4e;
}

/* =========================================================
   GLOBAL / SCROLL
   ========================================================= */
html{
  width:100%!important;
  min-height:100%!important;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:scroll!important;
  background:var(--si6-bg)!important;
}
body{
  width:100%!important;
  min-height:100vh!important;
  height:auto!important;
  max-height:none!important;
  position:static!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  touch-action:pan-y pinch-zoom!important;
  background:
    radial-gradient(circle at 50% -130px,rgba(18,100,160,.16),transparent 420px),
    var(--si6-bg)!important;
  color:var(--si6-text)!important;
  padding-bottom:84px!important;
}
*,*:before,*:after{box-sizing:border-box!important}

/* Remove V3 transient overlays that can block pointer/scroll behavior */
.si-v3-skeleton,
.si-refresh-indicator{
  display:none!important;
  pointer-events:none!important;
}

/* =========================================================
   APP HEADER — one clean header only
   ========================================================= */
.si-app-header{
  height:58px!important;
  min-height:58px!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  background:rgba(2,10,17,.985)!important;
  border-bottom:1px solid #132d40!important;
  box-shadow:none!important;
}
.si-app-logo strong{
  color:#fff!important;
  font-size:18px!important;
  font-weight:950!important;
  letter-spacing:-.6px!important;
}
.si-app-logo strong em{color:var(--si6-blue)!important}
.si-app-logo small,
.si-app-head-center small{
  color:#6f879a!important;
}
.si-app-head-center b{
  color:#f3f7fa!important;
  font-size:12px!important;
  font-weight:900!important;
}
.si-app-head-action,
.si-app-back{
  width:36px!important;
  height:36px!important;
  border-radius:11px!important;
  border:1px solid #1a374d!important;
  background:#071722!important;
  color:#e8f1f7!important;
}

/* the legacy header is marked by V6 JS */
.si6-legacy-header{
  display:none!important;
}

/* =========================================================
   HOME TOP AREA — fixed full-width alignment
   ========================================================= */
.pro-toolbar{
  width:calc(100% - 24px)!important;
  max-width:none!important;
  margin:10px 12px 10px!important;
  padding:12px!important;
  border:1px solid var(--si6-line)!important;
  border-radius:16px!important;
  background:#06131e!important;
}
.pro-toolbar,
.pro-toolbar .toolbar-main,
.pro-toolbar .pro-date,
.pro-toolbar .sport-tabs,
.pro-toolbar .pro-sport-tabs,
.pro-toolbar .filter-trigger{
  max-width:none!important;
}
.pro-toolbar .toolbar-main{
  width:100%!important;
  display:block!important;
}
.pro-date{
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  margin:0 0 10px!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) 38px!important;
  align-items:center!important;
  border:1px solid #173b55!important;
  border-radius:12px!important;
  background:#071722!important;
}
.pro-date>a{
  width:34px!important;
  height:34px!important;
  margin:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #183b55!important;
  border-radius:9px!important;
  color:#8cc7f5!important;
  text-decoration:none!important;
}
.pro-date>div{
  min-width:0!important;
  text-align:center!important;
}
.pro-date b{
  color:#fff!important;
  font-size:15px!important;
  font-weight:950!important;
}
.pro-date em{
  color:#8fa5b7!important;
  font-style:normal!important;
  font-size:9px!important;
}
.pro-date small{display:none!important}

.pro-sport-tabs{
  width:100%!important;
  display:flex!important;
  gap:7px!important;
  padding:0 0 9px!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
.pro-sport-tabs::-webkit-scrollbar{display:none!important}
.pro-sport-tabs a{
  flex:0 0 64px!important;
  min-width:64px!important;
  height:48px!important;
  padding:0 7px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #16344b!important;
  border-radius:12px!important;
  background:#071722!important;
  color:#8198aa!important;
  font-size:11px!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
.pro-sport-tabs a.active{
  border-color:var(--si6-blue)!important;
  background:linear-gradient(145deg,#0e3b64,#0a2946)!important;
  color:#fff!important;
}
.filter-trigger{
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  border:1px solid #173b55!important;
  border-radius:11px!important;
  background:#0a1c2a!important;
  color:#8fa5b6!important;
  font-size:10px!important;
  font-weight:850!important;
}

/* Status tabs align to exact same edges as toolbar */
.si-mobile-status-tabs{
  width:calc(100% - 24px)!important;
  max-width:none!important;
  margin:0 12px 10px!important;
  padding:4px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  border:1px solid var(--si6-line)!important;
  border-radius:13px!important;
  background:#06131e!important;
}
.si-mobile-status-tabs a{
  min-width:0!important;
  height:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:10px!important;
  color:#86a0b3!important;
  font-size:11px!important;
  font-weight:900!important;
}
.si-mobile-status-tabs a.active{
  background:#0d2a43!important;
  color:#fff!important;
}
.si-mobile-status-tabs a.live.active{
  background:linear-gradient(145deg,#d82b36,#ff424d)!important;
}

/* Align summary metrics to same 12px edges */
.dashboard-metrics,
.metrics,
.metric-grid,
.stats-grid{
  max-width:none!important;
}
.metric{
  border-color:#17384f!important;
  background:#081925!important;
  color:#8ca4b6!important;
}
.metric b{color:#f5f8fb!important}
.metric.green b{color:var(--si6-green)!important}
.metric.red b{color:#ff5661!important}
.metric.amber b{color:#ffb73f!important}
.metric.purple b{color:#906cff!important}

/* =========================================================
   LIVE SECTION
   ========================================================= */
.schedule-zone,
.country-zone{
  width:calc(100% - 24px)!important;
  max-width:none!important;
  margin:0 12px 15px!important;
}
.zone-head.live,
.schedule-zone .zone-head.live{
  position:relative!important;
  top:auto!important;
  z-index:1!important;
  min-height:42px!important;
  margin:0 0 8px!important;
  padding:10px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  border:1px solid #173a52!important;
  border-radius:12px!important;
  background:#05121c!important;
}
.zone-head.live span{
  color:#ff525e!important;
  font-size:12px!important;
  font-weight:950!important;
}
.zone-head.live span i{
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:#31e18a!important;
  box-shadow:0 0 10px rgba(49,225,138,.55)!important;
}
.zone-head.live small{
  color:#71899c!important;
  font-size:8px!important;
}

/* =========================================================
   MATCH ROW — approved composition
   ========================================================= */
.time-group,
.live-time-group{
  display:block!important;
  width:100%!important;
  margin:0 0 10px!important;
}
.time-cell{
  width:100%!important;
  min-height:34px!important;
  padding:7px 4px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  color:#f5f8fb!important;
}
.match-row{
  position:relative!important;
  width:100%!important;
  margin:0 0 9px!important;
  padding:12px!important;
  overflow:hidden!important;
  border:1px solid #18384f!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#081925,#05121b)!important;
  box-shadow:none!important;
}
.match-row.is-live{border-color:#1e7055!important}
.match-row.is-live:before{
  width:3px!important;
  background:var(--si6-red)!important;
}

/* Hide old detached score block; V6 JS renders it into the middle column */
.match-row.is-live .mobile-live-score{
  display:none!important;
}
.mobile-match-timing{
  min-height:28px!important;
  margin:0 0 8px!important;
}
.mobile-live-state{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
}
.mobile-live-state small{
  padding:4px 6px!important;
  border-radius:5px!important;
  background:var(--si6-red)!important;
  color:#fff!important;
  font-size:9px!important;
  font-weight:950!important;
}
.mobile-live-state b{
  color:#ff5d67!important;
  font-size:10px!important;
}

/* V6 JS adds these reliable classes */
.si6-team-grid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr)!important;
  align-items:center!important;
  gap:7px!important;
}
.si6-team-grid>.team{
  min-width:0!important;
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  text-align:center!important;
}
.si6-team-grid>.team img{
  width:40px!important;
  height:40px!important;
  object-fit:contain!important;
}
.si6-team-grid>.team b{
  width:100%!important;
  color:#f3f7fa!important;
  font-size:11px!important;
  line-height:1.15!important;
  font-weight:900!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.si6-center-score{
  grid-column:2!important;
  grid-row:1!important;
  width:86px!important;
  min-width:86px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  color:#fff!important;
}
.si6-center-score strong{
  display:block!important;
  color:#fff!important;
  font-size:28px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-1px!important;
  white-space:nowrap!important;
}
.si6-center-score small{
  display:block!important;
  margin-top:6px!important;
  color:#ff626d!important;
  font-size:8px!important;
  font-weight:900!important;
}

/* Keep existing desktop center element but let V6 content own it */
.match-row .versus.si6-score-host{
  min-width:86px!important;
  width:86px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* AI probability and odds typography */
.match-row .confidence{
  color:#82a0b4!important;
  background:#0a1d2a!important;
  border-color:#173b51!important;
}
.match-row .confidence.hot{color:var(--si6-green)!important}
.value-grade{font-weight:950!important}

/* =========================================================
   MATCH DETAIL — HOME | SCORE | AWAY
   ========================================================= */
.detail-page{
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0 12px 90px!important;
}
.match-hero2{
  display:block!important;
  width:100%!important;
  margin-top:4px!important;
}
.match-summary{
  position:relative!important;
  width:100%!important;
  padding:16px 12px!important;
  overflow:hidden!important;
  border:1px solid #18384f!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 50% 0,rgba(20,136,255,.13),transparent 48%),
    linear-gradient(145deg,#071722,#041019)!important;
}
.match-summary .crumb{
  margin:0 0 14px!important;
  text-align:center!important;
  color:#7f96a9!important;
  font-size:9px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.hero-teams{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 98px minmax(0,1fr)!important;
  align-items:center!important;
  gap:6px!important;
  width:100%!important;
}
.hero-team,
.hero-team.away{
  min-width:0!important;
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  text-align:center!important;
}
.hero-team img{
  order:1!important;
  width:64px!important;
  height:64px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.28))!important;
}
.hero-team div{
  order:2!important;
  width:100%!important;
  min-width:0!important;
  text-align:center!important;
}
.hero-team b{
  display:block!important;
  width:100%!important;
  color:#f5f8fb!important;
  font-size:12px!important;
  line-height:1.15!important;
  font-weight:900!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.hero-team small{display:none!important}
.hero-center{
  grid-column:2!important;
  grid-row:1!important;
  width:98px!important;
  min-width:98px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.hero-center b{
  width:100%!important;
  color:#fff!important;
  font-size:35px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-1.5px!important;
  white-space:nowrap!important;
}
.hero-center small{
  width:100%!important;
  margin-top:8px!important;
  color:#8298aa!important;
  font-size:8px!important;
  line-height:1.3!important;
  text-align:center!important;
}
body.si-is-live .hero-center small{
  color:#ff606b!important;
  font-weight:900!important;
}

/* =========================================================
   DETAIL CARDS / COLORS
   ========================================================= */
.probability-card,
.sport-analysis-card,
.detail-page .panel2{
  border:1px solid #18384f!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,#081824,#06121b)!important;
  box-shadow:none!important;
}
.probability-card{
  margin-top:10px!important;
  padding:15px!important;
}
.probability-card h3{
  color:#c7d5df!important;
  font-size:12px!important;
}
.probability-card h3 small{color:#6f8799!important}
.probability-triple{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
}
.probability-triple>div{
  min-width:0!important;
  padding:12px 5px!important;
  border:1px solid #17384f!important;
  border-radius:10px!important;
  background:#081824!important;
}
.probability-triple>div.si-prob-top{
  border-color:var(--si6-blue)!important;
  background:linear-gradient(145deg,#0d2f4e,#091c2d)!important;
}
.probability-triple span{
  color:#7f96a9!important;
  font-size:8px!important;
}
.probability-triple b{
  color:#eef5fa!important;
  font-size:21px!important;
}
.probability-triple>div:first-child b{color:#42e099!important}
.conf-line span{color:#7891a5!important}
.conf-line b{color:#91a7b9!important}

.si-match-tabs{
  position:sticky!important;
  top:calc(58px + env(safe-area-inset-top))!important;
  z-index:80!important;
  width:100%!important;
  margin:10px 0!important;
  padding:4px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  border:1px solid #18384f!important;
  border-radius:12px!important;
  background:rgba(3,11,18,.98)!important;
}
.si-match-tabs button{
  min-width:0!important;
  height:39px!important;
  border-radius:9px!important;
  color:#8199ab!important;
  font-size:10px!important;
  font-weight:900!important;
}
.si-match-tabs button.active{
  background:var(--si6-blue)!important;
  color:#fff!important;
}

.sport-analysis-card{
  margin-top:10px!important;
  padding:14px 12px!important;
}
.sport-analysis-head h2{color:#f3f7fa!important;font-size:17px!important}
.sport-analysis-head p{color:#6f8799!important;font-size:9px!important}
.sport-model-chip{color:#5ab3ff!important}
.analysis-quality small{color:#71899b!important}
.analysis-quality strong{color:#f2f7fb!important}

.sport-value-strip{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  margin-top:12px!important;
  overflow:hidden!important;
  border:1px solid #18384f!important;
  border-radius:12px!important;
}
.sport-value-strip>div{
  min-width:0!important;
  padding:11px 4px!important;
  text-align:center!important;
  background:#071722!important;
  border-right:1px solid #18384f!important;
}
.sport-value-strip>div:nth-child(3){border-right:0!important}
.sport-value-strip>div:nth-child(n+4){display:none!important}
.sport-value-strip small{color:#738b9d!important;font-size:7px!important}
.sport-value-strip b{color:#f2f7fb!important;font-size:14px!important}
.sport-value-strip>div:first-child b{color:#48a9ff!important}
.sport-value-strip>div:nth-child(3) b{color:var(--si6-green)!important}

.detail-page .panel2{
  margin-bottom:10px!important;
  padding:14px 12px!important;
}
.detail-page .panel2 h2{
  color:#eaf2f7!important;
  font-size:13px!important;
}
.detail-page .panel2 p,
.detail-page .panel2 small,
.detail-page .panel2 em{
  color:#7f96a8!important;
}

/* =========================================================
   BOTTOM NAV
   ========================================================= */
.si-mobile-nav{
  height:68px!important;
  z-index:9990!important;
  background:rgba(2,10,17,.99)!important;
  border-top:1px solid #173149!important;
  box-shadow:0 -8px 24px rgba(0,0,0,.28)!important;
}
.si-mobile-nav a{color:#7c93a5!important}
.si-mobile-nav a.active{color:#32a1ff!important}
.si-mobile-nav a.active span{color:#32a1ff!important}

/* =========================================================
   NARROW PHONES
   ========================================================= */
@media(max-width:390px){
  .hero-teams{
    grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr)!important;
    gap:3px!important;
  }
  .hero-center{width:78px!important;min-width:78px!important}
  .hero-center b{font-size:29px!important}
  .hero-team img{width:49px!important;height:49px!important}
  .hero-team b{font-size:10px!important}
  .si6-team-grid{
    grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)!important;
    gap:3px!important;
  }
  .si6-center-score,
  .match-row .versus.si6-score-host{
    width:72px!important;
    min-width:72px!important;
  }
  .si6-center-score strong{font-size:23px!important}
}

}

/* Desktop intentionally unchanged */