/* ===== POKÉMON RED, BLUE E YELLOW =====
   Componentes e layouts exclusivos deste guia. */

/* ===== NAVEGAÇÃO DOS GUIAS =====
   Botões usados no fim dos capítulos para avançar ou retroceder. */
.navegacao-guia {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--cor-borda);
}

.botao-proximo {
    margin-left: auto;
}

.botao-navegacao {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 3px 8px;
    border: 1px solid #333;
    border-radius: 3px;
    background-color: #fff;
    color: #222;
    font-size: 11px;
    font-weight: 700;
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.botao-navegacao:hover {
    background-color: #f7f7f7;
    box-shadow: 0 2px 5px rgb(0 0 0 / 14%);
    color: #000;
    text-decoration: none;
    transform: translateY(-1px);
}

.seta-navegacao {
    display: inline-block;
}

.botao-navegacao:hover .seta-navegacao {
    animation: seta-proxima 650ms ease-in-out infinite alternate;
}

.botao-navegacao:hover .seta-anterior {
    animation-name: seta-anterior;
}

@keyframes seta-proxima {
    to {
        transform: translateX(3px);
    }
}

@keyframes seta-anterior {
    to {
        transform: translateX(-3px);
    }
}


/* ===== TABELAS DE APARIÇÃO DE POKÉMON ===== */
.grade-aparicoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 15px 0 20px;
}

.painel-aparicoes {
    min-width: 240px;
    overflow: hidden;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    background: var(--cor-superficie);
    box-shadow: var(--sombra-suave);
}

.titulo-aparicoes {
    margin: 0;
    padding: 9px 12px;
    color: #fff;
    font-size: 14px;
    text-align: center;
}

.painel-aparicoes-red .titulo-aparicoes {
    background: #b83434;
}

.painel-aparicoes-red {
    --cor-aparicao-clara: #fff1f1;
    --cor-aparicao-media: #f9dddd;
}

.painel-aparicoes-blue .titulo-aparicoes {
    background: #345fa8;
}

.painel-aparicoes-blue {
    --cor-aparicao-clara: #eef4ff;
    --cor-aparicao-media: #dce8fa;
}

.painel-aparicoes-yellow .titulo-aparicoes {
    background: #e8b400;
    color: #2b2400;
}

.painel-aparicoes-yellow {
    --cor-aparicao-clara: #fffbea;
    --cor-aparicao-media: #fff2bd;
}

.tabela-aparicoes {
    margin: 0;
    table-layout: fixed;
}

.tabela-aparicoes th {
    border: 1px solid #ddd;
    background: var(--cor-aparicao-media);
    color: var(--cor-texto);
    text-align: center;
}

.tabela-aparicoes th:first-child {
    width: 55%;
}

.tabela-aparicoes th:nth-child(2) {
    width: 22%;
}

.tabela-aparicoes th:nth-child(3) {
    width: 23%;
}

.tabela-aparicoes td {
    border: 1px solid #ddd;
    background: var(--cor-aparicao-clara);
    color: var(--cor-texto);
    text-align: center;
    vertical-align: middle;
}

.tabela-aparicoes tbody tr:nth-child(even) td {
    background: var(--cor-aparicao-media);
}

.tabela-aparicoes td:first-child {
    padding-right: 8px;
    padding-left: 8px;
    text-align: left;
}

.tabela-aparicoes th:nth-child(2),
.tabela-aparicoes td:nth-child(2),
.tabela-aparicoes th:nth-child(3),
.tabela-aparicoes td:nth-child(3) {
    white-space: nowrap;
}

.pokemon-aparicao {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    white-space: nowrap;
}

.sprite-aparicao {
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
}

/* ===== AVALIAÇÕES DE POKÉMON PARA A CAMPANHA ===== */
.grade-avaliacoes-pokemon {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin: 16px 0 20px;
}

.avaliacao-pokemon {
    overflow: hidden;
    margin: 16px 0;
    padding: 14px;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    background: var(--cor-superficie);
    box-shadow: var(--sombra-suave);
}

.grade-avaliacoes-pokemon .avaliacao-pokemon {
    margin: 0;
}

