MediaWiki:Common.css: Difference between revisions

From MB Wiki
Jump to navigation Jump to search
mNo edit summary
Tag: Reverted
mNo edit summary
 
(235 intermediate revisions by the same user not shown)
Line 1: Line 1:
.class { }/* needed for some reason for the @imports to work */
/*************************************🎮**************************************
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
                                                                              *
      ╔═══════════════════════════════════════════════════════════════════╗ 
                                                        COMMON.CSS (vA0.1)                                                        
                                                                ✦ M*n* B**** ✦                                                             
      ╚═══════════════════════════════════════════════════════════════════╝ 
                                                                              *
*******************************************************************************/


/* Imports caching */
/*
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
*This page contains the entire stylesheet for the MB Wiki.
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Colors.css");
*We urge you "not to edit" this page "directly".
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Module:Documentation.css");
*Some of the code inherited from coralisland.wiki.
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Documentation.css");
*Any functional issue please report to our wiki-team at the official discord channel
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Infobox.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");


body.skin-vector-dark {
*Imports will be starting below this very line;
background: url("https://coralwiki.stairwaygames.com/w/images/9/9a/Site-background-dark.png") no-repeat fixed center center / cover !important;
*/
}
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap');


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


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


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


h2 .mw-headline,
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Colors.css&action=raw&ctype=text/css");
h3 .mw-headline,
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Module:Documentation.css&action=raw&ctype=text/css");
h4 .mw-headline {
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Documentation.css&action=raw&ctype=text/css");
font-weight: 500;
@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");


.vector-body h3 , .vector-body h4 , .vector-body h5 , .vector-body h6 {
/* ============================================
margin-bottom: 4px;
  TOKEN ROOT ARCHITECTURE
}
  ============================================ */


a, a:visited, a:active,
/* ✦ THEME MANA (LIGHT) - DEFAULT ✦ */
.mw-parser-output a:is(.external, .external:visited, .external:active) {
:root {
color: var(--theme-link-color);
    /* 1. Core Color Palette */
}
    --color-primary: #88eee0;
#mw-head .vector-menu-content-list .mw-list-item :is(a, a:visited, a:active) {
    --color-secondary: #d9ffe9;
color: var(--theme-page-text-color);
    --color-accent: #87b4b7;
}
   
#mw-panel .vector-menu-content-list .mw-list-item :is(a, a:visited, a:active) {
    /* 2. Semantic Backgrounds */
color: var(--theme-link-color);
    --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';
}
}


.mw-parser-output a.external {
/* ✦ THEME BREAK (DARK) - TOGGLE ✦ */
padding-right: 0;
html.theme-break {
font-size: inherit;
    /* 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
  ============================================ */


.catlinks {
/* 1. Universal Box Sizing */
border-color: var(--theme-border-color);
*, *::before, *::after {
border-radius: 6px;
    box-sizing: border-box;
background-color: var(--gray-050);
}
}


.CodeMirror-lines span {
/* 2. MediaWiki Body & Container Reset */
font: 14px Consolas,Eupheima UCAS,Monaco,Menlo,monospace /* Source Editor */
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;
}
}


.wikiEditor-ui .ace_editor * {
/* Stripping native MediaWiki container styles  */
font-size: 13px;
.mw-body, #content {
font-family: monospace, monospace; /* Module */
    background: transparent !important;
    border: none !important;
    color: var(--theme-text-primary);
}
}


.mw-input .mw-abusefilter-editor * {
/* 3. Typography Normalization */
font-size: 13px;
h1, h2, h3, h4, h5, h6 {
font-family: monospace, monospace;
    color: var(--theme-heading-color);
    margin-top: 0;
    font-weight: 600;
}
}


/* Hide default TOOLBOX nav section on sidebar */
/* Remove MediaWiki's harsh default underline on H1/H2 */
#mw-navigation > #mw-panel > #p-tb {
.mw-body h1, .mw-body h2 {
display: none;
    border-bottom: 2px solid var(--theme-border-color);
    padding-bottom: 0.25em;
}
}


/* Column template fix */
/* 4. Hyperlink Standardization */
.columntemplate ul,
a {
.columntemplate ol {
    color: var(--theme-link-color);
margin-top: 0;
    text-decoration: none;
    transition: color 0.2s ease;
}
}


/* RC */
a:hover, a:focus {
.mw-changeslist table {
    color: var(--theme-link-hover);
width: unset;
    text-decoration: underline;
}
}


.gift-table .icon-list-container {
a:visited {
width: auto;
    color: var(--theme-link-color);  
}
}


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


.Bug6200 {
::selection {
margin-bottom: 0.75em;
    background: var(--color-primary);
    color: #000;  
}
}
 
::-moz-selection {
/* Code block */
    background: var(--color-primary);
code, pre {
    color: #000;
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;
  BASE LAYOUT (MAPPED TO TOKENS)
line-height: 21px;
  ============================================ */
padding:8px;
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;  
}
}


.code-block-table * {
.mw-body {
font: 14px Consolas,Eupheima UCAS,Monaco,Menlo,monospace;
    margin-top: -1px;
    border: 1px solid var(--theme-border-color);
    border-radius: var(--radius-sm);
    background-color: transparent;
}
}


.code-block {
/* Hide default elements */
display: inline-block;
.mobileHide, .mobile-only, .no-desktop {
line-height: 21px;
    display: none !important;
}
}


/* || MAIN PAGE */
/* Fix for hidden H1 on main page */
/* Font Override*/
body.page-Main_Page.action-view h1.firstHeading,
body,
body.page-Main_Page.action-submit h1.firstHeading {
#mw-page-base,
     display: none;
#mw-head-base,
#content,
#mw-panel,
.mw-body,
.mw-body-content,
.vector-body,
.oo-ui-widget {
     font-family: 'Nunito Sans', sans-serif !important;
}
}


