/* Kad Pemain — PMPL MY and PMPL ID Fall 2026 (pubgm.topcastgaming.com/kad-pemain/ and /kad-pemain/id/)
   Builds on the portal tokens in /style.css: --paper, --ink, --muted, --gold, --gold-light, --line, --display, --body.
   Layout: paper hero with the top-three cards fanned out; dark "showroom" band for tiers, filters and the card grid;
   paper method section; detail sheet as an overlay. Every class is prefixed kp-/kc-/kt- so portal styles never collide. */
:root{
  --kp-ovr:'Saira Stencil One',var(--display);
  --kp-dark:#141513;--kp-dark-2:#1d1e1b;--kp-dark-line:#30312c;--kp-dark-ink:#f2f0e9;--kp-dark-muted:#aaa699;
  --kp-plat-1:#bcd3c7;--kp-plat-2:#5a7a6d;--kp-plat-ink:#0c1a14;
  --kp-dia-1:#eaf1f9;--kp-dia-2:#8ba4c1;--kp-dia-ink:#0e1d31;
  --kp-crown-1:#f8df94;--kp-crown-2:#b4822b;--kp-crown-ink:#291a03;
  --kp-ace-1:#a1232c;--kp-ace-2:#1c0809;--kp-ace-ink:#f6e5b6;--kp-ace-gold:#e9c46a;
  --kp-conq-1:#3b3628;--kp-conq-2:#0d0c09;--kp-conq-ink:#ffe6a0
}
.kp-nw{white-space:nowrap}
.kp [hidden],.kp-scrim[hidden]{display:none!important}
.kp-in{padding-left:8%;padding-right:8%}
@media(max-width:1100px){.kp-in{padding-left:6%;padding-right:6%}}

/* ---------- League tabs: PMPL MY / PMPL ID (each tab is its own page) ---------- */
.kp-tabs{display:flex;gap:clamp(22px,4vw,52px);padding-top:22px;border-bottom:1px solid var(--line)}
.kp-tab{position:relative;display:flex;flex-direction:column;gap:5px;padding:4px 2px 14px;color:var(--muted);text-decoration:none;transition:color .15s}
.kp-tab-l{display:flex;align-items:center;gap:9px;font:800 clamp(22px,2.2vw,28px)/1 var(--display);letter-spacing:1.3px}
.kp-tab-l i{font-style:normal;font-size:.44em;line-height:1;color:var(--gold);opacity:0;transition:opacity .15s}
.kp-tab-s{font:600 11.5px/1.2 var(--body);letter-spacing:1.6px;text-transform:uppercase}
.kp-tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:transparent;transition:background .15s}
.kp-tab:hover{color:var(--ink)}
.kp-tab:hover::after{background:var(--line)}
.kp-tab[aria-current="page"]{color:var(--ink)}
.kp-tab[aria-current="page"] .kp-tab-l i{opacity:1}
.kp-tab[aria-current="page"]::after{background:var(--gold)}
.kp-tab[aria-current="page"] .kp-tab-s{color:var(--muted)}
.kp-tabs + .kp-hero{padding-top:46px}
@media(max-width:560px){.kp-tabs{gap:0;padding-top:14px}.kp-tab{flex:1 1 0;align-items:center;text-align:center}.kp-tab-l{font-size:22px}.kp-tab-s{font-size:10.5px;letter-spacing:1.2px}}

