/* ==========================================================================
   WINNERA — PORTAL CHROME
   Header, desktop navigation, mobile navigation, world status bar, footer,
   and the interior page shell used by every non-homepage route.
   ========================================================================== */

/* ==========================================================================
   HEADER
   ========================================================================== */

.wn-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: var(--wn-z-header);
	height: var(--wn-header-h);
	background: linear-gradient(180deg, rgba(9, 10, 12, 0.94), rgba(9, 10, 12, 0.78));
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--wn-border-hairline);
	transition: height var(--wn-dur) var(--wn-ease),
	            background-color var(--wn-dur) var(--wn-ease),
	            border-color var(--wn-dur) var(--wn-ease);
}

/* The header thins and takes a gold hairline once the world scrolls past */
.wn-header[data-scrolled="true"] {
	height: var(--wn-header-h-small);
	background: rgba(6, 7, 9, 0.97);
	border-bottom-color: var(--wn-border);
	box-shadow: var(--wn-shadow);
}

.wn-header__inner {
	display: flex;
	align-items: center;
	gap: var(--wn-space-5);
	height: 100%;
	max-width: var(--wn-container-wide);
	margin-inline: auto;
	padding-inline: var(--wn-gutter);
}

/* ---- Wordmark ------------------------------------------------------------
   FINAL POLISH PASS: the sigil, WINNERA and WORLD PORTAL read as one brand
   lockup rather than three loose pieces -- a faint warm wash ties them into
   a single zone (never a bordered "chip", so the link never competes with
   the nav buttons beside it), the sigil is slightly larger and picks up a
   restrained drop-shadow for separation from whatever sits behind the
   header, and the wordmark itself is lifted from plain bone to the same
   gold-tinted white every other headline in the portal uses. No new glow,
   no header height change -- everything still fits the existing compact
   60px bar. -------------------------------------------------------------- */

.wn-brand {
	display: flex;
	align-items: center;
	gap: var(--wn-space-4);
	flex: none;
	padding: 0.3rem 0.6rem 0.3rem 0.35rem;
	border-radius: var(--wn-radius);
	background: radial-gradient(ellipse 130% 150% at 0% 50%, rgba(200, 163, 90, 0.08), transparent 70%);
	color: var(--wn-bone);
}

.wn-brand:hover { color: var(--wn-bone); }

/* Official Winnera symbol (approved logo package). object-fit:contain keeps
   the mark's own aspect ratio inside the fixed box -- it is never stretched
   to fill a square, and never cropped. */
.wn-brand__sigil {
	width: 34px; height: 34px; flex: none;
	object-fit: contain;
	filter: drop-shadow(0 0 3px rgba(200, 163, 90, 0.28));
	transition: filter var(--wn-dur) var(--wn-ease);
}
.wn-brand:hover .wn-brand__sigil { filter: drop-shadow(0 0 5px rgba(200, 163, 90, 0.5)) brightness(1.08); }

.wn-brand__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }

.wn-brand__name {
	font-family: var(--wn-font-display);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wn-text-gold);
	text-shadow: 0 0 14px rgba(200, 163, 90, 0.16);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wn-brand__tag {
	margin-top: 4px;
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wn-gold);
}

/* Narrow phones: the sigil and WINNERA itself stay full size and fully
   legible -- only this pass's new decorative additions (the warm wash, the
   wider gap/padding) give way first, so the brand lockup never pushes the
   burger button off-screen. WORLD PORTAL still drops at 420px as before. */
@media (max-width: 560px) {
	.wn-brand { gap: var(--wn-space-2); padding: 0.2rem 0.3rem 0.2rem 0.15rem; background: none; }
}

@media (max-width: 420px) {
	.wn-brand__tag { display: none; }
}

/* ---- Desktop navigation --------------------------------------------------- */

.wn-nav { display: none; }

