/* ==========================================================================
   WINNERA — THREE ZONE WORLD PORTAL
   --------------------------------------------------------------------------
   The visual-direction revision. Stage 1's single centred column becomes a
   classic MMORPG portal composition — account and game index on the left,
   world content in the centre, live world information on the right — executed
   with modern layout, restraint and responsiveness.

   Structural rules:
     - The portal frame sits INSIDE the world, over the artwork layer.
     - Rails are persistent on desktop, contextual on tablet, folded into the
       content flow on mobile.
     - Density comes from smaller modules, not from smaller type.
   ========================================================================== */

:root {
	--wn-rail-left:    266px;
	--wn-rail-right:   316px;
	--wn-zone-gap:     clamp(1rem, 0.5rem + 1vw, 1.5rem);
	--wn-portal-max:   1620px;

	/* Module rhythm — tighter than Stage 1's full-bleed sections */
	--wn-module-pad:   clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
	--wn-module-gap:   clamp(1rem, 0.6rem + 1vw, 1.5rem);

	/* Aged metal frame */
	--wn-frame-face:
		linear-gradient(180deg, rgba(255,255,255,0.05), transparent 30%),
		linear-gradient(180deg, #15181D 0%, #101318 55%, #0B0D11 100%);
	--wn-frame-edge:   rgba(200, 163, 90, 0.22);
}

/* ==========================================================================
   THE WORLD LAYER
   A commissioned Winnera artwork will occupy this layer. Until it exists the
   layer renders an intentional, clearly-documented placeholder environment
   built from gradients and clip-path geometry — never stock photography.
   See docs/ASSETS.md for the exact artwork specification.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DEPTH STACK — the portal reads as five distinct planes:

     -5  world artwork      the commissioned panorama (or the fallback scene)
     -4  atmosphere         haze, light shafts, drifting mist
     -3  vignette + ground  binds the artwork into the page
      0  portal frame       stone and iron surfaces
      1  UI modules         content plates
      2  text               always the nearest plane

   The interface OVERLAYS the artwork. The artwork is never boxed inside a
   card of its own.
   -------------------------------------------------------------------------- */

.wn-world {
	position: absolute;
	inset: 0 0 auto 0;
	/* Taller than before: the world must reach behind both rails and the
	   first two centre modules, not just the banner. */
	height: clamp(680px, 68vw, 1180px);
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Layer 1 — sky and distant light. Materially brighter than the previous
   pass: the portal was leaning on flat dark surfaces instead of environment. */
.wn-world__sky {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 110% 74% at 52% 2%,   rgba(226, 186, 110, 0.34), transparent 58%),
		radial-gradient(ellipse 74% 56% at 78% 22%,   rgba(198, 128, 52, 0.26),  transparent 62%),
		radial-gradient(ellipse 86% 62% at 14% 30%,   rgba(86, 124, 156, 0.24),  transparent 64%),
		radial-gradient(ellipse 60% 44% at 50% 46%,   rgba(150, 128, 96, 0.14),  transparent 70%),
		linear-gradient(180deg, #141A22 0%, #101620 34%, #0B0F15 68%, var(--wn-bg-deep) 100%);
}

/* Layer 1b — god rays raking down from the light source */
.wn-world__rays {
	position: absolute;
	inset: -10% -10% 30% -10%;
	background: repeating-linear-gradient(
		74deg,
		transparent 0 42px,
		rgba(230, 196, 128, 0.055) 42px 66px,
		transparent 66px 128px
	);
	mask-image: radial-gradient(ellipse 70% 90% at 62% 0%, #000 10%, transparent 68%);
	-webkit-mask-image: radial-gradient(ellipse 70% 90% at 62% 0%, #000 10%, transparent 68%);
	opacity: 0.85;
}

/* Layer 2 — far mountains, hazy and blue-shifted for aerial perspective */
.wn-world__range--far {
	position: absolute;
	inset: auto 0 0 0;
	height: 78%;
	background: linear-gradient(180deg, #223040 0%, #16202C 60%, #0E141C 100%);
	clip-path: polygon(
		0% 100%, 0% 52%, 8% 40%, 15% 54%, 23% 30%, 31% 48%,
		40% 24%, 49% 46%, 57% 26%, 66% 44%, 74% 32%, 83% 50%,
		91% 38%, 100% 48%, 100% 100%
	);
	opacity: 0.55;
	filter: blur(1px);
}

/* Layer 3 — near mountains */
.wn-world__range {
	position: absolute;
	inset: auto 0 0 0;
	height: 70%;
	background: linear-gradient(180deg, #16202B 0%, #0D131B 62%, #090C11 100%);
	clip-path: polygon(
		0% 100%, 0% 58%, 6% 49%, 12% 60%, 19% 38%, 26% 55%,
		33% 33%, 41% 52%, 48% 28%, 56% 50%, 64% 36%, 71% 56%,
		79% 42%, 87% 58%, 94% 46%, 100% 55%, 100% 100%
	);
	opacity: 0.9;
}

/* Layer 3 — the fortress on its ridge, off-centre for asymmetry */
.wn-world__fortress {
	position: absolute;
	left: 58%;
	bottom: 16%;
	width: clamp(180px, 24vw, 380px);
	height: clamp(120px, 16vw, 250px);
	background: linear-gradient(180deg, #131720 0%, #0A0C10 82%);
	clip-path: polygon(
		0% 100%, 4% 52%, 10% 52%, 11% 34%, 16% 34%, 17% 52%, 30% 52%,
		31% 22%, 38% 14%, 45% 22%, 46% 52%, 60% 52%, 61% 30%, 67% 30%,
		68% 44%, 78% 44%, 79% 26%, 85% 26%, 86% 56%, 96% 56%, 100% 100%
	);
	opacity: 0.86;
}

/* Layer 4 — ruined arches on the near left */
.wn-world__ruins {
	position: absolute;
	left: 2%;
	bottom: 8%;
	width: clamp(160px, 22vw, 340px);
	height: clamp(110px, 15vw, 230px);
	background: linear-gradient(180deg, #161A22 0%, #090B0E 86%);
	clip-path: polygon(
		0% 100%, 0% 40%, 7% 26%, 14% 40%, 14% 100%, 22% 100%, 22% 30%,
		30% 14%, 38% 30%, 38% 100%, 47% 100%, 47% 46%, 54% 34%, 61% 46%,
		61% 100%, 72% 100%, 72% 58%, 78% 50%, 84% 58%, 84% 100%
	);
	opacity: 0.8;
}

/* Layer 5 — firelight pooling at the base of the ruins */
.wn-world__fire {
	position: absolute;
	left: 8%;
	bottom: 4%;
	width: clamp(160px, 20vw, 320px);
	height: clamp(60px, 8vw, 130px);
	background: radial-gradient(ellipse at 50% 100%, rgba(200, 120, 40, 0.30), transparent 68%);
	filter: blur(2px);
	animation: wn-emberlight calc(var(--wn-dur-ambient) * 0.6) ease-in-out infinite alternate;
}

@keyframes wn-emberlight {
	from { opacity: 0.68; transform: scaleY(0.94); }
	to   { opacity: 1;    transform: scaleY(1.06); }
}

/* Layer 6 — valley mist, drifting */
.wn-world__mist {
	position: absolute;
	inset: auto 0 0 0;
	height: 58%;
	background:
		radial-gradient(ellipse 62% 100% at 22% 100%, rgba(178, 190, 208, 0.14), transparent 70%),
		radial-gradient(ellipse 70% 100% at 74% 100%, rgba(178, 190, 208, 0.11), transparent 72%),
		radial-gradient(ellipse 90% 60% at 50% 100%, rgba(150, 165, 185, 0.07), transparent 75%);
	animation: wn-drift calc(var(--wn-dur-ambient) * 4.5) ease-in-out infinite alternate;
}

/* Layer 7 — vignette, so the world darkens toward the rails and does not
   fight the interface for attention */
.wn-world__vignette {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 78% 70% at 50% 34%, transparent 32%, rgba(6, 7, 9, 0.55) 88%),
		linear-gradient(90deg, rgba(6, 7, 9, 0.62), transparent 22%, transparent 78%, rgba(6, 7, 9, 0.62));
}

/* Layer 8 — the ground the portal frame stands on. A long fade, so the
   artwork dissolves into the page instead of ending at a hard edge. */
.wn-world__ground {
	position: absolute;
	inset: auto 0 0 0;
	height: 54%;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(9, 10, 12, 0.30) 28%,
		rgba(9, 10, 12, 0.74) 62%,
		var(--wn-bg) 100%);
}

/* When commissioned artwork arrives, it drops in here and the generated
   layers above are simply removed. Nothing else in the portal changes. */
.wn-world__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 32%;
}

/* Interior pages keep the world present but lower, so page content leads */
.wn-world--interior { height: clamp(260px, 26vw, 420px); }

/* ==========================================================================
   PORTAL SHELL
   ========================================================================== */

/* The world layer is absolutely positioned inside <main> */
.wn-main { position: relative; }

/* The header becomes a compact global bar: the portal's real game navigation
   now lives in the left rail, so the top bar no longer needs presence. */
.wn-header { height: var(--wn-header-h-small); }
.wn-main { padding-top: var(--wn-header-h-small); }

/* Wide tables inside modules scroll in their own box, never the page */
.wn-champions__scroll { overflow-x: auto; }

.wn-portal {
	position: relative;
	z-index: var(--wn-z-base);
	max-width: var(--wn-portal-max);
	margin-inline: auto;
	padding-inline: var(--wn-gutter);
	padding-block: clamp(1.25rem, 0.75rem + 2vw, 2.5rem) var(--wn-space-8);
}

.wn-portal__zones {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wn-zone-gap);
	align-items: start;
}

/* ---- Zone base styles ---------------------------------------------------
   These MUST come before the responsive rules below: they carry `display`,
   and a later equal-specificity declaration would otherwise override the
   `display: none` that suppresses the left zone on tablet. */

.wn-zone { min-width: 0; }

/* Grid tracks default to `auto`, which floors at the widest child's
   min-content and lets modules push the zone wider than its column. Pinning
   every zone to minmax(0, 1fr) lets wide content (tables, mosaics, long
   names) shrink and scroll inside its own module instead of widening the
   page. */
.wn-zone--center,
.wn-zone--left,
.wn-zone--right { grid-template-columns: minmax(0, 1fr); }

.wn-zone--center { display: grid; gap: var(--wn-module-gap); }

.wn-zone--left,
.wn-zone--right { display: grid; gap: var(--wn-module-gap); align-content: start; }

/* Tablet (760–1079) — main content plus the contextual world rail.
   The left zone is suppressed here rather than folded above the banner: the
   header already exposes Log In / Create Account and the mega navigation at
   this width, so a full-width account band would only push the world out of
   view. Below 760 the header CTAs disappear and the left zone returns. */
@media (min-width: 760px) and (max-width: 1079px) {
	.wn-portal__zones {
		grid-template-columns: minmax(0, 1fr) var(--wn-rail-right);
	}

	.wn-zone--left { display: none; }
}

/* Desktop — the full three zone portal. Rails are tighter at the lower end so
   the centre column keeps a comfortable measure. */
@media (min-width: 1080px) {
	:root {
		--wn-rail-left:  220px;
		--wn-rail-right: 272px;
	}

	.wn-portal__zones {
		grid-template-columns: var(--wn-rail-left) minmax(0, 1fr) var(--wn-rail-right);
	}

	.wn-zone--left { display: grid; grid-column: auto; }
}

@media (min-width: 1180px) {
	:root {
		--wn-rail-left:  236px;
		--wn-rail-right: 288px;
	}
}

/* Wide desktop — the rails take their full width */
@media (min-width: 1400px) {
	:root {
		--wn-rail-left:  266px;
		--wn-rail-right: 316px;
	}
}

/* Rails track the viewport on desktop so world state is always in reach */
@media (min-width: 1180px) {
	.wn-zone--left,
	.wn-zone--right {
		position: sticky;
		top: calc(var(--wn-header-h-small) + var(--wn-space-4));
		max-height: calc(100vh - var(--wn-header-h-small) - var(--wn-space-6));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--wn-iron) transparent;
	}

	.wn-zone--left::-webkit-scrollbar,
	.wn-zone--right::-webkit-scrollbar { width: 6px; }
	.wn-zone--left::-webkit-scrollbar-thumb,
	.wn-zone--right::-webkit-scrollbar-thumb { background: var(--wn-iron); border-radius: 3px; }
}


/* ==========================================================================
   MODULE — the portal's fundamental unit
   Replaces Stage 1's full-bleed section as the primary rhythm.
   ========================================================================== */

.wn-module {
	position: relative;
	background: var(--wn-frame-face);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius);
	box-shadow: var(--wn-shadow), var(--wn-inset-top);
}

/* Engraved gold hairline along the top edge — the portal's signature */
.wn-module::before {
	content: "";
	position: absolute;
	top: -1px; left: 12%; right: 12%;
	height: 1px;
	background-image: var(--wn-rule-gold);
	opacity: 0.8;
}

.wn-module--plain::before { display: none; }

.wn-module__head {
	display: flex;
	align-items: center;
	gap: var(--wn-space-3);
	padding: var(--wn-space-3) var(--wn-module-pad);
	border-bottom: 1px solid var(--wn-border-hairline);
}

/* Rune mark before every module title */
.wn-module__head::before {
	content: "";
	flex: none;
	width: 7px; height: 7px;
	transform: rotate(45deg);
	border: 1px solid var(--wn-gold);
	background: rgba(200, 163, 90, 0.2);
}

.wn-module__title {
	margin: 0;
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-label);
	font-weight: 700;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	color: var(--wn-gold);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wn-module__action {
	margin-left: auto;
	flex: none;
	font-size: var(--wn-text-tiny);
	color: var(--wn-text-muted);
}

.wn-module__action:hover { color: var(--wn-gold-bright); }

/* LINK INTEGRITY PASS: a "coming soon" action (no real destination yet)
   never carries an href, but without this it still shared the hover
   brighten above with every genuine link using the same class, reading as
   clickable when it is not. pointer-events:none additionally stops the
   :hover rule from ever matching via mouse, so hovering it never implies
   a destination exists. */
.wn-module__action[aria-disabled="true"] {
	pointer-events: none;
	cursor: default;
}

.wn-module__body { padding: var(--wn-module-pad); }
.wn-module__body--flush { padding: 0; }

.wn-module__foot {
	padding: var(--wn-space-3) var(--wn-module-pad);
	border-top: 1px solid var(--wn-border-hairline);
	background: rgba(0, 0, 0, 0.22);
}

/* Ornamental corner brackets, used on the feature modules only */
.wn-module--framed::after {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid transparent;
	border-image: linear-gradient(135deg,
		var(--wn-frame-edge) 0 2%, transparent 2% 98%, var(--wn-frame-edge) 98%) 1;
	pointer-events: none;
}

/* ==========================================================================
   LEFT RAIL — ACCOUNT
   ========================================================================== */

.wn-account__lede {
	margin: 0 0 var(--wn-space-4);
	font-size: var(--wn-text-tiny);
	line-height: 1.5;
	color: var(--wn-text-muted);
}

.wn-account__field { margin-bottom: var(--wn-space-3); }

.wn-account__label {
	display: block;
	margin-bottom: var(--wn-space-1);
	font-size: var(--wn-text-label);
	font-weight: 600;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	color: var(--wn-text-secondary);
}

.wn-account__input {
	width: 100%;
	padding: 0.5rem 0.6875rem;
	background: var(--wn-surface-sunken);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius-sm);
	color: var(--wn-bone);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-small);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
	transition: border-color var(--wn-dur) var(--wn-ease), box-shadow var(--wn-dur) var(--wn-ease);
}