/* ---------- Hero ---------- */
.kp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding-top:60px;padding-bottom:56px;border-bottom:1px solid var(--line);overflow:hidden}
.kp-hero .eyebrow{margin-bottom:18px}
.kp-title{font:800 clamp(58px,7.2vw,116px)/.91 var(--display);letter-spacing:-1.5px;margin:0 0 24px;text-wrap:balance}
.kp-title em{display:block;font-style:italic;color:var(--gold);font-size:.8em;line-height:1.12;letter-spacing:-1px}
.kp-initiative{display:flex;align-items:center;gap:12px;margin:0 0 20px;font:600 12px/1 var(--body);letter-spacing:2.4px;text-transform:uppercase;color:var(--muted)}
.kp-initiative::before{content:'';width:30px;height:2px;background:var(--gold);flex:none}
.kp-initiative a{color:var(--ink);font-weight:700;border-bottom:2px solid var(--gold);padding-bottom:3px}
.kp-lead{max-width:46ch;margin:0;color:#4f4f4b;font-size:16px;line-height:1.7}
.kp-fan{display:flex;justify-content:center;align-items:flex-end;padding-top:10px}
.kp-fan .kp-card{flex:none;width:clamp(116px,14.5vw,205px);margin-inline:-2.4%}
.kp-fan .kp-card:nth-child(2){width:clamp(132px,16.5vw,235px);z-index:2}
.kp-fan .kp-card:nth-child(1){--rot:-7deg;margin-bottom:-8px}
.kp-fan .kp-card:nth-child(3){--rot:7deg;margin-bottom:-8px;z-index:1}
.kp-fan .kp-card{animation:kp-drop .75s cubic-bezier(.2,.85,.25,1) backwards;animation-delay:calc(var(--i,0)*110ms)}
@keyframes kp-drop{from{transform:translateY(-34px) rotate(var(--rot,0deg))}to{transform:translateY(0) rotate(var(--rot,0deg))}}
.kp-fan-cap{text-align:center;margin:22px 0 0;color:var(--muted);font-size:14px}
@media(max-width:860px){.kp-hero{grid-template-columns:minmax(0,1fr);padding-top:44px;padding-bottom:48px}}
@media(max-width:440px){.kp-fan .kp-card{width:30vw}.kp-fan .kp-card:nth-child(2){width:34vw}}

/* ---------- Showroom band: tiers, filters, grid ---------- */
.kp-browse{background:var(--kp-dark);color:var(--kp-dark-ink)}
.kp-tiers{padding-top:36px;padding-bottom:22px}
.kp-tiers-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:14px}
.kp-tiers-head h2{font:800 28px/1 var(--display);letter-spacing:.2px;margin:0}
.kp-tiers-head p{margin:0;color:var(--kp-dark-muted);font-size:14px}
.kp-tier-row{display:flex;flex-wrap:wrap;gap:8px}
.kp-tier{display:inline-flex;align-items:center;gap:10px;padding:8px 15px 8px 9px;background:var(--kp-dark-2);border:1px solid var(--kp-dark-line);color:inherit;text-align:left;cursor:pointer}
.kp-tier:hover{border-color:var(--kp-dark-muted)}
.kp-tier[aria-pressed="true"]{border-color:var(--gold-light);box-shadow:inset 0 0 0 1px var(--gold-light)}
.kp-tier:disabled{cursor:default;opacity:.55}
.kp-tier .sw{width:20px;height:28px;flex:none;clip-path:polygon(32% 0,100% 0,100% 78%,68% 100%,0 100%,0 22%);background:linear-gradient(160deg,var(--k-1),var(--k-2))}
.kp-tier .nm{display:block;font:800 18px/1.05 var(--display);letter-spacing:.3px}
.kp-tier .rg{display:block;font-size:13px;color:var(--kp-dark-muted);font-variant-numeric:tabular-nums}
.kp-bar{position:sticky;top:0;z-index:20;background:var(--kp-dark);border-block:1px solid var(--kp-dark-line)}
.kp-bar-in{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;padding-top:12px;padding-bottom:12px}
.kp-fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.kp-fld .lbl{font-size:12.5px;color:var(--kp-dark-muted)}
.kp-fld.search{flex:1 1 240px}
.kp-fld.team{flex:0 1 240px}
.kp-fld.sort{flex:0 1 200px}
.kp-fld input,.kp-fld select{height:42px;width:100%;min-width:0;padding:0 12px;background:var(--kp-dark-2);border:1px solid var(--kp-dark-line);border-radius:0;color:var(--kp-dark-ink);font:15px var(--body)}
.kp-fld input::placeholder{color:#7d7a70}
.kp-fld input:focus-visible,.kp-fld select:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.kp-count{margin-left:auto;padding-bottom:11px;color:var(--kp-dark-muted);font-size:14px;font-variant-numeric:tabular-nums}
.kp-reset{background:none;border:0;padding:0 0 11px;color:var(--gold-light);font-size:14px;text-decoration:underline;text-underline-offset:4px}
.kp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:22px 16px;padding-top:26px;padding-bottom:64px}
.kp-empty{grid-column:1/-1;margin:0;padding:40px 0;color:var(--kp-dark-muted)}
.kp-empty b{color:var(--kp-dark-ink)}
@media(max-width:560px){.kp-fld.team,.kp-fld.sort{flex:1 1 140px}.kp-count{margin-left:0;width:100%;padding-bottom:0}.kp-tier-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:699px){.kp-bar{position:static}}
@media(max-width:440px){.kp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}}

