/* =============================================================================
   O INSTRUMENTO NO TELEFONE
   -----------------------------------------------------------------------------
   Nada aqui redesenha um controle: os controles são os mesmos, movidos pra cá
   por movel.js. Esta folha só diz onde eles ficam e o tamanho que têm quando
   quem toca é um polegar e não um mouse.

   A medida que manda em tudo: 44 px é o menor alvo que um dedo acerta sem
   errar. Todo botão daqui respeita isso, e é por isso que só cabem seis knobs.
   ========================================================================== */

body.no-movel-painel #panel { display: none !important; }
body.no-movel-painel { overflow: hidden; }

#movel {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #cbb68d, #a89268);
  color: var(--ink);
  overflow: hidden;
}

/* ── barra de cima, em duas fileiras ─────────────────────────────────────── */
.mv-topo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: none;
}
.mv-l1, .mv-l2 { display: flex; align-items: center; gap: 7px; }

/* o visor do programa é o controle mais usado no telefone: ele ocupa a fileira
   inteira, e as setas crescem pra 44 px, que é o menor alvo que um dedo acerta */
.mv-l1 .lcd { flex: 1 1 auto; min-width: 0; }
.mv-l1 .pbtn { width: 44px; height: 44px; flex: none; }
.mv-l1 .pbtn svg { width: 13px; height: 15px; }
.mv-l1 .k { font-size: 15px; }
.mv-l1 .v { font-size: 12px; }
.mv-l1 #power { transform: scale(0.78); transform-origin: left center; flex: none; margin-right: -6px; }

/* A saída pro site, agora dentro da fileira em vez de flutuando sobre o
   teclado. Ganha a cara de metal do chassi: o vidro escuro dela foi desenhado
   pro fundo preto que só existe no computador, e sobre areia ele desaparecia. */
.mv-l1 .sitelink {
  position: static;
  flex: none;
  width: 38px;
  height: 38px;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #4a4130;
  background: linear-gradient(180deg, #e6dbbf, #c0b28f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.38);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mv-l1 .sitelink svg { width: 13px; height: 13px; }
.mv-l1 .sitelink span { display: none; }

/* ── APRENDA no telefone ─────────────────────────────────────────────────────
   No painel de mesa ele é um anunciador de 64 px de altura com a legenda em
   duas linhas, porque lá ele mora numa coluna estreita e tem altura de sobra.
   Deitado esse mesmo botão, esticado com `flex: 1`, virava um retângulo verde
   de quase 200 px por 42 px na barra de cima: o objeto mais gritante da tela,
   maior que o visor do programa e maior que qualquer coisa que faz som — e
   ainda comendo a largura de que os três de execução precisavam.

   Aqui ele deita: ícone, APRENDA e "29 AULAS" na MESMA linha, separados pelo
   fio que antes era horizontal. Fica com o tamanho do próprio conteúdo
   (`flex: none`) em vez de engolir o que sobra, e a fita de REC/ABRIR passa a
   ser quem cresce. Continua sendo a única coisa verde e a única coisa que
   pulsa numa tela de areia, e é a primeira da fileira: evidente por contraste
   e por posição, não por área. */
.mv-l2 #learnBtn {
  flex: none;
  width: auto;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: 0.14em;
  border-width: 2px;
  transform: none;
}
.mv-l2 #learnBtn .lb-ico { width: 13px; height: 12px; margin: 0; flex: none; }
/* o fio que separava as duas linhas passa a ser vertical: mesma ideia de
   legenda dupla dos anunciadores, virada de lado */
.mv-l2 #learnBtn small {
  margin: 0;
  padding: 2px 0 2px 7px;
  border-top: 0;
  border-left: 1px solid rgba(4, 23, 15, 0.32);
  font-size: 7.5px;
  letter-spacing: 0.12em;
}

/* REC e ABRIR dividem o que sobra da fileira, em vez de largura fixa: assim
   nenhum telefone estreito precisa escolher entre cortar um deles e empurrar
   o APRENDA pra fora da tela. */
/* flex-direction: row de propósito. No painel de mesa .minibtns é uma COLUNA
   (base.css), porque lá os dois botões moram numa faixa estreita ao lado do
   visor. Movidos pra cá a coluna vinha junto: REC em cima, ABRIR embaixo, e a
   barra de cima do telefone media 91 px em vez de 42 — meio dedo de tela
   gasto em nada, e a razão de tudo aqui embaixo parecer apertado. */
.mv-l2 .minibtns { display: flex; flex-direction: row; gap: 7px; flex: 1 1 auto; min-width: 0; }
.mv-l2 .mb { flex: 1 1 0; min-width: 0; min-height: 42px; font-size: 12px; }

/* ── o tubo ──────────────────────────────────────────────────────────────── */
.mv-tubo { flex: 1 1 auto; min-height: 0; display: flex; position: relative; }
.mv-tubo #crt { width: 100%; height: 100%; margin: 0; }

