/* ============================================================
   Estilos das mecânicas.
   Carregado pelo shell junto com base.css, nunca sozinho.
   ============================================================ */

/* ---------------- classificar ---------------- */

.classificar { display: grid; gap: var(--e5); }

.pedido {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: var(--e5);
  box-shadow: var(--sombra-cartao);
}

.pedido__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e4);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borda);
}

.pedido__canal {
  padding: var(--e1) var(--e3);
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--acento-texto);
  background: var(--acento-veu);
  white-space: nowrap;
}

.pedido__quem { font-weight: 800; line-height: 1.3; }
.pedido__cargo { font-size: 0.85rem; color: var(--texto-fraco); line-height: 1.3; }

.pedido__fala {
  margin: 0;
  font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.35rem);
  line-height: 1.5;
  font-weight: 500;
}

.pedido__fala::before { content: "\201C"; }
.pedido__fala::after  { content: "\201D"; }

.pergunta {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.destinos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e3);
}

.destino {
  display: grid;
  gap: var(--e1);
  text-align: left;
  min-height: var(--toque);
  padding: var(--e4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  cursor: pointer;
  transition: transform var(--transicao), background var(--transicao), border-color var(--transicao), opacity var(--transicao);
}

.destino:not(:disabled):hover {
  background: var(--superficie-alta);
  border-color: var(--acento);
  transform: translateY(-2px);
}

.destino:disabled { cursor: default; }

.destino--especial { border-style: dashed; }

.destino__tecla {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-bottom: var(--e1);
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--acento-texto);
  background: var(--acento-veu);
}

.destino__nome { font-weight: 800; letter-spacing: -0.01em; }
.destino__resumo { font-size: 0.85rem; color: var(--texto-suave); line-height: 1.45; }

.destino[data-estado="certo"] {
  background: var(--ok-veu);
  border-color: var(--ok);
}
.destino[data-estado="certo"] .destino__nome { color: var(--ok); }

.destino[data-estado="errado"] {
  background: var(--erro-veu);
  border-color: var(--erro);
}
.destino[data-estado="errado"] .destino__nome { color: var(--erro); }

.destino[data-estado="apagado"] { opacity: 0.4; }

/* devolutiva */

.veredito:empty { display: none; }

.veredito {
  display: grid;
  gap: var(--e3);
  padding: var(--e5);
  border-radius: var(--raio-g);
  border: 1px solid var(--borda);
  background: var(--superficie);
  animation: entrar 200ms ease both;
}

.veredito[data-acertou="sim"] {
  background: var(--ok-veu);
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}

.veredito[data-acertou="nao"] {
  background: var(--erro-veu);
  border-color: color-mix(in srgb, var(--erro) 30%, transparent);
}

.veredito__titulo {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  justify-self: start;
}
.veredito__titulo:focus { outline: none; }
.veredito__titulo:focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; }

.veredito[data-acertou="sim"] .veredito__titulo { color: var(--ok); }
.veredito[data-acertou="nao"] .veredito__titulo { color: var(--erro); }

.veredito__rota { font-weight: 700; }
.veredito__engano,
.veredito__porque { color: var(--texto-suave); line-height: 1.6; }

.veredito__acoes { margin-top: var(--e2); }

@media (max-width: 560px) {
  .destinos { grid-template-columns: 1fr; }
  .pedido__cabecalho { flex-wrap: wrap; }
}

/* ---------------- verdades e ordenar ----------------
   As duas usam a mesma peça de base: um botão largo com texto
   longo, tocável no celular e legível no projetor. */

.verdades, .ordenar { display: grid; gap: var(--e5); }

.verdades__tema {
  font-family: var(--fonte-display);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.frases { display: grid; gap: var(--e3); }

.frase {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e2);
  align-items: start;
  text-align: left;
  min-height: var(--toque);
  padding: var(--e4);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  cursor: pointer;
  transition: transform var(--transicao), background var(--transicao), border-color var(--transicao), opacity var(--transicao);
}

.frase:has(.frase__tecla) { grid-template-columns: auto 1fr; }

.frase:not(:disabled):hover {
  background: var(--superficie-alta);
  border-color: var(--acento);
  transform: translateY(-2px);
}

.frase:disabled { cursor: default; }

.frase__tecla {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  font-family: var(--fonte-display);
  font-size: 0.78rem;
  color: var(--acento-contraste);
  background: var(--acento);
}

.frase__texto { font-size: 1.02rem; line-height: 1.45; }

.frase[data-estado="mentira"] { background: var(--erro-veu); border-color: var(--erro); }
.frase[data-estado="verdade"] { background: var(--ok-veu); border-color: var(--ok); }
.frase[data-escolhida="sim"] { outline: 3px dashed var(--erro); outline-offset: 3px; }

