MediaWiki:Timeless.css: Difference between revisions

Latest revision as of 09:01, 17 November 2025

@media screen {
	@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap);
	@font-face {
	    font-family: 'GothamSSm-Light';
	    src: url(/resources/assets/fonts/GothamSSm-Light/GothamSSm-Light.eot);
	    src: url("/resources/assets/fonts/GothamSSm-Light/GothamSSm-Lightd41d.eot?#iefix") format('embedded-opentype'),
	    url("/resources/assets/fonts/GothamSSm-Light/GothamSSm-Light.svg#GothamSSm-Light") format('svg'),
	    url(/resources/assets/fonts/GothamSSm-Light/GothamSSm-Light.ttf) format('truetype'),
	    url(/resources/assets/fonts/GothamSSm-Light/GothamSSm-Light.woff) format('woff'),
	    url(/resources/assets/fonts/GothamSSm-Light/GothamSSm-Light.woff2) format('woff2');
	    font-weight: normal;
	    font-style: normal;
	}
	@font-face {
	    font-family: 'GothamSSm-Medium';
	    src: url(/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.eot);
	    src: url("/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Mediumd41d.eot?#iefix") format('embedded-opentype'),
	    url("/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.svg#GothamSSm-Light") format('svg'),
	    url(/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.ttf) format('truetype'),
	    url(/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.woff) format('woff'),
	    url(/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.woff2) format('woff2');
	    font-weight: normal;
	    font-style: normal;
	}
	body {
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    background: #020307!important;
	}
	
	hr {
	    border-top: 0px!important;
	    border-left: 0px!important;
	    border-right: 0px!important;
	    border-bottom: 1px solid #262932!important;
	    margin-top: 10px!important;
	}
	
	a {
	    color: rgba(240,240,255,0.7)!important;
	    text-decoration: none!important;
	}
	
	a:hover {
	    color: #ba6356!important;
	    text-decoration: none!important;
	}
	
	pre {
	    background: #0f1116 !important;
	    border: 1px solid #262932 !important;
	    color: #6c757d !important;
	}
	
	.font-roboto {
	    font-family: "Roboto", sans-serif;
	    font-optical-sizing: auto;
	    font-weight: 400;
	    font-style: normal;
	    font-variation-settings:
	            "wdth" 100;
	}
	.mw-wiki-logo.timeless-logo img {
	    width: 270px!important;
	    height: auto;
	    margin: 3.5em 0 1.5em!important;
	}
	/*******************************
	 * HEADINGS E ESTILOS DE PÁGINA
	 *******************************/
	.mw-body .mw-heading3,
	.mw-body h3 {
	    padding-bottom: 8px;
	    border-bottom: 1px solid #262932;
	    font-size: 22px!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    color: rgba(240,240,255,0.9)!important;
	    line-height: 1.125 !important;
	    margin: 1.25em 0 0.5em !important;
	}
	.mw-body .mw-heading3,
	.mw-body h3:before {
	    content: '--';
	    position: relative;
	    margin-right: 10px;
	    display: inline-block;
	    color: #ba6356;
	}
	
	.mw-body .mw-heading2,
	.mw-body h2 {
	    font-size: 1.8em !important;
	    border-bottom: solid 1px #a23e2f !important;
	    color: #ffffff!important;
	    font-weight: normal !important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    line-height: 150%!important;
	    margin: 1.25em 0 10px !important;
	}
	
	.mw-body .mw-heading4, .mw-body h4 {
	    font-size: 1.4em!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	}
	
	.toc {
	    display: none !important;
	}
	
	.mw-body h1.firstHeading {
	    display: none !important;
	    margin-top: -5px;
	}
	
	
	/*@media screen and (min-width: 1340px) {*/
	#mw-related-navigation .sidebar-inner label, #mw-related-navigation .sidebar-inner h3, #mw-site-navigation .sidebar-chunk label, #mw-site-navigation .sidebar-chunk h3 {
	    font-family: 'GothamSSm-Medium', sans-serif !important;
	    font-weight: 500!important;
	    font-size: 18px!important;
	    color: #fff!important;
	    border-bottom: 1px solid #262932!important;
	    padding: 10px 0!important;
	    margin: 0!important;
	    display: block;
	}
	#mw-related-navigation .sidebar-inner label, #mw-related-navigation .sidebar-inner h3:before, #mw-site-navigation .sidebar-chunk label, #mw-site-navigation .sidebar-chunk h3:before {
	    content: '--';
	    position: relative;
	    margin-right: 10px;
	    display: inline-block;
	    color: #ba6356;
	
	}
	/*}*/
	.sidebar-inner li a {
	    color: #fff!important;
	    background: #0f1116!important;
	    margin-bottom: 5px!important;
	    padding: 15px 25px!important;
	    font-size: 16px!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	}
	.sidebar-inner li a:hover {
	    color: #ba6356!important;
	}
	@media screen and (min-width: 851px) and (max-width: 1099px) {
	    #mw-header-nav-hack {
	        border-top: 1px solid #171a22!important;
	        display: block;
	        position: absolute;
	        z-index: 198;
	        background: #171920!important;
	        width: 100%;
	    }
	    #mw-site-navigation h2, #mw-related-navigation h2 {
	        font-weight: normal;
	        font-family: 'GothamSSm-Medium', sans-serif !important;
	        font-size: 16px!important;
	        cursor: pointer;
	        margin: -3px 0 -3px!important;
	        padding: 10px 0 !important;
	    }
	    #mw-site-navigation .sidebar-inner {
	        line-height: 1.125;
	        word-wrap: break-word;
	        font-size: 0.95em;
	        background: #0f1116!important;
	        box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05);
	        position: absolute;
	        padding: 20px 2em 0;
	        margin: 0;
	        min-width: 9.153em;
	        top: 3.1em!important;
	        left: -1em;
	        overflow: visible;
	        z-index: 50;
	        border: 1px solid #0f1116!important;
	    }
	    #mw-site-navigation .sidebar-chunk h2 span::before, #mw-site-navigation .sidebar-chunk h2 span::after {
	        transform: rotate(360deg);
	        border-bottom: 10px solid #0f1116!important;
	        border-left: 10px solid transparent;
	        border-right: 10px solid transparent;
	        content: '';
	        height: 0;
	        width: 0;
	        position: absolute;
	        right: 1em;
	        z-index: 51;
	    }
	    #mw-related-navigation .sidebar-inner {
	        line-height: 1.125;
	        word-wrap: break-word;
	        font-size: 0.95em;
	        background: #0f1116!important;
	        box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05);
	        position: absolute;
	        padding: 20px 2em 0;
	        margin: 0;
	        min-width: 9.153em;
	        right: -1em;
	        overflow: visible;
	        z-index: 50;
	        top: 3.1em!important;
	        border: 1px solid #0f1116!important;
	    }
	    #mw-related-navigation .sidebar-inner label, #mw-related-navigation .sidebar-inner h3, #mw-site-navigation .sidebar-chunk label, #mw-site-navigation .sidebar-chunk h3 {
	        font-size: 16px!important;
	    }
	    .sidebar-inner li a {
	        margin-left: -10px!important;
	        width: calc(100% - 10px)!important;
	        padding: 15px 15px!important;
	        font-size: 15px!important;
	        font-family: 'GothamSSm-Medium', sans-serif !important;
	        background: #171920!important;
	    }
	}
	
	@media screen and (min-width: 851px) {
	    #personal .dropdown {
	        line-height: 1.125;
	        word-wrap: break-word;
	        font-size: 0.95em;
	        background: #0f1116!important;
	        box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05);
	        position: absolute;
	        padding: 20px 2em 0;
	        margin: 0;
	        min-width: 9.153em;
	        top: 2.95em;
	        right: -1em;
	        overflow: visible;
	        z-index: 50;
	        border: 1px solid #0f1116!important;
	        width: 220px!important;
	    }
	    #personal .dropdown label, #personal .dropdown h3 {
	        font-weight: normal;
	        font-size: 1em;
	        margin: 0.25em 0 0.75em 0;
	        padding-bottom: 8px !important;
	        border-bottom: 1px solid #262932 !important;
	        font-family: 'GothamSSm-Light', sans-serif !important;
	        color: rgba(240,240,255,0.9)!important;
	        display: block;
	    }
	    #personal .dropdown label, #personal .dropdown h3:before {
	        content: '--';
	        position: relative;
	        margin-right: 10px;
	        display: inline-block;
	        color: #ba6356;
	    }
	}
	/*******************************
	 * MENU / SUBMENU
	 *******************************/
	
	/* Estilos da navegação principal */
	.sidebar-inner ul {
	    list-style: none;
	    padding: 0;
	    margin: 0;
	}
	
	.sidebar-inner li {
	    margin: 0;
	    padding: 0;
	}
	
	.sidebar-inner li a {
	    display: block;
	    padding: 8px 10px;
	    text-decoration: none;
	    color: #fff;
	}
	
	/* O <li> que terá o submenu */
	li.has-submenu {
	    position: relative;
	}
	li.has-submenu > a:after {
	    content: "▶";
	    font-size: 10px;
	    margin-left: 5px;
	}
	@media screen and (min-width: 1100px) and (max-width: 1339px) {
	    #mw-site-navigation {
	        overflow: visible!important;
	    }
	}
	/* Submenu estilizado */
	submenu {
	    position: absolute!important;
	    z-index: 1000!important;
	}
	ul.submenu {
	    display: none;
	    position: absolute!important;
	    left: 100%;
	    top: -10px;
	    background-color: #0f1116;
	    border-radius: 4px;
	    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
	    padding: 20px;
	    z-index: 1000!important;
	    width: 220px;
	    border: 1px solid #171a22;
	}
	
	/* Layout multi-coluna para submenus grandes */
	ul.submenu.multi-column {
	    width: auto;
	    min-width: 450px;
	    column-count: 2;
	    column-gap: 20px;
	}
	
	/* Para submenus muito grandes (como "Classes") */
	li.has-submenu:nth-child(2) > ul.submenu {
	    column-count: 3;
	    min-width: 600px;
	}
	
	/* Evita quebras inadequadas nas colunas */
	ul.submenu li {
	    break-inside: avoid;
	    page-break-inside: avoid;
	    display: block;
	    margin-bottom: 5px;
	}
	
	/* Exibe o submenu ao passar o mouse */
	li.has-submenu:hover > ul.submenu {
	    display: block;
	}
	
	/* Estiliza os links do submenu */
	.submenu {
	    padding: 20px!important;
	}
	.submenu li a {
	    padding: 10px 10px!important;
	    margin: 0!important;
	    display: block;
	    color: rgba(255, 255, 255, .5)!important;
	    transition: background-color 0.2s!important;
	    border-bottom: 1px solid #171a22!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	}
	
	.submenu li a:hover {
	    color: #fff!important;
	    border-bottom: 1px solid rgba(255, 255, 255, .5)!important;
	    text-shadow: 0 0 5px #fff!important;
	}
	
	/* Ajuste para dispositivos móveis */
	@media (max-width: 768px) {
	    /* Mudamos o comportamento dos submenus em mobile */
	    .sidebar-inner {
	        width: 100%;
	        overflow: hidden;
	    }
	
	    li.has-submenu {
	        position: static;
	    }
	
	    li.has-submenu > a:after {
	        content: "▼";
	    }
	
	    li.has-submenu:hover > ul.submenu {
	        display: none; /* Não mostra automaticamente no hover em mobile */
	    }
	
	    /* Usamos classes para controlar a exibição via JavaScript */
	    li.has-submenu.active > ul.submenu {
	        display: block;
	    }
	
	    li.has-submenu.active > a:after {
	        content: "▲";
	    }
	
	    /* Garantir que menus multicolunas voltem a uma coluna */
	    li.has-submenu:nth-child(2) > ul.submenu,
	    ul.submenu.multi-column {
	        column-count: 1;
	        min-width: auto!important;
	    }
	
	}
	
	@media screen and (min-width: 851px) and (max-width: 1099px) {
	    /* Estiliza os links do submenu */
	    .submenu {
	        padding: 20px!important;
	    }
	    .submenu li a {
	        background: transparent!important;
	    }
	
	    .submenu li a:hover {
	        color: #fff!important;
	        border-bottom: 1px solid rgba(255, 255, 255, .5)!important;
	        text-shadow: 0 0 5px #fff!important;
	    }
	}
	
	#mw-header-container {
	    background: #020307!important;
	    color: #6c757d!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	}
	#personal h2 span {
	    color: #6c757d!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    font-weight: 500!important;
	    font-variant: none!important;
	}
	#p-logo-text a {
	    color: #6c757d!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    font-weight: normal!important;
	    font-size: 1em!important;
	}
	#p-logo-text a:hover {
	    color: #ba6356!important;
	    text-decoration: none!important;
	}
	#p-logo-text a img {
	    margin-right: 3px!important;
	}
	
	#searchInput {
	    background: #0f1116!important;
	    color: #fff !important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    font-weight: 500!important;
	    border: 1px solid #0f1116!important;
	}
	
	#simpleSearch {
	    background: #0f1116!important;
	    color: #6c757d!important;
	    border: 1px solid #171a22 !important;
	}
	
	@media screen and (max-width: 850px) {
	    #p-logo-text {
	        position: absolute;
	        top: 0.4em!important;
	        left: 2em!important;
	        text-align: left;
	        width: 300px !important;
	    }
	    #menus-cover {
	        background: #0f1116!important;
	    }
	    .sidebar-inner, .dropdown {
	        display: none;
	        background: #0f1116!important;
	        border: 0px solid #171a22!important;
	        line-height: 100% !important;
	        word-wrap: break-word!important;
	        font-size: 0.95em!important;
	        box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05)!important;
	        position: absolute!important;
	        padding: 2em 2.5em 1em!important;
	        margin: 0!important;
	        min-width: 9.153em!important;
	        max-width: 60%!important;
	        top: 3em!important;
	        right: 0!important;
	        overflow: visible!important;
	        z-index: 350!important;
	    }
	    .sidebar-inner li, .dropdown li {
	        margin: 0px!important;
	        margin-bottom: 5px!important;
	    }
	    .sidebar-inner ul li a {
	        color: #fff !important;
	        background: #171920!important;
	        margin-bottom: 5px !important;
	        padding: 15px 25px !important;
	        font-size: 16px !important;
	        font-family: 'GothamSSm-Light', sans-serif !important;
	    }
	
	    .sidebar-inner ul li ul.submenu li {
	        margin-bottom: 0!important;
	    }
	
	    .sidebar-inner ul li ul.submenu li a {
	        color: rgba(255, 255, 255, 0.8) !important;
	        background: #171920!important;
	        margin-bottom: 2px !important;
	        padding: 10px 20px !important;
	        font-size: 16px !important;
	        font-family: 'GothamSSm-Light', sans-serif !important;
	    }
	
	    .sidebar-inner ul li ul.submenu li a:hover {
	        border-bottom: 0!important;
	        color: #fff!important;
	        text-shadow: 0 0 5px #fff!important;
	    }
	
	    ul.submenu {
	        display: none;
	        position: relative!important;
	        left: 0!important;
	        top: -10px;
	        background-color: #0f1116!important;
	        border-radius: 4px;
	        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
	        padding: 20px;
	        z-index: 1000!important;
	        width: calc(100% - 40px) !important;
	        border: 1px solid #171920!important;
	    }
	
	    /* Layout multi-coluna para submenus grandes */
	    ul.submenu.multi-column {
	        width: auto;
	        min-width: 450px;
	        column-count: 2;
	        column-gap: 20px;
	    }
	
	    ul.submenu .sidebar-inner li, .dropdown li {
	        padding: 0!important;
	        max-width: 100%!important;
	    }
	    #mw-content {
	        padding: 1em!important;
	        border-width: 0;
	        margin-top: 200px!important;
	    }
	    body {
	        background: #020307 url(https://wiki.vortanmu.com/images/20250321/167dd770c3e2b8.jpg) no-repeat top 1px center!important;
	    }
	}
	
	#mw-content-container {
	    background: #0f1116!important;
	    border-bottom: 1px solid #171a22!important;
	    padding-bottom: 30px!important;
	}
	#mw-content {
	    background: #171920!important;
	    border: 1px solid #171a22!important;
	    color: #6c757d!important;
	}
	.sidebar-chunk {
	    background: #171920!important;
	    border: 1px solid #171a22!important;
	    color: #6c757d!important;
	}
	.mw-footer-container {
	    background: #020307!important;
	    border-top: 1px solid #171a22!important;
	    border-bottom: 1px solid #171a22!important;
	}
	.tools-inline li.selected {
	    border-bottom:2px solid #a23e2f!important;
	}
	.tools-inline li.selected a {
	    color: #6c757d!important;
	}
	.sidebar-inner ul {
	    margin-top: 10px!important;
	    margin-bottom: 10px!important;
	}
	figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] {
	    background-color: #0f1116!important;
	    border: 1px solid #0f1116!important;
	}
	figure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption {
	    background-color: #0f1116!important;
	    border: 1px solid #0f1116!important;
	}
	figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element, figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
	    margin: 0.75em!important;
	    border: 1px solid #171a22!important;
	}
	.mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption, .mw-content-ltr figure[typeof~='mw:File/Frame'] > figcaption {
	    display: none!important;
	}
	.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after, .mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
	    right: 0.75em;
	    left: auto;
	    background: transparent!important;
	}
	.color-right {
	    background-image: linear-gradient(to right, #561f1f 0%, #a23e2f 100%)!important;
	    height: 0.35em!important;
	    width: 50%!important;
	    float: left;
	}
	.color-left {
	    height: 0.35em!important;
	    background-image: linear-gradient(to right, #a23e2f 0%, #561f1f 100%)!important;
	    width: 50%!important;
	    float: left;
	}
	.color-middle {
	    height: 0.35em;
	    background: transparent!important;
	    margin-left: 21em;
	    margin-right: 17em;
	}
	
	.mw-body dt {
	    font-weight: bold !important;
	    font-family: 'GothamSSm-Medium', sans-serif !important;
	}
	
	.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled {
	    margin-top: 10px!important;
	    background-color: #0f1116!important;
	    color: var(--color-base, #202122) !important;
	    border: 1px solid #171a22!important;
	}
	.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled img {
	    width: 201px!important;
	    height: 32px!important;
	}
	
	.wikitable {
	    background: transparent!important;
	    border-bottom: 0!important;
	}
	
	.wikitable > tr > th, .wikitable > * > tr > th {
	    background-color: #0f1116!important;
	    color: rgba(240,240,255,0.9)!important;
	    border: 1px solid #262932!important;
	    text-align: center;
	}
	
	.wikitable > tr > td, .wikitable > * > tr > td {
	    background-color: #15161c !important;
	    color: #6c757d!important;
	    border: 1px solid #262932!important;
	    text-align: center;
	}
	.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable {
	
	    color: rgba(240,240,255,0.9)!important;
	}
	
	.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable {
	    background-color: #0f1116!important;
	    border: 1px solid #262932!important;
	    padding: 1.25em 1.75em;
	}
	.oo-ui-panelLayout-framed {
	    background-color: #0f1116!important;
	    border: 1px solid #262932!important;
	    border-radius: 0!important;
	}
	.oo-ui-textInputWidget .oo-ui-inputWidget-input {
	    background: #171920 !important;
	    color: #fff !important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    font-weight: 500 !important;
	    border: 1px solid #262932 !important;
	    border-radius: 0 !important;
	}
	.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
	    background: #171920 !important;
	    color: #fff !important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    font-weight: 500 !important;
	    border: 1px solid #262932 !important;
	    border-radius: 0 !important;
	}
	.oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle {
	    color: var(--color-disabled, #72777d) !important;
	    background: #171920 !important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    font-weight: 500 !important;
	    border: 1px solid #262932 !important;
	    border-radius: 0 !important;
	}
	.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable {
	    background-color: rgba(15, 17, 22, 0.5) !important;
	    color: #6c757d!important;
	    border: 1px solid #262932!important;
	    padding: 1.25em 1.75em;
	}
	.oo-ui-tabSelectWidget-framed {
	    background-color: rgba(15, 17, 22, 0.5) !important;
	}
	.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
	    background: #171920 !important;
	    border-bottom: 1px solid #6c757d !important;
	    color: #fff !important;
	}
	.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
	    background: #171920 !important;
	    color: #fff !important;
	}
	.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
	    color: #6c757d!important;
	}
	.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget .oo-ui-labelElement-label:hover {
	    color: #fff!important;
	}
	.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
	    background-image: linear-gradient(to right, #561f1f 0%, #a23e2f 100%)!important;
	    border: 0!important;
	    color: #fff!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    font-weight: normal!important;
	}
	
	.mw-email-not-authenticated .oo-ui-labelWidget {
	    background-color: #262932;
	    border-color: #6c757d;
	    color: #ba6356!important;
	    width: 100% !important;
	}
	#preferences .mw-htmlform-submit-buttons {
	    -webkit-position: sticky;
	    position: sticky;
	    bottom: 0;
	    margin: -1px -1em -1em -1em;
	    padding: 1em;
	    background: #171920 !important;
	    border-top: 1px solid #262932 !important;
	    box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.25);
	}
	
	
	/* Estilo para telas pequenas (abaixo de 768px) */
	@media screen and (max-width: 767px) {
	    /* Primeiro, preparamos as tabelas para resposta móvel */
	    table, table thead, table tbody, table th, table td, table tr {
	        display: block!important;
	    }
	
	    /* Escondemos os cabeçalhos da tabela */
	    table thead tr {
	        position: absolute!important;
	        top: -9999px!important;
	        left: -9999px!important;
	    }
	
	    /* Configuração das linhas como cards */
	    table {
	        width: 100% !important;
	    }
	    table tr {
	        margin-bottom: 1rem!important;
	        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)!important;
	        width: 100% !important;
	    }
	
	    /* Configuração das células */
	    table th {
	        display: none!important;
	    }
	    table td:first-child {
	        position: relative!important;
	        padding-left: 50%!important;
	        text-align: right!important;
	        min-height: 30px!important;
	    }
	    table td {
	        position: relative!important;
	        padding-left: 50%!important;
	        text-align: right!important;
	        min-height: 30px!important;
	    }
	
	    /* Pseudo-elemento para mostrar os rótulos */
	    table td::before {
	        position: absolute!important;
	        left: 0.5rem!important;
	        width: 45%!important;
	        padding-right: 10px!important;
	        text-align: left!important;
	        font-weight: bold!important;
	        content: attr(data-label)!important;
	        font-size: 12px!important;
	        color: rgba(240, 240, 255, 0.9)!important;
	    }
	
	    /* Estilos específicos para tabelas infobox comuns em wikis */
	    .infobox, .wikitable, .sortable {
	        overflow: visible !important;
	        float: none !important;
	        width: 100% !important;
	    }
	}
	
	.mw-body-content a > img, .mw-body-content .floatnone > img {
	    padding: 10px!important;
	    border: 1px solid #262932!important;
	    background: #0f1116!important;
	    margin-top: 10px!important;
	    margin-bottom: 10px!important;
	    max-width: calc(100% - 20px)!important;
	}
	
	.mw-body-content table a > img, .mw-body-content figure a > img {
	    padding: 0!important;
	    border: 0!important;
	}
	
	.tools-inline div, .tools-inline div, .tools-inline ul, .tools-inline ul, .tools-inline li, .tools-inline li {
	    display: block!important;
	}
	
	#ca-viewsource, #ca-talk, #ca-nstab-main, #ca-unwatch {
	    display: none!important;
	}
	
	#ca-history, #ca-talk, #ca-nstab-main, #ca-unwatch {
	    display: none!important;
	}
	
	.uls-menu {
	    background: #0f1116!important;
	    border-top: 1px solid #262932 !important;
	    box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.25);
	}
	.uls-lcd {
	    background: transparent!important;
	    border: 1px solid #262932!important;
	}
	#uls-settings-block {
	    background: transparent!important;
	    border: 1px solid #262932!important;
	}
	.uls-search {
	    background-color: #0f1116!important;
	    border: 1px solid #262932!important;
	    color: #6c757d!important;
	}
	.uls-filterinput {
	    background-color: #0f1116!important;
	    color: #6c757d!important;
	}
	#uls-settings-block.uls-settings-block--vector-2022 > button.uls-language-settings-button {
	    background: #a23e2f url(/extensions/UniversalLanguageSelector/resources/images/cog.svg?ce0b4) no-repeat center!important;
	}
	.cdx-message--warning {
	    background: #171920!important;
	    border: 1px solid var(--border-color-warning, #987027)!important;
	    color: var(--color-warning, #987027)!important;
	}
	
	.wikiEditor-ui-toolbar {
	    background: #0f1116!important;
	    border: 1px solid #171a22!important;
	    color: #6c757d!important;
	}
	.wikiEditor-ui-toolbar .group {
	    border: 1px solid #171a22!important;
	}
	.oo-ui-icon-listBullet,
	.mw-ui-icon-listBullet:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M7 15h12v2H7zm0-6h12v2H7zm0-6h12v2H7z'/%3E%3Ccircle fill='%236c757d' cx='3' cy='4' r='2'/%3E%3Ccircle fill='%236c757d' cx='3' cy='10' r='2'/%3E%3Ccircle fill='%236c757d' cx='3' cy='16' r='2'/%3E%3C/svg%3E")!important;
	}
	.oo-ui-icon-listNumbered,
	.mw-ui-icon-listNumbered:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M7 15h12v2H7zm0-6h12v2H7zm0-6h12v2H7zM2 6h1V1H1v1h1zm1 9v1H2v1h1v1H1v1h3v-5H1v1zM1 8v1h2v1H1.5a.5.5 0 0 0-.5.5V13h3v-1H2v-1h1.5a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E")!important;
	}
	.oo-ui-icon-bold, .mw-ui-icon-bold:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M18 19h-4L5 5v14H2V1h5l8 13c-.02-.84 0-1 0-2V1h3z'/%3E%3C/svg%3E") !important;
	}
	.oo-ui-icon-italic, .mw-ui-icon-italic:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='m5 19 .33-1.51 2.17-.66 2.9-13.66-1.9-.63L9 1h7l-.71 1.6-2.29.57-2.83 13.66 2.14.66L12 19z'/%3E%3C/svg%3E") !important;
	}
	.oo-ui-icon-link, .mw-ui-icon-link:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M4.83 15h2.91a4.9 4.9 0 0 1-1.55-2H5a3 3 0 1 1 0-6h3a3 3 0 0 1 2.82 4h2.1a5 5 0 0 0 .08-.83v-.34A4.83 4.83 0 0 0 8.17 5H4.83A4.83 4.83 0 0 0 0 9.83v.34A4.83 4.83 0 0 0 4.83 15'/%3E%3Cpath fill='%236c757d' d='M15.17 5h-2.91a4.9 4.9 0 0 1 1.55 2H15a3 3 0 1 1 0 6h-3a3 3 0 0 1-2.82-4h-2.1a5 5 0 0 0-.08.83v.34A4.83 4.83 0 0 0 11.83 15h3.34A4.83 4.83 0 0 0 20 10.17v-.34A4.83 4.83 0 0 0 15.17 5'/%3E%3C/svg%3E") !important;
	}
	.oo-ui-icon-image, .mw-ui-icon-image:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M2 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-.17 13 4.09-5.25 2.92 3.51L12.92 8l5.25 7z'/%3E%3C/svg%3E") !important;
	}
	.oo-ui-icon-noWikiText, .mw-ui-icon-noWikiText:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M16 3v2h1v10l2 2V3zM9 5V3H5l2 2zM1 1 0 2l1 1v14h3v-2H3V5l2 2v10h4v-2H7V9l6 6h-2v2h4l3 3 1-1zm12 10 2 2V3h-4v2h2z'/%3E%3C/svg%3E") !important;
	}
	.oo-ui-icon-newline, .mw-ui-icon-newline:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M17 4v6H7V6l-6 5 6 5v-4h12V4z'/%3E%3C/svg%3E") !important;
	}
	.oo-ui-icon-bigger, .mw-ui-icon-bigger:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M14 18h-1.57a.66.66 0 0 1-.44-.13.9.9 0 0 1-.25-.34l-1-2.77H5.3l-1 2.77a.8.8 0 0 1-.24.32.65.65 0 0 1-.44.15H2L7 5.47h2zm-3.85-4.7L8.42 8.72A13 13 0 0 1 8 7.37q-.1.41-.21.75t-.21.6L5.85 13.3zM15 2l3 4h-6z'/%3E%3C/svg%3E") !important;
	}
	
	.oo-ui-icon-smaller, .mw-ui-icon-smaller:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M12 16h-1.05a.44.44 0 0 1-.29-.09.6.6 0 0 1-.17-.22l-.7-1.84H6.2l-.7 1.84a.56.56 0 0 1-.16.21.43.43 0 0 1-.29.1H4l3.31-8.35h1.38zm-2.57-3.13L8.28 9.82a9 9 0 0 1-.28-.9q-.06.27-.14.5l-.14.4-1.15 3zM15 6l3-4h-6z'/%3E%3C/svg%3E") !important;
	}
	
	.oo-ui-icon-superscript, .mw-ui-icon-superscript:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M18 1V0h-.5a1.5 1.5 0 0 0-1 .39 1.5 1.5 0 0 0-1-.39H15v1h.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5H15v1h.5a1.5 1.5 0 0 0 1-.39 1.5 1.5 0 0 0 1 .39h.5V8h-.5a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 .5-.5zm-4.32 15h-2.42a.67.67 0 0 1-.46-.15 1.3 1.3 0 0 1-.28-.34l-2.77-4.44a2.7 2.7 0 0 1-.28.69L5 15.51a2.2 2.2 0 0 1-.29.34.58.58 0 0 1-.42.15H2l4.15-6.19L2.17 4h2.42a.8.8 0 0 1 .41.09.8.8 0 0 1 .24.26L8 8.59a2.7 2.7 0 0 1 .33-.74L10.6 4.4a.69.69 0 0 1 .6-.4h2.32l-4 5.71z'/%3E%3C/svg%3E") !important;
	}
	
	.oo-ui-icon-subscript, .mw-ui-icon-subscript:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M13.68 16h-2.42a.67.67 0 0 1-.46-.15 1.3 1.3 0 0 1-.28-.34l-2.77-4.44a2.7 2.7 0 0 1-.28.69L5 15.51a2.2 2.2 0 0 1-.29.34.58.58 0 0 1-.42.15H2l4.15-6.19L2.17 4h2.42a.8.8 0 0 1 .41.09.8.8 0 0 1 .24.26L8 8.59a2.7 2.7 0 0 1 .33-.74L10.6 4.4a.69.69 0 0 1 .6-.4h2.32l-4 5.71zm3.82-4h.5v-1h-.5a1.5 1.5 0 0 0-1 .39 1.5 1.5 0 0 0-1-.39H15v1h.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5H15v1h.5a1.5 1.5 0 0 0 1-.39 1.5 1.5 0 0 0 1 .39h.5v-1h-.5a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E") !important;
	}
	.oo-ui-icon-bigger, .mw-ui-icon-bigger:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M14 18h-1.57a.66.66 0 0 1-.44-.13.9.9 0 0 1-.25-.34l-1-2.77H5.3l-1 2.77a.8.8 0 0 1-.24.32.65.65 0 0 1-.44.15H2L7 5.47h2zm-3.85-4.7L8.42 8.72A13 13 0 0 1 8 7.37q-.1.41-.21.75t-.21.6L5.85 13.3zM15 2l3 4h-6z'/%3E%3C/svg%3E") !important;
	}
	
	.oo-ui-icon-imageGallery, .mw-ui-icon-imageGallery:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M3 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 11 3.5-4.5 2.5 3 3.5-4.5 4.5 6zM16 2a2 2 0 0 1 2 2H2a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") !important;
	}
	.oo-ui-icon-articleRedirect, .mw-ui-icon-articleRedirect:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%236c757d%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E article redirect %3C/title%3E%3Cpath d=%22M5 1a2 2 0 0 0-2 2v1c0 5 2 8 7 8V9l5 4-5 4v-3c-3.18 0-5.51-.85-7-2.68V17a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z%22/%3E%3C/svg%3E") !important;
	}
	
	.oo-ui-icon-table, .mw-ui-icon-table:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%236c757d%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E table %3C/title%3E%3Cpath d=%22M2 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm0 4h7v4H2zm0 10v-4h7v4zm16 0h-7v-4h7zm0-6h-7V6h7z%22/%3E%3C/svg%3E") !important;
	}
	
	.oo-ui-icon-articleSearch, .mw-ui-icon-articleSearch:before {
	    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%236c757d%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E article search %3C/title%3E%3Cpath d=%22M12.43 14.34A5 5 0 0 1 10 15a5 5 0 1 1 3.95-2L17 16.09V3a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 1.45-.63z%22/%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E") !important;
	}
	.wikiEditor-ui-toolbar .group .tool-select .options {
	    background: #0f1116!important;
	    border: 1px solid #262932!important;
	}
	.wikiEditor-ui .wikiEditor-ui-top {
	    border: 1px solid #262932!important;
	}
	.wikiEditor-ui .wikiEditor-ui-view {
	    background: #171920!important;
	    border: 1px solid #262932!important;
	}
	.wikiEditor-ui-toolbar .sections .section {
	    border-top: 1px solid #262932!important;
	}
	.ext-WikiEditor-realtimepreview-textbox#wpTextbox1, .mw-editform .ext-WikiEditor-realtimepreview-textbox#wpTextbox1 {
	    background: #000!important;
	    color: #9e9e9e !important;
	    border: 1px solid #262932!important;
	}
	.mw-editform .editOptions {
	    background: #0f1116!important;
	    color: #6c757d!important;
	    border: 1px solid #262932!important;
	}
	.ext-WikiEditor-ResizingDragBar {
	    background-color: #0f1116!important;
	    border: 1px solid #262932!important;
	}
	.ext-WikiEditor-twopanes-TwoPaneLayout .ext-WikiEditor-twopanes-pane2 {
	    border: 1px solid #262932!important;
	}
	code, pre, .mw-code {
	    background: #0f1116!important;
	    color: rgba(255, 255, 255, 0.9)!important;
	    border: 1px solid #262932!important;
	    border-radius: 3px!important;
	}
	
	form input:not(.mw-widgets-datetime-dateTimeInputWidget-editField):not(.mw-history-compareselectedversions-button) {
	    background: #0f1116!important;
	    border: 1px solid #262932!important;
	    color: #6c757d!important;
	}
	form:not(.oo-ui-layout) textarea, form:not(.oo-ui-layout) input {
	    background: #0f1116!important;
	    border: 1px solid #262932!important;
	    color: #6c757d!important;
	}
	.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button, .oo-ui-textInputWidget .oo-ui-inputWidget-input, .oo-ui-dropdownWidget-handle, button, textarea, select {
	    background: #0f1116!important;
	    border: 1px solid #262932!important;
	    color: #6c757d!important;
	}
	form:not(.oo-ui-layout) button, form:not(.oo-ui-layout) input[type='submit'] {
	    background-image: linear-gradient(to right, #561f1f 0%, #a23e2f 100%)!important;
	    border: 0!important;
	    color: #fff!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    font-weight: normal!important;
	}
	#searchButton, #mw-searchButton {
	    position: absolute!important;
	    top: 0!important;
	    margin: 0!important;
	    padding: 0!important;
	    right: 1.5em!important;
	    width: 2.5em!important;
	    height: 2.5em!important;
	    text-indent: -99999px!important;
	    border: 0!important;
	    background-color: transparent!important;
	    background-repeat: no-repeat!important;
	    background-image: url(/skins/CustomTimeless/resources/images/search-ltr.svg?2df17)!important;
	    background-position: center 40%!important;
	    box-shadow: none!important;
	}
	.wikibox-monster {
	    background:#15161c !important;
	    border: 1px solid #262932!important;
	    padding:15px!important;
	    width:221px!important;
	    text-align:center!important;
	    text-transform: capitalize!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	}
	.wikibox-monster>p>span {
	    color:rgba(240, 240, 255, 0.9)!important;
	    font-weight:bold!important;
	    font-size:16px!important;
	    text-transform: initial!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	}
	.wikibox-monster>hr {
	    border: none!important;
	    border-top: 1px solid #262932!important;
	}
	.wikibox-monster>figure {
	    padding: 0px!important;
	}
	.wikibox-monster>figure>a>img {
	    padding: 0px!important;
	    border: 1px solid #262932!important;
	}
	.wikibox-monster>.content {
	    text-align:left!important;
	    font-size:12px!important;
	    color:RGBA(255,255,255,0.5)!important;
	    padding-top:10px!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	}
	.wikibox-monster>.level {
	    color:rgba(255,255,255,0.3)!important;
	    font-weight:bold!important;
	    padding-top:10px!important;
	    font-size: 16px!important;
	    text-transform: lowercase !important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	}
	.wikibox-monster>.level::first-letter {
	    text-transform: uppercase !important;
	}    /* Estilo para as seções de conteúdo */
	.nav-content {
	    display: none;
	}
	.show-content {
	    display: block;
	}
	/* Esconde os inputs radio */
	input[type="radio"] {
	    display: none;
	}
	/* Estilização dos labels que atuam como botões */
	.custom-nav label {
	    background-image: linear-gradient(to right, #561f1f 0%, #a23e2f 100%)!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    font-weight: normal!important;
	    color: #fff;
	    padding: 10px 20px;
	    margin-right: 5px;
	    cursor: pointer;
	    transition: background 0.3s;
	}
	.custom-nav label:hover {
	    background-image: linear-gradient(to right, rgba(86, 31, 31, 0.8) 0%, rgba(162, 62, 47, 0.8) 100%)!important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    font-weight: normal!important;
	}
	/* Estilo para os conteúdos */
	.content-section {
	    display: none;
	}
	/* Exibe o conteúdo correspondente quando o radio estiver selecionado */
	#nav-a:checked ~ #content-a,
	#nav-b:checked ~ #content-b,
	#nav-c:checked ~ #content-c,
	#nav-d:checked ~ #content-d,
	#nav-e:checked ~ #content-e,
	#nav-f:checked ~ #content-f,
	#nav-g:checked ~ #content-g,
	#nav-h:checked ~ #content-h,
	#nav-i:checked ~ #content-i,
	#nav-j:checked ~ #content-j,
	#nav-k:checked ~ #content-k,
	#nav-l:checked ~ #content-l,
	#nav-m:checked ~ #content-m{
	    display: block;
	}
	
	
	
	/* ======================================
	   SUBMENU MULTI-COLUNA - VERSÃO CORRIGIDA
	   ====================================== */
	
	/* Submenu básico */
	ul.submenu {
	    display: none;
	    position: absolute !important;
	    left: 100%;
	    top: -10px;
	    background-color: #0f1116;
	    border-radius: 4px;
	    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
	    padding: 20px;
	    z-index: 1000 !important;
	    border: 1px solid #171a22;
	
	    /* Configuração básica para colunas */
	    min-width: 250px;
	    max-width: 800px;
	    width: auto;
	
	    /* CSS Grid como fallback principal */
	    display: none; /* Escondido por padrão */
	    align-items: start;
	}
	
	/* Submenu com 2 colunas (7-12 itens) */
	ul.submenu.submenu-2-columns {
	    min-width: 450px;
	    column-count: 2;
	    column-gap: 20px;
	    column-fill: balance;
	
	    /* CSS Grid como alternativa */
	    display: none;
	    grid-template-columns: 1fr 1fr;
	}
	
	/* Submenu com 3 colunas (13-20 itens) */
	ul.submenu.submenu-3-columns {
	    min-width: 600px;
	    column-count: 3;
	    column-gap: 20px;
	    column-fill: balance;
	
	    /* CSS Grid como alternativa */
	    display: none;
	    grid-template-columns: 1fr 1fr 1fr;
	}
	
	/* Submenu com 4 colunas (21+ itens) */
	ul.submenu.submenu-4-columns {
	    min-width: 750px;
	    column-count: 4;
	    column-gap: 20px;
	    column-fill: balance;
	
	    /* CSS Grid como alternativa */
	    display: none;
	    grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	
	/* Força quebra de página adequada nos itens */
	ul.submenu li {
	    break-inside: avoid !important;
	    page-break-inside: avoid !important;
	    display: block !important;
	    margin-bottom: 5px;
	    width: 100%;
	
	    /* Para CSS Grid */
	    grid-column: auto;
	}
	
	/* Exibe o submenu ao passar o mouse */
	li.has-submenu:hover > ul.submenu {
	    display: block !important;
	}
	
	/* Para navegadores que suportam CSS Grid melhor */
	@supports (display: grid) {
	    ul.submenu.submenu-2-columns {
	        display: none; /* Reset */
	        column-count: unset;
	    }
	
	    ul.submenu.submenu-3-columns {
	        display: none; /* Reset */
	        column-count: unset;
	    }
	
	    ul.submenu.submenu-4-columns {
	        display: none; /* Reset */
	        column-count: unset;
	    }
	
	    li.has-submenu:hover > ul.submenu.submenu-2-columns {
	        display: grid !important;
	        grid-template-columns: 1fr 1fr;
	    }
	
	    li.has-submenu:hover > ul.submenu.submenu-3-columns {
	        display: grid !important;
	        grid-template-columns: 1fr 1fr 1fr;
	    }
	
	    li.has-submenu:hover > ul.submenu.submenu-4-columns {
	        display: grid !important;
	        grid-template-columns: 1fr 1fr 1fr 1fr;
	    }
	}
	
	/* Ajustes para telas médias */
	@media screen and (min-width: 851px) and (max-width: 1099px) {
	    ul.submenu.submenu-4-columns {
	        min-width: 600px;
	        column-count: 3;
	    }
	
	    ul.submenu.submenu-3-columns {
	        min-width: 500px;
	        column-count: 2;
	    }
	
	    @supports (display: grid) {
	        li.has-submenu:hover > ul.submenu.submenu-4-columns {
	            grid-template-columns: 1fr 1fr 1fr;
	        }
	
	        li.has-submenu:hover > ul.submenu.submenu-3-columns {
	            grid-template-columns: 1fr 1fr;
	        }
	    }
	}
	
	/* Ajustes para dispositivos móveis */
	@media (max-width: 850px) {
	    /* Em mobile, todos os submenus voltam para 1 coluna */
	    ul.submenu,
	    ul.submenu.submenu-2-columns,
	    ul.submenu.submenu-3-columns,
	    ul.submenu.submenu-4-columns {
	        column-count: 1 !important;
	        min-width: auto !important;
	        width: calc(100% - 40px) !important;
	        position: relative !important;
	        left: 0 !important;
	        max-width: none !important;
	    }
	
	    @supports (display: grid) {
	        li.has-submenu:hover > ul.submenu,
	        li.has-submenu.active > ul.submenu {
	            display: block !important;
	            grid-template-columns: none !important;
	        }
	    }
	
	    /* Comportamento móvel para submenus */
	    li.has-submenu:hover > ul.submenu {
	        display: none; /* Não mostra automaticamente no hover em mobile */
	    }
	
	    li.has-submenu.active > ul.submenu {
	        display: block !important;
	    }
	}
	
	/* Estilização dos links dos submenus */
	.submenu li a {
	    padding: 10px 10px !important;
	    margin: 0 !important;
	    display: block;
	    color: rgba(255, 255, 255, .5) !important;
	    transition: background-color 0.2s !important;
	    border-bottom: 1px solid #171a22 !important;
	    font-family: 'GothamSSm-Light', sans-serif !important;
	    text-decoration: none;
	    width: 100%;
	    box-sizing: border-box;
	}
	
	.submenu li a:hover {
	    color: #fff !important;
	    border-bottom: 1px solid rgba(255, 255, 255, .5) !important;
	    text-shadow: 0 0 5px #fff !important;
	    background-color: rgba(255, 255, 255, 0.05) !important;
	}
	
	/* Garantia adicional para forçar o layout em colunas */
	.force-columns ul.submenu.submenu-2-columns {
	    columns: 2;
	    column-gap: 20px;
	}
	
	.force-columns ul.submenu.submenu-3-columns {
	    columns: 3;
	    column-gap: 20px;
	}
	
	.force-columns ul.submenu.submenu-4-columns {
	    columns: 4;
	    column-gap: 20px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	.mw-guide-container {
	    max-width: 1200px;
	    margin: 0 auto;
	    background: #171920;
	    border-radius: 5px;
	}
	
	.mw-guide-title {
	    color: #ffffff;
	    border-bottom: 1px solid #a23e2f;
	    padding-bottom: 15px;
	    margin-bottom: 30px;
	    font-size: 24px;
	    font-weight: normal;
	}
	
	/* Grid de Guias */
	.mw-guide-grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	    gap: 10px;
	    padding: 0;
	}
	
	/* Item de Guia */
	.mw-guide-item {
	    display: flex;
	    align-items: center;
	    /*
	    background: #0f1116!important;
	    border: 1px solid #262932;
	    border-radius: 5px;
	    */
	    background: #15161c!important;
	    border: 1px solid #15161c;
	    padding: 15px;
	    transition: all 0.3s ease;
	    cursor: pointer;
	    text-decoration: none;
	    color: inherit;
	}
	
	.mw-guide-item:hover {
	    background: #1a1b22!important;
	    border: 1px solid #ba6356;
	    transform: translateY(-2px);
	    box-shadow: 0 4px 12px rgba(186, 99, 86, 0.2);
	}
	
	.mw-guide-item:hover .mw-guide-text {
	    color: #ba6356;
	}
	
	/* Ícone do Guia */
	.mw-guide-icon {
	    width: 48px;
	    height: 48px;
	    margin-right: 15px;
	    flex-shrink: 0;
	    background-size: contain;
	    background-repeat: no-repeat;
	    background-position: center;
	}
	
	/* Texto do Guia */
	.mw-guide-text {
	    color: #9e9e9e;
	    font-size: 16px;
	    transition: color 0.3s ease;
	    text-decoration: none;
	}
	.mw-guide-icon {
	    width: 48px;
	    height: 48px;
	    margin-right: 15px;
	    flex-shrink: 0;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 32px;
	}
	
	/* Responsividade para os ícones */
	@media (max-width: 768px) {
	    .mw-guide-icon {
	        width: 40px;
	        height: 40px;
	        margin-right: 12px;
	        font-size: 24px;
	    }
	}
	
	@media (max-width: 480px) {
	    .mw-guide-icon {
	        width: 36px;
	        height: 36px;
	        margin-right: 10px;
	        font-size: 20px;
	    }
	}
	
	/* Responsividade */
	@media (max-width: 768px) {
	    .mw-guide-container {
	        padding: 20px;
	        margin: 10px;
	    }
	
	    .mw-guide-grid {
	        grid-template-columns: 1fr;
	        gap: 15px;
	    }
	
	    .mw-guide-item {
	        padding: 12px;
	    }
	
	    .mw-guide-icon {
	        width: 40px;
	        height: 40px;
	        margin-right: 12px;
	    }
	
	    .mw-guide-icon::before {
	        font-size: 24px !important;
	        line-height: 40px !important;
	    }
	
	    .mw-guide-text {
	        font-size: 14px;
	    }
	
	    .mw-guide-title {
	        font-size: 20px;
	        padding-bottom: 12px;
	        margin-bottom: 20px;
	    }
	}
	
	@media (max-width: 480px) {
	    .mw-guide-grid {
	        grid-template-columns: 1fr;
	    }
	
	    .mw-guide-item {
	        padding: 10px;
	    }
	
	    .mw-guide-icon {
	        width: 36px;
	        height: 36px;
	        margin-right: 10px;
	    }
	
	    .mw-guide-icon::before {
	        font-size: 20px !important;
	        line-height: 36px !important;
	    }
	
	    .mw-guide-text {
	        font-size: 13px;
	    }
	}
	
	/* Links sem decoração padrão */
	a.mw-guide-item {
	    text-decoration: none;
	}
	
	a.mw-guide-item:visited {
	    color: inherit;
	}
	
	
	/* CSS para Cards com Imagem e Texto - MediaWiki - 5 COLUNAS */
	
	.mw-image-container {
	    max-width: 1200px;
	    margin: 0 auto;
	    background: #171920;
	}
	
	.mw-image-title {
	    color: #ffffff;
	    border-bottom: 1px solid #a23e2f;
	    padding-bottom: 15px;
	    margin-bottom: 30px;
	    font-size: 24px;
	    font-weight: normal;
	}
	
	/* Grid de Cards com Imagem - ALTERADO PARA 5 COLUNAS */
	.mw-image-grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* REDUZIDO de 300px para 220px */
	    gap: 10px;
	    padding: 0;
	}
	
	/* ALTERNATIVA: Forçar exatamente 5 colunas (opcional) */
	/*
	.mw-image-grid {
	    display: grid;
	    grid-template-columns: repeat(5, 1fr);
	    gap: 10px;
	    padding: 0;
	}
	*/
	
	/* Card Individual */
	.mw-image-card {
	    background: #15161c!important;
	    border: 1px solid #262932;
	    overflow: hidden;
	    transition: all 0.3s ease;
	    cursor: pointer;
	    text-decoration: none;
	    color: inherit;
	    display: block;
	}
	
	.mw-image-card:hover {
	    background: #1a1b22;
	    border-color: #ba6356;
	    transform: translateY(-5px);
	    box-shadow: 0 8px 25px rgba(186, 99, 86, 0.3);
	}
	
	.mw-image-card:hover .mw-card-text {
	    color: #ba6356;
	}
	
	/* Área da Imagem */
	.mw-card-image {
	    width: 100%;
	    height: 140px; /* REDUZIDO de 170px para 140px para caber melhor */
	    overflow: hidden;
	    position: relative;
	    background: #15161c!important;
	}
	
	.mw-card-image img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    transition: transform 0.3s ease;
	}
	
	.mw-image-card:hover .mw-card-image img {
	    transform: scale(1.05);
	}
	
	/* Área do Texto */
	.mw-card-text {
	    padding: 15px; /* REDUZIDO de 20px para 15px */
	    text-align: center;
	    color: #9e9e9e;
	    font-size: 14px; /* REDUZIDO de 16px para 14px */
	    transition: color 0.3s ease;
	    text-decoration: none;
	    display: block;
	    line-height: 1.3; /* ADICIONADO para melhor espaçamento */
	}
	
	/* Placeholder para imagens que não carregaram */
	.mw-card-image::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background: inherit;
	    z-index: 1;
	}
	
	.mw-card-image img {
	    position: relative;
	    z-index: 2;
	}
	
	/* Responsividade ATUALIZADA para 5 colunas */
	@media (max-width: 1200px) {
	    .mw-image-grid {
	        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 4 colunas */
	    }
	}
	
	@media (max-width: 900px) {
	    .mw-image-container {
	        padding: 20px;
	        margin: 10px;
	    }
	
	    .mw-image-grid {
	        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 3 colunas */
	        gap: 15px;
	    }
	
	    .mw-card-image {
	        height: 120px;
	    }
	
	    .mw-card-text {
	        padding: 12px;
	        font-size: 13px;
	    }
	
	    .mw-image-title {
	        font-size: 20px;
	        padding-bottom: 12px;
	        margin-bottom: 20px;
	    }
	}
	
	@media (max-width: 600px) {
	    .mw-image-grid {
	        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 2 colunas */
	        gap: 12px;
	    }
	
	    .mw-card-image {
	        height: 100px;
	    }
	
	    .mw-card-text {
	        padding: 10px;
	        font-size: 12px;
	    }
	}
	
	@media (max-width: 400px) {
	    .mw-image-grid {
	        grid-template-columns: 1fr; /* 1 coluna */
	        gap: 15px;
	    }
	
	    .mw-card-image {
	        height: 120px;
	    }
	
	    .mw-card-text {
	        padding: 12px;
	        font-size: 14px;
	    }
	}
	
	/* Links sem decoração padrão */
	a.mw-image-card {
	    text-decoration: none;
	}
	
	a.mw-image-card:visited {
	    color: inherit;
	}
	
	a.mw-image-card:visited .mw-card-text {
	    color: #9e9e9e;
	}
	
	/* Efeito de loading para imagens */
	.mw-card-image.loading::after {
	    content: '⚡';
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    font-size: 32px; /* REDUZIDO de 48px para 32px */
	    color: rgba(255, 255, 255, 0.5);
	    z-index: 3;
	    animation: pulse 2s infinite;
	}
	
	@keyframes pulse {
	    0%, 100% { opacity: 0.5; }
	    50% { opacity: 1; }
	}
	
	/* ==============================================
	   CLASSE ALTERNATIVA PARA FORÇAR 5 COLUNAS EXATAS
	   Use .mw-image-grid-5col em vez de .mw-image-grid
	   ============================================== */
	
	.mw-image-grid-5col {
	    display: grid;
	    grid-template-columns: repeat(5, 1fr); /* SEMPRE 5 colunas */
	    gap: 10px;
	    padding: 0;
	}
	
	@media (max-width: 1200px) {
	    .mw-image-grid-5col {
	        grid-template-columns: repeat(4, 1fr); /* 4 colunas */
	    }
	}
	
	@media (max-width: 900px) {
	    .mw-image-grid-5col {
	        grid-template-columns: repeat(3, 1fr); /* 3 colunas */
	    }
	}
	
	@media (max-width: 600px) {
	    .mw-image-grid-5col {
	        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
	    }
	}
	
	@media (max-width: 400px) {
	    .mw-image-grid-5col {
	        grid-template-columns: 1fr; /* 1 coluna */
	    }
	}}
