/* Nome do Dia: the name in big letters, and the births by decade as bars. */
.nome-dia {
  margin: 0 0 6px;
  text-align: center;
}

.nome-dia small {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

.nome-dia b {
  font: 800 clamp(34px, 10vw, 52px) / 1.1 var(--display);
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #c9a6ff, #ff8a3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.quiz .quiz__opcoes:has(> :nth-child(9)) {
  grid-template-columns: repeat(3, 1fr);
}

.quiz .quiz__opcoes:has(> :nth-child(9)) .quiz__opcao {
  padding: 12px 6px;
  text-align: center;
  font-size: 14px;
}

.barras {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  align-items: end;
  gap: 4px;
  height: 120px;
  margin: 12px 0 4px;
}

.barras__col {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  text-align: center;
}

.barras__col span {
  align-self: end;
  background: var(--surface-2);
  border-radius: 4px 4px 0 0;
}

.barras__col--pico span {
  background: var(--accent);
}

.barras__col small {
  font-size: 11px;
  color: var(--muted);
}

.topo {
  margin: 6px 0 0;
  padding-left: 22px;
}