/* ============================================================
   Cronómetro SC Braga
   Tokens do futsaldashboard — ver design.md secção 3.1 e
   docs/superpowers/specs/2026-08-12-restilo-tokens-futsaldashboard-design.md

   REGRA: nenhuma cor nova em hexadecimal solto abaixo deste bloco.
   Se faltar um valor, acrescenta-se um token aqui.
   ============================================================ */

/* A Inter é alojada aqui e NÃO vem de um @import do fonts.googleapis.com.
   Isto corre num pavilhão, muitas vezes com wi-fi mau ou nenhum, e uma letra
   que depende de um pedido à internet é uma letra que às vezes não chega. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* superfícies — elevação por luminosidade */
  --page:        #0d0d10;
  --barra:       #16161a;
  --cartao:      #1c1c1f;
  --linha:       #2e2e35;
  --campo:       #27272a;
  --campo-linha: #3f3f46;

  /* texto */
  --txt:   #f0f0f4;
  --muted: #a1a1aa;
  --faint: #71717a;

  /* marca */
  --brand-500: #ff1515;
  --brand-600: #e00000;
  --brand-700: #c00000;
  --brand-950: #3d0000;

  /* semântica */
  --ok:     #34d399;  --ok-bg:     rgba(52,211,153,0.12);
  --aviso:  #fbbf24;  --aviso-bg:  rgba(251,191,36,0.12);
  --perigo: #f87171;  --perigo-bg: rgba(248,113,113,0.12);
  --info:   #93c5fd;  --info-bg:   rgba(59,130,246,0.15);

  /* acções de jogo */
  --verde:  #059669;
  --ambar:  #b45309;

  /* fichas — lib/quadro.ts do futsaldashboard */
  --ficha-nos: #dc2626;
  --ficha-gr:  #18181b;

  /* raio */
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;

  /* movimento */
  --dur-rapida: 150ms;
  --dur-media:  250ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* O atributo `hidden` tem de ganhar.

   A regra do browser para [hidden] é `display: none` com a especificidade mais
   baixa que existe, por isso QUALQUER `display` escrito por nós ganha-lhe. E
   nós escrevemos vários: `.player` é `display: grid` nas duas apresentações e
   `.btn-sec` é `inline-flex`. Resultado: o ajustarNosVisiveis() punha
   `el.hidden = true` nos jogadores a mais e eles continuavam desenhados, e o
   botão de retomar aparecia num arranque sem jogo nenhum para retomar.

   Pior: quem verificasse com `!el.hidden` via a propriedade a dizer `true` e
   dava aquilo por bom — foi exactamente o que aconteceu. É por isto que o reset
   da normalize.css traz esta linha com !important. */
[hidden] { display: none !important; }

html {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  /* 100dvh e não 100vh: no Safari do iPad a barra de endereço conta no vh e
     o corpo ficava mais alto do que o ecrã, com scroll a meio de um jogo. */
  height: 100dvh;
  overflow: hidden;
  background: var(--page);
  color: var(--txt);
}

#app {
  height: 100%;
  /* Zona segura: com `apple-mobile-web-app-status-bar-style: black-translucent`
     e `viewport-fit=cover`, o conteúdo passa POR BAIXO da barra de estado do
     iOS — e o relógio e a bateria ficavam por cima do cabeçalho e do Exportar
     Dados. É o comportamento pedido: o fundo escuro continua até ao topo do
     ecrã, em vez de haver uma faixa branca. Só faltava afastar o conteúdo.

     Os quatro lados, e não só o de cima: em paisagem, num aparelho com
     entalhe, as áreas seguras da esquerda e da direita também não são zero. */
  padding: calc(12px + env(safe-area-inset-top))
           calc(12px + env(safe-area-inset-right))
           calc(12px + env(safe-area-inset-bottom))
           calc(12px + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.espaco { flex: 1; }

.divisor {
  width: 1px;
  align-self: stretch;
  margin: 10px 0;
  background: var(--linha);
}

/* Tudo o que conta tempo leva numerais de largura fixa, senão a linha
   dança a cada segundo. */
.clock, .jersey-time, .jersey-no, .jersey-rot {
  font-variant-numeric: tabular-nums;
}

/* ---------- cabeçalho ---------- */

#cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  flex: 0 0 auto;
}

