/* ===== 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-block-start: 28px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--cor-borda);
}

.botao-proximo {
    margin-inline-start: 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;
    text-wrap: balance;
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.botao-navegacao:focus-visible {
    outline: 3px solid var(--cor-primaria);
    outline-offset: 2px;
}

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

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

    .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(min(100%, 250px), 1fr));
    gap: 12px;
    margin-block: 15px 20px;
}

.grade-aparicoes-compacta {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.painel-aparicoes {
    --cor-aparicao-titulo: #536a92;
    --cor-aparicao-titulo-texto: #fff;
    --cor-aparicao-clara: #eef4ff;
    --cor-aparicao-media: #dce8fa;

    contain: layout paint style;
    content-visibility: auto;
    contain-intrinsic-size: auto 360px;
    inline-size: 100%;
    min-inline-size: 0;
    overflow-x: auto;
    overflow-y: clip;
    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;
    background: var(--cor-aparicao-titulo);
    color: var(--cor-aparicao-titulo-texto);
    font-size: 14px;
    text-align: center;
}

/* Mantem o mesmo componente visual quando o titulo do painel usa h2. */
#conteudo .titulo-aparicoes {
    margin: 0;
    padding: 9px 12px;
    border: 0;
    font-size: 14px;
    line-height: 1.5;
}

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

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

.painel-aparicoes-yellow {
    --cor-aparicao-titulo: #e8b400;
    --cor-aparicao-titulo-texto: #2b2400;
    --cor-aparicao-clara: #fffbea;
    --cor-aparicao-media: #fff2bd;
}

.tabela-aparicoes {
    inline-size: 100%;
    margin: 0;
    table-layout: auto;
}

.grade-aparicoes-compacta .painel-aparicoes {
    inline-size: fit-content;
    max-inline-size: 100%;
}

.grade-aparicoes-compacta .tabela-aparicoes {
    inline-size: auto;
    table-layout: auto;
}

.grade-aparicoes-compacta .tabela-aparicoes th:is(:first-child, :nth-child(2), :nth-child(3)) {
    width: auto;
}

.grade-aparicoes-compacta .tabela-aparicoes th,
.grade-aparicoes-compacta .tabela-aparicoes td {
    padding-right: 8px;
    padding-left: 8px;
}

.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: auto;
}

.tabela-aparicoes th:is(:nth-child(2), :nth-child(3)) {
    width: 1%;
}

.tabela-aparicoes td {
    padding-top: 2px;
    padding-bottom: 2px;
    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 :is(th, td):is(:nth-child(2), :nth-child(3)) {
    min-width: 46px;
    padding-right: 6px;
    padding-left: 6px;
    white-space: nowrap;
}

.pokemon-aparicao {
    display: flex;
    align-items: center;
    gap: 5px;
    min-inline-size: 0;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    white-space: normal;
}

.sprite-aparicao,
.sprite-rival {
    display: block;
    flex: 0 0 auto;
    inline-size: 60px;
    block-size: 60px;
    min-inline-size: 60px;
    min-block-size: 60px;
    max-inline-size: none;
}

.tabela-aparicoes .linha-subgrupo-aparicao th {
    background: #a8bee9;
    color: #182540;
    font-weight: 800;
    text-align: center;
}

.painel-aparicoes-yellow .tabela-aparicoes .linha-subgrupo-aparicao th {
    background: #e8b400;
    color: #2b2400;
}

/* ===== POKEMON PESCAVEIS ===== */
.grade-pesca-pokemon {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    align-items: start;
}

.painel-pesca-pokemon {
    --pesca-borda: #ddd;
    --pesca-linha-old: #fbfdff;
    --pesca-linha-good: #edf8fd;
    --pesca-linha-super: #d9eef8;
}

.painel-pesca-rb {
    --cor-aparicao-titulo: #536a92;
    --cor-aparicao-clara: #eef4ff;
    --cor-aparicao-media: #dce8fa;
}

.painel-pesca-pokemon.painel-aparicoes-yellow {
    --pesca-linha-old: #fffbea;
    --pesca-linha-good: #fff2bd;
    --pesca-linha-super: #ffe28a;
}

.painel-pesca-pokemon .tabela-rolavel {
    margin: 0;
}

.tabela-pesca-pokemon {
    inline-size: 100%;
    min-inline-size: 360px;
    margin: 0;
    table-layout: fixed;
}

.tabela-pesca-pokemon th,
.tabela-pesca-pokemon td {
    padding: 6px 8px;
    border: 1px solid var(--pesca-borda);
    text-align: center;
    vertical-align: middle;
}

.tabela-pesca-pokemon th {
    background: var(--cor-aparicao-media);
    color: var(--cor-texto);
    font-size: 12px;
}

.tabela-pesca-pokemon :is(th, td):first-child {
    text-align: left;
}

.tabela-pesca-pokemon th:first-child {
    width: 43%;
}

.tabela-pesca-pokemon th:nth-child(2) {
    width: 14%;
}

.tabela-pesca-pokemon :is(th, td):nth-child(2) {
    white-space: nowrap;
}

.tabela-pesca-pokemon th:nth-child(3) {
    width: 25%;
}

.tabela-pesca-pokemon th:nth-child(4) {
    width: 18%;
}

.tabela-pesca-pokemon td {
    padding-top: 2px;
    padding-bottom: 2px;
    background: var(--pesca-linha-old);
    color: var(--cor-texto);
}

.tabela-pesca-pokemon tbody tr[data-vara="good"] td {
    background: var(--pesca-linha-good);
}

.tabela-pesca-pokemon tbody tr[data-vara="super"] td {
    background: var(--pesca-linha-super);
}

.tabela-pesca-pokemon td:nth-child(4) {
    font-weight: 800;
}

.metodo-pesca {
    display: inline-block;
    min-inline-size: 68px;
    padding: 2px 6px;
    border: 1px solid #b8cfdd;
    border-radius: 999px;
    background: #eef8fc;
    color: #1c4962;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.tabela-pesca-pokemon tbody tr[data-vara="old"] .metodo-pesca {
    border-color: #9aa5ad;
    background: #e8ecef;
    color: #35414a;
}

.tabela-pesca-pokemon tbody tr[data-vara="good"] .metodo-pesca {
    border-color: #3f9b78;
    background: #dff5eb;
    color: #13543f;
}

.tabela-pesca-pokemon tbody tr[data-vara="super"] .metodo-pesca {
    border-color: #2f6cc2;
    background: #dceaff;
    color: #183f81;
}

.grade-super-rod-roundup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 12px;
    margin: 16px 0 20px;
}