.wn-account__input:focus {
	border-color: var(--wn-gold);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(200, 163, 90, 0.14);
	outline: none;
}

.wn-account__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wn-space-2);
	margin-top: var(--wn-space-3);
	font-size: var(--wn-text-tiny);
}

.wn-account__links a { color: var(--wn-text-muted); }
.wn-account__links a:hover { color: var(--wn-gold-bright); }

/* Logged-in state: the account ledger */
.wn-account__identity {
	display: flex;
	align-items: center;
	gap: var(--wn-space-3);
	padding-bottom: var(--wn-space-3);
	margin-bottom: var(--wn-space-3);
	border-bottom: 1px solid var(--wn-border-hairline);
}

.wn-account__crest {
	width: 38px; height: 38px;
	flex: none;
	display: grid;
	place-items: center;
	background: linear-gradient(180deg, rgba(200,163,90,0.2), rgba(200,163,90,0.05));
	border: 1px solid var(--wn-border-strong);
	border-radius: var(--wn-radius-sm);
	font-family: var(--wn-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wn-gold-bright);
}

.wn-account__name {
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-body);
	font-weight: 700;
	color: var(--wn-bone);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wn-account__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin-bottom: var(--wn-space-3);
	background: var(--wn-border-hairline);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius-sm);
	overflow: hidden;
}