.avaliacao-pokemon-destaque {
    border-color: #d2ad72;
    background: linear-gradient(135deg, #fffdf7, #fff7e8);
}

.avaliacao-pokemon-meia-largura {
    width: 50%;
    margin-right: auto;
    margin-left: auto;
}

.avaliacao-pokemon-charmander {
    width: min(100%, 680px);
    margin-right: auto;
    margin-left: auto;
}

.cabecalho-avaliacao-pokemon {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.cabecalho-avaliacao-pokemon img {
    display: block;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
}

.cabecalho-avaliacao-pokemon h3 {
    margin: 2px 0 5px;
    color: var(--cor-topo);
    font-size: 17px;
}

.versao-avaliacao {
    display: block;
    color: var(--cor-texto-fraco);
    font-size: 10px;
    font-weight: 700;
}

.selo-rank {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.selo-rank-s {
    background: linear-gradient(135deg, #b87b08, #e3ad24);
}

.selo-rank-a {
    background: #218739;
}

.selo-rank-b {
    background: #3976ae;
}

.selo-rank-c {
    background: #b66a17;
}

.selo-rank-d {
    background: #9c3d3d;
}

.selo-rank-indeterminado {
    background: linear-gradient(135deg, #66508d, #3e354f);
}

#conteudo .avaliacao-pokemon p {
    margin: 0 0 9px;
    font-size: 13px;
    line-height: 1.55;
}

#conteudo .avaliacao-pokemon p:last-child {
    margin-bottom: 0;
}

/* ===== DESTAQUES DE ITENS E FÓSSEIS ===== */
.grade-notas-itens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 15px 0;
}

.grade-notas-itens .dica {
    margin: 0;
}

.caixa-item-especial,
.caixa-fosseis {
    overflow: hidden;
    width: min(100%, 760px);
    margin: 20px auto;
    border: 1px solid #aeb9cc;
    border-radius: 8px;
    background: var(--cor-superficie);
    box-shadow: var(--sombra-suave);
}

.caixa-moon-stone {
    border-color: #b6a9d1;
    background: linear-gradient(135deg, #fbf9ff, #f1edfa);
}

.rotulo-item-especial {
    padding: 9px 14px;
    background: linear-gradient(135deg, #66508d, #43365f);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.rotulo-moon-stone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.brilho-moon-stone {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    overflow: visible;
    border-radius: 50%;
    filter: drop-shadow(0 0 7px rgb(237 242 255 / 75%));
}

.brilho-moon-stone::after {
    position: absolute;
    top: -25%;
    left: -65%;
    width: 30%;
    height: 150%;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        transparent,
        rgb(255 255 255 / 20%),
        rgb(255 255 255 / 95%),
        rgb(255 255 255 / 20%),
        transparent
    );
    content: "";
    filter: blur(1px);
    transform: rotate(22deg);
    animation: brilho-moon-stone 3.2s ease-in-out infinite;
    pointer-events: none;
}

.brilho-moon-stone img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

@keyframes brilho-moon-stone {
    0%,
    48% {
        left: -65%;
        opacity: 0;
    }

    56% {
        opacity: 1;
    }

    76%,
    100% {
        left: 135%;
        opacity: 0;
    }
}

.conteudo-item-especial {
    padding: 14px 16px;
}

#conteudo .conteudo-item-especial p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.55;
}

#conteudo .conteudo-item-especial p:last-child {
    margin-bottom: 0;
}

.caixa-fosseis {
    border-color: #aaa18f;
    background: #f9f7f1;
}

.cabecalho-caixa-fosseis {
    padding: 12px 16px;
    background: linear-gradient(135deg, #4c4a47, #292826);
    color: #fff;
    text-align: center;
}

.cabecalho-caixa-fosseis h3 {
    margin: 0 0 3px;
    font-size: 17px;
}

#conteudo .cabecalho-caixa-fosseis p {
    margin: 0;
    color: #dedbd5;
    font-size: 11px;
}

.grade-fosseis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: #c9c3b7;
}

.cartao-fossil {
    padding: 14px;
    background: #fffdf8;
    text-align: center;
}

.sprites-fossil {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 82px;
}

.sprites-fossil img {
    display: block;
    width: 76px;
    height: 76px;
}

.cartao-fossil h4 {
    margin: 4px 0 6px;
    color: var(--cor-topo);
    font-size: 14px;
}

#conteudo .cartao-fossil p {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.55;
}

#conteudo .aviso-escolha-fossil {
    margin: 0;
    padding: 11px 15px;
    border-top: 1px solid #c9c3b7;
    background: #eee9df;
    color: #514d45;
    font-size: 11px;
    font-weight: 700;
}

.lista-pokemon-batalha-yellow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

/* ===== QUADROS DE BATALHA ===== */
.quadro-batalha {
    overflow: hidden;
    margin: 18px 0;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    background: var(--cor-superficie);
    box-shadow: var(--sombra-suave);
}

.cabecalho-quadro-batalha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    background: linear-gradient(135deg, #303b52, #1e2637);
    color: #fff;
}

.cabecalho-quadro-batalha strong {
    font-size: 16px;
}

.cabecalho-quadro-batalha span {
    color: #e7ebf3;
    font-size: 11px;
    font-weight: 700;
}

.equipes-rival {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--cor-borda);
}

.equipe-rival {
    padding: 12px;
    background: #f7f9fc;
}

.equipe-rival-yellow {
    background: #fffbea;
}

.rotulo-equipe-rival {
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    background: #536a92;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.equipe-rival-yellow .rotulo-equipe-rival {
    background: #e8b400;
    color: #2b2400;
}

.pokemon-rival {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 112px;
    padding: 5px 8px;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 6px;
    background: rgb(255 255 255 / 72%);
}