/* Optional: Apply to specific elements for better control */
/* ============================================
#mw-content-text,
  MAIN PAGE GRID LAYOUT
.mw-parser-output,
  ============================================ */
p,
#mp-container {
h1,
     display: grid;
h2,
    gap: 2rem;
h3,
    padding: 1rem;
h4,
    max-width: 1400px;
h5,
    margin: 0 auto;
h6,
div,
span,
td,
th,
li {
    font-family: 'Nunito Sans', sans-serif !important;
}
#mp-banner p,
.banner-links {
     font-family: 'Nunito Sans', sans-serif !important;
}
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://coralwiki.stairwaygames.com/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;
}
}


 
/* Desktop Layout */
/* ||TABLE OF CONTENTS */
@media (min-width: 1024px) {
.toc {
    #mp-container {
padding: 8px 12px;
        grid-template-areas: var(--main-page-layout--desktop);
border-radius: 4px;
        grid-template-columns: repeat(3, 1fr);
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 {
/* Tablet Layout */
font-family: Fredoka, sans-serif;
@media (min-width: 768px) and (max-width: 1023px) {
    #mp-container {
        grid-template-areas: var(--main-page-layout--tablet);
        grid-template-columns: repeat(2, 1fr);
    }
}
}


/* TOC hide headings */
/* Mobile Layout */
.toclimit-2 .toclevel-1 ul,
@media (max-width: 767px) {
.toclimit-3 .toclevel-2 ul,
    #mp-container {
.toclimit-4 .toclevel-3 ul,
        grid-template-areas: var(--main-page-layout--mobile);
.toclimit-5 .toclevel-4 ul,
        grid-template-columns: 1fr;
.toclimit-6 .toclevel-5 ul,
        gap: 1rem;
.toclimit-7 .toclevel-6 ul {
    }
display: none;
}
}


/* For Template:Changelist */
/* MP Box styling */
.changelist-header {
.mp-box {
display: flex;
    animation: fadeInUp 0.5s ease forwards;
justify-content: space-between;
    opacity: 0;
align-items: center;
font-size: 88%;
margin: 0.3em 0;
}
}


.changelist-content {
/* Staggered animations */
overflow: auto;
.mp-box:nth-child(1) { animation-delay: 0.05s; }
max-height: 384px;
.mp-box:nth-child(2) { animation-delay: 0.1s; }
padding: 1em;
.mp-box:nth-child(3) { animation-delay: 0.15s; }
box-sizing: border-box;
.mp-box:nth-child(4) { animation-delay: 0.2s; }
-moz-box-sizing: border-box;
.mp-box:nth-child(5) { animation-delay: 0.25s; }
-moz-border-radius-topleft: 0.5em;
.mp-box:nth-child(6) { animation-delay: 0.3s; }
background: transparent;
.mp-box:nth-child(7) { animation-delay: 0.35s; }
border-radius: 6px;
.mp-box:nth-child(8) { animation-delay: 0.4s; }
}


.changelist-border {
@keyframes fadeInUp {
border: 1px solid var(--theme-border-color);
    from {
border-left: 6px solid var(--accent);
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
}


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


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


.chat-player,
/* 1. Game Intro Cards */
.chat-npc {
.game-intro-card {
display: flex;
    background-color: var(--theme-card-bg);
flex-direction: row;
    border-radius: var(--radius-lg); /* From Step 1 */
gap: 0.5em;
    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;
}
}


.chat-player-speaker {
.game-intro-card:hover {
white-space: nowrap;
    background-color: var(--theme-card-bg-hover);
min-width: 70px;
    transform: translateY(-4px);  
color: rgb(105, 172, 82);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);  
}
}


.chat-npc-speaker {
/* 2. Header Elements */
white-space: nowrap;
.game-header {
min-width: 70px;
    margin-bottom: 1rem;
color: rgb(237, 123, 103);
    position: relative;
}
}


/* Hatnote */
.mana-text {
.hatnote {
     font-family: 'Fredoka', sans-serif;
display: flex;
     font-size: 1.5rem;
align-items: center;
     font-weight: 600;
padding: 10px 15px;
     margin: 0;
margin-top: 0.6rem;
      
margin-bottom: 0.8rem;
     /* Gradient */
background-color: var( --color-surface-2 );
     background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
border: 1px solid var( --border-color-base--darker );
     -webkit-background-clip: text;
border-radius: var( --border-radius-base );
     background-clip: text;
color: var( --color-base--emphasized );
    color: transparent;
font-size: 0.875rem;
   
line-height: 1.4;
    /* Flexbox aligning the icon perfectly */
}
     display: flex;
 
.hatnote-icon img {
width: 14px;
height: auto;
margin-right: 10px;
opacity: var( --opacity-icon-base );
}
 
.hatnote.hatnote-high {
background-color: var( --background-color-destructive-subtle );
border-color: var( --color-destructive );
}
 
.hatnote.hatnote-medium {
background-color: var( --background-color-warning-subtle );
border-color: var( --color-warning );
}
 
.hatnote.hatnote-low {
background-color: var( --color-surface-2 );
}
 
 
/* Dark mode */
html.skin-citizen-dark .hatnote-icon img {
filter: invert( 1 );
}
 
 
/* 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);
}
 
/* hebrew */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fredoka/v14/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWs89XyHw.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fredoka/v14/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWg89XyHw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fredoka/v14/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWu89U.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fredoka/v14/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWs89XyHw.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fredoka/v14/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWg89XyHw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fredoka/v14/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWu89U.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik_300";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWbBXyIfDnIV7nEt3KSJbVDV49rz8uDFHU6f4L1kA.woff2)
    format("ttf");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
}
 
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../Fredoka-Regular.ttf')
    format("ttf");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Rubik";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWbBXyIfDnIV7nEt3KSJbVDV49rz8uDFHUzf4L1kA.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
  font-family: "Rubik";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWbBXyIfDnIV7nEt3KSJbVDV49rz8uDFHU1f4L1kA.woff2)
     format("woff2");
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: "Rubik";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWbBXyIfDnIV7nEt3KSJbVDV49rz8uDFHU5f4L1kA.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
     U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Rubik";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWbBXyIfDnIV7nEt3KSJbVDV49rz8uDFHU3f4I.woff2)
     format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-2Y-FWkU1Z4Y.woff2)
     format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-2Y-FU0U1Z4Y.woff2)
     format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-2Y-FVUU1Z4Y.woff2)
    format("woff2");
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-2Y-FWUU1Z4Y.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-2Y-FV0U1.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
// FIXME: Is specific `.mw-body` even needed? Does `.mw-indicators` exist outside?
*,
body {
  font-family: Fredoka, sans-serif ;
}
.mw-headline{
  font-family: Fredoka,Rubik,Helvetica,Arial,sans-serif;
}
 
