MB Wiki - User contributions [en]

MediaWiki:Common.css

2026-03-30T12:05:54Z

2026-03-30T10:47:48Z

Ais:

MediaWiki:Common.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:

MediaWiki:Navigation.css

2026-03-25T09:09:27Z

Ais: Created page with "/* ===== SIDEBAR & HEADER NAVIGATION ===== */ /* Sidebar */ #mw-panel { position: fixed; top: 0; left: 0; width: 10em; padding: 0 0 1em 0; background: var(--theme-page-background-color--secondary); height: 100vh; overflow-y: auto; z-index: 100; border-right: 1px solid var(--theme-border-color); } /* Scrollbar Styling */ #mw-panel::-webkit-scrollbar { width: 4px; } #mw-panel::-webkit-scrollbar-track { background: var(--theme-page-background-color--secondary);..."

/* ===== SIDEBAR & HEADER NAVIGATION ===== */

/* Sidebar */
#mw-panel {
position: fixed;
top: 0;
left: 0;
width: 10em;
padding: 0 0 1em 0;
background: var(--theme-page-background-color--secondary);
height: 100vh;
overflow-y: auto;
z-index: 100;
border-right: 1px solid var(--theme-border-color);
}

/* Scrollbar Styling */
#mw-panel::-webkit-scrollbar { width: 4px; }
#mw-panel::-webkit-scrollbar-track { background: var(--theme-page-background-color--secondary); }
#mw-panel::-webkit-scrollbar-thumb { background: var(--teal-300); border-radius: var(--border-radius-full); }

/* Logo */
#p-logo {
position: relative;
width: 10em;
height: 160px;
margin: 0;
padding: 0;
}
#p-logo a {
display: block;
width: 10em;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}

/* Sidebar Sections */
.mw-portlet { margin: 0 0 1.5em 0; }

.vector-menu-heading {
padding: 8px 12px;
margin: 5px 0;
font-size: 0.85em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
background: linear-gradient(90deg, var(--teal-700) 0%, var(--teal-900) 100%);
color: white;
border-radius: var(--border-radius-md);
}

/* Sidebar Links */
.vector-menu-content-list {
list-style: none;
margin: 4px 0;
padding: 4px 0;
}

.vector-menu-content-list .mw-list-item a {
display: block;
padding: 6px 12px;
color: var(--theme-link-color);
font-size: 0.85em;
text-decoration: none;
transition: all var(--transition-fast) ease;
border-radius: var(--border-radius-sm);
margin: 1px 4px;
}

.vector-menu-content-list .mw-list-item a:hover {
background: rgba(79, 209, 199, 0.1);
padding-left: 20px;
color: var(--theme-link-color--hover);
}

.vector-menu-content-list .mw-list-item.selected a {
background: rgba(79, 209, 199, 0.15);
font-weight: 600;
border-left: 3px solid var(--theme-accent-color);
padding-left: 16px;
}

/* Main Content Area */
.mw-body,
.parsoid-body {
background-color: var(--theme-page-background-color) !important;
color: var(--theme-page-text-color);
padding: 1em;
margin-left: 10em;
border-left: 3px solid var(--teal-400);
}

/* Personal Tools */
#p-personal {
position: absolute;
top: 0.5em;
right: 1em;
z-index: 1000;
}

MediaWiki:Colors.css

2026-03-25T09:08:55Z

Ais:

/* ===== COLOR SYSTEM ===== */

:root {
/* Gray Scale */
--gray-950: #0f1419;
--gray-900: #1a202c;
--gray-800: #2d3748;
--gray-700: #4a5568;
--gray-600: #718096;
--gray-500: #a0aec0;
--gray-400: #cbd5e0;
--gray-300: #e2e8f0;
--gray-200: #edf2f7;
--gray-100: #f7fafc;

/* Teal Scale */
--teal-900: #1d4044;
--teal-800: #234e52;
--teal-700: #285e61;
--teal-600: #2c7a7b;
--teal-500: #319795;
--teal-400: #38b2ac;
--teal-300: #4fd1c7;
--teal-200: #81e6d9;
--teal-100: #b2f5ea;
--teal-50: #e6fffa;

/* Spacing */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;

/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

/* Borders */
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
--border-radius-full: 9999px;

/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Theme */
:root body:not(.skin-vector-dark) {
--theme-page-text-color: #1a2a2a;
--theme-page-background-color: #f5fdfb;
--theme-page-background-color--secondary: #e8f5f3;
--theme-link-color: #007d7a;
--theme-link-color--hover: #005652;
--theme-accent-color: #38b2ac;
--theme-accent-label-color: #ffffff;
--theme-border-color: #a1e9dc;
--theme-border-color--subtle: #d1f5ee;
--card-bg-main: #ffffff;
--card-bg-elevated: #ffffff;
--input-bg: #ffffff;
--input-border: #cbd5e0;
}

/* Dark Theme */
:root .skin-vector-dark {
--theme-page-text-color: #e6f7f5;
--theme-page-background-color: rgba(22, 28, 36, 0.98);
--theme-page-background-color--secondary: #2a363d;
--theme-link-color: #5fd9cf;
--theme-link-color--hover: #81e6d9;
--theme-accent-color: #5fd9cf;
--theme-accent-label-color: #1a202c;
--theme-border-color: #4d6872;
--theme-border-color--subtle: #3a5059;
--card-bg-main: #2a363d;
--card-bg-elevated: #34444d;
--input-bg: #2d3748;
--input-border: #4a5568;
}

/* Element-specific Colors */
.text-player { color: #60d9c5; font-weight: 600; }
.text-accent { color: var(--theme-accent-color); font-weight: 600; }
.text-error { color: #d53f3f; }
.text-warning { color: #c05621; }
.text-success { color: #2e8b57; }

MediaWiki:Common.css

2026-03-25T09:08:11Z

Ais: Replaced content with "/* ============================================ MANA BREAK WIKI - MAIN STYLESHEET ============================================ */ /* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap'); /* Core Modules - Imported in order */ @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?ti..."

/* ============================================
MANA BREAK WIKI - MAIN STYLESHEET
============================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

/* Core Modules - Imported in order */
@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:Navigation.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Typography.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:Infoboxes.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:Components.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:RaceTooltips.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Editor.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:Print.css&action=raw&ctype=text/css");

/* Dark Theme Background */
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;
}

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

/* Fixes */
.wikiEditor-ui-text > .ui-resizable {
width: 100% !important;
max-width: 100%;
}

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

MediaWiki:Common.css

2026-03-25T08:51:03Z

Ais:

/* ============================================
MANA BREAK WIKI - MAIN STYLESHEET
============================================
Table of Contents:
1. Variables & Theme Definitions
2. Base Styles & Animations
3. Header & Navigation
4. Sidebar (mw-panel)
5. Footer
6. Content & Typography
7. Tables & Infoboxes
8. Components (Cards, Quotes, Social, etc.)
9. Specialized Components (Navbox, Race Tooltips, Specialized Infoboxes)
10. Responsive Design
============================================ */

/* ===== 1. VARIABLES & THEME DEFINITIONS ===== */

:root {
/* Universal Base Styles */
--font-size: 16px;
--font-size-small: 14px;
--font-size-large: 18px;
--font-size-h1: 32px;
--font-size-h2: 26px;
--font-size-h3: 22px;
--font-size-h4: 18px;

--line-height: 1.6;
--line-height-headings: 1.3;
--line-height-tight: 1.25;

--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

/* Spacing */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;

/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

/* Borders */
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
--border-radius-full: 9999px;
--border-width: 1px;

/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

/* Focus States */
--focus-ring-color: rgba(79, 209, 199, 0.6);
--focus-ring-width: 3px;
--focus-ring-offset: 2px;

/* Gray Scale */
--gray-950: #0f1419;
--gray-900: #1a202c;
--gray-800: #2d3748;
--gray-700: #4a5568;
--gray-600: #718096;
--gray-500: #a0aec0;
--gray-400: #cbd5e0;
--gray-300: #e2e8f0;
--gray-200: #edf2f7;
--gray-100: #f7fafc;

/* Teal Scale */
--teal-900: #1d4044;
--teal-800: #234e52;
--teal-700: #285e61;
--teal-600: #2c7a7b;
--teal-500: #319795;
--teal-400: #38b2ac;
--teal-300: #4fd1c7;
--teal-200: #81e6d9;
--teal-100: #b2f5ea;
--teal-50: #e6fffa;

/* Navigation Variables */
--mb-navigation-left-spacing: 0px;
--mb-navigation-right-spacing: 0px;
--mb-navigation-tab-padding-top: 1.25em;
--mb-navigation-tab-padding-x: 0.75em;
--mb-navigation-tab-padding-bottom: 4px;
--mb-navigation-border-radius: 4px 4px 0 0;
--mb-navigation-font-size: 0.8125em;
}

/* Light Theme */
:root body:not(.skin-vector-dark) {
--theme-page-text-color: #1a2a2a;
--theme-page-background-color: #f5fdfb;
--theme-page-background-color--secondary: #e8f5f3;
--theme-link-color: #007d7a;
--theme-link-color--hover: #005652;
--theme-accent-color: #38b2ac;
--theme-accent-color--hover: #2c9c96;
--theme-accent-label-color: #ffffff;
--theme-border-color: #a1e9dc;
--theme-border-color--subtle: #d1f5ee;
--card-bg-main: #ffffff;
--card-bg-elevated: #ffffff;
--input-bg: #ffffff;
--input-border: #cbd5e0;
--table-header-bg: #e6fffa;
--table-row-even: #f7fafc;
--table-row-odd: #ffffff;
}

/* Dark Theme */
:root .skin-vector-dark {
--theme-page-text-color: #e6f7f5;
--theme-page-background-color: rgba(22, 28, 36, 0.98);
--theme-page-background-color--secondary: #2a363d;
--theme-link-color: #5fd9cf;
--theme-link-color--hover: #81e6d9;
--theme-accent-color: #5fd9cf;
--theme-accent-color--hover: #81e6d9;
--theme-accent-label-color: #1a202c;
--theme-border-color: #4d6872;
--theme-border-color--subtle: #3a5059;
--card-bg-main: #2a363d;
--card-bg-elevated: #34444d;
--input-bg: #2d3748;
--input-border: #4a5568;
--table-header-bg: #2d4a4d;
--table-row-even: #2a363d;
--table-row-odd: #34444d;
}

/* ===== 2. BASE STYLES & ANIMATIONS ===== */

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}

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

@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

*:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
outline-offset: var(--focus-ring-offset) !important;
border-radius: var(--border-radius-sm) !important;
}

@media (prefers-reduced-motion: reduce) {
:root {
--transition-fast: 0ms;
--transition-base: 0ms;
--transition-slow: 0ms;
}
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}

body {
font-family: Helvetica, Arial, sans-serif !important;
background-color: var(--theme-page-background-color) !important;
overflow-y: scroll;
}

.mw-body,
.parsoid-body {
background-color: var(--theme-page-background-color) !important;
color: var(--theme-page-text-color);
padding: 1em;
margin-left: 10em;
border-left: 3px solid var(--teal-400);
}

.mw-body-content {
line-height: 1.6;
}

/* ===== 3. HEADER & NAVIGATION ===== */

/* Header Container */
#mw-head {
position: absolute;
top: 0;
right: 0;
width: 100%;
z-index: 100;
}

#mw-head-base {
position: relative;
margin-top: -5em;
margin-left: 10em;
height: 5em;
}

