MediaWiki:Common.css: Difference between revisions

From MB Wiki
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
 
(163 intermediate revisions by the same user not shown)
Line 1: Line 1:
.class { }/* needed for some reason for the @imports to work */
/*************************************🎮**************************************
/* Imports caching */
                                                                              *
/*@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Colors.css");*/
      ╔═══════════════════════════════════════════════════════════════════╗ 
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Module:Documentation.css");
                                                        COMMON.CSS (vA0.1)                                                        
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Documentation.css");
                                                                ✦ M*n* B**** ✦                                                             
/*@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");
:root { /* Universal Base Styles */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
    --font-family-headings: 'Segoe UI', system-ui, -apple-system,
                            'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono',
                      Menlo, Courier, monospace;
   
    --font-size: 16px; /* Slightly larger base */
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-xlarge: 20px;
    --font-size-h1: 32px;
    --font-size-h2: 26px;
    --font-size-h3: 22px;
    --font-size-h4: 18px;
   
    --line-height: 1.6; /* More breathing room */
    --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 & DEPTH ===== */
    --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);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
   
    /* ===== BORDERS & RADIUS ===== */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-full: 9999px;
   
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-width-xthick: 3px;
   
    /* ===== 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);
   
    /* ===== Z-INDEX LAYERS ===== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
   
    /* ===== FOCUS STATES ===== */
    --focus-ring-color: rgba(79, 209, 199, 0.6);
    --focus-ring-color-dark: rgba(79, 209, 199, 0.8);
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
   
    /* ===== GRAY SCALE (Optimized) ===== */
    --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;
    --gray-050: #ffffff;
   
    /* ===== TEAL/BLUE 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-050: #e6fffa;
   
    /* ===== OTHER COLORS ===== */
    --light-blue: #90cdf4;
    --gold: #d69e2e;
    --purple: #9f7aea;
   
    /* ===== ANIMATIONS ===== */
    --animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animation-spin: spin 1s linear infinite;
    --animation-bounce: bounce 1s infinite;
   
    /* Universal border */
    --border-color: var(--theme-border-color);
}


/* Light Theme */
/*
:root body:not(.skin-vector-dark) {
*This page contains the entire stylesheet for the MB Wiki.
    /* ===== BASE COLORS ===== */
*We urge you "not to edit" this page "directly".
    --theme-page-text-color: #1a2a2a; /* Darker for 17:1 contrast */
*Some of the code inherited from coralisland.wiki.
    --theme-page-text-color--inverse: #ffffff;
*Any functional issue please report to our wiki-team at the official discord channel
    --theme-page-background-color: #f5fdfb; /* Slightly darker for less glare */
    --theme-page-background-color--rgb: 245, 253, 251;
    --theme-page-background-color--secondary: #e8f5f3; /* Better contrast: 13:1 */
    --theme-page-background-color--secondary--rgb: 232, 245, 243;
   
    /* ===== LINKS ===== */
    --theme-link-color: #007d7a; /* Darker for 7:1 contrast */
    --theme-link-color--rgb: 0, 125, 122;
    --theme-link-color--hover: #005652; /* Even darker on hover */
    --theme-link-color--visited: #4a5568; /* Distinct visited state */
    --theme-link-label-color: #00474A;
    --mw-head-link-color: #007d7a;
    --new-link-color: #00a3a3; /* For "red links" - actually teal */
   
    /* ===== ACCENTS ===== */
    --theme-accent-color: #38b2ac; /* More vibrant */
    --theme-accent-color--rgb: 56, 178, 172;
    --theme-accent-color--hover: #2c9c96; /* Darker hover */
    --theme-accent-label-color: #ffffff;
   
    /* ===== BORDERS ===== */
    --theme-border-color: #a1e9dc; /* More visible */
    --theme-border-color--rgb: 161, 233, 220;
    --theme-border-color--subtle: #d1f5ee; /* For subtle separators */
   
    /* ===== STATUS COLORS (Enhanced for visibility) ===== */
    --theme-alert-color: #d53f3f; /* More vibrant red - 7:1 contrast */
    --theme-alert-color--rgb: 213, 63, 63;
    --theme-alert-color--hover: #b03030;
    --theme-alert-color--secondary: #ffeaea; /* Softer background */
    --theme-alert-label: #ffffff;
   
    --theme-warning-color: #c05621; /* Warmer orange - 6.5:1 contrast */
    --theme-warning-color--rgb: 192, 86, 33;
    --theme-warning-color--secondary: #fff4e6;
    --theme-warning-label: #1a2a2a; /* Dark text on light background */
   
    --theme-success-color: #2e8b57; /* More distinct green - 7:1 contrast */
    --theme-success-color--rgb: 46, 139, 87;
    --theme-success-color--secondary: #e6f7ed;
    --theme-success-label: #1a2a2a; /* Dark text on light background */
   
    --theme-message-color: #6b46c1; /* More vibrant purple */
    --theme-message-color--rgb: 107, 70, 193;
    --theme-message-color--secondary: #f3f0ff;
    --theme-message-label: #ffffff;
   
    --theme-info-color: #3182ce; /* Added info color */
    --theme-info-color--secondary: #ebf8ff;
    --theme-info-label: #1a2a2a;
   
    /* ===== ALERT HIGHLIGHT ===== */
    --theme-alert-highlight: #c53030;
    --theme-alert-highlight--rgb: 197, 48, 48;
    --theme-alert-highlight--hover: #e53e3e;
   
    /* ===== CUSTOM VARIABLES ===== */
    --theme-alt-text: #ffffff;
    --theme-accent-bg: #e6fffa;
    --theme-infobox-bg: #f0faf9; /* Less harsh than pure white */
    --theme-card-shadow: var(--shadow-sm);
    --theme-card-shadow-hover: var(--shadow-md);
   
    /* ===== YOUR CUSTOM COLORS ===== */
    --color-player: #60d9c5; /* More readable than #74f4e0 */
    --color-accent: #38b2ac;
    --color-npc: #9f7aea;
    --color-npc-secondary: #d6bcfa;
   
    /* ===== CARD BACKGROUNDS ===== */
    --card-bg-main: #ffffff;
    --card-bg-sub: #e6fffa;
    --card-bg-elevated: #ffffff;
    --card-border-color: var(--theme-border-color);
   
    /* ===== LETTER BACKGROUND ===== */
    --letter-bg: #f0fff4;
    --letter-border: #c6f6d5;
   
    /* ===== USER HIGHLIGHTS ===== */
    --custom-admin-highlight: #c05621;
    --custom-contentmoderator-highlight: #6b46c1;
    --custom-bot-color: #718096;
    --custom-bot-font-style: italic;
   
    /* ===== NAMED ACCENTS ===== */
    --accent: var(--theme-accent-color);
    --player: var(--color-player);
    --npc: var(--color-npc);
   
    /* ===== INPUTS ===== */
    --input-bg: #ffffff;
    --input-border: #cbd5e0;
    --input-border-focus: var(--theme-accent-color);
    --input-text: var(--theme-page-text-color);
    --input-placeholder: #a0aec0;
   
    /* ===== CODE & PRE ===== */
    --code-bg: #f7fafc;
    --code-border: #e2e8f0;
    --code-text: var(--theme-page-text-color);
    --pre-bg: #1a202c;
    --pre-text: #e2e8f0;
   
    /* ===== TABLE STYLES ===== */
    --table-header-bg: #e6fffa;
    --table-header-text: var(--theme-page-text-color);
    --table-row-even: #f7fafc;
    --table-row-odd: #ffffff;
    --table-border: var(--theme-border-color);
}


