Echoes of the Flesh - User contributions [en]

MediaWiki:Right-gatekeep-edit

2026-10-05T18:54:36Z

DivošiRunner: Document private Gatekeep workspace and create harmless access-test placeholders

Create and edit pages in the private Gatekeep workspace

MediaWiki:Grouppage-gatekeep

2026-10-05T18:54:35Z

DivošiRunner: Document private Gatekeep workspace and create harmless access-test placeholders

Echoes of the Flesh:Access levels#Gatekeep

MediaWiki:Group-gatekeep-member

2026-10-05T18:54:34Z

DivošiRunner: Document private Gatekeep workspace and create harmless access-test placeholders

Gatekeep member

MediaWiki:Group-gatekeep

2026-10-05T18:54:32Z

DivošiRunner: Document private Gatekeep workspace and create harmless access-test placeholders

Gatekeep

MediaWiki:Citizen.css

2026-10-05T15:48:28Z

DivošiRunner: Use official Discord and Roblox SVG assets with refreshed browser URLs

/* All CSS here will be loaded for users of the Citizen skin */
/* Attribution: portions of this stylesheet were informed by PrismParty,
starcitizen.tools, SCP Wiki/Wikidot resources, and Citizen documentation,
then adapted for Echoes of the Flesh. */

/* Imports
============================================================================================ */
/* Custom Pilesaran font adapted from SCP Wiki/Wikidot resources */
@font-face {
font-family: 'Pilesaran';
src: url('/resources/assets/fonts/Pilesaran.woff2') format('woff2'),
url('/resources/assets/fonts/Pilesaran.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* latin-ext */
@font-face {
font-family: 'Kreon';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/resources/assets/fonts/t5t9IRIUKY-TFF_LW5lnMR3v2DnvPNiWcz8el2c.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Kreon';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/resources/assets/fonts/t5t9IRIUKY-TFF_LW5lnMR3v2DnvPNiWfT8e.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o58i-wi40.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o58a-wg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Rokkitt';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/fonts/qFdb35qfgYFjGy5hukqqhw5XeRgdi1ryd6DCGb-3vA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Rokkitt';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/fonts/qFdb35qfgYFjGy5hukqqhw5XeRgdi1ryd6DMGb8.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/fonts/w8gdH283Tvk__Lua32TysjIfqcuPP9g.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/fonts/w8gdH283Tvk__Lua32TysjIfp8uP.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* minecraft */
@font-face {
font-family: 'Minecraft';
src: url('/resources/assets/fonts/Minecraft.woff2') format('woff2'),
url('/resources/assets/fonts/Minecraft.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* PrismParty display font */
@font-face {
font-family: 'PrismParty';
src: url('/resources/assets/fonts/PrismParty-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* ROOT VARIABLES
[ These are variables explicitly supported by the theme.
[ https://github.com/StarCitizenTools/mediawiki-skins-Citizen/wiki/Customizing-Citizen-styles
============================================================================================ */

/* Font replacements */
:root {
--font-family-base: 'Quicksand', sans-serif;
--font-family-alternate: 'Varela Round', monospace;
--font-family-serif: 'Kreon', serif;
}

/* Color replacements */
:root.skin-citizen-light {
--color-surface-0: #f2f4f7;
--color-surface-1: #f3f6fa;
--color-surface-2: #eaeef4;
--color-surface-3: #e3e7ed;
--color-surface-4: #c3c7cf;
--color-surface-5: #eaeef5;
/*--color-base: #f2f4f7;
--color-base--emphasized: #f2f4f7;
--color-base--subtle: #f2f4f7;*/
--prism-blue-0: #7bc1f8;
--prism-blue-1: #59a2eb;
--prism-blue-2: #2e79d6;
--prism-lime-1: #c0ee6f;
--background-color-warning: #f0e7d3;
}
:root.skin-citizen-dark, :root.skin-citizen-auto {
/*--color-surface-0: #f2f4f7;
--color-surface-1: #f3f6fa;
--color-surface-2: #eff2f6;
--color-surface-3: #e3e7ed;
--color-surface-4: #c3c7cf;*/
--color-surface-5: #181c21;
/*--color-base: #f2f4f7;
--color-base--emphasized: #f2f4f7;
--color-base--subtle: #f2f4f7;*/
--prism-blue-0: #7bc1f8;
--prism-blue-1: #59a2eb;
--prism-blue-2: #2e79d6;
--prism-lime-1: #4b6124;
--background-color-warning: #333025;
}

/* FONT OVERRIDES
[ These selectors are used to replace some font elements.
============================================================================================ */
/*p {font-family: var(--font-family-alternate);}*/

/* Logotype font */
.citizen-drawer__siteinfo, .mw-logo-wordmark {
font-family: PrismParty;
}

/* JAVASCRIPT MODS
[ These selectors are required for JavaScript modifications to function.
============================================================================================ */

/* Discord icon in header with hover effect */
.disc-icon {
background-image: url(/resources/assets/discord.svg?v=2d1bd85831cd);
background-repeat: no-repeat;
background-position: center;
opacity: var(--opacity-icon-base);
width: 40px;
height: 40px;
}
.disc-icon:hover {
transform: rotate3d(0,0,1,360deg);
transition: all .25s;
}
.skin-citizen-dark .disc-icon {
filter: var(--filter-invert);
}
#citizen-discord__buttonCheckbox > span:nth-child(1) {
visibility: hidden;
}
.citizen-header__buttonCheckbox {
cursor: pointer;
}

/* Remove duplicate logo icon*/
/*a.citizen-header__button > img:nth-child(1) {*/
/* display: none;*/
/*}*/

/* TEMPLATE MODS
[ These selectors adjust templates based heavily on the Citizen skin.
============================================================================================ */
/* Transition effect for prevblogs and prevupdate */
.mw-parser-output #home-card-prevblogs .wikitable tr > td:last-child,
.mw-parser-output #home-card-prevupdate .wikitable tr > td:last-child {
transition: var(--transition-menu);
transition-property: opacity,transform;
opacity: 0;
}
/*.mw-parser-output #home-card-prevblogs .wikitable tr > td:first-child:hover ~ td,
.mw-parser-output #home-card-prevupdate .wikitable tr > td:first-child:hover ~ td {
transform: translateY(-16px);
opacity: 1;
}

/* Do not transform date widget */
.mw-parser-output #home-card-prevupdate .wikitable tr > td:first-child:hover ~ td.prevupdate-date {
transform: translateY(0);
}

/* Homepage previous blogs widget - truncates titles */
#home-card-prevblogs .wikitable a {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

@media (max-width: 500px) {
#home-card-prevblogs h3.home-card__header a {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

#home-card-prevblogs h3.home-card__header a::after {
display: none;
}

.mw-parser-output #home-card-prevblogs .wikitable {
max-height: 14.68rem;
overflow: hidden scroll !important;
}
#home-card-prevblogs .wikitable a {
-webkit-line-clamp: 3 !important;
}
/* Remove hover on small size (glitched anyway due to overflow) */
.mw-parser-output #home-card-prevblogs .wikitable tr > td:first-child:hover ~ td {
display: none;
}
}

/* Fix darkskin icon for componentlink template */
.component-link__button a img {
filter: invert(1);
}

.template__bubble {
padding: 0.1rem 0.6rem;
margin-left: 0.4rem;
background: var(--color-surface-3);
border-radius: 100px;
font-size: 0.7125rem;
font-weight: 500;
text-transform: uppercase;
}

/* Logo Dark/Light switcher */

.skin-citizen-light .dark-logo {
display: none;
}

.skin-citizen-dark .light-logo, :root.skin-citizen-auto .light-logo {
display: none;
}

/* Homescreen only cubeol recolors */
.skin-citizen-dark .page-Home .mw-parser-output .default,
.skin-citizen-dark .page-Home .mw-parser-output .pink,
.skin-citizen-dark .page-Home .mw-parser-output .orange,
.skin-citizen-dark .page-Home .mw-parser-output .lime {
background-image: linear-gradient(to right,#6d281e 0%,#e0503d 51%,#6d281e 100%);
text-decoration: none;
text-shadow: none;
}

/* SIDEBAR MODS
[ These selectors modify sidebar elements of the Citizen theme.
============================================================================================ */

.citizen-header {
background-color: var(--color-surface-1);
}

.mw-echo-notifications-badge.mw-echo-notification-badge-nojs.oo-ui-icon-bell.mw-echo-notifications-badge-all-read {
transition: all 0.1s;
}

/* Drawer navigation polish
Attribution: sectioned drawer patterns here were informed by Citizen-based
wikis including starcitizen.tools and prismparty.net, then adapted locally. */
.citizen-drawer__menu .citizen-menu {
margin-bottom: 0.7rem;
padding: 0.2rem 0;
border: 1px solid rgba( 255, 255, 255, 0.03 );
border-radius: 1rem;
background: linear-gradient( 180deg, rgba( 21, 23, 30, 0.82 ), rgba( 13, 14, 19, 0.92 ) );
}

.citizen-drawer__menu .citizen-menu__heading {
padding: 0 0.95rem 0.35rem;
margin-bottom: 0.2rem;
color: #c48a8f;
font-size: 0.72rem;
font-weight: var( --font-weight-medium );
letter-spacing: 0.08em;
text-decoration: none;
text-transform: uppercase;
}

.citizen-drawer__menu .citizen-menu__content-list {
gap: 0.15rem;
}

.citizen-drawer__menu .mw-list-item a {
margin: 0 0.45rem;
padding: 0.6rem 0.75rem;
border-radius: 0.8rem;
display: flex;
align-items: center;
gap: 0.7rem;
transition: background 180ms ease, transform 180ms ease;
}

.citizen-drawer__menu .mw-list-item a:hover {
background: rgba( 92, 24, 31, 0.14 );
transform: translateX( 2px );
}

.citizen-drawer__menu {
--icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 10.5 12 4l7.5 6.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 9.5V20h10V9.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--icon-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M4 4v5h5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8v4l3 2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--icon-dice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='14' rx='2.8' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='9' cy='9' r='1.2' fill='%23000'/%3E%3Ccircle cx='15' cy='15' r='1.2' fill='%23000'/%3E%3Ccircle cx='9' cy='15' r='1.2' fill='%23000'/%3E%3Ccircle cx='15' cy='9' r='1.2' fill='%23000'/%3E%3C/svg%3E");
--icon-article: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4.5' width='14' height='15' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8.5 9h7M8.5 12h7M8.5 15h4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-post-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4.5' width='14' height='15' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8.5 10h5M8.5 13h5M16.5 9v6M13.5 12h6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-category: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.5' y='6' width='6.5' height='6.5' rx='1.3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Crect x='13' y='6' width='6.5' height='6.5' rx='1.3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Crect x='8.75' y='13.5' width='6.5' height='6.5' rx='1.3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
--icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.2 20 19H4z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 9.5v4.5M12 17h.01' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-verified-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5 18 7v4.8c0 3.4-2.2 6.5-6 7.7-3.8-1.2-6-4.3-6-7.7V7z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m9.3 12.1 1.8 1.8 3.6-3.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M12 10.2v5M12 8h.01' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-group: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='10' r='3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='16' cy='9' r='2.3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M4.5 18c.9-2.3 2.8-3.5 5.5-3.5s4.6 1.2 5.5 3.5M14.3 15.1c1.7.2 3 .9 4 2.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-tune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6h12M6 12h12M6 18h12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='6' r='1.8' fill='%23000'/%3E%3Ccircle cx='15' cy='12' r='1.8' fill='%23000'/%3E%3Ccircle cx='11' cy='18' r='1.8' fill='%23000'/%3E%3C/svg%3E");
--icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15V6M8.5 9.5 12 6l3.5 3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 18.5h14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-policy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4.5h6l4 4v9a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M14 4.5V9h4M9 13h6M9 16h4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-gavel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.5 6 4.5 4.5M11 8.5l4.5 4.5M4.5 19.5l8-8M12.3 5.3l2.4-2.3 5.3 5.3-2.3 2.4M9.8 7.8l2.4-2.3 5.3 5.3-2.3 2.4M3.8 20.2h8.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.citizen-drawer__menu .mw-list-item a .citizen-ui-icon {
display: none;
}

.citizen-drawer__menu .mw-list-item a::before {
content: "";
display: inline-block;
flex: 0 0 1.1rem;
width: 1.1rem;
height: 1.1rem;
background-color: currentColor;
mask-image: var( --drawer-icon );
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-image: var( --drawer-icon );
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
opacity: 0.84;
}

#n-mainpage-description,
#n-Home {
--drawer-icon: var( --icon-home );
}

#n-recentchanges,
#n-Recent-changes {
--drawer-icon: var( --icon-history );
}

#n-randompage,
#n-Random-page {
--drawer-icon: var( --icon-dice );
}

#n-All-pages {
--drawer-icon: var( --icon-article );
}

