/* =========================================================================
   jogo.css — o Caça-Erros (jogo.html)
   -------------------------------------------------------------------------
   Herda tudo do style.css: os tokens de cor e de forma, o cabeçalho, o
   .hero, o .btn, o vidro dos cartões. Aqui fica só o que o jogo tem de
   seu — o mapa dos níveis, a tela do desafio e o painel de resolvido.

   A tela do desafio cabe numa tela de computador sem rolar a página: a
   bancada precisa da altura inteira, e rolar para achar o botão de testar
   separa o aluno do circuito que ele está olhando. A coluna da esquerda
   rola por dentro quando o texto não cabe.

   Sumário
     1. O mapa: cabeçalho e placar
     2. Os níveis e as pastilhas
     3. As medalhas, a conta e o ranking
     4. O desafio: a grade
     5. Enunciado, resposta, dicas, retorno
     6. Resolvido
     7. A bancada e o código
     8. Tela estreita e movimento reduzido
   ========================================================================= */


/* `hidden` tem de esconder de verdade. Sem isto, todo bloco com display
   próprio (a resposta é uma grade, as dicas também) continuava na tela
   depois de escondido: o painel de resolvido aparecia EMBAIXO das opções. */
.pagina-jogo [hidden] { display: none !important; }


/* =========================================================================
   1. O MAPA: CABEÇALHO E PLACAR
   ========================================================================= */
.jogo-mapa { padding-bottom: 56px; }
.jogo-mapa__cabeca.hero { padding: clamp(34px, 6vw, 64px) 0 26px; }
.jogo-mapa__cabeca .sub { margin-bottom: 26px; }

