/* Tela inicial: botões com cara de painel de nave (01/11). Só aparência. */
#menu .menu-buttons .mb, #menu .menu-buttons .mb-launch {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid rgba(255, 255, 255, .28); color: #fff; overflow: visible;
  border-radius: 22px 10px 22px 10px; /* cantos de nave, não de app de empresa */
  background: var(--mb-bg); text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 5px 0 var(--mb-deep), 0 8px 18px rgba(5, 2, 25, .45);
  transition: transform .14s cubic-bezier(.3, 1.6, .5, 1), box-shadow .14s;
}
/* Pontinhos de estrela no fundo de cada botão */
#menu .menu-buttons .mb::after, #menu .menu-buttons .mb-launch::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .55;
  background:
    radial-gradient(1.5px 1.5px at 18% 30%, #fff, transparent), radial-gradient(1px 1px at 72% 22%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 86% 70%, #fff, transparent), radial-gradient(1px 1px at 40% 78%, #fff, transparent),
    linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 55%);
}
#menu .menu-buttons .mb:active, #menu .menu-buttons .mb-launch:active { transform: translateY(4px) scale(.98); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 1px 0 var(--mb-deep), 0 3px 8px rgba(5, 2, 25, .45); }
#menu .menu-row .mb:first-child { rotate: -1.2deg; border-radius: 10px 22px 10px 22px; }
#menu .menu-row .mb:last-child { rotate: 1.2deg; }

/* Ícone dentro de uma escotilha redonda que balança */
#menu .mb-ico {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: -6px 0; border-radius: 50%;
  font-style: normal; font-size: 18px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 60%), rgba(10, 6, 40, .35);
  border: 2px solid rgba(255, 255, 255, .55); box-shadow: 0 0 12px var(--mb-glow), inset 0 -2px 4px rgba(0, 0, 0, .3);
  animation: mbBob 2.6s ease-in-out infinite;
}
#menu .menu-row .mb:last-child .mb-ico, #menu .mb-guitar .mb-ico { animation-delay: -1.3s; }
@keyframes mbBob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }
#menu .mb span { position: relative; z-index: 1; }

/* Cor própria de cada botão */
#menu .mb-fire { --mb-bg: linear-gradient(135deg, #ff7a45, #e8366b); --mb-deep: #8f1d45; --mb-glow: rgba(255, 122, 69, .8); }
#menu .mb-mic { --mb-bg: linear-gradient(135deg, #22c7e8, #2f6bff); --mb-deep: #173a99; --mb-glow: rgba(34, 199, 232, .8); }
#menu .mb-stage { --mb-bg: linear-gradient(135deg, #a855f7, #14b8a6); --mb-deep: #4c1d95; --mb-glow: rgba(168, 85, 247, .8); }
#menu .mb-guitar { --mb-bg: linear-gradient(135deg, #f59e0b, #ef4444); --mb-deep: #8a2b0c; --mb-glow: rgba(245, 158, 11, .8); }
#menu .mb-rank { --mb-bg: linear-gradient(135deg, #facc15, #f97316); --mb-deep: #9a4a08; --mb-glow: rgba(250, 204, 21, .8); }
#menu .mb-gear { --mb-bg: linear-gradient(135deg, #6366f1, #8b5cf6); --mb-deep: #312e81; --mb-glow: rgba(139, 92, 246, .8); }

/* Botão Jogar: cápsula de lançamento com rastro de foguete */
#menu .mb-launch {
  --mb-bg: linear-gradient(180deg, #ffe066, #ff9d1c 60%, #ff7a1c); --mb-deep: #a64b00; --mb-glow: rgba(255, 216, 77, .9);
  color: #3b1d00; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); border-radius: 999px 26px 999px 26px; letter-spacing: 1px; text-transform: uppercase;
  animation: mbGlow 2s ease-in-out infinite;
}
#menu .mb-launch .mb-ico { width: 40px; height: 40px; font-size: 22px; background: rgba(255, 255, 255, .4); border-color: rgba(255, 255, 255, .8); animation: mbRocket 1.4s ease-in-out infinite; }
@keyframes mbRocket { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(3px, -3px) rotate(4deg); } }
@keyframes mbGlow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 14px rgba(255, 200, 60, .65)); } }
/* Brilho que passa pelo botão de tempos em tempos */
#menu .mb-trail { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
#menu .mb-trail::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent); animation: mbShine 3.2s ease-in-out infinite; }
@keyframes mbShine { 0%, 60% { left: -60%; } 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) { #menu .mb-ico, #menu .mb-launch, #menu .mb-trail::before { animation: none; } }