/* ==========================================================================
   WINNERA — COMPONENT LIBRARY
   Reusable foundations for every future portal page. Each block here is
   independent of the homepage and can be used by account, community, game and
   season pages as they are built.
   ========================================================================== */

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.wn-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wn-space-2);
	padding: 0.875rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--wn-radius);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-small);
	font-weight: 700;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--wn-dur) var(--wn-ease),
		border-color var(--wn-dur) var(--wn-ease),
		color var(--wn-dur) var(--wn-ease),
		transform var(--wn-dur-fast) var(--wn-ease),
		box-shadow var(--wn-dur) var(--wn-ease);
}

.wn-btn:active { transform: translateY(1px); }

.wn-btn[disabled],
.wn-btn[aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
}

/* Primary — gold. Reserved for the single most important action in a view. */
.wn-btn--primary {
	background: linear-gradient(180deg, var(--wn-gold-bright), var(--wn-gold));
	border-color: var(--wn-gold-bright);
	color: var(--wn-text-inverse);
	box-shadow: var(--wn-shadow-sm), var(--wn-inset-top);
}

.wn-btn--primary:hover {
	background: linear-gradient(180deg, #F0D690, var(--wn-gold-bright));
	color: var(--wn-text-inverse);
	box-shadow: var(--wn-shadow), var(--wn-glow-gold);
}

/* Secondary — forged iron with a gold hairline. */
.wn-btn--secondary {
	background: linear-gradient(180deg, var(--wn-iron-light), var(--wn-iron));
	border-color: var(--wn-border-strong);
	color: var(--wn-bone);
	box-shadow: var(--wn-shadow-sm), var(--wn-inset-top);
}

.wn-btn--secondary:hover {
	border-color: var(--wn-gold);
	color: var(--wn-gold-bright);
}

/* Ghost — for tertiary navigation inside dense views. */
.wn-btn--ghost {
	background: transparent;
	border-color: var(--wn-border);
	color: var(--wn-text-secondary);
}

.wn-btn--ghost:hover {
	border-color: var(--wn-border-strong);
	color: var(--wn-bone);
	background: rgba(255, 255, 255, 0.025);
}

/* Danger — deliberately muted. Red is a warning, not decoration. */
.wn-btn--danger {
	background: linear-gradient(180deg, var(--wn-blood-bright), var(--wn-blood));
	border-color: var(--wn-blood-bright);
	color: var(--wn-bone);
}

.wn-btn--danger:hover { filter: brightness(1.12); color: #fff; }

.wn-btn--sm { padding: 0.5rem 1rem; font-size: var(--wn-text-tiny); }
.wn-btn--lg { padding: 1.0625rem 2.5rem; font-size: var(--wn-text-body); }
.wn-btn--block { display: flex; width: 100%; }

/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */

.wn-field { display: block; margin-bottom: var(--wn-space-5); }

.wn-field__label {
	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-text-secondary);
}

.wn-field__hint {
	margin-top: var(--wn-space-2);
	font-size: var(--wn-text-tiny);
	color: var(--wn-text-muted);
}

/* Validation messages use the on-dark danger tone so they always pass AA. */
.wn-field__error {
	margin-top: var(--wn-space-2);
	font-size: var(--wn-text-tiny);
	color: var(--wn-danger-text);
}

/* Errors are not signalled by colour alone: a marker precedes the message. */
.wn-field__error:not(:empty)::before {
	content: "! ";
	font-weight: 700;
}

.wn-input,
.wn-select,
.wn-textarea {
	width: 100%;
	padding: 0.75rem 0.9375rem;
	background: var(--wn-surface-sunken);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius);
	color: var(--wn-bone);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-body);
	line-height: 1.5;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
	transition: border-color var(--wn-dur) var(--wn-ease),
	            box-shadow var(--wn-dur) var(--wn-ease);
}

.wn-input::placeholder,
.wn-textarea::placeholder { color: var(--wn-text-muted); }

.wn-input:hover,
.wn-select:hover,
.wn-textarea:hover { border-color: var(--wn-border); }

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

