/* ============================================================================
   DOAÇÃO v2 — "Vitrine Banners" (mock v2 APROVADO pelo Bruno, 2026-07-26)
   Banners com ARTE de fundo (hdr_coins/premium/packs) + texto sobreposto (drop-shadow);
   saldo só de Coins no header do HC; Premium mesma altura do Coins; Pacotes iguais;
   Fundador com fantasias menores ABAIXO dos benefícios (quadrado com borda dourada).
   Namespace .dz-*. LEI: radius 2, azul só detalhe, dourado só valor, verde só check.
   Botões = .btn/.btn pri (radius 2). Tickets da Caixa Heroes indicados (🎟).
   ========================================================================== */

/* GATE (Bruno 2026-07-27): conteúdo togglado por [hidden] tinha display de classe (.dz-page display:flex,
   #colCoins/#colPremium display:flex/grid…) que VENCIA o [hidden] do HTML → o conteúdo da Doação "vazava"
   sem login. Regra sistêmica: qualquer elemento com o atributo hidden some de verdade, em qualquer view. */
[hidden]{ display:none !important; }

/* 🔴 `#v-mercado` ENTRA AQUI PORQUE O MERCADO NAO E FILHO DE `.dz-page`.
   A arvore dele e `body.deep > #v-mercado.view > .wrap > #mktBody` — sem `.dz-page` em lugar
   nenhum. Como estas variaveis eram declaradas SO no `.dz-page`, dentro do Mercado elas
   simplesmente nao existiam, e `background:var(--dz-fill)` com variavel indefinida e uma
   declaracao INVALIDA: o navegador descarta. O cartao nascia sem fundo, sem borda e sem
   sombra — os "quadrantes sumidos". O que aparecia na tela eram so os elementos internos que
   usam cor literal (`.mkt-chart-wrap`, `rgba(0,0,0,.24)`), o que fazia parecer que o problema
   era o cartao de fora ter sido escondido de proposito. */
/* 🔴 AS VARIAVEIS E O LAYOUT SAO DOIS SELETORES, e essa separacao NAO e estetica.
   Eu tinha juntado `#v-mercado` ao seletor unico para que as variaveis do design chegassem ao
   Mercado — e ele herdou junto `display:flex`, `max-width`, `margin:auto` e `gap`. Como
   `#v-mercado` e um ID (especificidade 100) e `.view{display:none}` e uma classe (10), o
   display:flex VENCIA a regra que esconde as views: o Mercado passou a ocupar espaco em TODAS
   as paginas, empurrando o conteudo e deixando vaos brancos em Doacao, Entrar, Criar Conta e
   Wiki. Quem so precisa das CORES nunca deve receber o LAYOUT junto. */
.dz-page, #v-mercado{
  --dz-fill:rgba(15,15,15,.74); --dz-fill-hi:rgba(23,23,23,.85); --dz-hair:rgba(255,255,255,.106);
  --dz-lift:inset 0 1px 0 rgba(255,255,255,.05); --dz-drop:0 4px 4px rgba(0,0,0,.8);
  --dz-blue:#4f8cf0; --dz-gold:#f2b705; --dz-green:#5bd6a0; --dz-ink:#eef2f8; --dz-mut:#a9adb4; --dz-mut2:#8a8f98;
}
.dz-page{
  max-width:1120px; margin:0 auto; padding:0 clamp(12px,2vw,20px); display:flex; flex-direction:column; gap:14px; font-family:var(--display);
}
#v-loja, #v-mercado{ overflow-x:clip; }
/* UI UNIVERSAL (Bruno 2026-07-26): a receita dos "Diferenciais do Servidor" é a LEI agora — SEM BLUR.
   Card = bg rgba(15,15,15,.74) + borda 1px + lift + drop. Nada de backdrop-filter. */
.dz-glass{ background:var(--dz-fill); border:1px solid var(--dz-hair); border-radius:2px; box-shadow:var(--dz-lift),var(--dz-drop); }
/* SEM BLUR em todo o site (sobrescreve o blur antigo dos cards/glass) */
body.deep .dz-glass, body.deep .mo, body.deep .card, body.deep .hcard, body.deep .pnl-card,
body.deep .cart-box, body.deep .cartfab, body.deep .donate-gate, body.deep [class*="glass"], body.deep .statc, body.deep .frost{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
/* MODAIS na LEI (Bruno 2026-07-26): PIX/Termos = preto, fio .106, radius 2, SEM blur (Mercado + Doação).
   Sobrescreve o .pix-box antigo (azulado, radius 20, blur 10px em body.deep — site.html:730/3710). */
body.deep .pix-ov{ background:rgba(0,0,0,.72) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
body.deep .pix-box{ background:rgba(15,15,15,.96) !important; border:1px solid rgba(255,255,255,.106) !important; border-radius:2px !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 16px 46px rgba(0,0,0,.72) !important; }
/* ===== MODAL DE PAGAMENTO v2 (PIX transparente + cartão, 2026-08-14) =====
   Conteúdo na LEI: kicker no topo, valor = DOURADO (única casa do dourado aqui),
   raio 2 em tudo, nível 2 = luz (nunca mais preto), tabular-nums nos números.
   Escopo por #pixOv (ID) DE PROPÓSITO: o painel-v4.css também estiliza .pix-* e
   vencia por ordem de carga — só especificidade de ID garante a lei aqui. */
/* o modal vive no <body>, FORA do .dz-page — os tokens têm que existir aqui também,
   senão var(--dz-gold) resolve inválido e o valor herda o branco do .pix-box */
#pixOv{
  --dz-hair:rgba(255,255,255,.106);
  --dz-blue:#4f8cf0; --dz-gold:#f2b705; --dz-green:#5bd6a0; --dz-ink:#eef2f8; --dz-mut:#a9adb4; --dz-mut2:#8a8f98;
}
#pixOv .pix-box{ max-height:calc(100dvh - 32px); overflow-y:auto; }
#pixOv .pix-kick{ font-family:var(--tech); font-size:9px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--dz-mut2); margin-bottom:8px; }
#pixOv .pix-head{ font-size:16px; gap:8px; }
#pixOv .pix-amt{ font-family:var(--display); font-weight:800; font-size:30px; color:var(--dz-gold); font-variant-numeric:tabular-nums; margin:8px 0 2px; }
#pixOv .pix-prod{ font-size:12.5px; color:var(--dz-mut); margin-bottom:14px; }
#pixOv .pix-qr,#mktPixOv .pix-qr{ width:200px; height:200px; border-radius:2px; padding:10px; background:#fff; box-shadow:0 4px 4px rgba(0,0,0,.8); margin:0 auto 12px; }
#pixOv .pix-qr img,#mktPixOv .pix-qr img{ display:block; width:100%; height:100%; object-fit:contain; }
#pixOv .pix-copia{ display:block; background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px var(--dz-hair); border-radius:2px; padding:9px 12px;
  font-family:var(--tech); font-size:10px; line-height:1.45; color:#98a2b3; word-break:break-all; max-height:46px; overflow:hidden; margin-bottom:0; cursor:pointer; }
#pixOv .pix-copia:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); color:#c6cedb; }
#pixOv .pix-wait{ margin-top:12px; font-size:12.5px; color:var(--dz-mut); }
#pixOv .pix-exp{ margin-top:10px; font-size:11px; line-height:1.5; color:var(--dz-mut2); }
#pixOv .pix-foot{ margin-top:14px; padding-top:11px; border-top:1px solid var(--dz-hair);
  font-family:var(--tech); font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dz-mut2); }
#pixOv .pix-foot b{ color:#9fb2cc; font-weight:700; }
#pixOv .pix-ico.exp{ color:#e8a44b; }
#pixOv .pix-oid{ color:var(--dz-mut2); }
/* cartão transparente (Card Payment Brick do MP dentro do modal) */
#pixOv .pix-head .cardmark, #pixOv .pay2-method .cardmark{ color:var(--dz-blue); }
#pixOv .card-brick{ margin:0; min-height:300px; }
#pixOv .card-err{ margin-top:8px; font-size:12px; line-height:1.45; color:#e0576a; }

/* ===== PAY v3 (2026-08-14, redesign autorizado): X de fechar + layout HORIZONTAL =====
   Resumo à esquerda (o que estou pagando) · ação à direita (QR ou form do cartão).
   Sem rolagem vertical no desktop; empilha só no mobile. */
#pixOv .pix-box{ position:relative; }
#pixOv .pix-box.pay2w{ max-width:730px; }
#pixOv .pay2-x{ position:absolute; top:10px; right:10px; width:30px; height:30px; display:grid; place-items:center;
  border:0; border-radius:2px; background:transparent; box-shadow:inset 0 0 0 1px var(--dz-hair);
  color:var(--dz-mut2); font-size:13px; line-height:1; cursor:pointer; transition:box-shadow .16s,color .16s; z-index:2; }
#pixOv .pay2-x:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.32); color:#fff; }
#pixOv .pay2-grid{ display:grid; grid-template-columns:236px 1fr; text-align:left; margin-top:4px; }
#pixOv .pay2-sum{ display:flex; flex-direction:column; align-items:flex-start; padding:4px 20px 2px 2px; border-right:1px solid var(--dz-hair); min-width:0; }
#pixOv .pay2-act{ padding:2px 2px 0 20px; min-width:0; }
#pixOv .pay2-method{ display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:800; font-size:16px; color:#eaf2ff; margin-top:2px; }
#pixOv .pay2-method .pixmark{ width:22px; height:22px; color:#32c8a0; }
#pixOv .pay2-label{ font-size:12.5px; color:var(--dz-mut); margin-top:5px; line-height:1.4; }
#pixOv .pay2-grid .pix-amt{ margin:12px 0 0; font-size:28px; }
#pixOv .pay2-note{ font-size:11px; color:var(--dz-mut2); line-height:1.55; margin-top:10px; }
#pixOv .pay2-grid .pix-exp{ margin-top:12px; }
#pixOv .pay2-grid .pix-foot{ margin-top:auto; padding-top:12px; width:100%; }
#pixOv .pay2-grid .pix-qr{ margin:0 auto 12px; }
#pixOv .pay2-grid .pix-wait{ margin-top:10px; }
@media(max-width:860px){
  #pixOv .pix-box.pay2w{ max-width:420px; }
  #pixOv .pay2-grid{ grid-template-columns:1fr; }
  #pixOv .pay2-sum{ border-right:0; border-bottom:1px solid var(--dz-hair); padding:2px 0 14px; align-items:center; text-align:center; }
  #pixOv .pay2-act{ padding:14px 0 0; }
  #pixOv .pay2-grid .pix-foot{ margin-top:12px; }
}

/* ===== TELA DE SUCESSO v2 (2026-08-14) — cerimônia: check + glow + valor em OURO ===== */
#pixOv .ok2-glow{ position:absolute; left:0; right:0; top:0; height:210px; pointer-events:none; border-radius:2px 2px 0 0;
  background:radial-gradient(ellipse 62% 58% at 50% 16%, rgba(242,183,5,.10), transparent 72%); }
#pixOv .ok2-ring{ position:relative; width:58px; height:58px; margin:8px auto 14px; border-radius:50%; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(75,191,123,.55), 0 0 34px -12px rgba(75,191,123,.9); }
#pixOv .ok2-ring svg{ width:28px; height:28px; fill:none; stroke:#4bbf7b; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:0; animation:ok2draw .55s cubic-bezier(.22,.68,.2,1) backwards; }
@keyframes ok2draw{ from{ stroke-dashoffset:26; } to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){ #pixOv .ok2-ring svg{ animation:none; } }
#pixOv .ok2-big{ margin:12px 0 0; }
#pixOv .ok2-big span{ font-family:var(--display); font-weight:800; font-size:42px; line-height:1; color:var(--dz-gold); font-variant-numeric:tabular-nums; }
#pixOv .ok2-big small{ display:block; font-family:var(--tech); font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--dz-mut2); margin-top:6px; }
#pixOv .ok2-lines{ margin:16px auto 0; max-width:330px; text-align:left; display:flex; flex-direction:column; gap:7px; }
#pixOv .ok2-ln{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; line-height:1.45; color:#c6cedb; }
#pixOv .ok2-ln b{ color:var(--dz-ink); }
#pixOv .ok2-ck{ flex:none; width:16px; height:16px; margin-top:1px; display:grid; place-items:center; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(75,191,123,.45); color:#4bbf7b; font-size:10px; font-weight:800; }
#pixOv .ok2-ln.warn .ok2-ck{ color:#e8a44b; box-shadow:inset 0 0 0 1px rgba(232,164,75,.45); }
#pixOv .ok2-ln.warn{ color:#d8b98c; }
#pixOv .ok2-ln.gold b{ color:var(--dz-gold); }
#pixOv .ok2-oid{ margin-top:15px; font-family:var(--tech); font-size:10px; letter-spacing:.08em; color:var(--dz-mut2); }
#pixOv .ok2-oid b{ color:#9fb2cc; }
#pixOv .ok2-btns{ display:flex; gap:8px; margin-top:16px; }
#pixOv .ok2-btns .btn{ flex:1; }

/* ===== PACOTES HEROES I/II/III (15/08) — 3 tiers, baú como palco ===== */
#colPacks.dz-packs{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:14px; align-items:stretch; }
@media(max-width:980px){ #colPacks.dz-packs{ grid-template-columns:1fr; } }
.dz-pack.hpk{ display:flex; flex-direction:column; min-width:0; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.106);
  border-radius:2px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); padding:0 0 16px; overflow:hidden; transition:border-color .2s, transform .2s; }
.dz-pack.hpk:hover, .dz-pack.hpk:focus-visible{ border-color:rgba(79,140,240,.55); transform:translateY(-3px); outline:none; }
.hpk-head{ display:flex; align-items:center; gap:14px; padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.07); }
.hpk-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.hpk-k{ font-family:var(--tech); font-size:9px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--dz-mut2); }
.hpk.heroes3 .hpk-k{ color:var(--dz-gold); }
.hpk-name{ font-family:var(--display); font-weight:800; font-size:18px; text-transform:uppercase; letter-spacing:.02em; color:var(--dz-ink); }
.hpk-price{ font-family:var(--tech); font-weight:800; font-size:20px; color:var(--dz-gold); font-variant-numeric:tabular-nums; margin-top:5px; }
.hpk-price small{ display:block; font-size:9.5px; font-weight:600; letter-spacing:.06em; color:var(--dz-mut2); margin-top:2px; }
.hpk-bau{ flex:none; width:92px; height:84px; display:grid; place-items:center; }
.hpk-bau img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform .28s cubic-bezier(.22,.68,.2,1); }
.hpk:hover .hpk-bau img{ transform:scale(1.05); }
.hpk-body{ display:flex; flex-direction:column; flex:1; padding:13px 18px 0; }
.hpk-perks{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:5px; }
.hpk-perks li{ display:flex; gap:8px; align-items:flex-start; font-size:12px; line-height:1.45; color:var(--dz-mut); }
.hpk-perks li:first-child{ color:var(--dz-ink); font-weight:600; }
.hpk-perks .ck{ flex:none; color:var(--dz-green); font-size:10.5px; margin-top:1px; }
.hpk-foot{ margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); }
.hpk-foot .dz-pk-btns{ display:flex; gap:7px; flex-wrap:wrap; }
.hpk-foot .dz-pk-btns .btn{ flex:1; min-width:84px; padding:8px 8px; font-size:10px; }

/* ===== CARRINHO v2 (2026-08-14, redesign autorizado) — drawer na LEI ===== */
#cartOv{ --dz-hair:rgba(255,255,255,.106); --dz-blue:#4f8cf0; --dz-gold:#f2b705; --dz-green:#5bd6a0; --dz-ink:#eef2f8; --dz-mut:#a9adb4; --dz-mut2:#8a8f98;
  background:rgba(0,0,0,.66) !important; }
#cartOv .cart-box{ width:430px; background:rgba(15,15,15,.96) !important; border-left:1px solid var(--dz-hair) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), -24px 0 60px rgba(0,0,0,.7) !important;
  -webkit-backdrop-filter:blur(6px) !important; backdrop-filter:blur(6px) !important; padding:20px 20px 18px; }
