/* Página da colinha (27/09/2026): colinha + banner dos fandoms + foto de perfil com a moldura
   "Eu voto Manuela". Vem DEPOIS do styles.css (o da colinha: fundo creme, botões, busca de
   candidatos) e só acrescenta o que é novo. O vermelho fica só no quadro da moldura. Vale na
   página pública e na tela #/colinha do app (dentro de um shadowRoot; por isso :host). */
:root,:host{--vermelho:#F12D31;--rosa:#FF017D;--azul:#140DAB;--creme:#FFE9C7;--amarelo:#EBC835}
[hidden]{display:none!important}
main{width:min(100% - 32px,460px);padding:18px 0 max(32px,env(safe-area-inset-bottom))}
.back{margin-bottom:6px}

/* Títulos no jeito das etiquetas da moldura: tarja azul e tarja rosa, levemente tortas. */
.titulo{margin:4px 0 18px;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:900;font-size:clamp(24px,7.4vw,32px);line-height:1;text-transform:uppercase;letter-spacing:.01em;text-align:center}
.tag{display:inline-block;padding:.17em .42em .11em;color:var(--creme)}
.tag.azul{background:var(--azul);transform:rotate(-2.2deg)}
.tag.rosa{background:var(--rosa);transform:rotate(1.8deg);margin-left:1.3em}
.bloco+.bloco{margin-top:44px}

/* Palco da foto: o canvas 1080×1080 (a moldura inteira, com a borda vermelha) na largura da coluna. */
.palco{position:relative;width:100%;aspect-ratio:1;-webkit-user-select:none;user-select:none;box-shadow:0 4px 16px #2915611a}
[data-estado=pronto] .palco{touch-action:none} /* com foto, o dedo arrasta a foto; vazio, rola a página */
.palco canvas{display:block}
[data-estado=vazio] .palco canvas{cursor:pointer}
[data-estado=pronto] .palco canvas{cursor:grab}
[data-estado=pronto] .palco canvas:active{cursor:grabbing}
.palco canvas:focus-visible{outline:3px solid var(--rosa);outline-offset:4px}
/* O alvo fica na parte de cima do círculo: a de baixo é coberta pelas etiquetas da moldura. */
.alvo{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;border:0;background:none;color:var(--azul);font:900 17px/1.15 Delight,system-ui,sans-serif;text-transform:uppercase;cursor:pointer;padding:22px;white-space:nowrap}
.alvo .mais{display:grid;place-items:center;width:66px;height:66px;background:var(--azul);color:var(--creme);font-size:46px;font-weight:500;line-height:1;box-shadow:5px 5px 0 var(--amarelo);transition:transform .12s}
.alvo:hover .mais{transform:translate(-2px,-2px)}
.carregando{position:absolute;left:0;right:0;top:38%;transform:translateY(-50%);display:grid;justify-items:center;gap:12px;color:var(--azul);font-weight:800;font-size:14px;text-align:center;pointer-events:none}
.giro{width:36px;height:36px;border:4px solid #140dab33;border-top-color:var(--azul);border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.solta{position:absolute;inset:0;display:none;place-items:center;background:#140dabd9;color:var(--creme);font-weight:900;font-size:20px;text-transform:uppercase;pointer-events:none}
.palco.arrastando .solta{display:grid}

.ajustes{display:flex;align-items:center;gap:10px;margin-top:14px}
.ajustes input[type=range]{flex:1;min-width:0;accent-color:var(--azul);height:28px}
.icone{width:38px;height:38px;border:1.5px solid var(--azul);background:transparent;color:var(--azul);font:700 22px/1 Delight,system-ui,sans-serif;border-radius:50%;cursor:pointer;flex:none;display:grid;place-items:center;padding:0 0 2px}
.texto{border:0;background:none;color:var(--azul);font:800 14px Delight,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 0 8px 4px;flex:none;white-space:nowrap}

.actions .largo{grid-column:1/-1}
.button svg.wa{fill:currentColor;stroke:none}
.status{margin:0;text-align:center;font-size:12px;line-height:1.4;color:#a01931}
.status:not(:empty){margin-top:11px}

.entrar{display:block;margin:34px auto 0;width:max-content;max-width:100%;padding:12px 18px;background:var(--rosa);color:#fff;font-weight:800;font-size:14px;text-decoration:none;border-radius:5px}

/* Desktop: foto à esquerda e colinha à direita; a foto acompanha a rolagem da colinha, que é mais
   alta. No HTML a colinha vem antes (é a ordem do celular, uma coluna só), então aqui cada bloco
   ganha a sua coluna. Pela largura do container, não da tela: dentro do app (coluna de 420 px) fica
   uma coluna só. */
.colinha-raiz{container:colinha/inline-size}
@media (min-width:900px){main{width:min(100% - 64px,980px);padding-top:28px}}
@container colinha (min-width:860px){
  .duas{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
  .bloco+.bloco{margin-top:0}
  .bloco-foto{position:sticky;top:24px;grid-column:1;grid-row:1}
  .bloco-colinha{grid-column:2;grid-row:1}
}
/* Enquanto a página pergunta se tem sessão (quem tem vai pra tela do app), o conteúdo espera. */
.colinha-checando main{visibility:hidden}

/* Banner da colinha dos fandoms (25/09/2026): photocards dos artistas girando, embaixo dos botões
   da colinha (fandoms-banner.js). 8 fotos x 2 s: a foto (.fdc-f) e o nome (.fdc-list) trocam juntos. */
/* Colinha dos fandoms · banner da home, repetido na colinha (25/09/2026) · photocards dos artistas girando.
   8 fotos x 2s: a foto (.fdc-f) e o nome (.fdc-list) trocam juntos. */
.fdc-cards{position:relative;width:86px;height:84px;flex:none}
.fdc-card{position:absolute;top:4px;width:56px;height:76px;border-radius:8px;overflow:hidden;background:#fff;border:3px solid #fff;box-sizing:border-box;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.fdc-card img{width:100%;height:100%;object-fit:cover;display:block}
.fdc-b1{left:0;transform:rotate(-15deg)}
.fdc-b2{left:12px;transform:rotate(-6deg)}
.fdc-front{left:26px;transform:rotate(6deg)}
.fdc-front .fdc-f{position:absolute;inset:0;opacity:0;animation:fdcFoto 16s infinite}
.fdc-holo{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,130,210,.45) 44%,rgba(130,210,255,.45) 54%,transparent 68%);background-size:300% 100%;mix-blend-mode:screen;animation:fdcHolo 3s linear infinite}
.fdc-txt{flex:1;min-width:0}
.fdc-k{font-size:10px;font-weight:900;letter-spacing:.12em;color:#EEC72B;margin:0}
.fdc-t{font-size:18px;font-weight:900;line-height:1.1;margin:2px 0 0;color:#FFECC9}
.fdc-tick{height:22px;overflow:hidden;margin-top:5px}
.fdc-list{animation:fdcNome 16s infinite}
.fdc-list span{display:block;height:22px;line-height:22px;font-size:16px;font-weight:900;color:#EEC72B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fdc-go{width:34px;height:34px;flex:none;border-radius:50%;background:#EEC72B;color:#140DAB;display:flex;align-items:center;justify-content:center}
@keyframes fdcFoto{0%{opacity:0;transform:scale(1.12)}2%{opacity:1;transform:scale(1)}11%{opacity:1}13%{opacity:0}100%{opacity:0}}
@keyframes fdcHolo{from{background-position:120% 0}to{background-position:-20% 0}}
@keyframes fdcNome{0.00%,10.88%{transform:translateY(-0px)}12.50%,23.38%{transform:translateY(-22px)}25.00%,35.88%{transform:translateY(-44px)}37.50%,48.38%{transform:translateY(-66px)}50.00%,60.88%{transform:translateY(-88px)}62.50%,73.38%{transform:translateY(-110px)}75.00%,85.88%{transform:translateY(-132px)}87.50%,98.38%{transform:translateY(-154px)}100%{transform:translateY(-176px)}}
@media (prefers-reduced-motion: reduce){.fdc *{animation:none !important}.fdc-front .fdc-f:first-child{opacity:1}}
.fdc{display:flex;align-items:center;gap:14px;background:#140DAB;color:#FFECC9;padding:0 16px 0 14px;min-height:108px;border-radius:18px;margin-top:16px;text-decoration:none;font-family:Delight,Arial,sans-serif}
.fdc:focus-visible{outline:3px solid #ff017d;outline-offset:3px}

@media (prefers-reduced-motion:reduce){.giro{animation-duration:2.4s}.alvo .mais{transition:none}}