:root{
  --community-gold:#f4d37c;
  --community-ember:#ff643f;
  --community-cyan:#69e5ff;
  --community-violet:#a48dff;
  --community-green:#69dc9e;
  --community-surface:rgba(17,20,27,.82);
  --community-line:rgba(244,211,124,.2);
}

.community-shell{width:min(1320px,calc(100% - 40px));margin-inline:auto}
.community-main{min-height:70vh;padding-bottom:70px}
.community-hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--community-line);background:radial-gradient(circle at 18% 18%,rgba(255,100,63,.18),transparent 32%),radial-gradient(circle at 86% 35%,rgba(164,141,255,.14),transparent 34%),linear-gradient(145deg,#13151b,#090b0f)}
.community-hero::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.18;background-image:linear-gradient(rgba(244,211,124,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(244,211,124,.12) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(#000,transparent 90%)}
.community-hero::after{content:"忍";position:absolute;z-index:-1;right:4%;top:50%;translate:0 -50%;font:900 clamp(15rem,34vw,32rem)/1 Georgia,serif;color:rgba(244,211,124,.025);filter:drop-shadow(0 0 38px rgba(255,100,63,.08))}
.community-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr);gap:42px;align-items:center;min-height:430px;padding-block:58px}
.community-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--community-gold);font-size:.72rem;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
.community-kicker::before{content:"";width:34px;height:2px;background:linear-gradient(90deg,var(--community-ember),var(--community-gold))}
.community-hero h1{max-width:12ch;margin:12px 0 15px;font-size:clamp(3.1rem,6.6vw,6.3rem);text-wrap:balance}
.community-hero h1 em{font-style:normal;color:var(--community-gold);text-shadow:0 5px 0 rgba(113,39,25,.7)}
.community-hero-copy>p{max-width:66ch;color:#c7cbd4;font-size:1.02rem}
.community-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:23px}
.community-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 17px;border:1px solid rgba(244,211,124,.45);border-radius:13px;background:linear-gradient(135deg,#b23824,#7d1b18);color:#fff;font-weight:900;text-decoration:none;cursor:pointer;box-shadow:0 13px 34px rgba(126,26,20,.28);transition:.2s ease}
.community-button:hover{translate:0 -2px;box-shadow:0 16px 38px rgba(126,26,20,.36)}
.community-button.secondary{background:rgba(244,211,124,.05);color:var(--community-gold);box-shadow:none}
.community-button.ghost{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.035);color:#d8dbe2;box-shadow:none}
.community-button[disabled]{opacity:.55;cursor:not-allowed;translate:none}
.community-mode-chip{display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding:7px 10px;border:1px solid rgba(105,229,255,.26);border-radius:999px;background:rgba(105,229,255,.06);color:#a9f1ff;font-size:.72rem;font-weight:850}
.community-mode-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--community-cyan);box-shadow:0 0 12px var(--community-cyan);animation:communityPulse 1.8s ease-in-out infinite}

.community-hero-podium{position:relative;display:grid;grid-template-columns:.9fr 1.15fr .9fr;align-items:end;min-height:310px;padding:35px 20px 18px;border:1px solid var(--community-line);border-radius:30px;background:radial-gradient(circle at 50% 64%,rgba(244,211,124,.12),transparent 42%),rgba(10,12,17,.52);backdrop-filter:blur(18px);box-shadow:0 28px 80px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.07)}
.community-podium-person{position:relative;display:grid;justify-items:center;align-content:end;min-width:0;cursor:pointer}
.community-podium-person[data-position="1"]{grid-column:2;grid-row:1}
.community-podium-person[data-position="2"]{grid-column:1;grid-row:1}
.community-podium-person[data-position="3"]{grid-column:3;grid-row:1}
.community-podium-avatar{position:relative;z-index:2;width:92px;height:92px;border:2px solid #d4dce7;border-radius:50%;overflow:hidden;background:#12151b;box-shadow:0 0 28px rgba(0,0,0,.55)}
.community-podium-person[data-position="1"] .community-podium-avatar{width:120px;height:120px;border-color:var(--community-gold);box-shadow:0 0 32px rgba(244,211,124,.3)}
.community-podium-avatar img{width:100%;height:100%;object-fit:contain;background:radial-gradient(circle,rgba(255,100,63,.16),transparent 68%)}
.community-podium-crown{position:absolute;z-index:4;top:-41px;left:50%;translate:-50% 0;color:var(--community-gold);font-size:2.2rem;filter:drop-shadow(0 0 13px rgba(244,211,124,.75));animation:communityCrown 3s ease-in-out infinite}
.community-podium-name{position:relative;z-index:3;width:100%;margin:9px 0 5px;overflow:hidden;color:#f6f1e8;font-weight:950;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.community-podium-rank{position:relative;z-index:2;display:grid;place-items:center;width:86%;height:48px;border:1px solid rgba(255,255,255,.13);border-radius:10px 10px 5px 5px;background:linear-gradient(#353a45,#1b1e25);color:#dce4ee;font:900 1rem Impact,Arial,sans-serif}
.community-podium-person[data-position="1"] .community-podium-rank{height:66px;border-color:rgba(244,211,124,.4);background:linear-gradient(#5d4b24,#2b2316);color:#ffe29a;font-size:1.15rem}
.community-podium-person[data-position="3"] .community-podium-rank{height:39px;border-color:rgba(219,150,103,.3);background:linear-gradient(#4c3328,#251d1a);color:#e6b18b}

.community-section{padding-top:48px}
.community-section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}
.community-section-head h2{font-size:clamp(2rem,4vw,3.6rem);text-transform:uppercase}
.community-section-head p{max-width:64ch;margin:0;color:#aeb4c0}
.community-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:-26px;position:relative;z-index:3}
.community-stat{position:relative;overflow:hidden;padding:18px;border:1px solid rgba(255,255,255,.09);border-radius:17px;background:linear-gradient(145deg,rgba(28,31,39,.94),rgba(14,16,21,.94));box-shadow:0 20px 42px rgba(0,0,0,.24)}
.community-stat::before{content:"";position:absolute;left:0;top:0;width:4px;height:62%;background:var(--tone,var(--community-gold));box-shadow:0 0 18px var(--tone,var(--community-gold))}
.community-stat small{display:block;color:#8f96a4;font-size:.65rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.community-stat b{display:block;margin-top:5px;color:var(--tone,var(--community-gold));font:900 1.9rem/1 Impact,Arial,sans-serif}
.community-stat span{display:block;margin-top:6px;color:#aeb4c0;font-size:.76rem}

.community-filter-panel{display:grid;grid-template-columns:minmax(250px,1.2fr) repeat(3,minmax(150px,.55fr));gap:10px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(16,18,24,.76)}
.community-field{display:grid;gap:6px}
.community-field label{color:#9299a7;font-size:.64rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.community-field input,.community-field select,.community-field textarea{width:100%;min-height:45px;box-sizing:border-box;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#11141a;color:#f4f0e8;padding:9px 12px;font:inherit;outline:none;transition:.2s ease}
.community-field textarea{min-height:112px;resize:vertical}
.community-field input:focus,.community-field select:focus,.community-field textarea:focus{border-color:rgba(244,211,124,.55);box-shadow:0 0 0 3px rgba(244,211,124,.08)}

.community-rank-list{display:grid;gap:11px;margin-top:17px}
.community-ranker{position:relative;display:grid;grid-template-columns:60px 82px minmax(0,1.25fr) minmax(190px,.7fr) auto;gap:16px;align-items:center;min-height:104px;padding:13px 17px;border:1px solid rgba(255,255,255,.09);border-radius:19px;background:radial-gradient(circle at 0 50%,color-mix(in srgb,var(--rank-tone,var(--community-gold)) 10%,transparent),transparent 34%),linear-gradient(135deg,rgba(27,30,38,.93),rgba(13,15,20,.94));color:inherit;text-align:left;box-shadow:0 15px 34px rgba(0,0,0,.18);cursor:pointer;overflow:hidden;transition:.22s ease}
.community-ranker::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.045),transparent 64%);translate:-120% 0;transition:translate .6s ease}
.community-ranker:hover{translate:0 -3px;border-color:color-mix(in srgb,var(--rank-tone,var(--community-gold)) 54%,transparent);box-shadow:0 22px 48px rgba(0,0,0,.28),0 0 24px color-mix(in srgb,var(--rank-tone,var(--community-gold)) 11%,transparent)}
.community-ranker:hover::after{translate:120% 0}
.community-ranker-position{display:grid;place-items:center;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--rank-tone,var(--community-gold)) 34%,transparent);border-radius:13px;background:color-mix(in srgb,var(--rank-tone,var(--community-gold)) 9%,transparent);color:var(--rank-tone,var(--community-gold));font:900 .95rem Impact,Arial,sans-serif}
.community-ranker-avatar{width:78px;height:78px;overflow:hidden;border:2px solid color-mix(in srgb,var(--rank-tone,var(--community-gold)) 68%,transparent);border-radius:50%;background:#0c0e13;box-shadow:0 0 22px rgba(0,0,0,.4)}
.community-ranker-avatar img{width:100%;height:100%;object-fit:contain;background:radial-gradient(circle,rgba(255,100,63,.12),transparent 68%)}
.community-ranker-main{min-width:0}
.community-ranker-main small{color:#8d94a2;font-size:.63rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.community-ranker-main b{display:block;overflow:hidden;color:#f5f0e8;font-size:1.04rem;text-overflow:ellipsis;white-space:nowrap}
.community-ranker-main i{display:block;margin-top:4px;overflow:hidden;color:#d2ad68;font-family:Georgia,serif;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}
.community-ranker-story{color:#aeb4c0;font-size:.78rem;line-height:1.48}
.community-ranker-meta{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap;max-width:245px}
.community-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid rgba(244,211,124,.22);border-radius:999px;background:rgba(244,211,124,.06);color:#e8cc8e;font-size:.65rem;font-weight:900;white-space:nowrap}
.community-chip.active{border-color:rgba(105,220,158,.28);background:rgba(105,220,158,.07);color:#8de9b6}
.community-chip.sleeping{border-color:rgba(164,141,255,.28);background:rgba(164,141,255,.07);color:#c1b3ff}

/* ══ PATENTE NA LINHA DO MURO ═════════════════════════════════════════════════════════════
   Kage saía com a mesma pastilha dourada de "Ativo" e de "Fundador" — três coisas de naturezas
   diferentes com a mesma aparência. Numa lista, isso apaga a hierarquia inteira: quem passa o
   olho não distingue o primeiro lugar do décimo.

   A escala vai de dourado sólido (Kage, um só) até cinza (Genin, qualquer um), e só os três
   primeiros postos ganham fundo cheio — porque só eles são exclusivos de verdade. */
.community-chip.e-patente{font-weight:900;letter-spacing:.04em}

.community-chip.patente-kage{
  border-color:transparent; color:#17130a;
  background:linear-gradient(180deg,#f6dfa8,#d9af52);
  box-shadow:0 4px 16px -6px rgba(217,175,82,.75);
}
.community-chip.patente-sannin{
  border-color:rgba(226,232,240,.5); color:#12151a;
  background:linear-gradient(180deg,#eef2f7,#b9c3cf);
}
.community-chip.patente-anbu{
  border-color:rgba(214,164,116,.5); color:#1b1209;
  background:linear-gradient(180deg,#e6b98a,#bd8552);
}
/* Do quarto em diante cabe gente: contorno, não fundo cheio. */
.community-chip.patente-jounin{border-color:rgba(122,166,255,.4);background:rgba(122,166,255,.09);color:#a9c8ff}
.community-chip.patente-chunin{border-color:rgba(122,214,178,.35);background:rgba(122,214,178,.08);color:#93dcbb}
.community-chip.patente-genin,
.community-chip.patente-aliado{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#98a0ac}

/* ══ SELO NA LINHA ════════════════════════════════════════════════════════════════════════
   Sem isto, a única forma de saber que alguém carrega uma honra exclusiva é abrir o perfil, um
   por um — e ninguém faz isso. A pastilha põe o status na lista, que é onde ele circula. */
.community-chip.e-honra{font-weight:900}
.community-chip.honra-comum{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#a2aab6}
.community-chip.honra-rara{border-color:rgba(122,166,255,.42);background:rgba(122,166,255,.1);color:#b6d0ff}
.community-chip.honra-exclusiva{
  border-color:rgba(233,208,150,.6); color:#f6e6c2;
  background:linear-gradient(180deg, rgba(233,208,150,.22), rgba(217,175,82,.08));
  box-shadow:0 0 14px -4px rgba(217,175,82,.6);
}
.community-ranker-arrow{color:var(--rank-tone,var(--community-gold));font-size:1.35rem}

.community-state{display:grid;place-items:center;min-height:250px;margin-top:17px;padding:28px;border:1px dashed rgba(244,211,124,.24);border-radius:20px;background:rgba(15,17,22,.55);color:#aeb4c0;text-align:center}
.community-state b{display:block;color:#f2ede5;font-size:1.05rem}
.community-state p{max-width:55ch;margin:7px auto 0}
.community-loader{width:46px;height:46px;margin-bottom:14px;border:3px solid rgba(244,211,124,.12);border-top-color:var(--community-gold);border-radius:50%;animation:communitySpin .8s linear infinite}
.is-hidden{display:none!important}

/* Perfil público em dialog compartilhado. */
.ranker-profile-dialog{width:min(960px,calc(100vw - 30px));max-height:calc(100dvh - 26px);padding:0;border:1px solid rgba(244,211,124,.24);border-radius:28px;background:rgba(9,11,15,.72);color:#f4f0e8;box-shadow:0 36px 110px rgba(0,0,0,.66),0 0 55px rgba(244,211,124,.08);overflow:hidden;backdrop-filter:blur(25px)}
.ranker-profile-dialog::backdrop{background:rgba(5,7,10,.68);backdrop-filter:blur(9px)}
.ranker-profile-shell{position:relative;max-height:calc(100dvh - 26px);overflow:auto;background:radial-gradient(circle at 20% 0,rgba(255,100,63,.12),transparent 34%),radial-gradient(circle at 100% 40%,rgba(164,141,255,.09),transparent 34%),linear-gradient(145deg,rgba(22,24,31,.96),rgba(10,12,16,.97))}
.ranker-profile-close{position:sticky;z-index:8;float:right;top:14px;margin:14px 14px -58px 0;width:42px;height:42px;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(11,13,18,.8);color:#fff;font-size:1.4rem;cursor:pointer;backdrop-filter:blur(12px)}
/* Alturas apertadas em 24/08/2026: com a formacao ocupando a largura inteira, o conteudo caiu
   de ~1130px para 946px, e este aperto tira mais 56px — o suficiente para a janela caber sem
   barra de rolagem numa tela de 1080p. O aperto e so em espacamento; nada de conteudo sai. */
.ranker-profile-hero{position:relative;display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:center;min-height:208px;padding:22px 42px 16px;overflow:hidden;border-bottom:1px solid rgba(244,211,124,.14)}
.ranker-profile-hero::after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,rgba(10,12,16,.86));pointer-events:none}
.ranker-profile-art{position:relative;z-index:2;height:196px;display:grid;place-items:end center}
.ranker-profile-art::before{content:"";position:absolute;width:178px;height:178px;border-radius:50%;background:radial-gradient(circle,rgba(244,211,124,.18),rgba(255,100,63,.08) 46%,transparent 72%);filter:blur(8px);animation:communityAura 4s ease-in-out infinite}
.ranker-profile-art img{position:relative;z-index:2;max-width:100%;max-height:206px;object-fit:contain;filter:drop-shadow(0 22px 22px rgba(0,0,0,.58));mask-image:linear-gradient(#000 72%,transparent 98%)}
.ranker-profile-copy{position:relative;z-index:3;min-width:0}
.ranker-profile-copy h2{margin:8px 0 6px;font-size:clamp(2.2rem,5vw,4.3rem);text-transform:uppercase}
.ranker-profile-title{margin:0;color:#d9b772;font-family:Georgia,serif;font-size:.95rem;font-style:italic}
.ranker-profile-bio{max-width:65ch;color:#bdc2cc;line-height:1.7}
.ranker-profile-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.ranker-profile-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr);gap:14px;padding:18px 30px 22px}
.ranker-profile-card{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.025)}
.ranker-profile-card h3{margin-bottom:13px;color:#f3eee6;font-family:inherit;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.ranker-profile-timeline{display:grid;gap:9px}
.ranker-profile-event{position:relative;padding:11px 12px 11px 37px;border-radius:12px;background:rgba(255,255,255,.025);color:#b8bec9;font-size:.78rem}
.ranker-profile-event::before{content:"";position:absolute;left:14px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--community-gold);box-shadow:0 0 13px rgba(244,211,124,.58)}
.ranker-profile-event b{display:block;color:#eee8df}
.ranker-profile-achievements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
/* ══ SELOS ═══════════════════════════════════════════════════════════════════════════════
   Todos os selos tinham exatamente a mesma aparência — o exclusivo do fundador saía igual ao
   mais comum do catálogo. Numa vitrine que existe para dar status, isso anula o próprio motivo
   de ela existir: se ter o raro não parece diferente, ter o raro não vale nada.

   Três faixas, marcadas em JS pelo peso que vem do catálogo. A distância entre elas é
   deliberadamente grande — dois tons de dourado quase iguais não comunicam hierarquia. */

.ranker-achievement{
  position:relative; overflow:hidden;
  padding:13px 13px 12px; border-radius:13px;
  border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025);
  transition:transform .18s ease, border-color .18s ease;
}
.ranker-achievement:hover{transform:translateY(-2px)}
.ranker-achievement-topo{display:flex;align-items:baseline;gap:7px}
.ranker-achievement-marca{font-size:.8rem;line-height:1;flex:none}
.ranker-achievement b{color:#c9cfd9;font-size:.79rem;font-weight:800;letter-spacing:.005em}
.ranker-achievement small{display:block;margin-top:5px;color:#8b929e;font-size:.7rem;line-height:1.45}

/* ── comum ── discreta de propósito: ela é o piso da escala. */
.ranker-achievement.e-comum .ranker-achievement-marca{color:#6f7783}

/* ── rara ── azul, e não um dourado mais fraco: cor DIFERENTE lê como categoria diferente,
   enquanto tom mais claro do mesmo dourado lê como "a mesma coisa, apagada". */
.ranker-achievement.e-rara{
  border-color:rgba(122,166,255,.3);
  background:linear-gradient(160deg, rgba(122,166,255,.1), rgba(122,166,255,.03));
}
.ranker-achievement.e-rara:hover{border-color:rgba(122,166,255,.55)}
.ranker-achievement.e-rara .ranker-achievement-marca{color:#8fb6ff}
.ranker-achievement.e-rara b{color:#cfe0ff}

/* ── exclusiva ── o topo da escala. Borda dourada viva, fundo em gradiente, brilho que
   atravessa o cartão devagar, e um selo escrito no canto. É o único nível que se move: o
   movimento é o que faz o olho ir nele primeiro numa grade de seis. */
.ranker-achievement.e-exclusiva{
  border-color:rgba(233,208,150,.5);
  background:linear-gradient(155deg, rgba(233,208,150,.16), rgba(217,175,82,.05) 55%, rgba(255,255,255,.02));
  box-shadow:0 0 0 1px rgba(233,208,150,.08), 0 8px 26px -12px rgba(217,175,82,.55);
  padding-bottom:26px;
}
.ranker-achievement.e-exclusiva:hover{border-color:rgba(233,208,150,.85)}
.ranker-achievement.e-exclusiva .ranker-achievement-marca{color:#f0d9a0}
.ranker-achievement.e-exclusiva b{color:#f6e6c2}
.ranker-achievement.e-exclusiva small{color:#b9ae96}

.ranker-achievement-brilho{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,240,205,.16) 50%, transparent 62%);
  transform:translateX(-120%);
  animation:selo-brilho 4.5s ease-in-out infinite;
}
@keyframes selo-brilho{
  0%,72%{transform:translateX(-120%)}
  100%{transform:translateX(120%)}
}

.ranker-achievement-selo{
  position:absolute; right:11px; bottom:9px;
  font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; font-weight:900;
  color:#0f0d08; background:linear-gradient(180deg,#f0d9a0,#d9af52);
  padding:3px 7px; border-radius:5px;
}

/* Quem pediu menos movimento não precisa de brilho atravessando cartão. A hierarquia continua
   inteira pela cor e pela borda — o brilho é reforço, nunca a única pista. */
@media (prefers-reduced-motion: reduce){
  .ranker-achievement-brilho{animation:none;opacity:0}
  .ranker-achievement:hover{transform:none}
}

/* ══ TÍTULO EQUIPADO ═════════════════════════════════════════════════════════════════════
   Era uma linha em itálico, menor que a bio — a coisa que a pessoa ESCOLHEU mostrar saía com
   menos peso que o texto que ela escreveu de passagem. Agora é faixa. */
.ranker-profile-titulo{
  display:inline-flex; align-items:center; gap:8px;
  margin:2px 0 0; padding:7px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
}
.ranker-profile-titulo b{font-size:.86rem;font-weight:800;letter-spacing:.005em;color:#d6dae1}
.ranker-profile-titulo-marca{font-size:.78rem;line-height:1}
.ranker-profile-titulo-nota{
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;font-weight:900;
  padding:3px 7px;border-radius:5px;
}
.ranker-profile-titulo.raridade-raro{border-color:rgba(122,166,255,.42);background:rgba(122,166,255,.09)}
.ranker-profile-titulo.raridade-raro b{color:#cfe0ff}
.ranker-profile-titulo.raridade-raro .ranker-profile-titulo-marca{color:#8fb6ff}
.ranker-profile-titulo.raridade-epico{border-color:rgba(176,124,240,.45);background:rgba(176,124,240,.1)}
.ranker-profile-titulo.raridade-epico b{color:#e0c8ff}
.ranker-profile-titulo.raridade-epico .ranker-profile-titulo-marca{color:#c79bff}
.ranker-profile-titulo.raridade-lendario{border-color:rgba(255,163,102,.5);background:rgba(255,163,102,.1)}
.ranker-profile-titulo.raridade-lendario b{color:#ffd9b8}
.ranker-profile-titulo.raridade-lendario .ranker-profile-titulo-marca{color:#ffa366}
.ranker-profile-titulo.raridade-unico{
  border-color:rgba(233,208,150,.65);
  background:linear-gradient(120deg, rgba(233,208,150,.2), rgba(217,175,82,.07));
  box-shadow:0 6px 22px -12px rgba(217,175,82,.8);
}
.ranker-profile-titulo.raridade-unico b{color:#f6e6c2}
.ranker-profile-titulo.raridade-unico .ranker-profile-titulo-marca{color:#f0d9a0}
.ranker-profile-titulo.raridade-unico .ranker-profile-titulo-nota{
  color:#0f0d08;background:linear-gradient(180deg,#f0d9a0,#d9af52);
}
.ranker-profile-socials{display:flex;gap:8px;flex-wrap:wrap}
.ranker-profile-socials a,.ranker-profile-socials span{padding:8px 10px;border:1px solid rgba(105,229,255,.2);border-radius:999px;background:rgba(105,229,255,.05);color:#a9effc;font-size:.72rem;font-weight:850;text-decoration:none}

/* Editor de perfil. */
.profile-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.72fr);gap:22px;align-items:start}
.profile-panel{padding:20px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:linear-gradient(145deg,rgba(26,29,37,.92),rgba(13,15,20,.94));box-shadow:0 22px 55px rgba(0,0,0,.24)}
.profile-panel-head{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:18px}
.profile-panel-head p{max-width:55ch;margin:5px 0 0;color:#999fac;font-size:.8rem}
.profile-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.profile-field-wide{grid-column:1/-1}
.profile-avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.profile-avatar-choice{position:relative;display:grid;place-items:end center;aspect-ratio:1;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:radial-gradient(circle,rgba(255,100,63,.12),transparent 68%),#101218;cursor:pointer;overflow:hidden;transition:.2s ease}
.profile-avatar-choice img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 9px 8px rgba(0,0,0,.45))}
.profile-avatar-choice[aria-pressed="true"]{border-color:var(--community-gold);box-shadow:0 0 0 2px rgba(244,211,124,.1),0 0 24px rgba(244,211,124,.15);translate:0 -2px}
.profile-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.profile-toggle-row:last-child{border-bottom:0}
.profile-toggle-copy b{display:block;color:#eee9e2;font-size:.86rem}
.profile-toggle-copy small{display:block;margin-top:2px;color:#8f96a3;line-height:1.4}
.profile-toggle{position:relative;width:52px;height:30px;flex:0 0 auto;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:#101219;cursor:pointer}
.profile-toggle::after{content:"";position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;background:#747b88;transition:.22s ease}
.profile-toggle[aria-pressed="true"]{border-color:rgba(105,220,158,.4);background:rgba(105,220,158,.1)}
.profile-toggle[aria-pressed="true"]::after{left:26px;background:var(--community-green);box-shadow:0 0 14px rgba(105,220,158,.55)}
.profile-save-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.profile-save-status{color:#9ca3af;font-size:.76rem}
.profile-preview{position:sticky;top:104px;overflow:hidden}
.profile-preview-banner{position:relative;min-height:390px;padding:24px;overflow:hidden;border:1px solid rgba(244,211,124,.2);border-radius:24px;background:radial-gradient(circle at 50% 36%,rgba(255,100,63,.15),transparent 38%),linear-gradient(150deg,#1b1e27,#0b0d12);box-shadow:0 25px 60px rgba(0,0,0,.32)}
.profile-preview-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.05),transparent 65%);animation:communityScan 7s ease-in-out infinite}
.profile-preview-avatar{position:relative;z-index:2;height:210px;display:grid;place-items:end center}
.profile-preview-avatar img{max-width:100%;max-height:230px;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(0,0,0,.55));mask-image:linear-gradient(#000 72%,transparent 99%)}
.profile-preview-copy{position:relative;z-index:3;text-align:center}
.profile-preview-copy small{color:#a6acb7;font-size:.65rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.profile-preview-copy h2{margin:6px 0;color:#f5f0e8;font-size:2.1rem;text-transform:uppercase}
.profile-preview-copy i{display:block;color:#d6b36d;font-family:Georgia,serif;font-size:.82rem}
.profile-preview-meta{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:13px}
.profile-achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.profile-achievement{padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025)}
/* O bloqueado era opacity .45 + grayscale .8, desenhado para uma grade de conquistas em que a
   maioria já estava aberta. Com as honras a proporção normal é o contrário — quase ninguém tem
   selo, e a grade inteira ficava cinza-apagada, lendo como painel quebrado em vez de convite.
   Agora o não-conquistado fica legível e apenas discreto (contorno tracejado = "ainda não"), e
   quem carrega o destaque é o conquistado. */
.profile-achievement.is-locked{opacity:.78;border-style:dashed}
.profile-achievement.is-locked b{color:#8f97a4}
.profile-achievement:not(.is-locked){
  border-color:rgba(217,175,82,.38); background:rgba(217,175,82,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.profile-achievement b{display:block;color:#e9d096;font-size:.8rem}
.profile-achievement p{margin:4px 0 0;color:#939aa7;font-size:.7rem;line-height:1.45}
.profile-demo-notice{padding:13px 15px;border:1px solid rgba(105,229,255,.22);border-radius:14px;background:rgba(105,229,255,.055);color:#b7eaf4;font-size:.78rem;line-height:1.55}

@keyframes communityPulse{50%{opacity:.45;box-shadow:0 0 4px currentColor}}
@keyframes communityCrown{50%{translate:-50% -7px;rotate:2deg}}
@keyframes communityAura{50%{scale:1.08;opacity:.72}}
@keyframes communitySpin{to{rotate:360deg}}
@keyframes communityScan{0%,25%{translate:-120% 0}70%,100%{translate:120% 0}}

@media(max-width:980px){
  .community-hero-grid,.profile-layout{grid-template-columns:1fr}
  .community-hero-grid{padding-block:42px}
  .community-hero-podium{min-height:285px}
  .community-stat-grid{grid-template-columns:repeat(2,1fr);margin-top:20px}
  .community-filter-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .community-ranker{grid-template-columns:50px 70px minmax(0,1fr) auto}
  .community-ranker-story{display:none}
  .community-ranker-avatar{width:66px;height:66px}
  .profile-preview{position:relative;top:auto}
  .ranker-profile-grid{grid-template-columns:1fr}
}

@media(max-width:680px){
  .community-shell{width:min(100% - 22px,1320px)}
  .community-hero-grid{grid-template-columns:1fr;gap:18px;min-height:auto;padding-block:35px}
  .community-hero h1{font-size:clamp(2.7rem,14vw,4.4rem)}
  .community-hero-podium{min-height:235px;padding-inline:8px}
  .community-podium-avatar{width:62px;height:62px}.community-podium-person[data-position="1"] .community-podium-avatar{width:80px;height:80px}
  .community-podium-name{font-size:.65rem}.community-podium-rank{height:36px;font-size:.8rem}.community-podium-person[data-position="1"] .community-podium-rank{height:49px}
  .community-podium-crown{top:-33px;font-size:1.7rem}
  .community-stat-grid,.community-filter-panel,.profile-form-grid{grid-template-columns:1fr}
  .community-section-head{align-items:start;flex-direction:column}
  .community-ranker{grid-template-columns:38px 56px minmax(0,1fr);gap:9px;min-height:88px;padding:10px}
  .community-ranker-position{width:34px;height:34px}.community-ranker-avatar{width:54px;height:54px}
  .community-ranker-meta,.community-ranker-arrow{display:none}
  .community-ranker-main i{font-size:.69rem}
  .ranker-profile-hero{grid-template-columns:1fr;gap:6px;padding:28px 20px 20px;text-align:center}
  .ranker-profile-art{height:190px}.ranker-profile-art img{max-height:205px}
  .ranker-profile-chips{justify-content:center}
  .ranker-profile-grid{padding:18px 14px 26px}
  .ranker-profile-achievements{grid-template-columns:1fr}
  .profile-avatar-grid{grid-template-columns:repeat(3,1fr)}
  .profile-achievement-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .community-mode-chip::before,.community-podium-crown,.ranker-profile-art::before,.profile-preview-banner::before,.community-loader{animation:none!important}
  .community-button,.community-ranker,.profile-avatar-choice{transition:none!important}
}

/* Aviso de sessão persistente — auditoria 08 (P1-01, item 2).
   A sessão passou a sobreviver ao fechamento do navegador; quem usa computador compartilhado
   precisa saber disso na hora, não descobrir depois.

   Mora aqui, e não em codex-community.css: perfil.html carrega app.css, codex-sitewide.css e
   community-profile.css — o outro arquivo serve apoio.html e comunidade.html. Escrita no arquivo
   errado, a regra existia e nunca alcançava a página: o texto aparecia sem nenhum destaque. */
.profile-aviso-dispositivo {
  margin: .9rem 0 0;
  padding: .7rem .9rem;
  border-left: 3px solid rgba(255, 200, 110, .55);
  background: rgba(255, 200, 110, .07);
  border-radius: 0 8px 8px 0;
  font-size: .88rem;
  line-height: 1.5;
  opacity: .92;
  max-width: 46ch;
}
.profile-aviso-dispositivo b { color: rgba(255, 214, 140, .95) }

/* ── Painel "Seu apoio" (20/08/2026) ──────────────────────────────────────────────────────────
   Créditos e total apoiado existiam no banco desde a migration 0004 e nunca chegavam à tela. Quem
   pagou via só a Patente aparecer — sem saber quanto acumulou nem quanto falta para o degrau
   seguinte. Sensação de progresso é metade do motivo de alguém apoiar de novo. */
.perfil-apoio-numeros {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.perfil-apoio-numero {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 15px; border-radius: 13px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .09);
}
.perfil-apoio-numero b { font-size: 1.3rem; line-height: 1.1; color: var(--gold2); font-variant-numeric: tabular-nums; }
.perfil-apoio-numero small { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #7f8794; font-weight: 700; }
.perfil-apoio-numero i { font-style: normal; font-size: .68rem; color: #6d747f; }

/* A escada inteira à vista: ver os degraus acima do seu é o que dá vontade de subir. */
.perfil-apoio-degraus {
  display: flex; gap: 6px; flex-wrap: wrap; list-style: none;
  margin: 0 0 12px; padding: 0;
}
.perfil-apoio-degraus li {
  flex: 1 1 88px; padding: 9px 10px; border-radius: 11px; text-align: center;
  background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .08); opacity: .55;
}
.perfil-apoio-degraus b { display: block; font-size: .8rem; color: #c4cbd6; }
.perfil-apoio-degraus small { font-size: .66rem; color: #7f8794; font-variant-numeric: tabular-nums; }
.perfil-apoio-degraus .ja-alcancado { opacity: 1; border-color: rgba(217, 175, 82, .3); background: rgba(217, 175, 82, .06); }
.perfil-apoio-degraus .ja-alcancado b { color: var(--gold2); }
/* O degrau atual é o único com preenchimento cheio: é onde o olho tem de parar. */
.perfil-apoio-degraus .e-o-seu {
  opacity: 1; border-color: transparent;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
}
.perfil-apoio-degraus .e-o-seu b, .perfil-apoio-degraus .e-o-seu small { color: #16130c; }
.perfil-apoio-falta { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.perfil-apoio-falta b { color: var(--paper); }

/* As regras abaixo vieram de codex-community.css em 20/08/2026. Motivo: ranking.html não
   carrega aquela folha — só app.css, codex-sitewide.css e esta. O CSS estava correto e
   simplesmente nunca chegava à página, o que é o tipo de falha que não dá erro nenhum:
   o texto avisava "demonstração" enquanto os números seguiam nítidos e clicáveis. */
/* ── Ranking em breve (20/08/2026) ────────────────────────────────────────────────────────────
   A disputa ainda não começou. A página fica visível e ATENUADA, em vez de escondida: esconder
   cria expectativa às cegas, e mostrar como se valesse cria expectativa errada. Assim dá para
   entender o formato sem tomar nada como definitivo. */
.ranking-em-breve { padding: 26px 0 6px; }
.ranking-em-breve-caixa {
  padding: 22px 24px 24px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(91, 157, 255, .1), rgba(255, 255, 255, .02) 60%);
  border: 1px solid rgba(91, 157, 255, .32);
}
.ranking-em-breve-selo {
  display: inline-block; margin-bottom: 10px; padding: 5px 13px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #bcd8ff; background: rgba(91, 157, 255, .16); border: 1px solid rgba(91, 157, 255, .4);
}
.ranking-em-breve h2 { margin: 0 0 10px; font-size: clamp(1.3rem, 3vw, 1.8rem); }
.ranking-em-breve p { margin: 0 0 12px; max-width: 66ch; color: var(--muted); line-height: 1.65; font-size: .9rem; }
.ranking-em-breve p b { color: var(--paper); }
.ranking-em-breve-regras { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 7px; }
.ranking-em-breve-regras li { color: var(--muted); font-size: .86rem; line-height: 1.55; }
.ranking-em-breve-regras b { color: var(--gold2); }
.ranking-em-breve-agora { margin: 0; font-size: .88rem; }
.ranking-em-breve-agora a { color: var(--gold2); }

/* O aviso inteiro some quando chega apoio de verdade. Ele diz "Ninguém apoiou ainda" e "os
   três lugares do pódio estão abertos" — verdade no dia em que foi escrito, mentira a partir do
   primeiro Pix. ranking.js liga e desliga `esta-em-breve` conforme o dado que chegou, e esta
   regra faz o texto seguir junto, em vez de depender de alguém lembrar de apagá-lo. */
body:not(.esta-em-breve) .ranking-em-breve { display: none; }

/* O ranking em si fica apagado e sem interação. Não basta o texto avisar: enquanto os números
   estiverem nítidos e clicáveis, alguém vai tomá-los como reais — e depois cobrar. */
/* Os seletores vêm do HTML real desta página, conferidos no navegador: o pódio é
   `#ranking-podium` (div.community-hero-podium) e o resto são as `section.community-shell` que
   vêm depois do aviso. Chutar nome de classe deixaria os números nítidos e clicáveis com o texto
   dizendo que são demonstração — o pior dos dois mundos. */
body.esta-em-breve main > section.community-hero,
body.esta-em-breve main > section.community-shell,
body.esta-em-breve #ranking-podium {
  opacity: .38;
  filter: saturate(.35);
  pointer-events: none;
  user-select: none;
}
/* A faixa "demonstração" atravessa o bloco: quem chega pelo meio da página, rolando, não leu o
   aviso lá em cima. */
body.esta-em-breve #ranking-podium { position: relative; }
body.esta-em-breve #ranking-podium::after {
  content: 'dados de demonstração';
  position: absolute; inset: auto 0 8px 0; text-align: center;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 800;
  color: rgba(255, 255, 255, .55);
}
@media (prefers-reduced-motion: reduce) { body.esta-em-breve * { animation: none !important; } }

/* Escada de títulos: o lado que NÃO se perde. A raridade muda a cor da borda — o degrau lendário
   precisa parecer diferente do comum, senão a progressão não significa nada. */
.perfil-apoio-subtitulo {
  margin: 18px 0 9px; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: #7f8794; font-weight: 700;
}
.perfil-apoio-titulos li { flex: 1 1 118px; }
.perfil-apoio-titulos .raridade-raro.ja-alcancado { border-color: rgba(91, 157, 255, .45); background: rgba(91, 157, 255, .08); }
.perfil-apoio-titulos .raridade-raro.ja-alcancado b { color: #bcd8ff; }
.perfil-apoio-titulos .raridade-epico.ja-alcancado { border-color: rgba(159, 84, 223, .5); background: rgba(159, 84, 223, .1); }
.perfil-apoio-titulos .raridade-epico.ja-alcancado b { color: #d9b3ff; }
.perfil-apoio-titulos .raridade-lendario.ja-alcancado {
  border-color: rgba(224, 86, 31, .55);
  background: linear-gradient(135deg, rgba(224, 86, 31, .16), rgba(217, 175, 82, .1));
}
.perfil-apoio-titulos .raridade-lendario.ja-alcancado b { color: #ffb45c; }

/* ── Meu elenco (21/08/2026) ──────────────────────────────────────────────────────────────────
   "Ter" é fácil no jogo; o difícil é subir a estrela. Por isso a grade nasce toda apagada e o
   clique cicla a estrela — marcar quinze ninjas leva menos de um minuto, e quem não for marcado
   conta como não investido, que é o padrão honesto. */
.elenco-main { padding-bottom: 60px; }
.elenco-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.elenco-topo h1 { margin: 5px 0 8px; }
.elenco-topo .lead { margin: 0; max-width: 60ch; }
.elenco-resumo { display: flex; gap: 18px; flex-wrap: wrap; }
.elenco-resumo span { display: flex; flex-direction: column; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #7f8794; }
.elenco-resumo b { font-size: 1.5rem; color: var(--gold2); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }

/* O aviso de que nada é bloqueado fica em destaque: o dono foi explícito que o público monta
   formação com quem ainda NÃO tem, para decidir se vale investir quando o banner chegar. */
.elenco-nota {
  margin: 0 0 22px; padding: 13px 16px; border-radius: 13px;
  font-size: .85rem; line-height: 1.6; color: var(--muted);
  background: rgba(91, 157, 255, .07); border: 1px solid rgba(91, 157, 255, .3);
}
.elenco-nota b { color: var(--paper); }

.elenco-bloco { margin-bottom: 24px; padding: 18px 20px 20px; border-radius: 16px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); }
.elenco-bloco-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.elenco-bloco-topo h2 { margin: 0 0 4px; font-size: 1.08rem; }
.elenco-bloco-topo p { margin: 0; font-size: .82rem; color: var(--muted); }
.elenco-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.elenco-so-meus, .elenco-chave { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--muted); cursor: pointer; }
.elenco-so-meus input, .elenco-chave input { width: 16px; height: 16px; accent-color: var(--gold); }

/* ── A formação ─────────────────────────────────────────────────────────────────────────── */
.elenco-time { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 620px) { .elenco-time { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.elenco-casa {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  padding: 0; font: inherit; text-align: center; aspect-ratio: 3 / 4;
  border-radius: 12px; background: var(--panel2); border: 1px solid rgba(255, 255, 255, .1);
  transition: border-color .14s ease, transform .14s ease;
}
.elenco-casa:hover { border-color: rgba(217, 175, 82, .5); transform: translateY(-2px); }
.elenco-casa img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; }
.elenco-casa b { padding: 4px 3px 0; font-size: .6rem; line-height: 1.15; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elenco-casa i { padding: 0 3px 4px; font-style: normal; font-size: .58rem; color: var(--gold2); }
.elenco-casa.esta-vazia {
  display: grid; place-items: center; cursor: default;
  background: rgba(0, 0, 0, .2); border-style: dashed; color: #4a515b;
}
.elenco-casa.esta-vazia:hover { transform: none; border-color: rgba(255, 255, 255, .1); }
.elenco-casa.esta-vazia span { font-size: 1.4rem; font-weight: 800; }

/* ── A grade ────────────────────────────────────────────────────────────────────────────── */
.elenco-grade { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); max-height: 560px; overflow-y: auto; padding: 4px; }
.elenco-peca-caixa { position: relative; }
.elenco-peca {
  display: flex; flex-direction: column; width: 100%; overflow: hidden; cursor: pointer;
  padding: 0; font: inherit; text-align: center;
  border-radius: 11px; background: var(--panel2); border: 1px solid rgba(255, 255, 255, .09);
  opacity: .42; filter: saturate(.4);
  transition: opacity .14s ease, filter .14s ease, border-color .14s ease;
}
/* Quem já foi investido acende. É essa diferença que faz a grade ser lida de relance. */
.elenco-peca.e-meu { opacity: 1; filter: none; border-color: rgba(217, 175, 82, .4); }
.elenco-peca:hover { opacity: .85; }
.elenco-peca.e-meu:hover { opacity: 1; border-color: var(--gold); }
.elenco-peca img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #0b0c0f; }
.elenco-peca-nome { padding: 4px 3px 0; font-size: .58rem; line-height: 1.15; color: var(--paper); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.1em; }
.elenco-peca-estrelas { padding: 1px 3px 4px; font-size: .6rem; color: var(--gold2); letter-spacing: -1px; }
.elenco-peca-caixa.no-time .elenco-peca { border-color: rgba(103, 212, 155, .55); }

.elenco-add {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; z-index: 2;
  display: grid; place-items: center; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 1rem; line-height: 1; font-weight: 700;
  color: #16130c; background: rgba(217, 175, 82, .92); border: 1px solid rgba(0, 0, 0, .3);
}
.elenco-add:hover { background: var(--gold2); }
.elenco-add.esta-dentro { background: rgba(103, 212, 155, .92); }

.elenco-vazio { grid-column: 1 / -1; margin: 0; padding: 20px; text-align: center; color: #7f8794; font-size: .85rem; }

.elenco-salvar-linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.elenco-status { font-size: .82rem; color: #7f8794; line-height: 1.5; }
.elenco-status.esta-sujo { color: var(--warn); }
.elenco-status.esta-salvo { color: var(--good); }
.elenco-status.esta-ruim { color: #ff9b9b; }

@media (prefers-reduced-motion: reduce) {
  .elenco-peca, .elenco-casa { transition: none; }
  .elenco-casa:hover { transform: none; }
}

/* ── O estado do interruptor, em palavra (21/08/2026) ──────────────────────────────────────────
   Escrito pelo JS em setToggle, que é quem sabe o estado de verdade. Fica ANTES do botão para a
   leitura sair na ordem natural: o que a linha faz, se está ligado, e o controle. */
.profile-toggle-estado{
  flex:0 0 auto; min-width:8ch; text-align:right;
  font-size:.74rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:#7f8794; transition:color .18s ease;
}
.profile-toggle-estado.esta-ligado{ color:var(--community-green, #69dc9e) }
/* Desabilitado (ranking sem perfil publicado): o conjunto todo esmaece junto, para não parecer
   que o botão está só desligado quando na verdade ele nem responde. */
.profile-toggle:disabled{ opacity:.45; cursor:not-allowed }
.profile-toggle:disabled + .profile-toggle-estado,
.profile-toggle-row:has(.profile-toggle:disabled) .profile-toggle-estado{ opacity:.5 }

/* Este bloco mora aqui, e não em codex-community.css, por um motivo simples que já custou
   tempo antes: ranking.html carrega app, codex-sitewide e community-profile — e mais nada.
   CSS escrito na folha errada não dá erro nenhum; a regra só não existe. */
/* ── Pódio vago (21/08/2026) ──────────────────────────────────────────────────────────────────
   Com o Muro vazio, o pódio sumia e sobrava um buraco entre o título e o resumo. Três lugares
   nomeados contam a regra — existem três postos, e estão abertos — sem uma linha de texto a mais. */
.ranking-podio-vago{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  min-height:150px; padding:18px 14px; border-radius:18px; text-align:center;
  border:1px dashed rgba(217,175,82,.26); background:rgba(217,175,82,.03);
}
.ranking-podio-vago[data-posicao="1"]{
  min-height:184px; border-color:rgba(217,175,82,.5); background:rgba(217,175,82,.06);
}
.ranking-podio-vago-numero{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-size:.82rem; font-weight:900; color:var(--gold2);
  border:1px solid rgba(217,175,82,.4); background:rgba(0,0,0,.25);
}
.ranking-podio-vago b{ font-size:1rem; color:var(--gold2); letter-spacing:.02em }
.ranking-podio-vago small{ font-size:.72rem; color:#7f8794; letter-spacing:.06em; text-transform:uppercase }

/* ── Selos no pódio (21/08/2026) ──────────────────────────────────────────────────────────────
   O pódio real mostrava menos que os cartões de exemplo que existiam no site: faltava o título
   equipado e as honras. São justamente as duas coisas que mostram que o Muro não é só de quem
   pagou — honra vem de trabalho, e aparece do lado de quem é Kage. */
.community-podium-title{
  display:block; margin-top:5px; font-family:Georgia,serif; font-size:.8rem; color:#d6b36d;
  font-style:italic; line-height:1.4;
}
.community-podium-selos{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:9px }
.community-selo{
  padding:4px 9px; border-radius:999px; font-size:.66rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
}
.community-selo.e-fundador{ color:#f0cf83; background:rgba(217,175,82,.14); border:1px solid rgba(217,175,82,.45) }
.community-selo.e-honra{ color:#9fe3c0; background:rgba(105,220,158,.1); border:1px solid rgba(105,220,158,.32) }

/* ── O código do perfil (21/08/2026) ──────────────────────────────────────────────────────────
   Identifica a pessoa quando o apelido é ambíguo — dois servidores podem ter o mesmo. Vivia só
   na página de apoio, e o perfil é onde ela vem procurar quando alguém pede. */
.profile-codigo{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:8px 0 0; font-size:.78rem; color:#7f8794;
}
.profile-codigo b{ font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--gold2); font-size:.82rem }
.profile-codigo-copiar{
  padding:3px 9px; border-radius:8px; cursor:pointer; font-size:.72rem;
  color:var(--muted); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
}
.profile-codigo-copiar:hover{ color:var(--paper); border-color:rgba(217,175,82,.4) }

/* As regras abaixo vieram de codex-community.css em 22/08/2026. O painel de perfil roda em DUAS
   paginas -- ranking.html e comunidade.html -- e so a segunda carrega aquela folha. Na primeira,
   a formacao saia sem grade nenhuma: seis imagens empilhadas em coluna. Estilo de componente
   mora na folha do componente, nao na da pagina onde ele foi usado primeiro. */
/* ── A formacao dentro da janela de perfil ────────────────────────────────────────────────── */
/* ── Três colunas, e não seis (24/08/2026) ────────────────────────────────────────────────
   Com seis, cada peça ficava com 67px: o sprite virava borrão e o nome não dava para ler. Em
   três, a peça dobra e a formação continua cabendo — 3+3 é inclusive como o jogo desenha o
   campo, frente e retaguarda. */
/* A seção atravessa as duas colunas da grade: é isso que permite uma fileira só. */
.ranker-time-secao { grid-column: 1 / -1; }
/* Seis colunas de novo — mas agora dividindo 943px em vez de 497, então cada peça fica MAIOR
   que na versão de três colunas, e o bloco tem metade da altura. */
.ranker-profile-time { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 9px; }
/* ── A formação como formação, e não como galeria de fotos (23/08/2026) ────────────────────
   Com o sprite de corpo inteiro, a peça passa a ser um lugar onde alguém está DE PÉ — então ela
   ganha chão e o número da casa, que é a mesma leitura do campo do Simulador.

   A cor é o dourado do site, e não a do elemento: esta janela roda também em ranking.html, onde
   LAB_DATA não é carregado e o elemento do ninja simplesmente não existe ali. Cor por elemento
   funcionaria numa página e falharia na outra. */
.ranker-time-peca {
  /* 4/5 e nao 3/4: a peca perde 12px de altura e a janela deixa de passar do limite em telas de
     880px, que e onde a barra de rolagem aparecia. A figura nao encolhe — ela e alinhada pelo pe
     e o que sai e o vazio acima da cabeca. */
  margin: 0; position: relative; overflow: hidden; aspect-ratio: 4/5;
  border-radius: 11px; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(24,28,36,.92), rgba(11,13,18,.96));
  transition: border-color .16s, transform .16s;
}
.ranker-time-peca:hover { border-color: rgba(217,175,82,.5); transform: translateY(-2px); }
.ranker-time-casa {
  position: absolute; z-index: 3; top: 5px; left: 5px;
  min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center;
  border-radius: 6px; font-size: .64rem; font-weight: 900; line-height: 1;
  color: #f0d089; background: rgba(8,10,14,.85); border: 1px solid rgba(217,175,82,.45);
}
/* O chão fica ATRÁS da figura e na altura do pé dela. Sem ele o sprite parece flutuar. */
.ranker-time-chao {
  position: absolute; z-index: 1; left: 17%; right: 17%; bottom: 19%; height: 13px;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(217,175,82,.5), transparent 68%);
  filter: blur(1px);
}
/* A névoa de chakra, na frente da figura — o mesmo tratamento do campo do Simulador, aplicado
   em 25/08/2026. O corte do pé vem do arquivo do jogo (48 dos 115 `showpic` param na canela), e a
   luz na frente dissolve a borda reta em vez de deixá-la desenhada por cima do brilho. O
   comentário longo com a apuração está em cycle7.css.

   A imagem tem `padding-bottom:26px`, então o pé da figura fica a 26px do fundo da peça: a faixa
   vai de 14px a 48px, cobrindo essa linha com folga dos dois lados. Fica ABAIXO da legenda
   (z-index 3), que continua legível. */
.ranker-time-peca::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: 8%; right: 8%; bottom: 14px; height: 34px;
  background: linear-gradient(to top, rgba(217,175,82,.6) 0%, rgba(217,175,82,.28) 42%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 62% 100% at 50% 100%, #000 40%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 100% at 50% 100%, #000 40%, transparent 78%);
  filter: blur(4px);
}
@media (prefers-reduced-motion: reduce) { .ranker-time-peca { transition: none } }
/* ── Por que `contain`, e não `cover` (23/08/2026) ──────────────────────────────────────
   A peça passou a mostrar o SPRITE de corpo inteiro, que tem proporção mediana 0,45 — bem mais
   alto que largo. Numa caixa 3/4 com `cover`, ele escalava pela largura e era cortado na
   vertical: aparecia uma fatia do tronco, sem cabeça e sem pé.

   `contain` alinhado embaixo mostra a figura inteira, de pé, e continua servindo para quem
   ainda cai no `art` — ilustração larga não é cortada, só fica menor dentro da caixa. */
/* Moldura e fundo saíram daqui para a PEÇA: com o chão desenhado atrás, a imagem precisa ser
   transparente por cima dele — borda na imagem cortaria o desenho ao meio. O respiro embaixo
   deixa o pé pousado no chão em vez de encostado na borda. */
.ranker-time-peca img {
  position: relative; z-index: 2; display: block;
  /* Mesma regra do campo: a ALTURA manda e a largura segue, com teto para o sprite largo
     (Konan, proporção 1,34) não encolher até sumir. */
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: auto; max-width: 145%; height: 100%;
  object-fit: contain; object-position: center bottom;
  padding: 10px 4px 26px; background: none; border: 0;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.6));
}
/* A legenda vira faixa sólida no pé da peça, como a placa de nome do campo — em vez de texto
   solto embaixo do cartão, que separava a figura do nome dela. */
.ranker-time-peca figcaption {
  position: absolute; z-index: 3; inset: auto 0 0; margin: 0; padding: 4px 5px;
  background: linear-gradient(transparent, rgba(6,8,10,.95) 42%);
  text-align: center; font-size: .68rem; line-height: 1.3; color: #dfe4ec; font-weight: 700;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ranker-time-topo { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ranker-time-topo h3 { margin: 0; }
.ranker-time-abrir { display: inline-block; margin-top: 0; font-size: .82rem; color: #e9d096; }
@media (max-width: 640px) { .ranker-profile-time { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ── Escolher quais honras vão para o Muro (23/08/2026) ────────────────────────────────────
   O botão só existe nas cartas que a pessoa CONQUISTOU — oferecer a escolha num selo bloqueado
   seria oferecer o que ela não pode fazer. Marcado usa o mesmo dourado dos selos raros, para a
   tela dizer "isto está na vitrine" sem precisar de legenda. */
.perfil-honra-destaque{margin-top:10px;width:100%;padding:7px 10px;border-radius:9px;cursor:pointer;
  font:inherit;font-size:.7rem;font-weight:800;letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#c4cbd6;
  transition:border-color .15s,background .15s,color .15s}
.perfil-honra-destaque:hover{border-color:rgba(240,208,137,.6);color:#f0d089}
.perfil-honra-destaque:focus-visible{outline:2px solid #f0d089;outline-offset:2px}
.perfil-honra-destaque.e-marcada{border-color:transparent;color:#17130a;
  background:linear-gradient(180deg,#f0d089,#d9af52)}
/* Cheio: continua clicável e continua dizendo o que fazer. Botão morto sem explicação faz a
   pessoa clicar três vezes e desistir. */
.perfil-honra-destaque.e-cheio{opacity:.5}
.perfil-honras-aviso{margin:0 0 12px;font-size:.78rem;color:#8b93a1}
@media (prefers-reduced-motion:reduce){.perfil-honra-destaque{transition:none}}