/*
 SPORTS INTEL MOBILE APP UI V3
 App-launch polish / skeleton / app shell
*/

@media(max-width:720px){

:root{
 --v3-bg:#030b12;
 --v3-panel:#07141f;
 --v3-panel2:#0a1926;
 --v3-line:#173044;
 --v3-blue:#1688ff;
 --v3-green:#35db88;
 --v3-red:#ff3e49;
 --v3-muted:#7f95a8;
}

/* APP WIDTH */
body{
 max-width:100vw;
 overflow-x:hidden;
 overscroll-behavior-y:none;
}

/* APP CONTENT RHYTHM */
body>main,
.site-main,
main{
 padding-left:0!important;
 padding-right:0!important;
}

/* TOOLBAR CLEANUP */
.pro-toolbar{
 border-radius:0 0 17px 17px!important;
 margin:0 0 10px!important;
 border-left:0!important;
 border-right:0!important;
}

/* hide desktop-heavy utilities */
.filter-trigger{
 font-size:10px!important;
 min-height:36px!important;
 opacity:.85;
}

.filter-console{
 margin-top:8px!important;
}

/* SPORT TABS */
.pro-sport-tabs{
 padding-left:10px!important;
 padding-right:10px!important;
}

.pro-sport-tabs a{
 min-width:66px!important;
 height:48px;
 display:flex!important;
 align-items:center;
 justify-content:center;
 font-weight:850!important;
}

/* LIVE HERO FEEL */
.zone-head.live{
 margin:0!important;
 padding:11px 12px!important;
 border-bottom:1px solid rgba(255,255,255,.035);
}

/* MATCH CARD */
.match-row{
 min-height:112px;
}

.match-row.is-live{
 box-shadow:
 inset 0 0 0 1px rgba(255,62,73,.035)!important;
}

.match-row.is-live:after{
 content:"LIVE";
 position:absolute;
 top:8px;
 right:9px;
 font-size:7px;
 font-weight:950;
 letter-spacing:.8px;
 color:#ff6b74;
 opacity:.5;
}

/* card press */
.match-row{
 will-change:transform;
}

.match-row:active{
 transform:scale(.982)!important;
}

/* DETAIL HERO */
.match-summary{
 padding-top:17px!important;
 padding-bottom:17px!important;
}

.hero-team img{
 filter:drop-shadow(0 5px 10px rgba(0,0,0,.25));
}

.hero-center b{
 font-variant-numeric:tabular-nums;
}

/* AI PROBABILITY */
.probability-card{
 overflow:hidden;
}

.probability-card:before{
 content:"";
 position:absolute;
 width:130px;
 height:130px;
 right:-55px;
 top:-70px;
 border-radius:50%;
 background:rgba(22,136,255,.08);
 pointer-events:none;
}

.probability-card{
 position:relative;
}

/* AI PICK KPI */
.sport-value-strip>div:first-child{
 background:
 linear-gradient(145deg,#0b2540,#091926)!important;
}

.sport-value-strip>div:first-child b{
 font-size:17px!important;
}

/* APP SECTIONS */
.detail-page .panel2,
.sport-analysis-card,
.probability-card{
 background:
 linear-gradient(145deg,#081722,#06121b)!important;
}

/* MOBILE TYPOGRAPHY */
.detail-page p,
.match-row small,
.panel2 small{
 line-height:1.45;
}

/* =========================================================
   SKELETON
   ========================================================= */

.si-v3-skeleton{
 position:fixed;
 inset:0;
 z-index:99999;
 background:#030b12;
 padding:
 calc(68px + env(safe-area-inset-top))
 12px
 90px;
 opacity:1;
 visibility:visible;
 transition:opacity .2s ease,visibility .2s ease;
}

.si-v3-skeleton.hide{
 opacity:0;
 visibility:hidden;
 pointer-events:none;
}

.si-sk{
 position:relative;
 overflow:hidden;
 background:#0a1823;
 border:1px solid #132839;
 border-radius:14px;
}

.si-sk:after{
 content:"";
 position:absolute;
 inset:0;
 transform:translateX(-100%);
 background:
 linear-gradient(
  90deg,
  transparent,
  rgba(255,255,255,.045),
  transparent
 );
 animation:siSkeleton 1.15s infinite;
}

@keyframes siSkeleton{
 100%{transform:translateX(100%)}
}

.si-sk-tabs{
 height:52px;
 margin-bottom:12px;
}

.si-sk-card{
 height:118px;
 margin-bottom:9px;
}

.si-sk-card.big{
 height:170px;
}

/* =========================================================
   PAGE TRANSITION
   ========================================================= */

.si-v3-ready .match-row,
.si-v3-ready .match-summary,
.si-v3-ready .probability-card,
.si-v3-ready .sport-analysis-card{
 animation:siPageIn .22s ease both;
}

@keyframes siPageIn{
 from{
  opacity:.7;
  transform:translateY(4px);
 }
 to{
  opacity:1;
  transform:none;
 }
}

/* =========================================================
   CONNECTION STATUS
   ========================================================= */

.si-network-toast{
 position:fixed;
 left:50%;
 bottom:82px;
 transform:translate(-50%,15px);
 z-index:9998;
 padding:8px 13px;
 border:1px solid #263c4e;
 border-radius:20px;
 background:#0a1823;
 color:#d6e2ea;
 font-size:10px;
 font-weight:850;
 opacity:0;
 pointer-events:none;
 transition:.2s ease;
 white-space:nowrap;
}

.si-network-toast.show{
 opacity:1;
 transform:translate(-50%,0);
}

.si-network-toast.offline{
 border-color:#593039;
 color:#ff8289;
}

/* =========================================================
   PULL FEEL
   ========================================================= */

.si-refresh-indicator{
 position:fixed;
 left:50%;
 top:calc(68px + env(safe-area-inset-top));
 z-index:9990;
 transform:translate(-50%,-50px);
 padding:6px 11px;
 background:#092033;
 border:1px solid #164568;
 border-radius:20px;
 color:#75baff;
 font-size:9px;
 font-weight:900;
 transition:.2s ease;
}

.si-refresh-indicator.show{
 transform:translate(-50%,0);
}

/* =========================================================
   APP NAV REFINEMENT
   ========================================================= */

.si-mobile-nav{
 box-shadow:0 -7px 24px rgba(0,0,0,.25);
}

.si-mobile-nav a{
 user-select:none;
}

.si-mobile-nav span{
 letter-spacing:-.1px;
}

/* fullscreen-like standalone */
@media(display-mode:standalone){
 body{
  user-select:none;
 }

 .si-app-header{
  background:#030b12!important;
 }
}

}

@media(min-width:721px){
 .si-v3-skeleton,
 .si-network-toast,
 .si-refresh-indicator{
  display:none!important;
 }
}

@media(prefers-reduced-motion:reduce){
 .si-sk:after,
 .si-v3-ready .match-row,
 .si-v3-ready .match-summary,
 .si-v3-ready .probability-card{
  animation:none!important;
 }
}