select:disabled {
  background: #797676;
}

.local-time {
  font-size: 12px;
}

.button-sign {
  background-color: #4caf50;
  padding: 15px;
  color: white;
  margin: 20px;
  width: 300px;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
}

.selectItem {
  cursor: pointer;
}

.selectItem:hover {
  background-color: #6f3ea92e;
  border-radius: 10px;
}

.selected {
  background-color: #6f3ea92e;
  padding: 15px;
}

.error {
  color: white;
  background-color: #f44336;
  border: 1px solid red;
  padding: 15px;
}

.confirm {
  display: none;
}

.confirm-div {
  text-align: center;
}

.confirm-button {
  color: white;
  border-radius: 10px;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
}

.confirm-yes {
  background-color: #4caf50;
}

.confirm-no {
  background-color: #f44336;
}

.subscription {
  display: none;
}

.result {
  text-align: center;
}

.box1 {
  display: none;
}

.box2 {
  display: none;
}

.form_row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.hide-character {
  cursor: pointer;
}

.personal-shop-history {
  cursor: pointer;
}

/* Radios em "segmented control": o radio nativo é escondido (.sex, definido mais
   abaixo) e os .radioSpan viram botões; o selecionado (input:checked) fica preenchido.
   Compartilhado por: gênero (createaccount e account/createcharacter) e os grupos de
   busca do _developer.php. */
span.radioSpan {
  display: inline-block;
  margin: 0 6px 4px 0;
  padding: 7px 18px;
  background-color: #eef1fb;
  color: #243478;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  border: 2px solid #243478;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;
}
span.radioSpan:hover {
  background-color: #dfe5f7;
}
/* Estado selecionado dirigido por classe (.is-selected) via JS. NAO usar o seletor
   de irmao ":checked + span": o navegador nao reinvalida esse estilo quando o
   .checked muda via JS, deixando o destaque preso no item anterior. */
span.radioSpan.is-selected {
  background-color: #243478;
  color: #fff;
  box-shadow: 0 1px 4px rgba(36, 52, 120, 0.35);
}
input.sex:focus-visible + span.radioSpan {
  outline: 2px solid #4a5da8;
  outline-offset: 2px;
}
:where(body.night-mode) .newscont span.radioSpan {
  background-color: rgba(255, 255, 255, 0.08);
  color: #cdd6f5;
  border-color: #4a5da8;
}
:where(body.night-mode) .newscont span.radioSpan.is-selected {
  background-color: #3b4fa0;
  border-color: #3b4fa0;
  color: #fff;
}

#accbox_online a,
#accbox_online a:hover,
#accbox_online a:visited {
  color: white !important;
  cursor: pointer;
}

/* Conquistas do perfil: fileira de ícones SVG (26px) em cima do nome, dentro
   do .characters-cap--profile. Não conquistado fica cinza e apagado. */
.achievements {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 4px;
}

.achievements .achievement {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: 0;
  cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}

.achievements .achievement img {
  display: block;
  width: 26px;
  height: 26px;
  transition: transform 0.15s ease;
}

.achievements .achievement:hover img,
.achievements .achievement.is-open img {
  transform: scale(1.15);
}

.achievements .achievement:focus-visible {
  outline: 2px solid #243478;
  outline-offset: 2px;
}

.achievements .achievement--locked img {
  filter: grayscale(100%);
  opacity: 0.35;
}

.achievements .achievement--locked.is-open img {
  opacity: 0.6;
}

/* Balão da conquista: aberto ao clicar no ícone (site.js). Fica preso ao
   body, em coordenadas da página, para o cartão não o cortar. */
.ach-balloon {
  position: absolute;
  z-index: 1200;
  width: 272px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  padding: 12px 14px 13px;
  background: #fff;
  border: 1px solid #dfe4f0;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(36, 52, 120, 0.16);
  color: #2b2f3a;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ach-balloon.is-visible {
  opacity: 1;
  transform: none;
}

.ach-balloon__arrow {
  position: absolute;
  top: -7px;
  left: 20px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: #fff;
  border-left: 1px solid #dfe4f0;
  border-top: 1px solid #dfe4f0;
  transform: rotate(45deg);
}

.ach-balloon__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ach-balloon__icon {
  flex: none;
  width: 40px;
  height: 40px;
}

.ach-balloon--locked .ach-balloon__icon {
  filter: grayscale(100%);
  opacity: 0.45;
}

.ach-balloon__name {
  font-weight: 700;
  font-size: 14px;
  color: #243478;
}

.ach-balloon__status {
  font-size: 11.5px;
  font-weight: 700;
  color: #8a8f9c;
}

.ach-balloon__status i {
  margin-right: 3px;
}

.ach-balloon--done .ach-balloon__status {
  color: #2e9a52;
}

.ach-balloon__desc {
  margin: 0;
  padding: 0;
  color: inherit;
}

.ach-balloon__progress {
  margin-top: 9px;
}

.ach-balloon__bar {
  height: 6px;
  border-radius: 3px;
  background: #e9edf6;
  overflow: hidden;
}

.ach-balloon__bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #243478;
}

.ach-balloon--done .ach-balloon__bar span {
  background: #2e9a52;
}