#ba-logo-img { height: 24px; width: auto; display: block; }

.marca-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--faint);
}

/* ---------- corpo ---------- */

#corpo {
  flex: 1;
  display: flex;
  gap: 10px;
  min-height: 0;
}

.painel {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#pnl-campo { flex: 2.05; }
#pnl-banco { flex: 1; }

.painel-titulo {
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.painel-nota { margin-left: auto; color: var(--ok); }

/* Abaixo do alvo (tablet de 11") o corpo passa a coluna única. Não é o alvo,
   mas é melhor do que o que o layout antigo fazia, que era partir-se. */
/* ---------- estreito: telemóvel, ou o tablet ao alto ----------

   O alvo é o tablet ao baixo, mas alguém vai abrir isto ao alto — e aí as
   duas colunas lado a lado não encolhem, transbordam: as linhas do plantel
   ficavam cortadas com o EM CAMPO e o × fora do ecrã, e da grelha de duas
   colunas só se viam os jogadores ímpares. Não era feio, era inutilizável.

   Aqui empilha-se tudo numa coluna e deixa-se a página crescer. */
@media (max-width: 900px) {
  body { overflow: auto; height: auto; min-height: 100dvh; }
  #corpo { flex-direction: column; }

}

/* ---------- barra de jogo ---------- */

#barra-jogo {
  flex: 0 0 auto;
  height: 76px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
}

.btn-jogo {
  height: 52px;
  min-width: 96px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  cursor: pointer;
  /* Propriedades enumeradas de propósito, nunca `all`: com `all` uma mudança
     de estilo sem relação nenhuma começa a animar-se sozinha. */
  transition: background-color var(--dur-rapida) var(--ease),
              border-color var(--dur-rapida) var(--ease),
              opacity var(--dur-rapida) var(--ease),
              transform var(--dur-rapida) var(--ease);
}
.btn-jogo:active { transform: scale(0.97); }

.btn-jogo.kickoff { background: var(--verde); }
.btn-jogo.break   { background: var(--brand-600); }
.btn-jogo.break:hover { background: var(--brand-700); }
.btn-jogo.pause,
.btn-jogo.stop    { background: var(--ambar); }

/* Largura fixa pela mesma razão do grupo de tempo: este botão muda de rótulo
   a meio do jogo (INTERVALO -> FIM) e, sem isto, encolhia e puxava o ANULAR
   19px para a esquerda. Acontece uma vez por jogo em vez de a cada toque, mas
   é o mesmo defeito. */
#break { min-width: 115px; }

.btn-jogo.anular {
  min-width: 72px;
  background: var(--campo);
  border: 1px solid var(--campo-linha);
  font-size: 12px;
}

/* `toggle` é escrita pelo JS (bindevents.js) — não renomear. */
.btn-jogo.toggle {
  background: var(--brand-700);
  box-shadow: 0 0 0 2px var(--brand-500);
}

.medidor { text-align: center; min-width: 86px; }
.medidor.estreito { min-width: 58px; }

.txt-lbl {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  /* Um nome de equipa comprido não pode empurrar a barra. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clock {
  margin: 2px 0 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--txt);
}

#clock-play { color: var(--aviso); }

/* Estados escritos pelo JS. `break` = período parado, `pause` = em pausa. */
.clock.break { color: var(--faint); }
.clock.pause { color: var(--aviso); }

.placar { display: flex; align-items: center; gap: 6px; }

.btn-golo {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--campo);
  border: 1px solid var(--campo-linha);
  color: var(--txt);
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease),
              transform var(--dur-rapida) var(--ease);
}
.btn-golo:hover { background: var(--campo-linha); }
.btn-golo:active { transform: scale(0.97); }

/* ---------- botões do cabeçalho ---------- */

.head-input { display: none; }

.btn-sec, .load-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--campo);
  border: 1px solid var(--campo-linha);
  color: var(--txt);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease),
              opacity var(--dur-rapida) var(--ease),
              transform var(--dur-rapida) var(--ease);
}
.btn-sec:hover, .load-file:hover { background: var(--campo-linha); }
.btn-sec:active, .load-file:active { transform: scale(0.97); }

