/* Layout Geral da Wiki */
body {
    overflow-x: hidden;
}

.wiki-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Sidebar */
.sidebar {
    width: 250px;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-right: 1px solid var(--glass-border);
    z-index: 50;
}

.sidebar .logo {
    text-align: center;
    margin-bottom: 24px;
    font-size: 2rem;
    line-height: 0;
}

/* A marca entra no lugar do texto. O recorte já vem sem o subtítulo, que a
   210px de largura teria 4px de altura. */
.logo-img {
    width: 100%;
    max-width: 190px;
    height: auto;
    display: inline-block;
}

/* O src do HTML e a marca da Gen 3 na variante escura, que e o caso padrao do
   app: assim a primeira visita baixa um arquivo so. As outras tres combinacoes
   de tema e geracao trocam por aqui, em ordem crescente de especificidade para
   a combinada vencer as duas simples. */
[data-theme="light"] .logo-img {
    content: url('../img/logo-marca.png');
}

[data-geracao="gen4"] .logo-img {
    content: url('../img/logo-gen4-marca-dark.png');
}

[data-theme="light"][data-geracao="gen4"] .logo-img {
    content: url('../img/logo-gen4-marca.png');
}

[data-geracao="gen5"] .logo-img {
    content: url('../img/logo-gen5-marca-dark.png');
}

[data-theme="light"][data-geracao="gen5"] .logo-img {
    content: url('../img/logo-gen5-marca.png');
}

/* Gen 6 em PNG de 8 bits: a paleta dele sai menor que o WebP. */
[data-geracao="gen6"] .logo-img {
    content: url('../img/logo-gen6-marca-dark.png');
}

[data-theme="light"][data-geracao="gen6"] .logo-img {
    content: url('../img/logo-gen6-marca.png');
}

[data-geracao="gen7"] .logo-img {
    content: url('../img/logo-gen7-marca-dark.png');
}

[data-theme="light"][data-geracao="gen7"] .logo-img {
    content: url('../img/logo-gen7-marca.png');
}

[data-geracao="gen8"] .logo-img {
    content: url('../img/logo-gen8-marca-dark.png');
}

[data-theme="light"][data-geracao="gen8"] .logo-img {
    content: url('../img/logo-gen8-marca.png');
}

/* Gen 1: Blastoise, Charizard e Venusaur (tools/build_gen1_marca.py, a partir
   de img/logo-gen1.jpg); a variante escura tem contorno claro. */
[data-geracao="gen1"] .logo-img {
    content: url('../img/logo-gen1-marca-dark.png');
}

[data-theme="light"][data-geracao="gen1"] .logo-img {
    content: url('../img/logo-gen1-marca.png');
}

/* Gen 2: tools/build_gen2_marca.py, mesmo processo da Gen 1. */
[data-geracao="gen2"] .logo-img {
    content: url('../img/logo-gen2-marca-dark.png');
}
[data-theme="light"][data-geracao="gen2"] .logo-img {
    content: url('../img/logo-gen2-marca.png');
}

/* Gen 9: Koraidon, Miraidon e o cristal Terastal (tools/build_gen9_marca.py,
   a partir de img/logo-gen9.jpg), no mesmo tamanho das outras marcas. */
[data-geracao="gen9"] .logo-img {
    content: url('../img/logo-gen9-marca-dark.png');
}

[data-theme="light"][data-geracao="gen9"] .logo-img {
    content: url('../img/logo-gen9-marca.png');
}

/* Remakes e jogos com arte própria dentro da geração (tools/build_marcas.py,
   artes de img/logos/): FireRed/LeafGreen, HeartGold/SoulSilver e ORAS. */
[data-jogo="firered-leafgreen"] .logo-img {
    content: url('../img/logo-frlg-marca-dark.png');
}

[data-theme="light"][data-jogo="firered-leafgreen"] .logo-img {
    content: url('../img/logo-frlg-marca.png');
}

[data-jogo="heartgold-soulsilver"] .logo-img {
    content: url('../img/logo-hgss-marca-dark.png');
}

[data-theme="light"][data-jogo="heartgold-soulsilver"] .logo-img {
    content: url('../img/logo-hgss-marca.png');
}

[data-jogo="omega-ruby-alpha-sapphire"] .logo-img {
    content: url('../img/logo-oras-marca-dark.png');
}

[data-theme="light"][data-jogo="omega-ruby-alpha-sapphire"] .logo-img {
    content: url('../img/logo-oras-marca.png');
}

