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

De Wiki Gla
Ir para navegação Ir para pesquisar
Etiquetas: Reversão manual Revertido
m
 
Linha 1: Linha 1:
/* Consistent size for <small>, <sub> and <sup> */
/* CSS placed here will be applied to all skins */
small {
 
font-size: 85%;
@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;
}
}


.mw-body-content sub,
#left-navigation #p-namespaces.vector-menu-tabs {
.mw-body-content sup,
  border-left: 1px solid var(--gla-border) !important;
span.reference /* para Parsoid */ {
font-size: 80%;
}
}


/* Don't display some stuff on the main page */
#right-navigation #p-views.vector-menu-tabs {
body.page-Wikipédia_Página_principal #t-cite,
  border-left: 1px solid var(--gla-border) !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 */
#mw-head .vector-menu-tabs .vector-menu-content-list>li {
.client-js .mw-special-Watchlist #watchlist-message,
  display: block !important;
.client-js .NavFrame.collapsed .NavContent,
  float: left !important;
.client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child) {
  height: 100% !important;
display: none;
  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;
}
}


/* Criação de tópicos nas esplanadas "geral" e "propostas" */
#mw-head .vector-menu-tabs .vector-menu-content-list>li.selected {
/* Formata o aviso */
  background: var(--gla-surface) !important;
div.aviso-novo-item-esplanada {
  margin-bottom: -1px !important;
font-style: italic;
  border-bottom: 1px solid var(--gla-surface) !important;
  position: relative;
  z-index: 2;
}
}


/* Oculta ligação vermelha durante a criação dos tópicos */
#mw-head .vector-menu-tabs .vector-menu-content-list>li>a {
div.aviso-novo-item-esplanada + p>a.new {
  display: block !important;
display:none;
  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;
}
}


/* Resultados de busca */
#mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a,
.mw-search-results {
#mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a:visited {
margin-left: 0;
  color: #202122 !important;
  text-decoration: none !important;
}
}


.mw-search-results li {
/* Estrela vigia — só ícone (hack Vector TabWatchstarLink) */
margin: 0;
#mw-head .vector-menu-tabs .vector-menu-content-list>li.icon>a {
padding: 0.35em 1em;
  width: 2.15384615em !important;
border-bottom: 1px solid #d3daed;
  height: 0 !important;
background-color: #f6f8fc;
  padding: 2.05em 0 0 0 !important;
list-style-type: none;
  line-height: 0 !important;
list-style-image: none;
  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;
}
}


/* Modelos de predefinições */
#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;
}


/* infobox */
/* Mais + busca — mesma faixa das abas */
.infobox {
#right-navigation #p-cactions.vector-menu-dropdown {
border: 1px solid #a2a9b1;
  height: 2.05em !important;
border-spacing: 3px;
  box-sizing: border-box;
background-color: #f8f9fa;
  border-top: 1px solid var(--gla-border) !important;
color: black;
  background: var(--gla-tab-inactive) !important;
/* @noflip */
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
/* @noflip */
float: right;
/* @noflip */
clear: right;
font-size: 88%;
line-height: 1.5em;
}
}


.infobox td,
#right-navigation #p-cactions .vector-menu-heading {
.infobox th {
  display: block !important;
vertical-align: top;
  position: relative !important;
/* @noflip */
  float: left !important;
text-align: left;
  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;
}
}


.infobox caption {
#right-navigation #p-cactions .vector-menu-heading::after {
font-size: 125%;
  content: '' !important;
font-weight: bold;
  display: block !important;
padding: 0.2em;
  position: absolute !important;
text-align: center;
  top: 0.35em !important;
  right: 8px !important;
  bottom: 0 !important;
  width: 1.23076923em !important;
  height: 1.23076923em !important;
  margin: 0 !important;
  opacity: 0.87;
}
}


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


.infobox.bordered td,
#right-navigation #p-cactions .vector-menu-content {
.infobox.bordered th {
  top: 2.05em !important;
border: 1px solid #a2a9b1;
  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;
}
}


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


