/* League Wrapped (#/wrapped): full-screen tap-through story. Prefix wr-.
   Sizes inside a slide use --u (1% of the slide's width, capped by its height),
   so a slide looks the same on a phone, on a desktop and in the 1080×1920 export. */

body.wr-open { overflow: hidden; }
.page-wrapped { padding: 0; }

/* ---- stage and card ------------------------------------------------------------- */
.wr-stage {
	position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
	background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--cerulean) 30%, transparent), transparent 60%),
		radial-gradient(100% 80% at 0% 100%, color-mix(in srgb, var(--coral) 28%, transparent), transparent 60%), var(--bg);
	outline: none;
}
.wr-card {
	--chrome: var(--text);
	position: relative; height: min(calc(100dvh - 32px), 940px); aspect-ratio: 9 / 16; max-width: calc(100vw - 32px);
	border-radius: 22px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow-lg);
	color: var(--chrome); user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
@media (max-width: 600px) {
	.wr-card { width: 100vw; height: 100dvh; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
}
.wr-view { position: absolute; inset: 0; container-type: size; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wr-progress { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; gap: 4px; padding: 10px 12px 0; pointer-events: none; }
.wr-seg { flex: 1; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--chrome) 28%, transparent); overflow: hidden; }
.wr-seg i { display: block; height: 100%; background: var(--chrome); transform-origin: left center; transform: scaleX(0); }
.wr-top { position: absolute; left: 0; right: 0; top: 18px; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; pointer-events: none; }
.wr-top-t { font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: .04em; opacity: .85; }
.wr-counter { opacity: .75; font-weight: 400; }
.wr-top-b { display: flex; gap: 6px; pointer-events: auto; }
.wr-tools { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; gap: 8px; align-items: center; justify-content: center; padding: 10px 12px 14px; }
.wr-btn {
	display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px;
	border: 0; font: 600 14px/1 var(--ui); color: var(--chrome); background: color-mix(in srgb, var(--chrome) 14%, transparent);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; text-decoration: none;
}
.wr-btn:hover { background: color-mix(in srgb, var(--chrome) 24%, transparent); text-decoration: none; }
.wr-btn:focus-visible { outline: 2px solid var(--chrome); outline-offset: 2px; }
.wr-btn:disabled { opacity: .35; cursor: default; }
.wr-btn-text { padding: 0 14px; font-size: 13px; }
.wr-nav { font-size: 22px; padding: 0; width: 34px; }

/* ---- a slide --------------------------------------------------------------------------- */
.wr-slide {
	--u: calc(min(1cqw, .5625cqh) * var(--wr-fit, 1)); /* --wr-fit: WrappedDeck.fit shrinks a slide that would overflow */
	--wr-fg: var(--text); --wr-dim: var(--dim);
	--wr-bgc: color-mix(in srgb, var(--wr-c1) 18%, var(--panel));
	position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column;
	color: var(--wr-fg); background: var(--wr-bgc); font-family: var(--sans); font-variant-numeric: lining-nums;
	opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
}
.wr-slide.wr-solid { --wr-fg: var(--wr-ink); --wr-dim: color-mix(in srgb, var(--wr-ink) 74%, transparent); --wr-bgc: var(--wr-c1); }
.wr-slide.is-active { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.wr-content {
	position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 3.4);
	padding: max(64px, calc(var(--u) * 15)) calc(var(--u) * 7) max(64px, calc(var(--u) * 15));
}
.wr-lay-a .wr-content { align-items: center; text-align: center; }
.wr-lay-b .wr-content { justify-content: flex-end; }
.wr-lay-c .wr-content { justify-content: flex-start; padding-top: max(80px, calc(var(--u) * 19)); }
.wr-lay-c .wr-head { font-size: calc(var(--u) * 11); }
.wr-lay-d .wr-content { justify-content: space-evenly; padding-top: max(80px, calc(var(--u) * 19)); }
.wr-lay-d .wr-kicker { align-self: flex-start; padding: calc(var(--u) * 1.2) calc(var(--u) * 3); border-radius: 999px; background: var(--wr-fg); color: var(--wr-bgc); letter-spacing: .1em; }
.wr-lay-d .wr-head { font-size: calc(var(--u) * 12); text-transform: uppercase; line-height: .95; }
.wr-lay-e .wr-content { align-items: center; text-align: center; }
.wr-lay-e .wr-content::before { content: ""; position: absolute; inset: max(56px, calc(var(--u) * 13)) calc(var(--u) * 4) max(56px, calc(var(--u) * 13)); border: calc(var(--u) * .6) solid var(--wr-fg); border-radius: calc(var(--u) * 6); opacity: .22; pointer-events: none; }
.wr-lay-e .wr-duo, .wr-lay-e .wr-tags { justify-content: center; }
.wr-lay-e .wr-stamp { align-self: center; }
.wr-lay-e .wr-quote { border-left: 0; padding-left: 0; }
.wr-lay-e .wr-hero { flex-direction: column; gap: calc(var(--u) * 2); }
.wr-foot { display: none; }

