/* Apresentação compartilhada pela Cabine PC e pela segunda tela.
   A Cabine TV é a referência visual destes componentes. */
.coming-next-overlay,
.score-suspense-overlay,
.score-final-overlay {
    --show-yellow: var(--kp-yellow, #FF7A00);
    --show-blue: var(--kp-blue, #9C5BFF);
    position: absolute !important;
    inset: 0;
    z-index: 1600;
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-content: center;
    justify-items: center;
    padding: 5vw !important;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background: var(--kp-stage-gradient, radial-gradient(circle at 50% 46%, rgba(138, 63, 252,.28), rgba(15,18,25,.98) 64%)) !important;
    animation: show-fade-in .45s ease both;
}

.coming-next-overlay.fade-out { opacity: 0 !important; transform: scale(1.025) !important; transition: opacity .45s ease, transform .45s ease; }
.cn-stage-glow { position: absolute !important; inset: auto !important; width: min(72vw,1000px) !important; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(138, 63, 252,.24),transparent 66%) !important; animation: show-glow-pulse 2.2s ease-in-out infinite !important; pointer-events: none; }

.cn-badge,
.sf-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 clamp(18px,3vh,30px) !important;
    padding: 10px 17px !important;
    border: 1px solid rgba(255, 122, 0,.48) !important;
    border-radius: 999px !important;
    color: var(--show-yellow) !important;
    background: rgba(255, 122, 0,.07) !important;
    box-shadow: none !important;
    font: 900 clamp(.65rem,1vw,1rem)/1 'Montserrat',sans-serif !important;
    letter-spacing: .14em !important;
    -webkit-text-fill-color: currentColor !important;
    animation: show-badge-in .5s cubic-bezier(.2,.8,.2,1) both !important;
}

.cn-content { position: relative; z-index: 1; width: min(92vw,1100px); max-width: none; padding: 0; }
.cn-phrase-container { display: flex; flex-direction: column; align-items: center; gap: 0; }
.cn-text-lead,
.cn-text-trail {
    z-index: 1;
    max-width: 900px;
    margin: 0;
    color: #d8dbe5 !important;
    font: 700 clamp(1.3rem,3.1vw,3.2rem)/1.15 'Montserrat',sans-serif !important;
    text-shadow: none !important;
    animation: show-text-in .55s ease both !important;
}
.cn-text-trail:empty { display: none; }
.cn-singer-name {
    z-index: 1;
    display: block;
    max-width: 92vw;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    color: #fff !important;
    background: none !important;
    filter: none !important;
    font: 900 clamp(4rem,12vw,11rem)/.88 'Montserrat',sans-serif !important;
    letter-spacing: -.06em !important;
    text-transform: uppercase;
    text-shadow: 0 0 55px rgba(138, 63, 252,.4);
    -webkit-text-fill-color: currentColor !important;
    animation: show-name-arrive .7s cubic-bezier(.2,.8,.2,1) both !important;
}

.cn-equalizer { position: relative; z-index: 1; height: 54px !important; margin-top: clamp(24px,5vh,52px) !important; display: flex; align-items: end; justify-content: center; gap: 8px !important; }
.cn-bar { width: 8px !important; height: 22%; border-radius: 8px; background: var(--show-yellow) !important; box-shadow: none !important; animation: show-eq .8s ease-in-out infinite alternate !important; }
.cn-bar:nth-child(2),.cn-bar:nth-child(6){animation-delay:-.2s!important}.cn-bar:nth-child(3),.cn-bar:nth-child(5){animation-delay:-.45s!important}.cn-bar:nth-child(4){animation-delay:-.65s!important}
.cn-equalizer-fast .cn-bar { animation-duration: .38s !important; }

