/* /loja/loja.css -- Loja WPG + Recompensas (mockup aprovado 19/10/2026: docs/mockups/comunidade/loja-recompensas.html).
   Cores próprias (--lj-*): o --or do site muda de cor em algumas áreas. Letra mínima 15px (regra 18); cenário e cortes (regra 11);
   a onda de luz é o span.rk-onda de public/artes/feixe-onda.css (regra 20); cartões alinhados por subgrid (regra 25). */
.lj{--lj-950:#090c13;--lj-900:#0c0f16;--lj-850:#0f131c;--lj-800:#141a25;--lj-line:#29313d;--lj-line-hi:#3a4759;
  --lj-hi:#f0f3f7;--lj-mid:#a7b0bd;--lj-low:#7d8898;--lj-or:#ff7a2f;--lj-or-300:#ffb082;--lj-or-wash:rgba(255,122,47,.10);--lj-or-line:rgba(255,122,47,.38);
  --lj-ouro:#e3b341;--lj-ouro-wash:rgba(227,179,65,.12);--lj-ciano:#20d3e0;--lj-ok:#38d6a0;--lj-ok-wash:rgba(56,214,160,.12);
  --lj-simples:#8fb3d9;--lj-raro:#e3b341;--lj-excl:#20d3e0;
  --lj-display:'Archivo','Inter',system-ui,sans-serif;--lj-mono:'IBM Plex Mono',ui-monospace,monospace;
  display:grid;gap:18px;color:var(--lj-hi);font-size:15px;line-height:1.5}
.lj [hidden]{display:none!important}
.lj button{font:inherit;color:inherit}
.lj button:focus-visible,.lj summary:focus-visible{outline:2px solid var(--lj-or);outline-offset:2px}
.lj-etiq{font:600 15px var(--lj-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lj-or)}
.lj-chip{font:600 15px var(--lj-mono);border:1px solid var(--lj-line-hi);color:var(--lj-mid);border-radius:999px;padding:2px 10px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.lj-chip.simples{border-color:color-mix(in srgb,var(--lj-simples) 55%,transparent);color:var(--lj-simples)}
.lj-chip.raro{border-color:color-mix(in srgb,var(--lj-raro) 55%,transparent);color:var(--lj-raro)}
.lj-chip.exclusivo{border-color:color-mix(in srgb,var(--lj-excl) 55%,transparent);color:var(--lj-excl)}
.lj-btn{border:1px solid var(--lj-line-hi);background:var(--lj-800);border-radius:10px;padding:9px 14px;font-weight:700;cursor:pointer;text-align:center;font-size:15px}
.lj-btn.lj-pri{background:var(--lj-or);border-color:var(--lj-or);color:#1a0b02}
.lj-btn.lj-ouro{background:var(--lj-ouro);border-color:var(--lj-ouro);color:#1d1503}
.lj-btn.lj-ok{background:var(--lj-ok-wash);border-color:rgba(56,214,160,.5);color:var(--lj-ok)}
.lj-btn:disabled{opacity:.55;cursor:not-allowed}
.lj-ajuda{width:28px;height:28px;border-radius:50%;border:1px solid var(--lj-line-hi);background:var(--lj-800);color:var(--lj-mid);font:700 15px var(--lj-mono);cursor:pointer;display:inline-grid;place-items:center;flex:none;vertical-align:middle}
.lj-aviso{margin:0;border:1px dashed var(--lj-line-hi);border-radius:12px;padding:12px 16px;color:var(--lj-mid)}

/* blocos: faixa no topo, cortes diagonais, onda (span.rk-onda) */
.lj-bloco{position:relative;overflow:hidden;isolation:isolate;background:var(--lj-850);border:1px solid var(--lj-line);border-radius:16px;padding:18px;min-width:0}
.lj-bloco::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--lj-faixa,var(--lj-or));z-index:2}
.lj-cortes{position:absolute;right:-30px;top:0;bottom:0;width:180px;z-index:-1;pointer-events:none;overflow:hidden}
.lj-cortes i{position:absolute;top:-20%;bottom:-20%;width:2px;background:var(--lj-sub,var(--lj-or));opacity:.28;transform:rotate(24deg)}
.lj-cortes i:nth-child(1){right:40px}.lj-cortes i:nth-child(2){right:70px;opacity:.18}.lj-cortes i:nth-child(3){right:96px;opacity:.12}
.lj-sub::before{inset:0 auto 0 0;width:3px;height:auto;background:linear-gradient(180deg,var(--lj-sub,var(--lj-ouro)),transparent)}

.lj-cab{min-height:220px;display:grid;align-content:end;gap:10px;--lj-faixa:linear-gradient(90deg,#ff7a2f,#e3b341,#20d3e0)}
.lj-fundo{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.lj-cab::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,19,28,.96) 0%,rgba(15,19,28,.82) 46%,rgba(15,19,28,.25) 100%)}
.lj-cab h1{margin:0;font:900 clamp(30px,5vw,44px)/1 var(--lj-display);text-wrap:balance}
.lj-apoio{display:block;color:var(--lj-mid);max-width:62ch;margin:0}
.lj-linha{display:flex;gap:8px;flex-wrap:wrap}
.lj-lanterna{transform-box:fill-box;transform-origin:50% 0;animation:lj-balanca 5s ease-in-out infinite}
.lj-lanterna:nth-of-type(2n){animation-duration:6.5s;animation-delay:-2s}
@keyframes lj-balanca{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.lj-faisca{animation:lj-sobe 7s linear infinite;opacity:0}
@keyframes lj-sobe{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-150px);opacity:0}}

