/* ===========================================================
   LIQUID GLASS — permukaan lut sinar + aura warna bergerak
   Dimuatkan selepas theme-c.css.
   Menghormati prefers-reduced-motion.
   =========================================================== */

html{background:var(--bg)}
body{background:transparent}

/* ---------- susunan lapisan ----------
   Aura duduk pada z-index 0; semua kandungan dinaikkan ke z-index 1
   supaya ia sentiasa berada di atas aura, tidak kira susunan DOM. */
body > header, body > section, body > footer, body > main,
body > div:not(.lg-bg):not(.lg-grain){ position:relative; z-index:1 }
#sg-nav{ z-index:80 }

/* ---------- aura warna bergerak di belakang segalanya ---------- */
.lg-bg{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.lg-bg i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(80px); opacity:.30; will-change:transform;
}
/* tabir putih nipis — warna kekal hidup, teks kekal jelas dibaca */
.lg-bg::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(244,245,247,.34);
}
.lg-bg i:nth-child(1){
  width:46vw; height:46vw; left:-8vw; top:-6vw;
  background:radial-gradient(circle at 40% 40%, #FF8A63, #E23D2C 60%, transparent 72%);
  animation:lg-a 26s ease-in-out infinite;
}
.lg-bg i:nth-child(2){
  width:40vw; height:40vw; right:-6vw; top:12vh;
  background:radial-gradient(circle at 50% 50%, #6EE7C4, #0F9D6E 60%, transparent 72%);
  animation:lg-b 32s ease-in-out infinite;
}
.lg-bg i:nth-child(3){
  width:52vw; height:52vw; left:22vw; bottom:-18vw;
  background:radial-gradient(circle at 50% 50%, #FFD98A, #D99A16 58%, transparent 72%);
  animation:lg-c 38s ease-in-out infinite;
}
.lg-bg i:nth-child(4){
  width:34vw; height:34vw; right:16vw; bottom:6vh;
  background:radial-gradient(circle at 50% 50%, #A5C8FF, #5B8DEF 58%, transparent 72%);
  animation:lg-d 30s ease-in-out infinite;
}
@keyframes lg-a{0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(14vw,8vh,0) scale(1.16)}
  66%{transform:translate3d(4vw,20vh,0) scale(.9)}}
@keyframes lg-b{0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(-16vw,14vh,0) scale(1.2)}
  70%{transform:translate3d(-6vw,-8vh,0) scale(.92)}}
@keyframes lg-c{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-14vw,-12vh,0) scale(1.14)}}
@keyframes lg-d{0%,100%{transform:translate3d(0,0,0) scale(1)}
  45%{transform:translate3d(10vw,-16vh,0) scale(.88)}
  75%{transform:translate3d(-8vw,-4vh,0) scale(1.12)}}

/* butir halus supaya kaca tidak terlalu licin */
.lg-grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.030;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- permukaan kaca ---------- */
.card, .fixture, .table-wrap, .stat, .cd-cell, .ev,
.gal figure, .empty, .filters button, .sec .btn, .page-head .btn{
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 10px 30px -18px rgba(12,22,45,.42);
}
.stat, .card, .table-wrap{background:rgba(255,255,255,.62)}
/* kad kontinjen simpan warnanya sendiri — jangan ditimpa */
.card.ct-tint{background:inherit}
.card.ct-tint:hover{background:inherit; filter:saturate(1.14) brightness(1.03)}
.fixture{background:rgba(255,255,255,.55)}
.fixture.is-live{
  background:linear-gradient(180deg, rgba(226,61,44,.12), rgba(255,255,255,.58));
  border-color:rgba(226,61,44,.36);
}

.card:hover, .ev:hover, .fixture:hover{
  background:rgba(255,255,255,.72);
  border-color:rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 18px 42px -20px rgba(12,22,45,.5);
}

/* kilauan spekular yang menyapu apabila dilalui tetikus */
.card, .ev, .stat, .fixture{position:relative; overflow:hidden; isolation:isolate}
.card::after, .ev::after, .stat::after, .fixture::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg,
    transparent 30%, rgba(255,255,255,.65) 45%, rgba(255,255,255,.22) 55%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .85s cubic-bezier(.22,.7,.25,1);
}
.card:hover::after, .ev:hover::after, .stat:hover::after, .fixture:hover::after{
  transform:translateX(120%);
}
/* .stat sudah ada ::after untuk aura — pulihkan */
.stat::after{background:linear-gradient(115deg,
  transparent 30%, rgba(255,255,255,.6) 45%, rgba(255,255,255,.2) 55%, transparent 70%);
  border-radius:0; width:auto; height:auto; right:auto; top:auto; opacity:1}

