* {
    box-sizing: border-box
}
/* 
body {
    margin: 0;
    background: #0a101b;
    color: #f4f7fb;
    font-family: system-ui, sans-serif
} */

button,
input {
    font: inherit
}

button {
    cursor: pointer;
    border: 0;
    border-radius: 10px;
    padding: 13px 16px;
    font-weight: 750
}

input {
    background: #0a111d;
    border: 1px solid #263449;
    border-radius: 9px;
    padding: 12px;
    color: #fff;
    width: 100%
}

.display-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 3vw
}

.scoreboard {
    width: min(1500px, 100%);
    background: #080d16;
    border: 1px solid #263449;
    border-radius: 20px
}

.display-header,
.display-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 3%;
    color: #9aa9bc;
    font-weight: 800
}

.period-label {
    margin-left: auto
}

.teams {
    display: grid;
    grid-template-columns: 1fr .9fr 1fr;
    align-items: center;
    padding: 3%;
    gap: 2%
}

.team {
    text-align: center;
    min-width: 0
}

.team-name {
    font-size: clamp(18px, 3vw, 42px);
    font-weight: 900
}

.score {
    font-size: clamp(90px, 20vw, 280px);
    font-weight: 950;
    line-height: 1.1
}

.team-home .score {
    color: #4e9cff
}

.team-away .score {
    color: #6df2a5
}

.team-caption,
.clock-label,
.clock-status {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .15em
}

.center-panel {
    text-align: center;
    border-left: 1px solid #263449;
    border-right: 1px solid #263449;
    padding: 20px 4%
}

.clock {
    font-size: clamp(42px, 8vw, 100px);
    font-weight: 900;
    font-variant-numeric: tabular-nums
}

.clock-status {
    color: #6df2a5
}

.display-footer {
    justify-content: space-between;
    border-top: 1px solid white
}

.control-page {
    padding: 24px;
    overflow: auto
}

.control-shell {
    max-width: 1180px;
    margin: auto
}

.control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px
}

.control-header h1 {
    margin: 0
}

.eyebrow {
    color: #9aa9bc;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .18em
}

.header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.connection-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    color: #9aa9bc
}

.live-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6df2a5
}

.room-chip {
    margin-left: auto;
    border: 1px solid #263449;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px
}

.control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.control-card {
    background: #121b2a;
    border: 1px solid #263449;
    border-radius: 16px;
    padding: 22px;
    min-width: 0
}

.team-control label {
    display: block;
    margin-bottom: 8px
}

.mini-score,
.period-value {
    text-align: center;
    font-size: 76px;
    font-weight: 950;
    margin: 12px 0;
    color: #f3f6fb
}

.button-row {
    display: flex;
    gap: 9px
}

.button-row>* {
    flex: 1;
    min-width: 0
}

.score-button {
    background: #214c7d;
    color: white;
    font-size: 20px
}

.primary {
    background: #6df2a5;
    color: white
}

.secondary {
    background: #253246;
    color: #f3f6fb
}

.danger {
    background: #582631;
    color: #ffdfe2
}

.full {
    width: 100%;
    margin-top: 10px
}

.control-clock {
    text-align: center;
    font-size: 70px;
    font-weight: 900;
    color: #f3f6fb
}

.clock-buttons {
    margin: 15px 0
}

.settings-row {
    display: grid;
    grid-template-columns: 1fr 80px auto;
    gap: 10px;
    align-items: center
}

.settings-row label {
    font-size: 13px
}

.bottom-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px
}

@media(max-width:650px) {
    .control-page {
        padding: 14px
    }

    .control-header {
        flex-wrap: wrap
    }

    .header-actions {
        width: 100%
    }

    .header-actions button {
        flex: 1
    }

    .control-grid {
        grid-template-columns: 1fr
    }

    .teams {
        grid-template-columns: 1fr 1fr
    }

    .center-panel {
        grid-column: 1/-1;
        grid-row: 1;
        border: 0;
        border-bottom: 1px solid #263449
    }

    .score {
        font-size: clamp(80px, 23vw, 140px)
    }

    .bottom-actions {
        flex-direction: column
    }

    .settings-row {
        grid-template-columns: 1fr 75px
    }

    .settings-row button {
        grid-column: 1/-1
    }
}

/* Banner verde estilo CBB (sem o escudo central)
   Uso:
   <div class="banner">
     <div class="banner__tag">Texto</div>
     <span class="banner__line banner__line--left"></span>
     <span class="banner__line banner__line--right"></span>
   </div>
*/

