/* ==================================================================
   FAIXA DE MODALIDADES + PAGINA DE JOGO - Loterica Dia de Sorte

   Depende de tokens.css e style.css, nesta ordem. Nenhum hex solto:
   toda cor sai de var(--...).

   A cor da modalidade fica confinada a placa e ao anel da dezena - o
   papel de selo que a identidade permite. Botao e CTA continuam laranja
   em todos os jogos: um CTA, uma cor.
   ================================================================== */

/* ---------- ACENTO POR MODALIDADE ----------
   Cada jogo so troca --acento. Todo o resto do CSS le essa variavel, em
   vez de repetir regra por modalidade.

   Prefixo mod- e nao jg-: style.css ja usa .jg-lotofacil, .jg-quina e
   .jg-time nos chips do hero da home, com outro significado (--jg). Como
   as duas folhas carregam juntas, nome igual ali vazaria estilo de uma
   pagina na outra. */
.mod-megasena  { --acento:var(--jogo-megasena);  --acento-placa:var(--jogo-megasena-700) }
.mod-lotofacil { --acento:var(--jogo-lotofacil); --acento-placa:var(--jogo-lotofacil) }
.mod-quina     { --acento:var(--jogo-quina);     --acento-placa:var(--jogo-quina) }
.mod-duplasena { --acento:var(--jogo-duplasena); --acento-placa:var(--jogo-duplasena) }
.mod-timemania { --acento:var(--jogo-timemania); --acento-placa:var(--jogo-timemania) }


/* ==================================================================
   FAIXA DA HOME
   Uma linha por jogo: placa de identificacao, os numeros do proximo
   concurso e a acao. E o letreiro de balcao da lotérica, em pagina.
   ================================================================== */

.faixas{ display:grid; gap:14px; list-style:none; padding:0; margin:0 }

.faixa{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:0 22px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:12px;
  overflow:hidden;
}

/* Placa: o unico lugar da faixa com a cor do jogo. */
.faixa-placa{
  display:flex;
  align-items:center;
  gap:9px;
  align-self:stretch;
  min-width:210px;
  padding:20px 24px;
  background:var(--acento-placa);
  color:var(--branco);
  font-family:var(--fonte-display);
  font-weight:800;
  font-stretch:112%;
  font-size:20px;
  letter-spacing:.01em;
  text-decoration:none;
}
.faixa-placa svg{ width:24px; height:24px; flex:none }
.faixa-placa:hover{ color:var(--branco); text-decoration:underline }

/* Grid de colunas fixas, e nao flex: assim as tres colunas ficam no mesmo
   x em todas as linhas, independente da largura do texto de cada jogo. */
.faixa-dados{
  display:grid;
  grid-template-columns:150px 150px 1fr;
  align-items:start;
  gap:8px 24px;
  margin:0;
  padding:16px 0;
}
.faixa-dados dt{
  font-size:12px;
  font-weight:600;
  color:var(--tinta-60);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:2px;
}
.faixa-dados dd{ margin:0 }

.fd-num{
  font-family:var(--fonte-display);
  font-weight:700;
  font-stretch:106%;
  font-size:23px;
  font-variant-numeric:tabular-nums;
  color:var(--azul);
}
.fd-dia{ font-size:14px; font-weight:600; color:var(--tinta-60) }

/* O premio e o heroi da linha. */
.fd-premio{
  font-family:var(--fonte-display);
  font-weight:800;
  font-stretch:118%;
  font-size:clamp(23px,3.2vw,29px);
  font-variant-numeric:tabular-nums;
  color:var(--tinta);
  line-height:1.05;
}

.faixa-acao{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  padding:16px 24px 16px 0;
}
.faixa-acao .btn{ width:auto; font-size:16px; padding:12px 20px }

.faixa-res{ font-size:13.5px; color:var(--tinta-60) }
.faixa-res:hover{ color:var(--azul); text-decoration:underline }

.faixa-vazia{ font-size:16px; color:var(--tinta-60); margin:0 }

.faixa-nota{ margin-top:18px; font-size:12px; color:var(--tinta-60) }

@media (max-width:860px){
  .faixa{ grid-template-columns:1fr; gap:0 }
  .faixa-placa{ min-width:0; padding:14px 18px; font-size:18px }
  .faixa-dados{ grid-template-columns:1fr 1fr; padding:16px 18px 4px; gap:12px 22px }
  .faixa-dados > div:last-child{ grid-column:1 / -1 }
  .faixa-acao{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    padding:12px 18px 18px;
  }
  .faixa-acao .btn{ flex:1; justify-content:center; min-width:190px }
}