/* 1.1 Largura máxima e centralização da coluna principal */
#mw-content-wrapper {
  max-width: 1200px;     /* ajuste conforme achar melhor (ex.: 1100–1250px) */
  margin-left: 18px;    /* deixa espaço para a sidebar; combine com a largura da barra */
  margin-right: auto;
  padding-right: 0px;   /* um respiro à direita */
}

/* 1.2 Tamanho e peso dos títulos principais */
.mw-body h1.firstHeading {
  font-size: 36px;       /* RealMU usa algo em torno de 32–36px */
  font-weight: normal;   /* mantém o visual clean */
  line-height: 1.2;
}

/* 1.3 Logotipo menor e com margem */
.mw-wiki-logo.timeless-logo img {
  max-width: 230px;      /* ajuste de acordo com o tamanho do seu logotipo */
  height: auto;
  margin: 3em 0 1.5em;   /* espaçamento superior semelhante ao RealMU */
}

/* 1.4 Ajuste da navegação lateral – remove bullets e garante largura uniforme */
#mw-site-navigation ul, #site-navigation ul,
#mw-site-navigation .sidebar-inner ul,
#site-navigation .sidebar-inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* --- Mega-menu para a sidebar Timeless --- */
#site-navigation .sidebar-inner { position: relative; overflow: visible; }
#site-navigation .mw-portlet { position: relative; z-index: 3; }

/* Botão (título da categoria). Mantém seu estilo e só acrescenta a seta. */
#site-navigation h3.has-mega {
  position: relative;
  padding-right: 18px;   /* espaço para a seta */
  cursor: pointer;
  transition: color .15s ease; /* para o "avermelhado" suave */
}
/* Hover “vermelhinho” no título da categoria (sem afetar os itens) */
#site-navigation h3.has-mega:hover { color: #ff5a5a !important; }

/* Seta fechada/aberta */
#site-navigation h3.has-mega::after {
  content: "▸";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8rem;
  color: rgba(240,240,255,.75);
}
#site-navigation h3.has-mega.active::after { content: "▾"; }

/* Painel do mega-menu */
#site-navigation ul.submenu {
  position: absolute;
  left: 240px;   /* JS recalibra isso; aqui é um default */
  top: 0;
  display: none;
  z-index: 1000;
  min-width: 780px;
  max-width: 980px;
  padding: 18px 22px;
  background: #151820;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  column-gap: 48px;
}

/* Itens do painel (colunas) */
#site-navigation ul.submenu li {
  break-inside: avoid;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
#site-navigation ul.submenu li:first-child { border-top: 0; }
#site-navigation ul.submenu a {
  display: block;
  text-decoration: none;
  padding: 2px 8px 2px 0;
}

/* Contagem automática de colunas */
#site-navigation .submenu-2-columns { column-count: 2; }
#site-navigation .submenu-3-columns { column-count: 3; }
#site-navigation .submenu-4-columns { column-count: 4; }

/* === Botões das CATEGORIAS como no RealMU (h3 vira "botão") === */
#site-navigation .mw-portlet > h3.has-mega,
#mw-site-navigation .mw-portlet > h3.has-mega{
  /* zera o estilo de heading que o tema coloca */
  border: 0 !important;
  padding: 15px 28px 15px 25px !important; /* espaço extra à direita p/ seta */
  margin: 0 0 10px 0 !important;
  display: block;
  background: #0f1116 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-family: 'GothamSSm-Light', sans-serif !important;
  line-height: 1.3;
  text-decoration: none !important;
  position: relative;
  cursor: pointer;
}

/* remove o “--” decorativo dos h3 do tema nesta área */
#site-navigation .mw-portlet > h3.has-mega::before,
#mw-site-navigation .mw-portlet > h3.has-mega::before{
  content: none !important;
}

/* seta fechada/aberta à direita do botão */
#site-navigation .mw-portlet > h3.has-mega::after,
#mw-site-navigation .mw-portlet > h3.has-mega::after{
  content: "▸";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8rem;
  color: rgba(240,240,255,.75);
}
#site-navigation .mw-portlet > h3.has-mega.active::after,
#mw-site-navigation .mw-portlet > h3.has-mega.active::after{
  content: "▾";
}