/* Dark Theme */
*Imports will be starting below this very line;
:root .skin-vector-dark {
*/
    /* ===== BASE COLORS ===== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap');
    --theme-page-text-color: #e6f7f5; /* Warmer light color */
    --theme-page-text-color--inverse: #1a202c;
    --theme-page-background-color: rgba(22, 28, 36, 0.98); /* Softer dark */
    --theme-page-background-color--rgb: 22, 28, 36;
    --theme-page-background-color--secondary: #2a363d; /* Warmer, better contrast */
    --theme-page-background-color--secondary--rgb: 42, 54, 61;
   
    /* ===== LINKS ===== */
    --theme-link-color: #5fd9cf; /* Brighter for visibility */
    --theme-link-color--rgb: 95, 217, 207;
    --theme-link-color--hover: #81e6d9;
    --theme-link-color--visited: #a0aec0;
    --theme-link-label-color: #e6f7f5;
    --mw-head-link-color: #5fd9cf;
    --new-link-color: #4fd1c7; /* For "red links" */
   
    /* ===== ACCENTS ===== */
    --theme-accent-color: #5fd9cf;
    --theme-accent-color--rgb: 95, 217, 207;
    --theme-accent-color--hover: #81e6d9;
    --theme-accent-label-color: #1a202c;
   
    /* ===== BORDERS ===== */
    --theme-border-color: #4d6872; /* More visible */
    --theme-border-color--rgb: 77, 104, 114;
    --theme-border-color--subtle: #3a5059;
   
    /* ===== STATUS COLORS ===== */
    --theme-alert-color: #fc8181;
    --theme-alert-color--rgb: 252, 129, 129;
    --theme-alert-color--hover: #feb2b2;
    --theme-alert-color--secondary: #4a2626; /* Darker background */
    --theme-alert-label: #1a202c; /* Dark text on light red */
   
    --theme-warning-color: #f6ad55;
    --theme-warning-color--rgb: 246, 173, 85;
    --theme-warning-color--secondary: #4a3a20;
    --theme-warning-label: #1a202c;
   
    --theme-success-color: #68d391;
    --theme-success-color--rgb: 104, 211, 145;
    --theme-success-color--secondary: #22543d;
    --theme-success-label: #1a202c;
   
    --theme-message-color: #b794f4;
    --theme-message-color--rgb: 183, 148, 244;
    --theme-message-color--secondary: #3a3664;
    --theme-message-label: #1a202c;
   
    --theme-info-color: #63b3ed;
    --theme-info-color--secondary: #2c5282;
    --theme-info-label: #1a202c;
   
    /* ===== CUSTOM VARIABLES ===== */
    --theme-alt-text: #2d3748;
    --theme-accent-bg: #2d3748;
    --theme-infobox-bg: #2a363d;
    --theme-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --theme-card-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.4);
   
    /* ===== YOUR CUSTOM COLORS ===== */
    --color-player: #48b8aa; /* More vibrant */
    --color-accent: #5fd9cf;
    --color-npc: #b794f4;
    --color-npc-secondary: #d6bcfa;
   
    /* ===== CARD BACKGROUNDS ===== */
    --card-bg-main: #2a363d;
    --card-bg-sub: #3a464d;
    --card-bg-elevated: #34444d;
    --card-border-color: var(--theme-border-color);
   
    /* ===== LETTER BACKGROUND ===== */
    --letter-bg: #1a272b;
    --letter-border: #2d4a3c;
   
    /* ===== USER HIGHLIGHTS ===== */
    --custom-admin-highlight: #f6ad55;
    --custom-contentmoderator-highlight: #b794f4;
    --custom-bot-color: #a0aec0;
    --custom-bot-font-style: italic;
   
    /* ===== ALERT HIGHLIGHT ===== */
    --theme-alert-highlight: #e53e3e;
    --theme-alert-highlight--rgb: 229, 62, 62;
    --theme-alert-highlight--hover: #fc8181;
   
    /* ===== NAMED ACCENTS ===== */
    --accent: var(--theme-accent-color);
    --player: var(--color-player);
    --npc: var(--color-npc);
   
    /* ===== INPUTS ===== */
    --input-bg: #2d3748;
    --input-border: #4a5568;
    --input-border-focus: var(--theme-accent-color);
    --input-text: var(--theme-page-text-color);
    --input-placeholder: #718096;
   
    /* ===== CODE & PRE ===== */
    --code-bg: #2d3748;
    --code-border: #4a5568;
    --code-text: var(--theme-page-text-color);
    --pre-bg: #1a202c;
    --pre-text: #e2e8f0;
   
    /* ===== TABLE STYLES ===== */
    --table-header-bg: #2d4a4d;
    --table-header-text: var(--theme-page-text-color);
    --table-row-even: #2a363d;
    --table-row-odd: #34444d;
    --table-border: var(--theme-border-color);
}


/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}


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


@keyframes bounce {
/* ============================================
    0%, 100% { transform: translateY(0); }
  ALL @IMPORTS MUST BE AT THE VERY TOP
    50% { transform: translateY(-10px); }
  ============================================ */
}


/* ===== LINK STYLING ===== */
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Colors.css&action=raw&ctype=text/css");
.mw-body a,
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Module:Documentation.css&action=raw&ctype=text/css");
.mw-body-content a {
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Documentation.css&action=raw&ctype=text/css");
    text-decoration: none;
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Infobox.css&action=raw&ctype=text/css");
    transition: color var(--transition-fast) ease,
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Tables.css&action=raw&ctype=text/css");
                background-color var(--transition-fast) ease,
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:MessageBox.css&action=raw&ctype=text/css");
                border-color var(--transition-fast) ease;
@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 a:not(.new):hover,
/* ============================================
.mw-body-content a:not(.new):hover {
  TOKEN ROOT ARCHITECTURE
    text-decoration: underline;
  ============================================ */
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}


.mw-body a.new,
/* ✦ THEME MANA (LIGHT) - DEFAULT ✦ */
.mw-body a.new:visited,
:root {
.mw-body-content a.new {
    /* 1. Core Color Palette */
     color: var(--new-link-color) !important;
     --color-primary: #88eee0;
     font-weight: var(--font-weight-semibold) !important;
     --color-secondary: #d9ffe9;
     border-bottom: 1px dashed rgba(0, 163, 163, 0.4) !important;
     --color-accent: #87b4b7;
     background-color: rgba(0, 163, 163, 0.08) !important;
      
     padding: 1px 3px !important;
     /* 2. Semantic Backgrounds */
     border-radius: var(--border-radius-sm) !important;
     --theme-body-bg: var(--color-secondary);
    transition: all var(--transition-base) ease !important;
    --theme-card-bg: rgba(255, 255, 255, 0.85);  
}
     --theme-card-bg-hover: #ffffff;
 
      
.mw-body a.new:hover,
     /* 3. Semantic Text Colors */
.mw-body-content a.new:hover {
    --theme-text-primary: #1a2b3c;
    background-color: rgba(0, 163, 163, 0.15) !important;
    --theme-text-muted: #4a5b6c;
     border-bottom-style: solid !important;
     --theme-heading-color: #0d1b2a;
     text-decoration: none !important;
      
     box-shadow: 0 1px 2px rgba(0, 163, 163, 0.2) !important;
     /* 4. Borders & Interactive Elements */
}
     --theme-border-color: var(--color-accent);
 
     --theme-border-color-rgb: 135, 180, 183;
/* Dark theme new links */
     --theme-link-color: #006b75;
.skin-vector-dark .mw-body a.new,
     --theme-link-hover: #004a52;
.skin-vector-dark .mw-body a.new:visited,
      
.skin-vector-dark .mw-body-content a.new {
    /* 5. Structures */
     color: var(--new-link-color) !important;
    --radius-sm: 4px;
     background-color: rgba(79, 209, 199, 0.1) !important;
     --radius-md: 8px;
     border-bottom-color: rgba(79, 209, 199, 0.5) !important;
    --radius-lg: 12px;
}
    --shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.05);
 
/* ===== FOCUS STYLES ===== */
*:focus {
     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;
}
 
*:focus:not(:focus-visible) {
    outline: none !important;
}
 
