MB Wiki - User contributions [en]

MediaWiki:Common.css

2026-05-19T06:46:50Z

Ais:

/*************************************🎮**************************************
*
╔═══════════════════════════════════════════════════════════════════╗
COMMON.CSS (vA0.1)
✦ M*n* B**** ✦
╚═══════════════════════════════════════════════════════════════════╝
*
*******************************************************************************/

/*
*This page contains the entire stylesheet for the MB Wiki.
*We urge you "not to edit" this page "directly".
*Some of the code inherited from coralisland.wiki.
*Any functional issue please report to our wiki-team at the official discord channel

*Imports will be starting below this very line;
*/
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap');

/* ============================================
ALL @IMPORTS MUST BE AT THE VERY TOP
============================================ */

@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Colors.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Module:Documentation.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Documentation.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Infobox.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Tables.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:MessageBox.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:CustomTabs.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Navbox.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Icons.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Dialogue.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Cards.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Tabbers.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Mobile.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Recipe.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Modal.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:AceEditor.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:CodeMirror.css&action=raw&ctype=text/css");

/* ============================================
TOKEN ROOT ARCHITECTURE
============================================ */

/* ✦ THEME MANA (LIGHT) - DEFAULT ✦ */
:root {
/* 1. Core Color Palette */
--color-primary: #88eee0;
--color-secondary: #d9ffe9;
--color-accent: #87b4b7;

/* 2. Semantic Backgrounds */
--theme-body-bg: var(--color-secondary);
--theme-card-bg: rgba(255, 255, 255, 0.85);
--theme-card-bg-hover: #ffffff;

/* 3. Semantic Text Colors */
--theme-text-primary: #1a2b3c;
--theme-text-muted: #4a5b6c;
--theme-heading-color: #0d1b2a;

/* 4. Borders & Interactive Elements */
--theme-border-color: var(--color-accent);
--theme-border-color-rgb: 135, 180, 183;
--theme-link-color: #006b75;
--theme-link-hover: #004a52;

/* 5. Structures */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.05);

/* Main Page Layout Layout */
--main-page-layout--desktop: 'banner banner banner' 'about about updates' 'starts starts starts' 'items items items' 'characters characters characters' 'enemies enemies enemies' 'area area area';
--main-page-layout--tablet: 'banner banner' 'about updates' 'starts starts' 'items items' 'characters characters' 'enemies enemies' 'area area';
--main-page-layout--mobile: 'banner' 'about' 'updates' 'starts' 'items' 'characters' 'enemies' 'area';
}

/* ✦ THEME BREAK (DARK) - TOGGLE ✦ */
html.theme-break {
/* 1. Core Color Palette */
--color-primary: #12435e;
--color-secondary: #0e344d;
--color-accent: #7ff6e3;

/* 2. Semantic Backgrounds */
--theme-body-bg: var(--color-secondary);
--theme-card-bg: var(--color-primary);
--theme-card-bg-hover: #164f6f;

/* 3. Semantic Text Colors */
--theme-text-primary: #eaeef2;
--theme-text-muted: #87b4b7;
--theme-heading-color: #ffffff;

/* 4. Borders & Interactive Elements */
--theme-border-color: var(--color-accent);
--theme-border-color-rgb: 127, 246, 227;
--theme-link-color: var(--color-accent);
--theme-link-hover: #aafff0;

/* 5. Structures */
--shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.3);
}
/* ============================================
BASE LAYOUT & STRUCTURAL RESET
============================================ */

/* 1. Universal Box Sizing */
*, *::before, *::after {
box-sizing: border-box;
}

/* 2. MediaWiki Body & Container Reset */
body {
background-color: var(--theme-body-bg) !important;
color: var(--theme-text-primary);
font-family: 'Fredoka', sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Stripping native MediaWiki container styles */
.mw-body, #content {
background: transparent !important;
border: none !important;
color: var(--theme-text-primary);
}

/* 3. Typography Normalization */
h1, h2, h3, h4, h5, h6 {
color: var(--theme-heading-color);
margin-top: 0;
font-weight: 600;
}

/* Remove MediaWiki's harsh default underline on H1/H2 */
.mw-body h1, .mw-body h2 {
border-bottom: 2px solid var(--theme-border-color);
padding-bottom: 0.25em;
}

/* 4. Hyperlink Standardization */
a {
color: var(--theme-link-color);
text-decoration: none;
transition: color 0.2s ease;
}

a:hover, a:focus {
color: var(--theme-link-hover);
text-decoration: underline;
}

a:visited {
color: var(--theme-link-color);
}

/* 5. Responsive Media & Selection */
img, video {
max-width: 100%;
height: auto;
}

::selection {
background: var(--color-primary);
color: #000;
}
::-moz-selection {
background: var(--color-primary);
color: #000;
}

/* ============================================
BASE LAYOUT (MAPPED TO TOKENS)
============================================ */
html, body {
background-color: var(--theme-body-bg) !important;
background-image: none !important;
color: var(--theme-text-primary);
transition: background-color 0.3s ease, color 0.3s ease;
}

.mw-body {
margin-top: -1px;
border: 1px solid var(--theme-border-color);
border-radius: var(--radius-sm);
background-color: transparent;
}

/* Hide default elements */
.mobileHide, .mobile-only, .no-desktop {
display: none !important;
}

/* Fix for hidden H1 on main page */
body.page-Main_Page.action-view h1.firstHeading,
body.page-Main_Page.action-submit h1.firstHeading {
display: none;
}

/* ============================================
MAIN PAGE GRID LAYOUT
============================================ */
#mp-container {
display: grid;
gap: 2rem;
padding: 1rem;
max-width: 1400px;
margin: 0 auto;
}

/* Desktop Layout */
@media (min-width: 1024px) {
#mp-container {
grid-template-areas: var(--main-page-layout--desktop);
grid-template-columns: repeat(3, 1fr);
}
}

/* Tablet Layout */
@media (min-width: 768px) and (max-width: 1023px) {
#mp-container {
grid-template-areas: var(--main-page-layout--tablet);
grid-template-columns: repeat(2, 1fr);
}
}

/* Mobile Layout */
@media (max-width: 767px) {
#mp-container {
grid-template-areas: var(--main-page-layout--mobile);
grid-template-columns: 1fr;
gap: 1rem;
}
}

/* MP Box styling */
.mp-box {
animation: fadeInUp 0.5s ease forwards;
opacity: 0;
}

/* Staggered animations */
.mp-box:nth-child(1) { animation-delay: 0.05s; }
.mp-box:nth-child(2) { animation-delay: 0.1s; }
.mp-box:nth-child(3) { animation-delay: 0.15s; }
.mp-box:nth-child(4) { animation-delay: 0.2s; }
.mp-box:nth-child(5) { animation-delay: 0.25s; }
.mp-box:nth-child(6) { animation-delay: 0.3s; }
.mp-box:nth-child(7) { animation-delay: 0.35s; }
.mp-box:nth-child(8) { animation-delay: 0.4s; }

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

/* ============================================
MAIN PAGE CARDS & GRIDS
============================================ */

/* Main Grid Wrapper */
.main-page-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 1rem;
}

/* 1. Game Intro Cards */
.game-intro-card {
background-color: var(--theme-card-bg);
border-radius: var(--radius-lg); /* From Step 1 */
padding: 1.25rem;
border: 1px solid var(--theme-border-color);
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
height: 100%;
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
}

.game-intro-card:hover {
background-color: var(--theme-card-bg-hover);
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
border-color: var(--color-primary);
}

/* 2. Header Elements */
.game-header {
margin-bottom: 1rem;
position: relative;
}

.mana-text {
font-family: 'Fredoka', sans-serif;
font-size: 1.5rem;
font-weight: 600;
margin: 0;

/* Gradient */
background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;

/* Flexbox aligning the icon perfectly */
display: flex;
align-items: center;
gap: 8px;
letter-spacing: 0.5px;
}

.mana-line {
height: 3px;
background: linear-gradient(90deg, var(--color-accent), transparent);
margin-top: 0.5rem;
width: 100%;
border-radius: 2px;
}

/* 3. Card Content & Headings */
.game-content {
color: var(--theme-text-primary);
line-height: 1.6;
flex-grow: 1;
}

.heading-char {
font-size: 1.1rem;
font-weight: 600;
margin: 0.5rem 0;
padding-bottom: 0.25rem;
border-bottom: 2px solid var(--theme-border-color);
display: inline-block;
transition: border-color 0.3s ease;
}

.heading-char a {
color: var(--theme-heading-color);
text-decoration: none;
transition: color 0.2s ease;
}

.heading-char a:hover {
color: var(--color-accent);
}