.cartao-super-rod {
    overflow: hidden;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    background: var(--cor-superficie);
    box-shadow: var(--sombra-suave);
}

.cabecalho-super-rod {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #eef4ff, #fffdf2);
    border-bottom: 1px solid var(--cor-borda);
}

.cabecalho-super-rod img {
    inline-size: 60px;
    block-size: 60px;
}

.cabecalho-super-rod h3 {
    margin: 0 0 3px;
    color: var(--cor-topo);
    font-size: 16px;
}

.cabecalho-super-rod small {
    color: var(--cor-texto-fraco);
    font-size: 10px;
    font-weight: 700;
}

.corpo-super-rod {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
}

.bloco-nivel-pesca {
    min-width: 0;
}

.bloco-nivel-pesca strong {
    display: block;
    margin-bottom: 6px;
    color: var(--cor-topo);
    font-size: 12px;
}

.lista-niveis-pesca {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1.35;
}

.lista-niveis-pesca li {
    padding: 6px 7px;
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 6px;
    background: #f8fbff;
}

.lista-niveis-pesca li + li {
    margin-top: 0;
}

.marca-versao {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-right: 2px;
    border-radius: 50%;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    vertical-align: text-bottom;
}

.marca-red {
    background: #c83e3e;
}

.marca-blue {
    background: #3478b8;
}

.marca-yellow {
    background: #d6a900;
    color: #2b2400;
}

/* ===== PIKACHU'S BEACH / SEA ROUTES 19 E 20 ===== */
.sea-route-guide .titulo-summer-beach {
    display: flex;
    inline-size: fit-content;
    max-inline-size: 100%;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-inline-start: 4px solid #d6a900;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(90deg, #fff5bf 0%, #fffbe8 100%);
    box-shadow: 0 2px 8px rgb(214 169 0 / 16%);
    color: #806500;
}

.sea-route-guide .grade-pikachu-beach {
    contain: layout paint style;
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(150px, 180px);
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-block: 16px;
}

.sea-route-guide .tabela-radness-container {
    max-inline-size: 100%;
    margin: 0;
}

.sea-route-guide .tabela-radness-pikachu {
    inline-size: max-content;
    max-inline-size: 100%;
    margin-inline: auto;
    table-layout: auto;
}

.sea-route-guide .tabela-radness-pikachu :is(th, td):nth-child(2) {
    white-space: nowrap;
}

.sea-route-guide .captura-pikachu-beach {
    inline-size: min(100%, 180px);
    margin: 0;
}

