/* ZedSpot — player de TV.
   Escrito para um browser que pode ser de 2018: nada de variaveis CSS em
   propriedades criticas, nada de grid, nada de fontes variaveis obrigatorias.
   A paleta e o design system do ZedSpot (Design.md §4). */

@font-face {
  font-family: "Archivo";
  src: url("/media/fontes/Archivo[wdth,wght].ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #14100D;            /* ink */
  color: #FFFDFA;                 /* paper */
  font-family: "Archivo", Arial, Helvetica, sans-serif;
  /* Numa TV nao ha rato, mas alguns aparelhos desenham um cursor. */
  cursor: none;
  /* Impede o realce azul de foco ao carregar no OK. */
  -webkit-tap-highlight-color: transparent;
}

/* ---------- O canal ---------- */

#palco {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #14100D;
}

.clipe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease;
}

.clipe.visivel { opacity: 1; }

/* O veu da passagem entre clipes. Fica por cima do video e por baixo do
   painel de oferta: uma oferta nunca pode ser escurecida por uma
   transicao do canal. */
#veu {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #14100D;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
  z-index: 1;
}

#veu.visivel { opacity: 1; }

/* ---------- A oferta como painel lateral ---------- */

/* O video NAO encolhe. Encolher obrigava-o a `contain` numa caixa que ja
   nao era 16:9, e o que sobrava era tarja preta em cima e em baixo: o
   canal ficava mais pequeno de cada vez que tentava vender. A oferta passa
   a ser o que sempre devia ter sido: uma camada por cima. */

#oferta {
  position: absolute;
  top: 0; right: 0;
  /* 33,75% de 1920 sao 648px: 8 de fio mais 640 de peca. A peca vertical
     e desenhada a 640x1080 e entra 1:1, sem escala nenhuma pelo meio, que
     e o que mantem a letra nitida numa TV. */
  width: 33.75%;
  height: 100%;
  background: #14100D;
  /* Spot Orange como superficie, nunca como texto (Design.md §4.2): aqui
     e o fio que separa o canal da oferta. */
  border-left: 8px solid #F2A33C;
  box-sizing: border-box;
  /* Sem respiro nenhum: a peca vertical E o painel, de bordo a bordo. O
     respiro e desenhado dentro da peca, onde o design system manda. */
  padding: 0;
  overflow: hidden;
  z-index: 3;
  /* Entra a deslizar, nao a aparecer: numa TV vista de longe o movimento
     lateral chama o olho e o fade nao. */
  -webkit-transform: translateX(105%);
  transform: translateX(105%);
  -webkit-transition: -webkit-transform 600ms ease;
  transition: transform 600ms ease;
  text-align: center;
}

#palco.com-oferta #oferta {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* A peca casa a altura do painel, nunca a largura. Amarrar pela altura e
   o que faz desaparecer a tarja preta em cima e em baixo, que e a que se
   ve; se a largura nao bater ao pixel sobra um fio de Ink ao lado, contra
   uma peca de fundo Ink, e esse ninguem ve. Cortar nunca: cortar uma peca
   e cortar um preco. */
#peca {
  height: 100%;
  width: auto;
  /* centragem sem flex, que em browser de TV de 2018 e onde a caixa
     costuma partir-se */
  position: absolute;
  top: 0; left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* ---------- Ecra de arranque ---------- */

#arranque {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: #14100D;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  /* Area segura de 88px (Design.md §6.3). */
  padding: 88px;
  box-sizing: border-box;
  text-align: center;
  transition: opacity 800ms ease;
}

#arranque.saiu {
  opacity: 0;
  pointer-events: none;
}

#arranque .marca {
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #F2A33C;          /* spot sobre ink: 9,1:1 */
  margin-bottom: 56px;
}

#arranque .chamada {
  font-size: 64px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 64px;
  max-width: 1400px;
  color: #FFFDFA;
}

#arranque .chamada strong {
  font-weight: 700;
  color: #F2A33C;
}

/* Spot Orange e superficie, nunca texto sobre claro. Aqui e superficie com
   texto ink por cima: 9,1:1. */
