Doom Relics - User contributions [en]

MediaWiki:Common.css

2025-12-26T19:57:25Z

Rbutcher:

/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@400;700&display=swap');

/* Vector 2022: hide the wordmark (site title) and tagline next to the logo */
.mw-logo-wordmark,
.mw-logo-tagline,
.mw-wiki-title,
.mw-logo-text {
display: none !important;
}
/* --- BIG LOGO: Vector 2022 --- */

/* 1) Set how tall you want the header area */
.vector-header {
min-height: 160px !important; /* adjust */
}

/* 2) Let the logo block use that height */
.vector-header-start,
.mw-logo {
height: 160px !important; /* match the header height */
display: flex !important;
align-items: center !important;
}

/* 3) Kill Vector's built-in logo caps */
.mw-logo-icon,
.mw-logo-icon img,
.mw-logo img {
max-height: none !important;
height: 190px !important; /* THIS is what makes it bigger */
width: auto !important;
}
/* Move logo left + down (Vector 2022) */
.mw-logo {
margin-left: -18px !important; /* left */
margin-top: 50px !important; /* down */
}
body {
background-image: url("https://doomrelics.com/images/7/7e/Bgdoom.jpg");
background-size: cover;
background-position: center top;
background-attachment: fixed;
}
/* Main content background transparency */
.mw-page-container,
.mw-content-container,
.vector-body {
background: rgba(0, 0, 0, 0) !important; /* adjust opacity */
}
/* Glass-style header background */
.vector-header {
background-color: rgba(0, 0, 0, 0) !important;
backdrop-filter: blur(4px);
}

/* Ensure background image still shows */
.vector-header {
background-blend-mode: overlay;
}
/* =========================
DOOM EMBERS (SEAMLESS + FADE)
Background-only, behind content
========================= */

body { position: relative; }

/* Ember layers */
body::before,
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
mix-blend-mode: screen; /* makes embers feel like light */
-webkit-mask-image: linear-gradient(to top, transparent 0%, black 18%, black 100%);
mask-image: linear-gradient(to top, transparent 0%, black 18%, black 100%);
}

/* Layer 1: small sharp embers */
body::before {
opacity: 0.55;
background-repeat: repeat;
background-image:
radial-gradient(circle, rgba(255,120,0,0.85) 0 1px, transparent 2px),
radial-gradient(circle, rgba(255,60,0,0.70) 0 1px, transparent 2px),
radial-gradient(circle, rgba(255,200,120,0.55) 0 1px, transparent 2px);
background-size: 240px 240px, 340px 340px, 520px 520px;
background-position: 10% 100%, 60% 120%, 90% 80%;
filter: blur(0.25px);
animation: embersScroll1 10s linear infinite;
}

/* Layer 2: larger soft embers */
body::after {
opacity: 0.30;
background-repeat: repeat;
background-image:
radial-gradient(circle, rgba(255,120,0,0.35) 0 2px, transparent 7px),
radial-gradient(circle, rgba(255,80,0,0.32) 0 2px, transparent 8px),
radial-gradient(circle, rgba(255,220,150,0.22) 0 2px, transparent 9px);
background-size: 560px 560px, 820px 820px, 1040px 1040px;
background-position: 20% 120%, 70% 90%, 40% 140%;
filter: blur(0.8px);
animation: embersScroll2 18s linear infinite;
}

/* Keep wiki content above embers */
.vector-header,
.mw-page-container,
#content,
.mw-body {
position: relative;
z-index: 1;
}

/* Animate the tile upward smoothly (no snap-glitch) */
@keyframes embersScroll1 {
from { background-position: 10% 120%, 60% 140%, 90% 110%; }
to { background-position: -10% -120%, 55% -140%, 85% -110%; }
}
@keyframes embersScroll2 {
from { background-position: 20% 140%, 70% 120%, 40% 160%; }
to { background-position: 30% -180%, 80% -160%, 50% -220%; }
}
/* DOOM STYLE for Vector 2022 sidebar portlets (Tools / Appearance) */
#mw-panel .mw-portlet,
.vector-sidebar-container .mw-portlet,
.vector-column-start .mw-portlet,
#mw-panel .vector-menu-portal,
.vector-sidebar-container .vector-menu-portal {
background: rgba(0,0,0,0.75) !important;
border: 1px solid rgba(255,120,0,0.30) !important;
border-radius: 16px !important;
padding: 0 !important;
overflow: hidden !important;
box-shadow: 0 10px 26px rgba(0,0,0,0.55), 0 0 18px rgba(255,120,0,0.12) !important;
backdrop-filter: blur(4px);
}

/* Headings (“Tools”, “Appearance”) */
#mw-panel .mw-portlet h3,
.vector-sidebar-container .mw-portlet h3,
#mw-panel .vector-menu-heading,
.vector-sidebar-container .vector-menu-heading {
margin: 0 !important;
padding: 12px 12px !important;
background: linear-gradient(to bottom, rgba(255,120,0,0.18), rgba(0,0,0,0)) !important;
border-bottom: 1px solid rgba(255,120,0,0.22) !important;
color: #f2f2f2 !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.7px !important;
}

/* Content area inside portlets */
#mw-panel .mw-portlet .vector-menu-content,
#mw-panel .mw-portlet .mw-portlet-body,
.vector-sidebar-container .mw-portlet .vector-menu-content,
.vector-sidebar-container .mw-portlet .mw-portlet-body {
padding: 10px 10px 12px !important;
}

/* Links inside */
#mw-panel .mw-portlet a,
.vector-sidebar-container .mw-portlet a {
display: block !important;
padding: 9px 10px !important;
border-radius: 12px !important;
color: #eaeaea !important;
text-decoration: none !important;
}
#mw-panel .mw-portlet a:hover,
.vector-sidebar-container .mw-portlet a:hover {
background: rgba(255,120,0,0.10) !important;
box-shadow: inset 0 0 0 1px rgba(255,120,0,0.28) !important;
color: #ffd0a0 !important;
}
/************ DOOM STYLE: TOOLS BOX ONLY ************/

/* Tools box container */
#p-tb {
background: rgba(0,0,0,0.78) !important;
border: 1px solid rgba(255,120,0,0.32) !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 10px 26px rgba(0,0,0,0.55), 0 0 18px rgba(255,120,0,0.12) !important;
backdrop-filter: blur(4px);
}

/* Tools header (“Tools” + hide) */
#p-tb > h3,
#p-tb .vector-menu-heading {
margin: 0 !important;
padding: 12px 12px !important;
background: linear-gradient(to bottom, rgba(255,120,0,0.18), rgba(0,0,0,0)) !important;
border-bottom: 1px solid rgba(255,120,0,0.22) !important;
color: #f2f2f2 !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.7px !important;
}

/* Tools inner content */
#p-tb .vector-menu-content,
#p-tb .mw-portlet-body {
padding: 10px 10px 12px !important;
}

/* Section dividers inside Tools */
#p-tb hr {
border: 0 !important;
border-top: 1px solid rgba(255,120,0,0.18) !important;
margin: 10px 6px !important;
}

/* Links inside Tools */
#p-tb a {
display: block !important;
padding: 9px 10px !important;
border-radius: 12px !important;
color: #eaeaea !important;
text-decoration: none !important;
}

#p-tb a:hover {
background: rgba(255,120,0,0.10) !important;
box-shadow: inset 0 0 0 1px rgba(255,120,0,0.28) !important;
color: #ffd0a0 !important;
text-decoration: none !important;
}
/************ DOOM STYLE: APPEARANCE BOX (EXACT ID) ************/

/* Appearance box container */
#vector-appearance {
background: rgba(0,0,0,0.78) !important;
border: 1px solid rgba(255,120,0,0.32) !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow:
0 10px 26px rgba(0,0,0,0.55),
0 0 18px rgba(255,120,0,0.12) !important;
backdrop-filter: blur(4px);
}

/* Header row (“Appearance” + hide) */
#vector-appearance > h3,
#vector-appearance .vector-menu-heading {
margin: 0 !important;
padding: 12px 12px !important;
background: linear-gradient(
to bottom,
rgba(255,120,0,0.18),
rgba(0,0,0,0)
) !important;
border-bottom: 1px solid rgba(255,120,0,0.22) !important;
color: #f2f2f2 !important;
font-weight: 900 !important;
letter-spacing: 0.7px !important;
text-transform: uppercase !important;
}

/* Inner content */
#vector-appearance .vector-menu-content,
#vector-appearance .mw-portlet-body {
padding: 10px 10px 12px !important;
}

