/* A team or player name that links (game cards): the accent on hover, as the byline's author. */
.ps-rel-head .gc-name,.ps-rel-head .gc-pname{transition:color .15s ease}
@media (hover:hover){.ps-rel-head:hover .gc-name,.ps-rel-head:hover .gc-pname{color:var(--t-accent, #1D6FD8) !important}}
/* The next-match box links to the game, so its time takes the accent on hover, like the names above. This lives
   here, not in HeadCard: the pages using .hc-glink render the box without injecting HeadCard's own CSS. */
.hc-gname{transition:color .15s ease}
@media (hover:hover){.hc-glink:hover .hc-gname{color:var(--t-accent, #1D6FD8) !important}}
  .pb-tease{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .pb-tease p{flex:1 1 260px;margin:0;font-size:14px;color:var(--t-body, #334155)}
  .pb-tease .ps-cta{white-space:nowrap;flex-shrink:0}
  @media (max-width:640px){.pb-tease{gap:12px}.pb-tease p{flex-basis:100%}.pb-tease .ps-cta{flex:1 1 100%;text-align:center;justify-content:center}}
  .pb-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:22px}
  .pb-k{font-family:'Nunito', 'Nunito Fallback', ui-rounded, 'SF Pro Rounded', system-ui, 'Helvetica Neue', Arial, sans-serif;font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--t-muted, #64748B);margin-bottom:8px}
  .pb-v{font-family:'Nunito', 'Nunito Fallback', ui-rounded, 'SF Pro Rounded', system-ui, 'Helvetica Neue', Arial, sans-serif;font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
  .pb-sub{font-size:12px;color:var(--t-muted, #64748B);margin-top:7px;line-height:1.4}
  .pb-cta-slim{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;padding:24px 32px !important;margin-top:20px}.pb-cta-act{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}@media (max-width:640px){.pb-cta-slim{flex-direction:column;align-items:flex-start;padding:20px 18px !important}.pb-cta-act{flex-direction:row;flex-wrap:wrap;gap:12px 16px}}.pb-cta{border-radius:24px;padding:28px 32px;color:#fff;background:radial-gradient(120% 80% at 85% 0%, color-mix(in srgb, var(--t-accent, #2F80ED) 32%, var(--t-pro-card, #1a1a1a)) 0%, var(--t-pro-card, #1a1a1a) 58%);box-shadow:0 24px 60px rgba(0,0,0,0.18)}
  .pb-cta a:not(.pb-btn):not(.cl-dark){color:rgba(255,255,255,0.88);text-decoration:underline;text-underline-offset:2px}
  .pb-cta a.go:not(.pb-btn):not(.cl-dark){text-decoration:none}
  .pb-cta a.go:not(.pb-btn):not(.cl-dark):hover{color:#fff}
  /* Its own button rather than PublicShell's .ps-cta, so the card also works on pages outside the shell (blog). */
  .pb-btn{display:inline-flex;align-items:center;height:44px;border-radius:999px;padding:0 22px;font-weight:800;font-size:14px;text-decoration:none !important;background:var(--t-accent-on-dark, var(--t-accent, #2F80ED));color:var(--t-on-accent-on-dark, var(--t-on-accent, #fff)) !important}
  .pb-btn{transition:background .15s ease,transform .12s ease}
  /* Lifts like .ps-cta. No shadow with it: this button sits on the dark card, where the house shadow is invisible. */
  @media (hover:hover){.pb-btn:hover{background:color-mix(in srgb, var(--t-accent-on-dark, var(--t-accent, #2F80ED)) 85%, #000);transform:translateY(-1px)}}
  @media (prefers-reduced-motion:reduce){.pb-btn{transition:none}.pb-btn:hover{transform:none}}
  .pb-ret{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap}
.pb-pill{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 8px;border-radius:999px;font-family:'Nunito', 'Nunito Fallback', ui-rounded, 'SF Pro Rounded', system-ui, 'Helvetica Neue', Arial, sans-serif;font-size:12px;font-weight:800;letter-spacing:.3px;white-space:nowrap}
  /* A league logo's disc: the card's own surface, lifted by a soft shadow (no fill of its own). Dark mode has no
     visible shadows, so there it takes the chips' lighter fill instead. */
  .pb-coin{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;flex-shrink:0;overflow:hidden;background:var(--t-surface, #fff);box-shadow:0 1px 3px rgba(15,23,42,0.10),0 3px 10px rgba(15,23,42,0.06);color:var(--t-ink, #0F172A)}
  html[data-theme="dark"] .pb-coin{background:color-mix(in srgb, var(--t-surface, #1a1d22) 86%, #fff);box-shadow:none}
  @media (max-width:640px){.pb-strip{grid-template-columns:1fr 1fr;gap:18px}.pb-v{font-size:24px}.pb-cta{padding:20px 18px}}
  /* ID_LINE is nowrap, so beside a 72px headshot the position+team line ran past the card - 26px over at 375,
     80px at 321 - and html's overflow-x:clip swallowed it instead of showing a scrollbar. It only breaks when it
     has to. The rule itself is NOT hidden here any more: the player page pairs each rule with the segment after
     it, so a wrap carries the bar along instead of stranding it at the end of a line. */
  @media (max-width:640px){.pp-idpill{white-space:normal !important;flex-wrap:wrap}}