/* backdrops: three shapes, five arrangements */
.wr-deco { position: absolute; inset: 0; pointer-events: none; }
.wr-deco i { position: absolute; display: block; }
.wr-d1 { width: calc(var(--u) * 78); aspect-ratio: 1; right: calc(var(--u) * -26); top: calc(var(--u) * -22); border-radius: 50%; background: var(--wr-c2); opacity: .34; }
.wr-d2 { width: calc(var(--u) * 44); aspect-ratio: 1; left: calc(var(--u) * -14); bottom: calc(var(--u) * 10); border-radius: 50%; border: calc(var(--u) * 4.5) solid var(--wr-c1); opacity: .26; }
.wr-d3 { left: -20%; right: -20%; height: calc(var(--u) * 12); bottom: calc(var(--u) * 8); background: repeating-linear-gradient(90deg, var(--wr-c2) 0 calc(var(--u) * 2.2), transparent calc(var(--u) * 2.2) calc(var(--u) * 5)); transform: rotate(var(--wr-rot)); opacity: .16; }
.wr-solid .wr-d1 { opacity: .3; }
.wr-solid .wr-d2 { border-color: var(--wr-c2); opacity: .28; }
.wr-bg-2 .wr-d1 { border-radius: 26%; transform: rotate(calc(var(--wr-rot) + 20deg)); right: calc(var(--u) * -30); top: calc(var(--u) * -30); }
.wr-bg-2 .wr-d3 { bottom: auto; top: calc(var(--u) * -6); height: calc(var(--u) * 26); background: repeating-linear-gradient(0deg, var(--wr-c2) 0 calc(var(--u) * 1.4), transparent calc(var(--u) * 1.4) calc(var(--u) * 4)); }
.wr-bg-3 .wr-d1 { width: calc(var(--u) * 150); right: calc(var(--u) * -75); top: calc(var(--u) * -75); background: repeating-radial-gradient(circle, var(--wr-c2) 0 calc(var(--u) * 3), transparent calc(var(--u) * 3) calc(var(--u) * 8)); opacity: .35; }
.wr-bg-3 .wr-d2 { border-radius: 30%; transform: rotate(var(--wr-rot)); }
.wr-bg-4 .wr-d1 { width: 150%; aspect-ratio: auto; height: calc(var(--u) * 70); left: -25%; right: auto; top: auto; bottom: calc(var(--u) * -40); border-radius: 50% 50% 0 0; }
.wr-bg-4 .wr-d2 { left: auto; right: calc(var(--u) * -12); bottom: auto; top: calc(var(--u) * 20); }
.wr-bg-5 .wr-d1 { width: calc(var(--u) * 60); border-radius: 0; right: calc(var(--u) * -10); top: calc(var(--u) * -10); transform: rotate(45deg); }
.wr-bg-5 .wr-d3 { left: -30%; right: -30%; bottom: calc(var(--u) * -6); height: calc(var(--u) * 30); background: var(--wr-c2); transform: rotate(calc(var(--wr-rot) - 8deg)); opacity: .2; }

/* type */
.wr-kicker { font: 700 calc(var(--u) * 3.6)/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--wr-dim); }
.wr-head { margin: 0; font: 900 calc(var(--u) * 9.2)/1.02 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: balance; }
.wr-head-sm { font-size: calc(var(--u) * 7.4); }
.wr-head-xs { font-size: calc(var(--u) * 6); line-height: 1.1; }
.wr-lay-d .wr-head.wr-head-sm { font-size: calc(var(--u) * 8.6); }
.wr-lay-d .wr-head.wr-head-xs { font-size: calc(var(--u) * 6.6); }
.wr-lay-c .wr-head.wr-head-sm { font-size: calc(var(--u) * 7.4); }
.wr-lay-c .wr-head.wr-head-xs { font-size: calc(var(--u) * 6); }
.wr-year { font: 400 calc(var(--u) * 33)/.9 var(--score); letter-spacing: -.03em; }
.wr-year-span { font-size: calc(var(--u) * 17); }
.wr-tag { font: 900 calc(var(--u) * 8)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; padding: calc(var(--u) * 1.6) calc(var(--u) * 4); border-radius: 999px; background: var(--wr-fg); color: var(--wr-bgc); }
.wr-mega { font: 400 calc(var(--u) * 22)/.95 var(--score); letter-spacing: -.02em; display: flex; align-items: baseline; gap: calc(var(--u) * 1.5); }
.wr-mega { flex-wrap: wrap; row-gap: calc(var(--u) * 1); }
.wr-duo > * { min-width: 0; }
.wr-duo .wr-mega { font-size: calc(var(--u) * 18); }
.wr-mega-l, .wr-duo .wr-mega-l { font-size: calc(var(--u) * 14); }
.wr-mega-xl, .wr-duo .wr-mega-xl { font-size: calc(var(--u) * 11); }
.wr-mega small { font: 700 calc(var(--u) * 5)/1 var(--ui); text-transform: uppercase; color: var(--wr-dim); letter-spacing: .06em; }
.wr-big { font: 400 calc(var(--u) * 8.4)/1.05 var(--score); }
.wr-name { font: 900 calc(var(--u) * 5.6)/1.1 var(--display); }
.wr-small { font: 600 calc(var(--u) * 3.4)/1.35 var(--ui); color: var(--wr-dim); }
.wr-sub { margin: 0; font: 500 calc(var(--u) * 4.1)/1.4 var(--sans); color: var(--wr-dim); max-width: 64ch; }
.wr-line { font: 700 calc(var(--u) * 5)/1.25 var(--display); }
.wr-quote { margin: 0; font: italic 400 calc(var(--u) * 4.3)/1.45 var(--serif); border-left: calc(var(--u) * 1) solid var(--wr-c2); padding-left: calc(var(--u) * 4); }
.wr-lay-a .wr-quote { border-left: 0; padding-left: 0; }
.wr-hint { font: 600 calc(var(--u) * 3.2)/1 var(--ui); color: var(--wr-dim); margin-top: calc(var(--u) * 3); }
.wr-stamp { display: inline-flex; flex-direction: column; align-self: flex-start; gap: calc(var(--u) * .6); padding: calc(var(--u) * 2.4) calc(var(--u) * 4); border-radius: calc(var(--u) * 3);
	background: var(--wr-fg); color: var(--wr-bgc); transform: rotate(-2deg); }
.wr-lay-a .wr-stamp { align-self: center; }
.wr-stamp b { font: 400 calc(var(--u) * 6.6)/1 var(--score); }
.wr-stamp span { font: 700 calc(var(--u) * 3)/1.2 var(--ui); opacity: .82; }
.wr-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 3) calc(var(--u) * 5); min-height: calc(var(--u) * 12); }
.wr-nums > div { display: flex; flex-direction: column; align-items: center; max-width: calc(var(--u) * 26); }
.wr-nums b { font: 400 calc(var(--u) * 6.4)/1.05 var(--score); }
.wr-nums span { font: 600 calc(var(--u) * 3.2)/1.25 var(--ui); color: var(--wr-dim); text-align: center; }
.wr-nums:empty { visibility: hidden; }