/* Section labels (Text / Width) */
#vector-appearance h4 {
color: rgba(255,180,120,0.95) !important;
font-weight: 800 !important;
letter-spacing: 0.4px !important;
text-transform: uppercase !important;
margin: 10px 6px 6px !important;
}

/* Dividers */
#vector-appearance hr {
border: 0 !important;
border-top: 1px solid rgba(255,120,0,0.18) !important;
margin: 10px 6px !important;
}

/* Radio buttons */
#vector-appearance input[type="radio"] {
accent-color: rgb(255,120,0) !important;
}

/* Make each option row feel clickable */
#vector-appearance label,
#vector-appearance .oo-ui-fieldLayout {
display: block !important;
padding: 7px 10px !important;
border-radius: 12px !important;
cursor: pointer;
}

/* Hover glow */
#vector-appearance label:hover,
#vector-appearance .oo-ui-fieldLayout:hover {
background: rgba(255,120,0,0.10) !important;
box-shadow: inset 0 0 0 1px rgba(255,120,0,0.28) !important;
}

/* Checked radio emphasis */
#vector-appearance input[type="radio"]:checked + label {
background: rgba(255,120,0,0.16) !important;
box-shadow: inset 0 0 0 1px rgba(255,120,0,0.35) !important;
}
/************ APPEARANCE RADIO ALIGNMENT FIX (robust) ************/

/* Reset anything we did to labels/rows that could break OOUI */
#vector-appearance label,
#vector-appearance .oo-ui-fieldLayout,
#vector-appearance .oo-ui-fieldLayout-body {
display: block !important;
}

/* Make each option row have a consistent left gutter for the radio */
#vector-appearance .oo-ui-fieldLayout {
position: relative !important;
padding: 8px 10px 8px 42px !important; /* LEFT SPACE FOR RADIO */
border-radius: 12px !important;
}

/* Put the actual radio control in that left gutter */
#vector-appearance .oo-ui-inputWidget,
#vector-appearance .oo-ui-radioInputWidget,
#vector-appearance input[type="radio"] {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
}

/* Text always starts after the radio */
#vector-appearance .oo-ui-labelElement-label,
#vector-appearance label {
margin: 0 !important;
line-height: 1.2 !important;
}

/* Hover/active row styling (on the wrapper, not the label) */
#vector-appearance .oo-ui-fieldLayout:hover {
background: rgba(255,120,0,0.10) !important;
box-shadow: inset 0 0 0 1px rgba(255,120,0,0.28) !important;
}

/* Optional: make the section headings not crowd the first option */
#vector-appearance h4 {
margin-bottom: 10px !important;
}
/******** FINAL TEXT NUDGE (Appearance radios) ********/

/* Move label text right + slightly up */
#vector-appearance .oo-ui-labelElement-label,
#vector-appearance label {
position: relative !important;
left: 20px; /* move text right */
top: -5px; /* move text up */
line-height: 1.15 !important;
}
/* === CLICK FIX: ensure nothing overlays header/user links === */

/* If you have a header overlay, it must not capture clicks */
.vector-header::before,
.vector-sticky-header::before {
pointer-events: none !important;
}

/* Force ember layers behind everything (even if z-index got changed elsewhere) */
body::before,
body::after {
pointer-events: none !important;
z-index: -1 !important;
}

/* Put header + user links above page containers */
.vector-header,
.vector-sticky-header,
.vector-user-links,
.vector-user-links-dropdown,
.vector-user-menu,
#p-personal,
#pt-userpage,
#pt-logout,
#pt-login {
position: relative !important;
z-index: 50 !important;
}

/* Prevent page container from covering the header */
.mw-page-container,
.mw-page,
.mw-page-container-inner,
#content {
position: relative !important;
z-index: 1 !important;
}
html {
color-scheme: dark !important;
}

html[data-mw-skin-theme="light"] {
--background-color-base: #000 !important;
--background-color-neutral: #000 !important;
--background-color-interactive: #111 !important;
--color-base: #e7e7e7 !important;
}
/************ FORCE DARK (Vector 2022) — KILL REMAINING WHITE ************/

/* Default browser form controls to dark */
html { color-scheme: dark !important; }

/* Force the skin theme variable surfaces dark even if Vector says "light" */
html[data-mw-skin-theme="light"],
html:not([data-mw-skin-theme]) {
--background-color-base: #000 !important;
--background-color-neutral: #0a0a0a !important;
--background-color-interactive: #111 !important;
--background-color-progressive: #111 !important;
--background-color-subtle: #0b0b0b !important;

--color-base: #e7e7e7 !important;
--color-emphasized: #fff !important;

--border-color-base: rgba(255,120,0,0.22) !important;
--border-color-subtle: rgba(255,120,0,0.16) !important;
}

/* Hard override common white containers */
html[data-mw-skin-theme="light"] body,
html:not([data-mw-skin-theme]) body,
.vector-header,
.vector-sticky-header,
.mw-page-container,
.mw-content-container,
.vector-body,
.vector-sidebar-container,
.vector-toc,
.mw-panel,
.vector-page-tools,
.vector-dropdown-content,
.vector-menu-portal,
.vector-menu-content,
.mw-portlet,
.mw-body,
#content {
background-color: rgba(0,0,0,0) !important;
color: #e7e7e7 !important;
}

/* Links stay readable */
a { color: #ffb36b; }
a:hover { color: #ffd2a2; }

/* Inputs / search boxes */
input, textarea, select {
background: rgba(0,0,0,0.65) !important;
color: #e7e7e7 !important;
border: 1px solid rgba(255,120,0,0.22) !important;
}
/******** HIDE APPEARANCE MENU FOR LOGGED-OUT USERS ********/

/* Appearance portlet (Vector 2022) */
.mw-anon #vector-appearance {
display: none !important;
}

/******** FORCE-HIDE APPEARANCE FOR LOGGED-OUT USERS ********/

/* Body class for anonymous users */
.mw-anon {

/* Hide Appearance portlet by ID (when present) */
#vector-appearance,

/* Hide Appearance menu portal (Vector 2022 anon layout) */
.vector-appearance,

/* Hide any menu explicitly labeled Appearance */
.vector-menu-portal[aria-labelledby*="appearance"],
.vector-menu-portal[aria-label*="Appearance"],
nav[aria-labelledby*="appearance"],
nav[aria-label*="Appearance"] {
display: none !important;
}
}
/******** HIDE APPEARANCE (PINNED CONTAINER) FOR LOGGED-OUT USERS ********/
.mw-anon #vector-appearance-pinned-container {
display: none !important;
}
/******** HARD-KILL APPEARANCE UI FOR LOGGED-OUT USERS ********/

/* Any Appearance container by ID */
.mw-anon #vector-appearance,
.mw-anon #vector-appearance-pinned-container,

/* Any Appearance container by class */
.mw-anon .vector-appearance,
.mw-anon .vector-appearance-pinned-container,

/* Any Vector menu explicitly labeled Appearance */
.mw-anon nav[aria-label="Appearance"],
.mw-anon nav[aria-labelledby*="appearance"],
.mw-anon .vector-menu-portal[aria-label="Appearance"],
.mw-anon .vector-menu-portal[aria-labelledby*="appearance"],

/* Nuclear option: any portlet whose heading text is Appearance */
.mw-anon .mw-portlet:has(.vector-menu-heading:has-text("Appearance")) {
display: none !important;
}
/******** HIDE APPEARANCE LANDMARK (LOGGED OUT ONLY) ********/
.mw-anon nav.vector-appearance-landmark[aria-label="Appearance"] {
display: none !important;
}
/******** HIDE BY DEFAULT, SHOW ONLY WHEN LOGGED IN ********/
nav.vector-appearance-landmark[aria-label="Appearance"],
#vector-appearance-pinned-container {
display: none !important;
}

/* Logged-in pages usually have #pt-userpage */
#pt-userpage ~ * nav.vector-appearance-landmark[aria-label="Appearance"],
#pt-userpage ~ * #vector-appearance-pinned-container {
display: block !important;
}

/******** REMOVE LEFTOVER BAR AFTER HIDING APPEARANCE (LOGGED OUT) ********/

/* When logged out (no userpage link), remove the pinned/sticky container styling */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container-inner {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}

/* If it’s still reserving height, collapse it */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}

/******** REMOVE LEFTOVER GRADIENT BAR (LOGGED OUT) ********/

