MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/*
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║           HADES WIKI — MediaWiki Theme CSS                       ║
 * ║     The Free Encyclopedia of the Underworld                      ║
 * ║     Based on: Hades (2026) by Melanie Martinez                   ║
 * ║     Install in: MediaWiki:Common.css                             ║
 * ╚══════════════════════════════════════════════════════════════════╝
 */

/* ═══════════════════════════════════════════
   IMPORT FONTS
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700;900&family=IM+Fell+English:ital@0;1&display=swap');

/* ═══════════════════════════════════════════
   CSS CUSTOM PROPERTIES (Variables)
═══════════════════════════════════════════ */
:root {
  --hades-bg-deep:       #080200;
  --hades-bg-dark:       #0d0500;
  --hades-bg-mid:        #150700;
  --hades-bg-warm:       #1c0900;
  --hades-gold-bright:   #c8922a;
  --hades-gold-mid:      #a07828;
  --hades-gold-muted:    #8b6914;
  --hades-gold-dim:      #5a3e18;
  --hades-text-bright:   #d4c4a0;
  --hades-text-mid:      #c4b480;
  --hades-text-dim:      #8b7a50;
  --hades-red-accent:    #6b1a1a;
  --hades-border:        rgba(200, 146, 42, 0.25);
  --hades-border-strong: rgba(200, 146, 42, 0.6);
  --hades-shadow:        rgba(0, 0, 0, 0.7);
}

/* ═══════════════════════════════════════════
   KEYFRAME ANIMATIONS
═══════════════════════════════════════════ */
@keyframes hadesCandle {
  0%, 100% { opacity: 1; transform: scaleY(1) scaleX(1); filter: brightness(1); }
  15%       { opacity: 0.88; transform: scaleY(0.94) scaleX(1.04) skewX(2deg); filter: brightness(0.9); }
  30%       { opacity: 1; transform: scaleY(1.06) scaleX(0.96); filter: brightness(1.08); }
  45%       { opacity: 0.92; transform: scaleY(0.97) scaleX(1.02) skewX(-1deg); filter: brightness(0.95); }
  60%       { opacity: 1; transform: scaleY(1.03) scaleX(0.98); filter: brightness(1.04); }
  80%       { opacity: 0.9; transform: scaleY(0.95) scaleX(1.03) skewX(1deg); filter: brightness(0.92); }
}

@keyframes hadesGlow {
  0%, 100% {
    text-shadow: 0 0 15px rgba(200,146,42,0.3),
                 0 0 30px rgba(180,100,20,0.15),
                 0 0 2px rgba(255,220,120,0.5);
  }
  50% {
    text-shadow: 0 0 25px rgba(200,146,42,0.6),
                 0 0 50px rgba(180,100,20,0.3),
                 0 0 80px rgba(150,70,10,0.15),
                 0 0 3px rgba(255,230,140,0.8);
  }
}

@keyframes hadesBorderPulse {
  0%, 100% { border-color: rgba(200,146,42,0.2); }
  50%       { border-color: rgba(200,146,42,0.7); box-shadow: 0 0 12px rgba(200,146,42,0.15); }
}

@keyframes hadesShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes hadesFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(1deg); }
  66%       { transform: translateY(-4px) rotate(-0.5deg); }
}

@keyframes hadesParticle {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.8; }
  50%  { transform: translateY(-200px) translateX(20px) scale(0.6); opacity: 0.4; }
  100% { transform: translateY(-400px) translateX(-10px) scale(0.2); opacity: 0; }
}

@keyframes hadesFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hadesSlideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes hadesWaxDrip {
  0%   { height: 0px; opacity: 0.8; }
  100% { height: 24px; opacity: 0.3; }
}

@keyframes hadesOrnamentSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes hadesNavUnderline {
  from { width: 0; left: 50%; }
  to   { width: 100%; left: 0; }
}

@keyframes hadesSearchPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,146,42,0); }
  50%       { box-shadow: 0 0 0 3px rgba(200,146,42,0.15); }
}