.wn-account__stat {
	padding: var(--wn-space-2);
	background: var(--wn-surface-sunken);
	text-align: center;
}

.wn-account__stat-value {
	display: block;
	font-family: var(--wn-font-numeric);
	font-size: var(--wn-read-sm);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wn-gold-bright);
	font-variant-numeric: tabular-nums lining-nums;
}

.wn-account__stat-label {
	display: block;
	margin-top: 3px;
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wn-text-secondary);
}

.wn-account__menu { display: grid; gap: 1px; }

.wn-account__menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wn-space-2) var(--wn-space-3);
	background: rgba(255, 255, 255, 0.015);
	border-radius: var(--wn-radius-sm);
	font-size: var(--wn-text-small);
	color: var(--wn-text-secondary);
	transition: background-color var(--wn-dur) var(--wn-ease), color var(--wn-dur) var(--wn-ease);
}

.wn-account__menu-link:hover {
	background: rgba(200, 163, 90, 0.08);
	color: var(--wn-gold-bright);
}

/* ==========================================================================
   LEFT RAIL — GAME INDEX
   Reads as a portal index, not a corporate navbar.
   ========================================================================== */

.wn-index { display: grid; }

.wn-index__group + .wn-index__group { border-top: 1px solid var(--wn-border-hairline); }