/* ---------- Card ---------- */
.kp-card{container-type:inline-size;position:relative;display:block;width:100%;aspect-ratio:5/7;padding:0;border:0;background:none;cursor:pointer;color:var(--k-ink);font:inherit;text-align:left;transform:rotate(var(--rot,0deg));transition:filter .2s ease}
div.kp-card{cursor:default}
.kp-card:hover{filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.kp-card:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
.kp-plate{--F:122cqw;--cx:62cqw;position:absolute;inset:0;overflow:hidden;display:grid;grid-template-rows:55cqw auto auto 1fr auto;padding:7cqw 7.5cqw 5cqw;
  clip-path:polygon(8% 0,100% 0,100% 94.286%,92% 100%,0 100%,0 5.714%);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 7px),radial-gradient(120% 80% at 88% 0%,var(--k-glow,rgba(255,255,255,.34)),transparent 58%),linear-gradient(160deg,var(--k-1),var(--k-2));
  transition:transform .2s ease}
button.kp-card:hover .kp-plate{transform:translateY(-3px)}
.kp-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.kp-frame path{fill:none;stroke:var(--k-line);stroke-width:1.2;vector-effect:non-scaling-stroke}
.kc-top{display:grid;grid-template-columns:40% 1fr;min-height:0}
.kc-meta{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;padding-top:1cqw;text-shadow:0 0 1.8cqw var(--k-1),0 0 .6cqw var(--k-1)}
.kc-ovr{font-family:var(--kp-ovr);font-weight:400;font-size:25cqw;line-height:.82;letter-spacing:-.01em}
.kc-tag{font:800 8.6cqw/1 var(--display);margin-top:3cqw;letter-spacing:.03em}
.kc-tier{font:600 5.8cqw/1.2 var(--display);margin-top:1.6cqw;opacity:.82;letter-spacing:.08em;text-transform:uppercase}
.kc-photo{justify-self:end;align-self:end;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:flex-end}
.kc-photo svg{width:100%;height:100%;fill:currentColor;opacity:var(--k-sil,.2)}
.kc-photo.has-img{position:absolute;inset:0 0 auto 0;justify-self:stretch;align-self:stretch;width:auto;height:62cqw;display:block;overflow:hidden;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 98%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 98%)}
.kc-photo.has-img img{position:absolute;top:3.5cqw;height:calc(var(--F) * var(--ph));width:auto;max-width:none;left:calc(var(--cx) - var(--hx) * var(--ar) * var(--ph) * var(--F));filter:drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.3))}
.kc-name{position:relative;z-index:1;font:800 min(13.4cqw,calc(116cqw / var(--len,8)))/1.05 var(--display);text-align:center;padding:2.4cqw 0 1.6cqw;border-bottom:1px solid var(--k-line);letter-spacing:.02em;white-space:nowrap;overflow:hidden}
.kc-team{position:relative;z-index:1;font:600 5.2cqw/1.25 var(--display);text-align:center;margin-top:1.6cqw;opacity:.78;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-stats{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;align-content:center;column-gap:8cqw;row-gap:.6cqw;padding:2.5cqw 2cqw 0}
.kc-stats::before{content:"";position:absolute;left:50%;top:4cqw;bottom:1cqw;width:1px;background:var(--k-line)}
.kc-s{display:flex;align-items:baseline;justify-content:center;gap:2.6cqw;padding:.2cqw 1.6cqw}
.kc-s b{font:800 10cqw/1.08 var(--display);font-variant-numeric:tabular-nums}
.kc-s i{font:normal 600 6.6cqw/1 var(--display);letter-spacing:.05em;opacity:.86}
.kc-s.hl{background:var(--k-ink);color:var(--k-1)}
.kc-s.hl i{opacity:1}
.kc-foot{font:600 4.9cqw/1.2 var(--display);text-align:center;letter-spacing:.1em;opacity:.66;padding-top:2.4cqw;white-space:nowrap}
.kc-foot.lim{opacity:1}
.kt-plat{--k-1:var(--kp-plat-1);--k-2:var(--kp-plat-2);--k-ink:var(--kp-plat-ink);--k-line:rgba(12,26,20,.3)}
.kt-dia{--k-1:var(--kp-dia-1);--k-2:var(--kp-dia-2);--k-ink:var(--kp-dia-ink);--k-line:rgba(14,29,49,.28)}
.kt-crown{--k-1:var(--kp-crown-1);--k-2:var(--kp-crown-2);--k-ink:var(--kp-crown-ink);--k-line:rgba(41,26,3,.3)}
.kt-ace{--k-1:var(--kp-ace-1);--k-2:var(--kp-ace-2);--k-ink:var(--kp-ace-ink);--k-line:var(--kp-ace-gold);--k-glow:rgba(255,190,110,.2);--k-sil:.26}
.kt-ace .kc-ovr,.kt-ace .kc-tag{color:var(--kp-ace-gold)}
.kt-ace .kc-s.hl{background:var(--kp-ace-gold);color:var(--kp-ace-2)}
.kt-conq{--k-1:var(--kp-conq-1);--k-2:var(--kp-conq-2);--k-ink:var(--kp-conq-ink);--k-line:rgba(255,230,160,.45);--k-glow:rgba(255,230,160,.16)}

/* ---------- Shine: foil, glare and sparkles ----------
   ::before = foil (fine lines + an iridescent band that follows the pointer while the card is tilted)
   ::after  = glare (a light streak that sweeps across cards that are on screen, or a spot under the pointer while tilted)
   .kc-spark = twinkling stars on Ace and Conqueror cards. .kc-live is set on cards that are visible. */
.kt-plat{--k-foil:.42;--k-iri:rgba(255,255,255,0) 30%,rgba(205,255,235,.55) 42%,rgba(255,255,255,.75) 50%,rgba(175,215,255,.5) 58%,rgba(255,255,255,0) 70%}
.kt-dia{--k-foil:.6;--k-iri:rgba(255,255,255,0) 26%,rgba(255,175,230,.55) 37%,rgba(170,240,255,.7) 46%,rgba(255,255,255,.85) 51%,rgba(205,185,255,.6) 60%,rgba(255,255,255,0) 72%}
.kt-crown{--k-foil:.5;--k-iri:rgba(255,255,255,0) 30%,rgba(255,250,215,.7) 43%,rgba(255,255,255,.9) 50%,rgba(255,226,150,.6) 58%,rgba(255,255,255,0) 70%}
.kt-ace{--k-foil:.6;--k-lines:.05;--k-spark:#ffd78a;--k-iri:rgba(255,255,255,0) 26%,rgba(255,206,120,.6) 39%,rgba(255,246,220,.8) 50%,rgba(255,128,160,.5) 61%,rgba(255,255,255,0) 74%}
.kt-conq{--k-foil:.6;--k-lines:.05;--k-spark:#ffe6a0;--k-iri:rgba(255,255,255,0) 26%,rgba(255,230,160,.65) 40%,rgba(255,255,255,.85) 50%,rgba(160,220,255,.5) 60%,rgba(255,255,255,0) 74%}
.kp-plate::before,.kp-plate::after{content:"";position:absolute;pointer-events:none;z-index:3}
.kp-plate::before{inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 2px,rgba(255,255,255,var(--k-lines,.07)) 2px 3px),linear-gradient(115deg,transparent 20%,var(--k-iri),transparent 80%);
  background-size:100% 100%,260% 260%;background-position:0 0,var(--mx,36%) var(--my,30%);
  mix-blend-mode:overlay;opacity:var(--k-foil,.5);transition:opacity .25s}
.kp-plate::after{top:-15%;bottom:-15%;left:-55%;width:55%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.1) 30%,rgba(255,255,255,.45) 46%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.45) 54%,rgba(255,255,255,.1) 70%,rgba(255,255,255,0));
  transform:skewX(-16deg);mix-blend-mode:color-dodge;opacity:0}
