/**
 * WarExpand wiki theme.
 *
 * Loaded by the BeforePageDisplay hook in LocalSettings.php on top of Vector
 * 2022 night mode. Night mode paints the whole skin from Codex CSS custom
 * properties, so this file mostly re-maps those tokens to the game's palette
 * (see apps/client/src/app/features/auth/): navy #020917 base, zinc panels,
 * cyan accents, mono/uppercase HUD typography.
 */

html.skin-theme-clientpref-night {
	/* Surfaces */
	--background-color-base: #020917;
	--background-color-neutral: #18181b;
	--background-color-neutral-subtle: #09090b;
	--background-color-interactive: #18181b;
	--background-color-interactive-subtle: #0b0f14;
	--background-color-disabled: #27272a;
	--background-color-disabled-subtle: #18181b;
	--background-color-inverted: #f4f4f5;

	/* Text */
	--color-base: #f4f4f5;
	--color-emphasized: #ffffff;
	--color-subtle: #a1a1aa;
	--color-placeholder: #71717a;
	--color-disabled: #52525b;
	--color-inverted: #020917;

	/* Cyan accent (game primary) */
	--color-progressive: #22d3ee;
	--color-progressive--hover: #67e8f9;
	--color-progressive--active: #a5f3fc;
	--color-progressive--focus: #22d3ee;
	--color-visited: #0e9db8;
	--color-link-red: #f87171;
	--background-color-progressive: #06b6d4;
	--background-color-progressive--hover: #0891b2;
	--background-color-progressive--active: #155e75;
	--background-color-progressive-subtle: rgba( 6, 182, 212, 0.1 );

	/* Semantics (game: red war, emerald ok, amber warning) */
	--color-destructive: #ef4444;
	--color-destructive--hover: #f87171;
	--color-error: #f87171;
	--color-warning: #fbbf24;
	--color-success: #34d399;

	/* Borders + focus */
	--border-color-base: #27272a;
	--border-color-subtle: #27272a;
	--border-color-muted: #18181b;
	--border-color-interactive: #3f3f46;
	--border-color-disabled: #27272a;
	--border-color-progressive: rgba( 34, 211, 238, 0.35 );
	--box-shadow-color-progressive--focus: rgba( 34, 211, 238, 0.2 );
	--border-color-progressive--focus: #22d3ee;
}

/* Faint 64px cyan grid, as on the game's auth backdrop. */
html.skin-theme-clientpref-night body {
	background-color: #020917;
	background-image:
		repeating-linear-gradient( 0deg, rgba( 34, 211, 238, 0.032 ) 0 1px, transparent 1px 64px ),
		repeating-linear-gradient( 90deg, rgba( 34, 211, 238, 0.032 ) 0 1px, transparent 1px 64px );
	background-attachment: fixed;
}

/* Let the auth-backdrop layers on <body> show through the page container. */
html.skin-theme-clientpref-night .mw-page-container {
	background: transparent;
}

/*
 * Auth-backdrop glow orbs + CRT scanlines (auth-background.component.ts).
 * The orbs are radial gradients rather than blur()ed divs — same soft look,
 * no filter cost. Painted between the body background (grid) and content.
 */
html.skin-theme-clientpref-night body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient( ellipse 30% 25% at 15% 45%, rgba( 8, 145, 178, 0.09 ), transparent 70% ),
		radial-gradient( ellipse 25% 30% at 90% 15%, rgba( 67, 56, 202, 0.06 ), transparent 70% );
	animation: wx-pulse-glow 12s ease-in-out infinite;
}

html.skin-theme-clientpref-night body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 3px,
		rgba( 0, 0, 0, 0.016 ) 3px,
		rgba( 0, 0, 0, 0.016 ) 4px
	);
}

@keyframes wx-pulse-glow {
	0%, 100% { opacity: 0.75; }
	50% { opacity: 1; }
}