/* Brilliant Diamond/Shining Pearl é Gen 8, mas remake de Sinnoh: a marca junta
   Dialga, Giratina e Palkia (arte da marca da Gen 4) com o letreiro WikiGen8,
   no mesmo tamanho da marca da Gen 8 (1147 x 570). data-jogo é o grupo. */
[data-jogo="brilliant-diamond-shining-pearl"] .logo-img {
    content: url('../img/logo-bdsp-marca-dark.png');
}

[data-theme="light"][data-jogo="brilliant-diamond-shining-pearl"] .logo-img {
    content: url('../img/logo-bdsp-marca.png');
}

/* Let's Go: Melmetal no anel do amarelo do Pikachu ao marrom do Eevee, com os
   dois parceiros (tools/build_lgpe_marca.py), com o letreiro WikiGen7. */
[data-jogo="lets-go-pikachu-lets-go-eevee"] .logo-img {
    content: url('../img/logo-lgpe-marca-dark.png');
}

[data-theme="light"][data-jogo="lets-go-pikachu-lets-go-eevee"] .logo-img {
    content: url('../img/logo-lgpe-marca.png');
}

/* Legends: Arceus: Arceus no anel dourado e verde de Hisui, com Dialga e Palkia
   na Origin Forme (tools/build_la_marca.py), no mesmo tamanho. */
[data-jogo="legends-arceus"] .logo-img {
    content: url('../img/logo-la-marca-dark.png');
}

[data-theme="light"][data-jogo="legends-arceus"] .logo-img {
    content: url('../img/logo-la-marca.png');
}

/* Legends: Z-A: Mega Zygarde no anel verde e magenta, com Mega Meganium e
   Mega Feraligatr (tools/build_za_marca.py), no mesmo tamanho. */
[data-jogo="legends-za"] .logo-img {
    content: url('../img/logo-za-marca-dark.png');
}

[data-theme="light"][data-jogo="legends-za"] .logo-img {
    content: url('../img/logo-za-marca.png');
}