@keyframes hadesRipple {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ═══════════════════════════════════════════
   GLOBAL BODY & BACKGROUND
═══════════════════════════════════════════ */
body,
html {
  background-color: var(--hades-bg-deep) !important;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(40,15,0,0.9) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 8 L44 32 L68 32 L49 47 L56 71 L40 56 L24 71 L31 47 L12 32 L36 32Z' fill='none' stroke='%23c8922a' stroke-width='0.3' opacity='0.05'/%3E%3C/svg%3E") !important;
  color: var(--hades-text-mid) !important;
  font-family: 'IM Fell English', Georgia, serif !important;
  min-height: 100vh;
}

/* Floating ember particles */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(200,146,42,0.6) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,100,20,0.4) 1px, transparent 1px);
  background-size: 300px 300px, 200px 200px;
  background-position: 0 0, 150px 100px;
  animation: hadesParticle 12s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.15;
}

/* ═══════════════════════════════════════════
   VECTOR SKIN — PAGE WRAPPER
═══════════════════════════════════════════ */
#mw-page-base,
#mw-head-base,
.mw-body,
.page-Main_Page .mw-body,
#content,
.vector-body,
.skin-vector-2022 .vector-body-container {
  background: transparent !important;
}

.mw-body {
  border: none !important;
  padding: 1.5em 2em !important;
  animation: hadesFadeIn 0.8s ease forwards;
}

/* ═══════════════════════════════════════════
   TOP NAVIGATION BAR (Article/Discussion tabs)
═══════════════════════════════════════════ */
#p-namespaces,
#p-views,
.vector-menu-tabs,
#left-navigation,
#right-navigation {
  background: linear-gradient(to bottom, #0f0600, #120800) !important;
  border: none !important;
}

/* Tab links */
#p-namespaces ul li a,
#p-views ul li a,
.vector-menu-tabs .vector-menu-content ul li a {
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--hades-gold-muted) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10.5px !important;
  letter-spacing: 2.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
  transition: all 0.25s ease !important;
  position: relative;
}

#p-namespaces ul li a:hover,
#p-views ul li a:hover,
.vector-menu-tabs .vector-menu-content ul li a:hover {
  color: var(--hades-gold-bright) !important;
  background: rgba(200,146,42,0.06) !important;
  border-bottom-color: rgba(200,146,42,0.5) !important;
}

/* Active tab */
#p-namespaces ul li.selected a,
#p-views ul li.selected a,
.vector-menu-tabs ul li.selected a {
  color: var(--hades-gold-bright) !important;
  border-bottom: 2px solid var(--hades-gold-bright) !important;
  background: none !important;
}

/* ═══════════════════════════════════════════
   SITE HEADER / LOGO AREA
═══════════════════════════════════════════ */
#mw-head,
#vector-page-toolbar,
.mw-header,
.vector-header {
  background: linear-gradient(135deg, #1c0900 0%, #150700 30%, #1a0a00 60%, #0f0500 100%) !important;
  border-bottom: 1px solid #2a1505 !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.6), 0 2px 0 rgba(200,146,42,0.15) !important;
  position: relative;
}

#mw-head::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--hades-gold-bright), transparent);
}

/* Logo */
#p-logo a,
.mw-logo {
  background-image: none !important;
  width: auto !important;
  height: auto !important;
}

#p-logo a::before,
.mw-logo::before {
  content: '♛';
  display: block;
  font-size: 32px;
  color: var(--hades-gold-bright);
  filter: drop-shadow(0 0 10px rgba(200,146,42,0.7));
  animation: hadesFloat 3.5s ease-in-out infinite;
  text-align: center;
}

/* Site name */
#p-logo a[title]::after {
  content: attr(title);
  display: block;
  font-family: 'Cinzel Decorative', serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 5px;
  background: linear-gradient(135deg, #8b5e1a 0%, #c8922a 35%, #f0d060 50%, #c8922a 65%, #8b5e1a 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hadesShimmer 4s linear infinite;
}

/* ═══════════════════════════════════════════
   SECONDARY NAVIGATION (Main page nav)
═══════════════════════════════════════════ */
#mw-panel,
.vector-sidebar,
.mw-sidebar {
  background: linear-gradient(to bottom, rgba(20,8,0,0.95), rgba(10,4,0,0.98)) !important;
  border-right: 1px solid #2a1505 !important;
  padding-top: 16px !important;
}

/* Sidebar headings */
.portal h3,
.mw-portlet h3,
.vector-menu-heading {
  background: linear-gradient(to right, rgba(200,146,42,0.15), transparent) !important;
  border-left: 3px solid var(--hades-gold-bright) !important;
  border-bottom: 1px solid rgba(200,146,42,0.2) !important;
  color: var(--hades-gold-bright) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
}