/* Category header — a carved section title with a rune and an engraved rule.
   Strong enough to read as a game index rather than an admin sidebar. */
.wn-index__label {
	display: flex;
	align-items: center;
	gap: var(--wn-space-2);
	padding: var(--wn-space-4) var(--wn-module-pad) var(--wn-space-2);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-label);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wn-gold-bright);
}

.wn-index__label::before {
	content: "";
	flex: none;
	width: 6px; height: 6px;
	transform: rotate(45deg);
	border: 1px solid var(--wn-gold);
	background: rgba(200, 163, 90, 0.32);
}

.wn-index__label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, rgba(200,163,90,0.42), rgba(200,163,90,0.06));
}

.wn-index__list { padding-bottom: var(--wn-space-3); }

.wn-index__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wn-space-2);
	padding: 0.4375rem var(--wn-module-pad) 0.4375rem calc(var(--wn-module-pad) + 0.75rem);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-small);
	font-weight: 500;
	color: var(--wn-text-secondary);
	transition: color var(--wn-dur) var(--wn-ease), background-color var(--wn-dur) var(--wn-ease);
}

/* Engraved tick marking each entry */
.wn-index__link::before {
	content: "";
	position: absolute;
	left: calc(var(--wn-module-pad) + 1px);
	top: 50%;
	width: 4px; height: 4px;
	margin-top: -2px;
	transform: rotate(45deg);
	border: 1px solid var(--wn-gold-deep);
	transition: border-color var(--wn-dur) var(--wn-ease), background-color var(--wn-dur) var(--wn-ease);
}