.hidden {
  display: none;
}
body {
  //  background-color: @background-color-secondary;
  background: url("https://mbwiki.stairwaygames.work/w/images/3/3d/384Web_background.png")
     no-repeat fixed center center / cover !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  overflow-y: scroll;
}
.mw-body, .parsoid-body{
  background-color: rgba(255, 255, 255, 0.98) !important;
}
// ul{
//  list-style: none;
// }
 
.wikitable,  .scheduletable {
  table-layout: auto;
  width: 100%;
 
}
 
.scheduletable {
  table-layout: auto;
  width: 30%;
 
}
 
.fishtable {
table-layout: auto;
width: 100%;
 
}
.artisan-table{
  table-layout: auto;
  width: 60%;
  border-spacing: 0;
  max-width: 100%;
  margin: 15px 0
  // border: 1px solid gray;
}
 
.artisan-table > tr > th, .artisan-table > * > tr > th{
  background-color: #e7c361 !important;
  max-width: fit-content;
}
.artisan-table > tr > th, .artisan-table > tr > td, .artisan-table > * > tr > th, .artisan-table > * > tr > td{
  border: 1px solid #a2a9b1;
     padding: 0.2em 0.4em;
}
.quotetable{
  border-spacing: 0;
  width: 100%;
  max-width: 100%;
}
.quotetable > caption {
  text-align: left;
}
.heart{
  margin-left: -7px;
  margin-bottom: 5px;
}
.quotetable > tbody > tr > td {
  padding: 0;
}
blockquote {
  margin: 0 10px;
}
.detail-list ul {
  list-style: none;
}
caption .mw-collapsible-toggle, .mw-content-ltr caption .mw-collapsible-toggle, .mw-content-rtl caption .mw-collapsible-toggle, .mw-content-rtl .mw-content-ltr caption .mw-collapsible-toggle, .mw-content-ltr .mw-content-rtl caption .mw-collapsible-toggle {
  float: right;
}
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
.ci-letter-wrapper{
  border-radius: 20px;
    padding: 20px;
    max-width: 35em;
    font-weight: 700;
    background: #faf3ea;
}
.ci-letter-header{
  padding-bottom: 28px;
}
.ci-letter-content{
  font-weight: 400;
}
.ci-letter-footer{
  display: flex;
    padding-top: 28px;
    justify-content: space-between;
    font-weight: 700;
     align-items: center;
     align-items: center;
}
    gap: 8px;
.ci-letter-attachment{
    letter-spacing: 0.5px;
  max-width: 70%;
}
}


.card-list-container{
.mana-line {
  display: flex;
    height: 3px;
     flex-wrap: wrap;
     background: linear-gradient(90deg, var(--color-accent), transparent);
     gap: 5px;
    margin-top: 0.5rem;
     width: 100%;
    border-radius: 2px;
}
}
.custom-card{
  display: inline-block;
    position: relative;
    width: fit-content;
    align-self: baseline;
}
.custom-card-body{
  display: inline-block;
    position: relative;
    width: fit-content;
    align-self: baseline;
    background: #f6e6cf;
    border-radius: 12px;
    text-align: center;
    overflow: hidden;
}
.custom-card-image{
  width: 60px;
    height: 60px;
    padding: 4px;
}
.custom-card-amount{
  background: #e9cda2;
    text-align: center;
    border-radius: 0 0 5px 5px;
    padding: 4px 0;
    white-space: nowrap;
    line-height: 1;
    font-size: 12px;
    hyphens: auto;
    overflow-wrap: break-word;
}
.custom-card-caption{
  width: 56px;
    text-align: center;
    line-height: 1;
    font-size: 12px;
    hyphens: auto;
    overflow-wrap: break-word
}
.wikitable{
  background-color: transparent !important;
  // min-width: -webkit-fill-available !important;
  // table-layout: fixed;


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


.cost-template {
.heading-char {
  display: flex;
    font-size: 1.1rem;
  justify-content: flex-start;
    font-weight: 600;
  align-items: center;
    margin: 0.5rem 0;
  flex-direction: row;
    padding-bottom: 0.25rem;
  gap: 0.2rem
    border-bottom: 2px solid var(--theme-border-color);
    display: inline-block;
    transition: border-color 0.3s ease;
}
}
.cost-detail {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem
}
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort{
  font-size: 10px;
    white-space: normal;
}
.wikitable > tr > th, .wikitable > * > tr > th{
  background-color: #e7c361 !important;
  max-width: fit-content;


 
.heading-char a {
}
    color: var(--theme-heading-color);
.heart-event-table {
     text-decoration: none;
  width: 30%;
     transition: color 0.2s ease;
}
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
  // -ms-word-break: break-all;
  // word-break: break-all;
  // -webkit-hyphens: auto;
  // -moz-hyphens: auto;
  // hyphens: auto;
    width: 150px;
    white-space: break-space;
     margin-left: auto;
     margin-right: auto;
}
}


