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

/* ---------- aula ---------- */
/* prefixo .sia- · demos de js/games/similaridade/aula.js (o bloco "rodar no LLM" vem de css/ai.css) */

.sia-plane { cursor: crosshair; }
.sia-plane:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sia-cap { margin: 0; font: 600 10px/1.4 var(--pixel-ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.sia-scroll { max-width: 100%; overflow-x: auto; }
.sia-pre { margin-top: 4px; }

/* parte 2: o medidor do cosseno, de −1 a 1 */
.sia-gauge { display: flex; flex-direction: column; gap: 6px; }
.sia-gauge-track { position: relative; display: block; height: 14px; border: 2px solid var(--line-2); background: linear-gradient(90deg, var(--bad-soft) 50%, var(--good-soft) 50%); }
.sia-gauge-track::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--line-3); }
.sia-gauge-track i { position: absolute; top: -5px; bottom: -5px; left: 50%; width: 6px; margin-left: -3px; background: var(--accent); box-shadow: 2px 2px 0 0 #000; transition: left 0.12s var(--ease); }
.sia-gauge-ticks { display: flex; justify-content: space-between; gap: 8px; font: 400 11px/1.3 var(--mono); color: var(--muted); }
.sia-gauge-ticks span:nth-child(2) { text-align: center; }
.sia-gauge-ticks span:last-child { text-align: right; }

/* parte 3: legenda dos pontos e tabela das normas */
.sia-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 14px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.sia-legend li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sia-legend li > b { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid #000; color: #0c0b10; font-weight: 500; font-size: 12px; box-shadow: 2px 2px 0 0 #000; }
.sia-legend li > b[data-k='Q'] { background: #f1e9d6; }
.sia-legend li > b[data-k='A'] { background: #c8f53c; }
.sia-legend li > b[data-k='B'] { background: #7ad7ff; }
.sia-legend li > b[data-k='C'] { background: #ff7ab6; }
.sia-legend span b { color: var(--text); font-weight: 500; }
.sia-norm { width: 100%; }
.sia-norm th, .sia-norm td { padding: 6px 10px; white-space: nowrap; }
.sia-norm .sia-td-txt { min-width: 180px; text-align: left; white-space: normal; font: 400 13px/1.4 var(--sans); color: var(--text-2); }

/* partes 4 e 5: a pergunta e os exemplos */
.sia-ask { display: flex; flex-direction: column; gap: 6px; }
.sia-ask input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 2px solid var(--line-2); background: var(--bg); color: var(--text); font: 400 14px/1 var(--sans); }
.sia-ask input:focus { outline: none; border-color: var(--accent); }
.sia-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sia-chip { max-width: 100%; padding: 5px 9px; border: 2px solid var(--line-2); background: var(--surface); color: var(--text-2); font-size: 12.5px; line-height: 1.35; text-align: left; box-shadow: 2px 2px 0 0 #000; cursor: pointer; }
.sia-chip:hover { border-color: var(--accent); color: var(--text); }
.sia-chip:active { transform: translate(2px, 2px); box-shadow: none; }
.sia-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sia-toy { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 2px dashed var(--line-2); background: var(--bg); }

/* resultados da busca: posição, categoria, pergunta/resposta e o score numa barra contínua */
.sia-hits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sia-hit { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 2px solid var(--line); background: var(--surface); }
.sia-hit.top { border-color: var(--accent-line); background: var(--accent-soft); }
.sia-hit.new { border-color: var(--good); background: var(--good-soft); }
.sia-rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--line-2); background: var(--bg); font-size: 12px; color: var(--text); }
.sia-hit.top .sia-rank { border-color: var(--accent); color: var(--accent); }
.sia-hit-main { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.sia-hit-main b { font-size: 13.5px; line-height: 1.35; font-weight: 500; color: var(--text); }
.sia-hit-main small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.sia-new { font: 600 9.5px/1.4 var(--pixel-ui); font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; color: var(--good); }
.sia-hit-score { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.sia-tag { display: inline-block; padding: 1px 6px; border: 1px solid #000; color: #0c0b10; font: 600 9.5px/1.5 var(--pixel-ui); letter-spacing: 0.04em; text-transform: uppercase; }
.sia-tag[data-cat='horarios'] { background: #ffd23f; }
.sia-tag[data-cat='precos'] { background: #c8f53c; }
.sia-tag[data-cat='variedades'] { background: #ff7ab6; }
.sia-tag[data-cat='entregas'] { background: #7ad7ff; }
.sia-tag[data-cat='colheita'] { background: #ff8c2e; }
.sia-bar { display: block; width: 92px; height: 6px; background: var(--surface-3); overflow: hidden; }
.sia-bar i { display: block; height: 100%; background: var(--accent); }
.sia-hit.new .sia-bar i { background: var(--good); }

/* parte 5: legenda do gráfico (os mesmos anéis e pontos do chart) e as duas colunas (top-3 × MMR) */
.sia-key { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sia-key span { display: inline-flex; align-items: center; gap: 6px; }
.sia-key i { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.sia-key i.k-top { border: 1.5px solid #f1e9d6; }
.sia-key i.k-mmr { border: 2px solid #ffd23f; }
.sia-key i.k-off { width: 7px; height: 7px; margin: 2.5px; background: #2a2740; box-shadow: 0 0 0 1.5px #0c0b10; }
.sia-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.sia-cols > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sia-cols + .ls-readout:empty { display: none; }

@media (max-width: 720px) {
  .sia-cols { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sia-hit { grid-template-columns: 26px minmax(0, 1fr); }
  .sia-hit-score { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
  .sia-gauge-ticks { font-size: 10px; }
}

/* ---------- jogo ---------- */
/* prefixo .si- · "Caça ao Vizinho" (js/games/similaridade/game.js); a base vem de .sg-* (css/games.css) */

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

/* campo: gráfico limpo em alta resolução (chart.js; sem image-rendering: pixelated, que serrilharia
   linhas e rótulos), com as maçãs e o cliente em pixel art por cima. Só toques (nada se arrasta),
   então o dedo ainda rola a página por cima dele */
.si .sg-canvas {
  border-radius: 0;
  background: #141320;
  box-shadow: var(--si-hard);
  touch-action: manipulation;
  cursor: pointer;
}
.si .sg-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* leitura sob o campo: chips de HUD */
.si .sg-caption { justify-content: flex-start; gap: 6px; font: 400 11px/1.3 var(--pixel-ui); color: var(--muted); }
.si .sg-caption:empty { display: none; }
.si .sg-caption span { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 8px; border: 2px solid var(--line-2); background: var(--bg-2); white-space: nowrap; }
.si .sg-caption b { font-weight: 400; color: var(--accent); }

/* painel de controles */
.si-controls { display: flex; flex-direction: column; gap: 12px; }
.si-msg:empty { display: none; }
.si .sg-formula { border-color: var(--line-2); background: var(--bg); box-shadow: var(--si-hard); }
.si .sg-formula .muted { font-size: 11.5px; }
.si .sg-slider > .mono { font-family: var(--pixel); font-size: 16px; color: var(--accent); }
.si .sg-slider output { font-family: var(--pixel-ui); font-size: 11px; }
.si .sg-stats div { border-width: 2px; border-color: var(--line-2); background: var(--bg-2); box-shadow: var(--si-hard); }
.si .sg-chip-toggle { background: var(--surface-2); box-shadow: 2px 2px 0 0 #000; }
.si .sg-chip-toggle[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); border-color: #000; }
.si .sg-chip-toggle:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.si .sg-chip-toggle:disabled { opacity: 0.45; cursor: not-allowed; }
.si .btn kbd, .si .sg-chip-toggle kbd { margin-left: 6px; }
.si-keys { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.si-keys .icon { flex: none; color: var(--faint); }
/* no celular não há teclado: some a linha de atalhos e as teclas dos botões */
@media (hover: none) and (pointer: coarse) { .si-keys, .si kbd { display: none; } }

/* fase 2: qual critério o toque marca */
.si-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.si-mode { justify-content: center; }
.si-mode b { font-family: var(--pixel); font-weight: 400; }

/* fase 3: o relógio */
.si-clock { min-width: 64px; padding: 4px 10px; border: 2px solid var(--line-2); background: var(--bg); font: 400 15px/1 var(--pixel); color: var(--text); text-align: center; box-shadow: 2px 2px 0 0 #000; }
.si-clock.low { border-color: var(--bad); color: var(--bad); animation: si-blink 1s steps(1) infinite; }
@keyframes si-blink { 50% { background: var(--bad-soft); } }
@media (prefers-reduced-motion: reduce) { .si-clock.low { animation: none; } }

/* fases 4 e 5: a pergunta do cliente */
.si-ask { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 2px solid var(--line-2); border-left: 4px solid var(--accent); background: var(--bg); box-shadow: var(--si-hard); }
.si-ask .sg-label { line-height: 1.3; }
.si-ask p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.si-vec { font: 400 11.5px/1.5 var(--mono); color: var(--muted); }
.si-vec b { font-weight: 500; color: var(--accent); }

/* fase 4: filtros por categoria e a linha da busca */
.si-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.si-chip {
  --si-c: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px;
  border: 2px solid var(--line-2); background: var(--surface-2);
  font: 400 13px/1 var(--pixel); color: var(--text-2);
  box-shadow: 2px 2px 0 0 #000; cursor: pointer;
}
.si-chip::before { content: ''; flex: none; width: 8px; height: 8px; border: 1px solid #000; background: var(--si-c); }
.si-chip[data-cat='todas']::before { display: none; }
.si-chip[data-cat='horarios'] { --si-c: #ffd23f; }
.si-chip[data-cat='precos'] { --si-c: #c8f53c; }
.si-chip[data-cat='variedades'] { --si-c: #ff7ab6; }
.si-chip[data-cat='entregas'] { --si-c: #7ad7ff; }
.si-chip[data-cat='colheita'] { --si-c: #ff8c2e; }
.si-chip:hover:not(:disabled) { border-color: var(--line-3); color: var(--text); }
.si-chip[aria-pressed='true'] { border-color: #000; background: var(--si-c); color: #0c0b10; }
.si-chip:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.si-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.si-chip:disabled { opacity: 0.55; cursor: not-allowed; }
.si-pipe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 400 10.5px/1.2 var(--pixel-ui); color: var(--muted); }
.si-pipe i { font-style: normal; color: var(--faint); }
.si-step { padding: 4px 7px; border: 2px solid var(--line-2); background: var(--bg-2); color: var(--text-2); white-space: nowrap; }
.si-step.f { border-color: var(--accent); color: var(--text); }
.si-step b { font-weight: 400; color: var(--accent); }
.si-order { align-self: flex-start; }

/* abaixo do campo: valores revelados, legenda, tabela e as respostas */
.si-board { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.si-board[hidden] { display: none; }
.si-board .sg-label { margin: 0; line-height: 1.4; }
.si-empty { margin: 0; padding: 10px 12px; border: 2px dashed var(--line-2); font-size: 13px; line-height: 1.5; color: var(--muted); }
.si-empty b { color: var(--text-2); font-weight: 500; }
.si-peek { margin: 0; padding: 8px 10px; border: 2px solid #7ad7ff; background: var(--info-soft); font-size: 13px; line-height: 1.5; color: var(--text-2); }
.si-peek b { color: var(--text); font-weight: 500; }

/* fase 1: o ângulo e o cosseno de cada seta já tentada */
.si-vals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.si-vals li { display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 9px; border: 2px solid var(--line-2); background: var(--bg-2); font: 400 12px/1.2 var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.si-vals li b { font: 400 13px/1 var(--pixel); color: var(--text); }
.si-vals li.ok { border-color: var(--good); background: var(--good-soft); }
.si-vals li.ok b { color: var(--good); }
.si-vals li.no { border-color: rgba(255, 97, 89, 0.5); }
.si-vals li.no b { color: var(--bad); text-decoration: line-through; }

/* fase 2: legenda dos pontos (mesmas cores do campo) e a tabela dos dois critérios */
.si-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 14px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.si-legend li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.si-legend li > b { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid #000; color: #0c0b10; font-weight: 500; font-size: 12px; box-shadow: 2px 2px 0 0 #000; }
.si-legend li > b[data-k='Q'] { background: #f1e9d6; }
.si-legend li > b[data-k='A'] { background: #c8f53c; }
.si-legend li > b[data-k='B'] { background: #7ad7ff; }
.si-legend li > b[data-k='C'] { background: #ff7ab6; }
.si-legend li > b[data-k='D'] { background: #ff8c2e; }
.si-legend span b { color: var(--text); font-weight: 500; }
.si-scroll { max-width: 100%; overflow-x: auto; }
.si-table { width: 100%; border-collapse: collapse; font: 400 12.5px/1.3 var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.si-table th, .si-table td { padding: 6px 10px; border: 1px solid var(--line); text-align: right; white-space: nowrap; }
.si-table thead th { background: var(--bg-2); font: 400 10px/1.3 var(--pixel-ui); color: var(--muted); white-space: normal; }
.si-table tbody th { text-align: center; font: 400 13px/1 var(--pixel); color: var(--text); }
.si-table td.on { background: var(--good-soft); color: var(--good); }

/* fases 4 e 5: as respostas entregues (posição, categoria, pergunta/resposta e o score numa barra contínua) */
.si-hits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.si-hit { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 2px solid var(--line); background: var(--surface); }
.si-hit.top { border-color: var(--accent-line); background: var(--accent-soft); }
.si-hit.ok { border-color: var(--good); background: var(--good-soft); }
.si-hit.rep { border-color: var(--bad); background: var(--bad-soft); }
.si-hit.off { border-style: dashed; border-color: var(--warn); background: var(--warn-soft); }
.si-rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--line-2); background: var(--bg); font-size: 12px; color: var(--text); }
.si-hit.top .si-rank { border-color: var(--accent); color: var(--accent); }
.si-hit.ok .si-rank { border-color: var(--good); color: var(--good); }
.si-hit-main { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.si-hit-main b { font-size: 13.5px; line-height: 1.35; font-weight: 500; color: var(--text); }
.si-hit-main small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.si-hit-main em { font: 400 11.5px/1.4 var(--mono); font-style: normal; color: var(--text-2); }
.si-hit.rep em { color: var(--bad); }
.si-hit-score { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.si-tag { display: inline-block; padding: 1px 6px; border: 1px solid #000; color: #0c0b10; font: 600 9.5px/1.5 var(--pixel-ui); letter-spacing: 0.04em; text-transform: uppercase; }
.si-tag[data-cat='horarios'] { background: #ffd23f; }
.si-tag[data-cat='precos'] { background: #c8f53c; }
.si-tag[data-cat='variedades'] { background: #ff7ab6; }
.si-tag[data-cat='entregas'] { background: #7ad7ff; }
.si-tag[data-cat='colheita'] { background: #ff8c2e; }
.si-bar { display: block; width: 92px; height: 6px; background: var(--surface-3); overflow: hidden; }
.si-bar i { display: block; height: 100%; background: var(--accent); }
.si-hit.ok .si-bar i { background: var(--good); }
.si-hit.rep .si-bar i { background: var(--bad); }
.si-hit.off .si-bar i { background: var(--warn); }

/* celular: uma pilha só, com o campo logo abaixo do objetivo e a resposta logo abaixo dos botões */
@media (max-width: 920px) {
  .si .sg-body { display: flex; flex-direction: column; gap: 12px; }
  .si .sg-main, .si .sg-ctrl { display: contents; }
  .si .sg-head { order: 0; }
  .si .sg-goal { order: 1; }
  .si .sg-canvas { order: 2; }
  .si .sg-caption { order: 3; }
  .si-controls { order: 4; }
  .si-msg { order: 5; }
  .si-board { order: 6; }
  .si .sg-actions { order: 7; }
}
@media (max-width: 640px) {
  .si .sg-head h3 { font-size: 18px; }
  .si .sg-caption { font-size: 10px; gap: 4px; }
  .si .sg-caption span { padding: 3px 6px; white-space: normal; }
}
@media (max-width: 520px) {
  .si-hit { grid-template-columns: 26px minmax(0, 1fr); }
  .si-hit-score { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
  .si-modes { grid-template-columns: 1fr; }
  .si .sg-stats { gap: 6px; }
  .si .sg-stats div { padding: 8px; }
  .si .sg-stats dd { font-size: 15px; }
}