.wn-index__link:hover {
	background: rgba(200, 163, 90, 0.06);
	color: var(--wn-gold-bright);
}

.wn-index__link:hover::before { border-color: var(--wn-gold); background: var(--wn-gold); }

.wn-index__link[aria-current="page"] {
	background: rgba(200, 163, 90, 0.08);
	color: var(--wn-bone);
}

.wn-index__link--planned { color: var(--wn-text-muted); cursor: default; }
.wn-index__link--planned:hover { background: none; color: var(--wn-text-muted); }
.wn-index__link--planned:hover::before { border-color: var(--wn-gold-deep); background: none; }


/* ==========================================================================
   RIGHT RAIL — LIVE WORLD INFORMATION
   ========================================================================== */

/* World status readouts */
.wn-status-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--wn-border-hairline);
}

.wn-status-cell {
	padding: var(--wn-space-3);
	background: var(--wn-surface-raised);
	text-align: center;
}

.wn-status-cell--wide { grid-column: 1 / -1; }

/* The lead cell carries a faint gold ground so it reads first */
.wn-status-cell--lead {
	background:
		radial-gradient(ellipse 90% 130% at 50% 100%, rgba(200, 163, 90, 0.12), transparent 68%),
		var(--wn-surface-raised);
	padding-block: var(--wn-space-4);
}

.wn-status-cell__of {
	font-size: 0.6em;
	font-weight: 600;
	color: var(--wn-text-muted);
}

/* Readouts use the body face: these are statistics, and the decorative face
   costs legibility at rail sizes. */
.wn-status-cell__value {
	display: block;
	font-family: var(--wn-font-numeric);
	font-size: var(--wn-read);
	font-weight: 700;
	line-height: 1.05;
	color: var(--wn-bone);
	font-variant-numeric: tabular-nums lining-nums;
}