/* `disabled` é escrita pelo `buttonEnable()` (main.js:376-384) e cai em QUATRO
   famílias, não só nos botões do cabeçalho:
     - `.btn-sec`  — Guardar Jogo / Exportar Dados
     - `.btn-jogo` — INÍCIO / INTERVALO / PAUSA / PARAGEM, conforme a fase do jogo
     - `.btn-golo` — os dois `+`, pelo `toggleMatch()`
     - `.player`   — os 16 jogadores antes do pontapé de saída, pelo `togglePlayers()`
   A .25 de opacidade que isto tinha antes tornava "Guardar Jogo" e "Exportar
   Dados" ilegíveis; a .5 lê-se e continua a dizer que não se pode carregar.

   Estas regras vêm DEPOIS da `.btn-jogo.toggle` de propósito: as duas têm a
   mesma especificidade, e desactivado tem de ganhar a ligado. */
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-sec.disabled,
.btn-jogo.disabled,
.btn-golo.disabled {
  color: var(--faint);
  border-color: var(--linha);
  background: transparent;
  box-shadow: none;
}

/* Um jogador desactivado continua a ver-se — é informação — mas perde a cor e
   deixa de responder ao toque. */
.player.disabled { filter: grayscale(0.7); }
.player.disabled .jersey { pointer-events: none; }

/* `break` num .load-file quer dizer "este ficheiro já foi carregado". */
.load-file.break {
  opacity: 0.5;
  color: var(--faint);
  border-color: var(--linha);
  background: transparent;
}

/* ---------- quadra ---------- */

#quadra {
  position: relative;
  width: 100%;
  aspect-ratio: 14 / 9;
  align-self: center;
  /* A quadra é 14/9 e o painel é mais alto do que largo, por isso sobra sempre
     altura — medidos 151px a 1194x834. O `margin-block: auto` reparte essa
     folga por cima e por baixo em vez de a despejar toda em baixo, que fazia o
     painel parecer cortado. Alargar a quadra até encher não é opção: para
     ganhar os 151px precisaria de ~985px de largura, e o banco perdia a
     segunda coluna. */
  margin-block: auto;
  border-radius: var(--r-sm);
  overflow: hidden;
  background-image: url('img/quadra.webp');
  /* 100% 100% e NUNCA cover: cortar a quadra come as linhas laterais, e é
     lá que está metade da informação. Mesma razão pela qual as miniaturas do
     futsaldashboard usam object-contain. */
  background-size: 100% 100%;
  background-position: center;
}

.lugar {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 96px;
}

/* ---------- o jogador, apresentação A: ficha na quadra ---------- */

.lugar .player {
  position: relative;
  display: grid;
  grid-template-areas:
    "no"
    "nome"
    "tempo"
    "total";
  justify-items: center;
  gap: 1px;
}

.lugar .jersey-no {
  grid-area: no;
  margin: 0;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--ficha-nos);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

/* A cor do guarda-redes DERIVA do lugar e não se guarda — mesma disciplina
   do COR_GR do futsaldashboard. */
.lugar[data-lugar="guarda_redes"] .jersey-no { background: var(--ficha-gr); }

.lugar .jersey-name {
  grid-area: nome;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #111;
  /* Contorno branco em quatro direcções: é o que mantém o nome legível sobre
     a madeira clara, tal como o futsaldashboard faz no nome sob a ficha. */
  text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;
  max-width: 96px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* O tempo leva pastilha branca em vez de contorno: a cor do texto vem do mapa
   de calor (--calor, escrita pelo main.js) e verdes/vermelhos claros não se
   leem sobre madeira só com sombra. A pastilha dá-lhes fundo. */
.lugar .jersey-time {
  grid-area: tempo;
  margin: 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--calor, #111);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.lugar .jersey-rot {
  position: absolute;
  top: -3px;
  right: 14px;
  margin: 0;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--aviso);
  color: #111;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* O botão é o alvo de toque e cobre a ficha inteira. */
.lugar .jersey {
  position: absolute;
  inset: 0;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
}

/* ---------- o jogador, apresentação B: linha no banco ---------- */

#banco {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
}

