/* Public Arena pages (tier list, champions, augments, items) on the Journey 2 design system (Royal Sweats).
   Loaded after journey/tokens.css (+ theme), journey/journey.css and site/site.css. Every colour is a --j-* token, so
   a theme restyles these pages too. No color-mix() (Chromium 108). Classes are prefixed cp-.

   Language (journey/README.md): flat square panels under a 1px gold hairline, Beaufort at weight 400 with wide tracking
   for titles, numbers and labels, small ornaments (diamonds, corner brackets, fading rules, slow rings), red only for
   the header's call to action, MAX locks in gold. Motion: transform and opacity only; card hover lift .3s ease-out,
   art zoom and sheen .7s, colours .15s; blocks rise in as they scroll into view (.cp-rv, champion-pages.js). */

/* ---------- Page ---------- */

/* Much lighter greys than the theme's for small text on these pages (owner feedback, 29 Oct 2026: tiny labels
   such as "TOP 3" were still hard to read): muted is about 8.4:1 and dim about 7.2:1 on a typical panel. */
.cp-body {
  /* Icon frame: the ArenaSweats cut-corner octagon (champion portraits, augment and item cells, hero medals). */
  --cp-frame: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
  --j-muted: #c4c7cc;
  --j-dim: #b4b7bd;
  font-size: 14px;
}

.cp-backdrop__art {
  animation: j-fade 0.9s var(--j-ease-std) both;
  opacity: 1;
}

/* ---------- Page backdrop motion (templates/champions/base.html) ----------
   Under the veil, so text contrast is unchanged: the art drifting in a slow Ken Burns, a fan of light shafts from high
   on the left breathing, and a few dust motes drifting up through them. Pages without art keep the shafts and motes.
   Only transform and opacity animate, on layers painted once: a CSS filter on a moving layer would be re-run every
   frame, so champion-pages.js filters the art once into a canvas (.cp-backdrop__drift) that replaces the still layer.
   Under reduced motion nothing moves and the motes are left out. */

.cp-backdrop__drift {
  position: absolute;
  top: -24px;
  left: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  opacity: 0;
  transform-origin: 40% 30%;
  transition: opacity 0.9s var(--j-ease-std);
  animation: cp-kenburns 56s ease-in-out infinite alternate;
}

.cp-backdrop__drift.is-loaded {
  opacity: 1;
}

/* Starts from the still layer's exact framing, so the swap is invisible; scaling about a point inside the frame keeps
   every edge covered. */
@keyframes cp-kenburns {
  from { transform: none; }
  to { transform: scale(1.1) translate3d(1.4%, -1.2%, 0); }
}

/* Soft rays fanning down from a point above the top left edge, where the veil's top light already sits: one gradient
   layer, rasterised once, breathing slowly. It only fades: turning or sliding a layer this size cost 6 to 15 fps in
   headless Chromium (software compositing), a fade nothing measurable. It stops where the veil turns opaque. */
.cp-backdrop__shafts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 76%;
  background: conic-gradient(from 132deg at 22% -36%,
    rgba(var(--j-gold-200-rgb), 0) 0deg,
    rgba(var(--j-gold-200-rgb), 0.17) 5deg,
    rgba(var(--j-gold-200-rgb), 0) 11deg,
    rgba(var(--j-light-rgb), 0) 15deg,
    rgba(var(--j-light-rgb), 0.12) 18deg,
    rgba(var(--j-light-rgb), 0) 22deg,
    rgba(var(--j-gold-rgb), 0) 27deg,
    rgba(var(--j-gold-rgb), 0.18) 33deg,
    rgba(var(--j-gold-rgb), 0) 41deg,
    rgba(var(--j-gold-200-rgb), 0) 47deg,
    rgba(var(--j-gold-200-rgb), 0.11) 51deg,
    rgba(var(--j-gold-200-rgb), 0) 56deg);
  animation: cp-shafts 13s ease-in-out infinite alternate;
}

@keyframes cp-shafts {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

/* Dust motes: each rises --h while drifting --dx sideways and back, fading in and out (positions in base.html). */
.cp-backdrop__motes i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--j-light-rgb), 1), rgba(var(--j-gold-200-rgb), 0.6) 50%, rgba(var(--j-gold-rgb), 0) 100%);
  box-shadow: 0 0 calc(var(--s) * 1.6) rgba(var(--j-gold-rgb), 0.45);
  opacity: 0;
  animation: cp-mote var(--t) linear var(--d) infinite;
}

@keyframes cp-mote {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  18% { opacity: 1; }
  50% { transform: translate3d(var(--dx), calc(var(--h) * -0.5), 0); }
  78% { opacity: 0.8; }
  100% { opacity: 0; transform: translate3d(0, calc(var(--h) * -1), 0); }
}

@media (max-width: 700px) {
  .cp-backdrop__motes i:nth-child(n + 9) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-backdrop__motes { display: none; }
}

.cp-main,
.cp-footer {
  position: relative;
  z-index: 2;
}

.cp-wrap {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Zero specificity, so links with their own transitions (cards, jump links) keep them. */
:where(.cp-main, .cp-footer) :where(a) {
  transition: color var(--j-dur-fast) var(--j-ease-std);
}

.cp-summary a,
.cp-lede a,
.cp-prose a {
  color: var(--j-gold-200);
  background: linear-gradient(rgba(var(--j-gold-rgb), 0.35), rgba(var(--j-gold-rgb), 0.35)) 0 100% / 100% 1px no-repeat;
  transition: color var(--j-dur-fast) var(--j-ease-std), background-size var(--j-dur) var(--j-ease-std);
}

.cp-summary a:hover,
.cp-lede a:hover,
.cp-prose a:hover {
  color: var(--j-gold-50);
  background-image: linear-gradient(var(--j-gold-200), var(--j-gold-200));
}

.cp-more {
  font-family: var(--j-sans);
  font-size: 10.5px;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: var(--j-gold-300);
}

.cp-more::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  vertical-align: 0.12em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--j-dur) var(--j-ease-std);
}

.cp-more:hover {
  color: var(--j-gold-50);
}

.cp-more:hover::after {
  transform: translateX(3px) rotate(45deg);
}

.cp-empty {
  margin: 0;
  padding: 18px 0;
  color: var(--j-dim);
  font-size: 13px;
}

.cp-dim {
  color: var(--j-dim);
}

/* A tooltip's subtitle carries the tier, rank and rates, so it reads in the secondary text colour. */
.cp-body .j-tip small {
  color: var(--j-text-2);
}

/* ---------- Motion hooks (champion-pages.js) ---------- */
/* Blocks rise in as they scroll into view; their [data-stagger] children follow one by one; icon grid cells ripple.
   Hidden only under .cp-js (set in <head>, removed again if the module never starts), so the page reads without it. */

.cp-js .cp-rv {
  opacity: 0;
  transform: translateY(16px);
  animation: none;
  transition: opacity 0.5s var(--j-ease-out), transform 0.5s var(--j-ease-out);
  transition-delay: var(--d, 0s);
}

.cp-js .cp-rv.is-in {
  opacity: 1;
  transform: none;
}

.cp-js .cp-rv [data-stagger] > * {
  opacity: 0;
}

.cp-js .cp-rv.is-in [data-stagger] > * {
  opacity: 1;
  animation: j-appear var(--j-dur-appear) var(--j-ease) backwards;
  animation-delay: var(--d, 0s);
}

/* ---------- Hero: page art, title, meta line, stat band ---------- */

.cp-hero {
  position: relative;
  overflow: hidden;
  padding: 18px 0 24px;
}

.cp-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--j-rule-center);
}

/* The page's own art, sharp, fading into the blurred backdrop on the left and bottom. It eases in once (transform and
   opacity on an unfiltered layer). It holds still after that: drifting this masked layer cost about 15 fps in headless
   Chromium (software compositing). */
.cp-hero__art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(1180px, 72%);
  background-size: cover;
  background-position: center 22%;
  filter: var(--j-art-tint);
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 28%, #000 62%), linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 28%, #000 62%), linear-gradient(180deg, #000 55%, transparent 100%);
  mask-composite: intersect;
  animation: cp-art-in 1.6s var(--j-ease) both;
}

.cp-hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 70% 30%, rgba(var(--j-ink-rgb), 0) 40%, rgba(var(--j-ink-rgb), 0.55) 100%),
    linear-gradient(180deg, rgba(var(--j-ink-rgb), 0.1), rgba(var(--j-ink-rgb), 0.35));
}

@keyframes cp-art-in {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 0.6; transform: none; }
}

.cp-hero__inner {
  position: relative;
  z-index: 1;
}

/* Breadcrumbs: heavy Beaufort caps, each step marked by a small forged chevron (a gold arrowhead cut at 45 degrees). */
.cp-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--j-dim);
  text-shadow: 0 1px 2px rgba(var(--j-ink-rgb), 0.9);
}

.cp-crumbs li {
  display: inline-flex;
  align-items: center;
}

.cp-crumbs li + li::before {
  content: "";
  width: 6px;
  height: 9px;
  margin: 0 11px 0 10px;
  background: linear-gradient(160deg, var(--j-gold-100), var(--j-gold-500));
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}

.cp-crumbs a {
  color: var(--j-muted);
}

.cp-crumbs a:hover {
  color: var(--j-gold-100);
}

.cp-crumbs [aria-current] {
  color: var(--j-gold-150);
}

.cp-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.cp-hero__id {
  display: flex;
  align-items: center;
  gap: 30px;
  min-width: 0;
}

.cp-hero__side {
  display: grid;
  justify-items: end;
  gap: 12px;
  flex: none;
}

/* Portrait: the icon in an animated gold metal frame inside the Colosseum crest (journey/crest.css, the walls just
   outside the icon), the tier plate on its corner. */
.cp-hero__portrait {
  --crest-size: 168px;
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
}

.cp-hero__portrait > .j-crest__seal {
  inset: -22px;
}

.cp-hero__frame {
  position: relative;
  display: block;
  line-height: 0;
  box-shadow: 0 0 34px rgba(var(--j-gold-rgb), 0.2);
}

.cp-hero__frame > img {
  width: 112px;
  height: 112px;
  border: 0;
  background: var(--j-coal-900);
}

/* The champion's league crest on the portrait's corner, linking to its tier row. */
.cp-hero__league {
  position: absolute;
  right: -20px;
  bottom: -14px;
  z-index: 2;
  display: block;
  transition: transform var(--j-dur) var(--j-ease-out);
}

.cp-hero__league .cp-crest {
  filter: drop-shadow(0 2px 6px rgba(var(--j-shadow-rgb), 0.9)) drop-shadow(0 0 10px rgba(var(--j-ink-rgb), 0.9));
}

.cp-hero__league:hover {
  transform: translateY(-2px);
}

.cp-hero__portrait--entity .cp-hero__frame,
.cp-hero__portrait--entity .cp-hero__frame > img {
  border-radius: 50%;
}

.cp-hero__portrait--prismatic .cp-hero__frame {
  box-shadow: 0 0 38px rgba(var(--j-prism-rgb), 0.3);
}

.cp-hero__portrait--silver .cp-hero__frame {
  box-shadow: 0 0 30px rgba(var(--j-silver-rgb), 0.18);
}

.cp-hero__titles {
  min-width: 0;
}

.cp-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 8px;
  font-family: var(--j-sans);
  font-size: 11px;
  letter-spacing: var(--j-track-kicker);
  text-transform: uppercase;
  color: var(--j-gold-300);
}

.cp-hero__kicker .j-diamond {
  opacity: 0.7;
}

.cp-role {
  letter-spacing: var(--j-track-meta);
  color: var(--j-text-2);
}

.cp-hero__kicker--prismatic { color: var(--j-prism-violet-light); }
.cp-hero__kicker--gold { color: var(--j-gold-300); }
.cp-hero__kicker--silver { color: var(--j-silver-200); }

.cp-h1 {
  margin: 0;
  font-family: var(--j-display);
  font-size: clamp(32px, 3.3vw, 54px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: var(--j-track-title);
  color: var(--j-gold-50);
  text-shadow: 0 2px 18px rgba(var(--j-ink-rgb), 0.9), 0 0 32px rgba(var(--j-gold-rgb), 0.16);
}

/* Season, region, rank and patch: a run of recessed steel segments, each with its top-left and bottom-right corners
   cut at 45 degrees and a gold sill, butted together with a hairline gap (they wrap cleanly on phones). The season
   reads in gold Beaufort; the patch link is a raised gold-rimmed key set into its segment. */
.cp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 3px;
  margin: 14px 0 0;
  font-family: var(--j-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--j-text-2);
}

.cp-meta > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  white-space: nowrap;
  background:
    linear-gradient(rgba(var(--j-gold-rgb), 0.3), rgba(var(--j-gold-rgb), 0.3)) 0 100% / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(var(--j-shadow-rgb), 0.82), rgba(var(--j-coal-800-rgb), 0.78));
  box-shadow: inset 0 2px 4px rgba(var(--j-shadow-rgb), 0.85), inset 0 1px 0 rgba(var(--j-shadow-rgb), 1);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.cp-meta .j-diamond {
  display: none;
}

.cp-meta__season,
.cp-meta__rank {
  font-family: "JourneyDisplayBold", var(--j-display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--j-gold-150);
}

/* The patch: a raised key with a gold rim and a lit top bevel. */
.cp-meta__item:has(> .cp-meta__patch) {
  padding: 0 8px;
}

.cp-meta__patch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 20px;
  padding: 0 9px;
  color: var(--j-gold-100);
  background:
    linear-gradient(180deg, rgba(var(--j-light-rgb), 0.14), rgba(var(--j-light-rgb), 0) 55%),
    linear-gradient(180deg, var(--j-coal-600), var(--j-coal-800));
  box-shadow: inset 0 0 0 1px rgba(var(--j-gold-rgb), 0.6), inset 0 2px 0 rgba(var(--j-light-rgb), 0.12), 0 2px 4px rgba(var(--j-shadow-rgb), 0.7);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  transition: color var(--j-dur-fast) var(--j-ease-std), transform var(--j-dur) var(--j-ease-out);
}

/* An arrow cut into the key: Riot's patch notes open in a new tab. */
.cp-meta__patch::after {
  content: "";
  width: 8px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 6.5 6.5 1.5M2.6 1.5h3.9v3.9' fill='none' stroke='%23f3d488' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.cp-meta__patch:hover {
  color: var(--j-gold-25);
  transform: translateY(-1px);
}

.cp-lede {
  max-width: 880px;
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--j-text-2);
  text-shadow: 0 1px 3px rgba(var(--j-ink-rgb), 0.9);
}

.cp-lede strong {
  font-weight: 600;
  color: var(--j-gold-100);
}

/* Filters (GET form; champion-pages.js submits on change and hides Apply). */
.cp-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}

.cp-filter {
  display: grid;
  gap: 5px;
}

.cp-filter .j-label {
  font-size: 9.5px;
  letter-spacing: var(--j-track-meta);
  color: var(--j-muted);
}

.cp-filter select {
  min-width: 118px;
  background-color: rgba(var(--j-ink-rgb), 0.72);
}

.cp-filters.is-auto .cp-filters__apply {
  display: none;
}

.cp-hero__lb {
  gap: 9px;
}

.cp-hero__lb .j-i {
  width: 14px;
  height: 14px;
  color: var(--j-gold-300);
}

/* Stat band: the dashboard header's hairline columns, a Beaufort number under a tracked label. */
.cp-band {
  display: flex;
  flex-wrap: wrap;
  row-gap: 14px;
  margin: 22px 0 0;
  padding: 14px 0 2px;
  background: var(--j-rule-center) 0 0 / 100% 1px no-repeat;
}

.cp-band__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 104px;
  min-width: 96px;
  margin: 0;
  padding: 2px 18px;
  border-left: 1px solid var(--j-line-divider);
}

.cp-band__stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.cp-band__stat dt {
  font-family: var(--j-sans);
  font-size: 10.5px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-muted);
  white-space: nowrap;
}

.cp-band__stat dd {
  margin: 0;
  font-family: var(--j-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--j-gold-50);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cp-band__stat--key dd {
  color: var(--j-gold-300);
  text-shadow: 0 0 18px rgba(var(--j-gold-rgb), 0.3);
}

.cp-band__stat--tier dd {
  line-height: 1;
}

.cp-band__stat--max dd {
  font-size: 20px;
}

.cp-band__stat dd a:hover {
  color: var(--j-gold-200);
}

.cp-band--narrow {
  max-width: 760px;
}

/* Jump links under a hero (tiers, groups). */
.cp-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}

.cp-jump a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px 0 4px;
  border: 1px solid var(--j-line-control);
  background: rgba(var(--j-ink-rgb), 0.55);
  font-family: var(--j-display);
  font-size: 14px;
  color: var(--j-muted);
  transition: border-color var(--j-dur-fast) var(--j-ease-std), color var(--j-dur-fast) var(--j-ease-std), transform var(--j-dur) var(--j-ease-out);
}

.cp-jump a:hover {
  border-color: var(--j-gold-300);
  color: var(--j-gold-50);
  transform: translateY(-2px);
}

.cp-jump--groups a {
  height: 34px;
  padding: 0 14px;
  font-family: var(--j-sans);
  font-size: 10.5px;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: var(--j-text-2);
}

.cp-jump--groups a span {
  font-family: var(--j-display);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--j-gold-200);
}

/* Index heroes: the six best icons float as hex medals on the right. */
.cp-hero__float {
  position: absolute;
  top: 178px;
  right: max(28px, calc((100% - 1560px) / 2 + 40px));
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 62px);
  gap: 6px 10px;
  pointer-events: none;
}

.cp-hero__medal {
  --t: 2px;
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  clip-path: var(--cp-frame);
  background: linear-gradient(160deg, var(--j-gold-100), var(--j-gold-400) 45%, var(--j-gold-700));
}

.cp-hero__medal:nth-child(2n) {
  margin-top: 38px;
}

.cp-hero__medal img {
  position: absolute;
  inset: var(--t);
  width: calc(100% - var(--t) * 2);
  height: calc(100% - var(--t) * 2);
  clip-path: var(--cp-frame);
  object-fit: cover;
  background: var(--j-coal-900);
}

/* ---------- Section tabs (in-page anchors) with the gliding gold ink ---------- */

.cp-tabs {
  position: sticky;
  top: var(--j-topbar-h);
  z-index: 40;
  background: linear-gradient(180deg, rgba(var(--j-ink-rgb), 0.94), rgba(var(--j-ink-rgb), 0.86));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.cp-tabs__inner {
  position: relative;
  display: flex;
  overflow-x: auto;
  padding-bottom: 5px;
  background: linear-gradient(rgba(var(--j-gold-rgb), 0.2), rgba(var(--j-gold-rgb), 0.2)) 0 calc(100% - 5px) / 100% 1px no-repeat;
  scrollbar-width: none;
}

.cp-tabs__inner::-webkit-scrollbar {
  display: none;
}

.cp-tabs a {
  position: relative;
  flex: none;
  padding: 14px 16px 11px;
  font-family: var(--j-display);
  font-size: 13px;
  letter-spacing: var(--j-track-tab);
  text-transform: uppercase;
  color: var(--j-muted);
  transition: color var(--j-dur-fast) var(--j-ease-std), background-color var(--j-dur-fast) var(--j-ease-std);
}

.cp-tabs a:hover {
  color: var(--j-gold-100);
  background-color: rgba(var(--j-gold-rgb), 0.05);
}

.cp-tabs a:focus-visible {
  outline-offset: -3px;
  box-shadow: none;
}

.cp-tabs a.is-active {
  color: var(--j-gold-50);
}

/* Without the script the active tab carries its own underline. */
.cp-tabs a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--j-gold-300);
}

.cp-tabs.has-ink a.is-active::after {
  display: none;
}

.cp-tabs__ink {
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.35), var(--j-gold-300) 20%, var(--j-gold-100) 50%, var(--j-gold-300) 80%, rgba(var(--j-gold-rgb), 0.35));
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--j-ease), opacity var(--j-dur) var(--j-ease-std);
}

