/* Teclas em pixel: setas da barra, seta pra baixo, ícones de compartilhar e o convite. Carregado depois do CSS de cada case. */
/* ---------- setas e textinhos em pixel (Costa Gold 18/09/2026, replicado nos 8 cases no mesmo dia) ----------
   As setas saem do texto e viram teclas na grade da cereja: 16x16 pixels, tampa com
   canto em degrau e dois pixels de base. Apertar, com o clique ou com a seta do
   teclado, afunda a tampa na base. No hover a flecha anda um pixel pra onde aponta,
   em dois quadros, como sprite de videogame. Tamanho em múltiplo inteiro da grade
   (24 px no desktop, que em tela retina dá 3 pontos por pixel, e 32 no celular) pra nenhum
   pixel sair borrado. Os ícones de compartilhar são teclas da mesma grade, com o glifo
   desenhado em 12x10 dentro da tampa. */
.px-tecla{display:block;width:24px;height:24px;fill:currentColor;overflow:visible}
.px-tecla .px-base{opacity:.42}
.apertada .px-tampa,a:active>.px-tecla .px-tampa,button:active>.px-tecla .px-tampa{transform:translate(0,2px)}
.apertada .px-base,a:active>.px-tecla .px-base,button:active>.px-tecla .px-base{opacity:0}
@keyframes px-anda-esq{0%,100%{transform:translate(0,0)}50%{transform:translate(-1px,0)}}
@keyframes px-anda-dir{0%,100%{transform:translate(0,0)}50%{transform:translate(1px,0)}}
@keyframes px-anda-baixo{0%,100%{transform:translate(0,0)}50%{transform:translate(0,1px)}}
/* faixa escura atrás da barra quando a página rola: na primeira tela as teclas ficam
   soltas sobre o vídeo; depois dela ganham fundo, pra não flutuar sobre foto e texto */
/* o fundo é da própria barra, não de um ::before atrás dela: no Safari do iPhone a camada
   de trás continuava mesclando e o texto da página aparecia dentro da faixa (19/09/2026) */
