/* ==========================================================================
   WINNERA COCKPIT — Premium Black / White / Gold RPG redesign.
   ==========================================================================
   PRODUCTION MIGRATION: loaded on BOTH /account/my-winnera (the real,
   live, player-facing route) and /winnera-cockpit-preview (kept as an
   admin-only comparison/rollback reference) -- see index.php's
   $wnUsesCockpitShell. Every rule is scoped under .wn-cockpit-preview so
   nothing here can leak into or override any other production component.

   V2 REPLACES V1's palette entirely: no bronze, no amber, no sandstone, no
   warm-brown surfaces. Backgrounds are pure grayscale blacks; the ONLY
   warm color anywhere on this page is gold, reserved for value/prestige/
   selection/progress, never for body text or panel fills. No new :root
   tokens — everything below is a fresh --wncp-* custom property declared
   on .wn-cockpit-preview only. --wn-font-display (Winnera Display) is
   used only for the player name and the medallion figure — the strongest
   moments — everything else uses the existing --wn-font-body/-mono, per
   the "use decorative type selectively" instruction.
   ========================================================================== */

.wn-cockpit-preview {
	/* ---- Black / White / Gold token system --------------------------- */
	--wncp-black: #0A0A0A;
	--wncp-obsidian: #121212;
	--wncp-charcoal: #1B1B1B;
	--wncp-charcoal-raised: #232323;
	--wncp-line: rgba(212, 175, 55, 0.18);
	--wncp-line-strong: rgba(212, 175, 55, 0.4);

	--wncp-white: #FFFFFF;
	--wncp-white-soft: #E9E9E9;
	--wncp-white-muted: #9C9C9C;

	--wncp-gold: #D4AF37;
	--wncp-gold-bright: #F0CC5C;
	--wncp-gold-deep: #A8842A;
	--wncp-gold-dim: rgba(212, 175, 55, 0.55);

	--wncp-online: #4ADE80;

	background: var(--wncp-black);
	color: var(--wncp-white-soft);
	font-family: var(--wn-font-body);
	min-height: 100vh;
	padding: var(--wn-space-6) var(--wn-gutter, var(--wn-space-4)) var(--wn-space-10);
}

.wn-cockpit-preview * { box-sizing: border-box; }

/* ---- Banner --------------------------------------------------------------- */

.wn-cp__banner {
	max-width: 1600px;
	margin: 0 auto var(--wn-space-6);
	padding-bottom: var(--wn-space-4);
	border-bottom: 1px solid var(--wncp-line);
}
.wn-cp__banner-kicker {
	font-size: var(--wn-text-tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wncp-gold);
	margin: 0 0 var(--wn-space-2);
}
.wn-cp__banner-title {
	font-family: var(--wn-font-display);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
	color: var(--wncp-white);
	margin: 0 0 var(--wn-space-2);
}
.wn-cp__banner-note {
	max-width: 72ch;
	margin: 0;
	font-size: var(--wn-text-small);
	color: var(--wncp-white-muted);
	line-height: 1.6;
}

.wn-cp__alert {
	max-width: 1600px;
	margin: 0 auto var(--wn-space-5);
	padding: var(--wn-space-3) var(--wn-space-4);
	border: 1px solid var(--wncp-gold-deep);
	color: var(--wncp-gold-bright);
	font-size: var(--wn-text-small);
}

.wn-cp__empty {
	max-width: 1600px;
	margin: 0 auto;
	padding: var(--wn-space-8);
	text-align: center;
	color: var(--wncp-white-muted);
	border: 1px dashed var(--wncp-line-strong);
}

/* ---- Upper cockpit: asymmetric three-zone, center dominant ---------------- */

.wn-cp__upper {
	max-width: 1600px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr) 320px;
	gap: var(--wn-space-6);
	align-items: start;
}