.kc-live .kp-plate::after{animation:kp-glare 6.5s cubic-bezier(.45,.05,.3,1) infinite;animation-delay:var(--gd,0s)}
@keyframes kp-glare{0%{transform:translateX(0) skewX(-16deg);opacity:0}5%{opacity:var(--k-gop,.8)}24%{transform:translateX(300%) skewX(-16deg);opacity:var(--k-gop,.8)}27%,100%{transform:translateX(300%) skewX(-16deg);opacity:0}}
.kt-ace,.kt-conq{--k-gop:1}
.kt-crown,.kt-dia{--k-gop:.75}
.kt-plat{--k-gop:.7}
.kc-spark{position:absolute;inset:0;z-index:4;pointer-events:none}
.kc-spark i{position:absolute;width:var(--s,8cqw);aspect-ratio:1;margin:calc(var(--s,8cqw) / -2) 0 0 calc(var(--s,8cqw) / -2);opacity:0;transform:scale(.3);
  background:radial-gradient(circle,#fff 0 9%,var(--k-spark,#ffe6a8) 20%,rgba(255,230,170,0) 62%);
  clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%)}
.kc-spark i:nth-child(1){left:34%;top:7%;--s:13cqw}
.kc-spark i:nth-child(2){left:91%;top:16%;--s:9cqw}
.kc-spark i:nth-child(3){left:9%;top:55%;--s:8cqw}
.kc-spark i:nth-child(4){left:93%;top:91%;--s:11cqw}
.kc-live .kc-spark i{animation:kp-twinkle 3.8s ease-in-out infinite}
.kc-live .kc-spark i:nth-child(2){animation-delay:1s}
.kc-live .kc-spark i:nth-child(3){animation-delay:2.1s}
.kc-live .kc-spark i:nth-child(4){animation-delay:2.9s}
@keyframes kp-twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}38%{opacity:1;transform:scale(1) rotate(25deg)}55%{opacity:0;transform:scale(.35) rotate(55deg)}}
/* pointer tilt (mouse only, set by kad.js) */
.kp-card.is-tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(var(--rot,0deg));transition:transform .12s ease-out,filter .2s ease}
.kp-card.is-tilt .kp-plate{transform:none}
.kp-card.is-tilt .kp-plate::before{opacity:calc(var(--k-foil,.5) + .3)}
.kp-card.is-tilt .kp-plate::after{animation:none;top:0;bottom:0;left:0;width:100%;transform:none;opacity:1;mix-blend-mode:overlay;
  background:radial-gradient(farthest-corner circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.6),rgba(255,255,255,.14) 28%,rgba(255,255,255,0) 58%)}