[data-setas]{background-color:transparent;transition:background-color .3s}
[data-setas].rolou{mix-blend-mode:normal!important;isolation:isolate;background-color:#080808}
[data-setas] .left,[data-setas] .right{display:inline-flex;padding:11px;margin:-11px;color:#fff;opacity:.72;transition:opacity .2s}
[data-setas] .right{justify-self:end}
[data-setas] .left:hover,[data-setas] .right:hover,
[data-setas] .left:focus-visible,[data-setas] .right:focus-visible,
[data-setas] .apertada{opacity:1}
[data-setas] .left:hover .px-flecha,[data-setas] .left:focus-visible .px-flecha{animation:px-anda-esq .5s steps(1) infinite}
[data-setas] .right:hover .px-flecha,[data-setas] .right:focus-visible .px-flecha{animation:px-anda-dir .5s steps(1) infinite}
/* a seta pra baixo avisa que a leitura continua e anda no mesmo passo do ↓ do teclado */
/* (a seta pra baixo saiu de todas as páginas em 18/09/2026: atrapalhava o zap; a tecla ↓ do teclado segue funcionando)
/* a seta pra baixo fica fixa no pé da janela, no canto direito, na mesma vertical do → da barra.
   Na primeira tela a flecha balança pra avisar que a leitura continua; depois a tecla some. */
.px-desce{position:fixed;right:clamp(18px,2.8vw,44px);bottom:clamp(14px,2.4vh,28px);z-index:30;
  display:inline-flex;padding:11px;margin-right:-11px;border:0;background:none;color:#fff;opacity:.72;
  cursor:pointer;transition:opacity .35s}
.px-desce:hover,.px-desce:focus-visible,.px-desce.apertada{opacity:1}
.px-desce .px-flecha{animation:px-anda-baixo 1s steps(1) infinite}
.px-desce.sumiu{opacity:0;pointer-events:none}
/* os textinhos de topo e rodapé na fonte pixel da casa */
[data-setas] .center{font-family:var(--casa-pixel);font-size:15px;letter-spacing:.08em}
/* a saída pra lista vem escrita na barra dos cases (22/09/2026, feedback da Bia: dentro de um
   case ela não achava como voltar, e a cereja sozinha parecia logo, não botão). DROP N, cereja e
   TODOS OS DROPS, nessa ordem, são um link só pra home: a cereja fica no meio, no lugar do ponto
   (pedido do Caiote). Aprovado no teste /costa-gold/teste-barra. */
[data-setas] .center .todos-link{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;white-space:nowrap}
[data-setas] .center .todos{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
[data-setas] .center .todos-link:hover .todos,[data-setas] .center .todos-link:focus-visible .todos{text-decoration:none}
/* a cereja fica branca e volta pro azul da the-mojo no hover, igual nas oito páginas: a aLeda
   usa .brand-cherry e não tinha o efeito das outras (achado do Caiote, 22/09/2026) */
[data-setas] .center .todos-link img{transition:filter .2s}
[data-setas] .center .todos-link:hover img,[data-setas] .center .todos-link:focus-visible img{filter:none}
@media(max-width:520px){[data-setas] .center .todos-link{gap:8px}}
@media(max-width:400px){[data-setas] .center .todos-link{gap:6px}[data-setas] .center .todos-link img{width:20px}}
/* em 320 px a linha inteira encostava nas setas: um ponto a menos de letra */
@media(max-width:340px){[data-setas] .center .todos-link{font-size:14px;letter-spacing:.04em}}
/* .note-actions na frente: as regras originais do rodapé vêm depois no arquivo */
.note-actions .share-label{font-family:var(--casa-pixel);font-size:13px;letter-spacing:.06em}
/* o convite vira uma tecla comprida, como a barra de espaço, na mesma altura das teclas da barra:
   a tecla de 16 pixels vira imagem de borda em 9 fatias (2 em cima e dos lados, 4 embaixo com a base),
   e --px-u diz quanto mede um pixel da grade (1,5 px no desktop, 2 no celular), igual às setas. */
.note-actions{--px-u:1.5px}
.note-actions .note-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  height:calc(var(--px-u)*16);padding:0 calc(var(--px-u)*7);
  border-style:solid;border-width:calc(var(--px-u)*2) calc(var(--px-u)*2) calc(var(--px-u)*4) calc(var(--px-u)*2);
  border-image-source:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><path fill='white' fill-opacity='.42' d='M1 14h14v1h-14zM2 15h12v1h-12z'/><path fill='white' d='M2 0h12v1h-12zM1 1h1v1h-1zM14 1h1v1h-1zM0 2h1v1h-1zM15 2h1v1h-1zM0 3h1v1h-1zM15 3h1v1h-1zM0 4h1v1h-1zM15 4h1v1h-1zM0 5h1v1h-1zM15 5h1v1h-1zM0 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM15 8h1v1h-1zM0 9h1v1h-1zM15 9h1v1h-1zM0 10h1v1h-1zM15 10h1v1h-1zM0 11h1v1h-1zM15 11h1v1h-1zM1 12h1v1h-1zM14 12h1v1h-1zM2 13h12v1h-12z'/></svg>");border-image-slice:2 2 4 2;border-image-repeat:stretch;
  font-family:var(--casa-pixel);font-size:13px;letter-spacing:.04em;line-height:1;color:#fff;opacity:.72;transition:opacity .2s}
.note-actions .note-cta:hover,.note-actions .note-cta:focus-visible{opacity:1}
.note-actions .note-cta:active{border-image-source:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><path fill='white' transform='translate(0 2)' d='M2 0h12v1h-12zM1 1h1v1h-1zM14 1h1v1h-1zM0 2h1v1h-1zM15 2h1v1h-1zM0 3h1v1h-1zM15 3h1v1h-1zM0 4h1v1h-1zM15 4h1v1h-1zM0 5h1v1h-1zM15 5h1v1h-1zM0 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM15 8h1v1h-1zM0 9h1v1h-1zM15 9h1v1h-1zM0 10h1v1h-1zM15 10h1v1h-1zM0 11h1v1h-1zM15 11h1v1h-1zM1 12h1v1h-1zM14 12h1v1h-1zM2 13h12v1h-12z'/></svg>")}
.note-actions .cta-say[lang="ja"]{font-size:12px}
.note-actions .cta-say[lang="ar"]{font-size:12px}
/* desktop: teclas coladas à esquerda e a legenda depois delas; no celular a legenda fica em cima */
@media(min-width:761px){.note-actions .share-label{order:2}}
.note-actions .share-row{gap:10px}
.note-actions .sbtn .px-tecla{width:calc(var(--px-u)*16);height:calc(var(--px-u)*16)} /* a regra antiga .sbtn svg fixava 16 px */
.note-actions .sbtn{width:auto;height:auto;padding:6px;margin:-6px;border:0;border-radius:0;background:none;color:#fff;opacity:.72;transition:opacity .2s}
.note-actions .sbtn:hover,.note-actions .sbtn:focus-visible,.note-actions .sbtn.copied{color:#fff;background:none;border:0;opacity:1}
@keyframes px-anda-cima{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-1px)}}
.note-actions .sbtn:hover .px-glifo,.note-actions .sbtn:focus-visible .px-glifo{animation:px-anda-cima .5s steps(1) infinite}
.note-actions .sbtn.copied .px-tampa{transform:translate(0,2px)}
.note-actions .sbtn.copied .px-base{opacity:0}
.note-actions .sbtn.copied .px-glifo{animation:none}
@media(max-width:760px){
  .px-tecla{width:32px;height:32px}
  [data-setas] .left,[data-setas] .right{padding:8px;margin:-8px}
  .px-desce{padding:8px;margin-right:-8px} /* o teclas.js alinha o right com a margem da barra */
  .note-actions{--px-u:2px}
  .note-actions .note-cta{font-size:15px}
  .note-actions .share-row{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  .px-tecla .px-flecha,.px-desce .px-flecha,.px-glifo{animation:none!important}
}

/* nas outras páginas o convite ainda tem a linha embaixo e a seta: somem */
.note-actions .note-cta:before,.note-actions .note-cta:after{display:none}
.note-actions .note-cta .cta-arrow{display:none}