#n-New-pages {
--drawer-icon: var( --icon-post-add );
}

#n-Categories {
--drawer-icon: var( --icon-category );
}

#n-Wanted-pages {
--drawer-icon: var( --icon-warning );
}

#n-Access-levels {
--drawer-icon: var( --icon-verified-user );
}

#n-About-the-wiki {
--drawer-icon: var( --icon-info );
}

#n-User-list {
--drawer-icon: var( --icon-group );
}

#n-Roblox-groups {
--drawer-icon: var( --icon-group );
}

#n-Roblox {
--drawer-icon: var( --icon-roblox );
}

#t-specialpages {
--drawer-icon: var( --icon-tune );
}

#t-upload {
--drawer-icon: var( --icon-upload );
}

#n-Special-pages {
--drawer-icon: var( --icon-tune );
}

#n-Upload-file {
--drawer-icon: var( --icon-upload );
}

#n-Privacy-policy {
--drawer-icon: var( --icon-policy );
}

#n-Disclaimers {
--drawer-icon: var( --icon-gavel );
}

#n-Discord {
--drawer-icon: var( --icon-discord );
}

/* Social SVGs inherit Citizen's active theme color in the drawer. */
#n-Discord a::before,
#n-Roblox a::before {
background-color: currentColor;
background-image: none;
mask-image: var( --drawer-icon );
-webkit-mask-image: var( --drawer-icon );
filter: none;
opacity: 0.84;
}

/* Adds bottom row to menu */
.mw-portlet-External {
margin-top: 0.9rem;
padding: 0.65rem 0 0;
border-top: 1px solid var( --border-color-base );
font-size: 0.8125rem;
grid-column: 1 / -1;
white-space: nowrap;
position: sticky;
bottom: -0.55rem;
background: var( --color-surface-5 );
}

@media only screen and (max-width: 553px) {
.mw-portlet-External {
padding-bottom: 0.56rem;
}
}
/* Stop weird scrolling behavior */
.mw-portlet-External {
margin-bottom: -2rem;
padding-bottom: 0.5rem;
}

.mw-portlet-External .citizen-menu__heading {
display: none;
}
.mw-portlet-External ul {
display: flex;
gap: 0.45rem;
overflow: auto;
padding-inline: 0.35rem;
}
.mw-portlet-External .mw-list-item a {
gap: 0.45rem;
padding: 0.5rem 0.75rem;
border: 1px solid rgba( 255, 255, 255, 0.06 );
border-radius: 999px;
background: rgba( 255, 255, 255, 0.03 );
}

/* Small size external full width */
@media only screen and (max-width: 553px) {
.citizen-drawer__menu {
display: initial;
}
.citizen-drawer__menu .citizen-menu {
width: 100%;
margin: 0 0 var(--space-sm);
}
.mw-portlet-External {
margin-bottom: -2.5rem;
}
}

/* Label */
.citizen-drawer__menu [id^="n-sidebar-label-"] a {
pointer-events: none;
margin-left: var( --space-xs );
padding-left: var( --space-md );
padding-right: var( --space-xs );
border-left: 1px solid var( --border-color-base );
border-radius: 0;
letter-spacing: 0.05em;
font-weight: var( --font-weight-normal );
color: var( --color-base--subtle ) !important;
}

/* Icons */
.citizen-drawer__menu [id^="n-sidebar-icon-"] a {
font-size: 0;
}

.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
display: block;
content: "";
width: var( --size-icon );
height: var( --size-icon );
background: transparent center/contain no-repeat;
opacity: var( --opacity-icon-base );
}

.citizen-ui-icon.mw-ui-icon-discord {
background-image: url(/resources/assets/discord.svg?v=2d1bd85831cd);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.6;
}

.skin-citizen-dark .citizen-ui-icon.mw-ui-icon-discord, .skin-citizen-auto .citizen-ui-icon.mw-ui-icon-discord {
filter: invert( 1 );
}

.skin-citizen-dark .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before,
.skin-citizen-auto .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
filter: invert( 1 );
}

/* Bottom menu icons */
#n-sidebar-icon-discord a:before {background-image: url('/resources/assets/discord.svg?v=2d1bd85831cd')}

/* Redundant alert/breaks sidebar*/
.mw-echo-alert {
display: none;
}

/* HEADER/FOOTER MODS
[ These selectors modify header elements of the Citizen theme, normal and sticky.
============================================================================================ */

/* Backdrop filter on sticky header */
.citizen-page-header::before {
backdrop-filter: saturate(50%) blur(16px);
border-radius: 0 0 var(--border-radius--large) var(--border-radius--large);
}
/* Margin to move down the list */
.citizen-footer ul {
margin-top: 1rem;
}
.page-Home .mw-body-footer {
display: none;
}

.page-Home .firstHeading {
font-family: 'PrismParty' !important;
}

/* New colors */
.citizen-header, #citizen-pref-panel, .citizen-userMenu .citizen-menu__card, .citizen-menu__card, .mw-portlet-External {
background-color: var(--color-surface-5);
}

/* Pure black */
.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night.skin-citizen-dark .citizen-header, .citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night.skin-citizen-dark #citizen-pref-panel, .citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night.skin-citizen-dark .citizen-userMenu .citizen-menu__card, .citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night.skin-citizen-dark .citizen-menu__card, .citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night.skin-citizen-dark .mw-portlet-External {
background-color: #08090a;
}

/* FIXES
[ These selectors "fix" buggy or unusable elements.
============================================================================================ */

/* Hide in-article toc */
#toc {
display: none;
}

/* Fix prevblogs side overflow bug */
#home-card-prevblogs .citizen-overflow--right, #home-card-prevupdate .citizen-overflow--right {
-webkit-mask-image: initial;
mask-image: initial;
}

/* Make TemplateData editor popup above all else on page */
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active {
z-index: 999;
}

/* Missing category colors */
.catlinks li > a.new:hover {
color: #fff;
}

/* Fixes forum search bar in FireFox*/
#mw-wikiforum-searchbox-border {
display: inline-flex;
}

/* Visual Editor template show more button fix */
.skin-citizen .ve-ui-expandableContent-toggle {
background-color: var(--color-surface-1);
}

/* Make inactive vote more readable */
.ajaxpoll .ajaxpoll-answer-vote div {
background: var(--border-color-base);
}
.ajaxpoll .ajaxpoll-our-vote div {
background: var(--background-color-primary--active);
}
.page-Home .ajaxpoll {
margin: 0 -1.5rem -2rem -1.5rem;
}

/* Overflow visible on preview elements */
#home-card-prevblogs .citizen-table-wrapper,
#home-card-prevupdate .citizen-table-wrapper {
overflow-x: visible;
}

/* Darkmode for structured discussions */
.flow-topic-titlebar {
background-color: var(--color-surface-3);
border-radius: var(--border-radius--medium);
box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575);
}

.flow-post .flow-post-content {
word-break: break-word;
color: var(--color-base);
}

div > .flow-menu ul {
border: none;
background-color: var(--color-surface-1);
box-shadow: var(--box-shadow-dialog);
border-radius: var(--border-radius--medium);
}

.flow-post .flow-author .mw-usertoollinks {
opacity: 0;
transition: opacity 0.25s ease;
color: var(--color-base);
}

div.mw-gallery-slideshow-img-container a.image {
height: auto;
max-width: 100%;
}

/*Source editor drop down selections*/
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover {
background-color: var(--background-color-primary--hover);
}

/* Source editor upload form */
.wikiEditor-toolbar-dialog .ui-dialog-buttonpane {
border-top: none !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: inherit !important;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
background: inherit !important;
}
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-2--hover);
}

/* FORUMS
[ These selectors restyle the forums interface
============================================================================================ */
/* Main display */

table.mw-wikiforum-frame {
padding: 15px 15px 0 15px;
background: var(--color-surface-1);
border-radius: 8px;
border: none;
box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575);
}

td.mw-wikiforum-innerframe, th.mw-wikiforum-title, th.mw-wikiforum-admin, th.mw-wikiforum-value, th.mw-wikiforum-lastpost {
border-bottom: unset;
border-top: unset;
border: unset;
}
/* Forum title radius background */
tr.mw-wikiforum-title {
background: none;
}
table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-title {
background: var(--color-surface-2);
border-top-left-radius: var(--border-radius--large);
border-bottom-left-radius: var(--border-radius--large);
}
table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-admin, table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-value, table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-value {
background: var(--color-surface-2);
}
table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-lastpost {
background: var(--color-surface-2);
border-top-right-radius: var(--border-radius--large);
border-bottom-right-radius: var(--border-radius--large);
}

td.mw-wikiforum-title, td.mw-wikiforum-admin, td.mw-wikiforum-value, td.mw-wikiforum-lastpost {
border-bottom: 1px solid var(--border-color-base);
}
table.mw-wikiforum-title tbody tr.mw-wikiforum-marked:last-child td.mw-wikiforum-title, table.mw-wikiforum-title tbody tr.mw-wikiforum-marked:last-child td.mw-wikiforum-admin, table.mw-wikiforum-title tbody tr.mw-wikiforum-marked:last-child td.mw-wikiforum-value, table.mw-wikiforum-title tbody tr.mw-wikiforum-marked:last-child td.mw-wikiforum-lastpost {
border-bottom: none;
}

/* Icons from icons8.com*/
p.mw-wikiforum-valuetitle a img, td.mw-wikiforum-rightside img, p.mw-wikiforum-issue img, tr.mw-wikiforum-marked td.mw-wikiforum-admin a img, div#mw-wikiforum-searchbox-border img#mw-wikiforum-searchbox-picture, th.mw-wikiforum-title a img, td.mw-wikiforum-title p.mw-wikiforum-thread img {
width: 1.3rem;
}
/* Locked thread icon*/
table.mw-wikiforum-frame:nth-child(3) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) > img:nth-child(1) {
width: 1.5rem;
}
/* Social Icon */
td.mw-wikiforum-thread-main div.wikiforum-avatar-image img.mw-socialprofile-avatar {
width: 5.5rem;
border-radius: 8px;
}
/* main thread edits */
td.mw-wikiforum-thread-main {
padding: unset;
border: unset;
background: unset;
}
table.mw-wikiforum-posted {
color: var(--color-base--subtle);
font-family: var(--font-family-base)
font-size: 0.6rem;
border-top: 1px solid var(--border-color-base);
margin-bottom: unset;
}
th.mw-wikiforum-thread-top {
font-weight: normal;
background: var(--color-surface-2);
border-radius: var(--border-radius--medium);
border: 1px solid var(--border-color-base);
margin-bottom: 15px;
display: block;
}
tr.mw-wikiforum-sticky {
background: unset;
}
tr.mw-wikiforum-normal {
background: none;
}
td.mw-wikiforum-thread-main, td.mw-wikiforum-thread-sub {
word-break: unset;
}

td.mw-wikiforum-thread-sub {
padding: 0px 10px;
border: 1px solid var(--border-color-base);
background: var(--color-surface-2);
border-radius: var(--border-radius--small);
}

#mw-wikiforum-searchbox-border {
border: 1px solid var(--border-color-base);
background: var(--color-surface-2);
border-radius: var(--border-radius--small);
}

/* 'Invalid 'property from: Template:Scrollbox/styles.css */
.mw-parser-output .scrollbox__container::before {
box-shadow: inset 8px 0 12px -4px var(--color-surface-0), inset -8px 0 6px -4px var(--color-surface-0);
}

/* Template:SymbolicIcon */
.skin-citizen-dark .infobox-player__commenticon div.infobox-player__commenticon-inner a img {
filter: invert(1);
}

