/* Pacote de 60/120 fps — a tela de compra (oferta -> Pix -> confirmado), no visual do
 * larpbots.com (tema escuro, as mesmas cores, fontes e a mascote deitada sobre o cartão).
 * Usada na Activity e no estúdio. Tudo prefixado com `fps-` e as cores presas no `.fps-fundo`:
 * nada daqui vaza para a página que a abre.
 *
 * As fontes moram aqui (fontes/): dentro do Discord a Activity não carrega o Google Fonts. */
@font-face { font-family: "Manrope"; font-weight: 400 800; font-display: swap;
  src: url("fontes/manrope-latin.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 600 800; font-display: swap;
  src: url("fontes/sora-latin.woff2") format("woff2"); }

.fps-fundo {
  --fundo: #080d18; --cartao: #172238; --texto: #f1f5ff; --fraco: #a3b3cc; --borda: #263650;
  --primaria: #3b82f6; --primaria-2: #60a5fa; --campo: #0e1626; --ok: #34d399;
  --ok-fundo: rgb(52 211 153 / 14%); --perigo: #f87171; --perigo-fundo: rgb(248 113 113 / 8%);
  --perigo-borda: rgb(248 113 113 / 32%);
  --sombra-cartao: 0 1px 2px rgb(0 0 0 / 30%), 0 16px 40px -16px rgb(0 0 0 / 60%);
  --sombra-botao: 0 10px 28px -10px color-mix(in oklab, var(--primaria) 60%, transparent);
  /* flex + `margin: auto` na moldura, e NÃO grid centralizado: centralizado de grid transborda
     para CIMA quando não cabe, e esse pedaço não rola — a cabeça da mascote sumia */
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center; padding: 16px;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgb(4 8 16 / 78%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--texto); font: 15px/1.5 "Manrope", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  animation: fps-entra .18s ease-out;
}
.fps-fundo *, .fps-fundo *::before, .fps-fundo *::after { box-sizing: border-box; }
@keyframes fps-entra { from { opacity: 0; } }

/* largura do cartão; o espaço de cima é proporcional a ela (a mascote também é) */
.fps-moldura { width: min(400px, 100%); margin: auto 0; }
.fps-espaco { padding-top: calc(53% - 16px); }
.fps-cartao {
  position: relative; display: flex; flex-direction: column; gap: 20px;
  background: var(--cartao); border: 1px solid var(--borda); box-shadow: var(--sombra-cartao);
  border-radius: 24px; padding: 32px 24px 24px;
}
/* a mascote DEITADA sobre o cartão, o corpo afundando 14px na borda (igual ao site) */
.fps-mascote {
  /* `height: auto`: a tag traz height="449" (reserva o espaço), e sem isto a imagem ficava
     com 449px de altura em qualquer largura — espremida, com a cabeça para fora da tela */
  position: absolute; bottom: calc(100% - 14px); left: 50%; z-index: 2; width: 106%; height: auto;
  max-width: none; transform: translateX(-50%); pointer-events: none; user-select: none;
  filter: drop-shadow(0 10px 10px rgb(15 23 42 / 22%));
}
.fps-sombra {
  position: absolute; top: 0; left: 8%; z-index: 1; width: 78%; height: 20px;
  transform: translateY(-33%); border-radius: 999px; background: rgb(0 0 0 / 45%);
  filter: blur(12px); pointer-events: none;
}
.fps-fechar {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px;
  border: 0; border-radius: 999px; background: transparent; color: var(--fraco);
  font: 22px/1 sans-serif; cursor: pointer; display: grid; place-items: center;
}
.fps-fechar:hover { background: rgb(255 255 255 / 6%); color: var(--texto); }

.fps-topo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.fps-kicker { color: var(--primaria-2); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; }
.fps-titulo { margin: 0; font: 700 24px/1.2 "Sora", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.02em; }
.fps-preco { font: 700 30px/1.1 "Sora", ui-sans-serif, system-ui, sans-serif; }
.fps-preco small { display: block; margin-top: 4px; color: var(--fraco);
  font: 500 13px/1.4 "Manrope", ui-sans-serif, system-ui, sans-serif; }
.fps-texto { margin: 0; color: var(--fraco); font-size: 14px; text-align: center; }
.fps-miudo { margin: 0; color: var(--fraco); font-size: 12px; text-align: center; }

.fps-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fps-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.fps-lista li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 999px;
  background: var(--ok-fundo) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.fps-lista b { font-weight: 700; }

/* o QR numa moldura branca, como no site */
.fps-qr { margin: 0 auto; padding: 12px; border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%); line-height: 0; }
.fps-qr img { width: 200px; height: 200px; image-rendering: pixelated; }