/* pieces */
.wr-duo { display: flex; align-items: center; gap: calc(var(--u) * 5); }
.wr-lay-a .wr-duo { justify-content: center; text-align: left; }
.wr-face { width: calc(var(--u) * 30); aspect-ratio: 2 / 3; flex: none; border-radius: calc(var(--u) * 4); overflow: hidden; background: color-mix(in srgb, var(--wr-c2) 40%, transparent); }
.wr-face > * { width: 100% !important; height: 100% !important; }
.wr-face-lg { width: calc(var(--u) * 36); }
.wr-face-sm { width: calc(var(--u) * 20); }
.wr-logo { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 12); aspect-ratio: 1; flex: none; }
.wr-logo img { width: 100%; height: 100%; object-fit: contain; }
.wr-logo-sm { width: calc(var(--u) * 6.5); }
.wr-logo-lg { width: calc(var(--u) * 18); }
.wr-logo-xl { width: calc(var(--u) * 27); }
.wr-abbr { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; font: 400 calc(var(--u) * 3.4)/1 var(--score); box-shadow: inset 0 0 0 calc(var(--u) * .6) color-mix(in srgb, currentColor 30%, transparent); }
.wr-logo-xl .wr-abbr { font-size: calc(var(--u) * 7.5); }
.wr-logo-lg .wr-abbr { font-size: calc(var(--u) * 5); }
.wr-logo-sm .wr-abbr { font-size: calc(var(--u) * 1.9); }
.wr-hero { display: flex; align-items: center; gap: calc(var(--u) * 5); }
.wr-lay-a .wr-hero { flex-direction: column; gap: calc(var(--u) * 2); }
.wr-hero-txt { display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.wr-chips { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: calc(var(--u) * 2); width: 100%; }
.wr-chip { display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 2.4) calc(var(--u) * 1); border-radius: calc(var(--u) * 3); background: color-mix(in srgb, var(--wr-fg) 9%, transparent); }
.wr-chip b { font: 400 calc(var(--u) * 6)/1 var(--score); }
.wr-chip span { font: 700 calc(var(--u) * 2.8)/1.3 var(--ui); color: var(--wr-dim); letter-spacing: .08em; }
.wr-path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); width: 100%; }
.wr-path li.is-lost { opacity: .7; }
.wr-path li { display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 1.8) calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: color-mix(in srgb, var(--wr-fg) 9%, transparent); text-align: left; }
.wr-path-r { flex: none; width: calc(var(--u) * 22); font: 700 calc(var(--u) * 3)/1.2 var(--ui); text-transform: uppercase; letter-spacing: .06em; color: var(--wr-dim); }
.wr-path-t { flex: 1; min-width: 0; font: 900 calc(var(--u) * 4.2)/1.1 var(--display); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wr-path b { font: 400 calc(var(--u) * 5)/1 var(--score); }
.wr-meter { display: flex; flex-direction: column; gap: calc(var(--u) * .8); }
.wr-meter-n { font: 400 calc(var(--u) * 20)/.95 var(--score); }
.wr-meter-n span { font-size: .45em; }
.wr-bars { display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); width: 100%; }
.wr-barrow { display: grid; grid-template-columns: minmax(0, 44%) 1fr auto; align-items: center; gap: calc(var(--u) * 2.4); text-align: left; }
.wr-bar-l { font: 700 calc(var(--u) * 3.4)/1.2 var(--ui); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wr-bar { display: block; height: calc(var(--u) * 3.4); border-radius: 999px; background: color-mix(in srgb, var(--wr-fg) 10%, transparent); overflow: hidden; }
.wr-bar i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--wr-fg) 55%, transparent); transform-origin: left center; }
.wr-barrow.is-win .wr-bar i { background: var(--wr-fg); }
.wr-barrow.is-win .wr-bar-l { font-weight: 900; }
.wr-bar-v { font: 400 calc(var(--u) * 4)/1 var(--score); }
.wr-jump { display: flex; align-items: baseline; gap: calc(var(--u) * 2); font-family: var(--score); }
.wr-jump-a { font-size: calc(var(--u) * 10); color: var(--wr-dim); text-decoration: line-through; text-decoration-thickness: calc(var(--u) * .7); }
.wr-jump-b { font-size: calc(var(--u) * 20); line-height: .95; }
.wr-arrow { font: 900 calc(var(--u) * 7)/1 var(--display); color: var(--wr-dim); }
.wr-ranks { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(var(--u) * 2.4); font-family: var(--score); }
.wr-rank-a { font-size: calc(var(--u) * 8); color: var(--wr-dim); }
.wr-rank-b { font-size: calc(var(--u) * 15); line-height: 1; }
.wr-trade { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); width: 100%; text-align: left; }
.wr-tside { display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 3.4); background: color-mix(in srgb, var(--wr-fg) 8%, transparent); border-top: calc(var(--u) * 1.4) solid var(--wr-tc, var(--wr-c2)); min-width: 0; }
.wr-tside.is-win { background: color-mix(in srgb, var(--wr-fg) 15%, transparent); }
.wr-tside-h { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 2); font: 900 calc(var(--u) * 4.2)/1.1 var(--display); min-width: 0; }
.wr-tside-h span { overflow-wrap: break-word; }
.wr-tside ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(var(--u) * .8); font: 600 calc(var(--u) * 3.4)/1.25 var(--sans); overflow-wrap: anywhere; }
.wr-tside-v { margin-top: auto; font: 700 calc(var(--u) * 3.4)/1 var(--ui); display: flex; align-items: baseline; gap: calc(var(--u) * 1); }
.wr-tside-v b { font: 400 calc(var(--u) * 8)/1 var(--score); }
.wr-grade { margin-left: auto; font: 400 calc(var(--u) * 4.4)/1 var(--score); padding: calc(var(--u) * .8) calc(var(--u) * 1.8); border-radius: calc(var(--u) * 1.6); background: var(--wr-fg); color: var(--wr-bgc); }
.wr-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(var(--u) * 3); width: 100%; text-align: center; }
.wr-vs > div { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); min-width: 0; }
.wr-vs .wr-name { font-size: calc(var(--u) * 4.4); }
.wr-vs-x { font: 900 calc(var(--u) * 7)/1 var(--display); color: var(--wr-dim); }
.wr-tags { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.4); align-items: center; }
.wr-lay-a .wr-tags { justify-content: center; }
.wr-tagx { font: 700 calc(var(--u) * 3.4)/1 var(--ui); padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4); border-radius: 999px; border: calc(var(--u) * .5) solid currentColor; }