.sea-route-guide .captura-pikachu-beach img {
    box-sizing: content-box;
    inline-size: 162px;
    block-size: 146px;
    margin-inline: auto;
}

@media (width <= 700px) {
    .corpo-super-rod {
        grid-template-columns: 1fr;
    }

    .sea-route-guide .grade-pikachu-beach {
        grid-template-columns: minmax(0, 1fr);
    }

    .sea-route-guide .captura-pikachu-beach {
        justify-self: center;
    }
}

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

.avaliacao-pokemon {
    contain: layout paint style;
    content-visibility: auto;
    contain-intrinsic-size: auto 280px;
    overflow: hidden;
    margin-block: 16px;
    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;
}

.grade-avaliacoes-pokemon .avaliacao-pokemon-centralizada {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: min(100%, 390px);
}

.grade-avaliacoes-pokemon .avaliacao-pokemon-snorlax {
    inline-size: min(100%, 620px);
}

.conjunto-aparicao-avaliacao {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    margin: 16px 0 20px;
}

.conjunto-aparicao-avaliacao .grade-avaliacoes-pokemon,
.conjunto-aparicao-avaliacao .grade-aparicoes {
    margin: 0;
}

.conjunto-aparicao-avaliacao .grade-avaliacoes-pokemon {
    flex: 0 1 390px;
}

.conjunto-aparicao-avaliacao .grade-aparicoes {
    flex: 0 0 auto;
}

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

.avaliacao-pokemon-meia-largura {
    inline-size: 50%;
    margin-inline: auto;
}

.avaliacao-pokemon-charmander {
    inline-size: min(100%, 680px);
    margin-inline: auto;
}

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

.cabecalho-avaliacao-pokemon img {
    display: block;
    flex: 0 0 auto;
    inline-size: 60px;
    block-size: 60px;
    min-inline-size: 60px;
    min-block-size: 60px;
    max-inline-size: none;
}

.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);
    color: var(--cor-topo);
}

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

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

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

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

.selo-rank-f {
    background: #5a4d59;
}

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

.grupo-rank-temporal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    white-space: nowrap;
}

.rotulo-rank-temporal {
    color: var(--cor-texto-fraco);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

#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;
}

.dica-curiosidade:is(
    .curiosidade-safari-amarela,
    .curiosidade-safari-verde,
    .curiosidade-safari-azul,
    .curiosidade-silph-roxa,
    .curiosidade-silph-verde,
    .curiosidade-silph-dourada,
    .curiosidade-cinnabar-vermelha,
    .curiosidade-viridian-terra
) {
    background-color: var(--cor-curiosidade-fundo);
    border-left-color: var(--cor-curiosidade-borda);
}

.dica-curiosidade:is(
    .curiosidade-safari-amarela,
    .curiosidade-safari-verde,
    .curiosidade-safari-azul,
    .curiosidade-silph-roxa,
    .curiosidade-silph-verde,
    .curiosidade-silph-dourada,
    .curiosidade-cinnabar-vermelha,
    .curiosidade-viridian-terra
) strong:first-child {
    color: var(--cor-curiosidade-titulo);
}

.curiosidade-safari-amarela {
    --cor-curiosidade-fundo: #fff7df;
    --cor-curiosidade-borda: #d89a34;
    --cor-curiosidade-titulo: #855b11;
}

.curiosidade-viridian-terra {
    --cor-curiosidade-fundo: #f2f5ed;
    --cor-curiosidade-borda: #71825f;
    --cor-curiosidade-titulo: #405332;
}

.curiosidade-safari-verde {
    --cor-curiosidade-fundo: #eef9f0;
    --cor-curiosidade-borda: #49a767;
    --cor-curiosidade-titulo: #287248;
}

.curiosidade-safari-azul {
    --cor-curiosidade-fundo: #eef7ff;
    --cor-curiosidade-borda: #4a8ec7;
    --cor-curiosidade-titulo: #2d6394;
}

.curiosidade-silph-roxa {
    --cor-curiosidade-fundo: #f4efff;
    --cor-curiosidade-borda: #7651bf;
    --cor-curiosidade-titulo: #4e3285;
}

.curiosidade-silph-verde {
    --cor-curiosidade-fundo: #eefaf5;
    --cor-curiosidade-borda: #40a97b;
    --cor-curiosidade-titulo: #237354;
}

.curiosidade-silph-dourada {
    --cor-curiosidade-fundo: #fff8e8;
    --cor-curiosidade-borda: #d29a35;
    --cor-curiosidade-titulo: #835d12;
}