.cp-tabs__pip {
  position: absolute;
  left: 0;
  bottom: 1.5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border: 1px solid var(--j-gold-300);
  background: var(--j-gold-50);
  box-shadow: inset 0 0 0 1.5px var(--j-black), 0 0 8px rgba(var(--j-light-rgb), 0.55);
  opacity: 0;
  pointer-events: none;
  transform: rotate(45deg);
  transition: transform 0.45s var(--j-ease), opacity var(--j-dur) var(--j-ease-std);
}

.cp-tabs.has-ink.is-on .cp-tabs__ink,
.cp-tabs.has-ink.is-on .cp-tabs__pip {
  opacity: 1;
}

/* ---------- Grid of panels ---------- */

.cp-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  padding-top: 22px;
  padding-bottom: 44px;
}

.cp-span-4 { grid-column: span 4; }
.cp-span-5 { grid-column: span 5; }
.cp-span-6 { grid-column: span 6; }
.cp-span-7 { grid-column: span 7; }
.cp-span-8 { grid-column: span 8; }
.cp-span-12 { grid-column: 1 / -1; }

.cp-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Panels in a row share its height; in a stack the last panel takes the rest. */
.cp-stack > :last-child {
  flex: 1;
}

.cp-grid > section,
.cp-stack > section,
.cp-ladder > section {
  scroll-margin-top: calc(var(--j-topbar-h) + 60px);
}

.cp-body .j-panel {
  padding: 16px 18px 18px;
}

.cp-head {
  flex-wrap: wrap;
  row-gap: 6px;
  margin-bottom: 14px;
}

.cp-head .j-head__title {
  white-space: normal;
}

.cp-summary {
  margin: -4px 0 16px;
  max-width: 1100px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--j-muted);
}

.cp-h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
  font-family: var(--j-sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: var(--j-gold-300);
}

.cp-h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--j-rule);
}

.cp-h3:first-child {
  margin-top: 0;
}

/* ---------- Cards: lift, gold edge and glow, brackets, a crossing band of light (hub door hover) ---------- */

.cp-card {
  --bk: var(--j-bracket-hover);
  --bk-size: 12px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--j-line-row);
  background: linear-gradient(180deg, rgba(var(--j-coal-700-rgb), 0.5), rgba(var(--j-coal-900-rgb), 0.55));
  transition: transform var(--j-dur) var(--j-ease-out), border-color var(--j-dur) var(--j-ease-out), box-shadow var(--j-dur) var(--j-ease-out);
}

/* Corner marks (gradient layers, so the card keeps its own background) fade in on hover: a solid gold triangle in the
   top-left and bottom-right corners. */
.cp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(135deg, var(--bk) 50%, rgba(var(--j-gold-rgb), 0) 50%),
    linear-gradient(315deg, var(--bk) 50%, rgba(var(--j-gold-rgb), 0) 50%);
  background-repeat: no-repeat;
  background-size: var(--bk-size) var(--bk-size);
  background-position: 0 0, 100% 100%;
  opacity: 0;
  transition: opacity var(--j-dur-fast) var(--j-ease-std);
}

.cp-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  z-index: 1;
  width: 40%;
  background: linear-gradient(90deg, rgba(var(--j-light-rgb), 0), rgba(var(--j-light-rgb), 0.14), rgba(var(--j-light-rgb), 0));
  opacity: 0;
  transform: skewX(-12deg);
  transition: transform var(--j-dur-slow) var(--j-ease-out), opacity var(--j-dur-slow) var(--j-ease-out);
  pointer-events: none;
}

.cp-card:hover,
.cp-card:focus-within {
  z-index: 1;
  transform: translateY(-4px);
  border-color: var(--j-gold-300);
  box-shadow: 0 0 28px rgba(var(--j-gold-rgb), 0.2);
}

.cp-card:hover::before,
.cp-card:focus-within::before {
  opacity: 1;
}

.cp-card:hover .cp-sheen,
.cp-card:focus-within .cp-sheen {
  opacity: 1;
  transform: translateX(400%) skewX(-12deg);
}

.cp-card .j-icon,
.cp-card .cp-hex__face img {
  transition: transform var(--j-dur-slow) var(--j-ease-out);
}

.cp-card:hover .j-icon,
.cp-card:hover .cp-hex__face img {
  transform: scale(1.06);
}

.cp-card:hover .cp-hex__face img {
  transform: scale(1.2);
}

/* ---------- Tier plates: a Beaufort letter on a flat plate edged in the tier's metal ---------- */

.cp-tier {
  --tier-size: 26px;
  --tc: var(--j-gold-300);
  --tc-rgb: var(--j-gold-rgb);
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: var(--tier-size);
  height: var(--tier-size);
  padding: 0 4px;
  flex: none;
  border: 1px solid rgba(var(--tc-rgb), 0.7);
  background: linear-gradient(180deg, rgba(var(--tc-rgb), 0.24), rgba(var(--tc-rgb), 0.06));
  font-family: var(--j-display);
  font-size: calc(var(--tier-size) * 0.56);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--tc);
  font-variant-numeric: tabular-nums;
  isolation: isolate;
}

.cp-tier--sm { --tier-size: 22px; }
.cp-tier--md { --tier-size: 34px; padding: 0 7px; }
.cp-tier--lg { --tier-size: 42px; padding: 0 8px; background: linear-gradient(180deg, rgba(var(--tc-rgb), 0.3), rgba(var(--j-ink-rgb), 0.92)); }

.cp-tier--splus { --tc: var(--j-p1); --tc-rgb: var(--j-p1-rgb); box-shadow: 0 0 12px rgba(var(--j-p1-rgb), 0.35); text-shadow: 0 0 10px rgba(var(--j-p1-rgb), 0.6); }
.cp-tier--s { --tc: var(--j-gold-200); --tc-rgb: var(--j-gold-rgb); }
.cp-tier--a { --tc: var(--j-silver-100); --tc-rgb: var(--j-silver-rgb); }
.cp-tier--b { --tc: var(--j-bronze-light); --tc-rgb: var(--j-bronze-rgb); }
.cp-tier--c { --tc: var(--j-muted); --tc-rgb: var(--j-stone-rgb); }
.cp-tier--d { --tc: var(--j-rust-light); --tc-rgb: var(--j-rust-rgb); }

.cp-tier--none {
  border-style: dashed;
  border-color: rgba(var(--j-gold-rgb), 0.18);
  background: none;
  color: var(--j-dim);
}

/* The tier list's big plate: the letter inside a diamond, with a second dashed hairline diamond around it (still). */
.cp-tier--xl {
  --tier-size: 76px;
  width: 76px;
  border: 0;
  background: none;
  font-size: 34px;
  box-shadow: none;
}

.cp-tier--xl::before,
.cp-tier--xl::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.cp-tier--xl::before {
  inset: 12px;
  z-index: -1;
  border: 1px solid rgba(var(--tc-rgb), 0.8);
  background: linear-gradient(160deg, rgba(var(--tc-rgb), 0.3), rgba(var(--j-ink-rgb), 0.9) 70%);
  box-shadow: 0 0 22px rgba(var(--tc-rgb), 0.22);
  transform: rotate(45deg);
}

.cp-tier--xl::after {
  inset: 2px;
  border: 1px dashed rgba(var(--tc-rgb), 0.35);
  transform: rotate(45deg);
}

/* ---------- Octagon portraits and their metals ---------- */

.cp-hex {
  --w: 56px;
  --t: 2px;
  --metal: linear-gradient(160deg, var(--j-gold-100), var(--j-gold-400) 45%, var(--j-gold-700));
  position: relative;
  display: block;
  flex: none;
  width: var(--w);
  height: var(--w);
  clip-path: var(--cp-frame);
  background: var(--metal);
}

.cp-hex__face {
  position: absolute;
  inset: var(--t);
  overflow: hidden;
  clip-path: var(--cp-frame);
  background: var(--j-coal-900);
}

.cp-hex__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
}

.cp-hex__face::after,
.cp-hc__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(var(--j-white-rgb), 0.16), rgba(var(--j-white-rgb), 0) 38%);
  pointer-events: none;
}

.cp-metal--splus { --t: 3px; --metal: var(--j-edge-1); }
.cp-metal--gold,
.cp-metal--s { --metal: linear-gradient(160deg, var(--j-gold-100), var(--j-gold-400) 45%, var(--j-gold-700)); }
.cp-metal--a { --metal: linear-gradient(160deg, var(--j-silver-50), var(--j-silver-300) 40%, var(--j-silver-600)); }
.cp-metal--b { --metal: linear-gradient(160deg, var(--j-bronze-light), var(--j-bronze) 45%, var(--j-bronze-deep)); }
.cp-metal--c { --metal: linear-gradient(160deg, var(--j-silver-400), var(--j-silver-600) 50%, var(--j-silver-800)); }
.cp-metal--d { --metal: linear-gradient(160deg, var(--j-rust-light), var(--j-rust) 45%, var(--j-rust-deep)); }
.cp-metal--none { --t: 1px; --metal: rgba(var(--j-stone-rgb), 0.4); }
/* Leagues (metal 'l-<league>') by material: Challenger prismatic, Grandmaster and Master gold, Diamond and Emerald bright silver, Platinum
   and Gold steel, Silver and Bronze bronze, Iron rust. */
.cp-metal--l-challenger { --t: 3px; --metal: var(--j-edge-1); }
.cp-metal--l-grandmaster,
.cp-metal--l-master { --metal: linear-gradient(160deg, var(--j-gold-100), var(--j-gold-400) 45%, var(--j-gold-700)); }
.cp-metal--l-diamond,
.cp-metal--l-emerald { --metal: linear-gradient(160deg, var(--j-silver-50), var(--j-silver-300) 40%, var(--j-silver-600)); }
.cp-metal--l-platinum,
.cp-metal--l-gold { --metal: linear-gradient(160deg, var(--j-silver-400), var(--j-silver-600) 50%, var(--j-silver-800)); }
.cp-metal--l-silver,
.cp-metal--l-bronze { --metal: linear-gradient(160deg, var(--j-bronze-light), var(--j-bronze) 45%, var(--j-bronze-deep)); }
.cp-metal--l-iron { --metal: linear-gradient(160deg, var(--j-rust-light), var(--j-rust) 45%, var(--j-rust-deep)); }
.cp-metal--buff { --metal: linear-gradient(160deg, rgba(var(--j-up-rgb), 0.95), rgba(var(--j-up-rgb), 0.45)); }
.cp-metal--nerf { --metal: linear-gradient(160deg, rgba(var(--j-rose-rgb), 0.9), rgba(var(--j-rose-rgb), 0.4)); }
.cp-metal--adjusted { --metal: linear-gradient(160deg, var(--j-bronze-light), var(--j-bronze) 45%, var(--j-bronze-deep)); }

/* ---------- Octagon grid (augment and item tier rows) ---------- */
/* A list of octagon cells. Without the script it wraps like a grid; champion-pages.js sets the column count so the
   cells sit on an even grid. Cells ripple in when the block reveals; hover lifts a cell (scale 1.18, brighter, gold
   glow). */

.cp-hc {
  --w: 58px;
  --gap: 5px;
  --h: var(--w);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-hc.is-hc {
  display: grid;
  gap: var(--gap);
}

.cp-hc__cell {
  position: relative;
  width: var(--w);
  height: var(--h);
  transition: transform 0.2s var(--j-ease-out), filter 0.2s var(--j-ease-out);
}

.cp-hc__cell > a {
  position: absolute;
  inset: 0;
  clip-path: var(--cp-frame);
  background: var(--metal, var(--j-gold-400));
}

.cp-hc__face {
  position: absolute;
  inset: var(--t, 2px);
  overflow: hidden;
  clip-path: var(--cp-frame);
  background: var(--j-coal-900);
}

.cp-hc__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
}

.cp-hc__cell:hover,
.cp-hc__cell:focus-within {
  z-index: 2;
  transform: scale(1.18);
  filter: brightness(1.2) drop-shadow(0 0 12px rgba(var(--j-p1-rgb), 0.5));
}

.cp-hc__cell > a:focus-visible {
  outline: none;
  box-shadow: none;
}

.cp-js .cp-hc .cp-hc__cell {
  opacity: 0;
}

.cp-js .cp-rv.is-in .cp-hc .cp-hc__cell {
  opacity: 1;
  animation: cp-cell-in 0.46s var(--j-ease-cell) backwards;
  animation-delay: var(--d, 0s);
}

@keyframes cp-cell-in {
  from { opacity: 0; transform: translateY(8px) scale(0.7); }
}

/* ---------- Augments: podium of the three most picked, then silver / gold / prismatic columns ---------- */

.cp-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-podium__item {
  --rarity-rgb: var(--j-gold-rgb);
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 18px 10px 14px;
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 0, rgba(var(--rarity-rgb), 0.14), rgba(var(--rarity-rgb), 0) 75%),
    linear-gradient(180deg, rgba(var(--j-coal-700-rgb), 0.5), rgba(var(--j-coal-900-rgb), 0.55));
}

.cp-rarity--prismatic { --rarity-rgb: var(--j-prism-rgb); }
.cp-rarity--gold { --rarity-rgb: var(--j-gold-rgb); }
.cp-rarity--silver { --rarity-rgb: var(--j-silver-rgb); }

.cp-podium__place {
  position: absolute;
  top: 8px;
  left: 12px;
  font-family: var(--j-display);
  font-size: 22px;
  line-height: 1;
  color: rgba(var(--rarity-rgb), 0.5);
}

.cp-podium__link {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 9px;
}

.cp-podium__icon .j-icon {
  border-width: 2px;
  border-color: rgba(var(--rarity-rgb), 0.85);
  box-shadow: 0 0 0 4px rgba(var(--j-ink-rgb), 0.6), 0 0 20px rgba(var(--rarity-rgb), 0.35);
}

.cp-podium__name {
  font-family: var(--j-display);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--j-gold-50);
}

.cp-podium__link:hover .cp-podium__name {
  color: var(--j-gold-100);
}

.cp-podium__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cp-rarity-label {
  font-family: var(--j-sans);
  font-size: 10px;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: rgb(var(--rarity-rgb));
}

.cp-podium__stats,
.cp-mini-stats {
  display: flex;
  gap: 16px;
  margin: 0;
}

.cp-podium__stats div,
.cp-mini-stats div {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
}

.cp-podium__stats dt,
.cp-mini-stats dt {
  font-family: var(--j-sans);
  font-size: 9.5px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-dim);
}

.cp-podium__stats dd,
.cp-mini-stats dd {
  margin: 0;
  font-family: var(--j-display);
  font-size: 17px;
  color: var(--j-gold-50);
  font-variant-numeric: tabular-nums;
}

.cp-rarities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.cp-rarity {
  min-width: 0;
}

.cp-rarity__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--rarity-rgb), 0.3);
  font-family: var(--j-sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: rgb(var(--rarity-rgb));
}

.cp-rarity__title::before {
  content: "";
  width: 7px;
  height: 7px;
  background: rgb(var(--rarity-rgb));
  box-shadow: 0 0 8px rgba(var(--rarity-rgb), 0.7);
  transform: rotate(45deg);
}

.cp-rarity--prismatic .cp-rarity__title::before {
  background: var(--j-fill-prismatic);
}

.cp-picks {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon name tier" "icon nums nums";
  align-items: center;
  column-gap: 11px;
  row-gap: 3px;
  padding: 7px 8px 7px 10px;
}

.cp-pick > .j-icon { grid-area: icon; }
.cp-pick > .cp-tier { grid-area: tier; }

.cp-pick__name {
  display: -webkit-box;
  grid-area: name;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--j-text);
}

.cp-pick__name a:hover {
  color: var(--j-gold-100);
}

.cp-pick__nums {
  grid-area: nums;
  display: flex;
  gap: 12px;
}

.cp-pick__nums > span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.cp-pick__nums b,
.cp-tile__stats dd,
.cp-champ__stat,
.cp-ent__stat {
  font-family: var(--j-display);
  font-weight: 400;
  color: var(--j-gold-50);
  font-variant-numeric: tabular-nums;
}

.cp-pick__nums b {
  font-size: 13.5px;
}

.cp-pick__nums small,
.cp-tile__stats dt,
.cp-champ__stat small,
.cp-ent__stat small,
.cp-ccard__main small,
.cp-ccard__note small {
  font-family: var(--j-sans);
  font-size: 9px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-dim);
}

/* ---------- Skill order ---------- */

/* The best order sits in a recessed ability bar. */
.cp-skill-best {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 16px 20px 22px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(var(--j-ink-rgb), 0.75), rgba(var(--j-coal-800-rgb), 0.55));
  box-shadow: inset 0 2px 6px rgba(var(--j-shadow-rgb), 0.7), inset 0 0 0 1px rgba(var(--j-plat-rgb), 0.08), 0 1px 0 rgba(var(--j-plat-rgb), 0.08);
}

/* Ability letters as keycaps: a lit top face on a darker skirt. */
.cp-keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cp-key {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 22px;
  margin-bottom: 2px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(var(--j-coal-500-rgb), 0.95), rgba(var(--j-coal-700-rgb), 0.95));
  box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.22), 0 2px 0 rgba(var(--j-coal-900-rgb), 1), 0 3px 4px rgba(var(--j-shadow-rgb), 0.6);
  font-family: var(--j-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--j-text);
}

/* The first maxed ability in gold, the second in silver, the last in bronze; a small rank number under each cap. */
.cp-keys--lg {
  gap: 12px;
}

.cp-keys--lg .cp-key {
  --kc: var(--j-gold-300);
  --kc-rgb: var(--j-gold-rgb);
  position: relative;
  width: 46px;
  height: 42px;
  margin-bottom: 4px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(var(--kc-rgb), 0.32), rgba(var(--kc-rgb), 0.06) 70%),
    linear-gradient(180deg, rgba(var(--j-coal-600-rgb), 1), rgba(var(--j-coal-800-rgb), 1));
  box-shadow: inset 0 0 0 1px rgba(var(--kc-rgb), 0.75), inset 0 2px 0 rgba(var(--j-plat-rgb), 0.25), 0 4px 0 rgba(var(--kc-rgb), 0.35), 0 6px 12px rgba(var(--j-shadow-rgb), 0.7), 0 0 18px rgba(var(--kc-rgb), 0.18);
  font-size: 21px;
  font-weight: 800;
  color: var(--kc);
}

.cp-keys--lg .cp-key::after {
  content: "1st";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 7px);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: var(--j-muted);
}

.cp-keys--lg .cp-key:nth-of-type(2) { --kc: var(--j-silver-100); --kc-rgb: var(--j-silver-rgb); width: 42px; height: 38px; font-size: 18px; }
.cp-keys--lg .cp-key:nth-of-type(3) { --kc: var(--j-bronze-light); --kc-rgb: var(--j-bronze-rgb); width: 38px; height: 34px; font-size: 16px; }
.cp-keys--lg .cp-key:nth-of-type(2)::after { content: "2nd"; }
.cp-keys--lg .cp-key:nth-of-type(3)::after { content: "3rd"; }

.cp-keys__arrow {
  width: 14px;
  height: 14px;
  color: var(--j-gold-500);
}

/* Short ranking tables (skill orders): no zebra, bar cells. */
.cp-rank-table {
  width: 100%;
  border-collapse: collapse;
}

.cp-rank-table th,
.cp-rank-table td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--j-line-soft);
  text-align: left;
  font-size: 13px;
  white-space: nowrap;
}

.cp-rank-table thead th {
  padding-top: 0;
  font-family: var(--j-sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-dim);
}

.cp-rank-table td {
  font-family: var(--j-display);
  color: var(--j-gold-50);
  font-variant-numeric: tabular-nums;
}

.cp-rank-table tbody tr:first-child {
  background: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.09), rgba(var(--j-gold-rgb), 0) 80%);
}

.is-num {
  text-align: right !important;
}

.cp-barcell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
}

.cp-barcell .cp-bar {
  flex: 1;
}

.cp-barcell span:last-child {
  width: 46px;
  text-align: right;
}

.cp-bar {
  position: relative;
  display: block;
  height: 5px;
  overflow: hidden;
  background: rgba(var(--j-white-rgb), 0.06);
}

.cp-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--j-gloss), var(--j-fill-gold);
  box-shadow: var(--j-bar-edge);
  transform-origin: left;
}

.cp-rv.is-in .cp-bar i,
html:not(.cp-js) .cp-bar i {
  animation: j-grow 0.9s var(--j-ease) both;
  animation-delay: calc(var(--d, 0s) + 0.15s);
}