/* 4. Auto Grid Lists (The Links) */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0.75rem 0 0 0;
}

.auto-grid li {
padding: 0;
}

/* Elevated List Link Styling */
.auto-grid li a {
display: block;
padding: 0.35rem 0.5rem;
color: var(--theme-link-color);
text-decoration: none;
border-radius: var(--radius-sm);
background-color: rgba(127, 127, 127, 0.05);
border: 1px solid transparent;
transition: all 0.2s ease;
}

.auto-grid li a:hover {
color: var(--theme-link-hover);
background-color: var(--theme-body-bg);
border-color: var(--theme-border-color);
transform: translateX(3px);
}
/* ============================================
BANNER, WIKI COMPONENTS & SCROLLBAR
============================================ */

/* 1. BANNER SECTION */
#mp-box-banner .mp-body {
background: linear-gradient(135deg, var(--color-secondary), var(--theme-body-bg));
border-radius: var(--radius-lg);
padding: 2rem;
text-align: center;
border: 1px solid var(--theme-border-color);
box-shadow: var(--shadow-soft);
transition: background 0.3s ease, border-color 0.3s ease;
}

/* Social links */
.social {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
}

.iconname {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--theme-card-bg);
border: 1px solid var(--theme-border-color);
padding: 0.5rem 1rem;
border-radius: var(--radius-md);
transition: all 0.2s ease;
}

.iconname:hover {
background: var(--color-primary);
border-color: var(--color-accent);
transform: translateY(-2px);
}

.iconname a {
color: var(--theme-text-primary) !important;
text-decoration: none;
font-weight: 500;
}

/* 2. WIKI FIXES & IMPROVEMENTS */
.wikiEditor-ui-text > .ui-resizable {
width: 100% !important;
max-width: 100%;
}

ul { list-style: disc; }

h2 .mw-headline, h3 .mw-headline, h4 .mw-headline { font-weight: 500; }
.vector-body h3, .vector-body h4, .vector-body h5, .vector-body h6 { margin-bottom: 4px; }

/* Categories */
.catlinks {
border-color: var(--theme-border-color);
border-radius: var(--radius-md);
background-color: var(--theme-card-bg);
padding: 10px;
}

/* Code blocks */
code, pre {
background-color: var(--theme-card-bg);
color: var(--theme-text-primary);
border: 1px solid var(--theme-border-color);
border-radius: var(--radius-sm);
padding: 2px 6px;
font-family: Consolas, Eupheima UCAS, Monaco, Menlo, monospace;
}

code.code-block-table { display: table; line-height: 21px; padding: 8px; }
.code-block-table * { font: 14px Consolas, Eupheima UCAS, Monaco, Menlo, monospace; }
.code-block { display: inline-block; line-height: 21px; }

/* Table of Contents */
.toc {
padding: 12px 16px;
border-radius: var(--radius-md);
background-color: var(--theme-card-bg);
border: 1px solid var(--theme-border-color);
margin-top: 16px;
box-shadow: var(--shadow-soft);
}

.toctogglelabel { color: var(--theme-link-color); }
.tocnumber { color: var(--theme-text-muted); }
.vector-body .toc h2 { font-family: 'Fredoka', sans-serif; }

/* Hatnote */
.hatnote {
border-left: 4px solid var(--color-accent);
padding: 8px 12px;
border-radius: var(--radius-sm);
background-color: var(--theme-card-bg);
margin: 8px 0;
}

/* Variables styling */
span.variable { opacity: 0.65; }
span.variable::after { opacity: 0.65; content: ">"; }
span.variable::before { opacity: 0.65; content: "<"; }

/* Pull quotes */
.pull-quote { font-style: italic; margin: 0; padding: 0 30px 8px !important; }
.pull-quote::before {
color: var(--color-accent);
content: "“";
display: block;
font-size: 96px;
font-style: normal;
line-height: 72px;
margin: 4px 0 -45px -5px;
}
.pull-quote__source::before { content: "— "; margin-bottom: 8px; }
.pull-quote__text { margin-bottom: 4px; }

/* Gallery & Changelist */
.gallerytext { text-align: center; font-size: 100%; }
.changelist-header { display: flex; justify-content: space-between; align-items: center; font-size: 88%; margin: 0.3em 0; }
.changelist-content { overflow: auto; max-height: 384px; padding: 1em; box-sizing: border-box; border-radius: var(--radius-md); }
.changelist-border { border: 1px solid var(--theme-border-color); border-left: 6px solid var(--color-accent); }

/* Chat wrapper */
.chat-wrapper { display: flex; flex-direction: column; }
.chat-player, .chat-npc { display: flex; flex-direction: row; gap: 0.5em; }
.chat-player-speaker { white-space: nowrap; min-width: 70px; color: #43b581; font-weight: 600; }
.chat-npc-speaker { white-space: nowrap; min-width: 70px; color: #f04747; font-weight: 600; }

/* 3. RESPONSIVE IMPROVEMENTS */
@media (max-width: 768px) {
.game-intro-card { padding: 1rem; }
.mana-text { font-size: 1.25rem; }
.social { gap: 0.5rem; }
.iconname { padding: 0.35rem 0.75rem; font-size: 0.9rem; }
#mp-box-banner .mp-body { padding: 1rem; }
}

/* 4. CUSTOM SCROLLBAR */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
background: var(--theme-body-bg);
border-radius: 0px;
}
::-webkit-scrollbar-thumb {
background: var(--color-accent);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--theme-link-hover); }

/* 5. UTILITY CLASSES */
.text-center { text-align: center; }
.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.p-2 { padding: 0.5rem; }
/* ============================================
WIKI COMPONENTS
============================================ */

/* 1. WIKITABLES */
table.wikitable {
background-color: var(--theme-card-bg);
color: var(--theme-text-primary);
border: 1px solid var(--theme-border-color);
border-collapse: collapse;
margin: 1em 0;
width: 100%; /* Encourages responsive behavior */
box-shadow: var(--shadow-soft);
}

table.wikitable > tr > th,
table.wikitable > tr > td,
table.wikitable > * > tr > th,
table.wikitable > * > tr > td {
border: 1px solid var(--theme-border-color);
padding: 0.5em 0.75em;
}

/* Table Headers */
table.wikitable > tr > th,
table.wikitable > * > tr > th {
background-color: var(--color-primary);
color: var(--theme-heading-color);
font-weight: 600;
text-align: center;
}

table.wikitable > tbody > tr:hover {
background-color: rgba(127, 127, 127, 0.05);
}

