/* ==========================================================================
   lotoapp.css — o app pago: paleta, casca escura e componentes.

   A mecânica vem de base.css, que é cópia local e não conhece paleta. O que
   era "body.is-lotoapp ..." no projeto único virou regra direta aqui: não
   existe mais uma página que alterne entre duas experiências.
   ========================================================================== */

:root {
  /* ---------- LotoApp · comprometido com o escuro ---------- */
  --la-bg:       #0b0f0c;
  --la-fg:       #eef4ea;
  --la-fg-2:     #9aa795;
  --la-card:     rgba(255, 255, 255, 0.055);
  --la-campo:    rgba(255, 255, 255, 0.06);
  --la-elevado:  rgba(255, 255, 255, 0.09);
  --la-linha:    rgba(255, 255, 255, 0.10);
  --la-fio:      rgba(255, 255, 255, 0.03);
  --la-lima:     #a8ff35;
  --la-lima-d:   #7ed321;
  --la-sobre-lima:#0b0f0c;
  /* Âmbar de ATENÇÃO, criado em 22/09/2026 com o método. Ele existe porque o
     gerador precisa dizer quando relaxou o critério, e dizer isso em lima
     seria dizê-lo na cor do acerto. 9,46:1 sobre o chão e 8,44:1 sobre o
     card — passa AAA nos dois. */
  --la-atencao:  #f5a524;
  --la-luz:
    radial-gradient(1500px 720px at 34% -20%, rgba(215, 255, 164, 0.10), transparent 66%),
    radial-gradient(1100px 600px at 84% -28%, rgba(170, 240, 190, 0.05), transparent 68%),
    radial-gradient(1800px 900px at 96% 104%, rgba(215, 255, 164, 0.045), transparent 68%);


  /* ---------- os quatro papéis que base.css espera ---------- */
  --foco:       var(--la-lima);
  --tinta-3:    var(--la-fg-2);
  --superficie: var(--la-card);
  --fio:        var(--la-fio);
}

body {
  margin: 0;
  background-color: var(--la-bg);
  background-image: var(--la-luz);
  background-attachment: fixed;   /* a luz fica ancorada na tela, não rola */
  background-repeat: no-repeat;
  color: var(--la-fg);
  font-family: var(--fonte);
  font-weight: 400;
  font-optical-sizing: none;
  font-size: 0.875rem;
  line-height: 1.55;
  padding-bottom: var(--barra-h);
  -webkit-font-smoothing: antialiased;
}

.vidro {
  background: var(--la-card);
  box-shadow: inset 0 1px 0 0 var(--la-fio);
}

/* ==========================================================================
   LotoApp — o produto pago dentro da conta.
   Mesma mecânica da Fezinha (vidro em alfa, fio por dentro, raios, aperto no
   clique), pele oposta: casca escura e lima elétrica.

   A DIVERGÊNCIA DELIBERADA é a tipografia. A Fezinha é peso único, porque
   sobriedade é o pedido dela. Aqui o pedido é agressividade comercial, então o
   display vai em Expanded pesado — é o que separa os dois produtos à distância.
   Roleta, bônus, XP e conquistas moram só neste arquivo.
   ========================================================================== */

.la {
  min-height: calc(100vh - var(--barra-h));
  display: flex;
  flex-direction: column;
}

/* display agressivo: largura e peso no talo */
.la-hero h1, .gerador-cab h1, .modo h3, .nivel h1,
.btn-la, .roleta-res {
  font-family: Archivo, var(--fonte);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-stretch: 112%;
  font-weight: 800;
}

/* ---------- barra do app ---------- */
/* O fundo do topo sangra; o CONTEÚDO dele para no mesmo teto da coluna. Sem
   isto a marca ficaria na borda de 1920px e o bônus na outra, enquanto a
   página embaixo mora em 1126px centrados — duas larguras na mesma tela.
   O padding lateral acompanha a goteira do .la-wrap em vez de ser 1,2rem
   fixo, senão o topo e o conteúdo começariam em colunas diferentes. */
