/* Tela "Contas" (/accounts) — estilos escopados em .accounts-page para não afetar outras páginas. */
.accounts-page {
  --acc-accent: #e60000;
  --acc-accent-hover: #c80000;
  --acc-surface: rgba(12, 12, 14, 0.92);
  --acc-surface-row: rgba(255, 255, 255, 0.025);
  --acc-border: rgba(255, 255, 255, 0.08);
  --acc-border-strong: rgba(255, 255, 255, 0.14);
  --acc-divider: rgba(255, 255, 255, 0.05);
  --acc-text: #e9e9ec;
  --acc-muted: #8b8b94;
  --acc-head: #7a8bb3;
  max-width: 1280px;
  margin: 0 auto 2rem;
  text-align: left;
}

/* ---------- cabeçalho ---------- */
.accounts-page .accounts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.accounts-page .accounts-header__title {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.accounts-page .accounts-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  color: var(--acc-accent);
  background: rgba(230, 0, 0, 0.1);
  border: 1px solid rgba(230, 0, 0, 0.25);
}

.accounts-page .accounts-header__icon svg {
  width: 22px;
  height: 22px;
}

.accounts-page .accounts-header__heading {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  color: #fff;
  letter-spacing: 0;
  text-transform: none;
}

.accounts-page .accounts-header__subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: #b4b4bd;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
}

.accounts-page .accounts-header__create {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
}

