/* =====================================================================
   Pacotes do Destaque (src/ui/pacotes-destaque-ui.js, SQL 2446, 30/10)
   A janela por cima do Chamado da Legião. 3 estilos para o autor escolher
   (data-pd-estilo): A "Vitrine" (combos em cima, pacotes numa fileira),
   B "Lista" (linhas como cupom, 2 colunas no PC), C "Altar" (a Sentinela
   grande à esquerda, os pacotes à direita). No PC cabe sem rolar.
   Letras em calc(Npx * var(--text-scale,1)): o texto de Opções (100–130%).
   ===================================================================== */
.pd-fundo{z-index:1450}
.pd-janela.modal-card{position:relative;width:min(1180px,100%);max-height:calc(100vh - 32px);padding:0;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #6b5220;border-radius:16px;color:#eef2f8;
  background:radial-gradient(60% 50% at 18% 0%,rgba(255,206,110,.18),transparent 70%),radial-gradient(70% 60% at 100% 100%,rgba(130,90,255,.14),transparent 70%),linear-gradient(180deg,#130f08,#0b0d14 55%,#090a10);
  box-shadow:0 30px 70px rgba(0,0,0,.65),inset 0 0 0 1px rgba(246,213,138,.06)}
@supports (height:100dvh){.pd-janela.modal-card{max-height:calc(100dvh - 32px)}}
.pd-corpo{position:relative;display:flex;flex-direction:column;min-height:0;overflow:auto;padding:12px 16px 10px}

/* ---------- topo: a Sentinela do Chamado e o relógio ---------- */
.pd-topo{display:flex;align-items:center;gap:14px;padding:2px 4px 9px;border-bottom:1px solid rgba(226,176,74,.22);margin-bottom:10px}
.pd-retrato{width:74px;height:74px;object-fit:cover;object-position:50% 18%;border-radius:14px;border:2px solid #e2b04a;box-shadow:0 0 18px rgba(255,206,110,.35);background:#1a1408;flex:0 0 auto}
.pd-topo-txt{flex:1;min-width:0}
.pd-topo-txt small{display:block;color:#c9a55a;letter-spacing:.16em;font-size:calc(11px * var(--text-scale,1));font-weight:800}
.pd-topo-txt h2{margin:2px 0 2px;font-family:"Cinzel",var(--font-display,Georgia),serif;font-size:calc(26px * var(--text-scale,1));line-height:1.1;color:#ffe09a;text-shadow:0 2px 0 #3a2508,0 0 16px rgba(255,190,80,.35)}
.pd-quem{margin:0;color:#e8eef7;font-weight:700;font-size:calc(14px * var(--text-scale,1))}
.pd-relogio{display:inline-block;margin:6px 0 0;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid #3c5a3a;color:#b9f3c2;font-size:calc(12.5px * var(--text-scale,1))}
.pd-relogio b{color:#7dff9a}
.pd-topo-acoes{display:flex;gap:8px;align-self:flex-start}
.pd-ajuda{width:34px;height:34px;min-height:0;margin:0;padding:0;border-radius:50%;background:#1b2233;border:1px solid #4a5a7a;color:#ffe09a;font-weight:900;font-size:calc(16px * var(--text-scale,1))}
.pd-fechar{position:static}

/* ---------- cartões ---------- */
.pd-grade{display:flex;flex-direction:column;gap:12px}
.pd-combos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pd-simples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pd-cartao{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 12px 10px;border-radius:14px;
  background:linear-gradient(180deg,#1a1f2c,#11151f);border:1px solid #33405a;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.pd-cartao.combo{background:radial-gradient(80% 90% at 0% 0%,rgba(255,200,90,.16),transparent 60%),linear-gradient(180deg,#2a1f0b,#16110a);border:1px solid #c9952e;
  box-shadow:0 0 0 1px rgba(255,214,120,.18),0 8px 24px rgba(0,0,0,.35),inset 0 0 22px rgba(255,190,80,.08)}
.pd-gratis{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-radius:12px;background:linear-gradient(180deg,#132a1b,#0d1a12);border:1px solid #2f6a46;align-self:center;margin-right:4px}
.pd-gratis img{width:34px;height:34px;object-fit:contain}
.pd-gratis span{display:flex;flex-direction:column;line-height:1.15}
.pd-gratis b{color:#b9f3c2;font-size:calc(13px * var(--text-scale,1))}
.pd-gratis small{color:#8fbf9a;font-size:calc(11px * var(--text-scale,1))}
.pd-gratis .pd-comprar.loja-comprar{flex:0 0 auto;min-height:32px;padding:0 14px;font-size:calc(13px * var(--text-scale,1))}
.pd-cartao.esgotado{opacity:.62}
.pd-cab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding-right:64px}
.pd-cartao.combo .pd-cab{padding-right:84px}
.pd-cab h3{margin:0;font-size:calc(15px * var(--text-scale,1));line-height:1.15;color:#ffe7b0;font-family:"Cinzel",var(--font-display,Georgia),serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pd-cartao.combo .pd-cab h3{font-size:calc(18px * var(--text-scale,1));color:#ffe09a}
.pd-limite{flex:0 0 auto;color:#97a6bd;font-size:calc(11px * var(--text-scale,1));white-space:nowrap}
.pd-selo{position:absolute;top:-1px;right:-1px;padding:4px 9px 4px 11px;border-radius:0 14px 0 12px;background:linear-gradient(180deg,#ff5a4a,#c0261b);color:#fff;
  font-weight:900;font-size:calc(13px * var(--text-scale,1));letter-spacing:.02em;box-shadow:0 2px 8px rgba(192,38,27,.45);text-shadow:0 1px 0 rgba(0,0,0,.35)}
.pd-cartao.combo .pd-selo{font-size:calc(15px * var(--text-scale,1));padding:5px 12px 5px 14px}
.pd-itens{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pd-item{display:grid;grid-template-columns:30px auto;grid-template-rows:auto auto;column-gap:6px;align-items:center;min-width:0;padding:4px 8px 4px 4px;border-radius:10px;
  background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.07)}
.pd-item img{grid-row:1 / span 2;width:30px;height:30px;object-fit:contain}
.pd-item b{font-size:calc(14px * var(--text-scale,1));color:#fff;line-height:1.05}
.pd-item small{font-size:calc(10.5px * var(--text-scale,1));color:#a9b6ca;line-height:1.1;overflow-wrap:anywhere}
.pd-simples .pd-itens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pd-simples .pd-item{grid-template-columns:26px minmax(0,1fr);padding-right:6px}
.pd-simples .pd-item img{width:26px;height:26px}
.pd-cartao.combo .pd-item img{width:36px;height:36px}
.pd-cartao.combo .pd-item{grid-template-columns:36px auto}
.pd-compra{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pd-comprar.loja-comprar{flex:1 1 120px;min-height:38px;margin:0;font-weight:900;font-size:calc(15px * var(--text-scale,1));
  background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);border:1px solid var(--botao-ouro-borda);border-radius:10px;box-shadow:0 3px 0 #8a5a0a}
.pd-comprar.loja-comprar:disabled{background:#2a2f3a;color:#8a93a3;border-color:#3a4252;box-shadow:none}
.pd-pegar.loja-comprar:not(:disabled){background:linear-gradient(180deg,#7dff9a,#2fbf5a);color:#062a12;border-color:#1f7a3a;box-shadow:0 3px 0 #1a5a2c}
.pd-vip{font-size:calc(11px * var(--text-scale,1))}
.pd-pe{display:flex;flex-direction:column;gap:4px;margin-top:8px;color:#8e9bb0;font-size:calc(11.5px * var(--text-scale,1))}
.pd-aviso{color:#ff9a8a}
.pd-nota{color:#c9d3e2;text-align:center;padding:24px 8px}

/* ---------- o tutorial (1ª vez e o "?") ---------- */
.pd-tutorial{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:16px;background:rgba(4,6,10,.78)}
.pd-tut-caixa{width:min(560px,100%);padding:18px 18px 14px;border-radius:14px;background:linear-gradient(180deg,#1d1709,#100d07);border:1px solid #c9952e;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.pd-tut-caixa h3{margin:0 0 10px;color:#ffe09a;font-family:"Cinzel",var(--font-display,Georgia),serif;font-size:calc(18px * var(--text-scale,1))}
.pd-tut-caixa ol{margin:0 0 14px;padding-left:20px;display:grid;gap:8px;color:#e8eef7;font-size:calc(13.5px * var(--text-scale,1));line-height:1.4}
.pd-tut-caixa .loja-comprar{width:100%;margin:0}

/* ---------- o botão no rodapé do Chamado ---------- */
.snt-ext-pd{border-color:#c9952e!important;background:linear-gradient(180deg,#2a1f0b,#16110a)!important}
.snt-ext-pd-selo{font-style:normal;padding:1px 6px;border-radius:999px;background:#c0261b;color:#fff;font-weight:900;font-size:calc(10px * var(--text-scale,1))}

/* ---------- ESTILO B: Lista (linhas tipo cupom) ---------- */
[data-pd-estilo="B"] .pd-combos,[data-pd-estilo="B"] .pd-simples{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-pd-estilo="B"] .pd-cartao{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cab cab" "itens compra";align-items:center;column-gap:10px;row-gap:6px;
  background:linear-gradient(90deg,#efe3c4,#e2d1a6);border:1px solid #8a6a2c;color:#3a2a10}
[data-pd-estilo="B"] .pd-cab{grid-area:cab;flex-direction:row;align-items:baseline;gap:10px;background:linear-gradient(180deg,#8a5a1c,#6a4210);margin:-12px -12px 0;padding:6px 92px 6px 12px;border-radius:13px 13px 0 0}
[data-pd-estilo="B"] .pd-cab h3,[data-pd-estilo="B"] .pd-cartao.combo .pd-cab h3{color:#fff3d0}
[data-pd-estilo="B"] .pd-limite{color:#ffe7b0}
[data-pd-estilo="B"] .pd-itens{grid-area:itens}
[data-pd-estilo="B"] .pd-item{background:#3a3226;border-color:#6a5a3a}
[data-pd-estilo="B"] .pd-compra{grid-area:compra;flex-direction:column;align-items:stretch;margin:0}
[data-pd-estilo="B"] .pd-comprar.loja-comprar{flex:0 0 auto;min-width:130px}

/* ---------- ESTILO C: Altar (a Sentinela grande à esquerda) ---------- */
@media (min-width:761px){
  [data-pd-estilo="C"] .pd-corpo{display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:16px}
  [data-pd-estilo="C"] .pd-topo{grid-column:1;grid-row:1 / span 3;flex-direction:column;align-items:center;text-align:center;border-bottom:0;border-right:1px solid rgba(226,176,74,.22);margin:0;padding:6px 14px 6px 0}
  [data-pd-estilo="C"] .pd-retrato{width:200px;height:260px;border-radius:16px}
  [data-pd-estilo="C"] .pd-corpo{padding-top:52px}
  [data-pd-estilo="C"] .pd-topo-acoes{position:absolute;top:10px;right:14px}
  [data-pd-estilo="C"] .pd-grade{grid-column:2;grid-row:1 / span 2}
  [data-pd-estilo="C"] .pd-simples{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-pd-estilo="C"] .pd-gratis{margin:10px 0 0;align-self:stretch}
  [data-pd-estilo="C"] .pd-gratis{flex-wrap:wrap}
  [data-pd-estilo="C"] .pd-gratis span{flex:1}
  [data-pd-estilo="C"] .pd-gratis .pd-comprar.loja-comprar{flex:1 1 100%}
  [data-pd-estilo="C"] .pd-pe{grid-column:2;grid-row:3}
}

/* ---------- tela baixa (celular deitado, notebook pequeno) ---------- */
@media (max-height:520px){
  .pd-retrato{width:48px;height:48px}
  .pd-topo{gap:10px;padding-bottom:6px;margin-bottom:8px}
  .pd-topo-txt h2{font-size:calc(19px * var(--text-scale,1))}
  .pd-quem{display:inline;margin-right:8px}
  .pd-relogio{margin-top:2px}
  [data-pd-estilo="C"] .pd-retrato{width:120px;height:150px}
}


/* celular e tela baixa: o selo vira uma etiqueta em cima da borda, e o nome usa a largura toda */
@media (max-width:760px),(max-height:520px){
  .pd-grade,.pd-combos,.pd-simples{row-gap:18px}
  .pd-grade{padding-top:8px}
  .pd-cartao{padding-top:20px}
  .pd-cab,.pd-cartao.combo .pd-cab{padding-right:0}
  .pd-selo,.pd-cartao.combo .pd-selo{top:-11px;right:8px;border-radius:999px;padding:3px 10px;font-size:calc(12px * var(--text-scale,1))}
  [data-pd-estilo="B"] .pd-cartao{padding-top:12px}
  [data-pd-estilo="B"] .pd-cab{padding:16px 12px 6px}
}

/* ---------- celular ---------- */
@media (max-width:760px){
  .pd-fundo{padding:0!important;align-items:stretch}
  .pd-janela.modal-card{width:100%;max-height:none;height:100%;border-radius:0;border-left:0;border-right:0}
  .pd-corpo{padding:10px 10px 14px}
  .pd-retrato{width:64px;height:64px}
  .pd-topo-txt h2{font-size:calc(21px * var(--text-scale,1))}
  .pd-combos{grid-template-columns:1fr}
  .pd-simples{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-topo{flex-wrap:wrap}
  .pd-gratis{order:5;flex:1 1 100%;margin:4px 0 0}
  .pd-gratis span{flex:1}
  [data-pd-estilo="B"] .pd-combos,[data-pd-estilo="B"] .pd-simples{grid-template-columns:1fr}
  [data-pd-estilo="B"] .pd-cartao{grid-template-columns:1fr;grid-template-areas:"cab" "itens" "compra"}
  [data-pd-estilo="B"] .pd-compra{flex-direction:row;align-items:center}
  [data-pd-estilo="B"] .pd-comprar.loja-comprar{flex:1 1 auto}
  [data-pd-estilo="C"] .pd-simples{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px) and (orientation:landscape){
  .pd-combos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-simples{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:380px){
  .pd-simples{grid-template-columns:1fr}
}
/* 31/10: as Esferas avulsas (Jewel of Dark) no fim dos Pacotes — mesmo HTML da página Esferas das Sentinelas.
   Numa faixa só (o título à esquerda, os pacotes de esferas à direita), para a janela caber sem rolar no PC;
   o preço em JoD está no botão e o jogo confirma antes de comprar, então os avisos da página Esferas não vêm. */
.pd-avulsas{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin-top:6px;padding:4px 8px 4px 12px;border:1px solid #3a2f63;border-radius:12px;background:rgba(23,18,43,.7)}
.pd-avulsas h3{margin:0;font-weight:900;font-size:calc(11px * var(--text-scale,1));letter-spacing:.14em;text-transform:uppercase;color:#cbbcf0;white-space:nowrap}
.pd-avulsas .snt-nota{display:none}
.pd-avulsas .snt-packs{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px}
.pd-avulsas .snt-pack{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:2px 8px;padding:2px 8px;line-height:1.15}
.pd-avulsas .snt-pack-qtd{font-size:calc(15px * var(--text-scale,1))}
.pd-avulsas .snt-pack-qtd .snt-esfera{width:20px;height:20px}
.pd-avulsas .snt-pack small{display:none}
.pd-avulsas .snt-pack-preco{margin-top:0;padding:1px 9px}
.pd-avulsas+.pd-pe{margin-top:4px}
@media (max-width:760px){.pd-avulsas{grid-template-columns:minmax(0,1fr);gap:6px}.pd-avulsas h3{white-space:normal}}