.infobox.standard-talk {
#right-navigation #p-cactions.vector-menu-dropdown .vector-menu-checkbox:checked~.vector-menu-content {
border: 1px solid #c0c090;
  opacity: 1 !important;
background-color: #f8eaba;
  visibility: visible !important;
  pointer-events: auto !important;
}
}


.infobox.standard-talk.bordered td,
#right-navigation #p-cactions .vector-menu-content-list li a {
.infobox.standard-talk.bordered th {
  padding: 0.5em 0.75em !important;
border: 1px solid #c0c090;
}
}


/* Estilos para infocaixa com bordas com linhas fundidas */
.client-darkmode #right-navigation #p-cactions .vector-menu-content,
.infobox.bordered .mergedtoprow td,
.skin-theme-clientpref-night #right-navigation #p-cactions .vector-menu-content {
.infobox.bordered .mergedtoprow th {
  background-color: var(--gla-dark-panel-preinvert) !important;
border: 0;
  border-color: var(--gla-dark-border) !important;
border-top: 1px solid #a2a9b1;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
}


.infobox.bordered .mergedrow td,
#right-navigation #p-search {
.infobox.bordered .mergedrow th {
  height: 2.05em !important;
border: 0;
  box-sizing: border-box;
/* @noflip */
  display: flex !important;
border-right: 1px solid #a2a9b1;
  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;
}
}


/* Estilos para infocaixas de geografia */
#right-navigation #p-search form {
.infobox.geography {
  margin: 0 !important;
border-collapse: collapse;
  width: 100%;
line-height: 1.2em;
font-size: 90%;
}
}


.infobox.geography  td,
#right-navigation #simpleSearch {
.infobox.geography  th {
  margin-top: 0 !important;
border-top: 1px solid #a2a9b1;
  height: auto;
padding: 0.4em 0.6em 0.4em 0.6em;
  width: 100%;
}
}


.infobox.geography .mergedtoprow td,
#right-navigation #searchInput {
.infobox.geography .mergedtoprow th {
  height: 1.85em !important;
border-top: 1px solid #a2a9b1;
  padding-top: 0 !important;
padding: 0.4em 0.6em 0.2em 0.6em;
  padding-bottom: 0 !important;
  background-color: var(--gla-surface) !important;
  border-color: var(--gla-border) !important;
  box-sizing: border-box;
}
}


.infobox.geography .mergedrow td,
#p-personal {
.infobox.geography .mergedrow th {
  background-color: var(--gla-surface-alt) !important;
border: 0;
  padding: 0.15em 0.75em 0.15em 0 !important;
padding: 0 0.6em 0.2em 0.6em;
  display: flex !important;
  align-items: center !important;
  min-height: 2em !important;
  box-sizing: border-box !important;
}
}


.infobox.geography .mergedbottomrow td,
#p-personal .vector-menu-content-list {
.infobox.geography .mergedbottomrow th {
  align-items: center !important;
border-top: 0;
border-bottom: 1px solid #a2a9b1;
padding: 0 0.6em 0.4em 0.6em;
}
}


.infobox.geography .maptable td,
#p-personal li {
.infobox.geography .maptable th {
  padding-top: 0 !important;
border: 0;
  display: flex !important;
padding: 0;
  align-items: center !important;
  line-height: 1.35 !important;
}
}


/**
#pt-userpage a,
* @deprecated: Remover assim que todas as ocorrências forem trocadas por "wikitable"
#pt-anonuserpage {
* @see: [[WP:Esplanada/propostas/Acabar com as tabelas bonitas! (4jul2012)]]
  background-image: none !important;
*/
  padding-left: 0 !important;
table.prettytable {
  padding-top: 0 !important;
margin: 1em 1em 1em 0;
background: #f9f9f9;
border: 1px #aaa solid;
border-collapse: collapse;
}
}


table.prettytable th,
.mw-parser-output pre,
table.prettytable td {
.mw-parser-output code,
border: 1px #aaa solid;
.mw-parser-output .mw-code,
padding: 0.2em;
pre,
code,
.mw-code {
  background-color: var(--gla-surface-alt) !important;
  color: #2b2a23 !important;
  border-color: var(--gla-border) !important;
}
}


