/*
 * JANELA — VIP
 *
 * `#vip-painel` (gerado por `www/vipicone/index.js`, fora do escopo desta
 * folha) é só: cabeçalho com ícone+status+prazo+fechar, um rótulo de seção e
 * uma `<ul>` plana com os benefícios. Sem estado "sem VIP" — o próprio jogo
 * só cria este nó quando `state.vip === true` (ver vipicone/index.js), então
 * não existe "vazio" aqui: o que varia é QUANTOS benefícios a assinatura
 * dá (5 a 7 `<li>`, dependendo de a build ter bônus de baú/sorte).
 *
 * ── COMO ESCREVER AQUI ────────────────────────────────────────────────
 * · prefixo obrigatório `html[data-rpgw='vip']`;
 * · toda medida em `calc(Npx * var(--rpg-un, 1))`;
 * · cor só dos tokens (`--rpg-tinta`, `--rpg-ouro`, …) — ver CONTRATO.md;
 * · o `<ul>` não tem classe por item — a ORDEM é o único contrato que
 *   `vipicone/index.js` garante (ouro, xp, [sorte], [baús], bolsa, gemas,
 *   mercado — sempre nessa sequência). Os ícones por benefício usam
 *   `:nth-child`/`:nth-last-child` em vez de classe, por isso: ouro e xp são
 *   sempre os 2 primeiros, bolsa/gemas/mercado são sempre os 3 últimos, e
 *   sorte/baú (0 a 2 itens) ficam no meio.
 *
 * 🚨 `clamp(MINpx, calc(Npx * var(--rpg-un)), MAXpx)` no lugar de
 *    `calc(Npx * var(--rpg-un))` puro em texto: já é o padrão usado em
 *    inventario/habilidades/forja/pets.css para o mesmo problema — em
 *    844×390 o palco mede `--rpg-un ≈ 0.41`, e um `13px` de design vira
 *    5,3px de verdade (medido, é a fonte-manchada que o inspetor reprovou).
 *    O piso do clamp garante letra legível sem estourar no monitor grande;
 *    a régua estática já aceita o padrão (não conta como "px puro" porque a
 *    calc com `--rpg-un` está na mesma linha).
 *
 * Validar com:
 *   node ferramentas/foto.mjs vip
 *   node ferramentas/inspetor-janela.mjs vip
 */

html[data-rpgw='vip'] #vip-painel {
  /* 🚨 `#vip-painel` já É o nó `.rpgw-conteudo` (a classe vem no próprio
     elemento) — o kit pinta esse MESMO nó com `display: block !important`,
     então sem o `!important` aqui o flex nunca entra em vigor e a lista cai
     em fluxo normal, colada no topo. */
  display: flex !important;
  flex-direction: column;
  /* `safe center`: respira nas duas pontas quando o conteúdo é curto, mas
     volta a ancorar no topo e deixa o `.rpgw-conteudo` rolar (ele já é
     `overflow: hidden auto`) se um dia a lista crescer além do vão — mesma
     saída que `perfil.css` usa em tela baixa, em vez de espremer fonte. */
  justify-content: safe center;
  gap: calc(14px * var(--rpg-un, 1));
  padding: calc(18px * var(--rpg-un, 1)) calc(20px * var(--rpg-un, 1));
}

/* ── cabeçalho: vira o "cartão de assinatura" ──────────────────────────
   O quadro do kit já anuncia "VIP" com ícone no topo; o `<img>` e o `✕` daqui
   duplicam isso. O `<strong>`/`<span>`, porém, carregam dado que o kit não
   tem (status + prazo) — viram o destaque da tela, maior e mais alto, com o
   próprio emblema de assinatura ampliado ao lado (o broche da ficha). */