.page-Guide_Getting_Started .card-button a.external.text {
color: white;
}

/* Remove auto color mode */
#skin-client-prefs-skin-theme > div:nth-child(2) > ul:nth-child(1) > li:nth-child(1) > div:nth-child(1) > form:nth-child(1) {
grid-template-columns: repeat(2,1fr);
}
#skin-client-prefs-skin-theme > div:nth-child(2) > ul:nth-child(1) > li:nth-child(1) > div:nth-child(1) > form:nth-child(1) > div:nth-child(1) {
display: none;
}

/* Editor text selection */
.ve-ce-attachedRootNode::selection, .ve-ce-attachedRootNode ::selection {
background: rgba(109,169,247,0.5) !important;
}

/* Cookie window size*/
.mw-cookiewarning-container {
background-color: var(--color-surface-5);
max-width: 30rem;
}

/* Drawer popup sizing
Keep the desktop navigation card sized to its actual menu content instead
of forcing a wide, tall panel. */
@media screen and (min-width: 1120px) {
#citizen-drawer__card {
width: fit-content;
max-width: min( calc( 100vw - 1rem ), 68rem );
height: auto;
min-height: 0;
}

#citizen-drawer__card .citizen-menu__card-content,
#citizen-drawer__card #citizen-main-menu {
width: fit-content;
min-width: 0;
}
}

/* Template styles override for wide layout homepage */
.citizen-feature-custom-width-clientpref-wide div#home-nav.home-grid {
grid: auto-flow dense/repeat( auto-fit, minmax( 15.375rem, 1fr ) )!important;
}
@media (max-width:1644px) and (min-width:1405px) {
.citizen-feature-custom-width-clientpref-wide div#home-nav.home-grid {
grid: auto-flow dense/repeat( auto-fit, minmax( 18.375rem, 1fr ) )!important;
}
}
@media (max-width:1660px) and (min-width:1645px) {
.citizen-feature-custom-width-clientpref-wide div#home-nav.home-grid {
grid: auto-flow dense/repeat( auto-fit, minmax( 21.375rem, 1fr ) )!important;
}
}

/* Citizen polish
Attribution: the preferences menu, page-info card, and footer control treatments
below were informed by Citizen implementations on starcitizen.tools and refined
to fit Echoes of the Flesh. */
.citizen-preferences .citizen-dropdown-summary,
.citizen-preferences-dropdown .citizen-dropdown-summary {
border: 1px solid transparent;
border-radius: 999px;
transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.citizen-preferences .citizen-dropdown-summary:hover,
.citizen-preferences-dropdown .citizen-dropdown-summary:hover {
border-color: rgba( 137, 42, 48, 0.3 );
background: rgba( 62, 17, 23, 0.16 );
box-shadow: 0 10px 30px rgba( 38, 8, 13, 0.18 );
}

#citizen-preferences__card,
#citizen-preferences-dropdown__card {
border: 1px solid var( --border-color-base );
border-radius: 1.25rem;
background: linear-gradient( 180deg, rgba( 20, 22, 29, 0.98 ), rgba( 12, 13, 18, 0.98 ) );
box-shadow: 0 20px 50px rgba( 5, 7, 10, 0.3 );
}

.citizen-page-footer .page-info {
display: grid;
gap: 0.75rem;
}

@media (min-width: 860px) {
.citizen-page-footer .page-info {
grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
}
}

.citizen-page-footer .page-info__item {
padding: 0.95rem 1rem;
border: 1px solid var( --border-color-base );
border-radius: var( --border-radius-medium );
background: linear-gradient( 180deg, rgba( 19, 20, 27, 0.92 ), rgba( 12, 13, 18, 0.98 ) );
}

.citizen-page-footer .page-info__label {
margin-bottom: 0.3rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#footer-places ul {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 0.9rem;
padding: 0;
}

#footer-places li {
list-style: none;
}

#footer-places a {
display: inline-flex;
padding: 0.45rem 0.8rem;
border: 1px solid var( --border-color-base );
border-radius: 999px;
background: var( --color-surface-2 );
text-decoration: none;
}

#footer-icons .cdx-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.45rem;
border-radius: 0.75rem;
background: transparent;
transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#footer-icons .cdx-button:hover {
background: rgba( 255, 255, 255, 0.04 );
box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.08 );
transform: translateY( -1px );
}

/* Theme compatibility patch
Align custom Citizen overrides with the current client preference classes
so light, dark, and AMOLED all receive the intended palette. */

:root,
:root.skin-theme-clientpref-day,
:root.skin-citizen-light,
:root.skin-theme-clientpref-os {
--color-surface-5: #eaeef5;
--prism-lime-1: #c0ee6f;
--background-color-warning: #f0e7d3;
--scw-panel-gradient: linear-gradient( 180deg, rgba( 255, 255, 255, 0.96 ), rgba( 241, 244, 249, 0.98 ) );
--scw-panel-gradient-soft: linear-gradient( 180deg, rgba( 255, 255, 255, 0.92 ), rgba( 243, 246, 250, 0.98 ) );
--scw-chip-border: rgba( 21, 26, 33, 0.08 );
--scw-chip-bg: rgba( 255, 255, 255, 0.78 );
--scw-footer-hover: rgba( 92, 24, 31, 0.08 );
--scw-footer-hover-ring: rgba( 92, 24, 31, 0.12 );
}

:root.skin-theme-clientpref-night,
:root.skin-citizen-dark {
--color-surface-5: #181c21;
--prism-lime-1: #4b6124;
--background-color-warning: #333025;
--scw-panel-gradient: linear-gradient( 180deg, rgba( 20, 22, 29, 0.98 ), rgba( 12, 13, 18, 0.98 ) );
--scw-panel-gradient-soft: linear-gradient( 180deg, rgba( 21, 23, 30, 0.82 ), rgba( 13, 14, 19, 0.92 ) );
--scw-chip-border: rgba( 255, 255, 255, 0.06 );
--scw-chip-bg: rgba( 255, 255, 255, 0.03 );
--scw-footer-hover: rgba( 255, 255, 255, 0.04 );
--scw-footer-hover-ring: rgba( 255, 255, 255, 0.08 );
}

@media ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os {
--color-surface-5: #181c21;
--prism-lime-1: #4b6124;
--background-color-warning: #333025;
--scw-panel-gradient: linear-gradient( 180deg, rgba( 20, 22, 29, 0.98 ), rgba( 12, 13, 18, 0.98 ) );
--scw-panel-gradient-soft: linear-gradient( 180deg, rgba( 21, 23, 30, 0.82 ), rgba( 13, 14, 19, 0.92 ) );
--scw-chip-border: rgba( 255, 255, 255, 0.06 );
--scw-chip-bg: rgba( 255, 255, 255, 0.03 );
--scw-footer-hover: rgba( 255, 255, 255, 0.04 );
--scw-footer-hover-ring: rgba( 255, 255, 255, 0.08 );
}
}

:root.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1,
:root.skin-citizen-dark.citizen-feature-pure-black-clientpref-1 {
--scw-panel-gradient: linear-gradient( 180deg, rgba( 8, 9, 10, 0.99 ), rgba( 0, 0, 0, 0.99 ) );
--scw-panel-gradient-soft: linear-gradient( 180deg, rgba( 11, 12, 14, 0.94 ), rgba( 0, 0, 0, 0.99 ) );
--scw-chip-border: rgba( 255, 255, 255, 0.08 );
--scw-chip-bg: rgba( 255, 255, 255, 0.02 );
}

@media ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os.citizen-feature-pure-black-clientpref-1 {
--scw-panel-gradient: linear-gradient( 180deg, rgba( 8, 9, 10, 0.99 ), rgba( 0, 0, 0, 0.99 ) );
--scw-panel-gradient-soft: linear-gradient( 180deg, rgba( 11, 12, 14, 0.94 ), rgba( 0, 0, 0, 0.99 ) );
--scw-chip-border: rgba( 255, 255, 255, 0.08 );
--scw-chip-bg: rgba( 255, 255, 255, 0.02 );
}
}

.citizen-drawer__menu .citizen-menu {
border-color: var( --border-color-base );
background: var( --scw-panel-gradient-soft );
box-shadow: var( --box-shadow-dialog );
}

.mw-portlet-External .mw-list-item a {
border-color: var( --scw-chip-border );
background: var( --scw-chip-bg );
}

#citizen-preferences__card,
#citizen-preferences-dropdown__card {
background: var( --scw-panel-gradient );
}

.citizen-page-footer .page-info__item {
background: var( --scw-panel-gradient );
box-shadow: 0 12px 32px rgba( 5, 5, 8, 0.08 );
}

#footer-icons .cdx-button:hover {
background: var( --scw-footer-hover );
box-shadow: 0 0 0 1px var( --scw-footer-hover-ring );
}

:root.skin-theme-clientpref-night .citizen-ui-icon.mw-ui-icon-discord,
:root.skin-citizen-dark .citizen-ui-icon.mw-ui-icon-discord,
:root.skin-theme-clientpref-night .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before,
:root.skin-citizen-dark .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before,
:root.skin-theme-clientpref-night .infobox-player__commenticon div.infobox-player__commenticon-inner a img,
:root.skin-citizen-dark .infobox-player__commenticon div.infobox-player__commenticon-inner a img {
filter: invert( 1 );
}

@media ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os .citizen-ui-icon.mw-ui-icon-discord,
:root.skin-theme-clientpref-os .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before,
:root.skin-theme-clientpref-os .infobox-player__commenticon div.infobox-player__commenticon-inner a img {
filter: invert( 1 );
}
}

@media ( prefers-color-scheme: light ) {
:root.skin-theme-clientpref-os .citizen-ui-icon.mw-ui-icon-discord,
:root.skin-theme-clientpref-os .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before,
:root.skin-theme-clientpref-os .infobox-player__commenticon div.infobox-player__commenticon-inner a img {
filter: none;
}
}

:root.skin-theme-clientpref-day .dark-logo,
:root.skin-citizen-light .dark-logo {
display: none;
}

:root.skin-theme-clientpref-night .light-logo,
:root.skin-citizen-dark .light-logo {
display: none;
}

@media ( prefers-color-scheme: light ) {
:root.skin-theme-clientpref-os .dark-logo {
display: none;
}

:root.skin-theme-clientpref-os .light-logo {
display: initial;
}
}

@media ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os .light-logo {
display: none;
}

:root.skin-theme-clientpref-os .dark-logo {
display: initial;
}
}

/* Global button contrast patch for light mode. */

:root.skin-theme-clientpref-day .mw-portlet-External .mw-list-item a,
:root.skin-citizen-light .mw-portlet-External .mw-list-item a,
:root.skin-theme-clientpref-day #footer-icons .cdx-button,
:root.skin-citizen-light #footer-icons .cdx-button,
:root.skin-theme-clientpref-day .citizen-preferences .citizen-dropdown-summary,
:root.skin-theme-clientpref-day .citizen-preferences-dropdown .citizen-dropdown-summary,
:root.skin-citizen-light .citizen-preferences .citizen-dropdown-summary,
:root.skin-citizen-light .citizen-preferences-dropdown .citizen-dropdown-summary {
border-color: rgba( 92, 24, 31, 0.14 );
background: rgba( 255, 255, 255, 0.9 );
color: var( --color-emphasized );
box-shadow: 0 8px 22px rgba( 20, 23, 28, 0.06 );
}

:root.skin-theme-clientpref-day .mw-portlet-External .mw-list-item a:hover,
:root.skin-citizen-light .mw-portlet-External .mw-list-item a:hover,
:root.skin-theme-clientpref-day #footer-icons .cdx-button:hover,
:root.skin-citizen-light #footer-icons .cdx-button:hover {
border-color: rgba( 92, 24, 31, 0.2 );
background: rgba( 255, 255, 255, 0.98 );
}