.artisan-table > tr > th, .artisan-table > tr > td, .artisan-table > * > tr > th, .artisan-table > * > tr > td:first-child {
.heading-char a:hover {
  // -ms-word-break: break-all;
     color: var(--color-accent);
  // word-break: break-all;
  // -webkit-hyphens: auto;
  // -moz-hyphens: auto;
  // hyphens: auto;
  width: 150px;
     white-space: break-space;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
}


.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td:first-child {
/* 4. Auto Grid Lists (The Links) */
  // -ms-word-break: break-all;
.auto-grid {
  // word-break: break-all;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));  
     gap: 0.5rem;
  // -webkit-hyphens: auto;
     list-style: none;
  // -moz-hyphens: auto;
     padding: 0;
  // hyphens: auto;
     margin: 0.75rem 0 0 0;
  width: min-content;
     white-space: break-space;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
}
}
.scheduletable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
  // -ms-word-break: break-all;
  // word-break: break-all;


 
.auto-grid li {
  // -webkit-hyphens: auto;
    padding: 0;
  // -moz-hyphens: auto;
  // hyphens: auto;
}
}
.quotetable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
//  -ms-word-break: break-all;
//  word-break: break-all;
   
   
//   -webkit-hyphens: auto;
/* Elevated List Link Styling */
//  -moz-hyphens: auto;
.auto-grid li a {
//  hyphens: auto;
    display: block;  
}
    padding: 0.35rem 0.5rem;
 
    color: var(--theme-link-color);
 
    text-decoration: none;
.vector-menu-content {
    border-radius: var(--radius-sm);
  margin-left: 10px;
    background-color: rgba(127, 127, 127, 0.05);  
}
    border: 1px solid transparent;
.vector-body p{
    transition: all 0.2s ease;
  // -ms-word-break: break-all;
  // word-break: break-all;
 
  /* Non standard for WebKit */
 
 
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
.mw-body,
.parsoid-body {
  // General background/foreground color definition as one exception to the rule.
  background-color: rgba(255, 255, 255, 0.9);
  color: @color-base;
  direction: ltr;
  padding: 1em;
}
.infobox {
  background: #e7c361 ;
  border: 1px solid #e7c361 ;
  float: right;
  margin: 0 0 1em 1em;
  padding: 1em;
  // min-width: 25%;
}
.infobox-title {
  font-size: 2em;
  text-align: center;
}
 
.infobox p {
  text-decoration: underline;
  font-size: 1.3em;
}
.infobox-image {
  text-align: center;
}
.infobox-table {
width: 100%;
}
.infobox-table th {
  text-align: left;
  vertical-align: top;
  width: 120px;
}
.infobox-table td {
  vertical-align: top;
  text-align: right;
  // color: white;
}
.wikitable > caption{
  text-align: left;
}
.Bug6200 {
  font-style: italic;
  font-weight: normal;
  display: flex;
  flex-direction: row;
align-items: center;
white-space: normal;
}
.Bug6200 > img {
  width: 24px;
  height: 24px;
}
 
.scheduletable{
  text-align: center;
  margin: 10px 0;
  border-collapse: collapse;
}
}


.scheduletable > tbody > tr > td{
.auto-grid li a:hover {
  border: 1px solid #a2a9b1;
    color: var(--theme-link-hover);
  // text-align: left;
    background-color: var(--theme-body-bg);
  // padding: 0.2em 0.4em;
    border-color: var(--theme-border-color);
    transform: translateX(3px);  
}
}
/* ============================================
  BANNER, WIKI COMPONENTS & SCROLLBAR
  ============================================ */


// .scheduletable > tbody > tr > td:first-child{
/* 1. BANNER SECTION */
// width: 70px;
#mp-box-banner .mp-body {
// }
     background: linear-gradient(135deg, var(--color-secondary), var(--theme-body-bg));
.navbox-list{
     border-radius: var(--radius-lg);
  padding: 0 0 0 2px;
     padding: 2rem;
    font-size: 10pt;
}
.navbox{
  width: 100%;
     margin-top: 12px;
    border-spacing: 0;
}
.croptable > tbody > tr > td:first-child{
  width: 100px !important;
}
.navbox-title th {
  padding: 6px;
  border-radius: 4px;
  background: #e7c361;
}
.navbox-group a{
  color:  black;
 
}
.alt .navbox-list {
  background-color: rgba(231, 195, 97, 0.35);
}
.navbox-subgroup {
  margin: 0;
  border-spacing: 0;
}
.navbox-subgroup .navbox-group{
  color:  black;
    background: rgba(231, 195, 97, 0.10);
    white-space: nowrap;
    text-align: left;
}
th.navbox-group{
  background-color: #e7c361;
  color:  black;
 
    font-size: 10pt;
    padding: 0.25em 1em;
}
.scheduletable > tbody > tr > td:first-child{
  width: 150px !important;
}
// td {
//  width: 100px;
// }
.scheduletable caption{
  background: #e7c361 ;
  border: 1px solid #e7c361;
  text-align: center;
}
.wikitable > caption > span{
  float: right !important;
}
 
