/*
 * Estilo do Estaciona Aí, fatia vertical da direção de arte ("domingo no fim
 * da tarde"). Todo valor bruto mora nos tokens de `:root`; o resto da folha
 * só lê variável. As cores repetem a paleta de `src/art/palette.js`.
 *
 * O estacionamento é pixel art em resolução nativa (casa de 24 px) escalada
 * por `--px`, que o jogo calcula: inteira (×2, ×3) quando cabe, para o pixel
 * ficar nítido, e em quartos só em tela pequena. Toda medida do cenário é
 * `<px nativos> * var(--px)`.
 *
 * O jogo ocupa o quadro inteiro e não rola a página: a plataforma é quem põe
 * o iframe em tela cheia, e o jogo só preenche o espaço que recebe, de 320 px
 * de largura para cima.
 */

@font-face {
  font-family: 'Andika';
  src: url('./fonts/Andika-Regular.latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Andika';
  src: url('./fonts/Andika-Bold.latin.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  --color-bg: #f3e4cc;
  --color-paper: #fff6e6;
  --color-ink: #3b2f2a;
  --color-muted: #6b5a4e;
  --color-accent: #2f7d5b;
  --color-accent-dark: #1f5a40;
  --color-accent-text: #fff6e6;
  --color-edge: #d9c7a8;
  --color-edge-dark: #bba98c;
  --color-focus: #ef7d22;
  --color-hint: #ffd84d;
  --color-pick: #fff6e6;
  --color-fail: #e8875a;
  --color-plate: #fff6e6;
  --color-plate-ink: #3b2f2a;

  --font-body: 'Andika', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.25rem, 2vw + 0.75rem, 1.75rem);
  --text-xl: clamp(1.5rem, 3vw + 0.75rem, 2.25rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;

  --radius: 0.5rem;
  --border: 2px;
  --press: 3px;
  --focus-ring: 3px;
  --target: 2.75rem;
  --planner-width: 23rem;
  --space-half: 0.25rem;
  --stack-top: 100;
  --radius-sm: 0.25rem;
  --radius-pill: 999px;
  --key-depth: 4px;
  --key-size: 2.75rem;
  --block-tab-w: 1.25rem;
  --block-tab-h: 0.375rem;
  --block-tab-x: 1.75rem;
  --block-car-cell: 0.625rem;
  --script-dot: 1rem;
  --color-script: #f6e9d0;
  --color-script-dot: #e4d0ac;
  --color-slot: #fff6e6;
  --side-width: 15rem;
  --panel-max: 30rem;

  /* O cenário em pixels nativos (src/art/scene.js e sky.js). */
  --px: 2;
  --scene-w: 196px;
  --scene-h: 208px;
  --sky-h: 30px;
  --lot-x: 20px;
  --lot-y: 40px;
  --lot-side: 144px;
  --exit-x: 164px;
  --exit-y: 88px;
  --exit-h: 24px;

  /* A fase guiada: anel de toque, mão-guia, faixa do caminho e mira. */
  --ring-gap: 4px;
  --guide-dot: 0.75rem;
  --sign-soft: 45%;
  --ghost-opacity: 0.4;
  --hatch: 3px;
  --dash: 4px;
  --gate-reach: 6px;
  --hand-size: 24px;

  --duration-fast: 120ms;
  --duration-move: 140ms;
  --duration-gate: 400ms;
  --duration-leave: 700ms;
  --duration-cue: 450ms;
  --duration-strip: 900ms;
  --duration-pulse: 1200ms;
  --duration-hand: 1400ms;
  /* Quanto a criança só olha o objetivo, e a parada que repete a mão-guia. */
  --duration-look: 3000ms;
  --duration-idle: 15000ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-snap: cubic-bezier(0.3, 1.4, 0.5, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.45;
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-1);
  height: 100dvh;
  padding: var(--space-1) var(--space-2);
}

.stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

h1 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.1;
}

.stage-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.status {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.status[data-state='error'] {
  color: var(--color-fail);
}

.sound {
  display: flex;
  gap: var(--space-1);
}

/* --- a tela de níveis, como no Lightbot: cada nível com seis fases ------------- */

.levels {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--space-2);
  min-height: 0;
  overflow-y: auto;
}

.levels-title {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.1;
}

.levels-lead {
  margin: 0;
  color: var(--color-muted);
  text-align: center;
}

.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-2);
  width: min(100%, 64rem);
}