/* Left Navigation (Page Tabs) */
#left-navigation {
position: absolute;
left: 10em;
top: 2.5em;
}

/* Right Navigation (View History, Search, etc.) */
#right-navigation {
position: absolute;
right: 1em;
top: 2.5em;
}

/* Search Box */
#p-search {
float: left;
margin: 0 0.5em;
position: relative;
}

.vector-search-box-input {
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--border-radius-md);
padding: 6px 28px 6px 8px;
font-size: 0.85em;
width: 200px;
transition: all var(--transition-fast) ease;
}

.vector-search-box-input:focus {
border-color: var(--theme-accent-color);
outline: none;
width: 250px;
}

.vector-search-box-button {
background: transparent;
border: none;
cursor: pointer;
margin-left: -28px;
position: relative;
z-index: 1;
color: var(--theme-page-text-color);
opacity: 0.7;
}

.vector-search-box-button:hover {
opacity: 1;
color: var(--theme-accent-color);
}

/* Personal Tools (User Menu) */
#p-personal {
position: absolute;
top: 0.5em;
right: 1em;
z-index: 1000;
}

#p-personal .vector-menu-content-list {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
list-style: none;
margin: 0;
padding: 0;
}

#p-personal .mw-list-item a {
padding: 0.25em 0.5em;
color: var(--theme-link-color);
text-decoration: none;
border-radius: var(--border-radius-sm);
transition: all var(--transition-fast) ease;
}

#p-personal .mw-list-item a:hover {
background: rgba(79, 209, 199, 0.1);
color: var(--theme-link-color--hover);
}

/* Navigation Tabs */
.vector-menu-tabs ul {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
}

.vector-menu-tabs li {
float: left;
margin: 0 2px;
padding: 0;
}

.vector-menu-tabs .mw-list-item a {
padding: 12px 16px;
display: inline-block;
font-weight: var(--font-weight-medium);
transition: all var(--transition-fast) ease;
color: var(--theme-page-text-color);
text-decoration: none;
}

.vector-menu-tabs .mw-list-item a:hover {
background: rgba(79, 209, 199, 0.1);
color: var(--theme-link-color);
text-decoration: none;
}

.vector-menu-tabs .selected a {
background: var(--theme-page-background-color);
color: var(--theme-accent-color);
font-weight: var(--font-weight-semibold);
border-bottom: 3px solid var(--theme-accent-color);
}

/* ===== 4. SIDEBAR (mw-panel) ===== */

/* ===== 4. SIDEBAR (mw-panel) - FIXED ===== */

#mw-panel {
position: absolute;
top: 0;
left: 0;
width: 10em;
padding: 0 0 1em 0;
background: var(--theme-page-background-color--secondary);
height: 100%;
overflow-y: auto;
z-index: 10;
border-right: 1px solid var(--theme-border-color);
}

/* Scrollbar Styling */
#mw-panel::-webkit-scrollbar {
width: 4px;
}

#mw-panel::-webkit-scrollbar-track {
background: var(--theme-page-background-color--secondary);
}

#mw-panel::-webkit-scrollbar-thumb {
background: var(--teal-300);
border-radius: var(--border-radius-full);
}

/* Logo */
#p-logo {
position: absolute;
top: 0;
left: 0;
width: 10em;
height: 160px;
margin: 0;
padding: 0;
}

#p-logo a {
display: block;
width: 10em;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}

/* Sidebar Sections - Improved */
.mw-portlet {
margin: 0 0 1.5em 0;
}

/* Hide the default toolbox section that causes duplication */
#p-tb {
display: none !important;
}

/* Style all sidebar headings consistently */
.vector-menu-heading {
padding: 8px 12px;
margin: 5px 0 8px 0;
font-size: 0.85em;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
background: linear-gradient(90deg, var(--teal-700) 0%, var(--teal-900) 100%);
color: white;
border-radius: var(--border-radius-md);
position: relative;
}

/* Add icon indicator to headings */
.vector-menu-heading::before {
content: "▸";
position: absolute;
left: auto;
right: 12px;
opacity: 0.7;
font-size: 0.8em;
}

