HADES - User contributions [en]

MediaWiki:Common.js

2026-04-15T01:20:49Z

Possession:

/* ================================================================
H A D E S — MediaWiki:Common.js
Ambient visual layer: candles, gothic arches, rose petals,
sacred hearts, damask motifs, wax drips, dust motes
================================================================ */

( function () {
'use strict';

/* ── FONT PRELOAD ─────────────────────────────────────────── */
function preloadFonts() {
if ( document.getElementById( 'hades-fonts' ) ) { return; }
var link = document.createElement( 'link' );
link.id = 'hades-fonts';
link.rel = 'stylesheet';
link.href = 'https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700&family=IM+Fell+English:ital@0;1&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=UnifrakturMaguntia&family=Playfair+Display+SC:wght@400;700&family=Petit+Formal+Script&display=swap';
document.head.appendChild( link );
}

/* ── SVG LIBRARY ──────────────────────────────────────────── */
var SVG = {

/* Tall pillar candle with dripping wax */
candleTall: [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 200" width="44" height="146">',
/* flame */
'<g style="animation:h-flame-dance 0.8s ease-in-out infinite;transform-origin:30px 22px">',
'<ellipse cx="30" cy="28" rx="7" ry="14" fill="#ff7010" opacity="0.9"/>',
'<ellipse cx="30" cy="30" rx="4" ry="10" fill="#f8c840" opacity="0.95"/>',
'<ellipse cx="30" cy="32" rx="2" ry="5" fill="#ffffff" opacity="0.7"/>',
/* glow halo */
'<ellipse cx="30" cy="28" rx="14" ry="18" fill="#f8c840" opacity="0.08"/>',
'</g>',
/* wick */
'<line x1="30" y1="40" x2="30" y2="50" stroke="#3a2010" stroke-width="1.5"/>',
/* wax body */
'<rect x="18" y="48" width="24" height="130" rx="3" fill="#f2ede0"/>',
'<rect x="20" y="50" width="4" height="128" rx="1" fill="#ffffff" opacity="0.15"/>',
/* drips */
'<path d="M22,50 Q20,60 21,75 Q22,82 22,90" stroke="#e8e0cc" stroke-width="3" fill="none" stroke-linecap="round"/>',
'<path d="M36,50 Q38,65 37,78" stroke="#e8e0cc" stroke-width="2.5" fill="none" stroke-linecap="round"/>',
'<path d="M28,48 Q27,58 28,68" stroke="#f0e8d0" stroke-width="2" fill="none" stroke-linecap="round"/>',
'<ellipse cx="21" cy="90" rx="2.5" ry="3.5" fill="#d8d0c0"/>',
'<ellipse cx="37" cy="78" rx="2" ry="3" fill="#d8d0c0"/>',
/* base puddle */
'<ellipse cx="30" cy="180" rx="18" ry="6" fill="#d8d0c0" opacity="0.6"/>',
'<rect x="16" y="174" width="28" height="8" rx="3" fill="#c8c0b0"/>',
'</svg>'
].join( '' ),

/* Short stubby candle, more wax pooled */
candleShort: [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 120" width="36" height="86">',
'<g style="animation:h-flame-dance 1.1s ease-in-out infinite;transform-origin:25px 18px">',
'<ellipse cx="25" cy="22" rx="5" ry="10" fill="#ff7010" opacity="0.85"/>',
'<ellipse cx="25" cy="24" rx="3" ry="7" fill="#f8c840" opacity="0.95"/>',
'<ellipse cx="25" cy="25" rx="1.5" ry="4" fill="#ffffff" opacity="0.6"/>',
'<ellipse cx="25" cy="22" rx="10" ry="14" fill="#f8c840" opacity="0.07"/>',
'</g>',
'<line x1="25" y1="32" x2="25" y2="40" stroke="#3a2010" stroke-width="1.5"/>',
'<rect x="14" y="38" width="22" height="65" rx="4" fill="#f0ece0"/>',
'<rect x="16" y="40" width="3" height="62" rx="1" fill="#ffffff" opacity="0.12"/>',
'<path d="M18,40 Q16,55 17,70 Q17,78 16,85" stroke="#e0d8c4" stroke-width="3" fill="none" stroke-linecap="round"/>',
'<ellipse cx="16" cy="85" rx="2.5" ry="3" fill="#ccc4b0"/>',
/* large wax pool */
'<ellipse cx="25" cy="106" rx="22" ry="7" fill="#ddd8c8" opacity="0.7"/>',
'<rect x="10" y="100" width="30" height="10" rx="4" fill="#c8c0b0"/>',
'</svg>'
].join( '' ),

/* Cluster of 3 candles on a holder */
candleCluster: [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 200" width="100" height="167">',
/* left candle */
'<g transform="translate(10,20)">',
'<g style="animation:h-flame-dance 0.9s 0.2s ease-in-out infinite;transform-origin:20px 16px">',
'<ellipse cx="20" cy="18" rx="5" ry="11" fill="#ff8020" opacity="0.9"/>',
'<ellipse cx="20" cy="20" rx="3" ry="7" fill="#f8c840"/>',
'<ellipse cx="20" cy="22" rx="1.5" ry="4" fill="#fff" opacity="0.6"/>',
'<ellipse cx="20" cy="18" rx="10" ry="14" fill="#f8c840" opacity="0.07"/>',
'</g>',
'<line x1="20" y1="28" x2="20" y2="35" stroke="#3a2010" stroke-width="1"/>',
'<rect x="12" y="33" width="16" height="100" rx="3" fill="#f2ede0"/>',
'<path d="M14,35 Q12,50 13,70" stroke="#e0d8c4" stroke-width="2.5" fill="none" stroke-linecap="round"/>',
'</g>',
/* centre candle (taller) */
'<g transform="translate(40,0)">',
'<g style="animation:h-flame-dance 0.7s ease-in-out infinite;transform-origin:20px 18px">',
'<ellipse cx="20" cy="20" rx="6" ry="14" fill="#ff6010" opacity="0.95"/>',
'<ellipse cx="20" cy="23" rx="4" ry="9" fill="#f8c840"/>',
'<ellipse cx="20" cy="25" rx="2" ry="5" fill="#fff" opacity="0.7"/>',
'<ellipse cx="20" cy="20" rx="14" ry="18" fill="#f8c840" opacity="0.08"/>',
'</g>',
'<line x1="20" y1="32" x2="20" y2="40" stroke="#3a2010" stroke-width="1.5"/>',
'<rect x="11" y="38" width="18" height="130" rx="3" fill="#f0ece0"/>',
'<path d="M13,40 Q11,60 12,85" stroke="#e0d8c4" stroke-width="3" fill="none" stroke-linecap="round"/>',
'<ellipse cx="12" cy="85" rx="2.5" ry="3.5" fill="#ccc4b0"/>',
'</g>',
/* right candle */
'<g transform="translate(76,28)">',
'<g style="animation:h-flame-dance 1.0s 0.5s ease-in-out infinite;transform-origin:18px 15px">',
'<ellipse cx="18" cy="16" rx="4" ry="9" fill="#ff7018" opacity="0.85"/>',
'<ellipse cx="18" cy="18" rx="3" ry="6" fill="#f8c840"/>',
'<ellipse cx="18" cy="20" rx="1.5" ry="3.5" fill="#fff" opacity="0.55"/>',
'<ellipse cx="18" cy="16" rx="9" ry="13" fill="#f8c840" opacity="0.06"/>',
'</g>',
'<line x1="18" y1="25" x2="18" y2="32" stroke="#3a2010" stroke-width="1"/>',
'<rect x="10" y="30" width="15" height="90" rx="3" fill="#f2ede0"/>',
'<path d="M22,32 Q24,48 23,62" stroke="#e0d8c4" stroke-width="2.5" fill="none" stroke-linecap="round"/>',
'</g>',
/* shared base plate */
'<rect x="4" y="170" width="112" height="14" rx="4" fill="#8a6030"/>',
'<rect x="2" y="183" width="116" height="8" rx="3" fill="#6a4820"/>',
'<ellipse cx="60" cy="191" rx="58" ry="6" fill="#4a3010" opacity="0.5"/>',
'</svg>'
].join( '' ),

/* Gothic pointed arch frame */
gothicArch: [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150" width="90" height="135">',
'<path d="M10,150 L10,70 Q10,5 50,5 Q90,5 90,70 L90,150" fill="none" stroke="#c8860a" stroke-width="1.5" opacity="0.7"/>',
/* inner arch */
'<path d="M18,150 L18,74 Q18,20 50,20 Q82,20 82,74 L82,150" fill="none" stroke="#e8b030" stroke-width="0.8" opacity="0.4"/>',
/* keystone ornament */
'<ellipse cx="50" cy="8" rx="6" ry="7" fill="none" stroke="#c8860a" stroke-width="1.2" opacity="0.7"/>',
'<circle cx="50" cy="8" r="2.5" fill="#c8860a" opacity="0.6"/>',
/* column capitals */
'<rect x="4" y="140" width="14" height="10" rx="1" fill="#8a5a18" opacity="0.5"/>',
'<rect x="82" y="140" width="14" height="10" rx="1" fill="#8a5a18" opacity="0.5"/>',
/* tracery at top */
'<path d="M35,35 Q50,18 65,35" fill="none" stroke="#c8860a" stroke-width="0.8" opacity="0.35"/>',
'<circle cx="50" cy="30" r="4" fill="none" stroke="#e8b030" stroke-width="0.8" opacity="0.4"/>',
'</svg>'
].join( '' ),

/* Sacred heart */
sacredHeart: [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" width="70" height="79">',
/* heart body */
'<path d="M40,70 C20,55 5,45 5,28 C5,16 14,8 25,8 C31,8 37,11 40,16 C43,11 49,8 55,8 C66,8 75,16 75,28 C75,45 60,55 40,70Z" fill="#a84858" opacity="0.8"/>',
/* light overlay */
'<path d="M25,14 Q30,10 35,16" stroke="#f0b0c0" stroke-width="2" fill="none" opacity="0.5"/>',
/* flames on top */
'<g transform="translate(33,-2)">',
'<path d="M7,10 Q5,4 7,0 Q9,4 7,10Z" fill="#f8c840" opacity="0.9"/>',
'<path d="M14,12 Q12,5 14,1 Q16,5 14,12Z" fill="#ff7010" opacity="0.85"/>',
'<path d="M21,10 Q19,4 21,0 Q23,4 21,10Z" fill="#f8c840" opacity="0.9"/>',
'</g>',
/* crown */
'<g transform="translate(22,-5)">',
'<path d="M0,12 L0,0 L9,5 L18,0 L27,5 L36,0 L36,12Z" fill="none" stroke="#e8b030" stroke-width="1" opacity="0.7"/>',
'<circle cx="9" cy="5" r="2" fill="#e8b030" opacity="0.7"/>',
'<circle cx="18" cy="0" r="2.5" fill="#f8d060" opacity="0.8"/>',
'<circle cx="27" cy="5" r="2" fill="#e8b030" opacity="0.7"/>',
'</g>',
/* thorns / ring */
'<circle cx="40" cy="35" r="18" fill="none" stroke="#3a1e0c" stroke-width="1.5" stroke-dasharray="3,4" opacity="0.6"/>',
'</svg>'
].join( '' ),

/* Baroque damask ornament */
damask: [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="90" height="90">',
'<g fill="none" stroke="#c8860a" stroke-width="0.6" opacity="0.8">',
'<ellipse cx="50" cy="50" rx="8" ry="8"/>',
'<ellipse cx="50" cy="22" rx="5" ry="16"/>',
'<ellipse cx="50" cy="78" rx="5" ry="16"/>',
'<ellipse cx="22" cy="50" rx="16" ry="5"/>',
'<ellipse cx="78" cy="50" rx="16" ry="5"/>',
'<path d="M50,34 Q60,42 50,50 Q40,42 50,34Z"/>',
'<path d="M50,66 Q60,58 50,50 Q40,58 50,66Z"/>',
'<path d="M34,50 Q42,60 50,50 Q42,40 34,50Z"/>',
'<path d="M66,50 Q58,60 50,50 Q58,40 66,50Z"/>',
'<circle cx="50" cy="10" r="3"/>',
'<circle cx="50" cy="90" r="3"/>',
'<circle cx="10" cy="50" r="3"/>',
'<circle cx="90" cy="50" r="3"/>',
'<path d="M38,38 Q50,30 62,38 Q70,50 62,62 Q50,70 38,62 Q30,50 38,38Z"/>',
'</g>',
'</svg>'
].join( '' ),

/* Rose petal */
petal: [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 36" width="18" height="27">',
'<path d="M12,2 Q20,8 20,20 Q20,32 12,34 Q4,32 4,20 Q4,8 12,2Z" fill="#c06070" opacity="0.7"/>',
'<path d="M12,6 Q16,12 15,22" stroke="#e090a0" stroke-width="0.8" fill="none" opacity="0.5"/>',
'</svg>'
].join( '' ),

/* Ornate candelabra */
candelabra: [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 260" width="130" height="211">',
/* left arm candle */
'<g transform="translate(4,30)">',
'<g style="animation:h-flame-dance 0.85s 0.1s ease-in-out infinite;transform-origin:18px 16px">',
'<ellipse cx="18" cy="18" rx="5" ry="12" fill="#ff7010" opacity="0.9"/>',
'<ellipse cx="18" cy="20" rx="3" ry="8" fill="#f8c840"/>',
'<ellipse cx="18" cy="22" rx="2" ry="4" fill="#fff" opacity="0.6"/>',
'<ellipse cx="18" cy="18" rx="12" ry="16" fill="#f8c840" opacity="0.06"/>',
'</g>',
'<line x1="18" y1="30" x2="18" y2="36" stroke="#3a2010" stroke-width="1.2"/>',
'<rect x="11" y="34" width="14" height="80" rx="3" fill="#f0ece0"/>',
'<path d="M12,36 Q10,55 11,72" stroke="#e0d8c4" stroke-width="2.5" fill="none" stroke-linecap="round"/>',
'</g>',
/* right arm candle */
'<g transform="translate(134,30)">',
'<g style="animation:h-flame-dance 1.05s 0.3s ease-in-out infinite;transform-origin:18px 16px">',
'<ellipse cx="18" cy="18" rx="5" ry="12" fill="#ff7010" opacity="0.9"/>',
'<ellipse cx="18" cy="20" rx="3" ry="8" fill="#f8c840"/>',
'<ellipse cx="18" cy="22" rx="2" ry="4" fill="#fff" opacity="0.6"/>',
'<ellipse cx="18" cy="18" rx="12" ry="16" fill="#f8c840" opacity="0.06"/>',
'</g>',
'<line x1="18" y1="30" x2="18" y2="36" stroke="#3a2010" stroke-width="1.2"/>',
'<rect x="11" y="34" width="14" height="80" rx="3" fill="#f0ece0"/>',
'<path d="M24,36 Q26,55 25,72" stroke="#e0d8c4" stroke-width="2.5" fill="none" stroke-linecap="round"/>',
'</g>',
/* centre tall candle */
'<g transform="translate(62,0)">',
'<g style="animation:h-flame-dance 0.7s ease-in-out infinite;transform-origin:18px 20px">',
'<ellipse cx="18" cy="20" rx="7" ry="16" fill="#ff6010" opacity="0.95"/>',
'<ellipse cx="18" cy="23" rx="4" ry="10" fill="#f8c840"/>',
'<ellipse cx="18" cy="26" rx="2" ry="6" fill="#fff" opacity="0.7"/>',
'<ellipse cx="18" cy="20" rx="16" ry="22" fill="#f8c840" opacity="0.08"/>',
'</g>',
'<line x1="18" y1="36" x2="18" y2="44" stroke="#3a2010" stroke-width="1.5"/>',
'<rect x="10" y="42" width="16" height="120" rx="3" fill="#f2ede0"/>',
'<path d="M11,44 Q9,68 10,95" stroke="#e0d8c4" stroke-width="3" fill="none" stroke-linecap="round"/>',
'<ellipse cx="10" cy="95" rx="2.5" ry="3.5" fill="#ccc4b0"/>',
'</g>',
/* arms */
'<path d="M80,90 Q30,80 22,60" fill="none" stroke="#8a6030" stroke-width="3" stroke-linecap="round"/>',
'<path d="M80,90 Q130,80 152,60" fill="none" stroke="#8a6030" stroke-width="3" stroke-linecap="round"/>',
/* stem */
'<rect x="74" y="160" width="12" height="70" rx="4" fill="#7a5020"/>',
'<ellipse cx="80" cy="162" rx="12" ry="6" fill="#8a6030"/>',
/* base */
'<ellipse cx="80" cy="236" rx="45" ry="12" fill="#6a4020" opacity="0.7"/>',
'<rect x="50" y="228" width="60" height="10" rx="4" fill="#8a5820"/>',
'</svg>'
].join( '' ),

/* Mirror silhouette (album cover gothic arch mirror) */
mirrorSilhouette: [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 160" width="80" height="128">',
/* outer frame */
'<path d="M8,160 L8,80 Q8,5 50,5 Q92,5 92,80 L92,160" fill="none" stroke="#8a5a18" stroke-width="3" opacity="0.6"/>',
/* inner mirror */
'<path d="M16,158 L16,82 Q16,18 50,18 Q84,18 84,82 L84,158" fill="rgba(10,5,2,0.5)" stroke="#c8860a" stroke-width="1" opacity="0.5"/>',
/* glow inside mirror */
'<path d="M16,158 L16,82 Q16,18 50,18 Q84,18 84,82 L84,158 Z" fill="url(#mirrorGlow)" opacity="0.3"/>',
'<defs><radialGradient id="mirrorGlow" cx="50%" cy="60%"><stop offset="0%" stop-color="#f8c840" stop-opacity="0.15"/><stop offset="100%" stop-color="#f8c840" stop-opacity="0"/></radialGradient></defs>',
/* spire ornaments */
'<path d="M8,80 L8,50 L14,30 L20,50 L20,80" fill="none" stroke="#8a5a18" stroke-width="1.5" opacity="0.5"/>',
'<path d="M80,80 L80,50 L86,30 L92,50 L92,80" fill="none" stroke="#8a5a18" stroke-width="1.5" opacity="0.5"/>',
/* keystone */
'<ellipse cx="50" cy="8" rx="7" ry="8" fill="none" stroke="#c8860a" stroke-width="1.5" opacity="0.6"/>',
'<circle cx="50" cy="8" r="3" fill="#c8860a" opacity="0.5"/>',
/* base shelf */
'<rect x="2" y="152" width="96" height="10" rx="2" fill="#6a4820" opacity="0.5"/>',
/* sacred heart base motif */
'<path d="M50,148 C44,143 38,140 38,134 C38,130 41,127 45,127 C47,127 49,128 50,130 C51,128 53,127 55,127 C59,127 62,130 62,134 C62,140 56,143 50,148Z" fill="#a84858" opacity="0.4"/>',
'</svg>'
].join( '' ),

/* Wax drip trail */
waxDrip: [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 120" width="24" height="96">',
'<path d="M15,0 Q18,20 17,35 Q16,55 18,70 Q20,85 15,100 Q10,85 12,70 Q14,55 13,35 Q12,20 15,0Z" fill="#f2ede0" opacity="0.7"/>',
'<ellipse cx="15" cy="100" rx="8" ry="6" fill="#e8e0cc" opacity="0.6"/>',
'</svg>'
].join( '' ),

/* Ornate key */
key: [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 120" width="30" height="90">',
'<circle cx="20" cy="20" r="14" fill="none" stroke="#c8860a" stroke-width="2" opacity="0.8"/>',
'<circle cx="20" cy="20" r="7" fill="none" stroke="#e8b030" stroke-width="1" opacity="0.6"/>',
'<circle cx="20" cy="20" r="3" fill="#c8860a" opacity="0.7"/>',
'<rect x="18" y="34" width="4" height="80" rx="1" fill="#c8860a" opacity="0.7"/>',
'<rect x="22" y="80" width="12" height="4" rx="1" fill="#c8860a" opacity="0.7"/>',
'<rect x="22" y="94" width="9" height="4" rx="1" fill="#c8860a" opacity="0.7"/>',
'</svg>'
].join( '' ),

/* Crown */
crown: [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" width="100" height="67">',
'<path d="M5,75 L5,35 L25,10 L40,35 L60,5 L80,35 L95,10 L115,35 L115,75 Z" fill="none" stroke="#c8860a" stroke-width="2" stroke-linejoin="round" opacity="0.7"/>',
'<path d="M5,60 L115,60" stroke="#e8b030" stroke-width="1" opacity="0.5"/>',
'<circle cx="25" cy="13" r="4" fill="#e8b030" opacity="0.7"/>',
'<circle cx="60" cy="7" r="5" fill="#f8d060" opacity="0.8"/>',
'<circle cx="95" cy="13" r="4" fill="#e8b030" opacity="0.7"/>',
'<circle cx="40" cy="36" r="3" fill="#d08090" opacity="0.6"/>',
'<circle cx="80" cy="36" r="3" fill="#d08090" opacity="0.6"/>',
'<rect x="5" y="68" width="110" height="8" rx="2" fill="#8a5a18" opacity="0.4"/>',
'</svg>'
].join( '' ),

/* Floating rose */
rose: [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">',
'<circle cx="30" cy="30" r="10" fill="#a84858" opacity="0.8"/>',
'<path d="M30,20 Q38,24 36,32 Q30,38 22,32 Q20,24 30,20Z" fill="#c06070" opacity="0.7"/>',
'<path d="M30,20 Q22,24 24,32 Q30,38 38,32 Q40,24 30,20Z" fill="#b05060" opacity="0.7"/>',
'<path d="M30,14 Q40,18 40,28 Q40,38 30,42 Q20,38 20,28 Q20,18 30,14Z" fill="none" stroke="#d08090" stroke-width="0.8" opacity="0.5"/>',
'<path d="M30,8 Q44,14 44,30 Q44,46 30,50 Q16,46 16,30 Q16,14 30,8Z" fill="none" stroke="#c06070" stroke-width="0.6" opacity="0.4"/>',
'<path d="M30,50 L30,60" stroke="#3a1e0c" stroke-width="1.5"/>',
'<path d="M24,56 Q30,52 36,56" stroke="#2a1808" stroke-width="1" fill="none"/>',
'</svg>'
].join( '' )
};

/* ── HELPERS ──────────────────────────────────────────────── */
function rand( a, b ) { return Math.random() * ( b - a ) + a; }
function randInt( a, b ) { return Math.floor( rand( a, b + 1 ) ); }

/* ── BUILD LAYER ──────────────────────────────────────────── */
function createLayer() {
var div = document.createElement( 'div' );
div.className = 'h-ambient';
div.id = 'hades-ambient';
document.body.insertBefore( div, document.body.firstChild );
return div;
}

/* ── SPAWN AMBIENT ELEMENT ───────────────────────────────── */
function spawn( layer, svgKey, cssClass, opts ) {
opts = opts || {};
var el = document.createElement( 'div' );
el.className = cssClass;
el.innerHTML = SVG[ svgKey ];

var scale = rand( opts.minScale || 0.5, opts.maxScale || 1.4 );
el.style.transformOrigin = 'center center';
el.style.transform = 'scale(' + scale + ')';

/* Position */
var edged = ( opts.edged !== false ) && Math.random() < 0.35;
var top, left;
if ( edged ) {
var side = randInt( 0, 3 );
if ( side === 0 ) { top = rand( 0, 8 ); left = rand( 5, 90 ); }
else if ( side === 1 ) { top = rand( 85, 97 ); left = rand( 5, 90 ); }
else if ( side === 2 ) { top = rand( 5, 90 ); left = rand( 0, 6 ); }
else { top = rand( 5, 90 ); left = rand( 88, 97 );}
} else {
top = rand( opts.topMin || 5, opts.topMax || 90 );
left = rand( opts.leftMin || 5, opts.leftMax || 90 );
}
el.style.top = top + 'vh';
el.style.left = left + 'vw';

/* Animation stagger */
var delay = rand( 0, 18 );
var dur = rand( opts.durMin || 5, opts.durMax || 14 );
el.style.animationDelay = delay + 's';
el.style.animationDuration = dur + 's';
if ( opts.opacity ) { el.style.opacity = opts.opacity; }

layer.appendChild( el );
return el;
}

/* ── ROSE PETAL FALL ─────────────────────────────────────── */
function spawnPetal( layer ) {
var el = document.createElement( 'div' );
el.className = 'h-petal';
el.innerHTML = SVG.petal;
el.style.left = rand( 5, 95 ) + 'vw';
el.style.top = '-30px';
el.style.setProperty( '--drift', rand( -40, 60 ) + 'px' );
el.style.setProperty( '--rot', rand( -180, 360 ) + 'deg' );
var dur = rand( 8, 18 );
el.style.animationDuration = dur + 's';
el.style.animationDelay = rand( 0, 20 ) + 's';
el.style.opacity = rand( 0.25, 0.55 );
layer.appendChild( el );
}

/* ── DUST MOTES ──────────────────────────────────────────── */
function spawnMote( layer ) {
var el = document.createElement( 'div' );
el.className = 'h-mote';
el.style.left = rand( 10, 90 ) + 'vw';
el.style.top = rand( 20, 90 ) + 'vh';
el.style.setProperty( '--mx', rand( -30, 30 ) + 'px' );
el.style.setProperty( '--my', rand( -80, -120 ) + 'px' );
var dur = rand( 5, 12 );
el.style.animationDuration = dur + 's';
el.style.animationDelay = rand( 0, 15 ) + 's';
/* Vary colour: gold, rose, cream */
var colours = [ '#f8d060', '#e8b030', '#d08090', '#f0e8d0' ];
el.style.background = colours[ randInt( 0, colours.length - 1 ) ];
el.style.boxShadow = '0 0 ' + rand( 2, 6 ) + 'px currentColor';
layer.appendChild( el );
}

/* ── WAX DRIP TRAILS ON CONTENT EDGE ────────────────────── */
function injectWaxDrips() {
var content = document.getElementById( 'content' )
|| document.getElementById( 'mw-content-text' )
|| document.querySelector( '.mw-body' );
if ( !content ) { return; }

/* Top drip row — candle wax flowing down */
var topBar = document.createElement( 'div' );
topBar.style.cssText = [
'position:absolute',
'top:-1px',
'left:0',
'width:100%',
'height:40px',
'pointer-events:none',
'overflow:hidden',
'z-index:10'
].join( ';' );

for ( var i = 0; i < 12; i++ ) {
var drip = document.createElement( 'div' );
drip.innerHTML = SVG.waxDrip;
drip.style.cssText = [
'position:absolute',
'top:0',
'left:' + ( i * 8.5 + rand( 0, 4 ) ) + '%',
'opacity:' + rand( 0.2, 0.45 ),
'transform:scaleY(0)',
'transform-origin:top center',
'animation:h-wax-drip ' + rand( 2, 5 ) + 's ' + rand( 0, 8 ) + 's ease-in forwards'
].join( ';' );
topBar.appendChild( drip );
}

/* Make content position:relative so absolute children work */
if ( getComputedStyle( content ).position === 'static' ) {
content.style.position = 'relative';
}
content.appendChild( topBar );
}

/* ── MOUSE PARALLAX ──────────────────────────────────────── */
function initParallax( layer ) {
var cx = window.innerWidth / 2, cy = window.innerHeight / 2;
var tx = 0, ty = 0, cx2 = 0, cy2 = 0;
document.addEventListener( 'mousemove', function ( e ) {
tx = ( e.clientX - cx ) / cx * 12;
ty = ( e.clientY - cy ) / cy * 8;
} );
( function tick() {
cx2 += ( tx - cx2 ) * 0.03;
cy2 += ( ty - cy2 ) * 0.03;
layer.style.transform = 'translate(' + cx2 + 'px,' + cy2 + 'px)';
requestAnimationFrame( tick );
}() );
}

/* ── CANDLE CLICK SPARK ──────────────────────────────────── */
function initClickSpark() {
document.addEventListener( 'click', function ( e ) {
var sparks = 6;
for ( var s = 0; s < sparks; s++ ) {
( function ( i ) {
var sp = document.createElement( 'div' );
var angle = ( i / sparks ) * Math.PI * 2 + rand( -0.3, 0.3 );
var dist = rand( 20, 55 );
sp.style.cssText = [
'position:fixed',
'pointer-events:none',
'z-index:9994',
'width:' + rand( 3, 6 ) + 'px',
'height:' + rand( 3, 6 ) + 'px',
'border-radius:50%',
'left:' + e.clientX + 'px',
'top:' + e.clientY + 'px',
'background:' + ( Math.random() < 0.5 ? '#f8c840' : '#ff7010' ),
'box-shadow:0 0 6px #f8c840',
'transition:transform 0.5s ease-out,opacity 0.5s ease-out',
'opacity:0.9'
].join( ';' );
document.body.appendChild( sp );
requestAnimationFrame( function () {
requestAnimationFrame( function () {
sp.style.transform = 'translate(' + Math.cos( angle ) * dist + 'px,' + Math.sin( angle ) * dist + 'px)';
sp.style.opacity = '0';
setTimeout( function () { if ( sp.parentNode ) { sp.parentNode.removeChild( sp ); } }, 550 );
} );
} );
}( s ) );
}
} );
}

/* ── GOLD CURSOR TRAIL ────────────────────────────────────── */
function initCursorTrail() {
var LEN = 8;
var dots = [], pos = [];
var mx = 0, my = 0;
for ( var i = 0; i < LEN; i++ ) {
var d = document.createElement( 'div' );
var sz = ( 6 - i * 0.5 );
d.style.cssText = [
'position:fixed',
'pointer-events:none',
'z-index:9996',
'width:' + sz + 'px',
'height:' + sz + 'px',
'border-radius:50%',
'opacity:' + ( ( LEN - i ) / LEN * 0.7 ),
'background:' + ( i % 3 === 0 ? '#f8c840' : i % 3 === 1 ? '#c8860a' : '#d08090' ),
'box-shadow:0 0 ' + sz + 'px ' + ( i % 3 === 0 ? '#f8c840' : '#c8860a' ),
'mix-blend-mode:screen'
].join( ';' );
document.body.appendChild( d );
dots.push( d );
pos.push( { x: 0, y: 0 } );
}
document.addEventListener( 'mousemove', function ( e ) { mx = e.clientX; my = e.clientY; } );
( function tick() {
pos.unshift( { x: mx, y: my } );
pos.length = LEN;
for ( var k = 0; k < LEN; k++ ) {
dots[ k ].style.left = ( pos[ k ].x - 3 ) + 'px';
dots[ k ].style.top = ( pos[ k ].y - 3 ) + 'px';
}
requestAnimationFrame( tick );
}() );
}

/* ── CANDLE GLOW ON HEADERS ──────────────────────────────── */
function animateHeaders() {
var heads = document.querySelectorAll( '.mw-headline, h2, h3' );
heads.forEach( function ( h, i ) {
h.style.animationDelay = ( i * 0.4 ) + 's';
} );
}

/* ── AMBIENT HAZE ────────────────────────────────────────── */
function createHaze() {
var hz = document.createElement( 'div' );
hz.id = 'hades-haze';
hz.style.cssText = [
'position:fixed',
'inset:0',
'pointer-events:none',
'z-index:1',
'background:' +
'radial-gradient(ellipse 70% 50% at 50% 10%,rgba(200,134,10,0.06) 0%,transparent 70%),' +
'radial-gradient(ellipse 50% 40% at 50% 95%,rgba(168,72,88,0.04) 0%,transparent 65%),' +
'radial-gradient(ellipse 30% 30% at 80% 30%,rgba(248,200,64,0.03) 0%,transparent 60%)',
'animation:h-breathe 10s ease-in-out infinite alternate'
].join( ';' );
document.body.insertBefore( hz, document.body.firstChild );
}

/* ── MAIN ─────────────────────────────────────────────────── */
function init() {
if ( typeof mw !== 'undefined' ) {
var action = mw.config.get( 'wgAction' );
if ( action === 'edit' || action === 'submit' ) { return; }
}

preloadFonts();
createHaze();

var layer = createLayer();

/* ── Candles ── */
for ( var i = 0; i < 5; i++ ) { spawn( layer, 'candleTall', 'h-candle-el', { minScale: 0.4, maxScale: 0.9, edged: true } ); }
for ( var j = 0; j < 5; j++ ) { spawn( layer, 'candleShort', 'h-candle-el', { minScale: 0.5, maxScale: 1.0, edged: true } ); }
for ( var k = 0; k < 3; k++ ) { spawn( layer, 'candleCluster', 'h-candle-el', { minScale: 0.4, maxScale: 0.7, edged: false } ); }
for ( var ci = 0; ci < 2; ci++ ) { spawn( layer, 'candelabra', 'h-candle-el', { minScale: 0.35, maxScale: 0.6, edged: true, opacity: '0.12' } ); }

/* ── Gothic arches ── */
for ( var a = 0; a < 5; a++ ) { spawn( layer, 'gothicArch', 'h-arch-el', { minScale: 0.5, maxScale: 1.2, opacity: '0.1' } ); }

/* ── Mirror silhouettes ── */
for ( var m = 0; m < 3; m++ ) { spawn( layer, 'mirrorSilhouette', 'h-arch-el', { minScale: 0.4, maxScale: 0.9, opacity: '0.08' } ); }

/* ── Sacred hearts ── */
for ( var sh = 0; sh < 4; sh++ ) { spawn( layer, 'sacredHeart', 'h-arch-el', { minScale: 0.4, maxScale: 0.9, opacity: '0.1' } ); }

/* ── Crowns ── */
for ( var cr = 0; cr < 3; cr++ ) { spawn( layer, 'crown', 'h-candle-el', { minScale: 0.5, maxScale: 0.9, opacity: '0.09' } ); }

/* ── Damask ornaments ── */
for ( var d = 0; d < 6; d++ ) { spawn( layer, 'damask', 'h-damask-el', { minScale: 0.6, maxScale: 1.4, opacity: '0.07' } ); }

/* ── Roses ── */
for ( var r = 0; r < 5; r++ ) { spawn( layer, 'rose', 'h-candle-el', { minScale: 0.5, maxScale: 1.0, opacity: '0.1' } ); }

/* ── Keys ── */
for ( var kk = 0; kk < 4; kk++ ) { spawn( layer, 'key', 'h-arch-el', { minScale: 0.4, maxScale: 0.9, opacity: '0.09' } ); }

/* ── Wax drips (scattered) ── */
for ( var w = 0; w < 8; w++ ) { spawn( layer, 'waxDrip', 'h-candle-el', { minScale: 0.3, maxScale: 0.8, opacity: '0.12' } ); }

/* ── Rose petals falling ── */
for ( var p = 0; p < 14; p++ ) { spawnPetal( layer ); }

/* ── Dust motes ── */
for ( var mo = 0; mo < 20; mo++ ) { spawnMote( layer ); }

/* ── Effects ── */
initParallax( layer );
initClickSpark();
initCursorTrail();
animateHeaders();
injectWaxDrips();

/* Slowly add new petals over time */
setInterval( function () {
if ( layer.querySelectorAll( '.h-petal' ).length < 25 ) { spawnPetal( layer ); }
}, 8000 );

/* Replenish motes */
setInterval( function () {
if ( layer.querySelectorAll( '.h-mote' ).length < 30 ) { spawnMote( layer ); }
}, 4000 );
}

/* ── BOOT ─────────────────────────────────────────────────── */
if ( typeof mw !== 'undefined' ) {
mw.loader.using( 'mediawiki.util' ).then( function () {
$( document ).ready( init );
} );
} else {
document.addEventListener( 'DOMContentLoaded', init );
}

}() );