/* Sidebar links */
.portal ul li a,
.mw-portlet ul li a,
.vector-menu-content ul li a {
  color: var(--hades-gold-mid) !important;
  font-family: 'IM Fell English', serif !important;
  font-size: 13px !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  display: block !important;
  border-radius: 2px !important;
  transition: all 0.2s ease !important;
  border-left: 2px solid transparent !important;
}

.portal ul li a:hover,
.mw-portlet ul li a:hover,
.vector-menu-content ul li a:hover {
  color: var(--hades-gold-bright) !important;
  background: rgba(200,146,42,0.08) !important;
  border-left-color: var(--hades-gold-bright) !important;
  padding-left: 12px !important;
}

/* ═══════════════════════════════════════════
   SEARCH BAR
═══════════════════════════════════════════ */
#searchInput,
#searchform input[type="search"],
.vector-search-box input {
  background: rgba(255,255,255,0.93) !important;
  border: 1px solid #d4c4a0 !important;
  border-radius: 3px !important;
  color: #1a0800 !important;
  font-family: 'IM Fell English', serif !important;
  font-size: 13px !important;
  padding: 9px 14px 9px 38px !important;
  transition: all 0.3s ease !important;
  animation: hadesSearchPulse 4s ease-in-out infinite !important;
}

#searchInput:focus,
.vector-search-box input:focus {
  border-color: var(--hades-gold-bright) !important;
  box-shadow: 0 0 0 3px rgba(200,146,42,0.2), 0 4px 20px rgba(0,0,0,0.4) !important;
  outline: none !important;
}

/* Search button */
#searchButton,
.searchButton,
.vector-search-box button[type="submit"] {
  background: linear-gradient(135deg, var(--hades-gold-bright), #8b5e1a) !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  border-radius: 0 3px 3px 0 !important;
  transition: all 0.2s ease !important;
}

#searchButton:hover,
.vector-search-box button[type="submit"]:hover {
  background: linear-gradient(135deg, #f0d060, var(--hades-gold-bright)) !important;
  box-shadow: 0 0 15px rgba(200,146,42,0.4) !important;
}

/* ═══════════════════════════════════════════
   CANDLE DECORATION (Header pseudo-elements)
═══════════════════════════════════════════ */
#mw-head::before {
  content: '🕯 🕯 🕯 🕯';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  filter: drop-shadow(0 0 8px rgba(255,160,50,0.8));
  animation: hadesCandle 1.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
  letter-spacing: 4px;
}

/* ═══════════════════════════════════════════
   PAGE HEADINGS (h1, h2, h3, h4)
═══════════════════════════════════════════ */
/* Page title (h1) */
#firstHeading,
h1.firstHeading,
.page-header h1 {
  font-family: 'Cinzel Decorative', serif !important;
  font-size: clamp(24px, 5vw, 42px) !important;
  font-weight: 900 !important;
  color: var(--hades-gold-bright) !important;
  letter-spacing: 4px !important;
  animation: hadesGlow 4s ease-in-out infinite !important;
  border-bottom: 1px solid #3a2008 !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
  position: relative;
}

#firstHeading::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(to right, var(--hades-gold-bright), transparent);
}

/* Section headings h2 */
h2 {
  font-family: 'Cinzel', serif !important;
  color: var(--hades-gold-bright) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  border-bottom: 1px solid #3a2008 !important;
  padding-bottom: 8px !important;
  margin: 28px 0 14px !important;
  position: relative;
  transition: color 0.3s ease;
}

h2::before {
  content: '⚜';
  margin-right: 10px;
  opacity: 0.7;
  font-size: 14px;
}

h2:hover {
  color: #f0d060 !important;
}

h3 {
  font-family: 'Cinzel', serif !important;
  color: var(--hades-gold-mid) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  margin: 20px 0 10px !important;
  border-left: 3px solid rgba(200,146,42,0.4);
  padding-left: 10px;
}

h4, h5, h6 {
  font-family: 'Cinzel', serif !important;
  color: var(--hades-text-dim) !important;
  letter-spacing: 1px !important;
}

/* ═══════════════════════════════════════════
   BODY TEXT & PARAGRAPHS
═══════════════════════════════════════════ */
p, .mw-body p {
  font-family: 'IM Fell English', Georgia, serif !important;
  color: var(--hades-text-mid) !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  margin-bottom: 14px !important;
}

/* Lead paragraph */
.mw-body p:first-of-type {
  font-size: 14.5px !important;
  color: var(--hades-text-bright) !important;
}