/* ---------- Icon tiles (boots, prismatic, legendary, consumables) ---------- */

.cp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-tile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 12px 4px 10px;
  text-align: center;
}

.cp-tile__link {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  width: 100%;
}

.cp-tile__icon {
  position: relative;
}

.cp-tile__icon .cp-tier {
  position: absolute;
  right: -10px;
  bottom: -7px;
}

.cp-tile__name {
  display: -webkit-box;
  max-width: 100%;
  min-height: 2.5em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--j-text-2);
}

.cp-tile__link:hover .cp-tile__name {
  color: var(--j-gold-100);
}

.cp-tile__stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0;
}

.cp-tile__stats div {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.cp-tile__stats dd {
  margin: 0;
  font-size: 14px;
}

/* ---------- Core builds ---------- */

.cp-builds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-build {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 20px 12px 14px;
}

.cp-build.is-top {
  border-color: var(--j-line-strong);
  background:
    radial-gradient(80% 70% at 50% 0, rgba(var(--j-gold-rgb), 0.14), rgba(var(--j-gold-rgb), 0) 75%),
    linear-gradient(180deg, rgba(var(--j-coal-700-rgb), 0.5), rgba(var(--j-coal-900-rgb), 0.55));
}

.cp-build__flag {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  padding: 3px 12px 4px;
  border: 1px solid var(--j-line-strong);
  border-top: 0;
  background: rgba(var(--j-ink-rgb), 0.85);
  font-family: var(--j-sans);
  font-size: 9.5px;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: var(--j-gold-200);
  white-space: nowrap;
  transform: translateX(-50%);
}

.cp-build__path {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cp-build__item .j-icon {
  transition: transform var(--j-dur) var(--j-ease-out), border-color var(--j-dur-fast) var(--j-ease-std);
}

.cp-build__item:hover .j-icon {
  transform: translateY(-2px) scale(1.06);
  border-color: var(--j-gold-200);
}

.cp-build__arrow {
  width: 14px;
  height: 14px;
  color: var(--j-gold-500);
}

/* ---------- Full tables ---------- */

.cp-tablebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cp-tablebar [hidden] {
  display: none;
}

.cp-scroll {
  /* Positioned so absolute children (screen reader text in locks) are clipped with the table. */
  position: relative;
  max-height: 560px;
  overflow: auto;
  border: 1px solid var(--j-line-soft);
  background: rgba(var(--j-ink-rgb), 0.3);
}

.cp-scroll--short {
  max-height: 420px;
}

.cp-scroll--tall {
  max-height: 720px;
}

.cp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.cp-table th,
.cp-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--j-line-soft);
  text-align: left;
  white-space: nowrap;
  font-size: 13.5px;
}

.cp-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--j-line-mid);
  background: var(--j-coal-900);
  font-family: var(--j-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-gold-300);
}

.cp-table tbody th {
  font-weight: 400;
}

.cp-table td {
  font-family: var(--j-display);
  color: var(--j-gold-50);
  font-variant-numeric: tabular-nums;
}

.cp-table td.cp-dim {
  color: var(--j-dim);
}

.cp-table tbody tr {
  transition: background-color var(--j-dur-fast) var(--j-ease-std);
}

.cp-table tbody tr:hover {
  background-color: rgba(var(--j-gold-rgb), 0.06);
}

.cp-table tbody tr > :first-child {
  box-shadow: inset 0 0 0 rgba(var(--j-gold-rgb), 0);
  transition: box-shadow var(--j-dur) var(--j-ease-std);
}

.cp-table tbody tr:hover > :first-child {
  box-shadow: inset 2px 0 0 var(--j-gold-300);
}

.cp-table tbody tr[hidden] {
  display: none;
}

.cp-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.cp-sort .j-i {
  width: 11px;
  height: 11px;
  opacity: 0.45;
}

.cp-sort:hover,
[aria-sort] > .cp-sort {
  color: var(--j-gold-50);
}

[aria-sort] > .cp-sort .j-i {
  opacity: 1;
}

.cp-namecell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 600;
  color: var(--j-text);
}

.cp-namecell:hover {
  color: var(--j-gold-100);
}

.cp-namecell span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--j-sans);
  font-size: 10px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-muted);
}

.cp-type::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--j-coal-500);
  transform: rotate(45deg);
}

.cp-type--prismatic::before { background: var(--j-fill-prismatic); box-shadow: 0 0 6px rgba(var(--j-prism-rgb), 0.6); }
.cp-type--gold::before { background: var(--j-gold-300); box-shadow: 0 0 6px rgba(var(--j-gold-rgb), 0.5); }
.cp-type--silver::before { background: var(--j-silver-300); }
.cp-type--item::before { background: var(--j-fill-prismatic); transform: none; }

.cp-more-table {
  margin-top: 16px;
}

.cp-more-table > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  margin-bottom: 10px;
  padding: 0 14px;
  border: 1px solid var(--j-line-control);
  background: rgba(var(--j-ink-rgb), 0.5);
  font-family: var(--j-sans);
  font-size: 10.5px;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: var(--j-gold-100);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--j-dur-fast) var(--j-ease-std), color var(--j-dur-fast) var(--j-ease-std);
}

.cp-more-table > summary::-webkit-details-marker {
  display: none;
}

.cp-more-table > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1px solid var(--j-gold-300);
  border-bottom: 1px solid var(--j-gold-300);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--j-dur) var(--j-ease-std);
}

.cp-more-table[open] > summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.cp-more-table > summary:hover {
  border-color: var(--j-gold-300);
  color: var(--j-gold-50);
}

/* ---------- Champion cards (synergies, best champions) ---------- */

.cp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-ccard {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 8px 11px;
  text-align: center;
}

.cp-ccard__link {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.cp-ccard__name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--j-display);
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--j-gold-50);
}

.cp-ccard__link:hover .cp-ccard__name {
  color: var(--j-gold-100);
}

.cp-ccard__main {
  display: grid;
  line-height: 1.15;
}

.cp-ccard__main b {
  font-family: var(--j-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--j-gold-300);
}

.cp-ccard__note {
  font-size: 12px;
}

.cp-ccard__games {
  font-size: 11px;
  color: var(--j-dim);
}

.cp-delta {
  font-family: var(--j-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.cp-delta.is-up { color: var(--j-up-color); }
.cp-delta.is-down { color: var(--j-rose); }
.cp-delta.is-even { color: var(--j-muted); }

/* ---------- Matchups ---------- */

.cp-matchups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.cp-matchup {
  --tone-rgb: var(--j-up-rgb);
  container-type: inline-size;
  min-width: 0;
  padding: 14px 14px 10px;
  border: 1px solid var(--j-line-row);
  border-top: 1px solid rgba(var(--tone-rgb), 0.55);
  background:
    linear-gradient(180deg, rgba(var(--tone-rgb), 0.07), rgba(var(--tone-rgb), 0) 90px),
    rgba(var(--j-ink-rgb), 0.3);
}

.cp-matchup--weak { --tone-rgb: var(--j-rose-rgb); }
.cp-matchup--even { --tone-rgb: var(--j-gold-rgb); }

.cp-matchup__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--j-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: var(--j-track-head);
  text-transform: uppercase;
  color: rgb(var(--tone-rgb));
}

.cp-matchup__title .j-i {
  width: 22px;
  height: 22px;
  padding: 4px;
  border: 1px solid rgba(var(--tone-rgb), 0.5);
  stroke-width: 2;
}

.cp-matchup .cp-summary {
  margin: 0 0 10px;
}

.cp-vs {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-vs__row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(50px, 1fr) 54px 44px;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 8px;
}

.cp-vs__rate {
  font-family: var(--j-display);
  font-size: 15px;
  font-weight: 400;
  text-align: right;
  color: var(--j-gold-50);
}

.cp-vs__games {
  font-size: 11px;
  text-align: right;
  color: var(--j-dim);
}

.cp-matchup--strong .cp-bar i { background: linear-gradient(90deg, rgba(var(--j-up-rgb), 0.4), var(--j-up-color)); }
.cp-matchup--weak .cp-bar i { background: linear-gradient(90deg, rgba(var(--j-rose-rgb), 0.4), var(--j-rose)); }
.cp-matchup--even .cp-bar i { background: var(--j-gloss), var(--j-fill-gold); }

/* ---------- The champion's ArenaSweats leaderboard ---------- */

.cp-players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-player {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 9px 10px 9px 12px;
  border-bottom: 1px solid var(--j-line-soft);
}

.cp-player__rank {
  justify-content: center;
  font-size: 22px;
}

.cp-player__rank:not(.j-ord--1):not(.j-ord--2):not(.j-ord--3) {
  color: var(--j-muted);
}

.cp-player.is-podium {
  background: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.07), rgba(var(--j-gold-rgb), 0) 70%);
}

.cp-player__who {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cp-player__name {
  overflow: hidden;
  font-family: var(--j-display);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--j-gold-50);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-player__name small {
  margin-left: 4px;
  font-size: 0.8em;
  color: var(--j-dim);
}

a.cp-player__name:hover {
  color: var(--j-gold-100);
}

.cp-player__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--j-sans);
  font-size: 10px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-muted);
}

.cp-player__score {
  display: grid;
  justify-items: end;
  line-height: 1.1;
}

.cp-player__score b {
  font-family: var(--j-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--j-gold-300);
  font-variant-numeric: tabular-nums;
}

.cp-player__score small {
  font-family: var(--j-sans);
  font-size: 9px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-dim);
}

.cp-player__go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px 0 11px;
  border: 1px solid var(--j-line-control);
  font-family: var(--j-sans);
  font-size: 10px;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: var(--j-gold-200);
  transition: border-color var(--j-dur-fast) var(--j-ease-std), color var(--j-dur-fast) var(--j-ease-std);
}

.cp-player__go .j-i {
  width: 12px;
  height: 12px;
  transition: transform var(--j-dur) var(--j-ease-std);
}

.cp-player__go:hover {
  border-color: var(--j-gold-300);
  color: var(--j-gold-50);
}

.cp-player__go:hover .j-i {
  transform: translateX(3px);
}

.cp-players-loading {
  min-height: 220px;
}

/* ---------- Stats ---------- */

.cp-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px 32px;
}

.cp-stats-block {
  min-width: 0;
}

.cp-kda {
  display: flex;
  margin: 0 0 16px;
}

.cp-kda div {
  display: flex;
  flex: 1;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 4px;
  padding: 2px 16px;
  border-left: 1px solid var(--j-line-divider);
}

.cp-kda div:first-child {
  padding-left: 0;
  border-left: 0;
}

.cp-kda dt {
  font-family: var(--j-sans);
  font-size: 10.5px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-muted);
}

.cp-kda dd {
  margin: 0;
  font-family: var(--j-display);
  font-size: 30px;
  line-height: 1.05;
  color: var(--j-gold-50);
}

.cp-kda .is-deaths dd { color: var(--j-rose); }

.cp-kda .is-kda dd {
  color: var(--j-gold-300);
  text-shadow: 0 0 16px rgba(var(--j-gold-rgb), 0.3);
}

.cp-statlist {
  display: grid;
  margin: 0;
}

.cp-statlist > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--j-line-soft);
}

.cp-statlist dt {
  font-size: 13px;
  color: var(--j-text-2);
}

.cp-statlist dd {
  margin: 0;
  font-family: var(--j-display);
  font-size: 15px;
  text-align: right;
  color: var(--j-gold-50);
}

.cp-rankbadge {
  display: inline-block;
  min-width: 40px;
  margin-left: 10px;
  padding: 1px 6px;
  border: 1px solid var(--j-line-soft);
  font-family: var(--j-sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--j-muted);
}

.cp-rankbadge.is-top {
  border-color: var(--j-line-strong);
  color: var(--j-gold-200);
}

/* Placement histogram (MAX). */
.cp-places {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  height: 230px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-places__col {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  justify-items: center;
  gap: 5px;
  min-width: 0;
}

.cp-places__pct {
  font-family: var(--j-display);
  font-size: 14px;
  color: var(--j-gold-50);
}

.cp-places__track {
  position: relative;
  display: block;
  width: 100%;
  max-width: 54px;
  background: rgba(var(--j-white-rgb), 0.035);
}

.cp-places__track i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: var(--j-bar-edge);
  transform-origin: bottom;
}

.cp-rv.is-in .cp-places__track i,
html:not(.cp-js) .cp-places__track i {
  animation: cp-rise-bar 0.9s var(--j-ease) both;
  animation-delay: calc(var(--d, 0s) + 0.2s);
}

.cp-places__track .j-fill-1 {
  box-shadow: var(--j-bar-edge), var(--j-glow-1);
}

@keyframes cp-rise-bar {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.cp-places__col .j-ord {
  font-size: 19px;
}

.cp-places__games {
  font-size: 11px;
  color: var(--j-dim);
}

/* Damage split and base stats. */
.cp-split {
  margin: 0 0 14px;
}

.cp-split__bar {
  display: flex;
  height: 8px;
  overflow: hidden;
  background: rgba(var(--j-white-rgb), 0.05);
}

.cp-split__bar i {
  display: block;
  height: 100%;
  background: var(--j-gloss), var(--part);
  box-shadow: var(--j-bar-edge);
  transform-origin: left;
}

.cp-rv.is-in .cp-split__bar i,
html:not(.cp-js) .cp-split__bar i {
  animation: j-grow 0.9s var(--j-ease) both;
  animation-delay: 0.2s;
}

.cp-split__bar i + i {
  border-left: 1px solid var(--j-coal-950);
}

.cp-split--physical { --part: var(--j-fill-bronze); }
.cp-split--magic { --part: linear-gradient(180deg, var(--j-prism-blue), var(--j-magic)); }
.cp-split--true { --part: linear-gradient(180deg, var(--j-white), var(--j-true-damage)); }

.cp-split__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  color: var(--j-muted);
}

.cp-split__legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cp-split__legend span {
  width: 8px;
  height: 8px;
  background: var(--part);
  transform: rotate(45deg);
}

.cp-split__legend b {
  font-family: var(--j-display);
  font-weight: 400;
  color: var(--j-gold-50);
}

.cp-split__legend small {
  color: var(--j-dim);
}

.cp-basestats {
  display: grid;
  margin: 0 0 6px;
}

.cp-basestats > div {
  display: grid;
  grid-template-columns: minmax(96px, 0.9fr) minmax(0, 1fr) minmax(130px, 1.1fr);
  align-items: center;
  gap: 12px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--j-line-soft);
}

.cp-basestats dt {
  font-size: 13px;
  color: var(--j-text-2);
}

.cp-basestats dd {
  margin: 0;
  white-space: nowrap;
}

.cp-basestats dd b {
  font-family: var(--j-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--j-gold-50);
}

.cp-basestats dd small {
  font-size: 11px;
  color: var(--j-dim);
}

.cp-basestats__rank {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp-basestats__rank .cp-bar {
  flex: 1;
}

.cp-basestats__rank .cp-rankbadge {
  margin: 0;
  min-width: 64px;
}

/* ---------- Patch notes ---------- */

.cp-dir {
  --dir-rgb: var(--j-up-rgb);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px 0 8px;
  border: 1px solid rgba(var(--dir-rgb), 0.5);
  background: rgba(var(--dir-rgb), 0.08);
  font-family: var(--j-sans);
  font-size: 10px;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: rgb(var(--dir-rgb));
}

.cp-dir .j-i {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}

.cp-dir--nerf { --dir-rgb: var(--j-rose-rgb); }
.cp-dir--adjusted { --dir-rgb: var(--j-bronze-rgb); }

.cp-patch__changes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px 24px;
}

.cp-patch__change ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-patch__ability {
  margin: 0 0 6px;
  font-family: var(--j-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--j-gold-200);
}

.cp-patch__line {
  position: relative;
  padding-left: 15px;
  overflow-wrap: anywhere;
  font-size: 13px;
  color: var(--j-text-2);
}

.cp-patch__line::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background: var(--j-coal-500);
  transform: rotate(45deg);
}

.cp-patch__line.is-buff::before { background: var(--j-up-color); }
.cp-patch__line.is-nerf::before { background: var(--j-rose); }

.cp-patch__line b {
  font-weight: 600;
  color: var(--j-text);
}

.cp-patch__line .j-i {
  width: 12px;
  height: 12px;
  vertical-align: -0.15em;
  color: var(--j-gold-500);
}

.cp-patch__old {
  color: var(--j-dim);
}

.cp-patch__new {
  font-weight: 600;
  color: var(--j-gold-100);
}

/* Tier list "Patch changes" panel: Buffs / Nerfs / Adjusted columns of champion hexes. */
.cp-patchcols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cp-patchcol {
  min-width: 0;
  padding: 4px 18px 6px;
}

.cp-patchcol + .cp-patchcol {
  border-left: 1px solid;
  border-image: linear-gradient(180deg, rgba(var(--j-gold-rgb), 0), rgba(var(--j-gold-rgb), 0.3), rgba(var(--j-gold-rgb), 0)) 1;
}

.cp-patchcol__head {
  display: flex;
  justify-content: center;
  margin: 0 0 16px;
}

.cp-patchcol__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 14px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-patchcol__item a {
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

.cp-patchcol__item .cp-hex {
  transition: transform var(--j-dur) var(--j-ease-out), filter var(--j-dur) var(--j-ease-out);
}

.cp-patchcol__item a:hover .cp-hex {
  transform: translateY(-3px) scale(1.06);
  filter: brightness(1.15);
}

.cp-patchcol__name {
  font-size: 12px;
  line-height: 1.2;
  color: var(--j-text-2);
}

.cp-patchcol__item a:hover .cp-patchcol__name {
  color: var(--j-gold-100);
}

.cp-patchcol__empty {
  text-align: center;
  color: var(--j-dim);
  font-size: 12.5px;
}

.cp-patchgroup + .cp-patchgroup {
  margin-top: 20px;
  padding-top: 18px;
  background: var(--j-rule-center) 0 0 / 100% 1px no-repeat;
}

.cp-patchgroup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 14px;
}

.cp-patchgroup__title {
  margin: 0;
  font-family: var(--j-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: var(--j-track-head);
  text-transform: uppercase;
  color: var(--j-gold-100);
}

.cp-patchgroup--general .cp-patchgroup__title,
.cp-patch__source--general .cp-patchgroup__title {
  color: var(--j-text);
}

.cp-patchgroup__count {
  font-size: 12px;
  color: var(--j-dim);
}

.cp-patchgroup__count b {
  font-family: var(--j-display);
  font-weight: 400;
  color: var(--j-gold-200);
}

.cp-patchgroup__head .cp-more {
  margin-left: auto;
}

/* Champion page: the Arena change and the general change side by side. */
.cp-patch__sources--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
}

.cp-patch__source {
  min-width: 0;
}

.cp-patch__sources--two .cp-patch__source + .cp-patch__source {
  padding-left: 32px;
  margin-left: -32px;
  border-left: 1px solid var(--j-line);
}

.cp-patch__source .cp-patchgroup__head {
  margin-bottom: 12px;
}

.cp-patch__source .cp-patch__changes {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* ---------- MAX locks (gold) ---------- */

.cp-lock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--j-line-strong);
  background: rgba(var(--j-gold-rgb), 0.1);
  font-family: var(--j-sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: var(--j-gold-100);
  white-space: nowrap;
  transition: border-color var(--j-dur-fast) var(--j-ease-std), color var(--j-dur-fast) var(--j-ease-std), box-shadow var(--j-dur) var(--j-ease-std);
}

.cp-lock .j-i {
  width: 13px;
  height: 13px;
  color: var(--j-gold-300);
}

.cp-lock--value {
  height: 26px;
  margin-top: 1px;
  padding: 0 9px 0 8px;
  font-size: 10px;
}

.cp-lock:hover {
  border-color: var(--j-gold-200);
  color: var(--j-gold-50);
  box-shadow: 0 0 16px rgba(var(--j-gold-rgb), 0.25);
}

.cp-lock--badge {
  height: 20px;
  margin: 2px 0 0;
  padding: 0 7px 0 6px;
  font-size: 9.5px;
}

.cp-locked {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid var(--j-line-row);
  background: rgba(var(--j-ink-rgb), 0.35);
}

.cp-locked__art {
  position: absolute;
  inset: 18px 26px;
  display: flex;
  align-items: flex-end;
  gap: 12%;
  opacity: 0.16;
}

