/* Wrap (wr-, wl- for the welcome): full-bleed slides with their own art, six transitions (octagonal reveal, rise,
   slide, tilt, wipe, zoom) with the outgoing slide receding underneath, staggered slide contents, and the welcome
   sequence (still light rays, the Colosseum crest drawing itself, an octagonal flash and shockwaves, rising embers,
   the name entering and glinting letter by letter). Nothing turns. Shared story pieces (seismograph, Season card, crest): story-kit.css. */

.wr {
  position: relative;
  height: calc(100vh - var(--j-topbar-h));
  height: calc(100dvh - var(--j-topbar-h));
  min-height: 560px;
  overflow: hidden;
  background: var(--j-coal-1000);
}

.wr-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 2000px;
}

.wr-stage > .j-loader,
.wr-stage > .j-empty,
.wr-stage > .j-error {
  position: absolute;
  inset: 0;
  margin: auto;
  height: fit-content;
}

/* ---------- Slide and its art ---------- */
.wr-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--j-coal-1000);
  transform-origin: 50% 50%;
}

.wr-slide .j-scene__art {
  inset: -24px;
  filter: var(--j-scene-filter-wrap);
  background-position: center 22%;
}

.wr-slide .j-scene__soft { display: none; }

/* Scrim: a dark veil over the whole art, deepest behind the text column on the left, so text and numbers read on
   any splash (WCAG AA); the two light washes and the vignette sit on top. */
.wr-slide .j-scene::after {
  background:
    radial-gradient(70% 60% at 8% 4%, rgba(var(--j-gold-rgb), 0.18), rgba(var(--j-gold-rgb), 0) 72%),
    radial-gradient(70% 65% at 96% 100%, rgba(var(--j-ember-rgb), 0.18), rgba(var(--j-ember-rgb), 0) 72%),
    radial-gradient(95% 85% at 50% 45%, rgba(var(--j-ink-rgb), 0) 35%, rgba(var(--j-ink-rgb), 0.88)),
    linear-gradient(90deg, rgba(var(--j-ink-rgb), 0.72) 0%, rgba(var(--j-ink-rgb), 0.6) 45%, rgba(var(--j-ink-rgb), 0.38) 100%);
}

.wr-slide__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(96px, 13vh, 132px) clamp(64px, 6vw, 96px) clamp(28px, 5vh, 56px);
}

/* Contents enter after the transition reads: opacity and a 16px rise, 90ms apart from 280ms (stagger in wrap.js). */
.wr-slide [data-in] {
  opacity: 0;
}

.wr-slide.is-current [data-in] {
  animation: wr-in 0.6s var(--j-ease) both;
  animation-delay: var(--d, 0s);
}

@keyframes wr-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Transitions (the DYS audit's "Wrap slide transitions", kept outside git) ---------- */
.wr-slide.is-leaving {
  z-index: 0;
  animation: wr-recede 0.75s ease-in both;
  pointer-events: none;
}

.wr-slide.is-entering {
  z-index: 1;
}

.wr-slide.is-entering.t-slide { animation: wr-slide-in 0.75s var(--j-ease-slide) both; }
.wr-slide.is-leaving.t-slide { animation: wr-slide-out 0.75s var(--j-ease-slide) both; }
.wr-slide.is-entering.t-rise { animation: wr-rise-in 0.75s var(--j-ease-slide) both; }
.wr-slide.is-entering.t-zoom { animation: wr-zoom-in 0.8s var(--j-ease) both; }
.wr-slide.is-leaving.t-zoom { animation: wr-zoom-out 0.5s ease both; }
.wr-slide.is-entering.t-iris { animation: wr-iris 0.9s var(--j-ease-iris) both; }
.wr-slide.is-entering.t-tilt { animation: wr-tilt-in 0.75s var(--j-ease-slide) both; }
.wr-slide.is-leaving.t-tilt { animation: wr-tilt-out 0.75s var(--j-ease-slide) both; }
.wr-slide.is-entering.t-wipe { animation: wr-wipe 0.85s var(--j-ease-slide) both; }
.wr-slide.is-first.t-iris { animation-duration: 1.2s; }

@keyframes wr-recede { to { transform: scale(0.94); opacity: 0.35; } }
@keyframes wr-slide-in { from { transform: translateX(calc(100% * var(--dir))); } }
@keyframes wr-slide-out { to { transform: translateX(calc(-30% * var(--dir))); opacity: 0.2; } }
@keyframes wr-rise-in { from { transform: translateY(calc(100% * var(--dir))); } }
@keyframes wr-zoom-in { from { transform: scale(1.35); opacity: 0; } }
@keyframes wr-zoom-out { to { transform: scale(0.8); opacity: 0; } }
/* The reveal opens as an octagon (the crest's shape) from the centre until it covers the slide. */
@keyframes wr-iris {
  from { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); }
  to { clip-path: polygon(8.6% -50%, 91.4% -50%, 150% 8.6%, 150% 91.4%, 91.4% 150%, 8.6% 150%, -50% 91.4%, -50% 8.6%); }
}
@keyframes wr-tilt-in { from { transform: translateX(calc(70% * var(--dir))) rotate(calc(7deg * var(--dir))); opacity: 0; } }
@keyframes wr-tilt-out { to { transform: translateX(calc(-70% * var(--dir))) rotate(calc(-7deg * var(--dir))); opacity: 0; } }
@keyframes wr-wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

/* ---------- Chrome: progress, header, arrows ---------- */
.wr-chrome {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
  width: min(1152px, calc(100% - 2 * var(--j-gutter)));
  padding-top: 18px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Progress: slanted gunmetal blades, gold as they fill; the current slide's number rides above its blade (a CSS
   counter). */
.wr-progress {
  display: flex;
  gap: 4px;
  counter-reset: wr-slide;
  pointer-events: auto;
}

.wr-progress__seg {
  position: relative;
  flex: 1;
  height: 16px;
  padding: 6px 0;
  border: 0;
  background: none;
  cursor: pointer;
  counter-increment: wr-slide;
}

.wr-progress__seg.is-active::before {
  content: counter(wr-slide, decimal-leading-zero);
  position: absolute;
  top: -12px;
  left: 0;
  font: 400 12px/1 var(--j-display);
  letter-spacing: 0.08em;
  color: var(--j-gold-200);
}

.wr-progress__seg i {
  position: relative;
  display: block;
  height: 5px;
  overflow: hidden;
  background: rgba(var(--j-white-rgb), 0.12);
  box-shadow: inset 0 1px 0 rgba(var(--j-white-rgb), 0.08);
  transform: skewX(-30deg);
}

.wr-progress__seg i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--j-gold-100), var(--j-gold-400));
  transform: scaleX(0);
  transform-origin: left;
}

.wr-progress__seg.is-done i::after { transform: none; }

.wr-progress__seg.is-active i::after {
  animation: wr-progress var(--wr-seconds, 10s) linear forwards;
}

.wr.is-paused .wr-progress__seg.is-active i::after { animation-play-state: paused; }
/* A slide still waiting for its data: no timer until it is built (wrap.js slideList). */
.wr-progress__seg.is-waiting.is-active i::after { animation: none; }
.wr-slide--waiting .wr-slide__body { align-items: center; }

