/* Linguagem visual do Cratebound: escuro esverdeado, cantos generosos,
   painel lateral onde lá fica a câmera e aqui ficam os controles. */

:root {
  color-scheme: dark;
  font-family: Inter, ui-rounded, "Segoe UI", sans-serif;
  background: #121513;
  color: #f3f2e9;
}

* {
  box-sizing: border-box;
}

/* Sem isto, qualquer regra de classe com display vence o atributo hidden e o
   elemento escondido aparece assim mesmo. */
[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(circle at 20% 10%, #27372e 0, transparent 35%),
    #121513;
}

/* Centrado nos dois eixos: o margin auto horizontal segura a largura, e o
   vertical centra no espaço entre as duas barras. A folga acompanha a janela
   para não colar nas bordas. */
.game {
  width: min(100%, 1320px);
  margin: auto;
  padding: clamp(14px, 3vw, 32px);
  text-align: center;
}

/* ---------- barra do topo ---------- */

/* Barra colada no topo, de ponta a ponta da janela. Sem cantos arredondados
   e sem margem: é moldura da página, não um card dentro dela. */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(14px, 4vw, 32px);
  border-bottom: 1px solid #2f3a33;
  background: #191f1b;
}

.brand {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.brand span {
  color: #9fd8ad;
}

/* Estado da partida e o último acontecimento. Ficam no painel, embaixo, e não
   deslocam nada ao mudar de texto — daí a altura mínima. */
.stage {
  margin: 4px 0 0;
  color: #cfe6d5;
  font-size: 0.86rem;
  font-weight: 700;
}

.status {
  margin: 3px 0 0;
  min-height: 2.4em;
  color: #9aa79d;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ---------- área de jogo ---------- */

.play-area {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(220px, 268px);
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #465149;
  border-radius: 22px;
  background: #191f1b;
  box-shadow: 0 28px 80px #0008;
}

/* ---------- coluna de inspeção ---------- */

/* A esquerda é a coluna de leitura: o que a rede vê e como ela é. A direita é
   a coluna de ação. Separar assim mantém as duas com altura parecida — antes
   tudo ficava à direita e ela virava uma tira comprida com rolagem. */
.inspect {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-right: 18px;
  border-right: 1px solid #2f3a33;
  text-align: left;
}

.inspect .bloco {
  padding-top: 11px;
  border-top: 1px solid #2f3a33;
}

.vision-title {
  margin: 0 0 6px;
  color: #cfe6d5;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Duas colunas: onze linhas empilhadas faziam a coluna esquerda ficar muito
   mais alta que o tabuleiro. Os cabeçalhos de grupo atravessam as duas. */
.vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.bit-group {
  grid-column: 1 / -1;
}

/* Cabeçalho de grupo: perigo, direção, fruta. */
.bit-group {
  margin: 6px 0 1px;
  color: #6f7c74;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bit-group:first-child {
  margin-top: 0;
}

.bit {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px;
  border: 1px solid #2f3a33;
  border-radius: 7px;
  background: #10150f;
}

.bit b {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 4px;
  background: #232a25;
  color: #6f7c74;
  font-size: 0.72rem;
}

/* Aceso: é a mudança de 0 para 1 que ensina — precisa saltar aos olhos. */
.bit.on {
  border-color: #4d7a5c;
}

.bit.on b {
  background: #9fd8ad;
  color: #10150f;
}

.bit small {
  color: #9aa79d;
  font-size: 0.68rem;
  line-height: 1.2;
}

/* Uma linha só, sempre. Quebrado no meio ele deixa de parecer um vetor. */
.vision-raw {
  margin: 8px 0 0;
  color: #7f8c84;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.vision-note {
  margin: 6px 0 0;
  color: #6f7c74;
  font-size: 0.68rem;
  line-height: 1.5;
}

.board-column {
  min-width: 0;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* A moldura encolhe junto com o canvas em vez de esticar pela coluna. Sem
   isto o tabuleiro fica boiando no meio de um vazio escuro em tela larga. */
.board {
  display: grid;
  place-items: center;
  width: fit-content;
  margin-inline: auto;
  padding: 12px;
  border: 1px solid #2f3a33;
  border-radius: 18px;
  background: #10150f;
}

.board canvas {
  display: block;
  max-width: 100%;
  border-radius: 12px;
  cursor: crosshair;
}

.board-foot {
  text-align: center;
}

.board-hint {
  margin: 0;
  color: #7f8c84;
  font-size: 0.8rem;
}

/* ---------- painel de controles ---------- */

.control-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding-left: 18px;
  border-left: 1px solid #2f3a33;
  text-align: left;
}

/* As colunas laterais nunca rolam por dentro.
   Houve uma versão que as limitava à altura do tabuleiro, e numa janela baixa
   isso produzia uma barra de rolagem dentro de uma coluna estreita — pior de
   usar do que a página inteira rolar um pouco. Quando o conteúdo não cabe, quem
   rola é a página, com as barras do topo e do rodapé fixas no lugar. */

.scores {
  display: flex;
  gap: 8px;
}

.score {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 8px 11px;
  border: 1px solid #2f3a33;
  border-radius: 12px;
  background: #141a16;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.score small {
  color: #7f8c84;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-action {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #56635a;
  border-radius: 12px;
  background: #29302b;
  color: #f7f8f4;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.card-action:hover {
  border-color: #9fd8ad;
}

.card-action.primary:not(:disabled) {
  background: #9fd8ad;
  border-color: #9fd8ad;
  color: #10150f;
}

/* Etapa ainda não liberada. Fica visível de propósito: mostra o caminho do
   projeto antes de ele existir. */
.card-action:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.card-action:hover:disabled {
  border-color: #56635a;
}

/* ---------- coleta ---------- */

.bloco-direita {
  padding-top: 10px;
  border-top: 1px solid #2f3a33;
}

/* Gravando: o botão fica quente, para não restar dúvida do estado. */
.card-action.gravando {
  border-color: #e0765c;
  background: #3a221c;
  color: #ffd9cd;
}

.tally {
  display: grid;
  gap: 4px;
}

.tally-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  font-size: 0.72rem;
}

.tally-linha span {
  color: #9aa79d;
}

.tally-linha b {
  color: #cfe6d5;
  font-variant-numeric: tabular-nums;
}

/* A barra é o ponto: o desequilíbrio entre as classes precisa saltar aos
   olhos enquanto a coleta acontece, não depois no treino. */
.tally-barra {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 99px;
  background: #232a25;
  overflow: hidden;
}

.tally-barra i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: #9fd8ad;
}

/* ---------- treino ---------- */

.treino {
  display: grid;
  gap: 6px;
  margin-top: -4px;
}

.meter-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  color: #cfe6d5;
  font-size: 0.74rem;
  font-weight: 600;
}