/* ==================================================================
   PAGINA DE JOGO
   ================================================================== */

.migalha{ font-size:13px; color:var(--tinta-60); margin-bottom:18px }
.migalha a{ color:var(--tinta-60) }
.migalha a:hover{ color:var(--azul); text-decoration:underline }
.migalha span[aria-hidden]{ margin:0 4px; opacity:.5 }

.jg-hero{
  background:var(--azul-100);
  padding:clamp(22px,4vw,34px) 0 clamp(30px,5vw,44px);
  border-bottom:1px solid var(--linha);
}

.jg-placa{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border-radius:999px;
  background:var(--acento-placa);
  color:var(--branco);
  font-family:var(--fonte-display);
  font-weight:800;
  font-stretch:104%;
  font-size:14px;
  margin-bottom:14px;
}
.jg-placa svg{ width:18px; height:18px }

.jg-hero h1{
  font-size:clamp(28px,5.4vw,42px);
  font-stretch:104%;
  line-height:1.1;
  margin-bottom:12px;
}
.jg-resumo{ font-size:17.5px; color:var(--tinta-60); max-width:62ch; margin-bottom:26px }

.jg-proximo{
  display:flex;
  flex-wrap:wrap;
  gap:14px 42px;
  margin:0 0 26px;
  padding:18px 22px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:12px;
}
.jg-proximo dt{
  font-size:12px;
  font-weight:600;
  color:var(--tinta-60);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:3px;
}
.jg-proximo dd{
  margin:0;
  font-family:var(--fonte-display);
  font-weight:700;
  font-stretch:106%;
  font-size:25px;
  font-variant-numeric:tabular-nums;
  color:var(--azul);
}
.jg-premio{ color:var(--tinta) !important; font-weight:800 !important; font-stretch:118% !important }

.jg-hero .btn{ width:auto }
.jg-nota{ margin-top:16px; font-size:12px; color:var(--tinta-60) }


/* ---------- DEZENAS SORTEADAS ----------
   Bola branca com anel na cor do jogo, numero em tinta: e a dezena
   marcada no volante, e passa contraste nos cinco jogos - o verde da
   Mega-Sena reprovaria como preenchimento com numero branco. */
.dz-rotulo{
  font-size:12px;
  font-weight:600;
  color:var(--tinta-60);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0 0 10px;
}
.dz-rotulo + .dezenas{ margin-bottom:26px }

.dezenas{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  padding:0;
  margin:0 0 26px;
}
.dezenas li{
  display:grid;
  place-items:center;
  width:clamp(48px,9vw,58px);
  aspect-ratio:1;
  border:2.5px solid var(--acento);
  border-radius:50%;
  background:var(--branco);
  color:var(--tinta);
  font-family:var(--fonte-display);
  font-weight:800;
  font-stretch:100%;
  font-size:clamp(20px,3.6vw,24px);
  font-variant-numeric:tabular-nums;
}

/* Unico momento de movimento da pagina: as dezenas carimbam em sequencia,
   a mesma assinatura da pagina da Independencia. */
.js .dezenas li{
  opacity:0;
  transform:scale(.72);
  animation:carimbo .34s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay:calc(var(--i) * 55ms);
}
@keyframes carimbo{
  to{ opacity:1; transform:scale(1) }
}

.mod-timecoracao{
  font-size:17px;
  margin-bottom:24px;
  padding:14px 18px;
  background:var(--azul-100);
  border-left:4px solid var(--acento);
  border-radius:0 8px 8px 0;
  max-width:62ch;
}


/* ---------- RATEIO ---------- */
.rateio{
  width:100%;
  border-collapse:collapse;
  margin-bottom:22px;
  font-size:16px;
}
.rateio caption{
  text-align:left;
  font-size:12px;
  font-weight:600;
  color:var(--tinta-60);
  text-transform:uppercase;
  letter-spacing:.06em;
  padding-bottom:10px;
}
.rateio th,
.rateio td{
  padding:12px 14px;
  border-bottom:1px solid var(--linha);
  text-align:left;
}
.rateio thead th{
  font-size:12px;
  font-weight:600;
  color:var(--tinta-60);
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom-width:2px;
}
.rateio tbody th{ font-weight:600 }
.rateio td{ font-variant-numeric:tabular-nums; color:var(--tinta-60) }
.rateio tbody tr:first-child td,
.rateio tbody tr:first-child th{ color:var(--tinta); font-weight:700 }

.jg-aviso{ font-size:12.5px; color:var(--tinta-60); max-width:70ch }


/* ---------- COMO FUNCIONA ---------- */
.jg-fatos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:14px;
  margin-bottom:34px;
}
.jg-fatos > div{
  padding:18px 20px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:12px;
}
.jg-fatos dt{
  font-size:12px;
  font-weight:600;
  color:var(--tinta-60);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:5px;
}
.jg-fatos dd{
  margin:0;
  font-family:var(--fonte-display);
  font-weight:800;
  font-stretch:110%;
  font-size:30px;
  font-variant-numeric:tabular-nums;
  color:var(--azul);
  line-height:1.1;
}
.jg-dias{ font-size:17px !important; font-stretch:100% !important; font-weight:700 !important }

.jg-faixas{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  list-style:none;
  padding:0;
  margin:12px 0 0;
}
.jg-faixas li{
  padding:8px 15px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-left:4px solid var(--acento);
  border-radius:0 8px 8px 0;
  font-size:15.5px;
}


/* ---------- HISTORICO ---------- */
.historico{ list-style:none; padding:0; margin:0; display:grid; gap:1px; background:var(--linha) }
.historico li{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:6px 18px;
  padding:13px 16px;
  background:var(--branco);
}
.hi-num{ font-weight:700; font-size:15px; min-width:130px }
.hi-data{ font-size:14px; color:var(--tinta-60); font-variant-numeric:tabular-nums; min-width:92px }
.hi-dz{
  font-family:var(--fonte-display);
  font-weight:700;
  font-stretch:96%;
  font-size:15.5px;
  font-variant-numeric:tabular-nums;
  color:var(--tinta);
  letter-spacing:.02em;
}
.hi-dz em{
  font-style:normal;
  font-size:11px;
  color:var(--tinta-60);
  margin:0 8px;
  text-transform:uppercase;
}
@media (max-width:640px){
  .historico li{ grid-template-columns:1fr auto }
  .hi-dz{ grid-column:1 / -1; font-size:15px }
}


/* ---------- OUTRAS MODALIDADES ---------- */
.outros{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0 }
.outros li{
  background:var(--branco);
  border:1px solid var(--linha);
  border-left:4px solid var(--acento);
  border-radius:0 10px 10px 0;
}
.outros a{
  display:block;
  padding:13px 20px;
  font-family:var(--fonte-display);
  font-weight:700;
  font-stretch:104%;
  font-size:17px;
  color:var(--tinta);
}
.outros a:hover{ color:var(--azul) }


/* ---------- JOGO RESPONSAVEL ---------- */
.jg-responsavel{ background:var(--navy); color:var(--azul-100) }
.jg-responsavel h2{ color:var(--branco) }
.jg-responsavel p{ font-size:16px; max-width:68ch; margin-bottom:12px }
.jg-responsavel b{ color:var(--branco) }
.jg-responsavel a{ color:var(--branco); text-decoration:underline }


@media (prefers-reduced-motion:reduce){
  .js .dezenas li{ animation:none; opacity:1; transform:none }
}


/* ==================================================================
   CARREGAMENTO
   So aparece quando o servidor nao tinha o dado em cache. Com cache
   quente, o HTML ja chega completo e nada disso e usado.
   ================================================================== */

.carregando{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0;
  padding:14px 0;
  font-size:15.5px;
  color:var(--tinta-60);
}
.spinner{
  width:19px;
  height:19px;
  flex:none;
  border:2.5px solid var(--linha);
  border-top-color:var(--azul);
  border-radius:50%;
  animation:girar .7s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg) } }

.carregando-erro{ color:var(--tinta) }
.carregando-erro .spinner{ display:none }

@media (prefers-reduced-motion:reduce){
  /* Sem giro, mas o aviso continua visivel: e informacao, nao enfeite. */
  .spinner{ animation:none; border-top-color:var(--azul); opacity:.6 }
}


/* ==================================================================
   AREA DE RESULTADOS
   ================================================================== */

.res-hero{ background:var(--azul-100) }

/* ---------- BUSCA POR CONCURSO ---------- */
.busca{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:12px;
  margin-top:26px;
  padding:18px 20px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:12px;
}
.busca-campo{ display:flex; flex-direction:column; gap:5px }
.busca-campo label{
  font-size:12px;
  font-weight:600;
  color:var(--tinta-60);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.busca select,
.busca input{
  font-family:var(--fonte-texto);
  font-size:17px;
  color:var(--tinta);
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:9px;
  padding:12px 14px;
  min-height:48px;
}
.busca select{ min-width:180px }
.busca input{ width:150px; font-variant-numeric:tabular-nums }
.busca select:focus-visible,
.busca input:focus-visible{
  outline:3px solid var(--laranja);
  outline-offset:2px;
  border-color:var(--azul);
}
.busca .btn{ width:auto; min-height:48px }

.busca-erro{ margin-top:12px; font-size:15px; color:var(--tinta) }

/* ---------- LISTA DE RESULTADOS ---------- */
.res-bloco:nth-of-type(even){ background:var(--azul-100) }

.res-cabeca{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 20px;
  margin-bottom:22px;
  padding-left:14px;
  border-left:5px solid var(--acento);
}
.res-cabeca h2{ margin:0 }
.res-todos{ font-size:15px; color:var(--azul) }
.res-todos:hover{ text-decoration:underline }

.res-lista{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));
  gap:14px;
  list-style:none;
  padding:0;
  margin:0;
}
.res-item{
  padding:18px 20px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:12px;
}
.res-bloco:nth-of-type(even) .res-item{ background:var(--branco) }

.res-topo{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 12px;
  margin-bottom:14px;
}
.res-num{
  font-family:var(--fonte-display);
  font-weight:800;
  font-stretch:104%;
  font-size:18px;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.res-num:hover{ color:var(--azul); text-decoration:underline }
.res-data{ font-size:14px; color:var(--tinta-60); font-variant-numeric:tabular-nums }

.res-extra{ font-size:14.5px; color:var(--tinta-60); margin:0 0 8px }
.res-status{
  margin:0;
  font-size:12px;
  font-weight:600;
  color:var(--tinta-60);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* Dezenas menores, para caber tres concursos lado a lado. */
.dz-mini{ gap:6px; margin-bottom:12px }
.dz-mini li{
  width:36px;
  border-width:2px;
  font-size:15px;
}

.res-aviso-sec{ padding-top:0 }

/* ---------- NAVEGACAO ENTRE CONCURSOS ---------- */
.vizinhos{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  align-items:center;
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--linha);
  font-size:15.5px;
}
.vizinhos a{ color:var(--azul) }
.vizinhos a:hover{ text-decoration:underline }

@media (max-width:640px){
  .busca{ flex-direction:column; align-items:stretch }
  .busca-campo{ width:100% }
  .busca select,
  .busca input{ width:100% }
  .busca .btn{ width:100%; justify-content:center }
}


/* ==================================================================
   GERADOR DE JOGOS
   ================================================================== */

.ger{
  padding:22px 24px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:12px;
}
.sec-alt .ger{ background:var(--branco) }

.ger-controles{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:14px;
}
.ger-campo{ display:flex; flex-direction:column; gap:5px }
.ger-campo label{
  font-size:12px;
  font-weight:600;
  color:var(--tinta-60);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.ger-campo select{
  font-family:var(--fonte-texto);
  font-size:17px;
  color:var(--tinta);
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:9px;
  padding:12px 14px;
  min-height:48px;
  min-width:170px;
}
.ger-campo select:focus-visible{
  outline:3px solid var(--laranja);
  outline-offset:2px;
  border-color:var(--azul);
}
.ger-fixo{ margin:0; font-size:16.5px; color:var(--tinta-60) }
/* Acao de ferramenta, nao de conversao: fica em azul contornado para
   nao competir com o botao laranja de WhatsApp logo abaixo. Um CTA,
   uma cor - dois laranjas lado a lado dividiriam o clique. */
.ger-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:12px 22px;
  border:2px solid var(--azul);
  border-radius:10px;
  background:var(--branco);
  color:var(--azul);
  font-family:var(--fonte-display);
  font-weight:700;
  font-stretch:104%;
  font-size:17px;
  cursor:pointer;
}
.ger-btn svg{ width:21px; height:21px; flex:none }
.ger-btn:hover{ background:var(--azul-100) }
.ger-btn:active{ transform:translateY(1px) }
.ger-btn:focus-visible{ outline:3px solid var(--laranja); outline-offset:2px }

.ger-saida{ margin-top:24px }
.ger-saida .dezenas{ margin-bottom:22px }
.ger-saida .btn{ width:auto; margin-top:6px }

/* Uma linha por dezena: numero a esquerda, ultima aparicao a direita. */
.ger-hist{
  list-style:none;
  padding:0;
  margin:0 0 22px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr));
  gap:1px;
  background:var(--linha);
  border:1px solid var(--linha);
  border-radius:10px;
  overflow:hidden;
}
.ger-hist li{
  display:flex;
  align-items:baseline;
  gap:11px;
  padding:11px 15px;
  background:var(--branco);
  font-size:15px;
  color:var(--tinta-60);
}
.ger-hist b{
  font-family:var(--fonte-display);
  font-weight:800;
  font-size:17px;
  font-variant-numeric:tabular-nums;
  color:var(--tinta);
  min-width:26px;
}

.ger-nota{
  margin-top:18px;
  font-size:13px;
  color:var(--tinta-60);
  max-width:70ch;
}

@media (max-width:560px){
  .ger-controles{ flex-direction:column; align-items:stretch }
  .ger-campo select,
  .ger-btn{ width:100%; justify-content:center }
  .ger-saida .btn{ width:100%; justify-content:center }
}


/* ==================================================================
   SUBMENU DE JOGOS NO CABECALHO
   ================================================================== */

.nav-drop{ position:relative; display:flex; align-items:center }

.nav-drop-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0 0 3px;
  border:0;
  border-bottom:2px solid transparent;
  background:none;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  cursor:pointer;
}
.nav-drop-btn svg{ width:15px; height:15px; transition:transform .18s ease }
.nav-drop-btn:hover{ color:var(--azul); border-bottom-color:var(--azul) }
.nav-drop-btn[aria-expanded="true"]{ color:var(--azul) }
.nav-drop-btn[aria-expanded="true"] svg{ transform:rotate(180deg) }
.nav-drop-btn:focus-visible{ outline:3px solid var(--laranja); outline-offset:3px }

.nav-drop-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  z-index:60;
  min-width:210px;
  margin:0;
  padding:7px 0;
  list-style:none;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:11px;
  box-shadow:0 14px 30px rgba(1,42,77,.14);
}
.nav-drop-menu a{
  display:block;
  padding:10px 18px;
  border:0;
  font-size:16px;
  color:var(--tinta);
  white-space:nowrap;
}
.nav-drop-menu a:hover{ background:var(--azul-100); color:var(--azul) }

@media (prefers-reduced-motion:reduce){
  .nav-drop-btn svg{ transition:none }
}

/* No menu mobile o submenu abre embutido, e nao flutuando sobre a pagina. */
@media (max-width:900px){
  .nav-drop{ display:block }
  .nav-drop-btn{
    width:100%;
    justify-content:space-between;
    padding:13px 0;
    border-bottom:1px solid var(--linha);
  }
  .nav-drop-menu{
    position:static;
    min-width:0;
    margin:0 0 0 14px;
    padding:0;
    border:0;
    border-left:2px solid var(--linha);
    border-radius:0;
    box-shadow:none;
    background:none;
  }
  .nav-drop-menu a{ padding:11px 0 11px 14px; font-size:15.5px }
}


/* ---------- COMO FUNCIONA CADA JOGO (pagina do gerador) ----------
   Um cartao por modalidade, com a borda esquerda na cor do jogo. Sem
   ela a lista virava um bloco de texto corrido, com nome e descricao
   indistinguiveis. */
.ger-jogos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(304px,100%),1fr));
  gap:14px;
  list-style:none;
  padding:0;
  margin:0;
}
.ger-jogos li{
  padding:19px 22px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-left:5px solid var(--acento);
  border-radius:0 12px 12px 0;
}
.ger-jogos a{
  display:inline-block;
  margin-bottom:9px;
  font-family:var(--fonte-display);
  font-weight:800;
  font-stretch:104%;
  font-size:20px;
  color:var(--tinta);
}
.ger-jogos a:hover{ color:var(--azul); text-decoration:underline }
.ger-jogos p{
  margin:0;
  font-size:16px;
  line-height:1.65;
  color:var(--tinta-60);
  max-width:none;
}


/* ==================================================================
   SIMULADOR: VOLANTE E RESULTADO

   Acerto e erro nao viram verde e vermelho: a paleta do site e azul e
   laranja, e cor nova por estado abriria excecao que nao fecha mais.
   Acerto e a bola cheia na cor do jogo; erro e a bola apagada. A forma
   distingue sozinha, e funciona para quem nao enxerga cor.
   ================================================================== */

