/* =============================================================================
   Winner block — the finished result of a closed vote.

   Four looks share one set of atoms (face window, holo badge, stat tiles, CTA
   row): a Champion Split, b Champion Poster, c Podium, d Result Sheet.

   Two rules worth knowing before editing:

   1. THE FACE WINDOW. Nominee photos on this site are pre-designed cards that
      already read "NOMINEE" and "VOTE NOW" — nothing may be composited over
      them. Every photo here is cropped by the same 308%/--np-* formula the
      standings avatars use, which frames the idol's face and pushes the card
      chrome outside the box. Do not replace it with object-fit alone.

   2. CONTAINER QUERIES, NOT VIEWPORT ONES. The block also renders inside
      narrow columns, so its breakpoints key off its OWN width. A viewport
      media query fires far too late there and the layout clips — the same trap
      documented for the admin panels.

   All colour comes from the --sa-* tokens, so the block follows every style
   preset (Nova / Ember / Cobalt / …) automatically.
   ========================================================================== */

.sa-win {
	container-type: inline-size;
	margin: 2rem 0;
	font-family: var(--sa-font-body);
	color: var(--sa-text);
	text-align: left;
}

/* ── The face window ─────────────────────────────────────────────────────── */
.sa-win__face, .sa-win__pface, .sa-win__cface, .sa-win__dph, .sa-win__dav {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--sa-surface-2);
}
.sa-win__face--photo img, .sa-win__pface--photo img, .sa-win__cface--photo img,
.sa-win__dph--photo img, .sa-win__dav--photo img {
	position: absolute;
	width: calc(308% * var(--np-zoom, 1));
	height: calc(308% * var(--np-zoom, 1));
	max-width: none;
	max-height: none;
	left: calc(var(--np-fx, .5) * (1 - 3.08 * var(--np-zoom, 1)) * 100%);
	top: calc(var(--np-fy, .4) * (1 - 3.08 * var(--np-zoom, 1)) * 100%);
	object-fit: cover;
	object-position: center 40%;
	margin: 0;
	border-radius: 0;
}
/* Initials fallback when a nominee has no photo at all. */
.sa-win__face, .sa-win__pface, .sa-win__cface, .sa-win__dph, .sa-win__dav {
	display: grid;
	place-items: center;
	font-family: var(--sa-font-display);
	font-weight: 800;
	color: var(--sa-text-muted);
	letter-spacing: .02em;
}

/* ── Holo badge ──────────────────────────────────────────────────────────── */
.sa-win__badge {
	display: inline-flex;
	align-items: center;
	gap: .42em;
	font-family: var(--sa-font-display);
	font-size: .7rem;
	font-weight: 900;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sa-bg);
	padding: .42em .9em;
	border-radius: var(--sa-radius-pill, 999px);
	position: relative;
	overflow: hidden;
	background: linear-gradient(100deg, var(--sa-holo-1), var(--sa-holo-2), var(--sa-holo-3), var(--sa-holo-1));
	background-size: 300% 100%;
	/* Finite on purpose: five passes then stop, like every other shine in the
	   theme. An infinite loop next to body copy is exhausting to read past. */
	animation: sa-win-holo 3.6s linear 5;
	box-shadow: 0 4px 18px color-mix(in srgb, var(--sa-holo-1) 32%, transparent);
}
@keyframes sa-win-holo { to { background-position: 300% 0; } }
.sa-win__bh { width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; }

/* ── Shared type + tiles ─────────────────────────────────────────────────── */
.sa-win__name, .sa-win__pname, .sa-win__dnm {
	font-family: var(--sa-font-display);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1;
	margin: 0;
	color: var(--sa-text);
}
.sa-win__grp, .sa-win__pgrp, .sa-win__dgrp {
	display: block;
	font-size: .42em;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--sa-violet-light);
	margin-top: .55em;
}