.wn-input[aria-invalid="true"] { border-color: var(--wn-danger); }

.wn-textarea { min-height: 8rem; resize: vertical; }

.wn-select {
	appearance: none;
	padding-right: 2.5rem;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wn-gold) 50%),
		linear-gradient(135deg, var(--wn-gold) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* Password field with a reveal affordance */
.wn-input-group { position: relative; display: flex; }
.wn-input-group .wn-input { padding-right: 3rem; }

.wn-input-group__action {
	position: absolute;
	right: 1px; top: 1px; bottom: 1px;
	width: 2.75rem;
	display: grid;
	place-items: center;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--wn-border-hairline);
	color: var(--wn-text-muted);
	cursor: pointer;
	font-size: var(--wn-text-tiny);
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
}

.wn-input-group__action:hover { color: var(--wn-gold); }

/* Checkbox / radio */
.wn-check {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--wn-space-3);
	cursor: pointer;
	font-size: var(--wn-text-small);
	color: var(--wn-text-secondary);
}

.wn-check input {
	appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	margin-top: 0.15em;
	background: var(--wn-surface-sunken);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius-sm);
	cursor: pointer;
	transition: border-color var(--wn-dur) var(--wn-ease),
	            background-color var(--wn-dur) var(--wn-ease);
}

.wn-check input[type="radio"] { border-radius: var(--wn-radius-full); }

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

.wn-check input:checked {
	background: var(--wn-gold);
	border-color: var(--wn-gold-bright);
}

.wn-check input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230B0C0E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
	background-size: 100%;
}

.wn-check input[type="radio"]:checked {
	box-shadow: inset 0 0 0 3px var(--wn-obsidian);
}

.wn-check input:focus-visible {
	outline: 2px solid var(--wn-gold);
	outline-offset: 2px;
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.wn-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wn-space-2);
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--wn-border);
	border-radius: var(--wn-radius-sm);
	background: rgba(255, 255, 255, 0.02);
	font-size: var(--wn-text-label);
	font-weight: 600;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	color: var(--wn-text-secondary);
	white-space: nowrap;
}

.wn-badge--gold {
	border-color: var(--wn-border-strong);
	background: rgba(200, 163, 90, 0.10);
	color: var(--wn-gold-bright);
}

.wn-badge--danger {
	border-color: rgba(168, 48, 57, 0.45);
	background: rgba(116, 30, 36, 0.18);
	color: #E39098;
}

.wn-badge--success {
	border-color: rgba(78, 122, 74, 0.45);
	background: rgba(78, 122, 74, 0.14);
	color: #8FBE89;
}

/* Season badge — the portal's identity chip */
.wn-badge--season {
	padding: 0.375rem 0.875rem;
	border-color: var(--wn-border-strong);
	background: linear-gradient(180deg, rgba(200, 163, 90, 0.16), rgba(200, 163, 90, 0.05));
	color: var(--wn-gold-bright);
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-tiny);
	letter-spacing: 0.18em;
}

/* Placeholder marker — a hard requirement of this stage.
   Any value not backed by real server data carries this. */
.wn-badge--placeholder {
	border-style: dashed;
	border-color: rgba(181, 118, 44, 0.5);
	background: rgba(181, 118, 44, 0.10);
	color: #D9A25F;
	letter-spacing: 0.16em;
}

.wn-placeholder-mark {
	display: inline-block;
	margin-left: var(--wn-space-2);
	padding: 0.0625rem 0.375rem;
	border: 1px dashed rgba(181, 118, 44, 0.55);
	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: #D9A25F;
	vertical-align: middle;
	white-space: nowrap;
}

/* ==========================================================================
   STATUS INDICATOR
   ========================================================================== */

.wn-status {
	display: inline-flex;
	align-items: center;
	gap: 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-text-secondary);
}

.wn-status__dot {
	position: relative;
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: var(--wn-radius-full);
	background: var(--wn-text-muted);
}

.wn-status--online { color: #8FBE89; }
.wn-status--online .wn-status__dot { background: var(--wn-verdant); }

.wn-status--online .wn-status__dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: inherit;
	border: 1px solid rgba(78, 122, 74, 0.6);
	animation: wn-pulse var(--wn-dur-ambient) var(--wn-ease-out) infinite;
}