/* ---------- botões (vermelho do painel) ---------- */
.accounts-page .btn-primary {
  background-color: var(--acc-accent);
  border-color: var(--acc-accent);
  color: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.accounts-page .btn-primary:hover,
.accounts-page .btn-primary:focus {
  background-color: var(--acc-accent-hover);
  border-color: var(--acc-accent-hover);
  color: #fff;
}

.accounts-page .btn-primary:focus-visible {
  outline: 2px solid rgba(230, 0, 0, 0.55);
  outline-offset: 2px;
}

/* ---------- card + tabela ---------- */
.accounts-page .accounts-card {
  background: var(--acc-surface);
  border: 1px solid var(--acc-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.accounts-page .accounts-table {
  color: var(--acc-text);
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.accounts-page .accounts-table > :not(caption) > * > * {
  background: transparent;
  border-bottom: 1px solid var(--acc-border);
  box-shadow: none;
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

.accounts-page .accounts-table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc-head);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--acc-border-strong);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  white-space: nowrap;
}

.accounts-page .accounts-table tbody tr {
  transition: background-color 0.15s ease;
}

.accounts-page .accounts-table tbody tr:nth-child(even) > td {
  background: var(--acc-surface-row);
}

.accounts-page .accounts-table tbody tr:hover > td {
  background: rgba(230, 0, 0, 0.06);
}

.accounts-page .accounts-table tbody tr:last-child > td {
  border-bottom: 0;
}

/* separadores verticais sutis entre as colunas */
.accounts-page .accounts-table > :not(caption) > tr > * + * {
  border-left: 1px solid var(--acc-divider);
}

.accounts-page .accounts-table > thead > tr > * + * {
  border-left-color: rgba(255, 255, 255, 0.07);
}

.accounts-page .accounts-table__name {
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accounts-page .accounts-table__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.accounts-page .accounts-table__meta {
  display: none;
  flex-wrap: wrap;
  column-gap: 0.65rem;
  row-gap: 0.1rem;
  font-size: 0.75rem;
  color: var(--acc-muted);
}

/* cada item quebra inteiro (nunca "moeda" numa linha e valor na outra) */
.accounts-page .accounts-table__meta-item {
  white-space: nowrap;
}

.accounts-page .accounts-table__meta i {
  font-size: 0.7rem;
  margin-right: 0.15rem;
}

/* larguras: Personagens é a coluna flexível (mais larga); demais ocupam só o necessário */
.accounts-page .accounts-table {
  min-width: 1040px;
}

.accounts-page .accounts-table__account-col {
  width: 140px;
}

.accounts-page .accounts-table__chars {
  width: auto;
}

.accounts-page .accounts-table__stat {
  width: 1%;
  text-align: left;
  white-space: nowrap;
}

.accounts-page .accounts-table > :not(caption) > * > .accounts-table__stat {
  padding-left: 0.6rem;
  padding-right: 0.9rem;
}

/* ---------- personagens ---------- */
.accounts-page .accounts-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
}

.accounts-page .accounts-chip {
  display: inline-block;
  max-width: 130px;
  padding: 0.18rem 0.5rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #d4d4d8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--acc-border);
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Contador dentro do chip do personagem (usado em /my-items).
   Fica DENTRO do botao, entao o nome do personagem precisa vir em data-nick — senao o
   textContent do chip viria como "Nick12". */
.accounts-page .accounts-chip__badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  min-width: 1.15rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: #d4d4d8;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.accounts-page .accounts-chip--action:hover .accounts-chip__badge,
.accounts-page .accounts-chip--action:focus-visible .accounts-chip__badge {
  color: #fff;
  background: rgba(230, 0, 0, 0.3);
}

/* O chip vira uma caixa flex: o NOME encolhe e ganha reticências, o BADGE nunca encolhe.
   Antes o `overflow: hidden` do chip cortava o badge junto com o nome, então nick longo ou
   número grande sumia com a contagem. */
.accounts-page .accounts-chip:has(.accounts-chip__badge) {
  display: inline-flex;
  align-items: center;
  max-width: 190px;
  overflow: visible;
}

.accounts-page .accounts-chip__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accounts-page .accounts-chip__badge {
  flex: 0 0 auto;
}

/* chip do bau: o bau e da CONTA, nao de um personagem — por isso nao e clicavel */
.accounts-page .accounts-chip--chest {
  color: var(--acc-muted);
  border-style: dashed;
}

.accounts-page .accounts-empty-value,
.accounts-page .accounts-loading {
  color: var(--acc-muted);
  font-size: 0.82rem;
}

.accounts-page .accounts-loading {
  letter-spacing: 0.15em;
  animation: accounts-pulse 1.2s ease-in-out infinite;
}

@keyframes accounts-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* ---------- gold / cash / honra ---------- */
/* cabeçalho clicável: seta indica a direção; inativo mostra ícone neutro */
.accounts-page .accounts-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.15s ease;
}

/* o cabeçalho ordenável é <a> em /accounts (navegação) e <button> em /my-items
   (ordena via fetch, sem recarregar). O botão precisa perder a aparência nativa para os
   dois ficarem idênticos. */
.accounts-page button.accounts-sort {
  padding: 0;
  font: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.accounts-page .accounts-sort i {
  font-size: 0.68rem;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.accounts-page .accounts-sort:hover,
.accounts-page .accounts-sort:focus-visible {
  color: #fff;
}

.accounts-page .accounts-sort:hover i {
  opacity: 0.8;
}

.accounts-page .accounts-sort:focus-visible {
  outline: 2px solid rgba(230, 0, 0, 0.55);
  outline-offset: 3px;
}

.accounts-page .accounts-sort.is-active {
  color: #fff;
}

.accounts-page .accounts-sort.is-active i {
  opacity: 1;
  color: var(--acc-accent);
}

/* ícone à esquerda e valor logo ao lado; ícone com largura fixa para os números começarem sempre no mesmo ponto */
.accounts-page .accounts-stat {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  width: 100%;
  font-variant-numeric: tabular-nums;
  color: var(--acc-text);
}

.accounts-page .accounts-stat--gold {
  min-width: 118px;
}

.accounts-page .accounts-stat--cash,
.accounts-page .accounts-stat--honor {
  min-width: 72px;
}

/* zero discreto para não poluir a tabela */
.accounts-page .accounts-stat.is-zero {
  color: #6b6b74;
}

.accounts-page .accounts-stat.is-zero i {
  opacity: 0.35;
}

.accounts-page .accounts-stat i {
  flex: 0 0 1rem;
  width: 1rem;
  font-size: 0.82rem;
  text-align: center;
}

.accounts-page .accounts-stat--gold i {
  color: #f5b82e;
}

.accounts-page .accounts-stat--cash i {
  color: #38bdf8;
}

.accounts-page .accounts-stat--honor i {
  color: #facc15;
}

.accounts-page .accounts-table__actions {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

.accounts-page .accounts-table__buttons {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.accounts-page .accounts-table__buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 120px;
  padding: 0.42rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 6px;
}

.accounts-page .accounts-table__buttons .btn i {
  font-size: 0.78rem;
}

/* estilo "tinted" (mesmo do ícone do cabeçalho): fundo vermelho translúcido, borda suave; sólido no hover */
.accounts-page .accounts-table__buttons .btn {
  color: #ff6b6b;
  background-color: rgba(230, 0, 0, 0.1);
  border: 1px solid rgba(230, 0, 0, 0.3);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.accounts-page .accounts-table__buttons .btn:hover,
.accounts-page .accounts-table__buttons .btn:focus-visible {
  color: #fff;
  background-color: var(--acc-accent);
  border-color: var(--acc-accent);
}

.accounts-page .accounts-table__buttons .btn:active {
  color: #fff;
  background-color: var(--acc-accent-hover);
  border-color: var(--acc-accent-hover);
}

/* ---------- estado vazio ---------- */
.accounts-page .accounts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--acc-muted);
}

.accounts-page .accounts-empty p {
  margin: 0;
}

.accounts-page .accounts-empty__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--acc-accent);
  background: rgba(230, 0, 0, 0.1);
}

/* ---------- rodapé: contagem + paginação ---------- */
.accounts-page .accounts-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--acc-border-strong);
  background: rgba(255, 255, 255, 0.015);
}

