/* Menu aprovado: arte original, controles compactos e mapas sempre à vista.
   As regras ficam no menu para preservar o HUD e as páginas de documentação. */
#overlay { --ink: #f3f5f6; --muted: #a8b2bd; --dim: #9aa5b1; --map-selected: #ee8f3d; --menu-glass: linear-gradient(90deg, #080b0fc9, #080b0f48); background: #0c1014; }
#overlay::before, #overlay::after { display: none; }
.menu { max-width: 1120px; padding: 0 26px 30px; font-family: 'Barlow', 'Segoe UI', sans-serif; }
.menu .topo { min-height: 77px; padding: 14px 0; margin: 0 0 22px; gap: 24px; border-bottom: 0; }
.menu-logo { display: block; width: 111px; height: 42px; object-fit: contain; }
.menu-actions { display: flex; align-items: center; gap: 20px; }
.menu-actions .bv-loja svg { width: 18px; height: 18px; stroke-width: 1.7; }
.menu .topo-conta { flex: 0 0 214px; width: 214px; height: 34px; justify-content: flex-end; }
.menu .bv-conta { min-width: 0; }
.menu .hero { margin: 0; display: block; }
.menu .banner { border-radius: 6px; aspect-ratio: 3.18; object-fit: cover; }
.menu .panel { border-color: #343c45; background: #171d23; border-radius: 5px; box-shadow: none; }
.menu .panel::before, .menu .panel::after { display: none; }
.menu .picker { padding: 0; border: 0; background: #080b0f; backdrop-filter: none; overflow: hidden; }
/* O vídeo ocupa todo o painel, com leitura protegida apenas atrás dos textos. */
.menu .picker > .panel-video { height: 100%; transform: scale(1.32); filter: brightness(.78); opacity: 1; border-radius: 5px; }
.menu .palco { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; justify-items: stretch; gap: 12px 24px; padding: 22px 16px 36px; background: var(--menu-glass); }
/* Fundo da faixa dos botões: a continuação do banner que está passando em cima
   (scripts/banner-extensao.mjs), no mesmo rodízio de 24 s, escurecida como o
   fundo do mapa era e com o mesmo vidro por cima. Na pausa, volta o vidro
   sobre a partida. */
.menu .palco { isolation: isolate; background: none; }
.palco-banner { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.palco-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: brightness(.5) saturate(1.1); }
.palco-banner .banner-alternado { opacity: 0; animation: banner-roda 24s ease-in-out calc(var(--vez) * 6s) infinite backwards; }
.palco-banner::after { content: ""; position: absolute; inset: 0; background: var(--menu-glass); }
#overlay.em-jogo .palco-banner { display: none; }
#overlay.em-jogo .menu .palco { background: var(--menu-glass); }
@media (prefers-reduced-motion: reduce) { .palco-banner .banner-alternado { display: none; } }
.mapa-atual { min-width: 0; flex: 1; }
.menu .palco-mapa { font-size: 12px; line-height: 16px; letter-spacing: 0; text-transform: none; text-shadow: 0 1px 5px #000; }
.palco-mapa .badge { font-size: 11px; letter-spacing: 0; text-transform: none; }
#stageMap { margin: 4px 0; font: 600 clamp(25px, 3.2vw, 32px)/1.1 'Barlow Condensed', 'Arial Narrow', sans-serif; height: 1.1em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 6px #000; }
#stageDescription { margin: 5px 0 0; height: 36px; color: #d7e0e7; font-size: 13px; line-height: 18px; text-shadow: 0 1px 5px #000; }
.menu .botoes { grid-column: 2; justify-self: center; gap: 12px; }
.menu #play { display: grid; place-items: center; width: 145px; height: 52px; }
.menu #play img { width: 145px; height: auto; }
/* Ajustes na mesma arte do Jogar (gerada por qa/btn-ajustes.html), na mesma altura. */
.menu #openSettings { display: grid; place-items: center; height: 52px; }
.menu #openSettings img { width: auto; height: 52px; }
.menu #openSettings.aberto img { filter: drop-shadow(0 0 10px #ff8a1c) brightness(1.12); }
/* Online no meio, na mesma arte em verde (qa/btn-ajustes.html?cor=verde&icone=online). */
.menu #openOnline { display: grid; place-items: center; height: 52px; }
.menu #openOnline img { width: auto; height: 52px; }
.menu #openOnline.aberto img { filter: drop-shadow(0 0 10px #3be27a) brightness(1.12); }
.menu #playLabel { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 10px; line-height: 14px; white-space: nowrap; }
.menu #mapPanel { margin: 0; padding: 22px 16px 16px; background: linear-gradient(#080b0f28, #080b0f55); }
.menu .panel-head { gap: 14px; margin-bottom: 16px; }
.menu .panel-head .panel-title { flex: 1 0 auto; min-width: 0; flex-wrap: nowrap; white-space: nowrap; margin: 0; font: 600 25px/1.2 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: 0; text-transform: none; text-shadow: 0 1px 4px #000, 0 0 12px #000; }
.menu .panel-head .panel-title .ico { display: none; }
.menu .panel-head .panel-title em { font: 400 12px 'Barlow', sans-serif; letter-spacing: 0; color: var(--muted); }
.menu .panel-tools { margin: 0; gap: 8px; }
.menu .panel-tools input, .menu .panel-tools select { min-height: 42px; padding: 8px 11px; border-color: #343c45; background: #171d23; font-size: 13px; border-radius: 4px; }
.menu .panel-tools input { width: 158px; }
.menu .panel-tools input::placeholder { color: var(--muted); }
.map-arrows { display: flex; gap: 6px; }
/* Barra de mapas — busca, dificuldade e setas — no formato dos botões do topo
   (botoes/bv-loja.css): placa inclinada de 32 px, letra pequena e espaçada,
   nas cores escuras dos painéis; o escolhido em âmbar. A placa fica num
   pseudo-elemento inclinado, e o conteúdo continua reto. */
.busca-mapa, .menu .map-arrows .arrow { position: relative; isolation: isolate; height: 32px; }
.busca-mapa::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); border-radius: 2px;
  background: #171d23; box-shadow: inset 0 0 0 1px #343c45; transition: background .15s, box-shadow .15s;
}
.busca-mapa { display: flex; align-items: center; width: 140px; cursor: text; }
/* Sem a aparência nativa e sem o desfoque herdado (backdrop-filter): os dois
   desenhavam um retângulo arredondado por cima da placa inclinada. */
.menu .panel-tools .busca-mapa input { appearance: none; -webkit-appearance: none; backdrop-filter: none; border-radius: 0; width: 100%; height: 100%; min-height: 0; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font: 600 12px Barlow, 'Segoe UI', sans-serif; outline: none; }
.busca-mapa:hover::before { box-shadow: inset 0 0 0 1px #ffffff3d; }
.busca-mapa:focus-within::before { box-shadow: inset 0 0 0 1px var(--amber); }
/* A folga em volta não deixa a rolagem lateral cortar as pontas inclinadas. */
/* Filtros de dificuldade: o botão do topo (botoes/bv-loja.css, com o reflexo
   ao passar o mouse), cada um no degradê da sua cor — Todos no âmbar do site,
   Fácil verde, Médio amarelo, Difícil laranja, Extremo vermelho. Os não
   escolhidos ficam apagados; o escolhido acende, com o brilho na cor dele. */
.dif { flex: none; padding: 0 calc(16px - .14em) 0 16px; letter-spacing: .14em; }
.dif-todos { --d1: #ffdc4d; --d2: #ffb000; --d3: #ff7400; --dg: #ff8a00; }
.dif-facil { --d1: #b4f59a; --d2: #52d15a; --d3: #1c8a3c; --dg: #52d15a; }
.dif-medio { --d1: #fff08a; --d2: #f5c832; --d3: #c88a0c; --dg: #f5c832; }
.dif-dificil { --d1: #ffc98a; --d2: #f58f2e; --d3: #bf520c; --dg: #f58f2e; }
.dif-extremo { --d1: #ff9a8a; --d2: #ea3d3d; --d3: #a3121e; --dg: #ea3d3d; }
.dif::before {
  background: linear-gradient(100deg, var(--d1) 0%, var(--d2) 42%, var(--d3) 100%);
  filter: saturate(.55) brightness(.48); box-shadow: inset 0 1px 0 #ffffff40, inset 0 -2px 0 #00000026;
  transition: filter .18s, box-shadow .18s;
}
/* Sem transição na cor do texto: entre color-mix e uma cor sólida ela travava no meio (Chrome). */
.dif { color: color-mix(in srgb, var(--d1) 70%, #ffffff); }
.dif:hover:not(:disabled)::before { filter: saturate(.85) brightness(.75); box-shadow: inset 0 1px 0 #ffffff70, inset 0 -2px 0 #00000026, 0 0 16px color-mix(in srgb, var(--dg) 45%, transparent); }
.dif[aria-pressed="true"] { color: #140c02; }
.dif[aria-pressed="true"]::before { filter: none; box-shadow: inset 0 1px 0 #ffffffa0, inset 0 -2px 0 #00000026, 0 0 20px color-mix(in srgb, var(--dg) 60%, transparent); }
/* Escolhido: uma bolinha verde de neon piscando no começo do botão. */
.dif-luz { display: none; flex: none; width: 8px; height: 8px; margin-right: 2px; border-radius: 50%; background: #39ff6a;
  box-shadow: 0 0 0 1.5px #0a2a12, 0 0 8px #39ff6a, 0 0 14px #39ff6aaa; animation: dif-luz 1.1s ease-in-out infinite; }
.dif[aria-pressed="true"] .dif-luz { display: block; }
@keyframes dif-luz { 50% { opacity: .25; box-shadow: 0 0 0 1.5px #0a2a12, 0 0 2px #39ff6a; } }
@media (prefers-reduced-motion: reduce) { .dif-luz { animation: none; } }
.dif:focus-visible::before { box-shadow: inset 0 1px 0 #ffffff80, 0 0 0 2px #07080b, 0 0 0 4px var(--d1); }
/* Mesmo espaço (6 px) entre todas as peças da barra, das setas inclusive:
   uma placa continua a outra. */
.menu #mapPanel .panel-tools { gap: 6px; }
.menu .map-arrows { gap: 6px; margin-left: -8px; }
/* inset: auto anula o right: -30px / top: 50% da seta antiga (style.css .arrow), que voltariam a valer com position: relative. */
/* As setas são o botão do topo (botoes/bv-loja.css): placa amarela com o reflexo. */
.menu .map-arrows .arrow { inset: auto; width: 40px; padding: 0; border: 0; background: none; box-shadow: none; color: #1a0f00; }
.menu .map-arrows .arrow:hover:not(:disabled) { background: none; border: 0; color: #1a0f00; }
.menu .map-arrows .arrow svg { width: 14px; height: 14px; stroke-width: 2.6; }
.touch-mode .menu .map-arrows .arrow { height: 44px; width: 48px; }
/* No toque, a barra tem a altura dos botões do topo no celular (44 px). */
.touch-mode .busca-mapa, .touch-mode .dif-botao { height: 44px; }
.touch-mode .dif { padding-inline: 18px calc(18px - .14em); }
.menu .arrow { position: static; transform: none; display: grid; place-items: center; width: 42px; height: 42px; background: #171d23; border-color: #343c45; color: var(--ink); box-shadow: none; }
.menu .arrow:hover:not(:disabled) { background: #232b33; color: var(--map-selected); border-color: var(--map-selected); }
.menu .arrow:disabled { opacity: .35; cursor: default; }
.menu .arrow svg { width: 15px; height: 15px; }
.menu .viewport { --per-view: 3.18; position: relative; height: 253px; touch-action: pan-y; cursor: grab; overflow: hidden; border-radius: 5px; }
.menu .viewport.arrastando { cursor: grabbing; user-select: none; }
.menu .viewport:focus-visible { outline: 2px solid var(--map-selected); outline-offset: 4px; }
.menu .slides { display: block; position: relative; height: 100%; min-height: 0; transform: none; transition: none; }
.menu .map-card { position: absolute; top: 2px; left: 0; width: var(--card-width); height: 247px; background: var(--menu-glass); border: 1px solid #343c45; backdrop-filter: none; box-shadow: none; transition: border-color .16s; }
.menu .map-card:hover { border-color: #8b99a7; }
.menu .map-card.selected { border-color: var(--map-selected); background: var(--menu-glass); box-shadow: inset 0 0 0 1px #ee8f3d2b; }
.menu .map-card:focus-visible { outline-color: var(--map-selected); outline-offset: -3px; }
.menu .map-card .accent { background: var(--map-selected); height: 3px; }
.menu .map-shot { flex: none; }
.menu .map-shot::after { display: none; }
.menu .map-shot img { height: 144px; aspect-ratio: auto; pointer-events: none; }
.menu .map-shot .badge { position: absolute; top: 10px; left: 10px; padding: 4px 7px; border-radius: 3px; background: #0c1014ee; font-size: 10px; letter-spacing: 0; text-transform: none; }
.menu .map-shot .badge s { display: none; }
.menu .map-best { top: auto; bottom: 9px; }
.menu .map-body { padding: 12px 13px; margin: 0; text-shadow: 0 1px 4px #000, 0 0 8px #0009; }
.menu .map-heading b { font: 600 20px/1.15 'Barlow Condensed', 'Arial Narrow', sans-serif; overflow-wrap: anywhere; word-break: normal; letter-spacing: 0; }
.menu .map-card.selected .map-heading b { color: var(--ink); }
.menu .map-description { margin-top: 6px; color: #cbd6df; font-size: 12px; line-height: 1.4; }
.map-check { position: absolute; z-index: 2; top: 10px; right: 10px; width: 24px; height: 24px; display: none; place-items: center; border-radius: 50%; background: #46d583; color: #07361c; font: 700 17px/1 'Segoe UI', sans-serif; box-shadow: 0 1px 5px #0005; }
.selected .map-check { display: grid; }
.menu .empty { min-height: 247px; }
.menu .ranking { background: var(--menu-glass); border-color: #ffffff12; box-shadow: none; margin-top: 16px; }
/* O pódio sempre no mesmo espaço (3 linhas), e a linha dos botões também:
   trocar de mapa não muda a altura do menu, e nada rola por dentro. O "Ver +"
   abre até o top 10, e aí sim o painel cresce. */
.ranking li { min-height: 26px; }
.ranking-lista { min-height: calc(26px * 3 + 2px * 2 + 27px); }   /* 3 linhas + a linha de aviso */
.ranking-acoes { min-height: 39px; align-items: flex-end; }
.ranking-ver-mais { margin-left: auto; }
.menu .ranking h3 { white-space: nowrap; overflow: hidden; }
.menu .ranking h3 em { overflow: hidden; text-overflow: ellipsis; }
.menu #message { position: fixed; z-index: 10; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(620px, calc(100% - 32px)); margin: 0; padding: 12px 16px; border: 1px solid #ee8f3d77; border-radius: 4px; background: #11171df5; box-shadow: 0 4px 20px #0008; line-height: 1.5; }
.menu #message:empty { display: none; }
.menu .settings, .menu .loja, .menu .doar { scroll-margin-top: 20px; margin-top: 20px; }
/* O que é o jogo e para que serve a conta do Google: visível na página inicial. */
#overlay.em-jogo .sobre { display: none; }
/* ---------- Rodapé (index.html .rodape) ----------
   Na estrutura do rodapé da loja da Supercell, nas cores do site: o azul-escuro
   do menu, linhas sutis e o âmbar nos destaques. Em cima, a chamada para jogar
   com o botão âmbar do topo; depois o "Sobre" (com a dica de controles e o
   aviso da conta), idioma, redes, Google Play, documentos e a marca. */
/* Dentro da coluna do menu, com a largura e os cantos dos outros painéis. */
.rodape {
  position: relative; z-index: 1; margin-top: 16px; overflow: hidden; color: var(--ink); font-family: Barlow, 'Segoe UI', sans-serif;
  background: #171d23; border: 1px solid #343c45; border-radius: 5px;   /* as cores dos painéis (.menu .panel) */
}
/* Um fio claro e discreto no alto. */
.rodape::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #ffffff26, transparent); }
.rodape-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; padding: 22px 16px;
  border-bottom: 1px solid #ffffff10; font-size: 17px; font-weight: 600; text-align: center;
}
.rodape .rodape-jogar { height: 42px; padding: 0 calc(28px - .2em) 0 28px; font-size: 12px; }
/* Sem o brilho laranja em volta; o play é um disco escuro com a seta âmbar. */
.rodape .rodape-jogar::before, .rodape .rodape-jogar:hover:not(:disabled)::before { box-shadow: inset 0 1px 0 #ffffff80, inset 0 -2px 0 #00000026; }
.rodape .rodape-jogar svg { width: 20px; height: 20px; stroke: none; }
.rodape .rodape-jogar .play-fundo { fill: #1a0f00; }
.rodape .rodape-jogar .play-seta { fill: #ffc21a; }
.rodape-dentro { padding: 30px 28px 36px; }
/* Sobre: o jogo e a dica de um lado, a conta do outro. */
.rodape-sobre { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 40px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid #ffffff17; }
.rodape-sobre .sobre { display: grid; gap: 10px; align-content: start; }
.rodape-sobre h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink); font: 700 22px/1.15 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .02em; }
/* O V do logo (assets/brand/v-vector.webp) na frente do título. */
.sobre-v { flex: none; width: auto; height: 34px; margin: -4px 0 -4px -2px; filter: drop-shadow(0 2px 6px #000a); }
.rodape-sobre p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.rodape-sobre a { color: var(--ink); text-decoration-color: #ee8f3d99; text-underline-offset: 3px; }
.rodape-sobre a:hover { color: var(--map-selected); }
/* A dica de controles: uma faixa com o âmbar do lado. */
.rodape .intro {
  padding: 10px 14px; border: 1px solid #ffffff12; border-left: 3px solid var(--map-selected); border-radius: 4px;
  background: #ffffff06; color: #c3c7ce; font-size: 13px; line-height: 1.6; white-space: normal; overflow: visible; text-align: left;
}
.rodape .intro strong { color: var(--amber); font-weight: 600; }
/* As duas colunas no mesmo formato: título com ícone e o texto, sem caixa. */
.rodape-conta { display: grid; gap: 10px; align-content: start; }
/* O G do Google numa bolinha branca, como o logo aparece no botão de entrar. */
.rodape-google { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -4px 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px #000a; }
.rodape-google svg { width: 19px; height: 19px; }
.rodape-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; }
.rodape-com-linha { margin-top: 26px; padding-top: 26px; border-top: 1px solid #ffffff17; }
/* Redes à esquerda; idioma, país e Google Play à direita, na mesma linha. */
.rodape-redes-linha { align-items: flex-end; }
.rodape-direita { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.rodape-idioma { position: relative; display: inline-flex; align-items: center; height: 40px; border: 1px solid #ffffff2e; border-radius: 4px; background: #ffffff06; cursor: pointer; transition: border-color .15s; }
.rodape-idioma:hover { border-color: var(--map-selected); }
.rodape-idioma svg { position: absolute; top: 50%; translate: 0 -50%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.rodape-globo { left: 10px; width: 20px; height: 20px; color: var(--map-selected); }
.rodape-seta { right: 9px; width: 18px; height: 18px; stroke-width: 2.2 !important; }
.rodape-idioma select { appearance: none; height: 100%; padding: 0 36px 0 39px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: 600 15px Barlow, sans-serif; outline: none; }
.rodape-idioma select option { background: #171d23; color: var(--ink); }
.rodape-idioma:focus-within { box-shadow: 0 0 0 2px #171d23, 0 0 0 4px var(--map-selected); }
.rodape-pais { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.rodape-pais svg { width: 20px; height: 20px; fill: var(--map-selected); }
.rodape-pais svg circle { fill: #171d23; }
.rodape-social strong { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 700; }
.rodape-redes { display: flex; gap: 14px; }
.rodape-redes a { display: grid; place-items: center; width: 42px; height: 42px; color: var(--ink); border: 1px solid #ffffff17; border-radius: 8px; background: #ffffff06; transition: color .15s, border-color .15s, transform .15s; }
.rodape-redes svg { width: 24px; height: 24px; fill: currentColor; }
.rodape-redes svg .contorno { fill: none; stroke: currentColor; stroke-width: 2.1; }
.rodape-redes a:hover { color: var(--map-selected); border-color: #ee8f3d80; transform: translateY(-2px); }
.rodape-redes a:focus-visible, .rodape-play:focus-visible, .rodape-links a:focus-visible { outline: 2px solid var(--map-selected); outline-offset: 4px; }
/* O selo oficial do Google Play traz uma folga transparente em cima e embaixo
   (dos lados, não): a margem negativa tira a folga e o selo alinha com o resto. */
.rodape-play { display: block; line-height: 0; border-radius: 8px; }
.rodape-play img { display: block; width: auto; height: 64px; margin: -8px 0; }
/* No app do Play, o selo não tem para onde levar. */
html[data-app] .rodape-play { display: none; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 12px 26px; }
/* Sem sublinhado parado: ao passar o mouse, o texto fica âmbar e uma linha
   cresce da esquerda para a direita embaixo dele. */
.rodape-links a { position: relative; padding-bottom: 5px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .18s; }
.rodape-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--map-selected); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.rodape-links a:hover, .rodape-links a:focus-visible { color: var(--map-selected); }
.rodape-links a:hover::after, .rodape-links a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .rodape-links a, .rodape-links a::after { transition: none; } }
.rodape-fim { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 34px; }
.rodape-info { display: grid; gap: 4px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.rodape-marca { flex: none; width: auto; height: 58px; }
.rodape .credits { margin-top: 26px; }
#overlay.em-jogo .rodape { display: none; }
@media (max-width: 760px) {
  .rodape-sobre { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rodape-cta { font-size: 15px; padding: 18px 16px; }
  .rodape-dentro { padding: 24px 16px 36px; }
  .rodape-com-linha { margin-top: 20px; padding-top: 20px; }
  .rodape-links { gap: 12px 20px; }
  .rodape-fim { flex-direction: column-reverse; align-items: flex-start; }
  .rodape-redes-linha { align-items: flex-start; flex-direction: column; }
  .rodape-direita { width: 100%; justify-content: space-between; }
  .rodape-marca { height: 48px; }
}
.menu [hidden] { display: none !important; }
/* Vitrine: imagens maiores e faixas alinhadas para nome, preço e ação. */
.menu #shopPanel { background: #10161d; border-color: #34404b; padding: 28px; }
#shopPanel > .panel-title { flex-wrap: wrap; gap: 10px 14px; font: 600 32px/1.15 'Barlow Condensed', sans-serif; text-transform: none; letter-spacing: 0; margin-bottom: 20px; }
#shopPanel > .panel-title .ico { width: 23px; height: 23px; }
#shopPanel > .panel-title em { flex-basis: 100%; font: 400 13px/1.5 'Barlow', sans-serif; color: var(--muted); letter-spacing: 0; }
#shopPanel .loja-filtros { gap: 8px; padding-block: 12px 18px; border-bottom: 1px solid #ffffff12; margin-bottom: 24px; }
#shopPanel .loja-filtros button[aria-pressed='true'] { color: #ffe1a3; background: #ffb00017; border-color: #ee8f3d; }
#shopPanel .loja-secao h3 { font: 600 25px/1.2 'Barlow Condensed', sans-serif; letter-spacing: 0; text-transform: none; }
#shopPanel .loja-secao-nota { max-width: 72ch; margin: 6px 0 18px; font-size: 12px; line-height: 1.5; color: var(--muted); letter-spacing: 0; }
#shopPanel .loja-secao + .loja-secao { padding-top: 28px; }
#shopPanel .loja-grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); column-gap: 16px; }
#shopPanel .loja-item { min-width: 0; padding: 14px; margin-bottom: 16px; border: 1px solid #303b46; border-radius: 6px; background: #171f28; transition: border-color .18s, box-shadow .18s; }
#shopPanel .loja-item:hover { border-color: #667c8c; box-shadow: 0 8px 24px #0004; }
#shopPanel .loja-item.meu { border-color: #486454; }
#shopPanel .loja-item .loja-foto-botao, #shopPanel .loja-item .loja-foto-botao:hover:not(:disabled) { overflow: hidden; border-radius: 4px; background: radial-gradient(ellipse at 50% 70%, #30435450, transparent 70%), #0d1218; }
#shopPanel .loja-foto { aspect-ratio: 16 / 10; object-fit: contain; }
#shopPanel .loja-item:hover .loja-foto { transform: translateY(-3px) scale(1.04); }
#shopPanel .loja-item > .selo-loja { margin-top: 10px; padding: 3px 7px; font-size: 8px; letter-spacing: .1em; }
#shopPanel .loja-selo-3d { right: 10px; bottom: 10px; padding: 5px 8px; color: #deecf6; border-color: #8aa9bf60; background: #121c26e8; opacity: 1; }
#shopPanel .loja-item > strong { margin-top: 14px; color: var(--ink); font: 600 23px/1.2 'Barlow Condensed', sans-serif; }
#shopPanel .loja-item > .loja-extra { color: #aebdca; font-size: 11px; letter-spacing: 0; }
#shopPanel .loja-item > em { color: #ffd998; font: 600 16px/1.4 'Barlow', sans-serif; font-variant-numeric: tabular-nums; margin-top: 10px; }
#shopPanel .loja-item.meu > em { color: #8bddad; font-size: 13px; }
#shopPanel .loja-reembolso { font-size: 10px; padding: 10px 0 0; }
#overlay.em-jogo .menu { padding-top: 0; }
#overlay.em-jogo .intro { display: none; }
#overlay.em-jogo .picker { background: transparent; }
/* Logo, quatro ações e a conta não cabem numa linha abaixo de ~1040 px (a
   horizontal de qualquer celular): as ações descem para a própria linha, em
   vez de empurrar o resto para fora da tela. */
@media (max-width: 1040px) {
  .menu .topo { flex-wrap: wrap; row-gap: 10px; }
  .menu-actions { order: 3; width: 100%; flex-wrap: wrap; gap: 10px 14px; }
}
@media (max-width: 850px) {
  .menu { padding-inline: 17px; }
  .menu .palco { grid-template-columns: minmax(0, 1fr); }
  .menu .botoes { grid-column: 1; }
  .menu .topo { gap: 16px; }
  .menu-actions { gap: 15px; }
  .menu .topo-conta { margin-left: auto; }
  .menu .viewport { --per-view: 2.15; }
  .menu .panel-head { align-items: flex-start; }
  .menu .panel-tools { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .menu .topo { flex-wrap: wrap; margin-bottom: 17px; }
  .menu-logo { width: 91px; height: 35px; }
  /* Retrato: as ações em duas colunas, cada botão com a largura da coluna. */
  .menu-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 12px; padding: 7px 4px 0; }
  .menu-actions > *, .menu-actions .install-nav .bv-loja { width: 100%; min-width: 0; }
  .menu-actions .bv-loja { padding-inline: 12px; font-size: 10px; gap: 6px; letter-spacing: .12em; }
  .menu .banner { aspect-ratio: 2.55; }
  .menu .panel-tools { width: 100%; order: 3; }
  .menu .panel-tools input { flex: 1; min-width: 100px; width: 0; font-size: 16px; }
  .busca-mapa { flex: 1; min-width: 100px; width: auto; }
  .menu .panel-tools .busca-mapa input { width: 100%; font-size: 16px; }
  .menu .panel-tools select { width: 138px; }
  .map-arrows, .menu .map-arrows { margin-left: auto; }
  .menu .panel-head .panel-title { font-size: 23px; gap: 6px 10px; }
  .menu .panel-head { row-gap: 13px; }
  .menu .viewport { --per-view: 1.14; height: 263px; }
  .menu .map-card { height: 257px; }
  .menu .map-shot img { height: 154px; }
  .menu .mapa-atual { flex-basis: 100%; }
  .menu .palco { gap: 16px; padding: 19px 12px 36px; }
  .menu #mapPanel { padding-inline: 12px; }
  #stageMap { height: 2.2em; white-space: normal; overflow-wrap: anywhere; }
  #stageDescription { height: 54px; }
  /* Jogar e Ajustes lado a lado cabem na largura: a arte encolhe com a tela. */
  .menu .botoes { justify-content: center; gap: 8px; }
  .menu #play, .menu #openSettings, .menu #openOnline { width: auto; height: auto; }
  /* Três botões lado a lado: a arte encolhe com a largura da tela. */
  .menu #play img, .menu #openSettings img, .menu #openOnline img { width: auto; height: clamp(28px, 9.4vw, 46px); }
  .menu .panel:not(.picker) { padding: 18px; }
  .menu #shopPanel { padding: 18px; }
}
@media (max-width: 360px) {
  .menu-actions { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 10px; }
  .menu-actions .bv-loja { padding-inline: 8px; gap: 5px; letter-spacing: .08em; }
  .menu-actions .bv-loja svg { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu *, .menu *::before, .menu *::after { transition: none !important; }
  .menu .panel-video { display: none; }
}

/* Dentro do app da Google Play ou da App Store (src/plataforma.js): sem a loja
   por Pix, sem a doação e sem o Instalar — item digital só pela loja do app. */
/* No app, a loja só aparece com a cobrança do Google Play ligada (data-play, src/main.js). */
html[data-app]:not([data-play]) #openShop, html[data-app] #openDonate, html[data-app] #installRow { display: none !important; }
html[data-play] .so-fora-do-brasil { display: none !important; }

/* Excluir a conta, no pé dos Ajustes (só com a conta entrada). */
.conta-excluir { margin-top: 18px; padding-top: 14px; border-top: 1px solid #ffffff14; display: grid; gap: 6px; justify-items: start; }
.conta-excluir .bv-sair { color: #ff9b8f; }
.conta-excluir-texto { margin: 0; font-size: 12px; color: #ffffff99; max-width: 60ch; }
.conta-excluir-texto:empty { display: none; }

/* ---------- Dificuldade: um botão e a lista ----------
   O botão amarelo do topo (botoes/bv-loja.css) abre a lista no tom escuro dos
   painéis; cada nível com a bolinha da cor do selo e o ✓ no escolhido. */
.dif-menu { position: relative; z-index: 6; flex: none; }
.dif-botao { gap: 8px; padding: 0 calc(16px - .16em) 0 16px; letter-spacing: .16em; }
.dif-botao svg { width: 14px; height: 14px; stroke-width: 2.6; transition: transform .18s; }
.dif-botao.aberto svg { transform: rotate(180deg); }
.dif-botao .dif-ponto { box-shadow: 0 0 0 2px #1a0f00; }
.dif-ponto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--d2, #ffb000); box-shadow: 0 0 8px var(--d2, #ffb000); }
.dif-ponto[hidden] { display: none; }
.dif-lista {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; margin: 0; padding: 6px; list-style: none;
  border: 1px solid #343c45; border-radius: 6px; background: #10151b; box-shadow: 0 16px 40px #000c, 0 0 0 1px #ffffff08 inset;
  animation: dif-abre .14s ease-out;
}
.dif-lista[hidden] { display: none; }
@keyframes dif-abre { from { opacity: 0; transform: translateY(-4px); } }
.dif-opcao {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 4px; background: none;
  color: #c3ccd4; cursor: pointer; font: 700 11px "Segoe UI", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; text-align: left;
}
.dif-opcao:hover, .dif-opcao:focus-visible { background: #ffffff0d; color: var(--ink); outline: none; }
.dif-opcao[aria-selected="true"] { color: var(--amber); background: #ffb00014; }
.dif-opcao[aria-selected="true"]::after { content: "✓"; margin-left: auto; color: var(--amber); font-size: 13px; letter-spacing: 0; }
.dif-opcao.dif-todos .dif-ponto { background: conic-gradient(#52d15a 0 25%, #f5c832 0 50%, #f58f2e 0 75%, #ea3d3d 0); box-shadow: none; }
.touch-mode .dif-opcao { height: 46px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .dif-lista { animation: none; } }

/* Rodapé no formato inclinado: o seletor de idioma e os botões das redes. */
.rodape-idioma { isolation: isolate; border: 0; background: none; }
.rodape-idioma::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); border-radius: 2px; background: #0a0d12; box-shadow: inset 0 0 0 1px #3d4752; transition: box-shadow .15s; }
.rodape-idioma:hover { border: 0; }
.rodape-idioma:hover::before { box-shadow: inset 0 0 0 1px var(--map-selected); }
.rodape-idioma:focus-within { box-shadow: none; }
.rodape-idioma:focus-within::before { box-shadow: inset 0 0 0 1px var(--map-selected), 0 0 0 3px #ffb00026; }
.rodape-redes a { position: relative; isolation: isolate; width: 46px; border: 0; border-radius: 0; background: none; }
.rodape-redes a::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); border-radius: 2px; background: #0a0d12; box-shadow: inset 0 0 0 1px #3d4752; transition: box-shadow .15s, background .15s; }
.rodape-redes a:hover { border: 0; }
.rodape-redes a:hover::before { background: #15100a; box-shadow: inset 0 0 0 1px var(--map-selected), 0 0 14px #ee8f3d33; }

/* ---------- Apelido da conta (src/apelido-ui.js) ----------
   Com a conta entrada, o campo do apelido fica só para leitura; embaixo, a
   troca grátis, o campo do nome novo e o aviso (que também serve a quem joga
   sem conta, quando um nome novo não vale). */
.apelido-conta { grid-column: 1 / -1; display: grid; gap: 8px; }
.apelido-conta:not(:has(> :not([hidden]))) { display: none; }
.apelido-conta-linha, .apelido-troca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.apelido-conta-linha[hidden], .apelido-troca[hidden], .apelido-aviso[hidden] { display: none; }
.apelido-conta-linha > span { font-size: 12px; line-height: 1.4; color: var(--muted); }
.apelido-conta .bv-loja { height: 30px; padding: 0 calc(16px - .14em) 0 16px; font-size: 10px; letter-spacing: .14em; }
.apelido-conta .bv-loja:disabled { color: #cfd8e0; cursor: default; }
.apelido-conta .bv-loja:disabled::before { filter: none; background: #0b0f15d9; box-shadow: inset 0 0 0 1px #ffffff3d; }
.apelido-conta .bv-loja:disabled::after { display: none; }
.apelido-conta .bv-sair { height: 30px; color: #ff9b8f; }
.apelido-troca .caixa-inclinada { flex: 1 1 150px; max-width: 240px; height: 34px; }
.apelido-aviso { margin: 0; font-size: 12px; line-height: 1.4; color: #9be29b; }
.apelido-aviso.erro { color: #ff9b8f; }
/* O apelido da conta, só leitura: sem cara de campo para digitar. */
input.apelido-da-conta { cursor: default; color: var(--amber, #ffb000) !important; }
.caixa-inclinada:has(> input.apelido-da-conta):hover::before { box-shadow: inset 0 0 0 1px #333d47; }