/* 2. INFOBOXES */
.infobox {
float: right;
clear: right;
margin: 0 0 1em 1em;
width: 300px;
background-color: var(--theme-card-bg);
border: 1px solid var(--theme-border-color);
border-radius: var(--radius-md);
padding: 10px;
box-shadow: var(--shadow-soft);
font-size: 0.9em;
color: var(--theme-text-primary);
transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Infobox Headers */
.infobox th {
background-color: var(--color-secondary);
color: var(--theme-heading-color);
text-align: center;
padding: 5px;
border-radius: var(--radius-sm);
}

.infobox td {
padding: 4px 5px;
border-bottom: 1px solid rgba(127, 127, 127, 0.1);
}

.infobox tr:last-child td {
border-bottom: none;
}

/* 3. NAVBOXES */
.navbox {
background-color: var(--theme-card-bg);
border: 1px solid var(--theme-border-color);
border-radius: var(--radius-md);
margin: 1.5em 0;
padding: 2px;
text-align: center;
box-shadow: var(--shadow-soft);
width: 100%;
clear: both;
}

.navbox th {
background-color: var(--color-primary);
color: var(--theme-heading-color);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
padding: 6px;
font-weight: 600;
}

/* Group Headers inside Navbox */
.navbox .navbox-group {
background-color: var(--color-secondary);
color: var(--theme-text-primary);
font-weight: 600;
padding: 4px 8px;
white-space: nowrap;
border-right: 2px solid var(--theme-body-bg);
}

.navbox .navbox-list {
text-align: left;
padding: 4px 8px;
}

/* Striping for Navbox lists */
.navbox .navbox-even {
background-color: rgba(127, 127, 127, 0.03);
}
/* ============================================
THEME TOGGLE BUTTON
============================================ */
.floating-theme-toggle {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
padding: 10px 16px;
background-color: var(--theme-card-bg);
color: var(--theme-heading-color);
border: 2px solid var(--theme-border-color);
border-radius: var(--radius-lg);
font-family: 'Fredoka', sans-serif;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
box-shadow: var(--shadow-soft);
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
backdrop-filter: blur(8px);
}

.floating-theme-toggle:hover {
background-color: var(--color-primary);
border-color: var(--color-accent);
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
color: #000;
}

MediaWiki:Common.js

2026-05-19T04:08:16Z

Ais: fix title set.

/* ============================================
THEME TOGGLER
============================================ */

// 1. INSTANT EXECUTION (PREVENTS FLASH OF WRONG THEME)
// This runs the millisecond the script loads, before the body renders.
(function() {
var savedTheme = localStorage.getItem('mb-wiki-theme');
if (savedTheme === 'break') {
document.documentElement.classList.add('theme-break');
}
})();

// 2. DOM READY EXECUTION (UI BINDING)
$(function() {
var isBreak = document.documentElement.classList.contains('theme-break');

var $btn = $('<button>', {
id: 'theme-toggle',
class: 'floating-theme-toggle',
text: isBreak ? '✦ Switch to Mana' : '✦ Switch to Break',
title: 'Toggle Light/Dark Theme'
});

$('body').append($btn);

$btn.on('click', function() {
var $html = $('html');

if ($html.hasClass('theme-break')) {
// Switching to Mana (Light)
$html.removeClass('theme-break');
localStorage.setItem('mb-wiki-theme', 'mana');
$(this).text('✦ Switch to Break');
} else {
// Switching to Break (Dark)
$html.addClass('theme-break');
localStorage.setItem('mb-wiki-theme', 'break');
$(this).text('✦ Switch to Mana');
}
});
});
/* ============================================
TITTLE FIX
============================================ */
(function() {
// Only on main page
if (mw.config.get('wgPageName') !== 'Main_Page' &&
!window.location.href.includes('Main_Page')) return;

console.log('=== APPLYING EMERGENCY TITLE FIX ===');

// 1. IMMEDIATELY set the title
document.title = 'MB Wiki - The Official Wiki';

// 2. Override the heading
function fixHeading() {
var heading = document.querySelector('#firstHeading, h1.firstHeading, .mw-page-title-main');
if (heading) {
heading.textContent = 'MB Wiki - The Official Wiki';
heading.style.display = 'none';
heading.style.visibility = 'hidden';
} else {
// Create heading if it doesn't exist
var newHeading = document.createElement('h1');
newHeading.id = 'firstHeading';
newHeading.className = 'firstHeading';
newHeading.textContent = 'MB Wiki - The Official Wiki';
var content = document.querySelector('#content, .mw-body');
if (content) content.prepend(newHeading);
}
}

// 3. Run now and keep running
fixHeading();
setTimeout(fixHeading, 100);
setTimeout(fixHeading, 500);
setTimeout(fixHeading, 1000);
setTimeout(fixHeading, 2000);

// 4. Monitor and fix any time title changes
var lastTitle = document.title;
setInterval(function() {
if (document.title !== lastTitle &&
document.title.includes('Coral Island')) {
console.log('Title changed to wrong value, fixing...');
document.title = 'MB Wiki - The Official Wiki';
lastTitle = document.title;
fixHeading();
}
}, 500);

// 5. Also fix meta tags
function fixMetaTags() {
var metaTags = document.querySelectorAll('meta[property="og:title"], meta[name="twitter:title"]');
metaTags.forEach(function(tag) {
tag.setAttribute('content', 'MB Wiki - The Official Wiki');
});
}
fixMetaTags();

console.log('Emergency title fix applied');
})();/* ============================================
THEME TOGGLER
============================================ */

// 1. INSTANT EXECUTION (PREVENTS FLASH OF WRONG THEME)
// This runs the millisecond the script loads, before the body renders.
(function() {
var savedTheme = localStorage.getItem('mb-wiki-theme');
if (savedTheme === 'break') {
document.documentElement.classList.add('theme-break');
}
})();

// 2. DOM READY EXECUTION (UI BINDING)
$(function() {
var isBreak = document.documentElement.classList.contains('theme-break');

var $btn = $('<button>', {
id: 'theme-toggle',
class: 'floating-theme-toggle',
text: isBreak ? '✦ Switch to Mana' : '✦ Switch to Break',
title: 'Toggle Light/Dark Theme'
});

$('body').append($btn);

$btn.on('click', function() {
var $html = $('html');

if ($html.hasClass('theme-break')) {
// Switching to Mana (Light)
$html.removeClass('theme-break');
localStorage.setItem('mb-wiki-theme', 'mana');
$(this).text('✦ Switch to Break');
} else {
// Switching to Break (Dark)
$html.addClass('theme-break');
localStorage.setItem('mb-wiki-theme', 'break');
$(this).text('✦ Switch to Mana');
}
});
});
/* ============================================
TITTLE FIX
============================================ */
(function() {
// Only on main page
if (mw.config.get('wgPageName') !== 'Main_Page' &&
!window.location.href.includes('Main_Page')) return;

console.log('=== APPLYING EMERGENCY TITLE FIX ===');

// 1. IMMEDIATELY set the title
document.title = 'MB Wiki - The Official Wiki';

// 2. Override the heading
function fixHeading() {
var heading = document.querySelector('#firstHeading, h1.firstHeading, .mw-page-title-main');
if (heading) {
heading.textContent = 'MB Wiki - The Official Wiki';
heading.style.display = 'none';
heading.style.visibility = 'hidden';
} else {
// Create heading if it doesn't exist
var newHeading = document.createElement('h1');
newHeading.id = 'firstHeading';
newHeading.className = 'firstHeading';
newHeading.textContent = 'MB Wiki - The Official Wiki';
var content = document.querySelector('#content, .mw-body');
if (content) content.prepend(newHeading);
}
}

// 3. Run now and keep running
fixHeading();
setTimeout(fixHeading, 100);
setTimeout(fixHeading, 500);
setTimeout(fixHeading, 1000);
setTimeout(fixHeading, 2000);

// 4. Monitor and fix any time title changes
var lastTitle = document.title;
setInterval(function() {
if (document.title !== lastTitle &&
document.title.includes('Coral Island')) {
console.log('Title changed to wrong value, fixing...');
document.title = 'MB Wiki - The Official Wiki';
lastTitle = document.title;
fixHeading();
}
}, 500);

// 5. Also fix meta tags
function fixMetaTags() {
var metaTags = document.querySelectorAll('meta[property="og:title"], meta[name="twitter:title"]');
metaTags.forEach(function(tag) {
tag.setAttribute('content', 'MB Wiki - The Official Wiki');
});
}
fixMetaTags();

console.log('Emergency title fix applied');
})();

MediaWiki:Common.css

2026-05-19T04:06:11Z

Ais:

/*************************************🎮**************************************
*
╔═══════════════════════════════════════════════════════════════════╗
COMMON.CSS (vA0.1)
✦ M*n* B**** ✦
╚═══════════════════════════════════════════════════════════════════╝
*
*******************************************************************************/

/*
*This page contains the entire stylesheet for the MB Wiki.
*We urge you "not to edit" this page "directly".
*Some of the code inherited from coralisland.wiki.
*Any functional issue please report to our wiki-team at the official discord channel

*Imports will be starting below this very line;
*/
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap');

/* ============================================
ALL @IMPORTS MUST BE AT THE VERY TOP
============================================ */

@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Colors.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Module:Documentation.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Documentation.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Infobox.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Tables.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:MessageBox.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:CustomTabs.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Navbox.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Icons.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Dialogue.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Cards.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Tabbers.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Mobile.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Recipe.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Modal.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:AceEditor.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:CodeMirror.css&action=raw&ctype=text/css");

/* ============================================
TOKEN ROOT ARCHITECTURE
============================================ */

/* ✦ THEME MANA (LIGHT) - DEFAULT ✦ */
:root {
/* 1. Core Color Palette */
--color-primary: #88eee0;
--color-secondary: #d9ffe9;
--color-accent: #87b4b7;

/* 2. Semantic Variables */
--theme-body-bg: var(--color-secondary);
--theme-card-bg: rgba(255, 255, 255, 0.85);
--theme-card-bg-hover: #ffffff;
--theme-text-primary: #1a2b3c;
--theme-text-muted: #4a5b6c;
--theme-heading-color: #0d1b2a;
--theme-border-color: var(--color-accent);
--theme-border-color-rgb: 135, 180, 183;
--theme-link-color: #006b75;
--theme-link-hover: #004a52;

/* 3. LEGACY BRIDGE */
--theme-page-background-color: var(--theme-body-bg);
--theme-page-background-color--secondary: var(--theme-card-bg);
--theme-page-text-color: var(--theme-text-primary);
--accent: var(--color-accent);
--accent-light: var(--color-primary);
--gray-050: rgba(0, 0, 0, 0.05);

/* 4. Structural Tokens */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.05);

/* Main Page Layout Layout */
--main-page-layout--desktop: 'banner banner banner' 'about about updates' 'starts starts starts' 'items items items' 'characters characters characters' 'enemies enemies enemies' 'area area area';
--main-page-layout--tablet: 'banner banner' 'about updates' 'starts starts' 'items items' 'characters characters' 'enemies enemies' 'area area';
--main-page-layout--mobile: 'banner' 'about' 'updates' 'starts' 'items' 'characters' 'enemies' 'area';
}