/* Sidebar Links Container */
.vector-menu-content-list {
list-style: none;
margin: 4px 0;
padding: 4px 0;
}

/* Sidebar Links */
.vector-menu-content-list .mw-list-item {
margin: 0;
padding: 0;
}

.vector-menu-content-list .mw-list-item a {
display: block;
padding: 6px 12px;
color: var(--theme-link-color);
font-size: 0.85em;
text-decoration: none;
transition: all var(--transition-fast) ease;
border-radius: var(--border-radius-sm);
margin: 1px 4px;
position: relative;
}

.vector-menu-content-list .mw-list-item a:hover {
background: rgba(79, 209, 199, 0.1);
padding-left: 20px;
color: var(--theme-link-color--hover);
}

.vector-menu-content-list .mw-list-item.selected a {
background: rgba(79, 209, 199, 0.15);
font-weight: var(--font-weight-semibold);
border-left: 3px solid var(--theme-accent-color);
padding-left: 16px;
}

/* Style specific sidebar sections */
#p-navigation .vector-menu-heading,
#p-interaction .vector-menu-heading,
#p-tb .vector-menu-heading {
background: linear-gradient(90deg, var(--teal-700) 0%, var(--teal-900) 100%);
}

/* Custom Tools Section - If you have custom tools */
#p-custom-tools {
margin-top: 1em;
}

/* Add spacing between sections */
#p-navigation,
#p-interaction,
#p-custom-tools,
#p-tb {
margin-bottom: 1.5em;
}

/* Style for special links like "Add new page" */
.vector-menu-content-list .mw-list-item a[href*="Add new page"],
.vector-menu-content-list .mw-list-item a[href*="edit"],
.vector-menu-content-list .mw-list-item a.new {
color: var(--teal-400) !important;
font-weight: var(--font-weight-medium);
}

.vector-menu-content-list .mw-list-item a[href*="Add new page"]:hover,
.vector-menu-content-list .mw-list-item a[href*="edit"]:hover {
color: var(--teal-300) !important;
}

/* Fix for any duplicate sections */
#p-interaction + #p-tb {
margin-top: 0;
}

/* Ensure proper spacing for nested menus */
.vector-menu-content-list ul {
list-style: none;
margin-left: 12px;
padding-left: 0;
}

.vector-menu-content-list li li a {
padding-left: 20px;
font-size: 0.8em;
}

.vector-menu-content-list li li a:hover {
padding-left: 28px;
}

/* Active/Current page indicator */
.vector-menu-content-list .mw-list-item.selected a {
background: rgba(79, 209, 199, 0.2);
font-weight: var(--font-weight-bold);
}

/* Optional: Add icons to sidebar links */
.vector-menu-content-list .mw-list-item a[href*="Recent changes"]::before {
content: "📋";
margin-right: 6px;
font-size: 0.9em;
}

.vector-menu-content-list .mw-list-item a[href*="What links here"]::before {
content: "🔗";
margin-right: 6px;
font-size: 0.9em;
}

.vector-menu-content-list .mw-list-item a[href*="Upload file"]::before {
content: "📤";
margin-right: 6px;
font-size: 0.9em;
}

.vector-menu-content-list .mw-list-item a[href*="Random page"]::before {
content: "🎲";
margin-right: 6px;
font-size: 0.9em;
}

/* Dark theme adjustments */
.skin-vector-dark #mw-panel {
background: var(--theme-page-background-color--secondary);
}

.skin-vector-dark .vector-menu-heading {
background: linear-gradient(90deg, var(--teal-800) 0%, var(--teal-900) 100%);
}

.skin-vector-dark .vector-menu-content-list .mw-list-item a:hover {
background: rgba(79, 209, 199, 0.15);
}

/* Responsive adjustments */
@media screen and (max-width: 1024px) {
#mw-panel {
display: none;
}
}
/* ===== 5. FOOTER ===== */

.mw-footer {
margin-left: 10em;
margin-top: 2em;
padding: 1.5em 2em;
background: var(--theme-page-background-color--secondary) !important;
border-top: 3px solid var(--teal-300);
position: relative;
clear: both;
}

/* Animated Top Border */
.mw-footer:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
var(--teal-400),
var(--teal-300),
var(--teal-200),
var(--teal-300),
var(--teal-400));
background-size: 200% 100%;
animation: shimmer 3s infinite linear;
}

/* Footer Info Section */
#footer-info {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--theme-border-color--subtle);
}

#footer-info li {
color: var(--theme-page-text-color) !important;
font-size: 0.85em;
line-height: 1.4;
padding: 0 8px;
border-right: 1px solid var(--theme-border-color--subtle);
}

#footer-info li:last-child {
border-right: none;
}

#footer-info li a {
color: var(--theme-link-color);
text-decoration: none;
}

#footer-info li a:hover {
color: var(--theme-link-color--hover);
text-decoration: underline;
}

/* Footer Places */
#footer-places {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin: 16px 0;
padding: 12px 0;
}

#footer-places li a {
color: var(--theme-page-text-color);
text-decoration: none;
opacity: 0.7;
font-size: 0.8em;
}

#footer-places li a:hover {
opacity: 1;
color: var(--theme-link-color);
text-decoration: underline;
}

/* Copyright */
#footer-copyright {
text-align: center;
font-size: 0.75em;
color: var(--gray-600);
padding: 16px 0 8px;
border-top: 1px solid var(--theme-border-color--subtle);
margin-top: 8px;
}

/* ===== 6. CONTENT & TYPOGRAPHY ===== */

.mw-body a:not(.new) {
text-decoration: none;
color: var(--theme-link-color);
transition: color var(--transition-fast) ease;
}

.mw-body a:not(.new):hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
color: var(--theme-link-color--hover);
}

.mw-body a.new {
color: var(--teal-500) !important;
font-weight: var(--font-weight-semibold) !important;
border-bottom: 1px dashed rgba(0, 163, 163, 0.4) !important;
background-color: rgba(0, 163, 163, 0.08) !important;
padding: 1px 3px !important;
border-radius: var(--border-radius-sm) !important;
}

.mw-body a.new:hover {
background-color: rgba(0, 163, 163, 0.15) !important;
border-bottom-style: solid !important;
text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
color: var(--theme-page-text-color);
}

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

/* ===== 7. TABLES & INFOBOXES ===== */

/* Base wikitable - consolidated and improved */
.wikitable {
width: 100%;
margin: 1.5em 0;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--theme-border-color);
background-color: var(--card-bg-main);
border-radius: var(--border-radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all var(--transition-base);
}

/* Header styling */
.wikitable > tr > th,
.wikitable > * > tr > th {
background: linear-gradient(135deg,
var(--teal-600) 0%,
var(--teal-700) 100%) !important;
color: var(--theme-accent-label-color) !important;
font-weight: var(--font-weight-semibold);
padding: 0.75rem 1rem !important;
border-bottom: 2px solid var(--teal-800) !important;
text-align: center;
vertical-align: middle;
font-size: 0.95em;
letter-spacing: 0.3px;
}

/* Add subtle hover effect to headers */
.wikitable > tr > th:hover,
.wikitable > * > tr > th:hover {
background: linear-gradient(135deg,
var(--teal-500) 0%,
var(--teal-600) 100%) !important;
}

/* Cell styling - improved readability */
.wikitable > tr > td,
.wikitable > * > tr > td {
padding: 0.75rem 1rem !important;
border-bottom: 1px solid var(--theme-border-color--subtle);
vertical-align: middle;
color: var(--theme-page-text-color);
transition: background-color var(--transition-fast);
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}

/* Striped rows for better readability */
.wikitable > tr:nth-child(even):not(:first-child),
.wikitable > * > tr:nth-child(even):not(:first-child) {
background-color: var(--table-row-even);
}