#banco .player {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  /* Duas linhas na coluna do tempo, e o número, o nome e as rotações a
     atravessarem as duas. É o mesmo arranjo da ficha na quadra — em cima o
     número que descreve AGORA (aqui o descanso), em baixo e mais discreto o
     total do jogo — para não haver dois modelos mentais, um em campo e outro
     no banco. */
  grid-template-areas:
    "no nome tempo rot"
    "no nome total rot";
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  background: var(--campo);
  border: 1px solid var(--campo-linha);
  transition: background-color var(--dur-media) var(--ease),
              border-color var(--dur-media) var(--ease);
}

#banco .jersey-no {
  grid-area: no;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}

#banco .jersey-name {
  grid-area: nome;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* No banco o fundo é escuro e a cor do mapa de calor lê-se directamente. */
#banco .jersey-time {
  grid-area: tempo;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--calor, var(--muted));
}

#banco .jersey-rot {
  grid-area: rot;
  margin: 0;
  min-width: 16px;
  text-align: right;
  font-size: 11px;
  font-weight: 800;
  color: var(--aviso);
}

#banco .jersey {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
}

/* Segunda linha do tempo, na ficha: o total do jogo.

   Menor e mais discreta do que a de cima de propósito — a de cima é a que se
   lê a decidir a troca (quanto tempo leva esta passagem) e tem de ganhar o
   olhar; esta é a que se consulta para equilibrar o jogo todo. Duas linhas do
   mesmo tamanho fariam ler as duas e decidir mais devagar. */
.lugar .jersey-total {
  grid-area: total;
  margin: 1px 0 0;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #3f3f46;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

/* No banco a segunda linha é o total do jogo, tal como na ficha. É a lista de
   onde sai quem entra a seguir, portanto é precisamente aqui que o total
   interessa — o descanso diz se ESTE já pode voltar, o total diz se DEVE. */
#banco .jersey-total {
  grid-area: total;
  margin: 0;
  text-align: right;
  color: var(--faint);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* O descanso encosta-se à linha de baixo para as duas leituras ficarem
   agarradas uma à outra em vez de flutuarem na altura da linha. */
#banco .jersey-time { align-self: end; line-height: 1.15; }

/* ---------- selecção ---------- */

/* `selected` é escrita pelo JS (main.js:253/256) — não renomear.
   Quer dizer "escolhido, à espera do par para a troca". */
.lugar .player.selected .jersey-no,
#banco .player.selected {
  outline: 3px solid var(--aviso);
  outline-offset: 3px;
}

/* ---------- acessibilidade ---------- */

/* A app não tinha um único indicador de foco. Sem isto não se chega a lado
   nenhum por teclado. */
:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.lugar .jersey:focus-visible,
#banco .jersey:focus-visible {
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- INICIAR / PAUSAR ---------- */

/* Invólucro de LARGURA FIXA, e é o ponto todo desta regra.

   Antes os dois botões estavam soltos na barra e escondia-se o que não
   estivesse activo. Só que `display:none` tira o elemento do fluxo, por isso
   ao arrancar o jogo TODOS os botões à direita deslizavam para a esquerda: o
   sítio onde estava o INICIAR passava a ter o INTERVALO, e o dedo, que já
   sabia onde carregar, caía na acção errada a meio de um jogo.

   Com o invólucro a segurar a largura, o botão de tempo não sai do sítio, e
   nada à direita dele se mexe. */
.grupo-tempo {
  flex: 0 0 auto;
  width: 150px;
  height: 52px;
  /* Isolado dos outros: é o botão que leva mais toques do jogo todo e tem de
     se distinguir sem se ler o rótulo. */
  margin-right: 28px;
}

.grupo-tempo .btn-jogo {
  width: 100%;
  min-width: 0;
}



/* Nunca estão os dois activos ao mesmo tempo — o buttonEnable() do JS já
   garante isso: ao arrancar o período desactiva o INÍCIO e activa o PAUSA, e
   o INTERVALO faz o inverso. Esconder o que está desactivado transforma os
   dois num só botão aos olhos de quem está no banco, sem tocar na máquina de
   estados. Restrito a estes dois ids de propósito: o INTERVALO, a PARAGEM e o
   ANULAR também se desactivam, e escondê-los faria a barra saltar. */
