/* ==========================================================================
   EvoluAI — jogo "Atenção é Tudo" (tr-01), identidade pixel art.
   Classes prefixadas com "at-". Cantos retos, bordas de 2 px, sombras duras.
   Gráficos de dados (plano, painel V, fios, barras de α, matriz) são limpos:
   traço fino, cantos levemente arredondados e números em Geist Mono.
   ========================================================================== */

.at {
  --at-lime: #c8f53c;
  --at-water: #5b9bff;
  --at-good: #64d98b;
  --at-bad: #ff6159;
  --at-bad-dk: #b3263a;
  --at-coin: #ffd23f;
  --at-ink: #0c0b10;
  --at-ink1: #141320;
  --at-ink2: #1d1b2c;
  --at-ink3: #2a2740;
  --at-line: #3b3757;
  --at-paper: #f1e9d6;
  --at-muted: #8b84a3;
  --at-faint: #5b5675;
  --at-ui: var(--pixel-ui, 'Silkscreen', var(--mono));
  --at-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  --at-num: var(--mono, 'Geist Mono', ui-monospace, monospace);
  /* hachura das posições mascaradas (s = −∞, α = 0): listras finas */
  --at-hatch: repeating-linear-gradient(135deg, rgba(222, 67, 80, 0.55) 0 1px, transparent 1px 5px) var(--at-ink1);
}

/* ---------- frase em fichas, com fios de atenção ---------- */

.at-sent {
  position: relative;
  padding: 46px 12px 12px;
  border: 2px solid var(--at-line);
  border-radius: 0;
  background: var(--at-ink);
  box-shadow: var(--at-shadow);
}
.at-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.at-toks { display: flex; flex-wrap: wrap; gap: 32px 8px; }
.at-tok { position: relative; z-index: 1; display: inline-flex; flex-direction: column; gap: 6px; min-width: 42px; }
.at-tok > b {
  display: block;
  padding: 6px 8px 5px;
  border: 2px solid var(--at-line);
  border-radius: 0;
  background: var(--at-ink2);
  box-shadow: var(--at-shadow);
  font: 400 12px/1.2 var(--at-ui);
  color: var(--at-paper);
  text-align: center;
  white-space: nowrap;
}
.at-tok.at-q > b { border-color: var(--at-lime); background: #262f0c; color: var(--at-lime); }
.at-tok.at-tgt > b { border-style: dashed; border-color: var(--at-good); }
.at-tok.at-avd > b { border-style: dashed; border-color: var(--at-bad); }
.at-tok.at-nxt > b { border-style: dashed; border-color: var(--at-coin); }
.at-tok.at-hid > b {
  color: var(--at-faint);
  border-color: var(--at-bad-dk);
  border-style: solid;
  background: var(--at-hatch);
  text-decoration: line-through;
}
.at-tok.at-hid .at-val { color: var(--at-faint); }

/* barra de α: trilho discreto e preenchimento com cantos arredondados */
.at-bar { position: relative; height: 6px; border-radius: 3px; background: var(--at-ink2); overflow: hidden; }
.at-bar.at-h2 { margin-top: -3px; }
.at-bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--at-lime); }
.at-bar.at-h2 i { background: var(--at-water); }
.at-val { font: 400 10.5px/1 var(--at-num); color: var(--at-muted); text-align: center; }
.at-tok.at-tgt .at-val { color: var(--at-good); }

/* ---------- plano q / k e painel V ---------- */

.at-duo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
.at-plane { cursor: grab; border-radius: 0; }
.at-plane:active { cursor: grabbing; }
.at-vcv {
  display: block; width: 100%; height: 380px;
  border: 1px solid var(--line, var(--at-line)); border-radius: 0;
  background: var(--at-ink);
}

.at-formula { line-height: 1.8; }
.at-formula sub, .at-formula sup, .sg-slider sub { font-size: 0.72em; line-height: 0; }

/* ---------- objetivo com condições ao vivo ---------- */

.at-conds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.at-cond {
  display: inline-flex; align-items: center; gap: 8px;
  height: 26px; padding: 0 8px;
  border: 2px solid var(--at-line); border-radius: 0;
  background: var(--at-ink1);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  font: 400 10.5px/1 var(--at-ui); color: var(--at-paper);
  white-space: nowrap;
}
.at-cond em { font-style: normal; color: var(--at-bad); }
.at-cond.at-ok { border-color: var(--at-good); }
.at-cond.at-ok em { color: var(--at-good); }