/* ✦ THEME BREAK (DARK) - TOGGLE ✦ */
html.theme-break {
/* 1. Core Color Palette */
--color-primary: #12435e;
--color-secondary: #0e344d;
--color-accent: #7ff6e3;

/* 2. Semantic Variables */
--theme-body-bg: var(--color-secondary);
--theme-card-bg: var(--color-primary);
--theme-card-bg-hover: #164f6f;
--theme-text-primary: #eaeef2;
--theme-text-muted: #87b4b7;
--theme-heading-color: #ffffff;
--theme-border-color: var(--color-accent);
--theme-border-color-rgb: 127, 246, 227;
--theme-link-color: var(--color-accent);
--theme-link-hover: #aafff0;

/* 3. LEGACY BRIDGE */
--theme-page-background-color: var(--theme-body-bg);
--theme-page-background-color--secondary: var(--theme-card-bg);
--theme-page-text-color: var(--theme-text-primary);
--accent: var(--color-accent);
--accent-light: var(--color-primary);
--gray-050: rgba(255, 255, 255, 0.05); /* Adjusted for dark theme */

/* 4. Structural Tokens */
--shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.3);
}
/* ============================================
BASE LAYOUT & STRUCTURAL RESET
============================================ */

/* 1. Universal Box Sizing */
*, *::before, *::after {
box-sizing: border-box;
}

/* 2. MediaWiki Body & Container Reset */
body {
background-color: var(--theme-body-bg) !important;
color: var(--theme-text-primary);
font-family: 'Fredoka', sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Stripping native MediaWiki container styles */
.mw-body, #content {
background: transparent !important;
border: none !important;
color: var(--theme-text-primary);
}

/* 3. Typography Normalization */
h1, h2, h3, h4, h5, h6 {
color: var(--theme-heading-color);
margin-top: 0;
font-weight: 600;
}

/* Remove MediaWiki's harsh default underline on H1/H2 */
.mw-body h1, .mw-body h2 {
border-bottom: 2px solid var(--theme-border-color);
padding-bottom: 0.25em;
}

/* 4. Hyperlink Standardization */
a {
color: var(--theme-link-color);
text-decoration: none;
transition: color 0.2s ease;
}

a:hover, a:focus {
color: var(--theme-link-hover);
text-decoration: underline;
}

a:visited {
color: var(--theme-link-color);
}

/* 5. Responsive Media & Selection */
img, video {
max-width: 100%;
height: auto;
}

::selection {
background: var(--color-primary);
color: #000;
}
::-moz-selection {
background: var(--color-primary);
color: #000;
}

/* ============================================
BASE LAYOUT (MAPPED TO TOKENS)
============================================ */
html, body {
background-color: var(--theme-body-bg) !important;
background-image: none !important;
color: var(--theme-text-primary);
transition: background-color 0.3s ease, color 0.3s ease;
}

.mw-body {
margin-top: -1px;
border: 1px solid var(--theme-border-color);
border-radius: var(--radius-sm);
background-color: transparent;
}

/* Hide default elements */
.mobileHide, .mobile-only, .no-desktop {
display: none !important;
}

/* Fix for hidden H1 on main page */
body.page-Main_Page.action-view h1.firstHeading,
body.page-Main_Page.action-submit h1.firstHeading {
display: none;
}

/* ============================================
MAIN PAGE GRID LAYOUT
============================================ */
#mp-container {
display: grid;
gap: 2rem;
padding: 1rem;
max-width: 1400px;
margin: 0 auto;
}

/* Desktop Layout */
@media (min-width: 1024px) {
#mp-container {
grid-template-areas: var(--main-page-layout--desktop);
grid-template-columns: repeat(3, 1fr);
}
}

/* Tablet Layout */
@media (min-width: 768px) and (max-width: 1023px) {
#mp-container {
grid-template-areas: var(--main-page-layout--tablet);
grid-template-columns: repeat(2, 1fr);
}
}

/* Mobile Layout */
@media (max-width: 767px) {
#mp-container {
grid-template-areas: var(--main-page-layout--mobile);
grid-template-columns: 1fr;
gap: 1rem;
}
}

/* MP Box styling */
.mp-box {
animation: fadeInUp 0.5s ease forwards;
opacity: 0;
}

/* Staggered animations */
.mp-box:nth-child(1) { animation-delay: 0.05s; }
.mp-box:nth-child(2) { animation-delay: 0.1s; }
.mp-box:nth-child(3) { animation-delay: 0.15s; }
.mp-box:nth-child(4) { animation-delay: 0.2s; }
.mp-box:nth-child(5) { animation-delay: 0.25s; }
.mp-box:nth-child(6) { animation-delay: 0.3s; }
.mp-box:nth-child(7) { animation-delay: 0.35s; }
.mp-box:nth-child(8) { animation-delay: 0.4s; }

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

/* ============================================
MAIN PAGE CARDS & GRIDS
============================================ */

/* Main Grid Wrapper */
.main-page-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 1rem;
}

/* 1. Game Intro Cards */
.game-intro-card {
background-color: var(--theme-card-bg);
border-radius: var(--radius-lg); /* From Step 1 */
padding: 1.25rem;
border: 1px solid var(--theme-border-color);
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
height: 100%;
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
}

.game-intro-card:hover {
background-color: var(--theme-card-bg-hover);
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
border-color: var(--color-primary);
}

/* 2. Header Elements */
.game-header {
margin-bottom: 1rem;
position: relative;
}

.mana-text {
font-family: 'Fredoka', sans-serif;
font-size: 1.5rem;
font-weight: 600;
margin: 0;

/* Gradient */
background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;

/* Flexbox aligning the icon perfectly */
display: flex;
align-items: center;
gap: 8px;
letter-spacing: 0.5px;
}

.mana-line {
height: 3px;
background: linear-gradient(90deg, var(--color-accent), transparent);
margin-top: 0.5rem;
width: 100%;
border-radius: 2px;
}

/* 3. Card Content & Headings */
.game-content {
color: var(--theme-text-primary);
line-height: 1.6;
flex-grow: 1;
}

.heading-char {
font-size: 1.1rem;
font-weight: 600;
margin: 0.5rem 0;
padding-bottom: 0.25rem;
border-bottom: 2px solid var(--theme-border-color);
display: inline-block;
transition: border-color 0.3s ease;
}

.heading-char a {
color: var(--theme-heading-color);
text-decoration: none;
transition: color 0.2s ease;
}

.heading-char a:hover {
color: var(--color-accent);
}

/* 4. Auto Grid Lists (The Links) */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0.75rem 0 0 0;
}

.auto-grid li {
padding: 0;
}

/* Elevated List Link Styling */
.auto-grid li a {
display: block;
padding: 0.35rem 0.5rem;
color: var(--theme-link-color);
text-decoration: none;
border-radius: var(--radius-sm);
background-color: rgba(127, 127, 127, 0.05);
border: 1px solid transparent;
transition: all 0.2s ease;
}

.auto-grid li a:hover {
color: var(--theme-link-hover);
background-color: var(--theme-body-bg);
border-color: var(--theme-border-color);
transform: translateX(3px);
}
/* ============================================
BANNER, WIKI COMPONENTS & SCROLLBAR
============================================ */

/* 1. BANNER SECTION */
#mp-box-banner .mp-body {
background: linear-gradient(135deg, var(--color-secondary), var(--theme-body-bg));
border-radius: var(--radius-lg);
padding: 2rem;
text-align: center;
border: 1px solid var(--theme-border-color);
box-shadow: var(--shadow-soft);
transition: background 0.3s ease, border-color 0.3s ease;
}

/* Social links */
.social {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
}

.iconname {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--theme-card-bg);
border: 1px solid var(--theme-border-color);
padding: 0.5rem 1rem;
border-radius: var(--radius-md);
transition: all 0.2s ease;
}

.iconname:hover {
background: var(--color-primary);
border-color: var(--color-accent);
transform: translateY(-2px);
}

.iconname a {
color: var(--theme-text-primary) !important;
text-decoration: none;
font-weight: 500;
}

/* 2. WIKI FIXES & IMPROVEMENTS */
.wikiEditor-ui-text > .ui-resizable {
width: 100% !important;
max-width: 100%;
}

ul { list-style: disc; }

h2 .mw-headline, h3 .mw-headline, h4 .mw-headline { font-weight: 500; }
.vector-body h3, .vector-body h4, .vector-body h5, .vector-body h6 { margin-bottom: 4px; }