.placar {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 0; padding: 0;
}
.placar__item {
  min-width: 128px; padding: 12px 20px;
  border: 1px solid var(--vidro-borda); border-radius: var(--raio);
  background: var(--vidro); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--sombra-1);
}
.placar dt { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.placar dd { margin: 3px 0 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; color: var(--texto); font-variant-numeric: tabular-nums; }

.jogo-aviso {
  max-width: 720px; margin: 0 auto 22px; padding: 12px 18px;
  border: 1px solid color-mix(in srgb, var(--ambar) 55%, var(--borda)); border-radius: var(--raio-sm);
  background: color-mix(in srgb, var(--ambar) 12%, var(--bg-elevado));
  color: var(--texto); font-weight: 600; text-align: center;
}

.jogo-nota { margin: 28px 0 0; text-align: center; font-size: .86rem; color: var(--texto-suave); }
.jogo-zerar {
  margin-left: 6px; padding: 0; border: 0; background: none;
  color: var(--ac-texto); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer;
}


/* =========================================================================
   2. OS NÍVEIS E AS PASTILHAS
   ========================================================================= */
.niveis { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.nivel {
  padding: 20px 22px;
  border: 1px solid var(--vidro-borda); border-radius: var(--raio);
  background: var(--vidro); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--vidro-brilho), 0 2px 6px -2px rgba(8, 12, 20, .16), 0 14px 34px -16px rgba(8, 12, 20, .26);
}
.nivel--completo { border-color: color-mix(in srgb, var(--verde) 45%, var(--vidro-borda)); }
.nivel--trancado { opacity: .72; }

.nivel__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.nivel__numero {
  display: grid; place-items: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 13px;
  background: linear-gradient(145deg, var(--teal-300), var(--teal-600));
  color: #fff; font-weight: 800; font-size: 1.15rem;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--teal-500) 38%, transparent);
}
.nivel--trancado .nivel__numero { background: var(--bg-suave); color: var(--texto-suave); box-shadow: none; }
.nivel__nomes { flex: 1; min-width: 220px; }
.nivel__nome { margin: 0; font-size: 1.12rem; font-weight: 800; }
.nivel__desc { margin: 2px 0 0; font-size: .9rem; color: var(--texto-medio); }
.nivel__formato {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 99px;
  border: 1px solid var(--borda); background: var(--bg-elevado);
  font-size: .8rem; font-weight: 700; color: var(--texto-medio);
}
.nivel__formato .ico { width: 15px; height: 15px; color: var(--ac-texto); }
.nivel__progresso { font-size: .84rem; font-weight: 700; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.nivel--completo .nivel__progresso { color: color-mix(in srgb, var(--verde) 70%, var(--texto)); }
.nivel__trava {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 0; font-size: .88rem; color: var(--texto-medio);
}
.nivel__trava .ico { width: 16px; height: 16px; }

/* auto-fit, e não auto-fill: com o zoom afastado (o --max cresce, style.css)
   o nível fica largo, e o auto-fill criava trilhas vazias — os quatro
   desafios ficavam na metade da esquerda. Na largura de sempre dá o mesmo. */
.pastilhas { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.pastilha {
  display: flex; flex-direction: column; gap: 5px; height: 100%;
  padding: 13px 15px; border-radius: var(--raio-sm);
  border: 1px solid var(--borda); background: var(--bg-elevado);
  color: var(--texto); text-decoration: none;
  transition: transform var(--mola), border-color var(--suave), box-shadow var(--suave);
}
a.pastilha:hover, a.pastilha:focus-visible {
  text-decoration: none; transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ac-400) 60%, var(--borda));
  box-shadow: var(--sombra-2), 0 0 26px -10px color-mix(in srgb, var(--ac-400) 45%, transparent);
}
.pastilha__titulo { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.pastilha__estado { font-size: .8rem; font-weight: 700; color: var(--ac-texto); }
.pastilha--resolvida .pastilha__estado { color: color-mix(in srgb, var(--verde) 72%, var(--texto)); }
.pastilha--trancada { background: var(--bg-suave); color: var(--texto-suave); }
.pastilha--trancada .pastilha__estado { color: var(--texto-suave); }
/* No nível de formatos variados, o de cada desafio. */
.pastilha__formato { font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--texto-suave); }


/* =========================================================================
   3. AS MEDALHAS, A CONTA E O RANKING
   ========================================================================= */
.medalhas { margin-top: 38px; }
.medalhas__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.medalhas h2 { margin: 0; font-size: 1.35rem; font-weight: 800; }
.medalhas__total {
  flex: 1; min-width: 140px; max-width: 300px; height: 10px; border-radius: 99px; overflow: hidden;
  background: var(--bg-suave); box-shadow: inset 0 1px 2px rgba(8, 12, 20, .12);
}
.medalhas__total i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fbbf24, #f59e0b, #ea580c); transition: width .6s ease; }
.medalhas__conta { font-size: .9rem; font-weight: 800; color: var(--texto-medio); font-variant-numeric: tabular-nums; }
.medalhas__sub { margin: 20px 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }

/* ---- A trilha: os níveis em fila, e o troféu no fim ----
   Cada nó desenha a linha até o PRÓXIMO: o trilho cinza no ::before e o
   que já andou no ::after, esticado pela fração --enche que o jogo.js põe.
   Os nós são colunas iguais sem vão, então o centro do vizinho fica a
   100% da largura, e a linha vai de meia medalha depois do meu centro até
   meia medalha antes do dele. */
.trilha {
  list-style: none; margin: 0; padding: 22px 14px 20px;
  /* Uma coluna por nó, quantos forem: era repeat(6, …), os cinco níveis e
     o troféu, e o nível 6 caía numa segunda linha sem trilho até ela. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr);
  overflow-x: auto;
  border: 1px solid var(--vidro-borda); border-radius: var(--raio);
  background: var(--vidro); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--vidro-brilho), 0 2px 6px -2px rgba(8, 12, 20, .16), 0 14px 34px -16px rgba(8, 12, 20, .26);
}
.trilha__no { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 6px; text-align: center; }
.trilha__no:not(:last-child)::before,
.trilha__no:not(:last-child)::after {
  content: ''; position: absolute; top: 29px; left: calc(50% + 38px); right: calc(-50% + 38px);
  height: 6px; border-radius: 99px;
}
.trilha__no:not(:last-child)::before { background: var(--bg-suave); box-shadow: inset 0 1px 2px rgba(8, 12, 20, .1); }
.trilha__no:not(:last-child)::after {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  transform: scaleX(var(--enche, 0)); transform-origin: left; transition: transform .6s ease;
}

.trilha__selo {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 64px; height: 64px; margin-bottom: 8px;
  color: var(--texto-suave); font-size: 1.45rem;
}
/* O hexágono é um pseudo-elemento: o recorte no próprio selo cortaria o
   cadeado, que pendura para fora dele. */
.trilha__selo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--bg-suave);
}
.trilha__selo b { font-weight: 900; }
.trilha__selo svg { width: 28px; height: 28px; }
.trilha__cadeado {
  position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--texto-medio); color: var(--bg-elevado); box-shadow: 0 0 0 3px var(--bg-elevado);
}
.trilha__cadeado .ico { width: 13px; height: 13px; }
.trilha__nome { font-size: .9rem; font-weight: 800; color: var(--texto-medio); }
.trilha__sub { font-size: .76rem; line-height: 1.3; color: var(--texto-suave); }
.trilha__estado { margin-top: 4px; font-size: .74rem; font-weight: 800; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.trilha__estado--ok { color: color-mix(in srgb, var(--verde) 72%, var(--texto)); }

.trilha__no.medalha--ganha .trilha__selo { color: #fff; filter: drop-shadow(0 5px 10px color-mix(in srgb, var(--teal-500) 45%, transparent)); }
.trilha__no.medalha--ganha .trilha__selo::before { background: linear-gradient(160deg, var(--teal-300), var(--teal-600)); }
.trilha__no.medalha--ganha .trilha__nome { color: var(--texto); }
.trilha__no--trofeu.medalha--ganha .trilha__selo { color: #3b0764; filter: drop-shadow(0 5px 12px rgba(124, 58, 237, .45)); }
.trilha__no--trofeu.medalha--ganha .trilha__selo::before { background: conic-gradient(from 200deg, #f0abfc, #a78bfa, #67e8f9, #fde68a, #f0abfc); }
/* Onde o aluno está agora: um anel girando devagar em volta do selo. */
.trilha__no--agora .trilha__selo { color: var(--ac-texto); }
.trilha__no--agora .trilha__selo::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--ac-400) 75%, transparent);
  animation: trilhaAgora 14s linear infinite;
}
.trilha__no--agora .trilha__nome { color: var(--texto); }
@keyframes trilhaAgora { to { transform: rotate(360deg); } }

/* ---- As especiais ---- */
.medalhas__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.medalha--especial {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 16px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--bg-elevado); box-shadow: var(--sombra-1);
  color: var(--texto-suave);
}
.medalha__ico {
  flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--bg-suave); color: var(--texto-suave);
}
.medalha__ico svg { width: 23px; height: 23px; }
.medalha__txt { display: grid; gap: 3px; min-width: 0; flex: 1; }
.medalha__nome { font-size: .95rem; color: var(--texto-medio); }
.medalha__desc { font-size: .8rem; line-height: 1.4; }
.medalha__ok { justify-self: start; margin-top: 5px; padding: 2px 10px; border-radius: 99px; font-size: .72rem; font-weight: 800;
  background: color-mix(in srgb, var(--verde) 15%, transparent); color: color-mix(in srgb, var(--verde) 75%, var(--texto)); }