@keyframes wr-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.wr-progress__seg:hover i { background: rgba(var(--j-white-rgb), 0.26); }

.wr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

.wr-head__who {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.2;
}

.wr-head__who b {
  font: 400 15px/1 var(--j-display);
  color: var(--j-gold-50);
}

.wr-head__who small { font: 400 12px/1 var(--j-display); color: var(--j-muted); }
.wr-head__who .j-label { font-size: 11px; letter-spacing: 0.24em; }

/* The player's icon in an octagon. */
.wr-head__img {
  width: 34px;
  height: 34px;
  background-size: cover;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

/* Tools: one joined toolbar with a cut corner, buttons split by hairlines. */
.wr-head__tools {
  display: flex;
  gap: 0;
  background: rgba(var(--j-ink-rgb), 0.7);
  box-shadow: inset 0 0 0 1px rgba(var(--j-gold-rgb), 0.3);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  pointer-events: auto;
}

.wr-tool {
  display: grid;
  place-items: center;
  width: 40px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
}

.wr-tool + .wr-tool {
  box-shadow: inset 1px 0 0 rgba(var(--j-gold-rgb), 0.22);
}

.wr-tool:hover {
  background: rgba(var(--j-gold-rgb), 0.14);
}

.wr-tool .j-i { width: 14px; height: 14px; }
.wr-tool.is-done { border-color: var(--j-up-color); color: var(--j-up-color); }

/* Arrows: tall slim blades against the screen edges, cut on their inner corners, a gold edge on the outside. */
.wr-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 36px;
  height: 128px;
  margin-top: -64px;
  border: 0;
  background: linear-gradient(90deg, rgba(var(--j-coal-700-rgb), 0.9), rgba(var(--j-coal-900-rgb), 0.6));
  color: var(--j-gold-100);
  cursor: pointer;
  transition: background-color var(--j-dur-fast) var(--j-ease-std), color var(--j-dur-fast) var(--j-ease-std), opacity var(--j-dur);
}

.wr-arrow:hover { background-color: rgba(var(--j-gold-rgb), 0.18); color: var(--j-gold-50); }
.wr-arrow:disabled { opacity: 0; pointer-events: none; }
.wr-arrow--prev {
  left: 0;
  box-shadow: inset 2px 0 0 var(--j-gold-300);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.wr-arrow--next {
  right: 0;
  background: linear-gradient(270deg, rgba(var(--j-coal-700-rgb), 0.9), rgba(var(--j-coal-900-rgb), 0.6));
  box-shadow: inset -2px 0 0 var(--j-gold-300);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.wr-arrow .j-i { width: 16px; height: 16px; }

/* ---------- Common slide type ---------- */
.wr-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--j-gold-200);
}

.wr-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--j-gold-300);
}

.wr-title {
  max-width: 760px;
  margin: 0;
  font: 400 clamp(34px, min(4vw, 6vh), 58px) / 1.12 var(--j-display);
  letter-spacing: 0.02em;
  color: var(--j-gold-50);
}

.wr-title em,
.wr-lead em {
  font-style: normal;
  color: var(--j-ember-200);
  font-variant-numeric: tabular-nums;
}

.wr-title em.is-gold { color: var(--j-gold-200); }
.wr-title small { font-size: 0.5em; color: var(--j-muted); }

.wr-lead {
  max-width: 560px;
  margin: 16px 0 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--j-text);
  text-shadow: 0 1px 6px rgba(var(--j-shadow-rgb), 0.8);
}

.wr-lead em { color: var(--j-gold-100); }

.wr-sub {
  margin: 20px 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--j-gold-200);
}

.wr-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  max-width: 820px;
  margin: clamp(18px, 3vh, 34px) 0 0;
}

/* Fact boxes: an opaque plate, a readable label, the value in Beaufort and its note (date, champion) on its own line. */
.wr-facts div {
  padding: 12px 16px 13px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.24);
  background: rgba(var(--j-ink-rgb), 0.84);
}

.wr-facts dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--j-text-2);
}

.wr-facts dd {
  margin: 7px 0 0;
  font: 400 22px/1.15 var(--j-display);
  letter-spacing: 0.02em;
  color: var(--j-gold-50);
}

.wr-facts dd small {
  display: block;
  margin-top: 4px;
  font: 400 13px/1.3 var(--j-sans);
  letter-spacing: 0.02em;
  color: var(--j-muted);
}

.wr-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wr-inline .j-i { width: 12px; height: 12px; color: var(--j-muted); }

.wr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--j-text-2);
}

.wr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wr-legend i { width: 10px; height: 10px; transform: rotate(45deg); }
.wr-legend .is-first i { background: var(--j-fill-1); }
.wr-legend .is-top i { background: var(--j-fill-2); }
.wr-legend .is-played i { background: var(--j-fill-5); }

.is-gold { color: var(--j-gold-200) !important; }
.is-p1 { color: var(--j-p1) !important; }
.is-sky { color: var(--j-ember-200) !important; }
.is-rose { color: var(--j-rose) !important; }

.wr-col {
  display: flex;
  flex-direction: column;
}

.wr-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
}

.wr-split--card { grid-template-columns: auto minmax(0, 1fr); }
.wr-split--right-card { grid-template-columns: minmax(0, 1fr) auto; }
.wr-split--left-visual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wr-split--climb { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

/* ---------- Champion card ---------- */
.wr-card {
  --tone-rgb: var(--j-gold-rgb);
  position: relative;
  display: flex;
  flex: none;
  align-items: flex-end;
  justify-content: center;
  width: clamp(180px, 25vh, 260px);
  aspect-ratio: 0.55;
  overflow: hidden;
  border: 1px solid rgba(var(--tone-rgb), 0.7);
  box-shadow: 0 0 0 4px rgba(var(--j-ink-rgb), 0.6), 0 0 42px rgba(var(--tone-rgb), 0.25), 0 24px 60px rgba(var(--j-shadow-rgb), 0.6);
}

.wr-card--sky { --tone-rgb: var(--j-ember-rgb); }

.wr-card__art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
}

.wr-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--j-ink-rgb), 0) 56%, rgba(var(--j-ink-rgb), 0.92));
}

.wr-card__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 10px 16px;
  text-align: center;
}

.wr-card__text small {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--j-gold-200);
}

.wr-card__text b {
  font: 400 clamp(17px, 2.4vh, 22px) / 1 var(--j-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--j-gold-50);
}

.wr-card__text span { font-size: 13px; color: var(--j-text); }

.wr-card__mark {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  transform: rotate(45deg);
  border: 1px solid rgba(var(--tone-rgb), 0.9);
  background: rgba(var(--j-ink-rgb), 0.85);
  box-shadow: 0 0 14px rgba(var(--tone-rgb), 0.5);
}

.wr-card__mark > * { transform: rotate(-45deg); }
.wr-card__mark b { font: 400 17px/1 var(--j-display); color: var(--j-ember-100); }
.wr-card__mark .j-i { width: 14px; height: 14px; color: var(--j-ember-100); }

.wr-cards {
  display: flex;
  justify-content: center;
  gap: 18px;
}

/* ---------- Grind ---------- */
.wr-grind {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(18px, 3vh, 32px);
}

