/*
 SPORTS INTEL MOBILE APP UI V4
 Layout stabilization + LIVE overlap fix + detail hero rebuild
*/

@media(max-width:720px){

:root{
 --v4-bg:#030b12;
 --v4-panel:#07131e;
 --v4-panel2:#0b1a27;
 --v4-line:#173044;
 --v4-blue:#1688ff;
 --v4-green:#38dc88;
 --v4-red:#ff424d;
 --v4-muted:#7f96a9;
 --v4-text:#f5f8fb;
}

/* =========================================================
   GLOBAL
   ========================================================= */

html,body{
 width:100%;
 max-width:100%;
 overflow-x:hidden;
 background:#030b12!important;
}

body{
 padding-left:0!important;
 padding-right:0!important;
}

.detail-page{
 width:auto!important;
 max-width:none!important;
 margin:0!important;
 padding:0 12px 88px!important;
}

/* =========================================================
   LIVE NOW OVERLAP FIX
   ========================================================= */

/*
 Previous versions made LIVE header sticky.
 This causes overlap with the first match row on smaller screens.
 */
.zone-head.live,
.country-zone-title.live,
.schedule-zone .zone-head.live{
 position:relative!important;
 top:auto!important;
 z-index:2!important;
 margin:0 0 8px!important;
 padding:11px 12px!important;
 min-height:40px;
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 border:1px solid #163149!important;
 border-radius:12px!important;
 background:#05121c!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
}

.zone-head.live span{
 display:flex!important;
 align-items:center!important;
 gap:7px!important;
 font-size:12px!important;
 font-weight:950!important;
 color:#ff5962!important;
}

.zone-head.live span i{
 width:8px!important;
 height:8px!important;
 border-radius:50%!important;
 background:#2ee88c!important;
 box-shadow:0 0 10px rgba(46,232,140,.55);
}

.zone-head.live small{
 font-size:9px!important;
 color:#71889c!important;
}

/* guarantee spacing below LIVE header */
.schedule-zone.live-zone .time-group:first-of-type,
.schedule-zone .live-time-group:first-of-type{
 margin-top:0!important;
}

.live-time-group{
 position:relative!important;
 z-index:1!important;
}

/* =========================================================
   HOME MATCH CARDS
   ========================================================= */

.match-row{
 margin:0 0 10px!important;
 padding:13px 12px!important;
 border-radius:14px!important;
 border:1px solid #183348!important;
 background:
 linear-gradient(145deg,#081823,#06111a)!important;
 min-height:0!important;
}

.match-row.is-live{
 border-color:#1b5a47!important;
 box-shadow:none!important;
}

.match-row.is-live:before{
 width:3px!important;
 background:#ff414c!important;
}

.match-row.is-live:after{
 display:none!important;
}

.mobile-match-timing{
 margin-bottom:8px!important;
}

.mobile-live-state{
 display:flex!important;
 align-items:center!important;
 gap:7px!important;
}

.mobile-live-state small{
 font-size:9px!important;
 font-weight:950!important;
 line-height:1!important;
 padding:4px 6px!important;
 border-radius:5px!important;
}

.mobile-live-score{
 font-size:21px!important;
 font-weight:950!important;
 letter-spacing:.5px;
}

/* cleaner team row */
.match-row .team{
 gap:7px!important;
}

.match-row .team img{
 width:32px!important;
 height:32px!important;
}

.match-row .team b{
 font-size:12px!important;
}

.match-row .confidence{
 min-width:56px!important;
}

/* =========================================================
   DETAIL HERO — FIXED 3 COLUMN
   ========================================================= */

.match-hero2{
 display:block!important;
 margin-top:4px!important;
}

.match-summary{
 padding:16px 12px!important;
 border-radius:16px!important;
 border:1px solid #183348!important;
 background:
 radial-gradient(circle at 50% 15%,rgba(22,136,255,.10),transparent 42%),
 linear-gradient(145deg,#071622,#051019)!important;
}

.match-summary .crumb{
 text-align:center!important;
 margin-bottom:15px!important;
 font-size:9px!important;
 color:#7890a4!important;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}

/*
 CRITICAL FIX:
 Always HOME | SCORE | AWAY
 Never reorder on narrow screens.
*/
.hero-teams{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr)!important;
 align-items:center!important;
 gap:8px!important;
 width:100%!important;
}

.hero-team,
.hero-team.away{
 display:flex!important;
 flex-direction:column!important;
 align-items:center!important;
 justify-content:center!important;
 text-align:center!important;
 min-width:0!important;
 width:100%!important;
 gap:7px!important;
}

.hero-team.away{
 flex-direction:column!important;
}

.hero-team img{
 order:1!important;
 width:58px!important;
 height:58px!important;
 max-width:58px!important;
 object-fit:contain!important;
}

.hero-team div{
 order:2!important;
 width:100%!important;
 min-width:0!important;
 text-align:center!important;
}

.hero-team b{
 display:block!important;
 max-width:100%!important;
 font-size:12px!important;
 line-height:1.2!important;
 font-weight:900!important;
 white-space:normal!important;
 overflow-wrap:anywhere;
}

.hero-team small{
 display:none!important;
}

.hero-center{
 display:flex!important;
 flex-direction:column!important;
 align-items:center!important;
 justify-content:center!important;
 width:86px!important;
 min-width:86px!important;
 text-align:center!important;
}

.hero-center b{
 display:block!important;
 width:100%!important;
 font-size:31px!important;
 line-height:1!important;
 font-weight:950!important;
 letter-spacing:-1px!important;
 white-space:nowrap!important;
 color:#fff!important;
}

.hero-center small{
 display:block!important;
 width:100%!important;
 margin-top:8px!important;
 font-size:8px!important;
 line-height:1.25!important;
 text-align:center!important;
 color:#748da1!important;
 white-space:normal!important;
}

/* Live detail emphasis */
body.si-is-live .hero-center b{
 font-size:33px!important;
}

body.si-is-live .hero-center small{
 color:#ff626b!important;
}

/* EXTRA narrow phones */
@media(max-width:380px){

 .detail-page{
  padding-left:8px!important;
  padding-right:8px!important;
 }

 .hero-teams{
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)!important;
  gap:4px!important;
 }

 .hero-center{
  width:72px!important;
  min-width:72px!important;
 }

 .hero-center b{
  font-size:27px!important;
 }

 .hero-team img{
  width:48px!important;
  height:48px!important;
 }

 .hero-team b{
  font-size:10px!important;
 }
}

/* =========================================================
   DETAIL TABS
   ========================================================= */

.si-match-tabs{
 position:sticky!important;
 top:calc(58px + env(safe-area-inset-top))!important;
 z-index:80!important;
 margin:10px 0!important;
 padding:4px!important;
 border-radius:12px!important;
 border:1px solid #173349!important;
 background:rgba(4,13,21,.96)!important;
}

.si-match-tabs button{
 height:38px!important;
 font-size:10px!important;
}

.si-match-tabs button.active{
 background:#1688ff!important;
 color:white!important;
}

/* =========================================================
   PROBABILITY
   ========================================================= */

.probability-card{
 margin-top:10px!important;
 padding:15px!important;
 border-radius:15px!important;
}

.probability-card h3{
 margin-bottom:13px!important;
 font-size:12px!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 4px!important;
 border-radius:10px!important;
}

.probability-triple span{
 font-size:8px!important;
}

.probability-triple b{
 font-size:20px!important;
}

.conf-line{
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 gap:8px!important;
}

/* =========================================================
   AI ANALYSIS CARD
   ========================================================= */

.sport-analysis-card{
 margin-top:10px!important;
 padding:14px 12px!important;
 border-radius:15px!important;
}

.sport-analysis-head{
 display:block!important;
}

.sport-analysis-head h2{
 font-size:17px!important;
 margin-top:5px!important;
}

.sport-analysis-head p{
 font-size:9px!important;
 line-height:1.45!important;
}

.analysis-quality{
 margin-top:12px!important;
}

/* KPI strip */
.sport-value-strip{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:0!important;
 margin-top:12px!important;
 border:1px solid #19364b!important;
 border-radius:12px!important;
 overflow:hidden;
}

.sport-value-strip>div{
 padding:11px 4px!important;
 background:#081722!important;
 border-right:1px solid #183147!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{
 font-size:7px!important;
}

.sport-value-strip b{
 font-size:14px!important;
}

.sport-value-strip>div:first-child b{
 color:#42a7ff!important;
}

.sport-value-strip>div:nth-child(3) b{
 color:#38dc88!important;
}

/* =========================================================
   DETAIL PANELS
   ========================================================= */

.detail-page .panel2{
 margin-bottom:10px!important;
 padding:14px 12px!important;
 border-radius:14px!important;
 border:1px solid #183348!important;
 background:
 linear-gradient(145deg,#081722,#06121a)!important;
}

.detail-page .panel2 h2{
 font-size:13px!important;
 margin-bottom:10px!important;
}

/* prevent tables from breaking screen */
.history-table{
 width:100%!important;
 table-layout:fixed!important;
 font-size:9px!important;
}

.history-table td,
.history-table th{
 overflow:hidden;
 text-overflow:ellipsis;
}

/* =========================================================
   ODDS CHART
   ========================================================= */

.oc-chart{
 height:215px!important;
 border-radius:11px!important;
}

.oc-summary{
 grid-template-columns:1fr!important;
}

/* =========================================================
   BOTTOM NAV
   ========================================================= */

.si-mobile-nav{
 z-index:9990!important;
 height:68px!important;
 background:rgba(3,11,18,.98)!important;
}

.si-mobile-nav a{
 font-size:9px!important;
}

.si-mobile-nav i{
 font-size:18px!important;
}

/* =========================================================
   HEADER
   ========================================================= */

.si-app-header{
 z-index:9991!important;
}

/* prevent vertical overlap with app header */
.zone-head.live{
 scroll-margin-top:75px!important;
}

}

@media(min-width:721px){
 /* desktop untouched */
}