/* ================================================================
   A BARRA DE CIMA AGRUPADA (V70)

   Antes: até DOZE botões lado a lado, todos do mesmo tamanho, cada um
   com uma palavra que só quem já conhecia entendia. No computador
   estourava a largura da tela; no celular virava um paredão de ícones.

   Agora: quatro coisas — Analisar, Montar jogos, Meus jogos e Mais —
   e o que sumiu da barra foi para dentro dos menus, COM uma linha
   explicando cada item.

   Esta folha carrega por último e ajusta o que a régua dos botões
   (botoes-v65.css) tinha nivelado. Nada foi apagado das folhas antigas:
   tirando este arquivo, a barra volta ao que era.
   ================================================================ */

.menu-topo { position: relative; flex: 0 0 auto; }
.menu-topo > summary {
  list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  position: relative;
}
.menu-topo > summary::-webkit-details-marker { display: none; }
/* A seta que diz "isto abre". Some no celular, onde o espaço é curto. */
.menu-topo > summary::after {
  content: "⌄"; margin-left: 2px; font-size: 13px; color: var(--muted, #746b7f);
  line-height: 1; margin-top: -4px;
}
.menu-topo[open] > summary {
  background: var(--purple-soft, #f2e8f8);
  border-color: color-mix(in srgb, var(--purple, #6f2aa8) 35%, var(--line, #e9e2ef));
}
.menu-topo[open] > summary::after { content: "⌃"; margin-top: 2px; }

/* A bolinha de recado do suporte, na tampa do menu "Mais". Sem ela, o
   aviso de resposta ficaria escondido lá dentro. */
.menu-topo-bolinha {
  position: absolute; top: 5px; right: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--green, #2e9b65);
  box-shadow: 0 0 0 3px var(--surface, #fff);
}

.menu-topo-popover {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 90;
  width: 320px; padding: 9px;
  border: 1px solid var(--line, #e9e2ef); border-radius: 18px;
  /* Fundo CHEIO, nao translucido: com 97% o titulo da pagina aparecia
     atras do menu e atrapalhava a leitura dos itens. */
  background: var(--surface, #fff);
  box-shadow: 0 24px 70px rgba(34, 17, 47, .18);
}
/* O último menu abre alinhado à direita, senão sai da tela. */
.menu-topo-popover.direita { left: auto; right: 0; }

.menu-topo-titulo {
  display: block; padding: 8px 10px 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .13em;
  color: var(--muted, #746b7f);
}

.menu-topo-item {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 11px; align-items: center;
  width: 100%; padding: 10px; border: 0; border-radius: 12px;
  background: transparent; text-align: left; text-decoration: none;
  color: var(--ink, #21182c); font: inherit; cursor: pointer;
  transition: background-color .14s ease;
}
.menu-topo-item:hover { background: var(--surface-3, #f3eef7); }
.menu-topo-item > i {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: var(--purple-soft, #f2e8f8); color: var(--purple, #6f2aa8);
  font-style: normal; font-size: 15px; font-weight: 900;
}
.menu-topo-item > span { display: grid; gap: 3px; min-width: 0; }
.menu-topo-item b { font-size: 13px; font-weight: 800; }
.menu-topo-item small { font-size: 11px; color: var(--muted, #746b7f); line-height: 1.4; }
.menu-topo-item .support-badge { position: static; }

/* ---------- computador ---------- */
@media (min-width: 701px) {
  /* Com quatro itens, a barra volta a caber numa linha só - era ela que
     estourava a largura e escondia botão na borda. */
  .top-actions { flex-wrap: nowrap; }
  .menu-topo > summary { height: 44px; }
}

/* ---------- celular ---------- */
@media (max-width: 700px) {
  /* A grade do celular (mobile-v35/V35) distribui colunas iguais. Com
     quatro itens em vez de doze, cada um fica largo e legível. */
  .top-actions,
  .top-actions.with-account,
  .top-actions.with-admin { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .menu-topo { width: 100%; }
  .menu-topo > summary {
    width: 100% !important; min-height: 48px; padding: 5px 3px !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; border-radius: 11px; line-height: 1;
  }
  .menu-topo > summary::after { display: none; }
  .menu-topo > summary small { display: block !important; font-size: 8px; }
  /* O menu ocupa a largura da tela, como o das loterias já faz. */
  .menu-topo-popover,
  .menu-topo-popover.direita {
    position: fixed; top: 118px; left: 12px; right: 12px; width: auto;
    max-height: calc(100vh - 140px); overflow: auto; padding: 10px;
  }
  .menu-topo-item { padding: 12px 10px; }
  .menu-topo-item b { font-size: 14px; }
  .menu-topo-item small { font-size: 12px; }
}

/* Sem loteria escolhida (a Central), a barra tem menos itens ainda. */
.game-theme-portal .top-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (min-width: 701px) { .game-theme-portal .top-actions { display: flex; } }