.curiosidade-cinnabar-vermelha {
    --cor-curiosidade-fundo: #fff1f1;
    --cor-curiosidade-borda: #c83e3e;
    --cor-curiosidade-titulo: #9d2929;
}

.dica-master-ball {
    background-color: #f2edff;
    border-left-color: #6f4bb8;
}

.dica-master-ball .imagem-dica {
    flex: 0 0 64px;
    inline-size: 64px;
    block-size: 64px;
}

.dica-master-ball strong:first-child {
    color: #4f2f8f;
}

.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;
    inline-size: 42px;
    block-size: 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;
    inline-size: 42px;
    block-size: 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: 8px 16px 7px;
    background: linear-gradient(135deg, #4c4a47, #292826);
    color: #fff;
    text-align: center;
}

.cabecalho-caixa-fosseis h3 {
    margin: 0 0 2px;
    font-size: 16px;
    line-height: 1.2;
}

#conteudo .cabecalho-caixa-fosseis p {
    margin: 0;
    color: #dedbd5;
    font-size: 10px;
    line-height: 1.25;
}

.grade-fosseis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 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: 66px;
}

.sprites-fossil img {
    display: block;
    inline-size: 60px;
    block-size: 60px;
}

.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;
}

/* ===== QUIZ DO GINÁSIO DE CINNABAR ===== */
.secao-quiz-cinnabar {
    margin: 18px 0;
}

.quiz-cinnabar-geral {
    contain: layout paint;
    overflow: hidden;
    border: 1px solid #d3d6da;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgb(30 36 42 / 7%);
    color: var(--cor-texto);
}

.cabecalho-quiz-cinnabar-geral {
    display: grid;
    align-items: center;
    padding: 13px 15px;
    border-bottom: 1px solid #d5d9dd;
    background: linear-gradient(180deg, #f8f9fa, #eef0f2);
    color: var(--cor-topo);
}

.titulo-resumo-quiz {
    display: grid;
    gap: 2px;
}

.titulo-resumo-quiz strong {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.titulo-resumo-quiz small {
    color: var(--cor-texto-fraco);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
}

.lista-respostas-quiz {
    display: grid;
    counter-reset: pergunta-quiz;
    margin: 0;
    padding: 4px 14px;
    list-style: none;
}

.item-resposta-quiz {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 72px;
    align-items: start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #e1e3e6;
    counter-increment: pergunta-quiz;
}

.item-resposta-quiz:last-child {
    border-bottom: 0;
}

.item-resposta-quiz::before {
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border: 1px solid #c5cbd1;
    border-radius: 50%;
    background: #f1f3f5;
    color: #59616a;
    content: counter(pergunta-quiz, decimal-leading-zero);
    font-size: 11px;
    font-weight: 800;
}

.texto-resposta-quiz {
    min-width: 0;
}

.cabecalho-pergunta-quiz {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
}

.cabecalho-pergunta-quiz > strong {
    color: var(--cor-topo);
    font-size: 12px;
    line-height: 1.4;
}

.botao-traduzir-pergunta {
    min-block-size: 24px;
    padding: 4px 6px;
    border: 1px solid #c8cdd2;
    border-radius: 999px;
    background: #dfeaf1;
    color: #315e78;
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
}

.botao-traduzir-pergunta:hover,
.botao-traduzir-pergunta[aria-expanded="true"] {
    border-color: #8398a7;
    background: #edf3f6;
}

.botao-traduzir-pergunta:focus-visible {
    outline: 2px solid #52758a;
    outline-offset: 2px;
}

#conteudo .traducao-pergunta-quiz {
    margin: 6px 0 0;
    padding: 5px 8px;
    border-left: 3px solid #7899ad;
    background: #f2f5f7;
    color: #46545e;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
}

#conteudo .traducao-pergunta-quiz[hidden] {
    display: none;
}

.resposta-quiz {
    display: grid;
    justify-items: center;
    min-inline-size: 64px;
    padding: 6px 8px;
    border: 1px solid currentcolor;
    border-radius: 7px;
    line-height: 1;
}

.resposta-quiz strong {
    display: block;
    font-size: 11px;
}

#conteudo .explicacao-pergunta-quiz {
    margin: 5px 0 0;
    color: var(--cor-texto);
    font-size: 11px;
    line-height: 1.55;
    text-align: left;
}

.resposta-quiz-sim {
    background: #e9f2ec;
    color: #276342;
}

.resposta-quiz-nao {
    background: #faeceb;
    color: #b23a32;
}

/* ===== ROTEIROS DE TELETRANSPORTE ===== */
.roteiro-teletransporte {
    contain: layout paint;
    overflow: hidden;
    margin: 18px 0;
    border: 1px solid #c9d5e4;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fbff, #fff);
    box-shadow: var(--sombra-suave);
}

