/* -------------------------------------------------------------
   BRAZIL FORCE — Membros (lista) + Membro (perfil individual)
   Carregado depois de perfil.css (reusa tokens, nav, hero, cards).
   ------------------------------------------------------------- */

/* ===== toolbar de busca (membros.html) ===== */
.mb-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.mb-toolbar input[type="text"]{
  flex:1;min-width:220px;padding:12px 16px;background:rgba(5,7,13,.55);border:1px solid var(--line);
  color:var(--text);font-family:"Rajdhani",sans-serif;font-size:15px;font-weight:500;
}
.mb-toolbar input[type="text"]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,196,82,.12)}
.mb-toolbar select{
  padding:12px 38px 12px 14px;background:rgba(5,7,13,.55);border:1px solid var(--line);
  color:var(--text);font-family:"Rajdhani",sans-serif;font-size:14px;font-weight:600;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c452' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px;
}
.mb-toolbar select:focus{outline:none;border-color:var(--gold)}
.mb-count{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:2px;color:var(--text-mute);margin-left:auto}

/* ===== grid de membros ===== */
.mb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;padding-bottom:60px}
.mb-loading, .mb-empty{
  grid-column:1/-1;text-align:center;padding:60px 16px;color:var(--text-mute);
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:2px;border:1px dashed var(--line);
}

.mb-card{
  display:flex;flex-direction:column;gap:14px;padding:22px;cursor:pointer;
  background:linear-gradient(180deg,rgba(20,30,50,.55),rgba(10,15,28,.7));
  border:1px solid var(--line);position:relative;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.mb-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(245,196,82,.45)}
.mb-card::before, .mb-card::after{content:"";position:absolute;width:12px;height:12px;border-color:var(--gold);border-style:solid;opacity:.55}
.mb-card::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.mb-card::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}

.mb-top{display:flex;gap:14px;align-items:center}
.mb-avatar{
  width:60px;height:60px;flex:none;overflow:hidden;background:var(--bg-2);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  border:1px solid var(--line);
}
.mb-avatar img{width:100%;height:100%;object-fit:cover}
.mb-avatar.faction-empire{box-shadow:inset 0 0 18px rgba(226,58,58,.3);border-color:rgba(226,58,58,.4)}
.mb-avatar.faction-republic{box-shadow:inset 0 0 18px rgba(77,171,255,.3);border-color:rgba(77,171,255,.4)}
.mb-id{min-width:0}
.mb-id .name{font-family:"Orbitron",sans-serif;font-weight:700;font-size:15px;letter-spacing:.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-id .char{display:flex;align-items:center;gap:4px;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--text-mute);margin-top:5px;letter-spacing:1px;text-transform:uppercase;overflow:hidden}
.mb-id .char span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-id .char .mi{width:16px;height:16px;object-fit:contain;flex:none;filter:drop-shadow(0 0 3px rgba(0,0,0,.5))}

.mb-badges{display:flex;flex-wrap:wrap;gap:7px}
.mb-badge{
  font-family:"Rajdhani",sans-serif;font-weight:700;font-size:10px;letter-spacing:2px;text-transform:uppercase;
  padding:4px 10px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--text-dim);
}
.mb-badge.guildmaster{color:var(--gold);border-color:rgba(245,196,82,.5);background:rgba(245,196,82,.08)}
.mb-badge.officer{color:#c490ff;border-color:rgba(196,144,255,.4);background:rgba(196,144,255,.08)}
.mb-badge.raid_leader{color:var(--cyan);border-color:rgba(77,214,255,.4);background:rgba(77,214,255,.08)}
.mb-badge.empire{color:var(--sith);border-color:rgba(226,58,58,.4);background:rgba(226,58,58,.08)}
.mb-badge.republic{color:var(--rep);border-color:rgba(77,171,255,.4);background:rgba(77,171,255,.08)}
.mb-badge.ach{color:#6cff8a;border-color:rgba(108,255,138,.35);background:rgba(108,255,138,.06)}

.mb-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:1px dashed var(--line);
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:1.5px;color:var(--text-mute);text-transform:uppercase;
}
.mb-foot .ilvl{color:var(--cyan)}

/* ===== perfil individual (membro.html) ===== */
.mp-hidden{display:none !important}
.mp-rank-col{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.mp-bio{
  margin:14px 0 0;color:var(--text-dim);font-size:15px;line-height:1.6;max-width:680px;
  border-left:2px solid rgba(245,196,82,.4);padding-left:14px;white-space:pre-line;
}
.mp-ach{margin-top:14px}

.mp-stats{
  margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.mp-stat{padding:16px 18px;background:rgba(5,7,13,.55);text-align:center}

/* banner da operation favorita */
.mp-fav-op{
  position:relative;margin-top:18px;height:150px;overflow:hidden;
  border:1px solid rgba(245,196,82,.28);
  clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px));
}
.mp-fav-op img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05)}
.mp-fav-op::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,7,13,.88) 0%,rgba(5,7,13,.25) 55%,transparent 100%);
}
.mp-fav-op-meta{
  position:absolute;left:20px;bottom:16px;z-index:1;display:flex;flex-direction:column;gap:3px;
}
.mp-fav-op-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2.5px;color:var(--gold)}
.mp-fav-op-name{
  font-family:'Orbitron',sans-serif;font-size:20px;font-weight:800;color:#fff;letter-spacing:.5px;
  text-shadow:0 2px 10px rgba(0,0,0,.85);
}
.mp-fav-op-sub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.5px;color:var(--text-dim)}
@media (max-width:640px){
  .mp-fav-op{height:110px}
  .mp-fav-op-name{font-size:16px}
}
.mp-stat .lbl{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:2px;color:var(--text-mute);text-transform:uppercase;margin-bottom:6px}
.mp-stat .val{font-family:"Orbitron",sans-serif;font-size:17px;font-weight:700;color:var(--text);letter-spacing:.5px}
.mp-stat .val.ilvl{color:var(--cyan)}
.mp-stat .val.with-icon{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px}
.mp-stat .val.with-icon img{width:24px;height:24px;object-fit:contain}