table.prettytable th {
/* Links — conteúdo e sidebar (claro) */
background: #f2f2f2;
html:not(.client-darkmode):not(.skin-theme-clientpref-night) #content.mw-body .mw-parser-output a:not(.external):not(.extiw):not(.new),
text-align: center;
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);
}
}


table.prettytable caption {
/* Infobox — painel + título de marca (claro) */
font-weight: bold;
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);
}
}


/* Predefinições informativas e mensagens MediaWiki */
html:not(.client-darkmode):not(.skin-theme-clientpref-night) .infobox th,
.caixa {
html:not(.client-darkmode):not(.skin-theme-clientpref-night) .infobox_v2 th,
width: 80%;
html.skin-theme-clientpref-day .infobox th,
margin: 0 auto;
html.skin-theme-clientpref-day .infobox_v2 th {
padding: .1em;
  color: var(--gla-accent);
border: 1px solid #C7C7C7;
}
}


.caixaMW {
/* --- Dark mode chrome (cores diretas) --- */
margin: 1px 0;
.client-darkmode #mw-page-base,
padding: .1em;
.skin-theme-clientpref-night #mw-page-base,
font-size: 93%;
.client-darkmode #mw-head-base,
line-height:120%;
.skin-theme-clientpref-night #mw-head-base {
clear: both;
  background: transparent !important;
  background-image: none !important;
}
}


.caixaMW.info,
.client-darkmode #mw-head .vector-menu-tabs,
.caixa.info {
.skin-theme-clientpref-night #mw-head .vector-menu-tabs {
background-color: white;
  border-top-color: var(--gla-dark-border) !important;
border: 1px solid #ccc;
}
}


.caixaMW.infodestaque,
.client-darkmode #left-navigation #p-namespaces.vector-menu-tabs,
.caixa.infodestaque {
.skin-theme-clientpref-night #left-navigation #p-namespaces.vector-menu-tabs {
background-color: #f5faff;
  border-left-color: var(--gla-dark-border) !important;
border: 1px solid #cedff2;
}
}


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


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


/* Referências */
.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;
}


/* Make the list of references smaller */
.client-darkmode #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a,
.references-small {
.client-darkmode #mw-head .vector-menu-tabs .vector-menu-content-list>li.selected>a:visited,
font-size: 90%;
.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;
}
}


/* Realce a azul das referências ''clicadas'' para ajudar na navegação */
.client-darkmode #right-navigation #p-cactions.vector-menu-dropdown,
body.action-info .mw-body-content :target,
.skin-theme-clientpref-night #right-navigation #p-cactions.vector-menu-dropdown,
.citation:target {
.client-darkmode #right-navigation #p-search,
background-color: #def; /* Fallback */
.skin-theme-clientpref-night #right-navigation #p-search {
background-color: rgba(0, 127, 255, 0.133);
  background: var(--gla-dark-tab-inactive) !important;
  border-top-color: var(--gla-dark-border) !important;
}
}


/* Formatação de citações. Quebrar URLs longas etc., em vez de uma caixa transbordante */
.client-darkmode #right-navigation #p-cactions .vector-menu-heading,
.citation {
.skin-theme-clientpref-night #right-navigation #p-cactions .vector-menu-heading {
word-wrap: break-word;
  border-right-color: var(--gla-dark-border) !important;
  color: var(--gla-dark-link) !important;
}
}


/*
.client-darkmode #p-personal,
Para números e IDs de documentos ligados, em que o número
.skin-theme-clientpref-night #p-personal {
não precisa ser mostrado em uma tela ou dispositivo de mão,
  background-color: var(--gla-dark-chrome) !important;
mas deve ser incluído na versão impressa
}
*/
 
@media screen, handheld {
.client-darkmode #p-personal a,
.citation .printonly {
.skin-theme-clientpref-night #p-personal a {
display: none;
  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;
}
 
#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;
}
}


.navbox-title .navbar {
.calcXp--xpIcon {
/* @noflip */
  margin-left: -.2em;
float: left;
/* @noflip */
text-align: left;
/* @noflip */
margin-right: 0.5em;
}
}