html[data-rpgw='vip'] .vip__topo {
  display: flex;
  align-items: center;
  gap: calc(16px * var(--rpg-un, 1));
  padding: calc(14px * var(--rpg-un, 1)) calc(18px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #1a2338 0%, #0b1220 100%);
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) #9c7c4e66,
    inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a833;
}
html[data-rpgw='vip'] .vip__topo img {
  flex: 0 0 auto;
  width: clamp(32px, calc(52px * var(--rpg-un, 1)), 58px);
  height: clamp(32px, calc(52px * var(--rpg-un, 1)), 58px);
  object-fit: contain;
  filter:
    drop-shadow(0 calc(2px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1)) #000a)
    drop-shadow(0 0 calc(8px * var(--rpg-un, 1)) #ffc94a55);
}
/* 🚨 O cartão tinha 70% de vazio à direita: nome à esquerda, prazo colado
   embaixo dele, e nada disputando o resto da largura. Virar `div` em LINHA
   (era coluna) põe o prazo na outra ponta do cartão — e o traço dourado no
   meio (mesma receita de `.rpg-secao::after`) fecha a distância como peça
   desenhada, não como buraco. */
html[data-rpgw='vip'] .vip__topo > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: calc(14px * var(--rpg-un, 1));
}
html[data-rpgw='vip'] .vip__topo strong {
  order: 1;
  flex: 0 0 auto;
  font-size: clamp(17px, calc(22px * var(--rpg-un, 1)), 25px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--rpg-ambar);
  -webkit-text-stroke: calc(2.2px * var(--rpg-un, 1)) #2a1200;
  paint-order: stroke fill;
}
html[data-rpgw='vip'] .vip__topo > div::after {
  content: '';
  order: 2;
  flex: 1 1 calc(24px * var(--rpg-un, 1));
  min-width: calc(20px * var(--rpg-un, 1));
  height: calc(1px * var(--rpg-un, 1));
  background: linear-gradient(90deg, #9c7c4e00, #9c7c4e88 25%, #9c7c4e88 75%, #9c7c4e00);
}
html[data-rpgw='vip'] .vip__topo span {
  order: 3;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(7px * var(--rpg-un, 1));
  width: fit-content;
  height: clamp(20px, calc(25px * var(--rpg-un, 1)), 27px);
  padding: 0 calc(12px * var(--rpg-un, 1));
  border-radius: 999px;
  background: #0c0e12cc;
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff24;
  font-style: normal;
  font-size: clamp(11px, calc(12px * var(--rpg-un, 1)), 13px);
  color: var(--rpg-tinta);
  white-space: nowrap;
}
/* 🚨 Era um relógio (`Icon_64_Timer`) — contradiz "Sem prazo" (VIP sem data
   de fim), que é um caso real do gerador. Uma marca neutra vale para os dois
   textos: não afirma contagem regressiva nenhuma, só decora a pílula. */
html[data-rpgw='vip'] .vip__topo span::before {
  content: '';
  flex: 0 0 auto;
  width: calc(7px * var(--rpg-un, 1));
  height: calc(7px * var(--rpg-un, 1));
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ffe1a8, #e79b1e 70%, #b4661a);
  box-shadow: 0 0 calc(4px * var(--rpg-un, 1)) #ffc94a99;
}
/* O X daqui é o mesmo do quadro do kit, duas vezes na mesma tela. */
html[data-rpgw='vip'] .vip__x {
  display: none !important;
}

/* ── rótulo de seção — o mesmo desenho de título dourado das outras janelas */
html[data-rpgw='vip'] .vip__rot {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--rpg-un, 1));
  margin: 0;
  font-style: normal;
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 14px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rpg-ouro);
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
html[data-rpgw='vip'] .vip__rot::after {
  content: '';
  flex: 1 1 auto;
  height: calc(1px * var(--rpg-un, 1));
  background: linear-gradient(90deg, #9c7c4e88, #9c7c4e00);
}

/* ── a lista de benefícios ──────────────────────────────────────────────
   🚨 Grade fixa de 2 colunas deixava cada ficha ~64% vazia (o texto some no
   meio de um retângulo largo demais) e, com 5 itens, a última ficha ficava
   sozinha à esquerda com um buraco preto do lado. `flex-wrap` + `justify-
   content: center` resolve os dois de uma vez: os cartões só crescem até um
   teto (então não viram tabela esticada), e QUALQUER linha incompleta —
   inclusive a última, com 1 ou 2 itens — se centraliza sozinha em vez de
   morrer grudada na esquerda com vão do lado. */
html[data-rpgw='vip'] .vip__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* `align-items: start`, não o `stretch` padrão do flex: "Poupança de Gemas"
     quebra em 2 linhas e "+6 slots de bolsa" não — com `stretch` a ficha
     curta vira uma caixa da MESMA altura da vizinha alta, mas o texto (que
     não é item flex, pra não quebrar em pedaços — ver nota abaixo) continua
     colado no topo dela, sobrando vão vazio embaixo. Sem esticar, cada ficha
     fica do tamanho do próprio conteúdo. */
  align-items: start;
  gap: calc(8px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 🚨 NÃO É `display:flex`. `<b>Poupança de Gemas</b> liberada` são DOIS nós
   (elemento + texto solto) — num container flex cada um vira um item de
   linha SEPARADO, e cada um quebra a própria largura por conta própria: o
   texto sai partido em pedaços desalinhados em vez de fluir como uma frase
   só. Bloco normal com o selo em POSIÇÃO ABSOLUTA (padding reserva o lugar
   dele) deixa `<b>` + texto fluírem juntos, como texto de verdade. */
html[data-rpgw='vip'] .vip__lista li {
  --ico-d: clamp(26px, calc(36px * var(--rpg-un, 1)), 40px);
  position: relative;
  flex: 1 1 calc(210px * var(--rpg-un, 1));
  max-width: calc(280px * var(--rpg-un, 1));
  min-width: calc(150px * var(--rpg-un, 1));
  min-height: var(--ico-d);
  padding: calc(9px * var(--rpg-un, 1)) calc(12px * var(--rpg-un, 1));
  padding-left: calc(var(--ico-d) + calc(22px * var(--rpg-un, 1)));
  border-radius: var(--rpg-raio-p);
  background: #ffffff0a;
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14;
  font-size: clamp(12px, calc(13px * var(--rpg-un, 1)), 15px);
  line-height: 1.25;
  color: var(--rpg-tinta-2);
  /* A ficha é quase transparente (`#ffffff0a`) — o cenário do jogo passa
     atrás dela, e sem contorno o texto de apoio lavava nele. */
  -webkit-text-stroke: calc(1px * var(--rpg-un, 1)) #0c1a2e;
  paint-order: stroke fill;
}
html[data-rpgw='vip'] .vip__lista li b {
  color: var(--rpg-ouro);
  font-weight: 800;
  -webkit-text-stroke: calc(1.3px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
/* O selo redondo por benefício: mesma receita de fundo do `.rpg-slot`, com o
   ícone por cima via variável — assim a regra de posição/tamanho fica uma
   só, e cada `nth-child` abaixo só troca a arte. */
html[data-rpgw='vip'] .vip__lista li::before {
  content: '';
  --ico: none;
  position: absolute;
  left: calc(12px * var(--rpg-un, 1));
  top: 50%;
  translate: 0 -50%;
  width: var(--ico-d);
  height: var(--ico-d);
  border-radius: 50%;
  background-image: var(--ico), radial-gradient(circle at 50% 30%, #16273f, #060c16);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 52%, 100%;
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff1a;
}
/* Ouro e XP são sempre o 1º e o 2º item — a ordem que `vipicone/index.js`
   escreve nunca muda. (O ícone de XP era `Icon_80_Training`, uma CHAMA — lida
   rápido como dano de fogo, não progressão; a medalha lê como "avanço".) */
html[data-rpgw='vip'] .vip__lista li:nth-child(1)::before {
  --ico: url('/potato/rpg/pecas/Icon_Gold_03.png');
}
html[data-rpgw='vip'] .vip__lista li:nth-child(2)::before {
  --ico: url('/potato/rpg/pecas/Icon_64_Score.png');
}
/* Bolsa, Poupança de Gemas e Mercado são sempre os 3 últimos, também fixo. */
html[data-rpgw='vip'] .vip__lista li:nth-last-child(3)::before {
  --ico: url('/potato/rpg/pecas/Icon_80_Top_Pocket.png');
}
html[data-rpgw='vip'] .vip__lista li:nth-last-child(2)::before {
  --ico: url('/potato/rpg/pecas/Icon_80_Top_GemStone.png');
}
html[data-rpgw='vip'] .vip__lista li:nth-last-child(1)::before {
  --ico: url('/potato/rpg/pecas/Icon_80_Top_Shop.png');
}
/* O que sobra no meio (0 a 2 itens: sorte no baú, baús) é bônus de
   recompensa. `nth-child(n+3)` exclui ouro/xp; `nth-last-child(n+4)` exclui
   os 3 fixos do fim — sobra só quem está entre eles, não importa quantos. Com
   um item só, a posição não diz QUAL dos dois é — fica o ícone genérico. */
html[data-rpgw='vip'] .vip__lista li:nth-child(n+3):nth-last-child(n+4)::before {
  --ico: url('/potato/rpg/pecas/Icon_80_Top_Gacha.png');
}
/* Com os DOIS bônus condicionais presentes (7 itens), a posição já basta pra
   saber qual é qual — sorte no baú é sempre o 3º, baús é sempre o 4º — então
   dá pra separar os ícones sem tocar em `vipicone/index.js`. */
html[data-rpgw='vip'] .vip__lista li:nth-child(4):nth-last-child(4)::before {
  --ico: url('/potato/rpg/pecas/Icon_80_Package.png');
}

/* Os dois últimos benefícios não são NÚMERO, são ESTADO ("liberada" /
   "liberado") — o `<b>` deles envolve o NOME, não uma quantidade. Deixado
   dourado, o ouro passa a significar duas coisas na mesma grade (valor E
   nome). Aqui o nome volta a ser texto normal e quem carrega "isto está
   ativo" é um selo dourado à parte — o dourado continua sinônimo de "o
   número/estado que importa", só que como selo, não como texto emprestado. */
html[data-rpgw='vip'] .vip__lista li:nth-last-child(-n+2) {
  --chk-d: clamp(16px, calc(20px * var(--rpg-un, 1)), 22px);
  padding-right: calc(var(--chk-d) + calc(14px * var(--rpg-un, 1)));
}
html[data-rpgw='vip'] .vip__lista li:nth-last-child(-n+2) b {
  color: var(--rpg-tinta);
  -webkit-text-stroke: calc(1px * var(--rpg-un, 1)) #0c1a2e;
}
html[data-rpgw='vip'] .vip__lista li:nth-last-child(-n+2)::after {
  content: '✓';
  position: absolute;
  right: calc(9px * var(--rpg-un, 1));
  top: 50%;
  translate: 0 -50%;
  width: var(--chk-d);
  height: var(--chk-d);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd76a, #e79b1e);
  color: #2a1200;
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  font-weight: 900;
  line-height: 1;
}

/* ── pouca altura (celular deitado): menos ar, não menos letra ─────────
   O piso do `clamp()` já resolve legibilidade; aqui só se reclama espaço de
   sobra (padding/gap) para a lista respirar sem precisar rolar. Se ainda
   assim não couber, `.rpgw-conteudo` já é `overflow: hidden auto` — rola em
   vez de espremer fonte, mesma saída que `perfil.css` usa. */
@media (max-height: 460px) {
  html[data-rpgw='vip'] #vip-painel {
    gap: calc(6px * var(--rpg-un, 1));
    padding: calc(8px * var(--rpg-un, 1)) calc(14px * var(--rpg-un, 1));
  }
  html[data-rpgw='vip'] .vip__topo {
    padding: calc(6px * var(--rpg-un, 1)) calc(12px * var(--rpg-un, 1));
    gap: calc(10px * var(--rpg-un, 1));
  }
  html[data-rpgw='vip'] .vip__rot {
    gap: calc(6px * var(--rpg-un, 1));
  }
  html[data-rpgw='vip'] .vip__lista {
    gap: calc(4px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1));
  }
  /* 🚨 3 colunas (a base para tela larga) faz o texto quebrar em 3 linhas
     quando o palco inteiro fica estreito — a ficha vira pequena demais pra
     caber "+15% de ouro" numa linha só. Aqui a base vira PORCENTAGEM (não
     `Npx * un`): trava em exatamente 2 por linha não importa o quanto o
     palco encolha, e a última linha ímpar ainda centraliza sozinha. */
  /* 🚨 `padding-block`/`padding-inline-*`, não o atalho `padding`: o atalho
     reescreveria os 4 lados de uma vez e apagaria a folga que reserva o
     lugar do ícone/selo (definida à parte, embaixo). */
  html[data-rpgw='vip'] .vip__lista li {
    flex-basis: calc(50% - calc(3px * var(--rpg-un, 1)));
    max-width: calc(50% - calc(3px * var(--rpg-un, 1)));
    min-width: 0;
    padding-block: calc(5px * var(--rpg-un, 1));
    padding-inline-start: calc(var(--ico-d) + calc(14px * var(--rpg-un, 1)));
    padding-inline-end: calc(8px * var(--rpg-un, 1));
  }
  html[data-rpgw='vip'] .vip__lista li:nth-last-child(-n+2) {
    padding-inline-end: calc(var(--chk-d) + calc(8px * var(--rpg-un, 1)));
  }
}