/* Live — folha de estilo única.
   Fundo escuro de propósito: a página é para se ver vídeo. */

:root {
  --fundo:      #0e0f13;
  --painel:     #171921;
  --painel-2:   #1e212b;
  --borda:      #2a2e3a;
  --texto:      #e8eaf0;
  --texto-fraco:#9aa1b1;

  /* As duas cores do emblema. O vermelho é o do clube medido no ficheiro do
     emblema; o azul de lá (#003D8A) é escuro de mais para texto sobre fundo
     escuro, por isso o que se usa é uma versão clareada dele. */
  --clube:      #d6162b;
  --clube-azul: #003d8a;
  --destaque:   #5b9bff;

  --directo:    #ff4757;
  --ok:         #2ed573;
  --mau:        #ff6b6b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--destaque); }

.envolve { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ── Cabeçalho ───────────────────────────────────────── */

header {
  border-bottom: 1px solid var(--borda);
  background: rgba(14,15,19,.92);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(8px);
}

header .envolve {
  display: flex; align-items: center; gap: 14px;
  height: 58px;
}

.emblema { height: 34px; width: auto; display: block; }

.marca { font-weight: 700; font-size: 17px; letter-spacing: -.2px; }
.marca b { color: var(--clube); }

.espaco { flex: 1; }

/* Bolha "ao vivo" — só aparece quando há transmissão. */
.pastilha {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--clube); color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
}
.ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff; animation: pulsar 1.8s ease-in-out infinite;
}
@keyframes pulsar { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.espectadores {
  color: var(--texto-fraco); font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.btn-texto {
  background: none; border: none; cursor: pointer;
  color: var(--texto-fraco); font: inherit; font-size: 13.5px;
  padding: 6px 2px;
}
.btn-texto:hover { color: var(--texto); }

/* ── Palco do directo ────────────────────────────────── */

.palco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
  margin: 20px 0 8px;
}

.video-caixa {
  background: #000; border: 1px solid var(--borda); border-radius: 12px;
  overflow: hidden; aspect-ratio: 16 / 9;
}
.video-caixa iframe, .chat-caixa iframe { width: 100%; height: 100%; border: 0; display: block; }

.chat-caixa {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 12px;
  overflow: hidden; min-height: 340px;
}

.legenda-jogo {
  color: var(--texto-fraco); font-size: 14px; margin: 0 0 18px;
}
.legenda-jogo strong { color: var(--texto); }

/* ── Cartão do próximo jogo ──────────────────────────── */

.cartao-proximo {
  background: linear-gradient(160deg, var(--painel-2), var(--painel));
  border: 1px solid var(--borda); border-radius: 14px;
  padding: 34px 24px; text-align: center; margin: 28px 0;
}
.etiqueta {
  color: var(--texto-fraco); font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
}
.data-grande { font-size: 26px; font-weight: 700; margin: 10px 0 4px; }
.horas-duplas {
  font-size: 19px; color: var(--destaque); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.adversario { font-size: 17px; margin: 12px 0 6px; }
.contagem { color: var(--texto-fraco); font-size: 14px; }

/* ── Secções e tabelas ───────────────────────────────── */

section { margin: 30px 0; }

h2 {
  font-size: 13px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--texto-fraco);
  margin: 0 0 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--borda);
}

