/* Home v2: struktur 10 section per musim (IA Figma node 438:2). Sebelum = urutan HTML; Saat/Setelah disusun ulang js/season.js.
   Pola kartu sama dengan v3: permukaan --s1/--s2, sudut --r, tanpa bayangan. Warna tim lewat --tc. */

/* ---------- 1 hero: satu kalimat apa itu XSERIES + baris edisi ---------- */
.hx-tx .hx-lead{margin:16px 0 0;max-width:40ch;font-size:16px;line-height:1.5;color:rgba(255,255,255,.78);text-wrap:pretty}
.hx-tx .hx-ed{margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13.5px;color:#C9C9D0}
.hx-ed b{font:700 22px/1 var(--dh);letter-spacing:.02em;color:var(--pri)}
.hx-ed span{display:inline-flex;align-items:center;gap:14px}
.hx-ed span+span::before{content:"";width:1px;height:14px;background:var(--s4)}
.is-live .hx-ed,.is-after .hx-ed{display:none}

/* ---------- 2 xBall: fakta singkat di header ---------- */
.xf{display:flex;align-items:baseline;gap:16px;list-style:none;margin:0;padding:0;font-size:13px;color:var(--mut);white-space:nowrap}
.xf b{font:700 20px/1 var(--dh);color:var(--ink);margin-right:3px}
.xk-src.xbh-src{display:block;margin-top:4px}
.xbh-src svg.i{display:inline-block;vertical-align:-4px;margin-right:6px}
/* 6 kartu dalam satu baris (2 grup x 3) supaya section xBall tidak setinggi dua layar */
.xk-deck.xk-6.xbh{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.xbh .xk-row{gap:8px;padding-bottom:6px}
@container (max-width:720px){
  .xk-deck.xk-6.xbh{grid-template-columns:minmax(0,1fr);gap:14px}
  .xbh .xk-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:150px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(var(--pad) * -1);padding-right:var(--pad)}
  .xbh .xk-row::-webkit-scrollbar{display:none}
  .xbh .xk-c{scroll-snap-align:start}
}
@container (max-width:560px){ .xf{gap:12px;font-size:12px} .xf b{font-size:17px} }
/* kartu yang sedang aktif saat live (DUMMY: Golden Boy dipakai Grim di SF2) */
.xk-c.is-on{outline:2px solid #E5193F;outline-offset:3px}
.xk-c.is-on .xk-lg{visibility:hidden}
.xk-on{position:absolute;z-index:5;bottom:8cqi;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:99px;background:#E5193F;color:#fff;font:700 10.5px/1 var(--in-f);white-space:nowrap}
.xk-on i{width:6px;height:6px;border-radius:50%;background:#fff}

/* ---------- 3 empat tim: kartu tim (12 Nov: "malah ngehighlight playernya dibanding teamnya") ----------
   logo tim jadi bintang kartu (besar, warna penuh, glow warna tim); Ace & King turun jadi avatar kecil di bawah nama tim */
.tms4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
/* bentuk = kartu besar lain di home (.ev, .nw-lead): sudut potong --chamf-l, garis tepi = cincin --ring-l */
.tm-c{--tc:var(--pri);position:relative;display:flex;flex-direction:column;align-items:center;padding:56px 0 0;border-radius:0;clip-path:var(--chamf-l);overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 50% at 50% 40%,color-mix(in srgb,var(--tc) 50%,transparent),transparent 75%),linear-gradient(180deg,color-mix(in srgb,var(--tc) 26%,#0D0D10),#0D0D10 85%);
}
.tm-c::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--ln);clip-path:var(--ring-l);transition:background .2s}
.tm-c:hover::after{background:color-mix(in srgb,var(--tc) 75%,transparent)}
/* tekstur: logo yang sama, sangat besar dan samar, terpotong tepi kartu */
/* bayangan logo (diminta kembali 12 Nov): besar, samar, di atas, di belakang logo utama (12 Nov: "mending diatas") */
.tm-wm{position:absolute;z-index:-1;left:0;top:56px;width:100%;max-width:none;aspect-ratio:1;object-fit:contain;margin-top:-21%;opacity:.1;pointer-events:none}
/* kotak persegi yang sama untuk semua logo (perisai Grim/Nova lebih tinggi dari lingkaran Lynx/Fury), pusatnya = pusat logo utama: 56px + 29% lebar kartu */
.tm-ch,.tm-ru{position:absolute;z-index:3;left:16px;top:14px;display:inline-flex;align-items:center;gap:4px;padding:5px 9px 4px;border-radius:99px;font:700 12px/1 var(--dh);letter-spacing:.04em;text-transform:uppercase}
.tm-ch{background:var(--gold);color:#000}
.tm-ru{background:rgba(0,0,0,.55);color:#E4E4E8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tm-ch svg.i{width:11px;height:11px}
.tm-go{position:absolute;z-index:3;right:12px;top:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;opacity:.8;transition:background .2s,opacity .2s}
.tm-go svg.i{width:15px;height:15px}
.tm-c:hover .tm-go{background:var(--tc);opacity:1}
/* logo tim = bintang kartu */
.tm-lg{width:58%;margin:0;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 0 28px color-mix(in srgb,var(--tc) 70%,transparent)) drop-shadow(0 12px 22px rgba(0,0,0,.6));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.tm-c:hover .tm-lg{transform:scale(1.05) rotate(-3deg)}
.tm-ft{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;margin-top:auto;padding:16px 12px 20px}
.tm-n{display:block;max-width:100%;color:#fff;font:700 34px/.88 var(--dh);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Ace & King: avatar kecil + nama, di bawah nama tim */
/* label musim di atas Ace & King (12 Nov): sebelum "Confirmed for XS-3", saat "Playing XS-3 today", setelah "Played at XS-3" (js/season.js) */
.tm-k{margin:-6px 0 -2px;font-size:12px;font-weight:600;line-height:1.2;color:color-mix(in srgb,var(--tc) 55%,#fff)}
/* selalu ditumpuk, supaya nama tim di keempat kartu sejajar */
.tm-r{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:100%}
.tm-r>span{display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;color:#D6D6DC}
.tm-av{position:relative;flex:none;width:26px;height:26px}
.tm-av u{position:absolute;inset:0;overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--tc) 45%,#141418);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--tc) 70%,transparent)}
.tm-av img{position:absolute;left:50%;top:-4px;width:190%;max-width:none;transform:translateX(-50%)}
.tm-av i{position:absolute;right:-5px;bottom:-3px;display:grid;place-items:center;width:13px;height:14px;border-radius:3px;font:700 10px/1 var(--dh);font-style:normal;color:#fff;background:color-mix(in srgb,var(--tc) 70%,#000);box-shadow:0 0 0 1.5px #0D0D10}
@media (prefers-reduced-motion:reduce){ .tm-lg{transition:none} }
/* 12 Nov: skuad tim = tumpukan avatar seperti kartu jadwal (3 pemain + sisa), tanpa nama */
.tm-st{display:flex;align-items:center}
.tm-st i,.tm-st em{position:relative;flex:none;width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 2px #0D0D10}
.tm-st>*+*{margin-left:-7px}
.tm-st i{overflow:hidden;background:var(--pl-bg)}
.tm-st i img{position:absolute;left:50%;top:-1px;width:165%;max-width:none;transform:translateX(-50%)}
.tm-st i.tm-un{background:#2A2A2F}
.tm-st i.tm-un b{position:absolute;left:50%;top:2px;width:120%;height:220%;transform:translateX(-50%);background:#4a4a52;-webkit-mask:url(../img/players/cut/silhouette-card.webp) top center/100% auto no-repeat;mask:url(../img/players/cut/silhouette-card.webp) top center/100% auto no-repeat}
.tm-st em{display:grid;place-items:center;font:700 12px/1 Inter,system-ui,sans-serif;font-style:normal;color:#CFCFD4;background:#2A2A2F}
@container (max-width:420px){ .tm-st i,.tm-st em{width:28px;height:28px} .tm-st>*+*{margin-left:-6px} .tm-st em{font-size:11px} }
@container (max-width:860px){ .tms4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (max-width:420px){ .tms4{gap:8px} .tm-c{padding-top:42px} .tm-lg{width:64%} .tm-wm{top:42px;margin-top:-18%} .tm-ft{gap:10px;padding:12px 9px 14px} .tm-n{font-size:22px} .tm-r{gap:6px} .tm-r>span{font-size:12px} .tm-k{font-size:11px;margin:-4px 0 -1px} .tm-ch,.tm-ru{left:8px;top:8px;font-size:11px;padding:4px 7px 3px} .tm-go{right:8px;top:8px;width:24px;height:24px} }


/* ---------- 4 versi setelah: hasil XS-3 ---------- */

/* ---------- 6 perjalanan edisi ---------- */
/* 12 Nov: papan juara, satu baris per edisi, kolom sejajar: edisi | juara | final | panah ("kok masih jelek" untuk versi kartu) */
.jr{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;clip-path:var(--chamf-l)}
.je{--tc:var(--pri);min-width:0}
.je>a{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr) minmax(0,300px) 20px;align-items:center;gap:20px;padding:16px 22px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 14%,#18181C) 0,#18181C 46%);transition:background .2s}
.je>a:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 24%,#1C1C21) 0,#1C1C21 56%)}
.je-hd{display:flex;align-items:center;gap:14px;min-width:0}
.je-n{width:64px;flex:none;font:700 38px/.85 var(--dh);letter-spacing:.01em}
.je-w{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.2;color:#C9C9D0;min-width:0}
.je-w small{font-size:12px;color:var(--mut)}
.je-ch{display:flex;align-items:center;gap:14px;min-width:0}
.je-ch img{width:48px;height:48px;object-fit:contain;flex:none;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--tc) 60%,transparent))}
.je-ch>span:last-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.je-ch small{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--gold)}
.je-ch small .i{width:14px;height:14px}
.je-ch b{font:700 28px/.9 var(--dh);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.je-q{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--pri) 55%,transparent);font:700 24px/1 var(--dh);color:var(--pri)}
.je-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.je-f b{font:700 26px/1 var(--dh);color:#fff;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.je-f small{font-size:12.5px;line-height:1.3;color:var(--mut)}
.je-go{width:18px;height:18px;color:var(--mut);justify-self:end}
.je>a:hover .je-go{color:#fff}
.je.nx>a{background:linear-gradient(90deg,rgba(0,255,239,.12) 0,#18181C 46%)}
.je.nx .je-n{color:var(--pri)}
.je.nx .je-ch b{color:#fff}
.je.nx .je-ch small{color:var(--mut)}
.je.nx .je-ch.done small{color:var(--gold)}
@container (max-width:760px){
  .je>a{grid-template-columns:minmax(0,1fr) 18px;grid-template-areas:"hd go" "ch go" "f go";gap:12px;padding:14px 16px}
  .je-hd{grid-area:hd}.je-ch{grid-area:ch}.je-f{grid-area:f;flex-direction:row;align-items:baseline;gap:8px}.je-go{grid-area:go}
  .je-n{width:50px;font-size:30px}
  .je-ch b{font-size:24px}
  .je-f b{font-size:20px}
}

/* ---------- 8–9 keluarga GOS & partner ---------- */
/* 12 Nov: IP GOS jadi 3 kolom dengan bentuk kartu home (sudut potong + cincin), partner di bawahnya = strip v1 */
.fam{display:flex;flex-direction:column;gap:12px}
.fam-ip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fam-c{position:relative;display:flex;align-items:center;gap:14px;padding:16px 40px 16px 16px;background:#18181C;clip-path:var(--chamf-l);color:#C9C9D0;transition:background .2s}
.fam-c::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--ln);clip-path:var(--ring-l);transition:background .2s}
.fam-c:hover{background:#1E1E23;color:var(--ink)}
.fam-c:hover::after{background:rgba(255,255,255,.22)}
.fam-lg{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:var(--r-s);background:var(--s2)}
.fam-lg img{max-width:36px;max-height:32px;width:auto;height:auto}
.fam-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.fam-t b{font:700 22px/.95 var(--dh);text-transform:uppercase;color:var(--ink)}
.fam-t small{font-size:13px;line-height:1.4;color:var(--mut)}
.fam-c>svg.i{position:absolute;top:50%;right:16px;width:16px;height:16px;transform:translateY(-50%)}
/* strip partner (dari homepage v1): sel sama lebar, logo di tengah + peran, garis pemisah tipis */
.fam-pt{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:#18181C;clip-path:var(--chamf-l)}
.fam-pt::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--ln);clip-path:var(--ring-l)}
.fam-pt a{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 8px 24px;text-align:center;color:rgba(255,255,255,.72)}
.fam-pt a+a{border-left:1px solid var(--ln)}
.fam-pl{height:40px;display:grid;place-items:center}
.fam-pt img{display:block;width:auto;filter:brightness(0) invert(1);opacity:.8;transition:opacity .2s}
.fam-pt .gp{height:22px}.fam-pt .nv{height:36px}.fam-pt .aq{height:24px}.fam-pt .o8{height:36px}.fam-pt .tk{height:22px}
.fam-pt small{font-size:13px;line-height:1.3}
.fam-pt a:hover img{opacity:1}.fam-pt a:hover small{color:var(--ink)}
.fam-add .fam-pl{width:40px;border:1px dashed rgba(255,255,255,.3);border-radius:50%;color:var(--pri)}
.fam-add svg.i{width:20px;height:20px}
.fam-add small{color:var(--pri)}
@container (max-width:760px){
  .fam-ip{grid-template-columns:minmax(0,1fr)}
  .fam-c{padding:12px 40px 12px 12px}
  .fam-lg{width:48px;height:48px}
  .fam-t b{font-size:20px}
  .fam-pt{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fam-pt a{padding:20px 4px 16px;gap:10px}
  .fam-pt a:nth-child(3n+1){border-left:0}
  .fam-pt a:nth-child(n+4){border-top:1px solid var(--ln)}
  .fam-pt small{font-size:12px}
}

/* ---------- 10 kabari aku ---------- */
.kb{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:16px 20px;padding:20px;border-radius:var(--r);
  background:color-mix(in srgb,var(--pri) 7%,var(--s1));border:1px solid color-mix(in srgb,var(--pri) 30%,transparent)}
.kb-i{width:64px;height:64px}
.kb-tx h2{font:600 22px/1.2 var(--in-f);letter-spacing:-.01em}
.kb-p{margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--mut);max-width:38ch}
.kb-f{display:flex;flex-direction:column;gap:8px;min-width:0}
.kb-f .seg{width:220px}
.kb-row{display:flex;gap:8px}
.kb-row .field{flex:1 1 auto}
.kb-row .btn{flex:none}
.kb-f .done{font-size:14px;color:var(--pri);padding:10px 0}
@container (max-width:860px){ .kb{grid-template-columns:auto minmax(0,1fr)} .kb-f{grid-column:1/-1} }
@container (max-width:460px){ .kb{padding:16px;gap:14px} .kb-i{width:48px;height:48px} .kb-tx h2{font-size:19px} .kb-row{flex-direction:column} .kb-row .field{flex:none;width:100%} .kb-f .seg{width:100%} }
/* strip Kabari aku di kolom stats disembunyikan saat section 10 terlihat (season.js), supaya tidak dobel */
.nl-dock{transition:opacity .2s,transform .2s}
.nl-dock.is-quiet{opacity:0;transform:translateY(12px);pointer-events:none}

/* ---------- setelah musim: tidak ada tombol tiket, slot reveal pemain hilang ---------- */
.is-after #pemain .xt.nx{display:none}
.is-after [data-season-hide="after"]{display:none!important}


/* ---------- 10 kabari aku, v2 (12 Nov): poster dua lampu ---------- */
#kabar .kb{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:20px 28px;
  padding:28px 32px 28px 24px;border:0;border-radius:0;clip-path:var(--chamf-l);background:#0B1516;overflow:hidden}
#kabar .kb::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:rgba(255,255,255,.12);clip-path:var(--ring-l)}
.kb-lt{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(40% 120% at 6% 100%,rgba(0,255,239,.42),rgba(0,210,196,.12) 50%,transparent 78%),
  radial-gradient(36% 110% at 100% 0%,rgba(236,42,50,.38),rgba(236,42,50,.08) 55%,transparent 80%),
  linear-gradient(90deg,#073436,#0A1E20 45%,#1A0D10)}
.kb-lt::after{content:"";position:absolute;inset:0;opacity:.5;background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.025) 22px 23px)}
#kabar .kb-i{width:112px;height:112px;margin:-18px -4px -18px 0;transform:rotate(-12deg);filter:drop-shadow(-6px 0 14px rgba(0,255,239,.45)) drop-shadow(0 14px 18px rgba(0,0,0,.55))}
#kabar .kb-tx h2{font:700 44px/.9 var(--dh);text-transform:uppercase;font-style:italic;font-synthesis:style;letter-spacing:.005em;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.5)}
#kabar .kb-p{margin-top:10px;font-size:14px;line-height:1.45;color:#C9D4D4;max-width:36ch}
#kabar .kb-f{gap:10px}
#kabar .kb-f .seg{width:auto;align-self:flex-start;display:flex;gap:4px;padding:0;background:none;border-radius:0}
#kabar .kb-f .seg button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:#AEB8B8;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
#kabar .kb-f .seg button .i{width:15px;height:15px}
#kabar .kb-f .seg button[aria-pressed=true]{color:#00140F;background:var(--pri);box-shadow:none}
#kabar .kb-row{gap:0;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);clip-path:var(--chamf-s, none)}
#kabar .kb-row .field{height:52px;border:0;border-radius:0;background:none;padding:0 16px;font-size:15px}
#kabar .kb-row .field:focus{box-shadow:inset 0 -2px 0 var(--pri)}
#kabar .kb-row .btn{height:52px;padding:0 22px;border-radius:0;font:700 20px/1 var(--dh);text-transform:uppercase;letter-spacing:.01em}
#kabar .kb-n{font-size:12px;color:#8C9797}
#kabar .kb-f .done{font:700 22px/1.1 var(--dh);text-transform:uppercase;color:var(--pri);padding:6px 0}
@container (max-width:860px){
  #kabar .kb{grid-template-columns:auto minmax(0,1fr);padding:24px}
  #kabar .kb-f{grid-column:1/-1}
}
@container (max-width:460px){
  #kabar .kb{gap:16px;padding:22px 18px 20px}
  #kabar .kb-i{width:76px;height:76px;margin:-10px -6px -10px -4px}
  #kabar .kb-tx h2{font-size:34px}
  #kabar .kb-p{font-size:13px;margin-top:6px}
  #kabar .kb-f .seg{align-self:stretch}
  #kabar .kb-f .seg button{flex:1;justify-content:center}
  #kabar .kb-row{flex-direction:column;background:none;box-shadow:none;gap:8px}
  #kabar .kb-row .field{width:100%;flex:none;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
  #kabar .kb-row .btn{width:100%}
}

/* 12 Nov ("height card kurang gede dikit"): setelah baris avatar dihapus, kartu tim dibuat lebih tinggi (3:4), nama tetap di dasar */
.tm-c{aspect-ratio:3/4}
/* 12 Nov ("logonya kurang center"): nama dipaku di dasar kartu, logo + bayangannya di tengah ruang di atas nama
   ruang logo = 56px (atas) s/d 72px (tinggi blok nama) → pusat = 50% - 8px */
.tm-c{justify-content:center;padding:56px 0 72px}
.tm-ft{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px 12px 26px}
.tm-wm{top:calc(50% - 8px);margin-top:0;transform:translateY(-50%)}
@container (max-width:420px){
  .tm-c{padding:42px 0 46px} .tm-ft{padding:12px 9px 15px}
  .tm-wm{top:calc(50% - 2px);margin-top:0}
}

/* 12 Nov ("design badge kok beda dengan yg lain", "masih beda dengan ini"): badge juara = bentuk & huruf badge status tiket "On sale" (jajaran genjang, Inter 700 12px) */
.tm-ch,.tm-ru{--sk:6px;--cr:1.5px;height:22px;padding:0 12px;gap:5px;border-radius:0;font:700 12px/1 var(--in-f);letter-spacing:0;text-transform:none;
  clip-path:polygon(var(--sk) 0,100% 0,calc(100% - var(--sk)) 100%,0 100%)}
@supports (clip-path:shape(from 0 0,line to 1px 1px,close)){
  .tm-ch,.tm-ru{clip-path:shape(from calc(var(--sk) + var(--cr)) 0,line to calc(100% - var(--cr)) 0,curve to calc(100% - var(--cr) * .2867) var(--cr) with 100% 0,line to calc(100% - var(--sk) + var(--cr) * .2867) calc(100% - var(--cr)),curve to calc(100% - var(--sk) - var(--cr)) 100% with calc(100% - var(--sk)) 100%,line to var(--cr) 100%,curve to calc(var(--cr) * .2867) calc(100% - var(--cr)) with 0 100%,line to calc(var(--sk) - var(--cr) * .2867) var(--cr),curve to calc(var(--sk) + var(--cr)) 0 with var(--sk) 0,close)}}
.tm-ru{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.6)}

/* 12 Nov: kartu Shop GOS jadi kartu keempat, IP + shop disusun 2×2 */
.fam-ip{grid-template-columns:repeat(2,minmax(0,1fr))}
.fam-shop .fam-lg img{max-width:44px;max-height:44px}
@container (max-width:760px){ .fam-ip{grid-template-columns:minmax(0,1fr)} }

/* ---------- 4b hasil XS-3, opsi A (12 Nov, "coba pake ini"): poster juara + 3 laga bertumpuk ---------- */
#hasil .rs-g{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px}
#hasil .rs-p,#hasil .rs-ls a{position:relative;isolation:isolate;color:#fff;clip-path:var(--chamf-l)}
#hasil .rs-p::after,#hasil .rs-ls a::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--ln);clip-path:var(--ring-l)}
#hasil .rs-p:hover::after,#hasil .rs-ls a:hover::after{background:rgba(255,255,255,.22)}
#hasil .rs-p{min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;overflow:hidden;
  background:radial-gradient(60% 70% at 78% 40%,color-mix(in srgb,var(--tc) 55%,transparent),transparent 72%),
    linear-gradient(160deg,color-mix(in srgb,var(--tc) 30%,#0B0D12),#0A0A0D 70%)}
#hasil .rs-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.22;mix-blend-mode:luminosity}
#hasil .rs-p::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,6,9,.95) 6%,rgba(6,6,9,.35) 55%,transparent),
  repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.025) 22px 23px)}
#hasil .rs-lg{position:absolute;z-index:-1;right:-4%;top:6%;width:56%;aspect-ratio:1;object-fit:contain;
  filter:drop-shadow(0 0 40px color-mix(in srgb,var(--tc) 80%,transparent)) drop-shadow(0 18px 30px rgba(0,0,0,.6))}
#hasil .rs-wm{position:absolute;z-index:-1;left:-6%;top:-14%;font:700 300px/.8 var(--dh);font-style:italic;font-synthesis:style;color:rgba(255,255,255,.04)}
#hasil .rs-tx{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:62%}
#hasil .rs-nm{display:block;font:700 88px/.82 var(--dh);font-style:italic;font-synthesis:style;text-transform:uppercase;text-shadow:0 6px 30px rgba(0,0,0,.5)}
#hasil .rs-fn{display:flex;align-items:center;gap:10px;font-size:14px;color:#C9D4DC}
#hasil .rs-fn img{width:22px;height:22px;object-fit:contain;opacity:.7}
#hasil .rs-fn b{font:700 22px/1 var(--dh);color:#fff}
#hasil .rs-ft{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:6px}
#hasil .rs-bd{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 12px;font:700 12px/1 var(--in-f);color:#000;background:var(--gold);
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);white-space:nowrap}
#hasil .rs-bd svg.i{width:13px;height:13px}
#hasil .rs-bd.dk{color:#fff;background:rgba(0,0,0,.6)}
#hasil .rs-cta{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;font:700 18px/1 var(--dh);text-transform:uppercase;letter-spacing:.01em;
  color:#000;background:var(--pri);clip-path:var(--chamf-s);white-space:nowrap}
#hasil .rs-cta svg.i{width:14px;height:14px}
#hasil .rs-ls{display:flex;flex-direction:column;gap:12px}
#hasil .rs-ls a{flex:1;display:flex;flex-direction:column;justify-content:center;padding:16px 20px 16px 18px;background:#18181C}
#hasil .rs-mk{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;font-size:12.5px;color:#9A9AA3}
#hasil .rs-mk em{font-style:normal;color:#6A6A73}
#hasil .rs-sr{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px 12px}
#hasil .rs-sr img{width:28px;height:28px;object-fit:contain}
#hasil .rs-sr span{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hasil .rs-sr b{font:700 26px/1 var(--dh);font-variant-numeric:tabular-nums;text-align:right;min-width:2ch}
#hasil .rs-sr .lo{color:#8A8A93;font-weight:500}
#hasil .rs-sr img.lo{opacity:.5}
#hasil .rs-sr b.lo{color:#6A6A73}
@container (max-width:760px){
  #hasil .rs-g{grid-template-columns:minmax(0,1fr)}
  #hasil .rs-p{min-height:380px;padding:22px}
  #hasil .rs-tx{max-width:none}
  #hasil .rs-nm{font-size:68px}
  #hasil .rs-lg{width:62%;right:-8%;top:2%}
}
/* hasil opsi A di lebar tengah: logo lebih kecil & naik, baris "Beat … in the final" tetap satu baris */
#hasil .rs-fn{white-space:nowrap}
@container (min-width:761px) and (max-width:900px){
  #hasil .rs-tx{max-width:72%}
  #hasil .rs-lg{width:46%;top:3%}
  #hasil .rs-nm{font-size:76px}
}
/* 12 Nov ("ini dibikin 1 line"): subjudul hero satu baris di layar lebar, boleh melewati kolom teks sedikit */
@media (min-width:1024px){ .hx-tx .hx-lead{max-width:none;width:max-content;white-space:nowrap} }
/* 12 Nov ("dibikin secondary button"): Watch the final = tombol garis seperti "How xBall works" di hero */
#hasil .rs-cta{position:relative;color:#fff;background:rgba(0,0,0,.35)}
#hasil .rs-cta::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(255,255,255,.28);clip-path:var(--chamf-o)}
#hasil .rs-p:hover .rs-cta::after{background:rgba(255,255,255,.5)}
/* 12 Nov: state Pra-musim (?state=pre) */
.pst a{white-space:nowrap}
@media (min-width:861px){ .pst{width:74px;padding:6px 4px} .pst a{font-size:10.5px;letter-spacing:-.01em} }
[data-season="pre"] .evp-hd a{color:var(--pri);text-decoration:underline;text-underline-offset:3px}
[data-season="pre"] .evp-hd a:hover{color:#fff}

/* 12 Nov: ≤1180 panel stats dipindah ke bawah hero (js/season.js), lebar sama dengan section lain */
@media (max-width:1180px){
  .app > main > .stage.in-info{margin:24px 0 0;position:relative;top:auto;height:auto;min-height:0}
}
/* 12 Nov: pra-musim tanpa tanggal, kalender dibuang jadi tombol "Soon" selebar kartu; tautan presale tidak patah */
[data-season="pre"] #laga .ev-b{grid-template-columns:1fr}
[data-season="pre"] .evp-hd a{white-space:nowrap}