MediaWiki:Common.css

2026-04-15T01:19:55Z

Possession:

/* ================================================================
H A D E S — MediaWiki:Common.css
Based on the 2026 album "Hades"
Baroque gothic · candlelit mahogany · rose-gold shrine
================================================================ */

/* ── GOOGLE FONTS ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700&family=IM+Fell+English:ital@0;1&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=UnifrakturMaguntia&family=Playfair+Display+SC:wght@400;700&family=Petit+Formal+Script&display=swap');

/* ── ONLINEWEBFONTS ───────────────────────────────────────────── */
/* Rothenburg Decorative — ornate gothic caps */
@font-face {
font-family: 'RothenburgDecorative';
src: url('https://db.onlinewebfonts.com/t/a2a1ffe66c3aa67e462ccd5a66c56b62.woff2') format('woff2'),
url('https://db.onlinewebfonts.com/t/a2a1ffe66c3aa67e462ccd5a66c56b62.woff') format('woff');
font-display: swap;
}
/* MedievalSharp — blackletter decorative */
@font-face {
font-family: 'MedievalSharp';
src: url('https://db.onlinewebfonts.com/t/1e5a1c6a58aed05f7c23d8b6c4d22b1d.woff2') format('woff2'),
url('https://db.onlinewebfonts.com/t/1e5a1c6a58aed05f7c23d8b6c4d22b1d.woff') format('woff');
font-display: swap;
}
/* GothicUltraOT — heavy gothic */
@font-face {
font-family: 'GothicUltra';
src: url('https://db.onlinewebfonts.com/t/ec70a8b001c29e3f95b6f1b97049ef5e.woff2') format('woff2'),
url('https://db.onlinewebfonts.com/t/ec70a8b001c29e3f95b6f1b97049ef5e.woff') format('woff');
font-display: swap;
}
/* Cantique — baroque script serif */
@font-face {
font-family: 'Cantique';
src: url('https://db.onlinewebfonts.com/t/c8a7fd3c8c2ab2c21f7e7a44e3a12bfe.woff2') format('woff2'),
url('https://db.onlinewebfonts.com/t/c8a7fd3c8c2ab2c21f7e7a44e3a12bfe.woff') format('woff');
font-display: swap;
}

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
/* ── backgrounds */
--h-bg: #0b0704;
--h-bg2: #150e08;
--h-bg3: #1e1208;
--h-panel: #0f0905;
--h-mirror: #100808;