.sprite-rival {
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
}

.pokemon-rival span {
    min-width: 0;
}

.pokemon-rival strong,
.pokemon-rival small {
    display: block;
}

.pokemon-rival strong {
    font-size: 12px;
}

.pokemon-rival small {
    margin-top: 2px;
    color: var(--cor-texto-fraco);
    font-size: 10px;
}

.separador-rival {
    margin: 5px 0;
    color: var(--cor-texto-fraco);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.rotulo-opcoes-rival {
    display: block;
    margin-bottom: 6px;
    color: var(--cor-texto-fraco);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.opcoes-rival {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.pokemon-rival-opcao {
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 4px 2px;
    text-align: center;
}

.pokemon-rival-opcao strong {
    font-size: 10px;
}

.lista-pokemon-rival {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 154px;
}

.lista-pokemon-rival-compacta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.lista-pokemon-rival-compacta .pokemon-rival {
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 4px 2px;
    text-align: center;
}

.lista-pokemon-rival-compacta .pokemon-rival strong {
    font-size: 10px;
}

.lista-treinadores-floresta {
    display: grid;
    gap: 6px;
}

.lista-treinadores-rota-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lista-treinadores-rota-25 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.treinador-floresta {
    display: grid;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 5px;
    background: rgb(255 255 255 / 72%);
}

.treinador-floresta strong {
    color: var(--cor-topo);
    font-size: 11px;
}

.treinador-floresta strong small {
    display: inline-block;
    margin-left: 3px;
    padding: 1px 4px;
    border-radius: 3px;
    background: #e8b400;
    color: #2b2400;
    font-size: 8px;
    vertical-align: middle;
}

.equipe-treinador-floresta {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}

.equipe-treinador-floresta span {
    display: grid;
    justify-items: center;
    min-width: 70px;
}

.equipe-treinador-floresta img {
    width: 58px;
    height: 58px;
}

.equipe-treinador-floresta small {
    color: var(--cor-texto-fraco);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.treinador-floresta > small {
    color: var(--cor-texto-fraco);
    font-size: 9px;
}

.treinador-rota-25-reservado {
    border: 2px solid #c83e3e;
    background: #fff2f2;
}

.treinador-rota-25-reservado strong,
.treinador-rota-25-reservado > small {
    color: #9c2929;
}

.janela-video-guia {
    overflow: hidden;
    width: min(100%, 480px);
    margin: 22px auto;
    border: 3px solid #8f315d;
    border-radius: 5px;
}

.video-responsivo {
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-responsivo iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.credito-video-guia {
    margin: -14px 0 22px;
    color: var(--cor-texto-fraco);
    font-size: 10px;
    text-align: center;
}

.credito-video-guia a {
    font-weight: 700;
}

.cabecalho-treinador-ginasio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 62px;
    margin-bottom: 10px;
    color: var(--cor-topo);
    text-align: center;
}

.cabecalho-treinador-ginasio strong,
.cabecalho-treinador-ginasio small {
    display: block;
}

.cabecalho-treinador-ginasio strong {
    font-size: 13px;
}

.cabecalho-treinador-ginasio small {
    margin-top: 2px;
    color: var(--cor-texto-fraco);
    font-size: 10px;
    font-weight: 700;
}

.sprite-treinador-ginasio {
    display: block;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
}

.lista-pokemon-ginasio {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.lista-pokemon-ginasio .pokemon-rival {
    min-width: 0;
}

.lista-pokemon-ginasio-unitario .pokemon-rival:only-child {
    grid-column: 1 / -1;
    width: min(100%, 180px);
    justify-self: center;
}

.confronto-treinador-reservado {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    background: var(--cor-borda);
}

.perfil-treinador-reservado {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 3px;
    padding: 8px;
    background: rgb(255 255 255 / 82%);
    text-align: center;
}

.sprite-treinador-reservado {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
    image-rendering: pixelated;
}

.sprite-rocket-cerulean {
    width: 56px;
    height: 56px;
}

.perfil-treinador-reservado strong {
    color: var(--cor-topo);
    font-size: 13px;
}

.perfil-treinador-reservado small {
    color: var(--cor-texto-fraco);
    font-size: 10px;
    font-weight: 700;
}

.lista-pokemon-treinador-reservado {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 8px;
    background: rgb(255 255 255 / 82%);
}

.lista-pokemon-treinador-reservado .pokemon-rival {
    flex: 1 1 115px;
    min-width: 0;
    padding: 4px 5px;
    justify-content: center;
}

.lista-pokemon-treinador-reservado .sprite-rival {
    width: 58px;
    height: 58px;
}

.recompensa-insignia {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    margin: 20px 0;
    padding: 16px;
    border: 1px solid #a99468;
    border-radius: 8px;
    background: linear-gradient(135deg, #fffdf7, #f2eee3);
    box-shadow: var(--sombra-suave);
}

.brilho-insignia {
    position: relative;
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    overflow: hidden;
    border: 1px solid rgb(169 148 104 / 45%);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 28%, #eee7d6 65%, #d8ccb1 100%);
    box-shadow: 0 4px 14px rgb(89 74 42 / 18%);
}

.brilho-insignia::after {
    position: absolute;
    top: -35%;
    left: -70%;
    width: 35%;
    height: 170%;
    background: linear-gradient(
        90deg,
        transparent,
        rgb(255 255 255 / 15%),
        rgb(255 255 255 / 85%),
        rgb(255 255 255 / 15%),
        transparent
    );
    content: "";
    filter: blur(2px);
    transform: rotate(22deg);
    animation: brilho-boulder-badge 3.4s ease-in-out infinite;
    pointer-events: none;
}

.sprite-insignia {
    display: block;
    width: 94px;
    height: 94px;
    object-fit: contain;
    filter: drop-shadow(0 3px 3px rgb(0 0 0 / 24%));
}

@keyframes brilho-boulder-badge {
    0%,
    52% {
        left: -70%;
        opacity: 0;
    }

    58% {
        opacity: 1;
    }

    78%,
    100% {
        left: 135%;
        opacity: 0;
    }
}

.recompensa-insignia h3 {
    margin: 0 0 8px;
    color: #594a2a;
    font-size: 16px;
}

#conteudo .recompensa-insignia p {
    margin: 0 0 9px;
    font-size: 14px;
    line-height: 1.55;
}

#conteudo .recompensa-insignia p:last-child {
    margin-bottom: 0;
}

.caixa-red-blue {
    overflow: hidden;
    margin: 18px 0;
    border: 1px solid #aeb9cc;
    border-radius: 7px;
    background: linear-gradient(110deg, #fff3f3 0 50%, #f0f5ff 50% 100%);
    box-shadow: var(--sombra-suave);
}

.rotulo-caixa-red-blue {
    padding: 8px 12px;
    background: linear-gradient(110deg, #b83434 0 50%, #345fa8 50% 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.troca-nidoran-red-blue,
.troca-local-pokemon {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: minmax(90px, 140px) auto minmax(90px, 140px);
    gap: 12px;
    padding: 13px 14px 4px;
}

.troca-evolucao-yellow {
    grid-template-columns: minmax(90px, 130px) auto minmax(90px, 130px) auto minmax(90px, 130px);
    gap: 8px;
    margin-top: 10px;
    padding: 0;
}

.troca-nidoran-red-blue > span,
.troca-local-pokemon > span {
    display: grid;
    justify-items: center;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 6px;
    background: rgb(255 255 255 / 70%);
    text-align: center;
}

.troca-nidoran-red-blue img,
.troca-local-pokemon img {
    width: 64px;
    height: 64px;
}

.troca-nidoran-red-blue strong,
.troca-local-pokemon strong {
    font-size: 12px;
}

.troca-nidoran-red-blue small,
.troca-local-pokemon small {
    margin-top: 2px;
    color: var(--cor-texto-fraco);
    font-size: 9px;
}

.troca-nidoran-red-blue b,
.troca-local-pokemon b {
    color: #8054ad;
    font-size: 20px;
}

#conteudo .caixa-red-blue p {
    margin: 0;
    padding: 11px 14px 0;
    font-size: 12px;
    line-height: 1.6;
}

#conteudo .caixa-red-blue p:last-child {
    padding-bottom: 12px;
}

.tabela-comparacao-dv {
    width: min(100%, 680px);
    table-layout: fixed;
}

.tabela-comparacao-dv .coluna-caracteristica {
    width: 28%;
}

.tabela-comparacao-dv .coluna-comparacao {
    width: 36%;
}

.tabela-versoes,
.tabela-categorias-golpes,
.tabela-plataformas,
.tabela-loja-viridian {
    width: min(100%, 760px);
}

.tabela-loja-viridian {
    width: min(100%, 520px);
    min-width: 420px;
}

.tabela-loja-cerulean {
    width: min(100%, 350px);
    min-width: 350px;
}

.tabela-loja-pewter {
    width: 220px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #b8b8b8;
    border-collapse: collapse;
}

.tabela-loja-pewter th,
.tabela-loja-pewter td {
    padding: 7px 10px;
    border: 1px solid #b8b8b8;
}

.tabela-loja-pewter th:last-child,
.tabela-loja-pewter td:last-child {
    width: 62px;
    text-align: center;
}

.tabela-loja-viridian th:not(:first-child),
.tabela-loja-viridian td:not(:first-child) {
    text-align: center;
}

.tabela-amizade-pikachu {
    width: min(100%, 780px);
    min-width: 620px;
    margin-right: auto;
    margin-left: auto;
}

.tabela-amizade-pikachu th:not(:first-child),
.tabela-amizade-pikachu td:not(:first-child) {
    width: 78px;
    text-align: center;
    white-space: nowrap;
}

.status-disponivel,
.status-indisponivel {
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.status-disponivel {
    color: #218739;
}

.status-indisponivel {
    color: #c63232;
}

.tabela-comparacao-dv,
.tabela-versoes,
.tabela-categorias-golpes,
.tabela-plataformas,
.tabela-loja-viridian,
.tabela-atributos {
    margin-right: auto;
    margin-left: auto;
}

.tabela-versoes th:first-child,
.tabela-versoes td:first-child,
.tabela-categorias-golpes th:first-child,
.tabela-categorias-golpes td:first-child,
.tabela-plataformas th:first-child,
.tabela-plataformas td:first-child {
    white-space: nowrap;
}

/* ===== COMPARAÇÃO VISUAL DOS GAME BOYS ===== */
.comparacao-game-boys {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 15px 0;
}

.cartao-game-boy {
    position: relative;
    padding: 12px 10px 10px;
    border: 1px solid var(--cor-borda);
    background: #fafafa;
    text-align: center;
}

.cartao-game-boy-recomendado {
    border-color: #8054ad;
    background: #f7f1ff;
    box-shadow: 0 0 0 2px rgb(128 84 173 / 12%);
}

.cartao-game-boy img {
    display: block;
    width: 160px;
    height: 144px;
    max-width: 100%;
    margin: 0 auto 9px;
    border: 1px solid #bbb;
}

.cartao-game-boy figcaption {
    display: grid;
    gap: 3px;
    font-size: 11px;
    line-height: 1.4;
}

.cartao-game-boy figcaption strong {
    color: var(--cor-topo);
    font-size: 13px;
}

.cartao-game-boy figcaption span {
    color: var(--cor-texto-fraco);
}

.selo-recomendado {
    position: absolute;
    top: -8px;
    left: 50%;
    padding: 2px 7px;
    border-radius: 10px;
    background: #8054ad;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transform: translateX(-50%);
}

/* ===== POKÉMON INDISPONÍVEIS POR VERSÃO ===== */
.resumo-versoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 24px;
}

.cartao-resumo-versao {
    --cor-versao: #666;
    --cor-versao-clara: #f5f5f5;
    --cor-versao-texto: var(--cor-versao);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--cor-borda);
    border-top: 4px solid var(--cor-versao);
    border-radius: 8px;
    background: var(--cor-versao-clara);
}

.resumo-versao-red {
    --cor-versao: #c83e3e;
    --cor-versao-clara: #fff1f1;
    --cor-versao-texto: #9d2929;
}

.resumo-versao-blue {
    --cor-versao: #3478b8;
    --cor-versao-clara: #eef6ff;
    --cor-versao-texto: #245f96;
}

.resumo-versao-yellow {
    --cor-versao: #d6a900;
    --cor-versao-clara: #fff9d9;
    --cor-versao-texto: #806500;
}

.cartao-resumo-versao img {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
}

.cartao-resumo-versao span {
    color: var(--cor-versao-texto);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cartao-resumo-versao h2 {
    margin: 2px 0 4px;
    border: 0;
    font-size: 14px;
}

#conteudo .cartao-resumo-versao p {
    margin: 0;
    color: var(--cor-texto-fraco);
    font-size: 10px;
    line-height: 1.4;
}

.comparacao-exclusivos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.painel-exclusivos {
    overflow: hidden;
    border: 1px solid var(--cor-borda);
    border-top: 4px solid var(--cor-versao);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 3px 10px rgb(0 0 0 / 7%);
}

.painel-exclusivos-red {
    --cor-versao: #c83e3e;
    --cor-versao-clara: #fff1f1;
    --cor-versao-texto: #9d2929;
}

.painel-exclusivos-blue {
    --cor-versao: #3478b8;
    --cor-versao-clara: #eef6ff;
    --cor-versao-texto: #245f96;
}

.painel-exclusivos-yellow {
    --cor-versao: #d6a900;
    --cor-versao-clara: #fff9d9;
    --cor-versao-contador: #806500;
    --cor-versao-texto: #806500;
}

.cabecalho-exclusivos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--cor-versao-clara);
}

.cabecalho-exclusivos h3 {
    margin: 2px 0 0;
    color: var(--cor-versao-texto);
    font-size: 16px;
}

.rotulo-versao {
    color: var(--cor-texto-fraco);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.quantidade-exclusivos {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cor-versao-contador, var(--cor-versao));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.lista-exclusivos {
    display: grid;
    padding: 7px;
    list-style: none;
}

.lista-exclusivos li {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 3px 6px;
    border-radius: 5px;
}

.lista-exclusivos li:nth-child(even) {
    background: #f7f7f7;
}

.lista-exclusivos img {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
}

.lista-exclusivos li > span {
    display: grid;
    min-width: 0;
    color: var(--cor-versao-texto);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.lista-exclusivos small {
    color: var(--cor-texto-fraco);
    font-size: 9px;
    font-weight: 400;
}

.detalhes-yellow-principais {
    display: grid;
    gap: 10px;
    margin: 18px 0 10px;
}

.detalhes-yellow-principais details,
.detalhes-versoes details {
    overflow: hidden;
    border: 1px solid var(--cor-borda);
    border-radius: 7px;
    background: #fafafa;
}

.detalhes-yellow-principais summary,
.detalhes-versoes summary {
    color: var(--cor-topo);
    font-weight: 700;
    cursor: pointer;
}

.detalhes-yellow-principais details[open] summary,
.detalhes-versoes details[open] summary {
    border-bottom: 1px solid var(--cor-borda);
    background: #f5f5f5;
}

.detalhes-yellow-principais summary {
    padding: 13px 15px;
    font-size: 14px;
}

.conteudo-detalhe-yellow {
    padding: 13px 16px 15px;
}

#conteudo .conteudo-detalhe-yellow p {
    margin: 0 0 10px;
    color: var(--cor-texto);
    font-size: 12px;
    line-height: 1.6;
}

.conteudo-detalhe-yellow ul {
    margin: 0;
    padding-left: 20px;
    color: var(--cor-texto);
    font-size: 12px;
    line-height: 1.6;
}

.conteudo-detalhe-yellow li + li {
    margin-top: 6px;
}

.detalhes-versoes {
    display: grid;
    gap: 8px;
    margin: 14px 0 24px;
}

.detalhes-economia-yellow {
    gap: 10px;
    margin-top: 0;
}

.detalhes-versoes summary {
    padding: 10px 12px;
    font-size: 13px;
}

.detalhes-economia-yellow summary {
    padding: 13px 15px;
    font-size: 14px;
}

#conteudo .detalhes-versoes p {
    margin: 0;
    padding: 11px 12px;
    color: var(--cor-texto);
    font-size: 12px;
    line-height: 1.6;
}

.conteudo-tabela-detalhe {
    padding: 12px;
}

#conteudo .conteudo-tabela-detalhe p {
    margin: 0 0 12px;
    padding: 0;
}

#conteudo .conteudo-tabela-detalhe p:last-child {
    margin: 12px 0 0;
}

.conteudo-tabela-detalhe .tabela-info {
    margin: 0;
}

.tabela-trocas-yellow,
.tabela-premios-yellow,
.tabela-lojas-yellow {
    table-layout: auto;
}

.tabela-trocas-yellow th:first-child,
.tabela-trocas-yellow td:first-child,
.tabela-premios-yellow th:first-child,
.tabela-premios-yellow td:first-child,
.tabela-lojas-yellow th:first-child,
.tabela-lojas-yellow td:first-child {
    white-space: nowrap;
}

.tabela-trocas-yellow th,
.tabela-trocas-yellow td {
    border-right: 1px solid #ccc;
}

.tabela-trocas-yellow th:last-child,
.tabela-trocas-yellow td:last-child {
    border-right: 0;
}

.tabela-trocas-yellow th:not(:first-child),
.tabela-trocas-yellow td:not(:first-child) {
    text-align: center;
    vertical-align: middle;
}

.pokemon-premio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.pokemon-premio img {
    width: 46px;
    height: 46px;
}

.troca-pokemon {
    display: inline-grid;
    align-items: center;
    grid-template-columns: minmax(56px, 1fr) auto minmax(56px, 1fr);
    gap: 4px;
    width: 100%;
    justify-content: center;
}

.troca-pokemon > span {
    display: grid;
    justify-items: center;
    min-width: 0;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
}