.collapsible-header:before{
  float: right;
}
.ci-recipe-wrapper{
  display: flex;
     width: fit-content;
    position: relative;
    gap: 7px
}
.ci-recipe-timed{
  padding-bottom: 25px;
}
.ci-recipe-timed{
  border: 1px solid #e7c361;
  border-radius: 5px;
  position: relative;
  text-align: center;
  font-weight: 500;
  width: 100%;
  padding: 8px;
  max-width: 100px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ci-recipe-yield{
  border: 1px solid #e7c361;
    border-radius: 3px;
     padding: 8px;
    position: relative;
    width: 100%;
     text-align: center;
     text-align: center;
 
    border: 1px solid var(--theme-border-color);
}
    box-shadow: var(--shadow-soft);
.ci-recipe-yield-amount {
     transition: background 0.3s ease, border-color 0.3s ease;
  background: #e7c361;
  width: fit-content;
  border-radius: 3px;
  padding: 0 5px;
  position: absolute;
  bottom: 0;
  right: 0;
}
span.custom-icon {
  display: inline;
}
.ci-recipe-ingredient{
  border: 1px solid #e7c361;
    border-radius: 3px;
     padding: 5px;
    min-height: 100%;
}
.ci-recipe-medium::after{
  border: 1px solid #e7c361;
  background-color: #e7c361;
  border-radius: 3px;
  width: 5px;
  height: 5px;
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
}
}


.gifted-item{
/* Social links */
     background-color: rgba(231, 195, 97, 0.2);
.social {
}
     display: flex;
.gifted-item > tbody > tr > th{
    justify-content: center;
  background-color: rgba(231, 195, 97, 0.8);
    gap: 1rem;
  max-width: 100px;
    flex-wrap: wrap;
    margin-top: 2rem;
}
}
.portable-infobox{
  margin: 0 0 15px 15px;
  max-width: 250px;
  width: 100%;
  border: 1px solid #e7c361;
  border-radius: 10px;
}
.portable-infobox .pi-header{
  padding: 0 5px;
  background: rgba(231, 195, 97, 0.2);
}
.portable-infobox .pi-title{
  background: #e7c361;
  padding: 5px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.portable-infobox .pi-data-label, .portable-infobox .pi-data-value {
  padding: 5px;
}
// .bg-trans {
//  background-color: transparent !important;
// }
// .portable-infobox {
//  clear: both !important;
//  float: none !important;
//  border: 5px solid #e7c361;
//  background-color: #e7c361;
//  color: white;
// }
// .portable-infobox .pi-header{
//  font-size: 0.75rem ;
// }


// .portable-infobox .pi-data-label{
.iconname {
//  background-color: #e7c361 ;
    display: flex;
//  min-width: 50%;
    align-items: center;
// }
    gap: 0.5rem;
// .pi-smart-group .pi-smart-data-label{
    background: var(--theme-card-bg);
//  font-size: 0.5rem;
    border: 1px solid var(--theme-border-color);
// }
    padding: 0.5rem 1rem;
// .portable-infobox .pi-title {
    border-radius: var(--radius-md);
//  text-align: center;
    transition: all 0.2s ease;
//  font-weight: bold;
// }
 
.pi-image-thumbnail {
  max-width: 100%!important;
}
}


.content-table {
.iconname:hover {
  background: transparent;
    background: var(--color-primary);
  padding: 10px 2%;
    border-color: var(--color-accent);
  width: 100%;
    transform: translateY(-2px);
}
}


.content-table-basic {
.iconname a {
  background: transparent;
    color: var(--theme-text-primary) !important;
  width: 100%;
    text-decoration: none;
    font-weight: 500;
}
}


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


.child-content-table {
ul { list-style: disc; }
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-left: 4px;
}
#p-personal {
  position: absolute;
  top: @top-personal-tools;
  right: 0.75em;
  z-index: @z-index-personal;


  ul {
h2 .mw-headline, h3 .mw-headline, h4 .mw-headline { font-weight: 500; }
    padding-left: 10em; /* Keep from overlapping logo */
.vector-body h3, .vector-body h4, .vector-body h5, .vector-body h6 { margin-bottom: 4px; }
  }
}


.mw-body,
/* Categories */
#mw-data-after-content {
.catlinks {
  margin-left: 10em;
    border-color: var(--theme-border-color);
    border-radius: var(--radius-md);
    background-color: var(--theme-card-bg);
    padding: 10px;
}
}


.mw-body {
/* Code blocks */
  // Merge the border below with tabs' one (in their background image).
code, pre {
  margin-top: -@border-width-base;
    background-color: var(--theme-card-bg);
  // Border on top, left, and bottom side.
    color: var(--theme-text-primary);
  //  border: @border-width-base @border-style-base @border-color-content;
    border: 1px solid var(--theme-border-color);
  border: 10px solid azure;
    border-radius: var(--radius-sm);
  border-radius: 5px;
     padding: 2px 6px;
  //  border-right-width: 0;
     font-family: Consolas, Eupheima UCAS, Monaco, Menlo, monospace;
 
  .firstHeading {
     /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
     overflow: visible;
  }
}
}


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


.vector-body {
/* Table of Contents */
  position: relative;
.toc {
  z-index: @z-index-base;
    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);
}
}


/* Head */
.toctogglelabel { color: var(--theme-link-color); }
#mw-page-base {
.tocnumber { color: var(--theme-text-muted); }
  //  .vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% );
.vector-body .toc h2 { font-family: 'Fredoka', sans-serif; }
  background: transparent;
  background-position: bottom left;
  height: 5em;
}