.cp-locked__art i {
  flex: 1;
  height: var(--h);
  background: var(--j-gloss), var(--j-fill-gold);
}

.cp-locked--grid .cp-locked__art {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 14px;
}

.cp-locked--grid .cp-locked__art i {
  height: auto;
  aspect-ratio: 1;
  background: var(--j-gloss), var(--j-fill-gold);
  clip-path: var(--cp-frame);
}

.cp-locked__card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 360px;
  padding: 18px 20px;
  text-align: center;
}

/* The lock in a gold diamond. */
.cp-locked__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--j-gold-100);
}

.cp-locked__badge::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.8);
  background: rgba(var(--j-ink-rgb), 0.9);
  box-shadow: 0 0 22px rgba(var(--j-gold-rgb), 0.25);
  transform: rotate(45deg);
}

.cp-locked__badge .j-i {
  position: relative;
  width: 16px;
  height: 16px;
}

.cp-locked__title {
  margin: 6px 0 0;
  font-family: var(--j-display);
  font-size: 16px;
  letter-spacing: var(--j-track-head);
  text-transform: uppercase;
  color: var(--j-gold-50);
}

.cp-locked__note {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--j-muted);
}

.cp-max-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid var(--j-line-mid);
  background:
    linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.1), rgba(var(--j-gold-rgb), 0) 60%),
    rgba(var(--j-ink-rgb), 0.4);
}

.cp-max-banner p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--j-text-2);
}

.cp-max-banner .j-i {
  flex: none;
  color: var(--j-gold-300);
}

/* ---------- Tier ladder (tier list) ---------- */

.cp-ladder {
  display: grid;
  gap: 12px;
}

.cp-rung {
  --rung-rgb: var(--j-stone-rgb);
  position: relative;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  min-width: 0;
  border: 1px solid var(--j-line);
  background:
    linear-gradient(90deg, rgba(var(--rung-rgb), 0.12), rgba(var(--rung-rgb), 0) 26%),
    var(--j-panel);
}

.cp-rung::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: linear-gradient(180deg, rgba(var(--rung-rgb), 0.2), rgb(var(--rung-rgb)) 50%, rgba(var(--rung-rgb), 0.2));
}

/* Rungs take their league's crest colour (.cp-lg--<league>). */
.cp-rung[class*="cp-lg--"] { --rung-rgb: var(--lg-rgb); border-color: rgba(var(--lg-rgb), 0.28); }
/* Challenger's light gold reads brown as a faint wash over neutral panels, so its rung light is a pale pearl. */
.cp-rung.cp-lg--challenger { --rung-rgb: 238, 232, 218; }

.cp-rung__side {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  padding: 18px 10px;
  border-right: 1px solid var(--j-line-soft);
  text-align: center;
}

.cp-rung__crest {
  display: grid;
  place-items: center;
  width: 92px;
  height: 72px;
  background: radial-gradient(closest-side, rgba(var(--rung-rgb), 0.2), rgba(var(--rung-rgb), 0));
}

.cp-rung__crest .cp-crest {
  filter: drop-shadow(0 3px 8px rgba(var(--j-shadow-rgb), 0.8));
}


.cp-rung__title {
  display: grid;
  gap: 3px;
  margin: 0;
  font-weight: 400;
}

.cp-rung__name {
  font-family: var(--j-display);
  font-size: 16px;
  letter-spacing: var(--j-track-title);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--j-gold-50);
}

.cp-rung[class*="cp-lg--"] .cp-rung__name {
  color: rgb(var(--lg-rgb));
  text-shadow: 0 0 16px rgba(var(--lg-rgb), 0.3);
}

.cp-rung__sub {
  font-family: var(--j-sans);
  font-size: 9px;
  letter-spacing: var(--j-track-label);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--j-muted);
}

.cp-rung__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.cp-rung__count {
  font-size: 11px;
  color: var(--j-text-2);
}

.cp-rung__count b {
  font-family: var(--j-display);
  font-weight: 400;
  font-size: 14px;
  color: var(--j-gold-200);
}

.cp-rung__body {
  min-width: 0;
  padding: 14px 16px 16px;
}

.cp-rung__body .cp-summary {
  margin: 0 0 12px;
  font-size: 13px;
}

.cp-champs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-champ a {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 10px 4px 9px;
  border: 1px solid transparent;
  text-align: center;
  transition: transform var(--j-dur) var(--j-ease-out), border-color var(--j-dur) var(--j-ease-out), background-color var(--j-dur-fast) var(--j-ease-std);
}

.cp-champ a:hover,
.cp-champ a:focus-visible {
  border-color: var(--j-line-strong);
  background-color: rgba(var(--j-gold-rgb), 0.06);
  transform: translateY(-3px);
}

.cp-champ .cp-hex {
  transition: filter var(--j-dur) var(--j-ease-out);
}

.cp-champ .cp-hex__face img {
  transition: transform var(--j-dur-slow) var(--j-ease-out);
}

.cp-champ a:hover .cp-hex {
  filter: brightness(1.15) drop-shadow(0 0 10px rgba(var(--j-gold-rgb), 0.45));
}

.cp-champ a:hover .cp-hex__face img {
  transform: scale(1.24);
}

.cp-champ__rank {
  position: absolute;
  top: 4px;
  left: 7px;
  font-family: var(--j-display);
  font-size: 11px;
  color: var(--j-dim);
}

.cp-champ__name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--j-display);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--j-gold-50);
}

.cp-champ__stat {
  font-size: 12.5px;
  color: var(--j-gold-300);
}

.cp-champ__stat small {
  margin-left: 4px;
}

.cp-champ[hidden] {
  display: none;
}

/* Champions index: alphabetical grid with role filters. */
.cp-champs--index {
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 8px;
}

.cp-champs--index .cp-champ a {
  border-color: var(--j-line-soft);
  background-color: rgba(var(--j-ink-rgb), 0.25);
}

/* Drawn over the portrait frame where they meet, so the crest is never cut off (owner, 2 Nov 2026). */
.cp-champs--index .cp-champ__crest {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
}

/* ---------- Augment and item indexes ---------- */

.cp-tierrows {
  display: grid;
  gap: 4px;
}

.cp-tierrow {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  background: var(--j-rule) 0 100% / 100% 1px no-repeat;
}

.cp-tierrow:last-child {
  background: none;
}

.cp-tierrow__side {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.cp-tierrow__count {
  font-size: 11px;
  color: var(--j-text-2);
}

.cp-tierrow__count b {
  font-family: var(--j-display);
  font-weight: 400;
  color: var(--j-gold-200);
}

.cp-ents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-ent a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon name" "icon stat";
  align-items: center;
  column-gap: 11px;
  padding: 7px 8px 7px 10px;
  border-bottom: 1px solid var(--j-line-soft);
}

.cp-ent .j-icon {
  grid-area: icon;
}

.cp-ent__name {
  display: -webkit-box;
  grid-area: name;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--j-text);
}

.cp-ent a:hover .cp-ent__name {
  color: var(--j-gold-100);
}

.cp-ent__stat {
  grid-area: stat;
  font-size: 12.5px;
  color: var(--j-gold-300);
}

.cp-ent__stat small {
  margin: 0 9px 0 4px;
}

.cp-ent--locked .cp-ent__stat {
  display: flex;
}

.cp-ents--stack {
  grid-template-columns: 1fr;
  gap: 0;
}

.cp-ents--stack .cp-ent {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp-ents--stack .cp-ent a {
  flex: 1;
  min-width: 0;
}

.cp-summary--after {
  margin: 16px 0 0;
}

/* ---------- Entity pages: game text card ---------- */

.cp-gametext {
  max-width: 760px;
  margin: 18px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--j-line-mid);
  background-color: rgba(var(--j-ink-rgb), 0.72);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--j-text-2);
}

.cp-gametext [class^="gt-"] {
  color: var(--j-gold-100);
}

.cp-gametext .gt-magicDamage,
.cp-gametext .gt-scaleAP { color: var(--j-magic); }
.cp-gametext .gt-physicalDamage,
.cp-gametext .gt-scaleAD { color: var(--j-bronze-light); }
.cp-gametext .gt-trueDamage { color: var(--j-true-damage); }
.cp-gametext .gt-healing,
.cp-gametext .gt-scaleHealth { color: var(--j-up-color); }
.cp-gametext .gt-shield { color: var(--j-silver-200); }
.cp-gametext .gt-keywordMajor,
.cp-gametext .gt-keywordStealth { color: var(--j-gold-200); }
.cp-gametext .gt-rarityMythic,
.cp-gametext .gt-rarityLegendary { color: var(--j-gold-200); font-weight: 600; }
.cp-gametext .gt-stats,
.cp-gametext .gt-attention { color: var(--j-text); font-weight: 600; }

.cp-hero--plain {
  padding-bottom: 30px;
}

/* Small prose panel (how it works). */
.cp-prose p {
  max-width: 980px;
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--j-muted);
}

/* Search results. */
.cp-results {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-results a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--j-line-soft);
}

.cp-results b {
  flex: 1;
  font-family: var(--j-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--j-gold-50);
}

.cp-results small {
  font-size: 10px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-muted);
}

/* ---------- Footer: the arena gate ----------
   The page ends on a gunmetal plate edged in gold whose top steps up at 45 degrees into a raised shoulder on the left,
   carrying the ArenaSweats logo (the J8 cards' diagonal cut, at page scale). The links run beside it in heavy Beaufort,
   each led by a slanted gold blade; on hover the blade lights, the link steps forward and a gold rule draws under it. */

.cp-footer {
  --tab: calc(max(0px, (100% - 1560px) / 2) + 300px);
  --step: 30px;
  isolation: isolate;
  margin-top: 40px;
  padding: 0 0 40px;
  font-size: 12.5px;
  color: var(--j-muted);
}

/* The gold edge (behind) and the plate (2px lower, in front), both cut to the shoulder. */
.cp-footer::before,
.cp-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  clip-path: polygon(0 0, var(--tab) 0, calc(var(--tab) + var(--step)) var(--step), 100% var(--step), 100% 100%, 0 100%);
  pointer-events: none;
}

.cp-footer::before {
  top: 0;
  background: linear-gradient(90deg, var(--j-gold-200), var(--j-gold-400) 30%, var(--j-gold-600) 70%, var(--j-gold-500));
}

.cp-footer::after {
  top: 2px;
  background:
    linear-gradient(90deg, rgba(var(--j-light-rgb), 0.08), rgba(var(--j-light-rgb), 0) 300px),
    radial-gradient(50% 160px at 18% 0, rgba(var(--j-light-rgb), 0.07), rgba(var(--j-light-rgb), 0) 80%),
    var(--j-gm-brush, none),
    linear-gradient(180deg, var(--j-coal-600), var(--j-coal-800) 45%, var(--j-coal-1000));
}

.cp-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px 36px;
  margin-bottom: 22px;
}

/* The logo in the shoulder: the header's lockup at a larger size, without the bounce. */
.cp-footer__brand {
  display: block;
  flex: none;
  width: 248px;
  padding-top: 9px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(var(--j-shadow-rgb), 0.8));
}

.cp-footer__brand .j-brand__arena { font-size: 30px; }
.cp-footer__brand .j-brand__sweats { font-size: 24.4px; animation: none; }

/* The links sit on the plate, just under the shoulder's step. */
.cp-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  padding-top: calc(var(--step) + 16px);
}

.cp-footer__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--j-text-2);
  text-shadow: 0 1px 0 rgba(var(--j-shadow-rgb), 0.9);
  transition: color var(--j-dur-fast) var(--j-ease-std), transform var(--j-dur) var(--j-ease-out);
}

.cp-footer__links a::before {
  content: "";
  width: 4px;
  height: 13px;
  background: linear-gradient(180deg, var(--j-gold-100), var(--j-gold-500));
  transform: skewX(-22deg);
  opacity: 0.55;
  transition: opacity var(--j-dur) var(--j-ease-std);
}

.cp-footer__links a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--j-gold-300);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--j-dur) var(--j-ease-out);
}

.cp-footer__links a:hover {
  color: var(--j-gold-50);
  transform: translateX(3px);
}

.cp-footer__links a:hover::before {
  opacity: 1;
}

.cp-footer__links a:hover::after {
  transform: none;
}

.cp-footer__links a[data-leaves-pages] {
  color: var(--j-gold-150);
}

.cp-footer p {
  max-width: 1000px;
  margin: 0 0 6px;
}

.cp-footer__legal {
  font-size: 11.5px;
  color: var(--j-dim);
}

/* Phones: a narrower shoulder and a smaller logo. */
@media (max-width: 640px) {
  .cp-footer { --tab: 196px; --step: 22px; }
  .cp-footer__brand { width: 180px; padding-top: 6px; }
  .cp-footer__brand .j-brand__arena { font-size: 22px; }
  .cp-footer__brand .j-brand__sweats { font-size: 17.9px; }
  .cp-footer__links { gap: 10px 22px; padding-top: 0; }
}

/* ---------- Container queries for narrow panels ---------- */

/* Augment podium in a narrow panel (half width at 1001-1280px, phones): one row per augment. */
.cp-augments {
  container: augments / inline-size;
}

@container augments (max-width: 600px) {
  .cp-podium { grid-template-columns: 1fr; }
  .cp-podium__item {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
    padding: 12px 12px 12px 40px;
  }
  .cp-podium__place { top: 50%; left: 14px; transform: translateY(-50%); }
  .cp-podium__link { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; grid-column: 1 / -1; gap: 12px; }
  .cp-podium__icon .j-icon { --size: 48px !important; width: 48px; height: 48px; }
  .cp-podium__meta { grid-column: 1; }
  .cp-podium__stats { grid-column: 2; justify-self: end; }
}

/* Boots: five across only when the panel is wide enough for names like Ghostcrawlers. */
.cp-boots {
  container-type: inline-size;
}

@container (max-width: 540px) {
  .cp-boots .cp-tiles--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Matchup columns narrower than a phone screen drop the bar so names have room. */
@container (max-width: 330px) {
  .cp-matchup .cp-vs__row { grid-template-columns: minmax(0, 1fr) 50px 36px; gap: 8px; }
  .cp-matchup .cp-vs__bar { display: none; }
}

/* Prismatic items: one row of tiles across the full width. Boots: five in a row beside the skill order. */
.cp-tiles--row {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

.cp-tiles--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Synergy and best champion cards (twelve of them): twelve across on wide screens, six on laptops. */
@media (min-width: 1440px) {
  .cp-cards { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

@media (min-width: 1001px) and (max-width: 1439px) {
  .cp-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- Leagues: champion tiers are the champion leaderboard's leagues, shown with its crests ---------- */

/* The crest artwork is wider than tall (wings); it sits centred in a square box. */
.cp-crest {
  display: block;
  flex: none;
  width: var(--size);
  height: var(--size);
  object-fit: contain;
}

/* Crest, league name and letter chip in one line (tables, the champion band). */
.cp-league {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.cp-league__name {
  font-family: var(--j-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--j-gold-50);
}

.cp-league[class*="cp-lg--"] .cp-league__name {
  color: rgb(var(--lg-rgb));
}

/* The letter beside a league: a small secondary chip, not a plate. */
.cp-tier--chip {
  --tier-size: 18px;
  padding: 0 4px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

.cp-band__stat--tier .cp-league__name {
  font-size: 22px;
}

.cp-band__stat--tier .cp-league {
  gap: 10px;
}

/* Jump links: one crest per league with its champion count. */
.cp-jump--leagues {
  gap: 6px;
}

.cp-jump--leagues a {
  gap: 8px;
  height: 42px;
  padding: 0 12px 0 8px;
  color: var(--j-text-2);
}

.cp-jump--leagues .cp-jump__name {
  font-family: var(--j-sans);
  font-size: 10px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
}

.cp-jump--leagues b {
  font-family: var(--j-display);
  font-weight: 400;
  font-size: 14px;
  color: var(--j-gold-200);
}

/* ---------- Tier list views: the tier rows and the champion leaderboard ---------- */

.cp-views {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.cp-viewbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
}

.cp-viewswitch[hidden] {
  display: none;
}

/* The view tabs match the player profile's tabs (journey/dashboard.css, not loaded on these pages). */
.cp-viewswitch {
  display: flex;
  gap: 3px;
  padding-top: 4px;
}

.cp-viewswitch .j-tab {
  --cut: 10px;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform var(--j-dur-fast) var(--j-ease-out);
}

.cp-viewswitch .j-tab::before,
.cp-viewswitch .j-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  pointer-events: none;
}

.cp-viewswitch .j-tab::before {
  background:
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.08), rgba(var(--j-plat-rgb), 0.015) 65%, rgba(var(--j-plat-rgb), 0)),
    linear-gradient(180deg, rgba(var(--j-coal-800-rgb), 0.92), rgba(var(--j-coal-900-rgb), 0.92));
  box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.2), inset 1px 0 0 rgba(var(--j-plat-rgb), 0.07), inset -1px 0 0 rgba(var(--j-plat-rgb), 0.07);
}

.cp-viewswitch .j-tab::after {
  background:
    linear-gradient(var(--j-gold-300), var(--j-gold-300)) 0 0 / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(var(--j-gold-rgb), 0.16), rgba(var(--j-gold-rgb), 0.03) 70%, rgba(var(--j-gold-rgb), 0.07));
  opacity: 0;
  transition: opacity var(--j-dur-fast) var(--j-ease-std);
}

.cp-viewswitch .j-tab:hover { transform: translateY(-3px); }
.cp-viewswitch .j-tab:hover::after { opacity: 0.7; }
.cp-viewswitch .j-tab:active { transform: translateY(-1px); }

.cp-viewswitch .j-tab__icon {
  width: 18px;
  height: 18px;
  color: var(--j-gold-500);
}

.cp-viewswitch .j-tab__name {
  font-family: var(--j-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--j-gold-100);
  white-space: nowrap;
}

.cp-viewswitch .j-tab.is-active {
  --cut: 12px;
  transform: none;
}

.cp-viewswitch .j-tab.is-active::before {
  background: linear-gradient(180deg, rgba(var(--j-white-rgb), 0.12), rgba(var(--j-white-rgb), 0.05) 70%, rgba(var(--j-gold-rgb), 0.08)), var(--j-coal-700);
  box-shadow: inset 1px 0 0 rgba(var(--j-white-rgb), 0.1), inset -1px 0 0 rgba(var(--j-white-rgb), 0.1);
}

.cp-viewswitch .j-tab.is-active::after { opacity: 1; }
.cp-viewswitch .j-tab.is-active .j-tab__name { color: var(--j-gold-50); }
.cp-viewswitch .j-tab.is-active .j-tab__icon { color: var(--j-gold-300); }

/* A leaderboard's rating explained: one short line, the help popup's text behind See more. */
.cp-explain {
  margin: -4px 0 16px;
  max-width: 900px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--j-muted);
}

.cp-explain__title {
  margin: 0 0 2px;
  font-family: var(--j-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--j-gold-100);
}

.cp-explain__short { margin: 0; }
.cp-explain__more p { margin: 8px 0 0; }
.cp-explain__lead { font-style: italic; }

.cp-explain__toggle {
  display: block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--j-gold-200);
  cursor: pointer;
}

.cp-explain__toggle:hover { color: var(--j-gold-50); }

/* A view made of several panels (the augment and item tier lists). */
.cp-viewpanel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.cp-viewpanel > section {
  scroll-margin-top: calc(var(--j-topbar-h) + 60px);
}

/* The augment and item leaderboards: the podium shows the icon itself, the table the champions each is best on. */
.cp-lpodium__art--entity {
  line-height: 0;
}

.cp-lrow__best {
  white-space: nowrap;
}

.cp-lrow__best a {
  display: inline-block;
  margin-right: 4px;
  line-height: 0;
  vertical-align: middle;
}

/* With scripts the switch shows one view at a time; without them both views show, one after the other. */
.cp-views.is-switched [data-view-panel][hidden] {
  display: none;
}

.cp-views.is-switched [data-view-panel] {
  animation: cp-view-in var(--j-dur-appear) var(--j-ease) both;
}

@keyframes cp-view-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.cp-lb-link {
  gap: 9px;
}

.cp-lb-link .j-i,
.cp-lb-more .j-i {
  width: 14px;
  height: 14px;
  color: var(--j-gold-300);
}