/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.calcXp--numberOfPots {
.mw-parser-output .mw-collapsible-toggle {
  padding-top: .2em;
font-weight: normal;
  font-size: 1.15em;
/* @noflip */
text-align: right;
padding-right: 0.2em;
padding-left: 0.2em;
}
}
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
 
/* @noflip */
#characters-container {
float: left;
  display: flex;
/* @noflip */
  flex-wrap: wrap;
text-align: left;
  padding: 1em;
}
 
#characters-container>div {
  box-sizing: border-box;
  display: none;
  padding: 1em;
  width: 19%;
  margin-right: 1%;
}
}


/* Hatnotes and disambiguation notices */
#characters-container>div.show {
.hatnote {
  display: block;
font-style: italic;
}
}


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


div.hatnote {
#characters-container>div:hover>a>img {
/* @noflip */
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
padding-left: 1.6em;
  filter: grayscale(0);
margin-bottom: 0.5em;
  transform: scale(1.06);
}
}


div.hatnote + div.hatnote {
.characterPage--splashArt {
margin-top: -0.5em;
  position: absolute;
  top: -2%;
  right: -2%;
  width: 35%;
}
}


/* Redirect em verde
.characterPage--table {
* Faz com que os redirects apareçam em itálico e verde em [[Special:Allpages]] e [[Special:Watchlist]]
  margin-top: -4em;
*/
  width: 100%;
.allpagesredirect a,
.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--table>tbody {
div.listenlist {
  position: relative;
background: url( "//upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Gnome-speakernotes.png/30px-Gnome-speakernotes.png" );
  display: flex;
padding-left: 40px;
  justify-content: space-between;
  align-items: flex-end;
}
}


div.videolist,
.characterPage--table>tbody>.characterPage--mainSection {
div.multivideolist {
  display: flex;
background: url( "//upload.wikimedia.org/wikipedia/en/thumb/2/20/Tango-video-x-generic.png/40px-Tango-video-x-generic.png" );
  flex-wrap: wrap;
padding-left: 50px;
  justify-content: space-between;
  width: 65%;
}
}


/* Style rules for media list templates */
.characterPage--table>tbody>.characterPage--sideSection {
div.medialist {
  box-sizing: border-box;
min-height: 50px;
  display: flex;
margin: 1em;
  justify-content: center;
background-position: top left;
  width: 33%;
background-repeat: no-repeat;
  padding: 0 1em;
}
}


div.medialist ul {
.characterPage--characterInfoContainer {
list-style-type: none;
  width: 43%;
list-style-image: none;
margin: 0;
}
}


div.medialist ul li {
.characterPage--statsInfoContainer {
padding-bottom: 0.5em;
  width: 55%;
}
}


div.medialist ul li li {
.stats--container {
font-size: 91%;
  display: flex;
padding-bottom: 0;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1.25em;
}
}


/* Change the external link icon to an Adobe icon for all PDF files
.stats--container>div {
* in browsers that support these CSS selectors, like Mozilla and Opera
  width: 45%;
*/
  display: flex;
#content a[href$=".pdf"].external,
  align-items: center;
#content a[href*=".pdf?"].external,
  justify-content: center;
#content a[href*=".pdf#"].external,
  margin: .5em;
#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 div img {
* is used (notably Template:PDFlink). This works in IE, unlike the above.
  width: 2.25em;
*/
#content span.PDFlink a,
#mw_content span.PDFlink a {
background: url( "//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif" ) center right no-repeat;
padding-right: 17px;
}
}


/* Messagebox templates */
.stats--bar {
.messagebox {
  display: flex;
border: 1px solid #aaa;
  width: -webkit-fill-available;
background-color: #f9f9f9;
  justify-content: space-between;
width: 80%;
  padding: 0 1.25em;
margin: 0 auto 1em auto;
padding: .2em;
}
}


.messagebox.merge {
.bar-filled:first-child,
border: 1px solid #c0b8cc;
.bar-notFilled:first-child {
background-color: #f0e5ff;
  border-radius: 6px 0 0 6px;
text-align: center;
}
}