#mw-head-base {
/* Hatnote */
  margin-top: -5em;
.hatnote {
  margin-left: 10em;
    border-left: 4px solid var(--color-accent);
  height: 5em;
    padding: 8px 12px;
  background: transparent;
    border-radius: var(--radius-sm);
    background-color: var(--theme-card-bg);
    margin: 8px 0;
}
}


/* Hide, but keep accessible for screen-readers */
/* Variables styling */
#mw-navigation h2 {
span.variable { opacity: 0.65; }
  position: absolute;
span.variable::after { opacity: 0.65; content: ">"; }
  top: -9999px;
span.variable::before { opacity: 0.65; content: "<"; }
}


#mw-head {
/* Pull quotes */
  position: absolute;
.pull-quote { font-style: italic; margin: 0; padding: 0 30px 8px !important; }
  top: 0;
.pull-quote::before {
  right: 0;
    color: var(--color-accent);
  width: 100%;
    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; }


/* Navigation Containers */
/* Gallery & Changelist */
#left-navigation {
.gallerytext { text-align: center; font-size: 100%; }
  float: left;
.changelist-header { display: flex; justify-content: space-between; align-items: center; font-size: 88%; margin: 0.3em 0; }
  margin-left: 10em;
.changelist-content { overflow: auto; max-height: 384px; padding: 1em; box-sizing: border-box; border-radius: var(--radius-md); }
  margin-top: 2.5em;
.changelist-border { border: 1px solid var(--theme-border-color); border-left: 6px solid var(--color-accent); }
  /* When right nav would overlap left nav, it's placed below it
(normal CSS floats behavior). This rule ensures that no empty space
is shown between them due to right nav's margin-top. Page layout
is still broken, but at least the nav overlaps only the page title
instead of half the content. */
  margin-bottom: -2.5em;
}


#right-navigation {
/* Chat wrapper */
  float: right;
.chat-wrapper { display: flex; flex-direction: column; }
  margin-top: 2.5em;
.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; }


/* Search */
/* 3. RESPONSIVE IMPROVEMENTS */
.vector-search-box {
@media (max-width: 768px) {
  float: left;
    .game-intro-card { padding: 1rem; }
  margin-right: 0.5em;
    .mana-text { font-size: 1.25rem; }
  margin-left: 0.5em;
    .social { gap: 0.5rem; }
 
    .iconname { padding: 0.35rem 0.75rem; font-size: 0.9rem; }
  // FIXME: This selector requires knowledge of the internals of the search component
    #mp-box-banner .mp-body { padding: 1rem; }
  // and should not be used here.
  form {
    margin: 0.5em 0 0;
  }
}
}


// Defined as `div`.
/* 4. CUSTOM SCROLLBAR */
// Provide extra element for gadgets due to `form` already carrying an `id`.
::-webkit-scrollbar { width: 10px; height: 10px; }
// FIXME: This selector requires knowledge of the internals of the search component
::-webkit-scrollbar-track {
.vector-search-box-inner {
    background: var(--theme-body-bg);
  min-width: 5em;
    border-radius: 0px;  
  // Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
  width: 13.2em;
  // Support: Modern browsers, responsive width.
  width: 20vw;
  max-width: 20em;
}
}
 
::-webkit-scrollbar-thumb {
/* Sidebar */
    background: var(--color-accent);
#mw-panel {
    border-radius: 5px;
  position: absolute;
  top: 0;
  width: 10em;
  left: 0;
}
}
::-webkit-scrollbar-thumb:hover { background: var(--theme-link-hover); }


// hide the heading of the first menu
/* 5. UTILITY CLASSES */
#p-logo + .mw-portlet .vector-menu-heading {
.text-center { text-align: center; }
  display: flex;
.mt-2 { margin-top: 0.5rem; }
  justify-content: flex-start;
.mb-2 { margin-bottom: 0.5rem; }
  align-items: center;
.p-2 { padding: 0.5rem; }
  background: white;
/* ============================================
  color: black;
  WIKI COMPONENTS
  font-weight: bold;
  ============================================ */
  padding: 0 5px;
  height: 20px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}


// ul {
/* 1. WIKITABLES  */
//  list-style-type: none !important
table.wikitable {
// }
    background-color: var(--theme-card-bg);
 
    color: var(--theme-text-primary);
.vector-body blockquote{
    border: 1px solid var(--theme-border-color);
  border: 0;
    border-collapse: collapse;
  padding: 0;
    margin: 1em 0;
    width: 100%; /* Encourages responsive behavior */
    box-shadow: var(--shadow-soft);
}
}


.vector-menu-portal .vector-menu-content li {
table.wikitable > tr > th,
  padding: 5px;
table.wikitable > tr > td,
}
table.wikitable > * > tr > th,
.vector-menu-portal .vector-menu-content ul {
table.wikitable > * > tr > td {
  background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--theme-border-color);
}
    padding: 0.5em 0.75em;
.vector-menu-portal .vector-menu-heading {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: white;
  color: black;
  font-weight: bold;
  padding: 0 5px;
  height: 20px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
}


