MediaWiki:Vector.css: Difference between revisions

Revision as of 18:06, 29 June 2026

/*
 * Wizards & Warlords Citizen skin overrides.
 *
 * Common.css owns article and template styling. This file only supplies the
 * Citizen colour palette, Citizen shell adjustments, and mobile layout fixes
 * for shared components that need a different narrow-screen presentation.
 */

/* ==========================================================================
   Responsive Layout Standard
   --------------------------------------------------------------------------
   Phone: 0-599px; tablet / large phone: 600-899px; small desktop /
   landscape tablet: 900-1199px; full desktop: 1200px+.
   Citizen is developed directly as the mobile/tablet skin; MobileFrontend is
   not required or assumed by these rules.
   ========================================================================== */

/* ==========================================================================
   Citizen Theme And Shared Site Colours
   ========================================================================== */
:root {
	/* Wizards & Warlords content tokens used by Common.css. */
	--wiz-content-background: #222;
	--wiz-panel-solid-background: #0f0f0f;
	--wiz-page-background: #111;
	--wiz-content-border: #ff942d;
	--wiz-text: #d2d2d2;
	--wiz-link: #ff942d;
	--wiz-heading: #e7e1d4;

	/* Citizen's native palette. Keep the skin aligned with the existing site. */
	--color-primary__h: 28;
	--color-surface-0: #111;
	--color-surface-1: #171717;
	--color-surface-2: #1f1e1e;
	--color-surface-3: #252525;
	--color-surface-4: #2c2b2b;
	--color-progressive: #ff942d;
	--color-progressive--hover: #ffd37a;
	--color-progressive--active: #e57d1d;
	--color-base: #d2d2d2;
	--color-subtle: #b9b3a8;
	--color-emphasized: #e7e1d4;
	--color-base-oklch__l: 85%;
	--color-base-oklch__c: 0;
	--color-subtle-oklch__l: 72%;
	--color-subtle-oklch__c: 0;
	--color-emphasized-oklch__l: 93%;
	--color-emphasized-oklch__c: 0;
}

/* ==========================================================================
   Citizen Page Shell
   ========================================================================== */
.skin-citizen {
	background-color: var(--wiz-page-background);
	color: var(--wiz-text);
}

.skin-citizen .citizen-page-container {
	background-color: var(--wiz-page-background);
}

.skin-citizen .citizen-header {
	background-color: var(--color-surface-1);
	border-color: var(--wiz-content-border);
}

.skin-citizen .citizen-page-actions,
.skin-citizen .citizen-toc {
	--color-surface-1: #171717;
	--color-surface-2: #1f1e1e;
}

.skin-citizen .mw-body {
	color: var(--wiz-text);
}

.skin-citizen .mw-first-heading {
	border-bottom: 1px solid var(--wiz-content-border);
	color: var(--wiz-heading);
}

.skin-citizen .mw-parser-output a:not(.new),
.skin-citizen .mw-first-heading a {
	color: var(--wiz-link);
}

.skin-citizen .mw-parser-output a:not(.new):hover,
.skin-citizen .mw-first-heading a:hover {
	color: #ffd37a;
}

/* Citizen applies its own external-link colours after Common.css. Keep links
   in the shared homepage navigation-list component orange and bold. */
.skin-citizen .mw-parser-output .wizlords-mainpage-link-list a,
.skin-citizen .mw-parser-output .wizlords-mainpage-link-list a:visited,
.skin-citizen .mw-parser-output .wizlords-mainpage-link-list a.external,
.skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a,
.skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a:visited,
.skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a.external {
	color: var(--wiz-link);
	font-weight: normal;
	text-decoration: none;
}

.skin-citizen .mw-parser-output .wizlords-mainpage-link-list a:hover,
.skin-citizen .mw-parser-output .wizlords-mainpage-link-list a.external:hover,
.skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a:hover,
.skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a.external:hover {
	color: #ffd37a;
	text-decoration: none;
}

/* Keep the footer close to the article; this site has no advertising area. */
.skin-citizen .citizen-footer {
	margin-top: 2rem;
}

.skin-citizen .citizen-footer {
	color: var(--color-subtle);
}

.skin-citizen .citizen-footer a {
	color: var(--wiz-link);
}

.skin-citizen .citizen-footer a:hover {
	color: #ffd37a;
}

/* ==========================================================================
   Tables And Media
   ========================================================================== */
/* Citizen adds overflow wrappers around wide tables. Let them use the full
   article width so existing tables can scroll instead of shrinking the page. */
.skin-citizen .citizen-overflow-wrapper {
	width: 100%;
	max-width: 100%;
}

.skin-citizen .mw-parser-output img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   MobileFrontend Collapsible Article Sections
   --------------------------------------------------------------------------
   MobileFormatter adds .collapsible-heading and .collapsible-block, then
   toggles .open-block on both elements. Keep collapsed headings visually
   quiet and row-like; restore the orange divider only for expanded sections.
   This is scoped to Citizen + MobileFrontend and does not affect Vector.
   ========================================================================== */
.skin-citizen.mw-mf .collapsible-heading {
	box-sizing: border-box;
	margin-top: 0;
	margin-bottom: 6px;
	padding-top: 12px;
	padding-bottom: 12px;
	border-bottom: 0;
	background-image: none;
}

.skin-citizen.mw-mf .collapsible-heading.open-block {
	margin-bottom: 0;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--wiz-content-border, #ff942d);
}

.skin-citizen.mw-mf .collapsible-block {
	margin-top: 0;
	padding-top: 0;
}

.skin-citizen.mw-mf
.collapsible-heading.open-block
+ .collapsible-block.open-block {
	margin-top: 12px;
}

/* ==========================================================================
   Citizen Homepage Sections
   --------------------------------------------------------------------------
   Citizen stacks the desktop left/right homepage blocks. Establish explicit
   section spacing so heading margins cannot collapse into large blank bands,
   centre the introductory copy, and retain the desktop orange divider.
   ========================================================================== */
.skin-citizen .wizlords-mainpage-left,
.skin-citizen .wizlords-mainpage-right {
	display: flow-root;
}

.skin-citizen .wizlords-mainpage-left > h2.center,
.skin-citizen .wizlords-mainpage-right > h2.center,
.skin-citizen .wizlords-mainpage-left > .mw-heading2,
.skin-citizen .wizlords-mainpage-right > .mw-heading2 {
	box-sizing: border-box;
	width: 100%;
	margin: 14px 0 7px;
	padding: 0 0 4px;
	border-bottom: 0;
	background-image: linear-gradient(
		to right,
		var(--wiz-content-border),
		var(--wiz-content-border)
	);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 65% 1px;
	color: var(--wiz-heading);
	text-align: center;
}

.skin-citizen .wizlords-mainpage-left > .mw-heading2 h2,
.skin-citizen .wizlords-mainpage-right > .mw-heading2 h2 {
	margin: 0;
	color: var(--wiz-heading);
	text-align: center;
}

.skin-citizen .wizlords-mainpage-left > p,
.skin-citizen .wizlords-mainpage-right > p,
.skin-citizen .wizlords-mainpage-left > .center > p,
.skin-citizen .wizlords-mainpage-right > .center > p {
	max-width: 760px;
	margin: 6px auto 8px;
	text-align: center;
}

/* Give introductory copy a little breathing room before wide homepage cards
   without increasing spacing in the square-icon sections. */
.skin-citizen
:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
> .center:has(> .wizlords-wideimagetext-grid)
> p {
	margin-bottom: 16px;
}

/* Separate homepage lists from the introductory paragraph above them. */
.skin-citizen .wizlords-mainpage-left > ul,
.skin-citizen .wizlords-mainpage-right > ul,
.skin-citizen .wizlords-mainpage-left > ol,
.skin-citizen .wizlords-mainpage-right > ol,
.skin-citizen .wizlords-mainpage-left > .center > ul,
.skin-citizen .wizlords-mainpage-right > .center > ul,
.skin-citizen .wizlords-mainpage-left > .center > ol,
.skin-citizen .wizlords-mainpage-right > .center > ol {
	margin-top: 14px;
}

/* ==========================================================================
   Citizen Homepage Square Icon Links
   --------------------------------------------------------------------------
   The desktop dimensions live in Vector.css, which Citizen does not load.
   Define a compact four-column version here for the square homepage links.
   Wide image cards use separate classes and are intentionally unaffected.
   ========================================================================== */
.skin-citizen .wizlords-mainpage-items,
.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 8px;
	justify-content: center;
	align-items: start;
	width: 100%;
	min-width: 0;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

/* MediaWiki may place introductory text in the same .center wrapper as the
   icon links. Keep that text above the grid instead of treating it as an icon
   cell. */
.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p,
.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p {
	flex: 0 0 100%;
	width: 100%;
	margin: 0 0 8px;
	text-align: center;
}

/* MediaWiki sometimes wraps the first block-style icon link in a paragraph.
   Flatten only those icon wrappers so every icon participates in the same
   homepage grid/flex row. Plain text paragraphs keep their normal layout. */
.skin-citizen
:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
> .center
> p:has(.wizlords-imagetext) {
	display: contents;
}

.skin-citizen .wizlords-imagetext {
	display: block;
	flex: 0 0 calc((100% - 24px) / 4);
	box-sizing: border-box;
	width: calc((100% - 24px) / 4);
	max-width: none;
	min-width: 0;
	min-height: 0;
	margin: 0;
	text-align: center;
}

.skin-citizen .wizlords-imagetext-image {
	width: 64px;
	height: 64px;
	margin: 0 auto;
}

.skin-citizen .wizlords-imagetext-image img {
	display: block;
	width: 64px;
	height: 64px;
	max-width: 100%;
	object-fit: contain;
	border: 0;
	background: transparent;
}

.skin-citizen .wizlords-imagetext-text {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 34px;
	height: auto;
	margin-top: 4px;
	color: var(--wiz-link);
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
	overflow-wrap: anywhere;
}

.skin-citizen .wizlords-imagetext-text a {
	color: var(--wiz-link);
	text-decoration: none;
}

.skin-citizen .wizlords-imagetext-text a:hover {
	color: #ffd37a;
}

/* MediaWiki can insert paragraph wrappers around block-style homepage cards.
   Flatten wrappers that contain a wide card so the card itself participates
   in the responsive flex layout. */
.skin-citizen
:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
> .center
> p:has(.wizlords-wideimagetext) {
	display: contents;
}

/* Small-desktop / landscape-tablet Citizen keeps the desktop-style four-slot
   rhythm, but uses larger icons so the wider mobile/tablet skin does not feel
   sparse before the full desktop Vector layout takes over. */