/* team of the year vs disappointment: two halves */
.wr-lay-split .wr-content { padding: 0; gap: 0; justify-content: stretch; }
.wr-half { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 6) calc(var(--u) * 7); background: var(--wr-tc); color: var(--wr-tink); }
.wr-half .wr-small, .wr-half .wr-kicker { color: color-mix(in srgb, var(--wr-tink) 76%, transparent); }
.wr-half-a { flex-grow: 1.25; padding-top: max(70px, calc(var(--u) * 16)); }
.wr-half-b { padding-bottom: max(70px, calc(var(--u) * 16)); border-top: calc(var(--u) * 1.2) solid var(--wr-bgc); }
.wr-half .wr-big { font-size: calc(var(--u) * 10); }
.wr-half-a > .wr-logo { align-self: flex-start; }
.wr-half-b > .wr-logo { align-self: flex-start; }
.wr-lay-split .wr-deco { display: none; }

/* GOAT podium */
.wr-podium { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: end; gap: calc(var(--u) * 2.4); width: 100%; }
.wr-pod { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1); min-width: 0; text-align: center; }
.wr-pod .wr-face { width: 100%; }
.wr-pod .wr-name { font-size: calc(var(--u) * 3.8); overflow-wrap: anywhere; }
.wr-pod-1 .wr-name { font-size: calc(var(--u) * 4.6); }
.wr-pod .wr-small { font-size: calc(var(--u) * 2.8); }
.wr-pod-n { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 7); aspect-ratio: 1; border-radius: 50%; background: var(--wr-fg); color: var(--wr-bgc); font: 400 calc(var(--u) * 4)/1 var(--score); flex: none; }
.wr-pod:not(.wr-pod-1) .wr-face { width: 86%; }

/* all-time trades list */
.wr-tlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2.6); width: 100%; text-align: left; }
.wr-tlist li { display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 2.6) calc(var(--u) * 3.4); border-radius: calc(var(--u) * 3); background: color-mix(in srgb, var(--wr-fg) 8%, transparent); }
.wr-tl-h { display: flex; align-items: center; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 4); }
.wr-tl-h b { margin-left: auto; font: 400 calc(var(--u) * 4.4)/1 var(--score); }
.wr-tlist .wr-pod-n { width: calc(var(--u) * 6); font-size: calc(var(--u) * 3.4); }

/* cards */
.wr-cards { display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--u) * 2); width: 100%; }
.wr-cardslot { flex: none; }
.wr-cards .tc { --tcw: calc(var(--u) * 27); }
.wr-cards .wr-cardslot:nth-child(1) { order: 2; z-index: 2; }
.wr-cards .wr-cardslot:nth-child(1) .tc { --tcw: calc(var(--u) * 31); }
.wr-cards .wr-cardslot:nth-child(2) { order: 1; transform: rotate(-6deg); }
.wr-cards .wr-cardslot:nth-child(3) { order: 3; transform: rotate(6deg); }

/* summary */
.wr-s-summary .wr-head { font-size: calc(var(--u) * 10); }
.wr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.4); width: 100%; text-align: left; }
.wr-tile { display: flex; flex-direction: column; gap: calc(var(--u) * .7); padding: calc(var(--u) * 2.6) calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: color-mix(in srgb, var(--wr-fg) 12%, transparent); min-width: 0; }
.wr-tile span { font: 700 calc(var(--u) * 2.7)/1.2 var(--ui); text-transform: uppercase; letter-spacing: .1em; color: var(--wr-dim); }
.wr-tile b { font: 900 calc(var(--u) * 4.4)/1.12 var(--display); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wr-tile small { font: 600 calc(var(--u) * 2.9)/1.25 var(--ui); color: var(--wr-dim); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wr-brand { font: 700 calc(var(--u) * 3)/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--wr-dim); }

/* loading slide */
.wr-loading { --wr-c1: var(--cerulean); --wr-c2: var(--coral); }
.wr-loading .wr-content { align-items: center; text-align: center; }
.wr-spin { width: calc(var(--u) * 14); aspect-ratio: 1; border-radius: 50%; background: var(--ball); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%); mask: radial-gradient(circle, transparent 52%, #000 54%); animation: wr-spin 1.1s linear infinite; }

/* ---- new pieces ------------------------------------------------------------------- */
.wr-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); font: 600 calc(var(--u) * 3.6)/1.35 var(--ui); color: var(--wr-dim); }
.wr-facts li::before { content: "◆ "; color: var(--wr-fg); opacity: .55; }
.wr-solid .wr-facts li::before { color: currentColor; opacity: .7; }
.wr-solo { display: flex; }
.wr-lay-a .wr-solo, .wr-lay-e .wr-solo { justify-content: center; }
.wr-face-xs { width: calc(var(--u) * 13); }
.wr-links { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.6); justify-content: center; }
.wr-links a { font: 700 calc(var(--u) * 3.1)/1 var(--ui); padding: calc(var(--u) * 1.8) calc(var(--u) * 3); border-radius: 999px; color: var(--wr-fg); background: color-mix(in srgb, var(--wr-fg) 14%, transparent); text-decoration: none; }
.wr-links a:hover, .wr-links a:focus-visible { background: color-mix(in srgb, var(--wr-fg) 26%, transparent); }
.wr-favrow { display: flex; justify-content: center; }
.wr-favbtn { font: 700 calc(var(--u) * 3.4)/1 var(--ui); padding: calc(var(--u) * 2) calc(var(--u) * 4); border-radius: 999px; border: calc(var(--u) * .5) solid currentColor; background: transparent; color: var(--wr-fg); cursor: pointer; }
.wr-favbtn.is-on { background: var(--wr-fg); color: var(--wr-bgc); border-color: var(--wr-fg); }

