/* CORES */
/* Tema escuro azulado (não preto): título prata, botões grafite e destaques em azul */
:root {
    --fundo: #1c212b;
    --painel: #262d3a;
    --painel-borda: #364052;
    --texto: #e6e1d6;
    --texto-fraco: #a3a9b5;

    --titulo: #d9dee6;
    --destaque: #7fa7d9;
    --checkbox: #3f63a8;
    --botao: #263a4f;
    --botao-borda: #5b8fd6;
    --botao-texto: #e6eaf0;

    /* Semáforo: cores das runas (fogo, thunderstorm, gelo) */
    --alta: #f08a3c;
    --media: #b56cf0;
    --baixa: #5aa2f0;
    --sem-dados: #7c8494;
    --erro: #d9604f;

    --opacidade-fundo: 0.35;
}

* {
    box-sizing: border-box;
}

body {
    position: relative;
    margin: 0;
    min-height: 100vh;
    background: var(--fundo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.4;
}

/* FUNDO : IMAGEM FIXA NO RODAPÉ DA TELA */
/* Largura toda, colada embaixo, sumindo para cima (fade) até virar a cor do fundo */
/* A altura segue a proporção da imagem (1913 x 628), para não cortar as laterais */
body::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    aspect-ratio: 1913 / 628;
    z-index: -1;
    background: url("imagens/fundo.webp") no-repeat center bottom / 100% auto;
    opacity: var(--opacidade-fundo);
    -webkit-mask-image: linear-gradient(to top, #000 35%, transparent);
    mask-image: linear-gradient(to top, #000 35%, transparent);
    pointer-events: none;
}

/* CABEÇALHO */
/* Título e frase centralizados; PT/EN no canto direito */
.cabecalho {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 8px;
}

.cabecalho .idiomas {
    position: absolute;
    top: 24px;
    right: 16px;
}

h1 {
    margin: 0;
    color: var(--titulo);
    font-size: 1.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* TÍTULO : uma SD de cada lado, pulsando devagar */
.titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Só o tamanho é animado (transform), que o navegador faz na placa de vídeo */
/* Sem filter na imagem animada: ele obrigaria a redesenhar a runa a cada quadro (a runa já tem brilho no desenho) */
/* translateZ(0) + backface-visibility: movimento com precisão de subpixel, sem "saltos" */
/* Curva suave (cubic-bezier) e ciclo mais longo para a pulsação ficar fluida */
.runa-titulo {
    width: 44px;
    height: 44px;
    backface-visibility: hidden;
    animation: pulsar-runa 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes pulsar-runa {
    0%, 100% { transform: translateZ(0) scale(1); }
    50% { transform: translateZ(0) scale(1.06); }
}

.subtitulo {
    margin: 4px 0 0;
    color: var(--texto-fraco);
}

.idiomas {
    display: flex;
    gap: 4px;
}

/* Mesmas cores dos botões; o inativo fica com borda e texto apagados */
/* position + overflow seguram o reflexo do hover dentro do botão */
.idiomas button {
    position: relative;
    overflow: hidden;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--botao-borda) 45%, transparent);
    border-radius: 6px;
    background: var(--botao);
    color: var(--texto-fraco);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

/* Ativo: borda cheia, texto claro e fundo um pouco mais azul (diferente do hover) */
.idiomas button.ativo {
    border-color: var(--botao-borda);
    background: color-mix(in srgb, var(--botao-borda) 25%, var(--botao));
    color: var(--botao-texto);
}

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 16px 48px;
}

/* FORMULÁRIO */
.painel {
    display: grid;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--painel-borda);
    border-radius: 10px;
    background: color-mix(in srgb, var(--painel) 75%, transparent);
}

.campo {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: 600;
}

/* Título "Criaturas" e dica centralizados; a lista continua em colunas */
.campo legend {
    padding: 0;
    margin: 0 auto 6px;
}

/* Seletor de mundo centralizado */
.campo-mundo {
    justify-items: center;
}

.campo-mundo select {
    width: 100%;
}

select {
    max-width: 320px;
    padding: 8px 10px;
    border: 1px solid var(--painel-borda);
    border-radius: 6px;
    background: var(--fundo);
    color: var(--texto);
    font-size: 1rem;
}

.dica {
    margin: 0 0 6px;
    text-align: center;
    color: var(--texto-fraco);
    font-weight: 400;
    font-size: 0.9rem;
}

.lista-criaturas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 4px 12px;
}

.lista-criaturas label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
    /* padding + margin negativa: o fundo do hover sobra um pouco sem desalinhar a lista */
    /* 4px de cada lado < metade do gap (12px), então um label nunca invade o vizinho */
    padding: 1px 4px;
    margin: 0 -4px;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Azul mais escuro que o destaque, para o marcado se diferenciar bem do desmarcado (branco) */
.lista-criaturas input {
    accent-color: var(--checkbox);
}

/* BOTÃO */
/* Serve para <button> e para <a> (o "Nova consulta" é um link) */
/* Azul petróleo com borda azul; position + overflow seguram o reflexo do hover dentro do botão */
.botao {
    position: relative;
    overflow: hidden;
    justify-self: start;
    display: inline-block;
    padding: 10px 28px;
    border: 1px solid var(--botao-borda);
    border-radius: 6px;
    background: var(--botao);
    color: var(--botao-texto);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

/* REFLEXO DO HOVER : uma faixa de luz atravessa o botão (também nos botões PT/EN) */
/* A faixa fica parada fora do botão, à esquerda; no hover, só o transform anda (sem recalcular layout) */
/* translateX em % da própria faixa (40% do botão): -150% = fora à esquerda, 330% = fora à direita */
.botao::after,
.idiomas button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: translateX(-150%) skewX(-20deg);
    pointer-events: none;
}