@media screen and (min-width: 900px) and (max-width: 1199px) {
	.skin-citizen .wizlords-mainpage-items,
	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
		gap: 20px 16px;
	}

	.skin-citizen .wizlords-imagetext {
		flex-basis: calc((100% - 48px) / 4);
		width: calc((100% - 48px) / 4);
	}

	.skin-citizen .wizlords-imagetext-image,
	.skin-citizen .wizlords-imagetext-image img {
		width: clamp(92px, 10vw, 108px);
		height: clamp(92px, 10vw, 108px);
	}

	.skin-citizen .wizlords-imagetext-text {
		font-size: 13px;
	}
}

/* Full-width Citizen fallback. Normal desktop visitors use Vector, but this
   keeps Citizen tidy if it is tested manually on a wide screen. */
@media screen and (min-width: 1200px) {
	.skin-citizen .wizlords-mainpage-items,
	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
		gap: 16px 12px;
	}

	.skin-citizen .wizlords-imagetext {
		flex-basis: calc((100% - 36px) / 4);
		width: calc((100% - 36px) / 4);
	}

	.skin-citizen .wizlords-imagetext-image,
	.skin-citizen .wizlords-imagetext-image img {
		width: 82px;
		height: 82px;
	}

	.skin-citizen .wizlords-imagetext-text {
		font-size: 13px;
	}
}

/* Phone-only wide-card fallback. Tablet receives the four-slot treatment in
   the dedicated tablet section below. */
@media screen and (max-width: 599px) {
	/* Let each phone label use its natural one- or two-line height. Reserving
	   two lines for every label creates visible empty space in sections whose
	   first-row labels all fit on one line, such as Character Creation. */
	.skin-citizen .wizlords-imagetext-text {
		min-height: 0;
	}

	/* Homepage navigation lists use a centred readable block while individual
	   bullets remain conventionally left-aligned. */
	.skin-citizen .wizlords-mainpage-link-list,
	.skin-citizen .wizlords-useful-links,
	.skin-citizen .wizlords-mainpage-whatislarp-list {
		box-sizing: border-box;
		width: 100%;
		max-width: 320px;
		margin-right: auto;
		margin-left: auto;
		padding-left: 24px;
		list-style: disc outside;
		text-align: left;
	}

	/* Match the What is LARP list to the paragraph's phone-width text column.
	   The padding creates a normal hanging bullet while keeping the bullet
	   edge aligned with the paragraph above. */
	.skin-citizen .wizlords-mainpage-whatislarp-list {
		max-width: 100%;
		margin-right: 0;
		margin-left: 0;
		padding-left: 24px;
	}

	.skin-citizen .wizlords-wideimagetext {
		max-width: 100%;
	}

	.skin-citizen .wizlords-wideimagetext-grid,
	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-wideimagetext),
	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-wideimagetext) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px 10px;
		width: 100%;
	}

	.skin-citizen .wizlords-wideimagetext-grid .wizlords-wideimagetext,
	.skin-citizen .wizlords-mainpage-left > .center .wizlords-wideimagetext,
	.skin-citizen .wizlords-mainpage-right > .center .wizlords-wideimagetext {
		flex: 0 0 calc((100% - 10px) / 2);
		box-sizing: border-box;
		width: calc((100% - 10px) / 2);
		max-width: none;
		margin: 0;
		text-align: center;
	}

	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-wideimagetext) > p,
	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-wideimagetext) > p {
		flex: 0 0 100%;
		width: 100%;
		margin: 0 0 6px;
	}

	.skin-citizen .wizlords-wideimagetext-image,
	.skin-citizen .wizlords-wideimagetext-image img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 2 / 1;
		object-fit: cover;
		border: 0;
		background: transparent;
	}

	.skin-citizen .wizlords-wideimagetext-text {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		min-height: 34px;
		height: auto;
		margin-top: 4px;
		font-size: 12px;
		line-height: 1.2;
		text-align: center;
		overflow-wrap: anywhere;
	}
}

/* ==========================================================================
   Citizen Tablet Homepage
   --------------------------------------------------------------------------
   At 600-899px the homepage uses the available width as one broad content
   column. The square icon groups need one component-specific split inside the
   tablet range: 600-799px keeps the stable four-column rhythm, while 800-899px
   has enough room for compact single-row groups. This avoids ugly orphan rows
   such as 5+2 or 6+1.
   ========================================================================== */
@media screen and (min-width: 600px) and (max-width: 899px) {
	.skin-citizen .wizlords-mainpage-left,
	.skin-citizen .wizlords-mainpage-right {
		max-width: 760px;
		margin-right: auto;
		margin-left: auto;
	}

	/* Keep tablet landing-page copy in a readable centred column while the
	   icon and card grids continue using the full 760px section width. */
	.skin-citizen .wizlords-mainpage-left > p,
	.skin-citizen .wizlords-mainpage-right > p,
	.skin-citizen .wizlords-mainpage-left > .center > p,
	.skin-citizen .wizlords-mainpage-right > .center > p {
		max-width: 620px;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	.skin-citizen .wizlords-mainpage-link-list,
	.skin-citizen .wizlords-useful-links,
	.skin-citizen .wizlords-mainpage-whatislarp-list {
		box-sizing: border-box;
		width: 100%;
		max-width: 500px;
		margin-right: auto;
		margin-left: auto;
		padding-left: 32px;
		list-style: disc outside;
		text-align: left;
	}

	/* Use the same 620px reading column as the What is LARP paragraph. */
	.skin-citizen .wizlords-mainpage-whatislarp-list {
		max-width: 620px;
		padding-left: 24px;
	}

	.skin-citizen .wizlords-mainpage-left > h2.center,
	.skin-citizen .wizlords-mainpage-right > h2.center {
		margin-top: 14px;
		margin-bottom: 6px;
	}

	.skin-citizen .wizlords-mainpage-left > p,
	.skin-citizen .wizlords-mainpage-right > p {
		margin-top: 6px;
		margin-bottom: 8px;
	}

	.skin-citizen .wizlords-mainpage-items,
	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 78px));
		gap: 12px 16px;
		justify-content: center;
		justify-items: center;
		align-items: start;
	}

	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p,
	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p {
		grid-column: 1 / -1;
		width: 100%;
		margin-bottom: 4px;
	}

	.skin-citizen .wizlords-imagetext {
		width: 78px;
		max-width: none;
	}

	.skin-citizen .wizlords-imagetext-image,
	.skin-citizen .wizlords-imagetext-image img {
		width: clamp(52px, 7.5vw, 64px);
		height: clamp(52px, 7.5vw, 64px);
	}

	.skin-citizen .wizlords-imagetext-text {
		min-height: 30px;
		margin-top: 3px;
		font-size: 12px;
		line-height: 1.15;
	}

	/* Upper tablet widths can cleanly fit seven or eight compact icons in one
	   row. Use flex here rather than auto-fit grid: auto-fit can create an
	   empty eighth track for seven-item groups once there is enough width,
	   while flex only lays out real icon items. */
	@media screen and (min-width: 800px) {
		.skin-citizen .wizlords-mainpage-items,
		.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
		.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
			display: flex;
			flex-wrap: wrap;
			gap: 10px 14px;
			justify-content: center;
			align-items: flex-start;
		}

		.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p,
		.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p {
			flex: 0 0 100%;
			width: 100%;
		}

		.skin-citizen .wizlords-imagetext {
			flex: 0 0 78px;
		}
	}

	/* The homepage markup splits each four-card group into two nested
	   two-card grids. On tablet, flatten those inner grids into their shared
	   parent so all four cards can occupy one row. Phone keeps the two grids,
	   producing the intended 2x2 layout. */
	.skin-citizen
	:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
	> .center:has(> .wizlords-wideimagetext-grid) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 12px;
		width: 100%;
	}

	.skin-citizen
	:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
	> .center:has(> .wizlords-wideimagetext-grid)
	> p {
		flex: 0 0 100%;
		width: 100%;
		margin: 0 0 16px;
	}

	.skin-citizen
	:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
	> .center
	> .wizlords-wideimagetext-grid {
		display: contents;
	}

	.skin-citizen
	:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
	> .center
	> .wizlords-wideimagetext-grid
	> .wizlords-wideimagetext {
		flex: 0 0 calc((100% - 36px) / 4);
		box-sizing: border-box;
		width: calc((100% - 36px) / 4);
		max-width: none;
		margin: 0;
		text-align: center;
	}

	.skin-citizen .wizlords-wideimagetext-image,
	.skin-citizen .wizlords-wideimagetext-image img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 2 / 1;
		object-fit: cover;
		border: 0;
		background: transparent;
	}

	.skin-citizen .wizlords-wideimagetext-text {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		min-height: 34px;
		height: auto;
		margin-top: 4px;
		font-size: 12px;
		line-height: 1.2;
		text-align: center;
		overflow-wrap: anywhere;
	}
}

/* ==========================================================================
   Phone And Tablet Table Of Contents
   ========================================================================== */
@media screen and (max-width: 899px) {
	.skin-citizen .citizen-page-container {
		padding-right: max(var(--padding-page, 16px), env(safe-area-inset-right));
		padding-left: max(var(--padding-page, 16px), env(safe-area-inset-left));
	}

	.skin-citizen .toc-page #toc,
	.skin-citizen .toc-page .toc {
		float: none;
		width: 100%;
		min-width: 0;
		max-width: none;
		margin: 0 0 18px;
		padding: 14px 16px;
	}
}

/* ==========================================================================
   Phone And Tablet Shared Component Adjustments
   ========================================================================== */
