/* ================= friends ================= */
.hdr-right{display:flex;align-items:center;gap:9px}
.hdrbtn{position:relative;width:38px;height:38px;flex-shrink:0;border-radius:12px;cursor:pointer;
  background:#1d2240;border:1px solid var(--line);color:#aab2e0;
  display:flex;align-items:center;justify-content:center;transition:.16s}
.hdrbtn svg{width:20px;height:20px}
.hdrbtn:active{transform:scale(.94)}
.hdrbtn:hover{color:#fff;border-color:#39406e}
.hdrbadge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:linear-gradient(180deg,#ff5a3c,var(--red));color:#fff;
  font-size:10.5px;font-weight:800;line-height:18px;text-align:center;
  border:2px solid var(--bg);box-shadow:0 2px 8px rgba(227,53,13,.5)}
.hdrbadge.pop{animation:badgepop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes badgepop{0%{transform:scale(0)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
/* Two header buttons and the wallet already filled the bar; the leaderboard
   makes three, and on a small phone that pushed into the logo. Shrink the
   buttons rather than the wallet — the balance is the thing being read. */
@media(max-width:430px){
  .hdr-right{gap:7px}
  .hdrbtn{width:34px;height:34px;border-radius:10px}
  .hdrbtn svg{width:18px;height:18px}
}

/* ---- overlay panel ---- */
#friendsOverlay{position:fixed;inset:0;z-index:160;display:none;
  background:rgba(6,8,20,.72);backdrop-filter:blur(7px);
  align-items:flex-end;justify-content:center}
#friendsOverlay.show{display:flex;animation:ffade .18s ease}
@keyframes ffade{from{opacity:0}to{opacity:1}}
.fpanel{width:100%;max-width:520px;max-height:86vh;max-height:86dvh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#151a33,#0f1428);
  border:1px solid var(--line);border-bottom:none;border-radius:22px 22px 0 0;
  box-shadow:0 -18px 50px rgba(0,0,0,.6);animation:fup .26s cubic-bezier(.2,.9,.3,1);overflow:hidden}
@keyframes fup{from{transform:translateY(26px);opacity:.4}to{transform:none;opacity:1}}
@media(min-width:560px){
  #friendsOverlay{align-items:center}
  .fpanel{border-radius:22px;border-bottom:1px solid var(--line);max-height:78vh;max-height:78dvh}
}
.fhead{display:flex;align-items:center;gap:9px;padding:15px 14px 12px;position:relative}
.fhead::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 18%,rgba(255,255,255,.1) 82%,transparent)}
.fhead-t{flex:1;display:flex;align-items:baseline;gap:8px;min-width:0}
.ftitle{font-size:23px;letter-spacing:.09em;color:#fff}
.fcount{font-size:11px;font-weight:800;color:#8891c4;background:rgba(255,255,255,.07);
  padding:2px 8px;border-radius:99px;letter-spacing:.03em}
.fx{width:34px;height:34px;flex-shrink:0;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#98a0cd;
  display:flex;align-items:center;justify-content:center;transition:.15s}
.fx svg{width:17px;height:17px}
.fx:hover{background:rgba(255,255,255,.11);color:#fff}
.fx:active{transform:scale(.93)}
/* labelled, because a bare icon makes people hunt */
.faddbtn{display:flex;align-items:center;gap:6px;padding:8px 13px 8px 10px;border-radius:11px;cursor:pointer;
  border:none;background:linear-gradient(180deg,#ff5230,var(--red2) 60%,#b32409);color:#fff;
  font-family:'Outfit';font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 7px 18px -7px rgba(227,53,13,.85),inset 0 1px 0 rgba(255,255,255,.24);transition:.15s}
.faddbtn svg{width:16px;height:16px}
.faddbtn:hover{filter:brightness(1.08)}
.faddbtn:active{transform:scale(.95)}

/* underline tabs read as sections of one screen, not two big buttons */
.ftabs{display:flex;gap:22px;padding:11px 18px 0}
.ftab{position:relative;padding:0 0 10px;border:none;background:none;cursor:pointer;
  font-family:'Outfit';font-size:12.5px;font-weight:700;letter-spacing:.05em;color:#79809f;transition:.15s}
.ftab b{display:inline-block;min-width:17px;height:17px;line-height:17px;margin-left:6px;padding:0 4px;
  border-radius:99px;background:var(--red);color:#fff;font-size:10px;font-weight:800}
.ftab::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--gold);transform:scaleX(0);transition:transform .18s}
.ftab.active{color:#fff}
.ftab.active::after{transform:scaleX(1)}

.fbody{flex:1;overflow-y:auto;padding:10px 12px 14px;-webkit-overflow-scrolling:touch}
.fsec{display:flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#6d75a0;font-weight:800;margin:14px 6px 6px}
.fsec i{font-style:normal;background:rgba(255,255,255,.08);color:#aab1dd;
  padding:1px 6px;border-radius:99px;font-size:9px;letter-spacing:.03em}
.fsec:first-child{margin-top:2px}

/* one hairline-separated list instead of a stack of floating cards */
.flist{background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden}
.frow{width:100%;display:flex;align-items:center;gap:11px;padding:11px 12px;
  background:none;border:none;border-top:1px solid rgba(255,255,255,.055);
  cursor:pointer;text-align:left;font-family:'Outfit';transition:background .14s;
  -webkit-tap-highlight-color:transparent}
.frow:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:12px}
.frow:first-child{border-top:none}
.frow.static{cursor:default}
.frow:not(.static):hover{background:rgba(255,255,255,.045)}
.frow:not(.static):active{background:rgba(255,255,255,.075)}
.frank{width:15px;flex-shrink:0;text-align:center;font-family:'Bebas Neue';font-size:16px;
  color:#4d5480;letter-spacing:.02em}
.frank.top{color:var(--gold)}
/* the ID-card photo frame again, so a trainer looks the same everywhere */
.fframe{position:relative;width:40px;height:48px;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:22px;color:#fff;
  background:linear-gradient(155deg,hsl(var(--fh) 60% 50%),hsl(var(--fh) 66% 27%));
  border:1px solid rgba(255,203,5,.28);
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.35)}
.fframe.live{border-color:rgba(31,160,83,.6)}
.fframe.big{width:70px;height:86px;font-size:38px;border-radius:10px}
.fdot{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;
  background:var(--green);border:2.5px solid #151a33}
.fmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fname{font-size:14px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsub{font-size:10.5px;color:#767ea6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fval{flex-shrink:0;font-family:'Bebas Neue';font-size:19px;color:var(--gold);letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.fchev{width:15px;height:15px;flex-shrink:0;color:#3f4675}

.fbtns{display:flex;align-items:center;gap:6px;flex-shrink:0}
.fbtn{padding:8px 13px;border:none;border-radius:10px;cursor:pointer;font-family:'Outfit';
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;transition:.15s}
.fbtn.yes{background:linear-gradient(180deg,#31c973,var(--green));color:#052d16;
  box-shadow:0 6px 14px -6px rgba(31,160,83,.9)}
.fbtn.no{background:rgba(255,255,255,.06);color:#98a0cd;border:1px solid rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;padding:8px}
.fbtn.no svg{width:14px;height:14px}
.fbtn.no.wide{padding:8px 13px}
.fbtn:active{transform:scale(.95)}

.fempty{text-align:center;padding:44px 24px 34px;display:flex;flex-direction:column;align-items:center;gap:7px}
.fempty-ic{width:52px;height:64px;border-radius:9px;margin-bottom:6px;
  border:1.5px dashed rgba(255,203,5,.32);background:rgba(255,255,255,.02)}
.fempty b{font-size:15.5px;color:#fff;font-weight:700}
.fempty span{font-size:12px;color:#767ea6;line-height:1.55;max-width:250px}
.fempty .fbtn{margin-top:12px;padding:11px 20px}
.fskel{height:64px;margin-bottom:8px;border-radius:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.07),rgba(255,255,255,.03));
  background-size:200% 100%;animation:fsk 1.15s linear infinite}
.fskel.tall{height:132px}
@keyframes fsk{from{background-position:200% 0}to{background-position:-200% 0}}

/* ================= a trainer's profile IS a card =================
   Real card anatomy — gold border, inner frame, name/value rail, art window,
   type line, two "attack" rows, the three-cell footer where weakness and
   retreat live, flavour text. One object. One palette: gold, ink, tier accent.
   Nothing else gets a colour. */
/* Never scrolls and never clips: the nav and the trade button keep their size,
   and the card in between is scaled by fitProfileCard() to whatever is left. */
.pcard-panel{background:linear-gradient(180deg,#141931,#0d1225);
  overflow:hidden;
  padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.pc-nav{display:flex;justify-content:space-between;padding:13px 13px 0}

.pc-stage{perspective:1400px;touch-action:pan-y;padding:12px 16px 20px;display:flex;justify-content:center;
  align-items:flex-start;overflow:visible}
/* scaled by JS — kept separate from .pc so it never fights the flip transform */
.pc-fit{width:100%;max-width:330px;transform-origin:top center;will-change:transform}
.pc-dealing{width:200px;aspect-ratio:63/88;border-radius:12px;overflow:hidden;
  box-shadow:0 22px 44px -14px rgba(0,0,0,.85);animation:pcdeal 1.15s ease-in-out infinite}
.pc-dealing .cbimg{width:100%;height:100%;object-fit:cover;display:block}
@keyframes pcdeal{0%,100%{transform:rotate(-3.5deg) translateY(0)}50%{transform:rotate(3.5deg) translateY(-9px)}}

.pc{position:relative;width:100%;transform-style:preserve-3d;
  transform:rotateY(180deg);transition:transform .8s cubic-bezier(.25,.9,.25,1)}
.pc.turned{transform:rotateY(0)}
.pc-face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:13px}
.pc-back{position:absolute;inset:0;transform:rotateY(180deg);overflow:hidden}
.pc-back .cbimg{width:100%;height:100%;object-fit:cover;display:block}

/* the gold card stock everything is printed on */
.pc-front{position:relative;padding:7px;overflow:hidden;
  background:linear-gradient(157deg,#ffe27a,#e8b933 26%,#b98b12 62%,#f2d264);
  box-shadow:0 24px 50px -16px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.35)}
.pc-inner{position:relative;border-radius:8px;padding:8px 9px 9px;overflow:hidden;
  background:linear-gradient(168deg,#20264b,#161b38 55%,#10142c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55)}
/* the tier tints only the inner frame — nothing else on the card is coloured */
.t-rookie    .pc-inner{background:linear-gradient(168deg,#242a4e,#171c3a 55%,#111530)}
.t-collector .pc-inner{background:linear-gradient(168deg,#1c3358,#152340 55%,#101828)}
.t-veteran   .pc-inner{background:linear-gradient(168deg,#2c2454,#1d1740 55%,#13102b)}
.t-elite     .pc-inner{background:linear-gradient(168deg,#4a2716,#301a10 55%,#1b1109)}
.t-champion  .pc-inner{background:linear-gradient(168deg,#4a3a08,#2e2405 55%,#191300)}
.t-champion .pc-front{background:linear-gradient(157deg,#fff3c0,#ffd447 24%,#e0a800 60%,#fff0b6)}

/* name rail: their face, name and value — the portrait lives here now */
.pc-rail{display:flex;align-items:center;gap:9px;padding:0 2px 7px}
.pc-rail .fframe.rail{width:34px;height:41px;font-size:19px;border-radius:6px;border-width:1.5px;
  box-shadow:inset 0 -5px 12px rgba(0,0,0,.32),inset 0 0 0 1px rgba(0,0,0,.4)}
.pc-idn{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pc-name{font-family:'Bebas Neue';font-size:24px;letter-spacing:.03em;color:#fff;line-height:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 4px rgba(0,0,0,.5)}
.pc-seen2{font-size:9.5px;color:#8a91bb;letter-spacing:.02em}
/* live players get the dot rather than a timestamp nobody can parse */
.pc-on{display:inline-flex;align-items:center;gap:5px;font-weight:800;letter-spacing:.05em;
  color:#5fe39a;font-size:9.5px}
.pc-on i{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 2px rgba(31,160,83,.25);animation:pconpulse 2s ease-in-out infinite}
@keyframes pconpulse{0%,100%{box-shadow:0 0 0 2px rgba(31,160,83,.25)}
  50%{box-shadow:0 0 0 4px rgba(31,160,83,.08)}}
.pc-hp{display:flex;align-items:baseline;gap:4px;flex-shrink:0}
.pc-hp i{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.14em;color:#ffcb05;opacity:.8}
.pc-hp b{font-family:'Bebas Neue';font-size:26px;color:#fff;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 4px rgba(0,0,0,.5)}

/* best pull reuses the More page's trophy: pedestal, floating card, gold ribbon */
.pc-trophy{position:relative;border-radius:9px;overflow:hidden;padding:10px 10px 11px;text-align:center;
  background:radial-gradient(125% 82% at 50% -4%,rgba(255,255,255,.075),rgba(0,0,0,.34) 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pc-trophy::before{content:'';position:absolute;top:-26%;left:50%;transform:translateX(-50%);
  width:78%;height:78%;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--fc,#ffd76a),transparent 60%);opacity:.2;filter:blur(8px)}
/* the card is the point of this panel — let it fill the frame */
.pc-trophy .tro-stage{height:182px;margin:10px 0 9px}
.pc-trophy .tro-stage img.trocard{height:182px;border-radius:7px;
  box-shadow:0 16px 30px -8px rgba(0,0,0,.8)}
.pc-trophy .tro-stage .pedestal{width:118px;height:16px}
.pc-trophy .tro-name{font-size:13px;min-height:0}
.pc-trophy .tro-val{font-size:23px}
.pc-trophy .tro-empty{width:112px;height:156px;font-size:34px}
.pc-holo{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:3;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.5) 48%,rgba(190,225,255,.3) 54%,transparent 68%)}
.pc-front.live .pc-holo{animation:pcholo 1.5s ease-out .05s 1}
@keyframes pcholo{0%{opacity:.9;transform:translateX(-115%)}100%{opacity:0;transform:translateX(115%)}}

/* the type line under the art */

.pc-type{display:flex;align-items:center;gap:7px;margin-top:6px;padding:4px 6px;border-radius:3px;
  background:rgba(0,0,0,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pc-pips{display:flex;gap:3px}
.pc-pips i{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 5px rgba(255,203,5,.8);animation:pcpip .4s cubic-bezier(.2,1.7,.4,1) both}
.pc-pips i:nth-child(2){animation-delay:.06s}
.pc-pips i:nth-child(3){animation-delay:.12s}
.pc-pips i:nth-child(4){animation-delay:.18s}
.pc-pips i:nth-child(5){animation-delay:.24s}
@keyframes pcpip{from{transform:scale(0)}to{transform:scale(1)}}
.pc-tier{flex:1;font-size:9px;font-weight:800;letter-spacing:.16em;color:#ffd968}
.pc-seen{font-size:9px;color:#8a91bb;letter-spacing:.03em}

/* stat rows sit exactly where a card's attacks would */
.pc-moves{margin-top:7px}
.pc-move{display:flex;align-items:center;gap:9px;padding:7px 4px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.pc-move:last-child{border-bottom:none}
.pc-cost{width:17px;height:17px;flex-shrink:0;border-radius:50%;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.45),0 0 0 1.5px rgba(0,0,0,.4)}
.pc-cost.binder{background:radial-gradient(circle at 36% 30%,#fff2b0,#ffcb05 60%,#b58500)}
.pc-cost.slab{background:radial-gradient(circle at 36% 30%,#e8ecff,#9aa6d8 58%,#5a638f)}
.pc-mv{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pc-mv b{font-size:13px;font-weight:700;color:#fff}
.pc-mv em{font-style:normal;font-size:9.5px;color:#8087b0}
.pc-dmg{font-family:'Bebas Neue';font-size:21px;color:#fff;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 4px rgba(0,0,0,.45)}

/* the weakness / resistance / retreat strip */
.pc-foot{display:flex;margin-top:7px;border-top:1px solid rgba(255,255,255,.13);
  border-bottom:1px solid rgba(255,255,255,.13)}
.pc-cell{flex:1;padding:5px 4px;text-align:center;border-right:1px solid rgba(255,255,255,.09)}
.pc-cell:last-child{border-right:none}
.pc-cell i{display:block;font-style:normal;font-size:7.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#7b82ab}
.pc-cell b{display:block;margin-top:2px;font-family:'Bebas Neue';font-size:16px;color:#fff;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pc-track{height:3px;border-radius:99px;background:rgba(0,0,0,.5);overflow:hidden;margin-top:6px}
.pc-track i{display:block;height:100%;width:0;border-radius:99px;background:var(--gold);
  box-shadow:0 0 7px rgba(255,203,5,.7);animation:tbarfill .95s cubic-bezier(.2,.9,.3,1) .6s forwards}

.pc-flavour{margin-top:7px;font-size:10px;font-style:italic;line-height:1.45;color:#9aa1c8;
  padding:0 2px}
.pc-edge{display:flex;justify-content:space-between;margin-top:6px;padding:0 2px;
  font-size:7.5px;font-weight:700;letter-spacing:.1em;color:#5f668f}

/* the trade button reads as a foil ribbon slid under the card, not a web button */
/* hugs its own content and sits centred, rather than stretching the full width */
.pc-trade{display:flex;align-items:center;gap:11px;align-self:center;flex-shrink:0;
  width:auto;max-width:calc(100% - 32px);margin:0 0 4px;
  padding:10px 20px 10px 12px;border:none;border-radius:13px;cursor:pointer;
  text-align:left;font-family:'Outfit';
  background:linear-gradient(100deg,#fff,#eef1fb 55%,#dfe4f5);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .14s,filter .14s}
.pc-trade:hover{filter:brightness(1.06)}
.pc-trade:active{transform:scale(.985)}
.pc-trade-ic{width:28px;height:28px;flex-shrink:0;border-radius:9px;display:flex;align-items:center;
  justify-content:center;background:#141a33;color:#fff}
.pc-trade-ic svg{width:17px;height:17px}
.pc-trade-txt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.pc-trade-t{font-size:13px;font-weight:800;letter-spacing:.02em;color:#141a33;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pc-trade-s{font-size:10px;font-weight:700;color:#6b7290;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pc-trade.locked{background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.pc-trade.locked .pc-trade-ic{background:rgba(255,255,255,.06);color:#8087b0}
.pc-trade.locked .pc-trade-t{color:#aeb4dd}
.pc-trade.locked .pc-trade-s{color:#767ea6}

/* roster rows deal in one after another */
.flist .frow{animation:frowin .34s cubic-bezier(.2,.9,.3,1) both}
.flist .frow:nth-child(1){animation-delay:.02s}
.flist .frow:nth-child(2){animation-delay:.06s}
.flist .frow:nth-child(3){animation-delay:.1s}
.flist .frow:nth-child(4){animation-delay:.14s}
.flist .frow:nth-child(5){animation-delay:.18s}
.flist .frow:nth-child(n+6){animation-delay:.22s}
@keyframes frowin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* ---- trading progress gate ---- */
.fgate{padding:11px 14px 14px;border-top:1px solid var(--line);background:#11162b}
.fgate-top{display:flex;justify-content:space-between;align-items:baseline;
  font-size:11px;color:var(--dim);font-weight:600}
.fgate-top b{color:var(--gold);font-size:12px}
.fgate-bar{height:5px;border-radius:99px;background:#232a4e;overflow:hidden;margin:7px 0 5px}
.fgate-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--red2),var(--gold));transition:width .5s}
.fgate-sub{font-size:10px;color:var(--dim2)}

/* ---- add a trainer: a physical ID card, not a dialog ----
   No floating icon, no rainbow band. A red header band, an engraved guilloche
   like real ID stock, a photo frame that develops as you type, and an ink stamp
   when it's sent. */
.idc-wrap{width:100%;max-width:372px;display:flex;flex-direction:column;gap:12px;
  animation:idcin .4s cubic-bezier(.2,1.3,.34,1) both}
@keyframes idcin{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}

.idcard{position:relative;overflow:hidden;border-radius:16px;
  background:linear-gradient(158deg,#20284c,#161c39 52%,#101530);
  border:1px solid #38427a;
  box-shadow:0 30px 70px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.09)}
/* engraved security pattern — fine concentric arcs, barely there */
.idc-guilloche{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-radial-gradient(circle at 18% 118%,transparent 0 7px,rgba(140,160,255,.075) 7px 8px),
    repeating-radial-gradient(circle at 92% -14%,transparent 0 9px,rgba(255,203,5,.055) 9px 10px)}
/* one slow holo pass across the card as it opens */
.idc-sheen{position:absolute;top:0;bottom:0;width:44%;pointer-events:none;left:-55%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.11) 46%,transparent);
  animation:idcsheen 1.5s cubic-bezier(.3,0,.2,1) .22s both}
@keyframes idcsheen{to{left:120%}}

.idc-band{position:relative;display:flex;align-items:center;gap:8px;padding:9px 13px;
  background:linear-gradient(90deg,#e3350d,#b32409 62%,#7d1a05);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.08)}
.idc-kick{flex:1;font-family:'Bebas Neue';font-size:15px;letter-spacing:.17em;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.4)}
.idc-no{font-size:9.5px;font-weight:700;letter-spacing:.11em;color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums}

.idc-main{position:relative;display:flex;gap:14px;padding:16px 15px 17px}
/* photo frame — empty until a name starts landing in it */
.idc-photo{position:relative;width:70px;height:86px;flex-shrink:0;border-radius:9px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0e1329,#151b38);
  border:1px solid rgba(255,203,5,.3);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),inset 0 -10px 22px rgba(0,0,0,.4);
  transition:.4s}
.idc-photo.filled{background:linear-gradient(155deg,hsl(var(--fh) 62% 50%),hsl(var(--fh) 68% 28%));
  border-color:rgba(255,203,5,.62);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 20px -6px hsl(var(--fh) 70% 45%)}
.idc-init{font-family:'Bebas Neue';font-size:40px;line-height:1;color:rgba(255,255,255,.32);
  transition:.3s;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.idc-photo.filled .idc-init{color:#fff}
/* a scan line drifting down the empty frame, like the card is being read */
.idc-scan{position:absolute;left:0;right:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(120,190,255,.16),transparent);
  animation:idcscan 2.6s ease-in-out infinite}
@keyframes idcscan{0%,100%{top:-34%}50%{top:100%}}
.idc-photo.filled .idc-scan{display:none}

.idc-fields{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.idc-lab{font-size:8.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:#ffcb05;opacity:.72}
.idc-inp{width:100%;margin-top:5px;padding:0 0 5px;background:none;border:none;outline:none;color:#fff;
  font-family:'Bebas Neue';font-size:27px;letter-spacing:.045em}
.idc-inp::placeholder{color:#4d5688;letter-spacing:.05em}
.idc-val{margin-top:5px;padding-bottom:5px;color:#fff;
  font-family:'Bebas Neue';font-size:27px;letter-spacing:.045em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* dashed signature rule under the name, like a real form */
.idc-rule{height:1px;background:repeating-linear-gradient(90deg,rgba(255,203,5,.4) 0 5px,transparent 5px 9px)}
.idc-hint{margin-top:7px;font-size:10.5px;color:var(--dim);line-height:1.45;min-height:15px}
.idc-hint.bad{color:#ff7a5c;font-weight:700}

/* the stamp — slammed on, slightly crooked, ink sitting on top of the card */
.idc-stamp{position:absolute;right:9px;bottom:11px;transform:rotate(-9deg);
  animation:idcstamp .42s cubic-bezier(.3,1.7,.4,1) .1s both;pointer-events:none}
.idc-stamp b{display:block;padding:4px 11px 3px;border:2.5px solid #ff5230;border-radius:5px;
  font-family:'Bebas Neue';font-size:19px;letter-spacing:.13em;color:#ff5230;
  box-shadow:0 0 0 1px rgba(255,82,48,.22);opacity:.92;
  text-shadow:0 0 10px rgba(255,82,48,.35)}
@keyframes idcstamp{
  0%{opacity:0;transform:rotate(-9deg) scale(2.1)}
  70%{opacity:1;transform:rotate(-9deg) scale(.94)}
  100%{opacity:1;transform:rotate(-9deg) scale(1)}}
.idcard.stamped .idc-main{padding-bottom:30px}

.idcard.shake{animation:idcshake .34s ease}
@keyframes idcshake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* footer buttons sit outside the card, like it's resting on the counter */
.idc-foot{display:flex;gap:10px}
.idc-cancel,.idc-send{flex:1;padding:13px 16px;border:none;border-radius:13px;cursor:pointer;
  font-family:'Outfit';font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  transition:.16s}
.idc-cancel{flex:0 0 34%;background:rgba(255,255,255,.06);color:#9aa2d0;
  border:1px solid rgba(255,255,255,.09)}
.idc-cancel:hover{background:rgba(255,255,255,.11);color:#fff}
.idc-send{background:linear-gradient(180deg,#ff5230,var(--red2) 55%,#a82208);color:#fff;
  box-shadow:0 8px 22px -6px rgba(227,53,13,.7),inset 0 1px 0 rgba(255,255,255,.22)}
.idc-send.wide{flex:1}
.idc-send:hover{filter:brightness(1.08)}
.idc-cancel:active,.idc-send:active{transform:scale(.97)}
.idc-send:disabled{opacity:.6;cursor:default}

/* a real picture fills the frame the monogram used to sit in */
.fpic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---- your profile, at the top of More ---- */
.mep{position:relative;display:flex;align-items:center;gap:15px;padding:14px;border-radius:16px;
  background:linear-gradient(158deg,#212850,#161b38 58%,#111531);
  border:1px solid #333b6e;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.mep::before{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;opacity:.5;
  background:repeating-radial-gradient(circle at 12% 120%,transparent 0 8px,rgba(140,160,255,.06) 8px 9px)}
.mep-face{position:relative;width:78px;height:78px;flex-shrink:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;overflow:visible;
  background:none;border:none;padding:0;transition:transform .15s}
.mep-face img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  border:2px solid rgba(255,203,5,.45);box-shadow:0 6px 18px -6px rgba(0,0,0,.8)}
.mep-mono{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:36px;color:#fff;
  background:linear-gradient(155deg,hsl(var(--fh) 60% 50%),hsl(var(--fh) 66% 28%));
  border:2px dashed rgba(255,203,5,.4)}
.mep-face:active{transform:scale(.95)}
.mep-cam{position:absolute;right:-2px;bottom:-2px;width:27px;height:27px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#2c1c00;
  background:linear-gradient(180deg,#ffd447,#e8a800);border:2.5px solid #171c39;
  box-shadow:0 3px 10px -2px rgba(0,0,0,.7)}
.mep-cam svg{width:14px;height:14px}
.mep-face.busy{pointer-events:none}
.mep-face.busy img,.mep-face.busy .mep-mono{filter:brightness(.5);animation:mepbusy .9s linear infinite}
@keyframes mepbusy{0%,100%{opacity:.55}50%{opacity:.9}}
.mep-face.justset img{animation:mepset .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes mepset{0%{transform:scale(.72)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
.mep-side{flex:1;min-width:0}
.mep-k{font-size:8.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:#ffcb05;opacity:.75}
.mep-name{font-family:'Bebas Neue';font-size:27px;letter-spacing:.035em;color:#fff;line-height:1.1;
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mep-acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.mep-btn{padding:7px 12px;border-radius:9px;cursor:pointer;font-family:'Outfit';
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#cdd3f5;transition:.15s}
.mep-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.mep-btn:active{transform:scale(.95)}
.mep-btn.ghost{color:#8087b0}

/* browse a friend's collection straight from the roster */
.fbinder{
  flex:none;margin-right:10px;cursor:pointer;font-family:'Outfit';font-weight:700;
  font-size:11px;letter-spacing:.02em;padding:6px 11px;border-radius:9px;transition:.15s;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#a9b0d8;
}
.fbinder:hover{background:rgba(255,203,5,.14);border-color:rgba(255,203,5,.45);color:var(--gold)}
.fbinder:active{transform:scale(.94)}
/* the roster is tight well before 420px once the value column is in there */
@media(max-width:560px){.fbinder{padding:5px 9px;font-size:10.5px;margin-right:8px}}
@media(max-width:400px){.fbinder{padding:5px 7px;font-size:10px;margin-right:6px}}

/* ---- roster rows on a phone ----
   One nowrap line could not hold the name, the pending-trade chip, the stats,
   the Binder button and the value, so the stats were being cut off mid-word
   ("129 …") and you never saw slab counts or when someone was last on.
   Two rows instead: name and value up top, stats and Binder underneath, with
   the rank and avatar spanning both. Scoped to :not(.static) because request
   rows have a different set of children. */
@media(max-width:620px){
  .frow:not(.static):not(.lbrow){
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "rank face name val"
      "rank face sub  bind";
    column-gap:10px;row-gap:4px;align-items:center;
  }
  .frow:not(.static):not(.lbrow) .frank{grid-area:rank}
  .frow:not(.static):not(.lbrow) .fframe{grid-area:face}
  .frow:not(.static):not(.lbrow) .fmeta{display:contents}   /* let its two lines take areas */
  .frow:not(.static):not(.lbrow) .fnameline{grid-area:name;align-self:end}
  .frow:not(.static):not(.lbrow) .fsub{
    grid-area:sub;align-self:start;
    white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;
  }
  .frow:not(.static):not(.lbrow) .fval{grid-area:val;justify-self:end;align-self:end}
  .frow:not(.static):not(.lbrow) .fbinder{grid-area:bind;justify-self:end;align-self:start;margin-right:0}
  .frow:not(.static):not(.lbrow) .fchev{display:none}       /* the whole row is tappable anyway */
}

/* ================= LEADERBOARD =================
   The third tab of the friends panel. It reuses .flist and .frow so a trainer
   looks identical wherever you meet them — the only new anatomy is the board
   picker, the medal on the first three, the card art on the best-pull board,
   and the copy of your own row pinned to the bottom.

   That pinned row is the point of the whole screen: a leaderboard you have to
   scroll to find yourself in has failed at the one thing you opened it for.
   It hides itself when your real row is already on screen (see wireBoard). */

.lbpick{display:flex;gap:4px;padding:4px;margin:2px 0 10px;border-radius:13px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.lbtab{flex:1;min-width:0;padding:9px 6px;border:none;border-radius:10px;cursor:pointer;
  background:none;color:#8d95bd;font-family:'Outfit';font-size:11.5px;font-weight:800;
  letter-spacing:.04em;white-space:nowrap;transition:.16s;-webkit-tap-highlight-color:transparent}
.lbtab:hover{color:#e6e9ff}
.lbtab:active{transform:scale(.96)}
.lbtab.on{background:linear-gradient(180deg,#ffd94a,var(--gold));color:#2a1e02;
  box-shadow:0 5px 14px -6px rgba(255,203,5,.85),inset 0 1px 0 rgba(255,255,255,.4)}
.lbcap{font-size:10.5px;color:#6d75a0;letter-spacing:.02em;margin:0 6px 8px}

/* three digits fit — the pinned row can say 137 */
.lbrank{width:22px;font-size:17px}
.lbrank.r1{color:var(--gold);font-size:20px;text-shadow:0 0 12px rgba(255,203,5,.55)}
.lbrank.r2{color:#c9d2ea;font-size:19px;text-shadow:0 0 10px rgba(201,210,234,.35)}
.lbrank.r3{color:#cf8f57;font-size:18px;text-shadow:0 0 10px rgba(207,143,87,.3)}

/* On the best-pull board the card itself is the portrait, so the list reads as
   a wall of everybody's best hit. Their face drops into the corner as a badge —
   still identifiable, but the card is what you came to look at. */
.lbart{position:relative;width:40px;height:56px;flex-shrink:0;border-radius:6px;overflow:hidden;
  background:#0c1024;border:1px solid rgba(255,203,5,.26);
  box-shadow:0 4px 12px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.4)}
.lbart img{width:100%;height:100%;object-fit:cover;object-position:center 14%;display:block}
.lbart-fall{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:22px;color:#3f4675;font-style:normal}
.lbart.noart img{display:none}
.lbart.noart .lbart-fall{display:flex}
.lbart .fframe.tiny{position:absolute;right:-1px;bottom:-1px;width:19px;height:19px;
  border-radius:5px;font-size:11px;border-width:1px;
  box-shadow:0 0 0 1.5px #12172f,inset 0 -3px 7px rgba(0,0,0,.35)}
.lbart .fframe.tiny .fpic{border-radius:4px}
.lbart .fdot{display:none}

.lbyou{font-style:normal;margin-left:7px;padding:1px 6px;border-radius:99px;
  background:var(--gold);color:#2a1e02;font-size:8.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;vertical-align:1.5px}
.lblive{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--green);margin-left:7px;vertical-align:1px;
  box-shadow:0 0 7px rgba(31,160,83,.9)}
.lbval{font-size:19px}
.lbrow.me{background:rgba(255,203,5,.06);box-shadow:inset 3px 0 0 var(--gold)}
.lbrow.me:hover{background:rgba(255,203,5,.1)}

/* your own row, held at the foot of the panel */
.lbme{position:sticky;bottom:0;z-index:4;margin-top:9px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(20,25,50,.93),#141936);
  border:1px solid rgba(255,203,5,.32);
  box-shadow:0 -12px 26px rgba(6,8,20,.75),0 0 0 1px rgba(0,0,0,.3);
  transition:opacity .2s ease,transform .2s ease}
.lbme .frow{border-top:none;background:none}
.lbme.hide{opacity:0;transform:translateY(10px);pointer-events:none}
.lbme.flat{padding:12px 14px;text-align:center}
.lbme.flat span{font-size:11.5px;color:#8890bb;line-height:1.5}

/* your own card opened from the board — nobody to trade with */
.pc-trade.quiet{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  box-shadow:none;color:#98a0cd;justify-content:center}

@media(max-width:420px){
  .lbrow{gap:9px;padding:10px}
  .lbrow .fchev{display:none}
  .lbval{font-size:17px}
  .lbtab{font-size:10.5px;padding:8px 4px;letter-spacing:.01em}
}

/* the board on its own screen — no tabs above it, so the picker needs its own
   breathing room under the title */
.lbpanel .fbody{padding-top:13px}

/* The way in to your own trainer card — and, behind it, featured cards. Given
   the accent because it is the one button here that opens something rather than
   editing a field. */
.mep-btn.card{border-color:rgba(255,207,51,.45);color:#ffd76a}
.mep-btn.card:hover{border-color:#ffcf33;background:rgba(255,207,51,.1)}

/* ---- this week / hall of fame ---- */
.lbseason{display:flex;gap:6px;margin:0 0 10px}
.lbsn{flex:1;padding:7px 6px;border-radius:9px;cursor:pointer;font-family:'Outfit';
  font-size:11.5px;font-weight:800;letter-spacing:.02em;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--dim)}
.lbsn.on{background:rgba(255,207,51,.13);border-color:#ffcf33;color:#ffd76a}
.lbsn:active{transform:scale(.97)}

/* ================= THE HIGH SCORE TABLE =================
   Two earlier attempts failed the same way. A podium of three columns is a
   pattern any app could use, and a dot-leader table below it was thirteen
   identical lines of text — on a phone, a directory. Both threw away the one
   thing this game is actually about, which is the card art.

   So: every entry carries the card that put its owner there. Ranks two and
   three are marked with Poke Balls in silver and bronze, built from the same
   red/white/band shape the daily streak pips use; four downwards get a plain
   number, and that change of FORM is the podium without needing one. */

/* ---- the sign ---- */
.hshead{position:relative;padding:14px 0 10px;text-align:center;
  background:linear-gradient(180deg,#241a52,var(--pnl,#131736));
  border-bottom:1px solid rgba(255,255,255,.07)}
.hsbulbs{position:absolute;top:5px;left:8%;right:8%;height:8px;display:block;
  background:radial-gradient(circle at 4px 4px,#fff3b0 2.1px,rgba(255,203,5,.3) 2.9px,transparent 3.3px) 0 0/16px 8px;
  animation:mqChase 1.1s steps(2,end) infinite}
.hsplate{display:inline-flex;padding:5px 18px 6px;border-radius:10px;
  background:linear-gradient(180deg,#2b2150,#171034);
  box-shadow:inset 0 0 0 2px #ffcf33,inset 0 0 0 4px #14102c,0 6px 18px -5px rgba(255,203,5,.55)}
.hsplate b{font-family:'Bebas Neue';font-size:24px;letter-spacing:.1em;font-weight:400;
  color:#ffcf33;text-shadow:0 0 14px rgba(255,203,5,.6)}
.hscount{display:block;margin-top:6px;font-size:8.5px;letter-spacing:.26em;
  font-weight:800;color:#6c74a6}
.hsx{position:absolute;top:11px;right:11px}
.hssub{text-align:center;font-size:9.5px;letter-spacing:.2em;font-weight:800;
  color:#7b83b8;text-transform:uppercase;margin:0 0 10px}
/* a faint holo weave over the whole panel, the way a card catches light */
.hswrap{position:relative}
.hswrap::before{content:'';position:absolute;inset:-4px -2px;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.015) 22px 44px)}

/* ---- the balls ----
   Silver and bronze are the medals of every sports app ever made. Pokemon has
   its own hierarchy and anyone who would open this board already knows it, so
   the podium is Master, Ultra, Great. Drawn in CSS so the same component works
   at 11px on a ribbon and 190px as a watermark.

   display:block is load-bearing: a <span> with no display is inline, width and
   height do nothing to it, and the 190px watermark rendered 0x0 until this was
   set. It only worked in the rows because their wrapper is a flex container. */
.pb{display:block;position:relative;border-radius:50%;overflow:hidden;flex:none;
  box-shadow:0 3px 8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.55)}
.pb::before{content:'';position:absolute;inset:0;background:var(--top)}
.pb::after{content:'';position:absolute;left:0;right:0;top:47%;bottom:0;
  background:linear-gradient(180deg,#0b0d1c 0 12%,#f2f4ff 12% 100%)}
.pb i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  border-radius:50%;background:#f4f6ff;box-shadow:0 0 0 var(--rw,1.6px) #0b0d1c}
.pb.master{--top:linear-gradient(180deg,#8b5fd4,#5b2f9e)}
.pb.master .pb-m{position:absolute;z-index:3;top:14%;left:50%;transform:translateX(-50%);
  width:34%;height:22%;background:#ff5fb0;border-radius:2px 2px 40% 40%}
.pb.master .pb-d1,.pb.master .pb-d2{position:absolute;z-index:3;top:24%;width:12%;height:12%;
  border-radius:50%;background:#f2f4ff}
.pb.master .pb-d1{left:14%}
.pb.master .pb-d2{right:14%}
.pb.ultra{--top:linear-gradient(180deg,#2b2b2f,#161619)}
.pb.ultra .pb-m{position:absolute;z-index:3;top:8%;left:12%;right:12%;height:26%;
  background:linear-gradient(90deg,#f2c14b 0 26%,transparent 26% 74%,#f2c14b 74% 100%)}
.pb.great{--top:linear-gradient(180deg,#3f86e8,#245fbc)}
.pb.great .pb-m{position:absolute;z-index:3;top:6%;left:8%;right:8%;height:30%;
  background:linear-gradient(90deg,#e8443f 0 20%,transparent 20% 80%,#e8443f 80% 100%);
  border-radius:50% 50% 0 0/70% 70% 0 0}

/* ---- the champion ----
   The first attempt was a rainbow diagonal weave meant to read as foil. It read
   as a barber pole — and on the boards with no card art it was a barber pole
   with nothing on it. Gone.

   The champion's motif is the MASTER BALL: a chip on the ribbon and the same
   ball at 190px bleeding off the corner behind him, over a deep purple field
   lit from the top left. Corners cut rather than rounded, the gold rule drawn
   inset along the cut, and the rank ghosted off the bottom edge. */
.hschamp{position:relative;display:flex;gap:13px;padding:14px;margin:0 0 11px;
  cursor:pointer;overflow:hidden;
  clip-path:polygon(0 15px,15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%);
  background:radial-gradient(120% 130% at 16% 0%,#42307d 0%,#1d1546 44%,#0e0b26 100%);
  animation:hsRise .5s cubic-bezier(.2,1.2,.35,1) both}
.hschamp:active{transform:scale(.99)}
@keyframes hsRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hsc-spot{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 22% -10%,rgba(255,220,120,.22),transparent 62%)}
.hsc-ball{position:absolute;right:-46px;top:50%;transform:translateY(-50%) rotate(-12deg);
  opacity:.32;pointer-events:none}
.hsc-ghost{position:absolute;right:10px;bottom:-18px;z-index:1;pointer-events:none;
  font-family:'Bebas Neue';font-size:112px;line-height:1;color:transparent;
  -webkit-text-stroke:1.6px rgba(255,214,90,.22)}
/* the rule follows the cut, which a border cannot do */
.hsc-edge{position:absolute;inset:0;z-index:3;pointer-events:none;
  clip-path:polygon(0 15px,15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,214,90,.9),inset 0 0 26px -8px rgba(255,203,5,.75)}
/* white ring = a card's border. Tilted, because a card set down is never square */
.hsc-art{position:relative;z-index:2;width:74px;flex:0 0 74px;aspect-ratio:5/7;
  border-radius:5px;overflow:hidden;transform:rotate(-3deg);background:#0a0d1f;
  box-shadow:0 8px 22px rgba(0,0,0,.75),0 0 0 2px rgba(255,255,255,.92),
    0 0 30px -6px rgba(255,203,5,.85)}
.hsc-art img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* the boards that rank a person, not a pull, have no card and get no card frame */
.hsc-art.noart{background:none;box-shadow:none;transform:none;aspect-ratio:auto;
  width:64px;flex:0 0 64px;border-radius:0;overflow:visible}
.hsc-art.noart .fframe{width:64px;height:80px;border-radius:9px;font-size:30px}
.hsc-art.noart .fpic{width:100%;height:100%;object-fit:cover;border-radius:9px}
.hsc-meta{position:relative;z-index:2;flex:1;min-width:0;display:flex;flex-direction:column;
  justify-content:center}
/* a stamped ribbon, cut at one end — not letterspaced text floating on a panel */
.hsc-crown{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:3px 10px 3px 7px;background:linear-gradient(180deg,#ffdf7a,#dfa400);
  clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%);
  font-size:8px;letter-spacing:.24em;font-weight:800;color:#2a1c00}
.hsc-name{font-family:'Bebas Neue';font-size:31px;line-height:.95;letter-spacing:.02em;
  color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 1px;
  text-shadow:0 2px 12px rgba(0,0,0,.7)}
.hsc-val{font-family:'Bebas Neue';font-size:27px;line-height:1;color:#ffe08a;
  text-shadow:0 0 18px rgba(255,203,5,.55)}
.hsc-card{font-size:9.5px;color:#b9a9d6;letter-spacing:.05em;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- the rows ----
   Same reasoning, quieter: corners cut instead of rounded, a directional wash
   instead of a flat alpha fill, the rank outlined and bleeding off the right
   edge. No hairline borders anywhere — a 1px white-alpha outline around every
   box is the single most generic thing a dark UI can do. Second and third are
   washed in their ball's own colour rather than only carrying a medal. */
.hslist{display:flex;flex-direction:column;gap:4px}
.hsrow{position:relative;min-width:0;display:flex;align-items:center;gap:9px;
  padding:6px 10px 6px 7px;overflow:hidden;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
  background:linear-gradient(100deg,rgba(255,255,255,.07),rgba(255,255,255,.018) 62%);
  animation:hsDeal .38s cubic-bezier(.2,1.1,.35,1) both;animation-delay:var(--d,0ms)}
@keyframes hsDeal{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.hsrow:active{transform:scale(.99)}
.hsrow::before{content:attr(data-r);position:absolute;right:8px;bottom:-13px;pointer-events:none;
  font-family:'Bebas Neue';font-size:50px;line-height:1;color:transparent;
  -webkit-text-stroke:1.2px rgba(255,255,255,.08)}
.hsrow.p2{background:linear-gradient(100deg,rgba(242,193,75,.22),rgba(242,193,75,.03) 60%)}
.hsrow.p3{background:linear-gradient(100deg,rgba(63,134,232,.24),rgba(63,134,232,.03) 60%)}
.hsrow.me{background:linear-gradient(100deg,rgba(126,214,255,.26),rgba(126,214,255,.04) 62%)}
.hsmedal{position:relative;z-index:1;width:24px;flex:0 0 24px;display:flex;justify-content:center}
.hsrk{position:relative;z-index:1;width:24px;flex:0 0 24px;text-align:center;
  font-family:'Bebas Neue';font-size:15px;color:#6b74a8;line-height:1}
.hsrow.me .hsrk{color:#9fe4ff}
.hsart{position:relative;z-index:1;width:31px;flex:0 0 31px;aspect-ratio:5/7;border-radius:3px;
  overflow:hidden;background:#0a0d1f;
  box-shadow:0 2px 7px rgba(0,0,0,.6),0 0 0 1.5px rgba(255,255,255,.78)}
.hsart img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.hsart.noart{background:none;box-shadow:none;aspect-ratio:auto;width:31px;flex:0 0 31px;
  border-radius:0;overflow:visible}
.hsart.noart .fframe{width:31px;height:39px;border-radius:5px;font-size:16px}
.hsart.noart .fpic{width:100%;height:100%;object-fit:cover;border-radius:5px}
.hsmeta{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column}
.hsname{font-size:12.5px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.hsrow.me .hsname{color:#9fe4ff}
.hscard{font-size:9.5px;color:#79819f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsval{position:relative;z-index:1;min-width:0;font-family:'Bebas Neue';font-size:18px;
  color:#ffe08a;line-height:1;white-space:nowrap}
.hsrow.me .hsval{color:#fff}
.hsyou{display:inline-block;margin-left:6px;font-style:normal;font-size:8px;letter-spacing:.16em;
  font-weight:800;color:#9fe4ff;vertical-align:1px;animation:hsBlink 1.7s steps(1,end) infinite}
@keyframes hsBlink{0%,62%{opacity:1}63%,100%{opacity:.25}}
.hsgap{font-size:9px;letter-spacing:.08em;font-weight:800;color:#5f8fb5;text-transform:uppercase;
  margin-top:1px}
.hsgap.top{color:#ffdc6a}
.hsrow.pinned{animation:none}

/* ---- the deadline ---- */
.lbclock{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 10px;
  font-size:10px;font-weight:800;letter-spacing:.12em;color:#ffd76a;text-transform:uppercase}
.lbclock b{font-variant-numeric:tabular-nums}
.lbclock i{width:5px;height:5px;border-radius:50%;background:#ffcf33;
  animation:lbpulse 2.4s ease-in-out infinite}
.lbclock.hot{color:#ff9a9a}
.lbclock.hot i{background:#ff5a5a;animation-duration:1s}
@keyframes lbpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---- desktop ----
   A single column of 32px cards down the middle of a wide panel is a phone
   layout that got bigger. Two columns — but only with the room for them.

   THE FIRST VERSION OVERFLOWED SIDEWAYS. `1fr` is `minmax(auto,1fr)`, and auto
   is min-CONTENT: a row holding "$1,095,754.28" on a nowrap span simply refused
   to be narrower than that, so the columns pushed past the panel and the whole
   board grew a horizontal scrollbar. minmax(0,1fr) lets the column win, and
   min-width:0 lets the flex children inside it be told. Both are needed; either
   alone still overflows.

   620px was also too eager. Two columns of a row that carries a photo, a name,
   a sub-line and a seven-figure number needs about 900px before it stops being
   cramped, so that is where it starts. */
@media (min-width:900px){
  .hschamp{max-width:520px;margin-left:auto;margin-right:auto}
  .hslist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .hsrow.pinned{grid-column:1/-1}
}
/* the row has to be shrinkable whatever the layout above it decides */
.hsrow{min-width:0}
.hsval{min-width:0}

@media (prefers-reduced-motion:reduce){
  .hschamp,.hsrow{animation:none}
  .hschamp::after,.hsbulbs,.hsyou,.lbclock i{animation:none}
}