MediaWiki:Common.css: Difference between revisions

Revision as of 22:31, 25 December 2025

/* 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/bg.png");
  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: 220px;
  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;
}
/* ==================================================
   3 CACODEMONS — ALWAYS VISIBLE, TOP BAND
   - All move RIGHT → LEFT very slow
   - Larger up/down bob
   - "Pause" segments (CSS fake pauses)
   - No mirroring
   ================================================== */

/* Don’t block clicks */
html::before,
html::after,
body::before{
  content:"";
  position: fixed;
  width: 120px;
  height: 120px;
  background: url("/index.php/Special:FilePath/Cacodemon.png") no-repeat center / contain;
  opacity: 0.95;
  pointer-events: none;

  /* FORCE visibility above all skin chrome */
  z-index: 999999;

  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;
}

/* All near top, slightly different heights */
html::before{ top: 34px;  animation: caco1 210s linear infinite; animation-delay: -25s; }
html::after { top: 70px;  animation: caco2 260s linear infinite; animation-delay: -120s; }
body::before{ top: 52px;  animation: caco3 300s linear infinite; animation-delay: -200s; }

/* ============ Animations ============ */
/* Note: We start at +110vw so they begin offscreen right,
   and travel to -220vw so they fully clear left. */

/* Demon 1 */
@keyframes caco1{
  0%   { transform: translateX(110vw) translateY(0); }
  12%  { transform: translateX(88vw)  translateY(-28px); }

  /* pause */
  18%  { transform: translateX(78vw)  translateY(34px); }
  24%  { transform: translateX(78vw)  translateY(-18px); }

  42%  { transform: translateX(52vw)  translateY(28px); }

  /* pause */
  48%  { transform: translateX(44vw)  translateY(-34px); }
  54%  { transform: translateX(44vw)  translateY(18px); }

  76%  { transform: translateX(12vw)  translateY(-30px); }
  100% { transform: translateX(-220vw) translateY(0); }
}

/* Demon 2 (different pause points) */
@keyframes caco2{
  0%   { transform: translateX(120vw) translateY(0); }
  10%  { transform: translateX(96vw)  translateY(30px); }

  /* pause */
  16%  { transform: translateX(84vw)  translateY(-36px); }
  23%  { transform: translateX(84vw)  translateY(14px); }

  46%  { transform: translateX(54vw)  translateY(-28px); }

  /* pause */
  52%  { transform: translateX(46vw)  translateY(34px); }
  60%  { transform: translateX(46vw)  translateY(-16px); }

  82%  { transform: translateX(10vw)  translateY(26px); }
  100% { transform: translateX(-240vw) translateY(0); }
}

/* Demon 3 (slowest, deeper bob) */
@keyframes caco3{
  0%   { transform: translateX(130vw) translateY(0); }
  14%  { transform: translateX(98vw)  translateY(-34px); }

  /* pause */
  20%  { transform: translateX(86vw)  translateY(40px); }
  28%  { transform: translateX(86vw)  translateY(-20px); }

  52%  { transform: translateX(52vw)  translateY(34px); }

  /* pause */
  58%  { transform: translateX(42vw)  translateY(-40px); }
  66%  { transform: translateX(42vw)  translateY(18px); }

  86%  { transform: translateX(8vw)   translateY(-32px); }
  100% { transform: translateX(-260vw) translateY(0); }
}

/* Mobile scale */
@media (max-width: 768px){
  html::before,
  html::after,
  body::before{
    width: 72px;
    height: 72px;
    opacity: 0.75;
  }
}
/* =========================
   Put CACODEMONS BEHIND UI
   ========================= */

/* Demons behind header/search */
html::before,
html::after,
body::before{
  z-index: 1 !important;   /* was huge; now behind most UI */
}

/* Ensure Vector 2022 header + search stay above demons */
.skin-vector-2022 .vector-header,
.skin-vector-2022 #vector-search-box,
.skin-vector-2022 .vector-search-box,
.skin-vector-2022 .vector-search-box-vue,
.skin-vector-2022 #searchform{
  position: relative;
  z-index: 50 !important;
}

/* Ensure legacy Vector search stays above demons */
.skin-vector #mw-head,
.skin-vector #p-search,
.skin-vector #simpleSearch,
.skin-vector #searchform{
  position: relative;
  z-index: 50 !important;
}
/* ==========================================
   FORCE DEMONS BEHIND *ALL* PAGE CONTENT
   ========================================== */