.mw-footer {
/* Table Headers */
  margin-left: 10em;
table.wikitable > tr > th,
  margin-top: 1%;
table.wikitable > * > tr > th {
  margin-bottom: 1%;
    background-color: var(--color-primary);
  padding: 0.75em;
     color: var(--theme-heading-color);
  background: white;
    font-weight: 600;
  min-height: 120px;
    text-align: center;
  border-radius: 5px;
}
.social {
  display: flex;
  justify-content: center;
  flex-direction: row;
  width: auto;
  background: #474747;
  padding: 1rem 3rem;
  & .iconname {
    max-width: 20%;
    & .external-text {
      font-size: 12px;
    }
    & .floatleft {
      display: flex;
      justify-content: space-between;
      align-items: center;
      & a {
        font-size: 12px;
      }
      img {
        max-width: 20px;
        max-height: 20px;
      }
     }
  }
}
div.floatleft,
table.floatleft {
  margin: 0;
}
big{
  color: white;
}
 
.jumbotron {
  //background-image: url("https://mbwiki.stairwaygames.work/w/images/1/13/manabreak-hero.png");
 
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
body.page-Main_Page.action-view .main-page-top{
background-color: #474747;
  padding: 1rem 0;
  background-image: url("https://mbwiki.stairwaygames.work/w/images/1/13/manabreak-hero.png") !important;
  height: 300px !important;
}
/* Vector screen styles for high definition displays. These rules cross the above components and are
grouped together here only for the sake of the media query common to each. */
.mw-body,
#mw-head-base,
#left-navigation,
#mw-data-after-content,
.mw-footer {
  margin-left: 11em;
}
}


.mw-body {
  padding: 1.25em 1.5em 1.5em 1.5em;
}


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


#mw-panel {
/* 2. INFOBOXES  */
  padding-left: 0.5em;
.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;
}
}


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


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


// Directionality styles previously provided by the deprecated `legacy` feature (T287410)
// for HTML elements which do not carry dir HTML attributes.
// These have been copied across to legacy Vector to minimize disruption caused by T287701.
// If you are reading this comment in 2022, please consider checking usage in wikitext and
// removing them both.
.mw-content-ltr {
  /* @noflip */
  direction: ltr;
}


.mw-content-rtl {
.infobox tr:last-child td {
  /* @noflip */
    border-bottom: none;
  direction: rtl;
}
}


.cols {
/* 3. NAVBOXES  */
  text-align: left;
.navbox {
  word-break: break-all;
    background-color: var(--theme-card-bg);
  // padding: 1em 0;
    border: 1px solid var(--theme-border-color);
  background-color: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-md);
  border-radius: 5px;
    margin: 1.5em 0;
  font-weight: 600;
    padding: 2px;
  // text-transform: uppercase;
    text-align: center;
  // letter-spacing: 1px;
    box-shadow: var(--shadow-soft);
    width: 100%;
    clear: both;
}
}


.forest {
.navbox th {
  margin-top: -25px;
    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;
}
}


.forest2 {
/* Group Headers inside Navbox */
  margin-top: 0;
.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);  
}
}


/* grid styling */
.navbox .navbox-list {
 
    text-align: left;
.grid {
    padding: 4px 8px;
  display: grid !important;
  grid-template-columns: repeat(12, 1fr);
  // background: white;
  margin: 10px 0;
}
.specification-table {
  font-size: 10px;
  padding: 0 5%;
}
 
.content {
  padding: 10px;
  font-size: 12px;
}
 
.grid--gap10 {
  grid-gap: 5px;
}
 
.grid__col1 {
  grid-column: span 1;
}
.grid__col2 {
  grid-column: span 2;
}
.grid__col3 {
  grid-column: span 3;
}
.grid__col4 {
  grid-column: span 4;
}
.grid__col5 {
  grid-column: span 5;
}
.grid__col6 {
  grid-column: span 6;
}
.grid__col7 {
  grid-column: span 7;
}
.grid__col8 {
  grid-column: span 8;
}
.grid__col9 {
  grid-column: span 9;
}
.grid__col10 {
  grid-column: span 10;
}
.grid__col11 {
  grid-column: span 11;
}
.grid__col12 {
  grid-column: span 12;
}
.mw-parser-output a.external {
  background-image: none !important;
  font-size: 14px;
  font-weight: 400;
}
 
.wrapper {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}
.auto-grid {
  --auto-grid-min-size: 13rem;
}
 
.auto-grid > * {
  max-width: 160px;
  font-size: 16px;
}
 
.auto-grid > * + * {
  font-size: 16px;
}
}


.heading-char {
/* Striping for Navbox lists */
  font-style: italic;
.navbox .navbox-even {
  text-decoration: underline;
    background-color: rgba(127, 127, 127, 0.03);
  font-weight: bold;
  padding: 0.5em;
  font-size: 18px;
  text-align: left;
}
}
 