*: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;
}
 
/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
     :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
    }
      
      
     * {
     /* Main Page Layout Layout */
        animation-duration: 0.01ms !important;
    --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';
        animation-iteration-count: 1 !important;
    --main-page-layout--tablet: 'banner banner' 'about updates' 'starts starts' 'items items' 'characters characters' 'enemies enemies' 'area area';
        transition-duration: 0.01ms !important;
    --main-page-layout--mobile: 'banner' 'about' 'updates' 'starts' 'items' 'characters' 'enemies' 'area';
    }
}
}


/* High contrast mode support */
/* ✦ THEME BREAK (DARK) - TOGGLE ✦ */
@media (prefers-contrast: high) {
html.theme-break {
     :root body:not(.skin-vector-dark) {
     /* 1. Core Color Palette */
        --theme-link-color: #005652;
    --color-primary: #12435e;
        --theme-border-color: #1a2a2a;
    --color-secondary: #0e344d;
        --new-link-color: #007d7a;
    --color-accent: #7ff6e3;
    }
      
      
     :root .skin-vector-dark {
     /* 2. Semantic Backgrounds */
        --theme-link-color: #81e6d9;
    --theme-body-bg: var(--color-secondary);
        --theme-border-color: #718096;
    --theme-card-bg: var(--color-primary);
        --new-link-color: #4fd1c7;
    --theme-card-bg-hover: #164f6f;
    }
      
      
     .mw-body a.new,
     /* 3. Semantic Text Colors */
    .mw-body-content a.new {
     --theme-text-primary: #eaeef2;
        border-bottom-width: 2px !important;
    --theme-text-muted: #87b4b7;
        background-color: transparent !important;
    --theme-heading-color: #ffffff;
    }
}
 
/* ===== PRINT STYLES ===== */
@media print {
     :root {
        --theme-page-text-color: #000000;
        --theme-page-background-color: #ffffff;
        --theme-link-color: #000000;
    }
      
      
     a {
     /* 4. Borders & Interactive Elements */
        color: #000000 !important;
    --theme-border-color: var(--color-accent);
        text-decoration: underline !important;
    --theme-border-color-rgb: 127, 246, 227;
     }
    --theme-link-color: var(--color-accent);
     --theme-link-hover: #aafff0;
      
      
     a.new::after {
     /* 5. Structures */
        content: " [new]";
    --shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.3);
        font-size: smaller;
        color: #666;
    }
}
}
/* ============================================
  BASE LAYOUT & STRUCTURAL RESET
  ============================================ */


/* ===== UTILITY CLASSES (Optional but helpful) ===== */
/* 1. Universal Box Sizing */
.visually-hidden {
*, *::before, *::after {
    position: absolute !important;
     box-sizing: border-box;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
     margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
}


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


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


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


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


.card {
/* 4. Hyperlink Standardization */
     background-color: var(--card-bg-main);
a {
    border-radius: var(--border-radius-md);
     color: var(--theme-link-color);
    border: 1px solid var(--card-border-color);
     text-decoration: none;
     box-shadow: var(--theme-card-shadow);
     transition: color 0.2s ease;
     transition: all var(--transition-base) ease;
}
}


.card:hover {
a:hover, a:focus {
     box-shadow: var(--theme-card-shadow-hover);
     color: var(--theme-link-hover);
     transform: translateY(-2px);
     text-decoration: underline;
}
}


.status-alert {
a:visited {
     background-color: var(--theme-alert-color--secondary);
     color: var(--theme-link-color);  
    color: var(--theme-alert-color);
    border-left: 4px solid var(--theme-alert-color);
}
}


.status-warning {
/* 5. Responsive Media & Selection */
     background-color: var(--theme-warning-color--secondary);
img, video {
     color: var(--theme-warning-color);
     max-width: 100%;
    border-left: 4px solid var(--theme-warning-color);
     height: auto;
}
}


.status-success {
::selection {
     background-color: var(--theme-success-color--secondary);
     background: var(--color-primary);
     color: var(--theme-success-color);
     color: #000;  
    border-left: 4px solid var(--theme-success-color);
}
}
 
::-moz-selection {
.status-info {
     background: var(--color-primary);
     background-color: var(--theme-info-color--secondary);
     color: #000;
     color: var(--theme-info-color);
    border-left: 4px solid var(--theme-info-color);
}
}
/* ===== MW HEAD NAVIGATION ENHANCEMENTS ===== */


/* Personal tools menu */
/* ============================================
#p-personal {
  BASE LAYOUT (MAPPED TO TOKENS)
     margin-right: var(--spacing-md);
  ============================================ */
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;  
}
}


#p-personal .vector-menu-heading {
.mw-body {
    display: none; /* Hide "Personal tools" label */
     margin-top: -1px;
}
 
#p-personal .vector-menu-content {
    background: transparent;
    border: none;
    box-shadow: none;
}
 
#p-personal .vector-menu-content-list {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}
 
#p-personal li {
     margin: 0 !important;
}
 
#p-personal a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--border-radius-md);
    color: var(--theme-page-text-color) !important;
    background: transparent;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast) ease;
    text-decoration: none !important;
    border: 1px solid transparent;
}
 
#p-personal a:hover {
    background: var(--theme-page-background-color--secondary);
    color: var(--theme-link-color) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: var(--theme-border-color--subtle);
}
 
/* Theme toggle button */
#pt-theme a {
    background: var(--theme-accent-bg);
    color: var(--theme-accent-color) !important;
     border: 1px solid var(--theme-border-color);
     border: 1px solid var(--theme-border-color);
    border-radius: var(--radius-sm);
    background-color: transparent;
}
}


#pt-theme a:hover {
/* Hide default elements */
    background: var(--theme-accent-color);
.mobileHide, .mobile-only, .no-desktop {
    color: var(--theme-accent-label-color) !important;
     display: none !important;
    border-color: var(--theme-accent-color);
}
 
#pt-theme svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
 
/* User links with special styling */
#pt-userpage a,
#pt-mytalk a {
    background: rgba(var(--theme-accent-color--rgb), 0.1);
    color: var(--theme-accent-color) !important;
    border: 1px solid rgba(var(--theme-accent-color--rgb), 0.2);
}
 
#pt-userpage a:hover,
#pt-mytalk a:hover {
     background: var(--theme-accent-color);
    color: var(--theme-accent-label-color) !important;
}
 
/* Logout button */
#pt-logout a {
    background: rgba(var(--theme-alert-color--rgb), 0.1);
    color: var(--theme-alert-color) !important;
    border: 1px solid rgba(var(--theme-alert-color--rgb), 0.2);
}
}


#pt-logout a:hover {
/* Fix for hidden H1 on main page */
    background: var(--theme-alert-color);
body.page-Main_Page.action-view h1.firstHeading,
    color: var(--theme-alert-label) !important;
body.page-Main_Page.action-submit h1.firstHeading {
}
 
/* Namespaces and Views tabs */
#left-navigation,
#right-navigation {
    display: flex;
    gap: var(--spacing-sm);
}
 
.vector-menu-tabs {
    background: transparent;
    border: none;
}
 
.vector-menu-tabs .vector-menu-heading {
     display: none;
     display: none;
}
}


.vector-menu-tabs .vector-menu-content {
/* ============================================
     background: transparent;
  MAIN PAGE GRID LAYOUT
     border: none;
  ============================================ */
     box-shadow: none;
#mp-container {
     display: grid;
    gap: 2rem;
     padding: 1rem;
     max-width: 1400px;
    margin: 0 auto;
}
}


.vector-menu-tabs .vector-menu-content-list {
/* Desktop Layout */
     display: flex;
@media (min-width: 1024px) {
    gap: 2px;
     #mp-container {
    background: var(--theme-page-background-color--secondary);
        grid-template-areas: var(--main-page-layout--desktop);
    padding: 4px;
        grid-template-columns: repeat(3, 1fr);
    border-radius: var(--border-radius-md);
     }
     border: 1px solid var(--theme-border-color);
}
}


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


