/* ══ THE LEADERBOARD INVITE — "Where you stand", recast (CEO 2026-09-26) ═══════════════════════
   "This whole section is dull and badly designed — where you stand should be a glitzy invite to
   view the leaderboard. Create new imagery that SELLS the idea of being competitive."

   One object: the awards-night plate (generated for this slot — a crowd on its feet under a
   glowing ladder of light; no lettering in it), a left-hand wash so the words sit on dark, the
   player's standing in gold numerals, and one big door to the full board. Evening, always — a
   pinned-dark surface in every theme (data-pn-surface tells the design system so), the same way
   the WahWahs card beside it is pinned cream. Every ink is set here and measured on the wash. */
html body .pn-si{
  --si-ink:#FFF7E6; --si-dim:#E6D9BF; --si-gold:#F2C94C; --si-gold-2:#E0B650; --si-cta:#C2410C;
  --pn-surface-ink:#FFF7E6; --pn-surface-ink-2:#E6D9BF;
  position:relative; overflow:hidden; isolation:isolate;
  min-height:340px; border-radius:14px; background:#07080f;
  box-shadow:0 0 0 1px rgba(242,201,76,.28), 0 24px 50px -24px rgba(0,0,0,.8);
  color:var(--si-ink);
}
html body .pn-si-art{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 40%;
  z-index:-2; transform:scale(1.02); transition:transform .8s cubic-bezier(.22,1,.36,1);
}
html body .pn-si:hover .pn-si-art{ transform:scale(1.06); }
@media (prefers-reduced-motion:reduce){ html body .pn-si-art{ transition:none; } html body .pn-si:hover .pn-si-art{ transform:scale(1.02); } }
html body .pn-si-wash{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(5,6,12,.94) 0%, rgba(5,6,12,.82) 42%, rgba(5,6,12,.25) 78%, rgba(5,6,12,.1) 100%),
             linear-gradient(0deg, rgba(5,6,12,.7), rgba(5,6,12,0) 45%);
}
html body .pn-si-in{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:26px 26px 24px; max-width:460px;
}
html body .pn-si-eye{
  font:700 11px/1 var(--mono),ui-monospace,monospace !important; letter-spacing:.2em !important;
  text-transform:uppercase !important; color:var(--si-gold) !important;
}
html body .pn-si-h, html body .hub-view[data-view] .pn-si.pv-mod h2.pn-si-h{
  margin:0 !important; font:900 clamp(30px,3.4vw,44px)/1 var(--pn-type-face),IS,sans-serif !important;
  letter-spacing:-.03em !important; text-transform:none !important; color:var(--si-ink) !important;
  text-wrap:balance; text-shadow:0 2px 18px rgba(0,0,0,.6);
}
html body .pn-si-sub{ margin:0 !important; max-width:38ch; font:500 15px/1.5 IS,sans-serif !important; color:var(--si-dim) !important; }
html body .pn-si-wait{ margin:4px 0 !important; font:500 13px/1.4 IS,sans-serif !important; color:var(--si-dim) !important; }

/* the standing, in gold numerals, on the plate */
html body .pn-si .pn-standing-host{ width:100%; margin:6px 0 4px; }
html body .pn-si .pn-stand{
  display:flex !important; flex-wrap:wrap; gap:10px 26px; padding:0 !important; margin:0 !important;
  background:none !important; border:0 !important; box-shadow:none !important;
}
html body .pn-si .ps-cell{ display:flex; flex-direction:column; gap:4px; background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
html body .pn-si .ps-k{
  font:700 10px/1 var(--mono),ui-monospace,monospace !important; letter-spacing:.18em !important;
  text-transform:uppercase !important; color:var(--si-dim) !important;
}
html body .pn-si .ps-n{
  font:900 34px/1 var(--pn-type-face),IS,sans-serif !important; letter-spacing:-.02em !important;
  color:var(--si-gold) !important; font-variant-numeric:tabular-nums; text-shadow:0 0 22px rgba(242,201,76,.35);
}
html body .pn-si .ps-n--out{ color:var(--si-dim) !important; text-shadow:none; }
html body .pn-si .ps-of{ font:500 12.5px/1.2 IS,sans-serif !important; color:var(--si-dim) !important; }
html body .pn-si .ps-note{ margin:6px 0 0 !important; font:500 13.5px/1.45 IS,sans-serif !important; color:var(--si-dim) !important; }
html body .pn-si .pn-stand--off{ flex-direction:column; gap:6px; }
html body .pn-si .pn-stand--off .ps-k{ color:var(--si-gold) !important; }

/* the door: big, bold, gold. Styled by id because style-01.css paints every office button through
   a twenty-deep :not() chain that no class selector can outrank. */
html body .pn-si-cta, #pn-si-cta{
  --pn-surface-ink:#1a1102;
  margin-top:8px; display:inline-flex; align-items:center; gap:8px;
  min-height:52px; padding:0 24px; border:0 !important; border-radius:10px; cursor:pointer;
  background-color:var(--si-gold) !important; color:#1a1102 !important;
  /* solid gold: pn-ds.css strips background-image from every button, so the bevel is done in shadows */
  font:800 16px/1 var(--pn-type-face),IS,sans-serif !important; letter-spacing:-.01em !important; text-transform:none !important;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 6px 0 rgba(90,62,5,.55), 0 14px 30px -10px rgba(242,201,76,.55) !important;
}
#pn-si-cta:hover{ filter:brightness(1.06); }
#pn-si-cta:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 4px 0 rgba(90,62,5,.55) !important; }
#pn-si-cta:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

@media (max-width:640px){
  html body .pn-si{ min-height:0; }
  html body .pn-si-art{ object-position:70% 30%; }
  html body .pn-si-wash{ background:linear-gradient(0deg, rgba(5,6,12,.95) 0%, rgba(5,6,12,.8) 55%, rgba(5,6,12,.35) 100%); }
  html body .pn-si-in{ padding:120px 18px 20px; max-width:none; }
  #pn-si-cta{ width:100%; justify-content:center; }
}