@keyframes reflexo {
    from { transform: translateX(-150%) skewX(-20deg); }
    to { transform: translateX(330%) skewX(-20deg); }
}

/* Botão com runa (Consultar com a Paralyze), centralizado */
.botao-runa {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 22px 8px 14px;
}

.botao-runa img {
    width: 26px;
    height: 26px;
}

/* LEGENDA DO SEMÁFORO (página de seleção) */
.legenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    color: var(--texto-fraco);
    font-size: 0.9rem;
}

.legenda > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legenda img {
    width: 26px;
    height: 26px;
}

/* AVISO */
.aviso {
    margin: 16px 0;
    color: var(--texto-fraco);
}

/* RESULTADO : NOME DO MUNDO NO CENTRO + NOVA CONSULTA À DIREITA */
/* 3 colunas: a da esquerda fica vazia para o nome ficar no meio de verdade */
.barra-resultado {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: ". mundo botao";
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.barra-resultado .aviso {
    grid-area: mundo;
    margin: 0;
    color: var(--texto);
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
}

.barra-resultado .botao {
    grid-area: botao;
    justify-self: end;
}

.aviso.erro {
    color: var(--erro);
}

/* CARREGANDO : as 3 runas acendendo uma de cada vez */
.carregando {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 48px 0;
}

.carregando[hidden] {
    display: none;
}

.carregando img {
    width: 48px;
    height: 48px;
    opacity: 0.25;
    transform: scale(0.85);
    animation: acender 1.5s ease-in-out infinite;
}

.carregando img:nth-child(2) {
    animation-delay: 0.5s;
}

.carregando img:nth-child(3) {
    animation-delay: 1s;
}

@keyframes acender {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    30% { opacity: 1; transform: scale(1.05); }
    60% { opacity: 0.25; transform: scale(0.85); }
}

/* CARDS */
/* 5 por fileira; em telas menores, menos */
/* grid-auto-rows: 1fr = todas as fileiras com a altura do card mais alto, para ficarem iguais */
.cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 12px;
}

@media (max-width: 1000px) {
    .cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--painel-borda);
    border-left: 4px solid var(--cor-semaforo, var(--sem-dados));
    border-radius: 10px;
    background: color-mix(in srgb, var(--painel) 85%, transparent);
    transition: transform 0.15s ease;
}

/* Brilho forte do hover numa camada própria, já desenhada: no hover só a opacidade muda */
/* (animar box-shadow direto obrigaria a redesenhar a sombra a cada quadro) */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 6px 22px -6px var(--cor-semaforo, rgba(255, 255, 255, 0.25));
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.card[data-semaforo="alta"] { --cor-semaforo: var(--alta); }
.card[data-semaforo="média"] { --cor-semaforo: var(--media); }
.card[data-semaforo="baixa"] { --cor-semaforo: var(--baixa); }

/* Brilho leve em volta, na cor da runa */
.card[data-semaforo] {
    box-shadow: 0 0 14px -6px var(--cor-semaforo);
}

/* TOPO DO CARD : GIF em cima, nome e selo centralizados embaixo */
.card-topo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.card-topo img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Nome sempre com espaço de 2 linhas, para todos os cards ficarem alinhados */
.card h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5em;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* SELO : runa + texto do semáforo; "sem previsão" fica só com o texto */
/* min-height = altura da runa, para os cards com e sem runa ficarem alinhados */
.selo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    color: var(--cor-semaforo, var(--sem-dados));
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.card-topo .selo img {
    width: 36px;
    height: 36px;
    image-rendering: auto;
}

.card dl {
    display: grid;
    gap: 6px;
    margin: 0;
}

.card dt {
    color: var(--texto-fraco);
    font-size: 0.8rem;
}

.card dd {
    margin: 0;
}

.card .mensagem {
    margin: 0;
    color: var(--texto-fraco);
    font-size: 0.9rem;
}

/* TELA ESTREITA : PT/EN sai do canto e vai para cima do título, para não cobrir */
@media (max-width: 760px) {
    .cabecalho {
        flex-direction: column-reverse;
        align-items: center;
        gap: 12px;
    }

    .cabecalho .idiomas {
        position: static;
    }

    .barra-resultado {
        grid-template-columns: 1fr;
        grid-template-areas: "mundo" "botao";
    }

    .barra-resultado .botao {
        justify-self: center;
    }
}

/* CELULAR */
@media (max-width: 520px) {
    h1 {
        font-size: 1.4rem;
    }

    select {
        max-width: none;
    }

    .botao {
        justify-self: stretch;
        text-align: center;
    }
}

/* HOVERS */
/* Só em aparelhos com mouse: no celular o hover "gruda" depois do toque */
@media (hover: hover) {

    /* Botões: o reflexo de luz atravessa */
    .botao:hover::after,
    .idiomas button:hover::after {
        animation: reflexo 0.7s ease;
    }

    /* PT/EN inativo: acende um pouco, mas sem ficar igual ao ativo */
    .idiomas button:not(.ativo):hover {
        border-color: color-mix(in srgb, var(--botao-borda) 75%, transparent);
        color: var(--texto);
    }

    /* Lista de criaturas: fundo leve e nome em azul */
    .lista-criaturas label:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--destaque);
    }

    /* Cards: sobem um pouco, o brilho forte aparece e a runa pulsa (só no tamanho, sem apagar) */
    .card:hover {
        transform: translateY(-3px);
    }

    .card:hover::after {
        opacity: 1;
    }

    .card:hover .selo img {
        animation: pulsar-runa 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
}

/* MOVIMENTO REDUZIDO */
/* Para quem ativou "reduzir movimento" no sistema: sem animações, sem transições e sem o card subir */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .card:hover {
        transform: none;
    }
}