.wr-cal {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(16px, 2.6vh, 26px);
  gap: 4px;
}

.wr-cal__week {
  display: grid;
  grid-template-rows: repeat(7, clamp(16px, 2.6vh, 26px));
  gap: 4px;
}

.wr-cal i {
  border: 1px solid rgba(var(--j-gold-rgb), 0.1);
  background: rgba(var(--j-white-rgb), 0.04);
}

.wr-cal i.is-out { visibility: hidden; }
.wr-cal i.is-first { border-color: rgba(var(--j-p1-rgb), 0.6); background: var(--j-gloss), var(--j-fill-1); box-shadow: 0 0 8px rgba(var(--j-p1-rgb), 0.35); }
.wr-cal i.is-top { background: var(--j-gloss), var(--j-fill-2); }
.wr-cal i.is-played { background: var(--j-gloss), var(--j-fill-5); }

.is-current .wr-cal i {
  animation: j-pop 0.45s var(--j-ease-pop) backwards;
  animation-delay: calc(520ms + var(--w, 0) * 40ms);
}

.wr-clock {
  --R: clamp(170px, 26vh, 250px);
  position: relative;
  flex: none;
  width: var(--R);
  height: var(--R);
}

.wr-clock::before {
  content: "";
  position: absolute;
  inset: 30%;
  border: 1px solid rgba(var(--j-gold-rgb), 0.3);
  border-radius: 50%;
}

.wr-clock__bar {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 3px);
  width: 6px;
  height: 50%;
  transform: rotate(var(--a));
  transform-origin: 50% 100%;
}

.wr-clock__bar i {
  position: absolute;
  bottom: 42%;
  left: 0;
  width: 100%;
  height: calc(56% * var(--f) + 2px);
  transform-origin: 50% 100%;
}

.wr-clock__bar i.is-first { background: var(--j-gloss), var(--j-fill-1); }
.wr-clock__bar i.is-top { background: var(--j-gloss), var(--j-fill-2); }

.is-current .wr-clock__bar i {
  animation: wr-grow-y 0.6s var(--j-ease-pop) backwards;
  animation-delay: calc(700ms + var(--i) * 30ms);
}

@keyframes wr-grow-y { from { transform: scaleY(0); } }

.wr-clock__label {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--j-muted);
  transform: rotate(var(--a)) translateY(calc(var(--R) * -0.56)) rotate(calc(var(--a) * -1)) translate(-50%, -50%);
  transform-origin: 0 0;
}

.wr-clock__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.wr-clock__center b { font: 400 calc(var(--R) * 0.12) / 1 var(--j-display); color: var(--j-gold-50); }
.wr-clock__center small { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--j-ember-250); }

/* ---------- Finishes ---------- */
.wr-bignums {
  display: flex;
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(16px, 3vh, 32px);
}

.wr-bignums p { margin: 0; display: flex; flex-direction: column; }
.wr-bignums b { font: 400 clamp(64px, 11vh, 110px) / 1 var(--j-display); }
.wr-bignums b { text-shadow: 0 2px 18px rgba(var(--j-shadow-rgb), 0.7); }
.wr-bignums small { margin-top: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--j-text); }

.wr-podium {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: clamp(8px, 1.4vw, 18px);
  height: clamp(260px, 44vh, 460px);
}

.wr-podium > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 100%;
}

.wr-podium .j-num { font: 400 18px/1 var(--j-display); color: var(--j-gold-50); }

.wr-podium__bar {
  display: flex;
  width: 100%;
  height: calc((100% - 60px) * var(--f));
  min-height: 3px;
}

.wr-podium__bar i {
  flex: 1;
  box-shadow: var(--j-bar-edge);
}

.is-current .wr-podium__bar {
  animation: wr-grow-y 0.8s var(--j-ease) backwards;
  animation-delay: calc(520ms + var(--i) * 80ms);
  transform-origin: 50% 100%;
}

/* ---------- Rating ---------- */
.wr-seis {
  height: clamp(260px, 42vh, 460px);
  margin-top: clamp(16px, 2.6vh, 28px);
  padding-bottom: 14px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.24);
  background: linear-gradient(155deg, rgba(var(--j-coal-900-rgb), 0.86), rgba(var(--j-ink-rgb), 0.9));
}

/* ---------- The Climb ---------- */
.wr-ladder {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wr-ladder__window {
  position: relative;
  height: clamp(300px, 52vh, 520px);
  overflow: hidden;
  border: 1px solid rgba(var(--j-gold-rgb), 0.25);
  background: linear-gradient(180deg, rgba(var(--j-coal-900-rgb), 0.7), rgba(var(--j-ink-rgb), 0.8));
  -webkit-mask-image: linear-gradient(180deg, rgba(var(--j-shadow-rgb), 0.15), rgba(var(--j-shadow-rgb), 1) 18%, rgba(var(--j-shadow-rgb), 1) 82%, rgba(var(--j-shadow-rgb), 0.15));
  mask-image: linear-gradient(180deg, rgba(var(--j-shadow-rgb), 0.15), rgba(var(--j-shadow-rgb), 1) 18%, rgba(var(--j-shadow-rgb), 1) 82%, rgba(var(--j-shadow-rgb), 0.15));
}

.wr-ladder__list {
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.wr-ladder__list li {
  position: relative;
  display: grid;
  grid-template-columns: 56px 30px minmax(0, 1fr) auto 64px;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(var(--j-gold-rgb), 0.07);
}

.wr-ladder__rank { font: 400 17px/1 var(--j-display); color: var(--j-muted); text-align: right; font-variant-numeric: tabular-nums; }
.wr-ladder__name { overflow: hidden; font: 400 15px/1 var(--j-display); color: var(--j-text); text-overflow: ellipsis; white-space: nowrap; }
.wr-ladder__name small { margin-left: 2px; font-size: 0.8em; color: var(--j-muted); }
.wr-ladder__champs { display: flex; gap: 3px; }
.wr-ladder__rating { font: 400 16px/1 var(--j-display); color: var(--j-gold-100); text-align: right; }

.wr-ladder__list li.is-me {
  border: 1px solid rgba(var(--j-select-edge-rgb), 0.8);
  background: linear-gradient(90deg, rgba(var(--j-select-rgb), 0.3), rgba(var(--j-select-rgb), 0.08));
}

.wr-ladder__list li.is-me .wr-ladder__rank,
.wr-ladder__list li.is-me .wr-ladder__name { color: var(--j-gold-50); }

.wr-ladder__list li.is-me::after {
  content: "";
  position: absolute;
  inset: -1px;
  box-shadow: 0 0 30px rgba(var(--j-select-rgb), 0.6), inset 0 0 18px rgba(var(--j-select-light-rgb), 0.25);
  opacity: 0;
}

.wr-ladder__list li.is-landed::after { animation: wr-flare 1.6s var(--j-ease-out) forwards; }
.wr-ladder__list li.is-landed .st-crest { animation: wr-crest-flare 0.9s var(--j-ease-pop); }

@keyframes wr-flare {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0.55; }
}

@keyframes wr-crest-flare {
  0% { transform: scale(1); }
  40% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.wr-ladder__link {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--j-gold-200);
  text-decoration: none;
}

.wr-ladder__link .j-i { width: 11px; height: 11px; }

/* ---------- Champions ---------- */
.wr-champs {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin: clamp(18px, 3vh, 30px) 0 0;
  padding: 0;
  list-style: none;
}

.wr-champs li {
  display: grid;
  grid-template-columns: 30px 110px 1fr 40px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--j-text-2);
}