.rolavel { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th {
  text-align: left; color: var(--texto-fraco); font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  padding: 8px 10px; border-bottom: 1px solid var(--borda);
}
td { padding: 11px 10px; border-bottom: 1px solid var(--borda); }
tr:last-child td { border-bottom: 0; }

.horas { color: var(--destaque); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fuso { color: var(--texto-fraco); font-size: 12px; }
.data-cel { white-space: nowrap; }

.selo {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  font-size: 11.5px; font-weight: 600;
  background: var(--painel-2); color: var(--texto-fraco);
  border: 1px solid var(--borda);
}
.selo.sem-transmissao { color: #ffa502; border-color: #4a3a1a; }

tr.nos td { background: rgba(74,158,255,.09); font-weight: 600; }

.vazio {
  color: var(--texto-fraco); font-size: 14px;
  padding: 22px 4px; text-align: center;
}

footer {
  border-top: 1px solid var(--borda); margin-top: 40px; padding: 18px 0 30px;
  color: var(--texto-fraco); font-size: 12.5px; text-align: center;
}

/* ── Ecrã de entrada ─────────────────────────────────── */

.centrado { min-height: 100vh; display: grid; place-items: center; padding: 20px; }

.caixa-entrada {
  width: 100%; max-width: 400px;
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: 14px; padding: 30px 26px;
}
.emblema-entrada { display: block; height: 74px; margin: 0 auto 18px; }

.caixa-entrada h1 { font-size: 21px; margin: 0 0 6px; text-align: center; }
.caixa-entrada .sub { text-align: center; }
.caixa-entrada .sub { color: var(--texto-fraco); font-size: 14px; margin: 0 0 22px; }

label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--texto-fraco); margin: 0 0 6px;
}

input {
  width: 100%; padding: 11px 13px; margin-bottom: 15px;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px;
  font: inherit;
}
input:focus { outline: none; border-color: var(--destaque); }

input.codigo {
  text-align: center; font-size: 27px; letter-spacing: 11px;
  font-weight: 700; padding: 13px;
}

.btn {
  width: 100%; padding: 12px; border: 0; border-radius: 8px;
  background: var(--destaque); color: #06121f;
  font: inherit; font-weight: 700; cursor: pointer;
}
.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:disabled { opacity: .5; cursor: default; }

.aviso {
  padding: 11px 13px; border-radius: 8px; font-size: 13.5px;
  margin-bottom: 15px;
}
.aviso.mau { background: rgba(255,71,87,.12); border: 1px solid rgba(255,71,87,.35); }
.aviso.bom { background: rgba(46,213,115,.10); border: 1px solid rgba(46,213,115,.32); }

.alternar { text-align: center; margin-top: 17px; font-size: 13.5px; color: var(--texto-fraco); }
.alternar button { background: none; border: 0; color: var(--destaque); cursor: pointer; font: inherit; }

/* ── Ecrãs estreitos ─────────────────────────────────── */

@media (max-width: 860px) {
  .palco { grid-template-columns: 1fr; }
  .chat-caixa { min-height: 300px; }
  .data-grande { font-size: 22px; }
}


/* ── Ficha do jogador ────────────────────────────────── */

.ficha {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 26px;
  align-items: end;
  background:
    radial-gradient(120% 140% at 12% 100%, rgba(214,22,43,.22), transparent 60%),
    linear-gradient(160deg, var(--painel-2), var(--painel));
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 22px 26px 0;
  overflow: hidden;
}

/* O retrato tem fundo transparente e assenta na base do cartão de propósito,
   como um cromo. Daí o `align-items: end` e o padding de baixo a zero. */
.ficha-foto { position: relative; }
.ficha-foto img { width: 100%; display: block; }

/* O número atrás da cabeça, grande e esbatido. É decoração: quem lê com um
   leitor de ecrã já tem o número no texto ao lado. */
.numero-grande {
  position: absolute; inset: auto 0 34% 0;
  text-align: center;
  font-size: 190px; font-weight: 800; line-height: 1;
  color: rgba(255,255,255,.055);
  letter-spacing: -8px;
  pointer-events: none; user-select: none;
}

.ficha-lado { padding-bottom: 26px; }

.ficha-nome { font-size: 30px; margin: 8px 0 6px; letter-spacing: -.4px; }

.ficha-sub { color: var(--texto-fraco); font-size: 14px; margin: 0 0 20px; }
.ficha-sub strong { color: var(--texto); }

.numeros { display: flex; flex-wrap: wrap; gap: 26px; }
.numero { display: flex; flex-direction: column; gap: 2px; }
.numero .n {
  font-size: 27px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.numero .n.verde { color: var(--ok); }
.numero .rot {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--texto-fraco); font-weight: 600;
}

/* Barra de forma: uma letra por jogo, do mais recente para trás. */
.forma { display: inline-flex; gap: 5px; }
.f {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  font-size: 13px; font-weight: 800;
}
.f.v { background: rgba(46,213,115,.16); color: var(--ok);   border: 1px solid rgba(46,213,115,.4); }
.f.e { background: rgba(154,161,177,.14); color: var(--texto-fraco); border: 1px solid var(--borda); }
.f.d { background: rgba(255,107,107,.14); color: var(--mau); border: 1px solid rgba(255,107,107,.4); }

/* ── Golómetro ───────────────────────────────────────── */

.golometro {
  margin-top: 14px; text-align: center;
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: 14px; padding: 22px 20px 24px;
}
.g-numero {
  font-size: 76px; font-weight: 800; line-height: 1.05;
  margin: 4px 0 2px; font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.golometro.seco .g-numero { color: var(--texto-fraco); }
.golometro.marcou .g-numero { color: var(--clube); }
.g-frase { font-size: 15px; color: var(--texto); min-height: 22px; }
.g-seca { font-size: 12.5px; color: var(--texto-fraco); margin-top: 8px; }

/* ── Resultados ──────────────────────────────────────── */

.res-letra { font-weight: 800; }
.res-letra.v { color: var(--ok); }
.res-letra.e { color: var(--texto-fraco); }
.res-letra.d { color: var(--mau); }

.marcador { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sem-marcador { color: var(--texto-fraco); font-size: 13px; }

.golos-jogo { color: var(--texto-fraco); font-size: 13px; }
.golos-jogo.marcou { color: var(--clube); font-weight: 700; }

/* A linha do próximo jogo, destacada no calendário. */
tr.a-seguir td { background: rgba(214,22,43,.10); }
tr.a-seguir td:first-child { box-shadow: inset 3px 0 0 var(--clube); }

.rodape-fraco { display: block; margin-top: 5px; opacity: .7; }

/* ── Ecrãs estreitos, parte nova ─────────────────────── */

@media (max-width: 860px) {
  .ficha { grid-template-columns: 1fr; padding: 22px 20px 0; }
  .ficha-foto { max-width: 260px; margin: 0 auto; order: 2; }
  .ficha-lado { order: 1; padding-bottom: 6px; }
  .numero-grande { font-size: 150px; }
  .g-numero { font-size: 60px; }
}


/* ── Jornada e nota de ausência ──────────────────────── */

.jornada {
  color: var(--texto-fraco); font-size: 12px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase; margin-top: 6px;
}

.jornada-cel {
  color: var(--texto-fraco); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* A linha onde a segunda volta começa. Uma risca mais forte por cima, como
   num calendário impresso. */
tr.volta-nova td { border-top: 2px solid var(--borda); }

.nota-fora {
  margin: 16px 0 0; font-size: 13.5px; color: var(--texto-fraco);
  border-left: 2px solid var(--clube); padding-left: 11px;
}

.fora-jogo { color: var(--texto-fraco); font-size: 13px; font-style: italic; }

.dg { font-variant-numeric: tabular-nums; }

/* ── Avisos antes dos jogos ──────────────────────────── */

.cartao-avisos {
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: 14px; padding: 20px 22px 22px;
}
.avisos-texto { margin: 0 0 14px; color: var(--texto-fraco); font-size: 14px; }

.avisos-botoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* O botão da folha de estilo ocupa a largura toda, que faz sentido num
   formulário de entrada e nenhum aqui. */
.btn-curto { width: auto; padding: 10px 22px; }
.btn.btn-desligar { background: var(--painel-2); color: var(--texto); border: 1px solid var(--borda); }

.avisos-estado { margin: 12px 0 0; font-size: 13.5px; color: var(--texto-fraco); }
.avisos-estado.bom { color: var(--ok); }
.avisos-estado.mau { color: var(--mau); }

/* As instruções por telemóvel. São o essencial desta secção e não uma nota de
   rodapé, por isso têm o peso de uma caixa e não de um parágrafo cinzento. */
.instrucoes {
  background: var(--painel-2); border: 1px solid var(--borda);
  border-left: 3px solid var(--destaque);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;
  font-size: 13.5px; line-height: 1.65; color: var(--texto-fraco);
}
.instrucoes strong { color: var(--texto); }
.instrucoes ol { margin: 10px 0 0; padding-left: 20px; }
.instrucoes li { margin-bottom: 7px; }

/* ── Histórias ───────────────────────────────────────── */

.cartao-historia {
  background: linear-gradient(160deg, var(--painel-2), var(--painel));
  border: 1px solid var(--borda); border-radius: 14px;
  padding: 22px 24px;
}
.hist-titulo { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.hist-corpo { margin: 0; font-size: 15px; line-height: 1.65; }
.hist-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 16px;
}
.hist-meta { color: var(--texto-fraco); font-size: 12.5px; }


/* ── Com quanta antecedência ─────────────────────────── */

.quando { margin-bottom: 16px; }

.quando-rotulo {
  font-size: 12px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 9px;
}

.quando-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Botões e não um <select>: são cinco opções curtas e vê-se logo qual está
   escolhida, sem ter de abrir nada. Num telemóvel também são maiores para o
   dedo do que uma lista pendente. */
.quando-opcoes button {
  padding: 8px 14px; border-radius: 999px;
  background: var(--painel-2); color: var(--texto-fraco);
  border: 1px solid var(--borda);
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.quando-opcoes button:hover:not(:disabled) { color: var(--texto); }
.quando-opcoes button[aria-pressed="true"] {
  background: rgba(214,22,43,.16); border-color: var(--clube); color: var(--texto);
  font-weight: 600;
}
.quando-opcoes button:disabled { opacity: .45; cursor: default; }

/* ── Palpites ────────────────────────────────────────── */

.cartao-palpite {
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: 12px; padding: 20px 22px;
}

.palpite-jogo { font-size: 16px; font-weight: 600; margin: 8px 0 18px; }

.palpite-form { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

.palpite-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* O `label` é block por omissão nesta folha, por causa do ecrã de entrada.
   Aqui os rótulos ficam ao lado das caixas e não por cima. */
.palpite-equipa {
  display: inline-block; margin: 0;
  color: var(--texto-fraco); font-size: 13.5px; font-weight: 600;
  min-width: 92px;
}
.palpite-linha .palpite-equipa:last-child { min-width: 0; color: var(--texto); }

.palpite-traco { color: var(--texto-fraco); font-size: 18px; }

/* As caixas do marcador. Largura fixa e números tabulares: são dois dígitos
   e a linha não deve dançar enquanto se escreve. */
.palpite-linha input {
  width: 68px; margin: 0; padding: 9px 10px;
  text-align: center; font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.palpite-regras {
  margin: 16px 0 0; color: var(--texto-fraco);
  font-size: 12.5px; line-height: 1.6;
}
.palpite-regras strong { color: var(--texto); }

.sub-titulo {
  font-size: 14px; font-weight: 600; color: var(--texto);
  margin: 26px 0 10px;
}

/* A linha de quem está a ler. Mesma ideia do `tr.nos` na classificação. */
tr.eu td { background: rgba(214,22,43,.10); }

.acertou { color: var(--ok); font-size: 12.5px; font-weight: 600; }

/* ── O adepto do ano ─────────────────────────────────── */

.seccao-nota {
  margin: 0 0 12px; color: var(--texto-fraco);
  font-size: 12.5px; line-height: 1.6;
}

/* ── Caixinha de sugestões ───────────────────────────── */

.campo { margin-bottom: 12px; }

textarea.campo {
  width: 100%; padding: 11px 13px;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px;
  font: inherit; resize: vertical;
}
textarea.campo:focus { outline: none; border-color: var(--destaque); }
.campo-alto { min-height: 96px; }

.sug-minhas { margin-top: 20px; }
.sug-minhas ul { list-style: none; margin: 10px 0 0; padding: 0; }
.sug-minhas li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 0; border-top: 1px solid var(--borda);
  font-size: 13.5px;
}
.sug-corpo { color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; }

.selo.estado-aprovada  { color: var(--ok); border-color: rgba(46,213,115,.4); }
.selo.estado-rejeitada { color: var(--texto-fraco); }
.selo.estado-lida      { color: var(--destaque); border-color: rgba(91,155,255,.4); }