.wikitable > tr:nth-child(odd):not(:first-child),
.wikitable > * > tr:nth-child(odd):not(:first-child) {
background-color: var(--table-row-odd);
}

/* Hover effect for rows */
.wikitable > tr:hover:not(:first-child),
.wikitable > * > tr:hover:not(:first-child) {
background-color: rgba(56, 178, 172, 0.08) !important;
}

/* First column styling (often labels) */
.wikitable > tr > td:first-child,
.wikitable > * > tr > td:first-child,
.wikitable > tr > th:first-child,
.wikitable > * > tr > th:first-child {
font-weight: var(--font-weight-medium);
border-left: 3px solid transparent;
}

/* Highlight first column on hover */
.wikitable > tr:hover:not(:first-child) > td:first-child,
.wikitable > * > tr:hover:not(:first-child) > td:first-child {
border-left-color: var(--teal-300);
background-color: rgba(79, 209, 199, 0.1);
}

/* Caption styling */
.wikitable > caption {
caption-side: top;
padding: 0.875rem 1rem;
background: var(--teal-50);
color: var(--teal-800);
font-weight: var(--font-weight-semibold);
text-align: left;
border-bottom: 1px solid var(--teal-200);
font-size: 1.05em;
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
margin-bottom: 0;
}

/* Collapsible toggle in caption */
.wikitable > caption .mw-collapsible-toggle {
float: right;
margin: -0.25rem 0;
padding: 0.25rem 0.75rem;
background: var(--teal-100);
border-radius: var(--border-radius-sm);
border: 1px solid var(--teal-300);
color: var(--teal-700);
font-size: 0.85em;
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all var(--transition-fast);
}

.wikitable > caption .mw-collapsible-toggle:hover {
background: var(--teal-200);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}

/* Sortable tables */
.client-js .wikitable.sortable > * > tr:first-child > th:not(.unsortable),
.jquery-tablesorter th.headerSort {
cursor: pointer;
position: relative;
padding-right: 2rem !important;
user-select: none;
}

.client-js .wikitable.sortable > * > tr:first-child > th:not(.unsortable):after,
.jquery-tablesorter th.headerSort:after {
content: "↕";
position: absolute;
right: 0.75rem;
font-size: 0.85em;
opacity: 0.6;
transition: all var(--transition-fast);
}

.client-js .wikitable.sortable > * > tr:first-child > th.headerSortUp:after,
.jquery-tablesorter th.headerSortUp:after {
content: "↑";
opacity: 1;
}

.client-js .wikitable.sortable > * > tr:first-child > th.headerSortDown:after,
.jquery-tablesorter th.headerSortDown:after {
content: "↓";
opacity: 1;
}

/* Links inside tables */
.wikitable a,
.wikitable a:visited {
color: var(--theme-link-color);
text-decoration: none;
font-weight: var(--font-weight-medium);
border-bottom: 1px dotted transparent;
transition: all var(--transition-fast);
}

.wikitable a:hover {
color: var(--theme-link-color--hover);
text-decoration: none;
border-bottom-color: currentColor;
}

/* Images in tables */
.wikitable img {
max-width: 100%;
height: auto;
vertical-align: middle;
border-radius: var(--border-radius-sm);
border: 1px solid var(--theme-border-color--subtle);
transition: transform var(--transition-fast);
}

.wikitable a:hover img {
transform: scale(1.05);
border-color: var(--teal-300);
}

/* Specific table types */

/* Schedule tables */
.scheduletable.wikitable {
width: auto;
min-width: 300px;
}

.scheduletable.wikitable > tr > td:first-child,
.scheduletable.wikitable > * > tr > td:first-child {
width: 150px;
font-weight: var(--font-weight-semibold);
background-color: rgba(56, 178, 172, 0.05);
}

.scheduletable > tr > th,
.scheduletable > * > tr > th,
.scheduletable th {
background: linear-gradient(135deg,
var(--teal-600) 0%,
var(--teal-700) 100%);
color: var(--theme-accent-label-color);
font-weight: var(--font-weight-semibold);
padding: 0.75rem 1rem;
border-bottom: 2px solid var(--teal-800);
text-align: center;
vertical-align: middle;
font-size: 0.95em;
letter-spacing: 0.3px;
white-space: nowrap;
}

.scheduletable > tr > td,
.scheduletable > * > tr > td,
.scheduletable td {
padding: 0.75rem 1rem;
border: 1px solid var(--theme-border-color--subtle);
vertical-align: middle;
color: var(--theme-page-text-color);
text-align: center;
word-wrap: break-word;
overflow-wrap: break-word;
transition: background-color var(--transition-fast);
}

.scheduletable > tr > td:first-child,
.scheduletable > * > tr > td:first-child,
.scheduletable td:first-child {
width: 150px !important;
min-width: 150px;
max-width: 150px;
font-weight: var(--font-weight-semibold);
background-color: rgba(56, 178, 172, 0.08);
text-align: left;
padding-left: 1.25rem;
border-right: 2px solid var(--teal-300);
}

/* Roles Table */
.roles-table {
background-color: transparent !important;
width: 100% !important;
table-layout: auto !important;
margin: 1rem 0 !important;
}

.roles-table > tr > th,
.roles-table > * > tr > th {
background-color: var(--teal-600);
color: #000 !important;
padding: 12px 8px !important;
font-weight: bold !important;
text-align: center !important;
border: 1px solid #aaa !important;
}

.roles-table > tr > th:first-child,
.roles-table > * > tr > th:first-child {
min-width: 180px !important;
}

.roles-table > tr > th:nth-child(2),
.roles-table > * > tr > th:nth-child(2) {
min-width: 300px !important;
}

.roles-table > tr > th:nth-child(3),
.roles-table > * > tr > th:nth-child(3),
.roles-table > tr > th:nth-child(4),
.roles-table > * > tr > th:nth-child(4) {
min-width: 150px !important;
}

.roles-table > tr > td,
.roles-table > * > tr > td {
padding: 10px 8px !important;
border: 1px solid #aaa !important;
vertical-align: top !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}

.roles-table > tr > td:first-child,
.roles-table > * > tr > td:first-child {
font-weight: bold !important;
white-space: nowrap !important;
}

/* Category breakdown tables */
.category-table,
.location-table {
background-color: transparent !important;
width: 100% !important;
margin: 1rem 0 !important;
}

.category-table > tr > th,
.category-table > * > tr > th,
.location-table > tr > th,
.location-table > * > tr > th {
background-color: var(--teal-600) !important;
color: #000 !important;
padding: 12px 8px !important;
font-weight: bold !important;
text-align: center !important;
border: 1px solid #aaa !important;
}

.category-table > tr > th:nth-child(1),
.category-table > * > tr > th:nth-child(1),
.location-table > tr > th:nth-child(1),
.location-table > * > tr > th:nth-child(1) {
width: 30% !important;
min-width: 150px !important;
}

.category-table > tr > th:nth-child(2),
.category-table > * > tr > th:nth-child(2),
.location-table > tr > th:nth-child(2),
.location-table > * > tr > th:nth-child(2) {
width: 15% !important;
min-width: 80px !important;
}

.category-table > tr > th:nth-child(3),
.category-table > * > tr > th:nth-child(3),
.location-table > tr > th:nth-child(3),
.location-table > * > tr > th:nth-child(3) {
width: 55% !important;
}

.category-table > tr > td,
.category-table > * > tr > td,
.location-table > tr > td,
.location-table > * > tr > td {
padding: 10px 8px !important;
border: 1px solid #aaa !important;
vertical-align: top !important;
}

.category-table > tr > td:nth-child(3),
.category-table > * > tr > td:nth-child(3),
.location-table > tr > td:nth-child(3),
.location-table > * > tr > td:nth-child(3) {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}