/* Logged out detection (no user page link) */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container-inner,
body:not(:has(#pt-userpage)) nav.vector-page-tools-landmark,
body:not(:has(#pt-userpage)) nav.vector-page-tools-landmark > * {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
filter: none !important;
}

/* Collapse the bar height if it’s just an empty pinned strip */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
height: auto !important;
}

/* If a pseudo-element is drawing the gradient */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container::before,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container::after,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container-inner::before,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container-inner::after {
content: none !important;
display: none !important;
}
/******** FINAL SEARCH CENTER + SIZE FIX ********/

/* Center relative to header */
.vector-header,
.vector-sticky-header {
position: relative !important;
}

/* Center the search form itself */
#searchform {
position: absolute !important;
left: 50% !important;
transform: translateX(-75%) !important;

/* CONTROL SIZE */
width: 520px !important; /* <- normal desktop size */
max-width: 80vw !important; /* responsive on small screens */

margin: 0 !important;
}

/* Prevent Codex from stretching inner elements */
#searchform .cdx-search-input,
#searchform .cdx-typeahead-search__form,
#searchform .cdx-text-input {
width: 100% !important;
flex: 0 0 auto !important;
}

/* Ensure right-side buttons stay put */
.vector-header .vector-header-end,
.vector-sticky-header .vector-header-end,
.vector-user-links,
#p-personal {
position: relative !important;
z-index: 10 !important;
}
/******** SEARCH BUTTON DOOM POLISH ********/

/* Search button */
#searchform button,
#searchform .cdx-button,
#searchform .searchButton {
background: rgba(0,0,0,0.85) !important;
color: #f2f2f2 !important;

border: 1px solid rgba(255,120,0,0.30) !important;
border-left: 1px solid rgba(255,120,0,0.45) !important; /* divider emphasis */
border-radius: 0 !important;

font-weight: 700 !important;
letter-spacing: 0.4px !important;
}

/* Hover */
#searchform button:hover,
#searchform .cdx-button:hover,
#searchform .searchButton:hover {
background: rgba(255,120,0,0.12) !important;
border-color: rgba(255,120,0,0.45) !important;
}

/* Active / pressed */
#searchform button:active,
#searchform .cdx-button:active {
background: rgba(255,120,0,0.18) !important;
}
/* Doom Archives main page icon grid */
.doom-archive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 24px;
margin: 30px 0;
text-align: center;
}

.doom-archive-icon img {
width: 100%;
max-width: 100px;
border: 2px solid #3a0000;
background: #000;
padding: 10px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.doom-archive-icon img:hover {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(180, 0, 0, 0.8);
}
/* ===== Vector 2022 sidebar icons (pinned main menu) ===== */

/* Target BOTH legacy panel and Vector 2022 main menu containers */
#mw-panel .vector-menu-content a,
#vector-main-menu-pinned-container .vector-menu-content a,
nav.vector-main-menu .vector-menu-content a,
nav.vector-main-menu a {
padding-left: 30px;
background-repeat: no-repeat;
background-position: 8px center;
background-size: 16px 16px;
}

/* Use Special:Redirect/file so MediaWiki serves the right file URL */
#mw-panel a[href*="Category:Doom_(1993)"],
#vector-main-menu-pinned-container a[href*="Category:Doom_(1993)"],
nav.vector-main-menu a[href*="Category:Doom_(1993)"] {
background-image: url(/index.php?title=Special:Redirect/file/Doom1993.png);
}

#mw-panel a[href*="Category:Doom_II"],
#vector-main-menu-pinned-container a[href*="Category:Doom_II"],
nav.vector-main-menu a[href*="Category:Doom_II"] {
background-image: url(/index.php?title=Special:Redirect/file/Doom2.png);
}

#mw-panel a[href*="Category:Doom_3"],
#vector-main-menu-pinned-container a[href*="Category:Doom_3"],
nav.vector-main-menu a[href*="Category:Doom_3"] {
background-image: url(/index.php?title=Special:Redirect/file/Doom3.png);
}

#mw-panel a[href*="Category:Doom_(2016)"],
#vector-main-menu-pinned-container a[href*="Category:Doom_(2016)"],
nav.vector-main-menu a[href*="Category:Doom_(2016)"] {
background-image: url(/index.php?title=Special:Redirect/file/Doom2016.png);
}

#mw-panel a[href*="Category:Doom_Eternal"],
#vector-main-menu-pinned-container a[href*="Category:Doom_Eternal"],
nav.vector-main-menu a[href*="Category:Doom_Eternal"] {
background-image: url(/index.php?title=Special:Redirect/file/DoomEternal.png);
}

#mw-panel a[href*="Category:Doom_The_Dark_Ages"],
#vector-main-menu-pinned-container a[href*="Category:Doom_The_Dark_Ages"],
nav.vector-main-menu a[href*="Category:Doom_The_Dark_Ages"] {
background-image: url(/index.php?title=Special:Redirect/file/DoomDarkAges.png);
}

#mw-panel a[href*="Category:Doom_Movies"],
#vector-main-menu-pinned-container a[href*="Category:Doom_Movies"],
nav.vector-main-menu a[href*="Category:Doom_Movies"] {
background-image: url(/index.php?title=Special:Redirect/file/DoomMovies.png);
}

#mw-panel a[href*="Category:Doom_Other"],
#vector-main-menu-pinned-container a[href*="Category:Doom_Other"],
nav.vector-main-menu a[href*="Category:Doom_Other"] {
background-image: url(/index.php?title=Special:Redirect/file/DoomOther.png);
}
/* ===== Doom sidebar icons: bigger + proper spacing ===== */
#mw-panel .vector-menu-content a,
#vector-main-menu-pinned-container .vector-menu-content a,
nav.vector-main-menu .vector-menu-content a,
nav.vector-main-menu a{
background-size: 32px auto !important; /* 2x size */
background-position: 10px center !important;
padding-left: 52px !important; /* shift text right */
line-height: 34px !important; /* prevents overlap */
min-height: 34px !important;
display: block; /* ensures padding applies cleanly */
}
/* ===== Doom sidebar icons (robust): use ::before so hover can't wipe them ===== */

/* 1) Base styling for sidebar links: make room for an icon */
#mw-panel .vector-menu-content a,
#vector-main-menu-pinned-container .vector-menu-content a,
nav.vector-main-menu .vector-menu-content a,
nav.vector-main-menu a {
position: relative !important;
padding-left: 56px !important; /* space for icon */
line-height: 34px !important;
min-height: 34px !important;
display: block !important;

/* IMPORTANT: stop using background-image on the link itself */
background-image: none !important;
}

/* 2) The icon element */
#mw-panel .vector-menu-content a::before,
#vector-main-menu-pinned-container .vector-menu-content a::before,
nav.vector-main-menu .vector-menu-content a::before,
nav.vector-main-menu a::before {
content: "" !important;
position: absolute !important;
left: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;

width: 32px !important;
height: 32px !important;

background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important; /* keeps aspect ratio, no stretching */

opacity: 1 !important;
pointer-events: none !important;
}

/* 3) Assign the icon per category link (uses the same matching you already had) */
#mw-panel a[href*="Category:Doom_(1993)"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_(1993)"]::before,
nav.vector-main-menu a[href*="Category:Doom_(1993)"]::before {
background-image: url(/index.php?title=Special:Redirect/file/Doom1993.png) !important;
}

#mw-panel a[href*="Category:Doom_II"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_II"]::before,
nav.vector-main-menu a[href*="Category:Doom_II"]::before {
background-image: url(/index.php?title=Special:Redirect/file/Doom2.png) !important;
}

#mw-panel a[href*="Category:Doom_3"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_3"]::before,
nav.vector-main-menu a[href*="Category:Doom_3"]::before {
background-image: url(/index.php?title=Special:Redirect/file/Doom3.png) !important;
}

#mw-panel a[href*="Category:Doom_(2016)"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_(2016)"]::before,
nav.vector-main-menu a[href*="Category:Doom_(2016)"]::before {
background-image: url(/index.php?title=Special:Redirect/file/Doom2016.png) !important;
}

#mw-panel a[href*="Category:Doom_Eternal"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_Eternal"]::before,
nav.vector-main-menu a[href*="Category:Doom_Eternal"]::before {
background-image: url(/index.php?title=Special:Redirect/file/DoomEternal.png) !important;
}

#mw-panel a[href*="Category:Doom_The_Dark_Ages"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_The_Dark_Ages"]::before,
nav.vector-main-menu a[href*="Category:Doom_The_Dark_Ages"]::before {
background-image: url(/index.php?title=Special:Redirect/file/DoomDarkAges.png) !important;
}

#mw-panel a[href*="Category:Doom_Movies"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_Movies"]::before,
nav.vector-main-menu a[href*="Category:Doom_Movies"]::before {
background-image: url(/index.php?title=Special:Redirect/file/DoomMovies.png) !important;
}

#mw-panel a[href*="Category:Doom_Other"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_Other"]::before,
nav.vector-main-menu a[href*="Category:Doom_Other"]::before {
background-image: url(/index.php?title=Special:Redirect/file/Other.png) !important;
}
/* ===== Vector 2022: remove the main-menu header controls (Hide/Pin/etc.) ===== */

/* Pinned menu header action buttons */
#vector-main-menu-pinned-container .vector-pinnable-header-toggle,
#vector-main-menu-pinned-container .vector-pinnable-header-buttons,
#vector-main-menu-pinned-container .vector-pinnable-header-actions,
#vector-main-menu-pinned-container .vector-pinnable-header,
#vector-main-menu-pinned-container .vector-menu-heading-actions,
#vector-main-menu-pinned-container .vector-menu-heading {
display: none !important;
}

