/* xBall: kartu cukup judul + satu baris; aturannya diperagakan oleh animasi kecil di kartu (12 Nov, "jangan kebanyakan text").
   Kartu bergiliran main sendiri saat terlihat; hover, fokus atau tap memainkan kartu itu. Teks aturan lengkap tetap ada untuk pembaca layar. */
.xbh .xk-c{cursor:pointer;-webkit-tap-highlight-color:transparent}
.xbh .xk-c:focus-visible{outline:2px solid #fff;outline-offset:3px}
.xbh .xk-c .xk-x{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.xbh .xk-c .xk-art{position:relative;display:grid;place-items:center;width:78cqi;height:60cqi;margin:5cqi 0 2cqi;flex:none}
.xbh .xk-c .xk-ic{width:48cqi;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.xbh .xk-c.is-play .xk-ic{opacity:0;transform:scale(.8)}
.xbh .xk-cap{margin:auto 0 0;padding:0 7cqi;font:800 10.5cqi/1 var(--dh);text-transform:uppercase;letter-spacing:.02em;color:#fff;text-shadow:0 1px 3px #000}
.xbh .xk-c .xk-lg{margin:4cqi 0 9cqi}
/* jenis kartu di dalam kartu (pengganti label grup di atas deck) */
.xbh .xk-ty{margin:11.5cqi 0 0;font:800 7.4cqi/1 var(--dh);text-transform:uppercase;letter-spacing:.12em;color:#fff;opacity:.72}
.xbh .xk-c .xk-t{margin-top:2.4cqi}
.xbh .xk-c .xk-art{margin-top:3cqi}

/* panggung demo */
.xp{position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none}
.xk-c.is-play .xp{opacity:1;transition-delay:.12s}
.xp-b{position:absolute;inset:0 0 auto;height:16%;display:grid;place-items:center}
.xp-b b{grid-area:1/1;font:800 10cqi/1 var(--dh);letter-spacing:.04em;text-transform:uppercase;color:#fff;white-space:nowrap}
.xp-b .z{opacity:0;color:var(--c);text-shadow:0 0 3cqi color-mix(in srgb,var(--c) 60%,transparent)}
.xp-f{position:absolute;inset:22% 0 0;border:.55cqi solid rgba(255,255,255,.3);border-radius:2.4cqi;
  background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)) 50% 0/.55cqi 100% no-repeat,radial-gradient(circle at 50% 50%,transparent 6.5cqi,rgba(255,255,255,.3) 6.8cqi,transparent 7.3cqi),rgba(0,0,0,.55)}
.xp-f::before,.xp-f::after{content:"";position:absolute;top:36%;height:28%;width:2.2cqi;border:.55cqi solid rgba(255,255,255,.45)}
.xp-f::before{left:-2.4cqi;border-right:0}
.xp-f::after{right:-2.4cqi;border-left:0}
.xp-f i{position:absolute;left:var(--x);top:var(--y);width:7cqi;height:7cqi;margin:-3.5cqi 0 0 -3.5cqi;border-radius:50%}
.xp-f .xm-us{background:var(--c);box-shadow:0 0 2.6cqi color-mix(in srgb,var(--c) 65%,transparent)}
.xp-f .xm-op{background:rgba(255,255,255,.62)}
.xp-f .xm-v{background:var(--gold);box-shadow:0 0 0 .8cqi rgba(0,0,0,.6),0 0 4cqi var(--gold)}
.xp-f .xm-sub{background:transparent;box-shadow:inset 0 0 0 1.1cqi var(--c),0 0 2.6cqi color-mix(in srgb,var(--c) 50%,transparent);opacity:0}
.xp-f .xm-nw{opacity:0}
.xp-f .xm-nw::after{content:"";position:absolute;inset:-2.4cqi;border-radius:50%;border:.6cqi solid var(--c);opacity:0}
.xp-f .xm-ball{position:absolute;left:42%;top:38%;width:4cqi;height:4cqi;margin:-2cqi 0 0 -2cqi;border-radius:50%;background:#fff;box-shadow:0 0 2cqi #fff;opacity:0}
.xp-pop{position:absolute;right:1cqi;top:16%;padding:1.6cqi 3cqi;border-radius:1.6cqi;background:var(--c);color:#000;font:800 11cqi/1 var(--dh);letter-spacing:.02em;opacity:0;transform:scale(.4) rotate(-8deg);box-shadow:0 0 5cqi color-mix(in srgb,var(--c) 70%,transparent)}
.xp-pop.gd{background:var(--gold);box-shadow:0 0 5cqi color-mix(in srgb,var(--gold) 70%,transparent)}

/* jam (The Last Breath) */
.xp-clk{position:absolute;inset:22% 4% 0;display:grid;place-items:center;border:.55cqi solid rgba(255,255,255,.3);border-radius:3cqi;background:rgba(0,0,0,.6)}
.xp-clk small{position:absolute;left:4cqi;top:3cqi;font:800 6cqi/1 var(--dh);color:rgba(255,255,255,.6)}
.xp-clk b{font:800 19cqi/1 var(--dh);font-variant-numeric:tabular-nums;letter-spacing:.03em;color:rgba(255,255,255,.55);transition:color .3s,text-shadow .3s}
.xp-clk.on b{color:var(--c);text-shadow:0 0 5cqi color-mix(in srgb,var(--c) 65%,transparent)}

/* nomor punggung (The Chosen Ones) */
.xp-sh{position:absolute;inset:22% 0 0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:2cqi;place-items:center}
.xp-sh span{position:relative;display:grid;place-items:center;width:13cqi;height:13cqi;padding-top:1.6cqi;background:var(--c);color:#000;font:800 6cqi/1 var(--dh);
  clip-path:polygon(30% 0,38% 6%,62% 6%,70% 0,100% 18%,90% 40%,80% 34%,80% 100%,20% 100%,20% 34%,10% 40%,0 18%)}
.xp-sh .xm-k{z-index:1}

/* animasi: hanya jalan saat kartu .is-play (dipasang ulang tiap putaran) */
.is-play .xp-b .a{animation:xpA 3.4s both}
.is-play .xp-b .z{animation:xpZ 3.4s both}
@keyframes xpA{0%,48%{opacity:1;transform:none}56%,100%{opacity:0;transform:translateY(-30%)}}
@keyframes xpZ{0%,50%{opacity:0;transform:scale(1.6)}60%,100%{opacity:1;transform:none}}
.is-play .xp-pop{animation:xpPop 3.4s both}
@keyframes xpPop{0%,50%{opacity:0;transform:scale(.4) rotate(-8deg)}58%{opacity:1;transform:scale(1.15) rotate(-8deg)}64%,100%{opacity:1;transform:scale(1) rotate(-8deg)}}
/* Golden Boy: rompi emas menembak, gol dihitung dua */
.is-play .xp-f .xm-ball{animation:xpBall 3.4s both}
@keyframes xpBall{0%,14%{opacity:0;left:42%;top:38%}18%{opacity:1;left:42%;top:38%}46%{opacity:1;left:101%;top:50%}52%,100%{opacity:0;left:101%;top:50%}}
.is-play .xp-f.gb::after{animation:xpNet 3.4s both}
@keyframes xpNet{0%,44%{border-color:rgba(255,255,255,.45);box-shadow:none}50%,70%{border-color:var(--gold);box-shadow:0 0 4cqi var(--gold)}100%{border-color:rgba(255,255,255,.45);box-shadow:none}}
/* X-Man: pemain ke-6 masuk */
.is-play .xp-f .xm-nw{animation:xpIn 3.4s both}
.is-play .xp-f .xm-nw::after{animation:xpRing 3.4s both}
@keyframes xpIn{0%,26%{opacity:0;transform:scale(0)}38%{opacity:1;transform:scale(1.35)}46%,100%{opacity:1;transform:none}}
@keyframes xpRing{0%,34%{opacity:0;transform:scale(.6)}40%{opacity:1}60%,100%{opacity:0;transform:scale(1.9)}}
/* Reset All Player: starter keluar ke bangku, cadangan masuk */
.is-play .xp-f .xm-st{animation:xpOut 3.4s both}
.is-play .xp-f .xm-sub{animation:xpSub 3.4s both}
@keyframes xpOut{0%,14%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(160%)}}
@keyframes xpSub{0%,32%{opacity:0;transform:translateY(160%)}50%,100%{opacity:1;transform:none}}
/* Royal Rumble: dua pemain lapangan tiap tim keluar, sisanya melebar */
.is-play .xp-f .xm-x{animation:xpGone 3.4s both}
.is-play .xp-f .xm-mv{animation:xpMv 3.4s both}
@keyframes xpGone{0%,14%{opacity:1;transform:none}32%,100%{opacity:0;transform:scale(0)}}
@keyframes xpMv{0%,28%{left:var(--x);top:var(--y)}50%,100%{left:var(--x2);top:var(--y2)}}
/* The Chosen Ones: 5 nomor gugur, satu dipilih fans */
.is-play .xp-sh .xm-x{animation:xpDim 3.4s both}
.is-play .xp-sh .xm-k{animation:xpPick 3.4s both}
@keyframes xpDim{0%,16%{opacity:1;filter:none}36%,100%{opacity:.16;filter:grayscale(1)}}
@keyframes xpPick{0%,50%{transform:none;filter:none}60%{transform:scale(1.3)}68%,100%{transform:scale(1.18);filter:drop-shadow(0 0 2.4cqi #fff)}}

@media (prefers-reduced-motion:reduce){ .xk-c.is-play .xp *,.xk-c.is-play .xp *::after,.xk-c.is-play .xp-f::after{animation-duration:1ms!important} .xbh .xk-c .xk-ic{transition:none} }
/* jarak antar kartu sama semua, termasuk antara X-Card terakhir dan President Card pertama */
.xk-deck.xk-6.xbh{column-gap:12px}
.xbh .xk-row{gap:12px}

/* ---------- 12 Nov: kartu dibalik (flip) ----------
   .xk-fl = sel grid (tidak berputar, jadi hover stabil) > .xk-in (berputar) > .xk-f (muka depan, artikel asli) + .xk-bk (muka belakang) */
.xbh .xk-fl{perspective:1100px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.xbh .xk-in{position:relative;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.3,.75,.25,1)}
.xbh .xk-fl.is-flip .xk-in{transform:rotateY(180deg)}
.xbh .xk-in>.xk-c{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.xbh .xk-in>.xk-f{transform:none}
.xbh .xk-in>.xk-bk{position:absolute;inset:0;aspect-ratio:auto;transform:rotateY(180deg)}
/* tekstur tetap beda arah per kartu (dulu lewat :nth-child pada kartu) */
.xbh .xk-fl:nth-child(1) .xk-c{background-position:center;background-size:cover}
.xbh .xk-fl:nth-child(2) .xk-c{background-position:right bottom;background-size:130% auto}
.xbh .xk-fl:nth-child(3) .xk-c{background-position:left top;background-size:125% auto}
/* muka belakang: lebih gelap supaya teks aturan terbaca */
.xbh .xk-bk::before{background:radial-gradient(ellipse 90% 80% at 50% 55%,rgba(0,0,0,.92) 0,rgba(0,0,0,.82) 60%,rgba(0,0,0,.45) 100%)}
.xbh .xk-bk .xk-ty{margin-top:11cqi}
.xbh .xk-bk .xk-t{margin-top:2.4cqi;font-size:11.5cqi}
.xbh .xk-bk .xk-art{width:80cqi;height:52cqi;margin:4cqi 0 0}
.xbh .xk-bk .xk-d{margin:4cqi 0 0;padding:0 9cqi;font:500 6.8cqi/1.36 var(--in-f);color:#fff;text-align:center;text-wrap:pretty;text-shadow:0 1px 3px #000}
/* fokus keyboard tetap terlihat setelah kartu berbalik */
.xbh .xk-fl:has(.xk-f:focus-visible) .xk-bk{outline:2px solid #fff;outline-offset:3px}
/* peragaan mulai setelah kartu selesai berbalik */
.xbh .xk-bk.is-play .xp *,.xbh .xk-bk.is-play .xp *::after,.xbh .xk-bk.is-play .xp-f::after{animation-delay:.35s}
@container (max-width:720px){ .xbh .xk-fl{scroll-snap-align:start} .xbh .xk-bk .xk-d{font-size:7.4cqi} }
@media (prefers-reduced-motion:reduce){ .xbh .xk-in{transition:none} }

/* 12 Nov ("tulisan disini kegedean"): teks aturan di muka belakang dikecilkan, ilustrasi sedikit dipendekkan */
.xbh .xk-bk .xk-art{height:46cqi;margin:3cqi 0 0}
.xbh .xk-bk .xk-d{margin:4cqi 0 0;padding:0 10cqi;font-size:5.6cqi;line-height:1.38}
@container (max-width:720px){ .xbh .xk-bk .xk-d{font-size:6.2cqi;padding:0 9cqi} }

/* 12 Nov ("spacing2nya mepet2 banget"): muka belakang diberi napas: judul & papan dikecilkan, jarak antarblok seragam ±5cqi */
.xbh .xk-bk .xk-ty{margin-top:12cqi}
.xbh .xk-bk .xk-t{margin-top:2cqi;font-size:9.6cqi}
.xbh .xk-bk .xk-art{width:72cqi;height:44cqi;margin:6cqi 0 0}
.xbh .xk-bk .xp-b b{font-size:8.4cqi}
.xbh .xk-bk .xp-f,.xbh .xk-bk .xp-sh{inset:26% 0 0}
.xbh .xk-bk .xp-clk{inset:26% 4% 0}
.xbh .xk-bk .xk-d{margin:6cqi 0 0;padding:0 11cqi;font-size:5.4cqi;line-height:1.42}
@container (max-width:720px){ .xbh .xk-bk .xk-d{font-size:6cqi;padding:0 10cqi} }

/* ---------- 13 Nov ("card style ini dibikin yg versi ini"): kartu kaca gelap bersudut potong ----------
   Sudut kiri-atas & kanan-bawah dipotong, garis tipis warna kartu (X-Card teal, President Card merah),
   tanda X kecil di dua sudut, X besar samar di belakang ikon, cahaya tipis dari atas. Tekstur marmer dilepas. */
.xbh{--xm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M0 0h6.2l5.8 6.8L17.8 0H24l-8.9 10L24 20h-6.2L12 13.2 6.2 20H0l8.9-10z'/%3E%3C/svg%3E")}
.xbh .xk-c{--c:#4DF0E2;--k:11%;--cut:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k) * 5 / 7),calc(100% - var(--k)) 100%,0 100%,0 calc(var(--k) * 5 / 7));
  border-radius:0;overflow:visible;clip-path:var(--cut);background:color-mix(in srgb,var(--c) 78%,transparent);box-shadow:none}
.xbh .xk-c.pres{--c:#EE4A3E}
.xbh .xk-fl .xk-c{background-image:none}
.xbh .xk-c::before{inset:1.5px;border-radius:0;clip-path:var(--cut);
  background:
    radial-gradient(ellipse 3.5% 42% at 50% 0,color-mix(in srgb,var(--c) 55%,transparent),transparent 100%),
    radial-gradient(ellipse 46% 34% at 50% 0,color-mix(in srgb,var(--c) 24%,transparent),transparent 100%),
    radial-gradient(ellipse 62% 40% at 50% 46%,color-mix(in srgb,var(--c) 20%,transparent),transparent 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--c) 15%,#040707) 0,color-mix(in srgb,var(--c) 7%,#040606) 62%,color-mix(in srgb,var(--c) 11%,#040606) 100%)}
.xbh .xk-c>.xk-gls{border-radius:0;background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.07) 46%,rgba(255,255,255,.02) 54%,transparent 66%) var(--gx,70%) 0/260% 100% no-repeat}
/* tanda X di sudut kiri-atas & kanan-bawah (menggantikan bracket) */
.xbh .xk-c>.xk-fr{inset:0;background:none;filter:none}
.xbh .xk-c>.xk-fr::before,.xbh .xk-c>.xk-fr::after{content:"";position:absolute;width:10cqi;aspect-ratio:24/20;background:var(--c);-webkit-mask:var(--xm) center/contain no-repeat;mask:var(--xm) center/contain no-repeat}
.xbh .xk-c>.xk-fr::before{left:7cqi;top:11cqi}
.xbh .xk-c>.xk-fr::after{right:7cqi;bottom:10cqi}
/* label, judul, tagline */
.xbh .xk-ty{color:var(--c);opacity:1;font-size:6.6cqi;letter-spacing:.16em}
.xbh .xk-c .xk-t{color:#fff;font-style:italic;letter-spacing:.005em;text-shadow:0 .6cqi 2cqi rgba(0,0,0,.6)}
.xbh .xk-cap{font-style:italic;font-size:9.6cqi;color:rgba(255,255,255,.92);text-shadow:0 .5cqi 2cqi rgba(0,0,0,.7)}
/* ikon datar warna kartu + X besar samar di belakangnya */
.xbh .xk-ic{fill:var(--c);filter:drop-shadow(0 0 4cqi color-mix(in srgb,var(--c) 28%,transparent))}
.xbh .xk-ic .st{stroke:var(--c)}
.xbh .xk-f .xk-art::before{content:"";position:absolute;left:50%;top:50%;width:94cqi;aspect-ratio:24/16;translate:-50% -50%;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.28));-webkit-mask:var(--xm) center/100% 100% no-repeat;mask:var(--xm) center/100% 100% no-repeat}
.xbh .xk-lg{filter:none;opacity:.9}
/* muka belakang: bentuk & garis sama, latar lebih gelap untuk teks aturan */
.xbh .xk-bk::before{background:
    radial-gradient(ellipse 46% 30% at 50% 0,color-mix(in srgb,var(--c) 18%,transparent),transparent 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,#030505) 0,#030404 60%,color-mix(in srgb,var(--c) 6%,#030404) 100%)}
.xbh .xk-fl:has(.xk-f:focus-visible) .xk-bk{outline:none}
.xbh .xk-c:focus-visible{outline:none;background:#fff}