/* ────────────────────────────────────────────────────────────────
   Ad-Gate — tela de liberação que ocupa o lugar do player.

   Herda a caixa .dooplay-protetor-embed do tema, então o layout da
   página não muda quando o gate entra ou sai.

   O fundo é a mesma imagem que o player grande usa (o plugin resolve a
   URL e a entrega em --agc-fundo). Sobre ela vão camadas escuras
   pesadas: a imagem serve de ambiente, nunca de concorrência com o
   texto. O miolo ainda ganha um painel próprio, para que título, aviso
   e botão continuem legíveis sobre qualquer quadro — inclusive os
   claros, que existem e quebram contraste se a máscara for tímida.
   ──────────────────────────────────────────────────────────────── */

.agc {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4%, 40px);
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    overflow-y: auto;

    /* Ordem das camadas, de cima para baixo: brilho quente da marca,
       véu radial (abre um pouco no centro, fecha nas bordas),
       escurecimento geral e, por último, a imagem do conteúdo.
       Sem imagem, --agc-fundo vem 'none' e sobra o gradiente sobre o
       fundo sólido — a tela continua correta. */
    background-color: #06070a;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 138, 0, .08), transparent 62%),
        radial-gradient(ellipse 125% 105% at 50% 44%, rgba(6, 7, 10, .58) 0%, rgba(6, 7, 10, .90) 56%, rgba(6, 7, 10, .98) 100%),
        linear-gradient(rgba(6, 7, 10, .52), rgba(6, 7, 10, .52)),
        var(--agc-fundo, none);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Painel do conteúdo: é ele que garante o contraste do texto. */
.agc__miolo {
    position: relative;
    width: min(100%, 460px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: clamp(28px, 5vw, 40px) clamp(22px, 4.5vw, 34px) clamp(24px, 4.5vw, 34px);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 22px;
    background: rgba(10, 11, 15, .66);
    box-shadow:
        0 40px 80px -34px rgba(0, 0, 0, .95),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Onde houver suporte, o painel vira vidro: deixa a imagem viva atrás
   sem devolver ruído ao texto. Onde não houver, o fundo opaco acima já
   resolve — por isso a opacidade só baixa dentro do @supports. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .agc__miolo {
        background: rgba(10, 11, 15, .46);
        -webkit-backdrop-filter: blur(20px) saturate(1.35);
        backdrop-filter: blur(20px) saturate(1.35);
    }
}

/* Selo: diz o estado antes de qualquer leitura. Anel fino, sem peso. */
.agc__selo {
    width: 44px;
    height: 44px;
    margin: 0 0 16px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 157, 46, .28);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 138, 0, .18), rgba(255, 138, 0, .05));
    color: #ffb257;
}
.agc__selo svg { width: 20px; height: 20px; display: block; }

.agc__marca {
    margin: 0 0 9px;
    background: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 157, 46, .92);
}

/* O tema pinta fundo em h2 dentro do single, com especificidade maior
   que uma classe solta — daí o !important, restrito a este h2. O resto
   do reset evita herdar padding/borda/sombra da mesma regra. */
.agc .agc__titulo {
    margin: 0 0 12px;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none;
    background-color: transparent !important;
    background-image: none;
    font-size: clamp(1.4rem, 3.4vw, 1.9rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.022em;
    text-wrap: balance;
    color: #fff;
}

/* Degradê no texto: o título perde o ar de bloco chapado sem ganhar
   efeito. Fica no @supports porque, sem background-clip, o
   text-fill-color transparente apagaria o título. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .agc .agc__titulo {
        background-image: linear-gradient(180deg, #fff 26%, rgba(255, 255, 255, .64) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.agc__sub {
    margin: 0 0 24px;
    background: none;
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .66);
    max-width: 38ch;
}
.agc__sub[hidden] { display: none; }

/* aviso de bloqueador / erro de retorno */
.agc__aviso {
    width: 100%;
    margin: 0 0 18px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 157, 46, .34);
    border-radius: 13px;
    background: rgba(255, 157, 46, .09);
    text-align: left;
    font-size: .8125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .74);
}
.agc__aviso strong { display: block; margin-bottom: 3px; color: #ffb257; font-size: .84375rem; }
.agc__aviso[hidden] { display: none; }

/* Botão sem brilho: a cor sozinha já o separa do painel. A elevação é
   sombra neutra, não halo colorido, e o filete claro no topo é bisel —
   dá material à peça sem espalhar luz. */
.agc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 14px 22px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffa128 0%, #ff8a00 100%);
    color: #16110a;
    font-size: .96875rem;
    font-weight: 700;
    letter-spacing: -.006em;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        0 6px 16px -8px rgba(0, 0, 0, .7),
        inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: filter .18s ease, transform .12s ease;
}
.agc__btn:hover  { filter: brightness(1.06); color: #16110a; }
.agc__btn:active { transform: translateY(1px); }
.agc__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.agc__btn[hidden] { display: none; }

/* Linha de tranquilização abaixo do botão: o que acontece depois. */
.agc__nota {
    margin: 13px 0 0;
    background: none;
    font-size: .78125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .44);
}
.agc__nota[hidden] { display: none; }

.agc__carregando {
    margin: 0;
    min-height: 52px;
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: .875rem;
    color: rgba(255, 255, 255, .54);
}
.agc__carregando::before {
    content: "";
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .16);
    border-top-color: #ff9d2e;
    border-radius: 50%;
    animation: agc-gira .7s linear infinite;
}
.agc__carregando[hidden] { display: none; }

.agc__novo {
    margin-top: 15px;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 157, 46, .9);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.agc__novo:hover { color: #ffb257; }
.agc__novo[hidden] { display: none; }

@keyframes agc-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .agc__carregando::before { animation: none; }
    .agc__btn { transition: none; }
}

/* Em telas baixas o miolo rola dentro da própria caixa e encolhe. */
@media (max-height: 460px) {
    .agc { align-items: flex-start; }
    .agc__miolo { padding: 20px 20px 22px; border-radius: 18px; }
    .agc__selo { width: 36px; height: 36px; margin-bottom: 11px; }
    .agc__selo svg { width: 17px; height: 17px; }
    .agc .agc__titulo { font-size: 1.15rem; }
    .agc__sub { margin-bottom: 15px; font-size: .875rem; }
    .agc__btn { min-height: 46px; }
    .agc__nota { display: none; }
}