.wn-status--offline { color: #E39098; }
.wn-status--offline .wn-status__dot { background: var(--wn-blood-bright); }

@keyframes wn-pulse {
	0%, 100% { opacity: 0.9; transform: scale(1); }
	50%      { opacity: 0.15; transform: scale(1.7); }
}

/* ==========================================================================
   STAT DISPLAY
   ========================================================================== */

.wn-stat { display: flex; flex-direction: column; gap: var(--wn-space-1); }

.wn-stat__label {
	font-size: var(--wn-text-label);
	font-weight: 600;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	color: var(--wn-text-muted);
}

.wn-stat__value {
	font-family: var(--wn-font-display);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wn-bone);
	font-variant-numeric: tabular-nums;
}

.wn-stat__value--gold { color: var(--wn-gold-bright); }
.wn-stat__meta { font-size: var(--wn-text-tiny); color: var(--wn-text-muted); }

/* ==========================================================================
   PROGRESS
   ========================================================================== */

.wn-progress {
	position: relative;
	height: 10px;
	background: var(--wn-surface-sunken);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius-sm);
	overflow: hidden;
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}

.wn-progress__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--wn-gold-deep), var(--wn-gold), var(--wn-gold-bright));
	box-shadow: 0 0 14px rgba(200, 163, 90, 0.35);
	transition: width var(--wn-dur-slow) var(--wn-ease-out);
}

.wn-progress--lg { height: 18px; }

/* Engraved tick marks every 10% — reads as a measuring rod, not a loading bar */
.wn-progress--ticked::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		90deg,
		transparent, transparent calc(10% - 1px),
		rgba(0, 0, 0, 0.55) calc(10% - 1px), rgba(0, 0, 0, 0.55) 10%
	);
	pointer-events: none;
}

/* ==========================================================================
   ALERTS
   ========================================================================== */

.wn-alert {
	position: relative;
	padding: var(--wn-space-4) var(--wn-space-5);
	padding-left: calc(var(--wn-space-5) + 3px);
	background: var(--wn-surface-raised);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius);
	color: var(--wn-text-secondary);
	font-size: var(--wn-text-small);
}

.wn-alert::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--wn-text-muted);
}

.wn-alert--success::before { background: var(--wn-success); }
.wn-alert--warning::before { background: var(--wn-warning); }
.wn-alert--danger::before  { background: var(--wn-danger); }
.wn-alert--info::before    { background: var(--wn-info); }
.wn-alert--gold::before    { background: var(--wn-gold); }

.wn-alert__title {
	margin-bottom: var(--wn-space-1);
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-body);
	font-weight: 700;
	color: var(--wn-bone);
}

/* ==========================================================================
   PANEL — the base surface for dense content
   ========================================================================== */

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

.wn-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wn-space-4);
	padding: var(--wn-space-4) var(--wn-space-5);
	border-bottom: 1px solid var(--wn-border-hairline);
}

.wn-panel__title {
	margin: 0;
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-h4);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wn-bone);
}

.wn-panel__body { padding: var(--wn-space-5); }
.wn-panel__foot {
	padding: var(--wn-space-4) var(--wn-space-5);
	border-top: 1px solid var(--wn-border-hairline);
}

/* ==========================================================================
   RANKING TABLE
   ========================================================================== */

.wn-ranking { width: 100%; border-collapse: collapse; }

.wn-ranking thead th {
	padding: var(--wn-space-3) var(--wn-space-4);
	border-bottom: 1px solid var(--wn-border);
	font-size: var(--wn-text-label);
	font-weight: 600;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	text-align: left;
	color: var(--wn-text-muted);
	white-space: nowrap;
}

.wn-ranking tbody td {
	padding: var(--wn-space-4);
	border-bottom: 1px solid var(--wn-border-hairline);
	vertical-align: middle;
}