/* Also cover nav variant */
nav.vector-main-menu .vector-pinnable-header-toggle,
nav.vector-main-menu .vector-pinnable-header-buttons,
nav.vector-main-menu .vector-pinnable-header-actions,
nav.vector-main-menu .vector-pinnable-header,
nav.vector-main-menu .vector-menu-heading-actions,
nav.vector-main-menu .vector-menu-heading {
display: none !important;
}
nav.vector-main-menu-landmark{
background: rgba(0,0,0,0.85) !important;
border: 1px solid rgba(255,120,0,0.30) !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 0 18px rgba(255,120,0,0.18) !important;
}

/* ===== FINAL: keep only OUTER frame, kill any INNER frame lines ===== */

/* Keep your OUTER frame exactly here */
nav.vector-main-menu-landmark {
background: rgba(0,0,0,0.85) !important;
border: 1px solid rgba(255,120,0,0.30) !important;
border-radius: 16px !important;
overflow: hidden !important;
}

/* Kill ALL inner borders/shadows/gradients that can look like a second outline */
nav.vector-main-menu-landmark :is(
#vector-main-menu-pinned-container,
nav.vector-main-menu,
.vector-menu-portal,
.vector-menu-content,
.mw-portlet,
.vector-pinnable-header,
.vector-pinnable-header-buttons,
.vector-pinnable-header-actions,
.vector-menu-heading,
.vector-menu-heading-actions
),
nav.vector-main-menu-landmark :is(
#vector-main-menu-pinned-container *,
nav.vector-main-menu *,
.vector-menu-portal *,
.vector-menu-content *,
.mw-portlet *
) {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background-image: none !important; /* <-- key for "inner line" gradients */
}

/* Kill pseudo-elements that often draw inner frames */
nav.vector-main-menu-landmark :is(
#vector-main-menu-pinned-container,
nav.vector-main-menu,
.vector-menu-portal,
.vector-menu-content,
.mw-portlet,
.vector-menu-heading
)::before,
nav.vector-main-menu-landmark :is(
#vector-main-menu-pinned-container,
nav.vector-main-menu,
.vector-menu-portal,
.vector-menu-content,
.mw-portlet,
.vector-menu-heading
)::after {
content: none !important;
display: none !important;
box-shadow: none !important;
background: none !important;
}
/* Make the orange border wrapper match the sidebar black */
nav.vector-main-menu-landmark {
background-color: rgba(0,0,0,0.85) !important; /* same Doom black */
}
/* ===== CLASSIC DOOM (1993) TYPOGRAPHY ===== */

/* Body text — gritty but readable */
body,
.mw-body,
.mw-parser-output,
.vector-body {
font-family: 'Roboto Condensed', Arial, sans-serif !important;
letter-spacing: 0.015em;
}

/* Page titles & section headers */
h1, h2, h3, h4, h5, h6,
.mw-first-heading {
font-family: 'Metal Mania', Arial, sans-serif !important;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #f5c542; /* classic Doom yellow */
}

/* Sidebar + menu links */
nav.vector-main-menu-landmark,
.vector-menu-content a,
#mw-panel {
font-family: 'Roboto Condensed', Arial, sans-serif !important;
letter-spacing: 0.05em;
}

/* Sidebar category emphasis */
.vector-menu-content a {
font-weight: 700;
}
h1, h2, h3, h4, h5, h6,
.mw-first-heading {
font-family: 'Bebas Neue', Arial, sans-serif !important;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #f5c542;
}
/* ===== REMOVE CONTENTS / TOC EVERYWHERE ===== */

/* Standard table of contents */
#toc,
.toc,
.mw-table-of-contents {
display: none !important;
}

/* Vector 2022 sticky Contents panel */
.vector-toc,
.vector-toc-pinned,
.vector-toc-pinned-container,
#vector-toc-pinned-container {
display: none !important;
}

/* Remove the toggle button / label */
.vector-toc-toggle,
.vector-toc-toggle-button {
display: none !important;
}

/* Prevent layout gap where TOC used to be */
.mw-body-content {
margin-right: 0 !important;
}
/* ===== FORCE Vector 2022 search input text color ===== */

/* Actual typed text */
html body .cdx-text-input__input,
html body .vector-search-box-input,
html body #searchInput {
color: #f5c542 !important; /* Doom yellow */
caret-color: #f5c542 !important; /* Cursor color */
}

/* Placeholder text */
html body .cdx-text-input__input::placeholder,
html body .vector-search-box-input::placeholder,
html body #searchInput::placeholder {
color: rgba(245,197,66,0.65) !important;
}

/* Chrome autofill fix */
html body .cdx-text-input__input:-webkit-autofill,
html body .vector-search-box-input:-webkit-autofill,
html body #searchInput:-webkit-autofill {
-webkit-text-fill-color: #f5c542 !important;
box-shadow: 0 0 0 1000px rgba(0,0,0,0.85) inset !important;
}
/* ===== FORCE Vector 2022 search magnifying glass color ===== */

/* 1) Override Codex icon color variables within the search box */
html body .vector-search-box,
html body .cdx-search-input {
--color-base: #f5c542 !important;
--color-base--hover: #ffd966 !important;
--color-subtle: #f5c542 !important;
--color-subtle--hover: #ffd966 !important;
--color-emphasized: #f5c542 !important;
}

/* 2) Force the actual SVG + PATH to Doom yellow */
html body .vector-search-box svg,
html body .vector-search-box svg * ,
html body .cdx-search-input__icon svg,
html body .cdx-search-input__icon svg * ,
html body .cdx-icon svg,
html body .cdx-icon svg * {
fill: #f5c542 !important;
stroke: #f5c542 !important;
color: #f5c542 !important;
}
/* ===== Doom readability overlay: PAGE CONTENT ===== */

/* Ensure outer containers are transparent */
.mw-body,
.vector-body,
.mw-body-content {
background: transparent !important;
box-shadow: none !important;
}

/* Apply ONE shading layer to article content only */
#mw-content-text {
background: rgba(0, 0, 0, 0.55) !important;
border-radius: 12px;
padding: 18px;
}
/* ===== Doom icon hover effect (Main Page) ===== */

/* Target main page icons only */
.page-Main_Page a img {
transition:
transform 0.18s ease,
filter 0.18s ease;
}

/* Hover effect */
.page-Main_Page a:hover img {
transform: scale(1.06);
filter:
drop-shadow(0 0 6px rgba(245,197,66,0.55))
drop-shadow(0 0 14px rgba(255,120,0,0.35));
}
/* ===== Doom-style STICKY header only (Vector 2022) ===== */

/* Style ONLY the sticky header bar */
.vector-sticky-header .vector-page-titlebar,
.vector-sticky-header .vector-page-titlebar-title {
background: rgba(0,0,0,0.85) !important;
border-bottom: 1px solid rgba(255,120,0,0.35) !important;
box-shadow: 0 6px 18px rgba(0,0,0,0.70) !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}

/* Sticky header title text */
.vector-sticky-header .mw-page-title-main,
.vector-sticky-header .vector-page-titlebar .mw-page-title-main {
font-family: 'Bebas Neue', Arial, sans-serif !important;
color: #f5c542 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
font-size: 20px !important;
text-shadow: 0 0 4px rgba(245,197,66,0.35) !important;
}
.relic-card{
max-width:980px;
margin:18px auto;
padding:16px;
border-radius:14px;
border:1px solid rgba(255,120,0,.30);
background:rgba(0,0,0,.55);
}

.relic-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:14px;
padding-bottom:10px;
border-bottom:1px solid rgba(255,120,0,.22);
}

.relic-title{
font-size:20px;
letter-spacing:.12em;
text-transform:uppercase;
}