/* Seu nível */
.lj-nivel{--lj-faixa:linear-gradient(90deg,#20d3e0,#e3b341);display:grid;gap:16px}
.lj-nivel-topo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
.lj-selo-nivel{width:76px;height:76px;border-radius:18px;display:grid;place-items:center;align-content:center;background:radial-gradient(circle at 30% 25%,rgba(227,179,65,.35),transparent 60%),var(--lj-800);border:1px solid color-mix(in srgb,var(--lj-ouro) 50%,transparent)}
.lj-selo-nivel b{font:900 32px/1 var(--lj-display);color:var(--lj-ouro);font-variant-numeric:tabular-nums}
.lj-selo-nivel span{font:600 15px var(--lj-mono);color:var(--lj-mid)}
.lj-nivel h2,.lj-titulo h2,.lj-previa h2{margin:0;font:800 21px var(--lj-display)}
.lj-xp{display:grid;gap:6px;min-width:0}
.lj-xp-barra{height:12px;border-radius:999px;background:var(--lj-800);border:1px solid var(--lj-line);overflow:hidden}
.lj-xp-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,#20d3e0,#e3b341);border-radius:inherit}
.lj-xp-num{display:flex;justify-content:space-between;gap:10px;color:var(--lj-mid);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.lj-giro{display:grid;gap:4px;justify-items:end;text-align:right}
.lj-giro .lj-btn{min-width:170px}
.lj-giro-res{font:800 18px var(--lj-display);color:var(--lj-ouro);font-variant-numeric:tabular-nums;min-height:27px}
.lj-trilha{display:grid;grid-template-columns:repeat(var(--lj-n,5),minmax(0,1fr));gap:10px;position:relative}
.lj-trilha::before{content:"";position:absolute;left:8%;right:8%;top:22px;height:3px;background:var(--lj-line);z-index:0}
.lj-degrau{display:grid;grid-template-rows:subgrid;grid-row:span 4;gap:6px;justify-items:center;text-align:center;position:relative;z-index:1}
.lj-bola{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:800 17px var(--lj-display);background:var(--lj-800);border:2px solid var(--lj-line-hi);color:var(--lj-mid);font-variant-numeric:tabular-nums}
.lj-degrau.feito .lj-bola{border-color:var(--lj-ok);color:var(--lj-ok);background:var(--lj-ok-wash)}
.lj-degrau.prox .lj-bola{border-color:var(--lj-ouro);color:var(--lj-ouro);box-shadow:0 0 0 4px var(--lj-ouro-wash)}
.lj-mini{width:56px;height:56px;display:grid;place-items:center;position:relative;border-radius:10px;overflow:visible}
.lj-mini .lj-av{--tam:42px}
.lj-mini .lj-nome-cor{font-size:18px}
.lj-mini .lj-placa{padding:3px 8px}
.lj-mini .lj-efeito{border-radius:10px;overflow:hidden;background-color:var(--lj-900)}
.lj-degrau .lj-nome{font-weight:600;line-height:1.3}
.lj-degrau .lj-est{color:var(--lj-low)}
.lj-degrau.feito .lj-est{color:var(--lj-ok)}
.lj-degrau.prox .lj-est{color:var(--lj-ouro)}

/* Loja + prévia */
.lj-grade{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.lj-loja{--lj-faixa:linear-gradient(90deg,#ff7a2f,#e3b341);display:grid;gap:14px}
.lj-titulo{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lj-abas{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.lj-abas button{flex:none;background:var(--lj-800);border:1px solid var(--lj-line-hi);border-radius:10px;padding:8px 13px;cursor:pointer;color:var(--lj-mid);font-weight:600;font-size:15px}
.lj-abas button[aria-selected="true"]{background:var(--lj-or);border-color:var(--lj-or);color:#1a0b02}
.lj-abas .lj-sep{flex:none;width:1px;background:var(--lj-line);margin:4px 2px}
.lj-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px}
.lj-item{display:grid;grid-template-rows:subgrid;grid-row:span 5;gap:8px;--lj-sub:var(--lj-simples)}
.lj-item.raro{--lj-sub:var(--lj-raro)}.lj-item.exclusivo{--lj-sub:var(--lj-excl)}
.lj-pv{height:118px;border-radius:12px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--lj-sub) 22%,transparent),transparent 65%),var(--lj-900);border:1px solid var(--lj-line);display:grid;place-items:center;overflow:hidden;position:relative}
.lj-item h3,.lj-col h3{margin:0;font:800 17px/1.25 var(--lj-display);text-wrap:balance}
.lj-meta{display:flex;gap:6px;flex-wrap:wrap;align-content:start}
.lj-preco{font:800 19px var(--lj-display);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.lj-preco small{font:500 15px var(--lj-mono);color:var(--lj-low)}
.lj-preco.niv{color:var(--lj-ciano)}.lj-preco.ex{color:var(--lj-excl)}.lj-preco.seu{color:var(--lj-ok)}
.lj-acoes{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-self:end}
.lj-acoes .lj-btn{padding:8px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lj-item[aria-current="true"]{border-color:color-mix(in srgb,var(--lj-sub) 70%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--lj-sub) 45%,transparent)}
.lj-col{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;--lj-sub:var(--lj-ouro);margin-bottom:12px}
.lj-col p{margin:4px 0 0;color:var(--lj-mid)}
.lj-col .lj-preco-col{font:800 22px var(--lj-display);color:var(--lj-ouro);text-align:right;font-variant-numeric:tabular-nums;display:grid;gap:6px}
.lj-col .lj-preco-col s{font:500 15px var(--lj-mono);color:var(--lj-low)}

/* desenhos dos itens (em código até chegarem as artes do dono) */
.lj-av{--tam:78px;width:var(--tam);height:var(--tam);border-radius:50%;display:grid;place-items:center;position:relative;background:linear-gradient(135deg,#2a3446,#1a2130);font:900 calc(var(--tam)*.38) var(--lj-display);color:var(--lj-hi)}
:is(.lj-av,.lj-aplica)[data-mold]::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:4px solid transparent}
:is(.lj-av,.lj-aplica)[data-mold="moldura-pergaminho"]::before{border-color:#c9a46a;box-shadow:inset 0 0 0 2px #7a5a2c}
:is(.lj-av,.lj-aplica)[data-mold="moldura-kunai"]::before{border-color:#8fb3d9;border-style:dashed}
:is(.lj-av,.lj-aplica)[data-mold="moldura-chakra"]::before{border-color:#20d3e0;box-shadow:0 0 14px rgba(32,211,224,.55);animation:lj-pulsa 2.4s ease-in-out infinite}
:is(.lj-av,.lj-aplica)[data-mold="moldura-parceiro"]::before{border-color:#20d3e0;box-shadow:0 0 0 2px #e3b341,0 0 16px rgba(227,179,65,.5);animation:lj-pulsa 3s ease-in-out infinite}
@keyframes lj-pulsa{50%{box-shadow:0 0 24px rgba(32,211,224,.85)}}
.lj-aplica{position:relative;overflow:visible}
.lj-deco{position:absolute;display:none}
:is(.lj-av,.lj-aplica)[data-deco="deco-faixa"] .lj-deco{display:block;left:-8px;right:-8px;top:18%;height:14px;border-radius:4px;background:linear-gradient(90deg,#26324a,#3c4a66);border:1px solid #6b7c99}
:is(.lj-av,.lj-aplica)[data-deco="deco-faixa"] .lj-deco::after{content:"";position:absolute;left:50%;top:1px;width:18px;height:10px;transform:translateX(-50%);border-radius:3px;background:linear-gradient(180deg,#d7dde6,#8b96a6)}
:is(.lj-av,.lj-aplica)[data-deco="deco-folhas"] .lj-deco{display:block;inset:-12px}
.lj-deco i{position:absolute;width:10px;height:6px;border-radius:0 8px;background:#5fbf6a;animation:lj-folha 3.2s ease-in-out infinite}
.lj-deco i:nth-child(1){left:6%;top:12%}.lj-deco i:nth-child(2){right:4%;top:30%;animation-delay:-1s}.lj-deco i:nth-child(3){left:20%;bottom:4%;animation-delay:-2s;background:#86d36f}
:is(.lj-av,.lj-aplica)[data-deco="deco-faixa"] .lj-deco i{display:none}
@keyframes lj-folha{50%{transform:translate(4px,-6px) rotate(40deg)}}
.lj-nome-cor{font:800 20px var(--lj-display);overflow-wrap:anywhere}
.lj-nome-cor[data-cor="cor-laranja"]{color:#ff7a2f}
.lj-nome-cor[data-cor="cor-por-do-sol"]{background:linear-gradient(90deg,#ff7a2f,#ff4f6d,#b48cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lj-nome-cor[data-cor="cor-dourado"]{color:#e3b341;text-shadow:0 0 12px rgba(227,179,65,.6)}
.lj-placa{display:inline-flex;align-items:center;padding:5px 14px;border-radius:8px;font:700 15px var(--lj-mono);letter-spacing:.06em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lj-placa[data-placa="placa-shinobi"]{background:linear-gradient(90deg,#1e2a3d,#2b3b55);border:1px solid #4d6385;color:#cfe0f5}
.lj-placa[data-placa="placa-pergaminho-dourado"]{background:linear-gradient(90deg,#3a2a12,#6b4e1f,#3a2a12);border:1px solid #e3b341;color:#f6dfa4}
.lj-placa[data-placa=""]{display:none}
.lj-selo{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;font:800 15px var(--lj-display)}
.lj-selo[data-selo="selo-veterano"]{background:var(--lj-ouro-wash);border:1px solid #e3b341;color:#e3b341}
.lj-selo[data-selo="selo-apoiador"]{background:var(--lj-or-wash);border:1px solid var(--lj-or-line);color:var(--lj-or-300)}
.lj-selo[data-selo="selo-parceiro"]{background:rgba(32,211,224,.12);border:1px solid #20d3e0;color:#20d3e0}
.lj-selo[data-selo=""]{display:none}
.lj-selo.grande{width:44px;height:44px;font-size:20px}
.lj-efeito{position:absolute;inset:0;pointer-events:none;z-index:0;display:none}
.lj-aplica-efeito{position:relative;overflow:hidden}
.lj-aplica-efeito > .lj-efeito{border-radius:inherit}
.lj-aplica-efeito > :not(.lj-efeito){position:relative;z-index:1}
.lj-aplica-nome{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lj-aplica-placa{display:block;margin-top:6px}
.lj-efeito[data-efeito="efeito-nevoa"]{display:block;background:radial-gradient(ellipse at 20% 80%,rgba(200,215,235,.18),transparent 55%),radial-gradient(ellipse at 80% 70%,rgba(200,215,235,.14),transparent 50%);animation:lj-nevoa 8s ease-in-out infinite alternate}
.lj-efeito[data-efeito="efeito-faiscas"]{display:block;background:radial-gradient(2px 2px at 20% 70%,#e3b341,transparent),radial-gradient(2px 2px at 60% 40%,#ff7a2f,transparent),radial-gradient(2px 2px at 80% 80%,#e3b341,transparent),radial-gradient(2px 2px at 35% 30%,#ffb082,transparent);animation:lj-cintila 2.2s ease-in-out infinite}
@keyframes lj-nevoa{to{transform:translateX(18px)}}
@keyframes lj-cintila{50%{opacity:.35}}

.lj-previa{--lj-faixa:linear-gradient(90deg,#20d3e0,#ff7a2f);position:sticky;top:12px;display:grid;gap:12px}
.lj-perfil{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--lj-line);background:linear-gradient(180deg,#1b2333 0 74px,var(--lj-900) 74px);padding:44px 16px 16px;display:grid;gap:10px;justify-items:start}
.lj-perfil > *{position:relative;z-index:1}
.lj-perfil .lj-efeito{position:absolute;z-index:0}
.lj-perfil .lj-av{--tam:84px;border:5px solid var(--lj-900)}
.lj-linha-nome{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.lj-equip{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.lj-equip li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;border-top:1px solid var(--lj-line);padding-top:6px}
.lj-equip li span:first-child{color:var(--lj-low)}
.lj-nota{margin:0;color:var(--lj-low)}

/* gavetas (regra 30) e janela */
.lj-gaveta{background:var(--lj-850);border:1px solid var(--lj-line);border-radius:14px;position:relative;overflow:hidden;isolation:isolate}
.lj-gaveta summary{cursor:pointer;list-style:none;padding:14px 18px;font:800 17px var(--lj-display);display:flex;justify-content:space-between;gap:12px}
.lj-gaveta summary::-webkit-details-marker{display:none}
.lj-gaveta summary::after{content:"+";font:600 20px var(--lj-mono);color:var(--lj-mid)}
.lj-gaveta[open] summary::after{content:"−"}
.lj-dentro{padding:0 18px 16px;color:var(--lj-mid);display:grid;gap:8px}
.lj-dentro ul{margin:0;padding-left:20px;display:grid;gap:6px}
.lj-hist-l{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--lj-line);padding-bottom:6px;font-variant-numeric:tabular-nums}
.lj-fundo-jan{position:fixed;inset:0;background:rgba(5,7,12,.72);display:grid;place-items:center;z-index:300;padding:16px}
.lj-jan{width:min(440px,100%);--lj-faixa:linear-gradient(90deg,#ff7a2f,#e3b341);display:grid;gap:12px}
.lj-jan h3{margin:0;font:800 20px var(--lj-display);padding-right:36px}
.lj-jl{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--lj-line);padding-bottom:6px;font-variant-numeric:tabular-nums}
.lj-jl span:first-child{color:var(--lj-low)}
.lj-fechar{position:absolute;top:12px;right:12px;z-index:4}

@media (max-width:900px){.lj-grade{grid-template-columns:minmax(0,1fr)}.lj-previa{position:relative;top:0}}
@media (max-width:640px){
  .lj-nivel-topo{grid-template-columns:auto minmax(0,1fr)}
  .lj-giro{grid-column:1/-1;justify-items:stretch;text-align:left}
  .lj-trilha{grid-template-columns:repeat(var(--lj-n,5),minmax(96px,1fr));overflow-x:auto;padding-bottom:6px}
  .lj-col{grid-template-columns:minmax(0,1fr)}.lj-col .lj-preco-col{text-align:left}
  .lj-equip li{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.lj-lanterna,.lj-faisca,.lj-av::before,.lj-deco i,.lj-efeito{animation:none!important}.lj-faisca{opacity:.6}}
/* Versão leve nas listas (chat e membros da Comunidade, Feed; loja/cosmeticos-lista.js): moldura fina no avatar pequeno, nome no
   tamanho da lista (só a cor muda) e selo do tamanho da letra. */
.lj-lista-av{position:relative;overflow:visible}
.lj-lista-av[data-mold]::before{inset:-3px;border-width:2px}
.lj-lista-av[data-deco="deco-faixa"] .lj-deco{left:-4px;right:-4px;height:8px}
.lj-lista-av[data-deco="deco-faixa"] .lj-deco::after{width:10px;height:5px}
.lj-lista-av[data-deco="deco-folhas"] .lj-deco{inset:-6px}
.lj-lista-av .lj-deco i{width:6px;height:4px}
.lj-nome-cor.lj-lista-nome{font:inherit;font-weight:700}
.lj-selo.lj-lista-selo{width:20px;height:20px;border-radius:5px;font-size:15px;margin-left:6px;vertical-align:middle}
@media (prefers-reduced-motion:reduce){.lj-aplica::before{animation:none!important}}
/* Dar de presente (janela de compra; loja.js, desenharCompra): busca a conta que recebe. */
.lj-presente{border:1px solid var(--lj-line,#2a3446);border-radius:10px;padding:0 12px}
.lj-presente > summary{cursor:pointer;padding:10px 0;font-weight:700;font-size:15px;color:var(--lj-or-300,#ff9a4d)}
.lj-presente[open]{padding-bottom:12px}
.lj-presente input{width:100%;min-height:42px;padding:8px 12px;border-radius:8px;border:1px solid var(--lj-line,#2a3446);background:var(--lj-800,#141a25);color:inherit;font:inherit;font-size:15px}
.lj-presente-dica{margin:8px 0 0;font-size:15px;color:var(--lj-mid,#a7b0bd)}
#lj-pachados{display:grid;gap:6px;margin-top:8px}
.lj-presente-conta{justify-content:flex-start;text-align:left}