/* --- Reset Básico e Fontes --- */
body, html {
    margin: 0;
    padding: 0;
    background-color: #000; /* A "parede" preta */
    color: white;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    /* (NOVO) Centra o placar no meio do ecrã */
    display: flex;
    justify-content: center;
    align-items: center;
}

.font-russo {
    font-family: 'Russo One', sans-serif;
}

/* --- Container Principal --- */
/* Removemos a regra .container geral para evitar conflitos */

/* (MODIFICADO) Define os limites do placar */
#scoreboard-container {
    width: 95vw;
    max-height: 95vh;
    aspect-ratio: 16 / 9; /* Força o formato 16:9 */
    
    background-color: #080808; 
    border: 3px solid #333; /* A borda delimitadora */
    border-radius: 15px; /* Cantos arredondados */
    
    /* Estas 3 linhas trabalham juntas: */
    display: flex; 
    flex-direction: column; /* <-- ESTA ERA A LINHA EM FALTA */
    justify-content: space-between; 
    
    padding: 20px;
    box-sizing: border-box;
    align-items: center;
}

/* Ecrã de Entrada (Sempre centrado) */
#room-entry-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    padding: 20px;
    box-sizing: border-box;
}

/* (NOVO) O wrapper do logótipo, com o estilo da app */
#logo-wrapper {
    background-color: #fff;
    border-color: #fe5000;
    border-width: 2px;
    border-style: solid;
    border-radius: 25px;
    padding: 10px;
    margin-bottom: 25px;
    
    /* Dimensões que estavam no #entry-logo */
    width: 80%;
    max-width: 400px;
    box-sizing: border-box; /* Importante para o padding não estragar a largura */
}

/* (MODIFICADO) O logótipo agora apenas preenche o wrapper */
#entry-logo {
    width: 100%; /* Preenche o wrapper */
    height: auto; /* Mantém a proporção */
    display: block; /* Remove espaço extra por baixo da imagem */
}

/* (MODIFICADO) Ajustamos a margem do H2 para ficar bem com o logo */
#room-entry-container h2 { 
    font-size: clamp(18px, 3vw, 50px); 
    margin-top: 0; /* Remove margem superior */
    margin-bottom: 30px; /* Reduz ligeiramente a margem inferior */
}

#room-code-input { font-size: clamp(20px, 3vw, 45px); padding: 10px; width: 80%; max-width: 450px; text-align: center; background-color: #333; color: white; border: 2px solid #555; border-radius: 10px; }
#room-code-button { font-size: clamp(16px, 2vw, 30px); padding: 15px 30px; background-color: #fe5000; color: white; border: none; border-radius: 10px; margin-top: 20px; cursor: pointer; }
#room-code-button:hover { background-color: #ff7b42; } /* Cor de hover mais clara */
#error-message { margin-top: 15px; color: red; font-size: clamp(14px, 1.5vw, 22px); }

/* (MODIFICADO) Estilos do Copyright (Pintado ao fundo) */
#copyright-footer {
    position: absolute; /* Pinta no fundo do ecrã */
    bottom: 30px; /* Dá 30px de espaço do fundo */
    left: 0;
    right: 0;
    text-align: center;
}
.footer-text {
    color: #888;
    font-size: 12px; /* Aumentado de 10px */
}


/* --- Zona Superior: Relógio e Posse --- */
#main-display {
    text-align: center;
    width: 100%;
}
#main-time {
    font-size: clamp(60px, 10vw, 150px); 
    color: white;
}
#main-time.low-time { color: red; }

#possession-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.arrow {
    font-size: clamp(30px, 5vw, 70px);
    color: rgba(255, 0, 0, 0.2);
    flex: 1;
}
.arrow.active {
    color: red; 
}
#arrow-home { text-align: right; padding-right: 15px; }
#arrow-guest { text-align: left; padding-left: 15px; }

#period {
    font-size: clamp(20px, 3vw, 50px);
    color: #00D1FF;
    padding: 0 20px;
    min-width: 150px;
}

/* --- Zona Central: Placar --- */
.score-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    flex-grow: 1; 
    align-items: flex-start;
    padding: 20px 0;
}
#scoreboard-container.game-inactive .score-row {
    opacity: 0.6;
}

.team-container {
    flex: 1;
    display: flex;
    flex-direction: column; 
    align-items: center;
    max-width: 45%;
    padding: 0 10px;
    box-sizing: border-box;
}