/* ── borders */
--h-border: #3a1e0c;
--h-border2: #6b3a18;
--h-border3: #8a5a28;

/* ── gold palette */
--h-gold: #c8860a;
--h-gold2: #e8b030;
--h-gold3: #f8d060;
--h-gold-dim: #7a4e10;
--h-gold-deep: #3e2408;

/* ── rose / candle palette */
--h-rose: #a84858;
--h-rose2: #d08090;
--h-rose3: #f0b0c0;
--h-candle: #f8c840;
--h-flame: #ff7010;
--h-wax: #f2ede0;
--h-wax2: #d8d0c0;

/* ── blue-lavender (hair accent) */
--h-blue: #6878a8;
--h-blue2: #90a0c8;

/* ── text */
--h-text: #e0ceb0;
--h-text-dim: #9a7a50;
--h-text-muted: #5a3e28;
--h-cream: #f0e8d0;

/* ── glows */
--h-glow-gold: 0 0 20px rgba(200, 134, 10, 0.55), 0 0 40px rgba(200, 134, 10, 0.2);
--h-glow-rose: 0 0 16px rgba(208, 128, 144, 0.45);
--h-glow-candle:0 0 24px rgba(248, 200, 64, 0.5), 0 0 50px rgba(248, 200, 64, 0.15);

