/* ==========================================================================
   Cubo Mágico — primitivas de diagrama
   Depende de base.css (usa as variáveis --c-*).
   Uso mínimo:
     <div class="face"><i class="q b"></i> ... 9 quadrados ...</div>
   Classes de cor: b(branco) a(amarelo) v(vermelho) l(laranja) z(azul) g(verde)
                   x (peça vazia/ignorada)
   ========================================================================== */

.face {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 8.4rem;
  aspect-ratio: 1;
  padding: 5px;
  background: #2b2723;
  border-radius: 8px;
}
.face.pequena { width: 5.4rem; gap: 3px; padding: 4px; }

.q {
  display: block;
  border-radius: 3px;
  background: var(--c-vazio);
  aspect-ratio: 1;
}
.q.b { background: var(--c-branco); }
.q.a { background: var(--c-amarelo); }
.q.v { background: var(--c-vermelho); }
.q.l { background: var(--c-laranja); }
.q.z { background: var(--c-azul); }
.q.g { background: var(--c-verde); }
.q.x { background: var(--c-vazio); }
/* Destaque: anel em volta da peça que importa */
.q.alvo { outline: 3px solid var(--destaque); outline-offset: 2px; }

/* Figura com legenda */
.cubo-fig {
  margin: 1.8rem 0;
  text-align: center;
}
.cubo-fig .face { margin-inline: auto; }
.cubo-fig figcaption {
  font-size: .85rem;
  color: var(--tinta-suave);
  margin-top: .7rem;
  font-style: italic;
}

/* Linha de figuras lado a lado (ex.: tipos de peça) */
.fig-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: flex-start;
  margin: 1.8rem 0;
}
.fig-linha > figure { margin: 0; flex: 0 1 9rem; text-align: center; }
.fig-linha figcaption { font-size: .85rem; color: var(--tinta-suave); margin-top: .6rem; }

/* Amostra de peça solta: 1, 2 ou 3 adesivos colados */
.peca {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  background: #2b2723;
  border-radius: 6px;
}
.peca .q { width: 1.6rem; }

/* Nome de movimento (R, U, F') — letra pequena ao lado do desenho */
.mov {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: .82em;
  background: var(--papel-nota);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: .08em .38em;
  white-space: nowrap;
}

/* Faixa lateral que acompanha uma face, usada na comparação face × camada */
.faixa { margin-top: 5px; }