.messagebox.cleanup {
.bar-filled:last-child,
border: 1px solid #9f9fff;
.bar-notFilled:last-child {
background-color: #efefff;
  border-radius: 0 6px 6px 0;
text-align: center;
}
}


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


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


.messagebox.nested-talk {
.bar-notFilled {
border: 1px solid #c0c090;
  background: var(--transparent-blue);
background-color: #f8eaba;
width: 100%;
margin: 2px 4px 2px 4px;
}
}


.messagebox.small {
.characterInfo--name {
width: 238px;
  margin: 0 !important;
font-size: 85%;
float: right;
clear: both;
margin: 0 0 1em 1em;
line-height: 1.25em;
}
}


/**
.characterInfo--badgeContainer {
* Infobox V2 - em fase de teste
  display: flex;
* Ver [[fr:Projet:Infobox/V2]]
  justify-content: center;
**/
  flex-wrap: wrap;
.infobox_v2 {
  width: fit-content;
background: #f9f9f9;
  margin: 0 auto;
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--contentContainer {
vertical-align:top;
  display: flex;
text-align:left;
  justify-content: space-between;
  padding: .6em 1.3em;
}
}


.infobox_v2 .topo{
.characterInfo--imageContainer {
height:45px;
  width: 25%;
vertical-align:middle;
text-align:center;
font-size:120%;
font-weight:bolder;
line-height:1.2em;
color:#000;
}
}


.infobox_v2 .midia {
.characterInfo--medal {
height:35px;
  margin-top: -1.5em;
vertical-align:middle;
text-align:center;
font-weight:bolder;
color:#000;
}
}


/* Imagens transparentes dos topos da infobox V2 */
/*.topo.padrao      {}*/
.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--infoContainer {
  width: 75%;
  text-align: center;
}


/* Fundo logo Wikipédia */
.characterInfo--infoContainer #toc {
.fundologo {
  display: none;
background: url( "//upload.wikimedia.org/wikipedia/commons/1/10/Wikipedia-logo-v2-200px-transparent.png" );
}
}


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


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