@media screen and (max-width: 899px) {
	.skin-citizen .wizlords-mainpage-left,
	.skin-citizen .wizlords-mainpage-right {
		float: none;
		box-sizing: border-box;
		width: 100%;
		margin-top: 0;
		margin-bottom: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.skin-citizen .wizlords-mainpage-clear {
		clear: both;
	}

	.skin-citizen .wizlords-race-intro,
	.skin-citizen .wizlords-magic-intro {
		align-items: flex-start;
		gap: 16px;
	}

	.skin-citizen .wizlords-race-quote {
		padding-right: 20px;
	}

	.skin-citizen .wizlords-culture-grid {
		grid-template-columns: 1fr;
	}

	.skin-citizen .wizlords-culture-grid .wizlords-culture-card {
		grid-column: auto;
	}

	.skin-citizen .wizlords-culture-row-feature {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.skin-citizen .wizlords-culture-row-icon img {
		margin: 0 auto;
	}

	.skin-citizen .wizlords-culture-row-divider {
		width: 80%;
		height: 1px;
		margin: 0 auto;
	}

	.skin-citizen .wizlords-culture-appearance {
		width: 100%;
	}

	.skin-citizen .wizlords-culture-appearance img {
		width: 100%;
		height: auto;
		aspect-ratio: 300 / 138;
	}

	.skin-citizen .wizlords-shared-classes {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		padding-right: 18px;
		padding-left: 18px;
	}

	.skin-citizen .wizlords-shared-classes ul {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: 1fr;
		width: auto;
	}

	.skin-citizen .wizlords-class-compare {
		flex-direction: column;
	}

	.skin-citizen .wizlords-class-category-table,
	.skin-citizen .wizlords-magic-table {
		min-width: 0;
		max-width: 100%;
	}

	.skin-citizen .wizlords-reputation-table.mw-collapsed {
		width: 100%;
		min-width: 0;
	}

	.skin-citizen .wizlords-page-image.right,
	.skin-citizen .wizlords-page-image.left {
		float: none;
		width: 100%;
		margin: 0 0 18px;
	}

	.skin-citizen .ww-navbox-row {
		display: block;
	}

	.skin-citizen .ww-navbox-group {
		width: 100%;
		padding: 5px 10px;
		border-right: 0;
		border-bottom: 1px solid var(--wiz-content-background);
		text-align: center;
	}

	.skin-citizen .ww-navbox-list {
		padding: 6px 10px;
		text-align: center;
	}
}

@@ Line 1: / Line 1: @@
 /*
-  * Wizards & Warlords Vector skin overrides.
+  * Wizards & Warlords Citizen skin overrides.
   *
-  * This file controls the Vector desktop shell, dark theme, top tabs, sidebar,
+  * Common.css owns article and template styling. This file only supplies the
-  * page title, footer, and desktop homepage layout.
+  * Citizen colour palette, Citizen shell adjustments, and mobile layout fixes
-  *
+  * for shared components that need a different narrow-screen presentation.
- * Some article typography remains below as a temporary compatibility copy.
- * Common.css now contains lower-specificity shared equivalents; retaining the
- * existing Vector selectors keeps the desktop cascade visually unchanged.
   */
@@ Line 15: / Line 12: @@
     Phone: 0-599px; tablet / large phone: 600-899px; small desktop /
     landscape tablet: 900-1199px; full desktop: 1200px+.
-    Vector remains the desktop skin, but its narrow-window fallback follows the
+    Citizen is developed directly as the mobile/tablet skin; MobileFrontend is
-    same viewport boundaries as the rest of the project.
+    not required or assumed by these rules.
     ========================================================================== */
 /* ==========================================================================
-    Theme And Layout Variables
+    Citizen Theme And Shared Site Colours
-   --------------------------------------------------------------------------
-   Change these first when adjusting the overall site width, sidebar width,
-   colours, background image, content padding, or logo size.
     ========================================================================== */
 :root {
-	--wiz-page-width: 1360px;
+	/* Wizards & Warlords content tokens used by Common.css. */
-	--wiz-sidebar-width: 210px;
-	--wiz-sidebar-left-inset: 8px;
-	--wiz-sidebar-right-inset: 8px;
-	--wiz-logo-size: 150px;
-	--wiz-logo-edge-space: calc((var(--wiz-sidebar-width) - var(--wiz-sidebar-left-inset) - var(--wiz-sidebar-right-inset) - var(--wiz-logo-size)) / 2);
-	--wiz-sidebar-content-gap: 0px;
-	--wiz-page-gutter: 24px;
-	--wiz-content-width: calc(var(--wiz-page-width) - var(--wiz-sidebar-width) - var(--wiz-page-gutter));
-	--wiz-content-padding: 20px;
 	--wiz-content-background: #222;
 	--wiz-panel-solid-background: #0f0f0f;
-	--wiz-panel-background: rgba(15, 15, 15, 0.82);
 	--wiz-page-background: #111;
-	--wiz-background-image: url("/mywiki/index.php/Special:Redirect/file/background_circle.jpeg");
 	--wiz-content-border: #ff942d;
 	--wiz-text: #d2d2d2;
 	--wiz-link: #ff942d;
 	--wiz-heading: #e7e1d4;
+	/* Citizen's native palette. Keep the skin aligned with the existing site. */
+	--color-primary__h: 28;
+	--color-surface-0: #111;
+	--color-surface-1: #171717;
+	--color-surface-2: #1f1e1e;
+	--color-surface-3: #252525;
+	--color-surface-4: #2c2b2b;
+	--color-progressive: #ff942d;
+	--color-progressive--hover: #ffd37a;
+	--color-progressive--active: #e57d1d;
+	--color-base: #d2d2d2;
+	--color-subtle: #b9b3a8;
+	--color-emphasized: #e7e1d4;
+	--color-base-oklch__l: 85%;
+	--color-base-oklch__c: 0;
+	--color-subtle-oklch__l: 72%;
+	--color-subtle-oklch__c: 0;
+	--color-emphasized-oklch__l: 93%;
+	--color-emphasized-oklch__c: 0;
 }
 /* ==========================================================================
-    Full Page Background
+    Citizen Page Shell
-   --------------------------------------------------------------------------
-   The background image is attached to the whole browser viewport. The image
-   keeps its aspect ratio and crops instead of stretching or skewing.
     ========================================================================== */
-html {
+.skin-citizen {
-	min-height: 100%;
 	background-color: var(--wiz-page-background);
-	background-image: var(--wiz-background-image);
-	background-repeat: no-repeat;
-	background-position: center center;
-	background-size: cover;
-	background-attachment: fixed;
-}
-/* ==========================================================================
-   Centered Wiki Shell And Panel Tint
-   --------------------------------------------------------------------------
-   The body is the centered 1360px wiki shell. The body::before layer paints
-   the transparent sidebar, right gutter, and header tint without stacking
-   multiple semi-transparent Vector wrappers on top of each other.
-   ========================================================================== */
-body {
-	position: relative;
-	z-index: 0;
-	width: min(100%, var(--wiz-page-width));
-	min-height: 100vh;
-	margin: 0 auto;
-	background: transparent;
 	color: var(--wiz-text);
 }
-body::before {
+.skin-citizen .citizen-page-container {
-	content: "";
+	background-color: var(--wiz-page-background);
-	position: fixed;
-	z-index: -1;
-	top: 0;
-	left: 50%;
-	width: min(100%, var(--wiz-page-width));
-	height: 79px;
-	transform: translateX(-50%);
-	pointer-events: none;
-	background: linear-gradient(
-		to right,
-		var(--wiz-panel-background) 0,
-		var(--wiz-panel-background) calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap)),
-		var(--wiz-panel-background) calc(100% - var(--wiz-page-gutter)),
-		var(--wiz-panel-background) calc(100% - var(--wiz-page-gutter)),
-		var(--wiz-panel-background) 100%
-	);
 }
-/* ==========================================================================
+.skin-citizen .citizen-header {
-   Vector Wrapper Cleanup
+	background-color: var(--color-surface-1);
-   --------------------------------------------------------------------------
+	border-color: var(--wiz-content-border);
-   Vector has several overlapping header/sidebar wrappers. These rules remove
-   their default backgrounds, gradients, shadows, and borders so our single
-   body::before tint layer is the only panel background.
-   ========================================================================== */
-#mw-page-base {
-	background: transparent;
 }
-#mw-head-base,
+.skin-citizen .citizen-page-actions,
-#mw-navigation,
+.skin-citizen .citizen-toc {
-#mw-head {
+	--color-surface-1: #171717;
-	background: transparent;
+	--color-surface-2: #1f1e1e;
-	background-image: none;
 }
-#mw-panel {
+.skin-citizen .mw-body {
-	background: var(--wiz-panel-background);
+	color: var(--wiz-text);
-	background-image: none;
 }
-#mw-head {
+.skin-citizen .mw-first-heading {
-	border-bottom: 0;
+	border-bottom: 1px solid var(--wiz-content-border);
-	background-image: none;
+	color: var(--wiz-heading);
 }
-#mw-head-base {
+.skin-citizen .mw-parser-output a:not(.new),
-	border-bottom: 0;
+.skin-citizen .mw-first-heading a {
-	box-shadow: none;
+	color: var(--wiz-link);
-	outline: 0;
-	opacity: 1;
 }
-#mw-head-base::before,
+.skin-citizen .mw-parser-output a:not(.new):hover,
-#mw-head-base::after {
+.skin-citizen .mw-first-heading a:hover {
-	content: none;
+	color: #ffd37a;
-	display: none;
 }
-/* ==========================================================================
+/* Citizen applies its own external-link colours after Common.css. Keep links
-    Header Navigation Alignment
+    in the shared homepage navigation-list component orange and bold. */
-   --------------------------------------------------------------------------
+.skin-citizen .mw-parser-output .wizlords-mainpage-link-list a,
-   These align the left page tabs, right action tabs, login links, and search
+.skin-citizen .mw-parser-output .wizlords-mainpage-link-list a:visited,
-   box with the content area and right gutter.
+.skin-citizen .mw-parser-output .wizlords-mainpage-link-list a.external,
-   ========================================================================== */
+.skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a,
-#right-navigation {
+.skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a:visited,
-	border-bottom: 0;
+.skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a.external {
-	margin-right: var(--wiz-page-gutter);
+	color: var(--wiz-link);
+	font-weight: normal;
+	text-decoration: none;
 }
-#left-navigation {
+.skin-citizen .mw-parser-output .wizlords-mainpage-link-list a:hover,
-	border-bottom: 0;
+.skin-citizen .mw-parser-output .wizlords-mainpage-link-list a.external:hover,
-	margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap));
+.skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a:hover,
+.skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a.external:hover {
+	color: #ffd37a;
+	text-decoration: none;
 }
-#p-personal {
+/* Keep the footer close to the article; this site has no advertising area. */
-	right: var(--wiz-page-gutter);
+.skin-citizen .citizen-footer {
+	margin-top: 2rem;
 }
-#p-search {
+.skin-citizen .citizen-footer {
-	margin-right: 0;
+	color: var(--color-subtle);
 }
-/* ==========================================================================
+.skin-citizen .citizen-footer a {
-   Sidebar And Logo
+	color: var(--wiz-link);
-   --------------------------------------------------------------------------
-   The sidebar panel is 210px wide. The logo is centered inside the usable
-   sidebar area after accounting for the small left/right inset.
-   ========================================================================== */
-#mw-panel {
-	width: var(--wiz-sidebar-width);
-	background: transparent;
-	color: var(--wiz-text);
 }