.meter-label b {
  color: #9fd8ad;
  font-variant-numeric: tabular-nums;
}

/* A barra do treino anda de época em época, aos saltos. A transição costura
   os saltos e faz o progresso parecer contínuo. */
.treino .tally-barra i {
  transition: width 120ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .treino .tally-barra i {
    transition: none;
  }
}

.tally-linha.majoritaria .tally-barra i {
  background: #e0765c;
}

.collect-note {
  margin: 10px 0 0;
  color: #6f7c74;
  font-size: 0.7rem;
  line-height: 1.5;
}

/* ---------- saída da rede ---------- */

.saida {
  display: grid;
  gap: 5px;
}

.saida-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  font-size: 0.72rem;
}

.saida-linha span {
  color: #9aa79d;
}

.saida-linha b {
  color: #cfe6d5;
  font-variant-numeric: tabular-nums;
}

/* A escolhida. É a leitura mais importante do painel: mostra a decisão, não
   só os números. */
.saida-linha.escolhida span,
.saida-linha.escolhida b {
  color: #d8f5df;
  font-weight: 700;
}

.saida-linha.escolhida .tally-barra i {
  background: #d8f5df;
}

/* Vetada pelo filtro de segurança: a rede queria, o código não deixou. */
.saida-linha.vetada span,
.saida-linha.vetada b {
  color: #e0765c;
  text-decoration: line-through;
}

.saida-linha.vetada .tally-barra i {
  background: #7a3c30;
}

.saida .tally-barra i {
  transition: width 90ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .saida .tally-barra i {
    transition: none;
  }
}

/* ---------- a rede ---------- */

/* Cadeia horizontal: mesma informação das caixas empilhadas, em um quarto da
   altura. E a forma — largo, estreito, três — lê melhor na horizontal. */