/* ── knobs, harmonia e execução ──────────────────────────────────────────── */
.mv-lados { display: flex; flex-direction: column; gap: 8px; flex: none; }

/* --row vem de tokens.css com 94 px, que é a altura de uma célula de painel de
   mesa: rótulo, dial de 58 e leitura. Com o dial em 46 sobrava um dedo de ar
   embaixo de cada knob — 18 px de nada, seis vezes, que é exatamente a altura
   que a fileira de execução precisava pra existir. */
.mv-knobs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  --row: 76px;
}
.mv-knobs .cell { width: auto; }
.mv-knobs .dial { width: 46px; height: 46px; }
.mv-knobs .klbl { font-size: 7px; letter-spacing: 0.04em; height: 14px; }
.mv-knobs .rd { font-size: 8px; padding: 1px 3px; }

.mv-jogo { display: flex; flex-direction: column; gap: 6px; }
.mv-harm, .mv-exec { min-width: 0; }
.mv-harm .padrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mv-harm .pad { min-height: 44px; }

/* HOLD · KEY · PANIC. No painel de mesa são três de 64 px alinhados à esquerda,
   porque lá eles convivem com os botõezinhos de inversão e oitava e não podem
   destoar deles. Aqui não há botõezinho nenhum: são três dos sete pads da tela,
   e ocupam a largura como os outros quatro. */
.mv-exec .padrow--exec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  justify-content: stretch;
}
.mv-exec .pad { min-height: 44px; }
.mv-exec .pad b { font-size: 10.5px; }
.mv-exec .pad s { font-size: 6px; }

/* ── teclado ─────────────────────────────────────────────────────────────── */
.mv-teclas { flex: none; }
.mv-teclas #keys { width: 100%; height: 132px; }

/* ══════════════════════════════════════════════════════════════════════════
   SEM ATALHOS DE TECLADO NUM APARELHO QUE NÃO TEM TECLADO
   --------------------------------------------------------------------------
   Cada tecla do instrumento traz três coisas: o ponto que acende quando ela é
   nota do acorde, o nome da nota, e a letra do computador que a toca — o `Q` do
   dó, o `W` do ré. No painel de mesa a letra é o atalho, e ela ensina: dá pra
   descobrir o teclado do computador olhando o teclado da tela.

   Num telefone ela não ensina nada. Não existe `Q` pra apertar, e o que ela faz
   é ocupar o lugar de baixo de uma tecla que já é estreita — um retângulo com
   borda e fundo, num alvo de 44px que precisa de todo o espaço que tem pro
   dedo. Informação que não pode ser usada não é informação; é ruído com aspecto
   de interface.

   Isso vale pra TODOS os atalhos, não só os das teclas:
     · a letra em cada tecla do piano;
     · a tecla embaixo de cada pad de harmonia (o Z X C V, o B N M ,);
     · as duas legendas do deck que explicam as setas e o espaço.

   O nome da nota FICA. Esse serve em qualquer aparelho, e é ele que faz o
   teclado ser legível pra quem não conhece o instrumento. */
#movel .key .kk,
#movel .padrow .pad s,
#movel .legend {
  display: none;
}
/* Sem a letra, a tecla tem espaço de sobra: o nome da nota desce pro meio e
   cresce, que num alvo de dedo é o que se quer ver de relance. */
#movel .key {
  justify-content: center;
  padding-bottom: 0;
}
#movel .key .nn { font-size: 11px; }
/* E o pad de harmonia, sem a sublinha, centra a sigla em vez de ficar com um
   vão embaixo dela. */
#movel .padrow .pad { display: grid; place-items: center; }

/* ── a marca gravada ─────────────────────────────────────────────────────────
   Uma marca de fabricante, do jeito que vem estampada na lateral de uma arma:
   pequena, caixa alta, muito espaçada, e CAVADA na superfície em vez de escrita
   sobre ela.

   O que faz parecer cavado é a luz vir de cima, uma só vez. A letra é um tom
   mais escura que a areia — não é tinta, é sombra dentro do corte — e leva um fio
   branco de meio pixel embaixo, que é o brilho na borda de saída da ferramenta.
   Um segundo fio, escuríssimo, por cima. Nada de cor, nada de peso, nada de
   sombra projetada: sombra projetada é o que um objeto POSTO no metal teria, e
   isto não é um objeto posto em cima — é o próprio chassi com um risco.

   Fica no rodapé, embaixo do teclado, que é onde a marca de um instrumento fica
   quando ele é feito de uma peça só. Em pé a altura sai do tubo, que é o único
   elemento elástico da coluna: nenhum controle encolhe por causa dela. */
.mv-marca {
  flex: none;
  text-align: center;
  font: 600 7.5px/1 "Helvetica Neue", Helvetica, Inter, system-ui, sans-serif;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: rgba(38, 30, 17, 0.52);
  text-shadow:
    0 -0.5px 0 rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.46);
}