/* top-five countdown */
.wr-cd { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.8); width: 100%; text-align: left; }
.wr-cd-row { display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 2) calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: color-mix(in srgb, var(--wr-fg) 9%, transparent); }
.wr-cd-row.is-top { background: var(--wr-fg); color: var(--wr-bgc); }
.wr-cd-row.is-top .wr-pod-n { background: var(--wr-bgc); color: var(--wr-fg); }
.wr-cd-row.is-top small { color: color-mix(in srgb, var(--wr-bgc) 70%, transparent); }
.wr-cd-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font: 900 calc(var(--u) * 4.2)/1.1 var(--display); overflow: hidden; text-overflow: ellipsis; }
.wr-cd-name small { font: 600 calc(var(--u) * 2.8)/1.2 var(--ui); color: var(--wr-dim); }
.wr-cd-row > b { font: 400 calc(var(--u) * 6)/1 var(--score); }
.wr-cd-v1 .wr-cd-row { border-left: calc(var(--u) * 1.4) solid var(--wr-tc, var(--wr-c2)); }
.wr-cd-v2 .wr-cd-row:not(.is-top) { background: transparent; border-bottom: calc(var(--u) * .4) solid color-mix(in srgb, var(--wr-fg) 25%, transparent); border-radius: 0; }
.wr-slide.is-active .wr-cd-row { animation: wr-rise .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k, 0) * 480ms + 400ms); }
.wr-slide.is-active .wr-cd-row.is-top { animation: wr-slam .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k, 0) * 480ms + 700ms); }
.wr-slide.is-active .wr-cd-row.is-top { transform: none; }