/* jadual & baris */
table.sg th{background:rgba(255,255,255,.42); backdrop-filter:blur(8px)}
table.sg td{border-bottom-color:rgba(12,22,45,.07)}
table.sg tbody tr:hover{background:rgba(255,255,255,.5)}

/* lencana kontinjen — kaca berwarna */
.chip{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 6px rgba(0,0,0,.18),
    0 4px 10px -6px rgba(12,22,45,.6);
}

/* navbar kaca */
#sg-nav{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(20px) saturate(190%);
  backdrop-filter:blur(20px) saturate(190%);
  border-bottom:1px solid rgba(255,255,255,.6);
}
#sg-nav.solid{background:rgba(255,255,255,.68)}
.nav-links a.is-active{box-shadow:0 6px 16px -8px rgba(12,22,45,.7)}
.lang{background:rgba(255,255,255,.4); backdrop-filter:blur(8px)}

/* penapis aktif kekal pekat */
.filters button.on{
  background:var(--txt); color:#fff; border-color:var(--txt);
  backdrop-filter:none; box-shadow:0 8px 20px -12px rgba(12,22,45,.8);
}

/* butang utama kekal pekat */
.btn-primary, .sec .btn-primary, .page-head .btn-primary{
  background:var(--accent); border-color:rgba(255,255,255,.35);
  backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 12px 28px -14px var(--accent);
}

/* seksyen berselang — biar aura menembusi */
.sec-alt{background:linear-gradient(180deg,
  transparent, rgba(255,255,255,.42) 12%, rgba(255,255,255,.42) 88%, transparent)}

/* hero bawah bercantum dengan aura */
.hero-vig{
  background:
    radial-gradient(115% 88% at 50% 40%, rgba(6,9,16,.06) 18%, rgba(6,9,16,.58) 62%, rgba(6,9,16,.94) 100%),
    linear-gradient(to bottom,
      rgba(6,9,16,.76) 0%, rgba(6,9,16,.22) 24%, rgba(6,9,16,.30) 58%,
      rgba(6,9,16,.86) 84%, var(--bg) 100%);
}

/* ---------- hormati keutamaan kurang gerakan ---------- */
@media (prefers-reduced-motion: reduce){
  .lg-bg i{animation:none}
  .card::after, .ev::after, .stat::after, .fixture::after{display:none}
}

/* peranti tanpa backdrop-filter → pekat sedikit supaya kekal terbaca */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .card, .fixture, .table-wrap, .stat, .cd-cell, .ev,
  .gal figure, .empty, .filters button, .sec .btn, .page-head .btn{
    background:rgba(255,255,255,.94);
  }
  #sg-nav{background:rgba(255,255,255,.96)}
}

/* ===========================================================
   PRESTASI TELEFON
   backdrop-filter pada banyak elemen ialah punca utama skrol
   tersekat pada telefon. Pada peranti sentuh / skrin kecil kita
   tukar kepada permukaan legap separa — rupanya hampir sama,
   tetapi skrolnya lancar.
   =========================================================== */
@media (max-width:900px), (hover: none) and (pointer: coarse){
  .card, .table-wrap, .stat, .cd-cell, .ev, .gal figure, .empty,
  .filters button, .sec .btn, .page-head .btn, .res-card, .pod{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:rgba(255,255,255,.88);
  }
  .card.ct-tint{background:inherit}
  table.sg th{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(255,255,255,.9)}
  .lang{-webkit-backdrop-filter:none; backdrop-filter:none}

  /* navbar sahaja kekal berkabur — satu lapisan, kecil */
  #sg-nav{
    -webkit-backdrop-filter:blur(12px) saturate(150%);
    backdrop-filter:blur(12px) saturate(150%);
    background:rgba(255,255,255,.78);
  }

  /* dua aura sahaja, kabur lebih rendah */
  .lg-bg i:nth-child(3), .lg-bg i:nth-child(4){display:none}
  .lg-bg i{filter:blur(46px); opacity:.34}
  .lg-grain{display:none}

  /* kilauan spekular tiada makna tanpa tetikus — buang kos komposit */
  .card::after, .ev::after, .stat::after{display:none}
}

/* kad keputusan akhir — permukaan kaca */
.res-card{position:relative; overflow:hidden; isolation:isolate}
.pod{background-color:rgba(255,255,255,.42); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}