@media (min-width: 1080px) {
	.wn-nav {
		display: flex;
		align-items: center;
		gap: var(--wn-space-1);
		height: 100%;
		margin-right: auto;
	}
}

.wn-nav__item { position: relative; height: 100%; display: flex; align-items: center; }

.wn-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wn-space-2);
	padding: var(--wn-space-2) var(--wn-space-4);
	background: none;
	border: 0;
	border-radius: var(--wn-radius-sm);
	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-text-secondary);
	cursor: pointer;
	transition: color var(--wn-dur) var(--wn-ease);
}

.wn-nav__link:hover,
.wn-nav__item[data-open="true"] .wn-nav__link { color: var(--wn-gold-bright); }

/* Winnera Store — a small rune mark rather than a badge, so the top nav
   entry reads as a genuine destination without shouting over Download. */
.wn-nav__link--store { color: var(--wn-gold); }
.wn-nav__link--store::before {
	content: "";
	width: 5px; height: 5px;
	transform: rotate(45deg);
	border: 1px solid currentColor;
	background: rgba(200, 163, 90, 0.25);
}
.wn-nav__link--store:hover { color: var(--wn-gold-bright); }

.wn-nav__link[aria-current="page"] { color: var(--wn-bone); }

.wn-nav__link[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: var(--wn-space-4); right: var(--wn-space-4);
	bottom: 14px;
	height: 1px;
	background: var(--wn-gold);
}

.wn-nav__caret {
	width: 7px; height: 7px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--wn-dur) var(--wn-ease);
}

.wn-nav__item[data-open="true"] .wn-nav__caret { transform: translateY(1px) rotate(225deg); }

/* ---- Mega panel ----------------------------------------------------------- */

.wn-mega {
	position: absolute;
	top: calc(100% - 1px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	width: min(680px, 88vw);
	padding: var(--wn-space-6);
	background: linear-gradient(180deg, #14171C, #0B0D10);
	border: 1px solid var(--wn-border);
	border-radius: var(--wn-radius-lg);
	box-shadow: var(--wn-shadow-deep);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--wn-dur) var(--wn-ease),
	            transform var(--wn-dur) var(--wn-ease-out),
	            visibility var(--wn-dur);
}

.wn-nav__item[data-open="true"] .wn-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.wn-mega__lead {
	margin: 0 0 var(--wn-space-5);
	padding-bottom: var(--wn-space-4);
	border-bottom: 1px solid var(--wn-border-hairline);
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-body);
	font-style: italic;
	color: var(--wn-gold);
}

.wn-mega__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wn-space-1) var(--wn-space-5);
}

.wn-mega__entry {
	display: block;
	padding: var(--wn-space-3);
	border-radius: var(--wn-radius-sm);
	color: var(--wn-text-secondary);
	transition: background-color var(--wn-dur) var(--wn-ease);
}

.wn-mega__entry:hover { background: rgba(255, 255, 255, 0.03); color: var(--wn-text-secondary); }

.wn-mega__entry-label {
	display: flex;
	align-items: center;
	gap: var(--wn-space-2);
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-body);
	font-weight: 700;
	color: var(--wn-bone);
}

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

.wn-mega__entry-note {
	margin-top: 2px;
	font-size: var(--wn-text-tiny);
	line-height: 1.4;
	color: var(--wn-text-muted);
}

/* Planned destinations are visible but never pretend to be links */
.wn-mega__entry--planned { cursor: default; opacity: 0.62; }
.wn-mega__entry--planned:hover { background: none; }
.wn-mega__entry--planned .wn-mega__entry-label { color: var(--wn-text-secondary); }

.wn-soon {
	padding: 0.0625rem 0.3125rem;
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius-sm);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wn-text-muted);
}

/* ---- Header actions -------------------------------------------------------- */

.wn-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wn-space-3);
	margin-left: auto;
	flex: none;
}

.wn-header__status { display: none; }

