WHITE ANIMAL COOKIE CAMEL PLUSHIE - User contributions [en]

MediaWiki:Common.js

2026-04-14T20:37:48Z

Ringleader: Created page with "/** * ╔══════════════════════════════════════════════════════════╗ * ║ DREAMCORE / WEIRDCORE — MediaWiki Common.js ║ * ║ Paste into MediaWiki:Common.js on your wiki ║ * ╚═══════════════════════════════════════════════..."

/**
* ╔══════════════════════════════════════════════════════════╗
* ║ DREAMCORE / WEIRDCORE — MediaWiki Common.js ║
* ║ Paste into MediaWiki:Common.js on your wiki ║
* ╚══════════════════════════════════════════════════════════╝
*
* Features:
* • Floating SVG decorations (mushrooms, eyes, stars, moons)
* • Glitch effect on page title
* • Ambient particle field
* • Subtle cursor trail
* • Random "dream" quotes in footer
* • Occasional blinking eye in sidebar
*/

( function () {
'use strict';

/* ─── SVG Icon Library ──────────────────────────────── */

const ICONS = {

mushroom: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 70" width="54" height="63">
<ellipse cx="30" cy="42" rx="11" ry="18" fill="#7a5aaa" opacity="0.65"/>
<ellipse cx="30" cy="42" rx="7" ry="15" fill="#9070c8" opacity="0.4"/>
<path d="M10 38 Q30 10 50 38 Q40 44 30 44 Q20 44 10 38Z" fill="#c4a0d8" opacity="0.82"/>
<path d="M10 38 Q30 10 50 38" fill="none" stroke="#e0c8f0" stroke-width="0.8" opacity="0.4"/>
<circle cx="18" cy="28" r="3.5" fill="white" opacity="0.5"/>
<circle cx="32" cy="22" r="2.8" fill="white" opacity="0.5"/>
<circle cx="43" cy="30" r="2" fill="white" opacity="0.5"/>
<circle cx="24" cy="20" r="1.5" fill="white" opacity="0.4"/>
<ellipse cx="30" cy="44" rx="8" ry="2.5" fill="#3d2860" opacity="0.4"/>
</svg>`,

eye: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 45" width="72" height="40">
<path d="M4 22 Q40 2 76 22 Q40 42 4 22Z" fill="#2a1f48" stroke="#7a5aaa" stroke-width="0.8" opacity="0.9"/>
<circle cx="40" cy="22" r="10" fill="#1a1030"/>
<circle cx="40" cy="22" r="7" fill="#8a5ac8"/>
<circle cx="40" cy="22" r="4" fill="#0d0818"/>
<circle cx="43" cy="19" r="2.5" fill="white" opacity="0.85"/>
<circle cx="37" cy="25" r="1" fill="white" opacity="0.4"/>
<ellipse cx="40" cy="22" rx="10" ry="10" fill="none" stroke="#c4a0d8" stroke-width="0.4" opacity="0.5"/>
<path d="M4 22 Q40 2 76 22" fill="none" stroke="#a07ad4" stroke-width="0.5" opacity="0.3"/>
</svg>`,

star: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="44" height="44">
<polygon points="25,3 30,18 46,18 33,29 38,45 25,35 12,45 17,29 4,18 20,18"
fill="#c4a04a" opacity="0.7" stroke="#e0c880" stroke-width="0.5"/>
<polygon points="25,8 29,20 42,20 32,28 36,41 25,33 14,41 18,28 8,20 21,20"
fill="#e0c880" opacity="0.35"/>
</svg>`,

moon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 55" width="44" height="48">
<path d="M28 5 A22 22 0 1 0 28 48 A14 14 0 1 1 28 5Z"
fill="#c8b0e8" opacity="0.65" stroke="#d8c8f0" stroke-width="0.6"/>
<circle cx="20" cy="18" r="2" fill="white" opacity="0.2"/>
<circle cx="30" cy="36" r="1.5" fill="white" opacity="0.15"/>
<circle cx="16" cy="32" r="1" fill="white" opacity="0.12"/>
</svg>`,

flower: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55" width="48" height="48">
<g opacity="0.7">
<ellipse cx="27" cy="14" rx="6" ry="10" fill="#c46890" opacity="0.65" transform="rotate(0,27,27)"/>
<ellipse cx="27" cy="14" rx="6" ry="10" fill="#c46890" opacity="0.65" transform="rotate(45,27,27)"/>
<ellipse cx="27" cy="14" rx="6" ry="10" fill="#c46890" opacity="0.65" transform="rotate(90,27,27)"/>
<ellipse cx="27" cy="14" rx="6" ry="10" fill="#c46890" opacity="0.65" transform="rotate(135,27,27)"/>
<ellipse cx="27" cy="14" rx="6" ry="10" fill="#d888b0" opacity="0.55" transform="rotate(22.5,27,27)"/>
<ellipse cx="27" cy="14" rx="6" ry="10" fill="#d888b0" opacity="0.55" transform="rotate(67.5,27,27)"/>
<ellipse cx="27" cy="14" rx="6" ry="10" fill="#d888b0" opacity="0.55" transform="rotate(112.5,27,27)"/>
<ellipse cx="27" cy="14" rx="6" ry="10" fill="#d888b0" opacity="0.55" transform="rotate(157.5,27,27)"/>
</g>
<circle cx="27" cy="27" r="7" fill="#f0e070" opacity="0.8"/>
<circle cx="27" cy="27" r="4" fill="#c4a04a" opacity="0.9"/>
</svg>`,

droplet: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 50" width="30" height="43">
<path d="M17 3 Q32 22 32 32 A15 15 0 0 1 2 32 Q2 22 17 3Z"
fill="#56a99f" opacity="0.55" stroke="#88c8c0" stroke-width="0.7"/>
<path d="M17 12 Q26 26 26 32 A9 9 0 0 1 8 32 Q8 26 17 12Z"
fill="white" opacity="0.12"/>
</svg>`,

spiral: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55" width="48" height="48">
<path d="M27 27 m0,-20 a20,20 0 1,1 -0.1,0
m0,5 a15,15 0 1,1 -0.1,0
m0,5 a10,10 0 1,1 -0.1,0
m0,5 a5,5 0 1,1 -0.1,0"
fill="none" stroke="#a07ad4" stroke-width="1.2" opacity="0.5"
stroke-linecap="round"/>
</svg>`,

};

/* ─── Dream Quotes ───────────────────────────────────── */

const DREAM_QUOTES = [
'you have been here before.',
'the door was always open.',
'something is watching through the grass.',
'the hallway goes on.',
'you almost remember.',
'it looks like home but it isn\'t.',
'the light is wrong here.',
'you recognize the music but not the words.',
'the stairs lead somewhere new.',
'the sky here has no sun.',
'you\'ve lost count of the rooms.',
'the window shows a different outside.',
];

/* ─── Utility ────────────────────────────────────────── */

function rand( min, max ) {
return Math.random() * ( max - min ) + min;
}

function randInt( min, max ) {
return Math.floor( rand( min, max + 1 ) );
}

function randPick( arr ) {
return arr[ Math.floor( Math.random() * arr.length ) ];
}

/* ─── 1. Floating SVG Decorations ───────────────────── */

function spawnDecorations() {
const icons = Object.entries( ICONS );
const count = 7;

for ( let i = 0; i < count; i++ ) {
const [ name, svg ] = randPick( icons );
const el = document.createElement( 'div' );

el.className = 'dreamcore-deco deco-' + name;
el.innerHTML = svg;
el.style.cssText = [
'position:fixed',
'pointer-events:none',
'z-index:1',
'left:' + rand( 2, 92 ) + 'vw',
'top:' + rand( 5, 90 ) + 'vh',
'opacity:0',
'animation-delay:' + rand( 0, 4 ) + 's',
'animation-duration:' + rand( 9, 18 ) + 's',
'transform:rotate(' + rand( -25, 25 ) + 'deg) scale(' + rand( 0.5, 1.3 ) + ')',
].join( ';' );

// Float up animation
const duration = rand( 14, 28 );
const delay = rand( 0, 6 );
el.style.animation = [
'fadeInDeco 3s ' + delay + 's ease forwards',
'floatSymbol ' + duration + 's ' + delay + 's ease-in-out infinite',
].join( ', ' );

document.body.appendChild( el );
}
}

/* ─── 2. Ambient Particle Field ─────────────────────── */

function createParticleField() {
const canvas = document.createElement( 'canvas' );
canvas.style.cssText = [
'position:fixed', 'inset:0', 'width:100vw', 'height:100vh',
'pointer-events:none', 'z-index:0', 'opacity:0.35',
].join( ';' );
document.body.appendChild( canvas );

const ctx = canvas.getContext( '2d' );
let W = canvas.width = window.innerWidth;
let H = canvas.height = window.innerHeight;

window.addEventListener( 'resize', () => {
W = canvas.width = window.innerWidth;
H = canvas.height = window.innerHeight;
} );

const PARTICLE_COUNT = 55;
const COLORS = [ '#a07ad4', '#56a99f', '#c46890', '#c4a04a', '#7da8cc' ];

const particles = Array.from( { length: PARTICLE_COUNT }, () => ( {
x: rand( 0, W ), y: rand( 0, H ),
vx: rand( -0.15, 0.15 ), vy: rand( -0.22, -0.05 ),
r: rand( 0.8, 2.2 ),
color: randPick( COLORS ),
alpha: rand( 0.08, 0.35 ),
pulse: rand( 0, Math.PI * 2 ),
pulseSpeed: rand( 0.008, 0.025 ),
} ) );

function tick() {
ctx.clearRect( 0, 0, W, H );

for ( const p of particles ) {
p.pulse += p.pulseSpeed;
p.x += p.vx;
p.y += p.vy;

if ( p.y < -10 ) { p.y = H + 5; p.x = rand( 0, W ); }
if ( p.x < -10 ) p.x = W + 5;
if ( p.x > W + 10 ) p.x = -5;

const a = p.alpha * ( 0.6 + 0.4 * Math.sin( p.pulse ) );
ctx.beginPath();
ctx.arc( p.x, p.y, p.r, 0, Math.PI * 2 );
ctx.fillStyle = p.color;
ctx.globalAlpha = a;
ctx.fill();
}

ctx.globalAlpha = 1;

// Draw faint connecting lines between nearby particles
for ( let i = 0; i < particles.length; i++ ) {
for ( let j = i + 1; j < particles.length; j++ ) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const dist = Math.sqrt( dx * dx + dy * dy );
if ( dist < 90 ) {
ctx.beginPath();
ctx.moveTo( particles[i].x, particles[i].y );
ctx.lineTo( particles[j].x, particles[j].y );
ctx.strokeStyle = '#a07ad4';
ctx.globalAlpha = ( 1 - dist / 90 ) * 0.06;
ctx.lineWidth = 0.5;
ctx.stroke();
}
}
}

ctx.globalAlpha = 1;
requestAnimationFrame( tick );
}

tick();
}

/* ─── 3. Glitch Title ────────────────────────────────── */

function initGlitchTitle() {
const h1 = document.getElementById( 'firstHeading' ) ||
document.querySelector( '.firstHeading' );
if ( !h1 ) return;

const text = h1.textContent.trim();
h1.setAttribute( 'data-title', text );
h1.classList.add( 'glitch-title' );

// Occasional flicker
setInterval( () => {
if ( Math.random() > 0.7 ) {
h1.style.opacity = '0.6';
setTimeout( () => { h1.style.opacity = ''; }, 60 + Math.random() * 80 );
}
}, 4000 );
}

/* ─── 4. Cursor Trail ───────────────────────────────── */

function initCursorTrail() {
const TRAIL_COUNT = 8;
const trail = [];

for ( let i = 0; i < TRAIL_COUNT; i++ ) {
const dot = document.createElement( 'div' );
dot.style.cssText = [
'position:fixed',
'width:' + ( 3 - i * 0.3 ) + 'px',
'height:' + ( 3 - i * 0.3 ) + 'px',
'border-radius:50%',
'background:' + ( i % 2 === 0 ? '#a07ad4' : '#56a99f' ),
'pointer-events:none',
'z-index:9999',
'opacity:' + ( 0.5 - i * 0.06 ),
'transform:translate(-50%,-50%)',
'transition:left ' + ( 0.04 + i * 0.02 ) + 's,top ' + ( 0.04 + i * 0.02 ) + 's',
'will-change:left,top',
].join( ';' );
document.body.appendChild( dot );
trail.push( dot );
}

document.addEventListener( 'mousemove', ( e ) => {
trail.forEach( ( dot ) => {
dot.style.left = e.clientX + 'px';
dot.style.top = e.clientY + 'px';
} );
} );
}

/* ─── 5. Dream Quote in Footer ──────────────────────── */

function injectDreamQuote() {
const footer = document.getElementById( 'footer' ) ||
document.querySelector( '.mw-footer' );
if ( !footer ) return;

const quote = randPick( DREAM_QUOTES );
const el = document.createElement( 'div' );
el.id = 'dreamcore-quote';
el.style.cssText = [
'text-align:center',
'font-family:"IM Fell English",Georgia,serif',
'font-style:italic',
'font-size:13px',
'color:rgba(92,82,128,0.6)',
'letter-spacing:0.12em',
'padding:12px 0 4px',
'opacity:0',
'animation:fadeInDeco 4s 2s ease forwards',
].join( ';' );
el.textContent = '— ' + quote;
footer.insertBefore( el, footer.firstChild );
}

/* ─── 6. Sidebar Blinking Eye ───────────────────────── */

function addSidebarEye() {
const panel = document.getElementById( 'mw-panel' ) ||
document.querySelector( '.mw-sidebar' );
if ( !panel ) return;

const eye = document.createElement( 'div' );
eye.style.cssText = [
'text-align:center',
'padding:16px 0 8px',
'opacity:0',
'animation:fadeInDeco 5s 3s ease forwards',
].join( ';' );
eye.innerHTML = ICONS.eye;
eye.querySelector( 'svg' ).style.cssText = [
'width:56px', 'height:32px', 'opacity:0.2', 'display:inline-block',
].join( ';' );

// Blink occasionally
setInterval( () => {
const svg = eye.querySelector( 'svg' );
if ( Math.random() > 0.5 ) {
svg.style.transform = 'scaleY(0.08)';
svg.style.transition = 'transform 0.07s';
setTimeout( () => {
svg.style.transform = 'scaleY(1)';
}, 100 + Math.random() * 60 );
}
}, 3500 );

panel.appendChild( eye );
}

/* ─── 7. Haiku Tooltips on headings ────────────────── */

const HEADING_HAIKUS = [
'a door left ajar\nthe room beyond holds no walls\nonly more hallway',
'the clock face is blank\nbut you know the time somehow\nit\'s always the same',
'you recognize this\nbut have never been here—how\nlong have you been here',
'through the window: green\nthrough the other window: green\nboth look different',
];

function addHeadingTooltips() {
const headings = document.querySelectorAll( '.mw-body-content h2' );
headings.forEach( ( h, i ) => {
h.title = HEADING_HAIKUS[ i % HEADING_HAIKUS.length ];
h.style.cursor = 'default';
} );
}

/* ─── 8. Random Mushroom near TOC ───────────────────── */

function addTocMushroom() {
const toc = document.getElementById( 'toc' ) ||
document.querySelector( '.toc' );
if ( !toc ) return;

const wrap = document.createElement( 'div' );
wrap.style.cssText = [
'position:absolute',
'right:-24px',
'top:-20px',
'opacity:0.22',
'transform:rotate(12deg)',
'pointer-events:none',
].join( ';' );
wrap.innerHTML = ICONS.mushroom;
wrap.querySelector( 'svg' ).style.cssText = 'width:48px;height:54px;';

toc.style.position = 'relative';
toc.appendChild( wrap );
}

/* ─── 9. Subtle Page-load Fade ─────────────────────── */

function pageLoadFade() {
const content = document.getElementById( 'content' ) ||
document.querySelector( '.mw-body' );
if ( !content ) return;

content.style.opacity = '0';
content.style.transform = 'translateY(6px)';
content.style.transition = 'opacity 0.7s ease, transform 0.7s ease';

requestAnimationFrame( () => {
requestAnimationFrame( () => {
content.style.opacity = '';
content.style.transform = '';
} );
} );
}

/* ─── Init ───────────────────────────────────────────── */

function init() {
spawnDecorations();
createParticleField();
initGlitchTitle();
initCursorTrail();
injectDreamQuote();
addSidebarEye();
addHeadingTooltips();
addTocMushroom();
pageLoadFade();
}

if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', init );
} else {
init();
}

}() );

MediaWiki:Common.css

2026-04-14T20:37:23Z

Ringleader: Created page with "/* * ╔══════════════════════════════════════════════════════════╗ * ║ DREAMCORE / WEIRDCORE — MediaWiki Theme ║ * ║ Paste into MediaWiki:Common.css on your wiki ║ * ║ Also requires MediaWiki:Common.js for full effects ║ * ╚═════════════════════════..."

/*
* ╔══════════════════════════════════════════════════════════╗
* ║ DREAMCORE / WEIRDCORE — MediaWiki Theme ║
* ║ Paste into MediaWiki:Common.css on your wiki ║
* ║ Also requires MediaWiki:Common.js for full effects ║
* ╚══════════════════════════════════════════════════════════╝
*
* Covers: Vector (legacy), Vector 2022, Timeless
* Fonts: IM Fell English, Cinzel, VT323 (Google Fonts)
* + Lovecraft, Ethereal (OnlineWebFonts)
*/

/* ─── Google Fonts ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Cinzel:wght@400;600;900&family=VT323&family=Crimson+Pro:ital,wght@0,300;0,400;1,300;1,400&display=swap');

/* ─── OnlineWebFonts ─────────────────────────────────────
Download from onlinewebfonts.com and self-host, or use
@font-face pointing to your wiki's File: namespace.
Below are fallback stacks that work without self-hosting.
───────────────────────────────────────────────────────── */
@font-face {
font-family: 'DreamDisplay';
src: local('Cinzel'), local('IM Fell English');
font-weight: 400;
}

/* ─── CSS Custom Properties ──────────────────────────── */
:root {
--bg-deep: #08060f;
--bg-mid: #0e0b1c;
--bg-panel: #130f24;
--bg-surface: #1a1530;
--bg-elevated: #211c3a;
--bg-highlight: #2a2448;

--text-primary: #cdc2e8;
--text-secondary: #9589bb;
--text-dim: #5c5280;
--text-accent: #d4b8f0;

--accent-lavender: #a07ad4;
--accent-teal: #56a99f;
--accent-rust: #c47866;
--accent-gold: #c4a04a;
--accent-rose: #c46890;

--link-idle: #7da8cc;
--link-hover: #b0d4f0;
--link-visited: #8878b8;
--link-red: #d47088;

--border-faint: rgba(160, 122, 212, 0.12);
--border-mid: rgba(160, 122, 212, 0.28);
--border-strong: rgba(160, 122, 212, 0.55);

--glow-purple: rgba(160, 122, 212, 0.18);
--glow-teal: rgba(86, 169, 159, 0.15);

--font-display: 'Cinzel', 'IM Fell English', Georgia, serif;
--font-body: 'IM Fell English', 'Crimson Pro', Georgia, serif;
--font-mono: 'VT323', 'Courier New', monospace;
--font-ui: 'Crimson Pro', Georgia, serif;
}

/* ─── SVG Icon Data URIs ─────────────────────────────── */
/* mushroom, eye, star, moon — used as pseudo-element decorations */

/* ─── Base Reset for Wiki ────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════
GLOBAL PAGE BACKGROUND
═══════════════════════════════════════════════════════ */

html, body,
#mw-page-base, #mw-head-base {
background-color: var(--bg-deep) !important;
color: var(--text-primary) !important;
}

body {
font-family: var(--font-body) !important;
font-size: 17px !important;
line-height: 1.75 !important;
}

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

/* Floating orb ambiance */
body::after {
content: '';
position: fixed;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(100,60,180,0.07) 0%, transparent 70%);
top: -200px;
right: -200px;
pointer-events: none;
z-index: 0;
animation: driftOrb 20s ease-in-out infinite alternate;
}

@keyframes driftOrb {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-80px, 80px) scale(1.15); }
}

/* ═══════════════════════════════════════════════════════
LAYOUT CONTAINERS
═══════════════════════════════════════════════════════ */

/* Vector Legacy */
#content,
.mw-body {
background-color: var(--bg-mid) !important;
border: 1px solid var(--border-mid) !important;
border-radius: 2px !important;
color: var(--text-primary) !important;
position: relative;
box-shadow:
0 0 0 1px var(--border-faint),
0 8px 48px rgba(8, 6, 15, 0.8),
inset 0 0 80px rgba(100, 60, 180, 0.04) !important;
}

/* Vector 2022 content area */
.mw-page-container,
.vector-body {
background-color: var(--bg-mid) !important;
}

.skin-vector-2022 .mw-page-container {
background-color: var(--bg-deep) !important;
}

.skin-vector-2022 #content {
background-color: var(--bg-mid) !important;
}

/* ═══════════════════════════════════════════════════════
HEADER / NAVIGATION
═══════════════════════════════════════════════════════ */

#mw-head,
#mw-head-base,
.vector-header,
.mw-header {
background-color: var(--bg-panel) !important;
border-bottom: 1px solid var(--border-mid) !important;
box-shadow: 0 1px 24px rgba(8, 6, 15, 0.9) !important;
}

/* Vector 2022 sticky header */
.vector-sticky-header {
background-color: rgba(13, 10, 28, 0.95) !important;
border-bottom: 1px solid var(--border-mid) !important;
backdrop-filter: blur(8px) !important;
}

/* Site name / logo text */
#p-logo a,
.mw-wiki-logo {
filter: brightness(0.9) saturate(0.8) hue-rotate(20deg) !important;
}

/* Navigation tabs */
#p-cactions,
#p-namespaces,
.vector-menu-tabs,
.vector-tab-noaction {
background-color: transparent !important;
}

#p-namespaces li a,
#p-cactions li a,
.vector-menu-tabs li a {
background-color: var(--bg-panel) !important;
color: var(--text-secondary) !important;
border-color: var(--border-faint) !important;
font-family: var(--font-ui) !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
transition: color 0.2s, background-color 0.2s !important;
}

#p-namespaces li.selected a,
#p-cactions li.selected a,
.vector-menu-tabs li.selected a {
background-color: var(--bg-mid) !important;
color: var(--accent-lavender) !important;
border-bottom-color: var(--bg-mid) !important;
}

#p-namespaces li a:hover,
#p-cactions li a:hover {
background-color: var(--bg-elevated) !important;
color: var(--text-accent) !important;
}

/* ═══════════════════════════════════════════════════════
SIDEBAR / PANEL
═══════════════════════════════════════════════════════ */

#mw-panel,
.mw-sidebar,
.vector-sidebar,
#sidebar {
background-color: var(--bg-panel) !important;
border-right: 1px solid var(--border-faint) !important;
}

.portal,
.vector-menu {
border-bottom: 1px solid var(--border-faint) !important;
padding-bottom: 12px !important;
margin-bottom: 12px !important;
}

.portal h3,
.vector-menu-heading,
.vector-menu h3 {
font-family: var(--font-display) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--text-dim) !important;
padding: 8px 12px 4px !important;
}

/* Sidebar links */
#mw-panel a,
.mw-sidebar a,
.portal a,
.vector-menu a {
color: var(--text-secondary) !important;
font-family: var(--font-ui) !important;
font-size: 15px !important;
padding: 3px 12px !important;
display: block !important;
border-radius: 2px !important;
transition: color 0.2s, background 0.2s !important;
}

#mw-panel a:hover,
.mw-sidebar a:hover,
.portal a:hover,
.vector-menu a:hover {
color: var(--accent-lavender) !important;
background-color: var(--bg-elevated) !important;
text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════
PAGE TITLE
═══════════════════════════════════════════════════════ */

#firstHeading,
.firstHeading,
.page-header__title {
font-family: var(--font-display) !important;
font-size: 2.1rem !important;
font-weight: 600 !important;
color: var(--text-accent) !important;
letter-spacing: 0.06em !important;
border-bottom: 1px solid var(--border-mid) !important;
padding-bottom: 0.4em !important;
margin-bottom: 1em !important;
text-shadow:
0 0 30px rgba(160, 122, 212, 0.25),
0 0 60px rgba(160, 122, 212, 0.1) !important;
position: relative;
}

#firstHeading::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 80px;
height: 1px;
background: linear-gradient(90deg, var(--accent-lavender), transparent);
}

/* ═══════════════════════════════════════════════════════
HEADINGS
═══════════════════════════════════════════════════════ */

.mw-body-content h1,
.mw-body-content h2 {
font-family: var(--font-display) !important;
color: var(--text-accent) !important;
letter-spacing: 0.04em !important;
border-bottom: 1px solid var(--border-faint) !important;
padding-bottom: 0.25em !important;
margin-top: 1.8em !important;
}

.mw-body-content h2 {
font-size: 1.45rem !important;
font-weight: 600 !important;
position: relative;
}

.mw-body-content h2::before {
content: '✦';
font-size: 0.6rem;
color: var(--accent-lavender);
opacity: 0.7;
margin-right: 0.5em;
vertical-align: middle;
}

.mw-body-content h3 {
font-family: var(--font-display) !important;
font-size: 1.15rem !important;
font-weight: 400 !important;
color: var(--accent-teal) !important;
letter-spacing: 0.05em !important;
margin-top: 1.4em !important;
font-style: italic;
}

.mw-body-content h4,
.mw-body-content h5 {
font-family: var(--font-ui) !important;
color: var(--text-secondary) !important;
font-size: 1rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════
BODY TEXT & PARAGRAPHS
═══════════════════════════════════════════════════════ */

.mw-body-content p {
font-family: var(--font-body) !important;
font-size: 17px !important;
line-height: 1.8 !important;
color: var(--text-primary) !important;
}

.mw-body-content em,
.mw-body-content i {
color: var(--text-accent) !important;
font-style: italic !important;
}

.mw-body-content strong,
.mw-body-content b {
color: var(--accent-lavender) !important;
font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════
LINKS
═══════════════════════════════════════════════════════ */

.mw-body-content a,
a {
color: var(--link-idle) !important;
text-decoration: none !important;
border-bottom: 1px solid transparent !important;
transition: color 0.18s, border-color 0.18s, text-shadow 0.18s !important;
}

.mw-body-content a:hover,
a:hover {
color: var(--link-hover) !important;
border-bottom-color: var(--link-hover) !important;
text-shadow: 0 0 12px rgba(176, 212, 240, 0.35) !important;
}

.mw-body-content a:visited,
a:visited {
color: var(--link-visited) !important;
}

/* Red links (missing pages) */
.new,
a.new {
color: var(--link-red) !important;
}

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

.mw-body-content a.external::after {
content: ' ↗';
font-size: 0.7em;
opacity: 0.5;
vertical-align: super;
}

/* ═══════════════════════════════════════════════════════
TABLE OF CONTENTS
═══════════════════════════════════════════════════════ */

#toc,
.toc,
#vector-toc,
.vector-toc {
background-color: var(--bg-panel) !important;
border: 1px solid var(--border-mid) !important;
border-radius: 4px !important;
box-shadow: 0 4px 24px rgba(8, 6, 15, 0.5) !important;
font-family: var(--font-ui) !important;
position: relative;
overflow: hidden;
}

#toc::before,
.toc::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent-lavender), var(--accent-teal), transparent);
}

#toc h2,
.toc h2,
.toctitle,
#vector-toc .vector-toc-toggle {
font-family: var(--font-display) !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--text-dim) !important;
border-bottom: none !important;
padding: 12px 14px 8px !important;
}

#toc h2::before,
.toc h2::before {
display: none !important;
}

#toc a,
.toc a,
.vector-toc a {
color: var(--text-secondary) !important;
font-size: 14px !important;
line-height: 1.5 !important;
border-bottom: none !important;
}

#toc a:hover,
.toc a:hover,
.vector-toc a:hover {
color: var(--accent-lavender) !important;
border-bottom: none !important;
}

.vector-toc .vector-toc-link.vector-toc-level-1-active {
color: var(--accent-lavender) !important;
background: var(--bg-elevated) !important;
border-radius: 2px !important;
}

/* ═══════════════════════════════════════════════════════
TABLES
═══════════════════════════════════════════════════════ */

.wikitable,
.mw-body-content table {
background-color: var(--bg-surface) !important;
border: 1px solid var(--border-mid) !important;
border-collapse: collapse !important;
font-family: var(--font-ui) !important;
font-size: 15px !important;
box-shadow: 0 2px 16px rgba(8, 6, 15, 0.4) !important;
}

.wikitable th,
.mw-body-content th {
background-color: var(--bg-elevated) !important;
color: var(--accent-lavender) !important;
border: 1px solid var(--border-mid) !important;
font-family: var(--font-display) !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
padding: 8px 12px !important;
}

.wikitable td,
.mw-body-content td {
border: 1px solid var(--border-faint) !important;
color: var(--text-primary) !important;
padding: 7px 12px !important;
}

.wikitable tr:hover td {
background-color: rgba(160, 122, 212, 0.05) !important;
}

/* Sortable table arrows */
.wikitable th.headerSort::after {
color: var(--accent-lavender) !important;
}

/* ═══════════════════════════════════════════════════════
INFOBOXES & SIDEBOX
═══════════════════════════════════════════════════════ */

.infobox,
.sidebar,
.mbox-small {
background-color: var(--bg-panel) !important;
border: 1px solid var(--border-mid) !important;
font-family: var(--font-ui) !important;
font-size: 14px !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 20px rgba(8, 6, 15, 0.5) !important;
}

.infobox th,
.infobox caption {
background-color: var(--bg-elevated) !important;
color: var(--accent-lavender) !important;
font-family: var(--font-display) !important;
letter-spacing: 0.06em !important;
}

.infobox td {
border-color: var(--border-faint) !important;
}

/* ═══════════════════════════════════════════════════════
CODE & PRE
═══════════════════════════════════════════════════════ */

code,
kbd,
samp {
background-color: var(--bg-elevated) !important;
color: var(--accent-teal) !important;
font-family: var(--font-mono) !important;
font-size: 1rem !important;
border: 1px solid var(--border-faint) !important;
padding: 1px 5px !important;
border-radius: 2px !important;
}

pre,
.mw-code {
background-color: var(--bg-surface) !important;
color: var(--accent-teal) !important;
font-family: var(--font-mono) !important;
font-size: 15px !important;
border: 1px solid var(--border-mid) !important;
border-radius: 4px !important;
padding: 16px !important;
overflow-x: auto !important;
line-height: 1.6 !important;
box-shadow: inset 0 0 20px rgba(8, 6, 15, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════
BLOCKQUOTE
═══════════════════════════════════════════════════════ */

blockquote {
border-left: 3px solid var(--accent-lavender) !important;
background-color: var(--bg-panel) !important;
color: var(--text-secondary) !important;
font-style: italic !important;
font-family: var(--font-body) !important;
padding: 12px 20px !important;
margin: 1.5em 0 !important;
border-radius: 0 4px 4px 0 !important;
position: relative;
}

blockquote::before {
content: '"';
font-family: var(--font-display);
font-size: 4rem;
color: var(--accent-lavender);
opacity: 0.15;
position: absolute;
top: -10px;
left: 10px;
line-height: 1;
}

/* ═══════════════════════════════════════════════════════
IMAGES & THUMBNAILS
═══════════════════════════════════════════════════════ */

.thumb,
.tmulti {
background-color: var(--bg-panel) !important;
border: 1px solid var(--border-mid) !important;
box-shadow: 0 4px 20px rgba(8, 6, 15, 0.5) !important;
}

.thumbcaption,
.thumbinner .thumbcaption {
color: var(--text-dim) !important;
font-family: var(--font-ui) !important;
font-size: 13px !important;
font-style: italic !important;
border-top: 1px solid var(--border-faint) !important;
padding-top: 6px !important;
}

/* Slightly dreamy image filter */
.mw-body-content .thumb img {
filter: saturate(0.85) brightness(0.92) !important;
transition: filter 0.4s ease !important;
}

.mw-body-content .thumb img:hover {
filter: saturate(1.0) brightness(1.0) !important;
}

/* ═══════════════════════════════════════════════════════
SEARCH BOX
═══════════════════════════════════════════════════════ */

#searchInput,
.vector-search-box input,
input[name="search"],
.oo-ui-textInputWidget input {
background-color: var(--bg-elevated) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-mid) !important;
border-radius: 3px !important;
font-family: var(--font-ui) !important;
font-size: 15px !important;
padding: 6px 10px !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
}

#searchInput:focus,
.vector-search-box input:focus,
input[name="search"]:focus {
border-color: var(--accent-lavender) !important;
box-shadow: 0 0 0 2px var(--glow-purple) !important;
outline: none !important;
}

#searchInput::placeholder {
color: var(--text-dim) !important;
font-style: italic !important;
}

#searchButton,
.vector-search-box-btn {
background-color: var(--bg-elevated) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border-mid) !important;
transition: background 0.2s !important;
}

#searchButton:hover,
.vector-search-box-btn:hover {
background-color: var(--bg-highlight) !important;
color: var(--accent-lavender) !important;
}

/* ═══════════════════════════════════════════════════════
EDIT TOOLBAR & BUTTONS
═══════════════════════════════════════════════════════ */

#toolbar,
.wikiEditor-ui-toolbar {
background-color: var(--bg-elevated) !important;
border-color: var(--border-mid) !important;
}

textarea#wpTextbox1,
.wikiEditor-ui-text textarea {
background-color: var(--bg-surface) !important;
color: var(--text-primary) !important;
border-color: var(--border-mid) !important;
font-family: var(--font-mono) !important;
font-size: 15px !important;
line-height: 1.6 !important;
caret-color: var(--accent-lavender) !important;
}

/* Buttons */
.mw-ui-button,
input[type="submit"],
input[type="button"],
button {
background-color: var(--bg-elevated) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border-mid) !important;
font-family: var(--font-ui) !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
border-radius: 2px !important;
transition: all 0.2s !important;
}

.mw-ui-button:hover,
input[type="submit"]:hover {
background-color: var(--bg-highlight) !important;
color: var(--accent-lavender) !important;
border-color: var(--accent-lavender) !important;
box-shadow: 0 0 8px var(--glow-purple) !important;
}

.mw-ui-button.mw-ui-progressive,
.mw-ui-button.mw-ui-primary {
background-color: rgba(160, 122, 212, 0.15) !important;
color: var(--accent-lavender) !important;
border-color: var(--accent-lavender) !important;
}

/* ═══════════════════════════════════════════════════════
CATEGORIES
═══════════════════════════════════════════════════════ */

#catlinks,
.catlinks {
background-color: var(--bg-panel) !important;
border: 1px solid var(--border-faint) !important;
border-radius: 4px !important;
font-family: var(--font-ui) !important;
font-size: 13px !important;
color: var(--text-dim) !important;
padding: 8px 14px !important;
margin-top: 2em !important;
}

#catlinks a,
.catlinks a {
color: var(--text-secondary) !important;
font-size: 13px !important;
border-bottom: none !important;
}

#catlinks a:hover,
.catlinks a:hover {
color: var(--accent-teal) !important;
}

/* ═══════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════ */

#footer,
.mw-footer {
background-color: var(--bg-panel) !important;
border-top: 1px solid var(--border-faint) !important;
color: var(--text-dim) !important;
font-family: var(--font-ui) !important;
font-size: 13px !important;
}

#footer a,
.mw-footer a {
color: var(--text-dim) !important;
border-bottom: none !important;
}

#footer a:hover,
.mw-footer a:hover {
color: var(--text-secondary) !important;
}

#footer-icons img {
filter: grayscale(1) brightness(0.5) !important;
transition: filter 0.2s !important;
}

#footer-icons img:hover {
filter: grayscale(0.4) brightness(0.8) !important;
}

/* ═══════════════════════════════════════════════════════
MESSAGE BOXES (hatnotes, warnings)
═══════════════════════════════════════════════════════ */

.mbox-small,
.ambox,
.tmbox,
.cmbox,
.fmbox {
background-color: var(--bg-panel) !important;
border-color: var(--border-mid) !important;
color: var(--text-secondary) !important;
}

.ambox-notice {
border-left-color: var(--accent-lavender) !important;
}

.ambox-warning {
border-left-color: var(--accent-rust) !important;
}

.ambox-delete {
border-left-color: var(--link-red) !important;
}

/* ═══════════════════════════════════════════════════════
SPECIAL PAGES & DIFF
═══════════════════════════════════════════════════════ */

.diff-addedline td {
background-color: rgba(86, 169, 159, 0.08) !important;
border-color: rgba(86, 169, 159, 0.25) !important;
}

.diff-deletedline td {
background-color: rgba(196, 120, 102, 0.08) !important;
border-color: rgba(196, 120, 102, 0.25) !important;
}

.diff-context td {
background-color: var(--bg-surface) !important;
color: var(--text-dim) !important;
}

ins { color: var(--accent-teal) !important; }
del { color: var(--accent-rust) !important; }

/* ─── Special Page lists ────────────────────────────── */

.mw-spcontent,
.special-pages-content {
font-family: var(--font-ui) !important;
}

/* ═══════════════════════════════════════════════════════
DECORATIVE DREAMCORE ELEMENTS
(injected via Common.js, styled here)
═══════════════════════════════════════════════════════ */

.dreamcore-deco {
position: fixed;
pointer-events: none;
z-index: 1;
opacity: 0;
animation: fadeInDeco 3s ease forwards;
}

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

/* Floating symbols */
.deco-symbol {
font-size: 18px;
color: var(--text-dim);
animation: floatSymbol 8s ease-in-out infinite;
opacity: 0.25 !important;
user-select: none;
}

@keyframes floatSymbol {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-12px) rotate(4deg); }
100% { transform: translateY(0px) rotate(0deg); }
}

/* SVG decoration elements */
.deco-mushroom,
.deco-eye,
.deco-star {
width: 36px;
height: 36px;
opacity: 0.18 !important;
}

/* ═══════════════════════════════════════════════════════
SCROLLBAR
═══════════════════════════════════════════════════════ */

::-webkit-scrollbar {
width: 6px;
height: 6px;
}

::-webkit-scrollbar-track {
background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
background: var(--bg-highlight);
border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--accent-lavender);
}

/* ═══════════════════════════════════════════════════════
TEXT SELECTION
═══════════════════════════════════════════════════════ */

::selection {
background-color: rgba(160, 122, 212, 0.25) !important;
color: var(--text-accent) !important;
}

/* ═══════════════════════════════════════════════════════
HORIZONTAL RULE
═══════════════════════════════════════════════════════ */

hr {
border: none !important;
border-top: 1px solid var(--border-faint) !important;
margin: 2em 0 !important;
position: relative;
}

/* ═══════════════════════════════════════════════════════
LISTS
═══════════════════════════════════════════════════════ */

.mw-body-content ul li::marker {
color: var(--accent-lavender);
content: '◈ ';
}

.mw-body-content ol {
counter-reset: item;
}

.mw-body-content ol li {
counter-increment: item;
}

.mw-body-content ol li::marker {
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 13px;
}

.mw-body-content dl dt {
color: var(--accent-lavender) !important;
font-family: var(--font-display) !important;
font-size: 0.95em !important;
}

.mw-body-content dl dd {
border-left: 2px solid var(--border-faint) !important;
padding-left: 12px !important;
color: var(--text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════
GLITCH EFFECT — applied by JS to page title
═══════════════════════════════════════════════════════ */

@keyframes glitchShift {
0% { clip-path: inset(0 0 98% 0); transform: translateX(-2px); }
10% { clip-path: inset(20% 0 60% 0); transform: translateX(2px); }
20% { clip-path: inset(60% 0 10% 0); transform: translateX(-1px); }
30% { clip-path: inset(10% 0 80% 0); transform: translateX(1px); }
40% { clip-path: inset(80% 0 2% 0); transform: translateX(-2px); }
50% { clip-path: inset(0 0 98% 0); transform: translateX(0); }
100% { clip-path: inset(0 0 98% 0); transform: translateX(0); }
}

.glitch-title {
position: relative !important;
}

.glitch-title::before,
.glitch-title::after {
content: attr(data-title) !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
}

.glitch-title::before {
color: var(--accent-teal) !important;
animation: glitchShift 6s infinite !important;
opacity: 0.5 !important;
}

.glitch-title::after {
color: var(--accent-lavender) !important;
animation: glitchShift 6s 0.5s infinite !important;
opacity: 0.4 !important;
}

/* ═══════════════════════════════════════════════════════
WATCHLIST & USER PAGE SPECIFIC
═══════════════════════════════════════════════════════ */

.mw-changeslist-line {
border-bottom: 1px solid var(--border-faint) !important;
padding: 4px 0 !important;
font-family: var(--font-ui) !important;
}

.mw-changeslist-line:hover {
background-color: var(--bg-surface) !important;
}

/* ═══════════════════════════════════════════════════════
VECTOR 2022 SPECIFIC
═══════════════════════════════════════════════════════ */

.skin-vector-2022 .vector-toc-landmark {
background: var(--bg-panel) !important;
border-color: var(--border-faint) !important;
}

.skin-vector-2022 .mw-table-of-contents-container {
background: transparent !important;
}

.skin-vector-2022 .vector-column-start {
background: var(--bg-panel) !important;
}

.skin-vector-2022 #vector-page-titlebar {
background: transparent !important;
border-bottom: 1px solid var(--border-mid) !important;
}

/* ═══════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════ */

@media screen and (max-width: 720px) {
#firstHeading, .firstHeading {
font-size: 1.6rem !important;
}

.mw-body-content p {
font-size: 16px !important;
}

#mw-panel, .mw-sidebar {
background-color: var(--bg-deep) !important;
}
}

/* ═══════════════════════════════════════════════════════
PRINT
═══════════════════════════════════════════════════════ */

@media print {
body, #content, .mw-body {
background: white !important;
color: black !important;
}
a { color: #333 !important; }
#mw-head, #mw-panel, #footer { display: none !important; }
}