/* ── fonts */
--h-font-title: 'UnifrakturMaguntia', 'RothenburgDecorative', cursive;
--h-font-head: 'Cinzel Decorative', 'GothicUltra', serif;
--h-font-subhead: 'Cinzel', 'Playfair Display SC', serif;
--h-font-body: 'IM Fell English', 'Cormorant Garamond', serif;
--h-font-label: 'Playfair Display SC', 'Cinzel', serif;
--h-font-script: 'Petit Formal Script', 'Cantique', cursive;
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
html {
scrollbar-color: var(--h-border2) var(--h-bg2);
scrollbar-width: thin;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--h-bg2); }
::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, var(--h-gold-dim), var(--h-border2));
border-radius: 1px;
}

/* ── BODY & BASE ────────────────────────────────────────────── */
body {
background-color: var(--h-bg) !important;
color: var(--h-text) !important;
font-family: var(--h-font-body) !important;
font-size: 16px;
line-height: 1.8;
/* Damask background pattern + radial warm glow */
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3Cstyle%3E.d%7Bfill:none;stroke:%23c8860a;stroke-width:0.4;opacity:0.07%7D%3C/style%3E%3C/defs%3E%3Cellipse class='d' cx='60' cy='30' rx='10' ry='18'/%3E%3Cellipse class='d' cx='60' cy='90' rx='10' ry='18'/%3E%3Cellipse class='d' cx='30' cy='60' rx='18' ry='10'/%3E%3Cellipse class='d' cx='90' cy='60' rx='18' ry='10'/%3E%3Cpath class='d' d='M60,12 Q72,30 60,48 Q48,30 60,12Z'/%3E%3Cpath class='d' d='M60,72 Q72,90 60,108 Q48,90 60,72Z'/%3E%3Cpath class='d' d='M12,60 Q30,72 48,60 Q30,48 12,60Z'/%3E%3Cpath class='d' d='M72,60 Q90,72 108,60 Q90,48 72,60Z'/%3E%3Ccircle class='d' cx='60' cy='60' r='6'/%3E%3Ccircle class='d' cx='30' cy='30' r='3'/%3E%3Ccircle class='d' cx='90' cy='30' r='3'/%3E%3Ccircle class='d' cx='30' cy='90' r='3'/%3E%3Ccircle class='d' cx='90' cy='90' r='3'/%3E%3C/svg%3E"),
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,134,10,0.08) 0%, transparent 65%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(168,72,88,0.06) 0%, transparent 60%);
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12,2 L14,9 L21,9 L15.5,13.5 L17.5,21 L12,16.5 L6.5,21 L8.5,13.5 L3,9 L10,9Z' fill='%23c8860a' opacity='0.7' stroke='%23e8b030' stroke-width='0.5'/%3E%3C/svg%3E") 12 12, auto;
}

/* Grain texture overlay */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.028'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9997;
}

/* Vignette */
body::after {
content: '';
position: fixed;
inset: 0;
background: radial-gradient(
ellipse 110% 110% at 50% 50%,
transparent 40%,
rgba(5, 2, 0, 0.65) 100%
);
pointer-events: none;
z-index: 9996;
animation: h-breathe 8s ease-in-out infinite;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.firstHeading, #firstHeading, .mw-headline {
font-family: var(--h-font-head) !important;
color: var(--h-gold2) !important;
text-shadow: var(--h-glow-gold) !important;
letter-spacing: 0.05em;
line-height: 1.3;
}

/* Page title — gothic grandeur */
h1, .firstHeading, #firstHeading {
font-family: var(--h-font-title) !important;
font-size: 2.6em !important;
color: var(--h-gold3) !important;
text-shadow:
0 0 30px rgba(248,200,64,0.6),
0 0 60px rgba(200,134,10,0.3),
2px 4px 8px rgba(0,0,0,0.9) !important;
border-bottom: none !important;
padding-bottom: 0.4em !important;
position: relative;
/* Ornamental border under title */
background-image:
linear-gradient(to right, transparent, var(--h-gold-dim), var(--h-gold), var(--h-gold-dim), transparent);
background-position: 0 100%;
background-size: 100% 1px;
background-repeat: no-repeat;
animation: h-title-flicker 6s ease-in-out infinite;
}

/* Ornamental crown before/after title */
h1::before, #firstHeading::before {
content: '✦';
color: var(--h-gold);
font-family: serif;
margin-right: 0.4em;
opacity: 0.8;
animation: h-flicker 4s infinite;
font-size: 0.55em;
vertical-align: middle;
}
h1::after, #firstHeading::after {
content: '✦';
color: var(--h-gold);
font-family: serif;
margin-left: 0.4em;
opacity: 0.8;
animation: h-flicker 4s 0.5s infinite;
font-size: 0.55em;
vertical-align: middle;
}