/* 1. Timeouts (Bolinhas) */
.timeout-dots-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 20px;
    margin-bottom: 10px; 
}
.timeout-dot {
    width: clamp(10px, 1.2vw, 16px);
    height: clamp(10px, 1.2vw, 16px);
    border-radius: 50%;
    background-color: #333;
    margin: 0 5px;
}
.timeout-dot.used { background-color: #fe5000; }

/* 2. Nome da Equipa */
.team-name {
    font-size: clamp(20px, 3vw, 50px);
    margin-bottom: 10px; 
    text-align: center;
    word-break: break-word;
}

/* 3. Pontuação */
.score-box {
    background-color: #111;
    border-radius: 15px;
    padding: 10px 20px;
    font-size: clamp(60px, 10vw, 140px);
    text-align: center;
    border: 3px solid #111;
    transition: transform 0.1s ease-out, border-color 0.3s;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px; 
}
@keyframes score-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.score-box.flash { animation: score-pop 0.3s ease-out; }
.score-box.winner {
    border-color: #fe5000;
    box-shadow: 0 0 20px #fe5000;
}

/* 4. Bónus */
.bonus-text {
    visibility: hidden; 
    color: red;
    font-size: clamp(14px, 2vw, 28px);
    height: 25px; 
    margin-bottom: 5px; 
}
.bonus-text.visible { visibility: visible; }
.bonus-text.flashing { animation: bonus-flash 1s infinite alternate; }
@keyframes bonus-flash {
    from { opacity: 0.2; }
    to { opacity: 1; }
}

/* 5. Faltas (Bolinhas) */
.fouls-container {
    display: flex;
    flex-direction: row;
    height: 20px;
    align-items: center;
    justify-content: center;
}
.foul-dot {
    width: clamp(12px, 1.5vw, 20px);
    height: clamp(12px, 1.5vw, 20px);
    border-radius: 50%;
    background-color: #333; 
    margin: 0 5px;
}
.foul-dot.active {
    background-color: red; 
}
.foul-dot.warning {
    background-color: yellow; 
}


/* --- Zona Inferior: Shot Clock --- */
.shot-clock-box {
    background-color: #111;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
}
#scoreboard-container.game-inactive .shot-clock-box {
    opacity: 0.6;
}
.shot-clock-label {
    font-size: clamp(12px, 1.5vw, 22px);
    color: white;
}
.shot-clock-time {
    font-size: clamp(30px, 5vw, 70px);
    color: #fe5000;
}
.shot-clock-time.low-time { color: red; }


/* --- Overlays --- */
#timeout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
#timeout-team-name { font-size: clamp(24px, 4vw, 60px); color: white; margin-bottom: 20px; padding: 0 20px; text-align: center; }
#timeout-time { font-size: clamp(80px, 12vw, 180px); color: #fe5000; }

#end-game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99;
    padding: 20px;
    box-sizing: border-box;
}
#end-game-modal { width: 100%; max-width: 800px; background-color: #111; border: 2px solid #fe5000; border-radius: 15px; padding: 30px; box-sizing: border-box; text-align: center; }
#end-game-title { font-size: clamp(24px, 3vw, 50px); color: #fe5000; margin-bottom: 20px; }
.end-game-score-row { display: flex; justify-content: space-around; align-items: center; margin-bottom: 20px; }
.end-game-team { flex: 1; padding: 0 10px; }
.end-game-team .team-name { font-size: clamp(18px, 2.5vw, 40px); }
.end-game-team .score-box { font-size: clamp(50px, 8vw, 100px); border: none; padding: 5px; background: none; }
#end-game-winner { font-size: clamp(20px, 2.8vw, 45px); color: lime; margin-bottom: 30px; }
#partial-scores-title { font-size: clamp(16px, 2vw, 30px); color: #888; margin-bottom: 10px; }
#partial-scores-container { max-height: 150px; overflow-y: auto; background-color: #000; border-radius: 5px; padding: 10px; }
.partial-score-row { display: flex; justify-content: space-between; font-size: clamp(14px, 1.5vw, 22px); padding: 5px; border-bottom: 1px solid #333; }
.partial-score-row:last-child { border-bottom: none; }
/* --- (NOVO) Botão de Tela Cheia --- */
#fullscreen-button {
    position: fixed; /* Fica fixo no ecrã */
    top: 15px;
    right: 15px;
    z-index: 1001; /* Mais alto que os overlays (100) */
    
    background-color: #222;
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    opacity: 0.3; /* Fica discreto */
    transition: opacity 0.2s;
}
#fullscreen-button:hover {
    opacity: 1; /* Fica vísivel ao passar o rato */
    background-color: #333;
}