/* Watch Party: palco proprio, convite, quadradinho no mosaico e cartaz na aba Assistir. */

/* watch party: ocupa o palco como se fosse a transmissao */
.festa{position:absolute;inset:56px var(--palcoR,316px) 96px var(--palcoL,292px);z-index:3;display:flex;flex-direction:column;gap:8px}
.festaTopo{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;flex:none;
           border-radius:var(--r);background:hsl(var(--vidroBRaw)/calc(var(--opq) + .10));
           backdrop-filter:blur(calc(var(--vidro) * .7));-webkit-backdrop-filter:blur(calc(var(--vidro) * .7));
           box-shadow:var(--anel)}
.festaIco{display:grid;place-items:center;flex:none;color:var(--ac3)}
.festaNome{font-size:12.5px;font-weight:500;max-width:40%;overflow:hidden;
           text-overflow:ellipsis;white-space:nowrap}
.festaQuem{font-size:11px;color:var(--tx3);white-space:nowrap}
.festaTopo button{padding:3px 9px;font-size:12px}
.festaMoldura{flex:1;min-height:0;border-radius:var(--rlg);overflow:hidden;background:#000;
              box-shadow:0 0 0 1px var(--linha2),var(--sombra2)}
.festaMoldura iframe{width:100%;height:100%;border:0;display:block}
/* o Spotify tem altura propria e fica feio esticado */
.festa.baixa .festaMoldura{flex:none;height:172px;align-self:center;width:min(680px,100%)}
.festa.baixa{justify-content:center}
/* No mosaico a festa vira mais um quadradinho. O iframe NAO muda de lugar no
   DOM (mover um iframe o recarrega, e o video voltaria para o zero): ele so
   e reposicionado por cima do buraco que a grade deixou para ele. */
/* fora de cena, mas ainda tocando: display:none pararia o embed */
.festa.oculta{opacity:0;pointer-events:none}
.festa.emTile{inset:auto;gap:0;z-index:4}
/* no quadradinho a barra vira o mesmo rotulo discreto dos outros tiles;
   os botoes so aparecem com o mouse em cima */
.festa.emTile .festaTopo{position:absolute;left:8px;bottom:8px;top:auto;right:auto;
                         height:auto;width:max-content;max-width:calc(100% - 16px);
                         padding:3px 8px;gap:6px;font-size:11px;z-index:2;border-radius:6px}
.festa.emTile .festaNome{font-size:11px}
.festa.emTile .festaQuem{font-size:10.5px}
.festa.emTile .festaTopo button{display:none;padding:2px 7px;font-size:11px}
.festa.emTile:hover .festaTopo button{display:inline-block}
.festa.emTile .festaMoldura{flex:1;height:100%;width:100%;border-radius:var(--rlg);
                            box-shadow:0 0 0 1px var(--linha2)}
/* No quadradinho o iframe engolia o clique e a festa nunca voltava ao foco.
   Sem pointer-events ele deixa o clique chegar na moldura da festa — e ali
   dentro nao ha nada para clicar mesmo, o quadradinho e so miniatura. */
.festa.emTile{cursor:zoom-in}
.festa.emTile .festaMoldura{pointer-events:none}
.festa.emTile:hover{box-shadow:0 0 0 2px var(--ac);border-radius:var(--rlg)}
/* em foco, a barra de cima e a alca para voltar a grade */
.stage.podeGrade .festa:not(.emTile) .festaTopo{cursor:zoom-out}
.festa.emTile.baixa .festaMoldura{flex:1;height:100%;width:100%;align-self:stretch}
/* buraco reservado na grade: so a moldura e o rotulo, o conteudo vem por cima */
.mosaico .tile.slotFesta{background:var(--chao);cursor:pointer}
@media (max-width:960px){
  .festa{position:static;order:2;height:auto;min-height:52vh}
  .festa.emTile{position:static}
  .festa.emTile .festaTopo{position:static;opacity:1;height:34px}
}

/* convite: alguem abriu uma Watch Party e eu ainda nao entrei */
.convite{position:absolute;top:60px;left:50%;transform:translateX(-50%);z-index:7;
         display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;
         border-radius:var(--rlg);background:hsl(var(--vidroBRaw)/calc(var(--opq) + .18));
         backdrop-filter:blur(calc(var(--vidro) * .7));-webkit-backdrop-filter:blur(calc(var(--vidro) * .7));
         box-shadow:0 0 0 1px var(--ac8),var(--sombra1);
         animation:conviteEntra .22s ease-out}
@keyframes conviteEntra{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.convIco{display:grid;place-items:center;flex:none;color:var(--ac3)}
.convTx{display:flex;flex-direction:column;gap:1px;min-width:0}
.convTx b{font-size:12.5px;font-weight:500}
.convTx span{font-size:11px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convite button{padding:4px 10px;font-size:12px}
/* a pilula mora no mesmo topo: com o convite no ar ela desce um pouco */
.stage.temConvite .pilula{top:112px}
@media (max-width:960px){
  .convite{position:static;transform:none;order:0}
  .stage.temConvite .pilula{top:auto}
}

/* bloco da festa em cartaz dentro da aba Assistir */
.festaCartaz{display:flex;align-items:center;gap:9px;padding:9px 10px;margin-bottom:10px;
             border-radius:var(--r);background:var(--fundo3);box-shadow:0 0 0 1px var(--ac8)}
.festaCartaz .ic{display:grid;place-items:center;flex:none;color:var(--ac3)}
.festaCartaz .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.festaCartaz .tx b{font-size:12px;font-weight:500}
.festaCartaz .tx span{font-size:11px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.festaCartaz button{padding:4px 10px;font-size:12px}