h2 {
font-size: 1.6em !important;
border-bottom: 1px solid var(--h-border2) !important;
padding-bottom: 0.25em !important;
position: relative;
}
h2::after {
content: '';
position: absolute;
bottom: -1px; left: 0;
width: 60px; height: 1px;
background: var(--h-gold);
box-shadow: 0 0 8px var(--h-gold);
}
h3 { font-size: 1.3em !important; color: var(--h-rose2) !important; text-shadow: var(--h-glow-rose) !important; }
h4 { font-size: 1.1em !important; color: var(--h-gold) !important; font-family: var(--h-font-subhead) !important; }

p {
font-family: var(--h-font-body);
color: var(--h-text);
line-height: 1.85;
margin-bottom: 1em;
}

/* First letter drop cap */
.mw-parser-output > p:first-of-type::first-letter {
font-family: var(--h-font-title);
font-size: 3.8em;
float: left;
line-height: 0.75;
margin: 0.08em 0.1em 0 0;
color: var(--h-gold2);
text-shadow: var(--h-glow-gold);
}

/* ── LINKS ──────────────────────────────────────────────────── */
a, a:visited {
color: var(--h-gold2) !important;
text-decoration: none !important;
transition: color 0.25s, text-shadow 0.25s;
}
a:hover {
color: var(--h-gold3) !important;
text-shadow: 0 0 12px rgba(248,200,64,0.6) !important;
}
a.new, a.new:visited { color: var(--h-rose) !important; }
a.new:hover { color: var(--h-rose2) !important; text-shadow: var(--h-glow-rose) !important; }

/* Remove underline pseudo-element from previous theme if inherited */
a::after { display: none !important; }

/* ── LAYOUT WRAPPER ────────────────────────────────────────── */
#mw-page-base, #mw-head-base { background: var(--h-bg) !important; }
#mw-wrapper, #content-wrapper { background: transparent !important; }

/* ── HEADER — safe; only colours, no structural changes ──── */
#mw-head,
.mw-header,
header#mw-header {
background: var(--h-panel) !important;
border-bottom: 1px solid var(--h-border2) !important;
box-shadow: 0 3px 24px rgba(0,0,0,0.7), 0 1px 0 rgba(200,134,10,0.15) !important;
/* NO position/display/flex changes */
}

/* Site title */
#p-wiki-name a,
.mw-wiki-title,
.sitetitle,
#site-navigation .wiki-title {
font-family: var(--h-font-title) !important;
color: var(--h-gold2) !important;
font-size: 1.5em !important;
text-shadow: var(--h-glow-gold) !important;
letter-spacing: 0.06em !important;
}

/* ── SEARCH BAR — colour only, preserve structure ─────────── */
#searchInput,
input[name="search"],
.cdx-text-input__input,
.mw-search-input {
background: var(--h-bg3) !important;
border: 1px solid var(--h-border2) !important;
color: var(--h-text) !important;
font-family: var(--h-font-body) !important;
font-size: 0.95em !important;
/* NO width/height/position changes */
transition: border-color 0.2s, box-shadow 0.2s;
}
#searchInput:focus,
.cdx-text-input__input:focus {
border-color: var(--h-gold) !important;
box-shadow: 0 0 10px rgba(200,134,10,0.4) !important;
outline: none !important;
}
/* Search button */
#searchButton,
.cdx-button,
.mw-search-button {
background: var(--h-bg3) !important;
border: 1px solid var(--h-border2) !important;
color: var(--h-gold) !important;
font-family: var(--h-font-label) !important;
font-size: 0.8em !important;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.2s;
}
#searchButton:hover,
.cdx-button:hover {
border-color: var(--h-gold) !important;
box-shadow: var(--h-glow-gold) !important;
}

/* ── TOOLBAR (page tabs) — colour only ─────────────────────── */
#p-views .mw-list-item a,
.mw-portlet-views a,
#p-cactions a,
.vector-tab-noicon a {
background: transparent !important;
color: var(--h-text-dim) !important;
font-family: var(--h-font-label) !important;
font-size: 0.78em !important;
text-transform: uppercase;
letter-spacing: 0.12em;
border: 1px solid transparent !important;
padding: 0.3em 0.7em !important;
transition: all 0.2s;
/* NO position/display changes */
}
#p-views .mw-list-item a:hover,
.mw-portlet-views a:hover {
background: rgba(200,134,10,0.08) !important;
border-color: var(--h-border2) !important;
color: var(--h-gold2) !important;
}
#p-views .selected a,
.mw-portlet-views .selected a {
background: rgba(200,134,10,0.12) !important;
border-color: var(--h-gold-dim) !important;
color: var(--h-gold2) !important;
}

/* ── SIDEBAR — colour only, NO dimension changes ───────────── */
#mw-panel,
.mw-sidebar,
#sidebar,
#mw-navigation,
.sidebar-inner {
background: var(--h-panel) !important;
border-right: 1px solid var(--h-border) !important;
/* NO width/height/position changes */
}

.mw-portlet,
.portal,
div.portal {
background: rgba(255,255,255,0.015) !important;
border: 1px solid var(--h-border) !important;
border-radius: 1px !important;
margin-bottom: 0.8em !important;
padding: 0.4em 0.5em !important;
}

.mw-portlet h3, .portal h3, .mw-portlet-heading {
font-family: var(--h-font-label) !important;
font-size: 0.72em !important;
color: var(--h-gold-dim) !important;
text-transform: uppercase !important;
letter-spacing: 0.18em !important;
text-shadow: none !important;
border-bottom: 1px solid var(--h-border) !important;
padding-bottom: 0.35em !important;
margin-bottom: 0.35em !important;
}

.mw-portlet ul li a,
.portal ul li a {
font-family: var(--h-font-body) !important;
font-size: 0.9em !important;
color: var(--h-text-dim) !important;
display: block;
padding: 0.12em 0.4em !important;
transition: all 0.2s;
border-radius: 1px;
}
.mw-portlet ul li a:hover,
.portal ul li a:hover {
background: rgba(200,134,10,0.07) !important;
color: var(--h-gold) !important;
padding-left: 0.8em !important;
text-shadow: 0 0 8px rgba(200,134,10,0.3) !important;
}
.mw-portlet ul li a::after { display: none !important; }

/* ── MAIN CONTENT AREA ──────────────────────────────────────── */
#mw-content-text,
.mw-body,
#content,
.page-content {
background: rgba(21, 14, 8, 0.9) !important;
border: 1px solid var(--h-border) !important;
box-shadow:
0 0 60px rgba(0,0,0,0.5),
inset 0 0 80px rgba(0,0,0,0.3),
0 0 0 3px rgba(200,134,10,0.04) !important;
padding: 2em 2.2em !important;
position: relative;
}

/* Gothic arch corner ornaments */
#mw-content-text::before, #content::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 48px; height: 48px;
border-top: 1px solid var(--h-gold-dim);
border-left: 1px solid var(--h-gold-dim);
pointer-events: none;
opacity: 0.6;
}
#mw-content-text::after, #content::after {
content: '';
position: absolute;
bottom: 0; right: 0;
width: 48px; height: 48px;
border-bottom: 1px solid var(--h-rose);
border-right: 1px solid var(--h-rose);
pointer-events: none;
opacity: 0.4;
}

/* ── TABLES ─────────────────────────────────────────────────── */
table.wikitable,
table.wikitable > * > tr > th,
table.wikitable > * > tr > td {
background: rgba(21,14,8,0.92) !important;
border-color: var(--h-border2) !important;
color: var(--h-text) !important;
}
table.wikitable > * > tr > th {
background: rgba(62,36,8,0.6) !important;
font-family: var(--h-font-label) !important;
color: var(--h-gold2) !important;
letter-spacing: 0.06em;
font-size: 0.88em;
}
table.wikitable > * > tr:nth-child(even) > td {
background: rgba(255,255,255,0.02) !important;
}
table.wikitable > * > tr:hover > td {
background: rgba(200,134,10,0.05) !important;
}

/* ── INFOBOXES ──────────────────────────────────────────────── */
.portable-infobox,
aside.portable-infobox,
table.infobox,
.infobox {
background: var(--h-bg2) !important;
border: 1px solid var(--h-border2) !important;
font-family: var(--h-font-body) !important;
color: var(--h-text) !important;
box-shadow:
0 0 40px rgba(0,0,0,0.5),
inset 0 0 30px rgba(0,0,0,0.2),
0 0 0 1px rgba(200,134,10,0.08) !important;
position: relative;
overflow: hidden;
}
/* Warm candle glow at top of infobox */
.portable-infobox::before,
table.infobox::before {
content: '';
position: absolute;
top: -30px; left: 50%;
transform: translateX(-50%);
width: 200px; height: 80px;
background: radial-gradient(ellipse, rgba(248,200,64,0.12) 0%, transparent 70%);
pointer-events: none;
animation: h-candle-glow 3s ease-in-out infinite;
}
.pi-title, .pi-header,
.infobox caption, .infobox th[colspan] {
background: rgba(62,36,8,0.7) !important;
font-family: var(--h-font-head) !important;
color: var(--h-gold3) !important;
text-shadow: var(--h-glow-candle) !important;
font-size: 1em !important;
text-align: center !important;
padding: 0.7em !important;
letter-spacing: 0.08em;
border-bottom: 1px solid var(--h-border2) !important;
}
.pi-data-label, .infobox th {
color: var(--h-gold) !important;
font-family: var(--h-font-label) !important;
font-size: 0.78em !important;
text-transform: uppercase;
letter-spacing: 0.08em;
background: rgba(0,0,0,0.2) !important;
}
.pi-data-value, .infobox td {
color: var(--h-text) !important;
border-color: var(--h-border) !important;
background: transparent !important;
}
.pi-image { border-bottom: 1px solid var(--h-border) !important; }

/* ── TOC ─────────────────────────────────────────────────────── */
#toc, .toc {
background: rgba(21,14,8,0.95) !important;
border: 1px solid var(--h-border2) !important;
padding: 1em 1.4em !important;
position: relative;
}
#toc::before, .toc::before {
content: '';
position: absolute;
inset: 4px;
border: 1px solid rgba(200,134,10,0.1);
pointer-events: none;
}
.toctitle, #toc .toctitle {
font-family: var(--h-font-label) !important;
color: var(--h-gold2) !important;
font-size: 0.82em !important;
text-transform: uppercase;
letter-spacing: 0.15em;
}
.toc a { color: var(--h-text-dim) !important; font-family: var(--h-font-body) !important; }
.toc a:hover { color: var(--h-gold2) !important; }
.tocnumber { color: var(--h-text-muted) !important; }

/* ── CATEGORIES ─────────────────────────────────────────────── */
#catlinks, .catlinks {
background: var(--h-bg2) !important;
border-top: 1px solid var(--h-border) !important;
font-family: var(--h-font-label) !important;
font-size: 0.78em !important;
color: var(--h-text-muted) !important;
margin-top: 2em !important;
padding: 0.5em 1em !important;
letter-spacing: 0.04em;
}
.catlinks a { color: var(--h-rose2) !important; }
.catlinks a:hover { color: var(--h-rose3) !important; }