/* award cards that flip */
.wr-flips { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.4); width: 100%; perspective: 900px; }
.wr-flips-1 { grid-template-columns: 1fr; }
.wr-flip { min-height: calc(var(--u) * 17); }
.wr-flips-1 .wr-flip { min-height: calc(var(--u) * 15); }
.wr-flip-in { position: relative; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d; transform: rotateY(180deg); }
.wr-flip-f, .wr-flip-b { position: absolute; inset: 0; display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 2) calc(var(--u) * 3); border-radius: calc(var(--u) * 3); backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: left; }
.wr-flip-f { background: var(--wr-fg); color: var(--wr-bgc); justify-content: space-between; }
.wr-flip-f span { font: 700 calc(var(--u) * 3.4)/1.1 var(--ui); text-transform: uppercase; letter-spacing: .08em; }
.wr-flip-f b { font: 400 calc(var(--u) * 9)/1 var(--score); }
.wr-flip-b { transform: rotateY(180deg); background: color-mix(in srgb, var(--wr-fg) 13%, transparent); flex-wrap: wrap; align-content: center; column-gap: calc(var(--u) * 2.4); row-gap: 0; display: grid; grid-template-columns: auto 1fr; }
.wr-flip-b:not(:has(.wr-face)) { grid-template-columns: minmax(0, 1fr); }
.wr-flip-b { grid-template-columns: auto minmax(0, 1fr); }
.wr-flip-b .wr-face { grid-row: span 3; width: calc(var(--u) * 10); }
.wr-flip-b span { font: 700 calc(var(--u) * 2.8)/1.2 var(--ui); text-transform: uppercase; letter-spacing: .08em; color: var(--wr-dim); }
.wr-flip-b b { font: 900 calc(var(--u) * 3.7)/1.1 var(--display); overflow-wrap: break-word; min-width: 0; }
.wr-flip-b small { font: 600 calc(var(--u) * 2.8)/1.2 var(--ui); color: var(--wr-dim); }
@keyframes wr-flip { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
.wr-slide.is-active .wr-flip-in { animation: wr-flip .8s cubic-bezier(.3, .7, .2, 1) both; animation-delay: calc(var(--k, 0) * 900ms + 900ms); }
.wr-static .wr-flip-in, .wr-reduced .wr-flip-in { transform: none; }
.wr-static .wr-flip-f, .wr-reduced .wr-flip-f { display: none; }
.wr-static .wr-flip-b, .wr-reduced .wr-flip-b { transform: none; }
@media (prefers-reduced-motion: reduce) { .wr-flip-in { transform: none; } .wr-flip-f { display: none; } .wr-flip-b { transform: none; } }

/* quiz */
.wr-quiz { display: flex; flex-direction: column; gap: calc(var(--u) * 2.4); width: 100%; }
.wr-clue { display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); }
.wr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); }
.wr-opt { font: 800 calc(var(--u) * 3.8)/1.15 var(--display); padding: calc(var(--u) * 3) calc(var(--u) * 2.4); min-height: calc(var(--u) * 13); border-radius: calc(var(--u) * 3); border: calc(var(--u) * .5) solid color-mix(in srgb, var(--wr-fg) 40%, transparent); background: color-mix(in srgb, var(--wr-fg) 8%, transparent); color: var(--wr-fg); cursor: pointer; overflow-wrap: anywhere; transition: background .2s, opacity .2s, transform .2s; }
.wr-opt:hover { background: color-mix(in srgb, var(--wr-fg) 16%, transparent); }
.wr-opt:focus-visible { outline: calc(var(--u) * .6) solid var(--wr-fg); outline-offset: 2px; }
.wr-quiz.is-revealed .wr-opt { opacity: .45; cursor: default; }
.wr-quiz.is-revealed .wr-opt.is-answer { opacity: 1; background: var(--wr-fg); color: var(--wr-bgc); border-color: var(--wr-fg); transform: scale(1.03); }
.wr-quiz.is-revealed .wr-opt.is-wrong { opacity: .8; text-decoration: line-through; }
.wr-quiz-res { display: none; flex-direction: column; align-items: inherit; gap: calc(var(--u) * .6); }
.wr-quiz.is-revealed .wr-quiz-res { display: flex; animation: wr-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.wr-quiz-res b { font: 400 calc(var(--u) * 6)/1 var(--score); }
.wr-quiz-res b:empty { display: none; }
.wr-quiz-res span { font: 700 calc(var(--u) * 3.6)/1.25 var(--ui); }
.wr-quiz-hint { font: 600 calc(var(--u) * 3)/1.2 var(--ui); color: var(--wr-dim); }
.wr-quiz.is-revealed .wr-quiz-hint { display: none; }

/* transitions between slides (seeded per slide; reversed when going back) */
@keyframes wr-tx-slide { from { transform: translateX(14%); } }
@keyframes wr-tx-slide-b { from { transform: translateX(-14%); } }
@keyframes wr-tx-zoom { from { transform: scale(1.08); filter: blur(4px); } }
@keyframes wr-tx-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes wr-tx-wipe-b { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes wr-tx-tilt { from { transform: perspective(900px) rotateY(-14deg) scale(.96); transform-origin: left center; } }
.wr-slide.is-active.wr-tx-slide { animation: wr-tx-slide .5s cubic-bezier(.2, .8, .2, 1); }
.wr-slide.is-active.wr-tx-slide.wr-back { animation-name: wr-tx-slide-b; }
.wr-slide.is-active.wr-tx-zoom { animation: wr-tx-zoom .55s cubic-bezier(.2, .8, .2, 1); }
.wr-slide.is-active.wr-tx-wipe { animation: wr-tx-wipe .55s cubic-bezier(.6, 0, .2, 1); }
.wr-slide.is-active.wr-tx-wipe.wr-back { animation-name: wr-tx-wipe-b; }
.wr-slide.is-active.wr-tx-tilt { animation: wr-tx-tilt .6s cubic-bezier(.2, .8, .2, 1); }
.wr-static .wr-links, .wr-static .wr-favrow, .wr-static .wr-quiz-hint { display: none; }

/* ---- motion ------------------------------------------------------------------------- */
@keyframes wr-rise { from { opacity: 0; transform: translateY(calc(var(--u) * 5)) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes wr-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes wr-drift { to { translate: calc(var(--u) * -4) calc(var(--u) * 5); } }
@keyframes wr-grow { from { transform: scaleX(0); } }
@keyframes wr-spin { to { transform: rotate(360deg); } }
@keyframes wr-slam { 0% { opacity: 0; transform: scale(1.8) rotate(-8deg); } 70% { opacity: 1; transform: scale(.94) rotate(-2deg); } 100% { transform: rotate(-2deg); } }
.wr-slide.is-active .wr-in { animation: wr-rise .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i, 0), 8) * 100ms + 80ms); }
.wr-slide.is-active .wr-stamp.wr-in { animation: wr-slam .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i, 0), 8) * 100ms + 200ms); }
.wr-slide.is-active .wr-d1 { animation: wr-pop .9s cubic-bezier(.2, .8, .2, 1) both, wr-drift 9s ease-in-out 1s infinite alternate; }
.wr-slide.is-active .wr-d2 { animation: wr-pop 1.1s .15s cubic-bezier(.2, .8, .2, 1) both, wr-drift 11s ease-in-out 1s infinite alternate-reverse; }
.wr-slide.is-active .wr-bar i { animation: wr-grow 1s .6s cubic-bezier(.2, .8, .2, 1) both; }
/* Paused (button or hold): the backdrop stops drifting; entrances still finish. */
.wr-paused .wr-slide .wr-deco i { animation-play-state: paused !important; }
.wr-reduced .wr-slide, .wr-reduced .wr-slide *, .wr-static, .wr-static * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
	.wr-slide, .wr-slide * { animation: none !important; transition: none !important; }
	.wr-spin { animation: none !important; }
}

/* ---- export (360×640 CSS px, drawn at 3× = 1080×1920) ---------------------------------- */
.wr-export-host { position: fixed; left: -10000px; top: 0; width: 360px; height: 640px; container-type: size; pointer-events: none; }
.wr-static { opacity: 1; visibility: visible; }
.wr-static .wr-content { padding-top: calc(var(--u) * 12); padding-bottom: calc(var(--u) * 14); }
.wr-static.wr-lay-c .wr-content { padding-top: calc(var(--u) * 14); }
.wr-static .wr-half-a { padding-top: calc(var(--u) * 12); }
.wr-static .wr-half-b { padding-bottom: calc(var(--u) * 14); }
.wr-static .wr-hint { display: none; }
.wr-static .wr-foot { display: flex; position: absolute; left: calc(var(--u) * 7); right: calc(var(--u) * 7); bottom: calc(var(--u) * 5); z-index: 2; justify-content: space-between; gap: calc(var(--u) * 3);
	font: 700 calc(var(--u) * 2.8)/1.2 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--wr-dim); }