.cp-lb-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Leaderboard podium: the three highest rated champions. */
.cp-lpodium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.cp-lpodium__item {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 12px 14px;
  border: 1px solid var(--j-line);
  background:
    radial-gradient(120% 70% at 50% 0, rgba(var(--j-gold-rgb), 0.1), rgba(var(--j-gold-rgb), 0) 70%),
    rgba(var(--j-ink-rgb), 0.35);
  text-align: center;
}

.cp-lpodium__item--1 {
  border-color: rgba(var(--j-p1-rgb), 0.4);
  background:
    radial-gradient(120% 70% at 50% 0, rgba(var(--j-p1-rgb), 0.16), rgba(var(--j-p1-rgb), 0) 70%),
    rgba(var(--j-ink-rgb), 0.35);
}

.cp-lpodium__rank {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 30px;
}

.cp-lpodium__link {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.cp-lpodium__art {
  position: relative;
  display: block;
  padding-bottom: 12px;
}

.cp-lpodium__crest {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 5px rgba(var(--j-shadow-rgb), 0.9));
}

.cp-lpodium__name {
  font-family: var(--j-display);
  font-size: 19px;
  letter-spacing: 0.04em;
  color: var(--j-gold-50);
}

.cp-lpodium__link:hover .cp-lpodium__name {
  color: var(--j-gold-200);
}

.cp-lpodium__league {
  font-family: var(--j-sans);
  font-size: 10px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-muted);
}

.cp-lpodium__stats {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 4px 0 0;
}

.cp-lpodium__stats div {
  display: grid;
  gap: 3px;
}

.cp-lpodium__stats dt {
  font-family: var(--j-sans);
  font-size: 9.5px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-dim);
}

.cp-lpodium__stats dd {
  margin: 0;
  font-family: var(--j-display);
  font-size: 17px;
  color: var(--j-gold-50);
  font-variant-numeric: tabular-nums;
}

/* Leaderboard table rows: rank ordinals for the podium, a hairline in the league's metal at each league change. */
.cp-table--lboard td,
.cp-table--lboard tbody th {
  padding-top: 7px;
  padding-bottom: 7px;
}

.cp-lrow__rank {
  display: inline-block;
  min-width: 22px;
  font-family: var(--j-display);
  font-size: 15px;
  color: var(--j-muted);
}

.cp-lrow__rank.j-ord {
  font-size: 18px;
}

.cp-lrow__rating {
  color: var(--j-gold-200);
}

/* ---------- League colours: the crest artwork's colours (static/imgs/crests/*.svg), the same in every theme ---------- */
/* Taken from each crest's main fill and lightened for text on dark panels. Grandmaster uses its wing colour: its red
   gem would add red outside the logo, the leaderboard button and live states. */
.cp-lg--challenger { --lg-rgb: 244, 200, 116; }
.cp-lg--grandmaster { --lg-rgb: 196, 172, 190; }
.cp-lg--master { --lg-rgb: 196, 140, 240; }
.cp-lg--diamond { --lg-rgb: 166, 128, 246; }
.cp-lg--emerald { --lg-rgb: 72, 196, 112; }
.cp-lg--platinum { --lg-rgb: 84, 196, 232; }
.cp-lg--gold { --lg-rgb: 226, 158, 82; }
.cp-lg--silver { --lg-rgb: 168, 186, 192; }
.cp-lg--bronze { --lg-rgb: 196, 130, 102; }
.cp-lg--iron { --lg-rgb: 150, 140, 142; }

/* ---------- Rating card: the champion's rating as the leaderboard shows ratings ---------- */

.cp-rating {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 14px 18px 14px 12px;
  border: 1px solid rgba(var(--lg-rgb), 0.38);
  background:
    radial-gradient(70% 120% at 0 50%, rgba(var(--lg-rgb), 0.2), rgba(var(--lg-rgb), 0) 70%),
    rgba(var(--j-ink-rgb), 0.62);
}

.cp-rating::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: linear-gradient(180deg, rgba(var(--lg-rgb), 0.2), rgb(var(--lg-rgb)) 50%, rgba(var(--lg-rgb), 0.2));
}

.cp-rating__crest {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  height: 92px;
  transition: transform var(--j-dur) var(--j-ease-out);
}

.cp-rating__crest:hover {
  transform: translateY(-2px) scale(1.04);
}

/* A blurred copy of the crest lights the card in the crest's own colours. */
.cp-rating__glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: blur(16px) saturate(1.4);
  opacity: 0.55;
}

.cp-rating__crest .cp-crest {
  position: relative;
  filter: drop-shadow(0 3px 8px rgba(var(--j-shadow-rgb), 0.85));
}

.cp-rating__body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.cp-rating__kicker {
  margin: 0;
  font-family: var(--j-sans);
  font-size: 10px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-muted);
}

.cp-rating__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
}

.cp-rating__league {
  font-family: var(--j-display);
  font-size: 26px;
  letter-spacing: var(--j-track-title);
  line-height: 1.1;
  text-transform: uppercase;
  color: rgb(var(--lg-rgb));
  text-shadow: 0 0 18px rgba(var(--lg-rgb), 0.35);
}

.cp-rating__value b {
  font-family: var(--j-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--j-gold-50);
  font-variant-numeric: tabular-nums;
}

.cp-rating__value::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 20px;
  margin: 0 12px 0 2px;
  vertical-align: -3px;
  background: var(--j-line-mid);
}

.cp-rating__rank {
  margin-left: auto;
  font-family: var(--j-display);
  font-size: 14px;
  color: var(--j-gold-200);
  white-space: nowrap;
}

.cp-rating__explain,
.cp-rating__perf {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--j-text-2);
}

.cp-rating__explain b,
.cp-rating__perf b {
  font-family: var(--j-display);
  font-weight: 400;
  color: var(--j-gold-50);
}

.cp-rating__explain b.is-up { color: var(--j-up-color); }
.cp-rating__explain b.is-down { color: var(--j-rose); }

.cp-rating__explain a {
  color: var(--j-gold-200);
}

.cp-rating__perf small {
  font-size: 11.5px;
  color: var(--j-dim);
}

/* Hero summary: the rating card beside the stat band. */
.cp-hero__summary {
  display: grid;
  grid-template-columns: minmax(420px, 640px) minmax(0, 1fr);
  align-items: center;
  gap: 18px 34px;
  margin-top: 20px;
}

.cp-band--hero {
  margin: 0;
  padding-top: 0;
  background: none;
}

/* ---------- Recommended build at a glance (champion page, right under the header) ---------- */

.cp-glance-wrap {
  margin-top: 18px;
}

.cp-glance {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0 !important;
}

.cp-glance__title {
  display: grid;
  align-content: center;
  margin: 0;
  padding: 14px 18px;
  border-right: 1px solid var(--j-line-soft);
  font-family: var(--j-display);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: var(--j-track-head);
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--j-gold-100);
}

.cp-glance__cells {
  display: grid;
  grid-template-columns: 1.35fr 1.35fr 1fr 1fr 1fr 1fr;
  min-width: 0;
}

.cp-glance__cell {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 12px 16px 13px;
  border-left: 1px solid var(--j-line-soft);
  transition: background-color var(--j-dur-fast) var(--j-ease-std);
}

.cp-glance__cell:first-child {
  border-left: 0;
}

.cp-glance__cell:hover {
  background-color: rgba(var(--j-gold-rgb), 0.06);
}

.cp-glance__label {
  font-family: var(--j-sans);
  font-size: 10px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-gold-300);
}

.cp-glance__icons {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

.cp-glance__pick {
  display: block;
  line-height: 0;
}

.cp-glance__arrow {
  width: 12px;
  height: 12px;
  color: var(--j-dim);
}

.cp-glance__icons.cp-keys .cp-key {
  width: 34px;
  height: 34px;
  font-size: 17px;
}

.cp-glance__text {
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--j-text-2);
}

.cp-glance__cell:hover .cp-glance__text {
  color: var(--j-gold-50);
}

/* Leaderboard ratings and tier list rungs in the league's colour. */
.cp-lrow__rating b {
  font-weight: 400;
  color: rgb(var(--lg-rgb));
}

.cp-lpodium__rating {
  color: rgb(var(--lg-rgb));
}

.cp-lpodium__item .cp-lpodium__league {
  color: rgb(var(--lg-rgb));
}

.cp-lpodium__explain {
  font-size: 12px;
  color: var(--j-dim);
}

/* ---------- Responsive ---------- */

@media (max-width: 1500px) {
  .cp-band--hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cp-band--hero .cp-band__stat:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
  .cp-wrap { padding: 0 22px; }
  .cp-band__stat { padding: 2px 14px; }
  .cp-band__stat dd { font-size: 23px; }
  .cp-hero__float { right: 3%; }
}

@media (max-width: 1280px) {
  .cp-hero__summary { grid-template-columns: minmax(0, 1fr); }
  .cp-glance { grid-template-columns: minmax(0, 1fr); }
  .cp-glance__title { padding: 12px 16px 0; border-right: 0; font-size: 13px; }
  .cp-glance__cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-glance__cell:nth-child(3n + 1) { border-left: 0; }
  .cp-glance__cell:nth-child(n + 4) { border-top: 1px solid var(--j-line-soft); }
  .cp-span-7,
  .cp-span-5 { grid-column: span 6; }
  .cp-rarities { grid-template-columns: 1fr; gap: 12px; }
  .cp-hero__top { flex-direction: column; }
  .cp-hero__side { justify-items: start; }
  .cp-filters { justify-content: flex-start; }
  .cp-players { grid-template-columns: 1fr; }
  .cp-hero__float { display: none; }
}

@media (max-width: 1000px) {
  .cp-grid > [class*="cp-span-"] { grid-column: 1 / -1; }
  .cp-rarities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-patchcols { grid-template-columns: 1fr; }
  .cp-patch__sources--two { grid-template-columns: 1fr; }
  .cp-patch__sources--two .cp-patch__source + .cp-patch__source { padding: 16px 0 0; margin: 0; border-left: 0; border-top: 1px solid var(--j-line); }
  .cp-patchcol + .cp-patchcol { border-left: 0; border-top: 1px solid var(--j-line); padding-top: 14px; margin-top: 8px; }
}

@media (max-width: 760px) {
  .cp-wrap { padding: 0 16px; }
  .cp-rarities { grid-template-columns: 1fr; }
  .cp-rung { grid-template-columns: 1fr; }
  .cp-rung__side { grid-auto-flow: column; justify-content: start; align-items: center; gap: 16px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--j-line-soft); text-align: left; }
  .cp-tier--xl { --tier-size: 58px; width: 58px; font-size: 26px; }
  .cp-rung__side { grid-template-columns: auto minmax(0, 1fr); grid-auto-flow: row; justify-items: start; gap: 2px 14px; }
  .cp-rung__crest { grid-row: span 2; width: 64px; height: 52px; }
  .cp-rung__crest .cp-crest { width: 52px; height: 52px; }
  .cp-lpodium { grid-template-columns: 1fr; }
  .cp-lpodium__item { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 14px; padding: 12px 12px 12px 48px; text-align: left; }
  .cp-lpodium__rank { top: 50%; left: 14px; transform: translateY(-50%); font-size: 24px; }
  .cp-lpodium__link { grid-row: span 3; }
  .cp-lpodium__link .cp-hex { --w: 60px !important; }
  .cp-lpodium__name { font-size: 17px; }
  .cp-lpodium__link { justify-items: center; }
  .cp-lpodium__stats { justify-content: start; }
  .cp-tierrow { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .cp-tierrow .cp-tier--lg { --tier-size: 34px; }
  .cp-hc { --w: 50px; --gap: 4px; }
}

@media (max-width: 640px) {
  .cp-body { font-size: 13.5px; }
  .cp-hero { padding-top: 12px; }
  .cp-hero__art { width: 100%; opacity: 0.4; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
  .cp-hero__id { gap: 22px; align-items: flex-start; }
  .cp-hero__portrait { width: 84px; height: 84px; margin: 8px 0 0 6px; }
  .cp-hero__frame > img { width: 76px; height: 76px; }
  .cp-hero__portrait { --crest-size: 116px; }
  .cp-hero__portrait > .j-crest__seal { inset: -16px; }
  .cp-hero__league { right: -16px; bottom: -12px; }
  .cp-hero__league .cp-crest { width: 38px; height: 38px; }
  .cp-jump--leagues .cp-jump__name { display: none; }
  .cp-jump--leagues a { height: 38px; padding: 0 10px 0 6px; }
  .cp-viewswitch { width: 100%; }
  .cp-rating { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px 12px 12px 8px; }
  .cp-rating__crest { width: 72px; height: 68px; }
  .cp-rating__crest .cp-crest { width: 60px; height: 60px; }
  .cp-rating__league,
  .cp-rating__value b { font-size: 21px; }
  .cp-rating__rank { margin-left: 0; }
  .cp-rating__explain,
  .cp-rating__perf { font-size: 12.5px; }
  .cp-glance__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-glance__cell:nth-child(n) { border-left: 1px solid var(--j-line-soft); border-top: 1px solid var(--j-line-soft); padding: 10px 12px; }
  .cp-glance__cell:nth-child(2n + 1) { border-left: 0; }
  .cp-glance__cell:nth-child(-n + 2) { border-top: 0; }
  .cp-glance__icons img { width: 34px; height: 34px; }
  .cp-viewswitch { width: 100%; }
  .cp-viewswitch .j-tab { flex: 1 1 0; padding: 12px 10px; }
  .cp-h1 { font-size: 29px; }
  .cp-hero__kicker { font-size: 10px; letter-spacing: var(--j-track-meta); }
  .cp-hero__kicker .cp-role,
  .cp-hero__kicker .j-diamond { display: none; }
  .cp-hero__side { width: 100%; }
  .cp-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .cp-filter:first-child,
  .cp-filters__apply { grid-column: 1 / -1; }
  .cp-filter select { min-width: 0; width: 100%; padding-right: 26px; }
  .cp-filter .j-select { display: flex; }
  .cp-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .cp-band--hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-band--hero .cp-band__stat:nth-child(n) { border-left: 1px solid var(--j-line-divider); padding-left: 10px; }
  .cp-band--hero .cp-band__stat:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .cp-band__stat { min-width: 0; padding: 0 10px; }
  .cp-band__stat:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .cp-band__stat dd { font-size: 20px; }
  .cp-band__stat--max dd { font-size: 16px; }
  .cp-band--narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-band--narrow .cp-band__stat:nth-child(3n + 1) { border-left: 1px solid var(--j-line-divider); padding-left: 10px; }
  .cp-band--narrow .cp-band__stat:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .cp-tabs a { padding: 12px 11px 10px; font-size: 12px; letter-spacing: 0.14em; }
  .cp-grid { gap: 12px; padding-top: 14px; }
  .cp-body .j-panel { padding: 14px 12px; }
  .cp-tiles { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
  .cp-tiles--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-cards { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .cp-champs { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; }
  .cp-ents { grid-template-columns: 1fr; }
  .cp-vs__row { grid-template-columns: minmax(0, 1.4fr) minmax(40px, 1fr) 48px 38px; gap: 8px; }
  .cp-kda dd { font-size: 24px; }
  .cp-kda div { padding: 2px 10px; }
  .cp-places { height: 190px; gap: 6px; }
  .cp-table th,
  .cp-table td { padding: 7px 8px; font-size: 12.5px; }
  .cp-skill-best { padding: 14px; }
  .cp-builds { grid-template-columns: 1fr; gap: 8px; }
  .cp-build { grid-template-columns: auto 1fr; justify-items: start; align-items: center; padding: 16px 10px 12px; }
  .cp-build .cp-mini-stats { justify-self: end; gap: 10px; }
  .cp-build .j-icon { --size: 38px !important; width: 38px; height: 38px; }
  .cp-build__flag { left: 14px; transform: none; }
  .cp-crumbs li:last-child { display: none; }
  .cp-player { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 9px 4px; }
  .cp-player__go { display: none; }
  .cp-player__rank { font-size: 18px; }
  .cp-basestats > div { grid-template-columns: minmax(80px, 0.9fr) minmax(0, 1fr) minmax(110px, 1fr); gap: 8px; }
  .cp-jump a { height: 36px; }
  .cp-jump .cp-tier--md { --tier-size: 30px; }
}

/* ---------- Option C2b: the champion title on a slanted blade banner ---------- */
/* The champion's title is struck into a small polished-gold blade tab, the roles follow in light caps split by slanted
   gold seams. The name sits on a dark gunmetal blade that cuts in from the portrait with a gold accent slash on its
   leading edge (the Hall of Fame card's slash), set in heavy Beaufort. The context line below uses the same slanted gold
   seams in place of diamonds, and the ladder place reads as a gold numeral. */

/* A slanted seam (breadcrumb, roles, context line). */
.cp-hero--champion .cp-crumbs li + li::before,
.cp-hero--champion .j-diamond {
  width: 3px;
  height: 11px;
  border: 0;
  background: linear-gradient(180deg, var(--j-gold-100), var(--j-gold-400));
  box-shadow: 0 0 6px rgba(var(--j-gold-rgb), 0.35);
  opacity: 1;
  transform: skewX(-24deg);
}

.cp-hero--champion .cp-crumbs li + li::before {
  margin: 0 10px 0 6px;
  vertical-align: -0.1em;
}

.cp-hero--champion .cp-crumbs ol {
  font-weight: 600;
  letter-spacing: 0.1em;
}

.cp-hero--champion .cp-hero__kicker {
  gap: 4px 12px;
  margin-bottom: 4px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* The title tab: a gold blade with the champion's title in dark ink. */
.cp-hero--champion .cp-hero__kicker > span:first-child {
  position: relative;
  z-index: 0;
  margin: 0 6px 0 4px;
  padding: 5px 16px 4px;
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--j-gold-ink);
  text-shadow: 0 1px 0 rgba(var(--j-light-rgb), 0.5);
}

.cp-hero--champion .cp-hero__kicker > span:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--j-fill-1);
  box-shadow: inset 0 1px 0 rgba(var(--j-light-rgb), 0.85), inset 0 -1px 0 rgba(var(--j-gold-900-rgb), 0.6), 0 0 16px rgba(var(--j-gold-rgb), 0.3);
  transform: skewX(-18deg);
}

.cp-hero--champion .cp-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--j-text);
  text-shadow: 0 1px 3px rgba(var(--j-ink-rgb), 0.9);
}

/* The name blade. */
.cp-hero--champion .cp-h1 {
  position: relative;
  z-index: 0;
  display: inline-block;
  margin-left: -6px;
  padding: 4px 44px 8px 28px;
  font-family: "JourneyDisplayBold", var(--j-display);
  font-weight: 700;
  font-size: clamp(34px, 3.4vw, 54px);
  letter-spacing: 0.02em;
  color: var(--j-gold-50);
  text-shadow: 0 2px 0 rgba(var(--j-shadow-rgb), 0.9), 0 0 26px rgba(var(--j-gold-rgb), 0.22);
}

.cp-hero--champion .cp-h1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--j-gold-300) 0, var(--j-gold-100) 4px, var(--j-gold-400) 7px, rgba(var(--j-gold-rgb), 0) 7px),
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.1), rgba(var(--j-plat-rgb), 0) 40%),
    linear-gradient(90deg, rgba(var(--j-coal-700-rgb), 0.92) 0%, rgba(var(--j-coal-800-rgb), 0.8) 60%, rgba(var(--j-coal-800-rgb), 0) 100%);
  box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.22);
  transform: skewX(-16deg);
  transform-origin: 0 100%;
}

.cp-hero--champion .cp-meta {
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--j-text);
}

.cp-hero--champion .cp-meta__item {
  gap: 14px;
}

.cp-hero--champion .cp-meta__rank {
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--j-gold-200);
  text-shadow: 0 0 12px rgba(var(--j-gold-rgb), 0.35), 0 1px 3px rgba(var(--j-ink-rgb), 0.9);
}

/* The champion hero keeps this look over the shared breadcrumb and meta line (T4a, earlier in this file): plain sans
   breadcrumbs with the slanted seams, and the context line as plain text with an underlined patch link. */
.cp-hero--champion .cp-crumbs ol {
  gap: 6px;
  font-family: var(--j-sans);
  font-size: 10.5px;
  text-shadow: none;
}