.module-card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-paper);
  border-radius: var(--radius);
  box-shadow: 0 var(--press) 0 var(--color-edge-dark);
}

.module-number {
  margin: 0;
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.module-title {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.2;
}

.module-meta,
.module-skill {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-height: var(--target);
  font: inherit;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-accent-dark);
  background: var(--color-paper);
  border: var(--border) solid var(--color-accent-dark);
  border-radius: var(--radius);
  box-shadow: 0 var(--press) 0 var(--color-accent-dark);
  cursor: pointer;
  transition:
    transform var(--duration-fast) ease-out,
    box-shadow var(--duration-fast) ease-out;
}

.tile:active {
  transform: translateY(var(--press));
  box-shadow: 0 0 0 var(--color-accent-dark);
}

.tile:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-ring);
}

/* A fase guiada: a estrelinha diz que o jogo mostra cada passo. */
.tile[data-guided]::before {
  content: '★';
  position: absolute;
  top: 0.1rem;
  left: 0.25rem;
  font-size: var(--text-sm);
  color: var(--color-focus);
}

/* Concluída nesta aula. */
.tile[data-state='solved'] {
  color: var(--color-accent-text);
  background: var(--color-accent);
}

.tile[data-state='solved']::after,
.tile[data-state='revealed']::after {
  position: absolute;
  right: 0.25rem;
  bottom: 0.1rem;
  font-size: var(--text-sm);
}

.tile[data-state='solved']::after {
  content: '✓';
}

.tile[data-state='revealed']::after {
  content: '◔';
}

/* A próxima fase sugerida: a primeira ainda não feita. */
.tile[data-suggested] {
  outline: var(--focus-ring) dashed var(--color-focus);
  outline-offset: var(--focus-ring);
}

.levels-actions {
  display: flex;
  justify-content: center;
}

/* --- o palco ------------------------------------------------------------- */

.play {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: 'head' 'how' 'garage' 'planner' 'feedback' 'actions';
  align-content: start;
  justify-items: center;
  gap: var(--space-1);
  min-height: 0;
}

.level-head { grid-area: head; }
.how-to { grid-area: how; }
.garage { grid-area: garage; }
.planner { grid-area: planner; }
.feedback { grid-area: feedback; }
.actions { grid-area: actions; }

/* No roteiro, o painel divide o espaço: ao lado em tela larga, embaixo em tela estreita. */
.play.is-planning {
  overflow-y: auto;
}

@media (min-width: 46rem) {
  .play.is-planning {
    grid-template-columns: auto var(--planner-width);
    grid-template-areas: 'head head' 'how how' 'garage planner' 'feedback feedback' 'actions actions';
    justify-content: center;
    column-gap: var(--space-2);
  }
  .play.is-planning .planner {
    align-self: start;
    justify-self: stretch;
  }
}

/*
 * Em tela larga (Chromebook), o título, o lugar e a instrução vão para uma
 * coluna à esquerda do tabuleiro, e o painel do roteiro para a direita: o
 * tabuleiro fica sempre do mesmo tamanho, com ou sem instrução na tela.
 */
@media (min-width: 60rem) {
  .play,
  .play.is-planning {
    grid-template-columns: var(--side-width) auto var(--planner-width);
    /*
     * Título, instrução, retorno e botões empilhados na coluna da esquerda, ao
     * lado do tabuleiro; a sobra de altura vai para a última linha, flexível.
     */
    grid-template-areas:
      'head garage planner'
      'how garage planner'
      'feedback garage planner'
      'actions garage planner';
    grid-template-rows: auto auto auto 1fr;
    align-content: start;
    justify-content: center;
    align-items: start;
    column-gap: var(--space-3);
  }
  .level-head,
  .how-to {
    justify-self: stretch;
    width: auto;
  }
  .level-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .level-head .counter {
    margin: var(--space-1) 0 0;
  }
  .play .feedback {
    justify-self: stretch;
    width: auto;
    text-align: left;
  }
  .play .actions {
    align-self: start;
    justify-self: stretch;
    justify-content: flex-start;
    width: auto;
  }
  .play .planner {
    align-self: start;
    justify-self: stretch;
    min-height: 0;
    max-height: 100%;
  }
  .play.is-planning {
    overflow-y: hidden;
  }
  .play .script {
    max-height: none;
  }
}