/* ============================================
@supports (display: grid) {
  THEME TOGGLE BUTTON
  .mw-content-ltr ul,
  ============================================ */
  .mw-content-rtl .mw-content-ltr ul {
.floating-theme-toggle {
    // margin: 0 !important;
     position: fixed;
  }
     bottom: 20px;
  .social .iconname .floatleft {
     right: 20px;
    display: flex;
     z-index: 9999;
    justify-content: center;
     padding: 10px 16px;
    align-items: center;
     background-color: var(--theme-card-bg);
  }
     color: var(--theme-heading-color);
  .social {
     border: 2px solid var(--theme-border-color);
    gap: 30px;
     border-radius: var(--radius-lg);
  }
     font-family: 'Fredoka', sans-serif;
 
     font-size: 0.95rem;
  .croptable > tbody > tr >td > a > img{
     font-weight: 600;
    max-width: 40px;
     cursor: pointer;
    max-height: 40px;
     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);  
  .exceptable > tbody > tr >td > a > img{
    max-width: 70px;
    max-height: 70px;
  }
  .floatleft > a > img {
    // width: 24px;
    // height: 24px;
  }
  .iconname {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    -ms-word-break: break-all;
    word-break: break-all;
 
    /* Non standard for WebKit */
    word-break: break-word;
 
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
 
  .auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 5px;
  }
 
  .auto-grid > * {
     max-width: unset;
     list-style: none;
  }
 
  .auto-grid > * + * {
     margin-top: unset;
  }
  .auto-grid > li > ul {
    margin-left: 10px !important;
  }
  .auto-grid > li > ul > li {
     list-style: none;
    margin: 0;
     padding-left: 15px;
    list-style: none;
     background-image: url("https://www.svgrepo.com/show/165220/diamond.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 10px;
     -ms-word-break: break-all;
    word-break: break-all;
 
    /* Non standard for WebKit */
    word-break: break-word;
 
     -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
}
.minus-ten {
margin-top:0;
}
.minus-fifty {
margin-top:-55%;
}
#footer-info li{
  color:white !important
}
@media (max-width: 1024px) {
  .minus-fifty {
margin-top:-5%;
}
.minus-ten {
margin-top:-10%;
}
  .wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
  font-size: 0.7em;
  }
  .scheduletable > tbody > tr > td:first-child{
     width: 40px;
  }
  .wikitable, .quotetable, .scheduletable {
    table-layout: fixed;
    width: 100%;
 
  }
  .croptable > tbody > tr >td > a > img{
    max-width: 24px;
    max-height: 24px;
  }
  .infobox{
    float: none;
    margin: 0
  }
  .forest2 {
    margin-top: -5px;
  }
  .content {
     font-size: 10px;
  }
  .social {
    flex-direction: column;
    padding: 1rem;
    & .iconname {
      max-width: 100%;
    }
  }
 
  .mw-parser-output a.external {
    -ms-word-break: break-all;
    word-break: break-all;
 
    /* Non standard for WebKit */
    word-break: break-word;
 
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
 
  #mw-panel {
    width: -webkit-fill-available;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 100px;
  }
  .vector-search-box {
    min-width: 90vw;
    margin-top: 0px;
  }
  .vector-search-box-input {
    width: 80vw;
  }
  #mw-content-text
    > div.mw-parser-output
    > div
    > div
    > div.content
    > table
    > tbody
    > tr
    > td
    > a {
     font-size: 8px;
  }
  #mw-content-text
    > div.mw-parser-output
    > div
    > div
    > div.content
    > table
    > tbody
    > tr
    > th
    > div
    > div
    > a
    > img {
    width: 16px;
     height: 16px;
  }
  #mw-content-text
    > div.mw-parser-output
    > div
    > div
    > div.content
    > table
    > tbody
    > tr
    > td
    > div
    > div
    > a
    > img {
    width: 16px;
     height: 16px;
  }
  #mw-content-text
     > div.mw-parser-output
    > table.jumbotron
    > tbody
    > tr
    > th
    > a
    > img {
    max-width: 100%;
    object-fit: contain;
  }
  footer,
  .vector-menu-content,
  #p-navigation,
  #p-tb {
    display: none;
  }
  #p-logo {
     display: block;
    justify-content: center;
  }
  #p-logo a {
    width: 5em;
  }
 
  table {
    width: 100%;
  }
  .mw-body,
  #mw-data-after-content {
    margin: 10% 10px;
  }
  .grid__col1 {
    grid-column: span 1;
  }
  .grid__col2 {
    grid-column: span 2;
  }
  .grid__col3 {
    grid-column: span 6;
  }
  .grid__colsm1 {
    grid-column: span 1;
  }
  .grid__colsm2 {
    grid-column: span 2;
  }
  .grid__colsm3 {
    grid-column: span 12;
  }
  .grid__colsm4 {
    grid-column: span 12;
  }
  .grid__colsm5 {
    grid-column: span 5;
  }
  .grid__colsm6 {
    grid-column: span 6;
  }
  .grid__colsm7 {
    grid-column: span 7;
  }
  .grid__colsm8 {
    grid-column: span 12;
  }
  .grid__colsm9 {
    grid-column: span 9;
  }
  .grid__colsm10 {
    grid-column: span 10;
  }
  .grid__colsm11 {
    grid-column: span 11;
  }
  .grid__colsm12 {
    grid-column: span 12;
  }
 
  .content-table-basic > tbody {
    display: grid;
  }
  .content-table-basic > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(50px, 1fr));
    width: fit-content;
  }
  .content-table-basic > tbody > tr > th {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45vw;
  }
    .content-table-basic > tbody > tr > th > .iconname > .floatleft > a > img{
width:14px;
height: 14px;
  }
 
  .forest {
    margin-top: 0;
  }
 
  .content-table-second {
    background: transparent;
    width: 100%;
  }
  .auto-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .mw-body,
  #mw-data-after-content {
    padding: 0;
  }
}
@media screen and (max-width: 1920px) {
  .mw-parser-output a.external {
     font-size: 14px;
  }
}
 
@media screen and (min-width: 2000px) {
  .mw-parser-output a.external {
    font-size: 20px;
    font-weight: 400;
  }
  .floatleft > a > img {
    width: 48px;
    height: 48px;
  }
}
.header-column > span > a > img{
width: 14px;
    height: 14px;
}
 
.header-column >  a > img{
width: 14px;
    height: 14px;
}
 
.heading-char{
  color:#deb76c !important
}
}


#footer {
.floating-theme-toggle:hover {
background: #fff;
    background-color: var(--color-primary);
color: #000;
    border-color: var(--color-accent);
margin-top: 1em;
    transform: translateY(-4px);  
border-top: 1pt solid #aaa;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
padding-top: 5px;
    color: #000;  
direction: ltr;
}
}

Latest revision as of 06:46, 19 May 2026

/*************************************🎮**************************************
                                                                               *
       ╔═══════════════════════════════════════════════════════════════════╗   
                                                         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; 
}
Retrieved from "https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Common.css&oldid=28415"