.category-table > tr:last-child > td,
.category-table > * > tr:last-child > td,
.location-table > tr:last-child > td,
.location-table > * > tr:last-child > td {
font-weight: bold !important;
background-color: #f5f5f5 !important;
}

/* Portable Infobox - Base */
.portable-infobox {
float: right;
clear: right;
margin: 0 0 15px 15px;
max-width: 300px;
width: 100%;
border: 1px solid var(--theme-border-color);
border-radius: 8px;
background-color: var(--card-bg-main);
font-size: 14px;
}

.portable-infobox p {
margin: 0 !important;
}

.portable-infobox .pi-title {
background: var(--teal-600);
color: var(--theme-accent-label-color);
padding: 8px 10px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
text-align: center;
font-weight: bold;
font-size: 1.2em;
}

.portable-infobox .pi-item {
display: flex;
justify-content: space-between;
padding: 5px 10px;
border-bottom: 1px dotted var(--theme-border-color--subtle);
}

.portable-infobox .pi-data-label {
font-weight: 500;
color: var(--gray-700);
min-width: 40%;
flex-shrink: 0;
}

.portable-infobox .pi-data-value {
text-align: right;
flex-grow: 1;
}

/* Character Infobox */
.character-infobox {
float: right;
clear: right;
max-width: 300px;
width: 100%;
margin: 0 0 16px 16px;
border: 1px solid var(--theme-border-color);
border-radius: var(--border-radius-md);
background-color: var(--card-bg-main);
font-size: 0.9em;
}

.character-header {
background: var(--teal-600);
color: var(--theme-accent-label-color);
padding: 8px 10px;
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
text-align: center;
font-weight: var(--font-weight-bold);
}

.character-title {
font-size: 1.5em;
}

.character-image {
padding: 10px;
text-align: center;
}

.character-section {
padding: 5px 10px;
}

.section-title {
font-size: 1.1em;
font-weight: var(--font-weight-semibold);
margin-top: 10px;
margin-bottom: 5px;
border-bottom: 1px solid var(--theme-border-color--subtle);
}

.data-row {
display: flex;
justify-content: space-between;
padding: 3px 0;
border-bottom: 1px dotted var(--gray-300);
}

.data-label {
font-weight: var(--font-weight-medium);
color: var(--gray-700);
}

/* Weapon Infobox */
.weapon-infobox {
float: right;
clear: right;
max-width: 300px;
width: 100%;
margin: 0 0 16px 16px;
border: 1px solid #1a6a7a;
border-radius: 10px;
background-color: var(--card-bg-main);
font-size: 0.9em;
}