/*
 * Chromebook dentro da plataforma: o palco do AkyEdu é largo e baixo. As
 * colunas de texto e do roteiro encolhem para o tabuleiro crescer.
 */
@media (max-width: 75rem) {
  :root {
    --side-width: 12rem;
    --planner-width: 20rem;
  }
}

/* Palco baixo: título menor e sem os rótulos das teclas, que a instrução já diz. */
@media (max-height: 36rem) {
  h1,
  .levels-title {
    font-size: var(--text-lg);
  }
  .stage {
    padding-block: var(--space-half);
  }
  .pad-label {
    display: none;
  }
  .planner {
    padding-top: var(--space-half);
  }
}

/* Celular: o bloco aperta o espaço por dentro para caber numa linha; a cor já diz o veículo. */
@media (max-width: 30rem) {
  .block-car {
    display: none;
  }
  .block-body {
    gap: var(--space-half);
    padding-inline: var(--space-half);
  }
  .block-slot {
    min-width: 0;
    padding-inline: var(--space-half);
  }
  .planner {
    padding-inline: var(--space-1);
  }
  /* Seis teclas numa linha só, sem passar de 44 px: o vão entre elas encolhe. */
  [data-coord-pad] .pad-row {
    gap: var(--space-half);
  }
}

.level-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-2);
  width: min(100%, calc(var(--scene-w) * var(--px)));
}

.level-title {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.2;
}