@media (min-width: 1240px) {
	.wn-header__status {
		display: flex;
		align-items: center;
		gap: var(--wn-space-3);
		padding-right: var(--wn-space-4);
		border-right: 1px solid var(--wn-border-hairline);
	}
}

.wn-header__cta { display: none; }
@media (min-width: 720px) { .wn-header__cta { display: inline-flex; } }

/* The primary "Create Account" button. Hidden below 560px: at narrow widths it
   would consume the row and push the menu button past the viewport edge,
   making navigation unreachable. Account creation remains one tap away via the
   drawer and the left rail's account module. */
.wn-header__enter { display: none; }
@media (min-width: 560px) { .wn-header__enter { display: inline-flex; } }

/* The menu button must never be squeezed out, whatever else is in the row. */
.wn-header__actions { min-width: 0; }
.wn-burger { margin-left: auto; }
.wn-brand { min-width: 0; overflow: hidden; }

/* ---- Burger ---------------------------------------------------------------- */

.wn-burger {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	flex: none;
	background: transparent;
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius);
	cursor: pointer;
}

@media (min-width: 1080px) { .wn-burger { display: none; } }

.wn-burger:hover { border-color: var(--wn-border-strong); }

.wn-burger__bars { position: relative; width: 18px; height: 12px; }

.wn-burger__bars span {
	position: absolute;
	left: 0; right: 0;
	height: 1.5px;
	background: var(--wn-bone);
	transition: transform var(--wn-dur) var(--wn-ease), opacity var(--wn-dur-fast) var(--wn-ease);
}

.wn-burger__bars span:nth-child(1) { top: 0; }
.wn-burger__bars span:nth-child(2) { top: 5px; }
.wn-burger__bars span:nth-child(3) { top: 10px; }

.wn-burger[aria-expanded="true"] .wn-burger__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.wn-burger[aria-expanded="true"] .wn-burger__bars span:nth-child(2) { opacity: 0; }
.wn-burger[aria-expanded="true"] .wn-burger__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ==========================================================================
   MOBILE NAVIGATION
   Not a stacked copy of the desktop menu: a purpose-built drawer that leads
   with world state, then account actions, then the section index.
   ========================================================================== */

.wn-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--wn-z-drawer);
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #0B0D10, var(--wn-bg-deep));
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform var(--wn-dur-slow) var(--wn-ease-out), visibility var(--wn-dur-slow);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wn-drawer[data-open="true"] { transform: translateY(0); visibility: visible; }

@media (min-width: 1080px) { .wn-drawer { display: none; } }

.wn-drawer__inner {
	padding: calc(var(--wn-header-h) + var(--wn-space-5)) var(--wn-gutter) var(--wn-space-9);
}

/* World state first — the thing a returning player opens the menu for */
.wn-drawer__state {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-bottom: var(--wn-space-6);
	background: var(--wn-border-hairline);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius);
	overflow: hidden;
}

.wn-drawer__state-cell {
	padding: var(--wn-space-4);
	background: var(--wn-surface-raised);
}

.wn-drawer__actions {
	display: grid;
	gap: var(--wn-space-3);
	margin-bottom: var(--wn-space-7);
}

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

.wn-drawer__group-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--wn-space-5) 0;
	background: none;
	border: 0;
	color: var(--wn-bone);
	font-family: var(--wn-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}

.wn-drawer__group-toggle .wn-nav__caret { color: var(--wn-gold); width: 9px; height: 9px; }
.wn-drawer__group[data-open="true"] .wn-nav__caret { transform: translateY(1px) rotate(225deg); }

.wn-drawer__list {
	display: none;
	padding-bottom: var(--wn-space-5);
}

.wn-drawer__group[data-open="true"] .wn-drawer__list { display: block; }

.wn-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wn-space-3);
	padding: var(--wn-space-3) 0 var(--wn-space-3) var(--wn-space-4);
	border-left: 1px solid var(--wn-border-hairline);
	color: var(--wn-text-secondary);
	font-size: var(--wn-text-body);
}

