Mudanças entre as edições de "MediaWiki:Common.css"

De Wiki Gla
Ir para navegação Ir para pesquisar
(Criou página com '→‎* o código CSS colocado aqui será aplicado a todos os temas: →‎Consistent size for <small>, <sub> and <sup>: small { font-size: 85%; } .mw-body-content sub, .mw-bo...')
 
m
 
Linha 1: Linha 1:
/** o código CSS colocado aqui será aplicado a todos os temas */
/* CSS placed here will be applied to all skins */


/* Consistent size for <small>, <sub> and <sup> */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600;700&family=Source+Sans+3:wght@600;700&display=swap');
small {
 
font-size: 85%;
/* GLA palette — Direção A (atmosfera) */
:root {
  /* ---- LIGHT ---- */
  --gla-page-bg: #C4CED8;
  --gla-surface: #ECF0F4;
  --gla-surface-alt: #DFE6EE;
  --gla-border: #AEBBC6;
  --gla-tab-inactive: #D0DAE3;
  --gla-link: #1D5CA8;
  --gla-accent: #2F6FE0;
  /* compat */
  --gla-chrome-border: var(--gla-border);
 
  /* ---- DARK (Direção A) — cores diretas, sem filter invert ---- */
  --gla-dark-bg: #060708;
  --gla-dark-chrome: #272728;
  --gla-dark-chrome-panel: #353a42;
  --gla-dark-tab-inactive: #3a3d42;
  /* compat: nomes antigos apontam para as mesmas cores finais */
  --gla-dark-preinvert: var(--gla-dark-chrome);
  --gla-dark-panel-preinvert: var(--gla-dark-chrome-panel);
  /* #content */
  --gla-dark-content-bg: #2a2d32;
  --gla-dark-content-panel: #353a42;
  --gla-dark-text: #d7d5cf;
  --gla-dark-heading: #e6e4dd;
  --gla-dark-border: #aaaaaa;
  --gla-dark-link: #6ba8dc;
  --gla-dark-link-visited: #a898d4;
 
  /* Sidebar nav caps */
  --gla-nav-accent: var(--gla-accent, #2F6FE0);
  --gla-nav-accent-2: #1D5CA8;
  --gla-nav-cap: #D3DCE6;
  --gla-nav-panel: var(--gla-surface-alt, #DFE6EE);
  --gla-nav-border: var(--gla-border, #AEBBC6);
  --gla-nav-ink: #34465C;
  --gla-nav-link: var(--gla-link, #1D5CA8);
  --gla-nav-shadow: rgba(20, 34, 56, 0.16);
  --gla-nav-cap-dark: #bcbec4;
  --gla-nav-panel-dark: #c4c6cc;
  --gla-nav-ink-dark: #15181d;
  --gla-nav-font: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --gla-nav-link-font: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --gla-nav-link-size: 14px;
}
 
/* Sidebar START — Discord grande + redes (estilo vampire.survivors.wiki) */
 
#p-logo {
  margin-bottom: 14px;
}
 
#p-Navigation .vector-menu-content-list {
  display: block;
}
 
#p-Navigation .vector-menu-content-list li {
  display: list-item;
  float: none;
  width: auto;
}
 
#n-recentchanges,
#n-randompage {
  display: list-item;
}
 
/* --- Discord (portal próprio, botão largo) --- */
#p-Discord-label {
  display: none;
}
 
#p-Discord.vector-menu-portal {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0 8px 0 5px;
  padding: 0;
}
 
#p-Discord .vector-menu-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
 
#n-Discord {
  font-size: 12px;
  line-height: 1;
  list-style: none;
  margin: 0;
  width: 100%;
}
 
#n-Discord a {
  color: #fff !important;
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid #4c57d0;
  background-color: #5865f2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  position: relative;
  line-height: 1;
  padding: 7px 8px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
  box-sizing: border-box;
  width: 100%;
  min-height: 32px;
  white-space: nowrap;
  text-align: center;
}
 
#n-Discord a::before {
  content: none;
}
 
#n-Discord .gla-discord-icon {
  flex-shrink: 0;
  display: block;
  width: 16px;
  height: 12px;
  background: url('https://wiki.gla.com.br/images/e/e9/Discord-icon.png') no-repeat center center;
  background-size: 16px 12px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}
 
#n-Discord .gla-discord-text {
  display: inline-block;
  font-weight: normal;
  line-height: 1;
  transform: translateY(1px);
}
 
#n-Discord .gla-discord-text strong {
  font-weight: bold;
}
 
#n-Discord a::after {
  content: none;
  display: none;
}
 
#n-Discord:hover a {
  text-decoration: none !important;
  background-color: #7885ff;
  border-color: #6c77f0;
}
 
/* --- Instagram + TikTok (ícones menores) --- */
#p-Redes-label {
  display: none;
}
 
#p-Redes.vector-menu-portal {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0 8px 12px 5px;
  padding: 0;
}
 
#p-Redes .vector-menu-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
 
#p-Redes .vector-menu-content-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc((100% - 4 * 35px) / 3);
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
 
#p-Redes .vector-menu-content-list li {
  list-style: none;
  margin: 0;
  flex: 0 0 auto;
}
 
#p-Redes .vector-menu-content-list a {
  display: block;
  font-size: 0;
  line-height: 0;
  padding: 0;
  color: transparent !important;
  text-decoration: none !important;
}
 
#n-Instagram a::before,
#n-TikTok a::before,
#n-YouTube a::before,
#n-Facebook a::before {
  content: ' ';
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 15%;
  overflow: hidden;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
 
#n-Instagram a::before {
  background-image: url('https://wiki.gla.com.br/images/8/8a/Instagram-icon.png');
}
 
#n-TikTok a::before {
  background-image: url('https://wiki.gla.com.br/images/6/6e/Tiktok-icon.png');
}
 
#n-YouTube a::before {
  background-image: url('https://wiki.gla.com.br/images/0/03/Youtube-icon.png');
}
 
#n-Facebook a::before {
  background-image: url('https://wiki.gla.com.br/images/d/dd/Facebook-icon.png');
}
 
#p-Redes .vector-menu-content-list span {
  display: none;
}
 
#p-Redes .vector-menu-content-list a:hover {
  filter: brightness(1.15);
  text-decoration: none !important;
}
 
.client-darkmode #n-Discord a,
.skin-theme-clientpref-night #n-Discord a {
  color: #fff !important;
  background-color: #5865f2;
  border-color: #4c57d0;
}
 
.client-darkmode #n-Discord:hover a,
.skin-theme-clientpref-night #n-Discord:hover a {
  color: #fff !important;
  background-color: #7885ff;
  border-color: #6c77f0;
}
 
/* Sidebar END */
/* Changes applied to the vector skin for all users */
/* Try to use only for things "outside" the content, prefer a more specific .css file for other features */
 
/* GLA site background — PNG + fallback page-bg (não branco do browser) */
html {
  background-color: var(--gla-page-bg, #C4CED8);
}
 
html.client-darkmode,
html.skin-theme-clientpref-night {
  background-color: var(--gla-dark-bg, #060708);
}
 
body {
  background-color: transparent;
  background-image: none;
}
 
/* Camada sólida atrás da PNG — transparente da arte mostra page-bg, não #fff */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--gla-page-bg, #C4CED8);
}
 
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--gla-page-bg, #C4CED8);
  background-image: url(https://wiki.gla.com.br/images/c/c1/Water7Background.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  background-attachment: fixed;
  filter: none !important;
  -webkit-filter: none !important;
}
 
/* Dark: PNG invertida — 100% auto (arte no topo, preto embaixo) */
html.client-darkmode::before,
html.skin-theme-clientpref-night::before {
  background-color: var(--gla-dark-bg, #060708);
  background-image: url(https://wiki.gla.com.br/images/2/2b/Water7Background_Inverted.png) !important;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: none !important;
  -webkit-filter: none !important;
}
 
html.client-darkmode,
html.skin-theme-clientpref-night,
html.client-darkmode::after,
html.skin-theme-clientpref-night::after {
  filter: none !important;
  -webkit-filter: none !important;
}
 
/* Dark: fallback atrás da PNG (fora do filter do body) — classe está no próprio html */
html.client-darkmode::after,
html.skin-theme-clientpref-night::after {
  background-color: var(--gla-dark-bg, #060708);
}
 
@media (max-width: 768px) {
  html::before {
    background-attachment: scroll;
  }
}
 
#mw-page-base {
  background-image: none;
  background-color: rgba(0, 0, 0, 0);
}
 
#mw-head div.vectorMenu h3 {
  background-image: none;
}
 
div.vectorMenu h3 span {
  padding-top: 1em;
}
 
div.vectorTabs {
  border-top: 1px solid var(--gla-border);
  height: 2.2em;
}
 
div.vectorTabs li a {
  height: 1.95em;
}
 
div.vectorTabs span a {
  padding-top: 0.8em;
}
 
#p-personal {
  top: 0;
  right: 0;
  background-color: var(--gla-surface-alt);
  padding: 0.15em 0.75em 0.15em 0;
  border-radius: 0 0 0 5px;
  display: flex;
  align-items: center;
  min-height: 2em;
  box-sizing: border-box;
}
}


.mw-body-content sub,
#p-personal ul {
.mw-body-content sup,
  padding-left: 0;
span.reference /* para Parsoid */ {
font-size: 80%;
}
}


/* Don't display some stuff on the main page */
#p-personal .vector-menu-content-list {
body.page-Wikipédia_Página_principal #t-cite,
  align-items: center !important;
body.page-Wikipédia_Página_principal #lastmod,
body.page-Wikipédia_Página_principal #siteSub,
body.page-Wikipédia_Página_principal #contentSub,
body.page-Wikipédia_Página_principal h1.firstHeading {
display: none !important;
}
}


/* Reduzir saltos de página ao esconder conteúdo recolhido/dispensado */
#p-personal li {
.client-js .mw-special-Watchlist #watchlist-message,
  float: none;
.client-js .NavFrame.collapsed .NavContent,
  padding-top: 0 !important;
.client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child) {
  margin-left: 0.75em;
display: none;
  line-height: 1.35;
  display: flex;
  align-items: center;
}
}


/* Criação de tópicos nas esplanadas "geral" e "propostas" */
/* Remove ícone de avatar do Vector em Admin / anon */
/* Formata o aviso */
#pt-userpage a,
div.aviso-novo-item-esplanada {
#pt-anonuserpage {
font-style: italic;
  background-image: none !important;
  background-size: 0 !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
}
}


/* Oculta ligação vermelha durante a criação dos tópicos */
#pt-userpage {
div.aviso-novo-item-esplanada + p>a.new {
  padding-top: 0 !important;
display:none;
}
}


/* Resultados de busca */
#p-logo {
.mw-search-results {
  padding-top: 0;
margin-left: 0;
}
}


.mw-search-results li {
#content {
margin: 0;
  box-shadow: rgba(0, 0, 0, 0.15) 0 0.1em 0.75em;
padding: 0.35em 1em;
  background-color: var(--gla-surface);
border-bottom: 1px solid #d3daed;
  background-image: none;
background-color: #f6f8fc;
  margin-top: -1px;
list-style-type: none;
  border: 1px solid var(--gla-border);
list-style-image: none;
  border-right-width: 0;
}
}


/* Modelos de predefinições */
#firstHeading,
h1.firstHeading {
  border-bottom: 0 !important;
  margin-bottom: 0.25em;
  padding-bottom: 0;
  font-family: var(--gla-nav-font);
  color: inherit;
}


/* infobox */
/* Home: fade sólido no topo → transparente (mesmo visual no dark — conteúdo não escurece) */
.infobox {
body.page-Main_Page #content.mw-body,
border: 1px solid #a2a9b1;
body.page-Página_principal #content.mw-body {
border-spacing: 3px;
  background-color: var(--gla-surface);
background-color: #f8f9fa;
  background-image: linear-gradient(to bottom, var(--gla-surface) 0%, rgba(236, 240, 244, 0.92) 120px, rgba(196, 206, 216, 0) 520px);
color: black;
  background-position: center top;
/* @noflip */
  background-repeat: no-repeat;
margin: 0.5em 0 0.5em 1em;
  background-size: 100% 520px;
padding: 0.2em;
  background-attachment: scroll;
/* @noflip */
float: right;
/* @noflip */
clear: right;
font-size: 88%;
line-height: 1.5em;
}
}


.infobox td,
#simpleSearch {
.infobox th {
  margin-top: 0.35em;
vertical-align: top;
/* @noflip */
text-align: left;
}
}


.infobox caption {
#p-personal {
font-size: 125%;
  text-shadow: 0 0 2px #FEFEFE, 0 0 4px var(--gla-surface-alt);
font-weight: bold;
padding: 0.2em;
text-align: center;
}
}


.infobox.bordered {
#pt-anonuserpage {
border-collapse: collapse;
  margin-bottom: 0.8em;
}
}


.infobox.bordered td,
/* Fix the More Tab and SearchBar — chrome completo no bloco GLA chrome (final do common.css) */
.infobox.bordered th {
#p-search,
border: 1px solid #a2a9b1;
#p-cactions {
  background-image: none;
}
}


.infobox.sisterproject {
/* Background Ends Here */
width: 20em;
/* =============================================================================
font-size: 90%;
  Dark mode — Direção A (sem filter invert)
  • html::before: PNG escura (Water7Background_Inverted.png)
  • Chrome + #content: cores explícitas — logo/imagens ficam normais
  ============================================================================= */
 
.darkmode-link:before {
  content: none;
  display: none;
}
}


.infobox.standard-talk {
.client-darkmode body,
border: 1px solid #c0c090;
.skin-theme-clientpref-night body {
background-color: #f8eaba;
  filter: none !important;
  -webkit-filter: none !important;
  color: var(--gla-dark-text);
}
}


.infobox.standard-talk.bordered td,
.client-darkmode #content.mw-body,
.infobox.standard-talk.bordered th {
.skin-theme-clientpref-night #content.mw-body {
border: 1px solid #c0c090;
  background-color: var(--gla-dark-content-bg) !important;
  color: var(--gla-dark-text) !important;
  border-color: var(--gla-dark-border) !important;
}
}


/* Estilos para infocaixa com bordas com linhas fundidas */
.client-darkmode body.page-Main_Page #content.mw-body,
.infobox.bordered .mergedtoprow td,
.skin-theme-clientpref-night body.page-Main_Page #content.mw-body,
.infobox.bordered .mergedtoprow th {
.client-darkmode body.page-Página_principal #content.mw-body,
border: 0;
.skin-theme-clientpref-night body.page-Página_principal #content.mw-body {
border-top: 1px solid #a2a9b1;
  background-color: var(--gla-dark-content-bg) !important;
/* @noflip */
  background-image: linear-gradient(to bottom,
border-right: 1px solid #a2a9b1;
      var(--gla-dark-content-bg) 0%,
      rgba(42, 45, 50, 0.92) 120px,
      rgba(6, 7, 8, 0) 520px) !important;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 520px;
  background-attachment: scroll;
}
}


.infobox.bordered .mergedrow td,
.client-darkmode #content.mw-body h1,
.infobox.bordered .mergedrow th {
.client-darkmode #content.mw-body h2,
border: 0;
.client-darkmode #content.mw-body h3,
/* @noflip */
.client-darkmode #content.mw-body h4,
border-right: 1px solid #a2a9b1;
.client-darkmode #content.mw-body h5,
.client-darkmode #content.mw-body h6,
.skin-theme-clientpref-night #content.mw-body h1,
.skin-theme-clientpref-night #content.mw-body h2,
.skin-theme-clientpref-night #content.mw-body h3,
.skin-theme-clientpref-night #content.mw-body h4,
.skin-theme-clientpref-night #content.mw-body h5,
.skin-theme-clientpref-night #content.mw-body h6,
.client-darkmode #mw-content-text,
.skin-theme-clientpref-night #mw-content-text {
  color: var(--gla-dark-heading) !important;
  border-color: var(--gla-dark-border) !important;
}
}


/* Estilos para infocaixas de geografia */
.client-darkmode #content.mw-body p,
.infobox.geography {
.client-darkmode #content.mw-body li,
border-collapse: collapse;
.skin-theme-clientpref-night #content.mw-body p,
line-height: 1.2em;
.skin-theme-clientpref-night #content.mw-body li {
font-size: 90%;
  color: var(--gla-dark-text) !important;
}
}


.infobox.geography  td,
.client-darkmode #content.mw-body .mw-parser-output a:not(.external):not(.extiw):not(.new),
.infobox.geography  th {
.skin-theme-clientpref-night #content.mw-body .mw-parser-output a:not(.external):not(.extiw):not(.new) {
border-top: 1px solid #a2a9b1;
  color: var(--gla-dark-link) !important;
padding: 0.4em 0.6em 0.4em 0.6em;
}
}


.infobox.geography .mergedtoprow td,
.client-darkmode #content.mw-body .mw-parser-output a:visited,
.infobox.geography .mergedtoprow th {
.skin-theme-clientpref-night #content.mw-body .mw-parser-output a:visited {
border-top: 1px solid #a2a9b1;
  color: var(--gla-dark-link-visited) !important;
padding: 0.4em 0.6em 0.2em 0.6em;
}
}


.infobox.geography .mergedrow td,
.client-darkmode #content.mw-body table,
.infobox.geography .mergedrow th {
.client-darkmode #content.mw-body .wikitable,
border: 0;
.client-darkmode #content.mw-body .infobox,
padding: 0 0.6em 0.2em 0.6em;
.client-darkmode #content.mw-body .toc,
.skin-theme-clientpref-night #content.mw-body table,
.skin-theme-clientpref-night #content.mw-body .wikitable,
.skin-theme-clientpref-night #content.mw-body .infobox,
.skin-theme-clientpref-night #content.mw-body .toc {
  background-color: var(--gla-dark-content-panel) !important;
  color: var(--gla-dark-text) !important;
  border-color: var(--gla-dark-border) !important;
}
}


.infobox.geography .mergedbottomrow td,
.client-darkmode #content.mw-body pre,
.infobox.geography .mergedbottomrow th {
.client-darkmode #content.mw-body code,
border-top: 0;
.skin-theme-clientpref-night #content.mw-body pre,
border-bottom: 1px solid #a2a9b1;
.skin-theme-clientpref-night #content.mw-body code {
padding: 0 0.6em 0.4em 0.6em;
  background-color: #1a1d22 !important;
  color: var(--gla-dark-text) !important;
  border-color: var(--gla-dark-border) !important;
}
}


.infobox.geography .maptable td,
/* Home — gradiente GLA (não Tailwind genérico) */
.infobox.geography .maptable th {
.client-darkmode #content.mw-body .home-card,
border: 0;
.skin-theme-clientpref-night #content.mw-body .home-card {
padding: 0;
  background: var(--gla-dark-content-panel) !important;
  color: var(--gla-dark-text) !important;
  border-color: var(--gla-dark-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
}


/**
.client-darkmode #content.mw-body .home-title,
* @deprecated: Remover assim que todas as ocorrências forem trocadas por "wikitable"
.skin-theme-clientpref-night #content.mw-body .home-title {
* @see: [[WP:Esplanada/propostas/Acabar com as tabelas bonitas! (4jul2012)]]
  background: linear-gradient(to bottom, #459cca, #5684c8) !important;
*/
  color: #ffffff !important;
table.prettytable {
margin: 1em 1em 1em 0;
background: #f9f9f9;
border: 1px #aaa solid;
border-collapse: collapse;
}
}


table.prettytable th,
.client-darkmode #content.mw-body .home-button-item,
table.prettytable td {
.skin-theme-clientpref-night #content.mw-body .home-button-item {
border: 1px #aaa solid;
  background: #1a1d22 !important;
padding: 0.2em;
  border-color: var(--gla-dark-border) !important;
}
}


table.prettytable th {
.client-darkmode #content.mw-body .home-button-title,
background: #f2f2f2;
.skin-theme-clientpref-night #content.mw-body .home-button-title {
text-align: center;
  background: #252830 !important;
  color: #8ec5f0 !important;
}
}


table.prettytable caption {
.client-darkmode #content.mw-body .index-cell,
font-weight: bold;
.skin-theme-clientpref-night #content.mw-body .index-cell {
  background: #1a1d22 !important;
  color: var(--gla-dark-text) !important;
  border-color: var(--gla-accent) !important;
}
}


/* Predefinições informativas e mensagens MediaWiki */
 
.caixa {
/* =============================================================================
width: 80%;
  GLA palette — Direção A (page / surface / panel)
margin: 0 auto;
  ============================================================================= */
padding: .1em;
 
border: 1px solid #C7C7C7;
html:not(.client-darkmode):not(.skin-theme-clientpref-night) body,
html.skin-theme-clientpref-day body {
  background-color: transparent !important;
}
}


.caixaMW {
html:not(.client-darkmode):not(.skin-theme-clientpref-night) .mw-body,
margin: 1px 0;
html.skin-theme-clientpref-day .mw-body,
padding: .1em;
html:not(.client-darkmode):not(.skin-theme-clientpref-night) #content.mw-body,
font-size: 93%;
html.skin-theme-clientpref-day #content.mw-body {
line-height:120%;
  background-color: var(--gla-surface);
clear: both;
}
}


.caixaMW.info,
/* Home mantém fade + mapa (regra acima só define cor base) */
.caixa.info {
html:not(.client-darkmode):not(.skin-theme-clientpref-night) body.page-Main_Page #content.mw-body,
background-color: white;
html:not(.client-darkmode):not(.skin-theme-clientpref-night) body.page-Página_principal #content.mw-body,
border: 1px solid #ccc;
html.skin-theme-clientpref-day body.page-Main_Page #content.mw-body,
html.skin-theme-clientpref-day body.page-Página_principal #content.mw-body {
  background-color: var(--gla-surface);
}
}


.caixaMW.infodestaque,
/* Dark: fundo profundo no html + ::after; body/chrome ficam transparentes p/ ver a PNG */
.caixa.infodestaque {
html.client-darkmode,
background-color: #f5faff;
html.skin-theme-clientpref-night {
border: 1px solid #cedff2;
  background-color: var(--gla-dark-bg, #060708) !important;
}
}


.caixaMW.aviso,
html.client-darkmode::after,
.caixa.aviso {
html.skin-theme-clientpref-night::after {
background-color:#fff3f3;
  background-color: var(--gla-dark-bg, #060708) !important;
border: 1px solid #ffc9c9;
}
}


.caixaMW.avisodestaque,
.client-darkmode body,
.caixa.avisodestaque {
.skin-theme-clientpref-night body {
background-color:#fff;
  background-color: transparent !important;
border: 2px solid #f00;
}
}


/* Referências */
/* =============================================================================
  GLA chrome — abas + #content (borda neutra, sem gradiente Vector)
  ============================================================================= */


/* Make the list of references smaller */
/* Abas 2.05em: recua #mw-head-base para colar #content nas abas */
.references-small {
#mw-page-base {
font-size: 90%;
  height: 4.55em !important;
}
}


/* Realce a azul das referências ''clicadas'' para ajudar na navegação */
#mw-head-base {
body.action-info .mw-body-content :target,
  height: 4.55em !important;
.citation:target {
  margin-top: -4.55em !important;
background-color: #def; /* Fallback */
background-color: rgba(0, 127, 255, 0.133);
}
}


/* Formatação de citações. Quebrar URLs longas etc., em vez de uma caixa transbordante */
#left-navigation {
.citation {
  margin-top: 2.5em !important;
word-wrap: break-word;
  margin-bottom: -2.05em !important;
}
}


/*
#right-navigation {
Para números e IDs de documentos ligados, em que o número
  margin-top: 2.5em !important;
não precisa ser mostrado em uma tela ou dispositivo de mão,
}
mas deve ser incluído na versão impressa
 
*/
/* Mata gradiente/separador azul do Vector em li e a */
@media screen, handheld {
#mw-head .vector-menu-tabs,
.citation .printonly {
#mw-head .vector-menu-tabs li,
display: none;
#mw-head .vector-menu-tabs li a,
}
#mw-head .vector-menu-tabs .vector-menu-content-list>li,
#mw-head .vector-menu-tabs .vector-menu-content-list>li>a {
  background-image: none !important;
}
 
#mw-head .vector-menu-tabs .vector-menu-content,
#mw-head .vector-menu-tabs .vector-menu-content-list {
  height: 100%;
  margin: 0;
  padding: 0;
}
 
#mw-head .vector-menu-tabs {
  height: 2.05em !important;
  padding-left: 0 !important;
  box-sizing: border-box;
  border-top: 1px solid var(--gla-border) !important;
}
 
#left-navigation #p-namespaces.vector-menu-tabs {
  border-left: 1px solid var(--gla-border) !important;
}
 
#right-navigation #p-views.vector-menu-tabs {
  border-left: 1px solid var(--gla-border) !important;
}
 
#mw-head .vector-menu-tabs .vector-menu-content-list>li {
  display: block !important;
  float: left !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.125em !important;
  box-sizing: border-box;
  background: var(--gla-tab-inactive) !important;
  border-right: 1px solid var(--gla-border) !important;
}
 
#mw-head .vector-menu-tabs .vector-menu-content-list>li.selected {
  background: var(--gla-surface) !important;
  margin-bottom: -1px !important;
  border-bottom: 1px solid var(--gla-surface) !important;
  position: relative;
  z-index: 2;
}
 
#mw-head .vector-menu-tabs .vector-menu-content-list>li>a {
  display: block !important;
  float: left !important;
  height: 2.05em !important;
  line-height: 1.125em !important;
  padding: 0.55em 8px 0 !important;
  font-size: 0.8125em !important;
  box-sizing: border-box;
  background: transparent !important;
  color: #0645ad;
}
 
#mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a,
#mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a:visited {
  color: #202122 !important;
  text-decoration: none !important;
}
 
/* Estrela vigia — só ícone (hack Vector TabWatchstarLink) */
#mw-head .vector-menu-tabs .vector-menu-content-list>li.icon>a {
  width: 2.15384615em !important;
  height: 0 !important;
  padding: 2.05em 0 0 0 !important;
  line-height: 0 !important;
  font-size: 0.8125em !important;
  overflow: hidden !important;
  color: transparent !important;
  text-indent: -99999px !important;
  white-space: nowrap !important;
  position: relative !important;
  box-sizing: content-box !important;
}
 
#mw-head .vector-menu-tabs .vector-menu-content-list>li.icon>a::before {
  display: block !important;
  position: absolute !important;
  top: 0.35em !important;
  left: 0.38461538em !important;
  width: 1.23076923em !important;
  height: 1.23076923em !important;
  margin: 0 !important;
  text-indent: 0 !important;
}
 
/* Mais + busca — mesma faixa das abas */
#right-navigation #p-cactions.vector-menu-dropdown {
  height: 2.05em !important;
  box-sizing: border-box;
  border-top: 1px solid var(--gla-border) !important;
  background: var(--gla-tab-inactive) !important;
}
 
#right-navigation #p-cactions .vector-menu-heading {
  display: block !important;
  position: relative !important;
  float: left !important;
  height: 2.05em !important;
  line-height: 1.125em !important;
  margin: 0 -1px 0 0 !important;
  padding: 0.55em 1.84615385em 0 8px !important;
  font-size: 0.8125em !important;
  box-sizing: border-box;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-right: 1px solid var(--gla-border) !important;
  font-weight: normal;
  color: #0645ad;
  cursor: pointer;
}
 
#right-navigation #p-cactions .vector-menu-heading::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0.35em !important;
  right: 8px !important;
  bottom: 0 !important;
  width: 1.23076923em !important;
  height: 1.23076923em !important;
  margin: 0 !important;
  opacity: 0.87;
}
 
/* Dropdown “Mais” — top alinhado à altura das abas (2.05em, não 2.5em do Vector) */
#right-navigation #p-cactions.vector-menu-dropdown {
  position: relative !important;
}
 
#right-navigation #p-cactions .vector-menu-content {
  top: 2.05em !important;
  right: -1px !important;
  left: auto !important;
  min-width: 100% !important;
  box-sizing: border-box;
  z-index: 100 !important;
  border-top: 1px solid var(--gla-border) !important;
  background-color: var(--gla-surface) !important;
  border-color: var(--gla-border) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
 
/* “Mais” — checkbox manda; hover do Vector legacy não pode manter aberto ao desmarcar */
#right-navigation #p-cactions.vector-menu-dropdown .vector-menu-checkbox:not(:checked)~.vector-menu-content {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
 
#right-navigation #p-cactions.vector-menu-dropdown .vector-menu-checkbox:checked~.vector-menu-content {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
 
#right-navigation #p-cactions .vector-menu-content-list li a {
  padding: 0.5em 0.75em !important;
}
 
.client-darkmode #right-navigation #p-cactions .vector-menu-content,
.skin-theme-clientpref-night #right-navigation #p-cactions .vector-menu-content {
  background-color: var(--gla-dark-panel-preinvert) !important;
  border-color: var(--gla-dark-border) !important;
}
 
#right-navigation #p-search {
  height: 2.05em !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  border-top: 1px solid var(--gla-border) !important;
  background: var(--gla-tab-inactive) !important;
  padding: 0 0.5em !important;
  margin: 0 0 0 0.5em !important;
}
 
#right-navigation #p-search form {
  margin: 0 !important;
  width: 100%;
}
 
#right-navigation #simpleSearch {
  margin-top: 0 !important;
  height: auto;
  width: 100%;
}
 
#right-navigation #searchInput {
  height: 1.85em !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: var(--gla-surface) !important;
  border-color: var(--gla-border) !important;
  box-sizing: border-box;
}
 
#p-personal {
  background-color: var(--gla-surface-alt) !important;
  padding: 0.15em 0.75em 0.15em 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 2em !important;
  box-sizing: border-box !important;
}
 
#p-personal .vector-menu-content-list {
  align-items: center !important;
}
 
#p-personal li {
  padding-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.35 !important;
}
 
#pt-userpage a,
#pt-anonuserpage {
  background-image: none !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
}
 
.mw-parser-output pre,
.mw-parser-output code,
.mw-parser-output .mw-code,
pre,
code,
.mw-code {
  background-color: var(--gla-surface-alt) !important;
  color: #2b2a23 !important;
  border-color: var(--gla-border) !important;
}
 
/* Links — conteúdo e sidebar (claro) */
html:not(.client-darkmode):not(.skin-theme-clientpref-night) #content.mw-body .mw-parser-output a:not(.external):not(.extiw):not(.new),
html.skin-theme-clientpref-day #content.mw-body .mw-parser-output a:not(.external):not(.extiw):not(.new),
html:not(.client-darkmode):not(.skin-theme-clientpref-night) #mw-panel a,
html.skin-theme-clientpref-day #mw-panel a {
  color: var(--gla-link);
}
 
/* Infobox — painel + título de marca (claro) */
html:not(.client-darkmode):not(.skin-theme-clientpref-night) .infobox,
html:not(.client-darkmode):not(.skin-theme-clientpref-night) .infobox_v2,
html.skin-theme-clientpref-day .infobox,
html.skin-theme-clientpref-day .infobox_v2 {
  background-color: var(--gla-surface-alt);
  border-color: var(--gla-border);
}
 
html:not(.client-darkmode):not(.skin-theme-clientpref-night) .infobox th,
html:not(.client-darkmode):not(.skin-theme-clientpref-night) .infobox_v2 th,
html.skin-theme-clientpref-day .infobox th,
html.skin-theme-clientpref-day .infobox_v2 th {
  color: var(--gla-accent);
}
 
/* --- Dark mode chrome (cores diretas) --- */
.client-darkmode #mw-page-base,
.skin-theme-clientpref-night #mw-page-base,
.client-darkmode #mw-head-base,
.skin-theme-clientpref-night #mw-head-base {
  background: transparent !important;
  background-image: none !important;
}
 
.client-darkmode #mw-head .vector-menu-tabs,
.skin-theme-clientpref-night #mw-head .vector-menu-tabs {
  border-top-color: var(--gla-dark-border) !important;
}
 
.client-darkmode #left-navigation #p-namespaces.vector-menu-tabs,
.skin-theme-clientpref-night #left-navigation #p-namespaces.vector-menu-tabs {
  border-left-color: var(--gla-dark-border) !important;
}
 
.client-darkmode #mw-head .vector-menu-tabs .vector-menu-content-list>li,
.skin-theme-clientpref-night #mw-head .vector-menu-tabs .vector-menu-content-list>li {
  background: var(--gla-dark-tab-inactive) !important;
  border-right-color: var(--gla-dark-border) !important;
}
 
.client-darkmode #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected,
.skin-theme-clientpref-night #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected {
  background: var(--gla-dark-content-bg) !important;
  border-bottom-color: var(--gla-dark-content-bg) !important;
}
 
.client-darkmode #mw-head .vector-menu-tabs .vector-menu-content-list>li>a,
.skin-theme-clientpref-night #mw-head .vector-menu-tabs .vector-menu-content-list>li>a {
  color: var(--gla-dark-link) !important;
}
 
.client-darkmode #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a,
.client-darkmode #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a:visited,
.skin-theme-clientpref-night #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a,
.skin-theme-clientpref-night #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a:visited {
  color: var(--gla-dark-heading) !important;
}
 
.client-darkmode #right-navigation #p-cactions.vector-menu-dropdown,
.skin-theme-clientpref-night #right-navigation #p-cactions.vector-menu-dropdown,
.client-darkmode #right-navigation #p-search,
.skin-theme-clientpref-night #right-navigation #p-search {
  background: var(--gla-dark-tab-inactive) !important;
  border-top-color: var(--gla-dark-border) !important;
}
 
.client-darkmode #right-navigation #p-cactions .vector-menu-heading,
.skin-theme-clientpref-night #right-navigation #p-cactions .vector-menu-heading {
  border-right-color: var(--gla-dark-border) !important;
  color: var(--gla-dark-link) !important;
}
 
.client-darkmode #p-personal,
.skin-theme-clientpref-night #p-personal {
  background-color: var(--gla-dark-chrome) !important;
}
 
.client-darkmode #p-personal a,
.skin-theme-clientpref-night #p-personal a {
  color: var(--gla-dark-link) !important;
}
 
.client-darkmode #mw-head #simpleSearch,
.skin-theme-clientpref-night #mw-head #simpleSearch,
.client-darkmode #mw-head #searchInput,
.skin-theme-clientpref-night #mw-head #searchInput,
.client-darkmode #mw-head table,
.skin-theme-clientpref-night #mw-head table,
.client-darkmode .mw-notification,
.skin-theme-clientpref-night .mw-notification {
  background-color: var(--gla-dark-chrome-panel);
  border-color: var(--gla-dark-border);
  color: var(--gla-dark-text);
}
 
.client-darkmode #mw-panel a,
.skin-theme-clientpref-night #mw-panel a {
  color: var(--gla-dark-link) !important;
}
 
/* =============================================================================
  Visitantes (não logados) — ocultar chrome de edição / ferramentas
  Detecta anon pelo link "Entrar" (#pt-login) no menu pessoal.
  Nota: CSS só esconde na tela; URLs diretas ainda funcionam sem permissão PHP.
  ============================================================================= */
body:has(#pt-login) #p-views,
body:has(#pt-login) #p-cactions,
body:has(#pt-login) #p-tb,
body:has(#pt-login) nav#p-tb {
  display: none !important;
}
 
/* Footer — ocultar lastmod + links padrão MediaWiki */
#footer-info-lastmod,
#footer-places-privacy,
#footer-places-about,
#footer-places-disclaimer {
  display: none !important;
}
 
/* =============================================================================
  GLA pages legacy (provisório)
  ============================================================================= */
 
/* =============================================================================
  GLA pages legacy (provisório) — personagens, filtros, skills, wanted, abas
  Extraído de antigo_common.css
  ============================================================================= */
 
:root {
  --lightGray: rgba(240, 240, 240);
  --gray: rgb(190, 190, 190);
  --transparent-blue: #338be58c;
  --blue: #338be5;
}
 
 
margin-top: 1.5em;
}
 
.mt-4 {
  margin-top: 3em;
}
 
.mt--4 {
  margin-top: -2em;
}
 
.mb-2 {
  margin-bottom: 1em;
}
 
 
.d-flex,
.td-flex td {
  display: flex;
}
 
.d-block {
  display: block;
}
}


/**
.relative {
* Style for horizontal lists (separator following item).
  position: relative;
* @source https://www.mediawiki.org/wiki/Snippets/Horizontal_lists
* @revision 7 (2015-11-12)
* @author [[User:Edokter]]
*/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
}


/* Display list items inline */
.text-justify {
.hlist dd,
  text-align: justify;
.hlist dt,
.hlist li {
margin: 0;
display: inline;
}
}


.nonumtoc .tocnumber {
.align-center {
display: none;
  align-items: center;
}
}


.nonumtoc #toc ul,
.align-top {
.nonumtoc .toc ul {
  align-items: flex-start;
line-height: 1.5em;
list-style: none none;
margin: .3em 0 0;
padding: 0;
}
}


.hlist.nonumtoc #toc ul ul,
.justify-between {
.hlist.nonumtoc .toc ul ul {
  justify-content: space-between;
/* @noflip */
margin: 0;
}
}


/* Display nested lists inline */
.justify-center {
.hlist.inline,
  justify-content: center;
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
display: inline;
}
}


/* Hide empty list items */
.border-none {
.hlist .mw-empty-li {
  border: none !important;
display: none;
}
}


/* Generate interpuncts */
.w-25 {
.hlist dt:after {
  width: 25%;
content: ": ";
}
}


.hlist dd:after,
.h-100 {
.hlist li:after {
  height: 100%;
content: " · ";
font-weight: bold;
}
}


.hlist dd:last-child:after,
.flex-wrap {
.hlist dt:last-child:after,
  flex-wrap: wrap;
.hlist li:last-child:after {
content: none;
}
}


/* Add parentheses around nested lists */
.section-title {
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
  display: block;
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
  border-radius: 8px;
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
  background: linear-gradient(to bottom, #459cca, #5684c8);
content: " (";
  width: fit-content;
font-weight: normal;
  color: white;
  padding: .25em 5em;
  letter-spacing: 1px;
}
}


.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.badge {
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
  padding: .25em .57em;
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
  margin: .45em;
content: " )";
  border-radius: 6px;
font-weight: normal;
  color: white;
  font-weight: bold;
  text-transform: capitalize;
  white-space: nowrap;
  max-height: 1.5em;
  font-size: .9em;
  letter-spacing: 1px;
  box-shadow: rgb(3 102 214 / 30%) 0px 0px 0px 3px;
  background: linear-gradient(to bottom, #459cca, #5684c8);
}
}


/* Put ordinals in front of ordered list items */
.card {
.hlist ol {
  width: 100%;
counter-reset: listitem;
  min-height: 14em;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: rgb(0 0 0 / 9%) 0px 3px 12px;
}
}


.hlist ol > li {
.card-title {
counter-increment: listitem;
  display: block;
  padding: .25em 0;
  margin-bottom: 1em;
  width: 100%;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(to bottom, #459cca, #5684c8);
 
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1px;
  color: white;
}
}


.hlist ol > li:before {
.scaleUp-hover {
content: " " counter(listitem) " ";
  transition: all .25s ease;
white-space: nowrap;
  image-rendering: auto;
  /* ou crisp-edges */
}
}


.hlist dd ol > li:first-child:before,
.scaleUp-hover:hover {
.hlist dt ol > li:first-child:before,
  transform: scale(1.1);
.hlist li ol > li:first-child:before {
content: " (" counter(listitem) " ";
}
}


/* Unbulleted lists */
/*
.plainlist ol,
      PERSONAGENS
.plainlist ul {
      */
line-height: inherit;
 
list-style: none none;
.filter--containerSearch {
margin: 0;
  display: flex;
  padding: 0 2em;
  justify-content: flex-end;
  align-items: center;
}
}
.plainlist ol li,
 
.plainlist ul li {
.filter--container {
margin-bottom: 0;
  display: flex;
  padding: 0 2em;
  justify-content: space-between;
  align-items: center;
}
}


/* Estilo padrão para caixas de navegação (navbox) */
.filter {
.navbox {                     /* Navbox container style */
  width: fit-content;
box-sizing: border-box;
  display: flex;
border: 1px solid #a2a9b1;
  justify-content: center;
width: 100%;
  border: 3px solid #b0cff1;
clear: both;
  border-collapse: collapse;
font-size: 88%;
  border-radius: 8px;
text-align: center;
padding: 1px;
margin: 1em auto 0;       /* Prevent preceding content from clinging to navboxes */
}
}


.navbox .navbox {
.filter--title {
margin-top: 0;           /* No top margin for nested navboxes */
  display: flex;
  border-right: 3px solid #b0cff1;
  background: #4c91c9;
  padding: 0 1em;
  align-items: center;
  border-radius: 4px 0 0 4px;
  font-size: 1.2em;
  letter-spacing: .15em;
  font-weight: bold;
  color: white;
}
}


.navbox + .navbox {
.filter--icon,
margin-top: -1px;         /* Single pixel border between adjacent navboxes */
.calcXp--tierIcon {
  padding: .35em .95em;
  background: transparent;
  cursor: pointer;
}
}


.navbox-inner,
.filter--icon.tier img {
.navbox-subgroup {
  filter: grayscale(.0);
width: 100%;
}
}


.navbox-group,
.filter--icon.tier.active img {
.navbox-title,
  box-shadow: none;
.navbox-abovebelow {
padding: 0.25em 1em;      /* Title, group and above/below styles */
line-height: 1.5em;
text-align: center;
}
}


th.navbox-group {             /* Group style */
.filter--icon img {
white-space: nowrap;
  filter: grayscale(.8);
/* @noflip */
  border-radius: 10px;
text-align: right;
 
  transition: all .25s ease;
}
}


.navbox,
.calcXp--tierIcon img {
.navbox-subgroup {
  filter: drop-shadow(0px 1px 8px #4c91c900);
background-color: #fdfdfd; /* Background color */
  border-radius: 10px;
 
  transition: all .25s ease;
}
}


.navbox-list {
.filter--icon.active img {
line-height: 1.5em;
  box-shadow: rgb(0 0 0 / 24%) 0px 2px 7px;
border-color: #fdfdfd;   /* Must match background color */
  filter: grayscale(0);
}
}


/* cell spacing for navbox cells */
.filter--icon.tier.active img,
tr + tr > .navbox-abovebelow,
.calcXp--tierIcon.active img {
tr + tr > .navbox-group,
  transform: scale(.85);
tr + tr > .navbox-image,
tr + tr > .navbox-list {   /* Borders above 2nd, 3rd, etc. rows */
border-top: 2px solid #fdfdfd; /* Must match background color */
}
}


.navbox th,
.filter--icon.tier#bronze.active img,
.navbox-title {
.calcXp--tierIcon#bronze.active img {
background-color: #ccccff;     /* Level 1 color */
  filter: drop-shadow(0px 1px 8px #f18a05);
}
}


.navbox-abovebelow,
.filter--icon.tier#silver.active img,
th.navbox-group,
.calcXp--tierIcon#silver.active img {
.navbox-subgroup .navbox-title {
  filter: drop-shadow(0px 1px 8px #8b8b8b);
background-color: #ddddff;     /* Level 2 color */
}
}


.navbox-subgroup .navbox-group,
.filter--icon.tier#gold.active img,
.navbox-subgroup .navbox-abovebelow {
.calcXp--tierIcon#gold.active img {
background-color: #e6e6ff;     /* Level 3 color */
  filter: drop-shadow(0px 1px 8px #fbc300);
}
}


.navbox-even {
.filter--icon.tier#diamond.active img,
background-color: #f7f7f7;     /* Even row striping */
.calcXp--tierIcon#diamond.active img {
  filter: drop-shadow(0px 1px 8px #0391c5);
}
}


.navbox-odd {
.filter--input {
background-color: transparent; /* Odd row striping */
  box-sizing: border-box;
  padding: .45em;
  padding-right: 2.5em;
  border: 3px solid #b0cff1;
  font-size: 1.2em;
  border-radius: 8px;
  width: 23em;
}
}


.navbox .hlist td dl,
.filter--inputContainer {
.navbox .hlist td ol,
  box-sizing: border-box;
.navbox .hlist td ul,
  position: relative;
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
padding: 0.125em 0;       /* Adjust hlist padding in navboxes */
}
}


/* Default styling for Navbar template */
.filter--searchButton {
.navbar {
  cursor: pointer;
display: inline;
  display: inline-block;
font-size: 88%;
  border: 3px solid #b0cff1;
font-weight: normal;
  position: absolute;
  width: 4.5em;
  height: -webkit-fill-available;
  right: 0;
  bottom: 0;
  border-radius: 0 8px 8px 0;
  background: #4c91c9;
 
}
}


.navbar ul {
.filter--searchButton img {
display: inline;
  filter: invert(1);
white-space: nowrap;
}
}


.mw-body-content .navbar ul {
.calcXp--container {
line-height: inherit;
  box-sizing: border-box;
  padding: 2.25em 1.25em;
  width: 43em;
  border: 3px solid #b0cff1;
  border-radius: 26px;
}
}


.navbar li {
.calcXp--resultTitle {
word-spacing: -0.125em;
  text-align: center;
  color: #4f7ca0;
  margin: 0;
  margin-top: -.5em !important;
  letter-spacing: .05em;
}
}


.navbar.mini li abbr[title] {
.calcXp--formItem {
font-variant: small-caps;
  display: flex;
border-bottom: none;
  align-items: center;
text-decoration: none;
}
cursor: inherit;


.calcXp--formItem input {
  box-sizing: border-box;
  padding: .35em;
  border: 2px solid #b0cff1;
  border-radius: 8px;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  letter-spacing: .05em;
  width: 4em;
}
}


/* Navbar styling when nested in infobox and navbox */
.calcXp--formItem span {
.infobox .navbar {
  font-size: 1.225em;
font-size: 100%;
  font-weight: 500;
  letter-spacing: .05em;
  margin-right: .5em;
  color: #386a93;
}
}


.navbox .navbar {
#calculate-btn {
display: block;
  box-sizing: border-box;
font-size: 100%;
  cursor: pointer;
  display: block;
  width: 15em;
  margin: 2em auto;
  padding: .45em 1em;
 
  border: none;
  border-radius: 6px;
  background: #4c91c9;
  box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
  color: white;
 
  font-size: 1.35em;
  text-transform: capitalize;
  letter-spacing: 0.05em;
  font-weight: bold;
  transition: .35s ease;
}
}


.navbox-title .navbar {
#calculate-btn:hover {
/* @noflip */
  color: #ffffff;
float: left;
  box-shadow: rgb(0 0 0 / 8%) 0px 3px 8px;
/* @noflip */
  transform: scale(.95);
text-align: left;
  background: #4685b8;
/* @noflip */
margin-right: 0.5em;
}
}


/* Styling for JQuery makeCollapsible, matching that of collapseButton */
#calc-result {
.mw-parser-output .mw-collapsible-toggle {
  margin-top: 1em;
font-weight: normal;
  display: flex;
/* @noflip */
  justify-content: center;
text-align: right;
padding-right: 0.2em;
padding-left: 0.2em;
}
}
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
 
/* @noflip */
#calc-result .badge {
float: left;
  display: flex;
/* @noflip */
  align-items: center;
text-align: left;
  justify-content: center;
  max-height: 5em;
  width: 5em;
}
 
.calcXp--xpIcon {
  margin-left: -.2em;
}
 
.calcXp--numberOfPots {
  padding-top: .2em;
  font-size: 1.15em;
}
}


/* Hatnotes and disambiguation notices */
#characters-container {
.hatnote {
  display: flex;
font-style: italic;
  flex-wrap: wrap;
  padding: 1em;
}
}


.hatnote i {
#characters-container>div {
font-style: normal;
  box-sizing: border-box;
  display: none;
  padding: 1em;
  width: 19%;
  margin-right: 1%;
}
}


div.hatnote {
#characters-container>div.show {
/* @noflip */
  display: block;
padding-left: 1.6em;
margin-bottom: 0.5em;
}
}


div.hatnote + div.hatnote {
#characters-container>div>a>img {
margin-top: -0.5em;
  width: 100%;
  border-radius: 8px;
  filter: grayscale(.3);
  transition: all .25s ease;
}
}


/* Redirect em verde
#characters-container>div:hover>a>img {
* Faz com que os redirects apareçam em itálico e verde em [[Special:Allpages]] e [[Special:Watchlist]]
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
*/
  filter: grayscale(0);
.allpagesredirect a,
  transform: scale(1.06);
.redirect-in-category a,
.unusedtemplatesredirect a,
.watchlistredir a {
font-style: italic;
color:green;
}
}


/* Íconpara predefinições medialist [[Template:Ouça]], [[Template:Multi-listen_start]], [[Template:Video]], [[Template:Multi-video_start]] */
.characterPage--splashArt {
div.listenlist {
  position: absolute;
background: url( "//upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Gnome-speakernotes.png/30px-Gnome-speakernotes.png" );
  top: -2%;
padding-left: 40px;
  right: -2%;
  width: 35%;
}
}


div.videolist,
.characterPage--table {
div.multivideolist {
  margin-top: -4em;
background: url( "//upload.wikimedia.org/wikipedia/en/thumb/2/20/Tango-video-x-generic.png/40px-Tango-video-x-generic.png" );
  width: 100%;
padding-left: 50px;
}
}


/* Style rules for media list templates */
.characterPage--table>tbody {
div.medialist {
  position: relative;
min-height: 50px;
  display: flex;
margin: 1em;
  justify-content: space-between;
background-position: top left;
  align-items: flex-end;
background-repeat: no-repeat;
}
}


div.medialist ul {
.characterPage--table>tbody>.characterPage--mainSection {
list-style-type: none;
  display: flex;
list-style-image: none;
  flex-wrap: wrap;
margin: 0;
  justify-content: space-between;
  width: 65%;
}
}


div.medialist ul li {
.characterPage--table>tbody>.characterPage--sideSection {
padding-bottom: 0.5em;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  width: 33%;
  padding: 0 1em;
}
}


div.medialist ul li li {
.characterPage--characterInfoContainer {
font-size: 91%;
  width: 43%;
padding-bottom: 0;
}
}


/* Change the external link icon to an Adobe icon for all PDF files
.characterPage--statsInfoContainer {
* in browsers that support these CSS selectors, like Mozilla and Opera
  width: 55%;
*/
#content a[href$=".pdf"].external,
#content a[href*=".pdf?"].external,
#content a[href*=".pdf#"].external,
#content a[href$=".PDF"].external,
#content a[href*=".PDF?"].external,
#content a[href*=".PDF#"].external,
#mw_content a[href$=".pdf"].external,
#mw_content a[href*=".pdf?"].external,
#mw_content a[href*=".pdf#"].external,
#mw_content a[href$=".PDF"].external,
#mw_content a[href*=".PDF?"].external,
#mw_content a[href*=".PDF#"].external {
background: url( "//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif" ) center right no-repeat;
padding-right: 16px;
}
}


/* Change the external link icon to an Adobe icon anywhere the PDFlink class
.stats--container {
* is used (notably Template:PDFlink). This works in IE, unlike the above.
  display: flex;
*/
  justify-content: center;
#content span.PDFlink a,
  flex-wrap: wrap;
#mw_content span.PDFlink a {
  padding: 1.25em;
background: url( "//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif" ) center right no-repeat;
padding-right: 17px;
}
}


/* Messagebox templates */
.stats--container>div {
.messagebox {
  width: 45%;
border: 1px solid #aaa;
  display: flex;
background-color: #f9f9f9;
  align-items: center;
width: 80%;
  justify-content: center;
margin: 0 auto 1em auto;
  margin: .5em;
padding: .2em;
}
}


.messagebox.merge {
.stats--container div img {
border: 1px solid #c0b8cc;
  width: 2.25em;
background-color: #f0e5ff;
text-align: center;
}
}


.messagebox.cleanup {
.stats--bar {
border: 1px solid #9f9fff;
  display: flex;
background-color: #efefff;
  width: -webkit-fill-available;
text-align: center;
  justify-content: space-between;
  padding: 0 1.25em;
}
}


.messagebox.standard-talk {
.bar-filled:first-child,
border: 1px solid #c0c090;
.bar-notFilled:first-child {
background-color: #f8eaba;
  border-radius: 6px 0 0 6px;
}


.bar-filled:last-child,
.bar-notFilled:last-child {
  border-radius: 0 6px 6px 0;
}
}


.messagebox.nested-talk {
.bar-filled,
border: 1px solid #c0c090;
.bar-notFilled {
background-color: #f8eaba;
  display: block;
width: 100%;
  width: 18%;
margin: 2px 4px 2px 4px;
  height: 6px;
}
}


.messagebox.small {
.bar-filled {
width: 238px;
  background: var(--blue);
font-size: 85%;
float: right;
clear: both;
margin: 0 0 1em 1em;
line-height: 1.25em;
}
}


/**
.bar-notFilled {
* Infobox V2 - em fase de teste
  background: var(--transparent-blue);
* Ver [[fr:Projet:Infobox/V2]]
**/
.infobox_v2 {
background: #f9f9f9;
color: #000;
font-size: 90%;
line-height: 1.1em;
float:right;
clear:right;
margin: 0.5em 0 0.5em 1em;
width: 23em;
border: 1px solid #aaa;
padding: 2px;
}
}


.infobox_v2 th {
.characterInfo--name {
vertical-align:top;
  margin: 0 !important;
text-align:left;
}
}


.infobox_v2 .topo{
.characterInfo--badgeContainer {
height:45px;
  display: flex;
vertical-align:middle;
  justify-content: center;
text-align:center;
  flex-wrap: wrap;
font-size:120%;
  width: fit-content;
font-weight:bolder;
  margin: 0 auto;
line-height:1.2em;
color:#000;
}
}


.infobox_v2 .midia {
.characterInfo--contentContainer {
height:35px;
  display: flex;
vertical-align:middle;
  justify-content: space-between;
text-align:center;
  padding: .6em 1.3em;
font-weight:bolder;
color:#000;
}
}


/* Imagens transparentes dos topos da infobox V2 */
.characterInfo--imageContainer {
/*.topo.padrao      {}*/
   width: 25%;
.topo.animangá    { background: url( "//upload.wikimedia.org/wikipedia/commons/6/63/Picto_infobox_anime_and_manga.png" ) no-repeat top right; }
}
.topo.astronomia  { background: url( "//upload.wikimedia.org/wikipedia/commons/e/ee/Picto_infobox_rocket.png" )          no-repeat top right; }
.topo.bd          { background: url( "//upload.wikimedia.org/wikipedia/commons/2/2c/Picto_infobox_comicballoon.png" )  no-repeat top right; }
.topo.castelo    { background: url( "//upload.wikimedia.org/wikipedia/commons/5/5c/Picto_infobox_chateau.png" )      no-repeat top right; }
.topo.cerveja    { background: url( "//upload.wikimedia.org/wikipedia/commons/0/04/Picto_infobox_beer.png" )          no-repeat top right; }
.topo.cinema      { background: url( "//upload.wikimedia.org/wikipedia/commons/e/ea/Picto_infobox_cinema.png" )        no-repeat top right; }
.topo.computador  { background: url( "//upload.wikimedia.org/wikipedia/commons/c/ce/Arduino_ftdi_chip-1.png" )        no-repeat top right; }
.topo.comunicacao { background: url( "//upload.wikimedia.org/wikipedia/commons/a/a2/Picto_infobox_antenna.png" ) no-repeat top right; }
.topo.desporto   { background: url( "//upload.wikimedia.org/wikipedia/commons/8/8e/Picto_infobox_Olympic.png" ) no-repeat top right; }
.topo.edificioreligioso  { background: url( "//upload.wikimedia.org/wikipedia/commons/3/30/Pictogram-infobox-religious.png" ) no-repeat top right; }
.topo.europa      { background: url( "//upload.wikimedia.org/wikipedia/commons/c/c0/Picto_Infobox_Europe.png" )        no-repeat top right; }
.topo.fisica      { background: url( "//upload.wikimedia.org/wikipedia/commons/3/37/Fourier_infobox.png" )            no-repeat bottom right; }
.topo.internet    { background: url( "//upload.wikimedia.org/wikipedia/commons/a/aa/Picto_infobox_internet_PD.svg" )  no-repeat center right; }
.topo.humano      { background: url( "//upload.wikimedia.org/wikipedia/commons/8/82/Picto_infobox_manwoman.png" )      no-repeat top right; }
.topo.jogo        { background: url( "//upload.wikimedia.org/wikipedia/commons/2/2d/Picto_infobox_gamepad.png" )      no-repeat bottom right; }
.topo.jornal      { background: url( "//upload.wikimedia.org/wikipedia/commons/2/23/Picto_infobox_journal.png" )      no-repeat bottom right; }
.topo.mapa        { background: url( "//upload.wikimedia.org/wikipedia/commons/7/7a/Picto_infobox_map.png" )          no-repeat top right; }
.topo.musica      { background: url( "//upload.wikimedia.org/wikipedia/commons/6/60/Picto_infobox_music.png" )        no-repeat bottom right; }
.topo.televisao   { background: url( "//upload.wikimedia.org/wikipedia/commons/a/a6/Picto_infobox_TV-T%26PC.png" )    no-repeat top right; }
.topo.novela, .topo.televisao2  { background: url( "//upload.wikimedia.org/wikipedia/commons/a/a6/Picto_infobox_TV-T%26PC.png" )    no-repeat bottom right; }
.topo.palacio    { background: url( "//upload.wikimedia.org/wikipedia/commons/5/5e/Pictogram_infobox_palace.png" )    no-repeat top right; }
.topo.quimica    { background: url( "//upload.wikimedia.org/wikipedia/commons/9/95/Picto_infobox_chemistry.png" )    no-repeat bottom right; }
.topo.teatro      { background: url( "//upload.wikimedia.org/wikipedia/commons/3/37/Picto_infobox_masks.png" )        no-repeat top right; }
.topo.autor      { background: url( "//upload.wikimedia.org/wikipedia/commons/1/1e/Picto_infobox_auteur.png" )        no-repeat top right; }
.topo.wiki        { background: url( "//upload.wikimedia.org/wikipedia/commons/2/24/Picto_infobox_default.png" )      no-repeat top right; }
.topo.filme      { background: url( "//upload.wikimedia.org/wikipedia/commons/4/4d/Picto_infobox_film.png" )          no-repeat center right; }
.topo.ferramentas { background: url( "//upload.wikimedia.org/wikipedia/commons/c/cb/Picto_infobox_tools.png" )        no-repeat top right; }
.topo.livro      { background: url( "//upload.wikimedia.org/wikipedia/commons/4/42/Picto_infobox_book.png" )          no-repeat center right; }
.topo.espacial    { background: url( "//upload.wikimedia.org/wikipedia/commons/9/94/Picto_infobox_shuttle.png" )      no-repeat top right; }
.topo.rka        { background: url( "//upload.wikimedia.org/wikipedia/commons/1/1b/Picto_infobox_RKA.png" )          no-repeat top right; }
.topo.ginastica  { background: url( "//upload.wikimedia.org/wikipedia/commons/9/92/Picto_infobox_gymnastic.png" )    no-repeat top right; }
.topo.raio        { background: url( "//upload.wikimedia.org/wikipedia/commons/2/27/Picto_infobox_raio.png" )          no-repeat top right; }
.topo.robo        { background: url( "//upload.wikimedia.org/wikipedia/commons/5/5f/Picto_infobox_robot.png" )        no-repeat top right; }
.midia.audio { background: url( "//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Gnome-mime-sound-openclipart.svg/35px-Gnome-mime-sound-openclipart.svg.png" ) no-repeat top left; }
.midia.video { background: url( "//upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Video-x-generic.svg/35px-Video-x-generic.svg.png" ) no-repeat top left; }


/* Fim da fase de teste da Infobox V2 */
.characterInfo--medal {
  margin-top: -1.5em;
}


/* Fundo logo Wikipédia */
 
.fundologo {
.characterInfo--infoContainer {
background: url( "//upload.wikimedia.org/wikipedia/commons/1/10/Wikipedia-logo-v2-200px-transparent.png" );
  width: 75%;
  text-align: center;
}
}


/* Barra de navegação */
.characterInfo--infoContainer #toc {
div.Boxmerge,
  display: none;
div.NavFrame {
margin: 0;
padding: 2px;
border: 1px solid #aaa;
text-align: center;
border-collapse: collapse;
font-size: 95%;
}
}


div.Boxmerge div.NavFrame {
.characterPage--skins {
border-style: none;
  width: 100%;
border-style: hidden;
}
}


div.NavFrame + div.NavFrame {
.characterPage--characterSkills {
border-top-style: none;
  width: 100%;
border-top-style: hidden;
}
}


div.NavPic {
/*
background-color: #fff;
      Card de Skins
margin: 0;
      */
padding: 2px;
 
float: left;
.skins--container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: -0.75em 0.75em;
  gap: -0.5em;
  /* Adiciona espaçamento consistente entre os itens */
}
}


div.NavFrame div.NavHead {
.skins--container span {
height: 1.6em;
  width: 33.3%;
font-weight: bold;
  display: flex;
font-size: 100%;
  justify-content: center;
background-color: #efefef;
  align-items: center;
position:relative;
}
}


div.NavFrame p {
.skins--imageSkin {
font-size: 100%;
  max-width: 100%;
  /* Limita o tamanho máximo da imagem */
  max-height: 100%;
  /* Limita o tamanho máximo da imagem */
  object-fit: contain;
  /* Garante que a imagem se ajusta proporcionalmente */
}
}


div.NavFrame div.NavContent {
/*
font-size: 100%;
      Seção das skills do personagem
      */
 
.tabsContainer {
  width: 95%;
  margin: 0 auto;
  padding-bottom: .5em;
}
}


div.NavFrame div.NavContent p {
.tabsContainer table {
font-size: 100%;
  width: 100%;
  border-collapse: collapse;
}
}


div.NavEnd {
.tabsContainer table>tbody>tr>td {
margin: 0;
  border-bottom: 2px solid rgb(225, 225, 225);
padding: 0;
line-height: 1px;
clear: both;
}
}


a.NavToggle {
.tabSkill--container {
position:absolute;
  padding-bottom: .85em;
top:0;
  display: flex;
right:3px;
  max-width: 72em;
font-weight:normal;
  overflow-x: auto;
font-size:smaller;
}
}


/* Geographical coordinates defaults. See [[Template:Coord/link]]
.skillInfo--description::-webkit-scrollbar,
  for how these are used. The classes "geo", "longitude", and
.tabSkill--container::-webkit-scrollbar {
  "latitude" are used by the [[Geo microformat]]. */
  width: 8px;
.geo-default, .geo-dms, .geo-dec  { display: inline; }
  height: 8px;
.geo-nondefault, .geo-multi-punct { display: none; }
}
.longitude, .latitude            { white-space: nowrap; }


/* Permite limitar a quantidade de níveis num índice;
.skillInfo--description::-webkit-scrollbar-track,
* <div class="toclimit-3">, por exemplo, limitará somente
.tabSkill--container::-webkit-scrollbar-track {
* a ==nível 2== e ===nível 3=== e nada inferior, contanto
  background-color: #4799c954;
* que não exista =nível 1= na pagina.
  border-radius: 10px;
*/
.toclimit-2 .toclevel-2,
.toclimit-3 .toclevel-3,
.toclimit-4 .toclevel-4,
.toclimit-5 .toclevel-5,
.toclimit-6 .toclevel-6,
.toclimit-7 .toclevel-7 {
display: none;
}
}


/* Remove bordas brancas de miniaturas */
.skillInfo--description::-webkit-scrollbar-thumb,
div.thumb {
.tabSkill--container::-webkit-scrollbar-thumb {
border: none;
  background-color: rgb(85 135 200 / 74%);
  border-radius: 10px;
}
}


div.tright {
.tab-skill {
border: none;
  transition: all .25s ease;
margin: 0.5em 0 0.8em 1.4em;
  width: 100%;
  min-width: 5em;
}
}


div.tleft {
.tab-skill.active {
border: none;
  border-color: #459cca;
margin: 0.5em 1.4em 0.8em 0;
}
}


/* Suporte para [[Predefinição:AFI]], [[Predefinição:Unicode]] e [[Predefinição:politônico]] */
.tab-skill>div {
.AFI {
  cursor: pointer;
font-family: "Charis SIL", "Doulos SIL", Gentium, GentiumAlt,
  box-sizing: border-box;
"DejaVu Sans", Code2000, "TITUS Cyberbit Basic",
  width: 100%;
"Arial Unicode MS", "Lucida Sans Unicode",
  display: flex;
"Chrysanthi Unicode";
  justify-content: center;
  align-items: center;
  padding: .25em;
}
}


.Unicode {
.tab-skill>div>img {
font-family: Code2000, Code2001, "Free Serif", "TITUS Cyberbit Basic",
  width: 100%;
"Doulos SIL", "Chrysanthi Unicode", "Bitstream Cyberbit",
  max-width: 40px;
"Bitstream CyberBase", Thryomanes, Gentium, GentiumAlt,
  height: auto;
"Lucida Grande", "Free Sans", "Arial Unicode MS",
"Microsoft Sans Serif", "Lucida Sans Unicode";
}
}


.politonico {
.skillInfo--container {
font-family: "Athena Unicode", Gentium, "Palatino Linotype",
  width: 100%;
"Arial Unicode MS", "Lucida Sans Unicode",
"Lucida Grande", Code2000;
}
}


/* Prevent line breaks in silly places:
.skillInfo--container>td {
  1) Where desired
  border: none !important;
  2) Links when we don't want them to
  3) Bold "links" to the page itself
  4) Ref tags with group names <ref group="Note"> --> "[Note 1]" */
.nowrap,
.nowraplinks a,
.nowraplinks .selflink,
sup.reference a {
white-space: nowrap;
}
}


/* But allow wrapping where desired: */
.skillInfo {
.wrap,
  display: none;
.wraplinks a {
white-space: normal;
}
}


/* Para a documentação das predefinições */
.skillInfo.active {
.template-documentation {
  display: table-cell;
clear: both;
margin: 1em 0 0 0;
border: 1px solid #C0C0C0;
background-color: #ECFCF4;
padding: 1em;
}
}


/* Ícone do [[MediaWiki:WikiLove.js]] */
.skillInfo.active {
#ca-wikilove.icon a {
  display: table-cell;
background-image: url( //upload.wikimedia.org/wikipedia/commons/thumb/8/87/Symbol_thumbs_up.svg/16px-Symbol_thumbs_up.svg.png );
}
}


#ca-wikilove.icon a:hover,
.skillInfo--videoContainer {
#ca-wikilove.icon a:focus {
 
background-position: 5px 60%;
  align-self: center;
background-image: url( //upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Symbol_thumbs_up_color.svg/16px-Symbol_thumbs_up_color.svg.png );
  width: 45%;
}
}


/* Oculta qualquer conteúdo que só é de interesse para grupos específicos de usuários.
.skillInfo--skillVideo2 {
* Torna-se visível novamente por meio de
  display: none;
* - [[MediaWiki:Group-user.css]]
  border-radius: 8px;
* - [[MediaWiki:Group-autoreviewer.css]]
* - [[MediaWiki:Group-eliminator.css]]
* - [[MediaWiki:Group-rollbacker.css]]
* - [[MediaWiki:Group-sysop.css]]
* - [[MediaWiki:Group-bureaucrat.css]]
*/
.bureaucrat-show,
.sysop-show,
.eliminator-show,
.rollbacker-show,
.autoreviewer-show,
.autoconfirmed-show,
.user-show {
display: none;
}
}


/* Make <math display="block"> be left aligned with one space indent for compatibility with style conventions */
.skillInfo--skillVideo2.active {
.mwe-math-fallback-image-display,
  display: flex;
.mwe-math-mathml-display {
margin-left: 1.6em !important;
margin-top: 0.6em;
margin-bottom: 0.6em;
}
}
.mwe-math-mathml-display math {
 
display: inline;
.skillInfo--videoSelector {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: var(--transparent-blue);
  cursor: pointer;
  margin-right: .85em;
 
  transition: all .25s ease;
}
}


/* hidden sortkey for tablesorter */
.skillInfo--videoSelector.active {
td .sortkey,
  background: var(--blue);
th .sortkey {
  transform: scale(.8);
display: none;
speak: none;
}
}


/* Aspas retas para <q> */
.skillInfo--infoContainer {
q {
  width: 50%;
quotes: '"' '"' "'" "'";
}
}


/* Evitar colisão de blockquote com elementos flutuantes ao trocar margem com padding */
.skillInfo>div>.skillInfo--infoContainer b {
blockquote {
  color: #2a87c4 !important;
overflow: hidden;
margin: 1em 0;
padding: 0 40px;
}
}


pre, .mw-code {
.skillInfo--infoContainer>center>b {
overflow-x: hidden;
  font-size: 1.15em;
overflow-wrap: break-word;
}
}


/* Mesmo espaçamento para parágrafos indentados e não-indentados em páginas de discussões */
.skillInfo--name {
.ns-talk .mw-body-content dd {
  font-size: 1.85em;
margin-top: 0.4em;
  letter-spacing: 1px;
margin-bottom: 0.4em;
  text-align: center;
}
}


/* Reajustar estilização em itálico definido pelo agente de utilizador */
.skillInfo--description {
cite, dfn {
  display: inline-block;
font-style: inherit;
  font-size: 1.03em;
  line-height: 1.5em;
  padding: 0 1em;
  height: 12em;
  max-height: 12em;
  overflow-y: auto;
  text-align: justify;
}


.skillInfo--attributesContainer>h1 {
  color: #717171;
  font-size: 1.4em;
  text-align: center;
  letter-spacing: 1px;
}
}


/* Classes genéricas para serifa baseada em Times, classe texhtml para matemática em linha */
/* card attributes */
.times-serif,
.attribute--cardsContainer {
span.texhtml {
  display: flex;
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
  align-items: flex-start;
font-size: 118%;
 
line-height: 1;
  width: fit-content;
  margin: 0 auto;
 
  background: var(--lightGray);
  border: 2px solid var(--gray);
}
}


span.texhtml {
.cardAttribute {
white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 8em;
}
}


span.texhtml span.texhtml {
.cardAttribute--icon {
font-size: 100%;
  margin: .6em 0;
  height: 2em;
}
}


span.mwe-math-mathml-inline {
.cardAttribute--value {
font-size: 118%;
  margin: 0 !important;
 
  font-size: .9em !important;
  font-weight: bold;
  line-height: 1.65em !important;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}
}


/* Forçar exibição tabular e de revestimento para dígitos e texhtml */
/*------------------------------------
.digits,
      WANTED
.texhtml {
      -----------------------------------*/
-moz-font-feature-settings: "lnum", "tnum", "kern" 0;
 
-webkit-font-feature-settings: "lnum", "tnum", "kern" 0;
.selectWanted--container {
font-feature-settings: "lnum", "tnum", "kern" 0;
  display: flex;
font-variant-numeric: lining-nums tabular-nums;
  justify-content: center;
font-kerning: none;
}
}


ol.references,
#selectbox-wanted {
div.reflist {
  padding: .35em .5em;
font-size: 90%;           /* font-size padrão */
  font-family: sans-serif;
margin-bottom: 0.5em;
  letter-spacing: .04em;
  font-size: 1.25em;
  width: 21em;
  border: 2px solid #5684c8;
  border-radius: 6px;
}
}
div.reflist ol.references {
 
font-size: 100%;           /* Resetar font-size quando aninhado em div.reflist */
.wantedPortrait--container {
margin-bottom: 0;          /* Evitar margem dupla quando aninhado em div.reflist */
  width: 100%;
list-style-type: inherit;  /* Habilitar tipos de estilo de lista personalizadoss */
}
}


/* Resetar margem de topo para listas embutidas em colunas */
.wantedPortrait--title {
div.columns {
  width: 100%;
margin-top: 0.3em;
  color: #292929;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: .035em;
}
}
div.columns dl,
 
div.columns ol,
.wantedPortraits {
div.columns ul {
  display: flex;
margin-top: 0;
  flex-wrap: wrap;
}
}


/* Make it possible to hide checkboxes in <inputbox> */
.wantedPortrait {
.inputbox-hidecheckboxes form .inputbox-element,
  box-sizing: border-box;
.inputbox-hidecheckboxes .mw-ui-checkbox {
  width: 18em;
display: none !important;
  padding: .35em;
}
}


/* Ajuste na cor do símbolo de não-patrulhado nas [[WP:Mudanças recentes]], em conformidade com o [[WP:Padrão visual]] */
.wantedPortrait img {
abbr.unpatrolled {
  width: 100%;
    color: #B60000
}
}


/* Confetes do [[Mediawiki:Sitenotice]] dos 20 anos */
@media screen and (max-width: 1440px) {
.top-banner-20 {
  :root {
  background: url( "//upload.wikimedia.org/wikipedia/donate/0/08/Wikipedia20_banner_backgroundtop2.svg" );
    font-size: 14px;
  background-size: auto 36px;
  }
  background-repeat: repeat-x;
 
  position: absolute;
  .characterInfo--contentContainer {
  width: 100%;
    padding: .6em;
  height: 36px;
  }
  overflow: hidden;
 
  z-index: 0;
  .characterInfo--infoContainer {
  margin-right: 149px;
    width: 65%;
  }
 
  .characterInfo--imageContainer {
    width: 35%;
  }
 
  .tabSkill--container {
    max-width: 61em;
    margin: 0 auto;
  }
 
  .tab-skill>div>img {
    max-width: 38px;
  }
 
}
}
.bottom-banner-20 {
 
     background: url( "//upload.wikimedia.org/wikipedia/donate/c/c9/Wikipedia20_banner_backgroundbottom2.svg" );
@media screen and (max-width: 1220px) {
     background-size: auto 36px;
  .tabSkill--container {
     background-repeat: repeat-x;
    max-width: 48em;
  }
}
 
 
@media screen and (max-width: 1024px) {
 
  .flex-wrap-md {
    flex-wrap: wrap;
  }
 
  .justify-center-md {
    justify-content: center;
  }
 
  .initialPage--mainContainer {
    flex-wrap: wrap;
  }
 
  .initialPage--menuContainer {
    width: 100%;
    margin-right: 0;
  }
 
  .initialPage--sideMenuContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 1.5em;
  }
 
  .initialPage--sideMenuContainer .card {
    width: 45%;
    min-height: 15em;
  }
 
  #event-time {
    bottom: 5%;
    right: 5%;
    font-size: 1.25em;
  }
 
  .initialPage--socialMediaContainer {
    margin-top: 2em;
    display: flex;
    justify-content: space-between;
  }
 
  .initialPage--socialMedia {
    width: 32%;
  }
 
  #p-search {
    margin-right: 1em;
  }
 
  .filter--containerSearch {
    justify-content: center;
  }
 
  .filter--container {
     margin-top: 1em;
    flex-wrap: wrap;
    justify-content: center;
  }
 
  .filter:last-of-type {
    margin-top: 1em;
  }
 
  #characters-container>div {
    width: 24%;
  }
 
  .characterPage--splashArt {
    display: none;
  }
 
  .characterPage--table>tbody>.characterPage--mainSection {
    width: 100%;
    justify-content: flex-start;
  }
 
  .characterPage--characterInfoContainer {
    width: 38%;
  }
 
  .characterPage--statsInfoContainer {
    width: 30%;
    margin-left: 1.5%;
  }
 
  .stats--container>div {
    width: 100%;
  }
 
  .characterInfo--contentContainer {
    flex-wrap: wrap;
  }
 
  .characterInfo--imageContainer {
    width: 100%;
    display: flex;
    justify-content: center;
  }
 
  .characterInfo--medal {
    margin-top: -2.5em;
  }
 
  .characterInfo--infoContainer {
    width: 100%;
  }
 
  .tabsContainer {
    width: 100%;
  }
 
  .tab-skill {
    min-width: 3.5em;
  }
 
  .tab-skill>div>img {
    max-width: 36px;
  }
 
  .skillInfo>div {
    flex-wrap: wrap-reverse;
  }
 
  .skillInfo--infoContainer {
    width: 100%;
  }
 
  .skillInfo--infoContainer>center>b {
    font-size: 1.2em;
  }
 
  .skillInfo--name {
    font-size: 2.2em !important;
    letter-spacing: 1px;
    margin-top: .5em !important;
    text-align: center;
  }
 
  .skillInfo--description {
     font-size: 1.35em !important;
    display: table;
    margin: 1em !important;
 
    height: 5em;
    max-height: 5em;
  }
 
  .skillInfo--videoContainer {
    width: 100%;
    margin: 0 auto;
     padding: 1em 10em;
    padding-bottom: 1em;
  }
 
  .cardAttribute--value {
    letter-spacing: 1px;
    font-size: 1.1em;
  }
 
  .characterPage--table>tbody>.characterPage--sideSection {
    width: 30%;
    padding-left: 1.5%;
     position: absolute;
     position: absolute;
    top: 0;
    right: 0;
  }
  .skins--imageSkin {
     width: 100%;
     width: 100%;
     height: 36px;
  }
     overflow: hidden;
 
     transform: translateY(-36px);
  .skins--container {
    margin-right: 149px;
     max-height: 14em;
     overflow-x: clip;
     overflow-y: auto;
  }
 
  .skins--container span {
    width: 50%;
  }
 
  .calcXp--formItem {
    justify-content: center;
  }
 
  .calcXp--container:last-of-type {
    margin-top: 2em;
  }
 
  #p-tb h3 {
    display: none;
  }
 
}
 
/*******************************************************************************
      PRESET: ABAS
      *******************************************************************************/
.tabela-abas {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  margin-bottom: 20px;
}
 
.mostrar-aba {
  cursor: pointer;
  padding: 0;
  background-color: transparent;
  text-align: center;
  border: none;
  position: relative;
  transition: all 0.2s ease-in-out;
}
 
.imagem-botao {
  display: inline-block;
  width: auto;
  height: auto;
}
 
.sec-aba-cem {
  padding: 5px;
  font-weight: bold;
  text-align: center;
  color: #333;
}
 
.mostrar-aba img {
  border: none;
  background-color: transparent;
  margin: 5px;
}
 
.mostrar-aba:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.4);
  /* Barrinha sutil ao passar o mouse */
}
 
.mostrar-aba:hover img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
  /* Sombra leve ao passar o mouse */
}
 
.mostrar-aba:active img {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}
 
.mostrar-aba.ativa::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #000;
}
 
.preset-aba {
  margin: 0;
  padding: 0;
}
 
.container-conteudo {
  margin: 0;
  padding: 0;
}
 
.aba {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-top: 20px;
}
 
.aba.atual {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
 
.container-coliseu {
  display: block;
  text-align: center;
}
 
.coluna-abas {
  flex: 0 0 200px;
  margin-right: 20px;
}
}

Edição atual tal como às 05h14min de 21 de junho de 2026

/* CSS placed here will be applied to all skins */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600;700&family=Source+Sans+3:wght@600;700&display=swap');

/* GLA palette — Direção A (atmosfera) */
:root {
  /* ---- LIGHT ---- */
  --gla-page-bg: #C4CED8;
  --gla-surface: #ECF0F4;
  --gla-surface-alt: #DFE6EE;
  --gla-border: #AEBBC6;
  --gla-tab-inactive: #D0DAE3;
  --gla-link: #1D5CA8;
  --gla-accent: #2F6FE0;
  /* compat */
  --gla-chrome-border: var(--gla-border);

  /* ---- DARK (Direção A) — cores diretas, sem filter invert ---- */
  --gla-dark-bg: #060708;
  --gla-dark-chrome: #272728;
  --gla-dark-chrome-panel: #353a42;
  --gla-dark-tab-inactive: #3a3d42;
  /* compat: nomes antigos apontam para as mesmas cores finais */
  --gla-dark-preinvert: var(--gla-dark-chrome);
  --gla-dark-panel-preinvert: var(--gla-dark-chrome-panel);
  /* #content */
  --gla-dark-content-bg: #2a2d32;
  --gla-dark-content-panel: #353a42;
  --gla-dark-text: #d7d5cf;
  --gla-dark-heading: #e6e4dd;
  --gla-dark-border: #aaaaaa;
  --gla-dark-link: #6ba8dc;
  --gla-dark-link-visited: #a898d4;

  /* Sidebar nav caps */
  --gla-nav-accent: var(--gla-accent, #2F6FE0);
  --gla-nav-accent-2: #1D5CA8;
  --gla-nav-cap: #D3DCE6;
  --gla-nav-panel: var(--gla-surface-alt, #DFE6EE);
  --gla-nav-border: var(--gla-border, #AEBBC6);
  --gla-nav-ink: #34465C;
  --gla-nav-link: var(--gla-link, #1D5CA8);
  --gla-nav-shadow: rgba(20, 34, 56, 0.16);
  --gla-nav-cap-dark: #bcbec4;
  --gla-nav-panel-dark: #c4c6cc;
  --gla-nav-ink-dark: #15181d;
  --gla-nav-font: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --gla-nav-link-font: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --gla-nav-link-size: 14px;
}

/* Sidebar START — Discord grande + redes (estilo vampire.survivors.wiki) */

#p-logo {
  margin-bottom: 14px;
}

#p-Navigation .vector-menu-content-list {
  display: block;
}

#p-Navigation .vector-menu-content-list li {
  display: list-item;
  float: none;
  width: auto;
}

#n-recentchanges,
#n-randompage {
  display: list-item;
}

/* --- Discord (portal próprio, botão largo) --- */
#p-Discord-label {
  display: none;
}

#p-Discord.vector-menu-portal {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0 8px 0 5px;
  padding: 0;
}

#p-Discord .vector-menu-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#n-Discord {
  font-size: 12px;
  line-height: 1;
  list-style: none;
  margin: 0;
  width: 100%;
}

#n-Discord a {
  color: #fff !important;
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid #4c57d0;
  background-color: #5865f2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  position: relative;
  line-height: 1;
  padding: 7px 8px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
  box-sizing: border-box;
  width: 100%;
  min-height: 32px;
  white-space: nowrap;
  text-align: center;
}

#n-Discord a::before {
  content: none;
}

#n-Discord .gla-discord-icon {
  flex-shrink: 0;
  display: block;
  width: 16px;
  height: 12px;
  background: url('https://wiki.gla.com.br/images/e/e9/Discord-icon.png') no-repeat center center;
  background-size: 16px 12px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

#n-Discord .gla-discord-text {
  display: inline-block;
  font-weight: normal;
  line-height: 1;
  transform: translateY(1px);
}

#n-Discord .gla-discord-text strong {
  font-weight: bold;
}

#n-Discord a::after {
  content: none;
  display: none;
}

#n-Discord:hover a {
  text-decoration: none !important;
  background-color: #7885ff;
  border-color: #6c77f0;
}

/* --- Instagram + TikTok (ícones menores) --- */
#p-Redes-label {
  display: none;
}

#p-Redes.vector-menu-portal {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0 8px 12px 5px;
  padding: 0;
}

#p-Redes .vector-menu-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#p-Redes .vector-menu-content-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc((100% - 4 * 35px) / 3);
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#p-Redes .vector-menu-content-list li {
  list-style: none;
  margin: 0;
  flex: 0 0 auto;
}

#p-Redes .vector-menu-content-list a {
  display: block;
  font-size: 0;
  line-height: 0;
  padding: 0;
  color: transparent !important;
  text-decoration: none !important;
}

#n-Instagram a::before,
#n-TikTok a::before,
#n-YouTube a::before,
#n-Facebook a::before {
  content: ' ';
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 15%;
  overflow: hidden;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

#n-Instagram a::before {
  background-image: url('https://wiki.gla.com.br/images/8/8a/Instagram-icon.png');
}

#n-TikTok a::before {
  background-image: url('https://wiki.gla.com.br/images/6/6e/Tiktok-icon.png');
}

#n-YouTube a::before {
  background-image: url('https://wiki.gla.com.br/images/0/03/Youtube-icon.png');
}

#n-Facebook a::before {
  background-image: url('https://wiki.gla.com.br/images/d/dd/Facebook-icon.png');
}

#p-Redes .vector-menu-content-list span {
  display: none;
}

#p-Redes .vector-menu-content-list a:hover {
  filter: brightness(1.15);
  text-decoration: none !important;
}

.client-darkmode #n-Discord a,
.skin-theme-clientpref-night #n-Discord a {
  color: #fff !important;
  background-color: #5865f2;
  border-color: #4c57d0;
}

.client-darkmode #n-Discord:hover a,
.skin-theme-clientpref-night #n-Discord:hover a {
  color: #fff !important;
  background-color: #7885ff;
  border-color: #6c77f0;
}

/* Sidebar END */
/* Changes applied to the vector skin for all users */
/* Try to use only for things "outside" the content, prefer a more specific .css file for other features */

/* GLA site background — PNG + fallback page-bg (não branco do browser) */
html {
  background-color: var(--gla-page-bg, #C4CED8);
}

html.client-darkmode,
html.skin-theme-clientpref-night {
  background-color: var(--gla-dark-bg, #060708);
}

body {
  background-color: transparent;
  background-image: none;
}

/* Camada sólida atrás da PNG — transparente da arte mostra page-bg, não #fff */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--gla-page-bg, #C4CED8);
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--gla-page-bg, #C4CED8);
  background-image: url(https://wiki.gla.com.br/images/c/c1/Water7Background.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  background-attachment: fixed;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Dark: PNG invertida — 100% auto (arte no topo, preto embaixo) */
html.client-darkmode::before,
html.skin-theme-clientpref-night::before {
  background-color: var(--gla-dark-bg, #060708);
  background-image: url(https://wiki.gla.com.br/images/2/2b/Water7Background_Inverted.png) !important;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: none !important;
  -webkit-filter: none !important;
}

html.client-darkmode,
html.skin-theme-clientpref-night,
html.client-darkmode::after,
html.skin-theme-clientpref-night::after {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Dark: fallback atrás da PNG (fora do filter do body) — classe está no próprio html */
html.client-darkmode::after,
html.skin-theme-clientpref-night::after {
  background-color: var(--gla-dark-bg, #060708);
}

@media (max-width: 768px) {
  html::before {
    background-attachment: scroll;
  }
}

#mw-page-base {
  background-image: none;
  background-color: rgba(0, 0, 0, 0);
}

#mw-head div.vectorMenu h3 {
  background-image: none;
}

div.vectorMenu h3 span {
  padding-top: 1em;
}

div.vectorTabs {
  border-top: 1px solid var(--gla-border);
  height: 2.2em;
}

div.vectorTabs li a {
  height: 1.95em;
}

div.vectorTabs span a {
  padding-top: 0.8em;
}

#p-personal {
  top: 0;
  right: 0;
  background-color: var(--gla-surface-alt);
  padding: 0.15em 0.75em 0.15em 0;
  border-radius: 0 0 0 5px;
  display: flex;
  align-items: center;
  min-height: 2em;
  box-sizing: border-box;
}

#p-personal ul {
  padding-left: 0;
}

#p-personal .vector-menu-content-list {
  align-items: center !important;
}

#p-personal li {
  float: none;
  padding-top: 0 !important;
  margin-left: 0.75em;
  line-height: 1.35;
  display: flex;
  align-items: center;
}

/* Remove ícone de avatar do Vector em Admin / anon */
#pt-userpage a,
#pt-anonuserpage {
  background-image: none !important;
  background-size: 0 !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
}

#pt-userpage {
  padding-top: 0 !important;
}

#p-logo {
  padding-top: 0;
}

#content {
  box-shadow: rgba(0, 0, 0, 0.15) 0 0.1em 0.75em;
  background-color: var(--gla-surface);
  background-image: none;
  margin-top: -1px;
  border: 1px solid var(--gla-border);
  border-right-width: 0;
}

#firstHeading,
h1.firstHeading {
  border-bottom: 0 !important;
  margin-bottom: 0.25em;
  padding-bottom: 0;
  font-family: var(--gla-nav-font);
  color: inherit;
}

/* Home: fade sólido no topo → transparente (mesmo visual no dark — conteúdo não escurece) */
body.page-Main_Page #content.mw-body,
body.page-Página_principal #content.mw-body {
  background-color: var(--gla-surface);
  background-image: linear-gradient(to bottom, var(--gla-surface) 0%, rgba(236, 240, 244, 0.92) 120px, rgba(196, 206, 216, 0) 520px);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 520px;
  background-attachment: scroll;
}

#simpleSearch {
  margin-top: 0.35em;
}

#p-personal {
  text-shadow: 0 0 2px #FEFEFE, 0 0 4px var(--gla-surface-alt);
}

#pt-anonuserpage {
  margin-bottom: 0.8em;
}

/* Fix the More Tab and SearchBar — chrome completo no bloco GLA chrome (final do common.css) */
#p-search,
#p-cactions {
  background-image: none;
}

/* Background Ends Here */
/* =============================================================================
   Dark mode — Direção A (sem filter invert)
   • html::before: PNG escura (Water7Background_Inverted.png)
   • Chrome + #content: cores explícitas — logo/imagens ficam normais
   ============================================================================= */

.darkmode-link:before {
  content: none;
  display: none;
}

.client-darkmode body,
.skin-theme-clientpref-night body {
  filter: none !important;
  -webkit-filter: none !important;
  color: var(--gla-dark-text);
}

.client-darkmode #content.mw-body,
.skin-theme-clientpref-night #content.mw-body {
  background-color: var(--gla-dark-content-bg) !important;
  color: var(--gla-dark-text) !important;
  border-color: var(--gla-dark-border) !important;
}

.client-darkmode body.page-Main_Page #content.mw-body,
.skin-theme-clientpref-night body.page-Main_Page #content.mw-body,
.client-darkmode body.page-Página_principal #content.mw-body,
.skin-theme-clientpref-night body.page-Página_principal #content.mw-body {
  background-color: var(--gla-dark-content-bg) !important;
  background-image: linear-gradient(to bottom,
      var(--gla-dark-content-bg) 0%,
      rgba(42, 45, 50, 0.92) 120px,
      rgba(6, 7, 8, 0) 520px) !important;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 520px;
  background-attachment: scroll;
}

.client-darkmode #content.mw-body h1,
.client-darkmode #content.mw-body h2,
.client-darkmode #content.mw-body h3,
.client-darkmode #content.mw-body h4,
.client-darkmode #content.mw-body h5,
.client-darkmode #content.mw-body h6,
.skin-theme-clientpref-night #content.mw-body h1,
.skin-theme-clientpref-night #content.mw-body h2,
.skin-theme-clientpref-night #content.mw-body h3,
.skin-theme-clientpref-night #content.mw-body h4,
.skin-theme-clientpref-night #content.mw-body h5,
.skin-theme-clientpref-night #content.mw-body h6,
.client-darkmode #mw-content-text,
.skin-theme-clientpref-night #mw-content-text {
  color: var(--gla-dark-heading) !important;
  border-color: var(--gla-dark-border) !important;
}

.client-darkmode #content.mw-body p,
.client-darkmode #content.mw-body li,
.skin-theme-clientpref-night #content.mw-body p,
.skin-theme-clientpref-night #content.mw-body li {
  color: var(--gla-dark-text) !important;
}

.client-darkmode #content.mw-body .mw-parser-output a:not(.external):not(.extiw):not(.new),
.skin-theme-clientpref-night #content.mw-body .mw-parser-output a:not(.external):not(.extiw):not(.new) {
  color: var(--gla-dark-link) !important;
}

.client-darkmode #content.mw-body .mw-parser-output a:visited,
.skin-theme-clientpref-night #content.mw-body .mw-parser-output a:visited {
  color: var(--gla-dark-link-visited) !important;
}

.client-darkmode #content.mw-body table,
.client-darkmode #content.mw-body .wikitable,
.client-darkmode #content.mw-body .infobox,
.client-darkmode #content.mw-body .toc,
.skin-theme-clientpref-night #content.mw-body table,
.skin-theme-clientpref-night #content.mw-body .wikitable,
.skin-theme-clientpref-night #content.mw-body .infobox,
.skin-theme-clientpref-night #content.mw-body .toc {
  background-color: var(--gla-dark-content-panel) !important;
  color: var(--gla-dark-text) !important;
  border-color: var(--gla-dark-border) !important;
}

.client-darkmode #content.mw-body pre,
.client-darkmode #content.mw-body code,
.skin-theme-clientpref-night #content.mw-body pre,
.skin-theme-clientpref-night #content.mw-body code {
  background-color: #1a1d22 !important;
  color: var(--gla-dark-text) !important;
  border-color: var(--gla-dark-border) !important;
}

/* Home — gradiente GLA (não Tailwind genérico) */
.client-darkmode #content.mw-body .home-card,
.skin-theme-clientpref-night #content.mw-body .home-card {
  background: var(--gla-dark-content-panel) !important;
  color: var(--gla-dark-text) !important;
  border-color: var(--gla-dark-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.client-darkmode #content.mw-body .home-title,
.skin-theme-clientpref-night #content.mw-body .home-title {
  background: linear-gradient(to bottom, #459cca, #5684c8) !important;
  color: #ffffff !important;
}

.client-darkmode #content.mw-body .home-button-item,
.skin-theme-clientpref-night #content.mw-body .home-button-item {
  background: #1a1d22 !important;
  border-color: var(--gla-dark-border) !important;
}

.client-darkmode #content.mw-body .home-button-title,
.skin-theme-clientpref-night #content.mw-body .home-button-title {
  background: #252830 !important;
  color: #8ec5f0 !important;
}

.client-darkmode #content.mw-body .index-cell,
.skin-theme-clientpref-night #content.mw-body .index-cell {
  background: #1a1d22 !important;
  color: var(--gla-dark-text) !important;
  border-color: var(--gla-accent) !important;
}


/* =============================================================================
   GLA palette — Direção A (page / surface / panel)
   ============================================================================= */

html:not(.client-darkmode):not(.skin-theme-clientpref-night) body,
html.skin-theme-clientpref-day body {
  background-color: transparent !important;
}

html:not(.client-darkmode):not(.skin-theme-clientpref-night) .mw-body,
html.skin-theme-clientpref-day .mw-body,
html:not(.client-darkmode):not(.skin-theme-clientpref-night) #content.mw-body,
html.skin-theme-clientpref-day #content.mw-body {
  background-color: var(--gla-surface);
}

/* Home mantém fade + mapa (regra acima só define cor base) */
html:not(.client-darkmode):not(.skin-theme-clientpref-night) body.page-Main_Page #content.mw-body,
html:not(.client-darkmode):not(.skin-theme-clientpref-night) body.page-Página_principal #content.mw-body,
html.skin-theme-clientpref-day body.page-Main_Page #content.mw-body,
html.skin-theme-clientpref-day body.page-Página_principal #content.mw-body {
  background-color: var(--gla-surface);
}

/* Dark: fundo profundo no html + ::after; body/chrome ficam transparentes p/ ver a PNG */
html.client-darkmode,
html.skin-theme-clientpref-night {
  background-color: var(--gla-dark-bg, #060708) !important;
}

html.client-darkmode::after,
html.skin-theme-clientpref-night::after {
  background-color: var(--gla-dark-bg, #060708) !important;
}

.client-darkmode body,
.skin-theme-clientpref-night body {
  background-color: transparent !important;
}

/* =============================================================================
   GLA chrome — abas + #content (borda neutra, sem gradiente Vector)
   ============================================================================= */

/* Abas 2.05em: recua #mw-head-base para colar #content nas abas */
#mw-page-base {
  height: 4.55em !important;
}

#mw-head-base {
  height: 4.55em !important;
  margin-top: -4.55em !important;
}

#left-navigation {
  margin-top: 2.5em !important;
  margin-bottom: -2.05em !important;
}

#right-navigation {
  margin-top: 2.5em !important;
}

/* Mata gradiente/separador azul do Vector em li e a */
#mw-head .vector-menu-tabs,
#mw-head .vector-menu-tabs li,
#mw-head .vector-menu-tabs li a,
#mw-head .vector-menu-tabs .vector-menu-content-list>li,
#mw-head .vector-menu-tabs .vector-menu-content-list>li>a {
  background-image: none !important;
}

#mw-head .vector-menu-tabs .vector-menu-content,
#mw-head .vector-menu-tabs .vector-menu-content-list {
  height: 100%;
  margin: 0;
  padding: 0;
}

#mw-head .vector-menu-tabs {
  height: 2.05em !important;
  padding-left: 0 !important;
  box-sizing: border-box;
  border-top: 1px solid var(--gla-border) !important;
}

#left-navigation #p-namespaces.vector-menu-tabs {
  border-left: 1px solid var(--gla-border) !important;
}

#right-navigation #p-views.vector-menu-tabs {
  border-left: 1px solid var(--gla-border) !important;
}

#mw-head .vector-menu-tabs .vector-menu-content-list>li {
  display: block !important;
  float: left !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.125em !important;
  box-sizing: border-box;
  background: var(--gla-tab-inactive) !important;
  border-right: 1px solid var(--gla-border) !important;
}

#mw-head .vector-menu-tabs .vector-menu-content-list>li.selected {
  background: var(--gla-surface) !important;
  margin-bottom: -1px !important;
  border-bottom: 1px solid var(--gla-surface) !important;
  position: relative;
  z-index: 2;
}

#mw-head .vector-menu-tabs .vector-menu-content-list>li>a {
  display: block !important;
  float: left !important;
  height: 2.05em !important;
  line-height: 1.125em !important;
  padding: 0.55em 8px 0 !important;
  font-size: 0.8125em !important;
  box-sizing: border-box;
  background: transparent !important;
  color: #0645ad;
}

#mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a,
#mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a:visited {
  color: #202122 !important;
  text-decoration: none !important;
}

/* Estrela vigia — só ícone (hack Vector TabWatchstarLink) */
#mw-head .vector-menu-tabs .vector-menu-content-list>li.icon>a {
  width: 2.15384615em !important;
  height: 0 !important;
  padding: 2.05em 0 0 0 !important;
  line-height: 0 !important;
  font-size: 0.8125em !important;
  overflow: hidden !important;
  color: transparent !important;
  text-indent: -99999px !important;
  white-space: nowrap !important;
  position: relative !important;
  box-sizing: content-box !important;
}

#mw-head .vector-menu-tabs .vector-menu-content-list>li.icon>a::before {
  display: block !important;
  position: absolute !important;
  top: 0.35em !important;
  left: 0.38461538em !important;
  width: 1.23076923em !important;
  height: 1.23076923em !important;
  margin: 0 !important;
  text-indent: 0 !important;
}

/* Mais + busca — mesma faixa das abas */
#right-navigation #p-cactions.vector-menu-dropdown {
  height: 2.05em !important;
  box-sizing: border-box;
  border-top: 1px solid var(--gla-border) !important;
  background: var(--gla-tab-inactive) !important;
}

#right-navigation #p-cactions .vector-menu-heading {
  display: block !important;
  position: relative !important;
  float: left !important;
  height: 2.05em !important;
  line-height: 1.125em !important;
  margin: 0 -1px 0 0 !important;
  padding: 0.55em 1.84615385em 0 8px !important;
  font-size: 0.8125em !important;
  box-sizing: border-box;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-right: 1px solid var(--gla-border) !important;
  font-weight: normal;
  color: #0645ad;
  cursor: pointer;
}

#right-navigation #p-cactions .vector-menu-heading::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0.35em !important;
  right: 8px !important;
  bottom: 0 !important;
  width: 1.23076923em !important;
  height: 1.23076923em !important;
  margin: 0 !important;
  opacity: 0.87;
}

/* Dropdown “Mais” — top alinhado à altura das abas (2.05em, não 2.5em do Vector) */
#right-navigation #p-cactions.vector-menu-dropdown {
  position: relative !important;
}

#right-navigation #p-cactions .vector-menu-content {
  top: 2.05em !important;
  right: -1px !important;
  left: auto !important;
  min-width: 100% !important;
  box-sizing: border-box;
  z-index: 100 !important;
  border-top: 1px solid var(--gla-border) !important;
  background-color: var(--gla-surface) !important;
  border-color: var(--gla-border) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* “Mais” — checkbox manda; hover do Vector legacy não pode manter aberto ao desmarcar */
#right-navigation #p-cactions.vector-menu-dropdown .vector-menu-checkbox:not(:checked)~.vector-menu-content {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#right-navigation #p-cactions.vector-menu-dropdown .vector-menu-checkbox:checked~.vector-menu-content {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#right-navigation #p-cactions .vector-menu-content-list li a {
  padding: 0.5em 0.75em !important;
}

.client-darkmode #right-navigation #p-cactions .vector-menu-content,
.skin-theme-clientpref-night #right-navigation #p-cactions .vector-menu-content {
  background-color: var(--gla-dark-panel-preinvert) !important;
  border-color: var(--gla-dark-border) !important;
}

#right-navigation #p-search {
  height: 2.05em !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  border-top: 1px solid var(--gla-border) !important;
  background: var(--gla-tab-inactive) !important;
  padding: 0 0.5em !important;
  margin: 0 0 0 0.5em !important;
}

#right-navigation #p-search form {
  margin: 0 !important;
  width: 100%;
}

#right-navigation #simpleSearch {
  margin-top: 0 !important;
  height: auto;
  width: 100%;
}

#right-navigation #searchInput {
  height: 1.85em !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: var(--gla-surface) !important;
  border-color: var(--gla-border) !important;
  box-sizing: border-box;
}

#p-personal {
  background-color: var(--gla-surface-alt) !important;
  padding: 0.15em 0.75em 0.15em 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 2em !important;
  box-sizing: border-box !important;
}

#p-personal .vector-menu-content-list {
  align-items: center !important;
}

#p-personal li {
  padding-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.35 !important;
}

#pt-userpage a,
#pt-anonuserpage {
  background-image: none !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
}

.mw-parser-output pre,
.mw-parser-output code,
.mw-parser-output .mw-code,
pre,
code,
.mw-code {
  background-color: var(--gla-surface-alt) !important;
  color: #2b2a23 !important;
  border-color: var(--gla-border) !important;
}

/* Links — conteúdo e sidebar (claro) */
html:not(.client-darkmode):not(.skin-theme-clientpref-night) #content.mw-body .mw-parser-output a:not(.external):not(.extiw):not(.new),
html.skin-theme-clientpref-day #content.mw-body .mw-parser-output a:not(.external):not(.extiw):not(.new),
html:not(.client-darkmode):not(.skin-theme-clientpref-night) #mw-panel a,
html.skin-theme-clientpref-day #mw-panel a {
  color: var(--gla-link);
}

/* Infobox — painel + título de marca (claro) */
html:not(.client-darkmode):not(.skin-theme-clientpref-night) .infobox,
html:not(.client-darkmode):not(.skin-theme-clientpref-night) .infobox_v2,
html.skin-theme-clientpref-day .infobox,
html.skin-theme-clientpref-day .infobox_v2 {
  background-color: var(--gla-surface-alt);
  border-color: var(--gla-border);
}

html:not(.client-darkmode):not(.skin-theme-clientpref-night) .infobox th,
html:not(.client-darkmode):not(.skin-theme-clientpref-night) .infobox_v2 th,
html.skin-theme-clientpref-day .infobox th,
html.skin-theme-clientpref-day .infobox_v2 th {
  color: var(--gla-accent);
}

/* --- Dark mode chrome (cores diretas) --- */
.client-darkmode #mw-page-base,
.skin-theme-clientpref-night #mw-page-base,
.client-darkmode #mw-head-base,
.skin-theme-clientpref-night #mw-head-base {
  background: transparent !important;
  background-image: none !important;
}

.client-darkmode #mw-head .vector-menu-tabs,
.skin-theme-clientpref-night #mw-head .vector-menu-tabs {
  border-top-color: var(--gla-dark-border) !important;
}

.client-darkmode #left-navigation #p-namespaces.vector-menu-tabs,
.skin-theme-clientpref-night #left-navigation #p-namespaces.vector-menu-tabs {
  border-left-color: var(--gla-dark-border) !important;
}

.client-darkmode #mw-head .vector-menu-tabs .vector-menu-content-list>li,
.skin-theme-clientpref-night #mw-head .vector-menu-tabs .vector-menu-content-list>li {
  background: var(--gla-dark-tab-inactive) !important;
  border-right-color: var(--gla-dark-border) !important;
}

.client-darkmode #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected,
.skin-theme-clientpref-night #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected {
  background: var(--gla-dark-content-bg) !important;
  border-bottom-color: var(--gla-dark-content-bg) !important;
}

.client-darkmode #mw-head .vector-menu-tabs .vector-menu-content-list>li>a,
.skin-theme-clientpref-night #mw-head .vector-menu-tabs .vector-menu-content-list>li>a {
  color: var(--gla-dark-link) !important;
}

.client-darkmode #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a,
.client-darkmode #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a:visited,
.skin-theme-clientpref-night #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a,
.skin-theme-clientpref-night #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a:visited {
  color: var(--gla-dark-heading) !important;
}

.client-darkmode #right-navigation #p-cactions.vector-menu-dropdown,
.skin-theme-clientpref-night #right-navigation #p-cactions.vector-menu-dropdown,
.client-darkmode #right-navigation #p-search,
.skin-theme-clientpref-night #right-navigation #p-search {
  background: var(--gla-dark-tab-inactive) !important;
  border-top-color: var(--gla-dark-border) !important;
}

.client-darkmode #right-navigation #p-cactions .vector-menu-heading,
.skin-theme-clientpref-night #right-navigation #p-cactions .vector-menu-heading {
  border-right-color: var(--gla-dark-border) !important;
  color: var(--gla-dark-link) !important;
}

.client-darkmode #p-personal,
.skin-theme-clientpref-night #p-personal {
  background-color: var(--gla-dark-chrome) !important;
}

.client-darkmode #p-personal a,
.skin-theme-clientpref-night #p-personal a {
  color: var(--gla-dark-link) !important;
}

.client-darkmode #mw-head #simpleSearch,
.skin-theme-clientpref-night #mw-head #simpleSearch,
.client-darkmode #mw-head #searchInput,
.skin-theme-clientpref-night #mw-head #searchInput,
.client-darkmode #mw-head table,
.skin-theme-clientpref-night #mw-head table,
.client-darkmode .mw-notification,
.skin-theme-clientpref-night .mw-notification {
  background-color: var(--gla-dark-chrome-panel);
  border-color: var(--gla-dark-border);
  color: var(--gla-dark-text);
}

.client-darkmode #mw-panel a,
.skin-theme-clientpref-night #mw-panel a {
  color: var(--gla-dark-link) !important;
}

/* =============================================================================
   Visitantes (não logados) — ocultar chrome de edição / ferramentas
   Detecta anon pelo link "Entrar" (#pt-login) no menu pessoal.
   Nota: CSS só esconde na tela; URLs diretas ainda funcionam sem permissão PHP.
   ============================================================================= */
body:has(#pt-login) #p-views,
body:has(#pt-login) #p-cactions,
body:has(#pt-login) #p-tb,
body:has(#pt-login) nav#p-tb {
  display: none !important;
}

/* Footer — ocultar lastmod + links padrão MediaWiki */
#footer-info-lastmod,
#footer-places-privacy,
#footer-places-about,
#footer-places-disclaimer {
  display: none !important;
}

/* =============================================================================
   GLA pages legacy (provisório)
   ============================================================================= */

/* =============================================================================
   GLA pages legacy (provisório) — personagens, filtros, skills, wanted, abas
   Extraído de antigo_common.css
   ============================================================================= */

:root {
  --lightGray: rgba(240, 240, 240);
  --gray: rgb(190, 190, 190);
  --transparent-blue: #338be58c;
  --blue: #338be5;
}


margin-top: 1.5em;
}

.mt-4 {
  margin-top: 3em;
}

.mt--4 {
  margin-top: -2em;
}

.mb-2 {
  margin-bottom: 1em;
}


.d-flex,
.td-flex td {
  display: flex;
}

.d-block {
  display: block;
}

.relative {
  position: relative;
}

.text-justify {
  text-align: justify;
}

.align-center {
  align-items: center;
}

.align-top {
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.border-none {
  border: none !important;
}

.w-25 {
  width: 25%;
}

.h-100 {
  height: 100%;
}

.flex-wrap {
  flex-wrap: wrap;
}

.section-title {
  display: block;
  border-radius: 8px;
  background: linear-gradient(to bottom, #459cca, #5684c8);
  width: fit-content;
  color: white;
  padding: .25em 5em;
  letter-spacing: 1px;
}

.badge {
  padding: .25em .57em;
  margin: .45em;
  border-radius: 6px;
  color: white;
  font-weight: bold;
  text-transform: capitalize;
  white-space: nowrap;
  max-height: 1.5em;
  font-size: .9em;
  letter-spacing: 1px;
  box-shadow: rgb(3 102 214 / 30%) 0px 0px 0px 3px;
  background: linear-gradient(to bottom, #459cca, #5684c8);
}

.card {
  width: 100%;
  min-height: 14em;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: rgb(0 0 0 / 9%) 0px 3px 12px;
}

.card-title {
  display: block;
  padding: .25em 0;
  margin-bottom: 1em;
  width: 100%;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(to bottom, #459cca, #5684c8);

  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1px;
  color: white;
}

.scaleUp-hover {
  transition: all .25s ease;
  image-rendering: auto;
  /* ou crisp-edges */
}

.scaleUp-hover:hover {
  transform: scale(1.1);
}

/*
      PERSONAGENS
      */

.filter--containerSearch {
  display: flex;
  padding: 0 2em;
  justify-content: flex-end;
  align-items: center;
}

.filter--container {
  display: flex;
  padding: 0 2em;
  justify-content: space-between;
  align-items: center;
}

.filter {
  width: fit-content;
  display: flex;
  justify-content: center;
  border: 3px solid #b0cff1;
  border-collapse: collapse;
  border-radius: 8px;
}

.filter--title {
  display: flex;
  border-right: 3px solid #b0cff1;
  background: #4c91c9;
  padding: 0 1em;
  align-items: center;
  border-radius: 4px 0 0 4px;
  font-size: 1.2em;
  letter-spacing: .15em;
  font-weight: bold;
  color: white;
}

.filter--icon,
.calcXp--tierIcon {
  padding: .35em .95em;
  background: transparent;
  cursor: pointer;
}

.filter--icon.tier img {
  filter: grayscale(.0);
}

.filter--icon.tier.active img {
  box-shadow: none;
}

.filter--icon img {
  filter: grayscale(.8);
  border-radius: 10px;

  transition: all .25s ease;
}

.calcXp--tierIcon img {
  filter: drop-shadow(0px 1px 8px #4c91c900);
  border-radius: 10px;

  transition: all .25s ease;
}

.filter--icon.active img {
  box-shadow: rgb(0 0 0 / 24%) 0px 2px 7px;
  filter: grayscale(0);
}

.filter--icon.tier.active img,
.calcXp--tierIcon.active img {
  transform: scale(.85);
}

.filter--icon.tier#bronze.active img,
.calcXp--tierIcon#bronze.active img {
  filter: drop-shadow(0px 1px 8px #f18a05);
}

.filter--icon.tier#silver.active img,
.calcXp--tierIcon#silver.active img {
  filter: drop-shadow(0px 1px 8px #8b8b8b);
}

.filter--icon.tier#gold.active img,
.calcXp--tierIcon#gold.active img {
  filter: drop-shadow(0px 1px 8px #fbc300);
}

.filter--icon.tier#diamond.active img,
.calcXp--tierIcon#diamond.active img {
  filter: drop-shadow(0px 1px 8px #0391c5);
}

.filter--input {
  box-sizing: border-box;
  padding: .45em;
  padding-right: 2.5em;
  border: 3px solid #b0cff1;
  font-size: 1.2em;
  border-radius: 8px;
  width: 23em;
}

.filter--inputContainer {
  box-sizing: border-box;
  position: relative;
}

.filter--searchButton {
  cursor: pointer;
  display: inline-block;
  border: 3px solid #b0cff1;
  position: absolute;
  width: 4.5em;
  height: -webkit-fill-available;
  right: 0;
  bottom: 0;
  border-radius: 0 8px 8px 0;
  background: #4c91c9;

}

.filter--searchButton img {
  filter: invert(1);
}

.calcXp--container {
  box-sizing: border-box;
  padding: 2.25em 1.25em;
  width: 43em;
  border: 3px solid #b0cff1;
  border-radius: 26px;
}

.calcXp--resultTitle {
  text-align: center;
  color: #4f7ca0;
  margin: 0;
  margin-top: -.5em !important;
  letter-spacing: .05em;
}

.calcXp--formItem {
  display: flex;
  align-items: center;
}

.calcXp--formItem input {
  box-sizing: border-box;
  padding: .35em;
  border: 2px solid #b0cff1;
  border-radius: 8px;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  letter-spacing: .05em;
  width: 4em;
}

.calcXp--formItem span {
  font-size: 1.225em;
  font-weight: 500;
  letter-spacing: .05em;
  margin-right: .5em;
  color: #386a93;
}

#calculate-btn {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  width: 15em;
  margin: 2em auto;
  padding: .45em 1em;

  border: none;
  border-radius: 6px;
  background: #4c91c9;
  box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
  color: white;

  font-size: 1.35em;
  text-transform: capitalize;
  letter-spacing: 0.05em;
  font-weight: bold;
  transition: .35s ease;
}

#calculate-btn:hover {
  color: #ffffff;
  box-shadow: rgb(0 0 0 / 8%) 0px 3px 8px;
  transform: scale(.95);
  background: #4685b8;
}

#calc-result {
  margin-top: 1em;
  display: flex;
  justify-content: center;
}

#calc-result .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 5em;
  width: 5em;
}

.calcXp--xpIcon {
  margin-left: -.2em;
}

.calcXp--numberOfPots {
  padding-top: .2em;
  font-size: 1.15em;
}

#characters-container {
  display: flex;
  flex-wrap: wrap;
  padding: 1em;
}

#characters-container>div {
  box-sizing: border-box;
  display: none;
  padding: 1em;
  width: 19%;
  margin-right: 1%;
}

#characters-container>div.show {
  display: block;
}

#characters-container>div>a>img {
  width: 100%;
  border-radius: 8px;
  filter: grayscale(.3);
  transition: all .25s ease;
}

#characters-container>div:hover>a>img {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  filter: grayscale(0);
  transform: scale(1.06);
}

.characterPage--splashArt {
  position: absolute;
  top: -2%;
  right: -2%;
  width: 35%;
}

.characterPage--table {
  margin-top: -4em;
  width: 100%;
}

.characterPage--table>tbody {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.characterPage--table>tbody>.characterPage--mainSection {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 65%;
}

.characterPage--table>tbody>.characterPage--sideSection {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  width: 33%;
  padding: 0 1em;
}

.characterPage--characterInfoContainer {
  width: 43%;
}

.characterPage--statsInfoContainer {
  width: 55%;
}

.stats--container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1.25em;
}

.stats--container>div {
  width: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: .5em;
}

.stats--container div img {
  width: 2.25em;
}

.stats--bar {
  display: flex;
  width: -webkit-fill-available;
  justify-content: space-between;
  padding: 0 1.25em;
}

.bar-filled:first-child,
.bar-notFilled:first-child {
  border-radius: 6px 0 0 6px;
}

.bar-filled:last-child,
.bar-notFilled:last-child {
  border-radius: 0 6px 6px 0;
}

.bar-filled,
.bar-notFilled {
  display: block;
  width: 18%;
  height: 6px;
}

.bar-filled {
  background: var(--blue);
}

.bar-notFilled {
  background: var(--transparent-blue);
}

.characterInfo--name {
  margin: 0 !important;
}

.characterInfo--badgeContainer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: fit-content;
  margin: 0 auto;
}

.characterInfo--contentContainer {
  display: flex;
  justify-content: space-between;
  padding: .6em 1.3em;
}

.characterInfo--imageContainer {
  width: 25%;
}

.characterInfo--medal {
  margin-top: -1.5em;
}


.characterInfo--infoContainer {
  width: 75%;
  text-align: center;
}

.characterInfo--infoContainer #toc {
  display: none;
}

.characterPage--skins {
  width: 100%;
}

.characterPage--characterSkills {
  width: 100%;
}

/*
      Card de Skins
      */

.skins--container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: -0.75em 0.75em;
  gap: -0.5em;
  /* Adiciona espaçamento consistente entre os itens */
}

.skins--container span {
  width: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.skins--imageSkin {
  max-width: 100%;
  /* Limita o tamanho máximo da imagem */
  max-height: 100%;
  /* Limita o tamanho máximo da imagem */
  object-fit: contain;
  /* Garante que a imagem se ajusta proporcionalmente */
}

/*
      Seção das skills do personagem
      */

.tabsContainer {
  width: 95%;
  margin: 0 auto;
  padding-bottom: .5em;
}

.tabsContainer table {
  width: 100%;
  border-collapse: collapse;
}

.tabsContainer table>tbody>tr>td {
  border-bottom: 2px solid rgb(225, 225, 225);
}

.tabSkill--container {
  padding-bottom: .85em;
  display: flex;
  max-width: 72em;
  overflow-x: auto;
}

.skillInfo--description::-webkit-scrollbar,
.tabSkill--container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.skillInfo--description::-webkit-scrollbar-track,
.tabSkill--container::-webkit-scrollbar-track {
  background-color: #4799c954;
  border-radius: 10px;
}

.skillInfo--description::-webkit-scrollbar-thumb,
.tabSkill--container::-webkit-scrollbar-thumb {
  background-color: rgb(85 135 200 / 74%);
  border-radius: 10px;
}

.tab-skill {
  transition: all .25s ease;
  width: 100%;
  min-width: 5em;
}

.tab-skill.active {
  border-color: #459cca;
}

.tab-skill>div {
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .25em;
}

.tab-skill>div>img {
  width: 100%;
  max-width: 40px;
  height: auto;
}

.skillInfo--container {
  width: 100%;
}

.skillInfo--container>td {
  border: none !important;
}

.skillInfo {
  display: none;
}

.skillInfo.active {
  display: table-cell;
}

.skillInfo.active {
  display: table-cell;
}

.skillInfo--videoContainer {

  align-self: center;
  width: 45%;
}

.skillInfo--skillVideo2 {
  display: none;
  border-radius: 8px;
}

.skillInfo--skillVideo2.active {
  display: flex;
}

.skillInfo--videoSelector {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: var(--transparent-blue);
  cursor: pointer;
  margin-right: .85em;

  transition: all .25s ease;
}

.skillInfo--videoSelector.active {
  background: var(--blue);
  transform: scale(.8);
}

.skillInfo--infoContainer {
  width: 50%;
}

.skillInfo>div>.skillInfo--infoContainer b {
  color: #2a87c4 !important;
}

.skillInfo--infoContainer>center>b {
  font-size: 1.15em;
}

.skillInfo--name {
  font-size: 1.85em;
  letter-spacing: 1px;
  text-align: center;
}

.skillInfo--description {
  display: inline-block;
  font-size: 1.03em;
  line-height: 1.5em;
  padding: 0 1em;
  height: 12em;
  max-height: 12em;
  overflow-y: auto;
  text-align: justify;
}

.skillInfo--attributesContainer>h1 {
  color: #717171;
  font-size: 1.4em;
  text-align: center;
  letter-spacing: 1px;
}

/* card attributes */
.attribute--cardsContainer {
  display: flex;
  align-items: flex-start;

  width: fit-content;
  margin: 0 auto;

  background: var(--lightGray);
  border: 2px solid var(--gray);
}

.cardAttribute {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 8em;
}

.cardAttribute--icon {
  margin: .6em 0;
  height: 2em;
}

.cardAttribute--value {
  margin: 0 !important;

  font-size: .9em !important;
  font-weight: bold;
  line-height: 1.65em !important;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

/*------------------------------------
      WANTED
      -----------------------------------*/

.selectWanted--container {
  display: flex;
  justify-content: center;
}

#selectbox-wanted {
  padding: .35em .5em;
  font-family: sans-serif;
  letter-spacing: .04em;
  font-size: 1.25em;
  width: 21em;
  border: 2px solid #5684c8;
  border-radius: 6px;
}

.wantedPortrait--container {
  width: 100%;
}

.wantedPortrait--title {
  width: 100%;
  color: #292929;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: .035em;
}

.wantedPortraits {
  display: flex;
  flex-wrap: wrap;
}

.wantedPortrait {
  box-sizing: border-box;
  width: 18em;
  padding: .35em;
}

.wantedPortrait img {
  width: 100%;
}

@media screen and (max-width: 1440px) {
  :root {
    font-size: 14px;
  }

  .characterInfo--contentContainer {
    padding: .6em;
  }

  .characterInfo--infoContainer {
    width: 65%;
  }

  .characterInfo--imageContainer {
    width: 35%;
  }

  .tabSkill--container {
    max-width: 61em;
    margin: 0 auto;
  }

  .tab-skill>div>img {
    max-width: 38px;
  }

}

@media screen and (max-width: 1220px) {
  .tabSkill--container {
    max-width: 48em;
  }
}


@media screen and (max-width: 1024px) {

  .flex-wrap-md {
    flex-wrap: wrap;
  }

  .justify-center-md {
    justify-content: center;
  }

  .initialPage--mainContainer {
    flex-wrap: wrap;
  }

  .initialPage--menuContainer {
    width: 100%;
    margin-right: 0;
  }

  .initialPage--sideMenuContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 1.5em;
  }

  .initialPage--sideMenuContainer .card {
    width: 45%;
    min-height: 15em;
  }

  #event-time {
    bottom: 5%;
    right: 5%;
    font-size: 1.25em;
  }

  .initialPage--socialMediaContainer {
    margin-top: 2em;
    display: flex;
    justify-content: space-between;
  }

  .initialPage--socialMedia {
    width: 32%;
  }

  #p-search {
    margin-right: 1em;
  }

  .filter--containerSearch {
    justify-content: center;
  }

  .filter--container {
    margin-top: 1em;
    flex-wrap: wrap;
    justify-content: center;
  }

  .filter:last-of-type {
    margin-top: 1em;
  }

  #characters-container>div {
    width: 24%;
  }

  .characterPage--splashArt {
    display: none;
  }

  .characterPage--table>tbody>.characterPage--mainSection {
    width: 100%;
    justify-content: flex-start;
  }

  .characterPage--characterInfoContainer {
    width: 38%;
  }

  .characterPage--statsInfoContainer {
    width: 30%;
    margin-left: 1.5%;
  }

  .stats--container>div {
    width: 100%;
  }

  .characterInfo--contentContainer {
    flex-wrap: wrap;
  }

  .characterInfo--imageContainer {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .characterInfo--medal {
    margin-top: -2.5em;
  }

  .characterInfo--infoContainer {
    width: 100%;
  }

  .tabsContainer {
    width: 100%;
  }

  .tab-skill {
    min-width: 3.5em;
  }

  .tab-skill>div>img {
    max-width: 36px;
  }

  .skillInfo>div {
    flex-wrap: wrap-reverse;
  }

  .skillInfo--infoContainer {
    width: 100%;
  }

  .skillInfo--infoContainer>center>b {
    font-size: 1.2em;
  }

  .skillInfo--name {
    font-size: 2.2em !important;
    letter-spacing: 1px;
    margin-top: .5em !important;
    text-align: center;
  }

  .skillInfo--description {
    font-size: 1.35em !important;
    display: table;
    margin: 1em !important;

    height: 5em;
    max-height: 5em;
  }

  .skillInfo--videoContainer {
    width: 100%;
    margin: 0 auto;
    padding: 1em 10em;
    padding-bottom: 1em;
  }

  .cardAttribute--value {
    letter-spacing: 1px;
    font-size: 1.1em;
  }

  .characterPage--table>tbody>.characterPage--sideSection {
    width: 30%;
    padding-left: 1.5%;
    position: absolute;
    top: 0;
    right: 0;
  }

  .skins--imageSkin {
    width: 100%;
  }

  .skins--container {
    max-height: 14em;
    overflow-x: clip;
    overflow-y: auto;
  }

  .skins--container span {
    width: 50%;
  }

  .calcXp--formItem {
    justify-content: center;
  }

  .calcXp--container:last-of-type {
    margin-top: 2em;
  }

  #p-tb h3 {
    display: none;
  }

}

/*******************************************************************************
      PRESET: ABAS
      *******************************************************************************/
.tabela-abas {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  margin-bottom: 20px;
}

.mostrar-aba {
  cursor: pointer;
  padding: 0;
  background-color: transparent;
  text-align: center;
  border: none;
  position: relative;
  transition: all 0.2s ease-in-out;
}

.imagem-botao {
  display: inline-block;
  width: auto;
  height: auto;
}

.sec-aba-cem {
  padding: 5px;
  font-weight: bold;
  text-align: center;
  color: #333;
}

.mostrar-aba img {
  border: none;
  background-color: transparent;
  margin: 5px;
}

.mostrar-aba:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.4);
  /* Barrinha sutil ao passar o mouse */
}

.mostrar-aba:hover img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
  /* Sombra leve ao passar o mouse */
}

.mostrar-aba:active img {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.mostrar-aba.ativa::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #000;
}

.preset-aba {
  margin: 0;
  padding: 0;
}

.container-conteudo {
  margin: 0;
  padding: 0;
}

.aba {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-top: 20px;
}

.aba.atual {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.container-coliseu {
  display: block;
  text-align: center;
}

.coluna-abas {
  flex: 0 0 200px;
  margin-right: 20px;
}
Disponível em “https://wiki.gla.com.br/index.php?title=MediaWiki:Common.css&oldid=48160”