/* :root {
  --banner-green-dark: #035000;
  --banner-green-mid: #0b6b0b;
  --banner-green-light: #2fa042;
  --banner-yellow: #f5c42c;
  --banner-line: #c9b92a;
} */
/* .banner {
  position: relative;
  width: 100%;
  max-width: 1600px;
  aspect-ratio: 1600 / 160;
  overflow: hidden;

  background: url("logo/Placar_CBI.png") center / contain no-repeat;
} */
/* 
.banner {
    position: relative; 
    width: 100%;
    max-width: 1600px;
    aspect-ratio: 1600 / 120;
    overflow: hidden;
} */



/* Scoreboard para OBS (Browser Source)
   Tamanho sugerido na fonte de navegador: 1920 x 144 (proporção 1600:120)
   Não carregue junto com o banner-cbb.css: as classes banner__line / banner__tag
   aqui têm outro papel (placar e relógio). */
/* Scoreboard OBS - banner em tela cheia com imagem de fundo
   Cada elemento é uma "caixa" posicionada em % do banner.
   Ajuste left / top / width / height de cada um para casar com a arte. */

* { box-sizing: border-box; margin: 0; padding: 0; }


/* ---------- Banner: ocupa toda a tela ---------- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* Fundo escuro para destacar o placar */
    overflow: hidden;
}

/* O container principal centraliza o placar na vertical e horizontal */
.banner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start; /* Move o placar totalmente para a esquerda */
    align-items: center;         /* Mantém centralizado na vertical */
}

/* O painel do placar mantém a proporção 16:9 (FHD / 4K) */
.painel-placar {
    width: 100vw; 
    max-width: 100%;       
    aspect-ratio: 16 / 9; 
    background: url('logo/placar.png') center / 100% no-repeat;
    box-sizing: border-box; 
    position: relative; /* Permite posicionar o relógio e pontos perfeitamente por cima */
}


/* ---------- Base comum das caixas ---------- */

.banner__img {
  position: absolute;
  top: 10%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.img1 {
    transform: translateX(-50%); /* Garante a centralização perfeita do texto */
    position: absolute;
    left: 36%;   
    top: 10%;   
    width: 10%; 
}

.img2 {
    transform: translateX(-50%); /* Garante a centralização perfeita do texto */
    position: absolute;
    left: 78%;
    top: 10%;
    width: 10%;
}
.placar__img {
    transform: translateX(-50%); /* Garante a centralização perfeita do texto */
    position: absolute;
    left: 13%;
    top: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.text__primary { 
    font-family: system-ui, sans-serif;
    font-size: 5vw;    /* Tamanho responsivo: cresce junto com a resolução (FHD/4K) */
    color: #ffffff;
    font-weight: bold; 
}

/* ---------- Relógio ---------- */
.clock__cbb {

    transform: translateX(-50%); /* Garante a centralização perfeita do texto */
    position: absolute;
    left: 13%;         /* Centraliza na horizontal */
}

/* ---------- Período ---------- */
.periodo_cbb {
    transform: translateX(-50%); /* Garante a centralização perfeita do texto */
    position: absolute;
    left: 25%;         /* Centraliza na horizontal */
}

/* ---------- Placares ---------- */
.score_1_cbb {
    position: absolute;
    left: 48%;         /* Centraliza na horizontal */
    transform: translateX(-50%);
}
.score_2_cbb {
    position: absolute;
    left: 66%; 
    transform: translateX(-50%);
}

/* ---------- Imagens (logo e times) ---------- */
.banner__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* mostrar: a largura volta da esquerda para a direita, com fade-in rápido no início */
.banner {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition:
    clip-path .8s linear,
    opacity .16s linear;          /* 20% de .8s: aparece nos primeiros 20% */
}

/* ocultar: a borda direita corre para a esquerda; o fade começa com 20% da largura restante */
.banner.is-hidden {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  pointer-events: none;
  transition:
    clip-path .8s linear,
    opacity .16s linear .64s;     /* começa em 80% (.64s) e termina junto com o clip */
}
#period {
  flex-direction: column;      /* empilha número e OT */
  gap: 0;
}
#period .period__num { line-height: 1; }

#period.is-ot .period__num { font-size: 5vw; }   /* número um pouco menor para caber o OT */
#period .period__ot {
    transform: translateX(-50%); /* Garante a centralização perfeita do texto */
    position: absolute;
    left: 140%;
    top: 61%;
    font-size: 1.5vw;
    line-height: 1;
    letter-spacing: .06em;
}
/* 1ª imagem: logo central | 2ª: time | 3ª: time */
/* (nth-of-type conta todas as <div> irmãs: clock=1, home=2, logo=3, away=4, time1=5, time2=6) */
/* .banner__img:nth-of-type(3) { left: 44%;  width: 12%; }
.banner__img:nth-of-type(5) { left: 69%;  width: 10%; }
.banner__img:nth-of-type(6) { left: 81%;  width: 10%; } */