.wn-ranking tbody tr { transition: background-color var(--wn-dur) var(--wn-ease); }
.wn-ranking tbody tr:hover { background: rgba(200, 163, 90, 0.045); }
.wn-ranking tbody tr:last-child td { border-bottom: 0; }

.wn-ranking__rank {
	width: 3.5rem;
	font-family: var(--wn-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wn-text-muted);
	font-variant-numeric: tabular-nums;
}

.wn-ranking__name {
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-h4);
	font-weight: 700;
	color: var(--wn-bone);
}

.wn-ranking__name a { color: inherit; }
.wn-ranking__name a:hover { color: var(--wn-gold-bright); }

.wn-ranking__meta { font-size: var(--wn-text-tiny); color: var(--wn-text-muted); }

.wn-ranking__value {
	text-align: right;
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-h4);
	color: var(--wn-gold-bright);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The first rank is a monument, not a row */
.wn-ranking tr[data-rank="1"] {
	background: linear-gradient(90deg, rgba(200, 163, 90, 0.10), transparent 65%);
}

.wn-ranking tr[data-rank="1"] .wn-ranking__rank { color: var(--wn-gold-bright); }
.wn-ranking tr[data-rank="1"] .wn-ranking__name { font-size: 1.4rem; }
.wn-ranking tr[data-rank="2"] .wn-ranking__rank,
.wn-ranking tr[data-rank="3"] .wn-ranking__rank { color: var(--wn-gold); }

/* ==========================================================================
   CARDS — used sparingly and never as the page's primary rhythm
   ========================================================================== */

.wn-card {
	display: block;
	padding: var(--wn-space-5);
	background: var(--wn-stone-face);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius);
	color: inherit;
	transition: border-color var(--wn-dur) var(--wn-ease),
	            transform var(--wn-dur) var(--wn-ease);
}

a.wn-card:hover {
	border-color: var(--wn-border-strong);
	transform: translateY(-2px);
	color: inherit;
}

.wn-card__title {
	margin: 0 0 var(--wn-space-2);
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-h4);
	color: var(--wn-bone);
}

.wn-card__meta { font-size: var(--wn-text-tiny); color: var(--wn-text-muted); }

/* Character card */
.wn-character-card { display: flex; gap: var(--wn-space-4); align-items: center; }
.wn-character-card__figure {
	width: 56px; height: 56px; flex: none;
	display: grid; place-items: center;
	background: var(--wn-surface-sunken);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius);
}
.wn-character-card__name {
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-h4);
	color: var(--wn-bone);
}

/* Guild card */
.wn-guild-card { display: flex; gap: var(--wn-space-4); align-items: center; }
.wn-guild-card__crest {
	width: 48px; height: 48px; flex: none;
	border: 1px solid var(--wn-border);
	border-radius: var(--wn-radius-sm);
	object-fit: cover;
}

/* ==========================================================================
   TABS
   ========================================================================== */

.wn-tabs {
	display: flex;
	gap: var(--wn-space-1);
	border-bottom: 1px solid var(--wn-border-hairline);
	overflow-x: auto;
	scrollbar-width: none;
}

.wn-tabs::-webkit-scrollbar { display: none; }

.wn-tab {
	position: relative;
	padding: var(--wn-space-3) var(--wn-space-5);
	background: none;
	border: 0;
	color: var(--wn-text-muted);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-label);
	font-weight: 600;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--wn-dur) var(--wn-ease);
}

.wn-tab:hover { color: var(--wn-text-secondary); }

.wn-tab[aria-selected="true"] { color: var(--wn-gold-bright); }

.wn-tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: var(--wn-space-4); right: var(--wn-space-4);
	bottom: -1px;
	height: 2px;
	background: var(--wn-gold);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.wn-pagination { display: flex; flex-wrap: wrap; gap: var(--wn-space-1); }

.wn-pagination a,
.wn-pagination span {
	display: grid;
	place-items: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: var(--wn-space-2);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius-sm);
	font-size: var(--wn-text-small);
	color: var(--wn-text-secondary);
}

.wn-pagination a:hover { border-color: var(--wn-border-strong); color: var(--wn-gold-bright); }

