/* Todos os botões no estilo "painel de nave" da tela inicial (01/11). Só aparência. */
.btn { --mb-bg: linear-gradient(135deg, #7c5cff, #4f46e5); --mb-deep: #2e1f8a; --mb-glow: rgba(124, 92, 255, .7); }
.btn:not(.ghost):not(.round):not(.mb):not(.mb-launch) {
  position: relative; overflow: visible;
  border: 2px solid rgba(255, 255, 255, .28); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  border-radius: 20px 9px 20px 9px;
  background: radial-gradient(1.5px 1.5px at 14% 32%, #fff, transparent), radial-gradient(1px 1px at 70% 24%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 72%, #fff, transparent), radial-gradient(1px 1px at 38% 80%, #fff, transparent),
    linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 55%), var(--mb-bg);
  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, filter .14s;
}
.btn:not(.ghost):not(.round):not(.mb):not(.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);
}
.btn:disabled { filter: grayscale(.6); }
/* Cores por tipo */
.btn.primary:not(.mb-launch) { --mb-bg: linear-gradient(180deg, #ffe066, #ff9d1c 60%, #ff7a1c); --mb-deep: #a64b00; color: #3b1d00 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important; }
.btn.gold { --mb-bg: linear-gradient(180deg, #fde047, #f59e0b); --mb-deep: #a14a06; color: #3b1d00 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important; }
.btn.danger { --mb-bg: linear-gradient(135deg, #ff6b8a, #e11d48); --mb-deep: #881337; }
.btn.gt-menu:not(.mb) { --mb-bg: linear-gradient(135deg, #f59e0b, #ef4444); --mb-deep: #8a2b0c; }
.btn.ms-menu:not(.mb) { --mb-bg: linear-gradient(135deg, #a855f7, #14b8a6); --mb-deep: #4c1d95; }
/* Ouvir e Cantar do exercício: Ouvir azul, Cantar laranja de lançamento */
#ex-listen { --mb-bg: linear-gradient(135deg, #22c7e8, #2f6bff); --mb-deep: #173a99; }
#ex-stop { --mb-bg: linear-gradient(135deg, #ff6b8a, #e11d48); --mb-deep: #881337; }
.actions .btn:nth-child(odd):not(:only-child) { border-radius: 9px 20px 9px 20px; }

/* Voltar e botões redondos: escotilha */
.btn.round {
  border: 3px solid rgba(255, 255, 255, .75) !important; color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .6), rgba(255, 255, 255, .1) 55%), linear-gradient(135deg, #7c5cff, #3b2bb5) !important;
  box-shadow: 0 4px 0 #22186b, 0 0 14px rgba(124, 92, 255, .6), inset 0 -3px 5px rgba(0, 0, 0, .3) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  transition: transform .14s cubic-bezier(.3, 1.6, .5, 1), box-shadow .14s;
}
.btn.round:active { transform: translateY(3px) scale(.95); box-shadow: 0 1px 0 #22186b, 0 0 10px rgba(124, 92, 255, .6) !important; }

/* Barra de baixo: cada ícone numa escotilha; a aba ativa acende em dourado */
.tabs button i {
  display: grid !important; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: 18px !important; line-height: 1;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, .06) 60%), rgba(10, 6, 40, .35);
  border: 2px solid rgba(255, 255, 255, .3); box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .3);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), border-color .2s, box-shadow .2s;
}
.tabs button { gap: 1px !important; padding-top: 5px !important; font-size: 13px !important; }
.tabs button.active::before { display: none; }
.tabs button.active i {
  transform: translateY(-4px) scale(1.12) !important; border-color: #fde047;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), rgba(255, 216, 77, .35) 60%), #f59e0b;
  box-shadow: 0 0 14px rgba(253, 224, 71, .8), 0 3px 0 #a14a06; animation: mbBob 2.6s ease-in-out infinite;
}
@keyframes mbBob { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
.tabs button:active i { transform: scale(.85); }

@media (prefers-reduced-motion: reduce) { .tabs button.active i { animation: none; } }