#cartOv .cart-hd{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
#cartOv .cart-hd h3{ font-family:var(--display); font-weight:800; font-size:17px; text-transform:uppercase; letter-spacing:.04em; color:var(--dz-ink); margin:0; }
#cartOv .cart-hd-c{ display:block; font-family:var(--tech); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dz-mut2); margin-top:3px; }
#cartOv .cart-x{ width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:2px; background:transparent;
  box-shadow:inset 0 0 0 1px var(--dz-hair); color:var(--dz-mut2); font-size:13px; cursor:pointer; transition:box-shadow .16s,color .16s; }
#cartOv .cart-x:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.32); color:#fff; }
#cartOv .cart-items{ display:flex; flex-direction:column; gap:8px; }
#cartOv .cart-it{ position:relative; background:rgba(255,255,255,.025) !important; border-radius:2px; box-shadow:inset 0 0 0 1px var(--dz-hair);
  padding:12px 34px 12px 13px; transition:box-shadow .16s; }
#cartOv .cart-it:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
#cartOv .ci-name{ font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--dz-ink); }
#cartOv .ci-sub{ font-size:11.5px; color:var(--dz-mut2); margin-top:2px; }
#cartOv .ci-sub .ci-bon{ color:var(--dz-green); font-weight:700; }
#cartOv .ci-right{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; }
#cartOv .ci-qty{ display:flex; align-items:center; gap:7px; }
#cartOv .ci-qty button{ width:26px; height:26px; border:0; border-radius:2px; background:transparent !important;
  box-shadow:inset 0 0 0 1px var(--dz-hair); color:var(--dz-ink); font-size:14px; line-height:1; cursor:pointer; transition:box-shadow .16s; }
#cartOv .ci-qty button:hover{ box-shadow:inset 0 0 0 1px rgba(79,140,240,.6); }
#cartOv .ci-qty b{ min-width:18px; text-align:center; font-family:var(--tech); font-size:13px; font-variant-numeric:tabular-nums; }
#cartOv .ci-price{ font-family:var(--tech); font-weight:800; font-size:13.5px; color:var(--dz-gold) !important; font-variant-numeric:tabular-nums; }
#cartOv .ci-price.coins{ color:#c4a6ff !important; }
#cartOv .ci-rm{ position:absolute; top:8px; right:8px; width:22px; height:22px; display:grid; place-items:center; border:0; border-radius:2px;
  background:transparent; color:var(--dz-mut2); font-size:11px; cursor:pointer; transition:color .16s,box-shadow .16s; }
#cartOv .ci-rm:hover{ color:#e0576a; box-shadow:inset 0 0 0 1px rgba(224,87,106,.4); }
#cartOv .ci-pay{ display:inline-flex; margin-top:8px; border-radius:2px; box-shadow:inset 0 0 0 1px var(--dz-hair); overflow:hidden; }
#cartOv .cip{ border:0; background:transparent; color:var(--dz-mut); font-family:var(--tech); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:6px 11px; cursor:pointer; transition:color .16s,box-shadow .16s; }
#cartOv .cip.on{ color:#cfe0ff; box-shadow:inset 0 0 0 1px rgba(79,140,240,.65); }
#cartOv .cart-empty{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:38px 0; color:var(--dz-mut2); font-size:12.5px; text-align:center; }
#cartOv .cart-empty b{ color:var(--dz-mut); font-size:13.5px; }
#cartOv .cart-empty .ce-ico svg{ width:30px; height:30px; opacity:.5; }
#cartOv .cart-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--dz-hair); }
#cartOv .cart-coupon{ display:flex; gap:8px; }
#cartOv .cart-coupon input{ flex:1; background:rgba(0,0,0,.28); border:0; border-radius:2px; box-shadow:inset 0 0 0 1px var(--dz-hair);
  color:var(--dz-ink); font-size:12.5px; padding:9px 11px; outline:0; }
#cartOv .cart-coupon input:focus{ box-shadow:inset 0 0 0 1px rgba(79,140,240,.65); }
#cartOv .cart-tick{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding:8px 11px; border-radius:2px;
  background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px var(--dz-hair); font-size:11.5px; color:var(--dz-mut); }
#cartOv .cart-tick b{ font-family:var(--tech); color:var(--dz-ink); }
#cartOv .cart-sum{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
#cartOv .cs-row{ display:flex; align-items:baseline; justify-content:space-between; font-size:12.5px; color:var(--dz-mut); }
#cartOv .cs-row b.cs-pix{ font-family:var(--tech); font-weight:800; font-size:19px; color:var(--dz-gold); font-variant-numeric:tabular-nums; }
#cartOv .cs-row b.cs-coins{ font-family:var(--tech); font-weight:800; font-size:15px; color:#c4a6ff; font-variant-numeric:tabular-nums; }
#cartOv .cs-bal{ font-size:11px; color:var(--dz-mut2); }
#cartOv .cs-warn{ font-size:11.5px; color:#e8a44b; }
#cartOv #cartCheckout{ margin-top:12px; padding:11px 16px; }
/* botão = padrão do site (radius 2); guarda contra o .btn global vira-pílula */
.dz-page .btn{ border-radius:2px; padding:9px 16px; font-size:11.5px; letter-spacing:.1em; font-family:"Chakra Petch",var(--tech); text-transform:uppercase; }

/* ===== MERCADO (view interna) — statbar + cards Comprar/Vender/Armazém ===== */

