/* Estilo base.
   Nota: o jogo é para telemóvel deitado. Toda a interface parte desse princípio. */

:root{
  --fundo:#0B1418;
  --relva:#1E7A43;
  --texto:#EAF2EF;
  --apagado:#8fa8a2;
  --destaque:#FFC93C;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:var(--fundo);
  overflow:hidden;
  /* Impede o browser de tentar fazer zoom, arrastar a página ou selecionar texto
     quando o dedo se mexe. Sem isto, jogar num telemóvel é impossível. */
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

#campo{
  position:fixed; inset:0; z-index:1;
  display:block;
  background:var(--fundo);
  touch-action:none;
}

/* --- Zonas de toque --- */
.zona{
  position:fixed; top:0; bottom:0; z-index:2;
  width:50%;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  background:transparent;
  transition:background .08s;
  touch-action:none;
}
.zona span{
  font:900 11px/1 "Arial Narrow",Arial,sans-serif;
  letter-spacing:3px;
  color:rgba(255,255,255,.30);
}
#zonaEsquerda{ left:0; }
#zonaDireita{ right:0; }

/* Estado ativo: é isto que confirma que o toque foi registado. */
.zona.tocada{ background:rgba(255,201,60,.16); }
.zona.tocada span{ color:var(--destaque); }

/* --- Botões: CPU (teste), END e PAUSE (do anfitrião), LEAVE (do
   convidado) ---
   Ficam acima das zonas de toque para receber o toque primeiro. Canto
   superior direito, longe dos polegares, que ficam em baixo. Empilhados,
   CPU/LEAVE em cima, END a seguir, PAUSE por baixo -- CPU/END/PAUSE e
   LEAVE nunca aparecem ao mesmo tempo (um aparelho é anfitrião ou
   convidado, nunca os dois), por isso partilham o primeiro lugar. */
#botaoCpu, #botaoEnd, #botaoPause, #botaoLeave{
  position:fixed; z-index:4;
  right:calc(8px + env(safe-area-inset-right));
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:6px;
  background:rgba(11,20,24,.72);
  color:var(--texto);
  font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:1px;
  touch-action:none;
}
#botaoCpu, #botaoLeave{
  top:calc(6px + env(safe-area-inset-top));
}
#botaoEnd{
  top:calc(37px + env(safe-area-inset-top));
  border-color:rgba(229,83,61,.6);
  color:#E5533D;
}
#botaoPause{
  top:calc(68px + env(safe-area-inset-top));
}
#botaoCpu.desligada{
  border-color:var(--destaque);
  color:var(--destaque);
}
#botaoPause.pausada{
  border-color:var(--destaque);
  color:var(--destaque);
}
#botaoLeave{
  border-color:rgba(229,83,61,.6);
  color:#E5533D;
}

/* --- Submenu de pausa ---
   Só aparece com PAUSE ligado (orquestrador.js). Mais pequeno que o ecrã,
   sem chegar às margens, e translúcido -- tem de perceber-se que é um
   menu por cima do jogo pausado, não um ecrã novo. As colunas e as linhas
   de ocupante reaproveitam .coluna/.ocupante (estilo.css mais abaixo,
   ecrã da Sala) -- mesma peça, mesmo aspeto, ver colunasDeEquipas.js. */
#submenuPausa{
  position:fixed; z-index:5;
  inset:9vh 7vw;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr auto;
  gap:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  background:rgba(11,20,24,.8);
}
#rodapeSubmenuPausa{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:center; gap:14px;
}
#botaoResume{
  padding:10px 24px;
  border:1px solid var(--destaque);
  border-radius:8px;
  background:rgba(255,201,60,.12);
  color:var(--destaque);
  font:800 13px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:2px;
}
#botaoLeaveToLobby{
  padding:10px 20px;
  border:1px solid rgba(229,83,61,.6);
  border-radius:8px;
  background:transparent;
  color:#E5533D;
  font:700 12px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:1px;
}
#botaoRestart{
  padding:10px 20px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:8px;
  background:transparent;
  color:var(--texto);
  font:700 12px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:1px;
}
/* Armado à espera do segundo toque -- mesma cor de aviso do KICK/BAN, para
   que "isto acaba a partida" se sinta antes de se ler "TAP AGAIN". Vale
   para os dois botões de confirmação dupla (RESTART, LEAVE TO LOBBY):
   #botaoLeaveToLobby já é vermelho por omissão, .armado só enche o fundo
   -- a mesma diferença de BAN para KICK. */
#botaoRestart.armado, #botaoLeaveToLobby.armado{
  border-color:#E5533D;
  background:rgba(229,83,61,.15);
  color:#E5533D;
}

/* --- Marcador e relógio ---
   Ao centro em cima. */
#placar{
  position:fixed; z-index:4;
  top:calc(4px + env(safe-area-inset-top));
  left:50%; transform:translateX(-50%);
  /* Largura fixa: sem isto a caixa mudava de tamanho consoante o texto
     (0-2 vs 10-12, GOAL vs KICK OFF 10) e dançava por cima do campo. Dá
     para dois números de dois algarismos e para "KICK OFF 10", o texto
     mais comprido que aparece — folga por cima para variação de fonte
     entre telemóveis, já que ui-monospace/Menlo/Consolas nem sempre
     existem e caem no monospace genérico do aparelho. */
  width:168px;
  padding:5px 14px 6px;
  border-radius:8px;
  background:rgba(11,20,24,.72);
  text-align:center;
  touch-action:none;
}
#placarGolos{
  font:800 20px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:2px;
}
#placarGolos .ver{ color:#E5533D; }
#placarGolos .azu{ color:#3D6FE5; }
#placarGolos .tra{ color:var(--apagado); padding:0 8px; }
#placarTempo{
  margin-top:3px;
  font:700 13px/1 ui-monospace,Menlo,Consolas,monospace;
  color:var(--texto);
}
#placar.acabado #placarTempo{ color:var(--destaque); }

/* --- Diagnóstico --- */
#estado{
  position:fixed; top:0; left:0; right:0; z-index:3;
  padding:7px 12px calc(7px + env(safe-area-inset-top));
  font:400 11px/1.4 ui-monospace,Menlo,Consolas,monospace;
  color:var(--apagado);
  background:linear-gradient(#0B1418e6,#0B141800);
  pointer-events:none;
  white-space:pre-line;
}

/* --- Fluxo de ecrãs ---
   Um ecrã escondido não ocupa espaço nem recebe toque -- é o que o
   orquestrador alterna entre Início, Sala e Partida. */
.escondido{ display:none !important; }

/* --- Ecrã de Início --- */
#ecraInicio{
  position:fixed; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  color:var(--texto);
}
#ecraInicio h1{
  margin:0 0 10px;
  font:800 28px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:1px;
}
#ecraInicio button{
  width:220px;
  padding:12px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:var(--texto);
  font:700 13px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:2px;
}
#botaoComunidade{
  border-color:var(--destaque);
  color:var(--destaque);
}
#campoNome{
  width:220px;
  padding:11px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:var(--texto);
  font:700 13px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:1px;
  text-align:center;
}
#campoNome::placeholder{ color:var(--apagado); }
#avisoEmBreve{
  min-height:1em;
  color:var(--apagado);
  font:400 12px/1 ui-monospace,Menlo,Consolas,monospace;
}

/* --- Ecrã da Sala ---
   Três colunas: equipa esquerda, espetadores, equipa direita. Por baixo,
   o painel de regras a toda a largura (#painelRegras), e por baixo desse
   o rodapé com o aviso e o botão de começar. */
#ecraSala{
  position:fixed; inset:0; z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr auto auto auto;
  gap:8px;
  /* O topo tem folga extra: é onde fica o botão LEAVE, fora do grid
     (position:absolute), para não ficar por cima do cabeçalho da coluna. */
  padding:calc(38px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
  color:var(--texto);
}
/* position:absolute tira-o do grid -- senão ocupava a primeira célula e
   empurrava a coluna esquerda. */