#kick-off.disabled,
#pause.disabled { display: none; }

/* Em pausa o botão volta a ser o de arrancar, e portanto verde outra vez.
   Sem o anel do .toggle, que aqui já não diz nada de novo. */
#pause.toggle {
  background: var(--verde);
  box-shadow: none;
}

/* ---------- ecrã de entrada ---------- */

/* Uma vista de cada vez. A classe vive no <body> porque é o único sítio acima
   das duas. */
#ecra-entrada { display: none; }
body.entrada #ecra-entrada { display: flex; }
body.entrada #app { display: none; }
body:not(.entrada) #ecra-entrada { display: none; }

#ecra-entrada {
  height: 100dvh;
  /* Mesma zona segura do cronómetro — ver o comentário no #app. */
  padding: calc(12px + env(safe-area-inset-top))
           calc(12px + env(safe-area-inset-right))
           calc(12px + env(safe-area-inset-bottom))
           calc(12px + env(safe-area-inset-left));
  flex-direction: column;
  gap: 10px;
}

.entrada-topo { display: flex; align-items: center; gap: 8px; height: 40px; }
.entrada-logo { height: 24px; width: auto; display: block; }

.entrada-corpo { flex: 1; display: flex; gap: 10px; min-height: 0; }
#pnl-plantel { flex: 1.35; }
#pnl-jogo { flex: 0.72; }

#lista-plantel {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-content: start;
  overflow-y: auto;
  margin-bottom: 8px;
}

.linha-plantel {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  background: var(--campo);
  border: 1px solid var(--campo-linha);
}

.linha-plantel .inp-no {
  width: 42px;
  min-height: 44px;
  text-align: center;
  font-weight: 700;
  background: #18181b;
  border: 1px solid var(--campo-linha);
  border-radius: 6px;
  color: var(--txt);
  font: inherit;
  font-weight: 700;
}

.linha-plantel .inp-nome {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  background: transparent;
  border: 0;
  color: var(--txt);
  font: inherit;
  font-size: 13px;
}

.linha-plantel .estado {
  min-height: 44px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--campo-linha);
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.linha-plantel .estado.titular {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: transparent;
}

.linha-plantel .remover {
  min-width: 32px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.linha-plantel .remover:hover { color: var(--perigo); }

.campo { display: block; margin-bottom: 9px; }
.campo .txt-lbl { display: block; margin-bottom: 3px; }
.campo-duplo { display: flex; gap: 8px; }
.campo-duplo .campo { flex: 1; }

/* Os campos de data e hora do Safari do iOS ignoram o box-sizing e afirmam uma
   largura intrínseca própria — no iPad o campo da DATA saía por fora do painel.
   O `-webkit-appearance: none` entrega o dimensionamento ao CSS e o
   `min-width: 0` impede-o de reclamar a largura do conteúdo. O `min-height`
   evita que um campo vazio colapse.

   É a mesma correcção que o futsaldashboard tem no globals.css, pela mesma
   razão e com o mesmo comentário. */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  min-height: 2.75rem;
}

.inp {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  background: var(--campo);
  border: 1px solid var(--campo-linha);
  border-radius: var(--r-sm);
  color: var(--txt);
  font: inherit;
  font-size: 13px;
}

#entrada-erros {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--aviso);
  white-space: pre-line;
}

#comecar { width: 100%; margin-bottom: 8px; }
#retomar { width: 100%; }
#add-jogador { width: 100%; }

/* O COMEÇAR desactivado tem de continuar a parecer um botão.

   A regra genérica do .disabled põe o fundo transparente, o que na barra de
   jogo está bem — ali há quatro botões e o que está fora de jogo deve recuar.
   Aqui é a acção principal do ecrã: sem fundo, lê-se como texto e deixa de se
   perceber que é onde se carrega quando estiver tudo preenchido. */
#comecar.disabled {
  background: var(--campo);
  border: 1px solid var(--campo-linha);
}