.la-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 0.8rem;
  padding-block: 0.7rem;
  padding-inline: max(1.2rem, calc((100% - var(--largura-max)) / 2 + clamp(1rem, 4vw, 4.5rem)));
  background: rgba(11, 15, 12, 0.72);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 -1px 0 0 var(--la-fio);
}
@media (max-width: 36rem) {
  .la-top { padding: 0.6rem 1rem; gap: 0.5rem; }
  /* O selo de estado sai no estreito: o card de acesso, logo abaixo, diz a
     mesma coisa com mais detalhe. Sem ele a barra cabe em 390px. */
  .la-top .selo { display: none; }
}
.la-mark { display: flex; align-items: center; text-decoration: none; color: var(--la-fg); }
/* A marca é imagem, e imagem mede em ALTURA: a largura sai da proporção do
   arquivo (685×156). Travar a largura deformaria. O width/height no HTML
   existe só para o navegador reservar o espaço antes de o arquivo chegar e
   não sacudir o topo. */
.la-marca { display: block; height: 1.5rem; width: auto; }
.selo {
  font-family: var(--fonte-num); font-size: 0.5rem; letter-spacing: .16em;
  background: var(--la-lima); color: var(--la-sobre-lima);
  border-radius: var(--raio-fio); padding: 0.15rem 0.4rem;
}
.selo.off { background: var(--la-campo); color: var(--la-fg-2); }
.la-top .dir { margin-inline-start: auto; display: flex; align-items: center; gap: 0.5rem; }
.saldo-pill {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  background: var(--la-campo); border-radius: var(--raio-pill); padding: 0.4rem 0.85rem;
  font-family: var(--fonte-num); font-size: 0.875rem;
}
.saldo-pill .rot { font-size: 0.5rem; letter-spacing: .14em; color: var(--la-fg-2); text-transform: uppercase; }
.saldo-pill b { color: var(--la-lima); }

/* ---------- a entrada de conta ----------
   ENTRAR é a única AÇÃO do topo — a marca é destino e o selo é estado. Por isso
   é o único que leva cor sólida: cor cheia diz "isto faz alguma coisa", e
   gastá-la em tudo não diria nada.

   Lima com tinta escura, como os botões daqui: #0b0f0c sobre #a8ff35 dá
   15,65:1. É o inverso da Fezinha, onde a cápsula é verde com tinta branca —
   aqui branco sobre lima daria 1,23:1 e sumiria. */
.entrar-la {
  display: inline-flex; align-items: center; min-height: var(--toque);
  padding: 0.4rem 1rem; border-radius: var(--raio-pill);
  background: var(--la-lima); color: var(--la-sobre-lima);
  font-family: var(--fonte-num); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
  transition: background var(--t-rapido) var(--ease);
}
.entrar-la:hover { background: var(--la-lima-d); }

/* Entrou quem já está dentro: sem cor sólida, porque não é ação — é estado. */
.conta-la {
  display: inline-flex; align-items: center; min-height: var(--toque);
  padding: 0.4rem 0.85rem; border-radius: var(--raio-pill);
  background: var(--la-campo); color: var(--la-fg);
  font-size: 0.75rem;
}

/* ---------- corpo ---------- */
.la-main { flex: 1 1 auto; padding-bottom: 4rem; }
/* Sem teto de coluna, igual à Fezinha: a seção ocupa a tela e o que segura o
   texto é a goteira, que cresce com a largura. */
/* A SEÇÃO ocupa a tela; a COLUNA para. Sem teto o conteúdo esticava até onde o
   monitor permitisse. Os modificadores são compostos de propósito: soltos,
   empatariam em especificidade com .la-wrap e quem decidiria seria a ordem no
   arquivo — dependência que quebra sem avisar. */
.la-wrap {
  width: 100%; max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 4.5rem);
}
/* Paisagem, não leitura. */
.la-wrap.sangra { max-width: none; }
/* Lista de um item por linha. */
.la-wrap.col-estreita { max-width: 50rem; }

