/* =====================================================================
   Katenza «Пантеон» — «Циферблат» (.kp > .kp-in inside the /rating route host). Script: privatedrop-rating-v6.js.
   One hairline frame holds the page: head, the leaders, «Ваше место», places 4–100. The leaders are upgrade dials
   whose arcs are data; places 4–100 are four prize bands in a 2×2 on desktop, each opened by a highlighted lead line. Graphite night, gold for first place and money, silver and bronze for
   second and third. .kp is the size container (name "kp"); every rule that depends on its width styles
   .kp-in or deeper, never .kp itself (a container cannot query its own size).
   ===================================================================== */
.pdrp-host{display:block;width:100%;min-width:0}
.kp{container:kp/inline-size;width:100%;
  --night:var(--pd2-bg,#0a0b0d);--gold:#e8bd62;--gold-rgb:232 189 98;--gold-hi:#f6dc9b;
  --silver:#cfd3da;--silver-rgb:207 211 218;--bronze:#c99b73;--bronze-rgb:201 155 115;
  --t1:#eceef1;--t2:#a9acb3;--t3:#8b8e95;--mark:rgba(255,255,255,.13);
  --line:rgba(255,255,255,.075);--line-2:rgba(255,255,255,.13);
  --num:var(--pd2-font-num);--ease:cubic-bezier(.16,1,.3,1);
  font-family:var(--pd2-font);color:var(--t1)}
.kp-in{max-width:1180px;margin:0 auto;padding:32px 40px 72px}
.kp *{box-sizing:border-box}
.kp button{font-family:inherit;color:inherit}
:where(.kp) :where(h1,h2,p,ol,li){margin:0;padding:0}
:where(.kp) ol{list-style:none}
.kp ::selection{background:rgb(var(--gold-rgb)/.3);color:#fff}
.kp-coin{display:inline-block;flex:none;width:.86em;height:.86em;-webkit-user-drag:none}
.kp-amt{display:inline-flex;align-items:center;gap:.24em;white-space:nowrap;font-family:var(--num);font-variant-numeric:tabular-nums}
.kp-gold{color:var(--gold-hi);font-style:normal}
.kp-you{margin-left:8px;padding:1px 7px 2px;border-radius:6px;background:rgb(var(--gold-rgb)/.14);color:var(--gold-hi);font-size:11.5px;font-weight:600;vertical-align:2px}
.kp :focus-visible{outline:2px solid rgb(var(--gold-rgb)/.7);outline-offset:3px;border-radius:6px}

/* ---------- head ---------- */
/* the head: title + period tabs on one line, then the rule, the facts and the 7-day week track (gold up to now) */
.kp-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:32px;padding:34px var(--fx) 30px;border-bottom:1px solid var(--line)}
.kp-title{display:flex;align-items:center;gap:16px;min-width:0}
.kp h1{display:flex;align-items:center;gap:14px;font-size:52px;line-height:1;font-weight:700;letter-spacing:-.04em}
.kp-mark{display:grid;place-items:center;width:26px;color:var(--gold)}
.kp-mark svg{width:24px;height:26px}
.kp-mode{align-self:center;margin-top:6px;padding:4px 9px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--t2);font-family:var(--num);font-size:12px;line-height:14px;cursor:help}
.kp-mode.is-real{color:var(--gold-hi);box-shadow:inset 0 0 0 1px rgb(var(--gold-rgb)/.4)}
.kp-tabs{position:relative;display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.035)}
.kp-tabs button{position:relative;z-index:1;min-height:44px;padding:0 18px;border:0;border-radius:9px;background:none;color:var(--t2);font-size:14.5px;font-weight:600;cursor:pointer;transition:color .2s}
.kp-tabs button:hover,.kp-tabs button[aria-selected="true"]{color:var(--t1)}
.kp-tabs-ink{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:9px;background:#24252b;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .45s var(--ease),width .45s var(--ease)}
.kp-head-body{grid-column:1 / -1;margin-top:20px}
.kp-rule{max-width:68ch;color:var(--t2);font-size:15px;line-height:23px}
.kp-facts{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 36px;margin-top:16px}
.kp-fact{color:var(--t2);font-size:15px;line-height:22px;white-space:nowrap}
.kp-fact b{color:var(--t1);font-weight:600}
.kp-fact .kp-coin{width:14px;height:14px;vertical-align:-2px}
.kp-fact-cd{margin-left:auto}
.kp-fact-cd .kp-cd{color:var(--gold-hi);font-size:17px}
.kp-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:14px}
.kp-week li{display:flex;flex-direction:column;gap:8px;min-width:0}
.kp-week i{position:relative;display:block;height:4px;border-radius:2px;background:var(--line-2);overflow:hidden}
.kp-week i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gold);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .6s var(--ease)}
.kp-week li.is-past i::after{background:rgb(var(--gold-rgb)/.55)}
.kp-week span{color:var(--t3);font-size:12.5px;line-height:16px;white-space:nowrap}
.kp-week span b{color:var(--t2);font-weight:600;font-variant-numeric:tabular-nums}
.kp-week li.is-now span,.kp-week li.is-now span b{color:var(--gold-hi)}
.kp-cd{font-family:var(--num);font-variant-numeric:tabular-nums}
.kp-nb{white-space:nowrap}