#comecar {
  font-family: inherit;
  font-size: 48px;
  font-weight: 700;
  color: #14100D;
  background: #F2A33C;
  border: 0;
  border-radius: 16px;
  padding: 32px 72px;
  cursor: pointer;
  transition: background 200ms ease, box-shadow 200ms ease;
}

/* Numa TV a navegacao e por foco, nao por rato: o foco tem de ser visivel. */
#comecar:focus {
  outline: 0;
  background: #D96524;                       /* burnt */
  color: #FFFDFA;
  box-shadow: 0 0 0 8px rgba(242, 163, 60, 0.45);
}

#arranque .nota {
  font-size: 36px;
  color: #8A8279;          /* stone sobre ink: 4,9:1 */
  margin: 56px 0 0;
}

/* ---------- Diagnostico (tecla 0) ---------- */

#diagnostico {
  position: fixed;
  top: 88px;
  left: 88px;
  z-index: 20;
  max-width: 1000px;
  padding: 24px 32px;
  background: rgba(20, 16, 13, 0.92);
  border: 2px solid #8A8279;
  border-radius: 12px;
  font-family: "Courier New", monospace;   /* dado tecnico, lido de perto */
  font-size: 26px;
  line-height: 1.5;
  color: #F6F1E9;                          /* sand */
  white-space: pre-wrap;
}


/* ---------- Menu na TV ---------- */

/* O painel do telemovel e este menu mostram as mesmas tres decisoes, e sao
 * duas interfaces diferentes de proposito. La ha um dedo e um teclado; aqui
 * ha um comando com quatro setas e um OK, e quem esta a olhar esta a quatro
 * metros. Uma pagina desenhada para o telemovel, aberta no browser da TV, e
 * ilegivel a essa distancia e impossivel de navegar com setas.
 *
 * Regra da §5.1 do Design.md que se aplica aqui inteira: Space Mono nao entra
 * na peca de televisao. Tudo isto e Archivo, que e o que se le de longe. */

#menu {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  /* Nao e opaco: o canal continua a ver-se por tras, esbatido. Um menu que
   * tapa o ecra inteiro parece que parou a televisao, e a primeira coisa que
   * o dono faz e desligar o aparelho. */
  background: rgba(20, 16, 13, 0.94);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  /* A mesma area segura de 88px do ecra de arranque (Design.md §6.3): uma TV
   * corta a beira do quadro e o que la estiver desaparece. */
  padding: 88px;
  box-sizing: border-box;
  color: #FFFDFA;
}

#menu[hidden] { display: none; }

#menu .titulo {
  font-size: 56px;
  font-weight: 700;
  color: #F2A33C;          /* spot sobre ink: 9,08:1 */
  margin-bottom: 48px;
}

#menu .linha {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 28px 40px;
  margin-bottom: 20px;
  border: 3px solid #3A322B;
  border-radius: 16px;
}

/* A linha escolhida pinta-se de laranja e o texto passa a Ink. Laranja como
 * superficie, nunca como letra - o erro mais facil da marca. */
#menu .linha.aqui {
  background: #F2A33C;
  border-color: #F2A33C;
  color: #14100D;
}

/* 260px e nao 380. A coluna do rotulo so tem de caber «Ofertas», e cada
 * pixel que ela leva a mais e um pixel a menos para a nota do lado - que era
 * onde estava a informacao cortada. */
#menu .rotulo {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 260px;
  flex: 0 0 260px;
  font-size: 38px;
  font-weight: 600;
}

#menu .valor {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
  font-size: 44px;
  font-weight: 700;
  /* Um nome de tema longo encolhe e corta em vez de empurrar as setas para
   * fora do ecra. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#menu .nota {
  display: block;
  font-size: 26px;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* As setas so aparecem na linha onde se esta. Mostra-las em todas dizia que
 * todas respondem ao comando ao mesmo tempo, e nenhuma responde. */
#menu .setas {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  font-size: 40px;
  /* Ja nao e um rotulo: sao dois botoes. Antes estava a `opacity: 0` fora da
   * linha escolhida, porque so servia para lembrar que setas existiam. Agora
   * sao onde se carrega com o ponteiro do comando, e um alvo invisivel nao e
   * um alvo. Nas linhas que nao estao escolhidas ficam esbatidas, nao
   * ausentes. */
  opacity: 0.35;
}