/* Wrapper do menu: no desktop é transparente, no mobile vira a pista rolável */
.nav-scroller {
    flex: 1;
    width: 100%;
    min-width: 0;
    /* A sidebar tem height:100vh e não rolava: com o menu "Conteúdo editorial"
       aberto o conteúdo passava de 1100px e os últimos links ficavam abaixo da
       dobra, inalcançáveis em qualquer tela com menos de ~900px de altura.
       min-height:0 é o que permite o filho flex encolher e rolar. */
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.nav-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-color);
    padding: 12px 15px;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.nav-btn:hover:not(:disabled) {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

.nav-btn.active {
    /* Marca do menu: barra do par (degradê) à esquerda. */
    background: var(--jogo-degrade-v) left / 4px 100% no-repeat, var(--btn-bg);
    border-color: var(--glass-border);
    font-weight: 700;
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sidebar-footer {
    display: flex;
    justify-content: center;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    max-width: calc(100% - 250px);
}

/* Header Buscador */
.content-header {
    padding: 20px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.search-form {
    display: flex;
    gap: 15px;
}

.search-form .input-select {
    width: 250px;
}

/* Seletores de geração, Pokédex e jogo. Antes os limites de largura estavam
   inline no HTML e, no celular, o width: 100% esbarrava neles: os três ficavam
   empilhados com 130, 180 e 180px (análise de UX de 14/10/2026, item 8). */
.seletores-jogo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seletores-jogo .input-select { padding: 10px; font-size: 0.95rem; }
.search-form #generation-select { max-width: 130px; }
.search-form #pokedex-mode-select,
.search-form #game-version-select { max-width: 180px; }

.search-input-wrapper {
    flex: 1;
    display: flex;
    gap: 10px;
}

/* Sections */
/* .section-panel só tinha "padding: 15px" dentro do media query de 900px:
   no desktop o conteúdo ficava sem recuo nenhum, o inverso do esperado. */
.section-panel {
    padding: 20px;
}

.view-section {
    display: none;
    animation: slideIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.view-section.active {
    display: block;
}

/* Mantém a troca de telas perceptível sem esconder o foco do teclado. */
.view-section:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: 8px;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* A interface continua instantânea para quem prefere reduzir movimento. */
@media (prefers-reduced-motion: reduce) {
    .view-section {
        animation: none;
    }
}

/* Bento Grid Layout */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
}

.bento-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    min-width: 0; /* Previne que o item estoure o grid em telas menores */
}

/* O atributo hidden precisa vencer o display acima (ex.: Pokeathlon fora de HGSS). */
.bento-item[hidden] { display: none; }
/* Recurso que o jogo não tem (applyCapabilities): o display da classe não
   pode vencer o hidden (Legends: Arceus não tem habilidades nem EVs). */
[data-capability][hidden] { display: none !important; }

.bento-item h3 {
    margin-bottom: 15px;
    font-size: 1.2rem;
    color: var(--text-color);
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 5px;
}

/* Specific Bento Sizes */
.bento-hero {
    grid-column: span 1;
    grid-row: span 2;
    align-items: center;
    text-align: center;
    justify-content: center;
    position: relative;
    padding-top: 25px;
}

.bento-hero .image-controls {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
}

/* Só aparece quando os arquivos locais confirmam diferença visual por sexo.
   Fica separado da faixa principal para não apertar os cinco controles da
   ficha nem deslocar as setas do nome. */
.pokemon-gender-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -2px 0 8px;
}
.pokemon-gender-controls[hidden] { display: none; }
.pokemon-gender-controls .gender-btn {
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.35rem;
    line-height: 1;
}
.pokemon-gender-controls .gender-btn[aria-pressed="true"] {
    background: var(--primary-surface);
    border-color: var(--primary-color);
    color: var(--primary-on);
}

.bento-hero .pokemon-image {
    height: 180px;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
    margin: 15px 0;
}

.bento-desc {
    grid-column: span 2;
    grid-row: span 1;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1.6;
}

.bento-info {
    grid-column: span 1;
    grid-row: span 1;
}

.bento-stats {
    grid-column: span 1;
    grid-row: span 1;
}

.bento-matchups {
    grid-column: span 1;
    grid-row: span 1;
}

.bento-evolutions {
    grid-column: span 2;
    grid-row: span 1;
}

.bento-locations {
    grid-column: span 1;
    grid-row: span 1;
}

.bento-moves,
.bento-home {
    grid-column: span 3;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.info-cell {
    background: var(--stat-bar-bg);
    padding: 10px 15px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Habilidade + botão de alternar ficam na mesma linha, para a célula não
   crescer e desalinhar das vizinhas (Altura, Peso, EV). */
.ability-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.ability-row .pokemon-ability {
    overflow-wrap: anywhere;
}

.ability-toggle {
    position: relative;
    flex: 0 0 auto;
    min-width: 34px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* A pílula precisa ser pequena para a célula não crescer, mas o padrão pede
   alvo de toque de 44px. O pseudo-elemento estende só a área clicável. */
.ability-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: 44px;
    transform: translate(-50%, -50%);
}

.ability-toggle:hover,
.ability-toggle:focus-visible {
    background: var(--primary-surface);
    border-color: transparent;
    color: var(--primary-on);
}

.ability-toggle[hidden] { display: none; }

/* Tabelas (Moveset) */
.moves-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.moves-tabs-header {
    display: flex;
    flex-wrap: wrap; /* Permite que os botões caiam para a linha de baixo no mobile */
    gap: 10px;
    border-bottom: 2px solid var(--glass-border);
    padding-bottom: 5px;
}

/* opacity: 0.6 deixava as abas inativas em 3,52:1. --text-muted é o token já
   calibrado para passar AA nos dois temas, então a distinção vira cor de
   texto em vez de transparência. */
.move-tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px 15px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 10px 10px 0 0;
}

.move-tab-btn:hover {
    color: var(--text-color);
    background: var(--glass-bg);
}

.move-tab-btn.active {
    color: var(--text-color);
    background: var(--btn-bg);
    border-bottom: 3px solid var(--text-color);
}

.move-section {
    display: none;
    animation: fadeIn 0.3s ease;
    overflow-x: auto; /* Permite scroll horizontal em tabelas grandes no mobile */
    /* Definir só overflow-x faz o navegador computar overflow-y: auto junto, e
       o balão de descrição do golpe (que abre acima da linha) era recortado nas
       primeiras linhas. Ele passa a abrir abaixo e esta folga cobre o rodapé. */
    padding-bottom: 60px;
}

.move-section.active {
    display: block;
}

/* Legends: Arceus: poder e precisão nos estilos Agile (A) e Strong (S). */
.golpe-estilos { white-space: nowrap; font-size: 0.72rem; color: var(--text-muted, inherit); }
.golpe-maestria { display: block; }
.moves-table [data-tooltip]::before {
    bottom: auto;
    top: 100%;
    transform: translateY(10px);
}
.moves-table [data-tooltip]:hover::before,
.moves-table [data-tooltip]:active::before {
    transform: translateY(0);
}

.moves-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--glass-bg);
    border-radius: 10px;
    overflow: hidden;
}

