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

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

.pra-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-width: 0; }
.pra-ctrls .ls-choices { min-width: 0; max-width: 100%; }
.pra-ctrls .seg { flex-wrap: wrap; max-width: 100%; }
.pra-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--text-2); cursor: pointer; }
.pra-check input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }

.pra-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pra-cols > section { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 720px) { .pra-cols { grid-template-columns: 1fr; } }
.pra-cap { margin: 0; font: 600 10px/1.4 var(--pixel-ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

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

/* tokens */
.pra-input { display: block; width: 100%; min-height: 56px; padding: 8px 10px; border: 2px solid var(--line-2); background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--sans); resize: vertical; }
.pra-input:focus { outline: none; border-color: var(--accent); }
.pra-input[hidden] { display: none; }
.pra-toks { display: flex; flex-direction: column; gap: 8px; }
.pra-tokrow { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.pra-tokrow > div { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.pra-tokrow .pra-cap { padding-top: 4px; }
@media (max-width: 520px) { .pra-tokrow { grid-template-columns: 1fr; } .pra-tokrow .pra-cap { padding-top: 0; } }
.pra-tok { padding: 2px 4px; border: 1px solid #000; color: #0c0b10; font: 500 12.5px/1.3 var(--mono); white-space: pre; }
.pra-tok i { font-style: normal; opacity: 0.45; }
.pra-tok.c0 { background: #c8f53c; }
.pra-tok.c1 { background: #7ad7ff; }
.pra-tok.c2 { background: #ffd23f; }
.pra-tok.c3 { background: #ff7ab6; }
.pra-tok.c4 { background: #ff8c2e; }

/* tabelas (custo, JSON, few-shot) */
.pra-scroll { max-width: 100%; overflow-x: auto; }
.pra-scroll .ls-table { width: 100%; }
.pra-cost th, .pra-cost td { padding: 6px 10px; white-space: nowrap; }
.pra-cost td b { color: var(--accent); font-weight: 500; }
.pra-json th, .pra-few th { text-align: left; }
.pra-json td, .pra-few td { text-align: left; vertical-align: top; line-height: 1.45; }
.pra-txt { min-width: 170px; font-family: var(--sans); font-size: 13px; color: var(--text-2); }
.pra-raw { display: block; min-width: 150px; max-width: 32ch; padding: 0; border: 0; background: none; font: 400 11.5px/1.45 var(--mono); color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.pra-few tfoot th, .pra-few tfoot td { background: var(--surface); }
.pra-sum { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.pra-sum b { color: var(--text); font-weight: 500; }

/* temperatura */
.pra-prefix { margin: 0; font: 400 15px/1.6 var(--mono); color: var(--text-2); overflow-wrap: anywhere; }
.pra-prefix b { color: var(--accent); font-weight: 500; }
.pra-key { color: var(--coin); }
.pra-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.45; color: var(--text); }

/* ---------- jogo ---------- */
/* raiz do jogo: .prg (".pr" já existe em games.css, no placar dos jogos antigos) */
/* prefixo .pr- · "Oficina de Prompts" (js/games/prompts/game.js); a base vem de .sg-* (css/games.css) */

.prg { --pr-hard: 3px 3px 0 0 rgba(0, 0, 0, 0.5); }

/* campo (cenas em pixel art, dados em gráfico limpo): só toques (nada se arrasta), então o dedo ainda rola a página por cima dele */
.prg .sg-canvas {
  border-radius: 0;
  background: #141320;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: var(--pr-hard);
  touch-action: manipulation;
}
/* nas fases de dados o mesmo canvas vira gráfico limpo (chart.js, em resolução de tela): sem pixelated */
.prg .sg-canvas.chart-canvas { image-rendering: auto; }
.prg .sg-canvas.pr-short { height: 240px; }
@media (max-width: 640px) { .prg .sg-canvas.pr-short { height: 190px; } }

/* leitura sob o campo: chips de HUD */
.prg .sg-caption { justify-content: flex-start; gap: 6px; font: 400 11px/1.3 var(--pixel-ui); color: var(--muted); }
.prg .sg-caption:empty { display: none; }
.prg .sg-caption span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 2px solid var(--line-2); background: var(--bg-2); white-space: nowrap; }
.prg .sg-caption b { font-weight: 400; color: var(--accent); }
.pr-dot { flex: none; display: inline-block; width: 9px; height: 9px; border: 1px solid #000; }
.pr-dot.ok { background: #64d98b; }
.pr-dot.warn { background: #ff8c2e; }
.pr-dot.no { background: #ff6159; }
.pr-dot.off { background: #5a242e; }

/* painel de controles */
.pr-controls { display: flex; flex-direction: column; gap: 12px; }
.pr-msg:empty { display: none; }
.pr-ask { margin: 0; padding: 10px 12px; border: 2px solid var(--line-2); border-left: 4px solid var(--accent); background: var(--bg); font-size: 14px; line-height: 1.5; color: var(--text-2); box-shadow: var(--pr-hard); }
.pr-ask b { color: var(--text); font-weight: 500; }
.prg .sg-formula { border-radius: 0; border-color: var(--line-2); background: var(--bg); box-shadow: var(--pr-hard); }
.prg .sg-formula .muted { font-size: 11.5px; }
.prg .sg-formula b.neg { color: var(--bad); }
.prg .sg-slider > .mono { font-family: var(--pixel); font-size: 16px; color: var(--accent); }
.prg .sg-slider output { font-family: var(--pixel-ui); font-size: 11px; }
.prg .sg-stats div { border-radius: 0; border-width: 2px; border-color: var(--line-2); background: var(--bg-2); box-shadow: var(--pr-hard); }
.prg .sg-stats dd small { display: block; margin-top: 4px; font: 400 10.5px/1.2 var(--mono); letter-spacing: 0; color: var(--muted); }
.prg .sg-stats.pr-stats-1 { grid-template-columns: minmax(0, 1fr); }
.prg .sg-stats.pr-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prg .sg-goal, .prg .sg-msg { border-radius: 0; }
.pr-mini { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.prg .btn kbd { margin-left: 6px; }
.pr-keys { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
/* no celular não há teclado: some a linha de atalhos, as teclas dos botões e os números dos blocos */
@media (hover: none) and (pointer: coarse) {
  .pr-keys, .prg kbd, .prg .pr-key { display: none; }
  .pr-block { grid-template-columns: auto minmax(0, 1fr) 30px; }
  .pr-card { grid-template-columns: minmax(0, 1fr); }
  .pr-item { grid-template-columns: minmax(0, 1fr) auto; }
}

/* abaixo do campo */
.pr-board { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pr-board[hidden] { display: none; }
.pr-board .sg-label { line-height: 1.4; }
.pr-key { flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border: 2px solid var(--line-2); background: var(--bg); font-size: 11px; color: var(--muted); }

/* fase 1: a bandeja de blocos de mensagem */
.pr-tray { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-block {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) 30px; align-items: start; gap: 8px;
  width: 100%; padding: 8px 10px; border: 2px solid var(--line-2); background: var(--surface);
  text-align: left; color: var(--text-2); box-shadow: 2px 2px 0 0 #000; cursor: pointer;
}
.pr-block:hover:not(:disabled) { border-color: var(--line-3); color: var(--text); }
.pr-block:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.pr-block:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-block:disabled { cursor: default; }
.pr-block.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
.pr-role { padding: 2px 6px; border: 1px solid #000; font: 400 10px/1.4 var(--pixel-ui); letter-spacing: 0.04em; text-transform: uppercase; color: #0c0b10; }
.pr-role[data-role='system'] { background: #c8bfa9; }
.pr-role[data-role='user'] { background: #5b9bff; }
.pr-role[data-role='assistant'] { background: #c8f53c; }
.pr-txt { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pr-pos { justify-self: end; font-size: 12px; color: var(--accent); }

/* fase 2 e 3: a frase e as respostas sorteadas */
.pr-prefix { margin: 0; font: 400 14.5px/1.6 var(--mono); color: var(--text-2); overflow-wrap: anywhere; }
.pr-prefix b { color: var(--accent); font-weight: 500; }
.pr-samples { display: flex; flex-wrap: wrap; gap: 5px; }
.pr-sample { padding: 3px 7px; border: 2px solid var(--line-2); background: var(--bg-2); font: 400 12.5px/1.3 var(--mono); color: var(--text-2); }
.pr-sample.top { border-color: var(--accent-line); color: var(--accent); }
.pr-sample.bad { border-color: var(--bad); color: var(--bad); }

/* fase 4: chips de modelo, exemplos e max_tokens; a prévia da resposta */
.pr-pick { display: flex; flex-direction: column; gap: 6px; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-height: 32px; padding: 4px 9px; border: 2px solid var(--line-2); background: var(--surface-2);
  font: 400 12px/1.2 var(--mono); color: var(--text-2); box-shadow: 2px 2px 0 0 #000; cursor: pointer;
}
.pr-chip small { font-size: 10px; color: var(--muted); }
.pr-chip:hover:not(:disabled) { border-color: var(--line-3); color: var(--text); }
.pr-chip[aria-pressed='true'] { border-color: #000; background: var(--accent); color: var(--accent-ink); }
.pr-chip[aria-pressed='true'] small { color: var(--accent-ink); opacity: 0.75; }
.pr-chip:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.pr-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-chip:disabled { opacity: 0.55; cursor: not-allowed; }
.pr-finish { margin: 0; font-size: 11.5px; }
.pr-finish.ok { color: var(--good); }
.pr-finish.no { color: var(--bad); }
.pr-cutmark { font-style: normal; color: var(--bad); }
.pr-tally { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.pr-tally b { font-weight: 500; }
.pr-tally .ok { color: var(--good); }
.pr-tally .warn { color: var(--orange); }
.pr-tally .no { color: var(--bad); }

/* fase 5: cartas de resposta crua, texto com chaves tocáveis e as saídas do classificar() */
.pr-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.pr-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 8px;
  width: 100%; height: 100%; padding: 8px 10px; border: 2px solid var(--line-2); background: var(--surface);
  text-align: left; color: var(--text-2); box-shadow: 2px 2px 0 0 #000; cursor: pointer;
}
.pr-card code, .pr-item code { font: 400 12px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.pr-card small, .pr-item small { grid-column: 1 / -1; font-size: 12px; line-height: 1.4; color: var(--muted); }
.pr-card:hover:not(:disabled) { border-color: var(--line-3); }
.pr-card:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.pr-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-card:disabled { cursor: default; }
.pr-card.on { border-color: var(--accent); background: var(--accent-soft); }
.pr-card.ok { border-color: var(--good); }
.pr-card.ok small { color: var(--good); }
.pr-card.no { border-color: var(--bad); background: var(--bad-soft); }
.pr-card.no small { color: var(--bad); }

.pr-text { margin: 0; padding: 12px; border: 2px solid var(--line-2); background: var(--bg); font: 400 13.5px/2.1 var(--mono); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--pr-hard); }
.pr-str { background: rgba(139, 132, 163, 0.16); color: var(--text); }
.pr-brace {
  display: inline-flex; align-items: baseline; gap: 1px;
  min-width: 26px; padding: 1px 5px; margin: 0 1px;
  border: 2px solid var(--info); background: var(--info-soft);
  font: 500 14px/1.3 var(--mono); color: var(--text); cursor: pointer; vertical-align: baseline;
}
.pr-brace sub { font: 400 9px/1 var(--pixel-ui); color: var(--muted); }
.pr-brace:hover:not(:disabled) { background: var(--surface-3); }
.pr-brace:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-brace.cur { outline: 2px dashed var(--line-3); outline-offset: 1px; }
.pr-brace.instr { border-style: dashed; border-color: var(--muted); background: rgba(139, 132, 163, 0.16); }
.pr-brace.start, .pr-brace.end { border-color: #000; background: var(--accent); color: var(--accent-ink); }
.pr-brace.start sub, .pr-brace.end sub { color: var(--accent-ink); }
.pr-brace.ok { border-color: var(--good); background: var(--good-soft); }
.pr-brace.no { border-color: var(--bad); background: var(--bad-soft); }
.pr-brace:disabled { cursor: default; }

.pr-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 2px solid var(--line-2); background: var(--surface); }
.pr-item.cur { border-color: var(--line-3); }
.pr-item.ok { border-color: var(--good); }
.pr-item.ok small { color: var(--good); }
.pr-item.no { border-color: var(--bad); background: var(--bad-soft); }
.pr-item.no small { color: var(--bad); }
.pr-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pr-seg button { padding: 4px 8px; border: 2px solid var(--line-2); background: var(--surface-2); font: 400 12px/1.2 var(--mono); color: var(--text-2); box-shadow: 2px 2px 0 0 #000; cursor: pointer; }
.pr-seg button:hover:not(:disabled) { border-color: var(--line-3); color: var(--text); }
.pr-seg button[aria-pressed='true'] { border-color: #000; background: var(--accent); color: var(--accent-ink); }
.pr-seg button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.pr-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-seg button:disabled { cursor: default; opacity: 0.7; }

/* celular e tablet: objetivo primeiro, depois o campo, a bandeja e os controles */
@media (max-width: 920px) {
  .prg .sg-body { display: flex; flex-direction: column; gap: 12px; }
  .prg .sg-main, .prg .sg-ctrl { display: contents; }
  .prg .sg-head { order: 1; }
  .prg .sg-goal { order: 2; }
  .prg .sg-canvas { order: 3; }
  .prg .sg-caption { order: 4; }
  .prg .pr-board { order: 5; }
  .prg .pr-controls { order: 6; }
  .prg .pr-msg { order: 7; }
  .prg .sg-actions { order: 8; }
}
@media (max-width: 520px) {
  .pr-block { grid-template-columns: auto minmax(0, 1fr) 26px; }
  .pr-block .pr-key { display: none; }
  .pr-item { grid-template-columns: minmax(0, 1fr); }
  .pr-item .pr-key { display: none; }
  .prg .sg-stats { gap: 6px; }
  .prg .sg-stats div { padding: 8px; }
  .prg .sg-stats dd { font-size: 15px; }
}