.place {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.counter {
  margin: 0 0 0 auto;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.how-to {
  width: min(100%, calc(var(--scene-w) * var(--px)));
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* --- o estacionamento -------------------------------------------------------- */

.garage {
  display: grid;
  width: calc(var(--scene-w) * var(--px));
  /* Altura explícita: sem ela, a trilha da grade do palco não conta o conteúdo e encolhe a 0. */
  height: calc((var(--scene-h) + var(--sky-h)) * var(--px));
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 var(--press) 0 var(--color-edge-dark);
}

/* A cena de fechamento, em vista lateral, no lugar do estacionamento. */
.ending {
  grid-area: garage;
  width: calc(var(--scene-w) * var(--px));
  height: calc(var(--ending-h) * var(--px));
  border-radius: var(--radius);
  box-shadow: 0 var(--press) 0 var(--color-edge-dark);
  image-rendering: pixelated;
}

.horizon,
.scene {
  display: block;
  image-rendering: pixelated;
}

.horizon {
  width: 100%;
  height: calc(var(--sky-h) * var(--px));
}

.yard {
  position: relative;
  width: calc(var(--scene-w) * var(--px));
  height: calc(var(--scene-h) * var(--px));
}

.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lot {
  --cell: calc(100% / var(--size));
  position: absolute;
  left: calc(var(--lot-x) * var(--px));
  top: calc(var(--lot-y) * var(--px));
  width: calc(var(--lot-side) * var(--px));
  height: calc(var(--lot-side) * var(--px));
  touch-action: none;
}

/* As letras A–F e os números 1–6, como plaquinhas pintadas no meio-fio. */
.coords {
  position: absolute;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: max(0.8rem, calc(5.5px * var(--px)));
  font-weight: 700;
  line-height: 1;
}

.coords span {
  min-width: 1.4em;
  padding: 0.1em 0.25em;
  text-align: center;
  color: var(--color-plate-ink);
  background: var(--color-plate);
  border-radius: 0.3em;
  box-shadow: 0 1px 0 var(--color-edge-dark);
}

.coords-cols {
  left: calc(var(--lot-x) * var(--px));
  top: calc(29px * var(--px));
  width: calc(var(--lot-side) * var(--px));
  height: calc(10px * var(--px));
  grid-template-columns: repeat(var(--size), 1fr);
}

.coords-rows {
  left: 0;
  top: calc(var(--lot-y) * var(--px));
  width: calc(18px * var(--px));
  height: calc(var(--lot-side) * var(--px));
  grid-template-rows: repeat(var(--size), 1fr);
}

/* A cancela da saída: levanta quando o caminho do carro vermelho fica livre. */
.gate {
  position: absolute;
  left: calc((var(--exit-x) + 1px) * var(--px));
  top: calc((var(--exit-y) - 5px) * var(--px));
  pointer-events: none;
}

.gate-post,
.gate-bar {
  display: block;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.gate-post {
  width: calc(5px * var(--px));
  height: calc(5px * var(--px));
  background-image: var(--sprite-post);
}

.gate-bar {
  width: calc(3px * var(--px));
  height: calc(var(--exit-h) * var(--px));
  margin-left: calc(1px * var(--px));
  background-image: var(--sprite-bar);
  transform-origin: top;
  transition: transform var(--duration-gate) var(--ease-snap);
}

.gate.is-open .gate-bar {
  transform: scaleY(0.12);
}

/* --- os veículos ------------------------------------------------------------- */

.vehicle {
  position: absolute;
  padding: 0;
  font: inherit;
  background: transparent;
  border: 0;
  cursor: grab;
  touch-action: none;
  transition:
    left var(--duration-move) var(--ease-snap),
    top var(--duration-move) var(--ease-snap),
    transform var(--duration-move) var(--ease-out),
    opacity var(--duration-leave) ease-in;
}

.vehicle[data-axis='x'] {
  left: calc(var(--pos) * var(--cell));
  top: calc(var(--lane) * var(--cell));
  width: calc(var(--len) * var(--cell));
  height: var(--cell);
  transform: translateX(calc(var(--shift, 0) * 100% / var(--len)));
}

.vehicle[data-axis='y'] {
  left: calc(var(--lane) * var(--cell));
  top: calc(var(--pos) * var(--cell));
  width: var(--cell);
  height: calc(var(--len) * var(--cell));
  transform: translateY(calc(var(--shift, 0) * 100% / var(--len)));
}

.vehicle.is-dragging {
  z-index: 2;
  cursor: grabbing;
  transition: none;
}

.vehicle:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: calc(-1 * var(--focus-ring));
  z-index: 2;
}

.lot.is-locked .vehicle {
  cursor: default;
}

/* O sprite em pixel art, desenhado em src/art/vehicles.js. */
.body {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-image: var(--sprite);
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.mark {
  position: relative;
  z-index: 1;
  color: var(--color-paper);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  text-shadow:
    1px 1px 0 var(--color-ink),
    -1px -1px 0 var(--color-ink),
    1px -1px 0 var(--color-ink),
    -1px 1px 0 var(--color-ink);
}

.vehicle.is-hint .body {
  outline: var(--focus-ring) solid var(--color-hint);
  outline-offset: calc(-1px * var(--px));
}

.vehicle[data-hint='right'] .mark::before { content: '→'; }
.vehicle[data-hint='left'] .mark::before { content: '←'; }
.vehicle[data-hint='down'] .mark::before { content: '↓'; }
.vehicle[data-hint='up'] .mark::before { content: '↑'; }

/* O carro vermelho passa a cancela e some na rua. */
.vehicle.is-leaving {
  transform: translateX(170%);
  opacity: 0;
  transition:
    transform var(--duration-leave) ease-in,
    opacity var(--duration-leave) ease-in;
}

/* --- escolher veículos: "Quem está no caminho?" e o roteiro ------------------ */

.lot.is-picking .vehicle {
  cursor: pointer;
}

.vehicle.is-selected .body {
  outline: var(--focus-ring) solid var(--color-pick);
  outline-offset: calc(-1px * var(--px));
}

/* Marcado em "Quem está no caminho?": um cone de trânsito em cima. */
.vehicle.is-picked .mark {
  width: calc(11px * var(--px));
  height: calc(11px * var(--px));
  background: var(--sprite-cone) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}

.vehicle.is-failed .body {
  outline: var(--focus-ring) solid var(--color-fail);
  outline-offset: calc(-1px * var(--px));
}

/* --- textos e botões: plaquinhas de esmalte ----------------------------------- */

.feedback {
  width: min(100%, var(--panel-max));
  min-height: 1.45em;
  margin: 0;
  text-align: center;
  color: var(--color-ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  width: min(100%, var(--panel-max));
}

.action,
.key,
.toggle {
  min-height: var(--target);
  padding: 0 var(--space-2);
  font: inherit;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: var(--color-paper);
  border: var(--border) solid var(--color-accent-dark);
  border-radius: var(--radius);
  box-shadow: 0 var(--press) 0 var(--color-accent-dark);
  cursor: pointer;
  transition:
    transform var(--duration-fast) ease-out,
    box-shadow var(--duration-fast) ease-out,
    opacity var(--duration-fast) ease-out;
}

.action:active:not(:disabled),
.key:active:not(:disabled),
.toggle:active {
  transform: translateY(var(--press));
  box-shadow: 0 0 0 var(--color-accent-dark);
}

.action-main,
.key.is-on {
  color: var(--color-accent-text);
  background: var(--color-accent);
}

.toggle {
  min-height: var(--target);
  padding: 0 var(--space-1);
  font-size: var(--text-sm);
}

.toggle[aria-pressed='false'] {
  color: var(--color-muted);
  border-color: var(--color-edge-dark);
  box-shadow: 0 var(--press) 0 var(--color-edge-dark);
  text-decoration: line-through;
}

.action:disabled,
.key:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.action:focus-visible,
.key:focus-visible,
.toggle:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-ring);
}

/* --- o painel do roteiro: o ticket da viagem ----------------------------------- */

.planner {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: min(100%, var(--panel-max));
  padding: var(--space-1) var(--space-2) var(--space-2);
  background: var(--color-paper);
  border-top: var(--border) dashed var(--color-edge-dark);
  border-bottom: var(--border) dashed var(--color-edge-dark);
  border-radius: var(--radius);
  box-shadow: 0 var(--press) 0 var(--color-edge);
}

.draft {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

.pad {
  display: grid;
  gap: var(--space-half);
}

.pad-label {
  margin: var(--space-half) 0 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-muted);
}

.pad-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

/* Seis letras ou seis números numa linha só, do tamanho que couber. */
[data-coord-pad] .pad-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.arrows {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* As teclas são teclas de verdade: tampa clara sobre a base, afundam no toque. */
.key {
  min-width: var(--key-size);
  min-height: var(--key-size);
  padding: 0;
  font-size: var(--text-md);
  color: var(--color-ink);
  border-color: var(--color-edge-dark);
  box-shadow:
    inset 0 calc(-1 * var(--press)) 0 var(--color-edge),
    0 var(--key-depth) 0 var(--color-edge-dark);
}

.key:active:not(:disabled) {
  transform: translateY(var(--key-depth));
  box-shadow: inset 0 0 0 var(--color-edge);
}

[data-coord-pad] .key {
  min-width: 0;
}

.key.is-on,
.key-dir {
  color: var(--color-accent-text);
  background: var(--color-accent);
  border-color: var(--color-accent-dark);
  box-shadow:
    inset 0 calc(-1 * var(--press)) 0 var(--color-accent-dark),
    0 var(--key-depth) 0 var(--color-accent-dark);
}

/* A seta é a tecla que fecha o passo: verde, como Executar. */
.key-dir {
  font-size: var(--text-lg);
}

.stepper {
  gap: 0;
  width: max-content;
  background: var(--color-slot);
  border: var(--border) solid var(--color-edge-dark);
  border-radius: var(--radius-pill);
}

.key.key-small {
  min-width: var(--target);
  min-height: var(--target);
  color: var(--color-accent-dark);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: none;
}

.key.key-small:active:not(:disabled) {
  transform: none;
  background: var(--color-edge);
}

.count {
  min-width: 4.5rem;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- o roteiro: blocos de montar, como no Scratch ------------------------------ */

.script {
  display: grid;
  flex: 0 1 auto;
  align-content: start;
  justify-items: start;
  min-height: 6rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: var(--space-1) var(--space-1) var(--space-2);
  background-color: var(--color-script);
  background-image: radial-gradient(var(--color-script-dot) 1px, transparent 1.5px);
  background-size: var(--script-dot) var(--script-dot);
  border: var(--border) solid var(--color-edge);
  border-radius: var(--radius);
}

/* O chapéu: o bloco que começa o roteiro, de topo redondo. */
.hat {
  position: relative;
  z-index: var(--stack-top);
  margin: 0;
  padding: var(--space-half) var(--space-2) var(--space-half) var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent-text);
  background: var(--color-accent);
  border: var(--border) solid var(--color-accent-dark);
  border-radius: var(--space-2) var(--space-2) var(--radius-sm) var(--radius-sm);
}

.hat-flag {
  display: inline-block;
  margin-right: var(--space-half);
}

/* O dente de baixo de cada bloco, que encaixa no de baixo dele. */
.hat::after,
.block::after {
  content: '';
  position: absolute;
  left: var(--block-tab-x);
  bottom: calc(-1 * var(--block-tab-h) - var(--border));
  width: var(--block-tab-w);
  height: var(--block-tab-h);
  background: var(--color-accent);
  border: var(--border) solid var(--color-accent-dark);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.block::after {
  background: var(--block-light);
  border-color: var(--block-shade);
}

.program {
  display: grid;
  justify-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sem passo ainda: a vaga tracejada onde o primeiro bloco vai encaixar. */
.program:empty::before {
  content: '';
  display: block;
  width: 12rem;
  height: var(--target);
  margin-top: calc(-1 * var(--border));
  border: var(--border) dashed var(--color-edge-dark);
  border-radius: var(--radius-sm);
}

.block {
  position: relative;
  margin-top: calc(-1 * var(--border));
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--block-line);
  background: var(--block-light);
  border: var(--border) solid var(--block-shade);
  border-left: calc(var(--border) * 3) solid var(--block-base);
  border-radius: var(--radius-sm);
  animation: block-in var(--duration-move) var(--ease-snap);
}

/* Cada bloco fica por cima do seguinte, para o dente aparecer. */
.block {
  z-index: calc(var(--stack-top) - var(--n));
}

/* O bloco inteiro é um botão: tocar nele abre a correção do passo. */
.block-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-half) var(--space-1);
  min-height: var(--target);
  padding: var(--space-half) var(--space-1);
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.block-body:disabled {
  cursor: default;
}

.block-body:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--border);
}

/* A silhueta do passo que está rodando: anda um pouco e acende em volta. */
.block.is-running {
  transform: translateX(var(--space-1));
  box-shadow:
    0 0 0 var(--border) var(--color-paper),
    0 0 0 calc(var(--border) + var(--focus-ring)) var(--color-ink);
  transition: transform var(--duration-fast) var(--ease-snap);
}

/* O bloco aberto para correção: contorno tracejado e a casinha piscando de leve. */
.block.is-editing {
  outline: var(--focus-ring) dashed var(--color-focus);
  outline-offset: var(--border);
}

.block.is-editing .block-slot {
  border-color: var(--color-focus);
  animation: slot-pulse calc(var(--duration-leave) * 2) ease-in-out infinite;
}

@keyframes slot-pulse {
  50% {
    background: var(--color-hint);
  }
}

.block-n {
  min-width: 1rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* O veículo do passo em miniatura, deitado, na mesma arte do estacionamento. */
.block-car {
  width: calc(var(--len) * var(--block-car-cell));
  height: var(--block-car-cell);
  background: var(--sprite) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}

.block-word {
  font-weight: 400;
}

/* A casinha branca do Scratch: o valor que a criança escolheu. */
.block-slot {
  min-width: 2rem;
  padding: 0 var(--space-1);
  text-align: center;
  color: var(--color-ink);
  background: var(--color-slot);
  border: var(--border) solid var(--block-shade);
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}

.block.is-draft {
  background: transparent;
  border-style: dashed;
  animation: none;
}

.block.is-draft::after {
  display: none;
}

.block.is-failed {
  outline: var(--focus-ring) solid var(--color-fail);
  outline-offset: 0;
  animation: block-shake var(--duration-gate) ease-out;
}

.block.is-failed .block-name {
  text-decoration: line-through var(--color-fail) var(--border);
}

@keyframes block-in {
  from {
    transform: translateY(calc(-1 * var(--space-1)));
    opacity: 0;
  }
}

@keyframes block-shake {
  25% {
    transform: translateX(calc(-1 * var(--space-half)));
  }
  50% {
    transform: translateX(var(--space-half));
  }
  75% {
    transform: translateX(calc(-1 * var(--space-half)));
  }
}

.planner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* Em tela estreita, o horizonte cede o espaço para casas maiores. */
@media (max-width: 30rem) {
  .horizon {
    display: none;
  }
  .garage {
    height: calc(var(--scene-h) * var(--px));
  }
  /* Em celular o palco rola, e o tabuleiro fica do tamanho que a largura deixa. */
  .play {
    overflow-y: auto;
  }
}

/* --- a fase guiada: micro-passos e o vocabulário de sinais -------------------- */

.guide {
  grid-area: how;
  display: grid;
  justify-items: start;
  gap: var(--space-half);
  width: min(100%, calc(var(--scene-w) * var(--px)));
}

/* Uma bolinha por micro-passo: cheia (feito), maior e amarela (agora), vazia (falta). */
.guide-dots {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-dots li {
  width: var(--guide-dot);
  height: var(--guide-dot);
  background: var(--color-paper);
  border: var(--border) solid var(--color-accent-dark);
  border-radius: var(--radius-pill);
}

.guide-dots li[data-state='done'] {
  background: var(--color-accent);
}

.guide-dots li[data-state='now'] {
  width: calc(var(--guide-dot) * 1.5);
  height: calc(var(--guide-dot) * 1.5);
  background: var(--color-hint);
  border-color: var(--color-ink);
}

.guide-say {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.3;
}

.guide-keys {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* Anel de toque, "toque aqui agora": amarelo entre dois fios de tinta, com contraste no asfalto e no papel. */
.action.is-ring,
.key.is-ring {
  position: relative;
}

.vehicle.is-ring {
  z-index: 2;
}

.is-ring::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--ring-gap));
  z-index: 3;
  border: var(--focus-ring) solid var(--color-hint);
  border-radius: var(--radius);
  box-shadow:
    0 0 0 var(--border) var(--color-ink),
    inset 0 0 0 var(--border) var(--color-ink);
  pointer-events: none;
  animation: ring-pulse var(--duration-pulse) ease-in-out infinite;
}

@keyframes ring-pulse {
  50% {
    transform: scale(1.08);
  }
}

/* Os sinais desenhados no estacionamento, na mesma caixa das vagas. */
.signs {
  --cell: calc(100% / var(--size));
  position: absolute;
  left: calc(var(--lot-x) * var(--px));
  top: calc(var(--lot-y) * var(--px));
  width: calc(var(--lot-side) * var(--px));
  height: calc(var(--lot-side) * var(--px));
  pointer-events: none;
}

/* Faixa do caminho: do carro vermelho até o portão, casas hachuradas e o tracejado andando para a saída. */
.strip {
  --strip-color: var(--strip-target);
  position: absolute;
  top: calc(var(--lane) * var(--cell));
  left: calc(var(--front) * var(--cell));
  right: calc(-1 * var(--gate-reach) * var(--px));
  height: var(--cell);
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--strip-color) var(--sign-soft), transparent) 0 calc(var(--hatch) * var(--px)),
    transparent calc(var(--hatch) * var(--px)) calc(2 * var(--hatch) * var(--px))
  );
}

