/* Tela de celular: referencia 390 x 844. Sem janela arrastavel - cada atalho
   abre uma janela que ocupa a tela; tocar de novo no mesmo atalho fecha. */

body.celular { overflow: hidden; }

#moldura.celular {
  position: fixed;
  inset: 0;
  display: block;
  overflow: hidden;
}

#palco.celular {
  width: 100%;
  height: 100%;
  transform: none;
  position: relative;
  overflow: hidden;
}

/* ------------------------------------------------------- canto da contagem */

.celular #contagem {
  left: 16px;
  top: max(18px, env(safe-area-inset-top));
  gap: 4px;
}
.celular #contagem .dymo { font-size: 9px; }
.celular #contagem .numeros { font-size: 30px; }
.celular #contagem .legenda { font-size: 10px; }

/* ------------------------------------------------------------------ miolo */

/* O centro de onde a letra nasce é o do espaço livre: a tela menos a contagem
   lá em cima e a barra de atalhos embaixo. */
.celular .letra-bloco {
  inset: 86px 16px 104px;
  max-width: 360px;
  margin: 0 auto;
}

.celular .letra-verso {
  white-space: normal;
  line-height: 1.3;
  /* São 20 versos mais 2 respiros entre estrofes: cerca de 27 vezes o tamanho
     da letra. O vh é que faz caber em tela baixa; o vw segura em tela
     estreita, para o verso longo não quebrar em três linhas. */
  /* -25% em 05/11 */
  font-size: clamp(8px, min(3.45vw, 1.65vh), 15px);
  /* um tom mais claro que no computador: aqui a letra divide o centro da tela
     com o logo, e ele tem que continuar legível por cima */
  color: #dedede;
}
/* a linha vazia ainda não escrita não pode somar altura diferente da escrita */
/* O verso ainda não escrito não pode ocupar altura: é isso que faz o texto
   crescer do centro a cada linha nova, em vez de nascer com a caixa pronta. */

/* O logo em caneta vermelha, no alto, quando tem app aberto. */
.celular #logo-celular {
  position: absolute;
  right: 12px;
  top: max(14px, env(safe-area-inset-top));
  width: 140px;
  height: auto;
  display: block;
  z-index: 2;
}

#capa-celular {
  position: absolute;
  left: 0; right: 0;
  top: 92px;
  bottom: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
}
#capa-celular img { width: min(310px, 80vw); display: block; }
#capa-celular p {
  margin: 0;
  max-width: 310px;
  text-align: center;
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-stretch: 78%;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------- as janelas */

/* A janela tem a altura do que ela mostra e fica centrada na faixa livre -
   entre a contagem, lá em cima, e a barra de atalhos, embaixo.

   --topo-livre e --base-livre são medidos em tempo real pelo app (ver
   medirFaixaCelular), então isto se ajusta a qualquer tamanho de tela e às
   áreas seguras do aparelho. Os valores aqui são só o que vale antes da
   primeira medição. */
.celular .janela {
  position: absolute;
  left: 12px;
  right: 12px;
  --faixa: calc(100% - var(--topo-livre, 92px) - var(--base-livre, 110px));
  top: calc(var(--topo-livre, 92px) + var(--faixa) / 2);
  transform: translateY(calc(-50% + var(--deslocamento, 0px)));
  bottom: auto;
  height: auto;
  /* O deslocamento da cascata é aplicado depois do limite de altura, então
     uma janela cheia e deslocada passaria do rodapé. --recuo desconta isso.
     Fora da cascata ele é zero e a janela usa a faixa inteira. */
  max-height: calc(var(--faixa) - 2 * var(--recuo, 0px));
  z-index: 5;
}

/* flex:1 faria o corpo esticar para encher a janela; aqui ele pega só o que
   precisa, e rola quando passa do limite. */
.celular .wbody { flex: 0 1 auto; }
.celular .janela[hidden] { display: none; }

/* As larguras fixas do computador (#pasta-janela 540, #player-janela 380,
   #sessao-janela 800) venceriam o left/right daqui por serem id. */
.celular #pasta-janela,
.celular #player-janela,
.celular #sessao-janela,
.celular #leia-janela,
.celular #lixeira-janela,
.celular #seguir-janela { width: auto; }

.celular .tbar { height: 30px; cursor: default; }
.celular .tbar .name { height: 18px; }
.celular .tbar .name .dymo { font-size: 9px; }
.celular .box { width: 18px; height: 18px; }

.wbody { overflow: auto; min-height: 0; flex: 1; -webkit-overflow-scrolling: touch; }