div.NavFrame + div.NavFrame {
/*
border-top-style: none;
      Card de Skins
border-top-style: hidden;
      */
 
.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.NavPic {
.skins--container span {
background-color: #fff;
  width: 33.3%;
margin: 0;
  display: flex;
padding: 2px;
  justify-content: center;
float: left;
  align-items: center;
}
}


div.NavFrame div.NavHead {
.skins--imageSkin {
height: 1.6em;
  max-width: 100%;
font-weight: bold;
  /* Limita o tamanho máximo da imagem */
font-size: 100%;
  max-height: 100%;
background-color: #efefef;
  /* Limita o tamanho máximo da imagem */
position:relative;
  object-fit: contain;
  /* Garante que a imagem se ajusta proporcionalmente */
}
}


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


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


div.NavFrame div.NavContent p {
.tabsContainer table>tbody>tr>td {
font-size: 100%;
  border-bottom: 2px solid rgb(225, 225, 225);
}
}


div.NavEnd {
.tabSkill--container {
margin: 0;
  padding-bottom: .85em;
padding: 0;
  display: flex;
line-height: 1px;
  max-width: 72em;
clear: both;
  overflow-x: auto;
}
}


a.NavToggle {
.skillInfo--description::-webkit-scrollbar,
position:absolute;
.tabSkill--container::-webkit-scrollbar {
top:0;
  width: 8px;
right:3px;
  height: 8px;
font-weight:normal;
font-size:smaller;
}
}


/* Geographical coordinates defaults. See [[Template:Coord/link]]
.skillInfo--description::-webkit-scrollbar-track,
  for how these are used. The classes "geo", "longitude", and
.tabSkill--container::-webkit-scrollbar-track {
  "latitude" are used by the [[Geo microformat]]. */
  background-color: #4799c954;
.geo-default, .geo-dms, .geo-dec  { display: inline; }
  border-radius: 10px;
.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-thumb,
* <div class="toclimit-3">, por exemplo, limitará somente
.tabSkill--container::-webkit-scrollbar-thumb {
* a ==nível 2== e ===nível 3=== e nada inferior, contanto
  background-color: rgb(85 135 200 / 74%);
* 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 */
.tab-skill {
div.thumb {
  transition: all .25s ease;
border: none;
  width: 100%;
  min-width: 5em;
}
}


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


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


/* Suporte para [[Predefinição:AFI]], [[Predefinição:Unicode]] e [[Predefinição:politônico]] */
.tab-skill>div>img {
.AFI {
  width: 100%;
font-family: "Charis SIL", "Doulos SIL", Gentium, GentiumAlt,
  max-width: 40px;
"DejaVu Sans", Code2000, "TITUS Cyberbit Basic",
  height: auto;
"Arial Unicode MS", "Lucida Sans Unicode",
"Chrysanthi Unicode";
}
}


.Unicode {
.skillInfo--container {
font-family: Code2000, Code2001, "Free Serif", "TITUS Cyberbit Basic",
  width: 100%;
"Doulos SIL", "Chrysanthi Unicode", "Bitstream Cyberbit",
"Bitstream CyberBase", Thryomanes, Gentium, GentiumAlt,
"Lucida Grande", "Free Sans", "Arial Unicode MS",
"Microsoft Sans Serif", "Lucida Sans Unicode";
}
}


.politonico {
.skillInfo--container>td {
font-family: "Athena Unicode", Gentium, "Palatino Linotype",
  border: none !important;
"Arial Unicode MS", "Lucida Sans Unicode",
"Lucida Grande", Code2000;
}
}


/* Prevent line breaks in silly places:
.skillInfo {
  1) Where desired
  display: none;
  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.active {
.wrap,
  display: table-cell;
.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--videoContainer {
#ca-wikilove.icon a {
 
background-image: url( //upload.wikimedia.org/wikipedia/commons/thumb/8/87/Symbol_thumbs_up.svg/16px-Symbol_thumbs_up.svg.png );
  align-self: center;
  width: 45%;
}
}


#ca-wikilove.icon a:hover,
.skillInfo--skillVideo2 {
#ca-wikilove.icon a:focus {
  display: none;
background-position: 5px 60%;
  border-radius: 8px;
background-image: url( //upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Symbol_thumbs_up_color.svg/16px-Symbol_thumbs_up_color.svg.png );
}
}


/* Oculta qualquer conteúdo que só é de interesse para grupos específicos de usuários.
.skillInfo--skillVideo2.active {
* Torna-se visível novamente por meio de
  display: flex;
* - [[MediaWiki:Group-user.css]]
* - [[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--videoSelector {
.mwe-math-fallback-image-display,
  display: inline-block;
.mwe-math-mathml-display {
  width: 1.1em;
margin-left: 1.6em !important;
  height: 1.1em;
margin-top: 0.6em;
  border-radius: 50%;
margin-bottom: 0.6em;
  background: var(--transparent-blue);
  cursor: pointer;
  margin-right: .85em;
 
  transition: all .25s ease;
}
}
.mwe-math-mathml-display math {
 
display: inline;
.skillInfo--videoSelector.active {
  background: var(--blue);
  transform: scale(.8);
}
}


/* hidden sortkey for tablesorter */
.skillInfo--infoContainer {
td .sortkey,
  width: 50%;
th .sortkey {
display: none;
speak: none;
}
}


/* Aspas retas para <q> */
.skillInfo>div>.skillInfo--infoContainer b {
q {
  color: #2a87c4 !important;
quotes: '"' '"' "'" "'";
}
}


/* Evitar colisão de blockquote com elementos flutuantes ao trocar margem com padding */
.skillInfo--infoContainer>center>b {
blockquote {
  font-size: 1.15em;
overflow: hidden;
margin: 1em 0;
padding: 0 40px;
}
}


pre, .mw-code {
.skillInfo--name {
overflow-x: hidden;
  font-size: 1.85em;
overflow-wrap: break-word;
  letter-spacing: 1px;
  text-align: center;
}
}


/* Mesmo espaçamento para parágrafos indentados e não-indentados em páginas de discussões */
.skillInfo--description {
.ns-talk .mw-body-content dd {
  display: inline-block;
margin-top: 0.4em;
  font-size: 1.03em;
margin-bottom: 0.4em;
  line-height: 1.5em;
  padding: 0 1em;
  height: 12em;
  max-height: 12em;
  overflow-y: auto;
  text-align: justify;
}
}


/* Reajustar estilização em itálico definido pelo agente de utilizador */
.skillInfo--attributesContainer>h1 {
cite, dfn {
  color: #717171;
font-style: inherit;
  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);
}
}


/* Classes genéricas para serifa baseada em Times, classe texhtml para matemática em linha */
.cardAttribute {
.times-serif,
  box-sizing: border-box;
span.texhtml {
  display: flex;
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
  flex-direction: column;
font-size: 118%;
  justify-content: center;
line-height: 1;
  align-items: center;
  width: 8em;
}
}


span.texhtml {
.cardAttribute--icon {
white-space: nowrap;
  margin: .6em 0;
  height: 2em;
}
}


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


span.mwe-math-mathml-inline {
/*------------------------------------
font-size: 118%;
      WANTED
      -----------------------------------*/
 
.selectWanted--container {
  display: flex;
  justify-content: center;
}
}


/* Forçar exibição tabular e de revestimento para dígitos e texhtml */
#selectbox-wanted {
.digits,
  padding: .35em .5em;
.texhtml {
  font-family: sans-serif;
-moz-font-feature-settings: "lnum", "tnum", "kern" 0;
  letter-spacing: .04em;
-webkit-font-feature-settings: "lnum", "tnum", "kern" 0;
  font-size: 1.25em;
font-feature-settings: "lnum", "tnum", "kern" 0;
  width: 21em;
font-variant-numeric: lining-nums tabular-nums;
  border: 2px solid #5684c8;
font-kerning: none;
  border-radius: 6px;
}
}