-#p-logo {
+.skin-citizen .citizen-footer a:hover {
-	top: 0;
+	color: #ffd37a;
-	left: var(--wiz-sidebar-left-inset);
-	width: calc(var(--wiz-sidebar-width) - var(--wiz-sidebar-left-inset) - var(--wiz-sidebar-right-inset));
-	height: calc(var(--wiz-logo-size) + var(--wiz-sidebar-left-inset) + var(--wiz-logo-edge-space));
-	margin: 0;
 }
-#p-logo a {
+/* ==========================================================================
-	display: block;
+   Tables And Media
+   ========================================================================== */
+/* Citizen adds overflow wrappers around wide tables. Let them use the full
+   article width so existing tables can scroll instead of shrinking the page. */
+.skin-citizen .citizen-overflow-wrapper {
 	width: 100%;
-	height: 100%;
+	max-width: 100%;
-	background-position: center calc(var(--wiz-sidebar-left-inset) + var(--wiz-logo-edge-space));
-	background-size: var(--wiz-logo-size) var(--wiz-logo-size);
 }
-#mw-panel .portal,
+.skin-citizen .mw-parser-output img {
-#mw-panel .vector-menu-portal {
+	max-width: 100%;
-	margin-right: 12px;
+	height: auto;
 }
 /* ==========================================================================
-    Content And Footer Shell
+    MobileFrontend Collapsible Article Sections
     --------------------------------------------------------------------------
-    The content and footer share the same width and left/right alignment. The
+    MobileFormatter adds .collapsible-heading and .collapsible-block, then
-    content gets the solid dark background; the footer uses the transparent
+   toggles .open-block on both elements. Keep collapsed headings visually
-    panel tint.
+    quiet and row-like; restore the orange divider only for expanded sections.
+    This is scoped to Citizen + MobileFrontend and does not affect Vector.
     ========================================================================== */
-#content.mw-body {
+.skin-citizen.mw-mf .collapsible-heading {
 	box-sizing: border-box;
-	width: var(--wiz-content-width);
+	margin-top: 0;
-	margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap));
+	margin-bottom: 6px;
-	margin-right: var(--wiz-page-gutter);
+	padding-top: 12px;
-	padding: var(--wiz-content-padding);
+	padding-bottom: 12px;
-	border: 1px solid var(--wiz-content-border);
+	border-bottom: 0;
-	background: var(--wiz-content-background);
+	background-image: none;
-	color: var(--wiz-text);
-	box-shadow:
-		calc(-1 * (var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap))) 0 0 0 var(--wiz-panel-background),
-		var(--wiz-page-gutter) 0 0 0 var(--wiz-panel-background);
-}
-#footer {
-	position: relative;
-	box-sizing: border-box;
-	width: var(--wiz-content-width);
-	margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap));
-	margin-right: var(--wiz-page-gutter);
-	min-height: 112px;
-	padding-top: 24px;
-	padding-bottom: 24px;
-	background: var(--wiz-panel-background);
-	color: var(--wiz-text);
-	box-shadow:
-		calc(-1 * (var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap))) 0 0 0 var(--wiz-panel-background),
-		var(--wiz-page-gutter) 0 0 0 var(--wiz-panel-background);
-}
-#footer-icons {
-	position: absolute;
-	top: 50%;
-	right: 0;
-	transform: translateY(-50%);
 }
-/* ==========================================================================
+.skin-citizen.mw-mf .collapsible-heading.open-block {
-   Link Colours
+	margin-bottom: 0;
-   --------------------------------------------------------------------------
+	padding-bottom: 6px;
-   Global link colour rules for content, sidebar, header, and footer.
+	border-bottom: 1px solid var(--wiz-content-border, #ff942d);
-   ========================================================================== */
-a,
-a:visited,
-#mw-panel a,
-#mw-head a,
-#footer a {
-	color: var(--wiz-link);
 }
-a:hover,
+.skin-citizen.mw-mf .collapsible-block {
-#mw-panel a:hover,
+	margin-top: 0;
-#mw-head a:hover,
+	padding-top: 0;
-#footer a:hover {
-	color: #ffd37a;
 }
-#left-navigation a,
+.skin-citizen.mw-mf
-#right-navigation a,
+.collapsible-heading.open-block
-#p-personal a {
++ .collapsible-block.open-block {
-	color: var(--wiz-link);
+	margin-top: 12px;
 }
 /* ==========================================================================
-    Top Tabs And Vector Menu Resets
+    Citizen Homepage Sections
     --------------------------------------------------------------------------
-    These rules restyle the Vector page/action tabs. Inactive tabs are
+    Citizen stacks the desktop left/right homepage blocks. Establish explicit
-    transparent so they blend into the header. Selected tabs match the content
+    section spacing so heading margins cannot collapse into large blank bands,
-    background and use a small cover strip to hide the bottom border cleanly.
+    centre the introductory copy, and retain the desktop orange divider.
     ========================================================================== */
-#left-navigation li,
+.skin-citizen .wizlords-mainpage-left,
-#right-navigation li,
+.skin-citizen .wizlords-mainpage-right {
-.vectorTabs li,
+	display: flow-root;
-.vectorMenu h3 {
-	background: transparent;
-	background-image: none;
-	border: 0;
 }
-#p-namespaces .vector-menu-content,
+.skin-citizen .wizlords-mainpage-left > h2.center,
-#p-namespaces .vector-menu-content-list {
+.skin-citizen .wizlords-mainpage-right > h2.center,
-	margin-left: 0;
+.skin-citizen .wizlords-mainpage-left > .mw-heading2,
-	padding-left: 0;
+.skin-citizen .wizlords-mainpage-right > .mw-heading2 {
-}
-#p-namespaces {
-	padding-left: 0;
-}
-#left-navigation li::before,
-#left-navigation li::after,
-#right-navigation li::before,
-#right-navigation li::after,
-.vectorTabs li::before,
-.vectorTabs li::after,
-.vectorMenu h3::before,
-.vectorMenu h3::after {
-	background: none;
-	background-image: none;
-	border: 0;
-	box-shadow: none;
-	content: none;
-}
-#left-navigation li a,
-#right-navigation li a,
-.vectorTabs li a,
-.vectorMenu h3 {
-	background: transparent;
-	background-image: none;
-	border: 0;
-	border-left: 1px solid var(--wiz-content-border);
-	border-bottom: 1px solid var(--wiz-content-border);
-	color: var(--wiz-link);
-}
-#left-navigation li a span,
-#right-navigation li a span,
-.vectorTabs li a span,
-.vectorMenu h3 span {
-	background: transparent;
-	background-image: none;
-}
-#left-navigation .vectorTabs,
-#right-navigation .vectorTabs,
-#left-navigation .vector-menu-tabs,
-#right-navigation .vector-menu-tabs,
-#left-navigation .vector-menu-tabs-legacy,
-#right-navigation .vector-menu-tabs-legacy,
-#left-navigation .vectorTabs ul,
-#right-navigation .vectorTabs ul,
-#left-navigation .vector-menu-tabs ul,
-#right-navigation .vector-menu-tabs ul,
-#left-navigation .vectorTabs span,
-#right-navigation .vectorTabs span,
-#left-navigation .vector-menu-tabs span,
-#right-navigation .vector-menu-tabs span,
-#left-navigation .vectorTabs li,
-#right-navigation .vectorTabs li,
-#left-navigation .vector-menu-tabs li,
-#right-navigation .vector-menu-tabs li,
-#left-navigation .vectorTabs li a,
-#right-navigation .vectorTabs li a,
-#left-navigation .vector-menu-tabs li a,
-#right-navigation .vector-menu-tabs li a,
-#right-navigation .vectorMenu,
-#right-navigation .vectorMenu h3,
-#right-navigation .vectorMenu h3 span,
-#right-navigation .vector-menu-heading,
-#right-navigation .vector-menu-heading span,
-#right-navigation .vector-menu-heading-label,
-#p-cactions-label,
-#p-cactions-label span {
-	background-image: none !important;
-	background: transparent;
-	box-shadow: none;
-}
-#left-navigation li:last-child a,
-#right-navigation li:last-child a {
-	border-right: 1px solid var(--wiz-content-border);
-}
-/* The watch/unwatch star has different Vector sizing, so it is normalised here. */
-#ca-watch a,
-#ca-unwatch a {
 	box-sizing: border-box;
-	width: 32px;
+	width: 100%;
-	height: 40px;
+	margin: 14px 0 7px;
-	padding-top: 16.25px;
+	padding: 0 0 4px;
-	padding-right: 0;
+	border-bottom: 0;
-	padding-bottom: 0;
+	background-image: linear-gradient(
-	padding-left: 0;
+		to right,
-	background-position: center center;
+		var(--wiz-content-border),
-	line-height: 18px;
+		var(--wiz-content-border)
-}
+	);
+	background-repeat: no-repeat;
-#ca-watch,
+	background-position: center bottom;
-#ca-unwatch {
+	background-size: 65% 1px;
-	height: 40px;
+	color: var(--wiz-heading);
-	line-height: 18px;
+	text-align: center;
 }
-#right-navigation li.mw-watchlink.icon {
+.skin-citizen .wizlords-mainpage-left > .mw-heading2 h2,
-	top: auto;
+.skin-citizen .wizlords-mainpage-right > .mw-heading2 h2 {
 	margin: 0;
-	padding: 0;
-	line-height: inherit;
-}
-#right-navigation li.mw-watchlink.icon a {
-	margin: 0;
-	line-height: inherit;
-}
-#ca-watch a span,
-#ca-unwatch a span {
-	position: absolute;
-	overflow: hidden;
-	width: 1px;
-	height: 1px;
-	clip: rect(1px, 1px, 1px, 1px);
-	white-space: nowrap;
-}
-/* Selected tabs visually open into the content area below. */
-#left-navigation li.selected a,
-#right-navigation li.selected a,
-.vectorTabs li.selected a {
-	position: relative;
-	z-index: 2;
-	background: var(--wiz-content-background);
-	background-image: none;
-	border-bottom: 1px solid var(--wiz-content-border);
 	color: var(--wiz-heading);
+	text-align: center;
 }