.accounts-page .accounts-footer__count {
  font-size: 0.82rem;
  color: var(--acc-muted);
}

/* a paginação é o partial compartilhado: apenas reposiciona/estiliza aqui */
.accounts-page .accounts-footer__pagination .row {
  margin: 0 !important;
  display: block;
}

.accounts-page .accounts-footer__pagination nav {
  display: block !important;
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0;
  flex: none;
}

.accounts-page .accounts-footer__pagination .pagination {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.accounts-page .accounts-footer__pagination .page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.6rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--acc-text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--acc-border-strong);
  border-radius: 8px !important;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.accounts-page .accounts-footer__pagination .page-item .page-link:hover {
  color: #fff;
  border-color: var(--acc-accent);
  background: rgba(230, 0, 0, 0.12);
}

.accounts-page .accounts-footer__pagination .page-item.active .page-link {
  color: #fff;
  background: var(--acc-accent);
  border-color: var(--acc-accent);
}

.accounts-page .accounts-footer__pagination .page-link i + i {
  margin-left: -2px;
}

/* ---------- responsivo ---------- */
@media (max-width: 767.98px) {
  .accounts-page .accounts-header {
    align-items: stretch;
  }

  .accounts-page .accounts-header__create {
    width: 100%;
    justify-content: center;
  }

  .accounts-page .accounts-table {
    min-width: 0;
  }

  .accounts-page .accounts-table__chars,
  .accounts-page .accounts-table__stat {
    display: none;
  }

  .accounts-page .accounts-table__account-col {
    width: auto;
  }

  .accounts-page .accounts-table__meta {
    display: flex;
    margin-top: 0.15rem;
  }

  .accounts-page .accounts-table__name {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .accounts-page .accounts-table > :not(caption) > * > * {
    padding: 0.7rem 0.85rem;
  }

  .accounts-page .accounts-table__buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .accounts-page .accounts-table__buttons .btn {
    min-width: 0;
    width: 100%;
  }

  .accounts-page .accounts-footer {
    justify-content: center;
    text-align: center;
  }
}

/* ---------- /accounts: busca por usuário e personagem ----------
 * O campo com ícone (.my-items-search) tem o posicionamento escopado em .my-items-page,
 * que esta tela não usa. As regras equivalentes ficam aqui, só para esta busca.
 */
.accounts-page .accounts-search {
  border-bottom: 1px solid var(--acc-border-strong);
}

.accounts-page .accounts-search .panel-filters__field {
  flex: 0 1 300px;
}

.accounts-page .accounts-search .my-items-search {
  position: relative;
}

.accounts-page .accounts-search .my-items-search > i {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--acc-muted);
  pointer-events: none;
}