.wr-static.wr-lay-split .wr-foot { color: var(--wr-foot-ink, var(--wr-dim)); }
.wr-static .wr-foot span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- entry points (season header, home) ---------------------------------------------- */
.wr-entry { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.wr-entry-ball { width: 14px; height: 14px; border-radius: 50%; background: var(--ball); flex: none; }
.wr-entry-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---- votes, arcs and the loading card ---------------------------------------------------------- */
.wr-vote { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); width: 100%; text-align: left; }
.wr-vote li { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 24%) auto; align-items: center; gap: calc(var(--u) * 2.2); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 3); background: color-mix(in srgb, var(--wr-fg) 9%, transparent); }
.wr-vote li.is-win { background: color-mix(in srgb, var(--wr-fg) 18%, transparent); }
.wr-vote .wr-pod-n { width: calc(var(--u) * 6.4); font-size: calc(var(--u) * 3.6); }
.wr-vote-name { display: flex; flex-direction: column; min-width: 0; font: 900 calc(var(--u) * 4)/1.1 var(--display); overflow: hidden; overflow-wrap: break-word; }
.wr-vote-name small { font: 600 calc(var(--u) * 2.6)/1.25 var(--ui); color: var(--wr-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wr-vote-bar { display: block; height: calc(var(--u) * 2.6); border-radius: 999px; background: color-mix(in srgb, var(--wr-fg) 10%, transparent); overflow: hidden; }
.wr-vote-bar i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--wr-fg) 55%, transparent); transform-origin: left center; }
.wr-vote li.is-win .wr-vote-bar i { background: var(--wr-fg); }
.wr-vote b { font: 400 calc(var(--u) * 5)/1 var(--score); min-width: calc(var(--u) * 9); text-align: right; }
.wr-slide.is-active .wr-vote-bar i { animation: wr-grow 1s .6s cubic-bezier(.2, .8, .2, 1) both; }
.wr-big small { font-size: calc(var(--u) * 3.2); }
.wr-arc { width: 100%; }
.wr-arc svg { display: block; width: 100%; height: auto; overflow: visible; }
.wr-arc .wr-arc-line { fill: none; stroke: var(--wr-fg); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; opacity: .8; }
.wr-arc .wr-arc-area { fill: var(--wr-fg); opacity: .12; }
.wr-arc .wr-arc-dot { fill: var(--wr-fg); opacity: .7; }
.wr-arc .wr-arc-now { fill: var(--wr-c2); stroke: var(--wr-fg); stroke-width: 2; }
.wr-arc .wr-arc-peak { fill: var(--wr-fg); }
.wr-arc text { font: 700 9px var(--ui); fill: var(--wr-dim); }
.wr-arc-axis { display: flex; justify-content: space-between; font: 700 calc(var(--u) * 2.8)/1 var(--ui); color: var(--wr-dim); margin-top: calc(var(--u) * 1); }
.wr-slide.is-active .wr-arc-line { animation: wr-draw 1.4s .4s ease-out both; }
@keyframes wr-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.wr-histload .wr-slide { opacity: 1; visibility: visible; }
.wr-note { font: 600 calc(var(--u) * 3)/1.35 var(--ui); color: var(--wr-dim); }

