/* Base da interface do overworld: paleta, tipografia e as camadas.
   -------------------------------------------------------------------------
   Este arquivo é CONTRATO — a HUD, a faixa do time, o chat e as janelas todos
   leem daqui, então mudar um valor aqui muda os quatro de uma vez. Nenhuma peça
   escreve cor crua no próprio CSS: se falta um tom, ele nasce aqui. */

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

:root {
    /* --- vidro: as peças que flutuam SOBRE o mapa e deixam o cenário passar */
    --vidro:        rgba(18, 24, 30, .88);
    --vidro-alto:   rgba(32, 41, 50, .94);
    --vidro-fundo:  rgba(9, 13, 17, .78);
    --vidro-borda:  rgba(255, 255, 255, .13);

    /* --- painel: as janelas, que são opacas e cobrem o mapa */
    --painel:       #192a31;
    --painel-fundo: #142027;
    --painel-alto:  #1e2f38;
    --painel-borda: #2a3d48;
    --painel-linha: rgba(255, 255, 255, .07);

    /* Quatro degraus, e cada um tem um papel: título e número; frase corrida e
       rótulo; legenda e hora; desligado. Três inspetores mediram a arte por
       conta própria e os três pediram o degrau do meio, que não existia. */
    --texto:        #eef3f7;
    --texto-claro:  #cdd5dc;
    --texto-medio:  #b7c6d2;
    --texto-fraco:  #8194a3;
    /* Para escrever SOBRE cor clara: o número dentro da barra de HP cheia. */
    --texto-escuro: #10242c;

    --azul:         #4e9bfe;
    /* O azul fundo das guias: medido no núcleo chapado da arte, não escolhido. */
    --azul-forte:   #2877bf;
    --azul-claro:   #7fc0ff;
    /* Nome grifado dentro de uma frase: na arte ele puxa para o turquesa, e o
       `--azul-claro` (que pinta os ícones do menu) fica azul demais ali. */
    --ciano:        #9adbe4;
    --dourado:      #f5bd3a;
    --verde:        #5ddf81;
    --verde-fundo:  #2f9a55;
    --vermelho:     #e2484d;
    --laranja:      #f08a3c;
    --rosa:         #ef5f8b;

    /* --- forma. Raio grande é painel; médio é card e botão; pequeno é chip. */
    --r-g: 14px;
    --r-m: 10px;
    --r-p: 6px;

    --sombra:      0 4px 14px rgba(0, 0, 0, .45);
    --sombra-alta: 0 10px 34px rgba(0, 0, 0, .6);

    /* --- camadas. Quem subir sem olhar aqui tapa a peça de outro agente. */
    --z-mapa:    0;
    --z-chat:   30;
    --z-time:   30;
    /* Acima do veu da janela (--z-janela). Abaixo dele, o #tela cobria os
       botoes do HUD e trocar de janela exigia fechar antes: o clique batia no
       veu e so fechava. O #tela ja tem padding-top de 104px para comecar
       abaixo do HUD, entao subir daqui nao tapa janela nenhuma. */
    --z-hud:    70;
    --z-janela: 60;
}

/* A interface inteira é Nunito: redonda e pesada, como a arte de referência.
   O pixel art do jogo (Pokemon DP) continua sendo só das etiquetas do mapa. */
body.tela-mundo,
body.tela-portao,
body.tela-mundo input,  body.tela-portao input,
body.tela-mundo select, body.tela-portao select,
body.tela-mundo button, body.tela-portao button,
body.tela-mundo textarea {
    font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

/* Ícone SVG: acompanha a cor do texto e nunca encolhe dentro de um flex. */
.icone {
    display: block;
    flex: none;
}

/* Caixa de vidro: o corpo de toda peça que fica sobre o mapa. */
.vidro {
    background: var(--vidro);
    border: 1px solid var(--vidro-borda);
    border-radius: var(--r-g);
    box-shadow: var(--sombra);
    backdrop-filter: blur(6px);
}

/* Números que se comparam em coluna (HP, contadores, preço) não podem dançar. */
.numero {
    font-variant-numeric: tabular-nums;
}