.cp-hero--champion .cp-crumbs li + li::before {
  clip-path: none;
}

.cp-hero--champion .cp-crumbs [aria-current] {
  color: var(--j-text-2);
}

.cp-hero--champion .cp-meta {
  text-shadow: 0 1px 3px rgba(var(--j-ink-rgb), 0.9);
}

.cp-hero--champion .cp-meta > span {
  height: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
}

.cp-hero--champion .cp-meta .j-diamond {
  display: inline-block;
}

.cp-hero--champion .cp-meta__season {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--j-gold-200);
}

.cp-hero--champion .cp-meta__rank {
  font-weight: inherit;
}

.cp-hero--champion .cp-meta__item:has(> .cp-meta__patch) {
  padding: 0;
}

.cp-hero--champion .cp-meta__patch {
  display: inline;
  height: auto;
  padding: 0;
  color: var(--j-ember-200);
  background: linear-gradient(rgba(var(--j-ember-rgb), 0.45), rgba(var(--j-ember-rgb), 0.45)) 0 100% / 100% 1px no-repeat;
  box-shadow: none;
  clip-path: none;
}

.cp-hero--champion .cp-meta__patch::after {
  content: none;
}

.cp-hero--champion .cp-meta__patch:hover {
  color: var(--j-gold-50);
  transform: none;
}

@media (max-width: 640px) {
  .cp-hero--champion .cp-hero__kicker > span:first-child { font-size: 10.5px; padding: 4px 12px 3px; }
  .cp-hero--champion .cp-h1 { font-size: 29px; padding: 3px 26px 6px 18px; }
  .cp-hero--champion .cp-meta { font-size: 10.5px; gap: 6px 10px; letter-spacing: 0.06em; }
  .cp-hero--champion .cp-meta__item { gap: 10px; }
}

/* ---------- Option C4b: the filters as slanted selector blades ---------- */
/* Each filter is a raised gunmetal blade slanted like the Wrap controls, with its label in a small gold tab notched
   into the blade's top edge and the value in heavy Beaufort. Hover lifts the blade, lights a gold leading edge and
   sweeps light across it. The leaderboard link is a wider blade led by a polished gold slash. */

.cp-hero--champion .cp-hero__side {
  gap: 14px;
}

.cp-hero--champion .cp-filters {
  --slant: -14deg;
  gap: 10px;
  padding-top: 8px;
}

.cp-hero--champion .cp-filter {
  position: relative;
  z-index: 0;
  gap: 0;
  transition: transform var(--j-dur) var(--j-ease-out);
}

/* The blade body. */
.cp-hero--champion .cp-filter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.15), rgba(var(--j-plat-rgb), 0) 42%),
    linear-gradient(180deg, rgba(var(--j-coal-600-rgb), 0.96), rgba(var(--j-coal-800-rgb), 0.97));
  box-shadow:
    inset 0 1px 0 rgba(var(--j-plat-rgb), 0.36),
    inset 0 -2px 0 rgba(var(--j-shadow-rgb), 0.75),
    0 3px 0 rgba(var(--j-coal-900-rgb), 1),
    0 10px 18px -6px rgba(var(--j-shadow-rgb), 0.9);
  transform: skewX(var(--slant));
}

/* Gold leading edge, lit on hover and focus. */
.cp-hero--champion .cp-filter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--j-gold-200), var(--j-gold-400) 3px, rgba(var(--j-gold-rgb), 0) 3px), linear-gradient(0deg, rgba(var(--j-gold-rgb), 0.16), rgba(var(--j-gold-rgb), 0) 60%);
  box-shadow: 0 0 18px rgba(var(--j-gold-rgb), 0.25);
  opacity: 0;
  transform: skewX(var(--slant));
  transition: opacity var(--j-dur-fast) var(--j-ease-std);
  pointer-events: none;
}

.cp-hero--champion .cp-filter:hover,
.cp-hero--champion .cp-filter:focus-within {
  transform: translateY(-2px);
}

.cp-hero--champion .cp-filter:hover::after,
.cp-hero--champion .cp-filter:focus-within::after {
  opacity: 1;
}

/* The label tab notched into the top edge. */
.cp-hero--champion .cp-filter .j-label {
  position: absolute;
  top: -8px;
  left: 14px;
  z-index: 1;
  padding: 2px 9px 1px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--j-gold-ink);
  background: var(--j-fill-1);
  box-shadow: inset 0 1px 0 rgba(var(--j-light-rgb), 0.8), 0 2px 4px rgba(var(--j-shadow-rgb), 0.7);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  pointer-events: none;
}

.cp-hero--champion .cp-filter .j-select select {
  min-width: 150px;
  height: 44px;
  padding: 6px 38px 0 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--j-gold-50);
  text-shadow: 0 1px 0 rgba(var(--j-shadow-rgb), 0.9);
}

.cp-hero--champion .cp-filter .j-select .j-i {
  right: 16px;
  margin-top: -4px;
  transition: transform var(--j-dur-fast) var(--j-ease-out);
}

.cp-hero--champion .cp-filter:hover .j-select .j-i {
  transform: translateY(2px);
}

/* The leaderboard blade. */
.cp-hero--champion .cp-hero__lb {
  z-index: 0;
  height: 42px;
  padding: 0 24px 0 30px;
  border: 0;
  background: none;
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--j-gold-50);
  transition: transform var(--j-dur) var(--j-ease-out);
}

.cp-hero--champion .cp-hero__lb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--j-gold-300) 0, var(--j-gold-50) 5px, var(--j-gold-300) 10px, var(--j-gold-500) 13px, rgba(var(--j-gold-rgb), 0) 13px),
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.15), rgba(var(--j-plat-rgb), 0) 45%),
    linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.16), rgba(var(--j-gold-rgb), 0) 60%),
    linear-gradient(180deg, rgba(var(--j-coal-600-rgb), 0.97), rgba(var(--j-coal-800-rgb), 0.97));
  box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.36), inset 0 0 0 1px rgba(var(--j-gold-rgb), 0.3), 0 3px 0 rgba(var(--j-coal-900-rgb), 1), 0 10px 18px -6px rgba(var(--j-shadow-rgb), 0.9);
  transform: skewX(-14deg);
}

.cp-hero--champion .cp-hero__lb::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  background: linear-gradient(90deg, rgba(var(--j-light-rgb), 0), rgba(var(--j-light-rgb), 0.2), rgba(var(--j-light-rgb), 0));
  opacity: 0;
  transform: translateX(-60%) skewX(-14deg);
  transition: transform var(--j-dur-slow) var(--j-ease-out), opacity var(--j-dur-slow) var(--j-ease-out);
  pointer-events: none;
}

.cp-hero--champion .cp-hero__lb:hover {
  transform: translateY(-2px);
  border: 0;
  color: var(--j-gold-25);
}

.cp-hero--champion .cp-hero__lb:hover::after {
  opacity: 1;
  transform: translateX(290%) skewX(-14deg);
}

@media (max-width: 640px) {
  .cp-hero--champion .cp-filters { --slant: -10deg; gap: 16px 12px; padding: 8px 6px 0; }
  .cp-hero--champion .cp-filter .j-select select { min-width: 0; width: 100%; height: 42px; font-size: 12px; }
  .cp-hero--champion .cp-hero__lb { width: calc(100% - 12px); margin: 0 6px; }
}

/* ---------- Option C6a: the champion patch panel as a spec sheet of change tracks ---------- */
/* Each source heads with its name in heavy Beaufort and the direction as a chamfered metal tag. Ability titles carry
   their key as a small keycap (the skill order's keycaps). Every changed stat is a recessed track with a cut corner
   and a slanted direction blade on its leading edge (green buff, rose nerf, as before); inside it the stat name, then
   the old value in quiet Beaufort, a slanted chevron and the new value in polished gold. */

.cp-patch__sources .cp-patchgroup__title {
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(var(--j-shadow-rgb), 0.9);
}

/* Direction tag: a raised plate with two cut corners, the icon in a small lit well. */
.cp-patch__sources .cp-dir {
  height: 26px;
  padding: 0 12px 0 4px;
  gap: 8px;
  border: 0;
  background:
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.14), rgba(var(--j-plat-rgb), 0) 50%),
    linear-gradient(180deg, rgba(var(--j-coal-500-rgb), 0.98), rgba(var(--j-coal-700-rgb), 0.98));
  box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.3), inset 0 -2px 0 rgba(var(--dir-rgb), 0.7);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.cp-patch__sources .cp-dir .j-i {
  width: 19px;
  height: 19px;
  padding: 3px;
  background: rgba(var(--dir-rgb), 0.18);
  box-shadow: inset 0 1px 3px rgba(var(--j-shadow-rgb), 0.8);
}

.cp-patch__sources .cp-patch__changes {
  gap: 16px 18px;
}

.cp-patch__sources .cp-patch__ability {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 9px;
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--j-gold-100);
}

.cp-patch__sources .cp-patch__key {
  flex: none;
  min-width: 26px;
  width: auto;
  height: 24px;
  padding: 0 7px;
  background: linear-gradient(180deg, rgba(var(--j-silver-rgb), 0.3), rgba(var(--j-silver-rgb), 0.06) 70%), linear-gradient(180deg, rgba(var(--j-coal-600-rgb), 1), rgba(var(--j-coal-800-rgb), 1));
  box-shadow: inset 0 0 0 1px rgba(var(--j-silver-rgb), 0.6), inset 0 1px 0 rgba(var(--j-plat-rgb), 0.3), 0 2px 0 rgba(var(--j-silver-rgb), 0.3), 0 4px 8px rgba(var(--j-shadow-rgb), 0.7);
  font-size: 13px;
  font-weight: 800;
  color: var(--j-silver-100);
}

.cp-patch__sources .cp-patch__change ul {
  gap: 6px;
}

/* The change track. */
.cp-patch__sources .cp-patch__line {
  --dir: var(--j-coal-500);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 8px 12px 9px 20px;
  font-size: 13px;
  background: linear-gradient(180deg, rgba(var(--j-ink-rgb), 0.7), rgba(var(--j-coal-800-rgb), 0.55));
  box-shadow: inset 0 2px 4px rgba(var(--j-shadow-rgb), 0.75), inset 0 0 0 1px rgba(var(--j-shadow-rgb), 0.5), 0 1px 0 rgba(var(--j-plat-rgb), 0.08);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}

.cp-patch__sources .cp-patch__line.is-buff { --dir: var(--j-up-color); }
.cp-patch__sources .cp-patch__line.is-nerf { --dir: var(--j-rose); }

/* Slanted direction blade on the leading edge, level with the first line. */
.cp-patch__sources .cp-patch__line::before {
  top: 9px;
  left: 9px;
  width: 4px;
  height: 16px;
  background: var(--dir);
  box-shadow: 0 0 8px var(--dir);
  transform: skewX(-14deg);
}

.cp-patch__sources .cp-patch__line b {
  flex: 1 0 100%;
  font-weight: 700;
  color: var(--j-text);
}

.cp-patch__sources .cp-patch__old {
  font-family: var(--j-display);
  font-size: 14px;
  color: var(--j-muted);
}

.cp-patch__sources .cp-patch__line .j-i {
  width: 14px;
  height: 14px;
  color: var(--dir);
  vertical-align: -0.2em;
}

.cp-patch__sources .cp-patch__new {
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(180deg, var(--j-gold-25) 0%, var(--j-gold-100) 45%, var(--j-gold-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(var(--j-shadow-rgb), 0.9));
}

@media (max-width: 640px) {
  .cp-patch__sources .cp-patch__line { padding: 8px 10px 9px 18px; }
}

/* ---------- Option C7b: best players as ladder blades ---------- */
/* Each player is a gunmetal bar whose right end is cut on the diagonal (the Hall of Fame cards' cut). The rank is a
   slanted blade tab on the bar's leading edge, struck with a heavy numeral: polished gold, pale gold and champagne for
   the top three (the gilt placement ladder), gunmetal below them. The rating reads large in gold metal; Journey is a
   raised keycap whose chevron slides on hover. On hover the bar slides right and a band of light crosses it. */

.cp-players {
  row-gap: 7px;
  column-gap: 22px;
}

.cp-player {
  --tab: linear-gradient(180deg, rgba(var(--j-coal-500-rgb), 1), rgba(var(--j-coal-700-rgb), 1));
  overflow: hidden;
  grid-template-columns: 58px minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 0 30px 0 0;
  min-height: 56px;
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.07), rgba(var(--j-plat-rgb), 0) 45%),
    linear-gradient(90deg, rgba(var(--j-coal-600-rgb), 0.9), rgba(var(--j-coal-800-rgb), 0.85));
  box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.2), inset 0 -1px 0 rgba(var(--j-shadow-rgb), 0.7);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  transition: transform var(--j-dur) var(--j-ease-out);
}

/* A band of light parked off the bar, swept across on hover (replaces the shared row edge). */
.cp-player.j-row::before {
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  height: auto;
  background: linear-gradient(90deg, rgba(var(--j-light-rgb), 0), rgba(var(--j-light-rgb), 0.1), rgba(var(--j-light-rgb), 0));
  opacity: 0;
  transform: translateX(-120%) skewX(-24deg);
  transition: transform var(--j-dur-slow) var(--j-ease-out), opacity var(--j-dur-slow) var(--j-ease-out);
}

.cp-player:hover {
  transform: translateX(4px);
  background:
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.1), rgba(var(--j-plat-rgb), 0) 45%),
    linear-gradient(90deg, rgba(var(--j-coal-600-rgb), 1), rgba(var(--j-coal-800-rgb), 0.9));
}

.cp-player.j-row:hover::before {
  opacity: 1;
  transform: translateX(380%) skewX(-24deg);
}

.cp-player.is-podium {
  background:
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.07), rgba(var(--j-plat-rgb), 0) 45%),
    linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.16), rgba(var(--j-gold-rgb), 0) 45%),
    linear-gradient(90deg, rgba(var(--j-coal-600-rgb), 0.9), rgba(var(--j-coal-800-rgb), 0.85));
}

.cp-player:has(.j-ord--1) { --tab: var(--j-fill-1); }
.cp-player:has(.j-ord--2) { --tab: var(--j-fill-2); }
.cp-player:has(.j-ord--3) { --tab: var(--j-fill-3); }

/* The rank tab: a slanted blade on the leading edge (drawn on the bar's ::after, under the numeral). */
.cp-player::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  width: 66px;
  background: var(--tab);
  box-shadow: inset -1px 0 0 rgba(var(--j-light-rgb), 0.35), inset -3px 0 0 rgba(var(--j-shadow-rgb), 0.35);
  transform: skewX(-16deg);
  pointer-events: none;
}

.cp-player__rank {
  position: relative;
  z-index: 1;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  padding-right: 6px;
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 22px;
  font-weight: 700;
  background: none;
  filter: none;
  -webkit-text-fill-color: currentColor;
}

.cp-player__rank:not(.j-ord--1):not(.j-ord--2):not(.j-ord--3) {
  color: var(--j-silver-100);
  text-shadow: 0 1px 0 rgba(var(--j-shadow-rgb), 0.9);
}

.cp-player__rank.j-ord--1,
.cp-player__rank.j-ord--2,
.cp-player__rank.j-ord--3 {
  color: var(--j-gold-ink);
  text-shadow: 0 1px 0 rgba(var(--j-light-rgb), 0.55);
}

.cp-player__rank.j-ord--1 {
  font-size: 26px;
}

.cp-player__who {
  padding: 8px 0;
}

.cp-player__name {
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(var(--j-shadow-rgb), 0.9);
}

.cp-player__name small {
  font-family: var(--j-sans);
  font-weight: 600;
  color: var(--j-muted);
}

.cp-player__meta {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.07em;
}

.cp-player__score b {
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(180deg, var(--j-gold-25) 0%, var(--j-gold-100) 40%, var(--j-gold-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(var(--j-shadow-rgb), 0.9));
}

.cp-player__score small {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--j-muted);
}

/* Journey keycap. */
.cp-player__go {
  height: 30px;
  margin-bottom: 3px;
  padding: 0 9px 0 12px;
  border: 0;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(var(--j-gold-rgb), 0.22), rgba(var(--j-gold-rgb), 0.04) 70%),
    linear-gradient(180deg, rgba(var(--j-coal-600-rgb), 1), rgba(var(--j-coal-800-rgb), 1));
  box-shadow: inset 0 0 0 1px rgba(var(--j-gold-rgb), 0.55), inset 0 2px 0 rgba(var(--j-plat-rgb), 0.22), 0 3px 0 rgba(var(--j-gold-rgb), 0.28), 0 5px 10px rgba(var(--j-shadow-rgb), 0.7);
  font-family: var(--j-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--j-gold-100);
  transition: transform var(--j-dur-fast) var(--j-ease-out), color var(--j-dur-fast) var(--j-ease-std);
}

.cp-player__go:hover {
  color: var(--j-gold-25);
  transform: translateY(-1px);
}

.cp-player__go:active {
  transform: translateY(2px);
}

@media (max-width: 640px) {
  .cp-player { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; padding-right: 24px; min-height: 52px; }
  .cp-player::after { width: 54px; }
  .cp-player__rank { font-size: 19px; }
  .cp-player__rank.j-ord--1 { font-size: 22px; }
  .cp-player__score b { font-size: 19px; }
}

/* ---------- Option C8b: the recommended build as a slotted rail under a quiet gold heading ---------- */
/* The title is a small gold heading led by a slanted gold tick, with a hairline fading out to the right. The picks
   follow as slots split by slanted seams (dark cut, lit edge); each label is led by a small slanted gold blade. Every
   pick shows its numbers under its icon (augments also their names) and all of them in a tooltip. Hover raises a
   slot's plate, brings up the solid gold corner triangles of the cards and lifts its icons (opacity and transform
   only). */

.cp-glance {
  grid-template-columns: minmax(0, 1fr);
}

.cp-glance__title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 2px;
  border-right: 0;
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  color: var(--j-gold-100);
}

.cp-glance__title::before {
  content: "";
  flex: none;
  width: 4px;
  height: 13px;
  background: linear-gradient(180deg, var(--j-gold-50), var(--j-gold-400));
  transform: skewX(-20deg);
}

.cp-glance__title::after {
  content: "";
  flex: 1;
  min-width: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.4), rgba(var(--j-gold-rgb), 0));
}

.cp-glance__cells {
  grid-template-columns: 1.6fr 1.45fr 1.35fr 0.72fr 1fr 1.35fr;
}

.cp-glance__cell,
.cp-glance__cell:nth-child(n) {
  --bk: var(--j-gold-300);
  --bk-size: 10px;
  position: relative;
  z-index: 0;
  gap: 8px;
  padding: 10px 16px 13px 20px;
  border: 0;
}

/* Slanted seam on each slot's leading edge. */
.cp-glance__cell + .cp-glance__cell::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 1px;
  background: rgba(var(--j-shadow-rgb), 0.95);
  box-shadow: 1px 0 0 rgba(var(--j-plat-rgb), 0.14);
  transform: skewX(-14deg);
}

/* The raised plate and the gold corner triangles, shown on hover. */
.cp-glance__cell::after {
  content: "";
  position: absolute;
  inset: 4px 2px;
  z-index: -1;
  background:
    linear-gradient(135deg, var(--bk) 50%, rgba(var(--j-gold-rgb), 0) 50%) 0 0 / var(--bk-size) var(--bk-size) no-repeat,
    linear-gradient(315deg, var(--bk) 50%, rgba(var(--j-gold-rgb), 0) 50%) 100% 100% / var(--bk-size) var(--bk-size) no-repeat,
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.12), rgba(var(--j-plat-rgb), 0.02) 60%),
    linear-gradient(180deg, rgba(var(--j-coal-600-rgb), 0.7), rgba(var(--j-coal-700-rgb), 0.5));
  box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.24), 0 6px 14px -6px rgba(var(--j-shadow-rgb), 0.9);
  opacity: 0;
  transition: opacity var(--j-dur-fast) var(--j-ease-std);
}

.cp-glance__cell:hover {
  background-color: transparent;
}

.cp-glance__cell:hover::after {
  opacity: 1;
}

.cp-glance__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--j-gold-200);
}