.wr-champs b { font: 400 16px/1 var(--j-display); color: var(--j-gold-50); text-align: right; }

.wr-champs__bar {
  position: relative;
  height: 4px;
  background: rgba(var(--j-white-rgb), 0.06);
}

.wr-champs__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  transform-origin: left;
}

.wr-champs__bar i.is-p1 { background: var(--j-fill-1); }
.wr-champs__bar i.is-gold { background: var(--j-fill-2); }

.is-current .wr-champs__bar i {
  animation: wr-grow-x 0.8s var(--j-ease) backwards;
  animation-delay: calc(700ms + var(--i) * 90ms);
}

@keyframes wr-grow-x { from { transform: scaleX(0); } }

/* ---------- Combat, rounds ---------- */
.wr-trio,
.wr-tally {
  display: flex;
  gap: clamp(26px, 4vw, 56px);
  margin-top: clamp(16px, 3vh, 30px);
}

.wr-trio p,
.wr-tally p { margin: 0; display: flex; flex-direction: column; }
.wr-trio b,
.wr-tally b { font: 400 clamp(36px, 6vh, 58px) / 1 var(--j-display); color: var(--j-gold-50); font-variant-numeric: tabular-nums; }
.wr-trio small,
.wr-tally small { margin-top: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--j-text-2); }

.wr-tally {
  position: relative;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 12px;
  max-width: 560px;
}

.wr-tally .is-right { align-items: flex-end; }

/* The duels bar: won and lost fills meeting at the split, brightest where they meet, a diamond shockwave for the
   clash and a diamond on the split. The resting state is set here (scaleX from --share); wrap.js duelsEntrance animates it in. */
.wr-tally__bar {
  position: relative;
  flex-basis: 100%;
  height: 12px;
  background: rgba(var(--j-stone-light-rgb), 0.06);
}

.wr-tally__won,
.wr-tally__lost {
  position: absolute;
  inset: 0;
}

.wr-tally__won {
  transform: scaleX(var(--share));
  transform-origin: left;
  background: linear-gradient(90deg, rgba(var(--j-ember-rgb), 0.35), var(--j-ember-200));
  box-shadow: 0 0 18px rgba(var(--j-ember-rgb), 0.5);
}

.wr-tally__lost {
  transform: scaleX(calc(1 - var(--share)));
  transform-origin: right;
  background: linear-gradient(270deg, rgba(var(--j-rose-rgb), 0.35), var(--j-rose));
  box-shadow: 0 0 18px rgba(var(--j-rose-rgb), 0.5);
}

.wr-tally__shock {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid var(--j-gold-50);
  rotate: 45deg;
  opacity: 0;
}

/* Spans the bar, so translateX(share * 100%) puts its left edge, and the diamond, on the split. */
.wr-tally__mark {
  position: absolute;
  inset: 0;
  transform: translateX(calc(var(--share) * 100%));
}

.wr-tally__mark > span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  transform: rotate(45deg);
  border: 1px solid var(--j-gold-50);
  background: var(--j-gold-25);
  box-shadow: 0 0 18px 6px rgba(var(--j-light-rgb), 0.5);
}

.wr-tally__pct {
  display: flex;
  flex-basis: 100%;
  justify-content: space-between;
  margin-top: -2px;
}

.wr-tally .wr-tally__pct b { font: 400 18px/1 var(--j-display); letter-spacing: 0.04em; }

/* Duels: "Champions beaten N / M" over a grid of every champion duelled. wrap.js fitBeaten sizes the cells (--cell)
   so all of them fit the box, or shows a "+N" chip for the rest; nothing is clipped. */
.wr-beaten__head { display: flex; align-items: baseline; gap: 10px; margin: clamp(10px, 2vh, 18px) 0 8px; }
.wr-beaten__head b { font: 400 22px/1 var(--j-display); letter-spacing: 0.02em; color: var(--j-gold-50); }
.wr-beaten__head small { font: 400 16px/1 var(--j-display); letter-spacing: 0.02em; color: var(--j-muted); }

.wr-beaten {
  --cell: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--cell));
  grid-auto-rows: var(--cell);
  align-content: start;
  gap: 4px;
  max-width: 780px;
  height: clamp(80px, 18vh, 236px);
  overflow: hidden;
}

.wr-beaten > span { width: var(--cell); height: var(--cell); opacity: 0.25; filter: grayscale(1); }
.wr-beaten > span.is-on { opacity: 1; filter: none; }
.wr-beaten > span .j-icon { width: 100%; height: 100%; }
.wr-beaten > [hidden] { display: none; }

.wr-beaten__more {
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--j-gold-rgb), 0.45);
  background: rgba(var(--j-ink-rgb), 0.85);
  font: 400 12px/1 var(--j-display);
  color: var(--j-gold-50);
}

.wr-beaten > .wr-beaten__more { opacity: 1; filter: none; }

/* Three facts in equal columns split by hairlines, each: a 34px picture, a label, the name and the record. */
.wr-trivia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 780px;
  margin-top: clamp(14px, 2.4vh, 22px);
  border: 1px solid rgba(var(--j-gold-rgb), 0.2);
  background: rgba(var(--j-ink-rgb), 0.82);
}

.wr-trivia__fact {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 11px 14px;
}

.wr-trivia__fact + .wr-trivia__fact { border-left: 1px solid rgba(var(--j-gold-rgb), 0.18); }
.wr-trivia__fact > :first-child { grid-row: 1 / span 3; align-self: center; }
.wr-trivia small { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--j-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-trivia b { font: 400 16px/1.2 var(--j-display); color: var(--j-gold-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-trivia b small { font: inherit; font-size: 0.75em; letter-spacing: 0; text-transform: none; color: var(--j-muted); }
.wr-trivia em { font: 400 14px/1.2 var(--j-display); font-style: normal; color: var(--j-text-2); }

/* The player's monogram, framed like the champion icons beside it. */
.wr-trivia__mono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.6);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--j-coal-700), var(--j-coal-900));
  font: 400 16px/1 var(--j-display);
  color: var(--j-gold-100);
}

/* Duels entrance (wrap.js duelsEntrance has the full timeline): its own delays instead of the slide stagger, an 18px
   rise, the rival card scaling in from .8, the tally with no fade (its numbers count), and every champion icon
   popping from .2 at its own --pop (to its resting opacity, so unbeaten icons stay dim). */