.medalha__prog { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.medalha__barra { flex: 1; height: 6px; border-radius: 99px; overflow: hidden; background: var(--bg-suave); }
.medalha__barra i { display: block; height: 100%; border-radius: inherit; background: var(--ac-400); }
.medalha__conta { font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.medalha--especial.medalha--ganha {
  border-color: color-mix(in srgb, var(--ambar) 55%, var(--borda));
  background: linear-gradient(135deg, color-mix(in srgb, var(--ambar) 13%, var(--bg-elevado)), var(--bg-elevado) 65%);
}
.medalha--ganha .medalha__ico { background: linear-gradient(160deg, #fde68a, #f59e0b 55%, #c2410c); color: #5b2a00; }
.medalha--ganha .medalha__nome { color: var(--texto); }


/* A faixa de conta, embaixo do placar: só a oferta de levar e a nota do
   professor. Quem é o jogador mora no cabeçalho (style.css, conta-menu). */
.jogo-conta { margin-top: 18px; display: grid; justify-items: center; gap: 10px; }
.jogo-conta__levar {
  max-width: 560px; padding: 12px 16px; border-radius: var(--raio-sm);
  border: 1px solid color-mix(in srgb, var(--ac-400) 45%, var(--borda));
  background: color-mix(in srgb, var(--ac-400) 9%, var(--bg-elevado));
  font-size: .9rem; color: var(--texto);
}
.jogo-conta__levar p { margin: 0 0 10px; }
.jogo-conta__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* O X da janela de entrar: o do laboratório mora no laboratorio.css, que
   esta página não carrega. */
.jogo-fechar {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: transparent; color: var(--texto-suave); cursor: pointer;
}
.jogo-fechar:hover { color: var(--texto); border-color: var(--borda-forte); }
.jogo-fechar svg { width: 15px; height: 15px; }

.jogo-ranking { margin-top: 38px; }
.jogo-ranking h2 { margin: 0 0 14px; font-size: 1.35rem; font-weight: 800; }
.jogo-ranking__vazio { margin: 0; color: var(--texto-medio); }
.jogo-ranking__tabela {
  width: 100%; max-width: 640px; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--borda); border-radius: var(--raio-sm); overflow: hidden;
  background: var(--bg-elevado); font-size: .9rem; font-variant-numeric: tabular-nums;
}
.jogo-ranking__tabela th {
  padding: 9px 14px; text-align: left; background: var(--bg-suave);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave);
}
.jogo-ranking__tabela td { padding: 9px 14px; border-top: 1px solid var(--borda); color: var(--texto-medio); }
.jogo-ranking__posicao { width: 1%; white-space: nowrap; font-weight: 800; color: var(--texto); }
.jogo-ranking__pontos { font-weight: 800; color: var(--texto); }
.jogo-ranking__voce td { background: color-mix(in srgb, var(--ac-400) 14%, var(--bg-elevado)); color: var(--texto); }
.jogo-ranking__marca { font-weight: 700; color: var(--ac-texto); }
/* O selo de administrador: quem decide é o servidor (12/10/2026). */
.jogo-ranking__selo {
  margin-right: 6px; padding: 1px 6px; border-radius: 6px;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  background: var(--ac-500); color: #fff;
}
.jogo-ranking__pula td { padding: 2px 14px; text-align: center; color: var(--texto-suave); }

/* Geral | Turma …: botões pequenos, e o escolhido cheio (os outros vêm com
   o .btn--secundario). */
.jogo-ranking__turmas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.jogo-ranking__escolha { min-height: 34px; }
.jogo-ranking__turma {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: .88rem; color: var(--texto-medio);
}

/* A conta de professor jogando: a nota de que nada fica guardado. */
.jogo-conta__nota { max-width: 560px; margin: 0; font-size: .84rem; color: var(--texto-suave); text-align: center; }

/* O convite de turma: a pergunta, com o nome da turma e o do professor, e
   os dois botões. Destaque de acento, como a oferta de levar o progresso:
   é o que o aluno veio fazer quando leu o QR. */
.jogo-convite {
  max-width: 560px; margin: 16px auto 0; padding: 14px 18px; border-radius: var(--raio-sm);
  border: 1px solid color-mix(in srgb, var(--ac-400) 60%, var(--borda));
  background: color-mix(in srgb, var(--ac-400) 14%, var(--bg-elevado));
  box-shadow: var(--sombra-1);
}
.jogo-convite__texto { margin: 0 0 10px; font-weight: 700; color: var(--texto); }
.jogo-convite__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }


/* =========================================================================
   4. O DESAFIO: A GRADE
   ========================================================================= */
.pagina-jogo.jogo--no-desafio .rodape { display: none; }

.desafio { display: flex; flex-direction: column; padding: 0 16px 14px; }

.desafio__barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  min-height: 46px; padding: 6px 4px;
}
.desafio__voltar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px; border-radius: 99px;
  border: 1px solid var(--borda); background: var(--bg-elevado);
  color: var(--texto-medio); font-size: .86rem; font-weight: 700; text-decoration: none;
}
.desafio__voltar:hover { color: var(--texto); text-decoration: none; border-color: var(--borda-forte); }
.desafio__voltar .ico { width: 16px; height: 16px; }
.desafio__nivel { font-size: .86rem; font-weight: 600; color: var(--texto-suave); }
.desafio__valor {
  margin-left: auto; padding: 5px 13px; border-radius: 99px;
  background: color-mix(in srgb, var(--ac-400) 14%, var(--bg-elevado));
  border: 1px solid color-mix(in srgb, var(--ac-400) 40%, var(--borda));
  color: var(--ac-texto); font-size: .86rem; font-weight: 800; font-variant-numeric: tabular-nums;
}