.vector-menu-tabs a {
/* Mobile Layout */
     display: block;
@media (max-width: 767px) {
    padding: 8px 16px;
     #mp-container {
    border-radius: var(--border-radius-sm);
        grid-template-areas: var(--main-page-layout--mobile);
    color: var(--theme-page-text-color) !important;
        grid-template-columns: 1fr;
    font-weight: var(--font-weight-medium);
        gap: 1rem;
    text-decoration: none !important;
     }
    transition: all var(--transition-fast) ease;
     border: 1px solid transparent;
}
}


.vector-menu-tabs a:hover {
/* MP Box styling */
    background: var(--theme-page-background-color);
.mp-box {
    color: var(--theme-link-color) !important;
     animation: fadeInUp 0.5s ease forwards;
    border-color: var(--theme-border-color);
    transform: translateY(-1px);
}
 
.vector-menu-tabs li.selected a {
    background: var(--theme-accent-color);
    color: var(--theme-accent-label-color) !important;
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-sm);
    border-color: var(--theme-accent-color);
}
 
.vector-menu-tabs li.selected a:hover {
    background: var(--theme-accent-color--hover);
    border-color: var(--theme-accent-color--hover);
}
 
/* New/discussion links in tabs */
.vector-menu-tabs li.new a {
     background: rgba(var(--theme-accent-color--rgb), 0.1);
    color: var(--new-link-color) !important;
    border: 1px dashed rgba(var(--theme-accent-color--rgb), 0.3);
}
 
.vector-menu-tabs li.new a:hover {
    background: rgba(var(--theme-accent-color--rgb), 0.2);
    border-style: solid;
    color: var(--theme-accent-color) !important;
}
 
/* Dropdown menus (More options, etc.) */
.vector-menu-dropdown {
    position: relative;
}
 
.vector-menu-dropdown .vector-menu-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--theme-page-background-color--secondary);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--border-radius-md);
    color: var(--theme-page-text-color);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
}
 
.vector-menu-dropdown .vector-menu-heading:hover {
    background: var(--theme-page-background-color);
    border-color: var(--theme-accent-color);
    color: var(--theme-link-color);
    box-shadow: var(--shadow-sm);
}
 
.vector-menu-dropdown .vector-menu-checkbox:checked + .vector-menu-heading {
    background: var(--theme-accent-color);
    color: var(--theme-accent-label-color);
    border-color: var(--theme-accent-color);
}
 
.vector-menu-dropdown .vector-menu-content {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 200px;
    background: var(--card-bg-main);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-index-dropdown);
     opacity: 0;
     opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast) ease;
}
}


.vector-menu-dropdown .vector-menu-checkbox:checked ~ .vector-menu-content {
/* Staggered animations */
    opacity: 1;
.mp-box:nth-child(1) { animation-delay: 0.05s; }
    visibility: visible;
.mp-box:nth-child(2) { animation-delay: 0.1s; }
    transform: translateY(0);
.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; }


.vector-menu-dropdown .vector-menu-content-list {
@keyframes fadeInUp {
     padding: var(--spacing-sm) 0;
     from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
}


.vector-menu-dropdown li {
/* ============================================
    margin: 0 !important;
  MAIN PAGE CARDS & GRIDS
}
  ============================================ */


.vector-menu-dropdown a {
/* Main Grid Wrapper  */
    display: block;
.main-page-card-grid {
    padding: 8px 16px;
     display: grid;
    color: var(--theme-page-text-color) !important;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    text-decoration: none !important;
     gap: 20px;
    transition: all var(--transition-fast) ease;
     margin-top: 1rem;
}
 
.vector-menu-dropdown a:hover {
    background: var(--theme-page-background-color--secondary);
    color: var(--theme-link-color) !important;
    padding-left: 20px;
}
 
/* Search box */
#p-search {
    flex: 1;
    max-width: 400px;
}
 
#p-search h3 {
    display: none;
}
 
#simpleSearch {
     display: flex;
    gap: 4px;
    background: var(--card-bg-main);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--border-radius-md);
    padding: 4px;
     transition: all var(--transition-fast) ease;
    box-shadow: var(--shadow-sm);
}
 
#simpleSearch:focus-within {
    border-color: var(--theme-accent-color);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
     transform: translateY(-1px);
}
 
#searchInput {
    flex: 1;
     padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--theme-page-text-color);
    font-size: var(--font-size);
    border-radius: var(--border-radius-sm);
}
 
#searchInput::placeholder {
    color: var(--input-placeholder);
}
 
#searchInput:focus {
    outline: none;
    background: var(--theme-page-background-color--secondary);
}
}


.searchButton {
/* 1. Game Intro Cards */
    padding: 10px 20px;
.game-intro-card {
     background: var(--theme-page-background-color--secondary);
     background-color: var(--theme-card-bg);
    border-radius: var(--radius-lg); /* From Step 1 */
    padding: 1.25rem;
     border: 1px solid var(--theme-border-color);
     border: 1px solid var(--theme-border-color);
     color: var(--theme-page-text-color);
     box-shadow: var(--shadow-soft);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
}
 
.searchButton:hover {
    background: var(--theme-accent-color);
    color: var(--theme-accent-label-color);
    border-color: var(--theme-accent-color);
    transform: translateY(-1px);
}
 
#searchButton {
    background: var(--theme-accent-color);
    color: var(--theme-accent-label-color);
    border-color: var(--theme-accent-color);
}
 
#searchButton:hover {
    background: var(--theme-accent-color--hover);
    border-color: var(--theme-accent-color--hover);
}
 
/* Watch/Unwatch button */
#ca-unwatch a {
     display: flex;
     display: flex;
     align-items: center;
     flex-direction: column;
     gap: 6px;
     height: 100%;
     background: rgba(var(--theme-warning-color--rgb), 0.1);
     transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
    color: var(--theme-warning-color) !important;
    border: 1px solid rgba(var(--theme-warning-color--rgb), 0.2);
}
}


#ca-unwatch a:hover {
.game-intro-card:hover {
     background: var(--theme-warning-color);
     background-color: var(--theme-card-bg-hover);
     color: var(--theme-warning-label) !important;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
     border-color: var(--color-primary);  
}
}


/* Delete/Move/Protect actions (in dropdown) */
/* 2. Header Elements */
#ca-delete a {
.game-header {
     color: var(--theme-alert-color) !important;
     margin-bottom: 1rem;
    position: relative;
}
}


#ca-delete a:hover {
.mana-text {
     background: rgba(var(--theme-alert-color--rgb), 0.1);
     font-family: 'Fredoka', sans-serif;
}
    font-size: 1.5rem;
 
     font-weight: 600;
/* Responsive adjustments */
    margin: 0;
@media (max-width: 768px) {
     #mw-head {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
      
      
     #p-personal .vector-menu-content-list {
     /* Gradient */
        gap: 4px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
     }
    -webkit-background-clip: text;
    background-clip: text;
     color: transparent;
      
      
     #p-personal a {
     /* Flexbox aligning the icon perfectly */
        padding: 4px 8px;
    display: flex;
        font-size: var(--font-size-small);
     align-items: center;
     }
     gap: 8px;  
   
     letter-spacing: 0.5px;
    .vector-menu-tabs .vector-menu-content-list {
        flex-wrap: wrap;
     }
   
    .vector-menu-tabs a {
        padding: 6px 12px;
        font-size: var(--font-size-small);
    }
      
    #simpleSearch {
        min-width: 200px;
    }
   
    .searchButton span {
        display: none;
    }
   
    .searchButton {
        padding: 10px;
    }
}
}