.relic-chip{
padding:6px 10px;
border-radius:999px;
font-size:12px;
letter-spacing:.14em;
text-transform:uppercase;
border:1px solid rgba(255,120,0,.35);
background:rgba(0,0,0,.35);
}

.relic-body{
display:grid;
grid-template-columns:440px 1fr;
gap:16px;
}

.relic-noimg{
height:240px;
border-radius:12px;
border:1px dashed rgba(255,120,0,.35);
display:flex;
align-items:center;
justify-content:center;
opacity:.85;
}

.relic-row{
display:flex;
justify-content:space-between;
gap:12px;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(255,120,0,.18);
background:rgba(0,0,0,.35);
margin-bottom:8px;
}

.relic-row .k{
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
opacity:.75;
}

.relic-desc--full{
margin-top:18px;
padding:14px;
border-radius:12px;
border:1px solid rgba(255,120,0,.18);
background:rgba(0,0,0,.35);
}

.relic-desc--full .k{
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
opacity:.75;
margin-bottom:6px;
}

.relic-desc--full .desc{
line-height:1.6;
white-space:pre-wrap;
}

@media (max-width: 860px){
.relic-body{
grid-template-columns: 1fr;
}
}
.doom-divider {
height: 2px;
background: linear-gradient(
to right,
transparent,
rgba(255,120,0,0.45),
transparent
);
margin: 28px 0;
}

}
/* Main page action buttons: left + right */
.doom-main-buttons{
display: flex !important;
justify-content: space-between !important;
align-items: center !important;

width: 100% !important;
max-width: 1100px;
margin: 28px auto;

gap: 24px;
}

.doom-main-buttons .doom-btn{
display: block;
}

/* prevent MediaWiki paragraph wrappers from breaking the row */
.doom-main-buttons p{
margin: 0 !important;
}

/* hover polish */
.doom-main-buttons img{
transition: transform .18s ease, filter .18s ease;
}
.doom-main-buttons a:hover img{
transform: scale(1.05);
filter:
drop-shadow(0 0 6px rgba(245,197,66,0.55))
drop-shadow(0 0 14px rgba(255,120,0,0.35));
}

/* optional mobile stack */
@media (max-width: 700px){
.doom-main-buttons{
flex-direction: column !important;
}
}
/* === Doom floating buttons (front page) === */

/* Base float animation */
@keyframes doomFloat {
0% { transform: translateY(0); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0); }
}

/* Apply to main-page button images only */
.page-Main_Page img[alt="Add a Relic"],
.page-Main_Page img[alt="Random Relic"],
.page-Main_Page img[alt="How to Contribute"] {
animation: doomFloat 4.5s ease-in-out infinite;
}

/* Slight desync so they don't move together */
.page-Main_Page img[alt="Random Relic"] {
animation-delay: 1.2s;
}

.page-Main_Page img[alt="How to Contribute"] {
animation-delay: 2.4s;
}

/* === REMOVE HEADER BLUR (Vector 2022) === */

.vector-header,
.vector-sticky-header,
.vector-header-start,
.vector-header-end {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ==================================================
DOOM CACODEMON EVENT — REQUIRED CSS (NO-FLICKER)
================================================== */

#doom-fx-layer{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 240px; /* top band */
pointer-events: none; /* never blocks clicks */
z-index: 1; /* behind UI */
overflow: visible;
}

/* Keep UI above FX */
.skin-vector-2022 .vector-header,
.skin-vector-2022 .mw-page-container,
.skin-vector-2022 .mw-content-container,
.skin-vector-2022 #content,
.skin-vector-2022 .mw-body,
.skin-vector #mw-head,
.skin-vector #content,
.skin-vector .mw-body,
.skin-vector #mw-panel{
position: relative;
z-index: 5;
}

/* Demon container */
.doom-demon{
position: absolute;
width: 120px;
height: 120px;
opacity: 0.95;
filter:
drop-shadow(0 0 10px rgba(255,90,0,0.35))
drop-shadow(0 10px 14px rgba(0,0,0,0.45));
will-change: transform;
}

/* Two stacked frames (NO blink) */
.doom-demon .doom-frame{
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 1;
transition: opacity 80ms steps(1,end);
will-change: opacity;
}

.doom-demon.is-alt .frame-a{ opacity: 0; }
.doom-demon.is-alt .frame-b{ opacity: 1; }
.doom-demon:not(.is-alt) .frame-a{ opacity: 1; }
.doom-demon:not(.is-alt) .frame-b{ opacity: 0; }

/* (Optional) smaller on mobile */
@media (max-width: 768px){
.doom-demon{ width: 80px; height: 80px; }
}
/* ===== CLASSIC DOOM PLASMA (required) ===== */
.doom-plasma{
position: absolute;
width: 16px;
height: 16px;
border-radius: 2px;

background:
radial-gradient(circle at 50% 50%,
#FFFFFF 0%,
#FFFFFF 10%,
#FFB7B7 11%,
#FFB7B7 18%,
#FF5F5F 19%,
#FF5F5F 30%,
#E70000 31%,
#E70000 42%,
#BF0000 43%,
#BF0000 52%,
#5F7FFF 53%,
#5F7FFF 62%,
#3F63FF 63%,
#3F63FF 72%,
#2F4FEF 73%,
#2F4FEF 80%,
#1F3FBF 81%,
#1F3FBF 88%,
transparent 89%
);

box-shadow:
0 0 2px #FF5F5F,
0 0 6px #E70000,
0 0 10px #BF0000,
0 0 6px #5F7FFF,
0 0 12px #3F63FF,
0 0 20px #2F4FEF;

image-rendering: pixelated;
image-rendering: crisp-edges;

opacity: 0.96;
will-change: transform, opacity;

animation:
plasmaPixelFlicker 0.18s steps(2) infinite,
plasmaSpin 0.45s steps(8) infinite;
}

@keyframes plasmaPixelFlicker{
0% { transform: scale(1); }
50% { transform: scale(1.15); }
100% { transform: scale(1); }
}

@keyframes plasmaSpin{
0% { rotate: 0deg; }
100% { rotate: 360deg; }
}
/* === RELIC PAGE: FORCE META TO RIGHT OF IMAGE === */

.relic-body{
display: grid;
grid-template-columns: 440px 1fr;
align-items: start;
}

/* Left column = image only */
.relic-media{
grid-column: 1;
}

/* Right column = all metadata rows */
.relic-meta{
grid-column: 2;
}

/* Description always full-width BELOW */
.relic-desc--full{
grid-column: 1 / -1;
margin-top: 18px;
}
/* === FORCE ALL LINKS TO DOOM ORANGE (NO PURPLE VISITED) === */

/* Normal links */
a,
a:link {
color: #f5c542 !important; /* Doom yellow/orange */
}

/* Visited links */
a:visited {
color: #f5c542 !important;
}

/* Hover */
a:hover {
color: #ffd966 !important;
}

/* Active / focus */
a:active,
a:focus {
color: #ffd966 !important;
}
/* ===== REMOVE "Powered by MediaWiki" BUTTON ===== */
#footer-poweredbyico,
#footer-poweredby,
.mw-poweredby,
.mw-footer-poweredby {
display: none !important;
}
/* Match category links box to logged-in gray */
#mw-normal-catlinks {
background-color: #2a2a2a !important; /* or whatever gray tone you use */
border: 1px solid #444 !important;
color: #ccc !important;
}

/* Optional: match the links too */
#mw-normal-catlinks a {
color: #ccc !important;
}
#mw-normal-catlinks a:hover {
color: #ff6600 !important; /* accent hover color if you use orange */
}
/* 🔧 Force dark theme on category box and its container */
#catlinks,
#mw-normal-catlinks,
div.catlinks,
div#mw-normal-catlinks {
background: none !important; /* remove default white */
background-color: #2a2a2a !important; /* your gray tone */
border: 1px solid #444 !important;
color: #ccc !important;
}

/* Fix inherited white padding/margins */
#catlinks,
#mw-normal-catlinks {
padding: 0.5em 0.8em !important;
margin: 1em 0 !important;
}

/* Style category links themselves */
#catlinks a,
#mw-normal-catlinks a {
color: #ccc !important;
}
#catlinks a:hover,
#mw-normal-catlinks a:hover {
color: #ff6600 !important; /* or your accent */
}

/* Extra: kill any white from surrounding body content */
.mw-body-content #catlinks,
.mw-body-content #mw-normal-catlinks {
background-color: transparent !important;
}
/* ===== Doom Relics theme for account pages ===== */
body.mw-special-CreateAccount,
body.mw-special-UserLogin {
background-color: transparent !important;
} /* page background */
--panel: rgba(33,33,36,0.85); /* card/panel bg */
--border: rgba(255,120,0,.30); /* your orange border accent */
--text: #ddd; /* main text */
--muted: #aaa; /* secondary text */
--accent: #ff6600; /* button/hover accent */
}