.accounts-page .accounts-search .my-items-search .form-control {
  height: 38px;
  padding: 0 0.85rem 0 2.25rem;
  font-size: 0.85rem;
  color: var(--acc-text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--acc-border-strong);
  border-radius: 8px;
  box-shadow: none;
}

.accounts-page .accounts-search .my-items-search .form-control::placeholder {
  color: var(--acc-muted);
}

.accounts-page .accounts-search .my-items-search .form-control:focus {
  border-color: var(--acc-accent);
  box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.15);
}

.accounts-page .accounts-live[aria-busy='true'] {
  opacity: 0.55;
  transition: opacity 0.12s ease;
}

/* chip do personagem quando é clicável (abre a visualização) */
.accounts-page .accounts-chip--action {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--acc-border-strong);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.accounts-page .accounts-chip--action:hover,
.accounts-page .accounts-chip--action:focus-visible {
  color: #fff;
  background-color: rgba(230, 0, 0, 0.14);
  border-color: var(--acc-accent);
  outline: none;
}

/* ==========================================================================
 * /accounts — visualização do personagem, 100% CSS
 *
 * NÃO há imagem de fundo. `inventarioebau.png` (818 x 772) serviu apenas como
 * RÉGUA: colunas, linhas e casas foram medidas nela pixel a pixel e viraram
 * coordenadas CSS. Moldura, casas, botões e barras são desenhados aqui.
 *
 * Medidas lidas na referência (px da imagem):
 *   casa ................. 66 x 66
 *   equipamento, colunas   x = 21, 97, 173, 249, 324      (passo 75,75)
 *   equipamento, linhas    col.1/5 = 113, 187, 259, 333
 *                          col.2/4 = 151, 251, 333
 *                          col.3   = 114, 203, 296
 *   inventário ........... 5 x 3, colunas x = 24, 97, 171, 245, 318
 *                                 linhas  y = 416, 484, 553
 *   banco ................ 5 x 8, colunas x = 429, 504, 580, 655, 730
 *                                 linhas  y = 151, 221, 291, 360, 430, 500, 570, 639
 *   cabeçalho ............ campos y = 13..42; Nick 172..352, Lv 414..519, Class 593..729
 *
 * O bloco tem tamanho natural fixo e é reduzido inteiro por `--cv-escala`
 * (transform: scale) quando a tela é estreita — as posições nunca mudam.
 * ========================================================================== */

.character-viewer {
  /* medidas base — mexer aqui muda a interface inteira, de forma proporcional */
  --cv-casa: 66px;          /* lado da casa (inclui a borda: box-sizing border-box) */
  --cv-grade: 369px;        /* largura útil de qualquer grade (5 casas + 4 vãos de 9,75) */
  --cv-escala: 1;

  /* paleta grafite/metal */
  --cv-fundo: #0b0b0d;
  --cv-painel: #17171b;
  --cv-caixa: #101013;
  --cv-borda: #34343c;
  --cv-metal: #5d5a52;
  --cv-metal-claro: #8c8679;
  --cv-texto: #d9d3c6;
  --cv-texto-fraco: #8d8577;
  --cv-ouro: #d9a441;

  width: max-content;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  overflow: auto;
  color: var(--cv-texto);
  background: var(--cv-fundo);
  border: 1px solid var(--cv-borda);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
}

.character-viewer::backdrop {
  background: rgba(0, 0, 0, 0.88);
}

/* ---------- barra fina: conta e fechar ---------- */
.character-viewer .cv-topo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 34px;
  padding: 0 0.6rem;
  background: #0a0a0c;
  border-bottom: 1px solid var(--cv-borda);
}

.character-viewer .cv-topo__conta {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cv-metal-claro);
}

.character-viewer .cv-topo__close {
  margin-left: auto;
  width: 26px;
  height: 26px;
  color: var(--cv-metal-claro);
  background: transparent;
  border: 1px solid var(--cv-borda);
  border-radius: 4px;
  cursor: pointer;
}

.character-viewer .cv-topo__close:hover,
.character-viewer .cv-topo__close:focus-visible {
  color: #fff;
  border-color: var(--cv-metal-claro);
  outline: none;
}