.wn-pagination [aria-current="page"] {
	border-color: var(--wn-gold);
	background: rgba(200, 163, 90, 0.12);
	color: var(--wn-gold-bright);
}

/* ==========================================================================
   MODAL
   ========================================================================== */

.wn-modal {
	position: fixed;
	inset: 0;
	z-index: var(--wn-z-modal);
	display: grid;
	place-items: center;
	padding: var(--wn-gutter);
	background: rgba(6, 7, 9, 0.86);
	backdrop-filter: blur(6px);
}

.wn-modal[hidden] { display: none; }

.wn-modal__dialog {
	width: min(560px, 100%);
	max-height: 85vh;
	overflow-y: auto;
	background: var(--wn-stone-face);
	border: 1px solid var(--wn-border);
	border-radius: var(--wn-radius-lg);
	box-shadow: var(--wn-shadow-deep);
}

/* ==========================================================================
   TOOLTIP
   ========================================================================== */

.wn-tooltip { position: relative; }

.wn-tooltip__bubble {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--wn-z-tooltip);
	width: max-content;
	max-width: 260px;
	padding: var(--wn-space-2) var(--wn-space-3);
	background: var(--wn-obsidian);
	border: 1px solid var(--wn-border);
	border-radius: var(--wn-radius-sm);
	box-shadow: var(--wn-shadow);
	font-size: var(--wn-text-tiny);
	line-height: 1.45;
	color: var(--wn-text-secondary);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--wn-dur) var(--wn-ease), visibility var(--wn-dur);
}

.wn-tooltip:hover .wn-tooltip__bubble,
.wn-tooltip:focus-within .wn-tooltip__bubble { opacity: 1; visibility: visible; }

/* ==========================================================================
   EMPTY / DEGRADED STATE
   Shown when a data source is unavailable on this distribution.
   ========================================================================== */

.wn-empty {
	padding: var(--wn-space-6);
	border: 1px dashed var(--wn-border-iron);
	border-radius: var(--wn-radius);
	text-align: center;
	color: var(--wn-text-muted);
	font-size: var(--wn-text-small);
}

/* ==========================================================================
   PUBLIC TEST 01 — SHARED NOTICE
   --------------------------------------------------------------------------
   One prominent message per page, rendered by partials/public-test.php.
   Uses only existing design tokens: no new palette, no new type scale.
   Disappears entirely (partial returns early) once season.php is switched
   back to 'official_season'.
   ========================================================================== */

.wn-pt {
	position: relative;
	z-index: var(--wn-z-base, 1);
	background:
		linear-gradient(180deg, rgba(181, 118, 44, 0.14), rgba(181, 118, 44, 0.05)),
		var(--wn-surface-sunken);
	border-bottom: 1px solid var(--wn-border-strong);
	border-top: 1px solid var(--wn-border-iron);
}

.wn-pt__inner {
	display: flex;
	gap: var(--wn-space-4);
	align-items: flex-start;
	padding: var(--wn-space-5) 0;
}

.wn-pt--compact .wn-pt__inner {
	padding: var(--wn-space-3) 0;
	align-items: center;
}

.wn-pt__mark {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	color: var(--wn-warning);
	margin-top: 2px;
}

.wn-pt--compact .wn-pt__mark { width: 20px; height: 20px; margin-top: 0; }
.wn-pt__mark svg { width: 100%; height: 100%; }

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

.wn-pt__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wn-space-2);
	margin: 0 0 var(--wn-space-2);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-tiny);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wn-text-muted);
}

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

.wn-pt__badge {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--wn-warning);
	border-radius: var(--wn-radius-sm);
	background: rgba(181, 118, 44, 0.14);
	color: var(--wn-gold-bright);
	font-weight: 700;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.wn-pt__title {
	margin: 0;
	font-family: var(--wn-font-display);
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--wn-text);
}

.wn-pt--compact .wn-pt__title {
	font-size: var(--wn-text-small);
	font-family: var(--wn-font-body);
	font-weight: 600;
	color: var(--wn-text-secondary);
}

.wn-pt__text {
	margin: var(--wn-space-3) 0 0;
	max-width: 72ch;
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-small);
	line-height: 1.65;
	color: var(--wn-text-secondary);
}