.veredito__linha { color: var(--texto-suave); line-height: 1.55; }

.veredito__rotulo {
  display: inline-block;
  padding: 0 var(--e2);
  margin-right: var(--e1);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.veredito__rotulo[data-tipo="mentira"] { background: var(--marca-laranja); color: #ffffff; }
.veredito__rotulo[data-tipo="verdade"] { background: var(--marca-verde); color: var(--marca-preto); }

/* fila montada pelo aluno */

.fila { display: grid; gap: var(--e2); }

.fila__vazia {
  padding: var(--e4);
  border: 2px dashed var(--borda);
  border-radius: var(--raio);
  color: var(--texto-fraco);
  font-size: 0.92rem;
}

.fila__item {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: var(--e3);
  align-items: center;
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
}

.fila__item[data-certo="sim"] { border-color: var(--ok); background: var(--ok-veu); }
.fila__item[data-certo="nao"] { border-color: var(--erro); background: var(--erro-veu); }

.fila__numero {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  font-family: var(--fonte-display);
  font-size: 0.9rem;
  color: var(--acento-contraste);
  background: var(--acento);
}

.fila__texto { font-size: 0.98rem; line-height: 1.4; }
.fila__porque { display: block; font-size: 0.86rem; color: var(--texto-suave); margin-top: var(--e1); }

.fila__tirar {
  padding: var(--e1) var(--e2);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  background: transparent;
  color: var(--texto-fraco);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

.fila__tirar:hover { background: var(--superficie-alta); color: var(--texto); }

.fila--gabarito { margin-top: var(--e3); }
.fila--gabarito .fila__item { grid-template-columns: 2rem 1fr; }

.etapas { display: grid; gap: var(--e2); }

/* ---------------- dialogo ----------------
   O medidor de clima é o coração da tela. Ele é o que a turma
   olha antes de decidir, e o que explica o final depois. */

.dialogo { display: grid; gap: var(--e5); }

.dialogo__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}

.clima {
  display: grid;
  gap: var(--e2);
  padding: var(--e4);
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
}

.clima__trilho {
  height: 14px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  overflow: hidden;
}

.clima__preenchimento {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: var(--marca-laranja);
  transition: transform 280ms cubic-bezier(0.2, 0, 0.2, 1), background var(--transicao);
}

.clima__palavra {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.clima[data-faixa="pessimo"] .clima__preenchimento { background: var(--marca-laranja); }
.clima[data-faixa="ruim"]    .clima__preenchimento { background: #ff9d2e; }
.clima[data-faixa="neutro"]  .clima__preenchimento { background: var(--marca-amarelo); }
.clima[data-faixa="bom"]     .clima__preenchimento { background: var(--marca-ciano); }
.clima[data-faixa="otimo"]   .clima__preenchimento { background: var(--marca-verde); }

.clima[data-faixa="pessimo"] .clima__palavra { color: var(--erro); }
.clima[data-faixa="otimo"]   .clima__palavra { color: var(--ok); }

.dialogo__fala {
  margin: 0;
  padding: var(--e5);
  background: var(--superficie);
  border: 2px solid var(--marca-preto);
  border-radius: var(--raio);
  font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.35rem);
  line-height: 1.45;
  font-weight: 500;
}

.dialogo__fala::before { content: "\201C"; }
.dialogo__fala::after  { content: "\201D"; }

.opcoes { display: grid; gap: var(--e3); }

.frase--fala[data-estado="subiu"] { background: var(--ok-veu); border-color: var(--ok); }
.frase--fala[data-estado="caiu"]  { background: var(--erro-veu); border-color: var(--erro); }
.frase--fala[data-estado="igual"] { background: var(--superficie-alta); }

/* desfecho */

.desfecho {
  padding: var(--e6) var(--e5);
  border: 2px solid var(--marca-preto);
  border-radius: var(--raio);
  box-shadow: 6px 6px 0 var(--marca-preto);
}

.desfecho[data-tipo="bom"]     { background: var(--marca-verde); color: var(--marca-preto); }
.desfecho[data-tipo="mediano"] { background: var(--marca-amarelo); color: var(--marca-preto); }
.desfecho[data-tipo="ruim"]    { background: var(--marca-laranja); color: #ffffff; }

.desfecho__selo {
  display: inline-block;
  padding: var(--e1) var(--e3);
  margin-bottom: var(--e3);
  background: var(--marca-preto);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.desfecho__titulo {
  font-family: var(--fonte-display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-bottom: var(--e3);
}
.desfecho__titulo:focus { outline: none; }
.desfecho__titulo:focus-visible { outline: 3px solid var(--marca-preto); outline-offset: 4px; }

.desfecho__texto { font-size: 1.02rem; line-height: 1.55; max-width: 52ch; }

/* ---------------- restricao ---------------- */

.restricao { display: grid; gap: var(--e5); }

.restricao__situacao {
  padding: var(--e5);
  background: var(--superficie);
  border: 2px solid var(--marca-preto);
  border-radius: var(--raio);
  font-size: clamp(1rem, 0.92rem + 0.5vw, 1.2rem);
  line-height: 1.5;
}

.limite {
  display: grid;
  gap: var(--e2);
  padding: var(--e4);
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
}

.limite__trilho {
  height: 14px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  overflow: hidden;
}

.limite__preenchimento {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: var(--marca-verde);
  transition: transform 240ms cubic-bezier(0.2, 0, 0.2, 1), background var(--transicao);
}

.limite[data-apertado="sim"] .limite__preenchimento { background: var(--marca-laranja); }

.limite__rotulo {
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.frase--gasto { grid-template-columns: 1fr auto; align-items: center; }
.frase--gasto:has(.frase__tecla) { grid-template-columns: auto 1fr auto; }

.opcao__custo {
  font-family: var(--fonte-display);
  font-size: 1rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  padding: var(--e1) var(--e2);
  background: var(--superficie-alta);
  color: var(--texto);
  white-space: nowrap;
}

.frase--gasto[aria-pressed="true"] {
  background: var(--acento-veu);
  border-color: var(--acento);
}
.frase--gasto[aria-pressed="true"] .opcao__custo {
  background: var(--marca-magenta);
  color: #ffffff;
}

.frase--gasto:disabled[aria-pressed="false"] { opacity: 0.42; }

/* o caminho tomado */

.trilha { display: grid; gap: var(--e2); }

.trilha__passo {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--e3);
  align-items: start;
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  font-size: 0.94rem;
}

.trilha__passo[data-efeito="subiu"] { border-color: var(--ok); }
.trilha__passo[data-efeito="caiu"]  { border-color: var(--erro); }

.trilha__numero {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  font-family: var(--fonte-display);
  font-size: 0.86rem;
  color: var(--texto-suave);
  background: var(--superficie-alta);
}

.trilha__passo[data-efeito="subiu"] .trilha__numero { background: var(--marca-verde); color: var(--marca-preto); }
.trilha__passo[data-efeito="caiu"]  .trilha__numero { background: var(--marca-laranja); color: #ffffff; }

/* ---------------- papeis ---------------- */

.papeis { display: grid; gap: var(--e5); }

.papeis__situacao {
  font-size: clamp(1.02rem, 0.95rem + 0.5vw, 1.22rem);
  line-height: 1.6;
  max-width: 58ch;
}

.papeis__aviso {
  padding: var(--e4);
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.papeis__avisoTitulo { font-weight: 900; margin-bottom: var(--e1); }

.papeis__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--e4);
}

/* Cada papel é uma carta na mão de alguém. A borda grossa e a
   sombra dura separam uma da outra à distância, que é como elas
   vão ser lidas: uma pessoa apontando pra tela do projetor. */
.papeis__cartao {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e5);
  background: var(--superficie);
  border: 2px solid var(--marca-preto);
  border-radius: var(--raio);
  box-shadow: 4px 4px 0 var(--marca-preto);
}

.papeis__nome {
  font-family: var(--fonte-display);
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--texto);
}

.papeis__quem { color: var(--texto-suave); font-size: 0.94rem; line-height: 1.5; }

.papeis__dono {
  align-self: flex-start;
  padding: var(--e1) var(--e3);
  background: var(--marca-ciano);
  color: var(--marca-preto);
  border-radius: 99px;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.papeis__objetivo { line-height: 1.55; }

.papeis__comoAgir {
  display: grid;
  gap: var(--e1);
  margin: 0;
  padding-left: 1.1em;
  color: var(--texto-suave);
  font-size: 0.92rem;
  line-height: 1.5;
}

.papeis__segredo { margin-top: var(--e2); }

.papeis__segredoBotao {
  width: 100%;
  min-height: var(--toque);
  padding: var(--e2) var(--e3);
  background: var(--marca-preto);
  color: var(--fundo);
  border: none;
  border-radius: var(--raio-p);
  font-family: var(--fonte);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.papeis__segredoTexto {
  margin-top: var(--e2);
  padding: var(--e3);
  background: var(--destaque);
  color: var(--destaque-contraste);
  border-radius: var(--raio-p);
  line-height: 1.5;
}

.cartao--plateia {
  background: var(--superficie-alta);
  border-color: var(--marca-preto);
}

.papeis__olhar {
  display: grid;
  gap: var(--e2);
  margin: var(--e3) 0 0;
  padding-left: 1.1em;
  line-height: 1.5;
}

/* ---- relógio ---- */

.relogio {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e4);
  background: var(--superficie);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio);
}

.relogio__trilho {
  flex: 1 1 auto;
  height: 0.7rem;
  background: var(--borda);
  border-radius: 99px;
  overflow: hidden;
}

.relogio__preenchimento {
  height: 100%;
  background: var(--marca-verde);
  transform-origin: left center;
  transition: transform 1s linear;
}

.relogio__numero {
  font-family: var(--fonte-display);
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  min-width: 3.6ch;
  text-align: right;
}

.relogio__numero[data-acabando="sim"] { color: var(--erro); }

/* ---- viravolta ---- */

.papeis__rodadaMarca {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.papeis__viravolta {
  padding: var(--e5);
  background: var(--marca-laranja);
  color: #ffffff;
  border-radius: var(--raio);
  box-shadow: var(--sombra-dura);
  line-height: 1.6;
}

.papeis__viravolta:focus { outline: none; }
.papeis__viravolta:focus-visible { outline: 3px solid var(--marca-preto); outline-offset: 4px; }

.papeis__viravoltaMarca {
  font-family: var(--fonte-display);
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: var(--e2);
}

/* ---- julgamento ---- */

.papeis__criterios { display: grid; gap: var(--e3); }

.papeis__criterio {
  display: grid;
  gap: var(--e3);
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.papeis__criterioTexto { line-height: 1.5; font-weight: 600; }

.papeis__votos { display: flex; flex-wrap: wrap; gap: var(--e2); }

.papeis__voto {
  flex: 1 1 6rem;
  min-height: var(--toque);
  padding: var(--e2) var(--e3);
  background: transparent;
  color: var(--texto-suave);
  border: 2px solid var(--borda);
  border-radius: var(--raio-p);
  font-family: var(--fonte);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.papeis__voto:hover { border-color: var(--borda-forte); color: var(--texto); }

.papeis__voto[data-voto="sim"][aria-pressed="true"] {
  background: var(--marca-verde);
  border-color: var(--marca-preto);
  color: var(--marca-preto);
}

.papeis__voto[data-voto="quase"][aria-pressed="true"] {
  background: var(--marca-amarelo);
  border-color: var(--marca-preto);
  color: var(--marca-preto);
}

.papeis__voto[data-voto="nao"][aria-pressed="true"] {
  background: var(--marca-laranja);
  border-color: var(--marca-preto);
  color: #ffffff;
}


/* ============================================================
   IMPOSTOR

   A tela das cartas é a única do app em que alguém se aproxima do
   computador pra ler algo que os outros não podem ler. Por isso a
   carta fechada é grande e opaca, e a aberta muda de cor: de
   longe, a turma vê que uma carta está aberta, sem conseguir ler.
   ============================================================ */

.impostor { display: grid; gap: var(--e4); }

.impostor__olho {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.impostor__titulo { font-family: var(--fonte-display); font-size: 1.7rem; }
.impostor__contexto { font-size: 1.05rem; }

.impostor__instrucao {
  padding: var(--e3);
  color: var(--texto-suave);
  background: var(--superficie);
  border-left: 4px solid var(--marca-magenta);
}

.impostor__cartas {
  display: grid;
  gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.impostor__slot { display: grid; gap: var(--e2); align-content: start; }

.impostor__carta {
  display: grid;
  gap: var(--e1);
  min-height: 5.5rem;
  padding: var(--e3);
  font-family: inherit;
  text-align: left;
  color: var(--texto);
  background: var(--fundo-2);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio);
  cursor: pointer;
}

.impostor__carta[data-aberta="sim"] {
  background: var(--marca-amarelo);
  color: var(--marca-preto);
  border-color: var(--marca-preto);
}

.impostor__cartaNome { font-family: var(--fonte-display); font-size: 1.2rem; }

.impostor__cartaAcao {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.impostor__carta[data-aberta="sim"] .impostor__cartaAcao { color: var(--marca-preto); }

.impostor__cartaTexto,
.impostor__cartaDica {
  padding: var(--e3);
  background: var(--superficie);
  border: 2px dashed var(--borda-forte);
  border-radius: var(--raio-p);
}

.impostor__cartaTexto[hidden],
.impostor__cartaDica[hidden] { display: none; }

.impostor__cartaDica { color: var(--texto-suave); font-size: 0.92rem; }

.impostor__conta { color: var(--texto-suave); font-size: 0.9rem; }

.impostor__ordem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  list-style: none;
  padding: 0;
  counter-reset: vez;
}

.impostor__vez {
  counter-increment: vez;
  padding: var(--e2) var(--e4);
  font-weight: 800;
  background: var(--superficie);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio-p);
}

.impostor__vez::before { content: counter(vez) ". "; color: var(--marca-magenta); }

.impostor__entrega { margin: 0; padding-left: var(--e5); display: grid; gap: var(--e1); }