.troca-pokemon img {
    width: 42px;
    height: 42px;
}

.troca-pokemon b {
    color: #8054ad;
    font-size: 14px;
}

/* ===== EVOLUÇÕES POR TROCA ===== */
.evolucoes-troca {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.cartao-evolucao-troca {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 3px 10px rgb(0 0 0 / 7%);
}

.pokemon-troca {
    display: grid;
    justify-items: center;
    min-width: 0;
    padding: 6px 4px;
    border-radius: 6px;
    background: #f7f7f7;
    text-align: center;
}

.pokemon-troca-evoluido {
    background: #f7f1ff;
}

.pokemon-troca img {
    width: 60px;
    height: 60px;
}

.pokemon-troca span {
    display: grid;
    color: var(--cor-topo);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.pokemon-troca-evoluido span {
    color: #643b8d;
}

.pokemon-troca small {
    color: var(--cor-texto-fraco);
    font-size: 9px;
    font-weight: 400;
}

.indicador-troca {
    display: grid;
    justify-items: center;
    gap: 3px;
    color: #643b8d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.seta-troca {
    font-size: 18px;
    line-height: 1;
}

.fonte-guia {
    margin: 24px 0 12px;
    color: var(--cor-texto-fraco);
    font-size: 9px;
    font-style: italic;
    text-align: center;
}

.tabela-comparacao-3ds {
    width: min(100%, 820px);
    margin-right: auto;
    margin-left: auto;
}

.tabela-comparacao-3ds th:first-child,
.tabela-comparacao-3ds td:first-child {
    white-space: nowrap;
}

.comparacao-recursos-3ds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.cartao-recurso-3ds {
    padding: 14px;
    border: 1px solid var(--cor-borda);
    border-top: 4px solid #8054ad;
    border-radius: 8px;
    background: linear-gradient(145deg, #fff, #f7f1ff);
    text-align: center;
}

.rotulo-recurso-3ds {
    color: #8054ad;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cartao-recurso-3ds h3 {
    margin: 4px 0 7px;
    color: #643b8d;
    font-size: 16px;
}

#conteudo .cartao-recurso-3ds p {
    margin: 0;
    color: var(--cor-texto);
    font-size: 12px;
    line-height: 1.6;
}

.comparacao-jynx {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 10px 0 12px;
}

.comparacao-jynx img {
    display: block;
    width: 72px;
    height: 72px;
}

.comparacao-jynx figcaption {
    margin-top: 3px;
    color: var(--cor-texto-fraco);
    font-size: 10px;
    font-weight: 700;
}

.comparacao-jynx > span {
    color: #8054ad;
    font-size: 20px;
}

.comparacao-sprites-versoes {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 18px 0;
}

.comparacao-sprites-versoes figure {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 150px;
    margin: 0;
    padding: 12px 18px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: 7px;
    background: var(--cor-superficie);
    box-shadow: var(--sombra-suave);
}

.quadro-batalha-treinador-reservado {
    width: min(100%, 460px);
    margin-right: auto;
    margin-left: auto;
    border: 3px solid #c83e3e;
}

.comparacao-sprites-versoes img {
    display: block;
    width: 72px;
    height: 72px;
}

.comparacao-sprites-versoes figcaption {
    color: var(--cor-texto-fraco);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

/* ===== EXEMPLOS DE POKÉMON ===== */
.exemplo-pokemon {
    width: min(100%, 520px);
    margin: 18px auto;
    text-align: center;
}

.cabecalho-exemplo-pokemon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.cabecalho-exemplo-pokemon h4 {
    font-size: 17px;
}

.imagem-exemplo-pokemon {
    width: 52px;
    height: 52px;
}

.tabela-atributos {
    text-align: left;
}

.tabela-atributos td:last-child {
    white-space: nowrap;
}

/* ===== CARTÕES DOS POKÉMON INICIAIS ===== */
.cartoes-iniciais {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 18px 0;
}

.cartao-inicial {
    border: 1px solid #aaa;
    background: var(--cor-superficie);
}

.cartao-inicial h3 {
    padding: 10px 8px;
    background: #363a32;
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
}

.cartao-inicial-corpo {
    padding: 12px;
    font-size: 12px;
}

#conteudo .cartao-inicial-corpo p {
    margin-bottom: 12px;
    line-height: 1.5;
}

#conteudo .cartao-inicial-corpo p:last-child {
    margin-bottom: 0;
}

.imagem-inicial {
    float: right;
    width: 82px;
    height: 82px;
    margin: 0 0 8px 10px;
}

/* Regras compartilhadas por sprites e blocos longos dos guias. */
:is(
    .sprite-aparicao,
    .cabecalho-avaliacao-pokemon img,
    .sprites-fossil img,
    .sprite-rival,
    .equipe-treinador-floresta img,
    .sprite-treinador-ginasio,
    .troca-nidoran-red-blue img,
    .troca-local-pokemon img,
    .imagem-dica,
    .imagem-curiosidade-pokemon,
    .cartao-game-boy img,
    .cartao-resumo-versao img,
    .lista-exclusivos img,
    .pokemon-premio img,
    .troca-pokemon img,
    .pokemon-troca img,
    .comparacao-jynx img,
    .comparacao-sprites-versoes img,
    .imagem-exemplo-pokemon,
    .imagem-inicial
) {
    object-fit: contain;
    image-rendering: pixelated;
}

/* Mantém justificados os textos explicativos dentro dos boxes deste guia. */
#conteudo .avaliacao-pokemon p,
#conteudo .conteudo-item-especial p,
#conteudo .cartao-fossil p,
#conteudo .aviso-escolha-fossil,
#conteudo .recompensa-insignia p,
#conteudo .caixa-red-blue p,
#conteudo .cartao-resumo-versao p,
#conteudo .conteudo-detalhe-yellow p,
#conteudo .detalhes-versoes p,
#conteudo .conteudo-tabela-detalhe p,
#conteudo .cartao-recurso-3ds p,
#conteudo .cartao-inicial-corpo p {
    text-align: justify;
}

