/* Música-tema do menu inicial (assets/js/login/musica.js): controle no canto de baixo — mudo + volume. 2026-10-10. */
.music {
    position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: .45rem;
    padding: .35rem .75rem .35rem .35rem; border-radius: 999px;
    background: linear-gradient(180deg, rgba(38, 28, 18, .94), rgba(17, 12, 8, .94)); border: 1px solid #6b5230;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 8px 22px rgba(0, 0, 0, .55);
}
.music-btn {
    display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: var(--gold-hi, #f2cf6b);
    background: radial-gradient(circle at 50% 35%, #3d2c18, #140e09 75%); border: 1px solid var(--gold, #d4a937); cursor: pointer;
    transition: filter .15s, transform .15s;
}
.music-btn:hover { filter: brightness(1.2); transform: translateY(-1px); }
.music-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.music[data-state="mudo"] .music-btn, .music[data-state="pausado"] .music-btn { color: #a3957a; border-color: #6b5230; }
.music-eq { display: flex; align-items: flex-end; gap: 2px; width: 14px; height: 14px; }
.music-eq i { flex: 1; height: 100%; border-radius: 1px; background: var(--gold-hi, #f2cf6b); transform-origin: 50% 100%; transform: scaleY(.3); }
.music[data-state="mudo"] .music-eq i, .music[data-state="pausado"] .music-eq i { background: #6b5d47; }
.music-vol {
    --fill: 45%; width: 96px; height: 18px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.music-vol::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--gold, #d4a937) var(--fill), rgba(255, 255, 255, .15) var(--fill)); }
.music-vol::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--gold, #d4a937) var(--fill), rgba(255, 255, 255, .15) var(--fill)); }
.music-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--gold-hi, #f2cf6b); border: 2px solid #1a1208; box-shadow: 0 0 6px rgba(242, 207, 107, .6); }
.music-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--gold-hi, #f2cf6b); border: 2px solid #1a1208; }
/* celular: só o botão redondo (o volume fica nas teclas do aparelho) — a barra inteira cobria o fim do formulário */
@media (max-width: 600px) {
    .music { right: 10px; bottom: 10px; padding: 0; background: none; border: 0; box-shadow: none; }
    .music-btn { width: 44px; height: 44px; box-shadow: 0 6px 16px rgba(0, 0, 0, .6); }
    .music-eq, .music-vol { display: none; }
}