/* Demons: always behind content */
html::before,
html::after,
body::before,
body::after{
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Put the entire page UI/content above them (Vector 2022) */
.skin-vector-2022 .mw-page-container,
.skin-vector-2022 .mw-content-container,
.skin-vector-2022 #content,
.skin-vector-2022 .mw-body,
.skin-vector-2022 .vector-header{
  position: relative;
  z-index: 10 !important;
}

/* Put the entire page UI/content above them (Vector legacy) */
.skin-vector #mw-page-base,
.skin-vector #mw-head,
.skin-vector #content,
.skin-vector .mw-body,
.skin-vector #mw-panel{
  position: relative;
  z-index: 10 !important;
}
/* ==================================================
   3 CACODEMONS — TOP BAND — RIGHT → LEFT (SLOW)
   Includes:
   (1) heat-haze shimmer (blur change)
   (2) ember glow pulse (drop-shadow change)
   (3) fog layer near top
   All behind UI, never blocks clicks
   ================================================== */

/* ---- Fog layer (Effect #3) ---- */
body::after{
  content:"";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 260px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(255,90,0,0.14), rgba(0,0,0,0) 60%),
    radial-gradient(ellipse at 70% 30%, rgba(255,120,0,0.10), rgba(0,0,0,0) 62%),
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0));
}

/* ---- Demons (3) ---- */
html::before,
html::after,
body::before{
  content:"";
  position: fixed;
  width: 120px;
  height: 120px;
  background: url("/index.php/Special:FilePath/Cacodemon.png") no-repeat center / contain;
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;              /* behind everything */
  will-change: transform, filter;
}

/* Keep all site UI above demons */
.skin-vector-2022 .mw-page-container,
.skin-vector-2022 .vector-header,
.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;
}

/* Top band heights */
html::before{ top: 36px;  animation: cacoFX1 240s linear infinite; }
html::after { top: 62px;  animation: cacoFX2 300s linear infinite; }
body::before{ top: 88px;  animation: cacoFX3 360s linear infinite; }

/* Spread them out immediately */
html::before{ animation-delay: -40s; }
html::after { animation-delay: -160s; }
body::before{ animation-delay: -260s; }

/* ===== KEYFRAMES (movement + pause + bob + glow+haze) ===== */
/* Right → Left uses translateX from +110vw to -220vw */

@keyframes cacoFX1{
  0%   { transform: translateX(110vw) translateY(0);     filter: drop-shadow(0 0 10px rgba(255,90,0,0.30)) drop-shadow(0 10px 14px rgba(0,0,0,0.45)) blur(0.2px); }
  10%  { transform: translateX(92vw)  translateY(-26px); filter: drop-shadow(0 0 16px rgba(255,120,0,0.55)) drop-shadow(0 12px 18px rgba(0,0,0,0.55)) blur(0.6px); }

  /* pause hold */
  18%  { transform: translateX(80vw)  translateY(30px);  filter: drop-shadow(0 0 12px rgba(255,90,0,0.40)) drop-shadow(0 10px 14px rgba(0,0,0,0.48)) blur(0.35px); }
  26%  { transform: translateX(80vw)  translateY(-18px); filter: drop-shadow(0 0 18px rgba(255,120,0,0.60)) drop-shadow(0 12px 18px rgba(0,0,0,0.58)) blur(0.7px); }

  46%  { transform: translateX(52vw)  translateY(28px);  filter: drop-shadow(0 0 12px rgba(255,90,0,0.38)) drop-shadow(0 10px 14px rgba(0,0,0,0.46)) blur(0.3px); }

  /* pause hold */
  54%  { transform: translateX(44vw)  translateY(-34px); filter: drop-shadow(0 0 18px rgba(255,120,0,0.62)) drop-shadow(0 12px 18px rgba(0,0,0,0.58)) blur(0.75px); }
  62%  { transform: translateX(44vw)  translateY(16px);  filter: drop-shadow(0 0 12px rgba(255,90,0,0.36)) drop-shadow(0 10px 14px rgba(0,0,0,0.46)) blur(0.35px); }

  84%  { transform: translateX(10vw)  translateY(-30px); filter: drop-shadow(0 0 16px rgba(255,120,0,0.55)) drop-shadow(0 12px 18px rgba(0,0,0,0.55)) blur(0.6px); }
  100% { transform: translateX(-220vw) translateY(0);    filter: drop-shadow(0 0 10px rgba(255,90,0,0.30)) drop-shadow(0 10px 14px rgba(0,0,0,0.45)) blur(0.2px); }
}