/* Bold text */
b, strong {
  color: var(--hades-gold-bright) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.95em;
  letter-spacing: 0.5px;
}

/* Italic text */
i, em {
  color: var(--hades-text-dim) !important;
  font-style: italic !important;
}

/* ═══════════════════════════════════════════
   LINKS
═══════════════════════════════════════════ */
a, a:visited {
  color: var(--hades-gold-bright) !important;
  text-decoration: none !important;
  border-bottom: 1px dotted rgba(200,146,42,0.4) !important;
  transition: all 0.2s ease !important;
}

a:hover {
  color: #f0d060 !important;
  border-bottom-color: #f0d060 !important;
  text-shadow: 0 0 10px rgba(200,146,42,0.4) !important;
}

a.new, a.new:visited {
  color: #a04040 !important;
  border-bottom-color: rgba(160,64,64,0.4) !important;
}

a.new:hover {
  color: #d06060 !important;
}

/* External links */
a.external {
  background: none !important;
  padding-right: 0 !important;
}

a.external::after {
  content: ' ↗';
  font-size: 0.75em;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════
   TABLE OF CONTENTS
═══════════════════════════════════════════ */
#toc, .toc {
  background: linear-gradient(135deg, rgba(25,10,0,0.85), rgba(15,6,0,0.95)) !important;
  border: 1px solid rgba(200,146,42,0.25) !important;
  border-radius: 4px !important;
  padding: 16px !important;
  font-family: 'IM Fell English', serif !important;
  animation: hadesFloat 6s ease-in-out infinite !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important;
}

#toc h2, .toc h2,
#toctitle {
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  color: var(--hades-gold-bright) !important;
  border-bottom: 1px solid rgba(200,146,42,0.3) !important;
  text-align: center !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}

#toc h2::before,
#toctitle::before {
  content: '✦ ';
}

#toc h2::after,
#toctitle::after {
  content: ' ✦';
}

.toc ul {
  list-style: none !important;
  padding-left: 8px !important;
  margin: 0 !important;
}

.toc ul li a {
  color: var(--hades-gold-mid) !important;
  font-size: 13px !important;
  padding: 3px 6px !important;
  display: block !important;
  border-radius: 2px !important;
}

.toc ul li a:hover {
  color: var(--hades-gold-bright) !important;
  background: rgba(200,146,42,0.1) !important;
  border-bottom: none !important;
}

.toc ul li .tocnumber {
  color: var(--hades-gold-dim) !important;
  margin-right: 6px;
}

/* ═══════════════════════════════════════════
   INFOBOXES & TABLES
═══════════════════════════════════════════ */
.infobox,
table.wikitable,
.wikitable {
  background: linear-gradient(135deg, rgba(20,8,0,0.9) 0%, rgba(12,5,0,0.95) 100%) !important;
  border: 1px solid rgba(200,146,42,0.3) !important;
  border-radius: 4px !important;
  color: var(--hades-text-mid) !important;
  font-family: 'IM Fell English', serif !important;
  font-size: 13px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  animation: hadesBorderPulse 5s ease-in-out infinite !important;
  overflow: hidden !important;
}

.infobox caption,
.wikitable caption {
  font-family: 'Cinzel Decorative', serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--hades-gold-bright) !important;
  letter-spacing: 3px !important;
  padding: 12px 16px !important;
  background: linear-gradient(to right, rgba(200,146,42,0.15), rgba(200,146,42,0.05)) !important;
  border-bottom: 1px solid rgba(200,146,42,0.25) !important;
}

.infobox th, .wikitable th,
.infobox td.infobox-label {
  background: rgba(200,146,42,0.1) !important;
  color: var(--hades-gold-muted) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(200,146,42,0.15) !important;
}

.infobox td, .wikitable td,
.infobox td.infobox-data {
  color: var(--hades-text-mid) !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(200,146,42,0.08) !important;
}

.wikitable tr:hover td {
  background: rgba(200,146,42,0.06) !important;
  color: var(--hades-text-bright) !important;
}

/* ═══════════════════════════════════════════
   INFOBOX IMAGE
═══════════════════════════════════════════ */
.infobox-image,
.infobox td:has(img) {
  text-align: center !important;
  padding: 0 !important;
  background: rgba(10,4,0,0.8) !important;
}

.infobox-image img {
  border-radius: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
  max-width: 100% !important;
}

