/* Sequência de dias de estudo (as peças antigas da tela inicial antiga e do #/figurinhas do app.js, no traço de
   antes) e, no fim, a comemoração de conquista nova no visual do Zero DP, que vale em qualquer tela. O quadro novo de
   conquistas é o css/conquistas.css. Só tokens. */

/* ===== faixa do início ===== */
.faixa-seq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 22px;
  padding: 14px 16px 16px;
  border: var(--bw) solid var(--traco);
  border-radius: var(--raio-4);
  background: var(--superficie);
}
@media (min-width: 760px) {
  .faixa-seq { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 22px; padding: 14px 18px; }
}

.seq-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.seq-chama { flex: none; width: 36px; height: auto; transform-origin: 50% 90%; }
.acesa .seq-chama, .seq-resumo .seq-chama { animation: seq-tremula 2.8s ease-in-out infinite; }
.zerada .seq-chama { filter: grayscale(1); opacity: .4; }
@keyframes seq-tremula {
  0%, 100% { transform: scale(1) rotate(-1deg); }
  50% { transform: scale(1.04, .97) rotate(1.5deg); }
}
.seq-num { display: grid; gap: 2px; min-width: 0; }
.seq-num p { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600; line-height: 1.15; }
.seq-num b { margin-right: 2px; font-family: var(--fonte-titulo); font-size: 30px; font-weight: 700; }
.seq-num small { color: var(--texto-2); font-size: 14px; line-height: 1.35; }

/* bolinhas dos dias */
.seq-semana, .seq-30 { display: grid; margin: 0; padding: 0; list-style: none; }
.seq-semana { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
@media (min-width: 760px) { .seq-semana { grid-template-columns: repeat(7, 34px); } }
.seq-bol { display: grid; justify-items: center; gap: 4px; }
/* dia sem estudo = bolinha de papel com fio de lápis; dia estudado = ouro com tinta e o certinho; hoje = tracejado */
.seq-bol i { display: grid; place-items: center; width: 30px; height: 30px; border: var(--bw-fio) solid var(--linha-forte); border-radius: 50%; background: var(--superficie-2); }
.seq-bol .ic { width: 16px; height: 16px; stroke-width: 3; }
.seq-bol small { color: var(--texto-3); font-family: var(--fonte-titulo); font-size: 12.5px; font-weight: 600; line-height: 1; }
.seq-bol.feito i { border-color: var(--traco-ouro); background: var(--ouro); color: var(--sobre-ouro); }
.seq-bol.hoje i { outline: 2px dashed var(--traco); outline-offset: 2px; }
.seq-bol.hoje small { color: var(--texto); font-weight: 700; }

/* atalho pras conquistas */
.seq-album {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 10px 6px 8px;
  border: var(--bw-fio) solid var(--traco);
  border-radius: var(--raio-3);
  background: var(--superficie);
  box-shadow: var(--shadow-xs);
  color: var(--texto);
  text-decoration: none;
  transition: background-color .15s, transform .12s var(--ease), box-shadow .12s var(--ease);
}
.seq-album img { width: 40px; height: 40px; }
.seq-album > .ic:first-child { width: 26px; height: 26px; margin: 0 6px; color: var(--texto); }
.seq-album span { display: grid; flex: 1; line-height: 1.2; }
.seq-album b { font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600; }
.seq-album small { color: var(--texto-3); font-size: 13px; font-weight: 500; }
.seq-album > .ic:last-child { width: 18px; height: 18px; color: var(--texto); }
@media (hover: hover) { .seq-album:hover { background: var(--acento-suave); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--sombra-dura); } }
.seq-album:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--sombra-dura); }