.celular .pbtn { min-width: 44px; min-height: 44px; padding: 6px 12px; border-radius: 6px; }
.celular .pbtn.red { font-size: 13px; }
.celular .paper { font-size: 24px; line-height: 28px; padding: 10px 14px 14px 38px; }
.celular .paper::before { left: 28px; }
.celular .paper .assina { font-size: 28px; }
.celular .seek {
  height: 14px;
  border-width: 1px;
  border-radius: 0;
}
.celular .seek::-webkit-slider-thumb {
  width: 18px; height: 22px;
  background: var(--vermelho);
  border: 1px solid #000;
  border-radius: 0;
}
.celular .seek::-moz-range-thumb {
  width: 18px; height: 22px;
  background: var(--vermelho);
  border: 1px solid #000;
  border-radius: 0;
}

/* ------------------------------------------------------- barra de atalhos */

#barra-celular {
  position: absolute;
  left: 8px; right: 8px;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  gap: 2px;
  z-index: 20;
}
/* São 6 atalhos: num aparelho de 320 px eles não cabem com largura fixa, então
   dividem o espaço. A altura de 56 px fica, que é o que importa para o dedo. */
#barra-celular .ico {
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  padding: 4px 0;
}
#barra-celular .ico span {
  font-size: clamp(8px, 2.6vw, 10px);
  padding: 1px 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#barra-celular .ico.sel svg { outline: 1px dotted var(--tinta); outline-offset: 2px; }

/* o aviso não pode tapar a barra de atalhos */
body.celular .aviso { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* -------------------------------------------------------- player celular */

.cel-player { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.cel-visor {
  background: var(--visor);
  border: 1px solid #000;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-family: 'VT323', monospace;
  color: var(--visor-letra);
}
.cel-visor img {
  width: 56px; height: 56px;
  object-fit: cover;
  display: block;
  border: 1px solid #000;
  background: #222;
}
.cel-visor .tempo { font-size: 30px; line-height: 1; }
.cel-visor .nome {
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cel-visor .info { font-size: 14px; color: var(--visor-letra-2); }
.cel-transporte {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

/* ---------------------------------------------- navegador de pastas em lista */

.nrow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid #e4e4e4;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--tinta);
  text-align: left;
}
.nrow .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nrow .tag { margin-left: auto; font-size: 10px; flex: none; }
.nrow.lock { color: #6b6b6b; }
.nrow.lock .tag { color: var(--vermelho-escuro); }
.nrow.cur { background: var(--tinta); color: #fff; }

.cel-nav-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid #9a9a9a;
  font-size: 11px;
  flex: none;
}
.cel-nav-topo .onde { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A janela agora tem a altura do conteúdo, então height:100% aqui dentro não
   resolveria contra nada e a grade colapsava para zero. */
.celular .galeria,
.celular .pasta-conteudo,
.celular .trancada { height: auto; }
.celular .trancada { padding: 24px 12px; }
.celular .galeria { padding: 8px; }
.celular .galeria.fotos .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.celular .galeria.cult .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.celular #lixeira-janela .lixeira-corpo { height: auto; margin: 4px; }
.celular #lixeira-janela .lixeira-corpo .galeria .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }

body.celular .lightbox { padding: 14px; }
body.celular .lightbox img { max-width: 94vw; max-height: 66vh; }
body.celular .lightbox .controles { font-size: 11px; gap: 6px; flex-wrap: wrap; justify-content: center; }

/* ------------------------------------------------------- sessao no celular */

/* No celular não cabe M, S e o volume na mesma linha: o volume desce para
   uma terceira, e a faixa fica mais alta para acompanhar. */
.celular .daw-grade {
  --altura-faixa: 68px;
  grid-template-columns: 112px minmax(0, 1fr);
}
.celular .daw-cabecas .nome { font-size: 10px; }
.celular .daw-cabecas > div { padding: 3px 5px; }
.celular .daw-cabecas .botoes { flex-wrap: wrap; }
.celular .daw-cabecas .vol { flex-basis: 100%; min-width: 0; height: 18px; }
.celular .daw-topo { flex-wrap: wrap; padding: 6px 8px; }
.celular .daw-tempo { font-size: 22px; min-width: 92px; }
.celular .daw-dica { font-size: 10px; flex-basis: 100%; }
.celular .daw-velocidade { padding: 0 0 0 6px; gap: 4px; }
.celular .daw-velocidade .valor { font-size: 16px; min-width: 44px; }
.celular .vel { width: 72px; }
.celular .ms { width: 30px; height: 22px; }