.wr-slide--duels.is-current [data-in] { animation-name: wr-duel-in; }
.wr-slide--duels.is-current .wr-kicker { animation-delay: 100ms; }
.wr-slide--duels.is-current .wr-title { animation-delay: 250ms; }
.wr-slide--duels.is-current .wr-lead { animation-delay: 1300ms; }
.wr-slide--duels.is-current .wr-card { animation: wr-duel-card 0.6s var(--j-ease) 900ms both; }
.wr-slide--duels.is-current .wr-tally__pct { animation: j-fade 0.5s ease-out 1650ms both; }
.wr-slide--duels.is-current .wr-beaten > span { animation: wr-duel-pop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.2) var(--pop, 0s) both; }
.wr-slide--duels.is-current .wr-trivia { animation: j-fade 0.6s var(--j-ease) 2600ms both; }
.wr-slide--duels.is-current .wr-trivia__fact { animation: wr-duel-in 0.6s var(--j-ease) both; animation-delay: 2600ms; }
.wr-slide--duels.is-current .wr-trivia__fact:nth-child(2) { animation-delay: 2700ms; }
.wr-slide--duels.is-current .wr-trivia__fact:nth-child(3) { animation-delay: 2800ms; }

@keyframes wr-duel-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes wr-duel-card {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: none; }
}
@keyframes wr-duel-pop { from { opacity: 0; transform: scale(0.2); } }

/* ---------- Damage ---------- */
.wr-dmg {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 46px);
}

.wr-dmg__col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.wr-dmg__label {
  font-size: 11.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--j-gold-300);
}

.wr-dmg .wr-card { width: clamp(150px, 22vh, 220px); }

.wr-dmg .wr-ring {
  position: absolute;
  top: 18%;
  right: -46px;
  z-index: 2;
}

.wr-ring {
  --size: 150px;
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--j-ink-rgb), 0.92) 78%, rgba(var(--j-ink-rgb), 0));
}

.wr-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wr-ring circle {
  fill: none;
  stroke-width: 9;
}

.is-current .wr-ring svg {
  animation: wr-ring-in 1s var(--j-ease) 0.6s backwards;
}

@keyframes wr-ring-in {
  from { transform: scale(0.6); opacity: 0; }
}

.wr-ring__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wr-ring__center b { font: 400 calc(var(--size) * 0.16) / 1 var(--j-display); color: var(--j-gold-50); }
.wr-ring__center small { margin-top: 4px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--j-ember-250); }

/* ---------- Augments, items ---------- */
.wr-comb {
  width: 100%;
  height: clamp(300px, 56vh, 640px);
}

.wr-comb--items { height: clamp(300px, 54vh, 600px); }

.wr-tiers {
  display: flex;
  gap: 4px;
  max-width: 460px;
  margin-top: clamp(18px, 3vh, 30px);
}

.wr-tiers__seg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.wr-tiers__seg i { height: 6px; box-shadow: var(--j-bar-edge); }
.wr-tiers__seg small { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--j-muted); white-space: nowrap; }
.wr-tiers__seg--silver i { background: linear-gradient(90deg, var(--j-silver-200), var(--j-silver-500)); }
.wr-tiers__seg--gold i { background: var(--j-fill-gold); }
.wr-tiers__seg--prismatic i { background: var(--j-fill-prismatic); }

.wr-signature,
.wr-anvil {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 460px;
  margin-top: 22px;
  padding: 12px 16px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.3);
  background: rgba(var(--j-ink-rgb), 0.55);
}

.wr-signature > span,
.wr-anvil > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.wr-signature small,
.wr-anvil small { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--j-muted); }
.wr-signature b { font: 400 18px/1.1 var(--j-display); color: var(--j-gold-50); }
.wr-signature span span { font-size: 12px; color: var(--j-text-2); }
.wr-anvil b { font: 400 34px/1 var(--j-display); color: var(--j-gold-50); }
.wr-anvil em { font: 400 15px/1 var(--j-display); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--j-gold-100); }
.wr-anvil small { letter-spacing: 0.06em; text-transform: none; font-size: 12px; }

.wr-anvil__gem {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  isolation: isolate;
}

.wr-anvil__gem::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  transform: rotate(45deg);
  border: 1px solid var(--j-prism-violet-light);
  box-shadow: 0 0 16px rgba(var(--j-prism-rgb), 0.45);
}

.wr-specials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.wr-specials span {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
}

.wr-specials .j-icon { grid-row: span 2; }
.wr-specials b { font-size: 12px; font-weight: 600; color: var(--j-text); }
.wr-specials small { font-size: 11px; color: var(--j-muted); }

/* ---------- Abilities, squad ---------- */
.wr-abilities {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.wr-abilities .wr-legend { justify-content: center; }

.wr-squad {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(18px, 3vh, 30px);
}

.wr-squad__stats {
  display: grid;
  gap: 16px;
  margin: 0;
}

.wr-squad__stats dd { margin: 0; font: 400 clamp(30px, 4.6vh, 44px) / 1 var(--j-display); color: var(--j-gold-50); }
.wr-squad__stats dt { margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--j-text-2); }

.wr-mates {
  display: grid;
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.wr-mates li { display: grid; gap: 4px; }
.wr-mates__name { font: 400 16px/1.1 var(--j-display); color: var(--j-gold-50); }
.wr-mates__name small { font-size: 0.75em; color: var(--j-muted); }
.wr-mates li > small { font-size: 11.5px; color: var(--j-muted); }

.wr-mates__bar {
  display: flex;
  height: 6px;
  margin-top: 4px;
  transform-origin: left;
}

.wr-mates__bar i { box-shadow: var(--j-bar-edge); }

.is-current .wr-mates__bar {
  animation: wr-grow-x 0.8s var(--j-ease) backwards;
  animation-delay: calc(800ms + var(--i) * 100ms);
}

/* ---------- ArenaSweats TV ---------- */
.wr-tv {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(18px, 3vh, 30px);
}

/* The on-camera tag and the Recap / VOD button share the top row (the tag wraps rather than run under the button),
   the champion sits at the bottom. */
.wr-tv__game {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  column-gap: 8px;
  height: clamp(110px, 17vh, 170px);
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.3);
  color: inherit;
  text-decoration: none;
  animation: none;
  transition: border-color var(--j-dur-fast) var(--j-ease-std);
}

.wr-tv__game:hover,
.wr-tv__game:focus-visible { border-color: var(--j-gold-200); }
.wr-tv__game:hover .wr-tv__art { opacity: 0.85; }

.is-current .wr-tv__game {
  animation: wr-in 0.55s var(--j-ease) backwards;
  animation-delay: calc(700ms + var(--i) * 90ms);
}

.wr-tv__art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 25%;
  opacity: 0.7;
  transition: opacity var(--j-dur-slow) var(--j-ease-out);
}

.wr-tv__game::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--j-ink-rgb), 0.2), rgba(var(--j-ink-rgb), 0.9));
}

.wr-tv__live {
  position: relative;
  grid-area: 1 / 1;
  justify-self: start;
  align-self: start;
  min-width: 0;
  margin: -2px 0 0 -2px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--j-red-300-rgb), 0.7);
  background: rgba(var(--j-ink-rgb), 0.75);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--j-red-100);
}

.wr-tv__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--j-red-300);
  animation: j-breathe 2s ease-in-out infinite;
}