.wn-cp__zone { min-width: 0; }
.wn-cp__zone--left,
.wn-cp__zone--right { display: flex; flex-direction: column; gap: var(--wn-space-5); }
.wn-cp__zone--center { display: flex; flex-direction: column; }

/* ---- Lower cockpit: full-width expansion ----------------------------------- */

.wn-cp__lower {
	max-width: 1600px;
	margin: var(--wn-space-6) auto 0;
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--wn-space-6);
	align-items: start;
}

.wn-cp-panel { background: var(--wncp-obsidian); border: 1px solid var(--wncp-line); padding: var(--wn-space-6); }
.wn-cp-panel__head { margin-bottom: var(--wn-space-5); }
.wn-cp-panel__title {
	font-size: var(--wn-text-tiny);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wncp-gold);
	margin: 0;
}

/* ==========================================================================
   LEFT ZONE — character identity + roster
   ========================================================================== */

.wn-cp-id {
	position: relative;
	text-align: center;
	padding: var(--wn-space-6) var(--wn-space-5) var(--wn-space-5);
	background: var(--wncp-obsidian);
	border: 1px solid var(--wncp-line);
}

.wn-cp-id__portrait-wrap {
	position: relative;
	width: 116px; height: 116px;
	margin: 0 auto var(--wn-space-4);
}
.wn-cp-id__laurel {
	position: absolute;
	inset: -22px;
	color: var(--wncp-gold-dim);
	pointer-events: none;
}
.wn-cp-laurel { width: 100%; height: 100%; display: block; }
.wn-cp-id__platform {
	position: absolute;
	bottom: -10px; left: 50%;
	width: 64px; height: 10px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(212,175,55,0.28), transparent 72%);
	filter: blur(1px);
}
.wn-cp-id__portrait {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%; height: 100%;
	object-fit: contain;
	image-rendering: pixelated;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 30%, var(--wncp-charcoal-raised), var(--wncp-black) 78%);
	box-shadow: 0 0 0 2px var(--wncp-gold-deep), 0 0 0 6px var(--wncp-black), 0 10px 24px rgba(0,0,0,0.6);
}
.wn-cp-id__portrait--crest {
	display: flex; align-items: center; justify-content: center;
	font-family: var(--wn-font-display);
	font-size: 1.75rem;
	color: var(--wncp-gold-bright);
}

.wn-cp-id__name { font-family: var(--wn-font-display); font-size: 1.375rem; color: var(--wncp-white); margin: 0 0 var(--wn-space-1); }
.wn-cp-id__line { margin: 0; font-size: var(--wn-text-small); color: var(--wncp-white-soft); }
.wn-cp-id__line--muted { color: var(--wncp-white-muted); }

.wn-cp-id__status {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: var(--wn-space-3);
	font-size: var(--wn-text-tiny);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wncp-white-muted);
}
.wn-cp-id__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--wncp-white-muted); display: inline-block; }
.wn-cp-id__status.is-online { color: var(--wncp-online); }
.wn-cp-id__status.is-online i { background: var(--wncp-online); box-shadow: 0 0 6px var(--wncp-online); }

.wn-cp-roster { padding: var(--wn-space-4); background: var(--wncp-obsidian); border: 1px solid var(--wncp-line); }
.wn-cp-roster__label { font-size: var(--wn-text-tiny); text-transform: uppercase; letter-spacing: 0.08em; color: var(--wncp-gold); margin: 0 0 var(--wn-space-3); }
.wn-cp-roster__list { list-style: none; margin: 0; padding: 0; }
.wn-cp-roster__list li { border-left: 2px solid transparent; }
.wn-cp-roster__list li.is-selected { border-left-color: var(--wncp-gold); background: rgba(212,175,55,0.06); }