#menu .linha.aqui .setas { opacity: 1; }

/* 64x64 nao e capricho: e o alvo minimo que um ponteiro de comando de TV
 * acerta sem tremer. A quatro metros, um `<span>` do tamanho da letra e um
 * alvo que se falha tres vezes antes de acertar. */
#menu .seta {
  display: inline-block;
  min-width: 64px;
  line-height: 64px;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- o botao de abrir o menu ----------
 *
 * Discreto e permanente. Spot Orange como SUPERFICIE e Ink como letra, que e
 * a unica combinacao que a marca permite aqui: laranja como texto sobre fundo
 * claro da 2,05:1 e reprova (Design.md). Ink sobre Spot da os mesmos 9,08:1
 * do titulo, ao contrario. */
#botao-menu {
  position: fixed;
  /* Canto superior ESQUERDO, e nao o inferior direito onde nasceu: a oferta
   * entra pela direita e ocupa 640px de altura inteira. Um botao ali ficava
   * por cima da peca que o salao esta a vender - a unica parte do ecra que
   * tem trabalho pago por tras. */
  left: 88px;              /* a mesma area segura de 88px: a TV corta a beira */
  top: 88px;
  z-index: 15;             /* acima do canal, abaixo do menu (20) */
  font-size: 40px;
  line-height: 1;
  /* Sand a 0.3: presente para quem o procura, invisivel para quem esta a ver
   * o canal. Um botao de servico numa parede nao e uma chamada de atencao. */
  color: rgba(246, 241, 233, 0.3);
  background: none;
  border: 0;
  /* O alvo e maior do que a tinta: 72x72 para o ponteiro do comando acertar
   * sem tremer, com o simbolo pequeno la dentro. */
  min-width: 72px;
  height: 72px;
  padding: 0;
  cursor: pointer;
}

#botao-menu:focus { outline: none; }
#botao-menu[hidden] { display: none; }

/* ---------- os botoes do rodape do menu ---------- */
#menu .rodape .accao {
  display: inline-block;
  font-size: 28px;
  font-weight: 600;
  padding: 16px 28px;
  margin-right: 16px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

#menu .rodape .guardar { background: #F2A33C; color: #14100D; }
#menu .rodape .fechar  { background: #2A241E; color: #F6F1E9; }

/* A ajuda das teclas continua escrita, para quem TEM comando a funcionar. */
#menu .rodape .teclas {
  display: block;
  margin-top: 24px;
  font-size: 26px;
}

#menu .rodape {
  margin-top: 40px;
  font-size: 30px;
  color: #8A8279;          /* stone sobre ink: 4,86:1 */
}

#menu .recado {
  margin-top: 24px;
  font-size: 32px;
  min-height: 40px;
  color: #F2A33C;
}

/* ---------- o PIN ---------- */

#menu .pin-caixas {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin: 40px 0;
}

#menu .pin-caixa {
  width: 110px;
  height: 140px;
  margin-right: 24px;
  border: 3px solid #3A322B;
  border-radius: 16px;
  font-size: 72px;
  font-weight: 700;
  line-height: 140px;
  text-align: center;
}

#menu .pin-caixa.cheia {
  border-color: #F2A33C;
}


/* Nem toda a televisao tem 1080 linhas.
 *
 * Medido a 1280x720: o titulo «O meu canal» ficava cortado em cima e o
 * rodape com as instrucoes cortado em baixo - `justify-content: center` corta
 * dos DOIS lados quando o conteudo nao cabe, e o que se perde e exactamente o
 * que diz onde se esta e que teclas respondem. A 1080 cabia, e por isso a
 * primeira captura nao mostrou nada.
 *
 * Encolher e melhor do que rolar: um menu que rola pede uma barra que um
 * comando de televisao nao sabe arrastar. */