.cp-glance__label::before {
  content: "";
  flex: none;
  width: 3px;
  height: 11px;
  background: linear-gradient(180deg, var(--j-gold-100), var(--j-gold-400));
  transform: skewX(-20deg);
}

/* The picks: icon (with its tier plate on the corner), then the name or the numbers. */
.cp-glance__picks {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.cp-glance__pick {
  display: grid;
  flex: 1 1 0;
  justify-items: center;
  align-content: start;
  gap: 2px;
  min-width: 0;
  max-width: 96px;
  line-height: 1.25;
  text-align: center;
}

.cp-glance__icon {
  position: relative;
  margin-bottom: 4px;
  line-height: 0;
  transition: transform var(--j-dur) var(--j-ease-out);
}

.cp-glance__icon .cp-tier {
  position: absolute;
  right: -9px;
  bottom: -6px;
}

.cp-tier--xs {
  --tier-size: 17px;
  padding: 0 3px;
  background: linear-gradient(180deg, rgba(var(--tc-rgb), 0.3), rgba(var(--tc-rgb), 0.08)), rgb(var(--j-coal-900-rgb));
}

.cp-glance__picks > .cp-glance__arrow {
  flex: none;
  margin: 14px -4px 0;
}

.cp-glance__name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--j-text);
}

.cp-glance__num {
  font-size: 11px;
  white-space: nowrap;
  color: var(--j-text-2);
}

.cp-glance__num b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--j-gold-50);
}

.cp-glance__icons {
  transition: transform var(--j-dur) var(--j-ease-out);
}

.cp-glance__cell:hover .cp-glance__icons,
.cp-glance__cell:hover .cp-glance__icon {
  transform: translateY(-3px);
}

.cp-glance__text {
  font-size: 12px;
  font-weight: 600;
  color: var(--j-text-2);
}

@media (max-width: 1280px) {
  .cp-glance__title { padding: 12px 16px 2px; font-size: 12.5px; }
  .cp-glance__cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-glance__cell:nth-child(3n + 1)::before { display: none; }
  .cp-glance__cell:nth-child(n + 4) { border-top: 1px solid var(--j-line-soft); }
}

/* Phones: the cells with three picks take a full row; boots and skill order share one. */
@media (max-width: 640px) {
  .cp-glance__title { padding: 11px 14px 2px; font-size: 12px; }
  .cp-glance__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-glance__cell:nth-child(n) { grid-column: 1 / -1; padding: 10px 12px 12px 14px; border-top: 1px solid var(--j-line-soft); }
  .cp-glance__cell:first-child { border-top: 0; }
  .cp-glance__cell--boots:nth-child(n),
  .cp-glance__cell--skill:nth-child(n) { grid-column: auto; }
  .cp-glance__cell:nth-child(n)::before { display: none; }
  .cp-glance__cell--skill:nth-child(n)::before { display: block; }
  .cp-glance__picks { gap: 8px; }
  .cp-glance__pick { max-width: 104px; }
  .cp-glance__icons img { width: 40px; height: 40px; }
}

/* ---------- Entity hero (A1a): forged rarity blade and recessed context rail ---------- */

/* The rarity is a slanted blade of its own metal with the label stamped into it (dark ink, a light lip under each
   letter), a bevel along the top and a sheen that crosses it every few seconds. An item's price is a gunmetal blade
   locked onto its end. */
.cp-hero--entity .cp-hero__kicker {
  --kick-metal: var(--j-metal-gold);
  --kick-glow-rgb: var(--j-gold-rgb);
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 0 12px;
  letter-spacing: 0;
  filter: drop-shadow(0 3px 4px rgba(var(--j-shadow-rgb), 0.85)) drop-shadow(0 0 12px rgba(var(--kick-glow-rgb), 0.28));
}

.cp-hero--entity .cp-hero__kicker--silver {
  --kick-metal: var(--j-metal-silver);
  --kick-glow-rgb: var(--j-silver-rgb);
}

.cp-hero--entity .cp-hero__kicker--prismatic {
  --kick-metal:
    linear-gradient(180deg, rgba(var(--j-white-rgb), 0.55) 0%, rgba(var(--j-white-rgb), 0.12) 46%, rgba(var(--j-ink-rgb), 0.08) 54%, rgba(var(--j-ink-rgb), 0.22) 100%),
    var(--j-fill-prismatic);
  --kick-glow-rgb: var(--j-prism-rgb);
}

.cp-hero--entity .cp-hero__kicker > span:first-child {
  position: relative;
  overflow: hidden;
  padding: 6px 22px 5px 18px;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(var(--j-white-rgb), 0.7), rgba(var(--j-white-rgb), 0) 2px) 0 0 / 100% 100% no-repeat,
    linear-gradient(0deg, rgba(var(--j-ink-rgb), 0.55), rgba(var(--j-ink-rgb), 0) 2px) 0 0 / 100% 100% no-repeat,
    var(--kick-metal);
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  line-height: 1.1;
  color: rgba(var(--j-ink-rgb), 0.92);
  text-shadow: 0 1px 0 rgba(var(--j-white-rgb), 0.45);
}

/* The sheen: a bright slanted band that crosses the blade once every 7s (transform only). */
.cp-hero--entity .cp-hero__kicker > span:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, rgba(var(--j-white-rgb), 0) 0%, rgba(var(--j-white-rgb), 0.75) 50%, rgba(var(--j-white-rgb), 0) 100%);
  transform: translateX(-120%) skewX(-20deg);
  animation: cp-kick-sheen 7s var(--j-ease-std) 1.2s infinite;
  pointer-events: none;
}

@keyframes cp-kick-sheen {
  0% { transform: translateX(-120%) skewX(-20deg); }
  16%, 100% { transform: translateX(320%) skewX(-20deg); }
}

.cp-hero--entity .cp-hero__kicker .j-diamond {
  display: none;
}

.cp-hero--entity .cp-hero__kicker .cp-role {
  margin-left: -7px;
  padding: 6px 18px 5px 20px;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.28), rgba(var(--j-plat-rgb), 0) 2px) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, var(--j-coal-500), var(--j-coal-700) 55%, var(--j-coal-800));
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  line-height: 1.1;
  color: var(--j-gold-150);
  text-shadow: 0 1px 0 rgba(var(--j-ink-rgb), 0.9);
}

/* Season, region, rank and patch sunk into one recessed rail with chamfered ends, slanted gold cuts between them;
   the patch link is a small raised key at the end. */
.cp-hero--entity .cp-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 16px 0 0;
  padding: 0 4px 0 6px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
  background:
    linear-gradient(180deg, rgba(var(--j-shadow-rgb), 0.9), rgba(var(--j-shadow-rgb), 0) 6px) 0 0 / 100% 100% no-repeat,
    linear-gradient(0deg, rgba(var(--j-plat-rgb), 0.16), rgba(var(--j-plat-rgb), 0) 1px) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(var(--j-ink-rgb), 0.92), rgba(var(--j-coal-800-rgb), 0.86));
  box-shadow: inset 0 0 0 1px rgba(var(--j-plat-rgb), 0.07);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--j-text-2);
  text-shadow: 0 1px 0 rgba(var(--j-ink-rgb), 1);
}

.cp-hero--entity .cp-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 8px 14px;
}

.cp-hero--entity .cp-meta__item {
  position: relative;
}

/* The cut between two values: a slanted gold hairline with a dark groove beside it. */
.cp-hero--entity .cp-meta__item::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: linear-gradient(180deg, rgba(var(--j-gold-rgb), 0.15), var(--j-gold-300) 50%, rgba(var(--j-gold-rgb), 0.15));
  box-shadow: 1px 0 0 rgba(var(--j-shadow-rgb), 0.9);
  transform: skewX(-24deg);
}

.cp-hero--entity .cp-meta .j-diamond {
  display: none;
}

.cp-hero--entity .cp-meta__season {
  color: var(--j-gold-150);
}

.cp-hero--entity .cp-meta__item:has(.cp-meta__patch) {
  padding: 4px 4px 4px 14px;
}

.cp-hero--entity .cp-meta__patch {
  display: inline-block;
  padding: 4px 10px 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--j-coal-500), var(--j-coal-700));
  box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.3), inset 0 0 0 1px rgba(var(--j-gold-rgb), 0.35), 0 2px 0 var(--j-coal-900);
  color: var(--j-gold-100);
  transition: transform var(--j-dur-fast) var(--j-ease-std);
}

.cp-hero--entity .cp-meta__patch:hover {
  color: var(--j-gold-25);
  transform: translateY(-1px);
}

/* The entity hero's rail keeps this look over the shared meta segments (T4a, earlier in this file). */
.cp-hero--entity .cp-meta > span {
  height: auto;
  background: none;
  box-shadow: none;
  clip-path: none;
}

.cp-hero--entity :is(.cp-meta__season, .cp-meta__rank) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.cp-hero--entity .cp-meta__patch {
  height: auto;
  clip-path: none;
}

.cp-hero--entity .cp-meta__patch::after {
  content: none;
}

@media (max-width: 640px) {
  .cp-hero--entity .cp-hero__kicker > span:first-child,
  .cp-hero--entity .cp-hero__kicker .cp-role { padding: 5px 16px 4px 14px; font-size: 11px; letter-spacing: 0.12em; }
  .cp-hero--entity .cp-hero__kicker .cp-role { display: inline-block; }
  /* Two values a row on phones; no cut at the start of a row. */
  .cp-hero--entity .cp-meta { display: inline-grid; grid-template-columns: auto auto; padding: 0 2px; font-size: 10px; letter-spacing: 0.07em; }
  .cp-hero--entity .cp-meta > span { padding: 7px 9px; }
  .cp-hero--entity .cp-meta__item:nth-child(3)::before { display: none; }
  .cp-hero--entity .cp-meta__item:nth-child(n + 3) { box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.06); }
  .cp-hero--entity .cp-meta__item:has(.cp-meta__patch) { padding: 3px 4px 3px 9px; }
}

/* ---------- Entity hero (A2b): the stat band as a row of slanted keycap blades ---------- */

/* Each stat is a raised blade slanted like the Wrap controls: a lit gunmetal face, a bevel along its top, a dark skirt
   under it and a soft drop. The tier blade is cast in the tier's metal, the key stat's blade carries a gold face and
   rim. Hovering a blade lifts it and runs a sheen across it. */
.cp-hero--entity .cp-band {
  --blade-skew: -14deg;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 26px 0 0;
  padding: 0 10px 6px;
  background: none;
}

.cp-page-augment .cp-hero--entity .cp-band {
  max-width: 860px;
}

.cp-hero--entity .cp-band__stat {
  --blade-face: linear-gradient(180deg, var(--j-coal-500), var(--j-coal-600) 45%, var(--j-coal-700));
  --blade-rim: rgba(var(--j-plat-rgb), 0.16);
  --blade-glow: rgba(var(--j-gold-rgb), 0);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 11px 16px 13px 22px;
  border-left: 0;
  transition: transform var(--j-dur) var(--j-ease-out);
}

.cp-hero--entity .cp-band__stat:first-child {
  padding-left: 22px;
}

/* The blade: a skewed face with its bevel, rim and skirt; the sheen rides on ::after inside the same shape. */
.cp-hero--entity .cp-band__stat::before,
.cp-hero--entity .cp-band__stat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: skewX(var(--blade-skew));
}

.cp-hero--entity .cp-band__stat::before {
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.4), rgba(var(--j-plat-rgb), 0) 1.5px) 0 0 / 100% 100% no-repeat,
    linear-gradient(90deg, rgba(var(--j-plat-rgb), 0.14), rgba(var(--j-plat-rgb), 0) 18px),
    linear-gradient(112deg, rgba(var(--j-plat-rgb), 0) 30%, rgba(var(--j-plat-rgb), 0.07) 42%, rgba(var(--j-plat-rgb), 0) 52%),
    var(--j-gm-brush),
    var(--blade-face);
  box-shadow: inset 0 0 0 1px var(--blade-rim), 0 4px 0 var(--j-coal-900), 0 5px 0 rgba(var(--j-plat-rgb), 0.06), 0 10px 16px rgba(var(--j-shadow-rgb), 0.75), 0 0 22px var(--blade-glow);
}

.cp-hero--entity .cp-band__stat::after {
  overflow: hidden;
  background: linear-gradient(100deg, rgba(var(--j-white-rgb), 0) 35%, rgba(var(--j-white-rgb), 0.16) 50%, rgba(var(--j-white-rgb), 0) 65%) 0 0 / 300% 100% no-repeat;
  background-position: 100% 0;
  opacity: 0;
  transition: opacity var(--j-dur) var(--j-ease-std), background-position 0.7s var(--j-ease-out);
}

.cp-hero--entity .cp-band__stat:hover {
  transform: translateY(-3px);
}

.cp-hero--entity .cp-band__stat:hover::after {
  opacity: 1;
  background-position: 0 0;
}

.cp-hero--entity .cp-band__stat dt {
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--j-muted);
  text-shadow: 0 -1px 0 rgba(var(--j-shadow-rgb), 1), 0 1px 0 rgba(var(--j-plat-rgb), 0.14);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-hero--entity .cp-band__stat dd {
  font-size: 28px;
  letter-spacing: 0.01em;
  color: var(--j-gold-50);
  text-shadow: 0 2px 0 rgba(var(--j-shadow-rgb), 0.9), 0 0 16px rgba(var(--j-plat-rgb), 0.12);
}

/* The key stat: a gold-washed face with a gold rim and a warm glow; its number in bright gold. */
.cp-hero--entity .cp-band__stat--key {
  --blade-face:
    radial-gradient(90% 140% at 30% 0, rgba(var(--j-gold-rgb), 0.32), rgba(var(--j-gold-rgb), 0) 70%),
    linear-gradient(180deg, var(--j-coal-500), var(--j-coal-600) 45%, var(--j-coal-700));
  --blade-rim: rgba(var(--j-gold-rgb), 0.75);
  --blade-glow: rgba(var(--j-gold-rgb), 0.22);
}

.cp-hero--entity .cp-band__stat--key dt {
  color: var(--j-gold-150);
}

.cp-hero--entity .cp-band__stat--key dd {
  color: var(--j-gold-200);
  text-shadow: 0 2px 0 rgba(var(--j-shadow-rgb), 0.9), 0 0 18px rgba(var(--j-gold-rgb), 0.5);
}

/* The tier blade: cast in the tier's metal (prismatic, gold, silver, bronze, steel or rust), its letter large. */
.cp-hero--entity .cp-band__stat--tier {
  --blade-face: linear-gradient(180deg, var(--j-gold-150), var(--j-gold-300) 45%, var(--j-gold-500) 52%, var(--j-gold-400) 80%, var(--j-gold-600));
  --blade-rim: rgba(var(--j-white-rgb), 0.35);
  --blade-glow: rgba(var(--j-gold-rgb), 0.3);
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.cp-hero--entity .cp-band__stat--tier:has(.cp-tier--splus) {
  --blade-face: linear-gradient(180deg, rgba(var(--j-white-rgb), 0.4), rgba(var(--j-white-rgb), 0.05) 48%, rgba(var(--j-ink-rgb), 0.15) 52%, rgba(var(--j-ink-rgb), 0.3)), var(--j-fill-prismatic);
  --blade-glow: rgba(var(--j-prism-rgb), 0.4);
}

.cp-hero--entity .cp-band__stat--tier:has(.cp-tier--a) {
  --blade-face: var(--j-metal-silver);
  --blade-glow: rgba(var(--j-silver-rgb), 0.25);
}

.cp-hero--entity .cp-band__stat--tier:has(.cp-tier--b) {
  --blade-face: linear-gradient(180deg, var(--j-bronze-hi), var(--j-bronze-light) 40%, var(--j-bronze) 55%, var(--j-bronze-deep));
  --blade-glow: rgba(var(--j-bronze-rgb), 0.3);
}

.cp-hero--entity .cp-band__stat--tier:has(.cp-tier--c) {
  --blade-face: linear-gradient(180deg, #c9ccd2, #8d9097 45%, #63666c 55%, #45474c);
  --blade-glow: rgba(var(--j-stone-rgb), 0.25);
}

.cp-hero--entity .cp-band__stat--tier:has(.cp-tier--d) {
  --blade-face: linear-gradient(180deg, var(--j-rust-hi), var(--j-rust-light) 40%, var(--j-rust) 55%, var(--j-rust-deep));
  --blade-glow: rgba(var(--j-rust-rgb), 0.3);
}

/* On metal the label and the letter are stamped: dark ink with a light lip. */
.cp-hero--entity .cp-band__stat--tier dt {
  color: rgba(var(--j-ink-rgb), 0.85);
  text-shadow: 0 1px 0 rgba(var(--j-white-rgb), 0.4);
}

.cp-hero--entity .cp-band__stat--tier dd .cp-tier {
  --tier-size: 40px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 36px;
  color: rgba(var(--j-ink-rgb), 0.88);
  text-shadow: 0 1px 0 rgba(var(--j-white-rgb), 0.45), 0 -1px 0 rgba(var(--j-ink-rgb), 0.3);
}

.cp-hero--entity .cp-band__stat .cp-delta {
  font-size: inherit;
}

@media (max-width: 1000px) {
  .cp-hero--entity .cp-band { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 16px; }
}

@media (max-width: 640px) {
  .cp-hero--entity .cp-band { --blade-skew: -10deg; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; padding: 0 6px 6px; }
  .cp-hero--entity .cp-band__stat,
  .cp-hero--entity .cp-band__stat:first-child { padding: 9px 12px 11px 16px; }
  .cp-hero--entity .cp-band__stat dd { font-size: 22px; }
  .cp-hero--entity .cp-band__stat--tier dd .cp-tier { --tier-size: 32px; font-size: 28px; }
}

/* ---------- Entity hero (A3b): the icon as a raised faceted octagon with shockwaves, the tier on a blade tab ---------- */

/* A thick octagon rim cut into eight facets (each lit differently, light from the upper left), standing proud of
   the page on a side wall of darker metal (the skill keycaps' depth), a bright inner bevel round the icon and a
   glass reflection over it. Octagonal shockwaves in the rarity's colour leave the rim in turn and fade through the
   crest's walls (the Wrap reveal's flash). The tier hangs underneath on a slanted metal tab. */
.cp-hero--entity .cp-hero__portrait {
  --oct: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
  /* An octagonal outline 3px wide: the outer octagon, then the inner one (even-odd leaves the band between). */
  --oct-line: polygon(evenodd, 12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%, 12% 0,
    calc(12% + 1.24px) 3px, 3px calc(12% + 1.24px), 3px calc(88% - 1.24px), calc(12% + 1.24px) calc(100% - 3px),
    calc(88% - 1.24px) calc(100% - 3px), calc(100% - 3px) calc(88% - 1.24px), calc(100% - 3px) calc(12% + 1.24px),
    calc(88% - 1.24px) 3px, calc(12% + 1.24px) 3px);
  --gem: 120px;
  --gem-rim: 9px;
  --gem-art: calc(var(--gem) - var(--gem-rim) * 2);
  --gem-rgb: var(--j-gold-rgb);
  --gem-hi: var(--j-gold-50);
  --gem-metal: linear-gradient(180deg, var(--j-gold-150), var(--j-gold-300) 45%, var(--j-gold-500));
  --gem-side: var(--j-gold-700);
  --crest-light-rgb: var(--gem-rgb);
  isolation: isolate;
}

.cp-hero--entity .cp-hero__portrait--silver {
  --gem-rgb: var(--j-silver-rgb);
  --gem-hi: var(--j-silver-50);
  --gem-metal: linear-gradient(180deg, var(--j-silver-100), var(--j-silver-300) 45%, var(--j-silver-600));
  --gem-side: var(--j-silver-800);
}

.cp-hero--entity .cp-hero__portrait--prismatic {
  --gem-rgb: var(--j-prism-rgb);
  --gem-hi: var(--j-prism-pink-light);
  --gem-metal: conic-gradient(from 200deg, var(--j-prism-pink), var(--j-prism-violet), var(--j-prism-blue), var(--j-prism-mint), var(--j-prism-violet-light), var(--j-prism-pink));
  --gem-side: var(--j-prism-violet-deep);
}

.cp-hero--entity .cp-hero__frame {
  display: grid;
  place-items: center;
  width: var(--gem);
  height: var(--gem);
  position: relative;
  z-index: 2;
  margin-top: -6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
  /* A thin side wall (a 2px drop of darker metal: thicker read as a heavy bottom edge, owner 2 Nov 2026), the cast
     shadow and the rarity's glow. */
  filter: drop-shadow(0 2px 0 var(--gem-side)) drop-shadow(0 1px 0 rgba(var(--j-shadow-rgb), 0.9)) drop-shadow(0 10px 12px rgba(var(--j-shadow-rgb), 0.85)) drop-shadow(0 0 18px rgba(var(--gem-rgb), 0.45));
}

.cp-hero--entity .cp-hero__frame::before,
.cp-hero--entity .cp-hero__frame::after {
  content: "";
  position: absolute;
  clip-path: var(--oct);
}

/* Eight facets: one conic band per side (light upper left, dark lower right) laid over the metal. */
.cp-hero--entity .cp-hero__frame::before {
  inset: 0;
  background:
    conic-gradient(from -22.5deg, rgba(var(--j-white-rgb), 0.42) 0 45deg, rgba(var(--j-white-rgb), 0.12) 45deg 90deg, rgba(var(--j-ink-rgb), 0.12) 90deg 135deg, rgba(var(--j-ink-rgb), 0.4) 135deg 180deg, rgba(var(--j-ink-rgb), 0.52) 180deg 225deg, rgba(var(--j-ink-rgb), 0.25) 225deg 270deg, rgba(var(--j-white-rgb), 0.2) 270deg 315deg, rgba(var(--j-white-rgb), 0.55) 315deg 360deg),
    var(--gem-metal);
}

/* The inner bevel: a bright hairline of the metal's highlight round the icon, a dark cut inside it. */
.cp-hero--entity .cp-hero__frame::after {
  inset: calc(var(--gem-rim) - 2px);
  background: linear-gradient(135deg, var(--gem-hi), rgba(var(--gem-rgb), 0.6) 50%, var(--j-coal-900));
}

.cp-hero--entity .cp-hero__frame > img {
  position: relative;
  z-index: 1;
  width: var(--gem-art);
  height: var(--gem-art);
  border-radius: 0;
  clip-path: var(--oct);
}

/* Glass: a curved reflection across the top of the icon and a vignette into the bevel. */
.cp-hero--entity .cp-hero__portrait::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: var(--gem-art);
  height: var(--gem-art);
  margin: calc(var(--gem-art) / -2 - 6px) 0 0 calc(var(--gem-art) / -2);
  clip-path: var(--oct);
  background:
    radial-gradient(140% 70% at 30% -18%, rgba(var(--j-white-rgb), 0.26), rgba(var(--j-white-rgb), 0.08) 60%, rgba(var(--j-white-rgb), 0) 61%),
    radial-gradient(closest-side, rgba(var(--j-ink-rgb), 0) 70%, rgba(var(--j-ink-rgb), 0.55) 100%);
  pointer-events: none;
}

/* Shockwaves: an octagonal line leaves the rim, grows through the crest's walls and fades; a second follows. */
.cp-hero--entity .cp-hero__portrait::before,
.cp-hero--entity .cp-hero__portrait .j-crest__light {
  content: "";
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: var(--gem);
  height: var(--gem);
  margin: calc(var(--gem) / -2 - 6px) 0 0 calc(var(--gem) / -2);
  clip-path: var(--oct-line);
  background: linear-gradient(135deg, var(--gem-hi), rgba(var(--gem-rgb), 1));
  opacity: 0;
  animation: cp-gem-shock 4.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s infinite;
  pointer-events: none;
}

.cp-hero--entity .cp-hero__portrait .j-crest__light {
  animation-delay: 2.7s;
}

@keyframes cp-gem-shock {
  0% { opacity: 0; transform: scale(1); }
  8% { opacity: 0.9; }
  60%, 100% { opacity: 0; transform: scale(1.75); }
}

/* The tier: a slanted tab of the tier's metal hung under the octagon, its letter stamped in. */
.cp-hero--entity .cp-hero__portrait > .cp-tier {
  --tab-metal: linear-gradient(180deg, var(--j-gold-50), var(--j-gold-200) 35%, var(--j-gold-500) 52%, var(--j-gold-300) 80%, var(--j-gold-600));
  position: absolute;
  left: 50%;
  bottom: -18px;
  z-index: 4;
  min-width: 58px;
  height: 30px;
  padding: 0 14px;
  border: 0;
  background: none;
  box-shadow: none;
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 19px;
  color: rgba(var(--j-ink-rgb), 0.9);
  text-shadow: 0 1px 0 rgba(var(--j-white-rgb), 0.5);
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 0 rgba(var(--j-shadow-rgb), 0.9)) drop-shadow(0 5px 8px rgba(var(--j-shadow-rgb), 0.8)) drop-shadow(0 0 10px rgba(var(--tc-rgb), 0.45));
}