/* ===== TERMOS EXPLICADOS ===== */
.termo-tooltip {
    position: relative;
    display: inline-block;
}

.termo-explicado {
    cursor: help;
    border-bottom: 1px dotted currentcolor;
    background: transparent;
    color: var(--cor-primaria);
    font-style: italic;
}

.explicacao-termo {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: calc(100% + 7px);
    visibility: hidden;
    width: 210px;
    padding: 7px 9px;
    border-radius: 3px;
    background: #282828;
    box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    text-indent: 0;
    white-space: normal;
    transition: opacity 150ms ease, visibility 150ms ease;
}

.explicacao-termo::after {
    position: absolute;
    top: 100%;
    right: 12px;
    border: 5px solid transparent;
    border-top-color: #282828;
    content: "";
}

.termo-tooltip-abaixo .explicacao-termo {
    top: calc(100% + 7px);
    right: auto;
    bottom: auto;
    left: 0;
}

.termo-tooltip-abaixo .explicacao-termo::after {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 12px;
    border-top-color: transparent;
    border-bottom-color: #282828;
}

.termo-tooltip:hover .explicacao-termo,
.termo-tooltip:focus-within .explicacao-termo {
    visibility: visible;
    opacity: 1;
}


/* ===== RESPONSIVO / CELULAR =====
   Abaixo de 700px, o menu lateral vai para cima do conteúdo. */