-#left-navigation li.selected a::after,
+.skin-citizen .wizlords-mainpage-left > p,
-#right-navigation li.selected a::after,
+.skin-citizen .wizlords-mainpage-right > p,
-.vectorTabs li.selected a::after {
+.skin-citizen .wizlords-mainpage-left > .center > p,
-	content: "";
+.skin-citizen .wizlords-mainpage-right > .center > p {
-	position: absolute;
+	max-width: 760px;
-	bottom: -1px;
+	margin: 6px auto 8px;
-	left: 0;
+	text-align: center;
-	width: 100%;
-	height: 1px;
-	background: var(--wiz-content-background);
-	pointer-events: none;
 }
-/* Shared border colour for the tab row. */
+/* Give introductory copy a little breathing room before wide homepage cards
-#left-navigation li,
+   without increasing spacing in the square-icon sections. */
-#right-navigation li,
+.skin-citizen
-#p-search,
+:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
-.vectorTabs,
+> .center:has(> .wizlords-wideimagetext-grid)
-.vectorMenu {
+> p {
-	border-color: var(--wiz-content-border);
+	margin-bottom: 16px;
 }
-#searchInput {
+/* Separate homepage lists from the introductory paragraph above them. */
-	background: rgba(0, 0, 0, 0.3);
+.skin-citizen .wizlords-mainpage-left > ul,
-	border-color: var(--wiz-race-table-border-colour, #4d4d4d);
+.skin-citizen .wizlords-mainpage-right > ul,
-	color: var(--wiz-text);
+.skin-citizen .wizlords-mainpage-left > ol,
-}
+.skin-citizen .wizlords-mainpage-right > ol,
+.skin-citizen .wizlords-mainpage-left > .center > ul,
-#searchInput::placeholder {
+.skin-citizen .wizlords-mainpage-right > .center > ul,
-	color: #b9b3a8;
+.skin-citizen .wizlords-mainpage-left > .center > ol,
+.skin-citizen .wizlords-mainpage-right > .center > ol {
+	margin-top: 14px;
 }
 /* ==========================================================================
-    Page Title And Body Content
+    Citizen Homepage Square Icon Links
     --------------------------------------------------------------------------
-    The first heading sits inside the content area with its own spacing. On the
+    The desktop dimensions live in Vector.css, which Citizen does not load.
-    main page only, "Main Page" is visually replaced with the wiki title.
+   Define a compact four-column version here for the square homepage links.
+    Wide image cards use separate classes and are intentionally unaffected.
     ========================================================================== */
-#firstHeading.firstHeading.mw-first-heading {
+.skin-citizen .wizlords-mainpage-items,
-	box-sizing: border-box;
+.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
-	display: block !important;
+.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
-	height: 40px;
+	display: flex;
-	margin: 12px 0 8px;
+	flex-wrap: wrap;
-	padding: 0;
+	gap: 12px 8px;
-	border-bottom: 1px solid var(--wiz-content-border);
+	justify-content: center;
-	color: var(--wiz-heading);
+	align-items: start;
-	font-size: 32px;
+	width: 100%;
-	font-weight: normal;
+	min-width: 0;
-	line-height: 40px;
+	margin-right: auto;
+	margin-left: auto;
+	text-align: center;
 }
-body.page-Main_Page #firstHeading.firstHeading.mw-first-heading {
+/* MediaWiki may place introductory text in the same .center wrapper as the
-	font-size: 0;
+   icon links. Keep that text above the grid instead of treating it as an icon
+   cell. */
+.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p,
+.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p {
+	flex: 0 0 100%;
+	width: 100%;
+	margin: 0 0 8px;
+	text-align: center;
 }
-body.page-Main_Page #firstHeading.firstHeading.mw-first-heading::before {
+/* MediaWiki sometimes wraps the first block-style icon link in a paragraph.
-	content: "Wizards and Warlords Wiki";
+   Flatten only those icon wrappers so every icon participates in the same
-	font-size: 32px;
+   homepage grid/flex row. Plain text paragraphs keep their normal layout. */
+.skin-citizen
+:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
+> .center
+> p:has(.wizlords-imagetext) {
+	display: contents;
 }
-#bodyContent {
+.skin-citizen .wizlords-imagetext {
-	clear: both;
 	display: block;
+	flex: 0 0 calc((100% - 24px) / 4);
+	box-sizing: border-box;
+	width: calc((100% - 24px) / 4);
+	max-width: none;
+	min-width: 0;
+	min-height: 0;
 	margin: 0;
-	padding: 0;
+	text-align: center;
-	border: 0;
-	font-size: 14px;
-	line-height: 1.6;
 }
-/* Normal article lists generated by * and # wikitext. */
+.skin-citizen .wizlords-imagetext-image {
-#content.mw-body #bodyContent .mw-parser-output > ul,
+	width: 64px;
-#content.mw-body #bodyContent .mw-parser-output > ol,
+	height: 64px;
-#content.mw-body #bodyContent .toc-page > ul,
+	margin: 0 auto;
-#content.mw-body #bodyContent .toc-page > ol {
-	margin: 8px 0 12px 28px;
-	padding-left: 20px;
-	text-align: left;
-}
-#content.mw-body #bodyContent .mw-parser-output > ul,
-#content.mw-body #bodyContent .toc-page > ul {
-	list-style: disc outside;
-}
-#content.mw-body #bodyContent .mw-parser-output ul ul,
-#content.mw-body #bodyContent .toc-page > ul ul {
-	margin: 4px 0 6px 22px;
-	padding-left: 18px;
-	list-style: disc outside;
-}
-#content.mw-body #bodyContent .mw-parser-output > ol,
-#content.mw-body #bodyContent .toc-page > ol {
-	list-style: decimal outside;
-}
-#content.mw-body #bodyContent .mw-parser-output > ul > li,
-#content.mw-body #bodyContent .mw-parser-output > ol > li,
-#content.mw-body #bodyContent .toc-page > ul > li,
-#content.mw-body #bodyContent .toc-page > ol > li {
-	display: list-item;
-	margin-bottom: 4px;
-}
-#content.mw-body #bodyContent .mw-parser-output ul ul > li,
-#content.mw-body #bodyContent .toc-page > ul ul > li {
-	display: list-item;
-	margin-bottom: 3px;
-	list-style: disc outside;
-}
-#content.mw-body #bodyContent .mw-parser-output li::marker {
-	color: var(--wiz-text);
 }
-/* The generated TOC sits inside .mw-parser-output, so undo article list rules there. */
+.skin-citizen .wizlords-imagetext-image img {
-#content.mw-body #bodyContent .toc-page #toc ul,
-#content.mw-body #bodyContent .toc-page .toc ul {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-#content.mw-body #bodyContent .toc-page #toc li,
-#content.mw-body #bodyContent .toc-page .toc li {
 	display: block;
-	list-style: none;
+	width: 64px;
+	height: 64px;
+	max-width: 100%;
+	object-fit: contain;
+	border: 0;
+	background: transparent;
 }
-#content.mw-body #bodyContent .toc-page #toc li::marker,
+.skin-citizen .wizlords-imagetext-text {
-#content.mw-body #bodyContent .toc-page .toc li::marker {
+	display: flex;
-	content: "";
+	align-items: flex-start;
-}
+	justify-content: center;
-#content.mw-body #bodyContent .toc-page #toc li ul,
-#content.mw-body #bodyContent .toc-page .toc li ul {
-	margin-left: 12px;
-	padding-left: 10px;
-}
-#content.mw-body #bodyContent .toc-page #toc li li,
-#content.mw-body #bodyContent .toc-page .toc li li {
-	margin-left: 0;
-	padding: 2px 0;
-}
-#content.mw-body #bodyContent .toc-page #toc .toclevel-3,
-#content.mw-body #bodyContent .toc-page #toc .toclevel-4,
-#content.mw-body #bodyContent .toc-page #toc .toclevel-5,
-#content.mw-body #bodyContent .toc-page #toc .toclevel-6,
-#content.mw-body #bodyContent .toc-page .toc .toclevel-3,
-#content.mw-body #bodyContent .toc-page .toc .toclevel-4,
-#content.mw-body #bodyContent .toc-page .toc .toclevel-5,
-#content.mw-body #bodyContent .toc-page .toc .toclevel-6 {
-	display: none !important;
-}
-/* ==========================================================================
-   Inline Article Table Of Contents
-   --------------------------------------------------------------------------
-   Articles no longer need a .toc-page wrapper because that wrapper prevents
-   MobileFormatter from splitting headings into mobile collapsible sections.
-   Style Vector's generated #toc directly so it retains the previous floated
-   desktop appearance and allows article content to wrap beside it.
-   ========================================================================== */
-#content.mw-body #bodyContent #toc {
-	float: right;
-	clear: right;
 	box-sizing: border-box;
-	width: max-content;
+	width: 100%;
-	min-width: 220px;
-	max-width: 320px;
-	margin: 0 0 16px 24px;
-	padding: 16px 24px;
-	border: 1px solid var(--wiz-content-border);
-	background: var(--wiz-panel-solid-background);
-	color: var(--wiz-text);
-	font-size: 0.95em;
-}
-#content.mw-body #bodyContent #toc:has(.toctogglecheckbox:checked) {
-	width: fit-content;
 	min-width: 0;
-	padding: 12px 16px;
+	min-height: 34px;
-}
+	height: auto;
+	margin-top: 4px;
-#content.mw-body #bodyContent #toc .toctitle {
+	color: var(--wiz-link);
-	margin: 0 0 10px;
+	font-size: 12px;
-	color: var(--wiz-text);
+	line-height: 1.2;
 	text-align: center;
+	overflow-wrap: anywhere;
 }
-#content.mw-body
+.skin-citizen .wizlords-imagetext-text a {
-#bodyContent
-#toc:has(.toctogglecheckbox:checked)
-.toctitle {
-	margin: 0;
-	line-height: 1.4;
-}
-#content.mw-body #bodyContent #toc .toctitle h2 {
-	display: inline;
-	margin: 0;
-	padding: 0;
-	border: 0;
-	color: var(--wiz-text);
-	font-family: inherit;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 1.4;
-}
-#content.mw-body #bodyContent #toc .toctoggle {
-	color: var(--wiz-text);
-	font-size: 12px;
-}
-#content.mw-body #bodyContent #toc .toctoggle a {
 	color: var(--wiz-link);
 	text-decoration: none;
 }
-#content.mw-body #bodyContent #toc ul {
+.skin-citizen .wizlords-imagetext-text a:hover {
-	margin: 0;
+	color: #ffd37a;
-	padding: 0;
-	list-style: none;
 }
-#content.mw-body #bodyContent #toc li {
+/* MediaWiki can insert paragraph wrappers around block-style homepage cards.
-	display: block;
+   Flatten wrappers that contain a wide card so the card itself participates
-	margin: 0;
+   in the responsive flex layout. */
-	padding: 0;
+.skin-citizen
-	list-style: none;
+:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
-	line-height: 1.35;
+> .center
+> p:has(.wizlords-wideimagetext) {
+	display: contents;
 }
