/* O PALCO (palco.js): a caixa do canvas, a camada das etiquetas e as etiquetas que seguem a cabeça de cada corpo.
   Usa as variáveis do :root da página (--bg --fg --dim --linha --card --acento --disp --txt). A classe .palco já é do hero
   (container do cérebro), por isso tudo aqui é .palco-caixa / .palco-tags / .tag. As páginas de verdade embrulham o canvas em
   .palco-moldura (index.html) e entregam a camada como #palcoTags: o palco.js acrescenta a classe .palco-tags nela. */
.palco-caixa { position:relative; width:100%; height:100%; background:#07090f; border:1px solid var(--linha); border-radius:14px; overflow:hidden; }
.palco-caixa canvas { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:pan-y; }
.palco-caixa canvas.drag, .palco-moldura canvas.drag { cursor:grabbing; }
.palco-tags { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }

/* a etiqueta: nasce no canto, o palco a posiciona por transform a cada quadro (translate em px + centro embaixo, --h acima da
   cabeça). Vizinhas que se sobreporiam sobem de linha (44 px por linha) e o fio ::after cresce junto, até a cabeça. */
.palco-tags .tag { position:absolute; left:0; top:0; pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 8px 5px; border-radius:3px;
  background:rgba(5,5,7,.62); border:1px solid transparent; color:var(--fg); text-decoration:none; white-space:nowrap;
  font:500 11px/1.15 var(--txt); letter-spacing:.14em; text-transform:uppercase; will-change:transform; transition:border-color .2s, opacity .2s; }
.palco-tags .tag b { font:700 13px/1 var(--disp); letter-spacing:.02em; text-transform:none; color:var(--c, var(--fg)); }
/* a frase do movimento é a parte larga: corta com reticências para a etiqueta não passar de ~190 px (vizinhas a 130–180 px) */
.palco-tags .tag span { display:block; max-width:168px; overflow:hidden; text-overflow:ellipsis; font-size:10px; color:var(--dim); letter-spacing:.12em; }
.palco-tags .tag::after { content:''; position:absolute; left:50%; top:100%; width:1px; height:var(--h, 18px); background:linear-gradient(var(--c, rgba(232,236,244,.5)) 70%, transparent); }
.palco-tags .tag:hover { border-color:var(--c, var(--fg)); }
/* cópia livre: fantasma tracejado, acende no hover e leva ao lançamento */
.palco-tags .tag.livre { background:transparent; border:1px dashed rgba(232,236,244,.22); opacity:.6; }
.palco-tags .tag.livre b { color:var(--dim); font:600 12px/1 var(--txt); letter-spacing:.14em; text-transform:uppercase; }
.palco-tags .tag.livre::after { background:linear-gradient(rgba(232,236,244,.25) 70%, transparent); }
.palco-tags .tag.livre:hover { opacity:1; border-color:var(--acento); } .palco-tags .tag.livre:hover b { color:var(--acento); }
/* a mente central */
.palco-tags .tag.mente { border-color:rgba(183,255,60,.35); } .palco-tags .tag.mente b { color:var(--acento); letter-spacing:.28em; font-size:12px; }
.palco-tags .tag.mente::after { background:linear-gradient(var(--acento) 70%, transparent); }
.palco-tags .tag[hidden] { display:none; }
@media (max-width:860px) { .palco-tags .tag { padding:3px 6px 4px; font-size:9px; } .palco-tags .tag b { font-size:11px; } .palco-tags .tag span { font-size:9px; max-width:120px; } }
/* celular: só o $TICKER / COPY N (as cabeças ficam a ~80 px umas das outras; a frase do movimento não cabe) */
@media (max-width:600px) { .palco-tags .tag span { display:none; } .palco-tags .tag { gap:0; } }