.score-suspense-overlay,
.score-final-overlay { display: flex !important; flex-direction: column; align-items: center; justify-content: center; }
.sf-ticker-value,
.sf-score-value {
    position: relative;
    z-index: 1;
    margin: 10px 0 !important;
    color: #fff !important;
    background: none !important;
    filter: none !important;
    font: 900 clamp(8rem,26vw,25rem)/.8 'Montserrat',sans-serif !important;
    text-shadow: 0 0 70px rgba(255, 122, 0,.3);
    -webkit-text-fill-color: currentColor !important;
}
.sf-ticker-value { font-size: clamp(6rem,19vw,18rem) !important; animation: show-score-tick .18s ease-in-out infinite alternate !important; }
.sf-score-value { animation: show-score-reveal .7s cubic-bezier(.2,.9,.2,1) both !important; }
.sf-singer { position: relative; z-index: 1; margin: 20px 0 0 !important; color: #fff !important; font: 800 clamp(1.5rem,3vw,3rem)/1 'Montserrat',sans-serif !important; animation: show-text-in .55s ease both !important; }
.sf-phrase { position: relative; z-index: 1; max-width: min(90vw,1050px); margin: 16px 0 0 !important; color: #d9dce6 !important; font: 700 clamp(1rem,2vw,2rem)/1.35 'Montserrat',sans-serif !important; font-style: normal !important; opacity: 1 !important; animation: show-text-in .55s ease both !important; }
.score-final-overlay .cn-equalizer { margin-top: clamp(24px,5vh,52px) !important; }

@keyframes show-fade-in { from { opacity: 0; } }
@keyframes show-glow-pulse { 50% { transform: scale(1.1); opacity: .72; } }
@keyframes show-badge-in { from { opacity: 0; transform: translateY(-18px) scale(.94); } }
@keyframes show-text-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes show-name-arrive { from { opacity: 0; transform: translateY(45px) scale(.9); } }
@keyframes show-eq { to { height: 100%; background: var(--show-bar-peak, #8A3FFC); } }
@keyframes show-score-tick { to { transform: scale(1.025); opacity: .8; } }
@keyframes show-score-reveal { from { opacity: 0; transform: scale(1.65) rotate(-4deg); } }

/* Chamadas das funcionalidades: aparecem apenas na transição entre shows. */
.interaction-ad-overlay {
    position: absolute;
    inset: 0;
    z-index: 42;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(34px, 6vw, 92px);
    color: #f8f7fb;
    background:
        radial-gradient(circle at 18% 22%, rgba(255,79,216,.25), transparent 34%),
        radial-gradient(circle at 82% 76%, rgba(138,63,252,.3), transparent 38%),
        linear-gradient(145deg, #0d0914 0%, #171024 52%, #090b14 100%);
    isolation: isolate;
}
.interaction-ad-glow {
    position: absolute;
    width: min(72vw, 920px);
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 45px, rgba(255,255,255,.025) 46px 47px);
    animation: interaction-ad-orbit 8s linear infinite;
}
.interaction-ad-content { position: relative; z-index: 1; width: min(920px, 92%); text-align: center; animation: interaction-ad-enter .7s cubic-bezier(.2,.9,.2,1) both; }
.interaction-ad-icon { margin-bottom: clamp(12px, 2vh, 22px); font-size: clamp(3.2rem, 8vw, 7rem); filter: drop-shadow(0 12px 24px rgba(0,0,0,.34)); }
.interaction-ad-eyebrow { color: #ffb83d; font: 800 clamp(.72rem, 1.6vw, 1.18rem)/1.2 'Montserrat',sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.interaction-ad-content h2 { max-width: 900px; margin: clamp(10px,2vh,20px) auto 0; color: #fff; font: 900 clamp(2.1rem, 6vw, 5.7rem)/1.02 'Montserrat',sans-serif; letter-spacing: -.045em; text-wrap: balance; }
.interaction-ad-content p { max-width: 780px; margin: clamp(14px,2.5vh,26px) auto 0; color: #d9d3e2; font: 500 clamp(1rem, 2.2vw, 1.8rem)/1.38 'Inter',sans-serif; text-wrap: balance; }
.interaction-ad-access { width: fit-content; max-width: 100%; margin: clamp(20px,4vh,42px) auto 0; padding: 11px 18px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(255,184,61,.42); border-radius: 999px; color: #fff3d8; background: rgba(255,122,0,.11); font: 750 clamp(.82rem,1.5vw,1.08rem)/1.2 'Inter',sans-serif; letter-spacing: .03em; }
.interaction-ad-access i { color: #ffb83d; }
.interaction-ad-progress { position: absolute; z-index: 2; right: clamp(20px,4vw,54px); bottom: clamp(18px,4vh,46px); left: clamp(20px,4vw,54px); height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.interaction-ad-progress i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ff7a00,#ff4fd8,#8a3ffc); transform-origin: left; animation: interaction-ad-progress var(--interaction-ad-duration,8s) linear both; }
@keyframes interaction-ad-enter { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@keyframes interaction-ad-orbit { to { transform: rotate(360deg) scale(1.04); } }
@keyframes interaction-ad-progress { to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
    .coming-next-overlay,.score-suspense-overlay,.score-final-overlay,.cn-stage-glow,.cn-badge,.sf-badge,.cn-text-lead,.cn-text-trail,.cn-singer-name,.sf-ticker-value,.sf-score-value,.sf-singer,.sf-phrase,.cn-bar { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .interaction-ad-content,.interaction-ad-glow { animation: none !important; }
}

/* Cabine PC em modo janela: dimensiona a apresentacao pelo palco, nao pela
   viewport inteira. Fullscreen, segunda tela e layouts mobile ficam intactos. */
@media (min-width: 1025px) {
    .cabin-pc-page #playerContainer:not(:fullscreen):not(.is-native-fullscreen) :is(.coming-next-overlay,.score-suspense-overlay,.score-final-overlay) {
        padding: 24px 150px 104px 24px !important;
    }

    .cabin-pc-page #playerContainer:not(:fullscreen):not(.is-native-fullscreen) .cn-content {
        width: min(100%, 760px);
    }

    .cabin-pc-page #playerContainer:not(:fullscreen):not(.is-native-fullscreen) :is(.cn-badge,.sf-badge) {
        margin-bottom: clamp(10px, 2.4cqh, 18px) !important;
        padding: 8px 14px !important;
        font-size: clamp(.58rem, 1.25cqw, .78rem) !important;
    }

    .cabin-pc-page #playerContainer:not(:fullscreen):not(.is-native-fullscreen) :is(.cn-text-lead,.cn-text-trail) {
        max-width: 680px;
        font-size: clamp(1.05rem, 3.7cqw, 2rem) !important;
    }

    .cabin-pc-page #playerContainer:not(:fullscreen):not(.is-native-fullscreen) .cn-singer-name {
        max-width: 100%;
        margin-top: 8px !important;
        font-size: clamp(2.6rem, 10cqw, 5.4rem) !important;
        line-height: .9 !important;
    }

    .cabin-pc-page #playerContainer:not(:fullscreen):not(.is-native-fullscreen) :is(.sf-ticker-value,.sf-score-value) {
        font-size: clamp(5rem, 18cqw, 9rem) !important;
    }

    .cabin-pc-page #playerContainer:not(:fullscreen):not(.is-native-fullscreen) .sf-singer {
        margin-top: 10px !important;
        font-size: clamp(1.1rem, 3.2cqw, 1.8rem) !important;
    }

    .cabin-pc-page #playerContainer:not(:fullscreen):not(.is-native-fullscreen) .sf-phrase {
        max-width: 680px;
        margin-top: 10px !important;
        font-size: clamp(.9rem, 2.4cqw, 1.35rem) !important;
    }

    .cabin-pc-page #playerContainer:not(:fullscreen):not(.is-native-fullscreen) .cn-equalizer,
    .cabin-pc-page #playerContainer:not(:fullscreen):not(.is-native-fullscreen) .score-final-overlay .cn-equalizer {
        height: 38px !important;
        margin-top: clamp(14px, 3cqh, 24px) !important;
        gap: 6px !important;
    }

    .cabin-pc-page #playerContainer:not(:fullscreen):not(.is-native-fullscreen) .cn-bar {
        width: 6px !important;
    }

    .cabin-pc-page #playerContainer:not(:fullscreen):not(.is-native-fullscreen) .ranking-ticker {
        right: 150px;
        bottom: 84px;
    }
}