.mp-section{margin-top:44px;padding-bottom:10px}
.mp-section:last-of-type{padding-bottom:70px}
.mp-section-title{
  font-family:"Orbitron",sans-serif;font-weight:700;font-size:19px;margin:0 0 18px;letter-spacing:-.2px;
}
.mp-sub-count{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--text-mute);margin-left:6px}

/* cards de personagem em modo leitura */
.mp-char-ro .char-top{padding-right:20px}

/* galeria do perfil */
.mp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.mp-g-item{border:1px solid var(--line);background:rgba(5,7,13,.4);cursor:zoom-in;overflow:hidden}
.mp-g-item .thumb{aspect-ratio:16/10;overflow:hidden}
.mp-g-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.mp-g-item:hover img{transform:scale(1.04)}
.mp-g-item .cap{
  font-family:"Rajdhani",sans-serif;font-size:13px;font-weight:500;color:var(--text-dim);
  padding:8px 12px;border-top:1px solid var(--line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* lightbox */
.mp-lightbox{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(3,5,10,.92);backdrop-filter:blur(6px);padding:32px;
}
.mp-lightbox.show{display:flex;animation:fadeIn .25s ease}
.mp-lightbox figure{margin:0;max-width:min(1200px,94vw);max-height:88vh;display:flex;flex-direction:column;gap:10px}
.mp-lightbox img{max-width:100%;max-height:80vh;object-fit:contain;border:1px solid var(--line-2)}
.mp-lightbox figcaption{font-family:"Rajdhani",sans-serif;font-size:15px;color:var(--text-dim);text-align:center}
.mp-lb-close{
  position:absolute;top:22px;right:26px;width:40px;height:40px;display:grid;place-items:center;
  background:rgba(15,25,45,.7);border:1px solid var(--line-2);color:var(--text);cursor:pointer;font-size:15px;
}
.mp-lb-close:hover{border-color:var(--gold);color:var(--gold)}

/* ===== motion — perfil público ===== */
@keyframes mpUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes mpAvatarGlow{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(245,196,82,.5),0 0 26px rgba(245,196,82,.15)}
  50%{box-shadow:inset 0 0 0 1px rgba(245,196,82,.75),0 0 40px rgba(245,196,82,.32)}
}

#mpIdCard{animation:mpUp .55s cubic-bezier(.2,.8,.2,1) both}
#mpIdCard .id-avatar{animation:mpAvatarGlow 3.6s ease-in-out infinite}
#mpStats{animation:mpUp .55s cubic-bezier(.2,.8,.2,1) .1s both}

.mp-stat{transition:background .25s ease, transform .25s ease}
.mp-stat:hover{background:rgba(245,196,82,.06);transform:translateY(-2px)}

.mp-section{animation:mpUp .5s cubic-bezier(.2,.8,.2,1) .12s both}
.mp-section-title{position:relative;padding-left:14px}
.mp-section-title::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;
  background:linear-gradient(180deg,var(--gold),transparent);
}

/* stagger via --i definido no render */
#mpCharGrid .char-card{
  animation:mpUp .5s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(120ms + var(--i,0)*70ms);
}
.mp-gallery .mp-g-item{
  animation:mpUp .5s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(120ms + var(--i,0)*60ms);
}
.mp-gallery .mp-g-item{transition:transform .25s ease, box-shadow .25s ease}
.mp-gallery .mp-g-item:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.5),0 0 0 1px rgba(245,196,82,.35)}

.ach-chip{transition:transform .2s ease, box-shadow .2s ease}
.mp-ach .ach-chip:hover{transform:translateY(-1px);box-shadow:0 0 14px rgba(108,255,138,.25)}

@media (prefers-reduced-motion: reduce){
  #mpIdCard, #mpStats, .mp-section,
  #mpCharGrid .char-card, .mp-gallery .mp-g-item{animation:none}
  #mpIdCard .id-avatar{animation:none}
}

@media (max-width:720px){
  .mb-count{margin-left:0;width:100%}
  .mp-rank-col{align-items:flex-start}
}