.character-viewer .cv-state {
  margin: 0;
  min-width: 420px;
  padding: 2.5rem 1rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--cv-texto-fraco);
}

/* ---------- palco: encolhe o bloco inteiro, sem mudar posição nenhuma ---------- */
.character-viewer .cv-palco {
  overflow: hidden;
}

.character-viewer .cv-janela {
  /* largura fechada: 2 painéis de 401 + 12 de vão + 8+8 de recuo */
  box-sizing: border-box;
  width: 830px;
  padding: 8px;
  background: linear-gradient(180deg, #17171b 0%, #0e0e11 100%);
  transform: scale(var(--cv-escala));
  transform-origin: top left;
}

/* ---------- cabeçalho: Nick / Lv / Class ---------- */
.character-viewer .cv-cabecalho {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: #121215;
  border: 1px solid var(--cv-borda);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.character-viewer .cv-campo {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Base 0 de proposito: com flex-wrap a quebra e decidida pelo tamanho HIPOTETICO do
   item, entao um nick longo inflaria este campo e empurraria Honra e Cash para a linha
   de baixo. Com base 0 o Nick nao participa dessa conta — ele fica com a sobra da linha
   e encolhe com reticencias quando o espaco aperta (o nick inteiro fica no title). */
.character-viewer .cv-campo--nick { flex: 1 1 0; min-width: 90px; }

.character-viewer .cv-campo__rotulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--cv-metal-claro);
  white-space: nowrap;
}

.character-viewer .cv-campo__valor {
  display: flex;
  align-items: center;
  height: 29px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cv-texto);
  background: #0a0a0c;
  border: 1px solid var(--cv-borda);
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
}

/* Larguras dos campos. As de Lv e Class eram as medidas na referência (105 e 136) e
   encolheram para Honra e Cash caberem na MESMA linha; o Nick continua sendo quem cresce.
   Conta de largura útil (barra de 814 menos 24 de recuo = 790, com 4 vãos de 10, e cada
   valor somando 22 de recuo e borda):
     Lv 46+22 · Class 96+22 · Honra 78+22 · Cash 88+22 + rótulos = 645, sobrando 145 para
   o valor do Nick — acima do piso de 110. Cabe "BeastMaster", "15.181.065" e honra de
   6 dígitos sem apertar. Abaixo disso a barra quebra em linhas, que é o previsto. */
.character-viewer .cv-campo--nick .cv-campo__valor { flex: 1 1 auto; min-width: 0; }
.character-viewer .cv-campo--nivel .cv-campo__valor { width: 46px; }
.character-viewer .cv-campo--classe .cv-campo__valor { width: 96px; }
.character-viewer .cv-campo--honra .cv-campo__valor { min-width: 78px; }
.character-viewer .cv-campo--cash .cv-campo__valor { min-width: 88px; }

/* número alinhado à direita e com dígitos de largura fixa: a barra não dança quando o
   valor muda ao trocar de personagem */
.character-viewer .cv-campo__valor--num {
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}

/* ---------- os dois painéis ---------- */
.character-viewer .cv-colunas {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.character-viewer .cv-painel {
  /* 369 (grade) + 12 (recuo da caixa) + 2 (borda) + 16 (recuo do painel) + 2 (borda) */
  box-sizing: border-box;
  width: 401px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--cv-painel);
  border: 1px solid var(--cv-borda);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.character-viewer .cv-painel__titulo {
  margin: 0 0 12px;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  color: #e7dcc6;
  text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, #3a2a20 0%, #241a14 100%);
  border: 1px solid #4a3a2c;
  border-radius: 4px;
}

/* ---------- caixa afundada que segura cada grade ---------- */
.character-viewer .cv-caixa {
  box-sizing: border-box;
  width: 383px;
  padding: 6px;
  background: var(--cv-caixa);
  border: 1px solid #26262d;
  border-radius: 5px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

.character-viewer .cv-caixa + .cv-caixa { margin-top: 12px; }

/* a moldura do banco ocupa toda a altura do painel, como no jogo; as 8 linhas
   ficam centradas nela, então não sobra vão morto antes da barra de gold */
.character-viewer .cv-caixa--banco { flex: 1 1 auto; }

/* ==========================================================================
 * A CASA — componente único, usado no equipamento, no inventário e no banco.
 * Largura e altura fixas; o ícone se ajusta à casa, nunca o contrário.
 * ========================================================================== */
.character-viewer .cv-casa {
  position: relative;
  box-sizing: border-box;
  width: var(--cv-casa);
  height: var(--cv-casa);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #26262c 0%, #17171b 100%);
  border: 1px solid #3a3a43;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -2px 5px rgba(0, 0, 0, 0.55);
}

/* a casa NAO e clicavel: o hover so realca, para o balao do nome ter alvo visivel */
.character-viewer .cv-casa[data-nome-item] { cursor: default; }

.character-viewer .cv-casa[data-nome-item]:hover {
  border-color: var(--cv-ouro);
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.35), 0 0 10px rgba(217, 164, 65, 0.3);
}

/* o ícone: a área útil é sempre a mesma, seja qual for o arquivo */
.character-viewer .cv-casa__img {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95));
}

