/* Phishing Magalu — folha unica.

   MOBILE-FIRST: a maioria joga no celular, entao o layout base e o de telefone
   e as media queries so ACRESCENTAM espaco em tela grande. Alvo de toque minimo
   de 44px em tudo que e clicavel: a versao anterior tinha ponto de 18px de
   altura, o que garante erro de dedo - e erro de dedo desconta em silencio.

   DUAS PELES, de proposito:
   - a MOLDURA do treinamento (fundo, HUD, cartoes, placar) e vibrante: e um
     estande de evento com premiacao, nao um formulario;
   - a PAGINA FALSA (`.fake`) e sobria e imita site de loja. Se as duas se
     parecessem, o jogador nao saberia onde termina o jogo e comeca o golpe.

   Azul da marca: #0E89FF (identidade oficial da Magazine Luiza). Ele importa
   duas vezes - veste a moldura E e a referencia da isca de identidade visual,
   que pinta o logotipo numa cor que a marca nao usa.
*/

:root {
  --magalu: #0E89FF;
  --magalu-esc: #0A63BC;
  --magalu-claro: #E8F3FF;

  --festa-1: #0E89FF;
  --festa-2: #7B3DF5;
  --festa-3: #FF3D8B;
  --ouro: #F5A623;

  --tinta: #0E1420;
  --tinta-2: #4A5768;
  --papel: #F3F5F9;
  --branco: #FFFFFF;
  --borda: #DCE2EC;
  --borda-2: #EDF1F6;

  --ok: #0B8A57;
  --ok-claro: #E4F5EE;
  --ruim: #C4342A;
  --ruim-claro: #FCECEA;

  --raio: 14px;
  --toque: 44px;               /* piso de alvo de toque */
  --sombra: 0 2px 10px rgba(14, 20, 32, .07);
  --sombra-alta: 0 10px 30px rgba(14, 20, 32, .14);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 8px; text-wrap: balance; }
a { color: var(--magalu-esc); }
:focus-visible { outline: 3px solid var(--magalu); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- moldura */
.tela-centro {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
}

/* Fundo de evento: gradiente vivo atras dos cartoes. Fica so na moldura -
   a pagina falsa nunca o ve. */
.festa {
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(123, 61, 245, .20), transparent 62%),
    radial-gradient(900px 440px at 92% 4%, rgba(255, 61, 139, .16), transparent 60%),
    linear-gradient(168deg, #EAF2FF 0%, var(--papel) 46%);
}

.cartao {
  width: 100%; max-width: 460px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 20px;
  padding: 26px 22px;
  box-shadow: var(--sombra-alta);
}
.cartao.largo { max-width: 780px; }

.etiqueta {
  margin: 0 0 10px;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--magalu);
}
.sub { color: var(--tinta-2); margin: 0 0 18px; }
.sub b { color: var(--tinta); }

.alerta {
  background: var(--ruim-claro); border: 1px solid #F3C9C4; color: #8E241C;
  border-radius: 10px; padding: 11px 13px; margin: 0 0 16px; font-size: .9rem;
}
/* Aviso neutro (ex.: "enviamos um codigo para..."): informa, nao acusa. */
.aviso {
  background: #EAF4FF; border: 1px solid #BBDBFF; color: #0B4F91;
  border-radius: 10px; padding: 11px 13px; margin: 0 0 16px; font-size: .9rem;
}
/* Campo do codigo de 6 digitos: grande e espacado, como o teclado do banco. */
input.codigo { font-size: 1.5rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }

form { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: .86rem; font-weight: 600; }
input {
  min-height: var(--toque);
  padding: 11px 13px;
  font-size: 16px;                       /* 16px evita o zoom automatico do iOS */
  color: var(--tinta); background: var(--branco);
  border: 1px solid var(--borda); border-radius: 10px;
}
input::placeholder { color: #97A2B2; font-weight: 400; }
input:focus { border-color: var(--magalu); }

button {
  min-height: var(--toque);
  width: 100%; padding: 13px;
  border: 0; border-radius: 12px;
  background: var(--magalu); color: #fff;
  font-size: 1rem; font-weight: 700; cursor: pointer;
}
button:active { background: var(--magalu-esc); }
/* Acao secundaria (reenviar codigo): mesmo toque, sem competir com o botao principal. */
button.secundario { background: transparent; color: var(--magalu); border: 1.5px solid var(--magalu); }
button.secundario:active { background: #EAF4FF; }

.botao-grande {
  display: block; text-align: center; text-decoration: none;
  min-height: var(--toque); padding: 14px;
  margin-top: 22px; border-radius: 12px;
  background: var(--magalu); color: #fff; font-weight: 700;
}

.rodape-min { text-align: center; margin: 18px 0 0; font-size: .88rem; }

.lista-cenarios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-cenarios a {
  display: flex; flex-direction: column; gap: 2px;
  min-height: var(--toque);
  padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px;
  text-decoration: none; color: var(--tinta);
}
.lista-cenarios a:active { background: var(--magalu-claro); }
.lista-cenarios span { font-size: .78rem; color: var(--tinta-2); font-family: ui-monospace, monospace; }

/* ------------------------------------------------------------------- jogo */
.tela-jogo { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

.hud {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 14px calc(10px + env(safe-area-inset-top));
  background: linear-gradient(100deg, #0B1220 0%, #14243D 100%);
  color: #fff;
}
.hud-item { display: flex; flex-direction: column; line-height: 1.1; }
.hud-item b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.hud-item span { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .62; }
.hud-desistir {
  margin-left: auto; width: auto;
  min-height: var(--toque); padding: 9px 16px;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 10px; font-size: .88rem; font-weight: 600;
}

.instrucao {
  max-width: 720px; margin: 12px auto; padding: 0 16px;
  font-size: .88rem; color: var(--tinta-2);
}
.instrucao b { color: var(--tinta); }

/* ======================================================================
   A PAGINA FALSA (`.fake.fk`) - o padrao aprovado pelo dono no mock do
   cenario 1 e levado aos 10 moldes. Mobile-first de verdade: a base e
   360-430px, as media queries so acrescentam ar. Sem imagem externa, sem
   CDN, sem webfont: fonte do sistema (arredondada quando houver) e toda a
   cenografia (thumb, codigo de barras, carimbo, confete) em CSS.

   HOTSPOT INVISIVEL continua a regra: `.alvo` NAO tem tamanho, padding nem
   borda generica. Cada TIPO de bloco carrega o espaco que um site real daria
   a ele - e e esse espaco que garante os 44px de toque (medido em
   testes/moldes.py e nos prints do lote).
   ====================================================================== */
.fake.fk {
  --fk-azul: #0086FF; --fk-azul-2: #0069CC; --fk-azul-esc: #0A3D7A; --fk-ciano: #2ED3F7;
  --fk-tinta: #14213D; --fk-tinta-2: #5B6B82; --fk-linha: #E3E9F2; --fk-papel: #F4F6FA;
  --fk-alerta: #FF5A36; --fk-alerta-fundo: #FFF1EC; --fk-alerta-borda: #FFD2C4;
  --fk-ok: #12A66B; --fk-verde-esc: #0B5C3A;
  --fk-r: 14px;
  --fk-fonte: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

  max-width: 640px; margin: 0 auto 36px;
  background: #fff; color: var(--fk-tinta);
  border: 1px solid var(--borda); border-radius: 0;
  font: 15px/1.5 var(--fk-fonte);
  position: relative; overflow: hidden;
}
/* Malha azul atras do topo, como no app. */
.fake.fk::before {
  content: ""; position: absolute; inset: -120px -40px auto; height: 360px;
  background:
    radial-gradient(520px 260px at 20% 30%, rgba(0, 134, 255, .16), transparent 60%),
    radial-gradient(420px 220px at 90% 10%, rgba(46, 211, 247, .18), transparent 60%);
  pointer-events: none; z-index: 0;
}
.fake.fk > * { position: relative; z-index: 1; }
@media (min-width: 720px) { .fake.fk { border-radius: 18px; margin-top: 4px; } }

/* Entrada em cascata. O `prefers-reduced-motion` global ja zera a duracao. */
@keyframes fk-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fk .anim { animation: fk-sobe .55s cubic-bezier(.2, .7, .2, 1) both; }
.fk .d1 { animation-delay: .05s; } .fk .d2 { animation-delay: .15s; } .fk .d3 { animation-delay: .25s; }
.fk .d4 { animation-delay: .35s; } .fk .d5 { animation-delay: .45s; } .fk .d6 { animation-delay: .55s; }

/* ---- faixa promocional rolante ---------------------------------------- */
.fk-promo {
  background: var(--fk-azul); color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  overflow: hidden; white-space: nowrap;
}
.fk-promo span { display: inline-block; padding: 7px 0; animation: fk-rola 18s linear infinite; }
.fk-promo i { font-style: normal; margin: 0 22px; opacity: .9; }
@keyframes fk-rola { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- header: logo completo + icones; menu de categorias embaixo -------- */
.fk-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px 10px; }
.fk-logo { display: inline-flex; align-items: center; min-height: var(--toque); padding: 4px 8px; }
.fk-icones { display: flex; gap: 14px; color: var(--fk-tinta-2); }
.fk-icones svg { width: 24px; height: 24px; }
.fk-menu {
  display: flex; gap: 4px 20px; overflow-x: auto; scrollbar-width: none;
  padding: 0 18px; border-bottom: 1px solid var(--fk-linha);
  font-size: .84rem; font-weight: 600; color: var(--fk-tinta-2);
}
.fk-menu::-webkit-scrollbar { display: none; }
.fk-menu span { padding: 12px 0; line-height: 20px; white-space: nowrap; }
.fk-menu span:first-child { color: var(--fk-tinta); box-shadow: inset 0 -2px 0 var(--fk-azul); }

/* ---- saudacao: check animado + h1 + sub ------------------------------- */
.fk-saud { padding: 12px 18px 0; }
.fk-ok {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--fk-ok); color: #fff; margin-bottom: 6px;
  box-shadow: 0 10px 26px rgba(18, 166, 107, .35);
}
.fk-ok svg { width: 28px; height: 28px; stroke-dasharray: 40; stroke-dashoffset: 40; animation: fk-tick .6s .5s ease-out forwards; }
.fk-ok.alerta { background: var(--fk-alerta); box-shadow: 0 10px 26px rgba(255, 90, 54, .35); }
.fk-ok.azul { background: var(--fk-azul); box-shadow: 0 10px 26px rgba(0, 134, 255, .35); }
@keyframes fk-tick { to { stroke-dashoffset: 0; } }
.fk-h1 {
  margin: 0; padding: 11px 0 10px;
  font: 800 1.45rem/1.15 var(--fk-fonte); letter-spacing: -.02em; color: var(--fk-tinta);
  text-wrap: balance;
}
.fk-sub { margin: 0; color: var(--fk-tinta-2); font-size: .92rem; }
.fk-sub b { color: var(--fk-tinta); }

/* ---- stepper do pedido ------------------------------------------------ */
.fk-passos { display: flex; align-items: center; gap: 6px; margin: 16px 18px 0; font-size: .72rem; color: var(--fk-tinta-2); }
.fk-passos b { display: flex; align-items: center; gap: 6px; color: var(--fk-tinta); white-space: nowrap; }
.fk-passos .p { width: 10px; height: 10px; border-radius: 50%; background: var(--fk-ok); flex: 0 0 auto; }
.fk-passos .p.agora { background: var(--fk-azul); box-shadow: 0 0 0 0 rgba(0, 134, 255, .6); animation: fk-pulsa 1.6s infinite; }
.fk-passos .p.fut { background: var(--fk-linha); }
.fk-passos .f { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.fk-passos .tr { flex: 1; height: 2px; background: var(--fk-linha); min-width: 8px; }
@keyframes fk-pulsa { to { box-shadow: 0 0 0 9px rgba(0, 134, 255, 0); } }

/* ---- corpo ------------------------------------------------------------ */
.fk-main { padding: 14px 18px 24px; }
.fk-card { background: #fff; border: 1px solid var(--fk-linha); border-radius: var(--fk-r); box-shadow: 0 8px 28px rgba(20, 33, 61, .06); }
.fk-par { margin: 0; padding: 11px 0; color: var(--fk-tinta-2); font-size: .95rem; }

/* produto com thumbnail em CSS */
.fk-produto { display: flex; gap: 12px; align-items: center; padding: 12px; }
.fk-thumb { width: 68px; height: 68px; border-radius: 12px; flex: 0 0 auto; background: linear-gradient(140deg, #EAF2FF, #CFE1FF); position: relative; }
.fk-thumb::before { content: ""; position: absolute; inset: 12px 10px 18px; border-radius: 5px; background: linear-gradient(160deg, #1F2B47, #0B1226); }
.fk-thumb::after { content: ""; position: absolute; left: 50%; bottom: 9px; width: 26px; height: 4px; margin-left: -13px; border-radius: 2px; background: #1F2B47; }
.fk-produto b { display: block; font-size: .95rem; line-height: 1.25; }
.fk-produto span { display: block; color: var(--fk-tinta-2); font-size: .8rem; margin-top: 3px; }
.fk-tag { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: #E6F2FF; color: var(--fk-azul-2); margin-top: 6px; }

/* destaque: rotulo pequeno, valor grande, complemento */
.fk-rot { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fk-tinta-2); }
.fk-dest { display: block; padding: 2px 0 6px; }
.fk-valor { display: block; font-size: 2.2rem; font-weight: 900; letter-spacing: -.04em; color: var(--fk-azul-2); line-height: 1.05; margin: 2px 0 4px; }
.fk-valor small { font-size: 1rem; font-weight: 700; vertical-align: top; margin-right: 2px; }
.fk-dest-sub { display: block; font-size: .82rem; color: var(--fk-tinta-2); }

/* urgencia: caixa laranja com o relogio regressivo */
.fk-venc {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 8px 0 0; padding: 11px 12px;
  background: var(--fk-alerta-fundo); border: 1px solid var(--fk-alerta-borda); border-radius: 10px;
}
.fk-venc b { color: #B9330F; font-size: .85rem; line-height: 1.35; }
.fk-relogio { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 900; font-size: 1.25rem; color: var(--fk-alerta); letter-spacing: .02em; }

/* boleto: codigo de barras + linha digitavel */
.fk-boleto { margin-top: 12px; padding: 16px; overflow: hidden; position: relative; }
.fk-boleto::before { content: ""; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(46, 211, 247, .25), transparent 70%); }
.fk-barras { height: 52px; margin: 14px 0 6px; border-radius: 4px; background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 4px, #111 4px 5px, #fff 5px 8px, #111 8px 11px, #fff 11px 13px, #111 13px 14px, #fff 14px 17px); }
.fk-digit { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; color: var(--fk-tinta-2); word-break: break-all; margin: 0; }

/* botoes */
.fk .fk-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 0; border: 0; border-radius: 12px; padding: 15px; margin: 12px 0 0;
  background: var(--fk-azul); color: #fff; font: 800 1rem var(--fk-fonte); cursor: pointer; text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 134, 255, .28); transition: transform .12s, box-shadow .12s;
}
.fk .fk-btn:active { transform: translateY(1px) scale(.995); box-shadow: 0 4px 12px rgba(0, 134, 255, .28); background: var(--fk-azul); }
.fk .fk-btn.sec { background: #fff; color: var(--fk-azul-2); border: 2px solid var(--fk-azul); box-shadow: none; margin-top: 8px; padding: 13px; }
.fk .fk-btn.sec:active { background: #F2F8FF; }
.fk .fk-btn svg { width: 20px; height: 20px; }
.fk .fk-btn.pilula { border-radius: 999px; }
.fk .fk-btn.vermelho { background: #D7263D; box-shadow: 0 10px 24px rgba(215, 38, 61, .28); }
.fk .fk-btn.vermelho:active { background: #B71C30; }
.fk .fk-btn.verde { background: var(--fk-ok); box-shadow: 0 10px 24px rgba(18, 166, 107, .28); }
.fk .fk-btn.verde:active { background: #0E8A58; }

/* link em frase */
.fk-frase { margin: 6px 0 0; padding: 11px 0; font-size: .92rem; color: var(--fk-tinta-2); }
.fk-url { color: var(--fk-azul-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }

/* selo do orgao: so o SIMBOLO REAL do orgao numa placa branca + o texto. Sem
   anel serrilhado/tracejado em volta (dono, 02/09: "chama atencao pra ele") -
   limpo e isca tem o MESMO formato. O limpo leva o wordmark da Magalu; a isca,
   o simbolo do orgao citado na cor errada (filtro) ou o simbolo de OUTRO orgao
   na cor original. */
.fk-selo {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px;
  background: linear-gradient(90deg, #F2FBF6, #fff); border: 1px solid #CFEFDD; border-radius: 12px;
}
.fk-carimbo {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; min-height: 54px; padding: 8px 10px; border-radius: 12px;
  background: #fff; border: 1px solid #DCEEE3;
}
.fk-emblema { display: block; position: relative; height: 30px; min-width: 30px; max-width: 110px; }
.fk-emblema img { display: block; height: 30px; width: auto; max-width: 110px; object-fit: contain; opacity: 0; transition: opacity .2s; }
/* Espaco neutro ate o arquivo carregar (nunca sigla inventada). */
.fk-emblema::before {
  content: ""; position: absolute; inset: 3px; border-radius: 6px;
  background: repeating-linear-gradient(135deg, #E3E9F2 0 4px, #F4F6FA 4px 8px);
}
.fk-emblema.ok img { opacity: 1; }
.fk-emblema.ok::before { display: none; }
/* Isca "simbolo na cor errada": o desenho e o real, a cor nao e a do orgao.
   Desvio de 60 graus no matiz: azul-marinho vira roxo, azul-petroleo vira
   violeta - perceptivel e ainda plausivel. O 150deg+saturate anterior era
   "exagerado" (dono, 02/09). So entra com `marca="cor-errada"` (simbolo do
   PROPRIO orgao); a isca de simbolo de outro orgao fica na cor original. */
.alvo.cor-errada .fk-emblema img { filter: hue-rotate(60deg); }
.fk-selo-txt { min-width: 0; }
.fk-selo b { display: block; font-size: .9rem; line-height: 1.3; }
.fk-selo small { display: block; color: var(--fk-tinta-2); font-size: .76rem; margin-top: 2px; }

/* formulario */
.fk-form { margin-top: 18px; }
.fk .fk-campo { display: block; padding: 6px 0; font-weight: 700; font-size: .84rem; }
.fk .fk-campo > span { display: block; margin: 6px 0 5px; }
.fk .fk-campo input {
  pointer-events: none; width: 100%; min-height: 0; padding: 13px;
  border: 1.5px solid var(--fk-linha); border-radius: 11px; background: #FAFBFD;
  font: 15px var(--fk-fonte); color: var(--fk-tinta);
}

/* ---- rodape escuro ---------------------------------------------------- */
.fk-rodape { background: #0F1B33; color: #B9C6DA; padding: 22px 18px 26px; font-size: .84rem; }
.fk-rodape h4 { margin: 0 0 2px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #7F93B2; }
.fk-rod-p { margin: 0 0 8px; padding: 12px 0; line-height: 1.5; }
.fk-rod-p b, .fk-rodape strong { color: #fff; }
.fk-apps { display: flex; gap: 10px; margin: 8px 0 16px; }
.fk-apps span { flex: 1; border: 1px solid #2A3A5C; border-radius: 9px; padding: 8px 10px; font-size: .72rem; line-height: 1.2; color: #DCE5F3; }
.fk-apps span b { display: block; font-size: .82rem; }
.fk-social { display: flex; gap: 10px; margin: 8px 0 16px; }
.fk-social i { width: 32px; height: 32px; border-radius: 50%; background: #22325A; display: grid; place-items: center; color: #DCE5F3; }
.fk-social svg { width: 16px; height: 16px; display: block; }
.fk-copy-bloco { border-top: 1px solid #22325A; padding-top: 6px; color: #7F93B2; font-size: .74rem; }
.fk-rod-p, .fk-copy { overflow-wrap: anywhere; }
.fk-copy { margin: 0; padding: 13px 0; line-height: 1.6; }
.fk-links { margin: 0; padding: 13px 0; display: flex; flex-wrap: wrap; gap: 4px 14px; line-height: 1.6; }
.fk-rodape .alvo.achado, .fk-rodape .alvo.errado { color: #fff; }
@media (hover: hover) { .fk-rodape .alvo:hover { background: rgba(255, 255, 255, .06); } }

/* ---- toast ("Codigo copiado") ---------------------------------------- */
.fk-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 30;
  background: #14213D; color: #fff; padding: 10px 16px; border-radius: 999px;
  font-size: .85rem; font-weight: 700; opacity: 0; transition: .25s; pointer-events: none;
}
.fk-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- tela larga: mais ar ---------------------------------------------- */
@media (min-width: 720px) {
  .fk-head { padding: 14px 20px 8px 14px; }
  .fk-saud, .fk-main { padding-left: 24px; padding-right: 24px; }
  .fk-passos { margin-left: 24px; margin-right: 24px; }
  .fk-h1 { font-size: 1.6rem; }
  .fk-rodape { padding: 26px 24px 30px; }
}

/* 1. CHECKOUT - o mock 1:1 ---------------------------------------------- */
.fake--checkout .fk-valor { margin-bottom: 8px; }

/* ---- pecas usadas por mais de um molde ------------------------------- */
.fk .fk-linha {
  margin: 0; padding: 12px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  font-size: .92rem; border-bottom: 1px solid var(--fk-linha);
}
.fk .fk-linha:last-child { border-bottom: 0; }
.fk .fk-abas { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 10px; font-size: .84rem; font-weight: 700; }
.fk .fk-abas::-webkit-scrollbar { display: none; }
.fk .fk-abas span { padding: 13px 12px; line-height: 20px; white-space: nowrap; }
.fk .fk-assinatura { margin: 14px 0 0; padding: 12px 0; border-top: 1px solid var(--fk-linha); font-size: .88rem; color: var(--fk-tinta-2); }
.fk-card > .fk-rot { padding-bottom: 4px; }
.fk-verde { padding: 16px; background: linear-gradient(160deg, #EEFBF4, #fff); border-color: #CFEFDD; }
.fk-verde .fk-valor { color: var(--fk-verde-esc); }
.fk .fk-btn.grande { padding: 18px; font-size: 1.1rem; }

/* 2. E-MAIL - webmail em volta, corpo de e-mail de loja, mapa em CSS ----- */
.fake--email::before { display: none; }
.fk-webmail { background: #F1F3F6; border-bottom: 1px solid var(--fk-linha); padding: 4px 0 6px; }
.fk .fk-de, .fk .fk-assunto { margin: 0; padding: 13px 14px; font-size: .88rem; line-height: 1.45; }
.fk-de { display: flex; align-items: center; gap: 10px; }
.fk-de-txt { min-width: 0; overflow-wrap: anywhere; }
.fk-de .fk-rot, .fk-assunto .fk-rot { display: inline-block; margin-right: 6px; min-width: 54px; }
.fk-assunto { font-weight: 700; }
.fk-avatar {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fk-azul); color: #fff; font-weight: 800; font-size: 1rem;
}
.fk-webmail-meta { margin: 0; padding: 0 14px 4px 60px; font-size: .74rem; color: var(--fk-tinta-2); }
.fk-email { position: relative; overflow: hidden; }
.fk-email::before {
  content: ""; position: absolute; inset: -120px -40px auto; height: 320px; z-index: 0;
  background:
    radial-gradient(520px 260px at 20% 30%, rgba(0, 134, 255, .14), transparent 60%),
    radial-gradient(420px 220px at 90% 10%, rgba(46, 211, 247, .16), transparent 60%);
  pointer-events: none;
}
.fk-email > * { position: relative; z-index: 1; }
.fake--email .fk-head { justify-content: center; padding-top: 14px; }
.fake--email .fk-saud { text-align: center; }
.fake--email .fk-h1 { font-size: 1.35rem; }
.fake--email .fk-passos { justify-content: center; }

/* mapa de entrega: malha, duas ruas, rota pontilhada, van e pin */
.fk-mapa {
  position: relative; height: 158px; margin: 4px 0 12px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--fk-linha);
  background:
    linear-gradient(90deg, rgba(20, 33, 61, .06) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(0deg, rgba(20, 33, 61, .06) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(140deg, #EAF3E6, #DDEBF8);
}
.fk-mapa .rua { position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(20, 33, 61, .06); }
.fk-mapa .r1 { left: -10%; right: -10%; top: 58%; height: 14px; transform: rotate(-8deg); }
.fk-mapa .r2 { top: -10%; bottom: -10%; left: 62%; width: 12px; transform: rotate(12deg); }
.fk-mapa .rota {
  position: absolute; left: 12%; top: 66%; width: 60%; height: 0;
  border-top: 3px dashed var(--fk-azul); transform: rotate(-24deg); transform-origin: left center;
}
.fk-mapa .van {
  position: absolute; left: 10%; top: 62%; width: 16px; height: 16px; border-radius: 50%;
  background: var(--fk-azul); box-shadow: 0 0 0 6px rgba(0, 134, 255, .22); animation: fk-pulsa 1.6s infinite;
}
.fk-mapa .pin {
  position: absolute; left: 66%; top: 20%; width: 24px; height: 24px;
  background: #FF3D8B; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 6px 14px rgba(255, 61, 139, .4);
}
.fk-mapa .pin::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.fk-mapa .legenda {
  position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); font-size: .68rem; font-weight: 700; color: var(--fk-tinta-2);
}
.fk-entrega { padding: 16px; }
.fake--email .fk-valor { font-size: 1.5rem; color: var(--fk-tinta); letter-spacing: -.02em; }
.fake--email .fk-form { margin-top: 12px; }

/* 3. CARTEIRA - app financeiro: saldo em card escuro com brilho, chips ---- */
.fake--carteira .fk-saud { padding-top: 6px; }
.fake--carteira .fk-h1 { font-size: 1.3rem; }
.fk-saldo {
  position: relative; overflow: hidden; padding: 18px 18px 16px; border-radius: 18px;
  background: linear-gradient(135deg, #0B1220, #17305A 70%, #1E4A8A); color: #fff;
  box-shadow: 0 14px 34px rgba(11, 18, 32, .28);
}
.fk-saldo::before {
  content: ""; position: absolute; right: -50px; top: -70px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 211, 247, .5), transparent 65%);
}
.fk-saldo::after {
  content: ""; position: absolute; left: -40px; bottom: -80px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 61, 245, .45), transparent 65%);
}
.fk-saldo > * { position: relative; z-index: 1; }
.fk-saldo .fk-rot { color: #9FB0C7; }
.fk-saldo .fk-valor { color: #fff; font-size: 2.5rem; }
.fk-saldo-origem { margin: 0; font-size: .78rem; color: #C7D2E4; }
.fk-chips { display: flex; gap: 8px; margin: 14px 0 0; }
.fk-chips span { padding: 8px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: rgba(255, 255, 255, .14); color: #fff; }
.fk-chips span:first-child { background: #fff; color: var(--fk-azul-2); }
.fake--carteira .fk-venc { margin-top: 12px; }

/* 4. PROMO - banner azul->ciano com confete, cupom tracejado, grade -------- */
.fk-banner {
  position: relative; overflow: hidden; margin: 6px 18px 0; padding: 22px 18px; border-radius: 16px;
  background: linear-gradient(100deg, var(--fk-azul), var(--fk-ciano)); color: #fff;
  box-shadow: 0 12px 30px rgba(0, 134, 255, .3);
}
.fk-banner-tag { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.fk-banner-txt { margin: 4px 0 0; font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.fk-banner .cf { position: absolute; width: 10px; height: 16px; border-radius: 2px; opacity: .9; }
.fk-banner .c1 { left: 8%; top: 12%; background: #FF3D8B; transform: rotate(18deg); }
.fk-banner .c2 { left: 30%; top: 70%; background: #F5A623; transform: rotate(-24deg); }
.fk-banner .c3 { left: 52%; top: 18%; background: #7B3DF5; transform: rotate(40deg); }
.fk-banner .c4 { left: 66%; top: 62%; background: #fff; transform: rotate(-10deg); width: 8px; height: 8px; border-radius: 50%; }
.fk-banner .c5 { left: 80%; top: 22%; background: #F5A623; transform: rotate(12deg); }
.fk-banner .c6 { left: 90%; top: 66%; background: #FF3D8B; transform: rotate(-38deg); }
.fk-banner .c7 { left: 42%; top: 82%; background: #fff; transform: rotate(30deg); width: 6px; height: 6px; border-radius: 50%; }
.fk-banner .c8 { left: 18%; top: 44%; background: #7B3DF5; transform: rotate(-52deg); width: 8px; height: 12px; }
.fake--promo .fk-saud { padding-top: 8px; }
.fk-cupom {
  padding: 16px; text-align: center; border: 3px dashed var(--fk-azul); border-radius: 14px; background: #F7FBFF;
}
.fk-cupom .fk-valor { font-size: 2rem; letter-spacing: .08em; font-family: ui-monospace, Menlo, Consolas, monospace; }
.fk-cupom .fk-btn { margin-top: 8px; }
.fake--promo .fk-venc { margin-top: 12px; background: #FFECEC; border-color: #FFC9C9; }
.fake--promo .fk-venc b { color: #B3151F; }
.fk-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 6px; }
.fk-prod { padding: 12px; }
.fk-prod .fk-thumb { width: 100%; height: 84px; margin-bottom: 8px; }
.fk-prod .fk-thumb.tv::before { inset: 14px 16px 22px; }
.fk-prod .fk-thumb.cel::before { inset: 10px 34% 10px; border-radius: 9px; }
.fk-prod .fk-thumb.cel::after { display: none; }
.fk-prod b { display: block; font-size: .84rem; line-height: 1.25; }
.fk-prod s { display: block; font-size: .74rem; color: var(--fk-tinta-2); margin-top: 4px; }
.fk-prod em { display: block; font-style: normal; font-weight: 900; color: var(--fk-azul-2); font-size: 1.05rem; letter-spacing: -.02em; }

/* 5. PORTAL - painel do parceiro: abas navy, badge, ficha, grafico -------- */
.fk-conta { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--fk-tinta); text-align: right; }
.fk-conta i { order: 2; width: 34px; height: 34px; border-radius: 50%; background: var(--fk-azul-esc); color: #fff; display: grid; place-items: center; font-style: normal; font-size: .72rem; font-weight: 900; }
.fk-conta small { display: block; font-weight: 600; color: var(--fk-tinta-2); font-size: .68rem; }
.fake--portal .fk-abas { background: #12233D; color: #C7D2E4; }
.fake--portal .fk-abas span:first-child { color: #fff; box-shadow: inset 0 -3px 0 var(--fk-azul); }
.fk-badge-susp {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 11px 5px 9px; border-radius: 999px;
  background: #FDE8E8; color: #B3151F; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.fk-badge-susp i { width: 8px; height: 8px; border-radius: 50%; background: #D7263D; animation: fk-pulsa-r 1.4s infinite; }
@keyframes fk-pulsa-r { from { box-shadow: 0 0 0 0 rgba(215, 38, 61, .6); } to { box-shadow: 0 0 0 8px rgba(215, 38, 61, 0); } }
.fk-fichas { margin-top: 12px; padding: 4px 14px; }
.fk .fk-ficha { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--fk-linha); font-size: .92rem; }
.fk .fk-ficha:last-child { border-bottom: 0; }
.fk .fk-ficha b { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.fk .fk-ficha.situacao b { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #FFF4E5; color: #8A4B00; font-size: .8rem; }
.fk-grafico { margin-top: 12px; padding: 14px 14px 10px; }
.fk-barras-g { display: flex; align-items: flex-end; gap: 8px; height: 96px; padding-bottom: 18px; margin-top: 6px; }
.fk-barras-g i {
  display: block; flex: 1; position: relative; height: calc(var(--v) * 100%); border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--fk-azul), var(--fk-azul-2));
  transform-origin: bottom; animation: fk-cresce .7s .3s cubic-bezier(.2, .7, .2, 1) both;
}
.fk-barras-g i.bloq { background: repeating-linear-gradient(135deg, #FFB199 0 4px, #FFD2C4 4px 8px); }
.fk-barras-g b { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font-size: .66rem; font-weight: 700; color: var(--fk-tinta-2); }
@keyframes fk-cresce { from { transform: scaleY(0); } }
.fk-grafico-leg { margin: 8px 0 0; font-size: .7rem; color: var(--fk-tinta-2); display: flex; gap: 6px 12px; align-items: center; }
.fk-grafico-leg span { width: 10px; height: 10px; border-radius: 3px; background: var(--fk-azul); display: inline-block; }
.fk-grafico-leg span.bloq { background: #FFB199; }

/* 6. STATUS - linha do tempo com 3 passos, valor em card verde ----------- */
.fk-timeline { position: relative; padding: 14px 16px 6px; }
.fk-timeline::before { content: ""; position: absolute; left: 27px; top: 62px; bottom: 34px; width: 2px; background: var(--fk-ok); opacity: .35; }
.fake--status .fk-linha { position: relative; padding: 12px 0 12px 32px; border-bottom: 0; flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
.fake--status .fk-linha::before {
  content: ""; position: absolute; left: 4px; top: 15px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--fk-ok) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 12.5 4 4 8-8'/></svg>") center / 12px no-repeat;
  box-shadow: 0 0 0 4px #E4F5EE; animation: fk-pop .4s cubic-bezier(.2, .7, .2, 1) both;
}
.fake--status .fk-linha.t1::before { animation-delay: .3s; }
.fake--status .fk-linha.t2::before { animation-delay: .5s; }
.fake--status .fk-linha.t3::before { animation-delay: .7s; }
@keyframes fk-pop { from { transform: scale(0); } }
.fake--status .fk-linha span:first-child { flex: 1 1 auto; font-weight: 600; }
.fake--status .fk-linha span + span { flex: 0 0 auto; font-size: .76rem; color: var(--fk-tinta-2); font-variant-numeric: tabular-nums; }
.fake--status .fk-verde { margin-top: 12px; }

/* 7. EXTRATO - cartao escuro, lancamentos, total ------------------------- */
.fk-cartao {
  position: relative; margin: 10px 18px 0; padding: 18px 18px 16px; border-radius: 18px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #0B1220, #14213D 55%, #0A3D7A); box-shadow: 0 14px 34px rgba(11, 18, 32, .28);
}
.fk-cartao::before { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 134, 255, .45), transparent 65%); }
.fk-cartao > * { position: relative; }
.fk-chip { display: block; width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #F6D27A, #C99A2E); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15); }
.fk-bandeira { position: absolute; right: 0; top: 0; display: flex; }
.fk-bandeira i { width: 26px; height: 26px; border-radius: 50%; background: #EB001B; }
.fk-bandeira i + i { margin-left: -10px; background: #F79E1B; opacity: .9; }
.fk-cartao-num { margin: 22px 0 0; font: 700 1.15rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; }
.fk-cartao-nome { margin: 14px 0 0; display: flex; justify-content: space-between; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #C7D2E4; }
.fake--extrato .fk-saud { padding-top: 16px; }
.fk-lancs { padding: 14px 16px 4px; }
.fake--extrato .fk-linha { flex-wrap: nowrap; gap: 10px; font-variant-numeric: tabular-nums; font-size: .9rem; }
.fake--extrato .fk-linha span:nth-child(1) { flex: 0 0 46px; color: var(--fk-tinta-2); font-size: .78rem; }
.fake--extrato .fk-linha span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fake--extrato .fk-linha span:nth-child(3) { flex: 0 0 auto; margin-left: auto; font-weight: 800; }
.fk-total { margin-top: 12px; padding: 16px; }

/* 8. RETIRADA - retire na loja: card da loja com "aberta agora", mapa com o
   pin da loja e o ponto "voce", QR de retirada em CSS (grade de quadradinhos,
   NAO e QR real) ao lado do codigo, relogio. Sem moldura de celular: o
   jogador ja esta no celular (dono, 02/09). ------------------------------ */
.fake--retirada .fk-h1 { font-size: 1.35rem; }
.fk-loja { padding: 12px 16px 4px; }
.fk-loja-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding-bottom: 2px; }
.fk-aberta {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px;
  background: #E4F5EE; color: var(--fk-verde-esc); font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
.fk-aberta i { width: 8px; height: 8px; border-radius: 50%; background: var(--fk-ok); animation: fk-pulsa-v 1.6s infinite; }
@keyframes fk-pulsa-v { from { box-shadow: 0 0 0 0 rgba(18, 166, 107, .55); } to { box-shadow: 0 0 0 8px rgba(18, 166, 107, 0); } }
.fake--retirada .fk-linha { padding: 10px 0; gap: 2px 6px; }
.fake--retirada .fk-linha span:first-child { flex: 1 1 100%; font-weight: 700; }
.fake--retirada .fk-linha span + span { font-size: .82rem; color: var(--fk-tinta-2); }
.fake--retirada .fk-linha span + span + span::before { content: "· "; color: #9AA6B8; }
/* mapa da loja: quadras, duas ruas, rota a pe (pontilhada) do "voce" ate o pin */
.fk-mapa.loja { height: 150px; margin: 12px 0; }
.fk-mapa.loja .quadra { position: absolute; border-radius: 5px; background: rgba(20, 33, 61, .07); }
.fk-mapa.loja .q1 { left: 6%; top: 8%; width: 20%; height: 26%; }
.fk-mapa.loja .q2 { left: 64%; top: 56%; width: 30%; height: 34%; }
.fk-mapa.loja .q3 { left: 40%; top: 62%; width: 16%; height: 30%; }
.fk-mapa.loja .r1 { top: 44%; transform: rotate(5deg); }
.fk-mapa.loja .r2 { left: 32%; transform: rotate(-9deg); }
.fk-mapa.loja .rota { left: 16%; top: 70%; width: 44%; border-top-style: dotted; transform: rotate(-34deg); }
.fk-mapa.loja .aqui {
  position: absolute; left: 13%; top: 64%; width: 16px; height: 16px; border-radius: 50%;
  background: var(--fk-azul); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(0, 134, 255, .22); animation: fk-pulsa 1.6s infinite;
}
.fk-mapa.loja .pin { left: 54%; top: 18%; background: var(--fk-azul); box-shadow: 0 6px 14px rgba(0, 134, 255, .4); }
/* QR: 3 quadrados de canto (escuro/branco/escuro) por cima de duas grades
   xadrez de periodos diferentes - a sobreposicao vira o "ruido" do QR. */
.fk-qr { margin-top: 0; padding: 14px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px 14px; align-items: center; }
.fk-qr-img { display: block; width: 112px; height: 112px; padding: 7px; border: 1px solid var(--fk-linha); border-radius: 12px; background: #fff; }
.fk-qr-img i {
  display: block; width: 100%; height: 100%;
  background:
    linear-gradient(#14213D, #14213D) 8px 8px / 10px 10px no-repeat,
    linear-gradient(#14213D, #14213D) calc(100% - 8px) 8px / 10px 10px no-repeat,
    linear-gradient(#14213D, #14213D) 8px calc(100% - 8px) / 10px 10px no-repeat,
    linear-gradient(#fff, #fff) 4px 4px / 18px 18px no-repeat,
    linear-gradient(#fff, #fff) calc(100% - 4px) 4px / 18px 18px no-repeat,
    linear-gradient(#fff, #fff) 4px calc(100% - 4px) / 18px 18px no-repeat,
    linear-gradient(#14213D, #14213D) 0 0 / 26px 26px no-repeat,
    linear-gradient(#14213D, #14213D) 100% 0 / 26px 26px no-repeat,
    linear-gradient(#14213D, #14213D) 0 100% / 26px 26px no-repeat,
    repeating-conic-gradient(#14213D 0 25%, transparent 0 50%) 0 0 / 12px 12px,
    repeating-conic-gradient(transparent 0 25%, #14213D 0 50%) 5px 3px / 20px 20px;
}
.fk-qr .fk-dest { padding: 0; min-width: 0; }
.fk-qr .fk-valor { font-size: 1.3rem; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; overflow-wrap: anywhere; }
.fk-qr .fk-btn, .fk-qr .fk-venc { grid-column: 1 / -1; }
.fk-qr .fk-btn { margin-top: 0; padding: 12px; }
.fk-qr .fk-venc { margin-top: 0; }

/* 9. ALERTA - topo vermelho com sirene, produto, botao grande ------------ */
.fake--alerta::before { display: none; }
.fk-topo-alerta { display: flex; align-items: center; gap: 10px; padding: 4px 14px; background: linear-gradient(100deg, #B3151F, #D7263D); color: #fff; }
.fk-sirene { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; animation: fk-sirene 1.2s infinite; }
.fk-sirene svg { width: 20px; height: 20px; }
@keyframes fk-sirene { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }
.fk .fk-rotulo-seg { flex: 1; margin: 0; padding: 14px 0; font-size: .74rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.fk-topo-hora { font-size: .72rem; opacity: .85; white-space: nowrap; }
.fk-compra { display: flex; align-items: center; gap: 14px; padding: 14px; }
.fk-thumb.iphone { width: 64px; height: 84px; border-radius: 14px; background: linear-gradient(150deg, #E6E8EC, #B9BEC7); }
.fk-thumb.iphone::before { inset: 5px; border-radius: 11px; background: linear-gradient(160deg, #1B2233, #0B1020); }
.fk-thumb.iphone::after { width: 22px; height: 6px; margin-left: -11px; bottom: auto; top: 9px; background: #0B1020; border-radius: 3px; box-shadow: 0 0 0 2px #1B2233; }
.fk-compra .fk-dest { flex: 1; min-width: 0; }
.fk-compra .fk-valor { font-size: 1.7rem; color: var(--fk-tinta); }
.fk-detalhes { margin-top: 10px; padding: 2px 16px; }
.fake--alerta .fk-linha { font-size: .88rem; color: var(--fk-tinta-2); }
.fake--alerta .fk-linha span + span::before { content: "· "; color: #9AA6B8; }
.fake--alerta .fk-venc { margin-top: 12px; background: #FDE8E8; border-color: #F5B5B5; }
.fake--alerta .fk-venc b { color: #B3151F; }
.fake--alerta .fk-relogio { color: #D7263D; }

/* 10. FORMULARIO - progresso, perguntas com estrelas/opcoes, premio ------ */
.fk-progresso { height: 8px; border-radius: 4px; background: var(--fk-linha); overflow: hidden; margin-top: 4px; }
.fk-progresso span { display: block; width: 33%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--fk-azul), var(--fk-ciano)); animation: fk-enche .9s .3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fk-enche { from { width: 0; } }
.fk-prog-txt { margin: 6px 0 0; font-size: .74rem; font-weight: 700; color: var(--fk-tinta-2); }
.fk-perg { padding: 6px 16px 14px; margin-bottom: 10px; }
.fake--formulario .fk-linha { border-bottom: 0; font-weight: 700; font-size: .98rem; padding: 12px 0 8px; }
.fk-estrelas { display: flex; gap: 6px; }
.fk-estrelas i {
  width: 36px; height: 36px; background: #D5DCE8; cursor: pointer; transition: background .15s, transform .15s;
  clip-path: polygon(50% 2%, 61% 36%, 98% 36%, 68% 58%, 79% 94%, 50% 72%, 21% 94%, 32% 58%, 2% 36%, 39% 36%);
}
.fk-estrelas i.on { background: #F5A623; transform: scale(1.08); }
.fk-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.fk-opcoes i { padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--fk-linha); font-style: normal; font-size: .86rem; font-weight: 700; color: var(--fk-tinta-2); cursor: pointer; }
.fk-opcoes i.on { background: var(--fk-azul); border-color: var(--fk-azul); color: #fff; }
.fk-premio { padding: 16px; }

/* rodape CLARO (e-mail): mesmo esqueleto do escuro, cores de rodape de e-mail */
.fk-rodape.claro { background: #F1F3F6; color: var(--fk-tinta-2); border-top: 1px solid var(--fk-linha); }
.fk-rodape.claro h4 { color: #8A97AD; }
.fk-rodape.claro .fk-rod-p b, .fk-rodape.claro strong { color: var(--fk-tinta); }
.fk-rodape.claro .fk-apps span { border-color: #D5DCE8; color: var(--fk-tinta); }
.fk-rodape.claro .fk-social i { background: #DCE3EE; color: var(--fk-tinta); }
.fk-rodape.claro .fk-copy-bloco { border-top-color: #D5DCE8; color: #6B7A93; }
.fk-rodape.claro .alvo.achado, .fk-rodape.claro .alvo.errado { color: var(--fk-tinta); }
@media (hover: hover) { .fk-rodape.claro .alvo:hover { background: rgba(0, 134, 255, .05); } }

/* ---------------------------------------- hotspot, logo e a isca de cor */
/* HOTSPOT INVISIVEL. A classe `.alvo` NAO tem tamanho, padding nem borda:
   se todo indicio virasse um tijolo de 44px, a diagramacao entregava a posicao
   antes de o jogador ler. Cada TIPO de bloco carrega o espaco que um site real
   daria a ele (h1 com margem de h1, label com espaco de label, linha de extrato
   com altura de linha) - e e ESSE espaco que garante o alvo de toque >= 44px.
   `touch-action: manipulation` tira o atraso de 300ms do duplo-toque. */
.alvo {
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .alvo:hover { background: rgba(14, 137, 255, .05); }
}

/* Achou: contorno verde e um pulso curto. Errou: contorno vermelho que some
   sozinho - a penalidade e silenciosa, o feedback e so "aqui nao". */
.alvo.achado {
  outline: 3px solid var(--ok); outline-offset: 3px; border-radius: 6px;
  animation: pulso .4s ease-out;
}
.alvo.errado {
  border-radius: 6px;
  animation: errou 1.2s ease-out forwards;
}
@keyframes pulso {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes errou {
  0%, 60% { outline: 2px solid var(--ruim); outline-offset: 2px; }
  100% { outline: 2px solid transparent; outline-offset: 2px; }
}

/* ---- LOGO COMPLETO (`_logo.html`): wordmark + barra de 5 cores ------------
   Um componente so para o site falso, o e-mail, o placar e o resultado. A
   altura vem de --logo-h; a barra tem a largura do wordmark (coluna flex).
   O wordmark (SVG em currentColor OU o texto redigitado da isca de grafia)
   herda a cor de `.logo` - e so isso que a isca de cor troca. */
.logo {
  --logo-h: 28px;
  display: inline-flex; align-items: flex-start; gap: 9px;
  color: #0086FF; line-height: 1; vertical-align: middle;
}
.logo-wm { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; }
/* Largura explicita (viewBox 143.9x30.9 = 4.657:1): flex nao pode encolher o
   SVG e deixa-lo vazar por cima do vizinho (aconteceu na faixa do placar). */
.logo-wm svg { height: var(--logo-h); width: calc(var(--logo-h) * 4.657); display: block; color: inherit; }
.logo-escrito {
  display: block; white-space: nowrap; color: inherit;
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--logo-h) * .96); font-weight: 900; line-height: 1; letter-spacing: -.04em;
}
.logo-cores { display: flex; width: 100%; height: 5px; border-radius: 3px; overflow: hidden; }
.logo-cores i { flex: 1; display: block; }
.logo-cores i:nth-child(1) { background: #0086FF; }
.logo-cores i:nth-child(2) { background: #00A8FF; }
.logo-cores i:nth-child(3) { background: #2ED3F7; }
.logo-cores i:nth-child(4) { background: #7B3DF5; }
.logo-cores i:nth-child(5) { background: #FF3D8B; }
.logo-sufixo {
  align-self: flex-start; white-space: nowrap;
  padding-top: calc(var(--logo-h) * .18);
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--logo-h) * .64); font-weight: 800; letter-spacing: -.02em; color: #14213D;
}

/* A isca de identidade visual: o WORDMARK numa cor que a Magalu NAO usa - a
   barra de cores fica igual. E a unica coisa nesta folha que existe para estar
   errada. A cor e do `.logo` dentro do alvo marcado (herdada pelo SVG via
   currentColor) - nada no topo muda junto, e funciona em qualquer navegador,
   sem :has(). Cada molde pode trocar a cor, mas o `porque` da isca em
   cenarios_dados.py TEM que dizer a mesma cor. */
.alvo.cor-errada .logo { color: #1B9E4B; }                                 /* verde  */
.fake--checkout .alvo.cor-errada .logo,
.fake--carteira .alvo.cor-errada .logo,
.fake--alerta .alvo.cor-errada .logo { color: #7B3DF5; }                   /* roxo   */
.fake--promo .alvo.cor-errada .logo,
.fake--formulario .alvo.cor-errada .logo { color: #FF3D8B; }               /* rosa   */
.fake--extrato .alvo.cor-errada .logo { color: #F26B1D; }                  /* laranja */

/* ------------------------------------------------------- MODO MAPA (conf) */
/* Marcador numerado por cima de cada bloco que tem isca no pool. Usa ::after
   (o ::before de alguns alvos ja e cenografia). Cheio = ativo neste sorteio;
   contorno = no pool, nao caiu. So existe quando o servidor manda `data-mapa`
   - e ele so manda em conferencia. */
.alvo[data-mapa] { outline: 2px dashed rgba(123, 61, 245, .55); outline-offset: 3px; border-radius: 6px; }
.alvo.mapa-on[data-mapa] { outline: 2px solid #7B3DF5; }
.alvo[data-mapa]::after {
  content: attr(data-mapa) " " attr(data-mapa-tipo);
  position: absolute; top: -11px; left: -8px; z-index: 6;
  padding: 2px 8px; border-radius: 999px; border: 2px solid #7B3DF5;
  font: 800 .66rem/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .04em; white-space: nowrap; pointer-events: none;
  background: #fff; color: #7B3DF5;
}
.alvo.mapa-on[data-mapa]::after { background: #7B3DF5; color: #fff; box-shadow: 0 4px 12px rgba(123, 61, 245, .4); }
/* sticky (nao fixed): gruda no pe da tela enquanto rola e descansa no fim da
   pagina - assim o print de pagina inteira nao a mostra no meio do cenario. */
.mapa-legenda {
  position: sticky; left: 0; right: 0; bottom: 0; z-index: 25; margin-top: -24px;
  background: #1D0F3E; color: #E9E1FF; border-top: 3px solid #7B3DF5;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); font-size: .74rem; line-height: 1.5;
}
.mapa-legenda p { margin: 0; }
.mapa-legenda-nums { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.mapa-legenda-nums b { display: inline-block; min-width: 18px; text-align: center; border-radius: 999px; background: #7B3DF5; color: #fff; }
.mapa-legenda-regra { color: #B9A6E8; margin-top: 2px; }
.mapa-legenda-regra b { color: #fff; }

/* ------------------------------------------------------------------ modal */
.modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 15, 24, .55);
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.modal[hidden] { display: none; }
.modal-caixa {
  width: 100%; max-width: 460px;
  background: #fff; border-radius: 18px; padding: 22px;
  box-shadow: var(--sombra-alta);
}
.modal-tag {
  display: inline-block; margin-bottom: 10px;
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: var(--ok-claro); color: var(--ok);
}
.modal-tag.ruim { background: var(--ruim-claro); color: var(--ruim); }
.modal-caixa h2 { margin: 0 0 10px; font-size: 1.2rem; }
.modal-caixa p { margin: 0 0 12px; color: var(--tinta-2); }
.modal-dica { font-style: italic; font-size: .88rem; }
@media (min-width: 620px) { .modal { align-items: center; } }

/* -------------------------------------------------------------- resultado */
.resultado { text-align: center; }
.score-caixa {
  display: flex; flex-direction: column; align-items: center;
  margin: 6px 0 14px;
}
.score-num {
  font-size: clamp(3.4rem, 22vw, 5rem); font-weight: 800; line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(120deg, var(--festa-1), var(--festa-2) 55%, var(--festa-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.score-rot {
  font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-2); margin-top: 4px;
}
.veredito { color: var(--tinta-2); margin: 0 0 18px; }
.veredito.bom { color: var(--ok); font-weight: 700; }
.numeros {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  text-align: center;
}
.numeros > div {
  background: var(--papel); border-radius: 12px; padding: 12px 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.numeros b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.numeros span { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.numeros .destaque-pos { background: var(--magalu-claro); }
.numeros .destaque-pos b { color: var(--magalu-esc); }
@media (min-width: 560px) { .numeros { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------------- o PLACAR */
/* Feito para o telao: podio grande, se le de longe. */
.tela-placar {
  min-height: 100dvh;
  padding: 22px 14px calc(40px + env(safe-area-inset-bottom));
  background:
    radial-gradient(1000px 480px at 50% -12%, rgba(123, 61, 245, .30), transparent 62%),
    radial-gradient(760px 380px at 6% 8%, rgba(14, 137, 255, .26), transparent 58%),
    radial-gradient(700px 360px at 96% 12%, rgba(255, 61, 139, .20), transparent 58%),
    #080C15;
  color: #EEF2F8;
}
.placar-envelope { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }

/* Faixa branca com as marcas: resolve o fundo opaco do PNG e da cara de
   evento patrocinado. Alturas iguais, separador fino entre elas. */
.placar-logos {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: #fff; border-radius: 16px; padding: 14px 20px; margin: 0 auto 22px;
  width: fit-content; max-width: 100%;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.placar-logos img { height: 44px; width: auto; display: block; }
.placar-logos .logo { --logo-h: 34px; flex: 0 0 auto; }
.placar-sep { width: 1px; height: 36px; background: var(--borda); flex: 0 0 auto; }
@media (max-width: 520px) {
  .placar-logos { gap: 12px; padding: 10px 14px; }
  .placar-logos img { height: 30px; }
  .placar-logos .logo { --logo-h: 24px; }
  .placar-sep { height: 26px; }
}

/* Resultado do jogador: mesma pele do telao, cartao branco centralizado. */
.tela-resultado { display: flex; align-items: center; justify-content: center; }
.tela-resultado .placar-envelope { width: 100%; max-width: 520px; }
/* Em celular estreito os tres logos a 30px somam ~370px e estouram a faixa;
   26px cabe com folga em 360px. */
@media (max-width: 400px) {
  .placar-logos { gap: 10px; padding: 8px 12px; }
  .placar-logos img { height: 24px; }
  .placar-logos .logo { --logo-h: 19px; }
  .placar-sep { height: 22px; }
}
.tela-resultado .cartao { width: 100%; color: var(--tinta); }   /* o fundo escuro nao pode clarear os numeros */

.placar-topo { text-align: center; margin-bottom: 24px; }
.placar-topo .etiqueta { color: #7FC0FF; }
.placar-topo h1 {
  font-size: clamp(2.2rem, 11vw, 3.6rem); font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(100deg, #7FC0FF, #C9A6FF 52%, #FF9CC4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.placar-topo .sub { color: #9FB0C7; margin: 0; }
.vazio { text-align: center; color: #9FB0C7; padding: 40px 0; }

.podio { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
/* Entrada animada: cada card sobe e aparece, escalonado 0/150/300 ms. */
.lugar {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px; padding: 18px 16px; text-align: center;
  position: relative;
  animation: sobe .55s cubic-bezier(.2, .8, .3, 1) both;
}
.lugar-2 { animation-delay: .15s; }
.lugar-3 { animation-delay: .3s; }
@keyframes sobe {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.coroa {
  position: absolute; top: -20px; left: 50%; width: 44px; height: 32px;
  margin-left: -22px; color: var(--ouro);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
  animation: balanca 2.4s ease-in-out infinite;
}
@keyframes balanca {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
@keyframes brilho {
  0%, 100% { box-shadow: 0 0 34px rgba(245, 166, 35, .18); }
  50% { box-shadow: 0 0 70px rgba(245, 166, 35, .42); }
}

/* Canvas do confete: cobre a tela, nao rouba clique, some quando termina. */
.confete { position: fixed; inset: 0; pointer-events: none; z-index: 40; display: none; }
.confete.ativo { display: block; }
.medalha {
  display: inline-block; margin-bottom: 8px;
  font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #DCE6F5;
}
.lugar .quem { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.lugar .empresa { margin: 2px 0 10px; font-size: .8rem; color: #9FB0C7; }
.lugar .pts {
  margin: 0; font-size: 2.4rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.lugar .detalhe { margin: 6px 0 0; font-size: .78rem; color: #9FB0C7; }
.lugar .cenario { margin: 4px 0 0; font-size: .74rem; color: #7C8DA6; }

.lugar-1 {
  background: linear-gradient(168deg, rgba(245, 166, 35, .22), rgba(255, 255, 255, .05));
  border-color: rgba(245, 166, 35, .55);
  box-shadow: 0 0 44px rgba(245, 166, 35, .18);
  animation: sobe .55s cubic-bezier(.2, .8, .3, 1) both, brilho 2.8s ease-in-out .6s infinite;
}
.lugar-1 .medalha { background: var(--ouro); color: #2A1A02; }
.lugar-1 .pts { color: #FFD48A; }
.lugar-2 { border-color: rgba(203, 213, 225, .4); }
.lugar-2 .medalha { background: #CBD5E1; color: #1B2431; }
.lugar-3 { border-color: rgba(205, 127, 50, .45); }
.lugar-3 .medalha { background: #CD7F32; color: #241203; }

/* Em tela larga o campeao vai pro meio e mais alto, como em premiacao. */
@media (min-width: 720px) {
  .podio { grid-template-columns: 1fr 1.18fr 1fr; align-items: end; gap: 16px; }
  .lugar-1 { order: 2; padding-top: 30px; padding-bottom: 30px; }
  .lugar-2 { order: 1; }
  .lugar-3 { order: 3; }
  .lugar-1 .pts { font-size: 3.2rem; }
}

.rolagem { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); }
.tabela-placar { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .88rem; }
.tabela-placar th, .tabela-placar td {
  padding: 11px 13px; text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.tabela-placar thead th {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: #9FB0C7; background: rgba(255, 255, 255, .05);
}
.tabela-placar tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
.tabela-placar tbody tr:last-child td { border-bottom: 0; }
.tabela-placar .pos { color: #7C8DA6; font-variant-numeric: tabular-nums; width: 46px; }
.tabela-placar .empresa { display: block; font-size: .74rem; color: #9FB0C7; }
.tabela-placar .pts-cel { font-weight: 800; font-variant-numeric: tabular-nums; }
.tabela-placar .mais-b { color: var(--ouro); font-weight: 700; }


/* --------------------------------------------------------------------------
   Painel do organizador (/admin)
   -------------------------------------------------------------------------- */
.tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-h2 { font-size: 1.1rem; margin: 22px 0 6px; }
.lista-mapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; font-size: .92rem; }
.lista-mapas li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; }
.lista-mapas span { color: var(--tinta-2); font-size: .78rem; }
.placar.admin { min-width: 640px; font-size: .92rem; }
.placar.admin td, .placar.admin th { padding: 8px 10px; white-space: nowrap; }
.placar.admin .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.placar.admin .empresa { display: block; font-size: .78rem; color: var(--tinta-2); }
.placar.admin tr.suspeita { background: #FFF4E5; }
.placar.admin tr.conferencia { color: var(--tinta-2); background: var(--borda-2); }
.tag-susp, .tag-conf, .tag-and {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.tag-susp { background: #E08600; color: #fff; }
.tag-conf { background: var(--borda); color: var(--tinta-2); }
.tag-and  { background: var(--ok-claro); color: #08553A; }