/* FUTNEX 1.9.69 · nav69: tela "Abra no navegador para salvar seu time" (navegador embutido do Instagram, TikTok, Facebook...).
   Vale nos dois visuais: usa os tokens do visual novo (--u-*, html.ui68) e, sem eles, os do jogo clássico (--bg, --panel, --text...). Os botões são os do jogo (.btn, .btn-primary, .btn-lg),
   então o CTA amarelo, o foco e o toque seguem cada visual. Alvos >= 44 px, texto >= 14 px, nada estoura 320 px, sem movimento com prefers-reduced-motion ou html.rm. */
.nav69 {
  --n-bg: var(--u-bg, var(--bg, #0f1923)); --n-s1: var(--u-s1, var(--panel, #13212e)); --n-s2: var(--u-s2, var(--panel-2, #1b2b3a));
  --n-line: var(--u-line, var(--line, #2c3c4b)); --n-line2: var(--u-line2, var(--line-strong, #5a6e82));
  --n-tx: var(--u-tx, var(--text, #f4f7fa)); --n-tx2: var(--u-tx2, var(--text-2, #a9b8c6)); --n-acc: var(--u-acc, var(--accent, #f5c400));
  position: fixed; inset: 0; z-index: 10000; box-sizing: border-box; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--n-bg); color: var(--n-tx); font: 500 16px/1.45 var(--font-texto, "Saira", system-ui, sans-serif); -webkit-font-smoothing: antialiased;
  animation: nav69-in 200ms cubic-bezier(.23, 1, .32, 1);          /* sem fill-mode: uma animação de transform que fica ativa faria a seta (fixed) rolar junto com a tela */
}
.nav69[hidden] { display: none; }
html.fx-nav69-aberto { overflow: hidden; }
.nav69-card {
  box-sizing: border-box; width: 100%; max-width: 440px; margin: auto; display: grid; justify-items: stretch; gap: 14px; padding: 24px 20px 12px; text-align: center;
  background: var(--n-s1); border: 1px solid var(--n-line); border-radius: var(--u-r4, 20px);
}
.nav69-logo { display: flex; justify-content: center; margin: 0 0 8px; color: var(--n-tx); }
.nav69-logo .fx-logo { height: 28px; width: auto; max-width: 100%; display: block; }
.nav69-t { margin: 0; font: 800 28px/1.1 var(--font-titulo, "Saira Condensed", "Arial Narrow", system-ui, sans-serif); letter-spacing: .005em; color: var(--n-tx); overflow-wrap: anywhere; outline: none; }
.nav69 .nav69-t:focus, .nav69 .nav69-t:focus-visible { outline: none !important; }          /* só recebe o foco para o leitor de tela começar pelo título */
.nav69-d { margin: 0; font-size: 16px; line-height: 1.5; color: var(--n-tx2); overflow-wrap: anywhere; }
.nav69-premio { margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px; text-align: left; font-size: 15px; line-height: 1.35; color: var(--n-tx); background: var(--n-s2); border: 1px solid var(--n-line); border-radius: var(--u-r3, 16px); }
.nav69-premio img { flex: none; width: 32px; height: 32px; image-rendering: pixelated; }
.nav69-premio b { font-weight: 800; }
.nav69-acoes { display: grid; gap: 10px; }
.nav69-cta { width: 100%; max-width: none; margin: 0; box-sizing: border-box; text-decoration: none; }
.nav69-sec { width: 100%; max-width: none; min-height: 48px; box-sizing: border-box; }
.nav69-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.nav69-passos li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 16px; line-height: 1.35; color: var(--n-tx); background: var(--n-s2); border: 1px solid var(--n-line); border-radius: var(--u-r3, 16px); min-height: 56px; box-sizing: border-box; }
.nav69-passos li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.nav69-passos b { font-weight: 800; }
.nav69-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--n-tx); background: var(--n-s1); border: 1px solid var(--n-line2); border-radius: 12px; }
.nav69-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav69-aviso { margin: 0; min-height: 20px; font-size: 14px; line-height: 1.4; color: var(--u-ok, var(--ok-txt, #5fc28b)); overflow-wrap: anywhere; }
.nav69-link { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 12px; font: 500 14px/1.2 var(--font-texto, system-ui, sans-serif); color: var(--n-tx); background: var(--n-bg); border: 1px solid var(--n-line2); border-radius: var(--u-r2, 12px); }
.nav69-cont {
  justify-self: center; min-height: 44px; max-width: 100%; padding: 0 16px; margin: 0; background: transparent; border: 0; border-radius: 12px; color: var(--n-tx2);
  font: 600 15px/1.2 var(--font-texto, "Saira", system-ui, sans-serif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nav69-cont:focus-visible, .nav69 .btn:focus-visible, .nav69-link:focus-visible { outline: 2px solid var(--n-acc); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .nav69-cont:hover { color: var(--n-tx); } }
.nav69-seta { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); right: 14px; z-index: 1; color: var(--n-tx); pointer-events: none; animation: nav69-seta 1.1s ease-in-out infinite; }
@keyframes nav69-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nav69-seta { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, -5px); } }
@media (prefers-reduced-motion: reduce) { .nav69, .nav69-seta { animation: none; } }
html.rm .nav69, html.rm .nav69-seta { animation: none; }
@media (max-width: 359px) { .nav69-t { font-size: 25px; } .nav69-card { padding: 20px 14px 8px; } .nav69-premio, .nav69-passos li { font-size: 14px; } }
@media (min-width: 760px) { .nav69-card { padding: 32px 28px 16px; } .nav69-t { font-size: 32px; } }
html.fx-pc .nav69-seta { display: none; }
.nav69[data-so="ios"], .nav69[data-so="outro"] { padding-top: calc(max(16px, env(safe-area-inset-top, 0px)) + 40px); }          /* espaço para a seta que aponta o menu do app */
html.fx-pc .nav69[data-so="ios"], html.fx-pc .nav69[data-so="outro"] { padding-top: max(16px, env(safe-area-inset-top, 0px)); }
@media (max-height: 700px) { .nav69-logo { display: none; } .nav69-card { gap: 12px; padding-top: 18px; } }