/* ---------- tabela q·k → α ---------- */

.at-tbl-wrap { padding: 4px 10px 2px; border: 2px solid var(--at-line); border-radius: 0; background: var(--at-ink); box-shadow: var(--at-shadow); }
.at-tbl { width: 100%; border-collapse: collapse; font: 400 10.5px/1.3 var(--at-ui); }
.at-tbl th {
  padding: 9px 4px 7px;
  border-bottom: 2px solid var(--at-line);
  font: 400 9px/1 var(--at-ui);
  color: var(--at-muted); text-align: right;
}
.at-tbl td { padding: 6px 4px; border-bottom: 2px solid var(--at-ink2); color: var(--at-paper); text-align: right; white-space: nowrap; }
.at-tbl th:first-child, .at-tbl td:first-child { text-align: left; padding-left: 0; }
.at-tbl th:last-child, .at-tbl td:last-child { padding-right: 0; }
.at-tbl td b { font-weight: 400; color: var(--at-lime); }
.at-tbl tr.at-tgt td:first-child { color: var(--at-good); }
.at-tbl tr.at-avd td:first-child { color: var(--at-bad); }
.at-tbl tr.at-rest td { color: var(--at-muted); }
.at-tbl tfoot td { border-bottom: 0; color: var(--at-muted); }

.at-msgs { display: flex; flex-direction: column; gap: 10px; }
.at-msgs:empty { display: none; }
.at-pts { font: 400 10.5px/1 var(--at-ui); color: var(--at-coin); white-space: nowrap; }

/* ---------- fase 3: placares, matriz e faixa treino × geração ---------- */

.at-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.at-sc {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px;
  border: 2px solid var(--at-line); border-radius: 0;
  background: var(--at-ink1);
  box-shadow: var(--at-shadow);
}
.at-sc > span { display: flex; flex-direction: column; gap: 5px; min-width: 0; font: 400 11.5px/1 var(--at-ui); color: var(--at-paper); }
.at-sc small { font: 400 9px/1.2 var(--at-ui); color: var(--at-muted); }
.at-sc > b { font: 400 24px/1 var(--at-ui); color: var(--at-coin); white-space: nowrap; }
.at-sc > b small { font-size: 12px; }
.at-sc.at-ok { border-color: var(--at-good); }
.at-sc.at-ok > b { color: var(--at-good); }
.at-sc-vs { font: 400 18px/1 var(--at-ui); color: var(--at-muted); }

.at-strip { display: flex; flex-direction: column; gap: 10px; }
.at-strip-h { font: 400 10.5px/1.5 var(--at-ui); color: var(--at-muted); }
.at-strip-h b { font-weight: 400; color: var(--at-paper); }

.at-gen { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 2px solid var(--at-line); border-radius: 0; background: var(--at-ink1); box-shadow: var(--at-shadow); }
.at-gen p { display: flex; align-items: center; gap: 8px; margin: 0; }
.at-gl { flex: none; width: 62px; font: 400 9px/1 var(--at-ui); text-transform: uppercase; color: var(--at-muted); }
.at-gts { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.at-gt { padding: 4px 6px 3px; border: 2px solid var(--at-line); background: var(--at-ink2); font: 400 11px/1.2 var(--at-ui); color: var(--at-paper); }
.at-gt.at-q { border-color: var(--at-lime); color: var(--at-lime); }
.at-gt.at-fut { border-style: dashed; color: var(--at-muted); }
.at-gt.at-hid { border-style: solid; border-color: var(--at-bad-dk); background: var(--at-hatch); color: var(--at-faint); }
.at-guess { display: inline-flex; flex: 1; align-items: flex-start; gap: 6px; min-width: 0; font: 400 10.5px/1.45 var(--at-ui); color: var(--at-paper); }
.at-guess .icon { width: 12px; height: 12px; margin-top: 2px; flex: none; }
.at-guess.at-ok .icon { color: var(--at-good); }
.at-guess.at-no .icon { color: var(--at-bad); }
.at-guess b { font-weight: 400; color: var(--at-coin); }

/* matriz de atenção: um mapa de calor limpo (células arredondadas, números em Geist Mono) */
.at-mxwrap { padding: 14px; border: 1px solid var(--line, var(--at-line)); border-radius: 0; background: var(--at-ink); }
.at-mx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 14px; font: 400 11px/1.4 var(--at-num); color: var(--at-muted); }
.at-mx-legend b { font-weight: 500; color: var(--at-paper); }
.at-hatch {
  display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px;
  border: 1px solid rgba(222, 67, 80, 0.7); border-radius: 3px;
  background: var(--at-hatch);
}