/* ---------- Method ---------- */
.kp-method .kp-body{max-width:820px;display:flex;flex-direction:column;gap:18px}
.kp-method h3{font:700 27px/1.15 var(--display);margin:16px 0 0}
.kp-method p{margin:0;max-width:68ch;color:#3f3f3b}
.kp .kp-tbl{overflow-x:auto;border:1px solid var(--line);background:#fff}
.kp .kp-tbl table{width:100%;border-collapse:collapse;font-size:14px;text-align:left;font-variant-numeric:tabular-nums}
.kp .kp-tbl th,.kp .kp-tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;white-space:normal;font-size:14px;font-weight:400;color:inherit}
.kp .kp-tbl th{font-weight:600;color:var(--muted);font-size:13px;white-space:nowrap}
.kp .kp-tbl tr:last-child td{border-bottom:0}
.kp .kp-tbl td.code{font:800 17px var(--display);white-space:nowrap}
.kp .kp-tbl td.num{white-space:nowrap}
.kp-wbar{display:flex;flex-direction:column;gap:6px}
.kp-wrow{display:flex;gap:3px}
.kp-wbr span{display:block;font-size:13px;color:var(--muted);padding-bottom:4px;border-bottom:2px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-wbr .core{border-color:var(--gold)}
.kp-wbr .team{border-color:var(--ink)}
.kp-seg{flex-basis:0;min-width:0;height:36px;display:flex;align-items:center;justify-content:center;font:800 14px var(--display);letter-spacing:.5px;overflow:hidden;white-space:nowrap}
.kp-seg.core{background:var(--gold);color:#fff}
.kp-seg.team{background:var(--ink);color:#fff}
.kp-wlegend{margin:0;font-size:14px;color:var(--muted)}
.kp-method details{border:1px solid var(--line);background:#fff;padding:12px 16px}
.kp-method summary{font-size:15px;font-weight:600}
.kp-method details[open] summary{margin-bottom:12px}
.kp-method details p{margin-top:12px;font-size:14px;color:var(--muted)}
.kp-src{font-size:14px;color:var(--muted)!important}

/* ---------- Single-card view (#kad-ID) ---------- */
.kp-solo{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;overflow:auto;padding:16px;
  background:linear-gradient(rgba(21,21,21,.05) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(21,21,21,.05) 1px,transparent 1px) 0 0/56px 56px,var(--paper)}
.kp-solo .kp-card{flex:none;width:min(86vw,calc((100vh - 90px) * 5 / 7),600px)}
.kp-solo a{color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:4px}

/* ---------- Detail sheet ---------- */
.kp-scrim{position:fixed;inset:0;z-index:110;background:rgba(15,15,12,.55);display:grid;place-items:center;padding:12px}
.kp-sheet{width:min(960px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;background:var(--paper);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.35);animation:kp-rise .22s ease-out}
@keyframes kp-rise{from{transform:translateY(14px)}to{transform:none}}
.kp-dtop{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 22px;background:var(--paper);border-bottom:1px solid var(--line)}
.kp-dtop h2{font:800 34px/1 var(--display);margin:0}
.kp-dtop p{margin:5px 0 0;color:var(--muted);font-size:14px}
.kp-btn{height:40px;padding:0 16px;background:#fff;border:1px solid var(--line);color:var(--ink);font:600 15px var(--display);letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.kp-btn:hover{border-color:var(--ink)}
.kp-btn:disabled{opacity:.4;cursor:default}
.kp-sheet [hidden]{display:none!important}
.kp-dbody{display:grid;grid-template-columns:352px minmax(0,1fr);gap:32px;padding:22px}
.kp-dcard{display:flex;flex-direction:column;gap:16px}
/* 3D card: .kp-dstage holds the perspective, kad.js turns .kp-flip. Inside: front card, two thin sides, back. */
.kp-dview{position:relative;display:flex;justify-content:center;padding:4px 0 14px}
.kp-dstage{position:relative;width:calc(100% - 72px);perspective:1100px;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;animation:kp-pop .45s cubic-bezier(.2,.9,.3,1.12) backwards}
.kp-dstage.is-drag{cursor:grabbing}
.kp-dstage img{-webkit-user-drag:none}
@keyframes kp-pop{from{transform:scale(.9) translateY(12px);opacity:0}to{transform:none;opacity:1}}
.kp-flip{position:relative;transform-style:preserve-3d;will-change:transform}
.kp-flip>.kp-card{width:100%;transform:translateZ(1.5px);-webkit-backface-visibility:hidden;backface-visibility:hidden;cursor:inherit}
.kp-flip>.kp-card:hover{filter:none}
.kp-side{position:absolute;width:3px;background:linear-gradient(var(--kb-edge-hi),var(--kb-edge));transform:rotateY(90deg)}
.kp-side.l{left:-1.5px;top:5.714%;bottom:0}
.kp-side.r{right:-1.5px;top:0;bottom:5.714%}
.kp-back{position:absolute;inset:0;container-type:inline-size;transform:translateZ(-1.5px) rotateY(180deg);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.kb-plate{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f6f2e6;
  clip-path:polygon(0 0,92% 0,100% 5.714%,100% 100%,8% 100%,0 94.286%);
  background:radial-gradient(62% 44% at 50% 46%,var(--kb-glow),rgba(0,0,0,0) 72%),repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0 1px,transparent 1px 7px),linear-gradient(160deg,#23211c 0%,#121110 55%,#0a0a09 100%)}
.kp-back .kp-frame path{stroke:var(--kb-acc);opacity:.55}
.kb-mark{position:relative;width:20cqw;aspect-ratio:1;margin-bottom:9cqw;transform:rotate(45deg);border:1cqw solid var(--kb-acc);box-shadow:0 0 7cqw var(--kb-glow)}
.kb-mark::after{content:"";position:absolute;inset:24%;background:var(--kb-acc)}
.kb-title{display:flex;flex-direction:column;align-items:center;font:900 20cqw/.86 var(--display);letter-spacing:.01em;text-transform:uppercase}
.kb-title em{font-style:italic;font-size:.8em;color:var(--kb-acc);padding-right:.04em}
.kb-sub{margin-top:5cqw;font:700 5cqw/1 var(--display);letter-spacing:.22em;color:var(--kb-acc);opacity:.85}
.kb-glare{position:absolute;top:-15%;bottom:-15%;left:-55%;width:55%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.08) 30%,rgba(255,255,255,.34) 46%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.34) 54%,rgba(255,255,255,.08) 70%,rgba(255,255,255,0));
  mix-blend-mode:screen;transform:translateX(var(--gt,220%)) skewX(-16deg);opacity:var(--go,0)}
.kb-shade{position:absolute;inset:0;background:#000;opacity:var(--dk,0);pointer-events:none}
.kt-ace{--kb-acc:#efc86c;--kb-glow:rgba(196,28,44,.55);--kb-edge:#4a0b12;--kb-edge-hi:#c99a4a}
.kt-conq{--kb-acc:#ffe39a;--kb-glow:rgba(214,170,80,.45);--kb-edge:#3b2c0e;--kb-edge-hi:#e9cf86}
.kt-crown{--kb-acc:#f2d27a;--kb-glow:rgba(205,150,40,.45);--kb-edge:#5e430e;--kb-edge-hi:#f0d58a}
.kt-dia{--kb-acc:#bcd5ff;--kb-glow:rgba(96,148,245,.42);--kb-edge:#253552;--kb-edge-hi:#c7d9f5}
.kt-plat{--kb-acc:#a8e7cc;--kb-glow:rgba(70,175,135,.38);--kb-edge:#24423a;--kb-edge-hi:#c2e8d8}
/* light on the front: kad.js sets --gt/--go (glare), --dk/--lt (shade, highlight), --mx/--my (foil) */
.kp-card.kc-lit .kp-plate::after{animation:none;transform:translateX(var(--gt,220%)) skewX(-16deg);opacity:calc(var(--go,0) * var(--k-gop,.8))}
.kc-shade,.kc-lite{position:absolute;inset:0;pointer-events:none;z-index:5}
.kc-shade{background:linear-gradient(90deg,#000,rgba(0,0,0,.72));opacity:var(--dk,0)}
.kc-lite{background:linear-gradient(115deg,rgba(255,255,255,0) 25%,rgba(255,255,255,.85));mix-blend-mode:soft-light;opacity:var(--lt,0)}
.kp-gshadow{position:absolute;left:6%;right:6%;bottom:-16px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(24,22,16,.42),rgba(24,22,16,0));pointer-events:none;z-index:-1}
/* previous / next */
.kp-arrow{position:absolute;top:calc(50% - 28px);z-index:3;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;
  box-shadow:0 1px 2px rgba(20,18,12,.16),0 10px 24px -4px rgba(20,18,12,.34);transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s ease}
.kp-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kp-prev{left:0}
.kp-next{right:0}
.kp-arrow:hover{transform:scale(1.07);box-shadow:0 2px 4px rgba(20,18,12,.18),0 16px 30px -6px rgba(20,18,12,.42)}
.kp-arrow:active{transform:scale(.94)}
.kp-arrow:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.kp-arrow:disabled{visibility:hidden}
/* share row: icons only. Share in the middle, download on the left, copy link on the right */
.kp-share{display:flex;align-items:center;justify-content:center;gap:20px}
.kp-ib{position:relative;flex:none;display:grid;place-items:center;width:50px;height:50px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),border-color .2s ease,color .2s ease,box-shadow .2s ease}
.kp-ib svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kp-ib:hover{border-color:var(--ink);transform:translateY(-2px)}
.kp-ib:active{transform:scale(.94)}
.kp-ib:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.kp-ib.ok{border-color:var(--gold);color:#8a6a12}
.kp-ib-main{width:66px;height:66px;border:0;overflow:hidden;background:radial-gradient(circle at 30% 25%,#3b3a35,var(--ink) 62%);color:var(--gold-light);
  box-shadow:inset 0 0 0 1px rgba(214,178,94,.55),0 10px 22px -8px rgba(20,18,12,.42)}
.kp-ib-main svg{width:27px;height:27px;stroke-width:2.1}
.kp-ib-main:hover{transform:translateY(-2px) scale(1.04);box-shadow:inset 0 0 0 1px rgba(214,178,94,.8),0 14px 26px -8px rgba(20,18,12,.48)}
.kp-ib-main::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,236,190,.38),rgba(255,255,255,0));transform:skewX(-20deg);animation:kp-cta 4.8s ease-in-out infinite;pointer-events:none}
@keyframes kp-cta{0%,62%{left:-60%}88%,100%{left:130%}}
.kp-shint{margin:0;font-size:13px;line-height:1.45;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.kp-shint:empty{display:none}
.kp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kp-social{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.kp-social a{flex:1 1 28%;padding:11px 6px;border:1px solid var(--line);background:#fff;color:var(--ink);font:700 14px/1 var(--display);letter-spacing:.8px;text-align:center;text-transform:uppercase;text-decoration:none}
.kp-social a:hover{border-color:var(--ink)}
.kp-more{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:6px;padding:14px 16px;background:#fff;border:1px solid var(--line);color:var(--ink);font:700 16px/1 var(--display);letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.kp-more i{font-style:normal;font-size:24px;line-height:.6;color:var(--gold)}
.kp-more:hover{border-color:var(--ink)}
.kp-morebox{display:flex;flex-direction:column;gap:14px}
.kp-dinfo{display:flex;flex-direction:column;gap:14px;min-width:0}
.kp-dsum{margin:0;font-size:15px}
.kp-note{margin:0;border-left:3px solid var(--gold);padding:8px 12px;background:#fff;font-size:14px}
.kp-dinfo h3{font:700 22px/1.1 var(--display);margin:8px 0 0}
.kp-arow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding-block:9px;border-bottom:1px solid var(--line)}
.kp-arow .an{display:flex;align-items:baseline;gap:8px}
.kp-arow .an b{font:800 18px var(--display);letter-spacing:.04em}
.kp-arow .an span{color:var(--muted);font-size:14px}
.kp-arow .av{justify-self:end;font:800 24px/1 var(--display);font-variant-numeric:tabular-nums}
.kp-arow .ab{grid-column:1/-1;position:relative;height:8px;background:#e5e4dc}
.kp-arow .ab i{position:absolute;inset:0 auto 0 0;background:var(--gold)}
.kp-arow .ab u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.75}
.kp-arow .ar{font-size:13.5px;color:var(--muted)}
.kp-arow .rk{font-size:13.5px;color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.kp-alegend{margin:0;font-size:13px;color:var(--muted)}
.kp-totals{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;margin:0;background:var(--line);border:1px solid var(--line)}
.kp-totals div{background:#fff;padding:9px 12px;min-width:0}
.kp-totals dt{font-size:12.5px;color:var(--muted)}
.kp-totals dd{margin:0;font:700 21px var(--display);font-variant-numeric:tabular-nums}
@media(max-width:820px){
  .kp-dbody{grid-template-columns:minmax(0,1fr);padding:16px;gap:22px}
  .kp-dcard{width:min(360px,100%);margin:0 auto}
  .kp-dstage{width:min(270px,calc(100% - 64px))}
  .kp-arrow{width:42px;height:42px;top:calc(50% - 26px)}
  .kp-dtop{padding:12px 16px}
  .kp-dtop h2{font-size:28px}
}
@media(prefers-reduced-motion:reduce){
  .kp-fan .kp-card,.kp-sheet{animation:none}
  .kp-plate,.kp-card{transition:none}
  .kc-live .kp-plate::after,.kc-live .kc-spark i,.kp-dstage,.kp-ib-main::after{animation:none}
  .kc-live .kc-spark i{opacity:.9;transform:scale(.7) rotate(20deg)}
}