.desafio__grade {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 14px;
}

.desafio__lado {
  display: flex; flex-direction: column; gap: 12px; min-height: 0;
  overflow-y: auto; padding: 2px 4px 8px 2px;
}
.desafio__titulo { margin: 2px 0 0; font-size: 1.45rem; line-height: 1.2; font-weight: 800; letter-spacing: -.03em; outline: none; }


/* =========================================================================
   5. ENUNCIADO, RESPOSTA, DICAS, RETORNO
   ========================================================================= */
/* O enunciado é um cartão só, o esperado em cima e o sintoma embaixo,
   cada um com o seu sinal (✓ e ✗): é a comparação que o aluno tem de
   fazer, e dois cartões soltos liam como dois avisos sem relação.
   flex-shrink: a coluna tem altura fixa, e sem ele o cartão encolhia e
   cortava o sintoma. */
.enunciado {
  flex-shrink: 0; display: grid;
  border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
  background: var(--bg-elevado); box-shadow: var(--sombra-1);
}
.enunciado__item { position: relative; padding: 13px 16px 13px 54px; }
.enunciado__item + .enunciado__item { border-top: 1px dashed var(--borda-forte); }
.enunciado__item::before {
  content: ''; position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sinal); box-shadow: 0 3px 10px -3px var(--sinal);
}
.enunciado__item::after {
  content: ''; position: absolute; left: 22px; top: 20px; width: 14px; height: 14px; background: #fff;
  -webkit-mask: var(--marca) center / contain no-repeat; mask: var(--marca) center / contain no-repeat;
}
.enunciado__item h3 { margin: 0 0 3px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.enunciado__item p { margin: 0; font-size: .94rem; line-height: 1.5; color: var(--texto); }
.enunciado__item--deveria {
  --sinal: var(--verde);
  --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.enunciado__item--deveria h3 { color: color-mix(in srgb, var(--verde) 70%, var(--texto)); }
.enunciado__item--sintoma {
  --sinal: var(--coral);
  --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  background: color-mix(in srgb, var(--coral) 7%, var(--bg-elevado));
}
.enunciado__item--sintoma h3 { color: color-mix(in srgb, var(--coral) 80%, var(--texto)); }
/* A pista de todo desafio: a lupa, e o link que abre a aba Código. */
.enunciado__item--pista {
  --sinal: var(--ac-500);
  --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");
}
.enunciado__item--pista h3 { color: var(--ac-texto); }
.enunciado__item--pista p { font-size: .86rem; color: var(--texto-medio); }
.enunciado__link {
  padding: 0 7px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--ac-400) 50%, var(--borda));
  background: color-mix(in srgb, var(--ac-400) 12%, var(--bg-elevado));
  color: var(--ac-texto); font: inherit; font-weight: 800; cursor: pointer;
}
.enunciado__link:hover { background: color-mix(in srgb, var(--ac-400) 22%, var(--bg-elevado)); }