.moves-table th, .moves-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
}

.moves-table th {
    background: var(--stat-bar-bg);
    font-weight: 700;
}

/* No celular a tabela tem 2,7x a largura da tela. A primeira coluna fica
   fixa para o nome do golpe não sumir ao rolar para o lado, e as células
   apertam para reduzir o quanto é preciso rolar. */
@media (max-width: 700px) {
    .moves-table th, .moves-table td {
        padding: 9px 8px;
        font-size: 0.85rem;
    }
    .moves-table th:first-child,
    .moves-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--card-bg);
        border-right: 1px solid var(--glass-border);
    }
    /* A bolha do golpe abre abaixo da célula fixa; sem subir a célula, a
       célula fixa da linha seguinte (mesmo z-index, depois no DOM) a cobria. */
    .moves-table td:first-child:hover,
    .moves-table td:first-child:active {
        z-index: 3;
    }
}

.moves-table tbody tr:hover {
    background: var(--btn-bg);
}

/* Encounters / Localização */
.encounters-container {
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.encounter-item {
    background: var(--stat-bar-bg);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

/* Tooltip de Ataques */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 0; /* Alinhado à esquerda do elemento para evitar cortes na tela */
    transform: translateY(-10px);
    background: rgba(0, 0, 0, 0.95);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: normal;
    min-width: 200px;
    max-width: 85vw; /* Não ultrapassa a largura da tela no celular */
    font-size: 0.85rem;
    font-weight: normal;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 9999; /* Garante que fique acima de tudo */
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
}

[data-tooltip]:hover::before,
[data-tooltip]:active::before {
    opacity: 1;
    transform: translateY(0);
}

/* Cards de time (js/ui/dicas-time.js): o toque abre e fecha a bolha, e o
   teclado chega pela linha. */
.dica-time.dica-aberta::before,
.dica-time:focus-visible::before {
    opacity: 1;
    transform: translateY(0);
}
.dica-time { text-decoration: underline dotted; text-underline-offset: 3px; }
.dica-time::before { white-space: pre-line; }
/* O card do time corta o que passa da borda (overflow: hidden, pela faixa de
   acento); enquanto a bolha esta aberta ele deixa passar e fica por cima dos
   vizinhos. */
.frontier-poke-card:has(.dica-time:hover, .dica-time:focus-visible, .dica-aberta) {
    overflow: visible;
    position: relative;
    z-index: 20;
}

/* Tooltip para Itens de Evolução */
.tooltip-container .tooltip-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background: rgba(0, 0, 0, 0.95);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: normal;
    min-width: 150px;
    max-width: 200px;
    width: max-content;
    text-align: center;
    font-size: 0.75rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 9999;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
}