/* ---------- dials ---------- */
.kp-dial{--d:120px;--tone:var(--silver);--tone-rgb:var(--silver-rgb);position:relative;display:block;flex:none;width:var(--d);height:var(--d)}
.kp-dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kp-dial-ticks line{stroke:rgba(255,255,255,.2);stroke-width:1}
.kp-dial-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:2.5}
.kp-dial-arc{fill:none;stroke:var(--tone);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--off);transition:stroke-dashoffset 1.6s var(--ease)}
.kp:not(.is-ready) .kp-dial-arc{stroke-dashoffset:var(--len)}
.kp-face{position:absolute;inset:19%;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#1b1c21;color:var(--tone)}
.kp-face b{font-size:calc(var(--d) * .24);font-weight:600}
.kp-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kp-face svg{width:40%;height:40%;color:var(--t3)}
.kp-face.is-free{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
/* the best drop of the period inside the dial: the skin on a quiet disc, never cropped */
.kp-face.is-skin{background:#16171c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.kp-face.is-skin img{inset:13%;width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.kp-leader.is-1 .kp-leader-name>span:not(.kp-you){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere}
.kp-leader-name{display:inline-flex;align-items:center;gap:10px}
.kp-leader-name>span:not(.kp-you){overflow:hidden;text-overflow:ellipsis}
.kp-leader-name .kp-you{flex:none;align-self:center;margin-left:2px;line-height:16px;letter-spacing:0}
.kp-face.kp-mini{position:relative;inset:auto;flex:none;width:26px;height:26px;color:var(--t2)}
.kp-face.kp-mini b{font-size:12px}
.kp-leader.is-1 .kp-face.kp-mini{width:34px;height:34px}
.kp-leader.is-1 .kp-face.kp-mini b{font-size:15px}
.kp-leader-drop{max-width:100%;overflow:hidden;color:var(--t2);font-size:13px;line-height:18px;white-space:nowrap;text-overflow:ellipsis}
.kp-leader-drop b{color:var(--t1);font-weight:600}
.kp-leader-drop .kp-amt{color:var(--t1);font-weight:600}
.kp-leader-drop .kp-coin{width:12px;height:12px;vertical-align:-2px}
.kp-medal{position:absolute;left:50%;bottom:0;display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:13px;background:var(--tone);box-shadow:0 0 0 4px var(--night);color:#17140d;font-family:var(--num);font-size:13px;font-style:normal;font-weight:600;line-height:1;transform:translate(-50%,30%)}
.kp-leader.is-1 .kp-dial{--d:200px}
.kp-leader.is-1 .kp-medal{min-width:34px;height:34px;border-radius:17px;font-size:17px}
.kp-leader.is-free .kp-medal{background:#2b2c32;color:var(--t2)}

/* ---------- the three leaders ---------- */
/* one continuous frame: its edge closes the summit's top line, and every inner divider (summit bottom, the
   vertical between #1 and the chasers, the strip under «Ваше место», the 4–10 grid) runs edge to edge inside it */
.kp-frame{--fx:40px;border:1px solid var(--line);border-radius:18px}
.kp-summit{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.kp-leader{--tone:var(--silver);--tone-rgb:var(--silver-rgb);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:28px;min-width:0}
.kp-leader.is-1{--tone:var(--gold);--tone-rgb:var(--gold-rgb);column-gap:36px;padding:36px 40px 36px var(--fx)}
.kp-leader.is-3{--tone:var(--bronze);--tone-rgb:var(--bronze-rgb)}
.kp-leader .kp-dial{--tone:inherit;--tone-rgb:inherit}
.kp-chasers{display:grid;border-left:1px solid var(--line)}
.kp-chasers .kp-leader{align-content:start}
.kp-chasers .kp-leader{padding:24px var(--fx) 24px 40px}
.kp-chasers .kp-leader+.kp-leader{border-top:1px solid var(--line)}
.kp-leader-text{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.kp-leader-name{max-width:100%;overflow:hidden;font-size:22px;line-height:28px;font-weight:650;letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis}
.kp-leader.is-1 .kp-leader-name{margin-bottom:6px;font-size:40px;line-height:46px;letter-spacing:-.035em}
.kp-leader.is-free .kp-leader-name{color:var(--t3);font-weight:500}
.kp-leader.is-me .kp-leader-name{color:var(--gold-hi)}
.kp-leader-turn,.kp-leader-prize{display:inline-flex;align-items:baseline;gap:10px;font-size:17px;line-height:22px;font-weight:600}
.kp-leader-turn small,.kp-leader-prize small{color:var(--t3);font-family:var(--pd2-font);font-size:13px;font-weight:500}
.kp-leader-turn .kp-coin,.kp-leader-prize .kp-coin{width:15px;height:15px;align-self:center}
.kp-leader-prize{color:rgb(var(--tone-rgb))}
.kp-leader.is-1 .kp-leader-turn,.kp-leader.is-1 .kp-leader-prize{font-size:24px;line-height:30px}
.kp-leader.is-1 .kp-leader-turn .kp-coin,.kp-leader.is-1 .kp-leader-prize .kp-coin{width:20px;height:20px}
.kp-leader.is-1 .kp-leader-prize{color:var(--gold-hi)}
.kp-leader.is-free .kp-leader-prize{color:var(--t2);font-size:15px}
.kp-leader.is-free .kp-leader-prize .kp-coin{filter:grayscale(1);opacity:.6}
.kp-leader-games{color:var(--t2);font-size:14px}
.kp-leader-note{margin-top:4px;color:var(--t3);font-size:13px;line-height:18px}
.kp-leader-note .kp-amt{color:var(--t2);font-weight:600}
.kp-leader-note .kp-coin{width:12px;height:12px}

/* ---------- your place ---------- */
.kp-me{display:flex;align-items:center;gap:24px;min-height:76px;padding:16px var(--fx);border-bottom:1px solid var(--line)}
.kp-me-rank{flex:none;min-width:56px;font-family:var(--num);font-size:34px;line-height:36px;font-weight:600;color:var(--t1)}
.kp-me-rank::before{content:"#";color:var(--t3);font-size:.5em;vertical-align:.75em}
.kp-me-rank.is-top{color:var(--gold-hi)}
.kp-me-rank.is-none{color:var(--t3)}
.kp-me-rank.is-none::before{content:none}
.kp-me-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.kp-me-text b{font-size:15px;font-weight:600}
.kp-me-text span{color:var(--t2);font-size:13.5px}
.kp-me-text .kp-coin{width:12px;height:12px}
.kp-me-goal{display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:7px;width:240px;margin-left:auto;font-size:13px}
.kp-me-goal span{color:var(--t3)}
.kp-me-goal b{font-weight:600}
.kp-me-goal .kp-coin{width:12px;height:12px}
.kp-me-goal.is-lead b{color:var(--gold-hi)}
.kp-meter{grid-column:1 / -1;display:block;height:3px;border-radius:2px;background:var(--line-2);overflow:hidden}
.kp-meter i{display:block;width:0;height:100%;border-radius:2px;background:var(--gold);transition:width 1.4s var(--ease) .3s}
.kp.is-ready .kp-meter i{width:var(--w)}
.kp-jump{flex:none;min-height:44px;padding:0 18px;border:0;border-radius:10px;background:rgba(255,255,255,.05);font-size:13.5px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.kp-jump:hover{background:rgba(255,255,255,.09);color:var(--gold-hi)}
.kp-jump svg{display:block;width:18px;height:18px}
.kp-me.is-guest{justify-content:space-between}
.kp-me.is-guest p{max-width:60ch;color:var(--t2);font-size:14.5px;line-height:22px}
.kp-me.is-guest b{color:var(--t1);font-weight:600}
.kp-btn{flex:none;min-height:44px;padding:0 24px;border:0;border-radius:11px;background:var(--pd2-gold-fill);box-shadow:var(--pd2-gold-bevel);color:var(--pd2-on-gold)!important;font-size:14.5px;font-weight:700;cursor:pointer;transition:background .2s}
.kp-btn:hover{background:var(--pd2-gold-fill-hover)}

/* ---------- places 4–100: a 2×2 of prize bands ---------- */
/* Desktop: 4–10 | 11–25 over 26–50 | 51–100 in the summit's 1.2 : 1 split, so the vertical hairline continues the
   leaders' one; the bands of a row stretch to one height, so it runs through both rows. Every band opens with its
   lead place on a full-width line on a quiet raised surface. Then line bands (4–10, 26–50) go one place per line
   with turnover and prize in named columns, pair bands (11–25, 51–100) two per row with the turnover under the
   name; an odd last place spans its row. Heights are tuned so the bands of a row end level: under the lead, 4–10
   has six lines and 11–25 seven pair rows (6 × 56 = 7 × 48); 26–50 and 51–100 fold to the same six / seven.
   Every cell carries only a top hairline. White amounts are turnover, gold ones prizes. */
.kp-ladder{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.kp-band{--bx:32px;--rk:30px;--fc:28px;--h:48px;--turn:112px;--won:84px;--gap:24px;--bleed:12px;--lead:rgba(255,255,255,.055);min-width:0;padding:28px var(--fx) 30px}
.kp-band:nth-child(odd){padding-right:var(--bx);border-right:1px solid var(--line)}
.kp-band:nth-child(even){padding-left:var(--bx)}
.kp-band:nth-child(n+3){border-top:1px solid var(--line)}
.kp-band.is-line{--cols:1;--h:56px;--fc:32px}
.kp-band.is-pair{--cols:2}
.kp-band-head{display:flex;align-items:baseline;gap:12px;min-height:22px;margin-bottom:14px}
.kp-band-head h2{flex:none;font-size:17px;line-height:22px;font-weight:650;letter-spacing:-.01em}
.kp-band-count{color:var(--t3);font-size:13px;white-space:nowrap}
.kp-band-prize{margin-left:auto;color:var(--t2);font-size:13px;white-space:nowrap}
.kp-band-prize .kp-amt{color:var(--gold-hi);font-weight:600}
.kp-band-prize .kp-coin{width:12px;height:12px}
.kp-band-cols{display:flex;gap:12px;margin-left:auto;color:var(--t3);font-size:12.5px}
.kp-band-cols span{text-align:right}
.kp-band-cols .is-turn{width:var(--turn)}
.kp-band-cols .is-won{width:var(--won)}
.kp-places{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap)}
.kp-p{position:relative;display:grid;align-items:center;column-gap:12px;min-width:0;min-height:var(--h);border-top:1px solid var(--line)}
/* a line: rank, face, name with upgrades, turnover, prize */
.kp-band.is-line .kp-p,.kp-p.is-lead,.kp-p.is-solo{grid-template-columns:var(--rk) var(--fc) minmax(0,1fr) var(--turn);grid-template-areas:"rk face who turn"}
.kp-band.is-line .kp-p:has(.kp-p-prize),.kp-p.is-lead:has(.kp-p-prize),.kp-p.is-solo:has(.kp-p-prize){grid-template-columns:var(--rk) var(--fc) minmax(0,1fr) var(--turn) var(--won);grid-template-areas:"rk face who turn won"}
/* a pair cell: rank, face, name over turnover */
.kp-band.is-pair .kp-p:not(.is-lead):not(.is-solo){grid-template-columns:var(--rk) var(--fc) minmax(0,1fr);grid-template-areas:"rk face who" "rk face turn";align-content:center;column-gap:10px;row-gap:1px}
.kp-band.is-pair .kp-p.is-free:not(.is-lead):not(.is-solo){grid-template-areas:"rk face who"}
/* the place left without a partner gets a full line on the lead's number columns instead of half a row */
.kp-p.is-solo{grid-column:1 / -1}
.kp-p-rk{grid-area:rk;padding-right:2px;color:var(--t2);text-align:right;font-family:var(--num);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.kp-p .kp-p-face{grid-area:face;position:relative;inset:auto;width:var(--fc);height:var(--fc);color:var(--t2)}
.kp-p .kp-p-face b{font-size:calc(var(--fc) * .42)}
.kp-p.is-free .kp-p-face{display:block;border-radius:50%;border:1px dashed rgba(255,255,255,.14)}
/* best drop in the seat: the skin on a quiet disc, never cropped — the same treatment as the leaders' dials */
.kp-p .kp-p-face.has-skin{background:#16171c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.kp-p .kp-p-face.has-skin>b,.kp-p .kp-p-face.has-skin>img:not(.kp-p-skin),.kp-p .kp-p-face.has-skin>svg{visibility:hidden}
.kp-p .kp-p-face img.kp-p-skin{inset:3%;width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
.kp-p-who{grid-area:who;display:flex;flex-direction:column;gap:1px;min-width:0}
.kp-p-name{display:flex;align-items:center;gap:8px;min-width:0}
.kp-p-who b{overflow:hidden;min-width:0;font-size:14px;line-height:19px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.kp-p-name .kp-you{flex:none;margin:0;line-height:16px}
.kp-p-who small{overflow:hidden;color:var(--t3);font-size:12.5px;line-height:16px;white-space:nowrap;text-overflow:ellipsis}
.kp-p-turn{grid-area:turn;display:flex;justify-content:flex-end;min-width:0;overflow:hidden;color:var(--t1);font-size:14px;line-height:19px;font-weight:600}
.kp-p-turn .kp-coin,.kp-p-prize .kp-coin{width:12px;height:12px}
.kp-p-prize{grid-area:won;display:flex;justify-content:flex-end;color:var(--gold-hi);font-size:14px;font-weight:600}
.kp-band.is-pair .kp-p:not(.is-lead):not(.is-solo) .kp-p-who b{font-size:13.5px;line-height:18px}
.kp-band.is-pair .kp-p:not(.is-lead):not(.is-solo) .kp-p-turn{justify-content:flex-start;font-size:12.5px;line-height:16px;font-weight:500}
.kp-band.is-pair .kp-p:not(.is-lead):not(.is-solo) .kp-p-turn .kp-coin{width:11px;height:11px}
/* in the narrower pair column the lead's numbers take only the room they need, the name keeps the rest */
.kp-band.is-pair .kp-p.is-lead{grid-template-columns:var(--rk) var(--fc) minmax(0,1fr) auto}
.kp-band.is-pair .kp-p.is-lead:has(.kp-p-prize){grid-template-columns:var(--rk) var(--fc) minmax(0,1fr) auto auto;column-gap:14px}
/* the lead place of a band: the tier's first seat, on a quiet raised surface that grows sideways through shadows,
   so its rank, face and numbers stay on the band's columns */
.kp-p.is-lead{grid-column:1 / -1;--fc:38px;min-height:64px;margin-bottom:8px;border-top:0;border-radius:12px;background:var(--lead);box-shadow:calc(var(--bleed) * -1) 0 0 var(--lead),var(--bleed) 0 0 var(--lead)}
.kp-p.is-lead .kp-p-rk{color:var(--gold-hi);font-size:20px}
.kp-p.is-lead .kp-p-who b{font-size:15.5px;line-height:20px}
.kp-p.is-lead .kp-p-turn,.kp-p.is-lead .kp-p-prize{font-size:15px}
.kp-p.is-lead .kp-p-turn .kp-coin,.kp-p.is-lead .kp-p-prize .kp-coin{width:13px;height:13px}
.kp-band.is-line .kp-p:not(.is-lead) .kp-p-rk{font-size:16px}
.kp-band.is-line .kp-p:not(.is-lead) .kp-p-who b{font-size:14.5px}
/* free: the number and an empty dashed seat; the first free place in 4–100 is the invitation */
.kp-p.is-free:not(.is-lead) .kp-p-rk{color:var(--t3)}
.kp-p.is-free .kp-p-who b{color:var(--t3);font-weight:500}
.kp-p.is-free .kp-p-prize{color:rgb(var(--gold-rgb)/.62)}
.kp-p.is-free .kp-p-prize .kp-coin{opacity:.55}
.kp-p.is-next .kp-p-face{border-color:rgb(var(--gold-rgb)/.75)}
.kp-p.is-next:not(.is-lead) .kp-p-rk{color:var(--t1)}
.kp-p.is-next .kp-p-who small{color:var(--gold-hi)}
.kp-p.is-hidden .kp-p-who b{color:var(--t2);font-weight:500}
.kp-p.is-me{--lead:rgb(var(--gold-rgb)/.1);background:rgb(var(--gold-rgb)/.08);box-shadow:calc(var(--bleed) * -1) 0 0 rgb(var(--gold-rgb)/.08),var(--bleed) 0 0 rgb(var(--gold-rgb)/.08)}
.kp-p.is-lead.is-me{background:var(--lead);box-shadow:calc(var(--bleed) * -1) 0 0 var(--lead),var(--bleed) 0 0 var(--lead)}
.kp-p.is-me .kp-p-rk{color:var(--gold-hi)}
.kp-p.is-flash{animation:kp-flash 1.4s var(--ease)}
/* the folded tail */
.kp-band:not(.is-open) .kp-p.is-fold{display:none}
.kp-band.is-opening .kp-p.is-fold{animation:kp-in .4s var(--ease) both}
@keyframes kp-in{from{opacity:0;transform:translateY(-4px)}}
.kp .kp-more{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:var(--t2);font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;transition:color .2s}
.kp .kp-more:hover{color:var(--gold-hi)}
.kp-more svg{flex:none;width:12px;height:12px;transition:transform .35s var(--ease)}
.kp-band.is-open .kp-more svg{transform:rotate(180deg)}
.kp-dock{display:none}

/* ---------- states ---------- */
.kp-leader.is-flash{animation:kp-flash 1.4s var(--ease)}
@keyframes kp-flash{25%{background:rgb(var(--gold-rgb)/.16)}}
.kp-empty{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:32px var(--fx) 36px}
.kp-empty b{font-size:18px;font-weight:600}
.kp-empty p{color:var(--t2);font-size:14px}
.kp-empty .kp-btn{margin-top:8px}
.kp-skel{padding:32px var(--fx) 36px;animation:kp-pulse 1.5s ease-in-out infinite}
.kp-skel i{display:block;border-radius:8px;background:var(--pd2-s2)}
.kp-skel-top{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:272px}
.kp-skel-top .a{grid-row:1 / -1}
.kp-skel-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 64px;margin-top:44px}
.kp-skel-grid i{height:120px}
@keyframes kp-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.kp *,.kp *::before,.kp *::after{animation:none!important;transition:none!important}}

/* ---------- narrower page column ---------- */
@container kp (max-width:1060px){
  .kp-leader.is-1 .kp-dial{--d:168px}
  .kp-leader.is-1{column-gap:28px;padding-right:32px}
  .kp-leader.is-1 .kp-leader-name{font-size:34px;line-height:40px}
  .kp-chasers .kp-leader{padding-left:32px}
  .kp-chasers .kp-dial{--d:96px}
  .kp-frame{--fx:32px}
  .kp-band{--bx:24px;--turn:100px;--won:76px;--gap:20px}
}
/* narrow desktops and tablets: the bands stack in rank order before the 2×2 columns get too thin */
@container kp (max-width:1000px){
  .kp-ladder{grid-template-columns:minmax(0,1fr)}
  .kp-band:nth-child(n){padding:28px var(--fx) 30px;border-right:0}
  .kp-band+.kp-band{border-top:1px solid var(--line)}
  .kp-band{--turn:128px;--won:100px;--gap:32px}
}
@container kp (max-width:880px){
  .kp-in{padding:30px 24px 60px}
  /* the countdown leads the facts instead of dangling alone on a second line */
  .kp-fact-cd{order:-1;margin-left:0;flex-basis:100%}
  .kp-frame{--fx:24px}
  .kp-summit{grid-template-columns:1fr}
  .kp-leader.is-1{padding:32px var(--fx)}
  .kp-chasers{grid-template-columns:1fr 1fr;border-left:0;border-top:1px solid var(--line)}
  .kp-chasers .kp-leader{padding:24px 24px 24px var(--fx)}
  .kp-chasers .kp-leader+.kp-leader{padding:24px var(--fx) 24px 24px;border-top:0;border-left:1px solid var(--line)}
  .kp-skel-grid{grid-template-columns:1fr}
}

/* ---------- phones ---------- */
@container kp (max-width:600px){
  .kp-in{padding:22px 16px 28px}
  .kp-head{grid-template-columns:1fr;row-gap:16px}
  .kp h1{font-size:36px;gap:11px}
  .kp-mark{width:22px}
  .kp-mark svg{width:20px;height:22px}
  /* phones: the period switch right under the title — everything below it belongs to the chosen period */
  .kp-tabs{order:2}
  .kp-tabs button{flex:1;padding:0 8px}
  /* phones: countdown first, then the facts, the week track and the rule as a quiet footnote */
  .kp-head{padding-top:22px;padding-bottom:20px;row-gap:14px}
  .kp-head-body{order:3;margin-top:0;display:flex;flex-direction:column}
  .kp-facts{order:1;display:grid;grid-template-columns:1fr;gap:4px;margin-top:0}
  .kp-week{order:2;gap:4px;margin-top:12px}
  .kp-rule{order:3;margin-top:12px;color:var(--t3);font-size:13px;line-height:19px}
  .kp-fact{font-size:14px;line-height:20px;white-space:normal}
  .kp-fact-cd{margin-left:0;order:-1;font-size:14px}
  .kp-fact-cd .kp-cd{font-size:20px}
  .kp-week li{gap:6px}
  .kp-week span{font-size:12px;text-align:center}
  .kp-frame{--fx:16px;border-radius:14px}
  .kp-leader.is-1{column-gap:20px;padding:26px var(--fx) 24px}
  .kp-leader.is-1 .kp-dial{--d:116px}
  .kp-leader.is-1 .kp-medal{min-width:28px;height:28px;font-size:14px}
  .kp-leader.is-1 .kp-leader-name{margin-bottom:2px;font-size:25px;line-height:30px}
  .kp-leader.is-1 .kp-leader-turn,.kp-leader.is-1 .kp-leader-prize{font-size:18px;line-height:23px}
  .kp-leader.is-1 .kp-leader-turn .kp-coin,.kp-leader.is-1 .kp-leader-prize .kp-coin{width:16px;height:16px}
  .kp-chasers .kp-leader,.kp-chasers .kp-leader+.kp-leader{grid-template-columns:1fr;row-gap:16px;align-items:start;padding:22px 14px 22px var(--fx)}
  .kp-chasers .kp-leader+.kp-leader{padding:22px var(--fx) 22px 14px}
  .kp-chasers .kp-dial{--d:76px}
  .kp-medal{min-width:22px;height:22px;font-size:12px;box-shadow:0 0 0 3px var(--night)}
  .kp-leader-name{font-size:16px;line-height:21px}
  .kp-leader-turn,.kp-leader-prize{flex-wrap:wrap;column-gap:6px;font-size:14.5px;line-height:19px}
  .kp-leader-turn small,.kp-leader-prize small{font-size:12px}
  .kp-leader-note{font-size:12.5px}
  .kp-leader-drop{white-space:normal;font-size:12.5px}
  .kp-face.kp-mini{width:22px;height:22px}
  .kp-leader.is-1 .kp-face.kp-mini{width:26px;height:26px}
  .kp-me:not(.is-guest){display:grid;grid-template-columns:auto 1fr auto;column-gap:16px;row-gap:14px}
  .kp-me-goal{grid-column:1 / -1;width:auto;margin-left:0}
  .kp-me .kp-jump{grid-column:3;grid-row:1}
  .kp-me-text span{line-height:19px}
  .kp-me.is-guest{flex-direction:column;align-items:stretch;gap:14px}
  .kp-head{padding:24px var(--fx) 22px}
  /* phones: lines keep one place per line with the turnover under the name and the prize on the right;
     pair bands stay two per row */
  .kp-band:nth-child(n){padding:24px var(--fx) 26px}
  .kp-band{--rk:28px;--h:52px;--gap:16px;--bleed:10px;--lead:rgba(255,255,255,.06)}
  .kp-band.is-line{--h:56px}
  /* the head becomes two lines: title over the count on the left, the prize or column name bottom-right */
  .kp-band-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:12px;row-gap:2px}
  .kp-band-head h2{grid-column:1;font-size:16px}
  .kp-band-count{grid-column:1;grid-row:2}
  .kp-band-prize,.kp-band-cols{grid-column:2;grid-row:1 / 3;align-self:end;margin-left:0}
  .kp-band-cols .is-turn:not(:only-child){display:none}
  .kp-band-cols .is-turn{width:auto}
  .kp-band-cols .is-won{width:auto}
  .kp-band.is-line .kp-p,.kp-band.is-line .kp-p:has(.kp-p-prize),.kp-p.is-lead,.kp-p.is-lead:has(.kp-p-prize),.kp-band.is-pair .kp-p.is-lead:has(.kp-p-prize),.kp-p.is-solo,.kp-p.is-solo:has(.kp-p-prize){grid-template-columns:var(--rk) var(--fc) minmax(0,1fr) auto;grid-template-areas:"rk face who won" "rk face turn won";align-content:center;column-gap:12px;row-gap:1px}
  .kp-band.is-line .kp-p.is-free,.kp-p.is-lead.is-free,.kp-p.is-solo.is-free{grid-template-areas:"rk face who won"}
  .kp-band.is-line .kp-p:not(.is-free) .kp-p-who small,.kp-p.is-lead:not(.is-free) .kp-p-who small,.kp-p.is-solo:not(.is-free) .kp-p-who small{display:none}
  .kp-band.is-line .kp-p-turn,.kp-p.is-lead .kp-p-turn,.kp-p.is-solo .kp-p-turn{justify-content:flex-start;font-size:12.5px;line-height:16px;font-weight:500}
  .kp-band.is-line .kp-p-turn .kp-coin,.kp-p.is-lead .kp-p-turn .kp-coin,.kp-p.is-solo .kp-p-turn .kp-coin{width:11px;height:11px}
  .kp-p.is-lead{--fc:34px;min-height:60px}
  .kp-p.is-lead .kp-p-rk{font-size:18px}
  .kp-p.is-lead .kp-p-who b{font-size:15px}
  .kp-p.is-lead .kp-p-prize{font-size:14.5px}
  /* all-time tab: no prize column, so the turnover keeps the right edge */
  .kp-band.is-line .kp-p:not(:has(.kp-p-prize)),.kp-p.is-lead:not(:has(.kp-p-prize)),.kp-p.is-solo:not(:has(.kp-p-prize)){grid-template-areas:"rk face who turn"}
  .kp-band.is-line .kp-p:not(:has(.kp-p-prize)) .kp-p-turn,.kp-p.is-lead:not(:has(.kp-p-prize)) .kp-p-turn,.kp-p.is-solo:not(:has(.kp-p-prize)) .kp-p-turn{justify-content:flex-end;font-size:14px;font-weight:600}
  .kp-band.is-line .kp-p:not(:has(.kp-p-prize)):not(.is-free) .kp-p-who small,.kp-p.is-lead:not(:has(.kp-p-prize)):not(.is-free) .kp-p-who small,.kp-p.is-solo:not(:has(.kp-p-prize)):not(.is-free) .kp-p-who small{display:block}
  .kp-band.is-pair .kp-p:not(.is-lead):not(.is-solo){column-gap:8px}
  .kp-dock{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:6;display:flex;align-items:center;gap:12px;margin-top:18px;padding:8px 8px 8px 16px;border-radius:14px;background:rgba(24,25,30,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--line-2),0 12px 32px rgba(0,0,0,.5);transition:opacity .25s,transform .35s var(--ease)}
  .kp-dock.is-top{box-shadow:inset 0 0 0 1px rgb(var(--gold-rgb)/.38),0 12px 32px rgba(0,0,0,.5)}
  .kp-dock.is-away{opacity:0;transform:translateY(14px);pointer-events:none}
  .kp-dock .kp-me-rank{min-width:0;font-size:26px;line-height:28px}
  .kp-dock-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
  .kp-dock-text b{font-size:13.5px;font-weight:600}
  .kp-dock-text small{overflow:hidden;color:var(--t2);font-size:12px;white-space:nowrap;text-overflow:ellipsis}
  .kp-dock-text .kp-coin{width:11px;height:11px}
  .kp-dock .kp-jump{width:44px;padding:0;display:grid;place-items:center}
  .kp-skel-top{grid-template-columns:1fr;height:auto}
  .kp-skel-top i{height:120px}
}
@container kp (max-width:370px){
  .kp-in{padding-left:14px;padding-right:14px}
  .kp h1{font-size:36px}
  .kp-leader.is-1 .kp-dial{--d:100px}
  .kp-leader.is-1 .kp-leader-name{font-size:22px}
}
/* narrow phones: the two-column bands drop the faces so names and amounts keep their room */
@container kp (max-width:440px){
  .kp-band.is-pair{--gap:14px}
  /* narrow phones: the pair cells keep their seat (the best drop), just smaller */
  .kp-band.is-pair .kp-p:not(.is-lead):not(.is-solo){--fc:24px;--rk:24px;column-gap:7px}
}
