/* =====================================================================
   GOOOlive — site.css
   Fixes to the original design + the new pages (live, match, league, news),
   built only from the design tokens defined in main.css.
   ===================================================================== */

:root{ --bg-card: var(--bg-elev); --z-cl:#1a73ff; --z-el:#f59e0b; --z-ecl:#22c55e; --z-po:#a855f7; --z-rel:var(--red); }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Fixes to the original ---------- */
.band-grid{grid-template-columns:repeat(6,1fr);}
@media (max-width:1320px){ .band-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .band-grid{grid-template-columns:repeat(2,1fr);} }
form.search-box{margin:0;}
html[dir="ltr"] .search-box input{padding-left:40px; padding-right:16px;}
.search-box input[type="search"]{-webkit-appearance:none; appearance:none;}
.search-box input::-webkit-search-cancel-button{display:none;}
a.promo-card{color:inherit;}
a.promo-card[href]:hover{border-color:rgba(90,170,255,.45);}
.news-row, .bn-row{color:inherit; transition:background .18s;}
.news-row:hover, .bn-row:hover{background:color-mix(in srgb,var(--blue) 6%,var(--bg-elev));}
.news-row:hover h4, .bn-row:hover h4{color:var(--blue-bright);}
.news-feature h3 a:hover{color:var(--blue-bright);}
.band-lg{color:inherit;}
.hero-content h1 span[data-i18n="hero_h1"]{color:inherit;}
/* Arrows follow reading direction ("previous" is always first in reading order) */
html[dir="rtl"] .date-switch svg, html[dir="rtl"] .wl-nav svg, html[dir="rtl"] .news-arrows svg{transform:scaleX(-1);}
html[dir="ltr"] .card-foot svg, html[dir="ltr"] .ch-go svg{transform:scaleX(-1);}
.lv-row .min{width:auto; min-width:30px; padding:3px 4px; white-space:nowrap;}
/* Home team's goals on the home team's side: the page direction decides (right in Arabic, left in English /
   French), whatever direction the surrounding card forces (the home cards set ltr, which mirrored the score). */
.score-x{display:inline-flex !important; align-items:center; gap:.35em; direction:inherit !important; letter-spacing:0 !important;}
html[dir="rtl"] .score-x{direction:rtl !important;}
html[dir="ltr"] .score-x{direction:ltr !important;}
.score-x .sep{opacity:.55;}
@keyframes growW{ from{width:0;} }
.st-bar i{width:var(--w,0);}
.st-grow .st-bar i{animation:growW .9s cubic-bezier(.2,.8,.2,1) both;}

/* Intro: once per visit, laptop video fills wide screens */
.gl-intro-seen #intro{display:none !important;}
.gl-intro-seen body.booting > *{filter:none !important; opacity:1 !important;}
#intro.is-wide .intro-main{object-fit:cover;}
#intro.is-wide.with-bg .intro-main{object-fit:contain;}
#intro:not(.with-bg) .intro-bg{display:none !important;}
#intro.with-bg .intro-bg{display:block;}

/* ---------- Header dropdown ---------- */
nav.main-nav{overflow:visible;}
.nav-dd{position:relative; display:flex; align-items:center;}
.nav-dd-menu{position:absolute; top:calc(100% + 16px); inset-inline-start:-14px; min-width:230px; padding:6px;
  background:var(--bg-elev); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 16px 40px rgba(0,4,12,.32);
  display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s, transform .18s, visibility .18s; z-index:300;}
.nav-dd-menu::before{content:""; position:absolute; left:0; right:0; top:-18px; height:18px;}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu{opacity:1; visibility:visible; transform:none;}
nav.main-nav .nav-dd-menu a{padding:9px 12px; border-radius:8px; font-size:13px;}
nav.main-nav .nav-dd-menu a:hover{background:var(--bg-elev-2);}
nav.main-nav .nav-dd-menu a::before, nav.main-nav .nav-dd-menu a.active::after{display:none;}
.nav-dd:hover .more-link svg{transform:rotate(180deg);}
.more-link svg{transition:transform .2s;}

/* ---------- Mobile drawer ---------- */
.drawer{position:fixed; inset:0; z-index:500;}
.drawer[hidden]{display:none;}
.drawer-backdrop{position:absolute; inset:0; background:rgba(2,6,14,.62); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s;}
.drawer-panel{position:absolute; top:0; bottom:0; right:0; width:min(340px,86vw); background:var(--bg); border-left:1px solid var(--line);
  padding:14px 16px calc(20px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:16px; overflow-y:auto;
  transform:translateX(102%); transition:transform .32s cubic-bezier(.2,.8,.2,1);}
.drawer.open .drawer-backdrop{opacity:1;}
.drawer.open .drawer-panel{transform:none;}
.drawer-head{display:flex; align-items:center; justify-content:space-between;}
.drawer-head .lg-icon{height:26px; width:auto;}
.drawer-nav{display:flex; flex-direction:column; gap:2px;}
.drawer-nav a{display:flex; align-items:center; justify-content:space-between; padding:11px 12px; border-radius:10px; font-weight:700; font-size:14px; color:var(--text-dim);}
.drawer-nav a:hover, .drawer-nav a.active{background:var(--bg-elev); color:var(--text);}
.drawer-nav .nav-dd{display:block;}
.drawer-nav .nav-dd-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent; min-width:0; padding:0 14px 0 0;}
html[dir="ltr"] .drawer-nav .nav-dd-menu{padding:0 0 0 14px;}
.drawer-nav .nav-dd-menu a{font-size:13px; padding:8px 12px;}
.drawer-nav .more-link svg{display:none;}
.drawer-leagues{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.drawer-leagues a{display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:10px; background:var(--bg-elev); border:1px solid var(--line); font-size:11.5px; font-weight:700;}
.drawer-leagues .league-logo{width:20px; height:20px;}
body.drawer-open{overflow:hidden;}

/* ---------- Shared bits ---------- */
.empty-row{padding:22px 16px; text-align:center; color:var(--text-dim); font-size:12.5px; font-weight:600; border-top:1px solid var(--line);}
.empty-row b{display:block; color:var(--text); font-size:13.5px; margin-bottom:4px;}
.demo-badge{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; color:var(--gold); background:var(--sport-gold); border-radius:999px; padding:3px 9px; white-space:nowrap;}
.ch-chip{--c:#5a2d82; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; white-space:nowrap;
  background:color-mix(in srgb,var(--c) 26%,var(--bg-elev-2)); border:1px solid color-mix(in srgb,var(--c) 55%,transparent);
  font-size:11px; font-weight:800; color:var(--text); transition:transform .15s, background .15s;}
.ch-chip:hover{transform:translateY(-1px); background:color-mix(in srgb,var(--c) 45%,var(--bg-elev-2));}
.ch-chip svg{width:12px; height:12px; opacity:.85;}
.ch-chip img{width:14px; height:14px; object-fit:contain; border-radius:3px;}

/* Live list (left column) */
.lv-row[data-href]{cursor:pointer;}
.lv-row .min.up{background:var(--bg-elev-2); color:var(--text-dim);}
.lv-row .min.ft{background:var(--bg-elev-2); color:var(--text-dimmer);}
.lv-watch.ghost{background:var(--bg-elev-2); color:var(--blue-bright);}
.lv-watch.ghost:hover{box-shadow:none; background:var(--blue); color:#fff;}
.lv-lg{display:flex; align-items:center; gap:7px; padding:8px 16px; border-top:1px solid var(--line); font-size:11px; font-weight:800; color:var(--text-dim); background:color-mix(in srgb,var(--bg-elev-2) 45%,transparent);}
.lv-lg .league-logo{width:15px; height:15px;}

/* Today grid cards */
.m-card{position:relative; display:flex; flex-direction:column;}
.m-card .versus{flex:1;}
.m-card.is-live{border-color:color-mix(in srgb,var(--red) 38%,var(--line));}
.m-card .time-big.score{direction:ltr; letter-spacing:1px;}
.m-card .m-state{display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:11px; font-weight:800; color:var(--text-dim); margin:-6px auto 10px; min-height:16px;}
.m-card.is-live .m-state{color:var(--red);}
.m-card.is-live .m-state i{width:6px; height:6px; border-radius:50%; background:var(--red); animation:pulse 1.4s infinite;}
.m-card .vs-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.m-actions .m-btn{text-align:center;}
.match-grid .empty-row{grid-column:1/-1; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-md);}

/* Scorers card */
.lg-chips{display:flex; gap:6px; padding:2px 16px 12px; flex-wrap:wrap;}
.lg-chips button{width:36px; height:36px; border-radius:10px; background:var(--bg-elev-2); display:flex; align-items:center; justify-content:center;
  border:1px solid transparent; opacity:.55; transition:opacity .2s, border-color .2s, transform .2s, box-shadow .2s;}
.lg-chips button:hover{opacity:.9; transform:translateY(-1px);}
.lg-chips button.active{opacity:1; border-color:var(--blue-bright); box-shadow:0 6px 16px -6px var(--sport-glow);}
.lg-chips .league-logo{width:20px; height:20px;}
.sc-row .sc-name small{display:block; font-size:10.5px; font-weight:600; color:var(--text-dimmer);}
.sc-row .sc-name{white-space:normal;}

/* Featured news slider */
.news-feature .nf-slide{display:none;}
.news-feature .nf-slide.active{display:flex; flex-direction:column; flex:1;}
.news-feature .nf-slide .news-tag{margin-bottom:auto;}
.news-feature .nf-slide h3{margin-top:14px;}
.news-dots i{cursor:pointer; transition:width .3s, background .3s;}

/* ---------- Inner page layout ---------- */
.page-wrap{padding-top:22px; padding-bottom:40px;}
.page-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start;}
.page-side{display:flex; flex-direction:column; gap:16px; min-width:0;}
.page-side .card + .card{margin-top:0;}
.page-side .ad-side{margin-top:0;}
.page-main{min-width:0;}
/* Pages without a side column (no news sidebar there, no side ad): one readable column */
.page-grid.no-side{grid-template-columns:minmax(0,1fr);}
.page-grid.no-side > .page-main{width:100%; max-width:1040px; margin-inline:auto;}
.page-head{margin-bottom:16px;}
.page-head h1{font-size:clamp(20px,2.4vw,28px); font-weight:900; line-height:1.4;}
.page-head p{color:var(--text-dim); font-size:13.5px; margin-top:4px; font-weight:600;}
@media (max-width:1100px){
  .page-grid{grid-template-columns:1fr;}
  .page-wrap{padding-left:18px; padding-right:18px;}
}
@media (max-width:760px){
  .page-wrap{padding:14px 12px 28px;}
}

/* ---------- Live page (where to watch) ---------- */
.wl-bar{display:flex; align-items:center; gap:10px; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-lg); padding:8px; margin-bottom:12px; box-shadow:var(--shadow-card);}
.wl-nav{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); background:var(--bg-elev-2); flex-shrink:0; transition:background .15s, color .15s;}
.wl-nav:hover{background:var(--blue); color:#fff;}
.wl-nav svg{width:16px; height:16px;}
.wl-date{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:800; font-size:14.5px; min-width:0; text-align:center;}
.wl-date svg{width:16px; height:16px; color:var(--blue-bright); flex-shrink:0;}
.wl-today{padding:9px 16px; border-radius:999px; background:var(--blue); color:#fff; font-size:12px; font-weight:800; flex-shrink:0; transition:opacity .2s;}
.wl-today[disabled]{opacity:.35; cursor:default;}
.wl .live-tabs-row{margin-bottom:14px;}
.wl-group .card-head{justify-content:space-between;}
.wl-lg{display:flex; align-items:center; gap:10px; min-width:0; color:inherit;}
.wl-lg .league-logo{width:28px; height:28px;}
.wl-lg b{display:block; font-size:14px; font-weight:800; line-height:1.3;}
.wl-lg small{display:block; font-size:11px; color:var(--text-dimmer); font-weight:700;}
.wl-count{font-size:11.5px; color:var(--text-dim); font-weight:800; background:var(--bg-elev-2); border-radius:999px; padding:3px 10px; flex-shrink:0;}
.wl-row{display:grid; grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr) minmax(0,200px); align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line); cursor:pointer; transition:background .18s;}
.wl-row:hover{background:color-mix(in srgb,var(--blue) 7%,var(--bg-elev));}
.wl-team{display:flex; align-items:center; gap:9px; min-width:0; font-size:13.5px; font-weight:700;}
.wl-team.home{justify-content:flex-end;}
.wl-team .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wl-team .crest{width:26px; height:28px; font-size:8px;}
.wl-team.win .nm{color:var(--text); font-weight:800;}
.wl-team.lose .nm{color:var(--text-dim);}
.wl-mid{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;}
.wl-score{font-size:18px; font-weight:900; direction:ltr; letter-spacing:1px; line-height:1.2;}
.wl-time{font-size:15px; font-weight:800; direction:ltr; line-height:1.3;}
.wl-status{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; color:var(--text-dim);}
.wl-status.live{color:var(--red);}
.wl-status.live i{width:6px; height:6px; border-radius:50%; background:var(--red); animation:pulse 1.4s infinite;}
.wl-ch{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end;}
.wl-ch .none{font-size:11px; color:var(--text-dimmer); font-weight:600;}
.wl-row.is-live .wl-score{color:var(--text);}
@media (max-width:760px){
  .wl-row{grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr); row-gap:8px; padding:12px;}
  .wl-ch{grid-column:1/-1; justify-content:center;}
  .wl-team{font-size:12.5px; gap:7px;}
  .wl-date{font-size:13px;}
  .wl-today{padding:9px 12px;}
}