/* Dark theme specific adjustments */
.mana-line {
.skin-vector-dark #simpleSearch {
    height: 3px;
     background: var(--card-bg-main);
     background: linear-gradient(90deg, var(--color-accent), transparent);
     border-color: var(--theme-border-color);
     margin-top: 0.5rem;
    width: 100%;
    border-radius: 2px;
}
}


.skin-vector-dark .vector-menu-tabs .vector-menu-content-list {
/* 3. Card Content & Headings */
    background: var(--card-bg-sub);
.game-content {
    border-color: var(--theme-border-color);
     color: var(--theme-text-primary);
}
     line-height: 1.6;
 
     flex-grow: 1;  
.skin-vector-dark .vector-menu-dropdown .vector-menu-content {
     background: var(--card-bg-main);
    border-color: var(--theme-border-color);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
 
/* Active state indicators */
#p-personal a:active,
.vector-menu-tabs a:active,
.searchButton:active {
    transform: translateY(0);
     transition: transform 100ms ease;
}
 
/* Focus styles for navigation */
#p-personal a:focus-visible,
.vector-menu-tabs a:focus-visible,
.vector-menu-dropdown .vector-menu-heading:focus-visible,
#searchInput:focus-visible,
.searchButton:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}
 
/* Icon adjustments */
.icon a::before {
    margin-right: 6px;
    opacity: 0.7;
}
}


/* Animation for dropdown arrow */
.heading-char {
.vector-menu-dropdown .vector-menu-heading::after {
     font-size: 1.1rem;
    content: "▼";
    font-size: 10px;
    opacity: 0.7;
    transition: transform var(--transition-fast) ease;
}
 
.vector-menu-dropdown .vector-menu-checkbox:checked + .vector-menu-heading::after {
    transform: rotate(180deg);
}
 
/* Loading state for search */
#simpleSearch.loading {
    position: relative;
}
 
#simpleSearch.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 60px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--theme-border-color);
    border-top-color: var(--theme-accent-color);
    border-radius: 50%;
    animation: var(--animation-spin);
}
#content.mw-body, .parsoid-body {
    background-color: var(--theme-page-background-color) !important;
    border: 1px solid var(--theme-border-color);
    color: var(--theme-page-text-color);
}
 
/* Typography improvements */
h1, h2, h3, h4, h5, h6, .mw-body, .editOptions, .ace-tm, .vector-menu-heading, .ace_cursor, .vector-menu-content-list > a, .vector-menu-heading-label {
    color: var(--theme-page-text-color);
}
.vector-menu-heading-label {
     font-size: 0.8125em;
}
 
/* Footer and panels */
.mw-footer, .editOptions, .ace-tm, #mw-panel .vector-menu-heading {
    background-color: var(--theme-page-background-color--secondary) !important;
    color: var(--theme-page-text-color);
}
 
/* Sidebar and lists */
.ace-tm .ace_gutter, .selected.mw-list-item, #mw-panel .vector-menu-content-list {
    background-color: var(--theme-page-background-color--secondary) !important;
    color: var(--theme-page-text-color);
}
 
/* Notification improvements */
.skin-vector-dark #mw-notification-area.mw-notification.mw-notification-type-error,
.skin-vector-dark .postedit.mw-notification.mw-notification-type-error,
.skin-vector-dark .wds-table-td-alert {
    background-color: var(--theme-alert-highlight);
    color: var(--theme-alert-label);
}
 
.text-error {
    color: var(--theme-alert-highlight);
}
 
/* Revision diff styling - improved contrast */
.diff td.diff-addedline {
    background-color: var(--teal-050);
    border-color: var(--theme-success-color);
    border-width: 1px 1px 1px 4px;
    color: var(--theme-success-color);
}
 
.diff td.diff-addedline .diffchange {
    background-color: var(--theme-success-color);
    color: var(--theme-success-label);
    font-weight: normal;
}
 
.diff td.diff-deletedline {
    background-color: var(--theme-alert-color--secondary);
    border-color: var(--theme-alert-color);
    border-width: 1px 1px 1px 4px;
    color: var(--theme-alert-color);
}
 
.diff td.diff-deletedline .diffchange {
    background-color: var(--theme-alert-color);
    color: var(--theme-alert-label);
    font-weight: normal;
}
 
.diff td.diff-context {
    background: transparent;
    border-color: var(--theme-border-color);
    color: var(--theme-page-text-color);
}
 
/* CodeMirror improvements */
.CodeMirror .CodeMirror-scroll {
    background: var(--theme-page-background-color);
    color: var(--theme-page-text-color);
}
 
.CodeMirror .CodeMirror-linenumber, .CodeMirror .CodeMirror-gutters {
    background: var(--theme-page-background-color--secondary);
    color: var(--theme-page-text-color);
    border-right: 1px solid var(--theme-border-color);
}
 
/* Color template improvements */
.text-player, .text-player * {
    color: var(--color-player);
     font-weight: 600;
     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;
}
}


.bg-player {  
.heading-char a {
    background-color: var(--color-player);
     color: var(--theme-heading-color);
     color: var(--theme-page-text-color--inverse);
     text-decoration: none;
     padding: 2px 6px;
     transition: color 0.2s ease;
     border-radius: 3px;
}
}


.text-accent, .text-accent * {  
.heading-char a:hover {
     color: var(--color-accent);
     color: var(--color-accent);
    font-weight: 600;
}
}


.bg-accent {  
/* 4. Auto Grid Lists (The Links) */
     background-color: var(--color-accent);
.auto-grid {
     color: var(--theme-accent-label-color);
     display: grid;
     padding: 2px 6px;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));  
     border-radius: 3px;
     gap: 0.5rem;
    list-style: none;
     padding: 0;
     margin: 0.75rem 0 0 0;
}
}


/* User highlights - improved contrast */
.auto-grid li {
a[href="https://mbwiki.stairwaygames.work/wiki/User:Ais"],
     padding: 0;
a[href="/wiki/User:Ais"],
a[href="/wiki/Special:Contributions/Ais"] {
     color: var(--custom-admin-highlight);
    font-weight: 600;
}
}
 
/* Bots */
/* Elevated List Link Styling */
a[href="https://coralisland.wiki/wiki/User:NoriBot"],
.auto-grid li a {
a[href="/wiki/User:NoriBot"],
    display: block;
a[href="/wiki/Special:Contributions/NoriBot"],
    padding: 0.35rem 0.5rem;
a[href="https://coralisland.wiki/wiki/User:VoirBot"],
     color: var(--theme-link-color);
a[href="/wiki/User:VoirBot"],
     text-decoration: none;
a[href="/wiki/Special:Contributions/VoirBot"] {
    border-radius: var(--radius-sm);
     color: var(--custom-bot-color);
    background-color: rgba(127, 127, 127, 0.05);  
     font-style: var(--custom-bot-font-style);
     border: 1px solid transparent;
     opacity: 0.9;
    transition: all 0.2s ease;
}
}


/* Additional improvements for better readability */
.auto-grid li a:hover {
.mw-body-content {
    color: var(--theme-link-hover);
     line-height: 1.6;
    background-color: var(--theme-body-bg);
     border-color: var(--theme-border-color);
    transform: translateX(3px);  
}
}
/* ============================================
  BANNER, WIKI COMPONENTS & SCROLLBAR
  ============================================ */


/* Improve contrast for links */
/* 1. BANNER SECTION */
a {
#mp-box-banner .mp-body {
     transition: color 0.2s ease;
    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;
}
}


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


/* Improve table readability */
.iconname {
.mw-parser-output table {
    display: flex;
     background-color: var(--theme-page-background-color);
    align-items: center;
     border: none;
    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;
}
}


.mw-parser-output table th {
.iconname:hover {
     background-color: var(--theme-page-background-color--secondary);
     background: var(--color-primary);
     color: var(--theme-page-text-color);
     border-color: var(--color-accent);
    transform: translateY(-2px);
}
}