-#content.mw-body #bodyContent #toc > ul > li {
+/* Small-desktop / landscape-tablet Citizen keeps the desktop-style four-slot
-	padding: 2px 0;
+   rhythm, but uses larger icons so the wider mobile/tablet skin does not feel
-}
+   sparse before the full desktop Vector layout takes over. */
+@media screen and (min-width: 900px) and (max-width: 1199px) {
+	.skin-citizen .wizlords-mainpage-items,
+	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
+	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
+		gap: 20px 16px;
+	}
-#content.mw-body #bodyContent #toc li ul {
+	.skin-citizen .wizlords-imagetext {
-	margin: 0 0 0 12px;
+		flex-basis: calc((100% - 48px) / 4);
-	padding: 0 0 0 10px;
+		width: calc((100% - 48px) / 4);
-	border-left: 1px dotted var(--wiz-content-border);
+	}
-}
-#content.mw-body #bodyContent #toc li li {
+	.skin-citizen .wizlords-imagetext-image,
-	margin: 0;
+	.skin-citizen .wizlords-imagetext-image img {
-	padding: 2px 0;
+		width: clamp(92px, 10vw, 108px);
-	border-left: 0;
+		height: clamp(92px, 10vw, 108px);
-}
+	}
-#content.mw-body #bodyContent #toc li::marker {
+	.skin-citizen .wizlords-imagetext-text {
-	content: "";
+		font-size: 13px;
+	}
 }
-#content.mw-body #bodyContent #toc .tocnumber {
+/* Full-width Citizen fallback. Normal desktop visitors use Vector, but this
-	display: none;
+   keeps Citizen tidy if it is tested manually on a wide screen. */
-}
+@media screen and (min-width: 1200px) {
+	.skin-citizen .wizlords-mainpage-items,
+	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
+	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
+		gap: 16px 12px;
+	}
-#content.mw-body #bodyContent #toc a {
+	.skin-citizen .wizlords-imagetext {
-	color: var(--wiz-link);
+		flex-basis: calc((100% - 36px) / 4);
-	text-decoration: none;
+		width: calc((100% - 36px) / 4);
-	overflow-wrap: anywhere;
+	}
-}
-#content.mw-body #bodyContent #toc a:hover {
+	.skin-citizen .wizlords-imagetext-image,
-	color: #ffd37a;
+	.skin-citizen .wizlords-imagetext-image img {
-	text-decoration: none;
+		width: 82px;
-}
+		height: 82px;
+	}
-#content.mw-body #bodyContent #toc .toclevel-3,
+	.skin-citizen .wizlords-imagetext-text {
-#content.mw-body #bodyContent #toc .toclevel-4,
+		font-size: 13px;
-#content.mw-body #bodyContent #toc .toclevel-5,
+	}
-#content.mw-body #bodyContent #toc .toclevel-6 {
-	display: none !important;
 }
-/* Article section headings generated by == through ====== wikitext. */
+/* Phone-only wide-card fallback. Tablet receives the four-slot treatment in
-#content.mw-body #bodyContent .mw-heading {
+   the dedicated tablet section below. */
-	box-sizing: border-box;
+@media screen and (max-width: 599px) {
-	margin: 20px 0 10px;
+	/* Let each phone label use its natural one- or two-line height. Reserving
-	padding: 0;
+	   two lines for every label creates visible empty space in sections whose
-	border-bottom: 0;
+	   first-row labels all fit on one line, such as Character Creation. */
-	color: var(--wiz-heading);
+	.skin-citizen .wizlords-imagetext-text {
-	text-align: left;
+		min-height: 0;
-	text-decoration: none;
+	}
-}
-#content.mw-body #bodyContent .mw-heading2 {
+	/* Homepage navigation lists use a centred readable block while individual
-	height: 30px;
+	   bullets remain conventionally left-aligned. */
-	margin-top: 21px;
+	.skin-citizen .wizlords-mainpage-link-list,
-	margin-bottom: 5px;
+	.skin-citizen .wizlords-useful-links,
-	border-bottom: 1px solid var(--wiz-content-border);
+	.skin-citizen .wizlords-mainpage-whatislarp-list {
-}
+		box-sizing: border-box;
+		width: 100%;
+		max-width: 320px;
+		margin-right: auto;
+		margin-left: auto;
+		padding-left: 24px;
+		list-style: disc outside;
+		text-align: left;
+	}
-#content.mw-body #bodyContent .mw-heading3 {
+	/* Match the What is LARP list to the paragraph's phone-width text column.
-	height: 28px;
+	   The padding creates a normal hanging bullet while keeping the bullet
-	margin-top: 5px;
+	   edge aligned with the paragraph above. */
-	margin-bottom: 10px;
+	.skin-citizen .wizlords-mainpage-whatislarp-list {
-	padding-top: 8px;
+		max-width: 100%;
-}
+		margin-right: 0;
+		margin-left: 0;
+		padding-left: 24px;
+	}
-#content.mw-body #bodyContent .mw-heading4 {
+	.skin-citizen .wizlords-wideimagetext {
-	height: 23px;
+		max-width: 100%;
-	margin-top: 4px;
+	}
-	margin-bottom: 10px;
-	padding-top: 7px;
-}
-#content.mw-body #bodyContent .mw-heading h2,
+	.skin-citizen .wizlords-wideimagetext-grid,
-#content.mw-body #bodyContent .mw-heading h3,
+	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-wideimagetext),
-#content.mw-body #bodyContent .mw-heading h4,
+	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-wideimagetext) {
-#content.mw-body #bodyContent .mw-heading h5,
+		display: flex;
-#content.mw-body #bodyContent .mw-heading h6 {
+		flex-wrap: wrap;
-	margin: 0;
+		justify-content: center;
-	padding: 0;
+		gap: 12px 10px;
-	border-bottom: 0;
+		width: 100%;
-	color: var(--wiz-heading);
+	}
-	text-align: left;
-	text-decoration: none;
-}
-#content.mw-body #bodyContent .mw-heading h2 {
+	.skin-citizen .wizlords-wideimagetext-grid .wizlords-wideimagetext,
-	font-weight: normal;
+	.skin-citizen .wizlords-mainpage-left > .center .wizlords-wideimagetext,
-}
+	.skin-citizen .wizlords-mainpage-right > .center .wizlords-wideimagetext {
+		flex: 0 0 calc((100% - 10px) / 2);
+		box-sizing: border-box;
+		width: calc((100% - 10px) / 2);
+		max-width: none;
+		margin: 0;
+		text-align: center;
+	}
-#content.mw-body #bodyContent .mw-heading h3,
+	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-wideimagetext) > p,
-#content.mw-body #bodyContent .mw-heading h4,
+	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-wideimagetext) > p {
-#content.mw-body #bodyContent .mw-heading h5,
+		flex: 0 0 100%;
-#content.mw-body #bodyContent .mw-heading h6 {
+		width: 100%;
-	font-weight: bold;
+		margin: 0 0 6px;
-}
+	}
-#content.mw-body #bodyContent > h2:not(.center),
+	.skin-citizen .wizlords-wideimagetext-image,
-#content.mw-body #bodyContent .toc-page > h2:not(.center) {
+	.skin-citizen .wizlords-wideimagetext-image img {
-	box-sizing: border-box;
+		display: block;
-	height: 30px;
+		width: 100%;
-	margin: 21px 0 5px;
+		height: auto;
-	padding: 0;
+		aspect-ratio: 2 / 1;
-	border-bottom: 1px solid var(--wiz-content-border);
+		object-fit: cover;
-	color: var(--wiz-heading);
+		border: 0;
-	font-weight: normal;
+		background: transparent;
-	text-align: left;
+	}
-	text-decoration: none;
-}
-#content.mw-body #bodyContent > h3:not(.center),
+	.skin-citizen .wizlords-wideimagetext-text {
-#content.mw-body #bodyContent > h4:not(.center),
+		display: flex;
-#content.mw-body #bodyContent > h5:not(.center),
+		align-items: flex-start;
-#content.mw-body #bodyContent > h6:not(.center),
+		justify-content: center;
-#content.mw-body #bodyContent .toc-page > h3:not(.center),
+		width: 100%;
-#content.mw-body #bodyContent .toc-page > h4:not(.center),
+		min-height: 34px;
-#content.mw-body #bodyContent .toc-page > h5:not(.center),
+		height: auto;
-#content.mw-body #bodyContent .toc-page > h6:not(.center) {
+		margin-top: 4px;
-	box-sizing: border-box;
+		font-size: 12px;
-	margin: 20px 0 10px;
+		line-height: 1.2;
-	padding: 0;
+		text-align: center;
-	border-bottom: 0;
+		overflow-wrap: anywhere;
-	color: var(--wiz-heading);
+	}
-	font-weight: bold;
-	text-align: left;
-	text-decoration: none;
 }