.character-viewer .cv-casa.sem-icone .cv-casa__img { display: none; }

.character-viewer .cv-casa.sem-icone::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(217, 164, 65, 0.28);
  border-radius: 3px;
}

/* quantidade: canto inferior ESQUERDO. Nada vai para a parte de cima da casa,
   e o +N fica no canto oposto, entao os dois nunca se sobrepoem. */
.character-viewer .cv-qtd {
  position: absolute;
  bottom: 2px;
  left: 3px;
  max-width: 38px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  z-index: 2;
  padding: 0 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 2px;
  pointer-events: none;
}

/* refinação: SEMPRE no canto inferior direito da CASA, nunca da imagem */
.character-viewer .cv-ref {
  position: absolute;
  right: 3px;
  bottom: 2px;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #ffd15c;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  pointer-events: none;
}

/* ==========================================================================
 * EQUIPAMENTO — posição absoluta, uma classe por casa real do jogo.
 * Origem (0,0) = x 21 / y 113 da referência. O mapa SLOT -> classe está no JS.
 * ========================================================================== */
.character-viewer .cv-equip {
  position: relative;
  width: var(--cv-grade);
  height: 286px;
}

.character-viewer .cv-equip .cv-casa { position: absolute; }

/* coluna 1 (x 0) — montaria, traje, brinco, anel */
.character-viewer .cv-eq--montaria { left: 0; top: 0; }
.character-viewer .cv-eq--traje    { left: 0; top: 74px; }
.character-viewer .cv-eq--brinco   { left: 0; top: 146px; }
.character-viewer .cv-eq--anel1    { left: 0; top: 220px; }

/* coluna 2 (x 76) — arma, luvas, cinto */
.character-viewer .cv-eq--arma    { left: 76px; top: 38px; }
.character-viewer .cv-eq--luvas   { left: 76px; top: 138px; }
.character-viewer .cv-eq--cinto   { left: 76px; top: 220px; }

/* coluna 3, central (x 152) — elmo, armadura, calça */
.character-viewer .cv-eq--elmo     { left: 152px; top: 0; }
.character-viewer .cv-eq--armadura { left: 152px; top: 90px; }
.character-viewer .cv-eq--calca    { left: 152px; top: 183px; }

/* coluna 4 (x 228) — 2ª arma/escudo, colar, botas */
.character-viewer .cv-eq--escudo  { left: 228px; top: 38px; }
.character-viewer .cv-eq--colar  { left: 228px; top: 138px; }
.character-viewer .cv-eq--botas   { left: 228px; top: 220px; }

/* coluna 5 (x 303) — capa, fada, amuleto, anel */
.character-viewer .cv-eq--capa  { left: 303px; top: 0; }
.character-viewer .cv-eq--fada  { left: 303px; top: 74px; }
.character-viewer .cv-eq--amuleto { left: 303px; top: 146px; }
.character-viewer .cv-eq--anel2 { left: 303px; top: 220px; }

/* ==========================================================================
 * INVENTÁRIO (5 x 3), BANCO (5 x 8) e BOLSAS — grade comum, sem absoluto.
 * ========================================================================== */