/* ---------- abertura: a promessa vem primeiro ---------- */
.la-hero {
  min-height: calc(100svh - 3.1rem - 3.6rem - var(--barra-h));
  display: grid; align-content: center;
  padding-block: 2.5rem;
  background: var(--la-card);
  box-shadow: inset 0 -1px 0 0 var(--la-fio);
  text-align: center;
}
/* No telefone a tela cheia viraria uma dobra só com o título: desliga. */
@media (max-width: 48rem) { .la-hero { min-height: 0; padding-block: 1.8rem; } }
.la-hero .kicker {
  font-family: var(--fonte-num); font-size: 0.6875rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--la-lima); margin-bottom: 0.7rem;
}
.la-hero h1 {
  /* a medida curta é o que quebra o título em três linhas curtas; o balance
     reparte as palavras entre elas em vez de deixar uma órfã no fim */
  margin: 0 auto; max-width: 15ch;
  font-size: clamp(1.9rem, 4.8vw, 3.4rem); line-height: 1.02;
  letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance;
}
.la-hero h1 em { font-style: normal; color: var(--la-lima); }
.la-hero p { margin: 1.2rem auto 0; font-size: 1rem; color: var(--la-fg-2); max-width: 44ch; line-height: 1.55; text-wrap: pretty; }
.la-hero .acoes { margin-top: 1.8rem; display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
/* Nota de rodapé do hero: o mesmo lugar dos botões, com o peso de metadado.
   Ela existe onde a ação NÃO cabe — em /ativar o preview não tem login, e
   dizer isso vale mais do que um botão que não leva a lugar nenhum. */
.la-hero .hero-nota { margin: 1.8rem auto 0; max-width: 46ch; font-size: 0.75rem; color: var(--la-fg-2); }

.btn-la {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font: inherit; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .03em;
  height: 3.1rem; padding-inline: 1.7rem;
  border: 0; border-radius: var(--raio-campo);
  cursor: pointer; text-decoration: none;
  transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease),
              transform var(--t-rapido) var(--ease);
}
.btn-la:active { transform: scale(.985); }
.btn-la-lime { background: var(--la-lima); color: var(--la-sobre-lima); }
.btn-la-lime:hover { background: var(--la-lima-d); }
.btn-la-out { background: var(--la-campo); color: var(--la-fg); }
.btn-la-out:hover { background: var(--la-elevado); }
.btn-la[disabled] { opacity: .4; cursor: not-allowed; }
.btn-la-block { width: 100%; }

/* ---------- vidro do app ---------- */
.acesso, .bonus, .jogo-gerado, .conq, .modo {
  background: var(--la-card);
  border-radius: var(--raio-card);
  box-shadow: inset 0 1px 0 0 var(--la-fio);
  backdrop-filter: blur(16px) saturate(130%);
}

/* ---------- estado do acesso, na primeira dobra ---------- */
.acesso {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
  padding: clamp(1rem, 2.2vw, 1.6rem); margin-top: 1.4rem;
}
.acesso.liberado { box-shadow: inset 0 0 0 1px rgba(168, 255, 53, .3); }
.acesso .farol { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--la-fg-2); flex: none; }
.acesso.liberado .farol {
  background: var(--la-lima);
  box-shadow: 0 0 0 0.25rem rgba(168, 255, 53, .16);
}
.acesso .txt strong { display: block; font-size: 1rem; }
.acesso .txt span { font-size: 0.8125rem; color: var(--la-fg-2); }
@media (max-width: 40rem) { .acesso { grid-template-columns: auto 1fr; } .acesso .btn-la { grid-column: 1 / -1; } }

/* ---------- medidor do bônus (regra real: 7 giros, até R$50, sem saque) ---------- */
.bonus { padding: clamp(1.1rem, 2.4vw, 2rem); margin-top: 1rem; }
.bonus-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap; }
.bonus-topo h3 {
  margin: 0; font-family: var(--fonte-num); font-size: 0.625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--la-fg-2);
}
.bonus-val { font-family: var(--fonte-num); font-size: 2.25rem; letter-spacing: -.03em; color: var(--la-lima); }
.bonus-val small { font-size: 0.75rem; color: var(--la-fg-2); letter-spacing: 0; }
.giros { display: flex; gap: 0.3rem; margin-top: 0.8rem; }
.giro { flex: 1 1 0; height: 0.25rem; border-radius: var(--raio-pill); background: var(--la-elevado); }
.giro.ok { background: var(--la-lima); }
.giro.hoje { box-shadow: inset 0 0 0 1px var(--la-lima); }
.bonus-nota { margin: 0.7rem 0 0; font-size: 0.6875rem; color: var(--la-fg-2); line-height: 1.5; }