-#content.mw-body #bodyContent > h3:not(.center),
+/* ==========================================================================
-#content.mw-body #bodyContent .toc-page > h3:not(.center) {
+   Citizen Tablet Homepage
-	height: 28px;
+   --------------------------------------------------------------------------
-	margin-top: 5px;
+   At 600-899px the homepage uses the available width as one broad content
-	padding-top: 8px;
+   column. The square icon groups need one component-specific split inside the
-}
+   tablet range: 600-799px keeps the stable four-column rhythm, while 800-899px
+   has enough room for compact single-row groups. This avoids ugly orphan rows
+   such as 5+2 or 6+1.
+   ========================================================================== */
+@media screen and (min-width: 600px) and (max-width: 899px) {
+	.skin-citizen .wizlords-mainpage-left,
+	.skin-citizen .wizlords-mainpage-right {
+		max-width: 760px;
+		margin-right: auto;
+		margin-left: auto;
+	}
-#content.mw-body #bodyContent > h4:not(.center),
+	/* Keep tablet landing-page copy in a readable centred column while the
-#content.mw-body #bodyContent .toc-page > h4:not(.center) {
+	   icon and card grids continue using the full 760px section width. */
-	height: 23px;
+	.skin-citizen .wizlords-mainpage-left > p,
-	margin-top: 4px;
+	.skin-citizen .wizlords-mainpage-right > p,
-	padding-top: 7px;
+	.skin-citizen .wizlords-mainpage-left > .center > p,
-}
+	.skin-citizen .wizlords-mainpage-right > .center > p {
+		max-width: 620px;
+		margin-right: auto;
+		margin-left: auto;
+		text-align: center;
+	}
-#content.mw-body #bodyContent .mw-heading h2,
+	.skin-citizen .wizlords-mainpage-link-list,
-#content.mw-body #bodyContent > h2:not(.center),
+	.skin-citizen .wizlords-useful-links,
-#content.mw-body #bodyContent .toc-page > h2:not(.center) {
+	.skin-citizen .wizlords-mainpage-whatislarp-list {
-	font-size: 24px;
+		box-sizing: border-box;
-	line-height: 30px;
+		width: 100%;
-}
+		max-width: 500px;
+		margin-right: auto;
+		margin-left: auto;
+		padding-left: 32px;
+		list-style: disc outside;
+		text-align: left;
+	}
-#content.mw-body #bodyContent .mw-heading h3,
+	/* Use the same 620px reading column as the What is LARP paragraph. */
-#content.mw-body #bodyContent > h3:not(.center),
+	.skin-citizen .wizlords-mainpage-whatislarp-list {
-#content.mw-body #bodyContent .toc-page > h3:not(.center) {
+		max-width: 620px;
-	font-size: 18px;
+		padding-left: 24px;
-	line-height: 24px;
+	}
-}
-#content.mw-body #bodyContent .mw-heading h4,
+	.skin-citizen .wizlords-mainpage-left > h2.center,
-#content.mw-body #bodyContent > h4:not(.center),
+	.skin-citizen .wizlords-mainpage-right > h2.center {
-#content.mw-body #bodyContent .toc-page > h4:not(.center) {
+		margin-top: 14px;
-	font-size: 14px;
+		margin-bottom: 6px;
-	line-height: 1.6;
+	}
-}
-#content.mw-body #bodyContent .mw-heading h5,
+	.skin-citizen .wizlords-mainpage-left > p,
-#content.mw-body #bodyContent .mw-heading h6,
+	.skin-citizen .wizlords-mainpage-right > p {
-#content.mw-body #bodyContent > h5:not(.center),
+		margin-top: 6px;
-#content.mw-body #bodyContent > h6:not(.center),
+		margin-bottom: 8px;
-#content.mw-body #bodyContent .toc-page > h5:not(.center),
+	}
-#content.mw-body #bodyContent .toc-page > h6:not(.center) {
-	font-size: 15px;
-	line-height: 21px;
-}
-#content.mw-body #bodyContent .mw-heading .mw-headline,
+	.skin-citizen .wizlords-mainpage-items,
-#content.mw-body #bodyContent > h2:not(.center) .mw-headline,
+	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
-#content.mw-body #bodyContent > h3:not(.center) .mw-headline,
+	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
-#content.mw-body #bodyContent > h4:not(.center) .mw-headline,
+		display: grid;
-#content.mw-body #bodyContent > h5:not(.center) .mw-headline,
+		grid-template-columns: repeat(4, minmax(0, 78px));
-#content.mw-body #bodyContent > h6:not(.center) .mw-headline,
+		gap: 12px 16px;
-#content.mw-body #bodyContent .toc-page > h2:not(.center) .mw-headline,
+		justify-content: center;
-#content.mw-body #bodyContent .toc-page > h3:not(.center) .mw-headline,
+		justify-items: center;
-#content.mw-body #bodyContent .toc-page > h4:not(.center) .mw-headline,
+		align-items: start;
-#content.mw-body #bodyContent .toc-page > h5:not(.center) .mw-headline,
+	}
-#content.mw-body #bodyContent .toc-page > h6:not(.center) .mw-headline,
-#content.mw-body #bodyContent .mw-heading a,
-#content.mw-body #bodyContent > h2:not(.center) a,
-#content.mw-body #bodyContent > h3:not(.center) a,
-#content.mw-body #bodyContent > h4:not(.center) a,
-#content.mw-body #bodyContent > h5:not(.center) a,
-#content.mw-body #bodyContent > h6:not(.center) a,
-#content.mw-body #bodyContent .toc-page > h2:not(.center) a,
-#content.mw-body #bodyContent .toc-page > h3:not(.center) a,
-#content.mw-body #bodyContent .toc-page > h4:not(.center) a,
-#content.mw-body #bodyContent .toc-page > h5:not(.center) a,
-#content.mw-body #bodyContent .toc-page > h6:not(.center) a {
-	border-bottom: 0;
-	color: var(--wiz-heading);
-	text-decoration: none;
-}
-#content.mw-body #bodyContent .mw-heading .mw-editsection {
+	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p,
-	color: var(--wiz-link);
+	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p {
-	font-size: 12px;
+		grid-column: 1 / -1;
-	line-height: 1;
+		width: 100%;
-	text-decoration: none;
+		margin-bottom: 4px;
-}
+	}
-#content.mw-body #bodyContent .mw-heading .mw-editsection a {
+	.skin-citizen .wizlords-imagetext {
-	color: var(--wiz-link);
+		width: 78px;
-	text-decoration: none;
+		max-width: none;
-}
+	}
-/* ==========================================================================
+	.skin-citizen .wizlords-imagetext-image,
-   Homepage Two-Column Layout
+	.skin-citizen .wizlords-imagetext-image img {
-   --------------------------------------------------------------------------
+		width: clamp(52px, 7.5vw, 64px);
-   Homepage sections are arranged as:
+		height: clamp(52px, 7.5vw, 64px);
-   left block, right block, clear; then repeat for each row.
+	}
-   ========================================================================== */
-.wizlords-mainpage-left {
-	box-sizing: border-box;
-	float: left;
-	width: calc(50% - 7.5px);
-	padding-left: 15px;
-	padding-right: 15px;
-}
-.wizlords-mainpage-right {
+	.skin-citizen .wizlords-imagetext-text {
-	box-sizing: border-box;
+		min-height: 30px;
-	float: right;
+		margin-top: 3px;
-	width: calc(50% - 7.5px);
+		font-size: 12px;
-	padding-left: 15px;
+		line-height: 1.15;
-	padding-right: 15px;
+	}
-}
-.wizlords-mainpage-clear {
+	/* Upper tablet widths can cleanly fit seven or eight compact icons in one
-	clear: both;
+	   row. Use flex here rather than auto-fit grid: auto-fit can create an
-}
+	   empty eighth track for seven-item groups once there is enough width,
+	   while flex only lays out real icon items. */
+	@media screen and (min-width: 800px) {
+		.skin-citizen .wizlords-mainpage-items,
+		.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
+		.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 10px 14px;
+			justify-content: center;
+			align-items: flex-start;
+		}
-/* Homepage section headings. */
+		.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p,
-.wizlords-mainpage-left > h2.center,
+		.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p {
-.wizlords-mainpage-right > h2.center {
+			flex: 0 0 100%;
-	margin: 20px 0 10px;
+			width: 100%;
-	padding: 0;
+		}
-	border-bottom: 1px solid var(--wiz-content-border);
-	color: var(--wiz-heading);
-	font-size: 24px;
-	font-weight: normal;
-	line-height: 30px;
-	text-align: center;
-}
-.wizlords-mainpage-left > h2.center .mw-headline,
+		.skin-citizen .wizlords-imagetext {
-.wizlords-mainpage-right > h2.center .mw-headline {
+			flex: 0 0 78px;
-	text-decoration: none;
+		}
-}
+	}
-.wizlords-mainpage-left > h2.center a,
+	/* The homepage markup splits each four-card group into two nested
-.wizlords-mainpage-right > h2.center a {
+	   two-card grids. On tablet, flatten those inner grids into their shared
-	border-bottom: 0;
+	   parent so all four cards can occupy one row. Phone keeps the two grids,
-	text-decoration: none;
+	   producing the intended 2x2 layout. */
-}
+	.skin-citizen
+	:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
+	> .center:has(> .wizlords-wideimagetext-grid) {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 10px 12px;
+		width: 100%;
+	}
-.wizlords-mainpage-left > .center,
+	.skin-citizen
-.wizlords-mainpage-right > .center,
+	:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
-.wizlords-mainpage-items {
+	> .center:has(> .wizlords-wideimagetext-grid)
-	text-align: center;
+	> p {
-}
+		flex: 0 0 100%;
+		width: 100%;
+		margin: 0 0 16px;
+	}
-.wizlords-mainpage-left > .center > p,
+	.skin-citizen
-.wizlords-mainpage-right > .center > p {
+	:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
-	margin: 0 0 10px;
+	> .center
-}
+	> .wizlords-wideimagetext-grid {
+		display: contents;
+	}
-/* Normal text lists inside homepage blocks. */
+	.skin-citizen
-.wizlords-mainpage-left > ul,
+	:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
-.wizlords-mainpage-right > ul,
+	> .center
-.wizlords-mainpage-left > .center > ul,
+	> .wizlords-wideimagetext-grid
-.wizlords-mainpage-right > .center > ul {
+	> .wizlords-wideimagetext {
-	margin: 8px 0 0 20px;
+		flex: 0 0 calc((100% - 36px) / 4);
-	padding-left: 20px;
+		box-sizing: border-box;
-	list-style: disc inside;
+		width: calc((100% - 36px) / 4);
-	text-align: left;
+		max-width: none;
-}
+		margin: 0;
+		text-align: center;
+	}
-.wizlords-mainpage-left > ol,
+	.skin-citizen .wizlords-wideimagetext-image,
-.wizlords-mainpage-right > ol,
+	.skin-citizen .wizlords-wideimagetext-image img {
-.wizlords-mainpage-left > .center > ol,
+		display: block;
-.wizlords-mainpage-right > .center > ol {
+		width: 100%;
-	margin: 8px 0 0 20px;
+		height: auto;
-	padding-left: 20px;
+		aspect-ratio: 2 / 1;
-	list-style: decimal inside;
+		object-fit: cover;
-	text-align: left;
+		border: 0;
-}
+		background: transparent;
+	}
-.wizlords-mainpage-left li,
+	.skin-citizen .wizlords-wideimagetext-text {
-.wizlords-mainpage-right li {
+		display: flex;
-	display: list-item;
+		align-items: flex-start;
-	margin-bottom: 6px;
+		justify-content: center;
-}
+		width: 100%;
+		min-height: 34px;
-.wizlords-mainpage-left li::marker,
+		height: auto;
-.wizlords-mainpage-right li::marker {
+		margin-top: 4px;
-	color: var(--wiz-text);
+		font-size: 12px;
+		line-height: 1.2;
+		text-align: center;
+		overflow-wrap: anywhere;
+	}
 }
 /* ==========================================================================
-    Homepage Square Image Links
+    Phone And Tablet Table Of Contents
-   --------------------------------------------------------------------------
-   Used for 100x100 icon links with a fixed-height text label underneath.
     ========================================================================== */
