/* 32 · O FIM — a MENTE da BABEL sobre o REINO (pedido do Criador, 24/09: "um reino e em cima do reino uma mente consciente com um B
   nela representando a babel, totalmente colorida"). Carregado DEPOIS de lapidar.css; só toca a cena 32 (dona: a frente do fim).
   A composição: o palco da arte (.palco-mente) e a coluna do texto nunca se cruzam. Na tela larga o palco é a direita (56%) e o
   texto mora à esquerda, na noite; na estreita o palco é o alto (48vh) e o texto vem embaixo. O canvas (app.js, FS_FIM) desenha a
   mente no .no-vazio (a âncora: largura = 2R, invisível), os sete fios e o reino na base do palco; à esquerda da coluna do texto o
   reino nunca sobe acima do pé do texto. --r é a régua de tudo: o raio da mente. */
.plano.plano[data-cena="32"] {
  --r: min(22.5vw, 36vh);
  padding: 0 56% 0 clamp(24px, 4vw, 72px);
  row-gap: clamp(12px, 2.1vh, 20px);
}
/* a placa de noite que assenta a letra fica sob a COLUNA do texto, nunca sobre a mente */
.plano.plano[data-cena="32"]::before { background: radial-gradient(ellipse 30% 50% at 22% 50%, rgba(5, 4, 8, .72) 0%, rgba(5, 4, 8, .4) 58%, rgba(5, 4, 8, 0) 100%); }
.plano.plano[data-cena="32"] > .palco-mente { position: absolute; top: 0; right: 0; bottom: 0; left: 44%; max-width: none; margin: 0; z-index: 0;
  pointer-events: none; opacity: 1; filter: none; transform: none; }
.palco-mente > .no-vazio { position: absolute; left: 50%; top: 35%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); max-width: none;
  transform: translate(-50%, -50%); visibility: hidden; }
/* os raios do fim antigo convergiam no nó vazio; agora os fios são da mente e o canvas os desenha, da mente às torres */
.plano.plano[data-cena="32"] > .fios-fim { display: none; }
/* BABEL: o nome da mente, no alto da coluna, em folha (a letra do B é a mesma: Fraunces) */
.plano.plano[data-cena="32"] > .coroa-nome { position: relative; left: auto; top: auto; transform: none; z-index: 1;
  font: 600 clamp(24px, 2.3vw, 34px)/1 var(--display); letter-spacing: .34em; padding-left: .34em; color: var(--folha); }
.plano.plano[data-cena="32"] .seu-lugar { font-size: clamp(60px, 7.6vw, 132px); }
/* o número do mercado: DENTRO do fluxo, abaixo do botão — nunca mais por cima dele (o bug da captura dele, 24/09) */
.plano.plano[data-cena="32"] > .mercado { position: relative; left: auto; right: auto; bottom: auto; margin: 4px auto 0; max-width: min(100%, 520px); }
.plano.plano[data-cena="32"] > .cadastro { margin-top: 4px; }

@media (max-width: 860px) {
  .plano.plano[data-cena="32"] { --r: min(36vw, 18.5vh); padding: calc(48vh + 6px) 18px max(14px, env(safe-area-inset-bottom)); align-content: start; row-gap: 10px; }
  .plano.plano[data-cena="32"]::before { background: linear-gradient(180deg, rgba(5, 4, 8, 0) 0, rgba(5, 4, 8, 0) 44vh, rgba(5, 4, 8, .7) 52vh, rgba(5, 4, 8, .82) 100%); }
  .plano.plano[data-cena="32"] > .palco-mente { left: 0; bottom: auto; height: 48vh; }
  .palco-mente > .no-vazio { top: 36%; }
  .plano.plano[data-cena="32"] > .coroa-nome { font-size: 22px; }
  .plano.plano[data-cena="32"] .seu-lugar { font-size: clamp(42px, 13vw, 60px); max-width: none; white-space: nowrap; }
  .plano.plano[data-cena="32"] > .mercado { max-width: 100%; }
}