/* DESIGN SYSTEM — pixel art de tabuleiro: tábua de madeira, botão roxo e vãos escuros.
   As cores saíram por amostragem dos PNGs do Bombcrypto (tile de fundo 64×64, botão
   229×66 e board 746×114); veja `game/src/client/DESIGN.md` antes de mexer.

   Três peças montam tudo — quadro (`.painel`, `.modal-caixa`, `.menu-topo`), botão
   (a lista compartilhada em "peças pixel reutilizáveis") e vão (área recuada). Molduras
   são `box-shadow: inset` empilhadas: a PRIMEIRA sombra fica por cima, então os anéis se
   desenham de fora para dentro.

   A tela é o produto: o app ocupa 100% da janela, as colunas rolam por dentro e o palco
   estica para ocupar tudo que sobra. Quem decide quantas tiles aparecem é o canvas, que se
   redimensiona junto (game/src/client/campo.mjs). */

:root {
  --verde: #6fd08a;
  --vermelho: #d8574a;

  /* O xadrez do fundo é um tile de 64 px com quatro quadrados de 32. */
  --xadrez-esc: #3357e3;
  --xadrez-clr: #587aff;
  /* moldura de madeira: mesma do "board" e dos botões */
  --mad-linha: #480e1e;   /* filete escuro, o mais externo */
  --mad-luz: #f1d3b7;     /* brilho de cima */
  --mad-luz2: #e7a86d;    /* brilho das laterais */
  --mad: #bd6951;         /* corpo da madeira */
  --mad-esc: #914850;     /* sombra interna */
  --mad-quente: #df824c;  /* reflexo de baixo */
  --mad-base: #722c3f;    /* degrau de baixo */
  /* miolo roxo dos botões */
  --rx-luz: #ffdef0;
  --rx-esc: #8d49b8;
  --rx: #ba5ad1;
  --rx-clr: #e77ad2;
  --rx-rosa: #ffa7d7;
  /* vãos: as áreas recuadas dentro da madeira (listas, barras, chat).
     Ficam escuras de propósito — é o que mantém legível o texto miúdo e os sprites. */
  --vao: #33202b;
  --vao2: #462b39;
  --vao-luz: #5c3948;
  /* texto sobre a madeira e dentro dos vãos */
  --sobre-mad: #fff6ef;
  --sobre-mad-dim: #f5cdb9;
  --vao-dim: #c9a9b4;

  /* ---------------------------------------------------------------- chat
     O chat é a ÚNICA parte da tela fora do vocabulário madeira/roxo, de propósito: é uma
     tela de vidro encaixada na tábua, e não mais um vão. A razão é de leitura, não de
     gosto — texto de 12 px que rola sem parar, misturando três idiomas e nicks de gente
     desconhecida, precisa do contraste máximo, e é isso que o amarelo puro sobre preto
     entrega. Os tons vieram amostrados do chat que serviu de referência.

     A regra da casa continua valendo aqui: cor só por variável. */
  --ch-ouro-luz: #e8cd8d;  /* topo da moldura dourada */
  --ch-ouro: #c8a24e;
  --ch-ouro-med: #9c7a34;
  --ch-ouro-esc: #6a5223;  /* base da moldura */
  --ch-bronze: #c8aa6e;    /* filetes, foco e o hover dos emojis */
  --ch-fundo: #0a141c;     /* topo do vidro */
  --ch-fundo2: #060c14;    /* base do vidro */
  --ch-teal: #0ac8b9;      /* brilho do canto e o anel do campo focado */
  --ch-borda: #2a3442;     /* moldura das abas apagadas */
  --ch-borda-luz: #3a4658;
  --ch-borda-esc: #171e28;

  /* O amarelo. Puro (#ff0), não "dourado" — é o que separa a fala do jogador de TODO o
     resto da tela, que é bege ou rosa. Perde a distinção assim que se dessatura. */
  --ch-fala: #ffff00;
  --ch-hora: #ffec78;      /* o horário, o mesmo amarelo puxado para o creme */

  /* Os cargos. Cada um é uma cor de nick COM brilho — o brilho é o que faz o nome saltar
     numa lista onde todo o resto já é amarelo forte. */
  --ch-vip: #7fd4ff;
  --ch-admin: #ff4d4d;
  --ch-tutor: #4dff88;

  --ch-apagado: #9aa6b3;   /* aba desligada, botão de emoji */
  --ch-aceso: #f0e6d2;     /* aba ligada e texto do botão de enviar */
  --ch-vazio: #7c8794;     /* "nenhuma mensagem ainda" */

  /* Barlow no corpo (humanista estreita: cabe mais nick por linha sem apertar) e Cinzel
     nas abas (capitular romana: dá peso de rótulo a três palavras curtas). */
  --ch-fonte: "Barlow", Tahoma, Verdana, sans-serif;
  --ch-fonte-aba: "Cinzel", Georgia, "Times New Roman", serif;
}

/* As duas fontes do chat, self-hosted. Baixadas por `node tools/fetch-chat-fonts.mjs`;
   são SIL OFL 1.1, e a licença está em `fontes/LEIA-ME.txt`. `swap` porque o chat é o
   último elemento que alguém lê ao abrir o jogo — vale a pena aparecer em Tahoma no
   primeiro frame e trocar depois, em vez de segurar a pintura. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fontes/barlow-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fontes/barlow-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fontes/barlow-600-latin.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fontes/barlow-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fontes/barlow-700-latin.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fontes/barlow-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fontes/cinzel-700-latin.woff2) format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fontes/cinzel-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 13px/1.45 "Segoe UI", system-ui, sans-serif;
  color: var(--sobre-mad);
  /* Xadrez azul do Bombcrypto: tile de 64 px com quatro quadrados de 32.
     O cone começa às 12h e gira no sentido horário, então os quadrantes saem na ordem
     superior-direito, inferior-direito, inferior-esquerdo, superior-esquerdo. */
  background-color: var(--xadrez-esc);
  background-image: conic-gradient(
    var(--xadrez-clr) 0 25%, var(--xadrez-esc) 0 50%,
    var(--xadrez-clr) 0 75%, var(--xadrez-esc) 0);
  background-size: 64px 64px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hidden { display: none !important; }

img, canvas { image-rendering: pixelated; }

/* barras de rolagem combinando com o resto */
* { scrollbar-width: thin; scrollbar-color: var(--mad-base) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: var(--mad); border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
}
*::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------- portal */
/*
   A PORTA DE ENTRADA: um quadro de madeira sobre o xadrez azul, do mesmo material dos modais
   do jogo — só mais largo e retangular. Dentro dele, o banner e, logo abaixo, o miolo que
   troca: primeiro a barra de carregamento, depois o login.

   Um quadro só, e não duas telas cheias. O xadrez do `body` continua aparecendo em volta, que
   é o que amarra esta tela ao resto do jogo.
*/

.portal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 16px;
  /* Folga embaixo para o rodapé de fan game, que é `fixed` e ficaria por cima do quadro numa
     tela de notebook (onde o login já ocupa quase toda a altura). */
  padding-bottom: 44px;
  overflow-y: auto;
}

/* O mesmo empilhamento de filetes do `.modal-caixa`: linha escura, brilho, corpo, e o degrau
   de baixo. Se um dia a moldura do jogo mudar, muda nos dois. */
.portal-caixa {
  position: relative;
  width: min(620px, 100%);
  display: flex; flex-direction: column;
  border: 0; border-radius: 9px;
  background: linear-gradient(180deg,
    var(--mad-esc) 0 12px, var(--mad) 12px calc(100% - 16px),
    var(--mad-quente) calc(100% - 16px) calc(100% - 8px), var(--mad) calc(100% - 8px) 100%);
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz),
    inset 0 0 0 6px var(--mad),
    0 6px 0 var(--mad-base),
    0 24px 70px #000c;
}

/* O banner encaixado na madeira, com o mesmo vão escuro que os painéis usam por dentro. */
.portal-arte {
  margin: 14px 14px 0; border-radius: 6px; overflow: hidden; line-height: 0;
  background: var(--vao);
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.portal-arte img {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated;
}

.portal-corpo { padding: 12px 18px 16px; }

/* ---------------------------------------------------------- carregando */
/*
   A barra anda por ETAPA CONCLUÍDA, não num relógio fingindo progresso: quando ela para num
   pedaço grande, é porque aquilo está mesmo baixando.
*/

.carga { position: relative; }

.carga-trilho {
  position: relative; height: 26px; border-radius: 7px; overflow: hidden;
  background: var(--vao);
  box-shadow:
    inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--mad-luz2),
    inset 0 3px 6px #0008, 0 2px 0 var(--mad-base);
}
.carga-fill {
  position: absolute; inset: 4px; right: auto; width: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--rx-clr) 0 45%, var(--rx) 45% 100%);
  box-shadow: inset 0 -2px 0 var(--rx-esc), inset 0 1px 0 var(--rx-luz);
  transition: width .3s ease;
}
/* Listras diagonais andando dentro do preenchido — o sinal de "ainda estou trabalhando"
   mesmo quando a porcentagem fica parada num arquivo grande. */
.carga-fill::after {
  content: ''; position: absolute; inset: 0; border-radius: 4px;
  background: repeating-linear-gradient(115deg, #ffffff26 0 10px, #ffffff00 10px 22px);
  animation: carga-listras .7s linear infinite;
}
@keyframes carga-listras { to { background-position: 22px 0; } }

/* O Pikachu corre na ponta do que já carregou. `left` é posto por JS junto com a largura.
   Ancorado em `.carga` (e não no trilho, que recorta) e empurrado para baixo com uma margem
   negativa, para as patas encostarem na borda de cima da barra em vez de flutuarem. */
.carga-corredor {
  position: absolute; bottom: 100%; left: 0; margin-bottom: -5px;
  transform: translateX(-50%);
  transition: left .3s ease;
  line-height: 0; pointer-events: none;
  filter: drop-shadow(0 2px 3px #000a);
}
.carga-corredor canvas { image-rendering: pixelated; display: block; }

.carga-texto { margin-top: 9px; text-align: center; }
.carga-pct {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: 1px; color: #fff;
  text-shadow:
    -2px -2px 0 var(--mad-base), 2px -2px 0 var(--mad-base),
    -2px 2px 0 var(--mad-base), 2px 2px 0 var(--mad-base);
}
.carga-etapa {
  margin-top: 2px; min-height: 14px;
  font-size: 11px; letter-spacing: .5px; color: var(--sobre-mad-dim);
}

/* Quem pediu menos movimento no sistema não leva listra andando nem Pikachu correndo. */
@media (prefers-reduced-motion: reduce) {
  .carga-fill::after { animation: none; }
  .carga-fill, .carga-corredor { transition: none; }
}

/* --------------------------------------------------------------- login */
/*
   Mora no mesmo quadro do carregamento — o miolo simplesmente troca quando os assets chegam.
   Os controles seguem o vocabulário do jogo (vão escuro nos campos, madeira em volta); o único
   empréstimo é o dourado do botão principal, que é a cor da marca no banner logo acima.
*/

.login { display: flex; flex-direction: column; gap: 9px; }

/* --- abas entrar / criar conta --- */

.login-abas {
  display: flex; gap: 5px; padding: 4px; border-radius: 7px;
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha);
}
.login-aba {
  flex: 1; height: 30px; border: 0; border-radius: 5px; cursor: pointer;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--vao-dim); background: transparent; box-shadow: none;
  transition: color .12s, background .12s;
}
.login-aba:hover { color: #fff; }
.login-aba.on {
  color: #4a3608; background: linear-gradient(180deg, #ffe07a, #e8a800);
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 2px 0 var(--mad-base);
}

/* --- campos --- */

.login-form { display: flex; flex-direction: column; gap: 8px; }
.login-form .campo { display: flex; flex-direction: column; gap: 3px; }
.login-form .campo > span:first-child {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .7px; color: var(--sobre-mad-dim);
}
.login-form .campo em { font-style: normal; font-size: 10px; color: var(--vao-dim); padding-left: 30px; }

/* A pokébola fica FORA do campo, à esquerda. */
.campo-linha { display: flex; align-items: center; gap: 8px; }
.campo-bola {
  flex: none; width: 22px; height: 22px;
  background: url('/assets/site/assets/ui/ball-poke.png') center/contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 1px #0005);
}

/* Especificidade extra de propósito: o estilo compartilhado de campo vem depois no arquivo e
   sobrescreveria o corpo de letra desta tela. */
.login .login-form input {
  flex: 1; min-width: 0; width: auto; height: 34px; padding: 0 11px;
  border: 0; border-radius: 6px;
  font-family: inherit; font-size: 13.5px; font-weight: 400;
  color: var(--sobre-mad); background: var(--vao);
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.login .login-form input::placeholder { color: var(--vao-dim); }
.login .login-form input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx), 0 1px 0 var(--mad-luz2);
}
.login .login-form input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--vermelho);
}

/* --- o botão dourado --- */

.login-acao {
  position: relative; margin-top: 2px; width: 100%; height: 42px;
  border: 0; border-radius: 7px; cursor: pointer;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: #4a3608; text-shadow: 0 1px 0 #ffffff88;
  background: linear-gradient(180deg, #ffe07a 0 8px, #fccb0f 8px 62%, #e8a800 62% 100%);
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 -3px 0 #00000022, 0 3px 0 var(--mad-base);
  transition: filter .12s, transform .06s;
}
.login-acao:hover { filter: brightness(1.07); }
.login-acao:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--mad-linha); }
.login-acao:disabled { opacity: .6; cursor: default; filter: grayscale(.4); }
.login-acao:disabled:active { transform: none; }
/* O Mew senta na direita do botão. Posicionado por cima para não empurrar o texto do centro. */
.acao-mascote {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  line-height: 0; pointer-events: none;
}
.acao-mascote canvas { image-rendering: pixelated; display: block; }

/* --- provedores --- */

.login-social { display: flex; flex-direction: column; gap: 8px; }

/* "ou" com um filete de cada lado */
.login-ou {
  display: flex; align-items: center; gap: 10px; margin: 1px 0;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--vao-dim);
}
.login-ou::before, .login-ou::after {
  content: ''; flex: 1; height: 2px; border-radius: 1px;
  background: var(--mad-base); box-shadow: 0 1px 0 var(--mad-luz2);
}

/* Um botão por provedor, com a marca à esquerda. O ícone é SVG embutido — sem arquivo, sem
   pedido de rede, e sem risco de o provedor trocar a arte debaixo de nós.

   Cada botão usa a cor OFICIAL do provedor como fundo, e é por isso que o do Google é branco:
   a identidade dele é o quadrado colorido sobre branco, e pintar o botão inteiro com as quatro
   cores (que era o que estava aqui) transformava a marca num arco-íris que não é dela. */
.social-btn {
  position: relative; display: flex; align-items: center;
  width: 100%; height: 38px; padding: 0; overflow: hidden;
  border: 0; border-radius: 7px; cursor: pointer;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .5px; color: #fff; text-shadow: 0 1px 2px #0007;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 3px 0 var(--mad-base);
  transition: filter .12s, transform .06s;
}
.social-btn:hover { filter: brightness(1.1); }
.social-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--mad-linha); }
.social-btn > span:last-child { flex: 1; text-align: center; padding-right: 46px; }
.social-ico {
  flex: none; width: 46px; height: 100%;
  background: center/22px 22px no-repeat;
  box-shadow: inset -2px 0 0 #00000033;
}

