/* ==========================================================================
   ML Basics · mlb-05 · O Perceptron (prefixo mpc-) · tema pixel
   Estilos do jogo (js/games/mlb-perceptron/game.js). Os canvases têm a resolução
   da tela (epoch/js/chart.js): o plano e o gráfico de erros são limpos, e o sapo e
   os cogumelos são pixel art por cima. Aqui só o acabamento: cantos retos, bordas
   de 2px, sombras duras.
   ========================================================================== */

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

/* ---------- plano e faixa do sapo ---------- */

.mpc .sg-canvas,
.mpc-strip {
  border-radius: 0;
  background: #0c0b10;
  box-shadow: var(--mpc-hard);
}
/* toque rápido nos cogumelos sem travar a rolagem da página */
.mpc .sg-canvas { height: 400px; touch-action: manipulation; cursor: pointer; }
.mpc .sg-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mpc-strip { display: block; width: 100%; height: 130px; border: 1px solid var(--line); touch-action: pan-y; }

/* ---------- leitura sob o plano: chips de HUD ---------- */

.mpc .sg-caption { justify-content: flex-start; gap: 6px; font: 400 11px/1.3 var(--pixel-ui); color: var(--muted); }
.mpc .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;
}
.mpc .sg-caption b { font-weight: 400; color: var(--accent); }

/* ---------- controles ---------- */

.mpc-controls { display: flex; flex-direction: column; gap: 14px; }
.mpc-msg:empty { display: none; }
.mpc .sg-formula { border-radius: 0; border: 2px solid var(--line-2); background: var(--bg); box-shadow: var(--mpc-hard); }
.mpc .sg-formula .muted b { color: var(--text-2); }
.mpc .sg-slider > .mono { font-family: var(--pixel); font-size: 15px; color: var(--accent); }
.mpc .sg-slider output { font-family: var(--pixel-ui); font-size: 11px; }

.mpc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mpc-btns .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }

/* os 6 cogumelos da fase 2 e as 3 ilhas da fase 5: botões grandes, bons para o dedo */
.mpc-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mpc-isl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mpc-pick,
.mpc-isl button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-height: 48px; padding: 8px 10px;
  border: 2px solid var(--line-2); border-radius: 0;
  background: var(--bg-2); color: var(--text);
  font: 500 12.5px/1.3 var(--sans); text-align: left;
  box-shadow: 2px 2px 0 0 #000;
  cursor: pointer;
}
.mpc-pick small,
.mpc-isl small { font: 400 10.5px/1.3 var(--pixel-ui); color: var(--muted); }
.mpc-pick small.pu { color: var(--accent); }
.mpc-pick small.ve { color: var(--bad); }
.mpc-pick.cur,
.mpc-isl button[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); }
.mpc-pick.bad { border-style: dashed; border-color: var(--bad); }
.mpc-pick.cur.bad { border-style: solid; }
.mpc-isl button.done small { color: var(--good); }
.mpc-pick:active:not(:disabled),
.mpc-isl button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.mpc-pick:disabled,
.mpc-isl button:disabled { opacity: 0.55; cursor: not-allowed; }
.mpc-pick:focus-visible,
.mpc-isl button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* fase 4: pesos iniciais, metas e tabela dos treinos */
.mpc-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.mpc .sg-chip-toggle { min-height: 40px; border-radius: 0; background: var(--surface-2); box-shadow: 2px 2px 0 0 #000; }
.mpc .sg-chip-toggle[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); border-color: #000; }
.mpc .sg-chip-toggle:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.mpc .sg-chip-toggle:disabled { opacity: 0.45; cursor: not-allowed; }

.mpc-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.mpc-checks li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 10px; border: 2px dashed var(--line-2); }
.mpc-checks li .icon { flex: none; margin-top: 2px; color: var(--muted); }
.mpc-checks li b { font-weight: 500; color: var(--text); }
.mpc-checks li.ok { border-style: solid; border-color: var(--good); background: var(--good-soft); }
.mpc-checks li.ok .icon { color: var(--good); }

.mpc-runs { width: 100%; border-collapse: collapse; font: 400 11px/1.3 var(--pixel-ui); color: var(--text-2); }
.mpc-runs th { text-align: left; font-weight: 400; color: var(--muted); padding: 4px 6px; border-bottom: 2px solid var(--line-2); }
.mpc-runs td { padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mpc-runs td.zero { color: var(--info); }
.mpc-runs td.velho { color: var(--warn); }

/* fase 5: energia */
.mpc-energy { display: inline-block; width: 150px; max-width: 50%; height: 12px; border: 2px solid var(--line-2); background: var(--bg); }
.mpc-energy i { display: block; height: 100%; background: var(--accent); transition: width 0.2s var(--ease); }

/* ---------- celular: o que se mexe fica logo abaixo do plano ---------- */

@media (max-width: 920px) {
  .mpc .sg-body { display: flex; flex-direction: column; gap: 12px; }
  .mpc .sg-main, .mpc .sg-ctrl { display: contents; }
  .mpc .sg-head { order: 0; }
  .mpc .sg-goal { order: 1; }
  .mpc .sg-canvas { order: 2; }
  .mpc .sg-caption { order: 3; }
  .mpc-strip { order: 4; }
  .mpc-controls { order: 5; }
  .mpc-msg { order: 6; }
  .mpc .sg-actions { order: 7; }
}

@media (max-width: 640px) {
  .mpc .sg-canvas { height: 300px; }
  .mpc-strip { height: 104px; }
  .mpc .sg-caption { font-size: 10px; gap: 4px; }
  .mpc .sg-caption span { padding: 3px 6px; white-space: normal; }
  .mpc-isl { grid-template-columns: minmax(0, 1fr); }
  .mpc-runs { font-size: 10px; }
  .mpc-runs td, .mpc-runs th { padding: 3px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .mpc .sg-msg { animation: none; }
  .mpc-energy i { transition: none; }
  .mpc-pick:active:not(:disabled),
  .mpc-isl button:active:not(:disabled),
  .mpc .sg-chip-toggle:active:not(:disabled) { transform: none; }
}

/* ---------- aula (js/games/mlb-perceptron/aula.js) ---------- */

/* tabelas das demos (a vitrine, os 6 cogumelos, os treinos com cada η): se não couberem, rolam de lado */
.mpc-ls-scroll { max-width: 100%; overflow-x: auto; }
@media (max-width: 640px) {
  .mpc-ls-scroll .ls-table th, .mpc-ls-scroll .ls-table td { padding: 6px 8px; }
}