@media ( prefers-color-scheme: light ) {
:root.skin-theme-clientpref-os .mw-portlet-External .mw-list-item a,
:root.skin-theme-clientpref-os #footer-icons .cdx-button,
:root.skin-theme-clientpref-os .citizen-preferences .citizen-dropdown-summary,
:root.skin-theme-clientpref-os .citizen-preferences-dropdown .citizen-dropdown-summary {
border-color: rgba( 92, 24, 31, 0.14 );
background: rgba( 255, 255, 255, 0.9 );
color: var( --color-emphasized );
box-shadow: 0 8px 22px rgba( 20, 23, 28, 0.06 );
}

:root.skin-theme-clientpref-os .mw-portlet-External .mw-list-item a:hover,
:root.skin-theme-clientpref-os #footer-icons .cdx-button:hover {
border-color: rgba( 92, 24, 31, 0.2 );
background: rgba( 255, 255, 255, 0.98 );
}
}

/* Light surface recovery patch
Force the footer, navigation drawer, and preferences panel to use
light surfaces with readable text in day mode and auto-light mode. */

:root.skin-theme-clientpref-day,
:root.skin-citizen-light {
--scw-light-panel-gradient: linear-gradient( 180deg, rgba( 255, 255, 255, 0.97 ), rgba( 241, 244, 249, 0.99 ) );
--scw-light-panel-gradient-soft: linear-gradient( 180deg, rgba( 255, 255, 255, 0.94 ), rgba( 245, 247, 251, 0.99 ) );
--scw-light-chip-bg: rgba( 255, 255, 255, 0.88 );
--scw-light-chip-border: rgba( 92, 24, 31, 0.14 );
--scw-light-hover: rgba( 92, 24, 31, 0.08 );
--scw-light-shadow: 0 12px 28px rgba( 20, 23, 28, 0.08 );
--scw-light-heading: #9b4d55;
}

@media ( prefers-color-scheme: light ) {
:root.skin-theme-clientpref-os {
--scw-light-panel-gradient: linear-gradient( 180deg, rgba( 255, 255, 255, 0.97 ), rgba( 241, 244, 249, 0.99 ) );
--scw-light-panel-gradient-soft: linear-gradient( 180deg, rgba( 255, 255, 255, 0.94 ), rgba( 245, 247, 251, 0.99 ) );
--scw-light-chip-bg: rgba( 255, 255, 255, 0.88 );
--scw-light-chip-border: rgba( 92, 24, 31, 0.14 );
--scw-light-hover: rgba( 92, 24, 31, 0.08 );
--scw-light-shadow: 0 12px 28px rgba( 20, 23, 28, 0.08 );
--scw-light-heading: #9b4d55;
}
}

:root.skin-theme-clientpref-day .citizen-drawer__menu .citizen-menu,
:root.skin-citizen-light .citizen-drawer__menu .citizen-menu,
:root.skin-theme-clientpref-day #citizen-preferences__card,
:root.skin-citizen-light #citizen-preferences__card,
:root.skin-theme-clientpref-day #citizen-preferences-dropdown__card,
:root.skin-citizen-light #citizen-preferences-dropdown__card,
:root.skin-theme-clientpref-day .citizen-page-footer .page-info__item,
:root.skin-citizen-light .citizen-page-footer .page-info__item,
:root.skin-theme-clientpref-day .mw-portlet-External,
:root.skin-citizen-light .mw-portlet-External {
border-color: rgba( 92, 24, 31, 0.1 );
background: var( --scw-light-panel-gradient-soft );
box-shadow: var( --scw-light-shadow );
}

:root.skin-theme-clientpref-day .citizen-page-footer .page-info__item,
:root.skin-citizen-light .citizen-page-footer .page-info__item {
background: var( --scw-light-panel-gradient );
}

:root.skin-theme-clientpref-day .citizen-drawer__menu .citizen-menu__heading,
:root.skin-citizen-light .citizen-drawer__menu .citizen-menu__heading,
:root.skin-theme-clientpref-day .citizen-page-footer .page-info__label,
:root.skin-citizen-light .citizen-page-footer .page-info__label,
:root.skin-theme-clientpref-day .citizen-preferences-section__heading,
:root.skin-citizen-light .citizen-preferences-section__heading {
color: var( --scw-light-heading );
}

:root.skin-theme-clientpref-day .citizen-drawer__menu .mw-list-item a,
:root.skin-citizen-light .citizen-drawer__menu .mw-list-item a,
:root.skin-theme-clientpref-day .citizen-page-footer .page-info__item,
:root.skin-citizen-light .citizen-page-footer .page-info__item,
:root.skin-theme-clientpref-day .citizen-page-footer .page-info__item a,
:root.skin-citizen-light .citizen-page-footer .page-info__item a,
:root.skin-theme-clientpref-day #footer-desc,
:root.skin-citizen-light #footer-desc,
:root.skin-theme-clientpref-day #footer-tagline,
:root.skin-citizen-light #footer-tagline,
:root.skin-theme-clientpref-day .citizen-preferences,
:root.skin-citizen-light .citizen-preferences,
:root.skin-theme-clientpref-day .citizen-preferences .cdx-label__label__text,
:root.skin-citizen-light .citizen-preferences .cdx-label__label__text,
:root.skin-theme-clientpref-day .citizen-preferences .cdx-label__description,
:root.skin-citizen-light .citizen-preferences .cdx-label__description {
color: var( --color-base );
}

:root.skin-theme-clientpref-day .citizen-drawer__menu .mw-list-item a:hover,
:root.skin-citizen-light .citizen-drawer__menu .mw-list-item a:hover,
:root.skin-theme-clientpref-day .mw-portlet-External .mw-list-item a:hover,
:root.skin-citizen-light .mw-portlet-External .mw-list-item a:hover,
:root.skin-theme-clientpref-day #footer-places a:hover,
:root.skin-citizen-light #footer-places a:hover,
:root.skin-theme-clientpref-day .citizen-preferences .citizen-dropdown-summary:hover,
:root.skin-citizen-light .citizen-preferences .citizen-dropdown-summary:hover,
:root.skin-theme-clientpref-day .citizen-preferences-dropdown .citizen-dropdown-summary:hover,
:root.skin-citizen-light .citizen-preferences-dropdown .citizen-dropdown-summary:hover {
background: rgba( 92, 24, 31, 0.08 );
}

:root.skin-theme-clientpref-day .mw-portlet-External .mw-list-item a,
:root.skin-citizen-light .mw-portlet-External .mw-list-item a,
:root.skin-theme-clientpref-day #footer-places a,
:root.skin-citizen-light #footer-places a,
:root.skin-theme-clientpref-day .citizen-preferences-card,
:root.skin-citizen-light .citizen-preferences-card,
:root.skin-theme-clientpref-day .citizen-preferences .citizen-dropdown-summary,
:root.skin-citizen-light .citizen-preferences .citizen-dropdown-summary,
:root.skin-theme-clientpref-day .citizen-preferences-dropdown .citizen-dropdown-summary,
:root.skin-citizen-light .citizen-preferences-dropdown .citizen-dropdown-summary {
border-color: var( --scw-light-chip-border );
background: var( --scw-light-chip-bg );
color: var( --color-emphasized );
box-shadow: 0 8px 22px rgba( 20, 23, 28, 0.06 );
}

:root.skin-theme-clientpref-day .citizen-preferences-card__label,
:root.skin-citizen-light .citizen-preferences-card__label {
color: var( --color-base--subtle );
}

:root.skin-theme-clientpref-day .citizen-preferences .cdx-select-vue__handle,
:root.skin-citizen-light .citizen-preferences .cdx-select-vue__handle,
:root.skin-theme-clientpref-day .citizen-preferences .cdx-text-input__input,
:root.skin-citizen-light .citizen-preferences .cdx-text-input__input {
border-color: rgba( 92, 24, 31, 0.14 );
background: #fff;
color: var( --color-emphasized );
}

:root.skin-theme-clientpref-day .citizen-preferences .cdx-toggle-switch,
:root.skin-citizen-light .citizen-preferences .cdx-toggle-switch {
background-color: rgba( 21, 26, 33, 0.14 );
}

@media ( prefers-color-scheme: light ) {
:root.skin-theme-clientpref-os .citizen-drawer__menu .citizen-menu,
:root.skin-theme-clientpref-os #citizen-preferences__card,
:root.skin-theme-clientpref-os #citizen-preferences-dropdown__card,
:root.skin-theme-clientpref-os .citizen-page-footer .page-info__item,
:root.skin-theme-clientpref-os .mw-portlet-External {
border-color: rgba( 92, 24, 31, 0.1 );
background: var( --scw-light-panel-gradient-soft );
box-shadow: var( --scw-light-shadow );
}

:root.skin-theme-clientpref-os .citizen-page-footer .page-info__item {
background: var( --scw-light-panel-gradient );
}

:root.skin-theme-clientpref-os .citizen-drawer__menu .citizen-menu__heading,
:root.skin-theme-clientpref-os .citizen-page-footer .page-info__label,
:root.skin-theme-clientpref-os .citizen-preferences-section__heading {
color: var( --scw-light-heading );
}

:root.skin-theme-clientpref-os .citizen-drawer__menu .mw-list-item a,
:root.skin-theme-clientpref-os .citizen-page-footer .page-info__item,
:root.skin-theme-clientpref-os .citizen-page-footer .page-info__item a,
:root.skin-theme-clientpref-os #footer-desc,
:root.skin-theme-clientpref-os #footer-tagline,
:root.skin-theme-clientpref-os .citizen-preferences,
:root.skin-theme-clientpref-os .citizen-preferences .cdx-label__label__text,
:root.skin-theme-clientpref-os .citizen-preferences .cdx-label__description {
color: var( --color-base );
}

:root.skin-theme-clientpref-os .citizen-drawer__menu .mw-list-item a:hover,
:root.skin-theme-clientpref-os .mw-portlet-External .mw-list-item a:hover,
:root.skin-theme-clientpref-os #footer-places a:hover,
:root.skin-theme-clientpref-os .citizen-preferences .citizen-dropdown-summary:hover,
:root.skin-theme-clientpref-os .citizen-preferences-dropdown .citizen-dropdown-summary:hover {
background: rgba( 92, 24, 31, 0.08 );
}

:root.skin-theme-clientpref-os .mw-portlet-External .mw-list-item a,
:root.skin-theme-clientpref-os #footer-places a,
:root.skin-theme-clientpref-os .citizen-preferences-card,
:root.skin-theme-clientpref-os .citizen-preferences .citizen-dropdown-summary,
:root.skin-theme-clientpref-os .citizen-preferences-dropdown .citizen-dropdown-summary {
border-color: var( --scw-light-chip-border );
background: var( --scw-light-chip-bg );
color: var( --color-emphasized );
box-shadow: 0 8px 22px rgba( 20, 23, 28, 0.06 );
}

:root.skin-theme-clientpref-os .citizen-preferences-card__label {
color: var( --color-base--subtle );
}

:root.skin-theme-clientpref-os .citizen-preferences .cdx-select-vue__handle,
:root.skin-theme-clientpref-os .citizen-preferences .cdx-text-input__input {
border-color: rgba( 92, 24, 31, 0.14 );
background: #fff;
color: var( --color-emphasized );
}

:root.skin-theme-clientpref-os .citizen-preferences .cdx-toggle-switch {
background-color: rgba( 21, 26, 33, 0.14 );
}
}

/* Related lore cards: preserve full archive titles on desktop and mobile. */
#mw-data-after-content .read-more-container-card-list .cdx-card__text__title,
#mw-data-after-content .read-more-container-card-list .cdx-card__text__description {
white-space: normal;
overflow-wrap: anywhere;
}