/* Em pé o tubo cede altura: teclado pequeno erra a nota, tubo pequeno continua
   legível. */
@media (orientation: portrait) {
  .mv-tubo { flex: 1 1 auto; min-height: 96px; }
  .mv-teclas #keys { height: 152px; }
}

/* Telefone em pé e curto (SE, e qualquer um com a barra do navegador aberta):
   com 554 px de altura as contas de cima deixariam o tubo com 87 px. Aqui o
   teclado e os knobs cedem um pouco pra ele voltar a parecer um tubo. */
@media (orientation: portrait) and (max-height: 680px) {
  .mv-knobs { --row: 70px; }
  .mv-knobs .dial { width: 42px; height: 42px; }
  .mv-teclas #keys { height: 128px; }
  .mv-harm .pad, .mv-exec .pad { min-height: 42px; }
}

/* Deitado: tubo à esquerda, controles à direita, teclado na largura toda. */
@media (orientation: landscape) {
  #movel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "topo   topo"
      "tubo   lados"
      "teclas teclas"
      "marca  marca";
    gap: 7px 10px;
  }
  .mv-topo { grid-area: topo; flex-direction: row; align-items: center; gap: 10px; }
  .mv-l1 { flex: 1 1 auto; min-width: 0; }
  /* deitado sobra largura, então REC e ABRIR voltam ao tamanho de conteúdo e a
     fileira toda encosta à direita — o visor do programa fica com o resto */
  .mv-l2 { flex: none; }
  .mv-l2 .minibtns { flex: none; }
  .mv-l2 .mb { flex: none; min-width: 76px; }
  .mv-tubo { grid-area: tubo; }

  /* Contas de altura, num telefone deitado com 390 px de tela (uns 360 úteis):
       barra de cima 44 + teclado 100 + respiros/margens 32 = 176,
       sobram ~184 px pra esta coluna.
     Uma fileira de knob a 70 + o vão de 8 + uma linha de pads a 40 = 118.
     Cabe com folga real, e é por isso que os sete pads dividem UMA linha aqui:
     em duas, a segunda caía atrás do teclado — invisível, mas clicável, que é o
     pior dos dois mundos. */
  .mv-lados { grid-area: lados; justify-content: space-between; overflow: hidden; }
  /* Deitado sobra altura nesta coluna depois que a barra de cima virou uma
     fileira só: o dial cresce em vez de a sobra ficar de areia. Knob maior é o
     que o dedo pede — foi a queixa que abriu esta rodada. */
  .mv-knobs { grid-template-columns: repeat(6, 1fr); gap: 5px; --row: 88px; }
  .mv-knobs .dial { width: 48px; height: 48px; }
  .mv-knobs .klbl { font-size: 6.5px; }
  .mv-knobs .rd { font-size: 7.5px; }

  /* harmonia e execução na mesma linha: 4 pads + 3 pads em metade da tela dão
     uns 52 px cada, acima dos 44 do dedo */
  .mv-jogo { flex-direction: row; align-items: stretch; gap: 6px; }
  .mv-harm { flex: 4 1 0; }
  .mv-exec { flex: 3 1 0; }
  .mv-harm .pad, .mv-exec .pad { min-height: 46px; padding: 6px 4px; }
  .mv-exec .pad b { font-size: 9.5px; letter-spacing: 0.02em; }
  .mv-exec .pad s { font-size: 5.5px; }

  .mv-teclas { grid-area: teclas; }
  .mv-teclas #keys { height: 100px; }
  /* deitado a altura é curta e a marca não vale um respiro inteiro: ela encosta
     no teclado, como um risco na borda da peça */
  .mv-marca { grid-area: marca; margin-top: -3px; font-size: 7px; }
}

/* ── o convite antes de ligar ────────────────────────────────────────────────
   O tamanho do convite é em vw, e em 390 px de largura os dois textos iam de
   borda a borda — a legenda encostando nas duas margens ao mesmo tempo. Aqui
   ele encolhe pra caber com folga. A posição não muda: ele fica sobre o teclado
   de propósito, porque é pro teclado que ele aponta. */
body.no-movel-painel .pressline { font-size: 17px; letter-spacing: 0.16em; }
body.no-movel-painel .presssub { margin-top: 10px; font-size: 8px; letter-spacing: 0.1em; }

/* ── o pedido pra girar ──────────────────────────────────────────────────── */
/* mora dentro do tubo (ver movel.js): assim não depende de saber a altura do
   teclado nem de quantas fileiras de pad existem embaixo dele */
.mv-gire {
  position: absolute;
  left: 50%;
  bottom: 12px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(18, 16, 12, 0.9);
  color: #e9dfc4;
  font-weight:600;font-size:12px;line-height:1;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  transition: opacity 0.5s var(--ease-out), translate 0.5s var(--ease-out);
  pointer-events: none;
  z-index: 5;
}
.mv-gire b { font-size: 16px; color: var(--phos); }
.mv-gire.fora { opacity: 0; translate: -50% 10px; }