.weapon-header {
background: #1a6a7a;
color: white;
padding: 8px 10px;
text-align: center;
font-weight: bold;
font-size: 1.5em;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.weapon-image {
padding: 10px;
text-align: center;
}

.weapon-image img {
max-width: 100%;
height: auto;
border-radius: 4px;
border: 1px solid var(--theme-border-color--subtle);
}

.weapon-section {
padding: 0;
}

.weapon-section .section-title {
padding: 5px 10px;
color: var(--gray-700);
font-weight: bold;
border-bottom: 1px solid #a2a9b1;
margin: 10px 0 5px 0;
}

.weapon-section > div {
display: flex;
justify-content: space-between;
padding: 5px 10px;
border-bottom: 1px dotted #a2a9b1;
}

.weapon-section > div:last-child {
border-bottom: none;
}

.weapon-section > div > span:first-child {
font-weight: 500;
color: var(--gray-700);
width: 40%;
text-align: left;
}

.weapon-section > div > span:last-child {
color: var(--gray-700);
text-align: right;
width: 60%;
}

/* Horizontal requirements section */
.weapon-section > div[style*="display: flex !important; justify-content: space-around"] {
display: flex !important;
justify-content: space-around !important;
padding: 10px !important;
text-align: center !important;
border-bottom: none !important;
}

.weapon-section > div[style*="display: flex !important; justify-content: space-around"] > div {
flex: 1;
padding: 5px;
}

.weapon-section > div[style*="display: flex !important; justify-content: space-around"] > div > div:first-child {
font-weight: 500;
color: var(--gray-700);
font-size: 0.9em;
margin-bottom: 3px;
}

.weapon-section > div[style*="display: flex !important; justify-content: space-around"] > div > div:last-child {
font-weight: bold;
color: var(--gray-700);
font-size: 1.1em;
}

/* Monster Infobox */
.monster-infobox {
float: right;
clear: right;
max-width: 350px;
width: 100%;
margin: 0 0 16px 16px;
border: 1px solid #7a1a1a;
border-radius: 10px;
background-color: var(--card-bg-main);
font-size: 0.9em;
}

.monster-header {
background: #7a1a1a;
color: white;
padding: 8px 10px;
text-align: center;
font-weight: bold;
font-size: 1.5em;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.monster-image {
padding: 10px;
text-align: center;
}

.monster-image img {
max-width: 100%;
height: auto;
border-radius: 4px;
border: 1px solid var(--theme-border-color--subtle);
}

.monster-section {
padding: 0;
}

.monster-section .section-title {
padding: 5px 10px;
color: var(--gray-700);
font-weight: bold;
border-bottom: 1px solid #a2a9b1;
margin: 10px 0 5px 0;
}

.monster-section > div[style*="display: flex"] {
display: flex;
justify-content: space-between;
padding: 5px 10px;
border-bottom: 1px dotted #a2a9b1;
}

.monster-section > div[style*="display: flex"]:last-child {
border-bottom: none;
}

.monster-section > div[style*="display: flex"] > span:first-child {
font-weight: 500;
color: var(--gray-700);
width: 40%;
text-align: left;
}

.monster-section > div[style*="display: flex"] > span:last-child {
color: var(--gray-700);
text-align: right;
width: 60%;
}

/* Phase sections */
.monster-section > div[style*="Phase"] {
background: rgba(0, 0, 0, 0.05);
padding: 8px 10px;
font-weight: bold;
color: #7a1a1a;
border-left: 3px solid #7a1a1a;
margin: 10px 0 5px 0;
}

.monster-section ul {
margin: 0 !important;
padding-left: 20px !important;
}

.monster-section li {
margin-bottom: 3px;
color: var(--gray-700);
}

/* ===== 8. COMPONENTS ===== */

/* Cards */
.card {
background-color: var(--card-bg-main);
border-radius: var(--border-radius-md);
border: 1px solid var(--theme-border-color);
box-shadow: var(--shadow-sm);
transition: all var(--transition-base) ease;
}

.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}

/* Status Messages */
.status-alert {
background-color: rgba(213, 63, 63, 0.1);
color: var(--theme-alert-color);
border-left: 4px solid var(--theme-alert-color);
padding: 12px;
}

.status-warning {
background-color: rgba(192, 86, 33, 0.1);
color: var(--theme-warning-color);
border-left: 4px solid var(--theme-warning-color);
padding: 12px;
}

.status-success {
background-color: rgba(46, 139, 87, 0.1);
color: var(--theme-success-color);
border-left: 4px solid var(--theme-success-color);
padding: 12px;
}

/* Social Links */
.social {
position: relative;
z-index: 999;
text-align: center;
margin: 20px auto;
padding: 15px 0;
max-width: 85%;
background: var(--theme-page-background-color--secondary);
border-radius: 12px;
border: 1px solid var(--theme-border-color);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 15px;
}

.social .iconname {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180px;
padding: 12px 20px;
background: var(--theme-page-background-color);
border-radius: 8px;
border: 1px solid var(--theme-border-color);
transition: all 0.3s ease;
}

.social .iconname:hover {
background: var(--teal-50) !important;
transform: translateY(-2px);
border-color: var(--theme-accent-color);
}

.social .iconname a.external {
display: flex !important;
align-items: center !important;
text-decoration: none !important;
color: var(--theme-page-text-color) !important;
font-weight: var(--font-weight-medium) !important;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

.social .iconname .floatleft {
display: flex !important;
align-items: center !important;
margin-right: 10px !important;
margin-bottom: 0 !important;
float: none !important;
}

.social .iconname .floatleft a img {
width: 20px !important;
height: 20px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
filter: none !important;
}

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

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

.quotes-box {
border: 1px solid #434242;
border-left: 8px solid #eab759 !important;
border-radius: 2px;
padding: 15px;
margin: 1em 0 1.5em;
font-family: serif;
font-size: 1em;
width: 50%;
max-width: 450px;
line-height: 1.5em;
background: rgba(255, 255, 255, 0.05);
margin-left: 200px;
display: flex;
flex-direction: row;
}

.quotes-box blockquote {
margin: 0;
font-style: italic;
text-align: center;
}

/* ===== 9. SPECIALIZED COMPONENTS ===== */

/* ===== NAVBOX STYLING ===== */

/* Base navbox */
.navbox {
width: 100% !important;
margin: 1.5em 0 !important;
border-spacing: 0 !important;
border-collapse: separate !important;
border: 1px solid var(--theme-border-color) !important;
background-color: var(--card-bg-main) !important;
border-radius: 8px !important;
overflow: hidden !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Navbox title/header */
.navbox-title {
background: var(--teal-100) !important;
}

.navbox-title th {
padding: 12px 16px !important;
font-weight: 600 !important;
font-size: 1.1em !important;
text-align: center !important;
border-bottom: 2px solid var(--teal-800) !important;
}

.navbox-title a {
text-decoration: none !important;
}

.navbox-title a:hover {
text-decoration: underline !important;
}

/* Navbox group headers */
.navbox-group {
background-color: var(--teal-50) !important;
width: 180px !important;
min-width: 180px !important;
vertical-align: top !important;
border-right: 1px solid var(--teal-200) !important;
}

.navbox-group th {
background: transparent !important;
font-size: 0.95em !important;
padding: 10px 12px !important;
text-align: left !important;
font-weight: 600 !important;
}

/* Navbox list/content cells */
.navbox-list {
padding: 12px !important;
line-height: 1.5 !important;
vertical-align: top !important;
background-color: var(--card-bg-main) !important;
}

.navbox-list td {
padding: 12px !important;
}

/* Navbox list items - SEPARATED STYLE (like chips) */
.navbox-list ul {
list-style: none !important;
padding-left: 0 !important;
margin: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}

.navbox-list li {
margin-bottom: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
background: var(--teal-50) !important;
border-radius: 4px !important;
border: 1px solid var(--teal-100) !important;
}

/* Links inside navbox - Chip style */
.navbox-list a,
.navbox-group a {
text-decoration: none !important;
padding: 5px 10px !important;
border-radius: 4px !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}

.navbox-list a:hover,
.navbox-group a:hover {
background-color: var(--teal-100) !important;
text-decoration: underline !important;
}

/* Alternative row styling */
.alt .navbox-list {
background-color: rgba(56, 178, 172, 0.05) !important;
}

.alt .navbox-list li {
background: rgba(56, 178, 172, 0.1) !important;
border-color: rgba(56, 178, 172, 0.2) !important;
}

/* Subgroup styling */
.navbox-subgroup {
margin: 10px 0 0 0 !important;
border-spacing: 0 !important;
width: 100% !important;
border-top: 1px solid var(--teal-100) !important;
padding-top: 10px !important;
}

.navbox-subgroup .navbox-group {
background-color: var(--teal-100) !important;
width: 160px !important;
min-width: 160px !important;
}

/* Small navboxes */
.navbox-small {
width: auto !important;
min-width: 250px !important;
max-width: 300px !important;
float: right !important;
margin: 0 0 16px 16px !important;
}

.navbox-small .navbox-list ul {
gap: 4px !important;
}

/* Collapsible Navbox */
.mw-collapsible .navbox-title {
cursor: pointer !important;
padding-right: 40px !important;
position: relative !important;
}

.mw-collapsible .navbox-title:after {
content: "▼" !important;
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: white !important;
font-size: 12px !important;
font-weight: bold !important;
background: rgba(255, 255, 255, 0.2) !important;
width: 24px !important;
height: 24px !important;
border-radius: 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

.mw-collapsible.mw-collapsed .navbox-title:after {
content: "▶" !important;
}

.mw-collapsible-content {
overflow: hidden !important;
}

/* Horizontal Navboxes */
.navbox-horizontal .navbox-list ul {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}

.navbox-horizontal .navbox-list li {
display: inline-flex !important;
}

.navbox-horizontal .navbox-list li:not(:last-child):after {
display: none !important;
}

/* Dark theme navbox adjustments */
.skin-vector-dark .navbox {
background-color: var(--card-bg-main) !important;
border-color: var(--teal-700) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.skin-vector-dark .navbox-title {
background: var(--teal-800) !important;
border-bottom-color: var(--teal-900) !important;
}

.skin-vector-dark .navbox-group {
background-color: rgba(95, 217, 207, 0.1) !important;
border-right-color: var(--teal-700) !important;
}

.skin-vector-dark .navbox-group th {
color: var(--teal-200) !important;
}

.skin-vector-dark .navbox-list li {
background: rgba(95, 217, 207, 0.1) !important;
border-color: rgba(95, 217, 207, 0.2) !important;
}

.skin-vector-dark .navbox-list a:hover,
.skin-vector-dark .navbox-group a:hover {
background-color: rgba(95, 217, 207, 0.2) !important;
}

.skin-vector-dark .alt .navbox-list {
background-color: rgba(95, 217, 207, 0.05) !important;
}

.skin-vector-dark .alt .navbox-list li {
background: rgba(95, 217, 207, 0.15) !important;
border-color: rgba(95, 217, 207, 0.25) !important;
}

.skin-vector-dark .mw-collapsible .navbox-title:after {
background: rgba(255, 255, 255, 0.15) !important;
}

/* ===== RACE SYSTEM TOOLTIPS ===== */

.race-tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
}

.race-link {
font-weight: bold;
text-decoration: none !important;
border-bottom: 1px dotted;
transition: all 0.2s ease;
display: inline-block;
}

.race-tooltip-container:hover .race-link {
opacity: 0.9;
}

/* Tooltip on LEFT side of link */
.race-tooltip {
visibility: hidden;
width: 250px;
background-color: #2c3e50;
color: #ecf0f1;
text-align: left;
padding: 12px;
border-radius: 8px;
position: absolute;
z-index: 1000;
top: 50%;
right: 100%;
transform: translateY(-50%);
margin-right: 10px;
opacity: 0;
transition: opacity 0.3s;
font-size: 0.9em;
font-weight: normal;
line-height: 1.4;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
border: 1px solid #34495e;
}

.race-tooltip::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
border-width: 8px;
border-style: solid;
border-color: transparent transparent transparent #2c3e50;
}

.race-tooltip strong {
color: #3498db;
font-size: 1.1em;
display: block;
margin-bottom: 5px;
}

.race-tooltip small {
color: #bdc3c7;
font-size: 0.85em;
}

.race-tooltip-container:hover .race-tooltip {
visibility: visible;
opacity: 0.98;
}

.race-error {
color: #d33;
font-style: italic;
background: #fee;
padding: 2px 5px;
border-radius: 3px;
}

.race-badge {
display: inline-block;
font-weight: bold;
transition: transform 0.2s ease;
}

.race-badge:hover {
transform: translateY(-2px);
text-decoration: none !important;
}

.race-infobox {
border-collapse: collapse;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-left: 15px;
}

.race-infobox tr:nth-child(even) {
background-color: #f8f8f8;
}

.race-infobox td {
border-bottom: 1px solid #eee;
}

/* Dark theme race tooltips */
.skin-vector-dark .race-tooltip {
background-color: #1a2a2a;
border-color: #4d6872;
}

.skin-vector-dark .race-tooltip::after {
border-left-color: #1a2a2a;
}

.skin-vector-dark .race-error {
background: #4a2626;
color: #fc8181;
}

.skin-vector-dark .race-infobox tr:nth-child(even) {
background-color: rgba(95, 217, 207, 0.1);
}

/* ===== 10. RESPONSIVE DESIGN ===== */

@media screen and (max-width: 1024px) {
.mw-body,
#mw-data-after-content,
.mw-footer {
margin-left: 0;
}

#mw-panel {
display: none;
}

#left-navigation {
left: 1em;
}

#mw-head-base {
margin-left: 0;
}

.wikitable {
font-size: 0.95em;
}

.wikitable > tr > th,
.wikitable > * > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > td {
padding: 0.625rem 0.75rem !important;
}

.scheduletable.wikitable {
width: 100%;
}

.artisan-table.wikitable {
width: 100%;
}

.heart-event-table.wikitable {
width: 100%;
}

.navbox-small {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 1em 0 !important;
}
}