/* Visible community shortcuts on Citizen's desktop rail and mobile bar. */
:root {
--icon-discord: url("/resources/assets/discord.svg?v=2d1bd85831cd");
--icon-roblox: url("/resources/assets/roblox.svg?v=cb13a6f0470b");
}
.citizen-social__icon {
display: block;
flex: none;
width: 20px;
height: 20px;
background-color: currentColor;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.citizen-social__icon--discord {
mask-image: var( --icon-discord );
-webkit-mask-image: var( --icon-discord );
}
.citizen-social__icon--roblox {
mask-image: var( --icon-roblox );
-webkit-mask-image: var( --icon-roblox );
}

MediaWiki:Citizen.js

2026-10-05T15:40:58Z

DivošiRunner: Restore theme-aware Discord and Roblox icons in Citizen navigation

/* All JavaScript here will be loaded for users of the Citizen skin. */

// Community shortcuts using Citizen's current header button markup.
$( function () {
const drawer = document.querySelector( '.citizen-drawer' );
if ( !drawer ) {
return;
}

let previous = drawer;
[
{ name: 'discord', label: 'Join us on Discord!', href: 'https://discord.gg/sarkic' },
{ name: 'roblox', label: 'Sarkic Cults on Roblox', href: 'https://www.roblox.com/groups/3388048' }
].forEach( function ( service ) {
const existing = document.querySelector( '.citizen-social--' + service.name );
if ( existing ) {
previous = existing;
return;
}

const item = document.createElement( 'div' );
item.className = 'citizen-social citizen-social--' + service.name + ' citizen-header__item';
const link = document.createElement( 'a' );
link.className = 'citizen-' + service.name + ' citizen-cdx-button--size-large cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet';
link.href = service.href;
link.target = '_blank';
link.rel = 'noopener noreferrer';
link.title = service.label;
link.setAttribute( 'aria-label', service.label );
const icon = document.createElement( 'span' );
icon.className = 'citizen-social__icon citizen-social__icon--' + service.name;
icon.setAttribute( 'aria-hidden', 'true' );
link.appendChild( icon );
item.appendChild( link );
previous.insertAdjacentElement( 'afterend', item );
previous = item;
} );
} );

MediaWiki:Citizen.css

2026-10-05T15:40:57Z

DivošiRunner: Restore theme-aware Discord and Roblox icons in Citizen navigation

/* All CSS here will be loaded for users of the Citizen skin */
/* Attribution: portions of this stylesheet were informed by PrismParty,
starcitizen.tools, SCP Wiki/Wikidot resources, and Citizen documentation,
then adapted for Echoes of the Flesh. */

/* Imports
============================================================================================ */
/* Custom Pilesaran font adapted from SCP Wiki/Wikidot resources */
@font-face {
font-family: 'Pilesaran';
src: url('/resources/assets/fonts/Pilesaran.woff2') format('woff2'),
url('/resources/assets/fonts/Pilesaran.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* latin-ext */
@font-face {
font-family: 'Kreon';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/resources/assets/fonts/t5t9IRIUKY-TFF_LW5lnMR3v2DnvPNiWcz8el2c.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Kreon';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/resources/assets/fonts/t5t9IRIUKY-TFF_LW5lnMR3v2DnvPNiWfT8e.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o58i-wi40.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o58a-wg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Rokkitt';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/fonts/qFdb35qfgYFjGy5hukqqhw5XeRgdi1ryd6DCGb-3vA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Rokkitt';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/fonts/qFdb35qfgYFjGy5hukqqhw5XeRgdi1ryd6DMGb8.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/fonts/w8gdH283Tvk__Lua32TysjIfqcuPP9g.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/fonts/w8gdH283Tvk__Lua32TysjIfp8uP.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* minecraft */
@font-face {
font-family: 'Minecraft';
src: url('/resources/assets/fonts/Minecraft.woff2') format('woff2'),
url('/resources/assets/fonts/Minecraft.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* PrismParty display font */
@font-face {
font-family: 'PrismParty';
src: url('/resources/assets/fonts/PrismParty-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* ROOT VARIABLES
[ These are variables explicitly supported by the theme.
[ https://github.com/StarCitizenTools/mediawiki-skins-Citizen/wiki/Customizing-Citizen-styles
============================================================================================ */

/* Font replacements */
:root {
--font-family-base: 'Quicksand', sans-serif;
--font-family-alternate: 'Varela Round', monospace;
--font-family-serif: 'Kreon', serif;
}

/* Color replacements */
:root.skin-citizen-light {
--color-surface-0: #f2f4f7;
--color-surface-1: #f3f6fa;
--color-surface-2: #eaeef4;
--color-surface-3: #e3e7ed;
--color-surface-4: #c3c7cf;
--color-surface-5: #eaeef5;
/*--color-base: #f2f4f7;
--color-base--emphasized: #f2f4f7;
--color-base--subtle: #f2f4f7;*/
--prism-blue-0: #7bc1f8;
--prism-blue-1: #59a2eb;
--prism-blue-2: #2e79d6;
--prism-lime-1: #c0ee6f;
--background-color-warning: #f0e7d3;
}
:root.skin-citizen-dark, :root.skin-citizen-auto {
/*--color-surface-0: #f2f4f7;
--color-surface-1: #f3f6fa;
--color-surface-2: #eff2f6;
--color-surface-3: #e3e7ed;
--color-surface-4: #c3c7cf;*/
--color-surface-5: #181c21;
/*--color-base: #f2f4f7;
--color-base--emphasized: #f2f4f7;
--color-base--subtle: #f2f4f7;*/
--prism-blue-0: #7bc1f8;
--prism-blue-1: #59a2eb;
--prism-blue-2: #2e79d6;
--prism-lime-1: #4b6124;
--background-color-warning: #333025;
}

/* FONT OVERRIDES
[ These selectors are used to replace some font elements.
============================================================================================ */
/*p {font-family: var(--font-family-alternate);}*/

/* Logotype font */
.citizen-drawer__siteinfo, .mw-logo-wordmark {
font-family: PrismParty;
}

/* JAVASCRIPT MODS
[ These selectors are required for JavaScript modifications to function.
============================================================================================ */

/* Discord icon in header with hover effect */
.disc-icon {
background-image: url(/resources/assets/discord.svg);
background-repeat: no-repeat;
background-position: center;
opacity: var(--opacity-icon-base);
width: 40px;
height: 40px;
}
.disc-icon:hover {
transform: rotate3d(0,0,1,360deg);
transition: all .25s;
}
.skin-citizen-dark .disc-icon {
filter: var(--filter-invert);
}
#citizen-discord__buttonCheckbox > span:nth-child(1) {
visibility: hidden;
}
.citizen-header__buttonCheckbox {
cursor: pointer;
}

/* Remove duplicate logo icon*/
/*a.citizen-header__button > img:nth-child(1) {*/
/* display: none;*/
/*}*/

/* TEMPLATE MODS
[ These selectors adjust templates based heavily on the Citizen skin.
============================================================================================ */
/* Transition effect for prevblogs and prevupdate */
.mw-parser-output #home-card-prevblogs .wikitable tr > td:last-child,
.mw-parser-output #home-card-prevupdate .wikitable tr > td:last-child {
transition: var(--transition-menu);
transition-property: opacity,transform;
opacity: 0;
}
/*.mw-parser-output #home-card-prevblogs .wikitable tr > td:first-child:hover ~ td,
.mw-parser-output #home-card-prevupdate .wikitable tr > td:first-child:hover ~ td {
transform: translateY(-16px);
opacity: 1;
}

/* Do not transform date widget */
.mw-parser-output #home-card-prevupdate .wikitable tr > td:first-child:hover ~ td.prevupdate-date {
transform: translateY(0);
}

/* Homepage previous blogs widget - truncates titles */
#home-card-prevblogs .wikitable a {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

@media (max-width: 500px) {
#home-card-prevblogs h3.home-card__header a {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

#home-card-prevblogs h3.home-card__header a::after {
display: none;
}

.mw-parser-output #home-card-prevblogs .wikitable {
max-height: 14.68rem;
overflow: hidden scroll !important;
}
#home-card-prevblogs .wikitable a {
-webkit-line-clamp: 3 !important;
}
/* Remove hover on small size (glitched anyway due to overflow) */
.mw-parser-output #home-card-prevblogs .wikitable tr > td:first-child:hover ~ td {
display: none;
}
}

/* Fix darkskin icon for componentlink template */
.component-link__button a img {
filter: invert(1);
}

.template__bubble {
padding: 0.1rem 0.6rem;
margin-left: 0.4rem;
background: var(--color-surface-3);
border-radius: 100px;
font-size: 0.7125rem;
font-weight: 500;
text-transform: uppercase;
}

/* Logo Dark/Light switcher */

.skin-citizen-light .dark-logo {
display: none;
}

.skin-citizen-dark .light-logo, :root.skin-citizen-auto .light-logo {
display: none;
}

/* Homescreen only cubeol recolors */
.skin-citizen-dark .page-Home .mw-parser-output .default,
.skin-citizen-dark .page-Home .mw-parser-output .pink,
.skin-citizen-dark .page-Home .mw-parser-output .orange,
.skin-citizen-dark .page-Home .mw-parser-output .lime {
background-image: linear-gradient(to right,#6d281e 0%,#e0503d 51%,#6d281e 100%);
text-decoration: none;
text-shadow: none;
}

/* SIDEBAR MODS
[ These selectors modify sidebar elements of the Citizen theme.
============================================================================================ */

.citizen-header {
background-color: var(--color-surface-1);
}

.mw-echo-notifications-badge.mw-echo-notification-badge-nojs.oo-ui-icon-bell.mw-echo-notifications-badge-all-read {
transition: all 0.1s;
}

/* Drawer navigation polish
Attribution: sectioned drawer patterns here were informed by Citizen-based
wikis including starcitizen.tools and prismparty.net, then adapted locally. */
.citizen-drawer__menu .citizen-menu {
margin-bottom: 0.7rem;
padding: 0.2rem 0;
border: 1px solid rgba( 255, 255, 255, 0.03 );
border-radius: 1rem;
background: linear-gradient( 180deg, rgba( 21, 23, 30, 0.82 ), rgba( 13, 14, 19, 0.92 ) );
}

.citizen-drawer__menu .citizen-menu__heading {
padding: 0 0.95rem 0.35rem;
margin-bottom: 0.2rem;
color: #c48a8f;
font-size: 0.72rem;
font-weight: var( --font-weight-medium );
letter-spacing: 0.08em;
text-decoration: none;
text-transform: uppercase;
}

.citizen-drawer__menu .citizen-menu__content-list {
gap: 0.15rem;
}

.citizen-drawer__menu .mw-list-item a {
margin: 0 0.45rem;
padding: 0.6rem 0.75rem;
border-radius: 0.8rem;
display: flex;
align-items: center;
gap: 0.7rem;
transition: background 180ms ease, transform 180ms ease;
}

.citizen-drawer__menu .mw-list-item a:hover {
background: rgba( 92, 24, 31, 0.14 );
transform: translateX( 2px );
}

.citizen-drawer__menu {
--icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 10.5 12 4l7.5 6.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 9.5V20h10V9.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--icon-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M4 4v5h5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8v4l3 2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--icon-dice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='14' rx='2.8' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='9' cy='9' r='1.2' fill='%23000'/%3E%3Ccircle cx='15' cy='15' r='1.2' fill='%23000'/%3E%3Ccircle cx='9' cy='15' r='1.2' fill='%23000'/%3E%3Ccircle cx='15' cy='9' r='1.2' fill='%23000'/%3E%3C/svg%3E");
--icon-article: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4.5' width='14' height='15' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8.5 9h7M8.5 12h7M8.5 15h4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-post-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4.5' width='14' height='15' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8.5 10h5M8.5 13h5M16.5 9v6M13.5 12h6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-category: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.5' y='6' width='6.5' height='6.5' rx='1.3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Crect x='13' y='6' width='6.5' height='6.5' rx='1.3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Crect x='8.75' y='13.5' width='6.5' height='6.5' rx='1.3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
--icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.2 20 19H4z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 9.5v4.5M12 17h.01' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-verified-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5 18 7v4.8c0 3.4-2.2 6.5-6 7.7-3.8-1.2-6-4.3-6-7.7V7z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m9.3 12.1 1.8 1.8 3.6-3.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M12 10.2v5M12 8h.01' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-group: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='10' r='3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='16' cy='9' r='2.3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M4.5 18c.9-2.3 2.8-3.5 5.5-3.5s4.6 1.2 5.5 3.5M14.3 15.1c1.7.2 3 .9 4 2.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-tune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6h12M6 12h12M6 18h12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='6' r='1.8' fill='%23000'/%3E%3Ccircle cx='15' cy='12' r='1.8' fill='%23000'/%3E%3Ccircle cx='11' cy='18' r='1.8' fill='%23000'/%3E%3C/svg%3E");
--icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15V6M8.5 9.5 12 6l3.5 3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 18.5h14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-policy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4.5h6l4 4v9a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M14 4.5V9h4M9 13h6M9 16h4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-gavel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.5 6 4.5 4.5M11 8.5l4.5 4.5M4.5 19.5l8-8M12.3 5.3l2.4-2.3 5.3 5.3-2.3 2.4M9.8 7.8l2.4-2.3 5.3 5.3-2.3 2.4M3.8 20.2h8.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.citizen-drawer__menu .mw-list-item a .citizen-ui-icon {
display: none;
}

.citizen-drawer__menu .mw-list-item a::before {
content: "";
display: inline-block;
flex: 0 0 1.1rem;
width: 1.1rem;
height: 1.1rem;
background-color: currentColor;
mask-image: var( --drawer-icon );
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-image: var( --drawer-icon );
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
opacity: 0.84;
}

#n-mainpage-description,
#n-Home {
--drawer-icon: var( --icon-home );
}

#n-recentchanges,
#n-Recent-changes {
--drawer-icon: var( --icon-history );
}

#n-randompage,
#n-Random-page {
--drawer-icon: var( --icon-dice );
}

#n-All-pages {
--drawer-icon: var( --icon-article );
}

#n-New-pages {
--drawer-icon: var( --icon-post-add );
}