.at-mx {
  display: grid;
  grid-template-columns: max-content repeat(6, minmax(0, 1fr)) repeat(2, 20px);
  gap: 4px;
  max-width: 500px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.at-corner { align-self: end; padding: 0 6px 6px 0; font: 400 10.5px/1 var(--at-num); color: var(--at-muted); text-align: right; }
.at-ch { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font: 400 11px/1 var(--at-num); color: var(--at-muted); }
.at-ch span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.at-mkh { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font: 500 11px/1 var(--at-num); color: var(--at-muted); }
.at-mk { display: grid; place-items: center; }
.at-mk .icon { width: 12px; height: 12px; }
.at-mk.at-ok { color: var(--at-good); }
.at-mk.at-no { color: var(--at-bad); }
.at-rh {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  padding-right: 6px;
  font: 400 11.5px/1 var(--at-num); color: var(--at-paper); white-space: nowrap;
  cursor: pointer;
}
.at-rh .at-n { color: var(--at-faint); }
.at-rh.at-ok { color: var(--at-good); }
.at-rh.at-scan { color: var(--at-lime); }

.at-cell {
  aspect-ratio: 1;
  min-width: 0;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: var(--at-ink2);
  font: 400 11px/1 var(--at-num);
  font-variant-numeric: tabular-nums;
  color: var(--at-paper);
  cursor: pointer;
}
.at-cell.at-hi { color: var(--at-ink); font-weight: 500; }
.at-cell.at-diag { border-color: rgba(241, 233, 214, 0.45); }
.at-cell.at-act { border-color: rgba(241, 233, 214, 0.18); }
.at-cell.at-act.at-diag { border-color: rgba(241, 233, 214, 0.45); }
.at-cell:hover:not(:disabled) { border-color: var(--at-paper); }
.at-cell[aria-pressed='true'] {
  background: var(--at-hatch);
  border-color: rgba(222, 67, 80, 0.6);
  color: var(--at-paper);
  text-shadow: 0 0 3px var(--at-ink), 0 0 2px var(--at-ink);
}
.at-cell:disabled { cursor: default; }
.at-cell:focus-visible { outline: 2px solid var(--at-lime); outline-offset: 1px; }

/* ---------- fase 4: cabeças e saída concatenada ---------- */

.at-heads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.at-heads[data-n='1'] { grid-template-columns: minmax(0, 1fr); }
.at-hp { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; }
.at-hp figcaption { display: flex; align-items: center; gap: 8px; font: 400 10.5px/1 var(--at-ui); color: var(--at-paper); }
.at-hp figcaption i { width: 8px; height: 8px; border-radius: 50%; background: var(--at-lime); flex: none; }
.at-hp.at-h2 figcaption i { background: var(--at-water); }
.at-hp figcaption span { margin-left: auto; color: var(--at-muted); }
.at-hp .sg-canvas { height: 340px; }
.at-heads[data-n='1'] .at-hp .sg-canvas { height: 380px; }

.at-sl .sg-label { margin-bottom: 2px; }
.at-sl.at-h1 .sg-label { color: var(--at-lime); }
.at-sl.at-h2 { --accent: var(--at-water); }
.at-sl.at-h2 .sg-label { color: var(--at-water); }

.at-concat { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 2px solid var(--at-line); border-radius: 0; background: var(--at-ink1); box-shadow: var(--at-shadow); }
.at-cc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.at-cc { display: inline-flex; flex-direction: column; gap: 6px; min-width: 0; padding: 7px 10px; border: 2px solid var(--at-line); border-radius: 0; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
.at-cc.at-h1 { border-color: var(--at-lime); background: #1f260b; }
.at-cc.at-h2 { border-color: var(--at-water); background: #121c33; }
.at-cc.at-fin { border-color: var(--at-coin); background: #261f0b; }
.at-cc > i { font: 400 9px/1 var(--at-ui); font-style: normal; color: var(--at-muted); }
.at-cc-t { display: grid; grid-template-columns: 58px 54px auto; align-items: center; gap: 6px; }
.at-cc-t em { font: 400 9px/1 var(--at-ui); font-style: normal; color: var(--at-muted); }
.at-cc-t b { font: 400 11px/1 var(--at-num); color: var(--at-paper); }
.at-tr { position: relative; height: 6px; border-radius: 3px; background: var(--at-ink3); }
.at-tr i { display: block; height: 100%; max-width: 100%; border-radius: 3px; background: var(--at-muted); }
.at-h1 .at-tr i { background: var(--at-lime); }
.at-h2 .at-tr i { background: var(--at-water); }
.at-fin .at-tr i { background: var(--at-coin); }
.at-fin .at-tr.at-ok i { background: var(--at-good); }
/* marca da meta (0,50) na saída final */
.at-fin .at-tr::after { content: ''; position: absolute; left: calc(50% - 0.75px); top: -3px; bottom: -3px; width: 1.5px; border-radius: 1px; background: var(--at-paper); }
.at-cc-op { font: 400 11px/1 var(--at-ui); color: var(--at-muted); }
.at-concat p { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

/* ---------- telas médias e estreitas: o que se mexe fica perto do efeito ---------- */

@media (max-width: 920px) {
  /* coluna única que não cresce com o conteúdo (1fr deixaria a tabela e os chips empurrarem a largura) */
  .at .sg-body { row-gap: 14px; grid-template-columns: minmax(0, 1fr); }
  .at .sg-main, .at .sg-ctrl { display: contents; }
  .at .sg-main > *, .at .sg-ctrl > * { min-width: 0; max-width: 100%; }
  .at-cond { height: auto; min-height: 26px; padding: 5px 8px; white-space: normal; line-height: 1.4; }
  .at .sg-head { order: 0; }
  .at .sg-goal { order: 1; }
  .at .at-board { order: 2; }
  .at .sg-main > .at-sent, .at .at-mxwrap { order: 3; }
  .at .at-duo, .at .at-heads, .at .at-strip { order: 4; }
  .at .sg-caption { order: 5; }
  .at .at-concat { order: 6; }
  .at .sg-sliders { order: 7; }
  .at .sg-actions { order: 8; }
  .at .at-msgs { order: 9; }
  .at .sg-formula { order: 10; }
  .at .at-tbl-wrap, .at .sg-stats { order: 11; }
  /* duas cabeças: o botão de travar logo abaixo da saída; os controles (redundantes com o arraste) depois */
  .at .at-s4 .sg-actions { order: 7; }
  .at .at-s4 .at-msgs { order: 8; }
  .at .at-s4 .sg-sliders { order: 9; }
}
@media (max-width: 640px) {
  .at-duo { grid-template-columns: minmax(0, 1fr); }
  .at-vcv { height: 190px; }
  .at-heads { grid-template-columns: minmax(0, 1fr); }
  .at-hp .sg-canvas, .at-heads[data-n='1'] .at-hp .sg-canvas { height: 280px; }
  .at-sent { padding: 42px 10px 10px; }
  .at-toks { gap: 30px 6px; }
  .at-tok > b { padding: 5px 6px 4px; font-size: 11px; }
}
@media (max-width: 480px) {
  .at-mxwrap { padding: 8px; }
  .at-mx { gap: 3px; grid-template-columns: max-content repeat(6, minmax(0, 1fr)) repeat(2, 14px); }
  .at-hp .sg-canvas { height: 260px; }
  .at-cell { font-size: 10px; border-radius: 3px; }
  .at-rh { padding-right: 4px; font-size: 10.5px; }
  .at-rh .at-n { display: none; }
  .at-ch { font-size: 10px; }
  .at-tbl { font-size: 9.5px; }
  .at-sc { padding: 8px 10px; }
  .at-sc > b { font-size: 20px; }
  .at-gl { width: 52px; }
}