.social-btn.discord { background: linear-gradient(180deg, #5a67d8, #414bb0); }
.social-btn.discord .social-ico {
  background-color: #4954c4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20.3 4.4A19.8 19.8 0 0 0 15.4 3l-.3.5c1.7.4 3.2 1.1 4.6 2a16.5 16.5 0 0 0-15.4 0c1.4-.9 3-1.6 4.6-2L8.6 3a19.8 19.8 0 0 0-5 1.4C.7 8.9-.1 13.2.3 17.5A19.9 19.9 0 0 0 6.4 21l1.2-1.9c-1-.4-2-.9-2.9-1.6l.7-.5a14.2 14.2 0 0 0 12.9 0l.7.5c-.9.7-1.9 1.2-2.9 1.6L17.6 21a19.9 19.9 0 0 0 6.1-3.5c.5-5-.8-9.2-3.4-13.1ZM8.2 15.3c-1.2 0-2.2-1.1-2.2-2.4S7 10.4 8.2 10.4s2.2 1.1 2.2 2.5-1 2.4-2.2 2.4Zm7.6 0c-1.2 0-2.2-1.1-2.2-2.4s1-2.5 2.2-2.5 2.2 1.1 2.2 2.5-1 2.4-2.2 2.4Z'/%3E%3C/svg%3E");
}

/* Branco, como manda a marca: o texto vira cinza-escuro (branco sobre branco não se lê) e o
   contorno de 4 pontos sai — ele existe para texto claro sobre fundo escuro. */
.social-btn.google {
  background: linear-gradient(180deg, #ffffff 0 60%, #ebebeb 60% 100%);
  color: #2f3033; text-shadow: none;
}
.social-btn.google .social-ico {
  background-color: transparent;
  box-shadow: inset -2px 0 0 #0000001a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.6 30.2.5 24 .5 14.6.5 6.5 5.9 2.6 13.7l7.8 6.1C12.3 14 17.6 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.5 24.5c0-1.6-.1-3.2-.4-4.7H24v9h12.7c-.5 3-2.2 5.5-4.7 7.2l7.5 5.8c4.4-4 6.9-10 6.9-17.3z'/%3E%3Cpath fill='%23FBBC05' d='M10.4 28.4c-.5-1.5-.8-3.1-.8-4.9s.3-3.4.8-4.9l-7.8-6.1C.9 15.9 0 19.8 0 23.5s.9 7.6 2.6 11l7.8-6.1z'/%3E%3Cpath fill='%2334A853' d='M24 47.5c6.2 0 11.5-2 15.3-5.6l-7.5-5.8c-2.1 1.4-4.8 2.2-7.8 2.2-6.4 0-11.7-4.5-13.6-10.4l-7.8 6.1C6.5 41.1 14.6 47.5 24 47.5z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------ confirme seu e-mail */
/*
   Tela inteira, e não um aviso: depois de criar conta é a ÚNICA coisa que dá para fazer, e um
   toast de três segundos em cima do formulário faria a pessoa tentar entrar de novo.
*/

.confirma { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.confirma-selo {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; color: var(--sobre-mad);
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha), 0 2px 0 var(--mad-luz2);
}
.confirma h2 {
  margin: 0; font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 16px; text-transform: uppercase; letter-spacing: 1px; color: #fff;
  text-shadow:
    -1px -1px 0 var(--mad-base), 1px -1px 0 var(--mad-base),
    -1px 1px 0 var(--mad-base), 1px 1px 0 var(--mad-base);
}
.confirma-texto { margin: 0; font-size: 13px; line-height: 1.6; color: var(--sobre-mad); }
.confirma-texto b { color: var(--rx-rosa); }
.confirma-ajuda { margin: 0; font-size: 11px; line-height: 1.5; color: var(--vao-dim); }
.confirma .login-acao { margin-top: 4px; }
.confirma .btn-apagado { width: 100%; height: 32px; }

/* ------------------------------------------------------ escolha do nick */

.login-aviso { margin: 0; font-size: 12px; line-height: 1.6; color: var(--sobre-mad-dim); text-align: center; }
.nick-estado { min-height: 15px; font-size: 11.5px; font-weight: 700; text-align: center; color: var(--vao-dim); }
.nick-estado.bom { color: var(--verde); }
.nick-estado.ruim { color: #ffd0c6; }

.erro { color: #ffd0c6; font-size: 11.5px; min-height: 15px; text-align: center; font-weight: 700; }
.erro.ok { color: var(--verde); }

/* Telas baixas: o banner encolhe para o botão de entrar não sair da vista. */
/* O banner encolhe quando o que está embaixo dele precisa de espaço.
   O recorte é sempre pela parte de BAIXO — é onde está o "Pokéidle.io", e perder a marca
   seria perder justamente o que identifica o jogo.

   `--arte-max` é o teto, e quem o aperta é o formulário de CRIAR CONTA (quatro campos em vez
   de dois, mais alto que a tela de um notebook). Sem isto os botões de provedor caíam abaixo
   da dobra e a pessoa tinha de rolar uma tela de login para achar o "Login com Google". */
.portal-arte { max-height: var(--arte-max, 40vh); }
.portal-arte img { max-height: var(--arte-max, 40vh); object-fit: cover; object-position: center 78%; }
.portal.compacto { --arte-max: 21vh; }
@media (max-height: 660px) { .portal { --arte-max: 24vh; } }
/* ------------------------------------------------------------------- app */

.app {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr) 306px;
  gap: 10px;
  padding: 10px;
}
/* O `gap` precisa passar do degrau de 6 px que os quadros projetam para baixo. */
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; }
.col.esq, .col.dir { overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.col.centro { overflow: hidden; }

/* Painel = a mesma tábua de madeira da barra do topo. */
.painel {
  background: linear-gradient(180deg,
    var(--mad-esc) 0 10px, var(--mad) 10px calc(100% - 14px),
    var(--mad-quente) calc(100% - 14px) calc(100% - 7px), var(--mad) calc(100% - 7px) 100%);
  border: 0;
  border-radius: 8px;
  padding: 13px 15px 15px;
  color: var(--sobre-mad);
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz),
    inset 0 0 0 6px var(--mad),
    0 4px 0 var(--mad-base),
    0 6px 0 var(--mad-linha);
  flex: none;
}
.painel h3 {
  margin: 0 0 10px;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: #fff;
  text-shadow:
    -2px -2px 0 var(--mad-base), 2px -2px 0 var(--mad-base),
    -2px 2px 0 var(--mad-base), 2px 2px 0 var(--mad-base);
  display: flex; justify-content: flex-start; align-items: center; gap: 8px;
}
.painel h3 .cnt { color: var(--sobre-mad-dim); font-weight: 700; letter-spacing: 0; text-transform: none; }
.cresce { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ------------------------------------------------- peças pixel reutilizáveis */

/* Vão recuado: filete escuro por fora e um fio claro embaixo, como se fosse
   um buraco na tábua. Serve para listas, barras, cartões e o chat. */
.vao {
  background: var(--vao);
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}

/* Campo de texto: um vão com o cursor dentro. */
/* `:not([type="checkbox"])` em todas as três regras abaixo: sem isso o interruptor herda o
   visual de CAMPO DE TEXTO (fundo do vão, padding lateral) e, pior, a regra de `:focus` —
   que tem especificidade maior que a do interruptor — troca a moldura dele pelo anel roxo
   de campo focado. Era o "fica só roxo em volta" do checkbox do Mapa. */
/* O chat NÃO está nesta lista (nem nas três do botão pixel logo abaixo): ele tem
   vocabulário próprio, no bloco "chat" mais adiante. Ver a nota lá. */
.mapa-barra input:not([type="checkbox"]), .filtro-linha input, .login-card input {
  background: var(--vao); color: var(--sobre-mad);
  border: 0; border-radius: 6px; padding: 0 11px;
  font-family: inherit; font-size: 12px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.mapa-barra input:not([type="checkbox"])::placeholder,
.filtro-linha input::placeholder, .login-card input::placeholder { color: var(--vao-dim); }
.mapa-barra input:not([type="checkbox"]):focus,
.filtro-linha input:focus, .login-card input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx), 0 1px 0 var(--mad-luz2);
}

/* Interruptor liga/desliga — vale para TODO checkbox do jogo, é o padrão da casa.
   O próprio `input` vira o trilho (`appearance: none`) e o `::before` é a manopla, então
   nada muda no HTML nem no JS: `:checked` continua sendo o estado de verdade e clicar no
   `<label>` continua alternando. Apagado = madeira; ligado = roxo, como nos botões. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none; cursor: pointer;
  width: 46px; height: 24px; margin: 0;
  border: 0; border-radius: 6px;
  background: var(--vao);
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 2px 0 var(--mad-base);
  transition: background .12s;
}
input[type="checkbox"]::before {
  content: "";
  position: absolute; top: 4px; left: 4px; width: 16px; height: 16px;
  border-radius: 4px;
  background: linear-gradient(180deg,
    var(--mad-luz2) 0 4px, var(--mad) 4px calc(100% - 3px), var(--mad-base) calc(100% - 3px) 100%);
  box-shadow: inset 0 0 0 2px var(--mad-linha);
  transition: left .12s, background .12s;
}
input[type="checkbox"]:checked { background: var(--rx-esc); }
input[type="checkbox"]:checked::before {
  left: 26px;
  background: linear-gradient(180deg,
    var(--rx-luz) 0 4px, var(--rx) 4px calc(100% - 3px), var(--rx-rosa) calc(100% - 3px) 100%);
}
input[type="checkbox"]:hover { filter: brightness(1.12); }
input[type="checkbox"]:active::before { top: 5px; }

/* Botão pixel pequeno: mesma receita do menu do topo, com a moldura mais fina
   (2 px de filete + 2 px de brilho + 1 px de madeira). */
.gaveta-abas button, .cm-acao, .cm-publicar, .auto-chip, .inv-item.bola,
.mapa-area, .mapa-zoom button, .hud-zoom button, .loja-linha button,
.centro-curar, .modal-topo button,
.mk-aba, .mk-acao, .mk-passo, .mk-cat, .confirmar-botoes button, .pl-mover, .pesca-sair,
.rk-aba, .boss-desafiar, #pvp-sair, .pvp-entrar, .loja-btn, .orbs-btn, .ir-centro, .loja-mini,
.centro-dpad button, .ob-rodape button, .wk-item, .cm-ficha, .fi-verdex {
  border: 0; border-radius: 6px; cursor: pointer;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  color: #fff;
  text-shadow:
    -1px -1px 0 var(--rx-esc), 1px -1px 0 var(--rx-esc),
    -1px 1px 0 var(--rx-esc), 1px 1px 0 var(--rx-esc);
  background: linear-gradient(180deg,
    var(--rx-luz) 0 6px,
    var(--rx-esc) 6px 13px,
    var(--rx) 13px calc(100% - 13px),
    var(--rx-clr) calc(100% - 13px) calc(100% - 7px),
    var(--rx-rosa) calc(100% - 7px) 100%);
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz2),
    inset 0 0 0 5px var(--mad),
    0 2px 0 var(--mad-base);
  transition: filter .1s, transform .06s, box-shadow .06s;
}
.gaveta-abas button:hover, .cm-acao:hover, .cm-publicar:hover, .auto-chip:hover, .inv-item.bola:hover, .mapa-area:hover, .mapa-zoom button:hover,
.hud-zoom button:hover:not(:disabled), .loja-linha button:hover,
.centro-curar:hover, .modal-topo button:hover,
.mk-aba:hover, .mk-acao:hover:not(:disabled), .mk-passo:hover, .mk-cat:hover,
.confirmar-botoes button:hover, .pl-mover:hover, .pesca-sair:hover, .rk-aba:hover, .boss-desafiar:hover:not(:disabled),
#pvp-sair:hover:not(:disabled), .pvp-entrar:hover:not(:disabled), .loja-btn:hover:not(:disabled), .orbs-btn:hover:not(:disabled), .ir-centro:hover, .loja-mini:hover,
.centro-dpad button:hover, .ob-rodape button:hover, .wk-item:hover, .cm-ficha:hover, .fi-verdex:hover {
  filter: brightness(1.12);
}
.gaveta-abas button:active, .cm-acao:active, .cm-publicar:active, .auto-chip:active, .inv-item.bola:active, .mapa-area:active, .mapa-zoom button:active,
.hud-zoom button:active:not(:disabled), .loja-linha button:active,
.centro-curar:active, .modal-topo button:active,
.mk-aba:active, .mk-acao:active:not(:disabled), .mk-passo:active, .mk-cat:active,
.confirmar-botoes button:active, .pl-mover:active, .pesca-sair:active, .rk-aba:active, .boss-desafiar:active:not(:disabled),
#pvp-sair:active:not(:disabled), .pvp-entrar:active:not(:disabled), .loja-btn:active:not(:disabled), .orbs-btn:active:not(:disabled), .ir-centro:active, .loja-mini:active,
.centro-dpad button:active, .ob-rodape button:active, .wk-item:active, .cm-ficha:active, .fi-verdex:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz2),
    inset 0 0 0 5px var(--mad);
}
.hud-zoom button:disabled, .mk-acao:disabled, .boss-desafiar:disabled {
  opacity: .45; cursor: default;
}

/* Estado "apagado" das abas e dos chips: madeira em vez de roxo. O roxo passa a
   significar "ligado", que é o que a `.on` marca. `.btn-apagado` força esse tom em
   botões que nunca são "ligado" — o Cancelar da confirmação, por exemplo. */
.gaveta-abas button:not(.on), .cm-acao:not(.on):not(#cm-anunciar), .auto-chip:not(.on), .mapa-area:not(.on),
.mk-aba:not(.on), .mk-cat:not(.on), .rk-aba:not(.on), .wk-item:not(.on),
.cm-ficha, .fi-verdex, button.btn-apagado {
  background: linear-gradient(180deg,
    var(--mad-luz2) 0 6px,
    var(--mad-esc) 6px 13px,
    var(--mad) 13px calc(100% - 10px),
    var(--mad-quente) calc(100% - 10px) 100%);
  color: var(--sobre-mad-dim);
  text-shadow:
    -1px -1px 0 var(--mad-base), 1px -1px 0 var(--mad-base),
    -1px 1px 0 var(--mad-base), 1px 1px 0 var(--mad-base);
}

/* --------------------------------------------------------------- treinador */

.tr-topo { display: flex; justify-content: space-between; align-items: baseline; }
.tr-nick {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .3px;
  text-shadow:
    -2px -2px 0 var(--mad-base), 2px -2px 0 var(--mad-base),
    -2px 2px 0 var(--mad-base), 2px 2px 0 var(--mad-base);
}
.tr-lv { font-size: 11.5px; color: var(--sobre-mad-dim); }
.tr-lv b { color: #fff; }
.barra {
  position: relative; height: 14px; border-radius: 5px; overflow: hidden;
  background: var(--vao); border: 0; margin: 6px 0;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.barra .fill { height: 100%; width: 0; transition: width .25s; }
.barra.xp .fill { background: linear-gradient(90deg, #4a8ab8, #6fc0f0); }
.barra.hp .fill { background: linear-gradient(90deg, #4e9c62, var(--verde)); }
.barra.hp.baixo .fill { background: linear-gradient(90deg, #a03428, var(--vermelho)); }
.barra span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 9.5px; color: #fff; text-shadow: 0 1px 2px #000;
}
/* A barra de PESCA, logo abaixo da de XP. É a segunda progressão do treinador — conta
   peixes, não experiência — e é clicável: abre o Pescador. Por isso é um <button>, e
   precisa desmanchar o visual de botão que o navegador dá de graça. */
.barra.pesca {
  display: block; width: 100%; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  transition: box-shadow .1s;
}
.barra.pesca .fill { background: linear-gradient(90deg, #2f6f8f, #58c8e8); }
.barra.pesca:hover { box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx), 0 1px 0 var(--mad-luz2); }
/* O selo do nível fica ancorado à esquerda, por cima do preenchimento. */
.barra.pesca .pesca-selo {
  position: absolute; left: 4px; top: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; gap: 3px;
  font-size: 9px; color: #fff; text-shadow: 0 1px 2px #000;
}
.barra.pesca .pesca-selo img { filter: drop-shadow(0 1px 1px #000); }
.barra.pesca .pesca-selo b { color: var(--rx-rosa); }

.tr-linha { display: flex; gap: 11px; align-items: center; }
.tr-dados { flex: 1; min-width: 0; }
.tr-retrato {
  flex: none; width: 54px; height: 54px; display: grid; place-items: center;
  background: var(--vao); border: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
/* As duas moedas dividem a linha meio a meio. `minmax(0, 1fr)` (e não `1fr`) é o que impede
   um saldo de sete dígitos de empurrar a coluna para fora do painel — foi assim que o
   contador de online vazava antes. */
/* Três moedas desde que o diamante voltou, e a coluna do painel é estreita.
   `auto-fit` em vez de três colunas fixas: com três fixas, um saldo de quatro dígitos já
   estourava a caixa e o número saía como "1...." — pior que quebrar a linha, porque o
   jogador deixa de saber quanto tem. Assim cabem três quando dá e duas + uma quando não dá. */
.tr-moedas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 4px; margin-top: 6px;
}
.tr-moeda {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  padding: 5px 6px; border-radius: 5px; background: var(--vao);
  font-size: 12px; color: var(--vao-dim);
}
.tr-moeda b {
  color: #fff; font-size: 12.5px;
  /* o número é o que pode crescer: ele encolhe com reticências em vez de estourar */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Cada moeda com a cor do próprio sprite: ouro âmbar, diamante ciano, gema rosa. É o que
   deixa os três contadores distinguíveis de relance, que era o problema de ter dois orbes
   azuis idênticos lado a lado. */
#tr-diamantes { color: #7fd8ff; }
#tr-gemas { color: var(--rx-rosa); }
.tr-moeda img { flex: none; image-rendering: pixelated; }

/* Uma informação por linha, cada uma no seu vão. */
.tr-info {
  display: flex; align-items: center; gap: 6px;
  margin-top: 5px; padding: 4px 9px; border-radius: 5px; background: var(--vao);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 11px; font-weight: 700; color: var(--vao-dim);
}
.tr-info b { color: #fff; font-size: 12px; }
.tr-info img { flex: none; }

/* ícone de espécie recortado do atlas de marcadores do mapa-múndi */
.ico-poke {
  display: inline-block; flex: none;
  background-image: url('/assets/site/assets/maps/marker-atlas.png');
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------------- pokémon */

.ativo-card {
  background: var(--vao); border: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
  padding: 9px; display: flex; gap: 10px; align-items: center;
}
.ativo-card.vazio { justify-content: center; color: var(--vao-dim); font-size: 11.5px; padding: 16px; }
.ativo-card canvas { flex: none; }
.ativo-info { flex: 1; min-width: 0; }
.ativo-nome { font-size: 13px; font-weight: 700; color: var(--sobre-mad); }
.ativo-sub { font-size: 10.5px; color: var(--vao-dim); display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

/* selo de tipo, nas cores clássicas */
.tipo {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 1px #0007; background: #6a6a6a;
}
.tipo.NORMAL{background:#9a9a72} .tipo.FIRE{background:#e8622a} .tipo.WATER{background:#4a86e8}
.tipo.GRASS{background:#5aa93e} .tipo.ELECTRIC{background:#dcb414} .tipo.ICE{background:#5cc6d0}
.tipo.FIGHTING{background:#a8321e} .tipo.POISON{background:#8a3a92} .tipo.GROUND{background:#c4a352}
.tipo.FLYING{background:#7f9ce0} .tipo.PSYCHIC{background:#e04a7c}
.tipo.BUG{background:#93a81a} .tipo.ROCK{background:#a48f30} .tipo.GHOST{background:#5c4a90}
.tipo.DRAGON{background:#6a3ce0} .tipo.DARK{background:#5a4436} .tipo.STEEL{background:#8f8fa4}
.tipo.FAIRY{background:#dc84c4}

.vazio-msg { font-size: 11px; color: var(--sobre-mad-dim); padding: 6px 2px; }
.lista-poke { display: flex; flex-direction: column; gap: 5px; }
.lista-poke.depot { max-height: 190px; overflow-y: auto; }
.poke-linha {
  display: flex; gap: 8px; align-items: center; cursor: pointer;
  background: var(--vao); border: 0; border-radius: 6px; padding: 6px 8px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
  transition: background .1s, box-shadow .1s;
}
.poke-linha:hover { background: var(--vao2); }
.poke-linha.ativo {
  background: var(--vao2);
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx), 0 1px 0 var(--mad-luz2);
}
.poke-linha canvas { flex: none; }
.poke-linha .pl-info { flex: 1; min-width: 0; }
.poke-linha .pl-nome { font-size: 11.5px; color: var(--sobre-mad); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poke-linha .pl-lv { font-size: 10px; color: var(--rx-rosa); font-weight: 700; }
/* Move entre Equipe e Depot: ▼ guarda, ▲ traz de volta. Fica apagado até passar o mouse
   na linha, para não competir com o nome do pokémon numa coluna estreita. */
.pl-mover {
  flex: none; width: 26px; height: 26px; font-size: 11px; line-height: 1;
  display: grid; place-items: center; opacity: 0; transition: opacity .1s;
}
.poke-linha:hover .pl-mover, .pl-mover:focus-visible { opacity: 1; }
.mini-hp { height: 5px; border-radius: 2px; background: #1e1219; overflow: hidden; margin-top: 3px; }
.mini-hp i { display: block; height: 100%; background: var(--verde); }
.mini-hp.baixo i { background: var(--vermelho); }

/* ---------------------------------------------------------------- gavetas */
/* Depot, bolsa e o que mais vier: uma seção de cada vez, escolhida pelos ícones. */

.gavetas { display: flex; flex-direction: column; min-height: 0; }
.gaveta-abas { display: flex; gap: 7px; }
.gaveta-abas button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 8px; font-size: 12px;
}
.gaveta { margin-top: 12px; min-height: 0; display: flex; flex-direction: column; }
.gaveta h3 { margin-top: 0; }

.inv-linha { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.inv-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; max-height: 150px; overflow-y: auto; }
.inv-item {
  background: var(--vao); border: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
  padding: 6px 4px; text-align: center; font-size: 10px; color: var(--vao-dim);
}
.inv-item img { display: block; margin: 0 auto 3px; max-width: 28px; max-height: 28px; }
.inv-item b { color: #fff; display: block; font-size: 11px; }
/* A bola é clicável, então vira botão roxo (o bloco compartilhado cuida do resto). */
.inv-item.bola { padding: 7px 5px; color: #fff; }
.inv-item.bola b { text-shadow: inherit; }
.inv-item.bola img { max-width: 32px; max-height: 32px; }

/* ------------------------------------------------------------- centro/jogo */

/* Barra do topo no estilo do painel "Information" do Bombcrypto: tábua de madeira com
   filete escuro por fora, brilho claro logo dentro e um degrau embaixo. Tudo em box-shadow
   `inset` — a primeira sombra fica por cima, então os anéis se empilham de fora para dentro. */
/* UMA linha só, sempre. Com `flex-wrap` o oitavo botão caía sozinho para a segunda fileira e
   a moldura ficava com um degrau feio; agora os botões encolhem juntos até caber. O piso de
   largura fica no `min-width` do botão — abaixo dele, o mobile assume (ver o @media). */
.menu-topo {
  display: flex; gap: 6px; flex-wrap: nowrap; justify-content: center;
  background: linear-gradient(180deg,
    var(--mad-esc) 0 10px, var(--mad) 10px calc(100% - 16px),
    var(--mad-quente) calc(100% - 16px) calc(100% - 8px), var(--mad) calc(100% - 8px) 100%);
  border: 0; border-radius: 8px;
  padding: 10px 10px; flex: none;
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz),
    inset 0 0 0 6px var(--mad),
    0 4px 0 var(--mad-base),
    0 6px 0 var(--mad-linha);
}

/* Botão roxo com moldura de madeira. As faixas do miolo saem em px (não em %) para o
   desenho não esticar quando a altura muda no celular.
   O `flex-basis` de 160 px é o que decide a quebra: na coluna do centro (~760 px úteis)
   entram quatro por linha, e os três restantes vão para a segunda, quase da mesma largura. */
.menu-topo button {
  /* `1 1 0` com `min-width: 0`: todos encolhem na mesma proporção em vez de estourar a linha */
  flex: 1 1 auto; min-width: 0; max-width: 190px; height: 62px;
  /* O `gap` tem de descontar a plaquinha do ícone: ela é `box-shadow` com 6 px de spread, que
     não ocupa espaço no layout mas ocupa na tela. Com 8 px de gap sobravam 2 px visíveis e o
     texto encostava no desenho. */
  display: flex; align-items: center; justify-content: center; gap: 14px;
  border: 0; border-radius: 7px; padding: 0 10px; cursor: pointer;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 14px; font-weight: 700; line-height: 1.1;
  white-space: nowrap; overflow: hidden;
  color: #fff;
  /* contorno de 4 pontos, como o do jogo original */
  text-shadow:
    -2px -2px 0 var(--rx-esc), 2px -2px 0 var(--rx-esc),
    -2px 2px 0 var(--rx-esc), 2px 2px 0 var(--rx-esc);
  background: linear-gradient(180deg,
    var(--rx-luz) 0 10px,
    var(--rx-esc) 10px 22px,
    var(--rx) 22px calc(100% - 22px),
    var(--rx-clr) calc(100% - 22px) calc(100% - 12px),
    var(--rx-rosa) calc(100% - 12px) 100%);
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz2),
    inset 0 0 0 6px var(--mad),
    inset 0 0 0 8px var(--mad-linha),
    0 3px 0 var(--mad-base);
  transition: filter .1s, transform .06s, box-shadow .06s;
}
.menu-topo button:hover { filter: brightness(1.12); }
.menu-topo button:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz2),
    inset 0 0 0 6px var(--mad),
    inset 0 0 0 8px var(--mad-linha);
}
.menu-topo button span { position: relative; }

/* Plaquinha atrás do ícone. O anel vem de `box-shadow` com spread: não ocupa espaço no
   layout, então não bagunça a conta de `background-position` do recorte do atlas.
   Só `background-color` — o atalho `background` apagaria a imagem do atlas. */
.menu-topo button > :first-child {
  flex: none;
  border-radius: 5px;
  background-color: #a355c4;
  box-shadow: 0 0 0 4px #a355c4, 0 0 0 6px #6d2f96;
}

.palco-moldura {
  background: linear-gradient(180deg,
    var(--mad-esc) 0 10px, var(--mad) 10px calc(100% - 14px),
    var(--mad-quente) calc(100% - 14px) calc(100% - 7px), var(--mad) calc(100% - 7px) 100%);
  border: 0; border-radius: 8px;
  padding: 10px; flex: 1; min-height: 0; display: flex;
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz),
    inset 0 0 0 6px var(--mad),
    0 4px 0 var(--mad-base),
    0 6px 0 var(--mad-linha);
}
.palco {
  position: relative; flex: 1; min-height: 0;
  border-radius: 5px; overflow: hidden; background: #05070a;
  border: 0;
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 40px #000a;
}
.palco canvas { display: block; width: 100%; height: 100%; }

.hud-hunt {
  position: absolute; top: 10px; left: 10px;
  background: var(--vao); border: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 2px 0 var(--mad-base);
  padding: 6px 12px; font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 11.5px; font-weight: 700; color: #fff;
  letter-spacing: .3px; pointer-events: none;
}
/* Lupas da cena de batalha, no canto de cima à direita do palco. */
/* Zoom no canto de BAIXO à direita. Em cima ele brigava com o botão de sair da cena
   ("Ir para o Centro Pokémon", "Guardar a vara", "Abandonar arena") — os dois ficavam
   empilhados no mesmo canto. Agora o topo-direito é sempre "sair daqui" e a base-direita é
   sempre o zoom. Fica lado a lado em vez de empilhado: ocupa menos altura sobre a cena. */
.hud-zoom {
  position: absolute; bottom: 10px; right: 10px; z-index: 3;
  display: flex; gap: 6px;
}
.hud-zoom button { display: grid; place-items: center; width: 36px; height: 36px; }

/* ----------------------------------------------- derrotados no chão
   Canto de baixo à esquerda do palco. Some sozinho quando não há corpo nenhum, então o
   log de batalha ocupa a largura inteira de volta. */
.caidos {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  width: 216px;
  background: linear-gradient(180deg,
    var(--mad-esc) 0 8px, var(--mad) 8px calc(100% - 8px), var(--mad-quente) calc(100% - 8px) 100%);
  border-radius: 7px; padding: 8px;
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz),
    0 3px 0 var(--mad-base);
}
.caidos-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; }
.caidos-titulo {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: #fff;
  text-shadow:
    -1px -1px 0 var(--mad-base), 1px -1px 0 var(--mad-base),
    -1px 1px 0 var(--mad-base), 1px 1px 0 var(--mad-base);
}
.caidos-bolas { display: flex; gap: 3px; }
.caidos-bola {
  width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 5px; cursor: pointer;
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha);
  opacity: .55; transition: opacity .1s, box-shadow .1s;
}
.caidos-bola:hover { opacity: .9; }
.caidos-bola.on { opacity: 1; box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx); }

.caidos-lista { display: flex; flex-direction: column; gap: 4px; max-height: 168px; overflow-y: auto; }
.caido {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 4px 6px;
  border: 0; border-radius: 5px; cursor: pointer; text-align: left;
  background: var(--vao); color: var(--sobre-mad);
  box-shadow: inset 0 0 0 2px var(--mad-linha);
  font-family: inherit; transition: background .1s, box-shadow .1s;
}
.caido:hover { background: var(--vao2); box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx); }
.caido:active { transform: translateY(1px); }
.caido canvas { flex: none; }
.caido-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.caido-nome {
  font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.caido-nome b { color: var(--rx-rosa); }
/* quanto falta para o corpo sumir */
.caido-tempo { display: block; height: 3px; border-radius: 2px; background: #1e1219; overflow: hidden; }
.caido-tempo i { display: block; height: 100%; background: var(--rx); transition: width .25s linear; }
.caido.acabando .caido-tempo i { background: var(--vermelho); }

/* ------------------------------------------------------- espera da pesca
   Barra de 12 s até o próximo peixe morder, centrada no alto do palco. É a mesma leitura
   da `fishingWave` deles: rótulo, trilho que enche e a contagem em décimos ao lado. */
.pesca-espera {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(180deg,
    var(--mad-esc) 0 8px, var(--mad) 8px calc(100% - 8px), var(--mad-quente) calc(100% - 8px) 100%);
  border-radius: 7px; padding: 7px 12px;
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz),
    0 3px 0 var(--mad-base);
}
.pe-rotulo, .pe-conta {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 11px; color: #fff; white-space: nowrap;
  text-shadow:
    -1px -1px 0 var(--mad-base), 1px -1px 0 var(--mad-base),
    -1px 1px 0 var(--mad-base), 1px 1px 0 var(--mad-base);
}
.pe-conta { min-width: 42px; text-align: right; color: var(--rx-rosa); }
.pe-trilho {
  width: 190px; height: 12px; border-radius: 5px; overflow: hidden;
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha);
}
.pe-trilho i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f6f8f, #58c8e8); }

/* Guardar a vara: canto de baixo à direita do palco, longe do painel de caídos. */
/* "Guardar a vara" e "Abandonar arena" moram no MESMO canto que o "Ir para o Centro
   Pokémon": os três são o botão de sair da cena e nunca aparecem ao mesmo tempo. */
.pesca-sair {
  position: absolute; right: 10px; top: 10px; z-index: 3;
  height: 34px; padding: 0 14px; font-size: 11.5px;
}

.hud-log {
  position: absolute; bottom: 8px; left: 9px; right: 94px;
  display: flex; flex-direction: column-reverse; gap: 4px;
  max-height: 92px; overflow: hidden; pointer-events: none;
  transition: left .15s;
}
/* com o painel de caídos aberto, o log sai de baixo dele */
.caidos:not(.hidden) ~ .hud-log { left: 238px; }
.hud-log div {
  font-size: 10.5px; color: #fff; font-weight: 700;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  text-shadow:
    -1px -1px 0 #1c1116, 1px -1px 0 #1c1116,
    -1px 1px 0 #1c1116, 1px 1px 0 #1c1116;
  background: #33202bcc; border-radius: 5px; padding: 3px 9px; align-self: flex-start;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
}

/* ------------------------------------------------------- Centro Pokémon */

/* O botão de curar mora DENTRO da cena, grudado na cabeça da Enfermeira Joy — quem o
   posiciona é o `seguirEnfermeira`, a cada quadro, por `transform`. `left/top: 0` e o resto
   no transform de propósito: mexer em `left` a 60 fps refaz o layout da página inteira, e
   `transform` só recompõe a camada. A altura é fixa (34) porque o balão de fala da Joy sobe
   exatamente esse degrau para não cair atrás dele — ver ALTURA_BOTAO_CURAR no campo.mjs. */
.centro-curar {
  position: absolute; left: 0; top: 0; z-index: 4;
  height: 34px; padding: 0 12px; font-size: 11.5px; white-space: nowrap;
}
/* Fora do quadro: a enfermeira saiu da tela, então o botão não tem em que se pendurar. */
.centro-curar.fora { display: none; }

/* A barra da praça — vão escuro, do mesmo vocabulário do chat e das listas. Fica rente ao pé
   do palco para não disputar espaço com o boneco, que anda pelo meio da tela. */
.centro-barra {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  height: 28px; padding: 0 12px; border-radius: 6px;
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
  font-size: 11px; color: var(--vao-dim); white-space: nowrap; pointer-events: none;
}
.cb-teclas { display: flex; align-items: center; gap: 6px; }
.cb-teclas b {
  color: var(--sobre-mad); letter-spacing: 1px;
  text-shadow: -1px -1px 0 var(--mad-base), 1px -1px 0 var(--mad-base),
    -1px 1px 0 var(--mad-base), 1px 1px 0 var(--mad-base);
}
.cb-teclas i { font-style: normal; }
.cb-quantos { color: var(--sobre-mad); }
.cb-quantos::before {
  content: ''; display: inline-block; width: 2px; height: 12px; margin-right: 10px;
  background: var(--mad-linha); vertical-align: -2px;
}
.cb-sala:empty { display: none; }
.cb-sala { color: var(--rx-rosa); }

/* O direcional do toque. Fica escondido no desktop e só aparece em tela SEM mouse — quem tem
   teclado não precisa dele ocupando o canto do palco. A regra que o liga está no bloco mobile,
   lá embaixo. Os botões são os mesmos roxos do resto da interface, só que quadrados. */
.centro-dpad {
  position: absolute; right: 12px; bottom: 46px; z-index: 4;
  display: none; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px);
  gap: 4px; touch-action: none;
}
.centro-dpad button {
  width: 44px; height: 44px; padding: 0; font-size: 15px; line-height: 1;
  display: grid; place-items: center;
}
.centro-dpad button[data-dir="1"] { grid-area: 1 / 2; }
.centro-dpad button[data-dir="4"] { grid-area: 2 / 1; }
.centro-dpad button[data-dir="3"] { grid-area: 2 / 2; }
.centro-dpad button[data-dir="2"] { grid-area: 2 / 3; }

/* --------------------------------------------------------------- direita */

.auto-linha {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--sobre-mad); cursor: pointer; padding: 3px 0;
}
.auto-opcoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px 24px; }
.auto-opcoes:empty { margin-bottom: 0; }
.auto-chip {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  height: 30px; padding: 0 9px;
}
.auto-chip img { max-width: 18px; max-height: 18px; image-rendering: pixelated; }
.auto-chip .q { font-weight: 700; }
/* Escolhido mas SEM estoque: continua na fila (a preferência é do jogador) e o chip avisa
   que aquele item acabou, em vez de sumir e parecer que o clique se perdeu. */
.auto-chip.vazio { opacity: .5; }
.auto-chip.vazio .q { color: var(--vermelho); }

/* O limiar de HP: um rótulo curto e os três degraus, na mesma linha dos chips. */
.auto-limiar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 6px 24px; }
.auto-rotulo { font-size: 10.5px; color: var(--sobre-mad-dim); }

/* O selo VIP. Azul — a única coisa azul do jogo fora do chat, e é de propósito: ele marca o
   que é PAGO e precisa se distinguir do roxo (que aqui significa "ligado") e do rosa (que
   significa "número em destaque"). O mesmo tom do cargo VIP do chat. */
.selo-vip {
  display: inline-flex; align-items: center; border-radius: 4px;
  background: linear-gradient(180deg, #9fe4ff 0 4px, #2f8fc4 4px 100%);
  color: #06202e; padding: 0 6px; line-height: 17px;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-weight: 700; font-size: 9.5px; letter-spacing: 1px;
}
.auto-linha .selo-vip { margin-left: auto; }

/* ------------------------------------------------ VIP e boosts ativos no HUD */
.tr-ativos { display: grid; gap: 4px; margin-top: 5px; }
.tr-ativos:empty { margin-top: 0; }
.tr-ativo {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 5px; background: var(--vao);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 10.5px; font-weight: 700; color: var(--sobre-mad-dim);
}
.tr-ativo img { flex: none; image-rendering: pixelated; }
.tr-ativo-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O contador encosta na direita — é a coluna que se lê de cima a baixo quando há três. */
.tr-ativo-tempo { margin-left: auto; flex: none; color: var(--rx-rosa); }
.tr-ativo.vip { box-shadow: inset 0 0 0 2px #2f8fc4; }
.tr-ativo.vip .tr-ativo-tempo { color: #7fd8ff; }

/* ------------------------------------------------------------------ chat
   A tela de vidro encaixada na tábua. É o único lugar do jogo fora do madeira/roxo — o
   porquê está na nota das variáveis `--ch-*`, no `:root`.

   Duas quebras de regra do DESIGN.md moram aqui, e só aqui:

   · `border-image` de verdade, no lugar da moldura por `box-shadow: inset` empilhada. O
     filete dourado do chat é um GRADIENTE vertical (claro em cima, escuro embaixo, como
     metal pegando luz), e `box-shadow` só sabe desenhar anel de cor chapada.
   · fonte que não é Tahoma. O chat é o único texto do jogo que é CONTEÚDO e não rótulo:
     rola sozinho, vem de outra pessoa e se lê em bloco. Tahoma bold com contorno de 4
     pontos, que é o que faz um botão saltar, vira ruído quando são vinte linhas seguidas. */

.chat { min-height: 300px; }

/* --- a barra de canais --- */

.chat-abas { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.chat-abas button[data-canal] {
  flex: 1; min-width: 0; height: 28px; padding: 0 2px;
  border: 1px solid var(--ch-borda);
  border-color: var(--ch-borda-luz) var(--ch-borda) var(--ch-borda-esc);
  border-radius: 0; cursor: pointer;
  /* Cinzel é uma capitular romana: desenha largo e ignora o `lowercase`. "Comércio" mal
     cabe na terça parte da barra, então aqui ela anda em 10px e sem `letter-spacing`. */
  font-family: var(--ch-fonte-aba); font-size: 10px; font-weight: 700; letter-spacing: 0;
  color: var(--ch-apagado);
  background: linear-gradient(180deg, #1e283580, #0b111a99);
  box-shadow: inset 0 1px 0 #ffffff0d, inset 0 -1px 2px #0000004d;
  transition: color .12s, border-color .12s, filter .12s;
}
.chat-abas button[data-canal]:hover { color: #cfd8e2; filter: brightness(1.08); }
/* Ligada = o fio dourado embaixo. Não é sublinhado: é a aba acendendo, como uma pasta
   de arquivo puxada para a frente. */
.chat-abas button[data-canal].on {
  color: var(--ch-aceso);
  background: linear-gradient(180deg, #785c264d, #42321657);
  border-color: #f0d896 var(--ch-ouro) #8a662c;
  box-shadow: inset 0 -3px 0 var(--ch-ouro-luz), inset 0 1px 0 #ffffff1f, 0 0 8px #e8cd8d4d;
}

/* --- o vidro --- */

/* Posicionado porque a pílula de novas mensagens flutua sobre a lista. */
.chat-vao {
  position: relative; flex: 1; min-height: 150px; display: flex; overflow: hidden;
  border: 2px solid transparent;
  border-image: linear-gradient(180deg,
    var(--ch-ouro-luz), var(--ch-ouro) 40%, var(--ch-ouro-med) 70%, var(--ch-ouro-esc)) 1;
  /* Os dois brilhos de canto (teal em cima à direita, dourado embaixo à esquerda) são o que
     tira o fundo do "preto chapado" sem clarear o suficiente para atrapalhar o texto. */
  background:
    radial-gradient(120% 160% at 88% -30%, #0ac8b914, #0000 55%),
    radial-gradient(120% 160% at 8% 130%, #e8cd8d12, #0000 58%),
    linear-gradient(180deg, var(--ch-fundo), var(--ch-fundo2));
  box-shadow: inset 0 1px 0 #ffffff0f, 0 2px 0 var(--mad-luz2);
}

.chat-msgs {
  flex: 1; min-width: 0; overflow-y: auto;
  padding: 7px 9px; display: flex; flex-direction: column; gap: 3px;
}
/* Com pouca conversa, a lista cola embaixo em vez de deixar um vazio de 400 px sob as três
   primeiras linhas. É `margin-top: auto` no primeiro filho, e não `justify-content: flex-end`
   no contêiner: aquele empurra o conteúdo para FORA do topo rolável quando a lista enche, e
   as mensagens antigas ficam inalcançáveis. */
.chat-msgs > .chat-msg:first-child { margin-top: auto; }
/* A barra de rolagem do chat não é a de madeira do resto do jogo — dentro do vidro ela
   apareceria como um risco claro atravessando o texto. */
.chat-msgs { scrollbar-color: #ffffff2b transparent; }
.chat-msgs::-webkit-scrollbar { width: 7px; }
.chat-msgs::-webkit-scrollbar-thumb { background: #ffffff1f; border-radius: 4px; }
.chat-msgs::-webkit-scrollbar-thumb:hover { background: #c8aa6e73; }

/* --- a linha de fala --- */

.chat-msg {
  font-family: var(--ch-fonte); font-size: 13px; font-weight: 700; line-height: 1.35;
  color: var(--ch-fala); word-break: break-word;
}
/* O horário é a única coisa da linha que NÃO se lê: está ali para consultar depois ("isso
   foi antes ou depois de eu entrar?"). Por isso o mesmo amarelo, mas rebaixado. */
.chat-msg .m-hora { color: var(--ch-hora); opacity: .55; font-weight: 600; }
.chat-msg .m-de { color: var(--ch-fala); font-weight: 700; }
/* O nível do lado do nome: informação de contexto, não parte do nome. */
.chat-msg .m-nv { opacity: .6; font-weight: 600; }

/* Os cargos. Só o NICK muda de cor — pintar a fala inteira de azul faria o VIP dominar a
   leitura da lista toda, que é o oposto do que se quer: o destaque é de quem fala, não do
   que foi dito. A exceção é o admin, que fala em vermelho de propósito — quando a
   administração escreve no canal do mundo, a mensagem É o aviso. */
.chat-msg.vip   .m-de { color: var(--ch-vip);   font-weight: 800; text-shadow: 0 0 6px #7fd4ffd9, 0 0 2px #7fd4ff; }
.chat-msg.tutor .m-de { color: var(--ch-tutor); font-weight: 800; text-shadow: 0 0 6px #4dff88d9, 0 0 2px #4dff88; }
.chat-msg.admin .m-de { color: var(--ch-admin); font-weight: 800; text-shadow: 0 0 7px #ff4d4de6, 0 0 3px #ff4d4d; }
.chat-msg.admin .m-txt { color: var(--ch-admin); text-shadow: 0 0 6px #ff4d4dd9, 0 0 2px #ff4d4de6; }

/* O selo do cargo (👑 💎 🎓) antes do nick. Emoji não herda cor, então o brilho do nick
   passa longe dele: o `drop-shadow` é o que costura os dois. */
.chat-msg .m-selo { margin-right: 2px; font-size: 11px; }
.chat-msg.vip   .m-selo { filter: drop-shadow(0 0 3px #7fd4ffcc); }
.chat-msg.tutor .m-selo { filter: drop-shadow(0 0 3px #4dff88cc); }
.chat-msg.admin .m-selo { filter: drop-shadow(0 0 3px #ff4d4dcc); }

/* Emoji dentro da fala: um tico maior que a letra, alinhado pela base. */
.chat-msg .m-emoji { font-size: 15px; line-height: 1; vertical-align: -2px; }

/* Emoji VIP: figura de 28–41 px encolhida para caber na linha. `image-rendering: auto`
   contraria a regra global de `pixelated` de propósito — estes PNGs são desenho suave, e
   ampliar a vizinhança seca deixa a borda serrilhada. */
.chat-msg .m-vip {
  width: 20px; height: 20px; object-fit: contain;
  vertical-align: -5px; image-rendering: auto;
}

/* --- a pílula de novas mensagens --- */

/* Só aparece quando o jogador subiu a rolagem para ler algo. Sem ela, a lista ou puxa o
   jogador para baixo no meio da leitura (irritante) ou o deixa sem saber que chegou
   mensagem (pior). */
.chat-novas {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 4px 12px; border: 1px solid var(--ch-bronze); border-radius: 999px; cursor: pointer;
  font-family: var(--ch-fonte); font-size: 11px; font-weight: 800; white-space: nowrap;
  color: var(--ch-hora); background: #080c14f2;
  box-shadow: 0 2px 10px #00000080, 0 0 8px #c8aa6e59;
}
.chat-novas:hover { color: #fff; border-color: var(--ch-hora); }

.chat-vazio {
  margin: auto; padding: 10px 4px; text-align: center;
  font-family: var(--ch-fonte); font-size: 12px; font-style: italic; color: var(--ch-vazio);
}

/* --- o teclado de emoji --- */

.chat-emojis {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  /* Mais alto que as 132 px da referência: o chat dela flutua numa caixinha de 236 px, e o
     nosso mora numa coluna que vai do topo ao pé da tela. Sobra altura, e cada fileira a
     mais é um emoji a menos de rolagem até a seção do VIP. */
  max-height: 190px; overflow-y: auto; padding: 6px; margin-top: 6px;
  border: 1px solid var(--ch-ouro-esc); border-radius: 6px;
  background: linear-gradient(180deg, #081016, #060b12);
  box-shadow: inset 0 1px 0 #c8aa6e2e, inset 0 4px 8px #00000059;
  scrollbar-color: #ffffff2b transparent;
}
.chat-emojis::-webkit-scrollbar { width: 7px; }
.chat-emojis::-webkit-scrollbar-thumb { background: #ffffff1f; border-radius: 4px; }
.chat-emoji {
  border: 0; border-radius: 5px; background: none; cursor: pointer;
  padding: 3px 0; font-size: 17px; line-height: 1.3;
}
.chat-emoji:hover { background: #c8aa6e29; }
/* O cabeçalho de seção ocupa a faixa inteira do grid. */
.chat-emojis-sec {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 6px;
  margin: 5px 2px 1px; padding-top: 5px; border-top: 1px solid #00000073;
  font-family: var(--ch-fonte); font-size: 11px; font-weight: 800; letter-spacing: .03em;
  color: #e2c983;
  box-shadow: inset 0 1px 0 #c8aa6e29;
}
.chat-emojis-sec .ok { color: #7fe6dd; font-weight: 600; }
.chat-emojis-sec .off { color: #8a93a0; font-weight: 600; }
/* Emoji de VIP: visível para todo mundo, clicável só para quem assina. Mostrar trancado
   em vez de esconder é o ponto — quem não é VIP precisa VER o que está perdendo. */
.chat-emoji.vip { position: relative; border: 1px solid #c8aa6e40; padding: 2px 0; }
.chat-emoji.vip img {
  width: 22px; height: 22px; object-fit: contain; display: block; margin: 0 auto;
  image-rendering: auto;
}
.chat-emoji.vip:hover { background: #c8aa6e24; border-color: var(--ch-bronze); }
.chat-emoji.vip.travado { cursor: not-allowed; border-color: #ffffff14; }
/* O cinza vai na IMAGEM, não no botão: no botão inteiro o cadeado saía cinza também. */
.chat-emoji.vip.travado img { filter: grayscale(1) brightness(.55); }
.chat-emoji.vip.travado::after {
  content: "🔒"; position: absolute; right: -1px; bottom: -2px; font-size: 10px;
}

/* --- a linha de digitar --- */

.chat-entrada { display: flex; align-items: stretch; gap: 5px; margin-top: 7px; }
.chat-emoji-btn {
  flex: none; width: 32px; padding: 0; cursor: pointer;
  border: 1px solid transparent; border-radius: 6px; background: none;
  font-size: 16px; line-height: 1; filter: grayscale(.3);
  transition: filter .12s, background .12s, border-color .12s;
}
.chat-emoji-btn:hover, .chat-emoji-btn.on {
  filter: none; background: #c8aa6e1a; border-color: #c8aa6e80;
}
.chat-entrada input {
  flex: 1; min-width: 0; height: 32px; padding: 0 9px;
  border: 1px solid #c8aa6e4d; border-radius: 6px;
  font-family: var(--ch-fonte); font-size: 13px; color: #eaf0f6;
  /* OPACO, ao contrário do original: lá o campo fica dentro da caixa escura do chat e o
     alfa dele só afunda um pouco o fundo. Aqui a linha de digitar mora sobre a TÁBUA, e
     qualquer transparência puxa o marrom para dentro do campo — vira um vão de madeira
     mal-acabado no lugar de vidro. */
  background: linear-gradient(180deg, #070d14, #0b131c);
  box-shadow: inset 0 2px 5px #00000080;
  transition: border-color .15s, box-shadow .15s;
}
.chat-entrada input::placeholder { color: #7c8794; }
/* Foco em teal, e não no dourado da moldura: a diferença entre "o campo está ali" e "o
   campo está ativo" precisa ser de MATIZ para se ver de canto de olho. */
.chat-entrada input:focus {
  outline: none; border-color: var(--ch-teal);
  box-shadow: inset 0 2px 5px #00000080, 0 0 10px #0ac8b94d;
}
/* Pelo id, e não por `.chat-entrada button`: o botão de emoji também é um `button` desta
   linha, e o seletor de elemento passaria por cima da regra de classe dele (mesma
   quantidade de classes, mais um elemento = mais específico). */
#chat-enviar {
  flex: none; padding: 0 13px; cursor: pointer;
  border: 1px solid var(--ch-ouro-esc); border-radius: 6px;
  font-family: var(--ch-fonte); font-size: 14px; font-weight: 600; color: var(--ch-aceso);
  text-shadow: 0 1px 1px #00000080;
  background: linear-gradient(180deg, #2e4257, #1b2a3a 50%, #141f2c);
  box-shadow: inset 0 1px 0 #ffffff24, inset 0 -2px 2px #0006, 0 2px 4px #0006;
  transition: filter .12s, border-color .12s;
}
#chat-enviar:hover { filter: brightness(1.1); border-color: var(--ch-bronze); }

/* ---------------------------------------------------------------- modal */

.modal { position: fixed; inset: 0; background: #1a0f16d9; display: grid; place-items: center; z-index: 40; padding: 20px; }
.modal-caixa {
  background: linear-gradient(180deg,
    var(--mad-esc) 0 12px, var(--mad) 12px calc(100% - 16px),
    var(--mad-quente) calc(100% - 16px) calc(100% - 8px), var(--mad) calc(100% - 8px) 100%);
  border: 0; border-radius: 9px; color: var(--sobre-mad);
  /* `relative` por causa da folha de anunciar do Mercado Global, que cobre o modal inteiro. */
  position: relative;
  width: min(960px, 96vw); max-height: 88vh; display: flex; flex-direction: column;
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz),
    inset 0 0 0 6px var(--mad),
    0 6px 0 var(--mad-base),
    0 24px 70px #000c;
}
/* Modal QUADRADO. Vale para as telas que são uma grade de cards (a vitrine do Mercado): numa
   caixa larga e baixa a grade vira uma tira de duas fileiras, e a pessoa rola sem parar para
   ver o que caberia de uma vez. O lado é o menor entre a largura e a altura disponíveis, para
   a caixa continuar quadrada em monitor deitado e em celular em pé. */
.modal-caixa.quadrado {
  width: min(88vh, 94vw, 880px);
  height: min(88vh, 94vw, 880px);
  max-height: 88vh;
}
/* Numa tela baixa, um quadrado de verdade não caberia sem sumir com a lista. Aí solta a
   altura e a caixa volta a ser um retângulo — melhor que uma grade de uma fileira só. */
@media (max-height: 560px) {
  .modal-caixa.quadrado { width: min(94vw, 880px); height: auto; }
}
/* No quadrado quem rola é a LISTA lá dentro, não o modal: os filtros e a paginação têm de
   ficar parados na tela enquanto a vitrine anda. */
.modal-caixa.quadrado .modal-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; }
.modal-topo h2 {
  margin: 0; font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 17px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: 1px;
  text-shadow:
    -2px -2px 0 var(--mad-base), 2px -2px 0 var(--mad-base),
    -2px 2px 0 var(--mad-base), 2px 2px 0 var(--mad-base);
}
.modal-topo button {
  flex: none; width: 36px; height: 36px; font-size: 19px; line-height: 1;
  display: grid; place-items: center;
}
.modal-corpo { padding: 4px 20px 20px; overflow-y: auto; }
/* Título de seção dentro do modal: o mesmo tratamento do `h3` dos painéis. */
.modal-corpo h3 {
  margin: 0 0 9px; font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: #fff;
  text-shadow:
    -2px -2px 0 var(--mad-base), 2px -2px 0 var(--mad-base),
    -2px 2px 0 var(--mad-base), 2px 2px 0 var(--mad-base);
}
/* Texto auxiliar e números em destaque — evita cor solta no meio do JS. */
.txt-sec { font-size: 12.5px; color: var(--sobre-mad-dim); }
.txt-sec-vao { font-size: 10.5px; color: var(--vao-dim); }
.txt-num { color: var(--rx-rosa); font-weight: 700; }

/* ------------------------------------------------------------ mapa-múndi */

.mapa-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.mapa-areas { display: flex; gap: 6px; }
.mapa-area { height: 32px; padding: 0 14px; font-size: 11.5px; text-transform: capitalize; }
.mapa-barra input[type="text"], .mapa-barra input:not([type]) {
  height: 32px; flex: 1; min-width: 130px;
}
.mapa-check { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--sobre-mad); cursor: pointer; }

.mapa-tipos { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
/* Os selos de tipo mantêm as cores clássicas — mas ganham o filete e o contorno pixel. */
.tipo-btn {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  border: 0; border-radius: 5px; padding: 5px 9px; cursor: pointer;
  color: #fff; text-shadow: -1px -1px 0 #0008, 1px -1px 0 #0008, -1px 1px 0 #0008, 1px 1px 0 #0008;
  opacity: .5; background: #6a6a6a;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 2px 0 var(--mad-base);
  transition: opacity .1s, transform .06s;
}
.tipo-btn:hover { opacity: .85; }
.tipo-btn.on { opacity: 1; box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px #fff, 0 2px 0 var(--mad-base); }
.tipo-btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--mad-linha); }
.tipo-btn[data-tipo=""] { background: var(--vao2); }

.mapa-zoom { display: flex; gap: 5px; }
.mapa-zoom button { display: grid; place-items: center; width: 34px; height: 32px; }

/* O mapa de Kanto tem 1788×3364: em largura total ele passa de 1700 px de altura. Rola
   dentro da própria caixa, para o resto do modal (filtros e rodapé) ficar sempre à vista.
   A `.mapa-tela` é dimensionada por JS conforme o zoom, e a imagem preenche ela. */
.mapa-mundi {
  position: relative; line-height: 0; border-radius: 6px; overflow: auto;
  height: 56vh; cursor: grab; touch-action: none; overscroll-behavior: contain;
  border: 0; background: var(--vao);
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.mapa-mundi.arrastando { cursor: grabbing; }
.mapa-tela { position: relative; }
.mapa-mundi img {
  width: 100%; height: 100%; display: block;
  image-rendering: pixelated; user-select: none; -webkit-user-drag: none;
}
.marcador {
  position: absolute; transform: translate(-50%, -50%);
  padding: 0; cursor: pointer;
  background: var(--vao); border: 0; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--mad-linha);
  display: grid; place-items: center;
  transition: box-shadow .08s;
}
.marcador:hover:not(.travado) { z-index: 3; box-shadow: 0 0 0 2px var(--mad-linha), 0 0 0 4px var(--rx-rosa); }
.marcador .ico-poke, .marcador canvas { pointer-events: none; }
.marcador.on { box-shadow: 0 0 0 2px var(--mad-linha), 0 0 0 5px var(--rx); }
.marcador.travado { opacity: .32; cursor: not-allowed; filter: grayscale(1); }
.marcador .mk-nv {
  position: absolute; right: -5px; bottom: -5px;
  background: var(--mad); border: 0; border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 8.5px; padding: 0 4px; color: #fff; line-height: 1.7;
}
.mapa-rodape { margin-top: 10px; font-size: 11.5px; color: var(--sobre-mad-dim); }

.grade-dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; }
.dex-card {
  background: var(--vao); border: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
  padding: 8px 4px; text-align: center; font-size: 10.5px; color: var(--sobre-mad);
}
.dex-card.visto { box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--mad-esc), 0 1px 0 var(--mad-luz2); }
.dex-card.pego {
  background: var(--vao2);
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx), 0 1px 0 var(--mad-luz2);
}
.dex-card canvas { display: block; margin: 0 auto 3px; }
.dex-card.desconhecido canvas { filter: brightness(0) opacity(.35); }
.dex-card .dx-n { color: var(--rx-rosa); font-weight: 700; }
/* Todo card da Pokédex abre a ficha — inclusive o do bicho ainda não encontrado. */
.dex-card { cursor: pointer; }
.dex-card:hover { box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx-clr), 0 1px 0 var(--mad-luz2); }

/* ------------------------------------------------------------------ ficha
   A ficha de um pokémon: a da ESPÉCIE (Pokédex) e a de um bicho concreto (Mercado). As duas
   compartilham o mesmo esqueleto — retrato à esquerda, cabeçalho ao lado, e uma pilha de
   seções em vão escuro embaixo. */

.caixa-ficha { width: min(780px, 96vw); }

.fi-topo {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  margin-bottom: 14px;
}
/* O retrato. Vão escuro quadrado, do mesmo material das listas — é o que faz o sprite
   pixelado saltar em vez de se dissolver na madeira. */
.fi-arte {
  flex: none; width: 112px; height: 112px; position: relative;
  display: grid; place-items: center;
  background: var(--vao); border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.fi-arte.shiny { box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx-rosa), 0 1px 0 var(--mad-luz2); }
.fi-shiny-tag {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  background: var(--rx); color: #fff; border-radius: 4px; white-space: nowrap;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 8.5px; letter-spacing: .5px; padding: 1px 5px;
}
.fi-cabeca { flex: 1; min-width: 220px; }
.fi-nome {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 17px; color: #fff; line-height: 1.2;
  text-shadow:
    -2px -2px 0 var(--mad-base), 2px -2px 0 var(--mad-base),
    -2px 2px 0 var(--mad-base), 2px 2px 0 var(--mad-base);
}
.fi-num-dex { color: var(--rx-rosa); font-size: 12px; }
.fi-tipos { display: flex; gap: 4px; margin: 6px 0; flex-wrap: wrap; }
.fi-selos-linha { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.fi-qual { font-size: 11px; color: var(--sobre-mad-dim); }
.fi-qual b { color: var(--rx-rosa); }
.fi-linhas { display: grid; gap: 2px; }
.fi-linhas .pf-linha { font-size: 11.5px; }
.fi-dexcont { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--sobre-mad-dim); }
.fi-dexcont b { color: var(--rx-rosa); }

.fi-secao { margin-bottom: 14px; }
.fi-secao h3 em {
  font-style: normal; text-transform: none; letter-spacing: 0;
  font-size: 10px; color: var(--sobre-mad-dim); text-shadow: none;
}
.fi-nota { margin: 6px 0 0; font-size: 10.5px; color: var(--sobre-mad-dim); line-height: 1.5; }
.fi-vazio { margin: 0; font-size: 11.5px; color: var(--vao-dim); }

/* As tabelas. Vão escuro por fora, linhas separadas por um filete da própria madeira. */
.fi-tabela {
  width: 100%; border-collapse: collapse; overflow: hidden;
  background: var(--vao); border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
  font-size: 11.5px;
}
/* Tudo CENTRADO — cabeçalho e conteúdo. Com o título à esquerda e os números à direita, cada
   coluna tinha duas âncoras diferentes e a tabela lia como duas listas sobrepostas. */
.fi-tabela th {
  text-align: center; padding: 6px 8px; background: var(--vao2);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--sobre-mad-dim); white-space: nowrap;
}
.fi-tabela td {
  padding: 5px 8px; text-align: center; color: var(--sobre-mad);
  box-shadow: inset 0 1px 0 var(--vao-luz);
}
/* `.fi-num` virou só "não quebra a linha": o alinhamento agora é do `td`, para todo mundo. */
.fi-tabela .fi-num { white-space: nowrap; }
.fi-tabela .destaque { color: var(--rx-rosa); font-weight: 700; }
.fi-tabela .fi-vazio { padding: 12px; }
.fi-tabela tr.fi-aqui td { background: var(--vao2); }
/* A célula do ícone é flex, então o centro dela é o `justify-content` e não o `text-align`. */
.fi-bola, .fi-drop { display: flex; align-items: center; justify-content: center; gap: 6px; }
.fi-bola-ico, .fi-drop-ico { flex: none; display: inline-flex; }
.fi-pot {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; color: var(--rx-rosa);
}
.fi-pot.p1 { color: var(--vao-dim); }
.fi-pot.p4, .fi-pot.p5 { color: var(--ch-fala); }

/* As barras de stat. Largura proporcional; o número fica à direita, sempre alinhado. */
.fi-stats {
  display: grid; gap: 4px; padding: 9px 10px;
  background: var(--vao); border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.fi-stat { display: grid; grid-template-columns: 52px 1fr 42px auto; gap: 8px; align-items: center; font-size: 10.5px; }
.fi-stat-nome { color: var(--sobre-mad-dim); font-weight: 700; letter-spacing: .4px; }
.fi-stat-barra {
  height: 9px; background: var(--vao2); border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
}
.fi-stat-barra i {
  display: block; height: 100%;
  background: linear-gradient(180deg, var(--rx-clr) 0 4px, var(--rx) 4px 100%);
}
.fi-stat-num { text-align: right; color: var(--sobre-mad); font-weight: 700; }
.fi-iv { font-style: normal; font-size: 9px; color: var(--vao-dim); }
.fi-xp { margin-bottom: 8px; }

.fi-tier {
  display: inline-block; min-width: 20px; text-align: center; border-radius: 4px;
  background: var(--rx); color: #fff; padding: 0 5px;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 10px;
}
.fi-tier.tS, .fi-tier.tA { background: var(--vermelho); }
.fi-tier.tD, .fi-tier.tE { background: var(--vao-luz); }

.fi-hunts { display: flex; gap: 6px; flex-wrap: wrap; }
.fi-hunt em { font-style: normal; opacity: .75; font-size: 9.5px; }
.fi-hunt.travada { opacity: .45; }

/* "Ver ficha" (no card do anúncio) e "Ver a ficha da espécie" (no rodapé da ficha). Os dois
   entram na família de botão pixel, sempre na variante de madeira: nenhum dos dois é um
   estado "ligado", e o roxo aqui competiria com o Comprar logo abaixo. */
.cm-ficha { margin-top: 4px; width: 100%; height: 26px; font-size: 10.5px; }
.fi-verdex { height: 30px; padding: 0 12px; font-size: 11.5px; }

/* -------------------------------------------------------------- Pokepédia
   Duas colunas: o índice à esquerda (vão escuro, rola sozinho) e o texto à direita. Quem rola
   são as duas colunas, cada uma por conta própria — o modal fica parado, senão o índice sumia
   de vista assim que o capítulo passasse de uma tela. */

/* O manual precisa de altura (por isso `quadrado`) mas também de largura: uma coluna de texto
   de 650 px espreme as tabelas de sete colunas dos boosts. */
.modal-caixa.quadrado[data-modal="pokepedia"] { width: min(94vw, 1060px); }

.wk-corpo { display: flex; gap: 14px; flex: 1; min-height: 0; }
.wk-menu { flex: none; width: 190px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.wk-busca { height: 30px; font-size: 11.5px; }
.wk-lista {
  flex: 1; min-height: 0; overflow-y: auto; padding: 6px;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--vao); border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.wk-grupo {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 9px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--rx-rosa); padding: 8px 6px 2px;
}
.wk-grupo:first-child { padding-top: 2px; }
/* O capítulo é uma aba, e segue a regra da casa: roxo = aberto, madeira = fechado (a variante
   apagada faz isso sozinha pelo `:not(.on)`). A diferença para as outras abas do jogo é a
   ALTURA LIVRE — "Tipos: forças e fraquezas" não cabe numa linha de 30 px, e cortar o título
   de um índice é cortar justamente a informação que se veio buscar. */
.wk-item {
  text-align: left; font-size: 11px; height: auto; min-height: 28px;
  padding: 5px 9px; line-height: 1.35; width: 100%; white-space: normal;
}

.wk-texto {
  flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 12px 16px 20px;
  background: var(--vao); border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
  font-size: 12.5px; line-height: 1.65; color: var(--sobre-mad);
}
.wk-titulo {
  margin: 0 0 12px; font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 16px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: 1px;
  text-shadow:
    -2px -2px 0 var(--mad-base), 2px -2px 0 var(--mad-base),
    -2px 2px 0 var(--mad-base), 2px 2px 0 var(--mad-base);
}
.wk-texto h4 {
  margin: 18px 0 7px; font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 12px; font-weight: 700; color: var(--rx-rosa);
  text-transform: uppercase; letter-spacing: .8px;
}
.wk-texto h4:first-child { margin-top: 2px; }
.wk-texto p { margin: 0 0 9px; }
.wk-texto ul, .wk-texto ol { margin: 0 0 9px; padding-left: 20px; }
.wk-texto li { margin-bottom: 4px; }
.wk-texto b { color: #fff; }
.wk-texto a { color: var(--rx-clr); cursor: pointer; text-decoration: underline; }
.wk-texto a:hover { color: var(--rx-rosa); }
.wk-texto code {
  background: var(--vao2); border-radius: 3px; padding: 0 4px;
  font-family: Consolas, "Courier New", monospace; font-size: 11px;
}
/* Os passos numerados ganham um marcador rosa — são receita, e se leem em ordem. */
.wk-passos { counter-reset: passo; list-style: none; padding-left: 0; }
.wk-passos li {
  counter-increment: passo; position: relative; padding-left: 26px; margin-bottom: 7px;
}
.wk-passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 4px; text-align: center; line-height: 18px;
  background: var(--rx); color: #fff; box-shadow: inset 0 0 0 2px var(--mad-linha);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 10px;
}

/* Fórmula: bloco monoespaçado, que é como uma conta se lê. */
.wk-formula {
  margin: 0 0 10px; padding: 9px 11px; overflow-x: auto;
  background: var(--vao2); border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
  font-family: Consolas, "Courier New", monospace; font-size: 11.5px; line-height: 1.6;
  color: var(--sobre-mad-dim); white-space: pre;
}

/* A caixa de destaque. Três sabores: neutro, aviso (vermelho) e dica (verde). */
.wk-nota {
  margin: 0 0 11px; padding: 9px 12px; border-radius: 6px;
  background: var(--vao2);
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 4px 0 0 var(--rx);
  font-size: 12px; line-height: 1.6;
}
.wk-nota.aviso { box-shadow: inset 0 0 0 2px var(--mad-linha), inset 4px 0 0 var(--vermelho); }
.wk-nota.dica { box-shadow: inset 0 0 0 2px var(--mad-linha), inset 4px 0 0 var(--verde); }

/* As tabelas do manual — o mesmo material das da ficha. */
.wk-tabela {
  width: 100%; border-collapse: collapse; margin: 0 0 11px; overflow: hidden;
  background: var(--vao2); border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
  font-size: 11.5px;
}
.wk-tabela th {
  text-align: left; padding: 6px 9px; background: var(--vao-luz);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--sobre-mad); white-space: nowrap;
}
.wk-tabela td { padding: 5px 9px; box-shadow: inset 0 1px 0 var(--vao-luz); vertical-align: top; }
.wk-tabela .wk-num { text-align: right; white-space: nowrap; }
.wk-tabela .wk-num.destaque { color: var(--rx-rosa); font-weight: 700; }
.wk-tabela .wk-desc { font-size: 10.5px; color: var(--sobre-mad-dim); }
.wk-sub { display: block; font-style: normal; font-size: 10px; color: var(--sobre-mad-dim); }
.wk-pot { font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; color: var(--rx-rosa); }
.wk-pot.p1 { color: var(--vao-dim); }
.wk-pot.p4, .wk-pot.p5 { color: var(--ch-fala); }
/* Tabela larga (os sete preços de boost) rola dentro de si mesma em vez de esticar o modal. */
.wk-larga { display: block; overflow-x: auto; white-space: nowrap; }

/* A grade 18×18 de tipos. Números miúdos, cor por faixa: verde bate mais, vermelho bate
   menos, preto é imunidade. Rola na horizontal no celular. */
.wk-rolagem { overflow-x: auto; margin-bottom: 11px; }
.wk-tipos { border-collapse: collapse; font-size: 9px; }
.wk-tipos th {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 8px; letter-spacing: .3px; color: #fff; padding: 2px 3px; text-align: center;
  text-shadow: -1px -1px 0 #0006, 1px -1px 0 #0006, -1px 1px 0 #0006, 1px 1px 0 #0006;
}
.wk-tipos .wk-canto {
  background: var(--vao); color: var(--sobre-mad-dim); text-align: left;
  font-size: 8px; white-space: nowrap; padding-right: 8px; text-shadow: none;
}
.wk-tipos .wk-lin { text-align: right; padding-right: 5px; }
/* Os cabeçalhos usam `.tipo` só pela COR de cada elemento — mas aquela classe é a do chip de
   tipo e traz `display: inline-block`, que num `<th>` desmonta a linha inteira da tabela
   (cada célula virava a própria linha). Aqui a cor fica e o display volta ao de tabela. */
.wk-tipos th.tipo { display: table-cell; }
.wk-ef {
  width: 22px; height: 20px; text-align: center; background: var(--vao);
  box-shadow: inset 0 0 0 1px #0004; color: var(--sobre-mad-dim); font-weight: 700;
}
.wk-ef.b { background: #2f6b3c; color: #d8ffd8; }
.wk-ef.m { background: #6b2f2f; color: #ffd8d8; }
.wk-ef.z { background: #14090f; color: #8b7480; }

.filtro-linha { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.filtro-linha input { height: 32px; }
.aviso-modal {
  background: var(--vao); border: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
  padding: 20px; text-align: center; color: var(--vao-dim); font-size: 12.5px;
}

.loja-linha {
  display: grid; grid-template-columns: 40px 1fr 110px 92px; gap: 10px; align-items: center;
  background: var(--vao); border: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
  padding: 8px 12px; margin-bottom: 6px; color: var(--sobre-mad);
}
.loja-linha img, .loja-linha canvas { max-width: 32px; justify-self: center; }
.loja-linha .lj-ico { display: grid; place-items: center; }
.loja-linha .lj-preco { color: var(--rx-rosa); font-weight: 700; text-align: right; font-size: 12px; }
.loja-linha button { height: 34px; padding: 0 10px; font-size: 11.5px; }

/* ------------------------------------------------------------------ market */

.mk-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-abas { display: flex; gap: 7px; flex-wrap: wrap; }
.mk-aba { height: 36px; padding: 0 16px; font-size: 12.5px; }

/* Saldo: um vão com a moeda dentro, para não competir com os cards. */
.mk-saldo {
  background: var(--vao); border-radius: 6px; padding: 7px 14px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
  font-size: 14px;
}
.mk-moeda {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; color: #fff;
}
.mk-moeda img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.mk-saldo .mk-moeda { font-size: 16px; }
.mk-saldo .mk-moeda img { width: 24px; height: 24px; }

.mk-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; flex: 1; min-width: 0; }

/* Aba de compra: menu de categorias à esquerda, grade à direita. */
.mk-com-lados { display: flex; gap: 12px; align-items: flex-start; }
.mk-lado { flex: none; width: 140px; display: flex; flex-direction: column; gap: 7px; }
.mk-cat { height: 40px; padding: 0 12px; font-size: 12.5px; text-align: left; }

/* Card quadrado: ícone em cima, ação embaixo, tudo dentro de um vão. */
.mk-card {
  background: var(--vao); border-radius: 6px; padding: 12px 10px 10px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 2px 0 var(--mad-base);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; color: var(--sobre-mad);
}
.mk-card-equipe { box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx-esc), 0 2px 0 var(--mad-base); }
.mk-ico { height: 46px; display: grid; place-items: center; }
.mk-ico img { max-width: 42px; max-height: 42px; object-fit: contain; }
.mk-nome {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 12.5px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-sub { font-size: 10px; color: var(--vao-dim); min-height: 13px; }
.mk-preco { font-size: 12px; }
.mk-rodape { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }

/* Contador − / campo / + */
.mk-qtd { display: flex; gap: 4px; }
.mk-qtd input {
  flex: 1; min-width: 0; height: 30px; text-align: center;
  background: #1e1219; color: #fff; border: 0; border-radius: 5px;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 12.5px;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
  /* as setinhas nativas do number não combinam e ainda roubam largura */
  appearance: textfield; -moz-appearance: textfield;
}
.mk-qtd input::-webkit-outer-spin-button, .mk-qtd input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.mk-qtd input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx); }
.mk-passo {
  flex: none; width: 30px; height: 30px; font-size: 15px; line-height: 1;
  display: grid; place-items: center;
}
.mk-total { font-size: 10.5px; color: var(--vao-dim); }
.mk-acao { height: 34px; padding: 0 12px; font-size: 12px; width: 100%; }

/* Faixa de "vender tudo", acima da grade. */
.mk-vender-tudo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--vao); border-radius: 6px; padding: 10px 14px; margin-bottom: 12px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.mk-vt-info { font-size: 12px; color: var(--sobre-mad); }
.mk-vender-tudo .mk-acao { width: auto; min-width: 180px; }

/* --------------------------------------------------------------- bosses */
/* Arenas: LISTA à esquerda, FICHA à direita — o desenho do original.
   A grade de 87 cartões que existia aqui gastava a tela toda com 85 fantasmas cinzentos;
   numa lista os 87 nomes cabem numa coluna estreita e a área grande fica para a ficha de
   quem foi escolhido. */

.boss-intro { margin: 0 0 10px; font-size: 12.5px; color: var(--sobre-mad-dim); line-height: 1.5; }
.boss-intro b { color: #fff; }

.boss-corpo { display: flex; gap: 12px; min-height: 0; }

/* --- a lista --- */

.boss-lista {
  flex: 0 0 226px; overflow-y: auto; max-height: 66vh;
  display: flex; flex-direction: column; gap: 4px; padding: 7px;
  background: var(--vao); border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.boss-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 7px; border: 0; border-radius: 5px; cursor: pointer; text-align: left;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  color: var(--sobre-mad-dim); background: var(--vao2);
  box-shadow: inset 0 0 0 1px var(--mad-linha);
  transition: filter .12s, box-shadow .12s;
}
.boss-item:hover { filter: brightness(1.18); }
/* Selecionado = anel roxo, o mesmo "ligado" do resto do jogo. */
.boss-item.on {
  color: #fff; background: var(--vao-luz);
  box-shadow: inset 0 0 0 1px var(--mad-linha), inset 0 0 0 3px var(--rx);
}
/* Sem arena: apagado, mas ainda clicável — a ficha explica o que é. */
.boss-item.embreve { opacity: .5; }
.boss-item.embreve.on { opacity: .85; }
.boss-item-ico { width: 30px; height: 30px; object-fit: contain; flex: none; }
.boss-item-nome {
  flex: 1; min-width: 0; font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.boss-item-nv { flex: none; font-size: 10px; color: var(--vao-dim); }

/* --- a ficha --- */

/* Coluna: só o miolo rola. O rodapé (entrada, equipe, botão) fica ancorado embaixo. */
.boss-ficha {
  flex: 1; min-width: 0; max-height: 66vh;
  display: flex; flex-direction: column;
  padding: 12px 14px; text-align: center;
  background: var(--vao); border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.boss-rolagem { flex: 1; min-height: 0; overflow-y: auto; }
.boss-arte {
  height: 150px; display: grid; place-items: center; overflow: hidden; margin-bottom: 9px;
  background: #1e1219; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--mad-linha);
}
.boss-arte img { max-width: 160px; max-height: 152px; object-fit: contain; }
.boss-nome {
  margin: 0 0 8px; font-size: 18px; color: #fff;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  text-shadow: -1px -1px 0 var(--mad-base), 1px -1px 0 var(--mad-base),
               -1px 1px 0 var(--mad-base), 1px 1px 0 var(--mad-base);
}

.boss-selos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 12px; }
.boss-selos > span {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 4px;
  background: var(--vao2); box-shadow: inset 0 0 0 1px var(--mad-linha);
}
.boss-cat { color: var(--rx-rosa); }
.boss-nv { color: var(--sobre-mad-dim); }
.boss-embreve { color: #ffd166; }

.boss-drops {
  text-align: left; padding: 9px 11px; margin-bottom: 12px; border-radius: 5px;
  background: var(--vao2); box-shadow: inset 0 0 0 1px var(--mad-linha);
}
.boss-drops > b { font-size: 11.5px; color: #fff; }
.boss-droplista { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.boss-drop {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; padding: 3px 7px; border-radius: 4px;
  background: var(--vao); color: var(--sobre-mad-dim);
  box-shadow: inset 0 0 0 1px var(--mad-linha);
}
.boss-drop img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.boss-drop b { color: #fff; }
.boss-drop em { color: var(--rx-rosa); font-style: normal; font-weight: 700; }

.boss-rodape {
  flex: none; display: flex; flex-direction: column; gap: 8px;
  padding-top: 10px; margin-top: 8px;
  box-shadow: inset 0 1px 0 var(--mad-linha);
}
.boss-semarena { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--vao-dim); }

.boss-entrada {
  display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--sobre-mad-dim);
  padding: 7px 10px; border-radius: 5px;
  background: var(--vao2); box-shadow: inset 0 0 0 1px var(--mad-linha);
}
.boss-entrada img { width: 20px; height: 20px; object-fit: contain; }
.boss-entrada b { color: #fff; }
.boss-entrada em { font-style: normal; opacity: .75; }
.boss-entrada.falta { box-shadow: inset 0 0 0 2px var(--vermelho); }
.boss-entrada.falta b { color: var(--vermelho); }

/* As pastilhas do time. São a resposta visual para "por que o dano tá ×716?" — seis
   sprites minúsculos ao lado de um boss de nível 600 explicam a conta sem uma linha de
   texto a mais. */
.boss-equipe { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.boss-pip {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 3px 4px; border-radius: 5px;
  background: var(--vao2); box-shadow: inset 0 0 0 1px var(--mad-linha);
}
.boss-pip.caido { filter: grayscale(.85) brightness(.5); }
.boss-pip-hp {
  display: block; width: 30px; height: 4px; border-radius: 2px; overflow: hidden;
  background: #00000080;
}
.boss-pip-hp i { display: block; height: 100%; background: var(--verde); }
.boss-pip-nv {
  font-size: 9px; font-weight: 700; color: var(--vao-dim); line-height: 1;
}
.boss-semtime { font-size: 11px; font-style: italic; color: var(--vao-dim); }

.boss-aviso { font-size: 11px; color: var(--vao-dim); line-height: 1.45; }
.boss-aviso.ruim { color: var(--vermelho); }

.boss-desafiar { height: 38px; padding: 0 12px; font-size: 13px; width: 100%; }

@media (max-width: 760px) {
  .boss-corpo { flex-direction: column; }
  .boss-lista { flex: none; max-height: 168px; }
  .boss-ficha { max-height: none; }
}

/* ------------------------------------------------------ Mercado Global */
/* Filtros à esquerda, vitrine à direita, e o "anunciar" numa folha por cima. Mesmo
   vocabulário de madeira/roxo/vão do resto do jogo — só o chat é exceção (ver §5 do
   DESIGN.md). */

.cm-topo { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.cm-busca {
  flex: 1; min-width: 0; height: 34px; padding: 0 11px;
  background: var(--vao); color: var(--sobre-mad);
  border: 0; border-radius: 6px; font-family: inherit; font-size: 12px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.cm-busca::placeholder { color: var(--vao-dim); }
.cm-busca:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx), 0 1px 0 var(--mad-luz2);
}
.cm-acao { height: 34px; padding: 0 14px; font-size: 12px; flex: none; }
.cm-acao.destaque { background: linear-gradient(180deg, var(--rx) 0 60%, var(--rx-clr) 60% 100%); }

/* A carteira de GEMAS: saldo + depósito + saque, no topo do mercado onde a gema se gasta.
   Antes morava na Loja, ao lado do saldo de diamante — duas moedas no mesmo canto, e o
   jogador clicava em "sacar" achando que era do diamante. */
.cm-carteira {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 0 4px 0 10px; border-radius: 6px; background: var(--vao);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 12px; font-weight: 700; color: var(--vao-dim);
  height: 34px;
}
.cm-carteira b { color: var(--rx-rosa); font-size: 14px; margin-right: 4px; }
.cm-carteira img { image-rendering: pixelated; vertical-align: -2px; }
.cm-carteira .cm-acao { height: 26px; padding: 0 10px; font-size: 11px; }

.cm-corpo { display: flex; gap: 12px; min-height: 0; flex: 1; }

.cm-filtros {
  flex: 0 0 150px; display: flex; flex-direction: column; gap: 4px;
  padding: 8px; min-height: 0; overflow-y: auto;
  background: var(--vao); border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.cm-fgrupo {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--vao-dim); padding: 6px 4px 2px;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
}
.cm-fgrupo:first-child { padding-top: 0; }
.cm-filtro {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 5px; cursor: pointer; text-align: left;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 11.5px;
  color: var(--sobre-mad-dim); background: var(--vao2);
  box-shadow: inset 0 0 0 1px var(--mad-linha);
  transition: filter .12s;
}
.cm-filtro:hover { filter: brightness(1.18); }
.cm-filtro.on {
  color: #fff; background: var(--vao-luz);
  box-shadow: inset 0 0 0 1px var(--mad-linha), inset 0 0 0 3px var(--rx);
}
.cm-fico { display: grid; place-items: center; width: 16px; flex: none; }
.cm-fico img { display: block; }

.cm-painel { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }

/* A barra da vitrine: os 18 tipos de um lado, o "ordenar por" do outro. */
.cm-barra { display: flex; gap: 10px; align-items: flex-start; }
.cm-tipos { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.cm-tipos .tipo-btn { font-size: 8.5px; padding: 4px 7px; }
.cm-ordenar {
  flex: none; display: flex; align-items: center; gap: 6px;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: .6px; color: var(--vao-dim);
}
.cm-ordenar select {
  height: 28px; padding: 0 6px; border: 0; border-radius: 5px; cursor: pointer;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 11px;
  color: var(--sobre-mad); background: var(--vao);
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.cm-ordenar select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx); }

/* A vitrine é uma GRADE DE CARDS QUADRADOS, e não uma lista de linhas.
   Era uma lista, com o argumento de que preço em coluna se compara de relance — mas numa
   linha de 44 px o sprite não cabe, e é o sprite que diz se aquele Charizard é o preto (shiny)
   ou o laranja. Num mercado onde dois anúncios da mesma espécie valem dez vezes um do outro,
   ver o bicho vale mais que alinhar o número; a ordenação por preço faz esse trabalho melhor
   do que o alinhamento fazia. */
.cm-lista {
  flex: 1; min-height: 0; overflow-y: auto; align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; padding: 8px;
  background: var(--vao); border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.cm-vazio { grid-column: 1 / -1; margin: auto; padding: 24px; font-size: 12px; font-style: italic; color: var(--vao-dim); }

.cm-card {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  padding: 8px 8px 9px; border-radius: 6px;
  background: var(--vao2); box-shadow: inset 0 0 0 1px var(--mad-linha), 0 2px 0 var(--mad-base);
}
/* Shiny ganha moldura dourada: é o único atributo que multiplica os stats por dois, e tem de
   saltar aos olhos numa grade de trinta cards. */
.cm-card.shiny { box-shadow: inset 0 0 0 2px #ffd166, inset 0 0 14px #ffd16626, 0 2px 0 var(--mad-base); }

/* A arte manda no card: quadrada, com o sprite inteiro dentro e centralizado. */
.cm-arte {
  position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 5px; overflow: hidden;
  background: radial-gradient(circle at 50% 62%, var(--vao-luz) 0%, var(--vao) 72%);
  box-shadow: inset 0 0 0 1px var(--mad-linha);
}
.cm-arte img, .cm-arte canvas { image-rendering: pixelated; }
.cm-semico { font-size: 20px; }

.cm-selos { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; pointer-events: none; }
.cm-selo-shiny {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 8px;
  letter-spacing: .5px; padding: 2px 5px; border-radius: 4px;
  color: #3a2a06; background: linear-gradient(180deg, #ffe9a8, #ffc93c);
  box-shadow: inset 0 0 0 1px #00000055;
}
/* O selo de potência sobe de tom com o número: P2 e P3 discretos, P4 e P5 gritando. */
.cm-pot {
  margin-left: auto;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 8.5px;
  padding: 2px 5px; border-radius: 4px; color: #fff;
  text-shadow: -1px -1px 0 #0008, 1px -1px 0 #0008, -1px 1px 0 #0008, 1px 1px 0 #0008;
  box-shadow: inset 0 0 0 1px #00000055;
}
.cm-pot.p2 { background: #4a86e8; }
.cm-pot.p3 { background: #5aa93e; }
.cm-pot.p4 { background: #8a3a92; }
.cm-pot.p5 { background: linear-gradient(180deg, #ff8a3c, #e8322a); }
.cm-qtd {
  margin-left: auto;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 9px;
  padding: 2px 5px; border-radius: 4px; color: #fff; background: #00000088;
  box-shadow: inset 0 0 0 1px var(--mad-linha);
}

.cm-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cm-nome {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 11.5px;
  color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.cm-chip {
  font-size: 7.5px; padding: 1px 4px; border-radius: 3px; letter-spacing: .3px;
}
.cm-sub { font-size: 9.5px; color: var(--sobre-mad-dim); }
.cm-npc { font-style: normal; color: var(--vao-dim); }
.cm-vend { font-size: 9px; color: var(--vao-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-vend b { color: var(--rx-rosa); }

.cm-rodape {
  margin-top: auto; display: flex; flex-direction: column; gap: 1px;
  padding-top: 5px; box-shadow: inset 0 1px 0 var(--mad-linha);
}
/* `inline-flex` e não `flex`: o preço aparece no meio de uma frase no resumo da compra
   ("Levando 2 × 200 = 400"), e em bloco cada moeda quebrava para uma linha só dela. */
.cm-preco {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  font-weight: 700; font-size: 12.5px; color: #fff; white-space: nowrap;
}
.cm-preco img { width: 13px; height: 13px; object-fit: contain; }
/* Rosa da GEMA — a mesma cor do sprite (gem/psychic). O ciano é do diamante. */
.cm-preco.orb { color: var(--rx-rosa); }
.cm-rodape .cm-preco { display: flex; }
.cm-unit { font-size: 8.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--vao-dim); }
.cm-botoes { display: flex; gap: 5px; }
.cm-botoes .cm-btn { flex: 1; }
.cm-btn {
  height: 28px; padding: 0 11px; border: 0; border-radius: 5px; cursor: pointer;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 11px;
  color: #fff; background: var(--vao-luz);
  box-shadow: inset 0 0 0 1px var(--mad-linha), 0 2px 0 var(--mad-base);
  transition: filter .12s, transform .06s;
}
.cm-btn:hover { filter: brightness(1.15); }
.cm-btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--mad-linha); }
.cm-btn.comprar { background: linear-gradient(180deg, var(--rx) 0 60%, var(--rx-clr) 60% 100%); }
.cm-btn.perigo { background: var(--vermelho); }

.cm-paginas { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; color: var(--sobre-mad-dim); }
.cm-pag {
  width: 28px; height: 26px; border: 0; border-radius: 5px; cursor: pointer;
  font-weight: 700; color: #fff; background: var(--vao2);
  box-shadow: inset 0 0 0 1px var(--mad-linha);
}
.cm-pag:disabled { opacity: .4; cursor: default; }

/* --- a folha de anunciar --- */

.cm-folha { position: absolute; inset: 0; background: #1a0f16e0; display: grid; place-items: center; z-index: 5; padding: 16px; }
.cm-folha-caixa {
  width: min(520px, 100%); max-height: 100%;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg,
    var(--mad-esc) 0 10px, var(--mad) 10px calc(100% - 14px),
    var(--mad-quente) calc(100% - 14px) calc(100% - 7px), var(--mad) calc(100% - 7px) 100%);
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--mad-luz),
              inset 0 0 0 6px var(--mad), 0 6px 0 var(--mad-base), 0 20px 50px #000c;
}
.cm-folha-topo {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-size: 13px; color: #fff;
}
.cm-fechar {
  width: 26px; height: 26px; border: 0; border-radius: 5px; cursor: pointer;
  color: #fff; background: var(--rx); box-shadow: inset 0 0 0 1px var(--mad-linha);
}
.cm-folha-corpo { padding: 0 14px 14px; overflow-y: auto; flex: 1; min-height: 0; }
/* Quadrada só nos passos que têm GRADE (escolher o item, escolher o pokémon) — ali a caixa
   quadrada vale pelo mesmo motivo da vitrine. Nos passos de duas perguntas ("item ou
   pokémon?", "por quanto?") a altura fixa deixaria meia folha de vazio embaixo do conteúdo. */
.cm-folha-caixa:has(.cm-grade) { height: min(520px, 100%); }
.cm-passo-txt { margin: 0 0 10px; font-size: 12.5px; color: var(--sobre-mad); }

.cm-escolha { display: flex; gap: 10px; }
.cm-grande {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 10px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--vao); color: #fff;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 2px 0 var(--mad-base);
  transition: filter .12s;
}
/* A arte é a bolsa e a pokébola do jogo, não emoji — por isso `pixelated`. */
.cm-grande img { image-rendering: pixelated; }
.cm-grande:hover { filter: brightness(1.2); }
.cm-grande span { font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 12px; }

.cm-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 6px;
  align-content: start;
}
.cm-slot {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 5px; border: 0; border-radius: 5px; cursor: pointer;
  background: var(--vao); color: var(--sobre-mad-dim); font-size: 16px;
  box-shadow: inset 0 0 0 1px var(--mad-linha);
  transition: filter .12s;
}
.cm-slot:hover { filter: brightness(1.25); }
.cm-slot.shiny { box-shadow: inset 0 0 0 2px #ffd166; }
.cm-slot img, .cm-slot canvas { image-rendering: pixelated; object-fit: contain; }
.cm-slot-nome {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 10px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-slot-selos { display: flex; align-items: center; gap: 3px; font-size: 10px; }
.cm-slot-selos .cm-pot { margin-left: 0; }
.cm-slot b { font-size: 10px; color: #fff; }

.cm-form { display: flex; flex-direction: column; gap: 10px; }
.cm-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 11px;
  color: var(--sobre-mad-dim);
}
.cm-form input {
  height: 34px; padding: 0 11px; background: var(--vao); color: var(--sobre-mad);
  border: 0; border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.cm-form input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx), 0 1px 0 var(--mad-luz2);
}
.cm-form em { font-style: normal; font-weight: 400; font-size: 10px; color: var(--vao-dim); }

.cm-moedas { display: flex; gap: 6px; }
.cm-moeda {
  flex: 1; height: 32px; border: 0; border-radius: 5px; cursor: pointer;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 11.5px;
  color: var(--sobre-mad-dim); background: var(--vao2);
  box-shadow: inset 0 0 0 1px var(--mad-linha);
}
.cm-moeda.on {
  color: #fff; background: var(--vao-luz);
  box-shadow: inset 0 0 0 1px var(--mad-linha), inset 0 0 0 3px var(--rx);
}
/* O resumo é onde a comissão aparece ANTES de publicar — é a informação que muda a
   decisão, e a pior hora de contar dela seria depois da venda. */
.cm-resumo {
  margin: 0; padding: 8px 10px; border-radius: 5px; font-size: 11.5px; line-height: 1.5;
  color: var(--sobre-mad-dim); background: var(--vao); box-shadow: inset 0 0 0 1px var(--mad-linha);
}
.cm-resumo b { color: #fff; }
.cm-resumo .cm-falta { color: var(--vermelho-clr, #ff8a7a); }
.cm-publicar { height: 38px; font-size: 13px; width: 100%; }
.cm-publicar:disabled { opacity: .45; cursor: default; filter: grayscale(.6); }
.cm-publicar:disabled:active { transform: none; }

/* --- o seletor de quantidade (barra + número) --- */

.qtd-bloco { display: flex; flex-direction: column; gap: 7px; }
.qtd-topo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 11px;
  color: var(--sobre-mad-dim);
}
.qtd-topo em { font-style: normal; font-weight: 400; font-size: 10px; color: var(--vao-dim); }
.qtd-linha { display: flex; align-items: center; gap: 9px; }
.qtd-num {
  flex: none; width: 92px; height: 34px; padding: 0 9px; text-align: center;
  background: var(--vao); color: #fff; border: 0; border-radius: 6px;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-size: 14px; font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.qtd-num:focus { outline: none; box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx); }

/* A barra é desenhada à mão: o controle nativo não aceita o vão escuro nem o filete de
   madeira, e ficava a única peça de outro jogo no meio da tela. */
.qtd-barra {
  flex: 1; min-width: 0; height: 34px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.qtd-barra::-webkit-slider-runnable-track {
  height: 14px; border-radius: 7px; background: var(--vao);
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 2px 3px #0006;
}
.qtd-barra::-moz-range-track {
  height: 14px; border-radius: 7px; background: var(--vao);
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 2px 3px #0006;
}
/* O preenchido, no roxo do jogo. Só o Firefox tem a pseudoclasse do "antes do polegar";
   no WebKit o trilho fica todo escuro, o que continua legível. */
.qtd-barra::-moz-range-progress {
  height: 14px; border-radius: 7px;
  background: linear-gradient(180deg, var(--rx-clr), var(--rx));
  box-shadow: inset 0 0 0 2px var(--mad-linha);
}
.qtd-barra::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 26px; margin-top: -6px; border: 0; border-radius: 5px;
  background: linear-gradient(180deg, var(--rx-clr) 0 55%, var(--rx) 55% 100%);
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 2px 0 var(--mad-base);
}
.qtd-barra::-moz-range-thumb {
  width: 20px; height: 26px; border: 0; border-radius: 5px;
  background: linear-gradient(180deg, var(--rx-clr) 0 55%, var(--rx) 55% 100%);
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 2px 0 var(--mad-base);
}
.qtd-barra:active::-webkit-slider-thumb { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--mad-linha); }

.qtd-atalhos { display: flex; gap: 5px; }
.qtd-atalho {
  flex: 1; height: 26px; border: 0; border-radius: 5px; cursor: pointer;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 10.5px;
  color: var(--sobre-mad-dim); background: var(--vao2);
  box-shadow: inset 0 0 0 1px var(--mad-linha);
  transition: filter .12s, transform .06s;
}
.qtd-atalho:hover { filter: brightness(1.25); color: #fff; }
.qtd-atalho:active { transform: translateY(1px); }

/* --- a folha de comprar --- */

.cm-compra-topo {
  display: flex; align-items: center; gap: 11px; margin-bottom: 12px;
  padding: 9px; border-radius: 6px;
  background: var(--vao); box-shadow: inset 0 0 0 1px var(--mad-linha);
}
.cm-compra-topo .cm-arte { width: 56px; height: 56px; flex: none; }
.cm-compra-topo .cm-nome { font-size: 13.5px; }
.cm-compra-topo .cm-sub { font-size: 11.5px; }
.cm-compra-topo .cm-preco { font-size: inherit; }

@media (max-width: 760px) {
  .cm-corpo { flex-direction: column; }
  .cm-filtros { flex: none; flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .cm-fgrupo { width: 100%; }
  .cm-filtro { width: auto; }
  /* Card menor: em 360 px de largura, 136 px de mínimo dava uma coluna só. */
  .cm-lista { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .cm-barra { flex-direction: column; }
  .cm-ordenar { width: 100%; }
  .cm-ordenar select { flex: 1; }
}

/* -------------------------------------------------------------- ranking */
/* Placar do mundo: abas por métrica, os três primeiros num pódio com troféu e coroa de
   louros, o resto em lista, e uma coluna de destaques à direita. */

.rk-abas { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.rk-aba { height: 36px; padding: 0 16px; font-size: 12.5px; }

.rk-corpo { display: flex; gap: 14px; align-items: flex-start; }
.rk-principal { flex: 1; min-width: 0; }
.rk-destaques { flex: none; width: 210px; }

/* Pódio: o 1º no meio, mais alto que os vizinhos. */
.rk-podio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; margin-bottom: 12px; }
.rk-pod {
  background: var(--vao); border-radius: 6px; padding: 10px 8px 12px; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 2px 0 var(--mad-base);
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  transition: transform .1s, box-shadow .1s, background .1s;
}
.rk-pod:hover { background: var(--vao2); transform: translateY(-3px); }
.rk-pod.lugar-1 { padding-top: 16px; padding-bottom: 18px; }
.rk-pod.eu { box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx), 0 2px 0 var(--mad-base); }
.rk-pod.vazio { visibility: hidden; }
.rk-pod-trofeu { width: 26px; height: 26px; object-fit: contain; }
.rk-pod.lugar-1 .rk-pod-trofeu { width: 34px; height: 34px; }
.rk-pod-lugar {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--vao-dim);
}
/* A coroa fica ATRÁS do avatar, centrada — por isso o ícone não é recortado no espelho. */
.rk-pod-ava { position: relative; display: grid; place-items: center; padding: 6px 0; }
.rk-pod-coroa {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 78px; height: 78px; object-fit: contain; pointer-events: none; opacity: .95;
}
.rk-pod.lugar-1 .rk-pod-coroa { width: 96px; height: 96px; }
.rk-pod-ava canvas { position: relative; }
.rk-pod-nome {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 12.5px;
  color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-pod-dono { font-size: 10px; color: var(--vao-dim); }
.rk-pod-val { font-size: 11.5px; color: var(--rx-rosa); font-weight: 700; }

/* Lista do 4º em diante. */
.rk-linhas { display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow-y: auto; }
.rk-linha {
  display: flex; align-items: center; gap: 9px; padding: 5px 9px; cursor: pointer;
  background: var(--vao); border-radius: 6px; color: var(--sobre-mad);
  box-shadow: inset 0 0 0 2px var(--mad-linha);
  transition: background .1s, box-shadow .1s;
}
.rk-linha:hover { background: var(--vao2); box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx); }
.rk-linha.eu { box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx-rosa); }
.rk-pos {
  flex: none; width: 28px; text-align: center;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 12px; color: var(--vao-dim);
}
.rk-ava { flex: none; display: grid; place-items: center; width: 32px; }
.rk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rk-main b { font-size: 12px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-main small { font-size: 10px; color: var(--vao-dim); }
.rk-val { flex: none; font-size: 11.5px; font-weight: 700; color: var(--rx-rosa); }

/* Coluna de destaques. */
.rk-destaques {
  background: var(--vao); border-radius: 6px; padding: 11px 12px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.rk-destaques h3 { margin-bottom: 8px; }
.rk-destaque { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; }
.rk-destaque + .rk-destaque { box-shadow: inset 0 2px 0 -1px var(--mad-linha); }
.rk-d-rot { font-size: 10px; color: var(--vao-dim); text-transform: uppercase; letter-spacing: .5px; }
.rk-d-val {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 11.5px;
  color: var(--sobre-mad); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------- cartão de perfil */

.caixa-perfil { width: min(520px, 94vw); }
.pf-linhas { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.pf-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--vao); border-radius: 6px; padding: 7px 12px;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
  font-size: 12px; color: var(--sobre-mad-dim);
}
.pf-item b { color: #fff; font-family: Tahoma, Verdana, "Segoe UI", sans-serif; }
.pf-time { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 7px; }
.pf-mon {
  background: var(--vao); border-radius: 6px; padding: 9px 6px; text-align: center;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.pf-mon-nome { font-size: 11.5px; font-weight: 700; color: #fff; }
.pf-mon-sub { font-size: 10px; color: var(--vao-dim); }

/* ------------------------------------------------------------ o Pescador */
/* Dez faixas de pesca em grade. A faixa "atual" (a maior que a sua skill libera) ganha o
   anel roxo de item selecionado; as de cima ficam cinzas e sem clique, como os marcadores
   travados do mapa-múndi. */

.pesca-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pesca-badge {
  flex: none;
  background: var(--vao); border-radius: 6px; padding: 7px 14px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 13px;
  color: var(--sobre-mad); white-space: nowrap;
}
.pesca-badge b { color: var(--rx-rosa); font-size: 15px; }
/* a barra do modal é a mesma peça da coluna da esquerda, só mais alta */
.barra.pesca-modal { flex: 1; min-width: 190px; height: 20px; margin: 0; }
.barra.pesca-modal .fill { background: linear-gradient(90deg, #2f6f8f, #58c8e8); }
.barra.pesca-modal span { font-size: 11px; }
.pesca-dica { margin: 0 0 12px; font-size: 12px; color: var(--sobre-mad-dim); line-height: 1.5; }
.pesca-dica b { color: #fff; }

.pesca-faixas { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.pesca-faixa {
  position: relative;
  background: var(--vao); border: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 2px 0 var(--mad-base);
  padding: 12px 8px 10px; cursor: pointer; color: var(--sobre-mad);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: inherit; text-align: center;
  transition: transform .1s, box-shadow .1s, background .1s;
}
.pesca-faixa:hover:not(:disabled) {
  background: var(--vao2); transform: translateY(-3px);
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx), 0 5px 0 var(--mad-base);
}
.pesca-faixa.on, .pesca-faixa.natural {
  background: var(--vao2);
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx), 0 2px 0 var(--mad-base);
}
.pesca-faixa.trancada { opacity: .38; cursor: not-allowed; filter: grayscale(1); transform: none; }

.pf-peixes { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 36px; }
.pf-peixe { display: grid; place-items: center; }
.pf-nomes {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 11px;
  color: #fff; line-height: 1.3;
}
.pf-nivel { font-size: 10px; color: var(--vao-dim); }
.pf-selo {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 9px; letter-spacing: .5px; text-transform: uppercase;
  border-radius: 4px; padding: 2px 7px; color: #fff;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
}
.pf-selo.natural { background: var(--rx); }
.pf-selo.travado { background: var(--mad-base); }
.pf-selo.meio { background: var(--mad-esc); }

/* ------------------------------------------------ pop-up de confirmação */

.modal-acima { z-index: 55; }
.caixa-confirmar { width: min(430px, 94vw); }
.confirmar-texto { font-size: 13px; line-height: 1.6; color: var(--sobre-mad); margin-bottom: 18px; }
.confirmar-texto b { color: #fff; }
/* Cancelar à esquerda, confirmar à direita — a ordem importa e é sempre esta. */
.confirmar-botoes { display: flex; gap: 10px; }
.confirmar-botoes button { flex: 1; height: 44px; font-size: 13.5px; }

/* ------------------------------------------------- escolha do starter */

.starter-caixa { width: min(620px, 96vw); }
.starter-aviso { font-size: 12.5px; color: var(--sobre-mad-dim); margin: 0 0 16px; }
.starter-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.starter-card {
  background: var(--vao); border: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 3px 0 var(--mad-base);
  padding: 16px 8px 13px; cursor: pointer; color: var(--sobre-mad);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: inherit; transition: transform .1s, box-shadow .1s, background .1s;
}
.starter-card:hover {
  background: var(--vao2); transform: translateY(-4px);
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx), 0 7px 0 var(--mad-base);
}
.starter-card:disabled { opacity: .45; cursor: default; transform: none; }
.starter-card .st-nome {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 14px; font-weight: 700; color: #fff;
  text-shadow: -1px -1px 0 var(--rx-esc), 1px -1px 0 var(--rx-esc),
               -1px 1px 0 var(--rx-esc), 1px 1px 0 var(--rx-esc);
}

/* ----------------------------------------------------- onboarding */
/*
   O quadro dos três passos. É mais largo que o de starter porque o editor de cores é lado a
   lado: o boneco de um lado e as seis peças do outro, para a cor mudar debaixo do olho de quem
   está escolhendo — com as amostras embaixo do boneco, escolher virava rolar a tela.
*/

.ob-caixa { width: min(760px, 96vw); }
/* O quadro nunca passa da altura da tela: com quatro paletas dentro, o corpo rola e o rodapé
   com "É esse mesmo" continua alcançável em qualquer notebook. */
.ob-caixa .modal-corpo { max-height: calc(100vh - 150px); overflow-y: auto; }
.ob-ajuda { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--sobre-mad-dim); }

/* Os pontinhos de progresso, no topo do quadro, à direita do título. */
.ob-passos { display: flex; gap: 6px; margin-left: auto; }
.ob-passos i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha);
}
.ob-passos i.feito { background: var(--rx-esc); }
.ob-passos i.on { background: var(--rx-rosa); box-shadow: inset 0 0 0 2px var(--mad-linha), 0 0 0 3px var(--rx-esc); }

/* --- passo 1: gênero --- */

.ob-generos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ob-genero {
  background: var(--vao); border: 0; border-radius: 6px; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 3px 0 var(--mad-base);
  padding: 18px 8px 14px; color: var(--sobre-mad);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: inherit; transition: transform .1s, box-shadow .1s, background .1s;
}
.ob-genero:hover { background: var(--vao2); transform: translateY(-4px); }
.ob-genero.on {
  box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx), 0 3px 0 var(--mad-base);
}
.ob-genero canvas { image-rendering: pixelated; }
.ob-genero span {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: #fff;
  text-shadow: -1px -1px 0 var(--rx-esc), 1px -1px 0 var(--rx-esc),
               -1px 1px 0 var(--rx-esc), 1px 1px 0 var(--rx-esc);
}

/* --- passo 2: as cores --- */

.ob-editor { display: grid; grid-template-columns: 168px 1fr; gap: 14px; align-items: start; }

.ob-palco {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 8px; border-radius: 6px;
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.ob-boneco canvas, .ob-giro canvas { image-rendering: pixelated; display: block; }
/* As outras três direções, pequenas: o boné e o cabelo mudam bastante de costas. */
.ob-giro { display: flex; gap: 6px; }
.ob-giro canvas {
  border-radius: 4px; background: #00000033;
  box-shadow: inset 0 0 0 2px var(--mad-linha);
}


/* As quatro regiões em DUAS colunas. Empilhadas, as quatro grades de 133 cores somam mais
   altura do que a tela de um notebook tem, e o botão de confirmar ficava abaixo da dobra. */
.ob-pecas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.ob-peca { display: flex; flex-direction: column; gap: 4px; }
.ob-peca-nome {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .8px; color: var(--sobre-mad-dim);
}
/* A paleta do Tibia em GRADE, não em varal: 19 matizes por linha e 7 linhas de
   saturação/brilho, que é a forma em que ela foi gerada. É o que deixa achar "o mesmo azul,
   só mais escuro" descendo uma linha — numa fileira corrida de 133 amostras, não dá. */
/* Amostra de 12 px: 19 colunas cabem em 264 px, e as quatro grades cabem lado a lado sem
   rolagem. Menor que isso o alvo do clique fica difícil; maior, a grade não cabe. */
.ob-cores {
  display: grid; grid-template-columns: repeat(19, 12px); gap: 2px;
  justify-content: center; padding: 4px; border-radius: 5px;
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha);
}
.ob-cor {
  width: 12px; height: 12px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  box-shadow: inset 0 0 0 1px #0006;
  transition: transform .06s, box-shadow .06s;
}
.ob-cor:hover {
  transform: scale(1.6); box-shadow: inset 0 0 0 1px #0006, 0 0 0 1px #fff;
  position: relative; z-index: 2;
}
.ob-cor.on {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--mad-linha);
  transform: scale(1.3); position: relative; z-index: 1;
}

.ob-rodape { display: flex; gap: 10px; margin-top: 16px; }
.ob-rodape button { flex: 1; height: 40px; font-size: 13px; }
.ob-rodape #ob-pronto { flex: 1.4; }

/* ------------------------------------------------------ rodapé de fan game */
/*
   O aviso de que isto é projeto de fã, e o caminho para os termos. Aparece nas DUAS telas: no
   portal (para quem ainda vai criar conta ler antes) e no jogo (para quem entrou por sessão
   salva e nunca viu a tela de entrada).

   Fica em `position: fixed` e centralizado, mas com `pointer-events: none` no bloco e `auto`
   só no link — assim ele nunca rouba um clique do jogo, e o link continua clicável.
*/

/*
   O bloco fica ENTRE o seletor de idioma (à esquerda, 10 px) e a versão (à direita, 8 px), com
   folga para os dois: centralizado num `left/right` explícito em vez de `left: 50%`, senão um
   texto longo passa por baixo do seletor e as duas coisas se sobrepõem.
*/
.rodape-fan {
  position: fixed; left: 90px; right: 70px; bottom: 8px; z-index: 70;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  pointer-events: none;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-size: 9.5px; line-height: 1.45;
  text-align: center; color: #fff; opacity: .62;
  text-shadow:
    -1px -1px 0 var(--mad-linha), 1px -1px 0 var(--mad-linha),
    -1px 1px 0 var(--mad-linha), 1px 1px 0 var(--mad-linha);
}
.rodape-fan > span { max-width: 640px; }
.rodape-fan a {
  pointer-events: auto; color: var(--rx-rosa); text-decoration: none; font-weight: 700;
  border-bottom: 1px dotted currentColor;
}
.rodape-fan a:hover { color: #fff; }
/* Dentro do jogo o rodapé divide a linha com a versão, no canto direito: encolhe e sai da frente. */
.rodape-fan-jogo { font-size: 9px; opacity: .5; }
/* Enquanto o portal está na tela quem manda é o rodapé DELE — os dois são `fixed` no mesmo
   canto e, sem isto, as duas frases se sobrepõem em cima da tela de login. */
#app.hidden ~ .rodape-fan-jogo { display: none; }

/* Versão do build, discreta no canto de baixo à direita. Fica por cima de tudo (inclusive
   dos modais) de propósito: num print de bug ela precisa aparecer. */
.versao {
  position: fixed; right: 8px; bottom: 6px; z-index: 70; pointer-events: none;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: .5px; color: #fff; opacity: .55;
  text-shadow:
    -1px -1px 0 var(--mad-linha), 1px -1px 0 var(--mad-linha),
    -1px 1px 0 var(--mad-linha), 1px 1px 0 var(--mad-linha);
}

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg,
    var(--mad-esc) 0 8px, var(--mad) 8px calc(100% - 8px), var(--mad-quente) calc(100% - 8px) 100%);
  border: 0; border-radius: 7px; color: #fff;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  padding: 12px 24px; z-index: 60; font-size: 13px;
  text-shadow: -1px -1px 0 var(--mad-base), 1px -1px 0 var(--mad-base),
               -1px 1px 0 var(--mad-base), 1px 1px 0 var(--mad-base);
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz),
    0 4px 0 var(--mad-base),
    0 10px 34px #000a;
}

/* Voltar ao Centro Pokémon de dentro de uma hunt. Mesmo canto do HUD da arena PvP — os
   dois nunca aparecem ao mesmo tempo (um é hunt, o outro é arena). */
.ir-centro {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  height: 34px; padding: 0 14px; font-size: 11.5px;
  display: flex; align-items: center; gap: 7px;
}
.ir-centro:disabled { opacity: .5; cursor: default; }
.ir-centro-conta:empty { display: none; }
.ir-centro-conta {
  font-size: 10.5px; color: var(--rx-luz); min-width: 26px; text-align: right;
}

/* O preço de fechar o jogo no meio da caçada, embaixo do botão que evita isso. Fica em vão
   escuro, discreto: é uma regra que se lê uma vez e não se quer reler a cada hunt. */
.ir-centro-aviso {
  position: absolute; top: 50px; right: 10px; z-index: 3;
  max-width: 210px; padding: 5px 9px; border-radius: 6px;
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha);
  font-size: 10px; line-height: 1.35; color: var(--vao-dim); text-align: right;
  pointer-events: none;
}

/* -------------------------------------------------------------------- ORBs */

.orbs-corpo { display: flex; flex-direction: column; gap: 12px; }

/* ---- o "swap": dois campos ligados, uma ação ----
   A tela antiga era um formulário: seis rótulos, um seletor de rede, dois avisos e três
   seções abertas ao mesmo tempo. Quem abre aqui quer fazer UMA coisa — trocar dinheiro por
   ORB, ou o contrário — e o resto é consulta. Então o resto virou `<details>` fechado. */

.sw { display: flex; flex-direction: column; gap: 2px; }
.sw-caixa {
  padding: 11px 13px; border-radius: 8px;
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.sw-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10.5px; color: var(--vao-dim); margin-bottom: 5px;
}
.sw-topo em { font-style: normal; opacity: .8; }
.sw-linha { display: flex; align-items: center; gap: 10px; }
/* O número é o herói da caixa: grande, sem moldura, sem competir com nada. */
.sw-linha input {
  flex: 1; min-width: 0; border: 0; background: none; color: #fff;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 24px;
  padding: 0; outline: none;
}
.sw-linha input::-webkit-outer-spin-button,
.sw-linha input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sw-linha input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.sw-moeda {
  flex: none; display: flex; align-items: center; gap: 5px;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 12.5px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--vao2); box-shadow: inset 0 0 0 1px var(--mad-linha);
}
.sw-moeda.usdt { color: #3ddc84; }
.sw-moeda.orb { color: var(--rx-rosa); }

/* A seta entre as caixas — o sinal de "isto vira aquilo", que é o que a tela faz. */
.sw-seta {
  align-self: center; margin: -9px 0; z-index: 1;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; font-size: 13px; color: #fff;
  background: var(--rx); box-shadow: inset 0 0 0 2px var(--mad-linha), 0 2px 0 var(--mad-base);
}

.sw-max {
  border: 0; border-radius: 4px; cursor: pointer; padding: 2px 7px;
  font-family: inherit; font-weight: 700; font-size: 10px; color: #fff; background: var(--rx);
}
.sw-max:hover { filter: brightness(1.15); }

.sw-destino { display: flex; flex-direction: column; gap: 5px; }
.sw-destino > label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 10.5px; color: var(--vao-dim);
}
.sw-destino input {
  height: 36px; padding: 0 11px; border: 0; border-radius: 7px;
  background: var(--vao); color: var(--sobre-mad);
  font-family: inherit; font-size: 12px;
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.sw-destino input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--mad-linha), inset 0 0 0 4px var(--rx); }
/* Endereço malformado acende ANTES do clique: saque não volta, e descobrir o erro depois
   de confirmar não é descobrir, é perder. */
.sw-destino input.ruim { box-shadow: inset 0 0 0 2px var(--vermelho); }
.sw-erro { margin: 0; min-height: 14px; font-size: 10.5px; color: var(--vermelho); }

.sw-copiavel {
  display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 7px;
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.sw-copiavel code {
  flex: 1; min-width: 0; font-size: 11px; color: #7fd8ff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-copiar {
  flex: none; border: 0; border-radius: 5px; cursor: pointer; padding: 5px 10px;
  font-family: inherit; font-weight: 700; font-size: 10.5px; color: #fff; background: var(--rx);
}
.sw-copiar:hover { filter: brightness(1.15); }

.sw-acao { height: 42px; font-size: 14px; width: 100%; }
.sw-aviso { margin: 0; }

/* ---- o que não é preciso para agir ---- */
.orbs-det {
  border-radius: 7px; background: var(--vao2); box-shadow: inset 0 0 0 1px var(--mad-linha);
}
.orbs-det > summary {
  cursor: pointer; padding: 9px 12px; list-style: none;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--sobre-mad-dim);
}
.orbs-det > summary::-webkit-details-marker { display: none; }
.orbs-det > summary::before { content: "▸ "; color: var(--rx-rosa); }
.orbs-det[open] > summary::before { content: "▾ "; }
.orbs-det-corpo { padding: 0 12px 12px; }
.orbs-det .orbs-caixa { background: none; box-shadow: none; padding: 0; }

.orbs-saldo {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 14px; border-radius: 7px; background: var(--vao);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 12px; color: var(--vao-dim);
}
.orbs-saldo b { font-size: 22px; color: var(--rx-rosa); }
.orbs-un { font-size: 12px; color: var(--rx-rosa); }
.orbs-saldo em { margin-left: auto; font-style: normal; font-size: 12px; opacity: .8; }

.orbs-precos {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  padding: 10px 14px; border-radius: 7px; background: var(--vao);
  font-size: 12px; color: var(--vao-dim);
}
.orbs-precos b { color: #fff; }
.orbs-precos .orbs-nota { flex-basis: 100%; margin: 4px 0 0; }
.orbs-nota { margin: 0; font-size: 11px; line-height: 1.5; color: var(--vao-dim); opacity: .85; }
.orbs-nota b { color: #fff; opacity: 1; }

/* O painel público do caixa. Fica com destaque próprio: é o compromisso de transparência. */
.orbs-caixa {
  padding: 12px 14px; border-radius: 7px; background: var(--vao2);
  box-shadow: inset 0 0 0 2px #ffd16644;
}
.orbs-caixa h4, .orbs-secao h4 {
  margin: 0 0 8px; font-size: 11px; color: var(--sobre-mad-dim);
  text-transform: uppercase; letter-spacing: .5px;
}
.orbs-endereco {
  display: block; margin: 8px 0; padding: 8px 10px; border-radius: 5px;
  background: #0007; font-family: Consolas, monospace; font-size: 11px;
  color: var(--rx-rosa); word-break: break-all;
}
.orbs-aviso {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 5px;
  background: #4a1a1a66; box-shadow: inset 0 0 0 1px #d8574a55;
  font-size: 11px; line-height: 1.5; color: #ffc9c2;
}
/* O aviso de risco das Gemas, nos dois modais. Vários parágrafos dentro da mesma caixa
   vermelha: são três riscos diferentes (RMT permitido, golpe entre jogadores, endereço
   errado) e emendá-los num parágrafo só faria ninguém ler o terceiro. */
.orbs-risco { margin: 12px 0 0; }
.orbs-risco p { margin: 0 0 7px; }
.orbs-risco p:last-child { margin-bottom: 0; }
.orbs-risco b { color: #fff; }

.orbs-link { font-size: 11px; color: #ffd166; text-decoration: none; }
.orbs-link:hover { text-decoration: underline; }
.orbs-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px; margin-top: 10px;
}
.orbs-numeros div {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 5px; background: #0004;
}
.orbs-numeros span { font-size: 10px; color: var(--vao-dim); text-transform: uppercase; }
.orbs-numeros b { font-size: 15px; color: #3ddc84; }

.orbs-secao {
  padding: 12px 14px; border-radius: 7px; background: var(--vao);
}
.orbs-campo { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.orbs-campo > span { flex: 0 0 auto; font-size: 11.5px; color: var(--vao-dim); }
.orbs-campo input, .orbs-campo select {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px;
  border: 0; border-radius: 5px; background: #0007; color: #fff;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-size: 12px;
  box-shadow: inset 0 0 0 2px var(--vao-luz);
}
.orbs-campo input:focus, .orbs-campo select:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--rx-clr); }
.orbs-receber { margin: 8px 0; font-size: 12px; color: var(--vao-dim); }
.orbs-receber b { color: #3ddc84; font-size: 14px; }
.orbs-btn { height: 34px; padding: 0 16px; font-size: 12px; }

.orbs-lista { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.orbs-linha {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 5px; background: #0004;
  font-size: 11.5px; color: var(--vao-dim);
}
.orbs-l-tipo { flex: 1; }
.orbs-l-valor.up { color: #3ddc84; font-weight: 700; }
.orbs-l-valor.down { color: var(--vermelho); font-weight: 700; }
.orbs-l-saldo { min-width: 70px; text-align: right; opacity: .7; }
.orbs-l-status { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; }
.orbs-linha.saque.confirmado .orbs-l-status { color: #3ddc84; }
.orbs-linha.saque.falhou .orbs-l-status { color: var(--vermelho); }
.orbs-linha.saque.enviando .orbs-l-status,
.orbs-linha.saque.pendente .orbs-l-status { color: #ffd166; }
.orbs-l-status em { font-style: normal; opacity: .7; text-transform: none; }
.orbs-mini {
  border: 0; border-radius: 4px; cursor: pointer;
  width: 22px; height: 22px; background: var(--vao-luz); color: #fff; font-weight: 700;
}
.orbs-mini:hover { background: var(--vermelho); }

/* ---------------------------------------------------------------- loja VIP */

.loja-topo {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
/* Vitrine larga: são cinco colunas de cartão mais o menu lateral. Um quadrado de 880 px
   deixaria três, e a Loja é a tela em que se compara preço lado a lado. */
.modal-caixa.quadrado[data-modal="shop"] { width: min(94vw, 1000px); }
/* Saldo + Depósito + Withdraw, agrupados: são as três coisas que o jogador olha junto. */
.loja-carteira { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.loja-saldo {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px; background: var(--vao);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 12px; font-weight: 700; color: var(--vao-dim);
}
/* Ciano do DIAMANTE: a mesma cor do sprite (gem/ice), para o número e o ícone lerem como
   uma coisa só. A GEMA ficou com o rosa do sprite dela (gem/psychic), lá embaixo. */
.loja-saldo b { color: #7fd8ff; font-size: 14px; }
.loja-mini { height: 30px; padding: 0 12px; font-size: 11px; }

/* O selo da moeda, do lado do número. `vertical-align` alinha com a linha de base do texto —
   sem isso o ícone flutua um pixel acima e a linha inteira parece torta. */
.selo-moeda { vertical-align: -2px; image-rendering: pixelated; }

/* Sem saldo o botão do produto vira atalho para comprar diamante, então NÃO é um botão
   morto: mantém o clique e ganha a borda âmbar de "falta alguma coisa". */
.loja-btn.sem-saldo {
  opacity: .8;
  box-shadow: inset 0 0 0 2px #ffd16688;
}
/* A Loja usa o MESMO esqueleto de duas colunas do Mercado da Comunidade (`.cm-corpo`,
   `.cm-filtros`, `.cm-painel`): menu de seções à esquerda, vitrine à direita, cada um rolando
   por conta própria. Era uma fileira de três abas no topo e uma grade única embaixo — com 61
   produtos, "Mercado" sozinho misturava pokébola, VIP, troca de nome e bênção. */
.loja-filtros { width: 168px; }
.loja-painel { gap: 10px; }
.loja-cabeca {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 2px 8px;
}
.loja-cabeca h4 {
  margin: 0; font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 12.5px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .8px;
  text-shadow:
    -2px -2px 0 var(--mad-base), 2px -2px 0 var(--mad-base),
    -2px 2px 0 var(--mad-base), 2px 2px 0 var(--mad-base);
}
/* A regra fica entre o título e a contagem, e empurra as duas para as pontas. */
.loja-regra { flex: 1; font-size: 10.5px; color: var(--vao-dim); }
.loja-conta { flex: none; font-size: 10.5px; color: var(--sobre-mad-dim); }

/* "O que está ativo agora" sobe para o topo, ao lado do saldo: é estado da conta, e não uma
   prateleira. Some sozinho quando não há nada correndo. */
.loja-ativos:empty { display: none; }
.loja-ativos h4 {
  margin: 0 0 4px; font-size: 10px; color: var(--sobre-mad-dim);
  text-transform: uppercase; letter-spacing: .5px;
}
.loja-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.loja-selos em { font-size: 11.5px; color: var(--vao-dim); opacity: .7; }
.loja-selo {
  padding: 4px 9px; border-radius: 5px; background: var(--vao);
  font-size: 10.5px; font-weight: 700; color: var(--vao-dim);
  box-shadow: inset 0 0 0 1px var(--vao-luz);
}
.loja-selo.vip { color: #ffd166; box-shadow: inset 0 0 0 1px #ffd16655; }
.loja-selo.bless { color: var(--verde); box-shadow: inset 0 0 0 1px #6fd08a55; }

/* Quem rola é a GRADE, não o modal: o cabeçalho da seção e o menu ficam parados enquanto a
   vitrine anda — a mesma regra da lista do Mercado da Comunidade. */
.loja-grade {
  flex: 1; min-height: 0; overflow-y: auto; align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px;
  padding-right: 4px;
}
.loja-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 11px 10px; border-radius: 7px; background: var(--vao);
  box-shadow: inset 0 0 0 2px var(--vao-luz);
  text-align: center;
}
.loja-card:hover { box-shadow: inset 0 0 0 2px var(--rx-esc); }
.loja-arte { height: 50px; display: grid; place-items: center; }
/* O selo do canto: "1×/semana" e, quando está em espera, quanto falta. */
.loja-tag {
  position: absolute; top: 6px; right: 6px;
  padding: 1px 5px; border-radius: 4px; background: var(--vao-luz);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-weight: 700; font-size: 8.5px; letter-spacing: .4px; color: var(--sobre-mad-dim);
}
.loja-tag.espera { background: var(--mad-base); color: #ffd166; }
/* A duração de um boost é o que separa um card do outro dentro do mesmo tipo: em roxo, que
   aqui é a cor do que está aceso. */
.loja-tag.duracao { background: var(--rx-esc); color: #fff; font-size: 9.5px; }
.loja-nome {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 12px; font-weight: 700; color: #fff; line-height: 1.25;
}
.loja-desc { flex: 1; font-size: 10.5px; line-height: 1.4; color: var(--vao-dim); }
.loja-btn { width: 100%; height: 30px; padding: 0 8px; font-size: 11.5px; }
.loja-btn:disabled { opacity: .45; cursor: default; }

/* Ícone cujo arquivo é uma TIRA de quadros (o Pacote de Suprimentos, 32×576). Os 18 quadros
   são iguais, então não há animação: a caixa mostra o de cima e pronto. Ver `ICONES_EM_TIRA`
   no app.js para o porquê. */
.ico-tira {
  display: inline-block; flex: none;
  background-position: 0 0;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* ------------------------------------------------- comprar diamantes (R$) */
/*
   Reaproveita as caixas do painel de gemas (`.orbs-secao`, `.orbs-campo`, `.orbs-btn`): são
   a mesma natureza de tela — dinheiro de verdade entrando — e duplicar o estilo faria as
   duas divergirem no primeiro ajuste.
*/
/* A tela de compra reaproveita `.orbs-saldo`, que é da GEMA e por isso rosa. Aqui o número é
   DIAMANTE: volta ao ciano do sprite dele, senão o jogador lê o saldo errado. */
.dia-corpo .orbs-saldo b { color: #7fd8ff; }

.dia-pacotes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px; margin-bottom: 4px;
}
.dia-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--vao2); box-shadow: inset 0 0 0 2px var(--vao-luz);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; color: var(--vao-dim);
}
.dia-card:hover { box-shadow: inset 0 0 0 2px var(--rx-clr); }
.dia-card b { font-size: 16px; color: #7fd8ff; }
.dia-card span { font-size: 11.5px; }
.dia-card img { image-rendering: pixelated; }
/* O pacote que COBRE o que faltou para a compra que trouxe o jogador até aqui. */
.dia-card.sugerido { box-shadow: inset 0 0 0 2px #ffd166; }
.dia-off {
  position: absolute; top: -6px; right: -4px;
  padding: 2px 6px; border-radius: 4px; background: var(--verde);
  font-size: 10px; font-weight: 700; font-style: normal; color: #10240f;
}
/* O aceite da contribuição voluntária. Fica ANTES dos botões e com peso próprio: é a última
   coisa lida antes de o dinheiro sair, e um texto cinza-claro perdido no rodapé não cumpriria
   o papel que ele tem de cumprir. */
.dia-aceite {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  margin-top: 12px; padding: 10px 12px; border-radius: 6px;
  background: var(--vao2); box-shadow: inset 0 0 0 1px var(--vao-luz);
  font-size: 12px; line-height: 1.5; color: var(--sobre-mad-dim);
}
/* CAIXA DE MARCAR, não o interruptor da casa.
 *
 * Todo `input[type=checkbox]` do jogo é um interruptor liga/desliga de 46×24 com manopla
 * corrediça. Aqui isso não serve: um interruptor diz "ligado/desligado", e o que se pede
 * neste ponto é um ACEITE — a forma que todo mundo reconhece como "li e concordo" é a
 * caixinha com o certo dentro. Encolher o interruptor para 17px foi pior ainda: o trilho
 * ficou menor que a manopla, e o `left: 26px` do estado ligado a jogava para fora, o que
 * desenhava dois quadrados soltos em vez de um controle.
 *
 * O seletor repete `[type="checkbox"]` de propósito: empata em especificidade com as regras
 * globais lá de cima e vence por vir depois, mas o empate é frágil — com o atributo aqui, a
 * vitória não depende mais da ordem do arquivo.
 */
.dia-aceite input[type="checkbox"] {
  flex: none; width: 20px; height: 20px; margin: 1px 0 0; cursor: pointer;
  border-radius: 5px;
  background: var(--vao);
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 2px 0 var(--mad-base);
  /* Apagado enquanto não aceito: presente, mas claramente "falta isto aqui". */
  opacity: .5;
  transition: opacity .12s, background .12s;
}
/* O "certo": duas bordas de um retângulo, giradas 45°. Desenhado em CSS e não em fonte —
   glifo de check muda de forma (e às vezes some) conforme a fonte instalada. */
.dia-aceite input[type="checkbox"]::before {
  content: "";
  position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 3px 3px 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .12s;
}
.dia-aceite input[type="checkbox"]:checked {
  opacity: 1;
  background: linear-gradient(180deg, var(--rx-clr) 0 45%, var(--rx) 45% 100%);
}
/* `left` repetido porque a regra global move a manopla para 26px no estado ligado. */
.dia-aceite input[type="checkbox"]:checked::before { left: 6px; opacity: 1; }
.dia-aceite input[type="checkbox"]:active::before { top: 3px; }

.dia-aceite:hover { box-shadow: inset 0 0 0 1px var(--rx-clr); }
.dia-aceite:hover input[type="checkbox"] { opacity: .8; }
/* Marcado, o bloco inteiro confirma — não só a caixinha. */
.dia-aceite:has(input:checked) { color: #fff; box-shadow: inset 0 0 0 1px var(--rx-clr); }

.dia-metodos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dia-metodos .orbs-btn:disabled { opacity: .45; cursor: default; }

/* O texto legal completo, no pé. Menor e mais apagado que o resto — ele existe para estar
   ali por inteiro, não para disputar atenção com o preço. */
.dia-legal { margin-top: 10px; font-size: 10.5px; line-height: 1.55; opacity: .7; }

/* ------------------------------------------------------------------ idioma */

/* As três bandeiras do canto inferior esquerdo. Ficam sobre TUDO (inclusive a tela de
   login e os modais) porque trocar de idioma tem de ser possível de qualquer lugar —
   inclusive de dentro de um modal que o jogador não está conseguindo ler. */
.idiomas {
  position: fixed; left: 10px; bottom: 10px; z-index: 60;
  display: flex; gap: 4px;
  padding: 5px 6px; border-radius: 7px;
  background: linear-gradient(180deg,
    var(--mad-esc) 0 6px, var(--mad) 6px calc(100% - 6px), var(--mad-quente) calc(100% - 6px) 100%);
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz),
    0 3px 0 var(--mad-base);
}
.idioma-btn {
  border: 0; border-radius: 5px; cursor: pointer;
  width: 30px; height: 24px; padding: 0;
  background: var(--vao); filter: saturate(.85) brightness(.8); opacity: .6;
  transition: filter .12s, transform .12s;
  display: grid; place-items: center;
}
.idioma-btn svg { width: 22px; height: 16px; display: block; }
.idioma-btn:hover { filter: none; opacity: 1; transform: translateY(-1px); }
.idioma-btn.on {
  filter: none; opacity: 1;
  background: linear-gradient(180deg, var(--rx-esc) 0 40%, var(--rx) 40% 100%);
  box-shadow: inset 0 0 0 2px var(--rx-clr);
}

/* As redes do projeto, na mesma caixa das bandeiras. O filete separa as duas coisas: à
   esquerda escolhe-se o IDIOMA (que muda a tela), à direita SAI-SE do jogo para o Discord ou
   o X — e um clique sem querer no segundo grupo custa a aba. */
.idiomas-sep {
  width: 2px; align-self: stretch; margin: 0 3px;
  background: var(--mad-linha); box-shadow: 1px 0 0 var(--mad-luz2);
}
.rede-btn {
  border: 0; border-radius: 5px; cursor: pointer;
  width: 26px; height: 24px; padding: 0;
  background: var(--vao); opacity: .72;
  display: grid; place-items: center;
  transition: opacity .12s, transform .12s;
}
.rede-btn img { display: block; image-rendering: auto; }
.rede-btn:hover { opacity: 1; transform: translateY(-1px); }
.rede-btn.discord:hover { background: #5865f2; }
.rede-btn.x:hover { background: #000; }

/* --------------------------------------------------- ficha do treinador */
/* O modal que abre no retrato: os números do jogo em cima, as opções de conta embaixo. */

/* O retrato do painel vira botão. Sem o aviso visual, ninguém descobre que ele clica. */
.tr-retrato.clicavel { cursor: pointer; border-radius: 6px; transition: filter .12s, transform .08s; }
.tr-retrato.clicavel:hover { filter: brightness(1.15); transform: translateY(-1px); }
.tr-retrato.clicavel:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rx); }

.pf-topo {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  padding: 12px; border-radius: 7px;
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.pf-retrato { flex: none; width: 56px; height: 56px; display: grid; place-items: center; }
.pf-retrato canvas { image-rendering: pixelated; }
.pf-id { flex: 1; min-width: 0; }
.pf-nick {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 17px;
  color: #fff; letter-spacing: .5px;
}
.pf-nivel { font-size: 11.5px; color: var(--sobre-mad-dim); margin-bottom: 5px; }
.pf-nivel b { color: var(--rx-rosa); }

/* Os seis números em destaque. Grade que se acomoda: em três colunas no modal aberto, em
   duas no celular. */
.pf-blocos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px;
  margin-bottom: 16px;
}
.pf-bloco {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 11px 8px; border-radius: 7px;
  background: var(--vao2); box-shadow: inset 0 0 0 1px var(--mad-linha), 0 2px 0 var(--mad-base);
}
.pf-bloco b {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-size: 21px; color: #fff;
  text-shadow: -1px -1px 0 var(--mad-base), 1px -1px 0 var(--mad-base),
               -1px 1px 0 var(--mad-base), 1px 1px 0 var(--mad-base);
}
.pf-bloco span {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--sobre-mad-dim);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700;
}
.pf-bloco em { font-style: normal; font-size: 9.5px; color: var(--vao-dim); }

.pf-secao {
  display: flex; flex-direction: column; gap: 1px; margin-bottom: 16px;
  padding: 4px 10px; border-radius: 7px;
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha), 0 1px 0 var(--mad-luz2);
}
.pf-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 12.5px; color: var(--sobre-mad-dim);
}
.pf-linha + .pf-linha { box-shadow: inset 0 1px 0 var(--vao2); }
.pf-linha b { color: #fff; font-weight: 700; text-align: right; }
.pf-linha em { font-style: normal; font-size: 10px; margin-left: 6px; }
.pf-ok { color: var(--verde); }
.pf-pendente { color: var(--rx-rosa); }
.pf-carregando, .pf-aviso { padding: 12px 0; font-size: 12px; font-style: italic; color: var(--vao-dim); }

.pf-acao {
  width: 100%; height: 40px; margin: 10px 0 4px;
  border: 0; border-radius: 6px; cursor: pointer;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .8px; text-transform: uppercase;
  color: #4a3608; text-shadow: 0 1px 0 #ffffff88;
  background: linear-gradient(180deg, #ffe07a 0 8px, #fccb0f 8px 62%, #e8a800 62% 100%);
  box-shadow: inset 0 0 0 2px var(--mad-linha), 0 3px 0 var(--mad-base);
  transition: filter .12s, transform .06s;
}
.pf-acao:hover:not(:disabled) { filter: brightness(1.07); }
.pf-acao:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--mad-linha); }
.pf-acao:disabled { opacity: .5; cursor: default; filter: grayscale(.5); }
.pf-ajuda { margin: 0 0 10px; font-size: 10.5px; line-height: 1.5; color: var(--vao-dim); }

/* O aviso da tela de senha nova, dentro do quadro de entrada. */
.login-aviso {
  margin: 0; padding: 9px 11px; border-radius: 6px;
  font-size: 12px; line-height: 1.5; color: var(--sobre-mad-dim);
  background: var(--vao); box-shadow: inset 0 0 0 2px var(--mad-linha);
}

/* SAIR, na mesma tábua das bandeiras e à esquerda delas. Vermelho só no hover: aceso o tempo
   todo, um botão de sair no canto da tela puxa mais atenção do que merece. */
.sair-btn {
  border: 0; border-radius: 5px; cursor: pointer;
  width: 30px; height: 24px; padding: 0;
  display: grid; place-items: center;
  color: var(--sobre-mad-dim); background: var(--vao);
  opacity: .72;
  transition: color .12s, background .12s, opacity .12s, transform .12s;
}
.sair-btn:hover {
  opacity: 1; color: #fff; background: var(--vermelho); transform: translateY(-1px);
}
.sair-btn:active { transform: translateY(1px); }
.sair-btn svg { display: block; }

/* O filete que separa "encerrar a sessão" de "escolher a língua". Sem ele, quem vai clicar na
   bandeira do Brasil erra para a esquerda e cai fora do jogo. */
.sair-sep {
  width: 2px; align-self: stretch; margin: 1px 2px; border-radius: 1px;
  background: var(--mad-base); box-shadow: 1px 0 0 var(--mad-luz2);
}

/* As bandeiras DO CHAT, na barra de canais. Menores: dividem espaço com três abas. Seguem
   o vocabulário do chat (escuro + dourado), não o da madeira — estão dentro da barra de
   abas dele. */
.chat-idiomas { display: flex; gap: 3px; margin-left: 4px; }
.chat-idioma {
  border: 1px solid var(--ch-borda); border-radius: 4px; cursor: pointer;
  width: 21px; height: 28px; padding: 0;
  background: linear-gradient(180deg, #1e283580, #0b111a99);
  filter: saturate(.85) brightness(.8); opacity: .6;
  transition: filter .12s, opacity .12s, border-color .12s;
  display: grid; place-items: center;
}
.chat-idioma svg { width: 17px; height: 12px; display: block; }
.chat-idioma:hover { filter: none; opacity: 1; }
.chat-idioma.on {
  filter: none; opacity: 1;
  border-color: var(--ch-ouro); box-shadow: inset 0 -2px 0 var(--ch-ouro-luz);
}

/* ---------------------------------------------------------------- arena PvP */

/* O ELO no painel do treinador, logo abaixo dos recursos. É um vão, como as barras: o
   número é miúdo e precisa do fundo escuro para ficar legível. */
/* O ELO herda `.tr-info`; aqui só o dourado que o distingue das outras linhas. */
.tr-elo .elo-selo { color: #ffd166; font-size: 12px; }
.tr-elo b { color: #ffd166; }
.tr-elo em { margin-left: auto; font-style: normal; font-size: 10px; opacity: .8; }

/* --------- o HUD do canto superior direito, dentro do palco --------- */

.pvp-hud {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
  width: 208px; padding: 9px 10px 8px; border-radius: 7px;
  background: linear-gradient(180deg,
    var(--mad-esc) 0 8px, var(--mad) 8px calc(100% - 8px), var(--mad-quente) calc(100% - 8px) 100%);
  box-shadow:
    inset 0 0 0 2px var(--mad-linha),
    inset 0 0 0 4px var(--mad-luz),
    0 3px 0 var(--mad-base);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
}
.pvp-hud-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.pvp-hud-nome {
  font-size: 12px; font-weight: 700; color: #fff;
  text-shadow:
    -1px -1px 0 var(--mad-base), 1px -1px 0 var(--mad-base),
    -1px 1px 0 var(--mad-base), 1px 1px 0 var(--mad-base);
}
.pvp-hud-dentro { font-size: 9.5px; font-weight: 700; color: var(--sobre-mad-dim); }
.pvp-hud-elo {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 7px; border-radius: 5px; background: var(--vao);
  font-size: 10.5px; font-weight: 700; color: var(--vao-dim);
}
.pvp-hud-elo b { color: #ffd166; font-size: 12px; }
.pvp-hud-elo em { margin-left: auto; font-style: normal; opacity: .85; }

/* O botão de sair usa o mesmo molde roxo do resto (a regra base já o inclui pela lista de
   seletores lá em cima); aqui só a caixa e a contagem. */
#pvp-sair {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 10px; font-size: 11px;
}
#pvp-sair:disabled { opacity: .45; cursor: default; }
.pvp-sair-conta {
  font-size: 12px; color: #ffd166; min-width: 34px; text-align: right;
}
.pvp-hud-aviso {
  text-align: center; font-size: 9.5px; font-weight: 700;
  color: var(--vermelho); text-transform: uppercase; letter-spacing: .4px;
  text-shadow: 0 1px 0 var(--mad-base);
}
.pvp-hud-aviso.livre { color: var(--verde); }

/* ------------------------- a tela de escolha ------------------------- */

.pvp-intro { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--sobre-mad); }
.pvp-regras {
  margin: 0 0 14px; padding: 10px 12px 10px 26px; border-radius: 6px;
  background: var(--vao); list-style: disc;
}
.pvp-regras li { font-size: 12px; line-height: 1.65; color: var(--vao-dim); }
.pvp-regras b { color: #fff; }
.pvp-regras .up { color: var(--verde); font-weight: 700; }
.pvp-regras .down { color: var(--vermelho); font-weight: 700; }

.pvp-arenas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pvp-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: 7px; background: var(--vao);
  box-shadow: inset 0 0 0 2px var(--vao-luz);
}
.pvp-card.aqui { box-shadow: inset 0 0 0 2px var(--rx-clr); }
.pvp-card-nome {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 14px; font-weight: 700; color: #fff;
}
.pvp-card-dentro { font-size: 11.5px; color: var(--vao-dim); }
.pvp-card-dentro b { color: #ffd166; font-size: 13px; }
.pvp-entrar { height: 34px; padding: 0 12px; font-size: 12px; }
.pvp-entrar:disabled { opacity: .45; cursor: default; }

.pvp-placar { margin-top: 16px; }
.pvp-placar h4 {
  margin: 0 0 8px; font-size: 12px; color: var(--sobre-mad-dim);
  text-transform: uppercase; letter-spacing: .5px;
}
.pvp-placar-lista { display: flex; flex-direction: column; gap: 3px; }
.pvp-linha {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 5px; background: var(--vao);
  font-size: 11.5px; color: var(--vao-dim);
}
.pvp-linha.eu { background: var(--vao2); box-shadow: inset 0 0 0 1px var(--rx-clr); }
.pvp-pos { width: 20px; font-weight: 700; color: var(--sobre-mad-dim); }
.pvp-nick { flex: 1; color: #fff; font-weight: 700; }
.pvp-kd { font-size: 10.5px; opacity: .85; }
.pvp-elo { color: #ffd166; font-weight: 700; min-width: 62px; text-align: right; }

/* Tela média (notebook de 1366/1440/1600): as nove abas ainda cabem numa linha só, mas não
   com o corpo cheio. Encolhem o ícone, o vão e a fonte JUNTOS — e é isso que evita o pior dos
   mundos, que é o texto sendo cortado no meio da palavra. O `!important` no ícone é a única
   forma de vencer o `width` inline que o JS escreve ao recortar o atlas. */
@media (max-width: 1600px) {
  .menu-topo { gap: 5px; padding: 10px 8px; }
  .menu-topo button { font-size: 12.5px; gap: 9px; padding: 0 7px; }
  .menu-topo button > :first-child {
    width: 18px !important; height: 18px !important;
    box-shadow: 0 0 0 3px #a355c4, 0 0 0 5px #6d2f96;
  }
}

/* Notebook estreito: mais um degrau, pelo mesmo motivo. Abaixo de 1100 px o menu quebra em
   duas linhas (ver o bloco mobile) e o corpo volta ao normal. */
@media (max-width: 1400px) {
  .menu-topo button { font-size: 11.5px; gap: 7px; padding: 0 5px; }
  .menu-topo button > :first-child {
    width: 16px !important; height: 16px !important;
    box-shadow: 0 0 0 3px #a355c4, 0 0 0 5px #6d2f96;
  }
}

/* Abaixo disto nove abas numa linha só não cabem sem cortar palavra — nem encolhendo mais a
   fonte, que já está no limite do legível. Então o menu passa a quebrar em duas linhas, muito
   antes de o resto do layout virar mobile: rótulo cortado é pior do que menu mais alto. */
@media (max-width: 1280px) {
  .menu-topo { flex-wrap: wrap; }
  .menu-topo button { flex: 1 1 140px; max-width: none; font-size: 13px; gap: 10px; padding: 0 8px; }
  .menu-topo button > :first-child { width: 20px !important; height: 20px !important; }
}

/* ------------------------------------------------------------------ mobile */

/* No celular a página volta a ser um documento que rola: com `flex:1` o app continuava
   preso à altura da janela e as linhas do grid se sobrepunham (o palco cobria o painel do
   treinador). O palco ganha altura fixa em vh e o resto empilha embaixo. */
@media (max-width: 1100px) {
  html, body { height: auto; }
  body { display: block; overflow: auto; }
  .app { display: grid; grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .col.esq, .col.dir { overflow: visible; }
  .col.centro { order: -1; overflow: visible; }
  .palco-moldura { flex: none; height: 62vh; min-height: 320px; }
  /* Numa tela estreita a linha única não cabe mesmo — aqui o wrap volta de propósito. */
  .menu-topo { flex-wrap: wrap; }
  .menu-topo button { min-width: 0; flex: 1 1 118px; max-width: none; font-size: 14px; height: 62px; padding: 0 10px; gap: 13px; }
}

/* Tela sem mouse: entra o direcional e sai a dica de WASD, que ali não quer dizer nada. */
@media (hover: none) and (pointer: coarse) {
  .centro-dpad:not(.hidden) { display: grid; }
  .cb-teclas { display: none; }
  .cb-quantos::before { display: none; }
}

@media (max-width: 560px) {
  .app { padding: 7px; gap: 14px; }
  .palco-moldura { height: 58vh; min-height: 280px; padding: 8px; }
  .starter-lista { grid-template-columns: 1fr; }
  /* O editor de cores empilha: com 190 px de boneco ao lado, as amostras ficariam com três
     por linha e a peça inteira viraria uma coluna de rolagem. */
  .ob-editor { grid-template-columns: 1fr; }
  .ob-palco { flex-direction: row; justify-content: center; gap: 16px; }
  .ob-rodape { flex-wrap: wrap; }
  .rodape-fan { font-size: 8.5px; bottom: 3px; }
  .menu-topo { padding: 9px 10px; gap: 7px; }
  .menu-topo button { flex: 1 1 100px; font-size: 13px; gap: 12px; height: 56px; padding: 0 8px; }
  .menu-topo button > :first-child { margin-left: 2px; }
  .painel { padding: 9px 10px; }
  /* No celular o chat é uma faixa curta na pilha, e o teclado de emoji aberto comeria a
     conversa inteira. Menos fileiras à vista, mais rolagem — é a troca certa aqui. */
  .chat-emojis { max-height: 120px; }
}