.mw-parser-output table td {
.iconname a {
     border: none;
     color: var(--theme-text-primary) !important;
}
    text-decoration: none;
body.skin-vector-dark {
    font-weight: 500;
/*background: url("https://coralwiki.stairwaygames.com/w/images/9/9a/Site-background-dark.png") no-repeat fixed center center / cover !important;*/
background-color: #000000;
}
 
.mobileHide, .mobile-only, .no-desktop {
display: none!important;
}
}


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


ul { list-style: disc; }


h2 .mw-headline,
h2 .mw-headline, h3 .mw-headline, h4 .mw-headline { font-weight: 500; }
h3 .mw-headline,
.vector-body h3, .vector-body h4, .vector-body h5, .vector-body h6 { margin-bottom: 4px; }
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(--mw-head-link-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;
}


/* Categories */
.catlinks {
.catlinks {
border-color: var(--theme-border-color);
    border-color: var(--theme-border-color);
border-radius: 6px;
    border-radius: var(--radius-md);
background-color: var(--gray-050);
    background-color: var(--theme-card-bg);
}
    padding: 10px;
 
.CodeMirror-lines span {
font: 14px Consolas,Eupheima UCAS,Monaco,Menlo,monospace /* Source Editor */
}
}


.wikiEditor-ui .ace_editor * {
/* Code blocks */
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 {
code, pre {
background-color: var(--theme-page-background-color--secondary);
    background-color: var(--theme-card-bg);
color: var(--theme-page-text-color);
    color: var(--theme-text-primary);
border: 1px solid var(--theme-border-color);
    border: 1px solid var(--theme-border-color);
border-radius: 2px;
    border-radius: var(--radius-sm);
padding: 1px 4px;
    padding: 2px 6px;
font-family: monospace, monospace;
    font-family: Consolas, Eupheima UCAS, Monaco, Menlo, monospace;
    font-size: 13px;  
}
}


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


.code-block-table * {
/* Table of Contents */
font: 14px Consolas,Eupheima UCAS,Monaco,Menlo,monospace;
}
 
.code-block {
display: inline-block;
line-height: 21px;
}
 
/* || MAIN PAGE */
/*banner links*/
.banner-links a {
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
    font-weight: 600 !important;
}
/* mp-banner */
#mp-banner {
position: absolute;
width: 100%;
height: 10%;
filter: blur(0px);
z-index: -1;
/* background: url(filepath://Funguys_Swarm_Banner.png) top center/cover no-repeat;*/
background-color: #000000;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
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-color: var(--theme-page-background-color--secondary, #000000);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 4px;
color: #fffff;
text-align: center;
align-items: center;
}
 
 
/* ||TABLE OF CONTENTS */
.toc {
.toc {
padding: 8px 12px;
    padding: 12px 16px;
border-radius: 4px;
    border-radius: var(--radius-md);
background-color: var(--theme-page-background-color--secondary);
    background-color: var(--theme-card-bg);
border: 1px solid var(--theme-border-color);
    border: 1px solid var(--theme-border-color);
margin-top: 16px;
    margin-top: 16px;
}
    box-shadow: var(--shadow-soft);
.toctogglelabel {
color: var(--theme-link-color);
}
.tocnumber {
color: var(--theme-page-text-color);
}
 
.vector-body .toc h2 {
font-family: var(--font-family-headings);
font-weight: bold;
}
 
/* 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 */
.toctogglelabel { color: var(--theme-link-color); }
.changelist-header {
.tocnumber { color: var(--theme-text-muted); }
display: flex;
.vector-body .toc h2 { font-family: 'Fredoka', sans-serif; }
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 */
.hatnote {
.hatnote {
display: flex;
    border-left: 4px solid var(--color-accent);
align-items: center;
    padding: 8px 12px;
padding: 10px 15px;
    border-radius: var(--radius-sm);
margin-top: 0.6rem;
    background-color: var(--theme-card-bg);
margin-bottom: 0.8rem;
    margin: 8px 0;
background-color: var( --color-surface-2 );
border: 1px solid var( --border-color-base--darker );
border-radius: var( --border-radius-base );
color: var( --color-base--emphasized );
font-size: 0.875rem;
line-height: 1.4;
}
 
.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 */
/* Variables styling */
 
span.variable { opacity: 0.65; }
.pull-quote {
span.variable::after { opacity: 0.65; content: ">"; }
font-style: italic;
span.variable::before { opacity: 0.65; content: "<"; }
margin: 0;
padding: 0 30px 8px !important
}


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


.pull-quote__source::before {
/* Gallery & Changelist */
content: "— ";
.gallerytext { text-align: center; font-size: 100%; }
margin-bottom:8px;
.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); }


.pull-quote__text {
/* Chat wrapper */
margin-bottom:4px;
.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; }


/* Gallery */
/* 3. RESPONSIVE IMPROVEMENTS */
.gallerytext {
@media (max-width: 768px) {
text-align: center;
    .game-intro-card { padding: 1rem; }
font-size:100%;
    .mana-text { font-size: 1.25rem; }
}
    .social { gap: 0.5rem; }
 
    .iconname { padding: 0.35rem 0.75rem; font-size: 0.9rem; }
/* Fix to Template Data */
    #mp-box-banner .mp-body { padding: 1rem; }
.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 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;  
    font-size: 0.875em;  
}
.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);
}
}
/* ===== IMproved Main Page Framework CSS ===== */


#mp-container {
/* 4. CUSTOM SCROLLBAR */
    display: grid;
::-webkit-scrollbar { width: 10px; height: 10px; }
    gap: 20px;
::-webkit-scrollbar-track {
    margin: 20px 0;
     background: var(--theme-body-bg);
     width: 100%;
     border-radius: 0px;  
     min-width: 100%;
}
}
 
::-webkit-scrollbar-thumb {
/* Desktop layout */
     background: var(--color-accent);
#mp-container {
     border-radius: 5px;
     grid-template-areas: var(--main-page-layout--desktop, '');
     grid-template-columns: var(--main-page-layout-columns--desktop, repeat(3, 1fr));
}
}
::-webkit-scrollbar-thumb:hover { background: var(--theme-link-hover); }


/* Tablet layout */
/* 5. UTILITY CLASSES */
@media (max-width: 1024px) {
.text-center { text-align: center; }
    #mp-container {
.mt-2 { margin-top: 0.5rem; }
        grid-template-areas: var(--main-page-layout--tablet, var(--main-page-layout--desktop, ''));
.mb-2 { margin-bottom: 0.5rem; }
        grid-template-columns: var(--main-page-layout-columns--tablet, var(--main-page-layout-columns--desktop, repeat(2, 1fr)));
.p-2 { padding: 0.5rem; }
    }
/* ============================================
}
  WIKI COMPONENTS
  ============================================ */


/* Mobile layout */
/* 1. WIKITABLES  */
@media (max-width: 768px) {
table.wikitable {
     #mp-container {
     background-color: var(--theme-card-bg);
        grid-template-areas: var(--main-page-layout--mobile, var(--main-page-layout--tablet, var(--main-page-layout--desktop, '')));
    color: var(--theme-text-primary);
        grid-template-columns: var(--main-page-layout-columns--mobile, var(--main-page-layout-columns--tablet, var(--main-page-layout-columns--desktop, 1fr)));
    }
}
/* Social Links Improvements */
/* Clean social links styling - follows theme colors */
.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);
     border: 1px solid var(--theme-border-color);
     box-shadow: var(--shadow-sm);
     border-collapse: collapse;
     display: flex;
     margin: 1em 0;
     flex-wrap: wrap;
     width: 100%; /* Encourages responsive behavior */
     justify-content: center;
     box-shadow: var(--shadow-soft);
    align-items: center;
    gap: 15px;
}
}


/* Each social link item */
table.wikitable > tr > th,
.social .iconname {
table.wikitable > tr > td,
    display: inline-flex;
table.wikitable > * > tr > th,
    align-items: center;
table.wikitable > * > tr > td {
    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);
     border: 1px solid var(--theme-border-color);
     transition: all 0.3s ease;
     padding: 0.5em 0.75em;
    flex: 1;
    max-width: 200px;
}
}