.wn-cp-roster__entry {
	display: flex;
	align-items: center;
	gap: var(--wn-space-3);
	padding: var(--wn-space-2) var(--wn-space-3);
	color: var(--wncp-white-soft);
	text-decoration: none;
	font-size: var(--wn-text-small);
}
.wn-cp-roster__entry:hover { color: var(--wncp-gold-bright); }
.wn-cp-roster__mark { width: 6px; height: 6px; background: var(--wncp-gold); transform: rotate(45deg); flex: none; }
.wn-cp-roster__entry b { font-family: var(--wn-font-mono); font-size: var(--wn-text-tiny); color: var(--wncp-gold); width: 2.5ch; flex: none; }
.wn-cp-roster__entry span { flex: 1; }
.wn-cp-roster__entry small { color: var(--wncp-white-muted); font-size: var(--wn-text-tiny); }
.wn-cp-roster__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wncp-online); box-shadow: 0 0 6px var(--wncp-online); flex: none; }

/* ==========================================================================
   CENTER ZONE — hero identity + medallion (the dominant zone)
   ========================================================================== */

.wn-cp-hero {
	text-align: center;
	padding: var(--wn-space-8) var(--wn-space-6) var(--wn-space-7);
	background: radial-gradient(ellipse at 50% -10%, rgba(212, 175, 55, 0.07), transparent 62%), var(--wncp-obsidian);
	border: 1px solid var(--wncp-line);
	height: 100%;
}

.wn-cp-hero__eyebrow { font-size: var(--wn-text-tiny); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wncp-gold); margin: 0 0 var(--wn-space-3); }
.wn-cp-hero__name {
	font-family: var(--wn-font-display);
	font-size: clamp(2.5rem, 1.7rem + 3vw, 4rem);
	color: var(--wncp-white);
	margin: 0;
	letter-spacing: 0.01em;
	text-shadow: 0 0 40px rgba(212,175,55,0.18);
}
.wn-cp-hero__sub { margin: var(--wn-space-2) 0 var(--wn-space-7); color: var(--wncp-white-muted); font-size: var(--wn-text-lead); }

/* ---- Horizontal EXP progression track (replaces the circular medallion) --
   Premium RPG advancement line, not a web progress bar: a thin graphite
   base, a gold active section from the stage's start up to the current
   level, small gold checkpoint markers, a tagged current-level marker, and
   one restrained glow on that marker only -- no chunky bar, no neon, no
   Bootstrap look. All numerals use --wn-font-mono per the medallion's own
   PHASE B FIX precedent below: --wn-font-display's digit glyphs silently
   fail to rasterize in real render paths, confirmed live via headless
   Chromium (was showing a bare X instead of "50x"). ------------------- */

.wn-cp-track {
	width: 100%;
	max-width: 640px;
	margin: 0 auto var(--wn-space-6);
	text-align: left;
}
.wn-cp-track--fallback { text-align: center; }

.wn-cp-track__rate {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: var(--wn-space-5);
}
.wn-cp-track__rate-value {
	font-family: var(--wn-font-mono);
	font-weight: 700;
	font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem);
	color: var(--wncp-gold-bright);
	line-height: 1;
	text-shadow: 0 0 28px rgba(212, 175, 55, 0.28);
}
.wn-cp-track__rate-label {
	margin-top: var(--wn-space-2);
	font-size: var(--wn-text-tiny);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wncp-white-muted);
}

.wn-cp-track__line-row {
	display: flex;
	align-items: center;
	gap: var(--wn-space-3);
}

.wn-cp-track__cap {
	flex: none;
	font-family: var(--wn-font-mono);
	font-size: var(--wn-text-tiny);
	letter-spacing: 0.03em;
	color: var(--wncp-white-muted);
	white-space: nowrap;
}