.infobox-image img:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 8px 40px rgba(200,146,42,0.2), 0 4px 20px rgba(0,0,0,0.8) !important;
}

/* ═══════════════════════════════════════════
   MEDIA / IMAGES
═══════════════════════════════════════════ */
.thumb {
  background: rgba(20,8,0,0.6) !important;
  border: 1px solid rgba(200,146,42,0.2) !important;
  padding: 6px !important;
  border-radius: 3px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.thumb:hover {
  border-color: rgba(200,146,42,0.6) !important;
  box-shadow: 0 0 20px rgba(200,146,42,0.15) !important;
}

.thumbcaption {
  color: var(--hades-text-dim) !important;
  font-family: 'IM Fell English', serif !important;
  font-style: italic !important;
  font-size: 12px !important;
  text-align: center !important;
  margin-top: 6px !important;
}

/* ═══════════════════════════════════════════
   BLOCKQUOTES & QUOTES
═══════════════════════════════════════════ */
blockquote {
  background: linear-gradient(135deg, rgba(30,12,0,0.6), rgba(20,8,0,0.4)) !important;
  border: 1px solid rgba(200,146,42,0.2) !important;
  border-left: 3px solid var(--hades-gold-bright) !important;
  padding: 14px 18px !important;
  margin: 20px 0 !important;
  border-radius: 0 4px 4px 0 !important;
  font-style: italic !important;
  color: var(--hades-text-bright) !important;
  animation: hadesBorderPulse 4s ease-in-out infinite !important;
  position: relative;
}

blockquote::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: 12px;
  font-size: 48px;
  color: var(--hades-gold-bright);
  opacity: 0.3;
  font-family: 'Cinzel Decorative', serif;
  line-height: 1;
}

/* ═══════════════════════════════════════════
   LISTS
═══════════════════════════════════════════ */
ul li, ol li {
  color: var(--hades-text-mid) !important;
  font-family: 'IM Fell English', serif !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  margin-bottom: 4px !important;
}

ul li::marker {
  color: var(--hades-gold-bright) !important;
  content: '✦  ';
}

ol li::marker {
  color: var(--hades-gold-muted) !important;
  font-family: 'Cinzel', serif;
  font-size: 11px;
}

/* ═══════════════════════════════════════════
   HORIZONTAL RULES
═══════════════════════════════════════════ */
hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, var(--hades-gold-bright), transparent) !important;
  margin: 24px 0 !important;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════
   EDIT SECTION BUTTONS
═══════════════════════════════════════════ */
.mw-editsection,
.editsection {
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
}

.mw-editsection a,
.editsection a {
  color: var(--hades-gold-dim) !important;
  border: 1px solid rgba(200,146,42,0.2) !important;
  border-radius: 2px !important;
  padding: 1px 6px !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  border-bottom: 1px solid rgba(200,146,42,0.2) !important;
  transition: all 0.2s ease !important;
}

.mw-editsection a:hover,
.editsection a:hover {
  color: var(--hades-gold-bright) !important;
  border-color: rgba(200,146,42,0.6) !important;
  background: rgba(200,146,42,0.08) !important;
}

/* ═══════════════════════════════════════════
   CATEGORIES
═══════════════════════════════════════════ */
#catlinks, .catlinks {
  background: linear-gradient(135deg, rgba(20,8,0,0.8), rgba(12,5,0,0.9)) !important;
  border: 1px solid rgba(200,146,42,0.2) !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  margin-top: 24px !important;
  font-family: 'IM Fell English', serif !important;
}

#catlinks a, .catlinks a {
  color: var(--hades-gold-mid) !important;
  font-size: 12px !important;
}

#catlinks a:hover, .catlinks a:hover {
  color: var(--hades-gold-bright) !important;
}

/* Category label */
#catlinks > div::before,
.catlinks > div::before {
  content: '⚜ Categories: ';
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--hades-gold-bright);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
#footer, .mw-footer {
  background: linear-gradient(to top, #060200, #0d0500) !important;
  border-top: 1px solid #2a1505 !important;
  color: #4a3010 !important;
  font-family: 'IM Fell English', serif !important;
  padding: 24px 40px !important;
  text-align: center !important;
  position: relative !important;
}

#footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--hades-gold-bright), transparent);
}

#footer a, .mw-footer a {
  color: #5a3e18 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  border-bottom: 1px dotted #3a2508 !important;
}