/* Categories */
.catlinks {
border-color: var(--theme-border-color);
border-radius: var(--radius-md);
background-color: var(--theme-card-bg);
padding: 10px;
}

/* Code blocks */
code, pre {
background-color: var(--theme-card-bg);
color: var(--theme-text-primary);
border: 1px solid var(--theme-border-color);
border-radius: var(--radius-sm);
padding: 2px 6px;
font-family: Consolas, Eupheima UCAS, Monaco, Menlo, monospace;
}

code.code-block-table { display: table; line-height: 21px; padding: 8px; }
.code-block-table * { font: 14px Consolas, Eupheima UCAS, Monaco, Menlo, monospace; }
.code-block { display: inline-block; line-height: 21px; }

/* Table of Contents */
.toc {
padding: 12px 16px;
border-radius: var(--radius-md);
background-color: var(--theme-card-bg);
border: 1px solid var(--theme-border-color);
margin-top: 16px;
box-shadow: var(--shadow-soft);
}

.toctogglelabel { color: var(--theme-link-color); }
.tocnumber { color: var(--theme-text-muted); }
.vector-body .toc h2 { font-family: 'Fredoka', sans-serif; }

/* Hatnote */
.hatnote {
border-left: 4px solid var(--color-accent);
padding: 8px 12px;
border-radius: var(--radius-sm);
background-color: var(--theme-card-bg);
margin: 8px 0;
}

/* Variables styling */
span.variable { opacity: 0.65; }
span.variable::after { opacity: 0.65; content: ">"; }
span.variable::before { opacity: 0.65; content: "<"; }

/* Pull quotes */
.pull-quote { font-style: italic; margin: 0; padding: 0 30px 8px !important; }
.pull-quote::before {
color: var(--color-accent);
content: "“";
display: block;
font-size: 96px;
font-style: normal;
line-height: 72px;
margin: 4px 0 -45px -5px;
}
.pull-quote__source::before { content: "— "; margin-bottom: 8px; }
.pull-quote__text { margin-bottom: 4px; }

/* Gallery & Changelist */
.gallerytext { text-align: center; font-size: 100%; }
.changelist-header { display: flex; justify-content: space-between; align-items: center; font-size: 88%; margin: 0.3em 0; }
.changelist-content { overflow: auto; max-height: 384px; padding: 1em; box-sizing: border-box; border-radius: var(--radius-md); }
.changelist-border { border: 1px solid var(--theme-border-color); border-left: 6px solid var(--color-accent); }

/* Chat wrapper */
.chat-wrapper { display: flex; flex-direction: column; }
.chat-player, .chat-npc { display: flex; flex-direction: row; gap: 0.5em; }
.chat-player-speaker { white-space: nowrap; min-width: 70px; color: #43b581; font-weight: 600; }
.chat-npc-speaker { white-space: nowrap; min-width: 70px; color: #f04747; font-weight: 600; }

/* 3. RESPONSIVE IMPROVEMENTS */
@media (max-width: 768px) {
.game-intro-card { padding: 1rem; }
.mana-text { font-size: 1.25rem; }
.social { gap: 0.5rem; }
.iconname { padding: 0.35rem 0.75rem; font-size: 0.9rem; }
#mp-box-banner .mp-body { padding: 1rem; }
}

/* 4. CUSTOM SCROLLBAR */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
background: var(--theme-body-bg);
border-radius: 0px;
}
::-webkit-scrollbar-thumb {
background: var(--color-accent);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--theme-link-hover); }

/* 5. UTILITY CLASSES */
.text-center { text-align: center; }
.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.p-2 { padding: 0.5rem; }
/* ============================================
THEME TOGGLE BUTTON
============================================ */
.floating-theme-toggle {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
padding: 10px 16px;
background-color: var(--theme-card-bg);
color: var(--theme-heading-color);
border: 2px solid var(--theme-border-color);
border-radius: var(--radius-lg);
font-family: 'Fredoka', sans-serif;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
box-shadow: var(--shadow-soft);
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
backdrop-filter: blur(8px);
}

.floating-theme-toggle:hover {
background-color: var(--color-primary);
border-color: var(--color-accent);
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
color: #000;
}

2026-05-08T07:31:52Z

Ais:

/* ============================================
COMMON.CSS – Minimal, variable‑driven base
Requires MediaWiki:Theme-Mana.css or Theme-Break.css
============================================ */

/* Reset some MediaWiki defaults */
html, body {
margin: 0;
padding: 0;
}

body {
background: var(--theme-body-background, #F5F9FC);
color: var(--theme-body-text, #1A1A1A);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
}

/* ---- Main layout (Vector skin) ---- */
#content {
background: var(--theme-page-background, #EAF2F5);
border: 1px solid var(--theme-border-color-accent, rgba(0,0,0,0.25));
border-radius: 6px;
margin: 1em 0;
padding: 1.5em;
box-shadow: var(--theme-shadow-small, 0 1px 3px rgba(0,0,0,0.12));
}

.mw-body {
background: transparent;
border: none;
}

/* ---- Sidebar ---- */
#mw-panel {
background: var(--theme-widget-background-solid, #FFFFFF);
border: 1px solid var(--theme-border-color-accent, rgba(0,0,0,0.25));
border-radius: 6px;
padding: 0.5em;
box-shadow: var(--theme-shadow-small, 0 1px 3px rgba(0,0,0,0.12));
}

#mw-panel .portal .body {
margin-left: 0.5em;
}

#mw-panel .portal h3 {
color: var(--theme-heading-color, #1A1A1A);
font-size: 1.1em;
margin-top: 1em;
border-bottom: 1px solid var(--theme-border-color-light, rgba(0,0,0,0.06));
padding-bottom: 0.2em;
}

#mw-panel .portal li a {
color: var(--theme-link-color, #005B9F);
}

#mw-panel .portal li a:hover {
color: var(--theme-link-color-hover, #003D6B);
text-decoration: underline;
}

/* ---- Top navigation (tabs, search) ---- */
#mw-head {
background: var(--theme-widget-background, rgba(255,255,255,0.75));
border-bottom: 1px solid var(--theme-border-color, rgba(0,0,0,0.12));
padding: 0.3em 1em;
}