.volante{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(46px,1fr));
  gap:7px;
  margin:22px 0 14px;
}
.vol-n{
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:2px solid var(--linha);
  border-radius:50%;
  background:var(--branco);
  color:var(--tinta-60);
  font-family:var(--fonte-display);
  font-weight:700;
  font-size:15px;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
}
.vol-n:hover:not(:disabled){ border-color:var(--acento); color:var(--tinta) }
.vol-n:focus-visible{ outline:3px solid var(--laranja); outline-offset:2px }
.vol-n:disabled{ opacity:.4; cursor:default }
.vol-n.on{
  background:var(--acento-placa);
  border-color:var(--acento-placa);
  color:var(--branco);
  font-weight:800;
}

.ger-conta{ margin:0 0 16px; font-size:15px; color:var(--tinta-60) }
.ger-conta-ok{ color:var(--tinta); font-weight:600 }

.ger-acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px }
.ger-acoes .btn{ width:auto }
.ger-acoes .btn:disabled{ opacity:.45; cursor:default; transform:none; box-shadow:none }

.ger-limpar{
  border:0;
  background:none;
  padding:6px 2px;
  font-family:var(--fonte-texto);
  font-size:15.5px;
  color:var(--tinta-60);
  text-decoration:underline;
  cursor:pointer;
}
.ger-limpar:hover{ color:var(--azul) }
.ger-limpar:focus-visible{ outline:3px solid var(--laranja); outline-offset:2px }


/* ---------- RESULTADO DA CONFERENCIA ---------- */

.ger-saida{ margin-top:28px; padding-top:24px; border-top:1px solid var(--linha) }

.sim-titulo{ font-size:22px; margin-bottom:10px }
.sim-escolha{ font-size:16.5px; color:var(--tinta-60); margin-bottom:6px }
.sim-escolha b{ color:var(--tinta); font-variant-numeric:tabular-nums; letter-spacing:.04em }
.sim-frase{ font-size:17.5px; margin-bottom:20px; max-width:62ch }

.sim-resumo{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
  gap:10px;
  list-style:none;
  padding:0;
  margin:0 0 24px;
}
.sim-resumo li{
  padding:14px 16px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-left:4px solid var(--acento);
  border-radius:0 10px 10px 0;
  font-size:15.5px;
  color:var(--tinta-60);
}
.sim-resumo b{
  display:block;
  font-family:var(--fonte-display);
  font-weight:800;
  font-stretch:112%;
  font-size:27px;
  font-variant-numeric:tabular-nums;
  color:var(--tinta);
  line-height:1.1;
}
.sim-zero{ opacity:.55; border-left-color:var(--linha) }

.sim-filtros{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  margin-bottom:20px;
  padding:16px 18px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:12px;
}
.sim-filtros select{
  font-family:var(--fonte-texto);
  font-size:16px;
  color:var(--tinta);
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:9px;
  padding:10px 12px;
  min-height:44px;
  min-width:150px;
}
.sim-filtros select:focus-visible{
  outline:3px solid var(--laranja);
  outline-offset:2px;
  border-color:var(--azul);
}

.sim-lista{ list-style:none; padding:0; margin:0; display:grid; gap:12px }
.sim-item{
  padding:16px 18px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:12px;
}
.sim-topo{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px;
  margin-bottom:12px;
}
.sim-num{
  font-family:var(--fonte-display);
  font-weight:800;
  font-size:17px;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.sim-num:hover{ color:var(--azul); text-decoration:underline }
.sim-data{ font-size:14px; color:var(--tinta-60); font-variant-numeric:tabular-nums }
.sim-acertos{
  margin-left:auto;
  font-size:12px;
  font-weight:600;
  color:var(--tinta-60);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* Acerto: bola cheia. Erro: bola apagada. Sem cor nova. */
.sim-dezenas{ margin-bottom:10px }
.dz-acerto{
  background:var(--acento-placa) !important;
  border-color:var(--acento-placa) !important;
  color:var(--branco) !important;
}
.dz-erro{
  border-color:var(--linha) !important;
  color:var(--tinta-60) !important;
  opacity:.7;
}

.sim-frase-item{ margin:0; font-size:15px; color:var(--tinta-60) }
.sim-vazio{ margin:14px 0 0; font-size:15.5px; color:var(--tinta-60) }

@media (max-width:560px){
  .volante{ grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:6px }
  .vol-n{ font-size:14px }
  .ger-acoes .btn{ width:100%; justify-content:center }
  .sim-filtros select{ width:100% }
  .sim-filtros .ger-campo{ width:100% }
  .sim-acertos{ margin-left:0 }
}