/* ── EDIT INTERFACE ────────────────────────────────────────── */
#toolbar, .wikiEditor-ui-toolbar {
background: var(--h-bg3) !important;
border-color: var(--h-border) !important;
}
#wpTextbox1, textarea.mw-editTextarea {
background: var(--h-mirror) !important;
color: var(--h-text) !important;
border: 1px solid var(--h-border2) !important;
font-family: 'IM Fell English', serif !important;
font-size: 1em !important;
caret-color: var(--h-gold);
line-height: 1.7;
}
#wpTextbox1:focus { border-color: var(--h-gold-dim) !important; outline: none !important; }
.wikiEditor-ui { background: var(--h-bg2) !important; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.mw-ui-button,
input[type="submit"],
input[type="button"],
button.mw-ui-button {
background: var(--h-bg3) !important;
color: var(--h-gold2) !important;
border: 1px solid var(--h-border2) !important;
font-family: var(--h-font-label) !important;
font-size: 0.82em !important;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s;
text-shadow: none !important;
box-shadow: none !important;
}
.mw-ui-button:hover,
input[type="submit"]:hover {
background: rgba(200,134,10,0.12) !important;
border-color: var(--h-gold) !important;
box-shadow: var(--h-glow-gold) !important;
}
.mw-ui-button.mw-ui-primary {
background: linear-gradient(135deg, rgba(62,36,8,0.8), rgba(100,58,18,0.6)) !important;
border-color: var(--h-gold) !important;
}

/* ── MESSAGES / NOTICES ─────────────────────────────────────── */
.mw-message-box, .warningbox, .ambox, .mbox-small {
background: rgba(21,14,8,0.85) !important;
border-left: 3px solid var(--h-gold-dim) !important;
color: var(--h-text) !important;
font-family: var(--h-font-body) !important;
}
.successbox { border-left-color: var(--h-rose) !important; }
.errorbox { border-left-color: #6a1a1a !important; }

/* ── CODE ───────────────────────────────────────────────────── */
code, pre, .mw-code {
background: rgba(0,0,0,0.55) !important;
border: 1px solid var(--h-border) !important;
font-family: 'Courier New', monospace !important;
font-size: 0.9em !important;
color: var(--h-gold) !important;
}
pre { padding: 1em !important; overflow-x: auto; }

/* ── DIFF ───────────────────────────────────────────────────── */
table.diff td.diff-addedline { background: rgba(168,72,88,0.08) !important; border-color: var(--h-rose) !important; }
table.diff td.diff-deletedline { background: rgba(80,30,10,0.12) !important; border-color: var(--h-gold-dim) !important; }
ins { background: rgba(168,72,88,0.12) !important; color: var(--h-rose2) !important; }
del { background: rgba(80,30,10,0.15) !important; color: var(--h-text-muted) !important; }

/* ── BLOCKQUOTE ─────────────────────────────────────────────── */
blockquote {
border-left: 2px solid var(--h-gold-dim) !important;
margin: 1.2em 0 !important;
padding: 0.6em 1.2em !important;
background: rgba(200,134,10,0.03) !important;
color: var(--h-text-dim) !important;
font-style: italic;
font-family: var(--h-font-script) !important;
font-size: 1.05em;
}

/* ── HORIZONTAL RULES ───────────────────────────────────────── */
hr {
border: none !important;
height: 20px !important;
margin: 1.5em 0 !important;
background:
linear-gradient(to right, transparent, var(--h-gold-dim), var(--h-gold), var(--h-gold-dim), transparent)
center/100% 1px no-repeat,
radial-gradient(circle, var(--h-gold) 0%, transparent 60%)
center/12px 12px no-repeat !important;
position: relative;
}
hr::after {
content: '✦';
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
color: var(--h-gold);
font-size: 0.8em;
background: var(--h-bg2);
padding: 0 0.5em;
text-shadow: var(--h-glow-gold);
animation: h-flicker 5s infinite;
}

/* ── IMAGES ─────────────────────────────────────────────────── */
.thumb, figure.mw-halign-right, figure.mw-halign-left {
background: var(--h-bg2) !important;
border: 1px solid var(--h-border2) !important;
padding: 5px !important;
box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
}
.thumbcaption, figcaption {
color: var(--h-text-dim) !important;
font-family: var(--h-font-script) !important;
font-size: 0.88em !important;
font-style: italic;
text-align: center;
}
img {
filter: sepia(0.15) contrast(1.05);
transition: filter 0.4s;
}
img:hover {
filter: sepia(0.0) contrast(1.08) brightness(1.05);
}

/* ── FOOTER ─────────────────────────────────────────────────── */
#footer, .mw-footer {
background: var(--h-panel) !important;
border-top: 1px solid var(--h-border) !important;
color: var(--h-text-muted) !important;
font-family: var(--h-font-label) !important;
font-size: 0.75em !important;
letter-spacing: 0.06em;
padding: 1em !important;
}
#footer a, .mw-footer a { color: var(--h-text-dim) !important; }
#footer a:hover { color: var(--h-gold) !important; }
#footer li { list-style: none !important; }

/* ── AMBIENT DECO LAYER ─────────────────────────────────────── */
.h-ambient {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.h-candle-el {
position: absolute;
pointer-events: none;
animation: h-float 8s ease-in-out infinite, h-flicker-opacity 3s ease-in-out infinite;
}
.h-arch-el {
position: absolute;
pointer-events: none;
animation: h-arch-glow 6s ease-in-out infinite;
}
.h-petal {
position: absolute;
pointer-events: none;
animation: h-petal-fall linear infinite;
}
.h-mote {
position: absolute;
pointer-events: none;
width: 3px; height: 3px;
border-radius: 50%;
background: var(--h-gold3);
animation: h-mote-drift ease-in-out infinite;
}
.h-damask-el {
position: absolute;
pointer-events: none;
animation: h-damask-spin 40s linear infinite;
opacity: 0.06;
}

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes h-float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-10px) rotate(1.5deg); }
66% { transform: translateY(-6px) rotate(-1deg); }
}

@keyframes h-flicker {
0%, 85%, 100% { opacity: 0.8; }
87% { opacity: 0.3; }
89% { opacity: 0.8; }
91% { opacity: 0.1; }
93% { opacity: 0.9; }
}

@keyframes h-flicker-opacity {
0%, 100% { opacity: 0.12; }
40% { opacity: 0.22; }
60% { opacity: 0.08; }
}

@keyframes h-title-flicker {
0%, 90%, 100% {
text-shadow: 0 0 30px rgba(248,200,64,0.6), 0 0 60px rgba(200,134,10,0.3), 2px 4px 8px rgba(0,0,0,0.9);
}
92% {
text-shadow: 0 0 15px rgba(248,200,64,0.3), 0 0 30px rgba(200,134,10,0.1), 2px 4px 8px rgba(0,0,0,0.9);
}
94% {
text-shadow: 0 0 40px rgba(248,200,64,0.8), 0 0 80px rgba(200,134,10,0.4), 2px 4px 8px rgba(0,0,0,0.9);
}
}

@keyframes h-candle-glow {
0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
50% { opacity: 0.5; transform: translateX(-50%) scale(1.15); }
}

@keyframes h-breathe {
0%, 100% { opacity: 0.85; }
50% { opacity: 0.65; }
}

@keyframes h-arch-glow {
0%, 100% { filter: drop-shadow(0 0 8px rgba(200,134,10,0.15)); }
50% { filter: drop-shadow(0 0 16px rgba(200,134,10,0.3)); }
}

@keyframes h-petal-fall {
0% { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
10% { opacity: 0.6; }
90% { opacity: 0.3; }
100% { transform: translate(var(--drift, 30px), 110vh) rotate(var(--rot, 360deg)); opacity: 0; }
}

@keyframes h-mote-drift {
0% { transform: translate(0, 0); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.3; }
100% { transform: translate(var(--mx, 20px), var(--my, -80px)); opacity: 0; }
}

@keyframes h-damask-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

@keyframes h-wax-drip {
0% { transform: scaleY(0); transform-origin: top; opacity: 1; }
80% { transform: scaleY(1); opacity: 1; }
100% { transform: scaleY(1); opacity: 0; }
}

@keyframes h-flame-dance {
0%, 100% { transform: scaleX(1) scaleY(1) rotate(-1deg); }
25% { transform: scaleX(0.9) scaleY(1.1) rotate(2deg); }
50% { transform: scaleX(1.1) scaleY(0.95) rotate(-2deg); }
75% { transform: scaleX(0.95) scaleY(1.05) rotate(1deg); }
}

@keyframes h-spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

@keyframes h-pulse-rose {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(168,72,88,0.4)); }
50% { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(208,128,144,0.6)); }
}

/* ── UTILITY CLASSES ────────────────────────────────────────── */
.h-gold { color: var(--h-gold2) !important; text-shadow: var(--h-glow-gold); }
.h-rose { color: var(--h-rose2) !important; text-shadow: var(--h-glow-rose); }
.h-cream { color: var(--h-cream) !important; }
.h-script { font-family: var(--h-font-script) !important; }
.h-cinzel { font-family: var(--h-font-head) !important; }
.h-fraktur { font-family: var(--h-font-title) !important; }
.h-label { font-family: var(--h-font-label) !important; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85em; }
.h-float { animation: h-float 5s ease-in-out infinite !important; }
.h-flicker { animation: h-flicker 4s infinite !important; }
.h-glow-gold { text-shadow: var(--h-glow-gold) !important; }
.h-glow-candle{ text-shadow: var(--h-glow-candle) !important; }

MediaWiki:Common.css

2026-04-15T01:02:15Z

Possession:

/*
* ╔══════════════════════════════════════════════════════════════════╗
* ║ 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;
}
}

/* ═══════════════════════════════════════════
VECTOR LAYOUT FIXES — Toolbar & Search at Top
═══════════════════════════════════════════ */

/* Ensure the head/toolbar stays at the top */
#mw-head {
position: relative !important;
top: 0 !important;
z-index: 100 !important;
width: 100% !important;
}

/* Fix the page base layering */
#mw-page-base {
background: var(--hades-bg-deep) !important;
position: relative !important;
z-index: 0 !important;
}

/* Keep body::before visible but non-interfering */
body::before {
z-index: 1 !important;
pointer-events: none !important;
}

/* Ensure the main content sits above the particle layer */
#mw-head,
#mw-panel,
#mw-page-base,
#mw-head-base,
.mw-body,
#content,
#p-search,
#left-navigation,
#right-navigation {
position: relative !important;
z-index: 10 !important;
}

/* Keep the toolbar specifically above everything */
#mw-head {
z-index: 100 !important;
}

/* Ensure navigation/search don't get pushed */
#left-navigation,
#right-navigation {
z-index: 50 !important;
}

#p-search {
z-index: 50 !important;
float: right !important;
}

MediaWiki:Common.css

2026-04-15T01:00:00Z

Possession:

/*
* ╔══════════════════════════════════════════════════════════════════╗
* ║ 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;
}
}

/* ═══════════════════════════════════════════
VECTOR LAYOUT FIXES — Toolbar & Search at Top
═══════════════════════════════════════════ */

/* Ensure the head/toolbar stays at the top */
#mw-head {
position: relative !important;
top: 0 !important;
z-index: 100 !important;
width: 100% !important;
}

/* Fix the page base layering */
#mw-page-base {
position: relative !important;
z-index: 0 !important;
}

/* Stop body::before from interfering with layout */
body::before {
z-index: -1 !important;
pointer-events: none !important;
}

/* Ensure navigation/search don't get pushed */
#left-navigation,
#right-navigation {
position: relative !important;
z-index: 50 !important;
}

#p-search {
position: relative !important;
z-index: 50 !important;
float: right !important;
}

MediaWiki:Common.css

2026-04-15T00:52:49Z

Possession: Created page with "/* * ╔══════════════════════════════════════════════════════════════════╗ * ║ HADES WIKI — MediaWiki Theme CSS ║ * ║ The Free Encyclopedia of the Underworld ║ * ║ Based on: Hades (2026) by Melanie Martinez ║ * ║ Install in: MediaWiki:C..."

MediaWiki:Common.js

2026-04-15T00:52:25Z

Possession: Created page with "/** * ╔═══════════════════════════════════════════════════════════════╗ * ║ HADES WIKI — MediaWiki Theme JavaScript ║ * ║ The Free Encyclopedia of the Underworld ║ * ║ Based on: Hades (2026) by Melanie Martinez ║ * ║ Install in: MediaWiki:Common.js..."

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

(function () {
'use strict';

/* ─────────────────────────────────────────
CONFIGURATION
───────────────────────────────────────── */
const HADES_CONFIG = {
candleCount: 4,
particleCount: 15,
particleColors: ['#c8922a', '#ff8800', '#ffcc44', '#ff6600', '#ffd700'],
goldColor: '#c8922a',
pageFadeInDelay: 100,
navHighlightDelay: 200,
siteSubtitle: 'The Free Encyclopedia of the Underworld',
};

/* ─────────────────────────────────────────
UTILITY: Wait for DOM element
───────────────────────────────────────── */
function waitFor(selector, callback, timeout = 5000) {
const el = document.querySelector(selector);
if (el) return callback(el);
const start = Date.now();
const interval = setInterval(() => {
const found = document.querySelector(selector);
if (found || Date.now() - start > timeout) {
clearInterval(interval);
if (found) callback(found);
}
}, 100);
}

/* ─────────────────────────────────────────
1. ANIMATED CANDLES IN HEADER
───────────────────────────────────────── */
function injectCandles() {
const header = document.querySelector('#mw-head, .mw-header, .vector-header');
if (!header) return;

// Remove existing candle container if present
const existing = document.getElementById('hades-candles');
if (existing) existing.remove();

const container = document.createElement('div');
container.id = 'hades-candles';
container.style.cssText = `
display: flex;
align-items: flex-end;
gap: 6px;
padding: 8px 16px;
position: absolute;
right: 80px;
top: 50%;
transform: translateY(-50%);
z-index: 50;
pointer-events: none;
`;

const candleHeights = [50, 75, 60, 42];
const candleDelays = [0.3, 0, 0.6, 1.0];

candleHeights.forEach((height, i) => {
const candleEl = createCandleElement(height, candleDelays[i]);
container.appendChild(candleEl);
});

header.style.position = 'relative';
header.appendChild(container);
}

function createCandleElement(height, delay) {
const wrapper = document.createElement('div');
wrapper.style.cssText = 'display:flex;flex-direction:column;align-items:center;position:relative;';

// Smoke
const smoke = document.createElement('div');
smoke.style.cssText = `
position:absolute;
bottom:${height + 36}px;
left:50%;
width:4px;
height:10px;
background:rgba(200,180,150,0.25);
border-radius:50%;
transform:translateX(-50%);
animation:hadesSmoke ${2 + delay * 0.5}s ${delay * 0.3}s ease-out infinite;
`;
wrapper.appendChild(smoke);

// Outer flame
const outerFlame = document.createElement('div');
outerFlame.style.cssText = `
width:14px;
height:22px;
background:radial-gradient(ellipse at 50% 80%,#ff5500 0%,#ff9900 40%,#ffcc00 70%,rgba(255,220,100,0) 100%);
border-radius:50% 50% 30% 30%/60% 60% 40% 40%;
animation:hadesCandle ${1.4 + delay * 0.3}s ${delay * 0.2}s ease-in-out infinite;
transform-origin:bottom center;
filter:blur(0.5px);
margin-bottom:0;
`;
wrapper.appendChild(outerFlame);

// Inner flame
const innerFlame = document.createElement('div');
innerFlame.style.cssText = `
width:5px;
height:13px;
background:radial-gradient(ellipse at 50% 80%,#fff 0%,#ffe066 50%,rgba(255,200,0,0) 100%);
border-radius:50% 50% 30% 30%/60% 60% 40% 40%;
animation:hadesCandle ${1.1 + delay * 0.2}s ${delay * 0.15}s ease-in-out infinite;
transform-origin:bottom center;
margin-top:-13px;
align-self:center;
`;
wrapper.appendChild(innerFlame);

// Glow orb
const glow = document.createElement('div');
glow.style.cssText = `
width:22px;
height:22px;
border-radius:50%;
background:rgba(255,160,50,0.1);
animation:hadesGlowOrb ${2.2 + delay * 0.4}s ${delay * 0.1}s ease-in-out infinite;
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
`;
wrapper.appendChild(glow);

// Wick
const wick = document.createElement('div');
wick.style.cssText = 'width:2px;height:5px;background:#1a0800;margin-bottom:-1px;position:relative;z-index:2;';
wrapper.appendChild(wick);

// Wax body
const waxColors = ['#d4c4a0', '#e8d8b0', '#ddd0a8', '#c8b890'];
const wax = document.createElement('div');
wax.style.cssText = `
width:16px;
height:${height}px;
background:linear-gradient(to right,${waxColors[Math.floor(Math.random() * waxColors.length)]}bb 0%,${waxColors[0]} 35%,${waxColors[0]} 70%,${waxColors[0]}88 100%);
border-radius:2px 2px 3px 3px;
position:relative;
box-shadow:inset -3px 0 6px rgba(0,0,0,0.2),inset 3px 0 3px rgba(255,255,255,0.08);
`;

// Wax drip 1
const drip1 = document.createElement('div');
drip1.style.cssText = `
position:absolute;top:0;left:30%;width:4px;
background:inherit;border-radius:0 0 3px 3px;
animation:hadesWaxDrip ${4 + delay}s ${delay + 0.5}s ease-in-out infinite alternate;
height:10px;opacity:0.6;
`;
wax.appendChild(drip1);

// Wax drip 2
const drip2 = document.createElement('div');
drip2.style.cssText = `
position:absolute;top:0;right:25%;width:3px;
background:inherit;border-radius:0 0 3px 3px;
animation:hadesWaxDrip ${5 + delay}s ${delay + 1.5}s ease-in-out infinite alternate;
height:7px;opacity:0.5;
`;
wax.appendChild(drip2);

wrapper.appendChild(wax);
return wrapper;
}

/* ─────────────────────────────────────────
2. INJECT EXTRA CSS KEYFRAMES (JS version)
───────────────────────────────────────── */
function injectExtraStyles() {
const style = document.createElement('style');
style.id = 'hades-js-styles';
style.textContent = `
@keyframes hadesSmoke {
0% { opacity: 0.4; transform: translateX(-50%) translateY(0) scaleX(1); }
50% { opacity: 0.2; transform: translateX(-50%) translateY(-16px) scaleX(1.5); }
100% { opacity: 0; transform: translateX(-50%) translateY(-32px) scaleX(2); }
}
@keyframes hadesGlowOrb {
0%,100% { box-shadow:0 0 8px 3px rgba(255,160,50,0.4),0 0 20px 8px rgba(200,100,20,0.2); opacity:0.8; }
50% { box-shadow:0 0 14px 6px rgba(255,190,70,0.7),0 0 35px 14px rgba(210,130,35,0.4); opacity:1; }
}
@keyframes hadesWaxDrip {
0% { height:0px; opacity:0.8; }
100% { height:18px; opacity:0.3; }
}
@keyframes hadesParticleAnim {
0% { transform:translateY(0) translateX(0) rotate(0deg) scale(1); opacity:0.9; }
50% { transform:translateY(-50vh) translateX(30px) rotate(180deg) scale(0.5); opacity:0.4; }
100% { transform:translateY(-100vh) translateX(-20px) rotate(360deg) scale(0.1); opacity:0; }
}
@keyframes hadesPageReveal {
from { opacity:0; transform:translateY(16px); }
to { opacity:1; transform:translateY(0); }
}
@keyframes hadesNavLine {
from { width:0; left:50%; }
to { width:100%; left:0; }
}
@keyframes hadesTitlePulse {
0%,100% { filter:brightness(1); }
50% { filter:brightness(1.15) drop-shadow(0 0 8px rgba(200,146,42,0.5)); }
}
@keyframes hadesLinkShimmer {
0% { background-position:-200% center; }
100% { background-position:200% center; }
}
@keyframes hadesScrollIndicator {
0%,100% { opacity:0.4; transform:translateY(0); }
50% { opacity:1; transform:translateY(4px); }
}
@keyframes hadesCrownFloat {
0%,100% { transform:translateY(0) rotate(-2deg); filter:drop-shadow(0 0 6px rgba(200,146,42,0.5)); }
50% { transform:translateY(-5px) rotate(2deg); filter:drop-shadow(0 0 12px rgba(200,146,42,0.8)); }
}
@keyframes hadesSubtitleReveal {
from { opacity:0; letter-spacing:8px; }
to { opacity:1; letter-spacing:5px; }
}

/* Hover glow for wiki links */
.hades-link-glow {
position:relative;
transition:all 0.3s ease !important;
}
.hades-link-glow:hover {
text-shadow:0 0 12px rgba(200,146,42,0.6) !important;
}

/* Section reveal animation */
.hades-section-reveal {
animation:hadesPageReveal 0.6s ease forwards;
opacity:0;
}

/* Candle hover effect */
#hades-candles:hover {
filter:brightness(1.2);
}

/* Ornament spin */
.hades-spinning-ornament {
display:inline-block;
animation:hadesOrnamentSpin 8s linear infinite;
}

/* Progress bar shimmer */
.hades-progress {
height:2px;
background:linear-gradient(to right, transparent, #c8922a, transparent);
position:fixed;
top:0;
left:0;
z-index:9999;
transition:width 0.3s ease;
}
`;
document.head.appendChild(style);
}

/* ─────────────────────────────────────────
3. FLOATING EMBER PARTICLES
───────────────────────────────────────── */
function createParticles() {
const container = document.createElement('div');
container.id = 'hades-particles';
container.style.cssText = `
position:fixed;
inset:0;
pointer-events:none;
z-index:1;
overflow:hidden;
`;

for (let i = 0; i < HADES_CONFIG.particleCount; i++) {
const p = document.createElement('div');
const size = 1.5 + Math.random() * 2.5;
const color = HADES_CONFIG.particleColors[Math.floor(Math.random() * HADES_CONFIG.particleColors.length)];
const left = Math.random() * 100;
const delay = Math.random() * 8;
const duration = 6 + Math.random() * 8;

p.style.cssText = `
position:absolute;
bottom:0;
left:${left}%;
width:${size}px;
height:${size}px;
border-radius:50%;
background:radial-gradient(circle, ${color} 0%, rgba(200,100,20,0.2) 70%, transparent 100%);
animation:hadesParticleAnim ${duration}s ${delay}s ease-out infinite;
opacity:0;
`;
container.appendChild(p);
}

document.body.prepend(container);
}

/* ─────────────────────────────────────────
4. SITE TITLE ENHANCEMENT
───────────────────────────────────────── */
function enhanceSiteTitle() {
// Add animated crown to logo area
const logo = document.querySelector('#p-logo, .mw-logo, #mw-head-base');
if (logo) {
const crown = document.createElement('div');
crown.style.cssText = `
font-size:28px;
text-align:center;
animation:hadesCrownFloat 3s ease-in-out infinite;
filter:drop-shadow(0 0 8px rgba(200,146,42,0.6));
margin-bottom:4px;
display:block;
color:#c8922a;
`;
crown.textContent = '♛';
logo.prepend(crown);
}

// Animate site subtitle
const subtitle = document.querySelector('#p-logo a[title], .mw-wiki-title');
if (subtitle) {
const sub = document.createElement('div');
sub.textContent = HADES_CONFIG.siteSubtitle;
sub.style.cssText = `
font-family:'Cinzel',serif;
font-size:8px;
letter-spacing:5px;
color:#8b4a20;
text-transform:uppercase;
text-align:center;
animation:hadesSubtitleReveal 2s ease forwards;
opacity:0;
margin-top:2px;
`;
subtitle.parentNode.insertBefore(sub, subtitle.nextSibling);
}
}

/* ─────────────────────────────────────────
5. PAGE CONTENT ANIMATIONS
───────────────────────────────────────── */
function animatePageContent() {
const content = document.querySelector('#mw-content-text, .mw-body, #content');
if (content) {
content.style.animation = 'hadesPageReveal 0.8s 0.1s ease forwards';
content.style.opacity = '0';
}

// Animate each heading with stagger
const headings = document.querySelectorAll('h2, h3');
headings.forEach((h, i) => {
h.style.animation = `hadesPageReveal 0.6s ${0.1 + i * 0.08}s ease forwards`;
h.style.opacity = '0';
});

// Animate infobox
const infobox = document.querySelector('.infobox');
if (infobox) {
infobox.style.animation = 'hadesPageReveal 0.8s 0.3s ease forwards';
infobox.style.opacity = '0';
}
}

/* ─────────────────────────────────────────
6. ENHANCED LINK INTERACTIONS
───────────────────────────────────────── */
function enhanceLinks() {
// Add ripple effect to all article links
document.querySelectorAll('#mw-content-text a, .mw-body a').forEach(link => {
link.classList.add('hades-link-glow');

link.addEventListener('mouseenter', function () {
this.style.transition = 'all 0.2s ease';
});

link.addEventListener('click', function (e) {
const ripple = document.createElement('span');
ripple.style.cssText = `
position:absolute;
width:12px;
height:12px;
background:rgba(200,146,42,0.6);
border-radius:50%;
pointer-events:none;
animation:hadesRipple 0.5s ease forwards;
transform:translate(-50%,-50%);
top:${e.offsetY}px;
left:${e.offsetX}px;
z-index:9;
`;
this.style.position = 'relative';
this.style.overflow = 'hidden';
this.appendChild(ripple);
setTimeout(() => ripple.remove(), 500);
});
});
}

/* ─────────────────────────────────────────
7. NAVIGATION ACTIVE INDICATOR
───────────────────────────────────────── */
function enhanceNavigation() {
const navLinks = document.querySelectorAll(
'#p-namespaces ul li a, #p-views ul li a, .vector-menu-tabs ul li a'
);

navLinks.forEach(link => {
link.addEventListener('mouseenter', function () {
const indicator = document.createElement('div');
indicator.style.cssText = `
position:absolute;
bottom:0;
left:0;
height:2px;
background:linear-gradient(to right, transparent, #c8922a, transparent);
animation:hadesNavLine 0.25s ease forwards;
pointer-events:none;
`;
this.style.position = 'relative';
this.appendChild(indicator);
});

link.addEventListener('mouseleave', function () {
const indicator = this.querySelector('div[style*="hadesNavLine"]');
if (indicator) indicator.remove();
});
});
}

/* ─────────────────────────────────────────
8. SCROLL PROGRESS BAR
───────────────────────────────────────── */
function createScrollProgressBar() {
const bar = document.createElement('div');
bar.className = 'hades-progress';
bar.style.width = '0%';
document.body.appendChild(bar);

window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
bar.style.width = progress + '%';
}, { passive: true });
}