/* Players Online is the single most-checked number on the portal */
.wn-status-cell--lead .wn-status-cell__value {
	font-size: var(--wn-read-lg);
	color: var(--wn-gold-bright);
	text-shadow: 0 0 22px rgba(200, 163, 90, 0.28);
}

.wn-status-cell__value--gold { color: var(--wn-gold-bright); }

.wn-status-cell__label {
	display: block;
	margin-top: 5px;
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wn-text-secondary);
}

/* Season strip inside the rail */
.wn-rail-season { padding: var(--wn-space-3) var(--wn-module-pad); }

.wn-rail-season__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--wn-space-2);
	font-size: var(--wn-text-tiny);
	color: var(--wn-text-muted);
}

.wn-rail-season__head b {
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-small);
	color: var(--wn-gold-bright);
}

.wn-rail-season__chapter {
	display: block;
	margin-top: 2px;
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wn-gold);
}

/* ==========================================================================
   SPRITE COMPONENT
   Architecture for real game assets: creature and boss sprites, character
   outfits, items, guild emblems, achievement icons. Falls back to an engraved
   placeholder whenever the asset does not exist, so the portal never shows a
   broken image and never disguises missing art as final art.
   ========================================================================== */

.wn-sprite {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: var(--wn-sprite-size, 64px);
	height: var(--wn-sprite-size, 64px);
	background:
		radial-gradient(circle at 50% 38%, rgba(200, 163, 90, 0.12), transparent 68%),
		linear-gradient(180deg, var(--wn-surface-raised), var(--wn-surface-sunken));
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius-sm);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	overflow: hidden;
}

.wn-sprite--boss {
	border-color: rgba(168, 48, 57, 0.35);
	background:
		radial-gradient(circle at 50% 38%, rgba(168, 48, 57, 0.18), transparent 68%),
		linear-gradient(180deg, var(--wn-surface-raised), var(--wn-surface-sunken));
}

.wn-sprite--lg { --wn-sprite-size: 96px; }
.wn-sprite--sm { --wn-sprite-size: 40px; }

/* Featured creature and boss sprites are a focal point of the rail, not an
   icon beside a label. Sized so commissioned 128px art reads at full detail. */
.wn-featured .wn-sprite {
	--wn-sprite-size: 84px;
	border-color: var(--wn-border);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 6px 18px rgba(0, 0, 0, 0.55);
}

.wn-featured--boss .wn-sprite {
	border-color: rgba(168, 48, 57, 0.42);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 6px 18px rgba(0, 0, 0, 0.55),
		0 0 22px rgba(116, 30, 36, 0.30);
}

/* A corner notch on every sprite frame — reads as a forged mount */
.wn-sprite__notch {
	position: absolute;
	inset: 3px;
	border: 1px solid rgba(200, 163, 90, 0.14);
	border-radius: 1px;
	pointer-events: none;
}

.wn-sprite img {
	max-width: 82%;
	max-height: 82%;
	width: auto;
	height: auto;
	image-rendering: pixelated;
}

/* Engraved placeholder glyph when no asset exists */
.wn-sprite__placeholder {
	width: 52%;
	height: 52%;
	color: var(--wn-gold);
	opacity: 0.34;
}

/* Pedestal shadow under the sprite */
.wn-sprite::after {
	content: "";
	position: absolute;
	left: 18%; right: 18%;
	bottom: 5px;
	height: 4px;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(0, 0, 0, 0.65), transparent 70%);
}

/* A sprite paired with its label — used by boosted creature / boss */
/* Sprite-led module: the asset is the message, the copy is a single tag. */
.wn-featured {
	display: flex;
	align-items: center;
	gap: var(--wn-space-4);
	padding: var(--wn-module-pad);
	background:
		radial-gradient(ellipse 70% 100% at 0% 50%, rgba(200, 163, 90, 0.07), transparent 62%);
}

.wn-featured--boss {
	background:
		radial-gradient(ellipse 70% 100% at 0% 50%, rgba(168, 48, 57, 0.10), transparent 62%);
}

.wn-featured__body { min-width: 0; }

/* An important world name — decorative face is correct here */
.wn-featured__name {
	display: block;
	font-family: var(--wn-font-display);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--wn-bone);
	overflow-wrap: anywhere;
}

a.wn-featured:hover .wn-featured__name { color: var(--wn-gold-bright); }