/* O que dá para fazer no conserto, e o quadro das falhas quando são duas. */
.resposta__jeitos { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .84rem; line-height: 1.45; color: var(--texto-medio); }
.resposta__falhas {
  padding: 12px 14px; border-radius: var(--raio-sm);
  border: 1px solid color-mix(in srgb, var(--coral) 45%, var(--borda));
  background: color-mix(in srgb, var(--coral) 7%, var(--bg-elevado));
}
.resposta__falhas-titulo { margin: 0; font-size: .92rem; font-weight: 800; color: var(--texto); }
.resposta__falhas-nota { margin: 2px 0 8px; font-size: .8rem; color: var(--texto-medio); }
.resposta__falhas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.resposta__falha {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border-radius: 99px;
  border: 1px solid var(--borda); background: var(--bg-elevado); font-size: .82rem; font-weight: 700; color: var(--texto-medio);
}
.resposta__falha-marca {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--coral) 18%, transparent); color: color-mix(in srgb, var(--coral) 80%, var(--texto)); font-weight: 800;
}
.resposta__falha--ok { border-color: color-mix(in srgb, var(--verde) 50%, var(--borda)); color: var(--texto); }
.resposta__falha--ok .resposta__falha-marca { background: var(--verde); color: #fff; }

.resposta { display: grid; gap: 10px; }
.resposta__pergunta { margin: 0; font-size: 1rem; font-weight: 800; color: var(--texto); }
.resposta__apontado {
  margin: 0; padding: 10px 13px; border-radius: var(--raio-sm);
  border: 1px dashed var(--borda-forte); font-size: .88rem; color: var(--texto-medio);
}
.resposta__apontado--cheio { border-style: solid; border-color: color-mix(in srgb, var(--ac-400) 55%, var(--borda)); color: var(--texto); font-weight: 600; }
.resposta__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.resposta__acoes .btn { flex: 1 1 auto; justify-content: center; padding-top: 13px; padding-bottom: 13px; }

/* Cada opção é um cartão com a sua letra, A a D. A bolinha do rádio sai
   de vista (continua ali, para o teclado e o leitor de tela: as setas
   trocam de opção e o foco ganha o contorno), e quem diz "escolhida" é a
   letra que enche de cor. */
.opcoes { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; min-width: 0; counter-reset: opcao; }
.opcoes legend { margin-bottom: 8px; padding: 0; }
.opcao {
  position: relative; counter-increment: opcao;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 11px 14px 11px 12px; border-radius: var(--raio-sm);
  border: 1px solid var(--borda); background: var(--bg-elevado);
  box-shadow: 0 1px 0 var(--borda);
  cursor: pointer;
  transition: transform var(--mola), border-color var(--rapido), box-shadow var(--rapido);
}
.opcao::before {
  content: counter(opcao, upper-alpha);
  flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: var(--bg-suave); color: var(--texto-medio); font-weight: 800; font-size: .9rem;
  transition: background var(--rapido), color var(--rapido);
}
.opcao:hover { transform: translateY(-2px); border-color: var(--borda-forte); box-shadow: var(--sombra-1); }
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opcao:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--ac-400) 60%, transparent); outline-offset: 2px; }
.opcao__texto { flex: 1; min-width: 0; font-size: .93rem; font-weight: 600; line-height: 1.4; }
.opcao:has(input:checked) { border-color: var(--ac-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-400) 22%, transparent); }
.opcao:has(input:checked)::before { background: linear-gradient(145deg, var(--ac-400), var(--ac-500)); color: #fff; }
.opcao--riscada { cursor: default; background: var(--bg-suave); box-shadow: none; }
.opcao--riscada:hover { transform: none; border-color: var(--borda); box-shadow: none; }
.opcao--riscada::before { content: '✗'; background: color-mix(in srgb, var(--coral) 16%, transparent); color: color-mix(in srgb, var(--coral) 80%, var(--texto)); }
.opcao--riscada .opcao__texto { font-weight: 500; text-decoration: line-through; color: var(--texto-suave); }
.opcao__porque { flex-basis: 100%; padding-left: 42px; font-size: .82rem; line-height: 1.45; color: var(--texto-medio); }

/* O botão secundário do jogo: mesma forma do .btn, sem o degradê. */
.btn--secundario {
  background: var(--bg-elevado); color: var(--texto);
  border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-1);
}
.btn--secundario:hover { color: var(--texto); box-shadow: var(--sombra-2); }
.btn--secundario::after { display: none; }