@media (max-width: 900px) {
    .cartoes-iniciais {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .comparacao-exclusivos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resumo-versoes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resumo-versao-yellow {
        grid-column: 1 / -1;
    }

    .painel-exclusivos-yellow {
        grid-column: 1 / -1;
    }

    .painel-exclusivos-yellow .lista-exclusivos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .evolucoes-troca {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 700px) {

    .avaliacao-pokemon-meia-largura {
        width: 100%;
    }

    .comparacao-game-boys {
        overflow-x: auto;
        grid-template-columns: repeat(4, 190px);
        padding: 8px 2px 10px;
        scroll-snap-type: x proximity;
    }

    .cartao-game-boy {
        scroll-snap-align: start;
    }

    .comparacao-exclusivos {
        grid-template-columns: 1fr;
    }

    .resumo-versoes,
    .comparacao-recursos-3ds {
        grid-template-columns: 1fr;
    }

    .grade-aparicoes {
        grid-template-columns: 1fr;
    }

    .cabecalho-quadro-batalha {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .equipes-rival {
        grid-template-columns: 1fr;
    }

    .lista-pokemon-rival {
        min-height: 0;
    }

    .lista-pokemon-ginasio {
        grid-template-columns: 1fr;
    }

    .confronto-treinador-reservado {
        grid-template-columns: 1fr;
    }

    .lista-pokemon-treinador-reservado .pokemon-rival {
        justify-content: center;
    }

    .lista-treinadores-rota-3,
    .lista-treinadores-rota-25 {
        grid-template-columns: 1fr;
    }

    .grade-notas-itens,
    .grade-fosseis,
    .lista-pokemon-batalha-yellow {
        grid-template-columns: 1fr;
    }

    .recompensa-insignia {
        grid-template-columns: 1fr;
    }

    .brilho-insignia {
        margin: 0 auto;
    }

    .recompensa-insignia h3 {
        text-align: center;
    }

    .resumo-versao-yellow {
        grid-column: auto;
    }

    .painel-exclusivos-yellow {
        grid-column: auto;
    }

    .painel-exclusivos-yellow .lista-exclusivos {
        grid-template-columns: 1fr;
    }

    .cartao-evolucao-troca {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .troca-evolucao-yellow {
        grid-template-columns: repeat(5, max-content);
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .troca-evolucao-yellow > span {
        width: 90px;
        padding: 5px 3px;
    }

    .troca-evolucao-yellow img {
        width: 58px;
        height: 58px;
    }

    .tabela-comparacao-3ds th:first-child,
    .tabela-comparacao-3ds td:first-child,
    .tabela-trocas-yellow th:first-child,
    .tabela-trocas-yellow td:first-child,
    .tabela-premios-yellow th:first-child,
    .tabela-premios-yellow td:first-child,
    .tabela-lojas-yellow th:first-child,
    .tabela-lojas-yellow td:first-child {
        white-space: normal;
    }

    .tabela-comparacao-dv {
        table-layout: auto;
    }

    .tabela-versoes th:first-child,
    .tabela-versoes td:first-child,
    .tabela-categorias-golpes th:first-child,
    .tabela-categorias-golpes td:first-child,
    .tabela-plataformas th:first-child,
    .tabela-plataformas td:first-child,
    .tabela-atributos td:last-child {
        white-space: normal;
    }

}

@media (prefers-reduced-motion: reduce) {
    .brilho-insignia::after {
        animation: none;
    }

    .brilho-moon-stone::after {
        animation: none;
    }

    .botao-navegacao:hover .seta-navegacao {
        animation: none;
    }

    .explicacao-termo {
        transition: none;
    }

}

@media print {
    .navegacao-guia {
        display: none;
    }

    .painel-aparicoes,
    .quadro-batalha,
    .janela-video-guia,
    .caixa-red-blue,
    .caixa-item-especial,
    .caixa-fosseis,
    .cartao-inicial,
    .cartao-game-boy,
    .exemplo-pokemon,
    table {
        break-inside: avoid;
    }
}