/* ---------- roleta ---------- */
.roleta-palco { display: grid; place-items: center; gap: 1.4rem; padding-block: clamp(1.6rem, 4vw, 3rem); }
.roda-box { position: relative; width: min(26rem, 80vw); aspect-ratio: 1 / 1; }
.roda {
  width: 100%; height: 100%; border-radius: 50%;
  /* O anel de superfície fica; o BRILHO LIMA saiu em 22/09/2026, apontado
     pelo detector de design. Ele tinha deslocamento e desfoque, então não era
     o halo de offset zero que o piso de qualidade proíbe — mas era luz
     colorida como enfeite, e o idioma deste projeto é outro: o que separa é
     diferença de superfície, o que contorna é um fio. Em página escura,
     profundidade vem de superfície mais clara, não de sombra: sombra preta
     sobre preto não existe, e sombra colorida é decoração se passando por
     profundidade. O anel de --la-elevado faz o trabalho sozinho. */
  box-shadow: 0 0 0 0.35rem var(--la-elevado);
  transition: transform 4.2s cubic-bezier(.16, .84, .26, 1);
}
.ponteiro {
  position: absolute; top: -0.2rem; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 0.6rem solid transparent; border-right: 0.6rem solid transparent;
  border-top: 1rem solid var(--la-lima);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); z-index: 2;
}
.roda-centro {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 27%; aspect-ratio: 1; border-radius: 50%;
  background: var(--la-bg); display: grid; place-items: center; text-align: center; z-index: 2;
  box-shadow: inset 0 0 0 1px var(--la-linha);
}
.roda-centro span { font-family: var(--fonte-num); font-size: 0.625rem; letter-spacing: .1em; color: var(--la-fg-2); }

.rotulos { position: absolute; inset: 0; pointer-events: none; }
.rotulos i {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--fonte-num); font-size: 0.8125rem;
  white-space: nowrap;
}
.roleta-res { text-align: center; text-transform: uppercase; font-size: 1.375rem; min-height: 1.5rem; }
.roleta-res .ganho { color: var(--la-lima); }

/* ---------- gerador ---------- */
.gerador-cab { padding-block: clamp(1.8rem, 4vw, 3.2rem) 0.4rem; }
.gerador-cab h1 {
  margin: 0; font-size: clamp(1.5rem, 5.2vw, 2.25rem);
  text-transform: uppercase; letter-spacing: -.025em; line-height: 1;
}
.gerador-cab p { margin: 0.9rem 0 0; color: var(--la-fg-2); font-size: 1rem; max-width: 50ch; }

.modos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 1.5rem; }
@media (max-width: 36rem) { .modos { grid-template-columns: 1fr; } }
.modo {
  padding: clamp(1.2rem, 2.4vw, 2rem); cursor: pointer; text-align: left; font: inherit; color: inherit; border: 0;
  transition: background var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease),
              transform var(--t-rapido) var(--ease);
}
.modo:hover { background: var(--la-elevado); }
.modo:active { transform: scale(.985); }
.modo[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--la-lima); }
.modo .qtd { font-family: var(--fonte-num); font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--la-fg-2); }
.modo h3 { margin: 0.5rem 0 0.25rem; font-size: 1.5rem; text-transform: uppercase; }
.modo .faixa { font-family: var(--fonte-num); font-size: 0.75rem; color: var(--la-fg-2); }

.jogo-gerado { padding: clamp(1.1rem, 2.2vw, 1.7rem); margin-top: 0.9rem; }
.jogo-gerado .cab { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.jogo-gerado .cab .rot { font-family: var(--fonte-num); font-size: 0.5625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--la-fg-2); }
.dezenas-la { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.dz-la {
  font-family: var(--fonte-num); font-size: 0.875rem;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: var(--raio-campo); background: var(--la-elevado); color: var(--la-fg);
}
.dz-la.on { background: var(--la-lima); color: var(--la-sobre-lima); }
.porque {
  margin: var(--e-3) 0 0; font-size: 0.75rem; color: var(--la-fg-2); line-height: 1.55;
  box-shadow: inset 2px 0 0 0 var(--la-linha); padding-inline-start: var(--e-3);
}

/* CRITÉRIO RELAXADO. Em 400 tentativas nenhum jogo coube nas três faixas ao
   mesmo tempo, e o gerador entregou o mais próximo. Dizer isso é o que separa
   um método de uma promessa: o texto do .porque acima já aponta ONDE o jogo
   saiu da medida, e esta linha diz que ele saiu.
   Mesmo fio de 2px do .porque, na cor de atenção: é a mesma voz, com outro
   estado. Não é caixa de alerta — o jogo continua válido. */
.relaxado {
  display: flex; align-items: flex-start; gap: var(--e-2);
  margin: var(--e-2) 0 0; font-size: 0.6875rem; line-height: 1.5;
  color: var(--la-atencao);
  box-shadow: inset 2px 0 0 0 var(--la-atencao); padding-inline-start: var(--e-3);
}
.relaxado svg { flex: none; margin-top: 0.15rem; }

/* portão: quem não tem acesso não recebe as dezenas do servidor */
.portao { position: relative; }
.portao .dezenas-la { filter: blur(7px); user-select: none; pointer-events: none; }
.portao-msg {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; gap: 0.45rem;
  background: rgba(11, 15, 12, .55); backdrop-filter: blur(2px);
  border-radius: var(--raio-campo); padding: 0.7rem;
}
.portao-msg .cad {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--fonte-num); font-size: 0.625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--la-fg-2);
}