.jogo-retorno { margin: 0; font-size: .9rem; line-height: 1.45; }
.jogo-retorno:empty { display: none; }
.jogo-retorno--erro { padding: 10px 13px; border-radius: var(--raio-sm); border: 1px solid color-mix(in srgb, var(--coral) 45%, var(--borda)); background: color-mix(in srgb, var(--coral) 9%, var(--bg-elevado)); }
.jogo-retorno--aviso { color: var(--texto-medio); }
.jogo-retorno--ok { color: color-mix(in srgb, var(--verde) 70%, var(--texto)); font-weight: 600; }

.jogo-dicas {
  flex-shrink: 0; padding: 14px 16px; border-radius: var(--raio);
  border: 1px dashed color-mix(in srgb, var(--ambar) 60%, var(--borda));
  background: color-mix(in srgb, var(--ambar) 7%, var(--bg-elevado));
}
.jogo-dicas__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jogo-dicas__cabeca h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; font-weight: 800; }
/* A lâmpada da dica */
.jogo-dicas__cabeca h3::before {
  content: ''; width: 22px; height: 22px; background: color-mix(in srgb, var(--ambar) 80%, var(--texto));
  -webkit-mask: var(--lampada) center / contain no-repeat; mask: var(--lampada) center / contain no-repeat;
  --lampada: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}