#n-Categories {
--drawer-icon: var( --icon-category );
}

#n-Wanted-pages {
--drawer-icon: var( --icon-warning );
}

#n-Access-levels {
--drawer-icon: var( --icon-verified-user );
}

#n-About-the-wiki {
--drawer-icon: var( --icon-info );
}

#n-User-list {
--drawer-icon: var( --icon-group );
}

#n-Roblox-groups {
--drawer-icon: var( --icon-group );
}

#n-Roblox {
--drawer-icon: var( --icon-roblox );
}

#t-specialpages {
--drawer-icon: var( --icon-tune );
}

#t-upload {
--drawer-icon: var( --icon-upload );
}

#n-Special-pages {
--drawer-icon: var( --icon-tune );
}

#n-Upload-file {
--drawer-icon: var( --icon-upload );
}

#n-Privacy-policy {
--drawer-icon: var( --icon-policy );
}

#n-Disclaimers {
--drawer-icon: var( --icon-gavel );
}

#n-Discord {
--drawer-icon: var( --icon-discord );
}

/* Social SVGs inherit Citizen's active theme color in the drawer. */
#n-Discord a::before,
#n-Roblox a::before {
background-color: currentColor;
background-image: none;
mask-image: var( --drawer-icon );
-webkit-mask-image: var( --drawer-icon );
filter: none;
opacity: 0.84;
}

/* Adds bottom row to menu */
.mw-portlet-External {
margin-top: 0.9rem;
padding: 0.65rem 0 0;
border-top: 1px solid var( --border-color-base );
font-size: 0.8125rem;
grid-column: 1 / -1;
white-space: nowrap;
position: sticky;
bottom: -0.55rem;
background: var( --color-surface-5 );
}

@media only screen and (max-width: 553px) {
.mw-portlet-External {
padding-bottom: 0.56rem;
}
}
/* Stop weird scrolling behavior */
.mw-portlet-External {
margin-bottom: -2rem;
padding-bottom: 0.5rem;
}

.mw-portlet-External .citizen-menu__heading {
display: none;
}
.mw-portlet-External ul {
display: flex;
gap: 0.45rem;
overflow: auto;
padding-inline: 0.35rem;
}
.mw-portlet-External .mw-list-item a {
gap: 0.45rem;
padding: 0.5rem 0.75rem;
border: 1px solid rgba( 255, 255, 255, 0.06 );
border-radius: 999px;
background: rgba( 255, 255, 255, 0.03 );
}

/* Small size external full width */
@media only screen and (max-width: 553px) {
.citizen-drawer__menu {
display: initial;
}
.citizen-drawer__menu .citizen-menu {
width: 100%;
margin: 0 0 var(--space-sm);
}
.mw-portlet-External {
margin-bottom: -2.5rem;
}
}

/* Label */
.citizen-drawer__menu [id^="n-sidebar-label-"] a {
pointer-events: none;
margin-left: var( --space-xs );
padding-left: var( --space-md );
padding-right: var( --space-xs );
border-left: 1px solid var( --border-color-base );
border-radius: 0;
letter-spacing: 0.05em;
font-weight: var( --font-weight-normal );
color: var( --color-base--subtle ) !important;
}

/* Icons */
.citizen-drawer__menu [id^="n-sidebar-icon-"] a {
font-size: 0;
}

.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
display: block;
content: "";
width: var( --size-icon );
height: var( --size-icon );
background: transparent center/contain no-repeat;
opacity: var( --opacity-icon-base );
}

.citizen-ui-icon.mw-ui-icon-discord {
background-image: url(/resources/assets/discord.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.6;
}

.skin-citizen-dark .citizen-ui-icon.mw-ui-icon-discord, .skin-citizen-auto .citizen-ui-icon.mw-ui-icon-discord {
filter: invert( 1 );
}

.skin-citizen-dark .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before,
.skin-citizen-auto .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
filter: invert( 1 );
}

/* Bottom menu icons */
#n-sidebar-icon-discord a:before {background-image: url('/resources/assets/discord.svg')}

/* Redundant alert/breaks sidebar*/
.mw-echo-alert {
display: none;
}

/* HEADER/FOOTER MODS
[ These selectors modify header elements of the Citizen theme, normal and sticky.
============================================================================================ */

/* Backdrop filter on sticky header */
.citizen-page-header::before {
backdrop-filter: saturate(50%) blur(16px);
border-radius: 0 0 var(--border-radius--large) var(--border-radius--large);
}
/* Margin to move down the list */
.citizen-footer ul {
margin-top: 1rem;
}
.page-Home .mw-body-footer {
display: none;
}

.page-Home .firstHeading {
font-family: 'PrismParty' !important;
}

/* New colors */
.citizen-header, #citizen-pref-panel, .citizen-userMenu .citizen-menu__card, .citizen-menu__card, .mw-portlet-External {
background-color: var(--color-surface-5);
}

/* Pure black */
.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night.skin-citizen-dark .citizen-header, .citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night.skin-citizen-dark #citizen-pref-panel, .citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night.skin-citizen-dark .citizen-userMenu .citizen-menu__card, .citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night.skin-citizen-dark .citizen-menu__card, .citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night.skin-citizen-dark .mw-portlet-External {
background-color: #08090a;
}

/* FIXES
[ These selectors "fix" buggy or unusable elements.
============================================================================================ */

/* Hide in-article toc */
#toc {
display: none;
}

/* Fix prevblogs side overflow bug */
#home-card-prevblogs .citizen-overflow--right, #home-card-prevupdate .citizen-overflow--right {
-webkit-mask-image: initial;
mask-image: initial;
}

/* Make TemplateData editor popup above all else on page */
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active {
z-index: 999;
}

/* Missing category colors */
.catlinks li > a.new:hover {
color: #fff;
}

/* Fixes forum search bar in FireFox*/
#mw-wikiforum-searchbox-border {
display: inline-flex;
}

/* Visual Editor template show more button fix */
.skin-citizen .ve-ui-expandableContent-toggle {
background-color: var(--color-surface-1);
}

/* Make inactive vote more readable */
.ajaxpoll .ajaxpoll-answer-vote div {
background: var(--border-color-base);
}
.ajaxpoll .ajaxpoll-our-vote div {
background: var(--background-color-primary--active);
}
.page-Home .ajaxpoll {
margin: 0 -1.5rem -2rem -1.5rem;
}

/* Overflow visible on preview elements */
#home-card-prevblogs .citizen-table-wrapper,
#home-card-prevupdate .citizen-table-wrapper {
overflow-x: visible;
}

/* Darkmode for structured discussions */
.flow-topic-titlebar {
background-color: var(--color-surface-3);
border-radius: var(--border-radius--medium);
box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575);
}

.flow-post .flow-post-content {
word-break: break-word;
color: var(--color-base);
}

div > .flow-menu ul {
border: none;
background-color: var(--color-surface-1);
box-shadow: var(--box-shadow-dialog);
border-radius: var(--border-radius--medium);
}

.flow-post .flow-author .mw-usertoollinks {
opacity: 0;
transition: opacity 0.25s ease;
color: var(--color-base);
}

div.mw-gallery-slideshow-img-container a.image {
height: auto;
max-width: 100%;
}

/*Source editor drop down selections*/
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover {
background-color: var(--background-color-primary--hover);
}

/* Source editor upload form */
.wikiEditor-toolbar-dialog .ui-dialog-buttonpane {
border-top: none !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: inherit !important;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
background: inherit !important;
}
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-2--hover);
}

/* FORUMS
[ These selectors restyle the forums interface
============================================================================================ */
/* Main display */

table.mw-wikiforum-frame {
padding: 15px 15px 0 15px;
background: var(--color-surface-1);
border-radius: 8px;
border: none;
box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575);
}

td.mw-wikiforum-innerframe, th.mw-wikiforum-title, th.mw-wikiforum-admin, th.mw-wikiforum-value, th.mw-wikiforum-lastpost {
border-bottom: unset;
border-top: unset;
border: unset;
}
/* Forum title radius background */
tr.mw-wikiforum-title {
background: none;
}
table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-title {
background: var(--color-surface-2);
border-top-left-radius: var(--border-radius--large);
border-bottom-left-radius: var(--border-radius--large);
}
table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-admin, table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-value, table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-value {
background: var(--color-surface-2);
}
table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-lastpost {
background: var(--color-surface-2);
border-top-right-radius: var(--border-radius--large);
border-bottom-right-radius: var(--border-radius--large);
}

td.mw-wikiforum-title, td.mw-wikiforum-admin, td.mw-wikiforum-value, td.mw-wikiforum-lastpost {
border-bottom: 1px solid var(--border-color-base);
}
table.mw-wikiforum-title tbody tr.mw-wikiforum-marked:last-child td.mw-wikiforum-title, table.mw-wikiforum-title tbody tr.mw-wikiforum-marked:last-child td.mw-wikiforum-admin, table.mw-wikiforum-title tbody tr.mw-wikiforum-marked:last-child td.mw-wikiforum-value, table.mw-wikiforum-title tbody tr.mw-wikiforum-marked:last-child td.mw-wikiforum-lastpost {
border-bottom: none;
}

/* Icons from icons8.com*/
p.mw-wikiforum-valuetitle a img, td.mw-wikiforum-rightside img, p.mw-wikiforum-issue img, tr.mw-wikiforum-marked td.mw-wikiforum-admin a img, div#mw-wikiforum-searchbox-border img#mw-wikiforum-searchbox-picture, th.mw-wikiforum-title a img, td.mw-wikiforum-title p.mw-wikiforum-thread img {
width: 1.3rem;
}
/* Locked thread icon*/
table.mw-wikiforum-frame:nth-child(3) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) > img:nth-child(1) {
width: 1.5rem;
}
/* Social Icon */
td.mw-wikiforum-thread-main div.wikiforum-avatar-image img.mw-socialprofile-avatar {
width: 5.5rem;
border-radius: 8px;
}
/* main thread edits */
td.mw-wikiforum-thread-main {
padding: unset;
border: unset;
background: unset;
}
table.mw-wikiforum-posted {
color: var(--color-base--subtle);
font-family: var(--font-family-base)
font-size: 0.6rem;
border-top: 1px solid var(--border-color-base);
margin-bottom: unset;
}
th.mw-wikiforum-thread-top {
font-weight: normal;
background: var(--color-surface-2);
border-radius: var(--border-radius--medium);
border: 1px solid var(--border-color-base);
margin-bottom: 15px;
display: block;
}
tr.mw-wikiforum-sticky {
background: unset;
}
tr.mw-wikiforum-normal {
background: none;
}
td.mw-wikiforum-thread-main, td.mw-wikiforum-thread-sub {
word-break: unset;
}

td.mw-wikiforum-thread-sub {
padding: 0px 10px;
border: 1px solid var(--border-color-base);
background: var(--color-surface-2);
border-radius: var(--border-radius--small);
}

#mw-wikiforum-searchbox-border {
border: 1px solid var(--border-color-base);
background: var(--color-surface-2);
border-radius: var(--border-radius--small);
}