.wn-featured__meta {
	display: inline-block;
	margin-top: var(--wn-space-2);
	padding: 1px 7px;
	border: 1px solid var(--wn-border);
	border-radius: var(--wn-radius-sm);
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wn-gold);
}

.wn-featured--boss .wn-featured__meta {
	border-color: rgba(168, 48, 57, 0.42);
	color: #E39098;
}

/* Compact champions list for the rail */
.wn-rail-rank {
	display: flex;
	align-items: center;
	gap: var(--wn-space-3);
	padding: var(--wn-space-2) var(--wn-module-pad);
	border-bottom: 1px solid var(--wn-border-hairline);
	font-size: var(--wn-text-small);
}

.wn-rail-rank:last-child { border-bottom: 0; }
.wn-rail-rank:hover { background: rgba(200, 163, 90, 0.045); }

.wn-rail-rank__pos {
	width: 1.5rem;
	flex: none;
	font-family: var(--wn-font-numeric);
	font-size: var(--wn-text-small);
	font-weight: 700;
	color: var(--wn-text-muted);
	font-variant-numeric: tabular-nums;
}

/* The top three are marked, not just coloured */
.wn-rail-rank[data-rank="1"] { background: linear-gradient(90deg, rgba(200,163,90,0.10), transparent 70%); }
.wn-rail-rank[data-rank="1"] .wn-rail-rank__pos { color: var(--wn-gold-bright); }
.wn-rail-rank[data-rank="2"] .wn-rail-rank__pos,
.wn-rail-rank[data-rank="3"] .wn-rail-rank__pos { color: var(--wn-gold); }

/* Champion names are world names — decorative face, and large enough to read */
.wn-rail-rank__name {
	min-width: 0;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--wn-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wn-text);
}

.wn-rail-rank[data-rank="1"] .wn-rail-rank__name { color: var(--wn-bone); }
.wn-rail-rank__name:hover { color: var(--wn-gold-bright); }

.wn-rail-rank__value {
	flex: none;
	font-family: var(--wn-font-numeric);
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wn-text-secondary);
	font-variant-numeric: tabular-nums;
}

/* Upcoming event countdown */
.wn-upcoming { padding: var(--wn-module-pad); }

.wn-upcoming__name {
	font-family: var(--wn-font-display);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wn-bone);
	margin-bottom: var(--wn-space-1);
}

.wn-upcoming__clock {
	display: flex;
	gap: var(--wn-space-2);
	margin-top: var(--wn-space-3);
}

.wn-upcoming__unit {
	flex: 1;
	padding: var(--wn-space-2) var(--wn-space-1);
	background: var(--wn-surface-sunken);
	border: 1px solid var(--wn-border-hairline);
	border-radius: var(--wn-radius-sm);
	text-align: center;
}

.wn-upcoming__value {
	display: block;
	font-family: var(--wn-font-numeric);
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wn-bone);
	font-variant-numeric: tabular-nums lining-nums;
}

.wn-upcoming__unit-label {
	display: block;
	margin-top: 4px;
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wn-text-secondary);
}

/* ==========================================================================
   VAULT MODULE VARIANT — Season Treasury (Skarbiec)
   --------------------------------------------------------------------------
   Additive only: a restrained variant on the existing .wn-module system,
   never a replacement of any rule above. Loaded globally (unlike
   10-store-preview.css, which is Store-page-only) so the always-rendered,
   gated right-rail Treasury card (rail-right.php) and the Store preview's
   own Treasury aside card read as the same ancient sealed vault rather than
   two different components. No jackpot/loot-box/coin-explosion imagery —
   just an engraved ring watermark drawn in CSS.
   ========================================================================== */

.wn-module--vault {
	background:
		radial-gradient(ellipse 140% 90% at 50% -20%, rgba(200, 163, 90, 0.07), transparent 60%),
		var(--wn-frame-face);
	border-color: var(--wn-border-strong);
}

.wn-module--vault .wn-module__title { color: var(--wn-gold-bright); }

.wn-module--vault .wn-module__body { position: relative; overflow: hidden; }
.wn-module--vault .wn-module__body > * { position: relative; z-index: 1; }