@media screen and (max-width: 768px) {
.mw-body {
padding: 0.75em;
}

#left-navigation,
#right-navigation {
position: static;
float: none;
margin: 0;
}

#mw-head {
position: relative;
height: auto;
}

.vector-menu-tabs ul {
flex-wrap: wrap;
}

.vector-search-box-input {
width: 100%;
}

.vector-search-box-input:focus {
width: 100%;
}

.wikitable {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--border-radius-sm);
}

.wikitable > caption {
position: sticky;
left: 0;
}

.wikitable > tr > th,
.wikitable > * > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > td {
min-width: 100px;
font-size: 0.9em;
}

/* Make sortable tables work better on mobile */
.client-js .wikitable.sortable > * > tr:first-child > th:not(.unsortable),
.jquery-tablesorter th.headerSort {
font-size: 0.85em;
white-space: normal;
line-height: 1.3;
padding: 0.5rem 1.5rem 0.5rem 0.5rem !important;
}

/* Improve touch targets */
.wikitable a {
padding: 0.25rem 0;
display: inline-block;
}

.portable-infobox {
float: none;
max-width: 100%;
margin: 0 0 16px 0;
}

.portable-infobox .pi-item {
flex-direction: column;
}

.portable-infobox .pi-data-label,
.portable-infobox .pi-data-value {
min-width: 100%;
text-align: left;
}

.character-infobox,
.weapon-infobox,
.monster-infobox {
float: none;
max-width: 100%;
margin: 0 0 16px 0;
}

.social {
flex-direction: column;
gap: 8px;
}

.social .iconname {
width: 100%;
max-width: 100%;
}

#footer-info,
#footer-places {
flex-direction: column;
align-items: center;
gap: 8px;
}

#footer-info li {
border-right: none;
text-align: center;
}

/* Navbox responsive */
.navbox {
margin: 1em 0 !important;
}

.navbox-group,
.navbox-group th {
width: 100% !important;
min-width: 100% !important;
display: block !important;
border-right: none !important;
border-bottom: 1px solid var(--teal-200) !important;
}

.navbox-list {
padding: 10px !important;
}

.navbox-list ul {
gap: 4px !important;
}

.navbox-list li {
font-size: 0.9em !important;
}

/* Race tooltip responsive */
.race-tooltip {
width: 240px;
font-size: 0.85em;
padding: 10px;
}

.race-infobox {
width: 100% !important;
float: none !important;
margin: 10px 0 !important;
}

.quotes-box {
width: 100%;
max-width: 100%;
margin-left: 0;
}
}

@media screen and (max-width: 480px) {
.race-tooltip {
width: 200px;
left: 0;
transform: translateX(0);
}

.race-tooltip::after {
left: 20px;
transform: translateX(0);
}
}