/* Tabela de referência (vocabulário, listas de termos) */
.tabela-ref { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela-ref td { padding: .5rem .6rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela-ref tr:last-child td { border-bottom: 0; }
.tabela-ref td:first-child { width: 9rem; white-space: nowrap; }

/* Par de faces rotuladas: mostra uma peça que está num lado e precisa ir para outro.
   <div class="par-faces">
     <figure><span class="rotulo">de cima</span><div class="face">…</div></figure>
     <span class="seta">→</span>
     <figure><span class="rotulo">da frente</span><div class="face">…</div></figure>
   </div> */
.par-faces {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.2rem;
  align-items: center;
  justify-content: center;
  margin: 1.8rem 0;
}
.par-faces figure { margin: 0; text-align: center; }
.par-faces .rotulo {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: .45rem;
}
.par-faces figcaption { font-size: .85rem; color: var(--tinta-suave); margin-top: .6rem; }
.par-faces .seta { font-size: 1.7rem; color: var(--tinta-suave); line-height: 1; }

/* ==========================================================================
   Sequência de movimentos: uma tira de passos, cada um com a fatia que gira
   pintada de laranja e uma seta dizendo para onde ela vai.
   SEMPRE rotule a tira com "visto de frente" — as outras figuras do curso
   são vistas de cima, e a grade 3x3 é a mesma.

   <div class="sequencia">
     <figure class="passo">
       <span class="numero">1</span>
       <div class="face pequena"> … <i class="q m"></i> … </div>
       <span class="passo-seta">↑</span>
       <figcaption>Coluna da direita sobe</figcaption>
     </figure>
     …
   </div>
   ========================================================================== */

.q.m { background: var(--destaque); }

.sequencia {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 1rem;
  justify-content: center;
  margin: 1.6rem 0;
}
.sequencia .passo { margin: 0; width: 7.2rem; text-align: center; }
.sequencia .face { margin-inline: auto; }

.passo .numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-bottom: .45rem;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
}
.passo-seta {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
  margin-top: .4rem;
  color: var(--destaque);
}
.sequencia figcaption {
  font-size: .8rem;
  line-height: 1.4;
  color: var(--tinta-suave);
  margin-top: .35rem;
}

/* Rótulo de ponto de vista, reaproveitado de .par-faces */
.visao {
  display: block;
  text-align: center;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: .2rem;
}

/* ==========================================================================
   O cubo inteiro em 3D — desenhado por cubo3d.js.
   Use sempre que a pergunta for "de que lado do cubo isso fica?".
   <figure class="cubo3d-fig"><div class="cubo3d" data-u=… data-f=… data-r=…></div>
   <figcaption>…</figcaption></figure>
   ========================================================================== */
.cubo3d-fig { margin: 1.8rem 0; text-align: center; }
.cubo3d-fig figcaption { font-size: .85rem; color: var(--tinta-suave); margin-top: .5rem; line-height: 1.45; }
.cubo3d { width: 100%; max-width: 15rem; margin-inline: auto; }
.cubo3d[data-tamanho="m"] { max-width: 11rem; }
.cubo3d[data-tamanho="p"] { max-width: 7.2rem; }
.c3-svg { display: block; width: 100%; height: auto; overflow: visible; }
.c3-corpo { fill: #2b2723; stroke: #2b2723; stroke-width: 3; stroke-linejoin: round; }
.c3-q { stroke: rgba(0,0,0,.18); stroke-width: .6; stroke-linejoin: round; }
.c3-alvo { fill: none; stroke: var(--destaque); stroke-width: 4; stroke-linejoin: round; }
.c3-guia { stroke: var(--tinta-suave); stroke-width: 1; stroke-dasharray: 3 3; }
.c3-seta { stroke: var(--tinta); stroke-width: 4; stroke-linecap: round; }
.c3-seta-halo { stroke: var(--papel); stroke-width: 8; stroke-linecap: round; }
.c3-seta-voce { stroke: var(--tinta-suave); stroke-width: 2; }
.c3-ponta { fill: var(--tinta); }
.c3-voce {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  fill: var(--crianca);
}

/* Linha de cubos 3D pequenos (sequência de movimentos em 3D) */
.sequencia .cubo3d { max-width: 6.6rem; }

/* Cubo animado (cubo-animado.js → <twisty-player>) */
.cubo-animado-fig { margin: 1.6rem 0; text-align: center; }
.cubo-animado-fig figcaption { font-size: .88rem; color: var(--tinta-suave); margin-top: .4rem; line-height: 1.45; }
.cubo-animado twisty-player { width: 100%; max-width: 18rem; height: 19rem; margin: 0 auto 2.4rem; display: block; }
.cubo-animado-erro { font-size: .85rem; color: var(--tinta-suave); font-style: italic; }
.cubos-animados { display: grid; grid-template-columns: 1fr; gap: .5rem 1rem; margin: 1.6rem 0; }
@media (min-width: 40rem) {
  .cubos-animados { grid-template-columns: repeat(3, 1fr); }
  .cubos-animados twisty-player { height: 16rem; }
}
.cubos-animados .cubo-animado-fig { margin: 0; }
@media (min-width: 40rem) { .cubos-animados.dois { grid-template-columns: repeat(2, 1fr); } }

/* Tira de passos: sempre 4 por linha (um "compasso" da musiquinha), inclusive no celular */
.sequencia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem .5rem; max-width: 32rem; margin-inline: auto; }
.sequencia .passo { width: auto; }
.sequencia .cubo3d { max-width: 6.6rem; }

/* Seis giros com antes/depois: três por linha; dois no celular. */
.sequencia.seis-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seis-passos .cubo3d { max-width: 8.5rem; }
.seis-passos .passo { break-inside: avoid; }
@media (max-width: 30rem) {
  .sequencia.seis-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Antes/depois de algoritmos: quatro passos por linha, dois no celular. */
.sequencia.algoritmo { max-width: 40rem; gap: 1.6rem .7rem; }
.algoritmo .cubo3d { max-width: 8rem; }
.algoritmo .passo { break-inside: avoid; }
.algoritmo figcaption { min-height: 6.5em; }
@media (max-width: 36rem) {
  .sequencia.algoritmo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.c3-inicio { fill: var(--tinta); }