@media (max-height: 860px) {
  #menu { padding: 48px 88px; }
  #menu .titulo { font-size: 40px; margin-bottom: 28px; }
  #menu .linha { padding: 18px 32px; margin-bottom: 14px; }
  #menu .rotulo { font-size: 30px; -webkit-flex-basis: 220px; flex-basis: 220px; }
  #menu .valor { font-size: 34px; }
  #menu .nota { font-size: 22px; }
  #menu .rodape { margin-top: 24px; font-size: 24px; }
  #menu .recado { margin-top: 14px; font-size: 26px; min-height: 32px; }
  #menu .pin-caixas { margin: 24px 0; }
  #menu .pin-caixa { width: 84px; height: 104px; font-size: 52px; line-height: 104px; }
}


/* A peca de oferta em texto, dentro do painel da direita.
 *
 * O `oferta-peca.css` fixa-a em 640x1080 - a medida do painel numa TV de
 * 1920. **Eu escrevi aqui que encolher a peca noutras resolucoes era um
 * problema que ainda nao existia. Existia.** Medido a 1280x720: o painel tem
 * 33,75% de 1280 = 432 px, a peca tem 640, e «Escova + hidra...» e o «18 €»
 * saiam pela direita do ecra. Um preco cortado e a unica coisa que esta peca
 * nao pode fazer.
 *
 * A escala sai do JS e nao daqui porque depende da altura real do ecra. E a
 * mesma regra que o `<img>` ja seguia sozinho com `height: 100%`: **a peca
 * casa a ALTURA do painel, nunca a largura.** Em 16:9 isso mantem a largura
 * certa em qualquer resolucao. */
#peca-texto {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

#peca-texto[hidden] { display: none; }

/* O cartao do tempo ancora-se exactamente como a peca de texto, e pelas duas
 * mesmas razoes.
 *
 * `transform-origin: top left` porque o `medirPeca()` encolhe 640x1080 com um
 * `scale()`: com a origem no centro - que e a omissao do CSS - o cartao cresce
 * para os quatro lados a partir do meio e sai 108px para fora da coluna, por
 * cima do video. Medido a 1280x720 a 10/09/2026.
 *
 * `[hidden] { display: none }` porque `.peca-clima` tem `display: flex`, e uma
 * classe com `display` VENCE o atributo `hidden`. Sem esta linha o cartao
 * ficava no ecra depois de lhe termos posto `hidden = true`, e entrava por
 * cima da oferta seguinte - foi o que se viu na primeira volta. */
#peca-clima {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

#peca-clima[hidden] { display: none; }

/* O palco esta permanentemente focado para receber as teclas do comando
 * (ver o `tabindex` no index.html). O contorno de foco do browser nao
 * tem nada que aparecer numa televisao de sala de espera. */
#palco:focus { outline: none; }

/* ---------- a faixa do lugar (lower third) ----------
 *
 * Canto inferior esquerdo: a oferta entra pela direita e o video encolhe, e
 * este e o unico canto que nunca e disputado. Nao leva fundo em caixa cheia -
 * um retangulo opaco sobre um aereo de drone e um autocolante. Leva um fio
 * Spot Orange a esquerda (superficie, nunca letra) e uma sombra que a segura
 * por cima de ceu claro ou de agua escura sem a fechar numa caixa. */
#lugar {
  position: absolute;
  left: 88px;              /* area segura de 88px, como o resto */
  bottom: 88px;
  z-index: 8;              /* acima do video, abaixo do botao (15) e do menu */
  max-width: 44%;          /* nao chega ao painel da oferta nem quando ele entra */
  padding: 14px 0 14px 28px;
  border-left: 8px solid #F2A33C;
  font-family: "Archivo", Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  color: #FFFDFA;
  text-shadow: 0 2px 12px rgba(20, 16, 13, 0.85);
  /* Entra e sai a deslizar da esquerda. 600ms: mais depressa parece um erro
   * de desenho, mais devagar chama a atencao para si em vez de para o lugar. */
  opacity: 0;
  -webkit-transform: translateX(-24px);
  transform: translateX(-24px);
  -webkit-transition: opacity 600ms ease, -webkit-transform 600ms ease;
  transition: opacity 600ms ease, transform 600ms ease;
}

#lugar.visivel {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#lugar[hidden] { display: none; }