.wn-pt__points {
	margin: var(--wn-space-3) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wn-space-2);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.wn-pt__points li {
	position: relative;
	padding-left: var(--wn-space-4);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-tiny);
	line-height: 1.55;
	color: var(--wn-text-secondary);
}

.wn-pt__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	transform: rotate(45deg);
	background: var(--wn-gold-deep);
}

.wn-pt__thanks {
	margin: var(--wn-space-3) 0 0;
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-tiny);
	color: var(--wn-text-muted);
	font-style: italic;
}

@media (max-width: 719px) {
	.wn-pt__inner { gap: var(--wn-space-3); padding: var(--wn-space-4) 0; }
	.wn-pt__title { font-size: 1.05rem; }
}

/* Small consistent references elsewhere — never a second warning block. */

.wn-header__testmark {
	display: none;
	padding: 0.2rem 0.5rem;
	border: 1px solid var(--wn-border-strong);
	border-radius: var(--wn-radius-sm);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-tiny);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wn-gold-bright);
	white-space: nowrap;
}

@media (min-width: 1240px) { .wn-header__testmark { display: inline-block; } }

.wn-drawer__testmark {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wn-space-2);
	margin: 0 0 var(--wn-space-4);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-tiny);
	color: var(--wn-text-muted);
}

.wn-footer__region,
.wn-gateway__region {
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-tiny);
	letter-spacing: 0.06em;
	color: var(--wn-text-muted);
}

.wn-gateway__region { margin-top: var(--wn-space-3); text-align: center; }

.wn-banner__season--test .wn-banner__season-id { color: var(--wn-gold-bright); }

.wn-model__note {
	margin: 0 0 var(--wn-space-5);
	padding: var(--wn-space-3) var(--wn-space-4);
	border-left: 2px solid var(--wn-gold-deep);
	background: var(--wn-surface-sunken);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-tiny);
	line-height: 1.6;
	color: var(--wn-text-secondary);
}

/* Chapter stations rendered as the MODEL (no live season running) read as
   neutral reference rather than as progress. */
.wn-chapter-station[data-state="model"] { opacity: 0.92; }

/* ==========================================================================
   LANGUAGE SELECTOR
   --------------------------------------------------------------------------
   Text labels (EN / PL / PT-BR), not flags: pt-BR is a language, and the
   server region is stated separately and honestly as Europe.
   ========================================================================== */

.wn-lang {
	display: flex;
	align-items: center;
	gap: var(--wn-space-2);
}

.wn-lang__label {
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-tiny);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wn-text-muted);
}

.wn-lang--header .wn-lang__label { display: none; }

.wn-lang__options {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius);
	background: var(--wn-surface-sunken);
}

.wn-lang__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 1.85rem;
	padding: 0 var(--wn-space-2);
	border-radius: var(--wn-radius-sm);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-tiny);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--wn-text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--wn-dur) var(--wn-ease),
	            background-color var(--wn-dur) var(--wn-ease);
}

.wn-lang__option:hover { color: var(--wn-text); background: var(--wn-surface-raised); }

.wn-lang__option--active {
	background: linear-gradient(180deg, rgba(200, 163, 90, 0.20), rgba(200, 163, 90, 0.08));
	color: var(--wn-gold-bright);
	cursor: default;
}

.wn-lang__option:focus-visible {
	outline: 2px solid var(--wn-gold);
	outline-offset: 2px;
}

/* Desktop: the selector sits in the header, left of the account buttons.
   Below the drawer breakpoint the drawer copy is the one that is used, so the
   header copy is hidden to keep the burger reachable on small screens. */
.wn-lang--header { display: none; }
@media (min-width: 1080px) { .wn-lang--header { display: flex; } }

.wn-lang--drawer {
	justify-content: space-between;
	margin: var(--wn-space-4) 0;
	padding-top: var(--wn-space-4);
	border-top: 1px solid var(--wn-border-iron);
}

.wn-lang--drawer .wn-lang__option { min-width: 3rem; min-height: 2.5rem; }