.character-viewer .cv-inventario,
.character-viewer .cv-banco,
.character-viewer .cv-bolsas {
  display: grid;
  grid-template-columns: repeat(5, var(--cv-casa));
  width: var(--cv-grade);
  justify-content: space-between;   /* vão de 9,75px, o mesmo do equipamento */
}

.character-viewer .cv-inventario { grid-template-rows: repeat(3, var(--cv-casa)); row-gap: 3px; }

.character-viewer .cv-banco {
  grid-template-rows: repeat(8, var(--cv-casa));
  row-gap: 4px;
  height: 100%;
  align-content: center;
}

/* ---------- bolsas 1 a 4 + o livro, na mesma moldura do inventário ---------- */
.character-viewer .cv-bolsas { margin-top: 12px; }

/* ---------- bolsas 1 a 4 + o livro (só desenho, como no jogo) ---------- */
.character-viewer .cv-bolsa {
  position: relative;
  box-sizing: border-box;
  width: var(--cv-casa);
  height: var(--cv-casa);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cv-texto-fraco);
  background: linear-gradient(180deg, #26262c 0%, #17171b 100%);
  border: 1px solid #3a3a43;
  border-radius: 3px;
  cursor: pointer;
}

.character-viewer .cv-bolsa i { font-size: 18px; }

.character-viewer .cv-bolsa:hover,
.character-viewer .cv-bolsa:focus-visible {
  color: var(--cv-texto);
  border-color: var(--cv-metal-claro);
  outline: none;
}