@media print {
:root {
--theme-page-text-color: #000000;
--theme-page-background-color: #ffffff;
}

a {
color: #000000 !important;
text-decoration: underline !important;
}

#mw-panel,
#p-personal,
.social {
display: none !important;
}

.wikitable {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ccc;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
background: #f0f0f0 !important;
color: #000 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}

.wikitable a {
color: #000;
text-decoration: none;
}

.wikitable a[href]:after {
content: " (" attr(href) ")";
font-size: 0.9em;
font-weight: normal;
}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
:root body:not(.skin-vector-dark) {
--theme-link-color: #005652;
--theme-border-color: #1a2a2a;
}

:root .skin-vector-dark {
--theme-link-color: #81e6d9;
--theme-border-color: #718096;
}

.wikitable {
border-width: 2px;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
border-bottom-width: 3px;
}

.wikitable > tr > td,
.wikitable > * > tr > td {
border-bottom-width: 1px;
}
}

/* Focus styles for keyboard navigation */
.wikitable a:focus-visible,
.navbox a:focus-visible {
outline: 2px solid var(--focus-ring-color);
outline-offset: 2px;
border-radius: 2px;
text-decoration: none;
}

/* Import statements */
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Module:Documentation.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Documentation.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Tables.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:MessageBox.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:CustomTabs.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Navbox.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Icons.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Dialogue.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Cards.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Tabbers.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Mobile.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Recipe.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Modal.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:AceEditor.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:CodeMirror.css");

MediaWiki:Common.css

2026-03-25T07:26:34Z

Ais:

2026-03-25T05:08:03Z

Ais:

MediaWiki:Common.css

2026-03-25T05:06:43Z

Ais:

2026-03-12T11:58:50Z

Ais: Created page with "{{InfoboxNPC | name = Lydia | image = Lydia_Portrait.png | gender = Female | age = Middle Age | race = Human | role = Foreign Adventurer | location = Non-Resident | schedule1 = [9:00] Hangout at Garden | schedule2 = [15:00] Hangout at Training Ground | schedule3 = [21:00] Out of town | note = Visits Eldoria since it's the only location where she has not been blacklisted yet due to petty crimes. }} '''Lydia''' is a foreign adventurer whose past has limited her options. A..."

{{InfoboxNPC
| name = Lydia
| image = Lydia_Portrait.png
| gender = Female
| age = Middle Age
| race = Human
| role = Foreign Adventurer
| location = Non-Resident
| schedule1 = [9:00] Hangout at Garden
| schedule2 = [15:00] Hangout at Training Ground
| schedule3 = [21:00] Out of town
| note = Visits Eldoria since it's the only location where she has not been blacklisted yet due to petty crimes.
}}

'''Lydia''' is a foreign adventurer whose past has limited her options. A middle-aged woman with a chaotic and self-serving nature, she frequents Eldoria specifically because it is the last major adventure district where she hasn't been blacklisted for her history of petty crimes.

== Daily Life & Routine ==
Her daily forays into the district are pragmatic. ''Her daily forays into the district are pragmatic. She lays low at the garden from 9:00, trains at the grounds by 15:00, and leaves town by 21:00.''

=== Typical Day ===
{| class="scheduletable" style="width:80%;"
|-
! Time
! Location
! Activity
|-
| '''9:00'''
| Garden
| Keeps a low profile among the flowers, avoiding attention while planning her next moves.
|-
| '''15:00'''
| Training Ground
| Maintains her skills with quiet determination, careful not to draw the wrong kind of attention.
|-
| '''21:00'''
| Out of town
| Departs before anyone looks too closely, another day survived in her last remaining district.
|}

== Relationships ==
{{Navbox
| name = LydiaRelationships
| title = Relationships
| group1 = Those Who Don't Know (Yet)
| list1 =
- '''Training Ground Instructors''' - See a competent if unremarkable adventurer; no reason to investigate further.
- '''Garden Regulars''' - Notice a quiet presence who keeps to herself; nothing remarkable.
- '''[[Ashpodel]]''' (Garden Enthusiast) - Occasionally shares the garden space; they exchange polite nods.
| group2 = Those Who Might Remember
| list2 =
- '''Other Foreign Adventurers''' - A few recognize her from other districts; they keep their distance.
- '''Guild Staff''' - Haven't connected the dots yet; she works to keep it that way.
}}

== Personality and Survival ==
{{Navbox
| name = LydiaPersonality
| title = Personality & Survival
| group1 = Personality
| list1 =
Lydia is chaotic neutral—driven by self-preservation rather than morality. She visits Eldoria since it's the only location where she has not been blacklisted yet due to petty crimes. She isn't evil, just... flexible in her ethics when survival requires it.
| group2 = The Last District
| list2 =
Every other major adventure hub has banned her. Small thefts, unpaid debts, "misunderstandings" that somehow always benefit her—the pattern followed her from district to district until she ran out of options. Now Eldoria is her last chance, and she's determined not to waste it. She plays by the rules here. Mostly.
}}

== Hobbies and Living Space ==
{{Navbox
| name = LydiaHobbies
| title = Hobbies & Living Space
| group1 = Hobbies
| list1 =
- Staying unnoticed
- Training quietly
- Planning her next moves carefully
- Avoiding anyone who might recognize her
| group2 = Living Space
| list2 = Non-Resident
Lydia doesn't live in Eldoria, but her life elsewhere is transient—cheap rooms, quick departures, few possessions. She travels light because she travels often, always one step ahead of her reputation.
}}

== Quotes ==
{{Navbox
| name = LydiaQuotes
}}
''(At the garden) "Nice weather today. Very... unremarkable."''

''(Training) "Just another adventurer. Nothing to see here."''

''(Departing) "Same time tomorrow. If I'm not back, don't look for me."''

== Gift Preferences ==
{{Navbox
| name = LydiaGifts
}}

== Trivia ==
- She has a list of "mistakes to avoid in Eldoria" based on what got her banned elsewhere.
- Her training is competent but deliberately unremarkable; standing out is dangerous.
- She once caught a pickpocket trying to steal from her and gave them advice on technique—then took their wallet as a "lesson fee."
- No one in Eldoria has yet connected her to the string of minor incidents across other districts. She intends to keep it that way.

[[Category:Characters]]
[[Category:Human]]
[[Category:Middle Age]]
[[Category:Female]]
[[Category:Foreign Adventurer]]
[[Category:Non-Resident]]

Marriot

2026-03-12T11:58:21Z

Ais: Created page with "{{InfoboxNPC | name = Marriot | image = Marriot_Portrait.png | gender = Non-Binary | age = Adult | race = Human | role = Foreign Adventurer | location = Non-Resident | schedule1 = [12:00] Hangout at Training Ground | schedule2 = [15:00] Hangout at Inn Restaurant | schedule3 = [21:00] Out of town | note = Fascinated by the Kaiju and hopes to defeat one all by themselves one day. }} '''Marriot''' is a foreign adventurer with a singular, ambitious goal. An adult person fas..."

{{InfoboxNPC
| name = Marriot
| image = Marriot_Portrait.png
| gender = Non-Binary
| age = Adult
| race = Human
| role = Foreign Adventurer
| location = Non-Resident
| schedule1 = [12:00] Hangout at Training Ground
| schedule2 = [15:00] Hangout at Inn Restaurant
| schedule3 = [21:00] Out of town
| note = Fascinated by the Kaiju and hopes to defeat one all by themselves one day.
}}

'''Marriot''' is a foreign adventurer with a singular, ambitious goal. An adult person fascinated by kaiju, they have come to Eldoria to train and prepare for their dream of one day defeating one of the giant monsters entirely on their own.

== Daily Life & Routine ==
Their daily visits are focused on this aim. ''Their daily visits are focused on this aim. They train at the grounds from 12:00, plan their strategy at the inn restaurant by 15:00, and depart Eldoria by 21:00.''

=== Typical Day ===
{| class="scheduletable" style="width:80%;"
|-
! Time
! Location
! Activity
|-
| '''12:00'''
| Training Ground
| Pushes through intense training sessions, always with kaiju in mind—every exercise is preparation for the ultimate challenge.
|-
| '''15:00'''
| Inn Restaurant
| Reviews notes and plans over a meal, studying kaiju anatomy and battle strategies while refueling.
|-
| '''21:00'''
| Out of town
| Departs after a full day of preparation, already planning tomorrow's training.
|}

== Relationships ==
{{Navbox
| name = MarriotRelationships
| title = Relationships
| group1 = Kaiju Experts
| list1 =
- '''[[Ecthel Beastbane]]''' (Kaiju Hunter) - Their hero and occasional source of advice; Ecthel finds their dedication refreshing.
- '''[[Sirdil Bladestriker]]''' (Retired Adventurer) - Has shared stories of his kaiju encounter; Marriot listens with intense focus.
- '''[[Arcadia]]''' (Retired Adventurer) - Appreciates her perspective on near-death experiences; files it away for future reference.
| group2 = Training Connections
| list2 =
- '''Training Ground Instructors''' - Push them hard; they've never had a student so singularly focused.
- '''[[Georg]]''' (Veteran Adventurer) - Offers occasional pointers; Marriot absorbs them like a sponge.
- '''[[Faevel Sharpeye]]''' (Mentor) - Has offered guidance; Marriot appreciates the help but knows this fight must be solo.
}}

== Personality and Obsession ==
{{Navbox
| name = MarriotPersonality
| title = Personality & Obsession
| group1 = Personality
| list1 =
Marriot is chaotic nice—focused, determined, but fundamentally kind. They are fascinated by kaiju and hopes to defeat one all by themselves one day. This obsession drives everything, but unlike some with singular goals, they remain warm and approachable.
| group2 = The Kaiju Dream
| list2 =
Most see kaiju as disasters to be avoided. Marriot sees a challenge, a purpose, a reason to train beyond normal limits. They've studied every recorded kaiju encounter, analyzed every battle, learned from every survivor. One day, they will face a kaiju alone—and they intend to win.
}}

== Hobbies and Living Space ==
{{Navbox
| name = MarriotHobbies
| title = Hobbies & Living Space
| group1 = Hobbies
| list1 =
- Training specifically for kaiju combat
- Studying kaiju anatomy and behavior
- Planning the perfect solo battle
- Collecting kaiju-related knowledge
| group2 = Living Space
| list2 = Non-Resident
Marriot doesn't live in Eldoria, but their home elsewhere is a kaiju research center. Models of giant monsters,战术 notes covering every wall, a library of every known kaiju encounter. They sleep, eat, and exist surrounded by their obsession.
}}

== Quotes ==
{{Navbox
| name = MarriotQuotes
}}
''(Training) "This exercise simulates kaiju tail sweeps. Again."''

''"Ecthel fights them with a team. Impressive, but not my goal."''

''"One day, it will be just me and a kaiju. And I'll be ready."''

== Gift Preferences ==
{{Navbox
| name = MarriotGifts
}}

== Trivia ==
- They have a detailed battle plan for every known kaiju species, updated constantly.
- Their training regimen is considered insane by normal standards; they train specifically for blows that would kill most people.
- Ecthel Beastbane has offered to let them join a kaiju hunt; Marriot declined, politely but firmly.
- No one doubts their dedication. Everyone doubts their sanity.

[[Category:Characters]]
[[Category:Human]]
[[Category:Adult]]
[[Category:Non-Binary]]
[[Category:Foreign Adventurer]]
[[Category:Kaiju Hunter]]
[[Category:Non-Resident]]