/* quando o header estiver oculto, o iframe ocupa a tela toda */
.header-hidden {
    display: none;
}

html,
body {
    height: 100%;
    background: #000;
    color: #fff;
}

/* iframe ocupa o restante da tela abaixo do header */
.stage {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0;
    width: 100%;
    top: var(--header-top, 120px);
    height: calc(100% - var(--header-top, 120px));
}

.lock-scroll {
    overflow: hidden;
}

/* Overlay quase invisível que captura o 1º toque */
#audioUnlock {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.01);
    /* imperceptível visualmente */
}

#audioUnlockBtn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

.btnConfirmarMusicaModal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-radius: .6rem;
    border: 1px solid transparent;
    text-decoration: none;
    font: 600 0.95rem/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    cursor: pointer;
    transition: transform .04s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    user-select: none;

    background: #198754;
    color: #fff;
}

.btnConfirmarMusicaModal:hover {
    background: #198754a1;
    color: #fff;
}

.btnNegarMusicaModal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-radius: .6rem;
    border: 1px solid transparent;
    text-decoration: none;
    font: 600 0.95rem/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    cursor: pointer;
    transition: transform .04s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    user-select: none;

    background: #f80808dc;
    color: #fff;
}

.btnNegarMusicaModal:hover {
    background: #f8080886;
    color: #fff;
}

.botoesModalMusica {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.botoesModalMusica a {
    flex: 1;
    min-width: 120px;
    text-align: center;
}

.pulse {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (min-width: 769px) {
    #audioUnlock {
        display: none !important;
    }
}