/* Horda em 7 dias: kit do link (3 armas mais fortes + Armadura de batalha por 5 rodadas), 2026-11-07 */

/* boas-vindas de quem chegou pelo link */
#kl-aviso { position: fixed; z-index: 30; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%);
  width: min(520px, calc(100% - 20px)); display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: clamp(9px, 2.4vw, 12px) clamp(10px, 3vw, 14px); border-radius: 16px; border: 1px solid var(--luz, #ffd36b);
  background: linear-gradient(135deg, rgba(70, 30, 14, 0.97), rgba(14, 18, 34, 0.97)); color: var(--texto, #f3efe6);
  font: 600 clamp(12.5px, 3.7vw, 14.5px) var(--fonte, sans-serif); line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 140, 60, 0.25); animation: kl-entra 0.45s ease-out both; }
#kl-aviso b { color: var(--luz, #ffd36b); }
#kl-aviso .kl-aviso-ics { display: grid; grid-template-columns: repeat(2, auto); gap: 2px; }
#kl-aviso .kl-mini { width: clamp(22px, 6.4vw, 28px); height: clamp(22px, 6.4vw, 28px); object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
#kl-aviso button { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08); color: var(--texto, #f3efe6); font: 900 14px var(--fonte, sans-serif); }
@keyframes kl-entra { from { opacity: 0; transform: translate(-50%, -14px); } }

/* o cartão do kit (folha que sobe de baixo, como a do bônus de 7 dias) */
#kl { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(3, 6, 14, 0.72); }
#kl.some, #kl-chip.some { display: none; }
#kl .kl-folha { width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; text-align: center;
  background: var(--painel, rgba(11, 17, 32, 0.97)); border: 1px solid var(--borda, rgba(255, 255, 255, 0.12)); border-bottom: 0;
  border-radius: 20px 20px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); color: var(--texto, #f3efe6);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6); animation: kl-sobe 0.28s ease-out; }
@keyframes kl-sobe { from { transform: translateY(40px); opacity: 0; } }
#kl .kl-rot { margin: 0; font-size: 11.5px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--luz, #ffd36b); }
#kl h2 { margin: 6px 0 12px; font-size: clamp(19px, 5.6vw, 23px); line-height: 1.2; }
#kl .kl-itens { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#kl .kl-itens li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 211, 107, 0.22), rgba(255, 255, 255, 0.03) 70%);
  border: 1px solid rgba(255, 211, 107, 0.45); animation: kl-pulo 0.5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--n) * 0.08s); }
#kl .kl-img { width: clamp(50px, 15vw, 66px); height: clamp(50px, 15vw, 66px); object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55)); }
#kl .kl-itens span { font-size: clamp(10.5px, 3vw, 12px); font-weight: 800; line-height: 1.15; }
@keyframes kl-pulo { from { transform: scale(0.4); opacity: 0; } }
#kl .kl-rodadas { margin: 0 0 6px; font-size: 16px; }
#kl .kl-rodadas b { color: var(--luz, #ffd36b); font-size: 19px; }
#kl .kl-dica { margin: 0 0 14px; font-size: 13px; line-height: 1.4; color: var(--apagado, #9aa3b8); }

/* o aviso no mapa: quantas rodadas faltam (embaixo do botão do bônus de 7 dias) */
#kl-chip { position: fixed; z-index: 13; left: 10px; top: calc(118px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 2px;
  padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid rgba(255, 211, 107, 0.55); background: rgba(40, 22, 10, 0.92);
  color: var(--texto, #f3efe6); font: 700 13px var(--fonte, sans-serif); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); cursor: pointer; }
#kl-chip b { color: var(--luz, #ffd36b); }
#kl-chip .kl-chip-ic { width: 24px; height: 24px; object-fit: contain; margin-right: -4px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
#kl-chip span { margin-left: 8px; }
@media (prefers-reduced-motion: reduce) { #kl-aviso, #kl .kl-folha, #kl .kl-itens li { animation: none; } }

/* a promoção de 1 hora do fim do kit (2026-11-07) */
#kl .kl-folha { position: relative; }
#kl .kl-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borda, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.06); color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
#kl .kl-tempo { display: inline-block; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px; background: rgba(229, 56, 59, 0.16);
  border: 1px solid rgba(229, 56, 59, 0.55); color: #ffb3b4; font-size: 14px; font-weight: 700; }
#kl .kl-tempo b { color: #fff; font-variant-numeric: tabular-nums; font-size: 16px; }
#kl .kl-tempo.fim { background: rgba(255, 255, 255, 0.06); border-color: var(--borda, rgba(255, 255, 255, 0.12)); color: var(--apagado, #9aa3b8); }
#kl .kl-venda li { padding-bottom: 10px; }
#kl .kl-venda li span { margin-bottom: 4px; }
#kl .kl-preco { margin-top: auto; width: 100%; padding: 8px 2px; border: 0; border-radius: 10px; background: var(--luz, #ffd36b); color: #1a1405;
  font: 900 clamp(12px, 3.5vw, 14px) var(--fonte, sans-serif); cursor: pointer; }
#kl .kl-preco:disabled { background: rgba(255, 255, 255, 0.1); color: var(--apagado, #9aa3b8); cursor: default; }
#kl .kl-um { grid-template-columns: 1fr; max-width: 140px; margin: 6px auto 4px; }
#kl .kl-aviso-txt { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 211, 107, 0.12); font-size: 13px; }
#kl .kl-regras { text-align: left; margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.45; }
#kl .kl-regras li + li { margin-top: 4px; }
#kl .kl-regras a, #kl .kl-pe a { color: var(--luz, #ffd36b); }
#kl .kl-email { display: block; text-align: left; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
#kl .kl-email input { display: block; width: 100%; margin-top: 4px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--borda, rgba(255, 255, 255, 0.2));
  background: rgba(255, 255, 255, 0.06); color: inherit; font: 600 15px var(--fonte, sans-serif); }
#kl small.kl-dica { display: block; text-align: left; margin: 0 0 8px; font-size: 12px; }
#kl .kl-erro { margin: 0 0 8px; color: #ff8a8d; font-size: 13px; font-weight: 700; }
#kl .kl-erro.some { display: none; }
#kl .kl-quem { margin: 4px 0 8px; font-size: 14px; }
#kl .kl-pe { margin: 10px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--apagado, #9aa3b8); }
#kl .kl-qr { display: block; width: min(220px, 60vw); margin: 0 auto 10px; border-radius: 12px; background: #fff; padding: 8px; }
#kl .largo + .largo { margin-top: 8px; }
#kl-chip.promo { border-color: rgba(229, 56, 59, 0.8); background: rgba(60, 12, 14, 0.94); animation: kl-promo 1.6s ease-in-out infinite; }
#kl-chip.promo b { color: #fff; font-variant-numeric: tabular-nums; }
@keyframes kl-promo { 50% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 16px rgba(229, 56, 59, 0.6); } }
@media (prefers-reduced-motion: reduce) { #kl-chip.promo { animation: none; } }