/* ---- season navigation ------------------------------------------------------------------- */
.wr-top-nav { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: calc(100% - 132px); pointer-events: auto; }
.wr-sbtn { min-width: 26px; height: 26px; padding: 0; font-size: 18px; line-height: 1; flex: none; }
.wr-sbtn-l { height: 26px; min-width: 0; padding: 0 8px; font-size: 12px; gap: 4px; flex: 0 1 auto; max-width: 100%; }
.wr-sbtn-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wr-sbtn-l i { font-style: normal; font-size: 10px; flex: none; }
.wr-counter { flex: none; white-space: nowrap; }
.wr-sp { position: absolute; z-index: 6; left: 10px; right: 10px; top: 52px; max-height: calc(100% - 118px); display: flex; flex-direction: column; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; user-select: text; }
.wr-sp[hidden] { display: none; }
.wr-sp-h { padding: 10px 14px 8px; font: 700 12px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.wr-sp-l { list-style: none; margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain; }
.wr-sp-r { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: baseline; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.wr-sp-r:hover, .wr-sp-r:focus-visible { background: var(--hover); text-decoration: none; outline: none; }
.wr-sp-r:focus-visible { box-shadow: inset 0 0 0 2px var(--link); }
.wr-sp-r.is-now { background: var(--accent-soft); }
.wr-sp-r b { font: 700 15px/1.2 var(--display); grid-row: span 2; }
.wr-sp-t { font: 600 13px/1.3 var(--ui); color: var(--dim); min-width: 0; overflow-wrap: anywhere; }
.wr-sp-g { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; }
.wr-sp-g:empty { display: none; }
.wr-sp-g em { font: 700 11px/1 var(--ui); font-style: normal; padding: 3px 7px; border-radius: 999px; background: var(--chip); color: var(--text); }
.wr-sp-g em.is-title { background: var(--gold-fill); color: #3a2f00; }
.wr-sp-open .wr-view { filter: saturate(.7); }
@media (max-width: 600px) { .wr-sp { left: 8px; right: 8px; top: 56px; max-height: calc(100% - 126px); } }
/* the seasons strip on the start slide */
.wr-sy-wrap { display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); width: 100%; min-width: 0; }
.wr-sy-cap { font: 700 calc(var(--u) * 2.8)/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--wr-dim); }
.wr-sy-row { display: flex; gap: calc(var(--u) * 1.4); overflow-x: auto; padding: calc(var(--u) * .8) 2px calc(var(--u) * 1.4); scrollbar-width: thin; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.wr-sy { flex: none; font: 700 calc(var(--u) * 3.2)/1 var(--ui); padding: calc(var(--u) * 1.7) calc(var(--u) * 2.6); border-radius: 999px; color: var(--wr-fg); background: color-mix(in srgb, var(--wr-fg) 14%, transparent); text-decoration: none; position: relative; }
.wr-sy:hover, .wr-sy:focus-visible { background: color-mix(in srgb, var(--wr-fg) 28%, transparent); }
.wr-sy.is-now { background: var(--wr-fg); color: var(--wr-bgc); }
.wr-sy.is-title::after { content: ""; position: absolute; right: calc(var(--u) * .3); top: calc(var(--u) * .2); width: calc(var(--u) * 1.8); aspect-ratio: 1; border-radius: 50%; background: var(--gold-fill); box-shadow: 0 0 0 calc(var(--u) * .3) color-mix(in srgb, var(--wr-bgc) 80%, transparent); }
.wr-sy.is-best { box-shadow: inset 0 -2px 0 currentColor; }

/* ---- the deck: slide-count control and fitting (wrapped-deck.js) ---------------------------------------------- */
.wr-top-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-top-b { flex: none; }
.wr-nsel {
	-webkit-appearance: none; appearance: none; border: 0; margin: 0; height: 100%; padding: 0 16px 0 2px; cursor: pointer;
	font: 700 13px/1 var(--ui); color: inherit; background-color: transparent;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 7px center, right 3px center; background-size: 4px 4px; background-repeat: no-repeat;
}
.wr-nsel:focus { outline: none; }
.wr-nsel option { color: var(--text); background: var(--panel); }
/* Long names, long sentences and big numbers wrap instead of running off the slide. */
.wr-content, .wr-content * { overflow-wrap: break-word; }
.wr-content > *, .wr-duo > *, .wr-chips > *, .wr-grid > *, .wr-facts li, .wr-hero > * { min-width: 0; max-width: 100%; }
.wr-name, .wr-line, .wr-small, .wr-sub, .wr-head, .wr-facts li, .wr-chip b, .wr-chip span, .wr-stamp span, .wr-mega small { overflow-wrap: anywhere; }
.wr-stamp { max-width: 100%; }
.wr-content svg, .wr-content img { max-width: 100%; }
/* while a shown slide is re-measured (resize), its entrance animation is off so the boxes are where they settle */
.wr-measure, .wr-measure * { animation: none !important; transition: none !important; transform: none !important; translate: none !important; }
.wr-chips { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.wr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* WrappedDeck.fit measures without word breaking first */
.wr-strict .wr-content, .wr-strict .wr-content * { overflow-wrap: normal !important; word-break: normal !important; }

/* ---- settings panel (⚙): slides, quiz, no spoilers ------------------------------------------------------- */
.wr-set-b { font-size: 17px; padding: 0; width: 34px; }
.wr-set-b[aria-expanded="true"] { background: color-mix(in srgb, var(--chrome) 30%, transparent); }
.wr-set { position: absolute; z-index: 6; right: 10px; top: 58px; width: min(320px, calc(100% - 20px)); display: flex; flex-direction: column; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; user-select: text; }
.wr-set[hidden] { display: none; }
.wr-set-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; cursor: pointer; }
.wr-set-r + .wr-set-r { border-top: 1px solid var(--line); }
.wr-set-r:hover { background: var(--hover); }
.wr-set-r > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wr-set-r b { font: 700 14px/1.2 var(--ui); }
.wr-set-r small { font: 500 12px/1.35 var(--ui); color: var(--dim); }
.wr-set-c { flex: none; width: 20px; height: 20px; accent-color: var(--link); cursor: pointer; }
.wr-set .wr-nsel { flex: none; height: 32px; min-width: 64px; padding: 0 22px 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background-color: var(--bg, transparent); background-position: right 12px center, right 8px center; }
.wr-set .wr-nsel:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.wr-set-open .wr-view { filter: saturate(.7); }
.wr-set-k { padding: 9px 14px 11px; border-top: 1px solid var(--line); font: 500 12px/1.45 var(--ui); color: var(--dim); }
.wr-set-k.is-only { border-top: 0; }
@media (pointer: coarse) { .wr-set-k { display: none; } }
@media (max-width: 600px) { .wr-set { right: 8px; top: 56px; width: calc(100% - 16px); } }
/* bottom buttons: short labels on a phone (flex items lose their spaces: the gap is a margin) */
.wr-bl-g { margin-left: .3em; }
.wr-bs { display: none; }
@media (max-width: 430px) {
	.wr-bl { display: none; }
	.wr-bs { display: inline; }
	.wr-tools { gap: 6px; }
	.wr-tools .wr-btn-text { padding: 0 12px; }
}
/* no spoilers: the season picker does not name this season's champion */
.wr-nospoil .wr-sp-spoil { visibility: hidden; }
/* ---- quiz score ----------------------------------------------------------------------------------------- */
.wr-qs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); width: 100%; text-align: left; }
.wr-qs li { display: grid; grid-template-columns: calc(var(--u) * 6) minmax(0, 1fr); gap: calc(var(--u) * 2); align-items: start; }
.wr-qs-m { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; font: 800 calc(var(--u) * 3.4)/1 var(--ui); background: color-mix(in srgb, var(--wr-fg) 14%, transparent); }
.wr-qs li.is-right .wr-qs-m { background: var(--wr-fg); color: var(--wr-bgc); }
.wr-qs li.is-miss .wr-qs-m { opacity: .6; }
.wr-qs-q { display: flex; flex-direction: column; gap: calc(var(--u) * .5); font: 600 calc(var(--u) * 3.1)/1.3 var(--ui); color: var(--wr-dim); overflow-wrap: anywhere; }
.wr-qs-q b { font: 800 calc(var(--u) * 3.6)/1.2 var(--ui); color: var(--wr-fg); }

/* Spotlight captions that explain a stat (wrapped-spots.js noteOf): quieter than the facts, dropped first by the fit step. */
.wr-gloss { font-size: calc(var(--u) * 2.8); font-weight: 500; opacity: .85; max-width: 52ch; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 22%, transparent); padding-top: calc(var(--u) * 1.2); }
.wr-gloss[hidden] { display: none; }

/* Shared Wrapped (#/wshare): the note in the bottom bar */
.wr-share-note { flex: 1; min-width: 0; text-align: center; font-size: 12px; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }