/* =====================================================================
   V90 - APOSTAR AGORA (o assistente de 4 passos)
   Botões grandes, números grandes, uma coisa por vez. A cor da loteria
   escolhida entra em --aa-cor / --aa-suave.
   ===================================================================== */
.aa { --aa-cor: #6f2aa8; --aa-suave: #f4ecfb; padding-bottom: 70px; max-width: 760px; }
.aa-hero h1 span { color: var(--aa-cor, #6f2aa8); }

/* ---------- a trilha 1-2-3-4 ---------- */
.aa-trilha {
  list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.aa-trilha li {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px;
  background: #f3eff7; color: #7a7186; font-weight: 800; font-size: 14px;
}
.aa-trilha i {
  flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; background: #fff; color: #7a7186; font-size: 13px;
}
.aa-trilha li.agora { background: #1b1426; color: #fff; }
.aa-trilha li.agora i { background: #f5b83d; color: #1b1426; }
.aa-trilha li.feito { background: #e6f6ee; color: #177a4c; }
.aa-trilha li.feito i { background: #1f9d63; color: #fff; }

.aa-passo h2 { margin: 0 0 14px; font-size: clamp(22px, 4.5vw, 28px); letter-spacing: -.02em; }

/* ---------- 1. onde ---------- */
.aa-opcoes { display: grid; gap: 12px; }
.aa-opcao {
  display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  width: 100%; padding: 18px; text-align: left; cursor: pointer; font: inherit; color: #1b1426;
  border: 2px solid #e6dfee; border-radius: 20px; background: #fff;
  box-shadow: 0 10px 26px rgba(46, 22, 65, .06); transition: border-color .15s ease, transform .12s ease;
}
.aa-opcao:hover { border-color: #6f2aa8; transform: translateY(-1px); }
.aa-opcao:focus-visible { outline: 3px solid #f5b83d; outline-offset: 2px; }
.aa-opcao i {
  grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  font-style: normal; font-size: 28px; background: #f4ecfb;
}
.aa-opcao b { font-size: 19px; }
.aa-opcao small { font-size: 15px; color: #6e6679; }

.aa-continuar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 14px 16px; border-radius: 16px; background: #fff4da; border: 1px solid #f5d58a;
}
.aa-continuar b { display: block; font-size: 17px; }
.aa-continuar span { font-size: 15px; color: #5b4a1d; }

/* ---------- 2. jogos ---------- */
.aa-fontes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.aa-fontes button {
  min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #e3dcea; background: #fff;
  font: inherit; font-size: 15px; font-weight: 800; color: #4f475c; cursor: pointer;
}
.aa-fontes button[aria-selected="true"] { background: #1b1426; border-color: #1b1426; color: #fff; }
.aa-fontes button[hidden] { display: none; }
.aa-lista-loterias { display: grid; gap: 10px; }
.aa-loteria-cartao {
  display: grid; grid-template-columns: 50px 1fr auto; gap: 14px; align-items: center; width: 100%;
  padding: 14px 16px; border-radius: 18px; border: 2px solid var(--suave, #eee); background: #fff;
  font: inherit; color: #1b1426; text-align: left; cursor: pointer;
}
.aa-loteria-cartao:hover { border-color: var(--cor); }
.aa-loteria-cartao i {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-style: normal;
  background: var(--cor); color: #fff; font-weight: 900; font-size: 15px;
}
.aa-loteria-cartao b { display: block; font-size: 18px; }
.aa-loteria-cartao small { font-size: 15px; color: #6e6679; }
.aa-loteria-cartao em { font-style: normal; font-weight: 800; color: var(--cor); white-space: nowrap; }
.aa-vazio { padding: 16px; border-radius: 16px; background: #f7f4fa; color: #4f475c; font-size: 16px; line-height: 1.5; margin: 0; }

.aa-campo { display: grid; gap: 6px; margin-bottom: 12px; }
.aa-campo span { font-size: 15px; font-weight: 800; color: #4f475c; }
.aa-campo select, .aa-campo textarea, .aa-campo input {
  width: 100%; box-sizing: border-box; min-height: 50px; padding: 10px 14px; border-radius: 14px;
  border: 1.5px solid #e3dcea; background: #fff; font: inherit; font-size: 17px; color: #1b1426;
}
.aa-campo textarea { font-variant-numeric: tabular-nums; line-height: 1.6; resize: vertical; }
.aa-exemplo { margin: -4px 0 12px; font-size: 14px; color: #6e6679; }
.aa-erro { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #fde8e8; color: #9b1c1c; font-size: 15px; }
.aa-grande { width: 100%; min-height: 54px; font-size: 17px; }
.aa-voltar {
  margin-top: 18px; min-height: 44px; padding: 0 6px; border: 0; background: none; color: #6f2aa8;
  font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}

/* ---------- 3. marcar ---------- */
.aa-progresso { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.aa-barra { flex: 1; height: 12px; border-radius: 99px; background: #ece6f2; overflow: hidden; }
.aa-barra i { display: block; height: 100%; width: 0; background: #1f9d63; border-radius: 99px; transition: width .35s ease; }
.aa-progresso b { font-size: 15px; white-space: nowrap; }
.aa-dica { margin: 0 0 12px; font-size: 17px; line-height: 1.5; color: #2b2436; }

.aa-cartao {
  position: relative; padding: 18px; border-radius: 24px; background: #fff;
  border: 3px solid var(--aa-cor); box-shadow: 0 16px 40px rgba(46, 22, 65, .10);
}
.aa-cartao.feito { border-color: #1f9d63; background: #f3fbf6; }
.aa-cartao-topo { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-weight: 800; }
.aa-cartao-topo span { color: var(--aa-cor); font-size: 16px; }
.aa-cartao-topo em { font-style: normal; color: #4f475c; font-size: 16px; }
.aa-bolas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.aa-bola {
  width: clamp(52px, 13vw, 64px); height: clamp(52px, 13vw, 64px); border-radius: 50%;
  display: grid; place-items: center; background: var(--aa-cor); color: #fff;
  font-size: clamp(22px, 5.6vw, 28px); font-weight: 900; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15);
}
.aa-bola.coluna { width: auto; min-width: 58px; height: auto; padding: 8px 6px; border-radius: 16px; display: grid; gap: 2px; }
.aa-bola.coluna small { font-size: 12px; font-weight: 800; opacity: .85; }
.aa-trevos { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.aa-trevos small { font-weight: 800; color: #4f475c; font-size: 15px; }
.aa-trevo {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: #1f9d63; color: #fff; font-size: 22px; font-weight: 900;
}
.aa-extra { margin: 14px 0 0; text-align: center; font-size: 16px; font-weight: 700; color: #4f475c; }
.aa-carimbo {
  position: absolute; top: -14px; right: 14px; padding: 4px 12px; border-radius: 99px;
  background: #1f9d63; color: #fff; font-weight: 900; font-size: 14px;
}

.aa-botoes { display: grid; gap: 10px; margin-top: 16px; }
.aa-ja {
  min-height: 64px; border: 0; border-radius: 18px; background: #1f9d63; color: #fff; cursor: pointer;
  font: inherit; font-size: 20px; font-weight: 900; box-shadow: 0 12px 26px rgba(31, 157, 99, .3);
}
.aa-ja:hover { background: #188552; }
.aa-ja:focus-visible, .aa-botoes-2 > *:focus-visible { outline: 3px solid #f5b83d; outline-offset: 2px; }
.aa-botoes-2 { display: flex; flex-wrap: wrap; gap: 8px; }
.aa-botoes-2 > * {
  flex: 1 1 150px; min-height: 50px; display: grid; place-items: center; padding: 0 12px; box-sizing: border-box;
  border-radius: 14px; border: 1.5px solid #e3dcea; background: #fff; color: #2b2436;
  font: inherit; font-size: 16px; font-weight: 800; text-decoration: none; cursor: pointer;
}
.aa-botoes-2 > [hidden] { display: none; }
.aa-botoes-2 > :disabled { opacity: .45; cursor: default; }

.aa-volante-caixa { margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: #faf8fc; border: 1px solid #eee7f3; }
.aa-volante-caixa summary { cursor: pointer; font-weight: 800; font-size: 16px; min-height: 30px; display: flex; align-items: center; }
.aa-volante-caixa .volante { margin-top: 12px; --vol-tam: 36px; }
.aa-volante-caixa .volante-n { cursor: default; font-size: 14px; display: grid; place-items: center; box-sizing: border-box; }

.aa-mini-lista { display: grid; gap: 6px; margin-top: 16px; max-height: 300px; overflow-y: auto; }
.aa-mini {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px;
  border: 1.5px solid #eee7f3; background: #fff; font: inherit; color: #2b2436; text-align: left; cursor: pointer;
}
.aa-mini i {
  flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  background: #f3eff7; font-weight: 900; font-size: 13px;
}
.aa-mini span { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; }
.aa-mini.feito { color: #6e6679; }
.aa-mini.feito i { background: #1f9d63; color: #fff; }
.aa-mini.agora { border-color: var(--aa-cor); background: var(--aa-suave); }

/* ---------- 4. pronto ---------- */
.aa-pronto { text-align: center; padding: 22px 16px; border-radius: 24px; background: #f3fbf6; border: 2px solid #bfe8d2; }
.aa-pronto i { font-style: normal; font-size: 44px; }
.aa-pronto h2 { margin: 6px 0 6px; }
.aa-pronto p { margin: 0; font-size: 17px; color: #2b2436; }
.aa-pronto .aa-pronto-dica { margin-top: 8px; font-weight: 800; }
.aa-carteira {
  display: grid; gap: 12px; margin-top: 16px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid #e9e2ef;
}
.aa-carteira b { display: block; font-size: 18px; }
.aa-carteira small { font-size: 15px; color: #6e6679; }
.aa-campo-curto { margin: 0; }
.aa-fim { margin-top: 14px; }

.aa-mais { margin-top: 28px; padding: 14px 16px; border-radius: 16px; background: #faf8fc; border: 1px solid #eee7f3; }
.aa-mais summary { cursor: pointer; font-weight: 800; font-size: 16px; }
.aa-mais p { font-size: 15px; line-height: 1.6; color: #4f475c; }

/* ---------- a tela cheia do atendente ---------- */
.aa-atendente {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 24px; box-sizing: border-box;
  border: 0; background: #fff; color: #1b1426; overflow: hidden; inset: 0;
}
.aa-atendente[open] { display: flex; flex-direction: column; }
.aa-atendente::backdrop { background: #fff; }
.aa-atendente-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: clamp(20px, 4vw, 30px); }
.aa-atendente-topo b { color: var(--aa-cor); }
.aa-atendente-bolas {
  flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: clamp(10px, 2vw, 18px);
}
.aa-at-bola {
  width: clamp(70px, 17vw, 120px); height: clamp(70px, 17vw, 120px); border-radius: 50%; display: grid; place-items: center;
  background: var(--aa-cor); color: #fff; font-size: clamp(32px, 8vw, 58px); font-weight: 900; font-variant-numeric: tabular-nums;
}
.aa-at-bola.coluna { width: auto; min-width: 80px; height: auto; padding: 10px; border-radius: 20px; gap: 2px; }
.aa-at-bola.coluna small { font-size: 15px; }
.aa-atendente-extra { text-align: center; font-size: clamp(18px, 3.4vw, 26px); font-weight: 800; margin: 12px 0; min-height: 1em; }
.aa-atendente-botoes { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; }
.aa-atendente-botoes button {
  min-height: 64px; border-radius: 18px; border: 1.5px solid #e3dcea; background: #fff; font: inherit;
  font-size: 20px; font-weight: 900; color: #1b1426; cursor: pointer;
}
.aa-atendente-botoes .aa-at-proximo { background: #1f9d63; border-color: #1f9d63; color: #fff; }
.aa-atendente-botoes button:disabled { opacity: .4; }

@media (max-width: 620px) {
  .aa-trilha span { display: none; }
  .aa-trilha li { justify-content: center; }
  .aa-opcao { padding: 14px; grid-template-columns: 48px 1fr; }
  .aa-opcao i { width: 48px; height: 48px; font-size: 24px; }
  .aa-opcao b { font-size: 17px; }
  .aa-cartao { padding: 16px 12px; }
  .aa-bolas { gap: 8px; }
  .aa-volante-caixa .volante { --vol-tam: 30px; }
  .aa-volante-caixa .volante-grade { gap: 4px; }
  .aa-volante-caixa .volante-n { font-size: 12px; border-radius: 8px; }
  .aa-atendente { padding: 16px; }
  .aa-atendente-botoes { grid-template-columns: 56px 1fr auto; }
  .aa-atendente-botoes button { font-size: 17px; padding: 0 12px; }
}