/* Page background & content area */
body.mw-special-CreateAccount .mw-page-container,
body.mw-special-CreateAccount .mw-workspace-container,
body.mw-special-CreateAccount .mw-content-container,
body.mw-special-CreateAccount .mw-body,
body.mw-special-CreateAccount .vector-body,
body.mw-special-UserLogin .mw-page-container,
body.mw-special-UserLogin .mw-workspace-container,
body.mw-special-UserLogin .mw-content-container,
body.mw-special-UserLogin .mw-body,
body.mw-special-UserLogin .vector-body {
background: var(--bg) !important;
color: var(--text) !important;
}

/* Main form “card” */
body.mw-special-CreateAccount .mw-htmlform,
body.mw-special-CreateAccount .mw-htmlform-ooui-wrapper,
body.mw-special-CreateAccount .oo-ui-panelLayout,
body.mw-special-CreateAccount .mw-message-box,
body.mw-special-UserLogin .mw-htmlform,
body.mw-special-UserLogin .mw-htmlform-ooui-wrapper,
body.mw-special-UserLogin .oo-ui-panelLayout,
body.mw-special-UserLogin .mw-message-box {
background: var(--panel) !important;
border: 1px solid var(--border) !important;
border-radius: 12px !important;
box-shadow: 0 0 0 1px rgba(255,120,0,.12) inset, 0 8px 24px rgba(0,0,0,.35) !important;
padding: 16px 18px !important;
}

/* Inputs */
body.mw-special-CreateAccount input,
body.mw-special-CreateAccount select,
body.mw-special-CreateAccount textarea,
body.mw-special-CreateAccount .oo-ui-inputWidget-input,
body.mw-special-UserLogin input,
body.mw-special-UserLogin select,
body.mw-special-UserLogin textarea,
body.mw-special-UserLogin .oo-ui-inputWidget-input {
background: #141416 !important;
border: 1px solid #444 !important;
color: var(--text) !important;
border-radius: 8px !important;
}
body.mw-special-CreateAccount .oo-ui-labelWidget,
body.mw-special-UserLogin .oo-ui-labelWidget {
color: var(--muted) !important;
}

/* Buttons (OOUI + mw-ui) */
body.mw-special-CreateAccount .oo-ui-buttonElement-button,
body.mw-special-CreateAccount .mw-ui-button,
body.mw-special-UserLogin .oo-ui-buttonElement-button,
body.mw-special-UserLogin .mw-ui-button {
background: var(--accent) !important;
border-color: var(--accent) !important;
color: #000 !important;
font-weight: 700 !important;
border-radius: 999px !important;
}
body.mw-special-CreateAccount .oo-ui-buttonElement-button:hover,
body.mw-special-UserLogin .oo-ui-buttonElement-button:hover,
body.mw-special-CreateAccount .mw-ui-button:hover,
body.mw-special-UserLogin .mw-ui-button:hover {
filter: brightness(1.05);
}

/* Links & small helper text */
body.mw-special-CreateAccount a,
body.mw-special-UserLogin a { color: var(--accent) !important; }
body.mw-special-CreateAccount .mw-form-related-link,
body.mw-special-UserLogin .mw-form-related-link { color: var(--muted) !important; }

/* Kill any stray white boxes */
body.mw-special-CreateAccount .mw-message-box,
body.mw-special-UserLogin .mw-message-box,
body.mw-special-CreateAccount .oo-ui-messageWidget,
body.mw-special-UserLogin .oo-ui-messageWidget {
background-color: rgba(33,33,36,0.9) !important;
border-color: var(--border) !important;
}

/* Optional: center/narrow the form like your main page cards */
body.mw-special-CreateAccount #content,
body.mw-special-UserLogin #content {
max-width: 760px !important;
margin: 0 auto !important;
}
/* === Force BLACK text in login/create-account validation messages === */

/* Codex banners (newer MW versions) */
body.mw-special-CreateAccount .cdx-message,
body.mw-special-UserLogin .cdx-message,
body.mw-special-CreateAccount .cdx-message__content,
body.mw-special-UserLogin .cdx-message__content {
color: #000 !important;
background: rgba(255,255,255,0.92) !important; /* readable light bg */
border-color: #ccc !important;
}

/* OOUI inline banners (older MW / some flows) */
body.mw-special-CreateAccount .oo-ui-messageWidget,
body.mw-special-UserLogin .oo-ui-messageWidget,
body.mw-special-CreateAccount .oo-ui-messageWidget .oo-ui-labelElement-label,
body.mw-special-UserLogin .oo-ui-messageWidget .oo-ui-labelElement-label {
color: #000 !important;
background: rgba(255,255,255,0.92) !important;
border: 1px solid #ccc !important;
}

/* OOUI validation popups attached to fields (tooltips) */
body.mw-special-CreateAccount .oo-ui-popupWidget-popup,
body.mw-special-UserLogin .oo-ui-popupWidget-popup,
body.mw-special-CreateAccount .oo-ui-toolTipWidget-popup,
body.mw-special-UserLogin .oo-ui-toolTipWidget-popup {
color: #000 !important;
background: rgba(255,255,255,0.98) !important;
border: 1px solid #bbb !important;
box-shadow: 0 6px 22px rgba(0,0,0,.25) !important;
}

/* Make sure the text inside those popups inherits black */
body.mw-special-CreateAccount .oo-ui-popupWidget-popup * ,
body.mw-special-UserLogin .oo-ui-popupWidget-popup * {
color: #000 !important;
}

/* Optional: keep error/warning accents without changing text color */
body.mw-special-CreateAccount .cdx-message--warning,
body.mw-special-UserLogin .cdx-message--warning,
body.mw-special-CreateAccount .oo-ui-messageWidget.oo-ui-flaggedElement-warning,
body.mw-special-UserLogin .oo-ui-messageWidget.oo-ui-flaggedElement-warning {
border-color: #f0c36d !important;
}
body.mw-special-CreateAccount .cdx-message--error,
body.mw-special-UserLogin .cdx-message--error,
body.mw-special-CreateAccount .oo-ui-messageWidget.oo-ui-flaggedElement-error,
body.mw-special-UserLogin .oo-ui-messageWidget.oo-ui-flaggedElement-error {
border-color: #e28b8b !important;
}
/* Hide the Tools section for everyone except logged-in admins */
body:not(.group-sysop) #p-tb,
body:not(.group-sysop) #p-tb-label,
body:not(.group-sysop) #p-tb ul {
display: none !important;
}
/* === Match Create a Relic button to dark theme for all non-admins === */

/* For any user NOT in sysop group */
body:not(.group-sysop) .mw-ui-button,
body:not(.group-sysop) .oo-ui-buttonElement-button,
body:not(.group-sysop) .mw-ui-primary,
body:not(.group-sysop) .oo-ui-buttonElement-framed {
background-color: #2a2a2a !important; /* your dark gray */
color: #ddd !important;
border: 1px solid #444 !important;
text-shadow: none !important;
}

/* Hover/active effect */
body:not(.group-sysop) .mw-ui-button:hover,
body:not(.group-sysop) .oo-ui-buttonElement-button:hover {
background-color: #3a3a3a !important;
color: #fff !important;
border-color: #555 !important;
}

/* Optional: specifically target your Create a Relic button by title or label text */
body:not(.group-sysop) a[title="Create a relic"],
body:not(.group-sysop) button:contains("Create a relic") {
background-color: #2a2a2a !important;
color: #ddd !important;
border-color: #444 !important;
}
/* ===== Center the login page content ===== */
body.mw-special-UserLogin #content,
body.mw-special-UserLogin .mw-page-container,
body.mw-special-UserLogin .mw-content-container {
/* keep the page centered with a sane width */
max-width: 760px !important;
margin: 0 auto !important;
}

/* Center the block with the form + helper links */
body.mw-special-UserLogin .mw-htmlform,
body.mw-special-UserLogin .mw-htmlform-ooui-wrapper,
body.mw-special-UserLogin .oo-ui-panelLayout {
max-width: 760px !important;
margin: 24px auto !important;
}

/* Center the “Join / Create account” helper line under the form */
body.mw-special-UserLogin .mw-form-related-link,
body.mw-special-UserLogin .mw-form-related-links {
text-align: center !important;
}

