:root{
    --navy:#002A91;
    --navy-2:#0B3FC4;
    --red:#DF1A19;
    --gold:#B8860B;
    --ink:#0B0C10;
    --text:#33363D;
    --muted:#6B7078;
    --bg:#FFFFFF;
    --bg-alt:#F2F3F6;
    --border:#E3E5EA;
    --border-strong:#C9CCD4;
    --font-sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:'JetBrains Mono', monospace;
    --font-hero:'Anton', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-sans);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  ul{list-style:none;}
  .wrap{max-width:1240px; margin:0 auto; padding:0 24px;}
  .skip-link{
    position:absolute; left:-9999px; top:auto;
    background:var(--navy); color:#fff; padding:12px 20px;
    z-index:999; font-family:var(--font-sans); font-weight:700;
    border-radius:0 0 6px 0;
  }
  .skip-link:focus{left:0; top:0;}
  h1,h2,h3,h4{font-weight:800; color:var(--ink); line-height:1.15;}

  /* ===== thumbnail placeholder art ===== */
  .thumb{
    aspect-ratio:16/9; position:relative; overflow:hidden;
    background:
      linear-gradient(135deg, rgba(0,28,106,0.08), rgba(0,28,106,0.03)),
      repeating-linear-gradient(45deg, #E7E9EE 0 10px, #EEF0F4 10px 20px);
  }
  .thumb svg{position:absolute; inset:0; margin:auto; width:34%; height:34%; opacity:0.5;}
  .thumb .live-badge{
    position:absolute; top:8px; left:8px; display:flex; align-items:center; gap:5px;
    background:var(--red); color:#fff; font-family:var(--font-mono); font-size:10px;
    letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; font-weight:700;
  }
  .thumb .live-badge span{width:5px; height:5px; border-radius:50%; background:#fff; animation:pulse 1.3s infinite;}
  .thumb .duration{
    position:absolute; bottom:8px; left:8px; background:rgba(11,12,16,0.82); color:#fff;
    font-family:var(--font-mono); font-size:11px; padding:2px 6px;
  }
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.2;}}
.live-badge-inline{
    position:static; display:inline-flex; align-items:center; gap:5px;
    background:var(--red); color:#fff; font-family:var(--font-mono); font-size:10px;
    letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; font-weight:700;
    border-radius:3px;
  }
  .live-badge-inline span{width:5px; height:5px; border-radius:50%; background:#fff; animation:pulse 1.3s infinite;}

  .kicker{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}
  .kicker.k-live{color:var(--red);}
  .kicker.k-muted{color:var(--muted);}
  .comp-tag{
    display:inline-block; font-size:12px; font-weight:700; color:var(--navy);
    text-transform:uppercase; letter-spacing:.02em; margin-top:4px;
  }
  .comp-tag.gold{color:var(--gold);}

  /* ===== header ===== */
  .site-header{border-bottom:1px solid var(--border); position:sticky; top:0; background:#fff; z-index:60;}
  .header-row{display:flex; align-items:center; justify-content:space-between; height:68px; gap:24px;}
  .logo{font-size:22px; font-weight:800; color:var(--navy); letter-spacing:-0.01em; white-space:nowrap;}
  .logo span{color:var(--red);}
  nav.main-nav{display:flex; gap:26px; flex:1;}
  nav.main-nav a{
    font-size:14px; font-weight:600; color:var(--text); padding:8px 0;
    border-bottom:2px solid transparent; white-space:nowrap;
  }
  nav.main-nav a:hover, nav.main-nav a.active{color:var(--navy); border-color:var(--navy);}
  .nav-dropdown{position:relative; display:inline-flex; align-items:center; flex-shrink:0;}
  nav.main-nav{flex-wrap:nowrap;}
  .nav-dropdown > a{cursor:pointer; display:inline-flex; align-items:center; gap:5px;}
  .nav-dropdown-arrow{transition:transform .15s ease; flex-shrink:0;}
  .nav-dropdown:hover .nav-dropdown-arrow, .nav-dropdown:focus-within .nav-dropdown-arrow{transform:rotate(180deg);}
  .nav-dropdown-menu{
    position:absolute; top:100%; left:0; min-width:190px; background:var(--bg); border:1px solid var(--border);
    border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.14); padding:8px; display:none; flex-direction:column;
    gap:2px; z-index:80;
  }
  .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{display:flex;}
  .nav-dropdown-menu a{
    font-size:13.5px; font-weight:600; color:var(--text); padding:9px 10px; border-radius:5px; border-bottom:0 !important;
    white-space:nowrap;
  }
  .nav-dropdown-menu a:hover{background:var(--bg-alt); color:var(--navy);}
  .header-actions{display:flex; align-items:center; gap:14px;}
  .icon-btn{
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:var(--text); border:1px solid var(--border); cursor:pointer; background:#fff; padding:0; font:inherit;
  }
  .icon-btn:hover{border-color:var(--border-strong);}
  .watch-btn{
    background:var(--red); color:#fff; font-size:13px; font-weight:700; padding:9px 16px;
    border-radius:3px; white-space:nowrap; transition:background .15s ease;
  }
  .watch-btn:hover{background:#c81424;}

  /* ===== header search ===== */
  .header-search-wrap{position:relative;}
  .header-search-panel{
    position:absolute; top:calc(100% + 14px); right:0; width:340px; max-width:calc(100vw - 32px);
    background:#fff; border:1px solid var(--border); border-radius:8px;
    box-shadow:0 16px 32px rgba(0,0,0,.16); padding:14px; display:none; z-index:90;
  }
  .header-search-panel.open{display:block;}
  .header-search-form{display:flex; gap:8px;}
  .header-search-form input{
    flex:1; height:40px; border:1px solid var(--border-strong); border-radius:4px; padding:0 12px;
    font-family:var(--font-sans); font-size:13px; color:var(--ink);
  }
  .header-search-form input:focus{outline:none; border-color:var(--navy);}
  .header-search-submit{
    width:40px; height:40px; border-radius:4px; border:none; background:var(--red); color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .header-search-submit:hover{background:#c01523;}
  .header-search-results{margin-top:10px; max-height:360px; overflow-y:auto;}
  .header-search-results:empty{margin-top:0;}
  @media (max-width:620px){
    .header-search-panel{position:fixed; top:68px; left:12px; right:12px; width:auto;}
  }

  /* ===== chip nav ===== */
  .chip-bar{background:var(--bg-alt); border-bottom:1px solid var(--border); overflow-x:auto;}
  .chip-row{display:flex; gap:10px; padding:12px 24px; max-width:1240px; margin:0 auto;}
  .chip{
    font-size:12px; font-weight:800; color:var(--ink); background:transparent; border:1.5px solid var(--ink);
    padding:8px 16px; border-radius:20px; white-space:nowrap; transition:all .15s ease;
    text-transform:uppercase; letter-spacing:.03em;
  }
  .chip:hover, .chip.active{background:var(--ink); color:#fff; border-color:var(--ink);}

  /* ===== live scores strip ===== */
  .scores-strip{border-bottom:1px solid var(--border); padding:14px 0;}
  .scores-head{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px;}
  .scores-row{display:flex; gap:14px; overflow-x:auto; padding-bottom:2px;}
  .score-card{
    width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:6px; padding:10px 14px;
    transition:background .8s ease;
  }
  .score-card .sc-comp{font-family:var(--font-mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; display:flex; justify-content:space-between; margin-bottom:8px;}
  .score-card .sc-team-row{display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; padding:2px 0;}
  .score-card .sc-num{font-family:var(--font-mono); font-weight:700; color:var(--navy);}
  .score-flash{background:#FDECEC;}
  .goal-flag{
    font-family:var(--font-mono); font-size:9px; color:var(--red); font-weight:700; margin-left:6px;
    opacity:0; animation:goalPop 2.4s ease forwards;
  }
  @keyframes goalPop{0%{opacity:0;}12%{opacity:1;}80%{opacity:1;}100%{opacity:0;}}

  /* ===== section base ===== */
  .section{padding:40px 0;}
  .section-title{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;
    border-bottom:3px solid var(--ink); padding-bottom:10px;
  }
  .section-title h2{font-size:24px;}
  .section-title a{font-size:13px; font-weight:700; color:var(--navy);}
  .section-title a:hover{text-decoration:underline;}

  /* ===== top stories ===== */
  .top-stories-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:28px;}
  .lead-story .thumb{margin-bottom:14px;}
  .lead-story h3{font-size:30px; margin:8px 0 6px;}
  .lead-story p{color:var(--muted); font-size:15px;}
  .story-list{display:flex; flex-direction:column;}
  .story-list-item{
    display:grid; grid-template-columns:120px 1fr; gap:14px; padding:14px 0;
    border-bottom:1px solid var(--border);
  }
  .story-list-item:first-child{padding-top:0;}
  .story-list-item .thumb{border-radius:2px;}
  .story-list-item h4{font-size:15px; margin-top:4px; line-height:1.25;}

  /* ===== reveal ===== */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);}
  .reveal.is-visible{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1 !important; transform:none !important;}}

  /* ===== carousel ===== */
  .carousel-tabs{display:flex; gap:8px; margin-bottom:16px;}
  .carousel-tabs button{
    font-size:13px; font-weight:700; padding:8px 14px; background:none; border:1px solid var(--border);
    color:var(--text); cursor:pointer; border-radius:3px;
  }
  .carousel-tabs button.active{background:#0B0C10; color:#fff; border-color:#0B0C10;}
  .carousel-wrap{position:relative;}
  .carousel-track{display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:6px;}
  .carousel-card{flex:0 0 260px;}
  a.carousel-card{display:block; color:inherit; text-decoration:none;}
  .carousel-card h4{font-size:14px; margin-top:10px; line-height:1.3;}
  .carousel-btn{
    position:absolute; top:38%; width:34px; height:34px; border-radius:50%; background:#fff;
    border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.12);
  }
  .carousel-btn.prev{left:-17px;}
  .carousel-btn.next{right:-17px;}

  /* ===== news grid ===== */
  .news-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .news-card h4{font-size:16px; margin-top:8px; line-height:1.28;}
  .news-card .byline{font-size:12px; color:var(--muted); margin-top:8px;}

  /* ===== watch grid ===== */
  .watch-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .watch-card h4{font-size:14px; margin-top:8px; line-height:1.3;}

  /* ===== stats ===== */
  .stats-block{display:grid; grid-template-columns:1fr 1.3fr; gap:34px; align-items:start;}
  .stats-tabs{display:flex; gap:8px; margin-bottom:14px;}
  .stats-tabs button{
    font-size:12px; font-weight:700; padding:7px 12px; background:none; border:1px solid var(--border);
    color:var(--text); cursor:pointer; border-radius:3px; text-transform:uppercase; letter-spacing:.03em;
  }
  .stats-tabs button.active{background:var(--navy); color:#fff; border-color:var(--navy);}
  table.stats-table{width:100%; border-collapse:collapse;}
  .stats-table th{
    text-align:left; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
    padding:8px 6px; border-bottom:2px solid var(--ink);
  }
  .stats-table td{padding:11px 6px; border-bottom:1px solid var(--border); font-size:14px;}
  .stats-table td.rank{font-family:var(--font-mono); color:var(--navy); font-weight:700; width:28px;}
  .stats-table td.num{font-family:var(--font-mono); text-align:right; font-weight:700;}
  .stats-table th:last-child{text-align:right;}
  .group-table{width:100%; border-collapse:collapse; font-size:13px;}
  .group-table caption{text-align:left; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; margin-bottom:8px; letter-spacing:.03em;}
  .group-table th{text-align:left; font-size:11px; color:var(--muted); text-transform:uppercase; padding:8px 6px; border-bottom:2px solid var(--ink);}
  .group-table td{padding:10px 6px; border-bottom:1px solid var(--border); font-family:var(--font-mono);}
  .group-table td.team{font-family:var(--font-sans); font-weight:700; color:var(--ink); display:flex; align-items:center; flex-wrap:wrap; gap:6px;}
  .group-table th:not(:first-child), .group-table td:not(.team){text-align:center;}
  .group-table tr:first-child td{background:#F5F8FF;}
  .pl-badge{width:18px;height:18px;object-fit:contain;vertical-align:middle;margin-right:8px;}

  /* ===== pundits ===== */
  .pundits-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .pundit-card{display:flex; gap:14px; align-items:flex-start;}
  .avatar{
    width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; flex:0 0 auto;
  }
  .pundit-card .name{font-size:13px; font-weight:700; color:var(--navy); margin-bottom:4px;}
  .pundit-card h4{font-size:15px; line-height:1.3;}

  /* ===== features ===== */
  .features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .feature-card h4{font-size:17px; margin-top:10px;}

  /* ===== newsletter ===== */
  .newsletter{background:var(--navy); padding:32px 0;}
  .newsletter-row{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
  .newsletter h3{color:#fff; font-size:20px;}
  .newsletter p{color:rgba(255,255,255,0.7); font-size:13px; margin-top:4px;}
  .newsletter-form{display:flex; min-width:320px;}
  .newsletter-form input{
    flex:1; height:44px; border:none; padding:0 14px; font-family:var(--font-sans); font-size:13px;
  }
  .newsletter-form button{
    height:44px; padding:0 20px; background:var(--red); color:#fff; border:none; font-weight:700; font-size:13px; cursor:pointer;
  }

  /* ===== footer ===== */
  footer{background:#0B0C10; color:rgba(255,255,255,0.75); padding:44px 0 24px;}
  .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; gap:28px; margin-bottom:32px;}
  .footer-col h5{font-size:12px; color:#fff; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px;}
  .footer-col a{display:block; font-size:13px; margin-bottom:10px; color:rgba(255,255,255,0.68);}
  .footer-col a:hover{color:#fff;}
  .footer-brand .logo{color:#fff; margin-bottom:10px;}
  .footer-brand p{font-size:13px; color:rgba(255,255,255,0.55); max-width:240px;}
  .footer-social{display:flex; gap:12px; margin-top:14px;}
  .footer-social a{
    width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,0.25);
    display:flex; align-items:center; justify-content:center;
  }
  .footer-bottom{
    display:flex; justify-content:space-between; padding-top:20px; border-top:1px solid rgba(255,255,255,0.15);
    font-size:12px; color:rgba(255,255,255,0.5);
  }

  /* ===== site search (footer) ===== */
  .footer-search{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:8px;
    padding:20px 22px;
    margin-bottom:32px;
  }
  .footer-search h5{font-size:12px; color:#fff; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px;}
  .footer-search-form{display:flex; gap:10px; position:relative; max-width:560px;}
  .footer-search-form input{
    flex:1; height:44px; border:1px solid rgba(255,255,255,0.25); border-radius:4px;
    background:rgba(255,255,255,0.06); color:#fff; padding:0 14px;
    font-family:var(--font-sans); font-size:13px;
  }
  .footer-search-form input::placeholder{color:rgba(255,255,255,0.45);}
  .footer-search-form input:focus{outline:none; border-color:var(--red);}
  .footer-search-form button{
    height:44px; padding:0 20px; background:var(--red); color:#fff; border:none;
    border-radius:4px; font-weight:700; font-size:13px; cursor:pointer; flex-shrink:0;
  }
  .footer-search-form button:hover{background:#c01523;}
  .footer-search-results{
    position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border-radius:6px;
    box-shadow:0 12px 28px rgba(0,0,0,.35); max-height:360px; overflow-y:auto; z-index:80; display:none;
  }
  .footer-search-results.open{display:block;}
  .search-result-item{
    display:block; padding:12px 14px; border-bottom:1px solid var(--border); text-decoration:none;
  }
  .search-result-item:last-child{border-bottom:none;}
  .search-result-item:hover, .search-result-item.active{background:var(--bg-alt);}
  .search-result-item strong{display:block; font-size:13px; color:var(--ink); margin-bottom:2px; font-weight:700;}
  .search-result-item span{display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
  .search-no-results{padding:14px; font-size:13px; color:var(--muted);}
  .footer-search-count{font-size:11px; color:rgba(255,255,255,0.45); margin-top:10px;}
  @media (max-width:620px){
    .footer-search-results{right:0; left:0;}
  }

  @media (max-width:980px){
    nav.main-nav{display:none;}
    .top-stories-grid{grid-template-columns:1fr;}
    .news-grid, .watch-grid{grid-template-columns:repeat(2,1fr);}
    .pundits-grid, .features-grid{grid-template-columns:1fr;}
    .stats-block{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr 1fr;}
  }
  @media (max-width:620px){
    .news-grid, .watch-grid{grid-template-columns:1fr;}
    .story-list-item{grid-template-columns:90px 1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .newsletter-row{flex-direction:column; align-items:flex-start;}
    .newsletter-form{width:100%;}
  }

  /* ===== custom MatchDayX logo and hero banner ===== */
  .site-logo{
    height:54px;
    width:auto;
    max-width:190px;
    object-fit:contain;
    display:block;
  }

  .logo{
    display:flex;
    align-items:center;
  }

  .hero-banner{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#05070d;
  }

  .hero-banner img{
    width:100%;
    height:440px;
    object-fit:cover;
    object-position:center center;
    display:block;
  }

  .hero-caption{
    background:var(--navy);
    padding:26px clamp(24px, 6vw, 80px) 32px;
    border-bottom:4px solid var(--red);
  }

  .hero-caption .hero-kicker{
    display:inline-block;
    background:var(--red);
    color:#fff;
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:7px 11px;
    margin-bottom:14px;
  }

  .hero-caption h1{
    color:#fff;
    font-family:var(--font-hero);
    font-size:clamp(34px, 5vw, 58px);
    line-height:1.02;
    letter-spacing:.01em;
    text-transform:uppercase;
    margin:0 0 10px;
    max-width:820px;
  }

  .hero-caption p{
    color:rgba(255,255,255,.72);
    font-size:clamp(15px, 1.6vw, 18px);
    font-weight:500;
    max-width:640px;
    margin:0;
  }

  @media (max-width:620px){
    .header-row{height:64px;}
    .site-logo{height:44px; max-width:150px;}
    .hero-banner img{height:260px;}
    .hero-caption{padding:20px 22px 26px;}
  }


.hero-link{
  display:block;
  position:relative;
  color:inherit;
  text-decoration:none;
}

.hero-link:hover img{
  transform:scale(1.03);
}

.hero-banner img{
  transition:transform .45s ease;
}

/* ===== Bayern-inspired overlay hero (sliding) ===== */
.mdx-hero-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:500px;
  min-height:280px;
  overflow:hidden;
  background:#05070d;
}
.mdx-hero{
  display:none;
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:hidden;
  cursor:pointer;
}
.mdx-hero.active{display:block;}
.mdx-hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 25%;
  transition:transform 6s ease;
}
.mdx-hero.active img{transform:scale(1.06);}
.mdx-hero::after{
  content:'';
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(0deg, rgba(0,10,40,.92) 0%, rgba(0,10,40,.55) 32%, rgba(0,10,40,.05) 60%);
}
.mdx-hero-content{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:28px clamp(20px,5vw,64px) clamp(28px,4vw,48px);
  max-width:900px;
}
.mdx-hero-dots{
  position:absolute;
  right:clamp(20px,5vw,64px);
  bottom:clamp(24px,4vw,40px);
  display:flex;
  gap:9px;
  z-index:6;
}
.mdx-hero-dots button{
  width:10px; height:10px; border-radius:50%; border:2px solid rgba(255,255,255,.6);
  background:transparent; padding:0; cursor:pointer;
}
.mdx-hero-dots button.active{background:var(--red); border-color:var(--red);}
.mdx-hero-kicker{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-family:'Oswald', var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:3px;
  margin-bottom:14px;
}
.mdx-hero-content h1{
  color:#fff;
  font-family:'Oswald', var(--font-hero);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(28px,4.6vw,52px);
  line-height:1.04;
  letter-spacing:.005em;
  margin-bottom:16px;
}
.mdx-hero-cta{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-family:'Oswald', var(--font-sans);
  font-size:14px;
  font-weight:600;
  padding:12px 26px;
  border-radius:3px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.mdx-hero-cta:hover{background:#fff; color:var(--red);}
@media(max-width:620px){
  .mdx-hero-wrap{aspect-ratio:4/5; max-height:440px;}
}


/* ===== MatchDayX Pro Upgrades ===== */
.breaking-ticker{
  background:#0B0C10;
  color:#fff;
  border-bottom:3px solid var(--red);
  overflow:hidden;
}
.breaking-inner{
  display:flex;
  align-items:center;
  min-height:42px;
}
.breaking-label{
  background:var(--red);
  color:#fff;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:8px 12px;
  margin-right:16px;
  flex:0 0 auto;
}
.breaking-marquee{
  overflow:hidden;
  white-space:nowrap;
  flex:1;
}
.breaking-marquee span{
  display:inline-block;
  padding-left:100%;
  animation:tickerMove 28s linear infinite;
  font-size:14px;
  font-weight:700;
}
@keyframes tickerMove{
  0%{transform:translateX(0);}
  100%{transform:translateX(-100%);}
}

.dark-toggle{
  border:1px solid var(--border);
  background:#fff;
  color:var(--ink);
  width:34px;
  height:34px;
  border-radius:50%;
  cursor:pointer;
  font-weight:800;
}

body.dark-mode{
  --bg:#080B12;
  --bg-alt:#111827;
  --ink:#F8FAFC;
  --text:#D6DAE2;
  --muted:#9CA3AF;
  --border:#263244;
  --border-strong:#3B4759;
}
body.dark-mode .site-header,
body.dark-mode .chip,
body.dark-mode .carousel-tabs button:not(.active),
body.dark-mode .carousel-btn,
body.dark-mode .score-card{
  background:#0F172A;
}
body.dark-mode .dark-toggle{
  background:#0F172A;
  color:#F8FAFC;
  border-color:var(--border-strong);
}
body.dark-mode .thumb{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    repeating-linear-gradient(45deg, #161E2F 0 10px, #101827 10px 20px);
}
body.dark-mode .site-logo{
  filter:brightness(0) invert(1);
}

.feature-slider{
  position:relative;
  margin:26px auto 0;
  max-width:1240px;
  padding:0 24px;
}
.slider-card{
  display:none;
  min-height:280px;
  border-radius:6px;
  overflow:hidden;
  position:relative;
  background:#0b0c10;
  color:#fff;
}
.slider-card.active{display:block;}
.slider-card .slider-bg{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, #002A91, #DF1A19);
  opacity:.95;
}
.slider-card .slider-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 70% 20%, rgba(255,255,255,.22), transparent 28%);
}
.slider-content{
  position:relative;
  z-index:2;
  max-width:720px;
  padding:46px;
}
.slider-content .kicker{
  color:#FFD86B;
}
.slider-content h2{
  color:#fff;
  font-size:clamp(32px, 5vw, 58px);
  margin:10px 0;
}
.slider-content p{
  color:rgba(255,255,255,.86);
  font-size:18px;
}
.slider-dots{
  display:flex;
  gap:8px;
  margin-top:12px;
}
.slider-dots button{
  width:10px;
  height:10px;
  border-radius:50%;
  border:none;
  background:#C9CCD4;
  cursor:pointer;
}
.slider-dots button.active{background:var(--red);}

.news-ticker{
  border-bottom:1px solid var(--border);
  background:linear-gradient(90deg, #0b2a5b, #1d4fa3, #0b2a5b);
  overflow:hidden;
}
.news-ticker .ticker-inner{
  display:flex;
  align-items:center;
  max-width:1240px;
  margin:0 auto;
}
.ticker-label{
  flex:0 0 auto;
  background:var(--red);
  color:#fff;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:9px 16px;
  white-space:nowrap;
}
.ticker-viewport{
  flex:1;
  overflow:hidden;
  position:relative;
  height:38px;
  display:flex;
  align-items:center;
}
.ticker-track{
  display:flex;
  align-items:center;
  white-space:nowrap;
  animation:ticker-scroll 42s linear infinite;
  will-change:transform;
}
.news-ticker:hover .ticker-track,
.news-ticker:focus-within .ticker-track{
  animation-play-state:paused;
}
.ticker-item{
  color:#fff;
  text-decoration:none;
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:700;
  padding:0 22px;
  cursor:pointer;
  white-space:nowrap;
}
.ticker-item:hover{
  color:#fff;
  text-decoration:underline;
}
.ticker-sep{
  color:rgba(255,255,255,.5);
  font-size:12px;
  flex:0 0 auto;
}
@keyframes ticker-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (max-width:640px){
  .ticker-label{padding:8px 10px; font-size:10px;}
  .ticker-item{padding:0 16px; font-size:12.5px;}
}

.ucl-upcoming .score-card{
  background:linear-gradient(135deg, #0b2a5b, #1d4fa3);
  border-color:transparent;
}
.ucl-upcoming .score-card .sc-comp{
  color:rgba(255,255,255,.72);
}
.ucl-upcoming .score-card .sc-team-row{
  color:#fff;
}
.ucl-upcoming .score-card.clickable:hover{
  border-color:#fff;
  box-shadow:0 2px 12px rgba(11,42,91,.35);
}
.wafcon-scores .score-card{
  background:linear-gradient(135deg, #4a0e6b, #7b2ff7);
  border-color:transparent;
}
.wafcon-scores .score-card .sc-comp{
  color:rgba(255,255,255,.72);
}
.wafcon-scores .score-card .sc-team-row,
.wafcon-scores .score-card .fixture-team{
  color:#fff;
}
.wafcon-scores .score-card.clickable:hover{
  border-color:#fff;
  box-shadow:0 2px 12px rgba(74,14,107,.35);
}
.ucl-theme-banner{
  background:linear-gradient(120deg, #04041e, #0b1f5e 45%, #1d4fa3 85%, #3f7ee0);
  border-radius:10px;
  padding:26px 28px;
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.ucl-theme-banner .ucl-theme-kicker{
  display:block; font-family:var(--font-mono); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.75); margin-bottom:4px;
}
.ucl-theme-banner h2{
  font-size:28px; color:#fff; margin:0;
}
.ucl-theme-banner .ucl-theme-logo{
  height:64px; width:auto; flex-shrink:0;
}
@media(max-width:640px){
  .ucl-theme-banner{padding:20px 20px;}
  .ucl-theme-banner h2{font-size:22px;}
  .ucl-theme-banner .ucl-theme-logo{height:48px;}
}
.pl-theme-banner{
  background:linear-gradient(120deg, #360d3a, #3d195b 45%, #6f2da8 80%, #963cff);
  border-radius:10px;
  padding:26px 28px;
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.pl-theme-banner .pl-theme-kicker{
  display:block; font-family:var(--font-mono); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:#e90052; margin-bottom:4px;
}
.pl-theme-banner h2{
  font-size:28px; color:#fff; margin:0;
}
.pl-theme-banner .pl-theme-logo{
  height:64px; width:auto; flex-shrink:0;
}
@media(max-width:640px){
  .pl-theme-banner{padding:20px 20px;}
  .pl-theme-banner h2{font-size:22px;}
  .pl-theme-banner .pl-theme-logo{height:48px;}
}
.laliga-theme-banner{
  background:linear-gradient(120deg, #5a0f0d, #b32a20 45%, #ff4b44 85%, #ff7a5c);
  border-radius:10px;
  padding:26px 28px;
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.laliga-theme-banner .laliga-theme-kicker{
  display:block; font-family:var(--font-mono); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:#ffd6ac; margin-bottom:4px;
}
.laliga-theme-banner h2{
  font-size:28px; color:#fff; margin:0;
}
.laliga-theme-banner .laliga-theme-logo{
  height:64px; width:auto; flex-shrink:0;
}
@media(max-width:640px){
  .laliga-theme-banner .laliga-theme-logo{height:48px;}
}
.seriea-theme-banner{
  background:linear-gradient(120deg, #1a1659, #0373ff 45%, #2de2ff 85%, #7eefff);
  border-radius:10px;
  padding:26px 28px;
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.seriea-theme-banner .seriea-theme-kicker{
  display:block; font-family:var(--font-mono); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:#d6f7ff; margin-bottom:4px;
}
.seriea-theme-banner h2{
  font-size:28px; color:#fff; margin:0;
}
.seriea-theme-banner .seriea-theme-logo{
  height:64px; width:auto; flex-shrink:0; filter:brightness(0) invert(1);
}
@media(max-width:640px){
  .seriea-theme-banner .seriea-theme-logo{height:48px;}
}
.bundesliga-theme-banner{
  background:linear-gradient(120deg, #3a0104, #8a030c 45%, #d20515 85%, #ff4a52);
  border-radius:10px;
  padding:26px 28px;
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.bundesliga-theme-banner .bundesliga-theme-kicker{
  display:block; font-family:var(--font-mono); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:#ffd0d3; margin-bottom:4px;
}
.bundesliga-theme-banner h2{
  font-size:28px; color:#fff; margin:0;
}
.bundesliga-theme-banner .bundesliga-theme-logo{
  height:64px; width:auto; flex-shrink:0;
}
@media(max-width:640px){
  .bundesliga-theme-banner .bundesliga-theme-logo{height:48px;}
}
.ligue1-theme-banner{
  background:linear-gradient(120deg, #060e1c, #12233f 45%, #1e3d6b 85%, #3868ad);
  border-radius:10px;
  padding:26px 28px;
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.ligue1-theme-banner .ligue1-theme-kicker{
  display:block; font-family:var(--font-mono); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:#ffce45; margin-bottom:4px;
}
.ligue1-theme-banner h2{
  font-size:28px; color:#fff; margin:0;
}
.ligue1-theme-banner .ligue1-theme-logo{
  height:64px; width:auto; flex-shrink:0;
}
@media(max-width:640px){
  .laliga-theme-banner, .seriea-theme-banner, .bundesliga-theme-banner, .ligue1-theme-banner{padding:20px 20px;}
  .laliga-theme-banner h2, .seriea-theme-banner h2, .bundesliga-theme-banner h2, .ligue1-theme-banner h2{font-size:22px;}
  .ligue1-theme-banner .ligue1-theme-logo{height:48px;}
}
.uel-theme-banner{
  background:linear-gradient(120deg, #2e0e00, #a6420a 45%, #ff6a00 85%, #ffab5c);
  border-radius:10px;
  padding:26px 28px;
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.uel-theme-banner .uel-theme-kicker{
  display:block; font-family:var(--font-mono); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:#ffe0c2; margin-bottom:4px;
}
.uel-theme-banner h2{
  font-size:28px; color:#fff; margin:0;
}
.uel-theme-banner .uel-theme-logo{
  height:64px; width:auto; flex-shrink:0;
}
.uecl-theme-banner{
  background:linear-gradient(120deg, #01210f, #0a5c2e 45%, #00c853 85%, #4ee88a);
  border-radius:10px;
  padding:26px 28px;
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.uecl-theme-banner .uecl-theme-kicker{
  display:block; font-family:var(--font-mono); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:#c8ffdd; margin-bottom:4px;
}
.uecl-theme-banner h2{
  font-size:28px; color:#fff; margin:0;
}
.uecl-theme-banner .uecl-theme-logo{
  height:64px; width:auto; flex-shrink:0;
}
@media(max-width:640px){
  .uel-theme-banner, .uecl-theme-banner{padding:20px 20px;}
  .uel-theme-banner h2, .uecl-theme-banner h2{font-size:22px;}
  .uel-theme-banner .uel-theme-logo, .uecl-theme-banner .uecl-theme-logo{height:48px;}
}
.wafcon-theme-banner{
  background:linear-gradient(120deg, #23073a, #4a0e6b 45%, #7b2ff7 85%, #b98cff);
  border-radius:10px;
  padding:26px 28px;
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.wafcon-theme-banner .wafcon-theme-kicker{
  display:block; font-family:var(--font-mono); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:#e9d6ff; margin-bottom:4px;
}
.wafcon-theme-banner h2{
  font-size:28px; color:#fff; margin:0;
}
.wafcon-theme-banner .wafcon-theme-logo{
  height:64px; width:auto; flex-shrink:0;
}
.wafcon-countdown{
  display:flex; gap:10px; flex-shrink:0;
}
.wafcon-countdown-item{
  display:flex; flex-direction:column; align-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  border-radius:8px;
  padding:8px 12px;
  min-width:56px;
}
.wafcon-countdown-num{
  font-family:var(--font-mono); font-size:22px; font-weight:800; color:#fff; line-height:1;
}
.wafcon-countdown-label{
  font-family:var(--font-mono); font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:#e9d6ff; margin-top:4px;
}
@media(max-width:640px){
  .wafcon-countdown{gap:6px;}
  .wafcon-countdown-item{padding:6px 8px; min-width:44px;}
  .wafcon-countdown-num{font-size:17px;}
  .wafcon-countdown-label{font-size:9px;}
}
.afcon-theme-banner{
  background:linear-gradient(120deg, #0b2e18, #16803c 40%, #e6b800 75%, #c81d1d);
  border-radius:10px;
  padding:26px 28px;
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.afcon-theme-banner .afcon-theme-kicker{
  display:block; font-family:var(--font-mono); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:#ffe9a8; margin-bottom:4px;
}
.afcon-theme-banner h2{
  font-size:28px; color:#fff; margin:0;
}
.afcon-theme-banner .afcon-theme-logo{
  height:64px; width:auto; flex-shrink:0;
}
.cafcl-theme-banner{
  background:linear-gradient(120deg, #04120c, #0b3d2e 45%, #157a5c 75%, #d4af37);
  border-radius:10px;
  padding:26px 28px;
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.cafcl-theme-banner .cafcl-theme-kicker{
  display:block; font-family:var(--font-mono); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:#ffe9b0; margin-bottom:4px;
}
.cafcl-theme-banner h2{
  font-size:28px; color:#fff; margin:0;
}
.cafcl-theme-banner .cafcl-theme-logo{
  height:64px; width:auto; flex-shrink:0;
}
@media(max-width:640px){
  .wafcon-theme-banner, .afcon-theme-banner, .cafcl-theme-banner{padding:20px 20px;}
  .wafcon-theme-banner h2, .afcon-theme-banner h2, .cafcl-theme-banner h2{font-size:22px;}
  .wafcon-theme-banner .wafcon-theme-logo, .afcon-theme-banner .afcon-theme-logo, .cafcl-theme-banner .cafcl-theme-logo{height:48px;}
}
.fixture-team{
  display:flex;
  align-items:center;
  white-space:nowrap;
}

.ad-slot{
  max-width:1240px;
  margin:20px auto;
  padding:0 24px;
}
.ad-box{
  border:1px dashed var(--border-strong);
  background:var(--bg-alt);
  color:var(--muted);
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.live-widget{
  background:var(--bg-alt);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:30px 0;
}
.widget-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.widget-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:18px;
}
.widget-card h3{
  font-size:18px;
  margin-bottom:12px;
}
.mini-standings{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.mini-standings th,
.mini-standings td{
  padding:9px 6px;
  border-bottom:1px solid var(--border);
  text-align:left;
}
.mini-standings th:not(:first-child),
.mini-standings td:not(:first-child){
  text-align:center;
  font-family:var(--font-mono);
}
.match-list li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
  padding:10px 0;
  font-size:14px;
}
.match-list strong{color:var(--ink);}

.youtube-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.video-embed{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
  border-radius:4px;
  overflow:hidden;
}
.video-embed iframe{
  width:100%;
  height:100%;
  border:0;
}
.social-linkedin{background:#0A66C2;}
.social-tiktok{background:#000;}
.social-facebook{background:#1877F2;}

.article-page{
  display:none;
  padding:42px 0;
}
.article-card{
  max-width:820px;
  margin:0 auto;
  padding:0 24px;
}
.article-card h1{
  font-size:clamp(36px,5vw,58px);
  margin:10px 0 16px;
}
.article-card p{
  font-size:18px;
  color:var(--text);
  margin:0 0 16px;
}
.category-strip{
  max-width:1240px;
  margin:0 auto;
  padding:22px 24px 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.category-card{
  border:1px solid var(--border);
  background:var(--bg);
  padding:18px;
  border-radius:4px;
  transition:transform .2s ease;
}
.category-card:hover{
  transform:translateY(-4px);
}
.category-card h4{
  font-size:16px;
  margin-bottom:6px;
}
.category-card p{
  color:var(--muted);
  font-size:13px;
}

@media (max-width:860px){
  .widget-grid,
  .youtube-grid,
  .category-strip{
    grid-template-columns:1fr;
  }
  .slider-content{padding:30px;}
}


/* ===== World Cup 2026 Bracket Update ===== */
.bracket-update{
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  padding:44px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.bracket-header{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-end;
  margin-bottom:20px;
}
.bracket-header h2{
  font-size:32px;
}
.bracket-note{
  color:var(--muted);
  font-size:14px;
  max-width:520px;
}
.bracket-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  align-items:start;
}
.bracket-round{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:14px;
  box-shadow:none;
}
.bracket-round h3{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--navy);
  border-bottom:2px solid var(--ink);
  padding-bottom:8px;
  margin-bottom:12px;
}
.bracket-match{
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  margin-bottom:12px;
  background:var(--bg-alt);
}
.match-meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  font-size:11px;
  color:var(--muted);
  font-family:var(--font-mono);
  text-transform:uppercase;
  border-bottom:1px solid var(--border);
}
.match-status{
  color:var(--red);
  font-weight:800;
}
.team-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  font-size:14px;
  font-weight:700;
}
.team-line.winner{
  background:rgba(184,134,11,.12);
  color:var(--ink);
}
.team-line .score{
  font-family:var(--font-mono);
  font-weight:800;
}
.team-line.pending{
  color:var(--muted);
  font-style:italic;
}
.report-card{
  margin-top:28px;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:24px;
  align-items:stretch;
}
.report-score{
  background:linear-gradient(135deg, var(--navy), var(--navy-2));
  color:#fff;
  border-radius:6px;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:260px;
}
.report-score .kicker{
  color:#FFD86B;
}
.report-score h3{
  color:#fff;
  font-size:42px;
  margin:10px 0;
}
.scoreline-big{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:14px;
  font-size:22px;
  font-weight:800;
}
.scoreline-big span{
  flex:1;
}
.scoreline-big .goals{
  flex:0 0 auto;
  background:#fff;
  color:var(--navy);
  border-radius:999px;
  padding:10px 18px;
  font-family:var(--font-mono);
}
.report-copy{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:26px;
}
.report-copy h3{
  font-size:28px;
  margin-bottom:12px;
}
.report-copy p{
  color:var(--text);
  font-size:16px;
  margin-bottom:12px;
}
.report-copy .standfirst{
  font-weight:800;
  color:var(--ink);
  font-size:18px;
}
@media (max-width:980px){
  .bracket-grid{
    grid-template-columns:1fr 1fr;
  }
  .report-card{
    grid-template-columns:1fr;
  }
}
@media (max-width:620px){
  .bracket-header{
    display:block;
  }
  .bracket-grid{
    grid-template-columns:1fr;
  }
  .report-score h3{
    font-size:32px;
  }
}


/* ===== Top Story Image + Clickable Live Score Updates ===== */
.story-image{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
  border-radius:4px;
}

.score-card-link{
  color:inherit;
  text-decoration:none;
  display:block;
  flex:0 0 220px;
}

.score-card.clickable{
  cursor:pointer;
}

.score-card.clickable:hover{
  border-color:var(--navy);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  transform:translateY(-1px);
}

.score-card{
  transition:background .8s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}


/* ===== MatchDayX Clickable CMS Upgrade ===== */
.click-card,
.article-trigger,
.match-trigger,
.team-trigger,
.standing-trigger{
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.click-card:hover,
.article-trigger:hover,
.match-trigger:hover,
.team-trigger:hover,
.standing-trigger:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  border-color:var(--navy) !important;
}
.story-list-item.article-trigger:hover,
.lead-story.article-trigger:hover{
  background:var(--bg-alt);
}
.story-list-item.article-trigger,
.lead-story.article-trigger{
  border-radius:4px;
  padding:10px;
}
.group-table tr.team-trigger:hover,
.mini-standings tr.team-trigger:hover{
  background:rgba(0,28,106,.08) !important;
}
.match-list li.match-trigger:hover{
  background:rgba(0,28,106,.08);
  padding-left:10px;
  border-radius:8px;
}
.mdx-page{
  display:none;
  animation:pageFade .28s ease;
}
.mdx-page.active{
  display:block;
}
@keyframes pageFade{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:none;}
}
.page-shell{
  max-width:1180px;
  margin:0 auto;
  padding:42px 24px;
}
.page-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--navy);
  font-weight:800;
  font-size:13px;
  padding:9px 13px;
  border-radius:999px;
  margin-bottom:24px;
  cursor:pointer;
}
.page-back:hover{
  background:var(--navy);
  color:#fff;
}
.cf-fixture-list{
  list-style:none;
  padding:0;
  margin:22px 0 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cf-fixture-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--bg);
}
.cf-fixture-list .cf-mw{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.03em;
  min-width:90px;
}
.cf-fixture-list .cf-opp{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-sans);
  font-weight:800;
  color:var(--ink);
  flex:1;
}
.cf-fixture-list .cf-date{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  white-space:nowrap;
}
.cf-badge{
  width:20px;
  height:20px;
  object-fit:contain;
  flex-shrink:0;
}
.cf-club-badge{
  width:30px;
  height:30px;
  object-fit:contain;
  vertical-align:middle;
  margin-right:10px;
}
.fixture-strip .score-card{
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fixture-strip .score-card:hover{
  border-color:var(--navy);
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  transform:translateY(-2px);
}
.fp-header{
  text-align:center;
  padding:28px 0 20px;
  border-bottom:1px solid var(--border);
  margin-bottom:26px;
}
.fp-matchup{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  margin:14px 0;
}
.fp-team{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:140px;
}
.fp-badge{
  width:56px;
  height:56px;
  object-fit:contain;
}
.fp-team-name{
  font-family:var(--font-sans);
  font-weight:800;
  font-size:16px;
  color:var(--ink);
  text-align:center;
}
.fp-vs{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.fp-kickoff{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
  margin:4px 0 0;
}
.fp-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
@media (max-width:640px){
  .fp-columns{grid-template-columns:1fr;}
  .fp-matchup{gap:16px;}
}
.fp-col-title{
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:800;
  margin:0 0 10px;
  padding-bottom:8px;
  border-bottom:2px solid var(--border);
}
.fp-status{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.fp-status-pill{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:5px 10px;
  border-radius:20px;
  background:var(--bg-alt);
  color:var(--muted);
  border:1px solid var(--border);
}
.fp-status-pill.fp-champ{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}
.fp-status-pill.fp-promoted{
  background:#E8F5E9;
  color:#1B5E20;
  border-color:#A5D6A7;
}
.fp-sub-title{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  margin:0 0 10px;
}
body:has(#club-fixtures-page.active) #top-stories,
body:has(#club-fixtures-page.active) #bracket,
body:has(#club-fixtures-page.active) #premier-league,
body:has(#club-fixtures-page.active) #transfers,
body:has(#club-fixtures-page.active) #stats{
  display:none;
}
.article-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 330px;
  gap:30px;
  align-items:start;
}
.article-main{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
}
.article-hero-img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.entry-img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:8px;
  margin:10px 0;
  display:block;
}
.article-body{
  padding:30px;
}
.article-body h1{
  font-size:clamp(34px, 5vw, 62px);
  letter-spacing:-.04em;
  margin:8px 0 14px;
}
.article-body .standfirst{
  font-size:20px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:18px;
}
.article-body p{
  font-size:17px;
  color:var(--text);
  margin:0 0 15px;
}
.article-sidebar{
  position:sticky;
  top:96px;
  display:grid;
  gap:16px;
}
.info-panel{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:18px;
}
.info-panel h3{
  font-size:18px;
  margin-bottom:12px;
}
.quick-list li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
  padding:10px 0;
  font-size:14px;
}
.quick-list li:last-child{border-bottom:0;}
.match-page-card{
  background:linear-gradient(135deg, var(--navy), var(--navy-2));
  color:#fff;
  border-radius:6px;
  padding:30px;
  margin-bottom:24px;
}
.match-page-card h1{
  color:#fff;
  font-size:clamp(34px, 5vw, 58px);
  margin:8px 0;
}
.match-versus{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  margin-top:22px;
}
.team-block{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:4px;
  padding:20px;
  text-align:center;
}
.team-block h3{
  color:#fff;
}
.team-block .flag{
  font-size:34px;
  margin-bottom:8px;
}
.vs-pill{
  background:#fff;
  color:var(--navy);
  border-radius:999px;
  padding:10px 14px;
  font-family:var(--font-mono);
  font-weight:900;
}
.live-updates{
  display:grid;
  gap:12px;
}
.update-item{
  border-left:4px solid var(--red);
  background:var(--bg-alt);
  padding:14px;
  border-radius:8px;
}
.team-profile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.team-hero{
  border-radius:6px;
  background:linear-gradient(135deg, var(--navy), #0B0C10);
  color:#fff;
  padding:30px;
}
.team-hero h1{color:#fff; font-size:clamp(36px,5vw,60px);}
.route-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.route-step{
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:4px;
  padding:14px;
}
.route-step span{
  display:block;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
}
.route-step strong{
  display:block;
  margin-top:6px;
  color:var(--ink);
}
.bracket-match{
  transition:opacity .45s ease, transform .45s ease, box-shadow .2s ease;
}
.bracket-match.bracket-hidden{
  opacity:.18;
  transform:scale(.98);
}
.bracket-match.bracket-focus{
  opacity:1;
  transform:scale(1.02);
  box-shadow:0 12px 28px rgba(224,26,43,.18);
  border-color:var(--red);
}
.bracket-controls{
  display:flex;
  gap:10px;
  margin:18px 0 0;
  flex-wrap:wrap;
}
.bracket-controls button{
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--ink);
  font-weight:800;
  border-radius:999px;
  padding:9px 14px;
  cursor:pointer;
}
.bracket-controls button:hover{
  background:var(--navy);
  color:#fff;
}
.read-more-pill{
  display:inline-block;
  margin-top:10px;
  color:var(--navy);
  font-weight:900;
  font-size:13px;
}
@media (max-width:920px){
  .article-layout,
  .team-profile-grid{
    grid-template-columns:1fr;
  }
  .article-sidebar{
    position:static;
  }
  .route-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:620px){
  .match-versus{
    grid-template-columns:1fr;
  }
  .vs-pill{
    justify-self:center;
  }
  .route-grid{
    grid-template-columns:1fr;
  }
  .article-body{padding:22px;}
}


/* ===== MatchDayX full clickable section upgrade ===== */
.news-card, .watch-card, .carousel-card, .feature-card, .pundit-card, .category-card, .widget-card, .story-list-item, .lead-story{
  cursor:pointer;
}
.news-card:hover, .watch-card:hover, .carousel-card:hover, .feature-card:hover, .pundit-card:hover, .category-card:hover, .widget-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,.10);
}


/* ===== Updated hero banner image ===== */
.hero,
.hero-banner,
.site-hero,
.main-hero {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.18) 100%),
    url('../hero-banner-main.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.hero img,
.hero-banner img,
.site-hero img,
.main-hero img {
  object-fit: cover;
}
.hero::after,
.hero-banner::after,
.site-hero::after,
.main-hero::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at 72% 40%, rgba(255,199,44,.22), transparent 28%);
}
.hero > *,
.hero-banner > *,
.site-hero > *,
.main-hero > * {
  position:relative;
  z-index:1;
}
.click-card,
[data-page] {
  cursor: pointer;
}
.click-card:hover,
[data-page]:hover {
  transform: translateY(-2px);
}


/* ===== USA 1–4 Belgium live match page upgrade ===== */
.live-glow,
.glowing-live{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--red);
  color:#fff !important;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:3px;
  padding:8px 14px;
}
.live-glow::before,
.glowing-live::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  animation:pulse 1.3s infinite;
}
.live-scoreboard{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:18px;
  align-items:center;
  margin:24px 0;
}
.live-team{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:4px;
  padding:22px;
  text-align:center;
}
.live-team .flag{
  font-size:34px;
  margin-bottom:8px;
}
.live-team h3{
  color:#fff;
  margin:0 0 10px;
}
.live-team .score{
  font-size:64px;
  line-height:.9;
  font-weight:1000;
  font-family:var(--font-mono);
}
.live-clock{
  display:grid;
  gap:10px;
  justify-items:center;
}
.live-clock .minute{
  background:#fff;
  color:var(--navy);
  border-radius:4px;
  padding:10px 14px;
  font-weight:1000;
  font-family:var(--font-mono);
}
.gws-card{
  background:#202124;
  border-radius:14px;
  padding:22px 24px 26px;
  margin:24px 0;
}
.gws-caption{
  font-size:12px;
  font-weight:600;
  color:#9aa0a6;
  margin-bottom:18px;
  font-family:var(--font-sans);
}
.gws-row{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:36px;
}
.gws-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.gws-team{
  display:flex;
  align-items:center;
  gap:14px;
}
.gws-flag{
  font-size:34px;
  line-height:1;
}
.gws-score{
  font-size:46px;
  font-weight:800;
  font-family:var(--font-sans);
  color:#fff;
  line-height:1;
}
.gws-name{
  font-size:15px;
  font-weight:700;
  color:#fff;
  font-family:var(--font-sans);
}
.gws-center{
  text-align:center;
  min-width:84px;
  padding-top:6px;
}
.gws-status{
  font-size:14px;
  font-weight:600;
  color:#e8eaed;
  font-family:var(--font-sans);
}
.gws-when{
  font-size:13px;
  color:#9aa0a6;
  margin-top:2px;
  font-family:var(--font-sans);
}
@media (max-width:520px){
  .gws-row{gap:16px;}
  .gws-flag{font-size:26px;}
  .gws-score{font-size:34px;}
}
.goal-list{
  display:grid;
  gap:10px;
}
.goal-item{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:12px;
  align-items:start;
  padding:13px;
  border-radius:4px;
  background:var(--bg-alt);
  border:1px solid var(--border);
}
.goal-minute{
  font-family:var(--font-mono);
  font-weight:1000;
  color:#fff;
  background:var(--red);
  border-radius:999px;
  text-align:center;
  padding:6px 8px;
}
.live-update-feed{
  display:grid;
  gap:10px;
}
.feed-item{
  border-left:4px solid var(--red);
  background:var(--bg-alt);
  border-radius:4px;
  padding:13px 14px;
}
.feed-item strong{
  color:var(--ink);
}
.transfer-blog{
  display:grid;
  gap:0;
  margin-top:10px;
}
.transfer-entry{
  padding:18px 0;
  border-top:1px solid var(--border);
}
.transfer-entry:first-child{
  border-top:none;
  padding-top:0;
}
.transfer-entry .entry-time{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--red);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:6px;
}
.transfer-entry h3{
  margin:0 0 8px;
  font-size:19px;
}
.transfer-entry p{
  margin:0 0 8px;
}
.transfer-entry .source-note{
  margin-bottom:0;
}
@media(max-width:700px){
  .live-scoreboard{grid-template-columns:1fr;}
  .live-team .score{font-size:48px;}
}


/* ===== Goal scorer passport cards ===== */
.scorer-meta strong{
  display:block;
  color:var(--ink);
  font-size:15px;
}
.scorer-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  font-family:var(--font-mono);
  font-weight:900;
  color:var(--red);
}
.goal-minute{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:64px;
}
.ball-icon{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.22));
}


/* ===== Match report and goal scorer update ===== */
.report-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:26px;
  margin-top:24px;
}
.report-card h2{
  font-size:clamp(28px,4vw,44px);
  margin-bottom:12px;
  letter-spacing:-.03em;
}
.report-card p{
  font-size:17px;
  color:var(--text);
  margin:0 0 14px;
}
.final-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#111827;
  color:#fff;
  font-weight:1000;
  letter-spacing:.08em;
  border-radius:999px;
  padding:8px 14px;
  text-transform:uppercase;
}
.scorer-passport-grid{
  display:grid;
  gap:14px;
}
.scorer-card{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:14px;
  align-items:center;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:4px;
  padding:12px;
}
.scorer-card img{
  width:76px;
  height:94px;
  object-fit:cover;
  border-radius:4px;
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.scorer-meta strong{
  display:block;
  color:var(--ink);
  font-size:15px;
}
.scorer-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  font-family:var(--font-mono);
  font-weight:900;
  color:var(--red);
}
.ball-icon{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.22));
}


/* ===== Updated Belgium hero banner ===== */
.hero,
.hero-banner,
.site-hero,
.main-hero {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.76) 0%, rgba(0,0,0,.48) 44%, rgba(0,0,0,.10) 100%),
    url('../hero-banner-belgium.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.hero::after,
.hero-banner::after,
.site-hero::after,
.main-hero::after {
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.16), transparent 28%) !important;
}
/* Full-time status: no red glow */
.final-badge,
.status-fulltime{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#111827;
  color:#fff !important;
  font-weight:1000;
  letter-spacing:.08em;
  border-radius:999px;
  padding:8px 14px;
  text-transform:uppercase;
  box-shadow:none !important;
  animation:none !important;
}
.final-badge::before,
.status-fulltime::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
}


/* ===== Updated Belgium top story image ===== */
.story-list-item .story-image{
  width:120px;
  height:78px;
  object-fit:cover;
  border-radius:6px;
}
@media(max-width:620px){
  .story-list-item .story-image{width:90px;height:62px;}
}


/* ===== Argentina vs Egypt press conference update ===== */
.press-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;}
.press-card{background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.press-card img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.press-card div{padding:16px;}
.press-card h3{font-size:20px;margin-bottom:8px;}
.press-card p{color:var(--text);font-size:15px;}
.story-list-item .story-image{width:120px;height:78px;object-fit:cover;border-radius:6px;}
@media(max-width:760px){.press-grid{grid-template-columns:1fr;}}
@media(max-width:620px){.story-list-item .story-image{width:90px;height:62px;}}


/* ===== MatchDayX latest bracket + transfer update ===== */
.transfer-news-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.transfer-news-card{
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:6px;
  overflow:hidden;
}
.club-tile{
  background:var(--bg);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.club-tile > img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.transfer-news-card .club-head{
  padding:16px 18px;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff;
}
.transfer-news-card .club-head h3{color:#fff;font-size:22px;}
.transfer-news-card .club-body{padding:18px;}
.transfer-news-card ul{display:grid;gap:12px;}
.transfer-news-card li{
  border-bottom:1px solid var(--border);
  padding-bottom:12px;
}
.transfer-news-card li:last-child{border-bottom:0;padding-bottom:0;}
.source-note{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  margin-top:12px;
}
.qf-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:20px;
}
.qf-card{
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg);
  padding:16px;
}
.qf-card h3{font-size:20px;margin-bottom:8px;}
.qf-card .time{font-family:var(--font-mono);font-size:12px;color:var(--red);font-weight:900;text-transform:uppercase;}
.wc-bracket{display:flex;gap:18px;overflow-x:auto;padding:8px 4px 22px;margin-top:20px;}
.wc-bracket-round{display:flex;flex-direction:column;justify-content:space-around;min-width:210px;flex:0 0 auto;}
.wc-bracket-round-title{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center;margin-bottom:10px;font-weight:700;}
.wc-bracket-match{border:1px solid var(--border);border-radius:8px;background:var(--bg);padding:10px 12px;margin:8px 0;}
.wc-bracket-match.clickable{cursor:pointer;}
.wc-bracket-match.clickable:hover{border-color:var(--navy);box-shadow:0 4px 12px rgba(0,0,0,.08);}
.wcb-team{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;padding:2px 0;}
.wcb-team.wcb-win{font-weight:800;}
.wcb-team.wcb-loss{color:var(--muted);}
.wcb-score{font-family:var(--font-mono);font-weight:800;}
.wcb-meta{font-family:var(--font-mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:6px;padding-top:6px;border-top:1px dashed var(--border);}
.wc-bracket-final .wc-bracket-match{border-color:var(--navy);background:var(--bg-alt);}
.france-morocco-report{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:26px;
  margin-top:24px;
}
.france-morocco-report h2{
  font-size:clamp(30px,4vw,46px);
  margin:8px 0 12px;
}
.france-morocco-report p{font-size:17px;color:var(--text);margin-bottom:14px;}
.ft-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#111827;
  color:#fff;
  border-radius:999px;
  padding:7px 12px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
@media(max-width:800px){
  .transfer-news-grid,.qf-grid{grid-template-columns:1fr;}
}
/* ===== World Cup story grid (Sky Sports-inspired) ===== */
.wc-story-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:20px;
}
.wc-story-card{
  background:var(--bg);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
}
.wc-story-card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.wc-story-card .wc-story-body{padding:14px 16px 18px;}
.wc-story-card .comp-tag{
  display:inline-block;
  background:var(--navy);
  color:#fff;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:3px 8px;
  border-radius:3px;
  margin-bottom:8px;
}
.wc-story-card h3{font-size:17px;line-height:1.3;margin-bottom:6px;}
.wc-story-card p{font-size:13px;color:var(--muted);line-height:1.4;}
@media(max-width:900px){
  .wc-story-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:620px){
  .wc-story-grid{grid-template-columns:1fr;}
}



/* ===== Match page tabs: Overview / Timeline / Lineups / Stats ===== */
.match-tabs{
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--border);
  margin:26px 0 0;
  overflow-x:auto;
}
.match-tabs button,
.match-tabs label{
  background:none;
  border:none;
  border-bottom:3px solid transparent;
  padding:12px 18px;
  font-size:14px;
  font-weight:700;
  font-family:var(--font-sans);
  color:var(--muted);
  cursor:pointer;
  white-space:nowrap;
  display:inline-block;
}
.match-tabs button:hover,
.match-tabs label:hover{color:var(--ink);}
.match-tabs button.active{color:var(--navy); border-bottom-color:var(--navy);}
.match-tab-panel{display:none; padding-top:22px;}
.match-tab-panel.active{display:block;}
.tab-radio{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;}
.tab-radio[value="overview"]:checked ~ .match-tabs label[for$="-overview"],
.tab-radio[value="timeline"]:checked ~ .match-tabs label[for$="-timeline"],
.tab-radio[value="lineups"]:checked ~ .match-tabs label[for$="-lineups"],
.tab-radio[value="stats"]:checked ~ .match-tabs label[for$="-stats"]{
  color:var(--navy);
  border-bottom-color:var(--navy);
}
.tab-radio[value="overview"]:checked ~ .match-tab-panel[data-tab="overview"],
.tab-radio[value="timeline"]:checked ~ .match-tab-panel[data-tab="timeline"],
.tab-radio[value="lineups"]:checked ~ .match-tab-panel[data-tab="lineups"],
.tab-radio[value="stats"]:checked ~ .match-tab-panel[data-tab="stats"]{
  display:block;
}
#europe-tabs-wrap .match-tabs{flex-wrap:wrap;}
#europe-tabs-wrap .tab-radio[value="pl"]:checked ~ .match-tabs label[for="t5-pl"],
#europe-tabs-wrap .tab-radio[value="laliga"]:checked ~ .match-tabs label[for="t5-laliga"],
#europe-tabs-wrap .tab-radio[value="seriea"]:checked ~ .match-tabs label[for="t5-seriea"],
#europe-tabs-wrap .tab-radio[value="bundesliga"]:checked ~ .match-tabs label[for="t5-bundesliga"],
#europe-tabs-wrap .tab-radio[value="ligue1"]:checked ~ .match-tabs label[for="t5-ligue1"],
#europe-tabs-wrap .tab-radio[value="ucl"]:checked ~ .match-tabs label[for="eu-ucl"],
#europe-tabs-wrap .tab-radio[value="uel"]:checked ~ .match-tabs label[for="eu-uel"],
#europe-tabs-wrap .tab-radio[value="uecl"]:checked ~ .match-tabs label[for="eu-uecl"]{
  color:var(--navy);
  border-bottom-color:var(--navy);
}
#europe-tabs-wrap .tab-radio[value="pl"]:checked ~ .match-tab-panel[data-tab="pl"],
#europe-tabs-wrap .tab-radio[value="laliga"]:checked ~ .match-tab-panel[data-tab="laliga"],
#europe-tabs-wrap .tab-radio[value="seriea"]:checked ~ .match-tab-panel[data-tab="seriea"],
#europe-tabs-wrap .tab-radio[value="bundesliga"]:checked ~ .match-tab-panel[data-tab="bundesliga"],
#europe-tabs-wrap .tab-radio[value="ligue1"]:checked ~ .match-tab-panel[data-tab="ligue1"],
#europe-tabs-wrap .tab-radio[value="ucl"]:checked ~ .match-tab-panel[data-tab="ucl"],
#europe-tabs-wrap .tab-radio[value="uel"]:checked ~ .match-tab-panel[data-tab="uel"],
#europe-tabs-wrap .tab-radio[value="uecl"]:checked ~ .match-tab-panel[data-tab="uecl"]{
  display:block;
}
#africa-tabs-wrap .match-tabs{flex-wrap:wrap;}
#africa-tabs-wrap .tab-radio[value="men"]:checked ~ .match-tabs label[for="af-men"],
#africa-tabs-wrap .tab-radio[value="women"]:checked ~ .match-tabs label[for="af-women"],
#africa-tabs-wrap .tab-radio[value="clubs"]:checked ~ .match-tabs label[for="af-clubs"]{
  color:var(--navy);
  border-bottom-color:var(--navy);
}
#africa-tabs-wrap .tab-radio[value="men"]:checked ~ .match-tab-panel[data-tab="men"],
#africa-tabs-wrap .tab-radio[value="women"]:checked ~ .match-tab-panel[data-tab="women"],
#africa-tabs-wrap .tab-radio[value="clubs"]:checked ~ .match-tab-panel[data-tab="clubs"]{
  display:block;
}
.tab-placeholder{color:var(--muted); font-size:15px; padding:10px 0 24px;}
.lineup-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.lineup-row{display:flex; gap:10px; font-size:14px; padding:8px 0; border-bottom:1px solid var(--border); align-items:baseline;}
.lineup-row:last-child{border-bottom:0;}
.lineup-pos{font-family:var(--font-mono); font-size:11px; color:var(--muted); text-transform:uppercase; width:34px; flex:0 0 auto;}
.match-stats-item{margin-bottom:16px;}
.match-stats-nums{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-mono); font-weight:700; font-size:15px; margin-bottom:6px;}
.match-stats-nums .stat-label{font-family:var(--font-sans); font-weight:700; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em;}
.match-stats-bar{display:flex; height:6px; border-radius:3px; overflow:hidden; background:var(--bg-alt);}
.match-stats-bar span{display:block; height:100%;}
@media(max-width:620px){
  .lineup-grid{grid-template-columns:1fr;}
}


/* ===== Dual-pitch lineup (home top, away mirrored below, facing each other) ===== */
.pitch-dual{
  background:linear-gradient(180deg, #2f7d4f 0%, #2a6f46 100%);
  border-radius:16px;
  padding:20px 14px 22px;
  position:relative;
  overflow:hidden;
}
.pitch-dual::before{
  content:"";
  position:absolute; inset:10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  pointer-events:none;
}
.pitch-dual .pitch-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; position:relative; z-index:1;
}
.pitch-dual .pitch-header.pitch-header-away{ margin-bottom:0; margin-top:16px; }
.pitch-dual .team-id{display:flex; align-items:center; gap:10px;}
.pitch-dual .flag-badge{font-size:24px; line-height:1;}
.pitch-dual h4{color:#fff; font-size:17px; font-weight:800; margin:0; font-family:var(--font-sans);}
.pitch-dual .pitch-formation{
  background:rgba(255,255,255,.16); color:#fff; font-weight:700; font-size:12px;
  padding:5px 12px; border-radius:20px; font-family:var(--font-mono); letter-spacing:.02em;
}
.pitch-goal-top{
  width:140px; height:36px; margin:0 auto 18px;
  border:1px solid rgba(255,255,255,.28); border-top:none;
  border-radius:0 0 8px 8px; position:relative; z-index:1;
}
.pitch-goal-bottom{
  width:140px; height:36px; margin:18px auto 0;
  border:1px solid rgba(255,255,255,.28); border-bottom:none;
  border-radius:8px 8px 0 0; position:relative; z-index:1;
}
.pitch-halfway{
  position:relative; height:1px; background:rgba(255,255,255,.28);
  margin:22px 6px; z-index:1;
}
.pitch-halfway::after{
  content:""; position:absolute; left:50%; top:50%;
  width:64px; height:64px; border:1px solid rgba(255,255,255,.28);
  border-radius:50%; transform:translate(-50%,-50%);
}
.pitch-sub-note{
  color:#ffd873; font-size:9.5px; font-weight:700; font-family:var(--font-mono);
  margin-top:2px; white-space:nowrap;
}

/* ===== Pitch-style lineup graphic ===== */
.pitch-wrap{
  background:linear-gradient(180deg, #2f7d4f 0%, #2a6f46 100%);
  border-radius:16px;
  padding:20px 14px 26px;
  position:relative;
  overflow:hidden;
}
.pitch-wrap::before{
  content:"";
  position:absolute; inset:10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  pointer-events:none;
}
.pitch-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; position:relative; z-index:1;
}
.pitch-header .team-id{display:flex; align-items:center; gap:10px;}
.pitch-header .flag-badge{font-size:24px; line-height:1;}
.pitch-header h4{color:#fff; font-size:17px; font-weight:800; margin:0; font-family:var(--font-sans);}
.pitch-formation{
  background:rgba(255,255,255,.16); color:#fff; font-weight:700; font-size:12px;
  padding:5px 12px; border-radius:20px; font-family:var(--font-mono); letter-spacing:.02em;
}
.pitch-goalbox{
  width:140px; height:44px; margin:0 auto 22px;
  border:1px solid rgba(255,255,255,.28); border-top:none;
  border-radius:0 0 8px 8px;
  position:relative; z-index:1;
}
.pitch-rows{display:flex; flex-direction:column; gap:24px; position:relative; z-index:1;}
.pitch-row{display:flex; justify-content:center; gap:22px; flex-wrap:wrap;}
.pitch-player{display:flex; flex-direction:column; align-items:center; width:76px;}
.pitch-avatar{
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.94);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:var(--navy);
  font-family:var(--font-mono);
  box-shadow:0 2px 6px rgba(0,0,0,.28);
  border:2px solid rgba(255,255,255,.5);
}
.pitch-avatar.is-code{font-size:11px; letter-spacing:.02em;}
.pitch-name{
  color:#fff; font-size:11.5px; font-weight:600; text-align:center;
  margin-top:8px; line-height:1.25;
}
.pitch-photo-wrap{position:relative; display:inline-flex;}
.pitch-rating{
  position:absolute; right:-5px; bottom:-5px;
  min-width:21px; height:21px; padding:0 4px;
  border-radius:11px; background:#9aa3b2; color:#fff;
  font-size:11px; font-weight:800; font-family:var(--font-mono);
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.pitch-rating.r-good{background:#1e9e5a;}
.pitch-rating.r-avg{background:#e0a52e;}
.pitch-rating.r-poor{background:#d5473f;}
@media(max-width:620px){
  .pitch-row{gap:14px;}
  .pitch-player{width:64px;}
  .pitch-avatar{width:40px; height:40px; font-size:12px;}
}
.byline{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-sans); font-size:11px; font-weight:400;
  color:var(--muted); margin:-6px 0 18px;
}
.byline::before{
  content:"";
  width:26px; height:26px; border-radius:50%;
  background:url('../avatar.png') center/cover no-repeat;
  border:1px solid var(--border);
  flex-shrink:0;
  order:-1;
}
.byline strong{color:inherit; font-weight:400;}
.byline-author, .byline-date{white-space:nowrap;}