/* ==========================================================================
   EvoluAI — ML Basics · mlb-02 Vizinhos Próximos (prefixo mvz-) · tema pixel
   O mapa e o painel de baixo (ninho, urna, placar) são gráficos limpos
   (epoch/js/chart.js), com o ovo e as criaturas da régua em pixel art por cima;
   legenda e controles ficam no DOM, com cantos retos, bordas de 2 px e sombras
   duras. Abas, sliders e mensagens vêm do kit (sg-).
   ========================================================================== */

.mvz { --mvz-hard: 3px 3px 0 0 rgba(0, 0, 0, 0.5); max-width: 1120px; }

/* ---------- canvases ---------- */

.mvz canvas.mvz-map, .mvz canvas.mvz-aux {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 0;
  background: #141320;
  box-shadow: var(--mvz-hard);
}
.mvz canvas.mvz-map { height: auto; aspect-ratio: 1 / 1; touch-action: manipulation; }
.mvz canvas.mvz-map.pick { cursor: pointer; }
/* fase 03: o dedo arrasta o ovo (a página rola fora do mapa) */
.mvz canvas.mvz-map.drag { touch-action: none; cursor: grab; }
.mvz canvas.mvz-map.drag:active { cursor: grabbing; }
.mvz canvas.mvz-map:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mvz canvas.mvz-aux { height: 92px; }

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

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

/* ---------- legenda (mesmas formas e cores do canvas: fogo ▲, água ●, planta ■) ---------- */

.mvz-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0; font: 400 10px/1.2 var(--pixel-ui); color: var(--text-2); }
.mvz-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mvz-sw { display: inline-block; flex: none; width: 10px; height: 10px; }
.mvz-sw.t0 { width: 11px; background: #ff8c2e; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
/* formas redondas com gradiente: o tema pixel deixa todo border-radius em 0 */
.mvz-sw.t1 { width: 11px; height: 11px; background: radial-gradient(circle closest-side, #5b9bff 0 85%, transparent 95%); }
.mvz-sw.t2 { width: 9px; height: 9px; background: #69c24a; }
.mvz-legend i { display: inline-block; flex: none; }
.mvz-legend .mvz-egg { width: 9px; height: 11px; background: radial-gradient(ellipse closest-side, #f1e9d6 0 85%, transparent 95%); }
.mvz-legend .mvz-bad { width: 13px; height: 15px; background: radial-gradient(ellipse closest-side, #f1e9d6 0 52%, #0c0b10 56% 64%, #ff6159 68% 88%, transparent 94%); }
.mvz-legend .mvz-ring { width: 13px; height: 13px; background: radial-gradient(circle closest-side, rgba(241, 233, 214, 0.06) 0 80%, rgba(241, 233, 214, 0.8) 84% 94%, transparent 100%); }
.mvz-legend .mvz-ln { width: 16px; height: 2px; }
.mvz-legend .mvz-ln.rope { background: #d9d1bf; }
.mvz-legend .mvz-zone { width: 16px; height: 12px; background: #4e2e18; outline: 1px solid rgba(241, 233, 214, 0.32); }

/* nomes dos tipos no texto */
.mvz .mvz-t0 { color: #ff8c2e; }
.mvz .mvz-t1 { color: #7ab0ff; }
.mvz .mvz-t2 { color: #7fd35b; }

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

.mvz-controls, .mvz-go { display: flex; flex-direction: column; gap: 12px; }
.mvz-go:empty, .mvz-msg:empty, .mvz-over:empty { display: none; }
.mvz-over { display: flex; flex-direction: column; gap: 10px; }
.mvz .sg-formula { border: 2px solid var(--line-2); border-radius: 0; background: var(--bg); box-shadow: var(--mvz-hard); }
.mvz .sg-formula .muted { color: var(--muted); }
.mvz .sg-slider > .mono { font-family: var(--pixel); font-size: 15px; color: var(--accent); }
.mvz .sg-slider output { font-family: var(--pixel-ui); font-size: 11px; }
.mvz .mvz-wide .sg-slider { grid-template-columns: 24px minmax(0, 1fr) 84px; }
.mvz-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.mvz .sg-label { margin: 0; }

/* fase 01: uma criatura por botão (o mesmo que tocar no mapa) */
.mvz-picks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mvz-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 56px; padding: 7px 2px;
  border: 2px solid var(--line-2); background: var(--bg-2);
  box-shadow: 2px 2px 0 0 #000;
  font: 400 10px/1 var(--pixel-ui); color: var(--text-2);
  cursor: pointer;
}
.mvz-pick b { font: 400 15px/1 var(--pixel); color: var(--text); }
.mvz-pick:hover:not(:disabled) { border-color: var(--text-2); }
.mvz-pick:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.mvz-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mvz-pick:disabled { cursor: not-allowed; }
.mvz-pick.bad { border-color: var(--bad); background: var(--bad-soft); opacity: 0.6; }
.mvz-pick.bad b { color: var(--bad); text-decoration: line-through; }
.mvz-pick.ok { border-color: var(--good); background: var(--good-soft); }
.mvz-pick.ok b { color: var(--good); }

/* fase 03: setas para o ovo */
.mvz-kline { align-items: baseline; }
.mvz-kbig { font: 400 16px/1 var(--pixel); color: var(--accent); }
.mvz-padrow { display: flex; align-items: center; gap: 14px; }
.mvz-pad { flex: none; display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(2, 40px); gap: 4px; }
.mvz-dir {
  border: 2px solid var(--line-2); background: var(--surface-2);
  box-shadow: 2px 2px 0 0 #000;
  font: 400 16px/1 var(--pixel); color: var(--text);
  cursor: pointer;
}
.mvz-dir.up { grid-column: 2; grid-row: 1; }
.mvz-dir.left { grid-column: 1; grid-row: 2; }
.mvz-dir.down { grid-column: 2; grid-row: 2; }
.mvz-dir.right { grid-column: 3; grid-row: 2; }
.mvz-dir:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.mvz-dir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mvz-dir:disabled { opacity: 0.4; cursor: not-allowed; }

/* fase 05: liga e desliga a escala */
.mvz .sg-chip-toggle { border-width: 2px; border-radius: 0; background: var(--surface-2); box-shadow: 2px 2px 0 0 #000; }
.mvz .sg-chip-toggle[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); border-color: #000; }
.mvz .sg-chip-toggle:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.mvz .sg-chip-toggle:disabled { opacity: 0.45; cursor: not-allowed; }

.mvz .sg-msg code, .mvz .sg-head code, .mvz-over code { font-size: 0.92em; }

@media (prefers-reduced-motion: reduce) {
  .mvz .sg-msg { animation: none; }
}

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

@media (max-width: 920px) {
  /* o grid do kit alinha no início; em coluna, cada bloco ocupa a largura toda */
  .mvz .sg-body { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .mvz .sg-main, .mvz .sg-ctrl { display: contents; }
  .mvz .sg-head { order: 0; }
  .mvz .sg-goal { order: 1; }
  .mvz .mvz-map { order: 2; }
  .mvz .mvz-hud { order: 3; }
  .mvz .mvz-controls { order: 4; }
  .mvz .mvz-go { order: 5; }
  .mvz .mvz-aux { order: 6; }
  .mvz .mvz-msg { order: 7; }
  .mvz .mvz-legend { order: 8; }
  .mvz .mvz-over { order: 9; }
  .mvz .sg-actions { order: 10; }
}

@media (max-width: 640px) {
  .mvz .mvz-hud { font-size: 10px; gap: 4px; }
  .mvz .mvz-hud span { padding: 3px 6px; }
  .mvz-legend { font-size: 9px; gap: 6px 10px; }
  .mvz-pick { min-height: 52px; }
  .mvz-padrow { gap: 10px; }
  .mvz-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); }
}