ol.references,
.wantedPortrait--container {
div.reflist {
  width: 100%;
font-size: 90%;            /* font-size padrão */
margin-bottom: 0.5em;
}
}
div.reflist ol.references {
 
font-size: 100%;           /* Resetar font-size quando aninhado em div.reflist */
.wantedPortrait--title {
margin-bottom: 0;         /* Evitar margem dupla quando aninhado em div.reflist */
  width: 100%;
list-style-type: inherit; /* Habilitar tipos de estilo de lista personalizadoss */
  color: #292929;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: .035em;
}
}


/* Resetar margem de topo para listas embutidas em colunas */
.wantedPortraits {
div.columns {
  display: flex;
margin-top: 0.3em;
  flex-wrap: wrap;
}
}
div.columns dl,
 
div.columns ol,
.wantedPortrait {
div.columns ul {
  box-sizing: border-box;
margin-top: 0;
  width: 18em;
  padding: .35em;
}
}


/* Make it possible to hide checkboxes in <inputbox> */
.wantedPortrait img {
.inputbox-hidecheckboxes form .inputbox-element,
  width: 100%;
.inputbox-hidecheckboxes .mw-ui-checkbox {
display: none !important;
}
}


/* Ajuste na cor do símbolo de não-patrulhado nas [[WP:Mudanças recentes]], em conformidade com o [[WP:Padrão visual]] */
@media screen and (max-width: 1440px) {
abbr.unpatrolled {
  :root {
     color: #B60000
    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;
  }
 
}
}


/* Confetes do [[Mediawiki:Sitenotice]] dos 20 anos */
@media screen and (max-width: 1220px) {
.top-banner-20 {
  .tabSkill--container {
  background: url( "//upload.wikimedia.org/wikipedia/donate/0/08/Wikipedia20_banner_backgroundtop2.svg" );
    max-width: 48em;
  background-size: auto 36px;
  }
  background-repeat: repeat-x;
  position: absolute;
  width: 100%;
  height: 36px;
  overflow: hidden;
  z-index: 0;
  margin-right: 149px;
}
}
.bottom-banner-20 {
 
     background: url( "//upload.wikimedia.org/wikipedia/donate/c/c9/Wikipedia20_banner_backgroundbottom2.svg" );
 
     background-size: auto 36px;
@media screen and (max-width: 1024px) {
     background-repeat: repeat-x;
 
  .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”