/* HUD typography: mono + uppercase + wide tracking on headings/chrome only. */
html.skin-theme-clientpref-night .firstHeading,
html.skin-theme-clientpref-night .vector-menu-heading,
html.skin-theme-clientpref-night .vector-pinnable-header-label,
html.skin-theme-clientpref-night .mw-portlet .vector-menu-heading,
html.skin-theme-clientpref-night .vector-toc .vector-toc-pinnable-header .vector-pinnable-header-label {
	font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

html.skin-theme-clientpref-night .firstHeading {
	color: #f4f4f5;
	border-bottom-color: #27272a;
}

/*
 * Header title: with no $wgLogos configured, Vector renders the site name as
 * a text wordmark (<strong class="mw-logo-wordmark">). Style it in the game's
 * HUD typography and cancel the skin-invert filter that darkens it in night
 * mode.
 */
html.skin-theme-clientpref-night .mw-logo .skin-invert {
	filter: none;
}

html.skin-theme-clientpref-night .mw-logo {
	text-decoration: none;
}

html.skin-theme-clientpref-night .mw-logo .mw-logo-wordmark {
	color: #f4f4f5;
	font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
}

html.skin-theme-clientpref-night .mw-logo:hover .mw-logo-wordmark {
	color: #67e8f9;
}

/* Header / sticky header / footer chrome */
html.skin-theme-clientpref-night .vector-header-container .mw-header,
html.skin-theme-clientpref-night .vector-sticky-header,
html.skin-theme-clientpref-night .mw-footer-container {
	background-color: rgba( 9, 9, 11, 0.85 );
	border-color: #27272a;
}

/* Content tables, game-panel style */
html.skin-theme-clientpref-night .wikitable {
	background-color: rgba( 24, 24, 27, 0.8 );
	color: #f4f4f5;
	border: 1px solid #27272a;
	border-radius: 4px;
}

html.skin-theme-clientpref-night .wikitable > tr > th,
html.skin-theme-clientpref-night .wikitable > * > tr > th {
	background-color: #09090b;
	color: #a5f3fc;
	border-color: #27272a;
	font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.85em;
}

html.skin-theme-clientpref-night .wikitable > tr > td,
html.skin-theme-clientpref-night .wikitable > * > tr > td {
	border-color: #27272a;
}

/* Code blocks */
html.skin-theme-clientpref-night .mw-body pre,
html.skin-theme-clientpref-night .mw-body code,
html.skin-theme-clientpref-night .mw-highlight {
	background-color: #0b0f14;
	border-color: #27272a;
	color: #d4d4d8;
	border-radius: 4px;
}

/* Buttons: game primary button look (cyan border 35%, cyan 10% fill). */
html.skin-theme-clientpref-night .cdx-button--action-progressive.cdx-button--weight-primary,
html.skin-theme-clientpref-night .mw-ui-button.mw-ui-progressive {
	background-color: rgba( 6, 182, 212, 0.1 );
	border: 1px solid rgba( 34, 211, 238, 0.35 );
	color: #cffafe;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	font-size: 0.8em;
	font-weight: 700;
}

html.skin-theme-clientpref-night .cdx-button--action-progressive.cdx-button--weight-primary:hover,
html.skin-theme-clientpref-night .mw-ui-button.mw-ui-progressive:hover {
	background-color: rgba( 34, 211, 238, 0.16 );
	border-color: rgba( 103, 232, 249, 0.55 );
	color: #ffffff;
}

/* Search field + dropdowns on panel surfaces */
html.skin-theme-clientpref-night .cdx-text-input__input,
html.skin-theme-clientpref-night .cdx-search-input,
html.skin-theme-clientpref-night .vector-dropdown-content,
html.skin-theme-clientpref-night .cdx-menu {
	background-color: rgba( 9, 9, 11, 0.95 );
	border-color: #27272a;
	color: #f4f4f5;
	border-radius: 4px;
}

/* Thumbnails / infobox-ish frames */
html.skin-theme-clientpref-night .thumbinner,
html.skin-theme-clientpref-night .mw-file-description,
html.skin-theme-clientpref-night .catlinks {
	background-color: rgba( 24, 24, 27, 0.6 );
	border-color: #27272a;
	border-radius: 4px;
}