/* ===== tela de conquistas (#/figurinhas) ===== */
.seq-resumo { display: grid; gap: 18px; margin-bottom: 6px; }
@media (min-width: 900px) {
  .seq-resumo { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 28px; }
  .seq-resumo .seq-mes { grid-column: 1 / -1; }
}
.seq-resumo .seq-chama { width: 44px; }
.seq-resumo .seq-num b { font-size: 40px; }
.seq-numeros { display: flex; gap: 10px; margin: 0; }
.seq-numeros div { flex: 1; min-width: 112px; padding: 10px 14px; border: var(--bw-fio) dashed var(--linha-forte); border-radius: var(--raio-3); background: var(--superficie-2); }
.seq-numeros dt { color: var(--texto-3); font-size: 13px; font-weight: 600; }
.seq-numeros dd { margin: 0; font-family: var(--fonte-titulo); font-size: 21px; font-weight: 700; }
.seq-mes { display: grid; gap: 10px; }
.seq-mes h2 { color: var(--texto-3); font-size: 13.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.seq-30 { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px 2px; }
@media (min-width: 760px) { .seq-30 { grid-template-columns: repeat(15, minmax(0, 1fr)); } }
.seq-30 .seq-bol i { width: 24px; height: 24px; }
.seq-30 .seq-bol .ic { width: 13px; height: 13px; }
.seq-30 .seq-bol small { font-size: 11.5px; }

.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 380px) { .album { grid-template-columns: 1fr 1fr; gap: 10px; } }
.fig-slot {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 14px 12px 16px;
  border: var(--bw-fio) solid var(--traco);
  border-radius: var(--raio-4);
  background: var(--superficie);
  text-align: center;
}
.fig-slot h3 { margin-top: 6px; font-size: 16px; overflow-wrap: anywhere; }
.fig-slot p { color: var(--texto-2); font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
/* a medalha é um adesivo desenhado (halo de papel e sombra dura já vêm no SVG): nada de brilho em volta */
.fig-img { position: relative; isolation: isolate; display: block; width: min(100%, 96px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; }
.fig-img img { width: 100%; height: 100%; }
button.fig-img { cursor: pointer; transition: transform .2s var(--bounce); }
@media (hover: hover) { .colada button.fig-img:hover { transform: rotate(-5deg) scale(1.05); } }
.colada button.fig-img:active { transform: rotate(2deg) scale(.95); }
.fig-quando { margin-top: 2px; color: var(--texto-3); font-size: 12.5px; font-weight: 600; }

/* ainda não conquistada: a medalha apagada + cadeado; o progresso escrito */
.vazio-slot { border-style: dashed; border-color: var(--linha-forte); background: var(--superficie-2); }
.vazio-slot h3 { color: var(--texto-2); }
/* trancada: a própria medalha apagada (cinza, clarinha) */
.vazio-slot .fig-img img { filter: grayscale(1) contrast(.85); opacity: .32; }
.fig-tranca {
  position: absolute;
  right: 0;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: var(--bw-fio) solid var(--traco);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--texto);
}
.fig-tranca .ic { width: 15px; height: 15px; }
.fig-prog { display: grid; gap: 4px; width: 100%; margin-top: 8px; }
.fig-prog small { color: var(--texto-2); font-family: var(--fonte-titulo); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ===== comemoração de conquista nova (js/sequencia.js; vale em qualquer tela) =====
   No visual do Zero DP: cartão que flutua (por isso tem sombra), a medalha, a etiqueta dourada e o Zero comemorando
   em pé em cima do cartão quando a tela não tem um Zero dela. Não bloqueia a tela: só o cartão recebe toque. */
.festa { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.festa-cartao {
  position: absolute;
  bottom: calc(var(--abas-alt, 0px) + 16px + env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 4px 16px;
  width: min(100% - 2 * var(--gutter), 460px);
  padding: 16px 48px 16px 16px;
  border: var(--bw) solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--superficie-elevada);
  box-shadow: var(--sombra-flutua);
  color: var(--texto);
  pointer-events: auto;
  transform: translateX(-50%);
  transition: bottom .3s var(--ease);
  animation: festa-sobe .45s var(--ease) both;
}
/* com o menu lateral, o cartão centra na coluna do conteúdo (não na janela inteira) */
@media (min-width: 900px) { body:has(#abas:not([hidden])) .festa-cartao { left: calc(50% + var(--menu-larg, 256px) / 2); } }
/* aviso rápido aberto embaixo: a conquista sobe um pouco pra não tampar ele */
body:has(.aviso.mostra) .festa-cartao { bottom: calc(var(--abas-alt, 0px) + 84px + env(safe-area-inset-bottom)); }
/* player de leitura aberto (mesmo se ele abrir com a conquista já na tela): a conquista sobe pro topo e sem o Zero */
body.vz-com-player .festa-cartao { top: calc(72px + env(safe-area-inset-top)); bottom: auto !important; }
body.vz-com-player .festa-zero { display: none; }
.festa.saindo .festa-cartao { animation: festa-desce .26s var(--ease) both; }
@keyframes festa-sobe { from { opacity: 0; transform: translate(-50%, 32px); } }
@keyframes festa-desce { to { opacity: 0; transform: translate(-50%, 24px); } }

/* a medalha entra crescendo de leve */
.festa-fig { position: relative; width: 80px; height: 80px; animation: festa-fig .5s var(--bounce) .1s both; }
.festa-fig img { display: block; width: 100%; height: 100%; }
@keyframes festa-fig { from { opacity: 0; transform: scale(.7); } }

/* o Zero comemorando em pé em cima do cartão (os pés encostam na borda) */
.festa-zero { position: absolute; right: 56px; bottom: calc(100% - 10px); width: 72px; pointer-events: none; }
.festa-zero img { display: block; width: 100%; height: auto; }
/* um mascote por tela: se a tela ganhar um Zero com a comemoração aberta, o da comemoração sai */
body:has(#tela img.zero:not([data-pose="rosto"])) .festa-zero { display: none; }

.festa-texto { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.festa-texto .etiqueta { margin-bottom: 2px; }
.festa-texto h2 { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.festa-texto p { color: var(--texto-2); font-size: 14.5px; line-height: 1.4; }
.festa-texto .btn { margin-top: 8px; margin-bottom: 4px; }
.festa-mais { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
.festa-mais small { margin-right: 2px; color: var(--texto-3); font-size: 12.5px; font-weight: 600; }
.festa-mais img { width: 32px; height: 32px; }
.festa-mais b { font-family: var(--fonte-titulo); font-size: 13px; }
.festa-fechar { position: absolute; top: 8px; right: 8px; }

@media (max-width: 400px) {
  .festa-cartao { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; padding: 14px 46px 14px 14px; }
  .festa-fig { width: 64px; height: 64px; }
  .festa-texto h2 { font-size: 18px; }
  .festa-zero { right: 50px; width: 64px; }
}

/* durante a prova a conquista aparece no topo (o botão "Próxima" fica embaixo) */
.festa.no-topo .festa-cartao { top: calc(72px + env(safe-area-inset-top)); bottom: auto !important; animation-name: festa-desce-topo; }
@keyframes festa-desce-topo { from { opacity: 0; transform: translate(-50%, -30px); } }
.festa.no-topo.saindo .festa-cartao { animation: festa-some-topo .26s var(--ease) both; }
@keyframes festa-some-topo { to { opacity: 0; transform: translate(-50%, -24px); } }

@media (prefers-reduced-motion: reduce) {
  .seq-chama, .festa-cartao, .festa-fig, .festa.saindo .festa-cartao { animation: none !important; }
}