.wn-cp-track__line {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 30px;
	display: flex;
	align-items: center;
}
.wn-cp-track__base {
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: var(--wncp-charcoal-raised);
	border-radius: 2px;
}
.wn-cp-track__line--open .wn-cp-track__base {
	background: linear-gradient(90deg, var(--wncp-charcoal-raised) 0%, var(--wncp-charcoal-raised) 78%, transparent 100%);
}
.wn-cp-track__fill {
	position: absolute;
	left: 0; top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: linear-gradient(90deg, var(--wncp-gold-deep), var(--wncp-gold-bright));
	border-radius: 2px;
}
.wn-cp-track__checkpoint {
	position: absolute;
	right: -1px; top: 50%;
	width: 6px; height: 6px;
	transform: translate(50%, -50%) rotate(45deg);
	background: var(--wncp-gold);
	opacity: 0.85;
}
/* Dot and tag are independently positioned (see the Twig comment above
   this markup): the dot stays mathematically exact, the tag's own `left`
   is separately clamped so it never collides with the LV-from/LV-to
   end-caps when the current level sits at or near either edge of the
   stage. */
.wn-cp-track__marker-dot {
	position: absolute;
	top: 50%;
	width: 9px; height: 9px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--wncp-gold-bright);
	box-shadow: 0 0 0 3px var(--wncp-obsidian), 0 0 12px rgba(240, 204, 92, 0.75);
}
.wn-cp-track__marker-tag {
	position: absolute;
	bottom: calc(50% + 9px);
	transform: translateX(-50%);
	font-family: var(--wn-font-mono);
	font-size: var(--wn-text-tiny);
	line-height: 1.6;
	color: var(--wncp-gold-bright);
	white-space: nowrap;
	background: var(--wncp-black);
	padding: 0 6px;
	border: 1px solid var(--wncp-gold-deep);
}

.wn-cp-track__next {
	display: flex;
	align-items: center;
	gap: var(--wn-space-2);
	margin-top: var(--wn-space-4);
	font-size: var(--wn-text-small);
	color: var(--wncp-white-soft);
}
.wn-cp-track__next-mark { width: 6px; height: 6px; background: var(--wncp-gold); transform: rotate(45deg); flex: none; }
.wn-cp-track__next-copy b { font-family: var(--wn-font-mono); color: var(--wncp-gold-bright); }
.wn-cp-track__next--final .wn-cp-track__next-copy {
	color: var(--wncp-gold);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--wn-text-tiny);
}

/* ---- Secondary thin XP-to-next-level readout, only rendered when real
   progress data is available (Portal.php never fabricates this) ------- */
.wn-cp-xp { width: 100%; max-width: 640px; margin: 0 auto var(--wn-space-2); }
.wn-cp-xp__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 6px;
	font-family: var(--wn-font-mono);
	font-size: var(--wn-text-tiny);
	color: var(--wncp-white-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.wn-cp-xp__pct { color: var(--wncp-gold); }
.wn-cp-xp__track {
	position: relative;
	height: 3px;
	background: var(--wncp-charcoal-raised);
	border-radius: 2px;
	overflow: hidden;
}
.wn-cp-xp__fill { position: absolute; inset: 0 auto 0 0; background: var(--wncp-gold-dim); border-radius: 2px; }

@media (max-width: 480px) {
	.wn-cp-track__rate-value { font-size: 2rem; }
	.wn-cp-track__line-row { gap: var(--wn-space-2); }
	.wn-cp-track__cap { font-size: 0.65rem; }
	.wn-cp-track__marker-tag { font-size: 0.65rem; padding: 0 4px; }
}

.wn-cp-hero__support {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wn-space-7);
	padding-top: var(--wn-space-5);
	border-top: 1px solid var(--wncp-line);
}
.wn-cp-hero__support div { display: flex; flex-direction: column; align-items: center; }
.wn-cp-hero__support b { font-family: var(--wn-font-mono); font-size: 1.05rem; color: var(--wncp-white); }
.wn-cp-hero__support span { font-size: var(--wn-text-tiny); text-transform: uppercase; letter-spacing: 0.05em; color: var(--wncp-white-muted); margin-top: 2px; }

/* ==========================================================================
   RIGHT ZONE — active status, differentiated visual weights
   ========================================================================== */