.wr-tv__body {
  position: relative;
  grid-area: 3 / 1 / 4 / 3;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.wr-tv__body b { font: 400 18px/1 var(--j-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--j-gold-50); }
.wr-tv__body > span { display: inline-flex; align-items: baseline; gap: 8px; }
.wr-tv__body small { font-size: 12.5px; color: var(--j-text-2); }

/* Where the card goes: the Twitch VOD (glyph) or the match recap. */
.wr-tv__go {
  position: relative;
  grid-area: 1 / 2;
  align-self: start;
  margin: -3px -4px 0 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.4);
  background: rgba(var(--j-ink-rgb), 0.8);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--j-text);
}

.wr-tv__go .j-i { width: 12px; height: 12px; }

.wr-tv__links { margin: 16px 0 0; }

/* ---------- Champion leaderboards ---------- */
.wr-split--boards { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.wr-split--boards .wr-facts { grid-template-columns: minmax(0, 1fr); max-width: 360px; }

.wr-boards {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 24px);
}

.wr-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.wr-board .wr-card { width: clamp(120px, 19vh, 200px); transition: transform var(--j-dur) var(--j-ease-out), border-color var(--j-dur-fast) var(--j-ease-std); }
.wr-board:hover .wr-card,
.wr-board:focus-visible .wr-card { transform: translateY(-6px); border-color: var(--j-gold-100); }
.wr-board.is-best .wr-card { width: clamp(140px, 23vh, 236px); }
.wr-board .wr-card__mark b { transform: rotate(-45deg); font: 400 13px/1 var(--j-display); color: var(--j-gold-50); }

.wr-board__rank { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--j-text-2); }
.wr-board__rank b { font: 400 22px/1 var(--j-display); letter-spacing: 0.02em; color: var(--j-gold-100); }

.is-current .wr-board { animation: wr-in 0.55s var(--j-ease) backwards; animation-delay: calc(600ms + var(--i) * 110ms); }

/* ---------- Badges ---------- */
.wr-split--badges { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

.wr-badge-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: clamp(18px, 3vh, 30px);
  padding: 16px 22px 16px 16px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.35);
  background: rgba(var(--j-ink-rgb), 0.84);
  max-width: 520px;
}

.wr-badge-hero__img {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(110px, 17vh, 150px);
  aspect-ratio: 1;
}

.wr-badge-hero__img::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--j-gold-rgb), 0.4), rgba(var(--j-gold-rgb), 0));
  animation: j-breathe var(--j-breathe-glow) ease-in-out infinite;
}

.wr-badge-hero__img .j-banner { --bw: 68%; }
.wr-badge-hero__text { display: flex; flex-direction: column; gap: 6px; }
.wr-badge-hero__text small { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--j-gold-200); }
.wr-badge-hero__text b { font: 400 28px/1.1 var(--j-display); color: var(--j-gold-50); }
.wr-badge-hero__text span { font-size: 14px; color: var(--j-text); }

/* Fixed-size badge cards in centred rows, so any count stays even. */
.wr-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 12px; /* row room for the banners hanging over each card */
  padding-top: 18px;
}

.wr-badges__item {
  flex: 0 0 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 12px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.2);
  background: rgba(var(--j-ink-rgb), 0.8);
  text-align: center;
}

.wr-badges__item .j-banner { --bw: clamp(44px, 7vh, 60px); margin: -30px 0 4px; }
.wr-badges__item b { font: 400 15px/1.15 var(--j-display); color: var(--j-gold-50); }
.wr-badges__item small { font-size: 12.5px; color: var(--j-text-2); }

/* "+N more": the badges past two rows, opening the dashboard's Badges tab. */
.wr-badges__more {
  justify-content: center;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--j-dur-fast) var(--j-ease-std);
}

.wr-badges__more b { font-size: 30px; color: var(--j-gold-200); }
.wr-badges__more:hover { border-color: var(--j-gold-300); }

.is-current .wr-badges__item { animation: wr-in 0.5s var(--j-ease) backwards; animation-delay: calc(650ms + var(--i) * 80ms); }

.wr-next { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.wr-next li {
  display: grid;
  grid-template-columns: 40px minmax(110px, auto) minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.16);
  background: rgba(var(--j-ink-rgb), 0.8);
}

.wr-next span { font-size: 14px; color: var(--j-text); }
.wr-next__track { height: 6px; background: rgba(var(--j-light-rgb), 0.1); }
.wr-next__track i { display: block; width: var(--w); height: 100%; background: var(--j-fill-gold); }
.wr-next b { font: 400 17px/1 var(--j-display); text-align: right; color: var(--j-gold-100); }

/* ---------- High scores ---------- */
.wr-scores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1000px;
  margin-top: clamp(16px, 3vh, 30px);
}

.wr-score {
  --tone: rgba(var(--j-gold-rgb), 0.3);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 12px;
  border: 1px solid var(--tone);
  background: rgba(var(--j-ink-rgb), 0.86);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--j-dur-fast) var(--j-ease-std), transform var(--j-dur) var(--j-ease-out);
}

.wr-score:hover,
.wr-score:focus-visible { border-color: var(--j-gold-100); transform: translateY(-3px); }
.wr-score--record { --tone: var(--j-gold-300); box-shadow: 0 0 24px rgba(var(--j-gold-rgb), 0.25); }
.wr-score--prismatic { --tone: var(--j-prism-violet); }
.wr-score--gold { --tone: rgba(var(--j-gold-rgb), 0.6); }

.wr-score__crown { position: absolute; top: 10px; right: 12px; color: var(--j-gold-200); }
.wr-score__crown .j-i { width: 18px; height: 18px; }
.wr-score__head { display: flex; align-items: center; gap: 8px; }
.wr-score__head small { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--j-text-2); }
.wr-score__value { font: 400 clamp(28px, 4.4vh, 40px) / 1 var(--j-display); color: var(--j-gold-50); }
.wr-score__mark { font: 400 16px/1 var(--j-display); font-style: normal; letter-spacing: 0.04em; color: var(--j-gold-200); }
.wr-score--prismatic .wr-score__mark { color: var(--j-prism-violet-light); }
.wr-score__foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; color: var(--j-text); }
.wr-score__foot small { margin-left: auto; font-size: 12.5px; color: var(--j-muted); }

.is-current .wr-score { animation: wr-in 0.5s var(--j-ease) backwards; animation-delay: calc(600ms + var(--i) * 80ms); }

/* ---------- TCG: the five strongest cards in tier frames (silver, gold, prismatic, secret) ---------- */
.wr-tcg {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(16px, 3vh, 28px);
}

.wr-tcg__card {
  --tone: var(--j-silver-400);
  --tone-rgb: var(--j-silver-rgb);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: clamp(120px, 17vh, 168px);
  aspect-ratio: 63 / 88;
  overflow: hidden;
  border: 2px solid var(--tone);
  border-radius: 10px;
  background: var(--j-coal-900);
  box-shadow: 0 0 22px rgba(var(--tone-rgb), 0.3), 0 16px 40px rgba(var(--j-shadow-rgb), 0.6);
  color: inherit;
  text-decoration: none;
  transition: transform var(--j-dur) var(--j-ease-out);
}

.wr-tcg__card:hover,
.wr-tcg__card:focus-visible { transform: translateY(-6px); }
.wr-tcg__card[data-tier="gold"] { --tone: var(--j-gold-300); --tone-rgb: var(--j-gold-rgb); }
.wr-tcg__card[data-tier="prismatic"],
.wr-tcg__card[data-tier="secret"] { --tone: var(--j-prism-violet-light); --tone-rgb: var(--j-prism-rgb); }
.wr-tcg__card[data-tier="secret"] { border-image: var(--j-fill-prismatic) 1; }