.character-viewer .cv-bolsa.is-active {
  color: #ffdf9a;
  border-color: var(--cv-ouro);
  background: linear-gradient(180deg, #3a2f1c 0%, #1d180f 100%);
  box-shadow: inset 0 0 12px rgba(217, 164, 65, 0.25);
}

.character-viewer .cv-livro {
  box-sizing: border-box;
  width: var(--cv-casa);
  height: var(--cv-casa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #4a6fa5;
  background: linear-gradient(180deg, #202028 0%, #14141a 100%);
  border: 1px solid #33333c;
  border-radius: 3px;
}

/* ---------- rodapé: barra de gold (e as páginas, no banco) ---------- */
.character-viewer .cv-rodape {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;   /* cola no pé do painel, mesmo quando o painel estica */
  padding-top: 12px;
}

.character-viewer .cv-gold {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  background: #0a0a0c;
  border: 1px solid #3c3526;
  border-radius: 5px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* a moeda é desenhada em CSS: anel dourado, como o da referência */
.character-viewer .cv-gold__moeda {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 4px solid var(--cv-ouro);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(217, 164, 65, 0.45);
}

.character-viewer .cv-gold__valor {
  flex: 1 1 auto;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: #ffe9b0;
  font-variant-numeric: tabular-nums;
}

.character-viewer .cv-paginas { display: flex; gap: 6px; }

.character-viewer .cv-pagina {
  width: 32px;
  height: 34px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cv-texto-fraco);
  background: linear-gradient(180deg, #26262c 0%, #17171b 100%);
  border: 1px solid #3a3a43;
  border-radius: 4px;
  cursor: pointer;
}

.character-viewer .cv-pagina:hover,
.character-viewer .cv-pagina:focus-visible {
  color: var(--cv-texto);
  border-color: var(--cv-metal-claro);
  outline: none;
}

.character-viewer .cv-pagina.is-active {
  color: #ffdf9a;
  border-color: var(--cv-ouro);
  background: linear-gradient(180deg, #3a2f1c 0%, #1d180f 100%);
  box-shadow: inset 0 0 10px rgba(217, 164, 65, 0.25);
}

/* ==========================================================================
 * TOOLTIP — só o nome do item, no hover. Fica fora do `.cv-janela` (que é
 * escalada) e usa position:fixed, então nenhum container o corta.
 * ========================================================================== */
.character-viewer .cv-nome {
  position: fixed;
  z-index: 20;
  max-width: 260px;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  color: #ffe9b0;
  background: rgba(10, 10, 12, 0.98);
  border: 1px solid #5c4a2c;
  border-radius: 5px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* Qualidade da montaria: mesmo canto do +N (a montaria nunca tem refinação nem
   quantidade), mas sem o "+" e em outra cor, para não ser confundida com refinação. */
.character-viewer .cv-qual {
  position: absolute;
  right: 3px;
  bottom: 2px;
  z-index: 2;
  padding: 0 3px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: #7fd4ff;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 2px;
  pointer-events: none;
}

/* ==========================================================================
 * TROCA DE PERSONAGEM — o Nick e um botao que abre os outros personagens
 * da MESMA conta. A lista fica sobre o cabecalho, dentro da janela.
 * ========================================================================== */
.character-viewer .cv-troca {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.character-viewer .cv-troca__botao {
  width: 100%;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.character-viewer .cv-troca__botao > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-viewer .cv-troca__seta {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--cv-metal-claro);
  transition: transform 0.15s ease;
}

/* conta com um personagem so: nao ha para onde trocar */
.character-viewer .cv-troca__botao:disabled {
  cursor: default;
}

.character-viewer .cv-troca__botao:disabled .cv-troca__seta {
  display: none;
}

.character-viewer .cv-troca__botao.is-clicavel:hover,
.character-viewer .cv-troca__botao.is-clicavel:focus-visible {
  border-color: var(--cv-ouro);
  outline: none;
}

.character-viewer .cv-troca__botao[aria-expanded='true'] .cv-troca__seta {
  transform: rotate(180deg);
}

.character-viewer .cv-lista {
  position: absolute;
  z-index: 15;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  padding: 4px;
  background: #0a0a0c;
  border: 1px solid var(--cv-ouro);
  border-radius: 5px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.85);
}

.character-viewer .cv-lista[hidden] { display: none; }

.character-viewer .cv-lista__item {
  display: block;
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--cv-texto);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.character-viewer .cv-lista__item:hover,
.character-viewer .cv-lista__item:focus-visible {
  color: #fff;
  background: rgba(217, 164, 65, 0.18);
  outline: none;
}

.character-viewer .cv-lista__item.is-atual {
  color: #ffdf9a;
  background: rgba(217, 164, 65, 0.1);
}

/* ---------- /accounts: conteúdo centrado na vertical ----------
 * Mesma técnica já usada em forms.css, home.css, guilds.css e pages-admin-contas.css.
 *
 * Não precisa de `calc(100vh - header)`: o tema já resolve isso. `.page-wrapper` tem
 * `min-height: 100vh` + `flex-direction: column`, e `.page-content` é `flex-grow: 1` com
 * `margin-top: 60px` (a navbar). Ou seja, a área de conteúdo JÁ ocupa a altura que sobra —
 * basta torná-la coluna flexível e deixar a página crescer dentro dela.
 *
 * `flex: 1 0 auto` é o ponto: com `flex-shrink: 0`, conteúdo mais alto que a tela mantém a
 * altura natural e a página volta ao fluxo normal, rolando como antes. Não há overflow
 * artificial: nada ganha altura fixa.
 *
 * O gancho é `.accounts-tela`, exclusiva de /accounts — `.accounts-page` está em ~90 views e
 * centralizar todas elas seria exatamente o que não se quer.
 */
.page-content:has(> .accounts-tela) {
  display: flex;
  flex-direction: column;
}

.accounts-page.accounts-tela {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  /* obrigatório: `.accounts-page` tem `margin: 0 auto`, e sem largura o item flex encolheria
     para fit-content, estreitando a tabela. A largura máxima de 1280px continua valendo. */
  width: 100%;
  /* a margem inferior de 2rem deslocaria o bloco 32px para cima do centro real; aqui quem dá
     o respiro é o próprio espaço que sobra */
  margin-bottom: 0;
}

/* No celular a tela quase nunca sobra altura, e centralizar só atrapalha a rolagem:
   volta ao empilhamento normal, com a margem inferior de sempre. */
@media (max-width: 767.98px) {
  .page-content:has(> .accounts-tela) {
    display: block;
  }

  .accounts-page.accounts-tela {
    display: block;
    margin-bottom: 2rem;
  }
}