.fps-copia { display: flex; flex-direction: column; gap: 12px; }
.fps-rotulo { text-align: center; color: var(--fraco); font-size: 14px; font-weight: 600; }
.fps-campo {
  width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--campo); color: var(--texto);
  font: 12px/1.4 ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fps-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: 46px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--primaria), var(--primaria-2)); color: #fff;
  box-shadow: var(--sombra-botao); font: 700 15px/1 "Manrope", ui-sans-serif, system-ui, sans-serif;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fps-botao:hover { transform: translateY(-2px); }
.fps-botao:disabled { opacity: .6; cursor: default; transform: none; }
.fps-botao svg { width: 18px; height: 18px; }
.fps-link { align-self: center; border: 0; background: none; padding: 4px; cursor: pointer;
  color: var(--fraco); font: 600 14px/1.4 "Manrope", ui-sans-serif, system-ui, sans-serif; }
.fps-link:hover { color: var(--texto); }

.fps-espera { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.fps-aguardando { display: inline-flex; align-items: center; gap: 8px; color: var(--fraco); font-size: 14px; }
.fps-gira { width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgb(163 179 204 / 30%);
  border-top-color: var(--primaria-2); animation: fps-gira .8s linear infinite; flex: none; }
.fps-gira.grande { width: 28px; height: 28px; border-width: 3px; }
@keyframes fps-gira { to { transform: rotate(360deg); } }
.fps-tempo { font-variant-numeric: tabular-nums; }

.fps-selo { margin: 0 auto; width: 56px; height: 56px; border-radius: 16px; display: grid;
  place-items: center; background: var(--ok-fundo); color: var(--ok); }
.fps-selo svg { width: 28px; height: 28px; }
.fps-aviso { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--perigo-borda);
  background: var(--perigo-fundo); color: var(--perigo); font-size: 14px; }
.fps-carregando { display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 18px 0 6px; color: var(--fraco); }

/* janela comum da Activity (até ~940px de altura): mascote um pouco menor */
@media (max-height: 940px) {
  .fps-espaco { padding-top: calc(44% - 12px); }
  .fps-mascote { width: 88%; bottom: calc(100% - 12px); }
}
/* tela baixa (celular deitado, janela pequena): cartão, QR e textos menores */
@media (max-height: 700px) {
  .fps-moldura { width: min(360px, 100%); }
  .fps-cartao { gap: 14px; padding: 26px 20px 20px; }
  .fps-qr img { width: 168px; height: 168px; }
  .fps-titulo { font-size: 21px; }
  .fps-preco { font-size: 26px; }
}
/* janela LARGA e BAIXA (a Activity no PC, celular deitado): o Pix em duas colunas — o QR de um
   lado, o resto do outro — e a mascote num tamanho fixo, para caber sem rolar */
@media (min-width: 640px) and (max-height: 700px) {
  .fps-moldura { width: min(400px, 100%); }
  .fps-moldura:has(.fps-cartao.pix) { width: min(660px, 100%); }
  .fps-espaco { padding-top: 140px; }
  .fps-mascote { width: 300px; bottom: calc(100% - 10px); }
  .fps-cartao.pix { display: grid; grid-template-columns: auto 1fr; column-gap: 26px; row-gap: 14px;
    align-items: center; }
  .fps-cartao.pix .fps-qr { grid-column: 1; grid-row: 1 / span 3; }
  .fps-cartao.pix .fps-topo, .fps-cartao.pix .fps-copia, .fps-cartao.pix .fps-espera { grid-column: 2; }
  .fps-cartao.pix .fps-topo { align-items: flex-start; text-align: left; }
  .fps-cartao.pix .fps-espera { align-items: flex-start; text-align: left; }
  .fps-cartao.pix .fps-espera .fps-miudo, .fps-cartao.pix .fps-rotulo { text-align: left; }
}
@media (min-width: 640px) and (max-height: 460px) {
  .fps-espaco { padding-top: 100px; }
  .fps-mascote { width: 220px; bottom: calc(100% - 10px); }
  .fps-qr img { width: 150px; height: 150px; }
  .fps-cartao { padding: 22px 20px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .fps-fundo, .fps-gira { animation: none; }
  .fps-botao { transition: none; }
}