.wn-cp-status { display: flex; flex-direction: column; gap: var(--wn-space-3); }
.wn-cp-status__module { padding: var(--wn-space-4); background: var(--wncp-obsidian); border-left: 2px solid var(--wncp-line-strong); }
.wn-cp-status__module--feature { border-left-color: var(--wncp-gold); background: var(--wncp-charcoal-raised); padding: var(--wn-space-5); }
.wn-cp-status__module--hint { border-left-style: dashed; }
.wn-cp-status__row { display: flex; gap: var(--wn-space-3); }
.wn-cp-status__module--compact { flex: 1; padding: var(--wn-space-3) var(--wn-space-4); }

.wn-cp-status__label { font-size: var(--wn-text-tiny); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wncp-white-muted); margin: 0 0 var(--wn-space-2); }
.wn-cp-status__figure { font-family: var(--wn-font-mono); font-weight: 700; font-size: 1.85rem; color: var(--wncp-gold-bright); margin: 0 0 var(--wn-space-3); }
.wn-cp-status__value { font-size: var(--wn-text-body); color: var(--wncp-white); margin: 0; font-weight: 600; }
.wn-cp-status__value--muted { color: var(--wncp-white-muted); font-weight: 400; }
.wn-cp-status__value--numeric { font-family: var(--wn-font-mono); }
.wn-cp-status__value--sm { font-size: var(--wn-text-small); font-weight: 400; color: var(--wncp-gold); }
.wn-cp-status__meta { margin: var(--wn-space-2) 0 0; font-size: var(--wn-text-tiny); color: var(--wncp-white-muted); }
.wn-cp-status__meta.is-earned { color: var(--wncp-gold-bright); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

.wn-cp-status__bar { height: 5px; background: var(--wncp-black); border-radius: 3px; overflow: hidden; position: relative; }
.wn-cp-status__bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--wncp-gold-deep), var(--wncp-gold-bright)); display: block; }

/* ==========================================================================
   BONUSES HUD — full-width status bar
   ========================================================================== */

.wn-cp-hud {
	max-width: 1600px;
	margin: var(--wn-space-6) auto 0;
	display: flex;
	background: var(--wncp-obsidian);
	border-top: 1px solid var(--wncp-gold);
	border-bottom: 1px solid var(--wncp-line);
}
.wn-cp-hud__cell { flex: 1; text-align: center; padding: var(--wn-space-4) var(--wn-space-2); border-right: 1px solid var(--wncp-line); }
.wn-cp-hud__cell:last-child { border-right: 0; }
.wn-cp-hud__cell b { display: block; font-family: var(--wn-font-mono); font-size: 1.1rem; color: var(--wncp-gold); }
.wn-cp-hud__cell.is-active b { color: var(--wncp-gold-bright); }
.wn-cp-hud__cell span { display: block; margin-top: 4px; font-size: var(--wn-text-tiny); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wncp-white-muted); }

/* ==========================================================================
   LOWER COCKPIT — Milestone champion path
   ========================================================================== */

.wn-cp-milestone__done { display: flex; align-items: center; gap: var(--wn-space-4); color: var(--wncp-white-muted); font-size: var(--wn-text-small); }
.wn-cp-milestone__laurel { width: 40px; height: 40px; color: var(--wncp-gold-dim); flex: none; }
.wn-cp-milestone__done p { margin: 0; }