.strip.is-free {
  --strip-color: var(--color-accent);
}

.strip::before {
  content: '';
  position: absolute;
  left: 0;
  right: calc(var(--gate-reach) * var(--px));
  top: calc(50% - var(--border));
  height: calc(var(--border) * 2);
  background: repeating-linear-gradient(
    90deg,
    var(--strip-color) 0 calc(var(--dash) * var(--px)),
    transparent calc(var(--dash) * var(--px)) calc(2 * var(--dash) * var(--px))
  );
  animation: strip-march var(--duration-strip) linear infinite;
}

.strip::after {
  content: '';
  position: absolute;
  right: 0;
  top: calc(50% - var(--gate-reach) * var(--px) / 2);
  width: calc(var(--gate-reach) * var(--px));
  height: calc(var(--gate-reach) * var(--px));
  background: var(--strip-color);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@keyframes strip-march {
  to {
    background-position: calc(2 * var(--dash) * var(--px)) 0;
  }
}

/* Mira de coordenada: a coluna e a linha acesas, cruzando na casa. */
.cross {
  position: absolute;
  background: color-mix(in srgb, var(--color-hint) var(--sign-soft), transparent);
  box-shadow: inset 0 0 0 var(--border) var(--color-hint);
}

.cross-col {
  top: 0;
  bottom: 0;
  left: calc(var(--col) * var(--cell));
  width: var(--cell);
}

.cross-row {
  left: 0;
  right: 0;
  top: calc(var(--row) * var(--cell));
  height: var(--cell);
}

.coords span.is-on {
  background: var(--color-hint);
  box-shadow: 0 0 0 var(--border) var(--color-ink);
}

/* Fantasma de destino: a silhueta tracejada do veículo onde ele vai parar. */
.ghost,
.goal {
  position: absolute;
  border-radius: var(--radius-sm);
  transition:
    left var(--duration-move) var(--ease-snap),
    top var(--duration-move) var(--ease-snap);
}

.ghost {
  outline: var(--border) dashed var(--ghost-line);
  outline-offset: calc(-1 * var(--border));
}

.ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sprite) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  opacity: var(--ghost-opacity);
}

/* O destino marcado do passo da vez: até onde o fantasma precisa chegar. */
.goal {
  border: var(--focus-ring) dashed var(--color-hint);
  box-shadow:
    0 0 0 var(--border) var(--color-ink),
    inset 0 0 0 var(--border) var(--color-ink);
}

.ghost[data-axis='x'],
.goal[data-axis='x'] {
  left: calc(var(--pos) * var(--cell));
  top: calc(var(--lane) * var(--cell));
  width: calc(var(--len) * var(--cell));
  height: var(--cell);
}

.ghost[data-axis='y'],
.goal[data-axis='y'] {
  left: calc(var(--lane) * var(--cell));
  top: calc(var(--pos) * var(--cell));
  width: var(--cell);
  height: calc(var(--len) * var(--cell));
}

/* Aquecimento da malha (nível 3): o tabuleiro vazio, letras e números grandes, cada casa tocável. */
.yard.is-warmup .lot {
  visibility: hidden;
}

.yard.is-warmup .coords {
  font-size: max(var(--text-sm), calc(7.5px * var(--px)));
}

.cells {
  position: absolute;
  left: calc(var(--lot-x) * var(--px));
  top: calc(var(--lot-y) * var(--px));
  display: grid;
  grid-template-columns: repeat(var(--size), 1fr);
  grid-template-rows: repeat(var(--size), 1fr);
  width: calc(var(--lot-side) * var(--px));
  height: calc(var(--lot-side) * var(--px));
}

.cell {
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--color-paper);
  background: transparent;
  border: var(--border) dashed color-mix(in srgb, var(--color-paper) var(--sign-soft), transparent);
  cursor: pointer;
}

.cell:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: calc(-1 * var(--focus-ring));
}

.cell.is-found {
  background: color-mix(in srgb, var(--color-accent) var(--sign-soft), transparent);
}

.cell.is-found::before {
  content: '✓';
}

/* Mão-guia: a mão em pixel art que faz o gesto da vez, por cima de tudo. */
.hand {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--stack-top);
  width: calc(var(--hand-size) * var(--px));
  height: calc(var(--hand-size) * var(--px));
  background: var(--sprite-hand) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}

/* O rastro do arraste: o caminho do gesto, tracejado, com a ponta da seta. */
.hand-trail {
  position: fixed;
  z-index: calc(var(--stack-top) - 1);
  height: calc(var(--border) * 2);
  transform-origin: 0 50%;
  background: repeating-linear-gradient(
    90deg,
    var(--color-ink) 0 calc(var(--dash) * var(--px)),
    transparent calc(var(--dash) * var(--px)) calc(2 * var(--dash) * var(--px))
  );
  pointer-events: none;
}

.hand-trail::after {
  content: '';
  position: absolute;
  right: calc(-1 * var(--gate-reach) * var(--px));
  top: calc(50% - var(--gate-reach) * var(--px) / 2);
  width: calc(var(--gate-reach) * var(--px));
  height: calc(var(--gate-reach) * var(--px));
  background: var(--color-ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Selo de bloqueio: o cone cai e quica uma vez. */
.vehicle.is-picked .mark {
  animation: cone-drop var(--duration-cue) var(--ease-snap);
}

@keyframes cone-drop {
  from {
    transform: translateY(-80%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile,
  .vehicle,
  .vehicle.is-leaving,
  .gate-bar,
  .action,
  .key,
  .toggle {
    transition: none;
  }
  .block,
  .block.is-failed,
  .block.is-editing .block-slot {
    animation: none;
  }
  .block.is-running {
    transition: none;
  }
  /* Sem movimento, a forma continua dizendo a mesma coisa: anel fixo, faixa e mira paradas. */
  .is-ring::after,
  .strip::before,
  .vehicle.is-picked .mark {
    animation: none;
  }
  .ghost,
  .goal {
    transition: none;
  }
}