.wr-tcg__art { position: absolute; inset: 0; background-size: cover; background-position: center 20%; }
.wr-tcg__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--j-ink-rgb), 0) 45%, rgba(var(--j-ink-rgb), 0.94)); }
.wr-tcg__tier {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 3px 7px;
  border: 1px solid var(--tone);
  background: rgba(var(--j-ink-rgb), 0.85);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--j-text);
}

.wr-tcg__name { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 0 10px 10px; }
.wr-tcg__name b { font: 400 15px/1.1 var(--j-display); color: var(--j-gold-50); }
.wr-tcg__name small { font-size: 12.5px; color: var(--j-text-2); }
.wr-tcg__links { margin: 16px 0 0; }

.is-current .wr-tcg__card { animation: wr-in 0.55s var(--j-ease) backwards; animation-delay: calc(650ms + var(--i) * 90ms); }

/* ---------- Season card finale ---------- */
.wr-finale {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.wr-finale__card .st-card { --w: clamp(240px, 36vh, 360px); }

.wr-finale__title {
  margin: 0;
  font: 400 clamp(40px, 6.4vh, 64px) / 1 var(--j-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--j-gold-50);
  text-shadow: 0 0 40px rgba(var(--j-gold-rgb), 0.3);
}

.wr-finale__stats {
  display: flex;
  max-width: 560px;
  margin: 22px 0 0;
  border: 1px solid rgba(var(--j-gold-rgb), 0.3);
  background: rgba(var(--j-ink-rgb), 0.55);
}

.wr-finale__stats div { flex: 1; padding: 12px 14px; }
.wr-finale__stats div + div { border-left: 1px solid rgba(var(--j-gold-rgb), 0.16); }
.wr-finale__stats dd { margin: 0; font: 400 30px/1 var(--j-display); color: var(--j-gold-50); }
.wr-finale__stats dt { margin-top: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--j-text-2); }

.wr-doors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
  margin-top: 22px;
}

.wr-door {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.3);
  background: rgba(var(--j-ink-rgb), 0.55);
  color: var(--j-gold-100);
  text-decoration: none;
  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);
}

.wr-door:hover { transform: translateY(-4px); border-color: rgba(var(--j-gold-rgb), 0.8); box-shadow: 0 0 30px rgba(var(--j-gold-rgb), 0.18); }
.wr-door .j-i { width: 16px; height: 16px; }
.wr-door b { font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }

.wr-finale__links {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
}

/* ---------- Welcome ---------- */
.wr-slide--welcome .wr-slide__body { align-items: center; padding-bottom: clamp(20px, 4vh, 40px); }

.wl {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wl-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(230px, 31vh, 320px);
  aspect-ratio: 1;
  margin-bottom: clamp(18px, 3.4vh, 40px);
  /* The flash and the shockwaves are octagons, the crest's own shape. */
  --wl-oct: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  /* An octagonal outline 2px wide: the outer octagon, then the inner one (even-odd leaves the band between). */
  --wl-oct-line: polygon(evenodd, 29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%, 29.3% 0,
    calc(29.3% + 0.83px) 2px, 2px calc(29.3% + 0.83px), 2px calc(70.7% - 0.83px), calc(29.3% + 0.83px) calc(100% - 2px),
    calc(70.7% - 0.83px) calc(100% - 2px), calc(100% - 2px) calc(70.7% - 0.83px), calc(100% - 2px) calc(29.3% + 0.83px),
    calc(70.7% - 0.83px) 2px, calc(29.3% + 0.83px) 2px);
}

.wl-emblem > * { grid-area: 1 / 1; }

/* Still light rays behind the crest (they fade in; nothing turns). */
.wl-rays {
  position: absolute;
  inset: -85%;
  pointer-events: none;
  opacity: 0;
  animation: j-fade 1.2s ease-out 0.9s forwards;
}

.wl-rays::before,
.wl-rays::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, rgba(var(--j-shadow-rgb), 0) 22%, rgba(var(--j-shadow-rgb), 1) 38%, rgba(var(--j-shadow-rgb), 0) 100%);
  mask-image: radial-gradient(closest-side, rgba(var(--j-shadow-rgb), 0) 22%, rgba(var(--j-shadow-rgb), 1) 38%, rgba(var(--j-shadow-rgb), 0) 100%);
}

.wl-rays::before {
  inset: 0;
  background: repeating-conic-gradient(rgba(var(--j-light-rgb), 0) 0deg, rgba(var(--j-light-rgb), 0.16) 5deg, rgba(var(--j-light-rgb), 0) 10deg, rgba(var(--j-light-rgb), 0) 20deg);
}

.wl-rays::after {
  inset: 10%;
  background: repeating-conic-gradient(from 9deg, rgba(var(--j-ember-rgb), 0) 0deg, rgba(var(--j-ember-rgb), 0.12) 4deg, rgba(var(--j-ember-rgb), 0) 8deg, rgba(var(--j-ember-rgb), 0) 24deg);
}

.wl-glow {
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--j-gold-rgb), 0.45), rgba(var(--j-gold-rgb), 0));
  animation: j-breathe var(--j-breathe-glow) ease-in-out infinite;
}

.wl-flash {
  position: absolute;
  inset: 22%;
  z-index: 2;
  clip-path: var(--wl-oct);
  background: radial-gradient(closest-side, rgba(var(--j-light-rgb), 1), rgba(var(--j-light-rgb), 0.85) 35%, rgba(var(--j-gold-rgb), 0.6) 70%, rgba(var(--j-gold-rgb), 0.35) 100%);
  opacity: 0;
  animation: wl-flash 1.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
}

@keyframes wl-flash {
  0% { opacity: 0; transform: scale(0.3); }
  20% { opacity: 1; transform: scale(0.9); }
  55% { opacity: 0.95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}

/* Each shockwave is an octagonal line (the clipped ::before) with its glow from a drop-shadow on the host. */
.wl-shock {
  --shock-rgb: var(--j-gold-rgb);
  position: absolute;
  inset: 12%;
  filter: drop-shadow(0 0 8px rgba(var(--shock-rgb), 0.9));
  opacity: 0;
  animation: wl-shock 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 1.15s both;
}

.wl-shock::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--wl-oct-line);
  background: rgba(var(--shock-rgb), 0.9);
}

.wl-shock--sky {
  --shock-rgb: var(--j-ember-rgb);
  animation-delay: 1.27s;
}

.wl-shock--cream {
  --shock-rgb: var(--j-light-rgb);
  animation-delay: 1.39s;
}

@keyframes wl-shock {
  from { opacity: 1; transform: scale(0.6); }
  to { opacity: 0; transform: scale(1.75); }
}

/* The Colosseum crest (crest.css) round the summoner icon; the portrait and the level arrive after the flash. */
.wl-emblem.j-crest {
  --crest-size: clamp(230px, 31vh, 320px);
}

.wl-avatar {
  animation: wl-avatar 0.9s var(--j-ease) 1.3s backwards;
}