/* Keep field labels/inputs aligned left inside the centered card */
body.mw-special-UserLogin .oo-ui-fieldLayout,
body.mw-special-UserLogin .oo-ui-fieldLayout-body {
text-align: left !important;
}

/* ===== Make the Join/Create button gray ===== */
/* Codex buttons (newer MW) */
body.mw-special-UserLogin .cdx-button {
background-color: #2a2a2a !important;
color: #ddd !important;
border: 1px solid #444 !important;
border-radius: 8px !important;
}
body.mw-special-UserLogin .cdx-button:hover {
background-color: #3a3a3a !important;
color: #fff !important;
border-color: #555 !important;
}

/* OOUI + mw-ui buttons (older/new skins) */
body.mw-special-UserLogin .oo-ui-buttonElement-button,
body.mw-special-UserLogin .mw-ui-button {
background-color: #2a2a2a !important;
color: #ddd !important;
border: 1px solid #444 !important;
border-radius: 8px !important;
}
body.mw-special-UserLogin .oo-ui-buttonElement-button:hover,
body.mw-special-UserLogin .mw-ui-button:hover {
background-color: #3a3a3a !important;
color: #fff !important;
border-color: #555 !important;
}
/* ===== Center the login content (cover both body class variants) ===== */
body.mw-special-Userlogin #content,
body.page-Special_UserLogin #content,
body.mw-special-Userlogin .mw-htmlform,
body.page-Special_UserLogin .mw-htmlform,
body.mw-special-Userlogin .mw-htmlform-ooui-wrapper,
body.page-Special_UserLogin .mw-htmlform-ooui-wrapper {
max-width: 760px !important;
margin-left: auto !important;
margin-right: auto !important;
}

/* Keep labels/inputs left-aligned inside the centered block */
body.mw-special-Userlogin .oo-ui-fieldLayout,
body.page-Special_UserLogin .oo-ui-fieldLayout {
text-align: left !important;
}

/* ===== Make the "Join / Create account" control gray ===== */
/* Codex button */
body.mw-special-Userlogin a.cdx-button[href*="Special:CreateAccount"],
body.page-Special_UserLogin a.cdx-button[href*="Special:CreateAccount"] {
background-color: #2a2a2a !important;
color: #ddd !important;
border: 1px solid #444 !important;
border-radius: 8px !important;
}
body.mw-special-Userlogin a.cdx-button[href*="Special:CreateAccount"]:hover,
body.page-Special_UserLogin a.cdx-button[href*="Special:CreateAccount"]:hover {
background-color: #3a3a3a !important;
color: #fff !important;
border-color: #555 !important;
}

/* OOUI/mw-ui fallback (if it's rendered as a standard button) */
body.mw-special-Userlogin .oo-ui-buttonElement a.oo-ui-buttonElement-button[href*="CreateAccount"],
body.page-Special_UserLogin .oo-ui-buttonElement a.oo-ui-buttonElement-button[href*="CreateAccount"],
body.mw-special-Userlogin .mw-ui-button[href*="CreateAccount"],
body.page-Special_UserLogin .mw-ui-button[href*="CreateAccount"] {
background-color: #2a2a2a !important;
color: #ddd !important;
border: 1px solid #444 !important;
border-radius: 8px !important;
}

/* If it's just a plain link in the helper line, style it like a button */
body.mw-special-Userlogin .mw-form-related-link a[href*="CreateAccount"],
body.page-Special_UserLogin .mw-form-related-link a[href*="CreateAccount"] {
display: inline-block !important;
padding: 10px 16px !important;
background-color: #2a2a2a !important;
color: #ddd !important;
border: 1px solid #444 !important;
border-radius: 8px !important;
text-decoration: none !important;
}
body.mw-special-Userlogin .mw-form-related-link a[href*="CreateAccount"]:hover,
body.page-Special_UserLogin .mw-form-related-link a[href*="CreateAccount"]:hover {
background-color: #3a3a3a !important;
color: #fff !important;
border-color: #555 !important;
}
/* Nix the hamburger on Login & Create Account (Vector 2022) */
body.mw-special-Userlogin #mw-sidebar-button,
body.mw-special-CreateAccount #mw-sidebar-button,
body.page-Special_UserLogin #mw-sidebar-button,
body.page-Special_CreateAccount #mw-sidebar-button,
body.mw-special-Userlogin #vector-main-menu-dropdown,
body.mw-special-CreateAccount #vector-main-menu-dropdown,
body.page-Special_UserLogin #vector-main-menu-dropdown,
body.page-Special_CreateAccount #vector-main-menu-dropdown {
display: none !important;
}

/* Extra safety: any Vector header “menu” buttons by aria-label */
body.mw-special-Userlogin .vector-header .vector-button[aria-label*="menu"],
body.mw-special-CreateAccount .vector-header .vector-button[aria-label*="menu"],
body.page-Special_UserLogin .vector-header .vector-button[aria-label*="menu"],
body.page-Special_CreateAccount .vector-header .vector-button[aria-label*="menu"] {
display: none !important;
}

/* Remove any leftover spacing where the button sat */
body.mw-special-Userlogin .vector-header-start,
body.mw-special-CreateAccount .vector-header-start,
body.page-Special_UserLogin .vector-header-start,
body.page-Special_CreateAccount .vector-header-start {
gap: 0 !important;
}
/* === 0) General fluid rules (good everywhere) === */
img, video, iframe { max-width: 100%; height: auto; }
.mw-parser-output { overflow-wrap: anywhere; }

/* Make wide tables scroll instead of overflowing */
.mw-parser-output table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

/* === 1) Button rows that auto-wrap === */
/* Add class="doom-row" around any row of buttons/links */
.doom-row {
display: flex;
flex-wrap: wrap; /* prevents spillage */
gap: 10px;
align-items: center;
}

/* Add class="doom-btn" to individual buttons/links */
.doom-btn,
.doom-row .mw-ui-button,
.doom-row .oo-ui-buttonElement-button {
flex: 1 1 220px; /* grows, but will wrap below 220px */
min-width: 180px; /* sets a sane minimum */
text-align: center;
}

/* === 2) Responsive typography (scales with screen) === */
:root {
--ui-font: clamp(14px, 1.6vw, 18px); /* auto scales */
--ui-pad: clamp(8px, 1.2vw, 12px);
}
.doom-btn,
.mw-ui-button,
.oo-ui-buttonElement-button {
font-size: var(--ui-font);
padding: var(--ui-pad) calc(var(--ui-pad) * 1.5);
}

/* === 3) Containers & cards don’t run off-screen === */
.doom-container, .mw-parser-output > .doom-card {
box-sizing: border-box;
max-width: 100%;
}

/* === 4) Small-screen tweaks === */
@media (max-width: 1024px) {
/* Let big button bars stack nicely */
.doom-row { justify-content: center; }

/* If you have fixed-width side elements, allow full width on tablets */
.doom-side, .doom-aside { width: 100% !important; }
}

@media (max-width: 768px) {
/* Stack buttons vertically with full width */
.doom-btn, .doom-row .mw-ui-button, .doom-row .oo-ui-buttonElement-button {
flex: 1 1 100%;
min-width: 0;
}

/* Tighten padding/margins on small screens */
.mw-parser-output .doom-card,
.mw-parser-output .doom-section {
padding: 12px;
margin: 10px 0;
}

/* Prevent headers/long titles from pushing layout */
.firstHeading { font-size: clamp(18px, 5vw, 28px); line-height: 1.2; }
}

/* === 5) Make hero banners scale without overflow (if you use one) === */
.doom-hero {
width: 100%;
max-width: 100%;
aspect-ratio: 16/6; /* keeps proportion; change as needed */
object-fit: cover;
border-radius: 12px;
}
/* === Make sidebar unsquish on tablets/laptops === */

/* 1) Vector 2022: let sidebar drop under content and span full width */
@media (max-width: 1100px) {
/* Move sidebar below main content */
.vector-column-start { order: 2 !important; width: 100% !important; }
.vector-column-end, .vector-column-content { order: 1 !important; }

/* Make the sidebar container full width and add breathing room */
.vector-sidebar-container, .vector-sidebar {
width: 100% !important;
max-width: 100% !important;
padding: 8px 0 !important;
}

/* Lay out portlet links in a wrapping grid so nothing gets cramped */
.vector-sidebar .vector-menu-content-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.vector-sidebar .vector-menu-content-list > li {
flex: 1 1 220px; /* two–three columns depending on width */
min-width: 160px; /* stop ultra-narrow crunching */
}

/* Keep headings tidy */
.vector-sidebar .vector-menu-heading {
font-size: 0.95rem !important;
margin: 8px 0 4px !important;
white-space: normal !important;
}
}

