/* Comunidade como rede social (bloco 2.12): casca no Portal e hub "Encontrar ou iniciar conversa". Mockup: docs/mockups/comunidade/rede-social.html. Letra mínima 15px. */

/* ---- Portal com o trilho ao lado (Descobrir) ---- */
#communityPortal.pn-portal-casca{display:grid;grid-template-columns:92px minmax(0,1fr);column-gap:14px;align-items:start;max-width:1280px;}
#communityPortal.pn-portal-casca[hidden]{display:none;}
#communityPortal.pn-portal-casca > .pn-trilho{grid-column:1;grid-row:1;}
#communityPortal.pn-portal-casca > .pn-portal-corpo{grid-column:2;min-width:0;}
@media(max-width:880px){
  #communityPortal.pn-portal-casca{grid-template-columns:minmax(0,1fr);}
  #communityPortal.pn-portal-casca > .pn-trilho{grid-column:1;grid-row:1;}
  #communityPortal.pn-portal-casca > .pn-portal-corpo{grid-column:1;grid-row:2;}
}

/* ---- Início: o botão novo no lugar da caixa de ID ---- */
.pn-casca .community-sidebar-dm,.pn-casca #communityDmBtn{display:none;}
.pn-hub-botao{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid #222838;border-radius:10px;background:#0a0c13;color:#98a2b5;padding:9px 12px;font:600 15px 'Inter',sans-serif;cursor:pointer;margin-bottom:8px;}
.pn-hub-botao:hover{border-color:#20d3e0;color:#e9edf5;}
.pn-hub-recentes{display:grid;gap:2px;margin-bottom:8px;}

/* ---- janela do hub ---- */
.pn-hub-fundo{position:fixed;inset:0;z-index:2000;background:rgba(2,4,8,.66);display:grid;place-items:start center;padding:10vh 16px 16px;}
.pn-hub-fundo[hidden]{display:none;}
.pn-hub{position:relative;width:min(560px,100%);max-height:80vh;display:flex;flex-direction:column;border:1px solid #222838;border-radius:16px;background:#0e1118;box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:hidden;}
.pn-hub::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#f27d7d,#e8a14d,#e3c341,#64ae62,#4c8bd8);z-index:3;}
.pn-hub::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(105deg,transparent 43%,rgba(32,211,224,.07) 47%,rgba(255,244,205,.14) 50%,rgba(227,179,65,.08) 53%,transparent 57%);background-size:240% 100%;background-repeat:no-repeat;background-position:130% 0;animation:pn-hub-varre 7s ease-in-out infinite;}
@keyframes pn-hub-varre{0%{background-position-x:130%}30%,100%{background-position-x:-30%}}
.pn-hub-cena{position:relative;flex:none;height:76px;overflow:hidden;display:flex;align-items:flex-end;padding:10px 16px;background:linear-gradient(180deg,#0f2a33,#0e1118);clip-path:polygon(0 0,100% 0,100% 90%,0 100%);}
.pn-hub-cena svg{position:absolute;inset:0;width:100%;height:100%;}
.pn-hub-tit{position:relative;z-index:4;display:grid;}
.pn-hub-tit b{font-size:17px;}
.pn-hub-tit small{color:#98a2b5;font-size:15px;}
.pn-hub-campo{position:relative;z-index:4;flex:none;margin:12px 14px 6px;border:1px solid #20d3e0;border-radius:12px;background:#0a0c13;padding:10px 14px;display:flex;gap:10px;align-items:center;box-shadow:0 0 0 3px rgba(32,211,224,.14);}
.pn-hub-campo input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#e9edf5;font:15px 'Inter',sans-serif;}
.pn-hub-res{position:relative;z-index:4;flex:1;overflow-y:auto;padding:4px 8px 10px;display:grid;align-content:start;gap:2px;}
.pn-hub-cat{font:700 15px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#98a2b5;padding:8px 8px 2px;}
.pn-hub-vazio{color:#98a2b5;padding:14px 10px;font-size:15px;}
.pn-hub-lin{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;color:#e9edf5;padding:8px 10px;border-radius:10px;font:inherit;font-size:15px;cursor:pointer;}
.pn-hub-lin.sel,.pn-hub-lin:hover{background:rgba(32,211,224,.14);}
.pn-hub-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#04222a;flex:none;font-size:15px;}
.pn-hub-nm{flex:1;min-width:0;display:grid;}
.pn-hub-nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pn-hub-nm small{color:#98a2b5;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pn-hub-go{color:#98a2b5;border:1px solid #222838;border-radius:8px;padding:2px 10px;font-size:15px;flex:none;}
.pn-hub-lin.sel .pn-hub-go,.pn-hub-lin:hover .pn-hub-go{color:#04222a;background:#20d3e0;border-color:#20d3e0;}
.pn-hub-lin.compacta{padding:5px 8px;border-radius:8px;}
.pn-hub-lin.compacta .pn-hub-av{width:28px;height:28px;}
.pn-hub-rod{position:relative;z-index:4;flex:none;border-top:1px solid #222838;padding:8px 14px;color:#98a2b5;display:flex;gap:16px;flex-wrap:wrap;font-size:15px;}
@media(max-width:600px){.pn-hub-rod span:last-child{display:none;}}
@media(prefers-reduced-motion:reduce){.pn-hub::after{animation:none;}}

/* ---- contador de mensagens novas no ⌂ do trilho ---- */
.pn-ti .pn-bd{position:absolute;right:-6px;bottom:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:99px;background:#e5726b;color:#fff;font:800 15px 'Inter',sans-serif;line-height:24px;text-align:center;border:3px solid #0a0c13;box-sizing:border-box;}

/* ---- Amigos no Início (src/comunidade/amigos.js + js/comunidade/amigos.js; mockup rede-social.html, item 3) ---- */
.pn-am-botao{position:relative;display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid transparent;border-radius:10px;background:transparent;color:#98a2b5;padding:9px 12px;font:700 15px 'Inter',sans-serif;cursor:pointer;margin-bottom:8px;}
.pn-am-botao:hover{color:#e9edf5;background:#141826;}
.pn-am-botao.on{background:rgba(32,211,224,.14);border-color:rgba(32,211,224,.45);color:#20d3e0;}
.pn-am-botao .pn-bd{margin-left:auto;min-width:24px;height:24px;padding:0 6px;border-radius:99px;background:#e5726b;color:#fff;font:800 15px 'Inter',sans-serif;line-height:24px;text-align:center;}
#communityChatWrap .community-main{position:relative;}
.pn-am{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;background:#10131c;overflow:hidden;}
.pn-am[hidden]{display:none;}
.pn-am::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#f27d7d,#e8a14d,#e3c341,#64ae62,#4c8bd8);z-index:2;}
.pn-am-cena{position:relative;flex:none;height:74px;overflow:hidden;display:flex;align-items:flex-end;padding:10px 16px;background:linear-gradient(180deg,#0f2a33,#10131c);clip-path:polygon(0 0,100% 0,100% 88%,0 100%);}
.pn-am-cena svg{position:absolute;inset:0;width:100%;height:100%;}
.pn-am-tit{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;font:800 18px 'Inter',sans-serif;color:#e9edf5;}
.pn-am-x{background:transparent;border:0;color:#98a2b5;font-size:18px;cursor:pointer;padding:4px 8px;}
.pn-am-corpo{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 260px;}
.pn-am-col{min-width:0;overflow:auto;padding:12px 16px 16px;display:flex;flex-direction:column;gap:10px;}
.pn-am-campo{width:100%;box-sizing:border-box;background:#0a0c13;border:1px solid #222838;border-radius:10px;color:#e9edf5;padding:9px 12px;font:500 15px 'Inter',sans-serif;}
.pn-am-campo:focus{outline:none;border-color:#20d3e0;}
.pn-am-abas{display:flex;gap:6px;flex-wrap:wrap;align-items:center;border-bottom:1px solid #222838;padding-bottom:10px;}
.pn-am-aba{background:transparent;border:0;border-radius:8px;padding:6px 12px;color:#98a2b5;font:700 15px 'Inter',sans-serif;cursor:pointer;display:inline-flex;gap:6px;align-items:center;}
.pn-am-aba:hover{color:#e9edf5;background:#141826;}
.pn-am-aba.on{background:rgba(32,211,224,.14);color:#20d3e0;}
.pn-am-aba b{color:#e5726b;}
.pn-am-add{margin-left:auto;}
.pn-am-bt{border:1px solid #222838;background:#141826;color:#e9edf5;border-radius:8px;padding:6px 12px;font:700 15px 'Inter',sans-serif;cursor:pointer;white-space:nowrap;}
.pn-am-bt.pri{background:#20d3e0;border-color:#20d3e0;color:#04222a;}
.pn-am-bt.perigo{color:#e5726b;border-color:rgba(229,114,107,.45);}
.pn-am-cat{font:700 15px 'Inter',sans-serif;color:#7d8796;text-transform:uppercase;letter-spacing:.06em;margin-top:4px;}
.pn-am-linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid #222838;padding:10px 4px;}
.pn-am-nm{flex:1;min-width:120px;display:grid;}
.pn-am-nm b{color:#e9edf5;font-size:15px;}
.pn-am-nm small{color:#98a2b5;font-size:15px;}
.pn-am-av{position:relative;flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:800 16px 'Inter',sans-serif;color:#0a0c13;}
.pn-am-av i{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;background:#5c6577;border:3px solid #10131c;}
.pn-am-av i.on{background:#38d6a0;}
.pn-am-ib{width:36px;height:36px;border-radius:50%;border:1px solid #222838;background:#141826;color:#e9edf5;font-size:16px;cursor:pointer;}
.pn-am-ib:hover{border-color:#20d3e0;}
.pn-am-conf{flex-basis:100%;display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#98a2b5;padding-left:50px;font-size:15px;}
.pn-am-vazio{border:2px dashed #222838;border-radius:12px;padding:18px;text-align:center;color:#98a2b5;font-size:15px;}
.pn-am-dica{margin:0;color:#98a2b5;font-size:15px;}
.pn-am-res{display:grid;}
.pn-am-aviso{border:1px solid rgba(56,214,160,.45);background:rgba(56,214,160,.1);color:#38d6a0;border-radius:10px;padding:8px 12px;font:600 15px 'Inter',sans-serif;}
.pn-am-aviso.erro{border-color:rgba(229,114,107,.45);background:rgba(229,114,107,.1);color:#e5726b;}
.pn-am-aviso[hidden]{display:none;}
.pn-am-ativo{border-left:1px solid #222838;background:#0e1118;padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px;}
.pn-am-ativo h3{margin:0;font:800 16px 'Inter',sans-serif;color:#e9edf5;}
.pn-am-ativo small{color:#98a2b5;font-size:15px;}
.pn-am-ativo-l{display:grid;gap:8px;}
.pn-am-cx{display:flex;gap:10px;align-items:center;text-align:left;border:1px solid #222838;border-radius:12px;background:#141826;padding:10px;cursor:pointer;color:inherit;}
.pn-am-cx span{display:grid;min-width:0;}
.pn-am-cx b{color:#e9edf5;font-size:15px;}
@media(max-width:900px){.pn-am-corpo{grid-template-columns:1fr;}.pn-am-ativo{display:none;}.pn-am-add{margin-left:0;}}

/* ---- @ Menções no Início (src/comunidade/mencoes.js + js/comunidade/mencoes.js) ---- */
.pn-me .pn-am-col{flex:1;min-height:0;}
.pn-me-cena{background:linear-gradient(180deg,#221a3a,#10131c);}
.pn-me-linha{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;border:0;border-top:1px solid #222838;background:transparent;color:inherit;padding:12px 6px;cursor:pointer;font:500 15px 'Inter',sans-serif;}
.pn-me-linha:hover{background:#141826;}
.pn-me-linha.sem-link{cursor:default;}
.pn-me-linha.nova{box-shadow:inset 3px 0 0 #a78bfa;}
.pn-me-topo{display:flex;gap:6px;flex-wrap:wrap;align-items:baseline;}
.pn-me-topo b{color:#e9edf5;}
.pn-me-acao{color:#98a2b5;}
.pn-me-texto{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:#e9edf5;background:#0e1118;border:1px solid #222838;border-radius:10px;padding:8px 10px;margin:4px 0;}
.pn-me-destaque{outline:2px solid #a78bfa;outline-offset:2px;border-radius:8px;transition:outline-color .6s;}

/* ---- Portal em duas colunas (lateral + Descobrir) ---- */
.pn-portal-corpo.pn-pl{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start;}
.pn-portal-corpo.pn-pl.sem-lado{grid-template-columns:minmax(0,1fr);}
.pn-pl-direita{min-width:0;}
.pn-portal-corpo.pn-pl:not(.sem-lado) .pn-pl-direita > .hero{display:none;}
.pn-portal-corpo.sem-lado .pn-pl-cab{display:none;}
.pn-pl-lado{position:sticky;top:76px;display:flex;flex-direction:column;gap:8px;padding:12px 10px 10px;border:1px solid #222838;border-radius:14px;background:#0e1118;overflow:hidden;font-size:15px;}
.pn-pl-lado[hidden]{display:none;}
.pn-pl-lado::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#20d3e0,#e3c341,#a78bfa);}
.pn-pl-lado #communitySearchRow{margin:0 !important;max-width:none !important;}
.pn-pl-lado #communitySearchInput{font-size:15px;}
.pn-pl-lado .community-filter-tabs{display:grid;justify-content:stretch;gap:4px;margin:0 !important;max-width:none !important;}
.pn-pl-lado .community-filter-tabs[hidden]{display:none;}
.pn-pl-lado .community-filter-tab{text-align:left;border-radius:10px;font-size:15px;padding:8px 12px;}
.pn-pl-cat{margin-top:6px;color:#98a2b5;font:800 15px 'Inter',sans-serif;letter-spacing:.04em;text-transform:uppercase;}
.pn-pl-lado .pn-jogos-filtro{display:grid;gap:4px;margin:0;max-width:none;}
.pn-pl-lado .pn-jogos-filtro[hidden]{display:none;}
.pn-pl-lado .pn-chip-jogo{text-align:left;border-radius:10px;padding:8px 12px;}
.pn-pl-criar{display:grid;gap:4px;}
.pn-pl-it{text-align:left;border:1px solid #222838;border-radius:10px;background:#0a0c13;color:#e9edf5;padding:8px 12px;font:600 15px 'Inter',sans-serif;cursor:pointer;}
.pn-pl-it:hover{border-color:#20d3e0;}
.pn-pl-codigo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;}
.pn-pl-codigo[hidden]{display:none;}
.pn-pl-campo{min-width:0;border:1px solid #222838;border-radius:10px;background:#0a0c13;color:#e9edf5;padding:8px 10px;font:15px 'Inter',sans-serif;}
.pn-pl-bt{border:0;border-radius:10px;background:#20d3e0;color:#04222a;padding:8px 12px;font:800 15px 'Inter',sans-serif;cursor:pointer;}
.pn-pl-bt:disabled{opacity:.6;cursor:default;}
.pn-pl-msg{grid-column:1 / -1;font-size:15px;}
.pn-pl-msg:empty{display:none;}
.pn-pl-msg.ok{color:#64ae62;}.pn-pl-msg.erro{color:#e5726b;}
.pn-pl-usr{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:6px -10px -10px;background:#0b0e15;border-top:1px solid #222838;border-radius:0 0 14px 14px;}
.pn-pl-cab{position:relative;overflow:hidden;min-height:96px;display:flex;align-items:flex-end;padding:14px 18px;margin-bottom:14px;border:1px solid #222838;border-radius:14px;background:linear-gradient(180deg,#0f2a33,#0e1118);clip-path:polygon(0 0,100% 0,100% 88%,96% 100%,0 100%);}
.pn-pl-cab::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#f27d7d,#e8a14d,#e3c341,#64ae62,#4c8bd8);z-index:2;}
.pn-pl-cena{position:absolute;inset:0;width:100%;height:100%;}
.pn-pl-cab-txt{position:relative;z-index:2;display:grid;gap:2px;}
.pn-pl-cab-txt b{font:800 20px 'Inter',sans-serif;color:#e9edf5;}
.pn-pl-cab-txt span{font-size:15px;color:#98a2b5;}
@media(max-width:880px){
  .pn-portal-corpo.pn-pl{grid-template-columns:minmax(0,1fr);}
  .pn-pl-lado{position:static;}
  .pn-pl-lado .community-filter-tabs,.pn-pl-lado .pn-jogos-filtro,.pn-pl-criar{display:flex;flex-wrap:wrap;gap:6px;}
  .pn-pl-lado .community-filter-tab,.pn-pl-lado .pn-chip-jogo,.pn-pl-it{border-radius:99px;padding:6px 14px;}
  .pn-pl-codigo{flex-basis:100%;}
}