/* 'Invalid 'property from: Template:Scrollbox/styles.css */
.mw-parser-output .scrollbox__container::before {
box-shadow: inset 8px 0 12px -4px var(--color-surface-0), inset -8px 0 6px -4px var(--color-surface-0);
}

/* Template:SymbolicIcon */
.skin-citizen-dark .infobox-player__commenticon div.infobox-player__commenticon-inner a img {
filter: invert(1);
}

.page-Guide_Getting_Started .card-button a.external.text {
color: white;
}

/* Remove auto color mode */
#skin-client-prefs-skin-theme > div:nth-child(2) > ul:nth-child(1) > li:nth-child(1) > div:nth-child(1) > form:nth-child(1) {
grid-template-columns: repeat(2,1fr);
}
#skin-client-prefs-skin-theme > div:nth-child(2) > ul:nth-child(1) > li:nth-child(1) > div:nth-child(1) > form:nth-child(1) > div:nth-child(1) {
display: none;
}

/* Editor text selection */
.ve-ce-attachedRootNode::selection, .ve-ce-attachedRootNode ::selection {
background: rgba(109,169,247,0.5) !important;
}

/* Cookie window size*/
.mw-cookiewarning-container {
background-color: var(--color-surface-5);
max-width: 30rem;
}

/* Drawer popup sizing
Keep the desktop navigation card sized to its actual menu content instead
of forcing a wide, tall panel. */
@media screen and (min-width: 1120px) {
#citizen-drawer__card {
width: fit-content;
max-width: min( calc( 100vw - 1rem ), 68rem );
height: auto;
min-height: 0;
}

#citizen-drawer__card .citizen-menu__card-content,
#citizen-drawer__card #citizen-main-menu {
width: fit-content;
min-width: 0;
}
}

/* Template styles override for wide layout homepage */
.citizen-feature-custom-width-clientpref-wide div#home-nav.home-grid {
grid: auto-flow dense/repeat( auto-fit, minmax( 15.375rem, 1fr ) )!important;
}
@media (max-width:1644px) and (min-width:1405px) {
.citizen-feature-custom-width-clientpref-wide div#home-nav.home-grid {
grid: auto-flow dense/repeat( auto-fit, minmax( 18.375rem, 1fr ) )!important;
}
}
@media (max-width:1660px) and (min-width:1645px) {
.citizen-feature-custom-width-clientpref-wide div#home-nav.home-grid {
grid: auto-flow dense/repeat( auto-fit, minmax( 21.375rem, 1fr ) )!important;
}
}

/* Citizen polish
Attribution: the preferences menu, page-info card, and footer control treatments
below were informed by Citizen implementations on starcitizen.tools and refined
to fit Echoes of the Flesh. */
.citizen-preferences .citizen-dropdown-summary,
.citizen-preferences-dropdown .citizen-dropdown-summary {
border: 1px solid transparent;
border-radius: 999px;
transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.citizen-preferences .citizen-dropdown-summary:hover,
.citizen-preferences-dropdown .citizen-dropdown-summary:hover {
border-color: rgba( 137, 42, 48, 0.3 );
background: rgba( 62, 17, 23, 0.16 );
box-shadow: 0 10px 30px rgba( 38, 8, 13, 0.18 );
}

#citizen-preferences__card,
#citizen-preferences-dropdown__card {
border: 1px solid var( --border-color-base );
border-radius: 1.25rem;
background: linear-gradient( 180deg, rgba( 20, 22, 29, 0.98 ), rgba( 12, 13, 18, 0.98 ) );
box-shadow: 0 20px 50px rgba( 5, 7, 10, 0.3 );
}

.citizen-page-footer .page-info {
display: grid;
gap: 0.75rem;
}

@media (min-width: 860px) {
.citizen-page-footer .page-info {
grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
}
}

.citizen-page-footer .page-info__item {
padding: 0.95rem 1rem;
border: 1px solid var( --border-color-base );
border-radius: var( --border-radius-medium );
background: linear-gradient( 180deg, rgba( 19, 20, 27, 0.92 ), rgba( 12, 13, 18, 0.98 ) );
}

.citizen-page-footer .page-info__label {
margin-bottom: 0.3rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#footer-places ul {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 0.9rem;
padding: 0;
}

#footer-places li {
list-style: none;
}

#footer-places a {
display: inline-flex;
padding: 0.45rem 0.8rem;
border: 1px solid var( --border-color-base );
border-radius: 999px;
background: var( --color-surface-2 );
text-decoration: none;
}

#footer-icons .cdx-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.45rem;
border-radius: 0.75rem;
background: transparent;
transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#footer-icons .cdx-button:hover {
background: rgba( 255, 255, 255, 0.04 );
box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.08 );
transform: translateY( -1px );
}

/* Theme compatibility patch
Align custom Citizen overrides with the current client preference classes
so light, dark, and AMOLED all receive the intended palette. */

:root,
:root.skin-theme-clientpref-day,
:root.skin-citizen-light,
:root.skin-theme-clientpref-os {
--color-surface-5: #eaeef5;
--prism-lime-1: #c0ee6f;
--background-color-warning: #f0e7d3;
--scw-panel-gradient: linear-gradient( 180deg, rgba( 255, 255, 255, 0.96 ), rgba( 241, 244, 249, 0.98 ) );
--scw-panel-gradient-soft: linear-gradient( 180deg, rgba( 255, 255, 255, 0.92 ), rgba( 243, 246, 250, 0.98 ) );
--scw-chip-border: rgba( 21, 26, 33, 0.08 );
--scw-chip-bg: rgba( 255, 255, 255, 0.78 );
--scw-footer-hover: rgba( 92, 24, 31, 0.08 );
--scw-footer-hover-ring: rgba( 92, 24, 31, 0.12 );
}

:root.skin-theme-clientpref-night,
:root.skin-citizen-dark {
--color-surface-5: #181c21;
--prism-lime-1: #4b6124;
--background-color-warning: #333025;
--scw-panel-gradient: linear-gradient( 180deg, rgba( 20, 22, 29, 0.98 ), rgba( 12, 13, 18, 0.98 ) );
--scw-panel-gradient-soft: linear-gradient( 180deg, rgba( 21, 23, 30, 0.82 ), rgba( 13, 14, 19, 0.92 ) );
--scw-chip-border: rgba( 255, 255, 255, 0.06 );
--scw-chip-bg: rgba( 255, 255, 255, 0.03 );
--scw-footer-hover: rgba( 255, 255, 255, 0.04 );
--scw-footer-hover-ring: rgba( 255, 255, 255, 0.08 );
}

@media ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os {
--color-surface-5: #181c21;
--prism-lime-1: #4b6124;
--background-color-warning: #333025;
--scw-panel-gradient: linear-gradient( 180deg, rgba( 20, 22, 29, 0.98 ), rgba( 12, 13, 18, 0.98 ) );
--scw-panel-gradient-soft: linear-gradient( 180deg, rgba( 21, 23, 30, 0.82 ), rgba( 13, 14, 19, 0.92 ) );
--scw-chip-border: rgba( 255, 255, 255, 0.06 );
--scw-chip-bg: rgba( 255, 255, 255, 0.03 );
--scw-footer-hover: rgba( 255, 255, 255, 0.04 );
--scw-footer-hover-ring: rgba( 255, 255, 255, 0.08 );
}
}

:root.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1,
:root.skin-citizen-dark.citizen-feature-pure-black-clientpref-1 {
--scw-panel-gradient: linear-gradient( 180deg, rgba( 8, 9, 10, 0.99 ), rgba( 0, 0, 0, 0.99 ) );
--scw-panel-gradient-soft: linear-gradient( 180deg, rgba( 11, 12, 14, 0.94 ), rgba( 0, 0, 0, 0.99 ) );
--scw-chip-border: rgba( 255, 255, 255, 0.08 );
--scw-chip-bg: rgba( 255, 255, 255, 0.02 );
}

@media ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os.citizen-feature-pure-black-clientpref-1 {
--scw-panel-gradient: linear-gradient( 180deg, rgba( 8, 9, 10, 0.99 ), rgba( 0, 0, 0, 0.99 ) );
--scw-panel-gradient-soft: linear-gradient( 180deg, rgba( 11, 12, 14, 0.94 ), rgba( 0, 0, 0, 0.99 ) );
--scw-chip-border: rgba( 255, 255, 255, 0.08 );
--scw-chip-bg: rgba( 255, 255, 255, 0.02 );
}
}

.citizen-drawer__menu .citizen-menu {
border-color: var( --border-color-base );
background: var( --scw-panel-gradient-soft );
box-shadow: var( --box-shadow-dialog );
}

.mw-portlet-External .mw-list-item a {
border-color: var( --scw-chip-border );
background: var( --scw-chip-bg );
}

#citizen-preferences__card,
#citizen-preferences-dropdown__card {
background: var( --scw-panel-gradient );
}

.citizen-page-footer .page-info__item {
background: var( --scw-panel-gradient );
box-shadow: 0 12px 32px rgba( 5, 5, 8, 0.08 );
}

#footer-icons .cdx-button:hover {
background: var( --scw-footer-hover );
box-shadow: 0 0 0 1px var( --scw-footer-hover-ring );
}

:root.skin-theme-clientpref-night .citizen-ui-icon.mw-ui-icon-discord,
:root.skin-citizen-dark .citizen-ui-icon.mw-ui-icon-discord,
:root.skin-theme-clientpref-night .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before,
:root.skin-citizen-dark .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before,
:root.skin-theme-clientpref-night .infobox-player__commenticon div.infobox-player__commenticon-inner a img,
:root.skin-citizen-dark .infobox-player__commenticon div.infobox-player__commenticon-inner a img {
filter: invert( 1 );
}

@media ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os .citizen-ui-icon.mw-ui-icon-discord,
:root.skin-theme-clientpref-os .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before,
:root.skin-theme-clientpref-os .infobox-player__commenticon div.infobox-player__commenticon-inner a img {
filter: invert( 1 );
}
}

@media ( prefers-color-scheme: light ) {
:root.skin-theme-clientpref-os .citizen-ui-icon.mw-ui-icon-discord,
:root.skin-theme-clientpref-os .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before,
:root.skin-theme-clientpref-os .infobox-player__commenticon div.infobox-player__commenticon-inner a img {
filter: none;
}
}

:root.skin-theme-clientpref-day .dark-logo,
:root.skin-citizen-light .dark-logo {
display: none;
}

:root.skin-theme-clientpref-night .light-logo,
:root.skin-citizen-dark .light-logo {
display: none;
}

@media ( prefers-color-scheme: light ) {
:root.skin-theme-clientpref-os .dark-logo {
display: none;
}

:root.skin-theme-clientpref-os .light-logo {
display: initial;
}
}

@media ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os .light-logo {
display: none;
}

:root.skin-theme-clientpref-os .dark-logo {
display: initial;
}
}

/* Global button contrast patch for light mode. */

:root.skin-theme-clientpref-day .mw-portlet-External .mw-list-item a,
:root.skin-citizen-light .mw-portlet-External .mw-list-item a,
:root.skin-theme-clientpref-day #footer-icons .cdx-button,
:root.skin-citizen-light #footer-icons .cdx-button,
:root.skin-theme-clientpref-day .citizen-preferences .citizen-dropdown-summary,
:root.skin-theme-clientpref-day .citizen-preferences-dropdown .citizen-dropdown-summary,
:root.skin-citizen-light .citizen-preferences .citizen-dropdown-summary,
:root.skin-citizen-light .citizen-preferences-dropdown .citizen-dropdown-summary {
border-color: rgba( 92, 24, 31, 0.14 );
background: rgba( 255, 255, 255, 0.9 );
color: var( --color-emphasized );
box-shadow: 0 8px 22px rgba( 20, 23, 28, 0.06 );
}

:root.skin-theme-clientpref-day .mw-portlet-External .mw-list-item a:hover,
:root.skin-citizen-light .mw-portlet-External .mw-list-item a:hover,
:root.skin-theme-clientpref-day #footer-icons .cdx-button:hover,
:root.skin-citizen-light #footer-icons .cdx-button:hover {
border-color: rgba( 92, 24, 31, 0.2 );
background: rgba( 255, 255, 255, 0.98 );
}