#p-search input {
background-color: var(--theme-widget-background-solid, #FFFFFF);
border: 1px solid var(--theme-border-color-accent, rgba(0,0,0,0.25));
color: var(--theme-body-text, #1A1A1A);
padding: 0.3em 0.5em;
border-radius: 4px;
}

#p-search input:focus {
border-color: var(--theme-accent-color, #00A896);
outline: none;
box-shadow: 0 0 0 1px var(--theme-accent-color, #00A896);
}

.vector-menu-tabs li a {
color: var(--theme-body-text, #1A1A1A) !important;
}

.vector-menu-tabs li.selected a {
color: var(--theme-accent-color, #00A896) !important;
border-bottom: 2px solid var(--theme-accent-color, #00A896);
}

.vector-menu-tabs li a:hover {
color: var(--theme-link-color-hover, #003D6B) !important;
}

/* ---- Footer ---- */
#footer {
background: var(--theme-widget-background, rgba(255,255,255,0.75));
border-top: 1px solid var(--theme-border-color, rgba(0,0,0,0.12));
color: var(--theme-body-text-muted, #5A5A5A);
font-size: 0.9em;
}

#footer a {
color: var(--theme-link-color, #005B9F);
}

/* ---- Links ---- */
a {
color: var(--theme-link-color, #005B9F);
}

a:visited {
color: var(--theme-link-color-visited, #673AB7);
}

a:hover {
color: var(--theme-link-color-hover, #003D6B);
}

a.new, a.new:visited {
color: var(--theme-link-color-new, #D32F2F);
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
color: var(--theme-heading-color, #1A1A1A);
margin-top: 1.5em;
margin-bottom: 0.5em;
}

h1 {
border-bottom: 1px solid var(--theme-border-color-accent, rgba(0,0,0,0.25));
padding-bottom: 0.2em;
font-size: 2em;
}

h2 {
border-bottom: 1px solid var(--theme-border-color-light, rgba(0,0,0,0.06));
padding-bottom: 0.2em;
font-size: 1.5em;
}

/* ---- Table of Contents ---- */
.toc {
background: var(--theme-toc-background, rgba(255,255,255,0.5));
border: 1px solid var(--theme-toc-border, rgba(0,0,0,0.25));
border-radius: 6px;
padding: 0.8em;
font-size: 0.95em;
}

.toc .toctitle h2 {
color: var(--theme-heading-color, #1A1A1A);
font-size: 1.2em;
border-bottom: none;
margin: 0;
}

.toc ul {
list-style: none;
margin-left: 0;
}

.toc a {
color: var(--theme-toc-link-color, #1A1A1A);
}

.toc .tocnumber {
color: var(--theme-toc-number-color, #5A5A5A);
}

/* ---- Thumbnails ---- */
.thumb .thumbinner {
background: var(--theme-box-background, rgba(255,255,255,0.6));
border: 1px solid var(--theme-border-color-light, rgba(0,0,0,0.06));
border-radius: 4px;
padding: 4px;
font-size: 0.9em;
}

.thumbcaption {
color: var(--theme-body-text-muted, #5A5A5A);
}

/* ---- Tables ---- */
table.wikitable {
background: transparent;
border-collapse: collapse;
color: var(--theme-body-text, #1A1A1A);
}

table.wikitable th,
table.wikitable td {
border: 1px solid var(--theme-border-color-accent, rgba(0,0,0,0.25));
padding: 0.3em 0.6em;
}

table.wikitable th {
background: var(--theme-highlight-background, rgba(0,0,0,0.05));
font-weight: bold;
}

table.wikitable tr:hover td {
background: var(--theme-highlight-background, rgba(0,0,0,0.05));
}

/* ---- Category links ---- */
.catlinks {
background: var(--theme-widget-background, rgba(255,255,255,0.75));
border: 1px solid var(--theme-border-color-light, rgba(0,0,0,0.06));
border-radius: 4px;
margin-top: 1em;
padding: 0.5em;
}

.catlinks li {
border-left: 1px solid var(--theme-border-color-light, rgba(0,0,0,0.06));
}

/* ---- Message boxes (mw-message-box, warning, error) ---- */
.mw-message-box {
background: var(--theme-notice-blue-background, #E3F2FD);
border: 1px solid var(--theme-notice-blue-border, #90CAF9);
color: var(--theme-body-text, #1A1A1A);
border-radius: 4px;
padding: 0.8em 1em;
margin-bottom: 1em;
}

.mw-message-box-error {
background: var(--theme-notice-red-background, #FFEBEE);
border-color: var(--theme-notice-red-border, #EF9A9A);
color: var(--theme-notice-red-text, #C62828);
}

.mw-message-box-warning {
background: var(--theme-notice-yellow-background, #FFF8E1);
border-color: var(--theme-notice-yellow-border, #FFE082);
color: var(--theme-body-text, #1A1A1A);
}

.mw-message-box-success {
background: var(--theme-notice-green-background, #E8F5E9);
border-color: var(--theme-notice-green-border, #A5D6A7);
}

/* ---- Diff colours ---- */
.diff-addedline {
background: var(--theme-diff-added-bg, #E6FFE6);
color: var(--theme-diff-added-text, #001700);
}

.diff-deletedline {
background: var(--theme-diff-removed-bg, #FFE6E6);
color: var(--theme-diff-removed-text, #1F0000);
}

.diff-context {
background: transparent;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: var(--theme-scrollbar-track, rgba(0,0,0,0.05));
}

::-webkit-scrollbar-thumb {
background: var(--theme-scrollbar-thumb, rgba(0,0,0,0.2));
border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--theme-scrollbar-thumb-hover, rgba(0,0,0,0.3));
}

/* ---- Utility classes ---- */
.text-muted {
color: var(--theme-body-text-muted, #5A5A5A);
}

MediaWiki:Theme-Break.css

2026-05-08T07:26:20Z

Ais: Start of custom theme (break)

/* ============================================
Theme Break (Dark / Teal - Indigo)
============================================ */
:root {
--theme-primary-gradient: linear-gradient(135deg, #0B3D3D 0%, #1A1B4B 50%, #311B92 100%);
--theme-primary-start: #0B3D3D;
--theme-primary-mid: #1A1B4B;
--theme-primary-end: #311B92;

--theme-body-text: #F2F2F2;
--theme-body-text-rgb: 242, 242, 242;
--theme-body-text-muted: #A0A0A0;
--theme-body-text-emphasized: #FFFFFF;
--theme-heading-color: #FFFFFF;

--theme-link-color: #00F5D4; /* neon mint accent */
--theme-link-color-visited: #B388FF;
--theme-link-color-hover: #76FFEB;
--theme-link-color-new: #FF5252;

--theme-page-background: #0F0F19; /* deep dark */
--theme-body-background: #121420 url(""); /* slightly lighter for page backdrop */
--theme-widget-background: rgba(20, 20, 35, 0.75);
--theme-widget-background-solid: #1A1B2F;
--theme-box-background: rgba(255, 255, 255, 0.05);
--theme-highlight-background: rgba(255, 255, 255, 0.08);

--theme-glass-background: rgba(15, 15, 25, 0.6);
--theme-glass-background-solid: #151622;

--theme-accent-color: #00F5D4;
--theme-accent-color-light: #76FFEB;
--theme-accent-color-dark: #009C87;

--theme-border-color: rgba(255, 255, 255, 0.12);
--theme-border-color-accent: rgba(255, 255, 255, 0.25);
--theme-border-color-light: rgba(255, 255, 255, 0.07);
--theme-hr-color-top: rgba(255, 255, 255, 0.08);
--theme-hr-color-bottom: rgba(0, 0, 0, 0.3);

--theme-shadow-small: 0 1px 3px rgba(0,0,0,0.4);
--theme-shadow-medium: 0 2px 6px rgba(0,0,0,0.6);

--theme-scrollbar-track: rgba(255,255,255,0.05);
--theme-scrollbar-thumb: rgba(255,255,255,0.15);
--theme-scrollbar-thumb-hover: rgba(255,255,255,0.25);

--theme-toc-background: rgba(255, 255, 255, 0.05);
--theme-toc-border: var(--theme-border-color-accent);
--theme-toc-number-color: var(--theme-body-text-muted);
--theme-toc-link-color: var(--theme-body-text);

--theme-notice-blue-background: #1A2B3B;
--theme-notice-blue-border: #2F4F6F;
--theme-notice-red-background: #3B1A1A;
--theme-notice-red-border: #6F2F2F;
--theme-notice-red-text: #FF8A8A;
--theme-notice-yellow-background: #3B361A;
--theme-notice-yellow-border: #6F652F;
--theme-notice-orange-background: #3B2D1A;
--theme-notice-orange-border: #6F552F;
--theme-notice-green-background: #1A3B2A;
--theme-notice-green-border: #2F6F4F;
--theme-notice-purple-background: #2A1A3B;
--theme-notice-purple-border: #4F2F6F;

--theme-diff-added-bg: #1A2E1A;
--theme-diff-added-text: #B8FFB8;
--theme-diff-removed-bg: #2E1A1A;
--theme-diff-removed-text: #FFB8B8;
}

MediaWiki:Theme-Mana.css

2026-05-08T07:25:29Z

Ais:

/* ============================================
Theme Mana (Light / Mint Sky Lavender)
============================================ */
:root {
/* Primary gradient (Start → Mid → End) */
--theme-primary-gradient: linear-gradient(135deg, #C8F1E4 0%, #B8DCE7 50%, #B9A9D5 100%);
--theme-primary-start: #C8F1E4;
--theme-primary-mid: #B8DCE7;
--theme-primary-end: #B9A9D5;

/* Body / Text */
--theme-body-text: #1A1A1A;
--theme-body-text-rgb: 26, 26, 26;
--theme-body-text-muted: #5A5A5A; /* notes, secondary info */
--theme-body-text-emphasized: #0F0F0F; /* slightly stronger, e.g. bold/highlight */
--theme-heading-color: #1A1A1A;

/* Links */
--theme-link-color: #005B9F; /* darker blue for light bg */
--theme-link-color-visited: #673AB7;
--theme-link-color-hover: #003D6B;
--theme-link-color-new: #D32F2F; /* red links (non-existent pages) */

/* Backgrounds */
--theme-page-background: #EAF2F5; /* main content area */
--theme-body-background: #F5F9FC url(""); /* entire page bg (can be a texture later) */
--theme-widget-background: rgba(255, 255, 255, 0.75);
--theme-widget-background-solid: #FFFFFF;
--theme-box-background: rgba(255, 255, 255, 0.6);
--theme-highlight-background: rgba(0, 0, 0, 0.05);

/* Glass / Overlay (for modals, dropdowns) */
--theme-glass-background: rgba(255, 255, 255, 0.4);
--theme-glass-background-solid: #FFFFFF;

/* Accent (neon mint replaced with white in light theme, but we keep a "accent" variable) */
--theme-accent-color: #00A896; /* deeper mint for contrast */
--theme-accent-color-light: #00F5D4;
--theme-accent-color-dark: #007A6C;

/* Borders */
--theme-border-color: rgba(0, 0, 0, 0.12);
--theme-border-color-accent: rgba(0, 0, 0, 0.25);
--theme-border-color-light: rgba(0, 0, 0, 0.06);
--theme-hr-color-top: rgba(0, 0, 0, 0.12);
--theme-hr-color-bottom: rgba(255, 255, 255, 0.8);

/* Widget shadows */
--theme-shadow-small: 0 1px 3px rgba(0,0,0,0.12);
--theme-shadow-medium: 0 2px 6px rgba(0,0,0,0.15);

/* Scrollbar */
--theme-scrollbar-track: rgba(0,0,0,0.05);
--theme-scrollbar-thumb: rgba(0,0,0,0.2);
--theme-scrollbar-thumb-hover: rgba(0,0,0,0.3);

/* Table of Contents */
--theme-toc-background: rgba(255, 255, 255, 0.5);
--theme-toc-border: var(--theme-border-color-accent);
--theme-toc-number-color: var(--theme-body-text-muted);
--theme-toc-link-color: var(--theme-body-text);

/* Message boxes (notice, warning, error, success) */
--theme-notice-blue-background: #E3F2FD;
--theme-notice-blue-border: #90CAF9;
--theme-notice-red-background: #FFEBEE;
--theme-notice-red-border: #EF9A9A;
--theme-notice-red-text: #C62828;
--theme-notice-yellow-background: #FFF8E1;
--theme-notice-yellow-border: #FFE082;
--theme-notice-orange-background: #FFF3E0;
--theme-notice-orange-border: #FFCC80;
--theme-notice-green-background: #E8F5E9;
--theme-notice-green-border: #A5D6A7;
--theme-notice-purple-background: #F3E5F5;
--theme-notice-purple-border: #CE93D8;

/* Diff colours (for history pages) */
--theme-diff-added-bg: #E6FFE6;
--theme-diff-added-text: #001700;
--theme-diff-removed-bg: #FFE6E6;
--theme-diff-removed-text: #1F0000;
}

MediaWiki:Theme-Mana.css

2026-03-29T15:04:37Z

Ais:

.class { }/* needed for some reason for the @imports to work */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap');

/* Imports caching */
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Colors.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Module:Documentation.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Documentation.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Infobox.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Tables.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:MessageBox.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:CustomTabs.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Navbox.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Icons.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Dialogue.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Cards.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Tabbers.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Mobile.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Recipe.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Modal.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:AceEditor.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:CodeMirror.css&action=raw&ctype=text/css");

.mw-body {
margin-top: -1px;
border: 1px solid azure;
border-radius: 1px;
}
body.skin-vector {
background: url("https://mbwiki.stairwaygames.work/w/images/9/9a/Site-background-dark.png") no-repeat fixed center center / cover !important;
}
body.skin-vector-dark {
background: url("https://mbwiki.stairwaygames.work/w/images/9/9a/Site-background-dark.png") no-repeat fixed center center / cover !important;
}

.mobileHide, .mobile-only, .no-desktop {
display: none!important;
}

/* || FIXES */
.wikiEditor-ui-text > .ui-resizable {
width: 100% !important;
max-width: 100%;
}
ul {
list-style: disc;
}

h2 .mw-headline,
h3 .mw-headline,
h4 .mw-headline {
font-weight: 500;
}

.vector-body h3 , .vector-body h4 , .vector-body h5 , .vector-body h6 {
margin-bottom: 4px;
}

a, a:visited, a:active,
.mw-parser-output a:is(.external, .external:visited, .external:active) {
color: var(--theme-link-color);
}
#mw-head .vector-menu-content-list .mw-list-item :is(a, a:visited, a:active) {
color: var(--theme-page-text-color);
}
#mw-panel .vector-menu-content-list .mw-list-item :is(a, a:visited, a:active) {
color: var(--theme-link-color);
}

.mw-parser-output a.external {
padding-right: 0;
font-size: inherit;
}

.catlinks {
border-color: var(--theme-border-color);
border-radius: 6px;
background-color: var(--gray-050);
}

.CodeMirror-lines span {
font: 14px Consolas,Eupheima UCAS,Monaco,Menlo,monospace /* Source Editor */
}

.wikiEditor-ui .ace_editor * {
font-size: 13px;
font-family: monospace, monospace; /* Module */
}

.mw-input .mw-abusefilter-editor * {
font-size: 13px;
font-family: monospace, monospace;
}

/* Hide default TOOLBOX nav section on sidebar */
#mw-navigation > #mw-panel > #p-tb {
display: none;
}

/* Column template fix */
.columntemplate ul,
.columntemplate ol {
margin-top: 0;
}

/* RC */
.mw-changeslist table {
width: unset;
}

.gift-table .icon-list-container {
width: auto;
}

/* Quote template */
.quotetable {
width: auto;
}

.Bug6200 {
margin-bottom: 0.75em;
}

/* Code block */
code, pre {
background-color: var(--theme-page-background-color--secondary);
color: var(--theme-page-text-color);
border: 1px solid var(--theme-border-color);
border-radius: 2px;
padding: 1px 4px;
font-family: Consolas,Eupheima UCAS,Monaco,Menlo,monospace;
}

code.code-block-table {
display: table;
line-height: 21px;
padding:8px;
}

.code-block-table * {
font: 14px Consolas,Eupheima UCAS,Monaco,Menlo,monospace;
}

.code-block {
display: inline-block;
line-height: 21px;
}

/* || MAIN PAGE */
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
body.page-Main_Page.action-view .main-page-top {
background-image: url(https://mbwiki.stairwaygames.work/w/images/c/c2/441Cover_image_only.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
display: flex;
flex-direction: column;
gap: 4px;
color: rgb(67, 64, 61); /*fixed color due to bg image*/
text-align: center;
align-items: center;
}

/* ||TABLE OF CONTENTS */
.toc {
padding: 8px 12px;
border-radius: 4px;
background-color: var(--theme-page-background-color--secondary);
border: 1px solid var(--theme-border-color);
margin-top: 16px;
}
.toctogglelabel {
color: var(--theme-link-color);
}
.tocnumber {
color: var(--theme-page-text-color);
}

.vector-body .toc h2 {
font-family: Fredoka, sans-serif;
}

/* TOC hide headings */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
display: none;
}

/* For Template:Changelist */
.changelist-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 88%;
margin: 0.3em 0;
}

.changelist-content {
overflow: auto;
max-height: 384px;
padding: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-moz-border-radius-topleft: 0.5em;
background: transparent;
border-radius: 6px;
}

.changelist-border {
border: 1px solid var(--theme-border-color);
border-left: 6px solid var(--accent);
}

/* For Template:Chat */
.chat-wrapper {
display: flex;
flex-direction: column;
}

.chat-player,
.chat-npc {
display: flex;
flex-direction: row;
gap: 0.5em;
}

.chat-player-speaker {
white-space: nowrap;
min-width: 70px;
color: rgb(105, 172, 82);
}

.chat-npc-speaker {
white-space: nowrap;
min-width: 70px;
color: rgb(237, 123, 103);
}

/* Hatnote */
.hatnote {
border-left: 4px solid var(--theme-border-color);
padding: 6px 12px;
border-radius: 4px;
background: linear-gradient(145deg, rgba(var(--theme-border-color-rgb),0.30) 0%, rgba(var(--theme-border-color-rgb),0) 100%);%);
margin: 8px 0;
}

/* For [[Module:Formatting]] */
code.code-block {
display: inline-block;
line-height: 21px;
}
code.code-block-table {
display: table;
line-height: 21px;
}
span.variable {
opacity: 0.65;
}
span.variable::after {
opacity: 0.65;
content: ">";
}
span.variable::before {
opacity: 0.65;
content: "<";
}

/* Quote */

.pull-quote {
font-style: italic;
margin: 0;
padding: 0 30px 8px !important
}

.pull-quote::before {
color: var(--accent);
content: "“";
display: block;
font-size: 96px;
font-style: normal;
line-height: 72px;
margin: 4px 0 -45px -5px;;
}

.pull-quote__source::before {
content: "— ";
margin-bottom:8px;
}

.pull-quote__text {
margin-bottom:4px;
}

/* Gallery */
.gallerytext {
text-align: center;
font-size:100%;
}

/* Fix to Template Data */
.mw-templatedata-doc-params > * > tr > th {
width: 150px;
}

.mw-templatedata-doc-params {
width: auto;
max-width: 100%;
}

/* Space sidebar arrows properly */
#mw-panel.collapsible-nav .portal:is(.collapsed, .expanded) .vector-menu-heading {
background-position: 95% center;
}

/* Theme toggle */
.wds-icon {
align-self: center;
margin: 0 6px;
pointer-events: none;
fill: currentColor;
}
.wds-icon-small {
height: 18px;
min-width: 18px;
width: 18px;
}
#p-personal .vector-menu-content-list,
#p-personal .mw-list-item > a {
display: flex;
align-items: center;
}
.cols {
background-color: var(--theme-page-background-color--secondary);
}
#pagehistory li.selected {
background-color: var(--theme-page-background-color--secondary);
color: var(--theme-page-text-color);
outline: 1px dashed var(--theme-border-color);
}

MediaWiki:Common.css

2026-03-29T14:59:03Z

Ais:

/* * MANA BREAK - OFFICIAL WIKI SKIN
* Theme: Modern Adventure (Teal & Gold)
* Version: 2.0.0
*/

/* 1. IMPORTS
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800&family=Montserrat:wght@400;500;600&display=swap');
/* Consolidated Wiki Modules */
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Colors.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Infobox.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Tables.css&action=raw&ctype=text/css");
/* ... other imports should be combined into a single ResourceLoader module for performance ... */

/* 2. VARIABLES & COLOR SYSTEM
========================================================================== */
:root {
/* Primary Teal Palette (#1a6a7a) */
--primary-100: #e8f0f2;
--primary-200: #b9d1d6;
--primary-300: #8ab2ba;
--primary-400: #5b939e;
--primary-500: #1a6a7a; /* Base */
--primary-600: #155562;
--primary-700: #10404a;
--primary-800: #0a2a31;
--primary-900: #051519;

/* Accent Gold Palette (#eab759) */
--gold-soft: #fdf6e9;
--gold-base: #eab759;
--gold-dark: #c9932e;

/* Status Colors (WCAG AA Compliant) */
--status-success: #2d8a57;
--status-error: #c53030;
--status-warning: #b7791f;
--status-info: #2b6cb0;

/* Light Theme Base */
--bg-page: #f8fafc;
--bg-content: #ffffff;
--bg-secondary: #f1f5f9;
--text-main: #1a202c;
--text-muted: #4a5568;
--border-color: #e2e8f0;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
--radius-md: 8px;
--radius-lg: 12px;
}

/* Dark Theme Variables */
.skin-vector-dark {
--bg-page: #0f172a;
--bg-content: #1e293b;
--bg-secondary: #334155;
--text-main: #f1f5f9;
--text-muted: #94a3b8;
--border-color: #475569;
--primary-100: #0f2d33;
--primary-500: #5eead4;
--gold-soft: #2d261a;
}

/* 3. BASE ELEMENTS
========================================================================== */
body {
font-family: 'Cinzel', system-ui, -apple-system, sans-serif;
background-color: var(--bg-page) !important;
color: var(--text-main);
line-height: 1.6;
}

h1, h2, h3, h4 {
font-family: 'Montserrat', sans-serif;
color: var(--primary-500);
font-weight: 600;
}

a {
color: var(--primary-500);
text-decoration: none;
transition: color 0.2s ease;
}

a:hover {
color: var(--primary-700);
text-decoration: underline;
}

/* Focus States */
a:focus-visible, button:focus-visible {
outline: 3px solid var(--primary-300);
outline-offset: 2px;
border-radius: 4px;
}

/* 4. WIKI COMPONENTS
========================================================================== */

/* Modernized Wikitable */
.wikitable {
width: 100% !important;
margin: 1.5rem 0;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden; /* Clips corners for radius */
background: var(--bg-content);
}

.wikitable th {
background-color: var(--primary-500) !important;
color: #ffffff !important;
padding: 12px 15px !important;
font-weight: 600;
text-align: left;
}

.wikitable td {
padding: 10px 15px;
border-bottom: 1px solid var(--border-color);
}

.wikitable tr:last-child td { border-bottom: none; }

.wikitable tr:nth-child(even) { background-color: var(--bg-page); }

.wikitable tr:hover { background-color: var(--primary-100); }

/* Responsive Table Wrapper */
@media (max-width: 768px) {
.mw-parser-output { overflow-x: auto; }
.wikitable { min-width: 600px; }
}

/* Modern Navbox (Chip Style) */
.navbox {
background: var(--bg-content) !important;
border: 1px solid var(--primary-500) !important;
border-radius: var(--radius-md);
padding: 5px;
}

.navbox-title {
background: var(--primary-500) !important;
color: white !important;
border-radius: 6px 6px 0 0;
padding: 8px !important;
}

.navbox-group {
background: var(--primary-100) !important;
color: var(--primary-700) !important;
font-weight: 600 !important;
width: 15%;
}

.navbox-list ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none !important;
margin: 0 !important;
padding: 10px !important;
}

.navbox-list li {
background: var(--bg-secondary);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.9em;
border: 1px solid var(--border-color);
}

/* Table of Contents */
.toc {
background: var(--bg-content);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 15px !important;
box-shadow: var(--shadow-sm);
}

.toc h2 {
font-size: 1.2rem;
margin-bottom: 10px;
}

/* 5. INFOBOXES & PORTABLE INFOBOXES
========================================================================== */
.portable-infobox, .infobox {
float: right;
clear: right;
width: 300px;
margin: 0 0 1rem 1rem;
background: var(--bg-content);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}

.pi-title {
background: var(--primary-500);
color: #fff;
padding: 15px;
text-align: center;
font-family: 'Fredoka', sans-serif;
font-size: 1.4rem;
}

.pi-item {
display: flex;
justify-content: space-between;
padding: 8px 15px;
border-bottom: 1px solid var(--border-color);
}

.pi-data-label { font-weight: 600; color: var(--text-muted); }

@media (max-width: 768px) {
.portable-infobox, .infobox {
float: none;
width: 100%;
margin: 1rem 0;
}
}

/* 6. MAIN PAGE LAYOUT (#mp-container)
========================================================================== */
.mp-grid {
display: grid;
gap: 20px;
margin: 20px 0;
}

.game-intro-card {
background: var(--bg-content);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.game-intro-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--primary-300);
}

.game-header {
background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
color: white;
padding: 15px 20px;
}

.mana-line {
height: 3px;
width: 50px;
background: var(--gold-base);
margin-top: 8px;
border-radius: 2px;
}

/* Social Links Layout */
.social-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-top: -30px; /* Overlap effect */
position: relative;
z-index: 10;
}

.social-pill {
background: var(--bg-content);
padding: 10px 20px;
border-radius: 50px;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: 10px;
border: 1px solid var(--border-color);
}

/* 7. UTILITIES & ANIMATIONS
========================================================================== */
.text-primary { color: var(--primary-500) !important; }
.bg-primary { background-color: var(--primary-500) !important; color: white; }
.text-gold { color: var(--gold-base) !important; }
.bg-gold-soft { background-color: var(--gold-soft) !important; }

.shadow-lg { box-shadow: var(--shadow-md); }
.rounded-full { border-radius: 9999px; }

/* Animations */
@media (prefers-reduced-motion: no-preference) {
.animate-fade-in {
animation: fadeIn 0.5s ease-out forwards;
}
}

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

/* Loading Skeletons */
.skeleton {
background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-color) 50%, var(--bg-secondary) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

/* 8. MESSAGE BOXES (Hatnotes)
========================================================================== */
.messagebox {
margin: 1rem 0;
padding: 15px 20px;
border-left: 5px solid;
border-radius: 4px;
background: var(--bg-secondary);
}

.messagebox-success { border-color: var(--status-success); color: var(--status-success); }
.messagebox-error { border-color: var(--status-error); color: var(--status-error); }
.messagebox-warning { border-color: var(--status-warning); background: var(--gold-soft); }

/* 9. PRINT STYLES
========================================================================== */
@media print {
#mw-panel, #p-personal, #p-search, #footer, .social-container {
display: none !important;
}
.mw-body {
margin: 0 !important;
border: none !important;
}
a::after {
content: " (" attr(href) ")";
font-size: 0.8em;
}
}

/* 10. VECTOR OVERRIDES (Personal Tools, Search)
========================================================================== */
#p-personal {
top: 5px !important;
right: 15px !important;
}

#p-personal li a {
color: var(--primary-500) !important;
font-weight: 500;
}

.vector-search-box-input {
border: 1px solid var(--border-color) !important;
border-radius: 20px !important;
background-color: var(--bg-secondary) !important;
}

/* 11. CSS-ONLY THEME TOGGLE CONCEPT
(Note: Full persistence requires JS, but this styles the UI) */
#pt-theme a {
background: var(--primary-500) !important;
color: white !important;
padding: 5px 15px !important;
border-radius: 20px !important;
margin-top: 5px;
}

2026-03-25T09:38:35Z

Ais:

2026-03-25T09:29:32Z

Ais:

MediaWiki:Common.css

2026-03-25T09:23:17Z

Ais: