/* ==========================================================================
   EvoluAI — jogo "Funções de Ativação" (dl-04), identidade pixel art.
   Complementa a base .sg-* de games.css. Cantos retos, bordas sólidas de 2px,
   sombras deslocadas sem desfoque, nada de degradês. Os gráficos de dados são
   limpos (js/chart.js): rótulos e números deles em Geist Mono, de 10 a 12px.
   ========================================================================== */

.av {
  --av-lime: #c8f53c;
  --av-good: #64d98b;
  --av-bad: #ff6159;
  --av-coin: #ffd23f;
  --av-orange: #ff8c2e;
  --av-water: #5b9bff;
  --av-ink: #0c0b10;
  --av-ink1: #141320;
  --av-ink2: #1d1b2c;
  --av-ink3: #2a2740;
  --av-line: #3b3757;
  --av-paper: #f1e9d6;
  --av-paper2: #c8bfa9;
  --av-muted: #8b84a3;
  --av-faint: #5b5675;
  --av-head: var(--pixel, var(--sans));
  --av-data: var(--mono);
  --av-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}

.av-dim { color: var(--av-faint); }
.av-lbl { font: 500 11px/1.3 var(--av-data); color: var(--av-muted); }

/* ---------- legenda e grupos de sliders (fases 1 e 2) ---------- */

.av-keys { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }
.av-key { display: inline-flex; align-items: center; gap: 7px; }
.av-sw { display: inline-block; width: 16px; height: 2px; flex: none; }
.av-sw.tgt { height: 0; border-top: 2px dashed var(--av-paper2); }
.av-sw.mdl { height: 3px; background: var(--av-lime); }
.av-sw.n1 { background: var(--av-water); }
.av-sw.n2 { background: var(--av-coin); }
.av-sw.err { width: 12px; height: 10px; background: rgba(255, 97, 89, 0.3); }

.av-groups { display: flex; flex-direction: column; gap: 14px; }
.av-group { display: flex; flex-direction: column; gap: 8px; }
.av-gh { display: inline-flex; align-items: center; gap: 8px; }
.av-gh .av-sw { width: 8px; height: 8px; border: 0; }

/* ---------- medidor de perda (régua em escala log, desenhada no canvas) ---------- */

.av-loss {
  padding: 12px 14px 10px;
  border: 2px solid var(--av-line);
  border-radius: 0;
  background: var(--av-ink1);
  box-shadow: var(--av-shadow);
}
.av-loss-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.av-loss-head b { font: 500 16px/1 var(--av-data); font-variant-numeric: tabular-nums; color: var(--av-paper); }
.av-loss-head b.ok { color: var(--av-good); }
.av-meter { display: block; width: 100%; height: 44px; margin-top: 6px; }

/* ---------- painel visual comum (fases 3 e 4) ---------- */

.av-panel {
  min-width: 0;
  padding: 16px;
  border: 2px solid var(--av-line);
  border-radius: 0;
  background: var(--av-ink);
  box-shadow: var(--av-shadow);
}

/* ---------- seletor de ativação (rádio) ---------- */

.av .av-seg { flex-wrap: wrap; }
.av .av-seg button[aria-checked='true'] { background: var(--accent, var(--av-lime)); color: var(--accent-ink, var(--av-ink)); }
.av-row-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.av .av-ctl { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---------- fase 3: rede profunda ---------- */

.av-flowhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 500 11px/1.5 var(--av-data); color: var(--av-muted); }
.av-fwd { color: var(--av-water); }
.av-flowarrow { display: inline-block; color: var(--av-lime); font-size: 10px; animation: av-nudge 1.2s steps(2) infinite; }
@keyframes av-nudge { 50% { transform: translateX(-3px); } }

.av-grid {
  display: grid;
  grid-template-columns: 40px repeat(var(--n, 9), minmax(0, 1fr));
  column-gap: 4px; row-gap: 8px;
  align-items: center;
  margin-top: 14px;
}
.av-ax { font: 500 10.5px/1.2 var(--av-data); color: var(--av-faint); text-align: right; }
.av-ax-lab { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.av-grid.dense .av-det { display: none; }

/* nós do diagrama: moldura fina e mini-gráfico vetorial da ativação */
.av-node {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0; padding: 5px 1px;
  border: 1px solid var(--av-line);
  border-radius: 4px !important;
  background: var(--av-ink1);
}
button.av-node:hover { border-color: var(--av-muted); }
button.av-node:active { transform: translateY(1px); }
.av-node.av-out { border-style: dashed; background: var(--av-ink); }
.av-nid { font: 500 10px/1 var(--av-data); color: var(--av-muted); white-space: nowrap; }
.av-tiny { display: none; }
.av-glyph { display: block; width: 100%; max-width: 40px; }
.av-glyph svg { display: block; width: 100%; height: auto; overflow: hidden; }
.av-glyph .a { fill: none; stroke: var(--av-ink3); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.av-glyph .c { fill: none; stroke: var(--av-paper2); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.av-glyph .t { fill: none; stroke: var(--av-lime); stroke-width: 1.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.av-glyph .d { fill: var(--av-paper); stroke: var(--av-ink1); stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* nó pelo fator w·f′: mantém, encolhe, cresce ou mata o gradiente */
.av-node.hi { border-color: var(--av-good); }
.av-node.hi .t { stroke: var(--av-good); }
.av-node.lo { border-color: #8a3a3a; }
.av-node.lo .t { stroke: var(--av-bad); }
.av-node.hot { border-color: var(--av-orange); }
.av-node.hot .t { stroke: var(--av-orange); }
.av-node.dead { border-color: var(--av-bad); background: #2a1219; }
.av-node.dead .t { stroke: var(--av-bad); }
.av-node.sel { outline: 2px solid var(--av-paper); outline-offset: 1px; }
.av-node.sel .av-nid { color: var(--av-paper); }

.av-lab { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; font: 400 10.5px/1.2 var(--av-data); color: var(--av-muted); white-space: nowrap; }
.av-lab b { font-weight: 400; color: var(--av-paper); }
.av-lab b.hi { color: var(--av-good); }
.av-lab b.hot { color: var(--av-orange); }
.av-lab b.lo, .av-lab b.dead { color: var(--av-bad); }

.av-flow { display: block; grid-column: 1 / -1; width: 100%; height: 168px; }

.av-val { min-width: 0; text-align: center; font: 400 10.5px/1.2 var(--av-data); color: var(--av-paper2); white-space: nowrap; }
.av-val.ok { color: var(--av-good); }
.av-val.high { color: var(--av-orange); }
.av-val.low, .av-val.zero { color: var(--av-bad); }

.av-inspect { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--av-ink3); font: 400 11px/1.7 var(--av-data); color: var(--av-muted); }
.av-inspect b { font-weight: 500; color: var(--av-paper); }
.av-inspect b.hi { color: var(--av-good); }
.av-inspect b.hot { color: var(--av-orange); }
.av-inspect b.lo, .av-inspect b.dead { color: var(--av-bad); }
.av-diag .sg-msg { animation: none; }

.av-band-sw { display: inline-block; width: 16px; height: 9px; vertical-align: middle; margin-right: 2px; border-top: 1px dashed rgba(100, 217, 139, 0.6); border-bottom: 1px dashed rgba(100, 217, 139, 0.6); background: rgba(100, 217, 139, 0.12); }

.av-derivs { font-size: 12px; line-height: 1.75; }
.av-derivs sub { font-size: 0.72em; }
.av-s2 .sg-stats dd, .av-s4 .sg-stats dd { font-size: 13px; }
.av-s2 .sg-slider { grid-template-columns: 62px minmax(0, 1fr) 48px; }
.av-stats2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- fase 4: softmax ---------- */

.av-soft { display: flex; flex-direction: column; }
.av-shead, .av-srow {
  display: grid;
  grid-template-columns: minmax(92px, 0.7fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 16px;
}
.av-shead { padding-bottom: 10px; font: 500 10.5px/1.4 var(--av-data); color: var(--av-muted); }
.av-srow { align-items: end; padding: 12px 0; border-top: 1px solid var(--av-ink3); }
.av-scls { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.av-sname { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1.1 var(--av-head); color: var(--av-paper); }
.av-sprite { width: 16px; height: 16px; flex: none; }
.av-sz { font: 400 11px/1.2 var(--av-data); color: var(--av-muted); }
.av-scls b, .av-sval b { font-weight: 500; color: var(--av-paper); font-variant-numeric: tabular-nums; }
.av-scell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.av-sval { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; font: 400 11px/1.3 var(--av-data); color: var(--av-muted); }
.av-ok { display: inline-flex; color: var(--av-good); visibility: hidden; }
.av-ok.on { visibility: visible; }
.av-ok .icon { width: 12px; height: 12px; stroke-width: 2.6; stroke-linecap: square; stroke-linejoin: miter; }

/* barras de e^z e de p (canvas): trilho discreto, faixa do alvo e traço do alvo */
.av-bar { display: block; width: 100%; height: 18px; }

.av-ssum { padding: 10px 0 12px; border-top: 1px solid var(--av-ink3); text-align: right; font: 400 11px/1.2 var(--av-data); color: var(--av-muted); }
.av-ssum b { font-weight: 500; color: var(--av-paper); }

.av-dist { padding-top: 12px; border-top: 1px solid var(--av-ink3); }
.av-distc { display: block; width: 100%; height: 46px; }

.av-logits .sg-slider { grid-template-columns: 62px minmax(0, 1fr) 48px; }
.av-shift { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* ---------- fase 5: softmax estável ---------- */

.av-big { display: flex; flex-direction: column; gap: 18px; }
.av-brow { display: flex; flex-direction: column; gap: 10px; }
.av-brow + .av-brow { padding-top: 16px; border-top: 1px solid var(--av-ink3); }
.av-bhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font: 400 11px/1.4 var(--av-data); color: var(--av-muted); }
.av-bhead b { font: 500 15px/1.1 var(--av-head); text-transform: none; color: var(--av-paper); }

/* régua dos expoentes z − c (canvas): verde onde e^t cabe num float64 */
.av-xaxis { display: block; width: 100%; height: 56px; }

.av-btab { display: grid; grid-template-columns: minmax(64px, 1fr) minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 0.7fr); gap: 6px 10px; align-items: center; }
.av-bh { font: 500 10.5px/1.2 var(--av-data); color: var(--av-muted); }
.av-bname { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font: 500 13px/1.1 var(--av-head); color: var(--av-paper); }
.av-bnum { min-width: 0; font: 400 11px/1.3 var(--av-data); color: var(--av-paper); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-bnum.bad { color: var(--av-bad); }
.av-bnum.good { color: var(--av-good); }
.av-bbar { display: block; width: 100%; height: 22px; }
.av-bstat { font: 400 11px/1.6 var(--av-data); color: var(--av-muted); }
.av-bstat b { font-weight: 500; }
.av-bstat .good { color: var(--av-good); }
.av-bstat .bad { color: var(--av-bad); }
.av-big .sg-slider { grid-template-columns: 34px minmax(0, 1fr) 56px; }

/* ---------- telas estreitas ---------- */

/* Uma coluna: título e objetivo primeiro, depois o visual e, logo abaixo dele, os controles.
   O .sg-ctrl some do layout (display: contents) para os filhos entrarem na ordem certa. */
@media (max-width: 920px) {
  .av .sg-body { gap: 14px; }
  .av .sg-body > .sg-ctrl { display: contents; }
  .av .sg-head { order: 1; }
  .av #av-goal { order: 2; }
  .av .sg-body > .sg-main { order: 3; }
  .av .av-ctl { order: 4; }
  .av #av-hint { order: 5; }
  .av #av-msg { order: 6; }
  .av #av-actions { order: 7; }
  .av #av-hint:empty, .av #av-msg:empty { display: none; }

  /* fases 1 e 2: o gráfico fica preso no topo enquanto os sliders rolam por baixo */
  .av .av-s0 > .sg-main, .av .av-s1 > .sg-main {
    position: sticky; top: 0; z-index: 3;
    gap: 6px; margin: 0 -16px; padding: 8px 16px;
    background: var(--av-ink1);
    border-bottom: 2px solid var(--av-line);
  }
  .av .av-s0 .av-canvas, .av .av-s1 .av-canvas { height: 190px; }
  .av .av-s0 .av-loss, .av .av-s1 .av-loss { padding: 8px 10px 6px; box-shadow: none; }
  .av .av-s0 .av-meter, .av .av-s1 .av-meter { margin-top: 2px; }
  .av .av-s0 .sg-caption, .av .av-s1 .sg-caption { gap: 4px 12px; font-size: 10.5px; }
  .av .av-s0 .av-keys, .av .av-s1 .av-keys { gap: 4px 10px; }
}

@media (max-width: 640px) {
  /* abas compactas: só o número, com o nome escrito apenas na fase atual */
  .av .sg-tab { position: relative; padding: 0 10px; gap: 6px; }
  .av .sg-tab:not(.cur) b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .av-panel { padding: 12px 10px; }
  .av .av-loss-head .av-dim { display: none; }
  /* a 1ª coluna fica só para a escala do gráfico; z, f′ e g ficam no texto da camada em foco */
  .av-grid { grid-template-columns: 34px repeat(var(--n, 9), minmax(0, 1fr)); column-gap: 2px; row-gap: 6px; }
  .av-det { display: none; }
  .av-flow { height: 140px; }
  .av-node { padding: 4px 0; gap: 3px; border-radius: 3px !important; }
  .av-full { display: none; }
  .av-tiny { display: inline; }

  .av-shead, .av-srow { grid-template-columns: minmax(70px, 0.6fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; }
  .av-shead > span:nth-child(2) .av-dim { display: none; }
  .av-sname { font-size: 13px; gap: 6px; }
  .av-btab { grid-template-columns: minmax(58px, 1fr) minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 0.7fr); gap: 6px; }
  .av-bname { font-size: 12px; gap: 4px; }
  .av-bname .av-sprite { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .av-flowarrow { animation: none; }
}

/* ---------- aula: barras horizontais limpas (o canvas cresce com o número de linhas) ---------- */

.ls-canvas.av-hbars { touch-action: pan-y; }