/* =========================================================
   MENU — barra de baixo, botão de perfil e grade do "Mais"
   ========================================================= */

.menu {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  justify-content: space-around;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(255, 253, 248, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -6px 20px rgba(122, 31, 61, 0.12);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.menu::-webkit-scrollbar { display: none; }
.menu button {
  flex: 1;
  min-width: 58px;
  max-width: 120px;
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: inherit;
  font-size: 0.7rem;
  color: var(--texto-suave);
  background: none;
  border: none;
  border-radius: 12px;
  padding: 6px 2px;
  cursor: pointer;
}
.menu button span { font-size: 1.35rem; line-height: 1.2; filter: grayscale(0.6); opacity: 0.75; }
.menu button[aria-current="page"] { color: var(--vinho); font-weight: 600; background: var(--rosa-claro); }
.menu button[aria-current="page"] span { filter: none; opacity: 1; }

/* No modo menu, abre espaço para a barra e sobe o botão de música */
.modo-menu .rodape { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
.modo-menu .botao-musica { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.modo-menu .secao { padding-top: 40px; }

.botao-perfil {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 46;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(135deg, var(--rosa), var(--vinho));
  color: #fff;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: var(--sombra);
  cursor: pointer;
}

.grade-paginas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bloco-pagina {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: inherit;
  color: var(--texto);
  background: rgba(255, 253, 248, 0.94);
  border: none;
  border-radius: 20px;
  padding: 18px 10px 14px;
  box-shadow: var(--sombra);
  cursor: pointer;
}
.bloco-pagina:active { transform: scale(0.97); }
.bloco-pagina-emoji { font-size: 2rem; line-height: 1.2; }
.bloco-pagina strong { color: var(--vinho); font-size: 1rem; }
.bloco-pagina small { color: var(--texto-suave); font-size: 0.75rem; font-style: italic; }
.bloco-pagina .bolinha { top: 8px; right: 10px; }

/* Início: o "Tô com saudade" fica logo abaixo do contador (sem espaço vazio no meio) */
.modo-menu #secao-contador { padding-bottom: 4px; }
.modo-menu #secao-contador .subtitulo { margin-bottom: 0; }
.modo-menu .secao-saudade { padding-top: 16px; }
.modo-menu .secao-convite:not([hidden]) + .secao-novidades { padding-top: 16px; }