@keyframes wl-avatar { from { opacity: 0; transform: scale(0.7); } }

.wl-level {
  animation: wr-in 0.5s var(--j-ease) 1.3s backwards;
}

.wl-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding-left: 0.42em;
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--j-gold-300);
  animation: wr-in 0.6s var(--j-ease) 1.2s backwards;
}

.wl-name {
  display: flex;
  align-items: baseline;
  margin: clamp(6px, 1.4vh, 14px) 0 0;
  font: 400 clamp(54px, 10vh, 112px) / 1.05 var(--j-display);
  letter-spacing: 0.01em;
  color: var(--j-gold-50);
  perspective: 600px;
}

.wl-name > span {
  display: inline-block;
  color: var(--j-gold-50);
  text-shadow: 0 0 36px rgba(var(--j-gold-rgb), 0.3);
  animation: wl-letter 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both, wl-glint 6s ease-in-out infinite;
  animation-delay: calc(1.5s + var(--i) * 45ms), calc(3.4s + var(--i) * 70ms);
}

.wl-name small {
  margin-left: 12px;
  font-size: 0.36em;
  color: var(--j-muted);
  animation: wr-in 0.6s var(--j-ease) 1.8s backwards;
}

@keyframes wl-letter {
  from { opacity: 0; filter: blur(8px); transform: translateY(12px) rotateX(40deg); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

@keyframes wl-glint {
  0%, 10%, 100% { color: var(--j-gold-50); text-shadow: 0 0 36px rgba(var(--j-gold-rgb), 0.3); }
  4% { color: var(--j-gold-25); text-shadow: 0 0 14px rgba(var(--j-light-rgb), 0.95), 0 0 38px rgba(var(--j-gold-rgb), 0.65); }
}

.wl-season {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: clamp(12px, 2vh, 22px) 0 0;
  padding-left: 0.42em;
  font: 400 clamp(15px, 2vh, 20px) / 1 var(--j-display);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--j-gold-100);
  animation: wr-in 0.6s var(--j-ease) 1.9s backwards;
}

.wl-season span {
  width: clamp(60px, 9vw, 110px);
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0), rgba(var(--j-gold-rgb), 0.7));
}

.wl-season span:last-child { background: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.7), rgba(var(--j-gold-rgb), 0)); }

.wl-meta,
.wl-ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--j-text-2);
  animation: wr-in 0.6s var(--j-ease) 2.05s backwards;
}

.wl-ladder {
  margin-top: 16px;
  padding: 8px 18px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.25);
  background: rgba(var(--j-ink-rgb), 0.5);
  letter-spacing: 0.16em;
  animation-delay: 2.2s;
}

.wl-ladder b { font: 400 16px/1 var(--j-display); letter-spacing: 0.04em; color: var(--j-gold-50); }

.wl-embers {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.wl-ember {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  opacity: 0;
  animation: wl-ember linear infinite;
}

.wl-ember--gold { background: var(--j-gold-200); box-shadow: 0 0 6px rgba(var(--j-gold-rgb), 0.9); }
.wl-ember--sky { background: var(--j-ember-200); box-shadow: 0 0 6px rgba(var(--j-ember-rgb), 0.9); }
.wl-ember--cream { background: var(--j-gold-25); box-shadow: 0 0 6px rgba(var(--j-light-rgb), 0.9); }

@keyframes wl-ember {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  15%, 70% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift, 0px), -90vh, 0); }
}

/* ---------- Reduced motion: a .4s crossfade, everything else at rest ---------- */
@media (prefers-reduced-motion: reduce) {
  .wr-slide.is-entering[class*="t-"] { animation: j-fade 0.4s ease both !important; animation-duration: 0.4s !important; }
  .wr-slide.is-leaving[class*="t-"] { animation: none !important; opacity: 0; }
  .wl-ember, .wl-rays, .wl-flash, .wl-shock { display: none; }
  .wr-slide [data-in] { opacity: 1; }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
  .wr-split,
  .wr-split--card,
  .wr-split--right-card,
  .wr-split--left-visual,
  .wr-split--climb,
  .wr-split--badges,
  .wr-split--boards,
  .wr-finale,
  .wr-abilities { grid-template-columns: minmax(0, 1fr); }
  .wr-slide__body { justify-content: flex-start; overflow-y: auto; padding: 108px 28px 40px; }
  .wr-split--card .wr-card,
  .wr-split--right-card .wr-card { display: none; }
  .wr-finale__card { justify-self: center; }
  .wr-arrow { top: auto; bottom: 14px; margin-top: 0; }
}

@media (max-width: 640px) {
  .wr-chrome { width: calc(100% - 24px); padding-top: 10px; }
  .wr-progress { gap: 3px; }
  .wr-head__who .j-label { display: none; }
  .wr-slide__body { padding: 92px 16px 80px; }
  .wr-title { font-size: 30px; }
  .wr-lead { font-size: 14px; }
  .wr-grind { flex-direction: column; align-items: flex-start; }
  .wr-cal { grid-auto-columns: 14px; }
  .wr-cal__week { grid-template-rows: repeat(7, 14px); }
  .wr-facts { grid-template-columns: 1fr 1fr; }
  .wr-podium { height: 240px; }
  .wr-dmg { flex-direction: column; align-items: center; }
  .wr-dmg .wr-ring { right: -30px; --size: 110px !important; width: 110px; height: 110px; }
  .wr-tv { grid-template-columns: 1fr 1fr; }
  .wr-tv__game { padding: 10px; }
  .wr-tv__live { gap: 5px; padding: 3px 6px; font-size: 10px; letter-spacing: 0.06em; }
  .wr-tv__go { padding: 4px 6px; font-size: 0; gap: 0; } /* the icon alone; the card's tip says where it goes */
  .wr-tv__body { flex-direction: column; align-items: flex-start; gap: 4px; }
  .wr-tv__body small { white-space: nowrap; }
  .wr-trivia { grid-template-columns: minmax(0, 1fr); }
  .wr-boards { flex-wrap: wrap; justify-content: center; }
  .wr-scores { grid-template-columns: 1fr 1fr; }
  .wr-tcg { flex-wrap: wrap; }
  .wr-tcg__card { width: calc(50% - 8px); }
  .wr-badge-hero { flex-direction: column; text-align: center; }
  .wr-trivia__fact + .wr-trivia__fact { border-left: 0; border-top: 1px solid rgba(var(--j-gold-rgb), 0.18); }
  .wr-beaten { height: 150px; }
  .wr-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wr-finale__stats dd { font-size: 20px; }
  .wr-ladder__list li { grid-template-columns: 40px 24px minmax(0, 1fr) 56px; padding: 0 10px; }
  .wr-ladder__champs { display: none; }
  .wl-name { font-size: 46px; }
  .wl-season { letter-spacing: 0.24em; font-size: 13px; }
  .wl-season span { width: 30px; }
  .wr-arrow { width: 32px; height: 64px; }
}

/* First load: the welcome opens on the dark stage (the octagonal reveal shows the flash), the art arrives under it. */
.wr-slide--welcome.is-first .j-scene {
  animation: j-fade 1.2s ease-out 1.5s backwards;
}