/* 2) Legacy Vector (#mw-panel): same idea */
@media (max-width: 1100px) {
#mw-panel {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 12px 0 !important;
}
#mw-panel .portal .body ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#mw-panel .portal .body ul li {
flex: 1 1 220px;
min-width: 160px;
}
}

/* 3) Small phones: stack everything cleanly */
@media (max-width: 768px) {
.vector-sidebar .vector-menu-content-list > li,
#mw-panel .portal .body ul li {
flex: 1 1 100%;
min-width: 0;
}
}

MediaWiki:Common.css

2025-12-26T19:54:32Z

Rbutcher:

Main Page

2025-12-26T18:58:32Z

Rbutcher: Rbutcher moved page Home to Main Page over a redirect without leaving a redirect

<div class="doom-divider"></div>

<div class="doom-archive-grid">

<div class="doom-archive-tile">[[File:Doom1993.png|frameless|220px|link=:Category:Doom (1993)|alt=Doom (1993)]]<div class="doom-archive-label">Doom (1993)</div></div>

<div class="doom-archive-tile">[[File:Doom2.png|frameless|220px|link=:Category:Doom II|alt=Doom II]]<div class="doom-archive-label">Doom II</div></div>

<div class="doom-archive-tile">[[File:Doom3.png|frameless|220px|link=:Category:Doom 3|alt=Doom 3]]<div class="doom-archive-label">Doom 3</div></div>

<div class="doom-archive-tile">[[File:Doom2016.png|frameless|220px|link=:Category:Doom (2016)|alt=Doom (2016)]]<div class="doom-archive-label">Doom (2016)</div></div>

<div class="doom-archive-tile">[[File:DoomEternal.png|frameless|220px|link=:Category:Doom Eternal|alt=Doom Eternal]]<div class="doom-archive-label">Doom Eternal</div></div>

<div class="doom-archive-tile">[[File:DoomDarkAges.png|frameless|220px|link=:Category:Doom The Dark Ages|alt=Doom The Dark Ages]]<div class="doom-archive-label">Doom: The Dark Ages</div></div>

<div class="doom-archive-tile">[[File:DoomMovies.png|frameless|220px|link=:Category:Doom Movies|alt=Doom Movies]]<div class="doom-archive-label">Doom Movies</div></div>

<div class="doom-archive-tile">[[File:other.png|frameless|220px|link=:Category:Doom Other|alt=Other]]<div class="doom-archive-label">Doom Other</div></div>

</div>

<div class="doom-divider"></div>

{| style="width:100%; max-width:1300px; margin:36px auto; border:0; background:transparent;"
| style="text-align:left; vertical-align:middle; border:0; padding:0;" |
[[File:AddRelicButton.png|frameless|300px|link=Special:FormStart/Relic|alt=Add a Relic]]

| style="text-align:center; vertical-align:middle; border:0; padding:0;" |
[[File:RandomRelicButton.png|frameless|300px|link=Special:RandomInCategory/Relics|alt=Random Relic]]

| style="text-align:right; vertical-align:middle; border:0; padding:0;" |
[[File:HowToContributeButton.png|frameless|300px|link=Help:Contributing|alt=How to Contribute]]
|}

<div class="doom-divider"></div>

= Welcome to the Doom Relics Wiki =

''The Doom Relics Wiki is a community-driven archive dedicated to preserving, cataloging, and tracking Doom collectibles, merchandise, and memorabilia from 1993 to today.''

Whether you collect boxed PC releases, console ports, action figures, apparel, promo items, or rare press kits — this wiki exists to document it all.

----

== 🧠 What Is Doom Relics? ==

Doom Relics is an open collector database focused on items related to the '''Doom''' franchise, including:

* Physical game releases
* Collector’s Editions
* Figures and statues
* Promotional and store-exclusive items
* Apparel and accessories
* Printed media and manuals
* Miscellaneous and undocumented items

Our goal is accuracy, preservation, and community knowledge — not speculation or resale pricing.

----

== 📦 Browse the Collection ==

* [[Category:Games|Games]]
* [[Category:Collector's Editions|Collector’s Editions]]
* [[Category:Figures & Statues|Figures & Statues]]
* [[Category:Promotional Items|Promotional Items]]
* [[Category:Apparel|Apparel]]
* [[Category:Print Media|Print Media]]
* [[Category:Miscellaneous|Miscellaneous]]

----

== 📝 Item Pages ==

Each item page may include:

* Release year
* Platform or region
* Manufacturer or publisher
* Known variants
* Packaging details
* Notes on rarity or history
* High-quality images
* Community notes and corrections

If information is incomplete, that’s okay — pages can evolve over time.

----

== 👥 For Collectors ==

Registered users can:

* Help improve existing pages
* Add new items to the database
* Upload photos of their own collectibles
* Contribute missing information
* Correct errors or add sources

(Ownership tracking and wishlists are planned for future updates.)

----

== 🚧 Work In Progress ==

This wiki is actively growing.

Some pages may be incomplete or missing images — contributions are encouraged.
If you are knowledgeable about a specific item or era, your input matters.

----

== ⚠️ Disclaimer ==

Doom Relics Wiki is a fan-run project and is not affiliated with id Software or Bethesda.
All trademarks belong to their respective owners.

Main Page

2025-12-26T18:55:29Z

Rbutcher: Rbutcher moved page Main Page to Home

{{Relic
|category=Doom Eternal
|subcat=Figures & Statues
|rarity=Unknown
|manufacturer=Numskull
|year=2021
|img1=Mancubus.png
|description=Equipped with armor plating increases and a sophisticated weapon, this behemoth of a demon is a formidable enemy who can take a chainsaw to face.
Standing 170mm tall, this officially licensed collectible figure is an exact replica of the in-game toys you can find in DOOM Eternal
}}

Numskull Cacodemon Collectible Figurine

2025-12-26T17:28:00Z

2025-12-26T17:16:15Z

Rbutcher: Rbutcher moved page Numskull Marauder Collectible Figure to Numskull Marauder Collectible Figurine without leaving a redirect

{{Relic
|category=Doom Eternal
|subcat=Figures & Statues
|rarity=Common
|manufacturer=Numskull
|year=2022
|img1=Marauder.jpg
|description=Once former members of the DOOM Slayer s personal band of warriors, the Marauders are Night Sentinels that s sided with the forces of hell, becoming one of the most challenging foes the Marine will ever face.,Standing at a mighty 175mm (6.9 inches) tall, this officially licensed collectable is an exact replica to the in-game toys that you can find in DOOM Eternal
}}

Numskull Zombie Collectible Figure

2025-12-26T17:15:59Z

Rbutcher: Rbutcher moved page Numskull Zombie Collectible Figure to Numskull Zombie Collectible Figurine

#REDIRECT [[Numskull Zombie Collectible Figurine]]

Numskull Zombie Collectible Figurine

2025-12-26T17:15:59Z

Rbutcher: Rbutcher moved page Numskull Zombie Collectible Figure to Numskull Zombie Collectible Figurine

{{Relic
|category=Doom Eternal
|subcat=Figures & Statues
|rarity=Common
|manufacturer=Numskull
|year=2022
|img1=Zombie.jpg
|description=Previously humans that have succumbed to the influence of Hell, they have transformed into mindless, grotesque contortions of their former selves
Standing at a mighty 156mm/6.1 inches tall, this officially licensed collectible is an exact replica to the in-game toys that you can find in DOOM Eternal
}}

Numskull Imp Collectible Figurine

2025-12-26T17:15:40Z

Rbutcher: Rbutcher moved page Numskull Imp Collectible Figure to Numskull Imp Collectible Figurine without leaving a redirect

{{Relic
|category=Doom Eternal
|subcat=Figures & Statues
|rarity=Common
|manufacturer=Numskull
|year=2021
|img1=Imp.png
|description=Known as one of the weakest demons in Hell, it’s easy to underestimate the power of the Imp - however, their true strength comes out in their sheer numbers
Standing at a mighty 150mm (5.9 inches) tall, this officially licensed collectable is an exact replica to the in-game toys that you can find in DOOM Eternal
}}

Numskull Cacodemon Collectible Figurine

2025-12-26T17:15:04Z

MediaWiki:Formstart

2025-12-26T16:53:35Z

Rbutcher: Created page with "Create a Relic Page"

Create a Relic Page

MediaWiki:Pf-start-form

2025-12-26T16:53:07Z

Rbutcher: Blanked the page

MediaWiki:Pf-start-form

2025-12-26T16:45:58Z

Rbutcher: Created page with "Create a Relic"

Create a Relic