/* =====================================================
       CORES E FONTES (as "variáveis" que o resto do CSS usa)
       ===================================================== */
    :root {
      /* A cor do Pokémon: o JavaScript troca isso conforme o tipo dele */
      --cor: #e5484d;
      --cor-texto: #ffffff;
      --cor-forte: color-mix(in srgb, var(--cor) 65%, var(--tinta));

      --fonte-titulo: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
      --fonte-texto: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    }

    html[data-tema="claro"] {
      color-scheme: light;
      --base: #f3f5f9;
      --painel: #ffffff;
      --tinta: #1b2030;
      --suave: #5a6275;
      --linha: #dde1ea;
      --ganho: #1f7a3a;
      --perda: #b52b27;
      --fundo-pagina: color-mix(in srgb, var(--cor) 12%, var(--base));
    }

    html[data-tema="escuro"] {
      color-scheme: dark;
      --base: #12151f;
      --painel: #1b2030;
      --tinta: #eef0f6;
      --suave: #a3abbd;
      --linha: #2c3347;
      --ganho: #5bd484;
      --perda: #ff7f7a;
      --fundo-pagina:
        radial-gradient(ellipse 70% 45% at 25% 0%, color-mix(in srgb, var(--cor) 26%, transparent), transparent),
        var(--base);
    }

    /* =====================================================
       BASE DA PÁGINA
       ===================================================== */
    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--fonte-texto);
      line-height: 1.5;
      color: var(--tinta);
      /* O fundo ganha um toque da cor do tipo do Pokémon */
      background: var(--fundo-pagina);
    }

    h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; }

    :focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

    .so-leitor {
      position: absolute;
      width: 1px; height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
    }

    /* =====================================================
       BOTÕES, CAMPOS E CAIXAS DE ESCOLHA
       ===================================================== */
    button {
      font: inherit;
      color: var(--tinta);
      background: var(--painel);
      border: 1px solid var(--linha);
      border-radius: 10px;
      padding: 0.45rem 0.9rem;
      cursor: pointer;
    }
    button:hover:not(:disabled) { border-color: var(--cor-forte); }
    button:disabled { opacity: 0.4; cursor: not-allowed; }

    input, select {
      font: inherit;
      color: var(--tinta);
      background: var(--painel);
      border: 1px solid var(--linha);
      border-radius: 10px;
      padding: 0.45rem 0.7rem;
      max-width: 100%;
    }

    input[type="range"] {
      padding: 0;
      border: none;
      background: none;
      accent-color: var(--cor-forte);
      flex: 1;
      min-width: 100px;
    }

    input[type="number"] { width: 5rem; }

    /* =====================================================
       TOPO (logo, busca e tema)
       ===================================================== */
    .barra {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px 24px;
      padding: 14px 24px;
      background: var(--painel);
      border-bottom: 1px solid var(--linha);
    }

    .marca { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-radius: 12px; }
    .marca h1 { margin: 0; font-size: 1.7rem; }
    .marca:hover h1 { color: var(--cor-forte); }
    .marca:focus-visible { outline: 3px solid var(--cor-forte); outline-offset: 4px; }

    /* Configurações: engrenagem no canto direito do topo + painelzinho embaixo dela */
    .config-area { position: relative; }
    .botao-config {
      width: 42px;
      height: 42px;
      padding: 0;
      display: grid;
      place-items: center;
      border-radius: 50%;
    }
    .botao-config svg {
      width: 22px;
      height: 22px;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);   /* a engrenagem gira ao abrir e ao fechar */
    }
    .botao-config[aria-expanded="true"] svg { transform: rotate(360deg); }

    .painel-config {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 70;
      width: min(300px, calc(100vw - 24px));
      padding: 16px 18px 18px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      background: var(--painel);
      border: 1px solid var(--linha);
      border-radius: 16px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
      /* fechado: pequeno, transparente e preso ao canto da engrenagem */
      transform-origin: top right;
      transform: translateY(-6px) scale(0.9);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.3s;
    }
    .painel-config.aberto {
      transform: none;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
    }
    /* Quem prefere menos movimento: sem giro e sem zoom, só aparece e some */
    @media (prefers-reduced-motion: reduce) {
      .botao-config svg { transition: none; }
      .painel-config, .painel-config.aberto { transform: none; transition: opacity 0.1s linear, visibility 0s; }
    }
    .opcao-config { border: 0; padding: 0; margin: 0; min-width: 0; }
    .opcao-config legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
    .opcao-config .nota { margin: 8px 0 0; }
    .grupo-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
    .grupo-opcoes button { padding: 0.45rem 1rem; border-radius: 999px; }
    .grupo-opcoes button[aria-pressed="true"] {
      background: var(--cor);
      color: var(--cor-texto);
      border-color: var(--cor);
      font-weight: 600;
    }
    @media (max-width: 700px) {
      .config-area { order: 2; margin-left: auto; }
      .busca { order: 3; width: 100%; margin-left: 0; }
    }

    /* A "lente azul" da Pokédex, feita só com CSS */
    /* Logo: uma Pokédex. A telinha mostra o Pokémon que está aberto (logo-pokedex.js) */
    .logo-pokedex { width: 48px; height: 40px; flex: none; overflow: visible; }
    .logo-pokedex .pdx-corpo { fill: #dc2b2b; stroke: #5a0b0b; stroke-width: 2.4; }
    .logo-pokedex .pdx-dobra { stroke: #5a0b0b; stroke-width: 1.6; }
    .logo-pokedex .pdx-lente-aro { fill: #fff; stroke: #5a0b0b; stroke-width: 1.2; }
    .logo-pokedex .pdx-lente { fill: #2f8bf0; }
    .logo-pokedex .pdx-moldura { fill: #e9eef3; stroke: #5a0b0b; stroke-width: 1.2; }
    .logo-pokedex .pdx-tela { fill: #9ad3a3; transition: fill .2s; }
    .logo-pokedex .pdx-alto-falante { stroke: #5a0b0b; stroke-width: 1.6; stroke-linecap: round; }
    .logo-pokedex .pdx-pokemon { display: none; image-rendering: pixelated; }
    .logo-pokedex.com-pokemon .pdx-pokemon { display: inline; }
    .logo-pokedex.com-pokemon .pdx-tela { fill: #cdeccf; }
    .marca:hover .logo-pokedex .pdx-lente { fill: #63b3ff; }

    .busca {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-left: auto;
    }

    /* =====================================================
       ÁREA PRINCIPAL
       ===================================================== */
    main {
      max-width: 1100px;
      margin: 0 auto;
      padding: 24px 16px 48px;
    }

    #mensagem { margin: 0 0 12px; color: var(--suave); }
    #mensagem:empty { display: none; }

    .principal {
      display: grid;
      grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }

    /* Duas colunas fixas: dentro de cada uma, as caixas ficam uma embaixo da outra,
       sem espaços vazios no meio. Cada caixa tem a altura do seu conteúdo. */
    .secoes {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 20px;
      align-items: start;
    }

    .coluna-secoes {
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-width: 0;
    }

    .largo { grid-column: 1 / -1; }

    /* Em telas menores, vira uma coluna só, na ordem natural das caixas */
    @media (max-width: 899px) {
      .secoes { display: flex; flex-direction: column; align-items: stretch; }
      .coluna-secoes { display: contents; }
      .ordem-1 { order: 1; }
      .ordem-2 { order: 2; }
      .ordem-3 { order: 3; }      .ordem-5 { order: 5; }
    }

    /* Tela inicial vazia */
    .tela-vazia {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      min-height: 55vh;
      padding: 24px;
      text-align: center;
    }
    .tela-vazia[hidden] { display: none; }
    .tela-vazia svg { color: var(--cor-forte); }
    .tela-vazia p {
      margin: 0;
      font-family: var(--fonte-titulo);
      font-size: clamp(1.3rem, 4vw, 1.9rem);
      font-weight: 500;
      color: var(--tinta);
    }

    @media (max-width: 820px) {
      .principal { grid-template-columns: minmax(0, 1fr); }
    }

    /* =====================================================
       MENU DE TIPOS (tela inicial) E TELA DE UM TIPO
       ===================================================== */
    .secao-tipos { width: min(1180px, calc(100vw - 64px)); margin-top: 90px; }   /* pode ser mais larga que o miolo da página, pra fileira caber */
    .secao-tipos h2 { margin: 0 0 12px; font-size: 1.3rem; color: var(--suave); text-align: center; }

    /* Todos os tipos sempre aparecem, sem barra de rolagem:
       tela larga = 1 fileira de 18; tela média = 2 fileiras de 9; celular = 3 fileiras de 6 */
    .grade-tipos {
      display: grid;
      grid-template-columns: repeat(18, clamp(46px, 4.3vw, 56px));
      justify-content: center;
      gap: 30px 8px;                 /* espaço entre fileiras para o nome que aparece embaixo */
      padding: 10px 6px 32px;
    }
    @media (max-width: 1100px) { .grade-tipos { grid-template-columns: repeat(9, 56px); } }

    .botao-tipo {
      position: relative;
      width: 100%;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border-radius: 16px;
      color: #fff;
      text-decoration: none;
      box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
      transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    }
    .botao-tipo:hover, .botao-tipo:focus-visible {
      transform: translateY(-4px) scale(1.05);
      filter: brightness(1.07);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.32);
    }
    .botao-tipo:active { transform: scale(0.97); }
    .botao-tipo:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
    .icone-tipo { width: 58%; height: 58%; }
    .icone-tipo .f { fill: var(--fundo); }
    .icone-tipo .s { fill: none; stroke: var(--fundo); }

    /* O nome do tipo aparece embaixo do quadrado ao passar o mouse (ou ao focar com o teclado) */
    .nome-tipo {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--tinta);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease;
    }
    .botao-tipo:hover .nome-tipo, .botao-tipo:focus-visible .nome-tipo { opacity: 1; }

    /* Mapa na tela inicial */
    .secao-mapas { width: min(1180px, calc(100vw - 64px)); margin-top: 40px; }
    .secao-mapas h2 { margin: 0 0 14px; font-size: 1.3rem; color: var(--suave); text-align: center; }
    .barra-mapa-inicio { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; }
    .barra-mapa-inicio label { font-weight: 600; }
    .secao-mapas .mapa-abas { justify-content: center; margin-bottom: 12px; }
    .tela-vazia p.dica-mapa-inicio { text-align: center; margin: 12px 0 0; font-size: .95rem; color: var(--suave); }
    @media (max-width: 700px) { .secao-mapas { width: 100%; } }

    /* Tela do mapa de uma região e tela de um local */
    .tela-mapa, .tela-local { padding: 8px 0 40px; }
    .mapa-grande-quadro { width: min(100%, 980px); margin: 0 auto; border-radius: 14px; }
    .mapa-svg .local-clicavel { cursor: pointer; outline: none; }
    .mapa-svg .area-clique { fill: transparent; }
    .mapa-svg .local-clicavel:hover .marcador,
    .mapa-svg .local-clicavel:focus-visible .marcador { stroke: var(--cor-forte); stroke-width: 3.5; }
    .mapa-svg .local-clicavel:hover .marcador.rota,
    .mapa-svg .local-clicavel:focus-visible .marcador.rota { fill: var(--cor-forte); }
    .mapa-svg .local-clicavel:hover .rotulo-mapa,
    .mapa-svg .local-clicavel:focus-visible .rotulo-mapa { fill: var(--tinta); font-weight: 700; }

    .barra-local { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; }
    .barra-local label { font-weight: 600; }
    .area-local { margin: 0 0 24px; }
    .area-local h3 { margin: 0 0 8px; font-size: 1.1rem; }
    .rolagem-encontros { overflow-x: auto; background: var(--painel); border: 1px solid var(--linha); border-radius: 14px; }
    .tabela-encontros { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
    .tabela-encontros th, .tabela-encontros td { padding: 8px 14px; text-align: left; vertical-align: middle; }
    .tabela-encontros th { color: var(--suave); font-weight: 500; font-size: 0.85rem; border-bottom: 1px solid var(--linha); }
    .tabela-encontros tbody tr + tr td { border-top: 1px solid var(--linha); }
    .celula-pokemon a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 600; }
    .celula-pokemon a:hover { color: var(--cor-forte); }
    .celula-pokemon img { width: 40px; height: 40px; image-rendering: pixelated; }
    .etiqueta-encontro {
      display: inline-block;
      margin: 2px 4px 2px 0;
      padding: 1px 9px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--cor) 22%, transparent);
      font-size: 0.78rem;
      white-space: nowrap;
    }
    .caixa-treinadores { margin-top: 28px; padding: 16px 18px; border: 1px dashed var(--linha); border-radius: 14px; }
    .caixa-treinadores h3 { margin: 0 0 4px; font-size: 1.05rem; }
    .caixa-treinadores .nota { margin: 0; }

    .tela-tipo { padding: 8px 0 40px; }
    .topo-tipo { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 0 0 22px; }
    .botao-voltar {
      display: inline-flex;
      align-items: center;
      padding: 0.45rem 1rem;
      border: 1px solid var(--linha);
      border-radius: 999px;
      background: var(--painel);
      color: inherit;
      text-decoration: none;
      font-weight: 500;
    }
    .botao-voltar:hover { border-color: var(--cor-forte); }
    .caixa-tipo { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; }
    .caixa-tipo .icone-tipo { width: 62%; height: 62%; }
    .topo-tipo h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); }
    .contagem-tipo { margin: 2px 0 0; color: var(--suave); }

    .grade-pokemons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .cartao-pokemon {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 10px 4px 12px;
      background: var(--painel);
      border: 1px solid var(--linha);
      border-radius: 14px;
      color: inherit;
      text-decoration: none;
      transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .cartao-pokemon:hover, .cartao-pokemon:focus-visible {
      transform: translateY(-3px);
      border-color: var(--cor-forte);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    }
    .cartao-pokemon:focus-visible { outline: 3px solid var(--cor-forte); outline-offset: 2px; }
    .cartao-pokemon img { width: 96px; height: 96px; image-rendering: pixelated; }
    .cartao-pokemon .numero-cartao { font-size: 0.78rem; color: var(--suave); }
    /* Os tipos do Pokémon (primeiro o principal, depois o secundário), acima do nome */
    .tipos-cartao { display: flex; justify-content: center; gap: 8px; margin: 4px 0 2px; }
    .mini-tipo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }
    .mini-tipo .icone-tipo { width: 64%; height: 64%; }
    .cartao-pokemon .nome-cartao { font-weight: 600; font-size: 0.95rem; text-align: center; overflow-wrap: break-word; }

    @media (max-width: 700px) {
      .secao-tipos { width: 100%; margin-top: 60px; }
      .grade-tipos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 10px; max-width: 420px; margin: 0 auto; padding: 10px 4px 20px; }
      .botao-tipo { border-radius: 14px; }
    }

    /* =====================================================
       CARTÃO DO POKÉMON (foto, nome, tipos e setas)
       ===================================================== */
    .heroi {
      background: color-mix(in srgb, var(--cor) 24%, var(--painel));
      border-radius: 28px;
      padding: 24px;
      text-align: center;
      transition: background 0.3s;
    }

    .heroi h2 {
      margin: 0 0 10px;
      font-size: clamp(2rem, 5vw, 2.7rem);
      line-height: 1.1;
    }

    .numero {
      margin-left: 10px;
      font-size: 0.45em;
      font-weight: 500;
      color: var(--suave);
    }

    .tipos {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 18px;
    }

    .moldura {
      width: 260px;
      height: 260px;
      max-width: 100%;
      margin: 0 auto;
      border-radius: 50%;
      background: color-mix(in srgb, var(--cor) 40%, var(--painel));
      display: grid;
      place-items: center;
      transition: background 0.3s;
    }

    .moldura img { width: 88%; height: auto; }
    /* Sprite: desenho pixelado dos jogos, ampliado sem borrar */
    .moldura img.sprite {
      width: 288px;              /* 3 vezes o tamanho original (96px): os pixels ficam certinhos */
      max-width: none;
      margin-inline: calc((100% - 288px) / 2);   /* centraliza mesmo sendo maior que a moldura */
      margin-block: -14px;                        /* (288 - 260) / 2: sobra igual em cima e embaixo */
      image-rendering: pixelated;
    }

    .so-na-versao { color: var(--suave); font-size: 0.88em; }

    /* Descrição: um parágrafo por versão quando os textos são diferentes (ex.: Red e Blue) */
    .texto-descricao { margin: 0 0 0.6em; }
    .texto-descricao:last-child { margin-bottom: 0; }

    /* Formas (Mega, Gigantamax, Dynamax) */
    .formas-foto { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
    .formas-foto[hidden] { display: none; }
    .botao-forma { padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.9rem; }
    .botao-forma[aria-pressed="true"] {
      background: var(--cor);
      color: var(--cor-texto);
      border-color: var(--cor);
      font-weight: 600;
    }
    .nota-forma { margin: 8px 4px 0; font-size: 0.88rem; line-height: 1.35; color: var(--suave); }
    .nota-forma:empty { display: none; }
    .rotulo-forma { margin-left: 10px; font-size: 0.4em; font-weight: 600; color: var(--cor-forte); }
    .rotulo-forma:empty { display: none; }

    /* Gigantamax e Dynamax: brilho vermelho em volta do Pokémon */
    .moldura.forma-gigante {
      background:
        radial-gradient(circle, rgba(255, 77, 109, 0.38), rgba(232, 23, 75, 0.14) 62%, transparent 72%),
        color-mix(in srgb, var(--cor) 40%, var(--painel));
      box-shadow: 0 0 0 4px rgba(232, 23, 75, 0.45), 0 0 36px 6px rgba(232, 23, 75, 0.35);
    }
    .moldura.forma-gigante img { filter: drop-shadow(0 0 10px rgba(255, 77, 109, 0.9)); }
    .moldura.forma-dynamax img { transform: scale(1.18); }
    @media (prefers-reduced-motion: no-preference) {
      .moldura.forma-gigante { animation: pulso-gigante 2.6s ease-in-out infinite; }
    }
    @keyframes pulso-gigante {
      50% { box-shadow: 0 0 0 6px rgba(232, 23, 75, 0.3), 0 0 56px 12px rgba(232, 23, 75, 0.45); }
    }

    /* Linha embaixo da foto: Normal/Shiny e o botão do som */
    .acoes-foto {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 14px;
    }
    .botao-som {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border-radius: 50%;
    }
    .botao-som.tocando {
      background: var(--cor);
      color: var(--cor-texto);
      border-color: var(--cor);
    }

    /* Botão que abre a janela de Localização */
    .botao-local {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 40px;
      padding: 0 0.7rem;
      border-radius: 999px;
    }
    .botao-local[hidden] { display: none; }
    .botao-local svg { flex: none; }

    /* Jogo (fica junto dos golpes; muda os golpes e a descrição) */
    .jogo-golpes {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 12px;
    }
    .jogo-golpes label { font-weight: 600; }
    .jogo-golpes select { max-width: 260px; }
    .jogo-golpes option:disabled { color: #8a90a0; }

    /* Duas caixas embaixo da foto: Normal e Shiny */
    .versao-foto {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
    .versao-foto button {
      min-width: 64px;
      padding: 0.35rem 0.7rem;
      border-radius: 999px;
    }
    .versao-foto button[aria-pressed="true"] {
      background: var(--cor);
      color: var(--cor-texto);
      border-color: var(--cor);
      font-weight: 600;
    }

    .setas {
      display: flex;
      justify-content: center;
      gap: 14px;
      margin-top: 18px;
    }

    .seta {
      width: 48px;
      height: 48px;
      padding: 0;
      border: none;
      border-radius: 50%;
      font-size: 1.4rem;
      background: var(--cor);
      color: var(--cor-texto);
    }

    #escolha-evolucao { margin-top: 10px; }
    #escolha-evolucao p { margin: 6px 0; color: var(--suave); }
    #escolha-evolucao button { margin: 4px 3px; }

    /* =====================================================
       PAINÉIS (cada bloco de informação)
       ===================================================== */
    .painel {
      background: var(--painel);
      border: 1px solid var(--linha);
      border-radius: 18px;
      padding: 18px 20px;
    }

    .painel h3 { margin: 0 0 10px; font-size: 1.15rem; }
    .painel h3 + p { margin-top: 0; }
    .painel p { margin: 0 0 14px; }
    .painel p:last-child { margin-bottom: 0; }

    .nota { font-size: 0.9rem; color: var(--suave); }

    /* IV e EV: uma linha por status, com barra e número */
    .ajuste-ivev { margin: 4px 0 0; }
    .linha-ivev {
      display: grid;
      grid-template-columns: 6.2rem minmax(0, 1fr) minmax(0, 1fr);
      gap: 6px 16px;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid var(--linha);
    }
    .nome-ivev { font-weight: 600; }
    .controle-ivev { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .controle-ivev .rotulo-ivev { width: 1.7rem; font-size: 0.85rem; color: var(--suave); }
    .controle-ivev input[type="range"] { min-width: 60px; }
    .controle-ivev input[type="number"] { width: 4.2rem; padding: 0.3rem 0.4rem; }
    #total-ev { margin: 10px 0 8px; }
    .botoes-ivev { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
    @media (max-width: 560px) {
      .linha-ivev { grid-template-columns: 1fr; }
    }

    /* Nível e nature */
    .controles { display: grid; gap: 12px; margin-top: 14px; }
    .nivel, .nature { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .nivel label, .nature label { font-weight: 600; min-width: 3.5rem; }

    /* Caixa da nature: campo de texto + lista que abre embaixo */
    .combo { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
    .combo input { width: 100%; padding-right: 2.4rem; }
    .combo-seta {
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: none;
      padding: 0.2rem 0.6rem;
      color: var(--suave);
    }
    .lista-combo {
      position: absolute;
      z-index: 20;
      left: 0;
      right: 0;
      top: calc(100% + 4px);
      margin: 0;
      padding: 4px;
      list-style: none;
      max-height: 280px;
      overflow-y: auto;
      background: var(--painel);
      border: 1px solid var(--cor-forte);
      border-radius: 12px;
    }
    .lista-combo[hidden] { display: none; }
    .lista-combo li {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0 12px;
      padding: 6px 10px;
      border-radius: 8px;
      cursor: pointer;
    }
    .lista-combo li:hover,
    .lista-combo li.ativo { background: color-mix(in srgb, var(--cor) 25%, var(--painel)); }
    .lista-combo li[aria-selected="true"] { font-weight: 600; }
    .lista-combo li.vazio { color: var(--suave); cursor: default; }
    .lista-combo li.vazio:hover { background: none; }
    .efeito-nature { color: var(--suave); font-size: 0.85rem; font-weight: 400; margin-left: auto; }

    /* =====================================================
       GRÁFICO RADAR
       ===================================================== */
    .radar { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }

    /* Gráfico com o botão "Personalizado" ao lado */
    .area-grafico { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
    .area-grafico .radar { flex: 1 1 340px; min-width: 0; margin: 0; }
    .lado-grafico { flex: none; }

    .botao-personalizado,
    .botao-principal {
      padding: 0.55rem 1.3rem;
      border-radius: 999px;
      border-color: var(--cor);
      background: var(--cor);
      color: var(--cor-texto);
      font-weight: 600;
    }
    .botao-personalizado:hover:not(:disabled),
    .botao-principal:hover:not(:disabled) { border-color: var(--cor-forte); filter: brightness(1.06); }
    @media (max-width: 560px) {
      .lado-grafico { order: -1; }
    }

    /* =====================================================
       JANELA "PERSONALIZADO" (fundo da página embaçado)
       ===================================================== */
    .janela {
      width: min(980px, calc(100vw - 24px));
      max-height: calc(100vh - 32px);
      max-height: calc(100dvh - 32px);
      margin: auto;
      padding: 0;
      border: 1px solid var(--linha);
      border-radius: 20px;
      background: var(--painel);
      color: var(--tinta);
      overflow: hidden;
    }
    .janela[open] { display: flex; flex-direction: column; }

    /* O fundo atrás da janela fica escurecido e embaçado */
    .janela::backdrop {
      background: rgba(8, 10, 18, 0.55);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
    /* Se o navegador não sabe embaçar o fundo da janela, embaça a própria página */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      html.janela-aberta .barra,
      html.janela-aberta main { filter: blur(6px); }
    }
    html.janela-aberta { overflow: hidden; }

    .janela-topo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 22px 8px;
    }
    .janela-topo h2 { margin: 0; font-size: 1.35rem; }
    .botao-fechar {
      width: 36px;
      height: 36px;
      padding: 0;
      border-radius: 50%;
      font-size: 1.4rem;
      line-height: 1;
    }

    .janela-corpo {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 8px 24px;
      padding: 4px 22px 16px;
      overflow: auto;
    }
    .janela-grafico { position: sticky; top: 0; align-self: start; }
    .janela-grafico h3 { margin: 0 0 6px; font-size: 1.1rem; }
    .janela-grafico .radar { max-width: 100%; }
    .janela-controles { min-width: 0; }
    #aviso-nature:empty { display: none; }
    .janela-controles .controles { margin-top: 0; grid-template-columns: minmax(0, 1fr); }

    /* Janela da Localização */
    #janela-localizacao { width: min(1040px, calc(100vw - 24px)); }
    .janela-corpo-local { padding: 4px 22px 16px; overflow: auto; }
    .jogo-modal { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
    .jogo-modal[hidden] { display: none; }
    .jogo-modal label { font-weight: 600; }
    .jogo-modal option:disabled { color: #8a90a0; }

    .janela-rodape {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 12px 22px 16px;
      border-top: 1px solid var(--linha);
    }

    /* Celular: uma coluna, com o gráfico fixo no alto pra você ver o resultado enquanto ajusta */
    @media (max-width: 820px) {
      .janela-corpo { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px 12px; }
      .janela-grafico {
        z-index: 2;
        padding-bottom: 6px;
        background: var(--painel);
        border-bottom: 1px solid var(--linha);
      }
      .janela-grafico .radar { max-height: 30vh; }
      #info-escala-personalizado { display: none; }
      .janela-topo { padding: 12px 16px 4px; }
      .janela-corpo-local { padding: 0 16px 12px; }
      .janela-rodape { padding: 10px 16px 14px; }
    }
    .radar .grade { fill: none; stroke: var(--linha); }
    .radar .eixo { stroke: var(--linha); }
    .radar .area {
      fill: color-mix(in srgb, var(--cor) 38%, transparent);
      stroke: var(--cor-forte);
      stroke-width: 2;
    }
    .radar .ponto { fill: var(--cor-forte); }
    .radar .ponto.sobe { fill: var(--ganho); }
    .radar .ponto.desce { fill: var(--perda); }
    .radar .rotulo-radar { font-size: 13px; fill: var(--tinta); }
    .radar .rotulo-radar.sobe { fill: var(--ganho); font-weight: 600; }
    .radar .rotulo-radar.desce { fill: var(--perda); font-weight: 600; }
    .radar .valor-radar { font-size: 15px; font-weight: 600; }

    /* =====================================================
       ETIQUETAS DE TIPO
       ===================================================== */
    .chip {
      display: inline-block;
      padding: 3px 12px;
      border-radius: 999px;
      font-size: 0.9rem;
      font-weight: 600;
    }

    .grupo-matchup { margin-bottom: 14px; }
    .grupo-matchup:last-child { margin-bottom: 0; }
    .titulo-grupo { font-size: 0.9rem; color: var(--suave); margin-bottom: 5px; }
    .lista-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .lista-chips.vazio { color: var(--suave); }

    /* =====================================================
       EVOLUÇÕES, LOCAIS E GOLPES
       ===================================================== */
    /* Linha evolutiva: sprites dos Pokémon e setas apontando para a próxima evolução */
    .cadeia-evolutiva { overflow-x: auto; padding: 2px 2px 8px; }
    .no-evolucao { display: flex; align-items: center; gap: 4px; width: max-content; }
    .ramos-evolucao { display: flex; flex-direction: column; gap: 8px; }
    .ramo-evolucao { display: flex; align-items: center; gap: 4px; }

    .cartao-evolucao {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      width: 88px;
      padding: 6px 4px 8px;
      border-radius: 14px;
      background: var(--painel);
    }
    .cartao-evolucao img { width: 64px; height: 64px; }
    .cartao-evolucao span { font-size: 0.8rem; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
    .cartao-evolucao.atual {
      background: var(--cor);
      color: var(--cor-texto);
      border-color: var(--cor);
      opacity: 1;
    }

    .seta-evolucao {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      width: 70px;
      font-size: 0.72rem;
      line-height: 1.2;
      color: var(--suave);
      text-align: center;
    }
    .seta-evolucao svg { width: 44px; height: 16px; }

    /* Localização: o mapa fica ao lado da lista (um embaixo do outro em telas menores) */
    .localizacao-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
    @media (min-width: 900px) {
      .localizacao-grade.com-mapa { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
    }
    .mapa-regiao { width: 100%; max-width: 520px; }
    .mapa-regiao[hidden] { display: none; }
    .mapa-regiao .nota { margin: 6px 0 0; min-height: 1.4em; }

    .mapa-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
    .mapa-abas[hidden] { display: none; }
    .aba-mapa { padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.9rem; }
    .aba-mapa[aria-selected="true"] {
      background: var(--cor);
      color: var(--cor-texto);
      border-color: var(--cor);
      font-weight: 600;
    }

    /* No celular o mapa cabe inteiro na tela; para ler os nomes, usa o zoom (zoom-mapas.js) */
    .mapa-quadro { border-radius: 14px; }

    /* O mapa em si (um esquema desenhado, não é o mapa oficial) */
    .mapa-svg { display: block; width: 100%; height: auto; border-radius: 14px; }
    .mapa-svg .mar { fill: color-mix(in srgb, #4c8df0 22%, var(--painel)); }
    .mapa-svg .terra {
      fill: color-mix(in srgb, #5fbf6a 24%, var(--painel));
      stroke: color-mix(in srgb, #5fbf6a 50%, var(--painel));
      stroke-width: 2;
    }
    .mapa-svg .estrada {
      fill: none;
      stroke: color-mix(in srgb, var(--tinta) 24%, transparent);
      stroke-width: 7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .mapa-svg .estrada-mar {
      fill: none;
      stroke: color-mix(in srgb, #4c8df0 60%, var(--painel));
      stroke-width: 5;
      stroke-dasharray: 2 9;
      stroke-linecap: round;
    }
    .mapa-svg .rotulo-mapa {
      font-size: 12px;
      fill: var(--suave);
      text-anchor: middle;
      paint-order: stroke;
      stroke: var(--painel);
      stroke-width: 3px;
      stroke-linejoin: round;
    }
    .mapa-svg .marcador { fill: var(--painel); stroke: var(--suave); stroke-width: 2; }
    .mapa-svg .marcador.rota { fill: var(--suave); stroke: none; }
    /* Mapas com a imagem oficial do jogo por baixo */
    /* as imagens já são ampliadas em número inteiro (8x, 4x...), então a ampliação suave do navegador mantém tudo nítido */
    .mapa-svg .imagem-mapa { image-rendering: auto; }
    .mapa-svg.com-imagem .marcador { fill: transparent; stroke: none; }              /* os ícones oficiais já aparecem na imagem */
    .mapa-svg.com-imagem .marcador.rota { fill: #fff; stroke: rgba(0, 0, 0, 0.65); stroke-width: 1.5; }
    .mapa-svg.com-imagem .rotulo-mapa {
      fill: #fff;
      stroke: rgba(0, 0, 0, 0.85);
      stroke-width: 3.5px;
      paint-order: stroke;
      stroke-linejoin: round;
      font-weight: 700;
    }
    .mapa-svg.com-imagem.cavernas-visiveis .marcador.caverna { fill: #8a5a2b; stroke: #fff; stroke-width: 1.5; }   /* cavernas que a imagem não mostra */
    .mapa-svg.com-imagem .local-clicavel:hover .marcador,
    .mapa-svg.com-imagem .local-clicavel:focus-visible .marcador { fill: rgba(255, 255, 255, 0.3); stroke: #fff; stroke-width: 3; }
    .mapa-svg.com-imagem .local-clicavel:hover .marcador.rota,
    .mapa-svg.com-imagem .local-clicavel:focus-visible .marcador.rota { fill: #ffe066; stroke: #fff; }
    .mapa-svg.com-imagem .local-clicavel:hover .rotulo-mapa,
    .mapa-svg.com-imagem .local-clicavel:focus-visible .rotulo-mapa { fill: #ffe066; }
    /* Mapas cuja imagem já traz nomes e números: o ponto só se mostra ao passar o mouse */
    .mapa-svg.sem-marcas .local-clicavel:hover .area-clique,
    .mapa-svg.sem-marcas .local-clicavel:focus-visible .area-clique { fill: rgba(255, 255, 255, 0.3); stroke: #fff; stroke-width: 3; }
    .mapa-svg .aparece { cursor: pointer; }
    .mapa-svg .aparece .rotulo-mapa { fill: var(--tinta); font-weight: 700; font-size: 13px; }
    .mapa-svg .halo-mapa { fill: var(--painel); stroke: var(--cor-forte); stroke-width: 4; }
    .mapa-svg .aparece:hover .halo-mapa,
    .mapa-svg .aparece:focus-visible .halo-mapa { stroke-width: 6; }
    .mapa-svg .aparece:focus { outline: none; }

    .localizacao-grade.com-mapa .rolagem-localizacao { max-height: 520px; }

    /* Localização: a lista tem altura limitada, com barra de rolagem pro resto */
    .rolagem-localizacao {
      max-height: 340px;
      overflow-y: auto;
      padding: 12px 14px;
      border: 1px solid var(--linha);
      border-radius: 12px;
    }
    .rolagem-localizacao > :last-child { margin-bottom: 0; }

    .rolagem-locais[hidden] { display: none; }
    #locais { margin: 0; padding: 0 0 0 1.2rem; }
    #locais li { padding: 2px 0; }

    /* Descrição do Pokémon */
    .categoria { margin: 0 0 6px; font-family: var(--fonte-titulo); font-size: 1.1rem; }
    #aviso-locais:empty { display: none; }

    /* Caixa "Como obter" (informação escrita à mão) */
    .obtencao {
      margin-bottom: 14px;
      padding: 12px 16px;
      border: 1px solid var(--linha);
      border-left: 4px solid var(--cor);
      border-radius: 12px;
      background: color-mix(in srgb, var(--cor) 8%, var(--painel));
    }
    .obtencao[hidden] { display: none; }
    .obtencao strong { font-family: var(--fonte-titulo); font-size: 1.05rem; }
    .obtencao p { margin: 6px 0; }
    .obtencao ol { margin: 6px 0 10px; padding-left: 1.3rem; }
    .obtencao li { margin: 4px 0; }
    .obtencao a { color: var(--tinta); text-decoration: underline; text-underline-offset: 2px; }

    details {
      border: 1px solid var(--linha);
      border-radius: 12px;
      padding: 8px 14px;
      margin: 8px 0;
    }
    summary { cursor: pointer; font-weight: 600; }
    details ul { columns: 3 190px; padding-left: 1.1rem; margin: 10px 0 4px; }
    details li { margin: 2px 0; }

    /* Grupos de golpes (por nível, TM/HM, ovo, tutor): lado a lado quando cabe */
    #golpes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
      gap: 12px;
      align-items: start;
    }
    #golpes > details { margin: 0; }

    /* Tabela de golpes: compacta, com rolagem e cabeçalho fixo */
    .rolagem-golpes {
      max-height: 340px;
      overflow: auto;
      margin-top: 10px;
      border: 1px solid var(--linha);
      border-radius: 12px;
    }
    .tabela-golpes { width: 100%; border-collapse: collapse; }
    .tabela-golpes th {
      position: sticky;
      top: 0;
      z-index: 1;
      padding: 8px 14px;
      text-align: left;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--suave);
      background: var(--painel);
      border-bottom: 1px solid var(--linha);
    }
    .tabela-golpes td { padding: 6px 14px; border-bottom: 1px solid var(--linha); }
    .tabela-golpes tbody tr:last-child td { border-bottom: none; }
    .tabela-golpes tr.linha-golpe:hover td { background: color-mix(in srgb, var(--cor) 10%, var(--painel)); }
    .col-nivel { width: 6.5rem; color: var(--suave); }

    .nome-golpe { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .seta-golpe {
      flex: none;
      width: 30px;
      height: 30px;
      padding: 0;
      border-radius: 50%;
      line-height: 1;
      transition: transform 0.2s;
    }
    .seta-golpe[aria-expanded="true"] {
      transform: rotate(180deg);
      background: var(--cor);
      color: var(--cor-texto);
      border-color: var(--cor);
    }

    /* Detalhes que abrem embaixo do golpe */
    .detalhe-golpe td {
      padding: 12px 14px;
      background: color-mix(in srgb, var(--cor) 10%, var(--painel));
    }
    .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .chip-neutro { background: var(--linha); color: var(--tinta); }
    .numeros-golpe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
    .numero-golpe {
      flex: 1 1 70px;
      max-width: 150px;
      padding: 4px 12px;
      background: var(--painel);
      border: 1px solid var(--linha);
      border-radius: 10px;
    }
    .numero-golpe .rotulo-numero { display: block; font-size: 0.8rem; color: var(--suave); }
    .numero-golpe .valor-numero { font-weight: 600; }
    .lista-efeitos { columns: 1; margin: 0 0 10px; padding-left: 1.1rem; }
    .descricao-golpe { margin: 0; font-size: 0.9rem; color: var(--suave); }

    /* Imagem da categoria do golpe (físico, especial, status) */
    .icone-categoria {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
      width: 24px;
      height: 24px;
    }
    .icone-categoria svg { width: 24px; height: 24px; }
    .icone-categoria.carregando::before {
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--linha);
    }
    .icone-categoria.indisponivel::before {
      content: "?";
      font-size: 0.9rem;
      color: var(--suave);
    }
    .texto-golpe { flex: 1; }
    .nome-golpe { gap: 10px; }

    @media (max-width: 520px) {
      .tabela-golpes th, .tabela-golpes td { padding-left: 10px; padding-right: 10px; }
      .col-nivel { width: 3.6rem; }
      .nome-golpe { gap: 8px; }
    }

    /* Celulares bem pequenos (320 px) */
    @media (max-width: 340px) {
      .tabela-golpes th, .tabela-golpes td { padding-left: 6px; padding-right: 6px; }
      .col-nivel { width: 2.8rem; }
      .nome-golpe { gap: 4px; }
      .tabela-golpes th { font-size: 0.78rem; }
      .icone-categoria, .icone-categoria svg { width: 20px; height: 20px; }
      .seta-golpe { width: 26px; height: 26px; }
    }

    .chip-categoria { display: inline-flex; align-items: center; gap: 6px; }
    .chip-categoria svg { width: 18px; height: 18px; }

    .legenda-categorias {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 20px;
      margin: 0 0 6px;
      font-size: 0.9rem;
      color: var(--suave);
    }
    .item-legenda { display: inline-flex; align-items: center; gap: 8px; }
    .item-legenda svg { width: 22px; height: 22px; flex: none; }

    @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; }
    }
  
    /* Lista da busca de Pokémon: foto pequena + nome + número */
    .combo-busca { min-width: 240px; max-width: 380px; }
    .lista-busca { max-height: 380px; }
    .lista-combo li.com-foto {
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      padding: 4px 10px 4px 6px;
    }
    .lista-combo img {
      width: 56px;
      height: 56px;
      flex: none;
      border-radius: 50%;
      background: color-mix(in srgb, var(--cor) 22%, var(--painel));
    }
    .nome-busca { flex: 1; }
    .numero-busca { color: var(--suave); font-size: 0.9rem; font-weight: 400; }
  

    /* Zoom dos mapas: botões no canto e mãozinha para arrastar quando está aproximado */
    .zoom-envoltorio { position: relative; }
    .zoom-controles {
      position: absolute; top: 10px; right: 10px; z-index: 2;
      display: flex; flex-direction: column; gap: 6px;
    }
    .zoom-botao {
      width: 34px; height: 34px; padding: 0;
      border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.2);
      background: var(--painel); color: var(--tinta);
      font-size: 1.25rem; line-height: 1; font-weight: 700; cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
    .zoom-botao:hover:not(:disabled) { background: var(--cor); color: var(--cor-texto); }
    .zoom-botao:focus-visible { outline: 3px solid var(--cor-forte); outline-offset: 2px; }
    .zoom-botao:disabled { opacity: .4; cursor: default; }
    .zoom-envoltorio .mapa-svg { touch-action: pan-x pan-y; }
    .zoom-envoltorio.ampliado .mapa-svg { cursor: grab; touch-action: none; }
    .zoom-envoltorio.arrastando .mapa-svg { cursor: grabbing; }
    .zoom-envoltorio:has(> .mapa-grande-quadro) { width: min(100%, 980px); margin: 0 auto; }

    /* Rodapé com o aviso de site de fã */
    .rodape-site {
      max-width: 980px; margin: 40px auto 0; padding: 18px 16px 28px;
      border-top: 1px solid color-mix(in srgb, var(--suave) 30%, transparent);
      color: var(--suave); font-size: .82rem; line-height: 1.5; text-align: center;
    }
    .rodape-site p { margin: 0 0 6px; }
    .rodape-site a { color: inherit; text-decoration: underline; }

    /* ---------- Modo de edição dos mapas (só aparece com ?editar no endereço) ---------- */
    .editor-painel {
      position: fixed; right: 16px; bottom: 16px; z-index: 60;
      width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
      padding: 14px; border-radius: 14px;
      background: var(--painel); color: var(--tinta);
      border: 2px solid var(--cor); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
      font-size: .9rem;
    }
    .editor-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .editor-titulo { margin: 0; font-size: 1rem; }
    .editor-recolher { width: 30px; height: 30px; padding: 0; font-size: 1.1rem; line-height: 1; }
    .editor-painel.recolhido .editor-corpo { display: none; }
    .editor-dica, .editor-status, .editor-qual { margin: 8px 0; color: var(--suave); }
    .editor-status { color: var(--tinta); font-weight: 600; }
    .editor-campos { display: grid; gap: 8px; margin: 8px 0; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--suave) 12%, transparent); }
    .editor-campos label, .editor-senha label { display: grid; gap: 3px; font-weight: 600; }
    .editor-campos input, .editor-campos select, .editor-senha input { width: 100%; box-sizing: border-box; }
    .editor-campos[hidden] { display: none; }
    .editor-xy { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .editor-botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .editor-botoes button { flex: 1 1 auto; }
    .editor-botoes button.ativo { background: var(--cor); color: var(--cor-texto); }
    .editor-senha { display: grid; gap: 8px; margin-top: 10px; }
    .editor-aviso { margin: 0; color: var(--cor-forte); min-height: 1.2em; }
    .modo-edicao .mapa-svg[data-chave-mapa] .local-clicavel { cursor: move; }
    .modo-edicao .mapa-svg .local-clicavel.editando .marcador { stroke: #ff2bd6; stroke-width: 3; fill-opacity: .35; }
    .modo-edicao .mapa-svg .local-clicavel.editando .marcador.rota { fill: #ff2bd6; }
    .modo-edicao .mapa-svg .local-clicavel.editando .rotulo-mapa { fill: #ff2bd6; }
    /* No celular os botões de zoom ficam menores, para não tampar tanto o mapa */
    @media (max-width: 560px) {
      .zoom-controles { top: 6px; right: 6px; gap: 4px; }
      .zoom-botao { width: 28px; height: 28px; font-size: 1.05rem; border-radius: 8px; }
    }

    /* Busca no meio da tela inicial (no lugar do antigo "Pesquise o nome ou número do Pokémon") */
    .lugar-busca-inicio { width: min(640px, 100%); }
    .busca.busca-no-inicio { margin: 0; width: 100%; justify-content: center; gap: 10px; }
    .busca-no-inicio .combo-busca { flex: 1 1 280px; max-width: none; min-width: 0; }
    .busca-no-inicio #busca { width: 100%; font-size: 1.15rem; padding: 0.8rem 1.1rem; border-radius: 14px; }
    .busca-no-inicio button { font-size: 1.05rem; padding: 0.75rem 1.3rem; border-radius: 14px; }
    .barra.sem-busca .config-area { margin-left: auto; }   /* sem a busca no topo, a engrenagem continua no canto direito */
    @media (max-width: 560px) {
      .busca-no-inicio .combo-busca { flex-basis: 100%; }
      .busca-no-inicio button { flex: 1 1 0; }
    }
    /* Editor: parte de enviar a imagem de um mapa novo */
    .editor-mapa-novo, .editor-mapa-proprio { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 8px 0; margin: 4px 0 8px; }
    .editor-mapa-novo label, .editor-mapa-proprio label { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-weight: 600; }
    .editor-mapa-novo input, .editor-mapa-proprio input { width: 100%; box-sizing: border-box; font-weight: 400; }

    /* Formas escolhidas no editor: sempre visíveis, com a cor do tipo do ponto */
    .mapa-svg .marcador.forma-escolhida { stroke: #fff; stroke-width: 1.6; }
    .mapa-svg .marcador.forma-escolhida.forma-cidade { fill: #e0483e; }
    .mapa-svg .marcador.forma-escolhida.forma-rota { fill: #f5f5f5; stroke: #333; }
    .mapa-svg .marcador.forma-escolhida.forma-caverna { fill: #8a5a2b; }
    .mapa-svg.com-imagem .marcador.forma-escolhida.forma-cidade { fill: #e0483e; }
    .mapa-svg.com-imagem .marcador.forma-escolhida.forma-caverna { fill: #8a5a2b; }
    .mapa-svg .local-clicavel:hover .marcador.forma-escolhida { filter: brightness(1.25); }

    /* ===== Montador de time ===== */
    .secao-time-inicio { width: min(1180px, calc(100vw - 64px)); margin-top: 40px; text-align: center; }
    .secao-time-inicio h2 { margin: 0 0 6px; font-size: 1.3rem; color: var(--suave); }
    .botao-time-inicio {
      display: inline-block; margin-top: 12px; padding: 0.75rem 1.6rem; border-radius: 14px;
      background: var(--cor); color: var(--cor-texto); font-weight: 700; text-decoration: none;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    }
    .botao-time-inicio:hover { filter: brightness(1.1); }
    .botao-time-inicio:focus-visible { outline: 3px solid var(--cor-forte); outline-offset: 3px; }
    @media (max-width: 700px) { .secao-time-inicio { width: 100%; } }

    .tela-time { padding: 8px 0 40px; }
    .time-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
    .time-campo { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.9rem; }
    .time-campo input, .time-campo select { min-width: 200px; }
    .time-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
    .time-status { margin: 0; color: var(--suave); min-height: 1.2em; flex-basis: 100%; }

    .time-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 18px 0 30px; }
    .time-espaco {
      background: var(--painel); border: 1px solid var(--linha); border-radius: 16px; padding: 14px;
      display: flex; flex-direction: column; gap: 10px; position: relative;
    }
    .time-espaco.vazio { border-style: dashed; }
    .time-espaco.carregando { opacity: .6; }
    .time-espaco-topo { display: flex; align-items: center; gap: 10px; }
    .time-foto { width: 64px; height: 64px; image-rendering: pixelated; flex: none; }
    .time-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
    .time-pokemon { width: 100%; box-sizing: border-box; font-weight: 700; }
    .time-tipos { display: flex; gap: 6px; flex-wrap: wrap; }
    .time-tipos .chip { font-size: 0.75rem; padding: 2px 9px; }
    .time-remover {
      flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%;
      font-size: 1.2rem; line-height: 1; align-self: flex-start;
    }
    .time-espaco .time-campo select { min-width: 0; width: 100%; }
    .time-golpes { display: flex; flex-direction: column; gap: 6px; }
    .time-golpe-linha { display: flex; align-items: center; gap: 6px; }
    .time-golpe { flex: 1; min-width: 0; }
    .time-golpe-tipo { flex: none; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
    .time-aviso { margin: 0; font-size: 0.85rem; color: #e0483e; }

    .time-titulo-fraquezas { margin: 10px 0 4px; }
    .time-resumo { margin: 0 0 10px; color: var(--suave); }
    .time-resumo.alerta { color: #e0483e; font-weight: 600; }
    .time-fraquezas { overflow-x: auto; }
    .time-tabela { border-collapse: collapse; margin: 0 auto 0 0; background: var(--painel); border-radius: 12px; overflow: hidden; }
    .time-tabela th, .time-tabela td { padding: 4px 6px; text-align: center; border-bottom: 1px solid var(--linha); font-size: 0.9rem; }
    .time-tabela thead img { width: 40px; height: 40px; image-rendering: pixelated; display: block; margin: 0 auto; }
    .time-tabela tbody th { text-align: left; }
    .time-chip { font-size: 0.75rem; padding: 2px 9px; min-width: 64px; text-align: center; }
    .time-tabela td.fraco { color: #fff; background: #d9534f; font-weight: 700; }
    .time-tabela td.resiste { color: #fff; background: #3c9a5f; font-weight: 700; }
    .time-tabela td.imune { color: #fff; background: #2d5f8a; font-weight: 700; }
    .time-tabela td.contagem { font-weight: 700; }
    .time-tabela td.contagem.muitos { color: #e0483e; }
    .time-tabela tr.alerta th .time-chip { outline: 2px solid #e0483e; outline-offset: 2px; }
    @media (max-width: 560px) {
      .time-campo input, .time-campo select { min-width: 0; width: 100%; }
      .time-barra > .time-campo { flex: 1 1 100%; }
      .time-tabela th, .time-tabela td { padding: 3px 3px; font-size: 0.8rem; }
      .time-tabela thead img { width: 30px; height: 30px; }
      .time-chip { min-width: 0; padding: 2px 6px; }
    }

    /* Telinha flutuante com os detalhes do golpe (montador de time) */
    .time-golpe-tipo { cursor: pointer; user-select: none; }
    .time-golpe-tipo:focus-visible { outline: 3px solid var(--cor-forte); outline-offset: 2px; }
    .balao-golpe {
      position: fixed; z-index: 50; width: min(300px, calc(100vw - 16px)); box-sizing: border-box;
      background: var(--painel); color: var(--tinta); border: 1px solid var(--linha); border-radius: 14px;
      padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); font-size: 0.9rem; pointer-events: auto;
    }
    .balao-golpe[hidden] { display: none; }
    .balao-golpe-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
    .balao-golpe-topo strong { font-size: 1.05rem; }
    .balao-golpe-topo .chip { font-size: 0.75rem; padding: 2px 9px; }
    .balao-golpe dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
    .balao-golpe dt { color: var(--suave); }
    .balao-golpe dd { margin: 0; font-weight: 700; text-align: right; }
    .balao-golpe-efeito { margin: 10px 0 0; line-height: 1.4; }
    .balao-golpe-efeito span { color: var(--suave); }
    .balao-golpe-jogo { margin: 8px 0 0; font-size: 0.78rem; color: var(--suave); }

    /* Montador de time, etapa 2: nível, habilidade, item, IV/EV e cobertura */
    .time-linha-campos { display: flex; gap: 8px; }
    .time-linha-campos > .time-campo { flex: 1; min-width: 0; }
    .time-linha-campos .time-campo-nivel { flex: 0 0 74px; }
    .time-espaco .time-campo input { min-width: 0; width: 100%; box-sizing: border-box; }
    .time-campo[hidden] { display: none; }
    .time-detalhes-status { border-top: 1px solid var(--linha); padding-top: 8px; }
    .time-detalhes-status[hidden] { display: none; }
    .time-resumo-status { cursor: pointer; font-size: 0.82rem; color: var(--suave); line-height: 1.4; }
    .time-tabela-status { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.85rem; }
    .time-tabela-status th, .time-tabela-status td { padding: 2px 3px; text-align: center; }
    .time-tabela-status tbody th { text-align: left; font-weight: 600; }
    .time-tabela-status input { width: 54px; box-sizing: border-box; padding: 3px 4px; text-align: center; }
    .time-tabela-status .time-base { color: var(--suave); }
    .time-total { font-weight: 700; }
    .time-total.sobe { color: #e0483e; }
    .time-total.cai { color: #3d7bd9; }
    .time-ev-total { margin: 6px 0 0; font-size: 0.8rem; color: var(--suave); }
    .time-ev-total.cheio { color: #e0483e; font-weight: 600; }
    .time-cobertura-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
    .time-cobertura-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--painel); border: 1px solid var(--linha); }
    .time-cobertura-item.forte { border-color: #3c9a5f; }
    .time-cobertura-item.forte .time-cobertura-valor { color: #3c9a5f; }
    .time-cobertura-item.fraco { border-color: #d9534f; }
    .time-cobertura-item.fraco .time-cobertura-valor { color: #d9534f; }
    .time-cobertura-valor { font-weight: 800; }
    .time-cobertura-item { flex-wrap: wrap; cursor: pointer; }
    .time-cobertura-quem { display: none; flex-basis: 100%; font-size: 0.75rem; color: var(--suave); }
    .time-cobertura-item.aberto .time-cobertura-quem { display: block; }

    /* Montador de time, etapa 3: janela do Showdown */
    .janela-showdown { width: min(620px, calc(100vw - 24px)); }
    .janela-corpo-showdown { display: block; padding: 14px 18px; }
    .texto-showdown {
      width: 100%; box-sizing: border-box; min-height: 300px; resize: vertical;
      font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.88rem; line-height: 1.45;
      background: var(--fundo, var(--painel)); color: var(--tinta); border: 1px solid var(--linha); border-radius: 10px; padding: 10px;
    }
    .time-espaco.fora-do-jogo { border-color: #e0483e; }

    /* Botão "Geração" e cartões das gerações (tela inicial) */
    .secao-geracoes { width: min(1180px, calc(100vw - 64px)); margin-top: 22px; display: flex; flex-direction: column; align-items: center; }
    .botao-geracoes {
      font-size: 1.1rem; font-weight: 700; padding: 0.75rem 2.2rem; border-radius: 14px;
      display: inline-flex; align-items: center; gap: 10px;
    }
    .botao-geracoes::after { content: "▾"; transition: transform .2s; }
    .botao-geracoes[aria-expanded="true"]::after { transform: rotate(180deg); }
    .grade-geracoes {
      width: 100%; margin-top: 16px; display: grid; gap: 14px;
      grid-template-columns: repeat(3, minmax(0, 1fr));   /* 9 gerações = 3 fileiras de 3 */
      max-width: 1000px;
    }
    @media (max-width: 900px) { .grade-geracoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .grade-geracoes[hidden] { display: none; }
    .cartao-geracao {
      display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px;
      background: var(--painel); border: 1px solid var(--linha); border-radius: 18px;
      color: inherit; text-decoration: none;
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .cartao-geracao:hover, .cartao-geracao:focus-visible { transform: translateY(-3px); border-color: var(--cor-forte); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); }
    .cartao-geracao:focus-visible { outline: 3px solid var(--cor-forte); outline-offset: 2px; }
    .titulo-geracao { font-size: 1.35rem; font-weight: 800; letter-spacing: .02em; }
    .trio-geracao { display: flex; justify-content: center; gap: 2px; }
    .trio-geracao img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
    .regiao-geracao { color: var(--suave); font-weight: 600; }
    .trio-tela-geracao { display: flex; }
    .trio-tela-geracao img { width: 64px; height: 64px; object-fit: contain; }
    @media (max-width: 700px) {
      .secao-geracoes { width: 100%; }
      .grade-geracoes { grid-template-columns: 1fr; }
      .trio-geracao img { width: 88px; height: 88px; }
    }

    /* =====================================================
       TEMA POKÉMON
       O topo é a metade de cima de uma Poké Ball: vermelho, com a faixa preta e o botão no meio.
       O fundo tem Poké Balls bem clarinhas; os botões têm "degrau" embaixo, como os botões de uma Pokédex.
       (Fica no fim do arquivo para valer por cima dos estilos de antes.)
       ===================================================== */
    html[data-tema="claro"] {
      --base: #e9eef5;
      --painel: #ffffff;
      --tinta: #1a2238;
      --suave: #586179;
      --linha: #d3dae6;
      --borda-botao: #c3ccda;
      --foco: #2e7dd7;
      --vermelho-dex: #d62d20;
      --vermelho-escuro: #8e1a13;
      --padrao-pokebola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='rgba(26,34,56,0.07)' stroke-width='2.4'%3E%3Ccircle cx='40' cy='42' r='20'/%3E%3Cpath d='M20 42h13M47 42h13'/%3E%3Ccircle cx='40' cy='42' r='6.5'/%3E%3Cg transform='rotate(-28 110 108)'%3E%3Ccircle cx='110' cy='108' r='13'/%3E%3Cpath d='M97 108h8.5M114.5 108h8.5'/%3E%3Ccircle cx='110' cy='108' r='4.3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      --fundo-pagina:
        radial-gradient(ellipse 70% 40% at 50% 0%, color-mix(in srgb, var(--cor) 16%, transparent), transparent),
        var(--padrao-pokebola),
        var(--base);
    }
    html[data-tema="escuro"] {
      --base: #0f1626;
      --painel: #19223a;
      --tinta: #eef1f8;
      --suave: #a2abc2;
      --linha: #2a3550;
      --borda-botao: #36425f;
      --foco: #ffcb05;
      --vermelho-dex: #b8241a;
      --vermelho-escuro: #6b120c;
      --padrao-pokebola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='2.4'%3E%3Ccircle cx='40' cy='42' r='20'/%3E%3Cpath d='M20 42h13M47 42h13'/%3E%3Ccircle cx='40' cy='42' r='6.5'/%3E%3Cg transform='rotate(-28 110 108)'%3E%3Ccircle cx='110' cy='108' r='13'/%3E%3Cpath d='M97 108h8.5M114.5 108h8.5'/%3E%3Ccircle cx='110' cy='108' r='4.3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      --fundo-pagina:
        radial-gradient(ellipse 70% 45% at 25% 0%, color-mix(in srgb, var(--cor) 24%, transparent), transparent),
        var(--padrao-pokebola),
        var(--base);
    }
    body { background: var(--fundo-pagina); background-attachment: fixed; }
    :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

    /* ---------- Topo: a Poké Ball ---------- */
    .barra {
      position: relative;
      z-index: 5;
      color: #fff;
      background: linear-gradient(180deg, color-mix(in srgb, var(--vermelho-dex) 85%, #fff) 0%, var(--vermelho-dex) 55%, color-mix(in srgb, var(--vermelho-dex) 85%, #000) 100%);
      border-bottom: 6px solid #1b1b1f;
      margin-bottom: 18px;
    }
    .barra::after {                      /* o botão da Poké Ball, em cima da faixa preta */
      content: "";
      position: absolute;
      left: 50%;
      bottom: -19px;
      width: 32px;
      height: 32px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: radial-gradient(circle, #ffffff 0 34%, #d9dde5 36% 46%, #f5f6f8 48%);
      border: 5px solid #1b1b1f;
      pointer-events: none;
    }
    .marca h1 { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28); }
    .marca:hover h1 { color: #ffe36a; }
    .logo-pokedex { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3)); }
    .logo-pokedex .pdx-corpo { stroke: #1b1b1f; }
    .barra input { background: #fff; color: #1a2238; border-color: rgba(0, 0, 0, 0.25); }
    .barra input::placeholder { color: #6b7385; }
    .barra button, .barra .botao-config {
      background: #fff; color: #1a2238; border-color: rgba(0, 0, 0, 0.28); border-bottom-color: rgba(0, 0, 0, 0.45);
    }
    .barra button:hover:not(:disabled) { background: #fff4c2; }

    /* ---------- Botões com "degrau" ---------- */
    button, .botao-voltar, .botao-time-inicio {
      font-family: var(--fonte-titulo);
      font-weight: 600;
      letter-spacing: 0.01em;
      border: 2px solid var(--borda-botao);
      border-bottom-width: 4px;
      border-radius: 12px;
      transition: transform 0.08s ease, border-bottom-width 0.08s ease, background-color 0.15s ease;
    }
    button:active:not(:disabled), .botao-voltar:active, .botao-time-inicio:active {
      transform: translateY(2px);
      border-bottom-width: 2px;
    }
    .botao-principal, .botao-time-inicio {
      background: var(--cor);
      color: var(--cor-texto);
      border-color: color-mix(in srgb, var(--cor) 72%, #000);
    }
    .botao-principal:hover:not(:disabled), .botao-time-inicio:hover { filter: brightness(1.07); border-color: color-mix(in srgb, var(--cor) 60%, #000); }
    .botao-voltar { border-radius: 999px; }
    .botao-config { border-radius: 50%; }
    @media (prefers-reduced-motion: reduce) {
      button, .botao-voltar, .botao-time-inicio { transition: none; }
      button:active:not(:disabled), .botao-voltar:active, .botao-time-inicio:active { transform: none; }
    }

    /* Botão "Gerações": vermelho da Pokédex, com uma Poké Ball do lado */
    .botao-geracoes {
      color: #fff;
      background: var(--vermelho-dex);
      border-color: var(--vermelho-escuro);
      padding: 0.75rem 2.2rem;
      font-size: 1.15rem;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    }
    .botao-geracoes::before {
      content: "";
      width: 22px; height: 22px; border-radius: 50%; flex: none;
      border: 2px solid #1b1b1f;
      background:
        radial-gradient(circle, #fff 0 18%, #1b1b1f 20% 30%, transparent 32%),
        linear-gradient(180deg, #ff4b3e 0 44%, #1b1b1f 44% 56%, #fff 56%);
    }
    .botao-geracoes:hover { filter: brightness(1.08); }

    /* ---------- Títulos das seções da tela inicial com uma Poké Ball do lado ---------- */
    .secao-tipos h2, .secao-mapas h2, .secao-time-inicio h2, .time-titulo-fraquezas {
      color: var(--tinta);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .time-titulo-fraquezas { justify-content: flex-start; }
    .secao-tipos h2::before, .secao-mapas h2::before, .secao-time-inicio h2::before, .time-titulo-fraquezas::before {
      content: "";
      flex: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid #1b1b1f;
      background:
        radial-gradient(circle, #fff 0 18%, #1b1b1f 20% 30%, transparent 32%),
        linear-gradient(180deg, var(--vermelho-dex) 0 44%, #1b1b1f 44% 56%, #fff 56%);
    }

    /* ---------- Cartões e caixas: borda mais firme e "degrau" discreto ---------- */
    .cartao-pokemon, .cartao-geracao, .time-espaco {
      border-width: 2px;
      box-shadow: 0 3px 0 var(--borda-botao);
    }
    .cartao-pokemon:hover, .cartao-pokemon:focus-visible,
    .cartao-geracao:hover, .cartao-geracao:focus-visible {
      box-shadow: 0 3px 0 var(--borda-botao), 0 10px 20px rgba(0, 0, 0, 0.18);
    }
    .mapa-grande-quadro, .mapa-quadro { border: 2px solid var(--borda-botao); }

    /* ---------- Rodapé com a faixa da Poké Ball ---------- */
    .rodape-site { border-top: 4px solid #1b1b1f; position: relative; }
    .rodape-site::before {
      content: "";
      position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
      width: 20px; height: 20px; border-radius: 50%;
      background: #f5f6f8; border: 4px solid #1b1b1f;
    }
    .secao-time-inicio p { font-size: 1rem; max-width: 60ch; margin: 0 auto; }
    .secao-tipos { margin-top: 56px; }