/* BolaPrediksi Global Background — Football FIFA poster full-page */
:root{
  --bp-bg-poster: url("/assets/bg/hero-mobile.webp");
}
@media (min-width: 769px){
  :root{ --bp-bg-poster: url("/assets/bg/hero-desktop.webp"); }
}

/* Apply to html (more universal than body, and survives body overrides) */
html{
  background-color: #0F172A;
  background-image:
    linear-gradient(180deg, rgba(15,23,42,0.78) 0%, rgba(15,23,42,0.82) 40%, rgba(15,23,42,0.88) 80%, rgba(15,23,42,0.95) 100%),
    var(--bp-bg-poster) !important;
  background-attachment: fixed, fixed !important;
  background-size: cover, cover !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
  min-height: 100vh;
}

/* Force body transparent so html bg shows through everywhere */
body{
  background: transparent !important;
  background-color: transparent !important;
}

/* Mobile: scroll attachment for performance, slight darker overlay */
@media (max-width: 768px){
  html{
    background-attachment: scroll, scroll !important;
    background-image:
      linear-gradient(180deg, rgba(15,23,42,0.80) 0%, rgba(15,23,42,0.86) 50%, rgba(15,23,42,0.94) 100%),
      var(--bp-bg-poster) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  html{ background-attachment: scroll, scroll !important; }
}

/* Ensure sections that originally had solid bg become semi-transparent so global bg shows through */
section, .wrap, main, article, .container, aside {
  background-color: transparent;
}

/* Homepage hero section: keep its own bg but lighter overlay so poster shows nicely */
.hero{
  background: 
    linear-gradient(135deg, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0.40) 50%, rgba(15,23,42,0.65) 100%) !important;
  background-attachment: scroll !important;
}

/* Cards/widgets keep solid bg for readability */
.match, .league, .card, .hero-card, .hero-stat, table, .league-group, .stat-row,
[class*="card"], [class*="widget"]:not(#bp-livescore-widget) {
  background-color: rgba(30,41,59, 0.92);
}