/* Game wiki colors for the Citizen skin. gen_theme.py fills this in from the game's
   theme file and writes it, with Common.css, to branding/<wiki>/theme.css. */

:root {
	--game-panel: #292963;
	--game-panel-dark: #100029;
	--game-frame: #738C94;
	--game-gold: #C68418;
	--game-title-from: #D6DEFF;
	--game-title-to: #4A08DE;
	/* Citizen tints every surface with this hue: the game's panel navy. */
	--color-progressive-oklch__h: 279.05;
	--color-link: #7A5208;
	--color-progressive: #7A5208;
}

:root.skin-theme-clientpref-night {
	--color-link: var( --game-gold );
	--color-progressive: var( --game-gold );
}

@media ( prefers-color-scheme: dark ) {
	:root.skin-theme-clientpref-os {
		--color-link: var( --game-gold );
		--color-progressive: var( --game-gold );
	}
}

/* Game wiki styles: headings, infoboxes, game text, keyword colors and the Main Page.
   gen_theme.py appends this to Citizen.css (the colors) in branding/<wiki>/theme.css. */

/* Headings in the game's own font. Pixel fonts stay sharp at multiples of 8px.
   !important because Citizen and PortableInfobox set heading fonts more specifically. */
.mw-page-title-main,
.mw-heading2 h2,
.mw-body h2,
.portable-infobox .pi-title {
	font-family: 'GameHeading', var( --font-family-base ) !important;
	font-weight: normal;
	letter-spacing: 0.02em;
	-webkit-font-smoothing: none;
}

.mw-page-title-main {
	font-size: 32px;
	background: linear-gradient( 90deg, var( --game-title-from ), var( --game-title-to ) );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mw-heading2 h2 {
	font-size: 24px;
}

/* Infoboxes look like the game's navy and gold windows, in both color themes. */
.portable-infobox {
	background: var( --game-panel );
	border: 2px solid var( --game-gold );
	border-radius: 4px;
	color: #eef0f8;
	box-shadow: 0 0 0 2px var( --game-panel-dark );
}

.portable-infobox .pi-title {
	background: var( --game-panel-dark );
	color: var( --game-gold );
	font-size: 16px;
	padding: 12px;
}

.portable-infobox .pi-image {
	padding: 12px;
	text-align: center;
}

.portable-infobox .pi-image img {
	max-width: 100%;
	height: auto;
}

.portable-infobox .pi-data {
	border-top: 1px solid rgba( 255, 255, 255, 0.08 );
}

.portable-infobox .pi-data-label {
	color: var( --game-frame );
}

.portable-infobox a {
	color: var( --game-gold );
}

/* Text quoted from the game. */
blockquote.game-text {
	margin: 1em 0;
	padding: 12px 16px;
	border-left: 4px solid var( --game-gold );
	background: var( --color-surface-2 );
}

/* Keywords in the game's own colors; darkened on a light background so they stay readable. */
.kw {
	color: color-mix( in oklab, var( --kw ) 55%, black );
	font-weight: 600;
}

:root.skin-theme-clientpref-night .kw {
	color: var( --kw );
}

@media ( prefers-color-scheme: dark ) {
	:root.skin-theme-clientpref-os .kw {
		color: var( --kw );
	}
}

/* Main Page */
.page-Main_Page .mw-page-title-main,
.page-Main_Page .firstHeading {
	display: none;
}

.wiki-banner {
	display: flex;
	align-items: flex-end;
	min-height: 240px;
	margin-bottom: 24px;
	padding: 24px;
	border: 2px solid var( --game-gold );
	border-radius: 4px;
	/* The wordmark over the key art, as two background layers. */
	background:
		url( '/branding/nwrx/wordmark.png' ) 24px calc( 100% - 24px ) / min( 464px, 70% ) auto no-repeat,
		url( '/branding/nwrx/banner.png' ) center / cover no-repeat;
	image-rendering: pixelated;
}

.gd-gallery {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 128px, 1fr ) );
	gap: 16px;
}

.gd-gallery-item {
	padding: 12px;
	border: 2px solid var( --game-gold );
	border-radius: 4px;
	background: var( --game-panel );
	text-align: center;
}

.gd-gallery-item img {
	image-rendering: pixelated;
}

.gd-gallery-item a {
	color: var( --game-gold );
	font-family: 'GameHeading', var( --font-family-base );
	-webkit-font-smoothing: none;
}

.gd-browse {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0;
	list-style: none;
}

.gd-browse li {
	margin: 0;
	padding: 8px 16px;
	border: 2px solid var( --game-gold );
	border-radius: 4px;
	background: var( --game-panel );
}

.gd-browse a {
	color: var( --game-gold );
}

.gd-browse .gd-count {
	color: var( --game-frame );
	margin-left: 8px;
}