/* ---------- Match page ---------- */
.mh{position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--line); margin-bottom:14px; color:#fff;
  background:radial-gradient(90% 130% at 50% 0%,rgba(26,115,255,.32),transparent 62%),linear-gradient(160deg,#12233c,#070f1c 75%);
  box-shadow:var(--shadow-card),0 0 0 1px color-mix(in srgb,var(--blue-bright) 8%,transparent);}
.mh::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.08;
  background:radial-gradient(circle at 50% 50%,transparent 58px,#fff 59px,#fff 60px,transparent 61px),linear-gradient(90deg,transparent calc(50% - 1px),#fff calc(50% - 1px),#fff calc(50% + 1px),transparent calc(50% + 1px));}
.mh-inner{position:relative; padding:18px 20px 22px;}
.mh-league{display:flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; font-weight:700; color:#c9d6ea; margin-bottom:16px;}
.mh-league .league-logo{width:22px; height:22px;}
.mh-league a:hover{color:#fff;}
.mh-main{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:14px;}
.mh-team{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; min-width:0;}
.mh-team .crest{width:74px; height:80px; font-size:17px;}
.mh-team b{font-size:clamp(14px,1.8vw,18px); font-weight:800; line-height:1.35;}
.mh-center{text-align:center; min-width:130px;}
.mh-score{font-size:clamp(36px,5.4vw,56px); font-weight:900; direction:ltr; line-height:1.05; letter-spacing:3px;}
.mh-score .sep{opacity:.5; margin:0 4px;}
.mh-time{font-size:clamp(26px,3.6vw,36px); font-weight:900; direction:ltr; line-height:1.1;}
.mh-status{display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.08); font-size:11.5px; font-weight:800; color:#c9d6ea;}
.mh-status.live{background:rgba(255,59,78,.18); color:#ff8e98;}
.mh-status.live i{width:7px; height:7px; border-radius:50%; background:var(--red); animation:pulse 1.4s infinite;}
.mh-pen{font-size:11px; color:#9fb1cb; font-weight:700; margin-top:4px; direction:ltr;}
.mh-scorers{display:grid; grid-template-columns:1fr 1fr; gap:4px 40px; margin-top:14px; font-size:11.5px; color:#c9d6ea; font-weight:600;}
.mh-scorers div:first-child{text-align:end;}
.mh-meta{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); font-size:11.5px; color:#9fb1cb; font-weight:600;}
.mh-meta span{display:inline-flex; gap:6px; align-items:center;}
.mh-meta svg{width:13px; height:13px;}
@media (max-width:560px){
  .mh-team .crest{width:52px; height:56px; font-size:13px;}
  .mh-center{min-width:96px;}
  .mh-inner{padding:16px 12px 18px;}
}
.mt-tabs{flex:1;}
.mt-panel, .lg-panel{min-height:220px;}
.mt-sec-title{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px 10px; font-size:13.5px; font-weight:800;}
.mt-sec-title small{font-size:11.5px; color:var(--text-dim); font-weight:700;}

/* Events timeline */
.tl{position:relative; padding:10px 0 14px;}
.tl::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--line-2); transform:translateX(-50%);}
.tl-row{display:grid; grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr); align-items:center; padding:6px 16px; position:relative;}
.tl-min{grid-column:2; justify-self:center; min-width:42px; height:26px; padding:0 6px; border-radius:999px; background:var(--bg-elev-2); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; direction:ltr; z-index:1;}
.tl-ev{display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; min-width:0;}
.tl-ev.home{grid-column:1; grid-row:1; justify-content:flex-end; text-align:end;}
.tl-ev.away{grid-column:3; grid-row:1;}
.tl-ev b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tl-ev small{display:block; color:var(--text-dimmer); font-size:11px; font-weight:600;}
.tl-ic{width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--bg-elev-2);}
.tl-ic svg{width:15px; height:15px;}
.tl-ic.goal{background:color-mix(in srgb,#22c55e 18%,transparent); color:#22c55e;}
.tl-ic.own{background:var(--sport-red); color:var(--red);}
.tl-ic.miss{color:var(--text-dimmer);}
.tl-ic.subst{color:var(--blue-bright); background:color-mix(in srgb,var(--blue) 14%,transparent);}
.tl-ic.var{color:var(--cyan); font-size:9px; font-weight:900;}
.tl-ic .cardic{width:11px; height:15px; border-radius:2px; background:var(--gold); transform:rotate(8deg);}
.tl-ic .cardic.red{background:var(--red);}
.tl-sep{position:relative; z-index:1; display:flex; justify-content:center; padding:8px 0;}
.tl-sep span{background:var(--bg-elev-2); border:1px solid var(--line-2); border-radius:999px; padding:4px 14px; font-size:11px; font-weight:800; color:var(--text-dim);}

/* Lineups */
.lu{display:grid; grid-template-columns:1fr; gap:14px; padding:14px 16px 16px;}
.lu-head{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; font-weight:800;}
.lu-head .t{display:flex; align-items:center; gap:8px;}
.lu-head .crest{width:22px; height:24px; font-size:7px;}
.lu-head small{color:var(--text-dim); font-weight:700; direction:ltr;}
.pitch{position:relative; border-radius:14px; overflow:hidden; padding:10px 0;
  background:repeating-linear-gradient(0deg,#1e7a40 0 46px,#1b7039 46px 92px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);}
.pitch::before{content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:rgba(255,255,255,.3);}
.pitch::after{content:""; position:absolute; left:50%; top:50%; width:90px; height:90px; border:2px solid rgba(255,255,255,.3); border-radius:50%; transform:translate(-50%,-50%);}
.pitch-half{position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; padding:14px 6px;}
.pitch-half.home{flex-direction:column-reverse;}
.pitch-half.away .p-row{flex-direction:row-reverse;}
.p-row{display:flex; justify-content:space-around; align-items:flex-start;}
.pl{display:flex; flex-direction:column; align-items:center; gap:4px; width:72px; min-width:0;}
.pl i{width:32px; height:32px; border-radius:50%; font-style:normal; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:900; color:#fff; border:2px solid rgba(255,255,255,.85); box-shadow:0 4px 10px rgba(0,0,0,.3); background:var(--blue);}
.pitch-half.away .pl i{background:var(--red);}
.pl span{font-size:10.5px; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lu-lists{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.lu-list h4{font-size:12px; font-weight:800; color:var(--text-dim); margin:4px 0 6px;}
.lu-list li{display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid var(--line); font-size:12.5px; font-weight:600;}
.lu-list li b{width:24px; text-align:center; font-size:11px; color:var(--text-dim);}
.lu-list li em{margin-inline-start:auto; font-style:normal; font-size:10.5px; color:var(--text-dimmer); font-weight:800;}
@media (max-width:560px){ .lu-lists{grid-template-columns:1fr;} .pl{width:56px;} .pl span{max-width:56px; font-size:9.5px;} }

/* Statistics */
.st-row{padding:11px 16px; border-top:1px solid var(--line);}
.st-head{display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:800; margin-bottom:7px;}
.st-head span{font-size:12px; color:var(--text-dim); font-weight:700;}
.st-head b{min-width:40px; direction:ltr;}
.st-head b:last-child{text-align:end;}
.st-bars{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.st-bar{height:7px; border-radius:4px; background:var(--bg-elev-2); overflow:hidden; display:flex;}
.st-bar.home{justify-content:flex-end;}
.st-bar i{display:block; height:100%; border-radius:4px; background:var(--text-dimmer); transition:width .9s cubic-bezier(.2,.8,.2,1);}
.st-bar.home i{background:var(--blue-bright);}
.st-bar.away i{background:var(--red);}

/* Channels */
.ch-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; padding:16px;}
.ch-card{--c:#5a2d82; display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; background:var(--bg-elev-2); border:1px solid var(--line); transition:transform .18s, border-color .18s, box-shadow .25s;}
.ch-card:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--c) 60%,transparent); box-shadow:0 14px 30px -18px var(--c);}
.ch-logo{width:48px; height:48px; border-radius:12px; background:var(--c); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:12px; flex-shrink:0; overflow:hidden;}
.ch-logo img{width:100%; height:100%; object-fit:contain; background:#fff;}
.ch-card b{display:block; font-size:13.5px; font-weight:800;}
.ch-card small{display:block; font-size:11px; color:var(--text-dim); font-weight:600;}
.ch-go{margin-inline-start:auto; font-size:11.5px; font-weight:800; color:var(--blue-bright); white-space:nowrap;}
.ch-note{padding:0 16px 16px; font-size:11.5px; color:var(--text-dimmer); font-weight:600;}

/* ---------- League page ---------- */
.lg-hero{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--radius-lg); border:1px solid var(--line); margin-bottom:14px; color:#fff;
  background:radial-gradient(80% 140% at 0% 0%,rgba(26,115,255,.35),transparent 60%),linear-gradient(160deg,#12233c,#070f1c 80%); box-shadow:var(--shadow-card);}
.lg-hero-logo{width:66px; height:66px; object-fit:contain; background:#fff; border-radius:16px; padding:8px; flex-shrink:0;}
.lg-hero h1{font-size:clamp(20px,2.6vw,28px); font-weight:900; line-height:1.3;}
.lg-hero p{color:#9fb1cb; font-size:13px; font-weight:700; margin-top:2px;}
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.tbl{width:100%; border-collapse:collapse; font-size:12.5px; min-width:600px;}
.tbl th{font-size:11px; color:var(--text-dimmer); font-weight:800; padding:11px 6px; text-align:center; white-space:nowrap;}
.tbl td{padding:9px 6px; text-align:center; border-top:1px solid var(--line); font-weight:700;}
.tbl th.t, .tbl td.t{text-align:start;}
.tbl tr{transition:background .15s;}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--blue) 6%,transparent);}
.tbl .rk{position:relative; width:40px; color:var(--text-dim);}
.tbl .rk::before{content:""; position:absolute; inset-inline-start:0; top:7px; bottom:7px; width:3px; border-radius:3px; background:var(--z,transparent);}
.tbl .team-cell{display:flex; align-items:center; gap:9px; min-width:150px;}
.tbl .team-cell .crest{width:22px; height:24px; font-size:7px;}
.tbl .pts{font-weight:900; font-size:13.5px;}
.tbl .dim{color:var(--text-dim);}
.form{display:flex; gap:3px; justify-content:center; direction:ltr;}
.form i{width:18px; height:18px; border-radius:5px; font-style:normal; font-size:9.5px; font-weight:900; display:flex; align-items:center; justify-content:center; color:#fff; background:#64748b;}
.form i.W{background:#16a34a;}
.form i.L{background:var(--red);}
.tbl-legend{display:flex; flex-wrap:wrap; gap:8px 16px; padding:12px 16px; font-size:11.5px; color:var(--text-dim); font-weight:700; border-top:1px solid var(--line);}
.tbl-legend span{display:inline-flex; align-items:center; gap:6px;}
.tbl-legend i{width:10px; height:10px; border-radius:3px; background:var(--z);}
.wl-day{padding:9px 16px; font-size:11.5px; font-weight:800; color:var(--text-dim); border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg-elev-2) 45%,transparent);}
.sc-table .sc-row{padding:11px 16px;}
.sc-table .sc-num{width:56px; text-align:center; font-weight:800; flex-shrink:0;}
.sc-table .sc-num.g{color:var(--gold);}
.sc-table .sc-head{display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:11px; font-weight:800; color:var(--text-dimmer);}
.sc-table .sc-head span:first-child{flex:1;}

/* ---------- News ---------- */
.post-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
@media (max-width:1320px){ .post-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .post-grid{grid-template-columns:1fr;} }
.post-card{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-card); transition:transform .2s, border-color .25s, box-shadow .25s;}
.post-card:hover{transform:translateY(-3px); border-color:rgba(90,170,255,.35); box-shadow:0 18px 40px -26px rgba(40,140,255,.6);}
.pc-thumb{position:relative; display:block; aspect-ratio:16/9; background-color:#0d1a2c; background-image:linear-gradient(145deg,#24405f,#0d1a2c); background-size:cover; background-position:center; overflow:hidden;}
.pc-thumb .news-tag{position:absolute; top:12px; inset-inline-start:12px; margin:0;}
.pc-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.pc-body h3{font-size:15px; font-weight:800; line-height:1.55;}
.pc-body h3 a:hover{color:var(--blue-bright);}
.pc-body p{font-size:12.5px; color:var(--text-dim); line-height:1.75;}
.pc-meta{margin-top:auto; font-size:11px; color:var(--text-dimmer); font-weight:700;}
.pager{display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:22px;}
.pager .page-numbers{min-width:40px; height:40px; border-radius:11px; background:var(--bg-elev); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; padding:0 10px; transition:background .15s, color .15s;}
.pager .page-numbers:hover{background:var(--bg-hover);}
.pager .page-numbers.current{background:var(--blue); color:#fff; border-color:var(--blue);}
.pager svg{width:14px; height:14px;}
html[dir="ltr"] .pager svg{transform:scaleX(-1);}
.empty-state{padding:44px 20px; text-align:center; color:var(--text-dim); font-weight:700;}
.section-head h2{font-size:16px;}
.page-main > .section-head{margin-top:24px;}

/* Article */
.article{padding:22px 26px 26px;}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--text-dim); font-weight:700; margin-bottom:10px;}
.crumbs a:hover{color:var(--blue-bright);}
.article-title{font-size:clamp(22px,3vw,32px); font-weight:900; line-height:1.5; margin-bottom:10px;}
.article-meta{display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--text-dimmer); font-weight:700; margin-bottom:18px;}
.article-cover{margin:0 -26px 22px;}
.article-cover img{width:100%; height:auto; max-height:540px; object-fit:cover;}
.entry{font-size:16px; line-height:2; color:color-mix(in srgb,var(--text) 90%,var(--text-dim));}
.entry > * + *{margin-top:1em;}
.entry h2{font-size:21px; font-weight:800; line-height:1.55; margin-top:1.6em; color:var(--text);}
.entry h3{font-size:18px; font-weight:800; margin-top:1.4em; color:var(--text);}
.entry a{color:var(--blue-bright); text-decoration:underline; text-underline-offset:3px;}
.entry ul{list-style:disc; padding-inline-start:1.4em;}
.entry ol{list-style:decimal; padding-inline-start:1.4em;}
.entry li + li{margin-top:.35em;}
.entry blockquote{border-inline-start:3px solid var(--blue-bright); padding:12px 18px; background:var(--bg-elev-2); border-radius:10px; font-weight:700; color:var(--text);}
.entry img{border-radius:12px; height:auto;}
.entry figure{margin-top:1.4em;}
.entry figcaption{font-size:12px; color:var(--text-dimmer); text-align:center; margin-top:6px;}
.entry iframe, .entry video{max-width:100%; border-radius:12px;}
.entry table{width:100%; border-collapse:collapse; font-size:14px;}
.entry td, .entry th{border:1px solid var(--line-2); padding:8px;}
.article-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.article-tags a{font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; background:var(--bg-elev-2); color:var(--text-dim);}
.article-tags a:hover{background:var(--blue); color:#fff;}
.share{display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
.share b{font-size:13px;}
.entry-card{padding:22px 24px; margin-top:0;}
.comments-card{padding:20px 22px; margin-top:16px;}
.comments-card input[type="text"], .comments-card input[type="email"], .comments-card textarea{width:100%; background:var(--bg-elev-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--text); font:inherit;}
.comments-card input[type="text"]:focus, .comments-card input[type="email"]:focus, .comments-card textarea:focus{outline:none; border-color:var(--blue-bright);}
.comments-card .submit{background:var(--blue); color:#fff; border:0; border-radius:999px; padding:10px 24px; font:inherit; font-weight:800; cursor:pointer;}
/* Comment list (comments.php) */
.gl-cm-title{font-size:18px; margin:0 0 14px;}
.gl-cm-list{list-style:none; margin:0 0 20px; padding:0;}
.gl-cm-list .children{list-style:none; margin:10px 0 0; padding-inline-start:28px;}
.gl-cm + .gl-cm{margin-top:12px;}
.gl-cm-box{display:flex; gap:12px; align-items:flex-start;}
.gl-cm-av{width:38px; height:38px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb,var(--blue) 35%,var(--bg-elev-2)); color:#fff; font-weight:800;}
.gl-cm-main{flex:1; min-width:0; padding:10px 14px; border-radius:12px; background:var(--bg-elev-2); border:1px solid var(--line);}
.gl-cm-meta{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:13.5px;}
.gl-cm-meta time{color:var(--text-dim); font-size:12px;}
.gl-cm-text p{margin:6px 0 0; line-height:1.75; overflow-wrap:anywhere;}
.gl-cm-wait{margin:6px 0 0; color:#f5b301; font-size:12.5px;}
.gl-cm-main .comment-reply-link{display:inline-block; margin-top:6px; font-size:12.5px; font-weight:700; color:var(--blue-bright);}
/* Comment form */
.comment-respond .comment-reply-title{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; margin:0 0 6px; font-size:18px;}
.comment-respond .comment-reply-title small a{font-size:12.5px; font-weight:600; color:var(--text-dim);}
.comment-respond .comment-notes, .comment-respond .logged-in-as{margin:0 0 14px; color:var(--text-dim); font-size:12.5px;}
.comment-respond form p{margin:0 0 12px;}
.comment-respond label{display:block; margin-bottom:6px; font-size:13px; font-weight:700;}
.comment-respond .required{color:var(--red);}
.comment-respond .comment-form-cookies-consent{display:flex; align-items:flex-start; gap:8px;}
.comment-respond .comment-form-cookies-consent input{width:18px; height:18px; flex-shrink:0; margin:2px 0 0; accent-color:var(--blue);}
.comment-respond .comment-form-cookies-consent label{display:inline; margin:0; font-weight:600; color:var(--text-dim);}
@media (max-width:760px){ .article{padding:18px 16px 20px;} .article-cover{margin:0 -16px 18px;} .entry{font-size:15.5px;} }

/* 404 */
.nf-404{padding:64px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px;}
.nf-code{font-size:clamp(76px,14vw,150px); font-weight:900; line-height:1; background:linear-gradient(180deg,var(--text),var(--blue-bright)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.nf-code span{display:inline-block;}
.nf-404 h1{font-size:22px; font-weight:900;}
.nf-404 p{color:var(--text-dim); max-width:420px;}

/* =====================================================================
   Logos — one consistent treatment everywhere (mobile & desktop)
   Teams & leagues come from one up-to-date source (API-Football, cached locally).
   ===================================================================== */
/* League logos: same white plate at every size, so dark logos (PL, Ligue 1, UCL) stay readable in both themes */
.league-logo, .lg-hero-logo{box-sizing:border-box; object-fit:contain; background:#fff; border-radius:24%; padding:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.25), inset 0 0 0 1px rgba(10,20,35,.06); flex-shrink:0;}
.league-logo{width:24px; height:24px;}
.m-card .league .league-logo{width:20px; height:20px;}
.band-lg .league-logo{width:34px; height:34px; padding:4px;}
.lv-lg .league-logo{width:18px; height:18px; padding:1.5px;}
.wl-lg .league-logo{width:30px; height:30px; padding:3px;}
.lg-chips .league-logo{width:24px; height:24px;}
.mh-league .league-logo{width:24px; height:24px;}
.drawer-leagues .league-logo{width:22px; height:22px;}
.lg-hero-logo{width:66px; height:66px; padding:8px;}
@media (max-width:640px){ .band-lg .league-logo{width:30px; height:30px; padding:3px;} .lg-hero-logo{width:54px; height:54px; padding:6px;} }

/* Team logos: square boxes, contained, identical sizing per context */
.crest.has-logo{background:transparent !important;}
.crest.has-logo .crest-logo{width:100%; height:100%; object-fit:contain;}
:root:not([data-theme="light"]) .crest-logo{filter:drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.35));}
.crest.has-logo{width:20px; height:20px;}
.m-card .crest.has-logo{width:40px; height:40px;}
.wl-team .crest.has-logo{width:28px; height:28px;}
.mh-team .crest.has-logo{width:76px; height:76px;}
.lu-head .crest.has-logo, .tbl .team-cell .crest.has-logo{width:24px; height:24px;}
@media (max-width:560px){ .mh-team .crest.has-logo{width:56px; height:56px;} .wl-team .crest.has-logo{width:26px; height:26px;} }

/* =====================================================================
   Mailing list: signup form, popup, toast
   ===================================================================== */
.sub-modal{position:fixed; inset:0; z-index:600; display:flex; align-items:center; justify-content:center; padding:16px;}
.sub-modal[hidden]{display:none;}
.sub-backdrop{position:absolute; inset:0; background:rgba(2,6,14,.66); backdrop-filter:blur(6px); opacity:0; transition:opacity .25s;}
.sub-dialog{position:relative; width:min(580px,100%); max-height:calc(100dvh - 32px); overflow-y:auto; background:var(--bg-elev); border:1px solid var(--line-2);
  border-radius:20px; box-shadow:0 30px 80px rgba(0,4,12,.5); padding:22px; opacity:0; transform:translateY(16px) scale(.97);
  transition:opacity .25s, transform .32s cubic-bezier(.2,.9,.3,1.2);}
.sub-modal.open .sub-backdrop{opacity:1;}
.sub-modal.open .sub-dialog{opacity:1; transform:none;}
.sub-x{position:absolute; top:12px; inset-inline-end:12px; z-index:2;}
.sub-card{padding:22px;}
.sub-head{display:flex; gap:12px; align-items:center; margin-bottom:18px; padding-inline-end:44px;}
.sub-head .bell{width:46px; height:46px; border-radius:50%; background:linear-gradient(155deg,#1a3d6e,#0b1626); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 8px 22px -8px var(--sport-glow);}
.sub-head .bell svg{width:20px; height:20px;}
.sub-head h3{font-size:18px; font-weight:900; line-height:1.4;}
.sub-head p{font-size:12.5px; color:var(--text-dim); font-weight:600;}
.sub-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.fld{display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; color:var(--text-dim); min-width:0;}
.fld input, .fld select{height:44px; width:100%; border-radius:12px; border:1px solid var(--line-2); background:var(--bg-elev-2); color:var(--text);
  padding:0 12px; font:inherit; font-size:13.5px; font-weight:600; transition:border-color .2s, box-shadow .2s;}
.fld input::placeholder{color:var(--text-dimmer);}
.fld input:focus, .fld select:focus{outline:none; border-color:var(--blue-bright); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent);}
.fld select:disabled{opacity:.55;}
.fld.invalid input, .fld.invalid select{border-color:var(--red); box-shadow:0 0 0 3px var(--sport-red);}
.chk{display:flex; gap:9px; align-items:flex-start; margin-top:12px; font-size:12.5px; font-weight:600; color:var(--text-dim); line-height:1.7; cursor:pointer; transition:opacity .2s;}
.chk input{width:18px; height:18px; margin-top:3px; accent-color:var(--blue); flex-shrink:0;}
.chk a{color:var(--blue-bright); text-decoration:underline;}
.chk.invalid{color:var(--red);}
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0;}
.sub-err{margin-top:12px; padding:10px 12px; border-radius:10px; background:var(--sport-red); color:#ff8e98; font-size:12.5px; font-weight:700;}
.sub-btn{width:100%; justify-content:center; margin-top:16px; height:46px; font-size:14.5px;}
.sub-btn[disabled]{opacity:.7; cursor:progress;}
.sub-done{text-align:center; padding:26px 10px 10px;}
.sub-form.done > :not(.sub-done){display:none;}
.sub-form.done .sub-done{display:block;}
.sub-done svg{width:76px; height:76px; margin:0 auto;}
.sub-done .ck-c{stroke-dasharray:190; stroke-dashoffset:190; animation:ckDraw .6s ease forwards;}
.sub-done .ck-m{stroke-dasharray:50; stroke-dashoffset:50; animation:ckDraw .4s .45s ease forwards;}
@keyframes ckDraw{ to{stroke-dashoffset:0;} }
.sub-done h3{font-size:19px; font-weight:900; margin-top:12px;}
.sub-done p{color:var(--text-dim); font-size:13px; font-weight:600;}
.sub-page .sub-card{max-width:680px;}
.gl-toast{position:fixed; bottom:calc(22px + env(safe-area-inset-bottom)); left:50%; z-index:700; background:var(--bg-elev); border:1px solid var(--line-2);
  padding:12px 18px; border-radius:12px; font-weight:700; font-size:13px; box-shadow:0 16px 40px rgba(0,4,12,.4);
  opacity:0; transform:translate(-50%,20px); transition:opacity .3s, transform .3s;}
.gl-toast.show{opacity:1; transform:translate(-50%,0);}
@media (max-width:560px){ .sub-grid{grid-template-columns:1fr;} .sub-dialog{padding:18px 16px;} }
/* =====================================================================
   Intro: branded splash while the video loads, crossfade when it plays
   ===================================================================== */
#intro .intro-splash{position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:radial-gradient(60% 50% at 50% 46%, rgba(48,140,255,.24), rgba(1,4,10,0) 70%), #01040a; transition:opacity .45s ease; pointer-events:none;}
#intro .intro-logo{width:min(320px,64vw); height:auto; filter:drop-shadow(0 0 28px rgba(60,160,255,.55)); animation:introPulse 1.6s ease-in-out infinite;}
#intro .intro-bar{position:relative; width:140px; height:3px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden;}
#intro .intro-bar i{position:absolute; top:0; bottom:0; width:40%; border-radius:3px; background:linear-gradient(90deg,transparent,var(--blue-bright),transparent); animation:introBar 1.1s ease-in-out infinite;}
#intro .intro-main{opacity:0; transition:opacity .35s ease;}
#intro.playing .intro-main{opacity:1;}
#intro.playing .intro-splash{opacity:0;}
#intro.splash-only .intro-bar{opacity:0; transition:opacity .3s;}
#intro .intro-skip{z-index:5;}
@keyframes introPulse{ 0%,100%{transform:scale(1); opacity:.92;} 50%{transform:scale(1.04); opacity:1;} }
@keyframes introBar{ from{left:-40%;} to{left:100%;} }

/* 404: the middle "0" keeps its own colour (inline-block children are not painted by background-clip:text) */
.nf-code span{color:var(--blue-bright); -webkit-text-fill-color:var(--blue-bright);}
/* =====================================================================
   «جميع البطولات» — sporty competitions strip (home: under the hero)
   ===================================================================== */
.comp-strip{container-type:inline-size; margin:0 0 22px;}
.comp-strip .section-head h2 svg{color:var(--gold); width:16px; height:16px;}
.comp-strip .section-head h2::after{content:""; display:inline-block; width:22px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--blue-bright),var(--red)); margin-inline-start:4px;}
.comp-more{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--blue-bright); transition:gap .2s;}
.comp-more:hover{gap:10px;}
.comp-more svg{width:12px; height:12px;}
html[dir="ltr"] .comp-more svg{transform:scaleX(-1);}
.comp-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;}
.comp{--lc:#1a73ff; position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:18px 8px 14px; border-radius:16px; text-align:center; color:var(--text);
  background:linear-gradient(165deg, color-mix(in srgb,var(--lc) 20%,var(--bg-elev)) 0%, var(--bg-elev) 58%);
  border:1px solid color-mix(in srgb,var(--lc) 24%,var(--line)); box-shadow:var(--shadow-card);
  transition:transform .28s cubic-bezier(.2,.9,.3,1.3), box-shadow .3s, border-color .3s;
  animation:compIn .6s cubic-bezier(.2,.9,.3,1.2) backwards; animation-delay:calc(var(--i,0) * 75ms);}
/* moving diagonal speed stripes */
.comp::before{content:""; position:absolute; top:-30%; bottom:-30%; left:-40px; right:-40px; z-index:-1; opacity:.7; pointer-events:none;
  background:repeating-linear-gradient(-60deg, transparent 0 14px, color-mix(in srgb,var(--lc) 13%,transparent) 14px 16px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 72%); mask-image:linear-gradient(180deg,#000 0%,transparent 72%);
  animation:compStripes 2.6s linear infinite;}
/* light sweep, staggered per tile */
.comp::after{content:""; position:absolute; top:-40%; bottom:-40%; left:-70%; width:40%; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent); transform:skewX(-20deg);
  animation:compShine 6s ease-in-out infinite; animation-delay:calc(var(--i,0) * .45s);}
.comp-ring{position:relative; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; z-index:2;}
.comp-ring::before{content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, var(--lc), transparent 30%, var(--lc) 55%, transparent 80%, var(--lc));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation:compSpin 4.5s linear infinite; filter:drop-shadow(0 0 6px var(--lc));}
.comp-ring .league-logo{width:46px; height:46px; border-radius:50%; padding:7px; position:relative;
  box-shadow:0 6px 18px -6px color-mix(in srgb,var(--lc) 75%,transparent); transition:transform .35s cubic-bezier(.2,1.4,.4,1);}
.comp b{position:relative; z-index:2; font-size:12.5px; font-weight:800; line-height:1.35; min-height:2.7em; display:flex; align-items:center; justify-content:center;}
.comp small{position:relative; z-index:2; font-size:10.5px; font-weight:700; color:var(--text-dimmer); margin-top:-6px;}
.comp-bar{position:absolute; bottom:0; left:50%; width:28%; height:3px; transform:translateX(-50%); border-radius:3px 3px 0 0; background:var(--lc); box-shadow:0 0 14px var(--lc); transition:width .4s cubic-bezier(.2,.9,.3,1);}
.comp-badge{position:absolute; top:8px; inset-inline-start:8px; z-index:3; display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; line-height:1; padding:4px 7px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--text-dim);}
.comp-badge.live{background:var(--red); color:#fff; box-shadow:0 0 0 3px var(--sport-red);}
.comp-badge.live i{width:5px; height:5px; border-radius:50%; background:#fff; animation:pulse 1.2s infinite;}
.comp:hover{transform:translateY(-5px); border-color:color-mix(in srgb,var(--lc) 65%,transparent); box-shadow:0 20px 38px -20px var(--lc), 0 0 0 1px color-mix(in srgb,var(--lc) 30%,transparent);}
.comp:hover .comp-ring::before{animation-duration:1.1s;}
.comp:hover .league-logo{transform:scale(1.1) rotate(-5deg);}
.comp:hover .comp-bar{width:100%;}
@keyframes compIn{ from{opacity:0; transform:translateY(16px) scale(.95);} to{opacity:1; transform:none;} }
@keyframes compStripes{ to{transform:translateX(36.95px);} }
@keyframes compShine{ 0%,72%{left:-70%;} 100%{left:140%;} }
@keyframes compSpin{ to{transform:rotate(360deg);} }
@container (max-width:640px){ .comp-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:1100px){
  .layout > main > .comp-strip{order:1; margin:18px 18px 4px;}
}
@media (max-width:760px){
  .layout > main > .comp-strip{margin:16px 12px 4px;}
}
@media (max-width:560px){
  .comp-grid{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; margin:0 -12px; padding:4px 12px 10px; scrollbar-width:none;}
  .comp-grid::-webkit-scrollbar{display:none;}
  .comp{flex:0 0 116px; scroll-snap-align:start;}
}
/* Intro framing: cover when the screen matches the video, otherwise whole video over its blurred copy */
#intro .intro-main{object-fit:cover !important;}
#intro.with-bg .intro-main{object-fit:contain !important;}
#intro .intro-bg{opacity:0; transition:opacity .35s ease;}
#intro.with-bg.playing .intro-bg{opacity:1;}
/* =====================================================================
   Live panel (left column / page sidebars) — football style
   Pitch header, scoreboard minute, pitch timeline with a rolling ball.
   Stacked in narrow columns (desktop sidebar, phones); one-line rows when wide (tablets).
   ===================================================================== */
.live-card{container-type:inline-size;}
.live-card .card-head{position:relative; overflow:hidden; padding:14px 14px 13px;
  background:
    radial-gradient(circle at 50% 135%, transparent 30px, rgba(255,255,255,.07) 31px, rgba(255,255,255,.07) 32px, transparent 33px),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(255,255,255,.07) calc(50% - .5px), rgba(255,255,255,.07) calc(50% + .5px), transparent calc(50% + .5px)),
    repeating-linear-gradient(90deg, rgba(34,197,94,.08) 0 26px, rgba(34,197,94,.03) 26px 52px),
    var(--bg-elev);}
.live-card .card-head > *{position:relative; z-index:1;}
/* a ball rolls across the bottom of the header every few seconds */
.live-card .card-head::after{content:""; position:absolute; z-index:0; bottom:2px; width:11px; height:11px; inset-inline-start:-16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.7' stop-color='%23eef1f5'/%3E%3Cstop offset='1' stop-color='%23c9d0da'/%3E%3C/radialGradient%3E%3CclipPath id='c'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='46' fill='url(%23g)'/%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M50 35.5L50 22.5M62.8 13.2L81.1 26.4M42.1 -1.9L35 -11.6M57.9 -1.9L65 -11.6M63.8 45.5L76.2 41.5M89 50.8L82 72.2M96.9 26.4L104 16.7M101.8 41.5L113.2 45.2M58.5 61.7L66.2 72.2M61.3 87.3L38.7 87.3M86.9 87.3L98.4 91M74.1 96.7L74.1 108.7M41.5 61.7L33.8 72.2M18 72.2L11 50.8M25.9 96.7L25.9 108.7M13.1 87.3L1.6 91M36.2 45.5L23.8 41.5M18.9 26.4L37.2 13.2M-1.8 41.5L-13.2 45.2M3.1 26.4L-4 16.7' stroke='%231b1f26' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M50 35.5L63.8 45.5L58.5 61.7L41.5 61.7L36.2 45.5ZM50 22.5L37.2 13.2L42.1 -1.9L57.9 -1.9L62.8 13.2ZM76.2 41.5L81.1 26.4L96.9 26.4L101.8 41.5L89 50.8ZM66.2 72.2L82 72.2L86.9 87.3L74.1 96.7L61.3 87.3ZM33.8 72.2L38.7 87.3L25.9 96.7L13.1 87.3L18 72.2ZM23.8 41.5L11 50.8L-1.8 41.5L3.1 26.4L18.9 26.4Z' fill='%2315181d' stroke='%2315181d' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%2315181d' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)); animation:lvKick 7s cubic-bezier(.35,.05,.25,1) infinite;}
html[dir="ltr"] .live-card .card-head::after{animation-name:lvKickLtr;}
.live-card .card-head h3{gap:8px;}
.lv-hball{display:inline-block; width:16px; height:16px; animation:lvDribble 1.4s ease-in-out infinite;}
.lv-hball .fbi{display:block; width:100%; height:100%; animation:lvSpinRev 1.4s linear infinite; filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));}
.live-count{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:800; background:var(--bg-elev-2); color:var(--text-dim); white-space:nowrap;}
.live-count.live{background:var(--red); color:#fff; box-shadow:0 0 0 3px var(--sport-red), 0 6px 16px -6px var(--red);}
.live-count.live i{width:5px; height:5px; border-radius:50%; background:#fff; animation:pulse 1.2s infinite;}
/* spinning ball next to the tabs (replaces the red dot) */
.rec-dot.ball-dot{background:var(--bg-elev); border:1px solid var(--line-2); box-shadow:none;}
.rec-dot.ball-dot .fbi{width:18px; height:18px; animation:lvSpin 3.2s linear infinite; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));}

/* league divider */
.lv-lg{display:flex; align-items:center; gap:8px; padding:8px 14px 7px; border-top:1px solid var(--line); font-size:11px; font-weight:800; color:var(--text-dim);
  background:linear-gradient(90deg, color-mix(in srgb,var(--bg-elev-2) 75%,transparent), transparent);}
html[dir="rtl"] .lv-lg{background:linear-gradient(270deg, color-mix(in srgb,var(--bg-elev-2) 75%,transparent), transparent);}
.lv-lg span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lv-lg em{font-style:normal; font-size:10px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--bg-elev-2); color:var(--text-dim);}

/* match row */
.live-card .lv-row{display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; column-gap:10px; row-gap:9px; padding:11px 14px 10px; position:relative;}
.live-card .lv-row:hover{background:color-mix(in srgb,var(--blue) 7%,var(--bg-elev)); transform:none;}
.live-card .lv-row.sk-row{display:flex;}

/* scoreboard minute */
.lv-min{justify-self:center; min-width:38px; height:24px; padding:0 5px; border-radius:7px; display:grid; place-items:center; background:var(--bg-elev-2); border:1px solid var(--line);}
.lv-min b{font-size:11px; font-weight:900; direction:ltr; line-height:1; color:var(--text-dim); white-space:nowrap;}
.lv-min.live{background:var(--sport-red); border-color:transparent;}
.lv-min.live b{color:var(--red);}
.lv-min .tick{font-style:normal; animation:lvTick 1s steps(1) infinite;}
.lv-min.ht{background:var(--sport-gold); border-color:transparent;}
.lv-min.ht b{color:var(--gold); font-size:9px;}
.lv-min.up b{color:var(--text);}
.lv-min.ft b{color:var(--text-dimmer); font-size:9.5px;}

/* teams + score tiles */
.live-card .lv-row .teams{display:flex; flex-direction:column; gap:6px; min-width:0;}
.live-card .lv-line{display:flex; align-items:center; gap:8px; padding:0; font-size:13px; font-weight:600; color:var(--text-dim); transition:color .3s;}
.live-card .lv-line.lead{color:var(--text); font-weight:800;}
.live-card .lv-line .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.live-card .lv-line .crest.has-logo{width:22px; height:22px;}
.live-card .lv-line .sc{width:auto; min-width:24px; height:24px; padding:0 6px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; font-variant-numeric:tabular-nums; background:var(--bg-elev-2); border:1px solid var(--line-2); color:var(--text-dim); flex-shrink:0;}
.live-card .lv-line.lead .sc{color:#fff; background:linear-gradient(160deg,var(--blue-bright),var(--blue)); border-color:transparent; box-shadow:0 4px 12px -4px var(--blue);}
.live-card .gl-goal .sc{animation:scorePop .7s cubic-bezier(.2,1.6,.4,1);}

/* «مباشر» button from the original design, with a spinning ball */
.live-card .lv-watch{padding:6px 10px; gap:6px;}
.live-card .lv-watch .wball{display:block; width:12px; height:12px; flex-shrink:0;}
.live-card .lv-watch .wball .fbi{display:block; width:100%; height:100%; animation:lvSpin 1.3s linear infinite;}
.lv-more{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; justify-self:end; background:var(--bg-elev-2); color:var(--text-dim); transition:background .2s, color .2s, transform .2s;}
.lv-more svg{width:12px; height:12px;}
html[dir="ltr"] .lv-more svg{transform:scaleX(-1);}
.lv-row:hover .lv-more{background:var(--blue); color:#fff; transform:translateX(-2px);}
html[dir="ltr"] .lv-row:hover .lv-more{transform:translateX(2px);}

/* pitch timeline: green fill up to the current minute, halfway line, rolling ball */
.lv-pitch{grid-column:1 / -1; position:relative; height:6px; margin:1px 2px 0; border-radius:6px; background:rgba(255,255,255,.07);}
.lv-pitch::before{content:""; position:absolute; top:-2px; bottom:-2px; left:50%; width:2px; margin-left:-1px; border-radius:2px; background:rgba(255,255,255,.22);}
.lv-pitch .fill{position:absolute; top:0; bottom:0; inset-inline-start:0; width:calc(var(--p,0) * 1%); border-radius:6px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 5px, transparent 5px 10px), linear-gradient(90deg,#15803d,#4ade80);
  box-shadow:0 0 10px rgba(74,222,128,.35);}
html[dir="rtl"] .lv-pitch .fill{background:repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 5px, transparent 5px 10px), linear-gradient(270deg,#15803d,#4ade80);}
.lv-pitch .ball{position:absolute; top:50%; inset-inline-start:calc(var(--p,0) * 1%); width:15px; height:15px; margin-top:-7.5px; margin-inline-start:-7.5px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)); animation:lvHop .7s ease-in-out infinite;}
.lv-pitch .ball .fbi{display:block; width:100%; height:100%; animation:lvSpinRev 1s linear infinite;}
html[dir="ltr"] .lv-pitch .ball .fbi{animation-name:lvSpin;}
.lv-pitch.draw .fill{animation:lvFill 1.3s cubic-bezier(.2,.8,.2,1) both;}
.lv-pitch.draw .ball{animation:lvRoll 1.3s cubic-bezier(.2,.8,.2,1) both, lvHop .7s 1.3s ease-in-out infinite;}
/* half time: gold fill, ball waits at the halfway line (rolls there, no hop/spin) */
html[dir] .lv-pitch.ht .fill{background:linear-gradient(90deg,#b7791f,#fbbf24); box-shadow:0 0 10px rgba(251,191,36,.3);}
.lv-pitch.ht .ball{animation:none;}
.lv-pitch.ht.draw .ball{animation:lvRoll 1.3s cubic-bezier(.2,.8,.2,1) both;}
.lv-pitch.ht .ball .fbi{animation:none;}

/* nothing live */
.lv-empty{display:flex; flex-direction:column; align-items:center; gap:6px; padding:22px 16px 20px; text-align:center; border-top:1px solid var(--line);}
.lv-ball{position:relative; width:44px; height:44px; margin-bottom:10px; animation:lvBounce 1.3s cubic-bezier(.3,0,.3,1) infinite;}
.lv-ball .fbi{width:100%; height:100%; animation:lvSpin 2.6s linear infinite; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));}
.lv-empty b{font-size:13.5px; font-weight:800;}
.lv-empty > span{font-size:11.5px; color:var(--text-dim); font-weight:600;}
.lv-next{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; font-size:12px; font-weight:800; margin-top:2px;}
.lv-next em{font-style:normal;}
.lv-next i{font-style:normal; color:var(--text-dimmer);}
.lv-next .crest.has-logo{width:20px; height:20px;}
.lv-countdown{margin-top:6px; padding:6px 14px; border-radius:10px; background:var(--bg-elev-2); border:1px solid var(--line-2); direction:ltr;
  font-size:19px; font-weight:900; letter-spacing:2px; font-variant-numeric:tabular-nums; color:var(--blue-bright); text-shadow:0 0 14px var(--sport-glow);}

.live-card .card-foot svg{transition:transform .25s;}
.live-card .card-foot:hover svg{transform:translateX(-4px);}
html[dir="ltr"] .live-card .card-foot:hover svg{transform:scaleX(-1) translateX(-4px);}

/* wide containers (tablets, full-width sidebars): one line per match — home | score | away */
@container (min-width:520px){
  .live-card .lv-row{grid-template-columns:48px minmax(0,1fr) auto; padding:12px 18px 11px;}
  .live-card .lv-row .teams{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:26px; position:relative;}
  .live-card .lv-row .teams::after{content:"–"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--text-dimmer); font-weight:800;}
  .live-card .lv-row .teams .lv-line + .lv-line{flex-direction:row-reverse; text-align:end;}
  .live-card .lv-line{font-size:13.5px;}
}

@keyframes lvKick{ 0%,58%{inset-inline-start:-16px; transform:rotate(0);} 100%{inset-inline-start:calc(100% + 16px); transform:rotate(-900deg);} }
@keyframes lvKickLtr{ 0%,58%{inset-inline-start:-16px; transform:rotate(0);} 100%{inset-inline-start:calc(100% + 16px); transform:rotate(900deg);} }
@keyframes lvDribble{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
@keyframes lvTick{ 50%{opacity:0;} }
@keyframes lvFill{ from{width:0;} }
@keyframes lvRoll{ from{inset-inline-start:0;} }
@keyframes lvHop{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
@keyframes lvBounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
@keyframes lvSpin{ to{transform:rotate(360deg);} }
@keyframes lvSpinRev{ to{transform:rotate(-360deg);} }

/* display rules must not override the hidden attribute */
.live-count[hidden], .comp-badge[hidden]{display:none !important;}

/* Classic black & white football (⚽) used by every ball animation */
.fbi{display:block; width:100%; height:100%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.7' stop-color='%23eef1f5'/%3E%3Cstop offset='1' stop-color='%23c9d0da'/%3E%3C/radialGradient%3E%3CclipPath id='c'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='46' fill='url(%23g)'/%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M50 35.5L50 22.5M62.8 13.2L81.1 26.4M42.1 -1.9L35 -11.6M57.9 -1.9L65 -11.6M63.8 45.5L76.2 41.5M89 50.8L82 72.2M96.9 26.4L104 16.7M101.8 41.5L113.2 45.2M58.5 61.7L66.2 72.2M61.3 87.3L38.7 87.3M86.9 87.3L98.4 91M74.1 96.7L74.1 108.7M41.5 61.7L33.8 72.2M18 72.2L11 50.8M25.9 96.7L25.9 108.7M13.1 87.3L1.6 91M36.2 45.5L23.8 41.5M18.9 26.4L37.2 13.2M-1.8 41.5L-13.2 45.2M3.1 26.4L-4 16.7' stroke='%231b1f26' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M50 35.5L63.8 45.5L58.5 61.7L41.5 61.7L36.2 45.5ZM50 22.5L37.2 13.2L42.1 -1.9L57.9 -1.9L62.8 13.2ZM76.2 41.5L81.1 26.4L96.9 26.4L101.8 41.5L89 50.8ZM66.2 72.2L82 72.2L86.9 87.3L74.1 96.7L61.3 87.3ZM33.8 72.2L38.7 87.3L25.9 96.7L13.1 87.3L18 72.2ZM23.8 41.5L11 50.8L-1.8 41.5L3.1 26.4L18.9 26.4Z' fill='%2315181d' stroke='%2315181d' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%2315181d' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;}

/* «شاهد البث المباشر» in the match header (links to the streaming domain) */
.mh-watch{display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:9px 16px; border-radius:999px; background:var(--red); color:#fff;
  font-size:12.5px; font-weight:800; box-shadow:0 8px 22px -8px var(--red); transition:transform .2s, filter .2s;}
.mh-watch:hover{transform:translateY(-2px); filter:brightness(1.08);}
.mh-watch .wball{display:block; width:14px; height:14px;}
.mh-watch .wball .fbi{animation:lvSpin 1.3s linear infinite;}
.wl-ch .lv-watch .wball{display:block; width:12px; height:12px;}
.wl-ch .lv-watch .wball .fbi{animation:lvSpin 1.3s linear infinite;}
/* =====================================================================
   Day strip (calendar): 7 days + date picker — home «مباريات اليوم» and the live page
   ===================================================================== */
.ds{display:flex; align-items:stretch; gap:6px;}
.ds-days{flex:1; min-width:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px;}
.ds-day{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:66px; padding:8px 2px 7px;
  border-radius:13px; background:var(--bg-elev-2); border:1px solid var(--line); color:var(--text-dim); text-align:center;
  transition:background .2s, border-color .2s, color .2s, transform .2s cubic-bezier(.2,1.4,.4,1), box-shadow .25s;}
.ds-day small{font-size:10.5px; font-weight:800; line-height:1.3; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ds-day b{font-size:19px; font-weight:900; line-height:1.15; color:var(--text); font-variant-numeric:tabular-nums;}
.ds-day em{font-style:normal; font-size:10px; font-weight:700; opacity:.85; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ds-day:hover:not([disabled]):not(.active){border-color:color-mix(in srgb,var(--blue-bright) 55%,transparent); transform:translateY(-2px); color:var(--text);}
.ds-day.is-past b{color:var(--text-dim);}
.ds-day.is-today{border-color:color-mix(in srgb,var(--blue-bright) 50%,var(--line));}
.ds-day.is-today small{color:var(--blue-bright);}
.ds-day.is-today::after{content:""; position:absolute; bottom:5px; left:50%; width:14px; height:3px; margin-left:-7px; border-radius:3px; background:var(--blue-bright);}
.ds-day.active{background:linear-gradient(160deg,var(--blue-bright),var(--blue)); border-color:transparent; color:#fff; box-shadow:0 12px 24px -12px var(--blue), 0 0 0 1px rgba(255,255,255,.08) inset;}
.ds-day.active b, .ds-day.active small{color:#fff;}
.ds-day.active::after{background:#fff;}
.ds-day.live::before{content:""; position:absolute; top:6px; inset-inline-end:6px; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px var(--sport-red); animation:pulse 1.4s infinite;}
.ds-day[disabled]{opacity:.3; cursor:default;}
.ds-day.sk-day{justify-content:center; padding:0 10px;}
.ds-days.ds-swap .ds-day{animation:dsIn .35s cubic-bezier(.2,.8,.2,1) both;}
.ds-days.ds-swap .ds-day.active{animation:dsPop .4s cubic-bezier(.2,1.5,.4,1) both;}
@keyframes dsIn{ from{opacity:.35; transform:translateY(5px);} }
@keyframes dsPop{ 0%{transform:scale(.88);} 60%{transform:scale(1.06);} 100%{transform:none;} }
.ds-nav, .ds-cal{position:relative; flex:0 0 38px; display:grid; place-items:center; border-radius:13px; background:var(--bg-elev-2); border:1px solid var(--line); color:var(--text-dim); transition:background .2s, color .2s, border-color .2s;}
.ds-nav:hover:not([disabled]), .ds-cal:hover{background:var(--blue); border-color:var(--blue); color:#fff;}
.ds-nav[disabled]{opacity:.3; cursor:default;}
.ds-nav svg, .ds-cal svg{width:16px; height:16px;}
html[dir="rtl"] .ds-nav svg{transform:scaleX(-1);}
.ds-cal{overflow:hidden; color:var(--blue-bright);}
.ds-cal input{position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; border:0; padding:0;}
#matches .ds{margin:0 0 14px;}
#matches .section-head{flex-wrap:wrap;}
.wl-bar{display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:12px;}
.wl-bar .wl-date{justify-content:flex-start; font-size:15px; gap:8px; flex-wrap:wrap;}
@media (max-width:560px){
  .ds .ds-nav{display:none;}
  .ds, .ds-days{gap:4px;}
  .ds-day{min-height:60px; border-radius:11px;}
  .ds-day b{font-size:17px;}
  .ds-day small{font-size:9.5px;}
  .ds-day em{font-size:9px;}
  .ds-cal{flex-basis:34px; border-radius:11px;}
  .wl-bar{padding:10px;}
  .wl-bar .wl-date{font-size:13.5px;}
}

/* =====================================================================
   Team names in full (up to two lines, never cut with «…») and clearer logos
   ===================================================================== */
.m-card .versus{align-items:flex-start; gap:10px;}
.m-card .team-col{flex:1 1 0; min-width:0; max-width:50%;}
.m-card .crest.has-logo{width:46px; height:46px;}
.m-card .vs-name{max-width:100%; font-size:12.5px; line-height:1.35; min-height:2.7em; white-space:normal; text-overflow:clip; overflow:hidden; overflow-wrap:break-word;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; text-align:center;}
.wl-team .nm{white-space:normal; text-overflow:clip; overflow-wrap:break-word; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;}
.live-card .lv-line .nm{white-space:normal; text-overflow:clip; overflow-wrap:break-word; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;}
/* «مباريات اليوم» cards: column count follows the space available, so names always fit */
#matches{container-type:inline-size;}
#matches .match-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
@container (min-width:960px){ #matches .match-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
@container (max-width:420px){ #matches .match-grid{grid-template-columns:minmax(0,1fr);} }
#matches .m-card .vs-name{font-size:13px;}
/* Team names: full text, comfortable line height (Arabic descenders were clipped by overflow + tight line-height) */
.m-card .vs-name, .wl-team .nm, .live-card .lv-line .nm{display:block; white-space:normal; overflow:visible; text-overflow:clip; -webkit-line-clamp:unset; line-clamp:none; overflow-wrap:break-word; line-height:1.45;}
.m-card .vs-name{min-height:0;}
/* «جميع البطولات»: any number of leagues (dashboard can add more than six) */
.comp-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));}.comp-grid{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(112px,1fr); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scrollbar-width:thin; padding:6px 2px 8px; margin:-6px -2px -8px;}
.comp-grid > .comp{scroll-snap-align:start;}
@container (max-width:640px){ .comp-grid{grid-template-columns:none;} }
/* «اتصل بنا» form ([gooolive_contact]) — same fields as the subscribe form */
.entry .gl-contact{margin-top:18px; padding:18px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-elev);}
.gl-contact > .fld{margin-top:12px;}
.gl-contact textarea{width:100%; min-height:130px; border-radius:12px; border:1px solid var(--line-2); background:var(--bg-elev-2); color:var(--text);
  padding:10px 12px; font:inherit; font-size:13.5px; font-weight:600; resize:vertical;}
.gl-contact textarea:focus{outline:none; border-color:var(--blue-bright); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent);}
.gl-contact-msg{margin:0 0 14px; padding:10px 12px; border-radius:10px; font-size:13px; font-weight:700;}
.gl-contact-msg.ok{background:color-mix(in srgb,#16b364 18%,transparent); color:#5fe3a1;}
.gl-contact-msg.err{background:var(--sport-red); color:#ff8e98;}
@media (max-width:560px){ .gl-contact .sub-grid{grid-template-columns:1fr;} }
/* Desktop: side columns follow the page instead of leaving empty columns beside the news (offset set by app.js) */
@media (min-width:1101px){
  .layout > aside, .page-grid > .page-side{position:sticky; top:var(--side-top, 90px); align-self:start;}
}
/* «اقرأ الخبر كاملاً» under headlines imported from news sources (GOOOlive ← استيراد الأخبار) */
.entry .gl-src{margin-top:20px;}
.entry .gl-src a{display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; background:var(--blue); color:#fff; font-weight:700; text-decoration:none; box-shadow:0 8px 22px rgba(26,115,255,.28);}
.entry .gl-src a::after{content:"↗"; font-size:.95em;}
.entry .gl-src a:hover{background:var(--blue-bright);}
/* Image ads (GOOOlive ← الإعدادات ← الإعلانات): the whole picture, never cropped, no placeholder frame */
.ad-slot.is-img{display:block; min-height:0; background:none; border:0;}
.ad-slot.is-img a, .ad-slot.is-img picture{display:block;}
.ad-slot.is-img img{display:block; width:100%; height:auto; object-fit:contain; border-radius:var(--radius-lg);}
/* «تابعنا» social accounts (contact page, [gooolive_social]) */
.gl-follow{margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
.gl-follow h2{margin:0 0 4px; font-size:18px;}
.gl-follow p{margin:0 0 14px; color:var(--text-dim); font-size:13.5px;}
.gl-follow-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
.gl-follow-item{--c:var(--blue-bright); display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:var(--bg-elev-2); border:1px solid var(--line); color:var(--text); font-weight:700; text-decoration:none !important; transition:border-color .2s, transform .2s, background .2s;}
.gl-follow-item svg{width:22px; height:22px; flex-shrink:0; color:var(--c);}
.gl-follow-item:hover{border-color:var(--c); transform:translateY(-2px); background:color-mix(in srgb,var(--c) 12%,var(--bg-elev-2));}
.gl-follow-item.is-youtube{--c:#ff3b30;} .gl-follow-item.is-x{--c:#e7e9ea;} .gl-follow-item.is-instagram{--c:#e1306c;} .gl-follow-item.is-facebook{--c:#1877f2;}
.gl-follow-item.is-tiktok{--c:#25f4ee;} .gl-follow-item.is-telegram{--c:#2aabee;} .gl-follow-item.is-whatsapp{--c:#25d366;}
@media (max-width:560px){ .gl-follow-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
/* Search results: competitions and teams before the articles */
.sr-card{margin-bottom:16px;}
.sr-leagues{display:flex; flex-wrap:wrap; gap:10px; padding:2px 0 4px;}
.sr-league{display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 8px; border-radius:999px; background:var(--bg-elev-2); border:1px solid var(--line); font-weight:700; font-size:13.5px; color:var(--text); transition:border-color .2s;}
.sr-league:hover{border-color:var(--blue-bright);}
.sr-league .league-logo{width:28px; height:28px;}
.sr-teams{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.sr-team{display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:var(--radius-lg); background:var(--bg-elev-2); border:1px solid var(--line);}
.sr-crest{width:40px; height:40px; flex-shrink:0; object-fit:contain; background:#fff; border-radius:50%; padding:4px; box-sizing:border-box;}
.sr-team-body{flex:1; min-width:0;}
.sr-team-body > b{display:block; font-size:15px; margin:7px 0 8px;}
.sr-match{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:var(--bg-elev); color:var(--text); font-size:13px; transition:background .2s;}
.sr-match + .sr-match{margin-top:6px;}
.sr-match:hover{background:color-mix(in srgb,var(--blue) 16%,var(--bg-elev));}
.sr-match .sr-when{color:var(--text-dim); font-size:12px; white-space:nowrap; direction:ltr;}
.sr-match .sr-vs{flex:1; min-width:0; overflow-wrap:anywhere;}
.sr-match .sr-res{font-weight:800; white-space:nowrap;}
.sr-match .sr-live{display:inline-block; margin-inline-end:6px; padding:1px 6px; border-radius:6px; background:var(--red); color:#fff; font-size:11px;}
.sr-team-body .sr-none{margin:0; color:var(--text-dim); font-size:12.5px;}
@media (max-width:560px){ .sr-match{flex-wrap:wrap; gap:4px 10px;} .sr-match .sr-vs{flex-basis:100%; order:-1;} }
/* Analytics cookie consent (visitors in Europe only) */
.gl-consent{position:fixed; left:12px; right:12px; bottom:12px; z-index:9000; max-width:520px; margin:0 auto; padding:14px 16px;
  background:var(--bg-elev); color:var(--text); border:1px solid var(--line-2); border-radius:var(--radius-lg); box-shadow:0 20px 50px -20px rgba(0,0,0,.75); font-size:13px;}
.gl-consent p{margin:0 0 10px; line-height:1.6;}
.gl-consent div{display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.gl-consent .cta-btn{padding:8px 20px; font-size:13px;}
.gl-consent .ck-no{background:none; border:1px solid var(--line-2); color:var(--text-dim); border-radius:999px; padding:7px 16px; font:inherit; font-size:13px; font-weight:700; cursor:pointer;}
.gl-consent a{color:var(--text-dim); text-decoration:underline; font-size:12px;}
/* Phones and tablets: footer centred with side margins (the page .wrap has none under 760px), stats 2×2,
   links wrap on as many lines as the language needs; nothing ever pushes the page sideways. */
body{overflow-x:clip;}
@media (max-width:1000px){
  footer .footer-row{align-items:center; text-align:center; gap:22px;}
  .social-block{flex-wrap:wrap; justify-content:center;}
  .foot-links{flex-wrap:wrap; justify-content:center; gap:10px 18px; line-height:1.5;}
  .foot-links > span{flex-basis:100%;}
  .layout{padding-bottom:4px;}
}
@media (max-width:760px){
  footer .wrap, .leagues-band .wrap{padding:0 12px;}
  .stats-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; width:100%; max-width:360px;}
  .stat span{display:block; line-height:1.4; margin-top:2px;}
  .comp-strip{min-width:0;}
}