.mkt-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media(max-width:820px){ .mkt-stats{ grid-template-columns:1fr 1fr; } }
.mkt-stat{ padding:8px 12px; display:flex; flex-direction:column; gap:3px; }
.mkt-stat .k{ font-family:var(--tech); text-transform:uppercase; letter-spacing:.14em; font-size:9px; color:var(--dz-mut2); }
.mkt-stat b{ font-family:var(--display); font-weight:800; font-size:18px; color:var(--dz-ink); line-height:1; }
.mkt-stat b small{ font-family:var(--tech); font-size:10px; color:var(--dz-mut2); font-weight:600; }
.mkt-stat i{ font-style:normal; font-size:10px; color:var(--dz-mut2); }
.mkt-stat i.up{ color:var(--dz-green); }
/* Bruno 2026-07-26: header do Mercado = texto simples no início (sem faixa escura, sem border divisória) */
.mkt-card .mkt-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px 0; border-bottom:0; background:none; }
.mkt-card .mkt-hd h3{ font-family:var(--display); font-weight:800; font-size:15px; text-transform:uppercase; color:var(--dz-ink); margin:0; }
.mkt-live{ font-family:var(--tech); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--dz-green); }
.mkt-sub{ font-size:11px; color:var(--dz-mut2); }
.mkt-lb{ display:block; font-family:var(--tech); text-transform:uppercase; letter-spacing:.1em; font-size:9.5px; color:var(--dz-mut); margin:6px 0 3px; }
.mkt-in{ display:flex; align-items:center; border-radius:2px; box-shadow:inset 0 0 0 1px var(--dz-hair); background:rgba(0,0,0,.22); padding:0 12px; }
.mkt-in input{ flex:1; background:transparent; border:0; outline:0; color:var(--dz-ink); font-family:var(--tech); font-size:14px; padding:7px 6px; min-width:0; }
.mkt-in .u{ font-family:var(--tech); font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--dz-mut2); }
.mkt-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:6px 0; }
.mkt-chips > .mkt-note{ margin:0 0 0 auto; }
.mkt-chip{ font-family:var(--tech); font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:7px 12px; border-radius:2px; border:0; box-shadow:inset 0 0 0 1px var(--dz-hair); background:transparent; color:#cfd6e2; cursor:pointer; }
.mkt-chip:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.mkt-chip.max{ box-shadow:inset 0 0 0 1px rgba(79,140,240,.55); color:#cfe0ff; }
.mkt-out{ display:flex; align-items:center; justify-content:space-between; padding:7px 10px; border-radius:2px; background:rgba(0,0,0,.24); box-shadow:inset 0 0 0 1px var(--dz-hair); margin-bottom:6px; }
.mkt-out span{ font-family:var(--tech); text-transform:uppercase; letter-spacing:.08em; font-size:10px; color:var(--dz-mut); }
.mkt-out b{ font-family:var(--display); font-weight:800; font-size:17px; color:var(--dz-blue); }
.mkt-out.grn b{ color:var(--dz-green); }
.mkt-lotes{ font-size:11.5px; color:var(--dz-mut2); margin:3px 0 6px; }
.mkt-lotes b{ color:#cfe0ff; }
.mkt-note{ font-size:10.5px; color:var(--dz-mut2); margin:8px 0 0; }
/* Vitrine de criadores: a home mostra so quem esta ao vivo; o resto fica na pagina de criadores. */
.prt-vazio{ grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 0 6px; }
.prt-vazio p{ margin:0; font-size:13.5px; color:var(--dz-mut); }
.prt-maisbox{ grid-column:1/-1; display:flex; justify-content:center; padding-top:6px; }
.prt-todos{ min-width:220px; }
/* A conta da venda: bruto, taxa cadastrada e o que cai na conta do vendedor. */
.mkt-taxa{ font-size:11px; line-height:1.5; color:var(--dz-mut); margin:-2px 0 6px; }
.mkt-taxa b{ color:var(--dz-green); }
/* Passo a passo da conta Efi, antes do formulario de vendedor. */
.mkt-passos{ margin:12px 0 0; padding-left:20px; text-align:left; font-size:12px; line-height:1.55; color:var(--dz-ink); }
.mkt-passos li{ margin-bottom:8px; }
.mkt-passos li b{ color:#eaf2ff; }
.mkt-link{ color:var(--dz-blue); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.mkt-link:hover{ color:#c3d9ff; }
/* De onde sai o total: uma linha por lote do livro, anonima, mais o preco medio. */
.mkt-linhas-col{ position:relative; min-height:190px; }
.mkt-linhas{ position:absolute; inset:0; margin:0; border-radius:2px; background:rgba(0,0,0,.16); box-shadow:inset 0 0 0 1px var(--dz-hair); display:flex; flex-direction:column; }
.mkt-linhas:empty::before{ content:'Os anúncios que entram na compra aparecem aqui.'; display:block; padding:14px 12px; font-size:11px; color:var(--dz-mut2); }
.mkt-lin-corpo{ flex:1; min-height:0; overflow-y:auto; }
.mkt-lin-corpo::-webkit-scrollbar{ width:6px; } .mkt-lin-corpo::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:3px; }
.mkt-lin-corpo + .mkt-lin{ box-shadow:inset 0 1px 0 rgba(255,255,255,.045); }
.mkt-lin{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:5px 10px; font-size:11px; color:var(--dz-ink); }
.mkt-lin + .mkt-lin{ box-shadow:inset 0 1px 0 rgba(255,255,255,.045); }
.mkt-lin span:nth-child(2){ color:var(--dz-mut); font-variant-numeric:tabular-nums; }
.mkt-lin b{ font-variant-numeric:tabular-nums; color:var(--dz-ink); }
.mkt-lin.hd{ font-family:var(--tech); text-transform:uppercase; letter-spacing:.08em; font-size:9.5px; color:var(--dz-mut); background:#0b0f15; }
.mkt-lin.hd b{ font-family:var(--tech); font-size:9.5px; color:var(--dz-mut); font-weight:600; }
.mkt-lin.med{ background:#0b0f15; }
.mkt-lin.med b{ color:var(--dz-blue); }
/* Bruno r16.7: botões de ação do Mercado (Pagar/Anunciar venda/transferências) = padrão Heroes, NÃO full-width, centralizados */
.mkt-act{ display:block; width:max-content; min-width:170px; margin:8px auto 0 !important; padding-left:28px; padding-right:28px; }
.mkt-login{ text-align:center; padding:20px 0; display:flex; flex-direction:column; gap:12px; align-items:center; }
/* Estado de VISITANTE: a caixa substitui um formulario e herdava a altura dele — sobrava
   um vao grande com uma frase perdida no meio, e a tela parecia quebrada em vez de
   desligada. Aqui ela ocupa o tamanho do proprio texto, em uma linha. */
.mkt-login.vis-curto{ flex-direction:row; gap:8px; padding:14px 4px; justify-content:center; }
.mkt-login.vis-curto .mkt-lock{ font-size:15px; opacity:.66; line-height:1.35; }
.mkt-login.vis-curto p{ font-size:13px; line-height:1.35; }

/* Onde estaria o preco, para quem nao pode comprar. Discreto de proposito: e informacao
   de quando, nao um valor — nao deve competir com o preco de verdade quando ele voltar. */
.pr-oculto{ font-family:var(--tech); font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--dz-mut2); opacity:.85; }
/* Os cards do mercado sao dimensionados pelo FORMULARIO que existe neles. Para o visitante
   o formulario nao existe, e sobrava um retangulo alto com uma frase solta no meio — a tela
   parecia quebrada em vez de desligada. Aqui o card encolhe ate o conteudo que restou. */
.mkt-card .dz-bd:has(> .vis-curto){ padding:6px 15px 14px; }
.mkt-buygrid:has(.vis-curto){ grid-template-columns:1.35fr auto; align-items:center; }
.mkt-buygrid .vis-curto{ align-self:center; }
/* `:has()` nao existe em navegador antigo; a classe abaixo e posta pelo JS e faz o mesmo,
   para o layout nao depender de suporte a seletor novo. */
.mkt-col.vis-compacto .dz-bd{ padding:6px 15px 14px; }

/* Aqui eu tinha posto um realce com `--dz-fill-hi` achando que o cartao estava fraco demais.
   Era compensacao do sintoma: a variavel tambem nao existia no Mercado, entao aquela regra
   nao pintava nada. Com o escopo corrigido acima, o cartao volta com a cor da LEI. */
.mkt-login p{ color:var(--dz-mut); font-size:13px; margin:0; }
/* ===== MERCADO — PORT 2026-07-26: valor/preço AZUL (LEI), gráfico de linha, venda/KYC/armazém ===== */
.mkt-stat.px b{ color:var(--dz-blue); }                 /* preço R$ = azul (LEI) */
.mkt-stat b.vu{ color:var(--dz-green); }                /* variação + = verde */
.mkt-stat b.vd{ color:#e8776b; }                        /* variação - = vermelho suave */
.mkt-live.grn{ color:var(--dz-green); }
.mkt-card .dz-bd{ padding:8px 12px 12px; }                       /* escopado ao Mercado (não vaza pra Doação) */
.mkt-unavail{ padding:24px; text-align:center; color:var(--dz-mut); font-size:13px; }
/* espaço entre as seções do Mercado (Bruno 2026-07-26 r4) */
#mktBody{ display:flex; flex-direction:column; gap:12px; }
/* seção MERGE 50/50 (Vender|Armazém e Pendentes|Histórico) com divisória vertical.
   `.dz-card.mkt-merge` p/ VENCER o `.dz-card{display:flex}` (definido depois, mesma especificidade). */
.dz-card.mkt-merge{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.mkt-merge > .mkt-col{ min-width:0; display:flex; flex-direction:column; }
.mkt-merge > .mkt-col + .mkt-col{ border-left:1px solid var(--dz-hair); }
@media(max-width:820px){ .dz-card.mkt-merge{ grid-template-columns:1fr; } .mkt-merge > .mkt-col + .mkt-col{ border-left:0; border-top:1px solid var(--dz-hair); } }
.mkt-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mkt-row .mkt-lb{ margin-top:0; }
.mkt-card .mkt-hd.mkt-hd2{ border-top:1px solid var(--dz-hair); margin-top:2px; }
.mkt-col > .mkt-grow{ flex:1; }
.mkt-ware2{ display:flex; flex-direction:column; gap:8px; }
.mkt-wrow{ display:grid; grid-template-columns:auto 1fr 96px auto; align-items:center; gap:10px; padding:6px 10px; border-radius:2px; background:rgba(255,255,255,.02); box-shadow:inset 0 0 0 1px var(--dz-hair); }
.mkt-wrow .k{ font-family:var(--tech); text-transform:uppercase; letter-spacing:.1em; font-size:9px; color:var(--dz-mut2); }
.mkt-wrow b{ font-family:var(--display); font-weight:800; font-size:15px; color:var(--dz-ink); }
.mkt-wrow .mkt-in{ padding:0 8px; }
.mkt-wrow .mkt-in input{ padding:7px 4px; }
.mkt-wrow .btn{ margin:0; min-width:0; padding:8px 12px; font-size:11px; white-space:nowrap; }
.mkt-logbox.mkt-hist2{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
@media(max-width:820px){ .mkt-logbox.mkt-hist2, .mkt-row{ grid-template-columns:1fr; } }
@media(max-width:640px){ .mkt-wrow{ grid-template-columns:1fr auto; } .mkt-wrow .mkt-in{ min-width:0; } }
/* LOG de transações (scrollável) */
.mkt-logbox{ max-height:150px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.mkt-logbox::-webkit-scrollbar{ width:6px; } .mkt-logbox::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:3px; }
.mkt-logrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border-radius:2px; background:rgba(255,255,255,.02); box-shadow:inset 0 0 0 1px var(--dz-hair); }
.mkt-logrow .ml-mid{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.mkt-logrow .ml-mid b{ font-family:var(--display); font-weight:700; font-size:12.5px; color:var(--dz-ink); }
.mkt-logrow .ml-mid b small{ color:var(--dz-mut2); font-weight:600; }
.mkt-logrow .ml-mid span{ font-family:var(--tech); font-size:10.5px; color:var(--dz-mut2); }
.mkt-logrow .ml-side{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex:none; }
.mkt-logrow .ml-dt{ font-family:var(--tech); font-size:9.5px; color:var(--dz-mut2); white-space:nowrap; }
.mkt-logrow .ml-stat{ font-size:9.5px; font-family:var(--tech); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.mkt-logrow .ml-stat.ok{ color:var(--dz-green); }
.mkt-logrow .ml-stat.wait{ color:var(--dz-gold); }
.mkt-logrow .ml-stat.off{ color:var(--dz-mut2); }
.mkt-log-empty{ font-size:11.5px; color:var(--dz-mut2); padding:10px 2px; }
.btn.sm{ padding:5px 10px; font-size:10px; letter-spacing:.06em; }
/* aba COMPRAR: gráfico | ticket lado a lado */
.mkt-buygrid{ display:grid; grid-template-columns:1.1fr 0.9fr 0.9fr; gap:12px; align-items:stretch; }
@media(max-width:860px){ .mkt-buygrid{ grid-template-columns:1fr; } .mkt-linhas-col{ height:196px; } }
.mkt-chart-wrap{ padding:10px 12px; border-radius:2px; background:rgba(0,0,0,.24); box-shadow:inset 0 0 0 1px var(--dz-hair); display:flex; flex-direction:column; }
.mkt-chart-hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.mkt-chart-hd>span:first-child{ font-family:var(--tech); text-transform:uppercase; letter-spacing:.08em; font-size:10px; color:var(--dz-mut); }
.mkt-chart-hd small{ color:var(--dz-mut2); text-transform:none; letter-spacing:0; }
.mkt-chart{ position:relative; flex:1; min-height:110px; }
.mkt-chart-vazio{ display:flex; align-items:center; justify-content:center; height:100%; min-height:120px; padding:16px; text-align:center; font-size:13px; line-height:1.45; opacity:.62; }
.mkt-chartsvg{ position:absolute; inset:0; display:block; width:100%; height:100%; }
.mkt-chart-foot{ font-size:10px; color:var(--dz-mut2); margin-top:8px; }
.mkt-ticket{ display:flex; flex-direction:column; }
.mkt-msg{ display:none; font-size:11.5px; margin-top:10px; padding:8px 10px; border-radius:2px; }
.mkt-msg.err{ display:block; color:#f0a9a0; background:rgba(224,102,102,.1); box-shadow:inset 0 0 0 1px rgba(224,102,102,.3); }
.mkt-msg.ok{ display:block; color:var(--dz-green); background:rgba(91,214,160,.1); box-shadow:inset 0 0 0 1px rgba(91,214,160,.3); }
/* aba VENDER */
.mkt-lock{ font-size:22px; margin-bottom:4px; }
.mkt-orders{ margin-top:14px; }
.mkt-orders-h{ font-family:var(--tech); text-transform:uppercase; letter-spacing:.1em; font-size:9.5px; color:var(--dz-mut); margin-bottom:6px; }
.mkt-ordrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:2px; background:rgba(255,255,255,.02); box-shadow:inset 0 0 0 1px var(--dz-hair); font-size:12.5px; color:var(--dz-ink); margin-bottom:6px; }
.mkt-ordrow small{ color:var(--dz-mut2); }
/* ARMAZÉM — histórico */
.mkt-hist{ margin-top:14px; }
.mkt-hist-h{ font-family:var(--tech); text-transform:uppercase; letter-spacing:.1em; font-size:9.5px; color:var(--dz-mut); margin-bottom:6px; }
.mkt-histrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:2px; background:rgba(255,255,255,.02); box-shadow:inset 0 0 0 1px var(--dz-hair); margin-bottom:6px; }
.mkt-histrow .hmid{ display:flex; flex-direction:column; gap:1px; }
.mkt-histrow .hmid b{ font-size:12.5px; color:var(--dz-ink); font-weight:700; font-family:var(--display); }
.mkt-histrow .hmid span{ font-size:11px; color:var(--dz-mut2); font-family:var(--tech); }
.mkt-histrow .hstat{ text-align:right; display:flex; flex-direction:column; gap:1px; }
.mkt-histrow .hdt{ font-size:10px; color:var(--dz-mut2); font-family:var(--tech); }
.mkt-histrow .ok{ font-size:10px; color:var(--dz-green); }
.mkt-hist-empty{ font-size:11.5px; color:var(--dz-mut2); padding:8px 2px; }
/* KYC / termos (dentro do overlay reusado) */
.mkt-termsnote{ font-size:11px; color:var(--dz-gold); text-align:left; margin:0 0 10px; }
/* Chegou ao fim do texto: o aviso deixa de ser lembrete e vira confirmação. */
.mkt-termsnote.lido{ color:#6fdca8; }
.mkt-kyc{ text-align:left; display:flex; flex-direction:column; }
.mkt-kyc label{ font-family:var(--tech); text-transform:uppercase; letter-spacing:.08em; font-size:9.5px; color:var(--dz-mut); margin:10px 0 4px; }
.mkt-kyc input{ background:rgba(0,0,0,.28); border:0; box-shadow:inset 0 0 0 1px var(--dz-hair); border-radius:2px; padding:10px 12px; color:var(--dz-ink); font-family:var(--tech); font-size:14px; outline:0; }
.mkt-kychint{ font-size:11px; color:var(--dz-mut2); text-align:left; }
.dz-price{ font-family:var(--display); font-weight:800; font-size:22px; color:var(--dz-blue); line-height:1.05; white-space:nowrap; }
.dz-price small{ display:block; font-family:var(--tech); font-size:9.5px; color:var(--dz-mut2); text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin-top:1px; }
.dz-tik{ display:inline-flex; align-items:center; gap:4px; font-family:var(--tech); font-size:9px; font-weight:800; letter-spacing:.04em; color:var(--dz-gold); white-space:nowrap; }

/* HEADER */
.dz-top{ text-align:center; position:relative; padding-top:2px; }
.dz-kick{ font-family:var(--tech); text-transform:uppercase; letter-spacing:.3em; font-size:10px; color:var(--dz-mut2); text-shadow:0 1px 2px rgba(0,0,0,.7); }
/* Bruno r15: título no MESMO tamanho de Rankings/Notícias (.htitle = clamp(30px,5.1vw,80px)) */
.dz-h1{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(30px,5.1vw,80px); line-height:.94; margin:8px 0 0; color:var(--dz-ink); text-shadow:0 2px 6px rgba(0,0,0,.5); }
.dz-h1 em{ font-style:normal; color:var(--dz-blue); }
/* lede em UMA linha só (Bruno r15: sem quebra) */
.dz-lede{ font-size:14px; color:var(--dz-mut); margin:11px auto 0; max-width:none; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.6); }
@media(max-width:900px){ .dz-lede{ white-space:normal; } }

/* ============================================================================
   FUNDO DE ARTE no título da Doação (Bruno 2026-07-27): a CENA "hero-shop" ATRÁS do
   título — só #donateContent (Download e Mercado reusam .dz-top, então NÃO herdam isto).
   ARTE = variante BANNER-LARGO (1600×430, guerreiro à DIREITA + bolsa de Heroes Coins à
   ESQUERDA). A -source é 2:1 (cena vertical) e numa faixa curta virava uma tira ilegível
   ("não dava pra entender o que era"); o banner cabe legível (mostra ~72% da altura) e
   preenche os dois lados. Master em assets/title-bgs-proposals/*-dark.png.
   ENQUADRAMENTO (Bruno r3): a arte preenche o HEADER INTEIRO. Em vez de uma faixa
   centralizada, o ::before é ancorado por top/bottom: top:-48px (sobe no padding, acima do
   kicker) e bottom:-13px (desce até o topo dos cards, gap 14px) → cobre toda a área do
   título sem invadir os cards. cover mostra a cena quase inteira (guerreiro + moedas).
   MÁSCARA = interseção (mask-composite:intersect) de 2 fades lineares (H e V). O SEGREDO
   p/ NÃO ter borda: os lineares vão a `transparent` em 0% e 100% → alpha ZERO cravado nas
   4 bordas; intersect pega o MÍNIMO → a arte é forçada a 0 nas bordas e funde com o nav
   (topo) e os cards (base). Fade H curto (5%) p/ preservar guerreiro/moedas nas laterais.
   VISIBILIDADE: opacity .90 (Bruno pediu 90%) — a arte -dark é bem escura, e a SOMBRA
   reforçada nos textos garante a leitura. width:100% = largura dos cards. */
/* 🔴 A ARTE DA DOAÇÃO SAIU (Bruno 31/07: "vamos remover as imagens ... inclua a
   página de doação nesse bolo, tudo"). Esta regra era o último banner ilustrado
   do site — e o mais teimoso: sobreviveu à remoção do `--vbg` da view porque a
   arte não vinha de lá, vinha daqui, de um `::before` próprio com `!important`
   de especificidade (#id + classe) que vencia a regra geral do `.title-bg`.
   O bloco abaixo fica NEUTRALIZADO em vez de apagado: o arquivo
   `donate/hero-shop-wide.webp` continua em disco e reverter é descomentar. */
#donateContent .dz-top{ z-index:0; display:flex; flex-direction:column; justify-content:center; }
#donateContent .dz-top::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:none;
  opacity:0;
}
/* SOMBRA reforçada dos textos (só #donateContent) — descola o texto da arte mais forte
   sem competir; vence o text-shadow base de .dz-kick/.dz-h1/.dz-lede por especificidade. */
/* 03/08: a Doação seguia com a névoa antiga, então o título dela ficava
   diferente das outras 8 telas — o oposto da padronização pedida. */
#donateContent .dz-kick{ text-shadow:1px 1px 0 rgba(0,0,0,.9); }
#donateContent .dz-h1{ text-shadow:1px 1px 0 rgba(0,0,0,.92), 2px 2px 1px rgba(0,0,0,.5); }
#donateContent .dz-lede{ text-shadow:1px 1px 0 rgba(0,0,0,.9); }
/* (o override de opacidade em mobile saiu junto com a arte) */

/* ============================================================================
   FUNDO DE ARTE nos TÍTULOS de página/seção (Bruno 2026-07-27) — MESMO tratamento
   aprovado na Doação, agora REUTILIZÁVEL via classe .title-bg + var --ta (a arte da
   página). Cada arte é um banner -dark (1600×430, figuras nas laterais + centro escuro)
   convertido p/ WebP em assets/title-bgs/. Cobre os padrões de header .dz-top e .hhead.
   TÉCNICA (Bruno r4): o header VIRA um banner com a PROPORÇÃO EXATA da arte (1600×430) via
   `aspect-ratio` → assim `cover` mostra a CENA INTEIRA, sem cortar cabeças/figuras (o corte
   acontecia porque o header era mais "baixo" que a arte larga). A largura é a da seção; a
   altura vem da proporção (largura×430/1600 ≈ 290px no desktop) e empurra o conteúdo abaixo.
   O texto centraliza no banner (flex). Máscara = 2 fades lineares (H+V) que vão a transparent
   em 0%/100% → ZERO nas bordas (funde, sem retângulo). opacity .90 + sombra nos textos.
   Aplicado em: Download, Mercado, Notícias, Diferenciais, Ranking, Server Info, Wiki (+Doação). */
/* ============================================================================
   ⭐ O ENCAIXE (Bruno 2026-07-30) — a arte e o bloco de baixo formam UM cartão.
   Referência: o `.pnl-card` do Painel do Jogador, medido em 1920×1080:
     overflow:hidden · border-radius:2px · background:rgba(0,0,0,.36)
     box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) · padding:0
   O que produz o encaixe é o `overflow:hidden` do quadro: a arte é CORTADA na
   moldura, em vez de desbotar antes de chegar nela.

   O que havia aqui era o oposto. Medido em ACHADOS-SITE-2026-07-30: moldura ZERO
   em 4 níveis de ancestral (border 0, radius 0) e, no lugar dela, uma máscara que
   apagava a arte 11% em cima + 11% embaixo (22% da altura) e 5% de cada lado. A
   arte morria ANTES da borda, então não havia o que encaixar — a rampa saía de
   0,96/255 na linha 0 e só chegava ao patamar por volta da linha 36, enquanto o
   `.pnl-card` entrega 18,47/255 já na linha 0.
   ========================================================================== */
/* ⭐ SEM QUADRO — decisão do Bruno (31/07): "elementos soltos que vão ser um quadro
   invisível junto com o título". Saiu o cartão (fill + moldura + scrim) que esta
   regra teve por algumas horas em 30/07; a moldura agora é feita pelas PEÇAS.
   A arte é uma faixa composta em `title-bgs/v2/composto/`, onde as 4 peças da
   seção já entram equalizadas e com o miolo 34-66% vazio (medido: 0,0% de
   opacidade lá) — é esse vazio que dá lugar ao título. */
/* A ALTURA VEM DO TEXTO (Bruno 31/07: "não precisa manter a altura do banner").
   O `aspect-ratio:1600/430` que estava aqui dava 399px de faixa para 108px de
   conteúdo (kicker 15 + título 72 + lede 21) — 291px de vazio, 73% da altura.
   Nenhum arranjo de peças consertaria isso: o deserto era a altura, não a
   disposição. Agora a caixa é o texto + respiro, e a arte acompanha. */
.title-bg{
  position:relative; z-index:0;
  display:flex; flex-direction:column; justify-content:center;
  /* `align-items:center` — sem ele o kicker cai no canto ESQUERDO. Medido em
     Notícias: o texto do `.hkick` começava em x=28 num banner de 1140, quando o
     centro seria 504. `text-align:center` não resolve sozinho: o elemento é
     estreito, e quem o posiciona é o eixo transversal do flex. */
  align-items:center; text-align:center;
  /* Assimétrico de propósito: as peças são ancoradas pela BASE da faixa, então o
     respiro de baixo é o que separava elas do conteúdo. Medido no Mercado: 36,7px
     de padding + 14px de gap = 50px de vazio sob figuras já cortadas — era o
     "espaço gigante". Em cima o respiro fica, para o título não colar na seção. */
  padding-top:clamp(26px,3.4vh,52px);
  padding-bottom:clamp(6px,0.9vh,14px);
  background:transparent;
  /* 🔴 ALTURA MÍNIMA ÚNICA (03/08) — a raiz da despadronização que sobrou.
     Medido: 157px no Painel, 192px na maioria, 338px no Suporte (já reduzido).
     A luz tem 300px fixos em toda seção; se o banner varia, o texto ocupa uma
     FRAÇÃO diferente dela em cada tela — e é isso que faz o mesmo halo parecer
     maior aqui e menor ali.
     192px é o valor da maioria, então padronizar por ele não mexe em 5 das 8
     telas: só levanta as que estavam abaixo. `min-height` (e não `height`)
     porque a seção que precisar de mais espaço continua podendo crescer. */
  min-height:192px;
  box-sizing:border-box;
}
/* 🔴 O GAP DO TOPO — duas compensações do MESMO nav, somadas.
   Medido no Mercado: a `.view` tem `padding-top:104px` (o nav fixo termina em
   105px, então essa é a correta) e o `.wrap` de dentro tem MAIS `padding-top:124px`.
   Total 228px antes do banner, dos quais 123px são vazio puro.
   O `:has()` limita a correção às páginas que têm banner — as outras podem
   depender desse respiro para outra coisa. */
.view > .wrap:has(.title-bg){
  padding-top:clamp(10px,1.5vh,24px) !important;
}
/* A Doação escapava: o banner dela mora em `#donateContent`, então o `.wrap` que
   o `:has()` acima encontra não é o mesmo — o dela media 70px e o gap ao nav
   ficava em 69px, contra 15px das demais. */
/* O Mercado entra na MESMA moldura da Doação (.loja-wrap + esta regra): deslogado, as duas mostram o
   mesmo cartão de entrada, e ele ficava com topo, laterais e rodapé diferentes só no Mercado. */
#v-loja > .wrap, #v-mercado > .wrap, .view > .wrap:has(#donateContent){
  padding-top:clamp(10px,1.5vh,24px) !important;
}

/* ============================================================================
   TIPOGRAFIA DO HEADER — um padrão só (Bruno 31/07: "as premissas de melhorar a
   tipografia/gaps ... pra todas").

   Medido antes, nas 4 telas, e cada uma tinha a sua:
     kicker  9,5px/600/alpha .44   ×  10px/400/cinza sólido
     título  letter-spacing -2px   ×  -0,96px  ×  normal      (TRÊS valores)
     lede    13px Barlow  ×  15px Barlow  ×  14px OXANIUM     (e a lei manda
             Barlow no corpo; Oxanium é display)
     lede mt 6px  ×  20px  ×  11px

   O que fica: kicker Oxanium 10/600 tracking .3em, título com tracking único
   -0,018em, lede Barlow 15/1,6, e a escada de espaço 12px → 14px.
   ========================================================================== */
/* ============================================================================
   PARCEIROS e SUPORTE — as duas últimas fora do padrão (Bruno 31/07).
   Vinham de `.pagehero` / `.pnlhero`, com `--vbg` colorido na view e classes de
   texto próprias (`.kick`, `h1`, `p` em vez de `.hkick`, `.htitle`, `.hlede`).
   Em vez de reescrever o markup, ganharam a classe `title-bg` e o CSS abaixo
   mapeia os nomes antigos para o mesmo padrão. O `--vbg` saiu das duas views.
   ========================================================================== */
.pagehero.title-bg > .wrap, .pnlhero.title-bg > .wrap{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  max-width:none !important;
}
.pnlhero.title-bg .pnlhead{ gap:14px; }
.pnlhero.title-bg .pnl-who{ display:flex; flex-direction:column; align-items:center; }
/* a caixa de ação do Suporte desce para baixo do título, em vez de disputar a linha */
.pnlhero.title-bg .pnl-cashbox{ margin-top:6px; }
.pagehero.title-bg, .pnlhero.title-bg{
  border-bottom:0 !important; margin-bottom:14px !important;
  /* o piso único de 192px (o mesmo do `.title-bg` geral) em vez do `0` que
     anulava as alturas antigas — Parceiros e Suporte crescem além pelo
     conteúdo, mas nunca ficam abaixo das outras telas (03/08). */
  min-height:192px !important; height:auto !important; box-sizing:border-box;
}

.title-bg .hkick, .title-bg .dz-kick, .psum-hero .kick,
.pagehero.title-bg .kick, .pnlhero.title-bg .kick{
  font-family:var(--tech, Oxanium), Oxanium, sans-serif !important;
  font-size:10px !important; font-weight:600 !important;
  letter-spacing:.3em !important; text-transform:uppercase !important;
  color:rgba(255,255,255,.44) !important;
  margin:0 !important;
}
.title-bg .htitle, .title-bg .dz-h1, .psum-hero h1,
.pagehero.title-bg h1, .pnlhero.title-bg h1{
  /* A família e o tamanho entram aqui porque as páginas convertidas tinham as
     suas: medido, Parceiros vinha em Cinzel 48/700 e Suporte em Barlow 40/700,
     contra Oxanium 80/800 do padrão — e Cinzel é reservado ao cerimonial (hero,
     pódio), nunca a cabeçalho de página. */
  font-family:var(--display, Oxanium), Oxanium, sans-serif !important;
  font-size:clamp(34px, 5.2vw, 80px) !important;
  font-weight:800 !important;
  letter-spacing:-.018em !important;
  line-height:1.0 !important;
  margin:12px 0 0 !important;
}
/* O painel entra no mesmo bolo (Bruno 31/07: "painel do jogador tb, tudo" e
   depois "tirar o quadro, reajustar altura, efeito não chegar nos quadrantes").
   Ele nasceu com o texto à esquerda dentro do `.pnl-card`; agora centraliza como
   as outras, perde o cartão e a altura passa a ser a do texto. */
.psum-hero{
  position:relative; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  /* Era 306px de caixa para ~120px de texto. A altura vinha de
     `aspect-ratio:1600/430` + `width:100%` (site.html:3912), posto ali para a ARTE
     caber inteira — 1140/3,7209 = 306px. Sem arte, a proporção perdeu o motivo:
     a caixa volta a ser o texto, como nas seções. */
  aspect-ratio:auto !important;
  /* min-height era 0 (anulava o aspect-ratio antigo) e deixava o Painel com
     157px — o único abaixo do piso de 192px que o `.title-bg` já tem. O piso
     é o MESMO da regra geral: mexeu lá, mexa aqui (03/08). */
  min-height:192px !important; max-height:none !important; height:auto !important;
  box-sizing:border-box;
  padding:clamp(22px,3vh,44px) 22px clamp(12px,1.6vh,20px) !important;
  background:transparent !important;
}
.psum-hero .pnl-who{ display:flex; flex-direction:column; align-items:center; }
/* SEM QUADRO no painel — o cartão (fill + moldura) sai, como saiu nas seções.
   O `.psum` (a barra de stats) fica como o único bloco desenhado. */
.pnl-card.pnl-summary{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  overflow:visible !important;   /* deixa o halo vazar em cima, como nas seções */
}
/* A barra de stats fechava a caixa POR BAIXO: `border:1px solid rgba(255,255,255,.09)`
   nos quatro lados. O card e o hero já estavam limpos — medido, os dois com
   `background:rgba(0,0,0,0)` e `box-shadow:none` —, então o "quadro envolvendo
   tudo" era esta borda somada ao halo em cima. Sobra o fio de topo, que separa os
   números do título; entre si eles já se separam pelas divisórias verticais. */
#v-painel .psum{
  border:0 !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
  border-radius:0 !important;
  background:transparent !important;
}
.title-bg .hlede, .title-bg .dz-lede{
  font-family:var(--body, Barlow), Barlow, system-ui, sans-serif !important;
  font-size:15px !important; font-weight:400 !important;
  line-height:1.6 !important; letter-spacing:normal !important;
  color:rgba(236,240,247,.62) !important;
  margin:14px 0 0 !important;
  /* uma linha só — em Notícias havia `max-width:372.9px`, que a quebrava em duas */
  max-width:min(96ch, 94%) !important;
  text-wrap:balance;
}
/* ============================================================================
   ⭐ SEM IMAGEM — só tipografia e LUZ (Bruno 31/07: "vamos remover as imagens,
   não ficou bom, vamos só de tipografia mesmo").

   Foram cinco tentativas com ilustração: quatro peças, depois duas, depois uma
   sangrando; com quadro e sem; clara e translúcida, depois escura com halo.
   Nenhuma assentou. O que sobrou é o que sempre funcionou nesta página — o
   título — então ele passa a ser o assunto, e o "efeito" é feito de luz, não de
   figura: um halo frio atrás do bloco de texto dá profundidade sem desenhar nada.

   Os atributos `--ta` continuam no HTML de propósito: ficam INERTES (nada os
   lê, o navegador nem baixa as imagens) e permitem voltar atrás sem reeditar o
   markup. As faixas seguem em `title-bgs/v2/composto/`, regeráveis pelo script.
   ========================================================================== */
/* ⭐⭐ 31/07 — O HALO ROLAVA A PÁGINA, E NINGUÉM VIA.
   O `inset` desta regra sangra para os lados de propósito: halo que para na caixa lê como
   retângulo, não como luz. Só que o sangramento é PERCENTUAL, e o container varia muito
   entre as views. MEDIDO numa janela de 1440:

       Mercado / Doação .... wrap 1080 → sangra 130px/lado → 1340   ✅ cabe
       ROLETA .............. wrap 1392 → sangra 162px/lado → 1553   🔴 rola 113px
       SUPORTE ............. wrap 1430 → sangra 172px/lado → 1602   🔴 rola 162px

   Ninguém via a barra porque `body{overflow-x:hidden}` corta — mas o documento rolava, e
   é isso que o `rotas_validate` pega. ⚖️ **Defeito que some da tela e fica no layout é o
   mais caro de achar depois:** não incomoda ninguém até incomodar todo mundo (um arrasto
   lateral no celular, uma captura cortada, um print torto).

   `overflow-x:clip` na `.view` resolve as três de uma vez — e é `clip`, NÃO `hidden`, de
   propósito: `hidden` criaria um contexto de rolagem e mataria `position:sticky` de
   qualquer filho; `clip` apenas corta. Assim o halo continua sangrando (o efeito é
   preservado, que é o motivo do sangramento existir) e o documento para de crescer.
   Resolve também os 2px que a home acusava por outro caminho. */
.view{ overflow-x:clip; }
.title-bg::before, .psum-hero::before, #donateContent .dz-top::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  /* O `bottom` é POSITIVO — para DENTRO. Com `-20%` o efeito descia 38px abaixo
     da base do banner e os cards do Mercado começam 14px depois: 24px de halo
     por trás deles. Ele tem de morrer antes do primeiro quadrante — vale para os
     cards do Mercado, os da Doação e a barra de stats do Painel.
     Em cima e nas laterais continua vazando, que é onde não há o que atrapalhar. */
  /* 🔴 A ELIPSE TEM DE CABER NA CAIXA — senão ela vira um RETÂNGULO.
     Com raio 52%x74% a cor chegava viva nas quatro bordas do pseudo e era
     cortada por elas: o degrau entre "tem cor" e "acabou o elemento" é uma
     aresta, e foi isso que o Bruno viu em volta de todo título grande.
     Como o pseudo cresceu muito para cima (-96%), 74% da altura DELE é enorme.
     Agora 41%x32%: com a queda em 86%, a cor morre por volta de 15%/85% na
     horizontal e bem antes do topo — nenhuma borda é alcançada. A intensidade
     subiu de .17 para .20 para compensar a área menor.

     A ÁREA DO HALO É A DO BANNER: largura da seção × altura do banner.
     A tentativa anterior levou o box a 210% da largura e achatou a elipse — o
     brilho ficou pequeno no meio de uma caixa enorme, que é o oposto do pedido.
     Agora o box tem a largura da seção (inset lateral 0) e a elipse preenche essa
     área: raio-x 52% cobre a largura toda, e o `transparent 72%` faz a cor morrer
     por volta de 12% e 88% — não há borda porque ela acaba antes da beirada.
     O inset VERTICAL segue intocado: quem dá altura ao brilho é o raio-y (46%),
     não a caixa. Nenhum padding/margem/gap de seção foi alterado. */
  /* O `-96%` dá espaço para o brilho subir. Ele cresce SÓ PARA CIMA: o `bottom`
     segue em 10%, então o alcance na direção da seção de baixo não muda.
     ⚠️ Mexer neste `top` altera a altura do pseudo e portanto o --halo-y de cada
     família (a fórmula está no comentário do gradiente) — os valores lá embaixo
     foram recalculados junto com esta mudança. */
  /* A CAIXA LATERAL É A DA SEÇÃO (Bruno 31/07: "a largura máxima seja aquela ali,
     sempre a largura máxima da seção respectiva do título").
     O inset lateral `0` faz o pseudo ter exatamente a largura do banner, que é a do
     conteúdo da seção — a mesma da statbar/cards logo abaixo. Quem garante que isso
     NÃO desenha o retângulo de antes é a máscara horizontal: ela chega a zero na
     borda, então não há degrau entre "tem cor" e "acabou o elemento".
     (Houve uma versão em `calc(50% - 50vw)`, sangrando 100vw — ficou largo demais e
     não respeitava a coluna da seção.) */
  /* 🔴 ALTURA FIXA, CENTRADA NO BANNER (03/08 · Bruno: "TODAS as seções devem
     ter o mesmo tamanho de halo, TODAS").

     Duas tentativas anteriores falharam pela mesma razão: a caixa era relativa
     ao banner (`-96% 0 -9% 0`, depois `-30px 0 -24px 0`), e o banner mede
     157px no Painel, 192px na maioria e 338px no Suporte. Caixa relativa →
     luz proporcional → tamanhos diferentes, medidos em 96 · 118 · 208px.

     Agora a caixa tem 300px SEMPRE — mas ANCORADA PELO RODAPÉ, não centrada.

     🔴 Centrar (a tentativa anterior, `top:50%;margin-top:-150px`) padroniza a
     ALTURA e desregula o VAZAMENTO: a sobra abaixo do banner é
     (300 − altura)/2, ou seja 71px num banner de 157px e 54px num de 192px.
     Foi o que o Bruno viu — *"o halo invade algumas seções abaixo, algumas sim
     outras não"*. Ancorando em `bottom`, a sobra é a MESMA em toda seção,
     porque é um número, não uma conta.

     🔴 `bottom:0` — VAZAMENTO ZERO (03/08). A versão de 24px de sobra media
     0px na Home · Diferenciais e 13–14px nas demais: a luz era a mesma, mas
     naquela seção o conteúdo de baixo começa mais perto e comia a sobra. Ou
     seja, a "transição de seção" tinha tamanho diferente a cada página —
     exatamente o que o Bruno apontou ("invade algumas, outras não").
     Com a luz morrendo NA BASE do banner, o vazamento é zero em todas por
     construção, e não depende de onde o conteúdo seguinte começa.
     `left/right:0` mantém a largura da seção, como pedido em 31/07. */
  top:auto; left:0; right:0; bottom:0;
  height:300px; margin-top:0;
  /* 🔴 O EFEITO NÃO PODE DESENHAR UM QUADRO (Bruno 31/07: "o painel do jogador
     ainda tem um quadro envolvendo tudo").
     O que ele viu não era um card — era ESTE pseudo-elemento. Ele é retangular, e
     os gradientes ainda tinham opacidade ao chegar na borda (paravam em 68% e
     72% do raio): o degrau entre "tem cor" e "acabou o elemento" lê como moldura.
     Agora os dois morrem por volta da metade do raio, então a borda do retângulo
     já está em zero — e o escurecimento caiu de .55 para .28, que era o que dava
     o contorno mais visível. */
  /* Só a LUZ. O segundo gradiente (escurecimento `rgba(10,14,26,…)`) saiu: era ele
     que desenhava o quadro — um escurecimento largo sobre fundo já escuro cria uma
     área de borda perceptível, e o Bruno leu isso como card duas vezes seguidas.
     Brilho azul sozinho não fecha forma: ele só acende o miolo e some.

     🔴 O `75%` NÃO É CHUTE — é onde cai o centro do TEXTO dentro deste
     pseudo-elemento. Duas assimetrias empurram esse ponto para longe do óbvio:

     1. o inset vertical (-40% em cima, +10% para dentro embaixo) faz o ::before ir
        de -40% a 90% da altura do banner — 130% de altura, centro em 25%;
     2. o padding do banner também é assimétrico (~36px em cima, ~10px embaixo),
        então o TEXTO não fica no centro do banner: fica ~15px abaixo dele.

     Mirar o centro do banner (o que dava 69,2%) ainda deixava 15px de erro —
     medido. O alvo é o centro do texto:
         (centro_do_texto − topo_do_pseudo) ÷ altura_do_pseudo = 192 ÷ 256 = 0,75
     Mexeu no inset ou no padding? Remeça: o desvio é medível comparando o foco
     com a caixa de Range do kicker+título+lede. */
  /* 🔴 NÃO É MAIS ELIPSE — é uma FAIXA (Bruno 31/07: "tá um cone, pode ser um
     retângulo orgânico de luz, só pra ser uma transição de seção").
     Uma elipse larga o bastante para cobrir a seção é obrigatoriamente mais BAIXA
     nas pontas do que no meio: as quinas de cima ficam apagadas e o miolo lê como
     cone. Não é calibragem — é a forma. Alargar o raio-x só alonga o cone.
     A luz agora é dada por ALTURA (degradê vertical, uniforme em toda a largura) e
     as pontas somem pela máscara horizontal. Assim toda a faixa tem o mesmo brilho.

     As paradas são relativas a `--halo-y` para não jogar fora a calibragem por
     família (base 82,5% · home 87,4% · Parceiros 76,4% · Suporte 72% · Painel 81,6%):
       −53%  nasce   → ~62px ACIMA do topo do banner (fica dentro da seção)
       −32%  cheia
       − 2%  ainda cheia (cobre kicker + título + lede)
       +13%  morre   → na home, exatamente na base do banner: bleed ZERO para baixo.
     Sem invadir a seção de cima nem a de baixo, que é o pedido. */
  /* ══════════════════════════════════════════════════════════════════════════
     🔴 REESCRITO EM 03/08 — o Bruno: *"TODAS as seções devem ter o mesmo tamanho
     de halo e de seção, TODAS. tá mt despadronizado. Tem secoes aonde o texto de
     baixo ta fora da Luz."*

     MEDIDO ANTES DE MEXER (`node tools/halo_audit.cjs`, 8 seções em 1920):
       · altura da luz: 96px · 118px · 208px — TRÊS tamanhos;
       · texto fora da luz em 7 das 8 seções (49–50px na maioria).

     A CAUSA não era calibragem, era a UNIDADE. As paradas eram % da altura do
     PSEUDO, e o pseudo é % da altura do BANNER — que muda com o texto de cada
     página (157px no Painel, 192px na maioria, 338px no Suporte). Logo a luz
     ESCALAVA junto: banner maior, halo maior. Nenhum `--halo-y` conserta isso,
     porque a variável desloca a faixa e o problema era o tamanho dela.

     E o texto ficava fora porque a faixa cheia acabava em `halo-y − 2%` do
     pseudo (≈80% dele), enquanto o lede vai até a base do banner.

     AGORA: paradas em PIXELS a partir da caixa, e a caixa é banner + margem
     fixa. A luz tem a mesma altura em toda seção, e a faixa cheia cobre do topo
     do kicker à base do lede porque termina exatamente na base do banner —
     onde o texto termina.
       0    → topo da caixa (30px acima do banner)
       40px → cheia (= 10px abaixo do topo do banner; o kicker começa em ~36px)
       100%−24px → ainda cheia (= a base do banner, onde o lede acaba)
       100% → morre, 24px ABAIXO do banner e ainda dentro do pseudo (sem aresta)

     ⚠️ `--halo-y` fica ignorado de propósito; os overrides por família seguem no
     arquivo mas não têm mais efeito — remover cada um exigiria caçar as 5
     famílias, e o próximo a ler precisa entender por que eles não fazem nada.
     ══════════════════════════════════════════════════════════════════════════ */
  /* Paradas em % de uma caixa de altura FIXA (300px) — valem os mesmos pixels
     em toda seção. A caixa termina NA BASE do banner, então:
       0     → topo, 300px acima da base do banner
       22%   → 66px: cheia. Cobre o kicker mesmo no banner mais baixo
       92%   → 276px: ainda cheia — 24px acima da base, onde o lede termina
       100%  → morre nos últimos 24px, dentro da caixa: sem degrau, sem aresta

     🔴 OPACIDADE .15 → .18 (03/08): a amplitude do halo era de ~13 níveis
     medidos, e com tão pouca faixa qualquer degrau de quantização vale
     proporcionalmente muito — foi o que produziu o salto de 8 níveis (60% da
     amplitude!) em 5 das 7 seções. Mais amplitude, degrau relativo menor. */
  background:
    linear-gradient(180deg,
      transparent 0,
      rgba(79,140,240,.18) 22%,
      rgba(79,140,240,.18) 92%,
      transparent 100%);
  /* AS PONTAS DISSOLVEM, não são cortadas — e é isto que permite a caixa terminar
     na borda da seção sem desenhar aresta. A faixa é cheia no miolo (32%..68%) e
     cai a ZERO exatamente em 0% e 100%, ou seja, na largura máxima da seção: o fade
     começa bem antes da borda e já chegou em zero quando ela acaba.
     Vertical não precisa de máscara: o próprio degradê nasce e morre em transparente. */
  /* 🔴 A RAMPA LATERAL FOI DE 32% PARA 42% (03/08). A máscara é o que dissolve
     as pontas — mas ela também DIVIDE a amplitude no caminho: a 12% da largura
     ela deixa passar só 12/32 = 37% da luz, e ali a faixa cai para ~13 níveis.
     É nessa zona lateral que o degrau aparece mais (medido: salto de 8 níveis
     em 5 de 7 seções, sempre na subida). Com 42%, a mesma amplitude se espalha
     por mais pixels na horizontal — a transição fica mais lenta e o degrau,
     menor. O miolo cheio encolhe de 36% para 16% da largura, o que ainda cobre
     o título com folga. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 58%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 58%,transparent 100%);
  /* `!important` vence o `opacity:0` com que a regra da Doação foi neutralizada
     quando a arte dela saiu — sem isso o efeito não aparece só lá. */
  opacity:1 !important;
}
/* 🔴 O QUADRO PRETO FIXO DO PAINEL era o `.psum-hero::after` (site.html:3926):
   um `linear-gradient` escuro que existia para costurar a BASE DA ARTE na cor do
   card. A arte saiu, o scrim ficou — e como ele cobre exatamente a caixa do hero,
   pintava um retângulo mais escuro que o fundo. Medido: 491,118 1140x163, o box
   do `.psum-hero` na régua. */
.psum-hero::after{ content:none !important; background:none !important; }
.psum-hero::before{ --halo-y:81.6%; }

/* DROP SHADOW em kicker/título/lede de TODAS as telas (Bruno 31/07: "faltou só o
   drop shadow curto igual tem no doacao heroes"). Os valores são os do
   `#donateContent` — a Doação era a única com a sombra curta, porque foi feita
   para descolar o texto de uma arte que as outras não tinham. Sem arte, ela
   continua útil: é o que assenta a tipografia no escuro. */
/* 🔴 REESCRITO 03/08 — este bloco é o que MANDA (tem `!important`); as regras
   sem `!important` mais abaixo nunca chegaram a valer.

   Saiu a névoa: `0 3px 12px`, `0 3px 14px` e, no título, `0 8px 30px` — 30px
   de desfoque deslocados 8px. Desfoque grande não desenha contorno, escurece
   uma área do tamanho da letra embaixo dela; em display de 72px vira mancha.
   Entra o que o Bruno descreveu: 1px à direita, 1px abaixo, desfoque ZERO —
   a borda preta parcial. O segundo par no título (2px/2px, 1px de desfoque)
   só assenta, sem espalhar.

   O glow azul de 42px também saiu: ele existia para devolver "a luz que a arte
   dava", e hoje quem faz isso é o halo atrás do texto. Somados, viravam o
   efeito de que o Bruno reclamou duas vezes. */
.title-bg .hkick, .title-bg .dz-kick, .psum-hero .kick,
.pagehero.title-bg .kick, .pnlhero.title-bg .kick{
  text-shadow:1px 1px 0 rgba(0,0,0,.9) !important;
}
.title-bg .hlede, .title-bg .dz-lede,
.pagehero.title-bg p, .pnlhero.title-bg p{
  text-shadow:1px 1px 0 rgba(0,0,0,.9) !important;
}
.title-bg .htitle, .title-bg .dz-h1, .psum-hero h1,
.pagehero.title-bg h1, .pnlhero.title-bg h1{
  text-shadow:1px 1px 0 rgba(0,0,0,.92),
              2px 2px 1px rgba(0,0,0,.5) !important;
}
/* filete do kicker — o mesmo traço curto que a home já usa antes do rótulo */
.title-bg .hkick::before, .title-bg .dz-kick::before, .psum-hero .kick::before{
  content:""; display:inline-block; vertical-align:middle;
  width:22px; height:1px; margin-right:10px;
  background:linear-gradient(90deg, transparent, rgba(79,140,240,.85));
}

/* ENCOSTAR no bloco de baixo, como no painel (Bruno 2026-07-30).
   No `.pnl-card` o vão entre a arte e a barra de stats é ZERO — eles são filhos do
   mesmo cartão. Na home o banner e o conteúdo são irmãos dentro de um `.wrap` que é
   GRID, e o afastamento vem do `row-gap` (`home-ui-v3.css:129`,
   `gap:clamp(16px,2.2vh,28px)!important` — 19,56px na tela do Bruno). Gap é uniforme:
   não dá para zerá-lo só embaixo do banner sem colar tudo o mais. Então cancela-se
   com o MESMO clamp em margem negativa — se o gap mudar lá, muda aqui junto. */
/* `!important` porque `home-ui-v3.css` estiliza estes mesmos filhos com `!important`
   (é a regra da casa — ver skill heroes-ui §8.2); sem ele a margem computa 0px. */
body.deep #v-inicio .hsec:not(#s-inicial) > .wrap > .title-bg{
  margin-bottom:calc(-1 * clamp(16px,2.2vh,28px)) !important;
}
/* O `border-radius:2px 2px 0 0` que existia aqui SAIU junto com o quadro — sem
   cartão não há canto para arredondar.
   O teste A/B de preto-e-branco (`#s-rankings .title-bg::before{filter:grayscale}`)
   também saiu, por ter ficado redundante: o pack v2 inteiro já é monocromático
   por especificação, medido saturação 0,0 nas 40 peças. */
/* ============================================================================
   SOMBRA DO TEXTO — contorno curto, não névoa (03/08)

   O Bruno: *"a unica coisa que me refiro com drop shadow na fonte, é meio que
   um contorno parcial, uma shadow pequena e quase nada deslocada pra baixo e
   pra direita, gerando uma borda preta, sem esse efeito absurdo que tá hoje."*

   O que estava aqui: `0 2px 5px` + `0 8px 30px` no título. A segunda é uma
   NÉVOA — 30px de desfoque deslocados 8px para baixo — que não desenha borda
   nenhuma: ela escurece uma área do tamanho da própria letra abaixo dela. Em
   fonte display de 72px isso vira uma mancha, e é o "efeito absurdo".

   O que entra: 1px para a direita, 1px para baixo, desfoque ZERO. Isso é o que
   produz a BORDA PRETA parcial — o contorno aparece só nos lados oposto à luz,
   que é como sombra funciona. O segundo par (2px/2px com 1px de desfoque) só
   assenta a letra no fundo sem espalhar.
   ============================================================================ */
.title-bg .dz-kick, .title-bg .hkick,
.title-bg .dz-lede, .title-bg .hlede{ text-shadow:1px 1px 0 rgba(0,0,0,.9); }
.title-bg .dz-h1, .title-bg .htitle{ text-shadow:1px 1px 0 rgba(0,0,0,.92), 2px 2px 1px rgba(0,0,0,.5); }
@media(max-width:900px){ .title-bg::before{ opacity:.82; } }

/* ============================================================================
   HOME — destravar a altura das seções com banner (Bruno r5). As seções da home
   (#v-inicio .hsec) têm a .wrap como grid/flex com min-height:100dvh, projetada p/
   um header baixo. O banner .title-bg (proporção da arte, ~320px) deixou o conteúdo
   maior que 100dvh; como a .wrap comprimia (grid/flex) em vez de crescer, o conteúdo
   TRANSBORDAVA sobre a seção vizinha (a arte da Wiki caía sobre a tabela do Server Info).
   Fix: block flow na .wrap → a seção cresce com o conteúdo e as seções empilham sem
   sobrepor. Recupera o `gap` do flex com margin. (Só #v-inicio; as views não usam .hsec.) */
/* !important: seções como #s-serverinfo têm regra grid com 2 ids (mais específica). */
body.deep #v-inicio .hsec:not(.hero) > .wrap{ display:block !important; min-height:0 !important; height:auto !important; }
body.deep #v-inicio .hsec:not(.hero) > .wrap > * + *{ margin-top:clamp(8px,1.4vh,18px); }
/* REENQUADRAMENTO (Bruno 2026-07-27): TODAS as seções da home seguem a MESMA largura do
   Diferenciais. O mosaico dele tem largura INTRÍNSECA (~1065px, os 4 cards do grid) e não
   estica; então Ranking/Server Info/Wiki (que eram 1120/980/1040) vêm p/ 1065, centralizados,
   com padding lateral simétrico no wrap. Banner e conteúdo ficam na mesma largura/posição. */
/* 🔴 O CAP DE 1065px SAIU — ele partia de uma premissa que ENVELHECEU.
   O comentário acima diz "o mosaico do Diferenciais tem largura INTRÍNSECA (~1065px)
   e não estica". Isso era verdade em 27/07. Depois o `home-ui-v3.css:135` alargou o
   Diferenciais de propósito ("o cap de 1200 deixava ~360px de margem preta em 1920"),
   e o Diferenciais passou a NÃO TER CAP nenhum: ele é simplesmente
   `wrap − 2× padding lateral`.
   Resultado medido em 1920: Diferenciais **1483px** de conteúdo contra **1065px** das
   outras três — **418px mais estreitas** (107px em 1440). O `home-ui-v3.css:111` já
   tinha casado a largura do `wrap` (1560 nas quatro, com o aviso "mexeu aqui? mexa
   junto no #s-vitrine"), e este cap recriava o degrau um nível abaixo, no conteúdo.
   Duas regras concordando no contêiner e discordando no conteúdo.

   ⚠️ NÃO BASTAVA TIRAR O CAP: o padding lateral do `>.wrap` dessas três media **0px**
   e o do Diferenciais **38,4px**. Sem igualar, elas ficariam 76,8px MAIS largas que o
   alvo — passariam do outro lado. Agora as quatro usam `clamp(20px,2vw,44px)`, que é
   literalmente o valor do `#s-vitrine` (`home-ui-v3.css:127`).

   ⚠️ E O `:not(#s-inicial)` NÃO É ENFEITE — é o que faz esta regra vencer.
   `home-ui-v3.css:111` é `body.deep #v-inicio .hsec:not(#s-inicial)>.wrap`, e o id
   DENTRO do `:not` conta: dá 2 ids + 3 classes. A regra antiga daqui tinha 2 ids + 2
   classes e PERDIA, apesar de o `doacao-v2.css` carregar depois — foi por isso que o
   `padding-left` com `!important` desta linha media 0px na tela. Com `:not(#s-inicial)`
   somam 3 ids e ela ganha. (O gotcha está documentado na skill `heroes-ui` §8.2.) */
@media(min-width:901px){
  body.deep #v-inicio #s-rankings:not(#s-inicial) > .wrap,
  body.deep #v-inicio #s-serverinfo:not(#s-inicial) > .wrap,
  body.deep #v-inicio #s-wiki:not(#s-inicial) > .wrap{
    padding-left:clamp(20px,2vw,44px) !important;
    padding-right:clamp(20px,2vw,44px) !important;
  }
  body.deep #v-inicio #s-rankings:not(#s-inicial) #secRankings,
  body.deep #v-inicio #s-serverinfo:not(#s-inicial) .si-body,
  body.deep #v-inicio #s-wiki:not(#s-inicial) .wiki-body,
  body.deep #v-inicio #s-serverinfo:not(#s-inicial) .title-bg,
  body.deep #v-inicio #s-wiki:not(#s-inicial) .title-bg{
    max-width:none !important; width:100% !important;
    margin-left:auto !important; margin-right:auto !important;
  }
}
/* casa o halo com o banner alargado destas duas seções (a largura da seção é o limite) */
body.deep #v-inicio #s-serverinfo .title-bg::before, body.deep #v-inicio #s-wiki .title-bg::before{ left:0 !important; right:0 !important; }

/* ============================================================================
   PAINEL / MINHA CONTA (#v-painel, Bruno 2026-07-27): mesmo tratamento .title-bg no
   header (.pnlhead), com a arte "minha-conta" (santuário da conta). O header do painel
   é flex align-end/esquerda (layout próprio) → aqui centraliza igual as outras páginas.
   O ::before recua 20px (o `.wrap{padding:0 20px}`) p/ o banner alinhar com o conteúdo
   (statbar/pnlgrid). Sombra p/ .kick e h1 (que o .title-bg genérico não cobre). */
#v-painel .pnlhead{ align-items:center; text-align:center; }
#v-painel .pnlhead .pnl-who{ flex:none; }
/* o webp da minha-conta já vem com realce LEVE embutido (crop da source), então aqui só o
   recuo lateral — a opacity .90 e a máscara do .title-bg fazem o blend igual às outras. */
#v-painel .pnlhead::before{ left:20px; right:20px; }
#v-painel .pnlhead .kick, #v-painel .pnlhead h1{ text-shadow:0 2px 8px rgba(0,0,0,.92), 0 1px 2px rgba(0,0,0,.95); }
/* título no MESMO estilo das outras páginas (.dz-h1/.htitle): display font, 800, uppercase,
   grande, com o destaque em azul. O .pnl-who h1 padrão era menor (clamp 26-40) e sem isso. */
#v-painel .pnlhead h1{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(30px,5.1vw,80px); line-height:.98; letter-spacing:normal; margin:2px 0 0; }
#v-painel .pnlhead h1 b{ color:#5aa9ff; -webkit-text-fill-color:#5aa9ff; }

/* ============================================================================
   HOME — hero centralizado + DIVISÓRIAS entre seções (Bruno 2026-07-27).
   HERO: o `padding-left` do rail (180px) deslocava o título — que virou uma frase larga
   ("Torne-se um Herói"). Como o conteúdo é centralizado, zera o padding e
   força o h1 a ocupar a largura toda com texto centralizado → título centrado na tela. */
/* 🔴 21/08: zerar SÓ o padding-left deixou o bloco assimétrico — o `.wrap` mantinha
   `padding-right:20px`, e o título ficava 10px à esquerda do eixo dos botões, da
   barra de status e da contagem. Num texto grande e centralizado isso se enxerga
   (o Bruno chamou de "meio torto"). Centralizar exige os dois lados iguais; o
   respiro lateral volta no mobile, onde ele é necessário. */
#v-inicio .hero-inner, #v-inicio .hcta{ padding-left:0; padding-right:0; }
@media (max-width:900px){
  #v-inicio .hero-inner, #v-inicio .hcta{ padding-left:16px; padding-right:16px; }
}
#v-inicio .hero-inner{ max-width:none; }
body.deep #v-inicio .hero h1{ width:100%; text-align:center; }

/* SEÇÕES COLADAS + SEM DIVISÓRIA (Bruno 2026-07-27): o glow/anel entre seções foi removido
   (o border-radius:50% virava uma órbita azul horrível). A .hdiv (que ainda ocupava 60-100px
   de espaço morto entre seções) é ELIMINADA do fluxo → as seções ficam bem próximas.
   O padding vertical mínimo mora nas regras-fonte (site.html:2834 base e :4326 override dos 3);
   o nav-h saiu do padding-top pois o `scroll-margin-top:var(--nav-h)` já reserva o nav no snap. */
body.deep #v-inicio .hdiv{ display:none !important; }

/* HEADER FINO de card (sem banner de imagem — Bruno removeu as artes) */
/* Bruno 2026-07-26: TIRAR a faixa/header escuro. O card é <section> e herdava `section{padding:44px 0}`
   (site.html:216) → 44px mortos no topo/base. Zeramos aqui (Mercado E Doação); os títulos viram texto
   simples colados no início (sem strip escuro, sem border divisória). */
.dz-card{ overflow:hidden; display:flex; flex-direction:column; padding:0; }
.dz-banner{ position:relative; min-height:auto; display:flex; flex-direction:column; justify-content:center; padding:14px 15px 0;
  border-bottom:0; background:none; }
.dz-banner::after{ content:none; }
.dz-banner>*{ position:relative; z-index:1; }
.dz-b-k{ font-family:var(--tech); text-transform:uppercase; letter-spacing:.22em; font-size:9px; color:var(--dz-mut2); }
.dz-b-t{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:20px; line-height:1; margin:3px 0 3px; color:var(--dz-ink); }
.dz-b-p{ font-size:11.5px; color:var(--dz-mut); max-width:56ch; line-height:1.35; }
/* Bruno r16: banner dos Pacotes é full-width → subtítulo numa linha só (o card Coins continua com quebra) */
.dz-packs-sec .dz-b-p{ max-width:none; white-space:nowrap; }
@media(max-width:720px){ .dz-packs-sec .dz-b-p{ white-space:normal; } }
/* Bruno 2026-07-26: saldo no CANTO SUPERIOR DIREITO da janela */
.dz-b-saldo{ position:absolute; top:12px; right:14px; transform:none; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:6px 11px; border-radius:2px; background:rgba(0,0,0,.35); box-shadow:inset 0 0 0 1px var(--dz-hair); }
.dz-b-saldo .k{ font-family:var(--tech); text-transform:uppercase; letter-spacing:.14em; font-size:8.5px; color:var(--dz-mut2); }
.dz-b-saldo b{ font-family:var(--tech); font-weight:800; font-size:15px; color:var(--dz-blue); }
.dz-b-saldo span{ font-family:var(--tech); text-transform:uppercase; font-size:8.5px; letter-spacing:.1em; color:var(--dz-mut2); }
.dz-bd{ padding:14px 15px; flex:1; display:flex; flex-direction:column; }

/* topo 2col — MESMA ALTURA */
.dz-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; }
@media(max-width:900px){ .dz-grid2{ grid-template-columns:1fr; } }

/* COINS */
#donateContent #colCoins{ display:flex; flex-direction:column; gap:6px; flex:1; justify-content:space-between; }
.dz-coinrow{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 12px; min-height:50px; background:rgba(255,255,255,.022); border:0; border-radius:2px; box-shadow:inset 0 0 0 1px var(--dz-hair); cursor:pointer; color:inherit; font:inherit; text-align:left; transition:background .15s; }
.dz-coinrow:hover{ background:rgba(255,255,255,.06); }
.dz-coinrow.pop{ box-shadow:inset 0 0 0 1px rgba(79,140,240,.7); }
/* Bruno r15: imagens das coins levemente MAIORES e SEM sombra (filter:none). Flip = caminhão na orientação do carrinho. */
/* > img: SO o icone do pacote. Sem o filho direto, a regra alcancava tambem a marca do Pix
   dentro do botao (31/08) — esticada a 46x46, ela inchava o botao e saia do centro. */
.dz-coinrow > img{ width:46px; height:46px; object-fit:contain; flex:none; filter:none; }
.dz-coinrow > img.flip{ transform:scaleX(-1); }
.dz-coinrow b{ font-family:var(--display); font-weight:800; font-size:16px; color:var(--dz-ink); }
.dz-coinrow b small{ font-family:var(--tech); font-size:9px; letter-spacing:.08em; color:var(--dz-mut2); font-weight:600; margin-left:5px; }
.dz-coinrow .flag{ font-family:var(--tech); font-size:8px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:3px 7px; border-radius:2px; color:#04121f; background:var(--dz-blue); }
.dz-coinrow .pr{ margin-left:auto; font-family:var(--tech); font-weight:800; font-size:15px; color:var(--dz-blue); white-space:nowrap; }
.dz-coinrow .add{ color:var(--dz-mut2); font-size:15px; font-weight:700; }
.dz-coinrow:hover .add{ color:var(--dz-ink); }
/* Bruno r8: linhas de 500 e 1000 ~20% MAIORES (altura, imagem, textos) — o #colCoins space-between absorve, sem crescer o card */
.dz-coinrow.big{ min-height:60px; padding:11px 13px; gap:13px; }
.dz-coinrow.big > img{ width:58px; height:58px; }
.dz-coinrow.big b{ font-size:19px; }
.dz-coinrow.big b small{ font-size:10.5px; }
.dz-coinrow.big .pr{ font-size:18px; }
.dz-coinrow.big .dz-tik{ font-size:10.5px; }
/* bônus de cash ativo do pacote (29/09/2026): mesmo corpo do ticket, na cor de "a mais" */
.dz-bonus{ font-family:var(--tech); font-size:9px; font-weight:800; letter-spacing:.04em; color:var(--dz-green); white-space:nowrap; padding:2px 5px; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(91,214,160,.35); }
.dz-coinrow.big .dz-bonus{ font-size:10.5px; }
/* número + selos num bloco que quebra POR DENTRO: sem espaço, os selos descem sob o número e o preço e o Pix
   ficam na linha (antes quem descia era o botão — R$ 200 com Popular + bônus + ticket, 30/09/2026) */
.dz-coinrow .dz-cn{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px; flex:1 1 0; min-width:0; }
.dz-note{ margin:11px 0 0; padding-top:11px; border-top:1px solid var(--dz-hair); font-size:10.5px; color:var(--dz-mut2); line-height:1.5; }
.dz-note b{ color:var(--dz-green); }
.dz-note .g{ color:var(--dz-gold); }
.dz-loading{ text-align:center; color:var(--dz-mut2); padding:24px 0; font-size:13px; }

/* PREMIUM 2col — enche a altura (perks distribuídos), sem drop-badge */
#donateContent #colPremium{ display:grid; grid-template-columns:1fr 1fr; gap:12px; flex:1; }
@media(max-width:560px){ #donateContent #colPremium{ grid-template-columns:1fr; } }
.dz-prem{ position:relative; padding:14px; border-radius:2px; background:rgba(255,255,255,.02); box-shadow:inset 0 0 0 1px var(--dz-hair); display:flex; flex-direction:column; gap:9px; }
.dz-prem.elite{ background:var(--dz-fill-hi); box-shadow:inset 0 0 0 1px rgba(242,183,5,.4),0 0 34px -24px var(--dz-gold); }
.dz-prem.elite::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--dz-gold),transparent); }
.dz-p-name{ font-family:var(--display); font-weight:800; font-size:17px; text-transform:uppercase; line-height:1; color:var(--dz-ink); }
.dz-p-days{ font-family:var(--tech); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--dz-mut2); margin-top:2px; }
.dz-perks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; flex:1; justify-content:space-between; }
.dz-perks li{ display:flex; align-items:flex-start; gap:7px; font-size:11.5px; color:#b9c0cc; line-height:1.3; }
.dz-perks li .ck{ color:var(--dz-green); font-weight:900; flex:none; margin-top:.5px; }
.dz-perks li.val{ color:#e6d3a4; font-weight:600; }
.dz-perks li.val .ck{ color:var(--dz-gold); }
.dz-p-foot{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding-top:8px; border-top:1px solid var(--dz-hair); }
.dz-tag-rec{ position:absolute; top:12px; right:12px; font-family:var(--tech); font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#241803; background:linear-gradient(90deg,#f0d69a,#d9b25a); padding:3px 7px; border-radius:2px; }

/* PACOTES v5 (Bruno 2026-07-26 r5, anexo 1): BANDA horizontal — [título+baú (esq) | perks em colunas (meio) |
   fantasias (dir, só Founder)] + RODAPÉ full-width. kicker+badge na MESMA linha (topline). */
#donateContent #colPacks{ display:flex; flex-direction:column; gap:14px; }
/* Bruno r9: pacotes usam o CINZA (--dz-fill-hi) igual Premium/Founder — o --dz-fill dentro do card-wrapper
   empilhava 2 camadas e escurecia demais o Starter. */
.dz-pack{ position:relative; padding:16px 18px; border-radius:2px; background:var(--dz-fill-hi); border:1px solid var(--dz-hair);
  box-shadow:var(--dz-lift),var(--dz-drop); display:flex; flex-direction:column; gap:12px; }
.dz-pack.founder{ background:var(--dz-fill-hi); border-color:rgba(242,183,5,.35); }
/* BANDA (Bruno r13): título | perks | fantasias, com DIVISÓRIAS verticais (.dz-pk-div) full-height e conteúdo CENTRALIZADO.
   align-items:stretch faz as divisórias percorrerem a altura toda; cada bloco de conteúdo usa align-self:center. */
.dz-pk-band{ display:flex; align-items:stretch; gap:14px; position:relative; z-index:1; }
@media(max-width:820px){ .dz-pk-band{ flex-direction:column; align-items:stretch; gap:12px; } .dz-pk-div{ display:none; } }
/* DIVISÓRIA vertical */
.dz-pk-div{ flex:none; width:1px; background:var(--dz-hair); align-self:stretch; }
/* bloco do título (esquerda, largura fixa) — CENTRALIZADO na altura */
.dz-pk-head{ flex:0 0 auto; width:clamp(176px,18vw,224px); display:flex; flex-direction:column; gap:8px; align-self:center; }
.dz-pk-topline{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dz-pk-topline .dz-kick{ margin:0; }
.dz-pk-titlerow{ display:flex; align-items:center; gap:12px; }
/* Bruno r14: baús +30% (52→68px), sem sombra, centralizados/retos com o nome (align-items:center do titlerow) */
.dz-pk-ico{ width:68px; height:68px; object-fit:contain; flex:none; filter:none; }
.dz-pk-name{ font-family:var(--display); font-weight:800; font-size:17px; text-transform:uppercase; line-height:1.05; color:var(--dz-ink); }
.dz-badge{ display:inline-block; font-family:var(--tech); font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:2px; color:#0a1220; background:#cdd3dd; }
.dz-badge.gold{ color:#241803; background:linear-gradient(90deg,#f0d69a,#d9b25a); }
/* perks preenchem o MEIO — CENTRALIZADAS na altura da banda */
.dz-pk-perks{ list-style:none; margin:0; padding:0; flex:1; min-width:0; align-self:center; }
.dz-pk-perks li{ display:flex; align-items:flex-start; gap:6px; font-size:11.5px; color:#b9c0cc; line-height:1.3; }
.dz-pk-perks li .ck{ color:var(--dz-green); font-weight:900; flex:none; }
.dz-pk-perks li.val{ color:#e6d3a4; }
.dz-pk-perks li.val .ck{ color:var(--dz-gold); }
/* STARTER: colunas com divisória vertical "|" (column-rule) */
.dz-pk-perks.cols{ columns:3; column-gap:22px; column-rule:1px solid var(--dz-hair); }
.dz-pk-perks.cols li{ break-inside:avoid; margin-bottom:5px; }
@media(max-width:760px){ .dz-pk-perks.cols{ columns:2; } }
@media(max-width:480px){ .dz-pk-perks.cols{ columns:1; } }
/* FOUNDER: 2 colunas COM divisória vertical (column-rule), igual o Starter */
.dz-pk-perks.two{ display:block; columns:2; column-gap:20px; column-rule:1px solid var(--dz-hair); }
.dz-pk-perks.two li{ break-inside:avoid; margin-bottom:5px; }
@media(max-width:560px){ .dz-pk-perks.two{ columns:1; } }
/* rodapé LARGURA TODA: preço | botões (mesmo tamanho nos dois pacotes) */
.dz-pk-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:12px; border-top:1px solid var(--dz-hair); flex-wrap:wrap; position:relative; z-index:1; }
.dz-pk-btns{ display:flex; gap:7px; flex-wrap:wrap; }
/* ===== FOUNDER — palco (Bruno r12): COLUNA = label "Fantasia" no topo + inner (palco). Conteúdo reduzido levemente. ===== */
.dz-pack.founder{ gap:10px; }
.dz-founder-stage{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:4px; width:206px; align-self:center; }
/* Bruno r13: label da fantasia menor + só o texto "Fantasia de Lançamento" */
.dz-fantasy-label{ font-family:var(--tech); font-size:8px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--dz-gold); text-align:center; line-height:1.3; }
/* conjunto da fantasia REDUZIDO (Bruno r13) */
/* Bruno r14: fantasias menores (84px) + FIT (padding-bottom sobe os pés pro TOPO da plataforma, não no degrau) */
.dz-founder-inner{ position:relative; display:flex; align-items:flex-end; justify-content:center; gap:0; width:100%; min-height:96px; padding-bottom:24px; }
/* CONE (Bruno r16.5: largura reduzida 78→52%). z1: à FRENTE das partículas (z0), atrás de plataforma/figuras */
.dz-founder-inner .dz-cone{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:52%; height:67px; z-index:1; pointer-events:none;
  clip-path:polygon(41% 100%,59% 100%,100% 0,0 0); mix-blend-mode:screen;
  background:linear-gradient(to top, rgba(242,183,5,.5), rgba(242,183,5,.17) 55%, transparent 92%);
  -webkit-mask-image:linear-gradient(to top,#000 14%,transparent 96%),linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to top,#000 14%,transparent 96%),linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);
  mask-composite:intersect; filter:blur(8px); }
/* PARTÍCULAS (Bruno r16.7): ATRÁS do cone (z0) — sobem da base e somem antes do topo. Menores, mais numerosas
   (12, geradas no site.js com style inline) e um pouco mais rápidas. Cor do feixe (dourado). */
.dz-founder-inner .dz-sparks{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:44%; height:54px; z-index:0; pointer-events:none; }
.dz-founder-inner .dz-sparks i{ position:absolute; bottom:0; width:1.5px; height:1.5px; border-radius:50%; background:#ffe9a8; box-shadow:0 0 3px rgba(242,183,5,.9); opacity:0; animation:dzSpark 2.2s ease-in infinite; }
@keyframes dzSpark{ 0%{ transform:translateY(0) scale(.5); opacity:0; } 22%{ opacity:1; } 70%{ opacity:.5; } 100%{ transform:translateY(-46px) scale(1); opacity:0; } }
@media(prefers-reduced-motion:reduce){ .dz-founder-inner .dz-sparks{ display:none; } }
/* plataforma pequena (física + aura sobrepostas, mesmo tamanho) — z2 (na frente do cone z1) */
.dz-founder-inner .dz-plat,
.dz-founder-inner .dz-aura{ position:absolute; left:50%; bottom:4px; transform:translateX(-50%); width:50%; height:auto; z-index:2; pointer-events:none; }
.dz-founder-inner .dz-aura{ mix-blend-mode:screen; opacity:.95; }
/* fantasias reduzidas levemente (110px), bem juntas, pé no topo do pedestal, SEM shadow preto */
/* Bruno r15: leve espaçamento entre as fantasias (não sobrepostas, não afastadas) */
/* Bruno r16: ficaram longe demais → juntar mais um pouco (-10 → -20) */
/* Bruno 31/07: "aproxime levemente, não a ponto de se encostarem, mas quase" → -20 → -25.
   O número saiu do vão VISÍVEL, medido no alfa do PNG (`tools/fantasias_medir.cjs`), não
   do vão das caixas: as imagens têm transparência nas laterais, então as caixas já se
   sobrepõem 40px enquanto as silhuetas ainda tinham 14,2px de folga. Agora: 4,2px. */
.dz-founder-inner .dz-fig-lg{ position:relative; z-index:3; margin:0 -25px; transition:transform .22s var(--ease,ease); transform-origin:bottom center; }
.dz-founder-inner .dz-fig-lg img{ height:84px; object-fit:contain; display:block; }
.dz-founder-inner .dz-fig-lg:hover{ transform:scale(1.1); z-index:4; }
/* FEIXE girante no contorno do Founder E do Premium ELITE (Bruno r16.6).
   ⚠️ ANTES usava @property --beam (conic `from var(--beam)`) — o VALOR animava mas NÃO REPINTAVA o
   gradiente em vários browsers (parecia PAUSADO). Agora: conic num ::before girado por transform:rotate()
   (SEMPRE repinta). O .race-beam vira só a MÁSCARA (moldura 1.5px); o ::before (inset -100% p/ cobrir os
   cantos em qualquer rotação) carrega o gradiente. .mir espelha → 2 brilhos gêmeos. */
body.deep .dz-pack.founder>.race-beam,
body.deep .dz-prem.elite>.race-beam{ position:absolute; inset:0; border-radius:2px; padding:1.5px; z-index:4; pointer-events:none; overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; }
/* ANEL FIXO separado do brilho (Bruno 02/08) — ver o comentário longo em site.html: o contorno não
   pode ser a base do gradiente girante, senão ele depende da animação e da luminância da cor.
   Aqui só existe a variante dourada, mas a estrutura fica igual à da home de propósito.
   Só no primeiro gêmeo: os dois pintando dobrariam a opacidade. */
body.deep .dz-pack.founder>.race-beam:not(.mir),
body.deep .dz-prem.elite>.race-beam:not(.mir){ background:rgba(242,183,5,.42); }
body.deep .dz-pack.founder>.race-beam::before,
body.deep .dz-prem.elite>.race-beam::before{ content:""; position:absolute; inset:-100%;
  /* realce curto (86%→100% da volta) em vez dos 30% de antes — ver o comentário gêmeo em
     site.html: setor grande lê como "meia moldura acesa", não como luz percorrendo.
     Transparente no resto: quem faz o contorno é o anel fixo acima. */
  background:conic-gradient(transparent 0 86%,rgba(242,183,5,.45) 93%,#fff3c4 96.5%,rgba(242,183,5,.45) 99%,transparent 100%);
  /* duração VARIÁVEL: o atraso do gêmeo é −50% dela (ver o comentário em site.html) */
  animation:dzBeamSpin var(--beam-dur,7s) linear infinite; }
/* gêmeo por DEFASAGEM de meia volta, não por espelho: espelho inverte o sentido e os dois
   pontos passam a se encontrar e voltar, que é o que o Bruno viu como "vai e volta". */
body.deep .dz-pack.founder>.race-beam.mir::before,
body.deep .dz-prem.elite>.race-beam.mir::before{ animation-delay:calc(var(--beam-dur,7s) * -.5); }
@keyframes dzBeamSpin{ to{ transform:rotate(1turn); } }
/* 🔴 era `animation:none` — que não é reduzir movimento, é desligar, e a máquina do Bruno
   tem movimento reduzido LIGADO (foi por isso que o feixe "parou" também aqui).
   A versão reduzida é a mesma luz, calma: uma volta a cada 40s em vez de 7s. */
@media(prefers-reduced-motion:reduce){ body.deep .dz-pack.founder>.race-beam, body.deep .dz-prem.elite>.race-beam{ --beam-dur:40s; } }

/* SEÇÃO Pacotes — agora é uma .dz-card (banner + bd), igual HC/Premium (Bruno r6). #colPacks vive no .dz-bd. */
/* GATE (deslogado) → LEI radius 2, SEM blur */
/* 🔴 OS DOIS PORTOES, A MESMA PECA. O componente ja era o mesmo (`gateEntrarHtml`), mas esta
   regra so alcancava a Doacao: o Mercado ficava com o vidro antigo do `.gpanel` -- cantos de
   18px, blur e outra sombra. Lado a lado pareciam feitos por duas pessoas. */
#donateGate.donate-gate,#mktGate.donate-gate{ border-radius:2px; background:rgba(15,15,15,.74);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.106), inset 0 1px 0 rgba(255,255,255,.05), 0 4px 4px rgba(0,0,0,.8); }

/* ===== CARRINHO v2 (Bruno r6): layout limpo + seletor Pix/h-Coins por item + totais Pix/h-Coins separados ===== */
.cart-box{ padding:0 !important; overflow:hidden; }
.cart-box .cart-hd{ padding:18px 20px 12px; margin:0 !important; border-bottom:1px solid var(--dz-hair); }
.cart-box .cart-items{ padding:14px 20px; gap:10px; flex:1; overflow-y:auto; }
.cart-foot{ margin-top:auto; padding:14px 20px 18px; border-top:1px solid var(--dz-hair); background:rgba(0,0,0,.28); display:flex; flex-direction:column; gap:10px; }
.cart-it{ align-items:flex-start !important; background:rgba(255,255,255,.03) !important; border:1px solid var(--dz-hair) !important; }
.cart-it.pay-coins{ box-shadow:inset 0 0 0 1px rgba(79,140,240,.45) !important; }
.cart-it .ci-main{ display:flex; flex-direction:column; gap:6px; }
.ci-pay{ display:inline-flex; border-radius:2px; box-shadow:inset 0 0 0 1px var(--dz-hair); overflow:hidden; width:max-content; }
.ci-pay .cip{ font-family:var(--tech); font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border:0; background:transparent; color:var(--dz-mut2); cursor:pointer; }
.ci-pay .cip.on{ background:rgba(79,140,240,.22); color:#cfe0ff; }
.ci-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none; }
.cart-it .ci-price.coins{ color:#8fb8ff; white-space:nowrap; }
.cart-it .ci-price.coins small{ font-size:9px; color:var(--dz-mut2); }
.cart-sum{ display:flex; flex-direction:column; gap:5px; }
.cart-sum .cs-row{ display:flex; align-items:center; justify-content:space-between; font-family:var(--display); font-size:16px; font-weight:800; }
.cart-sum .cs-row>span{ font-family:var(--tech); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--dz-mut); }
.cart-sum .cs-row>span b{ color:var(--dz-ink); font-weight:800; }
.cart-sum .cs-pix{ color:var(--dz-blue); }
.cart-sum .cs-coins{ color:#8fb8ff; font-family:var(--tech); font-size:15px; }
.cart-sum .cs-bal{ font-family:var(--tech); font-size:11px; color:var(--dz-mut2); text-align:right; margin-top:-2px; }
.cart-sum .cs-bal b{ color:var(--dz-ink); }
.cart-sum .cs-warn{ font-size:11px; color:#f0a9a0; }
.cart-sum [hidden]{ display:none !important; }   /* [hidden] precisa vencer o display:flex das linhas */
/* carrinho 100% LEI (Bruno r7): sem ícones, sem legado azulado */
.cart-box .cart-hd h3{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:18px; color:var(--dz-ink); }
.cart-hd .cart-x{ background:transparent; border:0; color:var(--dz-mut2); font-size:18px; line-height:1; cursor:pointer; padding:4px; }
.cart-hd .cart-x:hover{ color:var(--dz-ink); }
.cart-it{ gap:10px; padding:11px 13px; }
.cart-it .ci-name{ font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--dz-ink); }
.cart-it .ci-sub{ font-family:var(--tech); font-size:11px; color:var(--dz-mut2); }
.cart-it .ci-qty{ display:flex; align-items:center; gap:6px; }
.cart-it .ci-qty button{ width:24px; height:24px; border:0; border-radius:2px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--dz-hair); color:var(--dz-ink); cursor:pointer; font-size:14px; line-height:1; }
.cart-it .ci-qty button:hover{ background:rgba(255,255,255,.1); }
.cart-it .ci-qty b{ min-width:16px; text-align:center; font-size:12.5px; font-family:var(--tech); color:var(--dz-ink); }
.cart-it .ci-price{ font-family:var(--tech); font-weight:800; font-size:14px; color:var(--dz-blue); }
.cart-it .ci-rm{ background:transparent; border:0; color:var(--dz-mut2); cursor:pointer; font-size:13px; align-self:flex-start; padding:2px; }
.cart-it .ci-rm:hover{ color:#e8776b; }
.cart-coupon{ display:flex; gap:8px; margin:0; }
.cart-coupon input{ flex:1; background:rgba(0,0,0,.28); border:0; box-shadow:inset 0 0 0 1px var(--dz-hair); border-radius:2px; padding:9px 12px; color:var(--dz-ink); font-family:var(--tech); font-size:12.5px; text-transform:uppercase; outline:0; }
.cart-coupmsg{ font-size:11px; color:var(--dz-mut2); }
.cart-coupmsg.ok{ color:var(--dz-green); } .cart-coupmsg.err{ color:#e8776b; }
.cart-empty{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:52px 0; color:var(--dz-mut2); }
.cart-empty .ce-ico{ color:var(--dz-blue); opacity:.5; } .cart-empty .ce-ico svg{ width:36px; height:36px; }
.cart-empty b{ color:var(--dz-ink); font-size:14px; font-weight:600; }

/* ============================================================================
   Bruno r16 — DROP-SHADOW PRETO nos VALORES (site + carrinho): "bem perto da
   fonte", só p/ não ficar tão flat (dá profundidade/relevo). Token global
   (--val-sh) p/ afinar num lugar. Só nas CIFRAS/NÚMEROS-VALOR; não em rótulos,
   bordas ou perks. Já-brilhantes (top1/2/3 do rank, saldos do painel, timers do
   hero) ficam intactos (mais específicos).
   ========================================================================== */
:root{ --val-sh: 0 1px 2px rgba(0,0,0,.6), 0 0 1px rgba(0,0,0,.5); }
/* Doação */
.dz-price,
.dz-b-saldo b,
.dz-coinrow b,
.dz-coinrow .pr,
.dz-tik,
.dz-bonus,
/* Carrinho */
.cartfab .cf-brl,
.cart-it .ci-price,
.cart-sum .cs-pix,
.cart-sum .cs-coins,
.cart-sum .cs-row>span b,
.cart-sum .cs-bal b,
/* Mercado */
.mkt-out b,
.mkt-stat b,
/* Home (stats/TG/vitrine/ledger) */
.hnum,
.hstat .v,
.tg-slot b,
.tg-next em,
.mkcard .mk-n,
.lcd b,
.psum-i>b,
/* Notícias (contador) */
.newsblock .cd-s b,
/* Rankings (coluna de total; top1/2/3 mantêm o metálico) */
#rankTable .valtot{ text-shadow:var(--val-sh); }

/* ============================================================================
   DOWNLOAD — estilo Mercado/Doação (Bruno r16.3, refeito de novo): NÃO é bloco
   único. Header (mini-título + título grande = .dz-h1 da Doação + descrição em
   1 linha) → espaço → BOTÃO grande → 2 GRADES de requisitos (Mínimos | Recomendados).
   Reusa .dz-page/.dz-top/.dz-card. SEM fade azul (coisa antiga, removido).
   ========================================================================== */
#v-download .dl-wrap{ padding-top:70px; padding-bottom:64px; }
.dl-page{ gap:0; }

/* BOTÃO grande EMBAIXO das grades (maior) + respiro */
.dl-cta{ display:flex; justify-content:center; margin:clamp(30px,6vh,64px) 0 4px; }
.dl-btn{ display:inline-flex; align-items:center; gap:16px; padding:22px 54px !important; border-radius:2px !important; font-size:19px; text-align:left; }
.dl-btn .dl-btn-ic{ line-height:0; flex:none; } .dl-btn .dl-btn-ic svg{ width:32px; height:32px; }
.dl-btn .dl-btn-tx{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.dl-btn .dl-btn-tx small{ font-family:var(--tech); font-weight:600; font-size:11.5px; letter-spacing:.03em; color:#a9cdff; opacity:.85; text-transform:none; margin-top:4px; }

/* 2 grades de requisitos lado a lado (estilo Mercado 50/50); espaço p/ o header em cima */
.dl-grids{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; margin-top:clamp(26px,5.5vh,58px); }
.dl-reqcard .dz-bd{ padding:15px; }
.dl-reqs{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.dl-req{ display:flex; align-items:center; gap:12px; background:rgba(0,0,0,.32); border:1px solid var(--dz-hair); border-radius:2px; padding:13px 15px; }
.dl-req .dl-req-ic{ color:var(--dz-blue); line-height:0; flex:none; } .dl-req .dl-req-ic svg{ width:24px; height:24px; }
.dl-req>div{ display:flex; flex-direction:column; min-width:0; }
.dl-req b{ font-family:var(--tech); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--dz-mut2); }
.dl-req span{ font-size:13.5px; font-weight:600; color:var(--dz-ink); }
@media(max-width:820px){ .dl-grids{ grid-template-columns:1fr; } }
@media(max-width:520px){ .dl-reqs{ grid-template-columns:1fr; } }

/* ============================================================================
   VÃO ABAIXO DO BANNER — um valor só: 14px (Bruno 31/07: "aplique o mesmo vão
   para noticias e download").
   O mesmo sintoma vinha de TRÊS origens diferentes, e por isso nunca tinha sido
   igualado de uma vez:
     Mercado  (o padrão)  row-gap:14px  no `.dz-page` flex
     Notícias              margin-bottom:34px  no PRÓPRIO banner
     Download              margin-top:58px  no elemento SEGUINTE
   ========================================================================== */
#v-noticias .newsblock > .title-bg{ margin-bottom:14px !important; }
#v-download .dl-page > .title-bg + *{ margin-top:14px !important; }

/* ============================================================================
   CALIBRAGEM DO --halo-y por estrutura de tela.
   O ponto onde o brilho deve nascer depende de quanto do banner o TEXTO ocupa,
   e isso muda com o que mais existe dentro dele. Medido o desvio entre o foco do
   gradiente e a caixa de Range do kicker+título+lede, com 75% em todas:
     base — Notícias, Download, Mercado, Doação, Painel .... 0..3px   ✔ fica 75%
     home — Diferenciais e Rankings ......................  -18px  (banner com
        margem negativa para encostar no conteúdo; o texto sobe dentro do pseudo)
     Parceiros — banner de 190px .........................  +23px
     Suporte  — banner de 322px, porque tem a caixa de ação
        embaixo: o texto vive no terço superior ..........  +67px
   Os valores abaixo zeram cada um desses desvios. Mexeu no padding, na margem ou
   na estrutura interna? Remeça — o desvio é medível, não é questão de olho. */
body.deep #v-inicio .hsec .title-bg::before{ --halo-y:87.4%; }
.pagehero.title-bg::before{ --halo-y:76.4%; }
.pnlhero.title-bg::before{ --halo-y:72%; }

/* ============================================================================
   A MESMA DISTÂNCIA ENTRE TODAS AS SEÇÕES DA HOME (Bruno 31/07: "a distância que
   existe entre diferenciais e ranking deveria ser a mesma pra diferenciais e a
   seção home").
   Medido, do FIM DO CONTEÚDO de uma até o TÍTULO da seguinte:
       home -> Diferenciais ....... 109px
       Diferenciais -> Ranking .....  75px   <- a régua
       Ranking -> Server Info ......  75px
   O padding das seções já era igual (75px do topo ao título nas três). Os 34px a
   mais vinham do rodapé da PRIMEIRA seção, cujo conteúdo termina antes do fim da
   caixa de 1200px. Tira-se lá, e não se acrescenta em lugar nenhum. */
body.deep #v-inicio #s-inicial{ padding-bottom:0 !important; }
/* Os 34px extras não eram padding da seção — o `padding-bottom` já era 0. Eram do
   `.hhud` (a seta "role para explorar"), que é `position:absolute` com
   `bottom:clamp(18px,3vh,34px)` = 32,4px em 1080. Como ela é o último elemento
   visível da primeira seção, essa folga entra na distância percebida até o
   próximo título. Encostando-a na base, as duas distâncias se igualam — e nada
   mais na página muda, porque ela é absoluta e não empurra ninguém. */
/* 10/09/2026: encostada na base, a legenda ficava CORTADA pela costura com a proxima
   secao — o dono viu na tela. Volta a ter folga; como ela e absoluta, nao empurra nada. */
/* 10/09/2026 — DOIS problemas na mesma faixa, e a causa nao era o `bottom`:
     1. CORTE: `.hhud` nao tinha z-index, e o veu de 220px que o #s-vitrine pinta no proprio
        topo passava por cima dela — secao seguinte no DOM ganha o empilhamento. O z-index
        abaixo resolve isso sem mexer em posicao nenhuma.
     2. SOBREPOSICAO: eu a afastei 30-60px da base para escapar do corte e ela subiu em cima
        dos botoes. O afastamento certo e pequeno.
   O `padding-bottom:0 !important` de cima FICA: ele iguala a distancia entre as secoes
   (eram 109px contra 75px), e desfaze-lo traria de volta um pedido antigo do dono. */
body.deep #v-inicio #s-inicial .hhud{ bottom:clamp(16px,2.6vh,30px) !important; z-index:2; }

/* O botão do tutorial mora na MESMA LINHA do título do cartão de compra: o mercado tem de caber em
   1080px sem rolar, e uma linha nova custaria justamente a altura que foi economizada ali. */
.mkt-hd .mkt-tut{margin-left:auto;background:transparent;border:1px solid rgba(120,170,255,.34);
  border-radius:4px;color:#9dc4ff;font:600 10.5px/1 "Chakra Petch",Oxanium,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;padding:7px 13px;cursor:pointer;transition:border-color .15s,color .15s}
.mkt-hd .mkt-tut:hover,.mkt-hd .mkt-tut:focus-visible{border-color:rgba(120,170,255,.7);color:#dbe9ff;outline:none}
.mkt-hd .mkt-live + .mkt-tut{margin-left:14px}

/* == MERCADO SIMPLES (laboratório) == */
/* Comprar de um lado, vender do outro, mesmo peso — e MESMA ALTURA. Deixar cada cartão terminar
   onde o conteúdo dele termina abria um buraco do tamanho de meia tela ao lado do cartão de
   venda trancado, e outro embaixo, entre "Meus anúncios" e o histórico. Um par que não fecha na
   base parece página quebrada, mesmo quando não há dado nenhum para mostrar. */
.mkt-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;align-items:stretch}
@media (max-width:900px){.mkt-duo{grid-template-columns:1fr}}
.mkt-duo > .mkt-card{margin:0;position:relative;display:flex;flex-direction:column}
.mkt-duo > .mkt-card > .dz-bd{flex:1;display:flex;flex-direction:column}
/* O conteúdo que sobra pouco (cadeado, "nada aqui ainda") centraliza no espaço em vez de
   ficar grudado no topo com o vazio embaixo. */
.mkt-duo .mkt-login{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mkt-duo .mkt-logbox{flex:1;display:flex;flex-direction:column}
.mkt-duo .mkt-log-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center}

/* A BARRA DA CARTEIRA — os dois saldos e o movimento são uma frase só. */
.mkt-wallet{display:flex;flex-direction:row;align-items:stretch;justify-content:center;
  padding:0;border-radius:10px;margin:0 0 14px;position:relative;overflow:hidden}
.mw-lado{display:flex;align-items:center;padding:15px 20px;min-width:0;flex:1 1 0}
.mw-fim{justify-content:flex-end;text-align:right}
.mw-txt{min-width:0}
.mw-txt .k{display:block;font-family:var(--tech,inherit);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(226,236,255,.42)}
.mw-txt b{display:block;margin-top:4px;font-size:21px;font-weight:700;color:#eaf1ff;
  font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.15}
.mw-txt i{display:block;margin-top:3px;font-style:normal;font-size:11.5px;color:rgba(226,236,255,.42)}
.mw-move{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  padding:13px 20px;background:rgba(255,255,255,.022);
  border-left:1px solid var(--dz-hair,rgba(255,255,255,.08));
  border-right:1px solid var(--dz-hair,rgba(255,255,255,.08))}
.mw-move.mw-off{color:rgba(226,236,255,.46);font-size:12.5px}
.mw-in{width:104px}
.mw-btn{white-space:nowrap;padding:9px 15px;font-size:11.5px}
.mw-dica{flex-basis:100%;text-align:center;font-size:11px;color:rgba(226,236,255,.36);margin-top:2px}
/* 🔴 A mensagem NÃO é parte da barra. Dentro dela virava filho do flex: tomava espaço,
   espremia os dois saldos ("CARTEIRA / DO / SITE" quebrando em três linhas) e vazava para fora.
   Posicionar por cima resolveria a largura e criaria outro problema — a barra tem overflow
   escondido. Fora dela, é um bloco comum de largura inteira, e não há o que dar errado. */
.mw-msg{margin:-6px 0 14px}
@media (max-width:900px){.mkt-wallet{flex-direction:column}
  .mw-fim{justify-content:flex-start;text-align:left}
  .mw-move{border-left:0;border-right:0;border-top:1px solid var(--dz-hair,rgba(255,255,255,.08));
    border-bottom:1px solid var(--dz-hair,rgba(255,255,255,.08))}}

/* Os números que sobraram da régua, agora dentro do cartão a que pertencem. Três textos soltos
   lado a lado o olho lê como uma frase só; o fio entre eles diz que são TRÊS informações. */
.mkt-topo{display:flex;padding:0 0 14px;margin:0 0 2px;
  border-bottom:1px solid var(--dz-hair,rgba(255,255,255,.08))}
.mkt-topo-i{padding:0 22px;flex:0 1 auto;min-width:0}
.mkt-topo-i:first-child{padding-left:0}
.mkt-topo-i + .mkt-topo-i{border-left:1px solid var(--dz-hair,rgba(255,255,255,.08))}
.mkt-topo-i span{display:block;font-family:var(--tech,inherit);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(226,236,255,.42)}
.mkt-topo-i b{display:block;margin-top:4px;font-size:17px;font-weight:700;color:#eaf1ff;
  font-variant-numeric:tabular-nums}
.mkt-topo-i b small{font-size:11.5px;font-weight:500;color:rgba(226,236,255,.5)}

/* Onde se age: fio de cor no topo do cartão e botão de largura inteira. */
.mkt-duo > .mkt-lado-compra::before,.mkt-duo > .mkt-lado-venda::before{content:"";position:absolute;
  inset:0 0 auto 0;height:2px;border-radius:10px 10px 0 0}
.mkt-duo > .mkt-lado-compra::before{background:linear-gradient(90deg,rgba(120,170,255,.7),rgba(120,170,255,0))}
.mkt-duo > .mkt-lado-venda::before{background:linear-gradient(90deg,rgba(90,210,150,.6),rgba(90,210,150,0))}
.mkt-forma{display:flex;flex-direction:column;gap:11px}
.mkt-forma .mkt-act{width:100%;margin-top:2px;padding:13px;font-size:13px;letter-spacing:.1em}
.mkt-forma .mkt-note{margin:0;font-size:11.5px;line-height:1.5;color:rgba(226,236,255,.42)}
.mkt-forma .mkt-linhas{position:static;margin-top:2px;max-height:150px;overflow-y:auto}

/* Os três botões de preço: mesma altura, mesma borda, dividindo a linha. */
.mkt-chips{gap:8px}
.mkt-chip{flex:1 1 0;min-width:0;height:34px;display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:rgba(226,236,255,.78)}
.mkt-chip:hover,.mkt-chip:focus-visible{box-shadow:inset 0 0 0 1px rgba(120,170,255,.6);color:#dbe9ff;outline:none}
.mkt-chip.max{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:rgba(226,236,255,.78)}

/* == CONTROLE DE QUANTIDADE (laboratório) == */
/* A BARRA. Ela vai de 0 ao teto real, então arrastar até o fim é "tudo o que dá" — o jogador
   não precisa saber quanto é. */
.mkt-range{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;margin:2px 0 0}
.mkt-range::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:rgba(255,255,255,.12)}
.mkt-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;
  border-radius:50%;background:#9dc4ff;box-shadow:0 0 0 4px rgba(120,170,255,.18);border:0}
.mkt-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(120,170,255,.4)}
.mkt-lado-venda .mkt-range::-webkit-slider-thumb{background:#6fdca8;box-shadow:0 0 0 4px rgba(90,210,150,.18)}

/* OS PASSOS. Mesma altura e mesma largura: o olho pega o conjunto, não cada botão. */
.mkt-passos{display:flex;gap:6px;flex-wrap:wrap}
.mkt-passo{flex:1 1 0;min-width:0;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:4px;cursor:pointer;background:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);color:rgba(226,236,255,.8);
  font:600 12px/1 var(--tech,inherit);letter-spacing:.04em;font-variant-numeric:tabular-nums;
  transition:box-shadow .15s,color .15s}
.mkt-passo:hover,.mkt-passo:focus-visible{box-shadow:inset 0 0 0 1px rgba(120,170,255,.55);color:#dbe9ff;outline:none}
.mkt-passo.tudo{flex:1.6 1 0;box-shadow:inset 0 0 0 1px rgba(120,170,255,.32);color:#9dc4ff}
.mkt-lado-venda .mkt-passo.tudo{box-shadow:inset 0 0 0 1px rgba(90,210,150,.32);color:#6fdca8}

/* O VALOR. É a resposta da tela à pergunta que o jogador fez — merece o tamanho de resposta. */
.mkt-out.mkt-out-grande{flex-direction:column;align-items:center;gap:4px;padding:16px 14px;text-align:center}
.mkt-out.mkt-out-grande span{font-family:var(--tech,inherit);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(226,236,255,.45)}
.mkt-out.mkt-out-grande b{font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}

/* == TROCA INTEIRA E ALINHAMENTO (laboratório) == */
/* O bloco mostra a troca: o que sai à esquerda, o que entra à direita, e a seta no meio dizendo
   que uma coisa vira a outra. Altura FIXA para o cartão não pular de tamanho quando o número
   cresce de "R$ 0,00" para "R$ 1.234,00". */
.mkt-out.mkt-out-grande{display:flex;flex-direction:column;justify-content:center;gap:0;
  padding:12px 14px 0;height:104px;text-align:center}
.mkt-out.mkt-out-grande .mo-linha{display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:10px;flex:1}
.mkt-out.mkt-out-grande .mo-meia{min-width:0}
.mkt-out.mkt-out-grande .mo-meia span{display:block;font-family:var(--tech,inherit);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(226,236,255,.45)}
.mkt-out.mkt-out-grande .mo-meia b{display:block;margin-top:4px;font-size:23px;line-height:1.1;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-out.mkt-out-grande .mo-meia.alz b{color:#dbe6f5}
.mkt-out.mkt-out-grande .mo-seta{font-size:16px;color:rgba(226,236,255,.3);line-height:1}
/* 🔴 O CSS base estiliza QUALQUER <b> dentro de .mkt-out como se fosse o valor grande. Ao
   trazer a linha da taxa para dentro do bloco, o "R$ 264,00" dela virou um número de 23px no
   meio de uma frase de 10px. A letra miúda tem de continuar miúda, negrito incluso. */
.mkt-out.mkt-out-grande .mkt-note b,.mkt-out.mkt-out-grande .mkt-taxa b{
  font-size:inherit;line-height:inherit;font-weight:700;color:rgba(226,236,255,.62)}

/* a letra miúda do número, encostada na base do próprio bloco */
.mkt-out.mkt-out-grande .mkt-note,.mkt-out.mkt-out-grande .mkt-taxa{
  min-height:0;margin:0;padding:6px 0 8px;display:block;text-align:center;
  font-size:10.5px;line-height:1.35;color:rgba(226,236,255,.38);
  border-top:1px solid var(--dz-hair,rgba(255,255,255,.06))}

/* ALINHAR OS DOIS CARTÕES. Cada fileira tem altura fixa e igual dos dois lados, senão o cartão
   de venda — que tem uma fileira a mais, a dos atalhos de preço — empurra tudo para baixo e
   nada bate de um lado para o outro. */
/* APERTADO DE PROPÓSITO. A tela estava alta demais: cada fileira tinha ar próprio somado ao ar
   do vizinho, e o par de cartões passava de 670px sem precisar. Aqui a altura de cada fileira é
   declarada uma vez e vale para os dois lados — encolher continua sendo alinhar. */
.mkt-forma{gap:8px}
/* o cabeçalho tem um botão de um lado e só texto do outro: sem altura fixa, tudo abaixo já
   nasce desencontrado */
.mkt-lado-compra .mkt-hd,.mkt-lado-venda .mkt-hd{min-height:42px;align-items:center}
.mkt-forma .mkt-topo{min-height:50px;align-items:flex-start;padding-bottom:10px}
.mkt-forma .mkt-row{gap:12px;min-height:60px;align-items:flex-start}
.mkt-forma .mkt-row .mkt-lb{min-height:16px;margin:0 0 5px}
.mkt-forma .mkt-in,.mkt-forma .mkt-row .mkt-in{height:40px}
.mkt-topo-i b{font-size:16px}
/* A barra encostava nos botões que havia embaixo; sem eles, ela precisa do próprio respiro. */
.mkt-range{height:18px;margin:0;--pct:0%}
.mkt-range::-webkit-slider-runnable-track{
  background:linear-gradient(to right,var(--cor-barra,#6aa8ff) 0 var(--pct),rgba(255,255,255,.12) var(--pct) 100%)}
.mkt-lado-venda .mkt-range{--cor-barra:#4fc98d}
/* o botão de preço define a altura da fileira; o eco do outro lado tem de bater com ELE,
   não com um número escolhido à parte — 34 contra 32 já desalinhava o bloco em 2px */
.mkt-chips{min-height:34px;margin:0}
.mkt-chip{height:34px}

/* 🔴 O CARTÃO PARAVA DE TER O MESMO TAMANHO. A tabela de "o que entra na compra" nasce vazia e
   cresce a cada linha, então a tela pulava a cada dígito — e como os dois cartões são um par,
   o de venda pulava junto, sem motivo nenhum. O espaço é reservado desde o começo. */
.mkt-forma .mkt-linhas{height:126px;max-height:none;overflow-y:auto}
/* a fileira que existe nos dois: atalhos de preço na venda, eco do digitado na compra */
.mkt-forma .mkt-lotes{min-height:34px;display:flex;align-items:center;margin:0}

.mkt-forma .mkt-act{height:44px;margin:0}
/* O atalho aceso: preenchido, não só com a borda mudada — de relance tem de dar para ver QUAL
   dos três está valendo, sem ler os três. */
.mkt-chip.on{background:rgba(90,210,150,.14);box-shadow:inset 0 0 0 1px rgba(90,210,150,.65);
  color:#8fe8bb;font-weight:700}
.mkt-chip.on:hover,.mkt-chip.on:focus-visible{box-shadow:inset 0 0 0 1px rgba(90,210,150,.9);color:#b6f2d5}

/* As duas pontas do preço aceito pesam igual; só a conjunção encolhe. */
.mkt-topo-i b .ate{display:inline-block;margin:0 7px;font-style:normal;font-weight:500;
  font-size:11px;color:rgba(226,236,255,.4);vertical-align:2px}