-.wizlords-imagetext {
+@media screen and (max-width: 899px) {
-	display: inline-block;
+	.skin-citizen .citizen-page-container {
-	box-sizing: border-box;
+		padding-right: max(var(--padding-page, 16px), env(safe-area-inset-right));
-	width: 100px;
+		padding-left: max(var(--padding-page, 16px), env(safe-area-inset-left));
-	min-height: 122px;
+	}
-	margin: 5px;
-	vertical-align: top;
-	text-align: center;
-}
-.wizlords-imagetext-image {
+	.skin-citizen .toc-page #toc,
-	width: 100px;
+	.skin-citizen .toc-page .toc {
-	height: 100px;
+		float: none;
-}
+		width: 100%;
+		min-width: 0;
-.wizlords-imagetext-image img {
+		max-width: none;
-	display: block;
+		margin: 0 0 18px;
-	width: 100px;
+		padding: 14px 16px;
-	height: 100px;
+	}
-	object-fit: contain;
-	border: 0;
-	background: transparent;
-}
-.wizlords-imagetext-text {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100px;
-	height: 40px;
-	font-size: 14px;
-	line-height: 1.3;
-	text-align: center;
 }
 /* ==========================================================================
-    Homepage Wide Image Links
+    Phone And Tablet Shared Component Adjustments
-   --------------------------------------------------------------------------
-   Used for 200x100 banner-style image links, such as Weekly Battle Games,
-   World Lore, and Events.
     ========================================================================== */
-.wizlords-wideimagetext {
+@media screen and (max-width: 899px) {
-	display: inline-block;
+	.skin-citizen .wizlords-mainpage-left,
-	box-sizing: border-box;
+	.skin-citizen .wizlords-mainpage-right {
-	width: 200px;
+		float: none;
-	margin: 10px 12px;
+		box-sizing: border-box;
-	vertical-align: top;
+		width: 100%;
-	text-align: center;
+		margin-top: 0;
-}
+		margin-bottom: 0;
+		padding-right: 0;
+		padding-left: 0;
+	}
-.wizlords-wideimagetext-grid {
+	.skin-citizen .wizlords-mainpage-clear {
-	display: flex;
+		clear: both;
-	flex-wrap: wrap;
+	}
-	justify-content: center;
-	gap: 10px 24px;
-}
-.wizlords-wideimagetext-grid .wizlords-wideimagetext {
+	.skin-citizen .wizlords-race-intro,
-	margin: 0;
+	.skin-citizen .wizlords-magic-intro {
-}
+		align-items: flex-start;
+		gap: 16px;
+	}
-.wizlords-wideimagetext-image {
+	.skin-citizen .wizlords-race-quote {
-	width: 200px;
+		padding-right: 20px;
-	height: 100px;
+	}
-}
-.wizlords-wideimagetext-image img {
+	.skin-citizen .wizlords-culture-grid {
-	display: block;
+		grid-template-columns: 1fr;
-	width: 200px;
+	}
-	height: 100px;
-	object-fit: cover;
-	border: 0;
-	background: transparent;
-}
-.wizlords-wideimagetext-text {
+	.skin-citizen .wizlords-culture-grid .wizlords-culture-card {
-	display: flex;
+		grid-column: auto;
-	align-items: center;
+	}
-	justify-content: center;
-	width: 200px;
-	height: 40px;
-	font-size: 14px;
-	line-height: 1.3;
-	text-align: center;
-}
-/* ==========================================================================
+	.skin-citizen .wizlords-culture-row-feature {
-   Useful Links List
+		grid-template-columns: 1fr;
-   --------------------------------------------------------------------------
+		gap: 14px;
-   Specific list styling for the external/useful links block.
+	}
-   ========================================================================== */
-.wizlords-useful-links,
-.wizlords-mainpage-link-list,
-.wizlords-mainpage-whatislarp-list {
-	margin: 8px 0 0 20px;
-	padding-left: 20px;
-	list-style: disc inside;
-	text-align: left;
-}
-.wizlords-useful-links li,
+	.skin-citizen .wizlords-culture-row-icon img {
-.wizlords-mainpage-link-list li,
+		margin: 0 auto;
-.wizlords-mainpage-whatislarp-list li {
+	}
-	margin-bottom: 6px;
-	display: list-item;
-	list-style: disc inside;
-}
-.wizlords-useful-links li::marker,
+	.skin-citizen .wizlords-culture-row-divider {
-.wizlords-mainpage-link-list li::marker,
+		width: 80%;
-.wizlords-mainpage-whatislarp-list li::marker {
+		height: 1px;
-	color: var(--wiz-text);
+		margin: 0 auto;
-}
+	}
-/* What is LARP includes longer explanatory list items. Align its bullet edge
+	.skin-citizen .wizlords-culture-appearance {
-   with the paragraph above instead of using the narrower Useful Links inset. */
+		width: 100%;
-#content.mw-body
+	}
-#bodyContent
-.mw-parser-output
-.wizlords-mainpage-right
-> ul.wizlords-mainpage-whatislarp-list,
-#content.mw-body
-#bodyContent
-.mw-parser-output
-.wizlords-mainpage-left
-> ul.wizlords-mainpage-whatislarp-list {
-	box-sizing: border-box;
-	width: 100%;
-	margin: 8px 0 0;
-	padding-left: 18px;
-	list-style: disc outside;
-	text-align: left;
-}
-#content.mw-body
+	.skin-citizen .wizlords-culture-appearance img {
-#bodyContent
+		width: 100%;
-.mw-parser-output
+		height: auto;
-.wizlords-mainpage-whatislarp-list
+		aspect-ratio: 300 / 138;
-> li {
+	}
-	margin-left: 0;
-	list-style: disc outside;
-}
-/* Vector assigns separate colours to external and visited links. Keep the
+	.skin-citizen .wizlords-shared-classes {
-   shared homepage navigation-list component consistently orange. */
+		box-sizing: border-box;
-#content.mw-body .wizlords-mainpage-link-list a,
+		width: 100%;
-#content.mw-body .wizlords-mainpage-link-list a:visited,
+		min-width: 0;
-#content.mw-body .wizlords-mainpage-link-list a.external,
+		padding-right: 18px;
-#content.mw-body .wizlords-mainpage-whatislarp-list a,
+		padding-left: 18px;
-#content.mw-body .wizlords-mainpage-whatislarp-list a:visited,
+	}
-#content.mw-body .wizlords-mainpage-whatislarp-list a.external {
-	color: var(--wiz-link);
-	font-weight: normal;
-	text-decoration: none;
-}
-#content.mw-body .wizlords-mainpage-link-list a:hover,
+	.skin-citizen .wizlords-shared-classes ul {
-#content.mw-body .wizlords-mainpage-link-list a.external:hover,
+		grid-auto-flow: row;
-#content.mw-body .wizlords-mainpage-whatislarp-list a:hover,
+		grid-template-rows: none;
-#content.mw-body .wizlords-mainpage-whatislarp-list a.external:hover {
+		grid-template-columns: 1fr;
-	color: #ffd37a;
+		width: auto;
-	text-decoration: none;
+	}
-}
-/* Vector's external-link indicator is a separate blue background SVG, so it
+	.skin-citizen .wizlords-class-compare {
-   must be recoloured independently from the anchor text. */
+		flex-direction: column;
-#content.mw-body .wizlords-mainpage-link-list a.external,
+	}
-#content.mw-body .wizlords-mainpage-whatislarp-list a.external {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23ff942d' d='M6 1h3v3H8V2.71L4.35 6.35l-.7-.7L7.29 2H6V1z'/%3E%3Cpath fill='%23ff942d' d='M2 2h3v1H3v4h4V5h1v3H2V2z'/%3E%3C/svg%3E");
-}
-#content.mw-body .wizlords-mainpage-link-list a.external:hover,
+	.skin-citizen .wizlords-class-category-table,
-#content.mw-body .wizlords-mainpage-whatislarp-list a.external:hover {
+	.skin-citizen .wizlords-magic-table {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23ffd37a' d='M6 1h3v3H8V2.71L4.35 6.35l-.7-.7L7.29 2H6V1z'/%3E%3Cpath fill='%23ffd37a' d='M2 2h3v1H3v4h4V5h1v3H2V2z'/%3E%3C/svg%3E");
+		min-width: 0;
-}
+		max-width: 100%;
+	}
-/* ==========================================================================
+	.skin-citizen .wizlords-reputation-table.mw-collapsed {
-   Narrow Vector Fallback
+		width: 100%;
-   --------------------------------------------------------------------------
+		min-width: 0;
-   When Vector is manually used below the small-desktop range, collapse its
-   desktop sidebar dimensions and stack the homepage columns.
-   ========================================================================== */
-@media (max-width: 899px) {
-	:root {
-		--wiz-sidebar-width: 0px;
-		--wiz-sidebar-content-gap: 0px;
-		--wiz-content-width: 100%;
-		--wiz-page-gutter: 12px;
-		--wiz-content-padding: 14px;
 	}
-	.wizlords-mainpage-left,
+	.skin-citizen .wizlords-page-image.right,
-	.wizlords-mainpage-right {
+	.skin-citizen .wizlords-page-image.left {
 		float: none;
 		width: 100%;
-		padding-left: 0;
+		margin: 0 0 18px;
-		padding-right: 0;
 	}
-}
+	.skin-citizen .ww-navbox-row {
+		display: block;
+	}
-/* ==========================================================================
+	.skin-citizen .ww-navbox-group {
-   Final What Is LARP List Alignment
+		width: 100%;
-   --------------------------------------------------------------------------
+		padding: 5px 10px;
-   Vector and shared article styles both assign margins and padding to direct
+		border-right: 0;
-   article lists. This final component-scoped reset guarantees that the What
+		border-bottom: 1px solid var(--wiz-content-background);
-   is LARP bullet edge aligns with the paragraph above, regardless of which
+		text-align: center;
-   MediaWiki wrapper is present.
+	}
-   ========================================================================== */
-#content.mw-body #bodyContent ul.wizlords-mainpage-whatislarp-list {
-	box-sizing: border-box !important;
-	width: 100% !important;
-	max-width: none !important;
-	margin: 8px 0 0 !important;
-	padding-left: 1.15em !important;
-	list-style: disc outside !important;
-	text-align: left !important;
-}
-#content.mw-body #bodyContent ul.wizlords-mainpage-whatislarp-list > li {
+	.skin-citizen .ww-navbox-list {
-	margin-left: 0 !important;
+		padding: 6px 10px;
-	padding-left: 0 !important;
+		text-align: center;
-	list-style: disc outside !important;
+	}
 }

MediaWiki:Vector.css: Difference between revisions

Revision as of 18:06, 29 June 2026

Navigation menu

Search