.cp-hero--entity .cp-hero__portrait > .cp-tier::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(var(--j-white-rgb), 0.7), rgba(var(--j-white-rgb), 0) 2px) 0 0 / 100% 100% no-repeat,
    var(--tab-metal);
}

.cp-hero--entity .cp-hero__portrait > .cp-tier--splus { --tab-metal: linear-gradient(180deg, rgba(var(--j-white-rgb), 0.55), rgba(var(--j-white-rgb), 0.1) 48%, rgba(var(--j-ink-rgb), 0.1) 52%, rgba(var(--j-ink-rgb), 0.28)), var(--j-fill-prismatic); }
.cp-hero--entity .cp-hero__portrait > .cp-tier--a { --tab-metal: var(--j-metal-silver); }
.cp-hero--entity .cp-hero__portrait > .cp-tier--b { --tab-metal: linear-gradient(180deg, var(--j-bronze-hi), var(--j-bronze-light) 35%, var(--j-bronze) 52%, var(--j-bronze-light) 80%, var(--j-bronze-deep)); }
.cp-hero--entity .cp-hero__portrait > .cp-tier--c { --tab-metal: linear-gradient(180deg, #eceef1, #b4b7bd 35%, #75787e 52%, #a3a6ac 80%, #505257); }
.cp-hero--entity .cp-hero__portrait > .cp-tier--d { --tab-metal: linear-gradient(180deg, var(--j-rust-hi), var(--j-rust-light) 35%, var(--j-rust) 52%, var(--j-rust-light) 80%, var(--j-rust-deep)); }

@media (max-width: 640px) {
  .cp-hero--entity .cp-hero__portrait { --gem: 84px; --gem-rim: 7px; }
  .cp-hero--entity .cp-hero__portrait > .cp-tier { bottom: -16px; min-width: 46px; height: 24px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-hero--entity .cp-hero__portrait::before,
  .cp-hero--entity .cp-hero__portrait .j-crest__light { animation: none; }
}

/* ---------- Entity hero (A4a): the game text as a chamfered gunmetal tooltip with a rarity-metal crown ---------- */

/* The box is a gunmetal panel (the theme's material) cut at 45 degrees top left and bottom right with gold along
   each cut, crowned by a bar of the rarity's metal that runs from the top-left cut and ends in its own chamfer.
   Inside, an item's stat lines sit in a recessed well with gold numerals, and each passive or active name is set in
   Beaufort's bold cut after a small octagon pip. It starts below the tier plate that hangs from the portrait. */
.cp-hero--entity {
  --gt-rgb: var(--j-gold-rgb);
  --gt-metal: linear-gradient(180deg, var(--j-gold-100), var(--j-gold-300) 45%, var(--j-gold-500) 55%, var(--j-gold-400));
}

.cp-hero--entity:has(.cp-hero__portrait--silver) {
  --gt-rgb: var(--j-silver-rgb);
  --gt-metal: var(--j-metal-silver);
}

.cp-hero--entity:has(.cp-hero__portrait--prismatic) {
  --gt-rgb: var(--j-prism-rgb);
  --gt-metal: linear-gradient(180deg, rgba(var(--j-white-rgb), 0.5), rgba(var(--j-white-rgb), 0) 55%), var(--j-fill-prismatic);
}

.cp-hero--entity .cp-gametext {
  --cut: 16px;
  position: relative;
  isolation: isolate;
  margin: 34px 0 0;
  padding: 20px 26px 18px 24px;
  border: 0;
  background: none;
  font-size: 14px;
  line-height: 1.65;
  color: var(--j-text-2);
  filter: drop-shadow(0 14px 18px rgba(var(--j-shadow-rgb), 0.7));
}

.cp-hero--entity .cp-gametext::before,
.cp-hero--entity .cp-gametext::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* The slab: panel material, a rarity glow pooled under the crown, the bevel light, clipped to the chamfers. */
.cp-hero--entity .cp-gametext::before {
  inset: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background:
    linear-gradient(135deg, rgba(var(--j-gold-rgb), 0) calc(50% - 1px), var(--j-gold-300) calc(50% - 1px), var(--j-gold-300) calc(50% + 1px), rgba(var(--j-gold-rgb), 0) calc(50% + 1px)) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(315deg, rgba(var(--j-gold-rgb), 0) calc(50% - 1px), var(--j-gold-300) calc(50% - 1px), var(--j-gold-300) calc(50% + 1px), rgba(var(--j-gold-rgb), 0) calc(50% + 1px)) 100% 100% / var(--cut) var(--cut) no-repeat,
    radial-gradient(60% 90px at 30% 0, rgba(var(--gt-rgb), 0.16), rgba(var(--gt-rgb), 0) 100%),
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0) 0, rgba(var(--j-plat-rgb), 0) calc(100% - 1px), rgba(var(--j-plat-rgb), 0.14) calc(100% - 1px)),
    var(--j-panel);
  box-shadow: inset 0 0 0 1px rgba(var(--j-plat-rgb), 0.1);
}

/* The crown: a 3px bar of the rarity's metal along the top, from the cut to a chamfered end. */
.cp-hero--entity .cp-gametext::after {
  left: calc(var(--cut) - 1px);
  top: 0;
  width: min(62%, 420px);
  height: 4px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(var(--j-white-rgb), 0.6), rgba(var(--j-white-rgb), 0) 2px),
    var(--gt-metal);
  filter: drop-shadow(0 0 6px rgba(var(--gt-rgb), 0.8));
}

/* An item's stat lines: a recessed well, gold Beaufort numerals. */
.cp-hero--entity .cp-gametext .gt-stats {
  display: inline-block;
  margin: 0 0 4px;
  padding: 6px 16px 6px 12px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(var(--j-shadow-rgb), 0.85), rgba(var(--j-ink-rgb), 0.55) 8px, rgba(var(--j-ink-rgb), 0.55));
  box-shadow: inset 0 0 0 1px rgba(var(--j-shadow-rgb), 0.8), 0 1px 0 rgba(var(--j-plat-rgb), 0.14);
  color: var(--j-text);
}

.cp-hero--entity .cp-gametext .gt-stats .gt-attention {
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 16px;
  color: var(--j-gold-150);
}

/* Passive and active names: Beaufort bold after a small octagon pip of the rarity's metal. */
.cp-hero--entity .cp-gametext :is(.gt-passive, .gt-active) {
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--j-gold-100);
}

.cp-hero--entity .cp-gametext :is(.gt-passive, .gt-active)::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 9px 0 1px;
  vertical-align: 0.02em;
  clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
  background: radial-gradient(circle at 35% 30%, rgba(var(--j-white-rgb), 0.9), rgba(var(--j-white-rgb), 0) 45%), var(--gt-metal);
}

.cp-hero--entity .cp-gametext .gt-rules {
  color: var(--j-muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .cp-hero--entity .cp-gametext { --cut: 12px; margin-top: 28px; padding: 16px 16px 14px; font-size: 13.5px; }
}

/* ---------- Entity pages (A5a): popular champions as ranked gunmetal slats with segmented blade meters ---------- */

/* Every champion is its own raised slat (lit top edge, dark skirt, the ends chamfered) with its place on a keycap
   (gold, silver and bronze for the first three, as in the skill order), its portrait cut to the octagon and its pick
   rate as a meter of slanted gold segments in a recessed track. The header is a recessed strip of engraved labels.
   Hovering a slat lights its face and runs a gold edge along its top. */
:is(.cp-page-augment, .cp-page-item) #popular .cp-scroll {
  padding: 0 6px 0 2px;
  border: 0;
  background: none;
}

:is(.cp-page-augment, .cp-page-item) #popular .cp-table {
  border-spacing: 0 6px;
  margin-top: -6px;
  counter-reset: cp-rank;
}

:is(.cp-page-augment, .cp-page-item) #popular thead th {
  padding: 11px 12px 9px;
  border: 0;
  background:
    linear-gradient(180deg, rgba(var(--j-shadow-rgb), 0.9), rgba(var(--j-shadow-rgb), 0) 6px),
    linear-gradient(0deg, rgba(var(--j-plat-rgb), 0.14), rgba(var(--j-plat-rgb), 0) 1px),
    var(--j-coal-900);
  font-family: "JourneyDisplayBold", var(--j-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--j-muted);
  text-shadow: 0 1px 0 rgba(var(--j-shadow-rgb), 1);
}

:is(.cp-page-augment, .cp-page-item) #popular thead th:first-child {
  padding-left: 50px;
}

:is(.cp-page-augment, .cp-page-item) #popular thead [aria-sort] {
  color: var(--j-gold-150);
}

:is(.cp-page-augment, .cp-page-item) #popular tbody tr {
  counter-increment: cp-rank;
}

:is(.cp-page-augment, .cp-page-item) #popular tbody tr:hover {
  background: none;
}

:is(.cp-page-augment, .cp-page-item) #popular tbody tr > * {
  padding: 7px 12px;
  border: 0;
  background:
    linear-gradient(112deg, rgba(var(--j-plat-rgb), 0) 30%, rgba(var(--j-plat-rgb), 0.035) 45%, rgba(var(--j-plat-rgb), 0) 60%),
    var(--j-gm-brush),
    linear-gradient(180deg, var(--j-coal-600), var(--j-coal-700) 50%, var(--j-coal-800));
  box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.2), inset 0 -3px 0 var(--j-coal-900);
  transition: box-shadow var(--j-dur) var(--j-ease-std);
}

:is(.cp-page-augment, .cp-page-item) #popular tbody tr > :first-child {
  padding-left: 8px;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px);
  background:
    linear-gradient(90deg, rgba(var(--j-plat-rgb), 0.12), rgba(var(--j-plat-rgb), 0) 24px),
    var(--j-gm-brush),
    linear-gradient(180deg, var(--j-coal-600), var(--j-coal-700) 50%, var(--j-coal-800));
}

:is(.cp-page-augment, .cp-page-item) #popular tbody tr > :last-child {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}

:is(.cp-page-augment, .cp-page-item) #popular tbody tr:hover > * {
  box-shadow: inset 0 2px 0 var(--j-gold-300), inset 0 -3px 0 var(--j-coal-900), inset 0 30px 30px -20px rgba(var(--j-gold-rgb), 0.12);
}

/* The place keycap. */
:is(.cp-page-augment, .cp-page-item) #popular tbody th::before {
  --kc: var(--j-text-2);
  --kc-rgb: var(--j-plat-rgb);
  content: counter(cp-rank);
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 26px;
  margin: 0 10px 2px 0;
  vertical-align: middle;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(var(--kc-rgb), 0.22), rgba(var(--kc-rgb), 0.04) 70%),
    linear-gradient(180deg, var(--j-coal-500), var(--j-coal-700));
  box-shadow: inset 0 0 0 1px rgba(var(--kc-rgb), 0.4), inset 0 1px 0 rgba(var(--j-plat-rgb), 0.3), 0 2px 0 var(--j-coal-900), 0 3px 4px rgba(var(--j-shadow-rgb), 0.6);
  font-family: var(--j-sans);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--kc);
  font-variant-numeric: tabular-nums;
}

:is(.cp-page-augment, .cp-page-item) #popular tbody tr:nth-child(1) th::before { --kc: var(--j-gold-200); --kc-rgb: var(--j-gold-rgb); box-shadow: inset 0 0 0 1px rgba(var(--kc-rgb), 0.8), inset 0 1px 0 rgba(var(--j-plat-rgb), 0.3), 0 2px 0 rgba(var(--kc-rgb), 0.4), 0 3px 6px rgba(var(--j-shadow-rgb), 0.6), 0 0 12px rgba(var(--kc-rgb), 0.3); }
:is(.cp-page-augment, .cp-page-item) #popular tbody tr:nth-child(2) th::before { --kc: var(--j-silver-100); --kc-rgb: var(--j-silver-rgb); box-shadow: inset 0 0 0 1px rgba(var(--kc-rgb), 0.75), inset 0 1px 0 rgba(var(--j-plat-rgb), 0.3), 0 2px 0 rgba(var(--kc-rgb), 0.35), 0 3px 6px rgba(var(--j-shadow-rgb), 0.6); }
:is(.cp-page-augment, .cp-page-item) #popular tbody tr:nth-child(3) th::before { --kc: var(--j-bronze-light); --kc-rgb: var(--j-bronze-rgb); box-shadow: inset 0 0 0 1px rgba(var(--kc-rgb), 0.75), inset 0 1px 0 rgba(var(--j-plat-rgb), 0.3), 0 2px 0 rgba(var(--kc-rgb), 0.35), 0 3px 6px rgba(var(--j-shadow-rgb), 0.6); }

:is(.cp-page-augment, .cp-page-item) #popular .cp-namecell {
  vertical-align: middle;
  font-size: 14px;
}

:is(.cp-page-augment, .cp-page-item) #popular .cp-namecell .j-icon {
  --size: 32px !important;
  width: 32px;
  height: 32px;
  border: 0;
  clip-path: var(--cp-frame);
  filter: none;
}

/* The meter: a recessed track; the fill is cut into slanted gold segments, brightest at the leading edge. */
:is(.cp-page-augment, .cp-page-item) #popular .cp-barcell {
  gap: 12px;
}

:is(.cp-page-augment, .cp-page-item) #popular .cp-bar {
  height: 12px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(110deg, rgba(var(--j-plat-rgb), 0.06) 0 5px, rgba(var(--j-plat-rgb), 0) 5px 8px),
    linear-gradient(180deg, var(--j-coal-1000), var(--j-coal-900));
  box-shadow: inset 0 2px 3px rgba(var(--j-shadow-rgb), 0.9), 0 1px 0 rgba(var(--j-plat-rgb), 0.14);
}

:is(.cp-page-augment, .cp-page-item) #popular .cp-bar i {
  inset: 2px auto 2px 2px;
  max-width: calc(100% - 4px);
  background: linear-gradient(90deg, var(--j-gold-600), var(--j-gold-300) 70%, var(--j-gold-50));
  box-shadow: none;
  -webkit-mask-image: repeating-linear-gradient(110deg, rgba(var(--j-shadow-rgb), 1) 0 5px, rgba(var(--j-shadow-rgb), 0) 5px 8px);
  mask-image: repeating-linear-gradient(110deg, rgba(var(--j-shadow-rgb), 1) 0 5px, rgba(var(--j-shadow-rgb), 0) 5px 8px);
}

:is(.cp-page-augment, .cp-page-item) #popular .cp-barcell span:last-child {
  font-size: 15px;
  color: var(--j-gold-150);
}

:is(.cp-page-augment, .cp-page-item) #popular td {
  font-size: 15px;
}

@media (max-width: 640px) {
  :is(.cp-page-augment, .cp-page-item) #popular tbody tr > * { padding: 6px 8px; }
  :is(.cp-page-augment, .cp-page-item) #popular tbody th::before { width: 26px; height: 22px; margin-right: 7px; font-size: 11px; }
  :is(.cp-page-augment, .cp-page-item) #popular thead th:first-child { padding-left: 40px; }
  :is(.cp-page-augment, .cp-page-item) #popular .cp-namecell .j-icon { --size: 28px !important; width: 28px; height: 28px; }
}

/* Phones: the augment and item podiums keep their icons and names narrow, so the stats fit beside them. */
@media (max-width: 760px) {
  .cp-lpodium__art--entity .j-icon { width: 56px; height: 56px; }
  .cp-lpodium__link:has(.cp-lpodium__art--entity) { width: 104px; }
  .cp-lpodium__art--entity + .cp-lpodium__name { font-size: 14px; line-height: 1.2; text-align: center; }
  .cp-lpodium__stats { flex-wrap: wrap; gap: 6px 16px; }
}