.wn-module--vault .wn-module__body::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -18%;
	width: 220px;
	height: 220px;
	transform: translateY(-50%);
	border-radius: 50%;
	border: 1px solid rgba(200, 163, 90, 0.10);
	box-shadow: inset 0 0 0 14px rgba(200, 163, 90, 0.035);
	pointer-events: none;
	z-index: 0;
	/* The curated Skarbiec vault-seal artwork, faded into the ring so it
	   reads as an engraving rather than a sticker. Silent no-op if the file
	   is ever absent -- the plain CSS ring above still carries the module. */
	background: url("../img/skarbiec-seal.webp") center / contain no-repeat;
	opacity: 0.4;
}

/* Latest world activity */
.wn-activity { padding: var(--wn-module-pad); }

.wn-activity__kind {
	display: block;
	margin-bottom: var(--wn-space-2);
	font-size: var(--wn-text-label);
	font-weight: 600;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	color: var(--wn-gold);
}

.wn-activity__text {
	margin: 0;
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-small);
	line-height: 1.5;
	color: var(--wn-text-secondary);
}

/* ==========================================================================
   MOBILE / TABLET FOLDING
   Rails are not preserved as columns; they fold into the flow in priority
   order. Stage 1's drawer and world bar continue to carry navigation and
   status, so the folded rails stay compact.
   ========================================================================== */

/* Wide mobile (620–759): the rail is FOLDED into the flow at full page width,
   so its modules pair two-up. This must not apply at 760–1079, where the rail
   is a 316px sidebar — two columns there would squeeze each module to ~150px
   and force the sprite modules to overflow. */
@media (min-width: 620px) and (max-width: 759px) {
	.wn-zone--right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wn-zone--right .wn-module[data-rail="status"],
	.wn-zone--right .wn-module[data-rail="champions"] { grid-column: 1 / -1; }
}

/* Mobile (<760): a single content column. The left zone returns here because
   the header's Log In / Create Account buttons drop out below 720px, so the
   account module becomes the primary entry point again. */
@media (max-width: 759px) {
	.wn-zone--left  { order: 1; }
	.wn-zone--center { order: 2; }
	.wn-zone--right { order: 3; }

	/* The full portal index duplicates the navigation drawer on mobile. */
	.wn-zone--left .wn-module[data-rail="index"] { display: none; }
}

/* Small mobile (<620): World Pulse is suppressed because the fixed world bar
   already pins server status, players online and the season day. */
@media (max-width: 619px) {
	.wn-zone--right { grid-template-columns: 1fr; }
	.wn-zone--right .wn-module[data-rail="status"] { display: none; }
}

/* ==========================================================================
   TYPOGRAPHY DISCIPLINE
   --------------------------------------------------------------------------
   Loaded last, so it settles which of the two voices each element speaks.

   The decorative Winnera face is reserved for the logo, major headings and
   important world names — season names, creature and boss names, character
   and guild names, chronicle prose.

   Everything a player reads to get a fact — statistics, figures, navigation,
   descriptions, account controls, tables — uses the body face. A decorative
   serif at 11–14px costs legibility for no atmosphere gain.
   ========================================================================== */

/* ---- Statistics and figures --------------------------------------------- */
.wn-stat__value,
.wn-ranking__rank,
.wn-ranking__value,
.wn-worldbar__value,
.wn-goal2__percent,
.wn-goal2__count,
.wn-chapter__figure-value,
.wn-rail-season__head b,
.wn-account__crest {
	font-family: var(--wn-font-numeric);
	font-variant-numeric: tabular-nums lining-nums;
}

/* ---- Navigation and UI chrome ------------------------------------------- */
.wn-mega__entry-label,
.wn-drawer__group-toggle,
.wn-panel__title,
.wn-badge--season,
.wn-vow {
	font-family: var(--wn-font-body);
}

/* Navigation labels lose the serif but keep their engraved character through
   weight and tracking rather than through letterforms. */
.wn-mega__entry-label { font-weight: 600; letter-spacing: 0.02em; }

.wn-drawer__group-toggle {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.wn-panel__title { letter-spacing: var(--wn-track-label); }

.wn-vow {
	font-weight: 700;
	letter-spacing: 0.1em;
	font-size: var(--wn-text-micro);
}

/* ---- Minimum readable sizes --------------------------------------------- */
/* Descriptions and secondary copy were sitting a step too small to scan. */
.wn-mega__entry-note,
.wn-ranking__meta,
.wn-featured__meta,
.wn-chron__meta,
.wn-tile__text,
.wn-station__text,
.wn-pillar__text { font-size: var(--wn-text-tiny); }