/* ---------- conquistas ---------- */
.nivel { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; padding-block: 1.4rem 0.3rem; }
.nivel .anel {
  width: 4.4rem; height: 4.4rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--la-lima) var(--pct, 60%), var(--la-elevado) 0);
}
  /* o anel cresceu junto com a escala */
.nivel .anel i {
  width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--la-bg);
  display: grid; place-items: center;
  font-family: var(--fonte-num); font-size: 1rem;
}
.nivel h1 { margin: 0; font-size: 1.875rem; text-transform: uppercase; letter-spacing: -.015em; }
.nivel p { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--la-fg-2); }

.conquistas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: 1.1rem; }
@media (max-width: 36rem) { .conquistas { grid-template-columns: 1fr; } }
.conq { padding: clamp(1rem, 2vw, 1.5rem); display: grid; gap: 0.2rem; }
.conq.feita { box-shadow: inset 0 0 0 1px rgba(168, 255, 53, .25); }
.conq .n { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 1rem; }
.conq .xp { font-family: var(--fonte-num); font-size: 0.6875rem; color: var(--la-fg-2); }
.conq.feita .xp { color: var(--la-lima); }
.conq p { margin: 0; font-size: 0.75rem; color: var(--la-fg-2); line-height: 1.5; }

/* ---------- meus jogos ---------- */
.vazio {
  border-radius: var(--raio-card); padding: 2rem 1.2rem; text-align: center;
  color: var(--la-fg-2); margin-top: 1.1rem; font-size: 0.8125rem;
  background: var(--la-campo);
}
.vazio strong { display: block; color: var(--la-fg); font-size: 0.9375rem; margin-bottom: 0.3rem; }

/* ---------- navegação inferior ---------- */
.la-nav {
  position: sticky; bottom: var(--barra-h); z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(11, 15, 12, 0.78);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 0 var(--la-fio);
}
.la-nav a {
  display: grid; justify-items: center; gap: 0.25rem; padding: 0.7rem 0.25rem 0.75rem;
  text-decoration: none; color: var(--la-fg-2);
  font-family: var(--fonte-num); font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase;
  transition: color var(--t-rapido) var(--ease);
}
.la-nav a:hover { color: var(--la-fg); }
.la-nav a[aria-current="page"] { color: var(--la-lima); }
.la-nav a svg { display: block; }

.la-legal { padding: 1.1rem 0 0.3rem; font-size: 0.625rem; color: var(--la-fg-2); line-height: 1.6; margin-top: 1.4rem; box-shadow: inset 0 1px 0 0 var(--la-fio); }

/* ---------- pós-compra / ativação ---------- */
.ativar-trilha { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; padding-block: 1rem; }
.la-hero .ativar-trilha { justify-content: center; }
.ativar-trilha .et {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--fonte-num); font-size: 0.5625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--la-fg-2);
}
.ativar-trilha .et .n {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.5625rem; background: var(--la-campo);
}
.ativar-trilha .et[aria-current="step"] { color: var(--la-lima); }
.ativar-trilha .et[aria-current="step"] .n { background: rgba(168, 255, 53, .16); }
.ativar-trilha .tr { width: 0.8rem; height: 1px; background: var(--la-linha); }

/* ---------- clique é aperto ---------- */
/* Mesmo idioma da Fezinha, aplicado aos clicáveis que faltavam aqui: a barra
   de navegação de baixo e a marca. Botão (.btn-la) e cartão de modo (.modo)
   já apertavam. */
.la-nav a, .la-mark {
  transition-property: color, background, transform;
  transition-duration: var(--t-rapido);
  transition-timing-function: var(--ease);
}
.la-nav a:active, .la-mark:active { transform: scale(.985); }