.cabecalho-roteiro-teletransporte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    background: linear-gradient(135deg, #26364f, #2f608e);
    color: #fff;
}

.cabecalho-roteiro-teletransporte strong {
    font-size: 15px;
}

.cabecalho-roteiro-teletransporte span {
    color: #e9f2ff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.lista-roteiro-teletransporte {
    display: grid;
    counter-reset: passo-teletransporte;
    gap: 10px;
    margin: 0;
    padding: 14px;
    list-style: none;
}

.passo-teletransporte {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(148px, max-content);
    align-items: center;
    gap: 10px;
    counter-increment: passo-teletransporte;
    padding: 10px;
    border: 1px solid #dce4ef;
    border-radius: 8px;
    background: #fff;
}

.passo-teletransporte::before {
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    border: 1px solid #9db8d7;
    border-radius: 50%;
    background: #eef5ff;
    color: #244e79;
    content: counter(passo-teletransporte);
    font-size: 12px;
    font-weight: 800;
}

.acao-teletransporte {
    font-size: 14px;
    line-height: 1.45;
}

.destino-teletransporte {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 7px;
    padding: 5px 8px;
    border: 1px solid #d7bc4a;
    border-radius: 6px;
    background: #fff8d6;
    color: #594a00;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.destino-teletransporte::before {
    inline-size: 8px;
    block-size: 8px;
    border: 1px solid #9f8417;
    background: #d7aa19;
    content: "";
    transform: rotate(45deg);
}

/* ===== QUADROS DE BATALHA ===== */
.quadro-batalha {
    contain: layout paint;
    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;
}