#botaoSair{
  position:absolute;
  top:calc(6px + env(safe-area-inset-top));
  left:calc(8px + env(safe-area-inset-left));
  z-index:2;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:6px;
  background:rgba(11,20,24,.72);
  color:var(--texto);
  font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:1px;
}

/* Sempre em cima das três colunas, a toda a largura -- visível a toda a
   gente (docs/decisoes.md, 2026-08-21), só interativo para quem
   administra (painelRegras.js desativa os <select>). */
#painelRegras{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
#painelRegras label{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font:700 10px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:1px;
  color:var(--apagado);
}
#painelRegras select{
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:var(--texto);
  font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;
}
#painelRegras select:disabled{ opacity:.55; }

/* Só visível ao anfitrião (ecra_sala.js, redesenhar) -- o link de convite
   e o botão que o copia. */
#painelConvite{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px;
}
#textoConvite{
  color:var(--apagado);
  font:400 11px/1 ui-monospace,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;
}
#botaoCopiarConvite{
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:var(--texto);
  font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:1px;
}

.coluna{
  display:flex; flex-direction:column; align-items:center;
  overflow-y:auto;
  padding:8px 6px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  /* Escuro e opaco, não um leve tom de branco: no submenu de pausa, por
     cima do campo translúcido, um tom claro deixava as linhas brancas do
     campo atravessarem o cartão. O campo continua visível à volta das
     colunas -- é o fundo do #submenuPausa que é translúcido, não isto. */
  background:rgba(11,20,24,.82);
}
.coluna h2{
  margin:2px 0 8px;
  font:700 12px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:2px;
  color:var(--apagado);
}
/* Por classe, não por id: o submenu de pausa (colunasDeEquipas.js) monta
   as mesmas três colunas noutro sítio da página, e um id só pode existir
   uma vez. */
.coluna.esquerda h2{ color:#E5533D; }
.coluna.direita h2{ color:#3D6FE5; }
.coluna .lugares{
  display:flex; flex-direction:column; gap:6px;
  width:100%;
}
.coluna > button{
  margin-bottom:8px;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:var(--texto);
  font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;
}
.ocupante{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  padding:5px 6px;
  border-radius:6px;
  /* Um tom claro por cima do fundo já escuro da coluna -- lê-se como
     cartão, não como o campo a espreitar por trás. */
  background:rgba(255,255,255,.10);
  font:400 11px/1.2 ui-monospace,Menlo,Consolas,monospace;
}
.nomeOcupante{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ocupante button{
  border:1px solid rgba(255,255,255,.25);
  border-radius:5px;
  background:transparent;
  color:var(--texto);
  padding:2px 6px;
  font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;
}
.ocupante button.remover{ color:#E5533D; border-color:#E5533D; }
/* BAN é mais grave que KICK -- fundo cheio em vez de só contorno, para
   que a diferença se veja mesmo sem ler o texto. */
.ocupante button.banir{ background:#E5533D; border-color:#E5533D; color:#fff; }
.ocupante button.permissoes{ color:var(--destaque); border-color:var(--destaque); }
#rodapeSala{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:center; gap:14px;
}
#avisoSala{
  min-height:1em;
  color:var(--apagado);
  font:400 12px/1 ui-monospace,Menlo,Consolas,monospace;
}
#botaoComecar{
  padding:10px 24px;
  border:1px solid var(--destaque);
  border-radius:8px;
  background:rgba(255,201,60,.12);
  color:var(--destaque);
  font:800 13px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:2px;
}
#botaoComecar:disabled{
  border-color:rgba(255,255,255,.2);
  background:transparent;
  color:var(--apagado);
}

/* --- Aviso de orientação --- */
#avisoRodar{
  display:none;
  position:fixed; inset:0; z-index:99;
  background:var(--fundo);
  flex-direction:column; align-items:center; justify-content:center;
  gap:9px; text-align:center; color:var(--texto);
}
#avisoRodar .icone{ font-size:46px; }
#avisoRodar .pequeno{ font-size:12px; color:var(--apagado); }

@media (orientation:portrait){
  #avisoRodar{ display:flex; }
}