/* ─────────────────────────────────────────
9. TABLE ENHANCEMENTS
───────────────────────────────────────── */
function enhanceTables() {
document.querySelectorAll('.wikitable tr').forEach((row, i) => {
row.addEventListener('mouseenter', function () {
this.style.background = 'rgba(200,146,42,0.08)';
this.style.transition = 'background 0.2s ease';
this.querySelectorAll('td').forEach(td => {
td.style.color = '#d4c4a0';
td.style.transition = 'color 0.2s ease';
});
});
row.addEventListener('mouseleave', function () {
this.style.background = '';
this.querySelectorAll('td').forEach(td => { td.style.color = ''; });
});
});
}

/* ─────────────────────────────────────────
10. SEARCH BAR ENHANCEMENTS
───────────────────────────────────────── */
function enhanceSearch() {
const searchInput = document.querySelector('#searchInput, .vector-search-box input[type="search"]');
if (!searchInput) return;

searchInput.placeholder = 'Search HADES Wiki...';

searchInput.addEventListener('focus', function () {
this.parentElement.style.boxShadow = '0 0 0 3px rgba(200,146,42,0.2), 0 4px 20px rgba(0,0,0,0.5)';
this.style.borderColor = '#c8922a';
});

searchInput.addEventListener('blur', function () {
this.parentElement.style.boxShadow = '';
this.style.borderColor = '';
});

// Add search icon label
const label = document.createElement('span');
label.textContent = '🔍';
label.style.cssText = `
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
pointer-events:none;
font-size:14px;
z-index:5;
`;
const searchWrapper = searchInput.parentElement;
if (searchWrapper) {
searchWrapper.style.position = 'relative';
searchWrapper.prepend(label);
}
}

/* ─────────────────────────────────────────
11. FIRST HEADING SUBTITLE
───────────────────────────────────────── */
function enhanceFirstHeading() {
const h1 = document.querySelector('#firstHeading, h1.firstHeading');
if (!h1) return;

// Add decorative ornaments around h1
h1.innerHTML = h1.innerHTML;

const sub = document.createElement('div');
sub.style.cssText = `
font-family:'IM Fell English',serif;
font-style:italic;
font-size:13px;
color:#8b7a50;
margin-top:4px;
letter-spacing:0.5px;
`;

// Add page metadata
const pageName = h1.textContent.trim();
const ns = mw.config.get('wgNamespaceNumber');
if (ns === 0 && pageName) {
// Main article namespace
sub.textContent = `Article · Hades Wiki`;
h1.parentNode.insertBefore(sub, h1.nextSibling);
}
}

/* ─────────────────────────────────────────
12. FOOTER ENHANCEMENT
───────────────────────────────────────── */
function enhanceFooter() {
const footer = document.querySelector('#footer, .mw-footer');
if (!footer) return;

const logo = document.createElement('div');
logo.style.cssText = `
font-family:'Cinzel Decorative',serif;
font-size:16px;
color:#8b6914;
letter-spacing:4px;
margin-bottom:12px;
text-align:center;
animation:hadesTitlePulse 4s ease-in-out infinite;
`;
logo.textContent = '⚜ HADES WIKI ⚜';
footer.prepend(logo);

const divider = document.createElement('div');
divider.style.cssText = `
height:1px;
background:linear-gradient(to right, transparent, #c8922a, transparent);
margin:12px 0;
opacity:0.4;
`;
footer.prepend(divider);
}

/* ─────────────────────────────────────────
13. IMAGE LIGHTBOX (simple)
───────────────────────────────────────── */
function initLightbox() {
document.querySelectorAll('.thumbimage img, .infobox img').forEach(img => {
img.style.cursor = 'zoom-in';
img.addEventListener('click', function (e) {
e.preventDefault();

const overlay = document.createElement('div');
overlay.style.cssText = `
position:fixed;
inset:0;
background:rgba(0,0,0,0.92);
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
cursor:zoom-out;
animation:hadesPageReveal 0.3s ease forwards;
`;

const clone = this.cloneNode();
clone.style.cssText = `
max-width:90vw;
max-height:90vh;
object-fit:contain;
border:1px solid rgba(200,146,42,0.4);
box-shadow:0 0 60px rgba(200,146,42,0.2),0 0 120px rgba(0,0,0,0.8);
`;

const closeBtn = document.createElement('div');
closeBtn.textContent = '✕';
closeBtn.style.cssText = `
position:absolute;
top:20px;
right:24px;
color:#c8922a;
font-size:24px;
cursor:pointer;
font-family:Cinzel,serif;
letter-spacing:2px;
opacity:0.8;
transition:opacity 0.2s;
`;
closeBtn.addEventListener('mouseenter', () => closeBtn.style.opacity = '1');

const close = () => {
overlay.style.opacity = '0';
overlay.style.transition = 'opacity 0.3s ease';
setTimeout(() => overlay.remove(), 300);
};

overlay.addEventListener('click', close);
closeBtn.addEventListener('click', close);
overlay.appendChild(clone);
overlay.appendChild(closeBtn);
document.body.appendChild(overlay);
});
});
}

/* ─────────────────────────────────────────
14. MAIN EXECUTION (mw.loader.using)
───────────────────────────────────────── */
function init() {
injectExtraStyles();
createParticles();
injectCandles();
createScrollProgressBar();
animatePageContent();
enhanceLinks();
enhanceNavigation();
enhanceTables();
enhanceSearch();
enhanceFooter();
initLightbox();

// Slight delay for heading enhancement (needs mw object)
setTimeout(() => {
try { enhanceFirstHeading(); } catch (e) { /* not critical */ }
}, 500);

console.log('%c⚜ HADES WIKI THEME LOADED ⚜', 'color:#c8922a;font-family:Cinzel,serif;font-size:14px;letter-spacing:3px;');
}

// Use MediaWiki's jQuery.ready or plain DOMContentLoaded
if (typeof jQuery !== 'undefined' && typeof mw !== 'undefined') {
mw.loader.using(['mediawiki.util'], function () {
jQuery(document).ready(function () {
init();
});
});
} else {
document.addEventListener('DOMContentLoaded', init);
}

})();