.wn-drawer__link:hover { color: var(--wn-gold-bright); border-left-color: var(--wn-gold); }
.wn-drawer__link--planned { color: var(--wn-text-muted); pointer-events: none; }

/* ==========================================================================
   MOBILE WORLD BAR
   Persistent access to server status, season day and players online — the
   three things the product brief requires to stay reachable on mobile.
   ========================================================================== */

.wn-worldbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: var(--wn-z-sticky);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	height: var(--wn-worldbar-h);
	background: rgba(6, 7, 9, 0.97);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--wn-border);
}

@media (min-width: 1080px) { .wn-worldbar { display: none; } }

.wn-worldbar__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	padding-inline: var(--wn-space-2);
	color: var(--wn-text-secondary);
	text-align: center;
	border-right: 1px solid var(--wn-border-hairline);
}

.wn-worldbar__cell:last-child { border-right: 0; }

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

.wn-worldbar__label {
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wn-text-muted);
}

/* ==========================================================================
   PAGE SHELL
   ========================================================================== */

.wn-main { padding-top: var(--wn-header-h); }

@media (max-width: 1079px) {
	body { padding-bottom: var(--wn-worldbar-h); }
}

/* Interior pages (everything that is not the homepage) */
.wn-page {
	position: relative;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--wn-section-y);
}

.wn-page__head {
	margin-bottom: var(--wn-space-7);
	padding-bottom: var(--wn-space-5);
	border-bottom: 1px solid var(--wn-border-hairline);
}

.wn-page__title {
	margin: 0;
	font-size: var(--wn-text-h1);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.wn-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wn-space-2);
	margin-bottom: var(--wn-space-4);
	font-size: var(--wn-text-label);
	font-weight: 600;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	color: var(--wn-text-muted);
}

.wn-breadcrumb a { color: var(--wn-text-muted); }
.wn-breadcrumb a:hover { color: var(--wn-gold); }
.wn-breadcrumb__sep { color: var(--wn-gold-deep); }

/* The surface every legacy MyAAC page renders into */
.wn-page__body {
	position: relative;
	padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
	background: var(--wn-stone-face);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius-lg);
	box-shadow: var(--wn-shadow), var(--wn-inset-top);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.wn-footer {
	position: relative;
	padding-block: var(--wn-space-8) var(--wn-space-6);
	background: var(--wn-bg-deep);
	border-top: 1px solid var(--wn-border);
}

.wn-footer::before {
	content: "";
	position: absolute;
	top: -1px; left: 0; right: 0;
	height: 1px;
	background-image: var(--wn-rule-gold);
}

.wn-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--wn-space-6) var(--wn-space-5);
	margin-bottom: var(--wn-space-7);
}

.wn-footer__brand { grid-column: 1 / -1; }

@media (min-width: 900px) {
	.wn-footer__grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
	.wn-footer__brand { grid-column: auto; }
}

.wn-footer__blurb {
	max-width: 34ch;
	margin-top: var(--wn-space-4);
	font-size: var(--wn-text-small);
	color: var(--wn-text-muted);
}

.wn-footer__heading {
	margin-bottom: var(--wn-space-4);
	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);
}

.wn-footer__list { margin: 0; padding: 0; list-style: none; }
.wn-footer__list li + li { margin-top: var(--wn-space-2); }

.wn-footer__list a,
.wn-footer__list span {
	font-size: var(--wn-text-small);
	color: var(--wn-text-secondary);
}

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

.wn-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wn-space-4);
	padding-top: var(--wn-space-5);
	border-top: 1px solid var(--wn-border-hairline);
	font-size: var(--wn-text-tiny);
	color: var(--wn-text-muted);
}

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

/* MyAAC's template_footer() output (attribution, counters, load time) */
.wn-footer__legacy { line-height: 1.9; }
.wn-footer__legacy br { display: none; }
.wn-footer__legacy a { color: var(--wn-text-muted); }