/* juiz — estilos do jogo, da aula e do laboratório (mundo AI Engineer). */

/* ---------- aula ---------- */
/* prefixo .jza- · demos de js/games/juiz/aula.js (os balões e o bloco "rodar no LLM" vêm de css/ai.css) */

/* canvases só de leitura: o dedo que começa neles ainda rola a página
   (duas classes: lesson.css carrega depois e põe touch-action: none em .ls-canvas) */
.ls-canvas.jza-canvas { touch-action: pan-y; }
.ls-canvas.jza-canvas.tap { cursor: pointer; touch-action: manipulation; }
.ls-canvas.jza-canvas.tap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.jza-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-width: 0; }
.jza-ctrls .ls-choices { min-width: 0; max-width: 100%; }
.jza-ctrls .seg { flex-wrap: wrap; max-width: 100%; }
.jza-cap { margin: 0; font: 600 10px/1.4 var(--pixel-ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* pergunta, referência e resposta em destaque */
.jza-q { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 2px 10px; margin: 0; padding: 9px 12px; border: 2px solid var(--line-2); border-left: 4px solid var(--info); background: var(--bg); font-size: 14px; line-height: 1.45; color: var(--text); }
.jza-q > b { padding-top: 3px; font: 600 10px/1.4 var(--pixel-ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.jza-q > span { min-width: 0; overflow-wrap: anywhere; }
.jza-q.ref { border-left-color: var(--good); color: var(--text-2); }
.jza-q.ans { border-left-color: var(--accent); }
@media (max-width: 520px) { .jza-q { grid-template-columns: 1fr; } }

.jza-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.jza-legend span { display: inline-flex; align-items: center; gap: 5px; }
.jza-legend i { flex: none; display: inline-block; width: 14px; height: 8px; border: 1px solid #000; }
.jza-legend .k-met { background: #7ad7ff; }
.jza-legend .k-hum { background: #ffd23f; }
.jza-legend .k-short { background: #7ad7ff; }
.jza-legend .k-long { background: #ff8c2e; }
/* as mesmas cores das células do gráfico (aula.js, parte 5) */
.jza-legend .k-diag { background: #294834; }
.jza-legend .k-up { background: #2e2a44; }

/* 1 · as respostas candidatas (marcar as que a conta de palavras erra) */
.jza-cands { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jza-cand { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; align-items: baseline; width: 100%; padding: 8px 10px; border: 2px solid var(--line-2); border-left-width: 4px; background: var(--surface); color: var(--text-2); font: 400 13.5px/1.45 var(--sans); text-align: left; box-shadow: 2px 2px 0 0 #000; cursor: pointer; }
.jza-cand:hover { border-color: var(--accent); color: var(--text); }
.jza-cand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jza-cand:active { transform: translate(2px, 2px); box-shadow: none; }
.jza-cand.hit { border-color: var(--good); background: var(--good-soft); color: var(--text); }
.jza-cand.miss { border-color: var(--bad); background: var(--bad-soft); }
.jza-tag { display: inline-grid; place-items: center; height: 20px; border: 1px solid #000; background: var(--bg); font-size: 11.5px; color: var(--text); }
.jza-cand[aria-pressed='true'] .jza-tag { background: var(--accent); color: var(--accent-ink); }
.jza-why { grid-column: 2; font: 500 12px/1.4 var(--mono); color: var(--muted); }
.jza-why:empty { display: none; }
.jza-cand.hit .jza-why { color: var(--good); }
.jza-cand.miss .jza-why { color: var(--bad); }
.jza-txt { min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.45; color: inherit; overflow-wrap: anywhere; }
.jza-cost { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 2px dashed var(--line-2); background: var(--bg); }

/* 2 · o veredito: resposta crua × o que ler_veredito leu */
.jza-verdict, .jza-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
@media (max-width: 720px) { .jza-verdict, .jza-duo { grid-template-columns: 1fr; } }
.jza-box { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border: 2px solid var(--line-2); background: var(--bg); }
.jza-raw { display: block; padding: 0; border: 0; background: none; font: 400 12px/1.5 var(--mono); color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.jza-nota { display: flex; align-items: center; gap: 8px; margin: 0; }
.jza-pips { display: inline-flex; gap: 3px; }
.jza-pips i { width: 14px; height: 14px; border: 2px solid var(--line-2); background: var(--bg-2); }
.jza-pips i.on { border-color: #000; background: var(--coin); box-shadow: 1px 1px 0 0 #000; }
.jza-nota b { font: 500 22px/1 var(--pixel); color: var(--text); }
.jza-nota small { font-size: 12px; color: var(--muted); }
.jza-just { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.jza-hum { margin: 0; padding-top: 6px; border-top: 2px dashed var(--line); font: 500 12px/1.4 var(--mono); color: var(--muted); }
.jza-hum b { color: var(--text); font-weight: 500; }
.jza-hum .good, .jza-final.good, .jza-msg.good { color: var(--good); }
.jza-hum .bad, .jza-final.bad, .jza-msg.bad { color: var(--bad); }
.jza-hum .acc { color: var(--accent); }
.jza-final { margin: 0; font: 500 13px/1.45 var(--mono); color: var(--text-2); }

/* o pedido que vai para a API */
.jza-details { padding: 8px 10px; border: 2px dashed var(--line-2); background: var(--bg); }
.jza-details summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.jza-details summary:hover { color: var(--text); }
.jza-details[open] summary { margin-bottom: 8px; }
.jza-req { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow: auto; }
.jza-req .ai-msg { max-width: 100%; font-size: 12.5px; }

/* 3 · par a par nas duas ordens */
.jza-pick { margin: 0; font: 500 12.5px/1.4 var(--mono); color: var(--muted); }
.jza-pick b { color: var(--accent); font-weight: 600; }

/* 5 · a rubrica escolhida e a tabela das 10 respostas */
.jza-rub { margin: 0; max-height: 170px; overflow: auto; padding: 10px 12px; border: 2px dashed var(--line-2); background: var(--bg); font: 400 12px/1.5 var(--mono); color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.jza-msg { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.jza-msg:empty { display: none; }
.jza-scroll { max-width: 100%; overflow-x: auto; }
.jza-table { width: 100%; }
.jza-table th, .jza-table td { padding: 6px 10px; }
.jza-table .jza-td { min-width: 200px; text-align: left; font: 400 13px/1.4 var(--sans); color: var(--text-2); }

/* ---------- jogo ---------- */
/* prefixo .jz- · js/games/juiz/game.js (base das fases em css/games.css: .sg-*) */

.jz .btn kbd { margin-left: 6px; }
@media (hover: none) and (pointer: coarse) { .jz kbd, .jz .jz-keys { display: none; } }

/* o desenho: mais baixo que o padrão; o dedo que começa nele ainda rola a página */
.jz .jz-canvas { height: 330px; touch-action: pan-y; }
.jz .jz-canvas.tap { cursor: pointer; }
.jz .jz-canvas.drag { cursor: ew-resize; }
.jz .jz-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .jz .jz-canvas { height: 230px; } }

/* numa coluna só (celular): título e objetivo, desenho, o caso, os botões e o retorno, nessa ordem */
@media (max-width: 920px) {
  .jz .sg-body { gap: 12px; }
  .jz .sg-main, .jz .sg-ctrl { display: contents; }
  .jz .sg-main > *, .jz .sg-ctrl > * { min-width: 0; }
  .jz #jz-head { order: 1; }
  .jz #jz-goal { order: 2; }
  .jz #jz-canvas { order: 3; }
  .jz #jz-caption { order: 4; }
  .jz #jz-board { order: 5; }
  .jz #jz-controls { order: 6; }
  .jz #jz-msg { order: 7; }
  .jz #jz-over { order: 8; }
  .jz #jz-actions { order: 9; }
  /* fase 5: as cartas e o botão antes da lista (longa) das respostas julgadas */
  .jz[data-kind='rubrica'] #jz-controls { order: 5; }
  .jz[data-kind='rubrica'] #jz-msg { order: 6; }
  .jz[data-kind='rubrica'] #jz-board { order: 7; }
}

.jz-controls, .jz-board, .jz-over { display: flex; flex-direction: column; gap: 10px; }
.jz-controls:empty, .jz-board:empty, .jz-msg:empty, .jz-over:empty { display: none; }
.jz .sg-formula .muted { color: var(--muted); }
.jz .sg-slider { grid-template-columns: auto minmax(0, 1fr) 56px; }
.jz-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.jz-sub b { color: var(--text); font-weight: 500; }
.jz-keys { color: var(--muted); }
.jz-small { margin: 0; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.jz-small.warn { color: var(--warn); }

/* pergunta, resposta e fato do Pomar */
.jz-case, .jz-duel { display: flex; flex-direction: column; gap: 6px; }
.jz-q { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 10px; margin: 0; padding: 8px 12px; border: 2px solid var(--line-2); border-left: 4px solid var(--info); background: var(--bg); font-size: 14px; line-height: 1.45; color: var(--text); }
.jz-q > b { padding-top: 3px; font: 600 10px/1.4 var(--pixel-ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.jz-q > span { min-width: 0; overflow-wrap: anywhere; }
.jz-q.ans { border-left-color: var(--accent); }
.jz-q.fato { border-left-color: var(--good); font-size: 13px; color: var(--text-2); }
@media (max-width: 520px) { .jz-q { grid-template-columns: 1fr; } }
.jz-fatos { padding: 8px 10px; border: 2px dashed var(--line-2); background: var(--bg); font-size: 13px; color: var(--text-2); }
.jz-fatos summary { cursor: pointer; color: var(--muted); }
.jz-fatos summary:hover { color: var(--text); }
.jz-fatos ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; line-height: 1.45; }

/* fase 1: os níveis da rubrica são os botões de nota */
.jz-levels { display: flex; flex-direction: column; gap: 6px; }
.jz-level {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border: 2px solid var(--line-2); background: var(--surface); color: var(--text-2);
  font: 400 13px/1.4 var(--sans); text-align: left; box-shadow: 2px 2px 0 0 #000;
}
.jz-level > b { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #000; background: var(--bg-2); font: 500 16px/1 var(--pixel); color: var(--text); }
.jz-level span { min-width: 0; overflow-wrap: anywhere; }
.jz-level em { display: inline-block; margin-left: 8px; padding: 1px 6px; border: 1px solid #000; font: 600 10px/1.4 var(--pixel-ui); font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; }
.jz-level em.you { background: var(--accent); color: var(--accent-ink); }
.jz-level em.ref { background: var(--coin); color: #000; }
.jz-level:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.jz-level:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.jz-level:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jz-level:disabled { cursor: default; opacity: 0.6; }
.jz-level.pick, .jz-level.ref { opacity: 1; color: var(--text); }
.jz-level.pick { border-color: var(--accent); background: var(--accent-soft); }
.jz-level.pick > b { background: var(--accent); color: var(--accent-ink); }
.jz-level.ref { border-color: var(--coin); }
.jz-level.ref > b { background: var(--coin); color: #000; }
.jz-level.pick.ref { border-color: var(--good); background: var(--good-soft); }

/* fases 2 e 3: as duas respostas lado a lado */
.jz-ab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .jz-ab { grid-template-columns: 1fr; } }
.jz-ans { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 8px; align-items: baseline; margin: 0; padding: 8px 10px; border: 2px solid var(--line-2); background: var(--bg); font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.jz-ans > b { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid currentColor; font: 500 12px/1 var(--mono); }
.jz-ans.a > b { color: #7ad7ff; }
.jz-ans.b > b { color: #ff8c2e; }
.jz-ans span { min-width: 0; overflow-wrap: anywhere; }
.jz-ans small { grid-column: 2; font: 400 11.5px/1.4 var(--mono); color: var(--muted); }
.jz-ans.chosen { border-color: var(--coin); box-shadow: 2px 2px 0 0 #000; }
.jz-ans.ok { background: var(--good-soft); }
.jz-ans.ok small { color: var(--good); }
.jz-ans.no { background: var(--bad-soft); }
.jz-ans.no small { color: var(--bad); }

/* fase 2: a tabela das duas ordens */
.jz-scroll { max-width: 100%; overflow-x: auto; }
.jz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jz-table th { padding: 6px 8px; border-bottom: 2px solid var(--line-2); font: 500 10px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; text-align: left; white-space: nowrap; color: var(--muted); }
.jz-table th small { display: block; letter-spacing: 0; text-transform: none; color: var(--faint); }
.jz-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text-2); }
.jz-table td code { padding: 0; border: 0; background: none; font: 500 12.5px/1 var(--mono); white-space: nowrap; color: var(--text); }
.jz-table td small { display: block; margin-top: 3px; font: 400 11.5px/1 var(--mono); white-space: nowrap; color: var(--accent); }
.jz-table .jz-td { min-width: 140px; line-height: 1.35; }
.jz-table tr[data-row] { cursor: pointer; }
.jz-table tr[data-row]:hover td { background: var(--surface-2); }
.jz-table tr.sel td { background: var(--surface-3); color: var(--text); }
.jz-table tr.wrong td { background: var(--bad-soft); }
.jz-table td.good { color: var(--good); }
.jz-table td.bad { color: var(--bad); }
.jz-mark { min-width: 58px; padding: 4px 8px; border: 2px solid var(--line-2); background: var(--surface); color: var(--muted); font: 500 12px/1.2 var(--mono); box-shadow: 2px 2px 0 0 #000; }
.jz-mark:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.jz-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jz-mark[aria-pressed='true'] { border-color: var(--bad); background: var(--bad-soft); color: var(--text); }
.jz-mark:disabled { cursor: default; box-shadow: none; }
/* celular: a tabela cabe em ~290 px (o número do duelo já aparece no quadro de cima) */
@media (max-width: 520px) {
  .jz-table th, .jz-table td { padding: 5px 5px; }
  .jz-table th { white-space: normal; }
  .jz-table .jz-n { display: none; }
  .jz-table .jz-td { min-width: 96px; }
  .jz-table td code { font-size: 12px; }
  .jz-mark { min-width: 48px; padding: 4px 6px; }
}

/* fase 3: o veredito do juiz e os dois botões de decisão */
.jz-verdict { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 12px; border: 2px dashed var(--coin); background: var(--bg); font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.jz-verdict .icon { flex: none; margin-top: 2px; color: var(--coin); }
.jz-verdict b { color: var(--text); font-weight: 500; }
.jz-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.jz-big {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; min-height: 64px;
  padding: 9px 30px 9px 11px; border: 2px solid var(--line-2); background: var(--surface); color: var(--text-2);
  text-align: left; box-shadow: 2px 2px 0 0 #000;
}
.jz-big b { font: 500 14px/1.25 var(--sans); color: var(--text); }
.jz-big span { font-size: 12px; line-height: 1.35; color: var(--muted); }
.jz-big kbd { position: absolute; top: 7px; right: 7px; }
.jz-big.ok b { color: var(--good); }
.jz-big.bad b { color: var(--bad); }
.jz-big:hover:not(:disabled) { border-color: var(--accent); }
.jz-big:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.jz-big:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jz-big:disabled { cursor: default; opacity: 0.55; }
.jz-big.right, .jz-big.wrong { opacity: 1; }
.jz-big.right { border-color: var(--good); background: var(--good-soft); }
.jz-big.wrong { border-color: var(--bad); background: var(--bad-soft); }

/* fase 4: legenda dos quadradinhos e da linha do limiar */
.jz-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.jz-legend span { display: inline-flex; align-items: center; gap: 5px; }
.jz-legend i { flex: none; display: inline-block; width: 10px; height: 10px; border: 1px solid #000; }
.jz-legend .k-ap { background: #64d98b; }
.jz-legend .k-re { background: #ff6159; }
.jz-legend .k-dis { background: #64d98b; outline: 1px solid #fff; outline-offset: 1px; }
.jz-legend .k-lim { width: 3px; height: 12px; border: 0; background: #c8f53c; }
.jz-legend .k-mem { width: 7px; background: #7ad7ff; }

/* fase 5: as cartas, a rubrica montada e o mini conjunto */
.jz-cards { display: flex; flex-direction: column; gap: 6px; }
.jz-card {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border: 2px solid var(--line-2); background: var(--surface); color: var(--text-2);
  font: 400 13px/1.4 var(--sans); text-align: left; box-shadow: 2px 2px 0 0 #000;
}
.jz-card i { width: 12px; height: 12px; border: 2px solid var(--line-3); background: var(--bg); }
.jz-card span { min-width: 0; overflow-wrap: anywhere; }
.jz-card small { font: 400 10.5px/1 var(--mono); color: var(--muted); }
.jz-card[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.jz-card[aria-pressed='true'] i { border-color: #000; background: var(--accent); }
.jz-card:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.jz-card:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.jz-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jz-card:disabled { cursor: default; }
.jz-card.fixa { box-shadow: none; opacity: 0.8; }
.jz-rub { margin: 0; max-height: 150px; overflow: auto; padding: 8px 10px; border: 2px dashed var(--line-2); background: var(--bg); font: 400 11.5px/1.5 var(--mono); color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.jz-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jz-mini li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border: 2px solid var(--line-2); background: var(--bg); }
.jz-mini li.fora { border-color: var(--bad); }
.jz-tok { display: grid; place-items: center; width: 24px; height: 20px; border: 2px solid currentColor; font: 500 12px/1 var(--mono); }
.jz-tok.boa { color: var(--good); }
.jz-tok.ruim { color: var(--bad); }
.jz-mq { margin: 0; font: 400 11.5px/1.4 var(--mono); color: var(--muted); }
.jz-ma { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.jz-mm { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; font: 400 12px/1.4 var(--mono); color: var(--muted); }
.jz-mm b { font-weight: 500; }
.jz-mm b.good { color: var(--good); }
.jz-mm b.bad { color: var(--bad); }
.jz-why { margin: 4px 0 0; padding-top: 4px; border-top: 1px dashed var(--line); font-size: 12.5px; line-height: 1.45; color: var(--text-2); }