.quadro-batalha-lendario {
    --quadro-lendario-borda: #c7a62a;
    --quadro-lendario-fundo: linear-gradient(180deg, #fffdf2, #f7fbff);
    --quadro-lendario-cabecalho: linear-gradient(135deg, #26344e 0%, #315783 62%, #d7aa19 100%);
    --quadro-lendario-subtitulo: #e7ebf3;
    --quadro-lendario-divisoria: #d2bc4a;
    --quadro-lendario-equipe: linear-gradient(180deg, #f7fbff, #fff9d8);
    --quadro-lendario-pokemon-borda: rgb(188 151 18 / 42%);
    --quadro-lendario-pokemon-fundo: linear-gradient(180deg, rgb(255 255 255 / 88%), rgb(255 247 195 / 78%));

    border-color: var(--quadro-lendario-borda);
    background: var(--quadro-lendario-fundo);
}

.quadro-batalha-lendario .cabecalho-quadro-batalha {
    background: var(--quadro-lendario-cabecalho);
}

.quadro-batalha-lendario .cabecalho-quadro-batalha span {
    color: var(--quadro-lendario-subtitulo);
}

.quadro-batalha-lendario .equipes-rival {
    background: var(--quadro-lendario-divisoria);
}

.quadro-batalha-lendario .equipe-rival {
    background: var(--quadro-lendario-equipe);
}

.quadro-batalha-lendario .pokemon-rival {
    border-color: var(--quadro-lendario-pokemon-borda);
    background: var(--quadro-lendario-pokemon-fundo);
}

.quadro-batalha-articuno {
    --quadro-lendario-borda: #76b7d6;
    --quadro-lendario-fundo: linear-gradient(180deg, #f6fcff, #edf7fc);
    --quadro-lendario-cabecalho: linear-gradient(135deg, #173653 0%, #2e789e 62%, #bfe9fb 100%);
    --quadro-lendario-subtitulo: #eefaff;
    --quadro-lendario-divisoria: #94cfe7;
    --quadro-lendario-equipe: linear-gradient(180deg, #f7fcff, #e4f4fb);
    --quadro-lendario-pokemon-borda: rgb(68 148 187 / 42%);
    --quadro-lendario-pokemon-fundo: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(218 242 252 / 82%));
}

.quadro-batalha-articuno .equipe-rival-yellow .rotulo-equipe-rival {
    background: #f4d866;
    color: #2b2400;
}

.dica-captura-articuno {
    background-color: #eef8ff;
    border-left-color: #2e789e;
}

.dica-captura-articuno strong:first-child {
    color: #1f6689;
}

.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 {
    contain: layout paint;
    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%);
}

.pokemon-rival span {
    min-width: 0;
    hyphens: manual;
    overflow-wrap: normal;
    word-break: keep-all;
}

.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,
.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;
}

.cartao-rival-tower {
    contain: layout paint;
    overflow: hidden;
    border: 1px solid rgb(0 0 0 / 18%);
    border-radius: 7px;
    background: rgb(255 255 255 / 78%);
    box-shadow: 0 3px 10px rgb(31 42 68 / 8%);
}

.titulo-opcao-rival {
    padding: 6px 8px;
    background: #eef2f8;
    color: var(--cor-topo);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.equipe-rival-yellow .titulo-opcao-rival {
    background: #fff1a7;
    color: #3a3000;
}

.opcoes-rival-tower {
    align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr));
    margin-top: 8px;
}

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

.equipes-rival-tower .lista-pokemon-rival-compacta {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.fixos-rival-tower {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    margin-top: 6px;
}

.perfil-rival-tower {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 3px;
    padding: 8px 6px;
    border: 1px solid rgb(0 0 0 / 12%);
    border-radius: 6px;
    background: rgb(255 255 255 / 66%);
    text-align: center;
}

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

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

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

.opcoes-rival-tower .cartao-rival-tower {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
}

.sprite-treinador-rival-tower {
    display: block;
    width: 62px;
    height: 62px;
    object-fit: contain;
    image-rendering: pixelated;
}

.lista-pokemon-rival-tower {
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 8px;
}

.lista-pokemon-rival-tower .pokemon-rival {
    justify-content: flex-start;
    min-width: 0;
    padding: 3px 6px;
}

.lista-pokemon-rival-tower .pokemon-rival strong {
    font-size: 11px;
}

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

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

.treinador-floresta {
    contain: layout paint;
    contain-intrinsic-size: auto 160px;
    content-visibility: auto;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 5px;
    background: rgb(255 255 255 / 72%);
}

.treinador-floresta[id] {
    scroll-margin-block-start: 14px;
}

.treinador-floresta:focus {
    border-color: #111;
    outline: none;
    box-shadow: inset 0 0 0 2px #111;
}

.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 {
    align-self: center;
    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 {
    inline-size: 60px;
    block-size: 60px;
}

.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 {
    justify-self: start;
    align-self: end;
    color: var(--cor-texto-fraco);
    font-size: 9px;
    text-align: left;
}

.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;
    inline-size: 56px;
    block-size: 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 .pokemon-rival:last-child:nth-child(odd),
.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;
    inline-size: 72px;
    block-size: 72px;
    object-fit: contain;
    image-rendering: pixelated;
}

.sprite-rocket-cerulean {
    inline-size: 56px;
    block-size: 56px;
}

.sprite-rocket-game-corner {
    inline-size: 60px;
    block-size: 60px;
}

.sprite-pokemaniac-power-plant {
    inline-size: 56px;
    block-size: 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: 6px;
    padding: 6px;
    background: rgb(255 255 255 / 82%);
}

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

.lista-pokemon-treinador-reservado .pokemon-rival span {
    min-width: max-content;
}

.lista-pokemon-treinador-reservado .pokemon-rival strong,
.lista-pokemon-treinador-reservado .pokemon-rival small {
    overflow-wrap: normal;
    word-break: keep-all;
    white-space: nowrap;
}

.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 {
    inline-size: 60px;
    block-size: 60px;
}

.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-plataformas {
    min-width: 640px;
}

.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 :is(th, td):last-child {
    width: 62px;
    text-align: center;
}

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

.tabela-tms-celadon,
.tabela-tms-terraco {
    width: 100%;
    table-layout: fixed;
}

.tabela-tms-celadon th,
.tabela-tms-terraco th {
    text-align: center;
}

.tabela-tms-celadon :is(th, td):nth-child(1) {
    width: 8%;
    text-align: center;
}

.tabela-tms-celadon :is(th, td):nth-child(2) {
    width: 16%;
}

.tabela-tms-celadon :is(th, td):nth-child(3) {
    width: 9%;
    text-align: center;
}

:is(
    .tabela-tms-celadon :is(th, td):nth-child(4),
    .tabela-tms-terraco :is(th, td):nth-child(3)
) {
    line-height: 1.5;
}

.tabela-tms-terraco :is(th, td):nth-child(1) {
    width: 16%;
}

.tabela-tms-terraco :is(th, td):nth-child(2) {
    width: 22%;
}

.tabela-tms-prize-corner :is(th, td):nth-child(1) {
    width: 22%;
}

.tabela-tms-prize-corner :is(th, td):nth-child(2) {
    width: 12%;
    text-align: center;
    white-space: nowrap;
}

.tabela-pagamentos-slots {
    width: min(100%, 360px);
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #b8b8b8;
    border-collapse: collapse;
}

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

.tabela-pagamentos-slots :is(th, td):last-child {
    width: 105px;
    text-align: center;
    white-space: nowrap;
}

.captura-game-corner-coins {
    width: min(100%, 520px);
}

.captura-game-corner-coins figcaption {
    font-size: 8px;
}

.tabela-prize-corner-celadon {
    width: min(100%, 620px);
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #b8b8b8;
    border-collapse: collapse;
    table-layout: fixed;
}

.tabela-prize-corner-celadon :is(th, td) {
    border: 1px solid #b8b8b8;
}

.tabela-prize-corner-celadon :is(th, td):not(:first-child) {
    text-align: center;
}

.tabela-prize-corner-celadon col:first-child {
    width: 28%;
}

.tabela-prize-corner-celadon col:not(:first-child) {
    width: 24%;
}

.cinnabar-island-guide .tabela-preparo-cinnabar {
    width: auto;
    min-width: 286px;
    max-width: 100%;
    margin-inline: auto;
}

.cinnabar-island-guide .tabela-preparo-cinnabar :is(th, td) {
    border-right: 1px solid #ddd;
    text-align: center;
    white-space: nowrap;
}

.cinnabar-island-guide .tabela-preparo-cinnabar :is(th, td):last-child {
    border-right: 0;
}

.imagem-dica-poke-flute {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
}

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

.tabela-amizade-pikachu :is(th, 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;
}

:is(.tabela-versoes, .tabela-categorias-golpes, .tabela-plataformas) :is(th, 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;
    inline-size: 60px;
    block-size: 60px;
}

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

#conteudo .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;
    inline-size: 52px;
    block-size: 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;
}

.mapa-lixeiras-vermilion {
    display: flex;
    justify-content: center;
    overflow-x: visible;
    margin: 12px 0;
}

.mapa-lixeiras-vermilion .tabela-info.tabela-lixeiras-vermilion {
    width: max-content;
    min-width: 0;
    margin: 0 auto;
    border: 1px solid var(--cor-borda);
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--cor-superficie);
    box-shadow: var(--sombra-suave);
    font-family: Arial, Helvetica, sans-serif;
    font-variant-numeric: tabular-nums;
    table-layout: fixed;
}

.mapa-lixeiras-vermilion .tabela-info.tabela-lixeiras-vermilion caption {
    max-width: 260px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.mapa-lixeiras-vermilion .tabela-info.tabela-lixeiras-vermilion td {
    width: 36px;
    min-width: 36px;
    padding: 7px 9px;
    border: 1px solid #d9dce3;
    background: #fafafa;
    color: var(--cor-texto);
    font-size: 15px;
    line-height: 1.15;
    text-align: center;
    vertical-align: middle;
}

.numero-lixeira {
    font-family: Arial, Helvetica, sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.grade-tabelas-lixeiras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 14px;
    margin: 18px 0 22px;
}

.cartao-tabela-lixeiras {
    overflow: hidden;
    border: 1px solid #2f3542;
    border-radius: 8px;
    background: var(--cor-superficie);
    box-shadow: var(--sombra-suave);
}

.rotulo-versao-lixeiras {
    padding: 11px 14px;
    border-bottom: 1px solid #2f3542;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
    text-align: center;
}

.rotulo-versao-lixeiras-rb {
    background: linear-gradient(135deg, #c83e3e 0%, #6d4ba6 48%, #2f65c8 100%);
    color: #fff;
}

.rotulo-versao-lixeiras-yellow {
    background: linear-gradient(135deg, #ffe56a 0%, #e8b400 100%);
    color: #2b2400;
}

.cartao-tabela-lixeiras .tabela-rolavel {
    margin: 0;
}

.tabela-info.tabela-puzzle-lixeiras {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-variant-numeric: tabular-nums;
}

.tabela-info.tabela-puzzle-lixeiras th,
.tabela-info.tabela-puzzle-lixeiras td {
    padding: 8px 10px;
    border: 1px solid #d9dce3;
    text-align: center;
    vertical-align: middle;
}

.tabela-info.tabela-puzzle-lixeiras th {
    background: #f1f3f7;
    color: var(--cor-topo);
}

.tabela-info.tabela-puzzle-lixeiras td:first-child {
    width: 112px;
}

#conteudo .cartao-tabela-lixeiras p {
    margin: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--cor-borda);
    color: var(--cor-texto);
    font-size: 12px;
    line-height: 1.6;
    text-align: justify;
}

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

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

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

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

.tabela-trocas-yellow :is(th, 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 {
    inline-size: 46px;
    block-size: 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 {
    inline-size: 42px;
    block-size: 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 {
    inline-size: 60px;
    block-size: 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 :is(th, 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;
    inline-size: 72px;
    block-size: 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;
    inline-size: 72px;
    block-size: 72px;
}

.comparacao-sprites-versoes-original img {
    inline-size: 60px;
    block-size: 60px;
}

:is(.destaque-zapdos, .destaque-articuno) {
    --card-lendario-borda: #c5ccd7;
    --card-lendario-fundo: linear-gradient(180deg, #f8fafc, #e8ecf2);

    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

:is(.destaque-zapdos, .destaque-articuno) figure {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-color: var(--card-lendario-borda);
    background: var(--card-lendario-fundo);
}

.destaque-articuno {
    --card-lendario-borda: #b8ccd8;
    --card-lendario-fundo: linear-gradient(180deg, #f8fcff, #e4f1f7);
}

:is(.destaque-zapdos, .destaque-articuno) figure::after {
    position: absolute;
    inset: -30% auto -30% -45%;
    inline-size: 34%;
    background: linear-gradient(
        100deg,
        transparent,
        rgb(255 255 255 / 18%),
        rgb(255 255 255 / 82%),
        rgb(255 255 255 / 18%),
        transparent
    );
    content: "";
    filter: blur(1px);
    transform: translateX(-120%) skewX(-18deg);
    animation: brilho-card-lendario 3.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes brilho-card-lendario {
    0%,
    42% {
        opacity: 0;
        transform: translateX(-120%) skewX(-18deg);
    }

    52% {
        opacity: 1;
    }

    74%,
    100% {
        opacity: 0;
        transform: translateX(560%) skewX(-18deg);
    }
}

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

.sprites-presente-pokemon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin: 10px 0 18px;
}

.sprites-presente-pokemon figure {
    display: grid;
    justify-items: center;
    gap: 4px;
    margin: 0;
}

.sprites-presente-pokemon img {
    display: block;
    inline-size: 72px;
    block-size: 72px;
}

.sprites-presente-pokemon 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 {
    inline-size: 52px;
    block-size: 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: inline-end;
    inline-size: 82px;
    block-size: 82px;
    margin-block: 0 8px;
    margin-inline: 10px 0;
}

/* 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: auto;
    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;
}

.termo-tooltip[data-tooltip-fechado] .explicacao-termo {
    visibility: hidden;
    opacity: 0;
}


/* ===== RESPONSIVO / CELULAR =====
   Abaixo de 700px, o menu lateral vai para cima do conteúdo. */
@media (width <= 900px) {
    .comparacao-game-boys {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .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;
    }

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

    .tabela-tms-celadon {
        min-width: 900px;
    }

    .tabela-tms-terraco {
        min-width: 820px;
    }

}

@media (width <= 700px) {

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

    .conjunto-aparicao-avaliacao {
        align-items: center;
        flex-direction: column;
    }

    .conjunto-aparicao-avaliacao .grade-avaliacoes-pokemon,
    .conjunto-aparicao-avaliacao .grade-aparicoes {
        width: 100%;
    }

    .comparacao-game-boys {
        overscroll-behavior-inline: contain;
        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;
    }

    .comparacao-sprites-versoes {
        gap: 10px;
    }

    .comparacao-sprites-versoes figure {
        min-inline-size: min(100%, 140px);
        padding-inline: 12px;
    }

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

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

    .cabecalho-quiz-cinnabar-geral {
        padding: 10px 11px;
    }

    .item-resposta-quiz {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
    }

    .item-resposta-quiz .resposta-quiz {
        grid-column: 2;
        justify-self: start;
    }

    .passo-teletransporte {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .destino-teletransporte {
        grid-column: 2;
        justify-self: start;
        white-space: normal;
    }

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

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

    .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;
    }

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

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

    .troca-evolucao-yellow img {
        inline-size: 60px;
        block-size: 60px;
    }

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

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

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

}

@media (width <= 420px) {
    .fixos-rival-tower {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .botao-navegacao {
        transition: none;
    }

    .brilho-insignia::after {
        animation: none;
    }

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

    :is(.destaque-zapdos, .destaque-articuno) figure::after {
        animation: none;
        display: none;
    }

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

    .explicacao-termo {
        transition: none;
    }

}

@media (forced-colors: active) {
    .botao-navegacao:focus-visible {
        outline-color: Highlight;
    }
}

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

    .painel-aparicoes,
    .avaliacao-pokemon,
    .treinador-floresta {
        content-visibility: visible;
        contain-intrinsic-size: none;
    }

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

}