/* Kartu pemain gaya poster IG "CONFIRMED FOR XSERIES-3" (singgasana).
   Plate singgasana, logo XS-3, poster, dan video diambil dari reel IG @xseries___ (bagian reveal saja, tanpa promo/harga tiket).
   Efek kartu lama tetap: naik 3px saat hover + kilau .xc::after (v3.css). */
#pc-row{grid-auto-columns:232px}
@container (max-width:460px){#pc-row{grid-auto-columns:186px}}

.xc.xt{--cy:#3ED8D0;--rd:#EC2A32;width:232px;height:290px;color:#fff}
.xc.xt::after{border-radius:8px}
.xt-f{position:absolute;inset:0;border-radius:8px;overflow:hidden;isolation:isolate;
  background:#000 url(../img/players/throne/plate.webp) 50% 0/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
/* kilat cahaya di belakang pemain saat reveal */
.xt-f::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:radial-gradient(60% 42% at 50% 30%,rgba(255,255,255,.95),rgba(255,120,120,.35) 55%,transparent 75%)}
/* gelap tipis di belakang nama (tengah saja) supaya kaki singgasana di kiri-kanan tetap kelihatan */
.xt-f::after{content:"";position:absolute;inset:auto 0 0;height:46%;z-index:2;pointer-events:none;
  background:radial-gradient(48% 62% at 50% 72%,rgba(0,0,0,.55),transparent)}

/* pemain: poster singgasana IG utuh (pemain sudah duduk di singgasana, tanpa siluet), huruf rank poster ditutup,
   teks poster di bawah difade ke hitam (img/players/throne/p/). Siluet di belakang = pose pemain itu sendiri (p/<slug>-s.webp, di-set inline per kartu),
   jadi saat reveal siluet -> kilat -> pemain tepat di posisi yang sama */
.xt-p{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 30%}

/* indeks kartu remi: huruf rank + X, cyan kiri atas, merah terbalik kanan bawah */
.xt-i{position:absolute;z-index:3;left:13px;top:11px;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--cy);
  filter:drop-shadow(0 0 5px color-mix(in srgb,currentColor 55%,transparent))}
.xt-i b{font:400 30px/.9 Rye,Georgia,serif}
.xt-i i{width:22px;height:15px;background:currentColor;
  -webkit-mask:url(../img/xseries-mark.webp) center/contain no-repeat;mask:url(../img/xseries-mark.webp) center/contain no-repeat}
.xt-i2{left:auto;top:auto;right:13px;bottom:11px;color:var(--rd);rotate:180deg;opacity:.9}

/* nama + CONFIRMED FOR + logo XS-3 + tagar */
.xt-n{position:absolute;z-index:3;left:8px;right:8px;bottom:9px;display:flex;flex-direction:column;align-items:center;text-align:center}
.xt-n b{display:inline-block;white-space:nowrap;font:700 40px/.8 "Dharma Gothic E",Impact,sans-serif;text-transform:uppercase;letter-spacing:.005em;
  text-shadow:0 2px 12px rgba(0,0,0,.6)}
.xt-n small{margin-top:3px;font:700 11px/1 "Dharma Gothic E",Impact,sans-serif;text-transform:uppercase;letter-spacing:.03em}
.xt-n img{display:block;width:104px;height:auto;margin-top:2px}
.xt-n em{margin-top:3px;font:italic 800 6.5px/1 Inter,sans-serif;letter-spacing:.04em}

.xt.nx .xt-i2{display:none}

/* kartu reveal berikutnya: siluet singgasana dibiarkan, tanda tanya di dada */
.xt.nx .xt-q{position:absolute;z-index:3;left:0;right:0;top:84px;text-align:center;font:700 96px/1 "Dharma Gothic E",Impact,sans-serif;color:#fff;
  text-shadow:0 0 18px rgba(255,255,255,.45)}
.xt.nx .xt-n{bottom:56px}
.xt.nx .xt-n b{font-size:34px}
.xt.nx .xt-n small{font:600 11px/1 Inter,sans-serif;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.7);margin-top:5px}
.xt .tc-go{bottom:12px;left:12px;right:12px;z-index:4}

.xt:focus-visible{outline:none}
.xt:focus-visible .xt-f{outline:2px solid var(--cy);outline-offset:2px}

/* gerak saat hover (.on dari js/throne.js): siluet -> kilat -> pemain, indeks berkedip, nama masuk, kamera mendekat pelan */
.xt.on .xt-p{animation:xt-rv 1.5s cubic-bezier(.2,.7,.2,1) both,xt-push 8s 1.2s linear both}
.xt.on .xt-f::before{animation:xt-fx 1.5s ease-out both}
.xt.on .xt-i b{animation:xt-fl 1.3s steps(1) both}
.xt.on .xt-n{animation:xt-nm 1.5s cubic-bezier(.2,.7,.2,1) both}
.xt.nx.on .xt-q{animation:xt-fl 1.3s steps(1) both}
@keyframes xt-rv{0%,30%{opacity:0}42%{opacity:1;filter:brightness(2.2) saturate(.3)}64%,100%{opacity:1;filter:none}}
@keyframes xt-push{from{scale:1}to{scale:1.05}}
@keyframes xt-fx{0%,30%{opacity:0}42%{opacity:.9}100%{opacity:0}}
@keyframes xt-fl{0%{opacity:1}10%{opacity:.15}16%{opacity:1}26%{opacity:.25}32%{opacity:1}44%{opacity:.4}50%,100%{opacity:1}}
@keyframes xt-nm{0%,48%{opacity:0;transform:scale(1.22);filter:blur(5px)}72%,100%{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.xt.on .xt-p,.xt.on .xt-f::before,.xt.on .xt-i b,.xt.on .xt-n,.xt.nx.on .xt-q{animation:none}}