.net {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.net-no {
  flex: 1;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 5px 2px;
  border: 1px solid #2f3a33;
  border-radius: 7px;
  background: #10150f;
}

.net-no b {
  color: #cfe6d5;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.net-no em {
  color: #6f7c74;
  font-size: 0.55rem;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Entrada e saída são as pontas: destaque para separar do miolo. */
.net-no.ponta {
  border-color: #4d7a5c;
}

.net-seta {
  align-self: center;
  color: #4d7a5c;
  font-size: 0.7rem;
  font-style: normal;
}

/* ---------- ações ---------- */

/* Ação secundária: contorno em vez de preenchimento, para não competir com
   o Jogar. Sem border e background explícitos ele cai no botão cinza do
   sistema, que destoa de tudo. */
/* O único botão destrutivo. Fica por último na coluna e com contorno em vez de
   preenchimento — presente, mas sem competir com as ações do fluxo. */
.reset {
  width: 100%;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid #3c4a41;
  border-radius: 10px;
  background: transparent;
  color: #9aa79d;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.reset:hover {
  border-color: #e0765c;
  color: #ffd9cd;
}


/* ---------- velocidade ---------- */

/* Só aparece com a rede jogando. Acelerar não muda decisão nenhuma — só o
   intervalo entre passos —, então é seguro deixar no controle de quem assiste. */
.velocidade {
  display: inline-flex;
  gap: 3px;
  margin-top: 8px;
  padding: 3px;
  border: 1px solid #2f3a33;
  border-radius: 10px;
  background: #141a16;
}

.velocidade button {
  padding: 4px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #9aa79d;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.velocidade button:hover {
  color: #d8f5df;
}

.velocidade button.ativa {
  background: #22402d;
  color: #d8f5df;
}

/* ---------- botão da barra ---------- */

.reset.barra {
  width: auto;
  margin-left: auto;
  padding: 6px 14px;
  font-size: 0.78rem;
}

/* Um ponto discreto quando algum parâmetro saiu do padrão. Sem ele, dá para
   esquecer que o experimento continua ligado e culpar a rede. */
.marca-alterado {
  margin-left: 5px;
  color: #e0765c;
  font-size: 1.1rem;
  line-height: 0;
  vertical-align: middle;
}

/* ---------- diálogo de configuração ---------- */

.modal {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0 22px 18px;
  border: 1px solid #465149;
  border-radius: 18px;
  background: #191f1b;
  color: #f3f2e9;
  box-shadow: 0 30px 90px #000a;
}

.modal::backdrop {
  background: rgb(5 8 6 / 0.72);
}

.modal-topo {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -22px 0;
  padding: 16px 22px 12px;
  background: #191f1b;
  border-bottom: 1px solid #2f3a33;
}

.modal-topo h2 {
  margin: 0;
  font-size: 1rem;
}

.modal-x {
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9aa79d;
  font: inherit;
  cursor: pointer;
}

.modal-x:hover {
  color: #f3f2e9;
}

.modal-nota,
.grupo-nota {
  margin: 12px 0 0;
  color: #6f7c74;
  font-size: 0.72rem;
  line-height: 1.5;
}

.grupo {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #2f3a33;
}

.grupo h3 {
  margin: 0;
  color: #cfe6d5;
  font-size: 0.8rem;
}

.grupo .grupo-nota {
  margin-top: 3px;
}

.opcao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-top: 14px;
  cursor: pointer;
}

.opcao input {
  margin-top: 3px;
  accent-color: #9fd8ad;
}

.opcao span {
  color: #9aa79d;
  font-size: 0.74rem;
  line-height: 1.5;
}

.opcao b {
  display: block;
  color: #f3f2e9;
  font-size: 0.82rem;
}

.campo {
  display: block;
  margin-top: 14px;
}

.campo > span {
  display: block;
  margin-bottom: 5px;
  color: #cfe6d5;
  font-size: 0.78rem;
  font-weight: 600;
}

.campo > span b {
  color: #9fd8ad;
  font-variant-numeric: tabular-nums;
}

.campo small {
  display: block;
  margin-top: 5px;
  color: #6f7c74;
  font-size: 0.7rem;
  line-height: 1.5;
}

.campo input[type="range"] {
  width: 100%;
  accent-color: #9fd8ad;
}

.campo input[type="number"] {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #3c4a41;
  border-radius: 9px;
  background: #10150f;
  color: #f3f2e9;
  font: inherit;
  font-size: 0.82rem;
}

.campo input[type="number"]:focus-visible {
  border-color: #9fd8ad;
}

.campos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.modal-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.modal-acoes .reset {
  width: auto;
}

.modal-acoes form {
  margin-left: auto;
}

.modal-acoes .card-action {
  width: auto;
  padding: 9px 20px;
}

/* ---------- rodapé ---------- */

/* Espelho da barra do topo: de ponta a ponta, colada embaixo. */
.credits {
  position: sticky;
  bottom: 0;
  z-index: 10;
  width: 100%;
  flex: none;
  padding: 8px clamp(14px, 4vw, 32px);
  border-top: 1px solid #2f3a33;
  background: #191f1b;
  color: #6f7c74;
  font-size: 0.74rem;
  line-height: 1.5;
  text-align: center;
}

.credits p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid #9fd8ad;
  outline-offset: 2px;
}

/* Empilhado: o tabuleiro primeiro, depois os controles, e a visão por último —
   ela é apoio, não o jogo. */
@media (max-width: 980px) {
  .play-area {
    grid-template-columns: 1fr;
  }

  .board-column {
    order: 1;
    padding: 0;
  }

  .control-panel {
    order: 2;
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid #2f3a33;
  }

  .inspect {
    order: 3;
    padding-right: 0;
    padding-top: 20px;
    border-right: 0;
    border-top: 1px solid #2f3a33;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}