.tooltip-container:hover .tooltip-bubble,
.tooltip-container:active .tooltip-bubble {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Responsividade Básica */
@media (max-width: 900px) {
    .wiki-container { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: relative; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 20px; }
    /* No celular a marca vira uma faixa baixa: a coluna do cabeçalho já é o
       que mais consome a primeira tela. */
    .sidebar .logo { margin-bottom: 0; order: 1; width: 100%; text-align: center; }
    .logo-img { max-width: 148px; }
    /* 10 seções em ~1530px numa faixa de ~334px: sem uma pista visual de que
       rola, 8 delas ficavam invisíveis no celular. O degradê à direita e o
       recorte do último item indicam que há mais conteúdo. */
    .nav-scroller {
        order: 2;
        /* flex-basis explícito: com "flex: 1" herdado do desktop a base era 0
           e o wrapper colapsava para largura zero dentro do flex-wrap. */
        flex: 0 0 100%;
        width: 100%;
        margin-top: 15px;
        position: relative;
        /* aqui a pista rola na horizontal; a rolagem vertical é do desktop */
        overflow-y: visible;
    }
    /* O recorte é feito por máscara, não por um degradê de cor sólida.
       O degradê usava --sidebar-solid (a cor do fundo padrão) e a página de
       um Pokémon troca o fundo pela cor do tipo: dava um retângulo preto sobre
       laranja. A máscara desbota o próprio conteúdo, seja qual for o fundo.
       Ela vive em .nav-links, não em .nav-scroller, que também contém a
       navegação editorial e era coberta junto. */
    .nav-links {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
        transition: -webkit-mask-image 0.2s ease, mask-image 0.2s ease;
    }
    .nav-scroller.at-end .nav-links {
        -webkit-mask-image: none;
        mask-image: none;
    }
    /* Seta indicando que há mais seções à direita */
    .nav-scroller::after {
        content: '›';
        position: absolute;
        top: 26px;
        right: 4px;
        transform: translateY(-50%);
        z-index: 2;
        pointer-events: none;
        font-size: 1.6rem;
        line-height: 1;
        font-weight: 700;
        color: var(--primary-color);
        transition: opacity 0.2s ease;
    }
    .nav-scroller.at-end::after { opacity: 0; }

    .nav-links {
        display: flex;
        flex: none;
        margin-top: 0;
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 5px;
        scroll-snap-type: x proximity;
    }
    .nav-links .nav-btn { scroll-snap-align: start; }
    .sidebar-footer { order: 3; width: 100%; margin-top: 15px; gap: 15px; justify-content: center; }
    .nav-links::-webkit-scrollbar {
        display: none;
    }
    .nav-links .nav-btn {
        flex: 0 0 auto;
        /* Com 12px/1.1rem cabiam 2,2 dos 10 itens na pista de 334px; assim
           passam a caber 2,5, reduzindo o deslize necessário para chegar às
           últimas seções sem descer do alvo de toque de 44px. */
        min-height: 44px;
        padding: 11px 12px;
        font-size: 0.95rem;
    }
    .main-content { max-width: 100%; padding: 10px; }
    .section-panel { padding: 15px; }
    .grid-container { padding: 10px; gap: 10px; }
    #tms-grid { grid-template-columns: 1fr; }
    .machine-card { padding: 14px; }
    .search-form { flex-direction: column; }
    .search-form .input-select { width: 100%; }
    /* Geração e Pokédex lado a lado, o jogo na linha de baixo. */
    .seletores-jogo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); width: 100%; }
    .search-form #generation-select,
    .search-form #pokedex-mode-select,
    .search-form #game-version-select { max-width: none; }
    .search-form #game-version-select,
    .seletores-jogo .btn-install { grid-column: 1 / -1; }

    /* Bento Grid Tablet */
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bento-hero { grid-column: span 2; grid-row: auto; }
    .bento-desc { grid-column: span 2; }
    .bento-info { grid-column: span 1; }
    .bento-stats { grid-column: span 1; }
    .bento-matchups { grid-column: span 1; }
    .bento-evolutions { grid-column: span 2; }
    .bento-locations { grid-column: span 2; }
    .bento-moves, .bento-home { grid-column: span 2; }
}

/* Desktop largo: a faixa de seções da ficha (Visão geral, Status...) vinha
   logo depois do card principal e ocupava a linha inteira, empurrando a
   Descrição e as Informações para baixo: dois terços da primeira tela
   ficavam vazios ao lado do card (análise de UX de 14/10/2026, item 7).
   Aqui ela sobe para a primeira linha; no celular continua depois do card. */
@media (min-width: 1151px) {
    .bento-grid > .pokemon-section-nav { order: -1; }
}

/* Entre 901px e ~1150px o layout de desktop entra mas a sidebar continua com
   250px fixos: sobravam 636px para um bento de 3 colunas, ou seja colunas de
   185px. O hero, o bloco de informações e as células de 74px estouravam.
   Duas colunas até 1150px resolve sem mexer no desktop largo. */
@media (min-width: 901px) and (max-width: 1150px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-hero { grid-column: span 2; grid-row: auto; }
    .bento-desc,
    .bento-evolutions,
    .bento-locations,
    .bento-home,
    .bento-moves { grid-column: span 2; }
    .bento-info,
    .bento-stats,
    .bento-matchups { grid-column: span 1; }
}

/* Celular deitado: o cabeçalho empilhado somava 388px num viewport de 375px —
   nenhum conteúdo aparecia sem rolar. Aqui ele volta a ser uma faixa. */
