/* tempo_dez_segundos.css */

/* Classe que desfoca o texto em inglês */
.en-blurred {
    filter: blur(6px);
    opacity: 0.3;
    transition: filter 0.4s ease, opacity 0.4s ease;
    user-select: none;
    pointer-events: none; /* Impede o clique enquanto estiver desfocado */
}

/* Container do Mini Relógio (Fixo no canto inferior direito) */
#miniClockContainer {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 55px;
    height: 55px;
    background-color: #151515;
    border-radius: 50%;
    display: none; /* Só aparece quando está contando */
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.8);
    border: 2px solid #333;
    z-index: 9999;
}

/* O círculo animado que reduz de forma anti-horária */
#miniClockCircle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* O conic-gradient será manipulado pelo JS */
    background: conic-gradient(#666 100%, transparent 0);
    transform: scaleX(-1); /* O pulo do gato: Inverte o elemento para reduzir no sentido anti-horário */
}

/* O centro do relógio (furo do meio) */
#miniClockInner {
    position: absolute;
    width: 43px;
    height: 43px;
    background-color: #1a1a1a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* O texto do cronômetro */
#miniClockText {
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
}

/* Adicione no FINAL do arquivo tempo_dez_segundos.css */

/* Efeito de Alto Relevo para o destaque ativo durante a pausa */
/* Substitua este bloco no final do arquivo tempo_dez_segundos.css */

/* Efeito de Alto Relevo (Mais Claro e Brilhante) para o destaque ativo */
.phrase-block-highlight {
    transform: scale(1.03) !important; /* Mantém o zoom para frente */
    background: rgba(255, 255, 255, 0.18) !important; /* Deixa o fundo visivelmente mais claro */
    border-color: rgba(255, 215, 0, 1) !important; /* Borda 100% amarela e acesa */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 215, 0, 0.4) !important; /* Brilho amarelo projetado */
    z-index: 10 !important;
    position: relative !important;
    opacity: 1 !important; /* Trava a opacidade no máximo para impedir que qualquer outro script escureça a caixa */
}