@keyframes cacoFX2{
  0%   { transform: translateX(120vw) translateY(0);     filter: drop-shadow(0 0 10px rgba(255,90,0,0.28)) drop-shadow(0 10px 14px rgba(0,0,0,0.45)) blur(0.2px); }
  12%  { transform: translateX(96vw)  translateY(32px);  filter: drop-shadow(0 0 16px rgba(255,120,0,0.55)) drop-shadow(0 12px 18px rgba(0,0,0,0.55)) blur(0.65px); }

  /* pause hold */
  20%  { transform: translateX(82vw)  translateY(-38px); filter: drop-shadow(0 0 18px rgba(255,120,0,0.62)) drop-shadow(0 12px 18px rgba(0,0,0,0.58)) blur(0.8px); }
  28%  { transform: translateX(82vw)  translateY(14px);  filter: drop-shadow(0 0 12px rgba(255,90,0,0.36)) drop-shadow(0 10px 14px rgba(0,0,0,0.46)) blur(0.3px); }

  52%  { transform: translateX(52vw)  translateY(-30px); filter: drop-shadow(0 0 16px rgba(255,120,0,0.55)) drop-shadow(0 12px 18px rgba(0,0,0,0.55)) blur(0.6px); }

  /* pause hold */
  60%  { transform: translateX(42vw)  translateY(36px);  filter: drop-shadow(0 0 12px rgba(255,90,0,0.38)) drop-shadow(0 10px 14px rgba(0,0,0,0.46)) blur(0.35px); }
  68%  { transform: translateX(42vw)  translateY(-18px); filter: drop-shadow(0 0 18px rgba(255,120,0,0.62)) drop-shadow(0 12px 18px rgba(0,0,0,0.58)) blur(0.75px); }

  88%  { transform: translateX(8vw)   translateY(28px);  filter: drop-shadow(0 0 16px rgba(255,120,0,0.55)) drop-shadow(0 12px 18px rgba(0,0,0,0.55)) blur(0.6px); }
  100% { transform: translateX(-240vw) translateY(0);    filter: drop-shadow(0 0 10px rgba(255,90,0,0.28)) drop-shadow(0 10px 14px rgba(0,0,0,0.45)) blur(0.2px); }
}

@keyframes cacoFX3{
  0%   { transform: translateX(130vw) translateY(0);     filter: drop-shadow(0 0 10px rgba(255,90,0,0.30)) drop-shadow(0 10px 14px rgba(0,0,0,0.45)) blur(0.2px); }
  14%  { transform: translateX(100vw) translateY(-34px); filter: drop-shadow(0 0 16px rgba(255,120,0,0.55)) drop-shadow(0 12px 18px rgba(0,0,0,0.55)) blur(0.7px); }

  /* pause hold */
  22%  { transform: translateX(86vw)  translateY(44px);  filter: drop-shadow(0 0 18px rgba(255,120,0,0.62)) drop-shadow(0 12px 18px rgba(0,0,0,0.58)) blur(0.85px); }
  32%  { transform: translateX(86vw)  translateY(-20px); filter: drop-shadow(0 0 12px rgba(255,90,0,0.36)) drop-shadow(0 10px 14px rgba(0,0,0,0.46)) blur(0.35px); }

  58%  { transform: translateX(52vw)  translateY(36px);  filter: drop-shadow(0 0 16px rgba(255,120,0,0.55)) drop-shadow(0 12px 18px rgba(0,0,0,0.55)) blur(0.6px); }

  /* pause hold */
  66%  { transform: translateX(40vw)  translateY(-46px); filter: drop-shadow(0 0 18px rgba(255,120,0,0.62)) drop-shadow(0 12px 18px rgba(0,0,0,0.58)) blur(0.9px); }
  76%  { transform: translateX(40vw)  translateY(18px);  filter: drop-shadow(0 0 12px rgba(255,90,0,0.36)) drop-shadow(0 10px 14px rgba(0,0,0,0.46)) blur(0.35px); }

  92%  { transform: translateX(6vw)   translateY(-34px); filter: drop-shadow(0 0 16px rgba(255,120,0,0.55)) drop-shadow(0 12px 18px rgba(0,0,0,0.55)) blur(0.65px); }
  100% { transform: translateX(-260vw) translateY(0);    filter: drop-shadow(0 0 10px rgba(255,90,0,0.30)) drop-shadow(0 10px 14px rgba(0,0,0,0.45)) blur(0.2px); }
}

/* Mobile scale */
@media (max-width: 768px){
  html::before,
  html::after,
  body::before{
    width: 72px;
    height: 72px;
    opacity: 0.75;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html::before,
  html::after,
  body::before{ animation: none !important; display: none !important; }
  body::after{ display: none !important; }
}