#footer a:hover, .mw-footer a:hover {
  color: var(--hades-gold-bright) !important;
  border-bottom-color: var(--hades-gold-bright) !important;
}

#footer-icons { display: none !important; }

/* ═══════════════════════════════════════════
   NOTIFICATION MESSAGES
═══════════════════════════════════════════ */
.mw-message-box,
.successbox, .errorbox, .warningbox {
  border-radius: 4px !important;
  font-family: 'IM Fell English', serif !important;
  padding: 12px 16px !important;
  border-left: 3px solid !important;
}

.successbox {
  background: rgba(20,50,20,0.4) !important;
  border-color: #4a8a4a !important;
  color: #a0d0a0 !important;
}

.errorbox {
  background: rgba(50,10,10,0.5) !important;
  border-color: #8a2020 !important;
  color: #d08080 !important;
}

.warningbox {
  background: rgba(50,30,5,0.5) !important;
  border-color: var(--hades-gold-muted) !important;
  color: var(--hades-text-mid) !important;
}

/* ═══════════════════════════════════════════
   DIFF PAGES (Editing)
═══════════════════════════════════════════ */
.diff-addedline {
  background: rgba(30,60,30,0.3) !important;
  color: #a0c080 !important;
}

.diff-deletedline {
  background: rgba(60,15,15,0.4) !important;
  color: #c08080 !important;
}

.diff-context {
  background: rgba(20,8,0,0.4) !important;
  color: var(--hades-text-dim) !important;
}

/* ═══════════════════════════════════════════
   EDIT TEXTAREA
═══════════════════════════════════════════ */
#wpTextbox1, textarea.mw-editfont-monospace {
  background: rgba(15,6,0,0.95) !important;
  color: var(--hades-text-bright) !important;
  border: 1px solid rgba(200,146,42,0.3) !important;
  border-radius: 3px !important;
  font-family: 'Courier New', monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  padding: 12px !important;
}

#wpTextbox1:focus {
  border-color: var(--hades-gold-bright) !important;
  box-shadow: 0 0 0 3px rgba(200,146,42,0.15) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.mw-ui-button, .mw-htmlform-submit,
input[type="submit"], input[type="button"],
button {
  background: linear-gradient(135deg, var(--hades-gold-bright), #8b5e1a) !important;
  border: 1px solid var(--hades-gold-bright) !important;
  color: #fff !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 8px 18px !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.mw-ui-button:hover, input[type="submit"]:hover {
  background: linear-gradient(135deg, #f0d060, var(--hades-gold-bright)) !important;
  box-shadow: 0 0 20px rgba(200,146,42,0.4), 0 4px 12px rgba(0,0,0,0.4) !important;
  transform: translateY(-1px) !important;
}

.mw-ui-button:active, input[type="submit"]:active {
  transform: translateY(0) !important;
}

/* Ripple on button click */
.mw-ui-button::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}

.mw-ui-button:active::after {
  animation: hadesRipple 0.5s ease forwards;
}

/* ═══════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0d0500; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--hades-gold-bright), #4a2a08);
  border-radius: 4px;
  border: 1px solid #2a1005;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #f0d060, var(--hades-gold-bright));
}

/* ═══════════════════════════════════════════
   TEXT SELECTION
═══════════════════════════════════════════ */
::selection {
  background: rgba(200,146,42,0.35) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════
   SPECIAL ARTICLE CLASSES (Main page)
═══════════════════════════════════════════ */
.hades-banner {
  background: linear-gradient(135deg, rgba(30,12,0,0.9), rgba(15,6,0,0.95));
  border: 1px solid rgba(200,146,42,0.3);
  border-radius: 4px;
  padding: 24px;
  text-align: center;
  margin-bottom: 28px;
  animation: hadesBorderPulse 4s ease-in-out infinite;
}

.hades-divider {
  text-align: center;
  color: var(--hades-gold-bright);
  font-size: 18px;
  letter-spacing: 12px;
  margin: 20px 0;
  opacity: 0.6;
}

.hades-quote {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--hades-text-dim);
  text-align: center;
  padding: 12px;
  position: relative;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  #mw-head::before { display: none; }
  .mw-body { padding: 1em !important; }
  #firstHeading { font-size: 24px !important; letter-spacing: 2px !important; }
  h2 { font-size: 15px !important; }
  .infobox { float: none !important; width: 100% !important; }
  #mw-panel, .vector-sidebar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}