/* =================== Monetização: carteira, VIP, skins, loja e planos =================== */
.gemv { display: inline-flex; align-items: center; gap: 3px; font-family: 'Lilita One'; color: #9ff4ff; }
.gemv .ico { font-size: 1.25em; filter: drop-shadow(0 0 6px rgba(62,224,255,.7)); }

/* Carteira no topo: moedas + cristais empilhados */
.carteira { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 64px; padding: 2px 9px 2px 4px; text-decoration: none; color: #fff; background: #0d0626; border: 3px solid var(--ink); border-radius: 14px; font: 15px/1.05 'Lilita One'; transition: transform .12s; }
.carteira:hover { transform: translateY(-2px); }
.carteira > span { display: flex; align-items: center; gap: 4px; }
.carteira .ico { font-size: 19px; }
.carteira .cr { color: #9ff4ff; }
.carteira .cr .ico { filter: drop-shadow(0 0 5px rgba(62,224,255,.8)); }
@media (max-width: 360px) { .carteira { min-width: 52px; font-size: 13px; border-width: 2px; padding: 1px 6px 1px 2px; } .carteira .ico { font-size: 16px; } }
.coroavip { position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 22px; filter: drop-shadow(0 2px 0 var(--ink)); z-index: 3; }

/* Molduras (skins): avatar do topo, retrato da ficha, ranking e vitrine da loja */
.avatar.mini { position: relative; width: 48px; height: 48px; flex: none; }
.avatar.mini img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; object-position: top; border: 3px solid var(--ink); }
.avatar[class*="skin-"]::before, .portrait[class*="skin-"]::before, .li-art[class*="skin-"]::before { content: ""; position: absolute; inset: -6px; border-radius: 20px; z-index: 0; pointer-events: none; }
.portrait[class*="skin-"] { overflow: visible; }
.portrait[class*="skin-"]::before { inset: -9px; border-radius: 30px; z-index: -1; }
.avatar[class*="skin-"] img, .li-art[class*="skin-"] img { position: relative; z-index: 1; }
.skin-neon::before { border: 3px solid #3ee0ff; box-shadow: 0 0 12px #3ee0ff, inset 0 0 10px #3ee0ff; animation: neonpisca 1.6s infinite; }
@keyframes neonpisca { 50% { box-shadow: 0 0 22px #3ee0ff, inset 0 0 16px #3ee0ff; } }
.skin-galaxia::before { background: conic-gradient(#8c6bff, #ff7ac8, #3ee0ff, #4de08a, #8c6bff); box-shadow: 0 0 16px rgba(140,107,255,.7); animation: galaxia 4s linear infinite; }
@keyframes galaxia { to { filter: hue-rotate(360deg); } }
.skin-fogo::before { background: radial-gradient(circle at 50% 100%, #ffe14d, #ff8a00 45%, #ff3d63 75%, transparent 76%); box-shadow: 0 -4px 18px #ff8a00; animation: fogo .9s ease-in-out infinite alternate; }
@keyframes fogo { to { transform: scale(1.06) translateY(-2px); filter: hue-rotate(-12deg); } }
.skin-prata::before { background: linear-gradient(135deg, #f4f7fb, #aab4c6 35%, #6d7890 50%, #dfe5ee 70%, #9aa6ba); background-size: 250% 250%; box-shadow: 0 0 10px rgba(201,211,230,.6); animation: prata 3.5s ease-in-out infinite; }
@keyframes prata { 50% { background-position: 100% 100%; } }
.skin-aurora::before { background: linear-gradient(120deg, #4de08a, #3ee0ff, #8c6bff, #ff7ac8, #4de08a); background-size: 300% 300%; box-shadow: 0 0 14px rgba(77,224,138,.55); animation: aurora 6s ease-in-out infinite; }
@keyframes aurora { 50% { background-position: 100% 50%; } }
.skin-circuito::before { background: repeating-linear-gradient(90deg, #0b2a3a 0 6px, #3ee0ff 6px 8px), #0b2a3a; box-shadow: 0 0 10px #3ee0ff, inset 0 0 6px #3ee0ff; animation: circuito 1.2s linear infinite; }
@keyframes circuito { to { background-position: 16px 0; } }
.skin-ouro::before { background: linear-gradient(135deg, #fff3c4, #ffc83d 30%, #b87800 50%, #ffe07a 70%, #ffb000); box-shadow: 0 0 14px rgba(255,200,61,.8); }
/* Moldura lendária de ouro: reflexo dourado em diagonal passando sobre a foto (mesmo ritmo do sheen dos botões) */
.avatar.skin-ouro::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 236, 160, .85) 50%, transparent 60%) no-repeat; background-size: 300% 100%; animation: ouroReflexo 3.2s infinite; }
.avatar.mini.skin-ouro::after { border-radius: 12px; }
.li-art.avatar.skin-ouro::after { inset: 2px; border-radius: 14px; }
@keyframes ouroReflexo { 0%, 65% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.portrait.skin-ouro::after { border-radius: 19px;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 236, 160, .7) 50%, transparent 60%) no-repeat, linear-gradient(180deg, transparent 55%, rgba(13,6,38,.95));
  background-size: 300% 100%, 100% 100%; animation: ouroReflexoRetrato 3.2s infinite; }
@keyframes ouroReflexoRetrato { 0%, 65% { background-position: 150% 0, 0 0; } 100% { background-position: -50% 0, 0 0; } }
/* Chama dourada (fogo-fátuo) da metade da moldura para cima, por trás da foto: WebP animada em laço gerada por
   FBM com domain warping (assets/img/chama-ouro*.webp). Pintada como border-image do ::before da moldura, que pode
   passar das bordas sem ser cortada pelo border-radius. Fatias = margens da imagem (76/36 px; retrato 72/30 px). */
.skin-ouro::before { border: 0 solid transparent; border-image: url(../assets/img/chama-ouro.webp) 76 36 0 36 fill / 53px 25px 0 25px / 53px 25px 0 25px; }
.avatar.mini.skin-ouro::before { border-image-width: 46px 22px 0 22px; border-image-outset: 46px 22px 0 22px; }
.li-art.avatar.skin-ouro::before { border-image-width: 70px 34px 0 34px; border-image-outset: 70px 34px 0 34px; }
@media (max-width: 480px) { .bn-hero .avatar.skin-ouro { margin-right: 20px; } } /* Mochila no celular (linha): a chama lateral não cobre o nome */
.portrait.skin-ouro::before { border-image: url(../assets/img/chama-ouro-retrato.webp) 72 30 0 30 fill / 90px 40px 0 40px / 90px 40px 0 40px; }
@media (prefers-reduced-motion: reduce) { .avatar.skin-ouro::after, .portrait.skin-ouro::after { animation: none; background-position: 150% 0, 0 0; } .skin-ouro::before { border-image: none; } }
.skin-vip::before { background: linear-gradient(135deg, #ff7ac8, #8c6bff, #3ee0ff, #ff7ac8); background-size: 300% 300%; animation: vipgrad 3s linear infinite; box-shadow: 0 0 16px rgba(255,122,200,.7); }
@keyframes vipgrad { to { background-position: 300% 300%; } }

/* Selos e cadeados VIP */
.selovip { display: inline-block; font: 11px "Lilita One"; letter-spacing: 1px; padding: 1px 7px; border-radius: 8px; border: 2px solid var(--ink); color: var(--ink); background: linear-gradient(90deg, #ffe07a, #ff9fd4); vertical-align: middle; margin-left: 4px; }
.btn.vipbtn { --c1: #ffe07a; --c2: #ff7ac8; }
.panel.premium { box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px #ff9fd4; }
.node.premium { box-shadow: 0 5px 0 var(--ink), inset 0 0 0 2px #ff9fd4; }
.st-ok { display: inline-flex; align-items: center; gap: 5px; font: 14px "Lilita One"; color: var(--green); }
.st-ok .ico { font-size: 20px; }

/* Loja */
.loja-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.saldo-cr { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #0d0626; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink), inset 0 0 0 2px #3ee0ff; }
.saldo-cr > .ico { font-size: 40px; filter: drop-shadow(0 0 10px rgba(62,224,255,.8)); }
.saldo-cr b { font: 26px/1 "Lilita One"; color: #9ff4ff; display: block; }
.saldo-cr small { font-weight: 800; color: var(--muted); }
.vipfaixa { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; text-decoration: none; color: var(--ink); border: 4px solid var(--ink); border-radius: 18px; background: linear-gradient(90deg, #ffe07a, #ff9fd4 60%, #b9a3ff); box-shadow: 0 6px 0 var(--ink); }
.vipfaixa > .ico { font-size: 44px; flex: none; }
.vipfaixa div { flex: 1; min-width: 0; }
.vipfaixa b { font: 20px "Lilita One"; display: block; }
.vipfaixa small { font-weight: 800; }
.vipfaixa.ativo { background: linear-gradient(90deg, #2e1a66, #5a3cc9); color: #fff; box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px #ff9fd4; }
.boosters-ativos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.boosters-ativos span { display: inline-flex; align-items: center; gap: 6px; font: 14px "Lilita One"; padding: 4px 10px; border-radius: 12px; background: #0e3b2a; border: 3px solid var(--ink); color: var(--green); }
.boosters-ativos .ico { font-size: 22px; }
.loja-item { display: flex; gap: 14px; align-items: flex-start; }
.li-art { position: relative; width: 84px; height: 84px; flex: none; display: grid; place-items: center; border-radius: 18px; border: 4px solid var(--ink); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 45%, #1a0e40), #120a30); box-shadow: 0 5px 0 var(--ink), inset 0 0 0 3px var(--rc); }
.li-art > .ico { font-size: 54px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.li-art.avatar { background: transparent; box-shadow: none; border-color: transparent; }
.li-art.avatar img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; object-position: top; border: 3px solid var(--ink); }
.li-info { flex: 1; min-width: 0; }
.li-info h3 { font-size: 20px; margin: 6px 0 2px; }
.li-info small { display: block; font-weight: 700; color: var(--muted); }
.li-info .li-extra { color: #9ff4ff; margin-top: 4px; }
.li-acao { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cambio-qtd { display: inline-flex; align-items: center; gap: 8px; }
.cambio-qtd b { min-width: 26px; text-align: center; font-size: 18px; }
.passebox { display: flex; align-items: center; gap: 10px; text-align: left; margin: 0 0 14px; padding: 10px 12px; border-radius: 16px; border: 3px solid var(--ink); background: #1a0e40; box-shadow: inset 0 0 0 2px #ff9fd4; }
.passebox > .ico { font-size: 36px; flex: none; }
.passebox div { flex: 1; min-width: 0; }
.passebox b { font-family: "Lilita One"; font-weight: 400; display: block; }
.passebox small { font-weight: 700; color: var(--muted); }
.passebox.tem { box-shadow: inset 0 0 0 2px var(--green); }

/* Planos */
.comparar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.col-plano h3 { font-size: 24px; display: flex; align-items: center; gap: 8px; }
.col-plano h3 .ico { font-size: 34px; }
.col-plano ul { margin: 10px 0; padding-left: 20px; font-weight: 800; line-height: 1.6; }
.col-plano.vip { box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px #ff9fd4; background: linear-gradient(180deg, #4a2a7a, #2a1660); }
.planos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 22px 18px; padding-top: 8px; }
.plano { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.plano.destaque { box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--gold), 0 0 30px color-mix(in srgb, var(--c) 50%, transparent); }
.plano .fita { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font: 12px "Lilita One"; letter-spacing: 1px; white-space: nowrap; padding: 3px 12px; border-radius: 10px; border: 3px solid var(--ink); background: var(--gold); color: var(--ink); }
.pl-ic { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 35%, #1a0e40); border: 4px solid var(--ink); box-shadow: 0 0 22px var(--c); margin-top: 6px; }
.pl-ic .ico { font-size: 52px; }
.plano h3 { font-size: 22px; margin-top: 6px; }
.pl-preco { font: 32px "Lilita One"; color: var(--gold); text-shadow: 0 3px 0 var(--ink); }
.plano p { margin: 2px 0 6px; font-weight: 700; color: var(--muted); flex: 1; }
.pl-entrega { display: flex; gap: 12px; justify-content: center; font: 18px "Lilita One"; margin-bottom: 10px; }
.pl-entrega > span { display: inline-flex; align-items: center; gap: 4px; }
.pl-entrega .ico { font-size: 24px; }
.pedidos { display: flex; flex-direction: column; gap: 10px; }
.pedido { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; background: #1a0e40; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.pedido > div { flex: 1; min-width: 160px; }
.pedido b { font-family: "Lilita One"; font-weight: 400; display: block; }
.pedido small { color: var(--muted); font-weight: 700; }
.stp { font: 12px "Lilita One"; letter-spacing: .8px; padding: 3px 9px; border-radius: 9px; border: 2px solid var(--ink); }
.stp.soon { background: #fff; color: var(--ink); }
.stp.ok { background: var(--green); color: var(--ink); }
.stp.off { background: #3a2580; color: var(--muted); }
.qrped { width: min(220px, 70vw); aspect-ratio: 1; display: block; margin: 8px auto; border-radius: 14px; border: 4px solid var(--ink); background: #fff; padding: 6px; }
.codped { font-weight: 800; letter-spacing: .5px; }
.legal-links { text-align: center; margin-top: 26px; font-weight: 800; }
.legal-links a { color: var(--muted); }

/* Menu inferior com 6 abas */
@media (max-width: 400px) { .nav a { font-size: 11px; } .nav a .ico { font-size: 30px; } }

/* Botões que gastam/levam a Cristais: fundo azul-noite, texto branco (antes era ciano sobre ciano, ilegível) */
.btn.cristal { --c1: #2f6fd8; --c2: #173c9e; --tc: #fff; text-shadow: 0 2px 0 var(--ink); }
.btn.cristal .gemv { color: #fff; }
.btn.cristal .ico { color: #9ff4ff; filter: drop-shadow(0 0 5px rgba(62,224,255,.9)) drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.btn.cristal:hover { --c1: #3b82f0; --c2: #1d4bb8; }
.btn.cristal:focus-visible { outline: 3px solid #9ff4ff; outline-offset: 3px; }
.btn .gemv { color: inherit; }

/* ---------- Equipamentos e Mochila ---------- */
.slotfiltro { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; }
.slotfiltro button { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 14px 'Lilita One'; color: #d9cffb; background: #1a0e40; border: 3px solid var(--ink); border-radius: 12px; padding: 5px 10px; cursor: pointer; min-height: 38px; }
.slotfiltro button .ico { font-size: 20px; }
.slotfiltro button.on { background: var(--cyan); color: var(--ink); }
.boneco { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 14px 0; }
.bn-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bn-hero .avatar { width: 96px; height: 96px; }
.bn-hero small { color: var(--muted); font-weight: 800; }
.eqgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.eqslot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 86px; padding: 6px 4px; border-radius: 14px; border: 3px dashed #4a3399; background: #140a33; text-align: center; }
.eqslot .ico { font-size: 34px; opacity: .35; }
.eqslot small { font: 12px/1.1 'Lilita One'; color: var(--muted); }
.eqslot.cheio { border: 3px solid var(--rc); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 35%, transparent), #140a33 70%); box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 60%, transparent); }
.eqslot.cheio .ico { opacity: 1; }
.eqslot.cheio small { color: #fff; }
.eqx { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); background: #ff3d63; display: grid; place-items: center; cursor: pointer; padding: 0; }
.eqx .ico { font-size: 14px; opacity: 1; }
.bn-bonus { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bn-bonus span { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 12px; background: #1a0e40; border: 2px solid var(--ink); }
.bn-bonus .ico { font-size: 22px; }
.bn-bonus small { color: var(--muted); font-weight: 800; font-size: 11px; }
.bn-bonus b { font-family: 'Lilita One'; font-size: 16px; }
.tab small { font-size: 11px; opacity: .8; }
.eqplus { color: #4de08a; font-size: 12px; margin-left: 2px; }
@media (max-width: 480px) { .boneco { grid-template-columns: 1fr; } .bn-hero { flex-direction: row; } .bn-hero .avatar { width: 64px; height: 64px; } .bn-bonus { grid-template-columns: repeat(3, 1fr); } }