.sa-win__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: .5rem;
	margin: 1.05rem 0;
}
.sa-win__stat {
	background: var(--sa-surface-1);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius-sm, 12px);
	padding: .62rem .68rem;
	min-width: 0;
}
.sa-win__stat b {
	display: block;
	font-family: var(--sa-font-display);
	font-size: clamp(1rem, 3.4cqi, 1.3rem);
	font-weight: 800;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	background: var(--sa-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sa-win__stat span {
	display: block;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sa-text-dim);
	margin-top: .26rem;
	/* Wrap, never ellipsis. These captions ("Vote share", "Total cast") are the
	   only thing naming the number above them, so a clipped one is useless —
	   two short lines in a narrow tile beat "VOTE SHA…". */
	white-space: normal;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.sa-win__runner {
	margin: 0 0 1rem;
	font-size: .81rem;
	color: var(--sa-text-muted);
	font-variant-numeric: tabular-nums;
	padding-top: .85rem;
	border-top: 1px solid var(--sa-border);
}
.sa-win__runner b { color: var(--sa-text); font-weight: 700; }

.sa-win__cta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
/* The block lives inside .entry-content, where prose link rules outrank a plain
   class selector — hence the explicit colour/decoration reset on our own links. */
.sa-win a.sa-win__btn,
.sa-win a.sa-win__poll,
.sa-win a.sa-win__dlink { text-decoration: none; box-shadow: none; }
.sa-win__btn {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-size: .81rem;
	font-weight: 700;
	padding: .62em 1.1em;
	border-radius: var(--sa-radius-pill, 999px);
	border: 1px solid transparent;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.sa-win a.sa-win__btn--p { background: var(--sa-gradient); color: var(--sa-on-accent, #fff); }
.sa-win a.sa-win__btn--p:hover { transform: translateY(-1px); box-shadow: var(--sa-glow); color: var(--sa-on-accent, #fff); }
.sa-win__ch { width: 1.02em; height: 1.02em; fill: currentColor; }
.sa-win__share { display: inline-flex; align-items: center; }

/* =============================================================================
   a — Champion Split
   ========================================================================== */
.sa-win__box--a {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 196px) minmax(0, 1fr);
	gap: clamp(1rem, 3cqi, 1.7rem);
	align-items: center;
	border: 1px solid var(--sa-border-strong);
	border-radius: var(--sa-radius, 16px);
	padding: clamp(1.05rem, 3cqi, 1.6rem);
	box-shadow: var(--sa-shadow-card);
	overflow: hidden;
	background:
		radial-gradient(120% 140% at 88% 0%, color-mix(in srgb, var(--sa-gold) 14%, transparent), transparent 58%),
		linear-gradient(160deg, var(--sa-surface-2), var(--sa-surface-1) 62%);
}
.sa-win__box--a::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sa-violet-light) 12%, transparent), transparent);
	transform: translateX(-100%);
	animation: sa-win-sweep 3.4s ease-in-out 5;
}
@keyframes sa-win-sweep { 60%, 100% { transform: translateX(100%); } }

/* ── a's card header: the centred "FINAL RESULT ✦ 01/07/2026" masthead ───────
   Spans BOTH grid columns and sits above the split, so the card opens with one
   centred statement instead of a caption tucked into the text column. Everything
   below it stays left-aligned — this row is the only centred thing here. */
.sa-win__hd {
	grid-column: 1 / -1;
	display: grid;
	/* Two flexible gutters around an auto-width label group: the group is exactly
	   centred whatever its length, and the hairlines take whatever is left.
	   minmax(0, 1fr) never a bare 1fr — a bare one refuses to shrink below its
	   content and pushes the row wider than the card. */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(.55rem, 2.2cqi, 1rem);
	/* Above the card's sweep overlay (.sa-win__box--a::before), which would
	   otherwise wash the gradient label out each time it passes. */
	position: relative;
	z-index: 2;
	margin: 0 0 clamp(.9rem, 2.6cqi, 1.35rem);
	padding-bottom: clamp(.7rem, 2.2cqi, 1.05rem);
	border-bottom: 1px solid color-mix(in srgb, var(--sa-border) 72%, transparent);
}
/* Hairlines that fade out towards the card edges, so they read as one line
   passing behind the label rather than two bars butting into the padding. */
.sa-win__hdrule {
	display: block;
	min-width: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sa-border-strong));
}
.sa-win__hd .sa-win__hdrule:last-child {
	background: linear-gradient(90deg, var(--sa-border-strong), transparent);
}
.sa-win__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(.45rem, 1.6cqi, .72rem);
	flex-wrap: wrap;
	min-width: 0;
	margin: 0;
	text-align: center;
}
.sa-win__ek {
	font-family: var(--sa-font-display);
	font-size: clamp(.72rem, 2.1cqi, .8rem);
	font-weight: 900;
	letter-spacing: .26em;
	text-transform: uppercase;
	line-height: 1.25;
	/* Tracking adds a trailing space after the last letter; pulling it back keeps
	   the optical gap to the sparkle equal to the one on the other side. */
	margin-inline-end: -.26em;
	/* The plain colour is declared FIRST and stays as the fallback: a context
	   where background-clip:text does not apply must show the label, not a hole. */
	color: var(--sa-pink);
	background: var(--sa-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
	.sa-win__ek { background: none; -webkit-text-fill-color: currentColor; }
}
@media (forced-colors: active) {
	.sa-win__ek { background: none; -webkit-text-fill-color: currentColor; forced-color-adjust: auto; }
}
.sa-win__esep {
	flex: 0 0 auto;
	font-size: .68rem;
	line-height: 1;
	color: var(--sa-gold);
	filter: drop-shadow(0 0 7px color-mix(in srgb, var(--sa-gold) 42%, transparent));
}
.sa-win__ed {
	font-size: clamp(.63rem, 1.9cqi, .7rem);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.25;
	color: var(--sa-text-dim);
	font-variant-numeric: tabular-nums;
}

/* KEEP THE 4:5 RATIO — do not stretch this photo to fill the column height.
   The crop window is tuned so a nominee card's own chrome falls outside it at
   4:5. Make the frame taller (e.g. flex:1 against a tall body) and it starts
   showing MORE of the source vertically, which brings the card's gold inner
   photo-frame back into view as a stray line across the top. Tested: 196x460
   reveals it, 196x245 does not. A little dead space beside a tall body is the
   cheaper problem. */
.sa-win__media { position: relative; min-width: 0; }
.sa-win__box--a .sa-win__face {
	aspect-ratio: 4 / 5;
	border-radius: var(--sa-radius-sm, 12px);
	border: 1px solid var(--sa-border-strong);
}
.sa-win__rank {
	position: absolute;
	left: -6px;
	top: -6px;
	z-index: 2;
	font-family: var(--sa-font-display);
	font-weight: 900;
	font-size: .76rem;
	color: var(--sa-on-accent, #fff);
	background: var(--sa-gradient);
	padding: .34em .6em;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.sa-win__body { min-width: 0; position: relative; z-index: 2; }
.sa-win__box--a .sa-win__name { font-size: clamp(1.85rem, 6.4cqi, 2.85rem); margin-top: .65rem; }
.sa-win__for { margin: .7rem 0 0; font-size: .85rem; color: var(--sa-text-muted); line-height: 1.55; }
.sa-win a.sa-win__poll {
	color: var(--sa-text);
	font-weight: 700;
	border-bottom: 1px solid var(--sa-border-strong);
}
.sa-win a.sa-win__poll:hover { color: var(--sa-violet-light); border-bottom-color: currentColor; }

@container (max-width: 559px) {
	.sa-win__box--a { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 1rem; }
	.sa-win__media { width: min(56%, 182px); margin: 0 auto; }
	/* The header centres itself at every width, so it needs nothing here — only
	   the CTA row has to be told. */
	.sa-win__box--a .sa-win__cta { justify-content: center; }
	.sa-win__hd { gap: .5rem; margin-bottom: .95rem; }
}
@container (max-width: 379px) {
	/* No room left for flanking rules: drop them and let the label group have the
	   whole row. Still one centred column, still the same type. */
	.sa-win__hd { grid-template-columns: minmax(0, 1fr); }
	.sa-win__hdrule { display: none; }
	.sa-win__ek { letter-spacing: .2em; margin-inline-end: -.2em; }
}

/* =============================================================================
   b — Champion Poster
   ========================================================================== */
.sa-win__box--b {
	position: relative;
	/* Capped deliberately. The crop shows only ~1/4 of the source card's width,
	   so a wider poster upscales that slice past what the plugin's largest file
	   (1080px) can cover and goes soft. ~380px keeps it sharp. */
	max-width: 380px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--sa-border-strong);
	box-shadow: var(--sa-shadow-card);
	background: linear-gradient(170deg, var(--sa-surface-2), var(--sa-bg-2) 70%);
}
.sa-win__box--b::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	border-radius: 20px;
	padding: 1px;
	background: linear-gradient(150deg, var(--sa-holo-1), transparent 32%, transparent 68%, var(--sa-holo-2));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.sa-win__phead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	padding: .85rem 1rem .7rem;
}
.sa-win__wm {
	font-family: var(--sa-font-display);
	font-size: .58rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sa-text-dim);
	text-align: right;
	line-height: 1.55;
}
.sa-win__wm b { display: block; color: var(--sa-text); }
.sa-win__pface {
	/* 4:5, matching every other frame here. A square shows relatively more of
	   the source's WIDTH, which brings the card's side edges back into the
	   window even at zoom 1.3 — visible as a gold sliver down the right side. */
	aspect-ratio: 4 / 5;
	margin: 0 1rem;
	border-radius: 14px;
	border: 1px solid var(--sa-border-strong);
}
.sa-win__plow { padding: 1.1rem 1rem 1.2rem; text-align: center; position: relative; z-index: 2; }
.sa-win__word {
	font-family: var(--sa-font-display);
	font-weight: 900;
	text-transform: uppercase;
	line-height: .86;
	font-size: clamp(2.9rem, 13.5cqi, 4.1rem);
	letter-spacing: -.035em;
	margin: 0 0 .16em;
	background: linear-gradient(180deg, #fff 6%, var(--sa-gold-2) 52%, var(--sa-violet) 116%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 6px 26px color-mix(in srgb, var(--sa-gold) 40%, transparent));
}
.sa-win__pname { font-size: clamp(1.55rem, 6.6cqi, 2.15rem); line-height: 1.04; }
.sa-win__pgrp { color: var(--sa-gold-2); font-size: .4em; letter-spacing: .18em; }
.sa-win__prule {
	display: block;
	width: 52px;
	height: 2px;
	margin: .9rem auto .75rem;
	border-radius: 2px;
	background: var(--sa-gradient);
	opacity: .9;
}
.sa-win__pcat {
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--sa-text-muted);
	margin: 0;
}
.sa-win__rail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 1px;
	background: var(--sa-border);
	border-top: 1px solid var(--sa-border-strong);
}
.sa-win__rail .sa-win__stat {
	background: var(--sa-bg-2);
	border: 0;
	border-radius: 0;
	padding: .75rem .5rem;
	text-align: center;
}
.sa-win__rail .sa-win__stat b { font-size: clamp(.92rem, 3.2cqi, 1.1rem); }
.sa-win__rail .sa-win__stat span { font-size: .57rem; }
.sa-win__pfoot {
	padding: .8rem 1rem;
	border-top: 1px solid var(--sa-border);
	background: var(--sa-bg-2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .7rem;
	flex-wrap: wrap;
}
.sa-win__pfoot .sa-win__runner { margin: 0; padding: 0; border: 0; font-size: .75rem; }
.sa-win__pfoot .sa-win__cta { margin: 0; }

/* =============================================================================
   c — Podium
   ========================================================================== */
.sa-win__box--c {
	background: linear-gradient(180deg, var(--sa-surface-1), var(--sa-bg-2));
	border: 1px solid var(--sa-border-strong);
	border-radius: var(--sa-radius, 16px);
	overflow: hidden;
	box-shadow: var(--sa-shadow-card);
}
.sa-win__chead {
	padding: clamp(1rem, 3cqi, 1.35rem) clamp(1rem, 3cqi, 1.5rem) .4rem;
	text-align: center;
	background: radial-gradient(100% 120% at 50% 0%, color-mix(in srgb, var(--sa-gold) 13%, transparent), transparent 62%);
}
.sa-win__cttl {
	font-family: var(--sa-font-display);
	font-weight: 800;
	letter-spacing: -.02em;
	margin: .5rem 0 .3rem;
	font-size: clamp(1.12rem, 4cqi, 1.55rem);
	color: var(--sa-text);
}
.sa-win__csub { margin: 0; font-size: .81rem; color: var(--sa-text-muted); font-variant-numeric: tabular-nums; }
.sa-win__podium {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	gap: clamp(.4rem, 1.6cqi, .85rem);
	padding: 1.35rem clamp(.7rem, 2.5cqi, 1.5rem) 0;
}
.sa-win__pod { min-width: 0; text-align: center; }
.sa-win__pod--1 { order: 2; }
.sa-win__pod--2 { order: 1; }
.sa-win__pod--3 { order: 3; }
.sa-win__cph { position: relative; margin: 0 auto .55rem; }
.sa-win__cface { aspect-ratio: 4 / 5; border-radius: 14px; border: 1px solid var(--sa-border); }
.sa-win__pod.is-first .sa-win__cface {
	border-color: var(--sa-gold);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--sa-gold) 35%, transparent),
		0 10px 34px color-mix(in srgb, var(--sa-gold) 24%, transparent);
}
.sa-win__pod:not(.is-first) .sa-win__cph { width: 87%; margin-inline: auto; filter: saturate(.9); }
.sa-win__crk {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 6px;
	z-index: 2;
	font-family: var(--sa-font-display);
	font-weight: 900;
	font-size: .68rem;
	color: var(--sa-text);
	background: color-mix(in srgb, var(--sa-bg) 82%, transparent);
	border: 1px solid var(--sa-border-strong);
	padding: .2em .6em;
	border-radius: var(--sa-radius-pill, 999px);
	backdrop-filter: blur(6px);
}
.sa-win__pod.is-first .sa-win__crk { color: var(--sa-on-accent, #fff); background: var(--sa-gradient); border-color: transparent; }
.sa-win__cnm {
	font-family: var(--sa-font-display);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.2;
	font-size: clamp(.84rem, 2.9cqi, 1.05rem);
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--sa-text);
}
.sa-win__pod.is-first .sa-win__cnm { font-size: clamp(1.02rem, 3.8cqi, 1.38rem); }
.sa-win__cgrp {
	display: block;
	font-size: .61rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sa-text-dim);
	margin-top: .3em;
}
.sa-win__cvt { margin: .42rem 0 0; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--sa-text-muted); }
.sa-win__cvt b { color: var(--sa-text); font-weight: 700; }
.sa-win__pod.is-first .sa-win__cvt b {
	background: var(--sa-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sa-win__cbar {
	height: 5px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--sa-text-dim) 22%, transparent);
	overflow: hidden;
	margin-top: .5rem;
}
.sa-win__cbar i { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--sa-violet-light) 55%, transparent); }
.sa-win__pod.is-first .sa-win__cbar i { background: var(--sa-gradient); }
.sa-win__cfoot {
	margin-top: 1.25rem;
	padding: .88rem 1.1rem;
	border-top: 1px solid var(--sa-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .7rem;
	flex-wrap: wrap;
	background: var(--sa-bg-2);
}
.sa-win__cfoot p { margin: 0; font-size: .76rem; color: var(--sa-text-muted); font-variant-numeric: tabular-nums; }

@container (max-width: 479px) {
	.sa-win__podium { grid-template-columns: minmax(0, 1fr); gap: .65rem; padding-top: 1.05rem; }
	.sa-win__pod--1 { order: 1; }
	.sa-win__pod--2 { order: 2; }
	.sa-win__pod--3 { order: 3; }
	.sa-win__pod {
		display: grid;
		grid-template-columns: minmax(0, 62px) minmax(0, 1fr);
		gap: .15rem .8rem;
		text-align: left;
		align-items: center;
		align-content: center;
	}
	.sa-win__pod.is-first { grid-template-columns: minmax(0, 92px) minmax(0, 1fr); }
	.sa-win__cph { margin: 0; width: 100% !important; grid-row: span 3; }
	.sa-win__crk { left: 6px; transform: none; }
	/* Name, votes and bar all belong to the text column — without this they wrap
	   back under the photo and each row reads as two broken halves. */
	.sa-win__cnm, .sa-win__cvt, .sa-win__cbar { grid-column: 2; }
	.sa-win__cvt { margin-top: .3rem; }
}

/* =============================================================================
   d — Result Sheet
   ========================================================================== */
.sa-win__box--d {
	background: var(--sa-surface-1);
	border: 1px solid var(--sa-border-strong);
	border-radius: var(--sa-radius, 16px);
	overflow: hidden;
	box-shadow: var(--sa-shadow-card);
}
.sa-win__dhd {
	padding: clamp(.95rem, 3cqi, 1.25rem) clamp(1rem, 3cqi, 1.4rem);
	border-bottom: 1px solid var(--sa-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .8rem;
	flex-wrap: wrap;
	background: linear-gradient(120deg, color-mix(in srgb, var(--sa-violet) 14%, transparent), transparent 62%);
}
.sa-win__dk {
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sa-pink);
	margin: 0 0 .3rem;
}
.sa-win__dk--gold { color: var(--sa-gold); margin: 0; }
.sa-win__dt {
	font-family: var(--sa-font-display);
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0;
	font-size: clamp(1rem, 3.4cqi, 1.3rem);
	line-height: 1.2;
	color: var(--sa-text);
}
.sa-win__dwin {
	display: grid;
	grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
	gap: clamp(.85rem, 2.6cqi, 1.15rem);
	align-items: center;
	padding: clamp(1rem, 3cqi, 1.3rem);
	background: radial-gradient(120% 160% at 0% 50%, color-mix(in srgb, var(--sa-gold) 13%, transparent), transparent 60%);
}
.sa-win__dph {
	aspect-ratio: 4 / 5;
	border-radius: 12px;
	border: 1px solid var(--sa-gold);
	box-shadow: 0 8px 26px color-mix(in srgb, var(--sa-gold) 22%, transparent);
}
.sa-win__dwb { min-width: 0; }
.sa-win__dnm { margin: .45rem 0 0; font-size: clamp(1.38rem, 5.4cqi, 2rem); line-height: 1.04; letter-spacing: -.022em; }
.sa-win__dbig { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: .65rem 0 0; }
.sa-win__dbig b {
	font-family: var(--sa-font-display);
	font-size: clamp(1.12rem, 4.2cqi, 1.55rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	background: var(--sa-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sa-win__dbig span { font-size: .77rem; color: var(--sa-text-muted); }

.sa-win__dlist { list-style: none; margin: 0; padding: 0 clamp(.85rem, 3cqi, 1.4rem) .35rem; border-top: 1px solid var(--sa-border); }
.sa-win__drow { margin: 0; border-bottom: 1px solid color-mix(in srgb, var(--sa-border) 55%, transparent); }
.sa-win__drow::before { display: none; }
.sa-win__drow:last-child { border-bottom: 0; }
.sa-win__dlink {
	display: grid;
	grid-template-columns: minmax(0, 20px) minmax(0, 34px) minmax(0, 1fr) minmax(0, auto);
	gap: .62rem;
	align-items: center;
	padding: .62rem 0;
	color: inherit;
}
.sa-win a.sa-win__dlink:hover .sa-win__dln b { color: var(--sa-violet-light); }
.sa-win__drk {
	font-family: var(--sa-font-display);
	font-weight: 800;
	font-size: .8rem;
	color: var(--sa-text-dim);
	font-variant-numeric: tabular-nums;
}
.sa-win__drow.is-first .sa-win__drk { color: var(--sa-gold); }
.sa-win__dav { aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid var(--sa-border); font-size: .62rem; }
.sa-win__drow.is-first .sa-win__dav { border-color: var(--sa-gold); }
.sa-win__dmid { display: block; min-width: 0; }
.sa-win__dln { display: flex; align-items: center; gap: .42rem; flex-wrap: wrap; min-width: 0; }
.sa-win__dln b { font-weight: 700; font-size: .86rem; overflow-wrap: anywhere; transition: color .18s ease; }
.sa-win__dln i {
	font-style: normal;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--sa-text-dim);
}
.sa-win__dbar {
	display: block;
	height: 4px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--sa-text-dim) 20%, transparent);
	overflow: hidden;
	margin-top: .38rem;
}
.sa-win__dbar i { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--sa-violet-light) 50%, transparent); }
.sa-win__drow.is-first .sa-win__dbar i { background: var(--sa-gradient); }
.sa-win__dnum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-win__dnum b { display: block; font-size: .84rem; font-weight: 700; }
.sa-win__dnum span { display: block; font-size: .68rem; color: var(--sa-text-dim); margin-top: .08rem; }
.sa-win__dft {
	padding: .85rem clamp(1rem, 3cqi, 1.4rem);
	border-top: 1px solid var(--sa-border);
	background: var(--sa-bg-2);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .8rem;
	flex-wrap: wrap;
}
.sa-win__dvf { display: flex; align-items: center; gap: .42rem; margin: 0; font-size: .73rem; color: var(--sa-text-dim); }
.sa-win__vfi { width: 1em; height: 1em; fill: var(--sa-gold); flex: 0 0 auto; }

@container (max-width: 439px) {
	.sa-win__dwin { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
	.sa-win__dph { width: min(50%, 142px); }
	.sa-win__dbig { justify-content: center; }
	.sa-win__dlink { grid-template-columns: minmax(0, 18px) minmax(0, 30px) minmax(0, 1fr) minmax(0, auto); gap: .5rem; }
}

/* ── Motion ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.sa-win__badge, .sa-win__box--a::before { animation: none; }
	.sa-win__btn, .sa-win__dln b { transition: none; }
}