/* Hover effect */
/* Table Headers */
.social .iconname:hover {
table.wikitable > tr > th,
    background: var(--theme-accent-bg) !important;
table.wikitable > * > tr > th {
    transform: translateY(-2px);
     background-color: var(--color-primary);
    box-shadow: var(--shadow-md);
     color: var(--theme-heading-color);
    border-color: var(--theme-accent-color);
     font-weight: 600;
}
 
/* The link inside - uses theme colors */
.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;
}
 
/* Hover text color */
.social .iconname:hover a.external {
    color: var(--theme-link-color) !important;
}
 
/* Icon container */
.social .iconname .floatleft {
    display: flex !important;
    align-items: center !important;
    margin-right: 10px !important;
    margin-bottom: 0 !important;
    float: none !important;
}
 
/* Icon image - no filter, keep original */
.social .iconname .floatleft a img {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    /* Remove filter - keep original icon colors */
    filter: none !important;
}
 
/* Text next to icon */
.social .iconname .external-text {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
 
/* Responsive design */
@media (max-width: 1024px) {
    .social {
        max-width: 95% !important;
        gap: 10px;
    }
   
    .social .iconname {
        min-width: 160px;
        padding: 10px 15px;
    }
}
 
@media (max-width: 768px) {
    .social {
        flex-direction: column;
        gap: 8px;
        max-width: 100% !important;
        padding: 10px;
    }
   
    .social .iconname {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        justify-content: flex-start;
        padding: 10px 20px;
    }
   
    .social .iconname a.external {
        justify-content: flex-start;
    }
}
body {
font-family: Helvetica, Arial, sans-serif !important;
    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;
}
.ci-letter-attachment{
  max-width: 70%;
}
 
.card-list-container{
  display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.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;
 
}
 
.cost-template {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 0.2rem
}
.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;
 
 
}
.heart-event-table {
  width: 30%;
}
.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 {
  // -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;
     text-align: center;
     text-align: center;
}
}


.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td:first-child {
  // -ms-word-break: break-all;
  // word-break: break-all;
  // -webkit-hyphens: auto;
  // -moz-hyphens: auto;
  // hyphens: auto;
  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;
  // -webkit-hyphens: auto;
  // -moz-hyphens: auto;
  // hyphens: auto;
}


.quotetable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
table.wikitable > tbody > tr:hover {
//  -ms-word-break: break-all;
    background-color: rgba(127, 127, 127, 0.05);
//  word-break: break-all;
 
//  -webkit-hyphens: auto;
//  -moz-hyphens: auto;
//  hyphens: auto;
}
}


 
/* 2. INFOBOXES  */
.vector-menu-content {
  margin-left: 10px;
}
.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 {
.infobox {
  background: #e7c361 ;
    float: right;
  border: 1px solid #e7c361 ;
    clear: right;
  float: right;
    margin: 0 0 1em 1em;
  margin: 0 0 1em 1em;
    width: 300px;
  padding: 1em;
    background-color: var(--theme-card-bg);
  // min-width: 25%;
    border: 1px solid var(--theme-border-color);
}
    border-radius: var(--radius-md);
.infobox-title {
    padding: 10px;
  font-size: 2em;
    box-shadow: var(--shadow-soft);
  text-align: center;
    font-size: 0.9em;
    color: var(--theme-text-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
}


.infobox p {
/* Infobox Headers */
  text-decoration: underline;
.infobox th {
  font-size: 1.3em;
     background-color: var(--color-secondary);
}
    color: var(--theme-heading-color);
.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{
  border: 1px solid #a2a9b1;
  // text-align: left;
  // padding: 0.2em 0.4em;
}
 
// .scheduletable > tbody > tr > td:first-child{
//  width: 70px;
// }
.navbox-list{
  padding: 0 0 0 2px;
    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;
}
.ci-recipe-yield-amount {
  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;
     padding: 5px;
     min-height: 100%;
     border-radius: var(--radius-sm);
}
.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{
.infobox td {
     background-color: rgba(231, 195, 97, 0.2);
     padding: 4px 5px;
}
    border-bottom: 1px solid rgba(127, 127, 127, 0.1);  
.gifted-item > tbody > tr > th{
  background-color: rgba(231, 195, 97, 0.8);
  max-width: 100px;
}
.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{
//  background-color: #e7c361 ;
//  min-width: 50%;
// }
// .pi-smart-group .pi-smart-data-label{
//  font-size: 0.5rem;
// }
// .portable-infobox .pi-title {
//  text-align: center;
//  font-weight: bold;
// }


.pi-image-thumbnail {
.infobox tr:last-child td {
  max-width: 100%!important;
    border-bottom: none;
}
}


.content-table {
/* 3. NAVBOXES  */
  background: transparent;
.navbox {
  padding: 10px 2%;
     background-color: var(--theme-card-bg);
  width: 100%;
     border: 1px solid var(--theme-border-color);
}
     border-radius: var(--radius-md);
 
     margin: 1.5em 0;
.content-table-basic {
     padding: 2px;
  background: transparent;
     text-align: center;
  width: 100%;
     box-shadow: var(--shadow-soft);
}
 
.content-table-second {
  background: transparent;
  width: 100%;
}
 
.child-content-table {
  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 {
    padding-left: 10em;
  }
}
 
.mw-body,
#mw-data-after-content {
  margin-left: 10em;
}
 
.mw-body {
  // Merge the border below with tabs' one (in their background image).
  margin-top: -@border-width-base;
  // Border on top, left, and bottom side.
  //  border: @border-width-base @border-style-base @border-color-content;
  border: 10px solid azure;
  border-radius: 5px;
  //  border-right-width: 0;
 
  .firstHeading {
    /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
    overflow: visible;
  }
}
 
.mw-indicators {
  z-index: @z-index-indicators;
}
 
.vector-body {
  font-size: var(--font-size) !important;
  position: relative;
  z-index: @z-index-base;
}
.vector-body,
.vector-body p,
.vector-body div,
.vector-body span {
     font-size: var(--font-size) !important;
    font-family: Helvetica, Arial, sans-serif !important;
}
 
/* Override table tiny fonts on mobile */
@media screen and (max-width: 1024px) {
    .wikitable > tr > th, .wikitable > tr > td,
    .wikitable > * > tr > th, .wikitable > * > tr > td {
        font-size: 14px !important;
     }
    .content {
        font-size: 14px !important;
    }
   
    /* Also fix vector body on mobile */
    .vector-body {
        font-size: 16px !important;
    }
}
 
/* Ensure text in mw-body isn't affected by Vector's scaling */
.mw-body-content,
.mw-parser-output {
    font-size: var(--font-size) !important;
}
/* Head */
#mw-page-base {
  //  .vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% );
  background: transparent;
  background-position: bottom left;
  height: 5em;
}
 
#mw-head-base {
  margin-top: -5em;
  margin-left: 10em;
  height: 5em;
  background: transparent;
}
 
/* Hide, but keep accessible for screen-readers */
#mw-navigation h2 {
  position: absolute;
  top: -9999px;
}
 
#mw-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 3.125em;
}
 
/* Navigation Containers */
#left-navigation {
  float: left;
  margin-left: 10em;
  margin-top: 2.5em;
  /* 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 {
  float: right;
  margin-top: 2.5em;
}
 
/* Search */
.vector-search-box {
  float: left;
  margin-right: 0.5em;
  margin-left: 0.5em;
 
  // FIXME: This selector requires knowledge of the internals of the search component
  // and should not be used here.
  form {
     margin: 0.5em 0 0;
  }
}
 
// Defined as `div`.
// Provide extra element for gadgets due to `form` already carrying an `id`.
// FIXME: This selector requires knowledge of the internals of the search component
.vector-search-box-inner {
  min-width: 5em;
  // 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;
}
 
/* Sidebar */
#mw-panel {
  position: absolute;
  top: 0;
  width: 10em;
  left: 0;
}
 
