/* style.css - CORREÇÃO DE TAMANHO E ANIMAÇÃO */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%; height: 100%;
    background-color: #000000;
    font-family: Arial, sans-serif;
    overflow: hidden;
    color: #ffffff;
}

/* OVERLAY DE AVISO */
#announcement-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #000000 !important;
    z-index: 10000 !important;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5vw;
}

#announcement-overlay:not(.hidden) { display: flex !important; }

#announcement-content {
    color: #FFFF00 !important;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    width: 100%;
}

.text-huge   { font-size: 16vw !important; } /* Reduzido de 18 para não vazar */
.text-big    { font-size: 11vw !important; }
.text-medium { font-size: 8vw !important; }
.text-small  { font-size: 5vw !important; }

/* LAYOUT PRINCIPAL */
.display-container {
    width: 100%; height: 100vh;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}

#mics-iframe { width: 100%; height: 100vh; border: none; display: none; }

/* RELÓGIO (Ajustado para não vazar) */
#clock-wrapper { 
    position: absolute; 
    top: 3vh; 
    left: 3vw; 
    max-width: 45vw; /* Impede que ocupe a tela toda */
}
#clock { 
    font-size: 7.5vw; /* Reduzido para caber */
    font-weight: 900; 
    font-family: 'Courier New', monospace; 
    white-space: nowrap; 
}
#clock-label { font-size: 3vw; color: #cccccc; }

/* TÉRMINO */
#service-time-wrapper { 
    position: absolute; 
    top: 3vh; 
    right: 3vw; 
    text-align: right; 
    max-width: 45vw;
}
#service-time { 
    font-size: 7.5vw; 
    color: #0099ff; 
    font-weight: 900; 
    font-family: 'Courier New', monospace; 
}
#service-time-label { font-size: 3vw; color: #cccccc; }

/* CONTAGEM CENTRAL */
#main-countdown-wrapper {
    position: absolute; top: 60%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; width: 95%;
}
#countdown-timer { 
    font-size: 25vw; 
    font-weight: 900; 
    color: #00ff00; 
    font-family: 'Courier New', monospace; 
    line-height: 0.8;
}

#countdown-label {
    font-size: 5vw !important; /* Aumentado para melhor visibilidade à distância */
    color: #ffffff;
    margin-bottom: 2vh; /* Espaço entre o texto e o cronômetro */
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
}

/* --- ANIMAÇÃO DE PISCAR (CORRIGIDA) --- */
#countdown-timer.expired { 
    color: #ff0000 !important; 
    animation: blinker 0.8s linear infinite !important; 
}

@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

/* MODO STANDBY (Relógio Gigante Central) */
body.standby-mode #service-time-wrapper,
body.standby-mode #main-countdown-wrapper,
body.standby-mode #clock-label {
    display: none !important;
}
body.standby-mode #clock-wrapper {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 95vw;
}

#standby-logo, #standby-header {
    display: none !important;
}

body.standby-mode #clock { font-size: 20vw; } /* Ajustado de 25 para 20 para não vazar */
body.standby-mode #standby-header {
    display: block !important;
    font-size: 5vw;
    color: #0099ff;
    font-weight: 900;
    margin-bottom: 10px;
}
body.standby-mode #standby-logo {
    display: block !important;
    width: 25vw; /* Tamanho da logo no centro */
    max-width: 400px;
    margin: 20px auto;
    height: auto;
}

/* Garante que no modo normal (contagem), o relógio não arraste a logo junto */
body:not(.standby-mode) #standby-logo, 
body:not(.standby-mode) #standby-header {
    display: none !important;
}

#fullscreen-btn, #admin-btn { position: absolute; bottom: 2vh; opacity: 0.3; z-index: 100; text-decoration: none; }
#fullscreen-btn { right: 2vw; background: none; border: 1px solid white; color: white; padding: 10px; }
#admin-btn { left: 2vw; font-size: 30px; }
.hidden { display: none !important; }

/* Animação de piscar para o aviso */
.blink-announcement {
    animation: blink-warning 1s infinite;
}

@keyframes blink-warning {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

/* Garante que o texto do aviso ocupe o máximo da tela */
#announcement-content {
    width: 100%;
    padding: 0 5vw;
    word-wrap: break-word;
    color: #FFFF00 !important; /* Amarelo */
    font-weight: 900;
}