/* ---------- estreito: o ecrã de entrada ao alto ----------

   Este bloco vive no FIM do ficheiro de propósito, e não junto ao outro
   `max-width: 900px` lá acima. As regras base do ecrã de entrada estão
   escritas depois desse bloco, e têm a MESMA especificidade (um id contra um
   id) — portanto ganhavam-lhe por serem mais abaixo. A media query estava a
   ser aplicada e logo a seguir desfeita, e o sintoma era a lista continuar
   com duas colunas como se a regra não existisse. */
@media (max-width: 900px) {
  /* A altura passa a vir do conteúdo: com 20 jogadores a lista é mais alta do
     que o ecrã, e prendê-la a 100dvh escondia o fundo dela. */
  #ecra-entrada { height: auto; min-height: 100dvh; }
  .entrada-corpo { flex-direction: column; min-height: 0; }
  #pnl-plantel, #pnl-jogo { flex: 0 0 auto; }

  #lista-plantel {
    overflow: visible;
    flex: 0 0 auto;
  }
}

/* Uma coluna só no telemóvel. Uma linha do plantel são 42px de número, o nome,
   o estado e o botão de remover — a duas colunas num ecrã destes não cabe, e o
   que sobrava saía pela direita com metade do plantel invisível.

   No tablet ao alto (834px) o painel ocupa a largura toda, portanto duas
   colunas dão ~380px cada, o mesmo que têm ao baixo. Aí não há razão para
   desperdiçar metade do ecrã. */
@media (max-width: 640px) {
  #lista-plantel { grid-template-columns: 1fr; }

  /* As durações são dois campos curtos e continuam a caber lado a lado. */
  .campo-duplo { flex-direction: row; }
}

/* ---------- estreito: o cronómetro ao alto ----------

   Ao baixo a barra de jogo é uma linha só: cinco controlos à esquerda e os
   relógios à direita, com o `.espaco` a empurrá-los para as pontas. Ao alto
   não cabe — media 655px de conteúdo em 364px de caixa, e o ANULAR e os
   relógios ficavam cortados fora do ecrã.

   Aqui o `.espaco` deixa de ser um empurrão e passa a ser uma QUEBRA DE LINHA:
   com `flex-basis: 100%` obriga tudo o que vem a seguir a descer. Os botões
   ficam numa linha, os relógios na outra, e nenhum encolhe. */
@media (max-width: 900px) {
  #barra-jogo {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 12px;
    row-gap: 10px;
  }

  #barra-jogo .espaco {
    flex: 0 0 100%;
    height: 0;
  }

  /* Os relógios passam a ocupar a linha toda, repartida por igual. */
  #barra-jogo .medidor { flex: 1; min-width: 0; }
  #barra-jogo .medidor.estreito { flex: 0 0 auto; }

  /* O grupo de tempo mantém a largura fixa — é o botão que leva mais toques
     do jogo todo e não pode mudar de sítio (ver o comentário lá em cima). */
  .grupo-tempo { margin-right: 12px; }
}

/* Uma coluna no banco só no telemóvel: a 390px duas colunas dão ~170px cada,
   e o nome de um jogador não cabe ao lado do número e do tempo. */
@media (max-width: 640px) {
  #banco { grid-template-columns: 1fr; }
}

/* Ao alto num telemóvel a quadra fica com ~340px de largura, e as fichas
   desenhadas para 750px passam a chocar umas com as outras e a tapar as
   balizas. Encolhem proporcionalmente — o alvo de toque continua a ser o
   botão, que cobre a ficha inteira. */
@media (max-width: 640px) {
  .lugar { width: 74px; }
  .lugar .jersey-no { width: 34px; height: 34px; font-size: 15px; }
  .lugar .jersey-name { font-size: 10px; max-width: 74px; }
  .lugar .jersey-time { font-size: 12px; padding: 0 5px; }
  .lugar .jersey-total { font-size: 9px; padding: 0 4px; }
  .lugar .jersey-rot { font-size: 9px; right: 10px; padding: 1px 4px; }

  /* Os três controlos cabem numa linha se não insistirem na largura de
     tablet — assim o ANULAR deixa de descer sozinho para uma linha só dele. */
  .grupo-tempo { width: 118px; margin-right: 10px; }
  .btn-jogo { font-size: 13px; padding: 0 10px; }
  #break { min-width: 98px; }
  .btn-jogo.anular { min-width: 62px; }
}