.ach-balloon__nums {
  margin-top: 4px;
  font-size: 11.5px;
  color: #6b7080;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

:where(body.night-mode) .ach-balloon {
  background: #1d2a38;
  border-color: #2e4254;
  color: #dbe3ee;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

:where(body.night-mode) .ach-balloon__arrow {
  background: #1d2a38;
  border-color: #2e4254;
}

:where(body.night-mode) .ach-balloon__name {
  color: #8aa0ea;
}

:where(body.night-mode) .ach-balloon__status {
  color: #93a0b4;
}

:where(body.night-mode) .ach-balloon--done .ach-balloon__status {
  color: #5fcf85;
}

:where(body.night-mode) .ach-balloon__bar {
  background: #2a3b4d;
}

:where(body.night-mode) .ach-balloon__bar span {
  background: #8aa0ea;
}

:where(body.night-mode) .ach-balloon--done .ach-balloon__bar span {
  background: #5fcf85;
}

:where(body.night-mode) .ach-balloon__nums {
  color: #93a0b4;
}

:where(body.night-mode) .achievements .achievement:focus-visible {
  outline-color: #8aa0ea;
}

.dumped-alert {
  display: none;
  font-style: italic;
  opacity: 0.4;
}

.button {
  background: linear-gradient(180deg, #2e429a 0%, #243478 100%);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: white;
  text-align: center;
  font-size: 16px;
  font-family: inherit;
  height: 35px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.button:hover {
  background: linear-gradient(180deg, #3a51b8 0%, #2b3d8d 100%);
}

.button:disabled,
.button:disabled:hover {
  background: linear-gradient(180deg, #2e429a 0%, #243478 100%);
  opacity: 0.55;
}

.cancelRK {
  cursor: pointer;
}

.cancelRK a {
  color: red !important;
}

.character-name {
  position: absolute;
  margin-top: 0px;
}

.marriage {
  font-size: 0.4em;
  color: #b5a42a;
  margin-top: 45px;
  position: absolute;
}

.marriage i {
  margin-top: 2px;
  margin-right: 2px;
}

.button-show-more {
  font-size: 15px;
  height: 40px;
  opacity: 0.5;
  background-color: grey;
  padding-left: 100px;
  padding-right: 100px;
  border-radius: 5px;
  display: flow-root;
  text-align: center;
  cursor: pointer;
  background: rgba(124, 124, 124, 0.13);
}

.button-show-more i {
  font-size: 28px;
  opacity: 0.3;
}

.player-list-outfit {
  max-width: 60px;
  max-height: 60px;
  margin-top: -23px;
  image-rendering: pixelated;
}

/* ============================================================================
   Lista de ranking em cards (reutilizável) — medalha/cor nos 3 primeiros, outfit,
   nome + meta e o valor numa pílula; com sublista (.hs-sub) e modo escuro.
   Usada no highscores (players e Tower Challenge) e pensada p/ reaproveitar em
   outras listas do site. As regras de outfit zeram o margin/max do .player-list-outfit
   (que tem margin-top:-23px p/ a tabela antiga) pra a imagem não subir do card.
   ============================================================================ */
.hs-list{display:flex;flex-direction:column;gap:7px;}
/* Cabeçalho do card list (preserva o que era o pTitle) — rotula as colunas das linhas. */
.hs-head{display:flex;align-items:center;gap:11px;padding:1px 14px 4px;}
.hs-head__main{flex:1;min-width:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.hs-head__lead{flex:none;}
.hs-head span{font-size:10px;font-weight:800;color:#8a8470;text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.hs-head__val{flex:none;}
.hs-head i{color:#b3ab93;}
body.night-mode .hs-head span{color:#8ea3b6;}
body.night-mode .hs-head i{color:#5e7184;}
.hs-row{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #e9e2d0;border-radius:10px;padding:6px 12px;}
.hs-row--1{background:linear-gradient(90deg,#fff8e1,#fff);border-color:#f0d98a;}
.hs-row--2{background:linear-gradient(90deg,#f4f6f8,#fff);border-color:#d9dee4;}
.hs-row--3{background:linear-gradient(90deg,#fbeede,#fff);border-color:#e8c9a6;}
.hs-rank,.hs-medal{flex:none;width:30px;text-align:center;font-weight:800;font-size:15px;color:#9a937d;}
.hs-medal--1{color:#e6b800;}.hs-medal--2{color:#9fa7b3;}.hs-medal--3{color:#cd7f32;}
.hs-outfit{flex:none;width:48px;height:48px;margin:0;max-width:48px;max-height:48px;object-fit:contain;image-rendering:pixelated;}
/* Outfit em linha compacta: os frames 64px ancoram o sprite no canto inferior
   direito — o crop mostra esse quadrante em tamanho nativo, e o translateY
   compensa os "pés" colados no fundo do frame para centralizar com o texto. */
.hs-outfit--crop{object-fit:none;object-position:right bottom;transform:translateY(-7px);}
.hs-logo{background:#fff;border:1px solid #ece5d4;border-radius:8px;}
.hs-pinfo{flex:1;min-width:0;}
.hs-name,a.hs-name,a.hs-name:link,a.hs-name:visited{display:inline-block;max-width:100%;font-weight:800;color:#16204e!important;font-size:14px;text-decoration:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;}
a.hs-name:hover{color:#243478!important;text-decoration:underline!important;}
.hs-meta{font-size:11px;color:#6b6450;font-weight:600;display:flex;align-items:center;gap:5px;}
.hs-dot{color:#bdb699;}
.hs-val{flex:none;font-weight:800;color:#243478;font-size:14px;background:#eef1fb;border:1px solid #d8def3;border-radius:999px;padding:4px 14px;}
.hs-sub{display:flex;flex-direction:column;gap:4px;margin:-2px 0 3px 53px;}
.hs-subrow{display:flex;align-items:center;gap:8px;background:#faf9f4;border:1px solid #ece5d4;border-radius:8px;padding:3px 10px;}
.hs-subimg{flex:none;width:30px;height:30px;margin:0;max-width:30px;max-height:30px;object-fit:contain;image-rendering:pixelated;}
.hs-subname,a.hs-subname,a.hs-subname:link,a.hs-subname:visited{flex:1;min-width:0;font-weight:700;color:#3a3525!important;font-size:12px;text-decoration:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
a.hs-subname:hover{color:#243478!important;text-decoration:underline!important;}
.hs-subval{flex:none;font-weight:800;color:#6470a8;font-size:12px;background:#eef1fb;border:1px solid #d8def3;border-radius:999px;padding:2px 9px;}
/* Paginacao client-side da .hs-list (Historico de Compras/Doacoes). */
.hs-pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;margin-top:10px;}
.hs-pager__btn{min-width:30px;height:30px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#243478;background:#eef1fb;border:1px solid #d8def3;border-radius:8px;cursor:pointer;user-select:none;transition:background .12s,color .12s;}
.hs-pager__btn:hover{background:#dde3f7;}
.hs-pager__btn.is-active{background:#243478;border-color:#243478;color:#fff;cursor:default;}
.hs-pager__btn.is-disabled{opacity:.4;pointer-events:none;}
.hs-pager__gap{min-width:18px;text-align:center;color:#9a937d;font-weight:800;}
body.night-mode .hs-pager__btn{background:#233444;border-color:#36506a;color:#cfe1f1;}
body.night-mode .hs-pager__btn:hover{background:#2c4156;}
body.night-mode .hs-pager__btn.is-active{background:#3a5a7d;border-color:#3a5a7d;color:#fff;}
body.night-mode .hs-pager__gap{color:#8ea3b6;}
/* Modo escuro do site (window.otpTheme -> body.night-mode).
   Cards alinhados à paleta de night mode do site (#15202b). */
body.night-mode .hs-row{background:#1d2a38;border-color:#2e4254;}
body.night-mode .hs-row--1{background:linear-gradient(90deg,#3a3320,#1d2a38);border-color:#6b5a2a;}
body.night-mode .hs-row--2{background:linear-gradient(90deg,#2a323b,#1d2a38);border-color:#46525f;}
body.night-mode .hs-row--3{background:linear-gradient(90deg,#3a2c20,#1d2a38);border-color:#6a4d36;}
body.night-mode .hs-rank{color:#7d92a5;}
body.night-mode .hs-name,body.night-mode a.hs-name,body.night-mode a.hs-name:link,body.night-mode a.hs-name:visited{color:#eaf0f6!important;}
body.night-mode a.hs-name:hover{color:#9fc2e8!important;}
body.night-mode .hs-meta{color:#8ea3b6;}
body.night-mode .hs-dot{color:#5e7184;}
body.night-mode .hs-val{background:#233444;color:#cfe1f1;border-color:#36506a;}
body.night-mode .hs-logo{background:#233444;border-color:#36506a;}
body.night-mode .hs-subrow{background:#18242f;border-color:#2a3b48;}
body.night-mode .hs-subname,body.night-mode a.hs-subname,body.night-mode a.hs-subname:link,body.night-mode a.hs-subname:visited{color:#c3d2dd!important;}
body.night-mode a.hs-subname:hover{color:#9fc2e8!important;}
body.night-mode .hs-subval{background:#233444;color:#aac6df;border-color:#36506a;}

/* Modo escuro do ÁLBUM de figurinhas (.wca/.sa__*) — usado no perfil de personagem
   (pages/characters.php) e no Super álbum (pages/superalbum.php). Paleta #15202b. */
body.night-mode .wca{background:linear-gradient(180deg,#1a2735,#15202b);border-color:#2c3d4d;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 3px rgba(0,0,0,.4);}
body.night-mode .wca__ttl{color:#cdd9ea;}
body.night-mode .wca__ttl i{color:#d9b24a;}
body.night-mode .wca__sub{color:#8ea3b6;}
body.night-mode .wca__count{background:#233444;color:#dfe7f2;}
body.night-mode .wca__bar{background:#233444;}
body.night-mode .wca__cell{background:#1d2a38;border-color:#2e4254;}
body.night-mode .wca__num{background:#233444;}
body.night-mode .wca__cnt{background:#233444;color:#cfe1f1;border-color:#36506a;}
body.night-mode .wca__cnt i{color:#8fa6c8;}
body.night-mode .wca__cell--off{background:repeating-linear-gradient(45deg,#18242f,#18242f 6px,#15202b 6px,#15202b 12px);border-color:#2a3b48;}
body.night-mode .wca__cell--off .wca__num{background:#33485a;}
body.night-mode .wca__cell--off .wca__cnt{background:#18242f;border-color:#2a3b48;color:#7e90a2;}
body.night-mode .wca__cell--off .wca__cnt i{color:#5e7184;}
body.night-mode a.wca__done,body.night-mode a.wca__done:link,body.night-mode a.wca__done:visited{color:#6cc070!important;}
body.night-mode a.wca__done .fa-share-alt{color:#9fc2e8!important;}
body.night-mode a.wca__share2,body.night-mode a.wca__share2:link,body.night-mode a.wca__share2:visited{color:#9fc2e8!important;}
body.night-mode a.wca__share2 i{color:#9fc2e8!important;}
body.night-mode .sa__chip,body.night-mode a.sa__chip,body.night-mode a.sa__chip:link,body.night-mode a.sa__chip:visited{background:#1d2a38;border-color:#2e4254;color:#c6d5e6!important;}
body.night-mode .sa__chip:hover{border-color:#3f5a78;}
body.night-mode .sa__chip--on,body.night-mode a.sa__chip--on,body.night-mode a.sa__chip--on:link,body.night-mode a.sa__chip--on:visited{background:#34588f!important;border-color:#466fa0!important;color:#fff!important;}
body.night-mode .sa__chipn{background:rgba(255,255,255,.08);}
body.night-mode .sa__chip--on .sa__chipn{background:rgba(255,255,255,.20);}
body.night-mode .sa__top{border-top-color:#2c3d4d;}
body.night-mode .sa__toph{color:#cdd9ea;}
body.night-mode .sa__ctx{background:#1d2a38;border-color:#2e4254;color:#c6d5e6;}
body.night-mode .sa__row{background:#1d2a38;border-color:#2e4254;}
body.night-mode .sa__row--1{background:linear-gradient(90deg,#3a3320,#1d2a38);border-color:#6b5a2a;}
body.night-mode .sa__row--2{background:linear-gradient(90deg,#2a323b,#1d2a38);border-color:#46525f;}
body.night-mode .sa__row--3{background:linear-gradient(90deg,#3a2c20,#1d2a38);border-color:#6a4d36;}
body.night-mode .sa__rank{color:#7d92a5;}
body.night-mode .sa__pname,body.night-mode a.sa__pname,body.night-mode a.sa__pname:link,body.night-mode a.sa__pname:visited{color:#eaf0f6!important;}
body.night-mode a.sa__pname:hover{color:#9fc2e8!important;}
body.night-mode .sa__pmeta{color:#8ea3b6;}
body.night-mode .sa__pmeta .sa__dot{color:#5e7184;}
body.night-mode .sa__stk{background:#233444;color:#cfe1f1;border-color:#36506a;}
body.night-mode .sa__done{color:#6cc070;}
body.night-mode .sa__done i{color:#5bbf60;}
body.night-mode .sa__outfit--ph{background:#18242f;border-color:#2a3b48;color:#5e7184;}

/* ============================================================================
   Painel de informações chave-valor (reutilizável) — flui em grade responsiva,
   permitindo itens lado a lado (substitui o ul/li.odd/li.even rígido). Ex.:
   "Informações Principais" (perfil) e "Clan Information" (guilds).
   ============================================================================ */
.hs-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;}
.hs-info__item{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid #e9e2d0;border-radius:10px;padding:8px 12px;min-width:0;}
.hs-info__item--wide{grid-column:1/-1;}
.hs-info__pair{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;}
.hs-info__trio{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;}
/* equal-height values so the icon+text rows and the Líder outfit all center on the same line */
.hs-info__trio .hs-info__v{min-height:42px;}
.hs-info__k{font-size:10px;font-weight:800;color:#8a8470;text-transform:uppercase;letter-spacing:.04em;}
.hs-info__v{font-size:14px;font-weight:700;color:#16204e;display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0;}
.hs-info__v i{color:#6470a8;}
.hs-info__v a{color:#243478;}
/* Valor de texto corrido (descrições com <br>, observações): bloco em vez de flex,
   senão o <br> vira item de flex e não quebra a linha. */
.hs-info__v--text{display:block;font-weight:600;line-height:1.45;}
/* Variante de formulário do painel chave-valor — o campo (select/input) ocupa a
   largura do card e a dica/validação flui abaixo, sem sobrepor. Usada no shop
   ("Complete os dados" / "Send to Gift"). */
.hs-info--form .hs-info__v{font-weight:600;}
.hs-info--form .hs-info__v > select,
.hs-info--form .hs-info__v > input[type="text"]{flex:1 1 100%;min-width:0;width:100%;margin:0;}
/* .check_icon tem right/top/width fixos pro layout antigo; dentro do card o texto
   de validação precisa fluir normalmente. */
.hs-info .check_icon{position:static;right:auto;top:auto;width:auto;white-space:normal;}
body.night-mode .hs-info__item{background:#1d2a38;border-color:#2e4254;}
body.night-mode .hs-info__k{color:#8ea3b6;}
body.night-mode .hs-info__v{color:#eaf0f6;}
body.night-mode .hs-info__v i{color:#8fa6c8;}
body.night-mode .hs-info__v a{color:#9fc2e8;}

/* Variante de "feed"/eventos do card list (Derrotas, Atividades Recentes, Clan Points...) —
   ícone/imagem opcional + texto que quebra + data/meta. Reusa .hs-row/.hs-list/.hs-meta. */
.hs-row--evt{align-items:flex-start;}
.hs-evt{font-size:13px;font-weight:600;color:#3a3525;line-height:1.4;word-break:break-word;}
.hs-evt b{color:#16204e;font-weight:800;}
.hs-evt a{color:#243478;font-weight:800;text-decoration:none;}
.hs-evt a:hover{text-decoration:underline;}
.hs-evt-ico{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:#eef1fb;border:1px solid #d8def3;border-radius:8px;color:#6470a8;font-size:17px;}
.hs-evt-img{flex:none;max-width:46px;max-height:46px;width:auto;height:auto;object-fit:contain;image-rendering:pixelated;}
/* Miniatura dentro do quadradinho (.hs-evt-ico) — sprites de tamanhos diferentes ficam todos
   contidos no mesmo box, uniformes (ex.: pokémon nas Derrotas). */
.hs-evt-thumb{padding:2px;overflow:hidden;}
.hs-evt-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;margin:0;object-fit:contain;image-rendering:pixelated;display:block;}
.hs-meta-outfit{flex:none;width:24px;height:24px;margin:0;max-width:24px;max-height:24px;object-fit:contain;image-rendering:pixelated;vertical-align:middle;border-radius:4px;}
.hs-info__v a.hs-lead{display:inline-flex;align-items:center;gap:9px;}
/* Casa no perfil do personagem: abre o modal "Ver a casa" (app/houseviewer.php).
   O nome sai da cor dos ícones (.hs-info__v i) para a dos links. */
.hs-info__v a.hv-open{display:inline-flex;align-items:center;gap:7px;text-decoration:none;}
.hs-info__v a.hv-open .hv-open__name{color:inherit;}
.hs-info__v a.hv-open:hover .hv-open__name{text-decoration:underline;}
/* Altura fixa no CSS: no mobile, ".newscont img{height:auto}" anula o height="28"
   do HTML e a miniatura (448x224) vazava do card. */
.hs-info__v a.hv-open img{flex:none;height:28px;width:auto;max-width:none;transition:transform .15s ease;}
.hs-info__v a.hv-open:hover img{transform:scale(1.08);}
.hs-lead-outfit{flex:none;width:42px;height:42px;max-width:42px;max-height:42px;margin:0;object-fit:contain;image-rendering:pixelated;margin-top:-32px;}
/* Stats blocks (characters: quests/insignias chips, progress bars, win-loss, single stats) */
.hs-chips{display:flex;flex-wrap:wrap;gap:7px;}
.hs-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid #cfe8d1;color:#2e7d32;background:#eaf6eb;}
.hs-chip--no{color:#9097a0;background:#f2f3f5;border-color:#e2e5e9;}
.hs-chip img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated;margin:0;}
body.night-mode .hs-chip{color:#9ad5a0;background:#1e3424;border-color:#2f5236;}
body.night-mode .hs-chip--no{color:#7d8794;background:#222e3b;border-color:#33414f;}
.hs-progress{position:relative;height:22px;border-radius:999px;background:#eef1fb;overflow:hidden;border:1px solid #e0e4f1;margin-top:11px;}
.hs-progress__bar{height:100%;background:linear-gradient(90deg,#43a047,#5cb860);border-radius:999px;}
.hs-progress__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#16204e;text-shadow:0 1px 1px rgba(255,255,255,.4);}
body.night-mode .hs-progress{background:#233444;border-color:#36506a;}
body.night-mode .hs-progress__label{color:#eaf0f6;text-shadow:0 1px 2px rgba(0,0,0,.5);}
.hs-statline{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;padding:8px 4px;text-align:center;color:#16204e;}
.hs-statline--ok{color:#2e7d32;}
.hs-statline--no{color:#c62828;}
.hs-statline img{vertical-align:middle;margin:0;}
body.night-mode .hs-statline{color:#dce6ef;}
body.night-mode .hs-statline--ok{color:#7bd086;}
body.night-mode .hs-statline--no{color:#ef9a9a;}
.hs-info--stats .hs-info__item{align-items:center;text-align:center;}
.hs-info--stats .hs-info__v{font-size:18px;}
.hs-info__sub{font-size:11px;font-weight:700;color:#8a8470;margin-top:1px;}
.hs-info__sub i{color:#b0a98f;margin-right:1px;}
body.night-mode .hs-info__sub{color:#8ea3b6;}
body.night-mode .hs-info__sub i{color:#6f8497;}
.hs-row > .house-map{flex:none;}
/* Botões de ação numa linha do card list (ex.: Shop History, Ocultar). */
.hs-actions{flex:none;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;}
.hs-actions form{margin:0;display:inline-flex;}
.hs-act,a.hs-act,a.hs-act:link,a.hs-act:visited{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:11px;font-weight:700;color:#243478!important;background:#eef1fb;border:1px solid #d8def3;border-radius:8px;padding:5px 10px;cursor:pointer;white-space:nowrap;text-decoration:none!important;}
/* a.hs-act:hover é necessário: a regra base a.hs-act:link (0,2,1) vence .hs-act:hover (0,2,0) */
.hs-act:hover,a.hs-act:hover{background:#e2e7f8;border-color:#c2cbef;}
.hs-row--muted{opacity:.62;}
body.night-mode .hs-act,body.night-mode a.hs-act,body.night-mode a.hs-act:link,body.night-mode a.hs-act:visited{color:#cfe1f1!important;background:#233444;border-color:#36506a;}
body.night-mode .hs-act:hover,body.night-mode a.hs-act:hover{background:#2a3f54;border-color:#3f5a78;}
/* Carimbo "atualizado em" preso ao rodapé das listas de ranking */
.hs-updated{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:8px;padding-top:8px;border-top:1px dashed #e9e2d0;font-size:11px;font-weight:600;color:#8a8470;}
body.night-mode .hs-updated{border-top-color:#2e4254;color:#a9b6c6;}
/* Voltar de páginas internas (printBackButton .backPage) */
.backPage{margin:10px 0;}
.backPage a,.backPage a:link,.backPage a:visited{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#243478!important;background:#eef1fb;border:1px solid #d8def3;border-radius:8px;padding:6px 12px;text-decoration:none!important;}
.backPage a:hover{background:#e2e7f8;border-color:#c2cbef;}
.backPage a i{font-size:11px;}
body.night-mode .backPage a,body.night-mode .backPage a:link,body.night-mode .backPage a:visited{color:#cfe1f1!important;background:#233444;border-color:#36506a;}
body.night-mode .backPage a:hover{background:#2a3f54;}
/* Cards de serviço (account "Serviços") — grade de links no padrão .hs-* */
.hs-svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;}
a.hs-svc,a.hs-svc:link,a.hs-svc:visited{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e9e2d0;border-radius:10px;padding:12px 14px;font-size:13px;font-weight:700;color:#243478!important;text-decoration:none!important;min-width:0;transition:transform .12s ease,box-shadow .12s ease;}
a.hs-svc:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.12);}
.hs-svc > i{color:#6470a8;font-size:15px;width:22px;text-align:center;flex:none;}
.hs-svc__label{flex:1;min-width:0;}
.hs-svc__tag{flex:none;font-size:9px;font-weight:800;color:#8a8470;text-transform:uppercase;letter-spacing:.04em;background:rgba(138,132,112,.14);border-radius:6px;padding:2px 6px;}
.hs-svc__tag i{color:#c9a227;margin-right:2px;}
body.night-mode a.hs-svc,body.night-mode a.hs-svc:link,body.night-mode a.hs-svc:visited{background:#1d2a38;border-color:#2e4254;color:#cfe1f1!important;}
body.night-mode .hs-svc > i{color:#7f9fd8;}
body.night-mode .hs-svc__tag{color:#a9b6c6;background:rgba(255,255,255,.08);}
/* Painéis de segurança (account "Account Security") — cards com pill de status */
.hs-sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px;}
.hs-sec{display:flex;gap:12px;background:#fff;border:1px solid #e9e2d0;border-radius:10px;padding:12px 14px;min-width:0;}
.hs-sec__icon{flex:none;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.hs-sec--on .hs-sec__icon{background:rgba(46,125,50,.12);color:#2e7d32;}
.hs-sec--off .hs-sec__icon{background:rgba(198,40,40,.12);color:#c62828;}
.hs-sec--pend .hs-sec__icon{background:rgba(178,106,0,.12);color:#b26a00;}
.hs-sec__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.hs-sec__head{font-size:13px;font-weight:800;color:#16204e;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.hs-sec__pill{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 8px;}
.hs-sec--on .hs-sec__pill{background:rgba(46,125,50,.14);color:#2e7d32;}
.hs-sec--off .hs-sec__pill{background:rgba(198,40,40,.14);color:#c62828;}
.hs-sec--pend .hs-sec__pill{background:rgba(178,106,0,.14);color:#b26a00;}
.hs-sec__desc{font-size:12px;font-weight:600;color:#5b5b5b;line-height:1.45;}
.hs-sec__actions{justify-content:flex-start;margin-top:2px;}
body.night-mode .hs-sec{background:#1d2a38;border-color:#2e4254;}
body.night-mode .hs-sec__head{color:#e6eef7;}
body.night-mode .hs-sec__desc{color:#a9b6c6;}
/* Cabeçalho do ranking (highscores) — tipo em chip no título e faixa sutil do mundo */
.hs-rk-type{display:inline-block;font-size:12px;font-weight:800;color:#243478;background:#eef1fb;border:1px solid #d8def3;border-radius:999px;padding:1px 10px;margin-left:4px;vertical-align:1px;}
.hs-rk-world{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:0 0 10px;padding:5px 10px;font-size:11.5px;font-weight:700;color:#8a8470;background:rgba(78,78,78,.07);border-radius:6px;}
.hs-rk-world i{font-size:9px;}
body.night-mode .hs-rk-type{color:#cfe1f1;background:#233444;border-color:#36506a;}
body.night-mode .hs-rk-world{color:#a9b6c6;background:rgba(255,255,255,.05);}
/* Client Security (account/security/*) — lista "Como funciona" e campo de código */
.sec-how{display:flex;flex-direction:column;gap:8px;}
.sec-how__item{display:flex;align-items:flex-start;gap:10px;background:#f7f8fd;border:1px solid #e2e6f2;border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600;color:#2b2b2b;line-height:1.45;}
.sec-how__item > i{flex:none;width:22px;text-align:center;color:#4a5da8;font-size:14px;margin-top:2px;}
body.night-mode .sec-how__item{background:#1d2a38;border-color:#2e4254;color:#cfe1f1;}
body.night-mode .sec-how__item > i{color:#7f9fd8;}
/* Banner "por que este código foi pedido" nas telas de confirmação */
/* margem superior compensa o padding-top de 2px do .ca-card (pensado para a .ca-legend) */
.sec-action{display:flex;align-items:flex-start;gap:10px;background:rgba(178,106,0,.08);border:1px solid rgba(178,106,0,.28);border-radius:10px;padding:10px 12px;margin:14px 0 10px;font-size:13px;font-weight:700;color:#7a5200;line-height:1.45;}
.sec-action > i{flex:none;margin-top:2px;color:#b26a00;}
body.night-mode .sec-action{background:rgba(240,180,80,.10);border-color:rgba(240,180,80,.35);color:#f0c987;}
body.night-mode .sec-action > i{color:#f0b450;}
/* Painel informativo da Recovery Key — leitura/anotação, não é um botão */
.rk-panel{margin:10px 0 6px;padding:14px 16px;background:#fbfaf4;border:2px dashed #cfc9b4;border-radius:12px;text-align:center;}
.rk-panel__label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8a8470;margin-bottom:6px;}
.rk-panel__label i{margin-right:4px;color:#c9a227;}
.rk-panel__value{font-family:"Courier New",Courier,monospace;font-size:30px;font-weight:700;letter-spacing:3px;color:#1f2a52;word-break:break-all;user-select:all;}
.rk-panel__copy{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-family:inherit;font-size:11px;font-weight:700;color:#243478;background:#eef1fb;border:1px solid #d8def3;border-radius:8px;padding:5px 10px;cursor:pointer;}
.rk-panel__copy:hover{background:#e2e7f8;border-color:#c2cbef;}
body.night-mode .rk-panel{background:#1d2a38;border-color:#3a5068;}
body.night-mode .rk-panel__label{color:#a9b6c6;}
body.night-mode .rk-panel__value{color:#e6eef7;}
body.night-mode .rk-panel__copy{color:#cfe1f1;background:#233444;border-color:#36506a;}
/* QR do 2FA — sempre sobre fundo branco (padrão de contraste p/ leitores) */
.tfa-qr{display:flex;justify-content:center;margin:6px 0 10px;}
.tfa-qr > div{background:#fff;padding:10px;border:1px solid #e2e6f2;border-radius:10px;line-height:0;}
.hs-buy{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:122px;text-align:center;}
.hs-buy form{margin:0;display:flex;flex-direction:column;align-items:center;gap:5px;}
.hs-buy .button{margin:0;}
.hs-oldprice{text-decoration:line-through;color:#c62828;font-size:11px;font-weight:700;line-height:1;}
.hs-price{font-size:12px;font-weight:800;color:#243478;line-height:1;}
body.night-mode .hs-price{color:#cfe1f1;}
body.night-mode .hs-oldprice{color:#e57373;}
.hs-form{display:flex;flex-direction:column;gap:10px;}
.hs-form__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;}
.hs-form__row > label{flex:none;min-width:210px;font-weight:700;font-size:13px;color:#243478;}
.hs-form__row select,.hs-form__row input[type=text]{flex:1;min-width:200px;}
body.night-mode .hs-form__row > label{color:#cfe1f1;}
.hs-empty{text-align:center;color:#8a8470;font-weight:600;font-size:13px;padding:18px 10px;background:#fff;border:1px dashed #e0d8c3;border-radius:10px;}
body.night-mode .hs-evt{color:#c3d2dd;}
body.night-mode .hs-evt b{color:#eaf0f6;}
body.night-mode .hs-evt a{color:#9fc2e8;}
body.night-mode .hs-evt-ico{background:#233444;border-color:#36506a;color:#8fa6c8;}
body.night-mode .hs-empty{background:#1d2a38;border-color:#2e4254;color:#8ea3b6;}

.btn-50px {
  width: 50px;
  height: 50px;
}

.charactersOutfit {
  image-rendering: pixelated;
  display: inline-grid;
  min-width: 80px;
  min-height: 80px;
  background-repeat: no-repeat;
  background-position-x: -14px;
  background-position-y: -20px;
  background-size: 90px;
  margin-top: -13px;
  margin-left: -14px;
}

.formCheck {
  position: absolute;
  margin-top: -17px;
  max-width: 400px;
}

.signature-img {
  border-radius: 10px;
}

/* Tema (claro / escuro / automático). O JS no topo do <body> (window.otpTheme)
   põe body.night-mode antes da primeira pintura; daqui para baixo é só CSS a
   partir dessa classe. :where() zera a especificidade do prefixo, então cada
   regra pesa o mesmo que a classe antiga que o JS aplicava (.newscont-night-mode
   etc.) e as exceções por página continuam ganhando como antes.
   Botões: .switch-night-mode (desktop) e .m-night-toggle (topbar mobile). */
.switch-night-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  position: absolute;
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background-color: #8989896e;
  font-family: inherit;
  font-size: 21px;
  line-height: 1;
  color: #fce501;
  z-index: 2;
  cursor: pointer;
}
.switch-night-mode:focus-visible {
  outline: 2px solid #4a5da8;
  outline-offset: 2px;
}
body.night-mode .switch-night-mode {
  color: #8ea3b6;
}

:where(body.night-mode) .newscont {
  background-color: #15202b !important;
  color: white !important;
}

:where(body.night-mode) .newscont a {
  color: #d5d5d5 !important;
}

:where(body.night-mode) .newscont a:visited {
  color: #d5d5d5 !important;
}

:where(body.night-mode) .newscont .table {
  color: white !important;
}

:where(body.night-mode) .newscont fieldset legend {
  color: #ffffff !important;
}

:where(body.night-mode) .newscont .table ul li.odd {
  background: rgba(255, 255, 255, 0.04) !important;
}

:where(body.night-mode) .newscont .text {
  color: white !important;
}

:where(body.night-mode) .footer {
  background-color: #03161f !important;
  color: white !important;
}

:where(body.night-mode) .menu {
  background-color: #15202b !important;
}

:where(body.night-mode) .menu a {
  color: #d5d5d5 !important;
}

:where(body.night-mode) .menu a:visited {
  color: #d5d5d5 !important;
}

:where(body.night-mode) .menu a:hover {
  color: #fcefdc !important;
}

:where(body.night-mode) .navbar {
  background-color: #15202b !important;
}

:where(body.night-mode) .mewtwobar {
  background-color: #221721 !important;
}

/* Antes o JS punha isto como estilo inline em todo <select> (e os selects que
   chegavam depois, pelo PJAX, ficavam claros). */
body.night-mode select {
  color: #fff;
  background-color: #1f2933;
}

.toggle {
  position: relative;
  display: block;
  width: 40px;
  height: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, 0, 0);
}

.toggle:before {
  content: "";
  position: relative;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 14px;
  display: block;
  background: #9a9999;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.toggle span {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  display: block;
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5);
  transition: all 0.2s ease;
}

.toggle span:before {
  content: "";
  position: absolute;
  display: block;
  margin: -18px;
  width: 56px;
  height: 56px;
  background: rgba(79, 46, 220, 0.5);
  border-radius: 50%;
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
}

#cbx:checked+.toggle:before {
  background: #009688;
}

#cbx:checked+.toggle span {
  background: #243478;
  transform: translateX(20px);
  transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
  box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);
}

#cbx:checked+.toggle span:before {
  transform: scale(1);
  opacity: 0;
  transition: all 0.4s ease;
}

#cbx2:checked+.toggle:before {
  background: #009688;
}

#cbx2:checked+.toggle span {
  background: #243478;
  transform: translateX(20px);
  transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
  box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);
}

#cbx2:checked+.toggle span:before {
  transform: scale(1);
  opacity: 0;
  transition: all 0.4s ease;
}

.divProgressBar {
  position: fixed;
  width: 100%;
  height: 5px;
  display: none;
}

.progressBar {
  float: left;
  height: 5px;
  background: #ffeb3b;
}

/* Barra de título das páginas (perfil, download, lojas…): degradê quase branco
   com Pokébolas só em contorno à direita (SVG, nítido em qualquer tela) e uma
   linha divisória embaixo com um traço azul curto. A Pokébola é escalada pela
   altura da barra (background-size auto 100%), então cabe em qualquer altura.
   A versão noturna está logo abaixo, depois das regras do perfil, para ganhar
   na ordem (o :where() zera a especificidade do prefixo). */
.characters-cap {
  position: relative;
  padding: 10px;
  font-size: 2em;
  border-radius: 8px 8px 0 0;
  margin-bottom: 5px;
  color: #243478;
  background-color: #f6f7fb;
  background-image: url(/images/backgrounds/characters_pokeballs.svg), linear-gradient(180deg, #f3f5fb 0%, #fafbfe 100%);
  background-repeat: no-repeat;
  background-position: right top, 0 0;
  background-size: auto 100%, 100% 100%;
  border-bottom: 1px solid #e3e8f3;
  font-weight: 700;
  height: 52px;
}

.characters-cap::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: -1px;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: #243478;
}

/* Perfil do treinador: outfit à esquerda, conquistas em cima do nome. */
.characters-cap--profile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  height: auto;
  min-height: 100px;
  padding: 9px 10px 10px 88px;
}

.characters-cap--profile::after {
  left: 88px;
  width: 64px;
}

.characters-cap--profile .charactersOutfit {
  position: absolute;
  left: 10px;
  top: 10px;
  margin: 0;
}

.characters-cap__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 14px;
  line-height: 1.2;
}

.characters-cap--profile .character-name {
  position: static;
  margin: 0;
  letter-spacing: -0.2px;
}

:where(body.night-mode) .characters-cap {
  color: #ffffff;
  background-color: #1d2a38;
  background-image: url(/images/backgrounds/characters_pokeballs_dark.svg), linear-gradient(180deg, #192432 0%, #1d2a38 100%);
  border: 1px solid #2e4254;
}

:where(body.night-mode) .characters-cap::after {
  background: #8aa0ea;
}

.characters-cap .fa-adjust {
  color: #e43a33;
  transform: rotate(90deg);
}

.guild-leader-outfit {
  margin-top: -36px;
  margin-left: -49px;
  padding-right: 4px;
  image-rendering: pixelated;
}

.guild-cap {
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 3px;
  min-height: 105px;
  max-height: 105px;
  height: 105px;
}

.guild-photo {
  border-radius: 10px;
  border: 3px solid #f4f4f4;
}

.guild-info {
  background-color: #000000c7;
  margin-left: 110px;
  padding: 10px;
  margin-top: -108px;
  border-radius: 10px;
  min-height: 80px;
  font-size: 12px;
}

.guild-name {
  display: block;
  color: #fff;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-size: 18px;
}

.guild-motd {
  display: block;
  color: #cfcfcf;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.guild-motd::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f15c";
  margin-right: 5px;
}

.filter {
  padding-bottom: 12px;
}

.activity {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.activity:hover {
  background-color: #9e9e9e21;
}

progress {
  display: none;
}

.commands {
  text-align: center;
}

.report {
  width: 100%;
  border-left: 3px solid #078cb88f;
  margin-bottom: 15px;
}

.report:hover {
  border-left: 3px solid #078cb8;
}

.report img {
  width: 10px;
  height: 10px;
  display: none;
}

.report .attachment {
  display: none;
}

.issue {
  width: 100%;
  min-height: 80px;
  margin-bottom: 10px;
  margin-top: 10px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.title {
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 1.1em;
}

.report .content {
  margin-left: 3px;
  color: #5c5959;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* number of lines to show */
  -webkit-box-orient: vertical;
}

.report .date {
  font-size: 0.9em;
  color: #607d8b;
  margin-left: 0px;
  text-align: right;
  margin-top: 10px;
}

.issue .content {
  color: #5c5959;
  word-wrap: break-word;
}

.comment {
  border: 0px solid silver;
  border-radius: 10px;
  word-wrap: break-word;
}

.comment .content {
  border-top: 1px solid #9e9e9e4f;
  padding-top: 5px;
}

.comment.self {
  text-align: right;
  border: 1px solid #078cb833;
  margin-left: 5%;
  background-color: #6fbfa433;
}

.comment .date {
  font-size: 0.7em;
  color: gray;
}

.self .author {
  color: #d4b44f;
}

.divtags {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.tag {
  color: white;
  padding: 5px;
  border-radius: 5px;
  display: inline-block;
  background-color: #795548;
  margin-left: 10px;
}

.Bug {
  background-color: #b71c1c;
}

.Client {
  background-color: #02094f;
}

.Item {
  background-color: #004d40;
}

.NPC {
  background-color: #607d8b;
}

.Map {
  background-color: #8bc34a;
}

.Pokemon {
  background-color: #009688;
}

.Quest {
  background-color: #4caf50;
}

.Site {
  background-color: #f44336;
}

.pokemon-death {
  image-rendering: pixelated;
  display: inline-grid;
  min-width: 80px;
  min-height: 80px;
  background-repeat: no-repeat;
  background-position-x: -14px;
  background-position-y: -20px;
  background-size: 90px;
  margin-top: -32px;
  margin-left: -14px;
}

.open {
  background-color: #cddc39;
}

.closed {
  background-color: #f94538;
}

.High {
  background-color: red;
}

.Low {
  background-color: orange;
}

.Waiting {
  background-color: #e91e63;
}

.Fixed {
  background-color: #2196f3;
}

.create {
  text-align: center;
  width: 80%;
  margin-left: 10%;
  margin-bottom: 10px;
  margin-top: 10px;
  border-top: 1px solid #ccc;
}

.attachment img {
  max-width: 180px;
  max-height: 180px;
  margin-right: 0.4em;
  border: 1px solid;
  margin-top: 3px;
}

.attachment::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0c6 Attachments:";
  display: block;
  font-size: 0.8em;
  margin-top: 10px;
  color: #e91e63;
}

.filters {
  margin-bottom: 10px;
  margin-top: 10px;
  border-top: 1px solid #ccc;
}

.filters-input:hover {
  background: #078cb870;
}

.filters-input:checked {
  background: #078cb8;
}

.filters-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  /* position: relative; */
  margin-left: 0px;
  top: 8.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20px;
  width: 20px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  /* margin-right: 0.5rem; */
  outline: none;
  position: relative;
  border-radius: 5px;
}

.filters label {
  float: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

/* Each of the items in the list */

.menu {
  line-height: 1.2;
}

.easy-autocomplete-container {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  min-width: 260px;
  text-align: left;
}

/* Lista de sugestões do easyAutocomplete (clãs, membros do clã, painel dev) no
   mesmo visual da busca de personagem (.cs-list): card claro, linhas com o
   ícone à esquerda e a parte digitada em negrito. O card fica no <ul> (é ele
   que o plugin mostra e esconde), para o container vazio não aparecer. Cada
   item é inline: com flex, os pedaços de texto em volta do <b> viravam itens
   separados e quebravam a linha no meio da palavra. */
.easy-autocomplete-container ul {
  margin: 0;
  padding: 5px;
  list-style: none;
  max-height: min(440px, 70vh);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e7e2d3;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 28, 60, 0.22), 0 2px 6px rgba(20, 28, 60, 0.08);
}

.easy-autocomplete-container ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 9px;
  color: #243478;
  cursor: pointer;
}

.easy-autocomplete-container ul li.selected {
  background: #eef1fa;
}

.easy-autocomplete-container .eac-item {
  display: block;
  padding: 4px 8px 4px 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
}

.easy-autocomplete-container .eac-item b {
  font-weight: 800;
}

.easy-autocomplete-container .eac-item img.eac-icon,
.eac-icon-left .eac-item img {
  width: 32px;
  height: 32px;
  max-height: 32px;
  margin-right: 10px;
  object-fit: contain;
  border-radius: 7px;
  vertical-align: middle;
}

.eac-item span {
  font-size: 12px;
  color: #6b6450;
}

body.night-mode .easy-autocomplete-container ul {
  background: #15202b;
  border-color: #2e4254;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

body.night-mode .easy-autocomplete-container ul li {
  color: #e6eef7;
}

body.night-mode .easy-autocomplete-container ul li.selected {
  background: #22364a;
}

body.night-mode .eac-item span {
  color: #8ea3b6;
}

.div-happening {
  position: absolute;
  top: 44px;
  color: white;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
    1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  font-size: 15px;
}

.happening {
  padding-left: 20px;
  max-height: 20px;
  height: 20px;
}

#happening2 {
  opacity: 0.8;
}

#happening3 {
  opacity: 0.6;
}

#happening4 {
  opacity: 0.4;
}

#happening5 {
  opacity: 0.2;
}

.error-box {
  /* padding: 10px; */
  margin: 10px 0;
  line-height: 1.8em;
  /* margin-left: .2em; */
  color: #ff6a72;
  background-color: #ffd2d236;
  /* border: 1px solid rgba(244,67,54,0.34);*/
  border: 1px solid red;
  border-radius: 10px;
  text-align: center;
}

.sucess-box {
  padding: 10px;
  margin: 10px 0;
  line-height: 1.8em;
  color: #2a8103;
  background-color: rgba(76, 175, 80, 0.29);
  border: 1px solid green;
  border-radius: 10px;
  text-align: center;
}

.purple-box {
  padding: 10px;
  margin: 10px 0;
  line-height: 1.8em;
  margin-left: 0.2em;
  color: #7e38b0;
  background-color: rgb(156 39 176 / 6%);
  word-break: normal;
  border-radius: 10px;
}

.blue-box {
  padding: 10px;
  margin: 10px 0;
  line-height: 1.8em;
  margin-left: 0.2em;
  color: #3d7da0;
  background-color: rgba(33, 150, 243, 0.1);
  word-break: normal;
  border-radius: 10px;
}

.red-box {
  padding: 10px;
  margin: 10px 0;
  line-height: 1.8em;
  margin-left: 0.2em;
  color: #af1212;
  background-color: rgba(244, 33, 33, 0.1);
  word-break: normal;
  border-radius: 10px;
}

/* Modo escuro dos avisos: no fundo #15202b o vermelho/azul escuros ficam ilegíveis,
   então a cor do texto clareia e o fundo ganha uma borda para o bloco não sumir. */
body.night-mode .red-box {
  color: #ff9a9a;
  background-color: rgba(244, 33, 33, 0.14);
  border: 1px solid rgba(244, 33, 33, 0.3);
}

body.night-mode .blue-box {
  color: #9fc2e8;
  background-color: rgba(33, 150, 243, 0.14);
  border: 1px solid rgba(33, 150, 243, 0.3);
}

body.night-mode .purple-box {
  color: #d0a6e8;
  background-color: rgba(156, 39, 176, 0.16);
  border: 1px solid rgba(156, 39, 176, 0.32);
}

.menuMap {
  font-size: 1.2em;
}

.divMap {
  border-radius: 10px;
  background-image: url("/images/map/background.png");
}

.imageMap {
  max-width: 100%;
  max-height: 100%;
}

.mark {
  color: #fff;
  font-weight: bold;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-size: 14px;
}

#informer {
  display: none;
  background-color: #2d5d93e6;
  border-radius: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  font-size: 18px;
  width: 50%;
  margin-left: 25%;
  margin-top: 5px;
  z-index: 100000;
  text-align: center;
  position: fixed;
  border: 1px solid #2196f3;
}

.house-map {
  border-radius: 10px;
  text-align: center;
  height: 60px;
  width: 60px;
  border: 1px solid black;
  background-size: 60px;
  background-position: center;
  cursor: zoom-in;
  image-rendering: pixelated;
}

.house-map>.mark {
  position: relative;
  top: calc(50% - 16px);
  /* 50% - 3/4 of icon height */
}

.playerOutfit {
  image-rendering: pixelated;
  border-radius: 30px;
  /*-webkit-box-shadow:  0 0 0 0, 0 0 1px 0 #00000096;
    box-shadow: 0 0 0 0, 0 0 1px 0 #00000096;*/
}

/*
.event {
    width: 65px;
    font-size: 10px;
    margin-left: 137px;
    padding-left: 3px;
    background-repeat: no-repeat;
    background-position: center center;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    background-color: #3e7edf;
    border: solid 1px #b8b8b9;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.1);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
*/

.tooltip {
  display: none;
  position: absolute;
  border: 1px solid #fff;
  background-color: #598fb5;
  border-radius: 5px;
  padding: 5px;
  color: #fff;
  font-size: 13px;
  opacity: 0.9;
  width: 200px;
  letter-spacing: 1px;
}

.ico {
  padding-left: 10px;
  text-decoration: none;
}

.ico:before {
  content: "";
  background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/external_link.png");
  background-size: cover;
  position: absolute;
  width: 13px;
  height: 13px;
  margin-top: 4px;
  margin-left: -14px;
}

h1,
h2,
h3,
h4 {
  font-weight: Bold;
}

h1 {
  font-size: 120%;
}

h2 {
  font-size: 110%;
  text-transform: uppercase;
  color: #e48e23;
}

h3 {
  font-size: 110%;
  color: #e48e23;
}

h4 {
  font-size: 90%;
  padding: 0px;
  margin: 0;
  border-left: 4px solid #243478;
  padding-left: 5px;
  margin-bottom: 5px;
}

h1,
h2,
h3,
p {
  padding: 10px;
  margin: 0;
  line-height: 1em;
}

ul,
ol {
  margin: 5px 20px;
  padding: 0 20px;
}

ul span,
ol span {
  color: #666666;
}

.world {
  text-shadow: 1px 0 0 #ccc, -1px 0 0 #ccc, 0 1px 0 #ccc, 0 -1px 0 #ccc,
    1px 1px #ccc, -1px -1px 0 #ccc, 1px -1px 0 #ccc, -1px 1px 0 #ccc;
  letter-spacing: 1.8px;
}

label {
  float: left;
  font-weight: normal;
  margin-top: 8px;
}

a.green {
  color: #0c0;
}

a.red {
  color: #f00;
}

input[type="submit"] {
  cursor: pointer;
}

input[type="text"],
input[type="password"] {
  outline: none;
  margin-bottom: 3px;
  background-color: transparent;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  border: 1px;
  margin-top: 4px;
  color: #0055a7;
  text-align: center;
  border: 2px solid #243478;
  font-size: 18px;
}

input {
  background-color: #243478;
  -moz-border-radius: 0px 10px 0px 10px;
  -webkit-border-radius: 0px 10px 0px 10px;
  border-radius: 10px 10px 10px 10px;
  border: 2px;
  color: #ecf7f9;
  text-align: center;
  font-size: 16px;
  height: 35px;
  border-left: 2px solid #a9c4d9;
  margin-bottom: 10px;
}

/* Botão padrão do site — mesma cara do .ca-submit do kit de formulários. */
input[type="submit"],
input[type="button"] {
  background: linear-gradient(180deg, #2e429a 0%, #243478 100%);
  border-left: none;
  border-radius: 10px;
  transition: background 0.15s;
}

input[type="submit"]:hover,
input[type="button"]:hover {
  background: linear-gradient(180deg, #3a51b8 0%, #2b3d8d 100%);
}

select {
  /* styling */
  background-color: rgba(255, 255, 255, 0);
  border: thin solid #243478;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;

  /* reset */

  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

select:focus {
  background-image:
    linear-gradient(45deg, #243478 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, #243478 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: #243478;
  outline: 0;
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

input:hover[type="submit"] {
  background-color: #1b285d;
}

form::-webkit-input-placeholder {
  color: #555 !important;
}

form:-moz-placeholder {
  color: #555 !important;
}

form::-moz-placeholder {
  color: #555 !important;
}

form:-ms-input-placeholder {
  color: #555 !important;
}

/* Radio nativo escondido de forma acessível (ver "segmented control" em .radioSpan).
   Continua focável por teclado; a seleção é refletida em input.sex:checked + .radioSpan. */
.sex {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  pointer-events: none;
}

input [type="file"] {
  width: 200px;
}

.sub {
  min-width: 170px;
  margin-top: 5px;
  background-color: #243478;
  height: 36px;
  width: 119px;
}

.subAccount {
  min-width: 194px;
}

.bar {
  font-weight: bold;
  margin-top: 5px;
  margin-left: 10px;
  font-size: 13px;
}

.toolbar {
  padding: 10px;
  border: 1px solid silver;
  font-weight: bold;
  margin-bottom: 15px;
}

.highlight:hover {
  background-color: lightyellow;
  padding: 3px;
}

.news {
  margin-bottom: 15px;
}

.comment {
  margin-bottom: 10px;
  border: 1px solid silver;
  padding: 5px;
}

.quote {
  padding: 4px;
  border: 1px solid silver;
}

.message .title {
  height: 30px;
  padding-top: 8px;
  padding-left: 15px;
  font-weight: bold;
  background-repeat: repeat-x;
}

.message .bar {
  border-top: 1px solid silver;
  padding: 5px;
  margin-left: 0px;
  background-color: #e9edee;
}

.signature {
  width: 100%;
}

.friend {
  float: left;
  width: 100px;
  text-align: center;
}

.friend img {
  padding: 1px;
  border: 1px groove silver;
  width: 90px;
  height: 90px;
}

.loader {
  margin-left: 10px;
  display: none;
}

.table {
  color: #333;
}

.table ul {
  float: left;
  margin: 0;
  padding: 0;
}

.table ul li {
  list-style: none;
  padding: 5px 10px;
  min-height: 50px; /* era height fixo: conteudo que quebra de linha (ex.: pills .radioSpan) estourava o li e o proximo li sobrepunha */
  padding-top: 15px;
  line-height: 1em;
}

.table ul li.title {
  font-weight: bold;
  background: #333;
  color: #fff;
}

.table ul li.even {
  background: rgba(209, 209, 217, 0);
}

.table ul li.odd {
  background: rgba(67, 22, 69, 0.04);
}

.table input {
  margin: 0;
}

.mainbody {
  width: 950px;
  margin: auto;
}

.dex {
  image-rendering: pixelated;
  position: absolute;
  height: 150px;
  width: 170px;
  margin: auto;
  vertical-align: baseline;
  background-repeat: no-repeat;
  margin-right: 32px;
  background-position: bottom;
  margin-left: 760px;
}

fieldset {
  margin: 0px;
  border: 0px solid #598fb5;
  /* border-bottom-left-radius: 10px; */
  /* border-bottom-right-radius: 10px; */
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  /* width: 97%; */
}

fieldset legend {
  padding: 10px 0;
  font-weight: 600;
  font-size: 16px;
  color: #000000;
  width: 100%;
  /* box-shadow: -2px 5px 30px 0px #00000061; */
  margin-top: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
  background: rgba(78, 78, 78, 0.16);
}

fieldset legend::before {
  font-family: "Font Awesome 5 Free";
  font-size: inherit;
  text-rendering: auto;
  content: "\f0da  ";
  color: #000000;
}

fieldset legend.has-icon::before {
  content: none;
}

fieldset legend.has-icon > img {
  image-rendering: pixelated;
  vertical-align: -2px;
  margin: 0 6px 0 12px;
}

fieldset legend.has-icon > i {
  margin: 0 6px 0 12px;
}

.navbar {
  width: 735px;
  height: 49px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-box-shadow: 1px 0px 3px #2b2b2b;
  /* -webkit-box-shadow: 1px 0px 3px #2b2b2b; */
  /* box-shadow: 1px 0px 3px #2b2b2b; */
  padding: 10px;
  padding-bottom: 8px;
  background-color: #243478;
  align-items: center;
  justify-content: center;
  /*background: linear-gradient(#2b608f,rgb(45,86,168));*/
  text-align: center;
  background-image: url(/images/backgrounds/accbox_bg.png);
  background-repeat: no-repeat;
  background-position: 100% 0px;
  position: relative;
  z-index: 0;
}

/* Olhos do Pikachu (accbox_bg): redesenhados sobre a imagem para piscar,
   dar wink e olhar pros lados. Camadas: pálpebra, brilho, pupila.
   Os estados (pxe-*) são sorteados por um script no index.php. */
.navbar::before,
.navbar::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  width: 43px;
  height: 42px;
  border-radius: 50%;
  background-color: #fce501;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(#fce501, #fce501),
    radial-gradient(closest-side, #fff 85%, rgba(255, 255, 255, 0)),
    radial-gradient(closest-side, #000 96%, rgba(0, 0, 0, 0));
  background-size: 45px 46px, 11px 11px, 39px 38px;
  background-position: 0 -47px, 9px 8px, 2px 2px;
  transition: background-position 0.13s ease;
  /* máscara = alpha da própria imagem: nada pinta fora do rosto,
     e o olho esquerdo desliza "por baixo" da borda da cabeça */
  -webkit-mask-image: url(/images/backgrounds/accbox_bg.png);
  -webkit-mask-repeat: no-repeat;
  mask-image: url(/images/backgrounds/accbox_bg.png);
  mask-repeat: no-repeat;
}

.navbar::before {
  right: 122px;
  -webkit-mask-position: right -122px top -3px;
  mask-position: right -122px top -3px;
}

.navbar::after {
  right: 13px;
  -webkit-mask-position: right -13px top -3px;
  mask-position: right -13px top -3px;
}

/* piscada (os dois) e wink (um só) */
.navbar.pxe-blink::before,
.navbar.pxe-blink::after,
.navbar.pxe-wink-l::before,
.navbar.pxe-wink-r::after {
  background-position: 0 -2px, 9px 8px, 2px 2px;
}

/* olhando pra esquerda / direita */
.navbar.pxe-look-l::before,
.navbar.pxe-look-l::after {
  background-position: 0 -47px, 4px 8px, -3px 2px;
}

.navbar.pxe-look-r::before,
.navbar.pxe-look-r::after {
  background-position: 0 -47px, 14px 8px, 7px 2px;
}


.menuNavbar {
  font-size: 16px;
  position: absolute;
  margin-left: 2px;
  margin-top: -9px;
  padding-top: 0;
  color: #fff;
}

.menuNavbar>a>.menu1,
.menuNavbar>a>.menu2,
.menuNavbar>a>.menu3 {
  display: inline-block;
  border-top: 2px solid #2c5d93;
  padding-top: 10px;
  color: white;
  border-top: 2px solid transparent;
  -moz-transition: border-top-color 0.3s ease-in-out;
  -webkit-transition: border-top-color 0.3s ease-in-out;
  -ms-transition: border-top-color 0.3s ease-in-out;
  transition: border-top-color 0.3s ease-in-out;
}

.menuNavbar>a>.menu1:hover,
.menuNavbar>a>.menu2:hover,
.menuNavbar>a>.menu3:hover {
  border-top: 2px solid;
}

.navbarDivisor {
  width: 104%;
  margin-top: 5px;
  height: 1px;
  border: none;
  color: #3697e1;
  background-color: #3697e1;
  margin-left: -4px;
}

.navNextEvent {
  position: absolute;
  text-align: left;
  margin-top: 35px;
  color: white;
  font-size: 12px;
  /* border-top: 1px solid; */
  margin-left: 11px;
}

.navbuttons {
  z-index: 2;
  font-size: 16px;
  margin-top: 10px;
  margin-left: 35px;
  position: absolute;
  min-width: 260px;
}

.buttons {
  line-height: 20px;
  border-radius: 22px;
  display: inline-block;
  padding: 5px;
  vertical-align: middle;
  color: #fff;
  width: 20px;
  height: 20px;
  text-align: center;
}

.buttonWhatsapp {
  background: linear-gradient(#85f195, #1ccf3a);
}

.buttonInstagram {
  background: linear-gradient(#dd2a7b, #8134af);
}

.buttonFacebook {
  background: linear-gradient(#4a9de7, #0288d1);
}

.buttonTiktok {
  background: linear-gradient(#4a4a4a, #010101);
}

.buttonForum {
  background: linear-gradient(#f44336, #d32f2f);
}

.buttonBlog {
  background: linear-gradient(#ffc107, #ff9800);
}

.buttonDiscord {
  background: linear-gradient(#3f51b5, #3949ab);
}

.buttonTwitter {
  background: linear-gradient(#1da1f2, #6db7e5);
}

.eventbar {
  width: 755px;
  display: flex;
}

.mewtwobar {
  font-size: 12px;
  width: 425px;
  height: 32px;
  border-radius: 10px;
  padding: 10px;
  padding-left: 8px;
  padding-right: 2px;
  background-color: rgb(93, 67, 98);
  background-image: url(/images/backgrounds/mewtwoBar.png);
  background-repeat: no-repeat;
  background-position: 280% -18px;
  margin-left: 3px;
  margin-top: 4px;
}

/* Carrossel da eventbar (metade esquerda; a outra é a barra do Mewtwo).
   Torneio Mensal e Discord se revezam num ciclo de 16s: 0–46% torneio,
   46–50% troca, 50–96% Discord, 96–100% volta. As animações de dentro de cada
   slide usam o mesmo ciclo, então cada um anima só enquanto aparece. Só
   transform/opacity; visibility esconde o slide de fora (não recebe clique nem
   foco). Tudo pausa junto (regra logo abaixo). As bolinhas (index.php) mudam
   o currentTime de todas as animações para o início da entrada do slide. */
.promo{position:relative;flex:none;display:grid;width:376px;height:52px;margin-top:4px;border-radius:10px;overflow:hidden;background:#1b1b2a;box-shadow:1px 0 3px rgba(0,0,0,.35);}
.promo__slide{grid-area:1/1;position:relative;display:flex;align-items:center;gap:9px;min-width:0;padding:0 10px 0 6px;overflow:hidden;color:#fff;text-decoration:none;animation:promo-a 16s cubic-bezier(.65,0,.35,1) infinite;}
.promo__slide+.promo__slide{animation-name:promo-b;}
.promo--single .promo__slide{animation:none;}
a.promo__slide:link,a.promo__slide:visited{color:#fff;}
.promo__slide::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none;}
.promo__slide:hover{filter:brightness(1.08);}
.promo__slide:hover::after{transform:translateX(120%);transition:transform .7s ease;}
/* Pausa com o mouse em cima de um slide ou com foco de teclado — não ao clicar
   numa bolinha (o clique deixa o foco nela e a troca não andaria). */
.promo:has(.promo__slide:hover,:focus-visible) :is(.promo__slide,.promo__slide *,.promo__dot){animation-play-state:paused;}

.promo__stage{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--promo-stage-bg);box-shadow:inset 0 0 0 2px var(--promo-stage-ring);}
.promo__stage>*{grid-area:1/1;}
.promo__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.promo__head{display:flex;align-items:center;gap:6px;min-width:0;}
.promo__title{font-family:'Pixelify Sans','Cairo',sans-serif;font-size:16px;font-weight:700;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;text-shadow:0 2px 0 var(--promo-title-shadow);}
.promo__msgs{display:grid;min-width:0;}
.promo__msg{grid-area:1/1;font-size:11.5px;line-height:15px;color:var(--promo-msg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.promo__msg--2{color:#fff;opacity:0;}
.promo__cta{flex:none;position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--promo-cta-bg);color:var(--promo-cta);font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.3);}
.promo__cta i{font-size:11px;transition:transform .15s ease;}
.promo__slide:hover .promo__cta i{transform:translateX(2px);}
.promo__spark{width:7px;height:7px;background:#ffe066;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;}
.promo__dots{position:absolute;right:12px;bottom:4px;z-index:2;display:flex;gap:4px;}
.promo__dot{display:block;width:6px;height:6px;padding:0;border:0;border-radius:3px;background:rgba(255,255,255,.45);cursor:pointer;animation:promo-dot-a 16s cubic-bezier(.65,0,.35,1) infinite;}
.promo__dot+.promo__dot{animation-name:promo-dot-b;}

/* Torneio: arena do mundial ao fundo; o troféu pula, solta confete e brilha. */
.promo-torneio{--promo-stage-bg:rgba(0,0,0,.4);--promo-stage-ring:rgba(255,214,77,.5);--promo-title-shadow:#000;--promo-msg:#ffe7b0;--promo-cta-bg:linear-gradient(#ffe27a,#f6b81c);--promo-cta:#5a3600;background:linear-gradient(90deg,rgba(28,6,6,.88) 0%,rgba(28,6,6,.66) 55%,rgba(28,6,6,.45) 100%),url(/images/events/torneio-mundial.png) center/cover;}
.promo-torneio__trophy{display:block;transform-origin:50% 100%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35));animation:promo-tm-trophy 16s ease-in-out infinite;}
.promo-torneio__glint{animation:promo-tm-glint 16s ease-in-out infinite;}
.promo-torneio__confetti{width:4px;height:6px;border-radius:1px;background:var(--c);opacity:0;animation:promo-tm-confetti 16s infinite;}
.promo-torneio__confetti--1{--c:#ffd84d;--x:-16px;--y:-14px;--r:200deg;}
.promo-torneio__confetti--2{--c:#ef4036;--x:-8px;--y:-20px;--r:-160deg;}
.promo-torneio__confetti--3{--c:#4fc3f7;--x:2px;--y:-22px;--r:220deg;}
.promo-torneio__confetti--4{--c:#7cdb6a;--x:11px;--y:-19px;--r:-200deg;}
.promo-torneio__confetti--5{--c:#fff;--x:18px;--y:-12px;--r:180deg;}
.promo-torneio__confetti--6{--c:#ffd84d;--x:27px;--y:-7px;--r:-140deg;}
.promo-torneio__confetti--7{--c:#4fc3f7;--x:-22px;--y:-5px;--r:160deg;}
.promo-torneio__confetti--8{--c:#ef4036;--x:33px;--y:-16px;--r:240deg;}
.promo-torneio__twinkle{animation:promo-tm-twinkle 16s infinite;}
.promo-torneio__twinkle--1{--x:-13px;--y:-11px;}
.promo-torneio__twinkle--2{--x:13px;--y:-13px;animation-delay:1.2s;}
.promo-torneio__live{transform:translateY(16px);padding:1px 5px;border-radius:999px;background:#d93025;box-shadow:0 0 0 2px rgba(28,6,6,.9);font-size:8.5px;font-weight:700;line-height:11px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;animation:promo-live 1.6s ease-in-out infinite;}

/* Discord: azul da marca com uma Pokébola apagada ao fundo (opacidade no <g>,
   não em cada traço — senão os encontros de linha e círculo somam e clareiam);
   a Pokébola vem
   girando, o feixe puxa o logo, ela balança três vezes, "clique" com
   estrelinhas, e o logo volta. */
.promo-discord{--promo-stage-bg:rgba(14,16,64,.28);--promo-stage-ring:rgba(255,255,255,.18);--promo-title-shadow:rgba(18,20,80,.55);--promo-msg:#e4e7ff;--promo-cta-bg:#fff;--promo-cta:#4049c9;--promo-bg:linear-gradient(135deg,#6c77f6 0%,#5865f2 45%,#4049c9 100%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff' stroke-width='5' opacity='.13'%3E%3Ccircle cx='32' cy='32' r='28'/%3E%3Cpath d='M4 32h19M41 32h19'/%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 70px center/76px 76px,var(--promo-bg);}
:where(body.night-mode) .promo-discord{--promo-bg:linear-gradient(135deg,#5560e0 0%,#4550c8 45%,#2f378f 100%);}
.promo-discord__logo{font-size:22px;line-height:1;color:#fff;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25));animation:promo-dc-logo 16s ease-in-out infinite;}
.promo-discord__fly{width:20px;height:20px;opacity:0;animation:promo-dc-fly 16s infinite;}
.promo-discord__ball{display:block;transform-origin:50% 100%;animation:promo-dc-wobble 16s ease-in-out infinite;}
.promo-discord__ball-btn{fill:#f4f4f8;animation:promo-dc-btn 16s infinite;}
.promo-discord__shadow{width:14px;height:4px;border-radius:50%;background:rgba(0,0,0,.35);transform:translateY(14px);opacity:0;animation:promo-dc-shadow 16s infinite;}
.promo-discord__beam{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0 18%,rgba(255,96,84,.6) 45%,rgba(255,96,84,0) 70%);opacity:0;animation:promo-dc-beam 16s infinite;}
.promo-discord__spark{animation:promo-dc-spark 16s infinite;}
.promo-discord__spark--1{--x:-12px;--y:-15px;}
.promo-discord__spark--2{--x:0px;--y:-19px;animation-delay:.05s;}
.promo-discord__spark--3{--x:12px;--y:-15px;animation-delay:.1s;}

/* Frases: a 2ª entra no meio da vez do slide e a 1ª volta com ele escondido. */
.promo-torneio .promo__msg{animation:promo-tm-msg 16s ease infinite;}
.promo-torneio .promo__msg--2{animation-name:promo-tm-msg2;}
.promo-discord .promo__msg{animation:promo-dc-msg 16s ease infinite;}
.promo-discord .promo__msg--2{animation-name:promo-dc-msg2;}
/* Discord sozinho (EU, sem torneio): sempre à vista, então a volta é suave. */
.promo--single .promo-discord .promo__msg{animation-name:promo-solo-msg;}
.promo--single .promo-discord .promo__msg--2{animation-name:promo-solo-msg2;}

@keyframes promo-a{
  0%,46%{transform:translateX(0);visibility:visible;}
  50%{transform:translateX(-100%);visibility:hidden;}
  50.1%,96%{transform:translateX(100%);visibility:hidden;}
  100%{transform:translateX(0);visibility:visible;}
}
@keyframes promo-b{
  0%,46%{transform:translateX(100%);visibility:hidden;}
  50%,96%{transform:translateX(0);visibility:visible;}
  100%{transform:translateX(-100%);visibility:hidden;}
}
@keyframes promo-dot-a{
  0%,46%,100%{width:14px;background:#fff;}
  50%,96%{width:6px;background:rgba(255,255,255,.45);}
}
@keyframes promo-dot-b{
  0%,46%,100%{width:6px;background:rgba(255,255,255,.45);}
  50%,96%{width:14px;background:#fff;}
}

@keyframes promo-live{
  0%,100%{opacity:1;}
  50%{opacity:.55;}
}
@keyframes promo-tm-trophy{
  0%,7.5%,24%,40%,100%{transform:translateY(0) scale(1,1) rotate(0);}
  2%{transform:translateY(1px) scale(1.12,.86);}
  4%{transform:translateY(-7px) scale(.95,1.08) rotate(-5deg);}
  6%{transform:translateY(1px) scale(1.08,.92) rotate(0);}
  16%,32%{transform:translateY(-1.5px) scale(1,1) rotate(0);}
}
@keyframes promo-tm-glint{
  0%,7%{transform:translateX(0);}
  11%,100%{transform:translateX(36px);}
}
@keyframes promo-tm-confetti{
  0%,3.5%{transform:translate(0,-6px) rotate(0) scale(0);opacity:0;}
  4%{transform:translate(0,-6px) rotate(0) scale(1);opacity:1;animation-timing-function:ease-out;}
  7%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1);opacity:1;animation-timing-function:ease-in;}
  15%,100%{transform:translate(calc(var(--x) * 1.3),calc(var(--y) + 34px)) rotate(calc(var(--r) * 2.5)) scale(1);opacity:0;}
}
@keyframes promo-tm-twinkle{
  0%,13%,19%,29%,35%,100%{transform:translate(var(--x),var(--y)) scale(0) rotate(0);opacity:0;}
  16%,32%{transform:translate(var(--x),var(--y)) scale(1) rotate(45deg);opacity:1;}
}
@keyframes promo-tm-msg{
  0%,22%,70.5%,100%{transform:translateY(0);opacity:1;}
  24.5%,70%{transform:translateY(-5px);opacity:0;}
}
@keyframes promo-tm-msg2{
  0%,23%,60.5%,100%{transform:translateY(5px);opacity:0;}
  25.5%,60%{transform:translateY(0);opacity:1;}
}

@keyframes promo-dc-logo{
  0%,50%,56.25%,62.5%{transform:translateY(0) scale(1);opacity:1;color:#fff;}
  53.1%,59.4%{transform:translateY(-2px) scale(1);}
  66.5%{transform:translateY(0) scale(1.06);opacity:1;color:#fff;}
  68.5%{transform:translateY(-3px) scale(.75);opacity:1;color:#ff8a80;}
  70.5%,91%{transform:translateY(-9px) scale(0);opacity:0;color:#ff8a80;}
  94%{transform:translateY(0) scale(1.15);opacity:1;color:#fff;}
  96%,100%{transform:translateY(0) scale(1);opacity:1;color:#fff;}
}
@keyframes promo-dc-fly{
  0%,62%{transform:translate(30px,14px) rotate(0) scale(.5);opacity:0;animation-timing-function:ease-out;}
  62.5%{opacity:1;}
  64.5%{transform:translate(12px,-16px) rotate(-300deg) scale(.85);animation-timing-function:ease-in-out;}
  66.5%,69%{transform:translate(0,-9px) rotate(-540deg) scale(1);opacity:1;animation-timing-function:ease-in;}
  71.5%,73.5%{transform:translate(0,5px) rotate(-720deg) scale(1);animation-timing-function:ease-out;}
  72.5%{transform:translate(0,1px) rotate(-720deg) scale(1);animation-timing-function:ease-in;}
  89%{transform:translate(0,5px) rotate(-720deg) scale(1);opacity:1;}
  92%,100%{transform:translate(0,5px) rotate(-720deg) scale(.3);opacity:0;}
}
@keyframes promo-dc-wobble{
  0%,74.5%,76.5%,78%,80%,81.5%,83.5%,100%{transform:rotate(0);}
  75.5%{transform:rotate(-22deg);}
  79%{transform:rotate(22deg);}
  82.5%{transform:rotate(-15deg);}
}
@keyframes promo-dc-btn{
  0%,74.5%,77%,78%,80.5%,81.5%,84%,100%{fill:#f4f4f8;}
  75.5%,79%,82.5%{fill:#ff6b61;}
}
@keyframes promo-dc-shadow{
  0%,71%{opacity:0;}
  71.5%,89%{opacity:1;}
  92%,100%{opacity:0;}
}
@keyframes promo-dc-beam{
  0%,66%{transform:translateY(-5px) scale(.2);opacity:0;}
  67.5%{transform:translateY(-5px) scale(.9);opacity:.95;}
  70.5%,100%{transform:translateY(-5px) scale(1.6);opacity:0;}
}
@keyframes promo-dc-spark{
  0%,84%{transform:translate(0,-2px) scale(0);opacity:0;}
  85%{transform:translate(0,-2px) scale(.6);opacity:1;}
  88%{transform:translate(var(--x),var(--y)) scale(1);opacity:1;}
  90.5%,100%{transform:translate(var(--x),var(--y)) scale(.4);opacity:0;}
}
@keyframes promo-dc-msg{
  0%,66%{transform:translateY(0);opacity:1;}
  68.5%,100%{transform:translateY(-5px);opacity:0;}
}
@keyframes promo-dc-msg2{
  0%,67%{transform:translateY(5px);opacity:0;}
  70%,100%{transform:translateY(0);opacity:1;}
}
@keyframes promo-solo-msg{
  0%,66%,100%{transform:translateY(0);opacity:1;}
  68.5%,96%{transform:translateY(-5px);opacity:0;}
  97%{transform:translateY(5px);opacity:0;}
}
@keyframes promo-solo-msg2{
  0%,67%{transform:translateY(5px);opacity:0;}
  70%,93%{transform:translateY(0);opacity:1;}
  96%,100%{transform:translateY(-5px);opacity:0;}
}

/* Sem animação: slides só trocam com um esmaecer, e cada um fica parado. */
@media (prefers-reduced-motion:reduce){
  .promo__stage *,.promo__msg{animation:none !important;}
  .promo__slide{animation-name:promo-a-fade;}
  .promo__slide+.promo__slide{animation-name:promo-b-fade;}
  .promo__slide:hover::after{transition:none;}
}
@keyframes promo-a-fade{
  0%,46%,100%{opacity:1;visibility:visible;}
  50%,96%{opacity:0;visibility:hidden;}
}
@keyframes promo-b-fade{
  0%,46%,100%{opacity:0;visibility:hidden;}
  50%,96%{opacity:1;visibility:visible;}
}

.mewtwobar a:link,
.mewtwobar a:visited {
  color: #dfddee;
}

.mewtwoGuild {
  vertical-align: top;
  display: inline-block;
  text-align: center;
  padding-right: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 73px;
}

a {
  color: #15202b
}

a:link {
  text-decoration: none;
  color: #15202b
}

a:visited {
  text-decoration: none;
  color: #15202b
}

a:active {
  text-decoration: none;
  color: #15202b
}

a:hover {
  text-decoration: none;
  color: #607d8b;
}

.accbox_button {
  width: 170px;
  margin-top: 10px;
  margin-left: 10px;
  font-size: 13px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  vertical-align: middle;
  background-color: rgba(236, 236, 236, 0.71);
  border: solid 1px #3b6d908c;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.accbox_button_ {
  width: 170px;
  margin-top: 4px;
  margin-left: 10px;
  font-size: 13px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  vertical-align: middle;
  background-color: rgba(236, 236, 236, 0.71);
  border: solid 1px #3b6d908c;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.accbox_button a {
  color: #333;
  text-decoration: none;
}

.accbox_button a:hover {
  color: #333;
  text-decoration: none;
  text-shadow: 0 0 3px #ffffff;
}

.accbox_button_ a {
  color: #333;
  text-decoration: none;
}

.accbox_button_ a:hover {
  color: #333;
  text-decoration: none;
  text-shadow: 0 0 3px #ffffff;
}

.accbox_online a {
  color: #ffffff;
  text-decoration: none;
  padding-bottom: 2px;
}

.accbox_online a:hover {
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 0 3px #ffffff;
}

.icon_menu_title {
  float: right;
  margin-top: -20px;
}

.menu_button {
  background-repeat: no-repeat;
  height: 9px;
  width: 173px;
  margin: auto;
  position: relative;
  color: white;
  text-shadow: #263238 0px 0px 2px;
  letter-spacing: 1px;
  font-weight: bold;
  padding-top: 12px;
  padding-bottom: 10px;
  padding-left: 11px;
  background: red;
  background: -webkit-linear-gradient(#204667, #009688);
  background: -o-linear-gradient(#204667, #009688);
  background: -moz-linear-gradient(#204667, #009688);
  background: #204667 linear-gradient(167deg, #204667, #009688 40rem);
  border-radius: 10px 10px 0px 0px;
}

.nav_links_highscores {
  background-color: rgba(255, 255, 255, 0.9);
  width: 168px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  margin: auto;
  font-size: 11px;
  color: #9e9e9ea3;
  padding: 8px;
  margin-bottom: 12px;
  -moz-box-shadow: 1px 1px 3px #2b2b2b;
  /* -webkit-box-shadow: 1px 1px 3px #2b2b2b; */
  /* box-shadow: 1px 1px 3px #2b2b2b; */
  margin-top: -1px;
}

.nav_links_search {
  background-color: rgba(255, 255, 255, 0.9);
  width: 168px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  margin: auto;
  font-size: 11px;
  color: #5d86a3;
  padding: 8px;
  margin-bottom: 12px;
  -moz-box-shadow: 1px 1px 3px #2b2b2b;
  /* -webkit-box-shadow: 1px 1px 3px #2b2b2b; */
  /* box-shadow: 1px 1px 3px #2b2b2b; */
  margin-top: -1px;
}

.nav_links {
  background-color: rgba(255, 255, 255, 0.9);
  width: 168px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  margin: auto;
  font-size: 17px;
  color: #5d86a3;
  padding: 8px;
  margin-bottom: 12px;
  -moz-box-shadow: 1px 1px 3px #2b2b2b;
  /* -webkit-box-shadow: 1px 1px 3px #2b2b2b; */
  /* box-shadow: 1px 1px 3px #2b2b2b; */
  margin-top: -1px;
}

.nav_links_logged {
  line-height: 1.4;
  background-color: rgba(255, 255, 255, 0.9);
  width: 168px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  margin: auto;
  font-size: 15px;
  color: #5d86a3;
  padding: 8px;
  margin-bottom: 8px;
  -moz-box-shadow: 1px 1px 3px #2b2b2b;
  /* -webkit-box-shadow: 1px 1px 3px #2b2b2b; */
  /* box-shadow: 1px 1px 3px #2b2b2b; */
  margin-top: -1px;
}

.nav_link_icon {
  padding-right: 4px;
}

.nav_links_blue a {
  font-size: 15px;
  transition: all 0.9s ease;
}

/* .nav_links_blue a:hover{border-left:2px solid #5d86a3; padding-left:5px; color:#5d86a3;}
.nav_links_blue a:active{border-left:2px solid #5d86a3; padding-left:5px;}
 */

.nav_links_red a {
  font-size: 15px;
  transition: all 0.9s ease;
}

/* .nav_links_red a:hover{border-left:2px solid #C23A27; padding-left:5px; color:#C23A27;}
.nav_links_red a:active{border-left:2px solid #C23A27; padding-left:5px; color:#C23A27;}
*/

.nav_links_purple a {
  font-size: 15px;
  transition: all 0.9s ease;
}

/* .nav_links_purple a:hover{border-left:2px solid #840480; padding-left:5px; color:#840480;}
.nav_links_purple a:active{border-left:2px solid #840480; padding-left:5px;}
*/

.nav_links_yellow a {
  font-size: 15px;
  transition: all 0.9s ease;
}

/* .nav_links_yellow a:hover{border-left:2px solid #DFBC49; padding-left:5px; color:#DFBC49;}
.nav_links_yellow a:active{border-left:2px solid #DFBC49; padding-left:5px;}
*/

.nav_links_logged a {
  font-size: 15px;
  transition: all 0.9s ease;
}

/* .nav_links_logged a:hover{border-left:2px solid #6FBFA4; padding-left:5px;color:#6FBFA4;}
.nav_links_logged a:active{border-left:2px solid #6FBFA4; padding-left:5px;}
*/

.nav_links .active {
  font-weight: bold;
}

.nav_links,
.nav_links_logged,
.nav_links_highscores,
.nav_links_search {
  margin-bottom: 12px;
  border-bottom: 5px solid #021a58;
}

.menu_nav {
  display: inline-block;
  background-color: transparent;
  width: 192px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  float: right;
  margin-top: -123px;
  /*padding: 7px; */
  font-size: 12px;
}

.newscont {
  border-radius: 11px;
  -moz-border-radius: 11px;
  -webkit-border-radius: 11px;
  -moz-box-shadow: 1px 0px 3px #2b2b2b;
  /* -webkit-box-shadow: 1px 0px 3px #2b2b2b; */
  /* box-shadow: 1px 0px 3px #2b2b2b; */
  background-color: rgb(255 255 255 / 95%);
  width: 735px;
  margin-top: 4px;
  padding: 10px;
  float: left;
  margin-bottom: 5px;
  font-size: 0.9em;
  min-height: 600px;
}

.newsTitle {
  padding: 1px;
  font-size: 14px;
  font-weight: bold;
}

.newscont .newsTitle {
  color: #4f9bb3;
  height: 25px;
  padding-top: 8px;
  border-left: 2px solid #0f76cb;
  padding-left: 14px;
}

.playerActivities {
  color: rgb(201, 151, 0);
}

/* Wrapper que o plugin cria em volta do input: é o ancestral posicionado do
   dropdown (.easy-autocomplete-container é absolute) — sem ele o dropdown
   flutua por cima do próprio campo. */
.easy-autocomplete {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.submit-lente {
  height: 35px;
  /* margin-left: -20px; */
  /* outline: none; */
  margin-bottom: 3px;
  background-color: rgba(255, 255, 255, 0);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px;
  /* margin-top: 4px; */
  color: rgb(7, 140, 184);
  text-align: center;
  /* border: 2px solid #00BFFF; */
  font-size: 18px;
  cursor: pointer;
}

.footer {
  padding: 10px;
  margin-top: 18px;
  margin-bottom: 5px;
  display: inline-flex;
  width: 735px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-box-shadow: 1px 0 3px #2b2b2b;
  background-color: rgba(255, 255, 255, 0.95);
}

.copyright {
  font-size: 12px;
  display: inline-flex;
}

.newscont .bar {
  border-left: 1px solid silver;
  border-right: 1px solid silver;
}

.menu_nav input.loginbutton {
  height: 36px;
  width: 119px;
  background: linear-gradient(180deg, #2e429a 0%, #243478 100%);
}

.menu_nav input.loginbutton:hover {
  background: linear-gradient(180deg, #3a51b8 0%, #2b3d8d 100%);
}

.menu_nav input.input {
  color: #0055a7;
  background-color: transparent;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  height: 31px;
  width: 134px;
  border: 1px;
  margin-top: 4px;
  text-align: center;
  border: 2px solid #243478;
  font-size: 14px;
}

.menu_nav hr {
  border: 1px solid #2c2c2c;
}

.pTable {
  width: 100%;
  max-width: 735px;
  border-width: 0px;
  border-spacing: 2px;
  border-style: outset;
  border-collapse: collapse;
  border: #ccc;
  float: left;
  font-size: 13px;
}

.pTable tr td {
  border: 0px solid #ccc;
  padding: 10px 10px;
}

.pTitle {
  border: 0px solid #ccc;
  background: #243478;
  color: white;
  font-weight: bold;
  /*border-bottom: 2px solid #2196f3;*/
}

/* --- Modern skin for remaining data tables (admin grids, summaries) + dark mode --- */
/* scoped to table.pTable so the .pTable progress-bars / Trainer's Card divs are untouched */
table.pTable{border-collapse:collapse;border-radius:12px;overflow:hidden;border:1px solid #e7e2d3;box-shadow:0 1px 2px rgba(40,40,60,.05);}
table.pTable tr td{border-bottom:1px solid #efeadd;padding:9px 11px;}
table.pTable tr:last-child td{border-bottom:0;}
table.pTable tr.pTitle td,table.pTable .pTitle td{background:#243478;color:#fff;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.4px;border-bottom:0;}
table.pTable tr.pTitle td font,table.pTable .pTitle td font{color:#fff!important;}
table.pTable tr.b1{background:#faf8f2;}
table.pTable tr.b2{background:#fff;}
table.pTable tr.b1:hover td,table.pTable tr.b2:hover td{background:#f3f0e4;}
body.night-mode table.pTable{border-color:#2e4254;box-shadow:none;background:#1d2a38;}
body.night-mode table.pTable tr td{border-bottom-color:#2a3b4d;color:#dce6ef;}
body.night-mode table.pTable tr.pTitle td,body.night-mode table.pTable .pTitle td{background:#1a2330;color:#eaf0f6;}
body.night-mode table.pTable tr.b1{background:#1d2a38;}
body.night-mode table.pTable tr.b2{background:#21303f;}
body.night-mode table.pTable tr.b1:hover td,body.night-mode table.pTable tr.b2:hover td{background:#26384a;}
body.night-mode table.pTable a{color:#9ecbff;}

.b1 {
  background: rgba(124, 124, 124, 0.50);
  font-size: 1.2em;
}

ul:first-child>li {
  border-radius: 10px 0px 0px 10px;
}

td:last-child,
ul:last-child>li {
  border-radius: 0px 10px 10px 0px;
}

.b2 {
  background: rgba(179, 199, 213, 0);
  font-size: 1.2em;
}

.b3 {
  background: #ffffff;
  font-size: 1.2em;
}

.rulesUl li {
  font-size: 80%;
}

.check_icon {
  right: 26px;
  top: -5px;
  width: 13px;
}

.ticker img {
  margin-bottom: 2px;
}

.ticker {}

.deathNew {
  color: green;
}

.logged {
  display: none;
}

.searchBar {
  width: 277.11px;
}

.loginbutton {
  background: linear-gradient(180deg, #2e429a 0%, #243478 100%);
  height: 36px;
  width: 119px;
}

.loginbutton:hover {
  background: linear-gradient(180deg, #3a51b8 0%, #2b3d8d 100%);
}

p.fb-post {
  word-break: break-word;
  margin-bottom: 15px;
  line-height: 1.2;
  font-size: 15px;
  border-left: 2px solid #e0e0e0;
}

.header {
  height: 150px;
  background-position-y: -60px;
}

.fixedbar {
  bottom: 0;
  color: #fff;
  position: fixed;
  font-size: 16px;
  z-index: 99999;
  vertical-align: middle;
  margin: 0;
  opacity: 0.9;
  font-weight: 700;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 6px;
  -moz-box-shadow: 1px 0 3px #2b2b2b;
  /* -webkit-box-shadow: 1px 0 3px #2b2b2b; */
  /* box-shadow: 1px 0 3px #2b2b2b; */
  background-color: #243478;
  width: 715px;
  padding: 10px;
  float: left;
}

.boxfloat a {
  color: #fff;
}

.boxfloat a:hover {
  color: #000;
}

.boxfloat {
  text-align: center;
  margin: 0 auto;
}

/* Estado ativo dos botões do shop (Enviar p/ Personagem × Presente).
   background (shorthand) para cobrir o gradiente do .button padrão. */
.buttonActivated,
.button.buttonActivated,
.button.buttonActivated:hover,
body.night-mode .button.buttonActivated,
body.night-mode .button.buttonActivated:hover {
  background: green;
}

.imgPostFacebook {
  border: 1px solid #ccc;
  border-radius: 10px;
  max-width: 600px;
}

.loggin_twofactor,
.loggin_character {
  display: none;
}

.twofactor,
.character_suspicious {
  display: none;
}

.qntd_shop {
  height: 25px;
  border-radius: 10px;
  font-size: 18px;
  width: 25px;
}

.plus {
  background-color: green;
}

.minus {
  background-color: #f44336;
}

/* ===================================================================
   FORMULÁRIO DE CONTA / PERSONAGEM (.ca-*)
   -------------------------------------------------------------------
   Kit usado em /createaccount (e reaproveitável em account/createcharacter).
   Vive dentro do .message > .content nativo: faixa de destaque (.ca-hero),
   card com seções (.ca-legend), campos com ícone + selo de estado
   (.ca-field) e seletores em cartão para gênero / cidade / servidor.
   Escopado em .ca para não vazar nas outras páginas — em especial os
   inputs, que globalmente são centralizados, transparentes e 18px.
   Ocupa a coluna de conteúdo inteira (735px), na mesma largura da barra de
   título, e tudo respira 16px: barra → faixa → card → card.
   =================================================================== */
.ca {
  color: #2b2b2b;
}
/* A barra de título já tem 5px de margem embaixo; as margens colapsam, então
   ficam 16px até a faixa (o .content não tem padding). O banner do clã faz o
   papel da barra na página do clã. */
.characters-cap + .content > .ca:first-child,
.characters-cap + .ca,
.guild-cap + .ca {
  margin-top: 16px;
}

/* ---- faixa de destaque ---- */
.ca-hero {
  padding: 16px 18px;
  border-radius: 12px;
  text-align: center;
  color: #2b2b2b;
  background: #fff;
  border: 1px solid #e2e6f2;
}
.ca-hero h1 {
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: #243478;
  text-transform: none;
}
.ca-hero p {
  margin: 5px 0 0;
  padding: 0;
  font-size: 12.5px;
  color: #5b5b5b;
}
.ca-steps {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  counter-reset: castep;
}
/* Passo a passo (não são botões): círculo numerado + rótulo + chevron. */
.ca-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #5b5b5b;
  counter-increment: castep;
}
.ca-step::before {
  content: counter(castep);
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: #243478;
}
.ca-step:not(:last-child)::after {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  color: #a7b0cd;
  margin-left: 10px;
}
.ca-step i {
  display: none;
}
/* Um chip sozinho é um selo de status (ex.: "Desativado"), não um passo:
   sem número nem chevron, e com o ícone de volta. */
.ca-step:only-child {
  background: #eef1fb;
  border: 1px solid #d8def3;
  border-radius: 999px;
  padding: 4px 11px;
  color: #243478;
}
.ca-step:only-child::before {
  content: none;
}
.ca-step:only-child i {
  display: inline;
  color: #6470a8;
}

/* ---- card ---- */
.ca-card {
  margin-top: 16px;
  padding: 2px 16px 16px;
  background: #fff;
  border: 1px solid #e2e6f2;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(36, 52, 120, 0.07);
}
.ca-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 11px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e9edf7;
  font-size: 14px;
  font-weight: 700;
  color: #243478;
}
.ca-legend > i {
  color: #4a5da8;
}
.ca-legend .ca-legend-hint {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: #9099b5;
  letter-spacing: 0.2px;
  text-transform: none;
}

/* ---- campos ---- */
.ca-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.ca-field {
  flex: 1 1 100%;
  min-width: 0;
}
.ca-field.half {
  flex: 1 1 calc(50% - 6px);
}
/* float:none anula o `label { float:left }` global */
.ca .ca-field > label {
  display: block;
  float: none;
  margin: 0 0 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #243478;
}
.ca .ca-field > label i {
  color: #4a5da8;
  margin-right: 4px;
}
/* flex (e não block) para a caixa ter a altura exata do input — como
   inline-block a line-box fica maior e desalinha os ícones absolutos */
.ca-input {
  position: relative;
  display: flex;
  align-items: center;
}
.ca-input > i.ca-ico {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #a7b0cd;
  font-size: 13px;
  pointer-events: none;
}
.ca .ca-input input[type="text"],
.ca .ca-input input[type="password"],
.ca .ca-input input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 38px 0 32px;
  background: #f7f8fd;
  border: 2px solid #dfe3f2;
  border-radius: 9px;
  color: #1f2a52;
  font-size: 15px;
  text-align: left;
  letter-spacing: 0.2px;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
/* Campo de código (Client Security, 2FA, código do e-mail da recuperação):
   depois do input base, que tem a mesma especificidade e o anulava. */
.ca .ca-input input.ca-input-code {
  padding-left: 38px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 5px;
  text-align: center;
}
.ca .ca-input input::placeholder {
  color: #a7b0cd !important;
  font-size: 14px;
}
.ca .ca-input input:hover {
  border-color: #c8cfe8;
}
.ca .ca-input input:focus {
  outline: none;
  background: #fff;
  border-color: #243478;
  box-shadow: 0 0 0 3px rgba(36, 52, 120, 0.15);
}
.ca-field.is-ok .ca-input input {
  border-color: #43a047;
  background: #f5fbf6;
}
.ca-field.is-ok .ca-input input:focus {
  box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.18);
}
.ca-field.is-bad .ca-input input {
  border-color: #e53935;
  background: #fdf5f5;
}
.ca-field.is-bad .ca-input input:focus {
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.18);
}

/* selo de estado dentro do campo (spinner / check / x) */
.ca-state {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  font-size: 15px;
  line-height: 17px;
  text-align: center;
}
.ca-state i {
  display: none;
}
.ca-field.is-checking .ca-state .fa-spinner {
  display: inline-block;
  color: #a7b0cd;
  animation: caSpin 0.8s linear infinite;
}
.ca-field.is-ok .ca-state .fa-check-circle {
  display: inline-block;
  color: #43a047;
}
.ca-field.is-bad .ca-state .fa-times-circle {
  display: inline-block;
  color: #e53935;
}
@keyframes caSpin {
  to {
    transform: rotate(360deg);
  }
}

.ca-msg {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #9099b5;
  min-height: 15px;
}
.ca-field.is-ok .ca-msg {
  color: #2e7d32;
  font-weight: 600;
}
.ca-field.is-bad .ca-msg {
  color: #c62828;
  font-weight: 600;
}

/* medidor de força da senha */
.ca-strength {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.ca-strength span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #e6e9f4;
  transition: background 0.2s;
}
.ca-strength.s1 span:nth-child(1) {
  background: #e53935;
}
.ca-strength.s2 span:nth-child(-n + 2) {
  background: #fb8c00;
}
.ca-strength.s3 span:nth-child(-n + 3) {
  background: #43a047;
}
.ca-strength.s4 span {
  background: #2e7d32;
}

/* botão discreto ao lado do campo (ex.: Sugerir nome) */
.ca-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 700;
  color: #243478;
  background: #eef1fb;
  border: 1px solid #d8def3;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
.ca-inline-btn:hover {
  background: #e2e7f8;
  border-color: #c2cbef;
}

/* ---- seletores em cartão (gênero / cidade / servidor) ---- */
.ca-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* flex-grow 0: a última linha incompleta (ex.: 7 mundos em linhas de 4) mantém
   os cartões do mesmo tamanho, alinhados à esquerda, em vez de esticar. */
.ca-pick {
  position: relative;
  flex: 0 1 calc(50% - 4px);
  cursor: pointer;
  min-width: 0;
}
.ca-pick.third {
  flex: 0 1 calc(33.333% - 5.34px);
}
.ca-pick.quarter {
  flex: 0 1 calc(25% - 6px);
}
.ca-pick input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.ca-pick-box {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  background: #f7f8fd;
  border: 2px solid #dfe3f2;
  border-radius: 10px;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.ca-pick:hover .ca-pick-box {
  border-color: #b9c2e5;
  background: #eef1fb;
}
.ca-pick input:checked + .ca-pick-box {
  border-color: #243478;
  background: #eef1fb;
  box-shadow: 0 1px 5px rgba(36, 52, 120, 0.2);
}
.ca-pick input:focus-visible + .ca-pick-box {
  outline: 2px solid #4a5da8;
  outline-offset: 2px;
}
.ca-pick-box > i {
  font-size: 16px;
  width: 18px;
  text-align: center;
  color: #7b85ad;
  flex: none;
}
.ca-pick input:checked + .ca-pick-box > i {
  color: #243478;
}
.ca-pick-txt {
  min-width: 0;
}
.ca-pick-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #243478;
  line-height: 1.25;
}
.ca-pick-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #9099b5;
  line-height: 1.3;
  margin-top: 1px;
}
.ca-dot {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ---- captcha, erro e envio ---- */
.ca-turnstile {
  display: flex;
  justify-content: center;
  min-height: 68px;
}
.ca-formerror {
  display: none;
  margin-top: 12px;
  padding: 9px 12px;
  border-left: 3px solid #e53935;
  background: #fdf1f1;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #c62828;
}
.ca-formerror i {
  margin-right: 6px;
}
.ca-submit-wrap {
  margin-top: 16px;
  text-align: center;
}
.ca .ca-submit {
  box-sizing: border-box;
  width: 100%;
  max-width: 330px;
  height: 46px;
  margin: 0;
  background: linear-gradient(180deg, #2e429a 0%, #243478 100%);
  color: #fff;
  border: none;
  border-left: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(36, 52, 120, 0.3);
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.ca .ca-submit:hover {
  background: linear-gradient(180deg, #3a51b8 0%, #2b3d8d 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(36, 52, 120, 0.36);
}
.ca .ca-submit:active {
  transform: translateY(0);
}
/* O login (pagesEvents.js) desabilita o botão e mexe no background-color inline,
   que fica escondido atrás do gradiente — o estado desabilitado vem daqui. */
.ca .ca-submit:disabled,
.ca .ca-submit:disabled:hover {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.ca .ca-submit i {
  margin-right: 7px;
}
.ca-terms {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.7;
  color: #7d849c;
}
.ca-terms a {
  color: #243478;
  font-weight: 700;
}

/* ---- lista de caminhos clicáveis ---- */
.ca-options {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ca-option,
a.ca-option,
a.ca-option:link,
a.ca-option:visited {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f7f8fd;
  border: 2px solid #dfe3f2;
  border-radius: 10px;
  color: #3a4260 !important;
  text-decoration: none !important;
  transition: border-color 0.15s, background-color 0.15s, transform 0.1s;
}
.ca-option:hover {
  border-color: #243478;
  background: #eef1fb;
  transform: translateX(2px);
}
.ca-option > i {
  flex: none;
  width: 24px;
  text-align: center;
  font-size: 19px;
  color: #4a5da8;
}
.ca-option span {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.5;
}
.ca-option span b {
  display: block;
  margin-bottom: 1px;
  font-size: 14px;
  color: #243478;
}
.ca-option .ca-option-go {
  font-size: 12px;
  color: #a7b0cd;
}

/* ---- valor em destaque (senha gerada, recovery key) ---- */
.ca-code {
  margin: 6px 0 4px;
  padding: 16px 10px;
  text-align: center;
  background: linear-gradient(180deg, #2e429a 0%, #243478 100%);
  border-radius: 12px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  word-break: break-all;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}
.ca-code-hint {
  margin-bottom: 6px;
  text-align: center;
  font-size: 11.5px;
  color: #9099b5;
}

/* ---- botão-link (mesma cara do botão de envio) ---- */
.ca-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}
.ca-btn,
a.ca-btn,
a.ca-btn:link,
a.ca-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  min-width: 200px;
  height: 42px;
  padding: 0 20px;
  background: linear-gradient(180deg, #2e429a 0%, #243478 100%);
  color: #fff !important;
  border-radius: 10px;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(36, 52, 120, 0.28);
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.ca-btn:hover {
  background: linear-gradient(180deg, #3a51b8 0%, #2b3d8d 100%);
  transform: translateY(-1px);
}
.ca-btn.ghost,
a.ca-btn.ghost,
a.ca-btn.ghost:link,
a.ca-btn.ghost:visited {
  background: #eef1fb;
  border: 2px solid #d8def3;
  color: #243478 !important;
  box-shadow: none;
}
.ca-btn.ghost:hover {
  background: #e2e7f8;
  border-color: #c2cbef;
}

/* ---- blocos do padrão de página (pages/download.php e as páginas refeitas) ---- */
.ca-sub {
  margin: 18px 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #6b7394;
}
/* plataformas: o .ca-picks em pé, com ícone grande */
.ca-plats .ca-pick-box {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 16px 8px 14px;
  text-align: center;
}
.ca-plats .ca-pick-box > i {
  width: auto;
  font-size: 30px;
}
.ca-plats .ca-pick-name {
  font-size: 15px;
}
.ca-plats .ca-pick-sub {
  font-size: 11.5px;
}
/* download principal: botão largo, arquivo e MD5 embaixo */
.ca-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0 2px;
}
.ca-btn.xl,
a.ca-btn.xl {
  width: 100%;
  max-width: 420px;
  height: 56px;
  border-radius: 12px;
  font-size: 15.5px;
}
.ca-btn.sm,
a.ca-btn.sm {
  min-width: 0;
  height: 34px;
  padding: 0 14px;
  font-size: 12px;
}
.ca-meta {
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: #6b7394;
}
.ca-meta b {
  color: #3a4260;
}
.ca-md5 {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  padding: 5px 5px 5px 10px;
  border: 1px dashed #d8def3;
  border-radius: 9px;
  text-align: left;
}
.ca-md5 em {
  flex: none;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #6b7394;
}
.ca-md5 code,
.ca-option code {
  font-family: Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: #b3360b;
  word-break: break-all;
}
.ca-md5 code {
  flex: 1;
  min-width: 0;
}
.ca-option .ca-md5 {
  display: flex;
  flex: none;
  max-width: none;
  margin-top: 6px;
}
.ca-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #dfe3f2;
  border-radius: 8px;
  background: #f7f8fd;
  color: #4a5da8;
  font-size: 13px;
  cursor: pointer;
}
.ca-copy:hover {
  border-color: #b9c2e5;
}
.ca-copy.done {
  color: #2e7d32;
}
/* caminho que não é link (ex.: escolher o fabricante da placa de vídeo) */
.ca-option.static:hover {
  border-color: #dfe3f2;
  background: #f7f8fd;
  transform: none;
}
.ca-option .ca-option-links {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
/* chave/valor em quadros (requisitos, informações) */
.ca-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.ca-kv > div {
  padding: 12px;
  background: #f7f8fd;
  border: 1px solid #dfe3f2;
  border-radius: 10px;
}
.ca-kv i {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  color: #4a5da8;
}
.ca-kv small {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #6b7394;
}
.ca-kv b {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: #243478;
}
/* aviso dentro do card (info; .warn = atenção) */
.ca-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  background: #eef3fb;
  border: 1px solid #cfdcf0;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #2b2b2b;
  text-align: left;
}
.ca-note > i {
  flex: none;
  margin-top: 3px;
  color: #4a5da8;
}
.ca-note.warn {
  background: #fff7e0;
  border-color: #f0d68a;
  color: #6b4c00;
}
.ca-note.warn > i {
  color: #a77a00;
}
/* cartão-link (caPickLinksHtml): o marcado tem o visual do radio marcado */
a.ca-pick,
a.ca-pick:link,
a.ca-pick:visited {
  text-decoration: none !important;
}
.ca-pick.is-on .ca-pick-box {
  border-color: #243478;
  background: #eef1fb;
  box-shadow: 0 1px 5px rgba(36, 52, 120, 0.2);
}
.ca-pick.is-on .ca-pick-box > i {
  color: #243478;
}
a.ca-pick:focus-visible .ca-pick-box {
  outline: 2px solid #4a5da8;
  outline-offset: 2px;
}
button.ca-btn {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
/* select no mesmo visual do campo de texto (anula a seta desenhada do select global) */
.ca .ca-select select {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 34px 0 32px;
  background: #f7f8fd;
  background-image: none;
  border: 2px solid #dfe3f2;
  border-radius: 9px;
  color: #1f2a52;
  font-size: 14px;
  line-height: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.ca .ca-select select:hover {
  border-color: #c8cfe8;
}
.ca .ca-select select:focus {
  outline: none;
  background: #fff;
  border-color: #243478;
  box-shadow: 0 0 0 3px rgba(36, 52, 120, 0.15);
}
.ca-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #7b85ad;
  pointer-events: none;
}
/* filtros numa linha (select + interruptores), que quebra em telas estreitas */
.ca-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 12px;
  align-items: end;
  margin-top: 12px;
}
/* interruptor: checkbox escondido + trilho (float:none anula o label global) */
.ca label.ca-switch {
  float: none;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 42px;
  margin: 0;
  padding: 0 12px;
  background: #f7f8fd;
  border: 2px solid #dfe3f2;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #243478;
  cursor: pointer;
  user-select: none;
}
.ca-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.ca-switch-track {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #cfd5ea;
  transition: background 0.15s;
}
.ca-switch-track::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: left 0.15s;
}
.ca-switch input:checked + .ca-switch-track {
  background: #243478;
}
.ca-switch input:checked + .ca-switch-track::after {
  left: 17px;
}
.ca-switch input:focus-visible + .ca-switch-track {
  outline: 2px solid #4a5da8;
  outline-offset: 2px;
}
.ca-switch-txt {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.ca-switch > i {
  flex: none;
  color: #9099b5;
  cursor: help;
}
/* estado vazio (busca sem resultado) */
.ca-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 26px 16px;
  border: 2px dashed #dfe3f2;
  border-radius: 10px;
  text-align: center;
  font-size: 12.5px;
  color: #5b6275;
}
.ca-empty > i {
  font-size: 24px;
  color: #a7b0cd;
}
.ca-empty b {
  font-size: 14px;
  color: #243478;
}
.ca-meta.ca-updated {
  margin-top: 12px;
  text-align: right;
}
/* autocomplete (easy-autocomplete) num campo do kit: o wrapper do plugin ocupa
   a largura do campo (a lista acompanha) e a lupa fica por cima do input */
.ca-input > .easy-autocomplete {
  flex: 1;
  min-width: 0;
  width: 100% !important;
}
.ca-input > i.ca-ico {
  z-index: 1;
}
/* busca de personagem dentro do card: campo na largura toda */
.ca-card.cs--page .cs-field {
  max-width: none;
}
/* listas .hs-* dentro de card: linhas no tom dos campos (as de medalha e as de
   leilão mantêm o destaque delas). O :where() deixa a especificidade baixa, para
   estados da página (ex.: .selectPlayer.selected do torneio) continuarem valendo. */
.ca-card :where(.hs-row:not(.hs-row--1, .hs-row--2, .hs-row--3, .has-auction)) {
  background: #f7f8fd;
  border-color: #dfe3f2;
}

/* ---- páginas de conteúdo (eventos, streamers, mapa, como jogar, regras) ---- */
/* o p global tem padding de 10px e entrelinha = tamanho da fonte */
.ca-prose p {
  margin: 0 0 10px;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #2b2b2b;
}
.ca-prose p:last-child {
  margin-bottom: 0;
}
/* atalhos para as seções da página, dentro da faixa */
.ca-jump {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ca-jump a,
.ca-jump a:link,
.ca-jump a:visited {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #dfe3f2;
  border-radius: 999px;
  background: #f7f8fd;
  font-size: 12px;
  font-weight: 700;
  color: #243478 !important;
  text-decoration: none !important;
}
.ca-jump a:hover {
  border-color: #243478;
}
.ca-hero .ca-actions > .ca-jump {
  margin-top: 0;
}
/* evento: faixa com a imagem e o nome, texto e quadros de informação */
.ca-events {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ca-event {
  overflow: hidden;
  background: #f7f8fd;
  border: 1px solid #dfe3f2;
  border-radius: 12px;
}
.ca-event-ban {
  position: relative;
  height: 92px;
  background-color: #0b1520;
  background-size: cover;
  background-position: center;
}
.ca-event-ban::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 14, 22, 0.82) 0%, rgba(6, 14, 22, 0.3) 60%, rgba(6, 14, 22, 0) 100%);
}
.ca-event-ban h3 {
  position: absolute;
  z-index: 1;
  left: 14px;
  right: 14px;
  bottom: 10px;
  margin: 0;
  padding: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  text-transform: none;
}
.ca-event-body {
  padding: 12px 14px 14px;
}
.ca-event-body p {
  margin: 0 0 8px;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #2b2b2b;
}
.ca-mods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.ca-mods span {
  flex: 1 1 180px;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid #dfe3f2;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #243478;
}
.ca-mods small {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #6b7394;
}
.ca-inf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.ca-inf > div {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e2e6f2;
  border-radius: 9px;
}
.ca-inf i {
  flex: none;
  margin-top: 3px;
  color: #4a5da8;
}
.ca-inf small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #6b7394;
}
.ca-inf b {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: #243478;
}
/* streamers ao vivo */
.ca-live-dot {
  flex: none;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.25);
}
.ca-streams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.ca-stream,
a.ca-stream:link,
a.ca-stream:visited {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f7f8fd;
  border: 1px solid #dfe3f2;
  border-radius: 12px;
  color: #2b2b2b !important;
  text-decoration: none !important;
}
.ca-stream:hover {
  border-color: #243478;
}
.ca-stream-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #0b1520;
}
.ca-stream-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ca-stream-live,
.ca-stream-views {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
}
.ca-stream-live {
  left: 8px;
  top: 8px;
  background: #e5484d;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ca-stream-views {
  right: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.65);
}
.ca-stream-meta {
  display: block;
  padding: 10px 12px 12px;
}
.ca-stream-meta b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
  color: #243478;
}
.ca-stream-meta > span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: #5b6275;
}
.ca-media {
  margin-top: 12px;
  text-align: center;
}
.ca-media img {
  max-width: 100%;
  height: auto;
}
/* abas que trocam o conteúdo de um card (mapa) */
.ca-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: #f7f8fd;
  border: 1px solid #dfe3f2;
  border-radius: 12px;
}
.ca-tabs a,
.ca-tabs a:link,
.ca-tabs a:visited {
  flex: 1 1 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: #5b6275 !important;
  text-decoration: none !important;
}
.ca-tabs a.is-on {
  background: #fff;
  color: #243478 !important;
  box-shadow: 0 2px 8px rgba(36, 52, 120, 0.1);
}

/* chamada com texto à esquerda e botões à direita */
.ca-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}
.ca-cta-txt {
  flex: 1 1 240px;
  font-size: 12.5px;
  color: #5b6275;
}
.ca-cta-txt b {
  display: block;
  font-size: 14px;
  color: #243478;
}

/* ---- night mode ---- */
body.night-mode .ca {
  color: #eaf0f6;
}
body.night-mode .ca-hero {
  background: #1d2a38;
  border: 1px solid #2e4254;
  color: #cfe1f1;
}
body.night-mode .ca-hero h1 {
  color: #e6eef7;
}
body.night-mode .ca-hero p {
  color: #8ea3b6;
}
body.night-mode .ca-step {
  color: #a9b6c6;
}
body.night-mode .ca-step::before {
  background: #36506a;
  color: #e6eef7;
}
body.night-mode .ca-step:only-child {
  background: #233444;
  border-color: #36506a;
  color: #cfe1f1;
}
body.night-mode .ca-step:only-child i {
  color: #7f9fd8;
}
body.night-mode .ca-card {
  background: #1d2a38;
  border-color: #2e4254;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
body.night-mode .ca-legend {
  color: #cfe1f1;
  border-bottom-color: #2e4254;
}
body.night-mode .ca-legend > i {
  color: #8fa6c8;
}
body.night-mode .ca-legend .ca-legend-hint {
  color: #7d8794;
}
body.night-mode .ca .ca-field > label {
  color: #cfe1f1;
}
body.night-mode .ca .ca-field > label i,
body.night-mode .ca-input > i.ca-ico {
  color: #6f8497;
}
body.night-mode .ca .ca-input input[type="text"],
body.night-mode .ca .ca-input input[type="password"],
body.night-mode .ca .ca-input input[type="email"] {
  background: #233444;
  border-color: #36506a;
  color: #eaf0f6;
}
body.night-mode .ca .ca-input input::placeholder {
  color: #6f8497 !important;
}
body.night-mode .ca .ca-input input:hover {
  border-color: #43617f;
}
body.night-mode .ca .ca-input input:focus {
  background: #2a3f54;
  border-color: #5b86b5;
  box-shadow: 0 0 0 3px rgba(91, 134, 181, 0.2);
}
body.night-mode .ca-field.is-ok .ca-input input {
  border-color: #4c9a51;
  background: #1e3424;
}
body.night-mode .ca-field.is-bad .ca-input input {
  border-color: #c1544f;
  background: #352323;
}
body.night-mode .ca-msg {
  color: #8ea3b6;
}
body.night-mode .ca-field.is-ok .ca-msg {
  color: #7bd086;
}
body.night-mode .ca-field.is-bad .ca-msg {
  color: #ef9a9a;
}
body.night-mode .ca-strength span {
  background: #2e4254;
}
body.night-mode .ca-inline-btn {
  color: #cfe1f1;
  background: #233444;
  border-color: #36506a;
}
body.night-mode .ca-inline-btn:hover {
  background: #2a3f54;
}
body.night-mode .ca-pick-box {
  background: #233444;
  border-color: #36506a;
}
body.night-mode .ca-pick:hover .ca-pick-box {
  background: #2a3f54;
  border-color: #43617f;
}
body.night-mode .ca-pick input:checked + .ca-pick-box {
  background: #2a3f54;
  border-color: #7fa8d4;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}
body.night-mode .ca-pick-box > i {
  color: #8fa6c8;
}
body.night-mode .ca-pick input:checked + .ca-pick-box > i {
  color: #cfe1f1;
}
body.night-mode .ca-pick-name {
  color: #eaf0f6;
}
body.night-mode .ca-pick-sub {
  color: #8ea3b6;
}
body.night-mode .ca-formerror {
  background: #352323;
  color: #ef9a9a;
}
body.night-mode .ca .ca-submit {
  background: linear-gradient(180deg, #3d5a80 0%, #2c4156 100%);
}
body.night-mode .ca .ca-submit:hover {
  background: linear-gradient(180deg, #4a6d99 0%, #365068 100%);
}
/* Botões padrão em night mode — mesma paleta do .ca-submit. */
body.night-mode .button,
body.night-mode input[type="submit"],
body.night-mode input[type="button"],
body.night-mode .loginbutton,
body.night-mode .menu_nav input.loginbutton {
  background: linear-gradient(180deg, #3d5a80 0%, #2c4156 100%);
}
body.night-mode .button:hover,
body.night-mode input[type="submit"]:hover,
body.night-mode input[type="button"]:hover,
body.night-mode .loginbutton:hover,
body.night-mode .menu_nav input.loginbutton:hover {
  background: linear-gradient(180deg, #4a6d99 0%, #365068 100%);
}
body.night-mode .ca-terms {
  color: #8ea3b6;
}
body.night-mode .ca-terms a {
  color: #9fc2e8;
}
body.night-mode .ca-option,
body.night-mode a.ca-option,
body.night-mode a.ca-option:link,
body.night-mode a.ca-option:visited {
  background: #233444;
  border-color: #36506a;
  color: #c3d2dd !important;
}
body.night-mode .ca-option:hover {
  background: #2a3f54;
  border-color: #7fa8d4;
}
body.night-mode .ca-option > i {
  color: #8fa6c8;
}
body.night-mode .ca-option span b {
  color: #eaf0f6;
}
body.night-mode .ca-option .ca-option-go {
  color: #6f8497;
}
body.night-mode .ca-btn,
body.night-mode a.ca-btn,
body.night-mode a.ca-btn:link,
body.night-mode a.ca-btn:visited {
  background: linear-gradient(180deg, #3d5a80 0%, #2c4156 100%);
}
body.night-mode .ca-btn.ghost,
body.night-mode a.ca-btn.ghost,
body.night-mode a.ca-btn.ghost:link,
body.night-mode a.ca-btn.ghost:visited {
  background: #233444;
  border-color: #36506a;
  color: #cfe1f1 !important;
}
body.night-mode .ca-btn.ghost:hover {
  background: #2a3f54;
}
body.night-mode .ca-code {
  background: linear-gradient(180deg, #23334a 0%, #1a2735 100%);
  border: 1px solid #2e4254;
  color: #eaf0f6;
}
body.night-mode .ca-code-hint {
  color: #8ea3b6;
}
body.night-mode .ca-sub,
body.night-mode .ca-meta,
body.night-mode .ca-md5 em,
body.night-mode .ca-kv small {
  color: #8796a6;
}
body.night-mode .ca-meta b,
body.night-mode .ca-cta-txt {
  color: #a9b6c6;
}
body.night-mode .ca-md5 {
  border-color: #36506a;
}
body.night-mode .ca-md5 code,
body.night-mode .ca-option code {
  color: #ff9e7a;
}
body.night-mode .ca-copy {
  background: #233444;
  border-color: #36506a;
  color: #8fa6c8;
}
body.night-mode .ca-copy.done {
  color: #a6e3c0;
}
body.night-mode .ca-option.static:hover {
  background: #233444;
  border-color: #36506a;
}
body.night-mode .ca-kv > div {
  background: #233444;
  border-color: #36506a;
}
body.night-mode .ca-kv i {
  color: #8fa6c8;
}
body.night-mode .ca-kv b,
body.night-mode .ca-cta-txt b {
  color: #e6eef7;
}
body.night-mode .ca-note {
  background: #1f3347;
  border-color: #2f4f6f;
  color: #eaf0f6;
}
body.night-mode .ca-note > i {
  color: #8fa6c8;
}
body.night-mode .ca-note.warn {
  background: #3a3220;
  border-color: #6b5a2a;
  color: #f1d58a;
}
body.night-mode .ca-note.warn > i {
  color: #f1d58a;
}
body.night-mode .ca-pick.is-on .ca-pick-box {
  background: #2a3f54;
  border-color: #7fa8d4;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}
body.night-mode .ca-pick.is-on .ca-pick-box > i {
  color: #cfe1f1;
}
body.night-mode .ca .ca-select select {
  background: #233444;
  border-color: #36506a;
  color: #eaf0f6;
}
body.night-mode .ca .ca-select select:hover {
  border-color: #43617f;
}
body.night-mode .ca .ca-select select:focus {
  background: #2a3f54;
  border-color: #5b86b5;
  box-shadow: 0 0 0 3px rgba(91, 134, 181, 0.2);
}
body.night-mode .ca-select-arrow,
body.night-mode .ca-switch > i,
body.night-mode .ca-empty > i {
  color: #6f8497;
}
body.night-mode .ca label.ca-switch {
  background: #233444;
  border-color: #36506a;
  color: #cfe1f1;
}
body.night-mode .ca-switch-track {
  background: #36506a;
}
body.night-mode .ca-switch input:checked + .ca-switch-track {
  background: #7fa8d4;
}
body.night-mode .ca-empty {
  border-color: #36506a;
  color: #a9b6c6;
}
body.night-mode .ca-empty b {
  color: #e6eef7;
}
body.night-mode .ca-card :where(.hs-row:not(.hs-row--1, .hs-row--2, .hs-row--3, .has-auction)) {
  background: #233444;
  border-color: #36506a;
}
body.night-mode .ca-card .hs-val {
  background: #1d2a38;
}
body.night-mode .ca-prose p,
body.night-mode .ca-event-body p {
  color: #eaf0f6;
}
body.night-mode .ca-jump a,
body.night-mode .ca-jump a:link,
body.night-mode .ca-jump a:visited {
  background: #233444;
  border-color: #36506a;
  color: #cfe1f1 !important;
}
body.night-mode .ca-event,
body.night-mode .ca-stream,
body.night-mode a.ca-stream:link,
body.night-mode a.ca-stream:visited,
body.night-mode .ca-tabs {
  background: #233444;
  border-color: #36506a;
}
body.night-mode .ca-stream:hover {
  border-color: #7fa8d4;
}
body.night-mode .ca-mods span,
body.night-mode .ca-inf > div {
  background: #1d2a38;
  border-color: #2e4254;
  color: #e6eef7;
}
body.night-mode .ca-mods small,
body.night-mode .ca-inf small {
  color: #8796a6;
}
body.night-mode .ca-inf i {
  color: #8fa6c8;
}
body.night-mode .ca-inf b,
body.night-mode .ca-stream-meta b {
  color: #e6eef7;
}
body.night-mode .ca-stream-meta > span {
  color: #a9b6c6;
}
body.night-mode .ca-tabs a,
body.night-mode .ca-tabs a:link,
body.night-mode .ca-tabs a:visited {
  color: #a9b6c6 !important;
}
body.night-mode .ca-tabs a.is-on {
  background: #1d2a38;
  color: #e6eef7 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ---- pós-cadastro: baixar o jogo (account/ac, caDownloadHtml) ---- */
.ca-dl {
  margin-bottom: 18px;
}
/* o p global do site tem padding de 10px e entrelinha = tamanho da fonte */
.ca-dl p {
  padding: 0;
  line-height: 1.45;
}
.ca-step.done::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 9px;
  background: #6470a8;
}
.ca-step.current {
  color: #243478;
  font-weight: 800;
}
.ca-step.current::before {
  box-shadow: 0 0 0 3px rgba(36, 52, 120, 0.2);
}
.ca-dl-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0 14px;
}
.ca-dl-account {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 8px;
  font-size: 13px;
  color: #4f4f4f;
  text-align: center;
}
.ca-dl-chip {
  padding: 2px 11px;
  border-radius: 999px;
  background: #eef1fb;
  border: 1px solid #d8def3;
  color: #243478;
  font-weight: 800;
  word-break: break-all;
}
a.ca-dl-go,
a.ca-dl-go:link,
a.ca-dl-go:visited {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 430px;
  min-height: 60px;
  padding: 9px 22px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2e429a 0%, #243478 100%);
  box-shadow: 0 4px 12px rgba(36, 52, 120, 0.28);
  color: #fff !important;
  text-decoration: none !important;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
a.ca-dl-go:hover {
  background: linear-gradient(180deg, #3a51b8 0%, #2b3d8d 100%);
  box-shadow: 0 6px 16px rgba(36, 52, 120, 0.34);
  transform: translateY(-1px);
}
.ca-dl-go > i {
  flex: none;
  font-size: 20px;
}
.ca-dl-go > .ca-dl-go-os {
  margin-left: auto;
  opacity: 0.9;
}
.ca-dl-go-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  text-align: left;
}
.ca-dl-go-text b {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ca-dl-go-text small {
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.85;
}
.ca-dl-other,
.ca-dl-ios {
  margin: 0;
  font-size: 12.5px;
  color: #6b6b6b;
  text-align: center;
}
.ca-dl-ios {
  max-width: 460px;
  font-size: 13px;
  color: #4f4f4f;
}
.ca-dl a:not(.ca-dl-go) {
  color: #243478;
  font-weight: 700;
}
.ca-dl-howto {
  padding: 10px 0 9px;
  border-top: 1px solid #e9edf7;
  font-size: 13px;
  font-weight: 700;
  color: #243478;
}
.ca-dl-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cadl;
}
.ca-dl-steps li {
  counter-increment: cadl;
  margin: 0;
  padding: 11px 12px;
  background: #f6f7fb;
  border: 1px solid #e9edf7;
  border-radius: 10px;
  text-align: left;
}
.ca-dl-steps b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 800;
  color: #243478;
}
.ca-dl-steps b::before {
  content: counter(cadl);
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #243478;
  color: #fff;
  font-size: 10px;
}
.ca-dl-steps span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #4f4f4f;
}
.ca-dl-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #6b6b6b;
}
.ca-dl-help {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: #5b5b5b;
  text-align: center;
}
@media (max-width: 720px) {
  .ca-dl-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  a.ca-dl-go,
  a.ca-dl-go:link,
  a.ca-dl-go:visited {
    padding: 9px 16px;
  }
}
body.night-mode .ca-step.done::before {
  background: #36506a;
}
body.night-mode .ca-step.current {
  color: #e6eef7;
}
body.night-mode .ca-dl-account,
body.night-mode .ca-dl-ios,
body.night-mode .ca-dl-steps span {
  color: #a9b6c6;
}
body.night-mode .ca-dl-chip {
  background: #233444;
  border-color: #36506a;
  color: #cfe1f1;
}
body.night-mode a.ca-dl-go,
body.night-mode a.ca-dl-go:link,
body.night-mode a.ca-dl-go:visited {
  background: linear-gradient(180deg, #3d5a80 0%, #2c4156 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
body.night-mode .ca-dl-other,
body.night-mode .ca-dl-note,
body.night-mode .ca-dl-help {
  color: #8ea3b6;
}
body.night-mode .ca-dl a:not(.ca-dl-go) {
  color: #9db7e0;
}
body.night-mode .ca-dl-howto {
  color: #cfe1f1;
  border-top-color: #2e4254;
}
body.night-mode .ca-dl-steps li {
  background: #233444;
  border-color: #2e4254;
}
body.night-mode .ca-dl-steps b {
  color: #cfe1f1;
}
body.night-mode .ca-dl-steps b::before {
  background: #36506a;
  color: #e6eef7;
}

/* ---- página de download: aviso de criar conta (pages/download.php) ----
   Aparece logo abaixo do botão clicado, só para quem não está logado. No
   computador o ícone fica numa coluna à esquerda; no celular ele sobe para o
   lado do título e os botões ocupam a largura toda. */
.ca.ca-dl-notice {
  max-width: 560px;
  margin: 14px auto 8px;
  text-align: left;
}
.ca-dl-notice-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 8px;
  padding: 16px 18px 18px;
  background: #fff;
  border: 1px solid #e2e6f2;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(36, 52, 120, 0.1);
}
.ca-dl-notice-ico {
  grid-column: 1;
  grid-row: 1 / 5;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 18px;
}
.ca-dl-notice .ca-steps {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  justify-content: flex-start;
}
.ca-dl-notice h2 {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: #243478;
  text-transform: none;
}
/* o p global do site tem padding de 10px e entrelinha = tamanho da fonte */
.ca-dl-notice p {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4f4f4f;
}
.ca-dl-notice-actions {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.ca-dl-notice-actions .ca-btn,
.ca-dl-notice-actions a.ca-btn {
  height: 44px;
}
.ca-dl-notice-actions button.ca-btn {
  min-width: 0;
  font-family: inherit;
  cursor: pointer;
}
@media (max-width: 720px) {
  .ca-dl-notice-card {
    column-gap: 12px;
    row-gap: 10px;
    padding: 14px 14px 16px;
  }
  .ca-dl-notice-ico {
    grid-row: 1;
    align-self: center;
    width: 40px;
    height: 40px;
  }
  .ca-dl-notice h2 {
    grid-row: 1;
    align-self: center;
    font-size: 17px;
  }
  .ca-dl-notice .ca-steps {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .ca-dl-notice p {
    grid-column: 1 / -1;
  }
  .ca-dl-notice-actions {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .ca-dl-notice-actions .ca-btn,
  .ca-dl-notice-actions a.ca-btn {
    width: 100%;
    min-width: 0;
  }
}
body.night-mode .ca-dl-notice-card {
  background: #1d2a38;
  border-color: #2e4254;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
body.night-mode .ca-dl-notice-ico {
  background: #1f3a2a;
  color: #81c784;
}
body.night-mode .ca-dl-notice h2 {
  color: #e6eef7;
}
body.night-mode .ca-dl-notice p {
  color: #cfe1f1;
}

/* ============================================================================
   otPokémon News (pages/index.php) — posts do Instagram em cards com imagem e
   texto alternando de lado (zigue-zague). O markup é remontado no index.php a
   partir do cache lastnews_news_*; segue a paleta dos cards .hs-* e o
   night-mode do site.
   ============================================================================ */
.fbn-header{display:flex;align-items:center;gap:11px;margin:2px 0 12px;padding:10px 14px;background:linear-gradient(90deg,#eef1fb,#fff);border:1px solid #d8def3;border-radius:10px;}
.fbn-header__ico{flex:none;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:#243478;color:#fff;border-radius:9px;font-size:21px;}
.fbn-header__txt{display:flex;flex-direction:column;min-width:0;}
.fbn-header__title{font-size:16px;font-weight:800;color:#16204e;line-height:1.25;}
.fbn-header__sub{font-size:11px;font-weight:600;color:#6b6450;}
.fbn-list{display:flex;flex-direction:column;gap:10px;}
.fbn-card{display:flex;align-items:stretch;background:#fff;border:1px solid #e9e2d0;border-radius:10px;overflow:hidden;}
.fbn-card:nth-child(even){flex-direction:row-reverse;}
.fbn-media{flex:none;position:relative;width:230px;min-height:265px;background:#eef1f4;display:block;}
.fbn-media .imgPostFacebook{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;object-fit:cover;display:block;}
.fbn-body{flex:1;min-width:0;padding:12px 16px 13px;display:flex;flex-direction:column;gap:8px;}
.fbn-head{display:flex;align-items:center;gap:9px;}
.fbn-fb{flex:none;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:#eef1fb;border:1px solid #d8def3;border-radius:8px;color:#243478;font-size:15px;}
.fbn-when{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.fbn-date{font-size:14px;font-weight:800;color:#16204e;}
.fbn-ago{font-size:12px;font-weight:600;color:#8a8470;}
/* Título do post — primeira linha da publicação, promovida a manchete do
   card (o PHP tira o "- " da frente). Fio creme embaixo separa do corpo. */
.fbn-title{margin:0;padding:0 0 8px;font-size:17px;font-weight:800;line-height:1.32;letter-spacing:-.15px;color:#16204e;text-transform:none;word-break:break-word;border-bottom:1px solid #efeadd;}
.fbn-title a{color:inherit;}
.fbn-text{font-size:15px;font-weight:500;line-height:1.4;color:#3a3525;word-break:break-word;}
.fbn-text .fbn-br{display:block;height:9px;}
.fbn-text a{color:#243478;font-weight:700;}
.fbn-text--clamp{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;}
/* Fade sobre a última linha, só quando o texto está de fato cortado. */
.fbn-text--overflow.fbn-text--clamp{position:relative;}
.fbn-text--overflow.fbn-text--clamp::after{content:'';position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none;}
/* Botão Expandir/Recolher — neutro e discreto, na paleta creme do site. */
.fbn-more{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:1px;padding:4px 11px;font-family:inherit;font-size:12px;font-weight:600;line-height:1;color:#8a8470;background:#faf8f2;border:1px solid #efeadd;border-radius:999px;cursor:pointer;user-select:none;transition:background .15s,color .15s,border-color .15s;}
.fbn-more i{font-size:9px;color:#b3ab93;transition:color .15s;}
.fbn-more:hover{background:#f3f0e4;border-color:#e5ddc6;color:#3a3525;}
.fbn-more:hover i{color:#8a8470;}
.fbn-media--video{cursor:pointer;}
.fbn-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,16,38,.28);transition:background .15s;}
.fbn-media--video:hover .fbn-play{background:rgba(10,16,38,.42);}
.fbn-play__btn{width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;background:rgba(17,24,54,.78);border:2px solid rgba(255,255,255,.9);border-radius:50%;color:#fff;font-size:19px;padding-left:4px;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .15s;}
.fbn-media--video:hover .fbn-play__btn{transform:scale(1.08);}
/* Carrossel: faixa com scroll-snap (um slide por vez), setas e contador "1/8" por cima. */
.fbn-slides{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;}
.fbn-slides::-webkit-scrollbar{display:none;}
.fbn-slides .imgPostFacebook{position:relative;inset:auto;flex:0 0 100%;scroll-snap-align:start;}
.fbn-nav{position:absolute;top:50%;z-index:1;width:30px;height:30px;margin-top:-15px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:12px;color:#fff;background:rgba(17,24,54,.62);border:1.5px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer;transition:opacity .15s,background .15s;}
.fbn-nav:hover{background:rgba(17,24,54,.85);}
.fbn-nav--prev{left:8px;}
.fbn-nav--next{right:8px;}
.fbn-nav--off{opacity:0;pointer-events:none;}
.fbn-count{position:absolute;top:8px;right:8px;z-index:1;padding:3px 8px;font-size:11px;font-weight:700;line-height:1.2;color:#fff;background:rgba(17,24,54,.7);border-radius:999px;pointer-events:none;}
.fbn-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(8,12,28,.82);}
.fbn-modal__box{position:relative;display:flex;align-items:stretch;max-width:96vw;box-shadow:0 14px 44px rgba(0,0,0,.55);border-radius:10px;}
.fbn-modal__player{position:relative;flex:none;aspect-ratio:9/16;height:min(80vh,660px);max-width:96vw;background:#000;border-radius:10px;overflow:hidden;}
.fbn-modal__box--with-panel .fbn-modal__player{border-radius:10px 0 0 10px;}
.fbn-modal__panel{width:340px;max-width:44vw;min-width:0;display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:#fff;border:1px solid #e9e2d0;border-left:0;border-radius:0 10px 10px 0;overflow:hidden;}
.fbn-modal__head{flex:none;}
.fbn-modal__title{flex:none;}
.fbn-modal__text{overflow-y:auto;padding-right:4px;}
body.night-mode .fbn-modal__panel{background:#1d2a38;border-color:#2e4254;}
.fbn-modal__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.fbn-modal__player video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;object-fit:contain;}
.fbn-modal__close{position:absolute;top:-15px;right:-15px;z-index:1;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:#111836;border:2px solid rgba(255,255,255,.9);border-radius:50%;color:#fff;font-size:19px;line-height:1;cursor:pointer;user-select:none;box-shadow:0 2px 10px rgba(0,0,0,.4);transition:transform .15s;}
.fbn-modal__close:hover{transform:scale(1.1);}
body.fbn-modal-open{overflow:hidden;}
body.night-mode .fbn-header{background:linear-gradient(90deg,#233444,#1d2a38);border-color:#36506a;}
body.night-mode .fbn-header__title{color:#eaf0f6;}
body.night-mode .fbn-header__sub{color:#8ea3b6;}
body.night-mode .fbn-card{background:#1d2a38;border-color:#2e4254;}
body.night-mode .fbn-media{background:#18242f;}
body.night-mode .fbn-fb{background:#233444;border-color:#36506a;color:#8fa6c8;}
body.night-mode .fbn-date{color:#eaf0f6;}
body.night-mode .fbn-ago{color:#8ea3b6;}
body.night-mode .fbn-title{color:#eaf0f6;border-bottom-color:#2a3b4d;}
body.night-mode .fbn-text{color:#c3d2dd;}
body.night-mode .fbn-text a{color:#9ecbff;}
body.night-mode .fbn-text--overflow.fbn-text--clamp::after{background:linear-gradient(180deg,rgba(29,42,56,0),#1d2a38);}
body.night-mode .fbn-more{color:#8ea3b6;background:#1d2a38;border-color:#2a3b4d;}
body.night-mode .fbn-more i{color:#5e7184;}
body.night-mode .fbn-more:hover{background:#233444;border-color:#33475c;color:#c3d2dd;}
body.night-mode .fbn-more:hover i{color:#8ea3b6;}

/* ============================================================================
   Menu lateral (.menu_nav) — skin moderna, MESMA estrutura/ordem dos blocos.
   Headers (.menu_button) mantêm o gradiente do site com tipografia do .pTitle
   moderno; as caixas viram cards (borda + cantos), links em linha com hover,
   rankings em linhas zebradas (.mn-rank-row, markup no index.php) e busca
   alinhada por flex. Night-mode alinhado à paleta #15202b dos cards .hs-*.
   ============================================================================ */
.menu_button{display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;width:184px;height:auto;padding:9px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;font-weight:800;border-radius:10px 10px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);}
.menu_button .icon_menu_title{float:none;margin:0;flex:none;display:inline-flex;align-items:center;}
.menu_button .icon_menu_title img{height:28px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));}
.nav_links,.nav_links_logged,.nav_links_highscores,.nav_links_search{box-sizing:border-box;width:184px;background:#fff;border:1px solid #e7e2d3;border-top:0;border-bottom:3px solid #243478;border-radius:0 0 10px 10px;box-shadow:0 1px 2px rgba(40,40,60,.06);padding:8px;margin-top:-1px;margin-bottom:12px;}
.nav_links_logged{margin-bottom:12px;}
.menu-lang-nav{margin:2px 0 8px;}
/* Links em linha (hover em pílula) — os <br> saíram do markup.
   Cada grupo colore o hover com a sua cor (pílula tintada + texto). */
.nav_links_green > a,.nav_links_blue > a,.nav_links_red > a,.nav_links_purple > a,.nav_links_yellow > a{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:7px;font-size:14px;font-weight:600;line-height:1.35;transition:background .15s ease,color .15s ease;}
.nav_links_green > a:hover,.nav_links_blue > a:hover,.nav_links_red > a:hover,.nav_links_purple > a:hover,.nav_links_yellow > a:hover{text-decoration:none;}
.nav_links_blue > a:hover{background:#e8f1fb;color:#1565c0;}
.nav_links_red > a:hover{background:#fdecea;color:#c62828;}
.nav_links_purple > a:hover{background:#f5e9f7;color:#7b1fa2;}
.nav_links_green > a:hover{background:#eaf6eb;color:#2e7d32;}
.nav_links_yellow > a:hover{background:#fdf6e3;color:#b28704;}
.nav_link_icon{flex:none;width:12px;height:12px;object-fit:contain;padding-right:0;}
/* Link que sai do site (wiki, fórum…) abre em nova aba: ícone de "externo" na
   ponta direita, na cor do link (pega o hover do grupo). Vale para qualquer
   target="_blank" do menu, então link novo já ganha o ícone. */
.menu_nav a[target="_blank"]::after{content:"\f08e";content:"\f08e" / "";font:var(--fa-font-solid);flex:none;margin-left:auto;font-size:10px;opacity:.55;transition:opacity .15s ease;}
.menu_nav a[target="_blank"]:hover::after{opacity:1;}
/* Separadores entre os grupos coloridos da Comunidade e antes do Deslogar. */
.nav_links_red.menu,.nav_links_purple.menu,.nav_links_yellow.menu{margin-top:7px;padding-top:7px;border-top:1px solid #efeadd;}
a.mn-sep{margin-top:7px;position:relative;}
a.mn-sep::before{content:'';position:absolute;top:-4px;left:6px;right:6px;border-top:1px solid #efeadd;}
/* Busca de jogador */
.nav_links_search form{margin:0;}
/* Campo com sugestões (.cs-*, sidebar e /characters; JS no index.php). A lista é
   um card branco preso ao .cs-field; na sidebar ela passa da largura do menu
   (184px) e cresce para a esquerda, por cima do conteúdo, para o nome caber. */
.cs-field{position:relative;}
input.cs-input{display:block;width:100%;box-sizing:border-box;height:40px;margin:0;padding:0 38px 0 11px;font-family:inherit;font-size:15px;font-weight:600;text-align:left;color:#243478;background:#fff;border:2px solid #243478;border-radius:10px;outline:none;box-shadow:none;transition:box-shadow .15s ease;}
input.cs-input::placeholder{color:#8a8470;font-weight:400;opacity:1;}
input.cs-input:focus{box-shadow:0 0 0 3px rgba(36,52,120,.18);}
.cs-submit{position:absolute;top:4px;right:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:8px;background:transparent;color:#243478;font-family:inherit;font-size:15px;cursor:pointer;transition:background .15s ease;}
.cs-submit:hover{background:#eef1fa;}
.cs-list{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;box-sizing:border-box;max-height:min(440px,70vh);overflow-y:auto;padding:5px;background:#fff;border:1px solid #e7e2d3;border-radius:12px;box-shadow:0 12px 32px rgba(20,28,60,.22),0 2px 6px rgba(20,28,60,.08);text-align:left;}
.cs-list[hidden]{display:none;}
.nav_links_search .cs-list{left:auto;right:-9px;width:288px;}
.cs-opt{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border-radius:9px;text-decoration:none;}
.cs-opt:hover{text-decoration:none;}
.cs-opt.is-active{background:#eef1fa;}
.cs-avatar{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;background:#f3f0e6;color:#b8b19a;font-size:16px;}
.cs-avatar img{display:block;max-width:40px;max-height:40px;image-rendering:pixelated;}
.cs-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.25;}
.cs-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;color:#243478;}
.cs-name strong{font-weight:800;}
.cs-meta{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#6b6450;}
.cs-srv{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;}
.cs-dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.cs-empty{padding:10px 12px;font-size:12px;font-weight:600;color:#6b6450;}
.cs--page .cs-field{max-width:420px;}
/* Rankings em linhas zebradas */
.nav_links_highscores{padding:6px;font-size:11px;color:#6b6450;}
.mn-rank-row{display:flex;flex-direction:column;gap:1px;padding:5px 8px;border-radius:7px;}
.mn-rank-row:nth-child(even){background:#faf8f2;}
.mn-rank-srv{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#8a8470;}
.mn-rank-srv .fa-star{font-size:9px;vertical-align:1px;color:#c9c2a8;}
.mn-rank-top{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;font-weight:700;}
.mn-rank-top .fa-trophy{flex:none;font-size:12px;color:#e6b800;}
.mn-rank-top a{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#243478;text-decoration:none;}
.mn-rank-top a:hover{text-decoration:underline;}
.mn-rank-none{font-size:12px;font-weight:600;color:#6b6450;}
/* Cores dos servidores escurecidas para dar contraste no fundo branco
   (Silver/Gold no tom original ficavam ilegíveis); o night-mode clareia. */
.mn-srv--blue{color:#1769c2;}
.mn-srv--green{color:#2e7d32;}
.mn-srv--red{color:#c62828;}
.mn-srv--black{color:#4e6470;}
.mn-srv--purple{color:#8e24aa;}
.mn-srv--silver{color:#66707c;}
.mn-srv--gold{color:#8a6800;}
.mn-srv--ruby{color:#b71c1c;}
/* Card único de rankings (.mn-rk-*, markup + JS no index.php): abas de ícone,
   barra que enche até a próxima troca (pausa no hover) e azul cheio quando
   o ranking está fixado. */
.mn-rk-head__title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-rk-toggle{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-family:inherit;font-size:9px;line-height:1;cursor:pointer;transition:background .15s ease;}
.mn-rk-toggle:hover{background:rgba(255,255,255,.3);}
.mn-rk-toggle .fa-play{margin-left:1px;}
.mn-rk{display:flex;flex-direction:column;gap:6px;}
.mn-rk-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;}
.mn-rk-tab{height:34px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:7px;background:transparent;font-family:inherit;cursor:pointer;transition:background .15s ease;}
.mn-rk-tab img{height:22px;width:auto;display:block;opacity:.5;filter:grayscale(.4);transition:opacity .15s ease,filter .15s ease;}
.mn-rk-tab:hover img,.mn-rk-tab.is-active img{opacity:1;filter:none;}
.mn-rk-tab.is-active{background:#eef1fa;box-shadow:inset 0 0 0 1.5px #243478;}
.mn-rk-tab:focus-visible,.mn-rk-toggle:focus-visible{outline:2px solid #009688;outline-offset:1px;}
.mn-rk-progress{height:3px;border-radius:3px;background:#efeadd;overflow:hidden;}
.mn-rk-progress__bar{display:block;height:100%;border-radius:3px;background:#009688;transform:scaleX(0);transform-origin:left center;}
.mn-rk--run .mn-rk-progress__bar{animation:mn-rk-fill 6s linear forwards;}
.mn-rk:hover .mn-rk-progress__bar,.mn-rk-head:hover + .mn-rk .mn-rk-progress__bar{animation-play-state:paused;}
.mn-rk--pinned .mn-rk-progress__bar{transform:none;background:#243478;}
@keyframes mn-rk-fill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.mn-rk-sub{padding:0 8px;font-size:10px;font-weight:700;line-height:1.3;color:#6b6450;}
.mn-rk-panel[hidden]{display:none;}
a.mn-rk-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px;border-radius:7px;background:#faf8f2;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#243478;text-decoration:none;}
a.mn-rk-more:hover{text-decoration:underline;}
/* Night-mode: body.night-mode .menu já dá o fundo (#15202b) das caixas; aqui só
   bordas, hovers e as linhas dos rankings. */
body.night-mode .nav_links,body.night-mode .nav_links_logged,body.night-mode .nav_links_highscores,body.night-mode .nav_links_search{border-color:#2e4254;border-bottom-color:#36506a;box-shadow:none;}
body.night-mode .nav_links_green > a:hover,body.night-mode .nav_links_blue > a:hover,body.night-mode .nav_links_red > a:hover,body.night-mode .nav_links_purple > a:hover,body.night-mode .nav_links_yellow > a:hover{background:#26384a;}
body.night-mode .nav_links_red.menu,body.night-mode .nav_links_purple.menu,body.night-mode .nav_links_yellow.menu{border-top-color:#2a3b4d;}
body.night-mode a.mn-sep::before{border-top-color:#2a3b4d;}
body.night-mode .mn-rank-row:nth-child(even){background:#1d2a38;}
body.night-mode .mn-rank-srv{color:#8ea3b6;}
body.night-mode .mn-srv--blue{color:#64b5f6;}
body.night-mode .mn-srv--green{color:#81c784;}
body.night-mode .mn-srv--red{color:#ef7a70;}
body.night-mode .mn-srv--black{color:#a3b6c0;}
body.night-mode .mn-srv--purple{color:#d08fdc;}
body.night-mode .mn-srv--silver{color:#c3cad3;}
body.night-mode .mn-srv--gold{color:#e6b800;}
body.night-mode .mn-srv--ruby{color:#f28b82;}
body.night-mode .mn-rank-srv .fa-star{color:#6b7d8f;}
body.night-mode .mn-rank-top a{color:#9ecbff!important;}
body.night-mode .mn-rank-none,body.night-mode .mn-rk-sub{color:#8ea3b6;}
body.night-mode .mn-rk-tab.is-active{background:#22364a;box-shadow:inset 0 0 0 1.5px #9ecbff;}
body.night-mode .mn-rk-progress{background:#2a3b4d;}
body.night-mode .mn-rk--pinned .mn-rk-progress__bar{background:#9ecbff;}
body.night-mode a.mn-rk-more{background:#1d2a38;color:#9ecbff!important;}
body.night-mode input.cs-input{background:#0f1922;border-color:#36506a;color:#cfe1f1;}
body.night-mode input.cs-input::placeholder{color:#7f93a6;}
body.night-mode input.cs-input:focus{box-shadow:0 0 0 3px rgba(158,203,255,.2);}
body.night-mode .cs-submit{color:#9ecbff;}
body.night-mode .cs-submit:hover{background:#22364a;}
body.night-mode .cs-list{background:#15202b;border-color:#2e4254;box-shadow:0 12px 32px rgba(0,0,0,.5);}
body.night-mode .cs-opt.is-active{background:#22364a;}
body.night-mode .cs-avatar{background:#33475b;color:#6c8297;}
body.night-mode .cs-name{color:#e6eef7;}
body.night-mode .cs-meta,body.night-mode .cs-empty{color:#8ea3b6;}

/* ===================================================================
   VISUALIZADOR DE CASA (.hv-*)
   -------------------------------------------------------------------
   Bloco "ver a casa por dentro", usado no modal da lista de casas e na
   página própria /house/<id>. O markup vem de app/houseviewer.php.
   Vive dentro do .message > .content nativo e reaproveita fieldset/
   legend e .hs-list/.hs-row do site. As imagens são geradas pelo
   otPokemon-PhotoMap (uma por andar, casa isolada do cenário).
   =================================================================== */
.hv-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.hv-title {
  font-size: 15px;
  font-weight: 800;
  color: #16204e;
}

.hv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hv-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid #e9e2d0;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  color: #4a5568;
}

.hv-tag i {
  color: #243478;
}

/* --- Abas de andar --- */
.hv-floors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.hv-floor {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border: 1px solid #e9e2d0;
  border-radius: 999px;
  background: #fff;
  color: #4a5568;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.hv-floor:hover {
  border-color: #243478;
  color: #243478;
}

.hv-floor.is-active {
  background: #243478;
  border-color: #243478;
  color: #fff;
}

.hv-floor i {
  opacity: .85;
}

/* --- Palco da imagem --- */
.hv-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid #e9e2d0;
  border-radius: 10px;
  background: #f6f3ea;
  cursor: zoom-in;
}

.hv-stage .hv-img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Tamanho real: a casa não cabe mais na coluna, então o palco rola. */
.hv-stage.hv-zoom {
  display: block;
  overflow: auto;
  cursor: zoom-out;
}

.hv-stage.hv-zoom .hv-img {
  max-width: none;
  image-rendering: pixelated;
}

/* Setas de troca de andar, sobre as bordas do palco. Ficam discretas até o
   ponteiro chegar perto, para não brigar com a imagem da casa. */
.hv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid #e9e2d0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  color: #243478;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s ease, background .15s ease;
}

.hv-stage:hover .hv-nav {
  opacity: 1;
}

.hv-nav:hover {
  background: #fff;
}

.hv-nav:disabled {
  opacity: .18;
  cursor: default;
}

.hv-nav-prev {
  left: 10px;
}

.hv-nav-next {
  right: 10px;
}

/* Em tamanho real o palco rola, e uma seta absoluta ficaria presa num canto
   qualquer da imagem — as abas continuam disponíveis. */
.hv-stage.hv-zoom .hv-nav {
  display: none;
}

body.night-mode .hv-nav {
  background: rgba(29, 42, 56, .85);
  border-color: #2e4254;
  color: #9fc2e8;
}

body.night-mode .hv-nav:hover {
  background: #1d2a38;
}

/* O minimapa é 161x161 (1px por tile), então precisa ser ampliado para ser
   legível — daí o pixelated. Ele manda no bloco: é a imagem que responde "onde
   fica"; o mapa da rua ao lado é só o reconhecimento da porta. */
.hv-locate img {
  display: block;
  max-width: 100%;
  border: 1px solid #e9e2d0;
  border-radius: 8px;
  background: #f6f3ea;
  image-rendering: pixelated;
}

.hv-locate .hv-minimap img {
  width: 322px;
  height: 322px;
}

.hv-locate .hv-street img {
  width: 322px;
  height: auto;
}

@media (max-width: 720px) {
  .hv-locate .hv-minimap img,
  .hv-locate .hv-street img {
    width: 100%;
    height: auto;
  }
}

.hv-locate figcaption {
  margin-top: 4px;
  font-size: 11px;
  color: #8a8577;
}

/* --- Situação por mundo --- */
.hv-world-row .hs-name i {
  font-size: 9px;
  vertical-align: middle;
}

.hv-free {
  color: #2f9e44;
  font-weight: 700;
}

.hv-back {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
}

/* --- Night mode --- */
body.night-mode .hv-title {
  color: #eaf0f6;
}

body.night-mode .hv-tag,
body.night-mode .hv-floor {
  background: #1d2a38;
  border-color: #2e4254;
  color: #b9c9d8;
}

body.night-mode .hv-tag i {
  color: #9fc2e8;
}

body.night-mode .hv-floor:hover {
  border-color: #9fc2e8;
  color: #9fc2e8;
}

body.night-mode .hv-floor.is-active {
  background: #243478;
  border-color: #3a56b0;
  color: #fff;
}

body.night-mode .hv-stage,
body.night-mode .hv-locate img {
  background: #16202b;
  border-color: #2e4254;
}

body.night-mode .hv-locate figcaption {
  color: #8ea3b6;
}

/* ============================================================================
   RESPONSIVO MOBILE — camada única (breakpoint principal: 940px)
   ============================================================================
   O desktop usa o shell fixo de 950px (.mainbody); abaixo de 941px o layout
   vira fluido, em coluna única, com:
     • topbar fixa (.m-topbar, markup no index.php) com marca + lâmpada + menu;
     • o .menu_nav vira um drawer lateral direito controlado por
       body.m-menu-open (transform, backdrop .m-drawer-backdrop);
     • conteúdo (.newscont), navbar, eventbar e footer em 100% da largura.
   O viewport é width=device-width (index.php) — estas media queries são a
   única fonte de verdade do mobile. Sub-breakpoints: 720px (conteúdo em
   pilha) e 480px (telefones estreitos).
   ============================================================================ */

/* Topbar/drawer: peças exclusivas do mobile ficam ocultas no desktop. */
.m-topbar,
.m-drawer-backdrop,
.m-drawer-head,
.m-drawer-social {
  display: none;
}

@media screen and (max-width: 940px) {
  /* ---- base -------------------------------------------------------------- */
  /* O clip horizontal precisa estar TAMBÉM no html: só no body, os browsers
     móveis ainda deixam a viewport "andar" de lado quando um absoluto estica
     a área de scroll. AQUI SÓ VALE overflow-x: clip — clip é apenas de
     pintura. `overflow-x: hidden` no elemento raiz transforma a página num
     contêiner de rolagem e QUEBRA position: fixed no iOS Safari depois de
     rolar (topbar/drawer somem — o backdrop escurece e o menu não aparece). */
  html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
  }
  body {
    overflow-x: hidden;
    overflow-x: clip;
    /* espaço para a topbar fixa (fallback simples p/ browsers sem env()) */
    padding-top: 56px;
    padding-top: calc(56px + env(safe-area-inset-top));
  }
  .mainbody {
    width: auto;
    padding: 0 10px 10px;
    padding: 0 10px calc(10px + env(safe-area-inset-bottom));
  }
  /* Barra de progresso do pjax por cima da topbar. */
  .divProgressBar {
    top: 0;
    left: 0;
    z-index: 10020;
  }
  #informer {
    width: auto;
    margin: 6px 10px;
  }
  /* O banner injeta os próprios estilos depois deste arquivo — o id ganha a
     disputa e o banner entra no fluxo em vez de cobrir a topbar fixa (e o
     z-index baixa para não fatiar o drawer aberto). */
  #langSuggest,
  .lang-suggest {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 1;
  }

  /* ---- topbar ------------------------------------------------------------ */
  .m-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    box-sizing: border-box;
    height: 56px;
    height: calc(56px + env(safe-area-inset-top));
    padding: 0 10px 0 14px;
    padding: env(safe-area-inset-top) 10px 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #243478;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 12px rgba(0, 0, 0, 0.35);
  }
  .m-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #fff !important;
    text-decoration: none !important;
  }
  .m-topbar__brand img {
    flex: none;
    display: block;
  }
  .m-topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .m-topbar__btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    color: #fff;
    font-size: 17px;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-topbar__btn:active {
    background: rgba(255, 255, 255, 0.16);
  }
  .m-night-toggle i {
    color: #fce501;
  }
  body.night-mode .m-topbar {
    background: #0d1620;
  }
  body.night-mode .m-night-toggle i {
    color: #8ea3b6;
  }

  /* ---- peças do desktop que saem no mobile ------------------------------- */
  .navbuttons,
  .switch-night-mode,
  .navbarDivisor,
  .menuNavbar > i {
    display: none !important;
  }
  /* Marca da topbar: fica só a pokébola — o lugar do wordmark é do seletor
     de região (regras mais abaixo). */
  .m-topbar__brand span {
    display: none;
  }

  /* ---- topo: logo (esquerda) + Poke of the Day (direita) ------------------ */
  .mainbody {
    position: relative;
  }
  /* .mainbody .header: o <style> do <head> (index.php) redefine .header depois
     deste arquivo — a especificidade maior garante a arte reduzida e alinhada
     à esquerda (sheet de 250px escalado para 210px; a arte vive em y77-148). */
  .mainbody .header {
    height: 56px;
    background-size: 170px;
    background-position: 8px -46px;
  }
  /* Poke of the Day: coluna compacta à direita — a plaquinha "Poke of the
     day" em cima e o sprite do dia logo abaixo (background do .dex). O <a>
     (wiki) cobre o quadro todo como área de toque. */
  .dex {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 88px;
    height: 88px;
    margin: 0;
    background-size: 54px;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
  .dex a {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  /* A plaquinha (180x45) tem height/margin inline no index.php — daí o !important. */
  .dex a img {
    display: block;
    width: 88px;
    height: auto !important;
    margin: 0 !important;
  }
  /* Atividades alinhadas à esquerda, sob o logo — a faixa da direita fica
     livre para a coluna do Poke of the Day. */
  .div-happening {
    position: static;
    margin: 2px 106px 0 12px;
    text-align: left;
    font-size: 12.5px;
  }
  .happening {
    padding-left: 0;
    height: 19px;
    max-height: 19px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #happening3,
  #happening4,
  #happening5 {
    display: none;
  }

  /* ---- navbar principal (Principal / Conta / Baixar) --------------------- */
  .navbar {
    width: auto;
    height: auto;
    margin-top: 8px;
    padding: 9px 10px;
    border-radius: 12px;
    background-image: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  }
  /* Sem os olhos do Pikachu — a imagem de fundo sai no mobile. */
  .navbar::before,
  .navbar::after {
    content: none;
  }
  .menuNavbar {
    position: static;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px 4px;
    font-size: 15px;
  }
  .menuNavbar > a > .menu1,
  .menuNavbar > a > .menu2,
  .menuNavbar > a > .menu3 {
    border-top: none;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    line-height: 1.3;
  }
  .menuNavbar > a > .menu1:hover,
  .menuNavbar > a > .menu2:hover,
  .menuNavbar > a > .menu3:hover {
    border-top: none;
    background: rgba(255, 255, 255, 0.16);
  }
  .navNextEvent {
    position: static;
    margin: 5px 0 0;
    text-align: center;
    font-size: 12px;
  }

  /* ---- seletor de região (dentro da topbar) ------------------------------- */
  /* Os estilos originais do seletor vivem num <style> inline no body — os
     seletores compostos (.region-anchor …) ganham a disputa de especificidade.
     O chip vira fixed e ocupa o lugar do wordmark na topbar (depois da
     pokébola); o dropdown abre logo abaixo dele. O z-index do anchor precisa
     superar o da topbar (10000): o inline z-index:9999 criaria um contexto de
     empilhamento que deixaria o chip escondido atrás dela. */
  .region-anchor {
    z-index: 10001 !important;
  }
  .region-anchor .region-selector {
    position: fixed;
    top: 11px;
    top: calc(env(safe-area-inset-top) + 11px);
    left: 54px;
    right: auto !important;
    width: max-content;
    max-width: calc(100vw - 158px);
    display: block;
    margin: 0;
  }
  .region-anchor .region-btn {
    height: 34px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 8px;
    white-space: nowrap;
  }
  .region-anchor .region-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .region-anchor .region-dropdown {
    left: 0;
    right: auto;
    max-width: calc(100vw - 60px);
  }

  /* ---- eventbar (carrossel + clãs dominantes) ---------------------------- */
  .eventbar {
    width: auto;
    margin-top: 10px;
    flex-direction: column;
    gap: 8px;
  }
  .promo {
    width: 100%;
    margin-top: 0;
  }
  .mewtwobar,
  .eventbar .mewtwobar {
    box-sizing: border-box;
    width: 100% !important;
    height: auto;
    min-height: 32px;
    margin-left: 0;
    margin-top: 0;
    padding: 8px 10px;
    text-align: center;
    /* Sem a arte do Mewtwo: na largura do celular ela viraria um borrão claro
       atrás dos emblemas — fica só o roxo sólido da barra. */
    background-image: none !important;
  }

  /* ---- conteúdo ---------------------------------------------------------- */
  .newscont {
    width: auto;
    float: none;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    min-height: 320px;
  }
  .newscont img {
    max-width: 100%;
    height: auto;
  }
  .newscont iframe,
  .newscont video,
  .newscont embed,
  .newscont object {
    max-width: 100%;
  }
  .newscont table {
    max-width: 100%;
  }
  /* Tabelas largas rolam na horizontal em vez de estourar a página. */
  table.pTable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .imgPostFacebook {
    max-width: 100%;
  }
  /* Título de página (Download, perfil do treinador): a altura fixa de 52px
     estoura quando o texto quebra de linha na tela estreita. */
  .characters-cap {
    box-sizing: border-box;
    height: auto;
    min-height: 52px;
    font-size: 1.5em;
  }
  /* Perfil do personagem: no desktop os achievements são um bloco absoluto
     sobre o cabeçalho — na tela estreita os 12 ícones quebravam em 2+ linhas
     por cima do nome. Aqui eles entram no fluxo, numa linha única logo acima
     do nome, e os ícones encolhem o quanto precisar para caber. */
  .achievements {
    gap: 3px;
    max-width: 100%;
  }
  .achievements .achievement {
    flex: 0 1 24px;
    min-width: 0;
  }
  .achievements .achievement img {
    width: 100%;
    height: auto;
  }
  .characters-cap--profile {
    min-height: 92px;
    padding-left: 76px;
  }
  .characters-cap--profile::after {
    left: 76px;
    width: 56px;
  }
  .characters-cap--profile .charactersOutfit {
    left: 0;
    top: 8px;
  }
  /* Cabeçalho do clã (guilds/view): no desktop o .guild-info flutua sobre o
     banner com margens negativas e o .guild-cap tem 105px travados — na tela
     estreita o MOTD cresce e vazava por cima das Informações do Clã. Aqui o
     cabeçalho vira flex (foto + caixa de texto) e cresce com o conteúdo. */
  .guild-cap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 8px;
  }
  .guild-cap .guild-photo {
    flex: none;
    width: 84px;
    height: 84px;
    display: block;
  }
  .guild-cap .guild-info {
    flex: 1;
    min-width: 0;
    margin: 0;
    min-height: 68px;
    box-sizing: border-box;
    word-break: break-word;
  }
  .button-show-more {
    padding-left: 0;
    padding-right: 0;
  }
  /* iOS dá zoom em campos com fonte < 16px — nivela os campos dos formulários. */
  .ca .ca-input input[type="text"],
  .ca .ca-input input[type="password"],
  .ca .ca-input input[type="email"],
  /* 16px: abaixo disso o iOS dá zoom na página ao focar o campo. */
  input.cs-input {
    height: 44px;
    font-size: 16px;
  }
  .cs-submit {
    top: 4px;
    width: 36px;
    height: 36px;
  }
  /* No drawer a lista ocupa a largura do campo. */
  .nav_links_search .cs-list {
    left: 0;
    right: 0;
    width: auto;
  }
  .cs-opt {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* ---- rodapé ------------------------------------------------------------ */
  .footer {
    width: auto;
    display: block;
    box-sizing: border-box;
    margin-top: 12px;
  }
  .copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  /* ---- barra fixa (guilds / shop) ---------------------------------------- */
  .fixedbar {
    float: none;
    box-sizing: border-box;
    width: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
  }

  /* ---- drawer (.menu_nav) ------------------------------------------------ */
  .m-drawer-backdrop {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10005;
    background: rgba(6, 10, 30, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.m-menu-open .m-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  body.m-menu-open {
    overflow: hidden;
  }
  .menu_nav {
    display: block !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 84vw;
    max-width: 332px;
    box-sizing: border-box;
    margin: 0;
    float: none;
    z-index: 10010;
    background: #f6f4ec;
    border-radius: 16px 0 0 16px;
    box-shadow: -14px 0 40px rgba(0, 0, 0, 0.45);
    padding: 10px 14px 16px;
    padding: calc(10px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(110%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.28s;
  }
  body.m-menu-open .menu_nav {
    transform: none;
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.night-mode .menu_nav {
    background: #101922;
  }

  .m-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 2px 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e5ddc6;
  }
  .m-drawer-head__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    color: #16204e;
  }
  .m-drawer-head__title img {
    display: block;
  }
  .m-drawer-close {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border: 1px solid #e0d8c3;
    border-radius: 10px;
    color: #16204e;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.night-mode .m-drawer-head {
    border-bottom-color: #2a3b4d;
  }
  body.night-mode .m-drawer-head__title {
    color: #eaf0f6;
  }
  body.night-mode .m-drawer-close {
    background: #1d2a38;
    border-color: #36506a;
    color: #cfe1f1;
  }

  /* Caixas do menu ocupam a largura do drawer; alvos de toque maiores. */
  .menu_nav .menu_button,
  .menu_nav .nav_links,
  .menu_nav .nav_links_logged,
  .menu_nav .nav_links_highscores,
  .menu_nav .nav_links_search {
    width: 100%;
  }
  .menu_nav .menu_button {
    padding-top: 11px;
    padding-bottom: 11px;
    cursor: pointer;
  }
  .nav_links_green > a,
  .nav_links_blue > a,
  .nav_links_red > a,
  .nav_links_purple > a,
  .nav_links_yellow > a {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .menu_nav .loginbutton {
    width: 100% !important;
    height: 42px;
    box-sizing: border-box;
  }
  /* Card de rankings: o cabeçalho não é clicável e as abas viram alvos de toque. */
  .menu_nav .mn-rk-head {
    cursor: default;
  }
  .mn-rk-toggle {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }
  .mn-rk-tab {
    height: 44px;
  }
  .mn-rk-tab img {
    height: 26px;
  }
  .m-drawer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e5ddc6;
  }
  .m-drawer-social a {
    display: inline-flex;
    -webkit-tap-highlight-color: transparent;
  }
  body.night-mode .m-drawer-social {
    border-top-color: #2a3b4d;
  }
}

/* ---- <= 720px: conteúdo em pilha ------------------------------------------ */
@media screen and (max-width: 720px) {
  /* Barra de título em tela estreita: um conjunto menor de Pokébolas (3, à
     direita) para não ficarem atrás do nome e das conquistas. */
  .characters-cap {
    background-image: url(/images/backgrounds/characters_pokeballs_m.svg), linear-gradient(180deg, #f3f5fb 0%, #fafbfe 100%);
  }
  :where(body.night-mode) .characters-cap {
    background-image: url(/images/backgrounds/characters_pokeballs_m_dark.svg), linear-gradient(180deg, #192432 0%, #1d2a38 100%);
  }
  /* Cards de notícia: imagem em cima, texto embaixo. */
  .fbn-card,
  .fbn-card:nth-child(even) {
    flex-direction: column;
  }
  .fbn-media {
    width: 100%;
    min-height: 0;
    height: 220px;
  }
  .fbn-title {
    font-size: 16px;
  }
  /* Modal de vídeo no celular: player retrato em cima, texto embaixo. */
  .fbn-modal__box {
    flex-direction: column;
    align-items: center;
  }
  .fbn-modal__player {
    height: min(60vh, 560px);
    max-width: 92vw;
  }
  .fbn-modal__box--with-panel .fbn-modal__player {
    border-radius: 10px 10px 0 0;
  }
  .fbn-modal__panel {
    width: 100%;
    max-width: none;
    border: 1px solid #e9e2d0;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    max-height: 26vh;
    padding: 11px 13px;
  }
  /* Linhas de ranking/lojas quebram em vez de espremer. */
  .hs-row {
    flex-wrap: wrap;
  }
  /* Ações da linha (ex.: Nome/Gênero/Desbugar/Shop History/Ocultar na lista de
     personagens): como item flex:none elas estouravam para o lado — aqui
     descem para a própria linha, ocupando a largura toda e quebrando à vontade. */
  .hs-row .hs-actions {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
  }
  .hs-sub {
    margin-left: 22px;
  }
  .hs-form__row > label {
    min-width: 0;
    flex: 1 1 100%;
  }
  .hs-form__row select,
  .hs-form__row input[type="text"] {
    min-width: 0;
    width: 100%;
  }
}

/* ---- <= 480px: telefones estreitos ---------------------------------------- */
@media screen and (max-width: 480px) {
  .ca-field.half {
    flex-basis: 100%;
  }
  /* mundos: 3 por linha em vez de 4, para o nome caber no cartão */
  .ca-pick.quarter {
    flex-basis: calc(33.333% - 5.34px);
  }
  /* a dica do título de seção desce para a linha de baixo, alinhada ao texto */
  .ca-legend {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .ca-legend .ca-legend-hint {
    flex-basis: 100%;
    margin-left: 26px;
  }
  .mainbody .header {
    height: 50px;
    background-size: 152px;
    background-position: 8px -41px;
  }
  .dex {
    width: 78px;
    height: 78px;
    top: 8px;
    background-size: 46px;
  }
  .dex a img {
    width: 78px;
  }
  .div-happening {
    margin-right: 94px;
  }
  .menuNavbar {
    font-size: 14px;
  }
  .menuNavbar > a > .menu1,
  .menuNavbar > a > .menu2,
  .menuNavbar > a > .menu3 {
    padding: 7px 11px;
  }
  .fbn-media {
    height: 190px;
  }
  .hs-val {
    font-size: 13px;
    padding: 3px 11px;
  }
  .copyright {
    font-size: 11px;
  }
}

/* ============================================================================
   PAINEL DA EQUIPE (/_developer) — .dv-*
   ----------------------------------------------------------------------------
   Casca do painel: início com cartões por área, barra compacta de ferramentas
   e os pedaços que o kit .ca-* não cobre (select, textarea, number/date,
   segmentos, flags, console). Formulários usam .ca-card/.ca-field; resultados
   usam .hs-list/.hs-info. Helpers em app/devpanel.php.
   ============================================================================ */
.dv .dv-hero h1 i{color:#4a5da8;margin-right:3px;}
.dv-roles{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:10px;}
.dv-role{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#243478;background:#eef1fb;border:1px solid #d8def3;border-radius:999px;padding:3px 10px;}
.dv-role i{color:#6470a8;}

/* ---- início: cartões das ferramentas ---- */
.dv-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:8px;}
a.dv-tile,a.dv-tile:link,a.dv-tile:visited{display:flex;align-items:center;gap:11px;min-width:0;padding:10px 12px;background:#f7f8fd;border:2px solid #dfe3f2;border-radius:10px;text-decoration:none!important;transition:border-color .15s,background-color .15s,transform .1s;}
a.dv-tile:hover{border-color:#243478;background:#eef1fb;transform:translateY(-1px);}
.dv-tile__ico{flex:none;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid #d8def3;border-radius:9px;color:#4a5da8;font-size:16px;}
.dv-tile__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.dv-tile__name{font-size:13px;font-weight:800;color:#243478;line-height:1.25;}
.dv-tile__desc{font-size:11px;font-weight:600;color:#7d849c;line-height:1.35;}
.dv-tile__ext,.dv-chip__ext{font-size:9px;color:#a7b0cd;margin-left:2px;}

/* ---- ferramenta aberta: barra compacta ---- */
.ca-card.dv-nav{padding:10px 14px 10px;}
.dv-nav__top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid #e9edf7;}
.dv-nav__top .dv-roles{margin:0;}
a.dv-nav__home,a.dv-nav__home:link,a.dv-nav__home:visited{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:#243478!important;text-decoration:none!important;}
a.dv-nav__home:hover{text-decoration:underline!important;}
a.dv-nav__home i{color:#4a5da8;}
.dv-nav__row{display:flex;align-items:flex-start;gap:10px;padding:5px 0;}
.dv-nav__area{flex:none;width:118px;padding-top:6px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8a8470;white-space:nowrap;}
.dv-nav__area i{color:#b3ab93;margin-right:3px;}
.dv-chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:5px;}
a.dv-chip,a.dv-chip:link,a.dv-chip:visited{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#243478!important;background:#f7f8fd;border:1px solid #dfe3f2;border-radius:999px;padding:4px 10px;text-decoration:none!important;white-space:nowrap;transition:background-color .12s,border-color .12s;}
a.dv-chip i{color:#6470a8;font-size:11px;}
a.dv-chip:hover{background:#eef1fb;border-color:#c2cbef;}
a.dv-chip.is-active{background:#243478;border-color:#243478;color:#fff!important;}
a.dv-chip.is-active i{color:#fff;}

/* ---- campos que o .ca-* não cobre ---- */
.ca .dv-input input[type="number"],
.ca .dv-input input[type="date"],
.ca .dv-input select,
.ca .dv-input textarea{box-sizing:border-box;width:100%;margin:0;background-color:#f7f8fd;border:2px solid #dfe3f2;border-radius:9px;color:#1f2a52;font-family:inherit;font-size:14px;text-align:left;transition:border-color .15s,box-shadow .15s,background-color .15s;}
.ca .dv-input input[type="number"],
.ca .dv-input input[type="date"]{height:42px;padding:0 12px 0 32px;}
.ca .dv-input select{height:42px;line-height:normal;padding:0 40px 0 32px;cursor:pointer;}
.ca .dv-input textarea{min-height:92px;padding:9px 12px;line-height:1.45;resize:vertical;}
.ca .dv-input input[type="number"]:hover,.ca .dv-input input[type="date"]:hover,.ca .dv-input select:hover,.ca .dv-input textarea:hover{border-color:#c8cfe8;}
.ca .dv-input input[type="number"]:focus,.ca .dv-input input[type="date"]:focus,.ca .dv-input select:focus,.ca .dv-input textarea:focus{outline:none;background-color:#fff;border-color:#243478;box-shadow:0 0 0 3px rgba(36,52,120,.15);}
.ca .dv-input textarea::placeholder{color:#a7b0cd;}
.ca .dv-input input[type="text"]{padding-right:12px;}
.dv-muted{color:#9099b5;font-style:normal;font-weight:600;}

/* ---- segmentos (escolha única) ---- */
.dv-seg{display:flex;flex-wrap:wrap;gap:6px;}
.ca .dv-seg__opt{position:relative;float:none;margin:0;cursor:pointer;}
.dv-seg__opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;}
.dv-seg__opt span{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;font-size:12.5px;font-weight:700;color:#243478;background:#f7f8fd;border:2px solid #dfe3f2;border-radius:9px;transition:border-color .15s,background-color .15s;user-select:none;}
.dv-seg__opt span i{color:#6470a8;}
.dv-seg__opt:hover span{border-color:#b9c2e5;background:#eef1fb;}
.dv-seg__opt input:checked + span{background:#243478;border-color:#243478;color:#fff;box-shadow:0 1px 5px rgba(36,52,120,.25);}
.dv-seg__opt input:checked + span i{color:#fff;}
.dv-seg__opt input:focus-visible + span{outline:2px solid #4a5da8;outline-offset:2px;}

/* ---- ações ---- */
.dv-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:16px;}
.ca .dv-submit{width:auto;min-width:210px;max-width:none;height:42px;padding:0 26px;font-size:14px;}
.dv-actions .dv-btn,a.hs-act.dv-btn{font-size:12px;padding:8px 13px;}
.dv-actions--start{justify-content:flex-start;margin-top:0;margin-bottom:12px;}

/* ---- resultado ---- */
.dv-info{margin-bottom:12px;}
.dv-info:last-child{margin-bottom:0;}
.dv .hs-info__v small{font-size:11px;font-weight:600;color:#8a8470;}
.dv-sub{display:flex;align-items:center;gap:6px;margin:14px 0 8px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8a8470;}
.dv-sub i{color:#b3ab93;}
.dv-plus{color:#1b8f3a!important;}
.dv-minus{color:#c62828!important;}
.dv-total .hs-info__v{font-size:16px;}
.dv .hs-row small.dv-id{color:#8a8470;font-weight:600;font-size:11px;}
.dv .hs-meta{flex-wrap:wrap;}
.dv .error-box,.dv .sucess-box,.dv .blue-box{margin:12px 0 0;}
.dv .hs-pager__info{font-size:12px;font-weight:700;color:#8a8470;margin:0 6px;}

/* Histórico de login: personagens da conta e links que refiltram */
.dv-pills{display:flex;flex-wrap:wrap;gap:5px;margin:-2px 0 3px 53px;}
.dv-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#3a3525;background:#faf9f4;border:1px solid #ece5d4;border-radius:999px;padding:3px 10px;white-space:nowrap;}
.dv-pill b{color:#16204e;}
.dv-pill .dv-on{color:#2e7d32;}
.dv-pill .dv-off{color:#c62828;}
.dv-pill .dv-lv{color:#8a6d00;}
a.dv-filter,a.dv-filter:link,a.dv-filter:visited{color:inherit!important;text-decoration:underline dotted!important;cursor:context-menu;}
a.dv-filter:hover{color:#243478!important;}
.dv-toggle{cursor:pointer;color:#6470a8;font-size:11px;font-weight:700;margin-left:4px;white-space:nowrap;}
.dv-toggle i{transition:transform .15s;}
.dv-toggle.is-open i{transform:rotate(90deg);}

/* Gerador de flags */
.dv-flags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.ca label.dv-flag{float:none;margin:0;display:flex;align-items:center;gap:8px;padding:7px 10px;background:#f7f8fd;border:1px solid #dfe3f2;border-radius:8px;cursor:pointer;min-width:0;}
.dv-flag:hover{border-color:#b9c2e5;background:#eef1fb;}
.dv-flag input{flex:none;width:15px;height:15px;margin:0;padding:0;border:0;accent-color:#243478;cursor:pointer;}
.dv-flag span{flex:1;min-width:0;font-size:12px;font-weight:700;color:#243478;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dv-flag small{flex:none;font-size:10px;font-weight:700;color:#9099b5;}
.dv-flag:has(input:checked){background:#eef1fb;border-color:#243478;}

/* Console do servidor */
.dv-console{margin-top:12px;}
.dv-console__out{max-height:560px;overflow:auto;background:#0f1720;border:1px solid #1f2d3b;border-radius:10px;padding:10px 12px;color:#d6e2ee;font-size:12px;}
.dv-console__out:empty::before{content:"Carregando...";color:#6f8497;}
.dv-console__out pre{margin:0;max-width:none;width:auto;border:0;background:transparent!important;white-space:pre-wrap;word-break:break-word;font-family:Menlo,Consolas,monospace;font-size:12px;line-height:1.45;}
.dv-console__out center{color:#9fc2e8;margin-bottom:6px;}
.dv-console__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.dv-console__refresh{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#243478;}
.dv-console__refresh .toggle{margin:0;}
.dv-logs{white-space:pre-wrap;word-break:break-word;background:#0f1720;color:#d6e2ee;border:1px solid #1f2d3b;border-radius:10px;padding:10px 12px;max-height:600px;overflow:auto;margin:0;font-family:Menlo,Consolas,monospace;font-size:12px;}

/* Funil de anúncios: tabelas densas continuam table.pTable (skin moderna) */
.dv table.pTable{margin-bottom:6px;}
.dv-note{display:block;margin:6px 0 14px;font-size:11.5px;line-height:1.5;color:#7d849c;}

/* Controles do painel na fonte do site: <button>/<input> caem no Arial do navegador. */
.dv button,.dv input,.dv select,.dv textarea{font-family:inherit;}
.dv .hs-pager__btn:disabled{opacity:.4;cursor:default;}
/* Autocomplete (Twitch): o wrapper do plugin vira o item flex e cobria o ícone do campo. */
.dv-input > i.ca-ico{z-index:1;}
.dv-input .easy-autocomplete{flex:1;min-width:0;width:100%!important;}
.dv-input .easy-autocomplete input{width:100%;}
.dv-input .easy-autocomplete-container{width:100%;}
.dv-input .easy-autocomplete-container:not(:has(li)){display:none;}
.dv-input .easy-autocomplete-container ul{margin:0;padding:0;}
.dv-input .easy-autocomplete-container ul li{margin:4px;padding:3px 8px;list-style-type:none;color:#fff;font-size:13px;}
.dv-input .easy-autocomplete-container ul li.selected{background:#007ba4;border-radius:5px;cursor:pointer;}

/* ---- night mode ---- */
body.night-mode .dv .dv-hero h1 i{color:#8fa6c8;}
body.night-mode .dv-role{color:#cfe1f1;background:#233444;border-color:#36506a;}
body.night-mode .dv-role i{color:#7f9fd8;}
body.night-mode a.dv-tile,body.night-mode a.dv-tile:link,body.night-mode a.dv-tile:visited{background:#233444;border-color:#36506a;}
body.night-mode a.dv-tile:hover{background:#2a3f54;border-color:#7fa8d4;}
body.night-mode .dv-tile__ico{background:#1d2a38;border-color:#36506a;color:#8fa6c8;}
body.night-mode .dv-tile__name{color:#eaf0f6;}
body.night-mode .dv-tile__desc{color:#8ea3b6;}
body.night-mode .dv-nav__top{border-bottom-color:#2e4254;}
body.night-mode a.dv-nav__home,body.night-mode a.dv-nav__home:link,body.night-mode a.dv-nav__home:visited{color:#e6eef7!important;}
body.night-mode a.dv-nav__home i{color:#8fa6c8;}
body.night-mode .dv-nav__area{color:#8ea3b6;}
body.night-mode .dv-nav__area i{color:#5e7184;}
body.night-mode a.dv-chip,body.night-mode a.dv-chip:link,body.night-mode a.dv-chip:visited{color:#cfe1f1!important;background:#233444;border-color:#36506a;}
body.night-mode a.dv-chip i{color:#8fa6c8;}
body.night-mode a.dv-chip:hover{background:#2a3f54;border-color:#43617f;}
body.night-mode a.dv-chip.is-active{background:#3d5a80;border-color:#5b86b5;color:#fff!important;}
body.night-mode a.dv-chip.is-active i{color:#fff;}
body.night-mode .ca .dv-input input[type="number"],
body.night-mode .ca .dv-input input[type="date"],
body.night-mode .ca .dv-input select,
body.night-mode .ca .dv-input textarea{background-color:#233444;border-color:#36506a;color:#eaf0f6;color-scheme:dark;}
body.night-mode .ca .dv-input input[type="number"]:focus,
body.night-mode .ca .dv-input input[type="date"]:focus,
body.night-mode .ca .dv-input select:focus,
body.night-mode .ca .dv-input textarea:focus{background-color:#2a3f54;border-color:#5b86b5;box-shadow:0 0 0 3px rgba(91,134,181,.2);}
body.night-mode .ca .dv-input textarea::placeholder{color:#6f8497;}
body.night-mode .dv-muted{color:#6f8497;}
body.night-mode .dv-seg__opt span{color:#cfe1f1;background:#233444;border-color:#36506a;}
body.night-mode .dv-seg__opt span i{color:#8fa6c8;}
body.night-mode .dv-seg__opt:hover span{background:#2a3f54;border-color:#43617f;}
body.night-mode .dv-seg__opt input:checked + span{background:#3d5a80;border-color:#5b86b5;color:#fff;}
body.night-mode .dv-seg__opt input:checked + span i{color:#fff;}
body.night-mode .dv .hs-info__v small{color:#8ea3b6;}
body.night-mode .dv-sub{color:#8ea3b6;}
body.night-mode .dv-sub i{color:#5e7184;}
body.night-mode .dv-plus{color:#7bd086!important;}
body.night-mode .dv-minus{color:#ef9a9a!important;}
body.night-mode .dv .hs-row small.dv-id{color:#8ea3b6;}
body.night-mode .dv .hs-pager__info{color:#8ea3b6;}
body.night-mode .dv-pill{color:#c3d2dd;background:#18242f;border-color:#2a3b48;}
body.night-mode .dv-pill b{color:#eaf0f6;}
body.night-mode .dv-pill .dv-on{color:#7bd086;}
body.night-mode .dv-pill .dv-off{color:#ef9a9a;}
body.night-mode .dv-pill .dv-lv{color:#e6c46a;}
body.night-mode a.dv-filter:hover{color:#9fc2e8!important;}
body.night-mode .dv-toggle{color:#8fa6c8;}
body.night-mode .ca label.dv-flag{background:#233444;border-color:#36506a;}
body.night-mode .dv-flag:hover{background:#2a3f54;border-color:#43617f;}
body.night-mode .dv-flag span{color:#cfe1f1;}
body.night-mode .dv-flag small{color:#6f8497;}
body.night-mode .dv-flag:has(input:checked){background:#2a3f54;border-color:#7fa8d4;}
body.night-mode .dv-console__refresh{color:#cfe1f1;}
body.night-mode .dv-note{color:#8ea3b6;}

.dv-nav__toggle{display:none;}

@media screen and (max-width: 720px) {
  .dv-tiles{grid-template-columns:1fr;}
  /* No celular a barra de ferramentas fica recolhida atrás do botão. */
  .dv-nav__toggle{display:inline-flex;}
  .dv-nav__top .dv-roles{display:none;}
  .dv-nav__top{border-bottom:0;padding-bottom:0;margin-bottom:0;}
  .dv-nav.is-open .dv-nav__top{border-bottom:1px solid #e9edf7;padding-bottom:8px;margin-bottom:4px;}
  body.night-mode .dv-nav.is-open .dv-nav__top{border-bottom-color:#2e4254;}
  .dv-nav:not(.is-open) .dv-nav__row{display:none;}
  .dv-nav__row{flex-direction:column;gap:5px;}
  .dv-nav__area{width:auto;padding-top:0;}
  .dv-flags{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dv-pills{margin-left:0;}
  .ca .dv-submit{width:100%;min-width:0;}
}

/* otPokeLand: mundo Primal usa as cores do Blue */
.mn-srv--primal{color:#1769c2;}
body.night-mode .mn-srv--primal{color:#64b5f6;}

/* [logo-title-otpland 2026-11-03] agora usa images/logo-title-otpland.png: "OTP" e "LAND" do logo do OTClient (menu_login) lado a lado, sem a pokébola; 224x48 Lanczos */
/* ---- [logo-title 2026-11-03] logo do topo em tamanho de título -------------
   images/logo-title.png = logo_otpokeland_1000.png só redimensionado (Lanczos,
   275x48, transparência preservada). Substitui o recorte do small_logo_otpokemon.png
   no .header, mantendo o centro do logo no mesmo lugar. A especificidade maior
   (.mainbody .header) vence o <style> inline do layout. */
.mainbody .header {
  background-image: url("/images/logo-title-otpland.png?v=1");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 516px 92px; /* [logo-title-pos 2026-11-03] antes 56px: logo desce p/ ~10px acima do card do Pikachu */
}
@media screen and (max-width: 940px) {
  .mainbody .header {
    background-size: auto 36px;
    background-position: 8px 10px;
  }
}
@media screen and (max-width: 480px) {
  .mainbody .header {
    background-size: auto 32px;
    background-position: 8px 9px;
  }
}

/* [social-gap 2026-11-03] botões sociais do topo com respiro de 9px (mesmo tamanho 30px) */
.navbuttons{display:flex;align-items:center;gap:9px;}
.navbuttons > a,.navbuttons > span{display:inline-flex;}
@media screen and (max-width: 940px){ .m-drawer-social{gap:10px;} }

/* [banner-abas 2026-11-03] eventbar: Torneio Mensal e Discord em abas, troca a cada 60s ou pela bolinha.
   Substitui o ciclo de 16s (promo-a/promo-b) só no .promo--tabs; o resto do visual é o mesmo do otponline. */
.promo--tabs .promo__slide{animation:none !important;transform:translateX(100%);visibility:hidden;transition:transform .64s cubic-bezier(.65,0,.35,1),visibility 0s linear .64s;}
.promo--tabs .promo__slide.is-active{transform:translateX(0);visibility:visible;transition:transform .64s cubic-bezier(.65,0,.35,1),visibility 0s;}
.promo--tabs .promo__slide.was-active{transform:translateX(-100%);}
.promo--tabs .promo__dot{animation:none !important;width:6px;background:rgba(255,255,255,.45);transition:width .3s ease,background .3s ease;}
.promo--tabs .promo__dot.is-active{width:14px;background:#fff;}
/* animações internas: cada aba anima enquanto está à vista (mensagens alternam como no modo "single") */
.promo--tabs .promo-discord .promo__msg{animation-name:promo-solo-msg;}
.promo--tabs .promo-discord .promo__msg--2{animation-name:promo-solo-msg2;}
.promo--tabs .promo-discord :is(.promo-discord__logo,.promo-discord__fly,.promo-discord__ball,.promo-discord__ball-btn,.promo-discord__shadow,.promo-discord__beam,.promo-discord__spark){animation-delay:-8s;}
@media (prefers-reduced-motion: reduce){
  .promo--tabs .promo__slide{transform:none;opacity:0;transition:opacity .4s ease,visibility 0s linear .4s;}
  .promo--tabs .promo__slide.is-active{opacity:1;transition:opacity .4s ease,visibility 0s;}
}
/* [discord-title 2026-11-03] Pixelify Sans desenha o "C" maiusculo igual a "O" (DISOORD); titulo do Discord em Cairo */
.promo .promo-discord .promo__title{font-family:Cairo,"Poppins",Arial,sans-serif;font-weight:800;letter-spacing:1px}

/* [news-btn 2026-11-03] botão de link dentro das notícias ([texto](url)) */
.fbn-text .fbn-btn{display:inline-flex;align-items:center;gap:6px;margin:6px 0 2px;padding:7px 16px;border-radius:8px;background:#f5a623;color:#15202b !important;font-weight:700;text-decoration:none;}
.fbn-text .fbn-btn:hover{filter:brightness(1.08);text-decoration:none;}