.btn-dica {
  padding: 6px 12px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--ambar) 55%, var(--borda));
  background: color-mix(in srgb, var(--ambar) 12%, var(--bg-elevado));
  color: var(--texto); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.btn-dica small { font-weight: 600; color: var(--texto-medio); }
.btn-dica:hover { background: color-mix(in srgb, var(--ambar) 20%, var(--bg-elevado)); }
.btn-dica[disabled] { opacity: .55; cursor: default; }
.jogo-dicas__lista { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 7px; }
.dica { font-size: .88rem; line-height: 1.45; }
.dica--vazia { list-style: none; margin-left: -20px; color: var(--texto-suave); }
.dica__falha { display: inline-block; margin-right: 6px; font-size: .72rem; font-weight: 800; color: var(--ac-texto); text-transform: uppercase; letter-spacing: .06em; }
.dica__origem { display: inline-block; margin-left: 6px; font-size: .74rem; font-weight: 700; color: var(--texto-suave); }


/* =========================================================================
   6. RESOLVIDO
   ========================================================================= */
.resolvido {
  padding: 16px 16px 18px; border-radius: var(--raio);
  border: 1px solid color-mix(in srgb, var(--verde) 50%, var(--borda));
  background: color-mix(in srgb, var(--verde) 8%, var(--bg-elevado));
  box-shadow: var(--sombra-2);
  animation: resolvidoEntra .45s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes resolvidoEntra { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.resolvido__titulo { margin: 0; font-size: 1.3rem; font-weight: 800; color: color-mix(in srgb, var(--verde) 65%, var(--texto)); outline: none; }
.resolvido__pontos { margin: 4px 0 12px; font-size: .9rem; color: var(--texto-medio); }
.resolvido__pontos b { margin-right: 6px; font-size: 1.15rem; color: var(--texto); }
.resolvido h4 { margin: 12px 0 4px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.resolvido p { margin: 0 0 6px; font-size: .9rem; line-height: 1.5; }
.resolvido__medalhas { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.resolvido__medalhas li {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px;
  background: linear-gradient(145deg, #fde68a, #fbbf24); color: #5b3500; font-size: .82rem; font-weight: 800;
}
.resolvido__medalhas svg { width: 15px; height: 15px; }
.resolvido__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.resolvido .resolvido__conta { font-size: .84rem; font-weight: 600; color: color-mix(in srgb, var(--verde) 65%, var(--texto)); }
.resolvido .resolvido__conta--erro { color: var(--texto); padding: 8px 10px; border-radius: var(--raio-sm);
  background: color-mix(in srgb, var(--ambar) 14%, var(--bg-elevado)); }


/* =========================================================================
   7. A BANCADA E O CÓDIGO
   ========================================================================= */
.desafio__bancada {
  position: relative;
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--bg-elevado); overflow: hidden;
  box-shadow: var(--sombra-2);
}
.desafio__abas { display: flex; gap: 4px; padding: 6px 8px 0; border-bottom: 1px solid var(--borda); }
.desafio__aba {
  padding: 8px 16px; border: 0; border-radius: 10px 10px 0 0;
  background: transparent; color: var(--texto-suave);
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.desafio__aba[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--ac-500); }
/* Enquanto o aluno não abriu o código deste desafio, a aba tem um ponto. */
.desafio__aba--nova::after {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; vertical-align: 2px;
  border-radius: 50%; background: var(--ac-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-400) 25%, transparent);
}
.desafio__aba:hover { color: var(--texto); }

/* O painel do código fica POR CIMA da bancada, e não no lugar dela: um
   quadro escondido mede zero, e o laboratório enquadraria o circuito
   num espaço que não existe. */
.desafio__painel { position: relative; flex: 1; min-height: 0; }
.desafio__quadro { position: absolute; inset: 0; }
.desafio__quadro iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.desafio__painel--codigo {
  position: absolute; left: 0; right: 0; bottom: 0; top: 42px; z-index: 2;
  display: flex; flex-direction: column;
  background: var(--bg-elevado); overflow: auto; padding: 12px 16px 16px;
}
.desafio__painel--codigo[hidden] { display: none; }
.desafio__nota { margin: 0 0 10px; font-size: .86rem; color: var(--texto-medio); }
.desafio__codigo {
  margin: 0; padding: 14px 16px; border-radius: var(--raio-sm);
  background: var(--bg-suave); border: 1px solid var(--borda);
  font: .84rem/1.55 'JetBrains Mono', ui-monospace, monospace; color: var(--texto);
  white-space: pre; overflow: auto; tab-size: 2;
}


/* =========================================================================
   8. TELA ESTREITA E MOVIMENTO REDUZIDO
   -------------------------------------------------------------------------
   Em computador a tela do desafio tem a altura exata da janela. Abaixo de
   900 px (ou numa janela baixa demais) as colunas empilham, a página volta
   a rolar e a bancada ganha uma altura própria — o celular joga, apertado.
   ========================================================================= */
@media (min-width: 900px) and (min-height: 560px) {
  /* 69 = os 68 px do cabeçalho + a borda de 1 px dele. */
  .desafio { height: calc(100vh - 69px); height: calc(100dvh - 69px); }
}
@media (max-width: 899px), (max-height: 559px) {
  .desafio__grade { grid-template-columns: minmax(0, 1fr); }
  .desafio__lado { overflow: visible; }
  .desafio__bancada { height: 72vh; min-height: 420px; }
}
/* No celular a bancada vem ANTES da pergunta (12/10/2026): embaixo dela era
   preciso rolar para ver o defeito, e o defeito é a pergunta. A janela baixa
   do computador continua com a ordem de sempre: ali cabe lado a lado de novo
   assim que ela cresce. */
@media (max-width: 899px) {
  .desafio__bancada { order: -1; height: 52vh; height: 52dvh; min-height: 300px; }
}
/* O Ampliar (style.css) fica no canto de cima da caixa, e aqui esse canto é
   o das abas: ele tapava a aba Bancada (16/10). Desce para o canto da
   bancada — as abas têm 51 px com o dedo (6 de respiro, 44 da aba, a borda). */
@media (max-width: 899.98px) and (pointer: coarse) {
  .desafio__bancada > .ponte-ampliar:not([hidden]) { top: 59px; }
}
/* No celular a trilha vira duas fileiras de quatro (sete níveis e o
   troféu): rolando de lado, o troféu do fim ficava fora da tela, e é ele
   que diz aonde a trilha vai. A linha do quarto nó não tem vizinho à
   direita, e some. Com quatro por fileira a coluna tem uns 80 px, e o
   selo de 64 deixava 6 px de trilho entre um e outro: no celular ele
   encolhe para 50, e o trilho volta a aparecer. */
/* As duas fileiras começam onde a fileira única deixa de caber (8 nós de
   96 px, uns 842 px de tela): entre 641 e 860 ela rolava de lado dentro da
   caixa e o troféu sumia à direita — o notebook da escola com zoom em 200%.
   O teste-paginas faz a conta. */
@media (max-width: 860px) {
  .trilha { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 20px; padding-inline: 4px; }
  .trilha__no:nth-child(4n)::before, .trilha__no:nth-child(4n)::after { display: none; }
}
@media (max-width: 640px) {
  .trilha__no { padding: 0 2px; }
  .trilha__no:not(:last-child)::before, .trilha__no:not(:last-child)::after { top: 22px; left: calc(50% + 29px); right: calc(-50% + 29px); }
  .trilha__selo { width: 50px; height: 50px; font-size: 1.2rem; }
  .trilha__selo svg { width: 22px; height: 22px; }
  .trilha__cadeado { width: 20px; height: 20px; }
  .trilha__nome { font-size: .82rem; }
  .trilha__sub { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .resolvido { animation: none; }
  a.pastilha:hover, a.pastilha:focus-visible, .opcao:hover { transform: none; }
  .trilha__no--agora .trilha__selo::after { animation: none; }
}

/* =========================================================================
   O CELULAR (12/10/2026): o alvo de toque com 44 px (conferir-celular)
   ========================================================================= */
@media (max-width: 720px), (pointer: coarse) {
  .jogo-zerar { min-height: 44px; }
  .desafio__voltar, .btn-dica, .desafio__aba { min-height: 44px; }
}