@media (max-height: 500px) and (orientation: landscape) {
    .sidebar { padding: 6px 14px; }
    .sidebar .logo { font-size: 1.3rem; }
    .nav-scroller { margin-top: 8px; }
    .nav-links .nav-btn { padding: 8px 11px; font-size: 0.9rem; }
    .content-header { padding: 10px; gap: 8px; }
    .search-form { flex-direction: row; align-items: center; }
    .search-form .input-select { width: auto; }
    .main-content { gap: 10px; }
    .bento-hero .pokemon-image { height: 120px; margin: 8px 0; }
}

@media (max-width: 600px) {
    /* Entre a busca e o título sobravam ~100px: padding do cabeçalho, margem
       das buscas recentes vazias, gap do conteúdo e padding do painel. */
    .content-header { padding-bottom: 12px; }
    .main-content { gap: 12px; }
    .recent-searches:empty { display: none; }

    /* Cabeçalho compacto (js/ui/cabecalho-compacto.js): os três seletores
       ficam atrás de um botão com o jogo atual, o logo encolhe e os
       espaçamentos diminuem. A ficha começava a 392px. */
    .sidebar { padding: 8px 16px 6px; }
    .logo-img { max-width: 112px; }
    .nav-scroller { margin-top: 6px; }
    .content-header { padding-top: 10px; }
    .search-form { gap: 8px; }
    .jogo-atual { display: flex; }
    .bento-grid { margin-top: 8px; }
    .seletores-jogo:not(.aberto) { display: none !important; }
    /* O resumo do jogo e o seletor PT | EN dividem a primeira linha; os
       seletores abertos e a busca ficam embaixo, na largura toda. */
    .content-header .search-form > .jogo-atual { grid-column: 1; grid-row: 1; }
    .content-header .search-form > .seletores-jogo { grid-column: 1 / -1; grid-row: 2; }
    .content-header .search-form > .seletor-idioma { align-self: stretch; }
    .seletores-jogo.aberto { padding: 10px; border: 1px solid var(--card-border); border-radius: 12px; background: var(--card-bg); }
    /* "Vistos recentemente" ocupava 206px acima da grade: no celular vira uma
       faixa baixa, só com o título e as miniaturas (item 2 da análise). */
    .recent-pokemon { padding: 10px 12px !important; margin-bottom: 12px !important; }
    .recent-pokemon .guide-card-head { padding-bottom: 6px; margin-bottom: 0; border-bottom: 0; }
    .recent-pokemon .guide-card-meta { display: none; }
    .recent-pokemon > .recent-pokemon-list { margin-top: 4px; gap: 8px; }
    .recent-pokemon-card { min-width: 72px !important; padding: 6px 4px !important; }
    .recent-pokemon-card img { width: 40px !important; height: 40px !important; }

    /* Bento Grid Mobile */
    .bento-grid {
        grid-template-columns: 1fr;
    }
    .bento-hero, .bento-desc, .bento-info, .bento-stats, .bento-matchups, .bento-evolutions, .bento-locations, .bento-moves, .bento-home {
        grid-column: span 1;
        grid-row: auto;
    }

    /* Em telas estreitas a coluna de botões cobria o "próximo Pokémon";
       vira uma barra horizontal acima do card. */
    .bento-hero {
        padding-top: 15px;
    }
    .bento-hero .image-controls {
        position: static;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
    }
    .pokemon-name {
        font-size: 1.6rem;
    }
}

/* Navegação entre Pokémon (◀ ▶) — alvo de toque confortável no mobile */
.btn-poke-nav {
    min-width: 35px;
    width: 35px;
    height: 35px;
    padding: 0;
    font-size: 1rem;
}

/* A linha do nome usa toda a largura disponível: no desktop os controles
   vivem na faixa horizontal acima dela, e no celular continuam nessa faixa
   com quebra automática. */
.name-nav-wrapper {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) 35px;
    align-items: center;
    gap: 8px;
    width: 100%;
    align-self: center;
    min-width: 0;
    margin: 5px 0;
    box-sizing: border-box;
}
.name-nav-wrapper .pokemon-name {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.15;
    text-align: center;
}
.name-nav-wrapper .btn-poke-nav {
    width: 35px;
    min-width: 35px;
}

@media (max-width: 600px) {
    .name-nav-wrapper {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        /* Nomes longos, como Typhlosion, precisam de uma folga visual maior
           para não parecerem encostados aos alvos de navegação. */
        gap: 12px;
        width: 100%;
        align-self: center;
    }
    .name-nav-wrapper .btn-poke-nav {
        min-width: 44px;
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
    .name-nav-wrapper .pokemon-name {
        padding-inline: 4px;
    }
}