/* hover “vermelhinho” igual aos links da sidebar */
#site-navigation .mw-portlet > h3.has-mega:hover,
#mw-site-navigation .mw-portlet > h3.has-mega:hover{
  color: #ba6356 !important;
}

/* === Painel de subcategorias (mantém o que já está ok) === */
#site-navigation ul.mm-submenu{
  position: absolute;
  left: 240px;                /* o JS recalibra; aqui é só um default */
  top: 0;
  display: none;
  z-index: 1000;
  min-width: 780px;
  max-width: 980px;
  padding: 18px 22px;
  background: #151820;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  column-gap: 48px;
}
#site-navigation ul.mm-submenu li{
  break-inside: avoid;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
#site-navigation ul.mm-submenu li:first-child{ border-top: 0; }
#site-navigation ul.mm-submenu a{
  display: block;
  padding: 2px 8px 2px 0;
  color: rgba(255,255,255,.75);
  text-decoration: none;
}
#site-navigation ul.mm-submenu a:hover{
  color: #fff;
  text-shadow: 0 0 5px #fff;
}

/* colunas dinâmicas (seguindo as classes do teu JS atual: mm-2/mm-3/mm-4) */
#site-navigation .mm-2{ column-count: 2; }
#site-navigation .mm-3{ column-count: 3; }
#site-navigation .mm-4{ column-count: 4; }

/* responsivo: no mobile o painel vira bloco abaixo */
@media (max-width:850px){
  #site-navigation ul.mm-submenu{
    position: relative;
    left: 0;
    min-width: auto;
    max-width: none;
    width: calc(100% - 40px);
    margin: 10px 20px 0;
    column-count: 1;
    box-shadow: none;
  }
}