// hide the heading of the first menu
#p-logo + .mw-portlet .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;
}
 
// ul {
//  list-style-type: none !important
// }
 
.vector-body blockquote{
  border: 0;
  padding: 0;
}
 
.vector-menu-portal .vector-menu-content li {
  padding: 5px;
}
.vector-menu-portal .vector-menu-content ul {
  background: rgba(255, 255, 255, 0.8);
}
.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 {
  margin-left: 10em;
  margin-top: 1%;
  margin-bottom: 1%;
  padding: 0.75em;
  background: white;
  min-height: 120px;
  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 {
  padding: 1.25em;
}
 
#mw-panel {
  padding-left: 0.5em;
}
 
.vector-search-box {
  margin-right: 1em;
}
 
#p-personal {
     position: absolute;
    top: 0.5em;
     right: 0.5em;
}
 
// 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 {
  /* @noflip */
  direction: rtl;
}
 
.cols {
  text-align: left;
  word-break: break-all;
  // padding: 1em 0;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  font-weight: 600;
  // text-transform: uppercase;
  // letter-spacing: 1px;
}
 
.forest {
  margin-top: -25px;
}
 
.forest2 {
  margin-top: 0;
}
/* grid styling - Connected to Module Variables */
.grid {
  display: grid !important;
  /* Desktop: Use module variable, fallback to 12 columns */
  grid-template-columns: var(--main-page-layout-columns--desktop, repeat(12, 1fr));
  margin: 10px 0;
  gap: 10px; /* Better than grid-gap (deprecated) */
}
 
/* Tablet */
@media (max-width: 1024px) {
  .grid {
     grid-template-columns: var(--main-page-layout-columns--tablet, var(--main-page-layout-columns--desktop, repeat(12, 1fr)));
  }
}
 
/* Mobile */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: var(--main-page-layout-columns--mobile, var(--main-page-layout-columns--tablet, var(--main-page-layout-columns--desktop, repeat(1, 1fr))));
  }
}
 
/* Optional: Keep column classes as fallback when NOT using module */
.grid:not([data-has-module-layout]) .grid__col4 {
  grid-column: span 4;
}
 
/* Other styles can stay the same */
.specification-table {
  font-size: 10px;
  padding: 0 5%;
}
 
.content {
  padding: 10px;
  font-size: 12px;
}
 
.wrapper {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}
 
@supports (display: grid) {
  .mw-content-ltr ul,
  .mw-content-rtl .mw-content-ltr ul {
    // margin: 0 !important;
  }
  .social .iconname .floatleft {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .social {
    gap: 30px;
  }
 
  .croptable > tbody > tr >td > a > img{
    max-width: 40px;
    max-height: 40px;
  }
 
  .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%;
     width: 100%;
 
     clear: both;
  }
  .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,
.content-table th,
.content-table td {
    border: none !important;
}
}
  .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 {
.navbox th {
     margin-top: 0;
     background-color: var(--color-primary);
  }
     color: var(--theme-heading-color);
 
     border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  .content-table-second {
     padding: 6px;
    background: transparent;
     font-weight: 600;
     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) {
/* Group Headers inside Navbox */
  .mw-parser-output a.external {
.navbox .navbox-group {
     font-size: 20px;
     background-color: var(--color-secondary);
    font-weight: 400;
     color: var(--theme-text-primary);
  }
     font-weight: 600;
  .floatleft > a > img {
     padding: 4px 8px;
     width: 48px;
     white-space: nowrap;
    height: 48px;
     border-right: 2px solid var(--theme-body-bg);  
  }
}
#content .header-column {
    background-color: #1a6a7a !important; /* Your requested color */
     justify-content: center !important; /* Centers the content horizontally (for flexbox) */
     text-align: center !important;       /* Centers any text content (for fallback) */
     color: #ffffff !important;          /* Recommended: Set text to white for contrast */
}
.header-column > span > a > img{
width: 14px;
     height: 14px;
}
}


.header-column >  a > img{
.navbox .navbox-list {
width: 14px;
    text-align: left;
     height: 14px;
     padding: 4px 8px;
}
}


.heading-char{
/* Striping for Navbox lists */
  color:#deb76c !important
.navbox .navbox-even {
    background-color: rgba(127, 127, 127, 0.03);
}
}
 
/* ============================================
#footer {
  THEME TOGGLE BUTTON
background: #fff;
  ============================================ */
color: #000;
.floating-theme-toggle {
margin-top: 1em;
    position: fixed;
border-top: 1pt solid #aaa;
    bottom: 20px;
padding-top: 5px;
    right: 20px;
direction: ltr;
    z-index: 9999;
}
    padding: 10px 16px;
/* ---- CONTENTS STYLING GOES BELOW THIS LINE --- */
    background-color: var(--theme-card-bg);
.portable-infobox {
    color: var(--theme-heading-color);
float: right;
    border: 2px solid var(--theme-border-color);
clear: right;
    border-radius: var(--radius-lg);
font-size: .9em;
    font-family: 'Fredoka', sans-serif;
max-width: 300px;
    font-size: 0.95rem;
}
    font-weight: 600;
 
    cursor: pointer;
.pi-caption {
    box-shadow: var(--shadow-soft);
font-size: 1.15em;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
color: var(--theme-page-text-color);
    backdrop-filter: blur(8px);  
}
 
.pi-item-spacing.pi-caption {
  padding: 4px 8px;
}
 
.pi-image-thumbnail {
  min-width: fit-content;
  height: auto;
  max-width: 100%;
}
 
/* || TABS */
.pi-media-collection .pi-media-collection-tabs {
  font-size: 1.2em;
  padding: 6px 4px 6px 4px;
  width: auto;
  max-width: none;
}
 
.pi-media-collection .pi-tab-link {
  padding: 8px;
  border: none;
  color: var(--gray-500);
  flex-grow: 1;
}
 
.pi-media-collection .pi-tab-link.current {
  padding: 8px;
  border: none;
  /* border-bottom: 3px solid var(--light-blue); */
  background-color: var(--gray-100);
  border-radius: 4px;
  font-weight: 500;
}
 
/* Avoid tabs from going off-screen and needing horizontal scrooling */
.pi-media-collection-tabs {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
margin-left: 0 !important;
}
 
/* || VALUES */
.portable-infobox {
  border: 1px solid var(--theme-border-color);
  background-color: var(--gray-050);
}
 
.portable-infobox .pi-data-label {
  margin: 2px 6px;
  padding: 0;
  font-weight: 500;
}
 
.portable-infobox .pi-data-value {
  padding: 7px; /* align values to labels */
}
 
.portable-infobox .pi-title {
  background: var(--brown-300);
  color: var(--theme-accent-label-color);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  text-align: center;
  font-weight: 500;
}
 
.pi-title p {
  margin: 4px 0;
  font-size: .85em;
}
 
.portable-infobox .pi-header {
  background: var(--brown-100);
  color: var(--theme-accent-label-color);
  text-align: center;
  font-weight: 500;
}
 
.pi-header p {
  margin: 8px 0;
}
 
.portable-infobox .pi-border-color {
  border-color: var(--theme-border-color);
}
 
/* || RESPONSIVE */
@media screen and (max-width: 720px){
.portable-infobox {
font-size: .85em;
}
}
}


@media screen and (max-width:600px){
.floating-theme-toggle:hover {
.portable-infobox {
    background-color: var(--color-primary);
max-width: 100%;
    border-color: var(--color-accent);
margin: 0 0 16px 0;
    transform: translateY(-4px);  
}
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    color: #000;
.pi-media-collection .pi-media-collection-tabs {
width: auto;
        max-width: none;
}
}
}

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"