@media ( prefers-color-scheme: light ) {
:root.skin-theme-clientpref-os .mw-portlet-External .mw-list-item a,
:root.skin-theme-clientpref-os #footer-icons .cdx-button,
:root.skin-theme-clientpref-os .citizen-preferences .citizen-dropdown-summary,
:root.skin-theme-clientpref-os .citizen-preferences-dropdown .citizen-dropdown-summary {
border-color: rgba( 92, 24, 31, 0.14 );
background: rgba( 255, 255, 255, 0.9 );
color: var( --color-emphasized );
box-shadow: 0 8px 22px rgba( 20, 23, 28, 0.06 );
}

:root.skin-theme-clientpref-os .mw-portlet-External .mw-list-item a:hover,
:root.skin-theme-clientpref-os #footer-icons .cdx-button:hover {
border-color: rgba( 92, 24, 31, 0.2 );
background: rgba( 255, 255, 255, 0.98 );
}
}

/* Light surface recovery patch
Force the footer, navigation drawer, and preferences panel to use
light surfaces with readable text in day mode and auto-light mode. */

:root.skin-theme-clientpref-day,
:root.skin-citizen-light {
--scw-light-panel-gradient: linear-gradient( 180deg, rgba( 255, 255, 255, 0.97 ), rgba( 241, 244, 249, 0.99 ) );
--scw-light-panel-gradient-soft: linear-gradient( 180deg, rgba( 255, 255, 255, 0.94 ), rgba( 245, 247, 251, 0.99 ) );
--scw-light-chip-bg: rgba( 255, 255, 255, 0.88 );
--scw-light-chip-border: rgba( 92, 24, 31, 0.14 );
--scw-light-hover: rgba( 92, 24, 31, 0.08 );
--scw-light-shadow: 0 12px 28px rgba( 20, 23, 28, 0.08 );
--scw-light-heading: #9b4d55;
}

@media ( prefers-color-scheme: light ) {
:root.skin-theme-clientpref-os {
--scw-light-panel-gradient: linear-gradient( 180deg, rgba( 255, 255, 255, 0.97 ), rgba( 241, 244, 249, 0.99 ) );
--scw-light-panel-gradient-soft: linear-gradient( 180deg, rgba( 255, 255, 255, 0.94 ), rgba( 245, 247, 251, 0.99 ) );
--scw-light-chip-bg: rgba( 255, 255, 255, 0.88 );
--scw-light-chip-border: rgba( 92, 24, 31, 0.14 );
--scw-light-hover: rgba( 92, 24, 31, 0.08 );
--scw-light-shadow: 0 12px 28px rgba( 20, 23, 28, 0.08 );
--scw-light-heading: #9b4d55;
}
}

:root.skin-theme-clientpref-day .citizen-drawer__menu .citizen-menu,
:root.skin-citizen-light .citizen-drawer__menu .citizen-menu,
:root.skin-theme-clientpref-day #citizen-preferences__card,
:root.skin-citizen-light #citizen-preferences__card,
:root.skin-theme-clientpref-day #citizen-preferences-dropdown__card,
:root.skin-citizen-light #citizen-preferences-dropdown__card,
:root.skin-theme-clientpref-day .citizen-page-footer .page-info__item,
:root.skin-citizen-light .citizen-page-footer .page-info__item,
:root.skin-theme-clientpref-day .mw-portlet-External,
:root.skin-citizen-light .mw-portlet-External {
border-color: rgba( 92, 24, 31, 0.1 );
background: var( --scw-light-panel-gradient-soft );
box-shadow: var( --scw-light-shadow );
}

:root.skin-theme-clientpref-day .citizen-page-footer .page-info__item,
:root.skin-citizen-light .citizen-page-footer .page-info__item {
background: var( --scw-light-panel-gradient );
}

:root.skin-theme-clientpref-day .citizen-drawer__menu .citizen-menu__heading,
:root.skin-citizen-light .citizen-drawer__menu .citizen-menu__heading,
:root.skin-theme-clientpref-day .citizen-page-footer .page-info__label,
:root.skin-citizen-light .citizen-page-footer .page-info__label,
:root.skin-theme-clientpref-day .citizen-preferences-section__heading,
:root.skin-citizen-light .citizen-preferences-section__heading {
color: var( --scw-light-heading );
}

:root.skin-theme-clientpref-day .citizen-drawer__menu .mw-list-item a,
:root.skin-citizen-light .citizen-drawer__menu .mw-list-item a,
:root.skin-theme-clientpref-day .citizen-page-footer .page-info__item,
:root.skin-citizen-light .citizen-page-footer .page-info__item,
:root.skin-theme-clientpref-day .citizen-page-footer .page-info__item a,
:root.skin-citizen-light .citizen-page-footer .page-info__item a,
:root.skin-theme-clientpref-day #footer-desc,
:root.skin-citizen-light #footer-desc,
:root.skin-theme-clientpref-day #footer-tagline,
:root.skin-citizen-light #footer-tagline,
:root.skin-theme-clientpref-day .citizen-preferences,
:root.skin-citizen-light .citizen-preferences,
:root.skin-theme-clientpref-day .citizen-preferences .cdx-label__label__text,
:root.skin-citizen-light .citizen-preferences .cdx-label__label__text,
:root.skin-theme-clientpref-day .citizen-preferences .cdx-label__description,
:root.skin-citizen-light .citizen-preferences .cdx-label__description {
color: var( --color-base );
}

:root.skin-theme-clientpref-day .citizen-drawer__menu .mw-list-item a:hover,
:root.skin-citizen-light .citizen-drawer__menu .mw-list-item a:hover,
:root.skin-theme-clientpref-day .mw-portlet-External .mw-list-item a:hover,
:root.skin-citizen-light .mw-portlet-External .mw-list-item a:hover,
:root.skin-theme-clientpref-day #footer-places a:hover,
:root.skin-citizen-light #footer-places a:hover,
:root.skin-theme-clientpref-day .citizen-preferences .citizen-dropdown-summary:hover,
:root.skin-citizen-light .citizen-preferences .citizen-dropdown-summary:hover,
:root.skin-theme-clientpref-day .citizen-preferences-dropdown .citizen-dropdown-summary:hover,
:root.skin-citizen-light .citizen-preferences-dropdown .citizen-dropdown-summary:hover {
background: rgba( 92, 24, 31, 0.08 );
}

:root.skin-theme-clientpref-day .mw-portlet-External .mw-list-item a,
:root.skin-citizen-light .mw-portlet-External .mw-list-item a,
:root.skin-theme-clientpref-day #footer-places a,
:root.skin-citizen-light #footer-places a,
:root.skin-theme-clientpref-day .citizen-preferences-card,
:root.skin-citizen-light .citizen-preferences-card,
:root.skin-theme-clientpref-day .citizen-preferences .citizen-dropdown-summary,
:root.skin-citizen-light .citizen-preferences .citizen-dropdown-summary,
:root.skin-theme-clientpref-day .citizen-preferences-dropdown .citizen-dropdown-summary,
:root.skin-citizen-light .citizen-preferences-dropdown .citizen-dropdown-summary {
border-color: var( --scw-light-chip-border );
background: var( --scw-light-chip-bg );
color: var( --color-emphasized );
box-shadow: 0 8px 22px rgba( 20, 23, 28, 0.06 );
}

:root.skin-theme-clientpref-day .citizen-preferences-card__label,
:root.skin-citizen-light .citizen-preferences-card__label {
color: var( --color-base--subtle );
}

:root.skin-theme-clientpref-day .citizen-preferences .cdx-select-vue__handle,
:root.skin-citizen-light .citizen-preferences .cdx-select-vue__handle,
:root.skin-theme-clientpref-day .citizen-preferences .cdx-text-input__input,
:root.skin-citizen-light .citizen-preferences .cdx-text-input__input {
border-color: rgba( 92, 24, 31, 0.14 );
background: #fff;
color: var( --color-emphasized );
}

:root.skin-theme-clientpref-day .citizen-preferences .cdx-toggle-switch,
:root.skin-citizen-light .citizen-preferences .cdx-toggle-switch {
background-color: rgba( 21, 26, 33, 0.14 );
}

@media ( prefers-color-scheme: light ) {
:root.skin-theme-clientpref-os .citizen-drawer__menu .citizen-menu,
:root.skin-theme-clientpref-os #citizen-preferences__card,
:root.skin-theme-clientpref-os #citizen-preferences-dropdown__card,
:root.skin-theme-clientpref-os .citizen-page-footer .page-info__item,
:root.skin-theme-clientpref-os .mw-portlet-External {
border-color: rgba( 92, 24, 31, 0.1 );
background: var( --scw-light-panel-gradient-soft );
box-shadow: var( --scw-light-shadow );
}

:root.skin-theme-clientpref-os .citizen-page-footer .page-info__item {
background: var( --scw-light-panel-gradient );
}

:root.skin-theme-clientpref-os .citizen-drawer__menu .citizen-menu__heading,
:root.skin-theme-clientpref-os .citizen-page-footer .page-info__label,
:root.skin-theme-clientpref-os .citizen-preferences-section__heading {
color: var( --scw-light-heading );
}

:root.skin-theme-clientpref-os .citizen-drawer__menu .mw-list-item a,
:root.skin-theme-clientpref-os .citizen-page-footer .page-info__item,
:root.skin-theme-clientpref-os .citizen-page-footer .page-info__item a,
:root.skin-theme-clientpref-os #footer-desc,
:root.skin-theme-clientpref-os #footer-tagline,
:root.skin-theme-clientpref-os .citizen-preferences,
:root.skin-theme-clientpref-os .citizen-preferences .cdx-label__label__text,
:root.skin-theme-clientpref-os .citizen-preferences .cdx-label__description {
color: var( --color-base );
}

:root.skin-theme-clientpref-os .citizen-drawer__menu .mw-list-item a:hover,
:root.skin-theme-clientpref-os .mw-portlet-External .mw-list-item a:hover,
:root.skin-theme-clientpref-os #footer-places a:hover,
:root.skin-theme-clientpref-os .citizen-preferences .citizen-dropdown-summary:hover,
:root.skin-theme-clientpref-os .citizen-preferences-dropdown .citizen-dropdown-summary:hover {
background: rgba( 92, 24, 31, 0.08 );
}

:root.skin-theme-clientpref-os .mw-portlet-External .mw-list-item a,
:root.skin-theme-clientpref-os #footer-places a,
:root.skin-theme-clientpref-os .citizen-preferences-card,
:root.skin-theme-clientpref-os .citizen-preferences .citizen-dropdown-summary,
:root.skin-theme-clientpref-os .citizen-preferences-dropdown .citizen-dropdown-summary {
border-color: var( --scw-light-chip-border );
background: var( --scw-light-chip-bg );
color: var( --color-emphasized );
box-shadow: 0 8px 22px rgba( 20, 23, 28, 0.06 );
}

:root.skin-theme-clientpref-os .citizen-preferences-card__label {
color: var( --color-base--subtle );
}

:root.skin-theme-clientpref-os .citizen-preferences .cdx-select-vue__handle,
:root.skin-theme-clientpref-os .citizen-preferences .cdx-text-input__input {
border-color: rgba( 92, 24, 31, 0.14 );
background: #fff;
color: var( --color-emphasized );
}

:root.skin-theme-clientpref-os .citizen-preferences .cdx-toggle-switch {
background-color: rgba( 21, 26, 33, 0.14 );
}
}

/* Related lore cards: preserve full archive titles on desktop and mobile. */
#mw-data-after-content .read-more-container-card-list .cdx-card__text__title,
#mw-data-after-content .read-more-container-card-list .cdx-card__text__description {
white-space: normal;
overflow-wrap: anywhere;
}

/* Visible community shortcuts on Citizen's desktop rail and mobile bar. */
:root {
--icon-discord: url("/resources/assets/discord.svg");
--icon-roblox: url("/resources/assets/roblox.svg");
}
.citizen-social__icon {
display: block;
flex: none;
width: 20px;
height: 20px;
background-color: currentColor;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.citizen-social__icon--discord {
mask-image: var( --icon-discord );
-webkit-mask-image: var( --icon-discord );
}
.citizen-social__icon--roblox {
mask-image: var( --icon-roblox );
-webkit-mask-image: var( --icon-roblox );
}

Help:File copyright

2026-10-05T15:15:24Z