.wn-cp-champion-path { display: flex; align-items: flex-start; margin-bottom: var(--wn-space-6); }
.wn-cp-champion-path__checkpoint { display: flex; flex-direction: column; align-items: center; text-align: center; width: 120px; position: relative; }
.wn-cp-champion-path__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--wncp-charcoal); border: 2px solid var(--wncp-white-muted); margin-bottom: var(--wn-space-2); }
.wn-cp-champion-path__checkpoint.is-current .wn-cp-champion-path__dot { border-color: var(--wncp-gold); background: var(--wncp-gold-deep); }
.wn-cp-champion-path__checkpoint.is-target { position: relative; }
.wn-cp-champion-path__checkpoint.is-target .wn-cp-champion-path__dot { border-color: var(--wncp-gold-bright); background: var(--wncp-gold-bright); box-shadow: 0 0 12px rgba(240,204,92,0.55); }
.wn-cp-champion-path__laurel { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; color: var(--wncp-gold-dim); pointer-events: none; }
.wn-cp-champion-path__checkpoint b { font-family: var(--wn-font-display); font-size: 1.375rem; color: var(--wncp-white); }
.wn-cp-champion-path__checkpoint small { font-size: var(--wn-text-tiny); color: var(--wncp-white-muted); margin-top: 2px; }
.wn-cp-champion-path__track { flex: 1; height: 2px; background: var(--wncp-charcoal); margin: 6px var(--wn-space-3) 0; position: relative; }
.wn-cp-champion-path__track i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--wncp-gold-deep), var(--wncp-gold-bright)); display: block; }

.wn-cp-milestone__reward {
	padding-top: var(--wn-space-4);
	border-top: 1px solid var(--wncp-line);
}
.wn-cp-milestone__reward-label { font-size: var(--wn-text-tiny); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wncp-white-muted); margin: 0 0 var(--wn-space-2); }
.wn-cp-milestone__reward-values { display: flex; gap: var(--wn-space-5); flex-wrap: wrap; }
.wn-cp-milestone__reward-value { font-size: var(--wn-text-body); color: var(--wncp-white-soft); }
.wn-cp-milestone__reward-value b { font-family: var(--wn-font-mono); color: var(--wncp-gold-bright); font-size: 1.05rem; }
.wn-cp-milestone__note { margin: var(--wn-space-3) 0 0; font-size: var(--wn-text-tiny); color: var(--wncp-gold); }

/* ==========================================================================
   LOWER COCKPIT — Statistics
   ========================================================================== */

.wn-cp-stats__list { display: flex; flex-direction: column; gap: var(--wn-space-3); }
.wn-cp-stat-line { display: grid; grid-template-columns: 108px 1fr 3ch; align-items: center; gap: var(--wn-space-3); }
.wn-cp-stat-line__name { font-size: var(--wn-text-tiny); color: var(--wncp-white-muted); }
.wn-cp-stat-line__bar { height: 4px; background: var(--wncp-black); position: relative; }
.wn-cp-stat-line__bar i { position: absolute; inset: 0 auto 0 0; background: var(--wncp-gold); display: block; }
.wn-cp-stat-line__value { font-family: var(--wn-font-mono); font-size: var(--wn-text-tiny); color: var(--wncp-white); text-align: right; }

/* ==========================================================================
   RESPONSIVE — desktop (~1600px) is the primary target. Overflow
   prevention for tablet/mobile; full mobile polish comes after approval.
   ========================================================================== */

@media (max-width: 1300px) {
	.wn-cp__upper { grid-template-columns: 240px minmax(0, 1fr); }
	.wn-cp__zone--right { grid-column: 1 / -1; }
	.wn-cp-status { flex-direction: row; flex-wrap: wrap; }
	.wn-cp-status__module { flex: 1 1 220px; }
	.wn-cp__lower { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.wn-cp__upper { grid-template-columns: 1fr; }
	.wn-cp__zone--left, .wn-cp__zone--right { grid-column: 1 / -1; }
	.wn-cp-hero__support { gap: var(--wn-space-4); }
	.wn-cp-hud { flex-wrap: wrap; }
	.wn-cp-hud__cell { flex: 1 1 33%; }
	.wn-cp-status { flex-direction: column; }
	.wn-cp-champion-path { flex-wrap: wrap; }
	.wn-cp-champion-path__track { flex-basis: 100%; margin: var(--wn-space-3) 0; }
}